Merge branch 'master' into u/bvalverde/fixTrailingSpaceRemoved

Author: BryanValverdeU

packages/roosterjs-content-model-core/lib/corePlugin/cache/textMutationObserver.ts

@@ -59,6 +59,7 @@ class TextMutationObserverImpl implements TextMutationObserver {
                 continue;
             } else if (!includedNodes.has(target)) {
                 if (
+                    !this.domHelper.isNodeInEditor(target) ||
                     findClosestEntityWrapper(target, this.domHelper) ||
                     findClosestBlockEntityContainer(target, this.domHelper)
                 ) {

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

@@ -168,7 +168,7 @@ describe('paste with content model & paste plugin', () => {
         paste(editor!, clipboardData);
 
         expect(setProcessorF.setProcessor).toHaveBeenCalledTimes(2);
-        expect(addParserF.addParser).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED + 6);
+        expect(addParserF.addParser).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED + 7);
         expect(WordDesktopFile.processPastedContentFromWordDesktop).toHaveBeenCalledTimes(1);
     });
 
@@ -224,7 +224,7 @@ describe('paste with content model & paste plugin', () => {
         paste(editor!, clipboardData, 'asPlainText');
 
         expect(setProcessorF.setProcessor).toHaveBeenCalledTimes(2);
-        expect(addParserF.addParser).toHaveBeenCalledTimes(11);
+        expect(addParserF.addParser).toHaveBeenCalledTimes(12);
         expect(WordDesktopFile.processPastedContentFromWordDesktop).toHaveBeenCalledTimes(1);
     });
 

packages/roosterjs-content-model-core/test/corePlugin/cache/textMutationObserverTest.ts

@@ -384,4 +384,55 @@ describe('TextMutationObserverImpl', () => {
         expect(onMutation).toHaveBeenCalledTimes(1);
         expect(onMutation).toHaveBeenCalledWith({ type: 'unknown' });
     });
+
+    it('Ignore changes that is not in editor - add node', () => {
+        const div = document.createElement('div');
+        const span1 = document.createElement('span');
+        const span2 = document.createElement('span');
+
+        div.appendChild(span1);
+
+        const onMutation = jasmine.createSpy('onMutation');
+
+        observer = textMutationObserver.createTextMutationObserver(div, onMutation);
+        observer.startObserving();
+
+        span1.textContent = 'test1';
+        span2.textContent = 'test2';
+
+        observer.flushMutations();
+
+        expect(onMutation).toHaveBeenCalledTimes(1);
+        expect(onMutation).toHaveBeenCalledWith({
+            type: 'childList',
+            addedNodes: [span1.firstChild],
+            removedNodes: [],
+        });
+    });
+
+    it('Ignore changes that is not in editor - remove node', () => {
+        const div = document.createElement('div');
+        const span1 = document.createElement('span');
+        const span2 = document.createElement('span');
+
+        span1.appendChild(span2);
+        div.appendChild(span1);
+
+        const onMutation = jasmine.createSpy('onMutation');
+
+        observer = textMutationObserver.createTextMutationObserver(div, onMutation);
+        observer.startObserving();
+
+        div.removeChild(span1);
+        span1.removeChild(span2);
+
+        observer.flushMutations();
+
+        expect(onMutation).toHaveBeenCalledTimes(1);
+        expect(onMutation).toHaveBeenCalledWith({
+            type: 'childList',
+            addedNodes: [],
+            removedNodes: [span1],
+        });
+    });
 });

packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/processPastedContentFromWordDesktop.ts

@@ -5,6 +5,7 @@ import { getStyles } from '../utils/getStyles';
 import { listLevelParser } from '../parsers/listLevelParser';
 import { processWordComments } from './processWordComments';
 import { processWordList } from './processWordLists';
+import { adjustWordListMarginParser } from '../parsers/adjustWordListMarginParser';
 import { removeNegativeTextIndentParser } from '../parsers/removeNegativeTextIndentParser';
 import { setProcessor } from '../utils/setProcessor';
 import { wordContainerParser } from '../parsers/wordContainerParser';
@@ -28,6 +29,7 @@ export function processPastedContentFromWordDesktop(
     addParser(domToModelOption, 'block', adjustPercentileLineHeight);
     addParser(domToModelOption, 'block', removeNegativeTextIndentParser);
     addParser(domToModelOption, 'listItemElement', removeNegativeTextIndentParser);
+    addParser(domToModelOption, 'listItemElement', adjustWordListMarginParser);
     addParser(domToModelOption, 'listLevel', listLevelParser);
     addParser(domToModelOption, 'container', wordContainerParser);
     addParser(domToModelOption, 'table', wordTableParser);

packages/roosterjs-content-model-plugins/lib/paste/parsers/adjustWordListMarginParser.ts

@@ -0,0 +1,29 @@
+import { parseValueWithUnit } from 'roosterjs-content-model-dom';
+import type { FormatParser, MarginFormat } from 'roosterjs-content-model-types';
+
+const MSO_LIST_PARAGRAPH_CLASS = 'MsoListParagraph';
+
+// Default list padding from the HTML user-agent stylesheet (paddingInlineStart for <ul>/<ol>)
+const DEFAULT_LIST_PADDING_INLINE_START = '40px';
+
+/**
+ * @internal
+ * Parser that subtracts the default list format (paddingInlineStart: 40px) from
+ * the marginLeft of list item elements that have the MsoListParagraph class,
+ * since Word adds the full indentation as margin on the paragraph, which
+ * duplicates the padding the list element already provides.
+ */
+export const adjustWordListMarginParser: FormatParser<MarginFormat> = (
+    format: MarginFormat,
+    element: HTMLElement
+): void => {
+    if (element.classList.contains(MSO_LIST_PARAGRAPH_CLASS) && format.marginLeft) {
+        const currentPx = parseValueWithUnit(format.marginLeft, element);
+        const defaultPx = parseValueWithUnit(DEFAULT_LIST_PADDING_INLINE_START);
+        const result = currentPx - defaultPx;
+
+        if (result > 0) {
+            format.marginLeft = `${result}px`;
+        }
+    }
+};

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

@@ -58,7 +58,7 @@ describe('Content Model Paste Plugin Test', () => {
             plugin.initialize(editor);
             plugin.onPluginEvent(event);
 
-            expect(addParser.addParser).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED + 6);
+            expect(addParser.addParser).toHaveBeenCalledTimes(DEFAULT_TIMES_ADD_PARSER_CALLED + 7);
             expect(setProcessor.setProcessor).toHaveBeenCalledTimes(2);
         });
 

packages/roosterjs-content-model-plugins/test/paste/word/processPastedContentFromWordDesktopTest.ts

@@ -1252,7 +1252,7 @@ describe('processPastedContentFromWordDesktopTest', () => {
                             ],
                             blockType: 'BlockGroup',
                             format: {
-                                marginLeft: '1.5in',
+                                marginLeft: '104px',
                             },
                             blockGroupType: 'ListItem',
                             blocks: [
@@ -1447,6 +1447,76 @@ describe('processPastedContentFromWordDesktopTest', () => {
             );
         });
 
+        it('adjustWordListMarginParser subtracts default list padding from MsoListParagraph margin', () => {
+            // margin-left: 1in = 96px; parser subtracts 40px (default list paddingInlineStart) → 56px
+            const source =
+                '<p style="margin:0in 0in 0in 1in;font-size:12pt;font-family:Calibri, sans-serif;text-indent:-.25in;mso-list:l0 level1 lfo1" class="MsoListParagraph"><span style="font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n</span></span></span>TEST</p>';
+            spyOn(getStyleMetadata, 'getStyleMetadata').and.returnValue(
+                new Map<string, WordMetadata>().set('l0:level1', {
+                    'mso-level-number-format': 'bullet',
+                    'mso-level-start-at': '1',
+                })
+            );
+
+            runTest(
+                source,
+                {
+                    blockGroupType: 'Document',
+                    blocks: [
+                        {
+                            blockType: 'BlockGroup',
+                            blockGroupType: 'ListItem',
+                            blocks: [
+                                {
+                                    blockType: 'Paragraph',
+                                    segments: [
+                                        {
+                                            segmentType: 'Text',
+                                            text: 'TEST',
+                                            format: {
+                                                fontFamily: 'Calibri, sans-serif',
+                                                fontSize: '12pt',
+                                            },
+                                        },
+                                    ],
+                                    format: {},
+                                    isImplicit: true,
+                                    segmentFormat: {
+                                        fontFamily: 'Calibri, sans-serif',
+                                        fontSize: '12pt',
+                                    },
+                                },
+                            ],
+                            levels: [
+                                {
+                                    listType: 'UL',
+                                    format: {
+                                        marginTop: '0in',
+                                        marginRight: '0in',
+                                        paddingLeft: '0px',
+                                        wordList: 'l0',
+                                    },
+                                    dataset: {},
+                                },
+                            ],
+                            formatHolder: {
+                                segmentType: 'SelectionMarker',
+                                isSelected: false,
+                                format: { fontFamily: 'Symbol', fontSize: '12pt' },
+                            },
+                            format: {
+                                marginTop: '0in',
+                                marginRight: '0in',
+                                marginBottom: '0in',
+                                marginLeft: '56px',
+                            },
+                        },
+                    ],
+                },
+                true /* removeUndefinedValues */
+            );
+        });
+
         /**
          *  Test
          *  1. Test