plane/packages/editor/extensions
sriram veeraghanta 8d15b9e7de
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>
2023-12-10 15:48:10 +05:30
..
src chore: format all files in monorepo (#3054) 2023-12-10 15:48:10 +05:30
.eslintrc.js chore: format all files in monorepo (#3054) 2023-12-10 15:48:10 +05:30
.prettierignore chore: format all files in monorepo (#3054) 2023-12-10 15:48:10 +05:30
.prettierrc chore: format all files in monorepo (#3054) 2023-12-10 15:48:10 +05:30
package.json chore: update lucide-react package to the latest version 2023-12-10 01:10:59 +05:30
postcss.config.js image can't be inserted inside table (#2904) 2023-12-07 19:59:35 +05:30
Readme.md image can't be inserted inside table (#2904) 2023-12-07 19:59:35 +05:30
tailwind.config.js image can't be inserted inside table (#2904) 2023-12-07 19:59:35 +05:30
tsconfig.json image can't be inserted inside table (#2904) 2023-12-07 19:59:35 +05:30
tsup.config.ts image can't be inserted inside table (#2904) 2023-12-07 19:59:35 +05:30

@plane/editor-extensions

Description

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

  • 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 Editors state via a side effect of some external action from within the application code.

    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 (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.
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.
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

  1. Here is an example of how to use the RichTextEditor component
<LiteTextEditor
  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);
  }}
/>
  1. Example of how to use the LiteTextEditorWithRef component
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

<LiteReadOnlyEditor
  value={comment.comment_html}
  customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
/>