@seafile/seafile-editor 3.0.5 → 3.0.7-alpha.1

package/dist/components/browser-tip/index.js

@@ -20,6 +20,6 @@ function BrowserTip(_ref) {
     className: "browser-tip__icon mdfont md-description"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "browser-tip__message"
-  }, `${msg}请试试以下浏览器: Chrome 浏览器最新版，360 极速版，Microsoft Edge 最新版`));
+  }, "".concat(msg, "\u8BF7\u8BD5\u8BD5\u4EE5\u4E0B\u6D4F\u89C8\u5668: Chrome \u6D4F\u89C8\u5668\u6700\u65B0\u7248\uFF0C360 \u6781\u901F\u7248\uFF0CMicrosoft Edge \u6700\u65B0\u7248")));
 }
 var _default = exports.default = BrowserTip;

package/dist/components/longtext-modal.js

@@ -27,7 +27,7 @@ class LongTextModal extends _react.default.Component {
     } = this.props;
     this.el = document.createElement('div');
     this.el.className = 'longtext-modal-wrapper';
-    this.el.className = `longtext-modal-wrapper ${containerClass || ''}`;
+    this.el.className = "longtext-modal-wrapper ".concat(containerClass || '');
     document.body.appendChild(this.el);
   }
   componentDidMount() {

package/dist/constants/event-types.js

@@ -18,6 +18,7 @@ const INTERNAL_EVENTS = exports.INTERNAL_EVENTS = {
 const EXTERNAL_EVENTS = exports.EXTERNAL_EVENTS = {
   ON_HELP_INFO_TOGGLE: 'on_help_info_toggle',
   ON_ARTICLE_INFO_TOGGLE: 'on_article_info_toggle',
+  ON_COMMENT_PANEL_TOGGLE: 'on_comment_panel_toggle',
   ON_LINK_CLICK: 'on_link_click',
   ON_INSERT_IMAGE: 'on_insert_image',
   INSERT_ATTACHMENTS: 'insert_attachments',

package/dist/containers/article-info/index.js

@@ -1,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _resizeWidth = _interopRequireDefault(require("./resize-width"));
 var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
@@ -39,10 +40,9 @@ const ArticleInfo = _ref => {
   }, []);
   const resizeWidthEnd = (0, _react.useCallback)(width => {
     const settings = JSON.parse(window.localStorage.getItem('sf-editor') || '{}');
-    window.localStorage.setItem('sf-editor', JSON.stringify({
-      ...settings,
+    window.localStorage.setItem('sf-editor', JSON.stringify((0, _objectSpread2.default)((0, _objectSpread2.default)({}, settings), {}, {
       panelWidth: width
-    }));
+    })));
     const eventBus = _eventBus.default.getInstance();
     eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
   }, []);
@@ -86,9 +86,8 @@ const ArticleInfo = _ref => {
     style: {
       width
     }
-  }, fileDetailsComponent && /*#__PURE__*/_react.default.createElement(fileDetailsComponent, {
-    ...fileDetailsProps,
+  }, fileDetailsComponent && /*#__PURE__*/_react.default.createElement(fileDetailsComponent, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fileDetailsProps), {}, {
     width
-  })));
+  }))));
 };
 var _default = exports.default = ArticleInfo;

package/dist/containers/comment-panel/index.js

@@ -0,0 +1,92 @@
+"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.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _resizeWidth = _interopRequireDefault(require("../article-info/resize-width"));
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
+var _eventTypes = require("../../constants/event-types");
+require("./style.css");
+const MIN_PANEL_WIDTH = 360;
+const MAX_PANEL_WIDTH = 620;
+const CommentPanel = _ref => {
+  let {
+    isVisible
+  } = _ref;
+  const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
+  const [commentConfig, setCommentConfig] = (0, _react.useState)({});
+  const containerWrapperStyle = (0, _react.useMemo)(() => {
+    const style = {
+      width,
+      zIndex: 101,
+      display: isVisible ? 'block' : 'none'
+    };
+    if (!style.width || style.width < MIN_PANEL_WIDTH) {
+      style.width = MIN_PANEL_WIDTH;
+    } else if (style.width > MAX_PANEL_WIDTH) {
+      style.width = MAX_PANEL_WIDTH;
+    }
+    return style;
+  }, [width, isVisible]);
+  const resizeWidth = (0, _react.useCallback)(width => {
+    if (width >= MIN_PANEL_WIDTH && width <= MAX_PANEL_WIDTH) {
+      setWidth(width);
+    }
+  }, []);
+  const resizeWidthEnd = (0, _react.useCallback)(width => {
+    const settings = JSON.parse(window.localStorage.getItem('sf-editor') || '{}');
+    window.localStorage.setItem('sf-editor', JSON.stringify((0, _objectSpread2.default)((0, _objectSpread2.default)({}, settings), {}, {
+      commentPanelWidth: width
+    })));
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
+  }, []);
+  (0, _react.useEffect)(() => {
+    const settings = JSON.parse(window.localStorage.getItem('sf-editor', '{}')) || {};
+    const {
+      commentPanelWidth
+    } = settings;
+    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(commentPanelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
+    setWidth(width);
+  }, []);
+  const handleCommentConfig = (0, _react.useCallback)(config => {
+    setCommentConfig(config);
+  }, []);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribeCommentPanel = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_COMMENT_PANEL_TOGGLE, handleCommentConfig);
+    return () => {
+      unsubscribeCommentPanel();
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
+  }, [isVisible, commentConfig]);
+  const {
+    component: commentComponent,
+    props: commentProps
+  } = commentConfig || {};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-article-info-container-wrapper",
+    style: containerWrapperStyle
+  }, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
+    minWidth: MIN_PANEL_WIDTH,
+    maxWidth: MAX_PANEL_WIDTH,
+    resizeWidth: resizeWidth,
+    resizeWidthEnd: resizeWidthEnd
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-article-info-container",
+    style: {
+      width
+    }
+  }, commentComponent && commentProps && /*#__PURE__*/_react.default.createElement(commentComponent, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commentProps), {}, {
+    width
+  }))));
+};
+var _default = exports.default = CommentPanel;

package/dist/containers/comment-panel/style.css

@@ -0,0 +1,22 @@
+.sf-article-info-container-wrapper {
+  display: flex;
+  flex-direction: row;
+  max-width: 620px;
+  min-width: 360px;
+  position: relative;
+  height: 100%;
+}
+
+.sf-article-info-container {
+  height: 100%;
+}
+
+.sf-article-info-container[style*="display: none"] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sf-article-info-container[style*="display: block"] {
+  opacity: 1;
+  pointer-events: auto;
+}

package/dist/containers/hotkeys-helper/index.js

@@ -49,7 +49,7 @@ function HotkeysHelper() {
       shortcutData: shortcutDataNames
     } = item;
     return /*#__PURE__*/_react.default.createElement(_classifyHotkeys.default, {
-      key: `use-hotkey-${index}`,
+      key: "use-hotkey-".concat(index),
       title: title,
       shortcutData: shortcutData,
       shortcutDataNames: shortcutDataNames

package/dist/editors/inline-editor/index.js

@@ -198,7 +198,7 @@ const InlineEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     initialValue: slateValue,
     onChange: onChange
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `sf-slate-scroll-container ${isMacOS ? '' : 'isWin'}`
+    className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-article-container"
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -142,7 +142,7 @@ const SimpleSlateEditor = _ref => {
     initialValue: slateValue,
     onChange: onChange
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `sf-slate-scroll-container ${isMacOS ? '' : 'isWin'}`
+    className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-article-container",
     onWheel: handleWheel

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

@@ -12,6 +12,7 @@ var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _eventTypes = require("../../../constants/event-types");
 var _hotkeysHelper = _interopRequireDefault(require("../../../containers/hotkeys-helper"));
 var _articleInfo = _interopRequireDefault(require("../../../containers/article-info"));
+var _commentPanel = _interopRequireDefault(require("../../../containers/comment-panel"));
 require("./style.css");
 function EditorHelp(_ref) {
   let {
@@ -19,32 +20,57 @@ function EditorHelp(_ref) {
   } = _ref;
   const [isShowHelpInfo, setIsShowHelpInfo] = (0, _react.useState)(false);
   const [isShowArticleInfo, setIsShowArticleInfo] = (0, _react.useState)(false);
-  const updateArticleInfoState = (0, _react.useCallback)(() => {
-    setIsShowArticleInfo(prevState => !prevState);
+  const [isShowCommentPanel, setIsShowCommentPanel] = (0, _react.useState)(false);
+  const closeAllPanels = (0, _react.useCallback)(() => {
     setIsShowHelpInfo(false);
-  }, []);
-  const updateHelpInfoState = (0, _react.useCallback)(state => {
-    setIsShowHelpInfo(state);
     setIsShowArticleInfo(false);
+    setIsShowCommentPanel(false);
     const eventBus = _eventBus.default.getInstance();
     eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
   }, []);
+  const updateArticleInfoState = (0, _react.useCallback)(details => {
+    if (details === null) {
+      setIsShowArticleInfo(false);
+    } else {
+      closeAllPanels();
+      setIsShowArticleInfo(true);
+    }
+  }, [closeAllPanels]);
+  const updateHelpInfoState = (0, _react.useCallback)(state => {
+    if (isShowHelpInfo && state === false) {
+      setIsShowHelpInfo(false);
+    } else if (!isShowHelpInfo && state !== false) {
+      closeAllPanels();
+      setIsShowHelpInfo(true);
+    }
+  }, [isShowHelpInfo, closeAllPanels]);
+  const updateCommentPanelState = (0, _react.useCallback)(config => {
+    if (config === null) {
+      setIsShowCommentPanel(false);
+    } else {
+      closeAllPanels();
+      setIsShowCommentPanel(true);
+    }
+  }, [closeAllPanels]);
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
     const unsubscribeArticleInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, updateArticleInfoState);
     const unsubscribeHelpInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, updateHelpInfoState);
+    const unsubscribeCommentPanel = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_COMMENT_PANEL_TOGGLE, updateCommentPanelState);
     return () => {
       unsubscribeHelpInfo();
       unsubscribeArticleInfo();
+      unsubscribeCommentPanel();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [updateArticleInfoState, updateHelpInfoState]);
+  }, [updateArticleInfoState, updateHelpInfoState, updateCommentPanelState]);
   const containerClass = (0, _classnames.default)('sf-markdown-help-wrapper', {
-    'active': isShowArticleInfo || isShowHelpInfo
+    'active': isShowArticleInfo || isShowHelpInfo || isShowCommentPanel
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: containerClass
   }, /*#__PURE__*/_react.default.createElement(_articleInfo.default, {
     isVisible: isShowArticleInfo
-  }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null));
+  }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null), /*#__PURE__*/_react.default.createElement(_commentPanel.default, {
+    isVisible: isShowCommentPanel
+  }));
 }

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

@@ -109,7 +109,7 @@ function SlateEditor(_ref) {
     }
   }, [editor, focusFirstNode]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `sf-slate-editor-container ${_common.isMobile && 'mobile'}`
+    className: "sf-slate-editor-container ".concat(_common.isMobile && 'mobile')
   }, /*#__PURE__*/_react.default.createElement(_extension.Toolbar, {
     editor: editor,
     readonly: isReadonly,
@@ -129,7 +129,7 @@ function SlateEditor(_ref) {
     onChange: onChange
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: scrollRef,
-    className: `sf-slate-scroll-container ${isMacOS ? '' : 'isWin'}`
+    className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-article-content"
   }, !_common.isMobile && /*#__PURE__*/_react.default.createElement(_outline.default, {

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

@@ -1,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = SlateViewer;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _extension = require("../../extension");
 var _slateReact = require("slate-react");
@@ -47,7 +48,7 @@ function SlateViewer(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `sf-slate-viewer-container ${_common.isMobile && 'mobile'}`
+    className: "sf-slate-viewer-container ".concat(_common.isMobile && 'mobile')
   }, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
     editor: editor,
     initialValue: value
@@ -57,7 +58,7 @@ function SlateViewer(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: scrollRef,
-    className: `sf-slate-viewer-scroll-container ${isMacOS ? '' : 'isWin'} ${isShowOutline ? 'outline' : ''}`
+    className: "sf-slate-viewer-scroll-container ".concat(isMacOS ? '' : 'isWin', " ").concat(isShowOutline ? 'outline' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-article-content"
   }, isShowOutline && !_common.isMobile && /*#__PURE__*/_react.default.createElement(_outline.default, {
@@ -70,10 +71,9 @@ function SlateViewer(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_extension.SetNodeToDecorations, null), /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
     readOnly: true,
     decorate: decorate,
-    renderElement: props => (0, _extension.renderElement)({
-      options,
-      ...props
-    }),
+    renderElement: props => (0, _extension.renderElement)((0, _objectSpread2.default)({
+      options
+    }, props)),
     renderLeaf: _extension.renderLeaf
   }))))))));
 }

package/dist/extension/commons/insert-element-dialog/index.js

@@ -1,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _slate = require("slate");
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
@@ -33,10 +34,9 @@ const InsertElementDialog = _ref => {
     if (type === _constants.ELementTypes.LINK) {
       if (editor.selection) {
         const selectedText = _slate.Editor.string(editor, editor.selection);
-        setLinkInfo({
-          ...linkInfo,
+        setLinkInfo((0, _objectSpread2.default)((0, _objectSpread2.default)({}, linkInfo), {}, {
           linkTitle: selectedText
-        });
+        }));
       }
     }
   }, [editor, linkInfo]);

package/dist/extension/commons/menu/menu-drop-down.js

@@ -29,7 +29,7 @@ const MenuDropDown = props => {
   const {
     t
   } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
-  const containerId = (0, _react.useMemo)(() => `menu-dropdown-${id}`, [id]);
+  const containerId = (0, _react.useMemo)(() => "menu-dropdown-".concat(id), [id]);
   const handleHideDropDownList = (0, _react.useCallback)(e => {
     var _menuItemRef$current, _menuDropdownRef$curr;
     const isClickOnMenuItem = menuItemRef === null || menuItemRef === void 0 ? void 0 : (_menuItemRef$current = menuItemRef.current) === null || _menuItemRef$current === void 0 ? void 0 : _menuItemRef$current.contains(e.target);
@@ -61,11 +61,11 @@ const MenuDropDown = props => {
     }),
     onClick: !readonly && !isDisabled && registerClickEvent
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: `sf-menu-with-dropdown-icon active ${iconClass}`
+    className: "sf-menu-with-dropdown-icon active ".concat(iconClass)
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-menu-with-dropdown-triangle"
   }, /*#__PURE__*/_react.default.createElement("i", {
-    className: `sf-menu-with-dropdown-triangle-icon mdfont md-${isShowDropDown ? 'drop-down' : 'caret-up'}`
+    className: "sf-menu-with-dropdown-triangle-icon mdfont md-".concat(isShowDropDown ? 'drop-down' : 'caret-up')
   })), !!isShowDropDown && /*#__PURE__*/_react.default.createElement("div", {
     ref: menuDropdownRef,
     className: "sf-dropdown-list "
@@ -83,7 +83,7 @@ const MenuDropDown = props => {
       className: (0, _classnames.default)('sf-dropdown-list-item'),
       onClick: event => handleClickDropDownItem(event, item, handleClick)
     }, isShowListItemIcon && iconClass && /*#__PURE__*/_react.default.createElement("i", {
-      className: `sf-dropdown-menu-item-icon ${iconClass}`
+      className: "sf-dropdown-menu-item-icon ".concat(iconClass)
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "sf-dropdown-menu-item-text"
     }, t(text))));

package/dist/extension/commons/menu-shortcut-indicator/index.js

@@ -16,7 +16,7 @@ const MenuShortcutPrompt = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('sf-shortcut-prompt-container', containerClassName)
   }, shortcuts.map((shortcut, index) => /*#__PURE__*/_react.default.createElement("kbd", {
-    key: `sf-shortcut-${shortcut}-${index}`
+    key: "sf-shortcut-".concat(shortcut, "-").concat(index)
   }, shortcut)));
 };
 var _default = exports.default = MenuShortcutPrompt;

package/dist/extension/commons/select/_option.js

@@ -25,12 +25,12 @@ class Option extends _react.default.Component {
       isActive,
       optionClass
     } = this.props;
-    const className = `option-item ${optionClass || ''} ${isActive ? 'active' : ''}`;
+    const className = "option-item ".concat(optionClass || '', " ").concat(isActive ? 'active' : '');
     return /*#__PURE__*/_react.default.createElement("span", {
       className: className,
       onClick: this.onClick
     }, option.iconClass && /*#__PURE__*/_react.default.createElement("span", {
-      className: `item-icon ${option.iconClass}`
+      className: "item-icon ".concat(option.iconClass)
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "label"
     }, option.label));

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _menu = _interopRequireDefault(require("./menu"));
@@ -38,10 +39,9 @@ class FieldSetting extends _react.default.Component {
       const {
         option
       } = this.props;
-      const newOption = {
-        ...option,
+      const newOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
         bold: !option.bold
-      };
+      });
       this.props.onUpdateOption(newOption);
     });
     (0, _defineProperty2.default)(this, "onItalicClick", event => {
@@ -49,10 +49,9 @@ class FieldSetting extends _react.default.Component {
       const {
         option
       } = this.props;
-      const newOption = {
-        ...option,
+      const newOption = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
         italic: !option.italic
-      };
+      });
       this.props.onUpdateOption(newOption);
     });
     (0, _defineProperty2.default)(this, "setSettingRef", ref => {
@@ -79,7 +78,7 @@ class FieldSetting extends _react.default.Component {
     const {
       isShowMenu
     } = this.state;
-    const className = `sf-field-setting ${isDisable ? 'disable' : ''} option-item`;
+    const className = "sf-field-setting ".concat(isDisable ? 'disable' : '', " option-item");
     return /*#__PURE__*/_react.default.createElement("span", {
       ref: this.setSettingRef,
       className: className,

package/dist/extension/commons/select/index.js

@@ -103,14 +103,14 @@ class Select extends _react.default.Component {
     const isActive = isShowSelector || isSelected;
     return /*#__PURE__*/_react.default.createElement("span", {
       ref: this.setSelectorRef,
-      className: `select-container ${selectClass || ''}`
+      className: "select-container ".concat(selectClass || '')
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: `control-container ${isActive ? 'active' : ''}`,
+      className: "control-container ".concat(isActive ? 'active' : ''),
       onClick: this.onSelectToggle
     }, !currentOption && /*#__PURE__*/_react.default.createElement("span", {
       className: "label placeholder-content"
     }, placeholder), currentOption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      className: `control-icon ${currentOption.iconClass}`
+      className: "control-icon ".concat(currentOption.iconClass)
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "control-label"
     }, currentOption.label)), /*#__PURE__*/_react.default.createElement("span", {

package/dist/extension/commons/select/menu/item.js

@@ -22,8 +22,8 @@ class MenuItem extends _react.default.Component {
       iconClass,
       isChecked
     } = this.props;
-    const containerClass = `sf-menu-item ${itemClass || ''}`;
-    const itemIconClass = `menu-item-icon ${iconClass || ''}`;
+    const containerClass = "sf-menu-item ".concat(itemClass || '');
+    const itemIconClass = "menu-item-icon ".concat(iconClass || '');
     return /*#__PURE__*/_react.default.createElement("span", {
       className: containerClass,
       onClick: this.onClick

package/dist/extension/constants/element-types.js

@@ -7,12 +7,12 @@ exports.UNORDERED_LIST = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE
 const BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 const HEADER = exports.HEADER = 'header';
 // each header type should be start with HEADER, all of justices should based on HEADER
-const HEADER1 = exports.HEADER1 = `${HEADER}1`;
-const HEADER2 = exports.HEADER2 = `${HEADER}2`;
-const HEADER3 = exports.HEADER3 = `${HEADER}3`;
-const HEADER4 = exports.HEADER4 = `${HEADER}4`;
-const HEADER5 = exports.HEADER5 = `${HEADER}5`;
-const HEADER6 = exports.HEADER6 = `${HEADER}6`;
+const HEADER1 = exports.HEADER1 = "".concat(HEADER, "1");
+const HEADER2 = exports.HEADER2 = "".concat(HEADER, "2");
+const HEADER3 = exports.HEADER3 = "".concat(HEADER, "3");
+const HEADER4 = exports.HEADER4 = "".concat(HEADER, "4");
+const HEADER5 = exports.HEADER5 = "".concat(HEADER, "5");
+const HEADER6 = exports.HEADER6 = "".concat(HEADER, "6");
 const ORDERED_LIST = exports.ORDERED_LIST = 'ordered_list'; // <ol>
 const UNORDERED_LIST = exports.UNORDERED_LIST = 'unordered_list'; // <ul> // unordered_list can not work
 const LIST_ITEM = exports.LIST_ITEM = 'list_item'; // <li>