Refactor rich text editor functions to share text export function

Extract common text export logic from multiple rich text editor
functions into a single shared export function to reduce code
duplication and improve maintainability.

Author: mtsgrd

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

@@ -11,6 +11,7 @@
 	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';
+	import { exportPlaintext } from '$lib/richText/utils/export';
 	import {
 		COMMAND_PRIORITY_CRITICAL,
 		$getRoot as getRoot,
@@ -173,11 +174,7 @@
 			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);
+				resolve(exportPlaintext(getRoot()));
 			});
 		});
 	}

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

@@ -9,6 +9,7 @@
 <script lang="ts">
 	import { getEditor } from '$lib/richText/context';
 	import { getEditorTextAfterAnchor, getEditorTextUpToAnchor } from '$lib/richText/selection';
+	import { exportPlaintext } from '$lib/richText/utils/export';
 	import { $getRoot as getRoot } from 'lexical';
 	import {
 		BLUR_COMMAND,
@@ -32,28 +33,22 @@
 			BLUR_COMMAND,
 			() => {
 				editor.read(() => {
-					const currentText = getRoot().getTextContent();
-					if (currentText === text) {
-						return;
-					}
-
+					const currentText = exportPlaintext(getRoot());
+					if (currentText === text) return;
 					text = currentText;
+
 					const selection = getSelection();
 					if (!isRangeSelection(selection)) {
 						return;
 					}
 
 					const textUpToAnchor = getEditorTextUpToAnchor(selection);
 					const textAfterAnchor = getEditorTextAfterAnchor(selection);
-					onChange?.(text, textUpToAnchor, textAfterAnchor);
+					onChange?.(exportPlaintext(getRoot()), textUpToAnchor, textAfterAnchor);
 				});
 				return false;
 			},
 			COMMAND_PRIORITY_NORMAL
 		);
 	});
-
-	export function getText(): string | undefined {
-		return text;
-	}
 </script>

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

@@ -9,6 +9,7 @@
 <script lang="ts">
 	import { getEditor } from '$lib/richText/context';
 	import { getEditorTextAfterAnchor, getEditorTextUpToAnchor } from '$lib/richText/selection';
+	import { exportPlaintext } from '$lib/richText/utils/export';
 	import {
 		$getRoot as getRoot,
 		$getSelection as getSelection,
@@ -37,12 +38,10 @@
 				}
 
 				editorState.read(() => {
-					const currentText = getRoot().getTextContent();
-					if (currentText === text) {
-						return;
-					}
-
+					const currentText = exportPlaintext(getRoot());
+					if (currentText === text) return;
 					text = currentText;
+
 					const selection = getSelection();
 					if (!isRangeSelection(selection)) {
 						return;

packages/ui/src/lib/richText/utils/export.ts

@@ -0,0 +1,16 @@
+import type { RootNode } from 'lexical';
+
+/**
+ * We keep this export function in a separate package accessible to both plugins
+ * as well as the core editor functionality.
+ *
+ * TODO: Restructure the richText code so we don't need this separate `utils` package.
+ */
+export function exportPlaintext(root: RootNode): string {
+	// Using `root.getTextContent()` adds extra blank lines between paragraphs, since
+	// normally paragraphs have a bottom margin (that we removed).
+	const children = root.getChildren();
+	const paragraphTexts = children.map((child) => child.getTextContent());
+	const text = paragraphTexts.join('\n');
+	return text;
+}