Added rich text editor documentation

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

@@ -1,23 +1,26 @@
-# @plane/rich-text-editor
+# @plane/lite-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.
+The `@plane/lite-text-editor` package extends from the `editor-core` package, inheriting its base functionality while adding its own unique features of Custom control over Enter key, etc.
 
 ## 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 the Lite text 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.
-- **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
+  `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)
+  `LiteReadOnlyEditor` &`LiteReadOnlyEditorWithRef`
+
+## LiteTextEditor
 
 | 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. |
+| `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` | `DeleteImage` | A function that handles deleting an image. It takes the workspaceImageIdSlug as input and handles the process of deleting that image. |
+| `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` | `string` | The initial content of the editor. |
+| `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. |
@@ -27,29 +30,68 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in
 | `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
+### Usage
 
-Here is an example of how to use the `LiteTextEditor` component:
+1. Here is an example of how to use the `RichTextEditor` component
 
-```jsx
+```tsx
 <LiteTextEditor
-  uploadFile={fileService.uploadFile}
+      onEnterKeyPress={handleSubmit(handleCommentUpdate)}
-  deleteFile={fileService.deleteImage}
+      uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-  value={value}
+      deleteFile={fileService.deleteImage}
-  debouncedUpdatesEnabled={true}
+      value={value}
-  setShouldShowAlert={setShowAlert}
+      debouncedUpdatesEnabled={false}
-  setIsSubmitting={setIsSubmitting}
+      customClassName="min-h-[50px] p-3 shadow-sm"
-  customClassName={
+      onChange={(comment_json: Object, comment_html: string) => {
-    isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
+        onChange(comment_html);
-  }
+      }}
-  noBorder={!isAllowed}
+    />
-  onChange={(description: Object, description_html: string) => {
+```
-    setShowAlert(true);
+
-    setIsSubmitting("submitting");
+2. Example of how to use the `LiteTextEditorWithRef` component
-    onChange(description_html);
+
-    handleSubmit(handleDescriptionFormSubmit)().finally(() =>
+```tsx
-      setIsSubmitting("submitted")
+  const editorRef = useRef<any>(null);
-    );
+
-  }}
+  // 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();
+
+  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. |
+
+### 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"
+  />
 ```

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

@@ -18,7 +18,6 @@ interface ILiteTextEditor {
   onChange?: (json: any, html: string) => void;
   setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
   setShouldShowAlert?: (showAlert: boolean) => void;
-  editable?: boolean;
   forwardedRef?: any;
   debouncedUpdatesEnabled?: boolean;
   commentAccessSpecifier?: {
@@ -46,7 +45,6 @@ interface EditorHandle {
 const LiteTextEditor = ({
   onChange,
   debouncedUpdatesEnabled,
-  editable,
   setIsSubmitting,
   setShouldShowAlert,
   editorContentCustomClassNames,
@@ -63,7 +61,6 @@ const LiteTextEditor = ({
   const editor = useEditor({
     onChange,
     debouncedUpdatesEnabled,
-    editable,
     setIsSubmitting,
     setShouldShowAlert,
     value,
@@ -81,11 +78,9 @@ const LiteTextEditor = ({
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       <div className="flex flex-col">
         <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
-        {(editable !== false) &&
+        <div className="w-full mt-4">
-          (<div className="w-full mt-4">
+          <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} commentAccessSpecifier={commentAccessSpecifier} />
-            <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} commentAccessSpecifier={commentAccessSpecifier} />
+        </div>
-          </div>)
-        }
       </div>
     </EditorContainer >
   );

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

@@ -2,7 +2,7 @@
 
 ## Description
 
-The `@plane/rich-text-editor` package extends from the `editor-core` package, inheriting its base functionality while adding its own unique features of Slack Commands and many more.
+The `@plane/rich-text-editor` package extends from the `editor-core` package, inheriting its base functionality while adding its own unique features of Slash Commands and many more.
 
 ## Key Features
 

space/components/issues/peek-overview/comment/add-comment.tsx

@@ -12,8 +12,8 @@ import { SecondaryButton } from "components/ui";
 import { Comment } from "types/issue";
 // components
 import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+import fileService from "services/file.service";
 // service
-import fileService from "@/services/file.service";
 
 const defaultValues: Partial<Comment> = {
   comment_html: "",

space/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -18,8 +18,8 @@ import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import { Comment } from "types/issue";
+import fileService from "services/file.service";
 // services
-import fileService from "@/services/file.service";
 
 type Props = {
   workspaceSlug: string;

web/components/issues/comment/add-comment.tsx

@@ -9,7 +9,7 @@ import { SecondaryButton } from "components/ui";
 // types
 import type { IIssueComment } from "types";
 // services
-import fileService from "@/services/file.service";
+import fileService from "services/file.service";
 
 const defaultValues: Partial<IIssueComment> = {
   access: "INTERNAL",

web/components/issues/comment/comment-card.tsx

@@ -14,8 +14,8 @@ import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-te
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import type { IIssueComment } from "types";
+import fileService from "services/file.service";
 // services
-import fileService from "@/services/file.service";
 
 type Props = {
   comment: IIssueComment;

web/components/issues/draft-issue-form.tsx

@@ -31,8 +31,8 @@ import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
+import fileService from "services/file.service";
 // services
-import fileService from "@/services/file.service";
 
 const defaultValues: Partial<IIssue> = {
   project: "",

web/components/issues/form.tsx

@@ -31,8 +31,8 @@ import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
+import fileService from "services/file.service";
 // services
-import fileService from "@/services/file.service";
 
 const defaultValues: Partial<IIssue> = {
   project: "",

web/components/pages/create-update-block-inline.tsx

@@ -18,7 +18,7 @@ import { ICurrentUserResponse, IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
 // services
-import fileService from "@/services/file.service";
+import fileService from "services/file.service";
 
 type Props = {
   handleClose: () => void;

web/components/pages/single-page-block.tsx

@@ -39,7 +39,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { ICurrentUserResponse, IIssue, IPageBlock, IProject } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-import fileService from "@/services/file.service";
+import fileService from "services/file.service";
 
 type Props = {
   block: IPageBlock;

web/components/web-view/add-comment.tsx

@@ -15,11 +15,11 @@ import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
 import { Send } from "lucide-react";
 
 // ui
-import { Icon, SecondaryButton, Tooltip, PrimaryButton } from "components/ui";
+import { PrimaryButton } from "components/ui";
 
 // types
 import type { IIssueComment } from "types";
-import fileService from "@/services/file.service";
+import fileService from "services/file.service";
 
 const defaultValues: Partial<IIssueComment> = {
   access: "INTERNAL",
@@ -78,30 +78,30 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
 
   return (
     <form className="w-full flex gap-x-2" onSubmit={handleSubmit(handleAddComment)}>
-       <div className="relative flex-grow">
+      <div className="relative flex-grow">
+        <Controller
+          name="access"
+          control={control}
+          render={({ field: { onChange: onAccessChange, value: accessValue } }) => (
             <Controller
-              name="access"
+              name="comment_html"
               control={control}
-              render={({ field: { onChange: onAccessChange, value: accessValue } }) => (
+              render={({ field: { onChange: onCommentChange, value: commentValue } }) => (
-                <Controller
+                <LiteTextEditorWithRef
-                  name="comment_html"
+                  uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
-                  control={control}
+                  deleteFile={fileService.deleteImage}
-                  render={({ field: { onChange: onCommentChange, value: commentValue } }) => (
+                  ref={editorRef}
-                    <LiteTextEditorWithRef
+                  value={!commentValue || commentValue === "" ? "<p></p>" : commentValue}
-                      uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                  customClassName="p-3 min-h-[100px] shadow-sm"
-                      deleteFile={fileService.deleteImage}
+                  debouncedUpdatesEnabled={false}
-                      ref={editorRef}
+                  onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
-                      value={!commentValue || commentValue === "" ? "<p></p>" : commentValue}
+                  commentAccessSpecifier={{ accessValue, onAccessChange, showAccessSpecifier, commentAccess }}
-                      customClassName="p-3 min-h-[100px] shadow-sm"
-                      debouncedUpdatesEnabled={false}
-                      onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
-                      commentAccessSpecifier={{ accessValue, onAccessChange, showAccessSpecifier, commentAccess }}
-                    />
-                  )}
                 />
               )}
             />
-          </div>
+          )}
+        />
+      </div>
 
       <div className="inline">
         <PrimaryButton

web/components/web-view/issue-web-view-form.tsx

@@ -21,8 +21,8 @@ import { Label } from "components/web-view";
 
 // types
 import type { IIssue } from "types";
+import fileService from "services/file.service";
 // services
-import fileService from "@/services/file.service";
 
 type Props = {
   isAllowed: boolean;

web/pages/[workspaceSlug]/editor.tsx

@@ -11,7 +11,7 @@ import DefaultLayout from "layouts/default-layout";
 import Image from "next/image";
 import userService from "services/user.service";
 import { useRouter } from "next/router";
-import fileService from "@/services/file.service";
+import fileService from "services/file.service";
 
 const Editor: NextPage = () => {
   const [user, setUser] = useState<ICurrentUserResponse | undefined>();

web/pages/m/[workspaceSlug]/editor.tsx

@@ -16,8 +16,8 @@ import WebViewLayout from "layouts/web-view-layout";
 // components
 import { RichTextEditor } from "@plane/rich-text-editor";
 import { PrimaryButton, Spinner } from "components/ui";
+import fileService from "services/file.service";
 // services
-import fileService from "@/services/file.service";
 
 const Editor: NextPage = () => {
   const [isLoading, setIsLoading] = useState(false);