@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/extension/plugins/image/hover-menu/index.js

@@ -0,0 +1,314 @@
+"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 _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+var _commons = require("../../../commons");
+var _constants = require("../../../constants");
+var _core = require("../../../core");
+var _constants2 = require("../constants");
+var _imagePreviewer = _interopRequireDefault(require("../dialogs/image-previewer"));
+var _helpers = require("../helpers");
+require("./index.css");
+var ImageHoverMenu = function ImageHoverMenu(_ref) {
+  var editor = _ref.editor,
+    menuPosition = _ref.menuPosition,
+    element = _ref.element,
+    parentNodeEntry = _ref.parentNodeEntry,
+    imageCaptionInputRef = _ref.imageCaptionInputRef,
+    onHideImageHoverMenu = _ref.onHideImageHoverMenu,
+    t = _ref.t,
+    readonly = _ref.readonly;
+  var data = element.data,
+    _element$border_type = element.border_type,
+    border_type = _element$border_type === void 0 ? _constants2.IMAGE_BORDER_TYPE[0].type : _element$border_type;
+  var _parentNodeEntry$ = parentNodeEntry[0],
+    _parentNodeEntry$$ali = _parentNodeEntry$.align,
+    align = _parentNodeEntry$$ali === void 0 ? 'left' : _parentNodeEntry$$ali,
+    type = _parentNodeEntry$.type;
+  var _data$show_caption = data.show_caption,
+    show_caption = _data$show_caption === void 0 ? false : _data$show_caption;
+  var _useState = (0, _react.useState)({
+      displayPopover: false,
+      alignPopover: false,
+      borderPopover: false
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    popoverState = _useState2[0],
+    setPopoverState = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isShowImagePreview = _useState4[0],
+    setIsShowImagePreview = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isShowTooltip = _useState6[0],
+    setIsShowTooltip = _useState6[1];
+  (0, _react.useEffect)(function () {
+    setIsShowTooltip(true);
+  }, []);
+  var onShowProver = (0, _react.useCallback)(function (event, showProverKey) {
+    event.stopPropagation();
+    var newPopoverState = popoverState;
+    for (var key in newPopoverState) {
+      if (key === showProverKey) {
+        newPopoverState[key] = !newPopoverState[key];
+      } else {
+        newPopoverState[key] = false;
+      }
+    }
+    setPopoverState((0, _objectSpread2["default"])({}, newPopoverState));
+  }, [popoverState]);
+  var onSelect = (0, _react.useCallback)(function (event, props) {
+    event.stopPropagation();
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    if (path) {
+      if (props['display_type'] === _constants.IMAGE_BLOCK && type === _constants.PARAGRAPH) {
+        // Remove old node
+        var nodeEntry = _slate.Editor.node(editor, [path[0]]);
+        var newNodeEntry = JSON.parse(JSON.stringify(nodeEntry.slice(0)));
+        _slate.Transforms.removeNodes(editor, {
+          at: [path[0]]
+        });
+        // Insert new node
+        var index = newNodeEntry[0].children.findIndex(function (item) {
+          return item.id === element.id;
+        });
+        var beforeLeaf = newNodeEntry[0].children.slice(0, index);
+        var imageLeaf = newNodeEntry[0].children.slice(index, index + 1);
+        var afterLeaf = newNodeEntry[0].children.slice(index + 1);
+        var beforeNode = null;
+        var centerNode = null;
+        var afterNode = null;
+        var p = path[0];
+        if (!beforeLeaf.every(function (item) {
+          var _item$text;
+          return (item === null || item === void 0 ? void 0 : (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.length) === 0;
+        })) {
+          beforeNode = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+          beforeNode.children = beforeLeaf;
+          _slate.Transforms.insertNodes(editor, beforeNode, {
+            at: [p]
+          });
+          p = p + 1;
+        }
+        centerNode = (0, _core.generateEmptyElement)(_constants.IMAGE_BLOCK);
+        centerNode.children = imageLeaf;
+        _slate.Transforms.insertNodes(editor, centerNode, {
+          at: [p]
+        });
+        p = p + 1;
+        if (!afterLeaf.every(function (item) {
+          var _item$text2;
+          return (item === null || item === void 0 ? void 0 : (_item$text2 = item.text) === null || _item$text2 === void 0 ? void 0 : _item$text2.length) === 0;
+        })) {
+          afterNode = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+          afterNode.children = afterLeaf;
+          _slate.Transforms.insertNodes(editor, afterNode, {
+            at: [p]
+          });
+        }
+        return;
+      }
+      if (props['display_type'] === _constants.PARAGRAPH && type === _constants.IMAGE_BLOCK) {
+        var _nodeEntry = _slate.Editor.node(editor, [path[0]]);
+        var _newNodeEntry = JSON.parse(JSON.stringify(_nodeEntry.slice(0)));
+        _slate.Transforms.removeNodes(editor, {
+          at: [path[0]]
+        });
+        var newNode = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+        newNode.children = _newNodeEntry[0].children;
+        _slate.Transforms.insertNodes(editor, newNode, {
+          at: [path[0]]
+        });
+        return;
+      }
+      if (props['align']) {
+        _slate.Transforms.setNodes(editor, props, {
+          at: [path[0]]
+        });
+        onHideImageHoverMenu();
+        return;
+      }
+      if (props['border_type']) {
+        _slate.Transforms.setNodes(editor, props, {
+          at: path
+        });
+        onHideImageHoverMenu();
+        return;
+      }
+      if (Object.keys(props)[0] === 'show_caption') {
+        _slate.Transforms.setNodes(editor, {
+          data: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, data), props)
+        }, {
+          at: path
+        });
+        queueMicrotask(function () {
+          if (imageCaptionInputRef.current) {
+            imageCaptionInputRef.current.focus();
+          }
+        });
+        return;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_commons.ElementPopover, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-image-hover-menu-container",
+    style: menuPosition
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "hover-menu-container"
+  }, ![_constants.TABLE, _constants.BLOCKQUOTE, _constants.CALL_OUT, _constants.MULTI_COLUMN].includes(type) && !readonly && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    role: "button",
+    className: (0, _classnames["default"])('op-item', {
+      'active': popoverState.displayPopover
+    }),
+    onClick: function onClick(e) {
+      onShowProver(e, 'displayPopover');
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "mr-1"
+  }, t(type === _constants.IMAGE_BLOCK ? 'Block' : 'Inline')), /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-drop-down icon-font"
+  }))), !readonly && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "op-group-item"
+  }, type === _constants.IMAGE_BLOCK && /*#__PURE__*/_react["default"].createElement("span", {
+    role: "button",
+    className: (0, _classnames["default"])('op-item', {
+      'active': popoverState.alignPopover
+    }),
+    onClick: function onClick(e) {
+      onShowProver(e, 'alignPopover');
+    }
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: (0, _classnames["default"])("sdocfont sdoc-align-".concat(align || 'left', " icon-font mr-1"))
+  }), /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-drop-down icon-font"
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc_image_border",
+    role: "button",
+    className: (0, _classnames["default"])('op-item', 'ml-1', {
+      'active': popoverState.borderPopover
+    }),
+    onClick: function onClick(e) {
+      onShowProver(e, 'borderPopover');
+    }
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-image icon-font mr-1"
+  }), /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-drop-down icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_image_border",
+    placement: "top",
+    fade: true
+  }, t('Image_border'))), type === _constants.IMAGE_BLOCK && /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc_image_caption",
+    role: "button",
+    className: (0, _classnames["default"])('op-item', 'ml-1', {
+      'active': show_caption
+    }),
+    onClick: function onClick(event) {
+      return onSelect(event, {
+        'show_caption': !show_caption
+      });
+    }
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-describe icon-font mr-1"
+  }), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_image_caption",
+    placement: "top",
+    fade: true
+  }, t('Caption')))), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc_image_full_screen_mode",
+    role: "button",
+    className: "op-item",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setIsShowImagePreview(!isShowImagePreview);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-fullscreen icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_image_full_screen_mode",
+    placement: "top",
+    fade: true
+  }, t('Full_screen_mode'))))), popoverState.displayPopover && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-image-popover sdoc-dropdown-menu"
+  }, _constants2.IMAGE_DISPLAY_TYPE.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: item.value,
+      className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
+      onClick: function onClick(event) {
+        return onSelect(event, {
+          'display_type': item.value
+        });
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-dropdown-item-content"
+    }, /*#__PURE__*/_react["default"].createElement("i", {
+      className: "sdoc-dropdown-item-content-icon"
+    }), /*#__PURE__*/_react["default"].createElement("span", null, t(item.text))), type === item.value && /*#__PURE__*/_react["default"].createElement("i", {
+      className: "sdocfont sdoc-check-mark sdoc-dropdown-item-right-icon"
+    }));
+  })), popoverState.alignPopover && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-image-popover align-popover sdoc-dropdown-menu"
+  }, _constants.MENUS_CONFIG_MAP[_constants.TEXT_ALIGN].map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: item.id,
+      className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
+      onClick: function onClick(event) {
+        return onSelect(event, {
+          align: item.type
+        });
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-dropdown-item-content"
+    }, /*#__PURE__*/_react["default"].createElement("i", {
+      className: (0, _classnames["default"])(item.iconClass, 'icon-font')
+    })), align === item.type && /*#__PURE__*/_react["default"].createElement("i", {
+      className: "sdocfont sdoc-check-mark sdoc-dropdown-item-right-icon"
+    }));
+  })), popoverState.borderPopover && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-image-popover border-popover sdoc-dropdown-menu"
+  }, _constants2.IMAGE_BORDER_TYPE.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: item.type,
+      className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
+      onClick: function onClick(event) {
+        return onSelect(event, {
+          border_type: item.type
+        });
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-dropdown-item-content"
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: item.imgUrl,
+      draggable: false,
+      alt: ""
+    }), border_type === item.type && /*#__PURE__*/_react["default"].createElement("i", {
+      className: "sdocfont sdoc-check-mark sdoc-dropdown-item-right-icon"
+    })));
+  })), isShowImagePreview && /*#__PURE__*/_react["default"].createElement(_imagePreviewer["default"], {
+    imageUrl: (0, _helpers.getImageURL)(data),
+    editor: editor,
+    toggleImagePreviewer: function toggleImagePreviewer() {
+      setIsShowImagePreview(!isShowImagePreview);
+    }
+  })));
+};
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(ImageHoverMenu);

package/dist/extension/plugins/image/image-cache.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 ImageCache = /*#__PURE__*/function () {
+  function ImageCache() {
+    (0, _classCallCheck2["default"])(this, ImageCache);
+    this.imageCache = null;
+  }
+  return (0, _createClass2["default"])(ImageCache, null, [{
+    key: "saveImage",
+    value: function saveImage(key, item) {
+      if (!this.imageCache) {
+        this.imageCache = new Map();
+      }
+      this.imageCache.set(key, item);
+    }
+  }, {
+    key: "getImage",
+    value: function getImage(key) {
+      if (!this.imageCache) {
+        this.imageCache = new Map();
+      }
+      return this.imageCache.get(key);
+    }
+  }, {
+    key: "deleteImage",
+    value: function deleteImage(key) {
+      if (!this.imageCache) {
+        this.imageCache = new Map();
+      }
+      this.imageCache["delete"](key);
+    }
+  }]);
+}();
+var _default = exports["default"] = ImageCache;

package/dist/extension/plugins/image/image-loader/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ImageLoader;
+var _react = _interopRequireDefault(require("react"));
+require("./index.css");
+function ImageLoader(_ref) {
+  var copyright = _ref.copyright,
+    isError = _ref.isError;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-image-process-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loading-spinner"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "spinner"
+  })), copyright && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "copyright ".concat(isError && 'error')
+  }, copyright));
+}

package/dist/extension/plugins/image/index.js

@@ -0,0 +1,21 @@
+"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 _model = _interopRequireDefault(require("./model"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = require("./render-elem");
+var ImagePlugin = {
+  type: _constants.IMAGE,
+  nodeType: 'element',
+  model: _model["default"],
+  editorMenus: [_menu["default"]],
+  editorPlugin: _plugin["default"],
+  renderElements: [_renderElem.renderImage, _renderElem.renderImageBlock]
+};
+var _default = exports["default"] = ImagePlugin;

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

@@ -0,0 +1,70 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _constants = require("../../../../constants");
+var _commons = require("../../../commons");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _constants2 = require("../../../constants");
+var _helpers = require("../helpers");
+var ImageMenu = function ImageMenu(_ref) {
+  var editor = _ref.editor,
+    readonly = _ref.readonly,
+    eventBus = _ref.eventBus,
+    isRichEditor = _ref.isRichEditor,
+    className = _ref.className;
+  var disabled = (0, _helpers.isInsertImageMenuDisabled)(editor, readonly);
+  var menuConfig = _constants2.MENUS_CONFIG_MAP[_constants2.IMAGE];
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var openInsertLocalImage = (0, _react.useCallback)(function () {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.LOCAL_IMAGE,
+      editor: editor
+    });
+  }, [editor, eventBus]);
+
+  // Apply for comment Editor
+  if (editor.editorType === _constants.COMMENT_EDITOR) {
+    var commentEditorConfig = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, menuConfig), {}, {
+      text: 'Upload_local_image'
+    });
+    var menuProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      isRichEditor: isRichEditor,
+      className: className
+    }, commentEditorConfig), {}, {
+      disabled: disabled,
+      isActive: false,
+      onMouseDown: openInsertLocalImage
+    });
+    return /*#__PURE__*/_react["default"].createElement(_commons.MenuItem, menuProps);
+  }
+  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-image-menu-popover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-insert-image-menu-popover-container sdoc-dropdown-menu-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: openInsertLocalImage
+  }, t('Upload_local_image')))));
+};
+var _default = exports["default"] = ImageMenu;

package/dist/extension/plugins/image/model.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _constants = require("../../constants");
+var Image = /*#__PURE__*/(0, _createClass2["default"])(function Image(options) {
+  (0, _classCallCheck2["default"])(this, Image);
+  this.type = options.type || _constants.IMAGE;
+  this.data = options.data || {
+    src: ''
+  };
+  this.children = options.children || [{
+    text: ''
+  }];
+});
+var _default = exports["default"] = Image;