mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-13 17:10:06 +00:00
add escape to turn off active editor toolbar item
This commit is contained in:
parent
cc65885da5
commit
c2a35df5f7
src/app/components/editor
|
@ -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]
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue