moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lexical: Fix EmojiNode, working emoji autocompletion with custom emoji preview 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-04-05 23:04:24 +02:00
parent edb5914282
commit d24998190e
2 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/soapbox/features/compose/editor/nodes/emoji-node.tsx
View File

@ -33,14 +33,12 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
} }
constructor(name: string, src: string, key?: NodeKey) { constructor(name: string, src: string, key?: NodeKey) {
console.log(name, src);
super(key); super(key);
this.__name = name; this.__name = name;
this.__src = src; this.__src = src;
} }
createDOM(config: EditorConfig): HTMLElement { createDOM(config: EditorConfig): HTMLElement {
console.log('creating');
const span = document.createElement('span'); const span = document.createElement('span');
const theme = config.theme; const theme = config.theme;
const className = theme.emoji; const className = theme.emoji;
@ -55,7 +53,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
} }
exportDOM(): DOMExportOutput { exportDOM(): DOMExportOutput {
console.log('exporting');
const element = document.createElement('img'); const element = document.createElement('img');
element.setAttribute('src', this.__src); element.setAttribute('src', this.__src);
element.setAttribute('alt', this.__name); element.setAttribute('alt', this.__name);
@ -64,7 +61,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
} }
static importJSON(serializedNode: SerializedEmojiNode): EmojiNode { static importJSON(serializedNode: SerializedEmojiNode): EmojiNode {
console.log('importing json');
const { name, src } = const { name, src } =
serializedNode; serializedNode;
const node = $createEmojiNode(name, src); const node = $createEmojiNode(name, src);
@ -72,12 +68,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
} }
exportJSON(): SerializedEmojiNode { exportJSON(): SerializedEmojiNode {
console.log('exporting json', {
name: this.__name,
src: this.__src,
type: 'emoji',
version: 1,
});
return { return {
name: this.__name, name: this.__name,
src: this.__src, src: this.__src,
@ -95,7 +85,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
} }
decorate(): JSX.Element { decorate(): JSX.Element {
console.log('decoratin', this);
return ( return (
<Emoji src={this.__src} alt={this.__name} className='emojione h-4 w-4' /> <Emoji src={this.__src} alt={this.__name} className='emojione h-4 w-4' />
); );

13
app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx
View File

@ -33,6 +33,7 @@ import { useAppDispatch, useCompose } from 'soapbox/hooks';
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 type { AutoSuggestion } from 'soapbox/components/autosuggest-input'; import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
@ -314,8 +315,16 @@ export function AutosuggestPlugin({
if (isNativeEmoji(suggestion)) { if (isNativeEmoji(suggestion)) {
node.spliceText(leadOffset - 1, matchingString.length, `${suggestion.native} `, true); node.spliceText(leadOffset - 1, matchingString.length, `${suggestion.native} `, true);
} else { } else {
// const completion = suggestion.colons; const completion = suggestion.colons;
// node.replace($createEmojiNode(completion, suggestion.imageUrl));
let emojiText;
if (leadOffset === 1) emojiText = node;
else [, emojiText] = node.splitText(leadOffset - 1);
[emojiText] = emojiText.splitText(matchingString.length);
emojiText?.replace($createEmojiNode(completion, suggestion.imageUrl));
} }
} else if ((suggestion as string)[0] === '#') { } else if ((suggestion as string)[0] === '#') {
node.setTextContent(`${suggestion} `); node.setTextContent(`${suggestion} `);