fix: project states fixes (#2731)

* fix: project states fixes

* fix: states fixes

* fix: formating all files

CONTRIBUTING.md

@@ -8,8 +8,8 @@ Before submitting a new issue, please search the [issues](https://github.com/mak
 
 While we want to fix all the [issues](https://github.com/makeplane/plane/issues), before fixing a bug we need to be able to reproduce and confirm it. Please provide us with a minimal reproduction scenario using a repository or [Gist](https://gist.github.com/). Having a live, reproducible scenario gives us the information without asking questions back & forth with additional questions like:
 
--   3rd-party libraries being used and their versions
--   a use-case that fails
+- 3rd-party libraries being used and their versions
+- a use-case that fails
 
 Without said minimal reproduction, we won't be able to investigate all [issues](https://github.com/makeplane/plane/issues), and the issue might not be resolved.
 
@@ -19,10 +19,10 @@ You can open a new issue with this [issue form](https://github.com/makeplane/pla
 
 ### Requirements
 
--   Node.js version v16.18.0
--   Python version 3.8+
--   Postgres version v14
--   Redis version v6.2.7
+- Node.js version v16.18.0
+- Python version 3.8+
+- Postgres version v14
+- Redis version v6.2.7
 
 ### Setup the project
 
@@ -81,8 +81,8 @@ If you would like to _implement_ it, an issue with your proposal must be submitt
 
 To ensure consistency throughout the source code, please keep these rules in mind as you are working:
 
--   All features or bug fixes must be tested by one or more specs (unit-tests).
--   We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
+- All features or bug fixes must be tested by one or more specs (unit-tests).
+- We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
 
 ## Need help? Questions and suggestions
 
@@ -90,11 +90,11 @@ Questions, suggestions, and thoughts are most welcome. We can also be reached in
 
 ## Ways to contribute
 
--   Try Plane Cloud and the self hosting platform and give feedback
--   Add new integrations
--   Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose)
--   Share your thoughts and suggestions with us
--   Help create tutorials and blog posts
--   Request a feature by submitting a proposal
--   Report a bug
--   **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.
+- Try Plane Cloud and the self hosting platform and give feedback
+- Add new integrations
+- Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose)
+- Share your thoughts and suggestions with us
+- Help create tutorials and blog posts
+- Request a feature by submitting a proposal
+- Report a bug
+- **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.

ENV_SETUP.md

@@ -1,8 +1,10 @@
 # Environment Variables
+
 ​
 Environment variables are distributed in various files. Please refer them carefully.
 
 ## {PROJECT_FOLDER}/.env
+
 File is available in the project root folder​
 
 ```
@@ -41,25 +43,37 @@ USE_MINIO=1
 # Nginx Configuration
 NGINX_PORT=80
 ```
+
 ​
+
 ## {PROJECT_FOLDER}/web/.env.example
+
 ​
+
 ```
 # Enable/Disable OAUTH - default 0 for selfhosted instance
 NEXT_PUBLIC_ENABLE_OAUTH=0
 # Public boards deploy URL
 NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
 ```
+
 ​
+
 ## {PROJECT_FOLDER}/spaces/.env.example
+
 ​
+
 ```
 # Flag to toggle OAuth
 NEXT_PUBLIC_ENABLE_OAUTH=0
 ```
+
 ​
+
 ## {PROJECT_FOLDER}/apiserver/.env
+
 ​
+
 ```
 # Backend
 # Debug value for api server use it as 0 for production use
@@ -126,7 +140,9 @@ ENABLE_SIGNUP="1"
 # Email Redirection URL
 WEB_URL="http://localhost"
 ```
+
 ## Updates​
+
 - The environment variable NEXT_PUBLIC_API_BASE_URL has been removed from both the web and space projects.
 - The naming convention for containers and images has been updated.
 - The plane-worker image will no longer be maintained, as it has been merged with plane-backend.

packages/editor/core/Readme.md

@@ -19,27 +19,27 @@ This allows for extensive customization and flexibility in the Editors created u
 
 1. useEditor - A hook that you can use to extend the Plane editor.
 
-    | Prop | Type | Description |
-    | --- | --- | --- |
-    | `extensions` | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
-    | `editorProps` | `EditorProps` | Extend the editor props by passing in a custom props object |
-    | `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
-    | `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
-    | `value` | `html string` | The initial content of the editor. |
-    | `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
-    | `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
-    | `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
-    | `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert in case of content not being "saved". |
-    | `forwardedRef` | `any` | Pass this in whenever you want to control the editor's state from an external component |
+   | Prop                      | Type                                                             | Description                                                                                                                                                             |
+   | ------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | `extensions`              | `Extension[]`                                                    | An array of custom extensions you want to add into the editor to extend it's core features                                                                              |
+   | `editorProps`             | `EditorProps`                                                    | Extend the editor props by passing in a custom props object                                                                                                             |
+   | `uploadFile`              | `(file: File) => Promise<string>`                                | A function that handles file upload. It takes a file as input and handles the process of uploading that file.                                                           |
+   | `deleteFile`              | `(assetUrlWithWorkspaceId: string) => Promise<any>`              | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image.                                      |
+   | `value`                   | `html string`                                                    | The initial content of the editor.                                                                                                                                      |
+   | `debouncedUpdatesEnabled` | `boolean`                                                        | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+   | `onChange`                | `(json: any, html: string) => void`                              | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats.                                        |
+   | `setIsSubmitting`         | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status.                                                                                                                |
+   | `setShouldShowAlert`      | `(showAlert: boolean) => void`                                   | This function is used to show or hide an alert in case of content not being "saved".                                                                                    |
+   | `forwardedRef`            | `any`                                                            | Pass this in whenever you want to control the editor's state from an external component                                                                                 |
 
 2. useReadOnlyEditor - A hook that can be used to extend a Read Only instance of the core editor.
 
-    | Prop | Type | Description |
-    | --- | --- | --- |
-    | `value` | `string` | The initial content of the editor. |
-    | `forwardedRef` | `any` | Pass this in whenever you want to control the editor's state from an external component |
-    | `extensions` | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
-    | `editorProps` | `EditorProps` | Extend the editor props by passing in a custom props object |
+   | Prop           | Type          | Description                                                                                |
+   | -------------- | ------------- | ------------------------------------------------------------------------------------------ |
+   | `value`        | `string`      | The initial content of the editor.                                                         |
+   | `forwardedRef` | `any`         | Pass this in whenever you want to control the editor's state from an external component    |
+   | `extensions`   | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
+   | `editorProps`  | `EditorProps` | Extend the editor props by passing in a custom props object                                |
 
 3. Items and Commands - H1, H2, H3, task list, quote, code block, etc's methods.
 
@@ -51,7 +51,11 @@ This allows for extensive customization and flexibility in the Editors created u
 5. Extending with Custom Styles
 
 ```ts
-const customEditorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+const customEditorClassNames = getEditorClassNames({
+  noBorder,
+  borderOnFocus,
+  customClassName,
+});
 ```
 
 ## Core features

packages/editor/core/src/lib/editor-commands.ts

@@ -3,18 +3,36 @@ import { UploadImage } from "../types/upload-image";
 import { startImageUpload } from "../ui/plugins/upload-image";
 
 export const toggleHeadingOne = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
-  else editor.chain().focus().toggleHeading({ level: 1 }).run()
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 1 })
+      .run();
+  else editor.chain().focus().toggleHeading({ level: 1 }).run();
 };
 
 export const toggleHeadingTwo = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
-  else editor.chain().focus().toggleHeading({ level: 2 }).run()
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 2 })
+      .run();
+  else editor.chain().focus().toggleHeading({ level: 2 }).run();
 };
 
 export const toggleHeadingThree = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
-  else editor.chain().focus().toggleHeading({ level: 3 }).run()
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 3 })
+      .run();
+  else editor.chain().focus().toggleHeading({ level: 3 }).run();
 };
 
 export const toggleBold = (editor: Editor, range?: Range) => {
@@ -37,7 +55,8 @@ export const toggleCode = (editor: Editor, range?: Range) => {
   else editor.chain().focus().toggleCode().run();
 };
 export const toggleOrderedList = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+  if (range)
+    editor.chain().focus().deleteRange(range).toggleOrderedList().run();
   else editor.chain().focus().toggleOrderedList().run();
 };
 
@@ -48,7 +67,7 @@ export const toggleBulletList = (editor: Editor, range?: Range) => {
 
 export const toggleTaskList = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).toggleTaskList().run();
-  else editor.chain().focus().toggleTaskList().run()
+  else editor.chain().focus().toggleTaskList().run();
 };
 
 export const toggleStrike = (editor: Editor, range?: Range) => {
@@ -57,13 +76,37 @@ export const toggleStrike = (editor: Editor, range?: Range) => {
 };
 
 export const toggleBlockquote = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run();
-  else editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run();
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .toggleNode("paragraph", "paragraph")
+      .toggleBlockquote()
+      .run();
+  else
+    editor
+      .chain()
+      .focus()
+      .toggleNode("paragraph", "paragraph")
+      .toggleBlockquote()
+      .run();
 };
 
 export const insertTableCommand = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
-  else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run();
+  else
+    editor
+      .chain()
+      .focus()
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run();
 };
 
 export const unsetLinkEditor = (editor: Editor) => {
@@ -74,7 +117,14 @@ export const setLinkEditor = (editor: Editor, url: string) => {
   editor.chain().focus().setLink({ href: url }).run();
 };
 
-export const insertImageCommand = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, range?: Range) => {
+export const insertImageCommand = (
+  editor: Editor,
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
+  range?: Range,
+) => {
   if (range) editor.chain().focus().deleteRange(range).run();
   const input = document.createElement("input");
   input.type = "file";
@@ -88,4 +138,3 @@ export const insertImageCommand = (editor: Editor, uploadFile: UploadImage, setI
   };
   input.click();
 };
-

packages/editor/core/src/lib/utils.ts

@@ -6,19 +6,24 @@ interface EditorClassNames {
   customClassName?: string;
 }
 
-export const getEditorClassNames = ({ noBorder, borderOnFocus, customClassName }: EditorClassNames) => cn(
-  'relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md',
-  noBorder ? '' : 'border border-custom-border-200',
-  borderOnFocus ? 'focus:border border-custom-border-300' : 'focus:border-0',
-  customClassName
-);
+export const getEditorClassNames = ({
+  noBorder,
+  borderOnFocus,
+  customClassName,
+}: EditorClassNames) =>
+  cn(
+    "relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md",
+    noBorder ? "" : "border border-custom-border-200",
+    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0",
+    customClassName,
+  );
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
 export const findTableAncestor = (
-  node: Node | null
+  node: Node | null,
 ): HTMLTableElement | null => {
   while (node !== null && node.nodeName !== "TABLE") {
     node = node.parentNode;
@@ -27,10 +32,10 @@ export const findTableAncestor = (
 };
 
 export const getTrimmedHTML = (html: string) => {
-  html = html.replace(/^(<p><\/p>)+/, '');
-  html = html.replace(/(<p><\/p>)+$/, '');
+  html = html.replace(/^(<p><\/p>)+/, "");
+  html = html.replace(/(<p><\/p>)+$/, "");
   return html;
-}
+};
 
 export const isValidHttpUrl = (string: string): boolean => {
   let url: URL;
@@ -42,4 +47,4 @@ export const isValidHttpUrl = (string: string): boolean => {
   }
 
   return url.protocol === "http:" || url.protocol === "https:";
-}
+};

packages/editor/core/src/types/mention-suggestion.ts

@@ -1,10 +1,10 @@
 export type IMentionSuggestion = {
-    id: string;
-    type: string;
-    avatar: string;
-    title: string;
-    subtitle: string;
-    redirect_uri: string;
-}
+  id: string;
+  type: string;
+  avatar: string;
+  title: string;
+  subtitle: string;
+  redirect_uri: string;
+};
 
-export type IMentionHighlight = string
+export type IMentionHighlight = string;

packages/editor/core/src/ui/components/editor-content.tsx

@@ -8,10 +8,16 @@ interface EditorContentProps {
   children?: ReactNode;
 }
 
-export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = '', children }: EditorContentProps) => (
+export const EditorContentWrapper = ({
+  editor,
+  editorContentCustomClassNames = "",
+  children,
+}: EditorContentProps) => (
   <div className={`contentEditor ${editorContentCustomClassNames}`}>
     <EditorContent editor={editor} />
-    {(editor?.isActive("image") && editor?.isEditable) && <ImageResizer editor={editor} />}
+    {editor?.isActive("image") && editor?.isEditable && (
+      <ImageResizer editor={editor} />
+    )}
     {children}
   </div>
 );

packages/editor/core/src/ui/extensions/image/image-resize.tsx

@@ -3,7 +3,9 @@ import Moveable from "react-moveable";
 
 export const ImageResizer = ({ editor }: { editor: Editor }) => {
   const updateMediaSize = () => {
-    const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement;
+    const imageInfo = document.querySelector(
+      ".ProseMirror-selectednode",
+    ) as HTMLImageElement;
     if (imageInfo) {
       const selection = editor.state.selection;
       editor.commands.setImage({

packages/editor/core/src/ui/extensions/table/table-cell/index.ts

@@ -1 +1 @@
-export { default as default } from "./table-cell"
+export { default as default } from "./table-cell";

packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts

@@ -1,7 +1,7 @@
-import { mergeAttributes, Node } from "@tiptap/core"
+import { mergeAttributes, Node } from "@tiptap/core";
 
 export interface TableCellOptions {
-  HTMLAttributes: Record<string, any>
+  HTMLAttributes: Record<string, any>;
 }
 
 export default Node.create<TableCellOptions>({
@@ -9,8 +9,8 @@ export default Node.create<TableCellOptions>({
 
   addOptions() {
     return {
-      HTMLAttributes: {}
-    }
+      HTMLAttributes: {},
+    };
   },
 
   content: "paragraph+",
@@ -18,24 +18,24 @@ export default Node.create<TableCellOptions>({
   addAttributes() {
     return {
       colspan: {
-        default: 1
+        default: 1,
       },
       rowspan: {
-        default: 1
+        default: 1,
       },
       colwidth: {
         default: null,
         parseHTML: (element) => {
-          const colwidth = element.getAttribute("colwidth")
-          const value = colwidth ? [parseInt(colwidth, 10)] : null
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth ? [parseInt(colwidth, 10)] : null;
 
-          return value
-        }
+          return value;
+        },
       },
       background: {
-        default: "none"
-      }
-    }
+        default: "none",
+      },
+    };
   },
 
   tableRole: "cell",
@@ -43,16 +43,16 @@ export default Node.create<TableCellOptions>({
   isolating: true,
 
   parseHTML() {
-    return [{ tag: "td" }]
+    return [{ tag: "td" }];
   },
 
   renderHTML({ node, HTMLAttributes }) {
     return [
       "td",
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        style: `background-color: ${node.attrs.background}`
+        style: `background-color: ${node.attrs.background}`,
       }),
-      0
-    ]
-  }
-})
+      0,
+    ];
+  },
+});

packages/editor/core/src/ui/extensions/table/table-header/index.ts

@@ -1 +1 @@
-export { default as default } from "./table-header"
+export { default as default } from "./table-header";

packages/editor/core/src/ui/extensions/table/table-header/table-header.ts

@@ -1,15 +1,15 @@
-import { mergeAttributes, Node } from "@tiptap/core"
+import { mergeAttributes, Node } from "@tiptap/core";
 
 export interface TableHeaderOptions {
-  HTMLAttributes: Record<string, any>
+  HTMLAttributes: Record<string, any>;
 }
 export default Node.create<TableHeaderOptions>({
   name: "tableHeader",
 
   addOptions() {
     return {
-      HTMLAttributes: {}
-    }
+      HTMLAttributes: {},
+    };
   },
 
   content: "paragraph+",
@@ -17,24 +17,24 @@ export default Node.create<TableHeaderOptions>({
   addAttributes() {
     return {
       colspan: {
-        default: 1
+        default: 1,
       },
       rowspan: {
-        default: 1
+        default: 1,
       },
       colwidth: {
         default: null,
         parseHTML: (element) => {
-          const colwidth = element.getAttribute("colwidth")
-          const value = colwidth ? [parseInt(colwidth, 10)] : null
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth ? [parseInt(colwidth, 10)] : null;
 
-          return value
-        }
+          return value;
+        },
       },
       background: {
-        default: "rgb(var(--color-primary-100))"
-      }
-    }
+        default: "rgb(var(--color-primary-100))",
+      },
+    };
   },
 
   tableRole: "header_cell",
@@ -42,16 +42,16 @@ export default Node.create<TableHeaderOptions>({
   isolating: true,
 
   parseHTML() {
-    return [{ tag: "th" }]
+    return [{ tag: "th" }];
   },
 
   renderHTML({ node, HTMLAttributes }) {
     return [
       "th",
       mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        style: `background-color: ${node.attrs.background}`
+        style: `background-color: ${node.attrs.background}`,
       }),
-      0
-    ]
-  }
-})
+      0,
+    ];
+  },
+});

packages/editor/core/src/ui/extensions/table/table-row/index.ts

@@ -1 +1 @@
-export { default as default } from "./table-row"
+export { default as default } from "./table-row";

packages/editor/core/src/ui/extensions/table/table-row/table-row.ts

@@ -1,31 +1,31 @@
-import { mergeAttributes, Node } from "@tiptap/core"
+import { mergeAttributes, Node } from "@tiptap/core";
 
 export interface TableRowOptions {
-    HTMLAttributes: Record<string, any>
+  HTMLAttributes: Record<string, any>;
 }
 
 export default Node.create<TableRowOptions>({
-    name: "tableRow",
+  name: "tableRow",
 
-    addOptions() {
-        return {
-            HTMLAttributes: {}
-        }
-    },
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
 
-    content: "(tableCell | tableHeader)*",
+  content: "(tableCell | tableHeader)*",
 
-    tableRole: "row",
+  tableRole: "row",
 
-    parseHTML() {
-        return [{ tag: "tr" }]
-    },
+  parseHTML() {
+    return [{ tag: "tr" }];
+  },
 
-    renderHTML({ HTMLAttributes }) {
-        return [
-            "tr",
-            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-            0
-        ]
-    }
-})
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "tr",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+});

packages/editor/core/src/ui/extensions/table/table/icons.ts

@@ -38,7 +38,7 @@ const icons = {
     />
   </svg>
 `,
-  insertBottomTableIcon:`<svg
+  insertBottomTableIcon: `<svg
     xmlns="http://www.w3.org/2000/svg"
     width={24}
     height={24}

packages/editor/core/src/ui/extensions/table/table/index.ts

@@ -1 +1 @@
-export { default as default } from "./table"
+export { default as default } from "./table";

packages/editor/core/src/ui/extensions/table/table/table-controls.ts

@@ -68,7 +68,12 @@ export function tableControls() {
 
         const { hoveredTable, hoveredCell } = pluginState.values;
         const docSize = state.doc.content.size;
-        if (hoveredTable && hoveredCell && hoveredTable.pos < docSize && hoveredCell.pos < docSize) {
+        if (
+          hoveredTable &&
+          hoveredCell &&
+          hoveredTable.pos < docSize &&
+          hoveredCell.pos < docSize
+        ) {
           const decorations = [
             Decoration.node(
               hoveredTable.pos,

packages/editor/core/src/ui/extensions/table/table/table.ts

@@ -1,298 +1,312 @@
-import { TextSelection } from "@tiptap/pm/state"
+import { TextSelection } from "@tiptap/pm/state";
 
-import { callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig } from "@tiptap/core"
 import {
-    addColumnAfter,
-    addColumnBefore,
-    addRowAfter,
-    addRowBefore,
-    CellSelection,
-    columnResizing,
-    deleteColumn,
-    deleteRow,
-    deleteTable,
-    fixTables,
-    goToNextCell,
-    mergeCells,
-    setCellAttr,
-    splitCell,
-    tableEditing,
-    toggleHeader,
-    toggleHeaderCell
-} from "@tiptap/prosemirror-tables"
+  callOrReturn,
+  getExtensionField,
+  mergeAttributes,
+  Node,
+  ParentConfig,
+} from "@tiptap/core";
+import {
+  addColumnAfter,
+  addColumnBefore,
+  addRowAfter,
+  addRowBefore,
+  CellSelection,
+  columnResizing,
+  deleteColumn,
+  deleteRow,
+  deleteTable,
+  fixTables,
+  goToNextCell,
+  mergeCells,
+  setCellAttr,
+  splitCell,
+  tableEditing,
+  toggleHeader,
+  toggleHeaderCell,
+} from "@tiptap/prosemirror-tables";
 
-import { tableControls } from "./table-controls"
-import { TableView } from "./table-view"
-import { createTable } from "./utilities/create-table"
-import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected"
+import { tableControls } from "./table-controls";
+import { TableView } from "./table-view";
+import { createTable } from "./utilities/create-table";
+import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected";
 
 export interface TableOptions {
-    HTMLAttributes: Record<string, any>
-    resizable: boolean
-    handleWidth: number
-    cellMinWidth: number
-    lastColumnResizable: boolean
-    allowTableNodeSelection: boolean
+  HTMLAttributes: Record<string, any>;
+  resizable: boolean;
+  handleWidth: number;
+  cellMinWidth: number;
+  lastColumnResizable: boolean;
+  allowTableNodeSelection: boolean;
 }
 
 declare module "@tiptap/core" {
-    interface Commands<ReturnType> {
-        table: {
-            insertTable: (options?: {
-                rows?: number
-                cols?: number
-                withHeaderRow?: boolean
-            }) => ReturnType
-            addColumnBefore: () => ReturnType
-            addColumnAfter: () => ReturnType
-            deleteColumn: () => ReturnType
-            addRowBefore: () => ReturnType
-            addRowAfter: () => ReturnType
-            deleteRow: () => ReturnType
-            deleteTable: () => ReturnType
-            mergeCells: () => ReturnType
-            splitCell: () => ReturnType
-            toggleHeaderColumn: () => ReturnType
-            toggleHeaderRow: () => ReturnType
-            toggleHeaderCell: () => ReturnType
-            mergeOrSplit: () => ReturnType
-            setCellAttribute: (name: string, value: any) => ReturnType
-            goToNextCell: () => ReturnType
-            goToPreviousCell: () => ReturnType
-            fixTables: () => ReturnType
-            setCellSelection: (position: {
-                anchorCell: number
-                headCell?: number
-            }) => ReturnType
-        }
-    }
+  interface Commands<ReturnType> {
+    table: {
+      insertTable: (options?: {
+        rows?: number;
+        cols?: number;
+        withHeaderRow?: boolean;
+      }) => ReturnType;
+      addColumnBefore: () => ReturnType;
+      addColumnAfter: () => ReturnType;
+      deleteColumn: () => ReturnType;
+      addRowBefore: () => ReturnType;
+      addRowAfter: () => ReturnType;
+      deleteRow: () => ReturnType;
+      deleteTable: () => ReturnType;
+      mergeCells: () => ReturnType;
+      splitCell: () => ReturnType;
+      toggleHeaderColumn: () => ReturnType;
+      toggleHeaderRow: () => ReturnType;
+      toggleHeaderCell: () => ReturnType;
+      mergeOrSplit: () => ReturnType;
+      setCellAttribute: (name: string, value: any) => ReturnType;
+      goToNextCell: () => ReturnType;
+      goToPreviousCell: () => ReturnType;
+      fixTables: () => ReturnType;
+      setCellSelection: (position: {
+        anchorCell: number;
+        headCell?: number;
+      }) => ReturnType;
+    };
+  }
 
-    interface NodeConfig<Options, Storage> {
-        tableRole?:
-            | string
-            | ((this: {
-                  name: string
-                  options: Options
-                  storage: Storage
-                  parent: ParentConfig<NodeConfig<Options>>["tableRole"]
-              }) => string)
-    }
+  interface NodeConfig<Options, Storage> {
+    tableRole?:
+      | string
+      | ((this: {
+          name: string;
+          options: Options;
+          storage: Storage;
+          parent: ParentConfig<NodeConfig<Options>>["tableRole"];
+        }) => string);
+  }
 }
 
 export default Node.create({
-    name: "table",
+  name: "table",
 
-    addOptions() {
-        return {
-            HTMLAttributes: {},
-            resizable: true,
-            handleWidth: 5,
-            cellMinWidth: 100,
-            lastColumnResizable: true,
-            allowTableNodeSelection: true
-        }
-    },
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      resizable: true,
+      handleWidth: 5,
+      cellMinWidth: 100,
+      lastColumnResizable: true,
+      allowTableNodeSelection: true,
+    };
+  },
 
-    content: "tableRow+",
+  content: "tableRow+",
 
-    tableRole: "table",
+  tableRole: "table",
 
-    isolating: true,
+  isolating: true,
 
-    group: "block",
+  group: "block",
 
-    allowGapCursor: false,
+  allowGapCursor: false,
 
-    parseHTML() {
-        return [{ tag: "table" }]
-    },
+  parseHTML() {
+    return [{ tag: "table" }];
+  },
 
-    renderHTML({ HTMLAttributes }) {
-        return [
-            "table",
-            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-            ["tbody", 0]
-        ]
-    },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "table",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      ["tbody", 0],
+    ];
+  },
 
-    addCommands() {
-        return {
-            insertTable:
-                ({ rows = 3, cols = 3, withHeaderRow = true} = {}) =>
-                ({ tr, dispatch, editor }) => {
-                    const node = createTable(
-                        editor.schema,
-                        rows,
-                        cols,
-                        withHeaderRow
-                    )
+  addCommands() {
+    return {
+      insertTable:
+        ({ rows = 3, cols = 3, withHeaderRow = true } = {}) =>
+        ({ tr, dispatch, editor }) => {
+          const node = createTable(editor.schema, rows, cols, withHeaderRow);
 
-                    if (dispatch) {
-                        const offset = tr.selection.anchor + 1
+          if (dispatch) {
+            const offset = tr.selection.anchor + 1;
 
-                        tr.replaceSelectionWith(node)
-                            .scrollIntoView()
-                            .setSelection(
-                                TextSelection.near(tr.doc.resolve(offset))
-                            )
-                    }
+            tr.replaceSelectionWith(node)
+              .scrollIntoView()
+              .setSelection(TextSelection.near(tr.doc.resolve(offset)));
+          }
 
-                    return true
-                },
-            addColumnBefore:
-                () =>
-                ({ state, dispatch }) => addColumnBefore(state, dispatch),
-            addColumnAfter:
-                () =>
-                ({ state, dispatch }) => addColumnAfter(state, dispatch),
-            deleteColumn:
-                () =>
-                ({ state, dispatch }) => deleteColumn(state, dispatch),
-            addRowBefore:
-                () =>
-                ({ state, dispatch }) => addRowBefore(state, dispatch),
-            addRowAfter:
-                () =>
-                ({ state, dispatch }) => addRowAfter(state, dispatch),
-            deleteRow:
-                () =>
-                ({ state, dispatch }) => deleteRow(state, dispatch),
-            deleteTable:
-                () =>
-                ({ state, dispatch }) => deleteTable(state, dispatch),
-            mergeCells:
-                () =>
-                ({ state, dispatch }) => mergeCells(state, dispatch),
-            splitCell:
-                () =>
-                ({ state, dispatch }) => splitCell(state, dispatch),
-            toggleHeaderColumn:
-                () =>
-                ({ state, dispatch }) => toggleHeader("column")(state, dispatch),
-            toggleHeaderRow:
-                () =>
-                ({ state, dispatch }) => toggleHeader("row")(state, dispatch),
-            toggleHeaderCell:
-                () =>
-                ({ state, dispatch }) => toggleHeaderCell(state, dispatch),
-            mergeOrSplit:
-                () =>
-                ({ state, dispatch }) => {
-                    if (mergeCells(state, dispatch)) {
-                        return true
-                    }
+          return true;
+        },
+      addColumnBefore:
+        () =>
+        ({ state, dispatch }) =>
+          addColumnBefore(state, dispatch),
+      addColumnAfter:
+        () =>
+        ({ state, dispatch }) =>
+          addColumnAfter(state, dispatch),
+      deleteColumn:
+        () =>
+        ({ state, dispatch }) =>
+          deleteColumn(state, dispatch),
+      addRowBefore:
+        () =>
+        ({ state, dispatch }) =>
+          addRowBefore(state, dispatch),
+      addRowAfter:
+        () =>
+        ({ state, dispatch }) =>
+          addRowAfter(state, dispatch),
+      deleteRow:
+        () =>
+        ({ state, dispatch }) =>
+          deleteRow(state, dispatch),
+      deleteTable:
+        () =>
+        ({ state, dispatch }) =>
+          deleteTable(state, dispatch),
+      mergeCells:
+        () =>
+        ({ state, dispatch }) =>
+          mergeCells(state, dispatch),
+      splitCell:
+        () =>
+        ({ state, dispatch }) =>
+          splitCell(state, dispatch),
+      toggleHeaderColumn:
+        () =>
+        ({ state, dispatch }) =>
+          toggleHeader("column")(state, dispatch),
+      toggleHeaderRow:
+        () =>
+        ({ state, dispatch }) =>
+          toggleHeader("row")(state, dispatch),
+      toggleHeaderCell:
+        () =>
+        ({ state, dispatch }) =>
+          toggleHeaderCell(state, dispatch),
+      mergeOrSplit:
+        () =>
+        ({ state, dispatch }) => {
+          if (mergeCells(state, dispatch)) {
+            return true;
+          }
 
-                    return splitCell(state, dispatch)
-                },
-            setCellAttribute:
-                (name, value) =>
-                ({ state, dispatch }) => setCellAttr(name, value)(state, dispatch),
-            goToNextCell:
-                () =>
-                ({ state, dispatch }) => goToNextCell(1)(state, dispatch),
-            goToPreviousCell:
-                () =>
-                ({ state, dispatch }) => goToNextCell(-1)(state, dispatch),
-            fixTables:
-                () =>
-                ({ state, dispatch }) => {
-                    if (dispatch) {
-                        fixTables(state)
-                    }
+          return splitCell(state, dispatch);
+        },
+      setCellAttribute:
+        (name, value) =>
+        ({ state, dispatch }) =>
+          setCellAttr(name, value)(state, dispatch),
+      goToNextCell:
+        () =>
+        ({ state, dispatch }) =>
+          goToNextCell(1)(state, dispatch),
+      goToPreviousCell:
+        () =>
+        ({ state, dispatch }) =>
+          goToNextCell(-1)(state, dispatch),
+      fixTables:
+        () =>
+        ({ state, dispatch }) => {
+          if (dispatch) {
+            fixTables(state);
+          }
 
-                    return true
-                },
-            setCellSelection:
-                (position) =>
-                ({ tr, dispatch }) => {
-                    if (dispatch) {
-                        const selection = CellSelection.create(
-                            tr.doc,
-                            position.anchorCell,
-                            position.headCell
-                        )
+          return true;
+        },
+      setCellSelection:
+        (position) =>
+        ({ tr, dispatch }) => {
+          if (dispatch) {
+            const selection = CellSelection.create(
+              tr.doc,
+              position.anchorCell,
+              position.headCell,
+            );
 
-                        // @ts-ignore
-                        tr.setSelection(selection)
-                    }
+            // @ts-ignore
+            tr.setSelection(selection);
+          }
 
-                    return true
-                }
-        }
-    },
+          return true;
+        },
+    };
+  },
 
-    addKeyboardShortcuts() {
-        return {
-            Tab: () => {
-                if (this.editor.commands.goToNextCell()) {
-                    return true
-                }
-
-                if (!this.editor.can().addRowAfter()) {
-                    return false
-                }
-
-                return this.editor.chain().addRowAfter().goToNextCell().run()
-            },
-            "Shift-Tab": () => this.editor.commands.goToPreviousCell(),
-            Backspace: deleteTableWhenAllCellsSelected,
-            "Mod-Backspace": deleteTableWhenAllCellsSelected,
-            Delete: deleteTableWhenAllCellsSelected,
-            "Mod-Delete": deleteTableWhenAllCellsSelected
-        }
-    },
-
-    addNodeView() {
-        return ({ editor, getPos, node, decorations }) => {
-            const { cellMinWidth } = this.options
-
-            return new TableView(
-                node,
-                cellMinWidth,
-                decorations,
-                editor,
-                getPos as () => number
-            )
-        }
-    },
-
-    addProseMirrorPlugins() {
-        const isResizable = this.options.resizable && this.editor.isEditable
-
-        const plugins = [
-            tableEditing({
-                allowTableNodeSelection: this.options.allowTableNodeSelection
-            }),
-            tableControls()
-        ]
-
-        if (isResizable) {
-            plugins.unshift(
-                columnResizing({
-                    handleWidth: this.options.handleWidth,
-                    cellMinWidth: this.options.cellMinWidth,
-                    // View: TableView,
-
-                    // @ts-ignore
-                    lastColumnResizable: this.options.lastColumnResizable
-                })
-            )
+  addKeyboardShortcuts() {
+    return {
+      Tab: () => {
+        if (this.editor.commands.goToNextCell()) {
+          return true;
         }
 
-        return plugins
-    },
-
-    extendNodeSchema(extension) {
-        const context = {
-            name: extension.name,
-            options: extension.options,
-            storage: extension.storage
+        if (!this.editor.can().addRowAfter()) {
+          return false;
         }
 
-        return {
-            tableRole: callOrReturn(
-                getExtensionField(extension, "tableRole", context)
-            )
-        }
+        return this.editor.chain().addRowAfter().goToNextCell().run();
+      },
+      "Shift-Tab": () => this.editor.commands.goToPreviousCell(),
+      Backspace: deleteTableWhenAllCellsSelected,
+      "Mod-Backspace": deleteTableWhenAllCellsSelected,
+      Delete: deleteTableWhenAllCellsSelected,
+      "Mod-Delete": deleteTableWhenAllCellsSelected,
+    };
+  },
+
+  addNodeView() {
+    return ({ editor, getPos, node, decorations }) => {
+      const { cellMinWidth } = this.options;
+
+      return new TableView(
+        node,
+        cellMinWidth,
+        decorations,
+        editor,
+        getPos as () => number,
+      );
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const isResizable = this.options.resizable && this.editor.isEditable;
+
+    const plugins = [
+      tableEditing({
+        allowTableNodeSelection: this.options.allowTableNodeSelection,
+      }),
+      tableControls(),
+    ];
+
+    if (isResizable) {
+      plugins.unshift(
+        columnResizing({
+          handleWidth: this.options.handleWidth,
+          cellMinWidth: this.options.cellMinWidth,
+          // View: TableView,
+
+          // @ts-ignore
+          lastColumnResizable: this.options.lastColumnResizable,
+        }),
+      );
     }
-})
+
+    return plugins;
+  },
+
+  extendNodeSchema(extension) {
+    const context = {
+      name: extension.name,
+      options: extension.options,
+      storage: extension.storage,
+    };
+
+    return {
+      tableRole: callOrReturn(
+        getExtensionField(extension, "tableRole", context),
+      ),
+    };
+  },
+});

packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts

@@ -1,12 +1,12 @@
-import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model"
+import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
 
 export function createCell(
-    cellType: NodeType,
-    cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+  cellType: NodeType,
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
 ): ProsemirrorNode | null | undefined {
-    if (cellContent) {
-        return cellType.createChecked(null, cellContent)
-    }
+  if (cellContent) {
+    return cellType.createChecked(null, cellContent);
+  }
 
-    return cellType.createAndFill()
+  return cellType.createAndFill();
 }

packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts

@@ -1,45 +1,45 @@
-import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model"
+import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model";
 
-import { createCell } from "./create-cell"
-import { getTableNodeTypes } from "./get-table-node-types"
+import { createCell } from "./create-cell";
+import { getTableNodeTypes } from "./get-table-node-types";
 
 export function createTable(
-    schema: Schema,
-    rowsCount: number,
-    colsCount: number,
-    withHeaderRow: boolean,
-    cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+  schema: Schema,
+  rowsCount: number,
+  colsCount: number,
+  withHeaderRow: boolean,
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
 ): ProsemirrorNode {
-    const types = getTableNodeTypes(schema)
-    const headerCells: ProsemirrorNode[] = []
-    const cells: ProsemirrorNode[] = []
+  const types = getTableNodeTypes(schema);
+  const headerCells: ProsemirrorNode[] = [];
+  const cells: ProsemirrorNode[] = [];
 
-    for (let index = 0; index < colsCount; index += 1) {
-        const cell = createCell(types.cell, cellContent)
+  for (let index = 0; index < colsCount; index += 1) {
+    const cell = createCell(types.cell, cellContent);
 
-        if (cell) {
-            cells.push(cell)
-        }
-
-        if (withHeaderRow) {
-            const headerCell = createCell(types.header_cell, cellContent)
-
-            if (headerCell) {
-                headerCells.push(headerCell)
-            }
-        }
+    if (cell) {
+      cells.push(cell);
     }
 
-    const rows: ProsemirrorNode[] = []
+    if (withHeaderRow) {
+      const headerCell = createCell(types.header_cell, cellContent);
 
-    for (let index = 0; index < rowsCount; index += 1) {
-        rows.push(
-            types.row.createChecked(
-                null,
-                withHeaderRow && index === 0 ? headerCells : cells
-            )
-        )
+      if (headerCell) {
+        headerCells.push(headerCell);
+      }
     }
+  }
 
-    return types.table.createChecked(null, rows)
+  const rows: ProsemirrorNode[] = [];
+
+  for (let index = 0; index < rowsCount; index += 1) {
+    rows.push(
+      types.row.createChecked(
+        null,
+        withHeaderRow && index === 0 ? headerCells : cells,
+      ),
+    );
+  }
+
+  return types.table.createChecked(null, rows);
 }

packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts

@@ -1,39 +1,42 @@
-import { findParentNodeClosestToPos, KeyboardShortcutCommand } from "@tiptap/core"
+import {
+  findParentNodeClosestToPos,
+  KeyboardShortcutCommand,
+} from "@tiptap/core";
 
-import { isCellSelection } from "./is-cell-selection"
+import { isCellSelection } from "./is-cell-selection";
 
 export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({
-    editor
+  editor,
 }) => {
-    const { selection } = editor.state
+  const { selection } = editor.state;
 
-    if (!isCellSelection(selection)) {
-        return false
+  if (!isCellSelection(selection)) {
+    return false;
+  }
+
+  let cellCount = 0;
+  const table = findParentNodeClosestToPos(
+    selection.ranges[0].$from,
+    (node) => node.type.name === "table",
+  );
+
+  table?.node.descendants((node) => {
+    if (node.type.name === "table") {
+      return false;
     }
 
-    let cellCount = 0
-    const table = findParentNodeClosestToPos(
-        selection.ranges[0].$from,
-        (node) => node.type.name === "table"
-    )
-
-    table?.node.descendants((node) => {
-        if (node.type.name === "table") {
-            return false
-        }
-
-        if (["tableCell", "tableHeader"].includes(node.type.name)) {
-            cellCount += 1
-        }
-    })
-
-    const allCellsSelected = cellCount === selection.ranges.length
-
-    if (!allCellsSelected) {
-        return false
+    if (["tableCell", "tableHeader"].includes(node.type.name)) {
+      cellCount += 1;
     }
+  });
 
-    editor.commands.deleteTable()
+  const allCellsSelected = cellCount === selection.ranges.length;
 
-    return true
-}
+  if (!allCellsSelected) {
+    return false;
+  }
+
+  editor.commands.deleteTable();
+
+  return true;
+};

packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts

@@ -1,21 +1,21 @@
-import { NodeType, Schema } from "prosemirror-model"
+import { NodeType, Schema } from "prosemirror-model";
 
 export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
-    if (schema.cached.tableNodeTypes) {
-        return schema.cached.tableNodeTypes
+  if (schema.cached.tableNodeTypes) {
+    return schema.cached.tableNodeTypes;
+  }
+
+  const roles: { [key: string]: NodeType } = {};
+
+  Object.keys(schema.nodes).forEach((type) => {
+    const nodeType = schema.nodes[type];
+
+    if (nodeType.spec.tableRole) {
+      roles[nodeType.spec.tableRole] = nodeType;
     }
+  });
 
-    const roles: { [key: string]: NodeType } = {}
+  schema.cached.tableNodeTypes = roles;
 
-    Object.keys(schema.nodes).forEach((type) => {
-        const nodeType = schema.nodes[type]
-
-        if (nodeType.spec.tableRole) {
-            roles[nodeType.spec.tableRole] = nodeType
-        }
-    })
-
-    schema.cached.tableNodeTypes = roles
-
-    return roles
+  return roles;
 }

packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts

@@ -1,5 +1,5 @@
-import { CellSelection } from "@tiptap/prosemirror-tables"
+import { CellSelection } from "@tiptap/prosemirror-tables";
 
 export function isCellSelection(value: unknown): value is CellSelection {
-    return value instanceof CellSelection
+  return value instanceof CellSelection;
 }

packages/editor/core/src/ui/hooks/useEditor.tsx

@@ -95,4 +95,3 @@ export const useEditor = ({
 
   return editor;
 };
-

packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx

@@ -7,7 +7,7 @@ import {
 } from "react";
 import { CoreReadOnlyEditorExtensions } from "../../ui/read-only/extensions";
 import { CoreReadOnlyEditorProps } from "../../ui/read-only/props";
-import { EditorProps } from '@tiptap/pm/view';
+import { EditorProps } from "@tiptap/pm/view";
 import { IMentionSuggestion } from "../../types/mention-suggestion";
 
 interface CustomReadOnlyEditorProps {
@@ -19,7 +19,14 @@ interface CustomReadOnlyEditorProps {
   mentionSuggestions?: IMentionSuggestion[];
 }
 
-export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editorProps = {}, mentionHighlights, mentionSuggestions}: CustomReadOnlyEditorProps) => {
+export const useReadOnlyEditor = ({
+  value,
+  forwardedRef,
+  extensions = [],
+  editorProps = {},
+  mentionHighlights,
+  mentionSuggestions,
+}: CustomReadOnlyEditorProps) => {
   const editor = useCustomEditor({
     editable: false,
     content:
@@ -28,7 +35,13 @@ export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editor
       ...CoreReadOnlyEditorProps,
       ...editorProps,
     },
-    extensions: [...CoreReadOnlyEditorExtensions({ mentionSuggestions: mentionSuggestions ?? [], mentionHighlights: mentionHighlights ?? []}), ...extensions],
+    extensions: [
+      ...CoreReadOnlyEditorExtensions({
+        mentionSuggestions: mentionSuggestions ?? [],
+        mentionHighlights: mentionHighlights ?? [],
+      }),
+      ...extensions,
+    ],
   });
 
   const hasIntiliazedContent = useRef(false);

packages/editor/core/src/ui/mentions/custom.tsx

@@ -1,11 +1,11 @@
-import { Mention, MentionOptions } from '@tiptap/extension-mention'
-import { mergeAttributes } from '@tiptap/core'
-import { ReactNodeViewRenderer } from '@tiptap/react'
-import mentionNodeView from './mentionNodeView'
-import { IMentionHighlight } from '../../types/mention-suggestion'
+import { Mention, MentionOptions } from "@tiptap/extension-mention";
+import { mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import mentionNodeView from "./mentionNodeView";
+import { IMentionHighlight } from "../../types/mention-suggestion";
 export interface CustomMentionOptions extends MentionOptions {
-  mentionHighlights: IMentionHighlight[]
-  readonly?: boolean
+  mentionHighlights: IMentionHighlight[];
+  readonly?: boolean;
 }
 
 export const CustomMention = Mention.extend<CustomMentionOptions>({
@@ -21,35 +21,37 @@ export const CustomMention = Mention.extend<CustomMentionOptions>({
         default: null,
       },
       self: {
-        default: false
+        default: false,
       },
       redirect_uri: {
-        default: "/"
-      }
-    }
+        default: "/",
+      },
+    };
   },
 
   addNodeView() {
-    return ReactNodeViewRenderer(mentionNodeView)
+    return ReactNodeViewRenderer(mentionNodeView);
   },
 
   parseHTML() {
-    return [{
-      tag: 'mention-component',
-      getAttrs: (node: string | HTMLElement) => {
-        if (typeof node === 'string') {
-          return null;
-        }
-        return {
-          id: node.getAttribute('data-mention-id') || '',
-          target: node.getAttribute('data-mention-target') || '',
-          label: node.innerText.slice(1) || '',
-          redirect_uri: node.getAttribute('redirect_uri')
-        }
+    return [
+      {
+        tag: "mention-component",
+        getAttrs: (node: string | HTMLElement) => {
+          if (typeof node === "string") {
+            return null;
+          }
+          return {
+            id: node.getAttribute("data-mention-id") || "",
+            target: node.getAttribute("data-mention-target") || "",
+            label: node.innerText.slice(1) || "",
+            redirect_uri: node.getAttribute("redirect_uri"),
+          };
+        },
       },
-    }]
+    ];
   },
   renderHTML({ HTMLAttributes }) {
-    return ['mention-component', mergeAttributes(HTMLAttributes)]
+    return ["mention-component", mergeAttributes(HTMLAttributes)];
   },
-})
+});

packages/editor/core/src/ui/mentions/index.tsx

@@ -2,14 +2,21 @@
 
 import suggestion from "./suggestion";
 import { CustomMention } from "./custom";
-import { IMentionHighlight, IMentionSuggestion } from "../../types/mention-suggestion";
-
-export const Mentions = (mentionSuggestions: IMentionSuggestion[], mentionHighlights: IMentionHighlight[], readonly) => CustomMention.configure({
-  HTMLAttributes: {
-    'class' : "mention",
-  },
-  readonly: readonly,
-  mentionHighlights: mentionHighlights,
-  suggestion: suggestion(mentionSuggestions),
-})
+import {
+  IMentionHighlight,
+  IMentionSuggestion,
+} from "../../types/mention-suggestion";
 
+export const Mentions = (
+  mentionSuggestions: IMentionSuggestion[],
+  mentionHighlights: IMentionHighlight[],
+  readonly,
+) =>
+  CustomMention.configure({
+    HTMLAttributes: {
+      class: "mention",
+    },
+    readonly: readonly,
+    mentionHighlights: mentionHighlights,
+    suggestion: suggestion(mentionSuggestions),
+  });

packages/editor/core/src/ui/mentions/suggestion.ts

@@ -1,12 +1,17 @@
-import { ReactRenderer } from '@tiptap/react'
+import { ReactRenderer } from "@tiptap/react";
 import { Editor } from "@tiptap/core";
-import tippy from 'tippy.js'
+import tippy from "tippy.js";
 
-import MentionList from './MentionList'
-import { IMentionSuggestion } from '../../types/mention-suggestion';
+import MentionList from "./MentionList";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
 
 const Suggestion = (suggestions: IMentionSuggestion[]) => ({
-  items: ({ query }: { query: string }) => suggestions.filter(suggestion => suggestion.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5),
+  items: ({ query }: { query: string }) =>
+    suggestions
+      .filter((suggestion) =>
+        suggestion.title.toLowerCase().startsWith(query.toLowerCase()),
+      )
+      .slice(0, 5),
   render: () => {
     let reactRenderer: ReactRenderer | null = null;
     let popup: any | null = null;
@@ -30,7 +35,7 @@ const Suggestion = (suggestions: IMentionSuggestion[]) => ({
       },
 
       onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
-        reactRenderer?.updateProps(props)
+        reactRenderer?.updateProps(props);
 
         popup &&
           popup[0].setProps({
@@ -49,11 +54,10 @@ const Suggestion = (suggestions: IMentionSuggestion[]) => ({
       },
       onExit: () => {
         popup?.[0].destroy();
-        reactRenderer?.destroy()
+        reactRenderer?.destroy();
       },
-    }
+    };
   },
-})
-
+});
 
 export default Suggestion;

packages/editor/core/src/ui/props.tsx

@@ -5,7 +5,9 @@ import { UploadImage } from "../types/upload-image";
 
 export function CoreEditorProps(
   uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ): EditorProps {
   return {
     attributes: {
@@ -32,7 +34,11 @@ export function CoreEditorProps(
           }
         }
       }
-      if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+      if (
+        event.clipboardData &&
+        event.clipboardData.files &&
+        event.clipboardData.files[0]
+      ) {
         event.preventDefault();
         const file = event.clipboardData.files[0];
         const pos = view.state.selection.from;
@@ -51,7 +57,12 @@ export function CoreEditorProps(
           }
         }
       }
-      if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+      if (
+        !moved &&
+        event.dataTransfer &&
+        event.dataTransfer.files &&
+        event.dataTransfer.files[0]
+      ) {
         event.preventDefault();
         const file = event.dataTransfer.files[0];
         const coordinates = view.posAtCoords({
@@ -59,7 +70,13 @@ export function CoreEditorProps(
           top: event.clientY,
         });
         if (coordinates) {
-          startImageUpload(file, view, coordinates.pos - 1, uploadFile, setIsSubmitting);
+          startImageUpload(
+            file,
+            view,
+            coordinates.pos - 1,
+            uploadFile,
+            setIsSubmitting,
+          );
         }
         return true;
       }

packages/editor/core/src/ui/read-only/extensions.tsx

@@ -18,9 +18,10 @@ import { isValidHttpUrl } from "../../lib/utils";
 import { Mentions } from "../mentions";
 import { IMentionSuggestion } from "../../types/mention-suggestion";
 
-export const CoreReadOnlyEditorExtensions = (
-  mentionConfig: { mentionSuggestions: IMentionSuggestion[], mentionHighlights: string[] },
-) => [
+export const CoreReadOnlyEditorExtensions = (mentionConfig: {
+  mentionSuggestions: IMentionSuggestion[];
+  mentionHighlights: string[];
+}) => [
   StarterKit.configure({
     bulletList: {
       HTMLAttributes: {
@@ -57,41 +58,45 @@ export const CoreReadOnlyEditorExtensions = (
     },
     gapcursor: false,
   }),
-    Gapcursor,
-    TiptapLink.configure({
-      protocols: ["http", "https"],
-      validate: (url) => isValidHttpUrl(url),
-      HTMLAttributes: {
-        class:
-          "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
-      },
-    }),
-    ReadOnlyImageExtension.configure({
-      HTMLAttributes: {
-        class: "rounded-lg border border-custom-border-300",
-      },
-    }),
-    TiptapUnderline,
-    TextStyle,
-    Color,
-    TaskList.configure({
-      HTMLAttributes: {
-        class: "not-prose pl-2",
-      },
-    }),
-    TaskItem.configure({
-      HTMLAttributes: {
-        class: "flex items-start my-4",
-      },
-      nested: true,
-    }),
-    Markdown.configure({
-      html: true,
-      transformCopiedText: true,
-    }),
-    Table,
-    TableHeader,
-    TableCell,
-    TableRow,
-    Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, true),
-  ];
+  Gapcursor,
+  TiptapLink.configure({
+    protocols: ["http", "https"],
+    validate: (url) => isValidHttpUrl(url),
+    HTMLAttributes: {
+      class:
+        "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+    },
+  }),
+  ReadOnlyImageExtension.configure({
+    HTMLAttributes: {
+      class: "rounded-lg border border-custom-border-300",
+    },
+  }),
+  TiptapUnderline,
+  TextStyle,
+  Color,
+  TaskList.configure({
+    HTMLAttributes: {
+      class: "not-prose pl-2",
+    },
+  }),
+  TaskItem.configure({
+    HTMLAttributes: {
+      class: "flex items-start my-4",
+    },
+    nested: true,
+  }),
+  Markdown.configure({
+    html: true,
+    transformCopiedText: true,
+  }),
+  Table,
+  TableHeader,
+  TableCell,
+  TableRow,
+  Mentions(
+    mentionConfig.mentionSuggestions,
+    mentionConfig.mentionHighlights,
+    true,
+  ),
+];

packages/editor/core/src/ui/read-only/props.tsx

@@ -1,7 +1,6 @@
 import { EditorProps } from "@tiptap/pm/view";
 
-export const CoreReadOnlyEditorProps: EditorProps =
-{
+export const CoreReadOnlyEditorProps: EditorProps = {
   attributes: {
     class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
   },

packages/editor/lite-text-editor/Readme.md

@@ -10,25 +10,25 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in
 
   `LiteTextEditor` & `LiteTextEditorWithRef`
 
-- **Read Only Editor Instances**: We have added a really light weight *Read Only* Editor instance for the Lite editor types (with and without Ref)
+- **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Lite editor types (with and without Ref)
   `LiteReadOnlyEditor` &`LiteReadOnlyEditorWithRef`
 
 ## LiteTextEditor
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
-| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
-| `value` | `html string` | The initial content of the editor. |
-| `onEnterKeyPress` | `(e) => void` | The event that happens on Enter key press |
-| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
-| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
-| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
-| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
-| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
-| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
-| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
-| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+| Prop                            | Type                                                             | Description                                                                                                                                                             |
+| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `uploadFile`                    | `(file: File) => Promise<string>`                                | A function that handles file upload. It takes a file as input and handles the process of uploading that file.                                                           |
+| `deleteFile`                    | `(assetUrlWithWorkspaceId: string) => Promise<any>`              | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image.                                      |
+| `value`                         | `html string`                                                    | The initial content of the editor.                                                                                                                                      |
+| `onEnterKeyPress`               | `(e) => void`                                                    | The event that happens on Enter key press                                                                                                                               |
+| `debouncedUpdatesEnabled`       | `boolean`                                                        | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+| `onChange`                      | `(json: any, html: string) => void`                              | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats.                                        |
+| `setIsSubmitting`               | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status.                                                                                                                |
+| `setShouldShowAlert`            | `(showAlert: boolean) => void`                                   | This function is used to show or hide an alert incase of content not being "saved".                                                                                     |
+| `noBorder`                      | `boolean`                                                        | If set to true, the editor will not have a border.                                                                                                                      |
+| `borderOnFocus`                 | `boolean`                                                        | If set to true, the editor will show a border when it is focused.                                                                                                       |
+| `customClassName`               | `string`                                                         | This is a custom CSS class that can be applied to the editor.                                                                                                           |
+| `editorContentCustomClassNames` | `string`                                                         | This is a custom CSS class that can be applied to the editor content.                                                                                                   |
 
 ### Usage
 
@@ -36,62 +36,62 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in
 
 ```tsx
 <LiteTextEditor
-      onEnterKeyPress={handleSubmit(handleCommentUpdate)}
-      uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-      deleteFile={fileService.deleteImage}
-      value={value}
-      debouncedUpdatesEnabled={false}
-      customClassName="min-h-[50px] p-3 shadow-sm"
-      onChange={(comment_json: Object, comment_html: string) => {
-        onChange(comment_html);
-      }}
-    />
+  onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+  uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+  deleteFile={fileService.deleteImage}
+  value={value}
+  debouncedUpdatesEnabled={false}
+  customClassName="min-h-[50px] p-3 shadow-sm"
+  onChange={(comment_json: Object, comment_html: string) => {
+    onChange(comment_html);
+  }}
+/>
 ```
 
 2. Example of how to use the `LiteTextEditorWithRef` component
 
 ```tsx
-  const editorRef = useRef<any>(null);
+const editorRef = useRef<any>(null);
 
-  // can use it to set the editor's value
-  editorRef.current?.setEditorValue(`${watch("description_html")}`);
+// can use it to set the editor's value
+editorRef.current?.setEditorValue(`${watch("description_html")}`);
 
-  // can use it to clear the editor
-  editorRef?.current?.clearEditor();
+// can use it to clear the editor
+editorRef?.current?.clearEditor();
 
-  return ( 
-    <LiteTextEditorWithRef
-      onEnterKeyPress={handleSubmit(handleCommentUpdate)}
-      uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-      deleteFile={fileService.deleteImage}
-      ref={editorRef}
-      value={value}
-      debouncedUpdatesEnabled={false}
-      customClassName="min-h-[50px] p-3 shadow-sm"
-      onChange={(comment_json: Object, comment_html: string) => {
-        onChange(comment_html);
-      }}
-    />
-)
+return (
+  <LiteTextEditorWithRef
+    onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+    uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+    deleteFile={fileService.deleteImage}
+    ref={editorRef}
+    value={value}
+    debouncedUpdatesEnabled={false}
+    customClassName="min-h-[50px] p-3 shadow-sm"
+    onChange={(comment_json: Object, comment_html: string) => {
+      onChange(comment_html);
+    }}
+  />
+);
 ```
 
 ## LiteReadOnlyEditor
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `value` | `html string` | The initial content of the editor. |
-| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
-| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
-| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
-| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+| Prop                            | Type          | Description                                                           |
+| ------------------------------- | ------------- | --------------------------------------------------------------------- |
+| `value`                         | `html string` | The initial content of the editor.                                    |
+| `noBorder`                      | `boolean`     | If set to true, the editor will not have a border.                    |
+| `borderOnFocus`                 | `boolean`     | If set to true, the editor will show a border when it is focused.     |
+| `customClassName`               | `string`      | This is a custom CSS class that can be applied to the editor.         |
+| `editorContentCustomClassNames` | `string`      | This is a custom CSS class that can be applied to the editor content. |
 
 ### Usage
 
 Here is an example of how to use the `RichReadOnlyEditor` component
 
 ```tsx
-  <LiteReadOnlyEditor
-    value={comment.comment_html}
-    customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
-  />
+<LiteReadOnlyEditor
+  value={comment.comment_html}
+  customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+/>
 ```

packages/editor/lite-text-editor/src/index.ts

@@ -1,3 +1,3 @@
 export { LiteTextEditor, LiteTextEditorWithRef } from "./ui";
 export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "./ui/read-only";
-export type { IMentionSuggestion, IMentionHighlight } from "./ui"
+export type { IMentionSuggestion, IMentionHighlight } from "./ui";

packages/editor/lite-text-editor/src/ui/index.tsx

@@ -31,7 +31,7 @@ interface ILiteTextEditor {
   editorContentCustomClassNames?: string;
   onChange?: (json: any, html: string) => void;
   setIsSubmitting?: (
-    isSubmitting: "submitting" | "submitted" | "saved"
+    isSubmitting: "submitting" | "submitted" | "saved",
   ) => void;
   setShouldShowAlert?: (showAlert: boolean) => void;
   forwardedRef?: any;
@@ -129,7 +129,7 @@ const LiteTextEditor = (props: LiteTextEditorProps) => {
 };
 
 const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>(
-  (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />
+  (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />,
 );
 
 LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";

packages/editor/lite-text-editor/src/ui/menus/fixed-menu/icon.tsx

@@ -6,8 +6,9 @@ type Props = {
 };
 
 export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
-  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>
+  <span
+    className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}
+  >
     {iconName}
   </span>
 );
-

packages/editor/rich-text-editor/Readme.md

@@ -10,24 +10,24 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
 
   `RichTextEditor` & `RichTextEditorWithRef`
 
-- **Read Only Editor Instances**: We have added a really light weight *Read Only* Editor instance for the Rich editor types (with and without Ref)
+- **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Rich editor types (with and without Ref)
   `RichReadOnlyEditor` &`RichReadOnlyEditorWithRef`
 
 ## RichTextEditor
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `uploadFile` | `(file: File) => Promise<string>` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
-| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise<any>` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
-| `value` | `html string` | The initial content of the editor. |
-| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
-| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
-| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
-| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
-| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
-| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
-| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
-| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+| Prop                            | Type                                                             | Description                                                                                                                                                             |
+| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `uploadFile`                    | `(file: File) => Promise<string>`                                | A function that handles file upload. It takes a file as input and handles the process of uploading that file.                                                           |
+| `deleteFile`                    | `(assetUrlWithWorkspaceId: string) => Promise<any>`              | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image.                                      |
+| `value`                         | `html string`                                                    | The initial content of the editor.                                                                                                                                      |
+| `debouncedUpdatesEnabled`       | `boolean`                                                        | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+| `onChange`                      | `(json: any, html: string) => void`                              | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats.                                        |
+| `setIsSubmitting`               | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status.                                                                                                                |
+| `setShouldShowAlert`            | `(showAlert: boolean) => void`                                   | This function is used to show or hide an alert incase of content not being "saved".                                                                                     |
+| `noBorder`                      | `boolean`                                                        | If set to true, the editor will not have a border.                                                                                                                      |
+| `borderOnFocus`                 | `boolean`                                                        | If set to true, the editor will show a border when it is focused.                                                                                                       |
+| `customClassName`               | `string`                                                         | This is a custom CSS class that can be applied to the editor.                                                                                                           |
+| `editorContentCustomClassNames` | `string`                                                         | This is a custom CSS class that can be applied to the editor content.                                                                                                   |
 
 ### Usage
 
@@ -57,43 +57,47 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
 2. Example of how to use the `RichTextEditorWithRef` component
 
 ```tsx
-  const editorRef = useRef<any>(null);
+const editorRef = useRef<any>(null);
 
-  // can use it to set the editor's value
-  editorRef.current?.setEditorValue(`${watch("description_html")}`);
+// can use it to set the editor's value
+editorRef.current?.setEditorValue(`${watch("description_html")}`);
 
-  // can use it to clear the editor
-  editorRef?.current?.clearEditor();
+// can use it to clear the editor
+editorRef?.current?.clearEditor();
 
-  return (<RichTextEditorWithRef
-      uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
-      deleteFile={fileService.deleteImage}
-      ref={editorRef}
-      debouncedUpdatesEnabled={false}
-      value={value}
-      customClassName="min-h-[150px]"
-      onChange={(description: Object, description_html: string) => {
-          onChange(description_html);
-          // custom stuff you want to do
-  } } />)
+return (
+  <RichTextEditorWithRef
+    uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+    deleteFile={fileService.deleteImage}
+    ref={editorRef}
+    debouncedUpdatesEnabled={false}
+    value={value}
+    customClassName="min-h-[150px]"
+    onChange={(description: Object, description_html: string) => {
+      onChange(description_html);
+      // custom stuff you want to do
+    }}
+  />
+);
 ```
 
 ## RichReadOnlyEditor
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `value` | `html string` | The initial content of the editor. |
-| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
-| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
-| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
-| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+| Prop                            | Type          | Description                                                           |
+| ------------------------------- | ------------- | --------------------------------------------------------------------- |
+| `value`                         | `html string` | The initial content of the editor.                                    |
+| `noBorder`                      | `boolean`     | If set to true, the editor will not have a border.                    |
+| `borderOnFocus`                 | `boolean`     | If set to true, the editor will show a border when it is focused.     |
+| `customClassName`               | `string`      | This is a custom CSS class that can be applied to the editor.         |
+| `editorContentCustomClassNames` | `string`      | This is a custom CSS class that can be applied to the editor content. |
 
 ### Usage
 
 Here is an example of how to use the `RichReadOnlyEditor` component
 
 ```tsx
-  <RichReadOnlyEditor
-    value={issueDetails.description_html}
-    customClassName="p-3 min-h-[50px] shadow-sm" />
+<RichReadOnlyEditor
+  value={issueDetails.description_html}
+  customClassName="p-3 min-h-[50px] shadow-sm"
+/>
 ```

packages/editor/rich-text-editor/src/index.ts

@@ -2,4 +2,4 @@ import "./styles/github-dark.css";
 
 export { RichTextEditor, RichTextEditorWithRef } from "./ui";
 export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "./ui/read-only";
-export type { IMentionSuggestion, IMentionHighlight } from "./ui"
+export type { IMentionSuggestion, IMentionHighlight } from "./ui";

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 };

packages/ui/src/avatar/avatar.tsx

@@ -123,7 +123,7 @@ export const Avatar: React.FC<Props> = (props) => {
     size = "md",
     shape = "circle",
     src,
-    className = ""
+    className = "",
   } = props;
 
   // get size details based on the size prop
@@ -157,7 +157,9 @@ export const Avatar: React.FC<Props> = (props) => {
           <div
             className={`${
               sizeInfo.fontSize
-            } grid place-items-center h-full w-full ${getBorderRadius(shape)} ${className}`}
+            } grid place-items-center h-full w-full ${getBorderRadius(
+              shape,
+            )} ${className}`}
             style={{
               backgroundColor:
                 fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",

packages/ui/src/button/button.tsx

@@ -58,7 +58,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         )}
       </button>
     );
-  }
+  },
 );
 
 Button.displayName = "plane-ui-button";

packages/ui/src/button/helper.tsx

@@ -102,7 +102,7 @@ export const buttonStyling: IButtonStyling = {
 export const getButtonStyling = (
   variant: TButtonVariant,
   size: TButtonSizes,
-  disabled: boolean = false
+  disabled: boolean = false,
 ): string => {
   let _variant: string = ``;
   const currentVariant = buttonStyling[variant];

packages/ui/src/dropdowns/custom-search-select.tsx

@@ -35,7 +35,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
   const [referenceElement, setReferenceElement] =
     useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null
+    null,
   );
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -46,7 +46,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
     query === ""
       ? options
       : options?.filter((option) =>
-          option.query.toLowerCase().includes(query.toLowerCase())
+          option.query.toLowerCase().includes(query.toLowerCase()),
         );
 
   const comboboxProps: any = {

packages/ui/src/dropdowns/custom-select.tsx

@@ -30,7 +30,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
   const [referenceElement, setReferenceElement] =
     useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null
+    null,
   );
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {

packages/ui/src/form-fields/index.ts

@@ -1,3 +1,3 @@
 export * from "./input";
 export * from "./textarea";
-export * from "./input-color-picker"
+export * from "./input-color-picker";

packages/ui/src/form-fields/textarea.tsx

@@ -10,7 +10,7 @@ export interface TextAreaProps
 // Updates the height of a <textarea> when the value changes.
 const useAutoSizeTextArea = (
   textAreaRef: HTMLTextAreaElement | null,
-  value: any
+  value: any,
 ) => {
   React.useEffect(() => {
     if (textAreaRef) {
@@ -63,7 +63,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         {...rest}
       />
     );
-  }
+  },
 );
 
 export { TextArea };

packages/ui/src/progress/circular-progress-indicator.tsx

@@ -9,7 +9,7 @@ interface ICircularProgressIndicator {
 }
 
 export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
-  props
+  props,
 ) => {
   const { size = 40, percentage = 25, strokeWidth = 6, children } = props;
 

space/components/issues/peek-overview/issue-details.tsx

@@ -9,7 +9,6 @@ type Props = {
 };
 
 export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
-
   const mentionConfig = useEditorSuggestions();
 
   return (
@@ -20,15 +19,19 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
       <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
       {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
         <RichReadOnlyEditor
-          value={!issueDetails.description_html ||
+          value={
+            !issueDetails.description_html ||
             issueDetails.description_html === "" ||
             (typeof issueDetails.description_html === "object" &&
               Object.keys(issueDetails.description_html).length === 0)
-            ? "<p></p>"
-            : issueDetails.description_html}
-          customClassName="p-3 min-h-[50px] shadow-sm" mentionHighlights={mentionConfig.mentionHighlights} />
+              ? "<p></p>"
+              : issueDetails.description_html
+          }
+          customClassName="p-3 min-h-[50px] shadow-sm"
+          mentionHighlights={mentionConfig.mentionHighlights}
+        />
       )}
       <IssueReactions />
     </div>
-  )
+  );
 };

space/store/mentions.store.ts

@@ -3,43 +3,41 @@ import { RootStore } from "./root";
 import { computed, makeObservable } from "mobx";
 
 export interface IMentionsStore {
-    // mentionSuggestions: IMentionSuggestion[];
-    mentionHighlights: IMentionHighlight[];
+  // mentionSuggestions: IMentionSuggestion[];
+  mentionHighlights: IMentionHighlight[];
 }
 
-export class MentionsStore implements IMentionsStore{
+export class MentionsStore implements IMentionsStore {
+  // root store
+  rootStore;
 
-    // root store
-    rootStore;
+  constructor(_rootStore: RootStore) {
+    // rootStore
+    this.rootStore = _rootStore;
 
-    constructor(_rootStore: RootStore ){
+    makeObservable(this, {
+      mentionHighlights: computed,
+      // mentionSuggestions: computed
+    });
+  }
 
-        // rootStore
-        this.rootStore = _rootStore;
+  // get mentionSuggestions() {
+  //     const projectMembers = this.rootStore.project.project.
 
-        makeObservable(this, {
-            mentionHighlights: computed,
-            // mentionSuggestions: computed
-        })
-    }
+  //     const suggestions = projectMembers === null ? [] : projectMembers.map((member) => ({
+  //         id: member.member.id,
+  //         type: "User",
+  //         title: member.member.display_name,
+  //         subtitle: member.member.email ?? "",
+  //         avatar: member.member.avatar,
+  //         redirect_uri: `/${member.workspace.slug}/profile/${member.member.id}`,
+  //     }))
 
-    // get mentionSuggestions() {
-    //     const projectMembers = this.rootStore.project.project.
+  //     return suggestions
+  // }
 
-    //     const suggestions = projectMembers === null ? [] : projectMembers.map((member) => ({
-    //         id: member.member.id,
-    //         type: "User",
-    //         title: member.member.display_name,
-    //         subtitle: member.member.email ?? "",
-    //         avatar: member.member.avatar,
-    //         redirect_uri: `/${member.workspace.slug}/profile/${member.member.id}`,
-    //     }))
-
-    //     return suggestions
-    // }
-
-    get mentionHighlights() {
-        const user = this.rootStore.user.currentUser;
-        return user ? [user.id] : []
-    }
+  get mentionHighlights() {
+    const user = this.rootStore.user.currentUser;
+    return user ? [user.id] : [];
+  }
 }

web/components/account/github-login-button.tsx

@@ -32,8 +32,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
   }, [code, gitCode, handleSignIn]);
 
   useEffect(() => {
-    const origin =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
     setLoginCallBackURL(`${origin}/` as any);
   }, []);
 

web/components/analytics/custom-analytics/graph/custom-tooltip.tsx

@@ -49,10 +49,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
             : ""
         }`}
       >
-        {params.segment === "assignees__id"
-          ? renderAssigneeName(tooltipValue.toString())
-          : tooltipValue}
-        :
+        {params.segment === "assignees__id" ? renderAssigneeName(tooltipValue.toString()) : tooltipValue}:
       </span>
       <span>{datum.value}</span>
     </div>

web/components/analytics/scope-and-demand/scope.tsx

@@ -22,9 +22,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
             keys={["count"]}
             height="250px"
             colors={() => `#f97316`}
-            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) =>
-              d.count > 0 ? d.count : 50
-            )}
+            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => (d.count > 0 ? d.count : 50))}
             tooltip={(datum) => {
               const assignee = defaultAnalytics.pending_issue_user.find(
                 (a) => a.assignees__id === `${datum.indexValue}`

web/components/auth-screens/not-authorized-view.tsx

@@ -31,9 +31,7 @@ export const NotAuthorizedView: React.FC<Props> = ({ actionButton, type }) => {
             alt="ProjectSettingImg"
           />
         </div>
-        <h1 className="text-xl font-medium text-custom-text-100">
-          Oops! You are not authorized to view this page
-        </h1>
+        <h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>
 
         <div className="w-full max-w-md text-base text-custom-text-200">
           {user ? (

web/components/automation/auto-close-automation.tsx

@@ -7,8 +7,6 @@ import { SelectMonthModal } from "components/automation";
 import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } from "@plane/ui";
 // icons
 import { ArchiveX } from "lucide-react";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // types
 import { IProject } from "types";
 // fetch keys
@@ -23,12 +21,12 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
   // states
   const [monthModal, setmonthModal] = useState(false);
 
-  const { user: userStore, project: projectStore } = useMobxStore();
+  const { user: userStore, project: projectStore, projectState: projectStateStore } = useMobxStore();
 
   const userRole = userStore.currentProjectRole;
   const projectDetails = projectStore.currentProjectDetails;
-  const stateGroups = projectStore.projectStatesByGroups ?? undefined;
-  const states = getStatesList(stateGroups);
+  // const stateGroups = projectStateStore.groupedProjectStates ?? undefined;
+  const states = projectStateStore.projectStates;
 
   const options = states
     ?.filter((state) => state.group === "cancelled")
@@ -45,7 +43,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
 
   const multipleOptions = (options ?? []).length > 1;
 
-  const defaultState = stateGroups && stateGroups.cancelled ? stateGroups.cancelled[0].id : null;
+  const defaultState = states?.find((s) => s.group === "cancelled")?.id || null;
 
   const selectedOption = states?.find((s) => s.id === projectDetails?.default_state ?? defaultState);
   const currentDefaultState = states?.find((s) => s.id === defaultState);

web/components/command-palette/issue/change-issue-state.tsx

@@ -1,9 +1,6 @@
 import React, { Dispatch, SetStateAction, useCallback } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
 // cmdk
 import { Command } from "cmdk";
 // services
@@ -13,8 +10,6 @@ import { ProjectStateService } from "services/project";
 import { Spinner, StateGroupIcon } from "@plane/ui";
 // icons
 import { Check } from "lucide-react";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // types
 import { IUser, IIssue } from "types";
 // fetch keys
@@ -34,11 +29,10 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
-  const { data: stateGroups, mutate: mutateIssueDetails } = useSWR(
+  const { data: states, mutate: mutateStates } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
     workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
   );
-  const states = getStatesList(stateGroups);
 
   const submitChanges = useCallback(
     async (formData: Partial<IIssue>) => {
@@ -60,14 +54,14 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
       await issueService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
         .then(() => {
-          mutateIssueDetails();
+          mutateStates();
           mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
         })
         .catch((e) => {
           console.error(e);
         });
     },
-    [workspaceSlug, issueId, projectId, mutateIssueDetails, user]
+    [workspaceSlug, issueId, projectId, mutateStates, user]
   );
 
   const handleIssueState = (stateId: string) => {

web/components/core/sidebar/progress-chart.tsx

@@ -57,8 +57,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
       const interval = Math.ceil(totalDates / maxDates);
       const limitedDates = [];
 
-      for (let i = 0; i < totalDates; i += interval)
-        limitedDates.push(renderShortNumericDateFormat(dates[i]));
+      for (let i = 0; i < totalDates; i += interval) limitedDates.push(renderShortNumericDateFormat(dates[i]));
 
       if (!limitedDates.includes(renderShortNumericDateFormat(dates[totalDates - 1])))
         limitedDates.push(renderShortNumericDateFormat(dates[totalDates - 1]));

web/components/cycles/cycles-list-item.tsx

@@ -231,7 +231,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
               </button>
             )}
 
-            <CustomMenu width="auto" ellipsis >
+            <CustomMenu width="auto" ellipsis>
               {!isCompleted && (
                 <>
                   <CustomMenu.MenuItem onClick={handleEditCycle}>

web/components/gantt-chart/chart/month.tsx

@@ -34,16 +34,8 @@ export const MonthChartView: FC<any> = () => {
                         style={{ width: `${currentViewData?.data.width}px` }}
                       >
                         <div className="text-xs space-x-1">
-                          <span className="text-custom-text-200">
-                            {monthDay.dayData.shortTitle[0]}
-                          </span>{" "}
-                          <span
-                            className={
-                              monthDay.today
-                                ? "bg-custom-primary-100 text-white px-1 rounded-full"
-                                : ""
-                            }
-                          >
+                          <span className="text-custom-text-200">{monthDay.dayData.shortTitle[0]}</span>{" "}
+                          <span className={monthDay.today ? "bg-custom-primary-100 text-white px-1 rounded-full" : ""}>
                             {monthDay.day}
                           </span>
                         </div>
@@ -63,9 +55,7 @@ export const MonthChartView: FC<any> = () => {
                     >
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "")
-                            ? `bg-custom-background-90`
-                            : ``
+                          ["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "") ? `bg-custom-background-90` : ``
                         }`}
                       >
                         {/* {monthDay?.today && (

web/components/gantt-chart/data/index.ts

@@ -27,8 +27,7 @@ export const months: WeekMonthDataType[] = [
   { key: 11, shortTitle: "dec", title: "december" },
 ];
 
-export const charCapitalize = (word: string) =>
-  `${word.charAt(0).toUpperCase()}${word.substring(1)}`;
+export const charCapitalize = (word: string) => `${word.charAt(0).toUpperCase()}${word.substring(1)}`;
 
 export const bindZero = (value: number) => (value > 9 ? `${value}` : `0${value}`);
 
@@ -50,9 +49,7 @@ export const datePreview = (date: Date, includeTime: boolean = false) => {
   month = months[month as number] as WeekMonthDataType;
   const year = date.getFullYear();
 
-  return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${
-    includeTime ? `, ${timePreview(date)}` : ``
-  }`;
+  return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${includeTime ? `, ${timePreview(date)}` : ``}`;
 };
 
 // context data
@@ -137,8 +134,6 @@ export const allViewsWithData: ChartDataType[] = [
 ];
 
 export const currentViewDataWithView = (view: string = "month") => {
-  const currentView: ChartDataType | undefined = allViewsWithData.find(
-    (_viewData) => _viewData.key === view
-  );
+  const currentView: ChartDataType | undefined = allViewsWithData.find((_viewData) => _viewData.key === view);
   return currentView;
 };

web/components/gantt-chart/views/bi-week-view.ts

@@ -3,12 +3,7 @@ import { ChartDataType } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
-import {
-  generateDate,
-  getWeekNumberByDate,
-  getNumberOfDaysInMonth,
-  getDatesBetweenTwoDates,
-} from "./helpers";
+import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
 
 type GetAllDaysInMonthInMonthViewType = {
   date: any;
@@ -34,9 +29,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number) => {
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
       active: false,
       today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
           ? true
           : false,
     });
@@ -72,16 +65,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
   if (side === null) {
     const currentDate = renderState.data.currentDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -96,16 +81,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
   } else if (side === "left") {
     const currentDate = renderState.data.startDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -116,16 +93,8 @@ export const generateBiWeekChart = (monthPayload: ChartDataType, side: null | "l
   } else if (side === "right") {
     const currentDate = renderState.data.endDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 

web/components/gantt-chart/views/day-view.ts

@@ -10,8 +10,7 @@ export const getWeekNumberByDate = (date: Date) => {
   const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
   const weekStart = new Date(firstWeekStart);
 
-  const weekNumber =
-    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+  const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
 
   return weekNumber;
 };
@@ -25,8 +24,7 @@ export const getNumberOfDaysInMonth = (month: number, year: number) => {
   return date.getDate();
 };
 
-export const generateDate = (day: number, month: number, year: number) =>
-  new Date(year, month, day);
+export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);
 
 export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
   const months = [];
@@ -45,8 +43,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
     months.push(new Date(currentYear, currentMonth));
     currentDate.setMonth(currentDate.getMonth() + 1);
   }
-  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
-    months.push(endDate);
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) months.push(endDate);
 
   return months;
 };
@@ -73,9 +70,7 @@ export const getAllDaysInMonth = (month: number, year: number) => {
       weekNumber: getWeekNumberByDate(date),
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
       today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
           ? true
           : false,
     });
@@ -99,10 +94,7 @@ export const generateMonthDataByMonth = (month: number, year: number) => {
   return monthPayload;
 };
 
-export const generateMonthDataByYear = (
-  monthPayload: ChartDataType,
-  side: null | "left" | "right"
-) => {
+export const generateMonthDataByYear = (monthPayload: ChartDataType, side: null | "left" | "right") => {
   let renderState = monthPayload;
   const renderPayload: any = [];
 
@@ -114,16 +106,8 @@ export const generateMonthDataByYear = (
   if (side === null) {
     const currentDate = renderState.data.currentDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -138,16 +122,8 @@ export const generateMonthDataByYear = (
   } else if (side === "left") {
     const currentDate = renderState.data.startDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -158,16 +134,8 @@ export const generateMonthDataByYear = (
   } else if (side === "right") {
     const currentDate = renderState.data.endDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 

web/components/gantt-chart/views/helpers.ts

@@ -1,6 +1,5 @@
 // Generating the date by using the year, month, and day
-export const generateDate = (day: number, month: number, year: number) =>
-  new Date(year, month, day);
+export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);
 
 // Getting the number of days in a month
 export const getNumberOfDaysInMonth = (month: number, year: number) => {
@@ -20,8 +19,7 @@ export const getWeekNumberByDate = (date: Date) => {
   const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
   const weekStart = new Date(firstWeekStart);
 
-  const weekNumber =
-    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+  const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
 
   return weekNumber;
 };
@@ -86,8 +84,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
     dates.push(new Date(currentYear, currentMonth));
     currentDate.setMonth(currentDate.getMonth() + 1);
   }
-  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
-    dates.push(endDate);
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) dates.push(endDate);
 
   return dates;
 };

web/components/gantt-chart/views/hours-view.ts

@@ -10,8 +10,7 @@ export const getWeekNumberByDate = (date: Date) => {
   const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
   const weekStart = new Date(firstWeekStart);
 
-  const weekNumber =
-    Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+  const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
 
   return weekNumber;
 };
@@ -25,8 +24,7 @@ export const getNumberOfDaysInMonth = (month: number, year: number) => {
   return date.getDate();
 };
 
-export const generateDate = (day: number, month: number, year: number) =>
-  new Date(year, month, day);
+export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);
 
 export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
   const months = [];
@@ -45,8 +43,7 @@ export const getDatesBetweenTwoDates = (startDate: Date, endDate: Date) => {
     months.push(new Date(currentYear, currentMonth));
     currentDate.setMonth(currentDate.getMonth() + 1);
   }
-  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth())
-    months.push(endDate);
+  if (endYear === currentDate.getFullYear() && endMonth === currentDate.getMonth()) months.push(endDate);
 
   return months;
 };
@@ -73,9 +70,7 @@ export const getAllDaysInMonth = (month: number, year: number) => {
       weekNumber: getWeekNumberByDate(date),
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
       today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
           ? true
           : false,
     });
@@ -99,10 +94,7 @@ export const generateMonthDataByMonth = (month: number, year: number) => {
   return monthPayload;
 };
 
-export const generateMonthDataByYear = (
-  monthPayload: ChartDataType,
-  side: null | "left" | "right"
-) => {
+export const generateMonthDataByYear = (monthPayload: ChartDataType, side: null | "left" | "right") => {
   let renderState = monthPayload;
   const renderPayload: any = [];
 
@@ -114,16 +106,8 @@ export const generateMonthDataByYear = (
   if (side === null) {
     const currentDate = renderState.data.currentDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -138,16 +122,8 @@ export const generateMonthDataByYear = (
   } else if (side === "left") {
     const currentDate = renderState.data.startDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -158,16 +134,8 @@ export const generateMonthDataByYear = (
   } else if (side === "right") {
     const currentDate = renderState.data.endDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 

web/components/gantt-chart/views/month-view.ts

@@ -3,12 +3,7 @@ import { ChartDataType, IGanttBlock } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
-import {
-  generateDate,
-  getWeekNumberByDate,
-  getNumberOfDaysInMonth,
-  getDatesBetweenTwoDates,
-} from "./helpers";
+import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
 
 type GetAllDaysInMonthInMonthViewType = {
   date: any;
@@ -62,9 +57,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number): IMonthChild[
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
       active: false,
       today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
           ? true
           : false,
     });
@@ -100,16 +93,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
   if (side === null) {
     const currentDate = renderState.data.currentDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -124,16 +109,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
   } else if (side === "left") {
     const currentDate = renderState.data.startDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -144,16 +121,8 @@ export const generateMonthChart = (monthPayload: ChartDataType, side: null | "le
   } else if (side === "right") {
     const currentDate = renderState.data.endDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -191,10 +160,7 @@ export const getNumberOfDaysBetweenTwoDatesInMonth = (startDate: Date, endDate:
 };
 
 // calc item scroll position and width
-export const getMonthChartItemPositionWidthInMonth = (
-  chartData: ChartDataType,
-  itemData: IGanttBlock
-) => {
+export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType, itemData: IGanttBlock) => {
   let scrollPosition: number = 0;
   let scrollWidth: number = 0;
 
@@ -207,9 +173,7 @@ export const getMonthChartItemPositionWidthInMonth = (
 
   // position code starts
   const positionTimeDifference: number = startDate.getTime() - itemStartDate.getTime();
-  const positionDaysDifference: number = Math.abs(
-    Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24))
-  );
+  const positionDaysDifference: number = Math.abs(Math.floor(positionTimeDifference / (1000 * 60 * 60 * 24)));
   scrollPosition = positionDaysDifference * chartData.data.width;
 
   var diffMonths = (itemStartDate.getFullYear() - startDate.getFullYear()) * 12;
@@ -221,9 +185,7 @@ export const getMonthChartItemPositionWidthInMonth = (
 
   // width code starts
   const widthTimeDifference: number = itemStartDate.getTime() - itemTargetDate.getTime();
-  const widthDaysDifference: number = Math.abs(
-    Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24))
-  );
+  const widthDaysDifference: number = Math.abs(Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24)));
   scrollWidth = (widthDaysDifference + 1) * chartData.data.width + 1;
   // width code ends
 

web/components/gantt-chart/views/quater-view.ts

@@ -36,10 +36,7 @@ const generateMonthDataByMonthAndYearInMonthView = (month: number, year: number)
   return weekPayload;
 };
 
-export const generateQuarterChart = (
-  quarterPayload: ChartDataType,
-  side: null | "left" | "right"
-) => {
+export const generateQuarterChart = (quarterPayload: ChartDataType, side: null | "left" | "right") => {
   let renderState = quarterPayload;
   const renderPayload: any = [];
 

web/components/gantt-chart/views/week-view.ts

@@ -3,12 +3,7 @@ import { ChartDataType } from "../types";
 // data
 import { weeks, months } from "../data";
 // helpers
-import {
-  generateDate,
-  getWeekNumberByDate,
-  getNumberOfDaysInMonth,
-  getDatesBetweenTwoDates,
-} from "./helpers";
+import { generateDate, getWeekNumberByDate, getNumberOfDaysInMonth, getDatesBetweenTwoDates } from "./helpers";
 
 type GetAllDaysInMonthInMonthViewType = {
   date: any;
@@ -34,9 +29,7 @@ const getAllDaysInMonthInMonthView = (month: number, year: number) => {
       title: `${weeks[date.getDay()].shortTitle} ${_day + 1}`,
       active: false,
       today:
-        currentDate.getFullYear() === year &&
-        currentDate.getMonth() === month &&
-        currentDate.getDate() === _day + 1
+        currentDate.getFullYear() === year && currentDate.getMonth() === month && currentDate.getDate() === _day + 1
           ? true
           : false,
     });
@@ -72,16 +65,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
   if (side === null) {
     const currentDate = renderState.data.currentDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -96,16 +81,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
   } else if (side === "left") {
     const currentDate = renderState.data.startDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - range,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() - 1,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 
@@ -116,16 +93,8 @@ export const generateWeekChart = (monthPayload: ChartDataType, side: null | "lef
   } else if (side === "right") {
     const currentDate = renderState.data.endDate;
 
-    minusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + 1,
-      currentDate.getDate()
-    );
-    plusDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth() + range,
-      currentDate.getDate()
-    );
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
 
     if (minusDate && plusDate) filteredDates = getDatesBetweenTwoDates(minusDate, plusDate);
 

web/components/headers/cycle-issues.tsx

@@ -31,6 +31,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
     cycle: cycleStore,
     cycleIssueFilter: cycleIssueFilterStore,
     project: projectStore,
+    projectState: projectStateStore,
     commandPalette: commandPaletteStore,
   } = useMobxStore();
   const { currentProjectDetails } = projectStore;
@@ -178,7 +179,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               }
               labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
               members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-              states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
           <FiltersDropdown title="Display" placement="bottom-end">

web/components/headers/module-issues.tsx

@@ -31,6 +31,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
     module: moduleStore,
     moduleFilter: moduleFilterStore,
     project: projectStore,
+    projectState: projectStateStore,
     commandPalette: commandPaletteStore,
   } = useMobxStore();
   const activeLayout = issueFilterStore.userDisplayFilters.layout;
@@ -177,7 +178,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               }
               labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
               members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-              states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
           <FiltersDropdown title="Display" placement="bottom-end">

web/components/headers/project-archived-issues.tsx

@@ -5,10 +5,8 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
-// helper
-import { truncateText } from "helpers/string.helper";
 // ui
-import { Breadcrumbs, BreadcrumbItem, LayersIcon } from "@plane/ui";
+import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // icons
 import { ArrowLeft } from "lucide-react";
 // components
@@ -22,7 +20,11 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { project: projectStore, archivedIssueFilters: archivedIssueFiltersStore } = useMobxStore();
+  const {
+    project: projectStore,
+    archivedIssueFilters: archivedIssueFiltersStore,
+    projectState: projectStateStore,
+  } = useMobxStore();
 
   const { currentProjectDetails } = projectStore;
 
@@ -118,7 +120,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
             }
             labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
             members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-            states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+            states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
           />
         </FiltersDropdown>
         <FiltersDropdown title="Display" placement="bottom-end">

web/components/headers/project-issues.tsx

@@ -26,6 +26,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   const {
     issueFilter: issueFilterStore,
     project: projectStore,
+    projectState: projectStateStore,
     inbox: inboxStore,
     commandPalette: commandPaletteStore,
   } = useMobxStore();
@@ -172,7 +173,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               }
               labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
               members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-              states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
           <FiltersDropdown title="Display" placement="bottom-end">

web/components/headers/project-view-issues.tsx

@@ -23,6 +23,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
     issueFilter: issueFilterStore,
     projectViewFilters: projectViewFiltersStore,
     project: projectStore,
+    projectState: projectStateStore,
     projectViews: projectViewsStore,
   } = useMobxStore();
 
@@ -163,7 +164,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             }
             labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
             members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-            states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+            states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
           />
         </FiltersDropdown>
         <FiltersDropdown title="Display" placement="bottom-end">

web/components/icons/completed-cycle-icon.tsx

@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const CompletedCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const CompletedCycleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
   <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
     <path
       d="m21.65 36.6-6.9-6.85 2.1-2.1 4.8 4.7 9.2-9.2 2.1 2.15ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"

web/components/icons/current-cycle-icon.tsx

@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const CurrentCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const CurrentCycleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
   <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
     <path
       d="M15.3 28.3q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.85 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575Zm8.5 0q-.85 0-1.425-.575-.575-.575-.575-1.425 0-.85.575-1.425.575-.575 1.425-.575.85 0 1.425.575.575.575.575 1.425 0 .85-.575 1.425-.575.575-1.425.575ZM6 44V7h6.25V4h3.25v3h17V4h3.25v3H42v37Zm3-3h30V19.5H9Zm0-24.5h30V10H9Zm0 0V10v6.5Z"

web/components/icons/document-icon.tsx

@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const DocumentIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
   <svg
     width={width}
     height={height}

web/components/icons/external-link-icon.tsx

@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const ExternalLinkIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const ExternalLinkIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
   <svg
     width={width}
     height={height}

web/components/icons/module/cancelled.tsx

@@ -7,11 +7,7 @@ type Props = {
   color?: string;
 };
 
-export const ModuleCancelledIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleCancelledIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
   <svg
     width={width}
     height={height}

web/components/icons/module/completed.tsx

@@ -7,11 +7,7 @@ type Props = {
   color?: string;
 };
 
-export const ModuleCompletedIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleCompletedIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
   <svg
     width={width}
     height={height}

web/components/icons/module/in-progress.tsx

@@ -7,11 +7,7 @@ type Props = {
   color?: string;
 };
 
-export const ModuleInProgressIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-}) => (
+export const ModuleInProgressIcon: React.FC<Props> = ({ width = "20", height = "20", className }) => (
   <svg
     width={width}
     height={height}
@@ -23,10 +19,7 @@ export const ModuleInProgressIcon: React.FC<Props> = ({
       <g id="Layer_1-2" data-name="Layer 1">
         <path fill="#f7b964" d="M0,111.14c.63.7.21,1.53.3,2.29-.07.26-.17.28-.3,0Z" />
         <path fill="#f6ab3e" d="M0,119.46a3.11,3.11,0,0,1,.3,2q-.19.33-.3,0Z" />
-        <path
-          fill="#facf96"
-          d="M.27,123.16c0,.66.38,1.38-.27,2v-2C.13,122.89.22,122.91.27,123.16Z"
-        />
+        <path fill="#facf96" d="M.27,123.16c0,.66.38,1.38-.27,2v-2C.13,122.89.22,122.91.27,123.16Z" />
         <path fill="#f5a939" d="M0,113.47l.3,0a2.39,2.39,0,0,1-.3,1.71Z" />
         <path fill="#f8ba67" d="M.27,123.16a.63.63,0,0,1-.27,0v-1.66l.3,0Z" />
         <path

web/components/icons/module/module-status-icon.tsx

@@ -17,21 +17,12 @@ type Props = {
   width?: string;
 };
 
-export const ModuleStatusIcon: React.FC<Props> = ({
-  status,
-  className,
-  height = "12px",
-  width = "12px",
-}) => {
-  if (status === "backlog")
-    return <ModuleBacklogIcon className={className} height={height} width={width} />;
-  else if (status === "cancelled")
-    return <ModuleCancelledIcon className={className} height={height} width={width} />;
-  else if (status === "completed")
-    return <ModuleCompletedIcon className={className} height={height} width={width} />;
+export const ModuleStatusIcon: React.FC<Props> = ({ status, className, height = "12px", width = "12px" }) => {
+  if (status === "backlog") return <ModuleBacklogIcon className={className} height={height} width={width} />;
+  else if (status === "cancelled") return <ModuleCancelledIcon className={className} height={height} width={width} />;
+  else if (status === "completed") return <ModuleCompletedIcon className={className} height={height} width={width} />;
   else if (status === "in-progress")
     return <ModuleInProgressIcon className={className} height={height} width={width} />;
-  else if (status === "paused")
-    return <ModulePausedIcon className={className} height={height} width={width} />;
+  else if (status === "paused") return <ModulePausedIcon className={className} height={height} width={width} />;
   else return <ModulePlannedIcon className={className} height={height} width={width} />;
 };

web/components/icons/pencil-scribble-icon.tsx

@@ -2,19 +2,8 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const PencilScribbleIcon: React.FC<Props> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "#000000",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 96 960 960"
-  >
+export const PencilScribbleIcon: React.FC<Props> = ({ width = "20", height = "20", className, color = "#000000" }) => (
+  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
     <path
       d="M560 936q-12 0-21-9t-9-21q0-13 9-21.5t21-8.5q59 0 99.5-24t40.5-56q0-23-29.5-45T591 717l47-47q63 19 92.5 52.5T760 796q0 67-61 103.5T560 936ZM240 642q-64-14-92-44t-28-62q0-35 26-63t120-62q66-24 85-39t19-35q0-25-22-43t-68-18q-27 0-46 7t-34 22q-8 8-20.5 9.5T157 308q-11-8-11.5-20t7.5-21q17-22 51-36.5t76-14.5q68 0 109 32.5t41 88.5q0 41-28.5 69.5T290 466q-67 25-88.5 39.5T180 536q0 16 27 30.5t81 27.5l-48 48Zm496-154L608 360l45-45q18-18 40-18t40 18l48 48q18 18 18 40t-18 40l-45 45ZM220 876h42l345-345-42-42-345 345v42Zm-60 60V808l405-405 128 128-405 405H160Zm405-447 42 42-42-42Z"
       fill={color}

web/components/icons/question-mark-circle-icon.tsx

@@ -2,11 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const QuestionMarkCircleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-}) => (
+export const QuestionMarkCircleIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
   <svg
     width={width}
     height={height}

web/components/icons/single-comment-icon.tsx

@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const SingleCommentCard: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const SingleCommentCard: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
   <svg
     width={width}
     height={height}

web/components/icons/tag-icon.tsx

@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const TagIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const TagIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
   <svg
     width={width}
     height={height}

web/components/icons/triangle-exclamation-icon.tsx

@@ -2,11 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const TriangleExclamationIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-}) => (
+export const TriangleExclamationIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
   <svg
     width={width}
     height={height}

web/components/icons/upcoming-cycle-icon.tsx

@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const UpcomingCycleIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color = "black",
-}) => (
+export const UpcomingCycleIcon: React.FC<Props> = ({ width = "24", height = "24", className, color = "black" }) => (
   <svg xmlns="http://www.w3.org/2000/svg" height={height} width={width} className={className}>
     <path
       d="M28.3 44v-3H39V19.5H9v11H6V10q0-1.2.9-2.1Q7.8 7 9 7h3.25V4h3.25v3h17V4h3.25v3H39q1.2 0 2.1.9.9.9.9 2.1v31q0 1.2-.9 2.1-.9.9-2.1.9ZM16 47.3l-2.1-2.1 5.65-5.7H2.5v-3h17.05l-5.65-5.7 2.1-2.1 9.3 9.3ZM9 16.5h30V10H9Zm0 0V10v6.5Z"

web/components/icons/user-group-icon.tsx

@@ -2,12 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const UserGroupIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  className,
-  color,
-}) => (
+export const UserGroupIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
   <svg
     width={width}
     height={height}

web/components/inbox/modals/create-issue-modal.tsx

@@ -41,7 +41,7 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
 
   const editorRef = useRef<any>(null);
 
-  const editorSuggestion = useEditorSuggestions()
+  const editorSuggestion = useEditorSuggestions();
 
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId } = router.query;

web/components/integration/jira/confirm-import.tsx

@@ -37,9 +37,7 @@ export const JiraConfirmImport: React.FC = () => {
             <p className="text-sm text-custom-text-200">Labels</p>
           </div>
           <div>
-            <h4 className="mb-2 text-lg font-semibold">
-              {watch("data.users").filter((user) => user.import).length}
-            </h4>
+            <h4 className="mb-2 text-lg font-semibold">{watch("data.users").filter((user) => user.import).length}</h4>
             <p className="text-sm text-custom-text-200">User</p>
           </div>
         </div>

web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx

@@ -15,7 +15,7 @@ import { X } from "lucide-react";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
-import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
+import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";
 
 type Props = {
   appliedFilters: IIssueFilterOptions;
@@ -24,7 +24,7 @@ type Props = {
   labels?: IIssueLabels[] | undefined;
   members?: IUserLite[] | undefined;
   projects?: IProject[] | undefined;
-  states?: IStateResponse | undefined;
+  states?: IState[] | undefined;
 };
 
 const membersFilters = ["assignees", "mentions", "created_by", "subscriber"];
@@ -70,7 +70,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
             {filterKey === "priority" && (
               <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
             )}
-            {filterKey === "state" && (
+            {filterKey === "state" && states && (
               <AppliedStateFilters
                 handleRemove={(val) => handleRemoveFilter("state", val)}
                 states={states}

web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx

@@ -12,7 +12,11 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { archivedIssueFilters: archivedIssueFiltersStore, project: projectStore } = useMobxStore();
+  const {
+    archivedIssueFilters: archivedIssueFiltersStore,
+    project: projectStore,
+    projectState: projectStateStore,
+  } = useMobxStore();
 
   const userFilters = archivedIssueFiltersStore.userFilters;
 
@@ -74,7 +78,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
         handleRemoveFilter={handleRemoveFilter}
         labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
         members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
     </div>
   );

web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx

@@ -1,6 +1,5 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@@ -12,7 +11,11 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
-  const { project: projectStore, cycleIssueFilter: cycleIssueFilterStore } = useMobxStore();
+  const {
+    project: projectStore,
+    cycleIssueFilter: cycleIssueFilterStore,
+    projectState: projectStateStore,
+  } = useMobxStore();
 
   const userFilters = cycleIssueFilterStore.cycleFilters;
 
@@ -70,7 +73,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
         handleRemoveFilter={handleRemoveFilter}
         labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
         members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
     </div>
   );

web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx

@@ -12,7 +12,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
 
-  const { project: projectStore, moduleFilter: moduleFilterStore } = useMobxStore();
+  const { project: projectStore, moduleFilter: moduleFilterStore, projectState: projectStateStore } = useMobxStore();
 
   const userFilters = moduleFilterStore.moduleFilters;
 
@@ -70,7 +70,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
         handleRemoveFilter={handleRemoveFilter}
         labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
         members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
     </div>
   );

web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx

@@ -12,7 +12,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
+  const { issueFilter: issueFilterStore, project: projectStore, projectState: projectStateStore } = useMobxStore();
 
   const userFilters = issueFilterStore.userFilters;
 
@@ -74,7 +74,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
         handleRemoveFilter={handleRemoveFilter}
         labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
         members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
     </div>
   );

web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx

@@ -19,6 +19,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
 
   const {
     project: projectStore,
+    projectState: projectStateStore,
     projectViews: projectViewsStore,
     projectViewFilters: projectViewFiltersStore,
   } = useMobxStore();
@@ -99,7 +100,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
         handleRemoveFilter={handleRemoveFilter}
         labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
         members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
       {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (
         <Button variant="primary" size="sm" onClick={handleUpdateView}>

web/components/issues/issue-layouts/filters/applied-filters/state.tsx

@@ -3,26 +3,22 @@ import { observer } from "mobx-react-lite";
 // icons
 import { StateGroupIcon } from "@plane/ui";
 import { X } from "lucide-react";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // types
-import { IStateResponse } from "types";
+import { IState } from "types";
 
 type Props = {
   handleRemove: (val: string) => void;
-  states: IStateResponse | undefined;
+  states: IState[];
   values: string[];
 };
 
 export const AppliedStateFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, states, values } = props;
 
-  const statesList = getStatesList(states);
-
   return (
     <div className="flex items-center gap-1 flex-wrap">
       {values.map((stateId) => {
-        const stateDetails = statesList?.find((s) => s.id === stateId);
+        const stateDetails = states?.find((s) => s.id === stateId);
 
         if (!stateDetails) return null;
 

web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx

@@ -15,7 +15,7 @@ import {
   FilterTargetDate,
 } from "components/issues";
 // types
-import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
+import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";
 // constants
 import { ILayoutDisplayFiltersOptions } from "constants/issue";
 
@@ -26,7 +26,7 @@ type Props = {
   labels?: IIssueLabels[] | undefined;
   members?: IUserLite[] | undefined;
   projects?: IProject[] | undefined;
-  states?: IStateResponse | undefined;
+  states?: IState[] | undefined;
 };
 
 export const FilterSelection: React.FC<Props> = observer((props) => {

web/components/issues/issue-layouts/filters/header/filters/state.tsx

@@ -1,19 +1,16 @@
 import React, { useState } from "react";
-
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
 import { Loader, StateGroupIcon } from "@plane/ui";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // types
-import { IStateResponse } from "types";
+import { IState } from "types";
 
 type Props = {
   appliedFilters: string[] | null;
   handleUpdate: (val: string) => void;
   searchQuery: string;
-  states: IStateResponse | undefined;
+  states: IState[] | undefined;
 };
 
 export const FilterState: React.FC<Props> = (props) => {
@@ -22,11 +19,9 @@ export const FilterState: React.FC<Props> = (props) => {
   const [itemsToRender, setItemsToRender] = useState(5);
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
-  const statesList = getStatesList(states);
-
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-  const filteredOptions = statesList?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  const filteredOptions = states?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
 
   const handleViewToggle = () => {
     if (!filteredOptions) return;

web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx

@@ -25,6 +25,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
   // store
   const {
     project: projectStore,
+    projectState: projectStateStore,
     cycleIssue: cycleIssueStore,
     issueFilter: issueFilterStore,
     cycleIssueKanBanView: cycleIssueKanBanViewStore,
@@ -98,7 +99,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
     cycleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
   };
 
-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
   const priorities = ISSUE_PRIORITIES || null;
   const labels = projectStore?.projectLabels || null;
   const members = projectStore?.projectMembers || null;