@fluidframework/react 2.90.0 → 2.92.0

package/src/text/index.ts

@@ -3,13 +3,6 @@
  * Licensed under the MIT License.
  */
 
-export {
-	FormattedMainView,
-	type FormattedMainViewProps,
-	type FormattedEditorHandle,
-} from "./formatted/index.js";
-export {
-	PlainTextMainView,
-	QuillMainView as PlainQuillView,
-	type MainViewProps as PlainMainViewProps,
-} from "./plain/index.js";
+export { type PropTreeNode } from "../propNode.js";
+export { type UndoRedo } from "../undoRedo.js";
+export { PlainTextMainView, syncTextToTree } from "./plain/index.js";

package/src/text/plain/index.ts

@@ -4,4 +4,4 @@
  */
 
 export { MainView as PlainTextMainView } from "./plainTextView.js";
-export { MainView as QuillMainView, type MainViewProps } from "./quillView.js";
+export { syncTextToTree } from "./plainUtils.js";

package/src/text/plain/plainTextView.tsx

@@ -4,12 +4,12 @@
  */
 
 import type { TextAsTree } from "@fluidframework/tree/internal";
-import * as React from "react";
+import { type ChangeEvent, type FC, useCallback, useRef } from "react";
 
+import type { PropTreeNode } from "../../propNode.js";
 import { withMemoizedTreeObservations } from "../../useTree.js";
 
 import { syncTextToTree } from "./plainUtils.js";
-import type { MainViewProps } from "./quillView.js";
 
 /**
  * A React component for plain text editing.
@@ -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<{ root: PropTreeNode<TextAsTree.Tree> }> = ({ 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/plainUtils.ts

@@ -7,6 +7,7 @@ import type { TextAsTree } from "@fluidframework/tree/internal";
 
 /**
  * Sync `newText` into the provided `root` tree.
+ * @internal
  */
 export function syncTextToTree(root: TextAsTree.Tree, newText: string): void {
 	const sync = computeSync(root.charactersCopy(), [...newText]);

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);
 }
 
 /**

package/tsconfig.json

@@ -9,11 +9,5 @@
 		"noUnusedLocals": false,
 		// ES2021 needed for FinalizationRegistry
 		"lib": ["ES2021", "DOM", "DOM.Iterable"],
-		// Suppress type errors in Quill's use of quill-delta.
-		// Without this, the quill code gives a lot of errors like:
-		// node_modules/.pnpm/quill@2.0.3/node_modules/quill/blots/block.d.ts:6:17 - error TS2709: Cannot use namespace 'Delta' as a type.
-		// These issues (and others, see imports of quill-delta) are likely related to quill-delta's export style not working well with node16 module resolution.
-		// Quill internally uses `"moduleResolution": "bundler"` which seems to work properly with quill-delta's exports, but would be inconsistent with the rest of this repo.
-		"skipLibCheck": true,
 	},
 }

package/lib/test/mochaHooks.js

@@ -1,13 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
- * Licensed under the MIT License.
- */
-import globalJsdom from "global-jsdom";
-// Set up JSDOM before any modules are loaded (Quill needs document at import time)
-const cleanup = globalJsdom();
-// Remove JSDOM after imports are done, but before we run any tests.
-// Tests which require JSDOM can call globalJsdom() to setup their own clean dom.
-before(() => {
-    cleanup();
-});
-//# sourceMappingURL=mochaHooks.js.map

package/lib/test/mochaHooks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mochaHooks.js","sourceRoot":"","sources":["../../src/test/mochaHooks.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,mFAAmF;AACnF,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;AAE9B,oEAAoE;AACpE,iFAAiF;AACjF,MAAM,CAAC,GAAG,EAAE;IACX,OAAO,EAAE,CAAC;AACX,CAAC,CAAC,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nimport globalJsdom from \"global-jsdom\";\n\n// Set up JSDOM before any modules are loaded (Quill needs document at import time)\nconst cleanup = globalJsdom();\n\n// Remove JSDOM after imports are done, but before we run any tests.\n// Tests which require JSDOM can call globalJsdom() to setup their own clean dom.\nbefore(() => {\n\tcleanup();\n});\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/text/formatted/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACN,mBAAmB,EACnB,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,GAC1B,MAAM,yBAAyB,CAAC"}

package/lib/text/formatted/index.js

@@ -1,6 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
- * Licensed under the MIT License.
- */
-export { FormattedTextAsTree, FormattedMainView, } from "./quillFormattedView.js";
-//# sourceMappingURL=index.js.map

package/lib/text/formatted/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text/formatted/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACN,mBAAmB,EACnB,iBAAiB,GAGjB,MAAM,yBAAyB,CAAC","sourcesContent":["/*!\n * Copyright (c) Microsoft Corporation and contributors. All rights reserved.\n * Licensed under the MIT License.\n */\n\nexport {\n\tFormattedTextAsTree,\n\tFormattedMainView,\n\ttype FormattedMainViewProps,\n\ttype FormattedEditorHandle,\n} from \"./quillFormattedView.js\";\n"]}

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

@@ -1,54 +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 * as React from "react";
-import { type PropTreeNode } from "../../propNode.js";
-import type { UndoRedo } from "../../undoRedo.js";
-type Delta = DeltaPackage.default;
-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: React.ForwardRefExoticComponent<FormattedMainViewProps & 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;
-//# 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;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"}