fix: project states fixes (#2731)

* fix: project states fixes

* fix: states fixes

* fix: formating all files

packages/editor/rich-text-editor/src/ui/extensions/index.tsx

@@ -1,7 +1,7 @@
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Placeholder from "@tiptap/extension-placeholder";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
-import { common, createLowlight } from 'lowlight'
+import { common, createLowlight } from "lowlight";
 import { InputRule } from "@tiptap/core";
 
 import ts from "highlight.js/lib/languages/typescript";
@@ -9,51 +9,53 @@ import ts from "highlight.js/lib/languages/typescript";
 import SlashCommand from "./slash-command";
 import { UploadImage } from "../";
 
-const lowlight = createLowlight(common)
+const lowlight = createLowlight(common);
 lowlight.register("ts", ts);
 
 export const RichTextEditorExtensions = (
   uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ) => [
-    HorizontalRule.extend({
-      addInputRules() {
-        return [
-          new InputRule({
-            find: /^(?:---|—-|___\s|\*\*\*\s)$/,
-            handler: ({ state, range, commands }) => {
-              commands.splitBlock();
+  HorizontalRule.extend({
+    addInputRules() {
+      return [
+        new InputRule({
+          find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+          handler: ({ state, range, commands }) => {
+            commands.splitBlock();
 
-              const attributes = {};
-              const { tr } = state;
-              const start = range.from;
-              const end = range.to;
-              // @ts-ignore
-              tr.replaceWith(start - 1, end, this.type.create(attributes));
-            },
-          }),
-        ];
-      },
-    }).configure({
-      HTMLAttributes: {
-        class: "mb-6 border-t border-custom-border-300",
-      },
-    }),
-    SlashCommand(uploadFile, setIsSubmitting),
-    CodeBlockLowlight.configure({
-      lowlight,
-    }),
-    Placeholder.configure({
-      placeholder: ({ node }) => {
-        if (node.type.name === "heading") {
-          return `Heading ${node.attrs.level}`;
-        }
-        if (node.type.name === "image" || node.type.name === "table") {
-          return "";
-        }
+            const attributes = {};
+            const { tr } = state;
+            const start = range.from;
+            const end = range.to;
+            // @ts-ignore
+            tr.replaceWith(start - 1, end, this.type.create(attributes));
+          },
+        }),
+      ];
+    },
+  }).configure({
+    HTMLAttributes: {
+      class: "mb-6 border-t border-custom-border-300",
+    },
+  }),
+  SlashCommand(uploadFile, setIsSubmitting),
+  CodeBlockLowlight.configure({
+    lowlight,
+  }),
+  Placeholder.configure({
+    placeholder: ({ node }) => {
+      if (node.type.name === "heading") {
+        return `Heading ${node.attrs.level}`;
+      }
+      if (node.type.name === "image" || node.type.name === "table") {
+        return "";
+      }
 
-        return "Press '/' for commands...";
-      },
-      includeChildren: true,
-    }),
-  ];
+      return "Press '/' for commands...";
+    },
+    includeChildren: true,
+  }),
+];

packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx

@@ -1,7 +1,19 @@
 import { Editor } from "@tiptap/core";
 import { Check, Trash } from "lucide-react";
-import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
-import { cn, isValidHttpUrl, setLinkEditor, unsetLinkEditor, } from "@plane/editor-core";
+import {
+  Dispatch,
+  FC,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import {
+  cn,
+  isValidHttpUrl,
+  setLinkEditor,
+  unsetLinkEditor,
+} from "@plane/editor-core";
 
 interface LinkSelectorProps {
   editor: Editor;
@@ -9,7 +21,11 @@ interface LinkSelectorProps {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+export const LinkSelector: FC<LinkSelectorProps> = ({
+  editor,
+  isOpen,
+  setIsOpen,
+}) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const onLinkSubmit = useCallback(() => {
@@ -31,7 +47,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
         type="button"
         className={cn(
           "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
-          { "bg-custom-background-100": isOpen }
+          { "bg-custom-background-100": isOpen },
         )}
         onClick={() => {
           setIsOpen(!isOpen);

packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx

@@ -1,10 +1,16 @@
-import { BulletListItem, cn, CodeItem, HeadingOneItem, HeadingThreeItem, HeadingTwoItem, NumberedListItem, QuoteItem, TodoListItem } from "@plane/editor-core";
-import { Editor } from "@tiptap/react";
 import {
-  Check,
-  ChevronDown,
-  TextIcon,
-} from "lucide-react";
+  BulletListItem,
+  cn,
+  CodeItem,
+  HeadingOneItem,
+  HeadingThreeItem,
+  HeadingTwoItem,
+  NumberedListItem,
+  QuoteItem,
+  TodoListItem,
+} from "@plane/editor-core";
+import { Editor } from "@tiptap/react";
+import { Check, ChevronDown, TextIcon } from "lucide-react";
 import { Dispatch, FC, SetStateAction } from "react";
 
 import { BubbleMenuItem } from ".";
@@ -15,12 +21,17 @@ interface NodeSelectorProps {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
+export const NodeSelector: FC<NodeSelectorProps> = ({
+  editor,
+  isOpen,
+  setIsOpen,
+}) => {
   const items: BubbleMenuItem[] = [
     {
       name: "Text",
       icon: TextIcon,
-      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      command: () =>
+        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
       isActive: () =>
         editor.isActive("paragraph") &&
         !editor.isActive("bulletList") &&
@@ -63,7 +74,10 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
               }}
               className={cn(
                 "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
-                { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name }
+                {
+                  "bg-custom-primary-100/5 text-custom-text-100":
+                    activeItem.name === item.name,
+                },
               )}
             >
               <div className="flex items-center space-x-2">

packages/editor/rich-text-editor/src/ui/read-only/index.tsx

@@ -1,6 +1,11 @@
-"use client"
-import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from '@plane/editor-core';
-import * as React from 'react';
+"use client";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useReadOnlyEditor,
+} from "@plane/editor-core";
+import * as React from "react";
 
 interface IRichTextReadOnlyEditor {
   value: string;
@@ -35,23 +40,31 @@ const RichReadOnlyEditor = ({
     mentionHighlights,
   });
 
-  const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
 
   if (!editor) return null;
 
   return (
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
       </div>
-    </EditorContainer >
+    </EditorContainer>
   );
 };
 
-const RichReadOnlyEditorWithRef = React.forwardRef<EditorHandle, IRichTextReadOnlyEditor>((props, ref) => (
-  <RichReadOnlyEditor {...props} forwardedRef={ref} />
-));
+const RichReadOnlyEditorWithRef = React.forwardRef<
+  EditorHandle,
+  IRichTextReadOnlyEditor
+>((props, ref) => <RichReadOnlyEditor {...props} forwardedRef={ref} />);
 
 RichReadOnlyEditorWithRef.displayName = "RichReadOnlyEditorWithRef";
 
-export { RichReadOnlyEditor , RichReadOnlyEditorWithRef };
+export { RichReadOnlyEditor, RichReadOnlyEditorWithRef };