@seafile/sdoc-editor 3.0.84 → 3.0.86

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/option.css

@@ -0,0 +1,49 @@
+.sdoc-options .option {
+  display: block;
+  width: 100%;
+  line-height: 24px;
+  padding: 6px 10px;
+  clear: both;
+  font-weight: 400;
+  text-align: inherit;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sdoc-options .option.option-active {
+  background-color: #20a0ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.sdoc-options .option.option-active .sf2-icon-tick,
+.sdoc-options .option.option-active .select-option-name {
+  color: #fff !important;
+}
+
+.sdoc-options .option .select-option-name .single-select-option {
+  margin: 0 0 0 12px;
+}
+
+.sdoc-options .option .select-option-name .multiple-select-option {
+  margin: 0;
+}
+
+.sdoc-options .option-group-selector-single-select .select-option-name {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sdoc-options .option-group-selector-single-select .option:hover,
+.sdoc-options .option-group-selector-single-select .option.option-active,
+.sdoc-options .option-group-selector-multiple-select .option:hover,
+.sdoc-options .option-group-selector-multiple-select .option.option-active {
+  background-color: #f5f5f5;
+}

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/option.js

@@ -0,0 +1,53 @@
+"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+require("./option.css");
+var Option = /*#__PURE__*/function (_Component) {
+  function Option() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Option);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = (0, _callSuper2["default"])(this, Option, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "onSelectOption", function (e) {
+      e.stopPropagation();
+      _this.props.onSelectOption(_this.props.option);
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseEnter", function () {
+      if (!_this.props.disableHover) {
+        _this.props.changeIndex(_this.props.index);
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseLeave", function () {
+      if (!_this.props.disableHover) {
+        _this.props.changeIndex(-1);
+      }
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(Option, _Component);
+  return (0, _createClass2["default"])(Option, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.isActive ? 'option option-active' : 'option',
+        onClick: this.onSelectOption,
+        onMouseEnter: this.onMouseEnter,
+        onMouseLeave: this.onMouseLeave
+      }, this.props.children);
+    }
+  }]);
+}(_react.Component);
+var _default = exports["default"] = Option;

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/select-option-group.css

@@ -0,0 +1,37 @@
+.sdoc-options.option-group {
+  position: absolute;
+  padding-top: 0;
+  left: 0;
+  min-height: 60px;
+  max-height: 300px;
+  min-width: 100%;
+  max-width: 15rem;
+  padding: 0.5rem 0;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background: #fff;
+  border: 1px solid rgba(0, 40, 100, .12);
+  border-radius: 3px;
+  z-index: 10001;
+}
+
+[data-bs-theme=dark] .sdoc-options.option-group {
+  box-shadow: none;
+}
+
+.sdoc-options.option-group .option-group-search {
+  width: 100%;
+  padding: 6px 10px;
+  min-width: 170px;
+}
+
+.sdoc-options.option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  color: #f5f5f5;
+}
+
+.sdoc-options.option-group .option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+}

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/select-option-group.js

@@ -0,0 +1,241 @@
+"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = _interopRequireDefault(require("./constants"));
+var _lib = _interopRequireDefault(require("./lib.png"));
+var _option = _interopRequireDefault(require("./option"));
+require("./select-option-group.css");
+var OPTION_HEIGHT = 32;
+var SelectOptionGroup = /*#__PURE__*/function (_Component) {
+  function SelectOptionGroup(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, SelectOptionGroup);
+    _this = (0, _callSuper2["default"])(this, SelectOptionGroup, [props]);
+    (0, _defineProperty2["default"])(_this, "handleDocumentClick", function (e) {
+      _this.props.onClickOutside(e);
+    });
+    (0, _defineProperty2["default"])(_this, "resetMenuStyle", function () {
+      var _this$props = _this.props,
+        isInModal = _this$props.isInModal,
+        position = _this$props.position;
+      var _this$optionGroupRef$ = _this.optionGroupRef.getBoundingClientRect(),
+        top = _this$optionGroupRef$.top,
+        height = _this$optionGroupRef$.height;
+      if (isInModal) {
+        if (position.y + position.height + height > window.innerHeight) {
+          _this.optionGroupRef.style.top = position.y - height + 'px';
+        }
+        _this.optionGroupRef.style.opacity = 1;
+      } else {
+        if (height + top > window.innerHeight) {
+          var borderWidth = 2;
+          _this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+        }
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onHotKey", function (event) {
+      var keyCode = event.keyCode;
+      if (keyCode === _constants["default"].UpArrow) {
+        _this.onPressUp();
+      } else if (keyCode === _constants["default"].DownArrow) {
+        _this.onPressDown();
+      } else if (keyCode === _constants["default"].Enter) {
+        var option = _this.filterOptions && _this.filterOptions[_this.state.activeIndex];
+        if (option) {
+          _this.props.onSelectOption(option);
+        }
+      } else if (keyCode === _constants["default"].Tab || keyCode === _constants["default"].Escape) {
+        _this.props.closeSelect();
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onPressUp", function () {
+      if (_this.state.activeIndex > 0) {
+        _this.setState({
+          activeIndex: _this.state.activeIndex - 1
+        }, function () {
+          _this.scrollContent();
+        });
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onPressDown", function () {
+      if (_this.filterOptions && _this.state.activeIndex < _this.filterOptions.length - 1) {
+        _this.setState({
+          activeIndex: _this.state.activeIndex + 1
+        }, function () {
+          _this.scrollContent();
+        });
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseDown", function (e) {
+      var isInModal = _this.props.isInModal;
+      // prevent event propagation when click option or search input
+      if (isInModal) {
+        e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "scrollContent", function () {
+      var _this$optionGroupCont = _this.optionGroupContentRef,
+        offsetHeight = _this$optionGroupCont.offsetHeight,
+        scrollTop = _this$optionGroupCont.scrollTop;
+      _this.setState({
+        disableHover: true
+      });
+      _this.timer = setTimeout(function () {
+        _this.setState({
+          disableHover: false
+        });
+      }, 500);
+      if (_this.state.activeIndex * OPTION_HEIGHT === 0) {
+        _this.optionGroupContentRef.scrollTop = 0;
+        return;
+      }
+      if (_this.state.activeIndex * OPTION_HEIGHT < scrollTop) {
+        _this.optionGroupContentRef.scrollTop = scrollTop - OPTION_HEIGHT;
+      } else if (_this.state.activeIndex * OPTION_HEIGHT > offsetHeight + scrollTop) {
+        _this.optionGroupContentRef.scrollTop = scrollTop + OPTION_HEIGHT;
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "changeIndex", function (index) {
+      _this.setState({
+        activeIndex: index
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onChangeSearch", function (searchVal) {
+      _this.setState({
+        searchVal: searchVal || '',
+        activeIndex: -1
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "clearValue", function () {
+      _this.setState({
+        searchVal: '',
+        activeIndex: -1
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "renderOptGroup", function (searchVal) {
+      var _this$props2 = _this.props,
+        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+        onSelectOption = _this$props2.onSelectOption,
+        selectedOption = _this$props2.selectedOption,
+        hasIcon = _this$props2.hasIcon;
+      _this.filterOptions = _this.props.getFilterOptions(searchVal);
+      if (_this.filterOptions.length === 0) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "none-search-result"
+        }, noOptionsPlaceholder);
+      }
+      return _this.filterOptions.map(function (option, index) {
+        var isSelected = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id;
+        return /*#__PURE__*/_react["default"].createElement(_option["default"], {
+          key: "".concat(option.id, "-").concat(index),
+          index: index,
+          isActive: _this.state.activeIndex === index,
+          option: option,
+          onSelectOption: onSelectOption,
+          changeIndex: _this.changeIndex,
+          disableHover: _this.state.disableHover
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "d-flex"
+        }, hasIcon && /*#__PURE__*/_react["default"].createElement("img", {
+          src: _lib["default"],
+          width: '24px',
+          alt: "",
+          className: "mr-2"
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "option-label"
+        }, option.label)), isSelected && /*#__PURE__*/_react["default"].createElement("i", {
+          className: "sdocfont sdoc-check-mark text-gray font-weight-bold"
+        }));
+      });
+    });
+    _this.state = {
+      searchVal: '',
+      activeIndex: -1,
+      disableHover: false
+    };
+    _this.filterOptions = null;
+    _this.timer = null;
+    _this.searchInputRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+  (0, _inherits2["default"])(SelectOptionGroup, _Component);
+  return (0, _createClass2["default"])(SelectOptionGroup, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      window.addEventListener('keydown', this.onHotKey);
+      document.addEventListener('mousedown', this.handleDocumentClick);
+      setTimeout(function () {
+        _this2.resetMenuStyle();
+      }, 1);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.filterOptions = null;
+      this.timer && clearTimeout(this.timer);
+      window.removeEventListener('keydown', this.onHotKey);
+      document.removeEventListener('mousedown', this.handleDocumentClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _this$props3 = this.props,
+        top = _this$props3.top,
+        left = _this$props3.left,
+        minWidth = _this$props3.minWidth,
+        isInModal = _this$props3.isInModal,
+        position = _this$props3.position,
+        className = _this$props3.className;
+      var searchVal = this.state.searchVal;
+      var style = {
+        top: top || 0,
+        left: left || 0
+      };
+      if (minWidth) {
+        style = {
+          top: top || 0,
+          left: left || 0,
+          minWidth: minWidth
+        };
+      }
+      if (isInModal) {
+        style = {
+          position: 'fixed',
+          left: position.x,
+          top: position.y + position.height,
+          minWidth: position.width,
+          opacity: 0
+        };
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])('sdoc-options option-group', className ? 'option-group-' + className : ''),
+        ref: function ref(_ref2) {
+          return _this3.optionGroupRef = _ref2;
+        },
+        style: style,
+        onMouseDown: this.onMouseDown
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "option-group-content",
+        ref: function ref(_ref) {
+          return _this3.optionGroupContentRef = _ref;
+        }
+      }, this.renderOptGroup(searchVal)));
+    }
+  }]);
+}(_react.Component);
+var _default = exports["default"] = SelectOptionGroup;

package/dist/extension/plugins/file-view/insert-view-dialog/index.js

@@ -0,0 +1,232 @@
+"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 _objectSpread2 = _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 _reactstrap = require("reactstrap");
+var _loading = _interopRequireDefault(require("../../../../components/loading"));
+var _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _context = _interopRequireDefault(require("../../../../context"));
+var _commonUtils = require("../../../../utils/common-utils");
+var _helpers = require("../helpers");
+var _dropdownSelect = _interopRequireDefault(require("./dropdown-select"));
+var InsertViewDialog = function InsertViewDialog(_ref) {
+  var className = _ref.className,
+    editor = _ref.editor,
+    _ref$element = _ref.element,
+    element = _ref$element === void 0 ? {} : _ref$element,
+    slateNode = _ref.slateNode,
+    insertPosition = _ref.insertPosition,
+    closeDialog = _ref.closeDialog;
+  var _element$data = element.data,
+    data = _element$data === void 0 ? {} : _element$data;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    viewName = _useState4[0],
+    setViewName = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    currentTypeOption = _useState6[0],
+    setCurrentTypeOption = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    currentRepoOption = _useState8[0],
+    setCurrentRepoOption = _useState8[1];
+  var _useState9 = (0, _react.useState)(''),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    viewNameErrorMessage = _useState0[0],
+    setViewNameErrorMessage = _useState0[1];
+  var _useState1 = (0, _react.useState)(''),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    typeErrorMessage = _useState10[0],
+    setTypeErrorMessage = _useState10[1];
+  var _useState11 = (0, _react.useState)(''),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    repoErrorMessage = _useState12[0],
+    setRepoErrorMessage = _useState12[1];
+  var _useState13 = (0, _react.useState)([]),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    repoOptions = _useState14[0],
+    setRepoOptions = _useState14[1];
+  var TYPE_OPERATIONS = (0, _react.useMemo)(function () {
+    return [{
+      id: 'table',
+      name: 'table',
+      value: 'table',
+      label: 'table'
+    }];
+  }, []);
+  (0, _react.useEffect)(function () {
+    var _element$data2 = element.data,
+      data = _element$data2 === void 0 ? {} : _element$data2;
+    setViewName(data.view_name);
+    var typeOption = TYPE_OPERATIONS.find(function (item) {
+      return item.value === data.view_type;
+    }) || null;
+    setCurrentTypeOption(typeOption);
+    var wikiSettings = (0, _helpers.getWikiSettings)();
+    var accessibleRepos = (0, _helpers.getAccessibleRepos)();
+    var linkedRepoIds = wikiSettings.linked_repos;
+    var repoList = accessibleRepos.map(function (item) {
+      item.sharePermission = 'rw';
+      return item;
+    });
+    var options = repoList.map(function (item) {
+      return {
+        id: item.repo_id,
+        name: item.repo_name,
+        value: item.repo_name,
+        label: item.repo_name,
+        permission: item.permission
+      };
+    });
+    var optionsMap = options.reduce(function (result, item) {
+      result[item.id] = item;
+      return result;
+    }, {});
+    var repoOptions = linkedRepoIds.map(function (id) {
+      return optionsMap[id];
+    }).filter(Boolean);
+    setRepoOptions(repoOptions);
+    setCurrentRepoOption(repoOptions.find(function (item) {
+      return item.id === data.linked_repo_id;
+    }));
+    setIsLoading(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var submit = (0, _react.useCallback)(function () {
+    setViewNameErrorMessage('');
+    setTypeErrorMessage('');
+    setRepoErrorMessage('');
+    if (!viewName) {
+      setViewNameErrorMessage(t('The_view_name_is_required'));
+      return;
+    }
+    if (!currentTypeOption) {
+      setTypeErrorMessage(t('The_view_type_is_required'));
+      return;
+    }
+    if (!currentRepoOption) {
+      setRepoErrorMessage(t('The_linked_library_is_required'));
+      return;
+    }
+    var viewType = currentTypeOption.value;
+    var linkedRepoId = currentRepoOption.id;
+    var wikiId = _context["default"].getSetting('wikiId');
+    var data = {
+      wiki_id: wikiId,
+      view_name: viewName,
+      view_type: viewType,
+      link_repo_id: linkedRepoId
+    };
+    _context["default"].insertWikiView(data).then(function (res) {
+      var view = res.data.view;
+      var viewData = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, data), {}, {
+        view_id: view._id
+      });
+      (0, _helpers.insertFileView)(viewData, editor, insertPosition, slateNode);
+      closeDialog();
+    })["catch"](function (error) {
+      var errorMessage = (0, _commonUtils.getErrorMsg)(error);
+      _toast["default"].danger(errorMessage);
+    });
+  }, [viewName, currentTypeOption, currentRepoOption, t, editor, insertPosition, slateNode, closeDialog]);
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.keyCode === 13) {
+      event.preventDefault();
+      submit();
+      return;
+    }
+  }, [submit]);
+  var onValueChanged = (0, _react.useCallback)(function (event) {
+    var value = event.target.value;
+    if (value === viewName) return;
+    setViewName(value);
+    setViewNameErrorMessage('');
+  }, [viewName]);
+  var onSelectTypeOption = (0, _react.useCallback)(function (option) {
+    setCurrentTypeOption(option);
+    setTypeErrorMessage('');
+  }, []);
+  var onSelectTableOption = (0, _react.useCallback)(function (option) {
+    setCurrentRepoOption(option);
+    setRepoErrorMessage('');
+  }, []);
+  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_file_view')), /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalBody, null, isLoading && /*#__PURE__*/_react["default"].createElement(_loading["default"], null), !isLoading && repoOptions.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: ""
+  }, t('Linked_repo_tip')), !isLoading && repoOptions.length !== 0 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Label, {
+    "for": "addTitle"
+  }, t('View_name')), /*#__PURE__*/_react["default"].createElement("input", {
+    onKeyDown: onKeyDown,
+    type: "text",
+    className: "form-control",
+    id: "addTitle",
+    value: data.view_name,
+    onChange: onValueChanged
+  }), viewNameErrorMessage && /*#__PURE__*/_react["default"].createElement(_reactstrap.Alert, {
+    color: "danger",
+    className: "mt-2"
+  }, t(viewNameErrorMessage))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Label, null, t('View_type')), /*#__PURE__*/_react["default"].createElement(_dropdownSelect["default"], {
+    selectedOption: currentTypeOption,
+    options: TYPE_OPERATIONS,
+    onSelectOption: onSelectTypeOption,
+    isInModal: true
+  }), typeErrorMessage && /*#__PURE__*/_react["default"].createElement(_reactstrap.Alert, {
+    color: "danger",
+    className: "mt-2"
+  }, t(typeErrorMessage))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Label, null, t('Linked_library')), /*#__PURE__*/_react["default"].createElement(_dropdownSelect["default"], {
+    hasIcon: true,
+    selectedOption: currentRepoOption,
+    options: repoOptions,
+    onSelectOption: onSelectTableOption,
+    isInModal: true
+  }), repoErrorMessage && /*#__PURE__*/_react["default"].createElement(_reactstrap.Alert, {
+    color: "danger",
+    className: "mt-2"
+  }, t(repoErrorMessage))))), !isLoading && repoOptions.length !== 0 && /*#__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('Submit'))));
+};
+var _default = exports["default"] = InsertViewDialog;

package/dist/extension/plugins/file-view/insert-view-dialog/modal-portal.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = require("react-dom");
+var modalRoot = document.getElementById('modal-wrapper');
+var ModalPortal = /*#__PURE__*/function (_React$Component) {
+  function ModalPortal(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ModalPortal);
+    _this = (0, _callSuper2["default"])(this, ModalPortal, [props]);
+    _this.el = document.createElement('div');
+    return _this;
+  }
+  (0, _inherits2["default"])(ModalPortal, _React$Component);
+  return (0, _createClass2["default"])(ModalPortal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      modalRoot.appendChild(this.el);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      modalRoot.removeChild(this.el);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/(0, _reactDom.createPortal)(this.props.children, this.el);
+    }
+  }]);
+}(_react["default"].Component);
+var _default = exports["default"] = ModalPortal;