microsoft
diff --git a/‎package.json‎
Lines changed: 1 addition & 1 deletion b/‎package.json‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎packages-ui/roosterjs-react/lib/contextMenu/menus/createImageEditMenuProvider.tsx‎
Lines changed: 62 additions & 1 deletion b/‎packages-ui/roosterjs-react/lib/contextMenu/menus/createImageEditMenuProvider.tsx‎
Lines changed: 62 additions & 1 deletion
diff --git a/‎packages-ui/roosterjs-react/lib/contextMenu/types/ContextMenuItemStringKeys.ts‎
Lines changed: 6 additions & 0 deletions b/‎packages-ui/roosterjs-react/lib/contextMenu/types/ContextMenuItemStringKeys.ts‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎packages/roosterjs-content-model/lib/domToModel/domToContentModel.ts‎
Lines changed: 1 addition & 1 deletion b/‎packages/roosterjs-content-model/lib/domToModel/domToContentModel.ts‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎packages/roosterjs-content-model/lib/domToModel/processors/listItemProcessor.ts‎
Lines changed: 7 additions & 0 deletions b/‎packages/roosterjs-content-model/lib/domToModel/processors/listItemProcessor.ts‎
Lines changed: 7 additions & 0 deletions
diff --git a/‎packages/roosterjs-content-model/lib/domToModel/processors/tableProcessor.ts‎
Lines changed: 4 additions & 0 deletions b/‎packages/roosterjs-content-model/lib/domToModel/processors/tableProcessor.ts‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎packages/roosterjs-content-model/lib/editor/ContentModelEditor.ts‎
Lines changed: 19 additions & 0 deletions b/‎packages/roosterjs-content-model/lib/editor/ContentModelEditor.ts‎
Lines changed: 19 additions & 0 deletions
diff --git a/‎packages/roosterjs-content-model/lib/formatHandlers/block/directionFormatHandler.ts‎
Lines changed: 16 additions & 1 deletion b/‎packages/roosterjs-content-model/lib/formatHandlers/block/directionFormatHandler.ts‎
Lines changed: 16 additions & 1 deletion
diff --git a/‎packages/roosterjs-content-model/lib/formatHandlers/defaultFormatHandlers.ts‎
Lines changed: 4 additions & 11 deletions b/‎packages/roosterjs-content-model/lib/formatHandlers/defaultFormatHandlers.ts‎
Lines changed: 4 additions & 11 deletions
diff --git a/‎packages/roosterjs-content-model/lib/modelApi/block/setModelAlignment.ts‎
Lines changed: 73 additions & 0 deletions b/‎packages/roosterjs-content-model/lib/modelApi/block/setModelAlignment.ts‎
Lines changed: 73 additions & 0 deletions
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.44.1",
+    "version": "8.44.2",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",
 
@@ -82,6 +82,60 @@ const ImageResizeMenuItem: ContextMenuItem<ImageEditMenuItemStringKey, ImageEdit
     },
 };
 
+const ImageRotateMenuItem: ContextMenuItem<ImageEditMenuItemStringKey, ImageEdit> = {
+    key: 'menuNameImageRotate',
+    unlocalizedText: 'Rotate image',
+    subItems: {
+        menuNameImageRotateLeft: 'Left',
+        menuNameImageRotateRight: 'Right',
+    },
+    shouldShow: (_, node, imageEdit) => {
+        return (
+            !!imageEdit?.isOperationAllowed(ImageEditOperation.Rotate) &&
+            canRegenerateImage(node as HTMLImageElement)
+        );
+    },
+    onClick: (key, editor, node, strings, uiUtilities, imageEdit) => {
+        editor.addUndoSnapshot(() => {
+            switch (key) {
+                case 'menuNameImageRotateLeft':
+                    imageEdit?.rotateImage(node as HTMLImageElement, -Math.PI / 2);
+                    break;
+                case 'menuNameImageRotateRight':
+                    imageEdit?.rotateImage(node as HTMLImageElement, Math.PI / 2);
+                    break;
+            }
+        });
+    },
+};
+
+const ImageFlipMenuItem: ContextMenuItem<ImageEditMenuItemStringKey, ImageEdit> = {
+    key: 'menuNameImageFlip',
+    unlocalizedText: 'Flip image',
+    subItems: {
+        menuNameImageRotateFlipHorizontally: 'Flip Horizontally',
+        menuNameImageRotateFlipVertically: 'Flip Vertically',
+    },
+    shouldShow: (_, node, imageEdit) => {
+        return (
+            !!imageEdit?.isOperationAllowed(ImageEditOperation.Rotate) &&
+            canRegenerateImage(node as HTMLImageElement)
+        );
+    },
+    onClick: (key, editor, node, strings, uiUtilities, imageEdit) => {
+        editor.addUndoSnapshot(() => {
+            switch (key) {
+                case 'menuNameImageRotateFlipHorizontally':
+                    imageEdit?.flipImage(node as HTMLImageElement, 'horizontal');
+                    break;
+                case 'menuNameImageRotateFlipVertically':
+                    imageEdit?.flipImage(node as HTMLImageElement, 'vertical');
+                    break;
+            }
+        });
+    },
+};
+
 const ImageCropMenuItem: ContextMenuItem<ImageEditMenuItemStringKey, ImageEdit> = {
     key: 'menuNameImageCrop',
     unlocalizedText: 'Crop image',
@@ -123,7 +177,14 @@ export default function createImageEditMenuProvider(
 ): EditorPlugin {
     return createContextMenuProvider<ImageEditMenuItemStringKey, ImageEdit>(
         'imageEdit',
-        [ImageAltTextMenuItem, ImageResizeMenuItem, ImageCropMenuItem, ImageRemoveMenuItem],
+        [
+            ImageAltTextMenuItem,
+            ImageResizeMenuItem,
+            ImageCropMenuItem,
+            ImageRemoveMenuItem,
+            ImageRotateMenuItem,
+            ImageFlipMenuItem,
+        ],
         strings,
         shouldShowImageEditItems,
         imageEditPlugin
 
@@ -35,11 +35,17 @@ export type ImageEditMenuItemStringKey =
     | 'menuNameImageAltText'
     | 'menuNameImageResize'
     | 'menuNameImageCrop'
+    | 'menuNameImageRotate'
     | 'menuNameImageRemove'
+    | 'menuNameImageFlip'
     | 'menuNameImageSizeBestFit'
     | 'menuNameImageSizeSmall'
     | 'menuNameImageSizeMedium'
     | 'menuNameImageSizeOriginal'
+    | 'menuNameImageRotateLeft'
+    | 'menuNameImageRotateRight'
+    | 'menuNameImageRotateFlipHorizontally'
+    | 'menuNameImageRotateFlipVertically'
     | OkButtonStringKey
     | CancelButtonStringKey;
 
 
@@ -21,7 +21,7 @@ export default function domToContentModel(
     editorContext: EditorContext,
     option: DomToModelOption
 ): ContentModelDocument {
-    const model = createContentModelDocument();
+    const model = createContentModelDocument(editorContext.defaultFormat);
     const context = createDomToModelContext(editorContext, option);
 
     // For root element, use computed style as initial value of segment formats
 
@@ -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(
 
@@ -34,6 +34,8 @@ export const tableProcessor: ElementProcessor<HTMLTableElement> = (
             const { table: selectedTable, firstCell, lastCell } = context.tableSelection || {};
             const hasTableSelection = selectedTable == tableElement && !!firstCell && !!lastCell;
 
+            table.cachedElement = tableElement;
+
             parseFormat(tableElement, context.formatParsers.table, table.format, context);
             parseFormat(
                 tableElement,
@@ -87,6 +89,8 @@ export const tableProcessor: ElementProcessor<HTMLTableElement> = (
                             table.cells[row + rowSpan - 1][targetCol] = cell;
 
                             if (hasTd) {
+                                cell.cachedElement = td;
+
                                 stackFormat(context, { segment: 'shallowClone' }, () => {
                                     parseFormat(
                                         td,
 
@@ -1,6 +1,7 @@
 import contentModelToDom from '../modelToDom/contentModelToDom';
 import domToContentModel from '../domToModel/domToContentModel';
 import { ContentModelDocument } from '../publicTypes/group/ContentModelDocument';
+import { ContentModelSegmentFormat } from '../publicTypes/format/ContentModelSegmentFormat';
 import { Editor } from 'roosterjs-editor-core';
 import { EditorContext } from '../publicTypes/context/EditorContext';
 import { EditorOptions, ExperimentalFeatures } from 'roosterjs-editor-types';
@@ -17,6 +18,7 @@ import {
 export default class ContentModelEditor extends Editor implements IContentModelEditor {
     private cachedModel: ContentModelDocument | null;
     private reuseModel: boolean = false;
+    private defaultFormat: ContentModelSegmentFormat = {};
 
     /**
      * Creates an instance of Editor
@@ -27,6 +29,7 @@ export default class ContentModelEditor extends Editor implements IContentModelE
         super(contentDiv, options);
         this.cachedModel = null;
         this.reuseModel = this.isFeatureEnabled(ExperimentalFeatures.ReusableContentModel);
+        this.defaultFormat = this.getDefaultSegmentFormat();
     }
 
     /**
@@ -90,11 +93,27 @@ export default class ContentModelEditor extends Editor implements IContentModelE
 
         return {
             isDarkMode: this.isDarkMode(),
+            defaultFormat: this.defaultFormat,
             getDarkColor: core.lifecycle.getDarkColor,
             darkColorHandler: this.getDarkColorHandler(),
             addDelimiterForEntity: this.isFeatureEnabled(
                 ExperimentalFeatures.InlineEntityReadOnlyDelimiters
             ),
         };
     }
+
+    private getDefaultSegmentFormat(): ContentModelSegmentFormat {
+        const format = this.getDefaultFormat();
+
+        return {
+            fontWeight: format.bold ? 'bold' : undefined,
+            italic: format.italic || undefined,
+            underline: format.underline || undefined,
+            fontFamily: format.fontFamily || undefined,
+            fontSize: format.fontSize || undefined,
+            textColor: format.textColors?.lightModeColor || format.textColor || undefined,
+            backgroundColor:
+                format.backgroundColors?.lightModeColor || format.backgroundColor || undefined,
+        };
+    }
 }
@@ -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';
+        }
     },
 };
@@ -95,6 +95,7 @@ const defaultFormatKeysPerCategory: {
 } = {
     block: blockFormatHandlers,
     listItem: ['listItemThread', 'listItemMetadata'],
+    listItemElement: ['direction'],
     listLevel: ['listType', 'listLevelThread', 'listLevelMetadata', 'direction', 'margin'],
     segment: [
         'superOrSubScript',
@@ -112,24 +113,16 @@ const defaultFormatKeysPerCategory: {
     segmentOnTableCell: ['fontFamily', 'fontSize', 'underline', 'italic', 'bold'],
     tableCell: [
         'border',
-        'borderBox',
         'backgroundColor',
         'padding',
         'direction',
         'verticalAlign',
         'wordBreak',
         'textColor',
     ],
-    table: [
-        'id',
-        'border',
-        'borderBox',
-        'tableSpacing',
-        'margin',
-        'backgroundColor',
-        'display',
-        'direction',
-    ],
+    table: ['id', 'border', 'margin', 'backgroundColor', 'display', 'direction'],
+    tableBorder: ['borderBox', 'tableSpacing'],
+    tableCellBorder: ['borderBox'],
     image: ['id', 'size', 'margin', 'padding', 'borderBox', 'border', 'boxShadow'],
     link: ['link', 'textColor', 'underline'],
     code: ['fontFamily'],
 
@@ -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;
+}
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "roosterjs",`
`3`		`- "version": "8.44.1",`
	`3`	`+ "version": "8.44.2",`
`4`	`4`	`"description": "Framework-independent javascript editor",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`