[WEB-462] refactor: editor props structure (#7233)

* refactor: editor props structure

* chore: add missing prop

* fix: space app build

* chore: export ce types

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

@@ -1,13 +1,13 @@
-import { Extensions } from "@tiptap/core";
+import type { Extensions } from "@tiptap/core";
 // types
-import { TExtensions, TFileHandler } from "@/types";
+import type { IEditorProps } from "@/types";
 
-type Props = {
-  disabledExtensions: TExtensions[];
-  fileHandler: TFileHandler;
-};
+export type TCoreAdditionalExtensionsProps = Pick<
+  IEditorProps,
+  "disabledExtensions" | "flaggedExtensions" | "fileHandler"
+>;
 
-export const CoreEditorAdditionalExtensions = (props: Props): Extensions => {
+export const CoreEditorAdditionalExtensions = (props: TCoreAdditionalExtensionsProps): Extensions => {
   const {} = props;
   return [];
 };

packages/editor/src/ce/extensions/core/read-only-extensions.ts

@@ -1,12 +1,15 @@
-import { Extensions } from "@tiptap/core";
+import type { Extensions } from "@tiptap/core";
 // types
-import { TExtensions } from "@/types";
+import type { IReadOnlyEditorProps } from "@/types";
 
-type Props = {
-  disabledExtensions: TExtensions[];
-};
+export type TCoreReadOnlyEditorAdditionalExtensionsProps = Pick<
+  IReadOnlyEditorProps,
+  "disabledExtensions" | "flaggedExtensions"
+>;
 
-export const CoreReadOnlyEditorAdditionalExtensions = (props: Props): Extensions => {
+export const CoreReadOnlyEditorAdditionalExtensions = (
+  props: TCoreReadOnlyEditorAdditionalExtensionsProps
+): Extensions => {
   const {} = props;
   return [];
 };

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

@@ -1,37 +1,39 @@
-import { HocuspocusProvider } from "@hocuspocus/provider";
-import { AnyExtension } from "@tiptap/core";
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { AnyExtension } from "@tiptap/core";
 import { SlashCommands } from "@/extensions";
 // plane editor types
-import { TEmbedConfig } from "@/plane-editor/types";
+import type { TEmbedConfig } from "@/plane-editor/types";
 // types
-import { TExtensions, TFileHandler, TUserDetails } from "@/types";
+import type { IEditorProps, TExtensions, TUserDetails } from "@/types";
 
-export type TDocumentEditorAdditionalExtensionsProps = {
-  disabledExtensions: TExtensions[];
+export type TDocumentEditorAdditionalExtensionsProps = Pick<
+  IEditorProps,
+  "disabledExtensions" | "flaggedExtensions" | "fileHandler"
+> & {
   embedConfig: TEmbedConfig | undefined;
-  fileHandler: TFileHandler;
   provider?: HocuspocusProvider;
   userDetails: TUserDetails;
 };
 
 export type TDocumentEditorAdditionalExtensionsRegistry = {
-  isEnabled: (disabledExtensions: TExtensions[]) => boolean;
+  isEnabled: (disabledExtensions: TExtensions[], flaggedExtensions: TExtensions[]) => boolean;
   getExtension: (props: TDocumentEditorAdditionalExtensionsProps) => AnyExtension;
 };
 
 const extensionRegistry: TDocumentEditorAdditionalExtensionsRegistry[] = [
   {
     isEnabled: (disabledExtensions) => !disabledExtensions.includes("slash-commands"),
-    getExtension: ({ disabledExtensions }) => SlashCommands({ disabledExtensions }),
+    getExtension: ({ disabledExtensions, flaggedExtensions }) =>
+      SlashCommands({ disabledExtensions, flaggedExtensions }),
   },
 ];
 
-export const DocumentEditorAdditionalExtensions = (_props: TDocumentEditorAdditionalExtensionsProps) => {
-  const { disabledExtensions = [] } = _props;
+export const DocumentEditorAdditionalExtensions = (props: TDocumentEditorAdditionalExtensionsProps) => {
+  const { disabledExtensions, flaggedExtensions } = props;
 
   const documentExtensions = extensionRegistry
-    .filter((config) => config.isEnabled(disabledExtensions))
-    .map((config) => config.getExtension(_props));
+    .filter((config) => config.isEnabled(disabledExtensions, flaggedExtensions))
+    .map((config) => config.getExtension(props));
 
   return documentExtensions;
 };

packages/editor/src/ce/extensions/rich-text/extensions.tsx

@@ -2,19 +2,19 @@ import { AnyExtension, Extensions } from "@tiptap/core";
 // extensions
 import { SlashCommands } from "@/extensions/slash-commands/root";
 // types
-import { TExtensions, TFileHandler } from "@/types";
+import { IEditorProps, TExtensions } from "@/types";
 
-export type TRichTextEditorAdditionalExtensionsProps = {
-  disabledExtensions: TExtensions[];
-  fileHandler: TFileHandler;
-};
+export type TRichTextEditorAdditionalExtensionsProps = Pick<
+  IEditorProps,
+  "disabledExtensions" | "flaggedExtensions" | "fileHandler"
+>;
 
 /**
  * Registry entry configuration for extensions
  */
 export type TRichTextEditorAdditionalExtensionsRegistry = {
   /** Determines if the extension should be enabled based on disabled extensions */
-  isEnabled: (disabledExtensions: TExtensions[]) => boolean;
+  isEnabled: (disabledExtensions: TExtensions[], flaggedExtensions: TExtensions[]) => boolean;
   /** Returns the extension instance(s) when enabled */
   getExtension: (props: TRichTextEditorAdditionalExtensionsProps) => AnyExtension | undefined;
 };
@@ -22,18 +22,19 @@ export type TRichTextEditorAdditionalExtensionsRegistry = {
 const extensionRegistry: TRichTextEditorAdditionalExtensionsRegistry[] = [
   {
     isEnabled: (disabledExtensions) => !disabledExtensions.includes("slash-commands"),
-    getExtension: ({ disabledExtensions }) =>
+    getExtension: ({ disabledExtensions, flaggedExtensions }) =>
       SlashCommands({
         disabledExtensions,
+        flaggedExtensions,
       }),
   },
 ];
 
 export const RichTextEditorAdditionalExtensions = (props: TRichTextEditorAdditionalExtensionsProps) => {
-  const { disabledExtensions } = props;
+  const { disabledExtensions, flaggedExtensions } = props;
 
   const extensions: Extensions = extensionRegistry
-    .filter((config) => config.isEnabled(disabledExtensions))
+    .filter((config) => config.isEnabled(disabledExtensions, flaggedExtensions))
     .map((config) => config.getExtension(props))
     .filter((extension): extension is AnyExtension => extension !== undefined);
 

packages/editor/src/ce/extensions/rich-text/read-only-extensions.tsx

@@ -1,11 +1,11 @@
 import { AnyExtension, Extensions } from "@tiptap/core";
 // types
-import { TExtensions, TReadOnlyFileHandler } from "@/types";
+import { IReadOnlyEditorProps, TExtensions } from "@/types";
 
-export type TRichTextReadOnlyEditorAdditionalExtensionsProps = {
-  disabledExtensions: TExtensions[];
-  fileHandler: TReadOnlyFileHandler;
-};
+export type TRichTextReadOnlyEditorAdditionalExtensionsProps = Pick<
+  IReadOnlyEditorProps,
+  "disabledExtensions" | "flaggedExtensions" | "fileHandler"
+>;
 
 /**
  * Registry entry configuration for extensions

packages/editor/src/ce/extensions/slash-commands.tsx

@@ -1,11 +1,9 @@
 // extensions
-import { TSlashCommandAdditionalOption } from "@/extensions";
+import type { TSlashCommandAdditionalOption } from "@/extensions";
 // types
-import { TExtensions } from "@/types";
+import type { IEditorProps } from "@/types";
 
-type Props = {
-  disabledExtensions?: TExtensions[];
-};
+type Props = Pick<IEditorProps, "disabledExtensions" | "flaggedExtensions">;
 
 export const coreEditorAdditionalSlashCommandOptions = (props: Props): TSlashCommandAdditionalOption[] => {
   const {} = props;

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

@@ -13,10 +13,11 @@ import { getEditorClassNames } from "@/helpers/common";
 // hooks
 import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
 // types
-import { EditorRefApi, ICollaborativeDocumentEditor } from "@/types";
+import { EditorRefApi, ICollaborativeDocumentEditorProps } from "@/types";
 
-const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
+const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> = (props) => {
   const {
+    onChange,
     onTransaction,
     aiHandler,
     bubbleMenuEnabled = true,
@@ -27,6 +28,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     editorClassName = "",
     embedHandler,
     fileHandler,
+    flaggedExtensions,
     forwardedRef,
     handleEditorReady,
     id,
@@ -56,10 +58,12 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     embedHandler,
     extensions,
     fileHandler,
+    flaggedExtensions,
     forwardedRef,
     handleEditorReady,
     id,
     mentionHandler,
+    onChange,
     onTransaction,
     placeholder,
     realtimeConfig,
@@ -95,7 +99,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
   );
 };
 
-const CollaborativeDocumentEditorWithRef = React.forwardRef<EditorRefApi, ICollaborativeDocumentEditor>(
+const CollaborativeDocumentEditorWithRef = React.forwardRef<EditorRefApi, ICollaborativeDocumentEditorProps>(
   (props, ref) => (
     <CollaborativeDocumentEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />
   )

packages/editor/src/core/components/editors/document/page-renderer.tsx

@@ -5,7 +5,7 @@ import { AIFeaturesMenu, BlockMenu, EditorBubbleMenu } from "@/components/menus"
 // types
 import { TAIHandler, TDisplayConfig } from "@/types";
 
-type IPageRenderer = {
+type Props = {
   aiHandler?: TAIHandler;
   bubbleMenuEnabled: boolean;
   displayConfig: TDisplayConfig;
@@ -15,7 +15,7 @@ type IPageRenderer = {
   tabIndex?: number;
 };
 
-export const PageRenderer = (props: IPageRenderer) => {
+export const PageRenderer = (props: Props) => {
   const { aiHandler, bubbleMenuEnabled, displayConfig, editor, editorContainerClassName, id, tabIndex } = props;
 
   return (

packages/editor/src/core/components/editors/document/read-only-editor.tsx

@@ -1,5 +1,5 @@
 import { Extensions } from "@tiptap/core";
-import { forwardRef, MutableRefObject } from "react";
+import React, { forwardRef, MutableRefObject } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // components
@@ -13,30 +13,9 @@ import { getEditorClassNames } from "@/helpers/common";
 // hooks
 import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
 // types
-import {
-  EditorReadOnlyRefApi,
-  TDisplayConfig,
-  TExtensions,
-  TReadOnlyFileHandler,
-  TReadOnlyMentionHandler,
-} from "@/types";
+import { EditorReadOnlyRefApi, IDocumentReadOnlyEditorProps } from "@/types";
 
-interface IDocumentReadOnlyEditor {
-  disabledExtensions: TExtensions[];
-  id: string;
-  initialValue: string;
-  containerClassName: string;
-  displayConfig?: TDisplayConfig;
-  editorClassName?: string;
-  embedHandler: any;
-  fileHandler: TReadOnlyFileHandler;
-  tabIndex?: number;
-  handleEditorReady?: (value: boolean) => void;
-  mentionHandler: TReadOnlyMentionHandler;
-  forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
-}
-
-const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
+const DocumentReadOnlyEditor: React.FC<IDocumentReadOnlyEditorProps> = (props) => {
   const {
     containerClassName,
     disabledExtensions,
@@ -44,6 +23,7 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
     editorClassName = "",
     embedHandler,
     fileHandler,
+    flaggedExtensions,
     id,
     forwardedRef,
     handleEditorReady,
@@ -64,6 +44,7 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
     editorClassName,
     extensions,
     fileHandler,
+    flaggedExtensions,
     forwardedRef,
     handleEditorReady,
     initialValue,
@@ -87,7 +68,7 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
   );
 };
 
-const DocumentReadOnlyEditorWithRef = forwardRef<EditorReadOnlyRefApi, IDocumentReadOnlyEditor>((props, ref) => (
+const DocumentReadOnlyEditorWithRef = forwardRef<EditorReadOnlyRefApi, IDocumentReadOnlyEditorProps>((props, ref) => (
   <DocumentReadOnlyEditor {...props} forwardedRef={ref as MutableRefObject<EditorReadOnlyRefApi | null>} />
 ));
 

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

@@ -26,6 +26,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     id,
     initialValue,
     fileHandler,
+    flaggedExtensions,
     forwardedRef,
     mentionHandler,
     onChange,
@@ -44,6 +45,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     enableHistory: true,
     extensions,
     fileHandler,
+    flaggedExtensions,
     forwardedRef,
     id,
     initialValue,

packages/editor/src/core/components/editors/lite-text/editor.tsx

@@ -4,23 +4,25 @@ import { EditorWrapper } from "@/components/editors/editor-wrapper";
 // extensions
 import { EnterKeyExtension } from "@/extensions";
 // types
-import { EditorRefApi, ILiteTextEditor } from "@/types";
+import { EditorRefApi, ILiteTextEditorProps } from "@/types";
 
-const LiteTextEditor = (props: ILiteTextEditor) => {
+const LiteTextEditor: React.FC<ILiteTextEditorProps> = (props) => {
   const { onEnterKeyPress, disabledExtensions, extensions: externalExtensions = [] } = props;
 
-  const extensions = useMemo(
-    () => [
-      ...externalExtensions,
-      ...(disabledExtensions?.includes("enter-key") ? [] : [EnterKeyExtension(onEnterKeyPress)]),
-    ],
-    [externalExtensions, disabledExtensions, onEnterKeyPress]
-  );
+  const extensions = useMemo(() => {
+    const resolvedExtensions = [...externalExtensions];
+
+    if (!disabledExtensions?.includes("enter-key")) {
+      resolvedExtensions.push(EnterKeyExtension(onEnterKeyPress));
+    }
+
+    return resolvedExtensions;
+  }, [externalExtensions, disabledExtensions, onEnterKeyPress]);
 
   return <EditorWrapper {...props} extensions={extensions} />;
 };
 
-const LiteTextEditorWithRef = forwardRef<EditorRefApi, ILiteTextEditor>((props, ref) => (
+const LiteTextEditorWithRef = forwardRef<EditorRefApi, ILiteTextEditorProps>((props, ref) => (
   <LiteTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />
 ));
 

packages/editor/src/core/components/editors/lite-text/read-only-editor.tsx

@@ -2,9 +2,9 @@ import { forwardRef } from "react";
 // components
 import { ReadOnlyEditorWrapper } from "@/components/editors";
 // types
-import { EditorReadOnlyRefApi, ILiteTextReadOnlyEditor } from "@/types";
+import { EditorReadOnlyRefApi, ILiteTextReadOnlyEditorProps } from "@/types";
 
-const LiteTextReadOnlyEditorWithRef = forwardRef<EditorReadOnlyRefApi, ILiteTextReadOnlyEditor>((props, ref) => (
+const LiteTextReadOnlyEditorWithRef = forwardRef<EditorReadOnlyRefApi, ILiteTextReadOnlyEditorProps>((props, ref) => (
   <ReadOnlyEditorWrapper {...props} forwardedRef={ref as React.MutableRefObject<EditorReadOnlyRefApi | null>} />
 ));
 

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

@@ -17,6 +17,7 @@ export const ReadOnlyEditorWrapper = (props: IReadOnlyEditorProps) => {
     editorClassName = "",
     extensions,
     fileHandler,
+    flaggedExtensions,
     forwardedRef,
     id,
     initialValue,
@@ -28,6 +29,7 @@ export const ReadOnlyEditorWrapper = (props: IReadOnlyEditorProps) => {
     editorClassName,
     extensions,
     fileHandler,
+    flaggedExtensions,
     forwardedRef,
     initialValue,
     mentionHandler,

packages/editor/src/core/components/editors/rich-text/editor.tsx

@@ -7,15 +7,16 @@ import { SideMenuExtension } from "@/extensions";
 // plane editor imports
 import { RichTextEditorAdditionalExtensions } from "@/plane-editor/extensions/rich-text/extensions";
 // types
-import { EditorRefApi, IRichTextEditor } from "@/types";
+import { EditorRefApi, IRichTextEditorProps } from "@/types";
 
-const RichTextEditor = (props: IRichTextEditor) => {
+const RichTextEditor: React.FC<IRichTextEditorProps> = (props) => {
   const {
+    bubbleMenuEnabled = true,
     disabledExtensions,
     dragDropEnabled,
-    fileHandler,
-    bubbleMenuEnabled = true,
     extensions: externalExtensions = [],
+    fileHandler,
+    flaggedExtensions,
   } = props;
 
   const getExtensions = useCallback(() => {
@@ -28,11 +29,12 @@ const RichTextEditor = (props: IRichTextEditor) => {
       ...RichTextEditorAdditionalExtensions({
         disabledExtensions,
         fileHandler,
+        flaggedExtensions,
       }),
     ];
 
     return extensions;
-  }, [dragDropEnabled, disabledExtensions, externalExtensions, fileHandler]);
+  }, [dragDropEnabled, disabledExtensions, externalExtensions, fileHandler, flaggedExtensions]);
 
   return (
     <EditorWrapper {...props} extensions={getExtensions()}>
@@ -41,7 +43,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
   );
 };
 
-const RichTextEditorWithRef = forwardRef<EditorRefApi, IRichTextEditor>((props, ref) => (
+const RichTextEditorWithRef = forwardRef<EditorRefApi, IRichTextEditorProps>((props, ref) => (
   <RichTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />
 ));
 

packages/editor/src/core/components/editors/rich-text/read-only-editor.tsx

@@ -2,23 +2,22 @@ import { forwardRef, useCallback } from "react";
 // plane editor extensions
 import { RichTextReadOnlyEditorAdditionalExtensions } from "@/plane-editor/extensions/rich-text/read-only-extensions";
 // types
-import { EditorReadOnlyRefApi, IRichTextReadOnlyEditor } from "@/types";
+import { EditorReadOnlyRefApi, IRichTextReadOnlyEditorProps } from "@/types";
 // local imports
 import { ReadOnlyEditorWrapper } from "../read-only-editor-wrapper";
 
-const RichTextReadOnlyEditorWithRef = forwardRef<EditorReadOnlyRefApi, IRichTextReadOnlyEditor>((props, ref) => {
-  const { disabledExtensions, fileHandler } = props;
+const RichTextReadOnlyEditorWithRef = forwardRef<EditorReadOnlyRefApi, IRichTextReadOnlyEditorProps>((props, ref) => {
+  const { disabledExtensions, fileHandler, flaggedExtensions } = props;
 
   const getExtensions = useCallback(() => {
-    const extensions = [
-      ...RichTextReadOnlyEditorAdditionalExtensions({
-        disabledExtensions,
-        fileHandler,
-      }),
-    ];
+    const extensions = RichTextReadOnlyEditorAdditionalExtensions({
+      disabledExtensions,
+      fileHandler,
+      flaggedExtensions,
+    });
 
     return extensions;
-  }, [disabledExtensions, fileHandler]);
+  }, [disabledExtensions, fileHandler, flaggedExtensions]);
 
   return (
     <ReadOnlyEditorWrapper

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

@@ -37,20 +37,27 @@ import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // plane editor extensions
 import { CoreEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
-import { TExtensions, TFileHandler, TMentionHandler } from "@/types";
+import type { IEditorProps } from "@/types";
 
-type TArguments = {
-  disabledExtensions: TExtensions[];
+type TArguments = Pick<
+  IEditorProps,
+  "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "mentionHandler" | "placeholder" | "tabIndex"
+> & {
   enableHistory: boolean;
-  fileHandler: TFileHandler;
-  mentionHandler: TMentionHandler;
-  placeholder?: string | ((isFocused: boolean, value: string) => string);
-  tabIndex?: number;
   editable: boolean;
 };
 
 export const CoreEditorExtensions = (args: TArguments): Extensions => {
-  const { disabledExtensions, enableHistory, fileHandler, mentionHandler, placeholder, tabIndex, editable } = args;
+  const {
+    disabledExtensions,
+    enableHistory,
+    fileHandler,
+    flaggedExtensions,
+    mentionHandler,
+    placeholder,
+    tabIndex,
+    editable,
+  } = args;
 
   const extensions = [
     StarterKit.configure({
@@ -177,6 +184,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     CustomColorExtension,
     ...CoreEditorAdditionalExtensions({
       disabledExtensions,
+      flaggedExtensions,
       fileHandler,
     }),
   ];

packages/editor/src/core/extensions/read-only-extensions.ts

@@ -31,16 +31,12 @@ import { isValidHttpUrl } from "@/helpers/common";
 // plane editor extensions
 import { CoreReadOnlyEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
-import { TExtensions, TReadOnlyFileHandler, TReadOnlyMentionHandler } from "@/types";
+import type { IReadOnlyEditorProps } from "@/types";
 
-type Props = {
-  disabledExtensions: TExtensions[];
-  fileHandler: TReadOnlyFileHandler;
-  mentionHandler: TReadOnlyMentionHandler;
-};
+type Props = Pick<IReadOnlyEditorProps, "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "mentionHandler">;
 
 export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
-  const { disabledExtensions, fileHandler, mentionHandler } = props;
+  const { disabledExtensions, fileHandler, flaggedExtensions, mentionHandler } = props;
 
   const extensions = [
     StarterKit.configure({
@@ -133,6 +129,7 @@ export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
     }),
     ...CoreReadOnlyEditorAdditionalExtensions({
       disabledExtensions,
+      flaggedExtensions,
     }),
   ];
 

packages/editor/src/core/extensions/slash-commands/command-items-list.tsx

@@ -49,7 +49,7 @@ export type TSlashCommandSection = {
 export const getSlashCommandFilteredSections =
   (args: TExtensionProps) =>
   ({ query }: { query: string }): TSlashCommandSection[] => {
-    const { additionalOptions: externalAdditionalOptions, disabledExtensions } = args;
+    const { additionalOptions: externalAdditionalOptions, disabledExtensions, flaggedExtensions } = args;
     const SLASH_COMMAND_SECTIONS: TSlashCommandSection[] = [
       {
         key: "general",
@@ -290,6 +290,7 @@ export const getSlashCommandFilteredSections =
       ...(externalAdditionalOptions ?? []),
       ...coreEditorAdditionalSlashCommandOptions({
         disabledExtensions,
+        flaggedExtensions,
       }),
     ]?.forEach((item) => {
       const sectionToPushTo = SLASH_COMMAND_SECTIONS.find((s) => s.key === item.section) ?? SLASH_COMMAND_SECTIONS[0];

packages/editor/src/core/extensions/slash-commands/root.tsx

@@ -7,7 +7,7 @@ import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
 import { CommandListInstance } from "@/helpers/tippy";
 // types
-import { ISlashCommandItem, TEditorCommands, TExtensions, TSlashCommandSectionKeys } from "@/types";
+import { IEditorProps, ISlashCommandItem, TEditorCommands, TSlashCommandSectionKeys } from "@/types";
 // components
 import { getSlashCommandFilteredSections } from "./command-items-list";
 import { SlashCommandsMenu, SlashCommandsMenuProps } from "./command-menu";
@@ -106,9 +106,8 @@ const renderItems = () => {
   };
 };
 
-export type TExtensionProps = {
+export type TExtensionProps = Pick<IEditorProps, "disabledExtensions" | "flaggedExtensions"> & {
   additionalOptions?: TSlashCommandAdditionalOption[];
-  disabledExtensions?: TExtensions[];
 };
 
 export const SlashCommands = (props: TExtensionProps) =>

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

@@ -8,7 +8,7 @@ import { DropHandlerPlugin } from "@/plugins/drop";
 import { FilePlugins } from "@/plugins/file/root";
 import { MarkdownClipboardPlugin } from "@/plugins/markdown-clipboard";
 // types
-import { TExtensions, TFileHandler, TReadOnlyFileHandler } from "@/types";
+import type { IEditorProps, TFileHandler, TReadOnlyFileHandler } from "@/types";
 
 declare module "@tiptap/core" {
   interface Commands {
@@ -23,8 +23,7 @@ export interface UtilityExtensionStorage {
   uploadInProgress: boolean;
 }
 
-type Props = {
-  disabledExtensions: TExtensions[];
+type Props = Pick<IEditorProps, "disabledExtensions"> & {
   fileHandler: TFileHandler | TReadOnlyFileHandler;
   isEditable: boolean;
 };

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

@@ -9,18 +9,19 @@ import { useEditor } from "@/hooks/use-editor";
 // plane editor extensions
 import { DocumentEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
-import { TCollaborativeEditorProps } from "@/types";
+import { TCollaborativeEditorHookProps } from "@/types";
 
-export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
+export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) => {
   const {
     onTransaction,
     disabledExtensions,
     editable,
-    editorClassName,
+    editorClassName = "",
     editorProps = {},
     embedHandler,
-    extensions,
+    extensions = [],
     fileHandler,
+    flaggedExtensions,
     forwardedRef,
     handleEditorReady,
     id,
@@ -89,16 +90,18 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
       Collaboration.configure({
         document: provider.document,
       }),
-      ...(extensions ?? []),
+      ...extensions,
       ...DocumentEditorAdditionalExtensions({
         disabledExtensions,
         embedConfig: embedHandler,
         fileHandler,
+        flaggedExtensions,
         provider,
         userDetails: user,
       }),
     ],
     fileHandler,
+    flaggedExtensions,
     forwardedRef,
     handleEditorReady,
     mentionHandler,

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

@@ -1,13 +1,12 @@
-import { HocuspocusProvider } from "@hocuspocus/provider";
 import { DOMSerializer } from "@tiptap/pm/model";
-import { EditorProps } from "@tiptap/pm/view";
-import { useEditor as useTiptapEditor, Extensions } from "@tiptap/react";
-import { useImperativeHandle, MutableRefObject, useEffect } from "react";
+import { useEditor as useTiptapEditor } from "@tiptap/react";
+import { useImperativeHandle, useEffect } from "react";
 import * as Y from "yjs";
 // components
 import { getEditorMenuItems } from "@/components/menus";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
+import { CORE_EDITOR_META } from "@/constants/meta";
 // extensions
 import { CoreEditorExtensions } from "@/extensions";
 // helpers
@@ -18,49 +17,19 @@ import { IMarking, scrollSummary, scrollToNodeViaDOMCoordinates } from "@/helper
 // props
 import { CoreEditorProps } from "@/props";
 // types
-import type {
-  TDocumentEventsServer,
-  EditorRefApi,
-  TEditorCommands,
-  TFileHandler,
-  TExtensions,
-  TMentionHandler,
-} from "@/types";
-import { CORE_EDITOR_META } from "@/constants/meta";
+import type { TDocumentEventsServer, TEditorCommands, TEditorHookProps } from "@/types";
 
-export interface CustomEditorProps {
-  editable: boolean;
-  editorClassName: string;
-  editorProps?: EditorProps;
-  enableHistory: boolean;
-  disabledExtensions: TExtensions[];
-  extensions?: Extensions;
-  fileHandler: TFileHandler;
-  forwardedRef?: MutableRefObject<EditorRefApi | null>;
-  handleEditorReady?: (value: boolean) => void;
-  id?: string;
-  initialValue?: string;
-  mentionHandler: TMentionHandler;
-  onChange?: (json: object, html: string) => void;
-  onTransaction?: () => void;
-  autofocus?: boolean;
-  placeholder?: string | ((isFocused: boolean, value: string) => string);
-  provider?: HocuspocusProvider;
-  tabIndex?: number;
-  // undefined when prop is not passed, null if intentionally passed to stop
-  // swr syncing
-  value?: string | null | undefined;
-}
-
-export const useEditor = (props: CustomEditorProps) => {
+export const useEditor = (props: TEditorHookProps) => {
   const {
+    autofocus = false,
     disabledExtensions,
     editable = true,
-    editorClassName,
+    editorClassName = "",
     editorProps = {},
     enableHistory,
     extensions = [],
     fileHandler,
+    flaggedExtensions,
     forwardedRef,
     handleEditorReady,
     id = "",
@@ -69,10 +38,9 @@ export const useEditor = (props: CustomEditorProps) => {
     onChange,
     onTransaction,
     placeholder,
+    provider,
     tabIndex,
     value,
-    provider,
-    autofocus = false,
   } = props;
 
   const editor = useTiptapEditor(
@@ -94,6 +62,7 @@ export const useEditor = (props: CustomEditorProps) => {
           disabledExtensions,
           enableHistory,
           fileHandler,
+          flaggedExtensions,
           mentionHandler,
           placeholder,
           tabIndex,

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

@@ -1,8 +1,8 @@
-import { HocuspocusProvider } from "@hocuspocus/provider";
-import { EditorProps } from "@tiptap/pm/view";
-import { useEditor as useTiptapEditor, Extensions } from "@tiptap/react";
-import { useImperativeHandle, MutableRefObject, useEffect } from "react";
+import { useEditor as useTiptapEditor } from "@tiptap/react";
+import { useImperativeHandle, useEffect } from "react";
 import * as Y from "yjs";
+// constants
+import { CORE_EDITOR_META } from "@/constants/meta";
 // extensions
 import { CoreReadOnlyEditorExtensions } from "@/extensions";
 // helpers
@@ -11,32 +11,19 @@ import { IMarking, scrollSummary } from "@/helpers/scroll-to-node";
 // props
 import { CoreReadOnlyEditorProps } from "@/props";
 // types
-import type { EditorReadOnlyRefApi, TExtensions, TReadOnlyFileHandler, TReadOnlyMentionHandler } from "@/types";
-import { CORE_EDITOR_META } from "@/constants/meta";
+import type { TReadOnlyEditorHookProps } from "@/types";
 
-interface CustomReadOnlyEditorProps {
-  disabledExtensions: TExtensions[];
-  editorClassName: string;
-  editorProps?: EditorProps;
-  extensions?: Extensions;
-  forwardedRef?: MutableRefObject<EditorReadOnlyRefApi | null>;
-  initialValue?: string;
-  fileHandler: TReadOnlyFileHandler;
-  handleEditorReady?: (value: boolean) => void;
-  mentionHandler: TReadOnlyMentionHandler;
-  provider?: HocuspocusProvider;
-}
-
-export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
+export const useReadOnlyEditor = (props: TReadOnlyEditorHookProps) => {
   const {
     disabledExtensions,
-    initialValue,
-    editorClassName,
-    forwardedRef,
-    extensions = [],
+    editorClassName = "",
     editorProps = {},
+    extensions = [],
     fileHandler,
+    flaggedExtensions,
+    forwardedRef,
     handleEditorReady,
+    initialValue,
     mentionHandler,
     provider,
   } = props;
@@ -59,8 +46,9 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
     extensions: [
       ...CoreReadOnlyEditorExtensions({
         disabledExtensions,
-        mentionHandler,
         fileHandler,
+        flaggedExtensions,
+        mentionHandler,
       }),
       ...extensions,
     ],

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

@@ -1,50 +1,4 @@
-import { Extensions } from "@tiptap/core";
-import { EditorProps } from "@tiptap/pm/view";
-// plane editor types
-import { TEmbedConfig } from "@/plane-editor/types";
-// types
-import {
-  EditorReadOnlyRefApi,
-  EditorRefApi,
-  TExtensions,
-  TFileHandler,
-  TMentionHandler,
-  TReadOnlyFileHandler,
-  TReadOnlyMentionHandler,
-  TRealtimeConfig,
-  TUserDetails,
-} from "@/types";
-
 export type TServerHandler = {
   onConnect?: () => void;
   onServerError?: () => void;
 };
-
-type TCollaborativeEditorHookProps = {
-  disabledExtensions: TExtensions[];
-  editable: boolean;
-  editorClassName: string;
-  editorProps?: EditorProps;
-  extensions?: Extensions;
-  handleEditorReady?: (value: boolean) => void;
-  id: string;
-  realtimeConfig: TRealtimeConfig;
-  serverHandler?: TServerHandler;
-  user: TUserDetails;
-};
-
-export type TCollaborativeEditorProps = TCollaborativeEditorHookProps & {
-  onTransaction?: () => void;
-  embedHandler?: TEmbedConfig;
-  fileHandler: TFileHandler;
-  forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
-  mentionHandler: TMentionHandler;
-  placeholder?: string | ((isFocused: boolean, value: string) => string);
-  tabIndex?: number;
-};
-
-export type TReadOnlyCollaborativeEditorProps = TCollaborativeEditorHookProps & {
-  fileHandler: TReadOnlyFileHandler;
-  forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
-  mentionHandler: TReadOnlyMentionHandler;
-};

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

@@ -1,3 +1,6 @@
+// plane imports
+import { TWebhookConnectionQueryParams } from "@plane/types";
+
 export type TReadOnlyFileHandler = {
   checkIfAssetExists: (assetId: string) => Promise<boolean>;
   getAssetSrc: (path: string) => Promise<string>;
@@ -30,3 +33,15 @@ export type TDisplayConfig = {
   lineSpacing?: TEditorLineSpacing;
   wideLayout?: boolean;
 };
+
+export type TUserDetails = {
+  color: string;
+  id: string;
+  name: string;
+  cookie?: string;
+};
+
+export type TRealtimeConfig = {
+  url: string;
+  queryParams: TWebhookConnectionQueryParams;
+};

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

@@ -1,13 +1,11 @@
-import { Extensions, JSONContent } from "@tiptap/core";
-import { Selection } from "@tiptap/pm/state";
-// plane types
-import { TWebhookConnectionQueryParams } from "@plane/types";
+import type { Extensions, JSONContent } from "@tiptap/core";
+import type { Selection } from "@tiptap/pm/state";
 // extension types
-import { TTextAlign } from "@/extensions";
+import type { TTextAlign } from "@/extensions";
 // helpers
-import { IMarking } from "@/helpers/scroll-to-node";
+import type { IMarking } from "@/helpers/scroll-to-node";
 // types
-import {
+import type {
   TAIHandler,
   TDisplayConfig,
   TDocumentEventEmitter,
@@ -18,7 +16,9 @@ import {
   TMentionHandler,
   TReadOnlyFileHandler,
   TReadOnlyMentionHandler,
+  TRealtimeConfig,
   TServerHandler,
+  TUserDetails,
 } from "@/types";
 
 export type TEditorCommands =
@@ -114,90 +114,70 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
 
 // editor props
 export interface IEditorProps {
+  autofocus?: boolean;
+  bubbleMenuEnabled?: boolean;
   containerClassName?: string;
   displayConfig?: TDisplayConfig;
   disabledExtensions: TExtensions[];
   editorClassName?: string;
+  extensions?: Extensions;
+  flaggedExtensions: TExtensions[];
   fileHandler: TFileHandler;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
+  handleEditorReady?: (value: boolean) => void;
   id: string;
   initialValue: string;
   mentionHandler: TMentionHandler;
   onChange?: (json: object, html: string) => void;
-  onTransaction?: () => void;
-  handleEditorReady?: (value: boolean) => void;
-  autofocus?: boolean;
   onEnterKeyPress?: (e?: any) => void;
+  onTransaction?: () => void;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
   value?: string | null;
-  bubbleMenuEnabled?: boolean;
 }
-export interface ILiteTextEditor extends IEditorProps {
-  extensions?: Extensions;
-}
-export interface IRichTextEditor extends IEditorProps {
-  extensions?: Extensions;
+
+export type ILiteTextEditorProps = IEditorProps;
+export interface IRichTextEditorProps extends IEditorProps {
   dragDropEnabled?: boolean;
 }
 
-export interface ICollaborativeDocumentEditor
-  extends Omit<IEditorProps, "initialValue" | "onChange" | "onEnterKeyPress" | "value"> {
+export interface ICollaborativeDocumentEditorProps
+  extends Omit<IEditorProps, "extensions" | "initialValue" | "onEnterKeyPress" | "value"> {
   aiHandler?: TAIHandler;
-  bubbleMenuEnabled?: boolean;
   editable: boolean;
   embedHandler: TEmbedConfig;
-  handleEditorReady?: (value: boolean) => void;
-  id: string;
   realtimeConfig: TRealtimeConfig;
   serverHandler?: TServerHandler;
   user: TUserDetails;
 }
 
 // read only editor props
-export interface IReadOnlyEditorProps {
-  containerClassName?: string;
-  disabledExtensions: TExtensions[];
-  displayConfig?: TDisplayConfig;
-  editorClassName?: string;
-  extensions?: Extensions;
+export interface IReadOnlyEditorProps
+  extends Pick<
+    IEditorProps,
+    | "containerClassName"
+    | "disabledExtensions"
+    | "flaggedExtensions"
+    | "displayConfig"
+    | "editorClassName"
+    | "extensions"
+    | "handleEditorReady"
+    | "id"
+    | "initialValue"
+  > {
   fileHandler: TReadOnlyFileHandler;
   forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
-  id: string;
-  initialValue: string;
   mentionHandler: TReadOnlyMentionHandler;
 }
 
-export type ILiteTextReadOnlyEditor = IReadOnlyEditorProps;
+export type ILiteTextReadOnlyEditorProps = IReadOnlyEditorProps;
 
-export type IRichTextReadOnlyEditor = IReadOnlyEditorProps;
+export type IRichTextReadOnlyEditorProps = IReadOnlyEditorProps;
 
-export interface ICollaborativeDocumentReadOnlyEditor extends Omit<IReadOnlyEditorProps, "initialValue"> {
+export interface IDocumentReadOnlyEditorProps extends IReadOnlyEditorProps {
   embedHandler: TEmbedConfig;
-  handleEditorReady?: (value: boolean) => void;
-  id: string;
-  realtimeConfig: TRealtimeConfig;
-  serverHandler?: TServerHandler;
-  user: TUserDetails;
 }
 
-export interface IDocumentReadOnlyEditor extends IReadOnlyEditorProps {
-  embedHandler: TEmbedConfig;
-  handleEditorReady?: (value: boolean) => void;
-}
-
-export type TUserDetails = {
-  color: string;
-  id: string;
-  name: string;
-  cookie?: string;
-};
-
-export type TRealtimeConfig = {
-  url: string;
-  queryParams: TWebhookConnectionQueryParams;
-};
-
 export interface EditorEvents {
   beforeCreate: never;
   create: never;

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

@@ -0,0 +1,50 @@
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { EditorProps } from "@tiptap/pm/view";
+// local imports
+import type { ICollaborativeDocumentEditorProps, IEditorProps, IReadOnlyEditorProps } from "./editor";
+
+type TCoreHookProps = Pick<
+  IEditorProps,
+  "disabledExtensions" | "editorClassName" | "extensions" | "flaggedExtensions" | "handleEditorReady"
+> & {
+  editorProps?: EditorProps;
+};
+
+export type TEditorHookProps = TCoreHookProps &
+  Pick<
+    IEditorProps,
+    | "autofocus"
+    | "fileHandler"
+    | "forwardedRef"
+    | "id"
+    | "mentionHandler"
+    | "onChange"
+    | "onTransaction"
+    | "placeholder"
+    | "tabIndex"
+    | "value"
+  > & {
+    editable: boolean;
+    enableHistory: boolean;
+    initialValue?: string;
+    provider?: HocuspocusProvider;
+  };
+
+export type TCollaborativeEditorHookProps = TCoreHookProps &
+  Pick<
+    TEditorHookProps,
+    | "editable"
+    | "fileHandler"
+    | "forwardedRef"
+    | "id"
+    | "mentionHandler"
+    | "onChange"
+    | "onTransaction"
+    | "placeholder"
+    | "tabIndex"
+  > &
+  Pick<ICollaborativeDocumentEditorProps, "embedHandler" | "realtimeConfig" | "serverHandler" | "user">;
+
+export type TReadOnlyEditorHookProps = TCoreHookProps &
+  Pick<TEditorHookProps, "initialValue" | "provider"> &
+  Pick<IReadOnlyEditorProps, "fileHandler" | "forwardedRef" | "mentionHandler">;

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

@@ -4,6 +4,7 @@ export * from "./config";
 export * from "./editor";
 export * from "./embed";
 export * from "./extensions";
+export * from "./hook";
 export * from "./mention";
 export * from "./slash-commands-suggestion";
 export * from "@/plane-editor/types";

packages/editor/src/index.ts

@@ -36,5 +36,4 @@ export { type IMarking, useEditorMarkings } from "@/hooks/use-editor-markings";
 export { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
 
 // types
-export type { CustomEditorProps } from "@/hooks/use-editor";
 export * from "@/types";