makeplane · sriramveeraghanta · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023
diff --git a/CONTRIBUTING.md b/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,20 +81,20 @@ 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
 
 Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Discord Server](https://discord.com/invite/A92xrEGCge).
 
 ## 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.
diff --git a/ENV_SETUP.md b/ENV_SETUP.md
@@ -1,8 +1,10 @@
 # Environment Variables
+
 
-Environment variables are distributed in various files. Please refer them carefully. 
+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.

diff --git a/packages/editor/core/Readme.md b/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

diff --git a/packages/editor/core/src/lib/editor-commands.ts b/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();
 };
-
diff --git a/packages/editor/core/src/lib/utils.ts b/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:";
-}
+};
diff --git a/packages/editor/core/src/types/mention-suggestion.ts b/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;
diff --git a/packages/editor/core/src/ui/components/editor-content.tsx b/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>
 );