fix(markdown widget): adds keyboard shortcuts (#3005) (#3582)

This commit is contained in:
Kevin Young
2020-04-15 03:49:38 -05:00
committed by GitHub
parent bb0a7e96d8
commit 99071c14e4
5 changed files with 165 additions and 4 deletions

View File

@ -0,0 +1,29 @@
import isHotkey from 'is-hotkey';
export const HOT_KEY_MAP = {
bold: 'mod+b',
code: 'mod+shift+c',
italic: 'mod+i',
strikethrough: 'mod+shift+s',
'heading-one': 'mod+1',
'heading-two': 'mod+2',
'heading-three': 'mod+3',
'heading-four': 'mod+4',
'heading-five': 'mod+5',
'heading-six': 'mod+6',
link: 'mod+k',
};
const Hotkey = (key, fn) => {
return {
onKeyDown(event, editor, next) {
if (!isHotkey(key, event)) {
return next();
}
event.preventDefault();
editor.command(fn);
},
};
};
export default Hotkey;

View File

@ -12,6 +12,7 @@ import Link from './Link';
import ForceInsert from './ForceInsert';
import Shortcode from './Shortcode';
import { SLATE_DEFAULT_BLOCK_TYPE as defaultType } from '../../types';
import Hotkey, { HOT_KEY_MAP } from './Hotkey';
const plugins = ({ getAsset, resolveWidget }) => [
{
@ -22,6 +23,17 @@ const plugins = ({ getAsset, resolveWidget }) => [
next();
},
},
Hotkey(HOT_KEY_MAP['bold'], e => e.toggleMark('bold')),
Hotkey(HOT_KEY_MAP['code'], e => e.toggleMark('code')),
Hotkey(HOT_KEY_MAP['italic'], e => e.toggleMark('italic')),
Hotkey(HOT_KEY_MAP['strikethrough'], e => e.toggleMark('strikethrough')),
Hotkey(HOT_KEY_MAP['heading-one'], e => e.toggleBlock('heading-one')),
Hotkey(HOT_KEY_MAP['heading-two'], e => e.toggleBlock('heading-two')),
Hotkey(HOT_KEY_MAP['heading-three'], e => e.toggleBlock('heading-three')),
Hotkey(HOT_KEY_MAP['heading-four'], e => e.toggleBlock('heading-four')),
Hotkey(HOT_KEY_MAP['heading-five'], e => e.toggleBlock('heading-five')),
Hotkey(HOT_KEY_MAP['heading-six'], e => e.toggleBlock('heading-six')),
Hotkey(HOT_KEY_MAP['link'], e => e.toggleLink(() => window.prompt('Enter the URL of the link'))),
CommandsAndQueries({ defaultType }),
QuoteBlock({ defaultType, type: 'quote' }),
ListPlugin({ defaultType, unorderedListType: 'bulleted-list', orderedListType: 'numbered-list' }),