@seafile/sdoc-editor 0.5.4 → 0.5.6

package/dist/basic-sdk/extension/plugins/mention/plugin.js

@@ -0,0 +1,258 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Editor, Node, Range, Text, Transforms } from '@seafile/slate';
+import EventBus from '../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../constants';
+import { MENTION, MENTION_TEMP } from '../../constants/element-type';
+import { insertTemporaryMentionInput, getMentionTempIptEntry, transformToText, getMentionEntry, getPrevMentionIptEntry } from './helper';
+import { KeyCodes } from '../../../../constants';
+import { focusEditor } from '../../core';
+const withMention = editor => {
+  const {
+    insertText,
+    onHotKeyDown,
+    isInline,
+    deleteBackward,
+    deleteForward,
+    normalizeNode
+  } = editor;
+  const newEditor = editor;
+  const eventBus = EventBus.getInstance();
+  newEditor.insertText = text => {
+    const {
+      selection
+    } = editor;
+    if (text === '@' && !getMentionTempIptEntry(editor)) {
+      insertTemporaryMentionInput(newEditor);
+      const {
+        anchor
+      } = selection;
+      const path = Editor.path(editor, anchor);
+      const abovePath = path.slice(0, path.length - 1);
+      const focusPath = abovePath.concat(path.at(-1) + 1);
+      focusEditor(editor, focusPath);
+      return;
+    }
+    const prevNodeEntry = Editor.previous(editor);
+    if (prevNodeEntry) {
+      const aboveNodeEntry = Editor.above(editor, {
+        match: n => n.type === MENTION_TEMP,
+        at: prevNodeEntry[1]
+      });
+      if (aboveNodeEntry) {
+        var _text$match;
+        const inputCnCharacter = (_text$match = text.match(/^[\u4e00-\u9fa5]+$/)) === null || _text$match === void 0 ? void 0 : _text$match.input;
+        if (inputCnCharacter) {
+          const insertPoint = Editor.end(editor, aboveNodeEntry[1]);
+          const nextNodeEntry = Editor.next(editor, {
+            at: aboveNodeEntry[1]
+          });
+          Transforms.insertText(editor, text, {
+            at: insertPoint
+          });
+          if (nextNodeEntry) {
+            const [nextNode, nextPath] = nextNodeEntry;
+            if (Text.isText(nextNode) && nextNode.text === '') {
+              Transforms.removeNodes(editor, {
+                at: nextPath
+              });
+            }
+          }
+          return focusEditor(editor, _objectSpread(_objectSpread({}, insertPoint), {}, {
+            offset: insertPoint.offset + text.length
+          }));
+        }
+      }
+    }
+    return insertText(text);
+  };
+  newEditor.deleteBackward = unit => {
+    const mentionTempInputEntry = getMentionTempIptEntry(editor);
+    if (mentionTempInputEntry) {
+      const {
+        selection
+      } = editor;
+      if (selection && Range.isCollapsed(selection)) {
+        const [node, path] = mentionTempInputEntry;
+        const contentString = Node.string(node);
+        if (!contentString) {
+          return Transforms.delete(editor, {
+            at: path
+          });
+        }
+      }
+    }
+
+    // Delete mention, when in mention
+    const prevNodeEntry = Editor.previous(editor);
+    if (prevNodeEntry) {
+      const aboveNodeEntry = Editor.above(editor, {
+        match: n => n.type === MENTION,
+        at: prevNodeEntry[1]
+      });
+      const mentionEntry = getMentionEntry(editor);
+      if (mentionEntry || aboveNodeEntry) {
+        const {
+          selection
+        } = editor;
+        if (selection && Range.isCollapsed(selection)) {
+          const [, mentionPath] = mentionEntry || aboveNodeEntry;
+          return Transforms.removeNodes(editor, {
+            at: mentionPath
+          });
+        }
+      }
+    }
+    return deleteBackward(unit);
+  };
+  newEditor.deleteForward = unit => {
+    const mentionEntry = Editor.next(editor, {
+      match: n => n.type === MENTION
+    });
+    if (mentionEntry) {
+      const [, mentionPath] = mentionEntry;
+      return Transforms.removeNodes(editor, {
+        at: mentionPath
+      });
+    }
+    return deleteForward(unit);
+  };
+  newEditor.onHotKeyDown = event => {
+    const mentionTempIptEntry = getMentionTempIptEntry(editor);
+    if (mentionTempIptEntry) {
+      const [, mentionTempIptPath] = mentionTempIptEntry;
+      const {
+        DownArrow,
+        UpArrow,
+        Enter,
+        Esc,
+        RightArrow,
+        LeftArrow
+      } = KeyCodes;
+      const {
+        keyCode
+      } = event;
+      if (keyCode === RightArrow || keyCode === LeftArrow) {
+        const {
+          selection
+        } = editor;
+        if (!selection) return;
+        if (!Range.isCollapsed(selection)) return;
+        if (keyCode === RightArrow) {
+          if (Editor.isEnd(editor, selection.focus, mentionTempIptPath)) return transformToText(newEditor);
+        }
+        if (keyCode === LeftArrow) {
+          if (Editor.isStart(editor, selection.focus, mentionTempIptPath)) {
+            event.preventDefault();
+            return transformToText(newEditor, false);
+          }
+        }
+      }
+
+      // Handle by collaborators list
+      const interceptorKeyCodes = [DownArrow, UpArrow, Enter, Esc];
+      if (interceptorKeyCodes.includes(keyCode)) {
+        event.preventDefault();
+        eventBus.dispatch(INTERNAL_EVENT.HANDLE_MENTION_TEMP_CHOSEN, {
+          event
+        });
+        return;
+      }
+    }
+    const mentionEntry = getMentionEntry(editor);
+    if (mentionEntry) {
+      const [, mentionPath] = mentionEntry;
+      const {
+        RightArrow,
+        LeftArrow
+      } = KeyCodes;
+      const {
+        keyCode
+      } = event;
+      if (keyCode === RightArrow || keyCode === LeftArrow) {
+        event.preventDefault();
+        if (keyCode === LeftArrow) {
+          const beginPoint = Editor.start(editor, mentionPath);
+          const focusPoint = Editor.before(editor, beginPoint, {
+            distance: 1
+          });
+          focusEditor(newEditor, focusPoint);
+        } else {
+          const endPoint = Editor.end(editor, mentionPath);
+          const focusPoint = Editor.after(editor, endPoint, {
+            distance: 1
+          });
+          focusEditor(newEditor, focusPoint);
+        }
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  newEditor.onCompositionUpdate = event => {
+    const mentionTempIptEntry = getMentionTempIptEntry(newEditor);
+    if (mentionTempIptEntry) {
+      const {
+        data
+      } = event;
+      const compositionText = data.replace(/\'/g, '');
+      eventBus.dispatch(INTERNAL_EVENT.UPDATE_MENTION_TEMP_CONTENT, {
+        compositionText
+      });
+      return true;
+    }
+  };
+  newEditor.onCompositionStart = event => {
+    const mentionTempIptEntry = getMentionTempIptEntry(editor);
+    if (mentionTempIptEntry) {
+      event.preventDefault();
+      return true;
+    }
+  };
+  newEditor.onCompositionEnd = event => {
+    const PrevMentionIptEntry = getPrevMentionIptEntry(newEditor);
+    if (PrevMentionIptEntry) {
+      const {
+        data
+      } = event;
+      const insertPoint = Editor.end(editor, PrevMentionIptEntry[1]);
+      const nextNodeEntry = Editor.next(editor, {
+        at: PrevMentionIptEntry[1]
+      });
+      Transforms.insertText(editor, data, {
+        at: insertPoint
+      });
+      event.preventDefault();
+      focusEditor(editor, _objectSpread(_objectSpread({}, insertPoint), {}, {
+        offset: insertPoint.offset + data.length
+      }));
+      if (nextNodeEntry) {
+        const [nextNode, nextPath] = nextNodeEntry;
+        if (Text.isText(nextNode) && nextNode.text === '') {
+          Transforms.removeNodes(editor, {
+            at: nextPath
+          });
+        }
+      }
+      return true;
+    }
+  };
+  newEditor.isInline = element => {
+    if ([MENTION, MENTION_TEMP].includes(element.type)) {
+      return true;
+    }
+    return isInline(element);
+  };
+  newEditor.normalizeNode = _ref => {
+    let [node, path] = _ref;
+    const mentionEntry = getMentionEntry(editor);
+    if (mentionEntry) {
+      const nextEntry = Editor.next(editor, {
+        at: mentionEntry[1]
+      });
+      const focusPoint = Editor.start(editor, nextEntry[1]);
+      focusEditor(editor, focusPoint);
+    }
+    return normalizeNode([node, path]);
+  };
+  return newEditor;
+};
+export default withMention;

package/dist/basic-sdk/{comment/components/comment-input → extension/plugins/mention/render-elem}/comment-participant-item.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react';
-import { eventStopPropagation } from '../../../utils/mouse-event';
+import { eventStopPropagation } from '../../../../utils/mouse-event';
 const CommentParticipantItem = _ref => {
   let {
     participant,

package/dist/basic-sdk/{comment/components/comment-input → extension/plugins/mention/render-elem}/index.css

@@ -5,7 +5,6 @@
   max-height: 200px;
   overflow: auto;
   min-width: 150px;
-  /* higher than row expand */
   z-index: 1049;
   border-radius: 5px;
   border: 1px solid #ededed;
@@ -43,3 +42,25 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.sdoc-mention-temp-ipt {
+  padding: 0 5px;
+  display: inline-block;
+  border-radius: 5px;
+  margin: 0 1px;
+}
+
+.sdoc-mention {
+  display: inline-block;
+  margin: 0 2px;
+  padding: 0 2px;
+  border: none;
+  background-color: transparent;
+  color: #1677ff;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.sdoc-mention:hover {
+  background-color: rgb(221, 236, 253);
+}

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

@@ -0,0 +1,51 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useCallback, useEffect, useState } from 'react';
+import { Node } from '@seafile/slate';
+import ParticipantPopover from './participant-popover';
+import EventBus from '../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../constants';
+import './index.css';
+const renderMention = _ref => {
+  let {
+    attributes,
+    children,
+    element,
+    editor,
+    readonly
+  } = _ref;
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes, {
+    contentEditable: "false",
+    key: element.id
+  }), /*#__PURE__*/React.createElement("button", {
+    className: "sdoc-mention"
+  }, children));
+};
+const renderMentionTemporaryInput = (_ref2, editor) => {
+  let {
+    attributes,
+    children,
+    element,
+    readonly
+  } = _ref2;
+  const [searchText, setSearchText] = useState('');
+  const updateSearchText = useCallback(_ref3 => {
+    let {
+      compositionText
+    } = _ref3;
+    setSearchText(Node.string(element) + compositionText);
+  }, [element]);
+  useEffect(() => {
+    setSearchText(Node.string(element));
+  }, [element]);
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    eventBus.subscribe(INTERNAL_EVENT.UPDATE_MENTION_TEMP_CONTENT, updateSearchText);
+  }, [updateSearchText]);
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, attributes, {
+    className: "sdoc-mention-temp-ipt"
+  }), /*#__PURE__*/React.createElement("span", null, "@"), /*#__PURE__*/React.createElement("span", null, children), /*#__PURE__*/React.createElement(ParticipantPopover, {
+    searchText: searchText,
+    editor: editor
+  }));
+};
+export { renderMention, renderMentionTemporaryInput };

package/dist/basic-sdk/extension/plugins/mention/render-elem/participant-popover.js

@@ -0,0 +1,219 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Editor, Transforms } from '@seafile/slate';
+import EventBus from '../../../../utils/event-bus';
+import { focusEditor } from '../../../core';
+import { useCollaborators } from '../../../../../hooks';
+import { useParticipantsContext } from '../../../../comment/hooks/use-participants';
+import { searchCollaborators } from '../../../../comment/utils';
+import { INTERNAL_EVENT } from '../../../../constants';
+import { DOWN, FONT_SIZE_WIDTH, LINE_HEIGHT, POPOVER_ADDING_HEIGHT, UP } from '../../../../comment/constants';
+import { eventStopPropagation } from '../../../../utils/mouse-event';
+import { getSelectionCoords } from '../../../../../utils';
+import { KeyCodes } from '../../../../../constants';
+import CommentParticipantItem from './comment-participant-item';
+import { getMentionTempIptEntry, insertMention, sortCollaborators, transformToText } from '../helper';
+import { ElementPopover } from '../../../commons';
+import './index.css';
+const ParticipantPopover = _ref => {
+  let {
+    editor,
+    searchText
+  } = _ref;
+  const collaboratorsPopoverRef = useRef(null);
+  const {
+    collaborators
+  } = useCollaborators();
+  const {
+    addParticipants,
+    participants
+  } = useParticipantsContext();
+  const [searchedCollaborators, setSearchedCollaborators] = useState([]);
+  const [activeCollaboratorIndex, setActiveCollaboratorIndex] = useState(-1);
+  const [validCollaborators, setValidCollaborators] = useState([]);
+  useEffect(() => {
+    const sortedCollaborators = sortCollaborators(collaborators, participants);
+    setValidCollaborators(sortedCollaborators);
+  }, [collaborators, participants]);
+  useEffect(() => {
+    return () => {
+      transformToText(editor);
+    };
+  }, [editor]);
+  const hideCommentPopover = useCallback(() => {
+    if (searchedCollaborators.length === 0) return;
+    setSearchedCollaborators([]);
+    setActiveCollaboratorIndex(-1);
+  }, [searchedCollaborators]);
+  const handleForceClickPopover = useCallback(event => {
+    var _collaboratorsPopover;
+    if (!((_collaboratorsPopover = collaboratorsPopoverRef.current) === null || _collaboratorsPopover === void 0 ? void 0 : _collaboratorsPopover.contains(event.target))) {
+      transformToText(editor);
+    }
+  }, [editor]);
+
+  // onMount: handleCommentPopover
+  useEffect(() => {
+    document.addEventListener('mousedown', handleForceClickPopover);
+    return () => {
+      document.removeEventListener('mousedown', handleForceClickPopover);
+    };
+  }, [handleForceClickPopover]);
+  const setScrollTop = useCallback((offsetTop, itemOffsetHeight, mouseDownType) => {
+    const {
+      offsetHeight,
+      scrollTop
+    } = collaboratorsPopoverRef.current;
+    if (mouseDownType === DOWN) {
+      if (offsetTop + itemOffsetHeight - scrollTop - offsetHeight + POPOVER_ADDING_HEIGHT > 0) {
+        let top = offsetTop + itemOffsetHeight - offsetHeight + POPOVER_ADDING_HEIGHT;
+        collaboratorsPopoverRef.current.scrollTop = top;
+      }
+    }
+    if (mouseDownType === UP) {
+      if (offsetTop < scrollTop) {
+        collaboratorsPopoverRef.current.scrollTop = offsetTop - POPOVER_ADDING_HEIGHT;
+      }
+    }
+  }, []);
+  const setCollaboratorsPopoverPosition = useCallback(caretPosition => {
+    if (!collaboratorsPopoverRef.current) return;
+    const {
+      height,
+      width
+    } = collaboratorsPopoverRef.current.getBoundingClientRect();
+    const {
+      offsetHeight
+    } = collaboratorsPopoverRef.current;
+
+    // Whether the vertical direction exceeds the screen
+    const isVerticalDirectionBeyondScreen = height + caretPosition.y + LINE_HEIGHT > window.innerHeight;
+
+    // if the vertical direction exceeds the screen, collaboratorsPopoverRef appear above the cursor
+    const top = isVerticalDirectionBeyondScreen ? "".concat(caretPosition.y - offsetHeight + LINE_HEIGHT, "px") : "".concat(caretPosition.y + LINE_HEIGHT, "px");
+    collaboratorsPopoverRef.current.style.top = top;
+
+    // Whether the horizontal direction exceeds the screen
+    const isHorizontalDirectionBeyondScreen = caretPosition.x + FONT_SIZE_WIDTH + width > window.innerWidth;
+
+    // if the horizontal direction exceeds the screen, collaboratorsPopoverRef is displayed against the right side of the screen
+    const left = isHorizontalDirectionBeyondScreen ? "".concat(window.innerWidth - width, "px") : "".concat(caretPosition.x + FONT_SIZE_WIDTH, "px");
+    collaboratorsPopoverRef.current.style.left = left;
+  }, [collaboratorsPopoverRef]);
+  const getSearchedCollaborators = useCallback(searchingText => {
+    if (!searchingText.length) return validCollaborators;
+    if (searchingText) return searchCollaborators(validCollaborators, searchingText);
+    return [];
+  }, [validCollaborators]);
+  const handleInvolvedKeyUp = useCallback(() => {
+    const searchedCollaborators = getSearchedCollaborators(searchText);
+    if (searchedCollaborators.length === 0) {
+      hideCommentPopover();
+      return;
+    }
+    setActiveCollaboratorIndex(0);
+    setSearchedCollaborators(searchedCollaborators);
+    setTimeout(() => {
+      const caretPosition = getSelectionCoords();
+      setCollaboratorsPopoverPosition(caretPosition);
+    }, 1);
+  }, [getSearchedCollaborators, searchText, hideCommentPopover, setCollaboratorsPopoverPosition]);
+  const handleSelectingCollaborator = useCallback((event, direction) => {
+    eventStopPropagation(event);
+    const collaboratorsLen = searchedCollaborators.length;
+    if (collaboratorsLen === 0) return;
+    let nextActiveCollaboratorIndex = activeCollaboratorIndex;
+    if (direction === DOWN) {
+      nextActiveCollaboratorIndex++;
+      if (nextActiveCollaboratorIndex >= collaboratorsLen) {
+        nextActiveCollaboratorIndex = 0;
+      }
+    } else {
+      nextActiveCollaboratorIndex--;
+      if (nextActiveCollaboratorIndex < 0) {
+        nextActiveCollaboratorIndex = collaboratorsLen - 1;
+      }
+    }
+    setActiveCollaboratorIndex(nextActiveCollaboratorIndex);
+  }, [searchedCollaborators, activeCollaboratorIndex]);
+  const onSelectCollaborator = useCallback(collaborator => {
+    const [node, path] = getMentionTempIptEntry(editor);
+    insertMention(editor, collaborator);
+    addParticipants(collaborator.username);
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+    const focusPath = Editor.next(editor, {
+      at: path
+    })[1];
+    focusEditor(editor, Editor.start(editor, focusPath));
+    hideCommentPopover();
+  }, [editor, hideCommentPopover, addParticipants]);
+  const handleSelectCollaborator = useCallback(event => {
+    if (searchedCollaborators.length === 0) return;
+    onSelectCollaborator(searchedCollaborators[activeCollaboratorIndex]);
+  }, [searchedCollaborators, activeCollaboratorIndex, onSelectCollaborator]);
+  const handleMentionChosen = useCallback(_ref2 => {
+    let {
+      event
+    } = _ref2;
+    if (event.keyCode === KeyCodes.DownArrow) {
+      handleSelectingCollaborator(event, DOWN);
+      return;
+    }
+    if (event.keyCode === KeyCodes.UpArrow) {
+      handleSelectingCollaborator(event, UP);
+      return;
+    }
+    if (event.keyCode === KeyCodes.Enter) {
+      if (collaboratorsPopoverRef.current) {
+        handleSelectCollaborator();
+        event.preventDefault();
+      } else {
+        transformToText(editor);
+      }
+      return;
+    }
+    if (event.keyCode === KeyCodes.Esc) {
+      transformToText(editor);
+      return;
+    }
+    handleInvolvedKeyUp(event);
+  }, [editor, handleInvolvedKeyUp, handleSelectCollaborator, handleSelectingCollaborator]);
+  const handleSearchTextChange = useCallback(() => {
+    const newCollaborators = getSearchedCollaborators(searchText);
+    if (newCollaborators.length === 0) {
+      hideCommentPopover();
+      return;
+    }
+    setSearchedCollaborators(newCollaborators);
+    setTimeout(() => {
+      const caretPosition = getSelectionCoords();
+      setCollaboratorsPopoverPosition(caretPosition);
+    }, 1);
+  }, [getSearchedCollaborators, hideCommentPopover, searchText, setCollaboratorsPopoverPosition]);
+  useEffect(() => {
+    handleSearchTextChange();
+    setActiveCollaboratorIndex(0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchText, validCollaborators]);
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.HANDLE_MENTION_TEMP_CHOSEN, handleMentionChosen);
+    return () => {
+      unsubscribe();
+    };
+  }, [handleMentionChosen, searchText, validCollaborators]);
+  if (searchedCollaborators.length === 0) return null;
+  return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-comment-caret-list",
+    ref: collaboratorsPopoverRef
+  }, searchedCollaborators.map((participant, index) => /*#__PURE__*/React.createElement(CommentParticipantItem, {
+    key: participant.username,
+    participantIndex: index,
+    activeParticipantIndex: activeCollaboratorIndex,
+    participant: participant,
+    setScrollTop: setScrollTop,
+    onSelectParticipant: onSelectCollaborator
+  }))));
+};
+export default ParticipantPopover;

package/dist/basic-sdk/extension/plugins/paragraph/helper.js

@@ -0,0 +1,10 @@
+import { Node, Text } from '@seafile/slate';
+export const isEmptyNode = node => {
+  const nodeChildren = node.children;
+  const isSingleChild = nodeChildren.length === 1;
+  const firstChild = nodeChildren[0];
+  const isText = Text.isText(firstChild);
+  const isEmptyContent = Node.string(firstChild) === '';
+  let isEmpty = isSingleChild && isText && isEmptyContent;
+  return isEmpty;
+};

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

@@ -3,6 +3,8 @@ import React from 'react';
 import { Node } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
 import { Placeholder } from '../../core';
+import { isEmptyNode } from './helper';
+const PLACEHOLDER = 'Please_enter_text';
 const Paragraph = _ref => {
   let {
     isComposing,
@@ -11,12 +13,16 @@ const Paragraph = _ref => {
     children
   } = _ref;
   const {
-    indent
+    indent,
+    placeholder = PLACEHOLDER
   } = element;
   const editor = useSlateStatic();
   let isShowPlaceHolder = false;
   if (editor.children.length === 1) {
-    isShowPlaceHolder = Node.string(element) === '' && !isComposing;
+    const node = editor.children[0];
+    const isChildEmpty = isEmptyNode(node);
+    const isParagraphEmpty = Node.string(element) === '';
+    isShowPlaceHolder = isChildEmpty && isParagraphEmpty && !isComposing;
   }
   if (editor.children.length === 2 && editor.children[0].type.startsWith('header')) {
     const node = editor.children[1];
@@ -33,7 +39,7 @@ const Paragraph = _ref => {
       position: isShowPlaceHolder ? 'relative' : ''
     }, style)
   }), children, isShowPlaceHolder && /*#__PURE__*/React.createElement(Placeholder, {
-    title: 'Please_enter_text'
+    title: placeholder
   }));
 };
 export const renderParagraph = props => {

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

@@ -0,0 +1,68 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback } from 'react';
+import { withTranslation } from 'react-i18next';
+import { TEXT_STYLE, MENUS_CONFIG_MAP } from '../../../constants';
+import { focusEditor } from '../../../core';
+import { MenuItem } from '../../../commons';
+import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
+import { BOLD, ITALIC } from '../../../constants/menus-config';
+const filterFontTypes = _ref => {
+  let {
+    id
+  } = _ref;
+  return [BOLD, ITALIC].includes(id);
+};
+const CommentEditorTextStyleMenuList = _ref2 => {
+  let {
+    editor,
+    isRichEditor,
+    className,
+    idPrefix,
+    readonly
+  } = _ref2;
+  const isActive = useCallback(type => {
+    const isMark = getValue(editor, type);
+    return !!isMark;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  const isDisabled = useCallback(() => {
+    return isMenuDisabled(editor, readonly);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, readonly]);
+  const onMouseDown = useCallback((event, type) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isDisabled()) return;
+    const active = isActive(type);
+    if (active) {
+      removeMark(editor, type);
+    } else {
+      addMark(editor, type);
+    }
+    focusEditor(editor);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  const getTextStyleList = useCallback(key => {
+    return MENUS_CONFIG_MAP[key].map(item => {
+      let itemProps = {
+        isRichEditor,
+        className,
+        disabled: isDisabled(),
+        isActive: isActive(item.type),
+        onMouseDown: onMouseDown
+      };
+      return _objectSpread(_objectSpread(_objectSpread({}, itemProps), item), {}, {
+        id: idPrefix ? "".concat(idPrefix, "_").concat(item.id) : item.id
+      });
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, readonly]);
+  const list = getTextStyleList(TEXT_STYLE).filter(filterFontTypes);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, list.map((itemProps, index) => /*#__PURE__*/React.createElement(MenuItem, Object.assign({
+    key: index
+  }, itemProps))));
+};
+export default withTranslation('sdoc-editor')(CommentEditorTextStyleMenuList);