Fix Paste issue from Word

packages/roosterjs-editor-plugins/lib/plugins/Paste/wordConverter/convertPastedContentFromWord.ts

@@ -7,6 +7,7 @@ import { processNodeConvert, processNodesDiscovery } from './converterUtils';
 
 const PERCENTAGE_REGEX = /%/;
 const DEFAULT_BROWSER_LINE_HEIGHT_PERCENTAGE = 120;
+const LIST_ELEMENTS_SELECTOR = 'p,h1,h2,h3,h4,h5,h6';
 
 /**
  * @internal
@@ -27,7 +28,7 @@ export default function convertPastedContentFromWord(event: BeforePasteEvent) {
     // First find all the nodes that we need to check for list item information
     // This call will return all the p and header elements under the root node.. These are the elements that
     // Word uses a list items, so we'll only process them and avoid walking the whole tree.
-    let elements = fragment.querySelectorAll('p');
+    let elements = fragment.querySelectorAll(LIST_ELEMENTS_SELECTOR) as NodeListOf<HTMLElement>;
     if (elements.length > 0) {
         wordConverter.wordConverterArgs = createWordConverterArguments(elements);
         if (processNodesDiscovery(wordConverter)) {

packages/roosterjs-editor-plugins/lib/plugins/Paste/wordConverter/converterUtils.ts

@@ -168,7 +168,15 @@ export function processNodeConvert(wordConverter: WordConverter): boolean {
 
                 // Create a new list item and transfer the children
                 let li = node.ownerDocument.createElement('LI');
-                moveChildNodes(li, node);
+                if (getTagOfNode(node).startsWith('H')) {
+                    const clone = node.cloneNode(true /* deep */) as HTMLHeadingElement;
+                    clone.style.textIndent = '';
+                    clone.style.marginLeft = '';
+                    clone.style.marginRight = '';
+                    li.appendChild(clone);
+                } else {
+                    moveChildNodes(li, node);
+                }
 
                 // Append the list item into the list
                 list.appendChild(li);

packages/roosterjs-editor-plugins/test/paste/word/convertPastedContentFromWordTest.ts

@@ -115,6 +115,35 @@ describe('convertPastedContentFromWord', () => {
         let source = '<p style="line-height:122%"></p>';
         runTest(source, source);
     });
+
+    describe('List Convertion Tests | ', () => {
+        it('List with Headings', () => {
+            const html =
+                createListElementFromWord('p', 'test1') + createListElementFromWord('h1', 'test2');
+            runTest(html, '<ul><li>test1</li><li><h1>test2</h1></li></ul>');
+        });
+
+        it('List with Headings in sub level 1', () => {
+            const html =
+                createListElementFromWord('p', 'test1') +
+                createListElementFromWord('h1', 'test2', 'l0 level2 lfo1');
+            runTest(html, '<ul><li>test1</li><ul><li><h1>test2</h1></li></ul></ul>');
+        });
+
+        it('List with Headings in sub level 2', () => {
+            const html =
+                createListElementFromWord('p', 'test1') +
+                createListElementFromWord('h1', 'test2', 'l0 level3 lfo1');
+            runTest(html, '<ul><li>test1</li><ul><ul><li><h1>test2</h1></li></ul></ul></ul>');
+        });
+
+        it('List with Headings in sub level 3', () => {
+            const html =
+                createListElementFromWord('p', 'test1') +
+                createListElementFromWord('h1', 'test2', 'l1 level3 lfo2');
+            runTest(html, '<ul><li>test1</li><ul><ul><li><h1>test2</h1></li></ul></ul></ul>');
+        });
+    });
 });
 
 function createBeforePasteEventMock(fragment: DocumentFragment) {
@@ -140,3 +169,15 @@ function createBeforePasteEventMock(fragment: DocumentFragment) {
         htmlAttributes: {},
     } as unknown) as BeforePasteEvent;
 }
+
+function createListElementFromWord(
+    tag: string,
+    content: string,
+    msoList: string = 'l0 level1 lfo1'
+) {
+    return (
+        `<${tag} style="text-indent:-.25in;mso-list: ${msoList}" class="MsoListParagraph"><!--[if !supportLists]--><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;&nbsp;' +
+        `</span></span></span><!--[endif]-->${content}</${tag}>`
+    );
+}