makeplane · sriramveeraghanta · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023
diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -1,8 +1,13 @@
-"use client"
-import * as React from 'react';
-import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from '@plane/editor-core';
-import { FixedMenu } from './menus/fixed-menu';
-import { LiteTextEditorExtensions } from './extensions';
+"use client";
+import * as React from "react";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useEditor,
+} from "@plane/editor-core";
+import { FixedMenu } from "./menus/fixed-menu";
+import { LiteTextEditorExtensions } from "./extensions";
 
 export type UploadImage = (file: File) => Promise<string>;
 export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
@@ -16,19 +21,21 @@ interface ILiteTextEditor {
   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;
   forwardedRef?: any;
   debouncedUpdatesEnabled?: boolean;
   commentAccessSpecifier?: {
-    accessValue: string,
-    onAccessChange: (accessKey: string) => void,
-    showAccessSpecifier: boolean,
+    accessValue: string;
+    onAccessChange: (accessKey: string) => void;
+    showAccessSpecifier: boolean;
     commentAccess: {
-      icon: string;
+      icon: any;
       key: string;
       label: "Private" | "Public";
-    }[]
+    }[];
   };
   onEnterKeyPress?: (e?: any) => void;
 }
@@ -56,7 +63,7 @@ const LiteTextEditor = ({
   customClassName,
   forwardedRef,
   commentAccessSpecifier,
-  onEnterKeyPress
+  onEnterKeyPress,
 }: LiteTextEditorProps) => {
   const editor = useEditor({
     onChange,
@@ -70,25 +77,37 @@ const LiteTextEditor = ({
     extensions: LiteTextEditorExtensions(onEnterKeyPress),
   });
 
-  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 className="w-full mt-4">
-          <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} commentAccessSpecifier={commentAccessSpecifier} />
+          <FixedMenu
+            editor={editor}
+            uploadFile={uploadFile}
+            setIsSubmitting={setIsSubmitting}
+            commentAccessSpecifier={commentAccessSpecifier}
+          />
         </div>
       </div>
-    </EditorContainer >
+    </EditorContainer>
   );
 };
 
-const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>((props, ref) => (
-  <LiteTextEditor {...props} forwardedRef={ref} />
-));
+const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>(
+  (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
@@ -1,7 +1,19 @@
 import { Editor } from "@tiptap/react";
-import { BoldIcon } from "lucide-react";
+import { BoldIcon, LucideIcon } from "lucide-react";
 
-import { BoldItem, BulletListItem, cn, CodeItem, ImageItem, ItalicItem, NumberedListItem, QuoteItem, StrikeThroughItem, TableItem, UnderLineItem } from "@plane/editor-core";
+import {
+  BoldItem,
+  BulletListItem,
+  cn,
+  CodeItem,
+  ImageItem,
+  ItalicItem,
+  NumberedListItem,
+  QuoteItem,
+  StrikeThroughItem,
+  TableItem,
+  UnderLineItem,
+} from "@plane/editor-core";
 import { Icon } from "./icon";
 import { Tooltip } from "../../tooltip";
 import { UploadImage } from "../..";
@@ -16,18 +28,22 @@ export interface BubbleMenuItem {
 type EditorBubbleMenuProps = {
   editor: Editor;
   commentAccessSpecifier?: {
-    accessValue: string,
-    onAccessChange: (accessKey: string) => void,
-    showAccessSpecifier: boolean,
-    commentAccess: {
-      icon: string;
-      key: string;
-      label: "Private" | "Public";
-    }[] | undefined;
-  }
+    accessValue: string;
+    onAccessChange: (accessKey: string) => void;
+    showAccessSpecifier: boolean;
+    commentAccess:
+      | {
+          icon: any;
+          key: string;
+          label: "Private" | "Public";
+        }[]
+      | undefined;
+  };
   uploadFile: UploadImage;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
-}
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved"
+  ) => void;
+};
 
 export const FixedMenu = (props: EditorBubbleMenuProps) => {
   const basicMarkItems: BubbleMenuItem[] = [
@@ -56,31 +72,33 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
     props.commentAccessSpecifier?.onAccessChange(accessKey);
   };
 
-
   return (
-    <div
-      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
-    >
-      {props.commentAccessSpecifier && (<div className="flex border border-custom-border-300 mt-0 divide-x divide-custom-border-300 rounded overflow-hidden">
-        {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 ${props.commentAccessSpecifier?.accessValue === access.key ? "bg-custom-background-80" : ""
+    <div className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl">
+      {props.commentAccessSpecifier && (
+        <div className="flex border border-custom-border-300 mt-0 divide-x divide-custom-border-300 rounded overflow-hidden">
+          {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 ${
+                  props.commentAccessSpecifier?.accessValue === access.key
+                    ? "bg-custom-background-80"
+                    : ""
                 }`}
-            >
-              <Icon
-                iconName={access.icon}
-                className={`w-4 h-4 ${props.commentAccessSpecifier?.accessValue === access.key
-                  ? "!text-custom-text-100"
-                  : "!text-custom-text-400"
+              >
+                <access.icon
+                  className={`w-4 h-4 ${
+                    props.commentAccessSpecifier?.accessValue === access.key
+                      ? "!text-custom-text-100"
+                      : "!text-custom-text-400"
                   }`}
-              />
-            </button>
-          </Tooltip>
-        ))}
-      </div>)}
+                />
+              </button>
+            </Tooltip>
+          ))}
+        </div>
+      )}
       <div className="flex">
         {basicMarkItems.map((item, index) => (
           <button

diff --git a/packages/ui/src/icons/admin-profile-icon.tsx b/packages/ui/src/icons/admin-profile-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const AdminProfileIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 19V18C8 16.9391 8.42143 15.9217 9.17157 15.1716C9.92172 14.4214 10.9391 14 12 14C13.0609 14 14.0783 14.4214 14.8284 15.1716C15.5786 15.9217 16 16.9391 16 18V19"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 14C13.6569 14 15 12.6569 15 11C15 9.34315 13.6569 8 12 8C10.3431 8 9 9.34315 9 11C9 12.6569 10.3431 14 12 14Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/archive-icon.tsx b/packages/ui/src/icons/archive-icon.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ArchiveIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 3H3C2.44772 3 2 3.44772 2 4V7C2 7.55228 2.44772 8 3 8H21C21.5523 8 22 7.55228 22 7V4C22 3.44772 21.5523 3 21 3Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4 8V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M20 8V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21H16"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15 18L12 21L9 18"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path d="M12 21L12 12" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/blocked-icon.tsx b/packages/ui/src/icons/blocked-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const BlockedIcon: React.FC<ISvgIcons> = ({
+  height = "24",
+  width = "24",
+  className = "",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
+      fill="#F76659"
+    />
+    <path
+      d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
+      fill="#F76659"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/blocker-icon.tsx b/packages/ui/src/icons/blocker-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const BlockerIcon: React.FC<ISvgIcons> = ({
+  height = "24",
+  width = "24",
+  className = "",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
+      fill="#F7AE59"
+    />
+    <path
+      d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
+      fill="#F7AE59"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/calendar-after-icon.tsx b/packages/ui/src/icons/calendar-after-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CalendarAfterIcon: React.FC<ISvgIcons> = ({
+  className = "fill-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} `}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_3309_70901)">
+      <path
+        d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
+        fill="rgb(var(--color-text-200))"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3309_70901">
+        <rect
+          width="18"
+          height="18"
+          fill="white"
+          transform="translate(0 0.5)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);