@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _constants = require("../../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../../utils/event-bus"));
+var _KebabToCamel = _interopRequireDefault(require("../../../../../utils/Kebab-to-camel"));
+var _objectUtils = _interopRequireDefault(require("../../../../../utils/object-utils"));
+var _commons = require("../../../../commons");
+var _constants2 = require("../../../../constants");
+var _core = require("../../../../core");
+var _constants3 = require("../../constants");
+var _helpers = require("../../helpers");
+var _colorSelectorPopover = _interopRequireDefault(require("../color-selector-popover"));
+var _horizontalAlignPopover = _interopRequireDefault(require("../horizontal-align-popover"));
+var _verticalAlignPopover = _interopRequireDefault(require("../vertical-align-popover"));
+var _insertTableElement = _interopRequireDefault(require("./insert-table-element"));
+require("./index.css");
+class TableContextMenu extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "updateMenuPosition", () => {
+      const menuHeight = this.menu.offsetHeight;
+
+      // get height of context menu when the menu is drawing completed in this page
+      if (menuHeight === 0) {
+        requestAnimationFrame(this.updateMenuPosition);
+        return;
+      }
+      let top = 0;
+      if (this.position.top + menuHeight > document.body.clientHeight) {
+        top = document.body.clientHeight - menuHeight - 5;
+      } else {
+        top = this.position.top;
+      }
+      const left = this.position.left + 3;
+      this.setState({
+        contextStyle: {
+          top,
+          left
+        }
+      });
+    });
+    (0, _defineProperty2.default)(this, "insertTableElement", (type, position, count) => {
+      const {
+        editor
+      } = this.props;
+      (0, _helpers.insertTableElement)(editor, type, position, count);
+    });
+    (0, _defineProperty2.default)(this, "removeTableElements", type => {
+      const {
+        editor
+      } = this.props;
+      (0, _helpers.removeTableElement)(editor, type);
+    });
+    (0, _defineProperty2.default)(this, "renderRemoveBtn", (type, title) => {
+      return /*#__PURE__*/_react.default.createElement("button", {
+        onMouseDown: this.removeTableElements.bind(this, type),
+        className: "dropdown-item"
+      }, this.props.t(title));
+    });
+    (0, _defineProperty2.default)(this, "combineCells", () => {
+      const {
+        editor
+      } = this.props;
+      (0, _helpers.combineCells)(editor);
+    });
+    (0, _defineProperty2.default)(this, "toggleSplitCellSettingDialog", () => {
+      this.eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+        type: _constants2.ELEMENT_TYPE.TABLE_CELL
+      });
+    });
+    this.state = {
+      contextStyle: {},
+      isDisableFitTableWidthToScreen: false
+    };
+    this.position = null;
+    this.eventBus = _eventBus.default.getInstance();
+    this.horizontalAlignRef = /*#__PURE__*/_react.default.createRef();
+    this.verticalAlignRef = /*#__PURE__*/_react.default.createRef();
+    this.colorSelectorRef = /*#__PURE__*/_react.default.createRef();
+  }
+  componentDidMount() {
+    this.position = this.props.contextMenuPosition;
+    this.updateMenuPosition();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const nextContextMenuPosition = nextProps.contextMenuPosition;
+    if (!_objectUtils.default.isSameObject(nextContextMenuPosition, this.props.contextMenuPosition)) {
+      this.position = nextContextMenuPosition;
+      this.updateMenuPosition();
+    }
+  }
+  componentWillUnmount() {
+    this.menu = null;
+  }
+  isMergedCell() {
+    const {
+      editor
+    } = this.props;
+    const {
+      colspan,
+      rowspan
+    } = (0, _core.getSelectedNodeByType)(editor, _constants2.ELEMENT_TYPE.TABLE_CELL);
+    return colspan > 1 || rowspan > 1;
+  }
+  render() {
+    var _tableCellNode$style, _tableCellNode$style2;
+    const {
+      contextStyle,
+      isDisableFitTableWidthToScreen
+    } = this.state;
+    const {
+      editor,
+      t,
+      readonly
+    } = this.props;
+    const currentTable = (0, _core.getSelectedNodeByType)(editor, _constants2.ELEMENT_TYPE.TABLE);
+    if (!currentTable) return null;
+    const currentRow = (0, _core.getSelectedNodeByType)(editor, _constants2.ELEMENT_TYPE.TABLE_ROW);
+    const currentRowsCount = currentTable.children.length;
+    const currentColumnsCount = currentRow.children.length;
+    const {
+      tableSelectedRange
+    } = editor;
+    const selectedRows = tableSelectedRange.maxRowIndex - tableSelectedRange.minRowIndex + 1;
+    const selectedCols = tableSelectedRange.maxColIndex - tableSelectedRange.minColIndex + 1;
+    const canAddRowsCount = currentRowsCount + selectedRows > _constants3.TABLE_MAX_ROWS ? _constants3.TABLE_MAX_ROWS - currentRowsCount : selectedRows;
+    const canAddColsCount = currentColumnsCount + selectedCols > _constants3.TABLE_MAX_COLUMNS ? _constants3.TABLE_MAX_COLUMNS - currentColumnsCount : selectedCols;
+    const enableCombineCell = !_objectUtils.default.isSameObject(tableSelectedRange, _constants3.EMPTY_SELECTED_RANGE);
+    const enableSplitCell = !enableCombineCell;
+    const isMergedCell = this.isMergedCell();
+    const tableCellNode = (0, _core.getSelectedNodeByType)(editor, _constants2.ELEMENT_TYPE.TABLE_CELL);
+    const horizontalAlign = tableCellNode === null || tableCellNode === void 0 ? void 0 : (_tableCellNode$style = tableCellNode.style) === null || _tableCellNode$style === void 0 ? void 0 : _tableCellNode$style[_constants3.TABLE_CELL_STYLE.TEXT_ALIGN];
+    const verticalAlign = tableCellNode === null || tableCellNode === void 0 ? void 0 : (_tableCellNode$style2 = tableCellNode.style) === null || _tableCellNode$style2 === void 0 ? void 0 : _tableCellNode$style2[(0, _KebabToCamel.default)(_constants3.TABLE_CELL_STYLE.ALIGN_ITEMS)];
+    // Check if the table width is fit to screen
+    // Use queueMicrotask to resolve the issue that the table cell combined or split, the table width is not updated immediately
+    queueMicrotask(() => {
+      const isDisable = (0, _helpers.isTableWidthFitScreen)(editor);
+      if (isDisableFitTableWidthToScreen !== isDisable) {
+        this.setState({
+          isDisableFitTableWidthToScreen: (0, _helpers.isTableWidthFitScreen)(editor)
+        });
+      }
+    });
+    return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, {
+      className: "sdoc-context-menu"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: contextStyle,
+      ref: ref => this.menu = ref,
+      className: "sdoc-table-context-menu dropdown-menu"
+    }, /*#__PURE__*/_react.default.createElement(_insertTableElement.default, {
+      type: _constants3.TABLE_ELEMENT.ROW,
+      count: canAddRowsCount,
+      currentCount: currentRowsCount,
+      position: _constants3.TABLE_ELEMENT_POSITION.BEFORE,
+      insertTableElement: this.insertTableElement
+    }), /*#__PURE__*/_react.default.createElement(_insertTableElement.default, {
+      type: _constants3.TABLE_ELEMENT.ROW,
+      count: canAddRowsCount,
+      currentCount: currentRowsCount,
+      position: _constants3.TABLE_ELEMENT_POSITION.AFTER,
+      insertTableElement: this.insertTableElement
+    }), /*#__PURE__*/_react.default.createElement(_insertTableElement.default, {
+      type: _constants3.TABLE_ELEMENT.COLUMN,
+      count: canAddColsCount,
+      currentCount: currentColumnsCount,
+      position: _constants3.TABLE_ELEMENT_POSITION.BEFORE,
+      insertTableElement: this.insertTableElement
+    }), /*#__PURE__*/_react.default.createElement(_insertTableElement.default, {
+      type: _constants3.TABLE_ELEMENT.COLUMN,
+      count: canAddColsCount,
+      currentCount: currentColumnsCount,
+      position: _constants3.TABLE_ELEMENT_POSITION.AFTER,
+      insertTableElement: this.insertTableElement
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'seafile-divider dropdown-divider'
+    }), this.renderRemoveBtn(_constants3.TABLE_ELEMENT.ROW, 'Delete_row'), this.renderRemoveBtn(_constants3.TABLE_ELEMENT.COLUMN, 'Delete_column'), this.renderRemoveBtn(_constants3.TABLE_ELEMENT.TABLE, 'Delete_table'), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'seafile-divider dropdown-divider'
+    }), /*#__PURE__*/_react.default.createElement("button", {
+      className: "dropdown-item",
+      disabled: !enableCombineCell,
+      onMouseDown: this.combineCells
+    }, t('Combine_cell')), /*#__PURE__*/_react.default.createElement("button", {
+      className: "dropdown-item",
+      disabled: !isMergedCell || !enableSplitCell,
+      onMouseDown: this.toggleSplitCellSettingDialog
+    }, t('Split_cell')), /*#__PURE__*/_react.default.createElement("button", {
+      ref: this.horizontalAlignRef,
+      className: "dropdown-item side-extendable"
+    }, /*#__PURE__*/_react.default.createElement("span", null, t('Horizontal_align')), /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-right-slide"
+    })), this.horizontalAlignRef.current && /*#__PURE__*/_react.default.createElement(_horizontalAlignPopover.default, {
+      target: this.horizontalAlignRef,
+      editor: editor,
+      readonly: readonly,
+      horizontalAlign: horizontalAlign
+    }), /*#__PURE__*/_react.default.createElement("button", {
+      ref: this.verticalAlignRef,
+      className: "dropdown-item side-extendable"
+    }, /*#__PURE__*/_react.default.createElement("span", null, t('Vertical_align')), /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-right-slide"
+    })), this.verticalAlignRef.current && /*#__PURE__*/_react.default.createElement(_verticalAlignPopover.default, {
+      target: this.verticalAlignRef,
+      editor: editor,
+      readonly: readonly,
+      verticalAlign: verticalAlign
+    }), /*#__PURE__*/_react.default.createElement("button", {
+      ref: this.colorSelectorRef,
+      className: "dropdown-item side-extendable"
+    }, /*#__PURE__*/_react.default.createElement("span", null, t('Background_color')), /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-right-slide"
+    })), this.colorSelectorRef.current && /*#__PURE__*/_react.default.createElement(_colorSelectorPopover.default, {
+      target: this.colorSelectorRef,
+      editor: editor,
+      readonly: readonly
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: 'seafile-divider dropdown-divider'
+    }), /*#__PURE__*/_react.default.createElement("button", {
+      className: "dropdown-item",
+      disabled: isDisableFitTableWidthToScreen,
+      onMouseDown: () => (0, _helpers.fitTableColumnToScreen)(editor)
+    }, t('Fit_table_to_page_width'))));
+  }
+}
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(TableContextMenu);

package/dist/basic-sdk/extension/plugins/table/menu/table-context-menu/insert-table-element.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../constants");
+class InsertTableElement extends _react.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "insertTableElement", () => {
+      const {
+        type,
+        position
+      } = this.props;
+      const {
+        count
+      } = this.state;
+      this.props.insertTableElement(type, position, count);
+    });
+    (0, _defineProperty2.default)(this, "getTip", () => {
+      const {
+        type,
+        position,
+        t
+      } = this.props;
+      if (type === _constants.TABLE_ELEMENT.ROW) {
+        return position === _constants.TABLE_ELEMENT_POSITION.AFTER ? t('Insert_below') : t('Insert_above');
+      }
+      return position === _constants.TABLE_ELEMENT_POSITION.AFTER ? t('Insert_on_the_right') : t('Insert_on_the_left');
+    });
+    (0, _defineProperty2.default)(this, "onKeyDown", event => {
+      if ((0, _isHotkey.default)('enter', event)) {
+        event.preventDefault();
+        this.insertTableElement();
+        return;
+      }
+    });
+    (0, _defineProperty2.default)(this, "onChange", event => {
+      const value = event.target.value || '0';
+      const newValue = value ? value.replace(/[^\d,]/g, '') : value;
+      if (newValue === this.state.count) return;
+      const {
+        currentCount
+      } = this.props;
+      const numberValue = parseInt(newValue);
+      if (currentCount + numberValue > this.maxCount) {
+        this.setState({
+          count: this.maxCount - currentCount
+        });
+        return;
+      }
+      this.setState({
+        count: numberValue
+      });
+    });
+    this.state = {
+      count: props.count || 1
+    };
+    this.maxCount = props.type === _constants.TABLE_ELEMENT.ROW ? _constants.TABLE_MAX_ROWS : _constants.TABLE_MAX_COLUMNS;
+  }
+  render() {
+    const {
+      count
+    } = this.state;
+    const {
+      t,
+      type,
+      currentCount
+    } = this.props;
+    const isDisabled = currentCount >= this.maxCount;
+    return /*#__PURE__*/_react.default.createElement("button", {
+      onMouseDown: this.insertTableElement,
+      className: "dropdown-item d-flex align-items-center justify-content-between",
+      disabled: isDisabled
+    }, this.getTip(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "insert-number d-flex align-items-center"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      disabled: isDisabled,
+      className: "insert-number-input",
+      onMouseDown: e => {
+        e.stopPropagation();
+      },
+      onKeyDown: this.onKeyDown,
+      value: count,
+      onChange: this.onChange
+    }), /*#__PURE__*/_react.default.createElement("span", null, type === _constants.TABLE_ELEMENT.ROW ? t('Row(s)') : t('Column(s)'))));
+  }
+}
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(InsertTableElement);

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

@@ -0,0 +1,41 @@
+"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 _dropdownMenuItem = _interopRequireDefault(require("../../../../commons/dropdown-menu-item"));
+var _constants = require("../../../../constants");
+var _helpers = require("../../helpers");
+var _tableSizePopover = _interopRequireDefault(require("../../popover/table-size-popover"));
+const TableMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    eventBus
+  } = _ref;
+  const disabled = (0, _helpers.isTableMenuDisabled)(editor, readonly);
+  const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.ELEMENT_TYPE.TABLE];
+  const createTable = (0, _react.useCallback)(size => {
+    const insertPosition = (0, _helpers.getInsertPosition)(editor, _constants.INSERT_POSITION.AFTER);
+    (0, _helpers.insertTable)(editor, size, editor.selection, insertPosition);
+  }, [editor]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    className: "pr-2"
+  }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  })), !disabled && /*#__PURE__*/_react.default.createElement(_tableSizePopover.default, {
+    editor: editor,
+    target: menuConfig.id,
+    trigger: "hover",
+    placement: "right-start",
+    createTable: createTable
+  }));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(TableMenu);

package/dist/basic-sdk/extension/plugins/table/menu/vertical-align-popover/index.js

@@ -0,0 +1,81 @@
+"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 _KebabToCamel = _interopRequireDefault(require("../../../../../utils/Kebab-to-camel"));
+var _core = require("../../../../core");
+var _constants = require("../../constants");
+var _helpers = require("../../helpers");
+require("./style.css");
+const VerticalAlignPopover = _ref => {
+  let {
+    target,
+    editor,
+    readonly,
+    verticalAlign
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const setVerticalAlignStyle = (0, _react.useCallback)(position => {
+    if (readonly) return;
+    const alignItems = (0, _KebabToCamel.default)(_constants.TABLE_CELL_STYLE.ALIGN_ITEMS);
+    (0, _helpers.setCellStyle)(editor, {
+      [alignItems]: position
+    });
+    const focusPoint = editor.selection.focus;
+    // prevent select all text in the editor
+    (0, _core.focusEditor)(editor, focusPoint);
+    // Select last focus point
+    setTimeout(() => {
+      (0, _core.focusEditor)(editor, focusPoint);
+    }, 0);
+  }, [editor, readonly]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: target.current,
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu sdoc-table-alignment-menu"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onMouseDown: () => setVerticalAlignStyle('flex-start')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-checked"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('sdocfont sdoc-check-mark', {
+      active: !verticalAlign || verticalAlign === 'flex-start'
+    })
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "active"
+  }, t('Top_align'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onMouseDown: () => setVerticalAlignStyle('center')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-checked"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('sdocfont sdoc-check-mark', {
+      active: verticalAlign === 'center'
+    })
+  })), /*#__PURE__*/_react.default.createElement("span", null, t('Center_align'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onMouseDown: () => setVerticalAlignStyle('flex-end')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-checked"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)('sdocfont sdoc-check-mark', {
+      active: verticalAlign === 'flex-end'
+    })
+  })), /*#__PURE__*/_react.default.createElement("span", null, t('Bottom_align')))));
+};
+var _default = exports.default = VerticalAlignPopover;

package/dist/basic-sdk/extension/plugins/table/menu/vertical-align-popover/style.css

@@ -0,0 +1,24 @@
+.sdoc-context-menu .sdoc-dropdown-menu {
+    display: flex;
+    flex-direction: column;
+}
+
+.sdoc-table-alignment-menu .sdoc-dropdown-menu-item {
+    padding: 4px 10px !important;
+}
+
+.sdoc-table-alignment-menu .sdoc-dropdown-menu-item .sdoc-checked {
+    margin-right: 6px;
+    height: 21px;
+    line-height: 21px;
+    width: 12px;
+}
+
+.sdoc-table-alignment-menu .sdoc-dropdown-menu-item .sdoc-check-mark {
+    display: none;
+    font-size: 12px !important;
+}
+
+.sdoc-table-alignment-menu .sdoc-dropdown-menu-item .sdoc-check-mark.active {
+    display: inline;
+}

package/dist/basic-sdk/extension/plugins/table/model.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+var _constants2 = require("./constants");
+class Table {
+  constructor(options) {
+    this.type = options.type || _constants.ELEMENT_TYPE.TABLE;
+    this.children = options.children || [
+    // 1 x 1
+    {
+      id: '',
+      type: _constants.ELEMENT_TYPE.TABLE_ROW,
+      children: [{
+        id: '',
+        type: _constants.ELEMENT_TYPE.TABLE_CELL,
+        children: [{
+          text: '',
+          id: ''
+        }],
+        style: {
+          text_align: 'left',
+          alignItems: 'center',
+          background_color: ''
+        },
+        // inherit from table,when insert new cell
+        inherit_style: {
+          text_align: 'left',
+          background_color: ''
+        }
+      }],
+      style: {
+        'min_height': 42
+      }
+    }];
+    this.columns = options.columns || [{
+      width: _constants2.TABLE_CELL_MIN_WIDTH
+    }];
+    this.ui = options.ui || {
+      alternate_highlight: true,
+      // alternate row highlight
+      alternate_highlight_color: ''
+    };
+    this.style = options.style || {
+      gridTemplateColumns: `repeat(1, ${_constants2.TABLE_CELL_MIN_WIDTH}}px)`,
+      // grid
+      gridAutoRows: `minmax(${_constants2.TABLE_ROW_MIN_HEIGHT}}px, auto)`
+    };
+  }
+}
+var _default = exports.default = Table;