@seafile/comment-editor 0.0.1 → 0.0.2-alpha.1

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

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

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

@@ -1,40 +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 _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 = TableMenu;

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

@@ -1,81 +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 _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

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

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