microsoft
diff --git a/‎demo/scripts/controlsV2/demoButtons/setTableHeaderButton.ts
-13 b/‎demo/scripts/controlsV2/demoButtons/setTableHeaderButton.ts
-13
diff --git a/‎demo/scripts/controlsV2/demoButtons/tableOptionsButton.ts
+53 b/‎demo/scripts/controlsV2/demoButtons/tableOptionsButton.ts
+53
diff --git a/‎demo/scripts/controlsV2/sidePane/apiPlayground/insertEntity/InsertEntityPane.tsx
+2-2 b/‎demo/scripts/controlsV2/sidePane/apiPlayground/insertEntity/InsertEntityPane.tsx
+2-2
diff --git a/‎demo/scripts/controlsV2/sidePane/contentModel/ContentModelPanePlugin.ts
+4-2 b/‎demo/scripts/controlsV2/sidePane/contentModel/ContentModelPanePlugin.ts
+4-2
diff --git a/‎demo/scripts/controlsV2/sidePane/contentModel/components/format/MetadataView.tsx
+8-2 b/‎demo/scripts/controlsV2/sidePane/contentModel/components/format/MetadataView.tsx
+8-2
diff --git a/‎demo/scripts/controlsV2/tabs/ribbonButtons.ts
+3-3 b/‎demo/scripts/controlsV2/tabs/ribbonButtons.ts
+3-3
diff --git a/‎packages/roosterjs-content-model-api/lib/modelApi/block/setModelIndentation.ts
+14-12 b/‎packages/roosterjs-content-model-api/lib/modelApi/block/setModelIndentation.ts
+14-12
diff --git a/‎packages/roosterjs-content-model-api/lib/modelApi/entity/insertEntityModel.ts
+12-9 b/‎packages/roosterjs-content-model-api/lib/modelApi/entity/insertEntityModel.ts
+12-9
diff --git a/‎packages/roosterjs-content-model-api/lib/modelApi/list/findListItemsInSameThread.ts
+33-10 b/‎packages/roosterjs-content-model-api/lib/modelApi/list/findListItemsInSameThread.ts
+33-10
@@ -0,0 +1,53 @@
+import { formatTable, getFormatState } from 'roosterjs-content-model-api';
+import { TableMetadataFormat } from 'roosterjs-content-model-types';
+import type { RibbonButton } from '../roosterjsReact/ribbon';
+
+const TableEditOperationMap: Partial<Record<
+    TableOptionsMenuItemStringKey,
+    keyof TableMetadataFormat
+>> = {
+    menuNameTableSetHeaderRow: 'hasHeaderRow',
+    menuNameTableSetFirstColumn: 'hasFirstColumn',
+    menuNameTableSetBandedColumns: 'hasBandedColumns',
+    menuNameTableSetBandedRows: 'hasBandedRows',
+};
+
+/**
+ * Key of localized strings of Table Options menu items
+ */
+type TableOptionsMenuItemStringKey =
+    | 'menuNameTableSetHeaderRow'
+    | 'menuNameTableSetFirstColumn'
+    | 'menuNameTableSetBandedColumns'
+    | 'menuNameTableSetBandedRows';
+
+export const tableOptionsButton: RibbonButton<
+    'ribbonButtonTableOptions' | TableOptionsMenuItemStringKey
+> = {
+    key: 'ribbonButtonTableOptions',
+    iconName: '',
+    unlocalizedText: 'Options',
+    isDisabled: formatState => !formatState.isInTable,
+    dropDownMenu: {
+        items: {
+            menuNameTableSetHeaderRow: 'Header Row',
+            menuNameTableSetFirstColumn: 'First Column',
+            menuNameTableSetBandedColumns: 'Banded Columns',
+            menuNameTableSetBandedRows: 'Banded Rows',
+        },
+    },
+    onClick: (editor, key) => {
+        if (key != 'ribbonButtonTableOptions') {
+            const format = getFormatState(editor);
+            const tableFormatProperty = TableEditOperationMap[key];
+            formatTable(
+                editor,
+                { [tableFormatProperty]: !format.tableFormat[tableFormatProperty] },
+                true /*keepCellShade*/
+            );
+        }
+    },
+    commandBarProperties: {
+        iconOnly: false,
+    },
+};
@@ -3,9 +3,9 @@ import { ApiPaneProps } from '../ApiPaneProps';
 import { insertEntity } from 'roosterjs-content-model-api';
 import { trustedHTMLHandler } from '../../../../utils/trustedHTMLHandler';
 import {
-    ContentModelBlockGroup,
     ContentModelEntity,
     InsertEntityOptions,
+    ReadonlyContentModelBlockGroup,
 } from 'roosterjs-content-model-types';
 
 const styles = require('./InsertEntityPane.scss');
@@ -155,7 +155,7 @@ export default class InsertEntityPane extends React.Component<ApiPaneProps, Inse
     };
 }
 
-function findAllEntities(group: ContentModelBlockGroup, result: ContentModelEntity[]) {
+function findAllEntities(group: ReadonlyContentModelBlockGroup, result: ContentModelEntity[]) {
     group.blocks.forEach(block => {
         switch (block.blockType) {
             case 'BlockGroup':
 
@@ -1,3 +1,4 @@
+import { cloneModel } from 'roosterjs-content-model-dom';
 import { ContentModelPane, ContentModelPaneProps } from './ContentModelPane';
 import { createRibbonPlugin, RibbonButton, RibbonPlugin } from '../../roosterjsReact/ribbon';
 import { getRefreshButton } from './buttons/refreshButton';
@@ -70,8 +71,9 @@ export class ContentModelPanePlugin extends SidePanePluginImpl<
         this.getComponent(component => {
             this.editor.formatContentModel(
                 model => {
-                    component.setContentModel(model);
-                    setCurrentContentModel(model);
+                    const clonedModel = cloneModel(model);
+                    component.setContentModel(clonedModel);
+                    setCurrentContentModel(clonedModel);
 
                     return false;
                 },
 
@@ -1,13 +1,19 @@
 import * as React from 'react';
-import { ContentModelWithDataset } from 'roosterjs-content-model-types';
 import { FormatRenderer } from './utils/FormatRenderer';
+import {
+    ContentModelWithDataset,
+    ShallowMutableContentModelWithDataset,
+} from 'roosterjs-content-model-types';
 
 const styles = require('./FormatView.scss');
 
 export function MetadataView<T>(props: {
     model: ContentModelWithDataset<T>;
     renderers: FormatRenderer<T>[];
-    updater: (model: ContentModelWithDataset<T>, callback: (format: T | null) => T | null) => void;
+    updater: (
+        model: ShallowMutableContentModelWithDataset<T>,
+        callback: (format: T | null) => T | null
+    ) => void;
 }) {
     const { model, renderers, updater } = props;
     const metadata = React.useRef<T>(null);
 
@@ -37,7 +37,6 @@ import { setBulletedListStyleButton } from '../demoButtons/setBulletedListStyleB
 import { setHeadingLevelButton } from '../roosterjsReact/ribbon/buttons/setHeadingLevelButton';
 import { setNumberedListStyleButton } from '../demoButtons/setNumberedListStyleButton';
 import { setTableCellShadeButton } from '../demoButtons/setTableCellShadeButton';
-import { setTableHeaderButton } from '../demoButtons/setTableHeaderButton';
 import { spaceAfterButton, spaceBeforeButton } from '../demoButtons/spaceBeforeAfterButtons';
 import { spacingButton } from '../demoButtons/spacingButton';
 import { strikethroughButton } from '../roosterjsReact/ribbon/buttons/strikethroughButton';
@@ -47,6 +46,7 @@ import { tableBorderApplyButton } from '../demoButtons/tableBorderApplyButton';
 import { tableBorderColorButton } from '../demoButtons/tableBorderColorButton';
 import { tableBorderStyleButton } from '../demoButtons/tableBorderStyleButton';
 import { tableBorderWidthButton } from '../demoButtons/tableBorderWidthButton';
+import { tableOptionsButton } from '../demoButtons/tableOptionsButton';
 import { tabNames } from './getTabs';
 import { textColorButton } from '../roosterjsReact/ribbon/buttons/textColorButton';
 import { underlineButton } from '../roosterjsReact/ribbon/buttons/underlineButton';
@@ -79,7 +79,7 @@ const tableButtons: RibbonButton<any>[] = [
     insertTableButton,
     formatTableButton,
     setTableCellShadeButton,
-    setTableHeaderButton,
+    tableOptionsButton,
     tableInsertButton,
     tableDeleteButton,
     tableBorderApplyButton,
@@ -169,7 +169,7 @@ const allButtons: RibbonButton<any>[] = [
     listStartNumberButton,
     formatTableButton,
     setTableCellShadeButton,
-    setTableHeaderButton,
+    tableOptionsButton,
     tableInsertButton,
     tableDeleteButton,
     tableMergeButton,
 
@@ -4,17 +4,19 @@ import {
     createListLevel,
     getOperationalBlocks,
     isBlockGroupOfType,
+    mutateBlock,
     parseValueWithUnit,
     updateListMetadata,
 } from 'roosterjs-content-model-dom';
 import type {
-    ContentModelBlock,
     ContentModelBlockFormat,
-    ContentModelBlockGroup,
-    ContentModelDocument,
     ContentModelListItem,
     ContentModelListLevel,
     FormatContentModelContext,
+    ReadonlyContentModelBlock,
+    ReadonlyContentModelBlockGroup,
+    ReadonlyContentModelDocument,
+    ReadonlyContentModelListItem,
 } from 'roosterjs-content-model-types';
 
 const IndentStepInPixel = 40;
@@ -26,7 +28,7 @@ const IndentStepInPixel = 40;
  * Set indentation for selected list items or paragraphs
  */
 export function setModelIndentation(
-    model: ContentModelDocument,
+    model: ReadonlyContentModelDocument,
     indentation: 'indent' | 'outdent',
     length: number = IndentStepInPixel,
     context?: FormatContentModelContext
@@ -37,7 +39,7 @@ export function setModelIndentation(
         ['TableCell']
     );
     const isIndent = indentation == 'indent';
-    const modifiedBlocks: ContentModelBlock[] = [];
+    const modifiedBlocks: ReadonlyContentModelBlock[] = [];
 
     paragraphOrListItem.forEach(({ block, parent, path }) => {
         if (isBlockGroupOfType<ContentModelListItem>(block, 'ListItem')) {
@@ -89,12 +91,12 @@ export function setModelIndentation(
                 }
             }
         } else if (block) {
-            let currentBlock: ContentModelBlock = block;
-            let currentParent: ContentModelBlockGroup = parent;
+            let currentBlock: ReadonlyContentModelBlock = block;
+            let currentParent: ReadonlyContentModelBlockGroup = parent;
 
             while (currentParent && modifiedBlocks.indexOf(currentBlock) < 0) {
                 const index = path.indexOf(currentParent);
-                const { format } = currentBlock;
+                const { format } = mutateBlock(currentBlock);
                 const newValue = calculateMarginValue(format, isIndent, length);
 
                 if (newValue !== null) {
@@ -124,7 +126,7 @@ export function setModelIndentation(
     return paragraphOrListItem.length > 0;
 }
 
-function isSelected(listItem: ContentModelListItem) {
+function isSelected(listItem: ReadonlyContentModelListItem) {
     return listItem.blocks.some(block => {
         if (block.blockType == 'Paragraph') {
             return block.segments.some(segment => segment.isSelected);
@@ -137,9 +139,9 @@ function isSelected(listItem: ContentModelListItem) {
  * Otherwise, the margin of the first item will be changed, and the sub list will be created, creating a unintentional margin difference between the list items.
  */
 function isMultilevelSelection(
-    model: ContentModelDocument,
-    listItem: ContentModelListItem,
-    parent: ContentModelBlockGroup
+    model: ReadonlyContentModelDocument,
+    listItem: ReadonlyContentModelListItem,
+    parent: ReadonlyContentModelBlockGroup
 ) {
     const listIndex = parent.blocks.indexOf(listItem);
     for (let i = listIndex - 1; i >= 0; i--) {
 
@@ -6,16 +6,18 @@ import {
     deleteSelection,
     getClosestAncestorBlockGroupIndex,
     setSelection,
+    mutateBlock,
 } from 'roosterjs-content-model-dom';
 import type {
-    ContentModelBlock,
-    ContentModelBlockGroup,
     ContentModelDocument,
     ContentModelEntity,
-    ContentModelParagraph,
     FormatContentModelContext,
     InsertEntityPosition,
     InsertPoint,
+    ReadonlyContentModelBlock,
+    ShallowMutableContentModelBlock,
+    ShallowMutableContentModelBlockGroup,
+    ShallowMutableContentModelParagraph,
 } from 'roosterjs-content-model-types';
 
 /**
@@ -30,7 +32,7 @@ export function insertEntityModel(
     context?: FormatContentModelContext,
     insertPointOverride?: InsertPoint
 ) {
-    let blockParent: ContentModelBlockGroup | undefined;
+    let blockParent: ShallowMutableContentModelBlockGroup | undefined;
     let blockIndex = -1;
     let insertPoint: InsertPoint | null;
 
@@ -57,9 +59,10 @@ export function insertEntityModel(
                 position == 'root'
                     ? getClosestAncestorBlockGroupIndex(path, ['TableCell', 'Document'])
                     : 0;
-            blockParent = path[pathIndex];
+            blockParent = mutateBlock(path[pathIndex]);
+
             const child = path[pathIndex - 1];
-            const directChild: ContentModelBlock =
+            const directChild: ReadonlyContentModelBlock =
                 child?.blockGroupType == 'FormatContainer' ||
                 child?.blockGroupType == 'General' ||
                 child?.blockGroupType == 'ListItem'
@@ -71,16 +74,16 @@ export function insertEntityModel(
     }
 
     if (blockIndex >= 0 && blockParent) {
-        const blocksToInsert: ContentModelBlock[] = [];
-        let nextParagraph: ContentModelParagraph | undefined;
+        const blocksToInsert: ShallowMutableContentModelBlock[] = [];
+        let nextParagraph: ShallowMutableContentModelParagraph | undefined;
 
         if (isBlock) {
             const nextBlock = blockParent.blocks[blockIndex];
 
             blocksToInsert.push(entityModel);
 
             if (nextBlock?.blockType == 'Paragraph') {
-                nextParagraph = nextBlock;
+                nextParagraph = mutateBlock(nextBlock);
             } else if (!nextBlock || nextBlock.blockType == 'Entity' || focusAfterEntity) {
                 nextParagraph = createParagraph(false /*isImplicit*/, {}, model.format);
                 nextParagraph.segments.push(createBr(model.format));
 
@@ -1,22 +1,45 @@
-import type { ContentModelBlockGroup, ContentModelListItem } from 'roosterjs-content-model-types';
+import type {
+    ContentModelBlockGroup,
+    ContentModelListItem,
+    ReadonlyContentModelBlockGroup,
+    ReadonlyContentModelListItem,
+} from 'roosterjs-content-model-types';
 
 /**
+ * Search for all list items in the same thread as the current list item
  * @param model The content model
  * @param currentItem The current list item
- * Search for all list items in the same thread as the current list item
  */
 export function findListItemsInSameThread(
     group: ContentModelBlockGroup,
     currentItem: ContentModelListItem
-): ContentModelListItem[] {
+): ContentModelListItem[];
+
+/**
+ * Search for all list items in the same thread as the current list item (Readonly)
+ * @param model The content model
+ * @param currentItem The current list item
+ */
+export function findListItemsInSameThread(
+    group: ReadonlyContentModelBlockGroup,
+    currentItem: ReadonlyContentModelListItem
+): ReadonlyContentModelListItem[];
+
+export function findListItemsInSameThread(
+    group: ReadonlyContentModelBlockGroup,
+    currentItem: ReadonlyContentModelListItem
+): ReadonlyContentModelListItem[] {
     const items: (ContentModelListItem | null)[] = [];
 
     findListItems(group, items);
 
     return filterListItems(items, currentItem);
 }
 
-function findListItems(group: ContentModelBlockGroup, result: (ContentModelListItem | null)[]) {
+function findListItems(
+    group: ReadonlyContentModelBlockGroup,
+    result: (ReadonlyContentModelListItem | null)[]
+) {
     group.blocks.forEach(block => {
         switch (block.blockType) {
             case 'BlockGroup':
@@ -56,7 +79,7 @@ function findListItems(group: ContentModelBlockGroup, result: (ContentModelListI
     });
 }
 
-function pushNullIfNecessary(result: (ContentModelListItem | null)[]) {
+function pushNullIfNecessary(result: (ReadonlyContentModelListItem | null)[]) {
     const last = result[result.length - 1];
 
     if (!last || last !== null) {
@@ -65,10 +88,10 @@ function pushNullIfNecessary(result: (ContentModelListItem | null)[]) {
 }
 
 function filterListItems(
-    items: (ContentModelListItem | null)[],
-    currentItem: ContentModelListItem
+    items: (ReadonlyContentModelListItem | null)[],
+    currentItem: ReadonlyContentModelListItem
 ) {
-    const result: ContentModelListItem[] = [];
+    const result: ReadonlyContentModelListItem[] = [];
     const currentIndex = items.indexOf(currentItem);
     const levelLength = currentItem.levels.length;
     const isOrderedList = currentItem.levels[levelLength - 1]?.listType == 'OL';
@@ -131,7 +154,7 @@ function filterListItems(
 }
 
 function areListTypesCompatible(
-    listItems: (ContentModelListItem | null)[],
+    listItems: (ReadonlyContentModelListItem | null)[],
     currentIndex: number,
     compareToIndex: number
 ): boolean {
@@ -146,7 +169,7 @@ function areListTypesCompatible(
     );
 }
 
-function hasStartNumberOverride(item: ContentModelListItem, levelLength: number): boolean {
+function hasStartNumberOverride(item: ReadonlyContentModelListItem, levelLength: number): boolean {
     return item.levels
         .slice(0, levelLength)
         .some(level => level.format.startNumberOverride !== undefined);