Disable using global window and document (#3240)

JiuqingSong · web-flow · commit 7112947d3673 · 2025-12-17T12:21:20.000-08:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -151,6 +151,17 @@ module.exports = {
         'no-var': 'error',
         'etc/no-const-enum': ['error', { allowLocal: true }],
         'import/no-default-export': 'error',
+        'no-restricted-globals': [
+            'error',
+            {
+                name: 'window',
+                message: 'Do not use global window',
+            },
+            {
+                name: 'document',
+                message: 'Do not use global document',
+            },
+        ],
     },
     overrides: [
         {
@@ -159,5 +170,15 @@ module.exports = {
                 'import/no-default-export': 'off',
             },
         },
+        {
+            files: [
+                'roosterjs-editor-adapter/**/*.ts',
+                'roosterjs-react/**/*.ts',
+                'roosterjs-react/**/*.tsx',
+            ],
+            rules: {
+                'no-restricted-globals': 'off',
+            },
+        },
     ],
 };
diff --git a/packages/roosterjs-content-model-core/lib/editor/Editor.ts b/packages/roosterjs-content-model-core/lib/editor/Editor.ts
@@ -225,7 +225,7 @@ export class Editor implements IEditor {
      * @returns The HTML document which contains this editor
      */
     getDocument(): Document {
-        return this.getCore().physicalRoot.ownerDocument;
+        return this.getCore().environment.document;
     }
 
     /**
diff --git a/packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts b/packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts
@@ -69,6 +69,7 @@ function createEditorEnvironment(
     const appVersion = navigator?.appVersion ?? '';
 
     return {
+        document: contentDiv.ownerDocument,
         domToModelSettings: createDomToModelSettings(options),
         modelToDomSettings: createModelToDomSettings(options),
         isMac: appVersion.indexOf('Mac') != -1,
diff --git a/packages/roosterjs-content-model-core/test/command/cutCopy/getContentForCopyTest.ts b/packages/roosterjs-content-model-core/test/command/cutCopy/getContentForCopyTest.ts
@@ -36,6 +36,7 @@ describe('getContentForCopy', () => {
             getContentModelCopy: (): ContentModelDocument => createContentModelDocument(),
             getEnvironment: (): EditorEnvironment => {
                 return {
+                    document: mockDocument,
                     isSafari: false,
                     domToModelSettings: {} as ContentModelSettings<
                         DomToModelOption,
diff --git a/packages/roosterjs-content-model-core/test/corePlugin/format/FormatPluginTest.ts b/packages/roosterjs-content-model-core/test/corePlugin/format/FormatPluginTest.ts
@@ -20,6 +20,7 @@ describe('FormatPlugin', () => {
     const mockedEnvironment = {
         domToModelSettings: createDomToModelSettings({}),
         modelToDomSettings: createModelToDomSettings({}),
+        document,
     } as EditorEnvironment;
 
     beforeEach(() => {
@@ -271,6 +272,7 @@ describe('FormatPlugin for default format', () => {
     const mockedEnvironment = {
         domToModelSettings: createDomToModelSettings({}),
         modelToDomSettings: createModelToDomSettings({}),
+        document,
     } as EditorEnvironment;
 
     beforeEach(() => {
diff --git a/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts b/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts
@@ -42,6 +42,7 @@ describe('createEditorCore', () => {
         htmlToDOM: mockedDOMHelper,
     };
     const mockedTrustHtmlHandler = 'TRUSTED' as any;
+    const mockedDocument: Document = 'DOCUMENT' as any;
 
     beforeEach(() => {
         spyOn(createEditorCorePlugins, 'createEditorCorePlugins').and.returnValue(mockedPlugins);
@@ -83,6 +84,7 @@ describe('createEditorCore', () => {
                 mockedLifeCyclePlugin,
             ],
             environment: {
+                document: mockedDocument,
                 isMac: false,
                 isAndroid: false,
                 isIOS: false,
@@ -120,7 +122,7 @@ describe('createEditorCore', () => {
 
     it('No options', () => {
         const mockedDiv = {
-            ownerDocument: {},
+            ownerDocument: mockedDocument,
             attributes: {
                 a: 'b',
             },
@@ -143,7 +145,7 @@ describe('createEditorCore', () => {
 
     it('With options', () => {
         const mockedDiv = {
-            ownerDocument: {},
+            ownerDocument: mockedDocument,
             attributes: {
                 a: 'b',
             },
@@ -201,14 +203,15 @@ describe('createEditorCore', () => {
     });
 
     it('Android', () => {
-        const mockedDiv = {
-            ownerDocument: {
-                defaultView: {
-                    navigator: {
-                        userAgent: 'Android',
-                    },
+        const mockedDocument: Document = {
+            defaultView: {
+                navigator: {
+                    userAgent: 'Android',
                 },
             },
+        } as any;
+        const mockedDiv = {
+            ownerDocument: mockedDocument,
             attributes: {
                 a: 'b',
             },
@@ -217,6 +220,7 @@ describe('createEditorCore', () => {
 
         runTest(mockedDiv, mockedOptions, {
             environment: {
+                document: mockedDocument,
                 isMac: false,
                 isAndroid: true,
                 isIOS: false,
@@ -236,14 +240,15 @@ describe('createEditorCore', () => {
     });
 
     it('Android+Safari', () => {
-        const mockedDiv = {
-            ownerDocument: {
-                defaultView: {
-                    navigator: {
-                        userAgent: 'Android AppleWebKit',
-                    },
+        const mockedDocument: Document = {
+            defaultView: {
+                navigator: {
+                    userAgent: 'Android AppleWebKit',
                 },
             },
+        } as any;
+        const mockedDiv = {
+            ownerDocument: mockedDocument,
             attributes: {
                 a: 'b',
             },
@@ -252,6 +257,7 @@ describe('createEditorCore', () => {
 
         runTest(mockedDiv, mockedOptions, {
             environment: {
+                document: mockedDocument,
                 isMac: false,
                 isAndroid: true,
                 isIOS: false,
@@ -271,14 +277,15 @@ describe('createEditorCore', () => {
     });
 
     it('Mac', () => {
-        const mockedDiv = {
-            ownerDocument: {
-                defaultView: {
-                    navigator: {
-                        appVersion: 'Mac',
-                    },
+        const mockedDocument: Document = {
+            defaultView: {
+                navigator: {
+                    appVersion: 'Mac',
                 },
             },
+        } as any;
+        const mockedDiv = {
+            ownerDocument: mockedDocument,
             attributes: {
                 a: 'b',
             },
@@ -287,6 +294,7 @@ describe('createEditorCore', () => {
 
         runTest(mockedDiv, mockedOptions, {
             environment: {
+                document: mockedDocument,
                 isMac: true,
                 isAndroid: false,
                 isIOS: false,
@@ -306,14 +314,15 @@ describe('createEditorCore', () => {
     });
 
     it('Safari', () => {
-        const mockedDiv = {
-            ownerDocument: {
-                defaultView: {
-                    navigator: {
-                        userAgent: 'AppleWebKit',
-                    },
+        const mockedDocument: Document = {
+            defaultView: {
+                navigator: {
+                    userAgent: 'AppleWebKit',
                 },
             },
+        } as any;
+        const mockedDiv = {
+            ownerDocument: mockedDocument,
             attributes: {
                 a: 'b',
             },
@@ -322,6 +331,7 @@ describe('createEditorCore', () => {
 
         runTest(mockedDiv, mockedOptions, {
             environment: {
+                document: mockedDocument,
                 isMac: false,
                 isAndroid: false,
                 isIOS: false,
@@ -341,14 +351,15 @@ describe('createEditorCore', () => {
     });
 
     it('Chrome', () => {
-        const mockedDiv = {
-            ownerDocument: {
-                defaultView: {
-                    navigator: {
-                        userAgent: 'AppleWebKit Chrome',
-                    },
+        const mockedDocument: Document = {
+            defaultView: {
+                navigator: {
+                    userAgent: 'AppleWebKit Chrome',
                 },
             },
+        } as any;
+        const mockedDiv = {
+            ownerDocument: mockedDocument,
             attributes: {
                 a: 'b',
             },
@@ -357,6 +368,7 @@ describe('createEditorCore', () => {
 
         runTest(mockedDiv, mockedOptions, {
             environment: {
+                document: mockedDocument,
                 isMac: false,
                 isAndroid: false,
                 isIOS: false,
@@ -376,15 +388,16 @@ describe('createEditorCore', () => {
     });
 
     it('iOS iPhone Safari', () => {
-        const mockedDiv = {
-            ownerDocument: {
-                defaultView: {
-                    navigator: {
-                        userAgent:
-                            'Mozilla/5.0 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148',
-                    },
+        const mockedDocument: Document = {
+            defaultView: {
+                navigator: {
+                    userAgent:
+                        'Mozilla/5.0 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148',
                 },
             },
+        } as any;
+        const mockedDiv = {
+            ownerDocument: mockedDocument,
             attributes: {
                 a: 'b',
             },
@@ -393,6 +406,7 @@ describe('createEditorCore', () => {
 
         runTest(mockedDiv, mockedOptions, {
             environment: {
+                document: mockedDocument,
                 isMac: false,
                 isAndroid: false,
                 isIOS: true,
diff --git a/packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeSegmentFormat.ts b/packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeSegmentFormat.ts
@@ -1,8 +1,8 @@
 import { createContentModelDocument } from '../creators/createContentModelDocument';
+import { createDomToModelContextWithConfig } from '../../domToModel/context/createDomToModelContext';
+import { createModelToDomContextWithConfig } from '../../modelToDom/context/createModelToDomContext';
 import { createText } from '../creators/createText';
 import { ensureParagraph } from './ensureParagraph';
-import { createModelToDomContextWithConfig } from '../../modelToDom/context/createModelToDomContext';
-import { createDomToModelContextWithConfig } from '../../domToModel/context/createDomToModelContext';
 import type {
     ContentModelSegmentFormat,
     DomToModelContext,
@@ -20,7 +20,7 @@ export function normalizeSegmentFormat(
     format: ContentModelSegmentFormat,
     environment: EditorEnvironment
 ): ContentModelSegmentFormat {
-    const span = document.createElement('span');
+    const span = environment.document.createElement('span');
     const segment = createText('text', format);
 
     const domToModelContext: DomToModelContext = createDomToModelContextWithConfig(
diff --git a/packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleImage.ts b/packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleImage.ts
@@ -14,7 +14,7 @@ export const handleImage: ContentModelSegmentHandler<ContentModelImage> = (
     segmentNodes
 ) => {
     const img = doc.createElement('img');
-    const element = document.createElement('span');
+    const element = doc.createElement('span');
 
     parent.appendChild(element);
     element.appendChild(img);
diff --git a/packages/roosterjs-content-model-dom/test/modelApi/common/normalizeSegmentFormatTest.ts b/packages/roosterjs-content-model-dom/test/modelApi/common/normalizeSegmentFormatTest.ts
@@ -14,6 +14,7 @@ describe('normalizeSegmentFormat', () => {
             modelToDomSettings: {
                 calculated: createModelToDomConfig([]),
             },
+            document: document,
         } as EditorEnvironment;
     });
 
diff --git a/packages/roosterjs-content-model-plugins/lib/autoFormat/AutoFormatPlugin.ts b/packages/roosterjs-content-model-plugins/lib/autoFormat/AutoFormatPlugin.ts
@@ -178,8 +178,12 @@ export class AutoFormatPlugin implements EditorPlugin {
                 autoMailto,
             });
 
-            if (linkSegment) {
-                return createAnchor(linkSegment.link?.format.href || '', linkSegment.text);
+            if (linkSegment && this.editor) {
+                return createAnchor(
+                    this.editor.getDocument(),
+                    linkSegment.link?.format.href || '',
+                    linkSegment.text
+                );
             }
             return false;
         },
@@ -339,8 +343,8 @@ export class AutoFormatPlugin implements EditorPlugin {
     }
 }
 
-const createAnchor = (url: string, text: string) => {
-    const anchor = document.createElement('a');
+const createAnchor = (doc: Document, url: string, text: string) => {
+    const anchor = doc.createElement('a');
     anchor.href = url;
     anchor.textContent = text;
     return anchor;
diff --git a/packages/roosterjs-content-model-plugins/lib/findReplace/FindReplacePlugin.ts b/packages/roosterjs-content-model-plugins/lib/findReplace/FindReplacePlugin.ts
@@ -47,10 +47,12 @@ export class FindReplacePlugin implements EditorPlugin {
     initialize(editor: IEditor) {
         this.editor = editor;
 
-        const win = editor.getDocument().defaultView ?? window;
+        const win = editor.getDocument().defaultView;
 
-        this.context.findHighlight.initialize(win);
-        this.context.replaceHighlight.initialize(win);
+        if (win) {
+            this.context.findHighlight.initialize(win);
+            this.context.replaceHighlight.initialize(win);
+        }
 
         this.editor.setEditorStyle(FindHighlightRuleKey, this.findHighlightStyle, [
             FindHighlightSelector,
diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/utils/generateDataURL.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/utils/generateDataURL.ts
@@ -41,10 +41,12 @@ export function generateDataURL(image: HTMLImageElement, editInfo: ImageMetadata
 
     const imageWidth = nWidth * (1 - left - right);
     const imageHeight = nHeight * (1 - top - bottom);
+    const doc = image.ownerDocument;
+    const win = doc.defaultView;
 
     // Adjust the canvas size and scaling for high display resolution
-    const devicePixelRatio = window.devicePixelRatio || 1;
-    const canvas = document.createElement('canvas');
+    const devicePixelRatio = win?.devicePixelRatio || 1;
+    const canvas = doc.createElement('canvas');
     const { targetWidth, targetHeight } = generatedImageSize;
     canvas.width = targetWidth * devicePixelRatio;
     canvas.height = targetHeight * devicePixelRatio;
diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/TableEditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/TableEditPlugin.ts
diff --git a/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.ts b/packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.ts
diff --git a/packages/roosterjs-content-model-plugins/lib/touch/TouchPlugin.ts b/packages/roosterjs-content-model-plugins/lib/touch/TouchPlugin.ts
diff --git a/packages/roosterjs-content-model-plugins/test/autoFormat/AutoFormatPluginTest.ts b/packages/roosterjs-content-model-plugins/test/autoFormat/AutoFormatPluginTest.ts
diff --git a/packages/roosterjs-content-model-types/lib/parameter/EditorEnvironment.ts b/packages/roosterjs-content-model-types/lib/parameter/EditorEnvironment.ts

Original file line number	Diff line number	Diff line change
`@@ -225,7 +225,7 @@ export class Editor implements IEditor {`
`225`	`225`	`* @returns The HTML document which contains this editor`
`226`	`226`	`*/`
`227`	`227`	`getDocument(): Document {`
`228`		`- return this.getCore().physicalRoot.ownerDocument;`
	`228`	`+ return this.getCore().environment.document;`
`229`	`229`	`}`
`230`	`230`
`231`	`231`	`/**`