@tiptap/extension-link - npm Package Compare versions

Comparing version 2.2.4 to 2.2.5

dist/index.js

 import { combineTransactionSteps, getChangedRanges, findChildrenInRange, getMarksBetween, getAttributes, Mark, mergeAttributes, markPasteRule } from '@tiptap/core';
-import { find, registerCustomProtocol, reset } from 'linkifyjs';
+import { tokenize, find, registerCustomProtocol, reset } from 'linkifyjs';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 
+/**
+ * Check if the provided tokens form a valid link structure, which can either be a single link token
+ * or a link token surrounded by parentheses or square brackets.
+ *
+ * This ensures that only complete and valid text is hyperlinked, preventing cases where a valid
+ * top-level domain (TLD) is immediately followed by an invalid character, like a number. For
+ * example, with the `find` method from Linkify, entering `example.com1` would result in
+ * `example.com` being linked and the trailing `1` left as plain text. By using the `tokenize`
+ * method, we can perform more comprehensive validation on the input text.
+ */
+function isValidLinkStructure(tokens) {
+    if (tokens.length === 1) {
+        return tokens[0].isLink;
+    }
+    if (tokens.length === 3 && tokens[1].isLink) {
+        return ['()', '[]'].includes(tokens[0].value + tokens[2].value);
+    }
+    return false;
+}
 function autolink(options) {
@@ -43,3 +62,7 @@ return new Plugin({
                     }
-                    find(lastWordBeforeSpace)
+                    const linksBeforeSpace = tokenize(lastWordBeforeSpace).map(t => t.toObject());
+                    if (!isValidLinkStructure(linksBeforeSpace)) {
+                        return false;
+                    }
+                    linksBeforeSpace
                         .filter(link => link.isLink)
@@ -46,0 +69,0 @@ // Calculate link position.

dist/index.umd.js

@@ -7,2 +7,21 @@ (function (global, factory) {
 
+  /**
+   * Check if the provided tokens form a valid link structure, which can either be a single link token
+   * or a link token surrounded by parentheses or square brackets.
+   *
+   * This ensures that only complete and valid text is hyperlinked, preventing cases where a valid
+   * top-level domain (TLD) is immediately followed by an invalid character, like a number. For
+   * example, with the `find` method from Linkify, entering `example.com1` would result in
+   * `example.com` being linked and the trailing `1` left as plain text. By using the `tokenize`
+   * method, we can perform more comprehensive validation on the input text.
+   */
+  function isValidLinkStructure(tokens) {
+      if (tokens.length === 1) {
+          return tokens[0].isLink;
+      }
+      if (tokens.length === 3 && tokens[1].isLink) {
+          return ['()', '[]'].includes(tokens[0].value + tokens[2].value);
+      }
+      return false;
+  }
   function autolink(options) {
@@ -46,3 +65,7 @@ return new state.Plugin({
                       }
-                      linkifyjs.find(lastWordBeforeSpace)
+                      const linksBeforeSpace = linkifyjs.tokenize(lastWordBeforeSpace).map(t => t.toObject());
+                      if (!isValidLinkStructure(linksBeforeSpace)) {
+                          return false;
+                      }
+                      linksBeforeSpace
                           .filter(link => link.isLink)
@@ -49,0 +72,0 @@ // Calculate link position.

package.json

 {
   "name": "@tiptap/extension-link",
   "description": "link extension for tiptap",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "homepage": "https://tiptap.dev",
@@ -35,4 +35,4 @@ "keywords": [
   "devDependencies": {
-    "@tiptap/core": "^2.2.4",
-    "@tiptap/pm": "^2.2.4"
+    "@tiptap/core": "^2.2.5",
+    "@tiptap/pm": "^2.2.5"
   },
@@ -39,0 +39,0 @@ "peerDependencies": {

src/helpers/autolink.ts

@@ -10,4 +10,26 @@ import {
 import { Plugin, PluginKey } from '@tiptap/pm/state'
-import { find } from 'linkifyjs'
+import { MultiToken, tokenize } from 'linkifyjs'
 
+/**
+ * Check if the provided tokens form a valid link structure, which can either be a single link token
+ * or a link token surrounded by parentheses or square brackets.
+ *
+ * This ensures that only complete and valid text is hyperlinked, preventing cases where a valid
+ * top-level domain (TLD) is immediately followed by an invalid character, like a number. For
+ * example, with the `find` method from Linkify, entering `example.com1` would result in
+ * `example.com` being linked and the trailing `1` left as plain text. By using the `tokenize`
+ * method, we can perform more comprehensive validation on the input text.
+ */
+function isValidLinkStructure(tokens: Array<ReturnType<MultiToken['toObject']>>) {
+  if (tokens.length === 1) {
+    return tokens[0].isLink
+  }
+
+  if (tokens.length === 3 && tokens[1].isLink) {
+    return ['()', '[]'].includes(tokens[0].value + tokens[2].value)
+  }
+
+  return false
+}
+
 type AutolinkOptions = {
@@ -81,3 +103,9 @@ type: MarkType
 
-          find(lastWordBeforeSpace)
+          const linksBeforeSpace = tokenize(lastWordBeforeSpace).map(t => t.toObject())
+
+          if (!isValidLinkStructure(linksBeforeSpace)) {
+            return false
+          }
+
+          linksBeforeSpace
             .filter(link => link.isLink)
@@ -84,0 +112,0 @@ // Calculate link position.

No alert changes

Improved metrics

Total package byte prevSize

125515

8.4%

Lines of code

1401

7.03%

No dependency changes