Bump RoosterJs Main packages to 9.3.0 (#2626)

* init * Fix conflict
microsoft · May 10, 2024 · 1822d18 · 1822d18
1 parent b71ce2f
commit 1822d18
Show file tree

Hide file tree

Showing 167 changed files with 2,689 additions and 1,445 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -17,6 +17,14 @@
             "args": ["start", "--chrome"],
             "console": "integratedTerminal"
         },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Test all files (Firefox)",
+            "program": "${workspaceFolder}/node_modules/karma/bin/karma",
+            "args": ["start", "--firefox"],
+            "console": "integratedTerminal"
+        },
         {
             "type": "node",
             "request": "launch",
@@ -33,6 +41,14 @@
             "args": ["start", "--chrome", "--components", "${fileBasenameNoExtension}"],
             "console": "integratedTerminal"
         },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Test current file (Firefox)",
+            "program": "${workspaceFolder}/node_modules/karma/bin/karma",
+            "args": ["start", "--firefox", "--components", "${fileBasenameNoExtension}"],
+            "console": "integratedTerminal"
+        },
         {
             "type": "node",
             "request": "launch",
@@ -49,6 +65,14 @@
             "args": ["start", "--chrome", "--no-single-run"],
             "console": "integratedTerminal"
         },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug All Unit Tests (Firefox)",
+            "program": "${workspaceFolder}/node_modules/karma/bin/karma",
+            "args": ["start", "--firefox", "--no-single-run"],
+            "console": "integratedTerminal"
+        },
         {
             "type": "node",
             "request": "launch",
@@ -71,6 +95,20 @@
             ],
             "console": "integratedTerminal"
         },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Debug current unit test file (Firefox)",
+            "program": "${workspaceFolder}/node_modules/karma/bin/karma",
+            "args": [
+                "start",
+                "--firefox",
+                "--components",
+                "${fileBasenameNoExtension}",
+                "--no-single-run"
+            ],
+            "console": "integratedTerminal"
+        },
         {
             "type": "chrome",
             "request": "launch",

diff --git a/demo/scripts/controlsV2/demoButtons/exportContentButton.ts b/demo/scripts/controlsV2/demoButtons/exportContentButton.ts
@@ -1,4 +1,5 @@
 import { exportContent } from 'roosterjs-content-model-core';
+import { ModelToTextCallbacks } from 'roosterjs-content-model-types';
 import type { RibbonButton } from '../roosterjsReact/ribbon';
 
 /**
@@ -9,6 +10,10 @@ export type ExportButtonStringKey =
     | 'menuNameExportHTML'
     | 'menuNameExportText';
 
+const callbacks: ModelToTextCallbacks = {
+    onImage: () => '[Image]',
+};
+
 /**
  * "Export content" button on the format ribbon
  */
@@ -30,7 +35,7 @@ export const exportContentButton: RibbonButton<ExportButtonStringKey> = {
         if (key == 'menuNameExportHTML') {
             html = exportContent(editor);
         } else if (key == 'menuNameExportText') {
-            html = `<pre>${exportContent(editor, 'PlainText')}</pre>`;
+            html = `<pre>${exportContent(editor, 'PlainText', callbacks)}</pre>`;
         }
 
         win.document.write(editor.getTrustedHTMLHandler()(html));

diff --git a/demo/scripts/controlsV2/sidePane/apiPlayground/insertEntity/InsertEntityPane.tsx b/demo/scripts/controlsV2/sidePane/apiPlayground/insertEntity/InsertEntityPane.tsx
@@ -141,10 +141,13 @@ export default class InsertEntityPane extends React.Component<ApiPaneProps, Inse
     };
 
     private onGetEntities = () => {
-        const model = this.props.getEditor().getContentModelCopy('connected');
         const allEntities: ContentModelEntity[] = [];
 
-        findAllEntities(model, allEntities);
+        this.props.getEditor().formatContentModel(model => {
+            findAllEntities(model, allEntities);
+
+            return false;
+        });
 
         this.setState({
             entities: allEntities.filter(e => !!e),

diff --git a/demo/scripts/controlsV2/sidePane/contentModel/ContentModelPane.tsx b/demo/scripts/controlsV2/sidePane/contentModel/ContentModelPane.tsx
@@ -3,7 +3,6 @@ import { ContentModelDocument } from 'roosterjs-content-model-types';
 import { ContentModelDocumentView } from './components/model/ContentModelDocumentView';
 import { exportButton } from './buttons/exportButton';
 import { importModelButton } from './buttons/importModelButton';
-import { refreshButton } from './buttons/refreshButton';
 import { Ribbon, RibbonButton, RibbonPlugin } from '../../roosterjsReact/ribbon';
 import { SidePaneElementProps } from '../SidePaneElement';
 
@@ -15,6 +14,7 @@ export interface ContentModelPaneState {
 
 export interface ContentModelPaneProps extends ContentModelPaneState, SidePaneElementProps {
     ribbonPlugin: RibbonPlugin;
+    refreshButton: RibbonButton<string>;
 }
 
 export class ContentModelPane extends React.Component<
@@ -26,7 +26,7 @@ export class ContentModelPane extends React.Component<
     constructor(props: ContentModelPaneProps) {
         super(props);
 
-        this.contentModelButtons = [refreshButton, exportButton, importModelButton];
+        this.contentModelButtons = [this.props.refreshButton, exportButton, importModelButton];
 
         this.state = {
             model: null,

diff --git a/demo/scripts/controlsV2/sidePane/contentModel/ContentModelPanePlugin.ts b/demo/scripts/controlsV2/sidePane/contentModel/ContentModelPanePlugin.ts
@@ -1,5 +1,6 @@
 import { ContentModelPane, ContentModelPaneProps } from './ContentModelPane';
-import { createRibbonPlugin, RibbonPlugin } from '../../roosterjsReact/ribbon';
+import { createRibbonPlugin, RibbonButton, RibbonPlugin } from '../../roosterjsReact/ribbon';
+import { getRefreshButton } from './buttons/refreshButton';
 import { IEditor, PluginEvent } from 'roosterjs-content-model-types';
 import { setCurrentContentModel } from './currentModel';
 import { SidePaneElementProps } from '../SidePaneElement';
@@ -10,10 +11,12 @@ export class ContentModelPanePlugin extends SidePanePluginImpl<
     ContentModelPaneProps
 > {
     private contentModelRibbon: RibbonPlugin;
+    private refreshButton: RibbonButton<string>;
 
     constructor() {
         super(ContentModelPane, 'contentModel', 'Content Model');
         this.contentModelRibbon = createRibbonPlugin();
+        this.refreshButton = getRefreshButton(this);
     }
 
     initialize(editor: IEditor): void {
@@ -33,13 +36,7 @@ export class ContentModelPanePlugin extends SidePanePluginImpl<
     }
 
     onPluginEvent(e: PluginEvent) {
-        if (e.eventType == 'contentChanged' && e.source == 'RefreshModel') {
-            this.getComponent(component => {
-                const model = this.editor.getContentModelCopy('connected');
-                component.setContentModel(model);
-                setCurrentContentModel(model);
-            });
-        } else if (
+        if (
             e.eventType == 'input' ||
             e.eventType == 'selectionChanged' ||
             e.eventType == 'editorReady'
@@ -59,6 +56,7 @@ export class ContentModelPanePlugin extends SidePanePluginImpl<
             ...baseProps,
             model: null,
             ribbonPlugin: this.contentModelRibbon,
+            refreshButton: this.refreshButton,
         };
     }
 
@@ -68,11 +66,20 @@ export class ContentModelPanePlugin extends SidePanePluginImpl<
         }
     };
 
-    private onModelChange = () => {
+    onModelChange = (force?: boolean) => {
         this.getComponent(component => {
-            const model = this.editor.getContentModelCopy('connected');
-            component.setContentModel(model);
-            setCurrentContentModel(model);
+            this.editor.formatContentModel(
+                model => {
+                    component.setContentModel(model);
+                    setCurrentContentModel(model);
+
+                    return false;
+                },
+                undefined,
+                {
+                    tryGetFromCache: !force,
+                }
+            );
         });
     };
 }
diff --git a/demo/scripts/controlsV2/sidePane/contentModel/buttons/refreshButton.ts b/demo/scripts/controlsV2/sidePane/contentModel/buttons/refreshButton.ts
@@ -1,12 +1,15 @@
+import { ContentModelPanePlugin } from '../ContentModelPanePlugin';
 import { RibbonButton } from '../../../roosterjsReact/ribbon';
 
-export const refreshButton: RibbonButton<'buttonNameRefresh'> = {
-    key: 'buttonNameRefresh',
-    unlocalizedText: 'Refresh',
-    iconName: 'Refresh',
-    onClick: editor => {
-        editor.triggerEvent('contentChanged', {
-            source: 'RefreshModel',
-        });
-    },
-};
+export function getRefreshButton(
+    plugin: ContentModelPanePlugin
+): RibbonButton<'buttonNameRefresh'> {
+    return {
+        key: 'buttonNameRefresh',
+        unlocalizedText: 'Refresh',
+        iconName: 'Refresh',
+        onClick: () => {
+            plugin.onModelChange(true /*force*/);
+        },
+    };
+}
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
         "test:chrome": "node tools/build.js normalize & karma start --chrome",
         "test:firefox": "node tools/build.js normalize & karma start --firefox",
         "test:debug": "node tools/build.js normalize & karma start --no-single-run --chrome",
+        "test:debug-firefox": "node tools/build.js normalize & karma start --no-single-run --firefox",
         "test:coverage": "node tools/build.js normalize & karma start --coverage --firefox --chrome",
         "publish": "node tools/build.js clean normalize buildcommonjs buildamd buildmjs dts pack packprod builddemo builddoc publish"
     },

diff --git a/packages/roosterjs-content-model-api/lib/index.ts b/packages/roosterjs-content-model-api/lib/index.ts
@@ -49,6 +49,7 @@ export { formatImageWithContentModel } from './publicApi/utils/formatImageWithCo
 export { formatParagraphWithContentModel } from './publicApi/utils/formatParagraphWithContentModel';
 export { formatSegmentWithContentModel } from './publicApi/utils/formatSegmentWithContentModel';
 export { formatTextSegmentBeforeSelectionMarker } from './publicApi/utils/formatTextSegmentBeforeSelectionMarker';
+export { formatInsertPointWithContentModel } from './publicApi/utils/formatInsertPointWithContentModel';
 
 export { setListType } from './modelApi/list/setListType';
 export { setModelListStyle } from './modelApi/list/setModelListStyle';

diff --git a/...ages/roosterjs-content-model-api/lib/publicApi/utils/formatInsertPointWithContentModel.ts b/...ages/roosterjs-content-model-api/lib/publicApi/utils/formatInsertPointWithContentModel.ts
@@ -18,7 +18,11 @@ import type {
 } from 'roosterjs-content-model-types';
 
 /**
- * @internal
+ * Format content model at a given insert point with a callback function
+ * @param editor The editor object
+ * @param insertPoint The insert point to format
+ * @param callback The callback function to format the content model
+ * @param options Options to control the behavior of the formatting
  */
 export function formatInsertPointWithContentModel(
     editor: IEditor,

diff --git a/packages/roosterjs-content-model-core/lib/command/exportContent/exportContent.ts b/packages/roosterjs-content-model-core/lib/command/exportContent/exportContent.ts
@@ -3,29 +3,57 @@ import {
     contentModelToText,
     createModelToDomContext,
 } from 'roosterjs-content-model-dom';
-import type { ExportContentMode, IEditor, ModelToDomOption } from 'roosterjs-content-model-types';
+import type {
+    ExportContentMode,
+    IEditor,
+    ModelToDomOption,
+    ModelToTextCallbacks,
+} from 'roosterjs-content-model-types';
 
 /**
- * Export string content of editor
+ * Export HTML content. If there are entities, this will cause EntityOperation event with option = 'replaceTemporaryContent' to get a dehydrated entity
  * @param editor The editor to get content from
- * @param mode Mode of content to export. It supports:
- * - HTML: Export HTML content. If there are entities, this will cause EntityOperation event with option = 'replaceTemporaryContent' to get a dehydrated entity
- * - PlainText: Export plain text content
- * - PlainTextFast: Export plain text using editor's textContent property directly
+ * @param mode Specify HTML to get plain text result. This is the default option
  * @param options @optional Options for Model to DOM conversion
  */
+export function exportContent(editor: IEditor, mode?: 'HTML', options?: ModelToDomOption): string;
+
+/**
+ * Export plain text content
+ * @param editor The editor to get content from
+ * @param mode Specify PlainText to get plain text result
+ * @param callbacks @optional Callbacks to customize conversion behavior
+ */
+export function exportContent(
+    editor: IEditor,
+    mode: 'PlainText',
+    callbacks?: ModelToTextCallbacks
+): string;
+
+/**
+ * Export plain text using editor's textContent property directly
+ * @param editor The editor to get content from
+ * @param mode Specify PlainTextFast to get plain text result using textContent property
+ * @param options @optional Options for Model to DOM conversion
+ */
+export function exportContent(editor: IEditor, mode: 'PlainTextFast'): string;
+
 export function exportContent(
     editor: IEditor,
     mode: ExportContentMode = 'HTML',
-    options?: ModelToDomOption
+    optionsOrCallbacks?: ModelToDomOption | ModelToTextCallbacks
 ): string {
     if (mode == 'PlainTextFast') {
         return editor.getDOMHelper().getTextContent();
     } else {
         const model = editor.getContentModelCopy('clean');
 
         if (mode == 'PlainText') {
-            return contentModelToText(model);
+            return contentModelToText(
+                model,
+                undefined /*separator*/,
+                optionsOrCallbacks as ModelToTextCallbacks
+            );
         } else {
             const doc = editor.getDocument();
             const div = doc.createElement('div');
@@ -34,7 +62,10 @@ export function exportContent(
                 doc,
                 div,
                 model,
-                createModelToDomContext(undefined /*editorContext*/, options)
+                createModelToDomContext(
+                    undefined /*editorContext*/,
+                    optionsOrCallbacks as ModelToDomOption
+                )
             );
 
             editor.triggerEvent('extractContentWithDom', { clonedRoot: div }, true /*broadcast*/);

diff --git a/packages/roosterjs-content-model-core/lib/command/paste/mergePasteContent.ts b/packages/roosterjs-content-model-core/lib/command/paste/mergePasteContent.ts
@@ -94,6 +94,7 @@ export function mergePasteContent(
         {
             changeSource: ChangeSource.Paste,
             getChangeData: () => clipboardData,
+            scrollCaretIntoView: true,
             apiName: 'paste',
         }
     );

diff --git a/packages/roosterjs-content-model-core/lib/command/paste/paste.ts b/packages/roosterjs-content-model-core/lib/command/paste/paste.ts
@@ -26,9 +26,11 @@ export function paste(
     const trustedHTMLHandler = editor.getTrustedHTMLHandler();
 
     if (!clipboardData.modelBeforePaste) {
-        clipboardData.modelBeforePaste = cloneModelForPaste(
-            editor.getContentModelCopy('connected')
-        );
+        editor.formatContentModel(model => {
+            clipboardData.modelBeforePaste = cloneModelForPaste(model);
+
+            return false;
+        });
     }
 
     // 1. Prepare variables