[Bug]: After pasting HTML content with <a> tags link marks are created in wrong locations

[romansp]

Which packages did you experience the bug in?

extension-link

What Tiptap version are you using?

2.2.1

What’s the bug you are facing?

I'm trying to paste HTML content from another web page into tiptap.

1. Go to https://templates.tiptap.dev/
2. Don't clear the template document and paste the following HTML content with links in the middle of the doc.

--- start copying below ---

Some search engines:

• Google
• DuckDuckGo
• Bing

What is a search engine: https://en.wikipedia.org/wiki/Search_engine

--- stop copying above ---

3. Check pasted content and inspect browser console logs.

What browser are you using?

Chrome

Code example

https://stackblitz.com/edit/vue3-vite-starter-pj5vfd

What did you expect to happen?

Content should be pasted with links parsed correctly and no console errors should be thrown.

Anything to add? (optional)

Stack trace

index.js:87 
 Uncaught TypeError: Cannot read properties of undefined (reading 'nodeSize')
    at _Fragment.nodesBetween (index.js:87:60)
    at _Node.nodesBetween (index.js:1212:22)
    at getMarksBetween (getMarksBetween.ts:28:9)
    at PasteRule.handler (markPasteRule.ts:42:31)
    at PasteRule.ts:137:28
    at Array.forEach (<anonymous>)
    at PasteRule.ts:125:13
    at _Fragment.nodesBetween (index.js:88:31)
    at _Node.nodesBetween (index.js:1212:22)
    at run (PasteRule.ts:114:13)
nodesBetween	@	index.js:87
nodesBetween	@	index.js:1212
getMarksBetween	@	getMarksBetween.ts:28
handler	@	markPasteRule.ts:42
(anonymous)	@	PasteRule.ts:137
(anonymous)	@	PasteRule.ts:125
nodesBetween	@	index.js:88
nodesBetween	@	index.js:1212
run	@	PasteRule.ts:114
appendTransaction	@	PasteRule.ts:235
applyTransaction	@	index.js:808
apply	@	index.js:773
dispatchTransaction	@	Editor.ts:349
dispatch	@	index.js:5406
doPaste	@	index.js:3437
editHandlers.paste	@	index.js:3449
view.dom.addEventListener.view.input.eventHandlers.<computed>	@	index.js:2900

Introduced in tiptap v2.1.14, most likely with this PR #4700.

I'm not sure if parsing HTML content from PasteEvent even required here at all, index values from html won't match locations in text. I assume that's why exception is thrown.

tiptap/packages/extension-link/src/link.ts

Lines 170 to 185 in 8ba30f3

	if (html) {
	const dom = new DOMParser().parseFromString(html, 'text/html')
	const anchors = dom.querySelectorAll('a')
	if (anchors.length) {
	[...anchors].forEach(anchor => (foundLinks.push({
	text: anchor.innerText,
	data: {
	href: anchor.getAttribute('href'),
	},
	// get the index of the anchor inside the text
	// and add the length of the anchor text
	index: dom.body.innerText.indexOf(anchor.innerText) + anchor.innerText.length,
	})))
	}
	}

By that point HTML content and anchor tags were already parsed by prosemirror via parseHTML and schema attributes.

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[galdeguer-ut]

Same problem here, it seems related with #4700

[davidliudev]

Same issue here.

[romansp]

This is now reproducible on https://templates.tiptap.dev/ with the HTML content example from reproduction steps.

If HTML is pasted in the middle of the document link marks are mismatched and set in incorrect locations.

[galdeguer-ut]

Same here, I still see the nodeSize error pasting content with links:

It throws the exception in the prosemirror-model package, here.

[nk11dev]

Same problem: Cannot read properties of undefined (reading 'nodeSize').

I noticed that this error occurs when pasting content that has lists with links. Otherwise, when only the link is pasting, this error does not appear to me.

[jakebarshickf1nx]

I'm still experiencing many issues with pasting content with links in anything after version 2.1.10

[HananoshikaYomaru]

this issue is not fixed

using tiptap 2.2.2

[romansp]

After some initial testing this appears fixed in 2.2.3. Thanks!