Decouple ContentModelEditor from roosterjs-editor-core (#2201)

* 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 * Move corePlugins to roosterjs-content-model-core package * fix build * improve * fix build * Move format API to roosterjs-content-model-api package * fix build * Improve * Decouple ContentModelEditor from roosterjs-editor-core * improve
microsoft · Nov 10, 2023 · 448266b · 448266b
1 parent 705e741
commit 448266b
Show file tree

Hide file tree

Showing 62 changed files with 6,162 additions and 78 deletions.
diff --git a/demo/scripts/controls/ContentModelEditorMainPane.tsx b/demo/scripts/controls/ContentModelEditorMainPane.tsx
@@ -17,6 +17,7 @@ import { arrayPush } from 'roosterjs-editor-dom';
 import { ContentModelEditor } from 'roosterjs-content-model-editor';
 import { ContentModelEditPlugin } from 'roosterjs-content-model-plugins';
 import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentModelRibbonPlugin';
+import { createContentModelEditorCore } from 'roosterjs-content-model-core';
 import { createEmojiPlugin, createPasteOptionPlugin, RibbonPlugin } from 'roosterjs-react';
 import { EditorOptions, EditorPlugin } from 'roosterjs-editor-types';
 import { PartialTheme } from '@fluentui/react/lib/Theme';
@@ -183,7 +184,7 @@ class ContentModelEditorMainPane extends MainPaneBase {
         this.toggleablePlugins = null;
         this.setState({
             editorCreator: (div: HTMLDivElement, options: EditorOptions) =>
-                new ContentModelEditor(div, {
+                new ContentModelEditor(div, createContentModelEditorCore, {
                     ...options,
                     cacheModel: this.state.initState.cacheModel,
                 }),

diff --git a/packages-content-model/roosterjs-content-model-api/test/publicApi/link/insertLinkTest.ts b/packages-content-model/roosterjs-content-model-api/test/publicApi/link/insertLinkTest.ts
@@ -1,6 +1,7 @@
 import insertLink from '../../../lib/publicApi/link/insertLink';
 import { ChangeSource } from 'roosterjs-content-model-core';
 import { ContentModelEditor } from 'roosterjs-content-model-editor';
+import { createContentModelEditorCore } from 'roosterjs-content-model-core';
 import { IStandaloneEditor } from 'roosterjs-content-model-types';
 import { PluginEventType } from 'roosterjs-editor-types';
 import {
@@ -330,7 +331,9 @@ describe('insertLink', () => {
             getName: () => 'mock',
             onPluginEvent: onPluginEvent,
         };
-        const editor = new ContentModelEditor(div, { plugins: [mockedPlugin] });
+        const editor = new ContentModelEditor(div, createContentModelEditorCore, {
+            plugins: [mockedPlugin],
+        });
 
         editor.focus();
 

diff --git a/...ges-content-model/roosterjs-content-model-core/lib/editor/createContentModelEditorCore.ts b/...ges-content-model/roosterjs-content-model-core/lib/editor/createContentModelEditorCore.ts
@@ -3,7 +3,6 @@ import { ContentModelTypeInContainerPlugin } from '../corePlugin/ContentModelTyp
 import { createContentModelCachePlugin } from '../corePlugin/ContentModelCachePlugin';
 import { createContentModelCopyPastePlugin } from '../corePlugin/ContentModelCopyPastePlugin';
 import { createContentModelFormatPlugin } from '../corePlugin/ContentModelFormatPlugin';
-import { createEditorCore } from 'roosterjs-editor-core';
 import { promoteToContentModelEditorCore } from './promoteToContentModelEditorCore';
 import type { CoreCreator, EditorCore, EditorOptions } from 'roosterjs-editor-types';
 import type {
@@ -14,11 +13,15 @@ import type {
 
 /**
  * Editor Core creator for Content Model editor
+ * @param contentDiv Container DIV of editor
+ * @param options Options for creating editor
+ * @param baseCreator Base core creator used for creating base EditorCore
  */
-export const createContentModelEditorCore: CoreCreator<
-    EditorCore & StandaloneEditorCore,
-    EditorOptions & StandaloneEditorOptions
-> = (contentDiv, options) => {
+export function createContentModelEditorCore(
+    contentDiv: HTMLDivElement,
+    options: EditorOptions & StandaloneEditorOptions,
+    baseCreator: CoreCreator<EditorCore, EditorOptions>
+): EditorCore & StandaloneEditorCore {
     const pluginState = getPluginState(options);
     const modifiedOptions: EditorOptions & StandaloneEditorOptions = {
         ...options,
@@ -34,12 +37,12 @@ export const createContentModelEditorCore: CoreCreator<
         },
     };
 
-    const core = createEditorCore(contentDiv, modifiedOptions) as EditorCore & StandaloneEditorCore;
+    const core = baseCreator(contentDiv, modifiedOptions) as EditorCore & StandaloneEditorCore;
 
     promoteToContentModelEditorCore(core, modifiedOptions, pluginState);
 
     return core;
-};
+}
 
 function getPluginState(options: EditorOptions & StandaloneEditorOptions): ContentModelPluginState {
     const format = options.defaultFormat || {};

diff --git a/packages-content-model/roosterjs-content-model-core/package.json b/packages-content-model/roosterjs-content-model-core/package.json
@@ -5,7 +5,6 @@
         "tslib": "^2.3.1",
         "roosterjs-editor-types": "",
         "roosterjs-editor-dom": "",
-        "roosterjs-editor-core": "",
         "roosterjs-content-model-dom": "",
         "roosterjs-content-model-types": ""
     },

diff --git a/...ontent-model/roosterjs-content-model-core/test/editor/createContentModelEditorCoreTest.ts b/...ontent-model/roosterjs-content-model-core/test/editor/createContentModelEditorCoreTest.ts
@@ -1,7 +1,7 @@
 import * as ContentModelCachePlugin from '../../lib/corePlugin/ContentModelCachePlugin';
 import * as ContentModelCopyPastePlugin from '../../lib/corePlugin/ContentModelCopyPastePlugin';
 import * as ContentModelFormatPlugin from '../../lib/corePlugin/ContentModelFormatPlugin';
-import * as createEditorCore from 'roosterjs-editor-core/lib/editor/createEditorCore';
+import * as createEditorCore from 'roosterjs-content-model-editor/lib/editor/createEditorCore';
 import * as promoteToContentModelEditorCore from '../../lib/editor/promoteToContentModelEditorCore';
 import { contentModelDomIndexer } from '../../lib/corePlugin/utils/contentModelDomIndexer';
 import { ContentModelTypeInContainerPlugin } from '../../lib/corePlugin/ContentModelTypeInContainerPlugin';
@@ -58,7 +58,7 @@ describe('createContentModelEditorCore', () => {
     });
 
     it('No additional option', () => {
-        const core = createContentModelEditorCore(contentDiv, {});
+        const core = createContentModelEditorCore(contentDiv, {}, createEditorCoreSpy);
 
         const expectedOptions = {
             plugins: [mockedCachePlugin, mockedFormatPlugin],
@@ -103,7 +103,7 @@ describe('createContentModelEditorCore', () => {
                 copyPaste: mockedCopyPastePlugin2,
             },
         };
-        const core = createContentModelEditorCore(contentDiv, options);
+        const core = createContentModelEditorCore(contentDiv, options, createEditorCoreSpy);
 
         const expectedOptions = {
             defaultDomToModelOptions,
@@ -152,7 +152,7 @@ describe('createContentModelEditorCore', () => {
             },
         };
 
-        const core = createContentModelEditorCore(contentDiv, options);
+        const core = createContentModelEditorCore(contentDiv, options, createEditorCoreSpy);
 
         const expectedOptions = {
             plugins: [mockedCachePlugin, mockedFormatPlugin],
@@ -200,7 +200,7 @@ describe('createContentModelEditorCore', () => {
             cacheModel: true,
         };
 
-        const core = createContentModelEditorCore(contentDiv, options);
+        const core = createContentModelEditorCore(contentDiv, options, createEditorCoreSpy);
 
         const expectedOptions = {
             plugins: [mockedCachePlugin, mockedFormatPlugin],

diff --git a/packages-content-model/roosterjs-content-model-core/test/publicApi/model/pasteTest.ts b/packages-content-model/roosterjs-content-model-core/test/publicApi/model/pasteTest.ts
@@ -12,6 +12,7 @@ import * as WordDesktopFile from '../../../../roosterjs-content-model-plugins/li
 import { ContentModelEditor } from 'roosterjs-content-model-editor';
 import { ContentModelPastePlugin } from '../../../../roosterjs-content-model-plugins/lib/paste/ContentModelPastePlugin';
 import { createContentModelDocument, tableProcessor } from 'roosterjs-content-model-dom';
+import { createContentModelEditorCore } from 'roosterjs-content-model-core';
 import {
     ContentModelDocument,
     DomToModelOption,
@@ -230,7 +231,7 @@ describe('paste with content model & paste plugin', () => {
     beforeEach(() => {
         div = document.createElement('div');
         document.body.appendChild(div);
-        editor = new ContentModelEditor(div, {
+        editor = new ContentModelEditor(div, createContentModelEditorCore, {
             plugins: [new ContentModelPastePlugin()],
         });
         spyOn(addParserF, 'default').and.callThrough();
@@ -377,7 +378,7 @@ describe('paste with content model & paste plugin', () => {
         };
 
         let eventChecker: BeforePasteEvent = <any>{};
-        editor = new ContentModelEditor(div!, {
+        editor = new ContentModelEditor(div!, createContentModelEditorCore, {
             plugins: [
                 {
                     initialize: () => {},

diff --git a/...oosterjs-content-model-dom/test/formatHandlers/common/backgroundColorFormatHandlerTest.ts b/...oosterjs-content-model-dom/test/formatHandlers/common/backgroundColorFormatHandlerTest.ts
@@ -1,7 +1,7 @@
-import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHandlerImpl';
 import { backgroundColorFormatHandler } from '../../../lib/formatHandlers/common/backgroundColorFormatHandler';
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
+import { DarkColorHandlerImpl } from 'roosterjs-content-model-editor/lib/editor/DarkColorHandlerImpl';
 import { DeprecatedColors } from '../../../lib/formatHandlers/utils/color';
 import { expectHtml } from 'roosterjs-editor-dom/test/DomTestHelper';
 import {
@@ -95,7 +95,6 @@ describe('backgroundColorFormatHandler.apply', () => {
 
     it('Simple color', () => {
         format.backgroundColor = 'red';
-        context.darkColorHandler = new DarkColorHandlerImpl(div, s => 'darkMock:' + s);
 
         backgroundColorFormatHandler.apply(format, div, context);
 

diff --git a/...del/roosterjs-content-model-dom/test/formatHandlers/segment/textColorFormatHandlerTest.ts b/...del/roosterjs-content-model-dom/test/formatHandlers/segment/textColorFormatHandlerTest.ts
@@ -1,6 +1,6 @@
-import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHandlerImpl';
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
+import { DarkColorHandlerImpl } from 'roosterjs-content-model-editor/lib/editor/DarkColorHandlerImpl';
 import { defaultHTMLStyleMap } from '../../../lib/config/defaultHTMLStyleMap';
 import { DeprecatedColors } from '../../../lib';
 import { expectHtml } from 'roosterjs-editor-dom/test/DomTestHelper';
@@ -19,7 +19,6 @@ describe('textColorFormatHandler.parse', () => {
     beforeEach(() => {
         div = document.createElement('div');
         context = createDomToModelContext();
-        context.darkColorHandler = new DarkColorHandlerImpl(div, s => 'darkMock: ' + s);
         format = {};
     });
 

diff --git a/packages-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleBrTest.ts b/packages-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleBrTest.ts
@@ -1,4 +1,3 @@
-import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHandlerImpl';
 import { ContentModelBr, ModelToDomContext } from 'roosterjs-content-model-types';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
 import { handleBr } from '../../../lib/modelToDom/handlers/handleBr';
@@ -10,7 +9,6 @@ describe('handleSegment', () => {
     beforeEach(() => {
         parent = document.createElement('div');
         context = createModelToDomContext();
-        context.darkColorHandler = new DarkColorHandlerImpl({} as any, s => 'darkMock: ' + s);
     });
 
     it('Br segment', () => {

diff --git a/...-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleSegmentDecoratorTest.ts b/...-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleSegmentDecoratorTest.ts
@@ -1,4 +1,3 @@
-import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHandlerImpl';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
 import { expectHtml } from 'roosterjs-editor-dom/test/DomTestHelper';
 import { handleSegmentDecorator } from '../../../lib/modelToDom/handlers/handleSegmentDecorator';
@@ -68,8 +67,6 @@ describe('handleSegmentDecorator', () => {
             dataset: {},
         };
 
-        context.darkColorHandler = new DarkColorHandlerImpl({} as any, s => 'darkMock: ' + s);
-
         runTest(link, undefined, '<a href="http://test.com/test" style="color: red;">test</a>', [
             '<a href="http://test.com/test" style="color: red;">test</a>',
         ]);
@@ -227,7 +224,6 @@ describe('handleSegmentDecorator', () => {
             },
             dataset: {},
         };
-        context.darkColorHandler = new DarkColorHandlerImpl({} as any, s => 'darkMock: ' + s);
 
         runTest(
             link,

diff --git a/...ges-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleTableTest.ts b/...ges-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleTableTest.ts
@@ -1,5 +1,4 @@
 import * as handleBlock from '../../../lib/modelToDom/handlers/handleBlock';
-import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHandlerImpl';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
 import { createTable } from '../../../lib/modelApi/creators/createTable';
 import { createTableCell } from '../../../lib/modelApi/creators/createTableCell';
@@ -17,7 +16,6 @@ describe('handleTable', () => {
     beforeEach(() => {
         spyOn(handleBlock, 'handleBlock');
         context = createModelToDomContext({ allowCacheElement: true });
-        context.darkColorHandler = new DarkColorHandlerImpl(null!, s => 'darkMock: ' + s);
     });
 
     function runTest(model: ContentModelTable, expectedInnerHTML: string) {

diff --git a/...ages-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleTextTest.ts b/...ages-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleTextTest.ts
@@ -1,5 +1,4 @@
 import * as stackFormat from '../../../lib/modelToDom/utils/stackFormat';
-import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHandlerImpl';
 import { ContentModelText, ModelToDomContext } from 'roosterjs-content-model-types';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
 import { handleText } from '../../../lib/modelToDom/handlers/handleText';
@@ -31,7 +30,6 @@ describe('handleText', () => {
             text: 'test',
             format: { textColor: 'red' },
         };
-        context.darkColorHandler = new DarkColorHandlerImpl({} as any, s => 'darkMock: ' + s);
 
         handleText(document, parent, text, context, []);
 

diff --git a/...ontent-model/roosterjs-content-model-dom/test/modelToDom/utils/handleSegmentCommonTest.ts b/...ontent-model/roosterjs-content-model-dom/test/modelToDom/utils/handleSegmentCommonTest.ts
@@ -1,4 +1,3 @@
-import DarkColorHandlerImpl from 'roosterjs-editor-core/lib/editor/DarkColorHandlerImpl';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
 import { createText } from '../../../lib/modelApi/creators/createText';
 import { handleSegmentCommon } from '../../../lib/modelToDom/utils/handleSegmentCommon';
@@ -17,10 +16,6 @@ describe('handleSegmentCommon', () => {
         const context = createModelToDomContext();
 
         context.onNodeCreated = onNodeCreated;
-        context.darkColorHandler = new DarkColorHandlerImpl(
-            document.createElement('div'),
-            s => 'darkMock: ' + s
-        );
 
         segment.link = {
             dataset: {},