@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,265 @@
+"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 _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../../../constants");
+var _tableTemplate = _interopRequireDefault(require("../table-template"));
+require("./index.css");
+const TableSizePopover = _ref => {
+  let {
+    editor,
+    target,
+    trigger = 'legacy',
+    placement = 'bottom-start',
+    popperClassName,
+    createTable,
+    tableSizeRef,
+    handleClosePopover,
+    callback
+  } = _ref;
+  const minSize = [5, 10];
+  const maxSize = [10, 10];
+  const [displaySize, setDisplaySize] = (0, _react.useState)([5, 10]);
+  const [selectedSize, setSelectedSize] = (0, _react.useState)([1, 1]);
+  const ref = (0, _react.useRef)(null);
+  const templateRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    ref.current['firstRender'] = true;
+  }, []);
+  const onHandleTableSize = (0, _react.useCallback)(function () {
+    let cellPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [1, 1];
+    let newDisplaySize = displaySize.slice(0);
+    const cellPositionX = cellPosition[0];
+    const cellPositionY = cellPosition[1];
+    newDisplaySize[0] = cellPositionX < minSize[0] ? minSize[0] : cellPositionX + 1;
+    newDisplaySize[1] = cellPositionY < minSize[1] ? minSize[1] : cellPositionY + 1;
+    if (newDisplaySize[0] > maxSize[0]) {
+      newDisplaySize[0] = maxSize[0];
+    }
+    if (newDisplaySize[1] > maxSize[1]) {
+      newDisplaySize[1] = maxSize[1];
+    }
+    setDisplaySize(newDisplaySize);
+    setSelectedSize(cellPosition);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [displaySize, selectedSize, maxSize, minSize]);
+  const onCreateTable = (0, _react.useCallback)(() => {
+    createTable(selectedSize);
+    ref && ref.current && ref.current.toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedSize, ref]);
+  const onTemplateItemSelectedStyle = (0, _react.useCallback)(color => {
+    const templateEl = document.getElementById('sdoc-table-template-review-btn');
+    templateEl.style['backgroundColor'] = color;
+  }, []);
+  const handleSizeDown = (0, _react.useCallback)(e => {
+    const {
+      keyCode
+    } = e;
+    const {
+      UpArrow,
+      DownArrow,
+      Enter,
+      RightArrow,
+      LeftArrow
+    } = _constants.KeyCodes;
+    const newSelectedSize = selectedSize.slice(0);
+    if (keyCode === Enter) {
+      e.preventDefault();
+      onCreateTable();
+    }
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (newSelectedSize[0] > 1) {
+        newSelectedSize[0] = newSelectedSize[0] - 1;
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      newSelectedSize[0] = newSelectedSize[0] + 1;
+    }
+    if (keyCode === LeftArrow) {
+      e.preventDefault();
+      if (newSelectedSize[1] > 1) {
+        newSelectedSize[1] = newSelectedSize[1] - 1;
+      }
+    }
+    if (keyCode === RightArrow) {
+      e.preventDefault();
+      newSelectedSize[1] = newSelectedSize[1] + 1;
+    }
+    onHandleTableSize(newSelectedSize);
+  }, [onCreateTable, onHandleTableSize, selectedSize]);
+  const handleTableSizeKeyDown = (0, _react.useCallback)(e => {
+    if (document.getElementsByClassName('sdoc-table-template-popover')[0]) {
+      templateRef.current.handleTableTemplateKeyDown(e);
+      return;
+    }
+    const {
+      keyCode
+    } = e;
+    const {
+      UpArrow,
+      DownArrow,
+      Enter,
+      RightArrow,
+      LeftArrow,
+      Esc
+    } = _constants.KeyCodes;
+    const isInitSize = selectedSize[0] === 1 && selectedSize[1] === 1;
+    const templateEl = document.getElementById('sdoc-table-template-review-btn');
+    // Currently focusing on the template menu item
+    if (templateEl.style['background-color']) {
+      if (keyCode === DownArrow) {
+        e.preventDefault();
+        onTemplateItemSelectedStyle('');
+      }
+      // exit table size popover
+      if (keyCode === LeftArrow) {
+        e.preventDefault();
+        onTemplateItemSelectedStyle('');
+        ref.current['firstRender'] = true;
+        ref.current.toggle();
+      }
+      if (keyCode === Enter) {
+        e.preventDefault();
+        onTemplateItemSelectedStyle('');
+        templateRef.current.uncontrolledTemplatePopoverRef.current.toggle();
+      }
+      if (keyCode === Esc) {
+        e.preventDefault();
+        handleClosePopover();
+      }
+      return;
+    }
+
+    // left and right
+    if (keyCode === LeftArrow) {
+      e.preventDefault();
+      handleSizeDown(e);
+    }
+    if (keyCode === RightArrow) {
+      e.preventDefault();
+      if (ref.current['firstRender']) {
+        ref.current['firstRender'] = false;
+        onTemplateItemSelectedStyle('#e3e3e3');
+        return;
+      }
+      handleSizeDown(e);
+    }
+
+    // up and down
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (isInitSize) {
+        onTemplateItemSelectedStyle('#e3e3e3');
+      } else {
+        handleSizeDown(e);
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      onTemplateItemSelectedStyle('');
+      handleSizeDown(e);
+    }
+
+    // enter
+    if (keyCode === Enter) {
+      e.preventDefault();
+      handleSizeDown(e);
+    }
+    if (keyCode === Esc) {
+      e.preventDefault();
+      handleClosePopover();
+    }
+  }, [handleClosePopover, handleSizeDown, onTemplateItemSelectedStyle, selectedSize]);
+  (0, _react.useImperativeHandle)(tableSizeRef, () => {
+    return {
+      handleTableSizeKeyDown: handleTableSizeKeyDown,
+      uncontrolledPopoverRef: ref
+    };
+  });
+  const renderTableSize = (0, _react.useCallback)(() => {
+    let tableSize = [];
+    for (let i = 1; i <= displaySize[0]; i++) {
+      let children = [];
+      for (let j = 1; j <= displaySize[1]; j++) {
+        const isSelectedChild = i <= selectedSize[0] && selectedSize[0] !== 0 && j <= selectedSize[1] && selectedSize[1] !== 0;
+        const child = /*#__PURE__*/_react.default.createElement("div", {
+          key: `sdoc-table-size-cell-${i}-${j}`,
+          className: (0, _classnames.default)('sdoc-table-size-cell', {
+            'active': isSelectedChild
+          }),
+          onClick: onCreateTable,
+          onMouseEnter: () => onHandleTableSize([i, j])
+        });
+        children.push(child);
+      }
+      tableSize.push(/*#__PURE__*/_react.default.createElement("div", {
+        key: `sdoc-table-size-row-${i}`,
+        className: "sdoc-table-size-row d-flex"
+      }, children));
+    }
+    return tableSize;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [displaySize, selectedSize]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: target,
+    className: "sdoc-selected-table-size-popover sdoc-sub-dropdown-menu sdoc-dropdown-menu",
+    trigger: trigger,
+    placement: placement,
+    hideArrow: true,
+    fade: false,
+    ref: ref,
+    popperClassName: popperClassName
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-selected-table-tools-container"
+  }, /*#__PURE__*/_react.default.createElement(MenuItem, {
+    id: "sdoc-table-template-review-btn",
+    text: "Table_template",
+    iconClassname: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-table-size-select"
+  }, renderTableSize()), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-selected-table-size-tip w-100 "
+  }, `${selectedSize[0]} x ${selectedSize[1]}`), /*#__PURE__*/_react.default.createElement(_tableTemplate.default, {
+    templateRef: templateRef,
+    editor: editor,
+    targetId: "sdoc-table-template-review-btn",
+    handleClosePopover: handleClosePopover,
+    callback: callback
+  })));
+};
+var _default = exports.default = TableSizePopover;
+const MenuItem = _ref2 => {
+  let {
+    id,
+    className,
+    text,
+    iconClassname
+  } = _ref2;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: (0, _classnames.default)('sdoc-selected-table-size-custom', {
+      className
+    })
+  }, /*#__PURE__*/_react.default.createElement("span", null, t(text)), /*#__PURE__*/_react.default.createElement("i", {
+    className: iconClassname
+  }));
+};

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

@@ -0,0 +1,43 @@
+.sdoc-table-template-inner-popover {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
+  width: 310px;
+  height: 100%;
+  background-color: #fff;
+}
+
+.sdoc-table-template-view-table {
+  padding: 10px;
+  margin: 10px 5px;
+  border: 1px solid #e2e3e6;
+  cursor: pointer;
+}
+
+.sdoc-table-template-view-table:hover {
+  box-shadow: 0 0 3px 2px #e2e3e6;
+}
+
+.sdoc-table-template-view-table.active {
+  box-shadow: 0 0 3px 2px #e2e3e6;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row .sdoc-table-template-cell {
+  width: 28px;
+  height: 15px;
+  border-left: 1px solid #e2e3e6;
+  border-right: 1px solid #e2e3e6;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row {
+  display: flex;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row:first-child .sdoc-table-template-cell {
+  border: none;
+  border-top: 1px solid #e2e3e6;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row:last-child .sdoc-table-template-cell {
+  border-bottom: 1px solid #e2e3e6;
+}

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

@@ -0,0 +1,129 @@
+"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 _reactstrap = require("reactstrap");
+var _constants = require("../../../../../constants");
+var _constants2 = require("../../constants");
+var _helpers = require("../../helpers");
+var _sampleTable = _interopRequireDefault(require("./sample-table"));
+require("./index.css");
+require("../../render/alternate-color.css");
+const TableTemplate = _ref => {
+  let {
+    editor,
+    targetId,
+    templateRef,
+    handleClosePopover,
+    callback
+  } = _ref;
+  const ref = (0, _react.useRef)(null);
+  const [position, setPosition] = (0, _react.useState)([-1, -1]);
+  const tableTemplatePreviewList = (0, _react.useMemo)(() => Reflect.ownKeys(_constants2.TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP), []);
+  const handleClickTemplate = (0, _react.useCallback)(alternateColor => {
+    callback && callback();
+    (0, _helpers.insertTableByTemplate)(editor, alternateColor);
+  }, [callback, editor]);
+  const handleTableTemplateKeyDown = (0, _react.useCallback)(e => {
+    const {
+      keyCode
+    } = e;
+    const {
+      UpArrow,
+      DownArrow,
+      Enter,
+      RightArrow,
+      LeftArrow,
+      Esc
+    } = _constants.KeyCodes;
+    const position = ref.current.position;
+    const isInitPostion = position[0] === -1 && position[1] === -1;
+
+    // left and right
+    if (keyCode === LeftArrow) {
+      e.preventDefault();
+      if (position[0] > 0) {
+        const newPosition = [position[0] - 1, position[1]];
+        ref.current.position = newPosition;
+        setPosition(newPosition);
+      }
+    }
+    if (keyCode === RightArrow) {
+      e.preventDefault();
+      // Enter
+      if (isInitPostion) {
+        ref.current.position = [0, 0];
+        setPosition([0, 0]);
+        return;
+      }
+      if (position[0] < 1) {
+        const newPosition = [position[0] + 1, position[1]];
+        ref.current.position = newPosition;
+        setPosition(newPosition);
+      }
+    }
+
+    // up and down
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (isInitPostion) return;
+      if (position[1] > 0) {
+        const newPosition = [position[0], position[1] - 1];
+        ref.current.position = newPosition;
+        setPosition(newPosition);
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      if (isInitPostion) return;
+      if (position[1] < 1) {
+        const newPosition = [position[0], position[1] + 1];
+        ref.current.position = newPosition;
+        setPosition(newPosition);
+      }
+    }
+
+    // enter
+    if (keyCode === Enter) {
+      e.preventDefault();
+      if (isInitPostion) return;
+      const key = JSON.stringify(position);
+      handleClickTemplate(_constants2.TABLE_TEMPLATE_POSITION_MAP[key]);
+      handleClosePopover();
+    }
+    if (keyCode === Esc) {
+      e.preventDefault();
+      handleClosePopover();
+    }
+  }, [handleClickTemplate, handleClosePopover]);
+  (0, _react.useImperativeHandle)(templateRef, () => {
+    return {
+      handleTableTemplateKeyDown: handleTableTemplateKeyDown,
+      uncontrolledTemplatePopoverRef: ref
+    };
+  });
+  (0, _react.useEffect)(() => {
+    ref.current.position = [-1, -1];
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: targetId,
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false,
+    className: "sdoc-sub-dropdown-menu sdoc-table-template-popover",
+    innerClassName: "sdoc-table-template-inner-popover",
+    ref: ref
+  }, tableTemplatePreviewList.map((alternateColor, index) => /*#__PURE__*/_react.default.createElement(_sampleTable.default, {
+    key: alternateColor + index,
+    curPositon: position,
+    alternateColor: alternateColor,
+    onClickTemplate: handleClickTemplate
+  })));
+};
+var _default = exports.default = TableTemplate;

package/dist/basic-sdk/extension/plugins/table/popover/table-template/sample-table.js

@@ -0,0 +1,44 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _constants = require("../../constants");
+var _helpers = require("../../helpers");
+require("./index.css");
+const SampleTable = _ref => {
+  let {
+    alternateColor,
+    onClickTemplate,
+    curPositon
+  } = _ref;
+  // generate table
+  const renderTableRow = (0, _react.useCallback)((row, column) => new Array(row).fill(null).map((_, index) => /*#__PURE__*/_react.default.createElement("div", {
+    className: `sdoc-table-template-row table-row ${(0, _helpers.getCellHighlightClassName)(alternateColor, index)}`,
+    key: `sdoc-template-table-row-${index}`,
+    onClick: () => {
+      onClickTemplate(alternateColor);
+    }
+  }, new Array(column).fill(null).map((_, index) => /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-table-template-cell",
+    key: `sdoc-template-table-cell-${index}`
+  })))), [onClickTemplate, alternateColor]);
+  const key = JSON.stringify(curPositon);
+  const isActive = _constants.TABLE_TEMPLATE_POSITION_MAP[key] === alternateColor;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-table-template-view-table', {
+      'active': isActive
+    })
+  }, renderTableRow(4, 4));
+};
+SampleTable.protoTypes = {
+  alternateColor: _propTypes.default.string.isRequired,
+  onClickTemplate: _propTypes.default.func.isRequired
+};
+var _default = exports.default = SampleTable;

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

@@ -0,0 +1,37 @@
+/* type1 */
+.sdoc-table-body-3f495d {
+  background-color: #f1f3f6;
+}
+
+.sdoc-table-header-3f495d {
+  background-color: #3f495d;
+  color: white;
+}
+
+/* type2 */
+.sdoc-table-body-2367f2 {
+  background-color: #e1edff;
+}
+
+.sdoc-table-header-2367f2 {
+  background-color: #2367f2;
+  color: white;
+}
+
+/* type3 */
+.sdoc-table-body-f77d21 {
+  background-color: #fff1e8;
+}
+
+.sdoc-table-header-f77d21 {
+  background-color: #f77d21;
+}
+
+/* type4 */
+.sdoc-table-body-0099f4 {
+  background-color: #e1f5ff;
+}
+
+.sdoc-table-header-0099f4 {
+  background-color: #0099f4;
+}

package/dist/basic-sdk/extension/plugins/table/render/drag-handlers/column-drag-handler.js

@@ -0,0 +1,24 @@
+"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"));
+require("../../render/index.css");
+const ColumnDragHandler = _ref => {
+  let {
+    left
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "table-cell-width-just position-absolute resizing",
+    contentEditable: false,
+    style: {
+      left
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "table-cell-width-just-color-tip"
+  }));
+};
+var _default = exports.default = ColumnDragHandler;

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

@@ -0,0 +1,53 @@
+"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 _columnDragHandler = _interopRequireDefault(require("./column-drag-handler"));
+var _rowDragHandler = _interopRequireDefault(require("./row-drag-handler"));
+const DragHandlers = _ref => {
+  let {
+    table
+  } = _ref;
+  const [linePosition, setLinePosition] = (0, _react.useState)({
+    top: 0,
+    left: 0
+  });
+  const [displayType, setDisplayType] = (0, _react.useState)('');
+  const tableID = table.id;
+  const handleShowDragHandler = (0, _react.useCallback)(_ref2 => {
+    let {
+      displayType,
+      left,
+      top,
+      tableId
+    } = _ref2;
+    if (tableId !== tableID) return;
+    const maskOffset = 2;
+    setLinePosition({
+      top,
+      left: left - maskOffset
+    });
+    setDisplayType(displayType);
+  }, [tableID]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.TABLE_SHOW_DRAG_HANDLER, handleShowDragHandler);
+    return () => {
+      unsubscribe();
+    };
+  }, [handleShowDragHandler]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayType === _constants2.DRAG_HANDLER_ROW && /*#__PURE__*/_react.default.createElement(_rowDragHandler.default, {
+    top: linePosition.top
+  }), displayType === _constants2.DRAG_HANDLER_COLUMN && /*#__PURE__*/_react.default.createElement(_columnDragHandler.default, {
+    left: linePosition.left
+  }));
+};
+var _default = exports.default = DragHandlers;

package/dist/basic-sdk/extension/plugins/table/render/drag-handlers/row-drag-handler.js

@@ -0,0 +1,24 @@
+"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"));
+require("../../render/index.css");
+const RowDragHandler = _ref => {
+  let {
+    top
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "table-row-height-just position-absolute resizing",
+    contentEditable: false,
+    style: {
+      top
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "table-row-height-just-color-tip"
+  }));
+};
+var _default = exports.default = RowDragHandler;