github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-1067] chore: enter key entension added to editor package and issue modal description improvement (#4617)

Browse Source 
* chore: enter key extension added to RichTextEditorWithRef editor package

* chore: enter to submit functionality added to issue and inbox issue modal description
This commit is contained in:
Anmol Singh Bhatia 2024-05-28 11:48:20 +05:30 committed by GitHub
parent a8fcaf1f48
commit 05807fe123
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/editor/rich-text-editor/src/ui/extensions/enter-key-extension.tsx Normal file
View File

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

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

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

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

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

3
web/components/inbox/modals/create-edit-modal/create-root.tsx
View File

@ -42,6 +42,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
const router = useRouter();
// refs
const descriptionEditorRef = useRef<EditorRefApi>(null);
const submitBtnRef = useRef<HTMLButtonElement | null>(null);
// hooks
const { captureIssueEvent } = useEventTracker();
const { createInboxIssue } = useProjectInbox();
@ -139,6 +140,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
handleData={handleFormData}
editorRef={descriptionEditorRef}
containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
onEnterKeyPress={() => submitBtnRef?.current?.click()}
/>
<InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} />
</div>
@ -158,6 +160,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
</Button>
<Button
variant="primary"
ref={submitBtnRef}
size="sm"
type="submit"
loading={formSubmitting}

3
web/components/inbox/modals/create-edit-modal/edit-root.tsx
View File

@ -34,6 +34,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
const router = useRouter();
// refs
const descriptionEditorRef = useRef<EditorRefApi>(null);
const submitBtnRef = useRef<HTMLButtonElement | null>(null);
// store hooks
const { captureIssueEvent } = useEventTracker();
const { currentProjectDetails } = useProject();
@ -148,6 +149,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
handleData={handleFormData}
editorRef={descriptionEditorRef}
containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
onEnterKeyPress={() => submitBtnRef?.current?.click()}
/>
<InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} isVisible />
</div>
@ -160,6 +162,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
variant="primary"
size="sm"
type="button"
ref={submitBtnRef}
loading={formSubmitting}
disabled={isTitleLengthMoreThan255Character}
onClick={handleFormSubmit}

5
web/components/inbox/modals/create-edit-modal/issue-description.tsx
View File

@ -18,11 +18,13 @@ type TInboxIssueDescription = {
data: Partial<TIssue>;
handleData: (issueKey: keyof Partial<TIssue>, issueValue: Partial<TIssue>[keyof Partial<TIssue>]) => void;
editorRef: RefObject<EditorRefApi>;
onEnterKeyPress?: (e?: any) => void;
};
// TODO: have to implement GPT Assistance
export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props) => {
const { containerClassName, workspaceSlug, projectId, workspaceId, data, handleData, editorRef } = props;
const { containerClassName, workspaceSlug, projectId, workspaceId, data, handleData, editorRef, onEnterKeyPress } =
props;
// hooks
const { loader } = useProjectInbox();
@ -44,6 +46,7 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
onChange={(_description: object, description_html: string) => handleData("description_html", description_html)}
placeholder={getDescriptionPlaceholder}
containerClassName={containerClassName}
onEnterKeyPress={onEnterKeyPress}
/>
);
});

3
web/components/issues/issue-modal/form.tsx
View File

@ -109,6 +109,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
// refs
const editorRef = useRef<EditorRefApi>(null);
const submitBtnRef = useRef<HTMLButtonElement | null>(null);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
@ -470,6 +471,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
onChange(description_html);
handleFormChange();
}}
onEnterKeyPress={() => submitBtnRef?.current?.click()}
ref={editorRef}
tabIndex={getTabIndex("description_html")}
placeholder={getDescriptionPlaceholder}
@ -770,6 +772,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
variant="primary"
type="submit"
size="sm"
ref={submitBtnRef}
loading={isSubmitting}
tabIndex={isDraft ? getTabIndex("submit_button") : getTabIndex("draft_button")}
>