feat(lexical-react): insert space after HashtagNode when next sibling…

… starts with #

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());
   }, []);