@seafile/comment-editor 0.0.1-alpha.5 → 0.0.1-alpha.51

package/dist/_i18n/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getI18n = void 0;
+var _reactI18next = require("react-i18next");
+var _i18next = _interopRequireDefault(require("i18next"));
+var _i18nextBrowserLanguagedetector = _interopRequireDefault(require("i18next-browser-languagedetector"));
+var _i18nextHttpBackend = _interopRequireDefault(require("i18next-http-backend"));
+const getI18n = _ref => {
+  let {
+    lang
+  } = _ref;
+  _i18next.default.use(_i18nextHttpBackend.default).use(_i18nextBrowserLanguagedetector.default).use(_reactI18next.initReactI18next).init({
+    lng: lang,
+    fallbackLng: 'en',
+    ns: ['sdoc-editor'],
+    defaultNS: 'sdoc-editor',
+    debug: false,
+    // console log if debug: true
+
+    whitelist: ['en', 'zh_CN', 'fr', 'de', 'cs', 'es', 'es-AR', 'es-MX', 'ru'],
+    backend: {
+      loadPath: '/public/locales/{{ lng }}/{{ ns }}.json'
+    },
+    interpolation: {
+      escapeValue: false // not needed for react!!
+    },
+    react: {
+      wait: true
+    }
+  });
+  return _i18next.default;
+};
+exports.getI18n = getI18n;

package/dist/basic-sdk/context.js

@@ -11,12 +11,12 @@ var _sdocServerApi = _interopRequireDefault(require("./api/sdoc-server-api"));
 var _seafileApi = _interopRequireDefault(require("./api/seafile-api"));
 class Context {
   constructor() {
-    (0, _defineProperty2.default)(this, "initSettings", () => {
-      this.settings = window.seafile ? window.seafile : window.seafileConfig;
+    (0, _defineProperty2.default)(this, "initSettings", settings => {
+      this.settings = settings ? settings : window.seafile ? window.seafile : window.seafileConfig;
       const {
-        name,
-        username,
-        avatarURL
+        name = '',
+        username = '',
+        avatarURL = ''
       } = this.settings;
       const userInfo = {
         name,
@@ -24,13 +24,6 @@ class Context {
         avatar_url: avatarURL
       };
       this.user = userInfo;
-      if (this.settings['isSdocRevision']) {
-        const repoID = this.getSetting('repoID');
-        const siteRoot = this.getSetting('siteRoot');
-        const originFilePath = this.getSetting('originFilePath');
-        const originFileURL = `${siteRoot}lib/${repoID}/file${originFilePath}`;
-        this.settings['originFileURL'] = originFileURL;
-      }
     });
     (0, _defineProperty2.default)(this, "uploadLocalImage", imageFiles => {
       const docUuid = this.getSetting('docUuid');
@@ -55,15 +48,9 @@ class Context {
     this.api = null;
     this.config = null;
   }
-  init() {
-    this.initSettings(); // lazy init context class
-    // const server = this.getSetting('serviceUrl');
-    // const token = this.getSetting('accessToken');
-    // this.api = new SeafileAPI(server, token);
-    // const isOpenSocket = this.getSetting('isOpenSocket');
-    // if (isOpenSocket) {
-    //   this.sdocServerApi = new SDocServerApi(this.settings);
-    // }
+  init(settings, api) {
+    this.initSettings(settings);
+    this.api = api;
   }
   getSettings() {
     return this.settings;

package/dist/basic-sdk/editor/comment-editor.js

@@ -14,17 +14,16 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _isHotkey = _interopRequireDefault(require("is-hotkey"));
 var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
 var _constants = require("../constants");
-var _context = _interopRequireDefault(require("../context"));
 var _useCursors = require("../cursor/use-cursors");
 var _decorates = require("../decorates");
 var _extension = require("../extension");
+var _insertElementDialog = _interopRequireDefault(require("../extension/commons/insert-element-dialog"));
 var _constants2 = require("../extension/constants");
 var _core = require("../extension/core");
 var _renderCommentEditorElement = _interopRequireDefault(require("../extension/render/render-comment-editor-element"));
 var _commentEditorToolbar = _interopRequireDefault(require("../extension/toolbar/comment-editor-toolbar"));
 var _useComment = require("../hooks/use-comment");
 var _useScrollContext = require("../hooks/use-scroll-context");
-var _layout = require("../layout");
 var _nodeId = _interopRequireDefault(require("../node-id"));
 var _mdToSlate = _interopRequireDefault(require("../slate-convert/md-to-slate"));
 var _slateToMd = _interopRequireDefault(require("../slate-convert/slate-to-md"));
@@ -38,29 +37,26 @@ const getSubmitTip = (type, content) => {
 const DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
 const CommentEditor = _ref => {
   let {
-    type,
     content,
-    commentContent,
     placeholder = DEFAULT_PLACEHOLDER,
     insertContent,
-    updateContent,
-    setIsEditing,
+    onContentChange,
     hiddenComment,
     hiddenUserInfo,
-    onContentChange,
-    isContextComment,
-    closeComment
+    toolMenus = ['text_style', _constants2.BLOCKQUOTE, _constants2.UNORDERED_LIST, _constants2.ORDERED_LIST, _constants2.LINK, _constants2.IMAGE],
+    closePanel
   } = _ref;
   const commentWrapperRef = (0, _react.useRef)();
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const {
-    addParticipants,
-    className
+    className,
+    userInfo,
+    type,
+    addParticipants
   } = (0, _useComment.useComment)();
   const submitTip = (0, _react.useMemo)(() => getSubmitTip(type, content), [content, type]);
-  const userInfo = _context.default.getUserInfo();
   const document = (0, _react.useMemo)(() => {
     const cursor = {};
     let elements = null;
@@ -92,23 +88,19 @@ const CommentEditor = _ref => {
   // init eventHandler
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const eventProxy = (0, _react.useMemo)(() => new _eventHandler.default(editor), []);
-  const updateValue = (0, _react.useCallback)(value => {
-    if (!value || value.trim() === '') return;
-    if (!content) return insertContent(value);
-    updateContent && updateContent(value);
-  }, [content, insertContent, updateContent]);
   const onSubmit = (0, _react.useCallback)(event => {
     event && event.stopPropagation();
     const mdString = (0, _slateToMd.default)(editor.children);
-    updateValue(mdString);
-    addParticipants(userInfo.username);
+    if (mdString && mdString.trim()) insertContent(mdString);
+    addParticipants && addParticipants(userInfo.username);
     editor.children = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
       placeholder
     })];
     _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
     onContentChange && onContentChange(null);
-    closeComment && closeComment();
-  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange, closeComment]);
+    closePanel && closePanel();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertContent, addParticipants, placeholder, onContentChange, closePanel]);
   const onSubmitByEnterKey = (0, _react.useCallback)(event => {
     if (!_slateReact.ReactEditor.isFocused(editor)) return;
     onSubmit(event);
@@ -140,7 +132,6 @@ const CommentEditor = _ref => {
       const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
       if (isPreventCancel) return;
     }
-    setIsEditing && setIsEditing(false);
     hiddenComment && hiddenComment(false);
     if (onContentChange) {
       if (editor.children.find(n => _slate.Node.string(n).trim())) {
@@ -150,17 +141,14 @@ const CommentEditor = _ref => {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setIsEditing]);
+  }, []);
 
   // set editor children
   (0, _react.useEffect)(() => {
     let children = (0, _mdToSlate.default)(content);
-    if (commentContent) {
-      children = (0, _mdToSlate.default)(commentContent);
-    }
     editor.children = children;
     _slate.Transforms.select(editor, _slate.Editor.end(editor, []));
-  }, [editor, content, commentContent]);
+  }, [editor, content]);
 
   // useMount: focus editor
   (0, _react.useEffect)(() => {
@@ -230,59 +218,10 @@ const CommentEditor = _ref => {
     }
     eventProxy.onKeyDown(event);
   }, [eventProxy, editor]);
+  console.log('toolMenus', toolMenus);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('comment-editor-wrapper', className),
     ref: commentWrapperRef
-  }, type === 'comment' && !hiddenUserInfo && /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-editor-user-info"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-editor-user-img"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: userInfo.avatar_url,
-    alt: "",
-    height: "100%",
-    width: "100%"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-editor-user-name"
-  }, userInfo.name)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-editor-container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-editor-content"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: commentEditorContainerRef,
-    className: "article comment-editor",
-    onClick: handleFocusEditor
-  }, /*#__PURE__*/_react.default.createElement(_useScrollContext.ScrollContext.Provider, {
-    value: {
-      scrollRef: commentEditorContainerRef
-    }
-  }, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
-    editor: editor,
-    value: slateValue,
-    onChange: setSlateValue
-  }, /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
-    id: "sdoc-editor",
-    scrollSelectionIntoView: handleScrollIntoView,
-    cursors: cursors,
-    renderElement: props => (0, _renderCommentEditorElement.default)({
-      ...props,
-      commentType: type
-    }),
-    renderLeaf: _extension.renderLeaf,
-    onMouseDown: onMouseDown,
-    decorate: decorate,
-    onCut: eventProxy.onCut,
-    onCopy: eventProxy.onCopy,
-    onCompositionStart: eventProxy.onCompositionStart,
-    onCompositionUpdate: eventProxy.onCompositionUpdate,
-    onCompositionEnd: eventProxy.onCompositionEnd,
-    onKeyDown: onKeyDown,
-    onBeforeInput: eventProxy.onBeforeInput
-  })))), /*#__PURE__*/_react.default.createElement(_commentEditorToolbar.default, {
-    editor: editor,
-    onSubmit: onSubmit,
-    submitBtnText: t(submitTip),
-    onCancel: onCancel
-  }))));
+  }, /*#__PURE__*/_react.default.createElement("div", null, "123"));
 };
 var _default = exports.default = CommentEditor;

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

@@ -10,10 +10,12 @@ var _reactI18next = require("react-i18next");
 var _classnames = _interopRequireDefault(require("classnames"));
 const ColorItem = _ref => {
   let {
-    t,
     color,
     lastUsedColor
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('sdoc-color-item', {
       'selected': lastUsedColor === color.value
@@ -28,4 +30,4 @@ const ColorItem = _ref => {
     }) : t(color.name)
   });
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ColorItem);
+var _default = exports.default = ColorItem;

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

@@ -26,7 +26,6 @@ const ColorMenu = _ref => {
     id,
     popoverClassName,
     disabled,
-    t,
     setColor,
     recentUsedColorsKey,
     text,
@@ -35,6 +34,9 @@ const ColorMenu = _ref => {
     lastUsedColor,
     updateLastUsedColor
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const popoverRef = (0, _react.useRef)(null);
   const moreColorsPopoverRef = (0, _react.useRef)(null);
   const [recentUsedColors, setRecentUsedColors] = (0, _react.useState)(_localStorageUtils.default.getItem(recentUsedColorsKey, _constants.DEFAULT_RECENT_USED_LIST));
@@ -205,4 +207,4 @@ const ColorMenu = _ref => {
     onChange: onChange
   }))))));
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ColorMenu);
+var _default = exports.default = ColorMenu;

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

@@ -20,10 +20,12 @@ const LocalFiles = _ref => {
     onSelectedFile,
     toggle,
     fileType,
-    t,
     searchContent,
     isOpenSearch
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const folderRef = (0, _react.useRef)(null);
   const [expandedFolder, setExpandedFolder] = (0, _react.useState)(new Set([]));
   const [currentActiveItem, setCurrentActiveItem] = (0, _react.useState)(null);
@@ -188,4 +190,4 @@ const LocalFiles = _ref => {
     className: "sdoc-file-search-no-result"
   }, t('No_results')));
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(LocalFiles);
+var _default = exports.default = LocalFiles;

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.js

@@ -55,9 +55,11 @@ const CodeBlockHoverMenu = _ref2 => {
     onChangeLanguage,
     onChangeAutoLineWrap,
     onCopyCodeBlock,
-    onDeleteCodeBlock,
-    t
+    onDeleteCodeBlock
   } = _ref2;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const {
     white_space = 'nowrap'
   } = style;
@@ -254,4 +256,4 @@ const CodeBlockHoverMenu = _ref2 => {
     ref: langRefs
   })))));
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CodeBlockHoverMenu);
+var _default = exports.default = CodeBlockHoverMenu;

package/dist/basic-sdk/extension/plugins/file-link/hover-menu/index.js

@@ -24,9 +24,11 @@ const FileLinkHoverMenu = _ref => {
     menuPosition,
     element,
     onUnwrapFileLinkNode,
-    onHideInsertHoverMenu,
-    t
+    onHideInsertHoverMenu
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const readOnly = (0, _slateReact.useReadOnly)();
   const [isShowDisplayStylePopover, setIsShowDisplayStylePopover] = (0, _react.useState)(false);
   const onCopy = (0, _react.useCallback)(e => {
@@ -117,4 +119,4 @@ const FileLinkHoverMenu = _ref => {
     }));
   }))));
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(FileLinkHoverMenu);
+var _default = exports.default = FileLinkHoverMenu;

package/dist/basic-sdk/extension/plugins/image/helpers.js

@@ -291,7 +291,7 @@ const handleBase64Image = (editor, path, imgData) => {
   const file = new File([blob], `${_slugid.default.nice()}.jpg`, {
     type: unit8Array.mime
   });
-  _context.default.uploadLocalImage([file]).then(res => {
+  _context.default.api.uploadLocalImage([file]).then(res => {
     const _data = {
       ...imgData,
       src: res[0]

package/dist/basic-sdk/extension/plugins/image/hover-menu/index.js

@@ -27,9 +27,11 @@ const ImageHoverMenu = _ref => {
     parentNodeEntry,
     imageCaptionInputRef,
     onHideImageHoverMenu,
-    t,
     readonly
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const {
     data,
     border_type = _constants2.IMAGE_BORDER_TYPE[0].type
@@ -299,4 +301,4 @@ const ImageHoverMenu = _ref => {
     }
   })));
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ImageHoverMenu);
+var _default = exports.default = ImageHoverMenu;

package/dist/basic-sdk/extension/plugins/image/render-elem.js

@@ -33,9 +33,11 @@ const Image = _ref => {
     className,
     attributes,
     children,
-    isSelected,
-    t
+    isSelected
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const {
     data,
     border_type = _constants3.IMAGE_BORDER_TYPE[0].type
@@ -348,7 +350,7 @@ const Image = _ref => {
     }
   })));
 };
-const SdocImage = (0, _reactI18next.withTranslation)('sdoc-editor')(Image);
+const SdocImage = Image;
 function renderImage(props, editor) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const isSelected = (0, _slateReact.useSelected)();

package/dist/basic-sdk/extension/plugins/image/use-copy-image.js

@@ -51,7 +51,7 @@ const useCopyImage = _ref => {
           const file = new File([blob], 'downloaded_image.png', {
             type: blob.type
           });
-          const imageUrl = await _context.default.uploadLocalImage([file]);
+          const imageUrl = await _context.default.api.uploadLocalImage([file]);
           if (imageUrl && imageUrl[0]) {
             updateImageNode(editor, element, imageUrl[0]);
           }

package/dist/basic-sdk/extension/plugins/image/use-upload-image.js

@@ -42,7 +42,7 @@ const useUploadImage = _ref => {
     const uploadCurrentImage = async () => {
       try {
         const fileItem = _imageCache.default.getImage(file_uuid);
-        const imageUrl = await _context.default.uploadLocalImage([fileItem]);
+        const imageUrl = await _context.default.api.uploadLocalImage([fileItem]);
         if (imageUrl && imageUrl[0]) {
           updateImageNode(editor, element, imageUrl[0]);
         }

package/dist/basic-sdk/extension/plugins/sdoc-link/hover-menu/index.js

@@ -25,9 +25,11 @@ const SdocLinkHoverMenu = _ref => {
     element,
     onUnwrapFileLinkNode,
     onHideInsertHoverMenu,
-    t,
     url
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const readOnly = (0, _slateReact.useReadOnly)();
   const [isShowDisplayStylePopover, setIsShowDisplayStylePopover] = (0, _react.useState)(false);
   const onCopy = (0, _react.useCallback)(e => {
@@ -116,4 +118,4 @@ const SdocLinkHoverMenu = _ref => {
     }));
   }))));
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(SdocLinkHoverMenu);
+var _default = exports.default = SdocLinkHoverMenu;

package/dist/basic-sdk/extension/plugins/table/menu/color-selector-popover/color-item.js

@@ -10,10 +10,12 @@ var _reactI18next = require("react-i18next");
 var _classnames = _interopRequireDefault(require("classnames"));
 const ColorItem = _ref => {
   let {
-    t,
     color,
     lastUsedColor
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('sdoc-color-item', {
       'selected': lastUsedColor === color.value
@@ -28,4 +30,4 @@ const ColorItem = _ref => {
     }) : t(color.name)
   });
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ColorItem);
+var _default = exports.default = ColorItem;

package/dist/basic-sdk/extension/plugins/table/menu/table-menu/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
 var _dropdownMenuItem = _interopRequireDefault(require("../../../../commons/dropdown-menu-item"));
 var _constants = require("../../../../constants");
 var _helpers = require("../../helpers");
@@ -38,4 +37,4 @@ const TableMenu = _ref => {
     createTable: createTable
   }));
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(TableMenu);
+var _default = exports.default = TableMenu;

package/dist/basic-sdk/extension/plugins/text-align/menu/index.js

@@ -95,4 +95,4 @@ const TextAlignMenu = _ref => {
     }));
   }))));
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(TextAlignMenu);
+var _default = exports.default = TextAlignMenu;

package/dist/basic-sdk/extension/plugins/text-style/menu/comemnt-editor-menu.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
 var _commons = require("../../../commons");
 var _constants = require("../../../constants");
 var _menusConfig = require("../../../constants/menus-config");
@@ -69,4 +68,4 @@ const CommentEditorTextStyleMenuList = _ref => {
     key: index
   }, itemProps))));
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentEditorTextStyleMenuList);
+var _default = exports.default = CommentEditorTextStyleMenuList;

package/dist/basic-sdk/extension/plugins/text-style/menu/index.js

@@ -25,12 +25,14 @@ var _helpers3 = require("../helpers");
 const TextStyleMenuList = _ref => {
   let {
     editor,
-    t,
     isRichEditor,
     className,
     idPrefix,
     readonly
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
   let selectedFontSize = (0, _helpers.getFontSize)(editor);
   let selectedFontSizeValue = selectedFontSize;
   const enableSeafileAI = _context.default.getSetting('enableSeafileAI');
@@ -159,4 +161,4 @@ const TextStyleMenuList = _ref => {
     isRichEditor: isRichEditor
   }));
 };
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(TextStyleMenuList);
+var _default = exports.default = TextStyleMenuList;

package/dist/basic-sdk/extension/plugins/video/render-elem.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderVideo = renderVideo;
 var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _helpers = require("./helpers");
@@ -128,7 +127,7 @@ const Video = _ref => {
     }
   }))));
 };
-const SdocVideo = (0, _reactI18next.withTranslation)('sdoc-editor')(Video);
+const SdocVideo = Video;
 function renderVideo(props, editor) {
   const {
     element,

package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/index.js

@@ -22,33 +22,37 @@ const CommentEditorToolbar = _ref => {
     readonly = false,
     onSubmit,
     submitBtnText,
-    onCancel
+    onCancel,
+    toolMenus
   } = _ref;
   (0, _useSelectionUpdate.default)();
   const eventBus = _eventBus.default.getInstance();
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-editor-toolbar"
-  }, /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
+    className: "comment-editor-toolbar",
+    style: {
+      justifyContent: toolMenus.length === 0 ? 'end' : ''
+    }
+  }, toolMenus.length !== 0 && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
     className: "menu-group comment-editor-menu-group"
-  }, /*#__PURE__*/_react.default.createElement(_comemntEditorMenu.default, {
+  }, toolMenus.includes('text_style') && /*#__PURE__*/_react.default.createElement(_comemntEditorMenu.default, {
     editor: editor,
     readonly: readonly
-  }), /*#__PURE__*/_react.default.createElement(_menu.default, {
+  }), toolMenus.includes(_constants.BLOCKQUOTE) && /*#__PURE__*/_react.default.createElement(_menu.default, {
     editor: editor,
     readonly: readonly
-  }), /*#__PURE__*/_react.default.createElement(_menu4.default, {
+  }), toolMenus.includes(_constants.UNORDERED_LIST) && /*#__PURE__*/_react.default.createElement(_menu4.default, {
     editor: editor,
     type: _constants.UNORDERED_LIST,
     readonly: readonly
-  }), /*#__PURE__*/_react.default.createElement(_menu4.default, {
+  }), toolMenus.includes(_constants.ORDERED_LIST) && /*#__PURE__*/_react.default.createElement(_menu4.default, {
     editor: editor,
     type: _constants.ORDERED_LIST,
     readonly: readonly
-  }), /*#__PURE__*/_react.default.createElement(_menu3.default, {
+  }), toolMenus.includes(_constants.LINK) && /*#__PURE__*/_react.default.createElement(_menu3.default, {
     editor: editor,
     readonly: readonly,
     eventBus: eventBus
-  }), /*#__PURE__*/_react.default.createElement(_menu2.default, {
+  }), toolMenus.includes(_constants.IMAGE) && /*#__PURE__*/_react.default.createElement(_menu2.default, {
     editor: editor,
     readonly: readonly,
     eventBus: eventBus