Fix 277159: Content is too Narrow when pasting divs and div is treate…

…d a general block #2661

packages/roosterjs-content-model-core/lib/override/containerSizeFormatParser.ts

@@ -5,7 +5,7 @@ import type { FormatParser, SizeFormat } from 'roosterjs-content-model-types';
  */
 export const containerSizeFormatParser: FormatParser<SizeFormat> = (format, element) => {
     // For pasted content, there may be existing width generated by browser from the temp DIV. So we need to remove it.
-    if (element.tagName == 'DIV') {
+    if (element.tagName == 'DIV' || element.tagName == 'P') {
         delete format.width;
         delete format.height;
     }

packages/roosterjs-content-model-plugins/lib/paste/DefaultSanitizers.ts

@@ -0,0 +1,23 @@
+import type { ValueSanitizer } from 'roosterjs-content-model-types';
+
+/**
+ * @internal
+ */
+export const DefaultSanitizers: Record<string, ValueSanitizer> = {
+    width: divParagraphSanitizer,
+    height: divParagraphSanitizer,
+    'inline-size': divParagraphSanitizer,
+    'block-size': divParagraphSanitizer,
+};
+
+/**
+ * @internal
+ * exported only for unit test
+ */
+export function divParagraphSanitizer(value: string, tagName: string): string | null {
+    const tag = tagName.toLowerCase();
+    if (tag == 'div' || tag == 'p') {
+        return null;
+    }
+    return value;
+}

packages/roosterjs-content-model-plugins/lib/paste/PastePlugin.ts

@@ -1,5 +1,7 @@
 import { addParser } from './utils/addParser';
-import { BorderKeys } from 'roosterjs-content-model-dom';
+import { BorderKeys, getObjectKeys } from 'roosterjs-content-model-dom';
+import { chainSanitizerCallback } from './utils/chainSanitizerCallback';
+import { DefaultSanitizers } from './DefaultSanitizers';
 import { deprecatedBorderColorParser } from './utils/deprecatedColorParser';
 import { getPasteSource } from './pasteSourceValidations/getPasteSource';
 import { parseLink } from './utils/linkParser';
@@ -9,9 +11,11 @@ import { processPastedContentFromPowerPoint } from './PowerPoint/processPastedCo
 import { processPastedContentFromWordDesktop } from './WordDesktop/processPastedContentFromWordDesktop';
 import { processPastedContentWacComponents } from './WacComponents/processPastedContentWacComponents';
 import type {
+    BeforePasteEvent,
     BorderFormat,
     ContentModelBlockFormat,
     ContentModelTableCellFormat,
+    DomToModelOptionForSanitizing,
     EditorPlugin,
     FormatParser,
     IEditor,
@@ -33,7 +37,21 @@ export class PastePlugin implements EditorPlugin {
      * @param unknownTagReplacement Replace solution of unknown tags, default behavior is to replace with SPAN
      * @param allowExcelNoBorderTable Allow table copied from Excel without border
      */
-    constructor(private allowExcelNoBorderTable?: boolean) {}
+    constructor(
+        private allowExcelNoBorderTable?: boolean,
+        private domToModelForSanitizing: Pick<
+            DomToModelOptionForSanitizing,
+            | 'additionalAllowedTags'
+            | 'additionalDisallowedTags'
+            | 'styleSanitizers'
+            | 'attributeSanitizers'
+        > = {
+            styleSanitizers: DefaultSanitizers,
+            additionalAllowedTags: [],
+            additionalDisallowedTags: [],
+            attributeSanitizers: {},
+        }
+    ) {}
 
     /**
      * Get name of this plugin
@@ -116,6 +134,35 @@ export class PastePlugin implements EditorPlugin {
             addParser(event.domToModelOption, 'block', blockElementParser);
             addParser(event.domToModelOption, 'listLevel', blockElementParser);
         }
+
+        this.setEventSanitizers(event);
+    }
+
+    private setEventSanitizers(event: BeforePasteEvent) {
+        if (this.domToModelForSanitizing) {
+            const {
+                styleSanitizers,
+                attributeSanitizers,
+                additionalAllowedTags,
+                additionalDisallowedTags,
+            } = this.domToModelForSanitizing;
+            getObjectKeys(styleSanitizers).forEach(key =>
+                chainSanitizerCallback(
+                    event.domToModelOption.styleSanitizers,
+                    key,
+                    styleSanitizers[key]
+                )
+            );
+            getObjectKeys(attributeSanitizers).forEach(key =>
+                chainSanitizerCallback(
+                    event.domToModelOption.attributeSanitizers,
+                    key,
+                    attributeSanitizers[key]
+                )
+            );
+            event.domToModelOption.additionalAllowedTags.push(...additionalAllowedTags);
+            event.domToModelOption.additionalDisallowedTags.push(...additionalDisallowedTags);
+        }
     }
 }
 

packages/roosterjs-content-model-plugins/lib/paste/utils/chainSanitizerCallback.ts

@@ -0,0 +1,37 @@
+import type { ValueSanitizer } from 'roosterjs-content-model-types';
+
+/**
+ * @internal
+ * Chain all callback for an style sanitizer
+ * @param map The source callback map
+ * @param name Name of the property to chain
+ * @param newCallback A new callback to process the given name on the given map.
+ */
+export function chainSanitizerCallback(
+    map: Record<string, ValueSanitizer>,
+    name: string,
+    newCallback: ValueSanitizer
+) {
+    const finalCb =
+        typeof newCallback == 'function'
+            ? newCallback
+            : (value: string) => (newCallback ? value : null);
+    if (!map[name]) {
+        map[name] = finalCb;
+    } else {
+        const originalCallback = map[name];
+        map[name] = (value: string, tagName: string) => {
+            const og =
+                typeof originalCallback == 'function'
+                    ? originalCallback(value, tagName)
+                    : originalCallback
+                    ? value
+                    : false;
+            if (!og) {
+                return null;
+            } else {
+                return finalCb(og, tagName);
+            }
+        };
+    }
+}

packages/roosterjs-content-model-plugins/test/paste/ContentModelPastePluginTest.ts

@@ -43,6 +43,11 @@ describe('Content Model Paste Plugin Test', () => {
                 domToModelOption: {
                     additionalAllowedTags: [],
                     additionalDisallowedTags: [],
+                    additionalFormatParsers: {},
+                    formatParserOverride: {},
+                    processorOverride: {},
+                    styleSanitizers: {},
+                    attributeSanitizers: {},
                 } as any,
             };
         });
@@ -158,6 +163,53 @@ describe('Content Model Paste Plugin Test', () => {
 
             expect(addParser.addParser).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED);
             expect(setProcessor.setProcessor).toHaveBeenCalledTimes(0);
+            expect(event.domToModelOption.additionalDisallowedTags.length).toEqual(0);
+            expect(event.domToModelOption.additionalAllowedTags.length).toEqual(0);
+            expect(Object.keys(event.domToModelOption.attributeSanitizers).length).toEqual(0);
+            expect(Object.keys(event.domToModelOption.styleSanitizers).length).toEqual(4);
+        });
+
+        it('Default with customized Sanitizing option', () => {
+            spyOn(getPasteSource, 'getPasteSource').and.returnValue('default');
+
+            plugin = new PastePlugin(undefined, {
+                additionalAllowedTags: ['', '', ''],
+                additionalDisallowedTags: ['', '', ''],
+                attributeSanitizers: {
+                    '1': true,
+                    '2': true,
+                },
+                styleSanitizers: {
+                    '1': true,
+                    '2': true,
+                },
+            });
+
+            plugin.initialize(editor);
+            plugin.onPluginEvent(event);
+
+            expect(addParser.addParser).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED);
+            expect(setProcessor.setProcessor).toHaveBeenCalledTimes(0);
+            expect(event.domToModelOption.additionalDisallowedTags.length).toEqual(3);
+            expect(event.domToModelOption.additionalAllowedTags.length).toEqual(3);
+            expect(Object.keys(event.domToModelOption.attributeSanitizers).length).toEqual(2);
+            expect(Object.keys(event.domToModelOption.styleSanitizers).length).toEqual(2);
+        });
+
+        it('Value set to undefined.', () => {
+            spyOn(getPasteSource, 'getPasteSource').and.returnValue('default');
+
+            plugin = new PastePlugin(undefined, undefined);
+
+            plugin.initialize(editor);
+            plugin.onPluginEvent(event);
+
+            expect(addParser.addParser).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED);
+            expect(setProcessor.setProcessor).toHaveBeenCalledTimes(0);
+            expect(event.domToModelOption.additionalDisallowedTags.length).toEqual(0);
+            expect(event.domToModelOption.additionalAllowedTags.length).toEqual(0);
+            expect(Object.keys(event.domToModelOption.attributeSanitizers).length).toEqual(0);
+            expect(Object.keys(event.domToModelOption.styleSanitizers).length).toEqual(4);
         });
 
         it('Google Sheets', () => {

packages/roosterjs-content-model-plugins/test/paste/sanitizers/divParagraphSanitizerTest.ts

@@ -0,0 +1,18 @@
+import { divParagraphSanitizer } from '../../../lib/paste/DefaultSanitizers';
+
+divParagraphSanitizer;
+
+describe('divParagraphSanitizer', () => {
+    it('handle div', () => {
+        const result = divParagraphSanitizer('100px', 'div');
+        expect(result).toBeNull();
+    });
+    it('handle p', () => {
+        const result = divParagraphSanitizer('100px', 'p');
+        expect(result).toBeNull();
+    });
+    it('handle image', () => {
+        const result = divParagraphSanitizer('100px', 'image');
+        expect(result).toEqual('100px');
+    });
+});