[WIKI-644] fix: remove unnecessary props from the editor package #7726

apps/web/core/components/editor/document/editor.tsx

@@ -1,6 +1,12 @@
 import React, { forwardRef } from "react";
 // plane imports
-import { DocumentEditorWithRef, type EditorRefApi, type IDocumentEditorProps, type TFileHandler } from "@plane/editor";
+import {
+  DocumentEditorWithRef,
+  IEditorPropsExtended,
+  type EditorRefApi,
+  type IDocumentEditorProps,
+  type TFileHandler,
+} from "@plane/editor";
 import { MakeOptional, TSearchEntityRequestPayload, TSearchResponse } from "@plane/types";
 import { cn } from "@plane/utils";
 // hooks
@@ -8,15 +14,14 @@ import { useEditorConfig, useEditorMention } from "@/hooks/editor";
 import { useMember } from "@/hooks/store/use-member";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
-import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed";
 // local imports
 import { EditorMentionsRoot } from "../embeds/mentions";
 
 type DocumentEditorWrapperProps = MakeOptional<
-  Omit<IDocumentEditorProps, "fileHandler" | "mentionHandler" | "embedHandler" | "user" | "extendedEditorProps">,
+  Omit<IDocumentEditorProps, "fileHandler" | "mentionHandler" | "user" | "extendedEditorProps">,
   "disabledExtensions" | "editable" | "flaggedExtensions"
 > & {
-  embedHandler?: Partial<IDocumentEditorProps["embedHandler"]>;
+  extendedEditorProps?: Partial<IEditorPropsExtended>;
   workspaceSlug: string;
   workspaceId: string;
   projectId?: string;
@@ -35,7 +40,7 @@ export const DocumentEditor = forwardRef<EditorRefApi, DocumentEditorWrapperProp
   const {
     containerClassName,
     editable,
-    embedHandler,
+    extendedEditorProps,
     workspaceSlug,
     workspaceId,
     projectId,
@@ -54,11 +59,6 @@ export const DocumentEditor = forwardRef<EditorRefApi, DocumentEditorWrapperProp
   });
   // editor config
   const { getEditorFileHandlers } = useEditorConfig();
-  // issue-embed
-  const { issueEmbedProps } = useIssueEmbed({
-    projectId,
-    workspaceSlug,
-  });
 
   return (
     <DocumentEditorWithRef
@@ -81,11 +81,7 @@ export const DocumentEditor = forwardRef<EditorRefApi, DocumentEditorWrapperProp
         renderComponent: EditorMentionsRoot,
         getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }),
       }}
-      embedHandler={{
+      extendedEditorProps={extendedEditorProps}
-        issue: issueEmbedProps,
-        ...embedHandler,
-      }}
-      extendedEditorProps={{}}
       {...rest}
       containerClassName={cn("relative pl-3 pb-3", containerClassName)}
     />

apps/web/core/components/pages/editor/editor-body.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
+// plane imports
 import { LIVE_BASE_PATH, LIVE_BASE_URL } from "@plane/constants";
 import {
   CollaborativeDocumentEditorWithRef,
@@ -22,16 +23,11 @@ import { useMember } from "@/hooks/store/use-member";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUser } from "@/hooks/store/user";
 import { usePageFilters } from "@/hooks/use-page-filters";
-// plane web components
+// plane web imports
 import { EditorAIMenu } from "@/plane-web/components/pages";
-// plane web types
 import type { TExtendedEditorExtensionsConfig } from "@/plane-web/hooks/pages";
-// plane web store
 import { EPageStoreType } from "@/plane-web/hooks/store";
-// plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
-
-import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 // local imports
@@ -96,11 +92,6 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     editor: { editorRef, updateAssetsList },
   } = page;
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id ?? "";
-  // issue-embed
-  const { issueEmbedProps } = useIssueEmbed({
-    fetchEmbedSuggestions: handlers.fetchEntity,
-    workspaceSlug,
-  });
   // use editor mention
   const { fetchMentions } = useEditorMention({
     searchEntity: handlers.fetchEntity,
@@ -244,9 +235,6 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
             renderComponent: (props) => <EditorMentionsRoot {...props} />,
             getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }),
           }}
-          embedHandler={{
-            issue: issueEmbedProps,
-          }}
           realtimeConfig={realtimeConfig}
           serverHandler={serverHandler}
           user={userConfig}

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

@@ -4,7 +4,7 @@ import type { IEditorProps } from "@/types";
 
 export type TCoreAdditionalExtensionsProps = Pick<
   IEditorProps,
-  "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "embedHandler"
+  "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "extendedEditorProps"
 >;
 
 export const CoreEditorAdditionalExtensions = (props: TCoreAdditionalExtensionsProps): Extensions => {

packages/editor/src/ce/extensions/document-extensions.tsx

@@ -1,16 +1,13 @@
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { AnyExtension } from "@tiptap/core";
 import { SlashCommands } from "@/extensions";
-// plane editor types
-import type { TEmbedConfig } from "@/plane-editor/types";
 // types
 import type { IEditorProps, TExtensions, TUserDetails } from "@/types";
 
 export type TDocumentEditorAdditionalExtensionsProps = Pick<
   IEditorProps,
-  "disabledExtensions" | "flaggedExtensions" | "fileHandler"
+  "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "extendedEditorProps"
 > & {
-  embedConfig: TEmbedConfig | undefined;
   isEditable: boolean;
   provider?: HocuspocusProvider;
   userDetails: TUserDetails;

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

@@ -1,13 +1,10 @@
-import type { Extensions } from "@tiptap/core";
+import React from "react";
-import React, { useMemo } 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
@@ -23,14 +20,13 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     bubbleMenuEnabled = true,
     containerClassName,
     documentLoaderClassName,
-    extensions: externalExtensions = [],
+    extensions = [],
     disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editable,
     editorClassName = "",
     editorProps,
     extendedEditorProps,
-    embedHandler,
     fileHandler,
     flaggedExtensions,
     forwardedRef,
@@ -50,27 +46,13 @@ 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,
     editable,
     editorClassName,
     editorProps,
-    embedHandler,
+    extendedEditorProps,
     extensions,
     fileHandler,
     flaggedExtensions,

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
@@ -25,7 +25,7 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editable,
     editorClassName = "",
-    embedHandler,
+    extendedEditorProps,
     fileHandler,
     flaggedExtensions,
     forwardedRef,
@@ -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"),
@@ -54,7 +47,7 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
       HeadingListExtension,
       ...DocumentEditorAdditionalExtensions({
         disabledExtensions,
-        embedConfig: embedHandler,
+        extendedEditorProps,
         flaggedExtensions,
         isEditable: editable,
         fileHandler,
@@ -73,6 +66,7 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
     editable,
     editorClassName,
     enableHistory: true,
+    extendedEditorProps,
     extensions,
     fileHandler,
     flaggedExtensions,
@@ -82,7 +76,6 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
     initialValue: value,
     mentionHandler,
     onChange,
-    embedHandler,
   });
 
   const editorContainerClassName = getEditorClassNames({

packages/editor/src/core/components/editors/editor-wrapper.tsx

@@ -25,6 +25,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     editable,
     editorClassName = "",
     editorProps,
+    extendedEditorProps,
     extensions,
     id,
     initialValue,
@@ -41,7 +42,6 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     placeholder,
     tabIndex,
     value,
-    embedHandler,
   } = props;
 
   const editor = useEditor({
@@ -50,6 +50,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     editorClassName,
     editorProps,
     enableHistory: true,
+    extendedEditorProps,
     extensions,
     fileHandler,
     flaggedExtensions,
@@ -66,7 +67,6 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     placeholder,
     tabIndex,
     value,
-    embedHandler,
   });
 
   const editorContainerClassName = getEditorClassNames({

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

@@ -29,7 +29,7 @@ import {
 // plane editor extensions
 import { CoreEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
-import type { IEditorProps, TEmbedConfig } from "@/types";
+import type { IEditorProps } from "@/types";
 // local imports
 import { CustomImageExtension } from "./custom-image/extension";
 import { EmojiExtension } from "./emoji/extension";
@@ -45,11 +45,10 @@ type TArguments = Pick<
   | "mentionHandler"
   | "placeholder"
   | "tabIndex"
-  | "embedHandler"
+  | "extendedEditorProps"
 > & {
   enableHistory: boolean;
   editable: boolean;
-  embedHandler?: TEmbedConfig;
 };
 
 export const CoreEditorExtensions = (args: TArguments): Extensions => {
@@ -62,8 +61,8 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     mentionHandler,
     placeholder,
     tabIndex,
-    embedHandler,
     editable,
+    extendedEditorProps,
   } = args;
 
   const extensions = [
@@ -118,7 +117,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
       disabledExtensions,
       flaggedExtensions,
       fileHandler,
-      embedHandler,
+      extendedEditorProps,
     }),
   ];
 

packages/editor/src/core/hooks/use-collaborative-editor.ts

@@ -20,7 +20,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     editable,
     editorClassName = "",
     editorProps = {},
-    embedHandler,
+    extendedEditorProps,
     extensions = [],
     fileHandler,
     flaggedExtensions,
@@ -80,8 +80,8 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
   );
 
   const editor = useEditor({
-    embedHandler,
     disabledExtensions,
+    extendedEditorProps,
     id,
     editable,
     editorProps,
@@ -99,7 +99,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
       ...extensions,
       ...DocumentEditorAdditionalExtensions({
         disabledExtensions,
-        embedConfig: embedHandler,
+        extendedEditorProps,
         fileHandler,
         flaggedExtensions,
         isEditable: editable,

packages/editor/src/core/hooks/use-editor.ts

@@ -20,6 +20,7 @@ export const useEditor = (props: TEditorHookProps) => {
     editorClassName = "",
     editorProps = {},
     enableHistory,
+    extendedEditorProps,
     extensions = [],
     fileHandler,
     flaggedExtensions,
@@ -32,7 +33,6 @@ export const useEditor = (props: TEditorHookProps) => {
     onAssetChange,
     onChange,
     onEditorFocus,
-    embedHandler,
     onTransaction,
     placeholder,
     provider,
@@ -55,16 +55,16 @@ export const useEditor = (props: TEditorHookProps) => {
       },
       extensions: [
         ...CoreEditorExtensions({
-          editable,
           disabledExtensions,
+          editable,
           enableHistory,
+          extendedEditorProps,
           fileHandler,
           flaggedExtensions,
           isTouchDevice,
           mentionHandler,
           placeholder,
           tabIndex,
-          embedHandler,
         }),
         ...extensions,
       ],

packages/editor/src/core/types/editor.ts

@@ -143,7 +143,6 @@ export type IEditorProps = {
   editorClassName?: string;
   editorProps?: EditorProps;
   extensions?: Extensions;
-  embedHandler?: TEmbedConfig;
   flaggedExtensions: TExtensions[];
   fileHandler: TFileHandler;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
@@ -174,7 +173,6 @@ export type ICollaborativeDocumentEditorProps = Omit<IEditorProps, "initialValue
   documentLoaderClassName?: string;
   dragDropEnabled?: boolean;
   editable: boolean;
-  embedHandler: TEmbedConfig;
   realtimeConfig: TRealtimeConfig;
   serverHandler?: TServerHandler;
   user: TUserDetails;
@@ -182,7 +180,6 @@ export type ICollaborativeDocumentEditorProps = Omit<IEditorProps, "initialValue
 
 export type IDocumentEditorProps = Omit<IEditorProps, "initialValue" | "onEnterKeyPress" | "value"> & {
   aiHandler?: TAIHandler;
-  embedHandler: TEmbedConfig;
   user?: TUserDetails;
   value: Content;
 };

packages/editor/src/core/types/hook.ts

@@ -8,12 +8,12 @@ type TCoreHookProps = Pick<
   | "disabledExtensions"
   | "editorClassName"
   | "editorProps"
+  | "extendedEditorProps"
   | "extensions"
   | "flaggedExtensions"
   | "handleEditorReady"
   | "isTouchDevice"
   | "onEditorFocus"
-  | "embedHandler"
 >;
 
 export type TEditorHookProps = TCoreHookProps &
@@ -51,7 +51,4 @@ export type TCollaborativeEditorHookProps = TCoreHookProps &
     | "placeholder"
     | "tabIndex"
   > &
-  Pick<
+  Pick<ICollaborativeDocumentEditorProps, "dragDropEnabled" | "realtimeConfig" | "serverHandler" | "user">;
-    ICollaborativeDocumentEditorProps,
-    "dragDropEnabled" | "embedHandler" | "realtimeConfig" | "serverHandler" | "user"
-  >;