Move type files to roosterjs-content-model-types package (#2196)

* Move ContentModelEdit plugin to plugins package

* Move types to roosterjs-content-model-types package

* improve

* Improve

* improve

* Improve

* improve

* fix build

* fix build

demo/scripts/controls/MainPaneBase.tsx

@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom';
 import BuildInPluginState from './BuildInPluginState';
 import SidePane from './sidePane/SidePane';
 import SnapshotPlugin from './sidePane/snapshot/SnapshotPlugin';
-import { Border } from 'roosterjs-content-model-editor';
+import { Border } from 'roosterjs-content-model-types';
 import { EditorOptions, EditorPlugin, IEditor } from 'roosterjs-editor-types';
 import { getDarkColor } from 'roosterjs-color-utils';
 import { PartialTheme, ThemeProvider } from '@fluentui/react/lib/Theme';

demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts

@@ -1,11 +1,8 @@
+import { ContentModelFormatState } from 'roosterjs-content-model-types';
 import { FormatState, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
+import { getFormatState, IContentModelEditor } from 'roosterjs-content-model-editor';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 import { LocalizedStrings, RibbonButton, RibbonPlugin, UIUtilities } from 'roosterjs-react';
-import {
-    ContentModelFormatState,
-    getFormatState,
-    IContentModelEditor,
-} from 'roosterjs-content-model-editor';
 
 export class ContentModelRibbonPlugin implements RibbonPlugin {
     private editor: IContentModelEditor | null = null;

demo/scripts/controls/ribbonButtons/contentModel/tableBorderApplyButton.ts

@@ -1,10 +1,7 @@
 import MainPaneBase from '../../MainPaneBase';
+import { applyTableBorderFormat, isContentModelEditor } from 'roosterjs-content-model-editor';
+import { BorderOperations } from 'roosterjs-content-model-types';
 import { RibbonButton } from 'roosterjs-react';
-import {
-    applyTableBorderFormat,
-    BorderOperations,
-    isContentModelEditor,
-} from 'roosterjs-content-model-editor';
 
 const TABLE_OPERATIONS: Record<string, BorderOperations> = {
     menuNameTableAllBorder: 'allBorders',

demo/scripts/controls/ribbonButtons/contentModel/tableEditButtons.ts

@@ -1,4 +1,5 @@
-import { editTable, isContentModelEditor, TableOperation } from 'roosterjs-content-model-editor';
+import { editTable, isContentModelEditor } from 'roosterjs-content-model-editor';
+import { TableOperation } from 'roosterjs-content-model-types';
 import {
     RibbonButton,
     TableEditAlignMenuItemStringKey,

demo/scripts/controls/sidePane/contentModelApiPlayground/insertEntity/InsertEntityPane.tsx

@@ -2,12 +2,9 @@ import * as React from 'react';
 import ApiPaneProps from '../ApiPaneProps';
 import { Entity } from 'roosterjs-editor-types';
 import { getEntityFromElement, getEntitySelector } from 'roosterjs-editor-dom';
+import { IContentModelEditor, insertEntity } from 'roosterjs-content-model-editor';
+import { InsertEntityOptions } from 'roosterjs-content-model-types';
 import { trustedHTMLHandler } from '../../../../utils/trustedHTMLHandler';
-import {
-    IContentModelEditor,
-    insertEntity,
-    InsertEntityOptions,
-} from 'roosterjs-content-model-editor';
 
 const styles = require('./InsertEntityPane.scss');
 

demo/scripts/controls/sidePane/eventViewer/ContentModelEventViewPane.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelContentChangedEvent } from 'roosterjs-content-model-editor';
+import { ContentModelContentChangedEvent } from 'roosterjs-content-model-types';
 import { EntityOperation, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
 import { SidePaneElementProps } from '../SidePaneElement';
 import {

packages-content-model/roosterjs-content-model-editor/lib/domUtils/borderValues.ts

@@ -1,4 +1,4 @@
-import type { Border } from '../publicTypes/interface/Border';
+import type { Border } from 'roosterjs-content-model-types';
 
 const BorderStyles = [
     'none',

packages-content-model/roosterjs-content-model-editor/lib/editor/ContentModelEditor.ts

@@ -1,13 +1,8 @@
 import { createContentModelEditorCore } from './createContentModelEditorCore';
 import { EditorBase } from 'roosterjs-editor-core';
 import type { ContentModelEditorCore } from '../publicTypes/ContentModelEditorCore';
-import type {
-    ContentModelFormatter,
-    FormatWithContentModelOptions,
-} from '../publicTypes/parameter/FormatWithContentModelContext';
 import type {
     ContentModelEditorOptions,
-    EditorEnvironment,
     IContentModelEditor,
 } from '../publicTypes/IContentModelEditor';
 import type {
@@ -17,6 +12,9 @@ import type {
     DomToModelOption,
     ModelToDomOption,
     OnNodeCreated,
+    ContentModelFormatter,
+    FormatWithContentModelOptions,
+    EditorEnvironment,
 } from 'roosterjs-content-model-types';
 
 /**

packages-content-model/roosterjs-content-model-editor/lib/editor/coreApi/createContentModel.ts

@@ -1,14 +1,16 @@
 import { cloneModel } from '../../publicApi/model/cloneModel';
-import type { DOMSelection, DomToModelOption } from 'roosterjs-content-model-types';
 import {
     createDomToModelContext,
     createDomToModelContextWithConfig,
     domToContentModel,
 } from 'roosterjs-content-model-dom';
+import type { EditorCore } from 'roosterjs-editor-types';
 import type {
-    ContentModelEditorCore,
+    DOMSelection,
+    DomToModelOption,
     CreateContentModel,
-} from '../../publicTypes/ContentModelEditorCore';
+    StandaloneEditorCore,
+} from 'roosterjs-content-model-types';
 
 /**
  * @internal
@@ -41,7 +43,7 @@ export const createContentModel: CreateContentModel = (core, option, selectionOv
 };
 
 function internalCreateContentModel(
-    core: ContentModelEditorCore,
+    core: StandaloneEditorCore & EditorCore,
     selection?: DOMSelection,
     option?: DomToModelOption
 ) {

packages-content-model/roosterjs-content-model-editor/lib/editor/coreApi/createEditorContext.ts

@@ -1,5 +1,4 @@
-import type { CreateEditorContext } from '../../publicTypes/ContentModelEditorCore';
-import type { EditorContext } from 'roosterjs-content-model-types';
+import type { EditorContext, CreateEditorContext } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-editor/lib/editor/coreApi/formatContentModel.ts

@@ -1,24 +1,22 @@
-import { ChangeSource } from '../../publicTypes/event/ContentModelContentChangedEvent';
+import { ChangeSource } from '../../publicTypes/ChangeSource';
 import { ColorTransformDirection, EntityOperation, PluginEventType } from 'roosterjs-editor-types';
-import type ContentModelContentChangedEvent from '../../publicTypes/event/ContentModelContentChangedEvent';
-import type {
-    ContentModelEditorCore,
-    FormatContentModel,
-} from '../../publicTypes/ContentModelEditorCore';
-import type { Entity } from 'roosterjs-editor-types';
+import type { EditorCore, Entity } from 'roosterjs-editor-types';
 import type {
+    ContentModelContentChangedEvent,
+    DOMSelection,
     EntityRemovalOperation,
+    FormatContentModel,
     FormatWithContentModelContext,
-} from '../../publicTypes/parameter/FormatWithContentModelContext';
-import type { DOMSelection } from 'roosterjs-content-model-types';
+    StandaloneEditorCore,
+} from 'roosterjs-content-model-types';
 
 /**
  * @internal
  * The general API to do format change with Content Model
  * It will grab a Content Model for current editor content, and invoke a callback function
  * to do format change. Then according to the return value, write back the modified content model into editor.
  * If there is cached model, it will be used and updated.
- * @param core The ContentModelEditorCore object
+ * @param core The StandaloneEditorCore object
  * @param formatter Formatter function, see ContentModelFormatter
  * @param options More options, see FormatWithContentModelOptions
  */
@@ -83,7 +81,7 @@ export const formatContentModel: FormatContentModel = (core, formatter, options)
     }
 };
 
-function handleNewEntities(core: ContentModelEditorCore, context: FormatWithContentModelContext) {
+function handleNewEntities(core: EditorCore, context: FormatWithContentModelContext) {
     // TODO: Ideally we can trigger NewEntity event here. But to be compatible with original editor code, we don't do it here for now.
     // Once Content Model Editor can be standalone, we can change this behavior to move triggering NewEntity event code
     // from EntityPlugin to here
@@ -109,10 +107,7 @@ const EntityOperationMap: Record<EntityRemovalOperation, EntityOperation> = {
     removeFromStart: EntityOperation.RemoveFromStart,
 };
 
-function handleDeletedEntities(
-    core: ContentModelEditorCore,
-    context: FormatWithContentModelContext
-) {
+function handleDeletedEntities(core: EditorCore, context: FormatWithContentModelContext) {
     context.deletedEntities.forEach(
         ({
             entity: {
@@ -144,7 +139,7 @@ function handleDeletedEntities(
     );
 }
 
-function handleImages(core: ContentModelEditorCore, context: FormatWithContentModelContext) {
+function handleImages(core: EditorCore, context: FormatWithContentModelContext) {
     if (context.newImages.length > 0) {
         const viewport = core.getVisibleViewport();
 
@@ -160,7 +155,7 @@ function handleImages(core: ContentModelEditorCore, context: FormatWithContentMo
 }
 
 function handlePendingFormat(
-    core: ContentModelEditorCore,
+    core: StandaloneEditorCore,
     context: FormatWithContentModelContext,
     selection?: DOMSelection | null
 ) {

packages-content-model/roosterjs-content-model-editor/lib/editor/coreApi/getDOMSelection.ts

@@ -1,9 +1,6 @@
 import { SelectionRangeTypes } from 'roosterjs-editor-types';
-import type {
-    ContentModelEditorCore,
-    GetDOMSelection,
-} from '../../publicTypes/ContentModelEditorCore';
-import type { DOMSelection } from 'roosterjs-content-model-types';
+import type { EditorCore } from 'roosterjs-editor-types';
+import type { DOMSelection, GetDOMSelection } from 'roosterjs-content-model-types';
 
 /**
  * @internal
@@ -12,7 +9,7 @@ export const getDOMSelection: GetDOMSelection = core => {
     return core.cache.cachedSelection ?? getNewSelection(core);
 };
 
-function getNewSelection(core: ContentModelEditorCore): DOMSelection | null {
+function getNewSelection(core: EditorCore): DOMSelection | null {
     // TODO: Get rid of getSelectionRangeEx when we have standalone editor
     const rangeEx = core.api.getSelectionRangeEx(core);
 

packages-content-model/roosterjs-content-model-editor/lib/editor/coreApi/setContentModel.ts

@@ -1,9 +1,9 @@
-import type { SetContentModel } from '../../publicTypes/ContentModelEditorCore';
 import {
     contentModelToDom,
     createModelToDomContext,
     createModelToDomContextWithConfig,
 } from 'roosterjs-content-model-dom';
+import type { SetContentModel } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-editor/lib/editor/coreApi/setDOMSelection.ts

@@ -1,6 +1,6 @@
 import { SelectionRangeTypes } from 'roosterjs-editor-types';
 import type { SelectionRangeEx } from 'roosterjs-editor-types';
-import type { SetDOMSelection } from '../../publicTypes/ContentModelEditorCore';
+import type { SetDOMSelection } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-editor/lib/editor/coreApi/switchShadowEdit.ts

@@ -1,8 +1,8 @@
 import { getSelectionPath } from 'roosterjs-editor-dom';
 import { iterateSelections } from '../../modelApi/selection/iterateSelections';
 import { PluginEventType } from 'roosterjs-editor-types';
-import type { ContentModelEditorCore } from '../../publicTypes/ContentModelEditorCore';
-import type { SwitchShadowEdit } from 'roosterjs-editor-types';
+import type { StandaloneEditorCore } from 'roosterjs-content-model-types';
+import type { EditorCore, SwitchShadowEdit } from 'roosterjs-editor-types';
 
 /**
  * @internal
@@ -12,7 +12,7 @@ import type { SwitchShadowEdit } from 'roosterjs-editor-types';
  */
 export const switchShadowEdit: SwitchShadowEdit = (editorCore, isOn): void => {
     // TODO: Use strong-typed editor core object
-    const core = editorCore as ContentModelEditorCore;
+    const core = editorCore as StandaloneEditorCore & EditorCore;
 
     if (isOn != !!core.lifecycle.shadowEditFragment) {
         if (isOn) {

packages-content-model/roosterjs-content-model-editor/lib/editor/corePlugins/ContentModelCachePlugin.ts

@@ -1,8 +1,10 @@
 import { areSameRangeEx } from '../../modelApi/selection/areSameRangeEx';
 import { isCharacterValue } from '../../domUtils/eventUtils';
 import { PluginEventType } from 'roosterjs-editor-types';
-import type ContentModelContentChangedEvent from '../../publicTypes/event/ContentModelContentChangedEvent';
-import type { ContentModelCachePluginState } from '../../publicTypes/pluginState/ContentModelCachePluginState';
+import type {
+    ContentModelCachePluginState,
+    ContentModelContentChangedEvent,
+} from 'roosterjs-content-model-types';
 import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor';
 import type {
     IEditor,

packages-content-model/roosterjs-content-model-editor/lib/editor/corePlugins/ContentModelCopyPastePlugin.ts

@@ -1,6 +1,6 @@
 import paste from '../../publicApi/utils/paste';
 import { addRangeToSelection } from '../../domUtils/addRangeToSelection';
-import { ChangeSource } from '../../publicTypes/event/ContentModelContentChangedEvent';
+import { ChangeSource } from '../../publicTypes/ChangeSource';
 import { cloneModel } from '../../publicApi/model/cloneModel';
 import { ColorTransformDirection, PluginEventType } from 'roosterjs-editor-types';
 import { deleteSelection } from '../../publicApi/selection/deleteSelection';

packages-content-model/roosterjs-content-model-editor/lib/editor/corePlugins/ContentModelFormatPlugin.ts

@@ -5,7 +5,7 @@ import { isCharacterValue } from '../../domUtils/eventUtils';
 import { PluginEventType } from 'roosterjs-editor-types';
 import type { IContentModelEditor } from '../../publicTypes/IContentModelEditor';
 import type { IEditor, PluginEvent, PluginWithState } from 'roosterjs-editor-types';
-import type { ContentModelFormatPluginState } from '../../publicTypes/pluginState/ContentModelFormatPluginState';
+import type { ContentModelFormatPluginState } from 'roosterjs-content-model-types';
 
 // During IME input, KeyDown event will have "Process" as key
 const ProcessKey = 'Process';

packages-content-model/roosterjs-content-model-editor/lib/editor/createContentModelEditorCore.ts

@@ -19,8 +19,8 @@ import {
 } from '../domUtils/metadata/updateListMetadata';
 import type { ContentModelEditorCore } from '../publicTypes/ContentModelEditorCore';
 import type { ContentModelEditorOptions } from '../publicTypes/IContentModelEditor';
-import type { ContentModelPluginState } from '../publicTypes/pluginState/ContentModelPluginState';
 import type { CoreCreator, EditorCore } from 'roosterjs-editor-types';
+import type { ContentModelPluginState } from 'roosterjs-content-model-types';
 
 /**
  * Editor Core creator for Content Model editor

packages-content-model/roosterjs-content-model-editor/lib/index.ts

@@ -1,70 +1,9 @@
-export { ContentModelFormatState } from './publicTypes/format/formatState/ContentModelFormatState';
-export { ImageFormatState } from './publicTypes/format/formatState/ImageFormatState';
-export { Border } from './publicTypes/interface/Border';
-export { BorderOperations } from './publicTypes/enum/BorderOperations';
 export {
-    CreateEditorContext,
     ContentModelCoreApiMap,
     ContentModelEditorCore,
-    CreateContentModel,
-    SetContentModel,
-    GetDOMSelection,
-    SetDOMSelection,
-    FormatContentModel,
 } from './publicTypes/ContentModelEditorCore';
-export {
-    default as ContentModelBeforePasteEvent,
-    ContentModelBeforePasteEventData,
-    CompatibleContentModelBeforePasteEvent,
-} from './publicTypes/event/ContentModelBeforePasteEvent';
-export {
-    default as ContentModelContentChangedEvent,
-    CompatibleContentModelContentChangedEvent,
-    ContentModelContentChangedEventData,
-    ChangeSource,
-} from './publicTypes/event/ContentModelContentChangedEvent';
-
-export {
-    IContentModelEditor,
-    ContentModelEditorOptions,
-    EditorEnvironment,
-} from './publicTypes/IContentModelEditor';
-export { InsertPoint } from './publicTypes/selection/InsertPoint';
-export { TableSelectionContext } from './publicTypes/selection/TableSelectionContext';
-export {
-    DeletedEntity,
-    FormatWithContentModelContext,
-    FormatWithContentModelOptions,
-    ContentModelFormatter,
-    EntityLifecycleOperation,
-    EntityOperation,
-    EntityRemovalOperation,
-} from './publicTypes/parameter/FormatWithContentModelContext';
-export {
-    InsertEntityOptions,
-    InsertEntityPosition,
-} from './publicTypes/parameter/InsertEntityOptions';
-export {
-    TableOperation,
-    TableVerticalInsertOperation,
-    TableHorizontalInsertOperation,
-    TableDeleteOperation,
-    TableVerticalMergeOperation,
-    TableHorizontalMergeOperation,
-    TableCellMergeOperation,
-    TableSplitOperation,
-    TableAlignOperation,
-    TableCellHorizontalAlignOperation,
-    TableCellVerticalAlignOperation,
-} from './publicTypes/parameter/TableOperation';
-export { PasteType } from './publicTypes/parameter/PasteType';
-export {
-    DeleteResult,
-    DeleteSelectionContext,
-    DeleteSelectionResult,
-    DeleteSelectionStep,
-    ValidDeleteSelectionContext,
-} from './publicTypes/parameter/DeleteSelectionStep';
+export { IContentModelEditor, ContentModelEditorOptions } from './publicTypes/IContentModelEditor';
+export { ChangeSource } from './publicTypes/ChangeSource';
 
 export { default as insertTable } from './publicApi/table/insertTable';
 export { default as formatTable } from './publicApi/table/formatTable';
@@ -137,10 +76,3 @@ export { updateTableMetadata } from './domUtils/metadata/updateTableMetadata';
 export { updateListMetadata } from './domUtils/metadata/updateListMetadata';
 export { isCharacterValue, isModifierKey } from './domUtils/eventUtils';
 export { isPunctuation, isSpace, normalizeText } from './domUtils/stringUtil';
-
-export { ContentModelCachePluginState } from './publicTypes/pluginState/ContentModelCachePluginState';
-export { ContentModelPluginState } from './publicTypes/pluginState/ContentModelPluginState';
-export {
-    ContentModelFormatPluginState,
-    PendingFormat,
-} from './publicTypes/pluginState/ContentModelFormatPluginState';

packages-content-model/roosterjs-content-model-editor/lib/modelApi/block/setModelAlignment.ts

@@ -1,7 +1,10 @@
 import { alignTable } from '../table/alignTable';
 import { getOperationalBlocks } from '../selection/collectSelections';
-import type { TableAlignOperation } from '../../publicTypes/parameter/TableOperation';
-import type { ContentModelDocument, ContentModelListItem } from 'roosterjs-content-model-types';
+import type {
+    ContentModelDocument,
+    ContentModelListItem,
+    TableAlignOperation,
+} from 'roosterjs-content-model-types';
 
 const ResultMap: Record<
     'left' | 'center' | 'right',