Standalone editor: Remove dependencies to enums (#2152)

microsoft · Oct 18, 2023 · e55b4d6 · e55b4d6
1 parent 655dc5d
commit e55b4d6
Show file tree

Hide file tree

Showing 35 changed files with 743 additions and 88 deletions.
diff --git a/.../scripts/controls/contentModel/components/format/formatPart/TableMetadataFormatRenders.ts b/.../scripts/controls/contentModel/components/format/formatPart/TableMetadataFormatRenders.ts
@@ -1,9 +1,8 @@
-import { CompatibleTableBorderFormat } from 'roosterjs-editor-types/lib/compatibleTypes';
 import { createCheckboxFormatRenderer } from '../utils/createCheckboxFormatRenderer';
 import { createColorFormatRenderer } from '../utils/createColorFormatRender';
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { TableMetadataFormat } from 'roosterjs-content-model-types';
+import { TableBorderFormat, TableMetadataFormat } from 'roosterjs-content-model-types';
 
 export const TableMetadataFormatRenders: FormatRenderer<TableMetadataFormat>[] = [
     createColorFormatRenderer<TableMetadataFormat>(
@@ -58,7 +57,7 @@ export const TableMetadataFormatRenders: FormatRenderer<TableMetadataFormat>[] =
         format => format.bgColorOdd,
         (format, value) => (format.bgColorOdd = value)
     ),
-    createDropDownFormatRenderer<TableMetadataFormat, keyof typeof CompatibleTableBorderFormat>(
+    createDropDownFormatRenderer<TableMetadataFormat, keyof typeof TableBorderFormat>(
         'TableBorderFormat',
         [
             'DEFAULT',
@@ -71,10 +70,7 @@ export const TableMetadataFormatRenders: FormatRenderer<TableMetadataFormat>[] =
             'ESPECIAL_TYPE_3',
             'CLEAR',
         ],
-        format =>
-            CompatibleTableBorderFormat[
-                format.tableBorderFormat
-            ] as keyof typeof CompatibleTableBorderFormat,
-        (format, newValue) => (format.tableBorderFormat = CompatibleTableBorderFormat[newValue])
+        format => TableBorderFormat[format.tableBorderFormat] as keyof typeof TableBorderFormat,
+        (format, newValue) => (format.tableBorderFormat = TableBorderFormat[newValue])
     ),
 ];
diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts
@@ -1,6 +1,6 @@
+import { FormatState, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 import { LocalizedStrings, RibbonButton, RibbonPlugin, UIUtilities } from 'roosterjs-react';
-import { PluginEvent, PluginEventType } from 'roosterjs-editor-types';
 import {
     ContentModelFormatState,
     getFormatState,
@@ -9,7 +9,7 @@ import {
 
 export class ContentModelRibbonPlugin implements RibbonPlugin {
     private editor: IContentModelEditor | null = null;
-    private onFormatChanged: ((formatState: ContentModelFormatState) => void) | null = null;
+    private onFormatChanged: ((formatState: FormatState) => void) | null = null;
     private timer = 0;
     private formatState: ContentModelFormatState | null = null;
     private uiUtilities: UIUtilities | null = null;
@@ -72,7 +72,7 @@ export class ContentModelRibbonPlugin implements RibbonPlugin {
     /**
      * Register a callback to be invoked when format state of editor is changed, returns a disposer function.
      */
-    registerFormatChangedCallback(callback: (formatState: ContentModelFormatState) => void) {
+    registerFormatChangedCallback(callback: (formatState: FormatState) => void) {
         this.onFormatChanged = callback;
 
         return () => {
@@ -162,7 +162,7 @@ export class ContentModelRibbonPlugin implements RibbonPlugin {
                 )
             ) {
                 this.formatState = newFormatState;
-                this.onFormatChanged(newFormatState);
+                this.onFormatChanged((newFormatState as any) as FormatState);
             }
         }
     }

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/formatTableButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/formatTableButton.ts
@@ -1,6 +1,194 @@
 import { formatTable, isContentModelEditor } from 'roosterjs-content-model-editor';
-import { PREDEFINED_STYLES } from '../../sidePane/shared/PredefinedTableStyles';
 import { RibbonButton } from 'roosterjs-react';
+import { TableBorderFormat, TableMetadataFormat } from 'roosterjs-content-model-types';
+
+const PREDEFINED_STYLES: Record<
+    string,
+    (color?: string, lightColor?: string) => TableMetadataFormat
+> = {
+    DEFAULT: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            color /** verticalColors*/,
+            false /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.DEFAULT /** tableBorderFormat */,
+            null /** bgColorEven */,
+            lightColor /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+    DEFAULT_WITH_BACKGROUND_COLOR: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            color /** verticalColors*/,
+            false /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.DEFAULT /** tableBorderFormat */,
+            null /** bgColorEven */,
+            lightColor /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+    GRID_WITHOUT_BORDER: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            color /** verticalColors*/,
+            true /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.NO_SIDE_BORDERS /** tableBorderFormat */,
+            null /** bgColorEven */,
+            lightColor /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+    LIST: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            null /** verticalColors*/,
+            false /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.DEFAULT /** tableBorderFormat */,
+            null /** bgColorEven */,
+            lightColor /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+    BANDED_ROWS_FIRST_COLUMN_NO_BORDER: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            color /** verticalColors*/,
+            false /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.FIRST_COLUMN_HEADER_EXTERNAL /** tableBorderFormat */,
+            null /** bgColorEven */,
+            lightColor /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+    EXTERNAL: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            color /** verticalColors*/,
+            false /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.LIST_WITH_SIDE_BORDERS /** tableBorderFormat */,
+            null /** bgColorEven */,
+            lightColor /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+    NO_HEADER_VERTICAL: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            color /** verticalColors*/,
+            false /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.NO_HEADER_BORDERS /** tableBorderFormat */,
+            null /** bgColorEven */,
+            lightColor /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+    ESPECIAL_TYPE_1: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            color /** verticalColors*/,
+            false /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.ESPECIAL_TYPE_1 /** tableBorderFormat */,
+            null /** bgColorEven */,
+            lightColor /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+    ESPECIAL_TYPE_2: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            color /** verticalColors*/,
+            false /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.ESPECIAL_TYPE_2 /** tableBorderFormat */,
+            null /** bgColorEven */,
+            lightColor /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+    ESPECIAL_TYPE_3: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            color /** verticalColors*/,
+            false /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.ESPECIAL_TYPE_3 /** tableBorderFormat */,
+            lightColor /** bgColorEven */,
+            null /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+    CLEAR: (color, lightColor) =>
+        createTableFormat(
+            color /**topBorder */,
+            color /**bottomBorder */,
+            color /** verticalColors*/,
+            false /** bandedRows */,
+            false /** bandedColumns */,
+            false /** headerRow */,
+            false /** firstColumn */,
+            TableBorderFormat.CLEAR /** tableBorderFormat */,
+            lightColor /** bgColorEven */,
+            null /** bgColorOdd */,
+            color /** headerRowColor */
+        ),
+};
+
+export function createTableFormat(
+    topBorder?: string,
+    bottomBorder?: string,
+    verticalBorder?: string,
+    bandedRows?: boolean,
+    bandedColumns?: boolean,
+    headerRow?: boolean,
+    firstColumn?: boolean,
+    borderFormat?: TableBorderFormat,
+    bgColorEven?: string,
+    bgColorOdd?: string,
+    headerRowColor?: string
+): TableMetadataFormat {
+    return {
+        topBorderColor: topBorder,
+        bottomBorderColor: bottomBorder,
+        verticalBorderColor: verticalBorder,
+        hasBandedRows: bandedRows,
+        bgColorEven: bgColorEven,
+        bgColorOdd: bgColorOdd,
+        hasBandedColumns: bandedColumns,
+        hasHeaderRow: headerRow,
+        headerRowColor: headerRowColor,
+        hasFirstColumn: firstColumn,
+        tableBorderFormat: borderFormat,
+    };
+}
 
 export const formatTableButton: RibbonButton<'ribbonButtonTableFormat'> = {
     key: 'ribbonButtonTableFormat',

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/setBulletedListStyleButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/setBulletedListStyleButton.ts
@@ -1,4 +1,4 @@
-import { BulletListType } from 'roosterjs-editor-types';
+import { BulletListType } from 'roosterjs-content-model-types';
 import { isContentModelEditor, setListStyle } from 'roosterjs-content-model-editor';
 import { RibbonButton } from 'roosterjs-react';
 const dropDownMenuItems = {

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/setNumberedListStyleButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/setNumberedListStyleButton.ts
@@ -1,5 +1,5 @@
 import { isContentModelEditor, setListStyle } from 'roosterjs-content-model-editor';
-import { NumberingListType } from 'roosterjs-editor-types';
+import { NumberingListType } from 'roosterjs-content-model-types';
 import { RibbonButton } from 'roosterjs-react';
 
 const dropDownMenuItems = {

diff --git a/.../sidePane/shared/PredefinedTableStyles.ts → ...layground/vtable/PredefinedTableStyles.ts b/.../sidePane/shared/PredefinedTableStyles.ts → ...layground/vtable/PredefinedTableStyles.ts
@@ -1,9 +1,8 @@
 import { TableBorderFormat, TableFormat } from 'roosterjs-editor-types';
-import { TableMetadataFormat } from 'roosterjs-content-model-types';
 
 export const PREDEFINED_STYLES: Record<
     string,
-    (color?: string, lightColor?: string) => TableFormat & TableMetadataFormat
+    (color?: string, lightColor?: string) => TableFormat
 > = {
     DEFAULT: (color, lightColor) =>
         createTableFormat(
@@ -173,7 +172,7 @@ export function createTableFormat(
     bgColorEven?: string,
     bgColorOdd?: string,
     headerRowColor?: string
-): TableFormat & TableMetadataFormat {
+): TableFormat {
     return {
         topBorderColor: topBorder,
         bottomBorderColor: bottomBorder,

diff --git a/demo/scripts/controls/sidePane/apiPlayground/vtable/VTablePane.tsx b/demo/scripts/controls/sidePane/apiPlayground/vtable/VTablePane.tsx
@@ -2,7 +2,7 @@ import * as Color from 'color';
 import * as React from 'react';
 import ApiPaneProps from '../ApiPaneProps';
 import ColorPicker from '../../../colorPicker/ColorPicker';
-import { createTableFormat, PREDEFINED_STYLES } from '../../shared/PredefinedTableStyles';
+import { createTableFormat, PREDEFINED_STYLES } from './PredefinedTableStyles';
 import { editTable, formatTable } from 'roosterjs-editor-api';
 import { getTagOfNode, VTable } from 'roosterjs-editor-dom';
 import { IEditor, PositionType, TableFormat, TableOperation, VCell } from 'roosterjs-editor-types';

diff --git a/demo/scripts/controls/sidePane/formatState/ContentModelFormatStatePlugin.ts b/demo/scripts/controls/sidePane/formatState/ContentModelFormatStatePlugin.ts
@@ -1,4 +1,5 @@
 import FormatStatePlugin from './FormatStatePlugin';
+import { FormatState } from 'roosterjs-editor-types';
 import { getFormatState, IContentModelEditor } from 'roosterjs-content-model-editor';
 import { getPositionRect } from 'roosterjs-editor-dom';
 
@@ -8,7 +9,7 @@ export default class ContentModelFormatStatePlugin extends FormatStatePlugin {
             return null;
         }
 
-        const format = getFormatState(this.editor as IContentModelEditor);
+        const format = (getFormatState(this.editor as IContentModelEditor) as any) as FormatState;
         const position = this.editor && this.editor.getFocusedPosition();
         const rect = position && getPositionRect(position);
         return {

diff --git a/...content-model/roosterjs-content-model-dom/test/domToModel/processors/listProcessorTest.ts b/...content-model/roosterjs-content-model-dom/test/domToModel/processors/listProcessorTest.ts
@@ -1,10 +1,14 @@
 import * as stackFormat from '../../../lib/domToModel/utils/stackFormat';
-import { BulletListType, NumberingListType } from 'roosterjs-editor-types';
 import { childProcessor as originalChildProcessor } from '../../../lib/domToModel/processors/childProcessor';
 import { createContentModelDocument } from '../../../lib/modelApi/creators/createContentModelDocument';
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
-import { DomToModelContext, ElementProcessor } from 'roosterjs-content-model-types';
 import { listProcessor } from '../../../lib/domToModel/processors/listProcessor';
+import {
+    BulletListType,
+    DomToModelContext,
+    ElementProcessor,
+    NumberingListType,
+} from 'roosterjs-content-model-types';
 
 describe('listProcessor', () => {
     let context: DomToModelContext;

diff --git a/...ages-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleListTest.ts b/...ages-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleListTest.ts
@@ -1,10 +1,14 @@
-import { BulletListType, NumberingListType } from 'roosterjs-editor-types';
-import { ContentModelListItem, ModelToDomContext } from 'roosterjs-content-model-types';
 import { createListItem } from '../../../lib/modelApi/creators/createListItem';
 import { createListLevel } from '../../../lib/modelApi/creators/createListLevel';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
 import { expectHtml } from 'roosterjs-editor-dom/test/DomTestHelper';
 import { handleList } from '../../../lib/modelToDom/handlers/handleList';
+import {
+    BulletListType,
+    ContentModelListItem,
+    ModelToDomContext,
+    NumberingListType,
+} from 'roosterjs-content-model-types';
 
 describe('handleList without format handlers', () => {
     let context: ModelToDomContext;

diff --git a/...-content-model/roosterjs-content-model-editor/lib/domUtils/metadata/updateListMetadata.ts b/...-content-model/roosterjs-content-model-editor/lib/domUtils/metadata/updateListMetadata.ts
@@ -1,4 +1,4 @@
-import { BulletListType, NumberingListType } from 'roosterjs-editor-types';
+import { BulletListType, NumberingListType } from 'roosterjs-content-model-types';
 import { createNumberDefinition, createObjectDefinition } from './definitionCreators';
 import { getObjectKeys, updateMetadata } from 'roosterjs-content-model-dom';
 import type {

diff --git a/...ent-model/roosterjs-content-model-editor/lib/domUtils/metadata/updateTableCellMetadata.ts b/...ent-model/roosterjs-content-model-editor/lib/domUtils/metadata/updateTableCellMetadata.ts
@@ -1,7 +1,6 @@
 import { createBooleanDefinition, createObjectDefinition } from './definitionCreators';
 import { updateMetadata } from 'roosterjs-content-model-dom';
-import type { ContentModelTableCell } from 'roosterjs-content-model-types';
-import type { TableCellMetadataFormat } from 'roosterjs-editor-types';
+import type { ContentModelTableCell, TableCellMetadataFormat } from 'roosterjs-content-model-types';
 
 const TableCellMetadataFormatDefinition = createObjectDefinition<Required<TableCellMetadataFormat>>(
     {

diff --git a/...content-model/roosterjs-content-model-editor/lib/domUtils/metadata/updateTableMetadata.ts b/...content-model/roosterjs-content-model-editor/lib/domUtils/metadata/updateTableMetadata.ts
@@ -1,11 +1,11 @@
+import { TableBorderFormat } from 'roosterjs-content-model-types';
+import { updateMetadata } from 'roosterjs-content-model-dom';
 import {
     createBooleanDefinition,
     createNumberDefinition,
     createObjectDefinition,
     createStringDefinition,
 } from './definitionCreators';
-import { TableBorderFormat } from 'roosterjs-editor-types';
-import { updateMetadata } from 'roosterjs-content-model-dom';
 import type { ContentModelTable, TableMetadataFormat } from 'roosterjs-content-model-types';
 
 const NullStringDefinition = createStringDefinition(

diff --git a/packages-content-model/roosterjs-content-model-editor/lib/index.ts b/packages-content-model/roosterjs-content-model-editor/lib/index.ts
@@ -33,6 +33,9 @@ export {
     FormatWithContentModelContext,
     FormatWithContentModelOptions,
     ContentModelFormatter,
+    EntityLifecycleOperation,
+    EntityOperation,
+    EntityRemovalOperation,
 } from './publicTypes/parameter/FormatWithContentModelContext';
 export {
     InsertEntityOptions,