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) {
console.log(name, src);
super(key);
this.__name = name;
this.__src = src;
}
createDOM(config: EditorConfig): HTMLElement {
console.log('creating');
const span = document.createElement('span');
const theme = config.theme;
const className = theme.emoji;
@ -55,7 +53,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
}
exportDOM(): DOMExportOutput {
console.log('exporting');
const element = document.createElement('img');
element.setAttribute('src', this.__src);
element.setAttribute('alt', this.__name);
@ -64,7 +61,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
}
static importJSON(serializedNode: SerializedEmojiNode): EmojiNode {
console.log('importing json');
const { name, src } =
serializedNode;
const node = $createEmojiNode(name, src);
@ -72,12 +68,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
}
exportJSON(): SerializedEmojiNode {
console.log('exporting json', {
name: this.__name,
src: this.__src,
type: 'emoji',
version: 1,
});
return {
name: this.__name,
src: this.__src,
@ -95,7 +85,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
}
decorate(): JSX.Element {
console.log('decoratin', this);
return (
<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 AutosuggestAccount from '../../components/autosuggest-account';
import { $createEmojiNode } from '../nodes/emoji-node';
import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
@ -314,8 +315,16 @@ export function AutosuggestPlugin({
if (isNativeEmoji(suggestion)) {
node.spliceText(leadOffset - 1, matchingString.length, `${suggestion.native} `, true);
} else {
// const completion = suggestion.colons;
// node.replace($createEmojiNode(completion, suggestion.imageUrl));
const completion = suggestion.colons;
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] === '#') {
node.setTextContent(`${suggestion} `);