diff --git a/packages/lexical-react/src/LexicalHashtagPlugin.ts b/packages/lexical-react/src/LexicalHashtagPlugin.ts index 0b1e01c4732..7904de26d66 100644 --- a/packages/lexical-react/src/LexicalHashtagPlugin.ts +++ b/packages/lexical-react/src/LexicalHashtagPlugin.ts @@ -6,11 +6,10 @@ * */ -import type {TextNode} from 'lexical'; - import {$createHashtagNode, HashtagNode} from '@lexical/hashtag'; import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext'; import {useLexicalTextEntity} from '@lexical/react/useLexicalTextEntity'; +import {type TextNode, $getNodeByKey, $isTextNode} from 'lexical'; import {useCallback, useEffect} from 'react'; function getHashtagRegexStringChars(): Readonly<{ @@ -257,6 +256,30 @@ export function HashtagPlugin(): JSX.Element | null { } }, [editor]); + useEffect(() => { + return editor.registerMutationListener(HashtagNode, (mutations) => { + mutations.forEach((mutation, key) => { + if (mutation === 'updated') { + editor.update(() => { + const node = $getNodeByKey(key); + if (!node) { + return; + } + + const nextSibling = node.getNextSibling(); + if ( + $isTextNode(nextSibling) && + nextSibling.getTextContent().startsWith('#') + ) { + nextSibling.setTextContent(` ${nextSibling.getTextContent()}`); + nextSibling.select(2, 2); + } + }); + } + }); + }); + }, [editor]); + const createHashtagNode = useCallback((textNode: TextNode): HashtagNode => { return $createHashtagNode(textNode.getTextContent()); }, []);