Bump version to 8.59.0 (#2203)

* margin in lists * remove code * type * refactor * fixes * remove parameter * refactor * remove file change * Use Content Model to handle Delete/Backspace key in more cases (#2162) * Do not set focus when quite shadow edit (#2163) * Fix #237217 (#2164) * Fix #237735 (#2165) * Fix #236416 (#2166) * wip * fixes * Fix #2160 (#2167) * Fix #2160 * fix build * test * remove test * remove test * remove test * Rearrange parameters of iterateSelections (#2180) * Rearrange parameters of iterateSelections * improve * Standalone editor step 0: Create a copy of Editor class (#2175) * Standalone editor step 0: Create a copy of Editor class * remove unnecessary change * improve * Fix #2061, apply pending format on Android (#2172) * Fix #2061 * Fix for Android * Fix #2080 (#2173) * Standalone editor Step 0.5: Create test page for adapter editor (#2176) * Standalone editor step 0: Create a copy of Editor class * Standalone editor Step 0.5: Create test page for adapter editor * Add Content Model functionality to AdapterEditor * remove unnecessary change * remove unnecessary change * improve * toggleListType * type * Fix Mouseout behavior to hide table editors (#2181) * init * init * fix build * Add comment * Fix apply Table Inside borders operation and Demo site (#2184) * fix cases * fix demo * Add image size checkmarks to context menu (#2168) * Allow a max error un percentage size check * Allow a checkmark to be shown in ctx menu * Add checkmark to image sizes * Add missing type * Fix types * Add comment * Attempt to fix image selection * Revert unneeded changes in image selection * Use attr as backup in resize calc * Rely entirely on image selection * Revert changes to domeventplugin * Copy changes into content model adapter * Revert previous standalone editor change (#2189) * Revert previous standalone change * fix build * Move formatWithContentModel to be a core API (#2185) * Content Model: Allow clear cache from formatContentModel (#2186) * Move formatWithContentModel to be a core API * Content Model: Allow clear cache from formatContentModel * Content Model: Potential perf improvement in getFormatState (#2187) * Content Model: Move pending format into editor core (#2188) * Move formatWithContentModel to be a core API * Content Model: Allow clear cache from formatContentModel * Content Model: Move pending format into editor core * Convert DeleteResult from const enum to string literal type (#2191) * Move paste plugin to roosterjs-content-model-plugins package (#2192) * image selection plugin * check image parent node * Adding module entry to package.json (#2197) * Move ContentModelEdit plugin to plugins package (#2195) * Move ContentModelEdit plugin to plugins package * improve --------- Co-authored-by: Bryan Valverde U <[email protected]> * 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 * 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 * Move corePlugins to roosterjs-content-model-core package (#2199) * 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 * fix build * Move format API to roosterjs-content-model-api package (#2200) * 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 --------- Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]> Co-authored-by: Andres-CT98 <[email protected]> Co-authored-by: Ian Elizondo <[email protected]> Co-authored-by: Keven Arroyo <[email protected]>
microsoft · Nov 10, 2023 · bbf6a43 · bbf6a43
1 parent 8a4f529
commit bbf6a43
Show file tree

Hide file tree

Showing 457 changed files with 8,591 additions and 6,939 deletions.
diff --git a/demo/scripts/controls/ContentModelEditorMainPane.tsx b/demo/scripts/controls/ContentModelEditorMainPane.tsx
@@ -15,15 +15,11 @@ import SnapshotPlugin from './sidePane/snapshot/SnapshotPlugin';
 import TitleBar from './titleBar/TitleBar';
 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 { createEmojiPlugin, createPasteOptionPlugin, RibbonPlugin } from 'roosterjs-react';
 import { EditorOptions, EditorPlugin } from 'roosterjs-editor-types';
 import { PartialTheme } from '@fluentui/react/lib/Theme';
-import {
-    createRibbonPlugin,
-    RibbonPlugin,
-    createPasteOptionPlugin,
-    createEmojiPlugin,
-} from 'roosterjs-react';
 
 const styles = require('./ContentModelEditorMainPane.scss');
 
@@ -86,8 +82,8 @@ class ContentModelEditorMainPane extends MainPaneBase {
     private editorOptionPlugin: ContentModelEditorOptionsPlugin;
     private eventViewPlugin: ContentModelEventViewPlugin;
     private apiPlaygroundPlugin: ApiPlaygroundPlugin;
-    private ContentModelPanePlugin: ContentModelPanePlugin;
-    private ribbonPlugin: RibbonPlugin;
+    private contentModelPanePlugin: ContentModelPanePlugin;
+    private contentModelEditPlugin: ContentModelEditPlugin;
     private contentModelRibbonPlugin: RibbonPlugin;
     private pasteOptionPlugin: EditorPlugin;
     private emojiPlugin: EditorPlugin;
@@ -103,8 +99,8 @@ class ContentModelEditorMainPane extends MainPaneBase {
         this.eventViewPlugin = new ContentModelEventViewPlugin();
         this.apiPlaygroundPlugin = new ApiPlaygroundPlugin();
         this.snapshotPlugin = new SnapshotPlugin();
-        this.ContentModelPanePlugin = new ContentModelPanePlugin();
-        this.ribbonPlugin = createRibbonPlugin();
+        this.contentModelPanePlugin = new ContentModelPanePlugin();
+        this.contentModelEditPlugin = new ContentModelEditPlugin();
         this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
         this.pasteOptionPlugin = createPasteOptionPlugin();
         this.emojiPlugin = createEmojiPlugin();
@@ -131,7 +127,7 @@ class ContentModelEditorMainPane extends MainPaneBase {
     }
 
     renderTitleBar() {
-        return <TitleBar className={styles.noGrow} isContentModelPane={true} />;
+        return <TitleBar className={styles.noGrow} mode="contentModel" />;
     }
 
     renderRibbon(isPopout: boolean) {
@@ -165,9 +161,9 @@ class ContentModelEditorMainPane extends MainPaneBase {
 
         const plugins = [
             ...this.toggleablePlugins,
-            this.ribbonPlugin,
             this.contentModelRibbonPlugin,
-            this.ContentModelPanePlugin.getInnerRibbonPlugin(),
+            this.contentModelPanePlugin.getInnerRibbonPlugin(),
+            this.contentModelEditPlugin,
             this.pasteOptionPlugin,
             this.emojiPlugin,
             this.formatPainterPlugin,
@@ -205,7 +201,7 @@ class ContentModelEditorMainPane extends MainPaneBase {
             this.eventViewPlugin,
             this.apiPlaygroundPlugin,
             this.snapshotPlugin,
-            this.ContentModelPanePlugin,
+            this.contentModelPanePlugin,
         ];
     }
 }

diff --git a/demo/scripts/controls/MainPane.tsx b/demo/scripts/controls/MainPane.tsx
@@ -143,7 +143,7 @@ class MainPane extends MainPaneBase {
     }
 
     renderTitleBar() {
-        return <TitleBar className={styles.noGrow} isContentModelPane={false} />;
+        return <TitleBar className={styles.noGrow} mode="classical" />;
     }
 
     renderRibbon(isPopout: boolean) {

diff --git a/demo/scripts/controls/MainPaneBase.tsx b/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';

diff --git a/demo/scripts/controls/contentModel/components/format/formatPart/BorderFormatRenderers.ts b/demo/scripts/controls/contentModel/components/format/formatPart/BorderFormatRenderers.ts
@@ -1,8 +1,8 @@
+import { BorderFormat } from 'roosterjs-content-model-types';
+import { combineBorderValue, extractBorderValues } from 'roosterjs-content-model-core';
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { BorderFormat } from 'roosterjs-content-model-types';
-import { combineBorderValue, extractBorderValues } from 'roosterjs-content-model-editor';
 
 type BorderStyle =
     | 'dashed'

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelDocumentView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelDocumentView.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BlockGroupContentView } from './BlockGroupContentView';
 import { ContentModelDocument } from 'roosterjs-content-model-types';
 import { ContentModelView } from '../ContentModelView';
-import { hasSelectionInBlockGroup } from 'roosterjs-content-model-editor';
+import { hasSelectionInBlockGroup } from 'roosterjs-content-model-api';
 
 const styles = require('./ContentModelDocumentView.scss');
 

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelFormatContainerView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelFormatContainerView.tsx
@@ -5,7 +5,7 @@ import { ContentModelView } from '../ContentModelView';
 import { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
-import { hasSelectionInBlock } from 'roosterjs-content-model-editor';
+import { hasSelectionInBlock } from 'roosterjs-content-model-api';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
 import {

diff --git a/demo/scripts/controls/contentModel/components/model/ContentModelGeneralView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelGeneralView.tsx
@@ -3,7 +3,7 @@ import { BlockGroupContentView } from './BlockGroupContentView';
 import { ContentModelCodeView } from './ContentModelCodeView';
 import { ContentModelLinkView } from './ContentModelLinkView';
 import { ContentModelView } from '../ContentModelView';
-import { hasSelectionInBlock } from 'roosterjs-content-model-editor';
+import { hasSelectionInBlock } from 'roosterjs-content-model-api';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 import {
     ContentModelGeneralBlock,

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/ContentModelListItemView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelListItemView.tsx
@@ -7,7 +7,7 @@ import { FontFamilyFormatRenderer } from '../format/formatPart/FontFamilyFormatR
 import { FontSizeFormatRenderer } from '../format/formatPart/FontSizeFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
-import { hasSelectionInBlockGroup } from 'roosterjs-content-model-editor';
+import { hasSelectionInBlockGroup } from 'roosterjs-content-model-api';
 import { LineHeightFormatRenderer } from '../format/formatPart/LineHeightFormatRenderer';
 import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
 import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';

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/ContentModelParagraphView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelParagraphView.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BlockFormatView } from '../format/BlockFormatView';
 import { ContentModelSegmentView } from './ContentModelSegmentView';
 import { ContentModelView } from '../ContentModelView';
-import { hasSelectionInBlock } from 'roosterjs-content-model-editor';
+import { hasSelectionInBlock } from 'roosterjs-content-model-api';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 import { useProperty } from '../../hooks/useProperty';
 import {

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-api';
 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/ContentModelTableRowView.tsx b/demo/scripts/controls/contentModel/components/model/ContentModelTableRowView.tsx
@@ -5,7 +5,7 @@ import { ContentModelBlockGroupView } from './ContentModelBlockGroupView';
 import { ContentModelView } from '../ContentModelView';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
-import { hasSelectionInBlockGroup } from 'roosterjs-content-model-editor';
+import { hasSelectionInBlockGroup } from 'roosterjs-content-model-api';
 import { useProperty } from '../../hooks/useProperty';
 
 const styles = require('./ContentModelTableRowView.scss');

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-api';
 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/controls/contentModel/plugins/ContentModelFormatPainterPlugin.ts b/demo/scripts/controls/contentModel/plugins/ContentModelFormatPainterPlugin.ts
@@ -1,10 +1,7 @@
+import { applySegmentFormat, getFormatState } from 'roosterjs-content-model-api';
 import { ContentModelSegmentFormat } from 'roosterjs-content-model-types';
 import { EditorPlugin, IEditor, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
-import {
-    applySegmentFormat,
-    getFormatState,
-    IContentModelEditor,
-} from 'roosterjs-content-model-editor';
+import { IContentModelEditor } from 'roosterjs-content-model-editor';
 
 const FORMATPAINTERCURSOR_SVG = require('./formatpaintercursor.svg');
 const FORMATPAINTERCURSOR_STYLE = `;cursor: url("${FORMATPAINTERCURSOR_SVG}") 8.5 16, auto`;

diff --git a/demo/scripts/controls/getToggleablePlugins.ts b/demo/scripts/controls/getToggleablePlugins.ts
@@ -2,7 +2,7 @@ import BuildInPluginState, { BuildInPluginList, UrlPlaceholder } from './BuildIn
 import { Announce } from 'roosterjs-editor-plugins/lib/Announce';
 import { AutoFormat } from 'roosterjs-editor-plugins/lib/AutoFormat';
 import { ContentEdit } from 'roosterjs-editor-plugins/lib/ContentEdit';
-import { ContentModelPastePlugin } from 'roosterjs-content-model-editor';
+import { ContentModelPastePlugin } from 'roosterjs-content-model-plugins';
 import { CustomReplace as CustomReplacePlugin } from 'roosterjs-editor-plugins/lib/CustomReplace';
 import { CutPasteListChain } from 'roosterjs-editor-plugins/lib/CutPasteListChain';
 import { EditorPlugin, KnownAnnounceStrings } from 'roosterjs-editor-types';

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts b/demo/scripts/controls/ribbonButtons/contentModel/ContentModelRibbonPlugin.ts
@@ -1,11 +1,9 @@
+import { ContentModelFormatState } from 'roosterjs-content-model-types';
 import { FormatState, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
+import { getFormatState } from 'roosterjs-content-model-api';
 import { getObjectKeys } from 'roosterjs-editor-dom';
+import { IContentModelEditor } from 'roosterjs-content-model-editor';
 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;

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/alignCenterButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/alignCenterButton.ts
@@ -1,5 +1,6 @@
 import { AlignCenterButtonStringKey, RibbonButton } from 'roosterjs-react';
-import { isContentModelEditor, setAlignment } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
+import { setAlignment } from 'roosterjs-content-model-api';
 
 /**
  * @internal

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/alignLeftButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/alignLeftButton.ts
@@ -1,5 +1,6 @@
 import { AlignLeftButtonStringKey, RibbonButton } from 'roosterjs-react';
-import { isContentModelEditor, setAlignment } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
+import { setAlignment } from 'roosterjs-content-model-api';
 
 /**
  * @internal

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/alignRightButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/alignRightButton.ts
@@ -1,5 +1,6 @@
 import { AlignRightButtonStringKey, RibbonButton } from 'roosterjs-react';
-import { isContentModelEditor, setAlignment } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
+import { setAlignment } from 'roosterjs-content-model-api';
 
 /**
  * @internal

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/backgroundColorButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/backgroundColorButton.ts
@@ -1,4 +1,5 @@
-import { isContentModelEditor, setBackgroundColor } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
+import { setBackgroundColor } from 'roosterjs-content-model-api';
 import {
     BackgroundColorButtonStringKey,
     getBackgroundColorValue,

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/blockQuoteButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/blockQuoteButton.ts
@@ -1,5 +1,6 @@
-import { isContentModelEditor, toggleBlockQuote } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
 import { QuoteButtonStringKey, RibbonButton } from 'roosterjs-react';
+import { toggleBlockQuote } from 'roosterjs-content-model-api';
 
 /**
  * @internal

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/boldButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/boldButton.ts
@@ -1,5 +1,6 @@
 import { BoldButtonStringKey, RibbonButton } from 'roosterjs-react';
-import { isContentModelEditor, toggleBold } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
+import { toggleBold } from 'roosterjs-content-model-api';
 
 /**
  * @internal

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/bulletedListButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/bulletedListButton.ts
@@ -1,5 +1,6 @@
 import { BulletedListButtonStringKey, RibbonButton } from 'roosterjs-react';
-import { isContentModelEditor, toggleBullet } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
+import { toggleBullet } from 'roosterjs-content-model-api';
 
 /**
  * @internal

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/changeImageButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/changeImageButton.ts
@@ -1,6 +1,7 @@
-import { changeImage, isContentModelEditor } from 'roosterjs-content-model-editor';
+import { changeImage } from 'roosterjs-content-model-api';
 import { createElement } from 'roosterjs-editor-dom';
 import { CreateElementData } from 'roosterjs-editor-types';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
 import { RibbonButton } from 'roosterjs-react';
 
 const FileInput: CreateElementData = {

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/clearFormatButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/clearFormatButton.ts
@@ -1,5 +1,6 @@
-import { clearFormat, isContentModelEditor } from 'roosterjs-content-model-editor';
+import { clearFormat } from 'roosterjs-content-model-api';
 import { ClearFormatButtonStringKey, RibbonButton } from 'roosterjs-react';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
 
 /**
  * "Clear format" button on the format ribbon

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/codeButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/codeButton.ts
@@ -1,5 +1,6 @@
 import { CodeButtonStringKey, RibbonButton } from 'roosterjs-react';
-import { isContentModelEditor, toggleCode } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
+import { toggleCode } from 'roosterjs-content-model-api';
 
 /**
  * @internal

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/decreaseFontSizeButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/decreaseFontSizeButton.ts
@@ -1,5 +1,6 @@
-import { changeFontSize, isContentModelEditor } from 'roosterjs-content-model-editor';
+import { changeFontSize } from 'roosterjs-content-model-api';
 import { DecreaseFontSizeButtonStringKey, RibbonButton } from 'roosterjs-react';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
 
 /**
  * @internal

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/decreaseIndentButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/decreaseIndentButton.ts
@@ -1,5 +1,6 @@
 import { DecreaseIndentButtonStringKey, RibbonButton } from 'roosterjs-react';
-import { isContentModelEditor, setIndentation } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
+import { setIndentation } from 'roosterjs-content-model-api';
 
 /**
  * @internal

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/fontButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/fontButton.ts
@@ -1,5 +1,6 @@
 import { FontButtonStringKey, RibbonButton } from 'roosterjs-react';
-import { isContentModelEditor, setFontName } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
+import { setFontName } from 'roosterjs-content-model-api';
 
 interface FontName {
     name: string;

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/fontSizeButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/fontSizeButton.ts
@@ -1,5 +1,6 @@
 import { FontSizeButtonStringKey, RibbonButton } from 'roosterjs-react';
-import { isContentModelEditor, setFontSize } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
+import { setFontSize } from 'roosterjs-content-model-api';
 
 const FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
 

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/formatTableButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/formatTableButton.ts
@@ -1,4 +1,5 @@
-import { formatTable, isContentModelEditor } from 'roosterjs-content-model-editor';
+import { formatTable } from 'roosterjs-content-model-api';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
 import { RibbonButton } from 'roosterjs-react';
 import { TableBorderFormat, TableMetadataFormat } from 'roosterjs-content-model-types';
 
@@ -67,12 +68,12 @@ const PREDEFINED_STYLES: Record<
             color /**topBorder */,
             color /**bottomBorder */,
             color /** verticalColors*/,
-            false /** bandedRows */,
+            true /** bandedRows */,
             false /** bandedColumns */,
             false /** headerRow */,
             false /** firstColumn */,
             TableBorderFormat.FIRST_COLUMN_HEADER_EXTERNAL /** tableBorderFormat */,
-            null /** bgColorEven */,
+            '#B0B0B0' /** bgColorEven */,
             lightColor /** bgColorOdd */,
             color /** headerRowColor */
         ),

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/imageBorderColorButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/imageBorderColorButton.ts
@@ -1,6 +1,7 @@
 import { getButtons, getTextColorValue, KnownRibbonButtonKey } from 'roosterjs-react';
-import { isContentModelEditor, setImageBorder } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
 import { RibbonButton } from 'roosterjs-react';
+import { setImageBorder } from 'roosterjs-content-model-api';
 
 const originalButton = getButtons([KnownRibbonButtonKey.TextColor])[0] as RibbonButton<
     'buttonNameImageBorderColor'

diff --git a/demo/scripts/controls/ribbonButtons/contentModel/imageBorderRemoveButton.ts b/demo/scripts/controls/ribbonButtons/contentModel/imageBorderRemoveButton.ts
@@ -1,5 +1,6 @@
-import { isContentModelEditor, setImageBorder } from 'roosterjs-content-model-editor';
+import { isContentModelEditor } from 'roosterjs-content-model-editor';
 import { RibbonButton } from 'roosterjs-react';
+import { setImageBorder } from 'roosterjs-content-model-api';
 
 /**
  * @internal