From 41f67cabc047dc44c36c5b907004c4d03b782a9d Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 16 Jun 2023 11:11:03 +1000
Subject: [PATCH] Add editor history (#1284)

* add slate editor history

* reset mark on editor reset
---
 package-lock.json                    | 12 ++++++++++++
 package.json                         |  1 +
 src/app/components/editor/Editor.tsx |  4 ++--
 src/app/components/editor/common.ts  |  9 +++++++++
 src/app/components/editor/slate.d.ts |  7 +++----
 src/app/organisms/room/RoomInput.tsx |  3 +++
 6 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 99e3c91..bb98ea6 100644
--- 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 5f0f42f..bf9adea 100644
--- 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 3f048a6..f4241e0 100644
--- 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 2f20790..1988409 100644
--- 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 a321904..74b2070 100644
--- 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 3a22b57..39016ad 100644
--- 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]);