feat: Editor Core Packaging and Restructuring

[Palanikannan1437]

Description

This PR represents a significant milestone in our ongoing efforts to enhance the Developer Experience (DX) and functionality of our editor packages. After weeks of dedicated development, we have successfully restructured our editor packaging, resulting in a more streamlined, efficient, and powerful system.

Key Changes

1. Introduction of New Packages:

We now have created three distinct packages

  1. `@plane/editor-core`, 
  2. `@plane/rich-text-editor`, 
  3. `@plane/lite-text-editor`. 

The rich-text-editor and lite-text-editor packages extend from the editor-core package, inheriting its base functionality while adding their own unique features. The @plane/editor-core package serves as the foundation for our editor system, but it will not be used directly in any of the projects.

New 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.
• 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.
• Read Only Editor Instances: We have added a really light weight Read Only Editor instance for both the Rich and Lite editor types.
• 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.
• 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.

Refactoring

• Editor Replacement: Replaced all necessary occurrences with appropriate type of editor
  1. Rich/LiteTextEditor,
  2. Rich/LiteTextEditorWithRef,
  3. Rich/LiteReadOnlyEditor,
  4. Rich/LiteReadOnlyEditorWithRef,
• CI Update: We have updated our CI to accommodate the new architecture. This ensures that our integration processes work smoothly with the new structure.
• Tiptap Folder Removal: We have removed the tiptap folder and its dependencies from web/components and space/components. This results in a cleaner, more streamlined project structure.
• CSS and Config Fixes: We have resolved a global CSS issue caused by Highlight js for CodeBlocks extension and fixed our tailwind config to include prose-classes and load plugins properly in a monorepo. This results in more consistent, reliable styling and configuration.

Testing:
Before merging this PR, please test it locally to ensure everything works as expected, especially with the new build steps.

How to use the different packages

Installation locally in the monorepo

1. Add this in your project's package.json

"dependencies": {
     "@plane/lite-text-editor/": "*",
      "@plane/rich-text-editor/": "*"
},

2. Run yarn to install the package

Usage and customization

The TiptapEditor component is a highly customizable rich text editor based on the ProseMirror toolkit, wrapped in a React component. As such, it can be used as a standard React component within our application.

Here's a brief overview of the TiptapEditor component's props and how to use them:

Sure, here's the information in a markdown table format:

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.

Here is an example of how to use the RichTextEditor component:

<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")
    );
  }}
/>

In this example, fileService.uploadFile and fileService.deleteImage are functions that handle file upload and deletion, respectively. The value and workspaceSlug are provided as props, and several other props are used to configure the editor's appearance and behavior. The onChange prop

Similarly you can use LiteTextEditor,

<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")
    );
  }}
/>

For the Read Only instances, like LiteReadOnlyTextEditor, you can do this,

< LiteReadOnlyTextEditor
  value={value}
  customClassName={
    isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
  }
  noBorder={!isAllowed}
/>

What about fine control over Editor's content state?

You can pass a ref to the editor by using RichTextEditorWithRef in the following way,

<RichTextEditorWithRef
        uploadFile={fileService.uploadFile}
        deleteFile={fileService.deleteImage}
        workspaceSlug={workspace_slug as string}
        ref={editorRef}
        value={value}
         customClassName="p-3 min-h-[50px] shadow-sm"
         debouncedUpdatesEnabled={false}
         onChange={ comment_html: string) => {
             onChange(comment_html);
          }}
/>

Future Plans

• The packages can be readily shipped to npm if needed in the future.

[sriramveeraghanta]

@Palanikannan1437 Can you please add README.md file inside each package you created and update the document on how to use it in dev and production?

[Palanikannan1437]

@Palanikannan1437 Can you please add README.md file inside each package you created and update the document on how to use it in dev and production?

Sure thing, I'll make those changes 🙌

[Palanikannan1437]

@Palanikannan1437 Can you please add README.md file inside each package you created and update the document on how to use it in dev and production?

I've added the updated docs for the editor core, rich text editor and lite text editor with detailed description, props passable, examples and exported components in detail as you had asked.

https://github.com/makeplane/plane/blob/comment-editor/packages/editor/core/Readme.md
https://github.com/makeplane/plane/blob/comment-editor/packages/editor/rich-text-editor/Readme.md
https://github.com/makeplane/plane/blob/comment-editor/packages/editor/lite-text-editor/Readme.md