@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IMAGE_DISPLAY_TYPE = exports.IMAGE_BORDER_TYPE = void 0;
+var _blackBorder = _interopRequireDefault(require("../../../../assets/images/black-border.png"));
+var _greyBorder = _interopRequireDefault(require("../../../../assets/images/grey-border.png"));
+var _noBorder = _interopRequireDefault(require("../../../../assets/images/no-border.png"));
+const IMAGE_DISPLAY_TYPE = exports.IMAGE_DISPLAY_TYPE = [{
+  text: 'Inline',
+  value: 'paragraph'
+}, {
+  text: 'Block',
+  value: 'image_block'
+}];
+const IMAGE_BORDER_TYPE = exports.IMAGE_BORDER_TYPE = [{
+  type: 'none',
+  imgUrl: _noBorder.default,
+  value: 'none'
+}, {
+  type: 'grey',
+  imgUrl: _greyBorder.default,
+  value: '2px solid #E5E5E5'
+}, {
+  type: 'black',
+  imgUrl: _blackBorder.default,
+  value: '2px solid #41464A'
+}];

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+const Svg = _ref => {
+  let {
+    t,
+    isSelected,
+    imageRef
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 360 360",
+    preserveAspectRatio: "xMinYMin meet",
+    className: (0, _classnames.default)('sdoc-image-placeholder-wrapper', {
+      'image-selected': isSelected
+    }),
+    ref: imageRef,
+    draggable: false
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#f0f0f0"
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    className: "sdoc-image-content-wrapper",
+    transform: "translate(180, 180) scale(1)"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    className: "sdoc-image-title",
+    transform: "translate(0, 0)"
+  }, /*#__PURE__*/_react.default.createElement("foreignObject", {
+    x: "-85",
+    y: "-16",
+    width: "20",
+    height: "28"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdocfont sdoc-exclamation-circle"
+  })), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-title",
+    transform: "translate(-55, 4)",
+    fontSize: "20",
+    fill: "red",
+    fontFamily: "Arial, sans-serif"
+  }, t('Image_copy_error'))), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-content",
+    transform: "translate(0, 35)",
+    fontSize: "12",
+    textAnchor: "middle",
+    fill: "black",
+    fontFamily: "Arial, sans-serif"
+  }, t('Image_cannot_be_copied_Please_download_the_source_image')), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-content",
+    transform: "translate(0, 55)",
+    fontSize: "12",
+    textAnchor: "middle",
+    fill: "black",
+    fontFamily: "Arial, sans-serif"
+  }, t('And_select_insert_-_image_to_upload'))));
+};
+var _default = exports.default = Svg;

package/dist/basic-sdk/extension/plugins/image/dialogs/image-previewer.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
+var _helpers = require("../helpers");
+require("@seafile/react-image-lightbox/style.css");
+class ImagePreviewer extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "getImageNodes", nodes => {
+      let nodeIndex = 0;
+      const list = [];
+      while (nodes && nodeIndex <= nodes.length - 1) {
+        const currentNode = nodes[nodeIndex];
+        if (currentNode.type === 'image') {
+          const url = (0, _helpers.getImageURL)(currentNode.data);
+          url && list.push(url);
+        } else {
+          list.push(...this.getImageNodes(currentNode.children));
+        }
+        nodeIndex++;
+      }
+      return list;
+    });
+    (0, _defineProperty2.default)(this, "moveToPrevImage", () => {
+      this.setState(prevState => ({
+        imageIndex: (prevState.imageIndex + this.images.length - 1) % this.images.length
+      }));
+    });
+    (0, _defineProperty2.default)(this, "moveToNextImage", () => {
+      this.setState(prevState => ({
+        imageIndex: (prevState.imageIndex + 1) % this.images.length
+      }));
+    });
+    const {
+      editor,
+      imageUrl
+    } = props;
+    this.images = this.getImageNodes(editor.children);
+    this.state = {
+      imageIndex: this.images.findIndex(item => item === imageUrl)
+    };
+  }
+  render() {
+    const {
+      imageIndex
+    } = this.state;
+    const imageItemsLength = this.images.length;
+    const mainSrc = this.images[imageIndex] || '';
+    let imageTitle = '';
+    try {
+      imageTitle = mainSrc ? decodeURI(mainSrc.slice(mainSrc.lastIndexOf('/') + 1)) : '';
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+    const imageTitleEl = /*#__PURE__*/_react.default.createElement("span", {
+      className: "d-flex"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "text-truncate"
+    }, imageTitle), /*#__PURE__*/_react.default.createElement("span", {
+      className: "flex-shrink-0"
+    }, "(", imageIndex + 1, "/", this.images.length, ")"));
+    return /*#__PURE__*/_react.default.createElement(_reactImageLightbox.default, {
+      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,
+      reactModalProps: {
+        shouldReturnFocusAfterClose: false
+      }
+    });
+  }
+}
+var _default = exports.default = ImagePreviewer;

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

@@ -0,0 +1,346 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateImage = exports.selectImageWhenSelectPartial = exports.resetCursor = exports.removeImageBlockNode = exports.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.isImageUrlIsFromUpload = exports.isImageUrlIsFromCopy = exports.insertImageFiles = exports.insertImage = exports.hasSdocImages = exports.handleBase64Image = exports.getSingleImageFromFragment = exports.getImageURL = exports.getImageData = exports.getDigitalSignImgUrl = exports.getColumnByKey = exports.generateImageNode = exports.generateImageInfos = void 0;
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _slugid = _interopRequireDefault(require("slugid"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _constants = require("../../../constants");
+var _context = _interopRequireDefault(require("../../../context"));
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants2 = require("../../constants");
+var _core = require("../../core");
+var _base64ToUnit8array = _interopRequireDefault(require("./base64-to-unit8array"));
+var _imageCache = _interopRequireDefault(require("./image-cache"));
+// TODO: seatable_column
+const getDigitalSignImgUrl = partUrl => {
+  const server = _context.default.getSetting('serviceUrl');
+  const workspaceID = _context.default.getSetting('workspaceID');
+  const dtableUuid = _context.default.getSetting('dtableUuid');
+  if (!partUrl || typeof partUrl !== 'string') return '';
+  return `${server}/workspace/${workspaceID}/asset/${dtableUuid}${partUrl}`;
+};
+exports.getDigitalSignImgUrl = getDigitalSignImgUrl;
+const getColumnByKey = (columns, key) => {
+  const column = columns.find(item => item.key === key);
+  return column || null;
+};
+exports.getColumnByKey = getColumnByKey;
+const isInsertImageMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  const {
+    selection
+  } = editor;
+  if (selection === null) return true;
+  if (!_slate.Range.isCollapsed(selection)) return true;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => {
+      let type = (0, _core.getNodeType)(n);
+      if (!type && (0, _core.isTextNode)(n) && n.id) {
+        const parentNode = (0, _core.getParentNode)(editor.children, n.id);
+        type = (0, _core.getNodeType)(parentNode);
+      }
+      if (type === _constants2.CODE_BLOCK) return true;
+      if (type.startsWith('header')) return true;
+      if (type === _constants2.TITLE) return true;
+      if (type === _constants2.SUBTITLE) return true;
+      if (type === _constants2.LIST_ITEM) return true;
+      if (type === _constants2.CHECK_LIST_ITEM) return true;
+      if (_slate.Editor.isVoid(editor, n)) return true;
+      return false;
+    },
+    universal: true
+  });
+  if (match) return true;
+  return false;
+};
+exports.isInsertImageMenuDisabled = isInsertImageMenuDisabled;
+const generateImageNode = (src, file_uuid) => {
+  const element = (0, _core.generateEmptyElement)(_constants2.IMAGE);
+  let data = {
+    src
+  };
+  if (file_uuid) {
+    data.file_uuid = file_uuid;
+  }
+  return {
+    ...element,
+    data
+  };
+};
+exports.generateImageNode = generateImageNode;
+const insertImage = function (editor, imgInfos, selection) {
+  let position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _constants2.INSERT_POSITION.CURRENT;
+  if (!imgInfos) return;
+  if (position !== _constants2.INSERT_POSITION.AFTER) {
+    if (isInsertImageMenuDisabled(editor)) return;
+  }
+  const imageNodes = imgInfos.map(_ref => {
+    let {
+      src,
+      file_uuid
+    } = _ref;
+    const isCommentEditor = editor.editorType === _constants.COMMENT_EDITOR;
+    const imgSrc = isCommentEditor ? getImageURL({
+      src
+    }) : src;
+    return generateImageNode(imgSrc, file_uuid);
+  });
+  const validSelection = selection || editor.selection;
+  let path = _slate.Editor.path(editor, validSelection);
+  if (position === _constants2.INSERT_POSITION.AFTER) {
+    const p = (0, _core.generateEmptyElement)(_constants2.ELEMENT_TYPE.PARAGRAPH);
+    imageNodes.forEach((item, index) => {
+      p.children[index] = item;
+    });
+    _slate.Transforms.insertNodes(editor, p, {
+      at: [path[0] + 1]
+    });
+    (0, _core.focusEditor)(editor, [path[0] + 1, 2]);
+    return;
+  }
+  const aboveNodeEntry = (0, _core.getAboveBlockNode)(editor);
+  const isEmptyParagraph = aboveNodeEntry[0].type === _constants2.PARAGRAPH && _slate.Node.string(aboveNodeEntry[0]).length === 0;
+  if (imageNodes.length === 1 && isEmptyParagraph) {
+    const imageNode = imageNodes[0];
+    _slate.Transforms.insertNodes(editor, imageNode, {
+      at: validSelection
+    });
+
+    // BLOCKQUOTE and CALL_OUT use inline images
+    let imageType = _constants2.IMAGE_BLOCK;
+    const [topNode] = _slate.Editor.node(editor, [aboveNodeEntry[1][0]]);
+    if ([_constants2.BLOCKQUOTE, _constants2.CALL_OUT].includes(topNode === null || topNode === void 0 ? void 0 : topNode.type)) {
+      imageType = '';
+    }
+    if (imageType === _constants2.IMAGE_BLOCK) {
+      _slate.Transforms.setNodes(editor, {
+        type: imageType
+      }, {
+        at: validSelection
+      });
+      const nodePath = [aboveNodeEntry[1][0]];
+      const nextPath = _slate.Path.next(nodePath);
+      _slate.Transforms.insertNodes(editor, (0, _core.generateDefaultParagraph)(), {
+        at: nextPath
+      });
+      const endOfFirstNode = _slate.Editor.start(editor, nextPath);
+      const range = {
+        anchor: endOfFirstNode,
+        focus: endOfFirstNode
+      };
+      (0, _core.focusEditor)(editor, range);
+    }
+    return;
+  }
+  _slate.Transforms.insertNodes(editor, imageNodes, {
+    at: validSelection
+  });
+  const imageEndSelection = _slate.Path.next(_slate.Path.next(path));
+  (0, _core.focusEditor)(editor, imageEndSelection);
+};
+exports.insertImage = insertImage;
+const updateImage = (editor, data) => {
+  _slate.Transforms.setNodes(editor, {
+    data
+  }, {
+    match: n => (0, _core.getNodeType)(n) === _constants2.IMAGE,
+    at: editor.selection,
+    voids: true
+  });
+};
+exports.updateImage = updateImage;
+const getImageURL = (data, editor) => {
+  const {
+    src: url,
+    column_key
+  } = data;
+  if (column_key) {
+    const column = getColumnByKey(editor.columns || [], column_key);
+    const {
+      type
+    } = column || {};
+    // TODO: Plugin contants, image digital-sign
+    if (type === 'image') {
+      const imgUrl = editor.getColumnCellValue(column_key) || '';
+      const firstSrc = imgUrl.split(',')[0];
+      return firstSrc;
+    } else if (type === 'digital-sign') {
+      const partUrl = editor.getColumnCellValue(column_key) || '';
+      const imgUrl = getDigitalSignImgUrl(partUrl);
+      return imgUrl;
+    }
+  }
+
+  // upload image | drag drop image | cut image
+  if (isImageUrlIsFromUpload(url)) return url;
+
+  // copy from others doc
+  if (isImageUrlIsFromCopy(url)) return url;
+  const serviceUrl = _context.default.getSetting('serviceUrl');
+  const assetsUrl = _context.default.getSetting('assetsUrl');
+  return (0, _urlJoin.default)(serviceUrl, assetsUrl, url);
+};
+exports.getImageURL = getImageURL;
+const hasSdocImages = (originSdocUuid, fragmentData) => {
+  const sdocUuid = _context.default.getSetting('docUuid');
+  const hasImg = fragmentData.some(item => item.children.some(child => (child === null || child === void 0 ? void 0 : child.type) === _constants2.IMAGE));
+  return originSdocUuid !== sdocUuid && hasImg;
+};
+exports.hasSdocImages = hasSdocImages;
+const getImageData = fragmentData => {
+  let imageData = new Set();
+  fragmentData.forEach(item => item.children.forEach(child => {
+    if ((child === null || child === void 0 ? void 0 : child.type) === _constants2.IMAGE && !child.data.src.startsWith('http')) {
+      imageData.add(child.data.src.slice(1));
+    }
+  }));
+  return Array.from(imageData);
+};
+exports.getImageData = getImageData;
+const queryCopyMoveProgressView = function (taskId) {
+  let interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+  let timer;
+  const stop = () => {
+    clearTimeout(timer);
+  };
+  const start = async () => {
+    const res = await _context.default.getCopyMoveProgressView(taskId);
+    const {
+      data: {
+        done
+      }
+    } = res;
+    if (done) {
+      stop();
+      // Reload image
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.RELOAD_IMAGE);
+    } else {
+      timer = setTimeout(start, interval);
+    }
+  };
+  start();
+};
+exports.queryCopyMoveProgressView = queryCopyMoveProgressView;
+const resetCursor = editor => {
+  const {
+    selection
+  } = editor;
+  const currentPath = selection.focus.path;
+  const targetPath = _slate.Path.next(_slate.Path.next(currentPath));
+
+  // Set cursor after image insertion
+  queueMicrotask(() => {
+    _slate.Transforms.select(editor, targetPath);
+  });
+};
+exports.resetCursor = resetCursor;
+const getSingleImageFromFragment = data => {
+  if (data.length !== 1) return null;
+  if (_slate.Node.string(data[0]).length !== 0) return null;
+  const children = data[0].children;
+  const images = children.filter(item => (item === null || item === void 0 ? void 0 : item.type) === _constants2.IMAGE);
+  if (images.length !== 1) return null;
+  return images[0];
+};
+exports.getSingleImageFromFragment = getSingleImageFromFragment;
+const insertImageFiles = (files, editor, targetPath) => {
+  const imgInfos = generateImageInfos(files);
+  insertImage(editor, imgInfos, targetPath, _constants2.INSERT_POSITION.AFTER);
+};
+exports.insertImageFiles = insertImageFiles;
+const selectImageWhenSelectPartial = (event, editor, imageNode, isImageSelected) => {
+  if (isImageSelected) return;
+  const isMouseLeftDown = event.buttons === 1;
+  if (!isMouseLeftDown) return;
+  const {
+    selection
+  } = editor;
+  if (_slate.Range.isCollapsed(selection)) return;
+  let imagePath = _slateReact.ReactEditor.findPath(editor, imageNode);
+  if (imageNode.type === _constants2.IMAGE_BLOCK) {
+    const imageIndex = imageNode.children.findIndex(item => item.type === _constants2.IMAGE);
+    imagePath = imagePath.concat([imageIndex]);
+  }
+  const isIncludedSelection = _slate.Range.includes(selection, imagePath);
+  if (isIncludedSelection) return;
+  // When the mouse hovers over an image, the image is selected.
+  const nextPath = _slate.Path.next(imagePath.slice(0, imagePath.length - 1));
+  const focusRange = {
+    ...selection,
+    focus: {
+      offset: 0,
+      path: [...nextPath, 0]
+    }
+  };
+  (0, _core.focusEditor)(editor, focusRange);
+};
+
+// Upload image when the image is pasted from the clipboard in base64
+exports.selectImageWhenSelectPartial = selectImageWhenSelectPartial;
+const handleBase64Image = (editor, path, imgData) => {
+  const unit8Array = (0, _base64ToUnit8array.default)(imgData.src);
+  const blob = new Blob([unit8Array.u8arr], {
+    type: unit8Array.mime
+  });
+  const file = new File([blob], `${_slugid.default.nice()}.jpg`, {
+    type: unit8Array.mime
+  });
+  _context.default.uploadLocalImage([file]).then(res => {
+    const _data = {
+      ...imgData,
+      src: res[0]
+    };
+    _slate.Transforms.setNodes(editor, {
+      data: _data
+    }, {
+      at: path
+    });
+  });
+};
+exports.handleBase64Image = handleBase64Image;
+const isImageUrlIsFromCopy = url => {
+  if (url && url.startsWith('http')) return true;
+  if (url && url.startsWith('attachment')) return true; // from yuque
+  return false;
+};
+exports.isImageUrlIsFromCopy = isImageUrlIsFromCopy;
+const isImageUrlIsFromUpload = url => {
+  if (url && url.startsWith('blob:http')) return true;
+  return false;
+};
+exports.isImageUrlIsFromUpload = isImageUrlIsFromUpload;
+const generateImageInfos = files => {
+  const newFiles = Array.from(files);
+  const imgInfos = newFiles.filter(item => {
+    if (item && !item.type.startsWith('image/')) return false;
+    if (item && item.type === 'image/svg+xml') return false;
+    return true;
+  }).map(file => {
+    const url = window.URL.createObjectURL(file);
+    const file_uuid = _slugid.default.nice();
+    _imageCache.default.saveImage(file_uuid, file);
+    return {
+      src: url,
+      file_uuid: file_uuid
+    };
+  });
+  return imgInfos;
+};
+exports.generateImageInfos = generateImageInfos;
+const removeImageBlockNode = (editor, path) => {
+  _slate.Transforms.removeNodes(editor, {
+    at: path
+  });
+  const p = (0, _core.generateEmptyElement)(_constants2.ELEMENT_TYPE.PARAGRAPH);
+  _slate.Transforms.insertNodes(editor, p, {
+    at: path
+  });
+  (0, _core.focusEditor)(editor, path);
+};
+exports.removeImageBlockNode = removeImageBlockNode;

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

@@ -0,0 +1,89 @@
+.sdoc-image-hover-menu-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: auto;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container {
+  height: 36px;
+  background-color: #fff;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container>span {
+  padding: 0 8px;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container>span:not(:last-of-type) {
+  padding: 0 8px;
+  border-right: 1px solid #e5e5e5;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container .op-item {
+  position: relative;
+  font-size: 12px;
+  color: #212529;
+  padding: 0 5px;
+  border-radius: 2px;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container .active {
+  background: #f1f1f1;
+}
+
+.sdoc-image-hover-menu-container .hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #999999;
+}
+
+.sdoc-image-hover-menu-container .sdoc-image-popover {
+  position: absolute;
+  top: 37px;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  box-shadow: 0 0 10px #ccc;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  z-index: 101;
+  white-space: nowrap;
+}
+
+.sdoc-image-hover-menu-container .align-popover {
+  left: 80px;
+  min-width: 6rem;
+}
+
+.sdoc-image-hover-menu-container .border-popover {
+  left: 115px;
+  flex-direction: row;
+  height: 80px;
+  align-items: center;
+  padding: 0 8px;
+}
+
+.sdoc-image-hover-menu-container .border-popover .sdoc-dropdown-menu-item .sdoc-dropdown-item-content .sdoc-check-mark {
+  transform: translateX(-24px);
+}
+
+.sdoc-image-hover-menu-container .border-popover .sdoc-dropdown-menu-item:hover {
+  background-color: transparent;
+}