@seafile/sdoc-editor 2.0.82 → 2.0.83

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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _helpers = require("../../helpers");
+var AddVideoLinkDialog = function AddVideoLinkDialog(_ref) {
+  var editor = _ref.editor,
+    className = _ref.className,
+    closeDialog = _ref.closeDialog,
+    handleSubmit = _ref.handleSubmit;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    linkErrorMessage = _useState2[0],
+    setLinkErrorMessage = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    url = _useState4[0],
+    setURL = _useState4[1];
+  var isValidVideoLink = function isValidVideoLink(link) {
+    var videoRegex = /v\.qq\.com|youtube\.com|v\.youku\.com|bilibili\.com/i;
+    return videoRegex.test(link);
+  };
+  var submit = (0, _react.useCallback)(function () {
+    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]);
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.keyCode === 13) {
+      event.preventDefault();
+      submit();
+      return;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, url]);
+  var handleUrlChange = (0, _react.useCallback)(function (event) {
+    var videoUrl = event.target.value;
+    if (videoUrl === url) return;
+    setURL(videoUrl);
+  }, [url]);
+  var close = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: "sdoc-add-link-close-icon",
+      onClick: closeDialog
+    }, /*#__PURE__*/_react["default"].createElement("i", {
+      className: "sdocfont sdoc-sm-close",
+      "aria-hidden": "true"
+    }));
+  }, [closeDialog]);
+  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, {
+    close: close
+  }, 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/extension/plugins/video/helpers.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.videoFileIcon = exports.parseVideoLink = exports.isInsertVideoMenuDisabled = exports.insertVideo = exports.getVideoURL = exports.generateVideoNode = exports.formatFileSize = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _slate = require("@seafile/slate");
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _context = _interopRequireDefault(require("../../../context"));
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _constants2 = require("./constants");
+var isInsertVideoMenuDisabled = exports.isInsertVideoMenuDisabled = function isInsertVideoMenuDisabled(editor, readonly) {
+  if (readonly) return true;
+  var selection = editor.selection;
+  if (selection === null) return true;
+  if (!_slate.Range.isCollapsed(selection)) return true;
+  var _Editor$nodes = _slate.Editor.nodes(editor, {
+      match: function match(n) {
+        var type = (0, _core.getNodeType)(n);
+        if (!type && (0, _core.isTextNode)(n) && n.id) {
+          var 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 (type === _constants.MULTI_COLUMN) return true;
+        if (type === _constants.BLOCKQUOTE) return true;
+        if (type === _constants.CALL_OUT) return true;
+        if (type === _constants.TABLE) return true;
+        if (_slate.Editor.isVoid(editor, n)) return true;
+        return false;
+      },
+      universal: true
+    }),
+    _Editor$nodes2 = (0, _slicedToArray2["default"])(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+  if (match) return true;
+  return false;
+};
+var generateVideoNode = exports.generateVideoNode = function generateVideoNode(src, videoInfo) {
+  var element = (0, _core.generateEmptyElement)(_constants.VIDEO);
+  var name = videoInfo.name,
+    size = videoInfo.size,
+    is_embeddable_link = videoInfo.is_embeddable_link;
+  return [(0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element), {}, {
+    data: {
+      src: src,
+      name: name,
+      size: size,
+      is_embeddable_link: is_embeddable_link
+    }
+  })];
+};
+var parseVideoLink = exports.parseVideoLink = function parseVideoLink(url) {
+  if (!url) return false;
+
+  // Youtube url conversion
+  if (url.includes('youtube.com')) {
+    var videoId = new URL(url).searchParams.get('v');
+    var videoUrl = videoId ? "https://www.youtube.com/embed/".concat(videoId, "/?rel=0") : false;
+    return videoUrl;
+  }
+
+  // Tencent url conversion
+  if (url.includes('v.qq.com')) {
+    var vidMatch = url.match(/\/([^\/]+)\.html/);
+    var _videoUrl = vidMatch !== null && vidMatch !== void 0 && vidMatch[1] ? "https://v.qq.com/txp/iframe/player.html?vid=".concat(vidMatch[1]) : false;
+    return _videoUrl;
+  }
+
+  // Bilibili url conversion
+  if (url.includes('bilibili.com')) {
+    var _vidMatch = url.match(/\/video\/(BV[0-9A-Za-z]+)/);
+    var _videoUrl2 = _vidMatch !== null && _vidMatch !== void 0 && _vidMatch[1] ? "https://player.bilibili.com/player.html?bvid=".concat(_vidMatch[1]) : false;
+    return _videoUrl2;
+  }
+
+  // Youku url conversion
+  if (url.includes('v.youku.com')) {
+    var _vidMatch2 = url.match(/id_([A-Za-z0-9=]+)\.html/);
+    var _videoUrl3 = _vidMatch2 !== null && _vidMatch2 !== void 0 && _vidMatch2[1] ? "https://player.youku.com/embed/".concat(_vidMatch2[1]) : false;
+    return _videoUrl3;
+  }
+
+  // Unsupported url
+  return false;
+};
+var insertVideo = exports.insertVideo = function insertVideo(editor, videoFiles, srcList, selection) {
+  var 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;
+  }
+  var videoInfo = {
+    name: videoFiles[0].name || null,
+    size: videoFiles[0].size || null,
+    is_embeddable_link: videoFiles[0].isEmbeddableLink || false
+  };
+  var videoNodes;
+  // Return when embedding an invalid youtube, tencent or bilibili video url
+  if (videoInfo.is_embeddable_link) {
+    var parsedSrc = parseVideoLink(srcList[0]);
+    if (!parsedSrc) return;
+    videoNodes = generateVideoNode(parsedSrc, videoInfo);
+  } else {
+    videoNodes = generateVideoNode(srcList[0], videoInfo);
+  }
+  var validSelection = selection || editor.selection;
+  var path = _slate.Editor.path(editor, validSelection);
+  if (position === _constants.INSERT_POSITION.AFTER) {
+    var p = (0, _core.generateEmptyElement)(_constants.ELEMENT_TYPE.PARAGRAPH);
+    videoNodes.forEach(function (item, index) {
+      p.children[index] = item;
+    });
+    _slate.Transforms.insertNodes(editor, p, {
+      at: [path[0] + 1]
+    });
+    (0, _core.focusEditor)(editor, [path[0] + 1, 2]);
+    return;
+  }
+  var aboveNodeEntry = (0, _core.getAboveBlockNode)(editor);
+  var nodePath = [aboveNodeEntry[1][0]];
+  var nextPath = _slate.Path.next(nodePath);
+  var 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
+    });
+    var endOfFirstNode = _slate.Editor.start(editor, nextPath);
+    var range = {
+      anchor: endOfFirstNode,
+      focus: endOfFirstNode
+    };
+    (0, _core.focusEditor)(editor, range);
+    return;
+  }
+  var 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);
+};
+var getVideoURL = exports.getVideoURL = function getVideoURL(data) {
+  var url = data.src;
+  if (url && url.startsWith('http')) return url;
+  var serviceUrl = _context["default"].getSetting('serviceUrl');
+  var assetsUrl = _context["default"].getSetting('assetsUrl');
+  return (0, _urlJoin["default"])(serviceUrl, assetsUrl, url);
+};
+var formatFileSize = exports.formatFileSize = function 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';
+};
+var videoFileIcon = exports.videoFileIcon = function videoFileIcon() {
+  var server = _context["default"].getSetting('serviceUrl');
+  return "".concat(server, "/media/img/file/256/video.png");
+};

package/dist/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");
+var VideoPlugin = {
+  type: _constants.VIDEO,
+  nodeType: 'element',
+  editorMenus: [_menu["default"]],
+  editorPlugin: _plugin["default"],
+  renderElements: [_renderElem.renderVideo]
+};
+var _default = exports["default"] = VideoPlugin;

package/dist/extension/plugins/video/menu/index.js

@@ -0,0 +1,73 @@
+"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");
+var VideoMenu = function VideoMenu(_ref) {
+  var editor = _ref.editor,
+    readonly = _ref.readonly,
+    toggle = _ref.toggle,
+    eventBus = _ref.eventBus;
+  var disabled = (0, _helpers.isInsertVideoMenuDisabled)(editor, readonly);
+  var menuConfig = _constants2.MENUS_CONFIG_MAP[_constants2.VIDEO];
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var openLocalVideoDialog = (0, _react.useCallback)(function () {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.LOCAL_VIDEO,
+      editor: editor
+    });
+  }, [editor, eventBus]);
+  var addVideoLink = (0, _react.useCallback)(function () {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.ELEMENT_TYPE.VIDEO_LINK,
+      editor: editor
+    });
+    toggle && toggle();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, eventBus]);
+  var openSelectVideoFileDialog = (0, _react.useCallback)(function () {
+    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/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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _slate = require("@seafile/slate");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _helpers = require("../../toolbar/side-toolbar/helpers");
+var withVideo = function withVideo(editor) {
+  var isVoid = editor.isVoid,
+    onHotKeyDown = editor.onHotKeyDown;
+  var newEditor = editor;
+
+  // Make video as void node
+  newEditor.isVoid = function (elem) {
+    var type = elem.type;
+    if (type === _constants.VIDEO) {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  newEditor.onHotKeyDown = function (event) {
+    var _ref = (0, _core.getSelectedNodeEntryByType)(editor, _constants.VIDEO) || [],
+      _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      videoNode = _ref2[0],
+      path = _ref2[1];
+    if (path) {
+      // Insert empty paragraph node after video when clicking 'enter' on selected video
+      if ((0, _isHotkey["default"])('enter', event)) {
+        event.preventDefault();
+        var emptyParagraph = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+        _slate.Transforms.insertNodes(editor, emptyParagraph, {
+          at: _slate.Path.next(path)
+        });
+        var 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/extension/plugins/video/render-elem.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderVideo = renderVideo;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+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");
+var Video = function Video(_ref) {
+  var _videoStates$element$;
+  var element = _ref.element,
+    editor = _ref.editor;
+  var data = element.data;
+  var videoRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isLoaded = _useState2[0],
+    setIsLoaded = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isSelected = _useState4[0],
+    setIsSelected = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    videoStates = _useState6[0],
+    setVideoStates = _useState6[1];
+  var videoName = (data === null || data === void 0 ? void 0 : data.name) || (data === null || data === void 0 ? void 0 : data.src);
+  var videoSize = data === null || data === void 0 ? void 0 : data.size;
+  var isEmbeddableLink = data === null || data === void 0 ? void 0 : data.is_embeddable_link;
+  var readonly = (0, _slateReact.useReadOnly)();
+  var handlePlay = function handlePlay() {
+    setVideoStates(function (prev) {
+      return (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, prev), {}, (0, _defineProperty2["default"])({}, element.id, false));
+    });
+  };
+  var handlePause = function handlePause() {
+    setVideoStates(function (prev) {
+      return (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, prev), {}, (0, _defineProperty2["default"])({}, element.id, true));
+    });
+  };
+  var isPaused = (_videoStates$element$ = videoStates[element.id]) !== null && _videoStates$element$ !== void 0 ? _videoStates$element$ : true;
+  var handleVideoLoad = function handleVideoLoad() {
+    setIsLoaded(true);
+  };
+  var onClickVideo = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.select(editor, path);
+    setIsSelected(true);
+  }, [editor, element]);
+  var onClickOutside = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    if (videoRef.current && !videoRef.current.contains(e.target)) {
+      setIsSelected(false);
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    var videoElement = videoRef.current;
+    if (videoElement) {
+      videoElement.addEventListener('loadeddata', handleVideoLoad);
+    }
+    document.addEventListener('click', onClickOutside);
+    return function () {
+      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'
+    }
+  }))));
+};
+var SdocVideo = (0, _reactI18next.withTranslation)('sdoc-editor')(Video);
+function renderVideo(props, editor) {
+  var element = props.element,
+    children = props.children,
+    attributes = props.attributes;
+  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
+  }));
+}