feat: Editor Core Packaging and Restructuring (#2358)
* initialized tiptap component with common tailwind config * added common tailwind config to web * abstracted upload and delete functions * removed tiptap pro extension * fixed types * removed old tailwind config and fixed plane package imports * exported tiptap editor with and without ref * updated package name to @plane/editor * finally fixed import errors * added turbo dependency for tiptap * reverted back types and fixed tailwind * migrated all components to use the common package * removed old tiptap dependency * improved dev experience to build the tiptap package before starting dev server * resolved lock life and missing deps * fixed dependency issue with react type resolution * chore: updated pulls build CI for using turbo builds * comment editor basic version added * new structure of editor components * refactored editor to not require workspace slug * added seperation of extensions and props * refactoring to LiteTextEditor and RichTextEditor * fixed global css issue with highlight js * refactoring tiptap to core/lite/rich text editor * read only editor support added * replaced all read-only instances * trimming html at start and end of content added * onSubmit on enterkey captured * removed absolute imports from editor/core package * removed absolute imports from lite-text-editor * removed absolute imports from rich-text-editor * fixed dependencies in editor package * fixed tailwind config for editor * Enter key behaviour added for Comments * fixed modal form issue * added comment editor with fixed menu * added support for range commands * modified turbo config for build pipeline of space and web projects * fixed shift enter behavior for lists * removed extra margin from access specifiers * removed tiptap instance from web * fixed bugs returning empty editor boxes * fixed toggle Underline behvaiour * updated bubble menu to use core package's utilities * added editor/core readme and fixed imports * fixed ts issues with link plugin * added usage of common dependance for slash commands * completed core package's documentation * fixed tsconfig by removing path aliases * Completed readme for rich-text-editor * Added rich text editor documentation * changed readme title of core package --------- Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
This commit is contained in:
M. Palanikannan
GitHub
parent
930a20ea7f
commit
0a8b99a074
131 changed files with 3730 additions and 2926 deletions
97
packages/editor/lite-text-editor/Readme.md
Normal file
97
packages/editor/lite-text-editor/Readme.md
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
# @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 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 Editor’s 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
|
||||
|
||||
```tsx
|
||||
<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);
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
2. Example of how to use the `LiteTextEditorWithRef` component
|
||||
|
||||
```tsx
|
||||
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"
|
||||
/>
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue