fix: disable editor history conditionally (#5133)

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

@@ -34,6 +34,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
 
   const editor = useEditor({
     editorClassName,
+    enableHistory: true,
     extensions,
     fileHandler,
     forwardedRef,

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

@@ -30,23 +30,25 @@ import { isValidHttpUrl } from "@/helpers/common";
 import { DeleteImage, IMentionHighlight, IMentionSuggestion, RestoreImage, UploadImage } from "@/types";
 
 type TArguments = {
-  mentionConfig: {
-    mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
-    mentionHighlights?: () => Promise<IMentionHighlight[]>;
-  };
+  enableHistory: boolean;
   fileConfig: {
     deleteFile: DeleteImage;
     restoreFile: RestoreImage;
     cancelUploadImage?: () => void;
     uploadFile: UploadImage;
   };
+  mentionConfig: {
+    mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
+    mentionHighlights?: () => Promise<IMentionHighlight[]>;
+  };
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
 };
 
 export const CoreEditorExtensions = ({
-  mentionConfig,
+  enableHistory,
   fileConfig: { deleteFile, restoreFile, cancelUploadImage, uploadFile },
+  mentionConfig,
   placeholder,
   tabIndex,
 }: TArguments) => [
@@ -70,11 +72,11 @@ export const CoreEditorExtensions = ({
     codeBlock: false,
     horizontalRule: false,
     blockquote: false,
-    history: false,
     dropcursor: {
       color: "rgba(var(--color-text-100))",
       width: 1,
     },
+    ...(enableHistory ? {} : { history: false }),
   }),
   CustomQuoteExtension,
   DropHandlerExtension(uploadFile),

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

@@ -87,6 +87,7 @@ export const useDocumentEditor = (props: DocumentEditorProps) => {
     id,
     editorProps,
     editorClassName,
+    enableHistory: false,
     fileHandler,
     handleEditorReady,
     forwardedRef,

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

@@ -24,42 +24,44 @@ export type TFileHandler = {
 };
 
 export interface CustomEditorProps {
-  id?: string;
-  fileHandler: TFileHandler;
-  initialValue?: string;
   editorClassName: string;
-  // undefined when prop is not passed, null if intentionally passed to stop
-  // swr syncing
-  value?: string | null | undefined;
-  provider?: CollaborationProvider;
-  onChange?: (json: object, html: string) => void;
-  extensions?: any;
   editorProps?: EditorProps;
+  enableHistory: boolean;
+  extensions?: any;
+  fileHandler: TFileHandler;
   forwardedRef?: MutableRefObject<EditorRefApi | null>;
+  handleEditorReady?: (value: boolean) => void;
+  id?: string;
+  initialValue?: string;
   mentionHandler: {
     highlights: () => Promise<IMentionHighlight[]>;
     suggestions?: () => Promise<IMentionSuggestion[]>;
   };
-  handleEditorReady?: (value: boolean) => void;
+  onChange?: (json: object, html: string) => void;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
+  provider?: CollaborationProvider;
   tabIndex?: number;
+  // undefined when prop is not passed, null if intentionally passed to stop
+  // swr syncing
+  value?: string | null | undefined;
 }
 
 export const useEditor = ({
-  id = "",
-  editorProps = {},
-  initialValue,
   editorClassName,
-  value,
+  editorProps = {},
+  enableHistory,
   extensions = [],
   fileHandler,
-  onChange,
   forwardedRef,
-  tabIndex,
   handleEditorReady,
-  provider,
+  id = "",
+  initialValue,
   mentionHandler,
+  onChange,
   placeholder,
+  provider,
+  tabIndex,
+  value,
 }: CustomEditorProps) => {
   const editor = useCustomEditor({
     editorProps: {
@@ -68,16 +70,17 @@ export const useEditor = ({
     },
     extensions: [
       ...CoreEditorExtensions({
-        mentionConfig: {
-          mentionSuggestions: mentionHandler.suggestions ?? (() => Promise.resolve<IMentionSuggestion[]>([])),
-          mentionHighlights: mentionHandler.highlights ?? [],
-        },
+        enableHistory,
         fileConfig: {
           uploadFile: fileHandler.upload,
           deleteFile: fileHandler.delete,
           restoreFile: fileHandler.restore,
           cancelUploadImage: fileHandler.cancel,
         },
+        mentionConfig: {
+          mentionSuggestions: mentionHandler.suggestions ?? (() => Promise.resolve<IMentionSuggestion[]>([])),
+          mentionHighlights: mentionHandler.highlights ?? [],
+        },
         placeholder,
         tabIndex,
       }),