@seafile/seafile-editor 0.3.115 → 0.3.117

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

@@ -0,0 +1,77 @@
+.seatable-simple-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 768px;
+  overflow: hidden;
+  border: 1px solid #e5e5e5;
+}
+
+.seatable-simple-editor .seafile-editor-topbar {
+  width: 100%;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e5e5;
+  box-shadow: 0 3px 2px -2px rgba(200,200,200,.15);
+  user-select: none;
+  position: relative;
+  z-index: 3;
+  display: flex;
+  justify-content: space-between;
+}
+
+.seatable-simple-editor .seafile-editor-topbar .use-help-icon {
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.seatable-simple-editor .seafile-editor-topbar .editor-btn-group {
+  height: 100%;
+  padding: 5px 0 5px 5px;
+  font-size: 0.75rem;
+  border-right: 1px solid #e5e5e5;
+  color: #555555;
+}
+
+.seatable-simple-editor .header-list-container {
+  border-left: 0;
+}
+
+.seatable-simple-editor .editor {
+  margin: 0;
+  padding: 10px;
+  height: 100%;
+  border: none;
+}
+
+/*set scroll bar*/
+.editor-container::-webkit-scrollbar{
+  width: 8px;
+  height: 8px;
+}
+
+.editor-container::-webkit-scrollbar-button {
+  display: none;
+}
+
+.editor-container::-webkit-scrollbar-thumb {
+  background-color: rgb(206, 206, 212);
+  border-radius: 10px;
+}
+
+.editor-container {
+  /* this container is needed to show the scroll bar */
+  height: 100%;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  position: relative;
+}
+
+.editor {
+  min-height: calc(100% - 40px);
+  background: #fff;
+  padding: 40px 60px;
+  margin: 20px 40px;
+  border: 1px solid rgb(230,230,221);
+  overflow-x: hidden;
+}

package/dist/components/select/field-setting.js

@@ -20,18 +20,8 @@ var FieldSetting = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
-    _this.onFontStyleClick = function () {
+    _this.onMouseEnter = function () {
       if (!_this.props.option) return;
-      var isShowMenu = _this.state.isShowMenu;
-
-      if (isShowMenu) {
-        _this.setState({
-          isShowMenu: false
-        });
-
-        return;
-      }
-
       var container = _this.settingRef;
 
       var _container$getBoundin = container.getBoundingClientRect(),
@@ -49,6 +39,12 @@ var FieldSetting = /*#__PURE__*/function (_React$Component) {
       });
     };
 
+    _this.onMouseLeave = function () {
+      _this.setState({
+        isShowMenu: false
+      });
+    };
+
     _this.onBoldClick = function (event) {
       event.stopPropagation();
       var option = _this.props.option;
@@ -98,14 +94,15 @@ var FieldSetting = /*#__PURE__*/function (_React$Component) {
           isItalic = _ref.italic;
 
       var isShowMenu = this.state.isShowMenu;
-      var className = "option-item ".concat(isDisable ? 'disable' : '', " ").concat(isShowMenu ? 'active' : '', " field-setting");
+      var className = "field-setting ".concat(isDisable ? 'disable' : '', " option-item");
       return /*#__PURE__*/React.createElement("span", {
         ref: this.setSettingRef,
         className: className,
-        onClick: this.onFontStyleClick
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave
       }, /*#__PURE__*/React.createElement(TextIcon, {
         width: "14",
-        color: isShowMenu ? '#fff' : '#aaa'
+        color: '#aaa'
       }), /*#__PURE__*/React.createElement("span", {
         className: "label"
       }, t('Font_style')), /*#__PURE__*/React.createElement("span", {

package/dist/components/select/index.js

@@ -38,8 +38,15 @@ var Select = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.onSelectToggle = function (event) {
+      var isShowSelector = _this.state.isShowSelector;
+      var newValue = !isShowSelector;
+
+      if (newValue) {
+        _this.dropdownContainerHasInit = false;
+      }
+
       _this.setState({
-        isShowSelector: !_this.state.isShowSelector
+        isShowSelector: newValue
       });
     };
 
@@ -137,14 +144,16 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("i", {
         className: "iconfont icon-drop-down arrow"
       }))), isShowSelector && /*#__PURE__*/React.createElement("span", {
-        ref: this.setContainerRef,
-        className: "value-container"
+        className: "select-popover"
       }, /*#__PURE__*/React.createElement(FieldSetting, {
         option: currentOption,
         onUpdateOption: this.onUpdateOption
       }), /*#__PURE__*/React.createElement("span", {
         className: "option-item-divider"
-      }), options.map(function (option) {
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "option-item-wrapper",
+        ref: this.setContainerRef
+      }, options.map(function (option) {
         var isActive = option.value === (currentOption && currentOption.value);
         return /*#__PURE__*/React.createElement(Option, {
           key: option.value,
@@ -153,7 +162,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
           option: option,
           onOptionChanged: _this2.onChange
         });
-      })));
+      }))));
     }
   }]);
 

package/dist/components/select/style.css

@@ -55,14 +55,12 @@
   color: #666;
 }
 
-.select-container .value-container {
+.select-container .select-popover {
   position: absolute;
   left: 0;
   display: flex;
   min-width: 80px;
-  max-height: 150px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  max-height: 265px;
   margin-top: 4px;
   padding: 8px 0;
   flex-direction: column;
@@ -71,15 +69,41 @@
   border-radius: 4px;
   background: #fff;
   z-index: 10;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
 }
 
-.select-container .value-container::-webkit-scrollbar {
-  display: none;
+.select-popover .option-item-divider {
+  margin-top: 8px;
+  border-top: 1px solid #EFEFEF;
+}
+
+.select-popover .field-setting {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.select-popover .field-setting .icon-container {
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.select-container .value-container .option-item {
+.select-popover .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;
@@ -91,59 +115,30 @@
   white-space: nowrap;
 }
 
-.select-container .value-container .option-item:hover {
+.select-popover .option-item:hover {
   background-color: #F5F5F5;
 }
 
-.select-container .value-container .option-item.active {
+.select-popover .option-item.active {
   background-color: #39A0FF;
   color: #fff;
 }
 
-.select-container .value-container .option-item.disable {
+.select-popover .option-item.disable {
   color: #aaa;
   cursor: default;
 }
 
-.select-container .value-container .option-item .item-icon {
+.select-popover .option-item .item-icon {
   font-size: 14px;
   color: rgb(170, 170, 170);
   cursor: default;
 }
 
-.select-container .value-container .option-item.active .item-icon {
+.select-popover .option-item.active .item-icon {
   color: #fff;
 }
 
-.select-container .value-container .option-item .label {
+.select-popover .option-item .label {
   margin: 0 5px;
 }
-
-.option-item.field-setting {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.option-item.field-setting .icon-container {
-  position: absolute;
-  right: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.option-item.field-setting .op-icon {
-  font-size: 12px;
-  transform: rotate(90deg);
-  color: #aaa;
-}
-
-.option-item.active.field-setting .op-icon {
-  color: #FFF;
-}
-
-.value-container .option-item-divider {
-  margin-top: 8px;
-  border-top: 1px solid #EFEFEF;
-}

package/dist/editor/seatable-editor.js

@@ -18,7 +18,7 @@ import EditorBuilder from './editor-builder';
 import AddLinkDialog from '../components/add-link-dialog';
 import ErrorBoundary from '../components/error-boundary';
 import './code-highlight-package';
-import '../assets/editor/simple-editor.css';
+import '../assets/editor/seatable-editor.css';
 import '../assets/css/image.css';
 import '../assets/css/link.css';
 import '../assets/css/navbar-imgbutton.css';
@@ -171,7 +171,7 @@ var SeatableEditor = /*#__PURE__*/function (_React$Component) {
       var supportInsertColumn = canInsertColumn && columns.length > 0;
       var selectionCollapsed = isRangeCollapsed(editor.selection);
       return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
-        className: "seafile-simple-editor"
+        className: "seatable-simple-editor"
       }, /*#__PURE__*/React.createElement("div", {
         className: "seafile-editor-topbar"
       }, /*#__PURE__*/React.createElement(Toolbar, {

package/dist/utils/slate2markdown/serialize.js

@@ -367,6 +367,15 @@ function _slateNodeToMD(node) {
           value: data.formula
         };
 
+      case 'column':
+        {
+          var _data = node.data;
+          var newNode = {
+            text: "{".concat(_data.name, "}")
+          };
+          return _text2MdNodes(newNode);
+        }
+
       default:
         // turn the block to paragraph default when it`s type is unknown
         mdNodes = parseChildren(node);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "0.3.115",
+  "version": "0.3.117",
   "private": false,
   "dependencies": {
     "@seafile/react-image-lightbox": "^0.0.9",