diff --git a/packages/editor/rich-text-editor/src/ui/extensions/enter-key-extension.tsx b/packages/editor/rich-text-editor/src/ui/extensions/enter-key-extension.tsx new file mode 100644 index 000000000..70037f046 --- /dev/null +++ b/packages/editor/rich-text-editor/src/ui/extensions/enter-key-extension.tsx @@ -0,0 +1,25 @@ +import { Extension } from "@tiptap/core"; + +export const EnterKeyExtension = (onEnterKeyPress?: () => void) => + Extension.create({ + name: "enterKey", + + addKeyboardShortcuts(this) { + return { + Enter: () => { + if (onEnterKeyPress) { + onEnterKeyPress(); + } + return true; + }, + "Shift-Enter": ({ editor }) => + editor.commands.first(({ commands }) => [ + () => commands.newlineInCode(), + () => commands.splitListItem("listItem"), + () => commands.createParagraphNear(), + () => commands.liftEmptyBlock(), + () => commands.splitBlock(), + ]), + }; + }, + }); diff --git a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx index 406fb677f..b52361f6e 100644 --- a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx +++ b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx @@ -1,13 +1,21 @@ import { UploadImage } from "@plane/editor-core"; import { DragAndDrop, SlashCommand } from "@plane/editor-extensions"; +import { EnterKeyExtension } from "./enter-key-extension"; type TArguments = { uploadFile: UploadImage; dragDropEnabled?: boolean; setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void; + onEnterKeyPress?: () => void; }; -export const RichTextEditorExtensions = ({ uploadFile, dragDropEnabled, setHideDragHandle }: TArguments) => [ +export const RichTextEditorExtensions = ({ + uploadFile, + dragDropEnabled, + setHideDragHandle, + onEnterKeyPress, +}: TArguments) => [ SlashCommand(uploadFile), dragDropEnabled === true && DragAndDrop(setHideDragHandle), + EnterKeyExtension(onEnterKeyPress), ]; diff --git a/packages/editor/rich-text-editor/src/ui/index.tsx b/packages/editor/rich-text-editor/src/ui/index.tsx index 0cb32e543..ec5aa7359 100644 --- a/packages/editor/rich-text-editor/src/ui/index.tsx +++ b/packages/editor/rich-text-editor/src/ui/index.tsx @@ -37,6 +37,7 @@ export type IRichTextEditor = { }; placeholder?: string | ((isFocused: boolean, value: string) => string); tabIndex?: number; + onEnterKeyPress?: (e?: any) => void; }; const RichTextEditor = (props: IRichTextEditor) => { @@ -54,6 +55,7 @@ const RichTextEditor = (props: IRichTextEditor) => { placeholder, tabIndex, mentionHandler, + onEnterKeyPress, } = props; const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {}); @@ -80,6 +82,7 @@ const RichTextEditor = (props: IRichTextEditor) => { uploadFile: fileHandler.upload, dragDropEnabled, setHideDragHandle: setHideDragHandleFunction, + onEnterKeyPress, }), tabIndex, mentionHandler, diff --git a/web/components/inbox/modals/create-edit-modal/create-root.tsx b/web/components/inbox/modals/create-edit-modal/create-root.tsx index 27e710a5f..e22c48557 100644 --- a/web/components/inbox/modals/create-edit-modal/create-root.tsx +++ b/web/components/inbox/modals/create-edit-modal/create-root.tsx @@ -42,6 +42,7 @@ export const InboxIssueCreateRoot: FC = observer((props) const router = useRouter(); // refs const descriptionEditorRef = useRef(null); + const submitBtnRef = useRef(null); // hooks const { captureIssueEvent } = useEventTracker(); const { createInboxIssue } = useProjectInbox(); @@ -139,6 +140,7 @@ export const InboxIssueCreateRoot: FC = observer((props) handleData={handleFormData} editorRef={descriptionEditorRef} containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]" + onEnterKeyPress={() => submitBtnRef?.current?.click()} /> @@ -158,6 +160,7 @@ export const InboxIssueCreateRoot: FC = observer((props)