diff --git a/packages/editor/lite-text-editor/Readme.md b/packages/editor/lite-text-editor/Readme.md index b6879f1a0..948e2c34b 100644 --- a/packages/editor/lite-text-editor/Readme.md +++ b/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 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. +- **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. -## 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. | -| `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. | +| `uploadFile` | `(file: File) => Promise` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. | +| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise` | 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. | @@ -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 { - setShowAlert(true); - setIsSubmitting("submitting"); - onChange(description_html); - handleSubmit(handleDescriptionFormSubmit)().finally(() => - setIsSubmitting("submitted") - ); - }} -/> + 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(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 ( + { + 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 + ``` diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx index 0b9386724..7a497d9aa 100644 --- a/packages/editor/lite-text-editor/src/ui/index.tsx +++ b/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 = ({
- {(editable !== false) && - (
- -
) - } +
+ +
); diff --git a/packages/editor/rich-text-editor/Readme.md b/packages/editor/rich-text-editor/Readme.md index a0dab0bbd..c8414f62d 100644 --- a/packages/editor/rich-text-editor/Readme.md +++ b/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 diff --git a/space/components/issues/peek-overview/comment/add-comment.tsx b/space/components/issues/peek-overview/comment/add-comment.tsx index c7852a47b..2595dab42 100644 --- a/space/components/issues/peek-overview/comment/add-comment.tsx +++ b/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_html: "", diff --git a/space/components/issues/peek-overview/comment/comment-detail-card.tsx b/space/components/issues/peek-overview/comment/comment-detail-card.tsx index 6857fca71..f6b4d9bf3 100644 --- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx +++ b/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; diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx index 2fb3912d1..b5d91adee 100644 --- a/web/components/issues/comment/add-comment.tsx +++ b/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 = { access: "INTERNAL", diff --git a/web/components/issues/comment/comment-card.tsx b/web/components/issues/comment/comment-card.tsx index 89a65c2d3..29ba21cd2 100644 --- a/web/components/issues/comment/comment-card.tsx +++ b/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; diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx index 49ef7eb0f..aa89a9f5d 100644 --- a/web/components/issues/draft-issue-form.tsx +++ b/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 = { project: "", diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx index 1c8c39e49..cfa300b6c 100644 --- a/web/components/issues/form.tsx +++ b/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 = { project: "", diff --git a/web/components/pages/create-update-block-inline.tsx b/web/components/pages/create-update-block-inline.tsx index 5f7fa0fac..49d6fbeed 100644 --- a/web/components/pages/create-update-block-inline.tsx +++ b/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; diff --git a/web/components/pages/single-page-block.tsx b/web/components/pages/single-page-block.tsx index 356186882..e738c78e4 100644 --- a/web/components/pages/single-page-block.tsx +++ b/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; diff --git a/web/components/web-view/add-comment.tsx b/web/components/web-view/add-comment.tsx index 4c8ae6fa9..fe7e3eb04 100644 --- a/web/components/web-view/add-comment.tsx +++ b/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 = { access: "INTERNAL", @@ -78,30 +78,30 @@ export const AddComment: React.FC = ({ disabled = false, onSubmit }) => { return (
-
+
+ ( ( - ( -

" : commentValue} - 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 }} - /> - )} + render={({ field: { onChange: onCommentChange, value: commentValue } }) => ( +

" : commentValue} + 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 }} /> )} /> -
+ )} + /> +
{ const [user, setUser] = useState(); diff --git a/web/pages/m/[workspaceSlug]/editor.tsx b/web/pages/m/[workspaceSlug]/editor.tsx index a79424fb7..e385eef9f 100644 --- a/web/pages/m/[workspaceSlug]/editor.tsx +++ b/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);