From 1080094b01119d41dd430894dbee61ac3da9fdc8 Mon Sep 17 00:00:00 2001 From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com> Date: Tue, 16 Apr 2024 21:48:30 +0530 Subject: [PATCH] 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 | 3 + .../custom-list-keymap/list-keymap.ts | 162 +++++++++--------- .../editor/core/src/ui/extensions/index.tsx | 4 +- .../editor/document-editor/src/ui/index.tsx | 1 + .../editor/lite-text-editor/src/ui/index.tsx | 1 + .../editor/rich-text-editor/src/ui/index.tsx | 1 + 6 files changed, 94 insertions(+), 78 deletions(-) diff --git a/packages/editor/core/src/hooks/use-editor.tsx b/packages/editor/core/src/hooks/use-editor.tsx index ae7d90342..647b79929 100644 --- a/packages/editor/core/src/hooks/use-editor.tsx +++ b/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, ], diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts index 928eaff40..db1264f57 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts @@ -9,44 +9,71 @@ export type ListKeymapOptions = { }>; }; -export const ListKeymap = Extension.create({ - name: "listKeymap", +export const ListKeymap = ({ tabIndex }: { tabIndex?: number }) => + Extension.create({ + name: "listKeymap", - addOptions() { - return { - listTypes: [ - { - itemName: "listItem", - wrapperNames: ["bulletList", "orderedList"], - }, - { - itemName: "taskItem", - wrapperNames: ["taskList"], - }, - ], - }; - }, + addOptions() { + return { + listTypes: [ + { + itemName: "listItem", + wrapperNames: ["bulletList", "orderedList"], + }, + { + itemName: "taskItem", + wrapperNames: ["taskList"], + }, + ], + }; + }, - addKeyboardShortcuts() { - return { - Tab: () => { - if (this.editor.commands.sinkListItem("listItem")) { + 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; - } 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; - }, - "Shift-Tab": () => { - if (this.editor.commands.liftListItem("listItem")) { - return true; - } else if (this.editor.commands.liftListItem("taskItem")) { - return true; - } - return true; - }, - Delete: ({ editor }) => { - try { + }, + Delete: ({ editor }) => { + try { + let handled = false; + + this.options.listTypes.forEach(({ itemName }) => { + if (editor.state.schema.nodes[itemName] === undefined) { + return; + } + + if (handleDelete(editor, itemName)) { + handled = true; + } + }); + + 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({ }); return handled; - } catch (e) { - console.log("error in handling delete:", e); - return false; - } - }, - "Mod-Delete": ({ editor }) => { - let handled = false; + }, + Backspace: ({ editor }) => { + try { + let handled = false; - this.options.listTypes.forEach(({ itemName }) => { - if (editor.state.schema.nodes[itemName] === undefined) { - return; + this.options.listTypes.forEach(({ itemName, wrapperNames }) => { + if (editor.state.schema.nodes[itemName] === undefined) { + 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)) { - handled = true; - } - }); - - return handled; - }, - Backspace: ({ editor }) => { - try { + }, + "Mod-Backspace": ({ editor }) => { let handled = false; this.options.listTypes.forEach(({ itemName, wrapperNames }) => { @@ -95,26 +122,7 @@ export const ListKeymap = Extension.create({ }); 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; - }, - }; - }, -}); + }, + }; + }, + }); diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx index 4b8de461b..f4dbaee3b 100644 --- a/packages/editor/core/src/ui/extensions/index.tsx +++ b/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, diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx index 718127484..3c36ed11c 100644 --- a/packages/editor/document-editor/src/ui/index.tsx +++ b/packages/editor/document-editor/src/ui/index.tsx @@ -76,6 +76,7 @@ const DocumentEditor = (props: IDocumentEditor) => { setHideDragHandle: setHideDragHandleFunction, }), placeholder, + tabIndex, }); const editorContainerClassNames = getEditorClassNames({ diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx index 859bd4c9e..71846eca7 100644 --- a/packages/editor/lite-text-editor/src/ui/index.tsx +++ b/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({ diff --git a/packages/editor/rich-text-editor/src/ui/index.tsx b/packages/editor/rich-text-editor/src/ui/index.tsx index 9490d478e..e82615b95 100644 --- a/packages/editor/rich-text-editor/src/ui/index.tsx +++ b/packages/editor/rich-text-editor/src/ui/index.tsx @@ -81,6 +81,7 @@ const RichTextEditor = (props: IRichTextEditor) => { dragDropEnabled, setHideDragHandle: setHideDragHandleFunction, }), + tabIndex, mentionHandler, placeholder, });