Move core API to roosterjs-content-model-core package (#2198)

* Move ContentModelEdit plugin to plugins package * Move types to roosterjs-content-model-types package * improve * Improve * improve * Improve * improve * Move core API to core package * fix build * improve * fix build * fix build
microsoft · Nov 9, 2023 · c4f3b13 · c4f3b13
1 parent 54f901d
commit c4f3b13
Show file tree

Hide file tree

Showing 79 changed files with 542 additions and 504 deletions.
diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelImageView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelImageView.tsx
@@ -13,7 +13,7 @@ import { MetadataView } from '../format/MetadataView';
 import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
-import { updateImageMetadata } from 'roosterjs-content-model-editor';
+import { updateImageMetadata } from 'roosterjs-content-model-core';
 import { useProperty } from '../../hooks/useProperty';
 
 const styles = require('./ContentModelImageView.scss');

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.tsx
@@ -10,7 +10,7 @@ import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer'
 import { MetadataView } from '../format/MetadataView';
 import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';
-import { updateListMetadata } from 'roosterjs-content-model-editor';
+import { updateListMetadata } from 'roosterjs-content-model-core';
 import { useProperty } from '../../hooks/useProperty';
 import {
     ContentModelListItemLevelFormat,

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelTableCellView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelTableCellView.tsx
@@ -8,14 +8,15 @@ import { ContentModelView } from '../ContentModelView';
 import { DirectionFormatRenderer } from '../format/formatPart/DirectionFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
-import { hasSelectionInBlockGroup, updateTableCellMetadata } from 'roosterjs-content-model-editor';
+import { hasSelectionInBlockGroup } from 'roosterjs-content-model-editor';
 import { HtmlAlignFormatRenderer } from '../format/formatPart/HtmlAlignFormatRenderer';
 import { MetadataView } from '../format/MetadataView';
 import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
 import { TableCellMetadataFormatRenders } from '../format/formatPart/TableCellMetadataFormatRenders';
 import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';
 import { TextColorFormatRenderer } from '../format/formatPart/TextColorFormatRenderer';
+import { updateTableCellMetadata } from 'roosterjs-content-model-core';
 import { useProperty } from '../../hooks/useProperty';
 import { VerticalAlignFormatRenderer } from '../format/formatPart/VerticalAlignFormatRenderer';
 import { WordBreakFormatRenderer } from '../format/formatPart/WordBreakFormatRenderer';

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelTableView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelTableView.tsx
@@ -8,13 +8,14 @@ import { ContentModelView } from '../ContentModelView';
 import { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
-import { hasSelectionInBlock, updateTableMetadata } from 'roosterjs-content-model-editor';
+import { hasSelectionInBlock } from 'roosterjs-content-model-editor';
 import { IdFormatRenderer } from '../format/formatPart/IdFormatRenderer';
 import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
 import { MetadataView } from '../format/MetadataView';
 import { SpacingFormatRenderer } from '../format/formatPart/SpacingFormatRenderer';
 import { TableLayoutFormatRenderer } from '../format/formatPart/TableLayoutFormatRenderer';
 import { TableMetadataFormatRenders } from '../format/formatPart/TableMetadataFormatRenders';
+import { updateTableMetadata } from 'roosterjs-content-model-core';
 import { useProperty } from '../../hooks/useProperty';
 
 const styles = require('./ContentModelTableView.scss');

diff --git a/demo/scripts/tsconfig.json b/demo/scripts/tsconfig.json
@@ -37,6 +37,12 @@
             "roosterjs-content-model-dom/lib/*": [
                 "packages-content-model/roosterjs-content-model-dom/lib/*"
             ],
+            "roosterjs-content-model-core": [
+                "packages-content-model/roosterjs-content-model-core/lib/index"
+            ],
+            "roosterjs-content-model-core/lib/*": [
+                "packages-content-model/roosterjs-content-model-core/lib/*"
+            ],
             "roosterjs-content-model-editor": [
                 "packages-content-model/roosterjs-content-model-editor/lib/index"
             ],

diff --git a/...el-editor/lib/publicTypes/ChangeSource.ts → ...-model-core/lib/constants/ChangeSource.ts b/...el-editor/lib/publicTypes/ChangeSource.ts → ...-model-core/lib/constants/ChangeSource.ts
diff --git a/.../lib/editor/coreApi/createContentModel.ts → ...el-core/lib/coreApi/createContentModel.ts b/.../lib/editor/coreApi/createContentModel.ts → ...el-core/lib/coreApi/createContentModel.ts
@@ -1,4 +1,4 @@
-import { cloneModel } from '../../publicApi/model/cloneModel';
+import { cloneModel } from '../publicApi/model/cloneModel';
 import {
     createDomToModelContext,
     createDomToModelContextWithConfig,

diff --git a/...lib/editor/coreApi/createEditorContext.ts → ...l-core/lib/coreApi/createEditorContext.ts b/...lib/editor/coreApi/createEditorContext.ts → ...l-core/lib/coreApi/createEditorContext.ts
diff --git a/.../lib/editor/coreApi/formatContentModel.ts → ...el-core/lib/coreApi/formatContentModel.ts b/.../lib/editor/coreApi/formatContentModel.ts → ...el-core/lib/coreApi/formatContentModel.ts
@@ -1,4 +1,4 @@
-import { ChangeSource } from '../../publicTypes/ChangeSource';
+import { ChangeSource } from '../constants/ChangeSource';
 import { ColorTransformDirection, EntityOperation, PluginEventType } from 'roosterjs-editor-types';
 import type { EditorCore, Entity } from 'roosterjs-editor-types';
 import type {

diff --git a/...tor/lib/editor/coreApi/getDOMSelection.ts → ...model-core/lib/coreApi/getDOMSelection.ts b/...tor/lib/editor/coreApi/getDOMSelection.ts → ...model-core/lib/coreApi/getDOMSelection.ts
diff --git a/...tor/lib/editor/coreApi/setContentModel.ts → ...model-core/lib/coreApi/setContentModel.ts b/...tor/lib/editor/coreApi/setContentModel.ts → ...model-core/lib/coreApi/setContentModel.ts
diff --git a/...tor/lib/editor/coreApi/setDOMSelection.ts → ...model-core/lib/coreApi/setDOMSelection.ts b/...tor/lib/editor/coreApi/setDOMSelection.ts → ...model-core/lib/coreApi/setDOMSelection.ts
diff --git a/...or/lib/editor/coreApi/switchShadowEdit.ts → ...odel-core/lib/coreApi/switchShadowEdit.ts b/...or/lib/editor/coreApi/switchShadowEdit.ts → ...odel-core/lib/coreApi/switchShadowEdit.ts
@@ -1,8 +1,7 @@
-import { getSelectionPath } from 'roosterjs-editor-dom';
-import { iterateSelections } from '../../modelApi/selection/iterateSelections';
+import { iterateSelections } from '../publicApi/selection/iterateSelections';
 import { PluginEventType } from 'roosterjs-editor-types';
 import type { StandaloneEditorCore } from 'roosterjs-content-model-types';
-import type { EditorCore, SwitchShadowEdit } from 'roosterjs-editor-types';
+import type { EditorCore, SelectionPath, SwitchShadowEdit } from 'roosterjs-editor-types';
 
 /**
  * @internal
@@ -17,12 +16,14 @@ 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 range = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
 
             // Fake object, not used in Content Model Editor, just to satisfy original editor code
             // TODO: we can remove them once we have standalone Content Model Editor
             const fragment = core.contentDiv.ownerDocument.createDocumentFragment();
-            const selectionPath = range && getSelectionPath(core.contentDiv, range);
+            const selectionPath: SelectionPath = {
+                start: [],
+                end: [],
+            };
 
             core.api.triggerEvent(
                 core,

diff --git a/...-content-model/roosterjs-content-model-core/lib/editor/promoteToContentModelEditorCore.ts b/...-content-model/roosterjs-content-model-core/lib/editor/promoteToContentModelEditorCore.ts
@@ -0,0 +1,87 @@
+import { createContentModel } from '../coreApi/createContentModel';
+import { createDomToModelConfig, createModelToDomConfig } from 'roosterjs-content-model-dom';
+import { createEditorContext } from '../coreApi/createEditorContext';
+import { formatContentModel } from '../coreApi/formatContentModel';
+import { getDOMSelection } from '../coreApi/getDOMSelection';
+import { listItemMetadataApplier, listLevelMetadataApplier } from '../metadata/updateListMetadata';
+import { setContentModel } from '../coreApi/setContentModel';
+import { setDOMSelection } from '../coreApi/setDOMSelection';
+import { switchShadowEdit } from '../coreApi/switchShadowEdit';
+import { tablePreProcessor } from '../override/tablePreProcessor';
+import type {
+    ContentModelPluginState,
+    StandaloneEditorCore,
+    StandaloneEditorOptions,
+} from 'roosterjs-content-model-types';
+import type { EditorCore, EditorOptions } from 'roosterjs-editor-types';
+
+/**
+ * Creator Content Model Editor Core from Editor Core
+ * @param core The original EditorCore object
+ * @param options Options of this editor
+ */
+export function promoteToContentModelEditorCore(
+    core: EditorCore,
+    options: EditorOptions & StandaloneEditorOptions,
+    pluginState: ContentModelPluginState
+) {
+    const cmCore = core as EditorCore & StandaloneEditorCore;
+
+    promoteCorePluginState(cmCore, pluginState);
+    promoteContentModelInfo(cmCore, options);
+    promoteCoreApi(cmCore);
+    promoteEnvironment(cmCore);
+}
+
+function promoteCorePluginState(
+    cmCore: StandaloneEditorCore,
+    pluginState: ContentModelPluginState
+) {
+    Object.assign(cmCore, pluginState);
+}
+
+function promoteContentModelInfo(cmCore: StandaloneEditorCore, options: StandaloneEditorOptions) {
+    cmCore.defaultDomToModelOptions = [
+        {
+            processorOverride: {
+                table: tablePreProcessor,
+            },
+        },
+        options.defaultDomToModelOptions,
+    ];
+    cmCore.defaultModelToDomOptions = [
+        {
+            metadataAppliers: {
+                listItem: listItemMetadataApplier,
+                listLevel: listLevelMetadataApplier,
+            },
+        },
+        options.defaultModelToDomOptions,
+    ];
+    cmCore.defaultDomToModelConfig = createDomToModelConfig(cmCore.defaultDomToModelOptions);
+    cmCore.defaultModelToDomConfig = createModelToDomConfig(cmCore.defaultModelToDomOptions);
+}
+
+function promoteCoreApi(cmCore: StandaloneEditorCore) {
+    cmCore.api.createEditorContext = createEditorContext;
+    cmCore.api.createContentModel = createContentModel;
+    cmCore.api.setContentModel = setContentModel;
+    cmCore.api.switchShadowEdit = switchShadowEdit;
+    cmCore.api.getDOMSelection = getDOMSelection;
+    cmCore.api.setDOMSelection = setDOMSelection;
+    cmCore.api.formatContentModel = formatContentModel;
+    cmCore.originalApi.createEditorContext = createEditorContext;
+    cmCore.originalApi.createContentModel = createContentModel;
+    cmCore.originalApi.setContentModel = setContentModel;
+    cmCore.originalApi.getDOMSelection = getDOMSelection;
+    cmCore.originalApi.setDOMSelection = setDOMSelection;
+    cmCore.originalApi.formatContentModel = formatContentModel;
+}
+
+function promoteEnvironment(cmCore: StandaloneEditorCore) {
+    cmCore.environment = {};
+
+    // It is ok to use global window here since the environment should always be the same for all windows in one session
+    cmCore.environment.isMac = window.navigator.appVersion.indexOf('Mac') != -1;
+    cmCore.environment.isAndroid = /android/i.test(window.navigator.userAgent);
+}
diff --git a/packages-content-model/roosterjs-content-model-core/lib/index.ts b/packages-content-model/roosterjs-content-model-core/lib/index.ts
@@ -0,0 +1,15 @@
+export { CachedElementHandler, CloneModelOptions, cloneModel } from './publicApi/model/cloneModel';
+export {
+    iterateSelections,
+    IterateSelectionsCallback,
+    IterateSelectionsOption,
+} from './publicApi/selection/iterateSelections';
+export { getSelectionRootNode } from './publicApi/selection/getSelectionRootNode';
+
+export { updateImageMetadata } from './metadata/updateImageMetadata';
+export { updateTableCellMetadata } from './metadata/updateTableCellMetadata';
+export { updateTableMetadata } from './metadata/updateTableMetadata';
+export { updateListMetadata } from './metadata/updateListMetadata';
+
+export { promoteToContentModelEditorCore } from './editor/promoteToContentModelEditorCore';
+export { ChangeSource } from './constants/ChangeSource';
diff --git a/...b/domUtils/metadata/definitionCreators.ts → ...l-core/lib/metadata/definitionCreators.ts b/...b/domUtils/metadata/definitionCreators.ts → ...l-core/lib/metadata/definitionCreators.ts
diff --git a/.../domUtils/metadata/updateImageMetadata.ts → ...-core/lib/metadata/updateImageMetadata.ts b/.../domUtils/metadata/updateImageMetadata.ts → ...-core/lib/metadata/updateImageMetadata.ts
diff --git a/...b/domUtils/metadata/updateListMetadata.ts → ...l-core/lib/metadata/updateListMetadata.ts b/...b/domUtils/metadata/updateListMetadata.ts → ...l-core/lib/metadata/updateListMetadata.ts
diff --git a/...Utils/metadata/updateTableCellMetadata.ts → ...e/lib/metadata/updateTableCellMetadata.ts b/...Utils/metadata/updateTableCellMetadata.ts → ...e/lib/metadata/updateTableCellMetadata.ts
diff --git a/.../domUtils/metadata/updateTableMetadata.ts → ...-core/lib/metadata/updateTableMetadata.ts b/.../domUtils/metadata/updateTableMetadata.ts → ...-core/lib/metadata/updateTableMetadata.ts
diff --git a/...lib/editor/overrides/tablePreProcessor.ts → ...el-core/lib/override/tablePreProcessor.ts b/...lib/editor/overrides/tablePreProcessor.ts → ...el-core/lib/override/tablePreProcessor.ts
@@ -1,5 +1,5 @@
 import { entityProcessor, hasMetadata, tableProcessor } from 'roosterjs-content-model-dom';
-import { getSelectionRootNode } from '../../modelApi/selection/getSelectionRootNode';
+import { getSelectionRootNode } from '../publicApi/selection/getSelectionRootNode';
 import type { DomToModelContext, ElementProcessor } from 'roosterjs-content-model-types';
 
 /**

diff --git a/...-editor/lib/publicApi/model/cloneModel.ts → ...el-core/lib/publicApi/model/cloneModel.ts b/...-editor/lib/publicApi/model/cloneModel.ts → ...el-core/lib/publicApi/model/cloneModel.ts
diff --git a/...odelApi/selection/getSelectionRootNode.ts → ...blicApi/selection/getSelectionRootNode.ts b/...odelApi/selection/getSelectionRootNode.ts → ...blicApi/selection/getSelectionRootNode.ts
@@ -1,7 +1,11 @@
 import type { DOMSelection } from 'roosterjs-content-model-types';
 
 /**
- * @internal
+ * Get root node of a given DOM selection
+ * For table selection, root node is the selected table
+ * For image selection, root node is the selected image
+ * For range selection, root node is the common ancestor container node of the selection range
+ * @param selection The selection to get root node from
  */
 export function getSelectionRootNode(selection: DOMSelection | undefined): Node | undefined {
     return !selection

diff --git a/...b/modelApi/selection/iterateSelections.ts → .../publicApi/selection/iterateSelections.ts b/...b/modelApi/selection/iterateSelections.ts → .../publicApi/selection/iterateSelections.ts
@@ -7,7 +7,6 @@ import type {
 } from 'roosterjs-content-model-types';
 
 /**
- * @internal
  * Options for iterateSelections API
  */
 export interface IterateSelectionsOption {
@@ -42,7 +41,6 @@ export interface IterateSelectionsOption {
 }
 
 /**
- * @internal
  * The callback function type for iterateSelections
  * @param path The block group path of current selection
  * @param tableContext Table context of current selection
@@ -58,7 +56,6 @@ export type IterateSelectionsCallback = (
 ) => void | boolean;
 
 /**
- * @internal
  * Iterate all selected elements in a given model
  * @param group The given Content Model to iterate selection from
  * @param callback The callback function to access the selected element

diff --git a/packages-content-model/roosterjs-content-model-core/package.json b/packages-content-model/roosterjs-content-model-core/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "roosterjs-content-model-core",
+    "description": "Content Model for roosterjs (Under development)",
+    "dependencies": {
+        "tslib": "^2.3.1",
+        "roosterjs-editor-types": "",
+        "roosterjs-content-model-dom": "",
+        "roosterjs-content-model-types": ""
+    },
+    "version": "0.0.0",
+    "main": "./lib/index.ts"
+}
diff --git a/.../editor/coreApi/createContentModelTest.ts → ...re/test/coreApi/createContentModelTest.ts b/.../editor/coreApi/createContentModelTest.ts → ...re/test/coreApi/createContentModelTest.ts
@@ -1,8 +1,9 @@
-import * as cloneModel from '../../../lib/publicApi/model/cloneModel';
+import * as cloneModel from '../../lib/publicApi/model/cloneModel';
 import * as createDomToModelContext from 'roosterjs-content-model-dom/lib/domToModel/context/createDomToModelContext';
 import * as domToContentModel from 'roosterjs-content-model-dom/lib/domToModel/domToContentModel';
-import { ContentModelEditorCore } from '../../../lib/publicTypes/ContentModelEditorCore';
-import { createContentModel } from '../../../lib/editor/coreApi/createContentModel';
+import { createContentModel } from '../../lib/coreApi/createContentModel';
+import { EditorCore } from 'roosterjs-editor-types';
+import { StandaloneEditorCore } from 'roosterjs-content-model-types';
 
 const mockedEditorContext = 'EDITORCONTEXT' as any;
 const mockedContext = 'CONTEXT' as any;
@@ -12,7 +13,7 @@ const mockedCachedMode = 'CACHEDMODEL' as any;
 const mockedClonedModel = 'CLONEDMODEL' as any;
 
 describe('createContentModel', () => {
-    let core: ContentModelEditorCore;
+    let core: StandaloneEditorCore & EditorCore;
     let createEditorContext: jasmine.Spy;
     let getDOMSelection: jasmine.Spy;
     let domToContentModelSpy: jasmine.Spy;
@@ -43,7 +44,7 @@ describe('createContentModel', () => {
                 cachedModel: mockedCachedMode,
             },
             lifecycle: {},
-        } as any) as ContentModelEditorCore;
+        } as any) as StandaloneEditorCore & EditorCore;
     });
 
     it('Reuse model, no cache, no shadow edit', () => {

diff --git a/...editor/coreApi/createEditorContextTest.ts → ...e/test/coreApi/createEditorContextTest.ts b/...editor/coreApi/createEditorContextTest.ts → ...e/test/coreApi/createEditorContextTest.ts
@@ -1,5 +1,6 @@
-import { ContentModelEditorCore } from '../../../lib/publicTypes/ContentModelEditorCore';
-import { createEditorContext } from '../../../lib/editor/coreApi/createEditorContext';
+import { createEditorContext } from '../../lib/coreApi/createEditorContext';
+import { EditorCore } from 'roosterjs-editor-types';
+import { StandaloneEditorCore } from 'roosterjs-content-model-types';
 
 describe('createEditorContext', () => {
     it('create a normal context', () => {
@@ -28,7 +29,7 @@ describe('createEditorContext', () => {
             },
             darkColorHandler,
             cache: {},
-        } as any) as ContentModelEditorCore;
+        } as any) as StandaloneEditorCore & EditorCore;
 
         const context = createEditorContext(core);
 
@@ -71,7 +72,7 @@ describe('createEditorContext', () => {
             cache: {
                 domIndexer,
             },
-        } as any) as ContentModelEditorCore;
+        } as any) as StandaloneEditorCore & EditorCore;
 
         const context = createEditorContext(core);
 
@@ -87,7 +88,7 @@ describe('createEditorContext', () => {
 });
 
 describe('createEditorContext - checkZoomScale', () => {
-    let core: ContentModelEditorCore;
+    let core: StandaloneEditorCore & EditorCore;
     let div: any;
     let getComputedStyleSpy: jasmine.Spy;
     let getBoundingClientRectSpy: jasmine.Spy;
@@ -117,7 +118,7 @@ describe('createEditorContext - checkZoomScale', () => {
             },
             darkColorHandler,
             cache: {},
-        } as any) as ContentModelEditorCore;
+        } as any) as StandaloneEditorCore & EditorCore;
     });
 
     it('Zoom scale = 1', () => {
@@ -179,7 +180,7 @@ describe('createEditorContext - checkZoomScale', () => {
 });
 
 describe('createEditorContext - checkRootDir', () => {
-    let core: ContentModelEditorCore;
+    let core: StandaloneEditorCore & EditorCore;
     let div: any;
     let getComputedStyleSpy: jasmine.Spy;
     let getBoundingClientRectSpy: jasmine.Spy;
@@ -209,7 +210,7 @@ describe('createEditorContext - checkRootDir', () => {
             },
             darkColorHandler,
             cache: {},
-        } as any) as ContentModelEditorCore;
+        } as any) as StandaloneEditorCore & EditorCore;
     });
 
     it('LTR CSS', () => {