Merge pull request #2921 from microsoft/u/juliaroldi/bump-rooster-js

Bump RoosterJS Version 9.17.0

Author: juliaroldi

demo/index.html

@@ -20,7 +20,7 @@
         <div id="mainPane"></div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.122.3/fluentui-react.min.js"></script>
         <script src="rooster-min.js"></script>
         <script src="rooster-react-min.js"></script>
         <script src="demo.js"></script>

demo/scripts/controlsV2/demoButtons/tableTitleButton.ts

@@ -0,0 +1,56 @@
+import { getFirstSelectedTable, mutateBlock } from 'roosterjs-content-model-dom';
+import { IEditor } from 'roosterjs-content-model-types';
+import { RibbonButton, showInputDialog } from 'roosterjs-react';
+
+/**
+ * @internal
+ * "Image Border Style" button on the format ribbon
+ */
+export const tableTitleButton: RibbonButton<'buttonNameTableTitle'> = {
+    key: 'buttonNameTableTitle',
+    unlocalizedText: 'Table Title',
+    iconName: 'TableComputed',
+    isDisabled: formatState => !formatState.isInTable,
+    onClick: (editor, _, strings, uiUtilities) => {
+        const items = {
+            title: {
+                autoFocus: true,
+                labelKey: 'buttonNameTableTitle' as const,
+                unlocalizedLabel: 'Title',
+                initValue: '',
+            },
+        };
+
+        showInputDialog(
+            uiUtilities,
+            'buttonNameTableTitle',
+            'Insert Table',
+            items,
+            strings,
+            (itemName, newValue, values) => {
+                if (itemName == 'title') {
+                    values.title = newValue;
+                    return values;
+                } else {
+                    return null;
+                }
+            }
+        ).then(result => {
+            editor.focus();
+            if (result && result.title) {
+                insertTableTitle(editor, result.title);
+            }
+        });
+    },
+};
+
+const insertTableTitle = (editor: IEditor, title: string) => {
+    editor.formatContentModel(model => {
+        const table = getFirstSelectedTable(model)[0];
+        if (table) {
+            mutateBlock(table).format.title = title;
+            return true;
+        }
+        return false;
+    });
+};

demo/scripts/controlsV2/tabs/ribbonButtons.ts

@@ -21,6 +21,7 @@ import { tableBorderColorButton } from '../demoButtons/tableBorderColorButton';
 import { tableBorderStyleButton } from '../demoButtons/tableBorderStyleButton';
 import { tableBorderWidthButton } from '../demoButtons/tableBorderWidthButton';
 import { tableOptionsButton } from '../demoButtons/tableOptionsButton';
+import { tableTitleButton } from '../demoButtons/tableTitleButton';
 import { tabNames } from './getTabs';
 import {
     tableAlignCellButton,
@@ -83,6 +84,7 @@ const tableButtons: RibbonButton<any>[] = [
     insertTableButton,
     formatTableButton,
     setTableCellShadeButton,
+    tableTitleButton,
     tableOptionsButton,
     tableInsertButton,
     tableDeleteButton,
@@ -178,6 +180,7 @@ const allButtons: RibbonButton<any>[] = [
     tableDeleteButton,
     tableMergeButton,
     tableSplitButton,
+    tableTitleButton,
     tableAlignCellButton,
     tableAlignTableButton,
     tableBorderApplyButton,

demo/scripts/utils/cssMonitor.ts

@@ -1,4 +1,4 @@
-import { Stylesheet } from '@fluentui/merge-styles/lib/Stylesheet';
+import { Stylesheet } from '@fluentui/merge-styles';
 
 let isCssMonitorStarted: boolean = false;
 const activeWindows: Window[] = [];

index.html

@@ -20,7 +20,7 @@
         <div id="mainPane"></div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.122.3/fluentui-react.min.js"></script>
         <script src="scripts/demo.js"></script>
     </body>
 </html>

package.json

@@ -33,7 +33,7 @@
         "publish": "node tools/build.js clean normalize buildcommonjs buildamd buildmjs dts pack packprod builddemo builddoc publish"
     },
     "devDependencies": {
-        "@fluentui/react": "^8.0.0",
+        "@fluentui/react": "8.122.3",
         "@microsoft/loader-load-themed-styles": "1.8.11",
         "@types/color": "3.0.0",
         "@types/dompurify": "2.2.3",

packages/roosterjs-content-model-api/lib/publicApi/segment/changeFontSize.ts

@@ -21,13 +21,17 @@ const MAX_FONT_SIZE = 1000;
  * @param change Whether increase or decrease font size
  * @param fontSizes A sorted font size array, in pt. Default value is FONT_SIZES
  */
-export function changeFontSize(editor: IEditor, change: 'increase' | 'decrease') {
+export function changeFontSize(
+    editor: IEditor,
+    change: 'increase' | 'decrease',
+    fontSizes: number[] = FONT_SIZES
+) {
     editor.focus();
 
     formatSegmentWithContentModel(
         editor,
         'changeFontSize',
-        (format, _, __, paragraph) => changeFontSizeInternal(change, format, paragraph),
+        (format, _, __, paragraph) => changeFontSizeInternal(change, format, paragraph, fontSizes),
         undefined /* segmentHasStyleCallback*/,
         true /*includingFormatHandler*/
     );
@@ -36,13 +40,14 @@ export function changeFontSize(editor: IEditor, change: 'increase' | 'decrease')
 function changeFontSizeInternal(
     change: 'increase' | 'decrease',
     format: ContentModelSegmentFormat,
-    paragraph: ShallowMutableContentModelParagraph | null
+    paragraph: ShallowMutableContentModelParagraph | null,
+    fontSizes: number[]
 ) {
     if (format.fontSize) {
         const sizeInPt = parseValueWithUnit(format.fontSize, undefined /*element*/, 'pt');
 
         if (sizeInPt > 0) {
-            const newSize = getNewFontSize(sizeInPt, change == 'increase' ? 1 : -1, FONT_SIZES);
+            const newSize = getNewFontSize(sizeInPt, change == 'increase' ? 1 : -1, fontSizes);
 
             setFontSizeInternal(newSize + 'pt', format, paragraph);
         }

packages/roosterjs-content-model-core/lib/command/paste/generatePasteOptionFromPlugins.ts

@@ -39,7 +39,5 @@ export function generatePasteOptionFromPlugins(
         containsBlockElements: !!htmlFromClipboard.containsBlockElements,
     };
 
-    return pasteType == 'asPlainText'
-        ? event
-        : editor.triggerEvent('beforePaste', event, true /* broadcast */);
+    return editor.triggerEvent('beforePaste', event, true /* broadcast */);
 }

packages/roosterjs-content-model-core/test/command/paste/generatePasteOptionFromPluginsTest.ts

@@ -221,6 +221,8 @@ describe('generatePasteOptionFromPlugins', () => {
     it('PasteType=asPlainText', () => {
         triggerPluginEventSpy.and.callFake((core, event) => {
             Object.assign(event, mockedResult);
+
+            return event;
         });
         const result = generatePasteOptionFromPlugins(
             editor,
@@ -236,24 +238,16 @@ describe('generatePasteOptionFromPlugins', () => {
         );
 
         expect(result).toEqual({
-            fragment: mockedFragment,
-            domToModelOption: {
-                additionalAllowedTags: [],
-                additionalDisallowedTags: [],
-                additionalFormatParsers: {},
-                formatParserOverride: {},
-                processorOverride: {},
-                styleSanitizers: {},
-                attributeSanitizers: {},
-            },
-            pasteType: 'asPlainText',
             eventType: 'beforePaste',
-            clipboardData: mockedClipboardData,
-            htmlBefore,
-            htmlAfter,
-            htmlAttributes: mockedMetadata,
+            clipboardData: 'CLIPBOARDDATA' as any,
+            fragment: 'FragmentResult' as any,
+            htmlBefore: 'HTMLBEFORE',
+            htmlAfter: 'HTMLAFTER',
+            htmlAttributes: 'METADATA' as any,
+            pasteType: 'TypeResult' as any,
+            domToModelOption: 'OptionResult' as any,
             containsBlockElements: false,
         });
-        expect(triggerPluginEventSpy).toHaveBeenCalledTimes(0);
+        expect(triggerPluginEventSpy).toHaveBeenCalledTimes(1);
     });
 });

packages/roosterjs-content-model-core/test/command/paste/pasteTest.ts

@@ -223,9 +223,9 @@ describe('paste with content model & paste plugin', () => {
 
         paste(editor!, clipboardData, 'asPlainText');
 
-        expect(setProcessorF.setProcessor).toHaveBeenCalledTimes(0);
-        expect(addParserF.addParser).toHaveBeenCalledTimes(0);
-        expect(WordDesktopFile.processPastedContentFromWordDesktop).toHaveBeenCalledTimes(0);
+        expect(setProcessorF.setProcessor).toHaveBeenCalledTimes(1);
+        expect(addParserF.addParser).toHaveBeenCalledTimes(9);
+        expect(WordDesktopFile.processPastedContentFromWordDesktop).toHaveBeenCalledTimes(1);
     });
 
     it('Word Online | Plain Text', () => {
@@ -234,9 +234,9 @@ describe('paste with content model & paste plugin', () => {
 
         paste(editor!, clipboardData, 'asPlainText');
 
-        expect(setProcessorF.setProcessor).toHaveBeenCalledTimes(0);
-        expect(addParserF.addParser).toHaveBeenCalledTimes(0);
-        expect(WacComponents.processPastedContentWacComponents).toHaveBeenCalledTimes(0);
+        expect(setProcessorF.setProcessor).toHaveBeenCalledTimes(2);
+        expect(addParserF.addParser).toHaveBeenCalledTimes(11);
+        expect(WacComponents.processPastedContentWacComponents).toHaveBeenCalledTimes(1);
     });
 
     it('Excel Online | Plain Text', () => {
@@ -246,7 +246,7 @@ describe('paste with content model & paste plugin', () => {
         paste(editor!, clipboardData, 'asPlainText');
 
         expect(setProcessorF.setProcessor).toHaveBeenCalledTimes(0);
-        expect(addParserF.addParser).toHaveBeenCalledTimes(0);
+        expect(addParserF.addParser).toHaveBeenCalledTimes(4);
         expect(ExcelF.processPastedContentFromExcel).toHaveBeenCalledTimes(0);
     });
 
@@ -257,7 +257,7 @@ describe('paste with content model & paste plugin', () => {
         paste(editor!, clipboardData, 'asPlainText');
 
         expect(setProcessorF.setProcessor).toHaveBeenCalledTimes(0);
-        expect(addParserF.addParser).toHaveBeenCalledTimes(0);
+        expect(addParserF.addParser).toHaveBeenCalledTimes(4);
         expect(ExcelF.processPastedContentFromExcel).toHaveBeenCalledTimes(0);
     });
 
@@ -268,8 +268,8 @@ describe('paste with content model & paste plugin', () => {
         paste(editor!, clipboardData, 'asPlainText');
 
         expect(setProcessorF.setProcessor).toHaveBeenCalledTimes(0);
-        expect(addParserF.addParser).toHaveBeenCalledTimes(0);
-        expect(PPT.processPastedContentFromPowerPoint).toHaveBeenCalledTimes(0);
+        expect(addParserF.addParser).toHaveBeenCalledTimes(4);
+        expect(PPT.processPastedContentFromPowerPoint).toHaveBeenCalledTimes(1);
     });
 
     it('Verify the event data is not lost', () => {