Standalone editor: Refactor list format handler 1 (#2136)

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

@@ -0,0 +1,12 @@
+import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
+import { FormatRenderer } from '../utils/FormatRenderer';
+import { ListStyleFormat } from 'roosterjs-content-model-types';
+
+export const ListStylePositionFormatRenderers: FormatRenderer<ListStyleFormat>[] = [
+    createDropDownFormatRenderer(
+        'List position',
+        ['inside', 'outside'],
+        format => format.listStylePosition,
+        (format, value) => (format.listStylePosition = value)
+    ),
+];

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

@@ -4,7 +4,7 @@ import { DirectionFormatRenderer } from '../format/formatPart/DirectionFormatRen
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
 import { ListMetadataFormatRenderers } from '../format/formatPart/ListMetadataFormatRenderers';
-import { ListStylePositionFormatRenderer } from '../format/formatPart/ListStylePositionFormatRenderer';
+import { ListStylePositionFormatRenderers } from '../format/formatPart/ListStylePositionFormatRenderers';
 import { ListThreadFormatRenderers } from '../format/formatPart/ListThreadFormatRenderer';
 import { MarginFormatRenderer } from '../format/formatPart/MarginFormatRenderer';
 import { MetadataView } from '../format/MetadataView';
@@ -25,7 +25,7 @@ const ListLevelFormatRenders: FormatRenderer<ContentModelListItemLevelFormat>[]
     TextAlignFormatRenderer,
     MarginFormatRenderer,
     PaddingFormatRenderer,
-    ListStylePositionFormatRenderer,
+    ...ListStylePositionFormatRenderers,
 ];
 
 export function ContentModelListLevelView(props: { level: ContentModelListLevel }) {

demo/scripts/controls/ribbonButtons/contentModel/listStartNumberButton.ts

@@ -24,9 +24,7 @@ export const listStartNumberButton: RibbonButton<
     iconName: 'NumberSymbol',
     isDisabled: formatState => !formatState.isNumbering,
     onClick: (editor, key, strings, uiUtility) => {
-        const li = editor.getElementAtCursor('li') as HTMLLIElement;
-
-        if (li && isContentModelEditor(editor)) {
+        if (isContentModelEditor(editor)) {
             if (key == 'ribbonButtonSetStartNumberCustomize') {
                 showInputDialog(
                     uiUtility,
@@ -44,12 +42,10 @@ export const listStartNumberButton: RibbonButton<
                     const newValue = parseInt(values.startNumber);
 
                     if (newValue > 0) {
-                        editor.select(li);
                         setListStartNumber(editor, newValue);
                     }
                 });
             } else {
-                editor.select(li);
                 setListStartNumber(editor, 1);
             }
         }

demo/scripts/controls/ribbonButtons/contentModel/setBulletedListStyleButton.ts

@@ -20,17 +20,9 @@ export const setBulletedListStyleButton: RibbonButton<'ribbonButtonBulletedListS
     iconName: 'BulletedList',
     isDisabled: formatState => !formatState.isBullet,
     onClick: (editor, key) => {
-        const li = editor.getElementAtCursor('li') as HTMLLIElement;
         const value = parseInt(key) as BulletListType;
 
-        if (
-            isContentModelEditor(editor) &&
-            li &&
-            value >= BulletListType.Min &&
-            value <= BulletListType.Max
-        ) {
-            editor.select(li);
-
+        if (isContentModelEditor(editor)) {
             setListStyle(editor, {
                 unorderedStyleType: value,
             });

demo/scripts/controls/ribbonButtons/contentModel/setNumberedListStyleButton.ts

@@ -32,17 +32,9 @@ export const setNumberedListStyleButton: RibbonButton<'ribbonButtonNumberedListS
     iconName: 'NumberedList',
     isDisabled: formatState => !formatState.isNumbering,
     onClick: (editor, key) => {
-        const li = editor.getElementAtCursor('li') as HTMLLIElement;
         const value = parseInt(key) as NumberingListType;
 
-        if (
-            isContentModelEditor(editor) &&
-            li &&
-            value >= NumberingListType.Min &&
-            value <= NumberingListType.Max
-        ) {
-            editor.select(li);
-
+        if (isContentModelEditor(editor)) {
             setListStyle(editor, {
                 orderedStyleType: value,
             });

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

@@ -35,7 +35,7 @@ export const listItemProcessor: ElementProcessor<HTMLLIElement> = (group, elemen
 
                 parseFormat(
                     element,
-                    context.formatParsers.listItem,
+                    context.formatParsers.listItemThread,
                     listItem.levels[listItem.levels.length - 1].format,
                     context
                 );

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

@@ -19,7 +19,7 @@ import { lineHeightFormatHandler } from './block/lineHeightFormatHandler';
 import { linkFormatHandler } from './segment/linkFormatHandler';
 import { listItemThreadFormatHandler } from './list/listItemThreadFormatHandler';
 import { listLevelThreadFormatHandler } from './list/listLevelThreadFormatHandler';
-import { listStylePositionFormatHandler } from './list/listStylePositionFormatHandler';
+import { listStyleFormatHandler } from './list/listStyleFormatHandler';
 import { marginFormatHandler } from './block/marginFormatHandler';
 import { paddingFormatHandler } from './block/paddingFormatHandler';
 import { sizeFormatHandler } from './common/sizeFormatHandler';
@@ -70,7 +70,7 @@ const defaultFormatHandlerMap: FormatHandlers = {
     link: linkFormatHandler,
     listItemThread: listItemThreadFormatHandler,
     listLevelThread: listLevelThreadFormatHandler,
-    listStylePosition: listStylePositionFormatHandler,
+    listStyle: listStyleFormatHandler,
     margin: marginFormatHandler,
     padding: paddingFormatHandler,
     size: sizeFormatHandler,
@@ -120,15 +120,15 @@ export const defaultFormatKeysPerCategory: {
     [key in keyof ContentModelFormatMap]: (keyof FormatHandlerTypeMap)[];
 } = {
     block: sharedBlockFormats,
-    listItem: ['listItemThread'],
+    listItemThread: ['listItemThread'],
     listItemElement: [...sharedBlockFormats, 'direction', 'textAlign', 'lineHeight', 'margin'],
     listLevel: [
         'listLevelThread',
         'direction',
         'textAlign',
         'margin',
         'padding',
-        'listStylePosition',
+        'listStyle',
         'backgroundColor',
     ],
     styleBasedSegment: [...styleBasedSegmentFormats, 'textColor', 'backgroundColor', 'lineHeight'],

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

@@ -1,10 +1,10 @@
 import type { FormatHandler } from '../FormatHandler';
-import type { ListStylePositionFormat } from 'roosterjs-content-model-types';
+import type { ListStyleFormat } from 'roosterjs-content-model-types';
 
 /**
  * @internal
  */
-export const listStylePositionFormatHandler: FormatHandler<ListStylePositionFormat> = {
+export const listStyleFormatHandler: FormatHandler<ListStyleFormat> = {
     parse: (format, element) => {
         const listStylePosition = element.style.listStylePosition;
 

packages-content-model/roosterjs-content-model-dom/lib/modelToDom/handlers/handleListItem.ts

@@ -34,7 +34,7 @@ export const handleListItem: ContentModelBlockHandler<ContentModelListItem> = (
     if (level) {
         applyFormat(li, context.formatAppliers.listItemElement, listItem.format, context);
         applyFormat(li, context.formatAppliers.segment, listItem.formatHolder.format, context);
-        applyFormat(li, context.formatAppliers.listItem, level.format, context);
+        applyFormat(li, context.formatAppliers.listItemThread, level.format, context);
 
         // TODO: Move this out into roosterjs-content-model-editor package
         updateListMetadata(level, metadata => {

packages-content-model/roosterjs-content-model-dom/test/formatHandlers/list/listStylePositionFormatHandlerTest.ts → packages-content-model/roosterjs-content-model-dom/test/formatHandlers/list/listStyleFormatHandlerTest.ts

@@ -1,16 +1,16 @@
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
-import { listStylePositionFormatHandler } from '../../../lib/formatHandlers/list/listStylePositionFormatHandler';
+import { listStyleFormatHandler } from '../../../lib/formatHandlers/list/listStyleFormatHandler';
 import {
     DomToModelContext,
-    ListStylePositionFormat,
+    ListStyleFormat,
     ModelToDomContext,
 } from 'roosterjs-content-model-types';
 
-describe('listStylePositionFormatHandler.parse', () => {
+describe('listStyleFormatHandler.parse', () => {
     let div: HTMLElement;
     let context: DomToModelContext;
-    let format: ListStylePositionFormat;
+    let format: ListStyleFormat;
 
     beforeEach(() => {
         div = document.createElement('div');
@@ -19,22 +19,24 @@ describe('listStylePositionFormatHandler.parse', () => {
     });
 
     it('Not format', () => {
-        listStylePositionFormatHandler.parse(format, div, context, {});
+        listStyleFormatHandler.parse(format, div, context, {});
 
         expect(format.listStylePosition).toBeUndefined();
     });
 
-    it('with letter spacing', () => {
+    it('with list style position', () => {
         div.style.listStylePosition = 'inside';
-        listStylePositionFormatHandler.parse(format, div, context, {});
+        listStyleFormatHandler.parse(format, div, context, {});
 
-        expect(format.listStylePosition).toBe('inside');
+        expect(format).toEqual({
+            listStylePosition: 'inside',
+        });
     });
 });
 
-describe('listStylePositionFormatHandler.apply', () => {
+describe('listStyleFormatHandler.apply', () => {
     let div: HTMLElement;
-    let format: ListStylePositionFormat;
+    let format: ListStyleFormat;
     let context: ModelToDomContext;
 
     beforeEach(() => {
@@ -44,15 +46,15 @@ describe('listStylePositionFormatHandler.apply', () => {
     });
 
     it('no format', () => {
-        listStylePositionFormatHandler.apply(format, div, context);
+        listStyleFormatHandler.apply(format, div, context);
 
         expect(div.outerHTML).toEqual('<div></div>');
     });
 
     it('with value', () => {
         format.listStylePosition = 'inside';
 
-        listStylePositionFormatHandler.apply(format, div, context);
+        listStyleFormatHandler.apply(format, div, context);
 
         expect(div.outerHTML).toEqual('<div style="list-style-position: inside;"></div>');
     });

packages-content-model/roosterjs-content-model-dom/test/modelToDom/handlers/handleListItemTest.ts

@@ -117,7 +117,7 @@ describe('handleListItem', () => {
         );
         expect(applyFormat.applyFormat).toHaveBeenCalledWith(
             parent.firstChild as HTMLElement,
-            context.formatAppliers.listItem,
+            context.formatAppliers.listItemThread,
             listItem.levels[0].format,
             context
         );
@@ -185,7 +185,7 @@ describe('handleListItem', () => {
         );
         expect(applyFormat.applyFormat).toHaveBeenCalledWith(
             parent.firstChild as HTMLElement,
-            context.formatAppliers.listItem,
+            context.formatAppliers.listItemThread,
             listItem.levels[0].format,
             context
         );
@@ -378,7 +378,7 @@ describe('handleListItem without format handler', () => {
         );
         expect(applyFormat.applyFormat).toHaveBeenCalledWith(
             parent.firstChild as HTMLElement,
-            context.formatAppliers.listItem,
+            context.formatAppliers.listItemThread,
             listItem.levels[0].format,
             context
         );
@@ -446,7 +446,7 @@ describe('handleListItem without format handler', () => {
         );
         expect(applyFormat.applyFormat).toHaveBeenCalledWith(
             parent.firstChild as HTMLElement,
-            context.formatAppliers.listItem,
+            context.formatAppliers.listItemThread,
             listItem.levels[0].format,
             context
         );

packages-content-model/roosterjs-content-model-editor/lib/editor/plugins/PastePlugin/WacComponents/processPastedContentWacComponents.ts

@@ -200,7 +200,7 @@ function shouldClearListContext(
  */
 export function processPastedContentWacComponents(ev: ContentModelBeforePasteEvent) {
     addParser(ev.domToModelOption, 'segment', wacSubSuperParser);
-    addParser(ev.domToModelOption, 'listItem', wacListItemParser);
+    addParser(ev.domToModelOption, 'listItemThread', wacListItemParser);
     addParser(ev.domToModelOption, 'listLevel', wacListLevelParser);
     addParser(ev.domToModelOption, 'container', wacBlockParser);
 

packages-content-model/roosterjs-content-model-types/lib/format/ContentModelFormatMap.ts

@@ -84,7 +84,7 @@ export interface ContentModelFormatMap {
     /**
      * Format type for listItem
      */
-    listItem: ContentModelListItemLevelFormat;
+    listItemThread: ContentModelListItemLevelFormat;
 
     /**
      * Format type for listLevel

packages-content-model/roosterjs-content-model-types/lib/format/ContentModelListItemFormat.ts

@@ -1,5 +1,6 @@
 import type { DirectionFormat } from './formatParts/DirectionFormat';
 import type { LineHeightFormat } from './formatParts/LineHeightFormat';
+import type { ListStyleFormat } from './formatParts/ListStyleFormat';
 import type { MarginFormat } from './formatParts/MarginFormat';
 import type { PaddingFormat } from './formatParts/PaddingFormat';
 import type { TextAlignFormat } from './formatParts/TextAlignFormat';
@@ -11,4 +12,5 @@ export type ContentModelListItemFormat = DirectionFormat &
     LineHeightFormat &
     MarginFormat &
     PaddingFormat &
-    TextAlignFormat;
+    TextAlignFormat &
+    ListStyleFormat;

packages-content-model/roosterjs-content-model-types/lib/format/ContentModelListItemLevelFormat.ts

@@ -1,5 +1,5 @@
 import type { DirectionFormat } from './formatParts/DirectionFormat';
-import type { ListStylePositionFormat } from './formatParts/ListStylePositionFormat';
+import type { ListStyleFormat } from './formatParts/ListStyleFormat';
 import type { ListThreadFormat } from './formatParts/ListThreadFormat';
 import type { MarginFormat } from './formatParts/MarginFormat';
 import type { PaddingFormat } from './formatParts/PaddingFormat';
@@ -13,4 +13,4 @@ export type ContentModelListItemLevelFormat = ListThreadFormat &
     TextAlignFormat &
     MarginFormat &
     PaddingFormat &
-    ListStylePositionFormat;
+    ListStyleFormat;

packages-content-model/roosterjs-content-model-types/lib/format/FormatHandlerTypeMap.ts

@@ -16,7 +16,7 @@ import type { ItalicFormat } from './formatParts/ItalicFormat';
 import type { LetterSpacingFormat } from './formatParts/LetterSpacingFormat';
 import type { LineHeightFormat } from './formatParts/LineHeightFormat';
 import type { LinkFormat } from './formatParts/LinkFormat';
-import type { ListStylePositionFormat } from './formatParts/ListStylePositionFormat';
+import type { ListStyleFormat } from './formatParts/ListStyleFormat';
 import type { ListThreadFormat } from './formatParts/ListThreadFormat';
 import type { MarginFormat } from './formatParts/MarginFormat';
 import type { PaddingFormat } from './formatParts/PaddingFormat';
@@ -137,9 +137,9 @@ export interface FormatHandlerTypeMap {
     listLevelThread: ListThreadFormat;
 
     /**
-     * Format for ListStylePositionFormat (used by list level)
+     * Format for ListStyleFormat
      */
-    listStylePosition: ListStylePositionFormat;
+    listStyle: ListStyleFormat;
 
     /**
      * Format for MarginFormat

packages-content-model/roosterjs-content-model-types/lib/format/formatParts/ListStylePositionFormat.ts → packages-content-model/roosterjs-content-model-types/lib/format/formatParts/ListStyleFormat.ts

@@ -1,7 +1,7 @@
 /**
- * Format of list-style-position
+ * Format of list-style
  */
-export type ListStylePositionFormat = {
+export type ListStyleFormat = {
     /**
      * list-style-position
      */

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

@@ -45,7 +45,7 @@ export { LinkFormat } from './format/formatParts/LinkFormat';
 export { SizeFormat } from './format/formatParts/SizeFormat';
 export { BoxShadowFormat } from './format/formatParts/BoxShadowFormat';
 export { ListThreadFormat } from './format/formatParts/ListThreadFormat';
-export { ListStylePositionFormat } from './format/formatParts/ListStylePositionFormat';
+export { ListStyleFormat } from './format/formatParts/ListStyleFormat';
 export { FloatFormat } from './format/formatParts/FloatFormat';
 export { EntityInfoFormat } from './format/formatParts/EntityInfoFormat';