editor: add support for pasting unformatted links

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

Author: 01zulfi

packages/editor/package-lock.json

@@ -69,6 +69,7 @@
     "detect-indent": "^7.0.1",
     "entities": "^5.0.0",
     "katex": "0.16.11",
+    "linkify-html": "^4.2.0",
     "linkifyjs": "^4.1.3",
     "nanoid": "^5.0.7",
     "prism-themes": "^1.9.0",

packages/editor/package.json

@@ -20,32 +20,65 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Editor } from "@tiptap/core";
 import { MarkType } from "@tiptap/pm/model";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
+import linkifyHtml from "linkify-html";
 import { find } from "linkifyjs";
+import { linkRegex } from "../link";
 
 type PasteHandlerOptions = {
   editor: Editor;
   type: MarkType;
+  linkOnPaste: boolean;
 };
 
 export function pasteHandler(options: PasteHandlerOptions): Plugin {
+  let shiftKey = false;
   return new Plugin({
     key: new PluginKey("handlePasteLink"),
     props: {
+      handleKeyDown(_, event) {
+        shiftKey = event.shiftKey;
+        return false;
+      },
       handlePaste: (view, event, slice) => {
+        const clipboardHtmlData = event.clipboardData?.getData("text/html");
+        if (clipboardHtmlData) {
+          return false;
+        }
+
         const { state } = view;
         const { selection } = state;
         const { empty } = selection;
 
-        if (empty) {
-          return false;
-        }
-
         let textContent = "";
 
         slice.content.forEach((node) => {
           textContent += node.textContent;
         });
 
+        // don't deal with markdown links in this handler
+        if (linkRegex.test(textContent)) {
+          // reset the regex since we don't want the above test method to affect other places where the regex is used
+          linkRegex.lastIndex = 0;
+          return false;
+        }
+
+        if (shiftKey) {
+          return false;
+        }
+
+        if (empty) {
+          if (textContent) {
+            const html = linkifyHtml(textContent);
+            options.editor.commands.insertContent(html);
+            return true;
+          }
+          return false;
+        }
+
+        if (!options.linkOnPaste) {
+          return false;
+        }
+
         const link = find(textContent).find(
           (item) => item.isLink && item.value === textContent
         );

packages/editor/src/extensions/link/helpers/pasteHandler.ts

@@ -227,35 +227,6 @@ export const Link = Mark.create<LinkOptions>({
             href: regExp.exec(match[0])?.[1]
           };
         }
-      }),
-      markPasteRule({
-        find: (text) => {
-          const foundLinks: PasteRuleMatch[] = [];
-
-          if (text) {
-            const links = find(text).filter((item) => item.isLink);
-
-            if (links.length) {
-              links.forEach((link) =>
-                foundLinks.push({
-                  text: link.value,
-                  data: {
-                    href: link.href
-                  },
-                  index: link.start
-                })
-              );
-            }
-          }
-
-          return foundLinks;
-        },
-        type: this.type,
-        getAttributes: (match) => {
-          return {
-            href: match.data?.href
-          };
-        }
       })
     ];
   },
@@ -281,14 +252,13 @@ export const Link = Mark.create<LinkOptions>({
       );
     }
 
-    if (this.options.linkOnPaste) {
-      plugins.push(
-        pasteHandler({
-          editor: this.editor,
-          type: this.type
-        })
-      );
-    }
+    plugins.push(
+      pasteHandler({
+        editor: this.editor,
+        type: this.type,
+        linkOnPaste: this.options.linkOnPaste
+      })
+    );
 
     return plugins;
   },

packages/editor/src/extensions/link/link.ts

@@ -1,5 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`paste text > with link 1`] = `"<div><div contenteditable="true" translate="no" class="tiptap ProseMirror" tabindex="0"><p><a target="_blank" rel="noopener noreferrer nofollow" href="http://example.com">example.com</a></p></div></div>"`;
+
 exports[`paste text > with markdown link 1`] = `"<div><div contenteditable="true" translate="no" class="tiptap ProseMirror" tabindex="0"><p><a target="_blank" rel="noopener noreferrer nofollow" href="example.com">test</a></p></div></div>"`;
 
+exports[`paste text > with multiple links 1`] = `"<div><div contenteditable="true" translate="no" class="tiptap ProseMirror" tabindex="0"><p><a target="_blank" rel="noopener noreferrer nofollow" href="http://example.com">example.com</a> <a target="_blank" rel="noopener noreferrer nofollow" href="http://example2.com">example2.com</a></p></div></div>"`;
+
 exports[`paste text > with multiple markdown links 1`] = `"<div><div contenteditable="true" translate="no" class="tiptap ProseMirror" tabindex="0"><p><a target="_blank" rel="noopener noreferrer nofollow" href="example.com">test</a> some text <a target="_blank" rel="noopener noreferrer nofollow" href="example2.com">test2</a></p></div></div>"`;
+
+exports[`unformatted paste text > with link shouldn't format as link 1`] = `"<div><div contenteditable="true" translate="no" class="tiptap ProseMirror" tabindex="0"><p>https://example.com</p></div></div>"`;
+
+exports[`unformatted paste text > with markdown link should still format as link 1`] = `"<div><div contenteditable="true" translate="no" class="tiptap ProseMirror" tabindex="0"><p><a target="_blank" rel="noopener noreferrer nofollow" href="example.com">asdf</a></p></div></div>"`;