@seafile/sdoc-editor 2.0.81 → 2.0.83

package/dist/extension/plugins/multi-column/render/index.js

@@ -0,0 +1,98 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _helper = require("../helper");
+var _resizeHandlers = _interopRequireDefault(require("../resize-handlers"));
+var _multiColumnRoot = _interopRequireDefault(require("./multi-column-root"));
+require("./index.css");
+var MultiColumn = function MultiColumn(_ref) {
+  var className = _ref.className,
+    attributes = _ref.attributes,
+    children = _ref.children,
+    element = _ref.element;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var multiColumn = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(element.style ? (0, _objectSpread2["default"])({}, element.style) : {}),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  var multiColumnContainerClassName = (0, _classnames["default"])('sdoc-multicolumn-container', className);
+  var _useState3 = (0, _react.useState)((0, _helper.getCurrentPageWidth)(editor)),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    pageWidth = _useState4[0],
+    setPageWidth = _useState4[1];
+  var readOnly = (0, _slateReact.useReadOnly)();
+  var handleResizeColumn = function handleResizeColumn(newColumn) {
+    (0, _helper.updateColumnWidth)(editor, element, newColumn);
+  };
+  (0, _react.useEffect)(function () {
+    setPageWidth((0, _helper.getCurrentPageWidth)(editor));
+  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  , []);
+  (0, _react.useEffect)(function () {
+    var sdocEditorPage = document.getElementById('sdoc-editor');
+    if (!sdocEditorPage) return;
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var _entries$;
+      var newPageWidth = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.width;
+      // Check if sdocPageWidth changes
+      if (pageWidth && newPageWidth !== pageWidth) {
+        var scaleFactor = newPageWidth / pageWidth;
+        var updatedColumns = element.column.map(function (item) {
+          return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, item), {}, {
+            width: Math.round(item.width * scaleFactor)
+          });
+        });
+        var columnWidthList = updatedColumns.map(function (item) {
+          return "".concat(item.width, "px");
+        });
+        var newStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.style), {}, {
+          gridTemplateColumns: columnWidthList.join(' ')
+        });
+        setStyle(newStyle);
+        setPageWidth(newPageWidth);
+        (0, _helper.updateColumnWidth)(editor, element, updatedColumns);
+      } else {
+        var _columnWidthList = element.column.map(function (item) {
+          return "".concat(item.width, "px");
+        });
+        var _newStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.style), {}, {
+          gridTemplateColumns: _columnWidthList.join(' ')
+        });
+        setStyle(_newStyle);
+      }
+    });
+    resizeObserver.observe(sdocEditorPage);
+    return function () {
+      resizeObserver.disconnect();
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageWidth, element.style, element.column]);
+  return /*#__PURE__*/_react["default"].createElement(_multiColumnRoot["default"], {
+    attributes: attributes
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: multiColumnContainerClassName,
+    style: style,
+    ref: multiColumn,
+    "data-id": element.id
+  }, children, !readOnly && /*#__PURE__*/_react["default"].createElement(_resizeHandlers["default"], {
+    element: element,
+    handleResizeColumn: handleResizeColumn
+  })));
+};
+function renderMultiColumn(props) {
+  return /*#__PURE__*/_react["default"].createElement(MultiColumn, props);
+}
+var _default = exports["default"] = renderMultiColumn;

package/dist/extension/plugins/multi-column/render/multi-column-root.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var MultiColumnRoot = function MultiColumnRoot(_ref) {
+  var attributes = _ref.attributes,
+    children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({}, attributes, {
+    className: (0, _classnames["default"])('sdoc-multicolumn-wrapper position-relative', attributes.className),
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, attributes.style), {}, {
+      maxWidth: '100%'
+    })
+  }), children);
+};
+var _default = exports["default"] = MultiColumnRoot;

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

@@ -0,0 +1,52 @@
+"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 _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 Column = function Column(_ref) {
+  var attributes = _ref.attributes,
+    element = _ref.element,
+    children = _ref.children;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var _useState = (0, _react.useState)(element.width || 0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    columnWidth = _useState2[0],
+    setColumnWidth = _useState2[1];
+  var path = _slateReact.ReactEditor.findPath(editor, element);
+  var parentPath = _slate.Path.parent(path);
+  var _Editor$node = _slate.Editor.node(editor, parentPath),
+    _Editor$node2 = (0, _slicedToArray2["default"])(_Editor$node, 1),
+    parentNode = _Editor$node2[0];
+  (0, _react.useEffect)(function () {
+    var _parentNode$column;
+    var matchingColumn = parentNode === null || parentNode === void 0 ? void 0 : (_parentNode$column = parentNode.column) === null || _parentNode$column === void 0 ? void 0 : _parentNode$column.find(function (column) {
+      return column.key === element.id;
+    });
+    if (matchingColumn) {
+      setColumnWidth(matchingColumn.width);
+    }
+  }, [editor, element, parentNode.column]);
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({}, attributes, {
+    className: (0, _classnames["default"])('column', attributes.className),
+    "data-id": element.id,
+    style: {
+      width: "".concat(columnWidth, "px")
+    }
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-column-container"
+  }, children));
+};
+function renderColumn(props) {
+  // When read only
+
+  return /*#__PURE__*/_react["default"].createElement(Column, props);
+}
+var _default = exports["default"] = renderColumn;

package/dist/extension/plugins/multi-column/render-elem.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "renderColumn", {
+  enumerable: true,
+  get: function get() {
+    return _renderColumn["default"];
+  }
+});
+Object.defineProperty(exports, "renderMultiColumn", {
+  enumerable: true,
+  get: function get() {
+    return _render["default"];
+  }
+});
+var _render = _interopRequireDefault(require("./render"));
+var _renderColumn = _interopRequireDefault(require("./render/render-column"));

package/dist/extension/plugins/multi-column/resize-handlers/column-resize-handler.js

@@ -0,0 +1,26 @@
+"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 ColumnResizeHandler = function ColumnResizeHandler(_ref) {
+  var index = _ref.index,
+    isDraggingResizeHandler = _ref.isDraggingResizeHandler,
+    adjustingCell = _ref.adjustingCell,
+    handleMouseDown = _ref.handleMouseDown,
+    style = _ref.style,
+    isMouseNearBorder = _ref.isMouseNearBorder;
+  var isActive = isMouseNearBorder || isDraggingResizeHandler && adjustingCell === index;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "column-width-just ".concat(isActive ? 'active' : ''),
+    onMouseDown: function onMouseDown(event) {
+      event.preventDefault();
+      handleMouseDown(index, event);
+    },
+    style: style
+  });
+};
+var _default = exports["default"] = ColumnResizeHandler;

package/dist/extension/plugins/multi-column/resize-handlers/index.js

@@ -0,0 +1,166 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+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 _mouseEvent = require("../../../../utils/mouse-event");
+var _constants = require("../constants");
+var _helper = require("../helper");
+var _columnResizeHandler = _interopRequireDefault(require("./column-resize-handler"));
+var ResizeHandlers = function ResizeHandlers(_ref) {
+  var element = _ref.element,
+    handleResizeColumn = _ref.handleResizeColumn;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var _useState = (0, _react.useState)(element.column),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    column = _useState2[0],
+    setColumn = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isDraggingResizeHandler = _useState4[0],
+    setIsDraggingResizeHandler = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    adjustingCell = _useState6[0],
+    setAdjustingCell = _useState6[1];
+  var _useState7 = (0, _react.useState)({
+      initialX: 0,
+      cellWidths: []
+    }),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    resizeInfo = _useState8[0],
+    setResizeInfo = _useState8[1];
+  var _useState9 = (0, _react.useState)(column.map(function () {
+      return false;
+    })),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    isMouseNearBorder = _useState0[0],
+    setIsMouseNearBorder = _useState0[1];
+  var handleMouseDown = function handleMouseDown(index, event) {
+    event.preventDefault();
+    var cellWidths = column.map(function (col) {
+      return col.width;
+    });
+    setResizeInfo({
+      initialX: event.clientX,
+      cellWidths: cellWidths,
+      index: index
+    });
+    setIsDraggingResizeHandler(true);
+    setAdjustingCell(index);
+  };
+
+  // Render when column element of multi_column node changes
+  (0, _react.useEffect)(function () {
+    setColumn(element.column);
+  }, [element.column]);
+  (0, _react.useEffect)(function () {
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    var _Editor$node = _slate.Editor.node(editor, path),
+      _Editor$node2 = (0, _slicedToArray2["default"])(_Editor$node, 1),
+      node = _Editor$node2[0];
+    var domNode = _slateReact.ReactEditor.toDOMNode(editor, node);
+    if (!domNode.querySelectorAll('.column')) return;
+    var childNodes = Array.from(domNode.querySelectorAll('.column'));
+    var onMouseMove = function onMouseMove(event) {
+      event.preventDefault();
+      // Let resize handler show when mouse is close to right edge of column at range of 20 px
+      var nearBorder = column.map(function (col, colIndex) {
+        var child = childNodes[colIndex];
+        if (!child) return false;
+        var childRect = child.getBoundingClientRect();
+        var isMouseInColumn = event.clientY >= childRect.top && event.clientY <= childRect.bottom;
+        var isChildNearRightBorder = isMouseInColumn && Math.abs(event.clientX - childRect.right) < 20;
+        return isChildNearRightBorder;
+      });
+      if (JSON.stringify(nearBorder) !== JSON.stringify(isMouseNearBorder)) {
+        setIsMouseNearBorder(nearBorder);
+      }
+      if (!isDraggingResizeHandler) return;
+      var initialX = resizeInfo.initialX,
+        cellWidths = resizeInfo.cellWidths,
+        index = resizeInfo.index;
+      // Let last resize handler do not work
+      if (!cellWidths[index + 1]) return;
+
+      // Calculate new width of two close column when moving resize handler
+      var deltaX = Math.min(event.clientX - initialX, cellWidths[index + 1] - _constants.COLUMN_MIN_WIDTH);
+      var newWidth = Math.max(cellWidths[index] + deltaX, _constants.COLUMN_MIN_WIDTH);
+      if (cellWidths[index] === _constants.COLUMN_MIN_WIDTH && deltaX < 0) return;
+      var updatedColumn = column.map(function (column, colIndex) {
+        if (colIndex === index) {
+          return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
+            width: newWidth
+          });
+        } else if (colIndex === index + 1) {
+          return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
+            width: cellWidths[index] + cellWidths[index + 1] - newWidth
+          });
+        }
+        return column;
+      });
+      setColumn(updatedColumn);
+    };
+    var onMouseUp = function onMouseUp(event) {
+      event.preventDefault();
+      if (adjustingCell === null) return;
+      var newColumn = column.map(function (column) {
+        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
+          left: column.width
+        });
+      });
+      handleResizeColumn(newColumn);
+      (0, _helper.updateColumnWidth)(editor, element, newColumn);
+      setIsDraggingResizeHandler(false);
+      setAdjustingCell(null);
+    };
+    (0, _mouseEvent.registerResizeEvents)({
+      'mousemove': onMouseMove,
+      'mouseup': onMouseUp,
+      'mouseleave': onMouseUp
+    });
+    return function () {
+      (0, _mouseEvent.unregisterResizeEvents)({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp,
+        'mouseleave': onMouseUp
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleResizeColumn, column, isDraggingResizeHandler, isMouseNearBorder]);
+  var leftAccumulator = 0;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "column-resize-handler",
+    contentEditable: false
+  }, column.map(function (column, index) {
+    leftAccumulator += column.width;
+    var left = leftAccumulator;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: index
+    }, index === 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "column-width-just",
+      style: {
+        left: '-15px'
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_columnResizeHandler["default"], {
+      key: index,
+      index: index,
+      handleMouseDown: handleMouseDown,
+      style: {
+        left: "".concat(left - 15, "px")
+      },
+      adjustingCell: adjustingCell,
+      isDraggingResizeHandler: isDraggingResizeHandler,
+      isMouseNearBorder: isMouseNearBorder[index]
+    }));
+  }));
+};
+var _default = exports["default"] = ResizeHandlers;

package/dist/extension/plugins/paragraph/helper.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEmptyNode = void 0;
+var _slate = require("@seafile/slate");
+var isEmptyNode = exports.isEmptyNode = function isEmptyNode(node) {
+  var nodeChildren = node.children;
+  var isSingleChild = nodeChildren.length === 1;
+  var firstChild = nodeChildren[0];
+  var isText = _slate.Text.isText(firstChild);
+  var isEmptyContent = _slate.Node.string(firstChild) === '';
+  var isEmpty = isSingleChild && isText && isEmptyContent;
+  return isEmpty;
+};

package/dist/extension/plugins/paragraph/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _constants = require("../../constants");
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = require("./render-elem");
+var ParagraphPlugin = {
+  type: _constants.PARAGRAPH,
+  editorPlugin: _plugin["default"],
+  renderElements: [_renderElem.renderParagraph]
+};
+var _default = exports["default"] = ParagraphPlugin;

package/dist/extension/plugins/paragraph/plugin.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _slate = require("@seafile/slate");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _helpers = require("../list/helpers");
+var withParagraph = function withParagraph(editor) {
+  var handleTab = editor.handleTab,
+    insertText = editor.insertText,
+    deleteBackward = editor.deleteBackward,
+    onHotKeyDown = editor.onHotKeyDown,
+    insertFragment = editor.insertFragment,
+    insertBreak = editor.insertBreak;
+  var newEditor = editor;
+  newEditor.handleTab = function (event) {
+    var _selectedNode$;
+    var selection = newEditor.selection;
+    if (!selection) return;
+    if (!_slate.Range.isCollapsed(selection)) return;
+    var selectedNode = _slate.Editor.node(newEditor, selection, {
+      depth: 1
+    });
+    if ((selectedNode === null || selectedNode === void 0 ? void 0 : (_selectedNode$ = selectedNode[0]) === null || _selectedNode$ === void 0 ? void 0 : _selectedNode$.type) === _constants.PARAGRAPH) {
+      event.preventDefault();
+      var path = _slate.Editor.path(newEditor, selection);
+      var point = _slate.Editor.point(newEditor, selection);
+      var isStart = _slate.Editor.isStart(newEditor, point, [path[0]]);
+      if (isStart) {
+        var indent;
+        if ((0, _isHotkey["default"])('shift+tab', event)) {
+          indent = false;
+        }
+        if ((0, _isHotkey["default"])('tab', event)) {
+          indent = true;
+        }
+        _slate.Transforms.setNodes(newEditor, {
+          indent: indent
+        }, {
+          at: [path[0]]
+        });
+      } else {
+        if ((0, _isHotkey["default"])('tab', event)) insertText('  ');
+      }
+      return;
+    }
+    return handleTab(event);
+  };
+  newEditor.deleteBackward = function (unit) {
+    var selection = newEditor.selection;
+    if (!selection) return;
+    var _Editor$node = _slate.Editor.node(newEditor, selection, {
+        depth: 1
+      }),
+      _Editor$node2 = (0, _slicedToArray2["default"])(_Editor$node, 1),
+      _Editor$node2$ = _Editor$node2[0],
+      selectedNode = _Editor$node2$ === void 0 ? {} : _Editor$node2$;
+    var type = selectedNode.type,
+      indent = selectedNode.indent;
+    if (_slate.Range.isCollapsed(selection) && type === _constants.PARAGRAPH && indent) {
+      var path = _slate.Editor.path(newEditor, selection);
+      var point = _slate.Editor.point(newEditor, selection);
+      var isStart = _slate.Editor.isStart(newEditor, point, [path[0]]);
+      if (isStart) {
+        _slate.Transforms.setNodes(newEditor, {
+          indent: false
+        }, {
+          at: [path[0]]
+        });
+        return;
+      }
+    }
+    return deleteBackward(unit);
+  };
+  newEditor.onHotKeyDown = function (event) {
+    var selectedParagraph = (0, _core.getSelectedNodeByType)(editor, _constants.PARAGRAPH);
+    if (selectedParagraph) {
+      var selection = newEditor.selection;
+      if (_slate.Range.isCollapsed(selection)) {
+        if ((0, _isHotkey["default"])('ArrowRight', event)) {
+          var lastLeaf = selectedParagraph.children.slice(-1)[0];
+          // When the last character of a paragraph is code text, right-click to move the cursor and insert a new text node
+          // Avoid being unable to enter new text when the code text is at the end of the paragraph
+          if (lastLeaf !== null && lastLeaf !== void 0 && lastLeaf.code) {
+            var focus = selection.focus;
+            var _Editor$edges = _slate.Editor.edges(newEditor, [focus.path[0]]),
+              _Editor$edges2 = (0, _slicedToArray2["default"])(_Editor$edges, 2),
+              lastPoint = _Editor$edges2[1];
+            if (_slate.Point.equals(focus, lastPoint)) {
+              event.preventDefault();
+              _slate.Editor.insertFragment(newEditor, [(0, _core.generateDefaultText)(' ')]);
+              return;
+            }
+          }
+        }
+        if ((0, _isHotkey["default"])('Enter', event)) {
+          var _lastLeaf = selectedParagraph.children.slice(-1)[0];
+          // The last text node style in a paragraph is code. When pressing Enter, insert an empty node first and then split the node.
+          // Avoid empty inline nodes at the beginning of new lines
+          if (_lastLeaf !== null && _lastLeaf !== void 0 && _lastLeaf.code) {
+            var _focus = selection.focus;
+            var _Editor$leaf = _slate.Editor.leaf(newEditor, selection),
+              _Editor$leaf2 = (0, _slicedToArray2["default"])(_Editor$leaf, 2),
+              leafPath = _Editor$leaf2[1];
+            var _Editor$edges3 = _slate.Editor.edges(newEditor, leafPath),
+              _Editor$edges4 = (0, _slicedToArray2["default"])(_Editor$edges3, 2),
+              _lastPoint = _Editor$edges4[1];
+            if (_slate.Point.equals(_focus, _lastPoint)) {
+              event.preventDefault();
+              _slate.Editor.insertFragment(newEditor, [(0, _core.generateDefaultText)(' ')]);
+              _slate.Transforms.splitNodes(newEditor, {
+                always: true
+              });
+              return;
+            }
+          }
+
+          // when print enter clear text style
+          if (_lastLeaf !== null && _lastLeaf !== void 0 && _lastLeaf.bold || _lastLeaf !== null && _lastLeaf !== void 0 && _lastLeaf.italic) {
+            (_lastLeaf === null || _lastLeaf === void 0 ? void 0 : _lastLeaf.bold) && _slate.Editor.removeMark(editor, 'bold');
+            (_lastLeaf === null || _lastLeaf === void 0 ? void 0 : _lastLeaf.italic) && _slate.Editor.removeMark(editor, 'italic');
+            return;
+          }
+        }
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  newEditor.insertBreak = function () {
+    var selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants.PARAGRAPH);
+    if (selectedNode != null && (0, _core.isCursorAtBlockStart)(newEditor)) {
+      var paragraph = (0, _core.generateDefaultParagraph)();
+      var targetPath = (0, _core.findPath)(editor, selectedNode);
+      var parentNode = (0, _core.getParentNode)(newEditor.children, selectedNode.id);
+      if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== _constants.LIST_ITEM) {
+        _slate.Transforms.insertNodes(editor, paragraph, {
+          at: targetPath
+        });
+        return;
+      }
+    }
+    insertBreak();
+  };
+  newEditor.insertFragment = function (data) {
+    var paragraphBlock = (0, _core.getSelectedNodeByType)(editor, _constants.PARAGRAPH);
+    var onlyOneListItem = data.length === 1 && (0, _helpers.isSingleListItem)(data[0]);
+    if (paragraphBlock && onlyOneListItem) {
+      var text = _slate.Node.string(data[0]);
+      editor.insertText(text);
+      return;
+    }
+    insertFragment(data);
+  };
+  return newEditor;
+};
+var _default = exports["default"] = withParagraph;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderParagraph = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireDefault(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _constants = require("../../../constants");
+var _constants2 = require("../../constants");
+var _core = require("../../core");
+var _placeholder = _interopRequireDefault(require("../header/placeholder"));
+var _helper = require("./helper");
+var PLACEHOLDER = 'Enter_text_or_press_forward_slash_to_insert_element';
+var Paragraph = function Paragraph(_ref) {
+  var isComposing = _ref.isComposing,
+    element = _ref.element,
+    attributes = _ref.attributes,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? PLACEHOLDER : _ref$placeholder;
+  var indent = element.indent;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var isSelected = (0, _slateReact.useSelected)();
+  var isShowPlaceHolder = false;
+  if (editor.children.length === 1) {
+    var node = editor.children[0];
+    var isChildEmpty = (0, _helper.isEmptyNode)(node);
+    var isParagraphEmpty = _slate.Node.string(element) === '';
+    isShowPlaceHolder = isChildEmpty && isParagraphEmpty && !isComposing;
+  }
+  if (editor.children.length === 2 && editor.children[0].type.startsWith('header')) {
+    var _node = editor.children[1];
+    isShowPlaceHolder = _slate.Node.string(element) === '' && (_node === null || _node === void 0 ? void 0 : _node.id) === (element === null || element === void 0 ? void 0 : element.id) && !isComposing;
+  }
+  var isCommentEditor = editor.editorType === _constants.COMMENT_EDITOR;
+  if (!isCommentEditor && isSelected && _slate.Range.isCollapsed(editor.selection) && (0, _helper.isEmptyNode)(element) && _slateReact.ReactEditor.findPath(editor, element).length === 1 && !isComposing) {
+    isShowPlaceHolder = true;
+  }
+
+  // Distinguish whether paragraph node is in multi_column node
+  var aboveNodeEntry = isSelected && (0, _core.getTopLevelBlockNode)(editor);
+  if (!isComposing && aboveNodeEntry && aboveNodeEntry[0].type === _constants2.ELEMENT_TYPE.MULTI_COLUMN && isSelected && (0, _helper.isEmptyNode)(element) && _slate.Range.isCollapsed(editor.selection)) {
+    isShowPlaceHolder = true;
+  }
+  var style = {
+    textAlign: element.align,
+    paddingTop: '5px',
+    paddingBottom: '5px',
+    paddingLeft: indent ? '28px' : ''
+  };
+  var customAttributes = attributes;
+  if (element.id === 'document-render-complete') {
+    customAttributes['id'] = element.id;
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
+    "data-id": element.id
+  }, customAttributes, {
+    style: (0, _objectSpread2["default"])({
+      position: isShowPlaceHolder ? 'relative' : ''
+    }, style),
+    className: className
+  }), children, isShowPlaceHolder && /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
+    title: placeholder,
+    top: isCommentEditor ? 0 : 5
+  }));
+};
+var renderParagraph = exports.renderParagraph = function renderParagraph(props) {
+  return /*#__PURE__*/_react["default"].createElement(Paragraph, props);
+};