Add Channel Mention selection ability (#7151)

* Add Channel Mention selection ability * Fix mentioned user name being smaller than other text * Improve logic for locating a mention * Fix mentioning with enter on livestream * Fix breaking for invalid URI query * Handle punctuation after mention * Fix name display and appeareance * Use canonical url * Fix missing search
2021-09-30 18:30:32 -03:00 · 2021-09-30 18:30:32 -03:00 · 2f4dedfba2
commit 2f4dedfba2
parent 81abae875f
19 changed files with 744 additions and 81 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added "Shuffle" option on Lists ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
 - Added Play Next/Previous buttons (with shortcuts SHIFT+N/SHIFT+P) ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
 - Added separate control for autoplay next on video player ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
+- Added Channel Mention selection ability while creating a comment ([#7151](https://github.com/lbryio/lbry-desktop/pull/7151))

 ### Changed
 - Changing the supported language from Filipino to Tagalog _community pr!_ ([#6951](https://github.com/lbryio/lbry-desktop/pull/6951))
--- a/ui/component/channelMentionSuggestion/index.js
+++ b/ui/component/channelMentionSuggestion/index.js
@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
+import ChannelMentionSuggestion from './view';
+
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+  isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
+});
+
+export default connect(select)(ChannelMentionSuggestion);
--- a/ui/component/channelMentionSuggestion/view.jsx
+++ b/ui/component/channelMentionSuggestion/view.jsx
@ -0,0 +1,32 @@
+// @flow
+import { ComboboxOption } from '@reach/combobox';
+import ChannelThumbnail from 'component/channelThumbnail';
+import React from 'react';
+
+type Props = {
+  claim: ?Claim,
+  uri?: string,
+  isResolvingUri: boolean,
+};
+
+export default function ChannelMentionSuggestion(props: Props) {
+  const { claim, uri, isResolvingUri } = props;
+
+  return !claim ? null : (
+    <ComboboxOption value={uri}>
+      {isResolvingUri ? (
+        <div className="channel-mention__suggestion">
+          <div className="media__thumb media__thumb--resolving" />
+        </div>
+      ) : (
+        <div className="channel-mention__suggestion">
+          <ChannelThumbnail xsmall uri={uri} />
+          <span className="channel-mention__suggestion-label">
+            <div className="channel-mention__suggestion-title">{(claim.value && claim.value.title) || claim.name}</div>
+            <div className="channel-mention__suggestion-name">{claim.name}</div>
+          </span>
+        </div>
+      )}
+    </ComboboxOption>
+  );
+}
--- a/ui/component/channelMentionSuggestions/index.js
+++ b/ui/component/channelMentionSuggestions/index.js
@ -0,0 +1,36 @@
+import { connect } from 'react-redux';
+import { selectShowMatureContent } from 'redux/selectors/settings';
+import { selectSubscriptions } from 'redux/selectors/subscriptions';
+import { withRouter } from 'react-router';
+import { doResolveUris, makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectTopLevelCommentsForUri } from 'redux/selectors/comments';
+import ChannelMentionSuggestions from './view';
+
+const select = (state, props) => {
+  const subscriptionUris = selectSubscriptions(state).map(({ uri }) => uri);
+  const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state);
+
+  const commentorUris = [];
+  // Avoid repeated commentors
+  topLevelComments.map(({ channel_url }) => !commentorUris.includes(channel_url) && commentorUris.push(channel_url));
+
+  const getUnresolved = (uris) =>
+    uris.map((uri) => !makeSelectClaimForUri(uri)(state) && uri).filter((uri) => uri !== false);
+  const getCanonical = (uris) =>
+    uris
+      .map((uri) => makeSelectClaimForUri(uri)(state) && makeSelectClaimForUri(uri)(state).canonical_url)
+      .filter((uri) => Boolean(uri));
+
+  return {
+    commentorUris,
+    subscriptionUris,
+    unresolvedCommentors: getUnresolved(commentorUris),
+    unresolvedSubscriptions: getUnresolved(subscriptionUris),
+    canonicalCreator: getCanonical([props.creatorUri])[0],
+    canonicalCommentors: getCanonical(commentorUris),
+    canonicalSubscriptions: getCanonical(subscriptionUris),
+    showMature: selectShowMatureContent(state),
+  };
+};
+
+export default withRouter(connect(select, { doResolveUris })(ChannelMentionSuggestions));
--- a/ui/component/channelMentionSuggestions/view.jsx
+++ b/ui/component/channelMentionSuggestions/view.jsx
@ -0,0 +1,285 @@
+// @flow
+import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList } from '@reach/combobox';
+import { Form } from 'component/common/form';
+import { parseURI, regexInvalidURI } from 'lbry-redux';
+import { SEARCH_OPTIONS } from 'constants/search';
+import * as KEYCODES from 'constants/keycodes';
+import ChannelMentionSuggestion from 'component/channelMentionSuggestion';
+import ChannelMentionTopSuggestion from 'component/channelMentionTopSuggestion';
+import React from 'react';
+import Spinner from 'component/spinner';
+import type { ElementRef } from 'react';
+import useLighthouse from 'effects/use-lighthouse';
+
+const INPUT_DEBOUNCE_MS = 1000;
+const LIGHTHOUSE_MIN_CHARACTERS = 3;
+
+type Props = {
+  inputRef: any,
+  mentionTerm: string,
+  noTopSuggestion?: boolean,
+  showMature: boolean,
+  isLivestream: boolean,
+  creatorUri: string,
+  commentorUris: Array<string>,
+  subscriptionUris: Array<string>,
+  unresolvedCommentors: Array<string>,
+  unresolvedSubscriptions: Array<string>,
+  canonicalCreator: string,
+  canonicalCommentors: Array<string>,
+  canonicalSubscriptions: Array<string>,
+  doResolveUris: (Array<string>) => void,
+  customSelectAction?: (string, number) => void,
+};
+
+export default function ChannelMentionSuggestions(props: Props) {
+  const {
+    unresolvedCommentors,
+    unresolvedSubscriptions,
+    canonicalCreator,
+    isLivestream,
+    creatorUri,
+    inputRef,
+    showMature,
+    noTopSuggestion,
+    mentionTerm,
+    doResolveUris,
+    customSelectAction,
+  } = props;
+  const comboboxInputRef: ElementRef<any> = React.useRef();
+  const comboboxListRef: ElementRef<any> = React.useRef();
+
+  const mainEl = document.querySelector('.channel-mention__suggestions');
+
+  const [debouncedTerm, setDebouncedTerm] = React.useState('');
+  const [mostSupported, setMostSupported] = React.useState('');
+  const [canonicalResults, setCanonicalResults] = React.useState([]);
+
+  const isRefFocused = (ref) => ref && ref.current === document.activeElement;
+
+  const subscriptionUris = props.subscriptionUris.filter((uri) => uri !== creatorUri);
+  const canonicalSubscriptions = props.canonicalSubscriptions.filter((uri) => uri !== canonicalCreator);
+  const commentorUris = props.commentorUris.filter((uri) => uri !== creatorUri && !subscriptionUris.includes(uri));
+  const canonicalCommentors = props.canonicalCommentors.filter(
+    (uri) => uri !== canonicalCreator && !canonicalSubscriptions.includes(uri)
+  );
+
+  const termToMatch = mentionTerm && mentionTerm.replace('@', '').toLowerCase();
+  const allShownUris = [creatorUri, ...subscriptionUris, ...commentorUris];
+  const allShownCanonical = [canonicalCreator, ...canonicalSubscriptions, ...canonicalCommentors];
+  const possibleMatches = allShownUris.filter((uri) => {
+    try {
+      const { channelName } = parseURI(uri);
+      return channelName.toLowerCase().includes(termToMatch);
+    } catch (e) {}
+  });
+
+  const searchSize = 5;
+  const additionalOptions = { isBackgroundSearch: false, [SEARCH_OPTIONS.CLAIM_TYPE]: SEARCH_OPTIONS.INCLUDE_CHANNELS };
+  const { results, loading } = useLighthouse(debouncedTerm, showMature, searchSize, additionalOptions, 0);
+  const stringifiedResults = JSON.stringify(results);
+
+  const hasMinLength = mentionTerm && mentionTerm.length >= LIGHTHOUSE_MIN_CHARACTERS;
+  const isTyping = debouncedTerm !== mentionTerm;
+  const showPlaceholder = isTyping || loading;
+
+  const isUriFromTermValid = !regexInvalidURI.test(mentionTerm.substring(1));
+
+  const handleSelect = React.useCallback(
+    (value, key) => {
+      if (customSelectAction) {
+        // Give them full results, as our resolved one might truncate the claimId.
+        customSelectAction(value || (results && results.find((r) => r.startsWith(value))) || '', Number(key));
+      }
+    },
+    [customSelectAction, results]
+  );
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (isTyping) setDebouncedTerm(!hasMinLength ? '' : mentionTerm);
+    }, INPUT_DEBOUNCE_MS);
+
+    return () => clearTimeout(timer);
+  }, [hasMinLength, isTyping, mentionTerm]);
+
+  React.useEffect(() => {
+    if (!mainEl) return;
+    const header = document.querySelector('.header__navigation');
+
+    function handleReflow() {
+      const boxAtTopOfPage = header && mainEl.getBoundingClientRect().top <= header.offsetHeight;
+      const boxAtBottomOfPage = mainEl.getBoundingClientRect().bottom >= window.innerHeight;
+
+      if (boxAtTopOfPage) {
+        mainEl.setAttribute('flow-bottom', '');
+      }
+      if (mainEl.getAttribute('flow-bottom') !== null && boxAtBottomOfPage) {
+        mainEl.removeAttribute('flow-bottom');
+      }
+    }
+    handleReflow();
+
+    window.addEventListener('scroll', handleReflow);
+    return () => window.removeEventListener('scroll', handleReflow);
+  }, [mainEl]);
+
+  React.useEffect(() => {
+    if (!inputRef || !comboboxInputRef || !mentionTerm) return;
+
+    function handleKeyDown(event) {
+      const { keyCode } = event;
+      const activeElement = document.activeElement;
+
+      if (keyCode === KEYCODES.UP || keyCode === KEYCODES.DOWN) {
+        if (isRefFocused(comboboxInputRef)) {
+          const selectedId = activeElement && activeElement.getAttribute('aria-activedescendant');
+          const selectedItem = selectedId && document.querySelector(`li[id="${selectedId}"]`);
+          if (selectedItem) selectedItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        } else {
+          // $FlowFixMe
+          comboboxInputRef.current.focus();
+        }
+      } else {
+        if ((isRefFocused(comboboxInputRef) || isRefFocused(inputRef)) && keyCode === KEYCODES.TAB) {
+          event.preventDefault();
+          const activeValue = activeElement && activeElement.getAttribute('value');
+
+          if (activeValue) {
+            handleSelect(activeValue, keyCode);
+          } else if (possibleMatches.length) {
+            // $FlowFixMe
+            const suggest = allShownCanonical.find((matchUri) => possibleMatches.find((uri) => uri.includes(matchUri)));
+            if (suggest) handleSelect(suggest, keyCode);
+          } else if (results) {
+            handleSelect(mentionTerm, keyCode);
+          }
+        }
+        if (isRefFocused(comboboxInputRef)) {
+          // $FlowFixMe
+          inputRef.current.focus();
+        }
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [allShownCanonical, handleSelect, inputRef, mentionTerm, possibleMatches, results]);
+
+  React.useEffect(() => {
+    if (!stringifiedResults) return;
+
+    const arrayResults = JSON.parse(stringifiedResults);
+    if (arrayResults && arrayResults.length > 0) {
+      // $FlowFixMe
+      doResolveUris(arrayResults).then((response) => {
+        try {
+          // $FlowFixMe
+          const canonical_urls = Object.values(response).map(({ canonical_url }) => canonical_url);
+          setCanonicalResults(canonical_urls);
+        } catch (e) {}
+      });
+    }
+  }, [doResolveUris, stringifiedResults]);
+
+  // Only resolve commentors on Livestreams when actually mentioning/looking for it
+  React.useEffect(() => {
+    if (isLivestream && unresolvedCommentors && mentionTerm) doResolveUris(unresolvedCommentors);
+  }, [doResolveUris, isLivestream, mentionTerm, unresolvedCommentors]);
+
+  // Only resolve the subscriptions that match the mention term, instead of all
+  React.useEffect(() => {
+    if (isTyping) return;
+
+    const urisToResolve = [];
+    subscriptionUris.map(
+      (uri) =>
+        hasMinLength &&
+        possibleMatches.includes(uri) &&
+        unresolvedSubscriptions.includes(uri) &&
+        urisToResolve.push(uri)
+    );
+
+    if (urisToResolve.length > 0) doResolveUris(urisToResolve);
+  }, [doResolveUris, hasMinLength, isTyping, possibleMatches, subscriptionUris, unresolvedSubscriptions]);
+
+  const suggestionsRow = (
+    label: string,
+    suggestions: Array<string>,
+    canonical: Array<string>,
+    hasSuggestionsBelow: boolean
+  ) => {
+    if (mentionTerm.length > 1 && suggestions !== results) {
+      suggestions = suggestions.filter((uri) => possibleMatches.includes(uri));
+    } else if (suggestions === results) {
+      suggestions = suggestions.filter((uri) => !allShownUris.includes(uri));
+    }
+    // $FlowFixMe
+    suggestions = suggestions
+      .map((matchUri) => canonical.find((uri) => matchUri.includes(uri)))
+      .filter((uri) => Boolean(uri));
+
+    if (canonical === canonicalResults) {
+      suggestions = suggestions.filter((uri) => uri !== mostSupported);
+    }
+
+    return !suggestions.length ? null : (
+      <>
+        <div className="channel-mention__label">{label}</div>
+        {suggestions.map((uri) => (
+          <ChannelMentionSuggestion key={uri} uri={uri} />
+        ))}
+        {hasSuggestionsBelow && <hr className="channel-mention__top-separator" />}
+      </>
+    );
+  };
+
+  return isRefFocused(inputRef) || isRefFocused(comboboxInputRef) ? (
+    <Form onSubmit={() => handleSelect(mentionTerm)}>
+      <Combobox className="channel-mention" onSelect={handleSelect}>
+        <ComboboxInput ref={comboboxInputRef} className="channel-mention__input--none" value={mentionTerm} />
+        {mentionTerm && isUriFromTermValid && (
+          <ComboboxPopover portal={false} className="channel-mention__suggestions">
+            <ComboboxList ref={comboboxListRef}>
+              {creatorUri &&
+                suggestionsRow(
+                  __('Creator'),
+                  [creatorUri],
+                  [canonicalCreator],
+                  canonicalSubscriptions.length > 0 || commentorUris.length > 0 || !showPlaceholder
+                )}
+              {canonicalSubscriptions.length > 0 &&
+                suggestionsRow(
+                  __('Following'),
+                  subscriptionUris,
+                  canonicalSubscriptions,
+                  commentorUris.length > 0 || !showPlaceholder
+                )}
+              {commentorUris.length > 0 &&
+                suggestionsRow(__('From comments'), commentorUris, canonicalCommentors, !showPlaceholder)}
+
+              {hasMinLength &&
+                (showPlaceholder ? (
+                  <Spinner type="small" />
+                ) : (
+                  results && (
+                    <>
+                      {!noTopSuggestion && (
+                        <ChannelMentionTopSuggestion
+                          query={debouncedTerm}
+                          shownUris={allShownCanonical}
+                          setMostSupported={(winningUri) => setMostSupported(winningUri)}
+                        />
+                      )}
+                      {suggestionsRow(__('From search'), results, canonicalResults, false)}
+                    </>
+                  )
+                ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </Form>
+  ) : null;
+}
--- a/ui/component/channelMentionTopSuggestion/index.js
+++ b/ui/component/channelMentionTopSuggestion/index.js
@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { makeSelectIsUriResolving, doResolveUri } from 'lbry-redux';
+import { makeSelectWinningUriForQuery } from 'redux/selectors/search';
+import ChannelMentionTopSuggestion from './view';
+
+const select = (state, props) => {
+  const uriFromQuery = `lbry://${props.query}`;
+  return {
+    uriFromQuery,
+    isResolvingUri: makeSelectIsUriResolving(uriFromQuery)(state),
+    winningUri: makeSelectWinningUriForQuery(props.query)(state),
+  };
+};
+
+export default connect(select, { doResolveUri })(ChannelMentionTopSuggestion);
--- a/ui/component/channelMentionTopSuggestion/view.jsx
+++ b/ui/component/channelMentionTopSuggestion/view.jsx
@ -0,0 +1,49 @@
+// @flow
+import ChannelMentionSuggestion from 'component/channelMentionSuggestion';
+import LbcSymbol from 'component/common/lbc-symbol';
+import React from 'react';
+
+type Props = {
+  uriFromQuery: string,
+  winningUri: string,
+  isResolvingUri: boolean,
+  shownUris: Array<string>,
+  setMostSupported: (string) => void,
+  doResolveUri: (string) => void,
+};
+
+export default function ChannelMentionTopSuggestion(props: Props) {
+  const { uriFromQuery, winningUri, isResolvingUri, shownUris, setMostSupported, doResolveUri } = props;
+
+  React.useEffect(() => {
+    if (uriFromQuery) doResolveUri(uriFromQuery);
+  }, [doResolveUri, uriFromQuery]);
+
+  React.useEffect(() => {
+    if (winningUri) setMostSupported(winningUri);
+  }, [setMostSupported, winningUri]);
+
+  if (isResolvingUri) {
+    return (
+      <div className="channel-mention__winning-claim">
+        <div className="channel-mention__label channel-mention__placeholder-label" />
+
+        <div className="channel-mention__suggestion channel-mention__placeholder-suggestion">
+          <div className="channel-mention__placeholder-thumbnail" />
+          <div className="channel-mention__placeholder-info" />
+        </div>
+        <hr className="channel-mention__top-separator" />
+      </div>
+    );
+  }
+
+  return !winningUri || shownUris.includes(winningUri) ? null : (
+    <>
+      <div className="channel-mention__label">
+        <LbcSymbol prefix={__('Most Supported')} />
+      </div>
+      <ChannelMentionSuggestion uri={winningUri} />
+      <hr className="channel-mention__top-separator" />
+    </>
+  );
+}
--- a/ui/component/claimLink/index.js
+++ b/ui/component/claimLink/index.js
@ -1,22 +1,32 @@
 import { connect } from 'react-redux';
-import { doResolveUri, makeSelectTitleForUri, makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
+import { doResolveUri, makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
+import { doSetPlayingUri } from 'redux/actions/content';
 import { selectBlackListedOutpoints } from 'lbryinc';
 import { selectPlayingUri } from 'redux/selectors/content';
-import { doSetPlayingUri } from 'redux/actions/content';
 import ClaimLink from './view';

 const select = (state, props) => {
+  let uri = props.uri;
+  let claim;
+
+  function getValidClaim(testUri) {
+    claim = makeSelectClaimForUri(testUri)(state);
+    if (claim === null) {
+      getValidClaim(testUri.substring(0, testUri.length - 1));
+    } else {
+      uri = testUri;
+    }
+  }
+  getValidClaim(uri);
+
  return {
-    uri: props.uri,
-    claim: makeSelectClaimForUri(props.uri)(state),
-    title: makeSelectTitleForUri(props.uri)(state),
-    isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
+    uri,
+    claim,
+    fullUri: props.uri,
+    isResolvingUri: makeSelectIsUriResolving(uri)(state),
    blackListedOutpoints: selectBlackListedOutpoints(state),
    playingUri: selectPlayingUri(state),
  };
 };

-export default connect(select, {
-  doResolveUri,
-  doSetPlayingUri,
-})(ClaimLink);
+export default connect(select, { doResolveUri, doSetPlayingUri })(ClaimLink);
--- a/ui/component/claimLink/view.jsx
+++ b/ui/component/claimLink/view.jsx
@ -1,14 +1,15 @@
 // @flow
-import * as React from 'react';
-import classnames from 'classnames';
-import EmbedPlayButton from 'component/embedPlayButton';
-import Button from 'component/button';
-import UriIndicator from 'component/uriIndicator';
 import { INLINE_PLAYER_WRAPPER_CLASS } from 'component/fileRenderFloating/view';
 import { SIMPLE_SITE } from 'config';
+import * as React from 'react';
+import Button from 'component/button';
+import classnames from 'classnames';
+import EmbedPlayButton from 'component/embedPlayButton';
+import UriIndicator from 'component/uriIndicator';

 type Props = {
  uri: string,
+  fullUri: string,
  claim: StreamClaim,
  children: React.Node,
  description: ?string,
@ -68,6 +69,7 @@ class ClaimLink extends React.Component<Props> {
  render() {
    const {
      uri,
+      fullUri,
      claim,
      children,
      isResolvingUri,
@ -92,7 +94,10 @@ class ClaimLink extends React.Component<Props> {
    const isChannel = valueType === 'channel';

    return isChannel ? (
-      <UriIndicator uri={uri} link />
+      <>
+        <UriIndicator uri={uri} link />
+        <span>{fullUri.length > uri.length ? fullUri.substring(uri.length, fullUri.length) : ''}</span>
+      </>
    ) : allowPreview ? (
      <div className={classnames('claim-link')}>
        <div
--- a/ui/component/commentCreate/index.js
+++ b/ui/component/commentCreate/index.js
@ -6,16 +6,13 @@ import {
  selectFetchingMyChannels,
  doSendTip,
 } from 'lbry-redux';
-import { doOpenModal, doSetActiveChannel } from 'redux/actions/app';
 import { doCommentCreate, doFetchCreatorSettings, doCommentById } from 'redux/actions/comments';
-import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectSettingsByChannelId } from 'redux/selectors/comments';
 import { CommentCreate } from './view';
 import { doToast } from 'redux/actions/notifications';

 const select = (state, props) => ({
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
  claim: makeSelectClaimForUri(props.uri)(state),
  channels: selectMyChannelClaims(state),
  isFetchingChannels: selectFetchingMyChannels(state),
@ -38,8 +35,6 @@ const perform = (dispatch, ownProps) => ({
        environment
      )
    ),
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)),
  sendTip: (params, callback, errorCallback) => dispatch(doSendTip(params, false, callback, errorCallback, false)),
  doToast: (options) => dispatch(doToast(options)),
  doFetchCreatorSettings: (channelClaimId) => dispatch(doFetchCreatorSettings(channelClaimId)),
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@ -1,40 +1,39 @@
 // @flow
-import type { ElementRef } from 'react';
-import { SIMPLE_SITE } from 'config';
-import * as PAGES from 'constants/pages';
-import * as ICONS from 'constants/icons';
-import * as KEYCODES from 'constants/keycodes';
-import React from 'react';
-import classnames from 'classnames';
-import { FormField, Form } from 'component/common/form';
-import Icon from 'component/common/icon';
-import Button from 'component/button';
-import SelectChannel from 'component/selectChannel';
-import usePersistedState from 'effects/use-persisted-state';
 import { FF_MAX_CHARS_IN_COMMENT, FF_MAX_CHARS_IN_LIVESTREAM_COMMENT } from 'constants/form-field';
-import { useHistory } from 'react-router';
-import WalletTipAmountSelector from 'component/walletTipAmountSelector';
-import CreditAmount from 'component/common/credit-amount';
-import ChannelThumbnail from 'component/channelThumbnail';
-import I18nMessage from 'component/i18nMessage';
-import UriIndicator from 'component/uriIndicator';
-import Empty from 'component/common/empty';
+import { FormField, Form } from 'component/common/form';
 import { getChannelIdFromClaim } from 'util/claim';
 import { Lbryio } from 'lbryinc';
+import { SIMPLE_SITE } from 'config';
+import { useHistory } from 'react-router';
+import * as ICONS from 'constants/icons';
+import * as KEYCODES from 'constants/keycodes';
+import * as PAGES from 'constants/pages';
+import Button from 'component/button';
+import ChannelMentionSuggestions from 'component/channelMentionSuggestions';
+import ChannelThumbnail from 'component/channelThumbnail';
+import classnames from 'classnames';
+import CreditAmount from 'component/common/credit-amount';
+import Empty from 'component/common/empty';
+import I18nMessage from 'component/i18nMessage';
+import Icon from 'component/common/icon';
+import React from 'react';
+import SelectChannel from 'component/selectChannel';
+import type { ElementRef } from 'react';
+import UriIndicator from 'component/uriIndicator';
+import usePersistedState from 'effects/use-persisted-state';
+import WalletTipAmountSelector from 'component/walletTipAmountSelector';

 import { getStripeEnvironment } from 'util/stripe';
 let stripeEnvironment = getStripeEnvironment();

 const TAB_FIAT = 'TabFiat';
 const TAB_LBC = 'TabLBC';
+const MENTION_DEBOUNCE_MS = 100;

 type Props = {
  uri: string,
  claim: StreamClaim,
-  createComment: (string, string, string, ?string, ?string, ?string) => Promise<any>,
  channels: ?Array<ChannelClaim>,
-  onDoneReplying?: () => void,
-  onCancelReplying?: () => void,
  isNested: boolean,
  isFetchingChannels: boolean,
  parentId: string,
@ -44,25 +43,26 @@ type Props = {
  bottom: boolean,
  livestream?: boolean,
  embed?: boolean,
-  toast: (string) => void,
  claimIsMine: boolean,
-  sendTip: ({}, (any) => void, (any) => void) => void,
-  doToast: ({ message: string }) => void,
  supportDisabled: boolean,
-  doFetchCreatorSettings: (channelId: string) => Promise<any>,
  settingsByChannelId: { [channelId: string]: PerChannelSettings },
+  shouldFetchComment: boolean,
+  doToast: ({ message: string }) => void,
+  createComment: (string, string, string, ?string, ?string, ?string) => Promise<any>,
+  onDoneReplying?: () => void,
+  onCancelReplying?: () => void,
+  toast: (string) => void,
+  sendTip: ({}, (any) => void, (any) => void) => void,
+  doFetchCreatorSettings: (channelId: string) => Promise<any>,
  setQuickReply: (any) => void,
  fetchComment: (commentId: string) => Promise<any>,
-  shouldFetchComment: boolean,
 };

 export function CommentCreate(props: Props) {
  const {
-    createComment,
+    uri,
    claim,
    channels,
-    onDoneReplying,
-    onCancelReplying,
    isNested,
    isFetchingChannels,
    isReply,
@ -72,36 +72,64 @@ export function CommentCreate(props: Props) {
    livestream,
    embed,
    claimIsMine,
-    sendTip,
-    doToast,
-    doFetchCreatorSettings,
    settingsByChannelId,
    supportDisabled,
+    shouldFetchComment,
+    doToast,
+    createComment,
+    onDoneReplying,
+    onCancelReplying,
+    sendTip,
+    doFetchCreatorSettings,
    setQuickReply,
    fetchComment,
-    shouldFetchComment,
  } = props;
+  const formFieldRef: ElementRef<any> = React.useRef();
+  const formFieldInputRef = formFieldRef && formFieldRef.current && formFieldRef.current.input;
+  const selectionIndex = formFieldInputRef && formFieldInputRef.current && formFieldInputRef.current.selectionStart;
  const buttonRef: ElementRef<any> = React.useRef();
  const {
    push,
    location: { pathname },
  } = useHistory();
+
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [commentFailure, setCommentFailure] = React.useState(false);
  const [successTip, setSuccessTip] = React.useState({ txid: undefined, tipAmount: undefined });
-  const claimId = claim && claim.claim_id;
  const [isSupportComment, setIsSupportComment] = React.useState();
  const [isReviewingSupportComment, setIsReviewingSupportComment] = React.useState();
  const [tipAmount, setTipAmount] = React.useState(1);
  const [commentValue, setCommentValue] = React.useState('');
  const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
-  const hasChannels = channels && channels.length;
-  const charCount = commentValue.length;
  const [activeTab, setActiveTab] = React.useState('');
  const [tipError, setTipError] = React.useState();
  const [deletedComment, setDeletedComment] = React.useState(false);
-  const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length;
+  const [pauseQuickSend, setPauseQuickSend] = React.useState(false);
  const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
+
+  const selectedMentionIndex =
+    commentValue.indexOf('@', selectionIndex) === selectionIndex
+      ? commentValue.indexOf('@', selectionIndex)
+      : commentValue.lastIndexOf('@', selectionIndex);
+  const modifierIndex = commentValue.indexOf(':', selectedMentionIndex);
+  const spaceIndex = commentValue.indexOf(' ', selectedMentionIndex);
+  const mentionLengthIndex =
+    modifierIndex >= 0 && (spaceIndex === -1 || modifierIndex < spaceIndex)
+      ? modifierIndex
+      : spaceIndex >= 0 && (modifierIndex === -1 || spaceIndex < modifierIndex)
+      ? spaceIndex
+      : commentValue.length;
+  const channelMention =
+    selectedMentionIndex >= 0 && selectionIndex <= mentionLengthIndex
+      ? commentValue.substring(selectedMentionIndex, mentionLengthIndex)
+      : '';
+
+  const claimId = claim && claim.claim_id;
+  const signingChannel = (claim && claim.signing_channel) || claim;
+  const channelUri = signingChannel && signingChannel.permanent_url;
+  const hasChannels = channels && channels.length;
+  const charCount = commentValue ? commentValue.length : 0;
+  const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length || pauseQuickSend;
  const channelId = getChannelIdFromClaim(claim);
  const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
  const minSuper = (channelSettings && channelSettings.min_tip_amount_super_chat) || 0;
@ -109,15 +137,6 @@ export function CommentCreate(props: Props) {
  const minAmount = minTip || minSuper || 0;
  const minAmountMet = minAmount === 0 || tipAmount >= minAmount;

-  // Fetch top-level comments to identify if it has been deleted and can reply to it
-  React.useEffect(() => {
-    if (shouldFetchComment && fetchComment) {
-      fetchComment(parentId).then((result) => {
-        setDeletedComment(String(result).includes('Error'));
-      });
-    }
-  }, [fetchComment, shouldFetchComment, parentId]);
-
  const minAmountRef = React.useRef(minAmount);
  minAmountRef.current = minAmount;

@ -157,6 +176,20 @@ export function CommentCreate(props: Props) {
    setCommentValue(commentValue);
  }

+  function handleSelectMention(mentionValue, key) {
+    let newMentionValue = mentionValue.replace('lbry://', '');
+    if (newMentionValue.includes('#')) newMentionValue = newMentionValue.replace('#', ':');
+
+    if (livestream && key !== KEYCODES.TAB) setPauseQuickSend(true);
+    setCommentValue(
+      commentValue.substring(0, selectedMentionIndex) +
+        `${newMentionValue}` +
+        (commentValue.length > mentionLengthIndex + 1
+          ? commentValue.substring(mentionLengthIndex, commentValue.length)
+          : ' ')
+    );
+  }
+
  function altEnterListener(e: SyntheticKeyboardEvent<*>) {
    if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODES.ENTER) {
      e.preventDefault();
@ -365,10 +398,6 @@ export function CommentCreate(props: Props) {
      });
  }

-  function toggleEditorMode() {
-    setAdvancedEditor(!advancedEditor);
-  }
-
  // **************************************************************************
  // Effects
  // **************************************************************************
@ -378,7 +407,28 @@ export function CommentCreate(props: Props) {
    if (!channelSettings && channelId) {
      doFetchCreatorSettings(channelId);
    }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [channelId, channelSettings, doFetchCreatorSettings]);
+
+  // Notifications: Fetch top-level comments to identify if it has been deleted and can reply to it
+  React.useEffect(() => {
+    if (shouldFetchComment && fetchComment) {
+      fetchComment(parentId).then((result) => {
+        setDeletedComment(String(result).includes('Error'));
+      });
+    }
+  }, [fetchComment, shouldFetchComment, parentId]);
+
+  // Debounce for disabling the submit button when mentioning a user with Enter
+  // so that the comment isn't sent at the same time
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (pauseQuickSend) {
+        setPauseQuickSend(false);
+      }
+    }, MENTION_DEBOUNCE_MS);
+
+    return () => clearTimeout(timer);
+  }, [pauseQuickSend]);

  // **************************************************************************
  // Render
@ -466,10 +516,22 @@ export function CommentCreate(props: Props) {
        'comment__create--bottom': bottom,
      })}
    >
+      {!advancedEditor && (
+        <ChannelMentionSuggestions
+          uri={uri}
+          isLivestream={livestream}
+          inputRef={formFieldInputRef}
+          mentionTerm={channelMention}
+          creatorUri={channelUri}
+          customSelectAction={handleSelectMention}
+        />
+      )}
      <FormField
        disabled={isFetchingChannels}
        type={SIMPLE_SITE ? 'textarea' : advancedEditor && !isReply ? 'markdown' : 'textarea'}
        name={isReply ? 'content_reply' : 'content_description'}
+        ref={formFieldRef}
+        className={isReply ? 'content_reply' : 'content_comment'}
        label={
          <span className="comment-new__label-wrapper">
            {!livestream && (
@ -481,7 +543,7 @@ export function CommentCreate(props: Props) {
        quickActionLabel={
          !SIMPLE_SITE && (isReply ? undefined : advancedEditor ? __('Simple Editor') : __('Advanced Editor'))
        }
-        quickActionHandler={!SIMPLE_SITE && toggleEditorMode}
+        quickActionHandler={() => !SIMPLE_SITE && setAdvancedEditor(!advancedEditor)}
        onFocus={onTextareaFocus}
        onBlur={onTextareaBlur}
        placeholder={__('Say something about this...')}
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@ -278,6 +278,7 @@ function CommentList(props: Props) {

  return (
    <Card
+      className="card--enable-overflow"
      title={
        totalComments > 0
          ? totalComments === 1
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@ -14,6 +14,7 @@
@import 'component/button';
@import 'component/card';
@import 'component/channel';
+@import 'component/channel-mention';
@import 'component/claim-list';
@import 'component/collection';
@import 'component/comments';
@ -67,4 +68,3 @@
@import 'component/empty';
@import 'component/stripe-card';
@import 'component/wallet-tip-send';
-
--- a/ui/scss/component/_channel-mention.scss
+++ b/ui/scss/component/_channel-mention.scss
@ -0,0 +1,125 @@
+.channel-mention {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: calc(100% - 1.8rem);
+  z-index: 3;
+  font-size: var(--font-small);
+  padding-left: var(--spacing-s);
+
+  > .icon {
+    top: 0;
+    left: var(--spacing-m);
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    stroke: var(--color-input-placeholder);
+  }
+
+  @media (min-width: $breakpoint-small) {
+    padding: 0;
+  }
+}
+
+.channel-mention__suggestions {
+  @extend .card;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 30vh;
+  position: absolute;
+  text-overflow: ellipsis;
+  width: 22rem;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: var(--card-box-shadow);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-bottom: none;
+
+  .channel-mention__label:first-of-type {
+    margin-top: var(--spacing-xs);
+  }
+}
+
+.channel-mention__suggestions[flow-bottom] {
+  top: 4rem;
+  bottom: auto;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border-top: none;
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom: auto;
+}
+
+.channel-mention__input--none {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.channel-mention__label {
+  @extend .wunderbar__label;
+}
+
+.channel-mention__top-separator {
+  @extend .wunderbar__top-separator;
+}
+
+.channel-mention__suggestion {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-xxs);
+  margin-left: var(--spacing-xxs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .channel-thumbnail {
+    @include handleChannelGif(2.1rem);
+    position: absolute;
+
+    @media (min-width: $breakpoint-small) {
+      @include handleChannelGif(2.1rem);
+    }
+  }
+}
+
+.channel-mention__suggestion-label {
+  @extend .wunderbar__suggestion-label;
+  margin-left: var(--spacing-m);
+  display: block;
+  position: relative;
+}
+
+.channel-mention__suggestion-name {
+  @extend .wunderbar__suggestion-name;
+  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
+}
+
+.channel-mention__suggestion-title {
+  @extend .wunderbar__suggestion-title;
+  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
+}
+
+.channel-mention__placeholder-suggestion {
+  @extend .wunderbar__placeholder-suggestion;
+  padding: 0 var(--spacing-xxs);
+  margin-left: var(--spacing-xxs);
+}
+
+.channel-mention__placeholder-label {
+  @extend .wunderbar__placeholder-label;
+  margin-left: var(--spacing-m);
+}
+
+.channel-mention__placeholder-thumbnail {
+  @extend .wunderbar__placeholder-thumbnail;
+  margin-left: var(--spacing-m);
+}
+.channel-mention__placeholder-info {
+  @extend .wunderbar__placeholder-info;
+  margin-left: var(--spacing-m);
+}
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@ -34,6 +34,16 @@ $thumbnailWidthSmall: 1rem;

 .comment__create {
  font-size: var(--font-small);
+  position: relative;
+
+  fieldset-section,
+  .form-field--SimpleMDE {
+    margin-top: 0;
+  }
+
+  .form-field__two-column {
+    column-count: 2;
+  }
 }

 .comment__create--reply {
@ -80,6 +90,10 @@ $thumbnailWidthSmall: 1rem;
  }
 }

+.content_comment {
+  position: relative;
+}
+
 .comment__thumbnail-wrapper {
  flex: 0;
  margin-top: var(--spacing-xxs);
--- a/ui/scss/component/_livestream.scss
+++ b/ui/scss/component/_livestream.scss
@ -359,6 +359,10 @@ $recent-msg-button__height: 2rem;
    p {
      word-break: break-word;
    }
+
+    .channel-name {
+      font-size: var(--font-small);
+    }
  }
 }

--- a/ui/util/remark-lbry.js
+++ b/ui/util/remark-lbry.js
@ -3,6 +3,7 @@ import visit from 'unist-util-visit';

 const protocol = 'lbry://';
 const uriRegex = /(lbry:\/\/)[^\s"]*[^)]/g;
+const punctuationMarks = [',', '.', '!', '?', ':', ';', '-', ']', ')', '}'];

 const mentionToken = '@';
 // const mentionTokenCode = 64; // @
@ -10,9 +11,24 @@ const mentionRegex = /@[^\s()"]*/gm;

 const invalidRegex = /[-_.+=?!@#$%^&*:;,{}<>\w/\\]/;

+function handlePunctuation(value) {
+  const modifierIndex =
+    (value.indexOf(':') >= 0 && value.indexOf(':')) || (value.indexOf('#') >= 0 && value.indexOf('#'));
+
+  let punctuationIndex;
+  punctuationMarks.some((p) => {
+    if (modifierIndex) {
+      punctuationIndex = value.indexOf(p, modifierIndex + 1) >= 0 && value.indexOf(p, modifierIndex + 1);
+    }
+    return punctuationIndex;
+  });
+
+  return punctuationIndex ? value.substring(0, punctuationIndex) : value;
+}
+
 // Find channel mention
 function locateMention(value, fromIndex) {
-  var index = value.indexOf(mentionToken, fromIndex);
+  const index = value.indexOf(mentionToken, fromIndex);

  // Skip invalid mention
  if (index > 0 && invalidRegex.test(value.charAt(index - 1))) {
@ -45,21 +61,22 @@ const createURI = (text, uri, embed = false) => ({
  children: [{ type: 'text', value: text }],
 });

-const validateURI = (match, eat, self) => {
+const validateURI = (match, eat) => {
  if (match) {
    try {
      const text = match[0];
-      const uri = parseURI(text);
+      const newText = handlePunctuation(text);
+      const uri = parseURI(newText);
      const isValid = uri && uri.claimName;
      const isChannel = uri.isChannel && uri.path === uri.claimName;

      if (isValid) {
        // Create channel link
        if (isChannel) {
-          return eat(text)(createURI(uri.claimName, text, false));
+          return eat(newText)(createURI(uri.claimName, newText, false));
        }
        // Create claim link
-        return eat(text)(createURI(text, text, true));
+        return eat(newText)(createURI(newText, newText, true));
      }
    } catch (err) {
      // Silent errors: console.error(err)
@ -128,7 +145,7 @@ const visitor = (node, index, parent) => {
 };

 // transform
-const transform = tree => {
+const transform = (tree) => {
  visit(tree, ['link'], visitor);
 };

--- a/web/scss/lbrytv.scss
+++ b/web/scss/lbrytv.scss
@ -15,6 +15,7 @@
@import '../../ui/scss/component/button';
@import '../../ui/scss/component/card';
@import '../../ui/scss/component/channel';
+@import '../../ui/scss/component/channel-mention';
@import '../../ui/scss/component/claim-list';
@import '../../ui/scss/component/collection';
@import '../../ui/scss/component/comments';
--- a/web/scss/odysee.scss
+++ b/web/scss/odysee.scss
@ -15,6 +15,7 @@
@import '../../ui/scss/component/button';
@import '../../ui/scss/component/card';
@import '../../ui/scss/component/channel';
+@import '../../ui/scss/component/channel-mention';
@import '../../ui/scss/component/claim-list';
@import '../../ui/scss/component/collection';
@import '../../ui/scss/component/comments';