Improve

demo/scripts/controlsV2/mainPane/MainPane.tsx

@@ -71,21 +71,9 @@ export class MainPane extends React.Component<{}, MainPaneState> {
     private eventViewPlugin: EventViewPlugin;
     private apiPlaygroundPlugin: ApiPlaygroundPlugin;
     private contentModelPanePlugin: ContentModelPanePlugin;
-    private editPlugin: EditPlugin;
-    private autoFormatPlugin: AutoFormatPlugin;
-    private shortcutPlugin: ShortcutPlugin;
     private ribbonPlugin: RibbonPlugin;
     private snapshotPlugin: SnapshotPlugin;
     private formatPainterPlugin: FormatPainterPlugin;
-    private pastePlugin: PastePlugin;
-    private listMenuPlugin: EditorPlugin;
-    private tableMenuPlugin: EditorPlugin;
-    private imageMenuPlugin: EditorPlugin;
-    private contextMenuPlugin: EditorPlugin;
-    private pasteOptionPlugin: EditorPlugin;
-    private tableEditPlugin: EditorPlugin;
-    private emojiPlugin: EditorPlugin;
-    private sampleEntityPlugin: EditorPlugin;
     private snapshots: Snapshots;
 
     protected sidePane = React.createRef<SidePane>();
@@ -120,20 +108,8 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         this.apiPlaygroundPlugin = new ApiPlaygroundPlugin();
         this.snapshotPlugin = new SnapshotPlugin(this.snapshots);
         this.contentModelPanePlugin = new ContentModelPanePlugin();
-        this.editPlugin = new EditPlugin();
-        this.autoFormatPlugin = new AutoFormatPlugin();
-        this.shortcutPlugin = new ShortcutPlugin();
         this.ribbonPlugin = createRibbonPlugin();
         this.formatPainterPlugin = new FormatPainterPlugin();
-        this.pastePlugin = new PastePlugin();
-        this.tableEditPlugin = new TableEditPlugin();
-        this.contextMenuPlugin = createContextMenuPlugin();
-        this.listMenuPlugin = createListEditMenuProvider();
-        this.tableMenuPlugin = createTableEditMenuProvider();
-        this.imageMenuPlugin = createImageEditMenuProvider();
-        this.pasteOptionPlugin = createPasteOptionPlugin();
-        this.emojiPlugin = createEmojiPlugin();
-        this.sampleEntityPlugin = new SampleEntityPlugin();
         this.state = {
             showSidePane: window.location.hash != '',
             popoutWindow: null,
@@ -296,20 +272,9 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         const plugins: EditorPlugin[] = [
             this.ribbonPlugin,
             this.formatPainterPlugin,
-            this.pastePlugin,
-            this.autoFormatPlugin,
-            this.shortcutPlugin,
-            this.editPlugin,
+            ...this.getToggleablePlugins(),
             this.contentModelPanePlugin.getInnerRibbonPlugin(),
             this.updateContentPlugin,
-            this.contextMenuPlugin,
-            this.listMenuPlugin,
-            this.tableMenuPlugin,
-            this.imageMenuPlugin,
-            this.pasteOptionPlugin,
-            this.tableEditPlugin,
-            this.emojiPlugin,
-            this.sampleEntityPlugin,
         ];
 
         if (this.state.showSidePane || this.state.popoutWindow) {
@@ -444,6 +409,30 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             this.contentModelPanePlugin,
         ];
     }
+
+    private getToggleablePlugins(): EditorPlugin[] {
+        const {
+            pluginList,
+            allowExcelNoBorderTable,
+            listMenu,
+            tableMenu,
+            imageMenu,
+        } = this.state.initState;
+        return [
+            pluginList.autoFormat && new AutoFormatPlugin(),
+            pluginList.edit && new EditPlugin(),
+            pluginList.paste && new PastePlugin(allowExcelNoBorderTable),
+            pluginList.shortcut && new ShortcutPlugin(),
+            pluginList.tableEdit && new TableEditPlugin(),
+            pluginList.emoji && createEmojiPlugin(),
+            pluginList.pasteOption && createPasteOptionPlugin(),
+            pluginList.sampleEntity && new SampleEntityPlugin(),
+            pluginList.contextMenu && createContextMenuPlugin(),
+            pluginList.contextMenu && listMenu && createListEditMenuProvider(),
+            pluginList.contextMenu && tableMenu && createTableEditMenuProvider(),
+            pluginList.contextMenu && imageMenu && createImageEditMenuProvider(),
+        ].filter(x => !!x);
+    }
 }
 
 export function mount(parent: HTMLElement) {

demo/scripts/controlsV2/plugins/createLegacyPlugins.ts

@@ -9,15 +9,15 @@ import {
     Watermark,
 } from 'roosterjs-editor-plugins';
 import {
-    BuildInPluginList,
+    LegacyPluginList,
     OptionState,
     UrlPlaceholder,
 } from '../sidePane/editorOptions/OptionState';
 
 export function createLegacyPlugins(initState: OptionState): LegacyEditorPlugin[] {
     const { pluginList, linkTitle } = initState;
 
-    const plugins: Record<keyof BuildInPluginList, LegacyEditorPlugin | null> = {
+    const plugins: Record<keyof LegacyPluginList, LegacyEditorPlugin | null> = {
         contentEdit: pluginList.contentEdit ? new ContentEdit(initState.contentEditFeatures) : null,
         hyperlink: pluginList.hyperlink
             ? new HyperLink(

demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts

@@ -6,6 +6,17 @@ import { SidePanePluginImpl } from '../SidePanePluginImpl';
 
 const initialState: OptionState = {
     pluginList: {
+        autoFormat: true,
+        edit: true,
+        paste: true,
+        shortcut: true,
+        tableEdit: true,
+        contextMenu: true,
+        emoji: true,
+        pasteOption: true,
+        sampleEntity: true,
+
+        // Legacy plugins
         contentEdit: false,
         hyperlink: false,
         watermark: false,
@@ -23,6 +34,10 @@ const initialState: OptionState = {
     isRtl: false,
     cacheModel: true,
     tableFeaturesContainerSelector: '#' + 'EditorContainer',
+    allowExcelNoBorderTable: false,
+    imageMenu: true,
+    tableMenu: true,
+    listMenu: true,
 };
 
 export class EditorOptionsPlugin extends SidePanePluginImpl<OptionsPane, OptionPaneProps> {

demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts

@@ -2,7 +2,7 @@ import type { ContentEditFeatureSettings } from 'roosterjs-editor-types';
 import type { SidePaneElementProps } from '../SidePaneElement';
 import type { ContentModelSegmentFormat } from 'roosterjs-content-model-types';
 
-export interface BuildInPluginList {
+export interface LegacyPluginList {
     contentEdit: boolean;
     hyperlink: boolean;
     watermark: boolean;
@@ -12,16 +12,40 @@ export interface BuildInPluginList {
     announce: boolean;
 }
 
+export interface NewPluginList {
+    autoFormat: boolean;
+    edit: boolean;
+    paste: boolean;
+    shortcut: boolean;
+    tableEdit: boolean;
+    contextMenu: boolean;
+    emoji: boolean;
+    pasteOption: boolean;
+    sampleEntity: boolean;
+}
+
+export interface BuildInPluginList extends LegacyPluginList, NewPluginList {}
+
 export interface OptionState {
     pluginList: BuildInPluginList;
+
+    // New plugin options
+    allowExcelNoBorderTable: boolean;
+    listMenu: boolean;
+    tableMenu: boolean;
+    imageMenu: boolean;
+
+    // Legacy plugin options
     contentEditFeatures: ContentEditFeatureSettings;
     defaultFormat: ContentModelSegmentFormat;
     linkTitle: string;
     watermarkText: string;
     forcePreserveRatio: boolean;
+    tableFeaturesContainerSelector: string;
+
+    // Editor options
     isRtl: boolean;
     cacheModel: boolean;
-    tableFeaturesContainerSelector: string;
     applyChangesOnMouseUp: boolean;
 }
 

demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { Code } from './Code';
 import { DefaultFormatPane } from './DefaultFormatPane';
 import { EditorCode } from './codes/EditorCode';
+import { LegacyPlugins, Plugins } from './Plugins';
 import { MainPane } from '../../mainPane/MainPane';
 import { OptionPaneProps, OptionState } from './OptionState';
-import { Plugins } from './Plugins';
 
 const htmlStart =
     '<html>\n' +
@@ -19,7 +19,7 @@ const htmlButtons =
     '<button id=buttonUndo>Undo</button>\n' +
     '<button id=buttonRedo>Redo</button>\n' +
     '<button id=buttonTable>Insert Table</button>\n' +
-    '<button id=buttonDark>Insert Table</button>\n';
+    '<button id=buttonDark>Dark mode</button>\n';
 '<button id=buttonDark>Dark Mode</button>\n';
 const legacyJsCode =
     '<script src="https://microsoft.github.io/roosterjs/rooster-min.js"></script>\n';
@@ -45,22 +45,25 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
             <div>
                 <details>
                     <summary>
-                        <b>Default Format:</b>
+                        <b>Default Format</b>
                     </summary>
                     <DefaultFormatPane
                         state={this.state.defaultFormat}
                         resetState={this.resetState}
                     />
                 </details>
-                <div>
-                    <br />
-                </div>
                 <details>
                     <summary>
-                        <b>Legacy Plugins</b>
+                        <b>Plugins</b>
                     </summary>
                     <Plugins state={this.state} resetState={this.resetState} />
                 </details>
+                <details>
+                    <summary>
+                        <b>Legacy Plugins</b>
+                    </summary>
+                    <LegacyPlugins state={this.state} resetState={this.resetState} />
+                </details>
                 <div>
                     <br />
                 </div>
@@ -132,6 +135,10 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
             isRtl: this.state.isRtl,
             cacheModel: this.state.cacheModel,
             tableFeaturesContainerSelector: this.state.tableFeaturesContainerSelector,
+            allowExcelNoBorderTable: this.state.allowExcelNoBorderTable,
+            listMenu: this.state.listMenu,
+            tableMenu: this.state.tableMenu,
+            imageMenu: this.state.imageMenu,
         };
 
         if (callback) {