Merge branch 'master' into u/bvalverde/fixPowerPointPasteBug

Author: BryanValverdeU

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

@@ -42,14 +42,20 @@ export function paste(
         clipboardData.rawHtml = cleanHtmlComments(clipboardData.rawHtml);
     }
     const doc = createDOMFromHtml(clipboardData.rawHtml, domCreator);
-    const pasteType =
-        typeof pasteTypeOrGetter == 'function'
-            ? pasteTypeOrGetter(doc, clipboardData)
-            : pasteTypeOrGetter;
 
     // 2. Handle HTML from clipboard
     const htmlFromClipboard = retrieveHtmlInfo(doc, clipboardData);
 
+    const pasteType =
+        typeof pasteTypeOrGetter == 'function'
+            ? pasteTypeOrGetter(
+                  doc,
+                  clipboardData,
+                  editor.getEnvironment(),
+                  htmlFromClipboard.metadata
+              )
+            : pasteTypeOrGetter;
+
     // 3. Create target fragment
     const sourceFragment = createPasteFragment(
         editor.getDocument(),

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

@@ -130,6 +130,30 @@ describe('Paste ', () => {
             'normal'
         );
     });
+
+    it('Execute | Callback receives all parameters defined', () => {
+        let receivedArgs: any[] | undefined;
+
+        const cb: PasteTypeOrGetter = (...args) => {
+            receivedArgs = args;
+            return 'normal';
+        };
+        paste(editor, clipboardData, cb);
+
+        expect(receivedArgs).toBeDefined();
+        expect(receivedArgs!.length).toBe(4);
+
+        const [doc, cbClipboardData, environment, htmlAttributes] = receivedArgs!;
+
+        expect(doc).toBeDefined();
+        expect(doc).not.toBeNull();
+        expect(cbClipboardData).toBeDefined();
+        expect(cbClipboardData).toBe(clipboardData);
+        expect(environment).toBeDefined();
+        expect(environment).not.toBeNull();
+        expect(htmlAttributes).toBeDefined();
+        expect(htmlAttributes).not.toBeNull();
+    });
 });
 
 describe('paste with content model & paste plugin', () => {

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

@@ -200,35 +200,59 @@ describe('retrieveHtmlInfo', () => {
     });
 
     itChromeOnly('Has global CSS rule', () => {
-        runTest(
-            '<style>.a {color:red} .b div, .c {font-size: 10pt}</style><div>test</div><style>test {border: none}</style>',
-            {
-                htmlBefore: '',
-                htmlAfter: '',
-                globalCssRules: [
-                    {
-                        selectors: ['.a'],
-                        text: 'color: red;',
-                    },
-                    {
-                        selectors: ['.b div', '.c'],
-                        text: 'font-size: 10pt;',
-                    },
-                    {
-                        selectors: ['test'],
-                        text:
-                            'border-width: medium; border-style: none; border-color: currentcolor; border-image: initial;',
-                    },
-                ],
-                metadata: {},
-                containsBlockElements: true,
-            },
-            {
-                htmlFirstLevelChildTags: ['DIV'],
-                html:
-                    '<style>.a {color:red} .b div, .c {font-size: 10pt}</style><div>test</div><style>test {border: none}</style>',
-            },
-            '<div>test</div>'
-        );
+        const rawHtml =
+            '<style>.a {color:red} .b div, .c {font-size: 10pt}</style><div>test</div><style>test {border: none}</style>';
+        const doc = new DOMParser().parseFromString(rawHtml, 'text/html');
+        const clipboardData: Partial<ClipboardData> = {
+            rawHtml,
+        };
+
+        const result = retrieveHtmlInfo(doc, clipboardData);
+
+        expect(result.metadata).toEqual({});
+        expect(result.containsBlockElements).toBe(true);
+        expect(result.htmlBefore).toBe('');
+        expect(result.htmlAfter).toBe('');
+        expect(clipboardData).toEqual({
+            rawHtml,
+            htmlFirstLevelChildTags: ['DIV'],
+            html: rawHtml,
+        });
+        expect(doc.body.innerHTML).toBe('<div>test</div>');
+
+        const rules = result.globalCssRules;
+
+        expect(rules.length).toBe(3);
+        expect(rules[0]).toEqual({ selectors: ['.a'], text: 'color: red;' });
+        expect(rules[1]).toEqual({ selectors: ['.b div', '.c'], text: 'font-size: 10pt;' });
+        expect(rules[2].selectors).toEqual(['test']);
+
+        // The border shorthand is serialized style-by-style, and different Chrome
+        // versions serialize the border-image longhand as either 'initial' or 'none'.
+        const declarations = rules[2].text
+            .split(';')
+            .map(declaration => declaration.trim())
+            .filter(declaration => !!declaration);
+        const expectedDeclarations: Record<string, string | string[]> = {
+            'border-width': 'medium',
+            'border-style': 'none',
+            'border-color': 'currentcolor',
+            'border-image': ['initial', 'none'],
+        };
+
+        expect(declarations.length).toBe(Object.keys(expectedDeclarations).length);
+
+        declarations.forEach(declaration => {
+            const separatorIndex = declaration.indexOf(':');
+            const name = declaration.substring(0, separatorIndex).trim();
+            const value = declaration.substring(separatorIndex + 1).trim();
+            const expected = expectedDeclarations[name];
+
+            if (Array.isArray(expected)) {
+                expect(expected).toContain(value);
+            } else {
+                expect(value).toBe(expected);
+            }
+        });
     });
 });

packages/roosterjs-content-model-types/lib/index.ts

@@ -414,7 +414,7 @@ export {
     ContentModelFormatter,
 } from './parameter/FormatContentModelOptions';
 export { ContentModelFormatState } from './parameter/ContentModelFormatState';
-export { PasteTypeOrGetter } from './parameter/PasteTypeOrGetter';
+export { PasteTypeOrGetter, PasteTypeGetter } from './parameter/PasteTypeOrGetter';
 export { ImageFormatState } from './parameter/ImageFormatState';
 export { Border } from './parameter/Border';
 export { InsertEntityOptions } from './parameter/InsertEntityOptions';

packages/roosterjs-content-model-types/lib/parameter/PasteTypeOrGetter.ts

@@ -1,10 +1,24 @@
 import type { ClipboardData } from './ClipboardData';
+import type { EditorEnvironment } from './EditorEnvironment';
 import type { PasteType } from '../enum/PasteType';
 
+/**
+ * A function that returns the Paste Type to use based on the pasted content and clipboard data.
+ * @param document The document parsed from the clipboard raw HTML, or null when there is no HTML
+ * @param clipboardData Clipboard data retrieved from clipboard
+ * @param environment The editor environment information
+ * @param htmlAttributes The metadata (HTML attributes) retrieved from the pasted content
+ * @returns The Paste Type to use
+ */
+export type PasteTypeGetter = (
+    document: Document | null,
+    clipboardData: ClipboardData,
+    environment: EditorEnvironment,
+    htmlAttributes: Record<string, string>
+) => PasteType;
+
 /**
  * Represents the PasteType parameter used to set the paste type to use.
- * It can be either the Paste Type value or a callback that retuns the Paste Type to use.
+ * It can be either the Paste Type value or a callback that returns the Paste Type to use.
  */
-export type PasteTypeOrGetter =
-    | PasteType
-    | ((document: Document | null, clipboardData: ClipboardData) => PasteType);
+export type PasteTypeOrGetter = PasteType | PasteTypeGetter;