From 9e5f42e772b40885c8aa7828b204dea4028ec37f Mon Sep 17 00:00:00 2001 From: Damien Duhamel Date: Thu, 30 Nov 2017 23:26:18 +0100 Subject: [PATCH] Update slate plugin to drop data --- package.json | 1 + .../MarkdownControl/VisualEditor/keys.js | 31 ++++++++++--------- .../MarkdownControl/VisualEditor/plugins.js | 10 +++--- 3 files changed, 22 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index caf7d843..874c2e9b 100644 --- a/package.json +++ b/package.json @@ -129,6 +129,7 @@ "gray-matter": "^3.0.6", "history": "^4.7.2", "immutable": "^3.7.6", + "is-hotkey": "^0.1.1", "js-base64": "^2.1.9", "js-yaml": "^3.10.0", "jwt-decode": "^2.1.0", diff --git a/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/keys.js b/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/keys.js index fa2183fa..9e40cd35 100644 --- a/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/keys.js +++ b/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/keys.js @@ -1,4 +1,5 @@ import { Block, Text } from 'slate'; +import { isHotkey } from 'is-hotkey'; export default onKeyDown; @@ -20,10 +21,9 @@ function changeHistory(change, type) { */ const next = historyOfType.first(); const historyOfTypeIsValid = historyOfType.size > 1 - || next.length > 1 - || next[0].type !== 'set_selection'; + || ( next && next.length > 1 && next[0].type !== 'set_selection' ); - if (next && historyOfTypeIsValid) { + if (historyOfTypeIsValid) { change[type](); } @@ -33,14 +33,15 @@ function changeHistory(change, type) { return change.focus(); } -function onKeyDown(e, data, change) { +function onKeyDown(event, change) { const createDefaultBlock = () => { return Block.create({ type: 'paragraph', nodes: [Text.create('')], }); }; - if (data.key === 'enter') { + + if (event.key === 'Enter') { /** * If "Enter" is pressed while a single void block is selected, a new * paragraph should be added above or below it, and the current selection @@ -53,7 +54,7 @@ function onKeyDown(e, data, change) { const singleBlockSelected = anchorBlock === focusBlock; if (!singleBlockSelected || !focusBlock.isVoid) return; - e.preventDefault(); + event.preventDefault(); const focusBlockParent = doc.getParent(focusBlock.key); const focusBlockIndex = focusBlockParent.nodes.indexOf(focusBlock); @@ -67,35 +68,35 @@ function onKeyDown(e, data, change) { .collapseToStartOf(newBlock); } - if (data.isMod) { + if (isHotkey(`mod+${event.key}`, event)) { /** * Undo and redo work automatically with Slate, but focus is lost in certain * actions. We override Slate's built in undo/redo here and force focus * back to the editor each time. */ - if (data.key === 'y') { - e.preventDefault(); + if (event.key === 'y') { + event.preventDefault(); return changeHistory(change, 'redo'); } - if (data.key === 'z') { - e.preventDefault(); - return changeHistory(change, data.isShift ? 'redo' : 'undo'); + if (event.key === 'z') { + event.preventDefault(); + return changeHistory(change, event.isShift ? 'redo' : 'undo'); } const marks = { b: 'bold', i: 'italic', - u: 'underlined', + u: 'underline', s: 'strikethrough', '`': 'code', }; - const mark = marks[data.key]; + const mark = marks[event.key]; if (mark) { - e.preventDefault(); + event.preventDefault(); return change.toggleMark(mark); } } diff --git a/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/plugins.js b/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/plugins.js index 34820045..e3ba5d20 100644 --- a/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/plugins.js +++ b/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/plugins.js @@ -4,9 +4,9 @@ import EditList from 'slate-edit-list'; import EditTable from 'slate-edit-table'; const SoftBreak = (options = {}) => ({ - onKeyDown(e, data, change) { - if (data.key != 'enter') return; - if (options.shift && e.shiftKey == false) return; + onKeyDown(event, change) { + if (event.key != 'Enter') return; + if (options.shift && event.shiftKey == false) return; const { onlyIn, ignoreIn, defaultBlock = 'paragraph' } = options; const { type, text } = change.value.startBlock; @@ -38,9 +38,9 @@ export const SoftBreakConfigured = SoftBreak(SoftBreakOpts); export const ParagraphSoftBreakConfigured = SoftBreak({ onlyIn: ['paragraph'], shift: true }); const BreakToDefaultBlock = ({ onlyIn = [], defaultBlock = 'paragraph' }) => ({ - onKeyDown(e, data, change) { + onKeyDown(event, change) { const { value } = change; - if (data.key != 'enter' || e.shiftKey == true || value.isExpanded) return; + if (event.key != 'Enter' || event.shiftKey == true || value.isExpanded) return; if (onlyIn.includes(value.startBlock.type)) { return change.insertBlock(defaultBlock); }