@seafile/sdoc-editor 0.5.65 → 0.5.67

package/dist/assets/css/plugin-editor.css

@@ -0,0 +1,3 @@
+.sdoc-editor-container .sdoc-editor-content.no-outline .sdoc-article-container {
+  margin: 0 auto !important;
+}

package/dist/basic-sdk/extension/commons/index.js

@@ -2,4 +2,5 @@ import ColorMenu from './color-menu';
 import ElementPopover from './element-popover';
 import MoreDropdown from './more-dropdown';
 import { MenuGroup, MenuItem } from './menu';
-export { ColorMenu, ElementPopover, MenuGroup, MenuItem, MoreDropdown };
+import Select from './select';
+export { ColorMenu, ElementPopover, MenuGroup, MenuItem, MoreDropdown, Select };

package/dist/basic-sdk/extension/commons/select/_option.js

@@ -0,0 +1,32 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+class Option extends React.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "onClick", event => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      const {
+        option
+      } = this.props;
+      this.props.onOptionChanged(option);
+    });
+  }
+  render() {
+    const {
+      option,
+      isActive,
+      optionClass
+    } = this.props;
+    const className = "option-item ".concat(optionClass || '', " ").concat(isActive ? 'active' : '');
+    return /*#__PURE__*/React.createElement("span", {
+      className: className,
+      onClick: this.onClick
+    }, option.iconClass && /*#__PURE__*/React.createElement("span", {
+      className: "item-icon ".concat(option.iconClass)
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "label"
+    }, option.label));
+  }
+}
+export default Option;

package/dist/basic-sdk/extension/commons/select/field-setting.js

@@ -0,0 +1,101 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import Menu from './menu';
+class FieldSetting extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onMouseEnter", () => {
+      if (!this.props.option) return;
+      const container = this.settingRef;
+      const {
+        height,
+        width
+      } = container.getBoundingClientRect();
+      const position = {
+        height,
+        width
+      };
+      this.setState({
+        isShowMenu: true,
+        position
+      });
+    });
+    _defineProperty(this, "onMouseLeave", () => {
+      this.setState({
+        isShowMenu: false
+      });
+    });
+    _defineProperty(this, "onBoldClick", event => {
+      event.stopPropagation();
+      const {
+        option
+      } = this.props;
+      const newOption = _objectSpread(_objectSpread({}, option), {}, {
+        bold: !option.bold
+      });
+      this.props.onUpdateOption(newOption);
+    });
+    _defineProperty(this, "onItalicClick", event => {
+      event.stopPropagation();
+      const {
+        option
+      } = this.props;
+      const newOption = _objectSpread(_objectSpread({}, option), {}, {
+        italic: !option.italic
+      });
+      this.props.onUpdateOption(newOption);
+    });
+    _defineProperty(this, "setSettingRef", ref => {
+      this.settingRef = ref;
+    });
+    this.state = {
+      isShowMenu: false,
+      position: {
+        top: 0,
+        left: 0
+      }
+    };
+  }
+  render() {
+    const {
+      option,
+      t
+    } = this.props;
+    const isDisable = !option;
+    const {
+      bold: isBold,
+      italic: isItalic
+    } = option || {};
+    const {
+      isShowMenu
+    } = this.state;
+    const className = "sdoc-field-setting ".concat(isDisable ? 'disable' : '', " option-item");
+    return /*#__PURE__*/React.createElement("span", {
+      ref: this.setSettingRef,
+      className: className,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "sdocfont sdoc-text-style"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "label"
+    }, t('Font_style')), /*#__PURE__*/React.createElement("span", {
+      className: "icon-container"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "sdocfont sdoc-caret-up op-icon"
+    })), isShowMenu && /*#__PURE__*/React.createElement(Menu, {
+      position: this.state.position
+    }, /*#__PURE__*/React.createElement(Menu.Item, {
+      iconClass: 'sdocfont sdoc-bold',
+      isChecked: isBold,
+      onClick: this.onBoldClick
+    }, t('Bold')), /*#__PURE__*/React.createElement(Menu.Item, {
+      iconClass: 'sdocfont sdoc-italic',
+      isChecked: isItalic,
+      onClick: this.onItalicClick
+    }, t('Italic'))));
+  }
+}
+export default withTranslation('seafile-editor')(FieldSetting);

package/dist/basic-sdk/extension/commons/select/index.js

@@ -0,0 +1,135 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import Option from './_option';
+import FieldSetting from './field-setting';
+import './style.css';
+class Select extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "handleSelector", event => {
+      if (this.selector && !this.selector.contains(event.target)) {
+        this.setState({
+          isShowSelector: false
+        });
+      }
+    });
+    _defineProperty(this, "getCurrentOption", () => {
+      const {
+        value,
+        options
+      } = this.props;
+      const currentOption = value && options.find(option => option.value === value.value);
+      return currentOption;
+    });
+    _defineProperty(this, "onSelectToggle", event => {
+      const {
+        isShowSelector
+      } = this.state;
+      const newValue = !isShowSelector;
+      if (newValue) {
+        this.dropdownContainerHasInit = false;
+      }
+      this.setState({
+        isShowSelector: newValue
+      });
+    });
+    _defineProperty(this, "onChange", option => {
+      this.setState({
+        isShowSelector: false,
+        currentOption: option
+      });
+      this.props.onChange(option);
+    });
+    _defineProperty(this, "onUpdateOption", option => {
+      this.setState({
+        currentOption: option
+      });
+      this.props.onChange(option);
+    });
+    _defineProperty(this, "setContainerRef", ref => {
+      this.dropdownContainer = ref;
+    });
+    _defineProperty(this, "setSelectorRef", ref => {
+      this.selector = ref;
+    });
+    this.state = {
+      isShowSelector: false,
+      currentOption: this.getCurrentOption()
+    };
+    this.dropdownContainerHasInit = false;
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleSelector);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleSelector);
+  }
+  componentDidUpdate() {
+    const {
+      options
+    } = this.props;
+    const {
+      currentOption
+    } = this.state;
+    const activeIndex = currentOption && options.findIndex(option => option.value === currentOption.value);
+    if (activeIndex > -1) {
+      const scrollTop = 48 + (activeIndex + 1) * 32 - 150;
+      if (scrollTop < 0) return;
+      if (this.dropdownContainer && !this.dropdownContainerHasInit) {
+        this.dropdownContainerHasInit = true;
+        this.dropdownContainer.scrollTop = scrollTop;
+      }
+    }
+  }
+  render() {
+    const {
+      selectClass,
+      optionClass,
+      isSelected,
+      options,
+      placeholder
+    } = this.props;
+    const {
+      currentOption,
+      isShowSelector
+    } = this.state;
+    const isActive = isShowSelector || isSelected;
+    return /*#__PURE__*/React.createElement("span", {
+      ref: this.setSelectorRef,
+      className: "select-container ".concat(selectClass || '')
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "control-container ".concat(isActive ? 'active' : ''),
+      onClick: this.onSelectToggle
+    }, !currentOption && /*#__PURE__*/React.createElement("span", {
+      className: "label placeholder"
+    }, placeholder), currentOption && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      className: "control-icon ".concat(currentOption.iconClass)
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "control-label"
+    }, currentOption.label)), /*#__PURE__*/React.createElement("span", {
+      className: "operation"
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-drop-down arrow"
+    }))), isShowSelector && /*#__PURE__*/React.createElement("span", {
+      className: "select-popover"
+    }, /*#__PURE__*/React.createElement(FieldSetting, {
+      option: currentOption,
+      onUpdateOption: this.onUpdateOption
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "option-item-divider"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "option-item-wrapper",
+      ref: this.setContainerRef
+    }, options.map(option => {
+      const isActive = option.value === (currentOption && currentOption.value);
+      return /*#__PURE__*/React.createElement(Option, {
+        key: option.value,
+        optionClass: optionClass,
+        isActive: isActive,
+        option: option,
+        onOptionChanged: this.onChange
+      });
+    }))));
+  }
+}
+export default Select;

package/dist/basic-sdk/extension/commons/select/menu/index.js

@@ -0,0 +1,4 @@
+import Menu from './menu';
+import Item from './item';
+Menu.Item = Item;
+export default Menu;

package/dist/basic-sdk/extension/commons/select/menu/item.js

@@ -0,0 +1,32 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import './style.css';
+class MenuItem extends React.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "onClick", e => {
+      this.props.onClick(e);
+    });
+  }
+  render() {
+    const {
+      children,
+      itemClass,
+      iconClass,
+      isChecked
+    } = this.props;
+    const containerClass = "sdoc-menu-item ".concat(itemClass || '');
+    const itemIconClass = "menu-item-icon ".concat(iconClass || '');
+    return /*#__PURE__*/React.createElement("span", {
+      className: containerClass,
+      onClick: this.onClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: itemIconClass
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "menu-item-name"
+    }, children), isChecked && /*#__PURE__*/React.createElement("span", {
+      className: "sdocfont sdoc-check-mark"
+    }));
+  }
+}
+export default MenuItem;

package/dist/basic-sdk/extension/commons/select/menu/menu.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+class Menu extends React.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "getStyle", () => {
+      const {
+        position
+      } = this.props;
+      const {
+        width
+      } = position;
+      return {
+        marginLeft: width - 10,
+        marginTop: '30px'
+      };
+    });
+  }
+  render() {
+    const style = this.getStyle();
+    return /*#__PURE__*/React.createElement("span", {
+      className: "sdoc-menu-container",
+      style: style
+    }, this.props.children);
+  }
+}
+export default Menu;

package/dist/basic-sdk/extension/commons/select/menu/style.css

@@ -0,0 +1,43 @@
+.sdoc-menu-container {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: 150px;
+  padding: 8px 0;
+  min-width: 80px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 4px 10px #eee;
+  border-radius: 4px;
+  background: #fff;
+  color: #212529;
+  z-index: 1080;
+}
+
+.sdoc-menu-container .sdoc-menu-item {
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  padding: 0 10px;
+  cursor: pointer;
+  position: relative;
+}
+
+.sdoc-menu-container .sdoc-menu-item:hover {
+  background-color: #f5f5f5;
+}
+
+.sdoc-menu-container .sdoc-menu-item .menu-item-icon {
+  margin-right: 5px;
+  color: #aaa;
+}
+
+.sdoc-menu-container .sdoc-menu-item .sdoc-check-mark {
+  position: absolute;
+  right: 10px;
+  height: 32px;
+  line-height: 32px;
+  font-size: 13px;
+  color: #aaa;
+}

package/dist/basic-sdk/extension/commons/select/style.css

@@ -0,0 +1,149 @@
+.select-container {
+  position: relative;
+  display: inline-block;
+  margin: 0 5px;
+  font-weight: normal;
+}
+
+.select-container .control-container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0 10px;
+  height: 24px;
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: pointer;
+  user-select: none;
+}
+
+.select-container .control-container.active,
+.select-container .control-container:hover {
+  border: 1px solid #3C88FD;
+  box-shadow: 0 0 0 2px rgb(70 127 207 / 25%);
+}
+
+.select-container .control-container .placeholder {
+  color: #BFBFBF;
+}
+
+.select-container .control-container .control-icon {
+  font-size: 13px;
+  color: rgb(170, 170, 170);
+  cursor: default;
+  margin-right: 5px;
+}
+
+.select-container .control-container .operation {
+  margin-left: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.select-container .control-container .arrow {
+  color: #949494;
+  display: inline-block;
+  font-size: 12px;
+  transform: scale(.8);
+  transition: all .1s;
+}
+
+.select-container .control-container .arrow:hover {
+  color: #666;
+}
+
+.select-container .select-popover {
+  position: absolute;
+  left: 0;
+  display: flex;
+  min-width: 80px;
+  max-height: 265px;
+  margin-top: 4px;
+  padding: 8px 0;
+  flex-direction: column;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 4px 10px #eee;
+  border-radius: 4px;
+  background: #fff;
+  z-index: 10;
+}
+
+.select-popover .option-item-divider {
+  margin-top: 8px;
+  border-top: 1px solid #EFEFEF;
+}
+
+.select-popover .sdoc-field-setting {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.select-popover .sdoc-field-setting .icon-container {
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.select-popover .sdoc-field-setting .sdoc-text-style {
+  font-size: 14px;
+  color: #aaa;
+}
+
+.select-popover .sdoc-field-setting .op-icon {
+  font-size: 12px;
+  transform: rotate(90deg);
+  color: #aaa;
+}
+
+.select-popover .option-item-wrapper {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+.select-popover .option-item {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  min-width: 80px;
+  height: 32px;
+  padding: 0 12px;
+  cursor: pointer;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.select-popover .option-item:hover {
+  background-color: #F5F5F5;
+}
+
+.select-popover .option-item.active {
+  background-color: #39A0FF;
+  color: #fff;
+}
+
+.select-popover .option-item.disable {
+  color: #aaa;
+  cursor: default;
+}
+
+.select-popover .option-item .item-icon {
+  font-size: 14px;
+  color: rgb(170, 170, 170);
+  cursor: default;
+}
+
+.select-popover .option-item.active .item-icon {
+  color: #fff;
+}
+
+.select-popover .option-item .label {
+  margin: 0 5px;
+}

package/dist/basic-sdk/extension/constants/element-type.js

@@ -28,6 +28,7 @@ export const MENTION = 'mention';
 export const MENTION_TEMP = 'mention_temp';
 export const FILE_LINK_INSET_INPUT_TEMP = 'file_link_insert_input_temp';
 export const QUICK_INSERT = 'quick_insert';
+export const COLUMN = 'column';
 
 // font
 export const FONT_SIZE = 'font-size';

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -1,5 +1,5 @@
 import { RECENT_USED_HIGHLIGHT_COLORS_KEY, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, RECENT_USED_FONT_COLORS_KEY, DEFAULT_FONT_COLOR, DEFAULT_LAST_USED_FONT_COLOR } from './color';
-import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM, CODE_BLOCK, LINK, IMAGE, TABLE, SDOC_LINK, FILE_LINK, PARAGRAPH, CALL_OUT } from './element-type';
+import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM, CODE_BLOCK, LINK, IMAGE, TABLE, SDOC_LINK, FILE_LINK, PARAGRAPH, CALL_OUT, COLUMN } from './element-type';
 export const UNDO = 'undo';
 export const REDO = 'redo';
 export const CLEAR_FORMAT = 'clear_format';
@@ -191,6 +191,11 @@ export const MENUS_CONFIG_MAP = {
     id: "sdoc_".concat(SEARCH_REPLACE),
     iconClass: 'sdocfont sdoc-find-replace',
     text: 'Search_and_replace'
+  },
+  [COLUMN]: {
+    id: "sdoc".concat(COLUMN),
+    iconClass: 'sdocfont sdoc-choose-column',
+    text: 'Insert_column'
   }
 };
 

package/dist/basic-sdk/extension/plugins/column/constants/cell-types.js

@@ -0,0 +1,29 @@
+export const DEFAULT = 'default';
+export const NUMBER = 'number';
+export const TEXT = 'text';
+export const CHECKBOX = 'checkbox';
+export const DATE = 'date';
+export const SINGLE_SELECT = 'single-select';
+export const LONG_TEXT = 'long-text';
+export const IMAGE = 'image';
+export const FILE = 'file';
+export const MULTIPLE_SELECT = 'multiple-select';
+export const COLLABORATOR = 'collaborator';
+export const LINK = 'link';
+export const FORMULA = 'formula';
+export const LINK_FORMULA = 'link-formula';
+export const CREATOR = 'creator';
+export const CTIME = 'ctime';
+export const LAST_MODIFIER = 'last-modifier';
+export const MTIME = 'mtime';
+export const GEOLOCATION = 'geolocation';
+export const AUTO_NUMBER = 'auto-number';
+export const URL = 'url';
+export const EMAIL = 'email';
+export const DURATION = 'duration';
+export const BUTTON = 'button';
+export const RATE = 'rate';
+
+// formula | link-formula column calculate result type
+export const BOOL = 'bool';
+export const STRING = 'string';

package/dist/basic-sdk/extension/plugins/column/constants/column.js

@@ -0,0 +1,28 @@
+import * as CellType from './cell-types';
+export const COLUMNS_ICON_CONFIG = {
+  [CellType.DEFAULT]: 'dtable-font dtable-icon-single-line-text',
+  [CellType.TEXT]: 'dtable-font dtable-icon-single-line-text',
+  [CellType.NUMBER]: 'dtable-font dtable-icon-number',
+  [CellType.CHECKBOX]: 'dtable-font dtable-icon-check-square-solid',
+  [CellType.DATE]: 'dtable-font dtable-icon-calendar-alt-solid',
+  [CellType.SINGLE_SELECT]: 'dtable-font dtable-icon-single-election',
+  [CellType.LONG_TEXT]: 'dtable-font dtable-icon-long-text',
+  [CellType.IMAGE]: 'dtable-font dtable-icon-picture',
+  [CellType.FILE]: 'dtable-font dtable-icon-file-alt-solid',
+  [CellType.MULTIPLE_SELECT]: 'dtable-font dtable-icon-multiple-selection',
+  [CellType.COLLABORATOR]: 'dtable-font dtable-icon-collaborator',
+  [CellType.LINK]: 'dtable-font dtable-icon-link-other-record',
+  [CellType.FORMULA]: 'dtable-font dtable-icon-formula',
+  [CellType.LINK_FORMULA]: 'dtable-font dtable-icon-link-formulas',
+  [CellType.CREATOR]: 'dtable-font dtable-icon-creator',
+  [CellType.CTIME]: 'dtable-font dtable-icon-creation-time',
+  [CellType.LAST_MODIFIER]: 'dtable-font dtable-icon-creator',
+  [CellType.MTIME]: 'dtable-font dtable-icon-creation-time',
+  [CellType.GEOLOCATION]: 'dtable-font dtable-icon-location',
+  [CellType.AUTO_NUMBER]: 'dtable-font dtable-icon-autonumber',
+  [CellType.URL]: 'dtable-font dtable-icon-url',
+  [CellType.EMAIL]: 'dtable-font dtable-icon-email',
+  [CellType.DURATION]: 'dtable-font dtable-icon-duration',
+  [CellType.BUTTON]: 'dtable-font dtable-icon-button',
+  [CellType.RATE]: 'dtable-font dtable-icon-rate'
+};

package/dist/basic-sdk/extension/plugins/column/helpers.js

@@ -0,0 +1,62 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Editor, Transforms } from '@seafile/slate';
+import slugid from 'slugid';
+import { BLOCKQUOTE, CHECK_LIST_ITEM, COLUMN, IMAGE, ORDERED_LIST, PARAGRAPH, TABLE_CELL, UNORDERED_LIST } from '../../constants/element-type';
+import { focusEditor, getNodeType } from '../../core';
+import Column from './model';
+export const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  if (editor.selection == null) return true;
+  const [nodeEntry] = Editor.nodes(editor, {
+    match: n => {
+      const type = getNodeType(n);
+
+      // Only available for p and blockquote
+      if (type === PARAGRAPH) return true;
+      if (type === BLOCKQUOTE) return true;
+      if (type === UNORDERED_LIST) return true;
+      if (type === ORDERED_LIST) return true;
+      if (type === CHECK_LIST_ITEM) return true;
+      if (type === IMAGE) return true;
+      if (type === TABLE_CELL) return true;
+      return false;
+    },
+    universal: true,
+    mode: 'highest' // Match top level
+  });
+
+  // Match to p blockquote, do not disable
+  if (nodeEntry) {
+    return false;
+  }
+  return true;
+};
+export const getColumnType = editor => {
+  const [match] = Editor.nodes(editor, {
+    match: n => getNodeType(n) === COLUMN,
+    universal: true
+  });
+  if (!match) return PARAGRAPH;
+  const [n] = match;
+  return getNodeType(n);
+};
+export const insertSeaTableColumn = (editor, active) => {
+  if (!active) {
+    const column = new Column({});
+    column.id = slugid.nice();
+    Transforms.insertNodes(editor, _objectSpread({}, column));
+  }
+  focusEditor(editor);
+};
+export const setSeaTableColumn = (editor, data) => {
+  Transforms.setNodes(editor, {
+    data: data
+  }, {
+    match: node => node.type === COLUMN,
+    at: editor.selection
+  });
+};
+export const getColumnByKey = (columns, key) => {
+  const column = columns.find(item => item.key === key);
+  return column || null;
+};