@seafile/sdoc-editor 1.0.211 → 1.0.212-alph-0.0.2

package/dist/basic-sdk/editor/revision-editor.js

@@ -66,6 +66,7 @@ const RevisionEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [editorRef]);
   if (isShowChanges) {
+    console.log('isShowchange', isShowChanges);
     return /*#__PURE__*/_react.default.createElement(_views.RevisionDiffViewer, {
       editor: editor,
       revisionContent: revisionContent,

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

@@ -252,7 +252,7 @@ const FileLinkInsertDialog = _ref => {
       }
     }, /*#__PURE__*/_react.default.createElement("img", {
       className: "file-item-img",
-      src: (0, _helpers2.sdocFileIcon)(),
+      src: (0, _helpers2.getSdocFileIcon)(),
       alt: ""
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "file-item-name"

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

@@ -23,6 +23,7 @@ var _index4 = _interopRequireDefault(require("../../../../components/toast/index
 var _index5 = require("../../plugins/video/constants/index.js");
 var _constants3 = require("../../../../basic-sdk/constants");
 var _index6 = _interopRequireDefault(require("../../plugins/ai/ai-module/index.js"));
+var _index7 = _interopRequireDefault(require("../../plugins/video/dialog/add-video-link-dialog/index.js"));
 const InsertElementDialog = _ref => {
   let {
     editor
@@ -32,6 +33,7 @@ const InsertElementDialog = _ref => {
   const [insertPosition, setInsertPosition] = (0, _react.useState)(_constants2.INSERT_POSITION.CURRENT);
   const [slateNode, setSlateNode] = (0, _react.useState)(null);
   const [insertLinkCallback, setInsertLinkCallback] = (0, _react.useState)(null);
+  const [insertVideoCallback, setInsertVideoCallback] = (0, _react.useState)(null);
   const [validEditor, setValidEditor] = (0, _react.useState)(editor);
   const [linkTitle, setLinkTitle] = (0, _react.useState)('');
   const [handleSubmit, setHandleSubmit] = (0, _react.useState)(() => void 0);
@@ -90,6 +92,7 @@ const InsertElementDialog = _ref => {
       slateNode,
       insertFileLinkCallback,
       insertSdocFileLinkCallback,
+      insertVideo,
       editor: paramEditor,
       linkTitle,
       // link shortcut wrapping link
@@ -103,6 +106,9 @@ const InsertElementDialog = _ref => {
       insertSdocFileLinkCallback,
       insertFileLinkCallback
     });
+    setInsertVideoCallback({
+      insertVideo
+    });
     setLinkTitle(linkTitle);
     setHandleSubmit(handleSubmit);
     // Apply for comment editor, as it has a different editor instance
@@ -124,6 +130,7 @@ const InsertElementDialog = _ref => {
     setElement('');
     setDialogType('');
     setInsertLinkCallback(null);
+    setInsertVideoCallback(null);
     setValidEditor(null);
     setLinkTitle('');
   }, []);
@@ -169,6 +176,20 @@ const InsertElementDialog = _ref => {
         };
         return /*#__PURE__*/_react.default.createElement(_index.default, fileLinkProps);
       }
+    case _constants2.ELEMENT_TYPE.VIDEO:
+      {
+        const videoProps = {
+          editor: validEditor,
+          dialogType,
+          insertVideoCallback,
+          closeDialog
+        };
+        return /*#__PURE__*/_react.default.createElement(_index.default, videoProps);
+      }
+    case _constants2.ELEMENT_TYPE.VIDEO_LINK:
+      {
+        return /*#__PURE__*/_react.default.createElement(_index7.default, props);
+      }
     case _constants2.LOCAL_IMAGE:
       {
         return /*#__PURE__*/_react.default.createElement("input", {

package/dist/basic-sdk/extension/commons/select-file-dialog/helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sdocFileIcon = exports.addDataToTree = void 0;
+exports.getVideoFileIcon = exports.getSdocFileIcon = exports.addDataToTree = void 0;
 var _context = _interopRequireDefault(require("../../../../context"));
 const addDataToTree = (treeData, indexId, childrenData, path) => {
   for (let i = 0; i < treeData.length; i++) {
@@ -24,8 +24,13 @@ const addDataToTree = (treeData, indexId, childrenData, path) => {
   return treeData;
 };
 exports.addDataToTree = addDataToTree;
-const sdocFileIcon = () => {
+const getSdocFileIcon = () => {
   const server = _context.default.getSetting('serviceUrl');
   return `${server}/media/img/file/256/sdoc.png`;
 };
-exports.sdocFileIcon = sdocFileIcon;
+exports.getSdocFileIcon = getSdocFileIcon;
+const getVideoFileIcon = () => {
+  const server = _context.default.getSetting('serviceUrl');
+  return `${server}/media/img/file/256/video.png`;
+};
+exports.getVideoFileIcon = getVideoFileIcon;

package/dist/basic-sdk/extension/commons/select-file-dialog/index.js

@@ -21,9 +21,9 @@ const SelectSdocFileDialog = _ref => {
     editor,
     dialogType,
     closeDialog,
-    insertLinkCallback
+    insertLinkCallback,
+    insertVideoCallback
   } = _ref;
-  const modalTitle = dialogType === _constants.ELEMENT_TYPE.FILE_LINK ? 'Select_file' : 'Select_sdoc_document';
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
@@ -31,6 +31,20 @@ const SelectSdocFileDialog = _ref => {
   const [temSearchContent, setTemSearchContent] = (0, _react.useState)('');
   const [searchContent, setSearchContent] = (0, _react.useState)('');
   const [isOpenSearch, setIsOpenSearch] = (0, _react.useState)(false);
+  let modalTitle;
+  switch (dialogType) {
+    case _constants.ELEMENT_TYPE.FILE_LINK:
+      modalTitle = 'Select_file';
+      break;
+    case _constants.ELEMENT_TYPE.SDOC_LINK:
+      modalTitle = 'Select_sdoc_document';
+      break;
+    case _constants.ELEMENT_TYPE.VIDEO:
+      modalTitle = 'Select_video_file';
+      break;
+    default:
+      break;
+  }
   const onSelectedFile = (0, _react.useCallback)(fileInfo => {
     setCurrentSelectedFile(fileInfo);
   }, []);
@@ -38,13 +52,31 @@ const SelectSdocFileDialog = _ref => {
     const {
       insertFileLinkCallback,
       insertSdocFileLinkCallback
-    } = insertLinkCallback;
-    if (dialogType === _constants.ELEMENT_TYPE.FILE_LINK) {
-      insertFileLinkCallback && insertFileLinkCallback(editor, fileInfo.name, fileInfo.file_uuid);
-    } else {
-      insertSdocFileLinkCallback && insertSdocFileLinkCallback(editor, fileInfo.name, fileInfo.file_uuid);
+    } = insertLinkCallback || {};
+    const {
+      insertVideo
+    } = insertVideoCallback || {};
+    switch (dialogType) {
+      case _constants.ELEMENT_TYPE.FILE_LINK:
+        insertFileLinkCallback && insertFileLinkCallback(editor, fileInfo.name, fileInfo.file_uuid);
+        break;
+      case _constants.ELEMENT_TYPE.SDOC_LINK:
+        insertSdocFileLinkCallback && insertSdocFileLinkCallback(editor, fileInfo.name, fileInfo.file_uuid);
+        break;
+      case _constants.ELEMENT_TYPE.VIDEO:
+        const repoID = _context.default.getSetting('repoID');
+        const fileServerRoot = _context.default.getSetting('fileServerRoot');
+        // Get seafile's video download url as src
+        const url = `${fileServerRoot}repos/${repoID}/files${fileInfo.path}/?op=download`;
+        const encodedUrl = encodeURI(url);
+        insertVideo && insertVideo(editor, [{
+          name: fileInfo.name
+        }], [encodedUrl]);
+        break;
+      default:
+        break;
     }
-  }, [insertLinkCallback, dialogType, editor]);
+  }, [insertLinkCallback, insertVideoCallback, dialogType, editor]);
   const onSubmit = (0, _react.useCallback)(() => {
     if (!currentSelectedFile) return;
     const {
@@ -53,6 +85,14 @@ const SelectSdocFileDialog = _ref => {
     let fileInfo = {
       ...currentSelectedFile
     };
+
+    // Insert video element in sdoc
+    if (dialogType === _constants.ELEMENT_TYPE.VIDEO) {
+      insertFile(fileInfo);
+      closeDialog();
+      return;
+    }
+
     // File has no id
     if (!file_uuid || file_uuid === '') {
       _context.default.getSdocLocalFileId(currentSelectedFile.path).then(res => {

package/dist/basic-sdk/extension/commons/select-file-dialog/local-files/index.css

@@ -36,6 +36,7 @@
   left: 0;
 }
 
+.sdoc-file-icon-container .video-file-img,
 .sdoc-file-icon-container .sdoc-file-img {
   position: absolute;
   width: 21.6px;

package/dist/basic-sdk/extension/commons/select-file-dialog/local-files/index.js

@@ -155,7 +155,7 @@ const LocalFiles = _ref => {
         className: "sdoc-folder-children"
       }, ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) === 0 && /*#__PURE__*/_react.default.createElement("div", {
         className: "sdoc-folder-children-empty"
-      }, `(${t('Empty')})`), ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), type === 'file' && /*#__PURE__*/_react.default.createElement("div", {
+      }, `(${t('Empty')})`), ((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && renderFileTree(item.children))), ['file', 'video'].includes(type) && /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)('sdoc-file-info', {
           'active': selected
         }),
@@ -170,7 +170,11 @@ const LocalFiles = _ref => {
         })
       }), fileType === 'sdoc' && /*#__PURE__*/_react.default.createElement("img", {
         className: "sdoc-file-img",
-        src: (0, _helpers.sdocFileIcon)(),
+        src: (0, _helpers.getSdocFileIcon)(),
+        alt: ""
+      }), fileType === 'video' && /*#__PURE__*/_react.default.createElement("img", {
+        className: "video-file-img",
+        src: (0, _helpers.getVideoFileIcon)(),
         alt: ""
       })), /*#__PURE__*/_react.default.createElement("span", {
         className: "sdoc-file-name"

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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 = exports.ASK_AI = void 0;
+exports.WIKI_LINK = exports.VIDEO_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 = exports.ASK_AI = void 0;
 const BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 const TITLE = exports.TITLE = 'title';
 const SUBTITLE = exports.SUBTITLE = 'subtitle';
@@ -42,6 +42,7 @@ const MENTION = exports.MENTION = 'mention';
 const MENTION_TEMP = exports.MENTION_TEMP = 'mention_temp';
 const FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK_INSET_INPUT_TEMP = 'file_link_insert_input_temp';
 const QUICK_INSERT = exports.QUICK_INSERT = 'quick_insert';
+const VIDEO_LINK = exports.VIDEO_LINK = 'video_link';
 const SEATABLE_COLUMN = exports.SEATABLE_COLUMN = 'seatable_column';
 const SEATABLE_TABLE = exports.SEATABLE_TABLE = 'seatable_table';
 const ASK_AI = exports.ASK_AI = 'ask_ai';

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

@@ -532,7 +532,8 @@ const LIST_ITEM_SUPPORTED_TRANSFORMATION = exports.LIST_ITEM_SUPPORTED_TRANSFORM
 const ADD_POSITION_OFFSET_TYPE = exports.ADD_POSITION_OFFSET_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.IMAGE_BLOCK];
 const FILE_TYPE = exports.FILE_TYPE = {
   [_elementType.FILE_LINK]: 'file',
-  [_elementType.SDOC_LINK]: 'sdoc'
+  [_elementType.SDOC_LINK]: 'sdoc',
+  [_elementType.VIDEO]: 'video'
 };
 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_TABLE, _elementType.MULTI_COLUMN];
 const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP = {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unwrapLinkNode = exports.sdocFileIcon = exports.removeTempInput = exports.removeShortCutSymbol = exports.onCopySdocLinkNode = exports.isTriggeredByShortcut = exports.isMenuDisabled = exports.insertTextWhenRemoveFileNameCollector = exports.insertTempInput = exports.insertSdocFileLink = exports.getUrl = exports.getType = exports.getSdocLinkEntry = exports.getNewFileListData = exports.getFileSearchInputEntry = exports.getBeforeText = exports.generateSdocFileNode = void 0;
+exports.unwrapLinkNode = exports.removeTempInput = exports.removeShortCutSymbol = exports.onCopySdocLinkNode = exports.isTriggeredByShortcut = exports.isMenuDisabled = exports.insertTextWhenRemoveFileNameCollector = exports.insertTempInput = exports.insertSdocFileLink = exports.getUrl = exports.getType = exports.getSdocLinkEntry = exports.getSdocFileIcon = exports.getNewFileListData = exports.getFileSearchInputEntry = exports.getBeforeText = exports.generateSdocFileNode = void 0;
 var _slateReact = require("@seafile/slate-react");
 var _slate = require("@seafile/slate");
 var _slugid = _interopRequireDefault(require("slugid"));
@@ -274,11 +274,11 @@ const insertTextWhenRemoveFileNameCollector = (editor, searchInputNode) => {
   removeTempInput(editor, searchInputNode);
 };
 exports.insertTextWhenRemoveFileNameCollector = insertTextWhenRemoveFileNameCollector;
-const sdocFileIcon = () => {
+const getSdocFileIcon = () => {
   const server = _context.default.getSetting('serviceUrl');
   return `${server}/media/img/file/256/sdoc.png`;
 };
-exports.sdocFileIcon = sdocFileIcon;
+exports.getSdocFileIcon = getSdocFileIcon;
 const getSdocLinkEntry = function (editor) {
   let at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : editor.selection;
   const aboveNodeEntry = _slate.Editor.above(editor, {

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

@@ -147,7 +147,7 @@ const SdocFileLink = _ref => {
     style: style
   }, element.type !== _elementType.WIKI_LINK && /*#__PURE__*/_react.default.createElement("img", {
     className: "file-link-img",
-    src: (0, _helpers.sdocFileIcon)(),
+    src: (0, _helpers.getSdocFileIcon)(),
     alt: ""
   }), element.type === _elementType.WIKI_LINK && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement("span", null, icon), !icon && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDir ? /*#__PURE__*/_react.default.createElement("span", {
     className: "sf3-font sf3-font-files2"

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

@@ -0,0 +1,99 @@
+"use strict";
+
+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");
+const AddVideoLinkDialog = _ref => {
+  let {
+    editor,
+    className,
+    closeDialog,
+    handleSubmit
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const [linkErrorMessage, setLinkErrorMessage] = (0, _react.useState)('');
+  const [url, setURL] = (0, _react.useState)('');
+  const isValidVideoLink = link => {
+    const videoRegex = /v\.qq\.com|youtube\.com|v\.youku\.com|bilibili\.com/i;
+    return videoRegex.test(link);
+  };
+  const submit = (0, _react.useCallback)(() => {
+    setLinkErrorMessage('');
+    if (!url) {
+      setLinkErrorMessage(t('The_link_address_is_required'));
+      return;
+    }
+    if (!isValidVideoLink(url)) {
+      setLinkErrorMessage(t('The_link_address_is_invalid'));
+      return;
+    }
+    (0, _helpers.insertVideo)(editor, [{
+      name: url,
+      isEmbeddableLink: true
+    }], [url]);
+    handleSubmit && handleSubmit();
+    closeDialog();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, url]);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if (event.keyCode === 13) {
+      event.preventDefault();
+      submit();
+      return;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, url]);
+  const handleUrlChange = (0, _react.useCallback)(event => {
+    const videoUrl = event.target.value;
+    if (videoUrl === url) return;
+    setURL(videoUrl);
+  }, [url]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    isOpen: true,
+    autoFocus: false,
+    toggle: closeDialog,
+    className: className,
+    zIndex: 1071,
+    returnFocusAfterClose: false
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+    toggle: closeDialog
+  }, t('Insert_link')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+    for: "addLink"
+  }, t('Link_address')), /*#__PURE__*/_react.default.createElement("input", {
+    onKeyDown: onKeyDown,
+    autoFocus: true,
+    type: "url",
+    className: "form-control",
+    id: "addVideoLink",
+    value: url || '',
+    onChange: handleUrlChange
+  }), linkErrorMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
+    color: "danger",
+    className: "mt-2"
+  }, t(linkErrorMessage))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: 'center',
+      fontSize: '12px',
+      color: '#787774'
+    }
+  }, t('Support_Youtube_Tencent_Bilibili_and_more')))), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "secondary",
+    onClick: closeDialog
+  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "primary",
+    disabled: false,
+    onClick: submit
+  }, t('Add_link'))));
+};
+var _default = exports.default = AddVideoLinkDialog;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.videoFileIcon = exports.isInsertVideoMenuDisabled = exports.insertVideo = exports.getVideoURL = exports.generateVideoNode = exports.formatFileSize = void 0;
+exports.videoFileIcon = exports.parseVideoLink = 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");
@@ -43,26 +43,79 @@ const isInsertVideoMenuDisabled = (editor, readonly) => {
   return false;
 };
 exports.isInsertVideoMenuDisabled = isInsertVideoMenuDisabled;
-const generateVideoNode = (src, videoFiles) => {
+const generateVideoNode = (src, videoInfo) => {
   const element = (0, _core.generateEmptyElement)(_constants.VIDEO);
-  return {
+  const {
+    name,
+    size,
+    is_embeddable_link
+  } = videoInfo;
+  return [{
     ...element,
     data: {
       src,
-      videoFiles
+      name,
+      size,
+      is_embeddable_link
     }
-  };
+  }];
 };
 exports.generateVideoNode = generateVideoNode;
+const parseVideoLink = url => {
+  if (!url) return false;
+
+  // Youtube url conversion
+  if (url.includes('youtube.com')) {
+    const videoId = new URL(url).searchParams.get('v');
+    const videoUrl = videoId ? `https://www.youtube.com/embed/${videoId}/?rel=0` : false;
+    return videoUrl;
+  }
+
+  // Tencent url conversion
+  if (url.includes('v.qq.com')) {
+    const vidMatch = url.match(/\/([^\/]+)\.html/);
+    const videoUrl = vidMatch !== null && vidMatch !== void 0 && vidMatch[1] ? `https://v.qq.com/txp/iframe/player.html?vid=${vidMatch[1]}` : false;
+    return videoUrl;
+  }
+
+  // Bilibili url conversion
+  if (url.includes('bilibili.com')) {
+    const vidMatch = url.match(/\/video\/(BV[0-9A-Za-z]+)/);
+    const videoUrl = vidMatch !== null && vidMatch !== void 0 && vidMatch[1] ? `https://player.bilibili.com/player.html?bvid=${vidMatch[1]}` : false;
+    return videoUrl;
+  }
+
+  // Youku url conversion
+  if (url.includes('v.youku.com')) {
+    const vidMatch = url.match(/id_([A-Za-z0-9=]+)\.html/);
+    const videoUrl = vidMatch !== null && vidMatch !== void 0 && vidMatch[1] ? `https://player.youku.com/embed/${vidMatch[1]}` : false;
+    return videoUrl;
+  }
+
+  // Unsupported url
+  return false;
+};
+exports.parseVideoLink = parseVideoLink;
 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 videoInfo = {
+    name: videoFiles[0].name || null,
+    size: videoFiles[0].size || null,
+    is_embeddable_link: videoFiles[0].isEmbeddableLink || false
+  };
+  let videoNodes;
+  // Return when embedding an invalid youtube, tencent or bilibili video url
+  if (videoInfo.is_embeddable_link) {
+    const parsedSrc = parseVideoLink(srcList[0]);
+    if (!parsedSrc) return;
+    videoNodes = generateVideoNode(parsedSrc, videoInfo);
+  } else {
+    videoNodes = generateVideoNode(srcList[0], videoInfo);
+  }
   const validSelection = selection || editor.selection;
   let path = _slate.Editor.path(editor, validSelection);
   if (position === _constants.INSERT_POSITION.AFTER) {

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

@@ -1,7 +1,7 @@
 .video-loading-placeholder {
   background-color: #F2F2F2;
   width: 100%;
-  height: 45px;
+  height: auto;
   display: flex;
   align-items: center;
 }
@@ -49,14 +49,15 @@
 
 .sdoc-video-wrapper .sdoc-video-inner {
   position: relative;
-  width: 670px;
+  width: 100%;
+  aspect-ratio: 16 / 9;
   display: flex;
   margin-top: 5px;
   margin-bottom: 10px;
 }
 
 .sdoc-video-inner .sdoc-video-element{
-  width: 670px;
+  width: 100%;
 }
 
 .sdoc-video-inner .sdoc-video-element:focus-visible {

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

@@ -17,6 +17,7 @@ const VideoMenu = _ref => {
   let {
     editor,
     readonly,
+    toggle,
     eventBus
   } = _ref;
   const disabled = (0, _helpers.isInsertVideoMenuDisabled)(editor, readonly);
@@ -30,6 +31,22 @@ const VideoMenu = _ref => {
       editor
     });
   }, [editor, eventBus]);
+  const addVideoLink = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.ELEMENT_TYPE.VIDEO_LINK,
+      editor
+    });
+    toggle && toggle();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, eventBus]);
+  const openSelectVideoFileDialog = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.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,
@@ -48,6 +65,12 @@ const VideoMenu = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: openLocalVideoDialog
-  }, t('Upload_local_video')))));
+  }, 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/render-elem.js

@@ -12,7 +12,7 @@ var _reactI18next = require("react-i18next");
 var _helpers = require("./helpers");
 require("./index.css");
 const Video = _ref => {
-  var _data$videoFiles$, _data$videoFiles$2, _videoStates$element$;
+  var _videoStates$element$;
   let {
     element,
     editor
@@ -24,8 +24,9 @@ const Video = _ref => {
   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 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 handlePlay = () => {
     setVideoStates(prev => ({
       ...prev,
@@ -75,9 +76,9 @@ const Video = _ref => {
     alt: ""
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "video-file-info"
-  }, /*#__PURE__*/_react.default.createElement("div", null, videoFileName), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", null, videoName), /*#__PURE__*/_react.default.createElement("div", {
     className: "file-size"
-  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _helpers.formatFileSize)(videoFileSize), " \u2014 "), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__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"
@@ -92,10 +93,10 @@ const Video = _ref => {
     style: {
       visibility: isLoaded ? 'visible' : 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement("video", {
+  }, !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, editor),
+    src: (0, _helpers.getVideoURL)(data),
     controls: true,
     onClick: onClickVideo,
     draggable: false,
@@ -111,6 +112,18 @@ const Video = _ref => {
       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);

package/dist/basic-sdk/views/revision-diff-viewer.js

@@ -31,6 +31,8 @@ const RevisionDiffViewer = _ref => {
       let originContent = JSON.parse(originContentString);
       originContent = (0, _formatSdocContent.formatSdocContent)(originContent);
       const diff = (0, _diff.getDiff)(revisionContent, originContent);
+      console.log(revisionContent, originContent);
+      console.log('diff', diff);
       setDiff(diff);
       didMountCallback && didMountCallback(diff);
       setIsLoading(false);

package/dist/components/doc-operations/revision-operations/changes-count/index.js

@@ -33,6 +33,7 @@ const ChangesCount = _ref => {
         }
       }, 100);
     }).then(() => {
+      console.log('allchange', allChanges);
       if (allChanges.changes.length !== 0) {
         const topLevelChanges = (0, _diff.getTopLevelChanges)(allChanges.changes);
         const changes = (0, _diff.getMergedChanges)(topLevelChanges, allChanges.value);
@@ -75,10 +76,12 @@ const ChangesCount = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [changes, currentDiffIndex]);
   if (!Array.isArray(changes) || changes.length === 0) {
+    console.log('change', changes);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "sdoc-revision-changes-container d-flex align-items-center pl-2 pr-2 ml-4"
     }, t('No_changes'));
   }
+  console.log('changes', changes);
   const changesCount = changes.length;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-revision-changes-container d-flex align-items-center ml-4"