bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

lexical: restore EmojiNode, fix Android backspace!

Browse source
This commit is contained in:
Alex Gleason 2023-09-25 15:46:29 -05:00
parent 29974c33e7
commit 2a9cb08d08
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/features/compose/editor/index.tsx
View file

@ -49,6 +49,7 @@ interface IComposeEditor {
}
const theme: InitialConfigType['theme'] = {
emoji: 'select-none',
hashtag: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
mention: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
link: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',

5
src/features/compose/editor/nodes/emoji-node.tsx
View file

@ -95,7 +95,10 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
}
const $createEmojiNode = (name = '', src: string): EmojiNode => $applyNodeReplacement(new EmojiNode(name, src));
function $createEmojiNode (name = '', src: string): EmojiNode {
const node = new EmojiNode(name, src);
return $applyNodeReplacement(node);
}
const $isEmojiNode = (
node: LexicalNode | null | undefined,

19
src/features/compose/editor/plugins/autosuggest-plugin.tsx
View file

@ -18,6 +18,7 @@ import {
KEY_ESCAPE_COMMAND,
KEY_TAB_COMMAND,
LexicalEditor,
LexicalNode,
RangeSelection,
TextNode,
} from 'lexical';
@ -40,6 +41,7 @@ import { selectAccount } from 'soapbox/selectors';
import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
import AutosuggestAccount from '../../components/autosuggest-account';
import { $createEmojiNode } from '../nodes/emoji-node';
import { $createMentionNode } from '../nodes/mention-node';
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. */
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 (!suggestion.id) return;
dispatch(useEmoji(suggestion)); // eslint-disable-line react-hooks/rules-of-hooks
@ -316,18 +327,14 @@ const AutosuggestPlugin = ({
if (isNativeEmoji(suggestion)) {
node.spliceText(offset, matchingString.length, `${suggestion.native} `, true);
} else {
node.spliceText(offset, matchingString.length, `${suggestion.colons} `, true);
replaceMatch($createEmojiNode(suggestion.colons, suggestion.imageUrl));
}
} else if (suggestion[0] === '#') {
node.setTextContent(`${suggestion} `);
node.select();
} else {
const acct = selectAccount(getState(), suggestion)!.acct;
const result = (node as TextNode).splitText(offset, offset + matchingString.length);
const textNode = result[1] ?? result[0];
const mentionNode = textNode.replace($createMentionNode(`@${acct}`));
mentionNode.insertAfter(new TextNode(' '));
mentionNode.selectNext();
replaceMatch($createMentionNode(`@${acct}`));
}
dispatch(clearComposeSuggestions(composeId));