fix: onLinkDetect event recalls

Author: hejsztynx

.playwright/tests/links.spec.ts

@@ -79,7 +79,7 @@ test('link mark round-trips in serialized HTML', async ({ page }) => {
 
   await expect
     .poll(async () => getSerializedHtml(page))
-    .toContain('<a href="https://example.com">Example</a>');
+    .toContain('<a href="https://example.com" data-auto="false">Example</a>');
 });
 
 test.describe('test-links setLink table', () => {
@@ -99,7 +99,8 @@ test.describe('test-links setLink table', () => {
       end: '11',
       text: 'world',
       url: 'https://example.com',
-      expectContains: '<p>Hello <a href="https://example.com">world</a></p>',
+      expectContains:
+        '<p>Hello <a href="https://example.com" data-auto="false">world</a></p>',
     },
     {
       name: 'wraps multiword phrase with spaces',
@@ -109,7 +110,7 @@ test.describe('test-links setLink table', () => {
       text: 'two three',
       url: 'https://multi.example',
       expectContains:
-        '<p>one <a href="https://multi.example">two three</a></p>',
+        '<p>one <a href="https://multi.example" data-auto="false">two three</a></p>',
     },
     {
       name: 'inserts linked text at cursor when start and end are the same',
@@ -118,7 +119,8 @@ test.describe('test-links setLink table', () => {
       end: '1',
       text: 'm',
       url: 'https://same-range.example',
-      expectContains: '<p>x<a href="https://same-range.example">m</a>x</p>',
+      expectContains:
+        '<p>x<a href="https://same-range.example" data-auto="false">m</a>x</p>',
     },
     {
       name: 'setLink blocked when selection entirely in codeblock',
@@ -164,7 +166,8 @@ test.describe('test-links setLink table', () => {
       end: '99999',
       text: 'Z',
       url: 'https://clamp.setlink',
-      expectContains: '<p><a href="https://clamp.setlink">Z</a></p>',
+      expectContains:
+        '<p><a href="https://clamp.setlink" data-auto="false">Z</a></p>',
     },
     {
       name: 'setLink wraps link text before inline image - keeps the image',
@@ -174,7 +177,7 @@ test.describe('test-links setLink table', () => {
       text: 'abc',
       url: 'https://example.com',
       expectContains:
-        '<p><a href="https://example.com">abc</a><img src="" width="80" height="80"/></p>',
+        '<p><a href="https://example.com" data-auto="false">abc</a><img src="" width="80" height="80"/></p>',
     },
     {
       name: 'wraps bold italic list item text with link',
@@ -184,7 +187,7 @@ test.describe('test-links setLink table', () => {
       text: 'styled',
       url: 'https://list-styled.example',
       expectContains:
-        '<ul><li><a href="https://list-styled.example"><b><i>styled</i></b></a></li><li>hello</li></ul>',
+        '<ul><li><a href="https://list-styled.example" data-auto="false"><b><i>styled</i></b></a></li><li>hello</li></ul>',
     },
     {
       name: 'inserts linked text at cursor at very start of first list item',
@@ -194,7 +197,7 @@ test.describe('test-links setLink table', () => {
       text: 'Link',
       url: 'https://cursor-list.example',
       expectContains:
-        '<ul><li><a href="https://cursor-list.example">Link</a>first</li><li>second</li></ul>',
+        '<ul><li><a href="https://cursor-list.example" data-auto="false">Link</a>first</li><li>second</li></ul>',
     },
     {
       name: 'inserts linked text at cursor inside empty list item',
@@ -204,7 +207,7 @@ test.describe('test-links setLink table', () => {
       text: 'Link',
       url: 'https://empty-list.example',
       expectContains:
-        '<ul><li><a href="https://empty-list.example">Link</a></li></ul>',
+        '<ul><li><a href="https://empty-list.example" data-auto="false">Link</a></li></ul>',
     },
     {
       name: 'wraps mixed bold and bold-italic text in list item with link as outermost mark',
@@ -214,7 +217,7 @@ test.describe('test-links setLink table', () => {
       text: 'abcd',
       url: 'https://mixed-marks.example',
       expectContains:
-        '<ul><li><a href="https://mixed-marks.example"><b>ab<i>cd</i></b></a></li></ul>',
+        '<ul><li><a href="https://mixed-marks.example" data-auto="false"><b>ab<i>cd</i></b></a></li></ul>',
     },
     {
       name: 'setLink replacement longer than selection applies marks from range start only',
@@ -224,7 +227,7 @@ test.describe('test-links setLink table', () => {
       text: 'abcdef',
       url: 'https://mixed-marks-longer.example',
       expectContains:
-        '<ul><li><a href="https://mixed-marks-longer.example"><b>abcdef</b></a></li></ul>',
+        '<ul><li><a href="https://mixed-marks-longer.example" data-auto="false"><b>abcdef</b></a></li></ul>',
     },
   ];
 
@@ -267,7 +270,8 @@ test.describe('test-links removeLink table', () => {
       html: '<html><p><a href="https://partial.test">abcde</a></p></html>',
       start: '0',
       end: '2',
-      expectContains: '<p>ab<a href="https://partial.test">cde</a></p>',
+      expectContains:
+        '<p>ab<a href="https://partial.test" data-auto="false">cde</a></p>',
     },
     {
       name: 'no link: plain paragraph unchanged',
@@ -288,7 +292,7 @@ test.describe('test-links removeLink table', () => {
       html: '<html><p>prefix <a href="https://noop.rm">ab</a> tail</p></html>',
       start: '1000',
       end: '1000',
-      expectContains: '<a href="https://noop.rm">ab</a>',
+      expectContains: '<a href="https://noop.rm" data-auto="false">ab</a>',
     },
   ];
 
@@ -376,7 +380,9 @@ test.describe('test-links autolink', () => {
 
     await expect
       .poll(async () => getTestLinksSerializedHtml(page))
-      .toContain('<a href="https://example.com">https://example.com</a>');
+      .toContain(
+        '<a href="https://example.com" data-auto="true">https://example.com</a>'
+      );
   });
 
   test('creates link while typing with custom regex', async ({ page }) => {
@@ -392,7 +398,7 @@ test.describe('test-links autolink', () => {
 
     await expect
       .poll(async () => getTestLinksSerializedHtml(page))
-      .toContain('<a href="issue-123">issue-123</a>');
+      .toContain('<a href="issue-123" data-auto="true">issue-123</a>');
   });
 
   test('creates link when pasting plain URL with default regex', async ({
@@ -407,7 +413,9 @@ test.describe('test-links autolink', () => {
 
     await expect
       .poll(async () => getTestLinksSerializedHtml(page))
-      .toContain('<a href="https://example.com">https://example.com</a>');
+      .toContain(
+        '<a href="https://example.com" data-auto="true">https://example.com</a>'
+      );
   });
 
   test('does not autolink when link regex is disabled', async ({ page }) => {

.playwright/tests/strictMarks.spec.ts

@@ -307,8 +307,12 @@ test.describe('strict marks', () => {
       .poll(async () => {
         const html = await getSerializedHtml(page);
         return (
-          html.includes('<a href="https://example.com">Hello</a>') &&
-          !html.includes('<a href="https://example.com">Hello more</a>')
+          html.includes(
+            '<a href="https://example.com" data-auto="false">Hello</a>'
+          ) &&
+          !html.includes(
+            '<a href="https://example.com" data-auto="false">Hello more</a>'
+          )
         );
       })
       .toBe(true);

src/web/pmPlugins/AutolinkPlugin/index.ts

@@ -72,6 +72,31 @@ function rangeHasManualLink(
   return found;
 }
 
+function rangeHasExactAutoLink(
+  doc: Node,
+  linkType: MarkType,
+  from: number,
+  to: number,
+  href: string
+): boolean {
+  let hasExact = true;
+  let hasText = false;
+
+  doc.nodesBetween(from, to, (node) => {
+    if (!hasExact) return false;
+    if (!node.isText) return true;
+
+    hasText = true;
+    const link = linkType.isInSet(node.marks);
+    if (!link || link.attrs.auto !== true || link.attrs.href !== href) {
+      hasExact = false;
+    }
+    return false;
+  });
+
+  return hasText && hasExact;
+}
+
 function extractRuns(
   block: Node,
   blockStartPos: number,
@@ -105,38 +130,6 @@ function extractRuns(
   return runs;
 }
 
-function scanRunForAutolinks(
-  run: Run,
-  doc: Node,
-  linkType: MarkType,
-  linkRegex: RegExp | undefined,
-  tr: Transaction,
-  detected: OnLinkDetected[]
-): void {
-  for (const match of run.text.matchAll(WHITESPACE_RE)) {
-    const word = match[0];
-    const wordStart = run.startPos + match.index!;
-    const wordEnd = wordStart + word.length;
-
-    const ranges = findAutolinkRangesInWord(word, linkRegex);
-    const fullMatch = ranges.some(
-      (r) => r.start === 0 && r.endExclusive === word.length
-    );
-
-    if (!fullMatch) continue;
-    if (rangeHasManualLink(doc, linkType, wordStart, wordEnd)) continue;
-
-    const href = word;
-    tr.addMark(wordStart, wordEnd, linkType.create({ href, auto: true }));
-    detected.push({
-      text: word,
-      url: href,
-      start: tiptapPosToNativePos(doc, wordStart),
-      end: tiptapPosToNativePos(doc, wordEnd),
-    });
-  }
-}
-
 function getDirtyBlocks(
   doc: Node,
   transactions: readonly Transaction[]
@@ -189,37 +182,85 @@ export const AutolinkPlugin = Extension.create<AutolinkPluginOptions>({
           const state = this.options.getLinkEmitter();
           if (!state || state.linkRegex === null) return null;
 
-          console.log('autoLink transaction');
-
           const { schema, doc, tr } = newState;
           const linkType = schema.marks.link;
           if (!linkType) return null;
 
           const dirtyBlocks = getDirtyBlocks(doc, transactions);
           if (dirtyBlocks.length === 0) return null;
-          // console.log('autoLink transaction');
 
           const detected: OnLinkDetected[] = [];
 
           for (const { node, pos } of dirtyBlocks) {
-            const from = pos + 1;
-            const to = pos + node.nodeSize - 1;
+            const blockFrom = pos + 1;
+            const blockTo = pos + node.nodeSize - 1;
 
-            removeAutoLinksInRange(doc, tr, linkType, from, to);
+            // find all valid links that should exist in this block
+            const desiredLinks: Array<{
+              start: number;
+              end: number;
+              href: string;
+            }> = [];
 
             for (const run of extractRuns(node, pos, schema)) {
-              scanRunForAutolinks(
-                run,
+              for (const match of run.text.matchAll(WHITESPACE_RE)) {
+                const word = match[0];
+                const wordStart = run.startPos + match.index!;
+                const wordEnd = wordStart + word.length;
+
+                const ranges = findAutolinkRangesInWord(word, state.linkRegex);
+                const fullMatch = ranges.some(
+                  (r) => r.start === 0 && r.endExclusive === word.length
+                );
+
+                if (!fullMatch) continue;
+                if (rangeHasManualLink(doc, linkType, wordStart, wordEnd))
+                  continue;
+
+                desiredLinks.push({
+                  start: wordStart,
+                  end: wordEnd,
+                  href: word,
+                });
+              }
+            }
+
+            let lastPos = blockFrom;
+
+            for (const link of desiredLinks) {
+              // strip auto links in the "gap" before this desired link
+              removeAutoLinksInRange(doc, tr, linkType, lastPos, link.start);
+
+              tr.addMark(
+                link.start,
+                link.end,
+                linkType.create({ href: link.href, auto: true })
+              );
+
+              const alreadyExisted = rangeHasExactAutoLink(
                 doc,
                 linkType,
-                state.linkRegex,
-                tr,
-                detected
+                link.start,
+                link.end,
+                link.href
               );
+
+              // don't emit if the link was not changed
+              if (!alreadyExisted) {
+                detected.push({
+                  text: link.href,
+                  url: link.href,
+                  start: tiptapPosToNativePos(doc, link.start),
+                  end: tiptapPosToNativePos(doc, link.end),
+                });
+              }
+
+              lastPos = link.end;
             }
-          }
 
-          console.log('transaction steps length', tr.steps.length);
+            // strip rest of the auto links that are now not desired
+            removeAutoLinksInRange(doc, tr, linkType, lastPos, blockTo);
+          }
 
           if (tr.steps.length === 0) return null;