File reorganization an code cleanup

Author: brrichards

examples/data-objects/text-editor/src/app.tsx

@@ -156,11 +156,26 @@ async function initFluid(): Promise<DualUserViews> {
 	}
 }
 
-const viewLabels: Record<ViewType, string> = {
-	plainTextarea: "Plain Textarea",
-	plainQuill: "Plain Quill",
-	formatted: "Formatted Quill",
-};
+const viewLabels = {
+	plainTextarea: {
+		description: "Plain Textarea",
+		component: (root: TextEditorRoot) => (
+			<PlainTextMainView root={toPropTreeNode(root.plainText)} />
+		),
+	},
+	plainQuill: {
+		description: "Plain Quill Editor",
+		component: (root: TextEditorRoot) => (
+			<PlainQuillView root={toPropTreeNode(root.plainText)} />
+		),
+	},
+	formatted: {
+		description: "Formatted Quill Editor",
+		component: (root: TextEditorRoot) => (
+			<FormattedMainView root={toPropTreeNode(root.formattedText)} />
+		),
+	},
+} as const;
 
 const UserPanel: React.FC<{
 	label: string;
@@ -169,17 +184,8 @@ const UserPanel: React.FC<{
 	treeView: TreeView<typeof TextEditorRoot>;
 }> = ({ label, color, viewType, treeView }) => {
 	const renderView = (): JSX.Element => {
-		switch (viewType) {
-			case "plainTextarea": {
-				return <PlainTextMainView root={toPropTreeNode(treeView.root.plainText)} />;
-			}
-			case "plainQuill": {
-				return <PlainQuillView root={toPropTreeNode(treeView.root.plainText)} />;
-			}
-			default: {
-				return <FormattedMainView root={toPropTreeNode(treeView.root.formattedText)} />;
-			}
-		}
+		const root = treeView.root;
+		return viewLabels[viewType].component(root);
 	};
 
 	return (
@@ -238,7 +244,7 @@ const App: React.FC<{ views: DualUserViews }> = ({ views }) => {
 				>
 					{(Object.keys(viewLabels) as ViewType[]).map((type) => (
 						<option key={type} value={type}>
-							{viewLabels[type]}
+							{viewLabels[type].description}
 						</option>
 					))}
 				</select>

examples/data-objects/text-editor/src/formatted/formattedSchema.ts

@@ -3,6 +3,9 @@
  * Licensed under the MIT License.
  */
 
-export { FormattedTextAsTree, formattedTreeConfiguration } from "./formattedSchema.js";
-export { FormattedTextEditorFactory } from "./formattedTextEditorFactory.js";
-export { FormattedMainView, type FormattedMainViewProps } from "./quillFormattedView.js";
+export {
+	FormattedTextAsTree,
+	FormattedTextEditorFactory,
+	FormattedMainView,
+	type FormattedMainViewProps,
+} from "./quillFormattedView.js";

examples/data-objects/text-editor/src/formatted/formattedTextEditorFactory.ts

@@ -4,35 +4,44 @@
  */
 
 import { type PropTreeNode, unwrapPropTreeNode } from "@fluidframework/react/alpha";
-import { Tree } from "@fluidframework/tree";
+// eslint-disable-next-line import-x/no-internal-modules
+import { treeDataObjectInternal } from "@fluidframework/react/internal";
+import { Tree, TreeViewConfiguration } from "@fluidframework/tree";
+// eslint-disable-next-line import-x/no-internal-modules
+import { FormattedTextAsTree } from "@fluidframework/tree/internal";
+// eslint-disable-next-line import-x/no-internal-modules
+export { FormattedTextAsTree } from "@fluidframework/tree/internal";
 import Quill from "quill";
 import Delta from "quill-delta";
 import * as React from "react";
 
-import { FormattedTextAsTree } from "./formattedSchema.js";
+export const FormattedTextEditorFactory = treeDataObjectInternal(
+	new TreeViewConfiguration({ schema: FormattedTextAsTree.Tree }),
+	() => FormattedTextAsTree.Tree.fromString(""),
+).factory;
 
 /**
  * Represents a single operation in a Quill Delta.
  * Deltas describe changes to document content as a sequence of operations.
  */
 interface QuillDeltaOp {
-	// Text or embed object to insert at current position
+	/** Text or embed object to insert at current position. */
 	insert?: string | Record<string, unknown>;
-	// Number of characters to delete at current position
+	/** Number of characters to delete at current position. */
 	delete?: number;
-	// Number of characters to keep/skip, optionally applying attributes
+	/** Number of characters to keep/skip, optionally applying attributes. */
 	retain?: number;
-	// Formatting attributes (bold, italic, size, etc.) for insert/retain ops
+	/** Formatting attributes (bold, italic, size, etc.) for insert/retain ops. */
 	attributes?: Record<string, unknown>;
 }
 
-// Represents a Quill Delta
+/** Represents a Quill Delta. */
 interface QuillDelta {
-	// Sequence of operations that make up this delta
+	/** Sequence of operations that make up this delta. */
 	ops?: QuillDeltaOp[];
 }
 
-// Props for the FormattedMainView component.
+/** Props for the FormattedMainView component. */
 export interface FormattedMainViewProps {
 	root: PropTreeNode<FormattedTextAsTree.Tree>;
 }
@@ -41,25 +50,25 @@ export const FormattedMainView: React.FC<FormattedMainViewProps> = ({ root }) =>
 	return <FormattedTextEditorView root={root} />;
 };
 
-// Quill size names mapped to pixel values for tree storage
-const SIZE_MAP: Record<string, number> = { small: 10, large: 18, huge: 24 };
-// Reverse mapping: pixel values back to Quill size names for display
-const SIZE_REVERSE: Record<number, string> = { 10: "small", 18: "large", 24: "huge" };
-// Default formatting values when no explicit format is specified
-const DEFAULT_SIZE = 12;
-const DEFAULT_FONT = "Arial";
+/** Quill size names mapped to pixel values for tree storage. */
+const sizeMap = { small: 10, large: 18, huge: 24 } as const;
+/** Reverse mapping: pixel values back to Quill size names for display. */
+const sizeReverse = { 10: "small", 18: "large", 24: "huge" } as const;
+/** Default formatting values when no explicit format is specified. */
+const defaultSize = 12;
+/** Default font when no explicit font is specified. */
+const defaultFont = "Arial";
 
 /**
  * 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: unknown): number {
 	if (typeof size === "number") return size;
-	if (typeof size === "string") {
-		// Try named size first, then parse as number, fallback to default
-		return SIZE_MAP[size] ?? (Number.parseInt(size, 10) || DEFAULT_SIZE);
+	if (size === "small" || size === "large" || size === "huge") {
+		return sizeMap[size];
 	}
-	return DEFAULT_SIZE;
+	return defaultSize;
 }
 
 /**
@@ -79,7 +88,7 @@ function quillAttrsToFormat(attrs?: Record<string, unknown>): {
 		italic: attrs?.italic === true,
 		underline: attrs?.underline === true,
 		size: parseSize(attrs?.size),
-		font: typeof attrs?.font === "string" ? attrs.font : DEFAULT_FONT,
+		font: typeof attrs?.font === "string" ? attrs.font : defaultFont,
 	};
 }
 
@@ -99,8 +108,7 @@ function quillAttrsToPartial(
 	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 : DEFAULT_FONT;
+	if ("font" in attrs) format.font = typeof attrs.font === "string" ? attrs.font : defaultFont;
 	return format;
 }
 
@@ -117,11 +125,11 @@ function formatToQuillAttrs(
 	if (format.bold) attrs.bold = true;
 	if (format.italic) attrs.italic = true;
 	if (format.underline) attrs.underline = true;
-	if (format.size !== DEFAULT_SIZE) {
+	if (format.size !== defaultSize) {
 		// Convert pixel value back to Quill size name if possible
-		attrs.size = SIZE_REVERSE[format.size] ?? `${format.size}px`;
+		attrs.size = sizeReverse[format.size] ?? `${format.size}px`;
 	}
-	if (format.font !== DEFAULT_FONT) attrs.font = format.font;
+	if (format.font !== defaultFont) attrs.font = format.font;
 	return attrs;
 }
 

examples/data-objects/text-editor/src/formatted/index.ts

@@ -7,11 +7,6 @@ import { ContainerViewRuntimeFactory } from "@fluid-example/example-utils";
 import type { IReactTreeDataObject } from "@fluidframework/react/alpha";
 import * as React from "react";
 
-import {
-	type FormattedTextAsTree,
-	FormattedTextEditorFactory,
-	FormattedMainView,
-} from "./formatted/index.js";
 import {
 	type TextAsTree,
 	TextEditorFactory,
@@ -22,13 +17,13 @@ import {
 
 /**
  * Injected by webpack DefinePlugin.
- * Set via --env view=quill, --env view=plaintext, or --env view=formatted
+ * Set via --env view=quill or --env view=plaintext
  */
-declare const __FLUID_VIEW__: "quill" | "plaintext" | "formatted";
+declare const __FLUID_VIEW__: "quill" | "plaintext";
 
 /**
  * Get the view component based on webpack build configuration.
- * Set via --env view=quill, --env view=plaintext, or --env view=formatted
+ * Set via --env view=quill or --env view=plaintext
  */
 function getViewComponent(): React.FC<MainViewProps> {
 	if (__FLUID_VIEW__ === "plaintext") {
@@ -42,17 +37,6 @@ function getViewComponent(): React.FC<MainViewProps> {
  */
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function createFluidExport() {
-	if (__FLUID_VIEW__ === "formatted") {
-		return new ContainerViewRuntimeFactory(
-			FormattedTextEditorFactory,
-			(tree: IReactTreeDataObject<typeof FormattedTextAsTree.Tree>) => {
-				return React.createElement(tree.TreeViewComponent, {
-					viewComponent: FormattedMainView,
-				});
-			},
-		);
-	}
-
 	return new ContainerViewRuntimeFactory(
 		TextEditorFactory,
 		(tree: IReactTreeDataObject<typeof TextAsTree.Tree>) => {

examples/data-objects/text-editor/src/formatted/quillFormattedView.tsx

@@ -12,11 +12,13 @@ import { independentView } from "@fluidframework/tree/internal";
 import { render } from "@testing-library/react";
 import * as React from "react";
 
-import { FormattedTextAsTree } from "../formatted/formattedSchema.js";
-import { FormattedMainView } from "../formatted/quillFormattedView.js";
-import { MainView as PlainTextMainView } from "../plain/plainTextView.js";
-import { MainView as QuillMainView, type MainViewProps } from "../plain/quillView.js";
-import { TextAsTree } from "../plain/schema.js";
+import { FormattedTextAsTree, FormattedMainView } from "../formatted/quillFormattedView.js";
+import {
+	PlainTextMainView,
+	QuillMainView,
+	TextAsTree,
+	type MainViewProps,
+} from "../plain/index.js";
 
 // Configuration for creating formatted text views
 const formattedTreeConfig = new TreeViewConfiguration({ schema: FormattedTextAsTree.Tree });