@fluidframework/react 2.83.0 → 2.90.0

package/lib/text/formatted/quillFormattedView.js

@@ -0,0 +1,426 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import { assert } from "@fluidframework/core-utils/internal";
+import { Tree, TreeAlpha, FormattedTextAsTree } from "@fluidframework/tree/internal";
+export { FormattedTextAsTree } from "@fluidframework/tree/internal";
+import Quill from "quill";
+import DeltaPackage from "quill-delta";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { unwrapPropTreeNode } from "../../propNode.js";
+const Delta = DeltaPackage.default;
+/**
+ * A React component for formatted text editing.
+ * @remarks
+ * Uses {@link @fluidframework/tree#FormattedTextAsTree.Tree} for the data-model and Quill for the rich text editor UI.
+ * @internal
+ */
+export const FormattedMainView = React.forwardRef(({ root, undoRedo }, ref) => {
+    return React.createElement(FormattedTextEditorView, { root: root, undoRedo: undoRedo, ref: ref });
+});
+FormattedMainView.displayName = "FormattedMainView";
+/** Quill size names mapped to pixel values for tree storage. */
+const sizeMap = { small: 10, large: 18, huge: 24 };
+/** Reverse mapping: pixel values back to Quill size names for display. */
+const sizeReverse = { 10: "small", 18: "large", 24: "huge" };
+/** Set of recognized font families for Quill. */
+const fontSet = new Set(["monospace", "serif", "sans-serif", "Arial"]);
+/** Default formatting values when no explicit format is specified. */
+const defaultSize = 12;
+/** Default font when no explicit font is specified. */
+const defaultFont = "Arial";
+/**
+ * Parse CSS font-size from a pasted HTML element's inline style.
+ * Returns a Quill size name if the pixel value matches a supported size, undefined otherwise.
+ * 12px is the default size and returns undefined (no Quill attribute needed).
+ */
+export function parseCssFontSize(node) {
+    const style = node.style.fontSize;
+    if (!style)
+        return undefined;
+    // check if pixel value is in <size>px format
+    if (style.endsWith("px")) {
+        // Parse pixel value (e.g., "18px" -> 18)
+        const parsed = Number.parseFloat(style);
+        if (Number.isNaN(parsed))
+            return undefined;
+        // Round to nearest integer and look up Quill size name
+        const rounded = Math.round(parsed);
+        if (rounded in sizeReverse) {
+            return sizeReverse[rounded];
+        }
+    }
+    return undefined;
+}
+/**
+ * Parse CSS font-family from a pasted HTML element's inline style.
+ * Tries fonts in priority order (first to last per CSS spec) and returns
+ * the first recognized Quill font value.
+ */
+export function parseCssFontFamily(node) {
+    const style = node.style.fontFamily;
+    if (style === "")
+        return undefined;
+    // Splitting on "," does not handle commas inside quoted font names, and escape
+    // sequences within font names are not supported. This is fine since none of the
+    // font names we match against contain commas or escapes.
+    const fonts = style.split(",");
+    for (const raw of fonts) {
+        // Trim whitespace and leading and trailing quotes
+        const font = raw.trim().replace(/^["']/, "").replace(/["']$/, "");
+        // check if font is in our supported font set
+        if (fontSet.has(font)) {
+            return font;
+        }
+    }
+    // No recognized font family found; fall back to default (Arial)
+    return undefined;
+}
+/**
+ * Clipboard matcher that preserves recognized font-size and font-family
+ * from pasted HTML elements. Applies each format independently via
+ * compose/retain so new attributes can be added without risk of an
+ * early return skipping them.
+ * @see https://quilljs.com/docs/modules/clipboard#addmatcher
+ */
+export function clipboardFormatMatcher(node, delta) {
+    if (!(node instanceof HTMLElement))
+        return delta;
+    const size = parseCssFontSize(node);
+    const font = parseCssFontFamily(node);
+    let result = delta;
+    if (size !== undefined) {
+        result = result.compose(new Delta().retain(result.length(), { size }));
+    }
+    if (font !== undefined) {
+        result = result.compose(new Delta().retain(result.length(), { font }));
+    }
+    return result;
+}
+/**
+ * Parse a size value from Quill into a numeric pixel value.
+ * Handles Quill's named sizes (small, large, huge), numeric values, and pixel strings.
+ */
+function parseSize(size) {
+    if (typeof size === "number")
+        return size;
+    if (size === "small" || size === "large" || size === "huge") {
+        return sizeMap[size];
+    }
+    if (typeof size === "string") {
+        const parsed = Number.parseInt(size, 10);
+        if (!Number.isNaN(parsed)) {
+            return parsed;
+        }
+    }
+    return defaultSize;
+}
+/**
+ * Convert Quill attributes to a complete CharacterFormat object.
+ * Used when inserting new characters - all format properties must have values.
+ * Missing attributes default to false/default values.
+ */
+function quillAttrsToFormat(attrs) {
+    return {
+        bold: attrs?.bold === true,
+        italic: attrs?.italic === true,
+        underline: attrs?.underline === true,
+        size: parseSize(attrs?.size),
+        font: typeof attrs?.font === "string" ? attrs.font : defaultFont,
+    };
+}
+/**
+ * Convert Quill attributes to a partial CharacterFormat object.
+ * Used when applying formatting to existing text via retain operations.
+ * Only includes properties that were explicitly set in the Quill attributes,
+ * allowing selective format updates without overwriting unrelated properties.
+ */
+function quillAttrsToPartial(attrs) {
+    if (!attrs)
+        return {};
+    const format = {};
+    // Only include attributes that are explicitly present in the Quill delta
+    if ("bold" in attrs)
+        format.bold = attrs.bold === true;
+    if ("italic" in attrs)
+        format.italic = attrs.italic === true;
+    if ("underline" in attrs)
+        format.underline = attrs.underline === true;
+    if ("size" in attrs)
+        format.size = parseSize(attrs.size);
+    if ("font" in attrs)
+        format.font = typeof attrs.font === "string" ? attrs.font : defaultFont;
+    return format;
+}
+/**
+ * Convert a CharacterFormat from the tree to Quill attributes.
+ * Used when building Quill deltas from tree content to sync external changes.
+ * Only includes non-default values to keep deltas minimal.
+ */
+function formatToQuillAttrs(format) {
+    const attrs = {};
+    // Only include non-default formatting to keep Quill deltas minimal
+    if (format.bold)
+        attrs.bold = true;
+    if (format.italic)
+        attrs.italic = true;
+    if (format.underline)
+        attrs.underline = true;
+    if (format.size !== defaultSize) {
+        // Convert pixel value back to Quill size name if possible
+        attrs.size =
+            format.size in sizeReverse
+                ? sizeReverse[format.size]
+                : `${format.size}px`;
+    }
+    if (format.font !== defaultFont)
+        attrs.font = format.font;
+    return attrs;
+}
+/**
+ * Build a Quill Delta representing the full tree content.
+ * Iterates through formatted characters and groups consecutive characters
+ * with identical formatting into single insert operations for efficiency.
+ *
+ * @remarks
+ * This is used to sync Quill's display when the tree changes externally
+ * (e.g., from a remote collaborator's edit).
+ */
+function buildDeltaFromTree(root) {
+    const ops = [];
+    // Accumulator for current run of identically-formatted text
+    let text = "";
+    let attrs = {};
+    // JSON key for current attributes, used for equality comparison
+    // TODO:Performance: implement faster equality check.
+    let key = "";
+    // Helper to push accumulated text as an insert operation
+    const pushRun = () => {
+        if (!text)
+            return;
+        const op = { insert: text };
+        if (Object.keys(attrs).length > 0)
+            op.attributes = attrs;
+        ops.push(op);
+    };
+    // Iterate through each formatted character in the tree
+    // TODO:Performance: Optimize this loop by adding an API to get runs to FormattedTextAsTree.Tree, and implementing that using cursors.
+    // Something like `getUniformRun(startIndex, maxLength): number` and `substring(startIndex, length): string`.
+    for (const atom of root.charactersWithFormatting()) {
+        const a = formatToQuillAttrs(atom.format);
+        const k = JSON.stringify(a);
+        if (k === key) {
+            // Same formatting as previous character - extend current run
+            text += atom.content.content;
+        }
+        else {
+            // Different formatting - push current run and start new one
+            pushRun();
+            text = atom.content.content;
+            attrs = a;
+            key = k;
+        }
+    }
+    // Push any remaining accumulated text
+    pushRun();
+    // Quill expects documents to end with a newline
+    // eslint-disable-next-line unicorn/prefer-at -- .at() not available in target
+    const last = ops[ops.length - 1];
+    if (typeof last?.insert !== "string" || !last.insert.endsWith("\n")) {
+        ops.push({ insert: "\n" });
+    }
+    return ops;
+}
+/**
+ * The formatted text editor view component with Quill integration.
+ * Uses FormattedTextAsTree for collaborative rich text storage with formatting.
+ *
+ * @remarks
+ * This component uses event-based synchronization via Tree.on("treeChanged")
+ * to efficiently handle external changes without expensive render-time operations.
+ * Unlike the plain text version, this component uses Quill's delta operations
+ * to make targeted edits (insert at index, delete range, format range) rather
+ * than replacing all content on each change.
+ */
+const FormattedTextEditorView = React.forwardRef(({ root: propRoot, undoRedo }, ref) => {
+    // Unwrap the PropTreeNode to get the actual tree node
+    const root = unwrapPropTreeNode(propRoot);
+    // DOM element where Quill will mount its editor
+    const editorRef = React.useRef(null);
+    // Quill instance, persisted across renders to avoid re-initialization
+    const quillRef = React.useRef(null);
+    // Guards against update loops between Quill and the tree
+    const isUpdating = React.useRef(false);
+    // Container element for undo/redo button portal
+    const [undoRedoContainer, setUndoRedoContainer] = React.useState(undefined);
+    // Force re-render when undo/redo state changes
+    const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+    // Expose undo/redo methods via ref
+    React.useImperativeHandle(ref, () => ({
+        undo: () => undoRedo?.undo(),
+        redo: () => undoRedo?.redo(),
+    }));
+    // Initialize Quill editor with formatting toolbar using Quill provided CSS
+    React.useEffect(() => {
+        if (!editorRef.current || quillRef.current)
+            return;
+        const quill = new Quill(editorRef.current, {
+            theme: "snow",
+            placeholder: "Start typing with formatting...",
+            modules: {
+                history: false, // Disable Quill's built-in undo/redo
+                toolbar: [
+                    ["bold", "italic", "underline"],
+                    [{ size: ["small", false, "large", "huge"] }],
+                    [{ font: [] }],
+                    ["clean"],
+                ],
+                clipboard: [Node.ELEMENT_NODE, clipboardFormatMatcher],
+            },
+        });
+        // Set initial content from tree
+        quill.setContents(buildDeltaFromTree(root));
+        // Listen to local Quill changes and apply them to the tree.
+        // We process delta operations to make targeted edits, preserving collaboration integrity.
+        // Note: Quill uses UTF-16 code units for positions, but the tree uses Unicode codepoints.
+        // We must convert between them to handle emoji and other non-BMP characters correctly.
+        //
+        // The typing here is very fragile: if no parameter types are given,
+        // the inference for this event is strongly typed, but the types are wrong (The wrong "Delta" type is provided).
+        // This is likely related to the node16 module resolution issues with quill-delta.
+        // If we break that inference by adding types, `any` is inferred for all of them, so incorrect types here would still compile.
+        quill.on("text-change", (delta, _oldDelta, source) => {
+            if (source !== "user" || isUpdating.current)
+                return;
+            isUpdating.current = true;
+            // Wrap all tree mutations in a transaction so they undo/redo as one atomic unit.
+            // If the node is not part of a branch (e.g. unhydrated), apply edits directly.
+            const branch = TreeAlpha.branch(root);
+            const applyDelta = () => {
+                // Helper to count Unicode codepoints in a string
+                const codepointCount = (s) => [...s].length;
+                // Get current content for UTF-16 to codepoint position mapping
+                // We update this as we process operations to keep positions accurate
+                let content = root.fullString();
+                let utf16Pos = 0; // Position in UTF-16 code units (Quill's view)
+                let cpPos = 0; // Position in codepoints (tree's view)
+                for (const op of delta.ops) {
+                    if (op.retain !== undefined) {
+                        // The docs for retain imply this is always a number, but the type definitions allow a record here.
+                        // It is unknown why the type definitions allow a record as they have no doc comments.
+                        // For now this assert seems to be passing, so we just assume its always a number.
+                        assert(typeof op.retain === "number", 0xcdf /* Expected retain count to be a number */);
+                        // Convert UTF-16 retain count to codepoint count
+                        const retainedStr = content.slice(utf16Pos, utf16Pos + op.retain);
+                        const cpCount = codepointCount(retainedStr);
+                        if (op.attributes) {
+                            root.formatRange(cpPos, cpPos + cpCount, quillAttrsToPartial(op.attributes));
+                        }
+                        utf16Pos += op.retain;
+                        cpPos += cpCount;
+                    }
+                    else if (op.delete !== undefined) {
+                        // Convert UTF-16 delete count to codepoint count
+                        const deletedStr = content.slice(utf16Pos, utf16Pos + op.delete);
+                        const cpCount = codepointCount(deletedStr);
+                        root.removeRange(cpPos, cpPos + cpCount);
+                        // Update content to reflect deletion for future position calculations
+                        content = content.slice(0, utf16Pos) + content.slice(utf16Pos + op.delete);
+                        // Don't advance positions - next op starts at same position
+                    }
+                    else if (typeof op.insert === "string") {
+                        // Insert: add new text with formatting at current position
+                        root.defaultFormat = new FormattedTextAsTree.CharacterFormat(quillAttrsToFormat(op.attributes));
+                        root.insertAt(cpPos, op.insert);
+                        // Update content to reflect insertion
+                        content = content.slice(0, utf16Pos) + op.insert + content.slice(utf16Pos);
+                        // Advance by inserted content length
+                        utf16Pos += op.insert.length;
+                        cpPos += codepointCount(op.insert);
+                    }
+                }
+            };
+            if (branch === undefined) {
+                applyDelta();
+            }
+            else {
+                branch.runTransaction(applyDelta);
+            }
+            isUpdating.current = false;
+        });
+        quillRef.current = quill;
+        // Create container for React-controlled undo/redo buttons and prepend to toolbar
+        const toolbar = editorRef.current.previousElementSibling;
+        const container = document.createElement("span");
+        container.className = "ql-formats";
+        toolbar.prepend(container);
+        setUndoRedoContainer(container);
+        // In React strict mode, effects run twice. The `!quillRef.current` check above
+        // makes the second call a no-op, preventing double-initialization of Quill.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Sync Quill when tree changes externally (e.g., from remote collaborators).
+    // Uses event subscription instead of render-time observation for efficiency.
+    React.useEffect(() => {
+        return Tree.on(root, "treeChanged", () => {
+            // Skip if we caused the tree change ourselves via the text-change handler
+            if (!quillRef.current || isUpdating.current)
+                return;
+            // TODO:Performance: Once SharedTree has better ArrayNode change events,
+            // use those events to construct a delta, instead of rebuilding a new delta then diffing every edit.
+            // After doing the optimization, keep this diffing logic as a way to test for de-sync between the tree and Quill:
+            // Use it in tests and possibly occasionally in debug builds.
+            const treeDelta = buildDeltaFromTree(root);
+            // eslint doesn't seem to be resolving the types correctly here.
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const quillDelta = quillRef.current.getContents();
+            // Compute diff between current Quill state and tree state
+            const diff = new Delta(quillDelta).diff(new Delta(treeDelta));
+            // Only update if there are actual differences
+            if (diff.ops.length > 0) {
+                isUpdating.current = true;
+                // Apply only the diff for surgical updates (better cursor preservation)
+                quillRef.current.updateContents(diff.ops);
+                isUpdating.current = false;
+            }
+        });
+    }, [root]);
+    // Subscribe to undo/redo state changes to update button disabled state
+    React.useEffect(() => {
+        if (!undoRedo)
+            return;
+        return undoRedo.onStateChange(() => {
+            forceUpdate();
+        });
+    }, [undoRedo]);
+    // Render undo/redo buttons via portal into Quill toolbar
+    const undoRedoButtons = undoRedoContainer
+        ? ReactDOM.createPortal(React.createElement(React.Fragment, null,
+            React.createElement("button", { type: "button", className: "ql-undo", disabled: undoRedo?.canUndo() !== true, onClick: () => undoRedo?.undo() }),
+            React.createElement("button", { type: "button", className: "ql-redo", disabled: undoRedo?.canRedo() !== true, onClick: () => undoRedo?.redo() })), undoRedoContainer)
+        : undefined;
+    return (React.createElement("div", { style: { height: "100%", display: "flex", flexDirection: "column" } },
+        React.createElement("style", null, `
+				.ql-container { height: 100%; font-size: 14px; }
+				.ql-editor { height: 100%; outline: none; }
+				.ql-editor.ql-blank::before { color: #999; font-style: italic; }
+				.ql-toolbar { border-radius: 4px 4px 0 0; background: #f8f9fa; }
+				.ql-container.ql-snow { border-radius: 0 0 4px 4px; }
+				.ql-undo, .ql-redo { width: 28px !important; }
+				.ql-undo::after { content: "↶"; font-size: 18px; }
+				.ql-redo::after { content: "↷"; font-size: 18px; }
+				.ql-undo:disabled, .ql-redo:disabled { opacity: 0.3; cursor: not-allowed; }
+			`),
+        React.createElement("h2", { style: { margin: "10px 0" } }, "Collaborative Formatted Text Editor"),
+        React.createElement("div", { ref: editorRef, style: {
+                flex: 1,
+                minHeight: "300px",
+                border: "1px solid #ccc",
+                borderRadius: "4px",
+            } }),
+        undoRedoButtons));
+});
+FormattedTextEditorView.displayName = "FormattedTextEditorView";
+//# sourceMappingURL=quillFormattedView.js.map

package/lib/text/formatted/quillFormattedView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quillFormattedView.js","sourceRoot":"","sources":["../../../src/text/formatted/quillFormattedView.tsx"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport { assert } from \"@fluidframework/core-utils/internal\";\nimport { Tree, TreeAlpha, FormattedTextAsTree } from \"@fluidframework/tree/internal\";\nexport { FormattedTextAsTree } from \"@fluidframework/tree/internal\";\nimport Quill, { type EmitterSource } from \"quill\";\nimport DeltaPackage from \"quill-delta\";\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\nimport { type PropTreeNode, unwrapPropTreeNode } from \"../../propNode.js\";\nimport type { UndoRedo } from \"../../undoRedo.js\";\n\n// Workaround for quill-delta's export style not working well with node16 module resolution.\ntype Delta = DeltaPackage.default;\ntype QuillDeltaOp = DeltaPackage.Op;\nconst Delta = DeltaPackage.default;\n\n/**\n * Props for the FormattedMainView component.\n * @input @internal\n */\nexport interface FormattedMainViewProps {\n\treadonly root: PropTreeNode<FormattedTextAsTree.Tree>;\n\t/** Optional undo/redo stack for the editor. */\n\treadonly undoRedo?: UndoRedo;\n}\n\n/**\n * Ref handle exposing undo/redo methods for the formatted editor.\n * @input @internal\n */\nexport type FormattedEditorHandle = Pick<UndoRedo, \"undo\" | \"redo\">;\n\n/**\n * A React component for formatted text editing.\n * @remarks\n * Uses {@link @fluidframework/tree#FormattedTextAsTree.Tree} for the data-model and Quill for the rich text editor UI.\n * @internal\n */\nexport const FormattedMainView = React.forwardRef<\n\tFormattedEditorHandle,\n\tFormattedMainViewProps\n>(({ root, undoRedo }, ref) => {\n\treturn <FormattedTextEditorView root={root} undoRedo={undoRedo} ref={ref} />;\n});\nFormattedMainView.displayName = \"FormattedMainView\";\n\n/** Quill size names mapped to pixel values for tree storage. */\nconst sizeMap = { small: 10, large: 18, huge: 24 } as const;\n/** Reverse mapping: pixel values back to Quill size names for display. */\nconst sizeReverse = { 10: \"small\", 18: \"large\", 24: \"huge\" } as const;\n/** Set of recognized font families for Quill. */\nconst fontSet = new Set<string>([\"monospace\", \"serif\", \"sans-serif\", \"Arial\"]);\n/** Default formatting values when no explicit format is specified. */\nconst defaultSize = 12;\n/** Default font when no explicit font is specified. */\nconst defaultFont = \"Arial\";\n/**\n * Parse CSS font-size from a pasted HTML element's inline style.\n * Returns a Quill size name if the pixel value matches a supported size, undefined otherwise.\n * 12px is the default size and returns undefined (no Quill attribute needed).\n */\nexport function parseCssFontSize(node: HTMLElement): string | undefined {\n\tconst style = node.style.fontSize;\n\tif (!style) return undefined;\n\n\t// check if pixel value is in <size>px format\n\tif (style.endsWith(\"px\")) {\n\t\t// Parse pixel value (e.g., \"18px\" -> 18)\n\t\tconst parsed = Number.parseFloat(style);\n\t\tif (Number.isNaN(parsed)) return undefined;\n\n\t\t// Round to nearest integer and look up Quill size name\n\t\tconst rounded = Math.round(parsed);\n\t\tif (rounded in sizeReverse) {\n\t\t\treturn sizeReverse[rounded as keyof typeof sizeReverse];\n\t\t}\n\t}\n\treturn undefined;\n}\n\n/**\n * Parse CSS font-family from a pasted HTML element's inline style.\n * Tries fonts in priority order (first to last per CSS spec) and returns\n * the first recognized Quill font value.\n */\nexport function parseCssFontFamily(node: HTMLElement): string | undefined {\n\tconst style = node.style.fontFamily;\n\tif (style === \"\") return undefined;\n\n\t// Splitting on \",\" does not handle commas inside quoted font names, and escape\n\t// sequences within font names are not supported. This is fine since none of the\n\t// font names we match against contain commas or escapes.\n\tconst fonts = style.split(\",\");\n\tfor (const raw of fonts) {\n\t\t// Trim whitespace and leading and trailing quotes\n\t\tconst font = raw.trim().replace(/^[\"']/, \"\").replace(/[\"']$/, \"\");\n\t\t// check if font is in our supported font set\n\t\tif (fontSet.has(font)) {\n\t\t\treturn font;\n\t\t}\n\t}\n\t// No recognized font family found; fall back to default (Arial)\n\treturn undefined;\n}\n\n/**\n * Clipboard matcher that preserves recognized font-size and font-family\n * from pasted HTML elements. Applies each format independently via\n * compose/retain so new attributes can be added without risk of an\n * early return skipping them.\n * @see https://quilljs.com/docs/modules/clipboard#addmatcher\n */\nexport function clipboardFormatMatcher(node: Node, delta: Delta): Delta {\n\tif (!(node instanceof HTMLElement)) return delta;\n\n\tconst size = parseCssFontSize(node);\n\tconst font = parseCssFontFamily(node);\n\n\tlet result = delta;\n\tif (size !== undefined) {\n\t\tresult = result.compose(new Delta().retain(result.length(), { size }));\n\t}\n\tif (font !== undefined) {\n\t\tresult = result.compose(new Delta().retain(result.length(), { font }));\n\t}\n\treturn result;\n}\n\n/**\n * Parse a size value from Quill into a numeric pixel value.\n * Handles Quill's named sizes (small, large, huge), numeric values, and pixel strings.\n */\nfunction parseSize(size: unknown): number {\n\tif (typeof size === \"number\") return size;\n\tif (size === \"small\" || size === \"large\" || size === \"huge\") {\n\t\treturn sizeMap[size];\n\t}\n\tif (typeof size === \"string\") {\n\t\tconst parsed = Number.parseInt(size, 10);\n\t\tif (!Number.isNaN(parsed)) {\n\t\t\treturn parsed;\n\t\t}\n\t}\n\treturn defaultSize;\n}\n\n/**\n * Convert Quill attributes to a complete CharacterFormat object.\n * Used when inserting new characters - all format properties must have values.\n * Missing attributes default to false/default values.\n */\nfunction quillAttrsToFormat(attrs?: Record<string, unknown>): {\n\tbold: boolean;\n\titalic: boolean;\n\tunderline: boolean;\n\tsize: number;\n\tfont: string;\n} {\n\treturn {\n\t\tbold: attrs?.bold === true,\n\t\titalic: attrs?.italic === true,\n\t\tunderline: attrs?.underline === true,\n\t\tsize: parseSize(attrs?.size),\n\t\tfont: typeof attrs?.font === \"string\" ? attrs.font : defaultFont,\n\t};\n}\n\n/**\n * Convert Quill attributes to a partial CharacterFormat object.\n * Used when applying formatting to existing text via retain operations.\n * Only includes properties that were explicitly set in the Quill attributes,\n * allowing selective format updates without overwriting unrelated properties.\n */\nfunction quillAttrsToPartial(\n\tattrs?: Record<string, unknown>,\n): Partial<FormattedTextAsTree.CharacterFormat> {\n\tif (!attrs) return {};\n\tconst format: Partial<FormattedTextAsTree.CharacterFormat> = {};\n\t// Only include attributes that are explicitly present in the Quill delta\n\tif (\"bold\" in attrs) format.bold = attrs.bold === true;\n\tif (\"italic\" in attrs) format.italic = attrs.italic === true;\n\tif (\"underline\" in attrs) format.underline = attrs.underline === true;\n\tif (\"size\" in attrs) format.size = parseSize(attrs.size);\n\tif (\"font\" in attrs) format.font = typeof attrs.font === \"string\" ? attrs.font : defaultFont;\n\treturn format;\n}\n\n/**\n * Convert a CharacterFormat from the tree to Quill attributes.\n * Used when building Quill deltas from tree content to sync external changes.\n * Only includes non-default values to keep deltas minimal.\n */\nfunction formatToQuillAttrs(\n\tformat: FormattedTextAsTree.CharacterFormat,\n): Record<string, unknown> {\n\tconst attrs: Record<string, unknown> = {};\n\t// Only include non-default formatting to keep Quill deltas minimal\n\tif (format.bold) attrs.bold = true;\n\tif (format.italic) attrs.italic = true;\n\tif (format.underline) attrs.underline = true;\n\tif (format.size !== defaultSize) {\n\t\t// Convert pixel value back to Quill size name if possible\n\t\tattrs.size =\n\t\t\tformat.size in sizeReverse\n\t\t\t\t? sizeReverse[format.size as keyof typeof sizeReverse]\n\t\t\t\t: `${format.size}px`;\n\t}\n\tif (format.font !== defaultFont) attrs.font = format.font;\n\treturn attrs;\n}\n\n/**\n * Build a Quill Delta representing the full tree content.\n * Iterates through formatted characters and groups consecutive characters\n * with identical formatting into single insert operations for efficiency.\n *\n * @remarks\n * This is used to sync Quill's display when the tree changes externally\n * (e.g., from a remote collaborator's edit).\n */\nfunction buildDeltaFromTree(root: FormattedTextAsTree.Tree): QuillDeltaOp[] {\n\tconst ops: QuillDeltaOp[] = [];\n\t// Accumulator for current run of identically-formatted text\n\tlet text = \"\";\n\tlet attrs: Record<string, unknown> = {};\n\t// JSON key for current attributes, used for equality comparison\n\t// TODO:Performance: implement faster equality check.\n\tlet key = \"\";\n\n\t// Helper to push accumulated text as an insert operation\n\tconst pushRun = (): void => {\n\t\tif (!text) return;\n\t\tconst op: QuillDeltaOp = { insert: text };\n\t\tif (Object.keys(attrs).length > 0) op.attributes = attrs;\n\t\tops.push(op);\n\t};\n\n\t// Iterate through each formatted character in the tree\n\t// TODO:Performance: Optimize this loop by adding an API to get runs to FormattedTextAsTree.Tree, and implementing that using cursors.\n\t// Something like `getUniformRun(startIndex, maxLength): number` and `substring(startIndex, length): string`.\n\tfor (const atom of root.charactersWithFormatting()) {\n\t\tconst a = formatToQuillAttrs(atom.format);\n\t\tconst k = JSON.stringify(a);\n\t\tif (k === key) {\n\t\t\t// Same formatting as previous character - extend current run\n\t\t\ttext += atom.content.content;\n\t\t} else {\n\t\t\t// Different formatting - push current run and start new one\n\t\t\tpushRun();\n\t\t\ttext = atom.content.content;\n\t\t\tattrs = a;\n\t\t\tkey = k;\n\t\t}\n\t}\n\t// Push any remaining accumulated text\n\tpushRun();\n\n\t// Quill expects documents to end with a newline\n\t// eslint-disable-next-line unicorn/prefer-at -- .at() not available in target\n\tconst last = ops[ops.length - 1];\n\tif (typeof last?.insert !== \"string\" || !last.insert.endsWith(\"\\n\")) {\n\t\tops.push({ insert: \"\\n\" });\n\t}\n\treturn ops;\n}\n\n/**\n * The formatted text editor view component with Quill integration.\n * Uses FormattedTextAsTree for collaborative rich text storage with formatting.\n *\n * @remarks\n * This component uses event-based synchronization via Tree.on(\"treeChanged\")\n * to efficiently handle external changes without expensive render-time operations.\n * Unlike the plain text version, this component uses Quill's delta operations\n * to make targeted edits (insert at index, delete range, format range) rather\n * than replacing all content on each change.\n */\nconst FormattedTextEditorView = React.forwardRef<\n\tFormattedEditorHandle,\n\t{\n\t\troot: PropTreeNode<FormattedTextAsTree.Tree>;\n\t\tundoRedo?: UndoRedo;\n\t}\n>(({ root: propRoot, undoRedo }, ref) => {\n\t// Unwrap the PropTreeNode to get the actual tree node\n\tconst root = unwrapPropTreeNode(propRoot);\n\t// DOM element where Quill will mount its editor\n\tconst editorRef = React.useRef<HTMLDivElement>(null);\n\t// Quill instance, persisted across renders to avoid re-initialization\n\tconst quillRef = React.useRef<Quill | null>(null);\n\t// Guards against update loops between Quill and the tree\n\tconst isUpdating = React.useRef(false);\n\t// Container element for undo/redo button portal\n\tconst [undoRedoContainer, setUndoRedoContainer] = React.useState<HTMLElement | undefined>(\n\t\tundefined,\n\t);\n\t// Force re-render when undo/redo state changes\n\tconst [, forceUpdate] = React.useReducer((x: number) => x + 1, 0);\n\n\t// Expose undo/redo methods via ref\n\tReact.useImperativeHandle(ref, () => ({\n\t\tundo: () => undoRedo?.undo(),\n\t\tredo: () => undoRedo?.redo(),\n\t}));\n\n\t// Initialize Quill editor with formatting toolbar using Quill provided CSS\n\tReact.useEffect(() => {\n\t\tif (!editorRef.current || quillRef.current) return;\n\t\tconst quill = new Quill(editorRef.current, {\n\t\t\ttheme: \"snow\",\n\t\t\tplaceholder: \"Start typing with formatting...\",\n\t\t\tmodules: {\n\t\t\t\thistory: false, // Disable Quill's built-in undo/redo\n\t\t\t\ttoolbar: [\n\t\t\t\t\t[\"bold\", \"italic\", \"underline\"],\n\t\t\t\t\t[{ size: [\"small\", false, \"large\", \"huge\"] }],\n\t\t\t\t\t[{ font: [] }],\n\t\t\t\t\t[\"clean\"],\n\t\t\t\t],\n\t\t\t\tclipboard: [Node.ELEMENT_NODE, clipboardFormatMatcher],\n\t\t\t},\n\t\t});\n\n\t\t// Set initial content from tree\n\t\tquill.setContents(buildDeltaFromTree(root));\n\n\t\t// Listen to local Quill changes and apply them to the tree.\n\t\t// We process delta operations to make targeted edits, preserving collaboration integrity.\n\t\t// Note: Quill uses UTF-16 code units for positions, but the tree uses Unicode codepoints.\n\t\t// We must convert between them to handle emoji and other non-BMP characters correctly.\n\t\t//\n\t\t// The typing here is very fragile: if no parameter types are given,\n\t\t// the inference for this event is strongly typed, but the types are wrong (The wrong \"Delta\" type is provided).\n\t\t// This is likely related to the node16 module resolution issues with quill-delta.\n\t\t// If we break that inference by adding types, `any` is inferred for all of them, so incorrect types here would still compile.\n\t\tquill.on(\"text-change\", (delta: Delta, _oldDelta: Delta, source: EmitterSource) => {\n\t\t\tif (source !== \"user\" || isUpdating.current) return;\n\t\t\tisUpdating.current = true;\n\n\t\t\t// Wrap all tree mutations in a transaction so they undo/redo as one atomic unit.\n\t\t\t// If the node is not part of a branch (e.g. unhydrated), apply edits directly.\n\t\t\tconst branch = TreeAlpha.branch(root);\n\t\t\tconst applyDelta = (): void => {\n\t\t\t\t// Helper to count Unicode codepoints in a string\n\t\t\t\tconst codepointCount = (s: string): number => [...s].length;\n\n\t\t\t\t// Get current content for UTF-16 to codepoint position mapping\n\t\t\t\t// We update this as we process operations to keep positions accurate\n\t\t\t\tlet content = root.fullString();\n\t\t\t\tlet utf16Pos = 0; // Position in UTF-16 code units (Quill's view)\n\t\t\t\tlet cpPos = 0; // Position in codepoints (tree's view)\n\n\t\t\t\tfor (const op of delta.ops) {\n\t\t\t\t\tif (op.retain !== undefined) {\n\t\t\t\t\t\t// The docs for retain imply this is always a number, but the type definitions allow a record here.\n\t\t\t\t\t\t// It is unknown why the type definitions allow a record as they have no doc comments.\n\t\t\t\t\t\t// For now this assert seems to be passing, so we just assume its always a number.\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\ttypeof op.retain === \"number\",\n\t\t\t\t\t\t\t0xcdf /* Expected retain count to be a number */,\n\t\t\t\t\t\t);\n\t\t\t\t\t\t// Convert UTF-16 retain count to codepoint count\n\t\t\t\t\t\tconst retainedStr = content.slice(utf16Pos, utf16Pos + op.retain);\n\t\t\t\t\t\tconst cpCount = codepointCount(retainedStr);\n\n\t\t\t\t\t\tif (op.attributes) {\n\t\t\t\t\t\t\troot.formatRange(cpPos, cpPos + cpCount, quillAttrsToPartial(op.attributes));\n\t\t\t\t\t\t}\n\t\t\t\t\t\tutf16Pos += op.retain;\n\t\t\t\t\t\tcpPos += cpCount;\n\t\t\t\t\t} else if (op.delete !== undefined) {\n\t\t\t\t\t\t// Convert UTF-16 delete count to codepoint count\n\t\t\t\t\t\tconst deletedStr = content.slice(utf16Pos, utf16Pos + op.delete);\n\t\t\t\t\t\tconst cpCount = codepointCount(deletedStr);\n\n\t\t\t\t\t\troot.removeRange(cpPos, cpPos + cpCount);\n\t\t\t\t\t\t// Update content to reflect deletion for future position calculations\n\t\t\t\t\t\tcontent = content.slice(0, utf16Pos) + content.slice(utf16Pos + op.delete);\n\t\t\t\t\t\t// Don't advance positions - next op starts at same position\n\t\t\t\t\t} else if (typeof op.insert === \"string\") {\n\t\t\t\t\t\t// Insert: add new text with formatting at current position\n\t\t\t\t\t\troot.defaultFormat = new FormattedTextAsTree.CharacterFormat(\n\t\t\t\t\t\t\tquillAttrsToFormat(op.attributes),\n\t\t\t\t\t\t);\n\t\t\t\t\t\troot.insertAt(cpPos, op.insert);\n\t\t\t\t\t\t// Update content to reflect insertion\n\t\t\t\t\t\tcontent = content.slice(0, utf16Pos) + op.insert + content.slice(utf16Pos);\n\t\t\t\t\t\t// Advance by inserted content length\n\t\t\t\t\t\tutf16Pos += op.insert.length;\n\t\t\t\t\t\tcpPos += codepointCount(op.insert);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t};\n\t\t\tif (branch === undefined) {\n\t\t\t\tapplyDelta();\n\t\t\t} else {\n\t\t\t\tbranch.runTransaction(applyDelta);\n\t\t\t}\n\n\t\t\tisUpdating.current = false;\n\t\t});\n\n\t\tquillRef.current = quill;\n\n\t\t// Create container for React-controlled undo/redo buttons and prepend to toolbar\n\t\tconst toolbar = editorRef.current.previousElementSibling as HTMLElement;\n\t\tconst container = document.createElement(\"span\");\n\t\tcontainer.className = \"ql-formats\";\n\t\ttoolbar.prepend(container);\n\t\tsetUndoRedoContainer(container);\n\t\t// In React strict mode, effects run twice. The `!quillRef.current` check above\n\t\t// makes the second call a no-op, preventing double-initialization of Quill.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\t// Sync Quill when tree changes externally (e.g., from remote collaborators).\n\t// Uses event subscription instead of render-time observation for efficiency.\n\tReact.useEffect(() => {\n\t\treturn Tree.on(root, \"treeChanged\", () => {\n\t\t\t// Skip if we caused the tree change ourselves via the text-change handler\n\t\t\tif (!quillRef.current || isUpdating.current) return;\n\n\t\t\t// TODO:Performance: Once SharedTree has better ArrayNode change events,\n\t\t\t// use those events to construct a delta, instead of rebuilding a new delta then diffing every edit.\n\t\t\t// After doing the optimization, keep this diffing logic as a way to test for de-sync between the tree and Quill:\n\t\t\t// Use it in tests and possibly occasionally in debug builds.\n\t\t\tconst treeDelta = buildDeltaFromTree(root);\n\n\t\t\t// eslint doesn't seem to be resolving the types correctly here.\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\tconst quillDelta: Delta = quillRef.current.getContents();\n\n\t\t\t// Compute diff between current Quill state and tree state\n\t\t\tconst diff = new Delta(quillDelta).diff(new Delta(treeDelta));\n\n\t\t\t// Only update if there are actual differences\n\t\t\tif (diff.ops.length > 0) {\n\t\t\t\tisUpdating.current = true;\n\n\t\t\t\t// Apply only the diff for surgical updates (better cursor preservation)\n\t\t\t\tquillRef.current.updateContents(diff.ops);\n\n\t\t\t\tisUpdating.current = false;\n\t\t\t}\n\t\t});\n\t}, [root]);\n\n\t// Subscribe to undo/redo state changes to update button disabled state\n\tReact.useEffect(() => {\n\t\tif (!undoRedo) return;\n\t\treturn undoRedo.onStateChange(() => {\n\t\t\tforceUpdate();\n\t\t});\n\t}, [undoRedo]);\n\n\t// Render undo/redo buttons via portal into Quill toolbar\n\tconst undoRedoButtons = undoRedoContainer\n\t\t? ReactDOM.createPortal(\n\t\t\t\t<>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"ql-undo\"\n\t\t\t\t\t\tdisabled={undoRedo?.canUndo() !== true}\n\t\t\t\t\t\tonClick={() => undoRedo?.undo()}\n\t\t\t\t\t/>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"ql-redo\"\n\t\t\t\t\t\tdisabled={undoRedo?.canRedo() !== true}\n\t\t\t\t\t\tonClick={() => undoRedo?.redo()}\n\t\t\t\t\t/>\n\t\t\t\t</>,\n\t\t\t\tundoRedoContainer,\n\t\t\t)\n\t\t: undefined;\n\n\treturn (\n\t\t<div style={{ height: \"100%\", display: \"flex\", flexDirection: \"column\" }}>\n\t\t\t<style>{`\n\t\t\t\t.ql-container { height: 100%; font-size: 14px; }\n\t\t\t\t.ql-editor { height: 100%; outline: none; }\n\t\t\t\t.ql-editor.ql-blank::before { color: #999; font-style: italic; }\n\t\t\t\t.ql-toolbar { border-radius: 4px 4px 0 0; background: #f8f9fa; }\n\t\t\t\t.ql-container.ql-snow { border-radius: 0 0 4px 4px; }\n\t\t\t\t.ql-undo, .ql-redo { width: 28px !important; }\n\t\t\t\t.ql-undo::after { content: \"↶\"; font-size: 18px; }\n\t\t\t\t.ql-redo::after { content: \"↷\"; font-size: 18px; }\n\t\t\t\t.ql-undo:disabled, .ql-redo:disabled { opacity: 0.3; cursor: not-allowed; }\n\t\t\t`}</style>\n\t\t\t<h2 style={{ margin: \"10px 0\" }}>Collaborative Formatted Text Editor</h2>\n\t\t\t<div\n\t\t\t\tref={editorRef}\n\t\t\t\tstyle={{\n\t\t\t\t\tflex: 1,\n\t\t\t\t\tminHeight: \"300px\",\n\t\t\t\t\tborder: \"1px solid #ccc\",\n\t\t\t\t\tborderRadius: \"4px\",\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t{undoRedoButtons}\n\t\t</div>\n\t);\n});\nFormattedTextEditorView.displayName = \"FormattedTextEditorView\";\n"]}

package/lib/text/index.d.ts

@@ -0,0 +1,7 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+export { FormattedMainView, type FormattedMainViewProps, type FormattedEditorHandle, } from "./formatted/index.js";
+export { PlainTextMainView, QuillMainView as PlainQuillView, type MainViewProps as PlainMainViewProps, } from "./plain/index.js";
+//# sourceMappingURL=index.d.ts.map

package/lib/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/text/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACN,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,GAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACN,iBAAiB,EACjB,aAAa,IAAI,cAAc,EAC/B,KAAK,aAAa,IAAI,kBAAkB,GACxC,MAAM,kBAAkB,CAAC"}

package/lib/text/index.js

@@ -0,0 +1,7 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+export { FormattedMainView, } from "./formatted/index.js";
+export { PlainTextMainView, QuillMainView as PlainQuillView, } from "./plain/index.js";
+//# sourceMappingURL=index.js.map

package/lib/text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/text/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACN,iBAAiB,GAGjB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACN,iBAAiB,EACjB,aAAa,IAAI,cAAc,GAE/B,MAAM,kBAAkB,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nexport {\n\tFormattedMainView,\n\ttype FormattedMainViewProps,\n\ttype FormattedEditorHandle,\n} from \"./formatted/index.js\";\nexport {\n\tPlainTextMainView,\n\tQuillMainView as PlainQuillView,\n\ttype MainViewProps as PlainMainViewProps,\n} from \"./plain/index.js\";\n"]}

package/lib/text/plain/index.d.ts

@@ -0,0 +1,7 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+export { MainView as PlainTextMainView } from "./plainTextView.js";
+export { MainView as QuillMainView, type MainViewProps } from "./quillView.js";
+//# sourceMappingURL=index.d.ts.map

package/lib/text/plain/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/text/plain/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/text/plain/index.js

@@ -0,0 +1,7 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+export { MainView as PlainTextMainView } from "./plainTextView.js";
+export { MainView as QuillMainView } from "./quillView.js";
+//# sourceMappingURL=index.js.map

package/lib/text/plain/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text/plain/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAsB,MAAM,gBAAgB,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nexport { MainView as PlainTextMainView } from \"./plainTextView.js\";\nexport { MainView as QuillMainView, type MainViewProps } from \"./quillView.js\";\n"]}

package/lib/text/plain/plainTextView.d.ts

@@ -0,0 +1,14 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import * as React from "react";
+import type { MainViewProps } from "./quillView.js";
+/**
+ * A React component for plain text editing.
+ * @remarks
+ * Uses {@link @fluidframework/tree#TextAsTree.Tree} for the data-model and an HTML textarea for the UI.
+ * @internal
+ */
+export declare const MainView: React.FC<MainViewProps>;
+//# sourceMappingURL=plainTextView.d.ts.map

package/lib/text/plain/plainTextView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plainTextView.d.ts","sourceRoot":"","sources":["../../../src/text/plain/plainTextView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAE5C,CAAC"}

package/lib/text/plain/plainTextView.js

@@ -0,0 +1,75 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import * as React from "react";
+import { withMemoizedTreeObservations } from "../../useTree.js";
+import { syncTextToTree } from "./plainUtils.js";
+/**
+ * A React component for plain text editing.
+ * @remarks
+ * Uses {@link @fluidframework/tree#TextAsTree.Tree} for the data-model and an HTML textarea for the UI.
+ * @internal
+ */
+export const MainView = ({ root }) => {
+    return React.createElement(PlainTextEditorView, { root: root });
+};
+/**
+ * A plain text editor view component using a native HTML textarea.
+ * Uses TextAsTree for collaborative plain text storage.
+ *
+ * @remarks
+ * This uses withMemoizedTreeObservations to automatically re-render
+ * when the tree changes.
+ */
+const PlainTextEditorView = withMemoizedTreeObservations(({ root }) => {
+    // Reference to the textarea element
+    const textareaRef = React.useRef(null);
+    // Guards against update loops between textarea and the tree
+    const isUpdatingRef = React.useRef(false);
+    // Access tree content during render to establish observation.
+    // The HOC will automatically re-render when this content changes.
+    const currentText = root.fullString();
+    // Handle textarea changes - sync textarea → tree
+    const handleChange = React.useCallback((event) => {
+        if (isUpdatingRef.current) {
+            return;
+        }
+        isUpdatingRef.current = true;
+        const newText = event.target.value;
+        syncTextToTree(root, newText);
+        isUpdatingRef.current = false;
+    }, [root]);
+    // Sync textarea when tree changes externally.
+    // We skip this if isUpdatingRef is true, meaning we caused the tree change ourselves
+    // via the handleChange above - in that case textarea already has the correct content.
+    if (textareaRef.current && !isUpdatingRef.current) {
+        const textareaValue = textareaRef.current.value;
+        // Only update if content actually differs (avoids cursor jump on local edits)
+        if (textareaValue !== currentText) {
+            isUpdatingRef.current = true;
+            // Preserve cursor position
+            const selectionStart = textareaRef.current.selectionStart;
+            const selectionEnd = textareaRef.current.selectionEnd;
+            textareaRef.current.value = currentText;
+            // Restore cursor position, clamped to new text length
+            const newPosition = Math.min(selectionStart, currentText.length);
+            const newEnd = Math.min(selectionEnd, currentText.length);
+            textareaRef.current.setSelectionRange(newPosition, newEnd);
+            isUpdatingRef.current = false;
+        }
+    }
+    return (React.createElement("div", { className: "text-editor-container", style: { height: "100%", display: "flex", flexDirection: "column" } },
+        React.createElement("h2", { style: { margin: "10px 0" } }, "Collaborative Text Editor"),
+        React.createElement("textarea", { ref: textareaRef, defaultValue: currentText, onChange: handleChange, placeholder: "Start typing...", style: {
+                flex: 1,
+                minHeight: "300px",
+                border: "1px solid #ccc",
+                borderRadius: "4px",
+                padding: "8px",
+                fontSize: "14px",
+                fontFamily: "inherit",
+                resize: "vertical",
+            } })));
+});
+//# sourceMappingURL=plainTextView.js.map