diff --git a/packages/editor/src/ce/extensions/core/extensions.ts b/packages/editor/src/ce/extensions/core/extensions.ts
new file mode 100644
index 00000000000..d03229133b0
--- /dev/null
+++ b/packages/editor/src/ce/extensions/core/extensions.ts
@@ -0,0 +1,12 @@
+import { Extensions } from "@tiptap/core";
+// types
+import { TExtensions } from "@/types";
+
+type Props = {
+ disabledExtensions: TExtensions[];
+};
+
+export const CoreEditorAdditionalExtensions = (props: Props): Extensions => {
+ const {} = props;
+ return [];
+};
diff --git a/packages/editor/src/ce/extensions/core/index.ts b/packages/editor/src/ce/extensions/core/index.ts
new file mode 100644
index 00000000000..9ffc978c3f0
--- /dev/null
+++ b/packages/editor/src/ce/extensions/core/index.ts
@@ -0,0 +1,2 @@
+export * from "./extensions";
+export * from "./read-only-extensions";
diff --git a/packages/editor/src/ce/extensions/core/read-only-extensions.ts b/packages/editor/src/ce/extensions/core/read-only-extensions.ts
new file mode 100644
index 00000000000..398848e31d8
--- /dev/null
+++ b/packages/editor/src/ce/extensions/core/read-only-extensions.ts
@@ -0,0 +1,12 @@
+import { Extensions } from "@tiptap/core";
+// types
+import { TExtensions } from "@/types";
+
+type Props = {
+ disabledExtensions: TExtensions[];
+};
+
+export const CoreReadOnlyEditorAdditionalExtensions = (props: Props): Extensions => {
+ const {} = props;
+ return [];
+};
diff --git a/packages/editor/src/ce/extensions/core/without-props.ts b/packages/editor/src/ce/extensions/core/without-props.ts
new file mode 100644
index 00000000000..0debff0ea50
--- /dev/null
+++ b/packages/editor/src/ce/extensions/core/without-props.ts
@@ -0,0 +1,3 @@
+import { Extensions } from "@tiptap/core";
+
+export const CoreEditorAdditionalExtensionsWithoutProps: Extensions = [];
diff --git a/packages/editor/src/ce/extensions/document-extensions.tsx b/packages/editor/src/ce/extensions/document-extensions.tsx
index e3c94fa0e10..35d7c0f3dee 100644
--- a/packages/editor/src/ce/extensions/document-extensions.tsx
+++ b/packages/editor/src/ce/extensions/document-extensions.tsx
@@ -15,7 +15,13 @@ type Props = {
export const DocumentEditorAdditionalExtensions = (_props: Props) => {
const { disabledExtensions } = _props;
- const extensions: Extensions = disabledExtensions?.includes("slash-commands") ? [] : [SlashCommands()];
+ const extensions: Extensions = disabledExtensions?.includes("slash-commands")
+ ? []
+ : [
+ SlashCommands({
+ disabledExtensions,
+ }),
+ ];
return extensions;
};
diff --git a/packages/editor/src/ce/extensions/index.ts b/packages/editor/src/ce/extensions/index.ts
index 4a975b8c5a1..c9f58a936a9 100644
--- a/packages/editor/src/ce/extensions/index.ts
+++ b/packages/editor/src/ce/extensions/index.ts
@@ -1 +1,3 @@
+export * from "./core";
export * from "./document-extensions";
+export * from "./slash-commands";
diff --git a/packages/editor/src/ce/extensions/slash-commands.tsx b/packages/editor/src/ce/extensions/slash-commands.tsx
new file mode 100644
index 00000000000..6eabee08238
--- /dev/null
+++ b/packages/editor/src/ce/extensions/slash-commands.tsx
@@ -0,0 +1,14 @@
+// extensions
+import { TSlashCommandAdditionalOption } from "@/extensions";
+// types
+import { TExtensions } from "@/types";
+
+type Props = {
+ disabledExtensions: TExtensions[];
+};
+
+export const coreEditorAdditionalSlashCommandOptions = (props: Props): TSlashCommandAdditionalOption[] => {
+ const {} = props;
+ const options: TSlashCommandAdditionalOption[] = [];
+ return options;
+};
diff --git a/packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx
index aa925abece4..89acace7b70 100644
--- a/packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx
+++ b/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,
diff --git a/packages/editor/src/core/components/editors/document/read-only-editor.tsx b/packages/editor/src/core/components/editors/document/read-only-editor.tsx
index 8544157aa0e..b36fb44a7a9 100644
--- a/packages/editor/src/core/components/editors/document/read-only-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/read-only-editor.tsx
@@ -10,9 +10,10 @@ import { getEditorClassNames } from "@/helpers/common";
// hooks
import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
// 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;
@@ -31,6 +32,7 @@ interface IDocumentReadOnlyEditor {
const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
const {
containerClassName,
+ disabledExtensions,
displayConfig = DEFAULT_DISPLAY_CONFIG,
editorClassName = "",
embedHandler,
@@ -51,6 +53,7 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
}
const editor = useReadOnlyEditor({
+ disabledExtensions,
editorClassName,
extensions,
fileHandler,
diff --git a/packages/editor/src/core/components/editors/editor-wrapper.tsx b/packages/editor/src/core/components/editors/editor-wrapper.tsx
index 33f011535c5..075420ed74f 100644
--- a/packages/editor/src/core/components/editors/editor-wrapper.tsx
+++ b/packages/editor/src/core/components/editors/editor-wrapper.tsx
@@ -19,6 +19,7 @@ export const EditorWrapper: React.FC = (props) => {
const {
children,
containerClassName,
+ disabledExtensions,
displayConfig = DEFAULT_DISPLAY_CONFIG,
editorClassName = "",
extensions,
@@ -37,6 +38,7 @@ export const EditorWrapper: React.FC = (props) => {
} = props;
const editor = useEditor({
+ disabledExtensions,
editorClassName,
enableHistory: true,
extensions,
diff --git a/packages/editor/src/core/components/editors/read-only-editor-wrapper.tsx b/packages/editor/src/core/components/editors/read-only-editor-wrapper.tsx
index e06826a2895..6cd360ac0d7 100644
--- a/packages/editor/src/core/components/editors/read-only-editor-wrapper.tsx
+++ b/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,
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 87dba8b4d11..ffcc21da6c7 100644
--- a/packages/editor/src/core/components/editors/rich-text/editor.tsx
+++ b/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;
diff --git a/packages/editor/src/core/extensions/core-without-props.ts b/packages/editor/src/core/extensions/core-without-props.ts
index 075d90f2df4..cb1b0a00244 100644
--- a/packages/editor/src/core/extensions/core-without-props.ts
+++ b/packages/editor/src/core/extensions/core-without-props.ts
@@ -19,6 +19,8 @@ import { TableHeader, TableCell, TableRow, Table } from "./table";
import { CustomTextAlignExtension } from "./text-align";
import { CustomCalloutExtensionConfig } from "./callout/extension-config";
import { CustomColorExtension } from "./custom-color";
+// plane editor extensions
+import { CoreEditorAdditionalExtensionsWithoutProps } from "@/plane-editor/extensions/core/without-props";
export const CoreEditorExtensionsWithoutProps = [
StarterKit.configure({
@@ -89,6 +91,7 @@ export const CoreEditorExtensionsWithoutProps = [
CustomTextAlignExtension,
CustomCalloutExtensionConfig,
CustomColorExtension,
+ ...CoreEditorAdditionalExtensionsWithoutProps,
];
export const DocumentEditorExtensionsWithoutProps = [IssueWidgetWithoutProps()];
diff --git a/packages/editor/src/core/extensions/extensions.tsx b/packages/editor/src/core/extensions/extensions.tsx
index 959d20e2ba7..b8910a56c37 100644
--- a/packages/editor/src/core/extensions/extensions.tsx
+++ b/packages/editor/src/core/extensions/extensions.tsx
@@ -1,3 +1,4 @@
+import { Extensions } from "@tiptap/core";
import CharacterCount from "@tiptap/extension-character-count";
import Placeholder from "@tiptap/extension-placeholder";
import TaskItem from "@tiptap/extension-task-item";
@@ -32,9 +33,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: {
@@ -45,8 +49,8 @@ type TArguments = {
tabIndex?: number;
};
-export const CoreEditorExtensions = (args: TArguments) => {
- const { enableHistory, fileHandler, mentionConfig, placeholder, tabIndex } = args;
+export const CoreEditorExtensions = (args: TArguments): Extensions => {
+ const { disabledExtensions, enableHistory, fileHandler, mentionConfig, placeholder, tabIndex } = args;
return [
StarterKit.configure({
@@ -162,5 +166,8 @@ export const CoreEditorExtensions = (args: TArguments) => {
CustomTextAlignExtension,
CustomCalloutExtension,
CustomColorExtension,
+ ...CoreEditorAdditionalExtensions({
+ disabledExtensions,
+ }),
];
};
diff --git a/packages/editor/src/core/extensions/read-only-extensions.tsx b/packages/editor/src/core/extensions/read-only-extensions.tsx
index 2d90592d68c..9ca99495e55 100644
--- a/packages/editor/src/core/extensions/read-only-extensions.tsx
+++ b/packages/editor/src/core/extensions/read-only-extensions.tsx
@@ -1,3 +1,4 @@
+import { Extensions } from "@tiptap/core";
import CharacterCount from "@tiptap/extension-character-count";
import TaskItem from "@tiptap/extension-task-item";
import TaskList from "@tiptap/extension-task-list";
@@ -28,17 +29,20 @@ 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;
mentionConfig: {
mentionHighlights?: () => Promise;
};
};
-export const CoreReadOnlyEditorExtensions = (props: Props) => {
- const { fileHandler, mentionConfig } = props;
+export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
+ const { disabledExtensions, fileHandler, mentionConfig } = props;
return [
StarterKit.configure({
@@ -128,5 +132,8 @@ export const CoreReadOnlyEditorExtensions = (props: Props) => {
HeadingListExtension,
CustomTextAlignExtension,
CustomCalloutReadOnlyExtension,
+ ...CoreReadOnlyEditorAdditionalExtensions({
+ disabledExtensions,
+ }),
];
};
diff --git a/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
index c19bda30688..1efb729019f 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
@@ -39,17 +39,27 @@ import {
setText,
} from "@/helpers/editor-commands";
// types
-import { CommandProps, ISlashCommandItem } 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 = {
- key: string;
+ key: TSlashCommandSectionKeys;
title?: string;
items: ISlashCommandItem[];
};
+type TArgs = {
+ additionalOptions?: TSlashCommandAdditionalOption[];
+ disabledExtensions: TExtensions[];
+};
+
export const getSlashCommandFilteredSections =
- (additionalOptions?: ISlashCommandItem[]) =>
+ (args: TArgs) =>
({ query }: { query: string }): TSlashCommandSection[] => {
+ const { additionalOptions, disabledExtensions } = args;
const SLASH_COMMAND_SECTIONS: TSlashCommandSection[] = [
{
key: "general",
@@ -201,7 +211,7 @@ export const getSlashCommandFilteredSections =
],
},
{
- key: "text-color",
+ key: "text-colors",
title: "Colors",
items: [
{
@@ -242,7 +252,7 @@ export const getSlashCommandFilteredSections =
],
},
{
- key: "background-color",
+ key: "background-colors",
title: "Background colors",
items: [
{
@@ -279,8 +289,19 @@ export const getSlashCommandFilteredSections =
},
];
- additionalOptions?.map((item) => {
- SLASH_COMMAND_SECTIONS?.[0]?.items.push(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 !== -1) {
+ sectionToPushTo.items.splice(itemIndexToPushAfter + 1, 0, item);
+ } else {
+ sectionToPushTo.items.push(item);
+ }
});
const filteredSlashSections = SLASH_COMMAND_SECTIONS.map((section) => ({
diff --git a/packages/editor/src/core/extensions/slash-commands/root.tsx b/packages/editor/src/core/extensions/slash-commands/root.tsx
index a99cbc5f903..62c353f9275 100644
--- a/packages/editor/src/core/extensions/slash-commands/root.tsx
+++ b/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 } from "@/types";
+import { ISlashCommandItem, TEditorCommands, TExtensions, TSlashCommandSectionKeys } from "@/types";
// components
import { getSlashCommandFilteredSections } from "./command-items-list";
import { SlashCommandsMenu, SlashCommandsMenuProps } from "./command-menu";
@@ -12,6 +12,11 @@ export type SlashCommandOptions = {
suggestion: Omit;
};
+export type TSlashCommandAdditionalOption = ISlashCommandItem & {
+ section: TSlashCommandSectionKeys;
+ pushAfter: TEditorCommands;
+};
+
const Command = Extension.create({
name: "slash-command",
addOptions() {
@@ -102,10 +107,15 @@ const renderItems = () => {
};
};
-export const SlashCommands = (additionalOptions?: ISlashCommandItem[]) =>
+type TExtensionProps = {
+ additionalOptions?: TSlashCommandAdditionalOption[];
+ disabledExtensions: TExtensions[];
+};
+
+export const SlashCommands = (props: TExtensionProps) =>
Command.configure({
suggestion: {
- items: getSlashCommandFilteredSections(additionalOptions),
+ items: getSlashCommandFilteredSections(props),
render: renderItems,
},
});
diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts
index 5bee8c0c3f5..f32d7f4cca2 100644
--- a/packages/editor/src/core/hooks/use-collaborative-editor.ts
+++ b/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,
diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts
index eef72797cee..5cddc79e566 100644
--- a/packages/editor/src/core/hooks/use-editor.ts
+++ b/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;
@@ -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: {
diff --git a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts b/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
index d4081922973..62e08e5d32b 100644
--- a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
+++ b/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: [
diff --git a/packages/editor/src/core/hooks/use-read-only-editor.ts b/packages/editor/src/core/hooks/use-read-only-editor.ts
index 23ce023adcd..f75fa72685d 100644
--- a/packages/editor/src/core/hooks/use-read-only-editor.ts
+++ b/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;
- extensions?: any;
editorProps?: EditorProps;
+ extensions?: any;
+ forwardedRef?: MutableRefObject;
+ initialValue?: string;
fileHandler: Pick;
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,
},
diff --git a/packages/editor/src/core/types/collaboration.ts b/packages/editor/src/core/types/collaboration.ts
index 8609995ed83..35fbdb99680 100644
--- a/packages/editor/src/core/types/collaboration.ts
+++ b/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;
diff --git a/packages/editor/src/core/types/editor.ts b/packages/editor/src/core/types/editor.ts
index 53aae1f265d..4b134a854c0 100644
--- a/packages/editor/src/core/types/editor.ts
+++ b/packages/editor/src/core/types/editor.ts
@@ -104,7 +104,7 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
export interface IEditorProps {
containerClassName?: string;
displayConfig?: TDisplayConfig;
- disabledExtensions?: TExtensions[];
+ disabledExtensions: TExtensions[];
editorClassName?: string;
fileHandler: TFileHandler;
forwardedRef?: React.MutableRefObject;
@@ -146,6 +146,7 @@ export interface ICollaborativeDocumentEditor
// read only editor props
export interface IReadOnlyEditorProps {
containerClassName?: string;
+ disabledExtensions: TExtensions[];
displayConfig?: TDisplayConfig;
editorClassName?: string;
fileHandler: Pick;
diff --git a/packages/editor/src/core/types/extensions.ts b/packages/editor/src/core/types/extensions.ts
index 2be17a4effa..b3aacccc0af 100644
--- a/packages/editor/src/core/types/extensions.ts
+++ b/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";
diff --git a/packages/editor/src/core/types/slash-commands-suggestion.ts b/packages/editor/src/core/types/slash-commands-suggestion.ts
index 91c93203af4..d6dfae076fa 100644
--- a/packages/editor/src/core/types/slash-commands-suggestion.ts
+++ b/packages/editor/src/core/types/slash-commands-suggestion.ts
@@ -8,6 +8,8 @@ export type CommandProps = {
range: Range;
};
+export type TSlashCommandSectionKeys = "general" | "text-colors" | "background-colors";
+
export type ISlashCommandItem = {
commandKey: TEditorCommands;
key: string;
diff --git a/space/core/components/editor/lite-text-editor.tsx b/space/core/components/editor/lite-text-editor.tsx
index 0e3f34293b5..5d50271355a 100644
--- a/space/core/components/editor/lite-text-editor.tsx
+++ b/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 {
+interface LiteTextEditorWrapperProps
+ extends Omit {
anchor: string;
workspaceId: string;
isSubmitting?: boolean;
@@ -41,6 +42,7 @@ export const LiteTextEditor = React.forwardRef
& {
+type LiteTextReadOnlyEditorWrapperProps = Omit<
+ ILiteTextReadOnlyEditor,
+ "disabledExtensions" | "fileHandler" | "mentionHandler"
+> & {
anchor: string;
};
@@ -18,6 +21,7 @@ export const LiteTextReadOnlyEditor = React.forwardRef {
+interface RichTextEditorWrapperProps
+ extends Omit {
uploadFile: (file: File) => Promise;
}
@@ -27,6 +26,7 @@ export const RichTextEditor = forwardRef & {
+type RichTextReadOnlyEditorWrapperProps = Omit<
+ IRichTextReadOnlyEditor,
+ "disabledExtensions" | "fileHandler" | "mentionHandler"
+> & {
anchor: string;
};
@@ -18,6 +21,7 @@ export const RichTextReadOnlyEditor = React.forwardRef ({
documentEditor: ["ai", "collaboration-cursor"],
+ liteTextEditor: ["ai", "collaboration-cursor"],
richTextEditor: ["ai", "collaboration-cursor"],
});
diff --git a/web/core/components/editor/lite-text-editor/lite-text-editor.tsx b/web/core/components/editor/lite-text-editor/lite-text-editor.tsx
index 0822f1a97d3..0fe75904d8b 100644
--- a/web/core/components/editor/lite-text-editor/lite-text-editor.tsx
+++ b/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 {
+interface LiteTextEditorWrapperProps
+ extends Omit {
workspaceSlug: string;
workspaceId: string;
projectId: string;
@@ -49,6 +51,8 @@ export const LiteTextEditor = React.forwardRef getUserDetails(id) as IUserLite);
@@ -72,6 +76,7 @@ export const LiteTextEditor = React.forwardRef
& {
+type LiteTextReadOnlyEditorWrapperProps = Omit<
+ ILiteTextReadOnlyEditor,
+ "disabledExtensions" | "fileHandler" | "mentionHandler"
+> & {
workspaceSlug: string;
projectId: string;
};
@@ -19,10 +24,13 @@ export const LiteTextReadOnlyEditor = React.forwardRef {
+interface RichTextEditorWrapperProps
+ extends Omit {
workspaceSlug: string;
workspaceId: string;
projectId: string;
@@ -26,6 +28,8 @@ export const RichTextEditor = forwardRef getUserDetails(id) as IUserLite);
@@ -42,6 +46,7 @@ export const RichTextEditor = forwardRef & {
+type RichTextReadOnlyEditorWrapperProps = Omit<
+ IRichTextReadOnlyEditor,
+ "disabledExtensions" | "fileHandler" | "mentionHandler"
+> & {
workspaceSlug: string;
projectId?: string;
};
@@ -15,10 +20,13 @@ type RichTextReadOnlyEditorWrapperProps = Omit(
({ workspaceSlug, projectId, ...props }, ref) => {
const { mentionHighlights } = useMention({});
+ // editor flaggings
+ const { richTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
return (
= observer((props
{data?.id && (
"}
containerClassName="p-0 border-none"
diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx
index 0d299104fc4..ad27f9d7ded 100644
--- a/web/core/components/pages/editor/editor-body.tsx
+++ b/web/core/components/pages/editor/editor-body.tsx
@@ -84,7 +84,7 @@ export const PageEditorBody: React.FC = observer((props) => {
user: currentUser ?? undefined,
});
// editor flaggings
- const { documentEditor } = useEditorFlagging();
+ const { documentEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
// page filters
const { fontSize, fontStyle, isFullWidth } = usePageFilters();
// issue-embed
@@ -224,7 +224,7 @@ export const PageEditorBody: React.FC = observer((props) => {
realtimeConfig={realtimeConfig}
serverHandler={serverHandler}
user={userConfig}
- disabledExtensions={documentEditor}
+ disabledExtensions={disabledExtensions}
aiHandler={{
menu: getAIMenu,
}}
@@ -233,6 +233,7 @@ export const PageEditorBody: React.FC = observer((props) => {
= 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 = observer((props
id={activeVersion ?? ""}
initialValue={description ?? ""}
containerClassName="p-0 pb-64 border-none"
+ disabledExtensions={disabledExtensions}
displayConfig={displayConfig}
editorClassName="pl-10"
fileHandler={getReadOnlyEditorFileHandlers({