[WIKI-585] refactor: editor core without props

apps/live/src/core/lib/page.ts

@@ -1,5 +1,5 @@
 // helpers
-import { getAllDocumentFormatsFromBinaryData, getBinaryDataFromHTMLString } from "@/core/helpers/page.js";
+import { getAllDocumentFormatsFromBinaryData, getBinaryDataFromHTMLString } from "@plane/editor/lib";
 // services
 import { PageService } from "@/core/services/page.service.js";
 import { manualLogger } from "../helpers/logger.js";
@@ -19,7 +19,9 @@ export const updatePageDescription = async (
   const projectId = params.get("projectId")?.toString();
   if (!workspaceSlug || !projectId || !cookie) return;
 
-  const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromBinaryData(updatedDescription);
+  const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromBinaryData({
+    descriptionBinary: updatedDescription,
+  });
   try {
     const payload = {
       description_binary: contentBinaryEncoded,
@@ -44,7 +46,9 @@ const fetchDescriptionHTMLAndTransform = async (
 
   try {
     const pageDetails = await pageService.fetchDetails(workspaceSlug, projectId, pageId, cookie);
-    const { contentBinary } = getBinaryDataFromHTMLString(pageDetails.description_html ?? "<p></p>");
+    const contentBinary = getBinaryDataFromHTMLString({
+      descriptionHTML: pageDetails.description_html ?? "<p></p>",
+    });
     return contentBinary;
   } catch (error) {
     manualLogger.error("Error while transforming from HTML to Uint8Array", error);

apps/live/src/server.ts

@@ -5,17 +5,17 @@
 import helmet from "helmet";
 // hocuspocus server
 // helpers
-import { convertHTMLDocumentToAllFormats } from "@/core/helpers/convert-document.js";
 import { logger, manualLogger } from "@/core/helpers/logger.js";
 import { getHocusPocusServer } from "@/core/hocuspocus-server.js";
 // types
 import { TConvertDocumentRequestBody } from "@/core/types/common.js";
+import { getAllDocumentFormatsFromHTMLString } from "@plane/editor/lib";
 
 export class Server {
   private app: any;
   private router: any;
   private hocuspocusServer: any;
   private serverInstance: any;
 
   constructor() {
     this.app = express();
@@ -54,7 +54,7 @@
       res.status(200).json({ status: "OK" });
     });
 
     this.router.ws("/collaboration", (ws: any, req: Request) => {
       try {
         this.hocuspocusServer.handleConnection(ws, req);
       } catch (err) {
@@ -72,9 +72,8 @@
           });
           return;
         }
-        const { description, description_binary } = convertHTMLDocumentToAllFormats({
-          document_html: description_html,
-          variant,
+        const { description, description_binary } = getAllDocumentFormatsFromHTMLString({
+          descriptionHTML: description_html,
         });
         res.status(200).json({
           description,
@@ -117,7 +116,7 @@
 server.listen();
 
 // Graceful shutdown on unhandled rejection
 process.on("unhandledRejection", async (err: any) => {
   manualLogger.info("Unhandled Rejection: ", err);
   manualLogger.info(`UNHANDLED REJECTION! 💥 Shutting down...`);
   await server.destroy();

apps/web/core/hooks/use-page-fallback.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
 // plane editor
-import { type EditorRefApi, getBinaryDataFromDocumentEditorHTMLString } from "@plane/editor";
+import { type EditorRefApi, getBinaryDataFromHTMLString } from "@plane/editor";
 // plane types
 import { TDocumentPayload } from "@plane/types";
 // hooks
@@ -27,7 +27,9 @@ export const usePageFallback = (args: TArgs) => {
       if (latestEncodedDescription && latestEncodedDescription.byteLength > 0) {
         latestDecodedDescription = new Uint8Array(latestEncodedDescription);
       } else {
-        latestDecodedDescription = getBinaryDataFromDocumentEditorHTMLString("<p></p>");
+        latestDecodedDescription = getBinaryDataFromHTMLString({
+          descriptionHTML: "<p></p>",
+        });
       }
 
       editor.setProviderDocument(latestDecodedDescription);

packages/editor/src/ce/extensions/parser-kit.ts

@@ -0,0 +1,3 @@
+import { Extensions } from "@tiptap/core";
+
+export const PARSER_KIT_ADDITIONAL_EXTENSIONS: Extensions = [];

packages/editor/src/core/components/editors/document/collaborative-editor.tsx

@@ -1,13 +1,10 @@
-import type { Extensions } from "@tiptap/core";
-import React, { useMemo } from "react";
+import React from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // components
 import { PageRenderer } from "@/components/editors";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
-// extensions
-import { WorkItemEmbedExtension } from "@/extensions";
 // helpers
 import { getEditorClassNames } from "@/helpers/common";
 // hooks
@@ -21,7 +18,7 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     bubbleMenuEnabled = true,
     containerClassName,
     documentLoaderClassName,
-    extensions: externalExtensions = [],
+    extensions,
     disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editable,
@@ -47,20 +44,6 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     user,
   } = props;
 
-  const extensions: Extensions = useMemo(() => {
-    const allExtensions = [...externalExtensions];
-
-    if (embedHandler?.issue) {
-      allExtensions.push(
-        WorkItemEmbedExtension({
-          widgetCallback: embedHandler.issue.widgetCallback,
-        })
-      );
-    }
-
-    return allExtensions;
-  }, [externalExtensions, embedHandler.issue]);
-
   // use document editor
   const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
     disabledExtensions,

packages/editor/src/core/components/editors/document/editor.tsx

@@ -7,7 +7,7 @@ import { PageRenderer } from "@/components/editors";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
 // extensions
-import { HeadingListExtension, WorkItemEmbedExtension, SideMenuExtension } from "@/extensions";
+import { HeadingListExtension, SideMenuExtension } from "@/extensions";
 // helpers
 import { getEditorClassNames } from "@/helpers/common";
 // hooks
@@ -39,13 +39,6 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
   } = props;
   const extensions: Extensions = useMemo(() => {
     const additionalExtensions: Extensions = [];
-    if (embedHandler?.issue) {
-      additionalExtensions.push(
-        WorkItemEmbedExtension({
-          widgetCallback: embedHandler.issue.widgetCallback,
-        })
-      );
-    }
     additionalExtensions.push(
       SideMenuExtension({
         aiEnabled: !disabledExtensions?.includes("ai"),

packages/editor/src/core/extensions/index.ts

@@ -8,8 +8,6 @@ export * from "./mentions";
 export * from "./slash-commands";
 export * from "./table";
 export * from "./typography";
-export * from "./work-item-embed";
-export * from "./core-without-props";
 export * from "./custom-color";
 export * from "./enter-key";
 export * from "./extensions";

packages/editor/src/core/extensions/core-without-props.ts → packages/editor/src/core/extensions/parser-kit.ts

@@ -6,7 +6,7 @@ import StarterKit from "@tiptap/starter-kit";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
 // plane editor imports
-import { CoreEditorAdditionalExtensionsWithoutProps } from "@/plane-editor/extensions/core/without-props";
+import { PARSER_KIT_ADDITIONAL_EXTENSIONS } from "@/plane-editor/extensions/parser-kit";
 // extensions
 import { CustomCalloutExtensionConfig } from "./callout/extension-config";
 import { CustomCodeBlockExtensionWithoutProps } from "./code/without-props";
@@ -21,9 +21,8 @@ import { CustomMentionExtensionConfig } from "./mentions/extension-config";
 import { CustomQuoteExtension } from "./quote";
 import { TableHeader, TableCell, TableRow, Table } from "./table";
 import { CustomTextAlignExtension } from "./text-align";
-import { WorkItemEmbedExtensionConfig } from "./work-item-embed/extension-config";
 
-export const CoreEditorExtensionsWithoutProps = [
+export const PARSER_KIT = [
   StarterKit.configure({
     bulletList: {
       HTMLAttributes: {
@@ -99,7 +98,5 @@ export const CoreEditorExtensionsWithoutProps = [
   CustomTextAlignExtension,
   CustomCalloutExtensionConfig,
   CustomColorExtension,
-  ...CoreEditorAdditionalExtensionsWithoutProps,
+  ...PARSER_KIT_ADDITIONAL_EXTENSIONS,
 ];
-
-export const DocumentEditorExtensionsWithoutProps = [WorkItemEmbedExtensionConfig];

packages/editor/src/core/helpers/editor-commands.ts

@@ -1,4 +1,5 @@
 import type { Editor, Range } from "@tiptap/core";
+import type { Level } from "@tiptap/extension-heading";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
@@ -12,7 +13,7 @@ export const setText = (editor: Editor, range?: Range) => {
   else editor.chain().focus().setNode(CORE_EXTENSIONS.PARAGRAPH).run();
 };
 
-export const toggleHeading = (editor: Editor, level: 1 | 2 | 3 | 4 | 5 | 6, range?: Range) => {
+export const toggleHeading = (editor: Editor, level: Level, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).setNode(CORE_EXTENSIONS.HEADING, { level }).run();
   else editor.chain().focus().toggleHeading({ level }).run();
 };