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,7 +9,8 @@ export type ListKeymapOptions = {
   }>;
 };
 
-export const ListKeymap = Extension.create<ListKeymapOptions>({
+export const ListKeymap = ({ tabIndex }: { tabIndex?: number }) =>
+  Extension.create<ListKeymapOptions>({
     name: "listKeymap",
 
     addOptions() {
@@ -30,12 +31,19 @@ export const ListKeymap = Extension.create<ListKeymapOptions>({
     addKeyboardShortcuts() {
       return {
         Tab: () => {
+          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;
         },
         "Shift-Tab": () => {
           if (this.editor.commands.liftListItem("listItem")) {
@@ -61,7 +69,7 @@ export const ListKeymap = Extension.create<ListKeymapOptions>({
 
             return handled;
           } catch (e) {
-          console.log("error in handling delete:", e);
+            console.log("error in handling Backspac:", e);
             return false;
           }
         },
@@ -96,7 +104,7 @@ export const ListKeymap = Extension.create<ListKeymapOptions>({
 
             return handled;
           } catch (e) {
-          console.log("error in handling Backspace:", e);
+            console.log("error in handling Backspac:", e);
             return false;
           }
         },
@@ -117,4 +125,4 @@ export const ListKeymap = Extension.create<ListKeymapOptions>({
         },
       };
     },
-});
+  });

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,
   });