Fixes mention handling in post composer

iPaulPro · Dec 9, 2023 · 1963b83 · 1963b83
1 parent a1ba400
commit 1963b83
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 35 deletions.
diff --git a/src/lib/editor/MentionNode.ts b/src/lib/editor/MentionNode.ts
@@ -19,7 +19,7 @@ import {
     TextNode,
 } from 'lexical';
 import type { TextMatchTransformer } from '@lexical/markdown/MarkdownTransformers';
-import { formatMentionV1toV2 } from '../utils/lens-utils';
+import { formatHandleV1toV2 } from '../utils/lens-utils';
 
 export type SerializedMentionNode = Spread<
     {
@@ -131,12 +131,12 @@ export class MentionNode extends TextNode {
 
 export const MENTION: TextMatchTransformer = {
     dependencies: [MentionNode],
-    export: (node, traverseChildren) => {
+    export: (node) => {
         if (!isMentionNode(node)) {
             return null;
         }
         const text = node.getTextContent();
-        return '@' + formatMentionV1toV2(text.slice(1));
+        return '@' + formatHandleV1toV2(text.slice(1));
     },
     importRegExp:
         /(^|\s)@(([a-zA-Z0-9_]+)\/([a-zA-Z0-9_]+))(?=[\s.,+*?$@&|#{}()^\-\[\]\\/!%'"~=<>_:;]|)/,

diff --git a/src/lib/utils/lens-utils.ts b/src/lib/utils/lens-utils.ts
@@ -301,19 +301,6 @@ export const formatHandleV2toV1 = (handle: string): string => {
     return handle;
 };
 
-/**
- * Format a handle from local.domain to domain/local
- * @param handle The handle to format
- */
-export const formatMentionV1toV2 = (handle: string): string => {
-    // format the handle from paulburke.lens to lens/paulburke
-    const match = handle.match(MENTION_REGEX);
-    if (!match) return handle;
-
-    const [, , , localName, domain] = match;
-    return `@${domain}/${localName}`;
-};
-
 /**
  * Format a handle from local.domain to domain/local
  * @param handle The handle to format

diff --git a/src/window/components/TextEditor.svelte b/src/window/components/TextEditor.svelte
@@ -39,7 +39,6 @@
     import { $setBlocksType as setBlocksType } from '@lexical/selection';
     import { createEmptyHistoryState, registerHistory } from '@lexical/history';
     import { $canShowPlaceholder as canShowPlaceholder } from '@lexical/text';
-    import type { UpdateListener } from 'lexical/LexicalEditor';
     import type { TextFormatType } from 'lexical/nodes/LexicalTextNode';
 
     import { onMount } from 'svelte';
@@ -255,7 +254,6 @@
             fillAttr: 'handle',
             lookup: 'handle',
             noMatchTemplate: () => '<span class="hidden"></span>',
-
         });
 
         plainTextTribute.attach(node);
@@ -276,30 +274,27 @@
                 return;
             }
 
-            const nodes = selection.getNodes();
-            if (nodes.length) {
-                const newNode = createMentionNode(`@${formatHandleV2toV1(handle)}`);
-                nodes[0].replace(newNode);
-                newNode.select();
-            }
+            const newNode = createMentionNode(`@${formatHandleV2toV1(handle)}`);
+            selection.insertNodes([newNode]);
+            newNode.select();
         });
     };
 
-    const onEditorStateUpdate = ({ editorState }: { editorState: EditorState }): UpdateListener => {
-        editorState.read(() => {
-            $content = convertToMarkdownString(MARKDOWN_TRANSFORMERS);
-            showPlaceholder = canShowPlaceholder(editor.isComposing());
-        });
-        return () => {
-        };
-    };
-
     const escapeOverride = (): boolean => {
         toolbarVisible = false;
         const selection = getSelection();
         return selection == null || !isRangeSelection(selection) || selection.isCollapsed();
     };
 
+    const registerTextListener = (editor: LexicalEditor) => {
+        editor.registerTextContentListener(() => {
+            editor.getEditorState().read(() => {
+                $content = convertToMarkdownString(MARKDOWN_TRANSFORMERS);
+                showPlaceholder = canShowPlaceholder(editor.isComposing());
+            });
+        })
+    };
+
     $: contentLength = $content?.length ?? 0;
 
     onMount(() => {
@@ -317,12 +312,11 @@
         registerMentionPlugin(editor);
         registerEmojiShortcodePlugin(editor);
         registerHistoryKeyboardShortcuts();
+        registerTextListener(editor);
 
         editorElement?.addEventListener('tribute-active-true', () => tributeActive = true);
         editorElement?.addEventListener('tribute-active-false', () => tributeActive = false);
         editorElement?.addEventListener('tribute-replaced', onTributeReplaced);
-
-        return editor.registerUpdateListener(onEditorStateUpdate);
     });
 </script>