Merge pull request #12 from aaryan610/master

style: issue details page, feat: add to cycle

components/command-palette/index.tsx

@@ -9,7 +9,11 @@ import useTheme from "lib/hooks/useTheme";
 import useToast from "lib/hooks/useToast";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
-import { DocumentPlusIcon, FolderPlusIcon, FolderIcon } from "@heroicons/react/24/outline";
+import {
+  FolderIcon,
+  RectangleStackIcon,
+  ClipboardDocumentListIcon,
+} from "@heroicons/react/24/outline";
 // commons
 import { classNames, copyTextToClipboard } from "constants/common";
 // components
@@ -19,12 +23,19 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
 import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
 // types
 import { IIssue } from "types";
+import { Button } from "ui";
+import { SubmitHandler, useForm } from "react-hook-form";
+
 type ItemType = {
   name: string;
   url?: string;
   onClick?: () => void;
 };
 
+type FormInput = {
+  issue: string[];
+};
+
 const CommandPalette: React.FC = () => {
   const router = useRouter();
 
@@ -51,7 +62,7 @@ const CommandPalette: React.FC = () => {
   const quickActions = [
     {
       name: "Add new issue...",
-      icon: DocumentPlusIcon,
+      icon: RectangleStackIcon,
       shortcut: "I",
       onClick: () => {
         setIsIssueModalOpen(true);
@@ -59,7 +70,7 @@ const CommandPalette: React.FC = () => {
     },
     {
       name: "Add new project...",
-      icon: FolderPlusIcon,
+      icon: ClipboardDocumentListIcon,
       shortcut: "P",
       onClick: () => {
         setIsProjectModalOpen(true);
@@ -116,6 +127,23 @@ const CommandPalette: React.FC = () => {
     [toggleCollapsed, setToastAlert, router]
   );
 
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    setError,
+    control,
+  } = useForm<FormInput>();
+
+  const handleDelete: SubmitHandler<FormInput> = (data) => {
+    console.log("Deleting... " + JSON.stringify(data));
+  };
+
+  const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
+    console.log("Adding to cycle...");
+  };
+
   useEffect(() => {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
@@ -137,7 +165,6 @@ const CommandPalette: React.FC = () => {
         setIsOpen={setIsIssueModalOpen}
         projectId={activeProject?.id}
       />
-
       <Transition.Root
         show={isPaletteOpen}
         as={React.Fragment}
@@ -168,13 +195,14 @@ const CommandPalette: React.FC = () => {
               leaveTo="opacity-0 scale-95"
             >
               <Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+                <form>
                   <Combobox
-                  onChange={(item: ItemType) => {
+                  // onChange={(item: ItemType) => {
-                    const { url, onClick } = item;
+                  //   const { url, onClick } = item;
-                    if (url) router.push(url);
+                  //   if (url) router.push(url);
-                    else if (onClick) onClick();
+                  //   else if (onClick) onClick();
-                    handleCommandPaletteClose();
+                  //   handleCommandPaletteClose();
-                  }}
+                  // }}
                   >
                     <div className="relative m-1">
                       <MagnifyingGlassIcon
@@ -217,12 +245,17 @@ const CommandPalette: React.FC = () => {
                                 >
                                   {({ active }) => (
                                     <>
-                                    <FolderIcon
+                                      {/* <FolderIcon
                                       className={classNames(
                                         "h-6 w-6 flex-none text-gray-900 text-opacity-40",
                                         active ? "text-opacity-100" : ""
                                       )}
                                       aria-hidden="true"
+                                    /> */}
+                                      <input
+                                        type="checkbox"
+                                        {...register("issue")}
+                                        value={issue.id}
                                       />
                                       <span className="ml-3 flex-auto truncate">{issue.name}</span>
                                       {active && (
@@ -291,6 +324,23 @@ const CommandPalette: React.FC = () => {
                       </div>
                     )}
                   </Combobox>
+
+                  <div className="flex justify-between items-center gap-2 p-3">
+                    <div className="flex items-center gap-2">
+                      <Button onClick={handleSubmit(handleAddToCycle)} size="sm">
+                        Add to Cycle
+                      </Button>
+                      <Button onClick={handleSubmit(handleDelete)} theme="danger" size="sm">
+                        Delete
+                      </Button>
+                    </div>
+                    <div>
+                      <Button type="button" size="sm" onClick={handleCommandPaletteClose}>
+                        Close
+                      </Button>
+                    </div>
+                  </div>
+                </form>
               </Dialog.Panel>
             </Transition.Child>
           </div>

components/lexical/config.ts

@@ -0,0 +1,31 @@
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+// theme
+import { defaultTheme } from "./theme";
+
+export const initialConfig = {
+  namespace: "LexicalEditor",
+  // The editor theme
+  theme: defaultTheme,
+  // Handling of errors during update
+  onError(error: any) {
+    console.error(error);
+  },
+  // Any custom nodes go here
+  nodes: [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode,
+  ],
+};

components/lexical/editor.tsx

@@ -0,0 +1,73 @@
+import { FC } from "react";
+import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { TRANSFORMERS, CHECK_LIST } from "@lexical/markdown";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { $generateHtmlFromNodes } from "@lexical/html";
+import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
+
+// custom plugins
+import { CodeHighlightPlugin } from "./plugins/code-highlight";
+import { LexicalToolbar } from "./toolbar";
+// config
+import { initialConfig } from "./config";
+// helpers
+import { getValidatedValue } from "./helpers/editor";
+
+export interface RichTextEditorProps {
+  onChange: (state: string) => void;
+  id: string;
+  value: string;
+}
+
+const RichTextEditor: FC<RichTextEditorProps> = (props) => {
+  // props
+  const { onChange, value, id } = props;
+
+  function handleChange(state: EditorState, editor: LexicalEditor) {
+    state.read(() => {
+      onChange(JSON.stringify(state.toJSON()));
+    });
+  }
+
+  return (
+    <LexicalComposer
+      initialConfig={{
+        ...initialConfig,
+        namespace: id || "Lexical Editor",
+        editorState: getValidatedValue(value),
+      }}
+    >
+      <div className="border border-[#e2e2e2] rounded-md">
+        <LexicalToolbar />
+        <div className="relative">
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable className='className="h-[450px] outline-none py-[15px] px-2.5 resize-none overflow-hidden text-ellipsis' />
+            }
+            placeholder={
+              <div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
+                Enter some text...
+              </div>
+            }
+          />
+          <OnChangePlugin onChange={handleChange} />
+          <HistoryPlugin />
+          <CodeHighlightPlugin />
+          <ListPlugin />
+          <LinkPlugin />
+          <CheckListPlugin />
+          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+        </div>
+      </div>
+    </LexicalComposer>
+  );
+};
+
+export default RichTextEditor;

components/lexical/helpers/editor.ts

@@ -0,0 +1,33 @@
+export const positionEditorElement = (editor: any, rect: any) => {
+  if (window) {
+    if (rect === null) {
+      editor.style.opacity = "0";
+      editor.style.top = "-1000px";
+      editor.style.left = "-1000px";
+    } else {
+      editor.style.opacity = "1";
+      editor.style.top = `${
+        rect.top + rect.height + window.pageYOffset + 10
+      }px`;
+      editor.style.left = `${
+        rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2
+      }px`;
+    }
+  }
+};
+
+export const getValidatedValue = (value: string) => {
+  const defaultValue =
+    '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+
+  if (value) {
+    try {
+      const json = JSON.parse(value);
+      return JSON.stringify(json);
+    } catch (error) {
+      return defaultValue;
+    }
+  }
+
+  return defaultValue;
+};

components/lexical/helpers/node.ts

@@ -0,0 +1,17 @@
+import { $isAtNodeEnd } from "@lexical/selection";
+
+export const getSelectedNode = (selection: any) => {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+  }
+};

components/lexical/plugins/code-highlight.tsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { registerCodeHighlighting } from "@lexical/code";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+
+export const CodeHighlightPlugin = () => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+  return null;
+};

components/lexical/plugins/read-only.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { getValidatedValue } from "../helpers/editor";
+
+const ReadOnlyPlugin = ({ value }: { value: string }) => {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (editor && value) {
+      const initialEditorState = editor?.parseEditorState(
+        getValidatedValue(value) || ""
+      );
+      editor.setEditorState(initialEditorState);
+    }
+  }, [editor, value]);
+
+  return <></>;
+};
+
+export default ReadOnlyPlugin;

components/lexical/theme.ts

@@ -0,0 +1,67 @@
+export const defaultTheme = {
+  ltr: "ltr",
+  rtl: "rtl",
+  placeholder: "editor-placeholder",
+  paragraph: "mb-1",
+  quote: "editor-quote",
+  heading: {
+    h1: "text-3xl font-bold",
+    h2: "text-2xl font-bold",
+    h3: "text-xl font-bold",
+    h4: "text-lg font-bold",
+    h5: "text-base font-bold",
+  },
+  list: {
+    nested: {
+      listitem: "list-item",
+    },
+    ol: "list-decimal pl-4",
+    ul: "list-disc pl-4",
+    listitem: "list-item",
+  },
+  image: "editor-image",
+  link: "editor-link",
+  text: {
+    bold: "font-bold",
+    italic: "italic",
+    overflowed: "editor-text-overflowed",
+    hashtag: "editor-text-hashtag",
+    underline: "underline",
+    strikethrough: "line-through",
+    underlineStrikethrough: "editor-text-underlineStrikethrough",
+    code: "editor-text-code",
+  },
+  code: "editor-code",
+  codeHighlight: {
+    atrule: "editor-tokenAttr",
+    attr: "editor-tokenAttr",
+    boolean: "editor-tokenProperty",
+    builtin: "editor-tokenSelector",
+    cdata: "editor-tokenComment",
+    char: "editor-tokenSelector",
+    class: "editor-tokenFunction",
+    "class-name": "editor-tokenFunction",
+    comment: "editor-tokenComment",
+    constant: "editor-tokenProperty",
+    deleted: "editor-tokenProperty",
+    doctype: "editor-tokenComment",
+    entity: "editor-tokenOperator",
+    function: "editor-tokenFunction",
+    important: "editor-tokenVariable",
+    inserted: "editor-tokenSelector",
+    keyword: "editor-tokenAttr",
+    namespace: "editor-tokenVariable",
+    number: "editor-tokenProperty",
+    operator: "editor-tokenOperator",
+    prolog: "editor-tokenComment",
+    property: "editor-tokenProperty",
+    punctuation: "editor-tokenPunctuation",
+    regex: "editor-tokenVariable",
+    selector: "editor-tokenSelector",
+    string: "editor-tokenSelector",
+    symbol: "editor-tokenProperty",
+    tag: "editor-tokenProperty",
+    url: "editor-tokenOperator",
+    variable: "editor-tokenVariable",
+  },
+};

components/lexical/toolbar/block-type-select.tsx

@@ -0,0 +1,333 @@
+import { FC, Fragment, useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import {
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  REDO_COMMAND,
+  UNDO_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+  FORMAT_TEXT_COMMAND,
+  FORMAT_ELEMENT_COMMAND,
+  $getSelection,
+  $isRangeSelection,
+  $createParagraphNode,
+  $getNodeByKey,
+} from "lexical";
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  INSERT_CHECK_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  $isListNode,
+  ListNode,
+} from "@lexical/list";
+import {
+  $isParentElementRTL,
+  $isAtNodeEnd,
+  $wrapNodes,
+} from "@lexical/selection";
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+  $isHeadingNode,
+} from "@lexical/rich-text";
+import {
+  $createCodeNode,
+  $isCodeNode,
+  getDefaultCodeLanguage,
+  getCodeLanguages,
+} from "@lexical/code";
+
+const BLOCK_DATA = [
+  { type: "paragraph", name: "Normal" },
+  { type: "h1", name: "Large Heading" },
+  { type: "h2", name: "Small Heading" },
+  { type: "h3", name: "Heading" },
+  { type: "h4", name: "Heading" },
+  { type: "h5", name: "Heading" },
+  { type: "Quote", name: "quote" },
+  { type: "ol", name: "Numbered List" },
+  { type: "ul", name: "Bulleted List" },
+];
+
+const supportedBlockTypes = new Set([
+  "paragraph",
+  "quote",
+  "code",
+  "h1",
+  "h2",
+  "ul",
+  "ol",
+]);
+
+const blockTypeToBlockName: any = {
+  code: "Code Block",
+  h1: "Large Heading",
+  h2: "Small Heading",
+  h3: "Heading",
+  h4: "Heading",
+  h5: "Heading",
+  ol: "Numbered List",
+  paragraph: "Normal",
+  quote: "Quote",
+  ul: "Bulleted List",
+};
+
+export interface BlockTypeSelectProps {
+  editor: any;
+  toolbarRef: any;
+  blockType: string;
+}
+
+export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
+  const { editor, toolbarRef, blockType } = props;
+  // refs
+  const dropDownRef = useRef<any>(null);
+  // states
+  const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] =
+    useState(false);
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current;
+    const dropDown = dropDownRef.current;
+
+    if (toolbar !== null && dropDown !== null) {
+      const { top, left } = toolbar.getBoundingClientRect();
+      dropDown.style.top = `${top + 40}px`;
+      dropDown.style.left = `${left}px`;
+    }
+  }, [dropDownRef, toolbarRef]);
+
+  useEffect(() => {
+    const dropDown = dropDownRef.current;
+    const toolbar = toolbarRef.current;
+
+    if (dropDown !== null && toolbar !== null) {
+      const handle = (event: any) => {
+        const target = event.target;
+
+        if (!dropDown.contains(target) && !toolbar.contains(target)) {
+          setShowBlockOptionsDropDown(false);
+        }
+      };
+      document.addEventListener("click", handle);
+
+      return () => {
+        document.removeEventListener("click", handle);
+      };
+    }
+  }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
+
+  const formatParagraph = () => {
+    if (blockType !== "paragraph") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createParagraphNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatLargeHeading = () => {
+    console.log("blockType ", blockType);
+    if (blockType !== "h1") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h1"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatSmallHeading = () => {
+    if (blockType !== "h2") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h2"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatBulletList = () => {
+    if (blockType !== "ul") {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatNumberedList = () => {
+    if (blockType !== "ol") {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatQuote = () => {
+    if (blockType !== "quote") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createQuoteNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatCode = () => {
+    if (blockType !== "code") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createCodeNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        className="p-2 mr-2 text-sm flex items-center"
+        onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
+        aria-label="Formatting Options"
+      >
+        <span className="mr-2">{blockTypeToBlockName[blockType]}</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-chevron-down"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z"
+          ></path>
+        </svg>
+      </button>
+      {showBlockOptionsDropDown && (
+        <ul
+          className="absolute mt-1 w-full min-w-[160px] overflow-auto rounded-md bg-white z-10 p-1 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+          ref={dropDownRef}
+        >
+          <li className="p-1 cursor-pointer" onClick={formatParagraph}>
+            <span className="icon paragraph" />
+            <span className="text">Normal</span>
+            {blockType === "paragraph" && <span className="active" />}
+          </li>
+          <li className="p-1 cursor-pointer" onClick={formatLargeHeading}>
+            <span className="icon large-heading" />
+            <span className="text">Large Heading</span>
+            {blockType === "h1" && <span className="active" />}
+          </li>
+          <li className="p-1 cursor-pointer" onClick={formatSmallHeading}>
+            <span className="icon small-heading" />
+            <span className="text">Small Heading</span>
+            {blockType === "h2" && <span className="active" />}
+          </li>
+          <li className="p-1 cursor-pointer" onClick={formatBulletList}>
+            <span className="icon bullet-list" />
+            <span className="text">Bullet List</span>
+            {blockType === "ul" && <span className="active" />}
+          </li>
+          <li className="p-1 cursor-pointer" onClick={formatNumberedList}>
+            <span className="icon numbered-list" />
+            <span className="text">Numbered List</span>
+            {blockType === "ol" && <span className="active" />}
+          </li>
+
+          <li className="p-1 cursor-pointer" onClick={formatQuote}>
+            <span className="icon quote" />
+            <span className="text">Quote</span>
+            {blockType === "quote" && <span className="active" />}
+          </li>
+          {/* <button className="item" onClick={formatCode}>
+                <span className="icon code" />
+                <span className="text">Code Block</span>
+                {blockType === 'code' && <span className="active" />}
+              </button> */}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+// export const BlockTypeSelect: FC<any> = () => {
+//   const [selected, setSelected] = useState(BLOCK_DATA[0]);
+
+//   return (
+//     <div className="inline-flex pr-1">
+//       <Listbox value={selected} onChange={setSelected}>
+//         <div className="relative">
+//           <Listbox.Button className="relative w-full min-w-[160px] cursor-default rounded border border-[#e2e2e2] bg-white py-1 pl-3 pr-10 text-left outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 text-xs">
+//             <span className="block truncate">{selected.name}</span>
+//             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+//               <svg
+//                 xmlns="http://www.w3.org/2000/svg"
+//                 width="16"
+//                 height="16"
+//                 fill="currentColor"
+//                 className="bi bi-chevron-down"
+//                 viewBox="0 0 16 16"
+//               >
+//                 <path
+//                   fillRule="evenodd"
+//                   d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z"
+//                 ></path>
+//               </svg>
+//             </span>
+//           </Listbox.Button>
+//           <Transition
+//             as={Fragment}
+//             leave="transition ease-in duration-100"
+//             leaveFrom="opacity-100"
+//             leaveTo="opacity-0"
+//           >
+//             <Listbox.Options className="absolute mt-1 max-h-60 w-full min-w-[160px] overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+//               {BLOCK_DATA.map((blockType, index) => (
+//                 <Listbox.Option
+//                   key={index}
+//                   className={({ active }) =>
+//                     `relative cursor-default select-none py-2 px-2 ${
+//                       active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+//                     }`
+//                   }
+//                   value={blockType}
+//                 >
+//                   {({ selected }) => (
+//                     <>
+//                       <span
+//                         className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
+//                       >
+//                         {blockType.name}
+//                       </span>
+//                     </>
+//                   )}
+//                 </Listbox.Option>
+//               ))}
+//             </Listbox.Options>
+//           </Transition>
+//         </div>
+//       </Listbox>
+//     </div>
+//   );
+// };

components/lexical/toolbar/floating-link-editor.tsx

@@ -0,0 +1,156 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { SELECTION_CHANGE_COMMAND, $getSelection, $isRangeSelection } from 'lexical';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { mergeRegister } from '@lexical/utils';
+
+// helper functions
+import { positionEditorElement } from '../helpers/editor';
+import { getSelectedNode } from '../helpers/node';
+
+const LowPriority = 1;
+
+export interface FloatingLinkEditorProps {
+  editor: any;
+}
+
+export const FloatingLinkEditor = ({ editor }: FloatingLinkEditorProps) => {
+  // refs
+  const editorRef = useRef<any>(null);
+  const inputRef = useRef<any>(null);
+  const mouseDownRef = useRef(false);
+  // states
+  const [linkUrl, setLinkUrl] = useState('');
+  const [isEditMode, setEditMode] = useState(false);
+  const [lastSelection, setLastSelection] = useState<any>(null);
+
+  const updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        setLinkUrl(parent.getURL());
+      } else if ($isLinkNode(node)) {
+        setLinkUrl(node.getURL());
+      } else {
+        setLinkUrl('');
+      }
+    }
+    const editorElem = editorRef.current;
+    const nativeSelection = window?.getSelection();
+    const activeElement = document.activeElement;
+
+    if (editorElem === null) {
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+    if (
+      selection !== null &&
+      !nativeSelection?.isCollapsed &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection?.anchorNode)
+    ) {
+      const domRange = nativeSelection?.getRangeAt(0);
+      let rect;
+      if (nativeSelection?.anchorNode === rootElement) {
+        let inner = rootElement;
+        while (inner.firstElementChild != null) {
+          inner = inner.firstElementChild;
+        }
+        rect = inner.getBoundingClientRect();
+      } else {
+        rect = domRange?.getBoundingClientRect();
+      }
+
+      if (!mouseDownRef.current) {
+        positionEditorElement(editorElem, rect);
+      }
+      setLastSelection(selection);
+    } else if (!activeElement || activeElement.className !== 'link-input') {
+      positionEditorElement(editorElem, null);
+      setLastSelection(null);
+      setEditMode(false);
+      setLinkUrl('');
+    }
+
+    return true;
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }: any) => {
+        editorState.read(() => {
+          updateLinkEditor();
+        });
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateLinkEditor();
+          return true;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateLinkEditor();
+    });
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    if (isEditMode && inputRef?.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditMode]);
+
+  return (
+    <div ref={editorRef} className="link-editor">
+      {isEditMode ? (
+        <input
+          ref={inputRef}
+          className="link-input"
+          value={linkUrl}
+          onChange={(event) => {
+            setLinkUrl(event.target.value);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              if (lastSelection !== null) {
+                if (linkUrl !== '') {
+                  editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
+                }
+                setEditMode(false);
+              }
+            } else if (event.key === 'Escape') {
+              event.preventDefault();
+              setEditMode(false);
+            }
+          }}
+        />
+      ) : (
+        <>
+          <div className="link-input">
+            <a href={linkUrl} target="_blank" rel="noopener noreferrer">
+              {linkUrl}
+            </a>
+            <div
+              className="link-edit"
+              role="button"
+              tabIndex={0}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                setEditMode(true);
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

components/lexical/toolbar/index.tsx

@@ -0,0 +1,430 @@
+import { useEffect, useState, useRef, useCallback } from "react";
+import { createPortal } from "react-dom";
+import {
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  REDO_COMMAND,
+  UNDO_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+  FORMAT_TEXT_COMMAND,
+  FORMAT_ELEMENT_COMMAND,
+  $getSelection,
+  $isRangeSelection,
+  $createParagraphNode,
+  $getNodeByKey,
+  RangeSelection,
+  NodeSelection,
+  GridSelection,
+} from "lexical";
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  $isListNode,
+  ListNode,
+} from "@lexical/list";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  $isParentElementRTL,
+  $wrapNodes,
+  $isAtNodeEnd,
+} from "@lexical/selection";
+import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+  $isHeadingNode,
+} from "@lexical/rich-text";
+// custom elements
+import { FloatingLinkEditor } from "./floating-link-editor";
+import { BlockTypeSelect } from "./block-type-select";
+
+const LowPriority = 1;
+
+function getSelectedNode(selection: any) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+  }
+}
+
+export const LexicalToolbar = () => {
+  // editor
+  const [editor] = useLexicalComposerContext();
+  // ref
+  const toolbarRef = useRef(null);
+  // states
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [blockType, setBlockType] = useState("paragraph");
+  const [selectedElementKey, setSelectedElementKey] = useState<string | null>(
+    null
+  );
+  const [isRTL, setIsRTL] = useState(false);
+  const [isLink, setIsLink] = useState(false);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [isStrikethrough, setIsStrikethrough] = useState(false);
+  const [isCode, setIsCode] = useState(false);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      const element =
+        anchorNode.getKey() === "root"
+          ? anchorNode
+          : anchorNode.getTopLevelElementOrThrow();
+      const elementKey = element.getKey();
+      const elementDOM = editor.getElementByKey(elementKey);
+      if (elementDOM !== null) {
+        setSelectedElementKey(elementKey);
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+          const type = parentList ? parentList.getTag() : element.getTag();
+          setBlockType(type);
+        } else {
+          const type = $isHeadingNode(element)
+            ? element.getTag()
+            : element.getType();
+          setBlockType(type);
+        }
+      }
+      // Update text format
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsUnderline(selection.hasFormat("underline"));
+      setIsStrikethrough(selection.hasFormat("strikethrough"));
+      setIsRTL($isParentElementRTL(selection));
+
+      // Update links
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          updateToolbar();
+          return false;
+        },
+        LowPriority
+      ),
+      editor.registerCommand(
+        CAN_UNDO_COMMAND,
+        (payload) => {
+          setCanUndo(payload);
+          return false;
+        },
+        LowPriority
+      ),
+      editor.registerCommand(
+        CAN_REDO_COMMAND,
+        (payload) => {
+          setCanRedo(payload);
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateToolbar]);
+
+  const insertLink = useCallback(
+    (e: any) => {
+      e.preventDefault();
+      if (!isLink) {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
+      } else {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+      }
+    },
+    [editor, isLink]
+  );
+
+  return (
+    <div
+      className="flex items-center mb-1 p-1 w-full flex-wrap border-b "
+      ref={toolbarRef}
+    >
+      <button
+        disabled={!canUndo}
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(UNDO_COMMAND, undefined);
+        }}
+        className="p-2 mr-2"
+        aria-label="Undo"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-arrow-counterclockwise"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M8 3a5 5 0 11-4.546 2.914.5.5 0 00-.908-.417A6 6 0 108 2v1z"
+          ></path>
+          <path d="M8 4.466V.534a.25.25 0 00-.41-.192L5.23 2.308a.25.25 0 000 .384l2.36 1.966A.25.25 0 008 4.466z"></path>
+        </svg>
+      </button>
+      <button
+        disabled={!canRedo}
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(REDO_COMMAND, undefined);
+        }}
+        className="p-2 mr-2"
+        aria-label="Redo"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-arrow-clockwise"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M8 3a5 5 0 104.546 2.914.5.5 0 01.908-.417A6 6 0 118 2v1z"
+          ></path>
+          <path d="M8 4.466V.534a.25.25 0 01.41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 018 4.466z"></path>
+        </svg>
+      </button>
+      <BlockTypeSelect
+        editor={editor}
+        toolbarRef={toolbarRef}
+        blockType={blockType}
+      />
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+        }}
+        className={`p-2 mr-2 ${isBold ? "active" : ""}`}
+        aria-label="Format Bold"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-type-bold"
+          viewBox="0 0 16 16"
+        >
+          <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 001.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+        }}
+        className={"p-2 mr-2" + (isItalic ? "active" : "")}
+        aria-label="Format Italics"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-type-italic"
+          viewBox="0 0 16 16"
+        >
+          <path d="M7.991 11.674L9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+        }}
+        className={"p-2 mr-2" + (isUnderline ? "active" : "")}
+        aria-label="Format Underline"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-type-underline"
+          viewBox="0 0 16 16"
+        >
+          <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+        }}
+        className={"p-2 mr-2" + (isStrikethrough ? "active" : "")}
+        aria-label="Format Strikethrough"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-type-strikethrough"
+          viewBox="0 0 16 16"
+        >
+          <path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 01-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+        }}
+        className={"p-2 mr-2 " + (isCode ? "active" : "")}
+        aria-label="Insert Code"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-code"
+          viewBox="0 0 16 16"
+        >
+          <path d="M5.854 4.854a.5.5 0 10-.708-.708l-3.5 3.5a.5.5 0 000 .708l3.5 3.5a.5.5 0 00.708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 01.708-.708l3.5 3.5a.5.5 0 010 .708l-3.5 3.5a.5.5 0 01-.708-.708L13.293 8l-3.147-3.146z"></path>
+        </svg>
+      </button>
+      <button
+        onClick={insertLink}
+        className={"p-2 mr-2 " + (isLink ? "active" : "")}
+        aria-label="Insert Link"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-link"
+          viewBox="0 0 16 16"
+        >
+          <path d="M6.354 5.5H4a3 3 0 000 6h3a3 3 0 002.83-4H9c-.086 0-.17.01-.25.031A2 2 0 017 10.5H4a2 2 0 110-4h1.535c.218-.376.495-.714.82-1z"></path>
+          <path d="M9 5.5a3 3 0 00-2.83 4h1.098A2 2 0 019 6.5h3a2 2 0 110 4h-1.535a4.02 4.02 0 01-.82 1H12a3 3 0 100-6H9z"></path>
+        </svg>
+      </button>
+      {isLink &&
+        createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
+        }}
+        className="p-2 mr-2"
+        aria-label="Left Align"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-text-left"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M2 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
+          ></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
+        }}
+        className="p-2 mr-2"
+        aria-label="Center Align"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-text-center"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-2-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm2-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-2-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
+          ></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
+        }}
+        className="p-2 mr-2"
+        aria-label="Right Align"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-text-right"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M6 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm4-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
+          ></path>
+        </svg>
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
+        }}
+        className="p-2 mr-2"
+        aria-label="Justify Align"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-justify"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M2 12.5a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
+          ></path>
+        </svg>
+      </button>{" "}
+    </div>
+  );
+};

components/lexical/viewer.tsx

@@ -0,0 +1,58 @@
+import { FC } from "react";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { TRANSFORMERS } from "@lexical/markdown";
+// custom plugins
+import { CodeHighlightPlugin } from "./plugins/code-highlight";
+import ReadOnlyPlugin from "./plugins/read-only";
+// config
+import { initialConfig } from "./config";
+// helpers
+import { getValidatedValue } from "./helpers/editor";
+
+export interface RichTextViewerProps {
+  id: string;
+  value: string;
+}
+
+const RichTextViewer: FC<RichTextViewerProps> = (props) => {
+  // props
+  const { value, id } = props;
+
+  return (
+    <LexicalComposer
+      initialConfig={{
+        ...initialConfig,
+        namespace: id || "Lexical Editor",
+        editorState: getValidatedValue(value),
+        editable: false,
+      }}
+    >
+      <div className="relative">
+        <RichTextPlugin
+          contentEditable={
+            <ContentEditable className='className="h-[450px] outline-none py-[15px] resize-none overflow-hidden text-ellipsis' />
+          }
+          placeholder={
+            <div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
+              Enter some text...
+            </div>
+          }
+        />
+        <ReadOnlyPlugin value={value} />
+        <HistoryPlugin />
+        <CodeHighlightPlugin />
+        <ListPlugin />
+        <LinkPlugin />
+        <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+      </div>
+    </LexicalComposer>
+  );
+};
+
+export default RichTextViewer;

components/project/cycles/CycleView.tsx

@@ -175,7 +175,7 @@ const SprintView: React.FC<Props> = ({
                           </div>
                         ))
                       ) : (
-                        <p className="text-sm text-gray-500">This sprint has no issues.</p>
+                        <p className="text-sm text-gray-500">This cycle has no issues.</p>
                       )
                     ) : (
                       <div className="w-full h-full flex items-center justify-center">

components/project/issues/BoardView/SingleBoard.tsx

@@ -18,6 +18,7 @@ import {
   PlusIcon,
 } from "@heroicons/react/24/outline";
 import Image from "next/image";
+import { divide } from "lodash";
 
 type Props = {
   selectedGroup: NestedKeyOf<IIssue> | null;
@@ -190,7 +191,7 @@ const SingleBoard: React.FC<Props> = ({
             <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
               {(provided, snapshot) => (
                 <div
-                  className={`mt-3 space-y-3 h-full overflow-y-auto px-3 ${
+                  className={`mt-3 space-y-3 h-full overflow-y-auto px-3 pb-3 ${
                     snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
                   } ${!show ? "hidden" : "block"}`}
                   {...provided.droppableProps}
@@ -219,7 +220,7 @@ const SingleBoard: React.FC<Props> = ({
                                       key={key}
                                       className={`${
                                         key === "name"
-                                          ? "text-sm font-medium mb-2"
+                                          ? "text-sm mb-2"
                                           : key === "description"
                                           ? "text-xs text-black"
                                           : key === "priority"

components/project/issues/BoardView/index.tsx

@@ -21,6 +21,8 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
 import { Spinner } from "ui";
 // types
 import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
+import ConfirmIssueDeletion from "../ConfirmIssueDeletion";
+import { TrashIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   properties: Properties;
@@ -35,6 +37,8 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
   const [isOpen, setIsOpen] = useState(false);
 
   const [isIssueOpen, setIsIssueOpen] = useState(false);
+  const [isIssueDeletionOpen, setIsIssueDeletionOpen] = useState(false);
+  const [issueDeletionData, setIssueDeletionData] = useState<IIssue | undefined>();
 
   const [preloadedData, setPreloadedData] = useState<
     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
@@ -58,6 +62,14 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
       if (!result.destination) return;
       const { source, destination, type } = result;
 
+      if (destination.droppableId === "trashBox") {
+        const removedItem = groupedByIssues[source.droppableId][source.index];
+
+        setIssueDeletionData(removedItem);
+        setIsIssueDeletionOpen(true);
+
+        console.log(removedItem);
+      } else {
         if (type === "state") {
           const newStates = Array.from(states ?? []);
           const [reorderedState] = newStates.splice(source.index, 1);
@@ -79,9 +91,14 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
           mutateState(newStates, false);
           if (!activeWorkspace) return;
           stateServices
-          .patchState(activeWorkspace.slug, projectId as string, newStates[destination.index].id, {
+            .patchState(
+              activeWorkspace.slug,
+              projectId as string,
+              newStates[destination.index].id,
+              {
                 sequence: sequenceNumber,
-          })
+              }
+            )
             .then((response) => {
               console.log(response);
             })
@@ -102,9 +119,14 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
               removedItem.priority = destinationGroup;
 
               // patch request
-            issuesServices.patchIssue(activeWorkspace!.slug, projectId as string, removedItem.id, {
+              issuesServices.patchIssue(
+                activeWorkspace!.slug,
+                projectId as string,
+                removedItem.id,
+                {
                   priority: destinationGroup,
-            });
+                }
+              );
             } else if (selectedGroup === "state_detail.name") {
               const destinationState = states?.find((s) => s.name === destinationGroup);
               const destinationStateId = destinationState?.id;
@@ -115,9 +137,14 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
               removedItem.state_detail = destinationState;
 
               // patch request
-            issuesServices.patchIssue(activeWorkspace!.slug, projectId as string, removedItem.id, {
+              issuesServices.patchIssue(
+                activeWorkspace!.slug,
+                projectId as string,
+                removedItem.id,
+                {
                   state: destinationStateId,
-            });
+                }
+              );
             }
 
             // remove item from the source group
@@ -126,6 +153,7 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
             groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
           }
         }
+      }
     },
     [activeWorkspace, mutateState, groupedByIssues, projectId, selectedGroup, states]
   );
@@ -155,6 +183,11 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
         setIsOpen={setIsOpen}
         data={preloadedData as Partial<IIssue>}
       /> */}
+      <ConfirmIssueDeletion
+        isOpen={isIssueDeletionOpen}
+        handleClose={() => setIsIssueDeletionOpen(false)}
+        data={issueDeletionData}
+      />
       <CreateUpdateIssuesModal
         isOpen={isIssueOpen && preloadedData?.actionType === "createIssue"}
         setIsOpen={setIsIssueOpen}
@@ -164,9 +197,23 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
         projectId={projectId as string}
       />
       {groupedByIssues ? (
-        groupedByIssues ? (
+        <div className="h-full w-full">
-          <div className="w-full" style={{ height: "calc(82vh - 1.5rem)" }}>
           <DragDropContext onDragEnd={handleOnDragEnd}>
+            {/* <StrictModeDroppable droppableId="trashBox">
+              {(provided, snapshot) => (
+                <button
+                  type="button"
+                  className={`fixed bottom-2 right-8 z-10 px-2 py-1 flex items-center gap-2 rounded-lg mb-5 text-red-600 text-sm bg-red-100 border-2 border-transparent ${
+                    snapshot.isDraggingOver ? "border-red-600" : ""
+                  }`}
+                  {...provided.droppableProps}
+                  ref={provided.innerRef}
+                >
+                  <TrashIcon className="h-3 w-3" />
+                  Drop to delete
+                </button>
+              )}
+            </StrictModeDroppable> */}
             <div className="h-full w-full overflow-hidden">
               <StrictModeDroppable droppableId="state" type="state" direction="horizontal">
                 {(provided) => (
@@ -183,8 +230,7 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
                           groupTitle={singleGroup}
                           createdBy={
                             members
-                                ? members?.find((m) => m.member.id === singleGroup)?.member
+                              ? members?.find((m) => m.member.id === singleGroup)?.member.first_name
-                                    .first_name
                               : undefined
                           }
                           groupedByIssues={groupedByIssues}
@@ -212,9 +258,8 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
             </div>
           </DragDropContext>
         </div>
-        ) : null
       ) : (
-        <div className="w-full h-full flex justify-center items-center">
+        <div className="h-full w-full flex justify-center items-center">
           <Spinner />
         </div>
       )}

components/project/issues/CreateUpdateIssueModal/SelectParentIssues.tsx

@@ -52,6 +52,7 @@ const SelectParent: React.FC<Props> = ({ control }) => {
             };
           })}
           value={value}
+          width="xs"
           buttonClassName="max-h-30 overflow-y-scroll"
           optionsClassName="max-h-30 overflow-y-scroll"
           onChange={onChange}

components/project/issues/ListView/index.tsx

@@ -77,11 +77,11 @@ const ListView: React.FC<Props> = ({
 
   const handleHover = (issueId: string) => {
     document.addEventListener("keydown", (e) => {
-      if (e.code === "Space") {
+      // if (e.code === "Space") {
-        e.preventDefault();
+      //   e.preventDefault();
-        setPreviewModalIssueId(issueId);
+      //   setPreviewModalIssueId(issueId);
-        setIssuePreviewModal(true);
+      //   setIssuePreviewModal(true);
-      }
+      // }
     });
   };
 

components/project/issues/issue-detail/IssueDetailSidebar.tsx

@@ -21,7 +21,7 @@ import {
 // commons
 import { classNames, copyTextToClipboard } from "constants/common";
 // ui
-import { Input, Button } from "ui";
+import { Input, Button, Spinner } from "ui";
 // icons
 import {
   UserIcon,
@@ -32,6 +32,7 @@ import {
   ChartBarIcon,
   ClipboardDocumentIcon,
   LinkIcon,
+  ArrowPathIcon,
 } from "@heroicons/react/24/outline";
 // types
 import type { Control } from "react-hook-form";
@@ -50,7 +51,7 @@ const defaultValues: Partial<IIssueLabels> = {
 };
 
 const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
-  const { activeWorkspace, activeProject } = useUser();
+  const { activeWorkspace, activeProject, cycles } = useUser();
 
   const { data: states } = useSWR<IState[]>(
     activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null,
@@ -121,6 +122,16 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
         value: state.id,
       })),
     },
+    {
+      label: "Cycle",
+      name: "cycle",
+      canSelectMultipleOptions: false,
+      icon: ArrowPathIcon,
+      options: cycles?.map((cycle) => ({
+        label: cycle.name,
+        value: cycle.id,
+      })),
+    },
     {
       label: "Assignees",
       name: "assignees_list",
@@ -153,6 +164,13 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
     },
   ];
 
+  const handleCycleChange = (cycleId: string) => {
+    if (activeWorkspace && activeProject && issueDetail)
+      issuesServices.addIssueToSprint(activeWorkspace.slug, activeProject.id, cycleId, {
+        issue: issueDetail.id,
+      });
+  };
+
   return (
     <div className="h-full w-full">
       <div className="space-y-3">
@@ -193,7 +211,10 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
                       as="div"
                       value={value}
                       multiple={item.canSelectMultipleOptions}
-                      onChange={(value: any) => submitChanges({ [item.name]: value })}
+                      onChange={(value: any) => {
+                        if (item.name === "cycle") handleCycleChange(value);
+                        else submitChanges({ [item.name]: value });
+                      }}
                       className="flex-shrink-0"
                     >
                       {({ open }) => (
@@ -229,12 +250,16 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
                           >
                             <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
                               <div className="p-1">
-                                {item.options?.map((option) => (
+                                {item.options ? (
+                                  item.options.length > 0 ? (
+                                    item.options.map((option) => (
                                       <Listbox.Option
                                         key={option.value}
                                         className={({ active, selected }) =>
                                           `${
-                                        active || selected ? "text-white bg-theme" : "text-gray-900"
+                                            active || selected
+                                              ? "text-white bg-theme"
+                                              : "text-gray-900"
                                           } ${
                                             item.label === "Priority" && "capitalize"
                                           } cursor-pointer select-none relative p-2 rounded-md truncate`
@@ -243,7 +268,13 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
                                       >
                                         {option.label}
                                       </Listbox.Option>
-                                ))}
+                                    ))
+                                  ) : (
+                                    <div className="text-center">No {item.label}s found</div>
+                                  )
+                                ) : (
+                                  <Spinner />
+                                )}
                               </div>
                             </Listbox.Options>
                           </Transition>
@@ -321,19 +352,29 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
                           >
                             <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
                               <div className="p-1">
-                                {issueLabels?.map((label: any) => (
+                                {issueLabels ? (
+                                  issueLabels.length > 0 ? (
+                                    issueLabels.map((label: any) => (
                                       <Listbox.Option
                                         key={label.id}
                                         className={({ active, selected }) =>
                                           `${
-                                        active || selected ? "text-white bg-theme" : "text-gray-900"
+                                            active || selected
+                                              ? "text-white bg-theme"
+                                              : "text-gray-900"
                                           } cursor-pointer select-none relative p-2 rounded-md truncate`
                                         }
                                         value={label.id}
                                       >
                                         {label.name}
                                       </Listbox.Option>
-                                ))}
+                                    ))
+                                  ) : (
+                                    <div className="text-center">No labels found</div>
+                                  )
+                                ) : (
+                                  <Spinner />
+                                )}
                               </div>
                             </Listbox.Options>
                           </Transition>

components/project/issues/issue-detail/activity/index.tsx

@@ -45,7 +45,7 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
                       </div>
                     </div>
                   ) : (
-                    <div className="relative z-10 flex-shrink-0 border-2 border-white -ml-1.5">
+                    <div className="relative z-10 flex-shrink-0 border-2 border-white rounded-full h-[34px] -ml-1.5">
                       {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
                         <Image
                           src={activity.actor_detail.avatar}

components/project/memberInvitations.tsx

@@ -39,7 +39,7 @@ const ProjectMemberInvitations = ({
   return (
     <>
       <div
-        className={`w-full h-full flex flex-col px-4 py-3 rounded-lg bg-indigo-50 ${
+        className={`w-full h-full flex flex-col px-4 py-3 rounded-md bg-white ${
           selected ? "ring-2 ring-indigo-400" : ""
         }`}
       >

components/workspace/SingleInvitation.tsx

@@ -0,0 +1,77 @@
+// next
+import Image from "next/image";
+// react
+import { useState } from "react";
+// types
+import { IWorkspaceInvitation } from "types";
+
+type Props = {
+  invitation: IWorkspaceInvitation;
+  invitationsRespond: string[];
+  handleInvitation: any;
+};
+
+const SingleInvitation: React.FC<Props> = ({
+  invitation,
+  invitationsRespond,
+  handleInvitation,
+}) => {
+  const [isChecked, setIsChecked] = useState(invitationsRespond.includes(invitation.id));
+
+  return (
+    <>
+      <li>
+        <label
+          className={`group relative flex border-2 border-transparent items-start space-x-3 cursor-pointer px-4 py-4 ${
+            isChecked ? "border-theme rounded-lg" : ""
+          }`}
+          htmlFor={invitation.id}
+        >
+          <div className="flex-shrink-0">
+            <span className="inline-flex items-center justify-center h-10 w-10 rounded-lg">
+              {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
+                <Image
+                  src={invitation.workspace.logo}
+                  height="100%"
+                  width="100%"
+                  className="rounded"
+                  alt={invitation.workspace.name}
+                />
+              ) : (
+                <span className="h-full w-full p-4 flex items-center justify-center bg-gray-500 text-white rounded uppercase">
+                  {invitation.workspace.name.charAt(0)}
+                </span>
+              )}
+            </span>
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium text-gray-900">{invitation.workspace.name}</div>
+            <p className="text-sm text-gray-500">
+              Invited by {invitation.workspace.owner.first_name}
+            </p>
+          </div>
+          <div className="flex-shrink-0 self-center">
+            <input
+              id={invitation.id}
+              aria-describedby="workspaces"
+              name={invitation.id}
+              checked={invitationsRespond.includes(invitation.id)}
+              value={invitation.workspace.name}
+              onChange={(e) => {
+                handleInvitation(
+                  invitation,
+                  invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
+                );
+                setIsChecked(e.target.checked);
+              }}
+              type="checkbox"
+              className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            />
+          </div>
+        </label>
+      </li>
+    </>
+  );
+};
+
+export default SingleInvitation;

contexts/user.context.tsx

@@ -16,7 +16,6 @@ import {
   CURRENT_USER,
   PROJECTS_LIST,
   USER_WORKSPACES,
-  USER_WORKSPACE_INVITATIONS,
   PROJECT_ISSUES_LIST,
   STATE_LIST,
   CYCLE_LIST,
@@ -24,7 +23,8 @@ import {
 
 // types
 import type { KeyedMutator } from "swr";
-import type { IUser, IWorkspace, IProject, IIssue, IssueResponse, ICycle, IState } from "types";
+import type { IUser, IWorkspace, IProject, IssueResponse, ICycle, IState } from "types";
+
 interface IUserContextProps {
   user?: IUser;
   isUserLoading: boolean;
@@ -38,8 +38,8 @@ interface IUserContextProps {
   activeProject?: IProject;
   issues?: IssueResponse;
   mutateIssues: KeyedMutator<IssueResponse>;
-  sprints?: ICycle[];
+  cycles?: ICycle[];
-  mutateSprints: KeyedMutator<ICycle[]>;
+  mutateCycles: KeyedMutator<ICycle[]>;
   states?: IState[];
   mutateStates: KeyedMutator<IState[]>;
 }
@@ -92,7 +92,7 @@ export const UserProvider = ({ children }: { children: ReactElement }) => {
       : null
   );
 
-  const { data: sprints, mutate: mutateSprints } = useSWR<ICycle[]>(
+  const { data: cycles, mutate: mutateCycles } = useSWR<ICycle[]>(
     activeWorkspace && activeProject ? CYCLE_LIST(activeProject.id) : null,
     activeWorkspace && activeProject
       ? () => sprintsServices.getCycles(activeWorkspace.slug, activeProject.id)
@@ -141,8 +141,8 @@ export const UserProvider = ({ children }: { children: ReactElement }) => {
         activeProject,
         issues,
         mutateIssues,
-        sprints,
+        cycles,
-        mutateSprints,
+        mutateCycles,
         states,
         mutateStates,
         setActiveProject,

layouts/Navbar/Sidebar.tsx

@@ -28,11 +28,13 @@ import {
   XMarkIcon,
   ArrowLongLeftIcon,
   QuestionMarkCircleIcon,
+  EllipsisHorizontalIcon,
+  ClipboardDocumentIcon,
 } from "@heroicons/react/24/outline";
 // constants
-import { classNames } from "constants/common";
+import { classNames, copyTextToClipboard } from "constants/common";
 // ui
-import { Spinner, Tooltip } from "ui";
+import { CustomListbox, Spinner, Tooltip } from "ui";
 // types
 import type { IUser } from "types";
 
@@ -423,6 +425,7 @@ const Sidebar: React.FC = () => {
                       <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
                         {({ open }) => (
                           <>
+                            <div className="flex items-center">
                               <Disclosure.Button
                                 className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${
                                   sidebarCollapse ? "justify-center" : ""
@@ -434,12 +437,54 @@ const Sidebar: React.FC = () => {
                                 {!sidebarCollapse && (
                                   <span className="flex items-center justify-between w-full">
                                     {project?.name}
+                                    <span>
                                       <ChevronDownIcon
-                                    className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
+                                        className={`h-4 w-4 duration-300 ${
+                                          open ? "rotate-180" : ""
+                                        }`}
                                       />
                                     </span>
+                                  </span>
                                 )}
                               </Disclosure.Button>
+                              {!sidebarCollapse && (
+                                <Menu as="div" className="relative inline-block">
+                                  <Menu.Button className="grid relative place-items-center focus:outline-none">
+                                    <EllipsisHorizontalIcon className="h-4 w-4" />
+                                  </Menu.Button>
+
+                                  <Transition
+                                    as={React.Fragment}
+                                    enter="transition ease-out duration-100"
+                                    enterFrom="transform opacity-0 scale-95"
+                                    enterTo="transform opacity-100 scale-100"
+                                    leave="transition ease-in duration-75"
+                                    leaveFrom="transform opacity-100 scale-100"
+                                    leaveTo="transform opacity-0 scale-95"
+                                  >
+                                    <Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
+                                      <div className="p-1">
+                                        <Menu.Item as="div">
+                                          {(active) => (
+                                            <button
+                                              className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
+                                              onClick={() =>
+                                                copyTextToClipboard(
+                                                  `https://app.plane.so/projects/${project?.id}/issues/`
+                                                )
+                                              }
+                                            >
+                                              <ClipboardDocumentIcon className="h-3 w-3" />
+                                              Copy Link
+                                            </button>
+                                          )}
+                                        </Menu.Item>
+                                      </div>
+                                    </Menu.Items>
+                                  </Transition>
+                                </Menu>
+                              )}
+                            </div>
                             <Transition
                               enter="transition duration-100 ease-out"
                               enterFrom="transform scale-95 opacity-0"
@@ -509,6 +554,7 @@ const Sidebar: React.FC = () => {
               )}
             </div>
             <div className="px-2 py-2 bg-gray-50 w-full self-baseline flex items-center gap-x-2">
+              <Tooltip content="Click to toggle sidebar" position="right">
                 <button
                   type="button"
                   className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 outline-none ${
@@ -516,14 +562,13 @@ const Sidebar: React.FC = () => {
                   }`}
                   onClick={() => toggleCollapsed()}
                 >
-                <Tooltip content="Click to toggle sidebar" position="right">
                   <ArrowLongLeftIcon
                     className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${
                       sidebarCollapse ? "rotate-180" : ""
                     }`}
                   />
-                </Tooltip>
                 </button>
+              </Tooltip>
               <button
                 type="button"
                 onClick={() => {

lib/services/issues.services.ts

@@ -92,8 +92,6 @@ class ProjectIssuesServices extends APIService {
       issue: string;
     }
   ) {
-    console.log(data);
-
     return this.post(CYCLE_DETAIL(workspace_slug, projectId, cycleId), data)
       .then((response) => {
         return response?.data;

package.json

@@ -11,8 +11,12 @@
   "dependencies": {
     "@headlessui/react": "^1.7.3",
     "@heroicons/react": "^2.0.12",
+    "@lexical/link": "^0.6.3",
+    "@lexical/react": "^0.5.0",
+    "@lexical/utils": "^0.5.0",
     "axios": "^1.1.3",
     "js-cookie": "^3.0.1",
+    "lexical": "^0.5.0",
     "next": "12.2.2",
     "prosemirror-example-setup": "^1.2.1",
     "prosemirror-model": "^1.18.1",

pages/editor.tsx

@@ -1,41 +1,26 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
-// next
+import dynamic from "next/dynamic";
-import type { NextPage } from "next";
-// prose mirror
-import { EditorState } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import { Schema, DOMParser } from "prosemirror-model";
-import { schema } from "prosemirror-schema-basic";
-import { addListNodes } from "prosemirror-schema-list";
-import { exampleSetup } from "prosemirror-example-setup";
 
-const Editor: NextPage = () => {
+const RichTextEditor = dynamic(() => import("../components/lexical/editor"), {
-  const editorRef = useRef<HTMLDivElement>(null);
+  ssr: false,
-  const contentRef = useRef<HTMLDivElement>(null);
+});
 
-  useEffect(() => {
+const LexicalViewer = dynamic(() => import("../components/lexical/viewer"), {
-    if (!editorRef.current || !contentRef.current) return;
+  ssr: false,
-
+});
-    const mySchema = new Schema({
-      nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
-      marks: schema.spec.marks,
-    });
-
-    const myEditorView = new EditorView(editorRef.current, {
-      state: EditorState.create({
-        doc: DOMParser.fromSchema(mySchema)?.parse(contentRef.current),
-        plugins: exampleSetup({ schema: mySchema }),
-      }),
-    });
-
-    return () => myEditorView.destroy();
-  }, []);
 
+const Home = () => {
+  const [value, setValue] = React.useState("");
+  const onChange: any = (value: any) => {
+    console.log(value);
+    setValue(value);
+  };
   return (
-    <div id="editor" ref={editorRef}>
+    <>
-      <div id="content" ref={contentRef} />
+      <RichTextEditor onChange={onChange} value={value} id="editor" />
-    </div>
+      <LexicalViewer id="institution_viewer" value={value} />
+    </>
   );
 };
 
-export default Editor;
+export default Home;

pages/invitations.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 // next
 import type { NextPage } from "next";
-import Link from "next/link";
 import { useRouter } from "next/router";
 // swr
 import useSWR from "swr";
@@ -14,12 +13,19 @@ import useUser from "lib/hooks/useUser";
 import { USER_WORKSPACE_INVITATIONS } from "constants/api-routes";
 // layouts
 import DefaultLayout from "layouts/DefaultLayout";
+// components
+import SingleInvitation from "components/workspace/SingleInvitation";
 // ui
-import { Button, Spinner } from "ui";
+import { Button, Spinner, EmptySpace, EmptySpaceItem } from "ui";
+// icons
+import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
 // types
 import type { IWorkspaceInvitation } from "types";
+<<<<<<< Updated upstream
 import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
 import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
+=======
+>>>>>>> Stashed changes
 
 const OnBoard: NextPage = () => {
   const router = useRouter();
@@ -66,10 +72,15 @@ const OnBoard: NextPage = () => {
   };
 
   useEffect(() => {
+<<<<<<< Updated upstream
     userService.updateUserOnBoard().then((response) => {
       console.log(response);
     });
   }, []);
+=======
+    if (workspaces && workspaces.length === 0) setCanRedirect(false);
+  }, [workspaces]);
+>>>>>>> Stashed changes
 
   return (
     <DefaultLayout
@@ -85,9 +96,11 @@ const OnBoard: NextPage = () => {
             <p className="text-sm text-center">logged in as {user.email}</p>
           </div>
         )}
+
         <div className="w-full md:w-2/3 lg:w-1/3 p-8 rounded-lg">
           {invitations && workspaces ? (
             invitations.length > 0 ? (
+<<<<<<< Updated upstream
               <div className="mt-3 sm:mt-5">
                 <div className="mt-2">
                   <h2 className="text-2xl font-medium mb-4">Join your workspaces</h2>
@@ -128,10 +141,32 @@ const OnBoard: NextPage = () => {
                       </div>
                     ))}
                   </div>
+=======
+              <div className="max-w-lg">
+                <div className="mb-4">
+                  <CubeIcon className="h-14 w-14 text-gray-400" />
+>>>>>>> Stashed changes
                 </div>
-                <div className="flex justify-between mt-4">
+                <h2 className="text-lg font-medium text-gray-900">Workspace Invitations</h2>
+                <p className="mt-1 text-sm text-gray-500">
+                  Select invites that you want to accept.
+                </p>
+                <ul
+                  role="list"
+                  className="mt-6 divide-y divide-gray-200 border-t border-b border-gray-200"
+                >
+                  {invitations.map((invitation) => (
+                    <SingleInvitation
+                      key={invitation.id}
+                      invitation={invitation}
+                      invitationsRespond={invitationsRespond}
+                      handleInvitation={handleInvitation}
+                    />
+                  ))}
+                </ul>
+                <div className="mt-6">
                   <Button className="w-full" onClick={submitInvitations}>
-                    Continue to Dashboard
+                    Accept and Continue
                   </Button>
                 </div>
               </div>

pages/me/my-issues.tsx

@@ -145,7 +145,9 @@ const MyIssues: NextPage = () => {
                                     <a>{myIssue.name}</a>
                                   </Link>
                                 </td>
-                                <td className="px-3 py-4 max-w-[15rem]">{myIssue.description}</td>
+                                <td className="px-3 py-4 max-w-[15rem] truncate">
+                                  {myIssue.description}
+                                </td>
                                 <td className="px-3 py-4">
                                   {myIssue.project_detail?.name}
                                   <br />

pages/projects/[projectId]/cycles.tsx

@@ -14,21 +14,18 @@ import { CYCLE_ISSUES, CYCLE_LIST } from "constants/fetch-keys";
 // layouts
 import AdminLayout from "layouts/AdminLayout";
 // components
-import SprintView from "components/project/cycles/CycleView";
+import CycleView from "components/project/cycles/CycleView";
 import ConfirmIssueDeletion from "components/project/issues/ConfirmIssueDeletion";
 import ConfirmSprintDeletion from "components/project/cycles/ConfirmCycleDeletion";
 import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
 import CreateUpdateSprintsModal from "components/project/cycles/CreateUpdateCyclesModal";
 // ui
-import { Spinner } from "ui";
+import { BreadcrumbItem, Breadcrumbs, HeaderButton, Spinner, EmptySpace, EmptySpaceItem } from "ui";
 // icons
 import { PlusIcon } from "@heroicons/react/20/solid";
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue, ICycle, SelectSprintType, SelectIssue } from "types";
-import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
-import HeaderButton from "ui/HeaderButton";
-import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
 
 const ProjectSprints: NextPage = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -44,7 +41,7 @@ const ProjectSprints: NextPage = () => {
 
   const { projectId } = router.query;
 
-  const { data: sprints } = useSWR<ICycle[]>(
+  const { data: cycles } = useSWR<ICycle[]>(
     projectId && activeWorkspace ? CYCLE_LIST(projectId as string) : null,
     activeWorkspace && projectId
       ? () => sprintService.getCycles(activeWorkspace.slug, projectId as string)
@@ -52,14 +49,14 @@ const ProjectSprints: NextPage = () => {
   );
 
   const openIssueModal = (
-    sprintId: string,
+    cycleId: string,
     issue?: IIssue,
     actionType: "create" | "edit" | "delete" = "create"
   ) => {
-    const sprint = sprints?.find((sprint) => sprint.id === sprintId);
+    const cycle = cycles?.find((cycle) => cycle.id === cycleId);
-    if (sprint) {
+    if (cycle) {
       setSelectedSprint({
-        ...sprint,
+        ...cycle,
         actionType: "create-issue",
       });
       if (issue) setSelectedIssues({ ...issue, actionType });
@@ -67,16 +64,16 @@ const ProjectSprints: NextPage = () => {
     }
   };
 
-  const addIssueToSprint = (sprintId: string, issueId: string) => {
+  const addIssueToSprint = (cycleId: string, issueId: string) => {
     if (!activeWorkspace || !projectId) return;
 
     issuesServices
-      .addIssueToSprint(activeWorkspace.slug, projectId as string, sprintId, {
+      .addIssueToSprint(activeWorkspace.slug, projectId as string, cycleId, {
         issue: issueId,
       })
       .then((response) => {
         console.log(response);
-        mutate(CYCLE_ISSUES(sprintId));
+        mutate(CYCLE_ISSUES(cycleId));
       })
       .catch((error) => {
         console.log(error);
@@ -134,8 +131,8 @@ const ProjectSprints: NextPage = () => {
         setIsOpen={setIsOpen}
         projectId={projectId as string}
       />
-      {sprints ? (
+      {cycles ? (
-        sprints.length > 0 ? (
+        cycles.length > 0 ? (
           <div className="h-full w-full space-y-5">
             <Breadcrumbs>
               <BreadcrumbItem title="Projects" link="/projects" />
@@ -146,15 +143,15 @@ const ProjectSprints: NextPage = () => {
               <HeaderButton Icon={PlusIcon} label="Add Cycle" onClick={() => setIsOpen(true)} />
             </div>
             <div className="h-full w-full">
-              {sprints.map((sprint) => (
+              {cycles.map((cycle) => (
-                <SprintView
+                <CycleView
-                  sprint={sprint}
+                  key={cycle.id}
+                  sprint={cycle}
                   selectSprint={setSelectedSprint}
                   projectId={projectId as string}
                   workspaceSlug={activeWorkspace?.slug as string}
                   openIssueModal={openIssueModal}
                   addIssueToSprint={addIssueToSprint}
-                  key={sprint.id}
                 />
               ))}
             </div>

pages/projects/[projectId]/issues/[issueId].tsx

@@ -162,12 +162,14 @@ const IssueDetail: NextPage = () => {
           />
         </Breadcrumbs>
         <div className="flex items-center justify-between w-full">
-          <h2 className="text-2xl font-medium">{`${activeProject?.name}/${activeProject?.identifier}-${issueDetail?.sequence_id}`}</h2>
+          <h2 className="text-lg font-medium">{`${activeProject?.name ?? "Project"}/${
+            activeProject?.identifier ?? "..."
+          }-${issueDetail?.sequence_id ?? "..."}`}</h2>
           <div className="flex items-center gap-x-3">
             <HeaderButton
               Icon={ChevronLeftIcon}
-              disabled={!prevIssue}
               label="Previous"
+              className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
               onClick={() => {
                 if (!prevIssue) return;
                 router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
@@ -177,6 +179,7 @@ const IssueDetail: NextPage = () => {
               Icon={ChevronRightIcon}
               disabled={!nextIssue}
               label="Next"
+              className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
               onClick={() => {
                 if (!nextIssue) return;
                 router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
@@ -188,7 +191,7 @@ const IssueDetail: NextPage = () => {
         {issueDetail && activeProject ? (
           <div className="grid grid-cols-4 gap-5">
             <div className="col-span-3 space-y-5">
-              <div className="bg-secondary rounded-lg p-5">
+              <div className="bg-secondary rounded-lg p-4">
                 <TextArea
                   id="name"
                   placeholder="Enter issue name"
@@ -200,7 +203,7 @@ const IssueDetail: NextPage = () => {
                     handleSubmit(submitChanges)();
                   }, 5000)}
                   mode="transparent"
-                  className="text-3xl sm:text-3xl"
+                  className="text-xl font-medium"
                 />
                 <TextArea
                   id="description"
@@ -217,7 +220,7 @@ const IssueDetail: NextPage = () => {
                   register={register}
                 />
               </div>
-              <div className="bg-secondary rounded-lg p-5">
+              <div className="bg-secondary rounded-lg p-4">
                 <div className="relative">
                   <div className="absolute inset-0 flex items-center" aria-hidden="true">
                     <div className="w-full border-t border-gray-300" />
@@ -233,7 +236,7 @@ const IssueDetail: NextPage = () => {
                         <Tab
                           key={item}
                           className={({ selected }) =>
-                            `px-3 py-1 text-sm rounded-md border border-gray-700 ${
+                            `px-3 py-1 text-sm rounded-md border-2 border-gray-700 ${
                               selected ? "bg-gray-700 text-white" : ""
                             }`
                           }

pages/projects/[projectId]/issues/index.tsx

@@ -141,7 +141,8 @@ const ProjectIssues: NextPage = () => {
           <Spinner />
         </div>
       ) : projectIssues.count > 0 ? (
-        <div className="w-full space-y-5">
+        <>
+          <div className="w-full space-y-5 mb-5">
             <Breadcrumbs>
               <BreadcrumbItem title="Projects" link="/projects" />
               <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Issues`} />
@@ -289,6 +290,7 @@ const ProjectIssues: NextPage = () => {
                 />
               </div>
             </div>
+          </div>
           {issueView === "list" ? (
             <ListView
               properties={properties}
@@ -298,14 +300,16 @@ const ProjectIssues: NextPage = () => {
               handleDeleteIssue={setDeleteIssue}
             />
           ) : (
+            <div className="h-full pb-7 mb-7">
               <BoardView
                 properties={properties}
                 selectedGroup={groupByProperty}
                 groupedByIssues={groupedByIssues}
                 members={members}
               />
-          )}
             </div>
+          )}
+        </>
       ) : (
         <div className="h-full w-full grid place-items-center px-4 sm:px-0">
           <EmptySpace

pages/projects/[projectId]/settings.tsx

@@ -33,6 +33,8 @@ import {
   CheckIcon,
   PlusIcon,
   PencilSquareIcon,
+  RectangleGroupIcon,
+  PencilIcon,
 } from "@heroicons/react/24/outline";
 // types
 import type { IProject, IState, IWorkspace, WorkspaceMember } from "types";
@@ -58,6 +60,7 @@ const ProjectSettings: NextPage = () => {
 
   const [isCreateStateModalOpen, setIsCreateStateModalOpen] = useState(false);
   const [selectedState, setSelectedState] = useState<string | undefined>();
+  const [newGroupForm, setNewGroupForm] = useState(false);
 
   const router = useRouter();
 
@@ -414,8 +417,8 @@ const ProjectSettings: NextPage = () => {
                       <div className="w-full space-y-5">
                         {states?.map((state) => (
                           <div
-                            className="border p-1 px-4 rounded flex justify-between items-center"
                             key={state.id}
+                            className="bg-white px-4 py-2 rounded flex justify-between items-center"
                           >
                             <div className="flex items-center gap-x-2">
                               <div
@@ -433,25 +436,69 @@ const ProjectSettings: NextPage = () => {
                             </div>
                           </div>
                         ))}
-                        <button
+                        <Button
                           type="button"
                           className="flex items-center gap-x-1"
                           onClick={() => setIsCreateStateModalOpen(true)}
                         >
-                          <PlusIcon className="h-4 w-4 text-gray-400" />
+                          <PlusIcon className="h-4 w-4" />
                           <span>Add State</span>
-                        </button>
+                        </Button>
                       </div>
                     </div>
                   </section>
                   <section className="space-y-5">
+                    <div className="flex items-center justify-between">
                       <div>
                         <h3 className="text-lg font-medium leading-6 text-gray-900">Labels</h3>
                         <p className="mt-1 text-sm text-gray-500">
                           Manage the labels of this project.
                         </p>
                       </div>
-                    <div></div>
+                      <Button
+                        className="flex items-center gap-x-1"
+                        onClick={() => setNewGroupForm(true)}
+                      >
+                        <PlusIcon className="h-4 w-4" />
+                        New group
+                      </Button>
+                    </div>
+                    <div className="space-y-5">
+                      <div
+                        className={`bg-white px-4 py-2 flex items-center gap-2 ${
+                          newGroupForm ? "" : "hidden"
+                        }`}
+                      >
+                        <Input type="text" name="groupName" />
+                        <Button
+                          type="button"
+                          theme="secondary"
+                          onClick={() => setNewGroupForm(false)}
+                        >
+                          Cancel
+                        </Button>
+                        <Button type="button">Save</Button>
+                      </div>
+                      {["", ""].map((group, index) => (
+                        <div key={index} className="bg-white p-4 text-gray-900 rounded-md">
+                          <h3 className="font-medium leading-5 flex items-center gap-2">
+                            <RectangleGroupIcon className="h-5 w-5" />
+                            This is the label group title
+                          </h3>
+                          <div className="pl-5 mt-4">
+                            <div className="group text-sm flex justify-between items-center p-2 hover:bg-gray-100 rounded">
+                              <h5 className="flex items-center gap-2">
+                                <div className="w-2 h-2 bg-red-600 rounded-full"></div>
+                                This is the label title
+                              </h5>
+                              <div className="hidden group-hover:block">
+                                <PencilIcon className="h-3 w-3" />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
                   </section>
                 </div>
               </form>

pages/signin.tsx

@@ -95,7 +95,7 @@ const SignIn: NextPage = () => {
     >
       {isGoogleAuthenticationLoading && (
         <div className="absolute top-0 left-0 w-full h-full bg-white z-50 flex items-center justify-center">
-          <h2 className="text-2xl text-black">Sign in with Google. Please wait...</h2>
+          <h2 className="text-2xl text-black">Signing in with Google. Please wait...</h2>
         </div>
       )}
       <div className="w-full h-screen flex justify-center items-center bg-gray-50 overflow-auto">

pages/workspace-member-invitation/[invitationId].tsx

@@ -18,11 +18,13 @@ import { Button } from "ui";
 // icons
 import {
   ChartBarIcon,
+  CheckIcon,
   ChevronRightIcon,
   CubeIcon,
   ShareIcon,
   StarIcon,
   UserIcon,
+  XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
 
@@ -60,49 +62,38 @@ const WorkspaceInvitation: NextPage = () => {
               </div>
             ) : (
               <>
-                <div className="bg-gray-50 rounded shadow-2xl border px-4 py-8 w-full md:w-1/3 space-y-4 flex flex-col justify-between">
                 {invitationDetail.accepted ? (
                   <>
-                      <h2 className="text-2xl">
+                    <EmptySpace
-                        You are already a member of {invitationDetail.workspace.name}
+                      title={`You are already a member of ${invitationDetail.workspace.name}`}
-                      </h2>
+                      description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
-                      <div className="w-full flex gap-x-4">
+                    >
-                        <Link href="/signin">
+                      <EmptySpaceItem
-                          <a className="w-full">
+                        Icon={CubeIcon}
-                            <Button className="w-full">Go To Login Page</Button>
+                        title="Continue to Dashboard"
-                          </a>
+                        action={() => router.push("/")}
-                        </Link>
+                      />
-                      </div>
+                    </EmptySpace>
                   </>
                 ) : (
-                    <>
+                  <EmptySpace
-                      <h2 className="text-2xl">
+                    title={`You have been invited to ${invitationDetail.workspace.name}`}
-                        You have been invited to{" "}
+                    description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
-                        <span className="font-semibold italic">
+                  >
-                          {invitationDetail.workspace.name}
+                    <EmptySpaceItem Icon={CheckIcon} title="Accept" action={handleAccept} />
-                        </span>
+                    <EmptySpaceItem
-                      </h2>
+                      Icon={XMarkIcon}
-                      <div className="w-full flex gap-x-4">
+                      title="Ignore"
-                        <Link href="/">
+                      action={() => {
-                          <a className="w-full">
+                        router.push("/");
-                            <Button theme="secondary" className="w-full">
+                      }}
-                              Ignore
+                    />
-                            </Button>
+                  </EmptySpace>
-                          </a>
-                        </Link>
-
-                        <Button className="w-full" onClick={handleAccept}>
-                          Accept
-                        </Button>
-                      </div>
-                    </>
                 )}
-                </div>
               </>
             )}
           </>
         ) : (
-          <>
           <EmptySpace
             title="This invitation link is not active anymore."
             description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
@@ -140,7 +131,6 @@ const WorkspaceInvitation: NextPage = () => {
               }}
             />
           </EmptySpace>
-          </>
         )}
       </div>
     </DefaultLayout>

public/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

ui/Button/index.tsx

@@ -19,7 +19,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
       children,
       onClick,
       type = "button",
-      size = "rg",
+      size = "sm",
       className,
       theme = "primary",
       disabled = false,
@@ -36,12 +36,12 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
           "inline-flex items-center rounded justify-center font-medium",
           theme === "primary"
             ? `${
-                disabled ? "bg-indigo-700 hover:bg-indigo-800" : "bg-theme hover:bg-indigo-700"
+                disabled ? "opacity-70" : "bg-theme hover:bg-indigo-700"
               } text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 border border-transparent`
             : theme === "secondary"
             ? "border border-gray-300 bg-white"
             : `${
-                disabled ? "bg-red-700 hover:bg-red-800" : "bg-red-600 hover:bg-red-700"
+                disabled ? "opacity-70" : "bg-red-600 hover:bg-red-700"
               } text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-transparent`,
           size === "sm"
             ? "p-2 text-xs"

ui/SearchListbox/index.tsx

@@ -13,7 +13,7 @@ const SearchListbox: React.FC<Props> = ({
   value,
   multiple: canSelectMultiple,
   icon,
-  width,
+  width = "sm",
   optionsFontsize,
   buttonClassName,
   optionsClassName,
@@ -83,7 +83,9 @@ const SearchListbox: React.FC<Props> = ({
             >
               <Combobox.Options
                 className={`absolute mt-1 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none max-h-32 overflow-auto z-10 ${
-                  width === "sm"
+                  width === "xs"
+                    ? "w-20"
+                    : width === "sm"
                     ? "w-32"
                     : width === "md"
                     ? "w-48"

ui/SearchListbox/types.d.ts

@@ -9,6 +9,6 @@ export type Props = {
   icon?: JSX.Element;
   buttonClassName?: string;
   optionsClassName?: string;
-  width?: "sm" | "md" | "lg" | "xl" | "2xl";
+  width?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
   optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
 };

ui/Tooltip/index.tsx

@@ -20,7 +20,7 @@ const Tooltip: React.FC<Props> = ({ children, content, position = "top" }) => {
             : "top-14"
         }`}
       >
-        <p className="truncate text-sx">{content}</p>
+        <p className="truncate text-xs">{content}</p>
         <span
           className={`absolute w-2 h-2 bg-black ${
             position === "top"

yarn.lock

@@ -61,6 +61,187 @@
   resolved "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz"
   integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
 
+"@lexical/clipboard@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/clipboard/-/clipboard-0.5.0.tgz#3d835289c0e1543a13a5fd032294aa2614e4373a"
+  integrity sha512-JFvdH4N/80GxC0jhaiO/fdUOeYcX8pMFrcrpBDeNIcBN/9eF8Rn/czvoPLLNB9Kcbz8d8XXqabKEGCz2hFL//w==
+  dependencies:
+    "@lexical/html" "0.5.0"
+    "@lexical/list" "0.5.0"
+    "@lexical/selection" "0.5.0"
+    "@lexical/utils" "0.5.0"
+
+"@lexical/code@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/code/-/code-0.5.0.tgz#05c92e3b077af3148a494b44f5663dea14f7631f"
+  integrity sha512-GmqRaQ8EBtlu13ObSZYiGDzIsrkwRyyqI2HRVBrPo2iszLBpby+7uIncAVQVkxt1JNYOKE2n4JfxK8TSYyMtYQ==
+  dependencies:
+    "@lexical/utils" "0.5.0"
+    prismjs "^1.27.0"
+
+"@lexical/dragon@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/dragon/-/dragon-0.5.0.tgz#54ec8812e3fb907af5913c5d0436b8d28fa4efe8"
+  integrity sha512-Gf0jN8hjlF8E71wAsvbRpR1u9oS6RUjUw3VWp/Qa+IrtjBFFVzdTUloUs3cjMX9E/MFRJgt3wPsaKx2IuLBWQw==
+
+"@lexical/hashtag@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/hashtag/-/hashtag-0.5.0.tgz#dfe39ea73d1c4658c724419ef1113e27fb75a7f3"
+  integrity sha512-3MT72y72BmK4q7Rtb9gP3n83UL4vWC078T9io4zyPxKEI1Mh3UAVuRwh6Ypn0FeH94XvmuZAGVdoOC/nTd1now==
+  dependencies:
+    "@lexical/utils" "0.5.0"
+
+"@lexical/history@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/history/-/history-0.5.0.tgz#5a13077e012f27f783beadca1c3fe545a2968f20"
+  integrity sha512-DCQgh1aQ1KS5JVYPU6GYr52BN0MQqmoXfFtf5uYCX9CbSAC0hDSK8ZPqwFW7jINqe6GwXxy7bo32j7E0A5023A==
+  dependencies:
+    "@lexical/utils" "0.5.0"
+
+"@lexical/html@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/html/-/html-0.5.0.tgz#5eb2ccb9ffb7c24fff097db369d81431d7a98833"
+  integrity sha512-uJAof6gXTLOH9JnmPJ+wxILFtu7I/eCebFyVMjV53sqaeLsQ3pDfBTUe4RO+NciC+XBQ1WVpZgCM8Yx5c5cMmQ==
+  dependencies:
+    "@lexical/selection" "0.5.0"
+
+"@lexical/link@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/link/-/link-0.5.0.tgz#fa5f3baa1122eb2a1be12ac7a30977eb4c557e1e"
+  integrity sha512-XB8e+UPI9jeqsi7+Wr0n9SToljiS+gZmJ5gXANtR6lSZPtpcSUPs1iJZU2A2dNKXdvsZwSPCFdPL6ogFaaRvvQ==
+  dependencies:
+    "@lexical/utils" "0.5.0"
+
+"@lexical/link@^0.6.3":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@lexical/link/-/link-0.6.3.tgz#e09b670e69be7ea4509654aacec87e74b834d84f"
+  integrity sha512-duP+8OYEsIJ5AZLO5Y/cND+oNajvlc0geggmzrJ/XRcFiQAWXJ9BsmEeg6KZFzl2+Whkz3Zdkfu/1h80qllktA==
+  dependencies:
+    "@lexical/utils" "0.6.3"
+
+"@lexical/list@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/list/-/list-0.5.0.tgz#6ab4e1789d037af43f3d01012d2533c7c94daf15"
+  integrity sha512-TYXe4FtNL7Lk3XDEhPyUbT0Pb1TU58qZywGCdrtuRjPnF4oDvRXgg9EhYWfHzYwdsyhNgaHId+Fq41CjrwTMYg==
+  dependencies:
+    "@lexical/utils" "0.5.0"
+
+"@lexical/list@0.6.3":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@lexical/list/-/list-0.6.3.tgz#6389d051549860b53b93f53d537e116150ba20c7"
+  integrity sha512-zrQwX9J9hmLRjh4VkDykiv4P7et86ez85wAcvcoZNSwRGdLRMDxJLOyzJI6njr3CrebEKzHWVCsEcpn5T8bZcw==
+  dependencies:
+    "@lexical/utils" "0.6.3"
+
+"@lexical/mark@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/mark/-/mark-0.5.0.tgz#59c2a2a9f0ecfa063d48ce6f4a50e6d8bc6fcae1"
+  integrity sha512-leeqegWD4hqUdfYNsxB5iwsWozX2oc6mnJzcJfR4UB3Ksr0zH2xHc/z3Zp+CTeGuK5Tzppq5yGS+4cQ5xNpVgQ==
+  dependencies:
+    "@lexical/utils" "0.5.0"
+
+"@lexical/markdown@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/markdown/-/markdown-0.5.0.tgz#3424a98e8600bc719f99bb4ab2484f0cf0e3c0f7"
+  integrity sha512-02RLx7PdVzvYxvx65FTbXkW6KcjQZ1waAaMDNKdtBV9r9Mv2Y2XunCUjErYHQ1JN9JkGGv0+JuliRT7qZTsF+Q==
+  dependencies:
+    "@lexical/code" "0.5.0"
+    "@lexical/link" "0.5.0"
+    "@lexical/list" "0.5.0"
+    "@lexical/rich-text" "0.5.0"
+    "@lexical/text" "0.5.0"
+    "@lexical/utils" "0.5.0"
+
+"@lexical/offset@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/offset/-/offset-0.5.0.tgz#445aae1c74198dd4ed7d59669735925621139e0a"
+  integrity sha512-ie4AFbvtt0CFBqaMcb0/gUuhoTt+YwbFXPFo1hW+oDVpmo3rJsEJKVsHhftBvHIP+/G5QlgPIhVmnlcSvEteTw==
+
+"@lexical/overflow@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/overflow/-/overflow-0.5.0.tgz#70daabdb96a3de9bf2f052ab2e38917aaf6e3b18"
+  integrity sha512-N+BQvgODU9lS7VK4FlxIRhGeASwsxfdkECtZ5iomHfqqNEI0WPLHbCTCkwS10rjfH1NrkXC314Y0SG2F7Ncv9Q==
+
+"@lexical/plain-text@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/plain-text/-/plain-text-0.5.0.tgz#385ac7c67b34116578e45fe34cca41e9f62cbcad"
+  integrity sha512-t1rnVnSXbPs9jLN/36/xZLNAlF9jwv8rSh6GHsjRIYiWX/MovNmgPmhNq/nkc+gRFZ2FKTFjdz3UeAUF4xQZMw==
+
+"@lexical/react@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/react/-/react-0.5.0.tgz#f227dd71f95e49bf817d648b9ffd5a31850876bc"
+  integrity sha512-bba0KXslxjf6M8XXJhx1rsrq9UV/6eo73WCZel2K+tGz8NEn1HCRTebQoebmRikzEQatEa3SoB6R47drMlk7Yw==
+  dependencies:
+    "@lexical/clipboard" "0.5.0"
+    "@lexical/code" "0.5.0"
+    "@lexical/dragon" "0.5.0"
+    "@lexical/hashtag" "0.5.0"
+    "@lexical/history" "0.5.0"
+    "@lexical/link" "0.5.0"
+    "@lexical/list" "0.5.0"
+    "@lexical/mark" "0.5.0"
+    "@lexical/markdown" "0.5.0"
+    "@lexical/overflow" "0.5.0"
+    "@lexical/plain-text" "0.5.0"
+    "@lexical/rich-text" "0.5.0"
+    "@lexical/selection" "0.5.0"
+    "@lexical/table" "0.5.0"
+    "@lexical/text" "0.5.0"
+    "@lexical/utils" "0.5.0"
+    "@lexical/yjs" "0.5.0"
+
+"@lexical/rich-text@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/rich-text/-/rich-text-0.5.0.tgz#9b7ddacdd74a49761f15486ed2846c5117a55d14"
+  integrity sha512-JhgMn70K410j3T/2WefPpEswZ+hWF3aJMNu7zkrCf2wB+KdrrGYoeNSZUzg2r4e6BuJgS117KlD99+MDnokCuw==
+
+"@lexical/selection@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/selection/-/selection-0.5.0.tgz#fe94f06fb17d9f5848921a0bbce10774398d3486"
+  integrity sha512-6I5qlqkYDIbDZPGwSOuvpWQUrqMY6URaKwrWsijQZMnNNKscGpC7IKb7sSDKn6YkLm7tuqig3hf2p+6hshkyWg==
+
+"@lexical/table@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/table/-/table-0.5.0.tgz#cf33fac7c2e0b520ab4747f9322cce434d117cb6"
+  integrity sha512-VNHWSsTFDSHNzLdQOR9qgKx4tvTuiDz6w0GfwBnMP4Ro2iKKtNowmZO4wDEZtVlUHvLMuOGuYqipOtKEDKbD4w==
+  dependencies:
+    "@lexical/utils" "0.5.0"
+
+"@lexical/table@0.6.3":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@lexical/table/-/table-0.6.3.tgz#10eb7f1edd0269da18352145854ba0fc41d709f1"
+  integrity sha512-7ces57Y9wBwr2UXccXguyFC87QF6epdp2EZybb8yVEoWvMM5z51CnWELEbADYv5lnevPS2LC8LtJV3v1iSPZbA==
+  dependencies:
+    "@lexical/utils" "0.6.3"
+
+"@lexical/text@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/text/-/text-0.5.0.tgz#803e34d9b1e2430e8062d2db50c7452d4e03c86e"
+  integrity sha512-RqhOBU2Ecg0WVW8p1d3OB2a8sQyvh3suADdr7We50+Dn/k1M+jhKVWiQnf07ve4/yqYTj6/9/8AAg7kuNS2P/A==
+
+"@lexical/utils@0.5.0", "@lexical/utils@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/utils/-/utils-0.5.0.tgz#4f03e8090e65cde5e81801ab08a2450e2e03733a"
+  integrity sha512-FhQ+thPFTOyBxyRGcd3yJuYh/rvD8ro43DaelWD1KpSlwQ/YuWpdxsSuMqJ32ERpl+bmPPFP2kjkBofxSw1Quw==
+  dependencies:
+    "@lexical/list" "0.5.0"
+    "@lexical/table" "0.5.0"
+
+"@lexical/utils@0.6.3":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@lexical/utils/-/utils-0.6.3.tgz#85276f9ef095d23634cb3f2d059f5781cee656ec"
+  integrity sha512-LijfKzH9Fdl30eZ/fWDigLsRPs/rz8sZAnRg6UsJGKR1SS3PeWLoO4RRWhnNzpMypVX8UdvbKv1DxMjQn3d/kw==
+  dependencies:
+    "@lexical/list" "0.6.3"
+    "@lexical/table" "0.6.3"
+
+"@lexical/yjs@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@lexical/yjs/-/yjs-0.5.0.tgz#a6a6e12f5eceaa5a37ae7999b97ba8ce217987b6"
+  integrity sha512-2io4GqnRoSh6Nu9bzsDOlwPFJYjXZ9SdgU4ZioH2VvyW4wVstd+ZF2QVcUJlhuwgQr6DzuvM/pqN914IufLzpw==
+  dependencies:
+    "@lexical/offset" "0.5.0"
+
 "@next/env@12.2.2":
   version "12.2.2"
   resolved "https://registry.npmjs.org/@next/env/-/env-12.2.2.tgz"
@@ -1424,6 +1605,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lexical@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/lexical/-/lexical-0.5.0.tgz#03a8abc816f6d922384ecd01bd14ed36a1ea4d63"
+  integrity sha512-J0cFuNPQQY5P9W5XW2/xgqp5W0eEQ2rxShLf8eevLvxFWsPSY3zjg3RCzTHyheSiGBBjKDIaM4gxtO8eNeJr2A==
+
 lilconfig@^2.0.5, lilconfig@^2.0.6:
   version "2.0.6"
   resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz"
@@ -1769,6 +1955,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prismjs@^1.27.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"