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