@seafile/sdoc-editor 2.0.82 → 2.0.83

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

@@ -0,0 +1,612 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../constants");
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants2 = require("../../constants");
+var _core = require("../../core");
+var _helper = require("../../plugins/callout/helper");
+var _helpers = require("../../plugins/image/helpers");
+var _helper2 = require("../../plugins/multi-column/helper");
+var _event = require("./event");
+var _helpers2 = require("./helpers");
+var _sideMenu = _interopRequireDefault(require("./side-menu"));
+require("./index.css");
+var sourceElement = null;
+var targetElement = null;
+var SideToolbar = function SideToolbar() {
+  var editor = (0, _slateReact.useSlateStatic)();
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
+  var menuRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    slateNode = _useState2[0],
+    setSlateNode = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    sidePosition = _useState4[0],
+    setSidePosition = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isNodeEmpty = _useState6[0],
+    setNodeEmpty = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isShowSideMenu = _useState8[0],
+    setShowSideMenu = _useState8[1];
+  var _useState9 = (0, _react.useState)({}),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    menuPosition = _useState0[0],
+    setMenuPosition = _useState0[1];
+  var _useState1 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    isEnterMoreVertical = _useState10[0],
+    setIsEnterMoreVertical = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    isMoving = _useState12[0],
+    setIsMoving = _useState12[1];
+  var sideMenuRef = (0, _react.useRef)(null);
+  var draggedSourcePaths = (0, _react.useRef)(null);
+  var selectedNodesRef = (0, _react.useRef)(null);
+  var showSelectedNodesRef = (0, _react.useRef)(null);
+  var draggedPreviewContainer = (0, _react.useRef)(null);
+  var onReset = (0, _react.useCallback)(function () {
+    setShowSideMenu(false);
+    setMenuPosition({});
+    setSlateNode(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var handleClick = (0, _react.useCallback)(function (e) {
+    if (!isShowSideMenu || !menuRef.current) return;
+    var isClickSideTool = menuRef.current.contains(e.target);
+    var sideAskAI = document.querySelector('#side-toolbar-ai');
+    if (sideAskAI && sideAskAI.contains(e.target)) {
+      setTimeout(function () {
+        setShowSideMenu(!isShowSideMenu);
+      }, 0);
+      return;
+    }
+    if (isClickSideTool || !sideMenuRef.current) return;
+    var sideMenuDom = sideMenuRef.current.sideMenuDom;
+    if (!sideMenuDom) return;
+    var isClickContainer = sideMenuDom.contains(e.target);
+    if (!isClickContainer) onReset();
+  }, [isShowSideMenu, onReset]);
+  (0, _react.useEffect)(function () {
+    var observerRefValue;
+    if (isShowSideMenu) {
+      scrollRef.current.addEventListener('scroll', onReset);
+      document.addEventListener('click', handleClick);
+      observerRefValue = scrollRef.current;
+    } else {
+      scrollRef.current.removeEventListener('scroll', onReset);
+      document.removeEventListener('click', handleClick);
+      observerRefValue = null;
+    }
+    return function () {
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onReset);
+        (0, _core.focusEditor)(editor);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowSideMenu]);
+  (0, _react.useEffect)(function () {
+    var handleMouseEnter = function handleMouseEnter(e) {
+      if (isShowSideMenu) return;
+      var 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.className === 'column') {
+          return;
+        }
+        if (!dom.parentNode) return;
+        dom = dom.parentNode;
+      }
+      var node = _slateReact.ReactEditor.toSlateNode(editor, dom);
+      var isEmpty = _slate.Editor.isEmpty(editor, node);
+      var containerDom = scrollRef.current;
+      var topValue = (0, _helpers2.getTopValue)(editor, dom, containerDom, node);
+      if (topValue !== sidePosition.top) setIsMoving(true);
+      var left = 20;
+      if (editor.editorType === _constants.WIKI_EDITOR) {
+        var _document$querySelect = document.querySelector('#sdoc-editor').getBoundingClientRect(),
+          editorLeft = _document$querySelect.left;
+        var _document$querySelect2 = document.querySelector('.sdoc-editor-container').getBoundingClientRect(),
+          containerLeft = _document$querySelect2.left;
+        left = editorLeft - containerLeft - 40;
+      }
+      var path = (0, _core.findPath)(editor, node);
+      // Add side-tool-bar for paragraphs in multi_column
+      if (path.length > 2 && (0, _helpers2.isInMultiColumnNode)(editor, node)) {
+        var domLeft;
+        domLeft = document.querySelector("[data-id=\"".concat(dom.dataset.id, "\"]")) && document.querySelector("[data-id=\"".concat(dom.dataset.id, "\"]")).getBoundingClientRect().left;
+        var parentNode = _slate.Editor.node(editor, path.slice(0, 3))[0];
+        if ([_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST, _constants2.BLOCKQUOTE].includes(parentNode.type)) {
+          domLeft = document.querySelector("[data-id=\"".concat(parentNode.id, "\"]")) && document.querySelector("[data-id=\"".concat(parentNode.id, "\"]")).getBoundingClientRect().left;
+        }
+        if ([_constants2.IMAGE_BLOCK].includes(node.type)) {
+          var _dom$querySelectorAll;
+          var imageWrapperDomId = (_dom$querySelectorAll = dom.querySelectorAll('span')[1]) === null || _dom$querySelectorAll === void 0 ? void 0 : _dom$querySelectorAll.getAttribute('data-id');
+          domLeft = document.querySelector("[data-id=\"".concat(imageWrapperDomId, "\"]")) && document.querySelector("[data-id=\"".concat(imageWrapperDomId, "\"]")).getBoundingClientRect().left;
+        }
+        var _document$querySelect3 = document.querySelector('.sdoc-editor__article').getBoundingClientRect(),
+          _containerLeft = _document$querySelect3.left;
+        left = domLeft - _containerLeft - 41;
+      }
+      setTimeout(function () {
+        // wait animation
+        setSidePosition({
+          top: topValue,
+          left: left
+        });
+      }, 150);
+      setSlateNode(node);
+      setNodeEmpty(isEmpty);
+    };
+    var eventBus = _eventBus["default"].getInstance();
+    var unSubscribeMouseEnter = eventBus.subscribe(_constants.INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, handleMouseEnter);
+    return unSubscribeMouseEnter;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, isShowSideMenu, scrollRef, sidePosition.top]);
+  var onMouseDown = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    var domSelection = window.getSelection();
+    if (domSelection.type !== 'Range' || !editor.selection || _slate.Path.equals(editor.selection.focus.path, editor.selection.anchor.path)) {
+      draggedPreviewContainer.current = null;
+      selectedNodesRef.current = null;
+      showSelectedNodesRef.current = null;
+      draggedSourcePaths.current = null;
+      return;
+    }
+    // Bond when selecting more than more list_items nodes
+    var dom = e.target;
+    var domTop = dom.getBoundingClientRect().top;
+    if ((0, _helpers2.isListItem)(editor)) {
+      var _editor$selection = editor.selection,
+        anchor = _editor$selection.anchor,
+        focus = _editor$selection.focus;
+      // Return if selecting only one line list_item
+      if (_slate.Path.equals(anchor.path.slice(0, -1), focus.path.slice(0, -1))) return;
+      var startPath = (_slate.Path.compare(anchor.path, focus.path) < 0 ? anchor.path : focus.path).slice(0, -2);
+      // Remove unselected parent level list node when selecting child level list_item nodes
+      var selectedDraggedPreviewNodes = Array.from(_slate.Editor.nodes(editor, {
+        match: function match(node) {
+          return node.type === _constants2.LIST_ITEM;
+        },
+        at: editor.selection
+      })).filter(function (_ref) {
+        var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+          path = _ref2[1];
+        return !_slate.Path.isAncestor(path, startPath);
+      });
+
+      // Remove their all children level list_items when selecting parent level list nodes
+      var selectedNodes = [];
+      var lastAncestorPath = null;
+      var _iterator = (0, _createForOfIteratorHelper2["default"])(selectedDraggedPreviewNodes),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _step$value = (0, _slicedToArray2["default"])(_step.value, 2),
+            node = _step$value[0],
+            path = _step$value[1];
+          if (lastAncestorPath && _slate.Path.isAncestor(lastAncestorPath, path)) {
+            continue;
+          }
+          selectedNodes.push([node, path]);
+          lastAncestorPath = path;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var topValues = selectedDraggedPreviewNodes.map(function (_ref3) {
+        var _ref4 = (0, _slicedToArray2["default"])(_ref3, 1),
+          node = _ref4[0];
+        var domNode = _slateReact.ReactEditor.toDOMNode(editor, node);
+        var rect = domNode.getBoundingClientRect();
+        return rect.top;
+      });
+      var rangeStart = Math.min.apply(Math, (0, _toConsumableArray2["default"])(topValues)) - 15;
+      var rangeEnd = Math.max.apply(Math, (0, _toConsumableArray2["default"])(topValues)) + 15;
+      // Active only when the sideTool bar references to the selectedNodes
+      if (selectedDraggedPreviewNodes.length > 1 && rangeStart < domTop && domTop < rangeEnd) {
+        showSelectedNodesRef.current = selectedDraggedPreviewNodes;
+        selectedNodesRef.current = selectedNodes;
+      } else {
+        draggedPreviewContainer.current = null;
+        selectedNodesRef.current = null;
+        showSelectedNodesRef.current = null;
+        draggedSourcePaths.current = null;
+      }
+    }
+  }, [editor]);
+  var onShowSideMenuToggle = (0, _react.useCallback)(function () {
+    (0, _helpers2.setSelection)(editor, slateNode);
+    var _menuRef$current$getB = menuRef.current.getBoundingClientRect(),
+      top = _menuRef$current$getB.top,
+      left = _menuRef$current$getB.left;
+    setShowSideMenu(!isShowSideMenu);
+    setMenuPosition({
+      top: top,
+      left: left
+    });
+  }, [editor, isShowSideMenu, slateNode]);
+  var dragStart = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    // Create the preview container when dragging more than one listNodes
+    var noDrag = _slate.Path.equals(editor.selection.focus.path, editor.selection.anchor.path);
+    if (showSelectedNodesRef.current && showSelectedNodesRef.current.length > 1 && !noDrag) {
+      if (!draggedPreviewContainer.current) {
+        draggedPreviewContainer.current = (0, _helpers2.createDragPreviewContainer)();
+      }
+      draggedPreviewContainer.current.innerHTML = '';
+      showSelectedNodesRef.current.forEach(function (_ref5) {
+        var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+          node = _ref6[0],
+          path = _ref6[1];
+        var nodeElement = _slateReact.ReactEditor.toDOMNode(editor, node.children[0]);
+        var clonedNode = nodeElement.cloneNode(true);
+        draggedPreviewContainer.current.appendChild(clonedNode);
+      });
+      event.dataTransfer.setDragImage(draggedPreviewContainer.current, 0, 0);
+      event.dataTransfer.setData(_event.DRAG_SDOC_EDITOR_ELEMENT, true);
+      draggedSourcePaths.current = showSelectedNodesRef.current.map(function (_ref7) {
+        var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
+          path = _ref8[1];
+        return path;
+      });
+      setTimeout(function () {
+        if (draggedPreviewContainer.current) {
+          draggedPreviewContainer.current.innerHTML = '';
+          draggedPreviewContainer.current = null;
+        }
+      }, 0);
+      return;
+    }
+    sourceElement = _slateReact.ReactEditor.toDOMNode(editor, slateNode);
+    var path = _slateReact.ReactEditor.findPath(editor, slateNode);
+
+    // Dragging the first element within the blockquote drags the entire blockquote by default.
+    if ((0, _helpers2.isBlockquote)(editor, [path[0]]) && path.slice(1).every(function (p) {
+      return p === 0;
+    })) {
+      var nodeEntry = _slate.Editor.node(editor, [path[0]]);
+      sourceElement = _slateReact.ReactEditor.toDOMNode(editor, nodeEntry[0]);
+    }
+    event.dataTransfer.setDragImage(sourceElement, 0, 0);
+    event.dataTransfer.setData(_event.DRAG_SDOC_EDITOR_ELEMENT, true);
+  }, [editor, slateNode]);
+  var dragOver = (0, _react.useCallback)(function (event) {
+    var dragTypes = event.dataTransfer.types;
+    if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT)) return;
+    var overElement = event.currentTarget;
+    if (!overElement.classList.contains('sdoc-draging')) {
+      overElement.classList.add('sdoc-draging');
+    }
+  }, []);
+  var dragLeave = (0, _react.useCallback)(function (event) {
+    var leaveElement = event.currentTarget;
+    leaveElement.classList.remove('sdoc-draging');
+  }, []);
+  var drop = (0, _react.useCallback)(function (event) {
+    var _parentNode$children$;
+    targetElement = event.currentTarget;
+    targetElement.classList.remove('sdoc-draging');
+    var dragTypes = event.dataTransfer.types;
+    if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT) && dragTypes[0] !== 'Files') return;
+
+    // Prevent dragging table data to the editor
+    if (dragTypes.includes(_constants2.TABLE_DRAG_KEY)) return;
+
+    // Drag local image files to sdoc
+    if (event.dataTransfer.files.length > 0) {
+      var _getNodeEntry = (0, _helpers2.getNodeEntry)(editor, targetElement),
+        _getNodeEntry2 = (0, _slicedToArray2["default"])(_getNodeEntry, 2),
+        _targetPath = _getNodeEntry2[1];
+      (0, _helpers.insertImageFiles)(event.dataTransfer.files, editor, _targetPath);
+      return;
+    }
+    var _getNodeEntry3 = (0, _helpers2.getNodeEntry)(editor, targetElement),
+      _getNodeEntry4 = (0, _slicedToArray2["default"])(_getNodeEntry3, 2),
+      targetPath = _getNodeEntry4[1];
+    // Drag multiple list_items nodes
+    if (draggedSourcePaths.current) {
+      try {
+        // Return if dragging items into themselves
+        if (draggedSourcePaths.current.some(function (arr) {
+          return JSON.stringify(arr) === JSON.stringify(targetPath);
+        })) return;
+        var sortedPaths = (0, _toConsumableArray2["default"])(draggedSourcePaths.current).sort(_slate.Path.compare);
+        var currentTargetPath = _slate.Path.next(targetPath);
+        var currentNode = _slate.Node.get(editor, targetPath);
+        var _parentNode = _slate.Node.parent(editor, targetPath);
+        var topNode = _slate.Node.get(editor, [targetPath[0]]);
+
+        // Drag into list nods within blockquote, callout or multi_column block node
+        if (topNode.type === _constants2.CALL_OUT && _parentNode.type === _constants2.LIST_ITEM || topNode.type === _constants2.MULTI_COLUMN && _parentNode.type === _constants2.LIST_ITEM) {
+          currentTargetPath = _slate.Path.next(targetPath.slice(0, -1));
+          (0, _helpers2.onWrapMultiListItem)(editor, currentTargetPath, selectedNodesRef.current);
+          (0, _helpers2.deleteNodesFromBack)(editor, sortedPaths);
+          return;
+        }
+        if (topNode.type === _constants2.BLOCKQUOTE && currentNode.type === _constants2.LIST_ITEM) {
+          (0, _helpers2.onWrapMultiListItem)(editor, currentTargetPath, selectedNodesRef.current);
+          (0, _helpers2.deleteNodesFromBack)(editor, sortedPaths);
+          return;
+        }
+
+        // Drag into other element nodes rather than blockquote, callout or multi_column block node
+        if (_slate.Path.isAfter(targetPath, sortedPaths[0])) {
+          if (currentNode.type === _constants2.LIST_ITEM) {
+            (0, _helpers2.onWrapMultiListItem)(editor, currentTargetPath, selectedNodesRef.current);
+          } else {
+            var listType = _slate.Editor.node(editor, [sortedPaths[0][0]])[0].type;
+            (0, _helpers2.onWrapMultiListItemToNonListTypeTarget)(editor, targetPath, selectedNodesRef.current, listType);
+          }
+          (0, _helpers2.deleteNodesFromBack)(editor, sortedPaths);
+          return;
+        }
+        if (_slate.Path.isBefore(targetPath, sortedPaths[0])) {
+          var _listType = _slate.Editor.node(editor, [sortedPaths[0][0]])[0].type;
+          (0, _helpers2.deleteNodesFromBack)(editor, sortedPaths);
+          if (currentNode.type === _constants2.LIST_ITEM) {
+            (0, _helpers2.onWrapMultiListItem)(editor, currentTargetPath, selectedNodesRef.current);
+          } else {
+            (0, _helpers2.onWrapMultiListItemToNonListTypeTarget)(editor, targetPath, selectedNodesRef.current, _listType);
+          }
+          return;
+        }
+      } finally {
+        selectedNodesRef.current = null;
+        draggedSourcePaths.current = null;
+        showSelectedNodesRef.current = null;
+        draggedPreviewContainer.current = null;
+        event.dataTransfer.clearData();
+      }
+    }
+    var _getNodeEntry5 = (0, _helpers2.getNodeEntry)(editor, sourceElement),
+      _getNodeEntry6 = (0, _slicedToArray2["default"])(_getNodeEntry5, 2),
+      sourceNode = _getNodeEntry6[0],
+      sourcePath = _getNodeEntry6[1];
+    // Dragging into a quoteBlock is not supported
+    if ([_constants2.CODE_BLOCK, _constants2.TABLE, _constants2.BLOCKQUOTE].includes(sourceNode.type) && (0, _helpers2.isBlockquote)(editor, [targetPath[0]]) && targetPath.length > 1) {
+      return;
+    }
+
+    // Dragging into a list is not supported
+    if ([_constants2.CODE_BLOCK, _constants2.TABLE, _constants2.BLOCKQUOTE, _constants2.CHECK_LIST_ITEM].includes(sourceNode.type) && (0, _helpers2.isList)(editor, targetPath)) {
+      return;
+    }
+
+    // Dragging into callout is not supported
+    if ([_constants2.CALL_OUT, _constants2.CODE_BLOCK, _constants2.TABLE].includes(sourceNode.type) && (0, _helper.getCalloutEntry)(editor, targetPath)) {
+      return;
+    }
+
+    // Dragging multi_column's child into multi_column is not supported
+    var isInMultiColumn = (0, _helpers2.isInMultiColumnNode)(editor, sourceNode);
+    if (isInMultiColumn && (0, _helpers2.isMultiColumn)(editor, [targetPath[0]])) {
+      return;
+    }
+
+    // Drag list
+    if ((0, _helpers2.isList)(editor, sourcePath)) {
+      // ordinary list items
+      if (!(0, _helpers2.isBlockquote)(editor, [sourcePath[0]])) {
+        // Drag ordinary list items to places other than list and quoteBlock
+        if (!(0, _helpers2.isList)(editor, targetPath) && !(0, _helpers2.isBlockquote)(editor, [targetPath[0]])) {
+          (0, _helpers2.onWrapListItem)(editor, targetPath, sourcePath);
+          return;
+        }
+
+        // Drag ordinary list items into the quoteBlock
+        if ((0, _helpers2.isBlockquote)(editor, [targetPath[0]])) {
+          // Drag and drop ordinary list items onto the list within the quoteBlock
+          if ((0, _helpers2.isList)(editor, targetPath)) {
+            _slate.Transforms.moveNodes(editor, {
+              at: sourcePath,
+              to: _slate.Path.next(targetPath)
+            });
+            return;
+          }
+          (0, _helpers2.onWrapListItem)(editor, targetPath, sourcePath);
+          return;
+        }
+      }
+
+      // quoteBlock list items
+      if ((0, _helpers2.isBlockquote)(editor, [sourcePath[0]])) {
+        // Drag quoteBlock list items to places other than list and quoteBlock
+        if (!(0, _helpers2.isList)(editor, targetPath) && !(0, _helpers2.isBlockquote)(editor, [targetPath[0]])) {
+          (0, _helpers2.onWrapListItem)(editor, targetPath, sourcePath);
+          return;
+        }
+
+        // Drag quoteBlock list items into the quoteBlock
+        if ((0, _helpers2.isBlockquote)(editor, [targetPath[0]])) {
+          // Drag and drop ordinary list items onto the list within the quoteBlock
+          if ((0, _helpers2.isList)(editor, targetPath)) {
+            _slate.Transforms.moveNodes(editor, {
+              at: sourcePath,
+              to: _slate.Path.next(targetPath)
+            });
+            return;
+          }
+          (0, _helpers2.onWrapListItem)(editor, targetPath, sourcePath);
+          return;
+        }
+      }
+    }
+
+    // Dragging element from multi_column to other nodes
+    var currentSourceNode = _slate.Editor.node(editor, sourcePath.slice(0, 3))[0];
+    if (isInMultiColumn && sourceNode.type === _constants2.PARAGRAPH) {
+      // Dragging list
+      if ([_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(currentSourceNode.type)) {
+        // Drag ordinary list items to places other than list and quoteBlock
+        if (!(0, _helpers2.isList)(editor, targetPath) && !(0, _helpers2.isBlockquote)(editor, [targetPath[0]])) {
+          (0, _helpers2.onWrapListItemFromMultiColumn)(editor, targetPath, sourcePath);
+        }
+
+        // Drag ordinary list items to list
+        if ((0, _helpers2.isList)(editor, targetPath)) {
+          _slate.Transforms.moveNodes(editor, {
+            at: sourcePath.slice(0, 4),
+            to: _slate.Path.next(targetPath)
+          });
+        }
+
+        // Drag ordinary list items into the quoteBlock
+        if ((0, _helpers2.isBlockquote)(editor, [targetPath[0]])) {
+          // Drag and drop ordinary list items onto the list within the quoteBlock
+          if ((0, _helpers2.isList)(editor, targetPath)) {
+            _slate.Transforms.moveNodes(editor, {
+              at: sourcePath.slice(0, 4),
+              to: _slate.Path.next(targetPath)
+            });
+          } else {
+            (0, _helpers2.onWrapListItemFromMultiColumn)(editor, targetPath, sourcePath);
+          }
+        }
+      }
+
+      // Dragging quoteBlock's children element  from multi_column is not supported
+      if (currentSourceNode.type === _constants2.BLOCKQUOTE) {
+        return;
+      }
+    }
+
+    // Handling drag situations including non-multi_column or non-list item dragged from multiColumn
+    if (!isInMultiColumn || isInMultiColumn && ![_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(currentSourceNode.type)) {
+      // Drag backward
+      if (_slate.Path.isAfter(targetPath, sourcePath)) {
+        var toPath = targetPath.slice(0);
+
+        // Drag elements outside the quoteBlock into the quoteBlock
+        if (!(0, _helpers2.isBlockquote)(editor, [sourcePath[0]]) && (0, _helpers2.isBlockquote)(editor, [targetPath[0]]) && targetPath.length > 1) {
+          toPath = _slate.Path.next(targetPath);
+        }
+
+        // Drag into list
+        if ((0, _helpers2.isList)(editor, targetPath)) {
+          toPath = _slate.Path.next(targetPath);
+        }
+        _slate.Transforms.moveNodes(editor, {
+          at: sourcePath,
+          to: toPath
+        });
+      }
+
+      // Drag forward
+      if (_slate.Path.isBefore(targetPath, sourcePath)) {
+        var _toPath = _slate.Path.next(targetPath);
+        _slate.Transforms.moveNodes(editor, {
+          at: sourcePath,
+          to: _toPath
+        });
+      }
+    }
+    var selectedSourcePath = sourcePath;
+    // Handling drag forward situation for multi_column update
+    if (_slate.Path.isBefore(targetPath, sourcePath)) {
+      var targetNode = _slate.Editor.node(editor, [targetPath[0]])[0];
+      if (![_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(targetNode.type)) {
+        selectedSourcePath[0] += 1;
+      }
+    }
+
+    // Dragging childNodes from multi_column
+    var nodeIndex = selectedSourcePath[0];
+    var highestNode = editor.children[nodeIndex];
+    var _Editor$parent = _slate.Editor.parent(editor, selectedSourcePath.slice(0, 3)),
+      _Editor$parent2 = (0, _slicedToArray2["default"])(_Editor$parent, 1),
+      parentNode = _Editor$parent2[0];
+    if (selectedSourcePath.length > 1 && highestNode.type === _constants2.MULTI_COLUMN && !((_parentNode$children$ = parentNode.children[0]) !== null && _parentNode$children$ !== void 0 && _parentNode$children$.type)) {
+      if (highestNode.children.length <= 2) {
+        _slate.Transforms.removeNodes(editor, {
+          at: selectedSourcePath.slice(0, 2)
+        });
+        _slate.Transforms.unwrapNodes(editor, {
+          at: [selectedSourcePath[0]]
+        });
+      } else {
+        var topNodesColumnAttribute = highestNode.column;
+        _slate.Transforms.removeNodes(editor, {
+          at: selectedSourcePath.slice(0, 2)
+        });
+        var isDragged = true;
+        (0, _helper2.updateColumnWidthOnDeletion)(editor, selectedSourcePath, topNodesColumnAttribute, 'deleteBackward', isDragged);
+      }
+    }
+
+    // reset
+    sourceElement = null;
+    targetElement = null;
+  }, [editor]);
+  (0, _react.useEffect)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    var unSubscribeDragOver = eventBus.subscribe(_constants.INTERNAL_EVENT.ON_DRAG_OVER_BLOCK, dragOver);
+    var unSubscribeDragLeave = eventBus.subscribe(_constants.INTERNAL_EVENT.ON_DRAG_LEAVE_BLOCK, dragLeave);
+    var unSubscribeDrop = eventBus.subscribe(_constants.INTERNAL_EVENT.ON_DRAG_DROP_BLOCK, drop);
+    return function () {
+      unSubscribeDragOver();
+      unSubscribeDragLeave();
+      unSubscribeDrop();
+    };
+  }, [dragLeave, dragOver, drop]);
+  var onMouseEnter = (0, _react.useCallback)(function () {
+    setIsEnterMoreVertical(true);
+  }, []);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    setIsEnterMoreVertical(false);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    onAnimationEnd: function onAnimationEnd() {
+      return setIsMoving(false);
+    },
+    className: (0, _classnames["default"])('sdoc-side-toolbar-container', {
+      'fade-out': isMoving
+    }),
+    style: sidePosition
+  }, slateNode && /*#__PURE__*/_react["default"].createElement("div", {
+    ref: menuRef,
+    onMouseDown: onMouseDown,
+    draggable: true,
+    onDragStart: dragStart,
+    className: "sdoc-side-op-icon",
+    onClick: onShowSideMenuToggle,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])('sdocfont', {
+      'sdoc-more-vertical': !isNodeEmpty && !isEnterMoreVertical,
+      'sdoc-append': isNodeEmpty,
+      'sdoc-more-vertical-left': !isNodeEmpty && isEnterMoreVertical
+    })
+  })), isShowSideMenu && /*#__PURE__*/_react["default"].createElement(_sideMenu["default"], {
+    slateNode: slateNode,
+    isNodeEmpty: isNodeEmpty,
+    menuPosition: menuPosition,
+    onReset: onReset,
+    ref: sideMenuRef
+  }));
+};
+var _default = exports["default"] = SideToolbar;

package/dist/extension/toolbar/side-toolbar/insert-below-menu.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _constants = require("../../constants");
+var _insertBlockMenu = _interopRequireDefault(require("./insert-block-menu"));
+var InsertBelowMenu = function InsertBelowMenu(_ref) {
+  var target = _ref.target,
+    slateNode = _ref.slateNode;
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
+    boundariesElement: "viewport",
+    target: target,
+    className: "sdoc-side-menu-insert-below-popover sdoc-sub-dropdown-menu sdoc-dropdown-menu",
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-container"
+  }, /*#__PURE__*/_react["default"].createElement(_insertBlockMenu["default"], {
+    insertPosition: _constants.INSERT_POSITION.AFTER,
+    slateNode: slateNode
+  })));
+};
+var _default = exports["default"] = InsertBelowMenu;