@seafile/sdoc-editor 0.3.5 → 0.3.6

package/dist/basic-sdk/assets/css/layout.css

@@ -68,6 +68,18 @@
   caret-color: blue;
 }
 
+.sdoc-editor-container .sdoc-editor-content .article .sdoc-drag-cover::before {
+  content: ' ';
+  width: 59px;
+  display: inline-block;
+  position: absolute;
+  left: -60px;
+}
+
+.sdoc-editor-container .sdoc-editor-content .article .sdoc-draging {
+  border-bottom: 2px solid rgba(35,131,226);
+}
+
 .sdoc-editor-container .seafile-block-container {
   position: relative;
 }

package/dist/basic-sdk/constants/index.js

@@ -3,6 +3,9 @@ export var INTERNAL_EVENT = {
   SET_TABLE_SELECT_RANGE: 'set_table_select_range',
   HIDDEN_CODE_BLOCK_HOVER_MENU: 'hidden_code_block_hover_menu',
   ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block',
+  ON_DRAG_OVER_BLOCK: 'on_drag_over_block',
+  ON_DRAG_LEAVE_BLOCK: 'on_drag_leave_block',
+  ON_DRAG_DROP_BLOCK: 'on_drag_drop_block',
   INSERT_ELEMENT: 'insert_element',
   OUTLINE_STATE_CHANGED: 'outline_state_changed',
   RELOAD_IMAGE: 'reload_image',

package/dist/basic-sdk/extension/constants/index.js

@@ -25,4 +25,5 @@ export var LIST_ITEM_CORRELATION_TYPE = [UNORDERED_LIST, ORDERED_LIST, LIST_ITEM
 export var LIST_ITEM_SUPPORTED_TRANSFORMATION = [UNORDERED_LIST, ORDERED_LIST, 'left', 'center', 'right', BLOCKQUOTE];
 export var ADD_POSITION_OFFSET_TYPE = [PARAGRAPH, SUBTITLE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, CHECK_LIST_ITEM];
 export var FILE_TYPE = (_FILE_TYPE = {}, _defineProperty(_FILE_TYPE, FILE_LINK, 'file'), _defineProperty(_FILE_TYPE, SDOC_LINK, 'sdoc'), _FILE_TYPE);
+export var SUPPORTED_SIDE_OPERATION_TYPE = [PARAGRAPH, SUBTITLE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, CHECK_LIST_ITEM, CODE_BLOCK, TABLE, BLOCKQUOTE];
 export { ELEMENT_TYPE, BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES };

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

@@ -1,5 +1,6 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Editor, Element, Point, Transforms, Node } from '@seafile/slate';
+import { Editor, Element, Point, Transforms, Node, Range } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
 import { generateEmptyElement, getSelectedNodeByType, isSelectionAtBlockStart } from '../../core';
 import { BLOCKQUOTE, PARAGRAPH, CODE_BLOCK, TABLE } from '../../constants';
@@ -56,6 +57,29 @@ var withBlockquote = function withBlockquote(editor) {
         setBlockQuoteType(editor, PARAGRAPH);
         return;
       }
+      if (unit === 'line' && Range.isCollapsed(selection)) {
+        var quoteString = Node.string(node);
+        for (var index = selection.anchor.offset; index > 1; index--) {
+          var char = quoteString.slice(index - 1, index);
+          if (char === '\n') {
+            var deleteRange = selection.anchor.offset === index ? _objectSpread(_objectSpread({}, selection), {}, {
+              anchor: _objectSpread(_objectSpread({}, selection.anchor), {}, {
+                offset: index - 1
+              })
+            }) // cursor at beginning of line, delete \n
+            : _objectSpread(_objectSpread({}, selection), {}, {
+              anchor: _objectSpread(_objectSpread({}, selection.anchor), {}, {
+                offset: index
+              })
+            }); // cursor at middle or end of line, save \n
+            Transforms.delete(editor, {
+              at: deleteRange
+            });
+            return;
+          }
+        }
+        deleteBackward(unit);
+      }
     }
     deleteBackward(unit);
   };

package/dist/basic-sdk/extension/plugins/code-block/render-elem.js

@@ -132,7 +132,7 @@ var CodeBlock = function CodeBlock(_ref) {
     "data-id": element.id,
     "data-root": "true"
   }, attributes, {
-    className: 'sdoc-code-block-container',
+    className: "sdoc-code-block-container ".concat(attributes.className),
     onClick: onFocusCodeBlock,
     onMouseLeave: onMouseLeave
   }), /*#__PURE__*/React.createElement("pre", {

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

@@ -39,7 +39,8 @@ var renderListLic = function renderListLic(props, editor) {
     children = props.children,
     element = props.element;
   return /*#__PURE__*/React.createElement("div", Object.assign({
-    "data-id": element.id
+    "data-id": element.id,
+    "data-root": "true"
   }, attributes), children);
 };
 export { renderList, renderListItem, renderListLic };

package/dist/basic-sdk/extension/render/custom-element.js

@@ -1,33 +1,26 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { useCallback } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE } from '../constants';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE, SUPPORTED_SIDE_OPERATION_TYPE } from '../constants';
 import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin } from '../plugins';
-import EventBus from '../../utils/event-bus';
-import { INTERNAL_EVENT } from '../../constants';
+import { onMouseEnter, onDragOver, onDragLeave, onDrop } from '../toolbar/side-toolbar/event';
 import { getParentNode } from '../core';
 var CustomRenderElement = function CustomRenderElement(props) {
   var editor = useSlateStatic();
   var element = props.element,
     attributes = props.attributes;
-  var onMouseEnter = useCallback(function (event) {
-    event.stopPropagation();
-    var eventBus = EventBus.getInstance();
-    eventBus.dispatch(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, event);
-  }, []);
+  if (SUPPORTED_SIDE_OPERATION_TYPE.includes(element.type)) {
+    attributes['onMouseEnter'] = onMouseEnter;
+    attributes['onDragOver'] = onDragOver;
+    attributes['onDragLeave'] = onDragLeave;
+    attributes['onDrop'] = onDrop;
+    attributes['className'] = 'sdoc-drag-cover';
+  }
   switch (element.type) {
     case PARAGRAPH:
       {
-        var parentNode = getParentNode(editor.children, element.id);
-        if (parentNode && parentNode.type === LIST_ITEM) {
-          var _ParagraphPlugin$rend = _slicedToArray(ParagraphPlugin.renderElements, 1),
-            _renderParagraph = _ParagraphPlugin$rend[0];
-          return _renderParagraph(props);
-        }
-        attributes['onMouseEnter'] = onMouseEnter;
-        var _ParagraphPlugin$rend2 = _slicedToArray(ParagraphPlugin.renderElements, 1),
-          renderParagraph = _ParagraphPlugin$rend2[0];
+        var _ParagraphPlugin$rend = _slicedToArray(ParagraphPlugin.renderElements, 1),
+          renderParagraph = _ParagraphPlugin$rend[0];
         return renderParagraph(props);
       }
     case TITLE:
@@ -38,7 +31,6 @@ var CustomRenderElement = function CustomRenderElement(props) {
       }
     case SUBTITLE:
       {
-        attributes['onMouseEnter'] = onMouseEnter;
         var _HeaderPlugin$renderE2 = _slicedToArray(HeaderPlugin.renderElements, 2),
           renderSubtitle = _HeaderPlugin$renderE2[1];
         return renderSubtitle(props, editor);
@@ -50,7 +42,6 @@ var CustomRenderElement = function CustomRenderElement(props) {
     case HEADER5:
     case HEADER6:
       {
-        attributes['onMouseEnter'] = onMouseEnter;
         var _HeaderPlugin$renderE3 = _slicedToArray(HeaderPlugin.renderElements, 3),
           renderHeader = _HeaderPlugin$renderE3[2];
         return renderHeader(props, editor);
@@ -63,7 +54,6 @@ var CustomRenderElement = function CustomRenderElement(props) {
       }
     case BLOCKQUOTE:
       {
-        attributes['onMouseEnter'] = onMouseEnter;
         var _BlockquotePlugin$ren = _slicedToArray(BlockquotePlugin.renderElements, 1),
           renderBlockquote = _BlockquotePlugin$ren[0];
         return renderBlockquote(props, editor);
@@ -77,21 +67,18 @@ var CustomRenderElement = function CustomRenderElement(props) {
       }
     case LIST_ITEM:
       {
-        attributes['onMouseEnter'] = onMouseEnter;
         var _ListPlugin$renderEle2 = _slicedToArray(ListPlugin.renderElements, 2),
           renderListItem = _ListPlugin$renderEle2[1];
         return renderListItem(props, editor);
       }
     case CHECK_LIST_ITEM:
       {
-        attributes['onMouseEnter'] = onMouseEnter;
         var _CheckListPlugin$rend = _slicedToArray(CheckListPlugin.renderElements, 1),
           renderCheckListItem = _CheckListPlugin$rend[0];
         return renderCheckListItem(props, editor);
       }
     case CODE_BLOCK:
       {
-        attributes['onMouseEnter'] = onMouseEnter;
         var _CodeBlockPlugin$rend = _slicedToArray(CodeBlockPlugin.renderElements, 1),
           renderCodeBlock = _CodeBlockPlugin$rend[0];
         return renderCodeBlock(props, editor);
@@ -105,8 +92,8 @@ var CustomRenderElement = function CustomRenderElement(props) {
     case IMAGE:
       {
         var _editor$element_comme;
-        var _parentNode = getParentNode(editor.children, element.id);
-        var comments = ((_editor$element_comme = editor.element_comments_map) === null || _editor$element_comme === void 0 ? void 0 : _editor$element_comme[_parentNode.id]) || [];
+        var parentNode = getParentNode(editor.children, element.id);
+        var comments = ((_editor$element_comme = editor.element_comments_map) === null || _editor$element_comme === void 0 ? void 0 : _editor$element_comme[parentNode.id]) || [];
         var unresolvedComments = comments && comments.filter(function (item) {
           return !item.resolved;
         });
@@ -122,7 +109,6 @@ var CustomRenderElement = function CustomRenderElement(props) {
       }
     case ELEMENT_TYPE.TABLE:
       {
-        attributes['onMouseEnter'] = onMouseEnter;
         var _TablePlugin$renderEl = _slicedToArray(TablePlugin.renderElements, 1),
           renderTable = _TablePlugin$renderEl[0];
         return renderTable(props, editor);
@@ -153,9 +139,9 @@ var CustomRenderElement = function CustomRenderElement(props) {
       }
     default:
       {
-        var _ParagraphPlugin$rend3 = _slicedToArray(ParagraphPlugin.renderElements, 1),
-          _renderParagraph2 = _ParagraphPlugin$rend3[0];
-        return _renderParagraph2(props);
+        var _ParagraphPlugin$rend2 = _slicedToArray(ParagraphPlugin.renderElements, 1),
+          _renderParagraph = _ParagraphPlugin$rend2[0];
+        return _renderParagraph(props);
       }
   }
 };

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

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

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

@@ -1,9 +1,10 @@
-import { Transforms, Node, Editor, Element } from '@seafile/slate';
+import { Transforms, Node, Editor, Element, Path } from '@seafile/slate';
 import slugid from 'slugid';
 import { ReactEditor } from '@seafile/slate-react';
 import copy from 'copy-to-clipboard';
 import { toggleList } from '../../plugins/list/transforms';
 import { generateEmptyElement } from '../../core';
+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';
@@ -116,4 +117,57 @@ export var insertElement = function insertElement(editor, type, insertPosition)
   Transforms.setNodes(editor, {
     type: type
   });
+};
+export var getNodeEntry = function getNodeEntry(editor, el) {
+  var node = ReactEditor.toSlateNode(editor, el);
+  var 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) {
+  var _nodeEntry$;
+  var 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) {
+  var _nodeEntry$2;
+  var 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)) {
+      return true;
+    }
+  }
+  return false;
+};
+export var getListNode = function getListNode(editor, path) {
+  var 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);
+  listNode.children[0] = listItem;
+  return listNode;
+};
+export var onWrapListItem = function onWrapListItem(editor, targetPath, sourcePath) {
+  var nextPath = Path.next(targetPath);
+  var listNode = getListNode(editor, sourcePath);
+  Transforms.insertNodes(editor, listNode, {
+    at: nextPath
+  });
+  Transforms.removeNodes(editor, {
+    at: sourcePath
+  });
+  return;
 };

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

@@ -1,14 +1,18 @@
 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';
 import { ReactEditor, useSlateStatic } from '@seafile/slate-react';
+import SideMenu from './side-menu';
 import EventBus from '../../../utils/event-bus';
-import { focusEditor } from '../../core';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
+import { focusEditor } from '../../core';
+import { getDomTopHeight, setSelection, isVoidNode, getNodeEntry, isBlockquote, isList, onWrapListItem } from './helpers';
 import { INTERNAL_EVENT } from '../../../constants';
-import { getDomTopHeight, setSelection, isVoidNode } from './helpers';
-import SideMenu from './side-menu';
+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();
@@ -23,26 +27,20 @@ var SideToolbar = function SideToolbar() {
     setSidePosition = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isActive = _useState6[0],
-    setActive = _useState6[1];
+    isNodeEmpty = _useState6[0],
+    setNodeEmpty = _useState6[1];
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    isNodeEmpty = _useState8[0],
-    setNodeEmpty = _useState8[1];
-  var _useState9 = useState(false),
+    isShowSideMenu = _useState8[0],
+    setShowSideMenu = _useState8[1];
+  var _useState9 = useState({}),
     _useState10 = _slicedToArray(_useState9, 2),
-    isShowSideMenu = _useState10[0],
-    setShowSideMenu = _useState10[1];
-  var _useState11 = useState({}),
-    _useState12 = _slicedToArray(_useState11, 2),
-    menuPosition = _useState12[0],
-    setMenuPosition = _useState12[1];
+    menuPosition = _useState10[0],
+    setMenuPosition = _useState10[1];
   var onReset = useCallback(function () {
     setShowSideMenu(false);
     setMenuPosition({});
     setSlateNode(null);
-    setActive(false);
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(function () {
@@ -87,10 +85,6 @@ var SideToolbar = function SideToolbar() {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, isShowSideMenu, scrollRef]);
-  var onActiveToggle = useCallback(function () {
-    if (isShowSideMenu) return;
-    setActive(!isActive);
-  }, [isActive, isShowSideMenu]);
   var onShowSideMenuToggle = useCallback(function () {
     setSelection(editor, slateNode);
     var _menuRef$current$getB = menuRef.current.getBoundingClientRect(),
@@ -102,22 +96,156 @@ var SideToolbar = function SideToolbar() {
       left: left
     });
   }, [editor, isShowSideMenu, slateNode]);
-  var iconClass = classnames('sdocfont', {
-    'sdoc-more-vertical': !isActive && !isNodeEmpty,
-    'sdoc-more-vertical-right': isActive && !isNodeEmpty,
-    'sdoc-append': isNodeEmpty
-  });
+  var dragStart = useCallback(function (event) {
+    sourceElement = ReactEditor.toDOMNode(editor, slateNode);
+    var 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]]);
+      sourceElement = ReactEditor.toDOMNode(editor, nodeEntry[0]);
+    }
+    event.dataTransfer.setDragImage(sourceElement, 0, 0);
+  }, [editor, slateNode]);
+  var dragOver = useCallback(function (event) {
+    var overElement = event.currentTarget;
+    if (!overElement.classList.contains('sdoc-draging')) {
+      overElement.classList.add('sdoc-draging');
+    }
+  }, []);
+  var dragLeave = useCallback(function (event) {
+    var leaveElement = event.currentTarget;
+    leaveElement.classList.remove('sdoc-draging');
+  }, []);
+  var drop = useCallback(function (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];
+
+    // Dragging into a quoteBlock is not supported
+    if ([CODE_BLOCK, TABLE, BLOCKQUOTE].includes(sourceNode.type) && isBlockquote(editor, [targetPath[0]]) && targetPath.length > 1) {
+      return;
+    }
+
+    // Dragging into a list is not supported
+    if ([CODE_BLOCK, TABLE, BLOCKQUOTE, CHECK_LIST_ITEM].includes(sourceNode.type) && isList(editor, targetPath)) {
+      return;
+    }
+
+    // Drag list
+    if (isList(editor, sourcePath)) {
+      // ordinary list items
+      if (!isBlockquote(editor, [sourcePath[0]])) {
+        // Drag ordinary list items to places other than list and quoteBlock
+        if (!isList(editor, targetPath) && !isBlockquote(editor, [targetPath[0]])) {
+          onWrapListItem(editor, targetPath, sourcePath);
+          return;
+        }
+
+        // Drag ordinary list items into the quoteBlock
+        if (isBlockquote(editor, [targetPath[0]])) {
+          // Drag and drop ordinary list items onto the list within the quoteBlock
+          if (isList(editor, targetPath)) {
+            Transforms.moveNodes(editor, {
+              at: sourcePath,
+              to: Path.next(targetPath)
+            });
+            return;
+          }
+          onWrapListItem(editor, targetPath, sourcePath);
+          return;
+        }
+      }
+
+      // quoteBlock list items
+      if (isBlockquote(editor, [sourcePath[0]])) {
+        // Drag quoteBlock list items to places other than list and quoteBlock
+        if (!isList(editor, targetPath) && !isBlockquote(editor, [targetPath[0]])) {
+          onWrapListItem(editor, targetPath, sourcePath);
+          return;
+        }
+
+        // Drag quoteBlock list items into the quoteBlock
+        if (isBlockquote(editor, [targetPath[0]])) {
+          // Drag and drop ordinary list items onto the list within the quoteBlock
+          if (isList(editor, targetPath)) {
+            Transforms.moveNodes(editor, {
+              at: sourcePath,
+              to: Path.next(targetPath)
+            });
+            return;
+          }
+          onWrapListItem(editor, targetPath, sourcePath);
+          return;
+        }
+      }
+    }
+
+    // Drag backward
+    if (Path.isAfter(targetPath, sourcePath)) {
+      var toPath = targetPath.slice(0);
+
+      // Drag elements outside the quoteBlock into the quoteBlock
+      if (!isBlockquote(editor, [sourcePath[0]]) && isBlockquote(editor, [targetPath[0]]) && targetPath.length > 1) {
+        toPath = Path.next(targetPath);
+      }
+
+      // Drag into list
+      if (isList(editor, targetPath)) {
+        toPath = Path.next(targetPath);
+      }
+      Transforms.moveNodes(editor, {
+        at: sourcePath,
+        to: toPath
+      });
+    }
+
+    // Drag forward
+    if (Path.isBefore(targetPath, sourcePath)) {
+      var _toPath = Path.next(targetPath);
+      Transforms.moveNodes(editor, {
+        at: sourcePath,
+        to: _toPath
+      });
+    }
+
+    // reset
+    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 () {
+      unSubscribeDragOver();
+      unSubscribeDragLeave();
+      unSubscribeDrop();
+    };
+  }, [dragLeave, dragOver, drop]);
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-side-toolbar-container",
     style: sidePosition
   }, slateNode && /*#__PURE__*/React.createElement("div", {
     ref: menuRef,
+    draggable: true,
+    onDragStart: dragStart,
     className: "sdoc-side-op-icon",
-    onMouseEnter: onActiveToggle,
-    onMouseLeave: onActiveToggle,
     onClick: onShowSideMenuToggle
   }, /*#__PURE__*/React.createElement("span", {
-    className: iconClass
+    className: classnames('sdocfont', {
+      'sdoc-more-vertical': !isNodeEmpty,
+      'sdoc-append': isNodeEmpty
+    })
   })), isShowSideMenu && /*#__PURE__*/React.createElement(SideMenu, {
     slateNode: slateNode,
     isNodeEmpty: isNodeEmpty,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",