@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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");
+const MultiColumn = _ref => {
+  let {
+    className,
+    attributes,
+    children,
+    element
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const multiColumn = (0, _react.useRef)(null);
+  const [style, setStyle] = (0, _react.useState)(element.style ? {
+    ...element.style
+  } : {});
+  const multiColumnContainerClassName = (0, _classnames.default)('sdoc-multicolumn-container', className);
+  const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.getCurrentPageWidth)(editor));
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const handleResizeColumn = newColumn => {
+    (0, _helper.updateColumnWidth)(editor, element, newColumn);
+  };
+  (0, _react.useEffect)(() => {
+    setPageWidth((0, _helper.getCurrentPageWidth)(editor));
+  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  , []);
+  (0, _react.useEffect)(() => {
+    const sdocEditorPage = document.getElementById('sdoc-editor');
+    if (!sdocEditorPage) return;
+    const resizeObserver = new ResizeObserver(entries => {
+      var _entries$;
+      const newPageWidth = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.width;
+      // Check if sdocPageWidth changes
+      if (pageWidth && newPageWidth !== pageWidth) {
+        const scaleFactor = newPageWidth / pageWidth;
+        const updatedColumns = element.column.map(item => ({
+          ...item,
+          width: Math.round(item.width * scaleFactor)
+        }));
+        const columnWidthList = updatedColumns.map(item => `${item.width}px`);
+        const newStyle = {
+          ...element.style,
+          gridTemplateColumns: columnWidthList.join(' ')
+        };
+        setStyle(newStyle);
+        setPageWidth(newPageWidth);
+        (0, _helper.updateColumnWidth)(editor, element, updatedColumns);
+      } else {
+        const columnWidthList = element.column.map(item => `${item.width}px`);
+        const newStyle = {
+          ...element.style,
+          gridTemplateColumns: columnWidthList.join(' ')
+        };
+        setStyle(newStyle);
+      }
+    });
+    resizeObserver.observe(sdocEditorPage);
+    return () => {
+      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/basic-sdk/extension/plugins/multi-column/render/multi-column-root.js

@@ -0,0 +1,23 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+const MultiColumnRoot = _ref => {
+  let {
+    attributes,
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
+    className: (0, _classnames.default)('sdoc-multicolumn-wrapper position-relative', attributes.className),
+    style: {
+      ...attributes.style,
+      maxWidth: '100%'
+    }
+  }), children);
+};
+var _default = exports.default = MultiColumnRoot;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+const Column = _ref => {
+  let {
+    attributes,
+    element,
+    children
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const [columnWidth, setColumnWidth] = (0, _react.useState)(element.width || 0);
+  const path = _slateReact.ReactEditor.findPath(editor, element);
+  const parentPath = _slate.Path.parent(path);
+  const [parentNode] = _slate.Editor.node(editor, parentPath);
+  (0, _react.useEffect)(() => {
+    var _parentNode$column;
+    const matchingColumn = parentNode === null || parentNode === void 0 ? void 0 : (_parentNode$column = parentNode.column) === null || _parentNode$column === void 0 ? void 0 : _parentNode$column.find(column => 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: `${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/basic-sdk/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 () {
+    return _renderColumn.default;
+  }
+});
+Object.defineProperty(exports, "renderMultiColumn", {
+  enumerable: true,
+  get: function () {
+    return _render.default;
+  }
+});
+var _render = _interopRequireDefault(require("./render"));
+var _renderColumn = _interopRequireDefault(require("./render/render-column"));

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

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

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

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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"));
+const ResizeHandlers = _ref => {
+  let {
+    element,
+    handleResizeColumn
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const [column, setColumn] = (0, _react.useState)(element.column);
+  const [isDraggingResizeHandler, setIsDraggingResizeHandler] = (0, _react.useState)(false);
+  const [adjustingCell, setAdjustingCell] = (0, _react.useState)(null);
+  const [resizeInfo, setResizeInfo] = (0, _react.useState)({
+    initialX: 0,
+    cellWidths: []
+  });
+  const [isMouseNearBorder, setIsMouseNearBorder] = (0, _react.useState)(column.map(() => false));
+  const handleMouseDown = (index, event) => {
+    event.preventDefault();
+    const cellWidths = column.map(col => col.width);
+    setResizeInfo({
+      initialX: event.clientX,
+      cellWidths,
+      index
+    });
+    setIsDraggingResizeHandler(true);
+    setAdjustingCell(index);
+  };
+
+  // Render when column element of multi_column node changes
+  (0, _react.useEffect)(() => {
+    setColumn(element.column);
+  }, [element.column]);
+  (0, _react.useEffect)(() => {
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    const [node] = _slate.Editor.node(editor, path);
+    const domNode = _slateReact.ReactEditor.toDOMNode(editor, node);
+    if (!domNode.querySelectorAll('.column')) return;
+    const childNodes = Array.from(domNode.querySelectorAll('.column'));
+    const onMouseMove = event => {
+      event.preventDefault();
+      // Let resize handler show when mouse is close to right edge of column at range of 20 px
+      const nearBorder = column.map((col, colIndex) => {
+        const child = childNodes[colIndex];
+        if (!child) return false;
+        const childRect = child.getBoundingClientRect();
+        const isMouseInColumn = event.clientY >= childRect.top && event.clientY <= childRect.bottom;
+        const isChildNearRightBorder = isMouseInColumn && Math.abs(event.clientX - childRect.right) < 20;
+        return isChildNearRightBorder;
+      });
+      if (JSON.stringify(nearBorder) !== JSON.stringify(isMouseNearBorder)) {
+        setIsMouseNearBorder(nearBorder);
+      }
+      if (!isDraggingResizeHandler) return;
+      const {
+        initialX,
+        cellWidths,
+        index
+      } = resizeInfo;
+      // Let last resize handler do not work
+      if (!cellWidths[index + 1]) return;
+
+      // Calculate new width of two close column when moving resize handler
+      const deltaX = Math.min(event.clientX - initialX, cellWidths[index + 1] - _constants.COLUMN_MIN_WIDTH);
+      const newWidth = Math.max(cellWidths[index] + deltaX, _constants.COLUMN_MIN_WIDTH);
+      if (cellWidths[index] === _constants.COLUMN_MIN_WIDTH && deltaX < 0) return;
+      const updatedColumn = column.map((column, colIndex) => {
+        if (colIndex === index) {
+          return {
+            ...column,
+            width: newWidth
+          };
+        } else if (colIndex === index + 1) {
+          return {
+            ...column,
+            width: cellWidths[index] + cellWidths[index + 1] - newWidth
+          };
+        }
+        return column;
+      });
+      setColumn(updatedColumn);
+    };
+    const onMouseUp = event => {
+      event.preventDefault();
+      if (adjustingCell === null) return;
+      const newColumn = column.map(column => ({
+        ...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 () => {
+      (0, _mouseEvent.unregisterResizeEvents)({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp,
+        'mouseleave': onMouseUp
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleResizeColumn, column, isDraggingResizeHandler, isMouseNearBorder]);
+  let leftAccumulator = 0;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "column-resize-handler",
+    contentEditable: false
+  }, column.map((column, index) => {
+    leftAccumulator += column.width;
+    const 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: `${left - 15}px`
+      },
+      adjustingCell: adjustingCell,
+      isDraggingResizeHandler: isDraggingResizeHandler,
+      isMouseNearBorder: isMouseNearBorder[index]
+    }));
+  }));
+};
+var _default = exports.default = ResizeHandlers;

package/dist/basic-sdk/extension/plugins/paragraph/helper.js

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

package/dist/basic-sdk/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");
+const ParagraphPlugin = {
+  type: _constants.PARAGRAPH,
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.renderParagraph]
+};
+var _default = exports.default = ParagraphPlugin;

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

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _helpers = require("../list/helpers");
+const withParagraph = editor => {
+  const {
+    handleTab,
+    insertText,
+    deleteBackward,
+    onHotKeyDown,
+    insertFragment,
+    insertBreak
+  } = editor;
+  const newEditor = editor;
+  newEditor.handleTab = event => {
+    var _selectedNode$;
+    const {
+      selection
+    } = newEditor;
+    if (!selection) return;
+    if (!_slate.Range.isCollapsed(selection)) return;
+    const 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();
+      const path = _slate.Editor.path(newEditor, selection);
+      const point = _slate.Editor.point(newEditor, selection);
+      const isStart = _slate.Editor.isStart(newEditor, point, [path[0]]);
+      if (isStart) {
+        let 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 = unit => {
+    const {
+      selection
+    } = newEditor;
+    if (!selection) return;
+    const [selectedNode = {}] = _slate.Editor.node(newEditor, selection, {
+      depth: 1
+    });
+    const {
+      type,
+      indent
+    } = selectedNode;
+    if (_slate.Range.isCollapsed(selection) && type === _constants.PARAGRAPH && indent) {
+      const path = _slate.Editor.path(newEditor, selection);
+      const point = _slate.Editor.point(newEditor, selection);
+      const 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 = event => {
+    const selectedParagraph = (0, _core.getSelectedNodeByType)(editor, _constants.PARAGRAPH);
+    if (selectedParagraph) {
+      const {
+        selection
+      } = newEditor;
+      if (_slate.Range.isCollapsed(selection)) {
+        if ((0, _isHotkey.default)('ArrowRight', event)) {
+          const 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) {
+            const {
+              focus
+            } = selection;
+            const [, lastPoint] = _slate.Editor.edges(newEditor, [focus.path[0]]);
+            if (_slate.Point.equals(focus, lastPoint)) {
+              event.preventDefault();
+              _slate.Editor.insertFragment(newEditor, [(0, _core.generateDefaultText)(' ')]);
+              return;
+            }
+          }
+        }
+        if ((0, _isHotkey.default)('Enter', event)) {
+          const 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) {
+            const {
+              focus
+            } = selection;
+            const [, leafPath] = _slate.Editor.leaf(newEditor, selection);
+            const [, lastPoint] = _slate.Editor.edges(newEditor, leafPath);
+            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 = () => {
+    const selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants.PARAGRAPH);
+    if (selectedNode != null && (0, _core.isCursorAtBlockStart)(newEditor)) {
+      const paragraph = (0, _core.generateDefaultParagraph)();
+      const targetPath = (0, _core.findPath)(editor, selectedNode);
+      const 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 = data => {
+    const paragraphBlock = (0, _core.getSelectedNodeByType)(editor, _constants.PARAGRAPH);
+    const onlyOneListItem = data.length === 1 && (0, _helpers.isSingleListItem)(data[0]);
+    if (paragraphBlock && onlyOneListItem) {
+      const text = _slate.Node.string(data[0]);
+      editor.insertText(text);
+      return;
+    }
+    insertFragment(data);
+  };
+  return newEditor;
+};
+var _default = exports.default = withParagraph;

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

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderParagraph = void 0;
+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");
+const PLACEHOLDER = 'Enter_text_or_press_forward_slash_to_insert_element';
+const Paragraph = _ref => {
+  let {
+    isComposing,
+    element,
+    attributes,
+    children,
+    className,
+    placeholder = PLACEHOLDER
+  } = _ref;
+  const {
+    indent
+  } = element;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const isSelected = (0, _slateReact.useSelected)();
+  let isShowPlaceHolder = false;
+  if (editor.children.length === 1) {
+    const node = editor.children[0];
+    const isChildEmpty = (0, _helper.isEmptyNode)(node);
+    const isParagraphEmpty = _slate.Node.string(element) === '';
+    isShowPlaceHolder = isChildEmpty && isParagraphEmpty && !isComposing;
+  }
+  if (editor.children.length === 2 && editor.children[0].type.startsWith('header')) {
+    const 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;
+  }
+  const 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
+  const 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;
+  }
+  const style = {
+    textAlign: element.align,
+    paddingTop: '5px',
+    paddingBottom: '5px',
+    paddingLeft: indent ? '28px' : ''
+  };
+  let 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: {
+      position: isShowPlaceHolder ? 'relative' : '',
+      ...style
+    },
+    className: className
+  }), children, isShowPlaceHolder && /*#__PURE__*/_react.default.createElement(_placeholder.default, {
+    title: placeholder,
+    top: isCommentEditor ? 0 : 5
+  }));
+};
+const renderParagraph = props => {
+  return /*#__PURE__*/_react.default.createElement(Paragraph, props);
+};
+exports.renderParagraph = renderParagraph;

package/dist/basic-sdk/extension/plugins/sdoc-link/constants/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SDOC_LINK_TYPE_CONFIG = exports.SDOC_LINK_TYPES = exports.SDOC_LINK_TYPE = void 0;
+const SDOC_LINK_TYPE = exports.SDOC_LINK_TYPE = {
+  TEXT_LINK: 'text_link',
+  ICON_LINK: 'icon_link',
+  CARD_LINK: 'card_link'
+};
+const SDOC_LINK_TYPE_CONFIG = exports.SDOC_LINK_TYPE_CONFIG = {
+  [SDOC_LINK_TYPE.TEXT_LINK]: {
+    icon: 'sdocfont sdoc-text-link',
+    text: 'Text_Link'
+  },
+  [SDOC_LINK_TYPE.ICON_LINK]: {
+    icon: 'sdocfont sdoc-inline-link',
+    text: 'Icon_and_text_Link'
+  },
+  [SDOC_LINK_TYPE.CARD_LINK]: {
+    icon: 'sdocfont sdoc-card-link',
+    text: 'Card'
+  }
+};
+const SDOC_LINK_TYPES = exports.SDOC_LINK_TYPES = [SDOC_LINK_TYPE.TEXT_LINK, SDOC_LINK_TYPE.ICON_LINK, SDOC_LINK_TYPE.CARD_LINK];