|
|
@ -18,6 +18,7 @@ import {
|
|
|
|
KEY_ESCAPE_COMMAND,
|
|
|
|
KEY_ESCAPE_COMMAND,
|
|
|
|
KEY_TAB_COMMAND,
|
|
|
|
KEY_TAB_COMMAND,
|
|
|
|
LexicalEditor,
|
|
|
|
LexicalEditor,
|
|
|
|
|
|
|
|
LexicalNode,
|
|
|
|
RangeSelection,
|
|
|
|
RangeSelection,
|
|
|
|
TextNode,
|
|
|
|
TextNode,
|
|
|
|
} from 'lexical';
|
|
|
|
} from 'lexical';
|
|
|
@ -40,6 +41,7 @@ import { selectAccount } from 'soapbox/selectors';
|
|
|
|
import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
|
|
|
|
import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
|
|
|
|
|
|
|
|
|
|
|
|
import AutosuggestAccount from '../../components/autosuggest-account';
|
|
|
|
import AutosuggestAccount from '../../components/autosuggest-account';
|
|
|
|
|
|
|
|
import { $createEmojiNode } from '../nodes/emoji-node';
|
|
|
|
import { $createMentionNode } from '../nodes/mention-node';
|
|
|
|
import { $createMentionNode } from '../nodes/mention-node';
|
|
|
|
|
|
|
|
|
|
|
|
import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
|
|
|
|
import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
|
|
|
@ -309,6 +311,15 @@ const AutosuggestPlugin = ({
|
|
|
|
/** Offset for the beginning of the matched text, including the token. */
|
|
|
|
/** Offset for the beginning of the matched text, including the token. */
|
|
|
|
const offset = leadOffset - 1;
|
|
|
|
const offset = leadOffset - 1;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** Replace the matched text with the given node. */
|
|
|
|
|
|
|
|
function replaceMatch(replaceWith: LexicalNode) {
|
|
|
|
|
|
|
|
const result = (node as TextNode).splitText(offset, offset + matchingString.length);
|
|
|
|
|
|
|
|
const textNode = result[1] ?? result[0];
|
|
|
|
|
|
|
|
const replacedNode = textNode.replace(replaceWith);
|
|
|
|
|
|
|
|
replacedNode.insertAfter(new TextNode(' '));
|
|
|
|
|
|
|
|
replacedNode.selectNext();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (typeof suggestion === 'object') {
|
|
|
|
if (typeof suggestion === 'object') {
|
|
|
|
if (!suggestion.id) return;
|
|
|
|
if (!suggestion.id) return;
|
|
|
|
dispatch(useEmoji(suggestion)); // eslint-disable-line react-hooks/rules-of-hooks
|
|
|
|
dispatch(useEmoji(suggestion)); // eslint-disable-line react-hooks/rules-of-hooks
|
|
|
@ -316,18 +327,14 @@ const AutosuggestPlugin = ({
|
|
|
|
if (isNativeEmoji(suggestion)) {
|
|
|
|
if (isNativeEmoji(suggestion)) {
|
|
|
|
node.spliceText(offset, matchingString.length, `${suggestion.native} `, true);
|
|
|
|
node.spliceText(offset, matchingString.length, `${suggestion.native} `, true);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
node.spliceText(offset, matchingString.length, `${suggestion.colons} `, true);
|
|
|
|
replaceMatch($createEmojiNode(suggestion.colons, suggestion.imageUrl));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (suggestion[0] === '#') {
|
|
|
|
} else if (suggestion[0] === '#') {
|
|
|
|
node.setTextContent(`${suggestion} `);
|
|
|
|
node.setTextContent(`${suggestion} `);
|
|
|
|
node.select();
|
|
|
|
node.select();
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
const acct = selectAccount(getState(), suggestion)!.acct;
|
|
|
|
const acct = selectAccount(getState(), suggestion)!.acct;
|
|
|
|
const result = (node as TextNode).splitText(offset, offset + matchingString.length);
|
|
|
|
replaceMatch($createMentionNode(`@${acct}`));
|
|
|
|
const textNode = result[1] ?? result[0];
|
|
|
|
|
|
|
|
const mentionNode = textNode.replace($createMentionNode(`@${acct}`));
|
|
|
|
|
|
|
|
mentionNode.insertAfter(new TextNode(' '));
|
|
|
|
|
|
|
|
mentionNode.selectNext();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
dispatch(clearComposeSuggestions(composeId));
|
|
|
|
dispatch(clearComposeSuggestions(composeId));
|
|
|
|