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]>
Signed-off-by: Jonas <[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({
 
@@ -106,6 +107,7 @@ const Markdown = Extension.create({
 
 						return parser.parseSlice(dom, { preserveWhitespace: true, context: $context })
 					},
+					transformPastedHTML,
 				},
 			}),
 		]

src/extensions/transformPastedHTML.js

@@ -0,0 +1,100 @@
+/**
+ * @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.
+ *
+ * @param {string} html Pasted html content
+ */
+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
+}
+
+/**
+ *
+ * Run function for all text nodes in the document.
+ *
+ * @param {Document} doc Html document to process
+ * @param {Function} fn Function to run
+ *
+ */
+function forAllTextNodes(doc, fn) {
+	const nodeIterator = doc.createNodeIterator(
+		doc.body,
+		NodeFilter.SHOW_TEXT,
+	)
+	let currentNode = nodeIterator.nextNode()
+	while (currentNode) {
+		fn(currentNode)
+		currentNode = nodeIterator.nextNode()
+	}
+}
+
+/**
+ *
+ * Check if newlines need to be collapsed based on the applied style
+ *
+ * @param {Text} textNode Text to check the style for
+ *
+ */
+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']
+	let ancestor = textNode.parentElement
+	while (ancestor) {
+		// Chrome does not support getComputedStyle on detached dom
+		// https://lists.w3.org/Archives/Public/www-style/2018May/0031.html
+		// Therefore the following logic only works on Firefox
+		const style = getComputedStyle(ancestor)
+		const whiteSpace = style?.getPropertyValue('white-space')
+		if (whiteSpace) {
+			// Returns false if white-space has a value not listed in COLLAPSING_WHITE_SPACE_VALUES
+			return COLLAPSING_WHITE_SPACE_VALUES.includes(whiteSpace)
+		}
+
+		// Check for `tagName` as fallback on Chrome
+		if (ancestor.tagName === 'PRE') {
+			return false
+		}
+		ancestor = ancestor.parentElement
+	}
+	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>')
+	})
+
+})