Add editor history (#1284)

* add slate editor history

* reset mark on editor reset

diff --git a/package-lock.json b/package-lock.json
index 99e3c913642e9188faf5a3718118bf335623fddd..bb98ea6992452169c8fd971fe70f58b304d64ad1 100644 (file)
--- a/package-lock.json
+++ b/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",

diff --git a/package.json b/package.json
index 5f0f42f28bf0ab4ef3fe0e770fbbfe19af076130..bf9adeaeaa9d525dee921235aae587df3f95fc38 100644 (file)
--- a/package.json
+++ b/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",

diff --git a/src/app/components/editor/Editor.tsx b/src/app/components/editor/Editor.tsx
index 3f048a6f88c43fb9db4d035f5ea453157ed957b2..f4241e0e3f3353539b9aa2981c4239d919e86112 100644 (file)
--- a/src/app/components/editor/Editor.tsx
+++ b/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;
 };
 

diff --git a/src/app/components/editor/common.ts b/src/app/components/editor/common.ts
index 2f20790de8bdc23f620be4a69ae3d80fbd6fcf84..198840973ddf2acedaca8bbe20b36a5f6ed6a934 100644 (file)
--- a/src/app/components/editor/common.ts
+++ b/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 = (

diff --git a/src/app/components/editor/slate.d.ts b/src/app/components/editor/slate.d.ts
index a321904bf1424fcc7c06366b610a201c4daff800..74b20708527808673ef6ae1b489b36acf576ca26 100644 (file)
--- a/src/app/components/editor/slate.d.ts
+++ b/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;
   }

diff --git a/src/app/organisms/room/RoomInput.tsx b/src/app/organisms/room/RoomInput.tsx
index 3a22b57f83568626e2f55e1a646d25ed151a1265..39016add2fc3b42b636682dc316c44b3c78cb6b0 100644 (file)
--- a/src/app/organisms/room/RoomInput.tsx
+++ b/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]);