Fix text editor wrapping and improve test reliability

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/linewrap.test.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');
 	});