added editor/core readme and fixed imports

packages/editor/core/Readme.md

@@ -0,0 +1,12 @@
+# README for @plane/editor-core
+
+## Description
+
+The `@plane/editor-core` package serves as the foundation for our editor system. It provides the base functionality for our other editor packages, but it will not be used directly in any of the projects.
+
+## Key Features
+
+- **Extensive Utilities**: We provide a wide range of utilities for extending the core itself. These include merging classes, adding new extensions, custom props, menu items, and their commands. This allows for extensive customization and flexibility in the Editors created using our `editor-core` package.
+- **Content Trimming**: The Editor’s content is now automatically trimmed of empty line breaks from the start and end before submitting it to the backend. This ensures cleaner, more consistent data.
+- **Value Cleaning**: The Editor’s value is cleaned at the editor core level, eliminating the need for additional validation before sending from our app. This results in cleaner code and less potential for errors.
+- **Turbo Pipeline**: We have added a turbo pipeline for both dev and build tasks for the editor package. This results in faster, more efficient development and build processes.

packages/editor/core/src/index.ts

@@ -3,8 +3,7 @@
 // import "./styles/editor.css";
 
 // utils
-export { cn } from "./lib/utils";
-export { getEditorClassNames } from "./lib/utils";
+export * from "./lib/utils";
 export { startImageUpload } from "./ui/plugins/upload-image";
 
 // components

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

@@ -30,4 +30,16 @@ export const getTrimmedHTML = (html: string) => {
   html = html.replace(/^(<p><\/p>)+/, '');
   html = html.replace(/(<p><\/p>)+$/, '');
   return html;
-}
+}
+
+export const isValidHttpUrl = (string: string): boolean => {
+  let url: URL;
+
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+}

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

@@ -16,8 +16,8 @@ import { TableRow } from "@tiptap/extension-table-row";
 import ImageExtension from "./image";
 
 import { DeleteImage } from "../../types/delete-image";
+import { isValidHttpUrl } from "../../lib/utils";
 
-import isValidHttpUrl from "../menus/bubble-menu/utils"
 
 export const CoreEditorExtensions = (
   deleteFile: DeleteImage,

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

@@ -13,8 +13,8 @@ import { Table } from "../extensions/table";
 import { TableHeader } from "../extensions/table/table-header";
 import { TableRow } from "@tiptap/extension-table-row";
 
-import isValidHttpUrl from "../menus/bubble-menu/utils";
 import ReadOnlyImageExtension from "../extensions/image/read-only-image";
+import { isValidHttpUrl } from "../../lib/utils";
 
 export const CoreReadOnlyEditorExtensions  = [
   StarterKit.configure({

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

@@ -0,0 +1,55 @@
+# @plane/rich-text-editor
+
+## Description
+
+The `@plane/lite-text-editor` package extends from the `editor-core` package, inheriting its base functionality while adding its own unique features and primarily powers the comment editor.
+
+## Key Features
+
+- **Comment Editor**: A new Comment editor (lite-text-editor). This editor includes a fixed menu and has built-in support for toggling access modifiers, adding marks, images, tables and lists.
+- **Exported Components**: There are two components exported from each type of Editor (with and without Ref), you can choose to use the `withRef` instance whenever you want to control the Editor’s state via a side effect of some external action from within the application code.
+- **Read Only Editor Instances**: We have added a really light weight `Read Only` Editor instance for both the Rich and Lite editor types.
+- **WorkspaceSlug Removal**: There is no longer a need to pass in WorkspaceSlug to the Editor Instance. This simplifies the process of using our editor instances.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `uploadFile` | `UploadImage` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
+| `deleteFile` | `DeleteImage` | A function that handles deleting an image. It takes the workspaceImageIdSlug as input and handles the process of deleting that image. |
+| `value` | `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
+
+Here is an example of how to use the `LiteTextEditor` component:
+
+```jsx
+<LiteTextEditor
+  uploadFile={fileService.uploadFile}
+  deleteFile={fileService.deleteImage}
+  value={value}
+  debouncedUpdatesEnabled={true}
+  setShouldShowAlert={setShowAlert}
+  setIsSubmitting={setIsSubmitting}
+  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);
+    setIsSubmitting("submitting");
+    onChange(description_html);
+    handleSubmit(handleDescriptionFormSubmit)().finally(() =>
+      setIsSubmitting("submitted")
+    );
+  }}
+/>
+```

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

@@ -0,0 +1,54 @@
+# README for @plane/rich-text-editor
+
+## Description
+
+The `@plane/rich-text-editor` package extends from the `editor-core` package, inheriting its base functionality while adding its own unique features.
+
+## Key Features
+
+- **Comment Editor**: A new Comment editor (lite-text-editor). This editor includes a fixed menu and has built-in support for toggling access modifiers, adding marks, images, tables and lists.
+- **Exported Components**: There are two components exported from each type of Editor (with and without Ref), you can choose to use the `withRef` instance whenever you want to control the Editor’s state via a side effect of some external action from within the application code.
+- **Read Only Editor Instances**: We have added a really light weight `Read Only` Editor instance for both the Rich and Lite editor types.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `uploadFile` | `UploadImage` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
+| `deleteFile` | `DeleteImage` | A function that handles deleting an image. It takes the workspaceImageIdSlug as input and handles the process of deleting that image. |
+| `value` | `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
+
+Here is an example of how to use the `RichTextEditor` component:
+
+```jsx
+<RichTextEditor
+  uploadFile={fileService.uploadFile}
+  deleteFile={fileService.deleteImage}
+  value={value}
+  debouncedUpdatesEnabled={true}
+  setShouldShowAlert={setShowAlert}
+  setIsSubmitting={setIsSubmitting}
+  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);
+    setIsSubmitting("submitting");
+    onChange(description_html);
+    handleSubmit(handleDescriptionFormSubmit)().finally(() =>
+      setIsSubmitting("submitted")
+    );
+  }}
+/>
+```

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

@@ -1,8 +1,7 @@
 import { Editor } from "@tiptap/core";
 import { Check, Trash } from "lucide-react";
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
-import isValidHttpUrl from "./utils";
-import { cn } from "@plane/editor-core";
+import { cn, isValidHttpUrl } from "@plane/editor-core";
 
 interface LinkSelectorProps {
   editor: Editor;

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

@@ -1,11 +0,0 @@
-export default function isValidHttpUrl(string: string): boolean {
-  let url: URL;
-
-  try {
-    url = new URL(string);
-  } catch (_) {
-    return false;
-  }
-
-  return url.protocol === "http:" || url.protocol === "https:";
-}