@tiptap/extension-link 2.1.0-rc.0 → 2.1.0-rc.10

package/src/helpers/pasteHandler.ts

@@ -1,11 +1,12 @@
 import { Editor } from '@tiptap/core'
-import { MarkType } from '@tiptap/pm/model'
+import { Mark, MarkType } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { find } from 'linkifyjs'
 
 type PasteHandlerOptions = {
   editor: Editor
   type: MarkType
+  linkOnPaste?: boolean
 }
 
 export function pasteHandler(options: PasteHandlerOptions): Plugin {
@@ -15,29 +16,94 @@ export function pasteHandler(options: PasteHandlerOptions): Plugin {
       handlePaste: (view, event, slice) => {
         const { state } = view
         const { selection } = state
-        const { empty } = selection
 
-        if (empty) {
+        // Do not proceed if in code block.
+        if (state.doc.resolve(selection.from).parent.type.spec.code) {
           return false
         }
 
+        const pastedLinkMarks: Mark[] = []
         let textContent = ''
 
         slice.content.forEach(node => {
           textContent += node.textContent
+
+          node.marks.forEach(mark => {
+            if (mark.type.name === options.type.name) {
+              pastedLinkMarks.push(mark)
+            }
+          })
         })
 
+        const hasPastedLink = pastedLinkMarks.length > 0
         const link = find(textContent).find(item => item.isLink && item.value === textContent)
 
-        if (!textContent || !link) {
+        if (!selection.empty && options.linkOnPaste) {
+          const pastedLink = hasPastedLink ? pastedLinkMarks[0].attrs.href : link?.href || null
+
+          if (pastedLink) {
+            options.editor.commands.setMark(options.type, { href: pastedLink })
+
+            return true
+          }
+        }
+
+        const firstChildIsText = slice.content.firstChild?.type.name === 'text'
+        const firstChildContainsLinkMark = slice.content.firstChild?.marks.some(mark => mark.type.name === options.type.name)
+
+        if (firstChildIsText && firstChildContainsLinkMark) {
           return false
         }
 
-        options.editor.commands.setMark(options.type, {
-          href: link.href,
+        if (link && selection.empty) {
+          options.editor.commands.insertContent(`<a href="${link.href}">${link.href}</a>`)
+
+          return true
+        }
+
+        const { tr } = state
+        let deleteOnly = false
+
+        if (!selection.empty) {
+          deleteOnly = true
+
+          tr.delete(selection.from, selection.to)
+        }
+
+        let currentPos = selection.from
+        let fragmentLinks = []
+
+        slice.content.forEach(node => {
+          fragmentLinks = find(node.textContent)
+
+          tr.insert(currentPos - 1, node)
+
+          if (fragmentLinks.length > 0) {
+            deleteOnly = false
+
+            fragmentLinks.forEach(fragmentLink => {
+              const linkStart = currentPos + fragmentLink.start
+              const linkEnd = currentPos + fragmentLink.end
+              const hasMark = tr.doc.rangeHasMark(linkStart, linkEnd, options.type)
+
+              if (!hasMark) {
+                tr.addMark(linkStart, linkEnd, options.type.create({ href: fragmentLink.href }))
+              }
+            })
+
+          }
+          currentPos += node.nodeSize
         })
 
-        return true
+        const hasFragmentLinks = fragmentLinks.length > 0
+
+        if (tr.docChanged && !deleteOnly && hasFragmentLinks) {
+          options.editor.view.dispatch(tr)
+
+          return true
+        }
+
+        return false
       },
     },
   })

package/src/index.ts

@@ -1,5 +1,5 @@
-import { Link } from './link'
+import { Link } from './link.js'
 
-export * from './link'
+export * from './link.js'
 
 export default Link

package/src/link.ts

@@ -1,10 +1,10 @@
-import { Mark, markPasteRule, mergeAttributes } from '@tiptap/core'
+import { Mark, mergeAttributes } from '@tiptap/core'
 import { Plugin } from '@tiptap/pm/state'
-import { find, registerCustomProtocol, reset } from 'linkifyjs'
+import { registerCustomProtocol, reset } from 'linkifyjs'
 
-import { autolink } from './helpers/autolink'
-import { clickHandler } from './helpers/clickHandler'
-import { pasteHandler } from './helpers/pasteHandler'
+import { autolink } from './helpers/autolink.js'
+import { clickHandler } from './helpers/clickHandler.js'
+import { pasteHandler } from './helpers/pasteHandler.js'
 
 export interface LinkProtocolOptions {
   scheme: string;
@@ -107,6 +107,9 @@ export const Link = Mark.create<LinkOptions>({
       target: {
         default: this.options.HTMLAttributes.target,
       },
+      rel: {
+        default: this.options.HTMLAttributes.rel,
+      },
       class: {
         default: this.options.HTMLAttributes.class,
       },
@@ -146,31 +149,6 @@ export const Link = Mark.create<LinkOptions>({
     }
   },
 
-  addPasteRules() {
-    return [
-      markPasteRule({
-        find: text => find(text)
-          .filter(link => {
-            if (this.options.validate) {
-              return this.options.validate(link.value)
-            }
-
-            return true
-          })
-          .filter(link => link.isLink)
-          .map(link => ({
-            text: link.value,
-            index: link.start,
-            data: link,
-          })),
-        type: this.type,
-        getAttributes: match => ({
-          href: match.data?.href,
-        }),
-      }),
-    ]
-  },
-
   addProseMirrorPlugins() {
     const plugins: Plugin[] = []
 
@@ -191,14 +169,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
   },