@seafile/sdoc-editor 3.0.245 → 3.0.246

package/dist/extension/constants/menus-config.js

@@ -329,6 +329,11 @@ var SIDE_INSERT_MENUS_CONFIG = exports.SIDE_INSERT_MENUS_CONFIG = (_SIDE_INSERT_
   id: '',
   iconClass: 'sdocfont sdoc-callout',
   text: 'Callout'
+}), _elementType.DIVIDER, {
+  id: 'sdoc-side-menu-item-divider',
+  iconClass: 'sdocfont sdoc-divider',
+  type: _elementType.DIVIDER,
+  text: 'Divider'
 }), _elementType.ORDERED_LIST, {
   id: '',
   iconClass: 'sdocfont sdoc-list-ol',
@@ -339,12 +344,12 @@ var SIDE_INSERT_MENUS_CONFIG = exports.SIDE_INSERT_MENUS_CONFIG = (_SIDE_INSERT_
   iconClass: 'sdocfont sdoc-list-ul',
   type: _elementType.UNORDERED_LIST,
   text: 'Unordered_list'
-}), _elementType.CHECK_LIST_ITEM, {
+}), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_INSERT_MENUS_CO, _elementType.CHECK_LIST_ITEM, {
   id: '',
   iconClass: 'sdocfont sdoc-check-square',
   type: _elementType.CHECK_LIST_ITEM,
   text: 'Check_list'
-}), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_INSERT_MENUS_CO, _elementType.PARAGRAPH, {
+}), _elementType.PARAGRAPH, {
   id: _elementType.PARAGRAPH,
   iconClass: 'sdocfont sdoc-text',
   type: _elementType.PARAGRAPH,
@@ -405,8 +410,8 @@ var SIDE_INSERT_MENUS_CONFIG = exports.SIDE_INSERT_MENUS_CONFIG = (_SIDE_INSERT_
   type: _elementType.FORMULA,
   text: 'Formula'
 }));
-var SIDE_INSERT_MENUS_SEARCH_MAP = exports.SIDE_INSERT_MENUS_SEARCH_MAP = (_SIDE_INSERT_MENUS_SE = {}, (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"])(_SIDE_INSERT_MENUS_SE, _elementType.IMAGE, 'Image'), _elementType.VIDEO, 'Video'), _elementType.TABLE, 'Table'), _elementType.COLUMN, 'Column'), _elementType.TWO_COLUMN, 'Two_column'), _elementType.THREE_COLUMN, 'Three_column'), _elementType.FOUR_COLUMN, 'Four_column'), _elementType.LINK, 'Link'), _elementType.CODE_BLOCK, 'Code_block'), _elementType.CALL_OUT, 'Callout'), (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"])(_SIDE_INSERT_MENUS_SE, _elementType.UNORDERED_LIST, 'Unordered_list'), _elementType.ORDERED_LIST, 'Ordered_list'), _elementType.CHECK_LIST_ITEM, 'Check_list'), _elementType.PARAGRAPH, 'Paragraph'), _elementType.HEADER1, 'Header_one'), _elementType.HEADER2, 'Header_two'), _elementType.HEADER3, 'Header_three'), _elementType.HEADER4, 'Header_four'), _elementType.TOGGLE_HEADER1, 'Toggle_header_one'), _elementType.TOGGLE_HEADER2, 'Toggle_header_two'), (0, _defineProperty2["default"])(_SIDE_INSERT_MENUS_SE, _elementType.TOGGLE_HEADER3, 'Toggle_header_three'));
-var SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = exports.SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = (_SIDE_QUICK_INSERT_ME = {}, (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"])(_SIDE_QUICK_INSERT_ME, _elementType.IMAGE, 'Image'), _elementType.VIDEO, 'Video'), _elementType.TABLE, 'Table'), _elementType.COLUMN, 'Column'), _elementType.TWO_COLUMN, 'Two_column'), _elementType.THREE_COLUMN, 'Three_column'), _elementType.FOUR_COLUMN, 'Four_column'), _elementType.LINK, 'Link'), _elementType.CODE_BLOCK, 'Code_block'), _elementType.CALL_OUT, 'Callout'), (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"])(_SIDE_QUICK_INSERT_ME, _elementType.UNORDERED_LIST, 'Unordered_list'), _elementType.ORDERED_LIST, 'Ordered_list'), _elementType.CHECK_LIST_ITEM, 'Check_list'), _elementType.PARAGRAPH, 'Paragraph'), _elementType.HEADER1, 'Header_one'), _elementType.HEADER2, 'Header_two'), _elementType.HEADER3, 'Header_three'), _elementType.HEADER4, 'Header_four'), _elementType.FORMULA, 'Formula'), _elementType.TOGGLE_HEADER1, 'Toggle_header_one'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_QUICK_INSERT_ME, _elementType.TOGGLE_HEADER2, 'Toggle_header_two'), _elementType.TOGGLE_HEADER3, 'Toggle_header_three'), _elementType.EMBED_LINK, 'Embed_link'));
+var SIDE_INSERT_MENUS_SEARCH_MAP = exports.SIDE_INSERT_MENUS_SEARCH_MAP = (_SIDE_INSERT_MENUS_SE = {}, (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"])(_SIDE_INSERT_MENUS_SE, _elementType.IMAGE, 'Image'), _elementType.VIDEO, 'Video'), _elementType.TABLE, 'Table'), _elementType.COLUMN, 'Column'), _elementType.TWO_COLUMN, 'Two_column'), _elementType.THREE_COLUMN, 'Three_column'), _elementType.FOUR_COLUMN, 'Four_column'), _elementType.LINK, 'Link'), _elementType.CODE_BLOCK, 'Code_block'), _elementType.CALL_OUT, 'Callout'), (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"])(_SIDE_INSERT_MENUS_SE, _elementType.DIVIDER, 'Divider'), _elementType.UNORDERED_LIST, 'Unordered_list'), _elementType.ORDERED_LIST, 'Ordered_list'), _elementType.CHECK_LIST_ITEM, 'Check_list'), _elementType.PARAGRAPH, 'Paragraph'), _elementType.HEADER1, 'Header_one'), _elementType.HEADER2, 'Header_two'), _elementType.HEADER3, 'Header_three'), _elementType.HEADER4, 'Header_four'), _elementType.TOGGLE_HEADER1, 'Toggle_header_one'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_INSERT_MENUS_SE, _elementType.TOGGLE_HEADER2, 'Toggle_header_two'), _elementType.TOGGLE_HEADER3, 'Toggle_header_three'));
+var SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = exports.SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = (_SIDE_QUICK_INSERT_ME = {}, (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"])(_SIDE_QUICK_INSERT_ME, _elementType.IMAGE, 'Image'), _elementType.VIDEO, 'Video'), _elementType.TABLE, 'Table'), _elementType.COLUMN, 'Column'), _elementType.TWO_COLUMN, 'Two_column'), _elementType.THREE_COLUMN, 'Three_column'), _elementType.FOUR_COLUMN, 'Four_column'), _elementType.LINK, 'Link'), _elementType.CODE_BLOCK, 'Code_block'), _elementType.CALL_OUT, 'Callout'), (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"])(_SIDE_QUICK_INSERT_ME, _elementType.DIVIDER, 'Divider'), _elementType.UNORDERED_LIST, 'Unordered_list'), _elementType.ORDERED_LIST, 'Ordered_list'), _elementType.CHECK_LIST_ITEM, 'Check_list'), _elementType.PARAGRAPH, 'Paragraph'), _elementType.HEADER1, 'Header_one'), _elementType.HEADER2, 'Header_two'), _elementType.HEADER3, 'Header_three'), _elementType.HEADER4, 'Header_four'), _elementType.FORMULA, 'Formula'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_QUICK_INSERT_ME, _elementType.TOGGLE_HEADER1, 'Toggle_header_one'), _elementType.TOGGLE_HEADER2, 'Toggle_header_two'), _elementType.TOGGLE_HEADER3, 'Toggle_header_three'), _elementType.EMBED_LINK, 'Embed_link'));
 
 // Other operations menu config
 var SIDE_OTHER_OPERATIONS_MENUS_SEARCH_MAP = exports.SIDE_OTHER_OPERATIONS_MENUS_SEARCH_MAP = {

package/dist/extension/toolbar/quick-insert-toolbar/index.js

@@ -323,7 +323,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
     }, t('Add_video_link')), editor.editorType !== _constants.WIKI_EDITOR && /*#__PURE__*/_react["default"].createElement("div", {
       className: "sdoc-dropdown-menu-item",
       onClick: openSelectVideoFileDialog
-    }, t('Link_video_file'))))))), {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants2.TABLE,
+    }, t('Link_video_file'))))))), {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants2.TABLE,
     /*#__PURE__*/
     // eslint-disable-next-line react/jsx-indent
     _react["default"].createElement(_dropdownMenuItem["default"], {
@@ -369,6 +369,13 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
       onClick: function onClick() {
         return onInsertCallout(_constants2.PARAGRAPH);
       }
+    })), _constants2.ELEMENT_TYPE.DIVIDER, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+      isHidden: !quickInsertMenuSearchMap[_constants2.ELEMENT_TYPE.DIVIDER],
+      key: "sdoc-insert-menu-divider",
+      menuConfig: (0, _objectSpread5["default"])({}, _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.DIVIDER]),
+      onClick: function onClick() {
+        return onInsert(_constants2.ELEMENT_TYPE.DIVIDER);
+      }
     })), _constants2.FORMULA, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
       isHidden: !quickInsertMenuSearchMap[_constants2.FORMULA],
       disabled: isDisableFormula,

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

@@ -26,6 +26,7 @@ var _event = require("./event");
 var _helpers2 = require("./helpers");
 var _sideMenu = _interopRequireDefault(require("./side-menu"));
 require("./index.css");
+var HORIZONTAL_DROP_ZONE_WIDTH = 48;
 var sourceElement = null;
 var targetElement = null;
 var SideToolbar = function SideToolbar() {
@@ -606,7 +607,7 @@ var SideToolbar = function SideToolbar() {
     setIsEnterMoreVertical(false);
   }, []);
   var handleDragover = (0, _react.useCallback)(function (event) {
-    var _target, _target2, _target3, _target4, _target5;
+    var _target, _target2, _target3;
     event.preventDefault();
     var _getNodeEntry7 = (0, _helpers2.getNodeEntry)(editor, sourceElement),
       _getNodeEntry8 = (0, _slicedToArray2["default"])(_getNodeEntry7, 2),
@@ -671,48 +672,59 @@ var SideToolbar = function SideToolbar() {
     // 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
+    // Add hover style for target node multi column children.
+    // Only use a fixed-width zone around each column boundary so the drop
+    // direction is predictable instead of depending on an arbitrary x value.
     if (targetNode.type === _constants2.MULTI_COLUMN) {
       var multiColumnEl = target.el;
-      var columnEls = multiColumnEl.querySelectorAll('.sdoc-column-container');
+      var columnEls = Array.from(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;
+      var activeColumn = null;
+      var activeDirection = null;
+      var previousRect = 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;
+        var leftZoneStart = index === 0 ? rect.left - HORIZONTAL_DROP_ZONE_WIDTH : Math.max(previousRect.right, rect.left - HORIZONTAL_DROP_ZONE_WIDTH);
+        if (x >= leftZoneStart && x < rect.left) {
+          activeColumn = colEl;
+          activeDirection = 'left';
         }
-        if (preColRect && x < rect.left && x > preColRect.right) {
-          colEl.classList.add('sdoc-dragging-left');
-          activeDragElRef.current = colEl;
+        if (index === columnEls.length - 1 && x > rect.right && x <= rect.right + HORIZONTAL_DROP_ZONE_WIDTH) {
+          activeColumn = colEl;
+          activeDirection = 'right';
         }
-        if (x > rect.right && index === columnEls.length - 1) {
-          colEl.classList.add('sdoc-dragging-right');
-          activeDragElRef.current = colEl;
-        }
-        preColRect = rect;
+        previousRect = rect;
       });
+      if (activeColumn) {
+        activeColumn.classList.add("sdoc-dragging-".concat(activeDirection));
+        activeDragElRef.current = activeColumn;
+      } else {
+        activeDragElRef.current = null;
+      }
       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')) {
+    // Add hover style for target node as non-multi column children.
+    // The drop zones are placed immediately outside the left and right edges
+    // of the target block, keeping the center area available for normal drag.
+    var isLeftDropZone = x >= target.rect.left - HORIZONTAL_DROP_ZONE_WIDTH && x < target.rect.left;
+    var isRightDropZone = x > target.rect.right && x <= target.rect.right + HORIZONTAL_DROP_ZONE_WIDTH;
+    if (isLeftDropZone) {
       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')) {
+      activeDragElRef.current = target.el;
+    } else if (isRightDropZone) {
       target.el.classList.add('sdoc-dragging-right');
       target.el.classList.remove('sdoc-dragging-left');
       target.el.classList.remove('sdoc-dragging');
+      activeDragElRef.current = target.el;
+    } else {
+      activeDragElRef.current = null;
     }
-    activeDragElRef.current = target.el;
   }, [editor]);
   var clearAllDragStyles = (0, _react.useCallback)(function () {
     var el = activeDragElRef.current;

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

@@ -236,6 +236,12 @@ var InsertBlockMenu = function InsertBlockMenu(_ref) {
     onClick: function onClick() {
       return onInsertCallout(_constants2.PARAGRAPH);
     }
+  }), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    isHidden: !insertMenuSearchMap[_constants2.ELEMENT_TYPE.DIVIDER],
+    menuConfig: (0, _objectSpread2["default"])({}, _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.DIVIDER]),
+    onClick: function onClick() {
+      return onInsert(_constants2.ELEMENT_TYPE.DIVIDER);
+    }
   }), _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.MULTI_COLUMN].map(function (item) {
     return /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
       isHidden: !insertMenuSearchMap[item.type],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.245",
+  "version": "3.0.246",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5923b1242461ceefc159405339b40a622343e318"
+  "gitHead": "97f53b824e9f6a38da872969d632dcd238c4b947"
 }