@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/video/index.css

@@ -0,0 +1,73 @@
+.video-loading-placeholder {
+  background-color: #F2F2F2;
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+}
+
+.video-loading-placeholder .video-file-icon {
+  width: 35px;
+  height: auto;
+}
+
+.video-loading-placeholder .video-file-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  font-size: small;
+}
+
+.video-loading-placeholder .file-size {
+  display: flex;
+  align-items: center;
+  color: #939393;
+}
+
+.video-loading-placeholder .loading-spinner {
+  border: 3px solid #d8d8d8;
+  border-top: 3px solid #939393;
+  border-radius: 50%;
+  width: 15px;
+  height: 15px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.sdoc-video-wrapper{
+  display: flex;
+}
+.sdoc-video-wrapper {
+  position: relative;
+  display: flex;
+}
+
+.sdoc-video-wrapper .sdoc-video-inner {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  display: flex;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+.sdoc-video-inner .sdoc-video-element{
+  width: 100%;
+}
+
+.sdoc-video-inner .sdoc-video-element:focus-visible {
+  outline: none;
+}
+
+.sdoc-video-inner .sdoc-video-play {
+  position: absolute;
+  top: 36.75%;
+  left: 46.3%;
+  font-size: 48px;
+  pointer-events: none;
+}

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

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

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _constants = require("../../../../constants");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _constants2 = require("../../../constants");
+var _helpers = require("../helpers");
+const VideoMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    toggle,
+    eventBus
+  } = _ref;
+  const disabled = (0, _helpers.isInsertVideoMenuDisabled)(editor, readonly);
+  const menuConfig = _constants2.MENUS_CONFIG_MAP[_constants2.VIDEO];
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const openLocalVideoDialog = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.LOCAL_VIDEO,
+      editor
+    });
+  }, [editor, eventBus]);
+  const addVideoLink = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.ELEMENT_TYPE.VIDEO_LINK,
+      editor
+    });
+    toggle && toggle();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, eventBus]);
+  const openSelectVideoFileDialog = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.ELEMENT_TYPE.VIDEO,
+      insertVideo: _helpers.insertVideo
+    });
+    toggle && toggle();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggle, eventBus]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    className: "pr-2"
+  }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  })), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: menuConfig.id,
+    trigger: "hover",
+    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu sdoc-insert-video-menu-popover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-insert-video-menu-popover-container sdoc-dropdown-menu-container 333"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: openLocalVideoDialog
+  }, t('Upload_local_video')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: addVideoLink
+  }, t('Add_video_link')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: openSelectVideoFileDialog
+  }, t('Link_Seafile_video_file')))));
+};
+var _default = exports.default = VideoMenu;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _helpers = require("./helpers");
+const withVideo = editor => {
+  const {
+    isVoid,
+    onHotKeyDown
+  } = editor;
+  const newEditor = editor;
+
+  // Make video as void node
+  newEditor.isVoid = elem => {
+    const {
+      type
+    } = elem;
+    if (type === _constants.VIDEO) {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  newEditor.onHotKeyDown = event => {
+    const [videoNode, path] = (0, _core.getSelectedNodeEntryByType)(editor, _constants.VIDEO) || [];
+    if (path) {
+      // Insert empty paragraph node after video when clicking 'enter' on selected video
+      if ((0, _isHotkey.default)('enter', event)) {
+        event.preventDefault();
+        const emptyParagraph = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+        _slate.Transforms.insertNodes(editor, emptyParagraph, {
+          at: _slate.Path.next(path)
+        });
+        const focusPoint = _slate.Editor.end(editor, _slate.Path.next(path));
+        (0, _core.focusEditor)(newEditor, focusPoint);
+      }
+      if ((0, _isHotkey.default)('mod+c', event)) {
+        (0, _helpers.onCopyNode)(editor, videoNode);
+      }
+      return true;
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  return newEditor;
+};
+var _default = exports.default = withVideo;

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

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderVideo = renderVideo;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _helpers = require("./helpers");
+require("./index.css");
+const Video = _ref => {
+  var _videoStates$element$;
+  let {
+    element,
+    editor
+  } = _ref;
+  const {
+    data
+  } = element;
+  const videoRef = (0, _react.useRef)(null);
+  const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
+  const [isSelected, setIsSelected] = (0, _react.useState)(false);
+  const [videoStates, setVideoStates] = (0, _react.useState)({});
+  const videoName = (data === null || data === void 0 ? void 0 : data.name) || (data === null || data === void 0 ? void 0 : data.src);
+  const videoSize = data === null || data === void 0 ? void 0 : data.size;
+  const isEmbeddableLink = data === null || data === void 0 ? void 0 : data.is_embeddable_link;
+  const readonly = (0, _slateReact.useReadOnly)();
+  const handlePlay = () => {
+    setVideoStates(prev => ({
+      ...prev,
+      [element.id]: false
+    }));
+  };
+  const handlePause = () => {
+    setVideoStates(prev => ({
+      ...prev,
+      [element.id]: true
+    }));
+  };
+  const isPaused = (_videoStates$element$ = videoStates[element.id]) !== null && _videoStates$element$ !== void 0 ? _videoStates$element$ : true;
+  const handleVideoLoad = () => {
+    setIsLoaded(true);
+  };
+  const onClickVideo = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.select(editor, path);
+    setIsSelected(true);
+  }, [editor, element]);
+  const onClickOutside = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    if (videoRef.current && !videoRef.current.contains(e.target)) {
+      setIsSelected(false);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    const videoElement = videoRef.current;
+    if (videoElement) {
+      videoElement.addEventListener('loadeddata', handleVideoLoad);
+    }
+    document.addEventListener('click', onClickOutside);
+    return () => {
+      if (videoElement) {
+        videoElement.removeEventListener('loadeddata', handleVideoLoad);
+      }
+      document.removeEventListener('click', onClickOutside);
+    };
+  }, [onClickOutside]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isLoaded && /*#__PURE__*/_react.default.createElement("div", {
+    className: "video-loading-placeholder"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: "video-file-icon",
+    src: (0, _helpers.videoFileIcon)(),
+    alt: ""
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "video-file-info"
+  }, /*#__PURE__*/_react.default.createElement("div", null, videoName), /*#__PURE__*/_react.default.createElement("div", {
+    className: "file-size"
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _helpers.formatFileSize)(videoSize), " \u2014 "), /*#__PURE__*/_react.default.createElement("div", {
+    className: "loading-spinner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "spinner"
+  }))))), /*#__PURE__*/_react.default.createElement("div", {
+    "data-id": element.id,
+    className: "sdoc-video-wrapper",
+    style: {
+      display: isLoaded ? 'block' : 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-video-inner",
+    style: {
+      visibility: isLoaded ? 'visible' : 'hidden'
+    }
+  }, !isEmbeddableLink && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("video", {
+    className: "sdoc-video-element",
+    ref: videoRef,
+    src: (0, _helpers.getVideoURL)(data),
+    controls: true,
+    controlsList: readonly && 'nofullscreen',
+    onClick: onClickVideo,
+    draggable: false,
+    onPlay: handlePlay,
+    onPause: handlePause,
+    onCanPlay: handleVideoLoad,
+    style: {
+      boxShadow: isSelected ? '0 0 0 2px #007bff' : 'none'
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-video-play sdocfont sdoc-play icon-font",
+    style: {
+      visibility: isPaused ? 'visible' : 'hidden'
+    },
+    contentEditable: "false"
+  })), isEmbeddableLink && /*#__PURE__*/_react.default.createElement("iframe", {
+    className: "sdoc-video-element",
+    title: data.src,
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true,
+    src: (0, _helpers.getVideoURL)(data),
+    onLoad: handleVideoLoad,
+    style: {
+      width: '100%',
+      height: '100%',
+      border: 'none'
+    }
+  }))));
+};
+const SdocVideo = (0, _reactI18next.withTranslation)('sdoc-editor')(Video);
+function renderVideo(props, editor) {
+  const {
+    element,
+    children,
+    attributes
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    className: "sdoc-video-wrapper"
+  }, attributes, {
+    contentEditable: "true",
+    suppressContentEditableWarning: true
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-video-children-wrapper",
+    contentEditable: "false",
+    suppressContentEditableWarning: true,
+    style: {
+      userSelect: 'none',
+      pointerEvents: 'none'
+    }
+  }, children), /*#__PURE__*/_react.default.createElement(SdocVideo, {
+    element: element,
+    editor: editor
+  }));
+}

package/dist/basic-sdk/extension/plugins/wiki-link/helpers.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertWikiPageLink = exports.getWikiUrl = exports.generateWikiFileNode = void 0;
+var _slate = require("@seafile/slate");
+var _slugid = _interopRequireDefault(require("slugid"));
+var _context = _interopRequireDefault(require("../../../context"));
+var _constants = require("../../constants");
+var _elementType = require("../../constants/element-type");
+var _helpers = require("../sdoc-link/helpers");
+const insertWikiPageLink = (editor, text, wikiRepoId, pageId, icon, isDir) => {
+  if ((0, _helpers.isMenuDisabled)(editor)) return;
+  // Selection folded or not
+  const {
+    selection
+  } = editor;
+  if (selection == null) return;
+  const isCollapsed = _slate.Range.isCollapsed(selection);
+
+  // Remove shortcut symbol,if trigger by shortcut
+  (0, _helpers.removeShortCutSymbol)(editor);
+  const wikiLinkNode = generateWikiFileNode(wikiRepoId, pageId, text, icon, isDir);
+  if (isCollapsed) {
+    _slate.Transforms.insertNodes(editor, wikiLinkNode);
+  } else {
+    const selectedText = _slate.Editor.string(editor, selection); // Selected text
+    if (selectedText !== text) {
+      // If the selected text is different from the typed text, delete the text and insert the link
+      editor.deleteFragment();
+      _slate.Transforms.insertNodes(editor, wikiLinkNode);
+    } else {
+      // If the selected text is the same as the entered text, only the link can be wrapped
+      _slate.Transforms.wrapNodes(editor, wikiLinkNode, {
+        split: true
+      });
+      _slate.Transforms.collapse(editor, {
+        edge: 'end'
+      });
+    }
+  }
+};
+exports.insertWikiPageLink = insertWikiPageLink;
+const generateWikiFileNode = function (wikiRepoId, pageId) {
+  let title = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  let icon = arguments.length > 3 ? arguments[3] : undefined;
+  let isDir = arguments.length > 4 ? arguments[4] : undefined;
+  const wikiPageLinkNode = {
+    id: _slugid.default.nice(),
+    type: _elementType.WIKI_LINK,
+    wiki_repo_id: wikiRepoId,
+    page_id: pageId,
+    title: title,
+    icon,
+    isDir,
+    display_type: _constants.INSERT_FILE_DISPLAY_TYPE[1],
+    children: [{
+      id: _slugid.default.nice(),
+      text: title
+    }]
+  };
+  return wikiPageLinkNode;
+};
+exports.generateWikiFileNode = generateWikiFileNode;
+const getWikiUrl = (wikiRepoId, pageId, readOnly) => {
+  if (readOnly) {
+    const siteRoot = _context.default.getSetting('siteRoot');
+    const publishUrl = _context.default.getSetting('publishUrl');
+    const DEFAULT_URL = 'wiki/publish';
+    return `${siteRoot}${DEFAULT_URL}/${publishUrl}/${pageId}/`;
+  }
+  const siteRoot = _context.default.getSetting('siteRoot');
+  return `${siteRoot}wikis/${wikiRepoId}/${pageId}/`;
+};
+exports.getWikiUrl = getWikiUrl;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _elementType = require("../../constants/element-type");
+var _plugin = _interopRequireDefault(require("../sdoc-link/plugin"));
+var _renderElem = _interopRequireDefault(require("../sdoc-link/render/render-elem"));
+const WikiLinkPlugin = {
+  type: _elementType.WIKI_LINK,
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = WikiLinkPlugin;

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setMouseEnter = exports.setDataRoot = exports.onMouseEnter = exports.onDrop = exports.onDragOver = exports.onDragLeave = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
+var _constants2 = require("../constants");
+var _core = require("../core");
+const isNeedAddMouseEnterEvent = (editor, element) => {
+  const elementPath = (0, _core.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(_constants2.MOUSE_ENTER_EVENT_DISABLED_MAP).includes(element.type)) return true;
+  const disableEventEntry = _slate.Editor.above(editor, {
+    match: n => _constants2.MOUSE_ENTER_EVENT_DISABLED_MAP[element.type].includes(n.type),
+    mode: 'highest',
+    at: elementPath
+  });
+  return !disableEventEntry;
+};
+const setMouseEnter = (editor, element, attributes) => {
+  if (!isNeedAddMouseEnterEvent(editor, element)) return;
+  attributes['onMouseEnter'] = e => onMouseEnter(e, element);
+};
+exports.setMouseEnter = setMouseEnter;
+const setDataRoot = (element, attributes) => {
+  if (!_constants2.ROOT_ELEMENT_TYPES.includes(element.type)) return;
+  attributes['data-root'] = 'true';
+};
+exports.setDataRoot = setDataRoot;
+const onMouseEnter = (event, element) => {
+  event.stopPropagation();
+  const eventBus = _eventBus.default.getInstance();
+  eventBus.dispatch(_constants.INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, event);
+};
+exports.onMouseEnter = onMouseEnter;
+const onDragOver = event => {
+  event.stopPropagation();
+  event.preventDefault();
+  const dragTypes = event.dataTransfer.types;
+  if (dragTypes.includes(_constants2.TABLE_DRAG_KEY)) return;
+  const eventBus = _eventBus.default.getInstance();
+  eventBus.dispatch(_constants.INTERNAL_EVENT.ON_DRAG_OVER_BLOCK, event);
+};
+exports.onDragOver = onDragOver;
+const onDragLeave = event => {
+  event.stopPropagation();
+  event.preventDefault();
+  const eventBus = _eventBus.default.getInstance();
+  eventBus.dispatch(_constants.INTERNAL_EVENT.ON_DRAG_LEAVE_BLOCK, event);
+};
+exports.onDragLeave = onDragLeave;
+const onDrop = event => {
+  event.stopPropagation();
+  event.preventDefault();
+  const eventBus = _eventBus.default.getInstance();
+  eventBus.dispatch(_constants.INTERNAL_EVENT.ON_DRAG_DROP_BLOCK, event);
+};
+exports.onDrop = onDrop;

package/dist/basic-sdk/extension/render/render-comment-editor-element.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slateReact = require("@seafile/slate-react");
+var _constants = require("../constants");
+var _core = require("../core");
+var _plugins = require("../plugins");
+const RenderCommentEditorCustomRenderElement = props => {
+  const editor = (0, _slateReact.useSlateStatic)();
+  const readonly = (0, _slateReact.useReadOnly)();
+  const {
+    element,
+    commentType
+  } = props;
+  switch (element.type) {
+    case _constants.PARAGRAPH:
+      {
+        const parentNode = (0, _core.getParentNode)(editor.children, element.id);
+        const _props = {
+          ...props,
+          className: 'sdoc-comment-editor-paragraph'
+        };
+        if (parentNode && parentNode.type === _constants.LIST_ITEM) {
+          const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;
+          return renderParagraph(_props);
+        }
+        const placeholder = commentType === 'comment' ? 'Enter_comment_shift_enter_for_new_line_Enter_to_send' : 'Enter_reply_shift_Enter_for_new_line_Enter_to_send';
+        const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;
+        return renderParagraph({
+          ..._props,
+          placeholder
+        });
+      }
+    case _constants.LINK:
+      {
+        const [renderLink] = _plugins.LinkPlugin.renderElements;
+        return renderLink(props, editor, readonly);
+      }
+    case _constants.ORDERED_LIST:
+    case _constants.UNORDERED_LIST:
+      {
+        const [renderList] = _plugins.ListPlugin.renderElements;
+        return renderList(props, editor);
+      }
+    case _constants.LIST_ITEM:
+      {
+        const [, renderListItem] = _plugins.ListPlugin.renderElements;
+        return renderListItem(props, editor);
+      }
+    case _constants.IMAGE:
+      {
+        var _editor$element_comme;
+        const parentNode = (0, _core.getParentNode)(editor.children, element.id);
+        const comments = ((_editor$element_comme = editor.element_comments_map) === null || _editor$element_comme === void 0 ? void 0 : _editor$element_comme[parentNode.id]) || [];
+        const unresolvedComments = comments && comments.filter(item => !item.resolved);
+        let leaf = {};
+        if (unresolvedComments && unresolvedComments.length > 0) {
+          leaf['computed_background_color'] = 'rgba(129, 237, 247, 0.5)';
+        }
+        const [renderImage] = _plugins.ImagePlugin.renderElements;
+        return renderImage({
+          ...props,
+          leaf
+        }, editor);
+      }
+    case _constants.IMAGE_BLOCK:
+      {
+        const [, renderImageBlock] = _plugins.ImagePlugin.renderElements;
+        return renderImageBlock({
+          ...props
+        }, editor);
+      }
+    case _constants.VIDEO:
+      {
+        const [renderVideo] = _plugins.VideoPlugin.renderElements;
+        return renderVideo({
+          ...props
+        }, editor);
+      }
+    case _constants.MENTION:
+      {
+        const [renderMention] = _plugins.MentionPlugin.renderElements;
+        return renderMention(props, editor);
+      }
+    case _constants.MENTION_TEMP:
+      {
+        const [, renderMentionTemporaryInput] = _plugins.MentionPlugin.renderElements;
+        return renderMentionTemporaryInput(props, editor);
+      }
+    case _constants.BLOCKQUOTE:
+      {
+        const [renderBlockquote] = _plugins.BlockquotePlugin.renderElements;
+        return renderBlockquote(props, editor);
+      }
+    default:
+      {
+        const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;
+        return renderParagraph(props);
+      }
+  }
+};
+var _default = exports.default = RenderCommentEditorCustomRenderElement;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _slateReact = require("@seafile/slate-react");
+var _plugins = require("../plugins");
+const CustomLeaf = props => {
+  const editor = (0, _slateReact.useSlateStatic)();
+  const [renderText] = _plugins.TextPlugin.renderElements;
+  return renderText(props, editor);
+};
+const renderLeaf = props => {
+  return /*#__PURE__*/_react.default.createElement(CustomLeaf, props);
+};
+var _default = exports.default = renderLeaf;