@seafile/sdoc-editor 1.0.53 → 1.0.55

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

@@ -1,16 +1,24 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Editor, Transforms } from '@seafile/slate';
-import { ReactEditor } from '@seafile/slate-react';
-import { withTranslation } from 'react-i18next';
-import classnames from 'classnames';
-import { ElementPopover } from '../../../commons';
-import Tooltip from '../../../../../components/tooltip';
-import ImagePreviewer from '../dialogs/image-previewer';
-import { generateEmptyElement } from '../../../core';
-import { getImageURL } from '../helpers';
-import { IMAGE_DISPLAY_TYPE, IMAGE_BORDER_TYPE } from '../constants';
-import { MENUS_CONFIG_MAP, TEXT_ALIGN, PARAGRAPH, IMAGE_BLOCK, TABLE } from '../../../constants';
-import './index.css';
+"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 _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _commons = require("../../../commons");
+var _tooltip = _interopRequireDefault(require("../../../../../components/tooltip"));
+var _imagePreviewer = _interopRequireDefault(require("../dialogs/image-previewer"));
+var _core = require("../../../core");
+var _helpers = require("../helpers");
+var _constants = require("../constants");
+var _constants2 = require("../../../constants");
+require("./index.css");
 const ImageHoverMenu = _ref => {
   let {
     editor,
@@ -24,7 +32,7 @@ const ImageHoverMenu = _ref => {
   } = _ref;
   const {
     data,
-    border_type = IMAGE_BORDER_TYPE[0].type
+    border_type = _constants.IMAGE_BORDER_TYPE[0].type
   } = element;
   const {
     align = 'left',
@@ -33,17 +41,17 @@ const ImageHoverMenu = _ref => {
   const {
     show_caption = false
   } = data;
-  const [popoverState, setPopoverState] = useState({
+  const [popoverState, setPopoverState] = (0, _react.useState)({
     displayPopover: false,
     alignPopover: false,
     borderPopover: false
   });
-  const [isShowImagePreview, setIsShowImagePreview] = useState(false);
-  const [isShowTooltip, setIsShowTooltip] = useState(false);
-  useEffect(() => {
+  const [isShowImagePreview, setIsShowImagePreview] = (0, _react.useState)(false);
+  const [isShowTooltip, setIsShowTooltip] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
     setIsShowTooltip(true);
   }, []);
-  const onShowProver = useCallback((event, showProverKey) => {
+  const onShowProver = (0, _react.useCallback)((event, showProverKey) => {
     event.stopPropagation();
     const newPopoverState = popoverState;
     for (let key in newPopoverState) {
@@ -57,15 +65,15 @@ const ImageHoverMenu = _ref => {
       ...newPopoverState
     });
   }, [popoverState]);
-  const onSelect = useCallback((event, props) => {
+  const onSelect = (0, _react.useCallback)((event, props) => {
     event.stopPropagation();
-    const path = ReactEditor.findPath(editor, element);
+    const path = _slateReact.ReactEditor.findPath(editor, element);
     if (path) {
-      if (props['display_type'] === IMAGE_BLOCK && type === PARAGRAPH) {
+      if (props['display_type'] === _constants2.IMAGE_BLOCK && type === _constants2.PARAGRAPH) {
         // Remove old node
-        const nodeEntry = Editor.node(editor, [path[0]]);
+        const nodeEntry = _slate.Editor.node(editor, [path[0]]);
         const newNodeEntry = JSON.parse(JSON.stringify(nodeEntry.slice(0)));
-        Transforms.removeNodes(editor, {
+        _slate.Transforms.removeNodes(editor, {
           at: [path[0]]
         });
         // Insert new node
@@ -81,16 +89,16 @@ const ImageHoverMenu = _ref => {
           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 = generateEmptyElement(PARAGRAPH);
+          beforeNode = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
           beforeNode.children = beforeLeaf;
-          Transforms.insertNodes(editor, beforeNode, {
+          _slate.Transforms.insertNodes(editor, beforeNode, {
             at: [p]
           });
           p = p + 1;
         }
-        centerNode = generateEmptyElement(IMAGE_BLOCK);
+        centerNode = (0, _core.generateEmptyElement)(_constants2.IMAGE_BLOCK);
         centerNode.children = imageLeaf;
-        Transforms.insertNodes(editor, centerNode, {
+        _slate.Transforms.insertNodes(editor, centerNode, {
           at: [p]
         });
         p = p + 1;
@@ -98,43 +106,43 @@ const ImageHoverMenu = _ref => {
           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 = generateEmptyElement(PARAGRAPH);
+          afterNode = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
           afterNode.children = afterLeaf;
-          Transforms.insertNodes(editor, afterNode, {
+          _slate.Transforms.insertNodes(editor, afterNode, {
             at: [p]
           });
         }
         return;
       }
-      if (props['display_type'] === PARAGRAPH && type === IMAGE_BLOCK) {
-        const nodeEntry = Editor.node(editor, [path[0]]);
+      if (props['display_type'] === _constants2.PARAGRAPH && type === _constants2.IMAGE_BLOCK) {
+        const nodeEntry = _slate.Editor.node(editor, [path[0]]);
         const newNodeEntry = JSON.parse(JSON.stringify(nodeEntry.slice(0)));
-        Transforms.removeNodes(editor, {
+        _slate.Transforms.removeNodes(editor, {
           at: [path[0]]
         });
-        const newNode = generateEmptyElement(PARAGRAPH);
+        const newNode = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
         newNode.children = newNodeEntry[0].children;
-        Transforms.insertNodes(editor, newNode, {
+        _slate.Transforms.insertNodes(editor, newNode, {
           at: [path[0]]
         });
         return;
       }
       if (props['align']) {
-        Transforms.setNodes(editor, props, {
+        _slate.Transforms.setNodes(editor, props, {
           at: [path[0]]
         });
         onHideImageHoverMenu();
         return;
       }
       if (props['border_type']) {
-        Transforms.setNodes(editor, props, {
+        _slate.Transforms.setNodes(editor, props, {
           at: path
         });
         onHideImageHoverMenu();
         return;
       }
       if (Object.keys(props)[0] === 'show_caption') {
-        Transforms.setNodes(editor, {
+        _slate.Transforms.setNodes(editor, {
           data: {
             ...data,
             ...props
@@ -152,74 +160,74 @@ const ImageHoverMenu = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-image-hover-menu-container",
     style: menuPosition
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "hover-menu-container"
-  }, type !== TABLE && !readonly && /*#__PURE__*/React.createElement("span", {
+  }, type !== _constants2.TABLE && !readonly && /*#__PURE__*/_react.default.createElement("span", {
     className: "op-group-item"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     role: "button",
-    className: classnames('op-item', {
+    className: (0, _classnames.default)('op-item', {
       'active': popoverState.displayPopover
     }),
     onClick: e => {
       onShowProver(e, 'displayPopover');
     }
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: "mr-1"
-  }, t(type === IMAGE_BLOCK ? 'Block' : 'Inline')), /*#__PURE__*/React.createElement("i", {
+  }, t(type === _constants2.IMAGE_BLOCK ? 'Block' : 'Inline')), /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-drop-down icon-font"
-  }))), !readonly && /*#__PURE__*/React.createElement("span", {
+  }))), !readonly && /*#__PURE__*/_react.default.createElement("span", {
     className: "op-group-item"
-  }, type === IMAGE_BLOCK && /*#__PURE__*/React.createElement("span", {
+  }, type === _constants2.IMAGE_BLOCK && /*#__PURE__*/_react.default.createElement("span", {
     role: "button",
-    className: classnames('op-item', {
+    className: (0, _classnames.default)('op-item', {
       'active': popoverState.alignPopover
     }),
     onClick: e => {
       onShowProver(e, 'alignPopover');
     }
-  }, /*#__PURE__*/React.createElement("i", {
-    className: classnames("sdocfont sdoc-align-".concat(align || 'left', " icon-font mr-1"))
-  }), /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: (0, _classnames.default)(`sdocfont sdoc-align-${align || 'left'} icon-font mr-1`)
+  }), /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-drop-down icon-font"
-  })), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/_react.default.createElement("span", {
     id: "sdoc_image_border",
     role: "button",
-    className: classnames('op-item', 'ml-1', {
+    className: (0, _classnames.default)('op-item', 'ml-1', {
       'active': popoverState.borderPopover
     }),
     onClick: e => {
       onShowProver(e, 'borderPopover');
     }
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-image icon-font mr-1"
-  }), /*#__PURE__*/React.createElement("i", {
+  }), /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-drop-down icon-font"
-  }), isShowTooltip && /*#__PURE__*/React.createElement(Tooltip, {
+  }), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     target: "sdoc_image_border",
     placement: "top",
     fade: true
-  }, t('Image_border'))), type === IMAGE_BLOCK && /*#__PURE__*/React.createElement("span", {
+  }, t('Image_border'))), type === _constants2.IMAGE_BLOCK && /*#__PURE__*/_react.default.createElement("span", {
     id: "sdoc_image_caption",
     role: "button",
-    className: classnames('op-item', 'ml-1', {
+    className: (0, _classnames.default)('op-item', 'ml-1', {
       'active': show_caption
     }),
     onClick: event => onSelect(event, {
       'show_caption': !show_caption
     })
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-describe icon-font mr-1"
-  }), isShowTooltip && /*#__PURE__*/React.createElement(Tooltip, {
+  }), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     target: "sdoc_image_caption",
     placement: "top",
     fade: true
-  }, t('Insert_caption')))), /*#__PURE__*/React.createElement("span", {
+  }, t('Insert_caption')))), /*#__PURE__*/_react.default.createElement("span", {
     className: "op-group-item"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     id: "sdoc_image_full_screen_mode",
     role: "button",
     className: "op-item",
@@ -227,68 +235,68 @@ const ImageHoverMenu = _ref => {
       e.stopPropagation();
       setIsShowImagePreview(!isShowImagePreview);
     }
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-fullscreen icon-font"
-  }), isShowTooltip && /*#__PURE__*/React.createElement(Tooltip, {
+  }), 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.createElement("div", {
+  }, t('Full_screen_mode'))))), popoverState.displayPopover && /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-image-popover sdoc-dropdown-menu"
-  }, IMAGE_DISPLAY_TYPE.map(item => {
-    return /*#__PURE__*/React.createElement("div", {
+  }, _constants.IMAGE_DISPLAY_TYPE.map(item => {
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: item.value,
       className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
       onClick: event => onSelect(event, {
         'display_type': item.value
       })
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: "sdoc-dropdown-item-content"
-    }, /*#__PURE__*/React.createElement("i", {
+    }, /*#__PURE__*/_react.default.createElement("i", {
       className: "sdoc-dropdown-item-content-icon"
-    }), /*#__PURE__*/React.createElement("span", null, t(item.text))), type === item.value && /*#__PURE__*/React.createElement("i", {
+    }), /*#__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.createElement("div", {
+  })), popoverState.alignPopover && /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-image-popover align-popover sdoc-dropdown-menu"
-  }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(item => {
-    return /*#__PURE__*/React.createElement("div", {
+  }, _constants2.MENUS_CONFIG_MAP[_constants2.TEXT_ALIGN].map(item => {
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: item.id,
       className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
       onClick: event => onSelect(event, {
         align: item.type
       })
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: "sdoc-dropdown-item-content"
-    }, /*#__PURE__*/React.createElement("i", {
-      className: classnames(item.iconClass, 'icon-font')
-    })), align === item.type && /*#__PURE__*/React.createElement("i", {
+    }, /*#__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.createElement("div", {
+  })), popoverState.borderPopover && /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-image-popover border-popover sdoc-dropdown-menu"
-  }, IMAGE_BORDER_TYPE.map(item => {
-    return /*#__PURE__*/React.createElement("div", {
+  }, _constants.IMAGE_BORDER_TYPE.map(item => {
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: item.type,
       className: "sdoc-dropdown-menu-item sdoc-dropdown-item-with-left-icon pr-2",
       onClick: event => onSelect(event, {
         border_type: item.type
       })
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: "sdoc-dropdown-item-content"
-    }, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/_react.default.createElement("img", {
       src: item.imgUrl,
       draggable: false,
       alt: ""
-    }), border_type === item.type && /*#__PURE__*/React.createElement("i", {
+    }), border_type === item.type && /*#__PURE__*/_react.default.createElement("i", {
       className: "sdocfont sdoc-check-mark sdoc-dropdown-item-right-icon"
     })));
-  })), isShowImagePreview && /*#__PURE__*/React.createElement(ImagePreviewer, {
-    imageUrl: getImageURL(data.src),
+  })), isShowImagePreview && /*#__PURE__*/_react.default.createElement(_imagePreviewer.default, {
+    imageUrl: (0, _helpers.getImageURL)(data.src),
     editor: editor,
     toggleImagePreviewer: () => {
       setIsShowImagePreview(!isShowImagePreview);
     }
   })));
 };
-export default withTranslation('sdoc-editor')(ImageHoverMenu);
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ImageHoverMenu);

package/dist/basic-sdk/extension/plugins/image/index.js

@@ -1,14 +1,21 @@
-import { IMAGE } from '../../constants';
-import ImageMenu from './menu';
-import Image from './model';
-import withImage from './plugin';
-import { renderImage, renderImageBlock } from './render-elem';
+"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");
 const ImagePlugin = {
-  type: IMAGE,
+  type: _constants.IMAGE,
   nodeType: 'element',
-  model: Image,
-  editorMenus: [ImageMenu],
-  editorPlugin: withImage,
-  renderElements: [renderImage, renderImageBlock]
+  model: _model.default,
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.renderImage, _renderElem.renderImageBlock]
 };
-export default ImagePlugin;
+var _default = exports.default = ImagePlugin;

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

@@ -1,11 +1,19 @@
-import React, { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { UncontrolledPopover } from 'reactstrap';
-import { isInsertImageMenuDisabled } from '../helpers';
-import { IMAGE, MENUS_CONFIG_MAP, LOCAL_IMAGE } from '../../../constants';
-import DropdownMenuItem from '../../../commons/dropdown-menu-item';
-import { COMMENT_EDITOR, INTERNAL_EVENT } from '../../../../constants';
-import { MenuItem } from '../../../commons';
+"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 _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _constants2 = require("../../../../constants");
+var _commons = require("../../../commons");
 const ImageMenu = _ref => {
   let {
     editor,
@@ -14,20 +22,20 @@ const ImageMenu = _ref => {
     isRichEditor,
     className
   } = _ref;
-  const disabled = isInsertImageMenuDisabled(editor, readonly);
-  const menuConfig = MENUS_CONFIG_MAP[IMAGE];
+  const disabled = (0, _helpers.isInsertImageMenuDisabled)(editor, readonly);
+  const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.IMAGE];
   const {
     t
-  } = useTranslation();
-  const openInsertLocalImage = useCallback(() => {
-    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
-      type: LOCAL_IMAGE,
+  } = (0, _reactI18next.useTranslation)();
+  const openInsertLocalImage = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.LOCAL_IMAGE,
       editor
     });
   }, [editor, eventBus]);
 
   // Apply for comment Editor
-  if (editor.editorType === COMMENT_EDITOR) {
+  if (editor.editorType === _constants2.COMMENT_EDITOR) {
     const commentEditorConfig = {
       ...menuConfig,
       text: 'Upload_local_image'
@@ -40,26 +48,26 @@ const ImageMenu = _ref => {
       isActive: false,
       onMouseDown: openInsertLocalImage
     };
-    return /*#__PURE__*/React.createElement(MenuItem, menuProps);
+    return /*#__PURE__*/_react.default.createElement(_commons.MenuItem, menuProps);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenuItem, {
+  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.createElement("i", {
+  }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
-  })), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
+  })), !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.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-insert-image-menu-popover-container sdoc-dropdown-menu-container"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: openInsertLocalImage
   }, t('Upload_local_image')))));
 };
-export default ImageMenu;
+var _default = exports.default = ImageMenu;

package/dist/basic-sdk/extension/plugins/image/model.js

@@ -1,7 +1,13 @@
-import { IMAGE } from '../../constants';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
 class Image {
   constructor(options) {
-    this.type = options.type || IMAGE;
+    this.type = options.type || _constants.IMAGE;
     this.data = options.data || {
       src: ''
     };
@@ -10,4 +16,4 @@ class Image {
     }];
   }
 }
-export default Image;
+var _default = exports.default = Image;