@seafile/sdoc-editor 1.0.54 → 1.0.56

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

@@ -1,13 +1,19 @@
-import isHotkey from 'is-hotkey';
-import { Editor, Node, Range, Transforms } from '@seafile/slate';
-import { PARAGRAPH, INSERT_POSITION, CODE_BLOCK, CALL_OUT, ORDERED_LIST, UNORDERED_LIST } from '../../constants';
-import { getSelectedNodeEntryByType, isSelectionAtBlockStart } from '../../core';
-import { deleteCalloutIcon, getCalloutEntry, isCalloutContentEmpty, unwrapCallout } from './helper';
-import { insertElement } from '../../toolbar/side-toolbar/helpers';
-import EventBus from '../../../utils/event-bus';
-import { INTERNAL_EVENT } from '../../../constants';
-import { CALLOUT_ALLOWED_INSIDE_TYPES } from './constant';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _helper = require("./helper");
+var _helpers = require("../../toolbar/side-toolbar/helpers");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants2 = require("../../../constants");
+var _constant = require("./constant");
 /**
  * @param {Editor} editor
  * @returns
@@ -22,43 +28,43 @@ const withCallout = editor => {
   } = editor;
   const newEditor = editor;
   newEditor.deleteBackward = unit => {
-    const calloutEntry = getCalloutEntry(editor);
+    const calloutEntry = (0, _helper.getCalloutEntry)(editor);
     if (calloutEntry) {
       const node = calloutEntry[0];
-      if (isSelectionAtBlockStart(editor) && !!node.callout_icon) {
-        deleteCalloutIcon(editor);
+      if ((0, _core.isSelectionAtBlockStart)(editor) && !!node.callout_icon) {
+        (0, _helper.deleteCalloutIcon)(editor);
         return;
       }
-      if (isSelectionAtBlockStart(editor) && isCalloutContentEmpty(calloutEntry)) {
-        unwrapCallout(editor);
+      if ((0, _core.isSelectionAtBlockStart)(editor) && (0, _helper.isCalloutContentEmpty)(calloutEntry)) {
+        (0, _helper.unwrapCallout)(editor);
         return;
       }
     }
     return deleteBackward(unit);
   };
   newEditor.insertData = data => {
-    if (getCalloutEntry(newEditor)) {
+    if ((0, _helper.getCalloutEntry)(newEditor)) {
       if (data.types.includes('text/code-block')) {
-        const eventBus = EventBus.getInstance();
-        eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, CODE_BLOCK);
+        const eventBus = _eventBus.default.getInstance();
+        eventBus.dispatch(_constants2.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, _constants.CODE_BLOCK);
         return;
       }
     }
     return insertData(data);
   };
   newEditor.insertFragment = data => {
-    if (getCalloutEntry(editor)) {
+    if ((0, _helper.getCalloutEntry)(editor)) {
       var _data$find;
       // Prvent insert new line when insert fragment
-      if (Range.isCollapsed(editor.selection)) {
-        const paragraphEntry = getSelectedNodeEntryByType(newEditor, PARAGRAPH);
+      if (_slate.Range.isCollapsed(editor.selection)) {
+        const paragraphEntry = (0, _core.getSelectedNodeEntryByType)(newEditor, _constants.PARAGRAPH);
         if (paragraphEntry) {
-          const parentNodeEntry = Editor.parent(editor, paragraphEntry[1]);
-          if (parentNodeEntry && parentNodeEntry[0].type === CALL_OUT) {
-            if (!Node.string(paragraphEntry[0]).length) {
+          const parentNodeEntry = _slate.Editor.parent(editor, paragraphEntry[1]);
+          if (parentNodeEntry && parentNodeEntry[0].type === _constants.CALL_OUT) {
+            if (!_slate.Node.string(paragraphEntry[0]).length) {
               insertFragment(data);
-              if ([ORDERED_LIST, UNORDERED_LIST].includes(data[0].type)) {
-                Transforms.removeNodes(newEditor, {
+              if ([_constants.ORDERED_LIST, _constants.UNORDERED_LIST].includes(data[0].type)) {
+                _slate.Transforms.removeNodes(newEditor, {
                   at: paragraphEntry[1]
                 });
               }
@@ -67,33 +73,33 @@ const withCallout = editor => {
           }
         }
       }
-      const eventBus = EventBus.getInstance();
-      const unsupportType = (_data$find = data.find(node => !CALLOUT_ALLOWED_INSIDE_TYPES.includes(node.type))) === null || _data$find === void 0 ? void 0 : _data$find.type;
+      const eventBus = _eventBus.default.getInstance();
+      const unsupportType = (_data$find = data.find(node => !_constant.CALLOUT_ALLOWED_INSIDE_TYPES.includes(node.type))) === null || _data$find === void 0 ? void 0 : _data$find.type;
       if (unsupportType) {
-        eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, unsupportType);
+        eventBus.dispatch(_constants2.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, unsupportType);
         return;
       }
     }
     return insertFragment(data);
   };
   newEditor.onHotKeyDown = event => {
-    const calloutEntry = getCalloutEntry(editor);
+    const calloutEntry = (0, _helper.getCalloutEntry)(editor);
     if (calloutEntry) {
       const [, calloutPath] = calloutEntry;
       // Close color picker
-      const eventBus = EventBus.getInstance();
-      eventBus.dispatch(INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER);
-      if (isHotkey('mod+enter', event)) {
-        insertElement(newEditor, PARAGRAPH, INSERT_POSITION.AFTER);
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants2.INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER);
+      if ((0, _isHotkey.default)('mod+enter', event)) {
+        (0, _helpers.insertElement)(newEditor, _constants.PARAGRAPH, _constants.INSERT_POSITION.AFTER);
         return true;
       }
-      if (isHotkey('mod+a', event)) {
+      if ((0, _isHotkey.default)('mod+a', event)) {
         event.preventDefault();
         try {
-          const startPoint = Editor.start(newEditor, calloutPath);
-          const endPoint = Editor.end(newEditor, calloutPath);
-          const selectRange = Editor.range(newEditor, startPoint, endPoint);
-          Transforms.select(newEditor, selectRange);
+          const startPoint = _slate.Editor.start(newEditor, calloutPath);
+          const endPoint = _slate.Editor.end(newEditor, calloutPath);
+          const selectRange = _slate.Editor.range(newEditor, startPoint, endPoint);
+          _slate.Transforms.select(newEditor, selectRange);
           return true;
         } catch (error) {
           return true;
@@ -103,11 +109,11 @@ const withCallout = editor => {
     return onHotKeyDown && onHotKeyDown(event);
   };
   newEditor.onCopy = event => {
-    if (getCalloutEntry(editor)) {
+    if ((0, _helper.getCalloutEntry)(editor)) {
       event.stopPropagation();
     }
     return onCopy(event);
   };
   return newEditor;
 };
-export default withCallout;
+var _default = exports.default = withCallout;

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-color-selector/index.js

@@ -1,16 +1,23 @@
-import React, { useCallback } from 'react';
-import { Transforms } from '@seafile/slate';
-import { CALLOUT_COLOR_MAP } from '../../constant';
-import { findPath } from '../../../../core';
-import { changeFillBackgroundColor } from '../../helper';
-import './style.css';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _constant = require("../../constant");
+var _core = require("../../../../core");
+var _helper = require("../../helper");
+require("./style.css");
 const ColorSelector = _ref => {
   let {
     editor,
     element,
     onCloseSelector
   } = _ref;
-  const onColorClick = useCallback(event => {
+  const onColorClick = (0, _react.useCallback)(event => {
     event.stopPropagation();
     let target = event.target;
     while (!target.dataset || !target.dataset.backgroundColor) {
@@ -19,29 +26,29 @@ const ColorSelector = _ref => {
     const {
       backgroundColor
     } = target.dataset;
-    const currentPath = findPath(editor, element);
-    Transforms.select(editor, currentPath);
-    changeFillBackgroundColor(editor, backgroundColor);
+    const currentPath = (0, _core.findPath)(editor, element);
+    _slate.Transforms.select(editor, currentPath);
+    (0, _helper.changeFillBackgroundColor)(editor, backgroundColor);
     onCloseSelector();
   }, [editor, element, onCloseSelector]);
-  const isShowCheckedIcon = useCallback(currentBackgroundColor => {
+  const isShowCheckedIcon = (0, _react.useCallback)(currentBackgroundColor => {
     const {
       background_color
     } = element.style || {};
     return background_color && background_color === currentBackgroundColor;
   }, [element.style]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-callout-color-selector-container",
     contentEditable: false
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, /*#__PURE__*/_react.default.createElement("ul", {
     className: "sdoc-color-selector-list"
-  }, Object.values(CALLOUT_COLOR_MAP).map((_ref2, index) => {
+  }, Object.values(_constant.CALLOUT_COLOR_MAP).map((_ref2, index) => {
     let {
       border_color,
       background_color
     } = _ref2;
-    return /*#__PURE__*/React.createElement("li", {
-      key: "sdoc-callout-color-selector-".concat(index),
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: `sdoc-callout-color-selector-${index}`,
       className: "sdoc-callout-color-item",
       "data-border-color": border_color,
       "data-background-color": background_color,
@@ -50,9 +57,9 @@ const ColorSelector = _ref => {
         backgroundColor: background_color
       },
       onClick: onColorClick
-    }, isShowCheckedIcon(background_color) && /*#__PURE__*/React.createElement("i", {
+    }, isShowCheckedIcon(background_color) && /*#__PURE__*/_react.default.createElement("i", {
       className: "sdoc-callout-color-checked-icon sdocfont sdoc-check-mark"
     }));
   })));
 };
-export default ColorSelector;
+var _default = exports.default = ColorSelector;

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-hover-menu/index.js

@@ -1,81 +1,89 @@
-import React, { useCallback, useState } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import { ElementPopover } from '../../../../commons';
-import ColorSelector from '../callout-color-selector';
-import IconSelector from '../callout-icon';
-import { setCalloutIcon } from '../../helper';
-import './style.css';
-export default function CalloutHoverMenu(_ref) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CalloutHoverMenu;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
+var _commons = require("../../../../commons");
+var _calloutColorSelector = _interopRequireDefault(require("../callout-color-selector"));
+var _calloutIcon = _interopRequireDefault(require("../callout-icon"));
+var _helper = require("../../helper");
+require("./style.css");
+function CalloutHoverMenu(_ref) {
   let {
     editor,
     element,
     popoverPosition
   } = _ref;
-  const [isShowColorSelector, setIsShowColorSelector] = useState(false);
-  const [isShowIcon, setIsShowIcon] = useState(false);
+  const [isShowColorSelector, setIsShowColorSelector] = (0, _react.useState)(false);
+  const [isShowIcon, setIsShowIcon] = (0, _react.useState)(false);
   const {
     t
-  } = useTranslation();
-  const onColorSelectorToggle = useCallback(event => {
+  } = (0, _reactI18next.useTranslation)();
+  const onColorSelectorToggle = (0, _react.useCallback)(event => {
     event.stopPropagation();
     if (!isShowColorSelector) {
       setIsShowIcon(false);
     }
     setIsShowColorSelector(!isShowColorSelector);
   }, [isShowColorSelector, setIsShowColorSelector]);
-  const onIconToggle = useCallback(event => {
+  const onIconToggle = (0, _react.useCallback)(event => {
     event.stopPropagation();
     if (!isShowIcon) {
       setIsShowColorSelector(false);
     }
     setIsShowIcon(!isShowIcon);
   }, [isShowIcon, setIsShowIcon]);
-  const onCloseSelector = useCallback(() => {
+  const onCloseSelector = (0, _react.useCallback)(() => {
     setIsShowColorSelector(false);
     setIsShowIcon(false);
   }, []);
-  const firstItemClass = classNames({
+  const firstItemClass = (0, _classnames.default)({
     'callout-menu-item': true,
     'color-active': isShowColorSelector
   });
-  const secondItemClass = classNames({
+  const secondItemClass = (0, _classnames.default)({
     'callout-menu-item': true,
     'icon-active': isShowIcon
   });
   const handleRemoveIcon = () => {
-    setCalloutIcon(editor, '');
+    (0, _helper.setCalloutIcon)(editor, '');
   };
-  return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-callout-hover-menu",
     style: popoverPosition
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: firstItemClass,
     onClick: onColorSelectorToggle
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: "sdocfont sdoc-callout-color mr-1"
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: "sdocfont sdoc-drop-down"
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "callout-menu-divider"
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: secondItemClass,
     onClick: onIconToggle
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: "sdocfont sdoc-callout-icon mr-1"
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: "sdocfont sdoc-drop-down"
-  })), isShowColorSelector && /*#__PURE__*/React.createElement(ColorSelector, {
+  })), isShowColorSelector && /*#__PURE__*/_react.default.createElement(_calloutColorSelector.default, {
     editor: editor,
     element: element,
     onCloseSelector: onCloseSelector
-  }), isShowIcon && /*#__PURE__*/React.createElement(IconSelector, {
+  }), isShowIcon && /*#__PURE__*/_react.default.createElement(_calloutIcon.default, {
     editor: editor,
     element: element,
     onCloseSelector: onCloseSelector
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "callout-menu-divider"
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "callout-menu-item",
     onClick: handleRemoveIcon
   }, t('Remove_icon'))));

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

@@ -1,38 +1,45 @@
-import React, { useCallback } from 'react';
-import { Transforms } from '@seafile/slate';
-import { findPath } from '../../../../core';
-import { setCalloutIcon } from '../../helper';
-import { CALLOUT_ICON_MAP } from '../../constant';
-import './style.css';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _core = require("../../../../core");
+var _helper = require("../../helper");
+var _constant = require("../../constant");
+require("./style.css");
 const IconSelector = _ref => {
   let {
     editor,
     element,
     onCloseSelector
   } = _ref;
-  const onImageClick = useCallback(event => {
+  const onImageClick = (0, _react.useCallback)(event => {
     event.stopPropagation();
     const {
       image
     } = event.target.dataset;
     if (!image) return;
-    const currentPath = findPath(editor, element);
-    Transforms.select(editor, currentPath);
-    setCalloutIcon(editor, image);
+    const currentPath = (0, _core.findPath)(editor, element);
+    _slate.Transforms.select(editor, currentPath);
+    (0, _helper.setCalloutIcon)(editor, image);
     onCloseSelector();
   }, [editor, element, onCloseSelector]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-callout-icon-selector-container",
     onClick: onImageClick
-  }, Object.keys(CALLOUT_ICON_MAP).map(key => {
-    const content = CALLOUT_ICON_MAP[key];
-    return /*#__PURE__*/React.createElement("div", {
+  }, Object.keys(_constant.CALLOUT_ICON_MAP).map(key => {
+    const content = _constant.CALLOUT_ICON_MAP[key];
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: key,
       className: "icon-item"
-    }, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/_react.default.createElement("span", {
       className: 'sdoc-emoji ' + key,
       "data-image": key
     }, content));
   }));
 };
-export default IconSelector;
+var _default = exports.default = IconSelector;

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

@@ -1,79 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _reactI18next = require("react-i18next");
+var _constant = require("../constant");
+var _constants = require("../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _useScrollContext = require("../../../../hooks/use-scroll-context");
+var _helper = require("../helper");
+var _calloutHoverMenu = _interopRequireDefault(require("./callout-hover-menu"));
+require("./index.css");
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Node } from '@seafile/slate';
-import { useReadOnly, useSelected } from '@seafile/slate-react';
-import { useTranslation } from 'react-i18next';
-import { CALLOUT_COLOR_MAP, CALLOUT_ICON_MAP } from '../constant';
-import { INTERNAL_EVENT } from '../../../../constants';
-import EventBus from '../../../../utils/event-bus';
-import { useScrollContext } from '../../../../hooks/use-scroll-context';
-import { getCalloutMenuPosition } from '../helper';
-import CalloutHoverMenu from './callout-hover-menu';
-import './index.css';
+
 const renderCallout = (_ref, editor) => {
   let {
     attributes,
     children,
     element
   } = _ref;
-  const readOnly = useReadOnly();
-  const scrollRef = useScrollContext();
-  const isSelected = useSelected();
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const isSelected = (0, _slateReact.useSelected)();
   const {
     t
-  } = useTranslation();
-  const calloutRef = useRef();
-  const [isShowColorSelector, setIsShowColorSelector] = useState(false);
-  const [popoverPosition, setPopoverPosition] = useState({
+  } = (0, _reactI18next.useTranslation)();
+  const calloutRef = (0, _react.useRef)();
+  const [isShowColorSelector, setIsShowColorSelector] = (0, _react.useState)(false);
+  const [popoverPosition, setPopoverPosition] = (0, _react.useState)({
     top: '',
     left: ''
   });
-  const containerStyle = useMemo(() => {
+  const containerStyle = (0, _react.useMemo)(() => {
     const {
       background_color = 'transparent'
     } = element.style;
     let borderColor = 'transparent';
     if (isSelected) {
       var _CALLOUT_COLOR_MAP$ba;
-      borderColor = (_CALLOUT_COLOR_MAP$ba = CALLOUT_COLOR_MAP[background_color]) === null || _CALLOUT_COLOR_MAP$ba === void 0 ? void 0 : _CALLOUT_COLOR_MAP$ba.border_color;
+      borderColor = (_CALLOUT_COLOR_MAP$ba = _constant.CALLOUT_COLOR_MAP[background_color]) === null || _CALLOUT_COLOR_MAP$ba === void 0 ? void 0 : _CALLOUT_COLOR_MAP$ba.border_color;
     }
     return {
       backgroundColor: background_color,
       borderColor
     };
   }, [element.style, isSelected]);
-  const calloutIcon = useMemo(() => {
+  const calloutIcon = (0, _react.useMemo)(() => {
     const {
       callout_icon = ''
     } = element;
     if (!callout_icon) return null;
-    return CALLOUT_ICON_MAP[callout_icon];
+    return _constant.CALLOUT_ICON_MAP[callout_icon];
   }, [element]);
-  const isShowPlaceholder = useCallback(() => {
+  const isShowPlaceholder = (0, _react.useCallback)(() => {
     if (isSelected) return false;
     // If element contains more than one element or element is not paragraph, show placeholder
     const isContainUnitElement = element.children.length !== 1 || element.children.some(childElement => childElement.type !== 'paragraph');
     if (isContainUnitElement) return false;
-    const elementContent = Node.string(element);
+    const elementContent = _slate.Node.string(element);
     return !elementContent.length;
   }, [element, isSelected]);
-  const handleCloseColorSelector = useCallback(() => {
+  const handleCloseColorSelector = (0, _react.useCallback)(() => {
     setIsShowColorSelector(false);
   }, []);
-  const handleScroll = useCallback(e => {
+  const handleScroll = (0, _react.useCallback)(e => {
     if (readOnly) return;
     if (!isShowColorSelector) return;
     if (e.currentTarget.scrollTop) {
-      const menuPosition = getCalloutMenuPosition(calloutRef.current, editor);
+      const menuPosition = (0, _helper.getCalloutMenuPosition)(calloutRef.current, editor);
       setPopoverPosition(menuPosition);
     }
   }, [editor, isShowColorSelector, readOnly]);
-  useEffect(() => {
-    const eventBus = EventBus.getInstance();
-    const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER, handleCloseColorSelector);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER, handleCloseColorSelector);
     return unsubscribe;
   }, [handleCloseColorSelector]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (readOnly) return;
     let observerRefValue = null;
     if (scrollRef.current) {
@@ -84,41 +93,41 @@ const renderCallout = (_ref, editor) => {
       observerRefValue.removeEventListener('scroll', handleScroll);
     };
   }, [handleScroll, readOnly, scrollRef]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (!isSelected) {
       setIsShowColorSelector(false);
     }
   }, [isSelected]);
-  const handleDisplayColorSelector = useCallback(() => {
+  const handleDisplayColorSelector = (0, _react.useCallback)(() => {
     if (readOnly) return;
-    const menuPosition = getCalloutMenuPosition(calloutRef.current, editor);
+    const menuPosition = (0, _helper.getCalloutMenuPosition)(calloutRef.current, editor);
     setPopoverPosition(menuPosition);
     setIsShowColorSelector(true);
   }, [editor, readOnly]);
-  const handleClick = useCallback(e => {
+  const handleClick = (0, _react.useCallback)(e => {
     handleDisplayColorSelector();
   }, [handleDisplayColorSelector]);
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
     "data-id": element.id,
     className: "sdoc-callout-white-wrapper"
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     onClick: handleClick,
     ref: calloutRef,
-    className: "".concat(attributes.className, " sdoc-callout-container"),
+    className: `${attributes.className} sdoc-callout-container`,
     style: containerStyle
-  }, element.callout_icon && /*#__PURE__*/React.createElement("div", {
+  }, element.callout_icon && /*#__PURE__*/_react.default.createElement("div", {
     className: "callout-icon"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: 'sdoc-emoji ' + element.callout_icon
-  }, calloutIcon)), /*#__PURE__*/React.createElement("div", {
+  }, calloutIcon)), /*#__PURE__*/_react.default.createElement("div", {
     className: "callout-content"
-  }, children, isShowPlaceholder() && /*#__PURE__*/React.createElement("div", {
+  }, children, isShowPlaceholder() && /*#__PURE__*/_react.default.createElement("div", {
     contentEditable: false,
     className: "sdoc-callout-placeholder"
-  }, t('Please_enter'), "...")), isShowColorSelector && /*#__PURE__*/React.createElement(CalloutHoverMenu, {
+  }, t('Please_enter'), "...")), isShowColorSelector && /*#__PURE__*/_react.default.createElement(_calloutHoverMenu.default, {
     editor: editor,
     element: element,
     popoverPosition: popoverPosition
   })));
 };
-export default renderCallout;
+var _default = exports.default = renderCallout;