feat: Floating link editor for AutoLinkNode and conversion to LinkNod…

…e once modified
umaranis · Mar 26, 2024 · 425375a · 425375a
1 parent f38c047
commit 425375a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/packages/svelte-lexical/src/core/plugins/link/FloatingLinkEditor.svelte b/packages/svelte-lexical/src/core/plugins/link/FloatingLinkEditor.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
   import './FloatingLinkEditor.css';
-  import {$isLinkNode as isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
+  import {
+    $isLinkNode as isLinkNode,
+    $isAutoLinkNode as isAutoLinkNode,
+    TOGGLE_LINK_COMMAND,
+    $createLinkNode as createLinkNode,
+  } from '@lexical/link';
   import {
     mergeRegister,
     $findMatchingParent as findMatchingParent,
@@ -161,6 +166,20 @@
     if (lastSelection !== null) {
       if (linkUrl !== '') {
         editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
+        editor.update(() => {
+          const selection = getSelection();
+          if (isRangeSelection(selection)) {
+            const parent = getSelectedNode(selection).getParent();
+            if (isAutoLinkNode(parent)) {
+              const linkNode = createLinkNode(parent.getURL(), {
+                rel: parent.__rel,
+                target: parent.__target,
+                title: parent.__title,
+              });
+              parent.replace(linkNode, true);
+            }
+          }
+        });
       }
       $isEditMode = false;
     }

diff --git a/packages/svelte-lexical/src/core/plugins/link/FloatingLinkEditorPlugin.svelte b/packages/svelte-lexical/src/core/plugins/link/FloatingLinkEditorPlugin.svelte
@@ -35,9 +35,7 @@
       const node = getSelectedNode(selection);
       const linkParent = findMatchingParent(node, isLinkNode);
       const autoLinkParent = findMatchingParent(node, isAutoLinkNode);
-
-      // We don't want this menu to open for auto links.
-      if (linkParent !== null && autoLinkParent === null) {
+      if (linkParent !== null || autoLinkParent !== null) {
         $isLink = true;
       } else {
         $isLink = false;