@seafile/sdoc-editor 0.1.81 → 0.1.82

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

@@ -57,10 +57,12 @@
 .sdoc-editor-container .article .image-size {
   display: inline-block;
   padding: 5px;
+  white-space: nowrap;
   height: 22px;
   position: absolute;
   bottom: -25px;
   left: 100%;
+  z-index: 1;
   transform: translateX(5px);
   border-radius: 3px;
   line-height: 12px;

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

@@ -120,4 +120,6 @@ export var ADDED_STYLE = {
   computed_bg_color: '#e6ffed',
   color: 'rgb(137, 181, 66)'
 };
+export var HEADER_TYPE_ARRAY = ['header1', 'header2', 'header3', 'header4', 'header5', 'header6'];
+export var LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
 export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD };

package/dist/basic-sdk/extension/core/queries/index.js

@@ -84,16 +84,28 @@ export var getSelectedNodeByType = function getSelectedNodeByType(editor, type)
     nodeEntry = _Editor$nodes2[0];
   return nodeEntry ? nodeEntry[0] : null;
 };
-export var getSelectedNodeEntryByType = function getSelectedNodeEntryByType(editor, type) {
+export var getSelectedNodeByTypes = function getSelectedNodeByTypes(editor, types) {
   var match = function match(n) {
-    return getNodeType(n) === type;
+    return types.includes(getNodeType(n));
   };
   var _Editor$nodes3 = Editor.nodes(editor, {
       match: match,
-      universal: false
+      universal: true
     }),
     _Editor$nodes4 = _slicedToArray(_Editor$nodes3, 1),
     nodeEntry = _Editor$nodes4[0];
+  return nodeEntry ? nodeEntry[0] : null;
+};
+export var getSelectedNodeEntryByType = function getSelectedNodeEntryByType(editor, type) {
+  var match = function match(n) {
+    return getNodeType(n) === type;
+  };
+  var _Editor$nodes5 = Editor.nodes(editor, {
+      match: match,
+      universal: false
+    }),
+    _Editor$nodes6 = _slicedToArray(_Editor$nodes5, 1),
+    nodeEntry = _Editor$nodes6[0];
   return nodeEntry ? nodeEntry : null;
 };
 export var getNodeEntries = function getNodeEntries(editor, options) {

package/dist/basic-sdk/extension/plugins/check-list/plugin.js

@@ -1,9 +1,9 @@
 import { Node, Range, Transforms } from '@seafile/slate';
 import { CHECK_LIST_ITEM, PARAGRAPH } from '../../constants';
-import { getSelectedNodeByType } from '../../core';
+import { generateDefaultText, getSelectedNodeByType } from '../../core';
 var withCheckList = function withCheckList(editor) {
   var insertBreak = editor.insertBreak,
-    deleteBackWord = editor.deleteBackWord;
+    deleteBackward = editor.deleteBackward;
   var newEditor = editor;
   newEditor.insertBreak = function () {
     var selection = newEditor.selection;
@@ -18,16 +18,25 @@ var withCheckList = function withCheckList(editor) {
     }
     if (Node.string(node).length === 0) {
       Transforms.setNodes(editor, {
-        type: PARAGRAPH
+        type: PARAGRAPH,
+        children: [generateDefaultText()]
       }, {
-        mode: 'highest'
+        at: node[1]
+      });
+      return;
+    }
+
+    // If it is check-list-item, handle your own business logic
+    if (Node.string(node).length > 0) {
+      Transforms.splitNodes(editor, {
+        always: true
       });
       return;
     }
     insertBreak();
     return;
   };
-  newEditor.deleteBackWord = function (unit) {
+  newEditor.deleteBackward = function (unit) {
     var selection = newEditor.selection;
     if (selection && Range.isCollapsed(selection)) {
       var selectedTodo = getSelectedNodeByType(editor, CHECK_LIST_ITEM);
@@ -35,15 +44,16 @@ var withCheckList = function withCheckList(editor) {
         // If the current todo has no text, it will be converted to a paragraph
         if (Node.string(selectedTodo).length === 0) {
           Transforms.setNodes(editor, {
-            type: PARAGRAPH
+            type: PARAGRAPH,
+            children: [generateDefaultText()]
           }, {
-            mode: 'highest'
+            at: selectedTodo[1]
           });
           return;
         }
       }
     }
-    deleteBackWord(unit);
+    deleteBackward(unit);
   };
   return newEditor;
 };

package/dist/basic-sdk/extension/plugins/header/menu/index.js

@@ -16,12 +16,15 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, HeaderMenu);
     _this = _super.call(this, props);
     _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideHeaderMenu);
+      document.addEventListener('click', _this.onHideHeaderMenu, true);
     };
     _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideHeaderMenu);
+      document.removeEventListener('click', _this.onHideHeaderMenu, true);
     };
-    _this.onHideHeaderMenu = function () {
+    _this.onHideHeaderMenu = function (e) {
+      var menu = _this.menu;
+      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
+      if (clickIsInMenu) return;
       _this.setState({
         isShowHeaderPopover: false
       }, function () {
@@ -65,8 +68,16 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
 
         // 执行命令
         setHeaderType(editor, newType);
+        _this.setState({
+          isShowHeaderPopover: false
+        }, function () {
+          _this.unregisterEventHandler();
+        });
       };
     };
+    _this.setMenuRef = function (ref) {
+      _this.menu = ref;
+    };
     _this.state = {
       isShowHeaderPopover: false
     };
@@ -92,6 +103,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
       }, t(HEADER_TITLE_MAP[headerType])), !disabled && /*#__PURE__*/React.createElement("span", {
         className: headerIconClass
       })), isShowHeaderPopover && /*#__PURE__*/React.createElement("div", {
+        ref: this.setMenuRef,
         className: "header-popover sdoc-dropdown-menu"
       }, /*#__PURE__*/React.createElement("div", {
         className: "sdoc-dropdown-menu-item",

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Editor, Element, Transforms } from '@seafile/slate';
-import { PARAGRAPH } from '../../constants';
-import { generateEmptyElement } from '../../core';
+import { Editor, Element, Transforms, Node } from '@seafile/slate';
+import { PARAGRAPH, HEADER_TYPE_ARRAY, LIST_TYPE_ARRAY } from '../../constants';
+import { generateEmptyElement, getSelectedNodeByTypes } from '../../core';
 var isSelectionAtLineEnd = function isSelectionAtLineEnd(editor, path) {
   var selection = editor.selection;
   if (!selection) return false;
@@ -9,7 +9,9 @@ var isSelectionAtLineEnd = function isSelectionAtLineEnd(editor, path) {
   return isAtLineEnd;
 };
 var withHeader = function withHeader(editor) {
-  var insertBreak = editor.insertBreak;
+  var insertBreak = editor.insertBreak,
+    insertFragment = editor.insertFragment,
+    insertText = editor.insertText;
   var newEditor = editor;
 
   // Rewrite insertBreak - insert paragraph when carriage return at the end of header
@@ -51,6 +53,20 @@ var withHeader = function withHeader(editor) {
       insertBreak();
     }
   };
+  newEditor.insertFragment = function (data) {
+    var headerNode = getSelectedNodeByTypes(editor, HEADER_TYPE_ARRAY);
+    var headerText = Node.string(headerNode || {
+      children: []
+    });
+    var isSingleListItem = data.length === 1 && data[0].children.length === 1 && LIST_TYPE_ARRAY.includes(data[0].type);
+    // Insert a list item when the header is empty, insert only the text
+    if (headerNode && headerText.length === 0 && isSingleListItem) {
+      var text = Node.string(data[0]);
+      insertText(text);
+      return;
+    }
+    return insertFragment(data);
+  };
   return newEditor;
 };
 export default withHeader;

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

@@ -26,7 +26,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
     };
     _this.onResizeStart = function (event) {
       event.preventDefault();
-      // event.stopPropagation();
+      event.stopPropagation();
       _this.setState({
         isResizing: true
       }, function () {

package/dist/basic-sdk/extension/plugins/table/helpers.js

@@ -464,4 +464,15 @@ export var getFirstTableCell = function getFirstTableCell(element) {
     tableCellElement = tableCellElement.parentNode;
   }
   return tableCellElement;
+};
+export var rowElementHasImage = function rowElementHasImage(element) {
+  if (!element) return false;
+  if (!Array.isArray(element.children) || element.children.length === 0) return false;
+  return element.children.some(function (child) {
+    if (child.type === ELEMENT_TYPE.IMAGE) return true;
+    if (ObjectUtils.hasProperty(child, 'children')) {
+      return rowElementHasImage(child);
+    }
+    return false;
+  });
 };

package/dist/basic-sdk/extension/plugins/table/render/table-header/rows-header/row-header.js

@@ -8,6 +8,7 @@ import { useResizeHandlersContext, useTableSelectedRangeContext } from '../../ho
 import { useScrollContext } from '../../../../../../hooks/use-scroll-context';
 import { ELEMENT_TYPE } from '../../../../../constants';
 import { findPath, getSelectedNodeByType } from '../../../../../core';
+import { rowElementHasImage } from '../../../helpers';
 var RowHeader = function RowHeader(_ref) {
   var _row$style;
   var row = _ref.row,
@@ -30,6 +31,18 @@ var RowHeader = function RowHeader(_ref) {
   var currentCellPath = currentCell ? findPath(editor, currentCell, [-1, -1]) : [-1, -1];
   var pathLength = currentCellPath.length;
   useEffect(function () {
+    if (rowElementHasImage(row)) {
+      var time = setTimeout(function () {
+        // There is a delay in image loading
+        var rowDom = ReactEditor.toDOMNode(editor, row);
+        if (!rowDom) return;
+        if (rowHeight === rowDom.clientHeight) return;
+        setRowHeight(rowDom.clientHeight);
+      }, 300);
+      return function () {
+        clearTimeout(time);
+      };
+    }
     var rowDom = ReactEditor.toDOMNode(editor, row);
     if (!rowDom) return;
     if (rowHeight === rowDom.clientHeight) return;

package/dist/basic-sdk/extension/plugins/text-align/menu/index.js

@@ -16,12 +16,15 @@ var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, TextAlignMenu);
     _this = _super.call(this, props);
     _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideTextAlignMenu);
+      document.addEventListener('click', _this.onHideTextAlignMenu, true);
     };
     _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideTextAlignMenu);
+      document.removeEventListener('click', _this.onHideTextAlignMenu, true);
     };
-    _this.onHideTextAlignMenu = function () {
+    _this.onHideTextAlignMenu = function (e) {
+      var menu = _this.menu;
+      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
+      if (clickIsInMenu) return;
       _this.setState({
         isDropdownMenuOpen: false
       }, function () {
@@ -60,6 +63,14 @@ var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
     _this.setType = function (type) {
       var editor = _this.props.editor;
       setAlignType(editor, type);
+      _this.setState({
+        isDropdownMenuOpen: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.setMenuRef = function (ref) {
+      _this.menu = ref;
     };
     _this.state = {
       isDropdownMenuOpen: false
@@ -89,6 +100,7 @@ var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
       }), !disabled && /*#__PURE__*/React.createElement("span", {
         className: caretIconClass
       })), isDropdownMenuOpen && /*#__PURE__*/React.createElement("div", {
+        ref: this.setMenuRef,
         className: "align-popover sdoc-dropdown-menu"
       }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(function (item, index) {
         return /*#__PURE__*/React.createElement("span", {

package/package.json

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