@fluidframework/react 2.90.0-378676 → 2.90.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"plainTextView.js","sourceRoot":"","sources":["../../../src/text/plain/plainTextView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,4BAA4B,EAAE,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGjD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7D,OAAO,oBAAC,mBAAmB,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC;AAC5C,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,mBAAmB,GAAG,4BAA4B,CACvD,CAAC,EAAE,IAAI,EAA6B,EAAE,EAAE;IACvC,oCAAoC;IACpC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAsB,IAAI,CAAC,CAAC;IAC5D,4DAA4D;IAC5D,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAU,KAAK,CAAC,CAAC;IAEnD,8DAA8D;IAC9D,kEAAkE;IAClE,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAEtC,iDAAiD;IACjD,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,KAA6C,EAAE,EAAE;QACjD,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YAC3B,OAAO;QACR,CAAC;QAED,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAE7B,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACnC,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAE9B,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;IAC/B,CAAC,EACD,CAAC,IAAI,CAAC,CACN,CAAC;IAEF,8CAA8C;IAC9C,qFAAqF;IACrF,sFAAsF;IACtF,IAAI,WAAW,CAAC,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QACnD,MAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC;QAEhD,8EAA8E;QAC9E,IAAI,aAAa,KAAK,WAAW,EAAE,CAAC;YACnC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;YAE7B,2BAA2B;YAC3B,MAAM,cAAc,GAAG,WAAW,CAAC,OAAO,CAAC,cAAc,CAAC;YAC1D,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC;YAEtD,WAAW,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC;YAExC,sDAAsD;YACtD,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;YACjE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;YAC1D,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;YAE3D,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;QAC/B,CAAC;IACF,CAAC;IAED,OAAO,CACN,6BACC,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE;QAEnE,4BAAI,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,gCAAgC;QAC/D,kCACC,GAAG,EAAE,WAAW,EAChB,YAAY,EAAE,WAAW,EACzB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAC,iBAAiB,EAC7B,KAAK,EAAE;gBACN,IAAI,EAAE,CAAC;gBACP,SAAS,EAAE,OAAO;gBAClB,MAAM,EAAE,gBAAgB;gBACxB,YAAY,EAAE,KAAK;gBACnB,OAAO,EAAE,KAAK;gBACd,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,SAAS;gBACrB,MAAM,EAAE,UAAU;aAClB,GACA,CACG,CACN,CAAC;AACH,CAAC,CACD,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport type { TextAsTree } from \"@fluidframework/tree/internal\";\nimport * as React from \"react\";\n\nimport { withMemoizedTreeObservations } from \"../../useTree.js\";\n\nimport { syncTextToTree } from \"./plainUtils.js\";\nimport type { MainViewProps } from \"./quillView.js\";\n\n/**\n * A React component for plain text editing.\n * @remarks\n * Uses {@link @fluidframework/tree#TextAsTree.Tree} for the data-model and an HTML textarea for the UI.\n * @internal\n */\nexport const MainView: React.FC<MainViewProps> = ({ root }) => {\n\treturn <PlainTextEditorView root={root} />;\n};\n\n/**\n * A plain text editor view component using a native HTML textarea.\n * Uses TextAsTree for collaborative plain text storage.\n *\n * @remarks\n * This uses withMemoizedTreeObservations to automatically re-render\n * when the tree changes.\n */\nconst PlainTextEditorView = withMemoizedTreeObservations(\n\t({ root }: { root: TextAsTree.Tree }) => {\n\t\t// Reference to the textarea element\n\t\tconst textareaRef = React.useRef<HTMLTextAreaElement>(null);\n\t\t// Guards against update loops between textarea and the tree\n\t\tconst isUpdatingRef = React.useRef<boolean>(false);\n\n\t\t// Access tree content during render to establish observation.\n\t\t// The HOC will automatically re-render when this content changes.\n\t\tconst currentText = root.fullString();\n\n\t\t// Handle textarea changes - sync textarea → tree\n\t\tconst handleChange = React.useCallback(\n\t\t\t(event: React.ChangeEvent<HTMLTextAreaElement>) => {\n\t\t\t\tif (isUpdatingRef.current) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisUpdatingRef.current = true;\n\n\t\t\t\tconst newText = event.target.value;\n\t\t\t\tsyncTextToTree(root, newText);\n\n\t\t\t\tisUpdatingRef.current = false;\n\t\t\t},\n\t\t\t[root],\n\t\t);\n\n\t\t// Sync textarea when tree changes externally.\n\t\t// We skip this if isUpdatingRef is true, meaning we caused the tree change ourselves\n\t\t// via the handleChange above - in that case textarea already has the correct content.\n\t\tif (textareaRef.current && !isUpdatingRef.current) {\n\t\t\tconst textareaValue = textareaRef.current.value;\n\n\t\t\t// Only update if content actually differs (avoids cursor jump on local edits)\n\t\t\tif (textareaValue !== currentText) {\n\t\t\t\tisUpdatingRef.current = true;\n\n\t\t\t\t// Preserve cursor position\n\t\t\t\tconst selectionStart = textareaRef.current.selectionStart;\n\t\t\t\tconst selectionEnd = textareaRef.current.selectionEnd;\n\n\t\t\t\ttextareaRef.current.value = currentText;\n\n\t\t\t\t// Restore cursor position, clamped to new text length\n\t\t\t\tconst newPosition = Math.min(selectionStart, currentText.length);\n\t\t\t\tconst newEnd = Math.min(selectionEnd, currentText.length);\n\t\t\t\ttextareaRef.current.setSelectionRange(newPosition, newEnd);\n\n\t\t\t\tisUpdatingRef.current = false;\n\t\t\t}\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName=\"text-editor-container\"\n\t\t\t\tstyle={{ height: \"100%\", display: \"flex\", flexDirection: \"column\" }}\n\t\t\t>\n\t\t\t\t<h2 style={{ margin: \"10px 0\" }}>Collaborative Text Editor</h2>\n\t\t\t\t<textarea\n\t\t\t\t\tref={textareaRef}\n\t\t\t\t\tdefaultValue={currentText}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\tplaceholder=\"Start typing...\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\tminHeight: \"300px\",\n\t\t\t\t\t\tborder: \"1px solid #ccc\",\n\t\t\t\t\t\tborderRadius: \"4px\",\n\t\t\t\t\t\tpadding: \"8px\",\n\t\t\t\t\t\tfontSize: \"14px\",\n\t\t\t\t\t\tfontFamily: \"inherit\",\n\t\t\t\t\t\tresize: \"vertical\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n);\n"]}

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

@@ -0,0 +1,23 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import type { TextAsTree } from "@fluidframework/tree/internal";
+/**
+ * Sync `newText` into the provided `root` tree.
+ */
+export declare function syncTextToTree(root: TextAsTree.Tree, newText: string): void;
+/**
+ * Sync `newText` into the provided `root` tree.
+ */
+export declare function computeSync<T>(existing: readonly T[], final: readonly T[]): {
+    remove?: {
+        start: number;
+        end: number;
+    };
+    insert?: {
+        location: number;
+        slice: T[];
+    };
+};
+//# sourceMappingURL=plainUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"plainUtils.d.ts","sourceRoot":"","sources":["../../../src/text/plain/plainUtils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEhE;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAS3E;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC5B,QAAQ,EAAE,SAAS,CAAC,EAAE,EACtB,KAAK,EAAE,SAAS,CAAC,EAAE,GACjB;IAAE,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,EAAE,CAAA;KAAE,CAAA;CAAE,CAwCxF"}

package/lib/text/plain/plainUtils.js

@@ -0,0 +1,51 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+/**
+ * Sync `newText` into the provided `root` tree.
+ */
+export function syncTextToTree(root, newText) {
+    const sync = computeSync(root.charactersCopy(), [...newText]);
+    if (sync.remove) {
+        root.removeRange(sync.remove.start, sync.remove.end);
+    }
+    if (sync.insert) {
+        root.insertAt(sync.insert.location, sync.insert.slice.join(""));
+    }
+}
+/**
+ * Sync `newText` into the provided `root` tree.
+ */
+export function computeSync(existing, final) {
+    // Find common prefix and suffix to minimize changes
+    let prefixLength = 0;
+    while (prefixLength < existing.length &&
+        prefixLength < final.length &&
+        existing[prefixLength] === final[prefixLength]) {
+        prefixLength++;
+    }
+    let suffixLength = 0;
+    while (suffixLength + prefixLength < existing.length &&
+        suffixLength + prefixLength < final.length &&
+        existing[existing.length - 1 - suffixLength] === final[final.length - 1 - suffixLength]) {
+        suffixLength++;
+    }
+    // Locate middle replaced range in existing and final
+    const existingMiddleStart = prefixLength;
+    const existingMiddleEnd = existing.length - suffixLength;
+    const newMiddleStart = prefixLength;
+    const newMiddleEnd = final.length - suffixLength;
+    return {
+        remove: existingMiddleStart < existingMiddleEnd
+            ? { start: existingMiddleStart, end: existingMiddleEnd }
+            : undefined,
+        insert: newMiddleStart < newMiddleEnd
+            ? {
+                location: existingMiddleStart,
+                slice: final.slice(newMiddleStart, newMiddleEnd),
+            }
+            : undefined,
+    };
+}
+//# sourceMappingURL=plainUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"plainUtils.js","sourceRoot":"","sources":["../../../src/text/plain/plainUtils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,IAAqB,EAAE,OAAe;IACpE,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IAE9D,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;QACjB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACtD,CAAC;IACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IACjE,CAAC;AACF,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW,CAC1B,QAAsB,EACtB,KAAmB;IAEnB,oDAAoD;IAEpD,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,OACC,YAAY,GAAG,QAAQ,CAAC,MAAM;QAC9B,YAAY,GAAG,KAAK,CAAC,MAAM;QAC3B,QAAQ,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC,EAC7C,CAAC;QACF,YAAY,EAAE,CAAC;IAChB,CAAC;IAED,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,OACC,YAAY,GAAG,YAAY,GAAG,QAAQ,CAAC,MAAM;QAC7C,YAAY,GAAG,YAAY,GAAG,KAAK,CAAC,MAAM;QAC1C,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,CAAC,EACtF,CAAC;QACF,YAAY,EAAE,CAAC;IAChB,CAAC;IAED,qDAAqD;IACrD,MAAM,mBAAmB,GAAG,YAAY,CAAC;IACzC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,GAAG,YAAY,CAAC;IACzD,MAAM,cAAc,GAAG,YAAY,CAAC;IACpC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC;IAEjD,OAAO;QACN,MAAM,EACL,mBAAmB,GAAG,iBAAiB;YACtC,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,iBAAiB,EAAE;YACxD,CAAC,CAAC,SAAS;QACb,MAAM,EACL,cAAc,GAAG,YAAY;YAC5B,CAAC,CAAC;gBACA,QAAQ,EAAE,mBAAmB;gBAC7B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,cAAc,EAAE,YAAY,CAAC;aAChD;YACF,CAAC,CAAC,SAAS;KACb,CAAC;AACH,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport type { TextAsTree } from \"@fluidframework/tree/internal\";\n\n/**\n * Sync `newText` into the provided `root` tree.\n */\nexport function syncTextToTree(root: TextAsTree.Tree, newText: string): void {\n\tconst sync = computeSync(root.charactersCopy(), [...newText]);\n\n\tif (sync.remove) {\n\t\troot.removeRange(sync.remove.start, sync.remove.end);\n\t}\n\tif (sync.insert) {\n\t\troot.insertAt(sync.insert.location, sync.insert.slice.join(\"\"));\n\t}\n}\n\n/**\n * Sync `newText` into the provided `root` tree.\n */\nexport function computeSync<T>(\n\texisting: readonly T[],\n\tfinal: readonly T[],\n): { remove?: { start: number; end: number }; insert?: { location: number; slice: T[] } } {\n\t// Find common prefix and suffix to minimize changes\n\n\tlet prefixLength = 0;\n\twhile (\n\t\tprefixLength < existing.length &&\n\t\tprefixLength < final.length &&\n\t\texisting[prefixLength] === final[prefixLength]\n\t) {\n\t\tprefixLength++;\n\t}\n\n\tlet suffixLength = 0;\n\twhile (\n\t\tsuffixLength + prefixLength < existing.length &&\n\t\tsuffixLength + prefixLength < final.length &&\n\t\texisting[existing.length - 1 - suffixLength] === final[final.length - 1 - suffixLength]\n\t) {\n\t\tsuffixLength++;\n\t}\n\n\t// Locate middle replaced range in existing and final\n\tconst existingMiddleStart = prefixLength;\n\tconst existingMiddleEnd = existing.length - suffixLength;\n\tconst newMiddleStart = prefixLength;\n\tconst newMiddleEnd = final.length - suffixLength;\n\n\treturn {\n\t\tremove:\n\t\t\texistingMiddleStart < existingMiddleEnd\n\t\t\t\t? { start: existingMiddleStart, end: existingMiddleEnd }\n\t\t\t\t: undefined,\n\t\tinsert:\n\t\t\tnewMiddleStart < newMiddleEnd\n\t\t\t\t? {\n\t\t\t\t\t\tlocation: existingMiddleStart,\n\t\t\t\t\t\tslice: final.slice(newMiddleStart, newMiddleEnd),\n\t\t\t\t\t}\n\t\t\t\t: undefined,\n\t};\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"quillView.d.ts","sourceRoot":"","sources":["../../../src/text/plain/quillView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEhE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;CACpC;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAE5C,CAAC"}

package/lib/text/plain/quillView.js

@@ -0,0 +1,112 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import Quill from "quill";
+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 Quill for the UI.
+ * @internal
+ */
+export const MainView = ({ root }) => {
+    return React.createElement(TextEditorView, { root: root });
+};
+/**
+ * The text editor view component with Quill integration.
+ * Uses TextAsTree for collaborative plain text storage.
+ *
+ * @remarks
+ * This uses withMemoizedTreeObservations to automatically re-render
+ * when the tree changes.
+ */
+const TextEditorView = withMemoizedTreeObservations(({ root }) => {
+    // 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 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();
+    // Initialize Quill editor
+    React.useEffect(() => {
+        if (editorRef.current && !quillRef.current) {
+            const quill = new Quill(editorRef.current, {
+                placeholder: "Start typing...",
+            });
+            // Set initial content from tree (add trailing newline to match Quill's convention)
+            const initialText = root.fullString();
+            if (initialText.length > 0) {
+                const textWithNewline = initialText.endsWith("\n") ? initialText : `${initialText}\n`;
+                quill.setText(textWithNewline);
+            }
+            // Listen to local Quill changes
+            quill.on("text-change", (_delta, _oldDelta, source) => {
+                if (source === "user" && !isUpdatingRef.current) {
+                    isUpdatingRef.current = true;
+                    // Get plain text from Quill and preserve trailing newline
+                    const newText = quill.getText();
+                    // TODO: Consider using delta from Quill to compute a more minimal update,
+                    // and maybe add a debugAssert that the delta actually gets the strings synchronized.
+                    syncTextToTree(root, newText);
+                    isUpdatingRef.current = false;
+                }
+            });
+            quillRef.current = quill;
+        }
+        // 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.
+    // We skip this if isUpdatingRef is true, meaning we caused the tree change ourselves
+    // via the text-change handler above - in that case Quill already has the correct content.
+    // No update is lost because isUpdatingRef is only true synchronously during our own
+    // handler execution, so Quill already reflects the change.
+    if (quillRef.current && !isUpdatingRef.current) {
+        const quillText = quillRef.current.getText();
+        // Normalize tree text to match Quill's trailing newline convention
+        const treeTextWithNewline = currentText.endsWith("\n") ? currentText : `${currentText}\n`;
+        // Only update if content actually differs (avoids cursor jump on local edits)
+        if (quillText !== treeTextWithNewline) {
+            isUpdatingRef.current = true;
+            const selection = quillRef.current.getSelection();
+            quillRef.current.setText(treeTextWithNewline);
+            if (selection) {
+                const length = quillRef.current.getLength();
+                const newPosition = Math.min(selection.index, length - 1);
+                quillRef.current.setSelection(newPosition, 0);
+            }
+            isUpdatingRef.current = false;
+        }
+    }
+    return (React.createElement("div", { className: "text-editor-container", 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;
+					}
+				`),
+        React.createElement("h2", { style: { margin: "10px 0" } }, "Collaborative Text Editor"),
+        React.createElement("div", { ref: editorRef, style: {
+                flex: 1,
+                minHeight: "300px",
+                border: "1px solid #ccc",
+                borderRadius: "4px",
+                padding: "8px",
+            } })));
+});
+//# sourceMappingURL=quillView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quillView.js","sourceRoot":"","sources":["../../../src/text/plain/quillView.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 type { TextAsTree } from \"@fluidframework/tree/internal\";\nimport Quill from \"quill\";\nimport * as React from \"react\";\n\nimport type { PropTreeNode } from \"../../propNode.js\";\nimport { withMemoizedTreeObservations } from \"../../useTree.js\";\n\nimport { syncTextToTree } from \"./plainUtils.js\";\n\n/**\n * Props for the MainView component.\n * @input @internal\n */\nexport interface MainViewProps {\n\troot: PropTreeNode<TextAsTree.Tree>;\n}\n\n/**\n * A React component for plain text editing.\n * @remarks\n * Uses {@link @fluidframework/tree#TextAsTree.Tree} for the data-model and Quill for the UI.\n * @internal\n */\nexport const MainView: React.FC<MainViewProps> = ({ root }) => {\n\treturn <TextEditorView root={root} />;\n};\n\n/**\n * The text editor view component with Quill integration.\n * Uses TextAsTree for collaborative plain text storage.\n *\n * @remarks\n * This uses withMemoizedTreeObservations to automatically re-render\n * when the tree changes.\n */\nconst TextEditorView = withMemoizedTreeObservations(({ root }: { root: TextAsTree.Tree }) => {\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 isUpdatingRef = React.useRef<boolean>(false);\n\n\t// Access tree content during render to establish observation.\n\t// The HOC will automatically re-render when this content changes.\n\tconst currentText = root.fullString();\n\n\t// Initialize Quill editor\n\tReact.useEffect(() => {\n\t\tif (editorRef.current && !quillRef.current) {\n\t\t\tconst quill = new Quill(editorRef.current, {\n\t\t\t\tplaceholder: \"Start typing...\",\n\t\t\t});\n\n\t\t\t// Set initial content from tree (add trailing newline to match Quill's convention)\n\t\t\tconst initialText = root.fullString();\n\t\t\tif (initialText.length > 0) {\n\t\t\t\tconst textWithNewline = initialText.endsWith(\"\\n\") ? initialText : `${initialText}\\n`;\n\t\t\t\tquill.setText(textWithNewline);\n\t\t\t}\n\n\t\t\t// Listen to local Quill changes\n\t\t\tquill.on(\"text-change\", (_delta, _oldDelta, source) => {\n\t\t\t\tif (source === \"user\" && !isUpdatingRef.current) {\n\t\t\t\t\tisUpdatingRef.current = true;\n\n\t\t\t\t\t// Get plain text from Quill and preserve trailing newline\n\t\t\t\t\tconst newText = quill.getText();\n\t\t\t\t\t// TODO: Consider using delta from Quill to compute a more minimal update,\n\t\t\t\t\t// and maybe add a debugAssert that the delta actually gets the strings synchronized.\n\t\t\t\t\tsyncTextToTree(root, newText);\n\n\t\t\t\t\tisUpdatingRef.current = false;\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tquillRef.current = quill;\n\t\t}\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.\n\t// We skip this if isUpdatingRef is true, meaning we caused the tree change ourselves\n\t// via the text-change handler above - in that case Quill already has the correct content.\n\t// No update is lost because isUpdatingRef is only true synchronously during our own\n\t// handler execution, so Quill already reflects the change.\n\tif (quillRef.current && !isUpdatingRef.current) {\n\t\tconst quillText = quillRef.current.getText();\n\t\t// Normalize tree text to match Quill's trailing newline convention\n\t\tconst treeTextWithNewline = currentText.endsWith(\"\\n\") ? currentText : `${currentText}\\n`;\n\n\t\t// Only update if content actually differs (avoids cursor jump on local edits)\n\t\tif (quillText !== treeTextWithNewline) {\n\t\t\tisUpdatingRef.current = true;\n\n\t\t\tconst selection = quillRef.current.getSelection();\n\t\t\tquillRef.current.setText(treeTextWithNewline);\n\t\t\tif (selection) {\n\t\t\t\tconst length = quillRef.current.getLength();\n\t\t\t\tconst newPosition = Math.min(selection.index, length - 1);\n\t\t\t\tquillRef.current.setSelection(newPosition, 0);\n\t\t\t}\n\n\t\t\tisUpdatingRef.current = false;\n\t\t}\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"text-editor-container\"\n\t\t\tstyle={{ height: \"100%\", display: \"flex\", flexDirection: \"column\" }}\n\t\t>\n\t\t\t<style>\n\t\t\t\t{`\n\t\t\t\t\t.ql-container {\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t}\n\t\t\t\t\t.ql-editor {\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\toutline: none;\n\t\t\t\t\t}\n\t\t\t\t\t.ql-editor.ql-blank::before {\n\t\t\t\t\t\tcolor: #999;\n\t\t\t\t\t\tfont-style: italic;\n\t\t\t\t\t}\n\t\t\t\t`}\n\t\t\t</style>\n\t\t\t<h2 style={{ margin: \"10px 0\" }}>Collaborative 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\tpadding: \"8px\",\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t);\n});\n"]}

package/lib/undoRedo.d.ts

@@ -0,0 +1,51 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import type { Listenable } from "@fluidframework/core-interfaces";
+import { type TreeViewEvents } from "@fluidframework/tree";
+/**
+ * Interface for undo/redo stack operations.
+ * @internal
+ */
+export interface UndoRedo {
+    /**
+     * Reverts the most recent change. Only valid to call when {@link UndoRedo.canUndo} returns true.
+     * @throws Error if there is nothing to undo.
+     */
+    undo(): void;
+    /**
+     * Reapplies the most recently undone change. Only valid to call when {@link UndoRedo.canRedo} returns true.
+     * @throws Error if there is nothing to redo.
+     */
+    redo(): void;
+    dispose(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    /**
+     * Subscribe to state changes (when canUndo/canRedo may have changed).
+     * @param callback - Called when the undo/redo stack state changes
+     * @returns Unsubscribe function
+     */
+    onStateChange(callback: () => void): () => void;
+}
+/**
+ * Manages undo and redo stacks for a TreeView.
+ * Listens to commitApplied events and manages Revertible objects.
+ * @sealed @internal
+ */
+export declare class UndoRedoStacks implements UndoRedo {
+    private readonly undoStack;
+    private readonly redoStack;
+    private readonly listeners;
+    private readonly unsubscribe;
+    constructor(events: Listenable<TreeViewEvents>);
+    undo(): void;
+    redo(): void;
+    dispose(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    onStateChange(callback: () => void): () => void;
+    private notifyListeners;
+}
+//# sourceMappingURL=undoRedo.d.ts.map

package/lib/undoRedo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"undoRedo.d.ts","sourceRoot":"","sources":["../src/undoRedo.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAKN,KAAK,cAAc,EACnB,MAAM,sBAAsB,CAAC;AAE9B;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACxB;;;OAGG;IACH,IAAI,IAAI,IAAI,CAAC;IACb;;;OAGG;IACH,IAAI,IAAI,IAAI,CAAC;IACb,OAAO,IAAI,IAAI,CAAC;IAChB,OAAO,IAAI,OAAO,CAAC;IACnB,OAAO,IAAI,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CAChD;AAED;;;;GAIG;AACH,qBAAa,cAAe,YAAW,QAAQ;IAC9C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAC9C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAC9C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAa;gBAEtB,MAAM,EAAE,UAAU,CAAC,cAAc,CAAC;IAoB9C,IAAI,IAAI,IAAI;IASZ,IAAI,IAAI,IAAI;IASZ,OAAO,IAAI,IAAI;IASf,OAAO,IAAI,OAAO;IAIlB,OAAO,IAAI,OAAO;IAIlB,aAAa,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI;IAKtD,OAAO,CAAC,eAAe;CAKvB"}

package/lib/undoRedo.js

@@ -0,0 +1,76 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import { CommitKind, } from "@fluidframework/tree";
+/**
+ * Manages undo and redo stacks for a TreeView.
+ * Listens to commitApplied events and manages Revertible objects.
+ * @sealed @internal
+ */
+export class UndoRedoStacks {
+    constructor(events) {
+        this.undoStack = [];
+        this.redoStack = [];
+        this.listeners = new Set();
+        this.unsubscribe = events.on("commitApplied", (commit, getRevertible) => {
+            if (getRevertible === undefined)
+                return;
+            const revertible = getRevertible();
+            if (commit.kind === CommitKind.Undo) {
+                this.redoStack.push(revertible);
+            }
+            else {
+                if (commit.kind === CommitKind.Default) {
+                    for (const r of this.redoStack)
+                        r.dispose();
+                    this.redoStack.length = 0;
+                }
+                this.undoStack.push(revertible);
+            }
+            this.notifyListeners();
+        });
+    }
+    undo() {
+        const revertible = this.undoStack.pop();
+        if (revertible === undefined) {
+            throw new Error("Cannot undo: undo stack is empty.");
+        }
+        revertible.revert();
+        this.notifyListeners();
+    }
+    redo() {
+        const revertible = this.redoStack.pop();
+        if (revertible === undefined) {
+            throw new Error("Cannot redo: redo stack is empty.");
+        }
+        revertible.revert();
+        this.notifyListeners();
+    }
+    dispose() {
+        this.unsubscribe();
+        this.listeners.clear();
+        for (const r of this.undoStack)
+            r.dispose();
+        for (const r of this.redoStack)
+            r.dispose();
+        this.undoStack.length = 0;
+        this.redoStack.length = 0;
+    }
+    canUndo() {
+        return this.undoStack.length > 0;
+    }
+    canRedo() {
+        return this.redoStack.length > 0;
+    }
+    onStateChange(callback) {
+        this.listeners.add(callback);
+        return () => this.listeners.delete(callback);
+    }
+    notifyListeners() {
+        for (const listener of this.listeners) {
+            listener();
+        }
+    }
+}
+//# sourceMappingURL=undoRedo.js.map

package/lib/undoRedo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"undoRedo.js","sourceRoot":"","sources":["../src/undoRedo.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EACN,UAAU,GAKV,MAAM,sBAAsB,CAAC;AA4B9B;;;;GAIG;AACH,MAAM,OAAO,cAAc;IAM1B,YAAmB,MAAkC;QALpC,cAAS,GAAiB,EAAE,CAAC;QAC7B,cAAS,GAAiB,EAAE,CAAC;QAC7B,cAAS,GAAG,IAAI,GAAG,EAAc,CAAC;QAIlD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,EAAE,CAC3B,eAAe,EACf,CAAC,MAAsB,EAAE,aAAiC,EAAE,EAAE;YAC7D,IAAI,aAAa,KAAK,SAAS;gBAAE,OAAO;YACxC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;YACnC,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,EAAE,CAAC;gBACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACP,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,CAAC,OAAO,EAAE,CAAC;oBACxC,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS;wBAAE,CAAC,CAAC,OAAO,EAAE,CAAC;oBAC5C,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC3B,CAAC;gBACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACjC,CAAC;YACD,IAAI,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC,CACD,CAAC;IACH,CAAC;IAEM,IAAI;QACV,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;QACxC,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YAC9B,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;QACtD,CAAC;QACD,UAAU,CAAC,MAAM,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAEM,IAAI;QACV,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;QACxC,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YAC9B,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;QACtD,CAAC;QACD,UAAU,CAAC,MAAM,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAEM,OAAO;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;QACvB,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS;YAAE,CAAC,CAAC,OAAO,EAAE,CAAC;QAC5C,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS;YAAE,CAAC,CAAC,OAAO,EAAE,CAAC;QAC5C,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3B,CAAC;IAEM,OAAO;QACb,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,CAAC;IAEM,OAAO;QACb,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,CAAC;IAEM,aAAa,CAAC,QAAoB;QACxC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC7B,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC9C,CAAC;IAEO,eAAe;QACtB,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACvC,QAAQ,EAAE,CAAC;QACZ,CAAC;IACF,CAAC;CACD","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport type { Listenable } from \"@fluidframework/core-interfaces\";\nimport {\n\tCommitKind,\n\ttype CommitMetadata,\n\ttype Revertible,\n\ttype RevertibleFactory,\n\ttype TreeViewEvents,\n} from \"@fluidframework/tree\";\n\n/**\n * Interface for undo/redo stack operations.\n * @internal\n */\nexport interface UndoRedo {\n\t/**\n\t * Reverts the most recent change. Only valid to call when {@link UndoRedo.canUndo} returns true.\n\t * @throws Error if there is nothing to undo.\n\t */\n\tundo(): void;\n\t/**\n\t * Reapplies the most recently undone change. Only valid to call when {@link UndoRedo.canRedo} returns true.\n\t * @throws Error if there is nothing to redo.\n\t */\n\tredo(): void;\n\tdispose(): void;\n\tcanUndo(): boolean;\n\tcanRedo(): boolean;\n\t/**\n\t * Subscribe to state changes (when canUndo/canRedo may have changed).\n\t * @param callback - Called when the undo/redo stack state changes\n\t * @returns Unsubscribe function\n\t */\n\tonStateChange(callback: () => void): () => void;\n}\n\n/**\n * Manages undo and redo stacks for a TreeView.\n * Listens to commitApplied events and manages Revertible objects.\n * @sealed @internal\n */\nexport class UndoRedoStacks implements UndoRedo {\n\tprivate readonly undoStack: Revertible[] = [];\n\tprivate readonly redoStack: Revertible[] = [];\n\tprivate readonly listeners = new Set<() => void>();\n\tprivate readonly unsubscribe: () => void;\n\n\tpublic constructor(events: Listenable<TreeViewEvents>) {\n\t\tthis.unsubscribe = events.on(\n\t\t\t\"commitApplied\",\n\t\t\t(commit: CommitMetadata, getRevertible?: RevertibleFactory) => {\n\t\t\t\tif (getRevertible === undefined) return;\n\t\t\t\tconst revertible = getRevertible();\n\t\t\t\tif (commit.kind === CommitKind.Undo) {\n\t\t\t\t\tthis.redoStack.push(revertible);\n\t\t\t\t} else {\n\t\t\t\t\tif (commit.kind === CommitKind.Default) {\n\t\t\t\t\t\tfor (const r of this.redoStack) r.dispose();\n\t\t\t\t\t\tthis.redoStack.length = 0;\n\t\t\t\t\t}\n\t\t\t\t\tthis.undoStack.push(revertible);\n\t\t\t\t}\n\t\t\t\tthis.notifyListeners();\n\t\t\t},\n\t\t);\n\t}\n\n\tpublic undo(): void {\n\t\tconst revertible = this.undoStack.pop();\n\t\tif (revertible === undefined) {\n\t\t\tthrow new Error(\"Cannot undo: undo stack is empty.\");\n\t\t}\n\t\trevertible.revert();\n\t\tthis.notifyListeners();\n\t}\n\n\tpublic redo(): void {\n\t\tconst revertible = this.redoStack.pop();\n\t\tif (revertible === undefined) {\n\t\t\tthrow new Error(\"Cannot redo: redo stack is empty.\");\n\t\t}\n\t\trevertible.revert();\n\t\tthis.notifyListeners();\n\t}\n\n\tpublic dispose(): void {\n\t\tthis.unsubscribe();\n\t\tthis.listeners.clear();\n\t\tfor (const r of this.undoStack) r.dispose();\n\t\tfor (const r of this.redoStack) r.dispose();\n\t\tthis.undoStack.length = 0;\n\t\tthis.redoStack.length = 0;\n\t}\n\n\tpublic canUndo(): boolean {\n\t\treturn this.undoStack.length > 0;\n\t}\n\n\tpublic canRedo(): boolean {\n\t\treturn this.redoStack.length > 0;\n\t}\n\n\tpublic onStateChange(callback: () => void): () => void {\n\t\tthis.listeners.add(callback);\n\t\treturn () => this.listeners.delete(callback);\n\t}\n\n\tprivate notifyListeners(): void {\n\t\tfor (const listener of this.listeners) {\n\t\t\tlistener();\n\t\t}\n\t}\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluidframework/react",
-  "version": "2.90.0-378676",
+  "version": "2.90.0",
   "description": "Utilities for integrating content powered by the Fluid Framework into React applications",
   "homepage": "https://fluidframework.com",
   "repository": {
@@ -17,45 +17,29 @@
       "import": {
         "types": "./lib/public.d.ts",
         "default": "./lib/index.js"
-      },
-      "require": {
-        "types": "./dist/public.d.ts",
-        "default": "./dist/index.js"
       }
     },
     "./alpha": {
       "import": {
         "types": "./lib/alpha.d.ts",
         "default": "./lib/index.js"
-      },
-      "require": {
-        "types": "./dist/alpha.d.ts",
-        "default": "./dist/index.js"
       }
     },
     "./beta": {
       "import": {
         "types": "./lib/beta.d.ts",
         "default": "./lib/index.js"
-      },
-      "require": {
-        "types": "./dist/beta.d.ts",
-        "default": "./dist/index.js"
       }
     },
     "./internal": {
       "import": {
         "types": "./lib/index.d.ts",
         "default": "./lib/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
       }
     }
   },
-  "main": "dist/index.js",
-  "types": "./dist/public.d.ts",
+  "main": "lib/index.js",
+  "types": "./lib/public.d.ts",
   "c8": {
     "all": true,
     "cache-dir": "nyc/.cache",
@@ -79,29 +63,34 @@
     "temp-directory": "nyc/.nyc_output"
   },
   "dependencies": {
-    "@fluidframework/aqueduct": "2.90.0-378676",
-    "@fluidframework/core-interfaces": "2.90.0-378676",
-    "@fluidframework/datastore-definitions": "2.90.0-378676",
-    "@fluidframework/fluid-static": "2.90.0-378676",
-    "@fluidframework/runtime-definitions": "2.90.0-378676",
-    "@fluidframework/shared-object-base": "2.90.0-378676",
-    "@fluidframework/tree": "2.90.0-378676",
-    "react": "^18.3.1"
+    "@fluidframework/aqueduct": "~2.90.0",
+    "@fluidframework/core-interfaces": "~2.90.0",
+    "@fluidframework/core-utils": "~2.90.0",
+    "@fluidframework/datastore-definitions": "~2.90.0",
+    "@fluidframework/fluid-static": "~2.90.0",
+    "@fluidframework/runtime-definitions": "~2.90.0",
+    "@fluidframework/shared-object-base": "~2.90.0",
+    "@fluidframework/tree": "~2.90.0",
+    "quill": "^2.0.3",
+    "quill-delta": "^5.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
     "@biomejs/biome": "~1.9.3",
-    "@fluid-internal/mocha-test-setup": "2.90.0-378676",
+    "@fluid-internal/mocha-test-setup": "~2.90.0",
     "@fluid-tools/build-cli": "^0.63.0",
     "@fluidframework/build-common": "^2.0.3",
     "@fluidframework/build-tools": "^0.63.0",
-    "@fluidframework/eslint-config-fluid": "2.90.0-378676",
-    "@fluidframework/tinylicious-client": "2.90.0-378676",
+    "@fluidframework/eslint-config-fluid": "~2.90.0",
+    "@fluidframework/tinylicious-client": "~2.90.0",
     "@microsoft/api-extractor": "7.52.11",
     "@testing-library/react": "^16.3.0",
     "@types/mocha": "^10.0.10",
     "@types/node": "~20.19.30",
     "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "c8": "^10.1.3",
     "concurrently": "^9.2.1",
     "copyfiles": "^2.4.1",
@@ -110,9 +99,9 @@
     "eslint-config-prettier": "~10.1.8",
     "global-jsdom": "^26.0.0",
     "jiti": "^2.6.1",
-    "mocha": "^10.8.2",
+    "mocha": "^11.7.5",
     "mocha-multi-reporters": "^1.5.1",
-    "rimraf": "^6.1.2",
+    "rimraf": "^6.1.3",
     "typescript": "~5.4.5"
   },
   "typeValidation": {
@@ -120,23 +109,17 @@
   },
   "scripts": {
     "api": "fluid-build . --task api",
-    "api-extractor:commonjs": "flub generate entrypoints --outDir ./dist",
     "api-extractor:esnext": "flub generate entrypoints --outDir ./lib",
     "build": "fluid-build . --task build",
-    "build:commonjs": "fluid-build . --task commonjs",
     "build:compile": "fluid-build . --task compile",
     "build:docs": "api-extractor run --local",
     "build:esnext": "tsc --project ./tsconfig.json && copyfiles -f ../../../common/build/build-common/src/esm/package.json ./lib",
-    "build:test": "npm run build:test:esm && npm run build:test:cjs",
-    "build:test:cjs": "fluid-tsc commonjs --project ./src/test/tsconfig.cjs.json",
+    "build:test": "npm run build:test:esm",
     "build:test:esm": "tsc --project ./src/test/tsconfig.json",
-    "check:are-the-types-wrong": "attw --pack . --entrypoints .",
+    "check:are-the-types-wrong": "attw --pack . --entrypoints . --profile esm-only",
     "check:biome": "biome check .",
     "check:exports": "concurrently \"npm:check:exports:*\"",
     "check:exports:bundle-release-tags": "api-extractor run --config api-extractor/api-extractor-lint-bundle.json",
-    "check:exports:cjs:alpha": "api-extractor run --config api-extractor/api-extractor-lint-alpha.cjs.json",
-    "check:exports:cjs:beta": "api-extractor run --config api-extractor/api-extractor-lint-beta.cjs.json",
-    "check:exports:cjs:public": "api-extractor run --config api-extractor/api-extractor-lint-public.cjs.json",
     "check:exports:esm:alpha": "api-extractor run --config api-extractor/api-extractor-lint-alpha.esm.json",
     "check:exports:esm:beta": "api-extractor run --config api-extractor/api-extractor-lint-beta.esm.json",
     "check:exports:esm:public": "api-extractor run --config api-extractor/api-extractor-lint-public.esm.json",
@@ -149,13 +132,11 @@
     "format:biome": "biome check . --write",
     "lint": "fluid-build . --task lint",
     "lint:fix": "fluid-build . --task eslint:fix --task format",
-    "pack:tests": "tar -cf ./react.test-files.tar ./src/test ./dist/test ./lib/test",
+    "pack:tests": "tar -cf ./react.test-files.tar ./src/test ./lib/test",
     "test": "npm run test:mocha",
     "test:coverage": "c8 npm test",
-    "test:mocha": "npm run test:mocha:esm && echo skipping cjs to avoid overhead - npm run test:mocha:cjs",
-    "test:mocha:cjs": "cross-env FLUID_TEST_MODULE_SYSTEM=CJS mocha",
+    "test:mocha": "npm run test:mocha:esm",
     "test:mocha:esm": "mocha",
-    "test:mocha:verbose": "cross-env FLUID_TEST_VERBOSE=1 npm run test:mocha",
-    "tsc": "fluid-tsc commonjs --project ./tsconfig.cjs.json && copyfiles -f ../../../common/build/build-common/src/cjs/package.json ./dist"
+    "test:mocha:verbose": "cross-env FLUID_TEST_VERBOSE=1 npm run test:mocha"
   }
 }

package/src/index.ts

@@ -45,3 +45,13 @@ export {
 	withMemoizedTreeObservations,
 } from "./useTree.js";
 export { objectIdNumber } from "./simpleIdentifier.js";
+
+export {
+	FormattedMainView,
+	PlainTextMainView,
+	PlainQuillView,
+	type FormattedMainViewProps,
+	type PlainMainViewProps,
+	type FormattedEditorHandle,
+} from "./text/index.js";
+export { UndoRedoStacks, type UndoRedo } from "./undoRedo.js";

package/src/propNode.ts

@@ -16,7 +16,7 @@ import type { TreeNode, TreeLeafValue } from "@fluidframework/tree";
  * To convert a TreeNode to this type use {@link toPropTreeNode} or {@link toPropTreeRecord}.
  * @alpha
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-empty-object-type
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface PropTreeNode<T extends TreeNode> extends ErasedType<[T, "PropTreeNode"]> {}
 
 /**

package/src/text/formatted/index.ts

@@ -0,0 +1,11 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+export {
+	FormattedTextAsTree,
+	FormattedMainView,
+	type FormattedMainViewProps,
+	type FormattedEditorHandle,
+} from "./quillFormattedView.js";