@seafile/sdoc-editor 0.1.0 → 0.1.2

package/dist/containers/editor-widgets/image.js

@@ -1,237 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-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 Lightbox from '@seafile/react-image-lightbox';
-import { Utils } from '../../utils/utils';
-import InlineElementUtils from '../editor-utils/inline-element-utils';
-import EditorContext from '../editor-context';
-import '@seafile/react-image-lightbox/style.css';
-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.renderImagePreviewer = function () {
-      return /*#__PURE__*/React.createElement(ImagePreviewer, {
-        imageUrl: _this.imgSrc,
-        toggleImagePreviewer: _this.toggleBigImage
-      });
-    };
-    _this.state = {
-      width: null,
-      isResizing: false,
-      isShowBigImage: false
-    };
-    var editor = EditorContext.getEditor();
-    _this.inlineElementUtils = new InlineElementUtils(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 editor = EditorContext.getEditor();
-        var _editor$editorApi = editor.editorApi,
-          filePath = _editor$editorApi.filePath,
-          serviceUrl = _editor$editorApi.serviceUrl,
-          repoID = _editor$editorApi.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.renderImagePreviewer());
-      return src ? dom : /*#__PURE__*/React.createElement("span", attributes, "Loading...");
-    }
-  }]);
-  return Image;
-}(React.Component);
-var ImagePreviewer = /*#__PURE__*/function (_React$Component2) {
-  _inherits(ImagePreviewer, _React$Component2);
-  var _super2 = _createSuper(ImagePreviewer);
-  function ImagePreviewer(props) {
-    var _this2;
-    _classCallCheck(this, ImagePreviewer);
-    _this2 = _super2.call(this, props);
-    _this2.getImageNodes = function (nodes) {
-      var nodeIndex = 0;
-      var list = [];
-      while (nodes && nodeIndex <= nodes.length - 1) {
-        var currentNode = nodes[nodeIndex];
-        if (currentNode.type === 'image') {
-          currentNode.data.src && list.push(currentNode.data.src);
-        } else {
-          list.push.apply(list, _toConsumableArray(_this2.getImageNodes(currentNode.children)));
-        }
-        nodeIndex++;
-      }
-      return list;
-    };
-    _this2.moveToPrevImage = function () {
-      _this2.setState(function (prevState) {
-        return {
-          imageIndex: (prevState.imageIndex + _this2.images.length - 1) % _this2.images.length
-        };
-      });
-    };
-    _this2.moveToNextImage = function () {
-      _this2.setState(function (prevState) {
-        return {
-          imageIndex: (prevState.imageIndex + 1) % _this2.images.length
-        };
-      });
-    };
-    var editor = EditorContext.getEditor();
-    _this2.images = _this2.getImageNodes(editor.children);
-    _this2.state = {
-      imageIndex: _this2.images.findIndex(function (item) {
-        return item === props.imageUrl;
-      })
-    };
-    return _this2;
-  }
-  _createClass(ImagePreviewer, [{
-    key: "render",
-    value: function render() {
-      var imageIndex = this.state.imageIndex;
-      var imageItemsLength = this.images.length;
-      var mainSrc = this.images[imageIndex];
-      var imageTitle = '';
-      try {
-        imageTitle = mainSrc ? decodeURI(mainSrc.slice(mainSrc.lastIndexOf('/') + 1)) : '';
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.log(error);
-      }
-      var imageTitleEl = /*#__PURE__*/React.createElement("span", {
-        className: "d-flex"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "text-truncate"
-      }, imageTitle), /*#__PURE__*/React.createElement("span", {
-        className: "flex-shrink-0"
-      }, "(", imageIndex + 1, "/", this.images.length, ")"));
-      return /*#__PURE__*/React.createElement(Lightbox, {
-        wrapperClassName: "sf-editor-image-previewer",
-        imageTitle: imageTitleEl,
-        mainSrc: mainSrc,
-        toolbarButtons: [],
-        nextSrc: this.images[(imageIndex + 1) % imageItemsLength],
-        prevSrc: this.images[(imageIndex + imageItemsLength - 1) % imageItemsLength],
-        onCloseRequest: this.props.toggleImagePreviewer,
-        onMovePrevRequest: this.moveToPrevImage,
-        onMoveNextRequest: this.moveToNextImage,
-        imagePadding: 70,
-        reactModalStyle: {
-          overlay: {
-            zIndex: 1071
-          }
-        }
-      });
-    }
-  }]);
-  return ImagePreviewer;
-}(React.Component);
-export default withTranslation('seafile-editor')(Image);

package/dist/containers/editor-widgets/link.js

@@ -1,9 +0,0 @@
-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/containers/editor-widgets/table.js

@@ -1,144 +0,0 @@
-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 '../../assets/css/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/containers/element-model/blockquote.js

@@ -1,13 +0,0 @@
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-var Blockquote = /*#__PURE__*/_createClass(function Blockquote(options) {
-  _classCallCheck(this, Blockquote);
-  this.type = options.type || 'blockquote';
-  this.children = options.children || [{
-    text: ''
-  }];
-});
-var generateBlockquote = function generateBlockquote(options) {
-  return Object.assign({}, new Blockquote(options));
-};
-export default generateBlockquote;

package/dist/containers/element-model/column.js

@@ -1,19 +0,0 @@
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-var Column = /*#__PURE__*/_createClass(function Column(options) {
-  _classCallCheck(this, Column);
-  this.type = options.type || 'column';
-  this.data = options.data || {
-    key: '',
-    name: '',
-    bold: false,
-    italic: false
-  };
-  this.children = options.children || [{
-    text: ''
-  }];
-});
-var generateColumn = function generateColumn(options) {
-  return Object.assign({}, new Column(options));
-};
-export default generateColumn;

package/dist/containers/element-model/image.js

@@ -1,16 +0,0 @@
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-var Image = /*#__PURE__*/_createClass(function Image(options) {
-  _classCallCheck(this, Image);
-  this.type = options.type || 'image';
-  this.data = options.data || {
-    src: ''
-  };
-  this.children = options.children || [{
-    text: ''
-  }];
-});
-var generateImage = function generateImage(options) {
-  return Object.assign({}, new Image(options));
-};
-export default generateImage;

package/dist/containers/element-model/link.js

@@ -1,16 +0,0 @@
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-var Link = /*#__PURE__*/_createClass(function Link(options) {
-  _classCallCheck(this, Link);
-  this.type = options.type || 'link';
-  this.children = options.children || [{
-    text: ''
-  }];
-  this.data = options.data || {
-    href: ''
-  };
-});
-var generateLinkElement = function generateLinkElement(options) {
-  return Object.assign({}, new Link(options));
-};
-export default generateLinkElement;

package/dist/containers/element-model/table.js

@@ -1,57 +0,0 @@
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-var Table = /*#__PURE__*/_createClass(function Table() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  _classCallCheck(this, Table);
-  this.type = options.type || 'table';
-  var rowCount = options.rowCount,
-    columnCount = options.columnCount;
-  var children = options.children;
-  if (rowCount) {
-    var list = new Array(rowCount).fill('');
-    children = list.map(function () {
-      return generateTableRow({
-        columnCount: columnCount
-      });
-    });
-  }
-  this.children = children;
-});
-var TableRow = /*#__PURE__*/_createClass(function TableRow() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  _classCallCheck(this, TableRow);
-  this.type = options.type || 'table_row';
-  var columnCount = options.columnCount;
-  var children = options.children;
-  if (columnCount) {
-    var list = new Array(columnCount).fill('');
-    children = list.map(function () {
-      return generateTableCell();
-    });
-  }
-  this.children = children;
-});
-var TableCell = /*#__PURE__*/_createClass(function TableCell() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  _classCallCheck(this, TableCell);
-  this.type = options.type || 'table_cell';
-  this.children = options.children || [{
-    type: 'paragraph',
-    children: [{
-      text: ''
-    }]
-  }];
-  this.data = options.data || {
-    align: 'left'
-  };
-});
-var generateTable = function generateTable(options) {
-  return Object.assign({}, new Table(options));
-};
-var generateTableRow = function generateTableRow(options) {
-  return Object.assign({}, new TableRow(options));
-};
-var generateTableCell = function generateTableCell(options) {
-  return Object.assign({}, new TableCell(options));
-};
-export { generateTable, generateTableRow, generateTableCell };

package/dist/containers/element-model/text.js

@@ -1,10 +0,0 @@
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-var Text = /*#__PURE__*/_createClass(function Text(options) {
-  _classCallCheck(this, Text);
-  this.text = options.text || '';
-});
-var generateTextElement = function generateTextElement(options) {
-  return Object.assign({}, new Text(options));
-};
-export default generateTextElement;

package/dist/containers/render-utils/common-utils.js

@@ -1,80 +0,0 @@
-import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import Prism from 'prismjs';
-export var decorationNode = function decorationNode(_ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-    node = _ref2[0],
-    path = _ref2[1];
-  if (node.type !== 'code_block') return [];
-  var languageType = node.data.syntax;
-  if (languageType === 'none') return [];
-  var grammer = Prism.languages[languageType];
-  var codeLines = node.children;
-  if (!grammer) {
-    return [];
-  }
-  var blockText = codeLines.map(function (codeLine) {
-    return codeLine.children[0].text;
-  }).join('\n');
-  var tokens = Prism.tokenize(blockText, grammer);
-  var decorations = [];
-  var textLine = 0;
-  var offset = 0;
-  var _iterator = _createForOfIteratorHelper(tokens),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var token = _step.value;
-      if (typeof token === 'string' && token.indexOf('\n') >= 0) {
-        //the varialble enterNum is the num of \n in the token
-        // get the number of \n buy split the token by '\n'
-        var newlineTokens = token.split('\n');
-        var enterNum = newlineTokens.length - 1;
-        // get the next code_line which the content of is is not ' ' or null;
-        textLine += enterNum;
-        // get the initial offset of the code_line
-        offset = newlineTokens.pop().length;
-        continue;
-      }
-      if (typeof token === 'string') {
-        var textPath = path.slice();
-        textPath.push(textLine, 0);
-        var decoration = {
-          anchor: {
-            path: textPath,
-            offset: offset
-          },
-          focus: {
-            path: textPath,
-            offset: offset + token.length
-          },
-          type: 'text'
-        };
-        decorations.push(decoration);
-        offset += token.length;
-      } else if (typeof token.content === 'string') {
-        var _textPath = path.slice();
-        _textPath.push(textLine, 0);
-        var _decoration = {
-          anchor: {
-            path: _textPath,
-            offset: offset
-          },
-          focus: {
-            path: _textPath,
-            offset: offset + token.content.length
-          },
-          decoration: true,
-          type: token.type
-        };
-        decorations.push(_decoration);
-        offset += token.content.length;
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return decorations;
-};