@seafile/sdoc-editor 0.3.11 → 0.3.13

package/dist/basic-sdk/comment/components/comment-item-wrapper.js

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import dayjs from 'dayjs';
 import classNames from 'classnames';
+import { Node } from '@seafile/slate';
 import context from '../../../context';
 import { useCommentContext } from '../hooks/comment-hooks/use-comment-context';
 import CommentItemContent from './comment-item-content';
@@ -10,9 +11,10 @@ import CommentEditor from './comment-editor';
 import CommentItemResolvedReply from './comment-item-resolved-reply';
 import CommentDeleteShadow from './comment-delete-shadow';
 import { COMMENT_URL_CLASSNAME } from '../constants';
-export default function CommentItemWrapper(_ref) {
+const CommentItemWrapper = _ref => {
   let {
     container,
+    element,
     isActive,
     comment,
     onCommentClick,
@@ -227,14 +229,19 @@ export default function CommentItemWrapper(_ref) {
   }, [isActive]);
   const className = classNames('comment-ui-container', {
     'active': isActive,
-    'sdoc-resolved': comment.resolved
+    'sdoc-resolved': comment.resolved,
+    'd-flex flex-column pt-0': element
   });
   const tip = comment.resolved ? 'Reopen_discussion' : 'Enter_a_reply';
   return /*#__PURE__*/React.createElement("div", {
     id: "comment-item-wrapper_".concat(comment.id),
     className: className,
     onClick: onItemClick
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, element && /*#__PURE__*/React.createElement("div", {
+    className: "comment-item-selected-text"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-selected-text mr-2"
+  }), Node.string(element)), /*#__PURE__*/React.createElement("ul", {
     ref: listRef,
     className: "comment-item-list"
   }, /*#__PURE__*/React.createElement(CommentItemContent, {
@@ -277,7 +284,8 @@ export default function CommentItemWrapper(_ref) {
     deleteConfirm: _deleteComment,
     setIsShowDeleteModal: setIsShowDeleteDialog
   }));
-}
+};
 CommentItemWrapper.defaultProps = {
   container: 'sdoc-comment-list-container'
-};
+};
+export default CommentItemWrapper;

package/dist/basic-sdk/comment/components/comment-list.css

@@ -18,6 +18,21 @@
   box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);
 }
 
+.sdoc-comment-list-container .comment-item-selected-text {
+  padding: 6px 16px;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 20px;
+  border-radius: 8px 8px 0 0;
+}
+
+.sdoc-comment-list-container .comment-item-selected-text .sdoc-selected-text {
+  font-size: 12px;
+}
+
 .sdoc-comment-list-container .comment-item-list {
   max-height: 350px;
   min-width: 280px;

package/dist/basic-sdk/comment/components/elements-comment-count/element-comment-count.js

@@ -1,11 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
-import { Editor } from '@seafile/slate';
-import { getNodeById, focusEditor, findPath } from '../../../extension/core';
+import { getNodeById } from '../../../extension/core';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { getElementCommentCountTop } from '../../helper';
 import { eventStopPropagation } from '../../../utils/mouse-event';
-import { ELEMENT_TYPE } from '../../../extension/constants';
+import { focusToCommentElement } from '../../utils';
 const ElementCommentCount = _ref => {
   let {
     elementId,
@@ -17,14 +16,7 @@ const ElementCommentCount = _ref => {
   const [top, setTop] = useState(-9999);
   const onClick = useCallback(event => {
     eventStopPropagation(event);
-    const path = findPath(editor, element);
-    const endOfFirstNode = Editor.end(editor, path);
-    const startOfFirstNode = Editor.start(editor, path);
-    const range = {
-      anchor: [ELEMENT_TYPE.LIST_ITEM, ELEMENT_TYPE.ORDERED_LIST, ELEMENT_TYPE.UNORDERED_LIST].includes(element.type) ? startOfFirstNode : endOfFirstNode,
-      focus: endOfFirstNode
-    };
-    focusEditor(editor, range);
+    focusToCommentElement(editor, element);
   }, [editor, element]);
   useEffect(() => {
     var _scrollRef$current;

package/dist/basic-sdk/comment/components/global-comment/index.css

@@ -50,6 +50,7 @@
   flex-direction: column;
   min-height: 0;
   position: relative;
+  background-color: #F5F5F5;
 }
 
 .global-comments-popover .comments-panel-body__header {
@@ -128,3 +129,14 @@
   left: 0;
   margin-bottom: 0;
 }
+
+/* custom */
+.global-comments-popover .sdoc-comment-list-container .comment-ui-container {
+  background-color: #FFF;
+  border: 1px solid #c7c7c7;
+}
+
+.global-comments-popover .sdoc-comment-list-container .comment-item-selected-text {
+  background-color: #F5F5F5;
+  border-bottom: 1px solid #c7c7c7;
+}

package/dist/basic-sdk/comment/components/global-comment/index.js

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import dayjs from 'dayjs';
 import { useSlateStatic } from '@seafile/slate-react';
+import { ReactEditor } from '@seafile/slate-react';
 import { ElementPopover } from '../../../extension/commons';
 import EventBus from '../../../utils/event-bus';
 import useCommentList from '../../hooks/comment-hooks/use-comment-list';
@@ -14,6 +15,8 @@ import { useCommentContext } from '../../hooks/comment-hooks/use-comment-context
 import GlobalCommentEditor from './global-comment-editor';
 import { INTERNAL_EVENT } from '../../../constants';
 import { getNodeById } from '../../../extension/core';
+import { useScrollContext } from '../../../hooks/use-scroll-context';
+import { focusToCommentElement } from '../../utils';
 import './index.css';
 const GlobalComment = _ref => {
   let {
@@ -30,6 +33,7 @@ const GlobalComment = _ref => {
   const [isShowCommentList, setShowCommentList] = useState(false);
   const [showEditor, setShowEditor] = useState(false);
   const editor = useSlateStatic();
+  const scrollRef = useScrollContext();
   const toggle = useCallback(() => {
     if (isShowCommentList) {
       setActiveComment(null);
@@ -69,11 +73,15 @@ const GlobalComment = _ref => {
   const hiddenComment = useCallback(() => {
     setActiveComment(null);
   }, []);
-  const onCommentClick = useCallback(comment => {
+  const onCommentClick = useCallback((comment, element) => {
     if (activeComment && activeComment.id === comment.id) return;
     setActiveComment(comment);
     deleteUnseenNotifications && deleteUnseenNotifications(comment);
-  }, [activeComment, deleteUnseenNotifications]);
+    if (comment.detail.element_id === DOC_COMMENT_ELEMENT_ID) return;
+    const elementDom = ReactEditor.toDOMNode(editor, element, scrollRef);
+    scrollRef.current.scrollTop = elementDom.offsetTop - scrollRef.current.clientHeight / 3;
+    focusToCommentElement(editor, element);
+  }, [activeComment, deleteUnseenNotifications, editor, scrollRef]);
   const {
     dispatch
   } = useCommentContext();
@@ -147,10 +155,11 @@ const GlobalComment = _ref => {
     const isActive = activeComment && activeComment.id === comment.id;
     return /*#__PURE__*/React.createElement(CommentItemWrapper, {
       key: comment.id,
+      element: element,
       container: "global-comment-list-container",
       comment: comment,
       isActive: isActive,
-      onCommentClick: onCommentClick,
+      onCommentClick: comment => onCommentClick(comment, element),
       hiddenComment: hiddenComment,
       updateScrollPosition: updateScrollPosition
     });

package/dist/basic-sdk/comment/utils/index.js

@@ -1,7 +1,10 @@
+import { Editor } from '@seafile/slate';
 import { getEventTransfer } from '../../../utils';
 import { COMMENT_URL_CLASSNAME } from '../constants';
 import { KeyCodes } from '../../../constants';
 import { createNotify, generatorNotificationKey } from './notification-utils';
+import { focusEditor, findPath } from '../../extension/core';
+import { ELEMENT_TYPE } from '../../extension/constants';
 export const searchCollaborators = (collaborators, searchValue) => {
   const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
   const validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
@@ -211,4 +214,14 @@ class CommentUtilities {
     };
   }
 }
+export const focusToCommentElement = (editor, element) => {
+  const path = findPath(editor, element);
+  const endOfFirstNode = Editor.end(editor, path);
+  const startOfFirstNode = Editor.start(editor, path);
+  const range = {
+    anchor: [ELEMENT_TYPE.LIST_ITEM, ELEMENT_TYPE.ORDERED_LIST, ELEMENT_TYPE.UNORDERED_LIST].includes(element.type) ? startOfFirstNode : endOfFirstNode,
+    focus: endOfFirstNode
+  };
+  focusEditor(editor, range);
+};
 export { CommentUtilities, createNotify, generatorNotificationKey };

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, 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 = (editor, calloutEntry) => {
+  const [, calloutPath] = calloutEntry;
+  const contentString = Editor.string(editor, calloutPath);
+  return 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;