binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[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
Download patch file Download diff file Expand all files Collapse all files

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}
/>
);
});