RGBCube/cinny
1
Fork 0
mirror of https://github.com/RGBCube/cinny synced 2025-07-31 08:57:46 +00:00
Code Issues Activity

Add editor history (#1284)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/editor/Editor.tsx
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;
};

9
src/app/components/editor/common.ts
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 = (

7
src/app/components/editor/slate.d.ts vendored
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;
}

3
src/app/organisms/room/RoomInput.tsx
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]);