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( 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( } mx.sendMessage(roomId, content); resetEditor(editor); + resetEditorHistory(editor); setReplyDraft(); sendTypingStatus(false); }, [mx, roomId, editor, replyDraft, sendTypingStatus, setReplyDraft]);