@seafile/sdoc-editor 2.0.78 → 2.0.80-test-0.0.1

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

@@ -90,7 +90,7 @@ const ColorMenu = _ref => {
     onSetColor(lastUsedColor, false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [recentUsedColors, lastUsedColor, disabled]);
-  const buttonId = `button-${id}`;
+  const buttonId = "button-".concat(id);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     "aria-label": ariaLabel,
@@ -120,7 +120,7 @@ const ColorMenu = _ref => {
     id: id,
     className: "sdoc-color-toggle sdoc-menu-with-dropdown-triangle"
   }, /*#__PURE__*/_react.default.createElement("i", {
-    className: `sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-${isShowMenu ? 'caret-up' : 'drop-down'}`
+    className: "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
   }))), text && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     target: buttonId
   }, t(text)), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
@@ -146,7 +146,7 @@ const ColorMenu = _ref => {
     onClick: setColorProxy
   }, _constants.DEFAULT_COLORS.map((color, index) => {
     return /*#__PURE__*/_react.default.createElement(_colorItem.default, {
-      key: `default-color-${index}`,
+      key: "default-color-".concat(index),
       color: color,
       lastUsedColor: lastUsedColor
     });
@@ -159,7 +159,7 @@ const ColorMenu = _ref => {
     onClick: setColorProxy
   }, _constants.STANDARD_COLORS.map((color, index) => {
     return /*#__PURE__*/_react.default.createElement(_colorItem.default, {
-      key: `standard-color-${index}`,
+      key: "standard-color-".concat(index),
       color: color,
       lastUsedColor: lastUsedColor
     });
@@ -172,7 +172,7 @@ const ColorMenu = _ref => {
     onClick: setColorProxy
   }, recentUsedColors.map((color, index) => {
     return /*#__PURE__*/_react.default.createElement(_colorItem.default, {
-      key: `standard-color-${index}`,
+      key: "standard-color-".concat(index),
       color: {
         value: color,
         name: color

package/dist/basic-sdk/extension/commons/file-insert-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 _reactI18next = require("react-i18next");
 var _slate = require("@seafile/slate");
@@ -222,25 +223,23 @@ const FileLinkInsertDialog = _ref => {
       editor,
       noShowDialog: true
     };
-    eventBus.dispatch(_constants.INTERNAL_EVENT.CREATE_SDOC_FILE, {
-      newFileName: createName,
-      ...external_props
-    });
+    eventBus.dispatch(_constants.INTERNAL_EVENT.CREATE_SDOC_FILE, (0, _objectSpread2.default)({
+      newFileName: createName
+    }, external_props));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, element, newFileName]);
   const createFileTipDefault = (0, _react.useMemo)(() => {
     return 'Create_a_new_file';
   }, []);
   const createFileName = (0, _react.useMemo)(() => {
-    return `${newFileName}.sdoc`;
+    return "".concat(newFileName, ".sdoc");
   }, [newFileName]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: fileLinkInsertRef,
     className: "sdoc-history-files-content popover",
-    style: {
-      ...position,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, position), {}, {
       position: 'absolute'
-    }
+    })
   }, header.length !== 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-history-files-header"
   }, header), /*#__PURE__*/_react.default.createElement("div", {

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

@@ -52,7 +52,7 @@ const InsertElementDialog = _ref => {
   }, [validEditor, uploadLocalImageInputRef, insertPosition, slateNode]);
   const handleDisplayAlert = (0, _react.useCallback)(() => {
     setTimeout(() => {
-      _toast.default.warning(`${t('The_current_version_does_not_support_>5MB_video_file')}`, {
+      _toast.default.warning("".concat(t('The_current_version_does_not_support_>5MB_video_file')), {
         duration: 3
       });
     }, 0);

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

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

package/dist/basic-sdk/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/basic-sdk/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 _reactI18next = require("react-i18next");
@@ -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 = `sdoc-field-setting ${isDisable ? 'disable' : ''} option-item`;
+    const className = "sdoc-field-setting ".concat(isDisable ? 'disable' : '', " option-item");
     return /*#__PURE__*/_react.default.createElement("span", {
       ref: this.setSettingRef,
       className: className,

package/dist/basic-sdk/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"
     }, 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/basic-sdk/extension/commons/select/menu/item.js

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

package/dist/basic-sdk/extension/commons/select-file-dialog/helpers.js

@@ -4,15 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getVideoFileIcon = exports.getSdocFileIcon = exports.addDataToTree = void 0;
+exports.parcelFileTypeIcon = exports.getSdocFileIcon = exports.getFileTypeIcon = exports.addDataToTree = void 0;
 var _context = _interopRequireDefault(require("../../../context"));
+var _constants = require("../../constants");
 const addDataToTree = (treeData, indexId, childrenData, path) => {
   for (let i = 0; i < treeData.length; i++) {
     var _treeData$i;
     if (treeData[i].indexId === indexId) {
       treeData[i].children = childrenData;
       treeData[i].children.forEach(child => {
-        child.path = path + `/${child.name}`;
+        child.path = path + "/".concat(child.name);
       });
       break;
     }
@@ -26,11 +27,28 @@ const addDataToTree = (treeData, indexId, childrenData, path) => {
 exports.addDataToTree = addDataToTree;
 const getSdocFileIcon = () => {
   const server = _context.default.getSetting('serviceUrl');
-  return `${server}/media/img/file/256/sdoc.png`;
+  return "".concat(server, "/media/img/file/256/sdoc.png");
 };
 exports.getSdocFileIcon = getSdocFileIcon;
-const getVideoFileIcon = () => {
-  const server = _context.default.getSetting('serviceUrl');
-  return `${server}/media/img/file/256/video.png`;
+const getFileTypeIcon = fileType => {
+  const imgResource = ['css', 'draw', 'excel', 'md', 'music', 'pdf', 'pic', 'ppt', 'psd', 'sdoc', 'txt', 'video', 'zip', 'word'];
+  if (imgResource.includes(fileType)) {
+    const server = _context.default.getSetting('serviceUrl');
+    return "".concat(server, "/media/img/file/256/").concat(fileType, ".png");
+  } else {
+    return false;
+  }
+};
+exports.getFileTypeIcon = getFileTypeIcon;
+const parcelFileTypeIcon = fileName => {
+  var _Object$entries$find;
+  const newFileType = fileName.split('.').pop();
+  const fileExtType = (_Object$entries$find = Object.entries(_constants.FILEEXT_TYPE).find(_ref => {
+    let [, extensions] = _ref;
+    return extensions.includes(newFileType);
+  })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0];
+  const fileTypeResult = fileExtType ? _constants.FILEEXT_TYPE_MAP[fileExtType] : newFileType;
+  const fileTypeIcon = getFileTypeIcon(fileTypeResult);
+  return fileTypeIcon;
 };
-exports.getVideoFileIcon = getVideoFileIcon;
+exports.parcelFileTypeIcon = parcelFileTypeIcon;

package/dist/basic-sdk/extension/commons/select-file-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 _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
@@ -67,7 +68,7 @@ const SelectSdocFileDialog = _ref => {
         const repoID = _context.default.getSetting('repoID');
         const fileServerRoot = _context.default.getSetting('fileServerRoot');
         // Get seafile's video download url as src
-        const url = `${fileServerRoot}repos/${repoID}/files${fileInfo.path}/?op=download`;
+        const url = "".concat(fileServerRoot, "repos/").concat(repoID, "/files").concat(fileInfo.path, "/?op=download");
         const encodedUrl = encodeURI(url);
         insertVideo && insertVideo(editor, [{
           name: fileInfo.name
@@ -82,9 +83,7 @@ const SelectSdocFileDialog = _ref => {
     const {
       file_uuid
     } = currentSelectedFile;
-    let fileInfo = {
-      ...currentSelectedFile
-    };
+    let fileInfo = (0, _objectSpread2.default)({}, currentSelectedFile);
 
     // Insert video element in sdoc
     if (dialogType === _constants.ELEMENT_TYPE.VIDEO) {
@@ -97,10 +96,9 @@ const SelectSdocFileDialog = _ref => {
     if (!file_uuid || file_uuid === '') {
       _context.default.getSdocLocalFileId(currentSelectedFile.path).then(res => {
         if (res.status === 200) {
-          fileInfo = {
-            ...currentSelectedFile,
+          fileInfo = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, currentSelectedFile), {}, {
             file_uuid: res.data.file_uuid
-          };
+          });
         }
         insertFile(fileInfo);
         closeDialog();

package/dist/basic-sdk/extension/commons/select-file-dialog/local-files/index.js

@@ -59,7 +59,7 @@ const LocalFiles = _ref => {
       }
       // First loads
       res.data.forEach(item => {
-        item.path = `/${item.name}`;
+        item.path = "/".concat(item.name);
       });
       setTreeData(res.data);
     }).catch(error => {
@@ -125,6 +125,8 @@ const LocalFiles = _ref => {
         indexId,
         name
       } = item;
+      // Get file type icon
+      const fileTypeIcon = (0, _helpers.parcelFileTypeIcon)(name);
       const result = (_item$fullpath = item.fullpath) === null || _item$fullpath === void 0 ? void 0 : _item$fullpath.split('/').filter(Boolean);
       item.fullpath && result.pop();
       const folderPath = item.fullpath && result.join('/');
@@ -155,7 +157,7 @@ const LocalFiles = _ref => {
         className: "sdoc-folder-children"
       }, ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) === 0 && /*#__PURE__*/_react.default.createElement("div", {
         className: "sdoc-folder-children-empty"
-      }, `(${t('Empty')})`), ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), ['file', 'video'].includes(type) && /*#__PURE__*/_react.default.createElement("div", {
+      }, "(".concat(t('Empty'), ")")), ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), ['file', 'video'].includes(type) && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)('sdoc-file-info', {
           'active': selected
         }),
@@ -166,15 +168,11 @@ const LocalFiles = _ref => {
         className: "sdoc-file-icon-container"
       }, /*#__PURE__*/_react.default.createElement("i", {
         className: (0, _classnames.default)('sdoc-file-icon', {
-          'sdocfont sdoc-link-file': fileType === 'file'
+          'sdocfont sdoc-link-file': !fileTypeIcon
         })
-      }), fileType === 'sdoc' && /*#__PURE__*/_react.default.createElement("img", {
+      }), fileTypeIcon && /*#__PURE__*/_react.default.createElement("img", {
         className: "sdoc-file-img",
-        src: (0, _helpers.getSdocFileIcon)(),
-        alt: ""
-      }), fileType === 'video' && /*#__PURE__*/_react.default.createElement("img", {
-        className: "video-file-img",
-        src: (0, _helpers.getVideoFileIcon)(),
+        src: fileTypeIcon,
         alt: ""
       })), /*#__PURE__*/_react.default.createElement("span", {
         className: "sdoc-file-name"

package/dist/basic-sdk/extension/commons/wiki-file-insert-dialog/index.js

@@ -1,19 +1,19 @@
 "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 _reactI18next = require("react-i18next");
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
-var _constants = require("../../../../constants");
-var _constants2 = require("../../../constants");
+var _constants = require("../../../constants");
 var _commonUtils = require("../../../utils/common-utils");
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _localStorageUtils = _interopRequireDefault(require("../../../utils/local-storage-utils"));
@@ -137,7 +137,7 @@ const WikiFileLinkInsertDialog = _ref => {
     document.addEventListener('click', onClick);
     document.addEventListener('keydown', onKeydown);
     sdocScrollContainer.addEventListener('scroll', onScroll);
-    const unsubscribeCloseDialog = eventBus.subscribe(_constants2.INTERNAL_EVENT.CLOSE_FILE_INSET_DIALOG, closeDialog);
+    const unsubscribeCloseDialog = eventBus.subscribe(_constants.INTERNAL_EVENT.CLOSE_FILE_INSET_DIALOG, closeDialog);
     return () => {
       sdocScrollContainer.removeEventListener('scroll', onScroll);
       document.removeEventListener('click', onClick);
@@ -212,7 +212,7 @@ const WikiFileLinkInsertDialog = _ref => {
     (0, _helpers.removeTempInput)(editor, element);
     const eventBus = _eventBus.default.getInstance();
     const createName = newFileName.trim() || t('New_page');
-    eventBus.dispatch(_constants.EXTERNAL_EVENT.CREATE_WIKI_PAGE, {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.CREATE_WIKI_PAGE, {
       newFileName: createName
     });
   }, [editor, element, newFileName, t]);
@@ -220,16 +220,15 @@ const WikiFileLinkInsertDialog = _ref => {
     return 'New_page';
   }, []);
   const createFileName = (0, _react.useMemo)(() => {
-    return `"${newFileName}" ${t('Page')}`;
+    return "\"".concat(newFileName, "\" ").concat(t('Page'));
   }, [newFileName, t]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: fileLinkInsertRef,
     className: (0, _classnames.default)('wiki-history-files-content popover'),
-    style: {
-      ...position,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, position), {}, {
       position: 'absolute',
       opacity: Object.keys(position).length ? 1 : 0
-    }
+    })
   }, header.length !== 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "wiki-history-files-header"
   }, header), /*#__PURE__*/_react.default.createElement("div", {

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

@@ -114,7 +114,7 @@ Object.defineProperty(exports, "DIFF_TYPE", {
     return _diffView.DIFF_TYPE;
   }
 });
-exports.ELEMENT_TYPE = void 0;
+exports.FILEEXT_TYPE_MAP = exports.FILEEXT_TYPE = exports.ELEMENT_TYPE = void 0;
 Object.defineProperty(exports, "FILE_LINK", {
   enumerable: true,
   get: function () {
@@ -525,6 +525,22 @@ const FILE_TYPE = exports.FILE_TYPE = {
   [_elementType.SDOC_LINK]: 'sdoc',
   [_elementType.VIDEO]: 'video'
 };
+const FILEEXT_TYPE = exports.FILEEXT_TYPE = {
+  VIDEO: ['mp4', 'ogv', 'webm', 'mov'],
+  MUSIC: ['mp3', 'oga', 'ogg', 'wav', 'flac', 'opus'],
+  SPREADSHEET: ['xls', 'xlsx', 'ods', 'fods'],
+  MARKDOWN: ['markdown', 'md'],
+  EXCALIDRAW: ['exdraw'],
+  DOCUMENT: ['doc', 'docx', 'docxf', 'oform', 'ppt', 'pptx', 'odt', 'fodt', 'odp', 'fodp', 'odg']
+};
+const FILEEXT_TYPE_MAP = exports.FILEEXT_TYPE_MAP = {
+  VIDEO: 'video',
+  MUSIC: 'music',
+  SPREADSHEET: 'excel',
+  MARKDOWN: 'md',
+  EXCALIDRAW: 'draw',
+  DOCUMENT: 'word'
+};
 const SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO];
 const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP = {
   [_elementType.PARAGRAPH]: [_elementType.CALL_OUT],

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

@@ -42,7 +42,7 @@ const TEXT_STYLE_MAP = exports.TEXT_STYLE_MAP = {
   FONT: 'font',
   BOLD: BOLD,
   ITALIC: ITALIC,
-  BOLD_ITALIC: `${BOLD}_${ITALIC}`,
+  BOLD_ITALIC: "".concat(BOLD, "_").concat(ITALIC),
   UNDERLINE: UNDERLINE,
   STRIKETHROUGH: STRIKETHROUGH,
   SUPERSCRIPT: SUPERSCRIPT,
@@ -56,7 +56,7 @@ const TEXT_STYLE_MAP = exports.TEXT_STYLE_MAP = {
 // header menu config
 const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
   [_elementType.BLOCKQUOTE]: {
-    id: `sdoc_${_elementType.BLOCKQUOTE}`,
+    id: "sdoc_".concat(_elementType.BLOCKQUOTE),
     iconClass: 'sdocfont sdoc-quote-left',
     text: 'Quote'
   },
@@ -81,22 +81,22 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     text: 'Code_block'
   },
   [_elementType.LINK]: {
-    id: `sdoc_${_elementType.LINK}`,
+    id: "sdoc_".concat(_elementType.LINK),
     iconClass: 'sdocfont sdoc-link',
     text: 'Link'
   },
   [_elementType.IMAGE]: {
-    id: `sdoc_${_elementType.IMAGE}`,
+    id: "sdoc_".concat(_elementType.IMAGE),
     iconClass: 'sdocfont sdoc-image',
     text: 'Image'
   },
   [_elementType.VIDEO]: {
-    id: `sdoc_${_elementType.VIDEO}`,
+    id: "sdoc_".concat(_elementType.VIDEO),
     iconClass: 'sdocfont sdoc-video',
     text: 'Video'
   },
   [_elementType.TABLE]: {
-    id: `sdoc_${_elementType.TABLE}`,
+    id: "sdoc_".concat(_elementType.TABLE),
     iconClass: 'sdocfont sdoc-table',
     text: 'Table'
   },
@@ -131,7 +131,7 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     ariaLabel: 'link',
     type: TEXT_STYLE_MAP.LINK
   }, {
-    id: `sdoc-${HIGHLIGHT_COLOR}`,
+    id: "sdoc-".concat(HIGHLIGHT_COLOR),
     iconClass: 'sdocfont sdoc-highlight-color',
     text: 'Highlight_color',
     ariaLabel: 'background color',
@@ -140,7 +140,7 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     recentUsedColorsKey: _color.RECENT_USED_HIGHLIGHT_COLORS_KEY,
     defaultLastUsedColor: _color.DEFAULT_LAST_USED_HIGHLIGHT_COLOR
   }, {
-    id: `sdoc-font-${COLOR}`,
+    id: "sdoc-font-".concat(COLOR),
     iconClass: 'sdocfont sdoc-font-color',
     text: 'Font_color',
     ariaLabel: 'font color',
@@ -199,27 +199,27 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
   //   text: 'Background_color'
   // },
   [CLEAR_FORMAT]: {
-    id: `sdoc_${CLEAR_FORMAT}`,
+    id: "sdoc_".concat(CLEAR_FORMAT),
     iconClass: 'sdocfont sdoc-format-clear',
     text: 'Clear_format'
   },
   [_elementType.SDOC_LINK]: {
-    id: `sdoc_${_elementType.SDOC_LINK}`,
+    id: "sdoc_".concat(_elementType.SDOC_LINK),
     iconClass: 'sdocfont sdoc-document-link',
     text: 'Link_sdoc'
   },
   [_elementType.FILE_LINK]: {
-    id: `sdoc_${_elementType.FILE_LINK}`,
+    id: "sdoc_".concat(_elementType.FILE_LINK),
     iconClass: 'sdocfont sdoc-link-file',
     text: 'Link_file'
   },
   [_elementType.CALL_OUT]: {
-    id: `sdoc_${_elementType.CALL_OUT}`,
+    id: "sdoc_".concat(_elementType.CALL_OUT),
     iconClass: 'sdocfont sdoc-callout',
     text: 'Callout'
   },
   [SEARCH_REPLACE]: {
-    id: `sdoc_${SEARCH_REPLACE}`,
+    id: "sdoc_".concat(SEARCH_REPLACE),
     iconClass: 'sdocfont sdoc-find-replace',
     text: 'Search_and_replace'
   }