@seafile/seafile-editor 0.4.2 → 0.4.3

package/dist/assets/css/new-editor-toolbar.css

@@ -0,0 +1,52 @@
+.header-menu {
+  display: flex;
+  height: 30px;
+  width: 140px;
+  padding: 5px;
+  box-sizing: border-box;
+  border-right: 1px solid #e5e5e5;
+  border-left: 1px solid #e5e5e5;
+  position: relative;
+}
+
+.header-menu .header-toggle {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-menu .header-toggle .iconfont {
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+  transform: scale(.8);
+  cursor: pointer;
+}
+
+.header-menu .header-popover {
+  position: absolute;
+  top: 32px;
+  left: 5px;
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 10;
+  background-color: #fff;
+}
+
+.header-menu .header-popover .header-menu-item {
+  cursor: pointer;
+  height: 30px;
+  width: 100%;
+  padding: 4px 24px;
+  user-select: none;
+}
+
+.header-menu .header-popover .header-menu-item:hover {
+  background-color: rgb(245, 245, 245);
+}

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

@@ -3,7 +3,37 @@
   padding-inline-start: 24px;
 }
 
-.editor-container div[data-slate-editor='true'] {
-  min-width: 980px;
+.sf-editor-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   background: #f0f0f0;
-}
+  min-height: 0;
+}
+
+.sf-editor-container .sf-editor-toolbar {
+  display: flex;
+  justify-content: center;
+  height: 39px;
+  align-items: center;
+  padding: 0 10px;
+  background-color: #fcfcfc;
+  user-select: none;
+  border-bottom: 1px solid #e5e5e5;
+  box-shadow: 0 3px 2px -2px rgb(200 200 200 / 15%)
+}
+
+.sf-editor-container .sf-editor-content {
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+}
+
+.sf-editor-container .sf-editor-content .editor-article {
+  max-width: 950px;
+  min-height: calc(100% - 40px);
+  margin: 20px auto;
+  padding: 40px 60px;
+  background-color: #fff;
+  border: 1px solid rgb(230,230,221);
+}

package/dist/new-editors/editor.js

@@ -21,13 +21,6 @@ var NewEditor = /*#__PURE__*/function (_React$Component) {
       });
       onValueChanged && onValueChanged(slateValue);
     };
-    _this.getStyle = function () {
-      return {
-        with: 980,
-        height: '100%',
-        margin: '0 auto'
-      };
-    };
     _this.state = {
       slateValue: props.value,
       isLoading: true
@@ -51,14 +44,17 @@ var NewEditor = /*#__PURE__*/function (_React$Component) {
       var _this2 = this;
       var slateValue = this.state.slateValue;
       return /*#__PURE__*/React.createElement("div", {
-        className: "editor-container",
-        style: this.getStyle()
+        className: "sf-editor-container"
       }, /*#__PURE__*/React.createElement(Toolbar, {
         editor: this.editor
-      }), /*#__PURE__*/React.createElement(Slate, {
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "sf-editor-content"
+      }, /*#__PURE__*/React.createElement(Slate, {
         editor: this.editor,
         value: slateValue,
         onChange: this.onChange
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "editor-article"
       }, /*#__PURE__*/React.createElement(Editable, {
         placeholder: "Enter some text...",
         renderElement: function renderElement(props) {
@@ -73,7 +69,7 @@ var NewEditor = /*#__PURE__*/function (_React$Component) {
             editor.handleTab && editor.handleTab(event);
           }
         }
-      })));
+      })))));
     }
   }]);
   return NewEditor;

package/dist/slate-extension/constants/index.js

@@ -1,9 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _MENUS_CONFIG_MAP;
+var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 // extension plugin
 export var BLOCKQUOTE = 'blockquote';
 export var BLOB = 'blob';
 export var HEADER = 'header';
+export var HEADER1 = 'header1';
+export var HEADER2 = 'header2';
+export var HEADER3 = 'header3';
+export var HEADER4 = 'header4';
+export var HEADER5 = 'header5';
+export var HEADER6 = 'header6';
 export var ORDERED_LIST = 'ordered_list';
 export var UNORDERED_LIST = 'unordered_list'; // unordered_list can not work
 export var LIST_ITEM = 'list-item';
@@ -35,4 +41,9 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   id: UNORDERED_LIST,
   iconClass: 'iconfont icon-list-ul',
   text: 'unordered_list'
-}), _MENUS_CONFIG_MAP);
+}), _defineProperty(_MENUS_CONFIG_MAP, CHECK_LIST, {
+  id: CHECK_LIST,
+  iconClass: 'iconfont icon-check-square',
+  text: 'check_list_item'
+}), _MENUS_CONFIG_MAP);
+export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'header_1'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'header_2'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'header_3'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'header_4'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'header_5'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'header_6'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'pargraph'), _HEADER_TITLE_MAP);

package/dist/slate-extension/menu/index.js

@@ -1,3 +1,4 @@
 import MenuGroup from './menu-group';
 import MenuItem from './menu-item';
+import './menu.css';
 export { MenuGroup, MenuItem };

package/dist/slate-extension/menu/menu-group.js

@@ -21,4 +21,7 @@ var MenuGroup = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return MenuGroup;
 }(React.PureComponent);
+MenuGroup.defaultProps = {
+  className: 'menu-group'
+};
 export default MenuGroup;

package/dist/slate-extension/menu/menu-item.js

@@ -76,6 +76,6 @@ var MenuItem = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 MenuItem.defaultProps = {
   isRichEditor: true,
-  className: ''
+  className: 'menu-group-item'
 };
 export default MenuItem;

package/dist/slate-extension/menu/menu.css

@@ -0,0 +1,34 @@
+.menu-group {
+  height: 100%;
+  padding: 5px 0 5px 5px;
+  font-size: 0.75rem;
+  border-right: 1px solid #e5e5e5;
+  color: #555555;
+}
+
+.menu-group .menu-group-item {
+  width: 30px;
+  height: 100%;
+  margin-right: 10px;
+  border: 1px solid transparent;
+  line-height: 30px;
+  color: #555555;
+  background-color: #fcfcfc;
+}
+
+.menu-group .menu-group-item:disabled {
+  color: #999;
+}
+
+.menu-group .menu-group-item:hover {
+  background-color: #e5e5e5;
+  border-radius: 2px;
+}
+
+.menu-group .menu-group-item[data-active='true'] {
+  color: #eb8205;
+}
+
+.menu-group .menu-group-item .iconfont {
+  font-size: 13px;
+}

package/dist/slate-extension/plugins/blockquote/helpers.js

@@ -0,0 +1,49 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Editor, Transforms } from "slate";
+import { BLOCKQUOTE } from "../../constants";
+import { getNodeType } from "../../core";
+export var isMenuDisabled = function isMenuDisabled(editor) {
+  if (editor.selection == null) return true;
+  var _Editor$nodes = Editor.nodes(editor, {
+      match: function match(n) {
+        var type = getNodeType(n);
+
+        // 只可用于 p 和 blockquote
+        if (type === 'paragraph') return true;
+        if (type === 'blockquote') return true;
+        return false;
+      },
+      universal: true,
+      mode: 'highest' // 匹配最高层级
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    nodeEntry = _Editor$nodes2[0];
+
+  // 匹配到 p blockquote ，不禁用
+  if (nodeEntry) {
+    return false;
+  }
+  // 未匹配到，则禁用
+  return true;
+};
+export var getBlockQuoteType = function getBlockQuoteType(editor) {
+  var _Editor$nodes3 = Editor.nodes(editor, {
+      match: function match(n) {
+        return getNodeType(n) === BLOCKQUOTE;
+      },
+      universal: true
+    }),
+    _Editor$nodes4 = _slicedToArray(_Editor$nodes3, 1),
+    match = _Editor$nodes4[0];
+  if (!match) return 'paragraph';
+  var _match = _slicedToArray(match, 1),
+    n = _match[0];
+  return getNodeType(n);
+};
+export var setBlockQuoteType = function setBlockQuoteType(editor, type) {
+  Transforms.setNodes(editor, {
+    type: type
+  }, {
+    mode: 'highest'
+  });
+};

package/dist/slate-extension/plugins/blockquote/menu/index.js

@@ -1,14 +1,12 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
-import { Editor, Transforms } from 'slate';
-import { BLOCKQUOTE, MENUS_CONFIG_MAP } from '../../../constants';
-import { getNodeType, getSelectedNodeByType } from '../../../core';
+import { BLOCKQUOTE, MENUS_CONFIG_MAP, PARAGRAPH } from '../../../constants';
 import { MenuItem } from '../../../menu/';
+import { getBlockQuoteType, isMenuDisabled, setBlockQuoteType } from '../helpers';
 var QuoteMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(QuoteMenu, _React$Component);
   var _super = _createSuper(QuoteMenu);
@@ -21,45 +19,18 @@ var QuoteMenu = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     _this.isActive = function () {
       var editor = _this.props.editor;
-      var node = getSelectedNodeByType(editor, BLOCKQUOTE);
-      return !!node;
+      return getBlockQuoteType(editor) === BLOCKQUOTE;
     };
     _this.isDisabled = function () {
       var editor = _this.props.editor;
-      if (editor.selection == null) return true;
-      var _Editor$nodes = Editor.nodes(editor, {
-          match: function match(n) {
-            var type = getNodeType(n);
-
-            // 只可用于 p 和 blockquote
-            if (type === 'paragraph') return true;
-            if (type === 'blockquote') return true;
-            return false;
-          },
-          universal: true,
-          mode: 'highest' // 匹配最高层级
-        }),
-        _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
-        nodeEntry = _Editor$nodes2[0];
-
-      // 匹配到 p blockquote ，不禁用
-      if (nodeEntry) {
-        return false;
-      }
-      // 未匹配到，则禁用
-      return true;
+      return isMenuDisabled(editor);
     };
     _this.onMouseDown = function () {
       var editor = _this.props.editor;
       var active = _this.isActive(editor);
-      var newType = active ? 'paragraph' : 'blockquote';
-
-      // 执行命令
-      Transforms.setNodes(editor, {
-        type: newType
-      }, {
-        mode: 'highest'
-      });
+      var newType = active ? PARAGRAPH : BLOCKQUOTE;
+      console.log(newType);
+      setBlockQuoteType(editor, newType);
     };
     return _this;
   }

package/dist/slate-extension/plugins/blockquote/plugin.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Editor, Element, Point, Transforms } from 'slate';
+import { Editor, Element, Point, Transforms, Node } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { BLOCKQUOTE } from '../../constants';
 var withBlockquote = function withBlockquote(editor) {

package/dist/slate-extension/plugins/check-list/helpers.js

@@ -0,0 +1,44 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import { Transforms, Editor, Element } from 'slate';
+import { CHECK_LIST_ITEM, PARAGRAPH } from '../../constants';
+import { getSelectedNodeByType } from '../../core';
+export var isMenuDisabled = function isMenuDisabled(editor) {
+  if (editor.selection == null) return true;
+  var selectedElements = [];
+  var nodeEntries = Editor.nodes(editor, {
+    universal: true
+  });
+  var _iterator = _createForOfIteratorHelper(nodeEntries),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var nodeEntry = _step.value;
+      var _nodeEntry = _slicedToArray(nodeEntry, 1),
+        node = _nodeEntry[0];
+      if (Element.isElement(node)) selectedElements.push(node);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var notMatch = selectedElements.some(function (element) {
+    if (Editor.isVoid(editor, element) && Editor.isBlock(editor, element)) return true;
+    var type = element.type;
+    if (['pre', 'code', 'list-item'].includes(type)) return true;
+    return false;
+  });
+  if (notMatch) return true;
+  return false;
+};
+export var getCheckListItemType = function getCheckListItemType(editor) {
+  var node = getSelectedNodeByType(editor, CHECK_LIST_ITEM);
+  if (!node) return PARAGRAPH;
+  return node.type;
+};
+export var setCheckListItemType = function setCheckListItemType(editor, newType) {
+  Transforms.setNodes(editor, {
+    type: newType
+  });
+};

package/dist/slate-extension/plugins/check-list/menu/index.js

@@ -0,0 +1,56 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { CHECK_LIST, CHECK_LIST_ITEM, MENUS_CONFIG_MAP, PARAGRAPH } from '../../../constants';
+import { MenuItem } from '../../../menu';
+import { isMenuDisabled, setCheckListItemType, getCheckListItemType } from '../helpers';
+var CheckListMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(CheckListMenu, _React$Component);
+  var _super = _createSuper(CheckListMenu);
+  function CheckListMenu() {
+    var _this;
+    _classCallCheck(this, CheckListMenu);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.isActive = function () {
+      var editor = _this.props.editor;
+      return getCheckListItemType(editor) === CHECK_LIST_ITEM;
+    };
+    _this.isDisabled = function () {
+      var editor = _this.props.editor;
+      return isMenuDisabled(editor);
+    };
+    _this.onMouseDown = function () {
+      var editor = _this.props.editor;
+      var active = _this.isActive(editor);
+      var newType = active ? PARAGRAPH : CHECK_LIST_ITEM;
+      setCheckListItemType(editor, newType);
+    };
+    return _this;
+  }
+  _createClass(CheckListMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className;
+      var menuConfig = MENUS_CONFIG_MAP[CHECK_LIST];
+      var props = _objectSpread(_objectSpread({
+        isRichEditor: isRichEditor,
+        className: className
+      }, menuConfig), {}, {
+        disabled: this.isDisabled(),
+        isActive: this.isActive(),
+        onMouseDown: this.onMouseDown
+      });
+      return /*#__PURE__*/React.createElement(MenuItem, props);
+    }
+  }]);
+  return CheckListMenu;
+}(React.Component);
+export default CheckListMenu;

package/dist/slate-extension/plugins/check-list/model.js

@@ -0,0 +1,12 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import { CHECK_LIST_ITEM } from '../../constants';
+var CheckListItem = /*#__PURE__*/_createClass(function CheckListItem(options) {
+  _classCallCheck(this, CheckListItem);
+  this.type = options.type || CHECK_LIST_ITEM;
+  this.checked = options.checked || false;
+  this.children = options.children || [{
+    text: ''
+  }];
+});
+export default CheckListItem;

package/dist/slate-extension/plugins/check-list/plugin.js

@@ -1,17 +1,41 @@
 import { Node, Range, Transforms } from 'slate';
+import { CHECK_LIST_ITEM, PARAGRAPH } from '../../constants';
 import { getSelectedNodeByType } from '../../core';
 var withCheckList = function withCheckList(editor) {
-  var deleteBackWord = editor.deleteBackWord;
+  var insertBreak = editor.insertBreak,
+    deleteBackWord = editor.deleteBackWord;
   var newEditor = editor;
+  newEditor.insertBreak = function () {
+    var selection = newEditor.selection;
+    if (!selection) {
+      insertBreak();
+      return;
+    }
+    var node = getSelectedNodeByType(editor, CHECK_LIST_ITEM);
+    if (!node) {
+      insertBreak();
+      return;
+    }
+    if (Node.string(node).length === 0) {
+      Transforms.setNodes(editor, {
+        type: PARAGRAPH
+      }, {
+        mode: 'highest'
+      });
+      return;
+    }
+    insertBreak();
+    return;
+  };
   newEditor.deleteBackWord = function (unit) {
     var selection = newEditor.selection;
     if (selection && Range.isCollapsed(selection)) {
-      var selectedTodo = getSelectedNodeByType(editor, 'check-list');
+      var selectedTodo = getSelectedNodeByType(editor, CHECK_LIST_ITEM);
       if (selectedTodo) {
         // 当前 todo 已经没有文字，则转换为 paragraph
         if (Node.string(selectedTodo).length === 0) {
           Transforms.setNodes(editor, {
-            type: 'paragraph'
+            type: PARAGRAPH
           }, {
             mode: 'highest'
           });

package/dist/slate-extension/plugins/check-list/render-elem.js

@@ -30,9 +30,7 @@ var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
         element = _this$props.element;
       var path = ReactEditor.findPath(editor, element);
       Transforms.setNodes(editor, {
-        data: {
-          checked: checked
-        }
+        checked: checked
       }, {
         at: path
       });
@@ -47,7 +45,7 @@ var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
         children = _this$props2.children,
         style = _this$props2.style,
         node = _this$props2.element;
-      var _ref = (node === null || node === void 0 ? void 0 : node.data) || {},
+      var _ref = node || {},
         _ref$checked = _ref.checked,
         checked = _ref$checked === void 0 ? false : _ref$checked;
       return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {

package/dist/slate-extension/plugins/header/helpers.js

@@ -0,0 +1,40 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Editor, Transforms } from "slate";
+import { getNodeType } from "../../core";
+export var isMenuDisabled = function isMenuDisabled(editor) {
+  if (!editor.selection) return true;
+  var _Editor$nodes = Editor.nodes(editor, {
+      match: function match(n) {
+        var type = getNodeType(n);
+        if (type === 'paragraph') return true;
+        if (type.startsWith('header')) return true;
+        return false;
+      },
+      universal: true,
+      mode: 'highest'
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    nodeEntry = _Editor$nodes2[0];
+  if (nodeEntry) return false;
+  return true;
+};
+export var getHeaderType = function getHeaderType(editor) {
+  var _Editor$nodes3 = Editor.nodes(editor, {
+      match: function match(n) {
+        return getNodeType(n).includes('header');
+      },
+      universal: true
+    }),
+    _Editor$nodes4 = _slicedToArray(_Editor$nodes3, 1),
+    match = _Editor$nodes4[0];
+  if (!match) return 'paragraph';
+  var _match = _slicedToArray(match, 1),
+    n = _match[0];
+  return getNodeType(n);
+};
+export var setHeaderType = function setHeaderType(editor, type) {
+  if (!type) return;
+  Transforms.setNodes(editor, {
+    type: type
+  });
+};