dev: editor extensions feature flagging (#5279)

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;
 };

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,

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));
 

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,
+  };
 };

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

@@ -0,0 +1 @@
+export type TExtensions = "issue-embed";

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";

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;

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: [],
+});

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,
   };
 };

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<Props> = 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<Props> = 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 ?? "<p></p>");
@@ -149,6 +148,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
               embedHandler={{
                 issue: issueEmbedProps,
               }}
+              disabledExtensions={documentEditor}
             />
           ) : (
             <DocumentReadOnlyEditorWithRef
@@ -162,7 +162,9 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                 highlights: mentionHighlights,
               }}
               embedHandler={{
-                issue: issueEmbedReadOnlyProps,
+                issue: {
+                  widgetCallback: issueEmbedProps.widgetCallback,
+                },
               }}
             />
           )}