Merge branch 'master' into nguyenvi/versionbump119

microsoft · Jan 19, 2024 · 24fc0ee · 24fc0ee
2 parents 1bde0c9 + 8dc9968
commit 24fc0ee
Show file tree

Hide file tree

Showing 350 changed files with 11,694 additions and 3,824 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -27,6 +27,7 @@ module.exports = {
         '@typescript-eslint',
         '@typescript-eslint/tslint',
         'eslint-plugin-import',
+        'etc',
     ],
     root: true,
     rules: {
@@ -148,5 +149,6 @@ module.exports = {
         'import/no-duplicates': 'error',
         'prefer-const': 'error',
         'no-var': 'error',
+        'etc/no-const-enum': ['error', { allowLocal: true }],
     },
 };
diff --git a/demo/scripts/controls/BuildInPluginState.ts b/demo/scripts/controls/BuildInPluginState.ts
@@ -22,7 +22,6 @@ export interface BuildInPluginList {
     tableEditMenu: boolean;
     contextMenu: boolean;
     autoFormat: boolean;
-    contentModelPaste: boolean;
     announce: boolean;
 }
 

diff --git a/demo/scripts/controls/ContentModelEditorMainPane.tsx b/demo/scripts/controls/ContentModelEditorMainPane.tsx
@@ -11,18 +11,23 @@ import ContentModelRooster from './contentModel/editor/ContentModelRooster';
 import ContentModelSnapshotPlugin from './sidePane/snapshot/ContentModelSnapshotPlugin';
 import getToggleablePlugins from './getToggleablePlugins';
 import MainPaneBase, { MainPaneBaseState } from './MainPaneBase';
+import RibbonPlugin from './ribbonButtons/contentModel/RibbonPlugin';
 import SampleEntityPlugin from './sampleEntity/SampleEntityPlugin';
 import SidePane from './sidePane/SidePane';
 import TitleBar from './titleBar/TitleBar';
 import { arrayPush } from 'roosterjs-editor-dom';
-import { ContentModelEditPlugin, EntityDelimiterPlugin } from 'roosterjs-content-model-plugins';
 import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentModelRibbonPlugin';
-import { ContentModelSegmentFormat, Snapshot } from 'roosterjs-content-model-types';
-import { createEmojiPlugin, createPasteOptionPlugin, RibbonPlugin } from 'roosterjs-react';
-import { EditorPlugin, Snapshots } from 'roosterjs-editor-types';
+import { ContentModelSegmentFormat, Snapshots } from 'roosterjs-content-model-types';
+import { createEmojiPlugin, createPasteOptionPlugin } from 'roosterjs-react';
+import { EditorPlugin } from 'roosterjs-editor-types';
 import { getDarkColor } from 'roosterjs-color-utils';
 import { PartialTheme } from '@fluentui/react/lib/Theme';
 import { trustedHTMLHandler } from '../utils/trustedHTMLHandler';
+import {
+    ContentModelEditPlugin,
+    ContentModelPastePlugin,
+    EntityDelimiterPlugin,
+} from 'roosterjs-content-model-plugins';
 import {
     ContentModelEditor,
     ContentModelEditorOptions,
@@ -103,8 +108,9 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
     private entityDelimiterPlugin: EntityDelimiterPlugin;
     private toggleablePlugins: EditorPlugin[] | null = null;
     private formatPainterPlugin: ContentModelFormatPainterPlugin;
+    private pastePlugin: ContentModelPastePlugin;
     private sampleEntityPlugin: SampleEntityPlugin;
-    private snapshots: Snapshots<Snapshot>;
+    private snapshots: Snapshots;
 
     constructor(props: {}) {
         super(props);
@@ -129,6 +135,7 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
         this.emojiPlugin = createEmojiPlugin();
         this.entityDelimiterPlugin = new EntityDelimiterPlugin();
         this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
+        this.pastePlugin = new ContentModelPastePlugin();
         this.sampleEntityPlugin = new SampleEntityPlugin();
         this.state = {
             showSidePane: window.location.hash != '',
@@ -171,7 +178,7 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
             <SidePane
                 ref={this.sidePane}
                 plugins={this.getSidePanePlugins()}
-                isContentModelDemo={true}
+                mode="contentModel"
                 className={`main-pane ${styles.sidePane} ${
                     fullWidth ? styles.sidePaneFullWidth : ''
                 }`}
@@ -185,13 +192,10 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
 
         const plugins = [
             ...this.toggleablePlugins,
-            this.contentModelRibbonPlugin,
             this.contentModelPanePlugin.getInnerRibbonPlugin(),
-            this.contentModelEditPlugin,
             this.pasteOptionPlugin,
             this.emojiPlugin,
             this.entityDelimiterPlugin,
-            this.formatPainterPlugin,
             this.sampleEntityPlugin,
         ];
 
@@ -243,13 +247,20 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
                 <div style={editorStyles}>
                     {this.state.editorCreator && (
                         <ContentModelRooster
+                            id={MainPaneBase.editorDivId}
                             className={styles.editor}
-                            plugins={allPlugins}
+                            legacyPlugins={allPlugins}
+                            plugins={[
+                                this.contentModelRibbonPlugin,
+                                this.formatPainterPlugin,
+                                this.pastePlugin,
+                                this.contentModelEditPlugin,
+                            ]}
                             defaultSegmentFormat={defaultFormat}
                             inDarkMode={this.state.isDarkMode}
                             getDarkColor={getDarkColor}
                             experimentalFeatures={this.state.initState.experimentalFeatures}
-                            snapshotsManager={this.snapshotPlugin.getSnapshotsManager()}
+                            snapshots={this.snapshotPlugin.getSnapshots()}
                             trustedHTMLHandler={trustedHTMLHandler}
                             zoomScale={this.state.scale}
                             initialContent={this.content}

diff --git a/demo/scripts/controls/MainPane.tsx b/demo/scripts/controls/MainPane.tsx
@@ -171,7 +171,7 @@ class MainPane extends MainPaneBase<MainPaneState> {
             <SidePane
                 ref={this.sidePane}
                 plugins={this.getSidePanePlugins()}
-                isContentModelDemo={false}
+                mode="classical"
                 className={`main-pane ${styles.sidePane} ${
                     fullWidth ? styles.sidePaneFullWidth : ''
                 }`}

diff --git a/demo/scripts/controls/MainPaneBase.tsx b/demo/scripts/controls/MainPaneBase.tsx
@@ -4,7 +4,6 @@ import BuildInPluginState from './BuildInPluginState';
 import SidePane from './sidePane/SidePane';
 import { Border } from 'roosterjs-content-model-types';
 import { createUpdateContentPlugin, UpdateContentPlugin, UpdateMode } from 'roosterjs-react';
-import { EditorPlugin } from 'roosterjs-editor-types';
 import { PartialTheme, ThemeProvider } from '@fluentui/react/lib/Theme';
 import { registerWindowForCss, unregisterWindowForCss } from '../utils/cssMonitor';
 import { trustedHTMLHandler } from '../utils/trustedHTMLHandler';
@@ -43,6 +42,8 @@ export default abstract class MainPaneBase<T extends MainPaneBaseState> extends
         return this.instance;
     }
 
+    static readonly editorDivId = 'RoosterJsContentDiv';
+
     constructor(props: {}) {
         super(props);
 
@@ -58,8 +59,6 @@ export default abstract class MainPaneBase<T extends MainPaneBaseState> extends
 
     abstract renderSidePane(fullWidth: boolean): JSX.Element;
 
-    abstract getPlugins(): EditorPlugin[];
-
     abstract resetEditor(): void;
 
     abstract getTheme(isDark: boolean): PartialTheme;

diff --git a/demo/scripts/controls/StandaloneEditorMainPane.scss b/demo/scripts/controls/StandaloneEditorMainPane.scss
@@ -0,0 +1,88 @@
+@import './theme/standaloneEditorTheme.scss';
+
+.mainPane {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.noGrow {
+    flex: 0 0 auto;
+    overflow-x: hidden;
+}
+
+.body {
+    flex: 1 1 auto;
+    position: relative;
+    display: flex;
+}
+
+.editorContainer {
+    width: '100%';
+    min-width: 200px;
+    flex-grow: 1;
+    flex-shrink: 1;
+    position: relative;
+}
+
+@media (prefers-color-scheme: dark) {
+    .editorContainer {
+        a:link,
+        a:visited {
+            color: #ba7cff;
+        }
+    }
+}
+
+.editor {
+    border: solid 1px $primaryBorder;
+    overflow: auto;
+    padding: 10px;
+    outline: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.resizer {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 6px;
+    cursor: col-resize;
+    &:hover {
+        background-color: #ccc;
+    }
+}
+
+.showSidePane {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 30px;
+    cursor: hand;
+    white-space: nowrap;
+    div {
+        transform: rotate(-90deg);
+    }
+    &:hover {
+        background-color: #ccc;
+    }
+}
+
+.sidePane {
+    min-width: 340px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    width: 300px;
+    &.sidePaneFullWidth {
+        width: 100%;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .editor {
+        border: solid 1px $primaryBorderDark;
+    }
+}