Version bump: 8.61 & content model 0.27

demo/scripts/controls/BuildInPluginState.ts

@@ -15,7 +15,6 @@ export interface BuildInPluginList {
     imageEdit: boolean;
     cutPasteListChain: boolean;
     tableCellSelection: boolean;
-    tableResize: boolean;
     customReplace: boolean;
     listEditMenu: boolean;
     imageEditMenu: boolean;

demo/scripts/controls/ContentModelEditorMainPane.tsx

@@ -20,7 +20,6 @@ import { alignJustifyButton } from './ribbonButtons/contentModel/alignJustifyBut
 import { alignLeftButton } from './ribbonButtons/contentModel/alignLeftButton';
 import { alignRightButton } from './ribbonButtons/contentModel/alignRightButton';
 import { arrayPush } from 'roosterjs-editor-dom';
-import { AutoFormatPlugin, EditPlugin, PastePlugin } from 'roosterjs-content-model-plugins';
 import { backgroundColorButton } from './ribbonButtons/contentModel/backgroundColorButton';
 import { blockQuoteButton } from './ribbonButtons/contentModel/blockQuoteButton';
 import { boldButton } from './ribbonButtons/contentModel/boldButton';
@@ -80,11 +79,13 @@ import { trustedHTMLHandler } from '../utils/trustedHTMLHandler';
 import { underlineButton } from './ribbonButtons/contentModel/underlineButton';
 import { undoButton } from './ribbonButtons/contentModel/undoButton';
 import { zoom } from './ribbonButtons/contentModel/zoom';
+import { ContentModelSegmentFormat, IEditor, Snapshots } from 'roosterjs-content-model-types';
 import {
-    ContentModelSegmentFormat,
-    IStandaloneEditor,
-    Snapshots,
-} from 'roosterjs-content-model-types';
+    AutoFormatPlugin,
+    EditPlugin,
+    PastePlugin,
+    TableEditPlugin,
+} from 'roosterjs-content-model-plugins';
 import {
     spaceAfterButton,
     spaceBeforeButton,
@@ -155,7 +156,7 @@ const DarkTheme: PartialTheme = {
 };
 
 interface ContentModelMainPaneState extends MainPaneBaseState {
-    editorCreator: (div: HTMLDivElement, options: EditorAdapterOptions) => IStandaloneEditor;
+    editorCreator: (div: HTMLDivElement, options: EditorAdapterOptions) => IEditor;
 }
 
 class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState> {
@@ -174,6 +175,7 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
     private formatPainterPlugin: ContentModelFormatPainterPlugin;
     private pastePlugin: PastePlugin;
     private sampleEntityPlugin: SampleEntityPlugin;
+    private tableEditPlugin: TableEditPlugin;
     private snapshots: Snapshots;
     private buttons: ContentModelRibbonButton<any>[] = [
         formatPainterButton,
@@ -263,6 +265,7 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
         this.pasteOptionPlugin = createPasteOptionPlugin();
         this.emojiPlugin = createEmojiPlugin();
         this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
+        this.tableEditPlugin = new TableEditPlugin();
         this.pastePlugin = new PastePlugin();
         this.sampleEntityPlugin = new SampleEntityPlugin();
         this.state = {
@@ -382,6 +385,7 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
                                 this.contentModelRibbonPlugin,
                                 this.formatPainterPlugin,
                                 this.pastePlugin,
+                                this.tableEditPlugin,
                                 this.contentModelAutoFormatPlugin,
                                 this.contentModelEditPlugin,
                                 this.contentModelPanePlugin.getInnerRibbonPlugin(),

demo/scripts/controls/StandaloneEditorMainPane.tsx

@@ -17,7 +17,6 @@ import { alignCenterButton } from './ribbonButtons/contentModel/alignCenterButto
 import { alignJustifyButton } from './ribbonButtons/contentModel/alignJustifyButton';
 import { alignLeftButton } from './ribbonButtons/contentModel/alignLeftButton';
 import { alignRightButton } from './ribbonButtons/contentModel/alignRightButton';
-import { AutoFormatPlugin, EditPlugin } from 'roosterjs-content-model-plugins';
 import { backgroundColorButton } from './ribbonButtons/contentModel/backgroundColorButton';
 import { blockQuoteButton } from './ribbonButtons/contentModel/blockQuoteButton';
 import { boldButton } from './ribbonButtons/contentModel/boldButton';
@@ -30,6 +29,7 @@ import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentMo
 import { darkMode } from './ribbonButtons/contentModel/darkMode';
 import { decreaseFontSizeButton } from './ribbonButtons/contentModel/decreaseFontSizeButton';
 import { decreaseIndentButton } from './ribbonButtons/contentModel/decreaseIndentButton';
+import { Editor } from 'roosterjs-content-model-core';
 import { exportContent } from './ribbonButtons/contentModel/export';
 import { fontButton } from './ribbonButtons/contentModel/fontButton';
 import { fontSizeButton } from './ribbonButtons/contentModel/fontSizeButton';
@@ -63,7 +63,6 @@ import { setTableCellShadeButton } from './ribbonButtons/contentModel/setTableCe
 import { setTableHeaderButton } from './ribbonButtons/contentModel/setTableHeaderButton';
 import { Snapshots } from 'roosterjs-editor-types';
 import { spacingButton } from './ribbonButtons/contentModel/spacingButton';
-import { StandaloneEditor } from 'roosterjs-content-model-core';
 import { strikethroughButton } from './ribbonButtons/contentModel/strikethroughButton';
 import { subscriptButton } from './ribbonButtons/contentModel/subscriptButton';
 import { superscriptButton } from './ribbonButtons/contentModel/superscriptButton';
@@ -76,11 +75,17 @@ import { trustedHTMLHandler } from '../utils/trustedHTMLHandler';
 import { underlineButton } from './ribbonButtons/contentModel/underlineButton';
 import { undoButton } from './ribbonButtons/contentModel/undoButton';
 import { zoom } from './ribbonButtons/contentModel/zoom';
+import {
+    AutoFormatPlugin,
+    EditPlugin,
+    ShortcutPlugin,
+    TableEditPlugin,
+} from 'roosterjs-content-model-plugins';
 import {
     ContentModelSegmentFormat,
-    IStandaloneEditor,
+    IEditor,
     Snapshot,
-    StandaloneEditorOptions,
+    EditorOptions,
 } from 'roosterjs-content-model-types';
 import {
     spaceAfterButton,
@@ -152,7 +157,7 @@ const DarkTheme: PartialTheme = {
 };
 
 interface ContentModelMainPaneState extends MainPaneBaseState {
-    editorCreator: (div: HTMLDivElement, options: StandaloneEditorOptions) => IStandaloneEditor;
+    editorCreator: (div: HTMLDivElement, options: EditorOptions) => IEditor;
 }
 
 class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState> {
@@ -165,7 +170,9 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
     private contentModelRibbonPlugin: RibbonPlugin;
     private contentAutoFormatPlugin: AutoFormatPlugin;
     private snapshotPlugin: ContentModelSnapshotPlugin;
+    private shortcutPlugin: ShortcutPlugin;
     private formatPainterPlugin: ContentModelFormatPainterPlugin;
+    private tableEditPlugin: TableEditPlugin;
     private snapshots: Snapshots<Snapshot>;
     private buttons: ContentModelRibbonButton<any>[] = [
         formatPainterButton,
@@ -251,8 +258,10 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
         this.contentModelPanePlugin = new ContentModelPanePlugin();
         this.contentModelEditPlugin = new EditPlugin();
         this.contentAutoFormatPlugin = new AutoFormatPlugin();
+        this.shortcutPlugin = new ShortcutPlugin();
         this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
         this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
+        this.tableEditPlugin = new TableEditPlugin();
         this.state = {
             showSidePane: window.location.hash != '',
             popoutWindow: null,
@@ -305,8 +314,8 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
 
     resetEditor() {
         this.setState({
-            editorCreator: (div: HTMLDivElement, options: StandaloneEditorOptions) =>
-                new StandaloneEditor(div, {
+            editorCreator: (div: HTMLDivElement, options: EditorOptions) =>
+                new Editor(div, {
                     ...options,
                     cacheModel: this.state.initState.cacheModel,
                 }),
@@ -345,8 +354,10 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
                             plugins={[
                                 this.contentModelRibbonPlugin,
                                 this.formatPainterPlugin,
+                                this.tableEditPlugin,
                                 this.contentModelEditPlugin,
                                 this.contentAutoFormatPlugin,
+                                this.shortcutPlugin,
                             ]}
                             defaultSegmentFormat={defaultFormat}
                             inDarkMode={this.state.isDarkMode}

demo/scripts/controls/contentModel/editor/ContentModelRooster.tsx

@@ -2,12 +2,8 @@ import * as React from 'react';
 import { createUIUtilities, ReactEditorPlugin, UIUtilities } from 'roosterjs-react';
 import { divProperties, getNativeProps } from '@fluentui/react/lib/Utilities';
 import { EditorAdapter, EditorAdapterOptions } from 'roosterjs-editor-adapter';
+import { EditorOptions, EditorPlugin, IEditor } from 'roosterjs-content-model-types';
 import { useTheme } from '@fluentui/react/lib/Theme';
-import {
-    EditorPlugin,
-    IStandaloneEditor,
-    StandaloneEditorOptions,
-} from 'roosterjs-content-model-types';
 import type { EditorPlugin as LegacyEditorPlugin } from 'roosterjs-editor-types';
 
 /**
@@ -20,7 +16,7 @@ export interface ContentModelRoosterProps
      * Creator function used for creating the instance of roosterjs editor.
      * Use this callback when you have your own sub class of roosterjs Editor or force trigging a reset of editor
      */
-    editorCreator?: (div: HTMLDivElement, options: StandaloneEditorOptions) => IStandaloneEditor;
+    editorCreator?: (div: HTMLDivElement, options: EditorOptions) => IEditor;
 
     /**
      * Whether editor should get focus once it is created
@@ -36,7 +32,7 @@ export interface ContentModelRoosterProps
  */
 export default function ContentModelRooster(props: ContentModelRoosterProps) {
     const editorDiv = React.useRef<HTMLDivElement>(null);
-    const editor = React.useRef<IStandaloneEditor | null>(null);
+    const editor = React.useRef<IEditor | null>(null);
     const theme = useTheme();
 
     const { focusOnInit, editorCreator, inDarkMode, plugins, legacyPlugins } = props;

demo/scripts/controls/contentModel/plugins/ContentModelFormatPainterPlugin.ts

@@ -3,15 +3,15 @@ import { applySegmentFormat, getFormatState } from 'roosterjs-content-model-api'
 import {
     ContentModelSegmentFormat,
     EditorPlugin,
-    IStandaloneEditor,
+    IEditor,
     PluginEvent,
 } from 'roosterjs-content-model-types';
 
 const FORMATPAINTERCURSOR_SVG = require('./formatpaintercursor.svg');
 const FORMATPAINTERCURSOR_STYLE = `cursor: url("${FORMATPAINTERCURSOR_SVG}") 8.5 16, auto`;
 
 export default class ContentModelFormatPainterPlugin implements EditorPlugin {
-    private editor: IStandaloneEditor | null = null;
+    private editor: IEditor | null = null;
     private styleNode: HTMLStyleElement | null = null;
     private painterFormat: ContentModelSegmentFormat | null = null;
     private static instance: ContentModelFormatPainterPlugin | undefined;
@@ -24,7 +24,7 @@ export default class ContentModelFormatPainterPlugin implements EditorPlugin {
         return 'FormatPainter';
     }
 
-    initialize(editor: IStandaloneEditor) {
+    initialize(editor: IEditor) {
         this.editor = editor;
 
         const doc = this.editor.getDocument();
@@ -77,7 +77,7 @@ export default class ContentModelFormatPainterPlugin implements EditorPlugin {
     }
 }
 
-function getSegmentFormat(editor: IStandaloneEditor): ContentModelSegmentFormat {
+function getSegmentFormat(editor: IEditor): ContentModelSegmentFormat {
     const formatState = getFormatState(editor);
 
     return {

demo/scripts/controls/getToggleablePlugins.ts

@@ -9,7 +9,6 @@ import { HyperLink } from 'roosterjs-editor-plugins/lib/HyperLink';
 import { ImageEdit } from 'roosterjs-editor-plugins/lib/ImageEdit';
 import { Paste } from 'roosterjs-editor-plugins/lib/Paste';
 import { TableCellSelection } from 'roosterjs-editor-plugins/lib/TableCellSelection';
-import { TableResize } from 'roosterjs-editor-plugins/lib/TableResize';
 import { Watermark } from 'roosterjs-editor-plugins/lib/Watermark';
 import {
     createContextMenuPlugin,
@@ -43,9 +42,6 @@ export default function getToggleablePlugins(initState: BuildInPluginState) {
         imageEdit,
         cutPasteListChain: pluginList.cutPasteListChain ? new CutPasteListChain() : null,
         tableCellSelection: pluginList.tableCellSelection ? new TableCellSelection() : null,
-        tableResize: pluginList.tableResize
-            ? new TableResize(undefined, initState.tableFeaturesContainerSelector)
-            : null,
         customReplace: pluginList.customReplace ? new CustomReplacePlugin() : null,
         autoFormat: pluginList.autoFormat ? new AutoFormat() : null,
         listEditMenu:

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

@@ -1,5 +1,5 @@
 import { LocalizedStrings, RibbonButtonDropDown, UIUtilities } from 'roosterjs-react';
-import type { IStandaloneEditor } from 'roosterjs-content-model-types';
+import type { IEditor } from 'roosterjs-content-model-types';
 import type { FormatState } from 'roosterjs-editor-types';
 import type { ICommandBarItemProps } from '@fluentui/react/lib/CommandBar';
 
@@ -35,7 +35,7 @@ export default interface ContentModelRibbonButton<T extends string> {
      * @param uiUtilities a utilities object to help render addition UI elements
      */
     onClick: (
-        editor: IStandaloneEditor,
+        editor: IEditor,
         key: T,
         strings: LocalizedStrings<T> | undefined,
         uiUtilities: UIUtilities

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

@@ -4,14 +4,10 @@ import { FormatState } from 'roosterjs-editor-types';
 import { getFormatState } from 'roosterjs-content-model-api';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 import { LocalizedStrings, UIUtilities } from 'roosterjs-react';
-import {
-    ContentModelFormatState,
-    IStandaloneEditor,
-    PluginEvent,
-} from 'roosterjs-content-model-types';
+import { ContentModelFormatState, IEditor, PluginEvent } from 'roosterjs-content-model-types';
 
 export class ContentModelRibbonPlugin implements RibbonPlugin {
-    private editor: IStandaloneEditor | null = null;
+    private editor: IEditor | null = null;
     private onFormatChanged: ((formatState: FormatState) => void) | null = null;
     private timer = 0;
     private formatState: ContentModelFormatState | null = null;
@@ -34,7 +30,7 @@ export class ContentModelRibbonPlugin implements RibbonPlugin {
      * Initialize this plugin
      * @param editor The editor instance
      */
-    initialize(editor: IStandaloneEditor) {
+    initialize(editor: IEditor) {
         this.editor = editor;
     }
 

demo/scripts/controls/sidePane/contentModel/ContentModelPanePlugin.ts

@@ -1,8 +1,8 @@
 import ContentModelPane, { ContentModelPaneProps } from './ContentModelPane';
 import SidePanePluginImpl from '../SidePanePluginImpl';
 import { ContentModelRibbonPlugin } from '../../ribbonButtons/contentModel/ContentModelRibbonPlugin';
-import { IEditor, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
-import { IStandaloneEditor } from 'roosterjs-content-model-types';
+import { IEditor as ILegacyEditor, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
+import { IEditor } from 'roosterjs-content-model-types';
 import { setCurrentContentModel } from './currentModel';
 import { SidePaneElementProps } from '../SidePaneElement';
 
@@ -17,10 +17,10 @@ export default class ContentModelPanePlugin extends SidePanePluginImpl<
         this.contentModelRibbon = new ContentModelRibbonPlugin();
     }
 
-    initialize(editor: IEditor): void {
+    initialize(editor: ILegacyEditor): void {
         super.initialize(editor);
 
-        this.contentModelRibbon.initialize(editor as IEditor & IStandaloneEditor); //  TODO: Port side pane to use IStandaloneEditor
+        this.contentModelRibbon.initialize(editor as ILegacyEditor & IEditor); //  TODO: Port side pane to use IStandaloneEditor
         editor.getDocument().addEventListener('selectionchange', this.onModelChangeFromSelection);
     }
 
@@ -36,8 +36,7 @@ export default class ContentModelPanePlugin extends SidePanePluginImpl<
     onPluginEvent(e: PluginEvent) {
         if (e.eventType == PluginEventType.ContentChanged && e.source == 'RefreshModel') {
             this.getComponent(component => {
-                // TODO: Port to use IStandaloneEditor and remove type cast here
-                const model = (this.editor as IEditor & IStandaloneEditor).getContentModelCopy(
+                const model = (this.editor as ILegacyEditor & IEditor).getContentModelCopy(
                     'connected'
                 );
                 component.setContentModel(model);
@@ -74,9 +73,7 @@ export default class ContentModelPanePlugin extends SidePanePluginImpl<
     private onModelChange = () => {
         this.getComponent(component => {
             // TODO: Port to use IStandaloneEditor and remove type cast here
-            const model = (this.editor as IEditor & IStandaloneEditor).getContentModelCopy(
-                'connected'
-            );
+            const model = (this.editor as ILegacyEditor & IEditor).getContentModelCopy('connected');
             component.setContentModel(model);
             setCurrentContentModel(model);
         });

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import ApiPaneProps from '../ApiPaneProps';
-import { Entity, IEditor } from 'roosterjs-editor-types';
+import { Entity, IEditor as ILegacyEditor } from 'roosterjs-editor-types';
 import { getEntityFromElement, getEntitySelector } from 'roosterjs-editor-dom';
+import { IEditor, InsertEntityOptions } from 'roosterjs-content-model-types';
 import { insertEntity } from 'roosterjs-content-model-api';
-import { InsertEntityOptions, IStandaloneEditor } from 'roosterjs-content-model-types';
 import { trustedHTMLHandler } from '../../../../utils/trustedHTMLHandler';
 
 const styles = require('./InsertEntityPane.scss');
@@ -114,7 +114,7 @@ export default class InsertEntityPane extends React.Component<ApiPaneProps, Inse
 
             if (isBlock) {
                 insertEntity(
-                    editor as IStandaloneEditor & IEditor,
+                    editor as IEditor & ILegacyEditor,
                     entityType,
                     true,
                     insertAtRoot
@@ -128,7 +128,7 @@ export default class InsertEntityPane extends React.Component<ApiPaneProps, Inse
                 );
             } else {
                 insertEntity(
-                    editor as IStandaloneEditor & IEditor,
+                    editor as IEditor & ILegacyEditor,
                     entityType,
                     isBlock,
                     insertAtTop ? 'begin' : insertAtBottom ? 'end' : 'focus',