Standalone editor: Refactor list format handler 2 (#2137)

* Standalone editor: Refactor list format handler 1

* Standalone editor: List refactor 2

* fix build

demo/scripts/controls/contentModel/components/format/formatPart/ListStylePositionFormatRenderers.ts

@@ -1,4 +1,5 @@
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
+import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
 import { ListStyleFormat } from 'roosterjs-content-model-types';
 
@@ -9,4 +10,9 @@ export const ListStylePositionFormatRenderers: FormatRenderer<ListStyleFormat>[]
         format => format.listStylePosition,
         (format, value) => (format.listStylePosition = value)
     ),
+    createTextFormatRenderer(
+        'List style type',
+        format => format.listStyleType,
+        (format, value) => (format.listStyleType = value)
+    ),
 ];

demo/scripts/controls/contentModel/components/model/ContentModelListLevelView.tsx

@@ -10,7 +10,7 @@ import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer'
 import { MetadataView } from '../format/MetadataView';
 import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { TextAlignFormatRenderer } from '../format/formatPart/TextAlignFormatRenderer';
-import { updateListMetadata } from 'roosterjs-content-model-dom';
+import { updateListMetadata } from 'roosterjs-content-model-editor';
 import { useProperty } from '../../hooks/useProperty';
 import {
     ContentModelListItemLevelFormat,

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/listProcessor.ts

@@ -1,8 +1,6 @@
 import { createListLevel } from '../../modelApi/creators/createListLevel';
-import { listLevelMetadataFormatHandler } from '../../formatHandlers/list/listLevelMetadataFormatHandler';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
-import { updateListMetadata } from '../../domUtils/metadata/updateListMetadata';
 import type { ContentModelListLevel, ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
@@ -27,23 +25,8 @@ export const listProcessor: ElementProcessor<HTMLOListElement | HTMLUListElement
             const { listFormat } = context;
 
             parseFormat(element, context.formatParsers.dataset, level.dataset, context);
+            parseFormat(element, context.formatParsers.listLevelThread, level.format, context);
             parseFormat(element, context.formatParsers.listLevel, level.format, context);
-
-            // TODO: Move this out into roosterjs-content-model-editor package
-            updateListMetadata(level, metadata => {
-                metadata = metadata || {};
-                parseFormat(element, [listLevelMetadataFormatHandler.parse], metadata, context);
-
-                if (
-                    typeof metadata.orderedStyleType == 'undefined' &&
-                    typeof metadata.unorderedStyleType == 'undefined'
-                ) {
-                    metadata = null;
-                }
-
-                return metadata;
-            });
-
             parseFormat(element, context.formatParsers.segment, context.segmentFormat, context);
 
             const originalListParent = listFormat.listParent;

packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts

@@ -121,16 +121,16 @@ export const defaultFormatKeysPerCategory: {
 } = {
     block: sharedBlockFormats,
     listItemThread: ['listItemThread'],
-    listItemElement: [...sharedBlockFormats, 'direction', 'textAlign', 'lineHeight', 'margin'],
-    listLevel: [
-        'listLevelThread',
+    listLevelThread: ['listLevelThread'],
+    listItemElement: [
+        ...sharedBlockFormats,
         'direction',
         'textAlign',
+        'lineHeight',
         'margin',
-        'padding',
         'listStyle',
-        'backgroundColor',
     ],
+    listLevel: ['direction', 'textAlign', 'margin', 'padding', 'listStyle', 'backgroundColor'],
     styleBasedSegment: [...styleBasedSegmentFormats, 'textColor', 'backgroundColor', 'lineHeight'],
     elementBasedSegment: elementBasedSegmentFormats,
     segment: [

packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/list/listLevelThreadFormatHandler.ts

@@ -26,7 +26,10 @@ export const listLevelThreadFormatHandler: FormatHandler<ListThreadFormat> = {
         const {
             listFormat: { threadItemCounts, nodeStack },
         } = context;
-        const depth = nodeStack.length - 1; // The first one is always the parent of list
+
+        // The first one is always the parent of list, and minus another one to convert length to index
+        // This format applier needs to be executed after new list level is pushed into node stack
+        const depth = nodeStack.length - 2;
 
         if (depth >= 0 && isElementOfType(element, 'ol')) {
             const startNumber = format.startNumberOverride;

packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/list/listStyleFormatHandler.ts

@@ -7,14 +7,23 @@ import type { ListStyleFormat } from 'roosterjs-content-model-types';
 export const listStyleFormatHandler: FormatHandler<ListStyleFormat> = {
     parse: (format, element) => {
         const listStylePosition = element.style.listStylePosition;
+        const listStyleType = element.style.listStyleType;
 
         if (listStylePosition) {
             format.listStylePosition = listStylePosition;
         }
+
+        if (listStyleType) {
+            format.listStyleType = listStyleType;
+        }
     },
     apply: (format, element) => {
         if (format.listStylePosition) {
             element.style.listStylePosition = format.listStylePosition;
         }
+
+        if (format.listStyleType) {
+            element.style.listStyleType = format.listStyleType;
+        }
     },
 };

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

@@ -13,7 +13,6 @@ export { parseFormat } from './domToModel/utils/parseFormat';
 export { areSameFormats } from './domToModel/utils/areSameFormats';
 
 export { updateMetadata, hasMetadata } from './domUtils/metadata/updateMetadata';
-export { updateListMetadata } from './domUtils/metadata/updateListMetadata';
 export { isNodeOfType, NodeTypeMap } from './domUtils/isNodeOfType';
 export { isElementOfType } from './domUtils/isElementOfType';
 export { getObjectKeys } from './domUtils/getObjectKeys';

packages-content-model/roosterjs-content-model-dom/lib/modelToDom/context/createModelToDomContext.ts

@@ -86,6 +86,7 @@ export function createModelToDomConfig(
         ),
         defaultModelHandlers: defaultContentModelHandlers,
         defaultFormatAppliers,
+        metadataAppliers: Object.assign({}, ...options.map(x => x?.metadataAppliers)),
     };
 }