Demo site improvement for Content Model (#1966)

* Demo site improvement for Content Model * fix plugin * Remove CutPasteListChain plugin from content model * remove Paste plugin
microsoft · Jul 21, 2023 · 997fd1f · 997fd1f
1 parent 87b6480
commit 997fd1f
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 46 deletions.
diff --git a/demo/scripts/controls/sidePane/editorOptions/ContentModelEditorOptionsPlugin.ts b/demo/scripts/controls/sidePane/editorOptions/ContentModelEditorOptionsPlugin.ts
@@ -9,10 +9,10 @@ const initialState: BuildInPluginState = {
     pluginList: {
         contentEdit: true,
         hyperlink: true,
-        paste: true,
+        paste: false,
         watermark: false,
         imageEdit: true,
-        cutPasteListChain: true,
+        cutPasteListChain: false,
         tableCellSelection: true,
         tableResize: true,
         customReplace: true,
@@ -21,7 +21,7 @@ const initialState: BuildInPluginState = {
         tableEditMenu: true,
         contextMenu: true,
         autoFormat: true,
-        contentModelPaste: false,
+        contentModelPaste: true,
     },
     contentEditFeatures: getDefaultContentEditFeatureSettings(),
     defaultFormat: {},
@@ -33,6 +33,7 @@ const initialState: BuildInPluginState = {
         ExperimentalFeatures.ReusableContentModel,
         ExperimentalFeatures.EditWithContentModel,
         ExperimentalFeatures.InlineEntityReadOnlyDelimiters,
+        ExperimentalFeatures.ContentModelPaste,
     ],
     isRtl: false,
 };

diff --git a/demo/scripts/controls/sidePane/editorOptions/ContentModelOptionsPane.tsx b/demo/scripts/controls/sidePane/editorOptions/ContentModelOptionsPane.tsx
@@ -2,12 +2,11 @@ import * as React from 'react';
 import BuildInPluginState, { BuildInPluginProps } from '../../BuildInPluginState';
 import Code from './Code';
 import ContentEditFeatures from './ContentEditFeatures';
+import ContentModelEditorCode from './codes/ContentModelEditorCode';
 import ContentModelExperimentalFeaturesPane from './ContentModelExperimentalFeatures';
 import ContentModelPlugins from './ContentModelPlugins';
 import DefaultFormatPane from './DefaultFormat';
-import EditorCode from './codes/EditorCode';
 import MainPaneBase from '../../MainPaneBase';
-import ReactEditorCode from './codes/ReactEditorCode';
 
 const htmlStart =
     '<html>\n' +
@@ -24,22 +23,10 @@ const htmlButtons =
 const darkButton = '<button id=buttonDark>Dark Mode</button>\n';
 const htmlEnd =
     '<script src="https://microsoft.github.io/roosterjs/rooster-min.js"></script>\n' +
+    '<script src="https://microsoft.github.io/roosterjs/rooster-content-model-min.js"></script>\n' +
     '</body>\n' +
     '</html>';
 
-const htmlRoosterReact =
-    '<html>\n' +
-    '<body>\n' +
-    '<div id="root"></div>\n' +
-    '<script src="https://unpkg.com/react@16/umd/react.development.js"></script>\n' +
-    '<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>\n' +
-    '<script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>\n' +
-    '<script src="https://microsoft.github.io/roosterjs/rooster-min.js"></script>\n' +
-    '<script src="https://microsoft.github.io/roosterjs/rooster-react-min.js"></script>\n' +
-    '</body>\n' +
-    '</html>';
-
-const cssRoosterReact = '.editor { border: solid 1px black; width: 100%; height: 600px}';
 export default class ContentModelOptionsPane extends React.Component<
     BuildInPluginProps,
     BuildInPluginState
@@ -56,11 +43,8 @@ export default class ContentModelOptionsPane extends React.Component<
         return (
             <div>
                 <div>
-                    <button onClick={this.onExportRooster}>Try roosterjs in CodePen</button>
-                </div>
-                <div>
-                    <button onClick={this.onExportRoosterReact}>
-                        Try roosterjs-react in CodePen
+                    <button onClick={this.onExportRoosterContentModel}>
+                        Try roosterjs Content Model Editor in CodePen
                     </button>
                 </div>
                 <div>
@@ -166,8 +150,8 @@ export default class ContentModelOptionsPane extends React.Component<
         }
     };
 
-    private onExportRooster = () => {
-        let editor = new EditorCode(this.state);
+    private onExportRoosterContentModel = () => {
+        let editor = new ContentModelEditorCode(this.state);
         let code = editor.getCode();
         let json = {
             title: 'RoosterJs',
@@ -180,21 +164,6 @@ export default class ContentModelOptionsPane extends React.Component<
         this.exportForm.current.submit();
     };
 
-    private onExportRoosterReact = () => {
-        let editor = new ReactEditorCode(this.state);
-        let code = editor.getCode();
-        let json = {
-            title: 'RoosterJs React',
-            html: htmlRoosterReact,
-            css: cssRoosterReact,
-            head: '',
-            js: code,
-            js_pre_processor: 'typescript',
-        };
-        this.exportData.current.value = JSON.stringify(json);
-        this.exportForm.current.submit();
-    };
-
     private onToggleDirection = () => {
         let isRtl = this.rtl.current.checked;
         this.setState({

diff --git a/demo/scripts/controls/sidePane/editorOptions/ContentModelPlugins.tsx b/demo/scripts/controls/sidePane/editorOptions/ContentModelPlugins.tsx
@@ -31,7 +31,6 @@ export default class ContentModelPlugins extends React.Component<PluginsProps, {
                             (state, value) => (state.linkTitle = value)
                         )
                     )}
-                    {this.renderPluginItem('paste', 'Paste Plugin')}
                     {this.renderPluginItem(
                         'watermark',
                         'Watermark Plugin',
@@ -53,7 +52,6 @@ export default class ContentModelPlugins extends React.Component<PluginsProps, {
                             (state, value) => (state.forcePreserveRatio = value)
                         )
                     )}
-                    {this.renderPluginItem('cutPasteListChain', 'CutPasteListChainPlugin')}
                     {this.renderPluginItem('tableResize', 'Table Resize Plugin')}
                     {this.renderPluginItem('customReplace', 'Custom Replace Plugin (autocomplete)')}
                     {this.renderPluginItem(

diff --git a/demo/scripts/controls/sidePane/editorOptions/codes/ContentModelButtonsCode.ts b/demo/scripts/controls/sidePane/editorOptions/codes/ContentModelButtonsCode.ts
@@ -0,0 +1,25 @@
+import CodeElement from './CodeElement';
+import { getObjectKeys } from 'roosterjs-editor-dom';
+
+const codeMap: { [id: string]: string } = {
+    buttonB: 'roosterjsContentModel.toggleBold(editor)',
+    buttonI: 'roosterjsContentModel.toggleItalic(editor)',
+    buttonU: 'roosterjsContentModel.toggleUnderline(editor)',
+    buttonBullet: 'roosterjsContentModel.toggleBullet(editor)',
+    buttonNumbering: 'roosterjsContentModel.toggleNumbering(editor)',
+    buttonUndo: 'editor.undo()',
+    buttonRedo: 'editor.redo()',
+};
+const buttonDark = 'editor.setDarkModeState(!editor.isDarkMode())';
+
+export default class ContentModelButtonsCode extends CodeElement {
+    getCode() {
+        const map = { ...codeMap, buttonDark: buttonDark };
+        return getObjectKeys(map)
+            .map(
+                id =>
+                    `document.getElementById('${id}').addEventListener('click', () => ${map[id]});\n`
+            )
+            .join('');
+    }
+}
diff --git a/demo/scripts/controls/sidePane/editorOptions/codes/ContentModelEditorCode.ts b/demo/scripts/controls/sidePane/editorOptions/codes/ContentModelEditorCode.ts
@@ -0,0 +1,46 @@
+import BuildInPluginState from '../../../BuildInPluginState';
+import CodeElement from './CodeElement';
+import ContentModelButtonsCode from './ContentModelButtonsCode';
+import DarkModeCode from './DarkModeCode';
+import DefaultFormatCode from './DefaultFormatCode';
+import ExperimentalFeaturesCode from './ExperimentalFeaturesCode';
+import PluginsCode from './PluginsCode';
+
+export default class ContentModelEditorCode extends CodeElement {
+    private plugins: PluginsCode;
+    private defaultFormat: DefaultFormatCode;
+    private buttons: ContentModelButtonsCode;
+    private experimentalFeatures: ExperimentalFeaturesCode;
+    private darkMode: DarkModeCode;
+
+    constructor(state: BuildInPluginState) {
+        super();
+
+        this.plugins = new PluginsCode(state);
+        this.defaultFormat = new DefaultFormatCode(state.defaultFormat);
+        this.buttons = new ContentModelButtonsCode();
+        this.experimentalFeatures = new ExperimentalFeaturesCode(state.experimentalFeatures);
+        this.darkMode = new DarkModeCode();
+    }
+
+    getCode() {
+        let defaultFormat = this.defaultFormat.getCode();
+        let expermientalFeatures = this.experimentalFeatures.getCode();
+        let darkMode = this.darkMode.getCode();
+        let code = "let contentDiv = document.getElementById('contentDiv') as HTMLDivElement;\n";
+        code += `let plugins = ${this.plugins.getCode()};\n`;
+        code += defaultFormat ? `let defaultFormat: DefaultFormat = ${defaultFormat};\n` : '';
+        code += 'let options: roosterjs.EditorOptions = {\n';
+        code += this.indent('plugins: plugins,\n');
+        code += defaultFormat ? this.indent('defaultFormat: defaultFormat,\n') : '';
+        code += expermientalFeatures
+            ? this.indent(`experimentalFeatures: [\n${expermientalFeatures}],\n`)
+            : '';
+        code += darkMode ? this.indent(`getDarkColor: ${darkMode},\n`) : '';
+        code += '};\n';
+        code += 'let editor = new roosterjsContentModel.ContentModelEditor(contentDiv, options);\n';
+        code += this.buttons ? this.buttons.getCode() : '';
+
+        return code;
+    }
+}
diff --git a/demo/scripts/controls/sidePane/editorOptions/codes/PluginsCode.ts b/demo/scripts/controls/sidePane/editorOptions/codes/PluginsCode.ts
@@ -8,7 +8,7 @@ import {
     CustomReplaceCode,
     CutPasteListChainCode,
     ImageEditCode,
-    PasteCode,
+    ContentModelPasteCode,
     TableResizeCode,
 } from './SimplePluginCode';
 
@@ -22,7 +22,7 @@ export default class PluginsCode extends CodeElement {
         this.plugins = [
             pluginList.contentEdit && new ContentEditCode(state.contentEditFeatures),
             pluginList.hyperlink && new HyperLinkCode(state.linkTitle),
-            pluginList.paste && new PasteCode(),
+            pluginList.contentModelPaste && new ContentModelPasteCode(),
             pluginList.watermark && new WatermarkCode(this.state.watermarkText),
             pluginList.imageEdit && new ImageEditCode(),
             pluginList.cutPasteListChain && new CutPasteListChainCode(),

diff --git a/demo/scripts/controls/sidePane/editorOptions/codes/SimplePluginCode.ts b/demo/scripts/controls/sidePane/editorOptions/codes/SimplePluginCode.ts
@@ -1,12 +1,12 @@
 import CodeElement from './CodeElement';
 
 class SimplePluginCode extends CodeElement {
-    constructor(private name: string) {
+    constructor(private name: string, private namespace: string = 'roosterjs') {
         super();
     }
 
     getCode() {
-        return `new roosterjs.${this.name}()`;
+        return `new ${this.namespace}.${this.name}()`;
     }
 }
 
@@ -16,6 +16,12 @@ export class PasteCode extends SimplePluginCode {
     }
 }
 
+export class ContentModelPasteCode extends SimplePluginCode {
+    constructor() {
+        super('ContentModelPastePlugin', 'roosterjsContentModel');
+    }
+}
+
 export class ImageEditCode extends SimplePluginCode {
     constructor() {
         super('ImageEdit');