Fixes #855 Update Slate plugins to drop data arg

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",

src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/keys.js

@@ -1,46 +1,17 @@
 import { Block, Text } from 'slate';
+import isHotkey from 'is-hotkey';
 
 export default onKeyDown;
 
-/**
- * Minimal re-implementation of Slate's undo/redo functionality, but with focus
- * forced back into editor afterward.
- */
-function changeHistory(change, type) {
-
-  /**
-   * Get the history for undo or redo (determined via `type` param).
-   */
-  const { history } = change.value;
-  if (!history) return;
-  const historyOfType = history[`${type}s`];
-
-  /**
-   * If there is a next history item to apply, and it's valid, apply it.
-   */
-  const next = historyOfType.first();
-  const historyOfTypeIsValid = historyOfType.size > 1
-    || next.length > 1
-    || next[0].type !== 'set_selection';
-
-  if (next && historyOfTypeIsValid) {
-    change[type]();
-  }
-
-  /**
-   * Always ensure focus is set.
-   */
-  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 (isHotkey('Enter', event)) {
     /**
      * 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 +24,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,36 +38,17 @@ function onKeyDown(e, data, change) {
       .collapseToStartOf(newBlock);
   }
 
-  if (data.isMod) {
-
-    /**
-     * 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();
-      return changeHistory(change, 'redo');
-    }
-
-    if (data.key === 'z') {
-      e.preventDefault();
-      return changeHistory(change, data.isShift ? 'redo' : 'undo');
-    }
-
-    const marks = {
-      b: 'bold',
-      i: 'italic',
-      u: 'underlined',
-      s: 'strikethrough',
-      '`': 'code',
-    };
+  const marks = [
+    [ 'b', 'bold' ],
+    [ 'i', 'italic' ],
+    [ 's', 'strikethrough' ],
+    [ '`', 'code' ],
+  ];
 
-    const mark = marks[data.key];
+  const [ markKey, markName ] = marks.find(([ key ]) => isHotkey(`mod+${key}`, event)) || [];
 
-    if (mark) {
-      e.preventDefault();
-      return change.toggleMark(mark);
-    }
+  if (markName) {
+    event.preventDefault();
+    return change.toggleMark(markName);
   }
 };

src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/plugins.js

@@ -1,12 +1,13 @@
 import { Text, Inline } from 'slate';
+import isHotkey from 'is-hotkey';
 import SlateSoftBreak from 'slate-soft-break';
 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 (options.shift && !isHotkey('shift+enter', event)) return;
+    if (!options.shift && !isHotkey('enter', event)) return;
 
     const { onlyIn, ignoreIn, defaultBlock = 'paragraph' } = options;
     const { type, text } = change.value.startBlock;
@@ -38,9 +39,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 (!isHotkey('enter', event) || value.isExpanded) return;
     if (onlyIn.includes(value.startBlock.type)) {
       return change.insertBlock(defaultBlock);
     }