@seafile/comment-editor 0.0.1-alpha.9 → 0.0.2-alpha.0

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

@@ -1,76 +0,0 @@
-"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

@@ -1,169 +0,0 @@
-.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

@@ -1,271 +0,0 @@
-"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;