@seafile/comment-editor 0.0.1 → 0.0.2

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

@@ -1,52 +0,0 @@
-"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 _reactI18next = require("react-i18next");
-var _toast = _interopRequireDefault(require("../../../../components/toast"));
-var _constants = require("../../../../constants");
-var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
-var _commons = require("../../../commons");
-var _constants2 = require("../../../constants");
-var _elementType = require("../../../constants/element-type");
-var _helper = require("../helper");
-const menuConfig = _constants2.MENUS_CONFIG_MAP[_elementType.CALL_OUT];
-const CalloutMenu = _ref => {
-  let {
-    editor,
-    isRichEditor,
-    className,
-    readonly
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)('sdoc-editor');
-  const handleDisplayAlert = (0, _react.useCallback)(type => {
-    setTimeout(() => {
-      _toast.default.warning(`${t('The_current_location_does_not_support_pasting')}${t(type && type.at(0).toUpperCase() + type.slice(1))}`);
-    }, 0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    const unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, handleDisplayAlert);
-    return unsubscribe;
-  }, [handleDisplayAlert]);
-  const handleClick = (0, _react.useCallback)(e => {
-    (0, _helper.isMenuActive)(editor) ? (0, _helper.unwrapCallout)(editor) : (0, _helper.wrapCallout)(editor);
-  }, [editor]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
-    isRichEditor: isRichEditor,
-    className: className,
-    ariaLabel: "callout",
-    disabled: (0, _helper.isMenuDisabled)(editor, readonly),
-    isActive: (0, _helper.isMenuActive)(editor),
-    onMouseDown: handleClick
-  }, menuConfig)));
-};
-var _default = exports.default = CalloutMenu;

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

@@ -1,109 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slate = require("@seafile/slate");
-var _isHotkey = _interopRequireDefault(require("is-hotkey"));
-var _constants = require("../../../constants");
-var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
-var _constants2 = require("../../constants");
-var _core = require("../../core");
-var _constant = require("./constant");
-var _helper = require("./helper");
-/**
- * @param {Editor} editor
- * @returns
- */
-const withCallout = editor => {
-  const {
-    insertFragment,
-    deleteBackward,
-    onHotKeyDown,
-    insertData
-  } = editor;
-  const newEditor = editor;
-  newEditor.deleteBackward = unit => {
-    const calloutEntry = (0, _helper.getCalloutEntry)(editor);
-    if (calloutEntry) {
-      const node = calloutEntry[0];
-      if ((0, _core.isSelectionAtBlockStart)(editor) && !!node.callout_icon) {
-        (0, _helper.deleteCalloutIcon)(editor);
-        return;
-      }
-      if ((0, _core.isSelectionAtBlockStart)(editor) && (0, _helper.isCalloutContentEmpty)(calloutEntry)) {
-        (0, _helper.unwrapCallout)(editor);
-        return;
-      }
-    }
-    return deleteBackward(unit);
-  };
-  newEditor.insertData = data => {
-    if ((0, _helper.getCalloutEntry)(newEditor)) {
-      if (data.types.includes('text/code-block')) {
-        const eventBus = _eventBus.default.getInstance();
-        eventBus.dispatch(_constants.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, _constants2.CODE_BLOCK);
-        return;
-      }
-    }
-    return insertData(data);
-  };
-  newEditor.insertFragment = data => {
-    if ((0, _helper.getCalloutEntry)(editor)) {
-      var _data$find;
-      // No paste any unsupportedType content into callout
-      const unsupportedType = (_data$find = data.find(node => !_constant.CALLOUT_ALLOWED_INSIDE_TYPES.includes(node.type))) === null || _data$find === void 0 ? void 0 : _data$find.type;
-      if (unsupportedType) {
-        const eventBus = _eventBus.default.getInstance();
-        eventBus.dispatch(_constants.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, unsupportedType);
-        return;
-      }
-
-      // Unwrap the callout nodes if nested within another callout
-      const hasCalloutNode = data.some(node => node.type === _constants2.CALL_OUT);
-      if (hasCalloutNode) {
-        const newData = data.flatMap(node => node.type === _constants2.CALL_OUT ? node.children : [node]);
-        insertFragment(newData);
-      } else {
-        insertFragment(data);
-      }
-      return;
-    }
-    return insertFragment(data);
-  };
-  newEditor.onHotKeyDown = event => {
-    const calloutEntry = (0, _helper.getCalloutEntry)(editor);
-    if (calloutEntry) {
-      const [, calloutPath] = calloutEntry;
-      // Close color picker
-      const eventBus = _eventBus.default.getInstance();
-      eventBus.dispatch(_constants.INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER);
-      if ((0, _isHotkey.default)('mod+enter', event)) {
-        (0, _helper.insertElement)(newEditor, _constants2.PARAGRAPH, _constants2.INSERT_POSITION.AFTER);
-        return true;
-      }
-      if ((0, _isHotkey.default)('mod+a', event)) {
-        event.preventDefault();
-        try {
-          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;
-        }
-      }
-    }
-    return onHotKeyDown && onHotKeyDown(event);
-  };
-  newEditor.onCopy = event => {
-    if ((0, _helper.getCalloutEntry)(editor)) {
-      event.stopPropagation();
-    }
-  };
-  return newEditor;
-};
-var _default = exports.default = withCallout;

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

@@ -1,65 +0,0 @@
-"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 _constant = require("../../constant");
-var _helper = require("../../helper");
-require("./style.css");
-const ColorSelector = _ref => {
-  let {
-    editor,
-    element,
-    onCloseSelector
-  } = _ref;
-  const onColorClick = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    let target = event.target;
-    while (!target.dataset || !target.dataset.backgroundColor) {
-      target = target.parentNode;
-    }
-    const {
-      backgroundColor
-    } = target.dataset;
-    const currentPath = (0, _core.findPath)(editor, element);
-    _slate.Transforms.select(editor, currentPath);
-    (0, _helper.changeFillBackgroundColor)(editor, backgroundColor);
-    onCloseSelector();
-  }, [editor, element, onCloseSelector]);
-  const isShowCheckedIcon = (0, _react.useCallback)(currentBackgroundColor => {
-    const {
-      background_color
-    } = element.style || {};
-    return background_color && background_color === currentBackgroundColor;
-  }, [element.style]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-callout-color-selector-container",
-    contentEditable: false
-  }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "sdoc-color-selector-list"
-  }, Object.values(_constant.CALLOUT_COLOR_MAP).map((_ref2, index) => {
-    let {
-      border_color,
-      background_color
-    } = _ref2;
-    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,
-      style: {
-        borderColor: border_color,
-        backgroundColor: background_color
-      },
-      onClick: onColorClick
-    }, isShowCheckedIcon(background_color) && /*#__PURE__*/_react.default.createElement("i", {
-      className: "sdoc-callout-color-checked-icon sdocfont sdoc-check-mark"
-    }));
-  })));
-};
-var _default = exports.default = ColorSelector;

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-color-selector/style.css

@@ -1,39 +0,0 @@
-.sdoc-callout-color-selector-container {
-  position: absolute;
-  padding: 10px;
-  left: 0;
-  top: 36.5px;
-  background-color: #fff;
-  border: 1px solid #eee;
-  border-radius: 3px;
-  z-index: 100;
-}
-
-.sdoc-callout-color-selector-container .sdoc-color-selector-list {
-  display: flex;
-  margin: 0;
-  padding: 0;
-}
-
-.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item {
-  position: relative;
-  margin-right: 10px;
-  width: 20px;
-  height: 20px;
-  list-style: none;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item:last-child {
-  margin-right: 0px;
-}
-
-.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item .sdoc-callout-color-checked-icon {
-  position: absolute;
-  top: 1px;
-  left: 3px;
-  font-size: 12px;
-}

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

@@ -1,90 +0,0 @@
-"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 _reactI18next = require("react-i18next");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _commons = require("../../../../commons");
-var _helper = require("../../helper");
-var _calloutColorSelector = _interopRequireDefault(require("../callout-color-selector"));
-var _calloutIcon = _interopRequireDefault(require("../callout-icon"));
-require("./style.css");
-function CalloutHoverMenu(_ref) {
-  let {
-    editor,
-    element,
-    popoverPosition
-  } = _ref;
-  const [isShowColorSelector, setIsShowColorSelector] = (0, _react.useState)(false);
-  const [isShowIcon, setIsShowIcon] = (0, _react.useState)(false);
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)('sdoc-editor');
-  const onColorSelectorToggle = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    if (!isShowColorSelector) {
-      setIsShowIcon(false);
-    }
-    setIsShowColorSelector(!isShowColorSelector);
-  }, [isShowColorSelector, setIsShowColorSelector]);
-  const onIconToggle = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    if (!isShowIcon) {
-      setIsShowColorSelector(false);
-    }
-    setIsShowIcon(!isShowIcon);
-  }, [isShowIcon, setIsShowIcon]);
-  const onCloseSelector = (0, _react.useCallback)(() => {
-    setIsShowColorSelector(false);
-    setIsShowIcon(false);
-  }, []);
-  const firstItemClass = (0, _classnames.default)({
-    'callout-menu-item': true,
-    'color-active': isShowColorSelector
-  });
-  const secondItemClass = (0, _classnames.default)({
-    'callout-menu-item': true,
-    'icon-active': isShowIcon
-  });
-  const handleRemoveIcon = () => {
-    (0, _helper.setCalloutIcon)(editor, '');
-  };
-  return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-callout-hover-menu",
-    style: popoverPosition
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: firstItemClass,
-    onClick: onColorSelectorToggle
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdocfont sdoc-callout-color mr-1"
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdocfont sdoc-drop-down"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "callout-menu-divider"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: secondItemClass,
-    onClick: onIconToggle
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdocfont sdoc-callout-icon mr-1"
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdocfont sdoc-drop-down"
-  })), isShowColorSelector && /*#__PURE__*/_react.default.createElement(_calloutColorSelector.default, {
-    editor: editor,
-    element: element,
-    onCloseSelector: onCloseSelector
-  }), isShowIcon && /*#__PURE__*/_react.default.createElement(_calloutIcon.default, {
-    editor: editor,
-    element: element,
-    onCloseSelector: onCloseSelector
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "callout-menu-divider"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "callout-menu-item",
-    onClick: handleRemoveIcon
-  }, t('Remove_icon'))));
-}

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-hover-menu/style.css

@@ -1,45 +0,0 @@
-.sdoc-callout-hover-menu {
-  position: absolute;
-  padding: 7px;
-  height: 36px;
-  background-color: #fff;
-  border: 1px solid #eee;
-  border-radius: 3px;
-  z-index: 100;
-  display: flex;
-}
-
-.sdoc-callout-hover-menu .callout-menu-item {
-  padding: 0 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  color: #212529;
-  cursor: pointer;
-  border-radius: 3px;
-}
-
-.sdoc-callout-hover-menu .callout-menu-item:hover {
-  background-color: #f2f2f2;
-}
-
-.sdoc-callout-hover-menu .callout-menu-item .sdocfont {
-  font-size: 12px;
-  color: #444;
-}
-
-.sdoc-callout-hover-menu .callout-menu-item .sdoc-drop-down {
-  color: #999;
-}
-
-.sdoc-callout-hover-menu .callout-menu-item.color-active,
-.sdoc-callout-hover-menu .callout-menu-item.icon-active {
-  background-color: #f2f2f2;
-  border-radius: 2px;
-}
-
-.sdoc-callout-hover-menu .callout-menu-divider {
-  border-left: 1px solid #ccc;
-  margin: 4px 8px;
-}

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

@@ -1,45 +0,0 @@
-"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 _constant = require("../../constant");
-var _helper = require("../../helper");
-require("./style.css");
-const IconSelector = _ref => {
-  let {
-    editor,
-    element,
-    onCloseSelector
-  } = _ref;
-  const onImageClick = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    const {
-      image
-    } = event.target.dataset;
-    if (!image) return;
-    const currentPath = (0, _core.findPath)(editor, element);
-    _slate.Transforms.select(editor, currentPath);
-    (0, _helper.setCalloutIcon)(editor, image);
-    onCloseSelector();
-  }, [editor, element, onCloseSelector]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-callout-icon-selector-container",
-    onClick: onImageClick
-  }, 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.default.createElement("span", {
-      className: 'sdoc-emoji ' + key,
-      "data-image": key
-    }, content));
-  }));
-};
-var _default = exports.default = IconSelector;

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-icon/style.css

@@ -1,33 +0,0 @@
-.sdoc-callout-icon-selector-container {
-  position: absolute;
-  padding: 4px;
-  left: 40px;
-  top: 36.5px;
-  background-color: #fff;
-  border: 1px solid #eee;
-  border-radius: 3px;
-  display: flex;
-  min-width: 100px;
-  z-index: 100;
-}
-
-.sdoc-callout-icon-selector-container .icon-item {
-  width: 32px;
-  height: 32px;
-  margin: 0 4px;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.sdoc-callout-icon-selector-container .icon-item:hover {
-  background-color: #f2f2f2;
-}
-
-.sdoc-callout-icon-selector-container .icon-item img {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-}

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

@@ -1,52 +0,0 @@
-.sdoc-callout-white-wrapper {
-  padding: 5px 0;
-}
-
-.sdoc-callout-container {
-  position: relative;
-  padding: 10px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 5px;
-  display: flex;
-}
-
-.sdoc-callout-container .callout-content {
-  flex: 1;
-  position: relative;
-  overflow: auto;
-}
-
-.sdoc-callout-container .sdoc-callout-placeholder {
-  position: absolute;
-  top: 5px;
-  color: #b8b6b6;
-  pointer-events: none;
-}
-
-.sdoc-emoji {
-  font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
-  white-space: nowrap;
-  height: 24px;
-  width: 24px;
-  line-height: 24px;
-  font-size: 21px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.sdoc-emoji.wraning {
-  color: block;
-}
-
-.sdoc-callout-container .callout-icon {
-  width: 18px;
-  margin-right: 8px;
-  margin-top: 2px;
-}
-
-.sdoc-callout-container .callout-icon .sdoc-emoji {
-  font-size: 16px;
-}
-

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

@@ -1,134 +0,0 @@
-"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 _reactI18next = require("react-i18next");
-var _slate = require("@seafile/slate");
-var _slateReact = require("@seafile/slate-react");
-var _constants = require("../../../../constants");
-var _useScrollContext = require("../../../../hooks/use-scroll-context");
-var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
-var _utils = require("../../../utils");
-var _constant = require("../constant");
-var _calloutHoverMenu = _interopRequireDefault(require("./callout-hover-menu"));
-require("./index.css");
-/* eslint-disable react-hooks/rules-of-hooks */
-
-const renderCallout = (_ref, editor) => {
-  let {
-    attributes,
-    children,
-    element
-  } = _ref;
-  const readOnly = (0, _slateReact.useReadOnly)();
-  const scrollRef = (0, _useScrollContext.useScrollContext)();
-  const isSelected = (0, _slateReact.useSelected)();
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)('sdoc-editor');
-  const calloutRef = (0, _react.useRef)();
-  const [isShowColorSelector, setIsShowColorSelector] = (0, _react.useState)(false);
-  const [popoverPosition, setPopoverPosition] = (0, _react.useState)({
-    top: '',
-    left: ''
-  });
-  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 = _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 = (0, _react.useMemo)(() => {
-    const {
-      callout_icon = ''
-    } = element;
-    if (!callout_icon) return null;
-    return _constant.CALLOUT_ICON_MAP[callout_icon];
-  }, [element]);
-  const isShowPlaceholder = (0, _react.useCallback)(() => {
-    if (readOnly || 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 = _slate.Node.string(element);
-    return !elementContent.length;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [element, isSelected]);
-  const handleCloseColorSelector = (0, _react.useCallback)(() => {
-    setIsShowColorSelector(false);
-  }, []);
-  const handleScroll = (0, _react.useCallback)(e => {
-    if (readOnly) return;
-    if (!isShowColorSelector) return;
-    if (e.currentTarget.scrollTop) {
-      const menuPosition = (0, _utils.getMenuPosition)(calloutRef.current, editor);
-      setPopoverPosition(menuPosition);
-    }
-  }, [editor, isShowColorSelector, readOnly]);
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    const unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER, handleCloseColorSelector);
-    return unsubscribe;
-  }, [handleCloseColorSelector]);
-  (0, _react.useEffect)(() => {
-    if (readOnly) return;
-    let observerRefValue = null;
-    if (scrollRef.current) {
-      scrollRef.current.addEventListener('scroll', handleScroll);
-      observerRefValue = scrollRef.current;
-    }
-    return () => {
-      observerRefValue.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll, readOnly, scrollRef]);
-  (0, _react.useEffect)(() => {
-    if (!isSelected) {
-      setIsShowColorSelector(false);
-    }
-  }, [isSelected]);
-  const handleDisplayColorSelector = (0, _react.useCallback)(() => {
-    if (readOnly) return;
-    const menuPosition = (0, _utils.getMenuPosition)(calloutRef.current, editor);
-    setPopoverPosition(menuPosition);
-    setIsShowColorSelector(true);
-  }, [editor, readOnly]);
-  const handleClick = (0, _react.useCallback)(e => {
-    handleDisplayColorSelector();
-  }, [handleDisplayColorSelector]);
-  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
-    "data-id": element.id,
-    className: "sdoc-callout-white-wrapper"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    onClick: handleClick,
-    ref: calloutRef,
-    className: `${attributes.className} sdoc-callout-container`,
-    style: containerStyle
-  }, element.callout_icon && /*#__PURE__*/_react.default.createElement("div", {
-    className: "callout-icon"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'sdoc-emoji ' + element.callout_icon
-  }, calloutIcon)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "callout-content"
-  }, children, isShowPlaceholder() && /*#__PURE__*/_react.default.createElement("div", {
-    contentEditable: false,
-    className: "sdoc-callout-placeholder"
-  }, t('Please_enter'), "...")), isShowColorSelector && /*#__PURE__*/_react.default.createElement(_calloutHoverMenu.default, {
-    editor: editor,
-    element: element,
-    popoverPosition: popoverPosition
-  })));
-};
-var _default = exports.default = renderCallout;