@seafile/sdoc-editor 1.0.140 → 1.0.141-alpha2

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

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isInsertVideoMenuDisabled = exports.insertVideo = exports.getVideoURL = exports.getVideoData = exports.generateVideoNode = void 0;
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _slate = require("@seafile/slate");
+var _core = require("../../core");
+var _constants = require("../../constants");
+var _constants2 = require("../../../constants");
+var _context = _interopRequireDefault(require("../../../../context"));
+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_BLOCK);
+  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;
+  }
+
+  // console.log(5, srcList, selection, position);
+  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);
+  console.log(33, position, aboveNodeEntry);
+  const isEmptyParagraph = aboveNodeEntry[0].type === _constants.PARAGRAPH && _slate.Node.string(aboveNodeEntry[0]).length === 0;
+  if (videoNodes.length === 1 && isEmptyParagraph) {
+    const videoNode = videoNodes[0];
+    _slate.Transforms.setNodes(editor, videoNode, {
+      at: validSelection
+    });
+    // generateVideoNode(srcList, videoFiles);
+    // Transforms.setNodes(editor, { type: VIDEO_BLOCK }, { 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;
+  }
+  _slate.Transforms.insertNodes(editor, videoNodes, {
+    at: validSelection
+  });
+  const videoEndSelection = _slate.Path.next(_slate.Path.next(path));
+  (0, _core.focusEditor)(editor, videoEndSelection);
+};
+exports.insertVideo = insertVideo;
+const getVideoURL = (data, editor) => {
+  const {
+    src: url,
+    column_key
+  } = data;
+  // console.log(1, data, column_key);
+
+  // if (column_key) {
+  //   const column = getColumnByKey(editor.columns || [], column_key);
+  //   const { type } = column || {};
+  //   if (type === CellType.IMAGE) {
+  //     const imgUrl = editor.getColumnCellValue(column_key) || '';
+  //     const firstSrc = imgUrl.split(',')[0];
+  //     return firstSrc;
+  //   } else if (type === CellType.DIGITAL_SIGN) {
+  //     const partUrl = editor.getColumnCellValue(column_key) || '';
+  //     const imgUrl = getDigitalSignImgUrl(partUrl);
+  //     return imgUrl;
+  //   }
+  // }
+
+  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 getVideoData = fragmentData => {
+  let videoData = new Set();
+  fragmentData.forEach(item => item.children.forEach(child => {
+    if ((child === null || child === void 0 ? void 0 : child.type) === _constants.VIDEO && !child.data.src.startsWith('http')) {
+      videoData.add(child.data.src.slice(1));
+    }
+  }));
+  return Array.from(videoData);
+};
+exports.getVideoData = getVideoData;

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

@@ -0,0 +1,89 @@
+.sdoc-video-hover-menu-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: auto;
+}
+
+.sdoc-video-hover-menu-container .hover-menu-container {
+  height: 36px;
+  background-color: #fff;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+}
+
+.sdoc-video-hover-menu-container .hover-menu-container>span {
+  padding: 0 8px;
+}
+
+.sdoc-video-hover-menu-container .hover-menu-container>span:not(:last-of-type) {
+  padding: 0 8px;
+  border-right: 1px solid #e5e5e5;
+}
+
+.sdoc-video-hover-menu-container .hover-menu-container .op-item {
+  position: relative;
+  font-size: 12px;
+  color: #212529;
+  padding: 0 5px;
+  border-radius: 2px;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-video-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.sdoc-video-hover-menu-container .hover-menu-container .active {
+  background: #f1f1f1;
+}
+
+.sdoc-video-hover-menu-container .hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #999999;
+}
+
+.sdoc-video-hover-menu-container .sdoc-video-popover {
+  position: absolute;
+  top: 37px;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 101;
+  white-space: nowrap;
+}
+
+.sdoc-video-hover-menu-container .align-popover {
+  left: 80px;
+  min-width: 6rem;
+}
+
+.sdoc-video-hover-menu-container .border-popover {
+  left: 115px;
+  flex-direction: row;
+  height: 80px;
+  align-items: center;
+  padding: 0 8px;
+}
+
+.sdoc-video-hover-menu-container .border-popover .sdoc-dropdown-menu-item .sdoc-dropdown-item-content .sdoc-check-mark {
+  transform: translateX(-24px);
+}
+
+.sdoc-video-hover-menu-container .border-popover .sdoc-dropdown-menu-item:hover {
+  background-color: transparent;
+}

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

@@ -0,0 +1,84 @@
+"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 _commons = require("../../../commons");
+var _tooltip = _interopRequireDefault(require("../../../../../components/tooltip"));
+var _constants = require("../../../constants");
+require("./index.css");
+const VideoHoverMenu = _ref => {
+  let {
+    editor,
+    menuPosition,
+    element,
+    parentNodeEntry,
+    videoCaptionInputRef,
+    onHideVideoHoverMenu,
+    t,
+    readonly
+  } = _ref;
+  const [isShowTooltip, setIsShowTooltip] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setIsShowTooltip(true);
+  }, []);
+
+  // const onCopy = useCallback(() => {
+  //   onCopyNode(editor, slateNode);
+  //   onReset();
+  // }, [editor, onReset, slateNode]);
+
+  return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-video-hover-menu-container",
+    style: menuPosition
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "hover-menu-container"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    id: "sdoc_video_download",
+    role: "button",
+    className: "op-item",
+    onClick: e => {
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-download icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc_video_download",
+    placement: "top",
+    fade: true
+  }, t('Download'))), /*#__PURE__*/_react.default.createElement("span", {
+    id: "sdoc_video_copy",
+    role: "button",
+    className: "op-item",
+    onClick: e => {
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-copy icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc_video_copy",
+    placement: "top",
+    fade: true
+  }, t('Copy'))), /*#__PURE__*/_react.default.createElement("span", {
+    id: "sdoc_video_delete",
+    role: "button",
+    className: "op-item",
+    onClick: e => {
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-delete icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc_video_delete",
+    placement: "top",
+    fade: true
+  }, t('Delete')))))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(VideoHoverMenu);

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

@@ -0,0 +1,73 @@
+.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-block-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: 40%;
+  left: 45%;
+  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_BLOCK,
+  nodeType: 'element',
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.renderVideoBlock]
+};
+var _default = exports.default = VideoPlugin;

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

@@ -0,0 +1,55 @@
+"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,
+    isRichEditor,
+    className
+  } = _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 2222"
+  })), !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,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _core = require("../../core");
+var _constants = require("../../constants");
+const withVideo = editor => {
+  const {
+    normalizeNode,
+    isVoid
+  } = editor;
+  const newEditor = editor;
+
+  // Make video_block as void node
+  newEditor.isVoid = elem => {
+    const {
+      type
+    } = elem;
+    if (type === _constants.VIDEO_BLOCK) {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  newEditor.normalizeNode = _ref => {
+    let [node, path] = _ref;
+    const type = (0, _core.getNodeType)(node);
+    if (type !== _constants.ELEMENT_TYPE.VIDEO_BLOCK) {
+      return normalizeNode([node, path]);
+    }
+
+    // Insert empty node，continue newEditor
+    const isLast = (0, _core.isLastNode)(newEditor, node);
+    if (isLast) {
+      const p = (0, _core.generateEmptyElement)(_constants.ELEMENT_TYPE.PARAGRAPH);
+      _slate.Transforms.insertNodes(newEditor, p, {
+        at: [path[0] + 1]
+      });
+    }
+  };
+  return newEditor;
+};
+var _default = exports.default = withVideo;