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>

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

@@ -16,11 +16,13 @@ import useReloadConfirmations from "hooks/use-reload-confirmation";
 import { TextArea } from "components/ui";
 
 // components
-import { TipTapEditor } from "components/tiptap";
+import { RichTextEditor } from "@plane/rich-text-editor";
 import { Label } from "components/web-view";
 
 // types
 import type { IIssue } from "types";
+import fileService from "services/file.service";
+// services
 
 type Props = {
   isAllowed: boolean;
@@ -117,39 +119,34 @@ export const IssueWebViewForm: React.FC<Props> = (props) => {
           <Controller
             name="description_html"
             control={control}
-            render={({ field: { value, onChange } }) => {
-              if (!value) return <></>;
-
-              return (
-                <TipTapEditor
-                  value={
-                    !value ||
-                    value === "" ||
-                    (typeof value === "object" && Object.keys(value).length === 0)
-                      ? "<p></p>"
-                      : value
-                  }
-                  workspaceSlug={workspaceSlug!.toString()}
-                  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) => {
-                    if (!isAllowed) return;
-                    setShowAlert(true);
-                    setIsSubmitting("submitting");
-                    onChange(description_html);
-                    handleSubmit(handleDescriptionFormSubmit)().finally(() =>
-                      setIsSubmitting("submitted")
-                    );
-                  }}
-                  editable={isAllowed}
-                />
-              );
-            }}
+            render={({ field: { value, onChange } }) => (
+              <RichTextEditor
+                uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                deleteFile={fileService.deleteImage}
+                value={
+                  !value ||
+                  value === "" ||
+                  (typeof value === "object" && Object.keys(value).length === 0)
+                    ? "<p></p>"
+                    : 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")
+                  );
+                }}
+              />
+            )}
           />
           <div
             className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${