fix(paste): collapse whitespace before pasting

By default html does not display whitespace but text does.
Remove newlines when pasting to ensure consistency with the previous display.

Keep the newlines when they are also displayed in the source.

* Resolves #4602.

Signed-off-by: Max <[email protected]>

src/extensions/Markdown.js

@@ -41,8 +41,9 @@
 import { Extension, getExtensionField } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { MarkdownSerializer, defaultMarkdownSerializer } from '@tiptap/pm/markdown'
-import markdownit from '../markdownit/index.js'
 import { DOMParser } from '@tiptap/pm/model'
+import markdownit from '../markdownit/index.js'
+import transformPastedHTML from './transformPastedHTML.js'
 
 const Markdown = Extension.create({
 
@@ -101,6 +102,7 @@ const Markdown = Extension.create({
 
 						return parser.parseSlice(dom, { preserveWhitespace: true, context: $context })
 					},
+					transformPastedHTML,
 				},
 			}),
 		]

src/extensions/transformPastedHTML.js

@@ -0,0 +1,78 @@
+/**
+ * @copyright Copyright (c) 2023 Max <[email protected]>
+ *
+ * @author Max <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ *
+ * Prepare pasted html for insertion into tiptap
+ *
+ * We render paragraphs with `white-space: pre-wrap`
+ * so newlines are visible and preserved.
+ *
+ * Pasted html may contain newlines inside tags with a different `white-space` style.
+ * They are not visible in the source.
+ * Strip them so the pasted result wraps nicely.
+ *
+ * At the same time we need to preserve whitespace inside `<pre>` tags and the like.
+ */
+
+export default function(html) {
+	const parser = new DOMParser();
+	const doc = parser.parseFromString(html, 'text/html')
+	forAllTextNodes(doc, textNode => {
+		if (collapseWhiteSpace(textNode)) {
+			textNode.textContent = textNode.textContent.replaceAll('\n', ' ')
+		}
+	})
+	return doc.body.innerHTML
+}
+
+function forAllTextNodes(doc, fn) {
+	const nodeIterator = doc.createNodeIterator(
+		doc.body,
+		NodeFilter.SHOW_TEXT,
+	);
+	var currentNode
+	while (currentNode = nodeIterator.nextNode()) {
+		fn(currentNode)
+	}
+}
+
+function collapseWhiteSpace(textNode) {
+	// Values of `white-space` css that will collapse newline whitespace
+	// See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#values
+	const COLLAPSING_WHITE_SPACE_VALUES = ['normal', 'nowrap']
+	var ancestor = textNode
+	while (ancestor = ancestor.parentElement) {
+		const style = getComputedStyle(ancestor)
+		const whiteSpace = style?.getPropertyValue('white-space')
+		if (whiteSpace) {
+			return COLLAPSING_WHITE_SPACE_VALUES.includes(whiteSpace)
+		}
+		// Chrome does not support getComputedStyle on detached dom
+		// https://lists.w3.org/Archives/Public/www-style/2018May/0031.html
+		// So we need some heuristic instead
+		if (ancestor.tagName == 'PRE') {
+			return false
+		}
+	}
+	return true
+}

src/tests/extensions/transformPastedHTML.spec.js

@@ -0,0 +1,73 @@
+import transformPastedHTML from './../../extensions/transformPastedHTML.js'
+
+describe('transformPastedHTML', () => {
+
+	// alias so the strings line up nicely
+	const tr = transformPastedHTML
+
+	it('strips newlines from input', () => {
+		expect(tr('a\nb\n\nc'))
+			.toBe('a b  c')
+	})
+
+	it('strips newlines from input', () => {
+		expect(tr('a\nb\n\nc'))
+			.toBe('a b  c')
+	})
+
+	it('strips newlines from tags', () => {
+		expect(tr('<p>a\nb</p>'))
+			.toBe('<p>a b</p>')
+	})
+
+	it('preserve newlines in pre tags', () => {
+		expect(tr('<pre>a\nb</pre>'))
+			.toBe('<pre>a\nb</pre>')
+	})
+
+	it('strips newlines in tags with white-space: normal', () => {
+		expect(tr('<div style="white-space: normal;">a\nb</div>'))
+			.toBe('<div style="white-space: normal;">a b</div>')
+	})
+
+	it('strips newlines in tags with white-space: nowrap', () => {
+		expect(tr('<div style="white-space: nowrap;">a\nb</div>'))
+			.toBe('<div style="white-space: nowrap;">a b</div>')
+	})
+
+	it('preserves newlines in tags with white-space: pre', () => {
+		expect(tr('<div style="white-space: pre;">a\nb</div>'))
+			.toBe('<div style="white-space: pre;">a\nb</div>')
+	})
+
+	it('preserve newlines in tags with white-space: pre-wrap', () => {
+		expect(tr('<div style="white-space: pre-wrap;">a\nb</div>'))
+			.toBe('<div style="white-space: pre-wrap;">a\nb</div>')
+	})
+
+	it('preserve newlines in tags with white-space: pre-line', () => {
+		expect(tr('<div style="white-space: pre-line;">a\nb</div>'))
+			.toBe('<div style="white-space: pre-line;">a\nb</div>')
+	})
+
+	it('preserve newlines in tags with white-space: break-spaces', () => {
+		expect(tr('<div style="white-space: break-spaces;">a\nb</div>'))
+			.toBe('<div style="white-space: break-spaces;">a\nb</div>')
+	})
+
+	it('handles different tags', () => {
+		expect(tr('<pre>a\nb</pre><p>c\nd</p>'))
+			.toBe('<pre>a\nb</pre><p>c d</p>')
+	})
+
+	it('preserve newlines in nested code blocks', () => {
+		expect(tr('<pre><code>this\nis code\nplease preserve\n  whitespace!\nThanks</code></pre>'))
+			.toBe('<pre><code>this\nis code\nplease preserve\n  whitespace!\nThanks</code></pre>')
+	})
+
+	it('preserve newlines in deep nested code blocks', () => {
+		expect(tr('<pre><code><em>this\nis code</em>\nplease preserve\n  whitespace!\nThanks</code></pre>'))
+			.toBe('<pre><code><em>this\nis code</em>\nplease preserve\n  whitespace!\nThanks</code></pre>')
+	})
+
+})