Fix text editor wrapping and improve test reliability

- Fix bug where typing in middle of paragraph lost characters during 
  rewrap
- Replace setTimeout with deterministic waits in HardWrapPlugin tests
- Remove legacy MarkdownTransitionPlugin and simplify initialization
- Add tests for automatic wrapping on init (enabled/disabled)
- Fix typos and improve null checking in RichTextEditor

Author: mtsgrd

apps/desktop/src/components/codegen/CodegenInput.svelte

@@ -249,7 +249,6 @@
 				bind:this={editorRef}
 				bind:value
 				namespace="codegen-input"
-				plaintext={true}
 				styleContext="chat-input"
 				placeholder="Use @ to reference files, ↓ and ↑ for prompt history"
 				minHeight="4rem"

apps/desktop/src/components/editor/MessageEditor.svelte

@@ -329,7 +329,6 @@
 					namespace="CommitMessageEditor"
 					{placeholder}
 					bind:this={composer}
-					plaintext={true}
 					onError={(e) => console.warn('Editor error', e)}
 					initialText={initialValue}
 					onChange={handleChange}

apps/web/src/lib/components/chat/ChatInput.svelte

@@ -276,7 +276,6 @@
 				styleContext="chat-input"
 				placeholder="Write your message"
 				bind:this={richText.richTextEditor}
-				plaintext={true}
 				namespace="ChatInput"
 				onError={console.error}
 				onInput={(text) => messageHandler.update(text)}

apps/web/src/routes/(app)/[ownerSlug]/[projectSlug]/reviews/[branchId]/+page.svelte

@@ -283,7 +283,6 @@
 							<div class="summary-wrapper">
 								<RichTextEditor
 									namespace="review-description"
-									plaintext={true}
 									onError={console.error}
 									styleContext="chat-input"
 									initialText={branch.description}

packages/ui/src/lib/richText/RichTextEditor.svelte

@@ -7,8 +7,7 @@
 	import { getCurrentText } from '$lib/richText/getText';
 	// import CodeBlockTypeAhead from '$lib/richText/plugins/CodeBlockTypeAhead.svelte';
 	import EmojiPlugin from '$lib/richText/plugins/Emoji.svelte';
-	import PlainTextIndentPlugin from '$lib/richText/plugins/PlainTextIndentPlugin.svelte';
-	import MarkdownTransitionPlugin from '$lib/richText/plugins/markdownTransition';
+	import IndentPlugin from '$lib/richText/plugins/IndentPlugin.svelte';
 	import OnChangePlugin, { type OnChangeCallback } from '$lib/richText/plugins/onChange.svelte';
 	import OnInput, { type OnInputCallback } from '$lib/richText/plugins/onInput.svelte';
 	import { insertTextAtCaret, setEditorText } from '$lib/richText/selection';
@@ -26,25 +25,14 @@
 		Composer,
 		ContentEditable,
 		RichTextPlugin,
-		ListPlugin,
-		CheckListPlugin,
 		AutoFocusPlugin,
 		PlaceHolder,
-		HashtagPlugin,
-		PlainTextPlugin,
-		AutoLinkPlugin,
-		FloatingLinkEditorPlugin,
-		CodeHighlightPlugin,
-		CodeActionMenuPlugin,
 		MarkdownShortcutPlugin,
-		ALL_TRANSFORMERS,
-		LinkPlugin,
 		HistoryPlugin
 	} from 'svelte-lexical';
 
 	interface Props {
 		namespace: string;
-		plaintext: boolean;
 		onError: (error: unknown) => void;
 		styleContext: 'client-editor' | 'chat-input';
 		plugins?: Snippet;
@@ -70,7 +58,6 @@
 	let {
 		disabled,
 		namespace,
-		plaintext,
 		onError,
 		minHeight,
 		maxHeight,
@@ -109,9 +96,6 @@
 	let editorDiv: HTMLDivElement | undefined = $state();
 	let emojiPlugin = $state<ReturnType<typeof EmojiPlugin>>();
 
-	// TODO: Change this plugin in favor of a toggle button.
-	const markdownTransitionPlugin = new MarkdownTransitionPlugin(wrapCountValue);
-
 	const isDisabled = $derived(disabled ?? false);
 
 	$effect(() => {
@@ -128,24 +112,7 @@
 	$effect(() => {
 		if (composer) {
 			const editor = composer.getEditor();
-			markdownTransitionPlugin.setEditor(editor);
-		}
-	});
-
-	$effect(() => {
-		markdownTransitionPlugin.setMarkdown(!plaintext);
-	});
-
-	$effect(() => {
-		if (wrapCountValue) {
-			markdownTransitionPlugin.setMaxLength(wrapCountValue);
-		}
-	});
-
-	$effect(() => {
-		if (composer) {
-			const editor = composer.getEditor();
-			const unregidterKeyDown = editor.registerCommand<KeyboardEvent | null>(
+			const unregisterKeyDown = editor.registerCommand<KeyboardEvent | null>(
 				KEY_DOWN_COMMAND,
 				(e) => {
 					if (emojiPlugin?.isBusy()) {
@@ -173,7 +140,7 @@
 			);
 
 			return () => {
-				unregidterKeyDown();
+				unregisterKeyDown();
 				unregisterFocus();
 				unregisterBlur();
 			};
@@ -187,6 +154,9 @@
 	});
 
 	async function updateInitialtext(initialText: string | undefined) {
+		if (!composer) return;
+
+		// Set initial text if provided and editor is empty
 		if (initialText) {
 			const currentText = await getPlaintext();
 			if (currentText?.trim() === '') {
@@ -197,13 +167,15 @@
 
 	export function getPlaintext(): Promise<string | undefined> {
 		return new Promise((resolve) => {
-			if (composer) {
-				const editor = composer.getEditor();
-				editor?.read(() => {
-					const text = getCurrentText(!plaintext, wrapCountValue);
-					resolve(text);
-				});
+			if (!composer) {
+				resolve(undefined);
+				return;
 			}
+			const editor = composer.getEditor();
+			editor.read(() => {
+				const text = getCurrentText(true, wrapCountValue);
+				resolve(text);
+			});
 		});
 	}
 
@@ -213,7 +185,8 @@
 				resolve(0);
 				return;
 			}
-			composer.getEditor()?.read(() => {
+			const editor = composer.getEditor();
+			editor.read(() => {
 				const root = getRoot();
 				const count = root.getChildren().filter(isParagraphNode).length;
 				resolve(count);
@@ -226,7 +199,7 @@
 			return;
 		}
 		const editor = composer.getEditor();
-		editor?.update(() => {
+		editor.update(() => {
 			const root = getRoot();
 			root.clear();
 		});
@@ -239,7 +212,8 @@
 		const editor = composer.getEditor();
 		// We should be able to use `editor.focus()` here, but for some reason
 		// it only works after the input has already been focused.
-		editor.getRootElement()?.focus();
+		const rootElement = editor.getRootElement();
+		rootElement?.focus();
 	}
 
 	export function wrapAll() {
@@ -282,7 +256,6 @@
 		class="lexical-container lexical-{styleContext} scrollbar"
 		bind:this={editorDiv}
 		use:focusable={{ button: true }}
-		class:plain-text={plaintext}
 		class:disabled={isDisabled}
 		style:min-height={minHeight}
 		style:max-height={maxHeight}
@@ -305,7 +278,7 @@
 		<EmojiPlugin bind:this={emojiPlugin} />
 
 		<OnChangePlugin
-			markdown={!plaintext}
+			markdown
 			onChange={(newValue, changeUpToAnchor, textAfterAnchor) => {
 				value = newValue;
 				onChange?.(newValue, changeUpToAnchor, textAfterAnchor);
@@ -314,26 +287,13 @@
 		/>
 
 		{#if onInput}
-			<OnInput markdown={!plaintext} {onInput} maxLength={wrapCountValue} />
+			<OnInput markdown {onInput} maxLength={wrapCountValue} />
 		{/if}
 
-		{#if plaintext}
-			<PlainTextPlugin />
-			<PlainTextIndentPlugin />
-			<!-- <CodeBlockTypeAhead /> -->
-			<MarkdownShortcutPlugin transformers={[INLINE_CODE_TRANSFORMER]} />
-		{:else}
-			<AutoLinkPlugin />
-			<CheckListPlugin />
-			<CodeActionMenuPlugin anchorElem={editorDiv} />
-			<CodeHighlightPlugin />
-			<FloatingLinkEditorPlugin anchorElem={editorDiv} />
-			<HashtagPlugin />
-			<ListPlugin />
-			<LinkPlugin />
-			<MarkdownShortcutPlugin transformers={ALL_TRANSFORMERS} />
-			<RichTextPlugin />
-		{/if}
+		<RichTextPlugin />
+		<IndentPlugin />
+		<MarkdownShortcutPlugin transformers={[INLINE_CODE_TRANSFORMER]} />
+
 		{#if autoFocus}
 			<AutoFocusPlugin />
 		{/if}
@@ -355,19 +315,6 @@
 		background-color: var(--clr-bg-1);
 	}
 
-	.editor-scroller {
-		display: flex;
-		z-index: 0;
-		position: relative;
-		flex-direction: column;
-		height: 100%;
-		overflow: auto;
-		border: 0;
-		outline: 0;
-		/* It's unclear why the resizer is on by default on this element. */
-		resize: none;
-	}
-
 	.editor {
 		z-index: -1;
 		position: relative;

packages/ui/src/lib/richText/css/standard-theme.css

@@ -45,7 +45,7 @@
 }
 
 /* Remove paragraph margins in plain-text mode */
-.lexical-container.plain-text .StandardTheme__paragraph {
+.lexical-container .StandardTheme__paragraph {
 	margin-bottom: 0;
 }
 

packages/ui/src/lib/richText/linewrap.ts

@@ -95,7 +95,17 @@ export function parseBullet(text: string): Bullet | undefined {
 }
 
 export function wrapIfNecessary({ node, maxLength }: { node: TextNode; maxLength: number }) {
-	const line = node.getTextContent();
+	const paragraph = node.getParent();
+
+	if (!$isParagraphNode(paragraph)) {
+		console.warn('[wrapIfNecessary] Node parent is not a paragraph:', paragraph?.getType());
+		return;
+	}
+
+	// Get the full text content from the paragraph, not just the mutated text node
+	// This is important when typing in the middle of text, as Lexical may split text nodes
+	const line = paragraph.getTextContent();
+
 	if (line.length <= maxLength) {
 		return;
 	}
@@ -108,12 +118,6 @@ export function wrapIfNecessary({ node, maxLength }: { node: TextNode; maxLength
 
 	const bullet = parseBullet(line);
 	const indent = bullet ? bullet.indent : parseIndent(line);
-	const paragraph = node.getParent();
-
-	if (!$isParagraphNode(paragraph)) {
-		console.warn('[wrapIfNecessary] Node parent is not a paragraph:', paragraph?.getType());
-		return;
-	}
 
 	const selection = getSelection();
 	const selectionOffset = isRangeSelection(selection) ? selection.focus.offset : 0;
@@ -126,8 +130,28 @@ export function wrapIfNecessary({ node, maxLength }: { node: TextNode; maxLength
 		bullet
 	});
 
-	// Update current text node
-	node.setTextContent(newLine);
+	// Replace all text nodes in the paragraph with a single text node containing the wrapped text
+	// This is important because Lexical may have split the text into multiple nodes during typing
+	const children = paragraph.getChildren();
+	const firstTextNode = children.find((child) => isTextNode(child)) as TextNode | undefined;
+
+	if (firstTextNode) {
+		// Update the first text node with the new content
+		firstTextNode.setTextContent(newLine);
+		// Remove all other children
+		for (const child of children) {
+			if (child !== firstTextNode) {
+				child.remove();
+			}
+		}
+	} else {
+		// Fallback: no text nodes found, create one
+		const newTextNode = new TextNode(newLine);
+		paragraph.append(newTextNode);
+	}
+
+	// Get reference to the text node we'll use for cursor positioning
+	const currentTextNode = firstTextNode || (paragraph.getFirstChild() as TextNode);
 
 	// If there's a remainder, create new paragraphs for it
 	if (newRemainder) {
@@ -160,7 +184,7 @@ export function wrapIfNecessary({ node, maxLength }: { node: TextNode; maxLength
 		// If cursor was in the first line
 		if (remainingOffset <= newLine.length) {
 			// Keep cursor in the current paragraph at the same position
-			node.select(remainingOffset, remainingOffset);
+			currentTextNode.select(remainingOffset, remainingOffset);
 		} else {
 			// Cursor should be in one of the wrapped paragraphs
 			remainingOffset -= newLine.length + 1; // Account for the line and space

packages/ui/src/lib/richText/markdown.ts

@@ -1,33 +1,7 @@
 import { isWrappingExempt, parseBullet, parseIndent, wrapLine } from '$lib/richText/linewrap';
 import { $convertToMarkdownString as convertToMarkdownString } from '@lexical/markdown';
-import {
-	$getRoot as getRoot,
-	type LexicalEditor,
-	$createParagraphNode as createParagraphNode,
-	$createTextNode as createTextNode
-} from 'lexical';
 import { ALL_TRANSFORMERS } from 'svelte-lexical';
 
-export function updateEditorToRichText(editor: LexicalEditor | undefined) {
-	editor?.update(() => {
-		const text = getRoot().getTextContent();
-
-		// Clear the editor
-		getRoot().clear();
-
-		// Split text into lines and create a paragraph for each line
-		// This preserves blank lines unlike markdown conversion
-		const lines = text.split('\n');
-
-		for (const line of lines) {
-			const paragraph = createParagraphNode();
-			const textNode = createTextNode(line);
-			paragraph.append(textNode);
-			getRoot().append(paragraph);
-		}
-	});
-}
-
 export function getMarkdownString(maxLength?: number): string {
 	const markdown = convertToMarkdownString(ALL_TRANSFORMERS, undefined, true);
 	return maxLength ? wrapIfNecessary(markdown, maxLength) : markdown;
@@ -71,7 +45,7 @@ export function wrapIfNecessary(markdown: string, maxLength: number): string {
 		let remainder = '';
 
 		// We want to consider the modified line, and the remaining lines from
-		// the same pagraph.
+		// the same paragraph.
 		const paragraphLength = getParagraphLength(lines.slice(i));
 
 		const { newLine, newRemainder } = wrapLine({
@@ -111,22 +85,3 @@ export function wrapIfNecessary(markdown: string, maxLength: number): string {
 	}
 	return newLines.join('\n');
 }
-
-export function updateEditorToPlaintext(editor: LexicalEditor | undefined, maxLength?: number) {
-	editor?.update(() => {
-		const text = getMarkdownString(maxLength);
-		if (text.length === 0) {
-			return;
-		}
-
-		const root = getRoot();
-		root.clear();
-
-		// Create a separate paragraph for each line
-		for (const line of text.split('\n')) {
-			const paragraph = createParagraphNode();
-			paragraph.append(createTextNode(line));
-			root.append(paragraph);
-		}
-	});
-}