Merge branch 'master' into u/ianeli/bump-nov-11

Author: ianeli1

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' });
     });