Fix Safari bug preventing multiple empty paragraphs on Enter

Safari/WebKit was not creating multiple empty paragraphs when pressing
Enter repeatedly at the end of text. The IndentPlugin's handleEnter
function only handled text nodes, but Safari can have the selection
directly on an empty paragraph node.

Updated handleEnter to handle both TextNode and ParagraphNode
selections, ensuring consistent behavior across browsers.

Added Playwright component test to verify the fix and enabled WebKit
testing in CI to prevent regressions.

Changes:
- IndentPlugin: Handle empty paragraph nodes in addition to text nodes
- Added browser-agnostic unit test using KEY_ENTER_COMMAND dispatch
- Added Playwright test "should allow adding multiple newlines at end"
- Enabled WebKit in playwright-ct.config.ts projects
- Updated playwright:install to include webkit browser

Author: mtsgrd

packages/ui/package.json

@@ -26,7 +26,7 @@
 		"test:watch": "vitest --watch --mode development",
 		"test:ct": "playwright test -c playwright-ct.config.ts",
 		"test:ct:ui": "playwright test -c playwright-ct.config.ts --ui",
-		"playwright:install": "playwright install --with-deps chromium"
+		"playwright:install": "playwright install --with-deps chromium webkit"
 	},
 	"devDependencies": {
 		"@codemirror/lang-cpp": "^6.0.3",

packages/ui/playwright-ct.config.ts

@@ -36,12 +36,14 @@ export default defineConfig({
 			}
 		}
 	},
-
-	/* Configure projects for major browsers */
 	projects: [
 		{
 			name: 'chromium',
 			use: { ...devices['Desktop Chrome'] }
+		},
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] }
 		}
 	]
 });

packages/ui/src/lib/richText/plugins/HardWrapPlugin.test.ts

@@ -1,13 +1,23 @@
 import { wrapIfNecessary } from '$lib/richText/linewrap';
-import { createEditor, ParagraphNode, type LexicalEditor } from 'lexical';
+import { handleEnter } from '$lib/richText/plugins/IndentPlugin.svelte';
+import {
+	createEditor,
+	TextNode,
+	type LexicalEditor,
+	COMMAND_PRIORITY_CRITICAL,
+	KEY_ENTER_COMMAND,
+	type NodeKey,
+	type NodeMutation
+} from 'lexical';
 import {
 	$createParagraphNode as createParagraphNode,
 	$createTextNode as createTextNode,
 	$getRoot as getRoot,
 	$getNodeByKey as getNodeByKey,
 	$getSelection as getSelection,
 	$isRangeSelection as isRangeSelection,
-	type TextNode
+	$isTextNode as isTextNode,
+	type TextNode as LexicalTextNode
 } from 'lexical';
 import { describe, it, expect, beforeEach } from 'vitest';
 
@@ -176,7 +186,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 			});
 
 			editor.update(() => {
-				const node = getNodeByKey(textNodeKey) as TextNode;
+				const node = getNodeByKey(textNodeKey) as LexicalTextNode;
 				wrapIfNecessary({ node, maxLength: 20 });
 			});
 
@@ -209,7 +219,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 			});
 
 			editor.update(() => {
-				const node = getNodeByKey(textNodeKey) as TextNode;
+				const node = getNodeByKey(textNodeKey) as LexicalTextNode;
 				wrapIfNecessary({ node, maxLength: 25 });
 			});
 
@@ -243,7 +253,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 			});
 
 			editor.update(() => {
-				const node = getNodeByKey(textNodeKey) as TextNode;
+				const node = getNodeByKey(textNodeKey) as LexicalTextNode;
 				wrapIfNecessary({ node, maxLength: 20 });
 			});
 
@@ -282,7 +292,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 				root.append(para3);
 
 				// Now edit the first paragraph to make it longer
-				const textNode = para1.getFirstChild() as TextNode;
+				const textNode = para1.getFirstChild() as LexicalTextNode;
 				textNode.setTextContent('This is the first line that has been made much longer');
 
 				// Trigger rewrap
@@ -323,7 +333,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 			});
 
 			editor.update(() => {
-				const node = getNodeByKey(textNodeKey) as TextNode;
+				const node = getNodeByKey(textNodeKey) as LexicalTextNode;
 				// Simulate adding text by modifying the content
 				node.setTextContent(
 					'This is a very long line that has not been wrapped yet and definitely needs to be wrapped now'
@@ -370,7 +380,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 				root.append(para2);
 
 				// Trigger wrap on first paragraph
-				const textNode = para1.getFirstChild() as TextNode;
+				const textNode = para1.getFirstChild() as LexicalTextNode;
 				wrapIfNecessary({ node: textNode, maxLength: 20 });
 			});
 
@@ -401,7 +411,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 				root.append(para2);
 
 				// Trigger wrap on first paragraph
-				const textNode = para1.getFirstChild() as TextNode;
+				const textNode = para1.getFirstChild() as LexicalTextNode;
 				wrapIfNecessary({ node: textNode, maxLength: 20 });
 			});
 
@@ -435,7 +445,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 				root.append(para3);
 
 				// Trigger wrap on first paragraph
-				const textNode = para1.getFirstChild() as TextNode;
+				const textNode = para1.getFirstChild() as LexicalTextNode;
 				wrapIfNecessary({ node: textNode, maxLength: 20 });
 			});
 
@@ -466,7 +476,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 			});
 
 			editor.update(() => {
-				const node = getNodeByKey(textNodeKey) as TextNode;
+				const node = getNodeByKey(textNodeKey) as LexicalTextNode;
 				// Simulate typing " a word" in the middle, making it overflow
 				node.setTextContent('This a word is exactly at');
 
@@ -514,7 +524,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 				root.append(para3);
 
 				// Now edit the first paragraph to add more content
-				const textNode = para1.getFirstChild() as TextNode;
+				const textNode = para1.getFirstChild() as LexicalTextNode;
 				textNode.setTextContent('First line text that has been extended');
 
 				// Trigger rewrap
@@ -557,7 +567,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 			});
 
 			editor.update(() => {
-				const node = getNodeByKey(textNodeKey) as TextNode;
+				const node = getNodeByKey(textNodeKey) as LexicalTextNode;
 				// Simulate typing "inserted " in the middle, making it overflow
 				node.setTextContent('- First inserted second third');
 
@@ -606,7 +616,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 				root.append(para3);
 
 				// Now edit the first line to make it much longer
-				const textNode = para1.getFirstChild() as TextNode;
+				const textNode = para1.getFirstChild() as LexicalTextNode;
 				textNode.setTextContent('- Short bullet that has been made significantly longer');
 
 				// Trigger rewrap
@@ -664,7 +674,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 				root.append(emptyPara2);
 
 				// Trigger wrap on the first paragraph (should not affect empty paragraphs)
-				const textNode = para1.getFirstChild() as TextNode;
+				const textNode = para1.getFirstChild() as LexicalTextNode;
 				wrapIfNecessary({ node: textNode, maxLength: 72 });
 			});
 
@@ -685,6 +695,31 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 		});
 
 		it('should allow adding multiple newlines at the end by typing', () => {
+			const maxLength = 72;
+
+			// Register the IndentPlugin's Enter handler (simulating real editor behavior)
+			editor.registerCommand(KEY_ENTER_COMMAND, handleEnter, COMMAND_PRIORITY_CRITICAL);
+
+			// Register the HardWrapPlugin's mutation listener (simulating the plugin being active)
+			editor.registerMutationListener(TextNode, (nodes: Map<NodeKey, NodeMutation>) => {
+				editor.update(
+					() => {
+						for (const [key, type] of nodes.entries()) {
+							if (type !== 'updated') continue;
+
+							const node = getNodeByKey(key);
+							if (!node || !isTextNode(node)) continue;
+
+							wrapIfNecessary({ node, maxLength });
+						}
+					},
+					{
+						tag: 'history-merge'
+					}
+				);
+			});
+
+			// Set up initial state
 			editor.update(() => {
 				const root = getRoot();
 				const paragraph = createParagraphNode();
@@ -695,38 +730,22 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 				textNode.select(9, 9);
 			});
 
-			// Add an empty paragraph at the end
-			editor.update(() => {
-				const root = getRoot();
-				const emptyPara = createParagraphNode();
-				emptyPara.append(createTextNode(''));
-				root.append(emptyPara);
-			});
-
-			// Add another empty paragraph at the end
+			// Simulate pressing Enter (like a user would)
 			editor.update(() => {
-				const root = getRoot();
-				const emptyPara = createParagraphNode();
-				emptyPara.append(createTextNode(''));
-				root.append(emptyPara);
+				editor.dispatchCommand(KEY_ENTER_COMMAND, null);
 			});
 
-			// Now trigger wrapping on an empty paragraph (simulating typing in the empty area)
+			// Press Enter again
 			editor.update(() => {
-				const root = getRoot();
-				const children = root.getChildren();
-				const lastPara = children[children.length - 1] as ParagraphNode;
-				const textNode = lastPara.getFirstChild() as TextNode;
-				if (textNode) {
-					wrapIfNecessary({ node: textNode, maxLength: 72 });
-				}
+				editor.dispatchCommand(KEY_ENTER_COMMAND, null);
 			});
 
+			// Verify the result
 			editor.read(() => {
 				const root = getRoot();
 				const children = root.getChildren();
 
-				// Should still have all paragraphs
+				// Should have 3 paragraphs total
 				expect(children.length).toBe(3);
 
 				// First paragraph should have text
@@ -756,7 +775,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 				root.append(emptyPara2);
 
 				// Now type something in the last empty paragraph
-				const lastTextNode = emptyPara2.getFirstChild() as TextNode;
+				const lastTextNode = emptyPara2.getFirstChild() as LexicalTextNode;
 				lastTextNode.setTextContent('x');
 
 				// Trigger wrapping on the last paragraph (this simulates what happens when typing)
@@ -795,7 +814,7 @@ describe('HardWrapPlugin with multi-paragraph structure', () => {
 				root.append(emptyPara2);
 
 				// Now add more text to the first paragraph
-				const firstTextNode = para1.getFirstChild() as TextNode;
+				const firstTextNode = para1.getFirstChild() as LexicalTextNode;
 				firstTextNode.setTextContent('Some text with more content added');
 
 				// Trigger wrapping on the first paragraph (this simulates what happens when typing)

packages/ui/src/lib/richText/plugins/IndentPlugin.svelte

@@ -15,16 +15,32 @@ This component overrides enter key command to handle indentation and bullets in
 		const anchor = selection.anchor;
 		const node = anchor.getNode();
 
-		// Only handle if we're in a text node
-		if (!isTextNode(node)) return false;
+		// Handle both text nodes and paragraph nodes (for empty paragraphs)
+		let parent;
+		let textNode;
+		let offset = anchor.offset;
+
+		if (isTextNode(node)) {
+			textNode = node;
+			parent = node.getParent();
+		} else if (isParagraphNode(node)) {
+			// Selection is directly on paragraph (empty paragraph case)
+			parent = node;
+			textNode = parent.getFirstChild();
+			// If paragraph has no text node, create one
+			if (!textNode || !isTextNode(textNode)) {
+				textNode = createTextNode('');
+				parent.append(textNode);
+				offset = 0;
+			}
+		} else {
+			return false;
+		}
 
-		// Get the parent paragraph
-		const parent = node.getParent();
 		if (!isParagraphNode(parent)) return false;
 
 		// Get the current paragraph text
 		const currentLineText = parent.getTextContent();
-		const offset = anchor.offset;
 
 		// Parse indentation and bullets from current line
 		const indent = parseIndent(currentLineText);
@@ -54,12 +70,12 @@ This component overrides enter key command to handle indentation and bullets in
 		}
 
 		// Split the paragraph at the cursor position
-		const textContent = node.getTextContent();
+		const textContent = textNode.getTextContent();
 		const textAfterCursor = textContent.substring(offset);
 		const textBeforeCursor = textContent.substring(0, offset);
 
 		// Update current node's text to everything before cursor
-		node.setTextContent(textBeforeCursor);
+		textNode.setTextContent(textBeforeCursor);
 
 		// Create new paragraph with indented text
 		const newParagraph = createParagraphNode();

packages/ui/tests/HardWrapPlugin.spec.ts

@@ -287,4 +287,52 @@ test.describe('HardWrapPlugin', () => {
 		const paragraphCount = await getParagraphCount(component);
 		expect(paragraphCount).toBeGreaterThan(1);
 	});
+
+	test('should allow adding multiple newlines at the end by pressing Enter', async ({
+		mount,
+		page
+	}) => {
+		const component = await mount(HardWrapPluginTestWrapper, {
+			props: {
+				maxLength: 72,
+				enabled: true,
+				initialText: 'Some text'
+			}
+		});
+
+		// Wait for initial render
+		await waitForTextContent(component, 'Some text');
+		await waitForParagraphCount(component, 1);
+
+		// Focus the editor
+		await component.getByTestId('focus-button').click();
+
+		// Click at the end of the text
+		const editorWrapper = component.getByTestId('editor-wrapper');
+		const contentEditable = editorWrapper.locator('[contenteditable="true"]').first();
+		await contentEditable.click();
+
+		// Move cursor to end
+		await page.keyboard.press('End');
+
+		// Press Enter to create first empty paragraph
+		await page.keyboard.press('Enter');
+
+		// Wait for paragraph count to increase
+		await waitForParagraphCount(component, 2);
+
+		// Press Enter again to create second empty paragraph
+		await page.keyboard.press('Enter');
+
+		// Wait for paragraph count to increase
+		await waitForParagraphCount(component, 3);
+
+		// Verify we have 3 paragraphs
+		const paragraphCount = await getParagraphCount(component);
+		expect(paragraphCount).toBe(3);
+
+		// Verify the first paragraph still has text
+		const text = await getTextContent(component);
+		expect(text).toContain('Some text');
+	});
 });