@seafile/seafile-editor 1.0.15 → 1.0.16

package/dist/editors/simple-slate-editor /index.js

@@ -14,14 +14,16 @@ export default function SimpleSlateEditor(_ref) {
     value,
     editorApi,
     onSave,
+    columns,
     onContentChanged,
     isSupportFormula
   } = _ref;
   const [slateValue, setSlateValue] = useState(value);
   const editor = useMemo(() => withPropsEditor(baseEditor, {
     editorApi,
-    onSave
-  }), [editorApi, onSave]);
+    onSave,
+    columns
+  }), [columns, editorApi, onSave]);
   const eventProxy = useMemo(() => {
     return new EventProxy(editor);
   }, [editor]);
@@ -69,7 +71,8 @@ export default function SimpleSlateEditor(_ref) {
     className: "sf-simple-slate-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {
     editor: editor,
-    isSupportFormula: isSupportFormula
+    isSupportFormula: isSupportFormula,
+    isSupportColumn: !!columns
   }), /*#__PURE__*/React.createElement("div", {
     className: "sf-slate-editor-content"
   }, /*#__PURE__*/React.createElement(Slate, {

package/dist/editors/simple-slate-editor /style.css

@@ -69,6 +69,7 @@
   padding: 10px;
   border: none;
   background-color: #fff;
+  height: 100%;
 }
 
 .sf-simple-slate-editor-container .sf-slate-editor-content .article div:first-child {

package/dist/editors/simple-slate-editor /with-props-editor.js

@@ -1,12 +1,15 @@
 const withPropsEditor = function (editor) {
   let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const newEditor = editor;
+  let newEditor = editor;
   if (props.editorApi) {
     newEditor.api = props.editorApi;
   }
   if (props.onSave) {
     newEditor.onSave = props.onSave;
   }
+  if (props.columns) {
+    newEditor.columns = props.columns;
+  }
   return newEditor;
 };
 export default withPropsEditor;

package/dist/editors/slate-viewer/index.js

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from 'react';
-import { SetNodeToDecorations, baseEditor, renderElement, renderLeaf, useHighlight } from '../../extension';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { SetNodeToDecorations, createSlateEditor, renderElement, renderLeaf, useHighlight } from '../../extension';
 import { Editable, Slate } from 'slate-react';
 import Outline from '../../containers/outline';
 import { ScrollContext } from '../../hooks/use-scroll-context';
@@ -13,17 +13,20 @@ export default function SlateViewer(_ref) {
     scrollRef: externalScrollRef
   } = _ref;
   const scrollRef = useRef(null);
+  const editor = useMemo(() => {
+    return createSlateEditor();
+  }, []);
   const containerScrollRef = externalScrollRef ? externalScrollRef : scrollRef;
-  const decorate = useHighlight(baseEditor);
+  const decorate = useHighlight(editor);
 
   // willUnmount
   useEffect(() => {
     return () => {
-      baseEditor.selection = null;
+      editor.selection = null;
     };
   });
   return /*#__PURE__*/React.createElement(Slate, {
-    editor: baseEditor,
+    editor: editor,
     initialValue: value
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: {
@@ -44,6 +47,6 @@ export default function SlateViewer(_ref) {
   }))), isShowOutline && /*#__PURE__*/React.createElement("div", {
     className: "sf-slate-viewer-outline"
   }, /*#__PURE__*/React.createElement(Outline, {
-    editor: baseEditor
+    editor: editor
   })))));
 }

package/dist/extension/commons/index.js

@@ -1,3 +1,4 @@
 import ElementPopover from './element-popover';
 import { MenuGroup, MenuItem } from './menu';
-export { ElementPopover, MenuGroup, MenuItem };
+import Select from './select';
+export { ElementPopover, MenuGroup, MenuItem, Select };

package/dist/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/extension/commons/select/field-setting.js

@@ -0,0 +1,102 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import Menu from './menu';
+import { withTranslation } from 'react-i18next';
+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 = {
+        ...option,
+        bold: !option.bold
+      };
+      this.props.onUpdateOption(newOption);
+    });
+    _defineProperty(this, "onItalicClick", event => {
+      event.stopPropagation();
+      const {
+        option
+      } = this.props;
+      const newOption = {
+        ...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 = "sf-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: "iconfont icon-text-style"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "label"
+    }, t('Font_style')), /*#__PURE__*/React.createElement("span", {
+      className: "icon-container"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "iconfont icon-caret-up op-icon"
+    })), isShowMenu && /*#__PURE__*/React.createElement(Menu, {
+      position: this.state.position
+    }, /*#__PURE__*/React.createElement(Menu.Item, {
+      iconClass: 'iconfont icon-bold',
+      isChecked: isBold,
+      onClick: this.onBoldClick
+    }, t('bold')), /*#__PURE__*/React.createElement(Menu.Item, {
+      iconClass: 'iconfont icon-italic',
+      isChecked: isItalic,
+      onClick: this.onItalicClick
+    }, t('italic'))));
+  }
+}
+export default withTranslation('seafile-editor')(FieldSetting);

package/dist/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('click', this.handleSelector);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('click', 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: "iconfont icon-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/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/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 = "sf-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: "iconfont icon-check-mark"
+    }));
+  }
+}
+export default MenuItem;

package/dist/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: "sf-menu-container",
+      style: style
+    }, this.props.children);
+  }
+}
+export default Menu;

package/dist/extension/commons/select/menu/style.css

@@ -0,0 +1,43 @@
+.sf-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: #333;
+  z-index: 1080;
+}
+
+.sf-menu-container .sf-menu-item {
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  padding: 0 10px;
+  cursor: pointer;
+  position: relative;
+}
+
+.sf-menu-container .sf-menu-item:hover {
+  background-color: #f5f5f5;
+}
+
+.sf-menu-container .sf-menu-item .menu-item-icon {
+  margin-right: 5px;
+  color: #aaa;
+}
+
+.sf-menu-container .sf-menu-item .icon-check-mark {
+  position: absolute;
+  right: 10px;
+  height: 32px;
+  line-height: 32px;
+  font-size: 13px;
+  color: #aaa;
+}

package/dist/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 .sf-field-setting {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.select-popover .sf-field-setting .icon-container {
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.select-popover .sf-field-setting .icon-text-style {
+  font-size: 14px;
+  color: #aaa;
+}
+
+.select-popover .sf-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/extension/constants/menus-config.js

@@ -1,4 +1,4 @@
-import { BLOCKQUOTE, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM, CODE_BLOCK, TABLE, LINK, IMAGE, FORMULA } from './element-types';
+import { BLOCKQUOTE, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM, CODE_BLOCK, TABLE, LINK, IMAGE, FORMULA, COLUMN } from './element-types';
 const BOLD = 'bold';
 const ITALIC = 'italic';
 const UNDERLINE = 'underline';
@@ -130,5 +130,10 @@ export const MENUS_CONFIG_MAP = {
     id: "seafile_".concat(CLEAR_FORMAT),
     iconClass: 'iconfont icon-clear-format',
     text: 'Clear_format'
+  },
+  [COLUMN]: {
+    id: "seafile_".concat(COLUMN),
+    iconClass: 'iconfont icon-choose-column',
+    text: 'Insert_column'
   }
 };

package/dist/extension/editor.js

@@ -9,4 +9,14 @@ const baseEditor = Plugins.reduce((editor, pluginItem) => {
   }
   return editor;
 }, withHistory(withReact(createEditor())));
-export default baseEditor;
+const createSlateEditor = () => {
+  const editor = Plugins.reduce((editor, pluginItem) => {
+    const withPlugin = pluginItem.editorPlugin;
+    if (withPlugin) {
+      return withPlugin(editor);
+    }
+    return editor;
+  }, withHistory(withReact(createEditor())));
+  return editor;
+};
+export { baseEditor, createSlateEditor };

package/dist/extension/index.js

@@ -4,5 +4,5 @@ import { useHighlight, SetNodeToDecorations } from './highlight';
 import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
 import { Toolbar } from './toolbar';
-import baseEditor from './editor';
-export { ELementTypes, isEmptyParagraph, renderElement, renderLeaf, Toolbar, baseEditor, useHighlight, SetNodeToDecorations };
+import { baseEditor, createSlateEditor } from './editor';
+export { ELementTypes, isEmptyParagraph, renderElement, renderLeaf, Toolbar, baseEditor, createSlateEditor, useHighlight, SetNodeToDecorations };

package/dist/extension/plugins/code-block/render-elem/language-selector.js

@@ -22,7 +22,7 @@ const LanguageSelector = _ref => {
   return /*#__PURE__*/React.createElement("select", {
     name: "language",
     className: "sf-lang-selector",
-    value: lang,
+    value: lang || '',
     onChange: e => handleLangSelectorChange(e.target.value)
   }, langOptions);
 };