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

[WEB-1689] fix: command enter submits the form (#4986)

Browse source 
* fix: command enter submits the form

* fix: build errors
This commit is contained in:
Aaryan Khandelwal 2024-07-01 17:00:53 +05:30 • committed by GitHub
parent 936c21d65e
commit e78263e01f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 46 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/editor/src/core/extensions/enter-key-extension.tsx
View file

@ -1,6 +1,6 @@
import { Extension } from "@tiptap/core";
export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
export const EnterKeyExtension = (onEnterKeyPress?: (descriptionHTML: string) => void) =>
Extension.create({
name: "enterKey",
@ -8,9 +8,7 @@ export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
return {
Enter: () => {
if (!this.editor.storage.mentionsOpen) {
if (onEnterKeyPress) {
onEnterKeyPress();
}
onEnterKeyPress?.(this.editor.getHTML());
return true;
}
return false;

2
packages/editor/src/core/types/editor.ts
View file

@ -38,7 +38,7 @@ export interface IEditorProps {
suggestions?: () => Promise<IMentionSuggestion[]>;
};
onChange?: (json: object, html: string) => void;
onEnterKeyPress?: (e?: any) => void;
onEnterKeyPress?: (descriptionHTML: string) => void;
placeholder?: string | ((isFocused: boolean, value: string) => string);
tabIndex?: number;
value?: string | null;

6
space/core/components/editor/lite-text-editor.tsx
View file

@ -64,7 +64,11 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
}}
isSubmitting={isSubmitting}
showSubmitButton={showSubmitButton}
handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
handleSubmit={() => {
if (isMutableRefObject<EditorRefApi>(ref)) {
rest.onEnterKeyPress?.(ref.current?.getHTML() ?? "");
}
}}
isCommentEmpty={isEmpty}
editorRef={isMutableRefObject<EditorRefApi>(ref) ? ref : null}
/>

4
space/core/components/editor/toolbar.tsx
View file

@ -12,7 +12,7 @@ import { cn } from "@/helpers/common.helper";
type Props = {
executeCommand: (commandName: EditorMenuItemNames) => void;
handleSubmit: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
handleSubmit: () => void;
isCommentEmpty: boolean;
isSubmitting: boolean;
showSubmitButton: boolean;
@ -95,7 +95,7 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
{showSubmitButton && (
<div className="sticky right-1">
<Button
type="submit"
type="button"
variant="primary"
className="px-2.5 py-1.5 text-xs"
onClick={handleSubmit}

4
space/core/components/issues/peek-overview/comment/add-comment.tsx
View file

@ -66,8 +66,8 @@ export const AddComment: React.FC<Props> = observer((props) => {
control={control}
render={({ field: { value, onChange } }) => (
<LiteTextEditor
onEnterKeyPress={(e) => {
if (currentUser) handleSubmit(onSubmit)(e);
onEnterKeyPress={() => {
if (currentUser) handleSubmit(onSubmit)();
}}
workspaceId={workspaceID?.toString() ?? ""}
workspaceSlug={workspaceSlug?.toString() ?? ""}

2
space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
View file

@ -103,7 +103,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
<LiteTextEditor
workspaceId={workspaceID?.toString() ?? ""}
workspaceSlug={workspaceSlug?.toString() ?? ""}
onEnterKeyPress={handleSubmit(handleCommentUpdate)}
onEnterKeyPress={() => handleSubmit(handleCommentUpdate)()}
ref={editorRef}
initialValue={value}
value={null}

6
web/core/components/editor/lite-text-editor/lite-text-editor.tsx
View file

@ -92,7 +92,11 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
}
}}
handleAccessChange={handleAccessChange}
handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
handleSubmit={() => {
if (isMutableRefObject<EditorRefApi>(ref)) {
rest.onEnterKeyPress?.(ref.current?.getHTML() ?? "");
}
}}
isCommentEmpty={isEmpty}
isSubmitting={isSubmitting}
showAccessSpecifier={showAccessSpecifier}

16
web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
View file

@ -81,7 +81,6 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
}, [isEditing, setFocus]);
const isEmpty =
watch("comment_html") === "" ||
watch("comment_html")?.trim() === "" ||
watch("comment_html") === "<p></p>" ||
isEmptyHtmlString(watch("comment_html") ?? "");
@ -138,11 +137,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
>
<>
<form className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}>
<div
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey && !isEmpty) handleSubmit(onEnter)(e);
}}
>
<div>
<LiteTextEditor
workspaceId={workspaceId}
projectId={projectId}
@ -151,6 +146,15 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
initialValue={watch("comment_html") ?? ""}
value={null}
onChange={(comment_json, comment_html) => setValue("comment_html", comment_html)}
onEnterKeyPress={(commentHTML) => {
const isCommentEmpty =
commentHTML?.trim() === "" ||
commentHTML === "<p></p>" ||
(isEmptyHtmlString(commentHTML ?? "") && !commentHTML?.includes("mention-component"));
if (!isCommentEmpty && !isSubmitting) {
handleSubmit(onEnter)();
}
}}
showSubmitButton={false}
/>
</div>

25
web/core/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
View file

@ -33,7 +33,6 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
const {
handleSubmit,
control,
watch,
formState: { isSubmitting },
reset,
} = useForm<Partial<TIssueComment>>({
@ -50,19 +49,8 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
editorRef.current?.clearEditor();
});
const commentHTML = watch("comment_html");
const isEmpty =
commentHTML?.trim() === "" ||
commentHTML === "<p></p>" ||
(isEmptyHtmlString(commentHTML ?? "") && !commentHTML?.includes("mention-component"));
return (
<div
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey && !isEmpty && !isSubmitting) handleSubmit(onSubmit)(e);
}}
>
<div>
<Controller
name="access"
control={control}
@ -77,8 +65,15 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
value={"<p></p>"}
projectId={projectId}
workspaceSlug={workspaceSlug}
onEnterKeyPress={(e) => {
if (!isEmpty && !isSubmitting) handleSubmit(onSubmit)(e);
onEnterKeyPress={(commentHTML) => {
console.log("commentHTML", commentHTML);
const isEmpty =
commentHTML?.trim() === "" ||
commentHTML === "<p></p>" ||
(isEmptyHtmlString(commentHTML ?? "") && !commentHTML?.includes("mention-component"));
if (!isEmpty && !isSubmitting) {
handleSubmit(onSubmit)();
}
}}
ref={editorRef}
initialValue={value ?? "<p></p>"}

4
web/core/components/workspace/sidebar/projects-list-item.tsx
View file

@ -351,7 +351,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
onClick={() => setIsMenuActive(!isMenuActive)}
>
<MoreHorizontal className="size-3.5" />
<MoreHorizontal className="size-4" />
</span>
}
className={cn(
@ -443,7 +443,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
)}
>
<ChevronRight
className={cn("size-3.5 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
"rotate-90": open,
})}
/>

6
web/core/components/workspace/sidebar/projects-list.tsx
View file

@ -193,7 +193,7 @@ export const SidebarProjectsList: FC = observer(() => {
<>
<div
className={cn(
"group w-full flex items-center justify-between px-2 py-0.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90",
"group w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90",
{
"p-0 justify-center w-fit mx-auto bg-custom-sidebar-background-90 hover:bg-custom-sidebar-background-80":
isCollapsed,
@ -221,7 +221,7 @@ export const SidebarProjectsList: FC = observer(() => {
</Tooltip>
</Disclosure.Button>
{!isCollapsed && (
<div className="flex items-center opacity-0 group-hover:opacity-100">
<div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
{isAuthorizedUser && (
<Tooltip tooltipHeading="Create project" tooltipContent="">
<button
@ -244,7 +244,7 @@ export const SidebarProjectsList: FC = observer(() => {
onClick={() => toggleListDisclosure(!section.isOpen, section.key)}
>
<ChevronRight
className={cn("flex-shrink-0 size-3.5 transition-all", {
className={cn("flex-shrink-0 size-4 transition-all", {
"rotate-90": section.isOpen,
})}
/>

6
web/core/components/workspace/sidebar/workspace-menu.tsx
View file

@ -56,13 +56,13 @@ export const SidebarWorkspaceMenu = observer(() => {
{!sidebarCollapsed && (
<Disclosure.Button
as="button"
className="group/workspace-button w-full px-2 py-0.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-sm font-semibold"
className="group/workspace-button w-full px-2 py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-sm font-semibold"
onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
>
<span>Workspace</span>
<span className="flex-shrink-0 hidden group-hover/workspace-button:inline-block rounded p-0.5 hover:bg-custom-sidebar-background-80">
<span className="flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded p-0.5 hover:bg-custom-sidebar-background-80">
<ChevronRight
className={cn("size-3.5 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
"rotate-90": isWorkspaceMenuOpen,
})}
/>