Add again fix：when toggle list type,list symbol style maybe incorrect #…

…1228 (#1232)

* Revert "Merge pull request #1230 from microsoft/revert-1228-list-symbol-style"

This reverts commit cc0d7c1, reversing
changes made to 422f650.

* fix

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

@@ -329,12 +329,8 @@ export default class VListItem {
 
         // 4. Inherit styles of the child element to the li, so we are able to apply the styles to the ::marker
         if (this.listTypes.length > 1) {
-            if (
-                !(this.node.style.fontSize || this.node.style.color || this.node.style.fontFamily)
-            ) {
-                const stylesToInherit = ['font-size', 'font-family', 'color'];
-                setListItemStyle(this.node, stylesToInherit);
-            }
+            const stylesToInherit = ['font-size', 'font-family', 'color'];
+            setListItemStyle(this.node, stylesToInherit);
         }
 
         // 5. If this is not a list item now, need to unwrap the LI node and do proper handling

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

@@ -12,7 +12,7 @@ import { InlineElement } from 'roosterjs-editor-types';
  * @param styles The styles that should be applied to the element.
  */
 export default function setListItemStyle(element: HTMLLIElement, styles: string[]) {
-    const elementsStyles = getInlineChildElementsStyle(element);
+    const elementsStyles = getInlineChildElementsStyle(element, styles);
     let stylesToApply: Record<string, string> = getStyles(element);
 
     styles.forEach(styleName => {
@@ -31,22 +31,43 @@ export default function setListItemStyle(element: HTMLLIElement, styles: string[
     setStyles(element, stylesToApply);
 }
 
-function getInlineChildElementsStyle(element: HTMLElement) {
+function getInlineChildElementsStyle(element: HTMLElement, styles: string[]) {
     const result: Record<string, string>[] = [];
     const contentTraverser = ContentTraverser.createBodyTraverser(element);
     let currentInlineElement: InlineElement | null = null;
 
     while (contentTraverser.currentInlineElement != currentInlineElement) {
         currentInlineElement = contentTraverser.currentInlineElement;
         let currentNode = currentInlineElement?.getContainerNode() || null;
+        const currentStyle: Record<string | number, string> = {};
 
         currentNode = currentNode ? findClosestElementAncestor(currentNode) : null;
-        if (safeInstanceOf(currentNode, 'HTMLElement')) {
-            let childStyle = getStyles(currentNode);
-            if (childStyle) {
-                result.push(childStyle);
+
+        // we should consider of when it is the single childnode 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')
+        ) {
+            styles.forEach(styleName => {
+                const styleValue = (currentNode as HTMLElement).style.getPropertyValue(styleName);
+                if (styleValue && !currentStyle[styleName]) {
+                    currentStyle[styleName] = styleValue;
+                }
+            });
+
+            if (currentNode?.parentNode?.childNodes.length === 1) {
+                currentNode = currentNode.parentNode;
+            } else {
+                currentNode = null;
             }
         }
+
+        if (currentStyle) {
+            result.push(currentStyle);
+        }
+
         contentTraverser.getNextInlineElement();
     }
 

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

@@ -301,6 +301,31 @@ describe('setListItemStyle', () => {
         );
     });
 
+    it('List Item element, with <ol><li><div><b><span>aaa</span></b></div></li><ol>', () => {
+        // Arrange;
+        const listItemElement = document.createElement('li');
+        const divElement = document.createElement('div');
+
+        const spanElement = createElement({
+            elementTag: 'span',
+            styles: 'font-size: 72pt;font-family: Tahoma;color:blue',
+            textContent: 'test',
+        });
+
+        const b = document.createElement('b');
+        b.appendChild(spanElement);
+        divElement.appendChild(b);
+        listItemElement.appendChild(divElement);
+
+        // Act;
+        setListItemStyle(listItemElement, stylesToInherit);
+
+        // Assert;
+        expect(listItemElement.getAttribute('style')).toBe(
+            'font-size:72pt;font-family:Tahoma;color:blue'
+        );
+    });
+
     function runTest(childElement: TestChildElement[], result: string) {
         // Arrange
         let listItemElement = document.createElement('li');
@@ -315,6 +340,7 @@ describe('setListItemStyle', () => {
         // Assert
         expect(listItemElement.getAttribute('style')).toBe(result);
     }
+
     function createElement(input: TestChildElement): HTMLElement {
         const { elementTag, styles, textContent } = input;
         const element = document.createElement(elementTag);