chore: format all files in monorepo (#3054)

* chore: format all files in the project

* fix: removing @types/react from dependencies

* fix: adding prettier and eslint config

* chore: format files

* fix: upgrading turbo version

* chore: ignoring warnings and adding todos

* fix: updated the type of bubble menu item in the document editor

* chore: format files

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

packages/editor/rich-text-editor/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+};

packages/editor/rich-text-editor/.prettierignore

@@ -0,0 +1,6 @@
+.next
+.vercel
+.tubro
+out/
+dis/
+build/

packages/editor/rich-text-editor/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

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

@@ -41,9 +41,7 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
   debouncedUpdatesEnabled={true}
   setShouldShowAlert={setShowAlert}
   setIsSubmitting={setIsSubmitting}
-  customClassName={
-    isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
-  }
+  customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
   noBorder={!isAllowed}
   onChange={(description: Object, description_html: string) => {
     setShowAlert(true);
@@ -96,8 +94,5 @@ return (
 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

@@ -1,7 +1,4 @@
 export { RichTextEditor, RichTextEditorWithRef } from "./ui";
 export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "./ui/read-only";
 export type { RichTextEditorProps, IRichTextEditor } from "./ui";
-export type {
-  IMentionHighlight,
-  IMentionSuggestion,
-} from "@plane/editor-types";
+export type { IMentionHighlight, IMentionSuggestion } from "@plane/editor-types";

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

@@ -5,10 +5,8 @@ import { UploadImage } from "@plane/editor-types";
 
 export const RichTextEditorExtensions = (
   uploadFile: UploadImage,
-  setIsSubmitting?: (
-    isSubmitting: "submitting" | "submitted" | "saved",
-  ) => void,
-  dragDropEnabled?: boolean,
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void,
+  dragDropEnabled?: boolean
 ) => [
   SlashCommand(uploadFile, setIsSubmitting),
   dragDropEnabled === true && DragAndDrop,

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

@@ -1,19 +1,9 @@
 "use client";
 import * as React from "react";
-import {
-  EditorContainer,
-  EditorContentWrapper,
-  getEditorClassNames,
-  useEditor,
-} from "@plane/editor-core";
+import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from "@plane/editor-core";
 import { EditorBubbleMenu } from "./menus/bubble-menu";
 import { RichTextEditorExtensions } from "./extensions";
-import {
-  DeleteImage,
-  IMentionSuggestion,
-  RestoreImage,
-  UploadImage,
-} from "@plane/editor-types";
+import { DeleteImage, IMentionSuggestion, RestoreImage, UploadImage } from "@plane/editor-types";
 
 export type IRichTextEditor = {
   value: string;
@@ -31,9 +21,7 @@ export type IRichTextEditor = {
   customClassName?: string;
   editorContentCustomClassNames?: string;
   onChange?: (json: any, html: string) => void;
-  setIsSubmitting?: (
-    isSubmitting: "submitting" | "submitted" | "saved",
-  ) => void;
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
   setShouldShowAlert?: (showAlert: boolean) => void;
   forwardedRef?: any;
   debouncedUpdatesEnabled?: boolean;
@@ -82,11 +70,7 @@ const RichTextEditor = ({
     restoreFile,
     forwardedRef,
     rerenderOnPropsChange,
-    extensions: RichTextEditorExtensions(
-      uploadFile,
-      setIsSubmitting,
-      dragDropEnabled,
-    ),
+    extensions: RichTextEditorExtensions(uploadFile, setIsSubmitting, dragDropEnabled),
     mentionHighlights,
     mentionSuggestions,
   });
@@ -103,18 +87,15 @@ const RichTextEditor = ({
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       {editor && <EditorBubbleMenu editor={editor} />}
       <div className="flex flex-col">
-        <EditorContentWrapper
-          editor={editor}
-          editorContentCustomClassNames={editorContentCustomClassNames}
-        />
+        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
       </div>
     </EditorContainer>
   );
 };
 
-const RichTextEditorWithRef = React.forwardRef<EditorHandle, IRichTextEditor>(
-  (props, ref) => <RichTextEditor {...props} forwardedRef={ref} />,
-);
+const RichTextEditorWithRef = React.forwardRef<EditorHandle, IRichTextEditor>((props, ref) => (
+  <RichTextEditor {...props} forwardedRef={ref} />
+));
 
 RichTextEditorWithRef.displayName = "RichTextEditorWithRef";
 

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

@@ -123,11 +123,10 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
                 type="button"
                 onClick={item.command}
                 className={cn(
-                  "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
+                  "p-2 text-custom-text-300 transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
                   {
-                    "text-custom-text-100 bg-custom-primary-100/5":
-                      item.isActive(),
-                  },
+                    "bg-custom-primary-100/5 text-custom-text-100": item.isActive(),
+                  }
                 )}
               >
                 <item.icon

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

@@ -1,19 +1,7 @@
 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;
@@ -21,11 +9,7 @@ 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(() => {
@@ -47,7 +31,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
         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);
@@ -64,7 +48,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
       </button>
       {isOpen && (
         <div
-          className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1"
+          className="dow-xl fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 animate-in fade-in slide-in-from-top-1"
           onKeyDown={(e) => {
             if (e.key === "Enter") {
               e.preventDefault();
@@ -76,7 +60,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
             ref={inputRef}
             type="url"
             placeholder="Paste a link"
-            className="flex-1 bg-custom-background-100 border-r border-custom-border-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
+            className="flex-1 border-r border-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
             defaultValue={editor.getAttributes("link").href || ""}
           />
           {editor.getAttributes("link").href ? (

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

@@ -21,21 +21,13 @@ 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(),
-      isActive: () =>
-        editor.isActive("paragraph") &&
-        !editor.isActive("bulletList") &&
-        !editor.isActive("orderedList"),
+      command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      isActive: () => editor.isActive("paragraph") && !editor.isActive("bulletList") && !editor.isActive("orderedList"),
     },
     HeadingOneItem(editor),
     HeadingTwoItem(editor),
@@ -75,9 +67,8 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
               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,10 +1,5 @@
 "use client";
-import {
-  EditorContainer,
-  EditorContentWrapper,
-  getEditorClassNames,
-  useReadOnlyEditor,
-} from "@plane/editor-core";
+import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core";
 import * as React from "react";
 
 interface IRichTextReadOnlyEditor {
@@ -51,19 +46,15 @@ const RichReadOnlyEditor = ({
   return (
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       <div className="flex flex-col">
-        <EditorContentWrapper
-          editor={editor}
-          editorContentCustomClassNames={editorContentCustomClassNames}
-        />
+        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
       </div>
     </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";