@fluidframework/react 2.90.0 → 2.91.0

package/src/text/formatted/quillFormattedView.tsx

@@ -8,7 +8,14 @@ import { Tree, TreeAlpha, FormattedTextAsTree } from "@fluidframework/tree/inter
 export { FormattedTextAsTree } from "@fluidframework/tree/internal";
 import Quill, { type EmitterSource } 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 { type PropTreeNode, unwrapPropTreeNode } from "../../propNode.js";
@@ -41,12 +48,11 @@ 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 const FormattedMainView = React.forwardRef<
-	FormattedEditorHandle,
-	FormattedMainViewProps
->(({ root, undoRedo }, ref) => {
-	return <FormattedTextEditorView root={root} undoRedo={undoRedo} ref={ref} />;
-});
+export const FormattedMainView = forwardRef<FormattedEditorHandle, FormattedMainViewProps>(
+	({ root, undoRedo }, ref) => {
+		return <FormattedTextEditorView root={root} undoRedo={undoRedo} ref={ref} />;
+	},
+);
 FormattedMainView.displayName = "FormattedMainView";
 
 /** Quill size names mapped to pixel values for tree storage. */
@@ -59,6 +65,27 @@ const fontSet = new Set<string>(["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";
+/** The string literal values accepted by LineTag. */
+type LineTagValue = Parameters<typeof FormattedTextAsTree.LineTag>[0];
+/** Quill header numbers → LineTag values. */
+const headerToLineTag = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+} as const satisfies Readonly<Record<number, LineTagValue>>;
+/** 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" },
+} as const satisfies Readonly<Record<LineTagValue, Record<string, unknown>>>;
 /**
  * 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.
@@ -149,12 +176,43 @@ function parseSize(size: unknown): number {
 	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?: Record<string, unknown>,
+): FormattedTextAsTree.LineTag | undefined {
+	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: LineTagValue =
+			headerToLineTag[attributes.header as keyof typeof headerToLineTag] ?? 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: FormattedTextAsTree.LineTag): FormattedTextAsTree.StringAtom {
+	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?: Record<string, unknown>): {
+function quillAttributesToFormat(attributes?: Record<string, unknown>): {
 	bold: boolean;
 	italic: boolean;
 	underline: boolean;
@@ -162,11 +220,11 @@ function quillAttrsToFormat(attrs?: Record<string, unknown>): {
 	font: string;
 } {
 	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,
 	};
 }
 
@@ -176,17 +234,18 @@ function quillAttrsToFormat(attrs?: Record<string, unknown>): {
  * Only includes properties that were explicitly set in the Quill attributes,
  * allowing selective format updates without overwriting unrelated properties.
  */
-function quillAttrsToPartial(
-	attrs?: Record<string, unknown>,
+function quillAttributesToPartial(
+	attributes?: Record<string, unknown>,
 ): Partial<FormattedTextAsTree.CharacterFormat> {
-	if (!attrs) return {};
+	if (!attributes) return {};
 	const format: Partial<FormattedTextAsTree.CharacterFormat> = {};
 	// 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;
 }
 
@@ -195,23 +254,23 @@ function quillAttrsToPartial(
  * Used when building Quill deltas from tree content to sync external changes.
  * Only includes non-default values to keep deltas minimal.
  */
-function formatToQuillAttrs(
+function formatToQuillAttributes(
 	format: FormattedTextAsTree.CharacterFormat,
 ): Record<string, unknown> {
-	const attrs: Record<string, unknown> = {};
+	const attributes: Record<string, unknown> = {};
 	// 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.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
-		attrs.size =
+		attributes.size =
 			format.size in sizeReverse
 				? sizeReverse[format.size as keyof typeof sizeReverse]
 				: `${format.size}px`;
 	}
-	if (format.font !== defaultFont) attrs.font = format.font;
-	return attrs;
+	if (format.font !== defaultFont) attributes.font = format.font;
+	return attributes;
 }
 
 /**
@@ -223,11 +282,11 @@ function formatToQuillAttrs(
  * This is used to sync Quill's display when the tree changes externally
  * (e.g., from a remote collaborator's edit).
  */
-function buildDeltaFromTree(root: FormattedTextAsTree.Tree): QuillDeltaOp[] {
+export function buildDeltaFromTree(root: FormattedTextAsTree.Tree): QuillDeltaOp[] {
 	const ops: QuillDeltaOp[] = [];
 	// Accumulator for current run of identically-formatted text
 	let text = "";
-	let attrs: Record<string, unknown> = {};
+	let previousAttributes: Record<string, unknown> = {};
 	// JSON key for current attributes, used for equality comparison
 	// TODO:Performance: implement faster equality check.
 	let key = "";
@@ -236,7 +295,7 @@ function buildDeltaFromTree(root: FormattedTextAsTree.Tree): QuillDeltaOp[] {
 	const pushRun = (): void => {
 		if (!text) return;
 		const op: QuillDeltaOp = { insert: text };
-		if (Object.keys(attrs).length > 0) op.attributes = attrs;
+		if (Object.keys(previousAttributes).length > 0) op.attributes = previousAttributes;
 		ops.push(op);
 	};
 
@@ -244,19 +303,35 @@ function buildDeltaFromTree(root: FormattedTextAsTree.Tree): QuillDeltaOp[] {
 	// 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
+		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 = atom.content.content;
-			attrs = a;
-			key = k;
+			text = "";
+			key = "";
+			const op: QuillDeltaOp = { 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();
 
@@ -280,7 +355,7 @@ function buildDeltaFromTree(root: FormattedTextAsTree.Tree): QuillDeltaOp[] {
  * to make targeted edits (insert at index, delete range, format range) rather
  * than replacing all content on each change.
  */
-const FormattedTextEditorView = React.forwardRef<
+const FormattedTextEditorView = forwardRef<
 	FormattedEditorHandle,
 	{
 		root: PropTreeNode<FormattedTextAsTree.Tree>;
@@ -290,26 +365,26 @@ const FormattedTextEditorView = React.forwardRef<
 	// 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<HTMLDivElement>(null);
+	const editorRef = useRef<HTMLDivElement>(null);
 	// Quill instance, persisted across renders to avoid re-initialization
-	const quillRef = React.useRef<Quill | null>(null);
+	const quillRef = useRef<Quill | null>(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<HTMLElement | undefined>(
+	const [undoRedoContainer, setUndoRedoContainer] = useState<HTMLElement | undefined>(
 		undefined,
 	);
 	// Force re-render when undo/redo state changes
-	const [, forceUpdate] = React.useReducer((x: number) => x + 1, 0);
+	const [, forceUpdate] = useReducer((x: number) => 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, {
 			theme: "snow",
@@ -320,6 +395,8 @@ const FormattedTextEditorView = React.forwardRef<
 					["bold", "italic", "underline"],
 					[{ size: ["small", false, "large", "huge"] }],
 					[{ font: [] }],
+					[{ header: [1, 2, 3, 4, 5, false] }],
+					[{ list: "bullet" }],
 					["clean"],
 				],
 				clipboard: [Node.ELEMENT_NODE, clipboardFormatMatcher],
@@ -369,7 +446,39 @@ const FormattedTextEditorView = React.forwardRef<
 						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;
@@ -383,11 +492,16 @@ const FormattedTextEditorView = React.forwardRef<
 						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);
+						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
@@ -420,7 +534,7 @@ const FormattedTextEditorView = React.forwardRef<
 
 	// 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) return;
@@ -451,7 +565,7 @@ const FormattedTextEditorView = React.forwardRef<
 	}, [root]);
 
 	// Subscribe to undo/redo state changes to update button disabled state
-	React.useEffect(() => {
+	useEffect(() => {
 		if (!undoRedo) return;
 		return undoRedo.onStateChange(() => {
 			forceUpdate();
@@ -491,6 +605,10 @@ const FormattedTextEditorView = React.forwardRef<
 				.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; }
 			`}</style>
 			<h2 style={{ margin: "10px 0" }}>Collaborative Formatted Text Editor</h2>
 			<div

package/src/text/plain/plainTextView.tsx

@@ -4,7 +4,7 @@
  */
 
 import type { TextAsTree } from "@fluidframework/tree/internal";
-import * as React from "react";
+import { type ChangeEvent, type FC, useCallback, useRef } from "react";
 
 import { withMemoizedTreeObservations } from "../../useTree.js";
 
@@ -17,7 +17,7 @@ import type { MainViewProps } from "./quillView.js";
  * Uses {@link @fluidframework/tree#TextAsTree.Tree} for the data-model and an HTML textarea for the UI.
  * @internal
  */
-export const MainView: React.FC<MainViewProps> = ({ root }) => {
+export const MainView: FC<MainViewProps> = ({ root }) => {
 	return <PlainTextEditorView root={root} />;
 };
 
@@ -32,17 +32,17 @@ export const MainView: React.FC<MainViewProps> = ({ root }) => {
 const PlainTextEditorView = withMemoizedTreeObservations(
 	({ root }: { root: TextAsTree.Tree }) => {
 		// Reference to the textarea element
-		const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+		const textareaRef = useRef<HTMLTextAreaElement>(null);
 		// Guards against update loops between textarea and the tree
-		const isUpdatingRef = React.useRef<boolean>(false);
+		const isUpdatingRef = useRef<boolean>(false);
 
 		// Access tree content during render to establish observation.
 		// The HOC will automatically re-render when this content changes.
 		const currentText = root.fullString();
 
 		// Handle textarea changes - sync textarea → tree
-		const handleChange = React.useCallback(
-			(event: React.ChangeEvent<HTMLTextAreaElement>) => {
+		const handleChange = useCallback(
+			(event: ChangeEvent<HTMLTextAreaElement>) => {
 				if (isUpdatingRef.current) {
 					return;
 				}

package/src/text/plain/quillView.tsx

@@ -5,7 +5,7 @@
 
 import type { TextAsTree } from "@fluidframework/tree/internal";
 import Quill from "quill";
-import * as React from "react";
+import { type FC, useEffect, useRef } from "react";
 
 import type { PropTreeNode } from "../../propNode.js";
 import { withMemoizedTreeObservations } from "../../useTree.js";
@@ -26,7 +26,7 @@ export interface MainViewProps {
  * Uses {@link @fluidframework/tree#TextAsTree.Tree} for the data-model and Quill for the UI.
  * @internal
  */
-export const MainView: React.FC<MainViewProps> = ({ root }) => {
+export const MainView: FC<MainViewProps> = ({ root }) => {
 	return <TextEditorView root={root} />;
 };
 
@@ -40,18 +40,18 @@ export const MainView: React.FC<MainViewProps> = ({ root }) => {
  */
 const TextEditorView = withMemoizedTreeObservations(({ root }: { root: TextAsTree.Tree }) => {
 	// DOM element where Quill will mount its editor
-	const editorRef = React.useRef<HTMLDivElement>(null);
+	const editorRef = useRef<HTMLDivElement>(null);
 	// Quill instance, persisted across renders to avoid re-initialization
-	const quillRef = React.useRef<Quill | null>(null);
+	const quillRef = useRef<Quill | null>(null);
 	// Guards against update loops between Quill and the tree
-	const isUpdatingRef = React.useRef<boolean>(false);
+	const isUpdatingRef = useRef<boolean>(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(() => {
+	useEffect(() => {
 		if (editorRef.current && !quillRef.current) {
 			const quill = new Quill(editorRef.current, {
 				placeholder: "Start typing...",

package/src/useObservation.ts

@@ -3,7 +3,7 @@
  * Licensed under the MIT License.
  */
 
-import * as React from "react";
+import { useEffect, useState } from "react";
 
 /**
  * Tracks and subscriptions from the latests render of a given instance of the {@link useObservation} hook.
@@ -68,7 +68,7 @@ export function useObservation<TResult>(
 	options?: ObservationOptions,
 ): TResult {
 	// Use a React state hook to invalidate this component something tracked by `trackDuring` changes.
-	const [subscriptions, setSubscriptions] = React.useState<SubscriptionsWrapper>(
+	const [subscriptions, setSubscriptions] = useState<SubscriptionsWrapper>(
 		new SubscriptionsWrapper(),
 	);
 
@@ -115,7 +115,7 @@ export function useObservation<TResult>(
 	// Suppressing that invalidation bug with an extra call to setSubscriptions could work, but would produce incorrect warnings about leaks,
 	// and might cause infinite rerender depending on how StrictMode works.
 	// Such an Effect would look like this:
-	// React.useEffect(
+	// useEffect(
 	// 	() => () => {
 	// 		subscriptions.unsubscribe?.();
 	// 		subscriptions.unsubscribe = undefined;
@@ -179,11 +179,11 @@ function useObservationPure<TResult>(
 	options?: ObservationPureOptions,
 ): TResult {
 	// Dummy state used to trigger invalidations.
-	const [_subscriptions, setSubscriptions] = React.useState(0);
+	const [_subscriptions, setSubscriptions] = useState(0);
 
 	const { result, subscribe } = trackDuring();
 
-	React.useEffect(() => {
+	useEffect(() => {
 		// Subscribe to events from the latest render
 
 		const invalidate = (): void => {
@@ -363,7 +363,7 @@ export function useObservationStrict<TResult>(
 ): TResult {
 	// Used to unsubscribe from the previous render's subscriptions.
 	// See `useObservation` for a more documented explanation of this pattern.
-	const [subscriptions] = React.useState<{
+	const [subscriptions] = useState<{
 		previousTracker: SubscriptionTracker | undefined;
 	}>({ previousTracker: undefined });
 

package/src/useTree.ts

@@ -6,7 +6,14 @@
 import type { TreeLeafValue, TreeNode } from "@fluidframework/tree";
 import { Tree } from "@fluidframework/tree";
 import { TreeAlpha } from "@fluidframework/tree/internal";
-import * as React from "react";
+import {
+	type FC,
+	memo,
+	type MemoExoticComponent,
+	type ReactNode,
+	useEffect,
+	useState,
+} from "react";
 
 import {
 	unwrapPropTreeNode,
@@ -29,10 +36,10 @@ import { useObservation, type ObservationOptions } from "./useObservation.js";
 export function useTree(subtreeRoot: TreeNode): number {
 	// Use a React effect hook to invalidate this component when the subtreeRoot changes.
 	// We do this by incrementing a counter, which is passed as a dependency to the effect hook.
-	const [invalidations, setInvalidations] = React.useState(0);
+	const [invalidations, setInvalidations] = useState(0);
 
 	// React effect hook that increments the 'invalidation' counter whenever subtreeRoot or any of its children change.
-	React.useEffect(() => {
+	useEffect(() => {
 		// Returns the cleanup function to be invoked when the component unmounts.
 		return Tree.on(subtreeRoot, "treeChanged", () => {
 			setInvalidations((i) => i + 1);
@@ -52,31 +59,31 @@ export function useTree(subtreeRoot: TreeNode): number {
  * It is recommended that sub-components which take in TreeNodes, if not defined using this higher order components, take the nodes in as {@link PropTreeNode}s.
  * Components defined using this higher order component can take in either raw TreeNodes or {@link PropTreeNode}s: the latter will be automatically unwrapped.
  * @privateRemarks
- * `React.FC` does not seem to be covariant over its input type, so to make use of this more ergonomic,
+ * `FC` does not seem to be covariant over its input type, so to make use of this more ergonomic,
  * the return type intersects the various ways this could be used (with or without PropTreeNode wrapping).
  * @alpha
  */
 export function withTreeObservations<TIn>(
-	component: React.FC<TIn>,
+	component: FC<TIn>,
 	options?: ObservationOptions,
-): React.FC<TIn> & React.FC<WrapNodes<TIn>> & React.FC<TIn | WrapNodes<TIn>> {
-	return (props: TIn | WrapNodes<TIn>): React.ReactNode =>
+): FC<TIn> & FC<WrapNodes<TIn>> & FC<TIn | WrapNodes<TIn>> {
+	return (props: TIn | WrapNodes<TIn>): ReactNode =>
 		useTreeObservations(() => component(props as TIn), options);
 }
 
 /**
- * {@link withTreeObservations} wrapped with React.memo.
+ * {@link withTreeObservations} wrapped with memo.
  * @remarks
  * There is no special logic here, just a convenience wrapper.
  * @alpha
  */
 export function withMemoizedTreeObservations<TIn>(
-	component: React.FC<TIn>,
+	component: FC<TIn>,
 	options?: ObservationOptions & {
-		readonly propsAreEqual?: Parameters<typeof React.memo>[1];
+		readonly propsAreEqual?: Parameters<typeof memo>[1];
 	},
-): React.MemoExoticComponent<ReturnType<typeof withTreeObservations<TIn>>> {
-	return React.memo(withTreeObservations(component, options), options?.propsAreEqual);
+): MemoExoticComponent<ReturnType<typeof withTreeObservations<TIn>>> {
+	return memo(withTreeObservations(component, options), options?.propsAreEqual);
 }
 
 /**