thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
M. Palanikannan 2024-04-16 21:48:30 +05:30 committed by GitHub
parent d307c727ea
commit 1080094b01
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 94 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/editor/core/src/hooks/use-editor.tsx
View File

@ -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,
],

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

@ -9,44 +9,71 @@ export type ListKeymapOptions = {
}>;
};
export const ListKeymap = Extension.create<ListKeymapOptions>({
name: "listKeymap",
export const ListKeymap = ({ tabIndex }: { tabIndex?: number }) =>
Extension.create<ListKeymapOptions>({
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<ListKeymapOptions>({
});
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<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;
},
};
},
});
},
};
},
});

4
packages/editor/core/src/ui/extensions/index.tsx
View File

@ -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,

1
packages/editor/document-editor/src/ui/index.tsx
View File

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

1
packages/editor/lite-text-editor/src/ui/index.tsx
View File

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

1
packages/editor/rich-text-editor/src/ui/index.tsx
View File

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