Content Model: Set alignment API

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

@@ -24,6 +24,13 @@ export const listItemProcessor: ElementProcessor<HTMLLIElement> = (group, elemen
                 );
 
                 const listItem = createListItem(listFormat.levels, context.segmentFormat);
+                parseFormat(
+                    element,
+                    context.formatParsers.listItemElement,
+                    listItem.format,
+                    context
+                );
+
                 listFormat.listParent!.blocks.push(listItem);
 
                 parseFormat(

packages/roosterjs-content-model/lib/formatHandlers/block/directionFormatHandler.ts

@@ -23,7 +23,15 @@ export const directionFormatHandler: FormatHandler<DirectionFormat> = {
     parse: (format, element, _, defaultStyle) => {
         const dir = element.style.direction || element.dir || defaultStyle.direction;
         const alignFromAttr = element.getAttribute('align');
-        const align = element.style.textAlign || alignFromAttr || defaultStyle.textAlign;
+        const textAlign = element.style.textAlign || alignFromAttr || defaultStyle.textAlign;
+        const alignSelf = element.style.alignSelf;
+        const isLI = element.tagName === 'li';
+        const isFlex =
+            element.parentElement &&
+            element.parentElement.style.display === 'flex' &&
+            element.style.flexDirection === 'column';
+        const shouldApplyAlignSelf = isLI && isFlex;
+        const align = shouldApplyAlignSelf ? alignSelf : textAlign;
 
         if (dir) {
             format.direction = dir == 'rtl' ? 'rtl' : 'ltr';
@@ -62,9 +70,16 @@ export const directionFormatHandler: FormatHandler<DirectionFormat> = {
 
             if (format.isTextAlignFromAttr) {
                 element.setAttribute('align', value);
+            } else if (element.tagName === 'LI') {
+                element.style.alignSelf = format.textAlign;
             } else {
                 element.style.textAlign = value;
             }
         }
+
+        if (element.tagName == 'OL' || element.tagName == 'UL') {
+            element.style.flexDirection = 'column';
+            element.style.display = 'flex';
+        }
     },
 };

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

@@ -95,6 +95,7 @@ const defaultFormatKeysPerCategory: {
 } = {
     block: blockFormatHandlers,
     listItem: ['listItemThread', 'listItemMetadata'],
+    listItemElement: ['direction'],
     listLevel: ['listType', 'listLevelThread', 'listLevelMetadata', 'direction', 'margin'],
     segment: [
         'superOrSubScript',

packages/roosterjs-content-model/lib/modelApi/block/setModelAlignment.ts

@@ -0,0 +1,73 @@
+import { alignTable } from '../table/alignTable';
+import { ContentModelDocument } from '../../publicTypes/group/ContentModelDocument';
+import { ContentModelListItem } from '../../publicTypes/group/ContentModelListItem';
+import { getOperationalBlocks } from '../selection/collectSelections';
+import { TableOperation } from 'roosterjs-editor-types';
+
+const ResultMap: Record<
+    'left' | 'center' | 'right',
+    Record<'ltr' | 'rtl', 'start' | 'center' | 'end'>
+> = {
+    left: {
+        ltr: 'start',
+        rtl: 'end',
+    },
+    center: {
+        ltr: 'center',
+        rtl: 'center',
+    },
+    right: {
+        ltr: 'end',
+        rtl: 'start',
+    },
+};
+
+const TableAlignMap: Record<
+    'left' | 'center' | 'right',
+    Record<
+        'ltr' | 'rtl',
+        TableOperation.AlignLeft | TableOperation.AlignCenter | TableOperation.AlignRight
+    >
+> = {
+    left: {
+        ltr: TableOperation.AlignLeft,
+        rtl: TableOperation.AlignRight,
+    },
+    center: {
+        ltr: TableOperation.AlignCenter,
+        rtl: TableOperation.AlignCenter,
+    },
+    right: {
+        ltr: TableOperation.AlignRight,
+        rtl: TableOperation.AlignLeft,
+    },
+};
+
+/**
+ * @internal
+ */
+export function setModelAlignment(
+    model: ContentModelDocument,
+    alignment: 'left' | 'center' | 'right'
+) {
+    const paragraphOrListItemOrTable = getOperationalBlocks<ContentModelListItem>(
+        model,
+        ['ListItem'],
+        ['TableCell']
+    );
+
+    paragraphOrListItemOrTable.forEach(({ block }) => {
+        const newAligment = ResultMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr'];
+        if (block.blockType === 'Table') {
+            alignTable(
+                block,
+                TableAlignMap[alignment][block.format.direction == 'rtl' ? 'rtl' : 'ltr']
+            );
+        } else if (block) {
+            const { format } = block;
+            format.textAlign = newAligment;
+        }
+    });
+
+    return paragraphOrListItemOrTable.length > 0;
+}

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

@@ -28,6 +28,7 @@ export const handleListItem: ContentModelBlockHandler<ContentModelListItem> = (
     listParent.insertBefore(li, refNode?.parentNode == listParent ? refNode : null);
 
     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, context);
 

packages/roosterjs-content-model/lib/publicApi/block/setAlignment.ts

@@ -1,23 +1,6 @@
-import { formatParagraphWithContentModel } from '../utils/formatParagraphWithContentModel';
+import { formatWithContentModel } from '../utils/formatWithContentModel';
 import { IContentModelEditor } from '../../publicTypes/IContentModelEditor';
-
-const ResultMap: Record<
-    'left' | 'center' | 'right',
-    Record<'ltr' | 'rtl', 'start' | 'center' | 'end'>
-> = {
-    left: {
-        ltr: 'start',
-        rtl: 'end',
-    },
-    center: {
-        ltr: 'center',
-        rtl: 'center',
-    },
-    right: {
-        ltr: 'end',
-        rtl: 'start',
-    },
-};
+import { setModelAlignment } from '../../modelApi/block/setModelAlignment';
 
 /**
  * Set text alignment of selected paragraphs
@@ -28,8 +11,5 @@ export default function setAlignment(
     editor: IContentModelEditor,
     alignment: 'left' | 'center' | 'right'
 ) {
-    formatParagraphWithContentModel(editor, 'setAlignment', para => {
-        para.format.textAlign =
-            ResultMap[alignment][para.format.direction == 'rtl' ? 'rtl' : 'ltr'];
-    });
+    formatWithContentModel(editor, 'setAlignment', model => setModelAlignment(model, alignment));
 }

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

@@ -2,6 +2,7 @@ import { ContentModelBlockFormat } from './ContentModelBlockFormat';
 import { ContentModelDividerFormat } from './ContentModelDividerFormat';
 import { ContentModelHyperLinkFormat } from './ContentModelHyperLinkFormat';
 import { ContentModelImageFormat } from './ContentModelImageFormat';
+import { ContentModelListItemFormat } from './ContentModelListItemFormat';
 import { ContentModelListItemLevelFormat } from './ContentModelListItemLevelFormat';
 import { ContentModelSegmentFormat } from './ContentModelSegmentFormat';
 import { ContentModelTableCellFormat } from './ContentModelTableCellFormat';
@@ -58,6 +59,11 @@ export interface ContentModelFormatMap {
      */
     tableCellBorder: ContentModelTableCellFormat;
 
+    /**
+     * Format type for li element
+     */
+    listItemElement: ContentModelListItemFormat;
+
     /**
      * Format type for listItem
      */

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

@@ -0,0 +1,6 @@
+import { DirectionFormat } from './formatParts/DirectionFormat';
+
+/**
+ * The format object for a list item in Content Model
+ */
+export type ContentModelListItemFormat = DirectionFormat;

packages/roosterjs-content-model/lib/publicTypes/group/ContentModelListItem.ts

@@ -1,5 +1,6 @@
 import { ContentModelBlockBase } from '../block/ContentModelBlockBase';
 import { ContentModelBlockGroupBase } from './ContentModelBlockGroupBase';
+import { ContentModelListItemFormat } from '../format/ContentModelListItemFormat';
 import { ContentModelListItemLevelFormat } from '../format/ContentModelListItemLevelFormat';
 import { ContentModelSelectionMarker } from '../segment/ContentModelSelectionMarker';
 
@@ -8,7 +9,7 @@ import { ContentModelSelectionMarker } from '../segment/ContentModelSelectionMar
  */
 export interface ContentModelListItem
     extends ContentModelBlockGroupBase<'ListItem'>,
-        ContentModelBlockBase<'BlockGroup'> {
+        ContentModelBlockBase<'BlockGroup', ContentModelListItemFormat> {
     /**
      * Type of this list, either ordered or unordered
      */

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

@@ -35,6 +35,7 @@ export { ContentModelTableFormat } from './format/ContentModelTableFormat';
 export { ContentModelTableCellFormat } from './format/ContentModelTableCellFormat';
 export { ContentModelBlockFormat } from './format/ContentModelBlockFormat';
 export { ContentModelSegmentFormat } from './format/ContentModelSegmentFormat';
+export { ContentModelListItemFormat } from './format/ContentModelListItemFormat';
 export { ContentModelListItemLevelFormat } from './format/ContentModelListItemLevelFormat';
 export { ContentModelImageFormat } from './format/ContentModelImageFormat';
 export { ContentModelWithFormat } from './format/ContentModelWithFormat';

packages/roosterjs-content-model/test/domToModel/endToEndTest.ts

@@ -4,7 +4,12 @@ import { ContentModelDocument } from '../../lib/publicTypes/group/ContentModelDo
 import { EditorContext } from '../../lib/publicTypes/context/EditorContext';
 
 describe('End to end test for DOM => Model', () => {
-    function runTest(html: string, expectedModel: ContentModelDocument, expectedHtml: string) {
+    function runTest(
+        html: string,
+        expectedModel: ContentModelDocument,
+        expectedHtml: string,
+        expectedHTMLFirefox?: string
+    ) {
         const context: EditorContext = {
             isDarkMode: false,
         };
@@ -19,8 +24,12 @@ describe('End to end test for DOM => Model', () => {
         const div2 = document.createElement('div');
 
         contentModelToDom(document, div2, model, context);
+        const possibleHTML = [
+            expectedHtml, //chrome or firefox
+            expectedHTMLFirefox, //firefox
+        ];
 
-        expect(div2.innerHTML).toEqual(expectedHtml);
+        expect(possibleHTML.indexOf(div2.innerHTML)).toBeGreaterThanOrEqual(0);
     }
 
     it('List with margin', () => {
@@ -107,7 +116,7 @@ describe('End to end test for DOM => Model', () => {
                     },
                 ],
             },
-            '<ul style="margin-bottom: 0in;"><li style="font-family: Calibri, sans-serif; font-size: 11pt; color: black;"><span style="font-family: Calibri, sans-serif; font-size: 11pt; color: black;">1</span></li><li style="font-family: Calibri, sans-serif; font-size: 11pt; color: black;"><span style="font-family: Calibri, sans-serif; font-size: 11pt; color: black;">2</span></li></ul>'
+            '<ul style="flex-direction: column; display: flex; margin-bottom: 0in;"><li style="font-family: Calibri, sans-serif; font-size: 11pt; color: black;"><span style="font-family: Calibri, sans-serif; font-size: 11pt; color: black;">1</span></li><li style="font-family: Calibri, sans-serif; font-size: 11pt; color: black;"><span style="font-family: Calibri, sans-serif; font-size: 11pt; color: black;">2</span></li></ul>'
         );
     });
 
@@ -195,7 +204,8 @@ describe('End to end test for DOM => Model', () => {
                     },
                 ],
             },
-            '<ol start="1"><li>1</li><ol start="1"><li style="list-style-type: lower-alpha;">a</li></ol><li style="display: block;">b</li><li>2</li></ol>'
+            '<ol start="1" style="flex-direction: column; display: flex;"><li>1</li><ol start="1" style="flex-direction: column; display: flex;"><li style="list-style-type: lower-alpha;">a</li></ol><li style="display: block;">b</li><li>2</li></ol>',
+            '<ol style="flex-direction: column; display: flex;" start="1"><li>1</li><ol style="flex-direction: column; display: flex;" start="1"><li style="list-style-type: lower-alpha;">a</li></ol><li style="display: block;">b</li><li>2</li></ol>'
         );
     });
 });