Add editor history (#1284)

* add slate editor history

* reset mark on editor reset

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;
   }