diff --git a/packages/editor/src/ce/extensions/document-extensions.tsx b/packages/editor/src/ce/extensions/document-extensions.tsx index 57583e60a2b..0ea842ff43b 100644 --- a/packages/editor/src/ce/extensions/document-extensions.tsx +++ b/packages/editor/src/ce/extensions/document-extensions.tsx @@ -1,10 +1,14 @@ +import { Extensions } from "@tiptap/core"; import { SlashCommand } from "@/extensions"; // hooks import { TFileHandler } from "@/hooks/use-editor"; // plane editor types import { TIssueEmbedConfig } from "@/plane-editor/types"; +// types +import { TExtensions } from "@/types"; type Props = { + disabledExtensions?: TExtensions[]; fileHandler: TFileHandler; issueEmbedConfig: TIssueEmbedConfig | undefined; }; @@ -12,7 +16,7 @@ type Props = { export const DocumentEditorAdditionalExtensions = (props: Props) => { const { fileHandler } = props; - const extensions = [SlashCommand(fileHandler.upload)]; + const extensions: Extensions = [SlashCommand(fileHandler.upload)]; return extensions; }; diff --git a/packages/editor/src/core/components/editors/document/editor.tsx b/packages/editor/src/core/components/editors/document/editor.tsx index 6576dacba7e..503dc76e0a1 100644 --- a/packages/editor/src/core/components/editors/document/editor.tsx +++ b/packages/editor/src/core/components/editors/document/editor.tsx @@ -9,10 +9,11 @@ import { TFileHandler } from "@/hooks/use-editor"; // plane editor types import { TEmbedConfig } from "@/plane-editor/types"; // types -import { EditorRefApi, IMentionHighlight, IMentionSuggestion } from "@/types"; +import { EditorRefApi, IMentionHighlight, IMentionSuggestion, TExtensions } from "@/types"; interface IDocumentEditor { containerClassName?: string; + disabledExtensions?: TExtensions[]; editorClassName?: string; embedHandler: TEmbedConfig; fileHandler: TFileHandler; @@ -32,6 +33,7 @@ interface IDocumentEditor { const DocumentEditor = (props: IDocumentEditor) => { const { containerClassName, + disabledExtensions, editorClassName = "", embedHandler, fileHandler, @@ -54,6 +56,7 @@ const DocumentEditor = (props: IDocumentEditor) => { // use document editor const { editor, isIndexedDbSynced } = useDocumentEditor({ + disabledExtensions, id, editorClassName, embedHandler, diff --git a/packages/editor/src/core/components/editors/rich-text/editor.tsx b/packages/editor/src/core/components/editors/rich-text/editor.tsx index 069681dab30..ead73d99d90 100644 --- a/packages/editor/src/core/components/editors/rich-text/editor.tsx +++ b/packages/editor/src/core/components/editors/rich-text/editor.tsx @@ -19,11 +19,7 @@ const RichTextEditor = (props: IRichTextEditor) => { }; const getExtensions = useCallback(() => { - const extensions = [ - SlashCommand(fileHandler.upload), - // TODO; add the extension conditionally for forms that don't require it - // EnterKeyExtension(onEnterKeyPress), - ]; + const extensions = [SlashCommand(fileHandler.upload)]; if (dragDropEnabled) extensions.push(DragAndDrop(setHideDragHandleFunction)); diff --git a/packages/editor/src/core/hooks/use-document-editor.ts b/packages/editor/src/core/hooks/use-document-editor.ts index 4aa8c12f71e..58a45b74730 100644 --- a/packages/editor/src/core/hooks/use-document-editor.ts +++ b/packages/editor/src/core/hooks/use-document-editor.ts @@ -13,9 +13,10 @@ import { CollaborationProvider } from "@/plane-editor/providers"; // plane editor types import { TEmbedConfig } from "@/plane-editor/types"; // types -import { EditorRefApi, IMentionHighlight, IMentionSuggestion } from "@/types"; +import { EditorRefApi, IMentionHighlight, IMentionSuggestion, TExtensions } from "@/types"; type DocumentEditorProps = { + disabledExtensions?: TExtensions[]; editorClassName: string; editorProps?: EditorProps; embedHandler?: TEmbedConfig; @@ -36,6 +37,7 @@ type DocumentEditorProps = { export const useDocumentEditor = (props: DocumentEditorProps) => { const { + disabledExtensions, editorClassName, editorProps = {}, embedHandler, @@ -102,6 +104,7 @@ export const useDocumentEditor = (props: DocumentEditorProps) => { document: provider.document, }), ...DocumentEditorAdditionalExtensions({ + disabledExtensions, fileHandler, issueEmbedConfig: embedHandler?.issue, }), @@ -111,5 +114,8 @@ export const useDocumentEditor = (props: DocumentEditorProps) => { tabIndex, }); - return { editor, isIndexedDbSynced }; + return { + editor, + isIndexedDbSynced, + }; }; diff --git a/packages/editor/src/core/types/extensions.ts b/packages/editor/src/core/types/extensions.ts new file mode 100644 index 00000000000..d4a26e803d3 --- /dev/null +++ b/packages/editor/src/core/types/extensions.ts @@ -0,0 +1 @@ +export type TExtensions = "issue-embed"; diff --git a/packages/editor/src/core/types/index.ts b/packages/editor/src/core/types/index.ts index 9e5980531a2..891a86286f4 100644 --- a/packages/editor/src/core/types/index.ts +++ b/packages/editor/src/core/types/index.ts @@ -1,5 +1,6 @@ export * from "./editor"; export * from "./embed"; +export * from "./extensions"; export * from "./image"; export * from "./mention-suggestion"; export * from "./slash-commands-suggestion"; diff --git a/packages/editor/src/core/types/slash-commands-suggestion.ts b/packages/editor/src/core/types/slash-commands-suggestion.ts index f7696f45dbb..3cb9d76b0ea 100644 --- a/packages/editor/src/core/types/slash-commands-suggestion.ts +++ b/packages/editor/src/core/types/slash-commands-suggestion.ts @@ -20,7 +20,8 @@ export type TEditorCommands = | "code" | "table" | "image" - | "divider"; + | "divider" + | "issue-embed"; export type CommandProps = { editor: Editor; diff --git a/web/ce/hooks/use-editor-flagging.ts b/web/ce/hooks/use-editor-flagging.ts new file mode 100644 index 00000000000..9019db94d95 --- /dev/null +++ b/web/ce/hooks/use-editor-flagging.ts @@ -0,0 +1,20 @@ +// editor +import { TExtensions } from "@plane/editor"; + +/** + * @description extensions disabled in various editors + * @returns + * ```ts + * { + * documentEditor: TExtensions[] + * richTextEditor: TExtensions[] + * } + * ``` + */ +export const useEditorFlagging = (): { + documentEditor: TExtensions[]; + richTextEditor: TExtensions[]; +} => ({ + documentEditor: [], + richTextEditor: [], +}); diff --git a/web/ce/hooks/use-issue-embed.tsx b/web/ce/hooks/use-issue-embed.tsx index 5ca4d4b02b4..5d02d978fa2 100644 --- a/web/ce/hooks/use-issue-embed.tsx +++ b/web/ce/hooks/use-issue-embed.tsx @@ -1,5 +1,5 @@ // editor -import { TEmbedConfig, TReadOnlyEmbedConfig } from "@plane/editor"; +import { TEmbedConfig } from "@plane/editor"; // types import { TPageEmbedType } from "@plane/types"; // plane web components @@ -13,12 +13,7 @@ export const useIssueEmbed = (workspaceSlug: string, projectId: string, queryTyp widgetCallback, }; - const issueEmbedReadOnlyProps: TReadOnlyEmbedConfig["issue"] = { - widgetCallback, - }; - return { issueEmbedProps, - issueEmbedReadOnlyProps, }; }; diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx index ee96252faba..4b4c80a3a11 100644 --- a/web/core/components/pages/editor/editor-body.tsx +++ b/web/core/components/pages/editor/editor-body.tsx @@ -19,6 +19,7 @@ import { cn } from "@/helpers/common.helper"; import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store"; import { usePageFilters } from "@/hooks/use-page-filters"; // plane web hooks +import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging"; import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed"; // services import { FileService } from "@/services/file.service"; @@ -72,7 +73,6 @@ export const PageEditorBody: React.FC = observer((props) => { const { isContentEditable, updateTitle, setIsSubmitting } = page; const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : []; const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite); - // use-mention const { mentionHighlights, mentionSuggestions } = useMention({ workspaceSlug: workspaceSlug?.toString() ?? "", @@ -80,14 +80,13 @@ export const PageEditorBody: React.FC = observer((props) => { members: projectMemberDetails, user: currentUser ?? undefined, }); + // editor flaggings + const { documentEditor } = useEditorFlagging(); // page filters const { isFullWidth } = usePageFilters(); // issue-embed - const { issueEmbedProps, issueEmbedReadOnlyProps } = useIssueEmbed( - workspaceSlug?.toString() ?? "", - projectId?.toString() ?? "" - ); + const { issueEmbedProps } = useIssueEmbed(workspaceSlug?.toString() ?? "", projectId?.toString() ?? ""); useEffect(() => { updateMarkings(pageDescription ?? "

"); @@ -149,6 +148,7 @@ export const PageEditorBody: React.FC = observer((props) => { embedHandler={{ issue: issueEmbedProps, }} + disabledExtensions={documentEditor} /> ) : ( = observer((props) => { highlights: mentionHighlights, }} embedHandler={{ - issue: issueEmbedReadOnlyProps, + issue: { + widgetCallback: issueEmbedProps.widgetCallback, + }, }} /> )}