@seafile/sdoc-editor 0.3.11 → 0.3.13

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

@@ -0,0 +1,57 @@
+import isHotkey from 'is-hotkey';
+import { PARAGRAPH, INSERT_POSITION } from '../../constants';
+import { isSelectionAtBlockStart } from '../../core';
+import { getCalloutEntry, isCalloutContentEmpty, unwrapCallout } from './helper';
+import { insertElement } from '../../toolbar/side-toolbar/helpers';
+import EventBus from '../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../constants';
+import { CALLOUT_ALLOWED_INSIDE_TYPES } from './constant';
+
+/**
+ * @param {Editor} editor
+ * @returns
+ */
+const withCallout = editor => {
+  const {
+    insertFragment,
+    deleteBackward,
+    onHotKeyDown
+  } = editor;
+  const newEditor = editor;
+  newEditor.deleteBackward = unit => {
+    const calloutEntry = getCalloutEntry(editor);
+    if (calloutEntry) {
+      if (isSelectionAtBlockStart(editor) && isCalloutContentEmpty(editor, calloutEntry)) return;
+    }
+    return deleteBackward(unit);
+  };
+  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.DISPLAY_CALLOUT_UNSUPPORT_ALERT, unsupportType);
+      return;
+    }
+    return insertFragment(data);
+  };
+  newEditor.onHotKeyDown = event => {
+    if (isHotkey('mod+enter', event)) {
+      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;
+};
+export default withCallout;

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

@@ -0,0 +1,51 @@
+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-callout-color-selector-container",
+    contentEditable: false
+  }, /*#__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,59 @@
+.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-callout-color-selector-container {
+  position: absolute;
+  padding: 10px;
+  top: -39px;
+  left: 5px;
+  background-color: #fff;
+  box-shadow: -2px 0px 8px 2px #d0cfcf;
+  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.11",
+  "version": "0.3.13",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

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/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...": "请输入..."
 }