@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/plugin-module/plugins/seatable-column/helpers.js

@@ -1,159 +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.setSeaTableColumn = exports.isMenuDisabled = exports.insertSeaTableColumn = exports.getColumnWidth = exports.getColumnType = exports.getColumnByKey = void 0;
-var _slate = require("@seafile/slate");
-var _slugid = _interopRequireDefault(require("slugid"));
-var _constants = require("../../../basic-sdk/extension/constants");
-var _elementType = require("../../../basic-sdk/extension/constants/element-type");
-var _core = require("../../../basic-sdk/extension/core");
-var _helpers = require("../../../basic-sdk/extension/plugins/image/helpers");
-var _constants2 = require("../../constants");
-var CellType = _interopRequireWildcard(require("./constants/cell-types"));
-var _model = _interopRequireDefault(require("./model"));
-const isMenuDisabled = (editor, readonly) => {
-  if (readonly) return true;
-  const {
-    selection
-  } = editor;
-  if (selection == null) return true;
-  if (!_slate.Range.isCollapsed(selection)) return true;
-  const [nodeEntry] = _slate.Editor.nodes(editor, {
-    match: n => {
-      const type = (0, _core.getNodeType)(n);
-
-      // Only available for p and blockquote
-      if (type === _elementType.BLOCKQUOTE) return false;
-      if (type === _elementType.PARAGRAPH) return false;
-      if (type === _elementType.UNORDERED_LIST) return true;
-      if (type === _elementType.ORDERED_LIST) return true;
-      if (type === _elementType.CHECK_LIST_ITEM) return true;
-      if (type === _elementType.IMAGE) return true;
-      if (type === _elementType.TABLE_CELL) return true;
-      if (_slate.Editor.isVoid(editor, n)) return true;
-      return false;
-    },
-    universal: true,
-    mode: 'highest' // Match top level
-  });
-
-  // Match to p blockquote, do not disable
-  if (nodeEntry) {
-    return true;
-  }
-  return false;
-};
-exports.isMenuDisabled = isMenuDisabled;
-const getColumnType = editor => {
-  const [match] = _slate.Editor.nodes(editor, {
-    match: n => (0, _core.getNodeType)(n) === _constants2.SEATABLE_COLUMN,
-    universal: true
-  });
-  if (!match) return _elementType.PARAGRAPH;
-  const [n] = match;
-  return (0, _core.getNodeType)(n);
-};
-exports.getColumnType = getColumnType;
-const getColumnByKey = (columns, key) => {
-  const column = columns.find(item => item.key === key);
-  return column || null;
-};
-exports.getColumnByKey = getColumnByKey;
-const insertSeaTableColumn = function (editor, active, option) {
-  let insertPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _constants.INSERT_POSITION.CURRENT;
-  if (!active) {
-    const {
-      value
-    } = option;
-    const column = getColumnByKey(editor.columns || [], value);
-    const {
-      type,
-      key
-    } = column || {};
-    let columnNode = {};
-    if (type === CellType.IMAGE) {
-      columnNode = (0, _helpers.generateImageNode)('');
-      columnNode['data']['column_key'] = key;
-    } else if (type === CellType.DIGITAL_SIGN) {
-      columnNode = (0, _helpers.generateImageNode)('');
-      columnNode['data']['column_key'] = key;
-    } else {
-      columnNode = new _model.default(option);
-      columnNode.id = _slugid.default.nice();
-    }
-    if (insertPosition === _constants.INSERT_POSITION.AFTER) {
-      const path = _slate.Editor.path(editor, editor.selection);
-      path && _slate.Transforms.insertNodes(editor, {
-        ...columnNode
-      }, {
-        at: [path[0] + 1]
-      });
-      (0, _core.focusEditor)(editor);
-      return;
-    }
-    _slate.Transforms.insertNodes(editor, {
-      ...columnNode
-    });
-  }
-  (0, _core.focusEditor)(editor);
-};
-exports.insertSeaTableColumn = insertSeaTableColumn;
-const setSeaTableColumn = (editor, data) => {
-  _slate.Transforms.setNodes(editor, {
-    data: data
-  }, {
-    match: node => node.type === _constants2.SEATABLE_COLUMN,
-    at: editor.selection
-  });
-};
-exports.setSeaTableColumn = setSeaTableColumn;
-const getColumnWidth = column => {
-  let {
-    type,
-    data
-  } = column;
-  switch (type) {
-    case CellType.DATE:
-      {
-        let isShowHourAndMinute = data && data.format && data.format.indexOf('HH:mm') > -1;
-        return isShowHourAndMinute ? 160 : 100;
-      }
-    case CellType.CTIME:
-    case CellType.MTIME:
-    case CellType.LINK:
-    case CellType.GEOLOCATION:
-      {
-        return 160;
-      }
-    case CellType.COLLABORATOR:
-      {
-        return 100;
-      }
-    case CellType.CHECKBOX:
-      {
-        return 40;
-      }
-    case CellType.NUMBER:
-    case CellType.AUTO_NUMBER:
-      {
-        return 120;
-      }
-    case CellType.RATE:
-      {
-        const {
-          rate_max_number
-        } = data || {};
-        const rateMaxNumber = rate_max_number || 5;
-        return 16 * rateMaxNumber + 20;
-      }
-    default:
-      {
-        return 100;
-      }
-  }
-};
-exports.getColumnWidth = getColumnWidth;

package/dist/plugin-module/plugins/seatable-column/index.js

@@ -1,17 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _constants = require("../../constants");
-var _plugin = _interopRequireDefault(require("./plugin"));
-var _renderElem = _interopRequireDefault(require("./render-elem"));
-const SeaTableColumnPlugin = {
-  type: _constants.SEATABLE_COLUMN,
-  nodeType: 'element',
-  editorPlugin: _plugin.default,
-  renderElements: [_renderElem.default]
-};
-var _default = exports.default = SeaTableColumnPlugin;

package/dist/plugin-module/plugins/seatable-column/menu/column-list-item.js

@@ -1,36 +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 = ColumnListItem;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-function ColumnListItem(_ref) {
-  let {
-    innerRef,
-    item,
-    onItemClick,
-    isSelected
-  } = _ref;
-  const onMouseDown = (0, _react.useCallback)(() => {
-    onItemClick(item);
-  }, [onItemClick, item]);
-  const clazzNames = (0, _classnames.default)('column-list-menu-item-container', {
-    'selected': isSelected
-  });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: innerRef,
-    key: item.value,
-    className: clazzNames,
-    onClick: onMouseDown
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "column-list-menu-item"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: `control-icon ${item.iconClass}`
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "control-label"
-  }, item.label)));
-}

package/dist/plugin-module/plugins/seatable-column/menu/column-list-menu.css

@@ -1,50 +0,0 @@
-.seatable-column-popover {
-    padding: 0;
-}
-
-.column-list-menu {
-    position: absolute;
-    left: -8px;
-    background-color: #fff;
-    min-width: 12rem;
-    width: 200px;
-    padding: 8px 0;
-}
-
-.column-list-menu .column-list-menu-item-container {
-    padding: 3px 12px;
-    height: 32px;
-}
-
-.column-list-menu .column-list-menu-item-container .column-list-menu-item {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    height: 26px;
-    line-height: 26px;
-}
-
-.column-list-menu .column-list-menu-item-container .column-list-menu-item .control-icon {
-    margin-right: 10px;
-    flex-shrink: 0;
-    font-size: 12px;
-    color: #444;
-}
-
-.column-list-menu .column-list-menu-item-container .column-list-menu-item .control-label {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-grow: 1;
-    font-size: 14px;
-}
-
-.column-list-menu .column-list-menu-item-container:hover {
-    background-color: #f5f5f5;
-    cursor: pointer;
-}
-
-.column-list-menu .column-list-menu-item-container.selected {
-    background-color: #e3e3e3;
-}

package/dist/plugin-module/plugins/seatable-column/menu/column-list-menu.js

@@ -1,71 +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 = ColumnListMenu;
-var _react = _interopRequireWildcard(require("react"));
-var _searchList = _interopRequireDefault(require("../../../../basic-sdk/extension/commons/search-list"));
-var _utils = require("../../../../basic-sdk/extension/utils");
-var _constants = require("../../../constants");
-var _column = require("../constants/column");
-var _helpers = require("../helpers");
-var _columnListItem = _interopRequireDefault(require("./column-list-item"));
-require("./column-list-menu.css");
-const NOT_SUPPORT_COLUMN_TYPES = ['button', 'file'];
-function ColumnListMenu(_ref) {
-  let {
-    editor,
-    insertPosition,
-    toggle
-  } = _ref;
-  const columnRef = (0, _react.useRef)(null);
-  const [computedStyle, setComputedStyle] = (0, _react.useState)({});
-  (0, _react.useEffect)(() => {
-    if (columnRef.current) {
-      // bottom overflow
-      if ((0, _utils.isOverflowPortByDirection)(columnRef.current, 'bottom')) {
-        return setComputedStyle({
-          bottom: '0px'
-        });
-      }
-      // default
-      return setComputedStyle({
-        top: '-20px'
-      });
-    }
-  }, []);
-  const columns = (0, _react.useMemo)(() => {
-    if (!editor.columns) return [];
-    return editor.columns.filter(column => !NOT_SUPPORT_COLUMN_TYPES.includes(column.type));
-  }, [editor.columns]);
-  const options = (0, _react.useMemo)(() => {
-    return columns.map(item => {
-      const iconClass = _column.COLUMNS_ICON_CONFIG[item.type];
-      return {
-        value: item.key,
-        label: item.name,
-        iconClass
-      };
-    });
-  }, [columns]);
-  const isActive = editor => {
-    return (0, _helpers.getColumnType)(editor) === _constants.SEATABLE_COLUMN;
-  };
-  const onListItemClick = (0, _react.useCallback)(option => {
-    const active = isActive(editor);
-    (0, _helpers.insertSeaTableColumn)(editor, active, option, insertPosition);
-    toggle && toggle();
-  }, [editor, insertPosition, toggle]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: columnRef,
-    className: "column-list-menu",
-    style: computedStyle
-  }, /*#__PURE__*/_react.default.createElement(_searchList.default, {
-    list: options,
-    listItem: _columnListItem.default,
-    onListItemClick: onListItemClick
-  }));
-}

package/dist/plugin-module/plugins/seatable-column/menu/index.js

@@ -1,48 +0,0 @@
-"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"));
-var _reactstrap = require("reactstrap");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _dropdownMenuItem = _interopRequireDefault(require("../../../../basic-sdk/extension/commons/dropdown-menu-item"));
-var _constants = require("../../../constants");
-var _helpers = require("../helpers");
-var _columnListMenu = _interopRequireDefault(require("./column-list-menu"));
-const SeaTableColumnMenu = _ref => {
-  let {
-    editor,
-    readonly,
-    insertPosition,
-    toggle,
-    isHidden = false,
-    container
-  } = _ref;
-  const disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
-  const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.SEATABLE_COLUMN];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
-    disabled: disabled,
-    menuConfig: menuConfig,
-    className: (0, _classnames.default)('pr-2 sdoc-dropdown-menu-item-relative', {
-      'sdoc-dropdown-menu-item-hidden': isHidden
-    })
-  }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
-  }), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
-    target: menuConfig.id,
-    hideArrow: true,
-    trigger: "hover",
-    fade: false,
-    popperClassName: "seatable-column-popover",
-    container: container || menuConfig.id
-  }, /*#__PURE__*/_react.default.createElement(_columnListMenu.default, {
-    editor: editor,
-    readonly: readonly,
-    insertPosition: insertPosition,
-    toggle: toggle
-  }))));
-};
-var _default = exports.default = SeaTableColumnMenu;

package/dist/plugin-module/plugins/seatable-column/model.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _core = require("../../../basic-sdk/extension/core");
-class Column {
-  constructor(option) {
-    this.type = 'seatable_column';
-    this.children = [(0, _core.generateDefaultText)()];
-    this.data = {
-      key: option.value,
-      name: option.label,
-      icon_class: option.iconClass
-    };
-  }
-}
-var _default = exports.default = Column;

package/dist/plugin-module/plugins/seatable-column/plugin.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _constants = require("../../constants");
-const withColumn = editor => {
-  const {
-    isInline,
-    isVoid,
-    markableVoid
-  } = editor;
-  const newEditor = editor;
-  newEditor.isInline = element => {
-    const {
-      type
-    } = element;
-    if (type === _constants.SEATABLE_COLUMN) return true;
-    return isInline(element);
-  };
-  newEditor.isVoid = element => {
-    const {
-      type
-    } = element;
-    if (type === _constants.SEATABLE_COLUMN) return true;
-    return isVoid(element);
-  };
-  newEditor.markableVoid = element => {
-    const {
-      type
-    } = element;
-    if (type === _constants.SEATABLE_COLUMN) return true;
-    return markableVoid(element);
-  };
-  return newEditor;
-};
-var _default = exports.default = withColumn;

package/dist/plugin-module/plugins/seatable-column/render-elem.css

@@ -1,36 +0,0 @@
-.sdoc-seatable-column-label-container {
-  position: absolute;
-  height: 42px;
-  z-index: 101;
-  width: fit-content;
-  max-width: 250px;
-}
-
-.sdoc-seatable-column-label-container .label-container {
-  height: 36px;
-  width: 100%;
-  padding: 7px 8px;
-  background-color: #fff;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
-  border: 1px solid #e8e8e8;
-}
-
-.sdoc-seatable-column-label-container .label-container .control-icon {
-  cursor: default;
-  margin-right: 5px;
-  flex-shrink: 0;
-  font-size: 12px;
-  color: #444;
-}
-
-.sdoc-seatable-column-label-container .label-container .control-label {
-  white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-grow: 1;
-    font-size: 14px;
-}

package/dist/plugin-module/plugins/seatable-column/render-elem.js

@@ -1,183 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _slateReact = require("@seafile/slate-react");
-var _basicSdk = require("../../../basic-sdk");
-var _commons = require("../../../basic-sdk/extension/commons");
-var _utils = require("../../../basic-sdk/extension/utils");
-var _useScrollContext = require("../../../basic-sdk/hooks/use-scroll-context");
-require("./render-elem.css");
-const Column = _ref => {
-  let {
-    props,
-    editor
-  } = _ref;
-  const {
-    attributes,
-    element,
-    children
-  } = props;
-  const isReadOnly = (0, _slateReact.useReadOnly)();
-  const scrollRef = (0, _useScrollContext.useScrollContext)();
-  const seaTableColumnRef = (0, _react.useRef)(null);
-  const [menuPosition, setMenuPosition] = (0, _react.useState)({
-    top: '',
-    left: ''
-  });
-  const [isShowLabel, setIsShowLabel] = (0, _react.useState)(false);
-  const [columnValue, setColumnValue] = (0, _react.useState)('');
-  const data = element.data || {};
-  const {
-    key: columnKey
-  } = data;
-  const column = editor.columns.find(item => item.key === columnKey);
-  const isLongTextColumn = (0, _react.useMemo)(() => {
-    return column && column.type === 'long-text';
-  }, [column]);
-  (0, _react.useEffect)(() => {
-    const data = element.data || {};
-    const {
-      key: columnKey,
-      name: columnName
-    } = data;
-    let displayValue = columnName ? `{${columnName}}` : '';
-    if (editor.getColumnCellValue) {
-      displayValue = editor.getColumnCellValue(columnKey) || 'null';
-      if (!isLongTextColumn) {
-        setColumnValue(displayValue);
-        return;
-      }
-      _basicSdk.processor.process(displayValue).then(res => {
-        displayValue = String(res);
-        setColumnValue(displayValue);
-      });
-    }
-  }, [editor, element.data, isLongTextColumn, editor.currentRowIdx]);
-  const handleScroll = (0, _react.useCallback)(e => {
-    if (isReadOnly) return;
-    if (e.currentTarget.scrollTop) {
-      const menuPosition = (0, _utils.getMenuPosition)(seaTableColumnRef.current, editor);
-      setMenuPosition(menuPosition);
-    }
-  }, [editor, isReadOnly]);
-  (0, _react.useEffect)(() => {
-    if (isReadOnly) return;
-    let observerRefValue = null;
-    if (scrollRef.current) {
-      scrollRef.current.addEventListener('scroll', handleScroll);
-      observerRefValue = scrollRef.current;
-    }
-    return () => {
-      observerRefValue.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll, isReadOnly, scrollRef]);
-  const {
-    font_size = null,
-    font = null,
-    bold = null,
-    italic = null,
-    underline = null,
-    color = null,
-    highlight_color = null,
-    strikethrough = null
-  } = element.children[0];
-  const style = {
-    margin: '0',
-    border: '1px solid transparent',
-    userSelect: 'none',
-    display: 'inline-block',
-    ...(isShowLabel && {
-      border: '1px solid #007bff'
-    }),
-    ...(font_size && {
-      fontSize: font_size
-    }),
-    ...(font && {
-      fontFamily: font
-    }),
-    ...(bold && {
-      fontWeight: 600
-    }),
-    ...(italic && {
-      fontStyle: 'italic'
-    }),
-    ...(underline && {
-      textDecoration: 'underline'
-    }),
-    ...(color && {
-      color: color
-    }),
-    ...(highlight_color && {
-      backgroundColor: highlight_color
-    }),
-    ...(strikethrough && {
-      textDecoration: 'line-through'
-    })
-  };
-  const onColumnClick = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    if (isReadOnly || isShowLabel) return;
-    const {
-      top,
-      left
-    } = seaTableColumnRef.current.getBoundingClientRect();
-    const menuTop = top - 42; // top = top distance - menu height
-    const newMenuPosition = {
-      top: menuTop,
-      left: left // left = callout left distance
-    };
-    // 201 is distance with browser top
-    if (menuTop <= 201) {
-      newMenuPosition['display'] = 'none';
-    }
-    setMenuPosition(newMenuPosition);
-    setIsShowLabel(true);
-  }, [isReadOnly, isShowLabel]);
-  (0, _react.useEffect)(() => {
-    const onHideColumnLabel = event => {
-      if (seaTableColumnRef.current && !seaTableColumnRef.current.contains(event.target)) {
-        setIsShowLabel(false);
-      }
-    };
-    document.addEventListener('click', onHideColumnLabel, true);
-    return () => {
-      document.removeEventListener('click', onHideColumnLabel, true);
-    };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
-    style: style,
-    ref: seaTableColumnRef,
-    onClick: onColumnClick
-  }), /*#__PURE__*/_react.default.createElement("span", null, !isLongTextColumn && columnValue, isLongTextColumn && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      padding: '10px'
-    },
-    dangerouslySetInnerHTML: {
-      __html: columnValue
-    }
-  }), children), isShowLabel && /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-seatable-column-label-container",
-    style: menuPosition,
-    contentEditable: false,
-    "data-slate-node": null,
-    "data-slate-editor": false
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "label-container"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: `control-icon ${data.icon_class}`
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "control-label"
-  }, data.name)))));
-};
-const renderColumn = (props, editor) => {
-  return /*#__PURE__*/_react.default.createElement(Column, {
-    props: props,
-    editor: editor
-  });
-};
-var _default = exports.default = renderColumn;