Improve text editor reliability and fix wrapping behavior

- Replace arbitrary timeouts with deterministic browser idle detection

  in Playwright tests

- Fix line wrapping to use full available width (trim trailing spaces

  from length calculation)

- Simplify rich text editor by removing plaintext mode and markdown

  transition plugin

- Consolidate IndentPlugin to work with paragraph-based structure

  (remove PlainTextIndentPlugin)

- Add comprehensive test utilities for browser idle detection with

  examples and documentation
Fix linewrap tests to expect trimmed newLine values

Tests for the rich text editor's linewrap behavior were failing because expectations assumed trailing spaces would be preserved. Update assertions to expect trimmed newLine values (and document that whitespace-only lines become empty) so the tests reflect the actual trimming behavior implemented in the linewrap logic.
Preserve single newlines when extracting editor text

Fix extra blank lines produced by getTextContent(): instead of using getRoot().getTextContent(), iterate over root children, extract each paragraph's text, and join with single '\n'. This prevents added empty lines between paragraphs and resolves the failing test that was seeing too many newlines.

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,13 +329,11 @@
 					namespace="CommitMessageEditor"
 					{placeholder}
 					bind:this={composer}
-					plaintext={true}
 					onError={(e) => console.warn('Editor error', e)}
 					initialText={initialValue}
 					onChange={handleChange}
 					onKeyDown={handleKeyDown}
 					{disabled}
-					{wrapCountValue}
 					useMonospaceFont={useRuler && !forceSansFont}
 					monospaceFont={$userSettings.diffFont}
 					tabSize={$userSettings.tabSize}

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

@@ -4,11 +4,9 @@
 	import { standardConfig } from '$lib/richText/config/config';
 	import { standardTheme } from '$lib/richText/config/theme';
 	import { INLINE_CODE_TRANSFORMER } from '$lib/richText/customTransforers';
-	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 +24,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;
@@ -59,7 +46,6 @@
 		onKeyDown?: (event: KeyboardEvent | null) => boolean;
 		initialText?: string;
 		disabled?: boolean;
-		wrapCountValue?: number;
 		useMonospaceFont?: boolean;
 		monospaceFont?: string;
 		tabSize?: number;
@@ -70,7 +56,6 @@
 	let {
 		disabled,
 		namespace,
-		plaintext,
 		onError,
 		minHeight,
 		maxHeight,
@@ -84,7 +69,6 @@
 		onInput,
 		onKeyDown,
 		initialText,
-		wrapCountValue,
 		useMonospaceFont,
 		monospaceFont,
 		tabSize,
@@ -109,9 +93,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 +109,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 +137,7 @@
 			);
 
 			return () => {
-				unregidterKeyDown();
+				unregisterKeyDown();
 				unregisterFocus();
 				unregisterBlur();
 			};
@@ -187,6 +151,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 +164,20 @@
 
 	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(() => {
+				// Using `root.getTextContent()` adds extra blank lines between paragraphs, since
+				// normally paragraphs have a bottom margin (that we removed).
+				const root = getRoot();
+				const children = root.getChildren();
+				const paragraphTexts = children.map((child) => child.getTextContent());
+				const text = paragraphTexts.join('\n');
+				resolve(text);
+			});
 		});
 	}
 
@@ -213,7 +187,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 +201,7 @@
 			return;
 		}
 		const editor = composer.getEditor();
-		editor?.update(() => {
+		editor.update(() => {
 			const root = getRoot();
 			root.clear();
 		});
@@ -239,7 +214,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 +258,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,35 +280,20 @@
 		<EmojiPlugin bind:this={emojiPlugin} />
 
 		<OnChangePlugin
-			markdown={!plaintext}
 			onChange={(newValue, changeUpToAnchor, textAfterAnchor) => {
 				value = newValue;
 				onChange?.(newValue, changeUpToAnchor, textAfterAnchor);
 			}}
-			maxLength={wrapCountValue}
 		/>
 
 		{#if onInput}
-			<OnInput markdown={!plaintext} {onInput} maxLength={wrapCountValue} />
+			<OnInput {onInput} />
 		{/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

@@ -2,7 +2,7 @@
 	--markdown-generic-bottom-margin: 16px;
 }
 
-.lexical-container.plain-text {
+.lexical-container {
 	--font-default: var(--code-block-font, var(--font-mono));
 	font-variant-ligatures: var(--code-block-ligatures, normal);
 }
@@ -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/getText.ts

@@ -7,7 +7,7 @@ describe('wrapline', () => {
 			line: 'hello world',
 			maxLength: 8
 		});
-		expect(newLine).toEqual('hello ');
+		expect(newLine).toEqual('hello');
 		expect(remainder).toEqual('world');
 	});
 
@@ -34,7 +34,8 @@ describe('wrapline', () => {
 			line: ' ',
 			maxLength: 5
 		});
-		expect(newLine).toEqual(' ');
+		// Whitespace-only lines get trimmed to empty
+		expect(newLine).toEqual('');
 		expect(remainder).toEqual('');
 	});
 
@@ -53,7 +54,7 @@ describe('wrapline', () => {
 			remainder: 'longer',
 			maxLength: 5
 		});
-		expect(newLine).toEqual('longer ');
+		expect(newLine).toEqual('longer');
 		expect(remainder).toEqual('short');
 	});
 
@@ -73,7 +74,7 @@ describe('wrapline', () => {
 			remainder: '',
 			maxLength: 10
 		});
-		expect(newLine).toEqual(' leading ');
+		expect(newLine).toEqual(' leading');
 		expect(remainder).toEqual('space');
 	});
 
@@ -95,7 +96,7 @@ describe('wrapline', () => {
 			bullet: { indent: '  ', prefix: '- ' },
 			maxLength: 10
 		});
-		expect(newLine).toEqual('- hello ');
+		expect(newLine).toEqual('- hello');
 		expect(remainder).toEqual('world');
 	});