@seafile/sdoc-editor 0.3.6 → 0.3.7

package/dist/basic-sdk/extension/plugins/font/menu/font-size/index.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useRef, useCallback } from 'react';
 import { UncontrolledPopover } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
@@ -7,36 +6,36 @@ import { isMenuDisabled, getFontSize, setFontSize } from '../../helpers';
 import { FONT_SIZE } from '../../../../constants';
 import Tooltip from '../../../../../../components/tooltip';
 import './index.css';
-var FontSize = function FontSize(_ref) {
-  var isRichEditor = _ref.isRichEditor,
-    className = _ref.className,
-    editor = _ref.editor,
-    readonly = _ref.readonly;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isShowMenu = _useState2[0],
-    setMenuShow = _useState2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var popoverRef = useRef(null);
-  var disabled = isMenuDisabled(editor, readonly);
-  var fontSizeButtonId = 'sdoc-button-font-size';
-  var selectedFontSize = getFontSize(editor);
-  var fontSizeRef = useRef(null);
-  var toggle = useCallback(function (event) {
+const FontSize = _ref => {
+  let {
+    isRichEditor,
+    className,
+    editor,
+    readonly
+  } = _ref;
+  const [isShowMenu, setMenuShow] = useState(false);
+  const {
+    t
+  } = useTranslation();
+  const popoverRef = useRef(null);
+  const disabled = isMenuDisabled(editor, readonly);
+  const fontSizeButtonId = 'sdoc-button-font-size';
+  let selectedFontSize = getFontSize(editor);
+  const fontSizeRef = useRef(null);
+  const toggle = useCallback(event => {
     popoverRef.current.toggle();
     setMenuShow(!isShowMenu);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowMenu]);
-  var updateFontSize = useCallback(function (item) {
-    var fontSize = item.value;
+  const updateFontSize = useCallback(item => {
+    const fontSize = item.value;
     toggle();
     setFontSize(editor, fontSize);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, selectedFontSize, isShowMenu]);
-  var validClassName = classnames(className, 'sdoc-menu-with-dropdown sdoc-font-size-menu', {
+  const validClassName = classnames(className, 'sdoc-menu-with-dropdown sdoc-font-size-menu', {
     'menu-show': isShowMenu,
     'disabled': disabled,
     'rich-icon-btn d-flex': isRichEditor,
@@ -44,11 +43,12 @@ var FontSize = function FontSize(_ref) {
     'rich-icon-btn-hover': isRichEditor && !disabled,
     'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
   });
-  var caretIconClass = "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down');
-  var _ref2 = fontSizeRef.current ? fontSizeRef.current.getBoundingClientRect() : {
-      bottom: 92.5
-    },
-    bottom = _ref2.bottom;
+  const caretIconClass = "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down');
+  const {
+    bottom
+  } = fontSizeRef.current ? fontSizeRef.current.getBoundingClientRect() : {
+    bottom: 92.5
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: validClassName,
@@ -79,16 +79,14 @@ var FontSize = function FontSize(_ref) {
     style: {
       maxHeight: window.innerHeight - bottom - 100
     }
-  }, FONT_SIZE.map(function (item, index) {
-    var isSelected = selectedFontSize + '' === item.name;
+  }, FONT_SIZE.map((item, index) => {
+    const isSelected = selectedFontSize + '' === item.name;
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: classnames('sdoc-dropdown-menu-item', {
         'position-relative': isSelected
       }),
-      onClick: function onClick() {
-        return updateFontSize(item);
-      }
+      onClick: () => updateFontSize(item)
     }, isSelected && /*#__PURE__*/React.createElement("i", {
       className: "sdocfont sdoc-check-mark"
     }), item.name);

package/dist/basic-sdk/extension/plugins/font/menu/index.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import FontFamily from './font-family';
 import FontSize from './font-size';
-var Font = function Font(_ref) {
-  var editor = _ref.editor,
-    readonly = _ref.readonly;
+const Font = _ref => {
+  let {
+    editor,
+    readonly
+  } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontFamily, {
     editor: editor,
     readonly: readonly

package/dist/basic-sdk/extension/plugins/font/plugin.js

@@ -1,10 +1,10 @@
 import { scaleFontSize } from './helpers';
-var withFont = function withFont(editor) {
-  var newEditor = editor;
-  newEditor.increaseFontSize = function () {
+const withFont = editor => {
+  const newEditor = editor;
+  newEditor.increaseFontSize = () => {
     scaleFontSize(newEditor, 'increase');
   };
-  newEditor.reduceFontSize = function () {
+  newEditor.reduceFontSize = () => {
     scaleFontSize(newEditor, 'reduce');
   };
   return newEditor;

package/dist/basic-sdk/extension/plugins/header/helpers.js

@@ -1,52 +1,46 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor, Transforms } from '@seafile/slate';
 import { getNodeType } from '../../core';
 import { ELEMENT_TYPE, HEADER, PARAGRAPH, SUBTITLE, TITLE } from '../../constants';
-export var isMenuDisabled = function isMenuDisabled(editor) {
-  var readonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+export const isMenuDisabled = function (editor) {
+  let readonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (readonly) return true;
   if (!editor.selection) return true;
-  var _Editor$nodes = Editor.nodes(editor, {
-      match: function match(n) {
-        var type = getNodeType(n);
-        if (!type) return false;
-        if (type === ELEMENT_TYPE.CODE_LINE) return true;
-        if (type === ELEMENT_TYPE.CODE_BLOCK) return true;
-        if (type === ELEMENT_TYPE.PARAGRAPH) return true;
-        if (type.startsWith(HEADER)) return true;
-        if (type === TITLE) return true;
-        if (type === SUBTITLE) return true;
-        return false;
-      },
-      universal: true,
-      mode: 'highest'
-    }),
-    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
-    match = _Editor$nodes2[0];
+  const [match] = Editor.nodes(editor, {
+    match: n => {
+      let type = getNodeType(n);
+      if (!type) return false;
+      if (type === ELEMENT_TYPE.CODE_LINE) return true;
+      if (type === ELEMENT_TYPE.CODE_BLOCK) return true;
+      if (type === ELEMENT_TYPE.PARAGRAPH) return true;
+      if (type.startsWith(HEADER)) return true;
+      if (type === TITLE) return true;
+      if (type === SUBTITLE) return true;
+      return false;
+    },
+    universal: true,
+    mode: 'highest'
+  });
   return !match;
 };
-export var getHeaderType = function getHeaderType(editor) {
-  var _Editor$nodes3 = Editor.nodes(editor, {
-      match: function match(n) {
-        var nodeType = getNodeType(n);
-        if (!nodeType) return false;
-        if (nodeType.includes(HEADER)) return true;
-        if (nodeType === TITLE) return true;
-        if (nodeType === SUBTITLE) return true;
-        return false;
-      },
-      universal: true
-    }),
-    _Editor$nodes4 = _slicedToArray(_Editor$nodes3, 1),
-    match = _Editor$nodes4[0];
+export const getHeaderType = editor => {
+  const [match] = Editor.nodes(editor, {
+    match: n => {
+      const nodeType = getNodeType(n);
+      if (!nodeType) return false;
+      if (nodeType.includes(HEADER)) return true;
+      if (nodeType === TITLE) return true;
+      if (nodeType === SUBTITLE) return true;
+      return false;
+    },
+    universal: true
+  });
   if (!match) return PARAGRAPH;
-  var _match = _slicedToArray(match, 1),
-    n = _match[0];
+  const [n] = match;
   return getNodeType(n);
 };
-export var setHeaderType = function setHeaderType(editor, type) {
+export const setHeaderType = (editor, type) => {
   if (!type) return;
   Transforms.setNodes(editor, {
-    type: type
+    type
   });
 };

package/dist/basic-sdk/extension/plugins/header/index.js

@@ -1,7 +1,7 @@
 import { HEADER } from '../../constants';
 import withHeader from './plugin';
 import { renderTitle, renderHeader, renderSubtitle } from './render-elem';
-var HeaderPlugin = {
+const HeaderPlugin = {
   type: HEADER,
   nodeType: 'element',
   editorPlugin: withHeader,

package/dist/basic-sdk/extension/plugins/header/menu/index.js

@@ -1,8 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
@@ -11,141 +6,140 @@ import { HEADERS, HEADER_TITLE_MAP, MAC_HOTKEYS, PARAGRAPH, SDOC_FONT_SIZE, SUBT
 import Tooltip from '../../../../../components/tooltip';
 import { focusEditor } from '../../../core';
 import './style.css';
-var HeaderMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(HeaderMenu, _React$Component);
-  var _super = _createSuper(HeaderMenu);
-  function HeaderMenu(props) {
-    var _this;
-    _classCallCheck(this, HeaderMenu);
-    _this = _super.call(this, props);
-    _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideHeaderMenu, true);
+class HeaderMenu extends React.Component {
+  constructor(props) {
+    super(props);
+    this.registerEventHandler = () => {
+      document.addEventListener('click', this.onHideHeaderMenu, true);
     };
-    _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideHeaderMenu, true);
+    this.unregisterEventHandler = () => {
+      document.removeEventListener('click', this.onHideHeaderMenu, true);
     };
-    _this.onHideHeaderMenu = function (e) {
-      var menu = _this.menu;
-      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
+    this.onHideHeaderMenu = e => {
+      const menu = this.menu;
+      const clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
       if (clickIsInMenu) return;
-      _this.setState({
+      this.setState({
         isShowHeaderPopover: false
-      }, function () {
-        _this.unregisterEventHandler();
+      }, () => {
+        this.unregisterEventHandler();
       });
     };
-    _this.getValue = function () {
-      var editor = _this.props.editor;
+    this.getValue = () => {
+      const {
+        editor
+      } = this.props;
       return getHeaderType(editor);
     };
-    _this.isActive = function (type) {
-      return _this.getValue() === type;
+    this.isActive = type => {
+      return this.getValue() === type;
     };
-    _this.isDisabled = function () {
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
+    this.isDisabled = () => {
+      const {
+        editor,
+        readonly
+      } = this.props;
       return isMenuDisabled(editor, readonly);
     };
-    _this.onToggleClick = function (event) {
+    this.onToggleClick = event => {
       event.stopPropagation();
       event.nativeEvent.stopImmediatePropagation();
-      var isShowHeaderPopover = !_this.state.isShowHeaderPopover;
+      const isShowHeaderPopover = !this.state.isShowHeaderPopover;
       if (isShowHeaderPopover) {
-        _this.setState({
-          isShowHeaderPopover: isShowHeaderPopover
-        }, function () {
-          _this.registerEventHandler();
+        this.setState({
+          isShowHeaderPopover
+        }, () => {
+          this.registerEventHandler();
         });
       } else {
-        _this.setState({
-          isShowHeaderPopover: isShowHeaderPopover
-        }, function () {
-          _this.unregisterEventHandler();
+        this.setState({
+          isShowHeaderPopover
+        }, () => {
+          this.unregisterEventHandler();
         });
       }
     };
-    _this.onMouseDown = function (type) {
-      return function () {
-        var editor = _this.props.editor;
-        var active = _this.isActive(type);
-        var newType = active ? PARAGRAPH : type;
+    this.onMouseDown = type => {
+      return () => {
+        const {
+          editor
+        } = this.props;
+        const active = this.isActive(type);
+        const newType = active ? PARAGRAPH : type;
         setHeaderType(editor, newType);
         focusEditor(editor, editor.selection);
-        _this.setState({
+        this.setState({
           isShowHeaderPopover: false
-        }, function () {
-          _this.unregisterEventHandler();
+        }, () => {
+          this.unregisterEventHandler();
         });
       };
     };
-    _this.setMenuRef = function (ref) {
-      _this.menu = ref;
+    this.setMenuRef = ref => {
+      this.menu = ref;
     };
-    _this.getToolTip = function (type) {
+    this.getToolTip = type => {
       // chrome in Mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36"
-      var isMac = window.navigator.userAgent.indexOf('Macintosh') !== -1;
+      const isMac = window.navigator.userAgent.indexOf('Macintosh') !== -1;
       return isMac ? MAC_HOTKEYS[type] : WIN_HOTKEYS[type];
     };
-    _this.state = {
+    this.state = {
       isShowHeaderPopover: false
     };
-    return _this;
   }
-  _createClass(HeaderMenu, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var t = this.props.t;
-      var isShowHeaderPopover = this.state.isShowHeaderPopover;
-      var headerIconClass = "sdocfont sdoc-".concat(isShowHeaderPopover ? 'caret-up' : 'drop-down');
-      var currentType = this.getValue();
-      var disabled = this.isDisabled();
-      var itemList = [PARAGRAPH, 'divider', TITLE, SUBTITLE, 'divider'].concat(_toConsumableArray(HEADERS));
-      return /*#__PURE__*/React.createElement("div", {
-        className: "header-menu"
+  render() {
+    const {
+      t
+    } = this.props;
+    const {
+      isShowHeaderPopover
+    } = this.state;
+    const headerIconClass = "sdocfont sdoc-".concat(isShowHeaderPopover ? 'caret-up' : 'drop-down');
+    const currentType = this.getValue();
+    const disabled = this.isDisabled();
+    const itemList = [PARAGRAPH, 'divider', TITLE, SUBTITLE, 'divider', ...HEADERS];
+    return /*#__PURE__*/React.createElement("div", {
+      className: "header-menu"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames('header-toggle', {
+        'header-toggle-disabled': disabled
+      }),
+      onClick: disabled ? () => {} : this.onToggleClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "active"
+    }, t(HEADER_TITLE_MAP[currentType])), !disabled && /*#__PURE__*/React.createElement("span", {
+      className: headerIconClass
+    })), isShowHeaderPopover && /*#__PURE__*/React.createElement("div", {
+      ref: this.setMenuRef,
+      className: "header-popover sdoc-dropdown-menu"
+    }, itemList.map((item, index) => {
+      if (item === 'divider') {
+        return /*#__PURE__*/React.createElement("div", {
+          key: index,
+          className: "sdoc-dropdown-menu-divider"
+        });
+      }
+      const id = "".concat(item, "-").concat(index);
+      const isSelected = currentType === item;
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: index
       }, /*#__PURE__*/React.createElement("div", {
-        className: classnames('header-toggle', {
-          'header-toggle-disabled': disabled
+        id: id,
+        className: classnames('sdoc-dropdown-menu-item', {
+          'position-relative': isSelected
         }),
-        onClick: disabled ? function () {} : this.onToggleClick
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "active"
-      }, t(HEADER_TITLE_MAP[currentType])), !disabled && /*#__PURE__*/React.createElement("span", {
-        className: headerIconClass
-      })), isShowHeaderPopover && /*#__PURE__*/React.createElement("div", {
-        ref: this.setMenuRef,
-        className: "header-popover sdoc-dropdown-menu"
-      }, itemList.map(function (item, index) {
-        if (item === 'divider') {
-          return /*#__PURE__*/React.createElement("div", {
-            key: index,
-            className: "sdoc-dropdown-menu-divider"
-          });
+        onClick: this.onMouseDown(item)
+      }, isSelected && /*#__PURE__*/React.createElement("i", {
+        className: "sdocfont sdoc-check-mark"
+      }), /*#__PURE__*/React.createElement("span", {
+        style: {
+          fontSize: "".concat(SDOC_FONT_SIZE[item], "pt")
         }
-        var id = "".concat(item, "-").concat(index);
-        var isSelected = currentType === item;
-        return /*#__PURE__*/React.createElement(Fragment, {
-          key: index
-        }, /*#__PURE__*/React.createElement("div", {
-          id: id,
-          className: classnames('sdoc-dropdown-menu-item', {
-            'position-relative': isSelected
-          }),
-          onClick: _this2.onMouseDown(item)
-        }, isSelected && /*#__PURE__*/React.createElement("i", {
-          className: "sdocfont sdoc-check-mark"
-        }), /*#__PURE__*/React.createElement("span", {
-          style: {
-            fontSize: "".concat(SDOC_FONT_SIZE[item], "pt")
-          }
-        }, t(HEADER_TITLE_MAP[item]))), /*#__PURE__*/React.createElement(Tooltip, {
-          target: id,
-          placement: "right"
-        }, _this2.getToolTip(item)));
-      })));
-    }
-  }]);
-  return HeaderMenu;
-}(React.Component);
+      }, t(HEADER_TITLE_MAP[item]))), /*#__PURE__*/React.createElement(Tooltip, {
+        target: id,
+        placement: "right"
+      }, this.getToolTip(item)));
+    })));
+  }
+}
 export default withTranslation('sdoc-editor')(HeaderMenu);

package/dist/basic-sdk/extension/plugins/header/plugin.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor, Element, Transforms, Node } from '@seafile/slate';
 import { PARAGRAPH, HEADERS, LIST_TYPE_ARRAY, TITLE, SUBTITLE, HEADER } from '../../constants';
 import { generateEmptyElement, getSelectedNodeByTypes } from '../../core';
@@ -6,46 +5,46 @@ import { isMenuDisabled, setHeaderType } from './helpers';
 import isHotkey from 'is-hotkey';
 import { MAC_HOTKEYS_EVENT, WIN_HOTKEYS } from '../../constants/keyboard';
 import { isMac } from '../../../../utils';
-var isSelectionAtLineEnd = function isSelectionAtLineEnd(editor, path) {
-  var selection = editor.selection;
+const isSelectionAtLineEnd = (editor, path) => {
+  const {
+    selection
+  } = editor;
   if (!selection) return false;
-  var isAtLineEnd = Editor.isEnd(editor, selection.anchor, path) || Editor.isEnd(editor, selection.focus, path);
+  const isAtLineEnd = Editor.isEnd(editor, selection.anchor, path) || Editor.isEnd(editor, selection.focus, path);
   return isAtLineEnd;
 };
-var withHeader = function withHeader(editor) {
-  var insertBreak = editor.insertBreak,
-    insertFragment = editor.insertFragment,
-    insertText = editor.insertText;
-  var newEditor = editor;
+const withHeader = editor => {
+  const {
+    insertBreak,
+    insertFragment,
+    insertText
+  } = editor;
+  const newEditor = editor;
 
   // Rewrite insertBreak - insert paragraph when carriage return at the end of header
-  newEditor.insertBreak = function () {
-    var _Editor$nodes = Editor.nodes(newEditor, {
-        match: function match(n) {
-          if (!Element.isElement(n)) return false;
-          if (!n.type) return false;
-          if (n.type.startsWith(HEADER)) return true;
-          if (n.type === TITLE) return true;
-          if (n.type === SUBTITLE) return true;
-          return false;
-        },
-        // Matches nodes whose node.type starts with header
-        universal: true
-      }),
-      _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
-      match = _Editor$nodes2[0];
+  newEditor.insertBreak = () => {
+    const [match] = Editor.nodes(newEditor, {
+      match: n => {
+        if (!Element.isElement(n)) return false;
+        if (!n.type) return false;
+        if (n.type.startsWith(HEADER)) return true;
+        if (n.type === TITLE) return true;
+        if (n.type === SUBTITLE) return true;
+        return false;
+      },
+      // Matches nodes whose node.type starts with header
+      universal: true
+    });
     if (!match) {
       insertBreak();
       return;
     }
-    var isAtLineEnd = isSelectionAtLineEnd(editor, match[1]);
-    var nextNode = Editor.next(editor, {
+    const isAtLineEnd = isSelectionAtLineEnd(editor, match[1]);
+    const nextNode = Editor.next(editor, {
       at: match[1]
     });
     if (isAtLineEnd && nextNode && editor.children.length === 2) {
-      var _nextNode = _slicedToArray(nextNode, 2),
-        node = _nextNode[0],
-        path = _nextNode[1];
+      const [node, path] = nextNode;
       if (node && node.children[0].text === '') {
         Transforms.select(editor, path);
         return;
@@ -54,7 +53,7 @@ var withHeader = function withHeader(editor) {
 
     // If an empty p is inserted at the end of the line, otherwise wrap normally
     if (isAtLineEnd) {
-      var p = generateEmptyElement(PARAGRAPH);
+      const p = generateEmptyElement(PARAGRAPH);
       Transforms.insertNodes(newEditor, p, {
         mode: 'highest'
       });
@@ -62,30 +61,28 @@ var withHeader = function withHeader(editor) {
       insertBreak();
     }
   };
-  newEditor.insertFragment = function (data) {
+  newEditor.insertFragment = data => {
     var _data$, _data$$children;
-    var headerNode = getSelectedNodeByTypes(editor, HEADERS);
-    var headerText = Node.string(headerNode || {
+    const headerNode = getSelectedNodeByTypes(editor, HEADERS);
+    const headerText = Node.string(headerNode || {
       children: []
     });
-    var isSingleListItem = data.length === 1 && ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : (_data$$children = _data$.children) === null || _data$$children === void 0 ? void 0 : _data$$children.length) === 1 && LIST_TYPE_ARRAY.includes(data[0].type);
+    const isSingleListItem = data.length === 1 && ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : (_data$$children = _data$.children) === null || _data$$children === void 0 ? void 0 : _data$$children.length) === 1 && LIST_TYPE_ARRAY.includes(data[0].type);
     // Insert a list item when the header is empty, insert only the text
     if (headerNode && headerText.length === 0 && isSingleListItem) {
-      var text = Node.string(data[0]);
+      const text = Node.string(data[0]);
       insertText(text);
       return;
     }
     return insertFragment(data);
   };
-  newEditor.onHotKeyDown = function (event) {
-    var HOT_KEYS = isMac() ? MAC_HOTKEYS_EVENT : WIN_HOTKEYS;
-    var hotEntries = Object.entries(HOT_KEYS);
-    var isHeaderEvent = false;
-    var headerType = '';
-    for (var index = 0; index < hotEntries.length; index++) {
-      var _hotEntries$index = _slicedToArray(hotEntries[index], 2),
-        key = _hotEntries$index[0],
-        value = _hotEntries$index[1];
+  newEditor.onHotKeyDown = event => {
+    const HOT_KEYS = isMac() ? MAC_HOTKEYS_EVENT : WIN_HOTKEYS;
+    const hotEntries = Object.entries(HOT_KEYS);
+    let isHeaderEvent = false;
+    let headerType = '';
+    for (let index = 0; index < hotEntries.length; index++) {
+      const [key, value] = hotEntries[index];
       isHeaderEvent = isHotkey(value, event);
       if (isHeaderEvent) {
         headerType = key;