@seafile/sdoc-editor 0.3.6 → 0.3.7

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

@@ -13,9 +13,11 @@ import HistoryMenu from './redo-undo';
 import Font from '../../plugins/font/menu';
 import InsertToolbar from './insert-toolbar';
 import ActiveTableMenu from '../../plugins/table/menu/active-table-menu';
-var HeaderToolbar = function HeaderToolbar(_ref) {
-  var editor = _ref.editor,
-    readonly = _ref.readonly;
+const HeaderToolbar = _ref => {
+  let {
+    editor,
+    readonly
+  } = _ref;
   useSelectionUpdate();
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-toolbar"

package/dist/basic-sdk/extension/toolbar/header-toolbar/insert-toolbar/index.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useRef, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledPopover } from 'reactstrap';
@@ -11,31 +10,31 @@ import SdocLinkMenu from '../../../plugins/sdoc-link/menu';
 import FileLinkMenu from '../../../plugins/file-link/menu';
 import EventBus from '../../../../utils/event-bus';
 import './index.css';
-var InsertToolbar = function InsertToolbar(_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 = readonly;
-  var insertButtonRef = useRef(null);
-  var insertToolbarId = 'sdoc-insert-toolbar-btn';
-  var eventBus = useMemo(function () {
+const InsertToolbar = _ref => {
+  let {
+    isRichEditor,
+    className,
+    editor,
+    readonly
+  } = _ref;
+  const [isShowMenu, setMenuShow] = useState(false);
+  const {
+    t
+  } = useTranslation();
+  const popoverRef = useRef(null);
+  const disabled = readonly;
+  const insertButtonRef = useRef(null);
+  const insertToolbarId = 'sdoc-insert-toolbar-btn';
+  const eventBus = useMemo(() => {
     return EventBus.getInstance();
   }, []);
-  var toggle = useCallback(function (event) {
+  const toggle = useCallback(event => {
     popoverRef.current && popoverRef.current.toggle();
     setMenuShow(!isShowMenu);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowMenu]);
-  var validClassName = classnames(className, 'sdoc-menu-with-dropdown sdoc-insert-toolbar-btn', {
+  const validClassName = classnames(className, 'sdoc-menu-with-dropdown sdoc-insert-toolbar-btn', {
     'menu-show': isShowMenu,
     'disabled': disabled,
     'rich-icon-btn d-flex': isRichEditor,
@@ -43,16 +42,17 @@ var InsertToolbar = function InsertToolbar(_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 = insertButtonRef.current ? insertButtonRef.current.getBoundingClientRect() : {
-      bottom: 92.5
-    },
-    bottom = _ref2.bottom;
-  var props = {
-    eventBus: eventBus,
-    editor: editor,
-    readonly: readonly,
-    toggle: toggle
+  const caretIconClass = "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down');
+  const {
+    bottom
+  } = insertButtonRef.current ? insertButtonRef.current.getBoundingClientRect() : {
+    bottom: 92.5
+  };
+  const props = {
+    eventBus,
+    editor,
+    readonly,
+    toggle
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button",

package/dist/basic-sdk/extension/toolbar/header-toolbar/redo-undo.js

@@ -1,69 +1,61 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 from 'react';
 import { MenuItem } from '../../commons';
 import { MENUS_CONFIG_MAP, REDO, UNDO } from '../../constants';
-var HistoryMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(HistoryMenu, _React$Component);
-  var _super = _createSuper(HistoryMenu);
-  function HistoryMenu() {
-    var _this;
-    _classCallCheck(this, HistoryMenu);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.isDisabled = function (type) {
-      var _this$props = _this.props,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
+class HistoryMenu extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.isDisabled = type => {
+      const {
+        editor,
+        readonly
+      } = this.props;
       if (readonly) return true;
-      var history = editor.history;
+      const {
+        history
+      } = editor;
       if (type === UNDO) {
         return history.undos.length === 0;
       }
       return history.redos.length === 0;
     };
-    _this.onUndoMouseDown = function () {
-      var editor = _this.props.editor;
+    this.onUndoMouseDown = () => {
+      const {
+        editor
+      } = this.props;
       editor.undo();
     };
-    _this.onRedoMouseDown = function () {
-      var editor = _this.props.editor;
+    this.onRedoMouseDown = () => {
+      const {
+        editor
+      } = this.props;
       editor.redo();
     };
-    return _this;
   }
-  _createClass(HistoryMenu, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        isRichEditor = _this$props2.isRichEditor,
-        className = _this$props2.className;
-      var undoConfig = MENUS_CONFIG_MAP[UNDO];
-      var redoConfig = MENUS_CONFIG_MAP[REDO];
-      var undoProps = _objectSpread(_objectSpread({
-        isRichEditor: isRichEditor,
-        className: className
-      }, undoConfig), {}, {
-        disabled: this.isDisabled(UNDO),
-        isActive: false,
-        onMouseDown: this.onUndoMouseDown
-      });
-      var redoProps = _objectSpread(_objectSpread({
-        isRichEditor: isRichEditor,
-        className: className
-      }, redoConfig), {}, {
-        disabled: this.isDisabled(REDO),
-        isActive: false,
-        onMouseDown: this.onRedoMouseDown
-      });
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuItem, undoProps), /*#__PURE__*/React.createElement(MenuItem, redoProps));
-    }
-  }]);
-  return HistoryMenu;
-}(React.Component);
+  render() {
+    const {
+      isRichEditor,
+      className
+    } = this.props;
+    const undoConfig = MENUS_CONFIG_MAP[UNDO];
+    const redoConfig = MENUS_CONFIG_MAP[REDO];
+    const undoProps = _objectSpread(_objectSpread({
+      isRichEditor,
+      className
+    }, undoConfig), {}, {
+      disabled: this.isDisabled(UNDO),
+      isActive: false,
+      onMouseDown: this.onUndoMouseDown
+    });
+    const redoProps = _objectSpread(_objectSpread({
+      isRichEditor,
+      className
+    }, redoConfig), {}, {
+      disabled: this.isDisabled(REDO),
+      isActive: false,
+      onMouseDown: this.onRedoMouseDown
+    });
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuItem, undoProps), /*#__PURE__*/React.createElement(MenuItem, redoProps));
+  }
+}
 export default HistoryMenu;

package/dist/basic-sdk/extension/toolbar/side-toolbar/event.js

@@ -1,25 +1,25 @@
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
-export var onMouseEnter = function onMouseEnter(event) {
+export const onMouseEnter = event => {
   event.stopPropagation();
-  var eventBus = EventBus.getInstance();
+  const eventBus = EventBus.getInstance();
   eventBus.dispatch(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, event);
 };
-export var onDragOver = function onDragOver(event) {
+export const onDragOver = event => {
   event.stopPropagation();
   event.preventDefault();
-  var eventBus = EventBus.getInstance();
+  const eventBus = EventBus.getInstance();
   eventBus.dispatch(INTERNAL_EVENT.ON_DRAG_OVER_BLOCK, event);
 };
-export var onDragLeave = function onDragLeave(event) {
+export const onDragLeave = event => {
   event.stopPropagation();
   event.preventDefault();
-  var eventBus = EventBus.getInstance();
+  const eventBus = EventBus.getInstance();
   eventBus.dispatch(INTERNAL_EVENT.ON_DRAG_LEAVE_BLOCK, event);
 };
-export var onDrop = function onDrop(event) {
+export const onDrop = event => {
   event.stopPropagation();
   event.preventDefault();
-  var eventBus = EventBus.getInstance();
+  const eventBus = EventBus.getInstance();
   eventBus.dispatch(INTERNAL_EVENT.ON_DRAG_DROP_BLOCK, event);
 };

package/dist/basic-sdk/extension/toolbar/side-toolbar/helpers.js

@@ -8,14 +8,14 @@ import { generateEmptyList } from '../../plugins/list/model';
 import { setClipboardCodeBlockData } from '../../plugins/code-block/helpers';
 import { ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, CHECK_LIST_ITEM, IMAGE, TABLE, CODE_BLOCK, BLOCKQUOTE, LIST_ITEM_CORRELATION_TYPE, ADD_POSITION_OFFSET_TYPE, INSERT_POSITION, ELEMENT_TYPE } from '../../constants';
 import { EMPTY_SELECTED_RANGE } from '../../plugins/table/constants';
-export var onSetNodeType = function onSetNodeType(editor, element, type) {
+export const onSetNodeType = (editor, element, type) => {
   if (!type) return;
   if ([ORDERED_LIST, UNORDERED_LIST].includes(type)) {
     toggleList(editor, type);
     return;
   }
   if (type === CHECK_LIST_ITEM) {
-    var newType = element.type === CHECK_LIST_ITEM ? PARAGRAPH : CHECK_LIST_ITEM;
+    const newType = element.type === CHECK_LIST_ITEM ? PARAGRAPH : CHECK_LIST_ITEM;
     Transforms.setNodes(editor, {
       type: newType
     });
@@ -27,9 +27,7 @@ export var onSetNodeType = function onSetNodeType(editor, element, type) {
       type: BLOCKQUOTE
     }, {
       mode: 'highest',
-      match: function match(n) {
-        return Element.isElement(n) && Editor.isBlock(editor, n);
-      }
+      match: n => Element.isElement(n) && Editor.isBlock(editor, n)
     });
     return;
   }
@@ -37,20 +35,20 @@ export var onSetNodeType = function onSetNodeType(editor, element, type) {
     type: type
   });
 };
-export var setSelection = function setSelection(editor, element) {
+export const setSelection = (editor, element) => {
   if (element) {
-    var path = ReactEditor.findPath(editor, element);
+    const path = ReactEditor.findPath(editor, element);
     Transforms.select(editor, path);
   }
 };
-export var onCopyNode = function onCopyNode(editor, element) {
+export const onCopyNode = (editor, element) => {
   if (element.type === ELEMENT_TYPE.CODE_BLOCK) {
     setClipboardCodeBlockData(element);
     return;
   }
   if (element.type === ELEMENT_TYPE.TABLE) {
-    var tableSize = [element.children.length, element.children[0].children.length];
-    var tableSelectedRange = {
+    const tableSize = [element.children.length, element.children[0].children.length];
+    const tableSelectedRange = {
       minRowIndex: 0,
       maxRowIndex: tableSize[0] - 1,
       minColIndex: 0,
@@ -58,11 +56,11 @@ export var onCopyNode = function onCopyNode(editor, element) {
     };
     editor.tableSelectedRange = tableSelectedRange;
   }
-  var newData = editor.setFragmentData(new DataTransfer());
+  const newData = editor.setFragmentData(new DataTransfer());
   copy('copy', {
-    onCopy: function onCopy(clipboardData) {
-      newData.types.forEach(function (type) {
-        var data = newData.getData(type);
+    onCopy: clipboardData => {
+      newData.types.forEach(type => {
+        const data = newData.getData(type);
         clipboardData.setData(type, data);
       });
     }
@@ -71,43 +69,41 @@ export var onCopyNode = function onCopyNode(editor, element) {
     editor.tableSelectedRange = EMPTY_SELECTED_RANGE;
   }
 };
-export var onDeleteNode = function onDeleteNode(editor, element) {
-  var path = ReactEditor.findPath(editor, element);
+export const onDeleteNode = (editor, element) => {
+  const path = ReactEditor.findPath(editor, element);
   Transforms.removeNodes(editor, {
     at: path
   });
 };
-export var getDomTopHeight = function getDomTopHeight(dom, slateNode) {
-  var rect = dom.getBoundingClientRect();
-  var offsetY = 0;
-  var paddingTop = parseFloat(window.getComputedStyle(dom).getPropertyValue('padding-top'));
-  var lightHight = parseFloat(window.getComputedStyle(dom).getPropertyValue('line-height'));
+export const getDomTopHeight = (dom, slateNode) => {
+  const rect = dom.getBoundingClientRect();
+  let offsetY = 0;
+  const paddingTop = parseFloat(window.getComputedStyle(dom).getPropertyValue('padding-top'));
+  const lightHight = parseFloat(window.getComputedStyle(dom).getPropertyValue('line-height'));
   if (ADD_POSITION_OFFSET_TYPE.includes(slateNode.type)) {
     offsetY = lightHight / 2 + paddingTop - 12; // side toolbar icon is 12 px
   }
 
-  var HEADER_HEIGHT = 56 + 44;
+  const HEADER_HEIGHT = 56 + 44;
   return rect.y - HEADER_HEIGHT + offsetY;
 };
-export var isVoidNode = function isVoidNode(node) {
+export const isVoidNode = node => {
   if (!node) return true;
-  var hasImage = node.children.find(function (n) {
-    return n.type === IMAGE;
-  });
-  var isTable = node.type === TABLE;
-  var isCodeBlock = node.type === CODE_BLOCK;
+  const hasImage = node.children.find(n => n.type === IMAGE);
+  const isTable = node.type === TABLE;
+  const isCodeBlock = node.type === CODE_BLOCK;
   return Node.string(node) === '' && !hasImage && !isTable && !isCodeBlock;
 };
-export var isNotSupportTransform = function isNotSupportTransform(node) {
+export const isNotSupportTransform = node => {
   if (node.type && [CODE_BLOCK, TABLE].includes(node.type)) {
     return true;
   }
   return false;
 };
-export var insertElement = function insertElement(editor, type, insertPosition) {
+export const insertElement = (editor, type, insertPosition) => {
   if (insertPosition === INSERT_POSITION.AFTER) {
-    var p = generateEmptyElement(PARAGRAPH);
-    var path = Editor.path(editor, editor.selection);
+    const p = generateEmptyElement(PARAGRAPH);
+    const path = Editor.path(editor, editor.selection);
     Transforms.insertNodes(editor, p, {
       at: [path[0] + 1]
     });
@@ -115,54 +111,54 @@ export var insertElement = function insertElement(editor, type, insertPosition)
   }
   // Insertion position is current or after
   Transforms.setNodes(editor, {
-    type: type
+    type
   });
 };
-export var getNodeEntry = function getNodeEntry(editor, el) {
-  var node = ReactEditor.toSlateNode(editor, el);
-  var path = ReactEditor.findPath(editor, node);
+export const getNodeEntry = (editor, el) => {
+  const node = ReactEditor.toSlateNode(editor, el);
+  let path = ReactEditor.findPath(editor, node);
   if (isList(editor, path)) {
     path = path.slice(0, path.length - 1);
   }
   if (node && path) return [node, path];
   return [];
 };
-export var isBlockquote = function isBlockquote(editor, path) {
+export const isBlockquote = (editor, path) => {
   var _nodeEntry$;
-  var nodeEntry = Editor.node(editor, path);
+  const nodeEntry = Editor.node(editor, path);
   if (nodeEntry && ((_nodeEntry$ = nodeEntry[0]) === null || _nodeEntry$ === void 0 ? void 0 : _nodeEntry$.type) === BLOCKQUOTE) {
     return true;
   }
   return false;
 };
-export var isList = function isList(editor, path) {
+export const isList = (editor, path) => {
   var _nodeEntry$2;
-  var nodeEntry = Editor.node(editor, [path[0]]);
+  const nodeEntry = Editor.node(editor, [path[0]]);
   if (nodeEntry && [ORDERED_LIST, UNORDERED_LIST].includes((_nodeEntry$2 = nodeEntry[0]) === null || _nodeEntry$2 === void 0 ? void 0 : _nodeEntry$2.type)) {
     return true;
   }
   if (path.length > 1 && isBlockquote(editor, [path[0]])) {
     var _nodeEntry$3;
-    var _nodeEntry = Editor.node(editor, [path[0], path[1]]);
-    if ([ORDERED_LIST, UNORDERED_LIST].includes((_nodeEntry$3 = _nodeEntry[0]) === null || _nodeEntry$3 === void 0 ? void 0 : _nodeEntry$3.type)) {
+    const nodeEntry = Editor.node(editor, [path[0], path[1]]);
+    if ([ORDERED_LIST, UNORDERED_LIST].includes((_nodeEntry$3 = nodeEntry[0]) === null || _nodeEntry$3 === void 0 ? void 0 : _nodeEntry$3.type)) {
       return true;
     }
   }
   return false;
 };
-export var getListNode = function getListNode(editor, path) {
-  var listType = Editor.node(editor, [path[0]])[0].type;
+export const getListNode = (editor, path) => {
+  let listType = Editor.node(editor, [path[0]])[0].type;
   if (listType === BLOCKQUOTE) {
     listType = Editor.node(editor, [path[0], path[1]])[0].type;
   }
-  var listItem = Editor.node(editor, path)[0];
-  var listNode = generateEmptyList(listType);
+  const listItem = Editor.node(editor, path)[0];
+  const listNode = generateEmptyList(listType);
   listNode.children[0] = listItem;
   return listNode;
 };
-export var onWrapListItem = function onWrapListItem(editor, targetPath, sourcePath) {
-  var nextPath = Path.next(targetPath);
-  var listNode = getListNode(editor, sourcePath);
+export const onWrapListItem = (editor, targetPath, sourcePath) => {
+  const nextPath = Path.next(targetPath);
+  const listNode = getListNode(editor, sourcePath);
   Transforms.insertNodes(editor, listNode, {
     at: nextPath
   });

package/dist/basic-sdk/extension/toolbar/side-toolbar/index.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Editor, Path, Transforms } from '@seafile/slate';
@@ -11,40 +10,25 @@ import { getDomTopHeight, setSelection, isVoidNode, getNodeEntry, isBlockquote,
 import { INTERNAL_EVENT } from '../../../constants';
 import { CODE_BLOCK, TABLE, BLOCKQUOTE, CHECK_LIST_ITEM } from '../../constants';
 import './index.css';
-var sourceElement = null;
-var targetElement = null;
-var SideToolbar = function SideToolbar() {
-  var editor = useSlateStatic();
-  var scrollRef = useScrollContext();
-  var menuRef = useRef(null);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    slateNode = _useState2[0],
-    setSlateNode = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    sidePosition = _useState4[0],
-    setSidePosition = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isNodeEmpty = _useState6[0],
-    setNodeEmpty = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isShowSideMenu = _useState8[0],
-    setShowSideMenu = _useState8[1];
-  var _useState9 = useState({}),
-    _useState10 = _slicedToArray(_useState9, 2),
-    menuPosition = _useState10[0],
-    setMenuPosition = _useState10[1];
-  var onReset = useCallback(function () {
+let sourceElement = null;
+let targetElement = null;
+const SideToolbar = () => {
+  const editor = useSlateStatic();
+  const scrollRef = useScrollContext();
+  const menuRef = useRef(null);
+  const [slateNode, setSlateNode] = useState(null);
+  const [sidePosition, setSidePosition] = useState({});
+  const [isNodeEmpty, setNodeEmpty] = useState(false);
+  const [isShowSideMenu, setShowSideMenu] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({});
+  const onReset = useCallback(() => {
     setShowSideMenu(false);
     setMenuPosition({});
     setSlateNode(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  useEffect(function () {
-    var observerRefValue;
+  useEffect(() => {
+    let observerRefValue;
     if (isShowSideMenu) {
       scrollRef.current.addEventListener('scroll', onReset);
       observerRefValue = scrollRef.current;
@@ -52,7 +36,7 @@ var SideToolbar = function SideToolbar() {
       scrollRef.current.removeEventListener('scroll', onReset);
       observerRefValue = null;
     }
-    return function () {
+    return () => {
       if (observerRefValue) {
         observerRefValue.removeEventListener('scroll', onReset);
         focusEditor(editor);
@@ -60,18 +44,18 @@ var SideToolbar = function SideToolbar() {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowSideMenu]);
-  useEffect(function () {
-    var handleMouseEnter = function handleMouseEnter(e) {
+  useEffect(() => {
+    const handleMouseEnter = e => {
       if (isShowSideMenu) return;
-      var dom = e.target;
+      let dom = e.target;
       while (((_dom = dom) === null || _dom === void 0 ? void 0 : (_dom$dataset = _dom.dataset) === null || _dom$dataset === void 0 ? void 0 : _dom$dataset.root) !== 'true') {
         var _dom, _dom$dataset;
         if (!dom.parentNode) return;
         dom = dom.parentNode;
       }
-      var node = ReactEditor.toSlateNode(editor, dom);
-      var top = getDomTopHeight(dom, node);
-      var isEmpty = isVoidNode(node);
+      const node = ReactEditor.toSlateNode(editor, dom);
+      const top = getDomTopHeight(dom, node);
+      const isEmpty = isVoidNode(node);
       setSidePosition({
         top: top + scrollRef.current.scrollTop,
         left: 20
@@ -79,56 +63,50 @@ var SideToolbar = function SideToolbar() {
       setSlateNode(node);
       setNodeEmpty(isEmpty);
     };
-    var eventBus = EventBus.getInstance();
-    var unSubscribeMouseEnter = eventBus.subscribe(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, handleMouseEnter);
+    const eventBus = EventBus.getInstance();
+    const unSubscribeMouseEnter = eventBus.subscribe(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, handleMouseEnter);
     return unSubscribeMouseEnter;
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, isShowSideMenu, scrollRef]);
-  var onShowSideMenuToggle = useCallback(function () {
+  const onShowSideMenuToggle = useCallback(() => {
     setSelection(editor, slateNode);
-    var _menuRef$current$getB = menuRef.current.getBoundingClientRect(),
-      top = _menuRef$current$getB.top,
-      left = _menuRef$current$getB.left;
+    const {
+      top,
+      left
+    } = menuRef.current.getBoundingClientRect();
     setShowSideMenu(!isShowSideMenu);
     setMenuPosition({
-      top: top,
-      left: left
+      top,
+      left
     });
   }, [editor, isShowSideMenu, slateNode]);
-  var dragStart = useCallback(function (event) {
+  const dragStart = useCallback(event => {
     sourceElement = ReactEditor.toDOMNode(editor, slateNode);
-    var path = ReactEditor.findPath(editor, slateNode);
+    const path = ReactEditor.findPath(editor, slateNode);
 
     // Dragging the first element within the blockquote drags the entire blockquote by default.
-    if (isBlockquote(editor, [path[0]]) && path.slice(1).every(function (p) {
-      return p === 0;
-    })) {
-      var nodeEntry = Editor.node(editor, [path[0]]);
+    if (isBlockquote(editor, [path[0]]) && path.slice(1).every(p => p === 0)) {
+      const nodeEntry = Editor.node(editor, [path[0]]);
       sourceElement = ReactEditor.toDOMNode(editor, nodeEntry[0]);
     }
     event.dataTransfer.setDragImage(sourceElement, 0, 0);
   }, [editor, slateNode]);
-  var dragOver = useCallback(function (event) {
-    var overElement = event.currentTarget;
+  const dragOver = useCallback(event => {
+    const overElement = event.currentTarget;
     if (!overElement.classList.contains('sdoc-draging')) {
       overElement.classList.add('sdoc-draging');
     }
   }, []);
-  var dragLeave = useCallback(function (event) {
-    var leaveElement = event.currentTarget;
+  const dragLeave = useCallback(event => {
+    const leaveElement = event.currentTarget;
     leaveElement.classList.remove('sdoc-draging');
   }, []);
-  var drop = useCallback(function (event) {
+  const drop = useCallback(event => {
     targetElement = event.currentTarget;
     targetElement.classList.remove('sdoc-draging');
-    var _getNodeEntry = getNodeEntry(editor, sourceElement),
-      _getNodeEntry2 = _slicedToArray(_getNodeEntry, 2),
-      sourceNode = _getNodeEntry2[0],
-      sourcePath = _getNodeEntry2[1];
-    var _getNodeEntry3 = getNodeEntry(editor, targetElement),
-      _getNodeEntry4 = _slicedToArray(_getNodeEntry3, 2),
-      targetPath = _getNodeEntry4[1];
+    const [sourceNode, sourcePath] = getNodeEntry(editor, sourceElement);
+    const [, targetPath] = getNodeEntry(editor, targetElement);
 
     // Dragging into a quoteBlock is not supported
     if ([CODE_BLOCK, TABLE, BLOCKQUOTE].includes(sourceNode.type) && isBlockquote(editor, [targetPath[0]]) && targetPath.length > 1) {
@@ -191,7 +169,7 @@ var SideToolbar = function SideToolbar() {
 
     // Drag backward
     if (Path.isAfter(targetPath, sourcePath)) {
-      var toPath = targetPath.slice(0);
+      let toPath = targetPath.slice(0);
 
       // Drag elements outside the quoteBlock into the quoteBlock
       if (!isBlockquote(editor, [sourcePath[0]]) && isBlockquote(editor, [targetPath[0]]) && targetPath.length > 1) {
@@ -210,10 +188,10 @@ var SideToolbar = function SideToolbar() {
 
     // Drag forward
     if (Path.isBefore(targetPath, sourcePath)) {
-      var _toPath = Path.next(targetPath);
+      const toPath = Path.next(targetPath);
       Transforms.moveNodes(editor, {
         at: sourcePath,
-        to: _toPath
+        to: toPath
       });
     }
 
@@ -221,12 +199,12 @@ var SideToolbar = function SideToolbar() {
     sourceElement = null;
     targetElement = null;
   }, [editor]);
-  useEffect(function () {
-    var eventBus = EventBus.getInstance();
-    var unSubscribeDragOver = eventBus.subscribe(INTERNAL_EVENT.ON_DRAG_OVER_BLOCK, dragOver);
-    var unSubscribeDragLeave = eventBus.subscribe(INTERNAL_EVENT.ON_DRAG_LEAVE_BLOCK, dragLeave);
-    var unSubscribeDrop = eventBus.subscribe(INTERNAL_EVENT.ON_DRAG_DROP_BLOCK, drop);
-    return function () {
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    const unSubscribeDragOver = eventBus.subscribe(INTERNAL_EVENT.ON_DRAG_OVER_BLOCK, dragOver);
+    const unSubscribeDragLeave = eventBus.subscribe(INTERNAL_EVENT.ON_DRAG_LEAVE_BLOCK, dragLeave);
+    const unSubscribeDrop = eventBus.subscribe(INTERNAL_EVENT.ON_DRAG_DROP_BLOCK, drop);
+    return () => {
       unSubscribeDragOver();
       unSubscribeDragLeave();
       unSubscribeDrop();