@seafile/seafile-editor 0.3.76

package/dist/editor/editor-component/image.js

@@ -0,0 +1,215 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import { Utils } from '../../utils/utils';
+import InlineElementUtils from '../editor-utils/inline-element-utils';
+import Modal from '../../components/modal-portal';
+
+var Image = /*#__PURE__*/function (_React$Component) {
+  _inherits(Image, _React$Component);
+
+  var _super = _createSuper(Image);
+
+  function Image(props) {
+    var _this;
+
+    _classCallCheck(this, Image);
+
+    _this = _super.call(this, props);
+
+    _this.startMove = function (e) {
+      e.stopPropagation();
+
+      _this.setState({
+        isResizing: true
+      });
+
+      window.addEventListener('mousemove', _this.handleMove);
+      window.addEventListener('mouseup', _this.stopMove);
+    };
+
+    _this.stopMove = function (e) {
+      e.stopPropagation();
+      e.preventDefault();
+      window.removeEventListener('mousemove', _this.handleMove);
+      var node = _this.props.node;
+
+      _this.inlineElementUtils.adjustImageSize({
+        width: _this.state.width,
+        src: node.data.src
+      });
+
+      _this.setState({
+        isResizing: false
+      });
+
+      window.removeEventListener('mouseup', _this.stopMove);
+    };
+
+    _this.handleMove = function (e) {
+      e.stopPropagation();
+      e.preventDefault();
+      var changeX;
+      changeX = e.clientX - _this.refs.resizer.getBoundingClientRect().left - 5;
+      var imageWidth = _this.refs.image.width + changeX;
+
+      if (imageWidth >= _this.editor.offsetWidth) {
+        return;
+      }
+
+      if (imageWidth < 20) {
+        return;
+      }
+
+      _this.setState({
+        width: imageWidth
+      });
+    };
+
+    _this.setFullScreen = function (event) {
+      event.stopPropagation();
+      var src = _this.props.node.data.src;
+
+      _this.toggleBigImage(event, src);
+    };
+
+    _this.toggleBigImage = function (event, src) {
+      event.preventDefault();
+
+      _this.setState({
+        isShowBigImage: !_this.state.isShowBigImage
+      });
+
+      _this.imgSrc = src;
+    };
+
+    _this.renderBigImage = function () {
+      return /*#__PURE__*/React.createElement(BigImage, {
+        bigImageSrc: _this.imgSrc,
+        toggleBigImage: _this.toggleBigImage
+      });
+    };
+
+    _this.state = {
+      width: null,
+      isResizing: false,
+      isShowBigImage: false
+    };
+    _this.inlineElementUtils = new InlineElementUtils(window.editor);
+    return _this;
+  }
+
+  _createClass(Image, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.editor = document.querySelector('.editor-component');
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.refs.resizer = null;
+      this.refs.image = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          attributes = _this$props.attributes,
+          node = _this$props.node,
+          isSelected = _this$props.isSelected,
+          children = _this$props.children;
+      var isResizing = this.state.isResizing;
+      var data = node.data;
+      var src = data.src;
+
+      if (/^\.\.\/*/.test(src) || /^\.\/*/.test(src)) {
+        var _window$editor$editor = window.editor.editorApi,
+            filePath = _window$editor$editor.filePath,
+            serviceUrl = _window$editor$editor.serviceUrl,
+            repoID = _window$editor$editor.repoID;
+        var originalPath = filePath.slice(0, filePath.lastIndexOf('/')) + '/' + src;
+        src = serviceUrl + '/lib/' + repoID + '/file/' + Utils.pathNormalize(originalPath) + '?raw=1';
+      }
+
+      var dom = /*#__PURE__*/React.createElement("span", Object.assign({
+        className: "seafile-ed-image"
+      }, attributes), isSelected || isResizing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+        className: "seafile-ed-image-inResizing",
+        draggable: false,
+        src: src,
+        width: this.state.width || data.width,
+        alt: ' ',
+        ref: "image"
+      }), this.state.isResizing ? /*#__PURE__*/React.createElement("span", {
+        contentEditable: false,
+        className: "image-size"
+      }, /*#__PURE__*/React.createElement("span", null, this.props.t('width'), ':', parseInt(this.state.width || this.refs.image.clientWidth)), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, this.props.t('height'), ':', this.refs.image.clientHeight)) : null, /*#__PURE__*/React.createElement("span", {
+        ref: "resizer",
+        onMouseDown: this.startMove,
+        className: 'image-resizer'
+      }), isSelected && /*#__PURE__*/React.createElement("span", {
+        contentEditable: false,
+        onClick: this.setFullScreen,
+        className: "image-full-button"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: 'iconfont icon-fullscreen'
+      }), /*#__PURE__*/React.createElement("span", {
+        className: 'image-tooltip'
+      }, this.props.t('Full_screen')))) : /*#__PURE__*/React.createElement("img", {
+        width: data.width || '',
+        draggable: false,
+        src: src,
+        alt: ' ',
+        ref: "image"
+      }), children, this.state.isShowBigImage && this.renderBigImage());
+      return src ? dom : /*#__PURE__*/React.createElement("span", attributes, "Loading...");
+    }
+  }]);
+
+  return Image;
+}(React.Component);
+
+var BigImage = /*#__PURE__*/function (_React$Component2) {
+  _inherits(BigImage, _React$Component2);
+
+  var _super2 = _createSuper(BigImage);
+
+  function BigImage() {
+    _classCallCheck(this, BigImage);
+
+    return _super2.apply(this, arguments);
+  }
+
+  _createClass(BigImage, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement("div", {
+        className: 'big-image-cover',
+        onClick: function onClick(event) {
+          return _this2.props.toggleBigImage(event);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: 'big-image-container'
+      }, /*#__PURE__*/React.createElement("img", {
+        src: this.props.bigImageSrc,
+        alt: ""
+      })), /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick(event) {
+          return _this2.props.toggleBigImage(event);
+        },
+        className: 'image-container-close'
+      }, /*#__PURE__*/React.createElement("i", {
+        className: 'iconfont icon-close'
+      }))));
+    }
+  }]);
+
+  return BigImage;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(Image);

package/dist/editor/editor-component/link.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useSelected } from '@seafile/slate-react';
+
+function Link(props) {
+  var className = useSelected() ? 'seafile-ed-hovermenu-mouseclick' : null;
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props.attributes, {
+    className: 'virtual-link ' + className
+  }), props.children);
+}
+
+export default Link;

package/dist/editor/editor-component/table.js

@@ -0,0 +1,172 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import '../../css/richeditor/table.css';
+
+var TableContainer = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(TableContainer, _React$PureComponent);
+
+  var _super = _createSuper(TableContainer);
+
+  function TableContainer(props) {
+    var _this;
+
+    _classCallCheck(this, TableContainer);
+
+    _this = _super.call(this, props);
+
+    _this.clearSelectedCells = function () {
+      _this.table.querySelectorAll('.selected-cell').forEach(function (selectedCell) {
+        selectedCell.classList.remove('selected-cell', 'selected-cell-left', 'selected-cell-bottom', 'selected-cell-top', 'selected-cell-right');
+      });
+    };
+
+    _this.selectTable = function (event) {
+      _this.startRowIndex = _this.getTableElement(event.target, 'tr').rowIndex;
+      _this.startColIndex = _this.getTableElement(event.target, 'td').cellIndex;
+      window.document.addEventListener('mousemove', _this.selectCellsInTable);
+      window.document.addEventListener('mouseup', _this.onMouseUp);
+    };
+
+    _this.getTableElement = function (node, type) {
+      if (node.nodeName.toLowerCase() === type) return node;
+      var element = node;
+
+      while (element.nodeName.toLowerCase() !== type) {
+        element = element.parentNode;
+      }
+
+      return element;
+    };
+
+    _this.selectCellsInTable = function (event) {
+      if (event.target.nodeName === 'TBODY' || !_this.table.contains(event.target)) {
+        // if  event.target not in the table, clear the mouseMove event
+        return;
+      }
+
+      _this.endRowIndex = _this.getTableElement(event.target, 'tr').rowIndex;
+      _this.endColIndex = _this.getTableElement(event.target, 'td').cellIndex;
+      var minRowIndex = Math.min(_this.startRowIndex, _this.endRowIndex),
+          maxRowIndex = Math.max(_this.startRowIndex, _this.endRowIndex),
+          minColIndex = Math.min(_this.startColIndex, _this.endColIndex),
+          maxColIndex = Math.max(_this.startColIndex, _this.endColIndex);
+
+      if (minRowIndex === maxRowIndex && minColIndex === maxColIndex) {
+        return;
+      } // collapse selection
+
+
+      window.getSelection().collapseToEnd();
+      _this.selectedRowRange = {
+        min: minRowIndex,
+        max: maxRowIndex
+      };
+      _this.selectedColRange = {
+        min: minColIndex,
+        max: maxColIndex
+      };
+      _this.hasSelectedRangeRendered = false;
+
+      _this.forceUpdate();
+    };
+
+    _this.onMouseUp = function () {
+      window.document.removeEventListener('mousemove', _this.selectCellsInTable);
+      window.document.removeEventListener('mouseup', _this.onMouseUp);
+    };
+
+    _this.table = null;
+    _this.selectedRowRange = {
+      min: -1,
+      max: -1
+    };
+    _this.selectedColRange = {
+      min: -1,
+      max: -1
+    };
+    _this.hasSelectedRangeRendered = false;
+    return _this;
+  }
+
+  _createClass(TableContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.table = ReactDOM.findDOMNode(this);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this$selectedRowRang = this.selectedRowRange,
+          minRowIndex = _this$selectedRowRang.min,
+          maxRowIndex = _this$selectedRowRang.max;
+      var _this$selectedColRang = this.selectedColRange,
+          minColIndex = _this$selectedColRang.min,
+          maxColIndex = _this$selectedColRang.max;
+
+      if (minColIndex < 0 || minRowIndex < 0) {
+        this.clearSelectedCells();
+        return;
+      }
+
+      if (this.hasSelectedRangeRendered && this.selectedRowRange.min >= 0 && this.selectedColRange.min >= 0) {
+        // if selected range is selected and has rendered reset selected range
+        this.selectedColRange = {
+          min: -1,
+          max: -1
+        };
+        this.selectedColRange = {
+          min: -1,
+          max: -1
+        };
+        return;
+      } // clear previous selected style before render
+
+
+      this.clearSelectedCells();
+
+      for (var rowIndex = minRowIndex; rowIndex <= maxRowIndex; rowIndex++) {
+        var selectedRow = this.table.querySelectorAll('tr')[rowIndex];
+
+        for (var colIndex = minColIndex; colIndex <= maxColIndex; colIndex++) {
+          selectedRow.querySelectorAll('td')[colIndex].classList.add('selected-cell');
+
+          if (rowIndex === minRowIndex) {
+            selectedRow.querySelectorAll('td')[colIndex].classList.add('selected-cell-top');
+          }
+
+          if (colIndex === minColIndex) {
+            selectedRow.querySelectorAll('td')[colIndex].classList.add('selected-cell-left');
+          }
+
+          if (colIndex === maxColIndex) {
+            selectedRow.querySelectorAll('td')[colIndex].classList.add('selected-cell-right');
+          }
+
+          if (rowIndex === maxRowIndex) {
+            selectedRow.querySelectorAll('td')[colIndex].classList.add('selected-cell-bottom');
+          }
+        }
+      }
+
+      this.hasSelectedRangeRendered = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          attributes = _this$props.attributes,
+          children = _this$props.children;
+      return /*#__PURE__*/React.createElement("table", {
+        onMouseDown: this.selectTable
+      }, /*#__PURE__*/React.createElement("tbody", attributes, children));
+    }
+  }]);
+
+  return TableContainer;
+}(React.PureComponent);
+
+export default TableContainer;

package/dist/editor/editor-component/textlink-hovermenu.js

@@ -0,0 +1,136 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { Button } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+
+var TextLinkHoverMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(TextLinkHoverMenu, _React$Component);
+
+  var _super = _createSuper(TextLinkHoverMenu);
+
+  function TextLinkHoverMenu(props) {
+    var _this;
+
+    _classCallCheck(this, TextLinkHoverMenu);
+
+    _this = _super.call(this, props);
+
+    _this.saveRef = function (ref) {
+      _this.refDom = ref;
+    };
+
+    _this.getLinkUrl = function () {
+      var linkNode = _this.props.editorUtils.getCurrentLinkNode();
+
+      if (linkNode) {
+        _this.linkUrl = linkNode.data.href;
+      }
+    };
+
+    _this.setMenuPosition = function () {
+      if (window.getSelection().anchorOffset !== 0 && window.getSelection().focusOffset !== 0) {
+        var native = window.getSelection();
+        var range = native.getRangeAt(0);
+        var rect = range.getBoundingClientRect();
+
+        if (navigator.userAgent.indexOf('Chrome') < 0 && navigator.userAgent.indexOf('Safari') > 0) {
+          if (range.collapsed && rect.top === 0 && rect.height === 0) {
+            if (range.startOffset === 0) {
+              range.setEnd(range.endContainer, 1);
+            } else {
+              range.setStart(range.startContainer, range.startOffset - 1);
+            }
+
+            rect = range.getBoundingClientRect();
+
+            if (rect.top === 0 && rect.height === 0) {
+              if (range.getClientRects().length) {
+                rect = range.getClientRects()[0];
+              }
+            }
+          }
+        }
+
+        var style = _this.refDom.style;
+        style.zIndex = '1050';
+        style.top = "".concat(rect.top - 45, "px");
+        var left = parseInt(rect.x - 125);
+
+        if (left < 0) {
+          style.left = '0px';
+        } else if (left + 250 > document.body.clientWidth) {
+          style.left = "".concat(document.body.clientWidth - 250, "px");
+        } else {
+          style.left = "".concat(rect.x - 125, "px");
+        }
+      }
+    };
+
+    _this.componentDidMount = function () {
+      requestAnimationFrame(function () {
+        _this.setMenuPosition();
+      });
+    };
+
+    _this.componentWillUnmount = function () {
+      _this.refDom = null;
+    };
+
+    _this.componentWillMount = function () {
+      _this.getLinkUrl();
+    };
+
+    _this.linkUrl = '';
+    return _this;
+  }
+
+  _createClass(TextLinkHoverMenu, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.setMenuPosition();
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps() {
+      this.getLinkUrl();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "seafile-ed-hovermenu",
+        ref: function ref(_ref) {
+          return _this2.refDom = _ref;
+        }
+      }, /*#__PURE__*/React.createElement("a", {
+        href: this.linkUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "seafile-ed-hovermenu-link"
+      }, this.linkUrl), /*#__PURE__*/React.createElement(Button, {
+        color: "",
+        className: "seafile-ed-hovermenu-btn",
+        onClick: this.props.editorUtils.unwrapLink
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-delete"
+      })), /*#__PURE__*/React.createElement(Button, {
+        color: "",
+        onClick: this.props.onToggleLinkDialog,
+        className: "seafile-ed-hovermenu-btn"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "iconfont icon-edit"
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "seafile-ed-hovermenu-triangle"
+      }));
+    }
+  }]);
+
+  return TextLinkHoverMenu;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(TextLinkHoverMenu);