@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableSelectedRangeContext = exports.useTableRootScrollLeftContext = exports.useTableRootContext = exports.useSettingSelectRangeContext = exports.useResizeHandlersContext = exports.useContextMenu = exports.TableSelectedRangeContext = exports.TableRootScrollLeftContext = exports.TableRootContext = exports.SettingSelectRangeContext = exports.ResizeHandlersContext = void 0;
+var _react = require("react");
+var _useScrollContext = require("../../../../hooks/use-scroll-context");
+const TableRootContext = exports.TableRootContext = /*#__PURE__*/(0, _react.createContext)();
+const useTableRootContext = () => {
+  return (0, _react.useContext)(TableRootContext);
+};
+exports.useTableRootContext = useTableRootContext;
+const TableSelectedRangeContext = exports.TableSelectedRangeContext = /*#__PURE__*/(0, _react.createContext)();
+const useTableSelectedRangeContext = () => {
+  return (0, _react.useContext)(TableSelectedRangeContext);
+};
+exports.useTableSelectedRangeContext = useTableSelectedRangeContext;
+const ResizeHandlersContext = exports.ResizeHandlersContext = /*#__PURE__*/(0, _react.createContext)();
+const useResizeHandlersContext = () => {
+  return (0, _react.useContext)(ResizeHandlersContext);
+};
+exports.useResizeHandlersContext = useResizeHandlersContext;
+const SettingSelectRangeContext = exports.SettingSelectRangeContext = /*#__PURE__*/(0, _react.createContext)();
+const useSettingSelectRangeContext = () => {
+  return (0, _react.useContext)(SettingSelectRangeContext);
+};
+exports.useSettingSelectRangeContext = useSettingSelectRangeContext;
+const TableRootScrollLeftContext = exports.TableRootScrollLeftContext = /*#__PURE__*/(0, _react.createContext)();
+const useTableRootScrollLeftContext = () => {
+  return (0, _react.useContext)(TableRootScrollLeftContext);
+};
+exports.useTableRootScrollLeftContext = useTableRootScrollLeftContext;
+const useContextMenu = tableScrollWrapper => {
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const [isShowContextMenu, setShowContextMenu] = (0, _react.useState)();
+  const [menuPosition, setMenuPosition] = (0, _react.useState)({});
+  const onContextMenu = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    const menuPosition = {
+      left: event.clientX,
+      top: event.clientY
+    };
+    setShowContextMenu(true);
+    setMenuPosition(menuPosition);
+  }, []);
+  const hideContextMenu = (0, _react.useCallback)(e => {
+    if (isShowContextMenu) {
+      setShowContextMenu(false);
+    }
+  }, [isShowContextMenu]);
+  const hideByContextmenuEvent = (0, _react.useCallback)(e => {
+    const table = tableScrollWrapper.current;
+    const clickIsInCurrentTable = table && table.contains(e.target) && table !== e.target;
+    if (!clickIsInCurrentTable) {
+      setShowContextMenu(false);
+    }
+  }, [tableScrollWrapper]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('mousedown', hideContextMenu);
+    document.addEventListener('contextmenu', hideByContextmenuEvent, true);
+    scrollRef.current && scrollRef.current.addEventListener('scroll', hideContextMenu);
+    return () => {
+      document.removeEventListener('mousedown', hideContextMenu);
+      document.removeEventListener('contextmenu', hideByContextmenuEvent, true);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', hideContextMenu);
+    };
+  }, [hideContextMenu, hideByContextmenuEvent, scrollRef]);
+  return {
+    isShowContextMenu,
+    menuPosition,
+    onContextMenu
+  };
+};
+exports.useContextMenu = useContextMenu;

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

@@ -0,0 +1,169 @@
+.sdoc-table-wrapper {
+  width: 100%;
+  margin: 16px 0;
+  page-break-inside:avoid;
+}
+
+.sdoc-table-wrapper+.sdoc-table-wrapper {
+  margin-top: 32px;
+}
+
+.sdoc-table-wrapper .sdoc-table-scroll-wrapper {
+  max-width: 100%;
+  width: fit-content;
+  overflow-x: auto;
+  cursor: default;
+}
+
+.sdoc-table-wrapper.scroll .sdoc-table-scroll-wrapper.scroll-at-right::before,
+.sdoc-table-wrapper.scroll .sdoc-table-scroll-wrapper.scroll-at-center::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 100%;
+  background: linear-gradient(to left, transparent, rgba(0, 0, 0, .1));
+}
+
+.sdoc-table-wrapper.scroll .sdoc-table-scroll-wrapper.scroll-at-center::after,
+.sdoc-table-wrapper.scroll .sdoc-table-scroll-wrapper.scroll-at-left::after {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+  background: linear-gradient(to right, transparent, rgba(0, 0, 0, .1));
+}
+
+.sdoc-table-wrapper .sdoc-table-container {
+  width: fit-content;
+  display: grid;
+  overflow: hidden;
+  cursor: text;
+}
+
+.sdoc-table-wrapper .table-row {
+  height: auto;
+}
+
+.sdoc-table-wrapper .table-cell {
+  display: flex;
+  padding: 10px 10px;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  line-height: 1.5;
+  align-items: flex-start;
+
+}
+
+.sdoc-cell-container {
+  width: 100%;
+}
+
+.table-cell>span {
+  min-width: 1px;
+}
+
+.sdoc-table-wrapper .cell-selected {
+  caret-color: transparent;
+  position: relative;
+}
+
+.sdoc-table-wrapper .table-row-height-just {
+  width: 100%;
+  height: 5px;
+  bottom: -2.5px;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.sdoc-table-wrapper .table-row-height-just:hover {
+  cursor: row-resize;
+  z-index: 2;
+}
+
+.sdoc-table-wrapper .table-row-height-just.resizing .table-row-height-just-color-tip {
+  margin-top: 1.5;
+  height: 2px;
+  width: 100%;
+  background-color: #2d7ff9;
+  border-radius: 1px;
+}
+
+.sdoc-table-wrapper .table-cell-width-just {
+  height: 100%;
+  width: 5px;
+  top: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.sdoc-table-wrapper .table-cell-width-just:hover {
+  cursor: col-resize;
+  z-index: 2;
+}
+
+.sdoc-table-wrapper .table-cell-width-just.resizing .table-cell-width-just-color-tip {
+  margin-left: 1.5px;
+  height: 100%;
+  width: 2px;
+  background-color: #2d7ff9;
+  border-radius: 1px;
+}
+
+.sdoc-table-wrapper .background-color-tip-blue {
+  background-color: #2d7ff9 !important;
+}
+
+.sdoc-table-wrapper .sdoc-table-selected-range .table-cell *::selection {
+  background-color: unset;
+}
+
+.sdoc-table-resize-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+  opacity: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.sdoc-table-resize-mask .sdoc-table-resize-top {
+  position: absolute;
+  top: 1px;
+  width: 100%;
+  height: 1px;
+  cursor: row-resize;
+}
+
+.sdoc-table-resize-mask>div {
+  position: absolute;
+  pointer-events: auto;
+}
+
+.sdoc-table-resize-mask .sdoc-table-resize-bottom {
+  bottom: 1px;
+  width: 100%;
+  height: 1px;
+  cursor: row-resize;
+}
+
+.sdoc-table-resize-mask .sdoc-table-resize-right {
+  right: -1px;
+  width: 1px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.sdoc-table-resize-mask .sdoc-table-resize-left {
+  left: -1px;
+  width: 1px;
+  height: 100%;
+  cursor: col-resize;
+}

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

@@ -0,0 +1,271 @@
+"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"));
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _constants = require("../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _mouseEvent = require("../../../../utils/mouse-event");
+var _objectUtils = _interopRequireDefault(require("../../../../utils/object-utils"));
+var _core = require("../../../core");
+var _constants2 = require("../constants");
+var _helpers = require("../helpers");
+var _dragHandlers = _interopRequireDefault(require("./drag-handlers"));
+var _hooks = require("./hooks");
+var _resizeHandlers = _interopRequireDefault(require("./resize-handlers"));
+var _resizeMask = _interopRequireDefault(require("./resize-mask"));
+var _tableHeader = _interopRequireDefault(require("./table-header"));
+var _tableRoot = _interopRequireDefault(require("./table-root"));
+require("./index.css");
+require("./alternate-color.css");
+const Table = _ref => {
+  let {
+    className,
+    attributes,
+    children,
+    element
+  } = _ref;
+  const isSelected = (0, _slateReact.useSelected)();
+  const editor = (0, _slateReact.useSlateStatic)();
+  const table = (0, _react.useRef)(null);
+  const [startRowIndex, setStartRowIndex] = (0, _react.useState)(0);
+  const [startColIndex, setStartColIndex] = (0, _react.useState)(0);
+  const [startRowSpan, setStartRowSpan] = (0, _react.useState)(1);
+  const [startColSpan, setStartColSpan] = (0, _react.useState)(1);
+  const [isSettingSelectRange, setIsSettingSelectRange] = (0, _react.useState)(false);
+  const [selectedRange, setSelectedRange] = (0, _react.useState)(_constants2.EMPTY_SELECTED_RANGE);
+  const oldColumns = (0, _helpers.getTableColumns)(editor, element);
+  const [columns, setColumns] = (0, _react.useState)(oldColumns);
+  const path = (0, _core.findPath)(editor, element);
+  const [resizeCellMaskInfo, setResizeCellMaskInfo] = (0, _react.useState)({});
+  const [isShowResizeHandlers, setIsShowResizeHandlers] = (0, _react.useState)(false);
+  const [isDraggingResizeHandler, setIsDraggingResizeHandler] = (0, _react.useState)(false);
+  const [isDragMove, setIsDragMove] = (0, _react.useState)(false);
+  const onMouseDown = (0, _react.useCallback)(event => {
+    if (event.button !== 0) return; // right click not deal
+    setIsSettingSelectRange(true);
+    if (!table.current.contains(event.target)) return;
+    const tableCell = (0, _helpers.getFirstTableCell)(event.target);
+    const cellData = tableCell.style.gridArea.split(' / ');
+    setStartRowIndex(Number(tableCell.getAttribute('row-index')));
+    setStartColIndex(Number(tableCell.getAttribute('cell-index')));
+    setStartRowSpan(Number(cellData[2].split(' ')[1]));
+    setStartColSpan(Number(cellData[3].split(' ')[1]));
+    setSelectedRange(_constants2.EMPTY_SELECTED_RANGE);
+    (0, _helpers.setTableSelectedRange)(editor, _constants2.EMPTY_SELECTED_RANGE);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const resetState = (0, _react.useCallback)(() => {
+    setIsSettingSelectRange(false);
+    setStartColIndex(0);
+    setStartRowIndex(0);
+    setStartRowSpan(1);
+    setStartColSpan(1);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const setSelectedRangeByClick = (0, _react.useCallback)(range => {
+    setSelectedRange(range);
+    (0, _helpers.setTableSelectedRange)(editor, range);
+    const {
+      minRowIndex,
+      minColIndex
+    } = range;
+    const selection = {
+      offset: 0,
+      path: [...path, minRowIndex, minColIndex, 0]
+    };
+    _slate.Transforms.setSelection(editor, {
+      anchor: selection,
+      focus: selection
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, path]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const cancelTableSelectRangeSubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE, clearRange);
+    const setTableSelectRangeSubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, setRange);
+    return () => {
+      cancelTableSelectRangeSubscribe();
+      setTableSelectRangeSubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    setColumns((0, _helpers.getTableColumns)(editor, element));
+    if (isSettingSelectRange) {
+      const onMouseMove = (0, _lodash.default)(event => {
+        // if event.target not in the table, clear the mouseMove event
+        if (!table.current.contains(event.target)) return;
+        const tableCell = (0, _helpers.getFirstTableCell)(event.target);
+        const endRowIndex = Number(tableCell.getAttribute('row-index'));
+        const endColIndex = Number(tableCell.getAttribute('cell-index'));
+        const cellData = tableCell.style.gridArea.split(' / ');
+        const endRowSpan = Number(cellData[2].split(' ')[1]);
+        const endColSpan = Number(cellData[3].split(' ')[1]);
+        const tableSlateNode = _slateReact.ReactEditor.toSlateNode(editor, table.current);
+        let newSelectedRange = {
+          minRowIndex: Math.min(startRowIndex, endRowIndex),
+          maxRowIndex: startRowIndex < endRowIndex ? endRowIndex + endRowSpan - 1 : startRowIndex + startRowSpan - 1,
+          minColIndex: Math.min(startColIndex, endColIndex),
+          maxColIndex: startColIndex < endColIndex ? endColIndex + endColSpan - 1 : startColIndex + startColSpan - 1
+        };
+        newSelectedRange = (0, _helpers.adjustCombinedCellRange)(tableSlateNode, newSelectedRange);
+        if (!_objectUtils.default.isSameObject(selectedRange, _constants2.EMPTY_SELECTED_RANGE)) {
+          event.preventDefault();
+          _slate.Editor.withoutNormalizing(editor, () => {
+            const selection = {
+              offset: 0,
+              path: [...path, endRowIndex, endColIndex, 0]
+            };
+            _slate.Transforms.setSelection(editor, {
+              anchor: selection,
+              focus: selection
+            });
+          });
+        }
+
+        // same cell
+        if (newSelectedRange.minRowIndex === newSelectedRange.maxRowIndex && newSelectedRange.minColIndex === newSelectedRange.maxColIndex) {
+          setSelectedRange(_constants2.EMPTY_SELECTED_RANGE);
+          (0, _helpers.setTableSelectedRange)(editor, _constants2.EMPTY_SELECTED_RANGE);
+          return;
+        }
+        setSelectedRange(newSelectedRange);
+        (0, _helpers.setTableSelectedRange)(editor, newSelectedRange);
+      }, 200);
+      const onMouseUp = event => {
+        /*
+        if (!ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)) {
+          setTableSelectedRange(editor, selectedRange);
+        }
+        */
+        resetState();
+      };
+      (0, _mouseEvent.registerResizeEvents)({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp
+      });
+      return () => {
+        (0, _mouseEvent.unregisterResizeEvents)({
+          'mousemove': onMouseMove,
+          'mouseup': onMouseUp
+        });
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element, isSettingSelectRange, selectedRange, element]);
+  const setRange = (0, _react.useCallback)((table, range) => {
+    if (element.id !== table.id) {
+      setSelectedRange(_constants2.EMPTY_SELECTED_RANGE);
+    } else {
+      setSelectedRange(range);
+    }
+    (0, _helpers.setTableSelectedRange)(editor, range);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element]);
+  const clearRange = (0, _react.useCallback)(() => {
+    setSelectedRange(_constants2.EMPTY_SELECTED_RANGE);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const tableContainerClassName = (0, _classnames.default)('sdoc-table-container position-relative', attributes.className, className, {
+    'sdoc-table-selected': isSelected,
+    'sdoc-table-selected-range': !_objectUtils.default.isSameObject(selectedRange, _constants2.EMPTY_SELECTED_RANGE)
+  });
+  const handleShowResizeHandler = (0, _react.useCallback)(cellInfo => {
+    setResizeCellMaskInfo(cellInfo);
+    setIsShowResizeHandlers(true);
+  }, []);
+  const hideResizeHandlers = (0, _react.useCallback)(() => {
+    setIsShowResizeHandlers(false);
+    setIsDraggingResizeHandler(false);
+  }, []);
+  const handlerStartDragging = (0, _react.useCallback)(() => {
+    setIsDraggingResizeHandler(true);
+  }, []);
+  let style = element.style ? {
+    ...element.style
+  } : {};
+  const columnWidthList = columns.map(item => `${item.width}px`);
+  style.gridTemplateColumns = columnWidthList.join(' ');
+  const rowHeightList = element.children.map((item, index) => (0, _helpers.getRowHeight)(item, index));
+  style.gridAutoRows = rowHeightList.map(item => `minmax(${item}px, auto)`).join(' ');
+  return /*#__PURE__*/_react.default.createElement(_hooks.TableSelectedRangeContext.Provider, {
+    value: selectedRange
+  }, /*#__PURE__*/_react.default.createElement(_hooks.ResizeHandlersContext.Provider, {
+    value: columns
+  }, /*#__PURE__*/_react.default.createElement(_hooks.SettingSelectRangeContext.Provider, {
+    value: isSettingSelectRange
+  }, /*#__PURE__*/_react.default.createElement(_tableRoot.default, {
+    columns: columns,
+    attributes: attributes
+  }, isSelected && /*#__PURE__*/_react.default.createElement(_tableHeader.default, {
+    editor: editor,
+    table: element,
+    setSelectedRange: setSelectedRangeByClick,
+    setIsDragMove: setIsDragMove
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(tableContainerClassName),
+    style: style,
+    onMouseDown: onMouseDown,
+    ref: table,
+    "data-id": element.id
+  }, children, !isSettingSelectRange && /*#__PURE__*/_react.default.createElement(_resizeMask.default, {
+    editor: editor,
+    table: element,
+    handleShowResizeHandler: handleShowResizeHandler,
+    hideResizeHandlers: hideResizeHandlers,
+    handlerStartDragging: handlerStartDragging,
+    isDraggingResizeHandler: isDraggingResizeHandler
+  }), !isSettingSelectRange && isShowResizeHandlers && /*#__PURE__*/_react.default.createElement(_resizeHandlers.default, {
+    hideResizeHandlers: hideResizeHandlers,
+    element: element,
+    resizeCellMaskInfo: resizeCellMaskInfo,
+    isDraggingResizeHandler: isDraggingResizeHandler
+  }), isDragMove && /*#__PURE__*/_react.default.createElement(_dragHandlers.default, {
+    table: element
+  }))))));
+};
+function renderTable(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const readOnly = (0, _slateReact.useReadOnly)();
+  if (readOnly) {
+    const {
+      className,
+      attributes,
+      children,
+      element
+    } = props;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const editor = (0, _slateReact.useSlateStatic)();
+    const columns = (0, _helpers.getTableColumns)(editor, element);
+    let style = element.style ? {
+      ...element.style
+    } : {};
+    const columnWidthList = columns.map(item => `${item.width}px`);
+    style.gridTemplateColumns = columnWidthList.join(' ');
+    const rowHeightList = element.children.map((item, index) => (0, _helpers.getRowHeight)(item, index));
+    style.gridAutoRows = rowHeightList.map(item => `minmax(${item}px, auto)`).join(' ');
+    return /*#__PURE__*/_react.default.createElement(_tableRoot.default, {
+      columns: columns,
+      attributes: attributes
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('sdoc-table-container', attributes.className, className),
+      "data-id": element.id,
+      style: style
+    }, children));
+  }
+  return /*#__PURE__*/_react.default.createElement(Table, props);
+}
+var _default = exports.default = renderTable;