Bump Rooster to 9.42.0 & react pkgs to 9.0.3 (#3212)

* support RTL (#3177)

* Update ContextMenuProvider to accept event parameter and adjust related tests (#3175)

* refactor: remove deprecated features and clean up related code in CachePlugin and CopyPastePlugin (#3178)

* Add `test:fast`  for faster unit test runs (#3179)

* refactor: optimize karma configuration for improved performance

* feat: add fast karma configuration and update package.json for debugging

* refactor: streamline karma plugin declaration and update test scripts for clarity

* refactor: update test commands to use fast karma configuration

* Add support for retaining formats when splitting paragraphs on Enter/Delete/Backspace keypress (#3180)

* refactor: optimize karma configuration for improved performance

* feat: add fast karma configuration and update package.json for debugging

* refactor: streamline karma plugin declaration and update test scripts for clarity

* Add support for retaining formats when splitting paragraphs on Enter key press

- Introduced `formatsToKeep` option in `EditOptions` to specify which formats to retain.
- Updated `keyboardEnter`, `handleEnterOnParagraph`, and `splitParagraph` functions to handle the new formats.
- Enhanced tests to verify the correct behavior of format retention during paragraph splits.

* Remove unused import for handleEnterOnParagraph in keyboardEnterTest

* Remove stray backtick from splitParagraph function

* refactor: update test commands to use fast karma configuration

* feat: implement class format handling and preserve formatting on paragraph split

* feat: rename formatsToKeep to formatsToPreserveOnMerge and update related functionality

* test: update spies in keyboardDelete tests and fix format property in preserveParagraphFormat tests

* Support rowSpan equal to 0 (#3181)

* fix: handle zero colSpan and rowSpan in tableProcessor to ensure proper cell creation

* fix: correct colSpan condition in tableProcessor for accurate cell processing

* feat: add spanUntilNextSection support in table cell processing and handling

* refactor: remove spanUntilNextSection from table cell handling and related tests

* refactor: simplify rowSpan handling and improve tableProcessor tests for edge cases

* Remove unneeded changes

* Remove

* fix: update source map configuration for improved debugging accuracy (#3186)

* Support passing event to getContextMenuItems when plugin is a MixedPlugin (#3188)

* feat: enhance context menu handling to support V9 providers with event parameter

* fix: enhance isV9ContextMenuProvider to check for mixed plugins

* refactor: simplify spyOn usage for DarkColorHandler in BridgePlugin tests

* fix: enhance isV9ContextMenuProvider to validate V9 provider signature

* fix: update context menu provider check to use isMixedPluginProvider

* New getContentForCopy API (#3182)

New getContentForCopy API

* feat: add announce options for bold, italic, and underline formatting (#3194)

* feat: add announce options for bold, italic, and underline formatting; update shortcuts and tests

* refactor: update context initialization in toggleBold, toggleItalic, and toggleUnderline tests for type safety

* Address comments from review

* test: add unit tests for bold, italic, and underline shortcuts with announceFormatChange

* Add Find and Replace API and plugin (#3190)

* Add Find and Replace API and plugin

* Fix a comment

* improve

* feat: add announcements for table selection and unselection in the editor (#3195)

* feat: add announce options for bold, italic, and underline formatting; update shortcuts and tests

* refactor: update context initialization in toggleBold, toggleItalic, and toggleUnderline tests for type safety

* feat: add announcements for text selection and unselection in the editor

* refactor: simplify table selection logic by using TableSelection type in getIsSelectingOrUnselecting function

* Update packages/roosterjs-content-model-core/lib/corePlugin/selection/tableSelectionUtils.ts

Co-authored-by: Copilot <[email protected]>

* Address comments from review

* test: add unit tests for bold, italic, and underline shortcuts with announceFormatChange

* Move functionality to a new plugin

* Fix

* Fix

* Fix comment

---------

Co-authored-by: Copilot <[email protected]>

* Fix #396891 (#3199)

* Fix #396891

* improve

* improve

* first colunm (#3202)

* Fix 400434 (#3200)

* Add format when insert table (#3203)

Add the format parameter in the insertTable API, then it will be possible to insert a table with a predefined format. It can be used to add margin bottom to the table, then when a table is inserted under another their border does not overlay.

* Move graduated feature to a separate type (#3205)

* Move graduated feature to a separate type

* improve

* fix build

* Translate lineHeight normal to 120% when pasting from Word Desktop and move parsers to their own file (#3209)

* Translate lineHeight normal to 120% and move parsers to their own file

* Apply suggestions from code review

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

* Fix text to bullet issue (#3210)

* Fix text to bullet issue

* fix test

* Update version

* Update version on react pkgs

---------

Co-authored-by: Julia Roldi <[email protected]>
Co-authored-by: Bryan Valverde U <[email protected]>
Co-authored-by: Jiuqing Song <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 5 people

demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts

@@ -63,12 +63,7 @@ const initialState: OptionState = {
     },
     customReplacements: emojiReplacements,
     disableSideResize: false,
-    experimentalFeatures: new Set<ExperimentalFeature>([
-        'PersistCache',
-        'HandleEnterKey',
-        'CustomCopyCut',
-        'CloneIndependentRoot',
-    ]),
+    experimentalFeatures: new Set<ExperimentalFeature>(['HandleEnterKey', 'CloneIndependentRoot']),
 };
 
 export class EditorOptionsPlugin extends SidePanePluginImpl<OptionsPane, OptionPaneProps> {

demo/scripts/controlsV2/sidePane/editorOptions/ExperimentalFeatures.tsx

@@ -11,9 +11,8 @@ export class ExperimentalFeatures extends React.Component<DefaultFormatProps, {}
     render() {
         return (
             <>
-                {this.renderFeature('PersistCache')}
                 {this.renderFeature('HandleEnterKey')}
-                {this.renderFeature('CustomCopyCut')}
+                {this.renderFeature('KeepSelectionMarkerWhenEnteringTextNode')}
                 {this.renderFeature('CloneIndependentRoot')}
             </>
         );

packages/roosterjs-content-model-api/lib/publicApi/table/insertTable.ts

@@ -9,22 +9,27 @@ import {
     normalizeTable,
     setSelection,
 } from 'roosterjs-content-model-dom';
-import type { IEditor, TableMetadataFormat } from 'roosterjs-content-model-types';
+import type {
+    ContentModelTableFormat,
+    IEditor,
+    TableMetadataFormat,
+} from 'roosterjs-content-model-types';
 
 /**
  * Insert table into editor at current selection
  * @param editor The editor instance
  * @param columns Number of columns in table, it also controls the default table cell width:
  * if columns <= 4, width = 120px; if columns <= 6, width = 100px; else width = 70px
  * @param rows Number of rows in table
- * @param format (Optional) The table format. If not passed, the default format will be applied:
- * background color: #FFF; border color: #ABABAB
+ * @param tableMetadataFormat (Optional) The table format that are stored as metadata. If not passed, the default format will be applied: background color: #FFF; border color: #ABABAB
+ * @param format (Optional) The table format used for style attributes
  */
 export function insertTable(
     editor: IEditor,
     columns: number,
     rows: number,
-    format?: Partial<TableMetadataFormat>
+    tableMetadataFormat?: Partial<TableMetadataFormat>,
+    format?: ContentModelTableFormat
 ) {
     editor.focus();
 
@@ -35,14 +40,17 @@ export function insertTable(
             if (insertPosition) {
                 const doc = createContentModelDocument();
                 const table = createTableStructure(doc, columns, rows);
+                if (format) {
+                    table.format = { ...format };
+                }
 
                 normalizeTable(table, editor.getPendingFormat() || insertPosition.marker.format);
 
                 adjustTableIndentation(insertPosition, table);
 
                 // Assign default vertical align
-                format = format || { verticalAlign: 'top' };
-                applyTableFormat(table, format);
+                tableMetadataFormat = tableMetadataFormat || { verticalAlign: 'top' };
+                applyTableFormat(table, tableMetadataFormat);
                 mergeModel(model, doc, context, {
                     insertPosition,
                     mergeFormat: 'mergeAll',

packages/roosterjs-content-model-api/test/modelApi/block/splitSelectedParagraphByBrTest.ts

@@ -468,11 +468,13 @@ describe('splitSelectedParagraphByBr', () => {
                     blockType: 'Paragraph',
                     segments: [text3_1],
                     format: {},
+                    cachedElement: mockedCache,
                 },
                 {
                     blockType: 'Paragraph',
                     segments: [text4_1],
                     format: {},
+                    cachedElement: mockedCache,
                 },
                 {
                     blockType: 'Paragraph',

packages/roosterjs-content-model-api/test/publicApi/table/insertTableTest.ts

@@ -261,5 +261,70 @@ describe('insertTable', () => {
                 ],
             });
         });
+
+        it('should insert table with format', () => {
+            // Arrange
+            const model: ContentModelDocument = {
+                blockGroupType: 'Document',
+                blocks: [
+                    {
+                        blockType: 'Paragraph',
+                        segments: [
+                            {
+                                segmentType: 'SelectionMarker',
+                                isSelected: true,
+                                format: {},
+                            },
+                        ],
+                        format: {},
+                    },
+                ],
+            };
+
+            let resultModel: ContentModelDocument | null = null;
+
+            formatContentModelSpy.and.callFake((callback: any) => {
+                const result = callback(model, {
+                    newEntities: [],
+                    deletedEntities: [],
+                    newImages: [],
+                });
+                resultModel = model;
+                return result;
+            });
+
+            // Act
+            insertTable(editor, 3, 3, undefined, {
+                marginBottom: '1px',
+            });
+
+            // Assert
+            expect(resultModel!).toEqual({
+                blockGroupType: 'Document',
+                blocks: [
+                    {
+                        blockType: 'Table',
+                        rows: jasmine.any(Array),
+                        format: {
+                            borderCollapse: true,
+                            useBorderBox: true,
+                            marginBottom: '1px',
+                        },
+                        widths: jasmine.any(Array),
+                        dataset: jasmine.any(Object),
+                    },
+                    {
+                        blockType: 'Paragraph',
+                        segments: [
+                            {
+                                segmentType: 'Br',
+                                format: {},
+                            },
+                        ],
+                        format: {},
+                    },
+                ],
+            });
+        });
     });
 });

packages/roosterjs-content-model-core/lib/command/createModelFromHtml/createDomToModelContextForSanitizing.ts

@@ -9,6 +9,7 @@ import { pasteTextProcessor } from '../../override/pasteTextProcessor';
 import { pasteWhiteSpaceFormatParser } from '../../override/pasteWhiteSpaceFormatParser';
 import type {
     ContentModelSegmentFormat,
+    DOMHelper,
     DomToModelContext,
     DomToModelOption,
     DomToModelOptionForSanitizing,
@@ -32,7 +33,8 @@ export function createDomToModelContextForSanitizing(
     document: Document,
     defaultFormat?: ContentModelSegmentFormat,
     defaultOption?: DomToModelOption,
-    additionalSanitizingOption?: Partial<DomToModelOptionForSanitizing>
+    additionalSanitizingOption?: Partial<DomToModelOptionForSanitizing>,
+    domHelper?: DOMHelper
 ): DomToModelContext {
     const sanitizingOption: DomToModelOptionForSanitizing = {
         ...DefaultSanitizingOption,
@@ -44,6 +46,7 @@ export function createDomToModelContextForSanitizing(
             defaultFormat,
             ...getRootComputedStyleForContext(document),
             experimentalFeatures: [],
+            editorViewWidth: domHelper?.getClientWidth(),
         },
         defaultOption,
         {

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

@@ -61,7 +61,8 @@ export function mergePasteContent(
                 editor.getDocument(),
                 undefined /*defaultFormat*/,
                 editor.getEnvironment().domToModelSettings.customized,
-                domToModelOption
+                domToModelOption,
+                editor.getDOMHelper()
             );
 
             domToModelContext.segmentFormat = getSegmentFormatForPaste(model, pasteType);

packages/roosterjs-content-model-core/lib/coreApi/createEditorContext/createEditorContext.ts

@@ -21,6 +21,7 @@ export const createEditorContext: CreateEditorContext = (core, saveIndex) => {
         zoomScale: domHelper.calculateZoomScale(),
         experimentalFeatures: core.experimentalFeatures ?? [],
         paragraphMap: core.cache.paragraphMap,
+        editorViewWidth: domHelper.getClientWidth(),
         ...getRootComputedStyleForContext(logicalRoot.ownerDocument),
     };
 

packages/roosterjs-content-model-core/test/command/createModelFromHtml/createDomToModelContextForSanitizingTest.ts

@@ -45,6 +45,7 @@ describe('createDomToModelContextForSanitizing', () => {
                 defaultFormat: undefined,
                 rootFontSize: 16,
                 experimentalFeatures: [],
+                editorViewWidth: undefined,
             },
             undefined,
             {
@@ -77,7 +78,10 @@ describe('createDomToModelContextForSanitizing', () => {
             document,
             mockedDefaultFormat,
             mockedOption,
-            mockedAdditionalOption
+            mockedAdditionalOption,
+            {
+                getClientWidth: () => 500,
+            } as any
         );
 
         const additionalOption = {
@@ -91,6 +95,7 @@ describe('createDomToModelContextForSanitizing', () => {
                 defaultFormat: mockedDefaultFormat,
                 rootFontSize: 16,
                 experimentalFeatures: [],
+                editorViewWidth: 500,
             },
             mockedOption,
             {

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

@@ -24,6 +24,7 @@ import {
     InsertPoint,
     IEditor,
     ClipboardData,
+    DOMHelper,
 } from 'roosterjs-content-model-types';
 
 describe('mergePasteContent', () => {
@@ -33,6 +34,7 @@ describe('mergePasteContent', () => {
     let sourceModel: ContentModelDocument;
     let editor: IEditor;
     let mockedClipboard: ClipboardData;
+    let mockedDOMHelper: DOMHelper;
 
     beforeEach(() => {
         formatResult = undefined;
@@ -54,12 +56,17 @@ describe('mergePasteContent', () => {
                 expect(changedData).toBe(mockedClipboard);
             });
 
+        mockedDOMHelper = {
+            getClientWidth: () => 800,
+        } as any;
+
         editor = {
             formatContentModel,
             getEnvironment: () => ({
                 domToModelSettings: {},
             }),
             getDocument: () => document,
+            getDOMHelper: () => mockedDOMHelper,
         } as any;
     });
 
@@ -420,7 +427,8 @@ describe('mergePasteContent', () => {
             document,
             undefined,
             mockedDomToModelOptions,
-            mockedDefaultDomToModelOptions
+            mockedDefaultDomToModelOptions,
+            mockedDOMHelper
         );
         expect(mockedDomToModelContext.segmentFormat).toEqual({ lineHeight: '1pt' });
     });