@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/extension/plugins/callout/helper.js

@@ -0,0 +1,279 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapCallout = exports.unwrapCallout = exports.setCalloutIcon = exports.isMenuDisabled = exports.isMenuActive = exports.isCalloutContentEmpty = exports.insertElementAtNewLineInCallout = exports.getCalloutEntry = exports.generateCallout = exports.deleteCalloutIcon = exports.changeFillBackgroundColor = void 0;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _slate = require("@seafile/slate");
+var _elementType = require("../../constants/element-type");
+var _core = require("../../core");
+var _constant = require("./constant");
+var isMenuActive = exports.isMenuActive = function isMenuActive(editor) {
+  var selection = editor.selection;
+  if (!selection) return false;
+  var isInsideCallout = !!getCalloutEntry(editor);
+  if (isInsideCallout) return true;
+  return false;
+};
+var isMenuDisabled = exports.isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  if (readonly) return true;
+  var selection = editor.selection;
+  if (!selection) return true;
+  var selectedElements = (0, _core.getSelectedElems)(editor);
+  // If it's not the top list item, disable callout menu
+  var _ref = (0, _core.getTopLevelBlockNode)(editor) || [],
+    _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
+    node = _ref2[0];
+  if (node && [_elementType.ORDERED_LIST, _elementType.UNORDERED_LIST].includes(node === null || node === void 0 ? void 0 : node.type)) {
+    if (!(0, _core.isTopLevelListItem)(editor)) return true;
+  }
+  var isRangeAcrossBlock = (0, _core.isRangeAcrossBlocks)(editor);
+  // If selected multiple block element contains callout, disable callout menu
+  var isAllSelectedElementsInAllowTypes = selectedElements.length && selectedElements.every(function (element) {
+    if (element.type === _elementType.CALL_OUT && isRangeAcrossBlock) return false;
+    return _constant.CALLOUT_ALLOWED_INSIDE_TYPES.includes(element.type);
+  });
+  if (isAllSelectedElementsInAllowTypes) return false;
+  // If selection is in multi_column, able callout menu
+  var currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _elementType.MULTI_COLUMN);
+  if (currentMultiColumnEntry) return false;
+  return true;
+};
+
+/**
+ * @param {keyof CALLOUT_COLOR_MAP} [background_color] fill color
+ */
+var generateCallout = exports.generateCallout = function generateCallout() {
+  var background_color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Object.keys(_constant.CALLOUT_COLOR_MAP)[5];
+  var props = {
+    style: {
+      background_color: background_color
+    }
+  };
+  var callout = (0, _core.generateEmptyElement)(_elementType.CALL_OUT, props);
+  callout.children = [];
+  return callout;
+};
+var wrapCallout = exports.wrapCallout = function wrapCallout(editor) {
+  var selection = editor.selection;
+  if (!selection) return;
+  var callout = generateCallout();
+  // Handle inserting callout into inside multi_column
+  var currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _elementType.MULTI_COLUMN);
+  if (currentMultiColumnEntry) {
+    _slate.Transforms.wrapNodes(editor, callout, {
+      at: editor.selection.anchor.path.slice(0, 3)
+    });
+    (0, _core.focusEditor)(editor);
+    return;
+  }
+  var _getTopLevelBlockNode = (0, _core.getTopLevelBlockNode)(editor),
+    _getTopLevelBlockNode2 = (0, _slicedToArray2["default"])(_getTopLevelBlockNode, 2),
+    node = _getTopLevelBlockNode2[0],
+    path = _getTopLevelBlockNode2[1];
+  if (node && [_elementType.ORDERED_LIST, _elementType.UNORDERED_LIST].includes(node === null || node === void 0 ? void 0 : node.type)) {
+    if (_slate.Range.isCollapsed(selection)) {
+      _slate.Transforms.collapse(editor);
+    }
+    var _ref3 = _slate.Editor.start(editor, path) || {},
+      startPath = _ref3.path;
+    var _ref4 = _slate.Editor.end(editor, path) || {},
+      endOffset = _ref4.offset,
+      endPath = _ref4.path;
+    var _ref5 = _slate.Editor.parent(editor, selection) || [],
+      _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+      paragraphPath = _ref6[1];
+    var _ref7 = _slate.Editor.parent(editor, paragraphPath) || [],
+      _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
+      listItemNode = _ref8[0],
+      listItemPath = _ref8[1];
+    var focusPoint = null;
+    // Highlight only the top listItem
+    if ((listItemNode === null || listItemNode === void 0 ? void 0 : listItemNode.type) === _elementType.LIST_ITEM && listItemPath.length === 2) {
+      var listNode = (0, _core.generateEmptyElement)(node.type);
+      listNode.children = [listItemNode];
+      callout.children = [listNode];
+      var _ref9 = _slate.Editor.point(editor, listItemPath) || {},
+        curPath = _ref9.path;
+      if (_slate.Path.equals(startPath, curPath)) {
+        // start
+        _slate.Transforms.removeNodes(editor, {
+          at: listItemPath
+        });
+        _slate.Transforms.insertNodes(editor, callout, {
+          at: [path[0]]
+        });
+        focusPoint = _slate.Editor.end(editor, [path[0]]);
+      } else if (_slate.Path.equals(endPath, curPath)) {
+        // end
+        _slate.Transforms.removeNodes(editor, {
+          at: listItemPath
+        });
+        _slate.Transforms.insertNodes(editor, callout, {
+          at: _slate.Path.next(path)
+        });
+        focusPoint = _slate.Editor.end(editor, _slate.Path.next(path));
+      } else {
+        // center
+        // Get rest list node
+        var restItemNode = _slate.Editor.nodes(editor, {
+          at: {
+            anchor: {
+              offset: 0,
+              path: curPath
+            },
+            focus: {
+              offset: endOffset,
+              path: endPath
+            }
+          },
+          match: function match(node, path) {
+            // Matches the list type is LIST_ITEM
+            // Matches the list after the current path
+            // Matches top-level list-item
+            return (node === null || node === void 0 ? void 0 : node.type) === _elementType.LIST_ITEM && _slate.Path.compare(path, curPath) === 1 && path.length === 2;
+          }
+        });
+        var restListNode = (0, _core.generateEmptyElement)(node.type);
+        restListNode.children = [];
+        var _iterator = (0, _createForOfIteratorHelper2["default"])(restItemNode),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _step$value = (0, _slicedToArray2["default"])(_step.value, 1),
+              n = _step$value[0];
+            restListNode.children.push(n);
+          }
+
+          // Delete rest list node
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        _slate.Transforms.removeNodes(editor, {
+          at: {
+            anchor: {
+              offset: 0,
+              path: curPath
+            },
+            focus: {
+              offset: endOffset,
+              path: endPath
+            }
+          },
+          match: function match(node, path) {
+            return (node === null || node === void 0 ? void 0 : node.type) === _elementType.LIST_ITEM && _slate.Path.compare(path, curPath) === 1 && path.length === 2;
+          }
+        });
+        var insertCalloutPath = _slate.Path.next(path);
+        var insertListPath = _slate.Path.next(insertCalloutPath);
+        // Delete current list node
+        _slate.Transforms.removeNodes(editor, {
+          at: listItemPath
+        });
+        // Insert callout node and list node
+        _slate.Transforms.insertNodes(editor, callout, {
+          at: insertCalloutPath
+        });
+        _slate.Transforms.insertNodes(editor, restListNode, {
+          at: insertListPath
+        });
+        focusPoint = _slate.Editor.end(editor, insertCalloutPath);
+      }
+    }
+    (0, _core.focusEditor)(editor, focusPoint);
+    return;
+  }
+  _slate.Transforms.wrapNodes(editor, callout, {
+    mode: 'highest'
+  });
+  (0, _core.focusEditor)(editor);
+};
+var unwrapCallout = exports.unwrapCallout = function unwrapCallout(editor) {
+  var selection = editor.selection;
+  if (!selection) return;
+  var aboveNodeEntry = _slate.Editor.above(editor, {
+    match: function match(n) {
+      return n.type === _elementType.CALL_OUT;
+    }
+  });
+  if (!aboveNodeEntry) return;
+  var _aboveNodeEntry = (0, _slicedToArray2["default"])(aboveNodeEntry, 2),
+    calloutPath = _aboveNodeEntry[1];
+  _slate.Transforms.unwrapNodes(editor, {
+    at: calloutPath,
+    match: function match(n) {
+      return n.type === _elementType.CALL_OUT;
+    }
+  });
+  var point = _slate.Editor.point(editor, editor.selection);
+  (0, _core.focusEditor)(editor, point);
+};
+var changeFillBackgroundColor = exports.changeFillBackgroundColor = function changeFillBackgroundColor(editor, background_color) {
+  _slate.Transforms.setNodes(editor, {
+    style: {
+      background_color: background_color
+    }
+  }, {
+    match: function match(n) {
+      return n.type === _elementType.CALL_OUT;
+    }
+  });
+  _slate.Transforms.select(editor, _slate.Editor.start(editor, editor.selection));
+};
+var setCalloutIcon = exports.setCalloutIcon = function setCalloutIcon(editor, icon_name) {
+  _slate.Transforms.setNodes(editor, {
+    callout_icon: icon_name
+  }, {
+    match: function match(n) {
+      return n.type === _elementType.CALL_OUT;
+    }
+  });
+  _slate.Transforms.select(editor, _slate.Editor.start(editor, editor.selection));
+};
+var deleteCalloutIcon = exports.deleteCalloutIcon = function deleteCalloutIcon(editor) {
+  _slate.Transforms.setNodes(editor, {
+    callout_icon: ''
+  }, {
+    match: function match(n) {
+      return n.type === _elementType.CALL_OUT;
+    }
+  });
+  _slate.Transforms.select(editor, _slate.Editor.start(editor, editor.selection));
+};
+
+// Check is cursor in callout
+var getCalloutEntry = exports.getCalloutEntry = function getCalloutEntry(editor) {
+  var at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : editor.selection;
+  var aboveNodeEntry = _slate.Editor.above(editor, {
+    match: function match(n) {
+      return n.type === _elementType.CALL_OUT;
+    },
+    mode: 'highest',
+    at: at
+  });
+  return aboveNodeEntry;
+};
+var isCalloutContentEmpty = exports.isCalloutContentEmpty = function isCalloutContentEmpty(calloutEntry) {
+  var _calloutEntry = (0, _slicedToArray2["default"])(calloutEntry, 1),
+    calloutNode = _calloutEntry[0];
+  var contentString = _slate.Node.string(calloutNode);
+  var calloutChildren = calloutNode.children;
+  var isSingleParagraph = calloutChildren.length === 1 && calloutChildren[0].type === _elementType.PARAGRAPH;
+  var isEmptyContent = contentString.length === 0;
+  return isSingleParagraph && isEmptyContent;
+};
+
+// Insert a new element at new line in callout after current path
+var insertElementAtNewLineInCallout = exports.insertElementAtNewLineInCallout = function insertElementAtNewLineInCallout(editor, type, currentPath) {
+  var element = (0, _core.generateEmptyElement)(type);
+  var insertPath = _slate.Path.next(currentPath);
+  _slate.Transforms.insertNodes(editor, element, {
+    at: insertPath
+  });
+  _slate.Transforms.select(editor, insertPath);
+};

package/dist/extension/plugins/callout/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _constants = require("../../constants");
+var _menu = _interopRequireDefault(require("./menu"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireDefault(require("./render-elem"));
+var CalloutPlugin = {
+  type: _constants.CALL_OUT,
+  nodeType: 'element',
+  editorMenus: [_menu["default"]],
+  editorPlugin: _plugin["default"],
+  renderElements: [_renderElem["default"]]
+};
+var _default = exports["default"] = CalloutPlugin;

package/dist/extension/plugins/callout/menu/index.js

@@ -0,0 +1,49 @@
+"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");
+var menuConfig = _constants2.MENUS_CONFIG_MAP[_elementType.CALL_OUT];
+var CalloutMenu = function CalloutMenu(_ref) {
+  var editor = _ref.editor,
+    isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    readonly = _ref.readonly;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var handleDisplayAlert = (0, _react.useCallback)(function (type) {
+    setTimeout(function () {
+      _toast["default"].warning("".concat(t('The_current_location_does_not_support_pasting')).concat(t(type && type.at(0).toUpperCase() + type.slice(1))));
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    var unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, handleDisplayAlert);
+    return unsubscribe;
+  }, [handleDisplayAlert]);
+  var handleClick = (0, _react.useCallback)(function (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/extension/plugins/callout/plugin.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+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 _helpers = require("../../toolbar/side-toolbar/helpers");
+var _constant = require("./constant");
+var _helper = require("./helper");
+/**
+ * @param {Editor} editor
+ * @returns
+ */
+var withCallout = function withCallout(editor) {
+  var insertFragment = editor.insertFragment,
+    deleteBackward = editor.deleteBackward,
+    onHotKeyDown = editor.onHotKeyDown,
+    insertData = editor.insertData;
+  var newEditor = editor;
+  newEditor.deleteBackward = function (unit) {
+    var calloutEntry = (0, _helper.getCalloutEntry)(editor);
+    if (calloutEntry) {
+      var 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 = function (data) {
+    if ((0, _helper.getCalloutEntry)(newEditor)) {
+      if (data.types.includes('text/code-block')) {
+        var eventBus = _eventBus["default"].getInstance();
+        eventBus.dispatch(_constants.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, _constants2.CODE_BLOCK);
+        return;
+      }
+    }
+    return insertData(data);
+  };
+  newEditor.insertFragment = function (data) {
+    if ((0, _helper.getCalloutEntry)(editor)) {
+      var _data$find;
+      // No paste any unsupportedType content into callout
+      var unsupportedType = (_data$find = data.find(function (node) {
+        return !_constant.CALLOUT_ALLOWED_INSIDE_TYPES.includes(node.type);
+      })) === null || _data$find === void 0 ? void 0 : _data$find.type;
+      if (unsupportedType) {
+        var eventBus = _eventBus["default"].getInstance();
+        eventBus.dispatch(_constants.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, unsupportedType);
+        return;
+      }
+
+      // Unwrap the callout nodes if nested within another callout
+      var hasCalloutNode = data.some(function (node) {
+        return node.type === _constants2.CALL_OUT;
+      });
+      if (hasCalloutNode) {
+        var newData = data.flatMap(function (node) {
+          return node.type === _constants2.CALL_OUT ? node.children : [node];
+        });
+        insertFragment(newData);
+      } else {
+        insertFragment(data);
+      }
+      return;
+    }
+    return insertFragment(data);
+  };
+  newEditor.onHotKeyDown = function (event) {
+    var calloutEntry = (0, _helper.getCalloutEntry)(editor);
+    if (calloutEntry) {
+      var _calloutEntry = (0, _slicedToArray2["default"])(calloutEntry, 2),
+        calloutPath = _calloutEntry[1];
+      // Close color picker
+      var eventBus = _eventBus["default"].getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER);
+      if ((0, _isHotkey["default"])('mod+enter', event)) {
+        (0, _helpers.insertElement)(newEditor, _constants2.PARAGRAPH, _constants2.INSERT_POSITION.AFTER);
+        return true;
+      }
+      if ((0, _isHotkey["default"])('mod+a', event)) {
+        event.preventDefault();
+        try {
+          var startPoint = _slate.Editor.start(newEditor, calloutPath);
+          var endPoint = _slate.Editor.end(newEditor, calloutPath);
+          var selectRange = _slate.Editor.range(newEditor, startPoint, endPoint);
+          _slate.Transforms.select(newEditor, selectRange);
+          return true;
+        } catch (error) {
+          return true;
+        }
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  newEditor.onCopy = function (event) {
+    if ((0, _helper.getCalloutEntry)(editor)) {
+      event.stopPropagation();
+    }
+  };
+  return newEditor;
+};
+var _default = exports["default"] = withCallout;

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

@@ -0,0 +1,58 @@
+"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");
+var ColorSelector = function ColorSelector(_ref) {
+  var editor = _ref.editor,
+    element = _ref.element,
+    onCloseSelector = _ref.onCloseSelector;
+  var onColorClick = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    var target = event.target;
+    while (!target.dataset || !target.dataset.backgroundColor) {
+      target = target.parentNode;
+    }
+    var backgroundColor = target.dataset.backgroundColor;
+    var currentPath = (0, _core.findPath)(editor, element);
+    _slate.Transforms.select(editor, currentPath);
+    (0, _helper.changeFillBackgroundColor)(editor, backgroundColor);
+    onCloseSelector();
+  }, [editor, element, onCloseSelector]);
+  var isShowCheckedIcon = (0, _react.useCallback)(function (currentBackgroundColor) {
+    var _ref2 = element.style || {},
+      background_color = _ref2.background_color;
+    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(function (_ref3, index) {
+    var border_color = _ref3.border_color,
+      background_color = _ref3.background_color;
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: "sdoc-callout-color-selector-".concat(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/extension/plugins/callout/render-elem/callout-hover-menu/index.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CalloutHoverMenu;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+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) {
+  var editor = _ref.editor,
+    element = _ref.element,
+    popoverPosition = _ref.popoverPosition;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowColorSelector = _useState2[0],
+    setIsShowColorSelector = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isShowIcon = _useState4[0],
+    setIsShowIcon = _useState4[1];
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var onColorSelectorToggle = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    if (!isShowColorSelector) {
+      setIsShowIcon(false);
+    }
+    setIsShowColorSelector(!isShowColorSelector);
+  }, [isShowColorSelector, setIsShowColorSelector]);
+  var onIconToggle = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    if (!isShowIcon) {
+      setIsShowColorSelector(false);
+    }
+    setIsShowIcon(!isShowIcon);
+  }, [isShowIcon, setIsShowIcon]);
+  var onCloseSelector = (0, _react.useCallback)(function () {
+    setIsShowColorSelector(false);
+    setIsShowIcon(false);
+  }, []);
+  var firstItemClass = (0, _classnames["default"])({
+    'callout-menu-item': true,
+    'color-active': isShowColorSelector
+  });
+  var secondItemClass = (0, _classnames["default"])({
+    'callout-menu-item': true,
+    'icon-active': isShowIcon
+  });
+  var handleRemoveIcon = function 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/extension/plugins/callout/render-elem/callout-icon/index.js

@@ -0,0 +1,41 @@
+"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");
+var IconSelector = function IconSelector(_ref) {
+  var editor = _ref.editor,
+    element = _ref.element,
+    onCloseSelector = _ref.onCloseSelector;
+  var onImageClick = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    var image = event.target.dataset.image;
+    if (!image) return;
+    var 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(function (key) {
+    var 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;