@fluidframework/react 2.90.0 → 2.92.0

package/lib/text/formatted/quillFormattedView.js

@@ -1,426 +0,0 @@
-/*!
- * 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

@@ -1 +0,0 @@
-{"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/plain/quillView.d.ts

@@ -1,22 +0,0 @@
-/*!
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,112 +0,0 @@
-/*!
- * 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