@contember/react-slate-editor-base 2.2.0-alpha.3 → 2.2.0-alpha.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-slate-editor-base",
   "license": "Apache-2.0",
-  "version": "2.2.0-alpha.3",
+  "version": "2.2.0-alpha.5",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -34,8 +34,8 @@
     "directory": "packages/react-slate-editor-base"
   },
   "dependencies": {
-    "@contember/react-binding": "2.2.0-alpha.3",
-    "@contember/utilities": "2.2.0-alpha.3",
+    "@contember/react-binding": "2.2.0-alpha.5",
+    "@contember/utilities": "2.2.0-alpha.5",
     "@radix-ui/primitive": "^1.1.3",
     "@radix-ui/react-slot": "^1.2.4",
     "is-hotkey": "^0.2.0",

package/src/plugins/behaviour/paste/HtmlDeserializer.ts

@@ -82,7 +82,7 @@ export class HtmlDeserializer {
 			return {
 				elements: processed.flatMap(item => {
 					if (item.text !== undefined) {
-						return item.isWhiteSpace ? [] : [this.createDefaultElement([item.text])]
+						return item.isWhiteSpace ? [] : [this.createDefaultElement(this.trimBlockBoundaryWhitespace([item.text]))]
 					} else if (item.element !== undefined) {
 						return [item.element]
 					}
@@ -108,7 +108,40 @@ export class HtmlDeserializer {
 
 	deserializeBlocks(list: Node[], cumulativeTextAttrs: TextAttrs): Descendant[] {
 		const result = this.processNodeListPaste(list, cumulativeTextAttrs)
-		return result?.texts ?? result?.elements ?? []
+		if (result?.texts !== undefined) {
+			return this.trimBlockBoundaryWhitespace(result.texts)
+		}
+		return result?.elements ?? []
+	}
+
+	// Collapsible whitespace at the start/end of a block renders as nothing in HTML,
+	// so strip it from the edges of a block's inline content. Non-breaking spaces are kept.
+	private trimBlockBoundaryWhitespace(texts: Descendant[]): Descendant[] {
+		const trimmed = [...texts]
+		const trimEdge = (direction: 'start' | 'end') => {
+			for (let i = direction === 'start' ? 0 : trimmed.length - 1; i >= 0 && i < trimmed.length;) {
+				const node = trimmed[i]
+				if (!SlateText.isText(node)) {
+					return
+				}
+				const text = direction === 'start' ? node.text.replace(/^[ \t\r\n]+/, '') : node.text.replace(/[ \t\r\n]+$/, '')
+				if (text !== '') {
+					trimmed[i] = { ...node, text }
+					return
+				}
+				if (trimmed.length === 1) {
+					trimmed[i] = { ...node, text }
+					return
+				}
+				trimmed.splice(i, 1)
+				if (direction === 'end') {
+					i--
+				}
+			}
+		}
+		trimEdge('start')
+		trimEdge('end')
+		return trimmed
 	}
 
 	private deserializeTextNode(node: Node, cumulativeTextAttrs: TextAttrs): Descendant[] | null {

package/tests/cases/htmlDeserializer.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'bun:test'
+import { Descendant, Element as SlateElement, Text as SlateText } from 'slate'
+import { HtmlDeserializer } from '../../src/plugins/behaviour/paste/HtmlDeserializer.js'
+import { paragraphHtmlDeserializer } from '../../src/plugins/element/paragraphs/ParagraphHtmlDeserializer.js'
+
+const paragraph = (children: Descendant[]): SlateElement => ({ type: 'paragraph', children } as SlateElement)
+
+const createDeserializer = () =>
+	new HtmlDeserializer(
+		children => paragraph(children),
+		[paragraphHtmlDeserializer],
+	)
+
+const deserialize = (html: string) => {
+	const document = new DOMParser().parseFromString(html, 'text/html')
+	return createDeserializer().deserializeBlocks(Array.from(document.body.childNodes), {})
+}
+
+const childrenText = (node: unknown): string => {
+	if (SlateText.isText(node)) {
+		return node.text
+	}
+	return (node as SlateElement).children.map(childrenText).join('')
+}
+
+describe('html deserializer', () => {
+	it('trims block boundary whitespace in LibreOffice paste', () => {
+		const html = '<p style="line-height: 100%; margin-bottom: 0cm">\nFirst.</p>\n'
+			+ '<p style="line-height: 100%; margin-bottom: 0cm"><br>\n\n</p>\n'
+			+ '<p style="line-height: 100%; margin-bottom: 0cm">Second.</p>'
+		expect(deserialize(html)).toEqual([
+			paragraph([{ text: 'First.' }]),
+			paragraph([{ text: '' }]),
+			paragraph([{ text: 'Second.' }]),
+		])
+	})
+
+	it('trims leading and trailing whitespace inside a paragraph', () => {
+		expect(deserialize('<p>\n\tfoo\n</p>')).toEqual([
+			paragraph([{ text: 'foo' }]),
+		])
+	})
+
+	it('preserves inner whitespace around inline elements', () => {
+		const result = deserialize('<p>foo <span>bar</span> baz</p>')
+		expect(result).toHaveLength(1)
+		expect(childrenText(result[0])).toBe('foo bar baz')
+		expect((result[0] as SlateElement).children).toEqual([
+			{ text: 'foo ' },
+			{ text: 'bar' },
+			{ text: ' baz' },
+		])
+	})
+
+	it('maps <br> to a single space and keeps a lone <br> paragraph', () => {
+		const result = deserialize('<p>foo<br>bar</p>')
+		expect(result).toHaveLength(1)
+		expect(childrenText(result[0])).toBe('foo bar')
+
+		expect(deserialize('<p><br></p>')).toEqual([
+			paragraph([{ text: '' }]),
+		])
+	})
+
+	it('keeps non-breaking space at block edge', () => {
+		const result = deserialize('<p>&nbsp;foo</p>')
+		expect(result).toHaveLength(1)
+		expect(childrenText(result[0])).toBe(' foo')
+	})
+
+	it('does not produce extra elements from whitespace between paragraphs', () => {
+		const result = deserialize('<p>a</p>\n<p>b</p>')
+		expect(result).toHaveLength(2)
+		expect(result).toEqual([
+			paragraph([{ text: 'a' }]),
+			paragraph([{ text: 'b' }]),
+		])
+	})
+})

package/tests/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../../../tsconfig.settings.json",
+	"compilerOptions": {
+		"noEmit": true,
+		"emitDeclarationOnly": false
+	},
+	"references": [
+		{ "path": "../src" },
+	]
+}