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({