@seafile/sdoc-editor 3.0.81 → 3.0.82

package/dist/assets/css/sdoc-editor-article.css

@@ -25,10 +25,38 @@
   left: -60px;
 }
 
-.sdoc-editor__article .sdoc-draging {
+.sdoc-editor__article .sdoc-dragging {
   border-bottom: 2px solid rgba(35, 131, 226);
 }
 
+.sdoc-editor__article .sdoc-dragging-right,
+.sdoc-editor__article .sdoc-dragging-left {
+  position: relative;
+}
+
+.sdoc-editor__article .sdoc-dragging-left::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -5px;
+  width: 2px;
+  background: rgba(35, 131, 226);
+  pointer-events: none;
+}
+
+.sdoc-editor__article .sdoc-dragging-right::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -5px;
+  left: unset;
+  width: 2px;
+  background: rgba(35, 131, 226);
+  pointer-events: none;
+}
+
 .sdoc-editor__article .sdoc-code-block-pre {
   font-size: 10pt;
 }

package/dist/assets/css/sdoc-editor-plugins.css

@@ -45,8 +45,11 @@
   cursor: pointer;
 }
 
-.sdoc-editor__article .list-container .sdoc-li-content {
-  display: inline-grid;
+/*  only for firefox browser */
+@-moz-document url-prefix() {
+  .sdoc-editor__article .list-container .sdoc-li-content {
+    display: inline-grid;
+  }
 }
 
 .sdoc-editor__article .list-container .sdoc-li-prefix {

package/dist/extension/constants/index.js

@@ -558,4 +558,4 @@ var FILEEXT_TYPE_MAP = exports.FILEEXT_TYPE_MAP = {
 };
 var SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.WHITEBOARD, _elementType.FORMULA];
 var MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP = (_MOUSE_ENTER_EVENT_DI = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_MOUSE_ENTER_EVENT_DI, _elementType.PARAGRAPH, [_elementType.CALL_OUT]), _elementType.TITLE, [_elementType.CALL_OUT]), _elementType.SUBTITLE, [_elementType.CALL_OUT]), _elementType.CHECK_LIST_ITEM, [_elementType.CALL_OUT]), _elementType.ORDERED_LIST, [_elementType.CALL_OUT]), _elementType.UNORDERED_LIST, [_elementType.CALL_OUT]), _elementType.LIST_ITEM, [_elementType.CALL_OUT]), _elementType.BLOCKQUOTE, [_elementType.CALL_OUT]), _elementType.HEADER1, [_elementType.CALL_OUT]), _elementType.HEADER2, [_elementType.CALL_OUT]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_MOUSE_ENTER_EVENT_DI, _elementType.HEADER3, [_elementType.CALL_OUT]), _elementType.HEADER4, [_elementType.CALL_OUT]), _elementType.HEADER5, [_elementType.CALL_OUT]), _elementType.HEADER6, [_elementType.CALL_OUT]), _elementType.CALL_OUT, [_elementType.CALL_OUT]));
-var ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.WHITEBOARD, _elementType.FORMULA];
+var ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.WHITEBOARD, _elementType.FORMULA, _elementType.MULTI_COLUMN];

package/dist/extension/plugins/callout/render-elem/index.js

@@ -138,7 +138,7 @@ var renderCallout = function renderCallout(_ref, editor) {
   }), /*#__PURE__*/_react["default"].createElement("div", {
     onClick: handleClick,
     ref: calloutRef,
-    className: "".concat(attributes.className, " sdoc-callout-container"),
+    className: "sdoc-callout-container",
     style: containerStyle
   }, element.callout_icon && /*#__PURE__*/_react["default"].createElement("div", {
     className: "callout-icon"

package/dist/extension/plugins/check-list/render-elem.js

@@ -56,7 +56,7 @@ var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
         "data-id": id
       }, attributes, {
-        className: "sdoc-checkbox-container ".concat(attributes.className),
+        className: "sdoc-checkbox-container",
         style: style
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "sdoc-checkbox-input-wrapper"

package/dist/extension/plugins/header/render-elem.js

@@ -38,7 +38,7 @@ var renderSubtitle = exports.renderSubtitle = function renderSubtitle(props, edi
   return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
     "data-id": element.id
   }, attributes, {
-    className: "sdoc-header-subtitle ".concat(attributes.className),
+    className: "sdoc-header-subtitle",
     style: (0, _objectSpread2["default"])({}, style)
   }), children);
 };
@@ -63,7 +63,7 @@ var renderHeader = exports.renderHeader = function renderHeader(props, editor) {
     "data-id": element.id,
     id: element.id // used for click left outline item, page scroll this element
   }, attributes, {
-    className: "sdoc-header-".concat(level, " ").concat(attributes.className),
+    className: "sdoc-header-".concat(level),
     style: (0, _objectSpread2["default"])({
       position: isShowPlaceHolder ? 'relative' : ''
     }, style)

package/dist/extension/plugins/list/render-elem.js

@@ -16,9 +16,10 @@ var renderList = exports.renderList = function renderList(props, editor) {
     node = props.element;
   var Tag = node.type === _constants.ORDERED_LIST ? 'ol' : 'ul';
   return /*#__PURE__*/_react["default"].createElement(Tag, Object.assign({
-    "data-id": node.id,
+    "data-id": node.id
+  }, attributes, {
     className: "list-container d-flex flex-column"
-  }, attributes), children);
+  }), children);
 };
 var renderListItem = exports.renderListItem = function renderListItem(props, editor) {
   var attributes = props.attributes,

package/dist/extension/plugins/multi-column/helper.js

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateColumnWidthOnDeletion = exports.updateColumnWidth = exports.insertMultiColumn = exports.hasImageInColumn = exports.handleInsertMultiColumn = exports.getCurrentPageWidth = exports.generateEmptyMultiColumn = void 0;
+exports.updateColumnWidthOnDeletion = exports.updateColumnWidth = exports.insertMultiColumn = exports.hasImageInColumn = exports.handleInsertMultiColumn = exports.getCurrentPageWidth = exports.generateEmptyMultiColumn = exports.generateEmptyColumn = exports.addMiddleColumnInMultiColumn = exports.addLastColumnInMultiColumn = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _slugid = _interopRequireDefault(require("slugid"));
@@ -83,6 +84,86 @@ var generateEmptyMultiColumn = exports.generateEmptyMultiColumn = function gener
     }
   };
 };
+var generateEmptyColumn = exports.generateEmptyColumn = function generateEmptyColumn(editor, columnNum) {
+  var currentPageWidth = getCurrentPageWidth(editor) + _constants3.LAST_COLUMN_MARGIN_RIGHT_WIDTH;
+  var initialColumnWidth = Math.max(_constants3.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / columnNum));
+  var emptyColumn = {
+    id: _slugid["default"].nice(),
+    type: _constants2.ELEMENT_TYPE.COLUMN,
+    width: initialColumnWidth,
+    children: [{
+      id: _slugid["default"].nice(),
+      type: _constants2.PARAGRAPH,
+      children: [{
+        text: '',
+        id: _slugid["default"].nice()
+      }]
+    }]
+  };
+  return emptyColumn;
+};
+var addLastColumnInMultiColumn = exports.addLastColumnInMultiColumn = function addLastColumnInMultiColumn(editor, topTargetNode, targetPath) {
+  var columnsNum = topTargetNode.children.length + 1;
+  var currentPageWidth = getCurrentPageWidth(editor) + _constants3.LAST_COLUMN_MARGIN_RIGHT_WIDTH;
+  var initialColumnWidth = Math.max(_constants3.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / columnsNum));
+  var newEmptyColumn = generateEmptyColumn(editor, columnsNum);
+
+  // Insert last column
+  var middleColumn = [].concat((0, _toConsumableArray2["default"])(topTargetNode.column), [{
+    key: newEmptyColumn.id,
+    width: initialColumnWidth
+  }]);
+
+  // Recalculate width of every left column
+  var newColumn = middleColumn.map(function (column, index) {
+    return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
+      left: index * initialColumnWidth,
+      width: initialColumnWidth
+    });
+  });
+  _slate.Transforms.setNodes(editor, {
+    column: newColumn,
+    style: {
+      gridTemplateColumns: "repeat(".concat(columnsNum, ", ").concat(initialColumnWidth, "px)")
+    }
+  }, {
+    at: [targetPath[0]]
+  });
+  _slate.Transforms.insertNodes(editor, newEmptyColumn, {
+    at: [targetPath[0], targetPath[1] + 1]
+  });
+};
+var addMiddleColumnInMultiColumn = exports.addMiddleColumnInMultiColumn = function addMiddleColumnInMultiColumn(editor, topTargetNode, targetPath) {
+  var columnNum = topTargetNode.children.length + 1;
+  var currentPageWidth = getCurrentPageWidth(editor) + _constants3.LAST_COLUMN_MARGIN_RIGHT_WIDTH;
+  var initialColumnWidth = Math.max(_constants3.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / columnNum));
+  var insertedEmptyColumn = generateEmptyColumn(editor, columnNum);
+
+  // Insert middle column
+  var insertIndex = targetPath[1];
+  var middleColumn = [].concat((0, _toConsumableArray2["default"])(topTargetNode.column.slice(0, insertIndex)), [{
+    key: insertedEmptyColumn.id,
+    width: initialColumnWidth
+  }], (0, _toConsumableArray2["default"])(topTargetNode.column.slice(insertIndex)));
+  // Recalculate width of every left column
+  var newColumn = middleColumn.map(function (column, index) {
+    return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
+      left: index * initialColumnWidth,
+      width: initialColumnWidth
+    });
+  });
+  _slate.Transforms.setNodes(editor, {
+    column: newColumn,
+    style: {
+      gridTemplateColumns: "repeat(".concat(newColumn.length, ", ").concat(initialColumnWidth, "px)")
+    }
+  }, {
+    at: [targetPath[0]]
+  });
+  _slate.Transforms.insertNodes(editor, insertedEmptyColumn, {
+    at: [targetPath[0], targetPath[1]]
+  });
+};
 var updateColumnWidth = exports.updateColumnWidth = function updateColumnWidth(editor, element, column, newPath) {
   var path = (0, _core.findPath)(editor, element, newPath);
   var gridTemplateColumns = column.map(function (column) {
@@ -154,7 +235,7 @@ var updateColumnWidthOnDeletion = exports.updateColumnWidthOnDeletion = function
   var remainingColumn = column.filter(function (_, index) {
     return index !== targetColumnIndex;
   });
-  var currentPageWidth = getCurrentPageWidth(editor);
+  var currentPageWidth = getCurrentPageWidth(editor) + _constants3.LAST_COLUMN_MARGIN_RIGHT_WIDTH;
   var columnWidth = Math.max(_constants3.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / remainingColumn.length));
 
   // Recalculate width of every left column

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setSelection = exports.onWrapMultiListItemToNonListTypeTarget = exports.onWrapMultiListItem = exports.onWrapListItemFromMultiColumn = exports.onWrapListItem = exports.onSetNodeType = exports.onDeleteNode = exports.onCopyNode = exports.normalizeCopyData = exports.isNotSupportTransform = exports.isMultiColumn = exports.isListItem = exports.isList = exports.isInMultiColumnNode = exports.isBlockquote = exports.insertEmptyListNodeAtTarget = exports.insertElement = exports.getTransformMenusConfig = exports.getTopValue = exports.getSearchedOperations = exports.getNodeEntry = exports.getListNodeFromMultiColumn = exports.getListNode = exports.deleteNodesFromBack = exports.createDragPreviewContainer = void 0;
+exports.wrapIntoMultiColumn = exports.setSelection = exports.onWrapMultiListItemToNonListTypeTarget = exports.onWrapMultiListItem = exports.onWrapListItemFromMultiColumn = exports.onWrapListItem = exports.onSetNodeType = exports.onDeleteNode = exports.onCopyNode = exports.normalizeCopyData = exports.isNotSupportTransform = exports.isMultiColumn = exports.isListItem = exports.isList = exports.isInMultiColumnNode = exports.isBlockquote = exports.insertEmptyListNodeAtTarget = exports.insertElement = exports.getTransformMenusConfig = exports.getTopValue = exports.getSearchedOperations = exports.getNodeEntry = exports.getListNodeFromMultiColumn = exports.getListNode = exports.deleteNodesFromBack = exports.createDragPreviewContainer = exports.clearDragClass = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _slate = require("@seafile/slate");
@@ -272,6 +272,7 @@ var insertElement = exports.insertElement = function insertElement(editor, type,
   }
 };
 var getNodeEntry = exports.getNodeEntry = function getNodeEntry(editor, el) {
+  if (!el) return [];
   var node = _slateReact.ReactEditor.toSlateNode(editor, el);
   var path = _slateReact.ReactEditor.findPath(editor, node);
   if (isList(editor, path)) {
@@ -501,4 +502,26 @@ var normalizeCopyData = exports.normalizeCopyData = function normalizeCopyData(e
   var newData = (0, _helpers.replacePastedDataId)(parsed);
   var normalizeNewData = (0, _documentUtils.normalizeCopyNodes)(editor, newData);
   return normalizeNewData;
+};
+var clearDragClass = exports.clearDragClass = function clearDragClass(el) {
+  if (!el) return;
+  el.classList.remove('sdoc-dragging-right', 'sdoc-dragging-left', 'sdoc-dragging');
+};
+var wrapIntoMultiColumn = exports.wrapIntoMultiColumn = function wrapIntoMultiColumn(editor, leftNode, rightNode, targetPath) {
+  var emptyMultiColumnNode = (0, _helper2.generateEmptyMultiColumn)(editor, _constants2.TWO_COLUMN);
+  _slate.Transforms.insertNodes(editor, emptyMultiColumnNode, {
+    at: [targetPath[0]]
+  });
+  _slate.Transforms.insertNodes(editor, leftNode, {
+    at: [targetPath[0], 0, 0]
+  });
+  _slate.Transforms.insertNodes(editor, rightNode, {
+    at: [targetPath[0], 1, 0]
+  });
+  _slate.Transforms.removeNodes(editor, {
+    at: [targetPath[0], 0, 1]
+  });
+  _slate.Transforms.removeNodes(editor, {
+    at: [targetPath[0], 1, 1]
+  });
 };

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

@@ -65,6 +65,7 @@ var SideToolbar = function SideToolbar() {
   var selectedNodesRef = (0, _react.useRef)(null);
   var showSelectedNodesRef = (0, _react.useRef)(null);
   var draggedPreviewContainer = (0, _react.useRef)(null);
+  var activeDragElRef = (0, _react.useRef)(null);
   var onReset = (0, _react.useCallback)(function () {
     setShowSideMenu(false);
     setMenuPosition({});
@@ -300,18 +301,18 @@ var SideToolbar = function SideToolbar() {
     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');
+    if (!overElement.classList.contains('sdoc-dragging')) {
+      overElement.classList.add('sdoc-dragging');
     }
   }, []);
   var dragLeave = (0, _react.useCallback)(function (event) {
     var leaveElement = event.currentTarget;
-    leaveElement.classList.remove('sdoc-draging');
+    leaveElement.classList.remove('sdoc-dragging');
   }, []);
   var drop = (0, _react.useCallback)(function (event) {
     var _parentNode$children$;
     targetElement = event.currentTarget;
-    targetElement.classList.remove('sdoc-draging');
+    targetElement.classList.remove('sdoc-dragging');
     var dragTypes = event.dataTransfer.types;
     if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT) && dragTypes[0] !== 'Files') return;
 
@@ -343,7 +344,7 @@ var SideToolbar = function SideToolbar() {
         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
+        // Drag into list nods in 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);
@@ -604,6 +605,201 @@ var SideToolbar = function SideToolbar() {
   var onMouseLeave = (0, _react.useCallback)(function () {
     setIsEnterMoreVertical(false);
   }, []);
+  var handleDragover = (0, _react.useCallback)(function (event) {
+    var _target, _target2, _target3, _target4, _target5;
+    event.preventDefault();
+    var _getNodeEntry7 = (0, _helpers2.getNodeEntry)(editor, sourceElement),
+      _getNodeEntry8 = (0, _slicedToArray2["default"])(_getNodeEntry7, 2),
+      sourceNode = _getNodeEntry8[0],
+      sourcePath = _getNodeEntry8[1];
+    if (!sourceNode || !sourcePath) return;
+
+    // Not support node type in multi column
+    if ([_constants2.TABLE, _constants2.VIDEO, _constants2.CODE_BLOCK, _constants2.WHITEBOARD, _constants2.FILE_VIEW, _constants2.FORMULA].includes(sourceNode.type)) return;
+    // Return if source node is from multi column
+    var topNode = _slate.Node.get(editor, [sourcePath[0]]);
+    if ([_constants2.MULTI_COLUMN].includes(topNode.type)) return;
+
+    // Cursor position
+    var x = event.clientX;
+    var y = event.clientY;
+    var editorContainer = event.currentTarget;
+    var containerRect = editorContainer.getBoundingClientRect();
+
+    // Current visible area of editor container
+    var visibleTop = Math.max(containerRect.top, 0);
+    var visibleBottom = Math.min(containerRect.bottom, window.innerHeight);
+    var target = null;
+
+    // Get target element where cursor is close to
+    var _iterator2 = (0, _createForOfIteratorHelper2["default"])(editorContainer.querySelectorAll('[data-root="true"]')),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var el = _step2.value;
+        var rect = el.getBoundingClientRect();
+        if (rect.bottom < visibleTop) continue;
+        if (rect.top > visibleBottom) break;
+        if (y > rect.top && y < rect.bottom) {
+          target = {
+            el: el,
+            rect: rect
+          };
+          break;
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    if (!((_target = target) !== null && _target !== void 0 && _target.el)) return;
+    var prevEl = activeDragElRef.current;
+    if (prevEl && prevEl !== target.el) {
+      (0, _helpers2.clearDragClass)(prevEl);
+    }
+    if (((_target2 = target) === null || _target2 === void 0 ? void 0 : _target2.el) === sourceElement) return;
+    var _getNodeEntry9 = (0, _helpers2.getNodeEntry)(editor, (_target3 = target) === null || _target3 === void 0 ? void 0 : _target3.el),
+      _getNodeEntry0 = (0, _slicedToArray2["default"])(_getNodeEntry9, 2),
+      targetNode = _getNodeEntry0[0],
+      targetPath = _getNodeEntry0[1];
+
+    // Not support node type in multi column
+    if ([_constants2.TABLE, _constants2.VIDEO, _constants2.CODE_BLOCK, _constants2.WHITEBOARD, _constants2.FILE_VIEW, _constants2.FORMULA].includes(targetNode.type)) return;
+    if (!targetNode || targetPath.length === 0 && ![_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(targetNode.type)) return;
+
+    // Stop if target node is multi column node with four columns
+    if (targetNode.type === _constants2.MULTI_COLUMN && targetNode.children.length === 4) return;
+
+    // Add hover style for target node multi column children
+    if (targetNode.type === _constants2.MULTI_COLUMN) {
+      var multiColumnEl = target.el;
+      var columnEls = multiColumnEl.querySelectorAll('.sdoc-column-container');
+      if (!columnEls.length) return;
+      columnEls.forEach(function (col) {
+        return col.classList.remove('sdoc-dragging-left', 'sdoc-dragging', 'sdoc-dragging-right');
+      });
+      var preColRect = null;
+      columnEls.forEach(function (colEl, index) {
+        var rect = colEl.getBoundingClientRect();
+        if (x < rect.left && index === 0) {
+          colEl.classList.add('sdoc-dragging-left');
+          activeDragElRef.current = colEl;
+        }
+        if (preColRect && x < rect.left && x > preColRect.right) {
+          colEl.classList.add('sdoc-dragging-left');
+          activeDragElRef.current = colEl;
+        }
+        if (x > rect.right && index === columnEls.length - 1) {
+          colEl.classList.add('sdoc-dragging-right');
+          activeDragElRef.current = colEl;
+        }
+        preColRect = rect;
+      });
+      return;
+    }
+
+    // Add hover style for target node as non-multi column children
+    var isLeftOutside = x < ((_target4 = target) === null || _target4 === void 0 ? void 0 : _target4.rect.left);
+    var isRightOutside = x > ((_target5 = target) === null || _target5 === void 0 ? void 0 : _target5.rect.right);
+    if (isLeftOutside && !target.el.classList.contains('sdoc-dragging-left')) {
+      target.el.classList.add('sdoc-dragging-left');
+      target.el.classList.remove('sdoc-dragging-right');
+      target.el.classList.remove('sdoc-dragging');
+    }
+    if (isRightOutside && !target.el.classList.contains('sdoc-dragging-right')) {
+      target.el.classList.add('sdoc-dragging-right');
+      target.el.classList.remove('sdoc-dragging-left');
+      target.el.classList.remove('sdoc-dragging');
+    }
+    activeDragElRef.current = target.el;
+  }, [editor]);
+  var clearAllDragStyles = (0, _react.useCallback)(function () {
+    var el = activeDragElRef.current;
+    (0, _helpers2.clearDragClass)(el);
+    activeDragElRef.current = null;
+  }, []);
+  var handleDrop = (0, _react.useCallback)(function () {
+    var targetEl = activeDragElRef.current;
+    var _getNodeEntry1 = (0, _helpers2.getNodeEntry)(editor, targetEl),
+      _getNodeEntry10 = (0, _slicedToArray2["default"])(_getNodeEntry1, 2),
+      targetNode = _getNodeEntry10[0],
+      targetPath = _getNodeEntry10[1];
+    var _getNodeEntry11 = (0, _helpers2.getNodeEntry)(editor, sourceElement),
+      _getNodeEntry12 = (0, _slicedToArray2["default"])(_getNodeEntry11, 2),
+      sourceNode = _getNodeEntry12[0],
+      sourcePath = _getNodeEntry12[1];
+    if (!targetPath || !sourcePath) return;
+
+    // When source node is list child, it is equal to drag top list node
+    var topSourceNode = _slate.Node.get(editor, [sourcePath[0]]);
+    if ([_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(topSourceNode.type)) {
+      sourceNode = topSourceNode;
+    }
+
+    // Drop non-multi column into multi column situation
+    if (_constants2.COLUMN === targetNode.type) {
+      var topTargetNode = _slate.Node.get(editor, [targetPath[0]]); // Top multi column Node
+      // Insert source node into last of multi column
+      if (targetEl.classList.contains('sdoc-dragging-right')) {
+        (0, _helper2.addLastColumnInMultiColumn)(editor, topTargetNode, targetPath);
+        _slate.Transforms.moveNodes(editor, {
+          at: [sourcePath[0]],
+          to: [targetPath[0], targetPath[1] + 1, 0]
+        });
+      }
+      // Insert source node into middle of multi column
+      if (targetEl.classList.contains('sdoc-dragging-left')) {
+        (0, _helper2.addMiddleColumnInMultiColumn)(editor, topTargetNode, targetPath);
+        _slate.Transforms.moveNodes(editor, {
+          at: [sourcePath[0]],
+          to: [targetPath[0], targetPath[1], 0]
+        });
+      }
+      return;
+    }
+
+    // Drop non-multi column into non-multi column situation
+    // When target node is list, get real list path
+    if ([_constants2.ORDERED_LIST, _constants2.UNORDERED_LIST].includes(targetNode.type)) {
+      targetPath = _slateReact.ReactEditor.findPath(editor, targetNode);
+    }
+    if (_slate.Path.equals([sourcePath[0]], [targetPath[0]])) return;
+    var leftNode = null;
+    var rightNode = null;
+    if (targetEl.classList.contains('sdoc-dragging-left')) {
+      leftNode = sourceNode;
+      rightNode = targetNode;
+    } else if (targetEl.classList.contains('sdoc-dragging-right')) {
+      leftNode = targetNode;
+      rightNode = sourceNode;
+    } else {
+      return;
+    }
+
+    // Form multi column first and then remove source and target node
+    (0, _helpers2.wrapIntoMultiColumn)(editor, leftNode, rightNode, targetPath);
+    _slate.Transforms.removeNodes(editor, {
+      at: _slate.Path.next([targetPath[0]])
+    });
+    _slate.Transforms.removeNodes(editor, {
+      at: [sourcePath[0]]
+    });
+    return;
+  }, [editor]);
+  (0, _react.useEffect)(function () {
+    var editorContainer = document.querySelector('.sdoc-article-container');
+    editorContainer.addEventListener('dragover', handleDragover);
+    editorContainer.addEventListener('dragend', clearAllDragStyles);
+    editorContainer.addEventListener('dragleave', clearAllDragStyles);
+    editorContainer.addEventListener('drop', handleDrop);
+    return function () {
+      editorContainer.removeEventListener('dragover', handleDragover);
+      editorContainer.removeEventListener('dragend', clearAllDragStyles);
+      editorContainer.removeEventListener('dragleave', clearAllDragStyles);
+      editorContainer.removeEventListener('drop', handleDrop);
+    };
+  }, [handleDragover, clearAllDragStyles, handleDrop]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !_commonUtils.isMobile && /*#__PURE__*/_react["default"].createElement("div", {
     onAnimationEnd: function onAnimationEnd() {
       return setIsMoving(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.81",
+  "version": "3.0.82",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "727907e6da29358bc27ca2ed7ba0b38886b36ab7"
+  "gitHead": "48881a70148e952676a5ae0da8d560743dc887da"
 }