Merge pull request #2422 from microsoft/u/juliaroldi/release-version-…

…8.60.0

[Bump RoosterJS] Classic: 8.60.0 Content-Model: 0.26

demo/scripts/controls/ContentModelEditorMainPane.tsx

@@ -20,6 +20,7 @@ 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';
@@ -29,11 +30,11 @@ import { clearFormatButton } from './ribbonButtons/contentModel/clearFormatButto
 import { codeButton } from './ribbonButtons/contentModel/codeButton';
 import { ContentModelRibbon } from './ribbonButtons/contentModel/ContentModelRibbon';
 import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentModelRibbonPlugin';
-import { ContentModelSegmentFormat, Snapshots } from 'roosterjs-content-model-types';
 import { createEmojiPlugin, createPasteOptionPlugin } from 'roosterjs-react';
 import { darkMode } from './ribbonButtons/contentModel/darkMode';
 import { decreaseFontSizeButton } from './ribbonButtons/contentModel/decreaseFontSizeButton';
 import { decreaseIndentButton } from './ribbonButtons/contentModel/decreaseIndentButton';
+import { EditorAdapter, EditorAdapterOptions } from 'roosterjs-editor-adapter';
 import { EditorPlugin } from 'roosterjs-editor-types';
 import { exportContent } from './ribbonButtons/contentModel/export';
 import { fontButton } from './ribbonButtons/contentModel/fontButton';
@@ -79,6 +80,11 @@ 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,
+    IStandaloneEditor,
+    Snapshots,
+} from 'roosterjs-content-model-types';
 import {
     spaceAfterButton,
     spaceBeforeButton,
@@ -91,16 +97,6 @@ import {
     tableMergeButton,
     tableSplitButton,
 } from './ribbonButtons/contentModel/tableEditButtons';
-import {
-    ContentModelAutoFormatPlugin,
-    ContentModelEditPlugin,
-    ContentModelPastePlugin,
-} from 'roosterjs-content-model-plugins';
-import {
-    ContentModelEditor,
-    ContentModelEditorOptions,
-    IContentModelEditor,
-} from 'roosterjs-content-model-editor';
 
 const styles = require('./ContentModelEditorMainPane.scss');
 
@@ -159,7 +155,7 @@ const DarkTheme: PartialTheme = {
 };
 
 interface ContentModelMainPaneState extends MainPaneBaseState {
-    editorCreator: (div: HTMLDivElement, options: ContentModelEditorOptions) => IContentModelEditor;
+    editorCreator: (div: HTMLDivElement, options: EditorAdapterOptions) => IStandaloneEditor;
 }
 
 class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState> {
@@ -168,15 +164,15 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
     private eventViewPlugin: ContentModelEventViewPlugin;
     private apiPlaygroundPlugin: ApiPlaygroundPlugin;
     private contentModelPanePlugin: ContentModelPanePlugin;
-    private contentModelEditPlugin: ContentModelEditPlugin;
-    private contentModelAutoFormatPlugin: ContentModelAutoFormatPlugin;
+    private contentModelEditPlugin: EditPlugin;
+    private contentModelAutoFormatPlugin: AutoFormatPlugin;
     private contentModelRibbonPlugin: RibbonPlugin;
     private pasteOptionPlugin: EditorPlugin;
     private emojiPlugin: EditorPlugin;
     private snapshotPlugin: ContentModelSnapshotPlugin;
     private toggleablePlugins: EditorPlugin[] | null = null;
     private formatPainterPlugin: ContentModelFormatPainterPlugin;
-    private pastePlugin: ContentModelPastePlugin;
+    private pastePlugin: PastePlugin;
     private sampleEntityPlugin: SampleEntityPlugin;
     private snapshots: Snapshots;
     private buttons: ContentModelRibbonButton<any>[] = [
@@ -261,13 +257,13 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
         this.apiPlaygroundPlugin = new ApiPlaygroundPlugin();
         this.snapshotPlugin = new ContentModelSnapshotPlugin(this.snapshots);
         this.contentModelPanePlugin = new ContentModelPanePlugin();
-        this.contentModelEditPlugin = new ContentModelEditPlugin();
-        this.contentModelAutoFormatPlugin = new ContentModelAutoFormatPlugin();
+        this.contentModelEditPlugin = new EditPlugin();
+        this.contentModelAutoFormatPlugin = new AutoFormatPlugin();
         this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
         this.pasteOptionPlugin = createPasteOptionPlugin();
         this.emojiPlugin = createEmojiPlugin();
         this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
-        this.pastePlugin = new ContentModelPastePlugin();
+        this.pastePlugin = new PastePlugin();
         this.sampleEntityPlugin = new SampleEntityPlugin();
         this.state = {
             showSidePane: window.location.hash != '',
@@ -343,8 +339,8 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
     resetEditor() {
         this.toggleablePlugins = null;
         this.setState({
-            editorCreator: (div: HTMLDivElement, options: ContentModelEditorOptions) =>
-                new ContentModelEditor(div, {
+            editorCreator: (div: HTMLDivElement, options: EditorAdapterOptions) =>
+                new EditorAdapter(div, {
                     ...options,
                     cacheModel: this.state.initState.cacheModel,
                 }),

demo/scripts/controls/StandaloneEditorMainPane.tsx

@@ -17,6 +17,7 @@ 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';
@@ -93,10 +94,6 @@ import {
     tableMergeButton,
     tableSplitButton,
 } from './ribbonButtons/contentModel/tableEditButtons';
-import {
-    ContentModelAutoFormatPlugin,
-    ContentModelEditPlugin,
-} from 'roosterjs-content-model-plugins';
 
 const styles = require('./StandaloneEditorMainPane.scss');
 
@@ -164,9 +161,9 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
     private eventViewPlugin: ContentModelEventViewPlugin;
     private apiPlaygroundPlugin: ApiPlaygroundPlugin;
     private contentModelPanePlugin: ContentModelPanePlugin;
-    private contentModelEditPlugin: ContentModelEditPlugin;
+    private contentModelEditPlugin: EditPlugin;
     private contentModelRibbonPlugin: RibbonPlugin;
-    private contentAutoFormatPlugin: ContentModelAutoFormatPlugin;
+    private contentAutoFormatPlugin: AutoFormatPlugin;
     private snapshotPlugin: ContentModelSnapshotPlugin;
     private formatPainterPlugin: ContentModelFormatPainterPlugin;
     private snapshots: Snapshots<Snapshot>;
@@ -252,8 +249,8 @@ class ContentModelEditorMainPane extends MainPaneBase<ContentModelMainPaneState>
         this.apiPlaygroundPlugin = new ApiPlaygroundPlugin();
         this.snapshotPlugin = new ContentModelSnapshotPlugin(this.snapshots);
         this.contentModelPanePlugin = new ContentModelPanePlugin();
-        this.contentModelEditPlugin = new ContentModelEditPlugin();
-        this.contentAutoFormatPlugin = new ContentModelAutoFormatPlugin();
+        this.contentModelEditPlugin = new EditPlugin();
+        this.contentAutoFormatPlugin = new AutoFormatPlugin();
         this.contentModelRibbonPlugin = new ContentModelRibbonPlugin();
         this.formatPainterPlugin = new ContentModelFormatPainterPlugin();
         this.state = {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ContentModelEditor, ContentModelEditorOptions } from 'roosterjs-content-model-editor';
 import { createUIUtilities, ReactEditorPlugin, UIUtilities } from 'roosterjs-react';
 import { divProperties, getNativeProps } from '@fluentui/react/lib/Utilities';
+import { EditorAdapter, EditorAdapterOptions } from 'roosterjs-editor-adapter';
 import { useTheme } from '@fluentui/react/lib/Theme';
 import {
     EditorPlugin,
@@ -14,7 +14,7 @@ import type { EditorPlugin as LegacyEditorPlugin } from 'roosterjs-editor-types'
  * Properties for Rooster react component
  */
 export interface ContentModelRoosterProps
-    extends ContentModelEditorOptions,
+    extends EditorAdapterOptions,
         React.HTMLAttributes<HTMLDivElement> {
     /**
      * Creator function used for creating the instance of roosterjs editor.
@@ -86,8 +86,8 @@ function setUIUtilities(
     });
 }
 
-function defaultEditorCreator(div: HTMLDivElement, options: ContentModelEditorOptions) {
-    return new ContentModelEditor(div, options);
+function defaultEditorCreator(div: HTMLDivElement, options: EditorAdapterOptions) {
+    return new EditorAdapter(div, options);
 }
 
 function isReactEditorPlugin(

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

@@ -1,11 +1,5 @@
 import ContentModelRibbonButton from './ContentModelRibbonButton';
-import { cloneModel } from 'roosterjs-content-model-core';
-import { ContentModelEntityFormat } from 'roosterjs-content-model-types';
-import {
-    contentModelToDom,
-    createModelToDomContext,
-    parseEntityClassName,
-} from 'roosterjs-content-model-dom';
+import { exportContent as exportContentApi } from 'roosterjs-content-model-core';
 
 /**
  * Key of localized strings of Zoom button
@@ -21,53 +15,8 @@ export const exportContent: ContentModelRibbonButton<ExportButtonStringKey> = {
     iconName: 'Export',
     flipWhenRtl: true,
     onClick: editor => {
-        // TODO: We need a export function in dev code to handle this feature
         const win = editor.getDocument().defaultView.open();
-
-        editor.formatContentModel(model => {
-            const clonedModel = cloneModel(model, {
-                includeCachedElement: (node, type) => {
-                    switch (type) {
-                        case 'cache':
-                            return undefined;
-
-                        case 'general':
-                            return node.cloneNode() as HTMLElement;
-
-                        case 'entity':
-                            const clonedRoot = node.cloneNode(true) as HTMLElement;
-                            const format: ContentModelEntityFormat = {};
-                            let isEntity = false;
-
-                            clonedRoot.classList.forEach(name => {
-                                isEntity = parseEntityClassName(name, format) || isEntity;
-                            });
-
-                            if (isEntity && format.id && format.entityType) {
-                                editor.triggerEvent('entityOperation', {
-                                    operation: 'replaceTemporaryContent',
-                                    entity: {
-                                        wrapper: clonedRoot,
-                                        id: format.id,
-                                        type: format.entityType,
-                                        isReadonly: !!format.isReadonly,
-                                    },
-                                });
-                            }
-
-                            return clonedRoot;
-                    }
-                },
-            });
-
-            contentModelToDom(
-                win.document,
-                win.document.body,
-                clonedModel,
-                createModelToDomContext()
-            );
-
-            return false;
-        });
+        const html = exportContentApi(editor);
+        win.document.write(editor.getTrustedHTMLHandler()(html));
     },
 };

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 { IContentModelEditor } from 'roosterjs-content-model-editor';
 import { IEditor, PluginEvent, PluginEventType } from 'roosterjs-editor-types';
+import { IStandaloneEditor } from 'roosterjs-content-model-types';
 import { setCurrentContentModel } from './currentModel';
 import { SidePaneElementProps } from '../SidePaneElement';
 
@@ -20,7 +20,7 @@ export default class ContentModelPanePlugin extends SidePanePluginImpl<
     initialize(editor: IEditor): void {
         super.initialize(editor);
 
-        this.contentModelRibbon.initialize(editor as IContentModelEditor); // Temporarily use IContentModelEditor here. TODO: Port side pane to use IStandaloneEditor
+        this.contentModelRibbon.initialize(editor as IEditor & IStandaloneEditor); //  TODO: Port side pane to use IStandaloneEditor
         editor.getDocument().addEventListener('selectionchange', this.onModelChangeFromSelection);
     }
 
@@ -37,7 +37,9 @@ export default class ContentModelPanePlugin extends SidePanePluginImpl<
         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 IContentModelEditor).getContentModelCopy('connected');
+                const model = (this.editor as IEditor & IStandaloneEditor).getContentModelCopy(
+                    'connected'
+                );
                 component.setContentModel(model);
                 setCurrentContentModel(model);
             });
@@ -72,7 +74,9 @@ 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 IContentModelEditor).getContentModelCopy('connected');
+            const model = (this.editor as IEditor & IStandaloneEditor).getContentModelCopy(
+                'connected'
+            );
             component.setContentModel(model);
             setCurrentContentModel(model);
         });

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import ApiPaneProps from '../ApiPaneProps';
-import { Entity } from 'roosterjs-editor-types';
+import { Entity, IEditor } from 'roosterjs-editor-types';
 import { getEntityFromElement, getEntitySelector } from 'roosterjs-editor-dom';
-import { IContentModelEditor } from 'roosterjs-content-model-editor';
 import { insertEntity } from 'roosterjs-content-model-api';
-import { InsertEntityOptions } from 'roosterjs-content-model-types';
+import { InsertEntityOptions, IStandaloneEditor } from 'roosterjs-content-model-types';
 import { trustedHTMLHandler } from '../../../../utils/trustedHTMLHandler';
 
 const styles = require('./InsertEntityPane.scss');
@@ -106,37 +105,36 @@ export default class InsertEntityPane extends React.Component<ApiPaneProps, Inse
 
         if (node) {
             const editor = this.props.getEditor();
+            const options: InsertEntityOptions = {
+                contentNode: node,
+                focusAfterEntity: focusAfterEntity,
+            };
 
-            editor.addUndoSnapshot(() => {
-                const options: InsertEntityOptions = {
-                    contentNode: node,
-                    focusAfterEntity: focusAfterEntity,
-                };
+            editor.focus();
 
-                if (isBlock) {
-                    insertEntity(
-                        editor as IContentModelEditor,
-                        entityType,
-                        true,
-                        insertAtRoot
-                            ? 'root'
-                            : insertAtTop
-                            ? 'begin'
-                            : insertAtBottom
-                            ? 'end'
-                            : 'focus',
-                        options
-                    );
-                } else {
-                    insertEntity(
-                        editor as IContentModelEditor,
-                        entityType,
-                        isBlock,
-                        insertAtTop ? 'begin' : insertAtBottom ? 'end' : 'focus',
-                        options
-                    );
-                }
-            });
+            if (isBlock) {
+                insertEntity(
+                    editor as IStandaloneEditor & IEditor,
+                    entityType,
+                    true,
+                    insertAtRoot
+                        ? 'root'
+                        : insertAtTop
+                        ? 'begin'
+                        : insertAtBottom
+                        ? 'end'
+                        : 'focus',
+                    options
+                );
+            } else {
+                insertEntity(
+                    editor as IStandaloneEditor & IEditor,
+                    entityType,
+                    isBlock,
+                    insertAtTop ? 'begin' : insertAtBottom ? 'end' : 'focus',
+                    options
+                );
+            }
         }
     };
 

demo/scripts/controls/sidePane/editorOptions/codes/ContentModelEditorCode.ts

@@ -38,7 +38,7 @@ export default class ContentModelEditorCode extends CodeElement {
             : '';
         code += darkMode ? this.indent(`getDarkColor: ${darkMode},\n`) : '';
         code += '};\n';
-        code += 'let editor = new roosterjsContentModel.ContentModelEditor(contentDiv, options);\n';
+        code += 'let editor = new roosterjsContentModel.StandaloneEditor(contentDiv, options);\n';
         code += this.buttons ? this.buttons.getCode() : '';
 
         return code;

demo/scripts/controls/sidePane/editorOptions/codes/SimplePluginCode.ts

@@ -18,7 +18,7 @@ export class PasteCode extends SimplePluginCode {
 
 export class ContentModelPasteCode extends SimplePluginCode {
     constructor() {
-        super('ContentModelPastePlugin', 'roosterjsContentModel');
+        super('PastePlugin', 'roosterjsContentModel');
     }
 }