@seafile/sdoc-editor 0.3.12 → 0.3.14

package/dist/basic-sdk/constants/index.js

@@ -12,7 +12,8 @@ export const INTERNAL_EVENT = {
   ARTICLE_CLICK: 'hidden_comment',
   UPDATE_TAG_VIEW: 'update_tag_view',
   COMMENT_LIST_CLICK: 'comment_list_click',
-  UNSEEN_NOTIFICATIONS_COUNT: 'unseen_notifications_count'
+  UNSEEN_NOTIFICATIONS_COUNT: 'unseen_notifications_count',
+  DISPLAY_CALLOUT_COLOR_PICKER: 'display_callout_color_picker'
 };
 export const REVISION_DIFF_KEY = 'diff';
 export const REVISION_DIFF_VALUE = '1';

package/dist/basic-sdk/extension/constants/element-type.js

@@ -22,6 +22,7 @@ export const LINK = 'link';
 export const SDOC_LINK = 'sdoc_link';
 export const FILE_LINK = 'file_link';
 export const IMAGE = 'image';
+export const CALL_OUT = 'callout';
 
 // font
 export const FONT_SIZE = 'font-size';

package/dist/basic-sdk/extension/constants/index.js

@@ -1,6 +1,6 @@
 // extension plugin
 import * as ELEMENT_TYPE from './element-type';
-import { BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES } from './element-type';
+import { BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT } from './element-type';
 export { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BACKGROUND_COLOR } from './color';
 export { FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE } from './font';
 export { DIFF_TYPE, ADDED_STYLE, DELETED_STYLE } from './diff-view';
@@ -36,5 +36,23 @@ export const FILE_TYPE = {
   [FILE_LINK]: 'file',
   [SDOC_LINK]: 'sdoc'
 };
-export const SUPPORTED_SIDE_OPERATION_TYPE = [PARAGRAPH, SUBTITLE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, CHECK_LIST_ITEM, CODE_BLOCK, TABLE, BLOCKQUOTE];
-export { ELEMENT_TYPE, BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES };
+export const SUPPORTED_SIDE_OPERATION_TYPE = [PARAGRAPH, SUBTITLE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, CHECK_LIST_ITEM, CODE_BLOCK, TABLE, BLOCKQUOTE, CALL_OUT];
+export const MOUSE_ENTER_EVENT_DISABLED_MAP = {
+  [PARAGRAPH]: [CALL_OUT],
+  [TITLE]: [CALL_OUT],
+  [SUBTITLE]: [CALL_OUT],
+  [CHECK_LIST_ITEM]: [CALL_OUT],
+  [ORDERED_LIST]: [CALL_OUT],
+  [UNORDERED_LIST]: [CALL_OUT],
+  [UNORDERED_LIST]: [CALL_OUT],
+  [LIST_ITEM]: [CALL_OUT],
+  [BLOCKQUOTE]: [CALL_OUT],
+  [HEADER1]: [CALL_OUT],
+  [HEADER2]: [CALL_OUT],
+  [HEADER3]: [CALL_OUT],
+  [HEADER4]: [CALL_OUT],
+  [HEADER5]: [CALL_OUT],
+  [HEADER6]: [CALL_OUT],
+  [CALL_OUT]: [CALL_OUT]
+};
+export { ELEMENT_TYPE, BLOCKQUOTE, TITLE, SUBTITLE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, CHECK_LIST_ITEM, CODE_BLOCK, CODE_LINE, TABLE, TABLE_CELL, TABLE_ROW, LINK, SDOC_LINK, FILE_LINK, IMAGE, TOP_LEVEL_TYPES, INLINE_LEVEL_TYPES, CALL_OUT };

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -1,5 +1,5 @@
 import { RECENT_USED_HIGHLIGHT_COLORS_KEY, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, RECENT_USED_FONT_COLORS_KEY, DEFAULT_FONT_COLOR, DEFAULT_LAST_USED_FONT_COLOR } from './color';
-import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM, CODE_BLOCK, LINK, IMAGE, TABLE, SDOC_LINK, FILE_LINK, PARAGRAPH } from './element-type';
+import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM, CODE_BLOCK, LINK, IMAGE, TABLE, SDOC_LINK, FILE_LINK, PARAGRAPH, CALL_OUT } from './element-type';
 export const UNDO = 'undo';
 export const REDO = 'redo';
 export const CLEAR_FORMAT = 'clear_format';
@@ -184,6 +184,11 @@ export const MENUS_CONFIG_MAP = {
     id: "sdoc_".concat(FILE_LINK),
     iconClass: 'sdocfont sdoc-link-file',
     text: 'Link_file'
+  },
+  [CALL_OUT]: {
+    id: "sdoc_".concat(CALL_OUT),
+    iconClass: 'sdocfont sdoc-callout',
+    text: 'Callout'
   }
 };
 
@@ -243,6 +248,11 @@ export const SIDE_TRANSFORM_MENUS_CONFIG = [{
   iconClass: 'sdocfont sdoc-quote1',
   type: BLOCKQUOTE,
   text: 'Quote'
+}, {
+  id: CALL_OUT,
+  iconClass: 'sdocfont sdoc-callout',
+  type: CALL_OUT,
+  text: 'Callout'
 }];
 
 // Side insert menu config
@@ -271,6 +281,11 @@ export const SIDE_INSERT_MENUS_CONFIG = {
     type: CODE_BLOCK,
     text: 'Code_block'
   },
+  [CALL_OUT]: {
+    id: '',
+    iconClass: 'sdocfont sdoc-callout',
+    text: 'Callout'
+  },
   [ORDERED_LIST]: {
     id: '',
     iconClass: 'sdocfont sdoc-list-ol',

package/dist/basic-sdk/extension/core/utils/index.js

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import slugid from 'slugid';
 import { useTranslation } from 'react-i18next';
@@ -21,12 +22,14 @@ export const generateDefaultText = () => {
     text: ''
   };
 };
-export const generateEmptyElement = type => {
-  return {
+export const generateEmptyElement = function (type) {
+  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return _objectSpread(_objectSpread({
     id: slugid.nice(),
-    type,
+    type
+  }, props), {}, {
     children: [generateDefaultText()]
-  };
+  });
 };
 export function Placeholder(props) {
   const {

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

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Editor, Transforms, Element } from '@seafile/slate';
 import slugid from 'slugid';
-import { BLOCKQUOTE, CHECK_LIST_ITEM, IMAGE, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, TABLE } from '../../constants';
+import { BLOCKQUOTE, CHECK_LIST_ITEM, IMAGE, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, TABLE, CALL_OUT } from '../../constants';
 import { focusEditor, getNodeType } from '../../core';
 export const isMenuDisabled = (editor, readonly) => {
   if (readonly) return true;
@@ -40,6 +40,8 @@ export const getBlockQuoteType = editor => {
   const [n] = match;
   return getNodeType(n);
 };
+
+// If cursor is in  callout, insert block quote in callout, otherwise wrap block quote directly
 export const setBlockQuoteType = (editor, active) => {
   if (!active) {
     const blockquoteNode = {
@@ -48,12 +50,18 @@ export const setBlockQuoteType = (editor, active) => {
     };
     Transforms.wrapNodes(editor, blockquoteNode, {
       mode: 'highest',
-      match: n => Element.isElement(n) && Editor.isBlock(editor, n)
+      match: n => {
+        if (n.type === CALL_OUT) return false;
+        return Element.isElement(n) && Editor.isBlock(editor, n);
+      }
     });
   } else {
     Transforms.unwrapNodes(editor, {
       mode: 'highest',
-      match: n => Element.isElement(n) && Editor.isBlock(editor, n)
+      match: n => {
+        if (n.type === CALL_OUT) return false;
+        return Element.isElement(n) && Editor.isBlock(editor, n);
+      }
     });
   }
   focusEditor(editor);

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

@@ -4,6 +4,7 @@ import { ReactEditor } from '@seafile/slate-react';
 import { generateEmptyElement, getSelectedNodeByType, isSelectionAtBlockStart } from '../../core';
 import { BLOCKQUOTE, PARAGRAPH, CODE_BLOCK, TABLE } from '../../constants';
 import { setBlockQuoteType, getFormattedElements, getFormattedRestElements } from './helpers';
+import { getCalloutEntry, insertElementAtNewLineInCallout } from '../callout/helper';
 const withBlockquote = editor => {
   const {
     insertBreak,
@@ -30,6 +31,14 @@ const withBlockquote = editor => {
       const str = Node.string(quoteElem);
       // The last of the blockquote text is \n;
       if (str && str.slice(-1) === '\n') {
+        const calloutEntry = getCalloutEntry(editor);
+        if (calloutEntry) {
+          // If the cursor is at the end of the callout, insert a paragraph inside the callout
+          // Remove the last \n
+          editor.deleteBackward('character');
+          insertElementAtNewLineInCallout(editor, PARAGRAPH, quotePath);
+          return;
+        }
         // Step 1: Remove the last \n
         editor.deleteBackward('character');
         // Step 2: Insert a paragraph

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

@@ -0,0 +1,47 @@
+import { BLOCKQUOTE, CALL_OUT, CHECK_LIST_ITEM, IMAGE, LINK, ORDERED_LIST, PARAGRAPH, SDOC_LINK, SUBTITLE, TITLE, UNORDERED_LIST } from '../../constants/element-type';
+import { HEADERS, LIST_ITEM_CORRELATION_TYPE } from '../../constants';
+
+// key as container fill color
+export const CALLOUT_COLOR_MAP = {
+  '#f1f3f6': {
+    border_color: '#d9dbe0',
+    background_color: '#f1f3f6'
+  },
+  '#e1e9fe': {
+    border_color: '#cbdeff',
+    background_color: '#e1e9fe'
+  },
+  '#def0ff': {
+    border_color: '#c7ecff',
+    background_color: '#def0ff'
+  },
+  '#e7f9ee': {
+    border_color: '#a5dfbf',
+    background_color: '#e7f9ee'
+  },
+  '#eaf7d6': {
+    border_color: '#c3e788',
+    background_color: '#eaf7d6'
+  },
+  '#fef7e0': {
+    border_color: '#faecb3',
+    background_color: '#fef7e0'
+  },
+  '#fff1e8': {
+    border_color: '#ffe1cd',
+    background_color: '#fff1e8'
+  },
+  '#ffe6e3': {
+    border_color: '#ffc6c4',
+    background_color: '#ffe6e3'
+  },
+  '#ffe9f2': {
+    border_color: '#ffd0e6',
+    background_color: '#ffe9f2'
+  },
+  '#fde8ff': {
+    border_color: '#f0c1ff',
+    background_color: '#fde8ff'
+  }
+};
+export const CALLOUT_ALLOWED_INSIDE_TYPES = [CALL_OUT, ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, TITLE, SUBTITLE, BLOCKQUOTE, ...HEADERS, ...LIST_ITEM_CORRELATION_TYPE, CHECK_LIST_ITEM, IMAGE, LINK, SDOC_LINK];

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

@@ -0,0 +1,117 @@
+import { Editor, Node, Path, Transforms } from '@seafile/slate';
+import { CALL_OUT } from '../../constants/element-type';
+import { findPath, focusEditor, generateEmptyElement, getSelectedElems, isRangeAcrossBlocks } from '../../core';
+import { CALLOUT_ALLOWED_INSIDE_TYPES, CALLOUT_COLOR_MAP } from './constant';
+export const isMenuActive = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const isInsideCallout = !!getCalloutEntry(editor);
+  if (isInsideCallout) return true;
+  return false;
+};
+export const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  const {
+    selection
+  } = editor;
+  if (!selection) return true;
+  const selectedElements = getSelectedElems(editor);
+  const isRangeAcrossBlock = isRangeAcrossBlocks(editor);
+  // If selected multiple block element contains callout, disable callout menu
+  const isAllSelectedElementsInAllowTypes = selectedElements.length && selectedElements.every(element => {
+    if (element.type === CALL_OUT && isRangeAcrossBlock) return false;
+    return CALLOUT_ALLOWED_INSIDE_TYPES.includes(element.type);
+  });
+  if (isAllSelectedElementsInAllowTypes) return false;
+  return true;
+};
+
+/**
+ * @param {keyof CALLOUT_COLOR_MAP} [background_color] fill color
+ */
+export const generateCallout = function () {
+  let background_color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Object.keys(CALLOUT_COLOR_MAP)[0];
+  const props = {
+    style: {
+      background_color
+    }
+  };
+  const callout = generateEmptyElement(CALL_OUT, props);
+  callout.children = [];
+  return callout;
+};
+export const wrapCallout = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  const callout = generateCallout();
+  Transforms.wrapNodes(editor, callout, {
+    mode: 'highest'
+  });
+  focusEditor(editor);
+};
+export const unwrapCallout = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  const aboveNodeEntry = Editor.above(editor, {
+    match: n => n.type === CALL_OUT
+  });
+  if (!aboveNodeEntry) return;
+  const [, calloutPath] = aboveNodeEntry;
+  Transforms.unwrapNodes(editor, {
+    at: calloutPath,
+    match: n => n.type === CALL_OUT
+  });
+  const point = Editor.point(editor, editor.selection);
+  focusEditor(editor, point);
+};
+export const changeFillBackgroundColor = (editor, background_color) => {
+  Transforms.setNodes(editor, {
+    style: {
+      background_color
+    }
+  }, {
+    match: n => n.type === CALL_OUT
+  });
+  Transforms.select(editor, Editor.start(editor, editor.selection));
+};
+
+// Check is cursor in callout
+export const getCalloutEntry = function (editor) {
+  let at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : editor.selection;
+  const aboveNodeEntry = Editor.above(editor, {
+    match: n => n.type === CALL_OUT,
+    mode: 'highest',
+    at
+  });
+  return aboveNodeEntry;
+};
+
+// Use in render-elem, to judge whether to display placeholder
+export const isFocusOnElement = (editor, element) => {
+  var _editor$selection, _editor$selection$anc;
+  if (!editor.selection || !element) return false;
+  const elementPath = findPath(editor, element);
+  const isSelectOnElement = Path.isAncestor(elementPath, editor === null || editor === void 0 ? void 0 : (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : (_editor$selection$anc = _editor$selection.anchor) === null || _editor$selection$anc === void 0 ? void 0 : _editor$selection$anc.path);
+  return isSelectOnElement;
+};
+export const isCalloutContentEmpty = calloutEntry => {
+  const [calloutNode] = calloutEntry;
+  const contentString = Node.string(calloutNode);
+  return calloutNode.children.length === 1 && contentString.length === 0;
+};
+
+// Insert a new element at new line in callout after current path
+export const insertElementAtNewLineInCallout = (editor, type, currentPath) => {
+  const element = generateEmptyElement(type);
+  const insertPath = Path.next(currentPath);
+  Transforms.insertNodes(editor, element, {
+    at: insertPath
+  });
+  Transforms.select(editor, insertPath);
+};

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

@@ -0,0 +1,12 @@
+import { CALL_OUT } from '../../constants';
+import CalloutMenu from './menu';
+import withCallout from './plugin';
+import renderCallout from './render-elem';
+const CalloutPlugin = {
+  type: CALL_OUT,
+  nodeType: 'element',
+  editorMenus: [CalloutMenu],
+  editorPlugin: withCallout,
+  renderElements: [renderCallout]
+};
+export default CalloutPlugin;

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

@@ -0,0 +1,16 @@
+.sdoc-callout-paste-unsupportable-type-alert {
+  display: none;
+  position: absolute;
+  top: 140px;
+  z-index: 1001;
+  left: 50%;
+  margin: auto;
+  transform: translateX(-50%);
+  transition: all 0.3s;
+  pointer-events: none;
+}
+
+.sdoc-callout-paste-unsupportable-type-alert.display {
+  display: block;
+  transition: all 0.3s;
+}

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

@@ -0,0 +1,40 @@
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MenuItem } from '../../../commons';
+import { MENUS_CONFIG_MAP } from '../../../constants';
+import { CALL_OUT } from '../../../constants/element-type';
+import { isMenuActive, isMenuDisabled, unwrapCallout, wrapCallout } from '../helper';
+import { INTERNAL_EVENT } from '../../../../constants';
+import toaster from '../../../../../components/toast';
+import EventBus from '../../../../utils/event-bus';
+const menuConfig = MENUS_CONFIG_MAP[CALL_OUT];
+const CalloutMenu = _ref => {
+  let {
+    editor,
+    isRichEditor,
+    className,
+    readonly
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const handleDisplayAlert = useCallback(type => {
+    toaster.warning("".concat(t('The_current_location_does_not_support_pasting')).concat(t(type && type.at(0).toUpperCase() + type.slice(1))));
+  }, [t]);
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, handleDisplayAlert);
+    return unsubscribe;
+  }, [handleDisplayAlert, t]);
+  const handleClick = useCallback(e => {
+    isMenuActive(editor) ? unwrapCallout(editor) : wrapCallout(editor);
+  }, [editor]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuItem, Object.assign({
+    isRichEditor: isRichEditor,
+    className: className,
+    disabled: isMenuDisabled(editor, readonly),
+    isActive: isMenuActive(editor),
+    onMouseDown: handleClick
+  }, menuConfig)));
+};
+export default CalloutMenu;

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

@@ -1,5 +1,5 @@
 import isHotkey from 'is-hotkey';
-import { PARAGRAPH, INSERT_POSITION } from '../../constants';
+import { PARAGRAPH, INSERT_POSITION, CODE_BLOCK } from '../../constants';
 import { isSelectionAtBlockStart } from '../../core';
 import { getCalloutEntry, isCalloutContentEmpty, unwrapCallout } from './helper';
 import { insertElement } from '../../toolbar/side-toolbar/helpers';
@@ -15,23 +15,39 @@ const withCallout = editor => {
   const {
     insertFragment,
     deleteBackward,
-    onHotKeyDown
+    onHotKeyDown,
+    insertData
   } = editor;
   const newEditor = editor;
   newEditor.deleteBackward = unit => {
     const calloutEntry = getCalloutEntry(editor);
     if (calloutEntry) {
-      if (isSelectionAtBlockStart(editor) && isCalloutContentEmpty(editor, calloutEntry)) return;
+      if (isSelectionAtBlockStart(editor) && isCalloutContentEmpty(calloutEntry)) {
+        unwrapCallout(editor);
+        return;
+      }
     }
     return deleteBackward(unit);
   };
+  newEditor.insertData = data => {
+    if (getCalloutEntry(newEditor)) {
+      if (data.types.includes('text/code-block')) {
+        const eventBus = EventBus.getInstance();
+        eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, CODE_BLOCK);
+        return;
+      }
+    }
+    return insertData(data);
+  };
   newEditor.insertFragment = data => {
-    var _data$find;
-    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;
-    if (unsupportType) {
-      eventBus.dispatch(INTERNAL_EVENT.DISPALY_CALLOUT_UNSUPPORT_ALERT, unsupportType);
-      return;
+    if (getCalloutEntry(editor)) {
+      var _data$find;
+      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;
+      if (unsupportType) {
+        eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, unsupportType);
+        return;
+      }
     }
     return insertFragment(data);
   };
@@ -40,16 +56,6 @@ const withCallout = editor => {
       insertElement(newEditor, PARAGRAPH, INSERT_POSITION.AFTER);
       return true;
     }
-    if (isHotkey('enter', event)) {
-      const calloutEntry = getCalloutEntry(editor);
-      if (calloutEntry) {
-        if (isCalloutContentEmpty(editor, calloutEntry)) {
-          unwrapCallout(editor);
-          event.preventDefault();
-          return true;
-        }
-      }
-    }
     return onHotKeyDown && onHotKeyDown(event);
   };
   return newEditor;

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

@@ -0,0 +1,53 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { Transforms } from '@seafile/slate';
+import { CALLOUT_COLOR_MAP } from '../constant';
+import { findPath } from '../../../core';
+import { changeFillBackgroundColor } from '../helper';
+import './index.css';
+const ColorSelector = (_ref, ref) => {
+  let {
+    editor,
+    element
+  } = _ref;
+  const selectorRef = useRef(null);
+  const handleClickColor = useCallback((editor, element, background_color) => {
+    const currentPath = findPath(editor, element);
+    Transforms.select(editor, currentPath);
+    changeFillBackgroundColor(editor, background_color);
+  }, []);
+  useImperativeHandle(ref, () => ({
+    colorSelectorContainer: selectorRef.current
+  }));
+  const isShowCheckedIcon = useCallback((element, currentBackgroundColor) => {
+    const {
+      background_color
+    } = element.style;
+    return background_color && background_color === currentBackgroundColor;
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: selectorRef,
+    className: "sdoc-selector-gap-filler",
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-callout-color-selector-container"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "sdoc-color-selector-list"
+  }, Object.values(CALLOUT_COLOR_MAP).map((_ref2, index) => {
+    let {
+      border_color,
+      background_color
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("li", {
+      key: "sdoc-callout-color-selector-".concat(index),
+      className: "sdoc-callout-color-item",
+      onClick: () => handleClickColor(editor, element, Object.keys(CALLOUT_COLOR_MAP)[index]),
+      style: {
+        borderColor: border_color,
+        backgroundColor: background_color
+      }
+    }, isShowCheckedIcon(element, background_color) && /*#__PURE__*/React.createElement("i", {
+      className: "sdoc-callout-color-checked-icon sdocfont sdoc-check-mark"
+    }));
+  }))));
+};
+export default forwardRef(ColorSelector);

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

@@ -0,0 +1,67 @@
+.sdoc-callout-white-wrapper {
+  padding: 5px 0;
+}
+
+.sdoc-callout-container {
+  position: relative;
+  padding: 10px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+}
+
+.sdoc-callout-container .sdoc-callout-placeholder {
+  position: absolute;
+  top: 15px;
+  left: 10px;
+  color: #b8b6b6;
+  pointer-events: none;
+}
+
+.sdoc-selector-gap-filler {
+  position: absolute;
+  left: 0;
+  top: -40px;
+  width: 300px;
+  height: 100%;
+  z-index: 100;
+}
+
+.sdoc-selector-gap-filler .sdoc-callout-color-selector-container {
+  position: absolute;
+  padding: 10px;
+  top: -5px;
+  left: 5px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 3px;
+}
+
+.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: 16px;
+  height: 16px;
+  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: -2px;
+  font-size: 12px;
+  left: 1px;
+}

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

@@ -0,0 +1,82 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import ColorSelector from './color-selector';
+import { CALLOUT_COLOR_MAP } from '../constant';
+import { isFocusOnElement } from '../helper';
+import { Editor } from '@seafile/slate';
+import { findPath } from '../../../core';
+import { INTERNAL_EVENT } from '../../../../constants';
+import EventBus from '../../../../utils/event-bus';
+import './index.css';
+const renderCallout = (_ref, editor) => {
+  let {
+    attributes,
+    children,
+    element
+  } = _ref;
+  const [isShowColorSelector, setIsShowColorSelector] = useState(false);
+  const [isSelecting, setIsSelecting] = useState(false);
+  const calloutRef = useRef(null);
+  const colorSelectorRef = useRef({
+    colorSelectorContainer: null
+  });
+  const {
+    t
+  } = useTranslation();
+  const {
+    background_color
+  } = element.style;
+  const isFocusOnCallout = isFocusOnElement(editor, element);
+  const handleMouseEnter = useCallback(id => {
+    const isMoveInCurrentCallout = id === element.id;
+    isMoveInCurrentCallout && !isSelecting && setIsShowColorSelector(true);
+  }, [element.id, isSelecting]);
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.DISPLAY_CALLOUT_COLOR_PICKER, handleMouseEnter);
+    return unsubscribe;
+  }, [handleMouseEnter]);
+  const handleMouseLeave = useCallback(e => {
+    setIsShowColorSelector(false);
+    setIsSelecting(false);
+  }, []);
+  const handleClick = useCallback(e => {
+    var _colorSelectorRef$cur, _colorSelectorRef$cur2;
+    setIsSelecting(true);
+    const isClickInColorSelector = (_colorSelectorRef$cur = colorSelectorRef.current) === null || _colorSelectorRef$cur === void 0 ? void 0 : (_colorSelectorRef$cur2 = _colorSelectorRef$cur.colorSelectorContainer) === null || _colorSelectorRef$cur2 === void 0 ? void 0 : _colorSelectorRef$cur2.contains(e.target);
+    !isClickInColorSelector && setIsShowColorSelector(false);
+  }, []);
+  const isShowPlaceholder = useCallback(() => {
+    if (isFocusOnCallout) 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 elementPath = findPath(editor, element);
+    const elementContent = Editor.string(editor, elementPath);
+    return !elementContent.length;
+  }, [editor, element, isFocusOnCallout]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-callout-white-wrapper"
+  }, /*#__PURE__*/React.createElement("div", Object.assign({
+    "data-id": element.id,
+    "data-root": "true",
+    onMouseLeave: handleMouseLeave,
+    onClick: handleClick,
+    ref: calloutRef,
+    style: {
+      backgroundColor: background_color ? CALLOUT_COLOR_MAP[background_color].background_color : 'transparent',
+      borderColor: isFocusOnCallout ? CALLOUT_COLOR_MAP[background_color].border_color : 'transparent'
+    }
+  }, attributes, {
+    className: "".concat(attributes.className, " sdoc-callout-container")
+  }), children, isShowPlaceholder() && /*#__PURE__*/React.createElement("div", {
+    contentEditable: false,
+    className: "sdoc-callout-placeholder"
+  }, t('Please_enter...')), isShowColorSelector && /*#__PURE__*/React.createElement(ColorSelector, {
+    ref: colorSelectorRef,
+    editor: editor,
+    element: element
+  })));
+};
+export default renderCallout;

package/dist/basic-sdk/extension/plugins/code-block/helpers.js

@@ -4,12 +4,14 @@ import slugid from 'slugid';
 import { CODE_BLOCK, CODE_LINE, INSERT_POSITION, PARAGRAPH } from '../../constants';
 import { getNodeType, getSelectedNodeByType, getSelectedElems } from '../../core';
 import { genCodeLangs } from './prismjs';
+import { getCalloutEntry } from '../callout/helper';
 export const isMenuDisabled = (editor, readonly) => {
   if (readonly) return true;
   const {
     selection
   } = editor;
   if (selection == null) return true;
+  if (getCalloutEntry(editor)) return true;
   const selectedElems = getSelectedElems(editor);
   const hasVoid = selectedElems.some(elem => editor.isVoid(elem));
   if (hasVoid) return true;

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

@@ -14,6 +14,7 @@ import FontPlugin from './font';
 import SdocLinkPlugin from './sdoc-link';
 import FileLinkPlugin from './file-link';
 import ParagraphPlugin from './paragraph';
-const Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, FileLinkPlugin];
+import CalloutPlugin from './callout';
+const Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, FileLinkPlugin, CalloutPlugin];
 export default Plugins;
-export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin };
+export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin };

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

@@ -22,10 +22,12 @@ const Paragraph = _ref => {
   const style = {
     textAlign: element.align
   };
+  const newAttributes = _objectSpread(_objectSpread({}, attributes), typeof attributes.onMouseEnter === 'function' && {
+    'data-root': 'true'
+  });
   return /*#__PURE__*/React.createElement("p", Object.assign({
-    "data-id": element.id,
-    "data-root": "true"
-  }, attributes, {
+    "data-id": element.id
+  }, newAttributes, {
     style: _objectSpread({
       position: isShowPlaceHolder ? 'relative' : ''
     }, style)

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

@@ -32,6 +32,7 @@ export const isTableMenuDisabled = (editor, readonly) => {
       if (type === ELEMENT_TYPE.TABLE) return true;
       if (type === ELEMENT_TYPE.TABLE_CELL) return true;
       if (type === ELEMENT_TYPE.TABLE_ROW) return true;
+      if (type === ELEMENT_TYPE.CALL_OUT) return true;
       if (Editor.isVoid(editor, n)) return true;
       return false;
     },

package/dist/basic-sdk/extension/plugins/table/popover/table-size-popover/index.css

@@ -54,7 +54,8 @@
 .sdoc-selected-table-size-popover .sdoc-selected-table-size-custom {
   display: flex;
   justify-content: space-between;
-  padding: 5px 10px 0;
+  align-items: center;
+  padding: 0 10px;
   min-height: 32px;
 }
 

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

@@ -15,12 +15,12 @@ const TableSizePopover = _ref => {
   } = _ref;
   const minSize = [5, 10];
   const maxSize = [10, 10];
-  const {
-    t
-  } = useTranslation();
   const [displaySize, setDisplaySize] = useState([5, 10]);
   const [selectedSize, setSelectedSize] = useState([1, 1]);
   const ref = useRef(null);
+  const {
+    t
+  } = useTranslation();
   const onMouseEnter = useCallback(function (event) {
     let cellPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
     let newDisplaySize = displaySize.slice(0);
@@ -83,12 +83,11 @@ const TableSizePopover = _ref => {
     className: "sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-selected-table-tools-container"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(MenuItem, {
     id: "sdoc-table-template-review-btn",
-    className: "sdoc-selected-table-size-custom"
-  }, /*#__PURE__*/React.createElement("span", null, t('Table_template')), /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
-  }))), /*#__PURE__*/React.createElement("div", {
+    text: "Table_template",
+    iconClassname: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  })), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-table-size-select"
   }, renderTableSize()), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-selected-table-size-tip w-100 "
@@ -97,4 +96,23 @@ const TableSizePopover = _ref => {
     targetId: "sdoc-table-template-review-btn"
   })));
 };
-export default TableSizePopover;
+export default TableSizePopover;
+const MenuItem = _ref2 => {
+  let {
+    id,
+    className,
+    text,
+    iconClassname
+  } = _ref2;
+  const {
+    t
+  } = useTranslation();
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: classnames('sdoc-selected-table-size-custom', {
+      className
+    })
+  }, /*#__PURE__*/React.createElement("span", null, t(text)), /*#__PURE__*/React.createElement("i", {
+    className: iconClassname
+  }));
+};

package/dist/basic-sdk/extension/plugins/table/popover/table-template/index.css

@@ -1,8 +1,8 @@
 .sdoc-table-template-inner-popover {
   display: flex;
   flex-wrap: wrap;
-  padding: 20px;
-  width: 430px;
+  padding: 10px;
+  width: 310px;
   height: 100%;
   background-color: #fff;
 }
@@ -14,9 +14,13 @@
   cursor: pointer;
 }
 
+.sdoc-table-template-view-table:hover {
+  box-shadow: 0 0 3px 2px #e2e3e6;
+}
+
 .sdoc-table-template-view-table .sdoc-table-template-row .sdoc-table-template-cell {
-  width: 40px;
-  height: 20px;
+  width: 28px;
+  height: 15px;
   border-left: 1px solid #e2e3e6;
   border-right: 1px solid #e2e3e6;
 }

package/dist/basic-sdk/extension/render/custom-element.js

@@ -1,9 +1,10 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useSlateStatic } from '@seafile/slate-react';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE, SUPPORTED_SIDE_OPERATION_TYPE } from '../constants';
-import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin } from '../plugins';
-import { onMouseEnter, onDragOver, onDragLeave, onDrop } from '../toolbar/side-toolbar/event';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK, FILE_LINK, TITLE, SUBTITLE, CALL_OUT, SUPPORTED_SIDE_OPERATION_TYPE } from '../constants';
+import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin } from '../plugins';
+import { onDragOver, onDragLeave, onDrop } from '../toolbar/side-toolbar/event';
 import { getParentNode } from '../core';
+import { setMouseEnter } from './helper';
 const CustomRenderElement = props => {
   const editor = useSlateStatic();
   const {
@@ -11,7 +12,7 @@ const CustomRenderElement = props => {
     attributes
   } = props;
   if (SUPPORTED_SIDE_OPERATION_TYPE.includes(element.type)) {
-    attributes['onMouseEnter'] = onMouseEnter;
+    setMouseEnter(editor, element, attributes);
     attributes['onDragOver'] = onDragOver;
     attributes['onDragLeave'] = onDragLeave;
     attributes['onDrop'] = onDrop;
@@ -20,6 +21,11 @@ const CustomRenderElement = props => {
   switch (element.type) {
     case PARAGRAPH:
       {
+        const parentNode = getParentNode(editor.children, element.id);
+        if (parentNode && parentNode.type === LIST_ITEM) {
+          const [renderParagraph] = ParagraphPlugin.renderElements;
+          return renderParagraph(props);
+        }
         const [renderParagraph] = ParagraphPlugin.renderElements;
         return renderParagraph(props);
       }
@@ -119,6 +125,11 @@ const CustomRenderElement = props => {
         const [renderFileLink] = FileLinkPlugin.renderElements;
         return renderFileLink(props, editor);
       }
+    case CALL_OUT:
+      {
+        const [renderCallout] = CalloutPlugin.renderElements;
+        return renderCallout(props, editor);
+      }
     default:
       {
         const [renderParagraph] = ParagraphPlugin.renderElements;

package/dist/basic-sdk/extension/render/helper.js

@@ -0,0 +1,37 @@
+import { Editor } from '@seafile/slate';
+import { findPath } from '../core';
+import { CALL_OUT, MOUSE_ENTER_EVENT_DISABLED_MAP } from '../constants';
+import { INTERNAL_EVENT } from '../../constants';
+import EventBus from '../../utils/event-bus';
+import { onMouseEnter } from '../toolbar/side-toolbar/event';
+const isNeedAddMouseEnterEvent = (editor, element) => {
+  const elementPath = findPath(editor, element);
+  // If the element is the root element, return true
+  if (elementPath.length <= 1) return true;
+  // If the element type is not in filter list, return true
+  if (!Reflect.ownKeys(MOUSE_ENTER_EVENT_DISABLED_MAP).includes(element.type)) return true;
+  const disableEventEntry = Editor.above(editor, {
+    match: n => MOUSE_ENTER_EVENT_DISABLED_MAP[element.type].includes(n.type),
+    mode: 'highest',
+    at: elementPath
+  });
+  return !disableEventEntry;
+};
+export const setMouseEnter = (editor, element, attributes) => {
+  if (!isNeedAddMouseEnterEvent(editor, element)) return;
+  attributes['onMouseEnter'] = e => onMouseEnter(e, element);
+};
+
+// Element extra event
+export const handleElementMouseEnterEvent = element => {
+  const {
+    id,
+    type
+  } = element;
+  const eventBus = EventBus.getInstance();
+  const elementEventMap = {
+    [CALL_OUT]: eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_COLOR_PICKER, id)
+  };
+  const event = elementEventMap[type];
+  event && event();
+};

package/dist/basic-sdk/extension/toolbar/header-toolbar/index.js

@@ -13,6 +13,7 @@ import HistoryMenu from './redo-undo';
 import Font from '../../plugins/font/menu';
 import InsertToolbar from './insert-toolbar';
 import ActiveTableMenu from '../../plugins/table/menu/active-table-menu';
+import CalloutMenu from '../../plugins/callout/menu';
 const HeaderToolbar = _ref => {
   let {
     editor,
@@ -56,6 +57,9 @@ const HeaderToolbar = _ref => {
   }), /*#__PURE__*/React.createElement(TextAlignMenu, {
     editor: editor,
     readonly: readonly
+  }), /*#__PURE__*/React.createElement(CalloutMenu, {
+    editor: editor,
+    readonly: readonly
   })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
     editor: editor,
     readonly: readonly

package/dist/basic-sdk/extension/toolbar/side-toolbar/event.js

@@ -1,9 +1,13 @@
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
-export const onMouseEnter = event => {
+import { CALL_OUT } from '../../constants';
+import { handleElementMouseEnterEvent } from '../../render/helper';
+export const onMouseEnter = (event, element) => {
   event.stopPropagation();
   const eventBus = EventBus.getInstance();
   eventBus.dispatch(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, event);
+  element.type === CALL_OUT && eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_COLOR_PICKER);
+  handleElementMouseEnterEvent(element);
 };
 export const onDragOver = event => {
   event.stopPropagation();

package/dist/basic-sdk/extension/toolbar/side-toolbar/helpers.js

@@ -6,10 +6,15 @@ import { toggleList } from '../../plugins/list/transforms';
 import { generateEmptyElement } from '../../core';
 import { generateEmptyList } from '../../plugins/list/model';
 import { setClipboardCodeBlockData } from '../../plugins/code-block/helpers';
-import { ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, CHECK_LIST_ITEM, IMAGE, TABLE, CODE_BLOCK, BLOCKQUOTE, LIST_ITEM_CORRELATION_TYPE, ADD_POSITION_OFFSET_TYPE, INSERT_POSITION, ELEMENT_TYPE } from '../../constants';
+import { ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, CHECK_LIST_ITEM, IMAGE, TABLE, CODE_BLOCK, BLOCKQUOTE, LIST_ITEM_CORRELATION_TYPE, ADD_POSITION_OFFSET_TYPE, INSERT_POSITION, ELEMENT_TYPE, CALL_OUT } from '../../constants';
 import { EMPTY_SELECTED_RANGE } from '../../plugins/table/constants';
+import { unwrapCallout, wrapCallout } from '../../plugins/callout/helper';
 export const onSetNodeType = (editor, element, type) => {
   if (!type) return;
+  if (type === CALL_OUT) {
+    wrapCallout(editor);
+    return;
+  }
   if ([ORDERED_LIST, UNORDERED_LIST].includes(type)) {
     toggleList(editor, type);
     return;
@@ -70,6 +75,10 @@ export const onCopyNode = (editor, element) => {
   }
 };
 export const onDeleteNode = (editor, element) => {
+  if (element.type === CALL_OUT) {
+    unwrapCallout(editor);
+    return;
+  }
   const path = ReactEditor.findPath(editor, element);
   Transforms.removeNodes(editor, {
     at: path
@@ -92,10 +101,11 @@ export const isVoidNode = node => {
   const hasImage = node.children.find(n => n.type === IMAGE);
   const isTable = node.type === TABLE;
   const isCodeBlock = node.type === CODE_BLOCK;
-  return Node.string(node) === '' && !hasImage && !isTable && !isCodeBlock;
+  const isCallout = node.type === CALL_OUT;
+  return Node.string(node) === '' && !hasImage && !isTable && !isCodeBlock && !isCallout;
 };
 export const isNotSupportTransform = node => {
-  if (node.type && [CODE_BLOCK, TABLE].includes(node.type)) {
+  if (node.type && [CODE_BLOCK, TABLE, CALL_OUT].includes(node.type)) {
     return true;
   }
   return false;

package/dist/basic-sdk/extension/toolbar/side-toolbar/index.js

@@ -8,7 +8,8 @@ import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { focusEditor } from '../../core';
 import { getDomTopHeight, setSelection, isVoidNode, getNodeEntry, isBlockquote, isList, onWrapListItem } from './helpers';
 import { INTERNAL_EVENT } from '../../../constants';
-import { CODE_BLOCK, TABLE, BLOCKQUOTE, CHECK_LIST_ITEM } from '../../constants';
+import { CODE_BLOCK, TABLE, BLOCKQUOTE, CHECK_LIST_ITEM, CALL_OUT } from '../../constants';
+import { getCalloutEntry } from '../../plugins/callout/helper';
 import './index.css';
 let sourceElement = null;
 let targetElement = null;
@@ -118,6 +119,11 @@ const SideToolbar = () => {
       return;
     }
 
+    // Drag into callout is not supported
+    if ([CALL_OUT, CODE_BLOCK, TABLE].includes(sourceNode.type) && getCalloutEntry(editor, targetPath)) {
+      return;
+    }
+
     // Drag list
     if (isList(editor, sourcePath)) {
       // ordinary list items

package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -8,10 +8,11 @@ import TableSizePopover from '../../plugins/table/popover/table-size-popover';
 import { changeToCodeBlock } from '../../plugins/code-block/helpers';
 import { toggleList } from '../../plugins/list/transforms';
 import { setCheckListItemType } from '../../plugins/check-list/helpers';
-import { ELEMENT_TYPE, INSERT_POSITION, LOCAL_IMAGE, SIDE_INSERT_MENUS_CONFIG } from '../../constants';
+import { ELEMENT_TYPE, INSERT_POSITION, LOCAL_IMAGE, PARAGRAPH, SIDE_INSERT_MENUS_CONFIG } from '../../constants';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
 import DropdownMenuItem from '../../commons/dropdown-menu-item';
+import { wrapCallout } from '../../plugins/callout/helper';
 const InsertBlockMenu = _ref => {
   let {
     insertPosition,
@@ -65,6 +66,14 @@ const InsertBlockMenu = _ref => {
     insertElement(editor, type, insertPosition);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
+  const onInsertCallout = useCallback(type => {
+    if (insertPosition === INSERT_POSITION.CURRENT) {
+      wrapCallout(editor);
+    } else if (insertPosition === INSERT_POSITION.AFTER) {
+      insertElement(editor, type, insertPosition);
+      wrapCallout(editor);
+    }
+  }, [editor, insertPosition]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenuItem, {
     menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.IMAGE]),
     onClick: onInsertImageToggle
@@ -86,6 +95,9 @@ const InsertBlockMenu = _ref => {
   }), /*#__PURE__*/React.createElement(DropdownMenuItem, {
     menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.CODE_BLOCK]),
     onClick: onInsertCodeBlock
+  }), /*#__PURE__*/React.createElement(DropdownMenuItem, {
+    menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.CALL_OUT]),
+    onClick: () => onInsertCallout(PARAGRAPH)
   }), /*#__PURE__*/React.createElement(DropdownMenuItem, {
     menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.UNORDERED_LIST]),
     onClick: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/locales/cs/sdoc-editor.json

@@ -414,5 +414,8 @@
   "New": "Nový",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

package/public/locales/de/sdoc-editor.json

@@ -414,5 +414,8 @@
   "New": "Erstellen",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

package/public/locales/en/sdoc-editor.json

@@ -414,5 +414,8 @@
   "New": "New",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

package/public/locales/es/sdoc-editor.json

@@ -414,5 +414,8 @@
   "New": "Nuevo",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

package/public/locales/fr/sdoc-editor.json

@@ -414,5 +414,8 @@
   "New": "Créer",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

package/public/locales/it/sdoc-editor.json

@@ -414,5 +414,8 @@
   "New": "Nuovo",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

package/public/locales/ru/sdoc-editor.json

@@ -281,7 +281,7 @@
   "Revision": "Пересмотр",
   "Error": "Ошибка",
   "Start_revise": "Начать пересмотр",
-  "Revise": "Revise",
+  "Revise": "Пересмотр",
   "Failed_to_execute_operation_on_server": "Не удалось выполнить операцию на сервере, текущая операция отменена.",
   "Start_revise_tip": "Создайте временный документ и внесите в него изменения, объедините его обратно после просмотра изменений",
   "Load_doc_content_error": "Ошибка загрузки содержимого документа",
@@ -414,5 +414,8 @@
   "New": "Новый",
   "Table_template": "Шаблон таблицы",
   "Jump_to_original_doc": "Перейти к исходному документу",
-  "Freezed": "Freezed"
+  "Freezed": "Заморожено",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -414,5 +414,8 @@
   "New": "新",
   "Table_template": "表格模版",
   "Jump_to_original_doc": "跳转到源文档",
-  "Freezed": "已冻结"
+  "Freezed": "已冻结",
+  "Callout": "高亮块",
+  "The_current_location_does_not_support_pasting": "当前位置不支持粘贴",
+  "Please_enter...": "请输入..."
 }

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,16 +14,24 @@
     />
       <missing-glyph />
       
+<<<<<<< HEAD
       <glyph glyph-name="sdoc-selected-text" unicode="&#58974;" d="M48 480h928c25.6 0 48-22.4 48-48s-22.4-48-48-48h-928C22.4 384 0 406.4 0 432S22.4 480 48 480z m0-352h352c25.6 0 48-22.4 48-48s-22.4-48-48-48h-352C22.4 32 0 54.4 0 80S22.4 128 48 128z m0 704h928c25.6 0 48-22.4 48-48S1001.6 736 976 736h-928C22.4 736 0 758.4 0 784S22.4 832 48 832z m675.2-950.4c-12.8 0-28.8 6.4-38.4 16l-124.8 118.4c-22.4 19.2-22.4 51.2 0 73.6s54.4 19.2 76.8 0l86.4-83.2 211.2 204.8c22.4 19.2 54.4 19.2 76.8 0s22.4-51.2 0-73.6l-249.6-240c-12.8-12.8-25.6-16-38.4-16z"  horiz-adv-x="1028" />
       
+=======
+<<<<<<< HEAD
+>>>>>>> 4ad4d178 (feat: change icon)
       <glyph glyph-name="sdoc-freezed" unicode="&#58973;" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM316.8 716.8c118.4 70.4 265.6 70.4 384 3.2s192-195.2 192-332.8c0-137.6-73.6-265.6-195.2-332.8-182.4-105.6-416-41.6-521.6 140.8S134.4 608 316.8 716.8z m348.8-604.8c137.6 80 195.2 249.6 131.2 396.8L259.2 195.2c92.8-124.8 268.8-163.2 406.4-83.2zM352 652.8c-137.6-80-192-249.6-128-393.6l537.6 310.4c-96 128-272 163.2-409.6 83.2z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-jump-to" unicode="&#58970;" d="M361.6 896c32 0 54.4-16 54.4-48S393.6 800 361.6 800H96v-832h832v262.4c0 32 16 57.6 48 57.6s48-25.6 48-57.6v-300.8c0-32-28.8-57.6-60.8-57.6H60.8c-32 0-60.8 25.6-60.8 57.6V835.2C0 870.4 25.6 896 60.8 896h300.8zM992 896c19.2 0 32-12.8 32-32v-332.8c0-28.8-19.2-51.2-48-51.2s-48 22.4-48 51.2V729.6L531.2 336c-6.4-9.6-19.2-16-35.2-16-12.8 0-25.6 6.4-35.2 16-19.2 19.2-19.2 51.2 0 70.4L857.6 800h-198.4c-28.8 0-51.2 19.2-51.2 48S630.4 896 656 896H992z"  horiz-adv-x="1024" />
       
+=======
+>>>>>>> 0183ac39 (feat: change icon)
       <glyph glyph-name="sdoc-callout" unicode="&#58972;" d="M992 352H32c-19.2 0-32 12.8-32 32V832c0 19.2 12.8 32 32 32h960c19.2 0 32-12.8 32-32v-448c0-19.2-12.8-32-32-32zM96 448h832V768H96v-320z m-96-224v-96h1024v96H0z m0-224v-96h576v96H0z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-chart" unicode="&#58971;" d="M992-128H32c-19.2 0-32 12.8-32 32V864c0 19.2 12.8 32 32 32h960c19.2 0 32-12.8 32-32v-960c0-19.2-12.8-32-32-32zM96-32h832V800H96v-832z m0 464v-96h832v96H96zM560 800h-96v-832h96V800z"  horiz-adv-x="1024" />
       
+      <glyph glyph-name="sdoc-notification" unicode="&#58970;" d="M931.2 80c-3.2 80-44.8 150.4-105.6 198.4V496c0 124.8-89.6 233.6-208 256v6.4C617.6 816 572.8 864 515.2 864S409.6 816 409.6 758.4v-6.4c-118.4-25.6-208-131.2-208-256v-217.6C137.6 233.6 99.2 160 96 80h835.2zM492.8-96h25.6c67.2 0 124.8 51.2 134.4 118.4H377.6c9.6-67.2 64-118.4 134.4-118.4h-19.2z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="sdoc-add" unicode="&#58968;" d="M512-128C227.2-128 0 99.2 0 384S227.2 896 512 896s512-227.2 512-512-227.2-512-512-512z m-51.2 563.2H291.2c-19.2 0-35.2-12.8-35.2-35.2v-35.2c0-19.2 12.8-35.2 35.2-35.2h169.6V160c0-19.2 12.8-35.2 35.2-35.2h35.2c19.2 0 35.2 12.8 35.2 35.2v169.6H736c19.2 0 35.2 12.8 35.2 35.2v35.2c0 19.2-12.8 35.2-35.2 35.2h-169.6V604.8c0 19.2-12.8 35.2-35.2 35.2h-35.2c-19.2 0-35.2-12.8-35.2-35.2v-169.6z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-tag" unicode="&#58969;" d="M521.353986 860.33363l466.979644-466.979644c22.389435-22.389435 35.183398-51.175851 35.183398-83.160758s-12.793963-60.771324-35.183398-83.160759l-323.047562-319.849071c-22.389435-22.389435-51.175851-35.183398-79.962268-35.183398-31.984907 0-60.771324 12.793963-83.160758 35.183398L35.183398 374.163042c-25.587926 25.587926-38.381889 60.771324-31.984907 95.954721l31.984907 291.062655c6.396981 54.374342 47.977361 95.954721 102.351703 102.351703l291.062654 31.984907c31.984907 3.198491 67.168305-9.595472 92.756231-35.183398zM444.590209 767.577399L159.924536 735.592492l-31.984908-281.467182L578.926819-0.060372l316.65058 313.45209L444.590209 767.577399z m12.793963-127.939628c57.572833-57.572833 57.572833-147.130573 0-204.703406-25.587926-25.587926-63.969814-41.580379-102.351703-41.580379-38.381889 0-73.565286 12.793963-102.351703 41.580379-57.572833 57.572833-57.572833 147.130573 0 204.703406 57.572833 57.572833 150.329063 57.572833 204.703406 0z m-102.351703-70.366796c-6.396981 0-15.992454-3.198491-22.389435-9.595472-12.793963-12.793963-12.793963-31.984907 0-44.77887 12.793963-12.793963 31.984907-12.793963 44.77887 0 12.793963 12.793963 12.793963 31.984907 0 44.77887-6.396981 6.396981-12.793963 9.595472-22.389435 9.595472z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -36,6 +36,10 @@
   content: "\e65b";
 }
 
+.sdoc-notification:before {
+  content: "\e65a";
+}
+
 .sdoc-add:before {
   content: "\e658";
 }
@@ -387,4 +391,3 @@
 .sdoc-user:before {
   content: "\e629";
 }
-