add escape to turn off active editor toolbar item

This commit is contained in:
Ajay Bura 2023-06-13 23:14:24 +05:30
parent cc65885da5
commit c2a35df5f7
3 changed files with 53 additions and 11 deletions
src/app/components/editor

View file

@ -93,7 +93,8 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
const handleKeydown: KeyboardEventHandler = useCallback(
(evt) => {
onKeyDown?.(evt);
toggleKeyboardShortcut(editor, evt);
const shortcutToggled = toggleKeyboardShortcut(editor, evt);
if (shortcutToggled) evt.preventDefault();
},
[editor, onKeyDown]
);

View file

@ -2,11 +2,25 @@ import { BasePoint, BaseRange, Editor, Element, Point, Range, Transforms } from
import { BlockType, MarkType } from './Elements';
import { EmoticonElement, FormattedText, HeadingLevel, LinkElement, MentionElement } from './slate';
const ALL_MARK_TYPE: MarkType[] = [
MarkType.Bold,
MarkType.Code,
MarkType.Italic,
MarkType.Spoiler,
MarkType.StrikeThrough,
MarkType.Underline,
];
export const isMarkActive = (editor: Editor, format: MarkType) => {
const marks = Editor.marks(editor);
return marks ? marks[format] === true : false;
};
export const isAnyMarkActive = (editor: Editor) => {
const marks = Editor.marks(editor);
return marks && !!ALL_MARK_TYPE.find((type) => marks[type] === true);
};
export const toggleMark = (editor: Editor, format: MarkType) => {
const isActive = isMarkActive(editor, format);
@ -17,6 +31,10 @@ export const toggleMark = (editor: Editor, format: MarkType) => {
}
};
export const removeAllMark = (editor: Editor) => {
ALL_MARK_TYPE.forEach((mark) => Editor.removeMark(editor, mark));
};
export const isBlockActive = (editor: Editor, format: BlockType) => {
const [match] = Editor.nodes(editor, {
match: (node) => Element.isElement(node) && node.type === format,

View file

@ -1,7 +1,7 @@
import { isHotkey } from 'is-hotkey';
import { KeyboardEvent } from 'react';
import { Editor } from 'slate';
import { isBlockActive, toggleBlock, toggleMark } from './common';
import { isAnyMarkActive, isBlockActive, removeAllMark, toggleBlock, toggleMark } from './common';
import { BlockType, MarkType } from './Elements';
export const INLINE_HOTKEYS: Record<string, MarkType> = {
@ -22,19 +22,42 @@ export const BLOCK_HOTKEYS: Record<string, BlockType> = {
};
const BLOCK_KEYS = Object.keys(BLOCK_HOTKEYS);
export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Element>) => {
BLOCK_KEYS.forEach((hotkey) => {
/**
* @return boolean true if shortcut is toggled.
*/
export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Element>): boolean => {
if (isHotkey('escape', event)) {
if (isAnyMarkActive(editor)) {
removeAllMark(editor);
return true;
}
console.log(isBlockActive(editor, BlockType.Paragraph));
if (!isBlockActive(editor, BlockType.Paragraph)) {
toggleBlock(editor, BlockType.Paragraph);
return true;
}
return false;
}
const blockToggled = BLOCK_KEYS.find((hotkey) => {
if (isHotkey(hotkey, event)) {
event.preventDefault();
toggleBlock(editor, BLOCK_HOTKEYS[hotkey]);
return true;
}
return false;
});
if (blockToggled) return true;
if (!isBlockActive(editor, BlockType.CodeBlock))
INLINE_KEYS.forEach((hotkey) => {
if (isHotkey(hotkey, event)) {
event.preventDefault();
toggleMark(editor, INLINE_HOTKEYS[hotkey]);
}
});
const inlineToggled = isBlockActive(editor, BlockType.CodeBlock)
? false
: INLINE_KEYS.find((hotkey) => {
if (isHotkey(hotkey, event)) {
event.preventDefault();
toggleMark(editor, INLINE_HOTKEYS[hotkey]);
return true;
}
return false;
});
return !!inlineToggled;
};