Fix list style issue

packages/roosterjs-editor-api/test/utils/toggleListTypeTest.ts

@@ -36,7 +36,7 @@ describe('toggleListTypeTest()', () => {
                 '<div style="font-family: Arial; font-size: 16pt; color: rgb(0, 111, 201);"><br></div>' +
                 '<div style="font-family: Arial; font-size: 16pt; color: rgb(0, 111, 201);">' +
                 '<ul><li>test</li></ul>' +
-                '<div><span id="focusNode" style="font-family: &quot;Courier New&quot;; font-size: 20pt; color: rgb(208, 92, 18);"></span></div>' +
+                '<div><span id="focusNode" style="font-family:&quot;Courier New&quot;;font-size:20pt;color:rgb(208, 92, 18)"></span></div>' +
                 '</div>'
         );
     });
@@ -62,7 +62,7 @@ describe('toggleListTypeTest()', () => {
                 '<div style="font-family: Arial; font-size: 16pt; color: rgb(0, 111, 201);"><br></div>' +
                 '<div style="font-family: Arial; font-size: 16pt; color: rgb(0, 111, 201);">' +
                 '<ul><li>test</li></ul>' +
-                '<div><span id="focusNode" style="font-family: &quot;Courier New&quot;; font-size: 20pt; color: rgb(208, 92, 18);"></span></div>' +
+                '<div><span id="focusNode" style="font-family:&quot;Courier New&quot;;font-size:20pt;color:rgb(208, 92, 18)"></span></div>' +
                 '<ul><li>test</li></ul>' +
                 '</div>'
         );

packages/roosterjs-editor-dom/lib/list/VListItem.ts

@@ -1,12 +1,14 @@
 import contains from '../utils/contains';
 import getListTypeFromNode from './getListTypeFromNode';
+import getStyles from '../style/getStyles';
 import getTagOfNode from '../utils/getTagOfNode';
 import isBlockElement from '../utils/isBlockElement';
 import moveChildNodes from '../utils/moveChildNodes';
 import safeInstanceOf from '../utils/safeInstanceOf';
 import setBulletListMarkers from './setBulletListMarkers';
 import setListItemStyle from './setListItemStyle';
 import setNumberingListMarkers from './setNumberingListMarkers';
+import setStyles from '../style/setStyles';
 import toArray from '../jsUtils/toArray';
 import unwrap from '../utils/unwrap';
 import wrap from '../utils/wrap';
@@ -366,11 +368,37 @@ export default class VListItem {
 
         // 5. If this is not a list item now, need to unwrap the LI node and do proper handling
         if (this.listTypes.length <= 1) {
-            wrapIfNotBlockNode(
-                getTagOfNode(this.node) == 'LI' ? getChildrenAndUnwrap(this.node) : [this.node],
-                true /*checkFirst*/,
-                true /*checkLast*/
-            );
+            // If original <LI> node has styles for font and color, we need to apply it to new parent
+            const isLi = getTagOfNode(this.node) == 'LI';
+            const stylesToApply = isLi
+                ? {
+                      'font-family': this.node.style.fontFamily,
+                      'font-size': this.node.style.fontSize,
+                      color: this.node.style.color,
+                  }
+                : undefined;
+
+            const childNodes = isLi ? getChildrenAndUnwrap(this.node) : [this.node];
+
+            if (stylesToApply) {
+                for (let i = 0; i < childNodes.length; i++) {
+                    if (safeInstanceOf(childNodes[i], 'Text')) {
+                        childNodes[i] = wrap(childNodes[i], 'span');
+                    }
+
+                    const node = childNodes[i];
+
+                    if (safeInstanceOf(node, 'HTMLElement')) {
+                        const styles = {
+                            ...stylesToApply,
+                            ...getStyles(node),
+                        };
+                        setStyles(node, styles);
+                    }
+                }
+            }
+
+            wrapIfNotBlockNode(childNodes, true /*checkFirst*/, true /*checkLast*/);
         }
     }
 

packages/roosterjs-editor-dom/lib/list/setListItemStyle.ts

@@ -39,19 +39,25 @@ function getInlineChildElementsStyle(element: HTMLElement, styles: string[]) {
     while (contentTraverser.currentInlineElement != currentInlineElement) {
         currentInlineElement = contentTraverser.currentInlineElement;
         let currentNode = currentInlineElement?.getContainerNode() || null;
-        const currentStyle: Record<string | number, string> = {};
+        let currentStyle: Record<string, string> | null = null;
 
         currentNode = currentNode ? findClosestElementAncestor(currentNode) : null;
 
-        // we should consider of when it is the single childnode of element, the parentNode's style should add
+        // we should consider of when it is the single child node of element, the parentNode's style should add
         // such as the "i", "b", "span" node in <li><span><b><i>aa</i></b></span></li>
         while (
             currentNode &&
             currentNode !== element &&
-            safeInstanceOf(currentNode, 'HTMLElement')
+            safeInstanceOf(currentNode, 'HTMLElement') &&
+            (result.length == 0 || (currentNode.textContent?.trim().length || 0) > 0)
         ) {
             styles.forEach(styleName => {
                 const styleValue = (currentNode as HTMLElement).style.getPropertyValue(styleName);
+
+                if (!currentStyle) {
+                    currentStyle = {};
+                }
+
                 if (styleValue && !currentStyle[styleName]) {
                     currentStyle[styleName] = styleValue;
                 }

packages/roosterjs-editor-dom/test/list/VListTest.ts

@@ -426,7 +426,7 @@ describe('VList.writeBack', () => {
                     listTypes: [ListType.Ordered],
                 },
             ],
-            '<ul><li>item1</li></ul><div>item2</div><ol><li>item3</li></ol>'
+            '<ul><li>item1</li></ul><div><span>item2</span></div><ol><li>item3</li></ol>'
         );
     });
 
@@ -498,7 +498,7 @@ describe('VList.writeBack', () => {
                     listTypes: [ListType.Ordered],
                 },
             ],
-            '<div>text</div><ol start="3"><li>item3</li><li>item4</li></ol><div>text</div><ol start="5"><li>item5</li></ol>',
+            '<div><span>text</span></div><ol start="3"><li>item3</li><li>item4</li></ol><div><span>text</span></div><ol start="5"><li>item5</li></ol>',
             ol
         );
     });