From c394a4f64eb47ae1fbcb53afb32012348d9a9b0d Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 2 Nov 2023 16:26:57 +0530
Subject: [PATCH] style: lite text editor editor toolbar (#2601)

* style: comment editor toolbar

* style: updated icon styling
---
 .../src/ui/components/editor-container.tsx    |   6 +-
 packages/editor/core/src/ui/index.tsx         |  43 ++--
 .../editor/lite-text-editor/src/ui/index.tsx  |  51 +++--
 .../src/ui/menus/fixed-menu/index.tsx         | 202 ++++++++++--------
 .../activity/comment-card.tsx                 |   2 +-
 .../activity/comment-editor.tsx               |  20 +-
 6 files changed, 182 insertions(+), 142 deletions(-)

diff --git a/packages/editor/core/src/ui/components/editor-container.tsx b/packages/editor/core/src/ui/components/editor-container.tsx
index 8de6298b5..050755f5a 100644
--- a/packages/editor/core/src/ui/components/editor-container.tsx
+++ b/packages/editor/core/src/ui/components/editor-container.tsx
@@ -7,7 +7,11 @@ interface EditorContainerProps {
   children: ReactNode;
 }
 
-export const EditorContainer = ({ editor, editorClassNames, children }: EditorContainerProps) => (
+export const EditorContainer = ({
+  editor,
+  editorClassNames,
+  children,
+}: EditorContainerProps) => (
   <div
     id="editor-container"
     onClick={() => {
diff --git a/packages/editor/core/src/ui/index.tsx b/packages/editor/core/src/ui/index.tsx
index 513bb106e..a314a2650 100644
--- a/packages/editor/core/src/ui/index.tsx
+++ b/packages/editor/core/src/ui/index.tsx
@@ -1,14 +1,14 @@
-"use client"
-import * as React from 'react';
+"use client";
+import * as React from "react";
 import { Extension } from "@tiptap/react";
-import { UploadImage } from '../types/upload-image';
-import { DeleteImage } from '../types/delete-image';
-import { getEditorClassNames } from '../lib/utils';
-import { EditorProps } from '@tiptap/pm/view';
-import { useEditor } from './hooks/useEditor';
-import { EditorContainer } from '../ui/components/editor-container';
-import { EditorContentWrapper } from '../ui/components/editor-content';
-import { IMentionSuggestion } from '../types/mention-suggestion';
+import { UploadImage } from "../types/upload-image";
+import { DeleteImage } from "../types/delete-image";
+import { getEditorClassNames } from "../lib/utils";
+import { EditorProps } from "@tiptap/pm/view";
+import { useEditor } from "./hooks/useEditor";
+import { EditorContainer } from "../ui/components/editor-container";
+import { EditorContentWrapper } from "../ui/components/editor-content";
+import { IMentionSuggestion } from "../types/mention-suggestion";
 
 interface ICoreEditor {
   value: string;
@@ -19,7 +19,9 @@ interface ICoreEditor {
   customClassName?: string;
   editorContentCustomClassNames?: string;
   onChange?: (json: any, html: string) => void;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
   setShouldShowAlert?: (showAlert: boolean) => void;
   editable?: boolean;
   forwardedRef?: any;
@@ -72,22 +74,29 @@ const CoreEditor = ({
     forwardedRef,
   });
 
-  const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
 
   if (!editor) return null;
 
   return (
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
       </div>
-    </EditorContainer >
+    </EditorContainer>
   );
 };
 
-const CoreEditorWithRef = React.forwardRef<EditorHandle, ICoreEditor>((props, ref) => (
-  <CoreEditor {...props} forwardedRef={ref} />
-));
+const CoreEditorWithRef = React.forwardRef<EditorHandle, ICoreEditor>(
+  (props, ref) => <CoreEditor {...props} forwardedRef={ref} />,
+);
 
 CoreEditorWithRef.displayName = "CoreEditorWithRef";
 
diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx
index 041d7c6d7..6cd03bcfa 100644
--- a/packages/editor/lite-text-editor/src/ui/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -18,9 +18,9 @@ export type IMentionSuggestion = {
   title: string;
   subtitle: string;
   redirect_uri: string;
-}
+};
 
-export type IMentionHighlight = string
+export type IMentionHighlight = string;
 
 interface ILiteTextEditor {
   value: string;
@@ -32,7 +32,7 @@ interface ILiteTextEditor {
   editorContentCustomClassNames?: string;
   onChange?: (json: any, html: string) => void;
   setIsSubmitting?: (
-    isSubmitting: "submitting" | "submitted" | "saved"
+    isSubmitting: "submitting" | "submitted" | "saved",
   ) => void;
   setShouldShowAlert?: (showAlert: boolean) => void;
   forwardedRef?: any;
@@ -50,6 +50,7 @@ interface ILiteTextEditor {
   onEnterKeyPress?: (e?: any) => void;
   mentionHighlights?: string[];
   mentionSuggestions?: IMentionSuggestion[];
+  submitButton?: React.ReactNode;
 }
 
 interface LiteTextEditorProps extends ILiteTextEditor {
@@ -61,24 +62,27 @@ interface EditorHandle {
   setEditorValue: (content: string) => void;
 }
 
-const LiteTextEditor = ({
-  onChange,
-  debouncedUpdatesEnabled,
-  setIsSubmitting,
-  setShouldShowAlert,
-  editorContentCustomClassNames,
-  value,
-  uploadFile,
-  deleteFile,
-  noBorder,
-  borderOnFocus,
-  customClassName,
-  forwardedRef,
-  commentAccessSpecifier,
-  onEnterKeyPress,
-  mentionHighlights,
-  mentionSuggestions
-}: LiteTextEditorProps) => {
+const LiteTextEditor = (props: LiteTextEditorProps) => {
+  const {
+    onChange,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    editorContentCustomClassNames,
+    value,
+    uploadFile,
+    deleteFile,
+    noBorder,
+    borderOnFocus,
+    customClassName,
+    forwardedRef,
+    commentAccessSpecifier,
+    onEnterKeyPress,
+    mentionHighlights,
+    mentionSuggestions,
+    submitButton,
+  } = props;
+
   const editor = useEditor({
     onChange,
     debouncedUpdatesEnabled,
@@ -90,7 +94,7 @@ const LiteTextEditor = ({
     forwardedRef,
     extensions: LiteTextEditorExtensions(onEnterKeyPress),
     mentionHighlights,
-    mentionSuggestions
+    mentionSuggestions,
   });
 
   const editorClassNames = getEditorClassNames({
@@ -114,6 +118,7 @@ const LiteTextEditor = ({
             uploadFile={uploadFile}
             setIsSubmitting={setIsSubmitting}
             commentAccessSpecifier={commentAccessSpecifier}
+            submitButton={submitButton}
           />
         </div>
       </div>
@@ -122,7 +127,7 @@ const LiteTextEditor = ({
 };
 
 const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>(
-  (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />
+  (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />,
 );
 
 LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";
diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
index a42421b04..62957a769 100644
--- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@@ -1,5 +1,5 @@
 import { Editor } from "@tiptap/react";
-import { BoldIcon, LucideIcon } from "lucide-react";
+import { BoldIcon } from "lucide-react";
 
 import {
   BoldItem,
@@ -14,7 +14,6 @@ import {
   TableItem,
   UnderLineItem,
 } from "@plane/editor-core";
-import { Icon } from "./icon";
 import { Tooltip } from "../../tooltip";
 import { UploadImage } from "../..";
 
@@ -41,8 +40,9 @@ type EditorBubbleMenuProps = {
   };
   uploadFile: UploadImage;
   setIsSubmitting?: (
-    isSubmitting: "submitting" | "submitted" | "saved"
+    isSubmitting: "submitting" | "submitted" | "saved",
   ) => void;
+  submitButton: React.ReactNode;
 };
 
 export const FixedMenu = (props: EditorBubbleMenuProps) => {
@@ -72,116 +72,132 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
     props.commentAccessSpecifier?.onAccessChange(accessKey);
   };
 
+  console.log(complexItems);
+
   return (
-    <div className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl">
+    <div className="flex items-stretch gap-1.5 w-full h-9">
       {props.commentAccessSpecifier && (
-        <div className="flex border border-custom-border-300 mt-0 divide-x divide-custom-border-300 rounded overflow-hidden">
+        <div className="flex-shrink-0 flex items-stretch gap-0.5 border border-custom-border-200 rounded p-1">
           {props?.commentAccessSpecifier.commentAccess?.map((access) => (
             <Tooltip key={access.key} tooltipContent={access.label}>
               <button
                 type="button"
                 onClick={() => handleAccessChange(access.key)}
-                className={`grid place-basicMarkItems-center p-1 hover:bg-custom-background-80 ${
+                className={`aspect-square grid place-items-center p-1 rounded-sm hover:bg-custom-background-90 ${
                   props.commentAccessSpecifier?.accessValue === access.key
-                    ? "bg-custom-background-80"
+                    ? "bg-custom-background-90"
                     : ""
                 }`}
               >
                 <access.icon
-                  className={`w-4 h-4 ${
+                  className={`w-3.5 h-3.5 ${
                     props.commentAccessSpecifier?.accessValue === access.key
-                      ? "!text-custom-text-100"
-                      : "!text-custom-text-400"
+                      ? "text-custom-text-100"
+                      : "text-custom-text-400"
                   }`}
+                  strokeWidth={2}
                 />
               </button>
             </Tooltip>
           ))}
         </div>
       )}
-      <div className="flex">
-        {basicMarkItems.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
-      </div>
-      <div className="flex">
-        {listItems.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
-      </div>
-      <div className="flex">
-        {userActionItems.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
-      </div>
-      <div className="flex">
-        {complexItems.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
+      <div className="flex items-stretch justify-between gap-2 w-full border border-custom-border-200 bg-custom-background-90 rounded p-1">
+        <div className="flex items-stretch">
+          <div className="flex items-stretch gap-0.5 pr-2.5 border-r border-custom-border-200">
+            {basicMarkItems.map((item, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={item.command}
+                className={cn(
+                  "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                  {
+                    "text-custom-text-100 bg-custom-background-80":
+                      item.isActive(),
+                  },
+                )}
+              >
+                <item.icon
+                  className={cn("h-3.5 w-3.5", {
+                    "text-custom-text-100": item.isActive(),
+                  })}
+                  strokeWidth={2.5}
+                />
+              </button>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
+            {listItems.map((item, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={item.command}
+                className={cn(
+                  "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                  {
+                    "text-custom-text-100 bg-custom-background-80":
+                      item.isActive(),
+                  },
+                )}
+              >
+                <item.icon
+                  className={cn("h-3.5 w-3.5", {
+                    "text-custom-text-100": item.isActive(),
+                  })}
+                  strokeWidth={2.5}
+                />
+              </button>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
+            {userActionItems.map((item, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={item.command}
+                className={cn(
+                  "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                  {
+                    "text-custom-text-100 bg-custom-background-80":
+                      item.isActive(),
+                  },
+                )}
+              >
+                <item.icon
+                  className={cn("h-3.5 w-3.5", {
+                    "text-custom-text-100": item.isActive(),
+                  })}
+                  strokeWidth={2.5}
+                />
+              </button>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 pl-2.5">
+            {complexItems.map((item, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={item.command}
+                className={cn(
+                  "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                  {
+                    "text-custom-text-100 bg-custom-background-80":
+                      item.isActive(),
+                  },
+                )}
+              >
+                <item.icon
+                  className={cn("h-3.5 w-3.5", {
+                    "text-custom-text-100": item.isActive(),
+                  })}
+                  strokeWidth={2.5}
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+        {props.submitButton}
       </div>
     </div>
   );
diff --git a/web/components/issues/issue-peek-overview/activity/comment-card.tsx b/web/components/issues/issue-peek-overview/activity/comment-card.tsx
index c47c0ed9a..39b4e11f7 100644
--- a/web/components/issues/issue-peek-overview/activity/comment-card.tsx
+++ b/web/components/issues/issue-peek-overview/activity/comment-card.tsx
@@ -49,7 +49,7 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
 
   const [isEditing, setIsEditing] = useState(false);
 
-  const editorSuggestions = useEditorSuggestions(workspaceSlug, projectId)
+  const editorSuggestions = useEditorSuggestions(workspaceSlug, projectId);
 
   const {
     formState: { isSubmitting },
diff --git a/web/components/issues/issue-peek-overview/activity/comment-editor.tsx b/web/components/issues/issue-peek-overview/activity/comment-editor.tsx
index 385512762..96355a252 100644
--- a/web/components/issues/issue-peek-overview/activity/comment-editor.tsx
+++ b/web/components/issues/issue-peek-overview/activity/comment-editor.tsx
@@ -54,7 +54,7 @@ export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const editorSuggestions = useEditorSuggestions(workspaceSlug as string | undefined, projectId as string | undefined)
+  const editorSuggestions = useEditorSuggestions(workspaceSlug as string | undefined, projectId as string | undefined);
 
   const {
     control,
@@ -75,7 +75,7 @@ export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
   return (
     <form onSubmit={handleSubmit(handleAddComment)}>
       <div className="space-y-2">
-        <div className="relative">
+        <div className="relative h-full">
           {showAccessSpecifier && (
             <div className="absolute bottom-2 left-3 z-[1]">
               <Controller
@@ -119,22 +119,28 @@ export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
                     deleteFile={fileService.deleteImage}
                     ref={editorRef}
                     value={!commentValue || commentValue === "" ? "<p></p>" : commentValue}
-                    customClassName="p-3 min-h-[100px] shadow-sm"
+                    customClassName="p-2 h-full"
                     debouncedUpdatesEnabled={false}
                     mentionSuggestions={editorSuggestions.mentionSuggestions}
                     mentionHighlights={editorSuggestions.mentionHighlights}
                     onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
                     commentAccessSpecifier={{ accessValue, onAccessChange, showAccessSpecifier, commentAccess }}
+                    submitButton={
+                      <Button
+                        variant="primary"
+                        type="submit"
+                        className="!px-2.5 !py-1.5 !text-xs"
+                        disabled={isSubmitting || disabled}
+                      >
+                        {isSubmitting ? "Adding..." : "Comment"}
+                      </Button>
+                    }
                   />
                 )}
               />
             )}
           />
         </div>
-
-        <Button variant="neutral-primary" type="submit" disabled={isSubmitting || disabled}>
-          {isSubmitting ? "Adding..." : "Comment"}
-        </Button>
       </div>
     </form>
   );