From b88e794cc799b797f209e47e9390bbe6b5a407c3 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Thu, 4 Sep 2025 18:48:54 +0530 Subject: [PATCH] fix: editor embed handler prop --- .../components/editor/document/editor.tsx | 26 ++++++++----------- .../components/pages/editor/editor-body.tsx | 16 ++---------- .../src/ce/extensions/core/extensions.ts | 2 +- .../src/ce/extensions/document-extensions.tsx | 5 +--- .../editors/document/collaborative-editor.tsx | 24 +++-------------- .../components/editors/document/editor.tsx | 15 +++-------- .../components/editors/editor-wrapper.tsx | 4 +-- .../editor/src/core/extensions/extensions.ts | 9 +++---- .../core/hooks/use-collaborative-editor.ts | 6 ++--- packages/editor/src/core/hooks/use-editor.ts | 6 ++--- packages/editor/src/core/types/editor.ts | 3 --- packages/editor/src/core/types/hook.ts | 7 ++--- 12 files changed, 36 insertions(+), 87 deletions(-) diff --git a/apps/web/core/components/editor/document/editor.tsx b/apps/web/core/components/editor/document/editor.tsx index 42969d0515a..19679895df6 100644 --- a/apps/web/core/components/editor/document/editor.tsx +++ b/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, + Omit, "disabledExtensions" | "editable" | "flaggedExtensions" > & { - embedHandler?: Partial; + extendedEditorProps?: Partial; workspaceSlug: string; workspaceId: string; projectId?: string; @@ -35,7 +40,7 @@ export const DocumentEditor = forwardRef ({ display_name: getUserDetails(id)?.display_name ?? "" }), }} - embedHandler={{ - issue: issueEmbedProps, - ...embedHandler, - }} - extendedEditorProps={{}} + extendedEditorProps={extendedEditorProps} {...rest} containerClassName={cn("relative pl-3 pb-3", containerClassName)} /> diff --git a/apps/web/core/components/pages/editor/editor-body.tsx b/apps/web/core/components/pages/editor/editor-body.tsx index 3ada9bf3ca5..a57f44058d5 100644 --- a/apps/web/core/components/pages/editor/editor-body.tsx +++ b/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 = 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 = observer((props) => { renderComponent: (props) => , getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }), }} - embedHandler={{ - issue: issueEmbedProps, - }} realtimeConfig={realtimeConfig} serverHandler={serverHandler} user={userConfig} diff --git a/packages/editor/src/ce/extensions/core/extensions.ts b/packages/editor/src/ce/extensions/core/extensions.ts index da03ba38615..e09038bca56 100644 --- a/packages/editor/src/ce/extensions/core/extensions.ts +++ b/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 => { diff --git a/packages/editor/src/ce/extensions/document-extensions.tsx b/packages/editor/src/ce/extensions/document-extensions.tsx index 8260da7d434..abdb282e70b 100644 --- a/packages/editor/src/ce/extensions/document-extensions.tsx +++ b/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; diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx index 038184204e6..d29cfd4a880 100644 --- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx +++ b/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 @@ -23,14 +20,13 @@ const CollaborativeDocumentEditor: React.FC = 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 = 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, diff --git a/packages/editor/src/core/components/editors/document/editor.tsx b/packages/editor/src/core/components/editors/document/editor.tsx index e2b3754cc1b..60f29eca96f 100644 --- a/packages/editor/src/core/components/editors/document/editor.tsx +++ b/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({ diff --git a/packages/editor/src/core/components/editors/editor-wrapper.tsx b/packages/editor/src/core/components/editors/editor-wrapper.tsx index 7de71bf6f46..2ef07631da8 100644 --- a/packages/editor/src/core/components/editors/editor-wrapper.tsx +++ b/packages/editor/src/core/components/editors/editor-wrapper.tsx @@ -25,6 +25,7 @@ export const EditorWrapper: React.FC = (props) => { editable, editorClassName = "", editorProps, + extendedEditorProps, extensions, id, initialValue, @@ -41,7 +42,6 @@ export const EditorWrapper: React.FC = (props) => { placeholder, tabIndex, value, - embedHandler, } = props; const editor = useEditor({ @@ -50,6 +50,7 @@ export const EditorWrapper: React.FC = (props) => { editorClassName, editorProps, enableHistory: true, + extendedEditorProps, extensions, fileHandler, flaggedExtensions, @@ -66,7 +67,6 @@ export const EditorWrapper: React.FC = (props) => { placeholder, tabIndex, value, - embedHandler, }); const editorContainerClassName = getEditorClassNames({ diff --git a/packages/editor/src/core/extensions/extensions.ts b/packages/editor/src/core/extensions/extensions.ts index eda64824ffb..b7df5f73302 100644 --- a/packages/editor/src/core/extensions/extensions.ts +++ b/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, }), ]; diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts index 46f7c4d82c3..514ee4019c1 100644 --- a/packages/editor/src/core/hooks/use-collaborative-editor.ts +++ b/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, diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts index 22ca31143cf..1285a6a7e28 100644 --- a/packages/editor/src/core/hooks/use-editor.ts +++ b/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, ], diff --git a/packages/editor/src/core/types/editor.ts b/packages/editor/src/core/types/editor.ts index 33fb71f6c3a..762d87d6849 100644 --- a/packages/editor/src/core/types/editor.ts +++ b/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; @@ -174,7 +173,6 @@ export type ICollaborativeDocumentEditorProps = Omit & { aiHandler?: TAIHandler; - embedHandler: TEmbedConfig; user?: TUserDetails; value: Content; }; diff --git a/packages/editor/src/core/types/hook.ts b/packages/editor/src/core/types/hook.ts index 0376fc14db6..a48480c9c27 100644 --- a/packages/editor/src/core/types/hook.ts +++ b/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< - ICollaborativeDocumentEditorProps, - "dragDropEnabled" | "embedHandler" | "realtimeConfig" | "serverHandler" | "user" - >; + Pick;