Add editor history (#1284)

* add slate editor history

* reset mark on editor reset
This commit is contained in:
Ajay Bura 2023-06-16 11:11:03 +10:00 committed by GitHub
parent bc5e7445d9
commit 41f67cabc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 30 additions and 6 deletions

12
package-lock.json generated
View file

@ -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",

View file

@ -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",

View file

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

View file

@ -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 = (

View file

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

View file

@ -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]);