[WEB-638] feat: add tabIndex prop support to navigate using Tab key in all the editors (#3902)

* feat: added tab index support to navigate using Tab key in all the editors

* chore: changed the name of Table of Contents in Pages

* chore: file formatting

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

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

@@ -36,6 +36,7 @@ export type IRichTextEditor = {
   debouncedUpdatesEnabled?: boolean;
   mentionHighlights?: string[];
   mentionSuggestions?: IMentionSuggestion[];
+  tabIndex?: number;
 };
 
 export interface RichTextEditorProps extends IRichTextEditor {
@@ -68,6 +69,7 @@ const RichTextEditor = ({
   mentionHighlights,
   rerenderOnPropsChange,
   mentionSuggestions,
+  tabIndex,
 }: RichTextEditorProps) => {
   const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {});
 
@@ -110,7 +112,11 @@ const RichTextEditor = ({
     <EditorContainer hideDragHandle={hideDragHandleOnMouseLeave} editor={editor} editorClassNames={editorClassNames}>
       {editor && <EditorBubbleMenu editor={editor} />}
       <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          tabIndex={tabIndex}
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
       </div>
     </EditorContainer>
   );

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

@@ -9,6 +9,7 @@ interface IRichTextReadOnlyEditor {
   borderOnFocus?: boolean;
   customClassName?: string;
   mentionHighlights?: string[];
+  tabIndex?: number;
 }
 
 interface RichTextReadOnlyEditorProps extends IRichTextReadOnlyEditor {