@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/table/render/resize-mask/index.js

@@ -0,0 +1,136 @@
+"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 _constants = require("../../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../../utils/event-bus"));
+var _constants2 = require("../../constants");
+var _helpers = require("../../helpers");
+require("../index.css");
+const ResizeMask = _ref => {
+  let {
+    editor,
+    table,
+    handleShowResizeHandler,
+    hideResizeHandlers,
+    handlerStartDragging,
+    isDraggingResizeHandler
+  } = _ref;
+  const [cellInfo, setCellInfo] = (0, _react.useState)({});
+  const [maskStyle, setMaskStyle] = (0, _react.useState)({});
+  const handleCellMouseMove = (0, _react.useCallback)(cellInfo => {
+    const {
+      mouseDownEvent,
+      rowIndex,
+      cellIndex,
+      tableId
+    } = cellInfo;
+    if (table.id !== tableId) return;
+    const resizeMaskCellInfo = (0, _helpers.getResizeMaskCellInfo)(editor, table, rowIndex, cellIndex);
+    const {
+      width,
+      height,
+      top,
+      left
+    } = resizeMaskCellInfo;
+    setMaskStyle({
+      width,
+      height,
+      top,
+      left
+    });
+    setCellInfo({
+      ...resizeMaskCellInfo,
+      mouseDownEvent
+    });
+  }, [editor, table]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unSubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.TABLE_CELL_MOUSE_ENTER, handleCellMouseMove);
+    return () => {
+      unSubscribe();
+    };
+  }, [handleCellMouseMove]);
+  const getHandlerDisplayInfo = (0, _react.useCallback)(mode => {
+    let resizeHandlerInfo = {};
+    if (mode === _constants2.RESIZE_MASK_BOTTOM) resizeHandlerInfo = {
+      ...cellInfo,
+      ...maskStyle,
+      displayType: _constants2.RESIZE_HANDLER_ROW
+    };
+    if (mode === _constants2.RESIZE_MASK_RIGHT) resizeHandlerInfo = {
+      ...cellInfo,
+      ...maskStyle,
+      displayType: _constants2.RESIZE_HANDLER_COLUMN
+    };
+    if (mode === _constants2.RESIZE_MASK_LEFT) {
+      const {
+        cellIndex,
+        rowIndex,
+        focusCellIndex,
+        mouseDownEvent
+      } = cellInfo;
+      const calculateCellIndex = cellIndex === 0 ? 0 : cellIndex - 1;
+      const resizeMaskCellInfo = (0, _helpers.getResizeMaskCellInfo)(editor, table, rowIndex, calculateCellIndex);
+      const displayType = focusCellIndex === 0 ? _constants2.RESIZE_HANDLER_FIRST_COLUMN : _constants2.RESIZE_HANDLER_COLUMN;
+      resizeHandlerInfo = {
+        displayType,
+        ...resizeMaskCellInfo,
+        mouseDownEvent
+      };
+    }
+    if (mode === _constants2.RESIZE_MASK_TOP) {
+      const {
+        rowIndex,
+        cellIndex,
+        mouseDownEvent
+      } = cellInfo;
+      const resizeMaskCellInfo = (0, _helpers.getResizeMaskCellInfo)(editor, table, rowIndex - 1, cellIndex);
+      resizeHandlerInfo = {
+        displayType: _constants2.RESIZE_HANDLER_ROW,
+        ...resizeMaskCellInfo,
+        mouseDownEvent: mouseDownEvent
+      };
+    }
+    return resizeHandlerInfo;
+  }, [cellInfo, editor, maskStyle, table]);
+  const handleMouseDown = (0, _react.useCallback)((event, mode) => {
+    event.stopPropagation();
+    event.preventDefault();
+    handlerStartDragging();
+    const handlerInfo = getHandlerDisplayInfo(mode);
+    handleShowResizeHandler(handlerInfo);
+  }, [getHandlerDisplayInfo, handleShowResizeHandler, handlerStartDragging]);
+  const handleMouseOut = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (isDraggingResizeHandler) return;
+    hideResizeHandlers();
+  }, [hideResizeHandlers, isDraggingResizeHandler]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-table-resize-mask",
+    style: maskStyle
+  }, cellInfo.rowIndex !== 0 && /*#__PURE__*/_react.default.createElement("div", {
+    onMouseOut: handleMouseOut,
+    onMouseDown: e => handleMouseDown(e, _constants2.RESIZE_MASK_TOP),
+    className: "sdoc-table-resize-top"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    onMouseOut: handleMouseOut,
+    onMouseDown: e => handleMouseDown(e, _constants2.RESIZE_MASK_RIGHT),
+    className: "sdoc-table-resize-right"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    onMouseOut: handleMouseOut,
+    onMouseDown: e => handleMouseDown(e, _constants2.RESIZE_MASK_BOTTOM),
+    className: "sdoc-table-resize-bottom"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    onMouseOut: handleMouseOut,
+    onMouseDown: e => handleMouseDown(e, _constants2.RESIZE_MASK_LEFT),
+    className: "sdoc-table-resize-left"
+  }));
+};
+var _default = exports.default = ResizeMask;

package/dist/basic-sdk/extension/plugins/table/render/table-header/columns-header/column-header.js

@@ -0,0 +1,104 @@
+"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 _objectUtils = _interopRequireDefault(require("../../../../../../utils/object-utils"));
+var _constants = require("../../../../../constants");
+var _core = require("../../../../../core");
+var _hooks = require("../../hooks");
+const ColumnHeader = _ref => {
+  let {
+    index,
+    column,
+    addIconPosition,
+    setAddIconPosition,
+    setInsertColumnIndex,
+    selectRange,
+    tableSize,
+    handleDragStart,
+    handleDragEnd
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const {
+    tableSelectedRange
+  } = editor;
+  const columnHeaderRef = (0, _react.useRef)(null);
+  const tableRoot = (0, _hooks.useTableRootContext)();
+  const selectedRange = (0, _hooks.useTableSelectedRangeContext)();
+  const currentCell = (0, _core.getSelectedNodeByType)(editor, _constants.ELEMENT_TYPE.TABLE_CELL);
+  const currentCellPath = currentCell ? (0, _core.findPath)(editor, currentCell, [-1, -1]) : [-1, -1];
+  const pathLength = currentCellPath.length;
+  const canDrag = (0, _react.useMemo)(() => {
+    const {
+      minRowIndex,
+      maxRowIndex,
+      minColIndex,
+      maxColIndex
+    } = tableSelectedRange;
+    const [rowNum] = tableSize;
+    const isSelectColumn = minRowIndex === 0 && maxRowIndex === rowNum - 1;
+    const isSelectRangeColumn = minColIndex <= index && index <= maxColIndex;
+    const isSelectAllColumn = minColIndex === 0 && maxColIndex === tableSize[1] - 1;
+    if (tableSize[1] === 1 || isSelectAllColumn) return false;
+    if (isSelectColumn && isSelectRangeColumn) return true;
+    return false;
+  }, [index, tableSelectedRange, tableSize]);
+  const onMouseMove = (0, _react.useCallback)(event => {
+    const {
+      left,
+      width,
+      top
+    } = columnHeaderRef.current.getBoundingClientRect();
+    const tableRootPosition = tableRoot.getBoundingClientRect();
+    const halfElementX = left + width / 2;
+    const nextAddIconPosition = {
+      left: event.clientX > halfElementX ? left + width - 6 : left - 6,
+      top: top
+    };
+    if (tableRootPosition.right < nextAddIconPosition.left) {
+      setAddIconPosition(undefined);
+      return;
+    }
+    if (tableRootPosition.left - 6 > nextAddIconPosition.left) {
+      setAddIconPosition(undefined);
+      return;
+    }
+    if (_objectUtils.default.isSameObject(nextAddIconPosition, addIconPosition)) return;
+    setInsertColumnIndex(event.clientX > halfElementX ? index : index - 1);
+    setAddIconPosition(nextAddIconPosition);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, addIconPosition, column, tableSize]);
+  const onMouseLeave = (0, _react.useCallback)(event => {
+    setAddIconPosition(undefined);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, addIconPosition, column, tableSize]);
+  const isSelectedAColumn = selectedRange.minRowIndex === 0 && selectedRange.maxRowIndex === tableSize[0] - 1;
+  const isSelectedRangeColumn = selectedRange.minColIndex <= index && index <= selectedRange.maxColIndex;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-table-column-header h-100', {
+      'range-selected': isSelectedAColumn && isSelectedRangeColumn,
+      'range-selected-tip': !isSelectedAColumn && isSelectedRangeColumn || currentCellPath[pathLength - 1] === index,
+      'drag': canDrag
+    }),
+    ref: columnHeaderRef,
+    onMouseMove: onMouseMove,
+    onMouseLeave: onMouseLeave,
+    onClick: () => selectRange(index),
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    style: {
+      width: column.width
+    },
+    draggable: canDrag
+  });
+};
+var _default = exports.default = ColumnHeader;

package/dist/basic-sdk/extension/plugins/table/render/table-header/columns-header/index.js

@@ -0,0 +1,92 @@
+"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 _constants = require("../../../constants");
+var _helpers = require("../../../helpers");
+var _hooks = require("../../hooks");
+var _columnHeader = _interopRequireDefault(require("./column-header"));
+const ColumnsHeader = _ref => {
+  let {
+    table,
+    selectRange,
+    tableSize,
+    handleDragStart,
+    handleDragEnd
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const [insertColumnIndex, setInsertColumnIndex] = (0, _react.useState)(0);
+  const [addIconPosition, setAddIconPosition] = (0, _react.useState)();
+  const columns = (0, _hooks.useResizeHandlersContext)();
+  const tableRootScrollLeft = (0, _hooks.useTableRootScrollLeftContext)();
+  const [isHoverInAddIcon, setIsHoverInAddIcon] = (0, _react.useState)(false);
+  const tableRootContent = (0, _hooks.useTableRootContext)();
+  const onMouseLeave = (0, _react.useCallback)(() => {
+    setAddIconPosition();
+    setInsertColumnIndex(0);
+    setIsHoverInAddIcon(false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns, tableSize]);
+  const onMouseEnter = (0, _react.useCallback)(addIconPosition => {
+    setAddIconPosition(addIconPosition);
+    setIsHoverInAddIcon(true);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns, tableSize]);
+  const insertColumn = (0, _react.useCallback)(insertColumnIndex => {
+    const validInsertColumnIndex = insertColumnIndex === -1 ? 0 : insertColumnIndex;
+    const insertColumnPosition = insertColumnIndex === -1 ? _constants.TABLE_ELEMENT_POSITION.BEFORE : _constants.TABLE_ELEMENT_POSITION.AFTER;
+    (0, _helpers.insertTableColumn)(editor, table, validInsertColumnIndex, insertColumnPosition, 1);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns, tableSize]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-table-columns-header position-absolute d-print-none",
+    contentEditable: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-table-columns-header-container h-100 d-flex position-absolute",
+    style: {
+      left: -1 * tableRootScrollLeft
+    }
+  }, columns.map((column, index) => {
+    return /*#__PURE__*/_react.default.createElement(_columnHeader.default, {
+      key: index,
+      column: column,
+      index: index,
+      addIconPosition: addIconPosition,
+      tableSize: tableSize,
+      setAddIconPosition: setAddIconPosition,
+      setInsertColumnIndex: setInsertColumnIndex,
+      selectRange: selectRange,
+      handleDragStart: handleDragStart,
+      handleDragEnd: handleDragEnd
+    });
+  }))), addIconPosition && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('position-fixed sdoc-table-add-element-icon-content', {
+      'background-color-tip-blue': isHoverInAddIcon
+    }),
+    contentEditable: false,
+    style: addIconPosition,
+    onMouseEnter: () => onMouseEnter(addIconPosition),
+    onMouseLeave: onMouseLeave,
+    onClick: () => insertColumn(insertColumnIndex)
+  }, '+'), addIconPosition && isHoverInAddIcon && /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-fixed sdoc-table-add-element-tip background-color-tip-blue",
+    style: {
+      left: (addIconPosition === null || addIconPosition === void 0 ? void 0 : addIconPosition.left) + 5,
+      top: (addIconPosition === null || addIconPosition === void 0 ? void 0 : addIconPosition.top) + 12,
+      width: 2,
+      height: tableRootContent.clientHeight,
+      zIndex: 1
+    }
+  }));
+};
+var _default = exports.default = ColumnsHeader;

package/dist/basic-sdk/extension/plugins/table/render/table-header/index.css

@@ -0,0 +1,84 @@
+/* column-header */
+.sdoc-table-wrapper .sdoc-table-columns-header {
+  height: 12px;
+  top: -12px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.sdoc-table-wrapper .sdoc-table-columns-header .sdoc-table-column-header {
+  flex-shrink: 0;
+  border-right: 1px solid rgba(0, 0, 0, .08);
+  background-color: rgb(243, 245, 247);
+  cursor: pointer;
+}
+
+.sdoc-table-wrapper .sdoc-table-columns-header .sdoc-table-column-header.drag {
+  cursor: move;
+}
+
+/* row-header */
+.sdoc-table-wrapper .sdoc-table-rows-header {
+  width: 12px;
+  height: 100%;
+  position: absolute;
+  left: -12px;
+}
+
+.sdoc-table-wrapper .sdoc-table-rows-header .sdoc-table-row-header:first-child {
+  border-top: 1px solid rgba(0, 0, 0, .08);
+}
+
+.sdoc-table-wrapper .sdoc-table-row-header {
+  width: 100%;
+  background-color: rgb(243, 245, 247);
+  border-bottom: 1px solid rgba(0, 0, 0, .08);
+  cursor: pointer;
+}
+
+.sdoc-table-wrapper .sdoc-table-rows-header .sdoc-table-row-header.drag {
+  cursor: move;
+}
+
+.sdoc-table-wrapper .sdoc-table-rows-columns-header {
+  height: 13px;
+  width: 13px;
+  position: absolute;
+  left: -12px;
+  top: -12px;
+  background-color: rgb(243, 245, 247);
+  border-right: 1px solid rgba(0, 0, 0, .08);
+  border-bottom: 1px solid rgba(0, 0, 0, .08);
+  border-top-left-radius: 3px;
+}
+
+/* common */
+.sdoc-table-wrapper .sdoc-table-row-header.range-selected,
+.sdoc-table-wrapper .sdoc-table-column-header.range-selected,
+.sdoc-table-wrapper .sdoc-table-rows-columns-header.range-selected {
+  background-color: #81868F !important;
+}
+
+.sdoc-table-wrapper .sdoc-table-row-header.range-selected-tip,
+.sdoc-table-wrapper .sdoc-table-column-header.range-selected-tip,
+.sdoc-table-wrapper .sdoc-table-rows-columns-header.range-selected-tip {
+  background-color: rgb(233, 235, 237);
+}
+
+/* add-icon */
+.sdoc-table-wrapper .sdoc-table-add-element-icon-content {
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  background-color: #ccc;
+  color: #fff;
+  z-index: 1;
+  line-height: 10px;
+  text-align: center;
+  cursor: default;
+}
+
+.sdoc-table-wrapper .sdoc-table-add-element-icon-content:hover {
+  cursor: pointer;
+}
+

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

@@ -0,0 +1,114 @@
+"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 _reactI18next = require("react-i18next");
+var _constants = require("../../../../constants");
+var _constants2 = require("../../constants");
+var _helpers = require("../../helpers");
+var _hooks = require("../hooks");
+var _columnsHeader = _interopRequireDefault(require("./columns-header"));
+var _rowsColumnsHeader = _interopRequireDefault(require("./rows-columns-header"));
+var _rowsHeader = _interopRequireDefault(require("./rows-header"));
+require("./index.css");
+const TableHeader = _ref => {
+  let {
+    editor,
+    table,
+    setSelectedRange,
+    setIsDragMove
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const columns = (0, _hooks.useResizeHandlersContext)();
+  const selectedRange = (0, _hooks.useTableSelectedRangeContext)() || _constants2.EMPTY_SELECTED_RANGE;
+  const selectColumn = (0, _react.useCallback)(columnIndex => {
+    const selectedRange = (0, _helpers.getTableColumnSelectedRange)(table, columnIndex);
+    setSelectedRange(selectedRange);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns]);
+  const selectRow = (0, _react.useCallback)(rowIndex => {
+    const selectedRange = (0, _helpers.getTableRowSelectedRange)(table, rowIndex);
+    setSelectedRange(selectedRange);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns]);
+  const selectTable = (0, _react.useCallback)(() => {
+    const columnsCount = columns.length;
+    const rowsCount = table.children.length;
+    const range = {
+      minRowIndex: 0,
+      maxRowIndex: rowsCount - 1,
+      minColIndex: 0,
+      maxColIndex: columnsCount - 1
+    };
+    setSelectedRange(range);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns]);
+  const tableSize = [table.children.length, columns.length];
+  const handleDragStart = event => {
+    event.stopPropagation();
+    const {
+      tableSelectedRange
+    } = editor;
+    const tableId = table.id;
+    const {
+      minColIndex,
+      maxColIndex,
+      minRowIndex,
+      maxRowIndex
+    } = tableSelectedRange;
+    const dragType = (0, _helpers.getTableDragType)(table, selectedRange);
+    const startIndex = dragType === _constants2.DRAG_HANDLER_COLUMN ? minColIndex : minRowIndex;
+    const endIndex = dragType === _constants2.DRAG_HANDLER_ROW ? maxRowIndex : maxColIndex;
+    const data = {
+      tableId,
+      dragType,
+      startIndex,
+      endIndex
+    };
+    const dragData = JSON.stringify(data);
+    event.dataTransfer.setData(_constants.TABLE_DRAG_KEY, dragData);
+    event.dataTransfer.effectAllowed = 'move';
+    const moveCount = endIndex - startIndex + 1;
+    const tipText = dragType === _constants2.DRAG_HANDLER_COLUMN ? t('Move_column_count', {
+      count: moveCount
+    }) : t('Move_row_count', {
+      count: moveCount
+    });
+    const dragImage = (0, _helpers.generateDragMoveElement)(tipText);
+    event.dataTransfer.setDragImage(dragImage, 0, 0);
+    setIsDragMove(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  };
+  const handleDragEnd = event => {
+    setIsDragMove(false);
+    const indicator = document.getElementById('sdoc-drag-image');
+    indicator.style.display = 'none';
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_columnsHeader.default, {
+    table: table,
+    selectRange: selectColumn,
+    tableSize: tableSize,
+    handleDragStart: handleDragStart,
+    handleDragEnd: handleDragEnd
+  }), /*#__PURE__*/_react.default.createElement(_rowsColumnsHeader.default, {
+    selectRange: selectTable,
+    tableSize: tableSize
+  }), /*#__PURE__*/_react.default.createElement(_rowsHeader.default, {
+    table: table,
+    selectRange: selectRow,
+    tableSize: tableSize,
+    handleDragStart: handleDragStart,
+    handleDragEnd: handleDragEnd
+  }));
+};
+var _default = exports.default = TableHeader;

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

@@ -0,0 +1,32 @@
+"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"));
+var _objectUtils = _interopRequireDefault(require("../../../../../utils/object-utils"));
+var _hooks = require("../hooks");
+const RowsColumnsHeader = _ref => {
+  let {
+    selectRange,
+    tableSize
+  } = _ref;
+  const selectedRange = (0, _hooks.useTableSelectedRangeContext)();
+  const isSelectedAllTableCells = _objectUtils.default.isSameObject(selectedRange, {
+    minRowIndex: 0,
+    maxRowIndex: tableSize[0] - 1,
+    minColIndex: 0,
+    maxColIndex: tableSize[1] - 1
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-table-rows-columns-header d-print-none', {
+      'range-selected': isSelectedAllTableCells
+    }),
+    contentEditable: false,
+    onClick: selectRange
+  });
+};
+var _default = exports.default = RowsColumnsHeader;

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

@@ -0,0 +1,90 @@
+"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 _constants = require("../../../constants");
+var _helpers = require("../../../helpers");
+var _hooks = require("../../hooks");
+var _rowHeader = _interopRequireDefault(require("./row-header"));
+const RowsHeader = _ref => {
+  let {
+    table,
+    selectRange,
+    tableSize,
+    handleDragStart,
+    handleDragEnd
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const {
+    children
+  } = table;
+  const [insertRowIndex, setInsertRowIndex] = (0, _react.useState)(0);
+  const [addIconPosition, setAddIconPosition] = (0, _react.useState)();
+  const [isHoverInAddIcon, setIsHoverInAddIcon] = (0, _react.useState)(false);
+  const tableRootContent = (0, _hooks.useTableRootContext)();
+  const onMouseLeave = (0, _react.useCallback)(() => {
+    setAddIconPosition();
+    setInsertRowIndex(0);
+    setIsHoverInAddIcon(false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableSize, table]);
+  const onMouseEnter = (0, _react.useCallback)(addIconPosition => {
+    setAddIconPosition(addIconPosition);
+    setIsHoverInAddIcon(true);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableSize, table]);
+  const insertRow = (0, _react.useCallback)(insertRowIndex => {
+    const validInsertRowIndex = insertRowIndex === -1 ? 0 : insertRowIndex;
+    const insertRowPosition = insertRowIndex === -1 ? _constants.TABLE_ELEMENT_POSITION.BEFORE : _constants.TABLE_ELEMENT_POSITION.AFTER;
+    (0, _helpers.insertTableRow)(editor, table, validInsertRowIndex, insertRowPosition, 1);
+    setAddIconPosition();
+    setIsHoverInAddIcon(false);
+    setInsertRowIndex(0);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableSize, table]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-table-rows-header h-100 position-absolute d-flex flex-column d-print-none",
+    contentEditable: false
+  }, children.map((row, index) => {
+    return /*#__PURE__*/_react.default.createElement(_rowHeader.default, {
+      key: row.id,
+      index: index,
+      row: row,
+      addIconPosition: addIconPosition,
+      tableSize: tableSize,
+      setAddIconPosition: setAddIconPosition,
+      setInsertRowIndex: setInsertRowIndex,
+      selectRange: selectRange,
+      handleDragStart: handleDragStart,
+      handleDragEnd: handleDragEnd
+    });
+  })), addIconPosition && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('position-fixed sdoc-table-add-element-icon-content', {
+      'background-color-tip-blue': isHoverInAddIcon
+    }),
+    style: addIconPosition,
+    onMouseEnter: () => onMouseEnter(addIconPosition),
+    onMouseLeave: onMouseLeave,
+    onClick: () => insertRow(insertRowIndex)
+  }, '+'), addIconPosition && isHoverInAddIcon && /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-fixed sdoc-table-add-element-tip background-color-tip-blue",
+    style: {
+      left: (addIconPosition === null || addIconPosition === void 0 ? void 0 : addIconPosition.left) + 11,
+      top: (addIconPosition === null || addIconPosition === void 0 ? void 0 : addIconPosition.top) + 6,
+      width: tableRootContent.clientWidth + 1,
+      height: 2,
+      zIndex: 1
+    }
+  }));
+};
+var _default = exports.default = RowsHeader;