Add Handle Tab Key setting to demo site microsoft#2730

Rain-Zheng · Jun 27, 2024 · c7a24ab · c7a24ab
1 parent da46dcb
commit c7a24ab
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 7 deletions.
diff --git a/demo/scripts/controlsV2/mainPane/MainPane.tsx b/demo/scripts/controlsV2/mainPane/MainPane.tsx
@@ -496,10 +496,11 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             autoFormatOptions,
             linkTitle,
             customReplacements,
+            editPluginOptions,
         } = this.state.initState;
         return [
             pluginList.autoFormat && new AutoFormatPlugin(autoFormatOptions),
-            pluginList.edit && new EditPlugin(),
+            pluginList.edit && new EditPlugin(editPluginOptions),
             pluginList.paste && new PastePlugin(allowExcelNoBorderTable),
             pluginList.shortcut && new ShortcutPlugin(),
             pluginList.tableEdit && new TableEditPlugin(),

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts
@@ -52,6 +52,9 @@ const initialState: OptionState = {
         strikethrough: true,
         codeFormat: {},
     },
+    editPluginOptions: {
+        handleTabKey: true,
+    },
     customReplacements: emojiReplacements,
     experimentalFeatures: new Set<ExperimentalFeature>(['PersistCache']),
 };

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts b/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts
@@ -1,4 +1,9 @@
-import { AutoFormatOptions, CustomReplace, MarkdownOptions } from 'roosterjs-content-model-plugins';
+import {
+    AutoFormatOptions,
+    CustomReplace,
+    EditOptions,
+    MarkdownOptions,
+} from 'roosterjs-content-model-plugins';
 import type { SidePaneElementProps } from '../SidePaneElement';
 import type { ContentModelSegmentFormat, ExperimentalFeature } from 'roosterjs-content-model-types';
 
@@ -31,6 +36,7 @@ export interface OptionState {
     autoFormatOptions: AutoFormatOptions;
     markdownOptions: MarkdownOptions;
     customReplacements: CustomReplace[];
+    editPluginOptions: EditOptions;
 
     // Legacy plugin options
     defaultFormat: ContentModelSegmentFormat;

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx b/demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx
@@ -140,6 +140,7 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
             markdownOptions: { ...this.state.markdownOptions },
             customReplacements: this.state.customReplacements,
             experimentalFeatures: this.state.experimentalFeatures,
+            editPluginOptions: { ...this.state.editPluginOptions },
         };
 
         if (callback) {

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/Plugins.tsx b/demo/scripts/controlsV2/sidePane/editorOptions/Plugins.tsx
@@ -98,6 +98,7 @@ abstract class PluginsBase<PluginKey extends keyof BuildInPluginList> extends Re
 
 export class Plugins extends PluginsBase<keyof BuildInPluginList> {
     private allowExcelNoBorderTable = React.createRef<HTMLInputElement>();
+    private handleTabKey = React.createRef<HTMLInputElement>();
     private listMenu = React.createRef<HTMLInputElement>();
     private tableMenu = React.createRef<HTMLInputElement>();
     private imageMenu = React.createRef<HTMLInputElement>();
@@ -167,7 +168,16 @@ export class Plugins extends PluginsBase<keyof BuildInPluginList> {
                             )}
                         </>
                     )}
-                    {this.renderPluginItem('edit', 'Edit')}
+                    {this.renderPluginItem(
+                        'edit',
+                        'Edit',
+                        this.renderCheckBox(
+                            'Handle Tab Key',
+                            this.handleTabKey,
+                            this.props.state.editPluginOptions.handleTabKey,
+                            (state, value) => (state.editPluginOptions.handleTabKey = value)
+                        )
+                    )}
                     {this.renderPluginItem(
                         'paste',
                         'Paste',

diff --git a/packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts
@@ -19,14 +19,11 @@ export type EditOptions = {
      * Whether to handle Tab key in keyboard. @default true
      */
     handleTabKey?: boolean;
-}
+};
 
 const BACKSPACE_KEY = 8;
 const DELETE_KEY = 46;
 
-/**
- * @internal
- */
 const DefaultOptions: Partial<EditOptions> = {
     handleTabKey: true,
 };