@seafile/sdoc-editor 1.0.146 → 1.0.148

package/dist/api/seafile-api.js

@@ -55,6 +55,23 @@ class SeafileAPI {
     const url = '/api/v2.1/seadoc/download-image/' + docUuid + '/' + encodeURIComponent(imageName);
     return this.req.get(url);
   }
+  getVideoFileNameWithUuid(file) {
+    return 'video-' + _slugid.default.nice() + file.name.slice(file.name.lastIndexOf('.'));
+  }
+  uploadSdocVideo(docUuid, videoFiles) {
+    const url = '/api/v2.1/seadoc/upload-video/' + docUuid + '/';
+    const form = new FormData();
+    for (const fileItem of videoFiles) {
+      if (fileItem.type.startsWith('video/')) {
+        const fileName = this.getVideoFileNameWithUuid(fileItem);
+        const file = new File([fileItem], fileName, {
+          type: fileItem.type
+        });
+        form.append('file', file);
+      }
+    }
+    return this.req.post(url, form);
+  }
 
   // revision
   startRevise(repoID, fileUuid, path) {

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -154,6 +154,10 @@
   padding: 8px 0;
 }
 
+.sdoc-insert-video-menu-popover-container {
+  padding: 8px 0;
+}
+
 /* caret */
 .sdoc-editor__article .caret-item .caret-name::before {
   content: attr(name);

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

@@ -46,7 +46,8 @@ const INTERNAL_EVENT = exports.INTERNAL_EVENT = {
   ON_PRINT: 'on_print',
   COMMENT_EDITOR_POST_COMMENT: 'comment_editor_post_comment',
   CLOSE_FILE_INSET_DIALOG: 'close_file_insert_dialog',
-  RESIZE_ARTICLE: 'resize_article'
+  RESIZE_ARTICLE: 'resize_article',
+  ON_VIDEO_FILES_UPLOADED: 'on_video_files_uploaded'
 };
 const REVISION_DIFF_KEY = exports.REVISION_DIFF_KEY = 'diff';
 const REVISION_DIFF_VALUE = exports.REVISION_DIFF_VALUE = '1';

package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
 var _dialogs = require("../../plugins/table/dialogs");
 var _addLinkDialog = _interopRequireDefault(require("../../plugins/link/dialog/add-link-dialog"));
 var _index = _interopRequireDefault(require("../select-file-dialog/index.js"));
@@ -14,8 +15,11 @@ var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _constants = require("../../../constants");
 var _constants2 = require("../../constants");
 var _helpers = require("../../plugins/image/helpers");
+var _helpers2 = require("../../plugins/video/helpers");
 var _context = _interopRequireDefault(require("../../../../context.js"));
 var _index2 = _interopRequireDefault(require("../file-insert-dialog/index.js"));
+var _index3 = _interopRequireDefault(require("../../../../components/toast/index.js"));
+var _index4 = require("../../plugins/video/constants/index.js");
 const InsertElementDialog = _ref => {
   let {
     editor
@@ -28,7 +32,11 @@ const InsertElementDialog = _ref => {
   const [validEditor, setValidEditor] = (0, _react.useState)(editor);
   const [linkTitle, setLinkTitle] = (0, _react.useState)('');
   const [handleSubmit, setHandleSubmit] = (0, _react.useState)(() => void 0);
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
   const uploadLocalImageInputRef = (0, _react.useRef)();
+  const uploadLocalVideoInputRef = (0, _react.useRef)();
   const onFileChanged = (0, _react.useCallback)(event => {
     const files = event.target.files;
     _context.default.uploadLocalImage(files).then(fileUrl => {
@@ -39,6 +47,29 @@ const InsertElementDialog = _ref => {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [validEditor, uploadLocalImageInputRef, insertPosition, slateNode]);
+  const handleDisplayAlert = (0, _react.useCallback)(() => {
+    setTimeout(() => {
+      _index3.default.warning(`${t('The_current_version_does_not_support_>5MB_video_file')}`, {
+        duration: 3
+      });
+    }, 0);
+  }, []);
+  const onVideoFileChanged = (0, _react.useCallback)(event => {
+    const files = event.target.files;
+    // Show warning for 3s and no further insertion if video file is more than 5MB
+    if (files[0].size > _index4.VIDEO_MAX_SIZE_5MB) {
+      handleDisplayAlert();
+      event.target.value = null;
+      return;
+    }
+    _context.default.uploadLocalVideo(files).then(fileUrl => {
+      (0, _helpers2.insertVideo)(validEditor, files, fileUrl, validEditor.selection, insertPosition);
+      if (uploadLocalVideoInputRef.current) {
+        uploadLocalVideoInputRef.current.value = '';
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validEditor, uploadLocalImageInputRef, insertPosition, slateNode]);
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
     const toggleDialogSubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.INSERT_ELEMENT, toggleDialog);
@@ -77,6 +108,11 @@ const InsertElementDialog = _ref => {
         uploadLocalImageInputRef.current && uploadLocalImageInputRef.current.click();
       }, 0);
     }
+    if (type === _constants2.LOCAL_VIDEO) {
+      setTimeout(() => {
+        uploadLocalVideoInputRef.current && uploadLocalVideoInputRef.current.click();
+      }, 0);
+    }
   }, [editor]);
   const closeDialog = (0, _react.useCallback)(() => {
     setInsertPosition(_constants2.INSERT_POSITION.CURRENT);
@@ -143,6 +179,19 @@ const InsertElementDialog = _ref => {
           onChange: onFileChanged
         });
       }
+    case _constants2.LOCAL_VIDEO:
+      {
+        return /*#__PURE__*/_react.default.createElement("input", {
+          onClick: e => e.stopPropagation(),
+          ref: uploadLocalVideoInputRef,
+          type: "file",
+          accept: "video/*",
+          style: {
+            display: 'none'
+          },
+          onChange: onVideoFileChanged
+        });
+      }
     case _constants2.ELEMENT_TYPE.FILE_LINK_INSET_INPUT_TEMP:
       {
         return /*#__PURE__*/_react.default.createElement(_index2.default, {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIKI_LINK = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = void 0;
+exports.WIKI_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = void 0;
 const BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 const TITLE = exports.TITLE = 'title';
 const SUBTITLE = exports.SUBTITLE = 'subtitle';
@@ -36,6 +36,7 @@ const WIKI_LINK = exports.WIKI_LINK = 'wiki_link';
 const FILE_LINK = exports.FILE_LINK = 'file_link';
 const IMAGE = exports.IMAGE = 'image';
 const IMAGE_BLOCK = exports.IMAGE_BLOCK = 'image_block';
+const VIDEO = exports.VIDEO = 'video';
 const CALL_OUT = exports.CALL_OUT = 'callout';
 const MENTION = exports.MENTION = 'mention';
 const MENTION_TEMP = exports.MENTION_TEMP = 'mention_temp';

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

@@ -238,7 +238,7 @@ Object.defineProperty(exports, "LIST_ITEM", {
     return _elementType.LIST_ITEM;
   }
 });
-exports.LOCAL_IMAGE = exports.LIST_TYPE_ARRAY = exports.LIST_ITEM_SUPPORTED_TRANSFORMATION = exports.LIST_ITEM_CORRELATION_TYPE = void 0;
+exports.LOCAL_VIDEO = exports.LOCAL_IMAGE = exports.LIST_TYPE_ARRAY = exports.LIST_ITEM_SUPPORTED_TRANSFORMATION = exports.LIST_ITEM_CORRELATION_TYPE = void 0;
 Object.defineProperty(exports, "MAC_HOTKEYS", {
   enumerable: true,
   get: function () {
@@ -466,6 +466,12 @@ Object.defineProperty(exports, "UNORDERED_LIST", {
     return _elementType.UNORDERED_LIST;
   }
 });
+Object.defineProperty(exports, "VIDEO", {
+  enumerable: true,
+  get: function () {
+    return _elementType.VIDEO;
+  }
+});
 Object.defineProperty(exports, "WIN_HOTKEYS", {
   enumerable: true,
   get: function () {
@@ -507,6 +513,7 @@ const INSERT_POSITION = exports.INSERT_POSITION = {
   AFTER: 'after'
 };
 const LOCAL_IMAGE = exports.LOCAL_IMAGE = 'local-image';
+const LOCAL_VIDEO = exports.LOCAL_VIDEO = 'local-video';
 const LIST_TYPE_ARRAY = exports.LIST_TYPE_ARRAY = [_elementType.UNORDERED_LIST, _elementType.ORDERED_LIST];
 const LIST_ITEM_CORRELATION_TYPE = exports.LIST_ITEM_CORRELATION_TYPE = [_elementType.UNORDERED_LIST, _elementType.ORDERED_LIST, _elementType.LIST_ITEM];
 const LIST_ITEM_SUPPORTED_TRANSFORMATION = exports.LIST_ITEM_SUPPORTED_TRANSFORMATION = [_elementType.UNORDERED_LIST, _elementType.ORDERED_LIST, 'left', 'center', 'right', _elementType.BLOCKQUOTE];
@@ -515,7 +522,7 @@ const FILE_TYPE = exports.FILE_TYPE = {
   [_elementType.FILE_LINK]: 'file',
   [_elementType.SDOC_LINK]: 'sdoc'
 };
-const SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.SEATABLE_COLUMN];
+const SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_COLUMN];
 const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP = {
   [_elementType.PARAGRAPH]: [_elementType.CALL_OUT],
   [_elementType.TITLE]: [_elementType.CALL_OUT],
@@ -533,4 +540,4 @@ const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP =
   [_elementType.HEADER6]: [_elementType.CALL_OUT],
   [_elementType.CALL_OUT]: [_elementType.CALL_OUT]
 };
-const ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK];
+const ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO];

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

@@ -88,6 +88,11 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     iconClass: 'sdocfont sdoc-image',
     text: 'Image'
   },
+  [_elementType.VIDEO]: {
+    id: `sdoc_${_elementType.VIDEO}`,
+    iconClass: 'sdocfont sdoc-video',
+    text: 'Video'
+  },
   [_elementType.TABLE]: {
     id: `sdoc_${_elementType.TABLE}`,
     iconClass: 'sdocfont sdoc-table',
@@ -308,6 +313,12 @@ const SIDE_INSERT_MENUS_CONFIG = exports.SIDE_INSERT_MENUS_CONFIG = {
     type: _elementType.IMAGE,
     text: 'Image'
   },
+  [_elementType.VIDEO]: {
+    id: '',
+    iconClass: 'sdocfont sdoc-video',
+    type: _elementType.VIDEO,
+    text: 'Video'
+  },
   [_elementType.TABLE]: {
     id: 'sdoc-side-menu-item-table',
     iconClass: 'sdocfont sdoc-table',
@@ -401,6 +412,7 @@ const SIDE_INSERT_MENUS_CONFIG = exports.SIDE_INSERT_MENUS_CONFIG = {
 };
 const SIDE_INSERT_MENUS_SEARCH_MAP = exports.SIDE_INSERT_MENUS_SEARCH_MAP = {
   [_elementType.IMAGE]: 'Image',
+  [_elementType.VIDEO]: 'Video',
   [_elementType.TABLE]: 'Table',
   [_elementType.MULTI_COLUMN]: 'Multi_column',
   [_elementType.COLUMN]: 'Column',

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

@@ -143,6 +143,12 @@ Object.defineProperty(exports, "TextPlugin", {
     return _textStyle.default;
   }
 });
+Object.defineProperty(exports, "VideoPlugin", {
+  enumerable: true,
+  get: function () {
+    return _video.default;
+  }
+});
 Object.defineProperty(exports, "WikiLinkPlugin", {
   enumerable: true,
   get: function () {
@@ -159,6 +165,7 @@ var _checkList = _interopRequireDefault(require("./check-list"));
 var _textStyle = _interopRequireDefault(require("./text-style"));
 var _codeBlock = _interopRequireDefault(require("./code-block"));
 var _image = _interopRequireDefault(require("./image"));
+var _video = _interopRequireDefault(require("./video"));
 var _table = _interopRequireDefault(require("./table"));
 var _multiColumn = _interopRequireDefault(require("./multi-column"));
 var _html = _interopRequireDefault(require("./html"));
@@ -174,7 +181,7 @@ var _quickInsert = _interopRequireDefault(require("./quick-insert"));
 var _wikiLink = _interopRequireDefault(require("./wiki-link"));
 var _seatableColumn = _interopRequireDefault(require("./seatable-column"));
 var _seatableTables = _interopRequireDefault(require("./seatable-tables"));
-const Plugins = [_markdown.default, _html.default, _header.default, _link.default, _blockquote.default, _list.default, _checkList.default, _codeBlock.default, _image.default, _table.default, _multiColumn.default, _textStyle.default, _textAlign.default, _font.default, _sdocLink.default, _paragraph.default, _fileLink.default, _callout.default, _searchReplace.default, _quickInsert.default];
+const Plugins = [_markdown.default, _html.default, _header.default, _link.default, _blockquote.default, _list.default, _checkList.default, _codeBlock.default, _image.default, _video.default, _table.default, _multiColumn.default, _textStyle.default, _textAlign.default, _font.default, _sdocLink.default, _paragraph.default, _fileLink.default, _callout.default, _searchReplace.default, _quickInsert.default];
 const WikiPlugins = exports.WikiPlugins = [...Plugins, _wikiLink.default];
 const CommentPlugins = exports.CommentPlugins = [_markdown.default, _html.default, _paragraph.default, _textStyle.default, _list.default, _image.default, _link.default, _mention.default, _blockquote.default];
 var _default = exports.default = Plugins;

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VIDEO_MAX_SIZE_5MB = exports.ONE_MB = exports.ONE_KB = exports.ONE_GB = void 0;
+const VIDEO_MAX_SIZE_5MB = exports.VIDEO_MAX_SIZE_5MB = 5 * 1024 * 1024;
+const ONE_GB = exports.ONE_GB = 1000 * 1000 * 1000;
+const ONE_MB = exports.ONE_MB = 1000 * 1000;
+const ONE_KB = exports.ONE_KB = 1000;

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

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.videoFileIcon = exports.isInsertVideoMenuDisabled = exports.insertVideo = exports.getVideoURL = exports.generateVideoNode = exports.formatFileSize = void 0;
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _slate = require("@seafile/slate");
+var _core = require("../../core");
+var _constants = require("../../constants");
+var _context = _interopRequireDefault(require("../../../../context"));
+var _constants2 = require("./constants");
+const isInsertVideoMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  const {
+    selection
+  } = editor;
+  if (selection === null) return true;
+  if (!_slate.Range.isCollapsed(selection)) return true;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => {
+      let type = (0, _core.getNodeType)(n);
+      if (!type && (0, _core.isTextNode)(n) && n.id) {
+        const parentNode = (0, _core.getParentNode)(editor.children, n.id);
+        type = (0, _core.getNodeType)(parentNode);
+      }
+      if (type === _constants.CODE_BLOCK) return true;
+      if (type.startsWith('header')) return true;
+      if (type === _constants.TITLE) return true;
+      if (type === _constants.SUBTITLE) return true;
+      if (type === _constants.LIST_ITEM) return true;
+      if (type === _constants.CHECK_LIST_ITEM) return true;
+      if (_slate.Editor.isVoid(editor, n)) return true;
+      return false;
+    },
+    universal: true
+  });
+  if (match) return true;
+  return false;
+};
+exports.isInsertVideoMenuDisabled = isInsertVideoMenuDisabled;
+const generateVideoNode = (src, videoFiles) => {
+  const element = (0, _core.generateEmptyElement)(_constants.VIDEO);
+  return {
+    ...element,
+    data: {
+      src,
+      videoFiles
+    }
+  };
+};
+exports.generateVideoNode = generateVideoNode;
+const insertVideo = function (editor, videoFiles, srcList, selection) {
+  let position = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : _constants.INSERT_POSITION.CURRENT;
+  if (!srcList) return;
+  if (position !== _constants.INSERT_POSITION.AFTER) {
+    if (isInsertVideoMenuDisabled(editor)) return;
+  }
+  const videoNodes = srcList.map(src => {
+    return generateVideoNode(src, videoFiles);
+  });
+  const validSelection = selection || editor.selection;
+  let path = _slate.Editor.path(editor, validSelection);
+  if (position === _constants.INSERT_POSITION.AFTER) {
+    const p = (0, _core.generateEmptyElement)(_constants.ELEMENT_TYPE.PARAGRAPH);
+    videoNodes.forEach((item, index) => {
+      p.children[index] = item;
+    });
+    _slate.Transforms.insertNodes(editor, p, {
+      at: [path[0] + 1]
+    });
+    (0, _core.focusEditor)(editor, [path[0] + 1, 2]);
+    return;
+  }
+  const aboveNodeEntry = (0, _core.getAboveBlockNode)(editor);
+  const nodePath = [aboveNodeEntry[1][0]];
+  const nextPath = _slate.Path.next(nodePath);
+  const isEmptyParagraph = aboveNodeEntry[0].type === _constants.PARAGRAPH && _slate.Node.string(aboveNodeEntry[0]).length === 0;
+  if (videoNodes.length === 1 && isEmptyParagraph) {
+    _slate.Transforms.setNodes(editor, videoNodes[0], {
+      at: validSelection
+    });
+    _slate.Transforms.insertNodes(editor, (0, _core.generateDefaultParagraph)(), {
+      at: nextPath
+    });
+    const endOfFirstNode = _slate.Editor.start(editor, nextPath);
+    const range = {
+      anchor: endOfFirstNode,
+      focus: endOfFirstNode
+    };
+    (0, _core.focusEditor)(editor, range);
+    return;
+  }
+  let videoEndSelection;
+  if ((0, _core.isLastNode)(editor, aboveNodeEntry[0]) && _slate.Editor.isEnd(editor, validSelection.anchor, [validSelection.anchor.path[0]])) {
+    // Insert video into empty paragraph node at the end if in the last position
+    _slate.Transforms.splitNodes(editor, {
+      at: selection,
+      always: true
+    });
+    _slate.Transforms.insertNodes(editor, videoNodes[0], {
+      at: validSelection
+    });
+    _slate.Transforms.insertNodes(editor, (0, _core.generateDefaultParagraph)(), {
+      at: [nextPath[0] + 1]
+    });
+    videoEndSelection = [nextPath[0] + 1];
+  } else {
+    _slate.Transforms.splitNodes(editor, {
+      at: selection,
+      always: true
+    });
+    _slate.Transforms.insertNodes(editor, videoNodes[0], {
+      at: validSelection
+    });
+    videoEndSelection = _slate.Editor.start(editor, _slate.Path.next(nextPath));
+  }
+  (0, _core.focusEditor)(editor, videoEndSelection);
+};
+exports.insertVideo = insertVideo;
+const getVideoURL = data => {
+  const {
+    src: url
+  } = data;
+  if (url && url.startsWith('http')) return url;
+  const serviceUrl = _context.default.getSetting('serviceUrl');
+  const assetsUrl = _context.default.getSetting('assetsUrl');
+  return (0, _urlJoin.default)(serviceUrl, assetsUrl, url);
+};
+exports.getVideoURL = getVideoURL;
+const formatFileSize = size => {
+  if (typeof size !== 'number') {
+    return '';
+  }
+  if (size >= _constants2.ONE_GB) {
+    return (size / _constants2.ONE_GB).toFixed(1) + ' G';
+  }
+  if (size >= _constants2.ONE_MB) {
+    return (size / _constants2.ONE_MB).toFixed(1) + ' M';
+  }
+  if (size >= _constants2.ONE_KB) {
+    return (size / _constants2.ONE_KB).toFixed(1) + ' K';
+  }
+  return size.toFixed(1) + ' B';
+};
+exports.formatFileSize = formatFileSize;
+const videoFileIcon = () => {
+  const server = _context.default.getSetting('serviceUrl');
+  return `${server}/media/img/file/256/video.png`;
+};
+exports.videoFileIcon = videoFileIcon;

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

@@ -0,0 +1,72 @@
+.video-loading-placeholder {
+  background-color: #F2F2F2;
+  width: 100%;
+  height: 45px;
+  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: 670px;
+  display: flex;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+.sdoc-video-inner .sdoc-video-element{
+  width: 670px;
+}
+
+.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 _plugin = _interopRequireDefault(require("./plugin"));
+var _menu = _interopRequireDefault(require("./menu"));
+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,53 @@
+"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 _helpers = require("../helpers");
+var _constants = require("../../../constants");
+var _constants2 = require("../../../../constants");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+const VideoMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    eventBus
+  } = _ref;
+  const disabled = (0, _helpers.isInsertVideoMenuDisabled)(editor, readonly);
+  const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.VIDEO];
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const openLocalVideoDialog = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.LOCAL_VIDEO,
+      editor
+    });
+  }, [editor, 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')))));
+};
+var _default = exports.default = VideoMenu;

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

@@ -0,0 +1,28 @@
+"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 _constants = require("../../constants");
+const withVideo = editor => {
+  const {
+    isVoid
+  } = editor;
+  const newEditor = editor;
+
+  // Make video as void node
+  newEditor.isVoid = elem => {
+    const {
+      type
+    } = elem;
+    if (type === _constants.VIDEO) {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  return newEditor;
+};
+var _default = exports.default = withVideo;

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

@@ -0,0 +1,140 @@
+"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 _slateReact = require("@seafile/slate-react");
+var _slate = require("@seafile/slate");
+var _reactI18next = require("react-i18next");
+var _helpers = require("./helpers");
+require("./index.css");
+const Video = _ref => {
+  var _data$videoFiles$, _data$videoFiles$2, _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 videoFileName = data.videoFiles && ((_data$videoFiles$ = data.videoFiles[0]) === null || _data$videoFiles$ === void 0 ? void 0 : _data$videoFiles$.name) || null;
+  const videoFileSize = data.videoFiles && ((_data$videoFiles$2 = data.videoFiles[0]) === null || _data$videoFiles$2 === void 0 ? void 0 : _data$videoFiles$2.size) || null;
+  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, videoFileName), /*#__PURE__*/_react.default.createElement("div", {
+    className: "file-size"
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _helpers.formatFileSize)(videoFileSize), " \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'
+    }
+  }, /*#__PURE__*/_react.default.createElement("video", {
+    className: "sdoc-video-element",
+    ref: videoRef,
+    src: (0, _helpers.getVideoURL)(data, editor),
+    controls: true,
+    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"
+  }))));
+};
+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/render/custom-element.js

@@ -128,6 +128,13 @@ const CustomRenderElement = props => {
           ...props
         }, editor);
       }
+    case _constants.VIDEO:
+      {
+        const [renderVideo] = _plugins.VideoPlugin.renderElements;
+        return renderVideo({
+          ...props
+        }, editor);
+      }
     case _constants.ELEMENT_TYPE.MULTI_COLUMN:
       {
         const [renderMultiColumn] = _plugins.MultiColumnPlugin.renderElements;

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

@@ -73,6 +73,13 @@ const RenderCommentEditorCustomRenderElement = props => {
           ...props
         }, editor);
       }
+    case _constants.VIDEO:
+      {
+        const [renderVideo] = _plugins.VideoPlugin.renderElements;
+        return renderVideo({
+          ...props
+        }, editor);
+      }
     case _constants.MENTION:
       {
         const [renderMention] = _plugins.MentionPlugin.renderElements;

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

@@ -11,13 +11,14 @@ var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _menu = _interopRequireDefault(require("../../../plugins/image/menu"));
+var _menu2 = _interopRequireDefault(require("../../../plugins/video/menu"));
 var _tableMenu = _interopRequireDefault(require("../../../plugins/table/menu/table-menu"));
-var _menu2 = _interopRequireDefault(require("../../../plugins/link/menu"));
-var _menu3 = _interopRequireDefault(require("../../../plugins/code-block/menu"));
-var _menu4 = _interopRequireDefault(require("../../../plugins/sdoc-link/menu"));
-var _menu5 = _interopRequireDefault(require("../../../plugins/file-link/menu"));
-var _menu6 = _interopRequireDefault(require("../../../plugins/seatable-column/menu"));
-var _menu7 = _interopRequireDefault(require("../../../plugins/seatable-tables/menu"));
+var _menu3 = _interopRequireDefault(require("../../../plugins/link/menu"));
+var _menu4 = _interopRequireDefault(require("../../../plugins/code-block/menu"));
+var _menu5 = _interopRequireDefault(require("../../../plugins/sdoc-link/menu"));
+var _menu6 = _interopRequireDefault(require("../../../plugins/file-link/menu"));
+var _menu7 = _interopRequireDefault(require("../../../plugins/seatable-column/menu"));
+var _menu8 = _interopRequireDefault(require("../../../plugins/seatable-tables/menu"));
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 require("./index.css");
 const InsertToolbar = _ref => {
@@ -93,9 +94,9 @@ const InsertToolbar = _ref => {
     style: {
       maxHeight: window.innerHeight - bottom - 100
     }
-  }, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_tableMenu.default, props), /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_tableMenu.default, props), /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-dropdown-menu-divider"
-  }), editor.columns && /*#__PURE__*/_react.default.createElement(_menu6.default, props), editor.tables && /*#__PURE__*/_react.default.createElement(_menu7.default, props), !editor.tables && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement(_menu5.default, props)))));
+  }), editor.columns && /*#__PURE__*/_react.default.createElement(_menu7.default, props), editor.tables && /*#__PURE__*/_react.default.createElement(_menu8.default, props), !editor.tables && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_menu5.default, props), /*#__PURE__*/_react.default.createElement(_menu6.default, props)))));
 };
 InsertToolbar.defaultProps = {
   isRichEditor: true,

package/dist/basic-sdk/extension/toolbar/insert-element-toolbar/index.js

@@ -51,6 +51,19 @@ const QuickInsertBlockMenu = _ref => {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition]);
+  const onInsertVideoToggle = (0, _react.useCallback)(() => {
+    callback && callback();
+    const eventBus = _eventBus.default.getInstance();
+    if (insertPosition === _constants.INSERT_POSITION.CURRENT) {
+      _slate.Transforms.select(editor, editor.selection.focus);
+    }
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.LOCAL_VIDEO,
+      insertPosition,
+      slateNode
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition]);
   const createTable = (0, _react.useCallback)(size => {
     callback && callback();
     const newInsertPosition = slateNode.type === _constants.ELEMENT_TYPE.LIST_ITEM ? _constants.INSERT_POSITION.AFTER : insertPosition;
@@ -114,6 +127,12 @@ const QuickInsertBlockMenu = _ref => {
     });
     return !!callout;
   }, [editor]);
+  const isDisableVideo = (0, _react.useMemo)(() => {
+    const callout = (0, _core.getAboveBlockNode)(editor, {
+      match: n => [_constants.ELEMENT_TYPE.ORDERED_LIST, _constants.ELEMENT_TYPE.UNORDERED_LIST, _constants.ELEMENT_TYPE.CHECK_LIST_ITEM].includes(n.type)
+    });
+    return !!callout;
+  }, [editor]);
   const onInsertBlockQuote = (0, _react.useCallback)(() => {
     callback && callback();
     (0, _helpers5.insertBlockQuote)(editor, false);
@@ -133,6 +152,14 @@ const QuickInsertBlockMenu = _ref => {
         },
         onClick: onInsertImageToggle
       }),
+      [_constants.VIDEO]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+        disabled: isDisableVideo,
+        key: "sdoc-insert-menu-video",
+        menuConfig: {
+          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.VIDEO]
+        },
+        onClick: onInsertVideoToggle
+      }),
       [_constants.TABLE]:
       /*#__PURE__*/
       // eslint-disable-next-line react/jsx-indent
@@ -231,7 +258,7 @@ const QuickInsertBlockMenu = _ref => {
       });
     });
     return items;
-  }, [isDisableImage, onInsertImageToggle, editor, createTable, openLinkDialog, onInsertBlockQuote, onInsertCodeBlock, isDisableCallout, onInsertCheckList, isEmptyNode, onInsertCallout, onInsertList, onInsert, createMultiColumn]);
+  }, [isDisableImage, isDisableVideo, onInsertImageToggle, editor, createTable, openLinkDialog, onInsertBlockQuote, onInsertCodeBlock, isDisableCallout, onInsertCheckList, isEmptyNode, onInsertCallout, onInsertList, onInsert, createMultiColumn]);
   const getSelectItemDom = selectIndex => {
     const dropDownItemWrapper = downDownWrapperRef.current;
     const currentSelectItem = dropDownItemWrapper.children[selectIndex];

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

@@ -127,10 +127,11 @@ exports.getTopValue = getTopValue;
 const isVoidNode = node => {
   if (!node) return true;
   const hasImage = node.children.find(n => n.type === _constants.IMAGE);
+  const isVideo = node.type === _constants.VIDEO;
   const isTable = node.type === _constants.TABLE;
   const isCodeBlock = node.type === _constants.CODE_BLOCK;
   const isCallout = node.type === _constants.CALL_OUT;
-  return _slate.Node.string(node) === '' && !hasImage && !isTable && !isCodeBlock && !isCallout;
+  return _slate.Node.string(node) === '' && !hasImage && !isVideo && !isTable && !isCodeBlock && !isCallout;
 };
 exports.isVoidNode = isVoidNode;
 const isNotSupportTransform = node => {

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

@@ -48,6 +48,18 @@ const InsertBlockMenu = _ref => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition]);
+  const onInsertVideoToggle = (0, _react.useCallback)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    if (insertPosition === _constants.INSERT_POSITION.CURRENT) {
+      _slate.Transforms.select(editor, editor.selection.focus);
+    }
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.LOCAL_VIDEO,
+      insertPosition,
+      slateNode
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition]);
   const createTable = (0, _react.useCallback)(size => {
     const newInsertPosition = slateNode.type === _constants.ELEMENT_TYPE.LIST_ITEM ? _constants.INSERT_POSITION.AFTER : insertPosition;
     (0, _helpers2.insertTable)(editor, size, editor.selection, newInsertPosition);
@@ -100,6 +112,12 @@ const InsertBlockMenu = _ref => {
       ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.IMAGE]
     },
     onClick: onInsertImageToggle
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.VIDEO],
+    menuConfig: {
+      ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.VIDEO]
+    },
+    onClick: onInsertVideoToggle
   }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
     isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.TABLE],
     menuConfig: {

package/dist/basic-sdk/socket/socket-manager.js

@@ -109,7 +109,7 @@ class SocketManager {
       const {
         error_type
       } = result;
-      if (error_type === 'load_document_content_error' || error_type === 'save_operations_to_database_error') {
+      if (error_type === 'load_document_content_error' || error_type === 'save_operations_to_database_error' || error_type === 'token_expired') {
         // load_document_content_error: After a short-term reconnection, the content of the document fails to load
         // save_operation_to_database_error: Save operation to database error
         this.dispatchConnectState(error_type);

package/dist/components/tip-message/index.js

@@ -44,6 +44,16 @@ class TipMessage extends _react.default.Component {
         duration: null
       });
     });
+    (0, _defineProperty2.default)(this, "onTokenExpiredError", msg => {
+      const {
+        t
+      } = this.props;
+      const message = t('Token_expired_Please_refresh_the_page');
+      _toast.default.closeAll();
+      _toast.default.danger(message, {
+        duration: null
+      });
+    });
     (0, _defineProperty2.default)(this, "onPendingOpExceedLimit", () => {
       const {
         t
@@ -163,6 +173,7 @@ class TipMessage extends _react.default.Component {
     this.unsubscribeSyncServerOpError = eventBus.subscribe('sync_server_operations_error', this.onSyncServerOperationError);
     this.unsubscribeDocumentLoadError = eventBus.subscribe('load_document_content_error', this.onInternalServerExecError);
     this.unsubscribeOperationsSaveError = eventBus.subscribe('save_operations_to_database_error', this.onInternalServerExecError);
+    this.unsubscribeOperationsSaveError = eventBus.subscribe('token_expired', this.onTokenExpiredError);
 
     // local error
     this.unsubscribePendingOpExceedLimit = eventBus.subscribe('pending_operations_exceed_limit', this.onPendingOpExceedLimit);

package/dist/context.js

@@ -42,6 +42,15 @@ class Context {
         return relative_path;
       });
     });
+    (0, _defineProperty2.default)(this, "uploadLocalVideo", videoFiles => {
+      const docUuid = this.getSetting('docUuid');
+      return this.api.uploadSdocVideo(docUuid, videoFiles).then(res => {
+        const {
+          relative_path
+        } = res.data;
+        return relative_path;
+      });
+    });
     this.settings = null;
     this.sdocServerApi = null;
     this.api = null;

package/package.json

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

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

@@ -571,5 +571,9 @@
   "Three_column": "3 columns",
   "Four_column": "4 columns",
   "Five_column": "5 columns",
-  "Full_width_mode": "Full width mode"
+  "Full_width_mode": "Full width mode",
+  "Video": "Video",
+  "Upload_local_video": "Upload_local_video",
+  "The_current_version_does_not_support_>5MB_video_file": "The_current_version_does_not_support_>5MB_video_file",
+  "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page."
 }

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

@@ -530,7 +530,7 @@
   "has_all_of": "has all of",
   "has_none_of": "has none of",
   "is_exactly": "is exactly",
-  "is_current_user_ID": "is current user's ID",
+  "is_current_user_ID": "ist die aktuelle Benutzer-ID",
   "Current_date": "Current date",
   "Specific_date": "Specific date",
   "x_days_before_current_date": "x days before current date",
@@ -571,5 +571,9 @@
   "Three_column": "3 columns",
   "Four_column": "4 columns",
   "Five_column": "5 columns",
-  "Full_width_mode": "Full width mode"
+  "Full_width_mode": "Full width mode",
+  "Video": "Video",
+  "Upload_local_video": "Upload_local_video",
+  "The_current_version_does_not_support_>5MB_video_file": "The_current_version_does_not_support_>5MB_video_file",
+  "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page."
 }

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

@@ -571,5 +571,9 @@
   "Three_column": "3 columns",
   "Four_column": "4 columns",
   "Five_column": "5 columns",
-  "Full_width_mode": "Full width mode"
+  "Full_width_mode": "Full width mode",
+  "Video": "Video",
+  "Upload_local_video": "Upload_local_video",
+  "The_current_version_does_not_support_>5MB_video_file": "The_current_version_does_not_support_>5MB_video_file",
+  "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page."
 }

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

@@ -571,5 +571,9 @@
   "Three_column": "3 columns",
   "Four_column": "4 columns",
   "Five_column": "5 columns",
-  "Full_width_mode": "Full width mode"
+  "Full_width_mode": "Full width mode",
+  "Video": "Video",
+  "Upload_local_video": "Upload_local_video",
+  "The_current_version_does_not_support_>5MB_video_file": "The_current_version_does_not_support_>5MB_video_file",
+  "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page."
 }

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

@@ -571,5 +571,9 @@
   "Three_column": "3 columns",
   "Four_column": "4 columns",
   "Five_column": "5 columns",
-  "Full_width_mode": "Full width mode"
+  "Full_width_mode": "Full width mode",
+  "Video": "Video",
+  "Upload_local_video": "Upload_local_video",
+  "The_current_version_does_not_support_>5MB_video_file": "The_current_version_does_not_support_>5MB_video_file",
+  "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page."
 }

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

@@ -571,5 +571,9 @@
   "Three_column": "3 columns",
   "Four_column": "4 columns",
   "Five_column": "5 columns",
-  "Full_width_mode": "Full width mode"
+  "Full_width_mode": "Full width mode",
+  "Video": "Video",
+  "Upload_local_video": "Upload_local_video",
+  "The_current_version_does_not_support_>5MB_video_file": "The_current_version_does_not_support_>5MB_video_file",
+  "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page."
 }

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

@@ -571,5 +571,9 @@
   "Three_column": "3 columns",
   "Four_column": "4 columns",
   "Five_column": "5 columns",
-  "Full_width_mode": "Full width mode"
+  "Full_width_mode": "Full width mode",
+  "Video": "Vidéo",
+  "Upload_local_video": "Upload_local_video",
+  "The_current_version_does_not_support_>5MB_video_file": "The_current_version_does_not_support_>5MB_video_file",
+  "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page."
 }

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

@@ -571,5 +571,9 @@
   "Three_column": "3 columns",
   "Four_column": "4 columns",
   "Five_column": "5 columns",
-  "Full_width_mode": "Full width mode"
+  "Full_width_mode": "Full width mode",
+  "Video": "Video",
+  "Upload_local_video": "Upload_local_video",
+  "The_current_version_does_not_support_>5MB_video_file": "The_current_version_does_not_support_>5MB_video_file",
+  "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page."
 }

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

@@ -571,5 +571,9 @@
   "Three_column": "3 столбца",
   "Four_column": "4 столбца",
   "Five_column": "5 столбцов",
-  "Full_width_mode": "Full width mode"
+  "Full_width_mode": "Режим полной ширины",
+  "Video": "Видео",
+  "Upload_local_video": "Загрузка_локального_видео",
+  "The_current_version_does_not_support_>5MB_video_file": "Текущая_версия_не_поддерживает_видео_файл_>5_МБ",
+  "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page."
 }

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

@@ -571,5 +571,9 @@
   "Three_column": "3 列",
   "Four_column": "4 列",
   "Five_column": "5 列",
-  "Full_width_mode": "全宽模式"
+  "Full_width_mode": "全宽模式",
+  "Video": "视频",
+  "Upload_local_video": "上传本地视频",
+  "The_current_version_does_not_support_>5MB_video_file": "当前版本不支持大于 5MB 的视频文件",
+  "Token_expired_Please_refresh_the_page": "Token已过期。请刷新页面。"
 }

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

@@ -14,6 +14,10 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="sdoc-play" unicode="&#59004;" d="M512 896C230.4 896 0 665.6 0 384s230.4-512 512-512 512 230.4 512 512c0 134.4-54.4 265.6-150.4 361.6S646.4 896 512 896z m0-944c-236.8 0-432 192-432 432S275.2 816 512 816s432-192 432-432c0-115.2-44.8-224-124.8-304s-192-128-307.2-128z m185.6 457.6l-134.4 76.8-140.8 83.2c-9.6 3.2-19.2 3.2-25.6-3.2-6.4-6.4-12.8-16-9.6-25.6v-320c0-9.6 3.2-19.2 9.6-25.6s16-6.4 25.6-3.2l140.8 83.2 134.4 76.8c9.6 6.4 12.8 16 12.8 25.6s-6.4 28.8-12.8 32z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-video" unicode="&#59003;" d="M969.6 832c28.8 0 54.4-25.6 54.4-57.6v-784c0-32-25.6-57.6-54.4-57.6H54.4C25.6-64 0-38.4 0-6.4V774.4C0 806.4 25.6 832 54.4 832h915.2zM928 736H96v-704h832V736zM348.8 608l380.8-227.2-380.8-227.2V608z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="sdoc-mark-as-resolved" unicode="&#59002;" d="M512 896c281.6 0 512-230.4 512-512s-230.4-512-512-512S0 102.4 0 384 230.4 896 512 896z m0-96C281.6 800 96 614.4 96 384s185.6-416 416-416 416 185.6 416 416S742.4 800 512 800z m272-243.2c19.2-22.4 16-54.4 0-70.4-6.4-6.4-64-70.4-124.8-134.4l-22.4-25.6c-57.6-64-115.2-121.6-124.8-134.4-22.4-25.6-44.8-35.2-70.4-35.2-25.6 0-44.8 9.6-64 28.8s-121.6 140.8-140.8 160-12.8 54.4 6.4 70.4 51.2 16 70.4-3.2c12.8-12.8 54.4-60.8 131.2-144 169.6 182.4 259.2 281.6 268.8 291.2 16 19.2 51.2 19.2 70.4-3.2z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-multi-column" unicode="&#59001;" d="M236.8 864l160-416h-73.6l-38.4 105.6H112L73.6 448H0L160 864h76.8zM198.4 790.4L131.2 608h134.4L198.4 790.4zM0 352h448v-64H0v64z m0-128h448v-64H0v64z m0-128h448v-64H0v64z m0-128h320v-64H0v64zM768 864c41.6 0 73.6-9.6 96-28.8 22.4-19.2 32-44.8 32-73.6 0-22.4-6.4-41.6-16-60.8-12.8-16-28.8-28.8-48-35.2 28.8-6.4 48-16 60.8-32 12.8-16 19.2-38.4 19.2-67.2 0-41.6-16-73.6-41.6-92.8-25.6-16-57.6-25.6-102.4-25.6h-192V864h192z m-9.6-230.4h-115.2v-128h112c25.6 0 44.8 3.2 60.8 12.8 19.2 9.6 28.8 25.6 28.8 51.2 0 22.4-6.4 41.6-19.2 51.2-12.8 6.4-35.2 12.8-67.2 12.8z m-9.6 176h-105.6v-118.4h105.6c28.8 0 48 6.4 60.8 16 12.8 9.6 19.2 25.6 19.2 48 0 19.2-6.4 35.2-19.2 41.6-12.8 6.4-32 12.8-60.8 12.8zM576 352h448v-64H576v64z m0-128h448v-64H576v64z m0-128h448v-64H576v64z m0-128h320v-64H576v64z"  horiz-adv-x="1024" />

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

@@ -1,14 +1,11 @@
 @font-face {
-  font-family: "sdocfont";
-  /* Project id 4097705 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1729735524150');
-  /* IE9 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1729735524150#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */
-    url('./sdoc-editor-font/iconfont.woff2?t=1729735524150') format('woff2'),
-    url('./sdoc-editor-font/iconfont.woff?t=1729735524150') format('woff'),
-    url('./sdoc-editor-font/iconfont.ttf?t=1729735524150') format('truetype'),
-    url('./sdoc-editor-font/iconfont.svg?t=1729735524150#sdocfont') format('svg');
+  font-family: "sdocfont"; /* Project id 4097705 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1732000106128'); /* IE9 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1732000106128#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./sdoc-editor-font/iconfont.woff2?t=1732000106128') format('woff2'),
+       url('./sdoc-editor-font/iconfont.woff?t=1732000106128') format('woff'),
+       url('./sdoc-editor-font/iconfont.ttf?t=1732000106128') format('truetype'),
+       url('./sdoc-editor-font/iconfont.svg?t=1732000106128#sdocfont') format('svg');
 }
 
 .sdocfont {
@@ -19,6 +16,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sdoc-play:before {
+  content: "\e67c";
+}
+
+.sdoc-video:before {
+  content: "\e67b";
+}
+
 .sdoc-mark-as-resolved:before {
   content: "\e67a";
 }