Add editor history (#1284)

* add slate editor history

* reset mark on editor reset

package-lock.json

@@ -48,6 +48,7 @@
         "react-modal": "3.16.1",
         "sanitize-html": "2.8.0",
         "slate": "0.90.0",
+        "slate-history": "0.93.0",
         "slate-react": "0.90.0",
         "tippy.js": "6.3.7",
         "twemoji": "14.0.2",
@@ -5210,6 +5211,17 @@
         "tiny-warning": "^1.0.3"
       }
     },
+    "node_modules/slate-history": {
+      "version": "0.93.0",
+      "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.93.0.tgz",
+      "integrity": "sha512-Gr1GMGPipRuxIz41jD2/rbvzPj8eyar56TVMyJBvBeIpQSSjNISssvGNDYfJlSWM8eaRqf6DAcxMKzsLCYeX6g==",
+      "dependencies": {
+        "is-plain-object": "^5.0.0"
+      },
+      "peerDependencies": {
+        "slate": ">=0.65.3"
+      }
+    },
     "node_modules/slate-react": {
       "version": "0.90.0",
       "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.90.0.tgz",

package.json

@@ -58,6 +58,7 @@
     "react-modal": "3.16.1",
     "sanitize-html": "2.8.0",
     "slate": "0.90.0",
+    "slate-history": "0.93.0",
     "slate-react": "0.90.0",
     "tippy.js": "6.3.7",
     "twemoji": "14.0.2",

src/app/components/editor/Editor.tsx

@@ -7,7 +7,6 @@ import React, {
   useCallback,
   useState,
 } from 'react';
-
 import { Box, Scroll, Text } from 'folds';
 import { Descendant, Editor, createEditor } from 'slate';
 import {
@@ -18,6 +17,7 @@ import {
   RenderElementProps,
   RenderPlaceholderProps,
 } from 'slate-react';
+import { withHistory } from 'slate-history';
 import { BlockType, RenderElement, RenderLeaf } from './Elements';
 import { CustomElement } from './slate';
 import * as css from './Editor.css';
@@ -50,7 +50,7 @@ const withVoid = (editor: Editor): Editor => {
 };
 
 export const useEditor = (): Editor => {
-  const [editor] = useState(withInline(withVoid(withReact(createEditor()))));
+  const [editor] = useState(withInline(withVoid(withReact(withHistory(createEditor())))));
   return editor;
 };
 

src/app/components/editor/common.ts

@@ -124,6 +124,15 @@ export const resetEditor = (editor: Editor) => {
   });
 
   toggleBlock(editor, BlockType.Paragraph);
+  removeAllMark(editor);
+};
+
+export const resetEditorHistory = (editor: Editor) => {
+  // eslint-disable-next-line no-param-reassign
+  editor.history = {
+    undos: [],
+    redos: [],
+  };
 };
 
 export const createMentionElement = (

src/app/components/editor/slate.d.ts

@@ -1,10 +1,11 @@
 import { BaseEditor } from 'slate';
 import { ReactEditor } from 'slate-react';
+import { HistoryEditor } from 'slate-history';
 import { BlockType } from './Elements';
 
 export type HeadingLevel = 1 | 2 | 3;
 
-export type Editor = BaseEditor & ReactEditor;
+export type Editor = BaseEditor & HistoryEditor & ReactEditor;
 
 export type Text = {
   text: string;
@@ -96,11 +97,9 @@ export type CustomElement =
   | OrderedListElement
   | UnorderedListElement;
 
-export type CustomEditor = BaseEditor & ReactEditor;
-
 declare module 'slate' {
   interface CustomTypes {
-    Editor: BaseEditor & ReactEditor;
+    Editor: Editor;
     Element: CustomElement;
     Text: FormattedText & Text;
   }

src/app/organisms/room/RoomInput.tsx

@@ -50,6 +50,7 @@ import {
   EmoticonAutocomplete,
   createEmoticonElement,
   moveCursor,
+  resetEditorHistory,
 } from '../../components/editor';
 import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -180,6 +181,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         const parsedDraft = JSON.parse(JSON.stringify(editor.children));
         setMsgDraft(parsedDraft);
         resetEditor(editor);
+        resetEditorHistory(editor);
       };
     }, [roomId, editor, setMsgDraft]);
 
@@ -288,6 +290,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       }
       mx.sendMessage(roomId, content);
       resetEditor(editor);
+      resetEditorHistory(editor);
       setReplyDraft();
       sendTypingStatus(false);
     }, [mx, roomId, editor, replyDraft, sendTypingStatus, setReplyDraft]);