bug: insert link through toolbar or shortcut doesn't open floating ed…

…itor in edit mode
umaranis · Dec 22, 2023 · b649d8d · b649d8d
1 parent 5b45ab1
commit b649d8d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/packages/svelte-lexical/src/core/plugins/link/FloatingLinkEditor.svelte b/packages/svelte-lexical/src/core/plugins/link/FloatingLinkEditor.svelte
@@ -29,11 +29,11 @@
   let inputRef: HTMLInputElement;
   let linkUrl = '';
   let editedLinkUrl = '';
-  let isEditMode = false;
+  export let isEditMode: Writable<boolean>;
   let lastSelection: RangeSelection | GridSelection | NodeSelection | null =
     null;
 
-  $: if (isEditMode && inputRef) {
+  $: if ($isEditMode && inputRef) {
     inputRef.focus();
   }
 
@@ -107,7 +107,7 @@
         linkUrl = '';
       }
     }
-    if (isEditMode) {
+    if ($isEditMode) {
       editedLinkUrl = linkUrl;
     }
     const editorElem = editorRef;
@@ -139,7 +139,7 @@
         setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
       }
       lastSelection = null;
-      isEditMode = false;
+      $isEditMode = false;
       linkUrl = '';
     }
 
@@ -154,7 +154,7 @@
       handleLinkSubmission();
     } else if (event.key === 'Escape') {
       event.preventDefault();
-      isEditMode = false;
+      $isEditMode = false;
     }
   }
 
@@ -163,7 +163,7 @@
       if (linkUrl !== '') {
         editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
       }
-      isEditMode = false;
+      $isEditMode = false;
     }
   }
 </script>
@@ -172,7 +172,7 @@
 
 <div bind:this={editorRef} class="link-editor">
   {#if $isLink}
-    {#if isEditMode}
+    {#if $isEditMode}
       <input
         bind:this={inputRef}
         class="link-input"
@@ -187,7 +187,7 @@
           tabIndex={0}
           on:mousedown={(event) => event.preventDefault()}
           on:click={() => {
-            isEditMode = false;
+            $isEditMode = false;
           }} />
         <div
           class="link-confirm"
@@ -209,7 +209,7 @@
           on:mousedown={(event) => event.preventDefault()}
           on:click={() => {
             editedLinkUrl = linkUrl;
-            isEditMode = true;
+            $isEditMode = true;
           }} />
         <div
           class="link-trash"

diff --git a/packages/svelte-lexical/src/core/plugins/link/FloatingLinkEditorPlugin.svelte b/packages/svelte-lexical/src/core/plugins/link/FloatingLinkEditorPlugin.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import {
+    TOGGLE_LINK_COMMAND,
     $isAutoLinkNode as isAutoLinkNode,
     $isLinkNode as isLinkNode,
   } from '@lexical/link';
@@ -24,6 +25,7 @@
 
   let activeEditor = editor;
   const isLink = writable(false);
+  let isEditMode = writable(false);
 
   function updateToolbar() {
     const selection = getSelection();
@@ -57,8 +59,18 @@
         },
         COMMAND_PRIORITY_CRITICAL,
       ),
+      editor.registerCommand(
+        TOGGLE_LINK_COMMAND,
+        (payload) => {
+          if (payload === 'https://') {
+            $isEditMode = true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL,
+      ),
     );
   });
 </script>
 
-<FloatingLinkEditor editor={activeEditor} {isLink} {anchorElem} />
+<FloatingLinkEditor editor={activeEditor} {isLink} {anchorElem} {isEditMode} />