Merge branch 'master' into u/jisong/2202_2

microsoft · Feb 27, 2024 · 83c1683 · 83c1683
2 parents 22f3e84 + b8fd5f3
commit 83c1683
Show file tree

Hide file tree

Showing 40 changed files with 162 additions and 112 deletions.
diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/addUndoSnapshot.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/addUndoSnapshot.ts
@@ -11,13 +11,13 @@ import type { AddUndoSnapshot, Snapshot } from 'roosterjs-content-model-types';
  * when undo/redo to this snapshot
  */
 export const addUndoSnapshot: AddUndoSnapshot = (core, canUndoByBackspace, entityStates) => {
-    const { lifecycle, contentDiv, undo } = core;
+    const { lifecycle, physicalRoot, undo } = core;
     let snapshot: Snapshot | null = null;
 
     if (!lifecycle.shadowEditFragment) {
         // Need to create snapshot selection before retrieve innerHTML since HTML can be changed during creating selection when normalize table
         const selection = createSnapshotSelection(core);
-        const html = contentDiv.innerHTML;
+        const html = physicalRoot.innerHTML;
 
         snapshot = {
             html,

diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/attachDomEvent.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/attachDomEvent.ts
@@ -30,10 +30,10 @@ export const attachDomEvent: AttachDomEvent = (core, eventMap) => {
             }
         };
 
-        core.contentDiv.addEventListener(eventName, onEvent);
+        core.logicalRoot.addEventListener(eventName, onEvent);
 
         return () => {
-            core.contentDiv.removeEventListener(eventName, onEvent);
+            core.logicalRoot.removeEventListener(eventName, onEvent);
         };
     });
 

diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/createContentModel.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/createContentModel.ts
@@ -39,7 +39,7 @@ export const createContentModel: CreateContentModel = (core, option, selectionOv
               )
             : createDomToModelContextWithConfig(core.domToModelSettings.calculated, editorContext);
 
-        const model = domToContentModel(core.contentDiv, domToModelContext, selection);
+        const model = domToContentModel(core.logicalRoot, domToModelContext, selection);
 
         if (saveIndex) {
             core.cache.cachedModel = model;

diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/createEditorContext.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/createEditorContext.ts
@@ -6,7 +6,7 @@ import type { EditorContext, CreateEditorContext } from 'roosterjs-content-model
  * Create a EditorContext object used by ContentModel API
  */
 export const createEditorContext: CreateEditorContext = (core, saveIndex) => {
-    const { lifecycle, format, darkColorHandler, contentDiv, cache, domHelper } = core;
+    const { lifecycle, format, darkColorHandler, logicalRoot, cache, domHelper } = core;
 
     const context: EditorContext = {
         isDarkMode: lifecycle.isDarkMode,
@@ -17,10 +17,10 @@ export const createEditorContext: CreateEditorContext = (core, saveIndex) => {
         allowCacheElement: true,
         domIndexer: saveIndex ? cache.domIndexer : undefined,
         zoomScale: domHelper.calculateZoomScale(),
-        ...getRootComputedStyleForContext(contentDiv.ownerDocument),
+        ...getRootComputedStyleForContext(logicalRoot.ownerDocument),
     };
 
-    checkRootRtl(contentDiv, context);
+    checkRootRtl(logicalRoot, context);
 
     return context;
 };

diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/focus.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/focus.ts
@@ -15,7 +15,7 @@ export const focus: Focus = core => {
 
         // fallback, in case editor still have no focus
         if (!core.api.hasFocus(core)) {
-            core.contentDiv.focus();
+            core.logicalRoot.focus();
         }
     }
 };
diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/getDOMSelection.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/getDOMSelection.ts
@@ -16,10 +16,10 @@ export const getDOMSelection: GetDOMSelection = core => {
 };
 
 function getNewSelection(core: EditorCore): DOMSelection | null {
-    const selection = core.contentDiv.ownerDocument.defaultView?.getSelection();
+    const selection = core.logicalRoot.ownerDocument.defaultView?.getSelection();
     const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
 
-    return range && core.contentDiv.contains(range.commonAncestorContainer)
+    return range && core.logicalRoot.contains(range.commonAncestorContainer)
         ? {
               type: 'range',
               range,

diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/getVisibleViewport.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/getVisibleViewport.ts
@@ -9,7 +9,9 @@ export const getVisibleViewport: GetVisibleViewport = core => {
     const scrollContainer = core.domEvent.scrollContainer;
 
     return getIntersectedRect(
-        scrollContainer == core.contentDiv ? [scrollContainer] : [scrollContainer, core.contentDiv]
+        scrollContainer == core.physicalRoot
+            ? [scrollContainer]
+            : [scrollContainer, core.physicalRoot]
     );
 };
 

diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/hasFocus.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/hasFocus.ts
@@ -7,6 +7,6 @@ import type { HasFocus } from 'roosterjs-content-model-types';
  * @returns True if the editor has focus, otherwise false
  */
 export const hasFocus: HasFocus = core => {
-    const activeElement = core.contentDiv.ownerDocument.activeElement;
-    return !!(activeElement && core.contentDiv.contains(activeElement));
+    const activeElement = core.logicalRoot.ownerDocument.activeElement;
+    return !!(activeElement && core.logicalRoot.contains(activeElement));
 };
diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/paste.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/paste.ts
@@ -45,7 +45,7 @@ export const paste: Paste = (
 
     // 3. Create target fragment
     const sourceFragment = createPasteFragment(
-        core.contentDiv.ownerDocument,
+        core.physicalRoot.ownerDocument,
         clipboardData,
         pasteType,
         (clipboardData.rawHtml == clipboardData.html

diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/setContentModel.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/setContentModel.ts
@@ -26,8 +26,8 @@ export const setContentModel: SetContentModel = (core, model, option, onNodeCrea
     modelToDomContext.onNodeCreated = onNodeCreated;
 
     const selection = contentModelToDom(
-        core.contentDiv.ownerDocument,
-        core.contentDiv,
+        core.logicalRoot.ownerDocument,
+        core.logicalRoot,
         model,
         modelToDomContext
     );

diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/setDOMSelection.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/setDOMSelection.ts
@@ -23,14 +23,14 @@ export const setDOMSelection: SetDOMSelection = (core, selection, skipSelectionC
     // Set skipReselectOnFocus to skip this behavior
     const skipReselectOnFocus = core.selection.skipReselectOnFocus;
 
-    const doc = core.contentDiv.ownerDocument;
+    const doc = core.physicalRoot.ownerDocument;
     const sheet = core.selection.selectionStyleNode?.sheet;
 
     core.selection.skipReselectOnFocus = true;
 
     try {
         let selectionRules: string[] | undefined;
-        const rootSelector = '#' + addUniqueId(core.contentDiv, CONTENT_DIV_ID);
+        const rootSelector = '#' + addUniqueId(core.physicalRoot, CONTENT_DIV_ID);
 
         switch (selection?.type) {
             case 'image':

diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/switchShadowEdit.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/switchShadowEdit.ts
@@ -14,8 +14,8 @@ export const switchShadowEdit: SwitchShadowEdit = (editorCore, isOn): void => {
     if (isOn != !!core.lifecycle.shadowEditFragment) {
         if (isOn) {
             const model = !core.cache.cachedModel ? core.api.createContentModel(core) : null;
-            const fragment = core.contentDiv.ownerDocument.createDocumentFragment();
-            const clonedRoot = core.contentDiv.cloneNode(true /*deep*/);
+            const fragment = core.logicalRoot.ownerDocument.createDocumentFragment();
+            const clonedRoot = core.logicalRoot.cloneNode(true /*deep*/);
 
             moveChildNodes(fragment, clonedRoot);
 

diff --git a/packages-content-model/roosterjs-content-model-core/lib/editor/Editor.ts b/packages-content-model/roosterjs-content-model-core/lib/editor/Editor.ts
@@ -196,7 +196,7 @@ export class Editor implements IEditor {
      * @returns The HTML document which contains this editor
      */
     getDocument(): Document {
-        return this.getCore().contentDiv.ownerDocument;
+        return this.getCore().physicalRoot.ownerDocument;
     }
 
     /**
@@ -275,7 +275,7 @@ export class Editor implements IEditor {
 
         if (!!isDarkMode != core.lifecycle.isDarkMode) {
             transformColor(
-                core.contentDiv,
+                core.physicalRoot,
                 false /*includeSelf*/,
                 isDarkMode ? 'lightToDark' : 'darkToLight',
                 core.darkColorHandler

diff --git a/packages-content-model/roosterjs-content-model-core/lib/editor/createEditorCore.ts b/packages-content-model/roosterjs-content-model-core/lib/editor/createEditorCore.ts
@@ -20,7 +20,8 @@ export function createEditorCore(contentDiv: HTMLDivElement, options: EditorOpti
     const corePlugins = createEditorCorePlugins(options, contentDiv);
 
     return {
-        contentDiv,
+        physicalRoot: contentDiv,
+        logicalRoot: contentDiv,
         api: { ...coreApiMap, ...options.coreApiOverride },
         originalApi: { ...coreApiMap },
         plugins: [

diff --git a/packages-content-model/roosterjs-content-model-core/lib/utils/createSnapshotSelection.ts b/packages-content-model/roosterjs-content-model-core/lib/utils/createSnapshotSelection.ts
@@ -5,20 +5,20 @@ import type { SnapshotSelection, EditorCore } from 'roosterjs-content-model-type
  * @internal
  */
 export function createSnapshotSelection(core: EditorCore): SnapshotSelection {
-    const { contentDiv, api } = core;
+    const { physicalRoot, api } = core;
     const selection = api.getDOMSelection(core);
 
     // Normalize tables to ensure they have TBODY element between TABLE and TR so that the selection path will include correct values
     if (selection?.type == 'range') {
         const { startContainer, startOffset, endContainer, endOffset } = selection.range;
-        let isDOMChanged = normalizeTableTree(startContainer, contentDiv);
+        let isDOMChanged = normalizeTableTree(startContainer, physicalRoot);
 
         if (endContainer != startContainer) {
-            isDOMChanged = normalizeTableTree(endContainer, contentDiv) || isDOMChanged;
+            isDOMChanged = normalizeTableTree(endContainer, physicalRoot) || isDOMChanged;
         }
 
         if (isDOMChanged) {
-            const newRange = contentDiv.ownerDocument.createRange();
+            const newRange = physicalRoot.ownerDocument.createRange();
 
             newRange.setStart(startContainer, startOffset);
             newRange.setEnd(endContainer, endOffset);
@@ -56,8 +56,8 @@ export function createSnapshotSelection(core: EditorCore): SnapshotSelection {
 
             return {
                 type: 'range',
-                start: getPath(range.startContainer, range.startOffset, contentDiv),
-                end: getPath(range.endContainer, range.endOffset, contentDiv),
+                start: getPath(range.startContainer, range.startOffset, physicalRoot),
+                end: getPath(range.endContainer, range.endOffset, physicalRoot),
                 isReverted: !!selection.isReverted,
             };
 

diff --git a/packages-content-model/roosterjs-content-model-core/lib/utils/paste/mergePasteContent.ts b/packages-content-model/roosterjs-content-model-core/lib/utils/paste/mergePasteContent.ts
@@ -43,7 +43,7 @@ export function mergePasteContent(
         (model, context) => {
             const selectedSegment = getSelectedSegments(model, true /*includeFormatHolder*/)[0];
             const domToModelContext = createDomToModelContextForSanitizing(
-                core.contentDiv.ownerDocument,
+                core.physicalRoot.ownerDocument,
                 undefined /*defaultFormat*/,
                 core.domToModelSettings.customized,
                 domToModelOption

diff --git a/packages-content-model/roosterjs-content-model-core/lib/utils/restoreSnapshotColors.ts b/packages-content-model/roosterjs-content-model-core/lib/utils/restoreSnapshotColors.ts
@@ -11,7 +11,7 @@ export function restoreSnapshotColors(core: EditorCore, snapshot: Snapshot) {
 
     if (!!snapshot.isDarkMode != !!isDarkMode) {
         transformColor(
-            core.contentDiv,
+            core.physicalRoot,
             false /*includeSelf*/,
             isDarkMode ? 'lightToDark' : 'darkToLight',
             core.darkColorHandler

diff --git a/packages-content-model/roosterjs-content-model-core/lib/utils/restoreSnapshotHTML.ts b/packages-content-model/roosterjs-content-model-core/lib/utils/restoreSnapshotHTML.ts
@@ -19,10 +19,10 @@ const BlockEntityContainer = '_E_EBlockEntityContainer';
  */
 export function restoreSnapshotHTML(core: EditorCore, snapshot: Snapshot) {
     const {
-        contentDiv,
+        physicalRoot,
         entity: { entityMap },
     } = core;
-    let refNode: Node | null = contentDiv.firstChild;
+    let refNode: Node | null = physicalRoot.firstChild;
 
     const body = new DOMParser().parseFromString(
         core.trustedHTMLHandler?.(snapshot.html) ?? snapshot.html,
@@ -34,9 +34,9 @@ export function restoreSnapshotHTML(core: EditorCore, snapshot: Snapshot) {
         const originalEntityElement = tryGetEntityElement(entityMap, currentNode);
 
         if (originalEntityElement) {
-            refNode = reuseCachedElement(contentDiv, originalEntityElement, refNode);
+            refNode = reuseCachedElement(physicalRoot, originalEntityElement, refNode);
         } else {
-            contentDiv.insertBefore(currentNode, refNode);
+            physicalRoot.insertBefore(currentNode, refNode);
 
             if (isNodeOfType(currentNode, 'ELEMENT_NODE')) {
                 const childEntities = getAllEntityWrappers(currentNode);
@@ -51,7 +51,7 @@ export function restoreSnapshotHTML(core: EditorCore, snapshot: Snapshot) {
                             // Then after replaceChild(), the original refNode will be moved away
                             const markerNode = wrapper.cloneNode();
 
-                            contentDiv.insertBefore(markerNode, refNode);
+                            physicalRoot.insertBefore(markerNode, refNode);
                             refNode = markerNode;
                         }
 

diff --git a/packages-content-model/roosterjs-content-model-core/lib/utils/restoreSnapshotSelection.ts b/packages-content-model/roosterjs-content-model-core/lib/utils/restoreSnapshotSelection.ts
@@ -6,15 +6,15 @@ import type { DOMSelection, EditorCore, Snapshot } from 'roosterjs-content-model
  */
 export function restoreSnapshotSelection(core: EditorCore, snapshot: Snapshot) {
     const snapshotSelection = snapshot.selection;
-    const { contentDiv } = core;
+    const { physicalRoot } = core;
     let domSelection: DOMSelection | null = null;
 
     if (snapshotSelection) {
         switch (snapshotSelection.type) {
             case 'range':
-                const startPos = getPositionFromPath(contentDiv, snapshotSelection.start);
-                const endPos = getPositionFromPath(contentDiv, snapshotSelection.end);
-                const range = contentDiv.ownerDocument.createRange();
+                const startPos = getPositionFromPath(physicalRoot, snapshotSelection.start);
+                const endPos = getPositionFromPath(physicalRoot, snapshotSelection.end);
+                const range = physicalRoot.ownerDocument.createRange();
 
                 range.setStart(startPos.node, startPos.offset);
                 range.setEnd(endPos.node, endPos.offset);
@@ -26,7 +26,7 @@ export function restoreSnapshotSelection(core: EditorCore, snapshot: Snapshot) {
                 };
                 break;
             case 'table':
-                const table = contentDiv.querySelector(
+                const table = physicalRoot.querySelector(
                     '#' + snapshotSelection.tableId
                 ) as HTMLTableElement;
 
@@ -42,7 +42,7 @@ export function restoreSnapshotSelection(core: EditorCore, snapshot: Snapshot) {
                 }
                 break;
             case 'image':
-                const image = contentDiv.querySelector(
+                const image = physicalRoot.querySelector(
                     '#' + snapshotSelection.imageId
                 ) as HTMLImageElement;
 

diff --git a/packages-content-model/roosterjs-content-model-core/test/coreApi/addUndoSnapshotTest.ts b/packages-content-model/roosterjs-content-model-core/test/coreApi/addUndoSnapshotTest.ts
@@ -21,7 +21,8 @@ describe('addUndoSnapshot', () => {
         } as any;
 
         core = {
-            contentDiv,
+            physicalRoot: contentDiv,
+            logicalRoot: contentDiv,
             darkColorHandler: {
                 getKnownColorsCopy: getKnownColorsCopySpy,
             },

diff --git a/packages-content-model/roosterjs-content-model-core/test/coreApi/attachDomEventTest.ts b/packages-content-model/roosterjs-content-model-core/test/coreApi/attachDomEventTest.ts
@@ -9,7 +9,8 @@ describe('attachDomEvent', () => {
         div = document.createElement('div');
         document.body.appendChild(div);
         core = {
-            contentDiv: div,
+            physicalRoot: div,
+            logicalRoot: div,
             api: {},
         } as any;
     });

diff --git a/packages-content-model/roosterjs-content-model-core/test/coreApi/createContentModelTest.ts b/packages-content-model/roosterjs-content-model-core/test/coreApi/createContentModelTest.ts
@@ -34,7 +34,8 @@ describe('createContentModel', () => {
         );
 
         core = ({
-            contentDiv: mockedDiv,
+            physicalRoot: mockedDiv,
+            logicalRoot: mockedDiv,
             api: {
                 createEditorContext,
                 getDOMSelection,
@@ -99,7 +100,8 @@ describe('createContentModel with selection', () => {
         );
 
         core = {
-            contentDiv: MockedDiv,
+            physicalRoot: MockedDiv,
+            logicalRoot: MockedDiv,
             api: {
                 getDOMSelection: getDOMSelectionSpy,
                 createEditorContext: createEditorContextSpy,

diff --git a/packages-content-model/roosterjs-content-model-core/test/coreApi/createEditorContextTest.ts b/packages-content-model/roosterjs-content-model-core/test/coreApi/createEditorContextTest.ts
@@ -19,7 +19,8 @@ describe('createEditorContext', () => {
         };
 
         const core = ({
-            contentDiv: div,
+            physicalRoot: div,
+            logicalRoot: div,
             lifecycle: {
                 isDarkMode,
             },
@@ -67,7 +68,8 @@ describe('createEditorContext', () => {
         };
 
         const core = ({
-            contentDiv: div,
+            physicalRoot: div,
+            logicalRoot: div,
             lifecycle: {
                 isDarkMode,
             },
@@ -115,7 +117,8 @@ describe('createEditorContext', () => {
         };
 
         const core = ({
-            contentDiv: div,
+            physicalRoot: div,
+            logicalRoot: div,
             lifecycle: {
                 isDarkMode,
             },
@@ -167,7 +170,8 @@ describe('createEditorContext - checkZoomScale', () => {
             },
         };
         core = ({
-            contentDiv: div,
+            physicalRoot: div,
+            logicalRoot: div,
             lifecycle: {
                 isDarkMode,
             },
@@ -221,7 +225,8 @@ describe('createEditorContext - checkRootDir', () => {
             },
         };
         core = ({
-            contentDiv: div,
+            physicalRoot: div,
+            logicalRoot: div,
             lifecycle: {
                 isDarkMode,
             },