Add option for Tab Key handling in EditPlugin (#2729)

EditPlugin overrides the default behavior of Tab key by increasing the margin-left value of current line. As a result, user can't navigate to next focusable element by pressing Tab key, so we need an option for disabling this behavior.

---------

Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>

packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts

@@ -11,9 +11,26 @@ import type {
     PluginEvent,
 } from 'roosterjs-content-model-types';
 
+/**
+ * Options to customize the keyboard handling behavior of Edit plugin
+ */
+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,
+};
+
 /**
  * Edit plugins helps editor to do editing operation on top of content model.
  * This includes:
@@ -28,6 +45,12 @@ export class EditPlugin implements EditorPlugin {
     private selectionAfterDelete: DOMSelection | null = null;
     private handleNormalEnter = false;
 
+    /**
+     * @param options An optional parameter that takes in an object of type EditOptions, which includes the following properties:
+     * handleTabKey: A boolean that enables or disables Tab key handling. Defaults to true.
+     */
+    constructor(private options: EditOptions = DefaultOptions) {}
+
     /**
      * Get name of this plugin
      */
@@ -98,6 +121,7 @@ export class EditPlugin implements EditorPlugin {
     willHandleEventExclusively(event: PluginEvent) {
         if (
             this.editor &&
+            this.options.handleTabKey &&
             event.eventType == 'keyDown' &&
             event.rawEvent.key == 'Tab' &&
             !event.rawEvent.shiftKey
@@ -148,7 +172,9 @@ export class EditPlugin implements EditorPlugin {
                     break;
 
                 case 'Tab':
-                    keyboardTab(editor, rawEvent);
+                    if (this.options.handleTabKey) {
+                        keyboardTab(editor, rawEvent);
+                    }
                     break;
                 case 'Unidentified':
                     if (editor.getEnvironment().isAndroid) {

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

@@ -2,7 +2,7 @@ export { TableEditPlugin } from './tableEdit/TableEditPlugin';
 export { OnTableEditorCreatedCallback } from './tableEdit/OnTableEditorCreatedCallback';
 export { TableEditFeatureName } from './tableEdit/editors/features/TableEditFeatureName';
 export { PastePlugin } from './paste/PastePlugin';
-export { EditPlugin } from './edit/EditPlugin';
+export { EditPlugin, EditOptions } from './edit/EditPlugin';
 export { AutoFormatPlugin, AutoFormatOptions } from './autoFormat/AutoFormatPlugin';
 
 export {

packages/roosterjs-content-model-plugins/test/edit/EditPluginTest.ts

@@ -123,6 +123,23 @@ describe('EditPlugin', () => {
             expect(keyboardEnterSpy).not.toHaveBeenCalled();
         });
 
+        it('Tab, Tab handling not enabled', () => {
+            plugin = new EditPlugin({ handleTabKey: false });
+            const rawEvent = { key: 'Tab' } as any;
+
+            plugin.initialize(editor);
+
+            plugin.onPluginEvent({
+                eventType: 'keyDown',
+                rawEvent,
+            });
+
+            expect(keyboardTabSpy).not.toHaveBeenCalled();
+            expect(keyboardInputSpy).not.toHaveBeenCalled();
+            expect(keyboardDeleteSpy).not.toHaveBeenCalled();
+            expect(keyboardEnterSpy).not.toHaveBeenCalled();
+        });
+
         it('Enter, normal enter not enabled', () => {
             plugin = new EditPlugin();
             const rawEvent = { which: 13, key: 'Enter' } as any;