@convertkit/editor-html - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

es/index.js

@@ -1038,2 +1038,314 @@ import React, { Component } from 'react';
 
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+
+function unwrapExports$1(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule$1(fn, module) {
+  return module = {
+    exports: {}
+  }, fn(module, module.exports), module.exports;
+}
+
+var lib = createCommonjsModule$1(function (module, exports) {
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  /**
+   * Constants.
+   */
+
+  var IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
+  var MODIFIERS = {
+    alt: 'altKey',
+    control: 'ctrlKey',
+    meta: 'metaKey',
+    shift: 'shiftKey'
+  };
+  var ALIASES = {
+    add: '+',
+    break: 'pause',
+    cmd: 'meta',
+    command: 'meta',
+    ctl: 'control',
+    ctrl: 'control',
+    del: 'delete',
+    down: 'arrowdown',
+    esc: 'escape',
+    ins: 'insert',
+    left: 'arrowleft',
+    mod: IS_MAC ? 'meta' : 'control',
+    opt: 'alt',
+    option: 'alt',
+    return: 'enter',
+    right: 'arrowright',
+    space: ' ',
+    spacebar: ' ',
+    up: 'arrowup',
+    win: 'meta',
+    windows: 'meta'
+  };
+  var CODES = {
+    backspace: 8,
+    tab: 9,
+    enter: 13,
+    shift: 16,
+    control: 17,
+    alt: 18,
+    pause: 19,
+    capslock: 20,
+    escape: 27,
+    ' ': 32,
+    pageup: 33,
+    pagedown: 34,
+    end: 35,
+    home: 36,
+    arrowleft: 37,
+    arrowup: 38,
+    arrowright: 39,
+    arrowdown: 40,
+    insert: 45,
+    delete: 46,
+    meta: 91,
+    numlock: 144,
+    scrolllock: 145,
+    ';': 186,
+    '=': 187,
+    ',': 188,
+    '-': 189,
+    '.': 190,
+    '/': 191,
+    '`': 192,
+    '[': 219,
+    '\\': 220,
+    ']': 221,
+    '\'': 222
+  };
+
+  for (var f = 1; f < 20; f++) {
+    CODES['f' + f] = 111 + f;
+  }
+  /**
+   * Is hotkey?
+   */
+
+
+  function isHotkey(hotkey, options, event) {
+    if (options && !('byKey' in options)) {
+      event = options;
+      options = null;
+    }
+
+    if (!Array.isArray(hotkey)) {
+      hotkey = [hotkey];
+    }
+
+    var array = hotkey.map(function (string) {
+      return parseHotkey(string, options);
+    });
+
+    var check = function check(e) {
+      return array.some(function (object) {
+        return compareHotkey(object, e);
+      });
+    };
+
+    var ret = event == null ? check : check(event);
+    return ret;
+  }
+
+  function isCodeHotkey(hotkey, event) {
+    return isHotkey(hotkey, event);
+  }
+
+  function isKeyHotkey(hotkey, event) {
+    return isHotkey(hotkey, {
+      byKey: true
+    }, event);
+  }
+  /**
+   * Parse.
+   */
+
+
+  function parseHotkey(hotkey, options) {
+    var byKey = options && options.byKey;
+    var ret = {}; // Special case to handle the `+` key since we use it as a separator.
+
+    hotkey = hotkey.replace('++', '+add');
+    var values = hotkey.split('+');
+    var length = values.length; // Ensure that all the modifiers are set to false unless the hotkey has them.
+
+    for (var k in MODIFIERS) {
+      ret[MODIFIERS[k]] = false;
+    }
+
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
+
+    try {
+      for (var _iterator = values[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var value = _step.value;
+        var optional = value.endsWith('?');
+
+        if (optional) {
+          value = value.slice(0, -1);
+        }
+
+        var name = toKeyName(value);
+        var modifier = MODIFIERS[name];
+
+        if (length === 1 || !modifier) {
+          if (byKey) {
+            ret.key = name;
+          } else {
+            ret.which = toKeyCode(value);
+          }
+        }
+
+        if (modifier) {
+          ret[modifier] = optional ? null : true;
+        }
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+
+    return ret;
+  }
+  /**
+   * Compare.
+   */
+
+
+  function compareHotkey(object, event) {
+    for (var key in object) {
+      var expected = object[key];
+      var actual = void 0;
+
+      if (expected == null) {
+        continue;
+      }
+
+      if (key === 'key') {
+        actual = event.key.toLowerCase();
+      } else if (key === 'which') {
+        actual = expected === 91 && event.which === 93 ? 91 : event.which;
+      } else {
+        actual = event[key];
+      }
+
+      if (actual == null && expected === false) {
+        continue;
+      }
+
+      if (actual !== expected) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+  /**
+   * Utils.
+   */
+
+
+  function toKeyCode(name) {
+    name = toKeyName(name);
+    var code = CODES[name] || name.toUpperCase().charCodeAt(0);
+    return code;
+  }
+
+  function toKeyName(name) {
+    name = name.toLowerCase();
+    name = ALIASES[name] || name;
+    return name;
+  }
+  /**
+   * Export.
+   */
+
+
+  exports.default = isHotkey;
+  exports.isHotkey = isHotkey;
+  exports.isCodeHotkey = isCodeHotkey;
+  exports.isKeyHotkey = isKeyHotkey;
+  exports.parseHotkey = parseHotkey;
+  exports.compareHotkey = compareHotkey;
+  exports.toKeyCode = toKeyCode;
+  exports.toKeyName = toKeyName;
+});
+var isHotkey = unwrapExports$1(lib);
+var lib_1 = lib.isHotkey;
+var lib_2 = lib.isCodeHotkey;
+var lib_3 = lib.isKeyHotkey;
+var lib_4 = lib.parseHotkey;
+var lib_5 = lib.compareHotkey;
+var lib_6 = lib.toKeyCode;
+var lib_7 = lib.toKeyName;
+
+var KeyMap = function KeyMap(shortcuts, options) {
+  var config = _extends$1({
+    if: function _if() {
+      return true;
+    }
+  }, options);
+
+  var functions = Object.keys(shortcuts).map(function (key) {
+    var isKeyPressed = isHotkey(key);
+
+    var check = function check(event, editor) {
+      return isKeyPressed(event) && config.if(editor);
+    };
+
+    return {
+      check: check,
+      handler: shortcuts[key]
+    };
+  });
+  return {
+    onKeyDown: function onKeyDown(event, editor, next) {
+      var shortcut = functions.find(function (shortcut) {
+        return shortcut.check(event, editor);
+      });
+
+      if (shortcut) {
+        return shortcut.handler(event, editor, next);
+      } else {
+        return next();
+      }
+    }
+  };
+};
+
 var HTMLNode =
@@ -1114,8 +1426,12 @@ /*#__PURE__*/
 
-var isCodeLine = function isCodeLine(value) {
-  return value.startBlock.type == "code-line";
+var isCodeLine = function isCodeLine(editor) {
+  return editor.value.startBlock.type == "code-line";
 };
 
+var onEnter = function onEnter(event, editor, next) {
+  event.preventDefault();
+  editor.splitBlock().setBlocks("code-line");
+};
+
 var onTab = function onTab(event, editor, next) {
-  if (!isCodeLine(editor.value)) return;
   event.preventDefault();
@@ -1125,2 +1441,10 @@ editor.insertText("  ");
 
+var onSelectAll = function onSelectAll(event, editor, next) {
+  event.preventDefault();
+  var startBlock = editor.value.startBlock;
+  var document = editor.value.document;
+  var parent = document.getParent(startBlock.key);
+  editor.moveToRangeOfNode(parent);
+};
+
 var schema = {
@@ -1173,11 +1497,2 @@ blocks: {
     },
-    onKeyDown: function onKeyDown(event, editor, next) {
-      switch (event.key) {
-        case "Tab":
-          return onTab(event, editor, next);
-
-        default:
-          return next();
-      }
-    },
     renderNode: function renderNode(props, editor, next) {
@@ -1207,5 +1522,11 @@ var node = props.node;
     schema: schema
-  }, SyntaxHighlight()];
+  }, SyntaxHighlight(), KeyMap({
+    "mod+a": onSelectAll,
+    tab: onTab,
+    enter: onEnter
+  }, {
+    if: isCodeLine
+  })];
 });
 
 export default index;

package.json

 {
   "name": "@convertkit/editor-html",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A plugin for handling HTML in the ConvertKit Editor",
@@ -29,5 +29,7 @@ "main": "index.js",
   "dependencies": {
+    "@convertkit/slate-keymap": "^0.0.2",
+    "is-hotkey": "^0.1.4",
     "prismjs": "^1.15.0"
   },
-  "gitHead": "b360917ef46d3dfa959b70688172354c4ce6f510"
+  "gitHead": "04a1235d5f31fe0cff335dc8c25907e65b80af27"
 }

src/index.js

 import React, { Component } from "react";
 import SyntaxHighlight from "./plugins/syntax-highlight";
+import KeyMap from "@convertkit/slate-keymap";
+import HTMLNode from "./html-node";
 import "./index.css";
 
-class HTMLNode extends Component {
-  constructor(props) {
-    super(props);
+const isCodeLine = editor => editor.value.startBlock.type == "code-line";
 
-    this.state = {
-      editing: false
-    };
-  }
+const onEnter = (event, editor, next) => {
+  event.preventDefault();
+  editor.splitBlock().setBlocks("code-line");
+};
 
-  handleClick = event => {
-    const changing = !this.state.editing;
-    this.setState({ editing: true });
-    if (changing) this.props.editor.moveToStartOfNode(this.props.node);
-  };
-
-  handleClickOutside = () => {
-    this.setState({ editing: false });
-  };
-
-  toggle = () => {
-    this.setState(prevState => ({
-      editing: !prevState.editing
-    }));
-  };
-
-  render() {
-    const { node, attributes, children } = this.props;
-    let className = "editor-html";
-    if (this.state.editing) className += " editing";
-
-    const texts = node.getTexts().toArray();
-    const html = texts.map(t => t.text.trim()).join("");
-
-    return (
-      <div
-        contentEditable={this.state.editing}
-        suppressContentEditableWarning={true}
-        className={className}
-        {...attributes}
-      >
-        <div
-          className="editor-html-rendered"
-          dangerouslySetInnerHTML={{ __html: html }}
-        />
-        <div className="editor-html-source">{children}</div>
-        <button
-          contentEditable={false}
-          className="editor-html-toggle"
-          onClick={this.toggle}
-          type="button"
-        >
-          {this.state.editing ? "PREVIEW" : "EDIT"}
-        </button>
-      </div>
-    );
-  }
-}
-
-const isCodeLine = value => value.startBlock.type == "code-line";
-
 const onTab = (event, editor, next) => {
-  if (!isCodeLine(editor.value)) return;
   event.preventDefault();
@@ -71,2 +19,11 @@ editor.insertText("  ");
 
+const onSelectAll = (event, editor, next) => {
+  event.preventDefault();
+  const startBlock = editor.value.startBlock;
+  const document = editor.value.document;
+  const parent = document.getParent(startBlock.key);
+
+  editor.moveToRangeOfNode(parent);
+};
+
 const schema = {
@@ -120,10 +77,2 @@ blocks: {
     },
-    onKeyDown(event, editor, next) {
-      switch (event.key) {
-        case "Tab":
-          return onTab(event, editor, next);
-        default:
-          return next();
-      }
-    },
     renderNode(props, editor, next) {
@@ -146,3 +95,11 @@ const { node } = props;
   },
-  SyntaxHighlight()
+  SyntaxHighlight(),
+  KeyMap(
+    {
+      "mod+a": onSelectAll,
+      tab: onTab,
+      enter: onEnter
+    },
+    { if: isCodeLine }
+  )
 ];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52950

increased by16.34%

Number of package files

7

increased by16.67%

Lines of code

1754

increased by19.89%

Worsened metrics

Dependency count

8

increased by33.33%

Dependency changes

• + Added@convertkit/slate-keymap@^0.0.2

• + Addedis-hotkey@^0.1.4

• + Added@convertkit/slate-keymap@0.0.2(transitive)

• + Addedis-hotkey@0.1.8(transitive)