@tiptap/extension-link 2.0.0-beta.21 → 2.0.0-beta.210

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-link",
   "description": "link extension for tiptap",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.210",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -12,25 +12,49 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-extension-link.cjs.js",
-  "umd": "dist/tiptap-extension-link.umd.js",
-  "module": "dist/tiptap-extension-link.esm.js",
-  "types": "dist/packages/extension-link/src/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.1"
+    "@tiptap/core": "^2.0.0-beta.209",
+    "@tiptap/pm": "^2.0.0-beta.209"
+  },
+  "devDependencies": {
+    "@tiptap/core": "^2.0.0-beta.210",
+    "@tiptap/pm": "^2.0.0-beta.210"
   },
   "dependencies": {
-    "linkifyjs": "^3.0.1",
-    "prosemirror-state": "^1.3.4"
+    "linkifyjs": "^3.0.5"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",
     "directory": "packages/extension-link"
   },
-  "gitHead": "ed00dbbe56d7a31dbfcf02594c4ce5f54c7bc27a"
+  "scripts": {
+    "build": "tsup"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "splitting": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  }
 }

package/src/helpers/autolink.ts

@@ -0,0 +1,142 @@
+import {
+  combineTransactionSteps,
+  findChildrenInRange,
+  getChangedRanges,
+  getMarksBetween,
+  NodeWithPos,
+} from '@tiptap/core'
+import { MarkType } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { find, test } from 'linkifyjs'
+
+type AutolinkOptions = {
+  type: MarkType
+  validate?: (url: string) => boolean
+}
+
+export function autolink(options: AutolinkOptions): Plugin {
+  return new Plugin({
+    key: new PluginKey('autolink'),
+    appendTransaction: (transactions, oldState, newState) => {
+      const docChanges = transactions.some(transaction => transaction.docChanged) && !oldState.doc.eq(newState.doc)
+      const preventAutolink = transactions.some(transaction => transaction.getMeta('preventAutolink'))
+
+      if (!docChanges || preventAutolink) {
+        return
+      }
+
+      const { tr } = newState
+      const transform = combineTransactionSteps(oldState.doc, [...transactions])
+      const { mapping } = transform
+      const changes = getChangedRanges(transform)
+
+      changes.forEach(({ oldRange, newRange }) => {
+        // at first we check if we have to remove links
+        getMarksBetween(oldRange.from, oldRange.to, oldState.doc)
+          .filter(item => item.mark.type === options.type)
+          .forEach(oldMark => {
+            const newFrom = mapping.map(oldMark.from)
+            const newTo = mapping.map(oldMark.to)
+            const newMarks = getMarksBetween(newFrom, newTo, newState.doc).filter(
+              item => item.mark.type === options.type,
+            )
+
+            if (!newMarks.length) {
+              return
+            }
+
+            const newMark = newMarks[0]
+            const oldLinkText = oldState.doc.textBetween(oldMark.from, oldMark.to, undefined, ' ')
+            const newLinkText = newState.doc.textBetween(newMark.from, newMark.to, undefined, ' ')
+            const wasLink = test(oldLinkText)
+            const isLink = test(newLinkText)
+
+            // remove only the link, if it was a link before too
+            // because we don’t want to remove links that were set manually
+            if (wasLink && !isLink) {
+              tr.removeMark(newMark.from, newMark.to, options.type)
+            }
+          })
+
+        // now let’s see if we can add new links
+        const nodesInChangedRanges = findChildrenInRange(
+          newState.doc,
+          newRange,
+          node => node.isTextblock,
+        )
+
+        let textBlock: NodeWithPos | undefined
+        let textBeforeWhitespace: string | undefined
+
+        if (nodesInChangedRanges.length > 1) {
+          // Grab the first node within the changed ranges (ex. the first of two paragraphs when hitting enter)
+          textBlock = nodesInChangedRanges[0]
+          textBeforeWhitespace = newState.doc.textBetween(
+            textBlock.pos,
+            textBlock.pos + textBlock.node.nodeSize,
+            undefined,
+            ' ',
+          )
+        } else if (
+          nodesInChangedRanges.length
+          // We want to make sure to include the block seperator argument to treat hard breaks like spaces
+          && newState.doc.textBetween(newRange.from, newRange.to, ' ', ' ').endsWith(' ')
+        ) {
+          textBlock = nodesInChangedRanges[0]
+          textBeforeWhitespace = newState.doc.textBetween(
+            textBlock.pos,
+            newRange.to,
+            undefined,
+            ' ',
+          )
+        }
+
+        if (textBlock && textBeforeWhitespace) {
+          const wordsBeforeWhitespace = textBeforeWhitespace.split(' ').filter(s => s !== '')
+
+          if (wordsBeforeWhitespace.length <= 0) {
+            return false
+          }
+
+          const lastWordBeforeSpace = wordsBeforeWhitespace[wordsBeforeWhitespace.length - 1]
+          const lastWordAndBlockOffset = textBlock.pos + textBeforeWhitespace.lastIndexOf(lastWordBeforeSpace)
+
+          if (!lastWordBeforeSpace) {
+            return false
+          }
+
+          find(lastWordBeforeSpace)
+            .filter(link => link.isLink)
+            .filter(link => {
+              if (options.validate) {
+                return options.validate(link.value)
+              }
+              return true
+            })
+            // calculate link position
+            .map(link => ({
+              ...link,
+              from: lastWordAndBlockOffset + link.start + 1,
+              to: lastWordAndBlockOffset + link.end + 1,
+            }))
+            // add link mark
+            .forEach(link => {
+              tr.addMark(
+                link.from,
+                link.to,
+                options.type.create({
+                  href: link.href,
+                }),
+              )
+            })
+        }
+      })
+
+      if (!tr.steps.length) {
+        return
+      }
+
+      return tr
+    },
+  })
+}

package/src/helpers/clickHandler.ts

@@ -0,0 +1,27 @@
+import { getAttributes } from '@tiptap/core'
+import { MarkType } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+type ClickHandlerOptions = {
+  type: MarkType
+}
+
+export function clickHandler(options: ClickHandlerOptions): Plugin {
+  return new Plugin({
+    key: new PluginKey('handleClickLink'),
+    props: {
+      handleClick: (view, pos, event) => {
+        const attrs = getAttributes(view.state, options.type.name)
+        const link = (event.target as HTMLElement)?.closest('a')
+
+        if (link && attrs.href) {
+          window.open(attrs.href, attrs.target)
+
+          return true
+        }
+
+        return false
+      },
+    },
+  })
+}

package/src/helpers/pasteHandler.ts

@@ -0,0 +1,44 @@
+import { Editor } from '@tiptap/core'
+import { MarkType } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { find } from 'linkifyjs'
+
+type PasteHandlerOptions = {
+  editor: Editor
+  type: MarkType
+}
+
+export function pasteHandler(options: PasteHandlerOptions): Plugin {
+  return new Plugin({
+    key: new PluginKey('handlePasteLink'),
+    props: {
+      handlePaste: (view, event, slice) => {
+        const { state } = view
+        const { selection } = state
+        const { empty } = selection
+
+        if (empty) {
+          return false
+        }
+
+        let textContent = ''
+
+        slice.content.forEach(node => {
+          textContent += node.textContent
+        })
+
+        const link = find(textContent).find(item => item.isLink && item.value === textContent)
+
+        if (!textContent || !link) {
+          return false
+        }
+
+        options.editor.commands.setMark(options.type, {
+          href: link.href,
+        })
+
+        return true
+      },
+    },
+  })
+}

package/src/link.ts

@@ -1,24 +1,38 @@
-import {
-  Mark,
-  markPasteRule,
-  mergeAttributes,
-} from '@tiptap/core'
-import { Plugin, PluginKey } from 'prosemirror-state'
-import { find } from 'linkifyjs'
+import { Mark, markPasteRule, mergeAttributes } from '@tiptap/core'
+import { Plugin } from '@tiptap/pm/state'
+import { find, registerCustomProtocol, reset } from 'linkifyjs'
+
+import { autolink } from './helpers/autolink'
+import { clickHandler } from './helpers/clickHandler'
+import { pasteHandler } from './helpers/pasteHandler'
 
 export interface LinkOptions {
+  /**
+   * If enabled, it adds links as you type.
+   */
+  autolink: boolean
+  /**
+   * An array of custom protocols to be registered with linkifyjs.
+   */
+  protocols: Array<string>
   /**
    * If enabled, links will be opened on click.
    */
-  openOnClick: boolean,
+  openOnClick: boolean
   /**
    * Adds a link to the current selection if the pasted content only contains an url.
    */
-  linkOnPaste: boolean,
+  linkOnPaste: boolean
   /**
    * A list of HTML attributes to be rendered.
    */
-  HTMLAttributes: Record<string, any>,
+  HTMLAttributes: Record<string, any>
+  /**
+   * A validation function that modifies link verification for the auto linker.
+   * @param url - The url to be validated.
+   * @returns - True if the url is valid, false otherwise.
+   */
+  validate?: (url: string) => boolean
 }
 
 declare module '@tiptap/core' {
@@ -27,15 +41,15 @@ declare module '@tiptap/core' {
       /**
        * Set a link mark
        */
-      setLink: (attributes: { href: string, target?: string }) => ReturnType,
+      setLink: (attributes: { href: string; target?: string | null }) => ReturnType
       /**
        * Toggle a link mark
        */
-      toggleLink: (attributes: { href: string, target?: string }) => ReturnType,
+      toggleLink: (attributes: { href: string; target?: string | null }) => ReturnType
       /**
        * Unset a link mark
        */
-      unsetLink: () => ReturnType,
+      unsetLink: () => ReturnType
     }
   }
 }
@@ -45,15 +59,33 @@ export const Link = Mark.create<LinkOptions>({
 
   priority: 1000,
 
-  inclusive: false,
+  keepOnSplit: false,
 
-  defaultOptions: {
-    openOnClick: true,
-    linkOnPaste: true,
-    HTMLAttributes: {
-      target: '_blank',
-      rel: 'noopener noreferrer nofollow',
-    },
+  onCreate() {
+    this.options.protocols.forEach(registerCustomProtocol)
+  },
+
+  onDestroy() {
+    reset()
+  },
+
+  inclusive() {
+    return this.options.autolink
+  },
+
+  addOptions() {
+    return {
+      openOnClick: true,
+      linkOnPaste: true,
+      autolink: true,
+      protocols: [],
+      HTMLAttributes: {
+        target: '_blank',
+        rel: 'noopener noreferrer nofollow',
+        class: null,
+      },
+      validate: undefined,
+    }
   },
 
   addAttributes() {
@@ -64,13 +96,14 @@ export const Link = Mark.create<LinkOptions>({
       target: {
         default: this.options.HTMLAttributes.target,
       },
+      class: {
+        default: this.options.HTMLAttributes.class,
+      },
     }
   },
 
   parseHTML() {
-    return [
-      { tag: 'a[href]' },
-    ]
+    return [{ tag: 'a[href]:not([href *= "javascript:" i])' }]
   },
 
   renderHTML({ HTMLAttributes }) {
@@ -79,15 +112,26 @@ export const Link = Mark.create<LinkOptions>({
 
   addCommands() {
     return {
-      setLink: attributes => ({ commands }) => {
-        return commands.setMark('link', attributes)
-      },
-      toggleLink: attributes => ({ commands }) => {
-        return commands.toggleMark('link', attributes, { extendEmptyMarkRange: true })
-      },
-      unsetLink: () => ({ commands }) => {
-        return commands.unsetMark('link', { extendEmptyMarkRange: true })
-      },
+      setLink:
+        attributes => ({ chain }) => {
+          return chain().setMark(this.name, attributes).setMeta('preventAutolink', true).run()
+        },
+
+      toggleLink:
+        attributes => ({ chain }) => {
+          return chain()
+            .toggleMark(this.name, attributes, { extendEmptyMarkRange: true })
+            .setMeta('preventAutolink', true)
+            .run()
+        },
+
+      unsetLink:
+        () => ({ chain }) => {
+          return chain()
+            .unsetMark(this.name, { extendEmptyMarkRange: true })
+            .setMeta('preventAutolink', true)
+            .run()
+        },
     }
   },
 
@@ -95,6 +139,13 @@ export const Link = Mark.create<LinkOptions>({
     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,
@@ -110,64 +161,30 @@ export const Link = Mark.create<LinkOptions>({
   },
 
   addProseMirrorPlugins() {
-    const plugins = []
+    const plugins: Plugin[] = []
+
+    if (this.options.autolink) {
+      plugins.push(
+        autolink({
+          type: this.type,
+          validate: this.options.validate,
+        }),
+      )
+    }
 
     if (this.options.openOnClick) {
       plugins.push(
-        new Plugin({
-          key: new PluginKey('handleClickLink'),
-          props: {
-            handleClick: (view, pos, event) => {
-              const attrs = this.editor.getAttributes('link')
-              const link = (event.target as HTMLElement)?.closest('a')
-
-              if (link && attrs.href) {
-                window.open(attrs.href, attrs.target)
-
-                return true
-              }
-
-              return false
-            },
-          },
+        clickHandler({
+          type: this.type,
         }),
       )
     }
 
     if (this.options.linkOnPaste) {
       plugins.push(
-        new Plugin({
-          key: new PluginKey('handlePasteLink'),
-          props: {
-            handlePaste: (view, event, slice) => {
-              const { state } = view
-              const { selection } = state
-              const { empty } = selection
-
-              if (empty) {
-                return false
-              }
-
-              let textContent = ''
-
-              slice.content.forEach(node => {
-                textContent += node.textContent
-              })
-
-              const link = find(textContent)
-                .find(item => item.isLink && item.value === textContent)
-
-              if (!textContent || !link) {
-                return false
-              }
-
-              this.editor.commands.setMark(this.type, {
-                href: link.href,
-              })
-
-              return true
-            },
-          },
+        pasteHandler({
+          editor: this.editor,
+          type: this.type,
         }),
       )
     }

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021, überdosis GbR
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/packages/extension-link/src/index.d.ts

@@ -1,3 +0,0 @@
-import { Link } from './link';
-export * from './link';
-export default Link;

package/dist/tiptap-extension-link.cjs.js

@@ -1,125 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@tiptap/core');
-var prosemirrorState = require('prosemirror-state');
-var linkifyjs = require('linkifyjs');
-
-const Link = core.Mark.create({
-    name: 'link',
-    priority: 1000,
-    inclusive: false,
-    defaultOptions: {
-        openOnClick: true,
-        linkOnPaste: true,
-        HTMLAttributes: {
-            target: '_blank',
-            rel: 'noopener noreferrer nofollow',
-        },
-    },
-    addAttributes() {
-        return {
-            href: {
-                default: null,
-            },
-            target: {
-                default: this.options.HTMLAttributes.target,
-            },
-        };
-    },
-    parseHTML() {
-        return [
-            { tag: 'a[href]' },
-        ];
-    },
-    renderHTML({ HTMLAttributes }) {
-        return ['a', core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-    },
-    addCommands() {
-        return {
-            setLink: attributes => ({ commands }) => {
-                return commands.setMark('link', attributes);
-            },
-            toggleLink: attributes => ({ commands }) => {
-                return commands.toggleMark('link', attributes, { extendEmptyMarkRange: true });
-            },
-            unsetLink: () => ({ commands }) => {
-                return commands.unsetMark('link', { extendEmptyMarkRange: true });
-            },
-        };
-    },
-    addPasteRules() {
-        return [
-            core.markPasteRule({
-                find: text => linkifyjs.find(text)
-                    .filter(link => link.isLink)
-                    .map(link => ({
-                    text: link.value,
-                    index: link.start,
-                    data: link,
-                })),
-                type: this.type,
-                getAttributes: match => {
-                    var _a;
-                    return ({
-                        href: (_a = match.data) === null || _a === void 0 ? void 0 : _a.href,
-                    });
-                },
-            }),
-        ];
-    },
-    addProseMirrorPlugins() {
-        const plugins = [];
-        if (this.options.openOnClick) {
-            plugins.push(new prosemirrorState.Plugin({
-                key: new prosemirrorState.PluginKey('handleClickLink'),
-                props: {
-                    handleClick: (view, pos, event) => {
-                        var _a;
-                        const attrs = this.editor.getAttributes('link');
-                        const link = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('a');
-                        if (link && attrs.href) {
-                            window.open(attrs.href, attrs.target);
-                            return true;
-                        }
-                        return false;
-                    },
-                },
-            }));
-        }
-        if (this.options.linkOnPaste) {
-            plugins.push(new prosemirrorState.Plugin({
-                key: new prosemirrorState.PluginKey('handlePasteLink'),
-                props: {
-                    handlePaste: (view, event, slice) => {
-                        const { state } = view;
-                        const { selection } = state;
-                        const { empty } = selection;
-                        if (empty) {
-                            return false;
-                        }
-                        let textContent = '';
-                        slice.content.forEach(node => {
-                            textContent += node.textContent;
-                        });
-                        const link = linkifyjs.find(textContent)
-                            .find(item => item.isLink && item.value === textContent);
-                        if (!textContent || !link) {
-                            return false;
-                        }
-                        this.editor.commands.setMark(this.type, {
-                            href: link.href,
-                        });
-                        return true;
-                    },
-                },
-            }));
-        }
-        return plugins;
-    },
-});
-
-exports.Link = Link;
-exports["default"] = Link;
-//# sourceMappingURL=tiptap-extension-link.cjs.js.map