Fix #3171 #3184

Author: JiuqingSong

demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts

@@ -59,7 +59,13 @@ const initialState: OptionState = {
         codeFormat: {},
     },
     editPluginOptions: {
-        handleTabKey: true,
+        handleTabKey: {
+            indentMultipleBlocks: true,
+            indentTable: true,
+            appendTableRow: true,
+            indentList: true,
+            indentParagraph: true,
+        },
     },
     customReplacements: emojiReplacements,
     disableSideResize: false,

demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts

@@ -2,6 +2,7 @@ import {
     AutoFormatOptions,
     CustomReplace,
     EditOptions,
+    HandleTabOptions,
     MarkdownOptions,
 } from 'roosterjs-content-model-plugins';
 import type { SidePaneElementProps } from '../SidePaneElement';
@@ -39,7 +40,7 @@ export interface OptionState {
     autoFormatOptions: AutoFormatOptions;
     markdownOptions: MarkdownOptions;
     customReplacements: CustomReplace[];
-    editPluginOptions: EditOptions;
+    editPluginOptions: EditOptions & { handleTabKey: HandleTabOptions };
     disableSideResize: boolean;
 
     // Legacy plugin options

demo/scripts/controlsV2/sidePane/editorOptions/Plugins.tsx

@@ -205,10 +205,40 @@ export class Plugins extends PluginsBase<keyof BuildInPluginList> {
                         'Edit',
                         <>
                             {this.renderCheckBox(
-                                'Handle Tab Key',
+                                'Tab to indent multiple blocks',
                                 this.handleTabKey,
-                                this.props.state.editPluginOptions.handleTabKey,
-                                (state, value) => (state.editPluginOptions.handleTabKey = value)
+                                this.props.state.editPluginOptions.handleTabKey
+                                    .indentMultipleBlocks,
+                                (state, value) =>
+                                    (state.editPluginOptions.handleTabKey.indentMultipleBlocks = value)
+                            )}
+                            {this.renderCheckBox(
+                                'Tab to indent table',
+                                this.handleTabKey,
+                                this.props.state.editPluginOptions.handleTabKey.indentTable,
+                                (state, value) =>
+                                    (state.editPluginOptions.handleTabKey.indentTable = value)
+                            )}
+                            {this.renderCheckBox(
+                                'Tab to append table row',
+                                this.handleTabKey,
+                                this.props.state.editPluginOptions.handleTabKey.appendTableRow,
+                                (state, value) =>
+                                    (state.editPluginOptions.handleTabKey.appendTableRow = value)
+                            )}
+                            {this.renderCheckBox(
+                                'Tab to indent list items',
+                                this.handleTabKey,
+                                this.props.state.editPluginOptions.handleTabKey.indentList,
+                                (state, value) =>
+                                    (state.editPluginOptions.handleTabKey.indentList = value)
+                            )}
+                            {this.renderCheckBox(
+                                'Tab to indent paragraph',
+                                this.handleTabKey,
+                                this.props.state.editPluginOptions.handleTabKey.indentParagraph,
+                                (state, value) =>
+                                    (state.editPluginOptions.handleTabKey.indentParagraph = value)
                             )}
                             {this.renderCheckBox(
                                 'Handle Enter Key',

packages/roosterjs-content-model-api/lib/modelApi/block/setModelIndentation.ts

@@ -7,6 +7,7 @@ import {
     getOperationalBlocks,
     isBlockGroupOfType,
     mutateBlock,
+    normalizeContentModel,
     parseValueWithUnit,
     updateListMetadata,
 } from 'roosterjs-content-model-dom';
@@ -134,7 +135,13 @@ export function setModelIndentation(
         }
     });
 
-    return paragraphOrListItem.length > 0;
+    if (paragraphOrListItem.length > 0) {
+        normalizeContentModel(model);
+
+        return true;
+    } else {
+        return false;
+    }
 }
 
 function isSelected(listItem: ReadonlyContentModelListItem) {

packages/roosterjs-content-model-api/lib/publicApi/block/setIndentation.ts

@@ -1,4 +1,3 @@
-import { normalizeContentModel } from 'roosterjs-content-model-dom';
 import { setModelIndentation } from '../../modelApi/block/setModelIndentation';
 import type { IEditor } from 'roosterjs-content-model-types';
 
@@ -19,10 +18,6 @@ export function setIndentation(
         (model, context) => {
             const result = setModelIndentation(model, indentation, length);
 
-            if (result) {
-                normalizeContentModel(model);
-            }
-
             context.newPendingFormat = 'preserve';
 
             return result;