resolve dom on import issue by moving quill components into their own package (#26676)

# Summary

Quill in the react package was polluting all users of that package with
a need to have a dom on import time. Now the quill specific imports that
caused this have been moved to the new package at
`/packages/framework/quill-react`.

Moved `quillFormattedView.tsx`, `quillView.tsx`, and `mochaHooks` to new
package. Left `plainTextView.tsx` in the react package as it did not
contain any quill components. Separated the plain text tests from quill
view tests when moving them over to the new package.

Removed the inventory-app JSDOM fix needed when importing
`@fluidframework/react/internal` when it still had quill components.

Created `.changeset` with reasoning for why the package was created.

#### Breaking Change

Anyone importing quill components from `@fluidframework/react/internal`
will now have to import from `@fluidframework/react/quill-react`. Since
this is still internal and only used in text-editor, which has been
updated with new path, this should be fine.

---------

Co-authored-by: Alex Villarreal <716334+alexvy86@users.noreply.github.com>

Author: brrichards

PACKAGES.md

@@ -105,7 +105,7 @@ The dependencies between layers are enforced by the layer-check command._
 
 | Packages | Layer Dependencies |
 | --- | --- |
-| - [@fluid-experimental/data-objects](/experimental/framework/data-objects)</br>- [@fluid-experimental/property-changeset](/experimental/PropertyDDS/packages/property-changeset)</br>- [@fluid-experimental/property-common](/experimental/PropertyDDS/packages/property-common)</br>- [@fluid-internal/platform-dependent](/experimental/PropertyDDS/packages/property-common/platform-dependent) (private)</br>- [@fluid-experimental/property-dds](/experimental/PropertyDDS/packages/property-dds)</br>- [@fluid-experimental/property-properties](/experimental/PropertyDDS/packages/property-properties)</br>- [@fluid-experimental/last-edited](/experimental/framework/last-edited)</br>- [@fluidframework/agent-scheduler](/packages/framework/agent-scheduler)</br>- [@fluidframework/aqueduct](/packages/framework/aqueduct)</br>- [@fluid-experimental/attributor](/packages/framework/attributor)</br>- [@fluidframework/app-insights-logger](/packages/framework/client-logger/app-insights-logger)</br>- [@fluidframework/fluid-telemetry](/packages/framework/client-logger/fluid-telemetry)</br>- [@fluid-experimental/data-object-base](/packages/framework/data-object-base)</br>- [@fluid-experimental/dds-interceptions](/packages/framework/dds-interceptions)</br>- [@fluidframework/fluid-static](/packages/framework/fluid-static)</br>- [@fluid-experimental/oldest-client-observer](/packages/framework/oldest-client-observer)</br>- [@fluidframework/presence](/packages/framework/presence)</br>- [@fluidframework/react](/packages/framework/react)</br>- [@fluidframework/request-handler](/packages/framework/request-handler)</br>- [@fluidframework/synthesize](/packages/framework/synthesize)</br>- [@fluidframework/tree-agent](/packages/framework/tree-agent)</br>- [@fluidframework/tree-agent-langchain](/packages/framework/tree-agent-langchain)</br>- [@fluidframework/tree-agent-ses](/packages/framework/tree-agent-ses)</br>- [@fluidframework/undo-redo](/packages/framework/undo-redo) | - [Core-Interfaces](#Core-Interfaces)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Container-Definitions](#Container-Definitions)</br>- [Core-Utils](#Core-Utils)</br>- [Client-Utils](#Client-Utils)</br>- [Telemetry-Utils](#Telemetry-Utils)</br>- [Loader](#Loader)</br>- [Runtime](#Runtime)</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp; |
+| - [@fluid-experimental/data-objects](/experimental/framework/data-objects)</br>- [@fluid-experimental/property-changeset](/experimental/PropertyDDS/packages/property-changeset)</br>- [@fluid-experimental/property-common](/experimental/PropertyDDS/packages/property-common)</br>- [@fluid-internal/platform-dependent](/experimental/PropertyDDS/packages/property-common/platform-dependent) (private)</br>- [@fluid-experimental/property-dds](/experimental/PropertyDDS/packages/property-dds)</br>- [@fluid-experimental/property-properties](/experimental/PropertyDDS/packages/property-properties)</br>- [@fluid-experimental/last-edited](/experimental/framework/last-edited)</br>- [@fluidframework/agent-scheduler](/packages/framework/agent-scheduler)</br>- [@fluidframework/aqueduct](/packages/framework/aqueduct)</br>- [@fluid-experimental/attributor](/packages/framework/attributor)</br>- [@fluidframework/app-insights-logger](/packages/framework/client-logger/app-insights-logger)</br>- [@fluidframework/fluid-telemetry](/packages/framework/client-logger/fluid-telemetry)</br>- [@fluid-experimental/data-object-base](/packages/framework/data-object-base)</br>- [@fluid-experimental/dds-interceptions](/packages/framework/dds-interceptions)</br>- [@fluidframework/fluid-static](/packages/framework/fluid-static)</br>- [@fluid-experimental/oldest-client-observer](/packages/framework/oldest-client-observer)</br>- [@fluidframework/presence](/packages/framework/presence)</br>- [@fluidframework/quill-react](/packages/framework/quill-react)</br>- [@fluidframework/react](/packages/framework/react)</br>- [@fluidframework/request-handler](/packages/framework/request-handler)</br>- [@fluidframework/synthesize](/packages/framework/synthesize)</br>- [@fluidframework/tree-agent](/packages/framework/tree-agent)</br>- [@fluidframework/tree-agent-langchain](/packages/framework/tree-agent-langchain)</br>- [@fluidframework/tree-agent-ses](/packages/framework/tree-agent-ses)</br>- [@fluidframework/undo-redo](/packages/framework/undo-redo) | - [Core-Interfaces](#Core-Interfaces)</br>- [Driver-Definitions](#Driver-Definitions)</br>- [Container-Definitions](#Container-Definitions)</br>- [Core-Utils](#Core-Utils)</br>- [Client-Utils](#Client-Utils)</br>- [Telemetry-Utils](#Telemetry-Utils)</br>- [Loader](#Loader)</br>- [Runtime](#Runtime)</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp;</br>&nbsp; |
 
 ### Build
 

examples/data-objects/inventory-app/.mocharc.cjs

@@ -12,8 +12,4 @@ const config = getFluidTestMochaConfig(__dirname);
 // AB#7856
 config.exit = true;
 
-// Set up JSDOM before Quill is imported (Quill requires document at import time)
-config["node-option"] ??= [];
-config["node-option"].push("import=./lib/test/mochaHooks.js");
-
 module.exports = config;

examples/data-objects/inventory-app/src/test/mochaHooks.ts

@@ -38,6 +38,7 @@
 	"dependencies": {
 		"@fluid-example/example-utils": "workspace:~",
 		"@fluidframework/azure-client": "workspace:~",
+		"@fluidframework/quill-react": "workspace:~",
 		"@fluidframework/react": "workspace:~",
 		"@fluidframework/test-runtime-utils": "workspace:~",
 		"@fluidframework/tree": "workspace:~",

examples/data-objects/text-editor/package.json

@@ -6,12 +6,18 @@
 import { AzureClient, type AzureLocalConnectionConfig } from "@fluidframework/azure-client";
 import { createDevtoolsLogger, initializeDevtools } from "@fluidframework/devtools/beta";
 import {
-	toPropTreeNode,
 	FormattedMainView,
-	PlainTextMainView,
-	PlainQuillView,
+	QuillMainView as PlainQuillView,
+	// TODO: These imports use /internal entrypoints because the underlying APIs
+	// haven't been promoted to public yet. Update to public entrypoints as the
+	// APIs are stabalized.
+	// eslint-disable-next-line import-x/no-internal-modules
+} from "@fluidframework/quill-react/internal";
+import {
+	toPropTreeNode,
 	UndoRedoStacks,
 	type UndoRedo,
+	PlainTextMainView,
 	// eslint-disable-next-line import-x/no-internal-modules
 } from "@fluidframework/react/internal";
 /**

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

@@ -31,6 +31,7 @@
 @fluidframework/synthesize
 @fluidframework/request-handler
 @fluidframework/react
+@fluidframework/quill-react
 @fluidframework/presence
 @fluid-experimental/oldest-client-observer
 @fluidframework/fluid-static

feeds/internal-build.txt

@@ -37,6 +37,7 @@
 @fluidframework/synthesize
 @fluidframework/request-handler
 @fluidframework/react
+@fluidframework/quill-react
 @fluidframework/presence
 @fluid-experimental/oldest-client-observer
 @fluidframework/fluid-static

feeds/internal-test.txt

@@ -30,6 +30,7 @@
 @fluidframework/synthesize
 @fluidframework/request-handler
 @fluidframework/react
+@fluidframework/quill-react
 @fluidframework/presence
 @fluid-experimental/oldest-client-observer
 @fluidframework/fluid-static

feeds/public.txt

@@ -453,6 +453,7 @@ module.exports = {
 				"^build-tools/",
 				"^common/build/",
 				"^experimental/PropertyDDS/",
+				"^packages/framework/quill-react/",
 				"^tools/api-markdown-documenter/",
 			],
 			"npm-package-exports-field": [

fluidBuild.config.cjs

@@ -0,0 +1,15 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+"use strict";
+
+const getFluidTestMochaConfig = require("@fluid-internal/mocha-test-setup/mocharc-common");
+
+const config = getFluidTestMochaConfig(__dirname);
+// TODO: figure out why this package needs the --exit flag, tests might not be cleaning up correctly after themselves.
+// AB#7856
+config.exit = true;
+
+module.exports = config;