fix: tab key behaviour fixed for tabIndex containing editors with lists' and code blocks' tab key (#4216)

packages/editor/core/src/hooks/use-editor.tsx

@@ -35,6 +35,7 @@ interface CustomEditorProps {
   };
   handleEditorReady?: (value: boolean) => void;
   placeholder?: string | ((isFocused: boolean) => string);
+  tabIndex?: number;
 }
 
 export const useEditor = ({
@@ -49,6 +50,7 @@ export const useEditor = ({
   extensions = [],
   onChange,
   forwardedRef,
+  tabIndex,
   restoreFile,
   handleEditorReady,
   mentionHandler,
@@ -72,6 +74,7 @@ export const useEditor = ({
           uploadFile,
         },
         placeholder,
+        tabIndex,
       }),
       ...extensions,
     ],

packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts

@@ -9,44 +9,71 @@ export type ListKeymapOptions = {
   }>;
 };
 
-export const ListKeymap = Extension.create<ListKeymapOptions>({
+export const ListKeymap = ({ tabIndex }: { tabIndex?: number }) =>
-  name: "listKeymap",
+  Extension.create<ListKeymapOptions>({
+    name: "listKeymap",
 
-  addOptions() {
+    addOptions() {
-    return {
+      return {
-      listTypes: [
+        listTypes: [
-        {
+          {
-          itemName: "listItem",
+            itemName: "listItem",
-          wrapperNames: ["bulletList", "orderedList"],
+            wrapperNames: ["bulletList", "orderedList"],
-        },
+          },
-        {
+          {
-          itemName: "taskItem",
+            itemName: "taskItem",
-          wrapperNames: ["taskList"],
+            wrapperNames: ["taskList"],
-        },
+          },
-      ],
+        ],
-    };
+      };
-  },
+    },
 
-  addKeyboardShortcuts() {
+    addKeyboardShortcuts() {
-    return {
+      return {
-      Tab: () => {
+        Tab: () => {
-        if (this.editor.commands.sinkListItem("listItem")) {
+          if (this.editor.isActive("listItem") || this.editor.isActive("taskItem")) {
+            if (this.editor.commands.sinkListItem("listItem")) {
+              return true;
+            } else if (this.editor.commands.sinkListItem("taskItem")) {
+              return true;
+            }
+            return true;
+          }
+          // if tabIndex is set, we don't want to handle Tab key
+          if (tabIndex !== undefined && tabIndex !== null) {
+            return false;
+          }
           return true;
-        } else if (this.editor.commands.sinkListItem("taskItem")) {
+        },
+        "Shift-Tab": () => {
+          if (this.editor.commands.liftListItem("listItem")) {
+            return true;
+          } else if (this.editor.commands.liftListItem("taskItem")) {
+            return true;
+          }
           return true;
-        }
+        },
-        return true;
+        Delete: ({ editor }) => {
-      },
+          try {
-      "Shift-Tab": () => {
+            let handled = false;
-        if (this.editor.commands.liftListItem("listItem")) {
+
-          return true;
+            this.options.listTypes.forEach(({ itemName }) => {
-        } else if (this.editor.commands.liftListItem("taskItem")) {
+              if (editor.state.schema.nodes[itemName] === undefined) {
-          return true;
+                return;
-        }
+              }
-        return true;
+
-      },
+              if (handleDelete(editor, itemName)) {
-      Delete: ({ editor }) => {
+                handled = true;
-        try {
+              }
+            });
+
+            return handled;
+          } catch (e) {
+            console.log("error in handling Backspac:", e);
+            return false;
+          }
+        },
+        "Mod-Delete": ({ editor }) => {
           let handled = false;
 
           this.options.listTypes.forEach(({ itemName }) => {
@@ -60,28 +87,28 @@ export const ListKeymap = Extension.create<ListKeymapOptions>({
           });
 
           return handled;
-        } catch (e) {
+        },
-          console.log("error in handling delete:", e);
+        Backspace: ({ editor }) => {
-          return false;
+          try {
-        }
+            let handled = false;
-      },
-      "Mod-Delete": ({ editor }) => {
-        let handled = false;
 
-        this.options.listTypes.forEach(({ itemName }) => {
+            this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
-          if (editor.state.schema.nodes[itemName] === undefined) {
+              if (editor.state.schema.nodes[itemName] === undefined) {
-            return;
+                return;
+              }
+
+              if (handleBackspace(editor, itemName, wrapperNames)) {
+                handled = true;
+              }
+            });
+
+            return handled;
+          } catch (e) {
+            console.log("error in handling Backspac:", e);
+            return false;
           }
-
+        },
-          if (handleDelete(editor, itemName)) {
+        "Mod-Backspace": ({ editor }) => {
-            handled = true;
-          }
-        });
-
-        return handled;
-      },
-      Backspace: ({ editor }) => {
-        try {
           let handled = false;
 
           this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
@@ -95,26 +122,7 @@ export const ListKeymap = Extension.create<ListKeymapOptions>({
           });
 
           return handled;
-        } catch (e) {
+        },
-          console.log("error in handling Backspace:", e);
+      };
-          return false;
+    },
-        }
+  });
-      },
-      "Mod-Backspace": ({ editor }) => {
-        let handled = false;
-
-        this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
-          if (editor.state.schema.nodes[itemName] === undefined) {
-            return;
-          }
-
-          if (handleBackspace(editor, itemName, wrapperNames)) {
-            handled = true;
-          }
-        });
-
-        return handled;
-      },
-    };
-  },
-});

packages/editor/core/src/ui/extensions/index.tsx

@@ -44,12 +44,14 @@ type TArguments = {
     uploadFile: UploadImage;
   };
   placeholder?: string | ((isFocused: boolean) => string);
+  tabIndex?: number;
 };
 
 export const CoreEditorExtensions = ({
   mentionConfig,
   fileConfig: { deleteFile, restoreFile, cancelUploadImage, uploadFile },
   placeholder,
+  tabIndex,
 }: TArguments) => [
   StarterKit.configure({
     bulletList: {
@@ -84,7 +86,7 @@ export const CoreEditorExtensions = ({
     },
   }),
   CustomKeymap,
-  ListKeymap,
+  ListKeymap({ tabIndex }),
   CustomLinkExtension.configure({
     openOnClick: true,
     autolink: true,

packages/editor/document-editor/src/ui/index.tsx

@@ -76,6 +76,7 @@ const DocumentEditor = (props: IDocumentEditor) => {
       setHideDragHandle: setHideDragHandleFunction,
     }),
     placeholder,
+    tabIndex,
   });
 
   const editorContainerClassNames = getEditorClassNames({

packages/editor/lite-text-editor/src/ui/index.tsx

@@ -63,6 +63,7 @@ const LiteTextEditor = (props: ILiteTextEditor) => {
     extensions: LiteTextEditorExtensions(onEnterKeyPress),
     mentionHandler,
     placeholder,
+    tabIndex,
   });
 
   const editorContainerClassName = getEditorClassNames({

packages/editor/rich-text-editor/src/ui/index.tsx

@@ -81,6 +81,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
       dragDropEnabled,
       setHideDragHandle: setHideDragHandleFunction,
     }),
+    tabIndex,
     mentionHandler,
     placeholder,
   });