@fluidframework/react 2.91.0 → 2.92.0

package/lib/text/formatted/quillFormattedView.d.ts

@@ -1,66 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
- * Licensed under the MIT License.
- */
-import { FormattedTextAsTree } from "@fluidframework/tree/internal";
-export { FormattedTextAsTree } from "@fluidframework/tree/internal";
-import DeltaPackage from "quill-delta";
-import { type PropTreeNode } from "../../propNode.js";
-import type { UndoRedo } from "../../undoRedo.js";
-type Delta = DeltaPackage.default;
-type QuillDeltaOp = DeltaPackage.Op;
-declare const Delta: typeof DeltaPackage.default;
-/**
- * Props for the FormattedMainView component.
- * @input @internal
- */
-export interface FormattedMainViewProps {
-    readonly root: PropTreeNode<FormattedTextAsTree.Tree>;
-    /** Optional undo/redo stack for the editor. */
-    readonly undoRedo?: UndoRedo;
-}
-/**
- * Ref handle exposing undo/redo methods for the formatted editor.
- * @input @internal
- */
-export type FormattedEditorHandle = Pick<UndoRedo, "undo" | "redo">;
-/**
- * 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 declare const FormattedMainView: import("react").ForwardRefExoticComponent<FormattedMainViewProps & import("react").RefAttributes<FormattedEditorHandle>>;
-/**
- * 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 declare function parseCssFontSize(node: HTMLElement): string | 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 declare function parseCssFontFamily(node: HTMLElement): string | 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 declare function clipboardFormatMatcher(node: Node, delta: Delta): Delta;
-/** Extract a LineTag from Quill attributes, or undefined if none present. Quill only supports one LineTag at a time. */
-export declare function parseLineTag(attributes?: Record<string, unknown>): FormattedTextAsTree.LineTag | undefined;
-/**
- * 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).
- */
-export declare function buildDeltaFromTree(root: FormattedTextAsTree.Tree): QuillDeltaOp[];
-//# sourceMappingURL=quillFormattedView.d.ts.map

package/lib/text/formatted/quillFormattedView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"quillFormattedView.d.ts","sourceRoot":"","sources":["../../../src/text/formatted/quillFormattedView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAmB,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEpE,OAAO,YAAY,MAAM,aAAa,CAAC;AAWvC,OAAO,EAAE,KAAK,YAAY,EAAsB,MAAM,mBAAmB,CAAC;AAC1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGlD,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC;AAClC,KAAK,YAAY,GAAG,YAAY,CAAC,EAAE,CAAC;AACpC,QAAA,MAAM,KAAK,6BAAuB,CAAC;AAEnC;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACtC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACtD,+CAA+C;IAC/C,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEpE;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,0HAI7B,CAAC;AAkCF;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAiBtE;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAkBxE;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,CActE;AAoBD,wHAAwH;AACxH,wBAAgB,YAAY,CAC3B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAClC,mBAAmB,CAAC,OAAO,GAAG,SAAS,CAgBzC;AA8ED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,mBAAmB,CAAC,IAAI,GAAG,YAAY,EAAE,CA4DjF"}

package/lib/text/formatted/quillFormattedView.js

@@ -1,520 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/*!
- * 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 { forwardRef, useEffect, useImperativeHandle, useReducer, useRef, useState, } 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 = forwardRef(({ root, undoRedo }, ref) => {
-    return _jsx(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";
-/** default heading for when an unsupported header is supplied */
-const defaultHeading = "h5";
-/** Quill header numbers → LineTag values. */
-const headerToLineTag = {
-    1: "h1",
-    2: "h2",
-    3: "h3",
-    4: "h4",
-    5: "h5",
-};
-/** LineTag values → Quill attributes. Used by buildDeltaFromTree (tree → Quill). */
-const lineTagToQuillAttributes = {
-    h1: { header: 1 },
-    h2: { header: 2 },
-    h3: { header: 3 },
-    h4: { header: 4 },
-    h5: { header: 5 },
-    li: { list: "bullet" },
-};
-/**
- * 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;
-}
-/** Extract a LineTag from Quill attributes, or undefined if none present. Quill only supports one LineTag at a time. */
-export function parseLineTag(attributes) {
-    if (!attributes)
-        return undefined;
-    // Quill should never send both header and list attributes simultaneously.
-    assert(!(typeof attributes.header === "number" && typeof attributes.list === "string"), 0xce2 /* expected at most one line tag (header or list), but received both */);
-    if (typeof attributes.header === "number") {
-        const tag = headerToLineTag[attributes.header] ?? defaultHeading;
-        return FormattedTextAsTree.LineTag(tag);
-    }
-    if (attributes.list === "bullet") {
-        return FormattedTextAsTree.LineTag("li");
-    }
-    return undefined;
-}
-/** Create a StringAtom containing a StringLineAtom with the given line tag. */
-function createLineAtom(lineTag) {
-    return new FormattedTextAsTree.StringAtom({
-        content: new FormattedTextAsTree.StringLineAtom({
-            tag: lineTag,
-        }),
-        format: new FormattedTextAsTree.CharacterFormat(quillAttributesToFormat()),
-    });
-}
-/**
- * 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 quillAttributesToFormat(attributes) {
-    return {
-        bold: attributes?.bold === true,
-        italic: attributes?.italic === true,
-        underline: attributes?.underline === true,
-        size: parseSize(attributes?.size),
-        font: typeof attributes?.font === "string" ? attributes.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 quillAttributesToPartial(attributes) {
-    if (!attributes)
-        return {};
-    const format = {};
-    // Only include attributes that are explicitly present in the Quill delta
-    if ("bold" in attributes)
-        format.bold = attributes.bold === true;
-    if ("italic" in attributes)
-        format.italic = attributes.italic === true;
-    if ("underline" in attributes)
-        format.underline = attributes.underline === true;
-    if ("size" in attributes)
-        format.size = parseSize(attributes.size);
-    if ("font" in attributes)
-        format.font = typeof attributes.font === "string" ? attributes.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 formatToQuillAttributes(format) {
-    const attributes = {};
-    // Only include non-default formatting to keep Quill deltas minimal
-    if (format.bold)
-        attributes.bold = true;
-    if (format.italic)
-        attributes.italic = true;
-    if (format.underline)
-        attributes.underline = true;
-    if (format.size !== defaultSize) {
-        // Convert pixel value back to Quill size name if possible
-        attributes.size =
-            format.size in sizeReverse
-                ? sizeReverse[format.size]
-                : `${format.size}px`;
-    }
-    if (format.font !== defaultFont)
-        attributes.font = format.font;
-    return attributes;
-}
-/**
- * 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).
- */
-export function buildDeltaFromTree(root) {
-    const ops = [];
-    // Accumulator for current run of identically-formatted text
-    let text = "";
-    let previousAttributes = {};
-    // 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(previousAttributes).length > 0)
-            op.attributes = previousAttributes;
-        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 currentAttributes = formatToQuillAttributes(atom.format);
-        if (atom.content instanceof FormattedTextAsTree.StringLineAtom) {
-            // Merge line-specific attributes (header/list) into the format
-            const lineTag = atom.content.tag.value;
-            Object.assign(currentAttributes, lineTagToQuillAttributes[lineTag]);
-            // Line atoms always break the current run and emit a newline
-            pushRun();
-            text = "";
-            key = "";
-            const op = { insert: "\n" };
-            if (Object.keys(currentAttributes).length > 0)
-                op.attributes = currentAttributes;
-            ops.push(op);
-        }
-        else {
-            const stringifiedAttributes = JSON.stringify(currentAttributes);
-            if (stringifiedAttributes === key) {
-                // Same formatting as previous character - extend run
-                text += atom.content.content;
-            }
-            else {
-                // Different formatting - push previous run and start a new one
-                pushRun();
-                text = atom.content.content;
-                previousAttributes = currentAttributes;
-                key = stringifiedAttributes;
-            }
-        }
-    }
-    // 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 = 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 = useRef(null);
-    // Quill instance, persisted across renders to avoid re-initialization
-    const quillRef = useRef(null);
-    // Guards against update loops between Quill and the tree
-    const isUpdating = useRef(false);
-    // Container element for undo/redo button portal
-    const [undoRedoContainer, setUndoRedoContainer] = useState(undefined);
-    // Force re-render when undo/redo state changes
-    const [, forceUpdate] = useReducer((x) => x + 1, 0);
-    // Expose undo/redo methods via ref
-    useImperativeHandle(ref, () => ({
-        undo: () => undoRedo?.undo(),
-        redo: () => undoRedo?.redo(),
-    }));
-    // Initialize Quill editor with formatting toolbar using Quill provided CSS
-    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: [] }],
-                    [{ header: [1, 2, 3, 4, 5, false] }],
-                    [{ list: "bullet" }],
-                    ["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) {
-                            const lineTag = parseLineTag(op.attributes);
-                            // Case 1: Applying line formatting (header/list) to an existing newline in the document.
-                            if (lineTag !== undefined && content[utf16Pos] === "\n") {
-                                // Swap existing newline atom to StringLineAtom
-                                root.removeRange(cpPos, cpPos + 1);
-                                root.insertWithFormattingAt(cpPos, [createLineAtom(lineTag)]);
-                                // Case 2: Applying line formatting past the end of content. Quill's implicit trailing newline.
-                            }
-                            else if (lineTag !== undefined && utf16Pos >= content.length) {
-                                // Quill's implicit trailing newline — insert a new line atom
-                                root.insertWithFormattingAt(cpPos, [createLineAtom(lineTag)]);
-                                content += "\n";
-                                // Case 3: clearing line formatting. Deletes StringLineAtom and inserts a plain
-                                // StringTextAtom("\n") in its place.
-                            }
-                            else if (lineTag === undefined &&
-                                content[utf16Pos] === "\n" &&
-                                root.charactersWithFormatting()[cpPos]?.content instanceof
-                                    FormattedTextAsTree.StringLineAtom) {
-                                // Quill is clearing line formatting (e.g. { retain: 1, attributes: { header: null } }).
-                                // StringLineAtom and StringTextAtom are distinct schema types in the tree,
-                                // so we can't convert between them via formatRange — we must delete the
-                                // StringLineAtom and insert a plain StringTextAtom("\n") in its place.
-                                root.removeRange(cpPos, cpPos + 1);
-                                root.insertAt(cpPos, "\n");
-                                // Case 4: Normal character formatting (bold, italic, size, etc...)
-                            }
-                            else {
-                                root.formatRange(cpPos, cpPos + cpCount, quillAttributesToPartial(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") {
-                        const lineTag = parseLineTag(op.attributes);
-                        if (lineTag !== undefined && op.insert === "\n") {
-                            root.insertWithFormattingAt(cpPos, [createLineAtom(lineTag)]);
-                        }
-                        else {
-                            // Insert: add new text with formatting at current position
-                            root.defaultFormat = new FormattedTextAsTree.CharacterFormat(quillAttributesToFormat(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.
-    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
-    useEffect(() => {
-        if (!undoRedo)
-            return;
-        return undoRedo.onStateChange(() => {
-            forceUpdate();
-        });
-    }, [undoRedo]);
-    // Render undo/redo buttons via portal into Quill toolbar
-    const undoRedoButtons = undoRedoContainer
-        ? ReactDOM.createPortal(_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "ql-undo", disabled: undoRedo?.canUndo() !== true, onClick: () => undoRedo?.undo() }), _jsx("button", { type: "button", className: "ql-redo", disabled: undoRedo?.canRedo() !== true, onClick: () => undoRedo?.redo() })] }), undoRedoContainer)
-        : undefined;
-    return (_jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [_jsx("style", { children: `
-				.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; }
-				/* custom css altering Quill's default bullet point alignment */
-				/* vertically center bullets in list items, since Quill's bullet has no inherent height */
-				li[data-list="bullet"] { display: flex; align-items: center; }
-				li[data-list="bullet"] .ql-ui { align-self: center; }
-			` }), _jsx("h2", { style: { margin: "10px 0" }, children: "Collaborative Formatted Text Editor" }), _jsx("div", { ref: editorRef, style: {
-                    flex: 1,
-                    minHeight: "300px",
-                    border: "1px solid #ccc",
-                    borderRadius: "4px",
-                } }), undoRedoButtons] }));
-});
-FormattedTextEditorView.displayName = "FormattedTextEditorView";
-//# sourceMappingURL=quillFormattedView.js.map