@fluidframework/react 2.90.0 → 2.91.0

package/lib/test/useTree.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTree.spec.js","sourceRoot":"","sources":["../../src/test/useTree.spec.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 { strict as assert } from \"node:assert\";\n\nimport { SchemaFactory } from \"@fluidframework/tree\";\nimport { render } from \"@testing-library/react\";\nimport globalJsdom from \"global-jsdom\";\nimport * as React from \"react\";\n\nimport { toPropTreeNode, type PropTreeNode } from \"../propNode.js\";\nimport { objectIdNumber } from \"../simpleIdentifier.js\";\nimport {\n\tusePropTreeNode,\n\twithMemoizedTreeObservations,\n\twithTreeObservations,\n} from \"../useTree.js\";\n\ndescribe(\"useTree\", () => {\n\tdescribe(\"dom tests\", () => {\n\t\tlet cleanup: () => void;\n\n\t\tbefore(() => {\n\t\t\tcleanup = globalJsdom();\n\t\t});\n\n\t\tafter(() => {\n\t\t\tcleanup();\n\t\t});\n\n\t\tit(\"withTreeObservations example\", () => {\n\t\t\tconst builder = new SchemaFactory(\"example\");\n\t\t\tclass Item extends builder.object(\"Item\", { text: SchemaFactory.string }) {}\n\t\t\tconst ItemComponentBug = ({ item }: { item: Item }): JSX.Element => (\n\t\t\t\t<span>{item.text}</span> // Reading `text`, a mutable value from a React prop, causes an invalidation bug.\n\t\t\t);\n\n\t\t\tconst ItemComponent = withTreeObservations(\n\t\t\t\t({ item }: { item: Item }): JSX.Element => <span>{item.text}</span>,\n\t\t\t);\n\n\t\t\tconst ItemParentComponent = ({ item }: { item: PropTreeNode<Item> }): JSX.Element => (\n\t\t\t\t<ItemComponent item={item} />\n\t\t\t);\n\n\t\t\tconst InvalidItemParentComponent = ({\n\t\t\t\titem,\n\t\t\t}: {\n\t\t\t\titem: PropTreeNode<Item>;\n\t\t\t}): JSX.Element => (\n\t\t\t\t// @ts-expect-error PropTreeNode turns this invalidation bug into a compile error\n\t\t\t\t<span>{item.text}</span>\n\t\t\t);\n\t\t});\n\n\t\tfor (const reactStrictMode of [false, true]) {\n\t\t\t/**\n\t\t\t * Check then clear, the contents of `log`.\n\t\t\t *\n\t\t\t * When in StrictMode, React may double render, so that case is not checked for an exact match.\n\t\t\t */\n\t\t\tfunction checkRenderLog(log: string[], expected: readonly string[]): void {\n\t\t\t\tif (reactStrictMode) {\n\t\t\t\t\tassert.deepEqual(new Set(log), new Set(expected));\n\t\t\t\t} else {\n\t\t\t\t\tassert.deepEqual(log, expected);\n\t\t\t\t}\n\t\t\t\tlog.length = 0;\n\t\t\t}\n\n\t\t\tdescribe(`StrictMode: ${reactStrictMode}`, () => {\n\t\t\t\tit(\"usePropTreeNode\", () => {\n\t\t\t\t\tconst builder = new SchemaFactory(\"tree-react-api\");\n\n\t\t\t\t\tclass Point extends builder.object(\"Point\", {\n\t\t\t\t\t\tx: builder.number,\n\t\t\t\t\t\ty: builder.number,\n\t\t\t\t\t}) {}\n\n\t\t\t\t\tconst log: string[] = [];\n\n\t\t\t\t\tfunction PointComponent(props: { node: PropTreeNode<Point> }): JSX.Element {\n\t\t\t\t\t\tlog.push(\"render\");\n\t\t\t\t\t\tconst { x, y } = usePropTreeNode(props.node, (node) => {\n\t\t\t\t\t\t\tlog.push(`usePropTreeNode`);\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tx: node.x,\n\t\t\t\t\t\t\t\ty: node.y,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn <span>{`x: ${x}, y: ${y}`}</span>;\n\t\t\t\t\t}\n\n\t\t\t\t\tfunction ParentComponent(props: { node: PropTreeNode<Point> }): JSX.Element {\n\t\t\t\t\t\tlog.push(\"parent\");\n\t\t\t\t\t\treturn <PointComponent node={props.node} />;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst point = new Point({ x: 1, y: 1 });\n\t\t\t\t\tconst propPoint = toPropTreeNode(point);\n\n\t\t\t\t\tconst content = <ParentComponent node={propPoint} />;\n\n\t\t\t\t\tconst rendered = render(content, { reactStrictMode });\n\t\t\t\t\tassert.equal(rendered.baseElement.textContent, \"x: 1, y: 1\");\n\t\t\t\t\tcheckRenderLog(log, [\"parent\", \"render\", \"usePropTreeNode\"]);\n\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\tassertLogEmpty(log);\n\n\t\t\t\t\tpoint.x = 2;\n\t\t\t\t\tassertLogEmpty(log);\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\t// Parent which passed node down did not rerender, but PointComponent which read from it did:\n\t\t\t\t\tcheckRenderLog(log, [\"render\", \"usePropTreeNode\"]);\n\t\t\t\t\tassert.equal(rendered.baseElement.textContent, \"x: 2, y: 1\");\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tdescribe(\"withTreeObservations and array\", () => {\n\t\t\t\tconst builder = new SchemaFactory(\"tree-react-api\");\n\n\t\t\t\tclass Item extends builder.object(\"Item\", {\n\t\t\t\t\tx: SchemaFactory.number,\n\t\t\t\t}) {}\n\n\t\t\t\tclass Collection extends builder.array(\"Collection\", Item) {}\n\n\t\t\t\tbeforeEach(() => {\n\t\t\t\t\t// Ensure the log starts empty for each test.\n\t\t\t\t\tlog.length = 0;\n\t\t\t\t});\n\n\t\t\t\tconst log: string[] = [];\n\n\t\t\t\tconst ItemComponent = withMemoizedTreeObservations(\n\t\t\t\t\t(props: { item: Item }): JSX.Element => {\n\t\t\t\t\t\tlog.push(`Item: ${props.item.x}`);\n\t\t\t\t\t\treturn <span>{`${props.item.x}`}</span>;\n\t\t\t\t\t},\n\t\t\t\t\t{ onInvalidation: () => log.push(\"Item invalidated\") },\n\t\t\t\t);\n\n\t\t\t\tconst CollectionComponent = withTreeObservations(\n\t\t\t\t\t(props: { collection: Collection }): JSX.Element => {\n\t\t\t\t\t\tlog.push(\"Collection\");\n\n\t\t\t\t\t\tconst items = props.collection.map((item) => (\n\t\t\t\t\t\t\t<ItemComponent key={objectIdNumber(item)} item={item} />\n\t\t\t\t\t\t));\n\n\t\t\t\t\t\treturn <div>{items}</div>;\n\t\t\t\t\t},\n\t\t\t\t\t{ onInvalidation: () => log.push(\"Collection invalidated\") },\n\t\t\t\t);\n\n\t\t\t\tconst ParentComponent = withTreeObservations(\n\t\t\t\t\t(props: { node: Collection }): JSX.Element => {\n\t\t\t\t\t\tlog.push(\"Parent\");\n\t\t\t\t\t\treturn <CollectionComponent collection={props.node} />;\n\t\t\t\t\t},\n\t\t\t\t\t{ onInvalidation: () => log.push(\"Parent invalidated\") },\n\t\t\t\t);\n\n\t\t\t\tit(\"empty\", () => {\n\t\t\t\t\tconst collection = new Collection([]);\n\t\t\t\t\tconst content = <ParentComponent node={collection} />;\n\t\t\t\t\trender(content, { reactStrictMode });\n\t\t\t\t\tcheckRenderLog(log, [\"Parent\", \"Collection\"]);\n\t\t\t\t});\n\n\t\t\t\t// This confirms that modifying an array does not needlessly invalid parents and reuses children (if they use memo)\n\t\t\t\tit(\"array editing: insertion\", () => {\n\t\t\t\t\tconst collection = new Collection([{ x: 1 }, { x: 2 }, { x: 3 }]);\n\t\t\t\t\tconst content = <ParentComponent node={collection} />;\n\t\t\t\t\tconst rendered = render(content, { reactStrictMode });\n\t\t\t\t\tcheckRenderLog(log, [\"Parent\", \"Collection\", \"Item: 1\", \"Item: 2\", \"Item: 3\"]);\n\t\t\t\t\tcollection.insertAtEnd(new Item({ x: 4 }));\n\t\t\t\t\tcheckRenderLog(log, [\"Collection invalidated\"]);\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\tcheckRenderLog(log, [\"Collection\", \"Item: 4\"]);\n\n\t\t\t\t\tassert.equal(rendered.baseElement.textContent, \"1234\");\n\t\t\t\t});\n\n\t\t\t\t// This confirms the same as the above, but testes some harder cases.\n\t\t\t\t// For example this one depends on stable keys to reusing children due to indexes changing.\n\t\t\t\tit(\"array editing: general\", () => {\n\t\t\t\t\tconst collection = new Collection([{ x: 1 }, { x: 2 }, { x: 3 }]);\n\t\t\t\t\tconst content = <ParentComponent node={collection} />;\n\t\t\t\t\tconst rendered = render(content, { reactStrictMode });\n\t\t\t\t\tcheckRenderLog(log, [\"Parent\", \"Collection\", \"Item: 1\", \"Item: 2\", \"Item: 3\"]);\n\t\t\t\t\tcollection.moveToEnd(0);\n\t\t\t\t\tcheckRenderLog(log, [\"Collection invalidated\"]);\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\tcheckRenderLog(log, [\"Collection\"]);\n\t\t\t\t\tcollection.removeAt(1);\n\t\t\t\t\tcollection.insertAtStart(new Item({ x: 4 }));\n\t\t\t\t\tcheckRenderLog(log, [\"Collection invalidated\"]);\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\tcheckRenderLog(log, [\"Collection\", \"Item: 4\"]);\n\n\t\t\t\t\tassert.equal(rendered.baseElement.textContent, \"421\");\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t});\n});\n\n/**\n * Assert that an array is empty.\n *\n * Not inlined because doing so causes TypeScript to infer the array type as never[] afterwards and breaks push.\n * Better than asserting length is 0 as this gets a better error message on failure.\n */\nfunction assertLogEmpty(log: string[]): void {\n\tassert.deepEqual(log, []);\n}\n"]}
+{"version":3,"file":"useTree.spec.js","sourceRoot":"","sources":["../../src/test/useTree.spec.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 { strict as assert } from \"node:assert\";\n\nimport { SchemaFactory } from \"@fluidframework/tree\";\nimport { render } from \"@testing-library/react\";\nimport globalJsdom from \"global-jsdom\";\n\nimport { toPropTreeNode, type PropTreeNode } from \"../propNode.js\";\nimport { objectIdNumber } from \"../simpleIdentifier.js\";\nimport {\n\tusePropTreeNode,\n\twithMemoizedTreeObservations,\n\twithTreeObservations,\n} from \"../useTree.js\";\n\ndescribe(\"useTree\", () => {\n\tdescribe(\"dom tests\", () => {\n\t\tlet cleanup: () => void;\n\n\t\tbefore(() => {\n\t\t\tcleanup = globalJsdom();\n\t\t});\n\n\t\tafter(() => {\n\t\t\tcleanup();\n\t\t});\n\n\t\tit(\"withTreeObservations example\", () => {\n\t\t\tconst builder = new SchemaFactory(\"example\");\n\t\t\tclass Item extends builder.object(\"Item\", { text: SchemaFactory.string }) {}\n\t\t\tconst ItemComponentBug = ({ item }: { item: Item }): JSX.Element => (\n\t\t\t\t<span>{item.text}</span> // Reading `text`, a mutable value from a React prop, causes an invalidation bug.\n\t\t\t);\n\n\t\t\tconst ItemComponent = withTreeObservations(\n\t\t\t\t({ item }: { item: Item }): JSX.Element => <span>{item.text}</span>,\n\t\t\t);\n\n\t\t\tconst ItemParentComponent = ({ item }: { item: PropTreeNode<Item> }): JSX.Element => (\n\t\t\t\t<ItemComponent item={item} />\n\t\t\t);\n\n\t\t\tconst InvalidItemParentComponent = ({\n\t\t\t\titem,\n\t\t\t}: {\n\t\t\t\titem: PropTreeNode<Item>;\n\t\t\t}): JSX.Element => (\n\t\t\t\t// @ts-expect-error PropTreeNode turns this invalidation bug into a compile error\n\t\t\t\t<span>{item.text}</span>\n\t\t\t);\n\t\t});\n\n\t\tfor (const reactStrictMode of [false, true]) {\n\t\t\t/**\n\t\t\t * Check then clear, the contents of `log`.\n\t\t\t *\n\t\t\t * When in StrictMode, React may double render, so that case is not checked for an exact match.\n\t\t\t */\n\t\t\tfunction checkRenderLog(log: string[], expected: readonly string[]): void {\n\t\t\t\tif (reactStrictMode) {\n\t\t\t\t\tassert.deepEqual(new Set(log), new Set(expected));\n\t\t\t\t} else {\n\t\t\t\t\tassert.deepEqual(log, expected);\n\t\t\t\t}\n\t\t\t\tlog.length = 0;\n\t\t\t}\n\n\t\t\tdescribe(`StrictMode: ${reactStrictMode}`, () => {\n\t\t\t\tit(\"usePropTreeNode\", () => {\n\t\t\t\t\tconst builder = new SchemaFactory(\"tree-react-api\");\n\n\t\t\t\t\tclass Point extends builder.object(\"Point\", {\n\t\t\t\t\t\tx: builder.number,\n\t\t\t\t\t\ty: builder.number,\n\t\t\t\t\t}) {}\n\n\t\t\t\t\tconst log: string[] = [];\n\n\t\t\t\t\tfunction PointComponent(props: { node: PropTreeNode<Point> }): JSX.Element {\n\t\t\t\t\t\tlog.push(\"render\");\n\t\t\t\t\t\tconst { x, y } = usePropTreeNode(props.node, (node) => {\n\t\t\t\t\t\t\tlog.push(`usePropTreeNode`);\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tx: node.x,\n\t\t\t\t\t\t\t\ty: node.y,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn <span>{`x: ${x}, y: ${y}`}</span>;\n\t\t\t\t\t}\n\n\t\t\t\t\tfunction ParentComponent(props: { node: PropTreeNode<Point> }): JSX.Element {\n\t\t\t\t\t\tlog.push(\"parent\");\n\t\t\t\t\t\treturn <PointComponent node={props.node} />;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst point = new Point({ x: 1, y: 1 });\n\t\t\t\t\tconst propPoint = toPropTreeNode(point);\n\n\t\t\t\t\tconst content = <ParentComponent node={propPoint} />;\n\n\t\t\t\t\tconst rendered = render(content, { reactStrictMode });\n\t\t\t\t\tassert.equal(rendered.baseElement.textContent, \"x: 1, y: 1\");\n\t\t\t\t\tcheckRenderLog(log, [\"parent\", \"render\", \"usePropTreeNode\"]);\n\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\tassertLogEmpty(log);\n\n\t\t\t\t\tpoint.x = 2;\n\t\t\t\t\tassertLogEmpty(log);\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\t// Parent which passed node down did not rerender, but PointComponent which read from it did:\n\t\t\t\t\tcheckRenderLog(log, [\"render\", \"usePropTreeNode\"]);\n\t\t\t\t\tassert.equal(rendered.baseElement.textContent, \"x: 2, y: 1\");\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tdescribe(\"withTreeObservations and array\", () => {\n\t\t\t\tconst builder = new SchemaFactory(\"tree-react-api\");\n\n\t\t\t\tclass Item extends builder.object(\"Item\", {\n\t\t\t\t\tx: SchemaFactory.number,\n\t\t\t\t}) {}\n\n\t\t\t\tclass Collection extends builder.array(\"Collection\", Item) {}\n\n\t\t\t\tbeforeEach(() => {\n\t\t\t\t\t// Ensure the log starts empty for each test.\n\t\t\t\t\tlog.length = 0;\n\t\t\t\t});\n\n\t\t\t\tconst log: string[] = [];\n\n\t\t\t\tconst ItemComponent = withMemoizedTreeObservations(\n\t\t\t\t\t(props: { item: Item }): JSX.Element => {\n\t\t\t\t\t\tlog.push(`Item: ${props.item.x}`);\n\t\t\t\t\t\treturn <span>{`${props.item.x}`}</span>;\n\t\t\t\t\t},\n\t\t\t\t\t{ onInvalidation: () => log.push(\"Item invalidated\") },\n\t\t\t\t);\n\n\t\t\t\tconst CollectionComponent = withTreeObservations(\n\t\t\t\t\t(props: { collection: Collection }): JSX.Element => {\n\t\t\t\t\t\tlog.push(\"Collection\");\n\n\t\t\t\t\t\tconst items = props.collection.map((item) => (\n\t\t\t\t\t\t\t<ItemComponent key={objectIdNumber(item)} item={item} />\n\t\t\t\t\t\t));\n\n\t\t\t\t\t\treturn <div>{items}</div>;\n\t\t\t\t\t},\n\t\t\t\t\t{ onInvalidation: () => log.push(\"Collection invalidated\") },\n\t\t\t\t);\n\n\t\t\t\tconst ParentComponent = withTreeObservations(\n\t\t\t\t\t(props: { node: Collection }): JSX.Element => {\n\t\t\t\t\t\tlog.push(\"Parent\");\n\t\t\t\t\t\treturn <CollectionComponent collection={props.node} />;\n\t\t\t\t\t},\n\t\t\t\t\t{ onInvalidation: () => log.push(\"Parent invalidated\") },\n\t\t\t\t);\n\n\t\t\t\tit(\"empty\", () => {\n\t\t\t\t\tconst collection = new Collection([]);\n\t\t\t\t\tconst content = <ParentComponent node={collection} />;\n\t\t\t\t\trender(content, { reactStrictMode });\n\t\t\t\t\tcheckRenderLog(log, [\"Parent\", \"Collection\"]);\n\t\t\t\t});\n\n\t\t\t\t// This confirms that modifying an array does not needlessly invalid parents and reuses children (if they use memo)\n\t\t\t\tit(\"array editing: insertion\", () => {\n\t\t\t\t\tconst collection = new Collection([{ x: 1 }, { x: 2 }, { x: 3 }]);\n\t\t\t\t\tconst content = <ParentComponent node={collection} />;\n\t\t\t\t\tconst rendered = render(content, { reactStrictMode });\n\t\t\t\t\tcheckRenderLog(log, [\"Parent\", \"Collection\", \"Item: 1\", \"Item: 2\", \"Item: 3\"]);\n\t\t\t\t\tcollection.insertAtEnd(new Item({ x: 4 }));\n\t\t\t\t\tcheckRenderLog(log, [\"Collection invalidated\"]);\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\tcheckRenderLog(log, [\"Collection\", \"Item: 4\"]);\n\n\t\t\t\t\tassert.equal(rendered.baseElement.textContent, \"1234\");\n\t\t\t\t});\n\n\t\t\t\t// This confirms the same as the above, but testes some harder cases.\n\t\t\t\t// For example this one depends on stable keys to reusing children due to indexes changing.\n\t\t\t\tit(\"array editing: general\", () => {\n\t\t\t\t\tconst collection = new Collection([{ x: 1 }, { x: 2 }, { x: 3 }]);\n\t\t\t\t\tconst content = <ParentComponent node={collection} />;\n\t\t\t\t\tconst rendered = render(content, { reactStrictMode });\n\t\t\t\t\tcheckRenderLog(log, [\"Parent\", \"Collection\", \"Item: 1\", \"Item: 2\", \"Item: 3\"]);\n\t\t\t\t\tcollection.moveToEnd(0);\n\t\t\t\t\tcheckRenderLog(log, [\"Collection invalidated\"]);\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\tcheckRenderLog(log, [\"Collection\"]);\n\t\t\t\t\tcollection.removeAt(1);\n\t\t\t\t\tcollection.insertAtStart(new Item({ x: 4 }));\n\t\t\t\t\tcheckRenderLog(log, [\"Collection invalidated\"]);\n\t\t\t\t\trendered.rerender(content);\n\t\t\t\t\tcheckRenderLog(log, [\"Collection\", \"Item: 4\"]);\n\n\t\t\t\t\tassert.equal(rendered.baseElement.textContent, \"421\");\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t});\n});\n\n/**\n * Assert that an array is empty.\n *\n * Not inlined because doing so causes TypeScript to infer the array type as never[] afterwards and breaks push.\n * Better than asserting length is 0 as this gets a better error message on failure.\n */\nfunction assertLogEmpty(log: string[]): void {\n\tassert.deepEqual(log, []);\n}\n"]}

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

@@ -5,10 +5,10 @@
 import { FormattedTextAsTree } from "@fluidframework/tree/internal";
 export { FormattedTextAsTree } from "@fluidframework/tree/internal";
 import DeltaPackage from "quill-delta";
-import * as React from "react";
 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.
@@ -30,7 +30,7 @@ export type FormattedEditorHandle = Pick<UndoRedo, "undo" | "redo">;
  * Uses {@link @fluidframework/tree#FormattedTextAsTree.Tree} for the data-model and Quill for the rich text editor UI.
  * @internal
  */
-export declare const FormattedMainView: React.ForwardRefExoticComponent<FormattedMainViewProps & React.RefAttributes<FormattedEditorHandle>>;
+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.
@@ -51,4 +51,16 @@ export declare function parseCssFontFamily(node: HTMLElement): string | undefine
  * @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 +1 @@
-{"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;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,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;AAElC,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,sGAK5B,CAAC;AAaH;;;;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"}
+{"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,3 +1,4 @@
+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.
@@ -7,7 +8,7 @@ import { Tree, TreeAlpha, FormattedTextAsTree } from "@fluidframework/tree/inter
 export { FormattedTextAsTree } from "@fluidframework/tree/internal";
 import Quill from "quill";
 import DeltaPackage from "quill-delta";
-import * as React from "react";
+import { forwardRef, useEffect, useImperativeHandle, useReducer, useRef, useState, } from "react";
 import * as ReactDOM from "react-dom";
 import { unwrapPropTreeNode } from "../../propNode.js";
 const Delta = DeltaPackage.default;
@@ -17,8 +18,8 @@ const Delta = DeltaPackage.default;
  * 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 });
+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. */
@@ -31,6 +32,25 @@ const fontSet = new Set(["monospace", "serif", "sans-serif", "Arial"]);
 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.
@@ -117,18 +137,42 @@ function parseSize(size) {
     }
     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 quillAttrsToFormat(attrs) {
+function quillAttributesToFormat(attributes) {
     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,
+        bold: attributes?.bold === true,
+        italic: attributes?.italic === true,
+        underline: attributes?.underline === true,
+        size: parseSize(attributes?.size),
+        font: typeof attributes?.font === "string" ? attributes.font : defaultFont,
     };
 }
 /**
@@ -137,21 +181,21 @@ function quillAttrsToFormat(attrs) {
  * Only includes properties that were explicitly set in the Quill attributes,
  * allowing selective format updates without overwriting unrelated properties.
  */
-function quillAttrsToPartial(attrs) {
-    if (!attrs)
+function quillAttributesToPartial(attributes) {
+    if (!attributes)
         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;
+    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;
 }
 /**
@@ -159,25 +203,25 @@ function quillAttrsToPartial(attrs) {
  * 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 = {};
+function formatToQuillAttributes(format) {
+    const attributes = {};
     // Only include non-default formatting to keep Quill deltas minimal
     if (format.bold)
-        attrs.bold = true;
+        attributes.bold = true;
     if (format.italic)
-        attrs.italic = true;
+        attributes.italic = true;
     if (format.underline)
-        attrs.underline = true;
+        attributes.underline = true;
     if (format.size !== defaultSize) {
         // Convert pixel value back to Quill size name if possible
-        attrs.size =
+        attributes.size =
             format.size in sizeReverse
                 ? sizeReverse[format.size]
                 : `${format.size}px`;
     }
     if (format.font !== defaultFont)
-        attrs.font = format.font;
-    return attrs;
+        attributes.font = format.font;
+    return attributes;
 }
 /**
  * Build a Quill Delta representing the full tree content.
@@ -188,11 +232,11 @@ function formatToQuillAttrs(format) {
  * This is used to sync Quill's display when the tree changes externally
  * (e.g., from a remote collaborator's edit).
  */
-function buildDeltaFromTree(root) {
+export function buildDeltaFromTree(root) {
     const ops = [];
     // Accumulator for current run of identically-formatted text
     let text = "";
-    let attrs = {};
+    let previousAttributes = {};
     // JSON key for current attributes, used for equality comparison
     // TODO:Performance: implement faster equality check.
     let key = "";
@@ -201,26 +245,41 @@ function buildDeltaFromTree(root) {
         if (!text)
             return;
         const op = { insert: text };
-        if (Object.keys(attrs).length > 0)
-            op.attributes = attrs;
+        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 a = formatToQuillAttrs(atom.format);
-        const k = JSON.stringify(a);
-        if (k === key) {
-            // Same formatting as previous character - extend current run
-            text += atom.content.content;
+        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 {
-            // Different formatting - push current run and start new one
-            pushRun();
-            text = atom.content.content;
-            attrs = a;
-            key = k;
+            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
@@ -244,26 +303,26 @@ function buildDeltaFromTree(root) {
  * 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) => {
+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 = React.useRef(null);
+    const editorRef = useRef(null);
     // Quill instance, persisted across renders to avoid re-initialization
-    const quillRef = React.useRef(null);
+    const quillRef = useRef(null);
     // Guards against update loops between Quill and the tree
-    const isUpdating = React.useRef(false);
+    const isUpdating = useRef(false);
     // Container element for undo/redo button portal
-    const [undoRedoContainer, setUndoRedoContainer] = React.useState(undefined);
+    const [undoRedoContainer, setUndoRedoContainer] = useState(undefined);
     // Force re-render when undo/redo state changes
-    const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+    const [, forceUpdate] = useReducer((x) => x + 1, 0);
     // Expose undo/redo methods via ref
-    React.useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
         undo: () => undoRedo?.undo(),
         redo: () => undoRedo?.redo(),
     }));
     // Initialize Quill editor with formatting toolbar using Quill provided CSS
-    React.useEffect(() => {
+    useEffect(() => {
         if (!editorRef.current || quillRef.current)
             return;
         const quill = new Quill(editorRef.current, {
@@ -275,6 +334,8 @@ const FormattedTextEditorView = React.forwardRef(({ root: propRoot, undoRedo },
                     ["bold", "italic", "underline"],
                     [{ size: ["small", false, "large", "huge"] }],
                     [{ font: [] }],
+                    [{ header: [1, 2, 3, 4, 5, false] }],
+                    [{ list: "bullet" }],
                     ["clean"],
                 ],
                 clipboard: [Node.ELEMENT_NODE, clipboardFormatMatcher],
@@ -316,7 +377,36 @@ const FormattedTextEditorView = React.forwardRef(({ root: propRoot, undoRedo },
                         const retainedStr = content.slice(utf16Pos, utf16Pos + op.retain);
                         const cpCount = codepointCount(retainedStr);
                         if (op.attributes) {
-                            root.formatRange(cpPos, cpPos + cpCount, quillAttrsToPartial(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;
@@ -331,9 +421,15 @@ const FormattedTextEditorView = React.forwardRef(({ root: propRoot, undoRedo },
                         // 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);
+                        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
@@ -363,7 +459,7 @@ const FormattedTextEditorView = React.forwardRef(({ root: propRoot, undoRedo },
     }, []);
     // Sync Quill when tree changes externally (e.g., from remote collaborators).
     // Uses event subscription instead of render-time observation for efficiency.
-    React.useEffect(() => {
+    useEffect(() => {
         return Tree.on(root, "treeChanged", () => {
             // Skip if we caused the tree change ourselves via the text-change handler
             if (!quillRef.current || isUpdating.current)
@@ -388,7 +484,7 @@ const FormattedTextEditorView = React.forwardRef(({ root: propRoot, undoRedo },
         });
     }, [root]);
     // Subscribe to undo/redo state changes to update button disabled state
-    React.useEffect(() => {
+    useEffect(() => {
         if (!undoRedo)
             return;
         return undoRedo.onStateChange(() => {
@@ -397,12 +493,9 @@ const FormattedTextEditorView = React.forwardRef(({ root: propRoot, undoRedo },
     }, [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)
+        ? 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 (React.createElement("div", { style: { height: "100%", display: "flex", flexDirection: "column" } },
-        React.createElement("style", null, `
+    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; }
@@ -412,15 +505,16 @@ const FormattedTextEditorView = React.forwardRef(({ root: propRoot, undoRedo },
 				.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));
+				/* 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