WIP refactor link toolbar

src/editor/plugins/Link/LinkEditor.jsx

@@ -51,6 +51,7 @@ export default (props) => {
       var url = formData?.link?.external_link;
       const data = {...formData};
       if (url) {
+        console.log('data:', formData);
         insertLink(editor, url, data);
       } else {
         unwrapLink(editor);

src/editor/plugins/Link/extensions.js

@@ -1,30 +1,32 @@
 import isUrl from 'is-url';
-import { wrapLink } from './utils';
+// import { wrapLink } from './utils';
 import { LINK } from 'volto-slate/constants';
 
 export const withLink = (editor) => {
-  const { insertData, insertText, isInline } = editor;
+  // const { insertData, insertText, isInline } = editor;
+
+  const { isInline } = editor;
 
   editor.isInline = (element) => {
     return element.type === LINK ? true : isInline(element);
   };
 
-  editor.insertText = (text) => {
-    if (text && isUrl(text)) {
-      wrapLink(editor, text);
-    } else {
-      insertText(text);
-    }
-  };
-
-  editor.insertData = (data) => {
-    const text = data.getData('text/plain');
-
-    if (text && isUrl(text)) {
-      wrapLink(editor, text);
-    } else {
-      insertData(data);
-    }
-  };
+  // editor.insertText = (text) => {
+  //   if (text && isUrl(text)) {
+  //     wrapLink(editor, text);
+  //   } else {
+  //     insertText(text);
+  //   }
+  // };
+  //
+  // editor.insertData = (data) => {
+  //   const text = data.getData('text/plain');
+  //
+  //   if (text && isUrl(text)) {
+  //     wrapLink(editor, text);
+  //   } else {
+  //     insertData(data);
+  //   }
+  // };
   return editor;
 };

src/editor/plugins/Link/utils.js

@@ -29,31 +29,55 @@ export const unwrapLink = (editor) => {
   });
 };
 
-export const wrapLink = (editor, url, data) => {
+export const insertLink = (editor, url, data) => {
+
   if (isActiveLink(editor)) {
     unwrapLink(editor);
   }
 
-  const selection = editor.selection || editor.savedSelection;
-  const isCollapsed = selection && Range.isCollapsed(selection);
-  const link = {
-    type: LINK,
-    url,
-    children: isCollapsed ? [{ text: url }] : [],
-    data,
-  };
-
-  if (isCollapsed) {
-    Transforms.insertNodes(editor, link);
-  } else {
-    Transforms.wrapNodes(editor, link, { split: true });
-    Transforms.collapse(editor, { edge: 'end' });
-  }
-};
+  if (editor.savedSelection) {
+    // wrapLink(editor, url, data);
 
-export const insertLink = (editor, url, data) => {
-  const selection = editor.selection || editor.savedSelection;
-  if (selection) {
-    wrapLink(editor, url, data);
+    const selection = editor.selection || editor.savedSelection;
+    const selPathRef = Editor.pathRef(editor, selection.anchor.path);
+    const isCollapsed = selection && Range.isCollapsed(selection);
+
+    const link = {
+      type: LINK,
+      url,
+      children: isCollapsed ? [{ text: url }] : [],
+      data,
+    };
+
+    const res = Array.from(
+      Editor.nodes(editor, {
+        match: (n) => n.type === LINK,
+        mode: 'highest',
+        at: selection,
+      }),
+    );
+
+    if (res.length) {
+      const [, path] = res[0];
+      Transforms.setNodes(
+        editor,
+        { data },
+        {
+          at: path ? path : null,
+          match: path ? (n) => n.type === LINK : null,
+        },
+      );
+    } else {
+      Transforms.wrapNodes(
+        editor,
+        link,
+        { split: true, at: selection },
+      );
+    }
+
+    if (data) {
+      Transforms.select(editor, selPathRef.current);
+      Transforms.collapse(editor, { edge: 'end' });
+    }
   }
 };