fix: product updates modal

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

@@ -15,6 +15,7 @@ import { EditorReadOnlyRefApi, ICollaborativeDocumentReadOnlyEditor } from "@/ty
 const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOnlyEditor) => {
   const {
     containerClassName,
+    disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editorClassName = "",
     embedHandler,
@@ -37,6 +38,7 @@ const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOn
   }
 
   const { editor, hasServerConnectionFailed, hasServerSynced } = useReadOnlyCollaborativeEditor({
+    disabledExtensions,
     editorClassName,
     extensions,
     fileHandler,

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

@@ -12,9 +12,10 @@ import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
 // plane web types
 import { TReadOnlyEmbedConfig } from "@/plane-editor/types";
 // types
-import { EditorReadOnlyRefApi, IMentionHighlight, TDisplayConfig, TFileHandler } from "@/types";
+import { EditorReadOnlyRefApi, IMentionHighlight, TDisplayConfig, TExtensions, TFileHandler } from "@/types";
 
 interface IDocumentReadOnlyEditor {
+  disabledExtensions: TExtensions[];
   id: string;
   initialValue: string;
   containerClassName: string;
@@ -33,6 +34,7 @@ interface IDocumentReadOnlyEditor {
 const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
   const {
     containerClassName,
+    disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editorClassName = "",
     embedHandler,
@@ -53,6 +55,7 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
   }
 
   const editor = useReadOnlyEditor({
+    disabledExtensions,
     editorClassName,
     extensions,
     fileHandler,

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

@@ -19,6 +19,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
   const {
     children,
     containerClassName,
+    disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editorClassName = "",
     extensions,
@@ -37,6 +38,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
   } = props;
 
   const editor = useEditor({
+    disabledExtensions,
     editorClassName,
     enableHistory: true,
     extensions,

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

@@ -12,6 +12,7 @@ import { IReadOnlyEditorProps } from "@/types";
 export const ReadOnlyEditorWrapper = (props: IReadOnlyEditorProps) => {
   const {
     containerClassName,
+    disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editorClassName = "",
     fileHandler,
@@ -22,6 +23,7 @@ export const ReadOnlyEditorWrapper = (props: IReadOnlyEditorProps) => {
   } = props;
 
   const editor = useReadOnlyEditor({
+    disabledExtensions,
     editorClassName,
     fileHandler,
     forwardedRef,

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

@@ -8,12 +8,7 @@ import { SideMenuExtension, SlashCommands } from "@/extensions";
 import { EditorRefApi, IRichTextEditor } from "@/types";
 
 const RichTextEditor = (props: IRichTextEditor) => {
-  const {
-    disabledExtensions,
-    dragDropEnabled,
-    bubbleMenuEnabled = true,
-    extensions: externalExtensions = [],
-  } = props;
+  const { disabledExtensions, dragDropEnabled, bubbleMenuEnabled = true, extensions: externalExtensions = [] } = props;
 
   const getExtensions = useCallback(() => {
     const extensions = [
@@ -24,7 +19,11 @@ const RichTextEditor = (props: IRichTextEditor) => {
       }),
     ];
     if (!disabledExtensions?.includes("slash-commands")) {
-      extensions.push(SlashCommands());
+      extensions.push(
+        SlashCommands({
+          disabledExtensions,
+        })
+      );
     }
 
     return extensions;

packages/editor/src/core/extensions/extensions.tsx

@@ -32,11 +32,12 @@ import {
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
 // types
-import { IMentionHighlight, IMentionSuggestion, TFileHandler } from "@/types";
+import { IMentionHighlight, IMentionSuggestion, TExtensions, TFileHandler } from "@/types";
 // plane editor extensions
 import { CoreEditorAdditionalExtensions } from "@/plane-editor/extensions";
 
 type TArguments = {
+  disabledExtensions: TExtensions[];
   enableHistory: boolean;
   fileHandler: TFileHandler;
   mentionConfig: {
@@ -48,7 +49,7 @@ type TArguments = {
 };
 
 export const CoreEditorExtensions = (args: TArguments): Extensions => {
-  const { enableHistory, fileHandler, mentionConfig, placeholder, tabIndex } = args;
+  const { disabledExtensions, enableHistory, fileHandler, mentionConfig, placeholder, tabIndex } = args;
 
   return [
     StarterKit.configure({
@@ -163,6 +164,8 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     CharacterCount,
     CustomTextAlignExtension,
     CustomColorExtension,
-    ...CoreEditorAdditionalExtensions(),
+    ...CoreEditorAdditionalExtensions({
+      disabledExtensions,
+    }),
   ];
 };

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

@@ -28,11 +28,12 @@ import {
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
 // types
-import { IMentionHighlight, TFileHandler } from "@/types";
+import { IMentionHighlight, TExtensions, TFileHandler } from "@/types";
 // plane editor extensions
 import { CoreReadOnlyEditorAdditionalExtensions } from "@/plane-editor/extensions";
 
 type Props = {
+  disabledExtensions: TExtensions[];
   fileHandler: Pick<TFileHandler, "getAssetSrc">;
   mentionConfig: {
     mentionHighlights?: () => Promise<IMentionHighlight[]>;
@@ -40,7 +41,7 @@ type Props = {
 };
 
 export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
-  const { fileHandler, mentionConfig } = props;
+  const { disabledExtensions, fileHandler, mentionConfig } = props;
 
   return [
     StarterKit.configure({
@@ -129,6 +130,8 @@ export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
     CustomColorExtension,
     HeadingListExtension,
     CustomTextAlignExtension,
-    ...CoreReadOnlyEditorAdditionalExtensions(),
+    ...CoreReadOnlyEditorAdditionalExtensions({
+      disabledExtensions,
+    }),
   ];
 };

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

@@ -37,7 +37,10 @@ import {
   setText,
 } from "@/helpers/editor-commands";
 // types
-import { CommandProps, ISlashCommandItem, TSlashCommandSectionKeys } from "@/types";
+import { CommandProps, ISlashCommandItem, TExtensions, TSlashCommandSectionKeys } from "@/types";
+// plane editor extensions
+import { coreEditorAdditionalSlashCommandOptions } from "@/plane-editor/extensions";
+// local types
 import { TSlashCommandAdditionalOption } from "./root";
 
 export type TSlashCommandSection = {
@@ -46,9 +49,15 @@ export type TSlashCommandSection = {
   items: ISlashCommandItem[];
 };
 
+type TArgs = {
+  additionalOptions?: TSlashCommandAdditionalOption[];
+  disabledExtensions: TExtensions[];
+};
+
 export const getSlashCommandFilteredSections =
-  (additionalOptions?: TSlashCommandAdditionalOption[]) =>
+  (args: TArgs) =>
   ({ query }: { query: string }): TSlashCommandSection[] => {
+    const { additionalOptions, disabledExtensions } = args;
     const SLASH_COMMAND_SECTIONS: TSlashCommandSection[] = [
       {
         key: "general",
@@ -269,7 +278,12 @@ export const getSlashCommandFilteredSections =
       },
     ];
 
-    additionalOptions?.forEach((item) => {
+    [
+      ...(additionalOptions ?? []),
+      ...coreEditorAdditionalSlashCommandOptions({
+        disabledExtensions,
+      }),
+    ]?.forEach((item) => {
       const sectionToPushTo = SLASH_COMMAND_SECTIONS.find((s) => s.key === item.section) ?? SLASH_COMMAND_SECTIONS[0];
       const itemIndexToPushAfter = sectionToPushTo.items.findIndex((i) => i.commandKey === item.pushAfter);
       if (itemIndexToPushAfter !== undefined) {

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

@@ -3,7 +3,7 @@ import { ReactRenderer } from "@tiptap/react";
 import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
 import tippy from "tippy.js";
 // types
-import { ISlashCommandItem, TEditorCommands, TSlashCommandSectionKeys } from "@/types";
+import { ISlashCommandItem, TEditorCommands, TExtensions, TSlashCommandSectionKeys } from "@/types";
 // components
 import { getSlashCommandFilteredSections } from "./command-items-list";
 import { SlashCommandsMenu, SlashCommandsMenuProps } from "./command-menu";
@@ -107,10 +107,15 @@ const renderItems = () => {
   };
 };
 
-export const SlashCommands = (additionalOptions?: TSlashCommandAdditionalOption[]) =>
+type TExtensionProps = {
+  additionalOptions?: TSlashCommandAdditionalOption[];
+  disabledExtensions: TExtensions[];
+};
+
+export const SlashCommands = (props: TExtensionProps) =>
   Command.configure({
     suggestion: {
-      items: getSlashCommandFilteredSections(additionalOptions),
+      items: getSlashCommandFilteredSections(props),
       render: renderItems,
     },
   });

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

@@ -75,6 +75,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
   }, [provider, id]);
 
   const editor = useEditor({
+    disabledExtensions,
     id,
     onTransaction,
     editorProps,

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

@@ -16,12 +16,20 @@ import { IMarking, scrollSummary, scrollToNodeViaDOMCoordinates } from "@/helper
 // props
 import { CoreEditorProps } from "@/props";
 // types
-import { EditorRefApi, IMentionHighlight, IMentionSuggestion, TEditorCommands, TFileHandler } from "@/types";
+import {
+  EditorRefApi,
+  IMentionHighlight,
+  IMentionSuggestion,
+  TEditorCommands,
+  TExtensions,
+  TFileHandler,
+} from "@/types";
 
 export interface CustomEditorProps {
   editorClassName: string;
   editorProps?: EditorProps;
   enableHistory: boolean;
+  disabledExtensions: TExtensions[];
   extensions?: any;
   fileHandler: TFileHandler;
   forwardedRef?: MutableRefObject<EditorRefApi | null>;
@@ -45,6 +53,7 @@ export interface CustomEditorProps {
 
 export const useEditor = (props: CustomEditorProps) => {
   const {
+    disabledExtensions,
     editorClassName,
     editorProps = {},
     enableHistory,
@@ -79,6 +88,7 @@ export const useEditor = (props: CustomEditorProps) => {
     },
     extensions: [
       ...CoreEditorExtensions({
+        disabledExtensions,
         enableHistory,
         fileHandler,
         mentionConfig: {

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

@@ -11,6 +11,7 @@ import { TReadOnlyCollaborativeEditorProps } from "@/types";
 
 export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEditorProps) => {
   const {
+    disabledExtensions,
     editorClassName,
     editorProps = {},
     extensions,
@@ -66,6 +67,7 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit
   }, [provider, id]);
 
   const editor = useReadOnlyEditor({
+    disabledExtensions,
     editorProps,
     editorClassName,
     extensions: [

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

@@ -11,14 +11,15 @@ import { IMarking, scrollSummary } from "@/helpers/scroll-to-node";
 // props
 import { CoreReadOnlyEditorProps } from "@/props";
 // types
-import { EditorReadOnlyRefApi, IMentionHighlight, TFileHandler } from "@/types";
+import { EditorReadOnlyRefApi, IMentionHighlight, TExtensions, TFileHandler } from "@/types";
 
 interface CustomReadOnlyEditorProps {
-  initialValue?: string;
+  disabledExtensions: TExtensions[];
   editorClassName: string;
-  forwardedRef?: MutableRefObject<EditorReadOnlyRefApi | null>;
-  extensions?: any;
   editorProps?: EditorProps;
+  extensions?: any;
+  forwardedRef?: MutableRefObject<EditorReadOnlyRefApi | null>;
+  initialValue?: string;
   fileHandler: Pick<TFileHandler, "getAssetSrc">;
   handleEditorReady?: (value: boolean) => void;
   mentionHandler: {
@@ -29,6 +30,7 @@ interface CustomReadOnlyEditorProps {
 
 export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
   const {
+    disabledExtensions,
     initialValue,
     editorClassName,
     forwardedRef,
@@ -54,6 +56,7 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
     },
     extensions: [
       ...CoreReadOnlyEditorExtensions({
+        disabledExtensions,
         mentionConfig: {
           mentionHighlights: mentionHandler.highlights,
         },

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

@@ -20,7 +20,7 @@ export type TServerHandler = {
 };
 
 type TCollaborativeEditorHookProps = {
-  disabledExtensions?: TExtensions[];
+  disabledExtensions: TExtensions[];
   editorClassName: string;
   editorProps?: EditorProps;
   extensions?: Extensions;

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

@@ -106,7 +106,7 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
 export interface IEditorProps {
   containerClassName?: string;
   displayConfig?: TDisplayConfig;
-  disabledExtensions?: TExtensions[];
+  disabledExtensions: TExtensions[];
   editorClassName?: string;
   fileHandler: TFileHandler;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
@@ -148,6 +148,7 @@ export interface ICollaborativeDocumentEditor
 // read only editor props
 export interface IReadOnlyEditorProps {
   containerClassName?: string;
+  disabledExtensions: TExtensions[];
   displayConfig?: TDisplayConfig;
   editorClassName?: string;
   fileHandler: Pick<TFileHandler, "getAssetSrc">;

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

@@ -1 +1 @@
-export type TExtensions = "ai" | "collaboration-cursor" | "issue-embed" | "slash-commands"| "enter-key";
+export type TExtensions = "ai" | "collaboration-cursor" | "issue-embed" | "slash-commands" | "enter-key" | "callout";

space/core/components/editor/lite-text-editor.tsx

@@ -10,7 +10,8 @@ import { isCommentEmpty } from "@/helpers/string.helper";
 // hooks
 import { useMention } from "@/hooks/use-mention";
 
-interface LiteTextEditorWrapperProps extends Omit<ILiteTextEditor, "fileHandler" | "mentionHandler"> {
+interface LiteTextEditorWrapperProps
+  extends Omit<ILiteTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
   anchor: string;
   workspaceId: string;
   isSubmitting?: boolean;
@@ -41,6 +42,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
     <div className="border border-custom-border-200 rounded p-3 space-y-3">
       <LiteTextEditorWithRef
         ref={ref}
+        disabledExtensions={[]}
         fileHandler={getEditorFileHandlers({
           anchor,
           uploadFile,

space/core/components/editor/lite-text-read-only-editor.tsx

@@ -7,7 +7,10 @@ import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { useMention } from "@/hooks/use-mention";
 
-type LiteTextReadOnlyEditorWrapperProps = Omit<ILiteTextReadOnlyEditor, "fileHandler" | "mentionHandler"> & {
+type LiteTextReadOnlyEditorWrapperProps = Omit<
+  ILiteTextReadOnlyEditor,
+  "disabledExtensions" | "fileHandler" | "mentionHandler"
+> & {
   anchor: string;
 };
 
@@ -18,6 +21,7 @@ export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Lit
     return (
       <LiteTextReadOnlyEditorWithRef
         ref={ref}
+        disabledExtensions={[]}
         fileHandler={getReadOnlyEditorFileHandlers({
           anchor,
         })}

space/core/components/editor/rich-text-editor.tsx

@@ -4,7 +4,8 @@ import { EditorRefApi, IMentionHighlight, IRichTextEditor, RichTextEditorWithRef
 // helpers
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
 
-interface RichTextEditorWrapperProps extends Omit<IRichTextEditor, "fileHandler" | "mentionHandler"> {
+interface RichTextEditorWrapperProps
+  extends Omit<IRichTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
   anchor: string;
   uploadFile: (file: File) => Promise<string>;
   workspaceId: string;
@@ -15,6 +16,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
 
   return (
     <RichTextEditorWithRef
+      disabledExtensions={[]}
       mentionHandler={{
         highlights: function (): Promise<IMentionHighlight[]> {
           throw new Error("Function not implemented.");

space/core/components/editor/rich-text-read-only-editor.tsx

@@ -7,7 +7,10 @@ import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { useMention } from "@/hooks/use-mention";
 
-type RichTextReadOnlyEditorWrapperProps = Omit<IRichTextReadOnlyEditor, "fileHandler" | "mentionHandler"> & {
+type RichTextReadOnlyEditorWrapperProps = Omit<
+  IRichTextReadOnlyEditor,
+  "disabledExtensions" | "fileHandler" | "mentionHandler"
+> & {
   anchor: string;
 };
 
@@ -18,6 +21,7 @@ export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Ric
     return (
       <RichTextReadOnlyEditorWithRef
         ref={ref}
+        disabledExtensions={[]}
         fileHandler={getReadOnlyEditorFileHandlers({
           anchor,
         })}

web/core/components/editor/lite-text-editor/lite-text-editor.tsx

@@ -14,9 +14,11 @@ import { isCommentEmpty } from "@/helpers/string.helper";
 // hooks
 import { useMember, useMention, useUser } from "@/hooks/store";
 // plane web hooks
+import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 import { useFileSize } from "@/plane-web/hooks/use-file-size";
 
-interface LiteTextEditorWrapperProps extends Omit<ILiteTextEditor, "fileHandler" | "mentionHandler"> {
+interface LiteTextEditorWrapperProps
+  extends Omit<ILiteTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
   workspaceSlug: string;
   workspaceId: string;
   projectId: string;
@@ -49,6 +51,8 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
     getUserDetails,
     project: { getProjectMemberIds },
   } = useMember();
+  // editor flaggings
+  const { liteTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
   // derived values
   const projectMemberIds = getProjectMemberIds(projectId);
   const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
@@ -72,6 +76,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
     <div className="border border-custom-border-200 rounded p-3 space-y-3">
       <LiteTextEditorWithRef
         ref={ref}
+        disabledExtensions={disabledExtensions}
         fileHandler={getEditorFileHandlers({
           maxFileSize,
           projectId,

web/core/components/editor/lite-text-editor/lite-text-read-only-editor.tsx

@@ -6,8 +6,13 @@ import { cn } from "@/helpers/common.helper";
 import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { useMention, useUser } from "@/hooks/store";
+// plane web hooks
+import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 
-type LiteTextReadOnlyEditorWrapperProps = Omit<ILiteTextReadOnlyEditor, "fileHandler" | "mentionHandler"> & {
+type LiteTextReadOnlyEditorWrapperProps = Omit<
+  ILiteTextReadOnlyEditor,
+  "disabledExtensions" | "fileHandler" | "mentionHandler"
+> & {
   workspaceSlug: string;
   projectId: string;
 };
@@ -19,10 +24,13 @@ export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Lit
     const { mentionHighlights } = useMention({
       user: currentUser,
     });
+    // editor flaggings
+    const { documentEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
 
     return (
       <LiteTextReadOnlyEditorWithRef
         ref={ref}
+        disabledExtensions={disabledExtensions}
         fileHandler={getReadOnlyEditorFileHandlers({
           projectId,
           workspaceSlug,

web/core/components/editor/rich-text-editor/rich-text-editor.tsx

@@ -9,9 +9,11 @@ import { getEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { useMember, useMention, useUser } from "@/hooks/store";
 // plane web hooks
+import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 import { useFileSize } from "@/plane-web/hooks/use-file-size";
 
-interface RichTextEditorWrapperProps extends Omit<IRichTextEditor, "fileHandler" | "mentionHandler"> {
+interface RichTextEditorWrapperProps
+  extends Omit<IRichTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
   workspaceSlug: string;
   workspaceId: string;
   projectId: string;
@@ -26,6 +28,8 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
     getUserDetails,
     project: { getProjectMemberIds },
   } = useMember();
+  // editor flaggings
+  const { richTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
   // derived values
   const projectMemberIds = getProjectMemberIds(projectId);
   const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
@@ -42,6 +46,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
   return (
     <RichTextEditorWithRef
       ref={ref}
+      disabledExtensions={disabledExtensions}
       fileHandler={getEditorFileHandlers({
         maxFileSize,
         projectId,

web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx

@@ -6,8 +6,13 @@ import { cn } from "@/helpers/common.helper";
 import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { useMention } from "@/hooks/store";
+// plane web hooks
+import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 
-type RichTextReadOnlyEditorWrapperProps = Omit<IRichTextReadOnlyEditor, "fileHandler" | "mentionHandler"> & {
+type RichTextReadOnlyEditorWrapperProps = Omit<
+  IRichTextReadOnlyEditor,
+  "disabledExtensions" | "fileHandler" | "mentionHandler"
+> & {
   workspaceSlug: string;
   projectId?: string;
 };
@@ -15,10 +20,13 @@ type RichTextReadOnlyEditorWrapperProps = Omit<IRichTextReadOnlyEditor, "fileHan
 export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, RichTextReadOnlyEditorWrapperProps>(
   ({ workspaceSlug, projectId, ...props }, ref) => {
     const { mentionHighlights } = useMention({});
+    // editor flaggings
+    const { richTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
 
     return (
       <RichTextReadOnlyEditorWithRef
         ref={ref}
+        disabledExtensions={disabledExtensions}
         fileHandler={getReadOnlyEditorFileHandlers({
           projectId,
           workspaceSlug,

web/core/components/global/product-updates/modal.tsx

@@ -59,6 +59,7 @@ export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer((props
             {data?.id && (
               <DocumentReadOnlyEditorWithRef
                 ref={editorRef}
+                disabledExtensions={[]}
                 id={data.id}
                 initialValue={data.description_html ?? "<p></p>"}
                 containerClassName="p-0 border-none"

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

@@ -84,7 +84,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     user: currentUser ?? undefined,
   });
   // editor flaggings
-  const { documentEditor } = useEditorFlagging(workspaceSlug?.toString());
+  const { documentEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
   // page filters
   const { fontSize, fontStyle, isFullWidth } = usePageFilters();
   // issue-embed
@@ -224,7 +224,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
               realtimeConfig={realtimeConfig}
               serverHandler={serverHandler}
               user={userConfig}
-              disabledExtensions={documentEditor}
+              disabledExtensions={disabledExtensions}
               aiHandler={{
                 menu: getAIMenu,
               }}
@@ -233,6 +233,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
             <CollaborativeDocumentReadOnlyEditorWithRef
               id={pageId}
               ref={readOnlyEditorRef}
+              disabledExtensions={disabledExtensions}
               fileHandler={getReadOnlyEditorFileHandlers({
                 projectId: projectId?.toString() ?? "",
                 workspaceSlug: workspaceSlug?.toString() ?? "",

web/core/components/pages/version/editor.tsx

@@ -12,6 +12,7 @@ import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 import { useMember, useMention, useUser } 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";
 
 export type TVersionEditorProps = {
@@ -31,6 +32,8 @@ export const PagesVersionEditor: React.FC<TVersionEditorProps> = observer((props
     getUserDetails,
     project: { getProjectMemberIds },
   } = useMember();
+  // editor flaggings
+  const { documentEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
   // derived values
   const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
   const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
@@ -101,6 +104,7 @@ export const PagesVersionEditor: React.FC<TVersionEditorProps> = observer((props
       id={activeVersion ?? ""}
       initialValue={description ?? "<p></p>"}
       containerClassName="p-0 pb-64 border-none"
+      disabledExtensions={disabledExtensions}
       displayConfig={displayConfig}
       editorClassName="pl-10"
       fileHandler={getReadOnlyEditorFileHandlers({