@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/image/use-copy-image.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _context = _interopRequireDefault(require("../../../context"));
+var _helpers = require("./helpers");
+const updateImageNode = async function (editor, element, newUrl) {
+  let isError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const nodePath = _slateReact.ReactEditor.findPath(editor, element);
+  const newData = {
+    ...element.data,
+    src: newUrl,
+    is_copy_error: isError
+  };
+  _slate.Transforms.setNodes(editor, {
+    data: newData
+  }, {
+    at: nodePath
+  });
+};
+const useCopyImage = _ref => {
+  let {
+    editor,
+    element
+  } = _ref;
+  const {
+    data
+  } = element;
+  const {
+    is_copy_error = false
+  } = data;
+  const [isLoading, setIsLoading] = (0, _react.useState)();
+  const [isCopyError, setIsCopyError] = (0, _react.useState)(is_copy_error);
+  (0, _react.useEffect)(() => {
+    const {
+      src: url
+    } = data;
+    if (isCopyError) return;
+    if (!(0, _helpers.isImageUrlIsFromCopy)(url)) return;
+    const downloadAndUploadImages = async url => {
+      try {
+        const response = await fetch(url);
+        if (response.ok) {
+          const blob = await response.blob();
+          const file = new File([blob], 'downloaded_image.png', {
+            type: blob.type
+          });
+          const imageUrl = await _context.default.uploadLocalImage([file]);
+          if (imageUrl && imageUrl[0]) {
+            updateImageNode(editor, element, imageUrl[0]);
+          }
+        } else {
+          throw new Error(`HTTP error status: ${response.status}`);
+        }
+      } catch (error) {
+        console.error(error);
+        updateImageNode(editor, element, url, true);
+        setIsCopyError(true);
+      } finally {
+        setTimeout(() => {
+          setIsLoading(false);
+        }, 500);
+      }
+    };
+    downloadAndUploadImages(url);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    isCopyImageLoading: isLoading,
+    setCopyImageLoading: setIsLoading,
+    isCopyImageError: isCopyError
+  };
+};
+var _default = exports.default = useCopyImage;

package/dist/basic-sdk/extension/plugins/image/use-upload-image.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _context = _interopRequireDefault(require("../../../context"));
+var _helpers = require("./helpers");
+var _imageCache = _interopRequireDefault(require("./image-cache"));
+const updateImageNode = async (editor, element, newUrl) => {
+  const nodePath = _slateReact.ReactEditor.findPath(editor, element);
+  const newData = {
+    src: newUrl
+  };
+  _slate.Transforms.setNodes(editor, {
+    data: newData
+  }, {
+    at: nodePath
+  });
+};
+const useUploadImage = _ref => {
+  let {
+    editor,
+    element
+  } = _ref;
+  const {
+    data
+  } = element;
+  const [isLoading, setIsLoading] = (0, _react.useState)();
+  const [isUploadError, setIsUploadError] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const {
+      src: url,
+      file_uuid
+    } = data;
+    if (!(0, _helpers.isImageUrlIsFromUpload)(url)) return;
+    setIsLoading(true);
+    const uploadCurrentImage = async () => {
+      try {
+        const fileItem = _imageCache.default.getImage(file_uuid);
+        const imageUrl = await _context.default.uploadLocalImage([fileItem]);
+        if (imageUrl && imageUrl[0]) {
+          updateImageNode(editor, element, imageUrl[0]);
+        }
+      } catch (error) {
+        console.error(error.message);
+        setIsUploadError(true);
+      } finally {
+        _imageCache.default.deleteImage(file_uuid);
+        setTimeout(() => {
+          setIsLoading(false);
+        }, 500);
+      }
+    };
+    uploadCurrentImage(url);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    isUploadLoading: isLoading,
+    isUploadError: isUploadError
+  };
+};
+var _default = exports.default = useUploadImage;

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

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BlockquotePlugin", {
+  enumerable: true,
+  get: function () {
+    return _blockquote.default;
+  }
+});
+Object.defineProperty(exports, "CalloutPlugin", {
+  enumerable: true,
+  get: function () {
+    return _callout.default;
+  }
+});
+Object.defineProperty(exports, "CheckListPlugin", {
+  enumerable: true,
+  get: function () {
+    return _checkList.default;
+  }
+});
+Object.defineProperty(exports, "CodeBlockPlugin", {
+  enumerable: true,
+  get: function () {
+    return _codeBlock.default;
+  }
+});
+exports.CommentPlugins = void 0;
+Object.defineProperty(exports, "FileLinkPlugin", {
+  enumerable: true,
+  get: function () {
+    return _fileLink.default;
+  }
+});
+Object.defineProperty(exports, "FontPlugin", {
+  enumerable: true,
+  get: function () {
+    return _font.default;
+  }
+});
+Object.defineProperty(exports, "GroupPlugin", {
+  enumerable: true,
+  get: function () {
+    return _group.default;
+  }
+});
+Object.defineProperty(exports, "HeaderPlugin", {
+  enumerable: true,
+  get: function () {
+    return _header.default;
+  }
+});
+Object.defineProperty(exports, "HtmlPlugin", {
+  enumerable: true,
+  get: function () {
+    return _html.default;
+  }
+});
+Object.defineProperty(exports, "ImagePlugin", {
+  enumerable: true,
+  get: function () {
+    return _image.default;
+  }
+});
+Object.defineProperty(exports, "LinkPlugin", {
+  enumerable: true,
+  get: function () {
+    return _link.default;
+  }
+});
+Object.defineProperty(exports, "ListPlugin", {
+  enumerable: true,
+  get: function () {
+    return _list.default;
+  }
+});
+Object.defineProperty(exports, "MarkDownPlugin", {
+  enumerable: true,
+  get: function () {
+    return _markdown.default;
+  }
+});
+Object.defineProperty(exports, "MentionPlugin", {
+  enumerable: true,
+  get: function () {
+    return _mention.default;
+  }
+});
+Object.defineProperty(exports, "MultiColumnPlugin", {
+  enumerable: true,
+  get: function () {
+    return _multiColumn.default;
+  }
+});
+Object.defineProperty(exports, "ParagraphPlugin", {
+  enumerable: true,
+  get: function () {
+    return _paragraph.default;
+  }
+});
+Object.defineProperty(exports, "SdocLinkPlugin", {
+  enumerable: true,
+  get: function () {
+    return _sdocLink.default;
+  }
+});
+Object.defineProperty(exports, "SearchReplacePlugin", {
+  enumerable: true,
+  get: function () {
+    return _searchReplace.default;
+  }
+});
+Object.defineProperty(exports, "TablePlugin", {
+  enumerable: true,
+  get: function () {
+    return _table.default;
+  }
+});
+Object.defineProperty(exports, "TextAlignPlugin", {
+  enumerable: true,
+  get: function () {
+    return _textAlign.default;
+  }
+});
+Object.defineProperty(exports, "TextPlugin", {
+  enumerable: true,
+  get: function () {
+    return _textStyle.default;
+  }
+});
+Object.defineProperty(exports, "VideoPlugin", {
+  enumerable: true,
+  get: function () {
+    return _video.default;
+  }
+});
+Object.defineProperty(exports, "WikiLinkPlugin", {
+  enumerable: true,
+  get: function () {
+    return _wikiLink.default;
+  }
+});
+exports.default = void 0;
+var _blockquote = _interopRequireDefault(require("./blockquote"));
+var _callout = _interopRequireDefault(require("./callout"));
+var _checkList = _interopRequireDefault(require("./check-list"));
+var _codeBlock = _interopRequireDefault(require("./code-block"));
+var _fileLink = _interopRequireDefault(require("./file-link"));
+var _font = _interopRequireDefault(require("./font"));
+var _group = _interopRequireDefault(require("./group"));
+var _header = _interopRequireDefault(require("./header"));
+var _html = _interopRequireDefault(require("./html"));
+var _image = _interopRequireDefault(require("./image"));
+var _link = _interopRequireDefault(require("./link"));
+var _list = _interopRequireDefault(require("./list"));
+var _markdown = _interopRequireDefault(require("./markdown"));
+var _mention = _interopRequireDefault(require("./mention"));
+var _multiColumn = _interopRequireDefault(require("./multi-column"));
+var _paragraph = _interopRequireDefault(require("./paragraph"));
+var _sdocLink = _interopRequireDefault(require("./sdoc-link"));
+var _searchReplace = _interopRequireDefault(require("./search-replace"));
+var _table = _interopRequireDefault(require("./table"));
+var _textAlign = _interopRequireDefault(require("./text-align"));
+var _textStyle = _interopRequireDefault(require("./text-style"));
+var _video = _interopRequireDefault(require("./video"));
+var _wikiLink = _interopRequireDefault(require("./wiki-link"));
+const Plugins = [_markdown.default, _html.default, _header.default, _link.default, _blockquote.default, _list.default, _checkList.default, _codeBlock.default, _image.default, _video.default, _table.default, _multiColumn.default, _textStyle.default, _textAlign.default, _font.default, _sdocLink.default, _paragraph.default, _fileLink.default, _callout.default, _searchReplace.default, _group.default];
+const CommentPlugins = exports.CommentPlugins = [_markdown.default, _html.default, _paragraph.default, _textStyle.default, _list.default, _image.default, _link.default, _mention.default, _blockquote.default];
+var _default = exports.default = Plugins;

package/dist/basic-sdk/extension/plugins/link/dialog/add-link-dialog/index.js

@@ -0,0 +1,140 @@
+"use strict";
+
+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 _core = require("../../../../core");
+var _helpers = require("../../helpers");
+const AddLinkDialog = _ref => {
+  let {
+    editor,
+    className,
+    element,
+    insertPosition,
+    slateNode,
+    closeDialog,
+    linkTitle,
+    handleSubmit
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const [linkErrorMessage, setLinkErrorMessage] = (0, _react.useState)('');
+  const [titleErrorMessage, setTitleErrorMessage] = (0, _react.useState)('');
+  const {
+    title: oldTitle,
+    href: oldURL
+  } = element || {
+    title: linkTitle || '',
+    href: ''
+  };
+  const initTitle = (0, _react.useMemo)(() => oldTitle ? oldTitle : (0, _core.getEditorString)(editor, editor.selection), [editor, oldTitle]);
+  const [title, setTitle] = (0, _react.useState)(initTitle);
+  const [url, setURL] = (0, _react.useState)(oldURL);
+  const submit = (0, _react.useCallback)(() => {
+    setLinkErrorMessage('');
+    setTitleErrorMessage('');
+    if (!url) {
+      setLinkErrorMessage(t('The_link_address_is_required'));
+      return;
+    }
+    if (!title) {
+      setTitleErrorMessage(t('The_link_title_is_required'));
+      return;
+    }
+    if ((0, _helpers.checkLink)(url)) {
+      setLinkErrorMessage(t('The_link_address_is_invalid'));
+      return;
+    }
+    const isEdit = oldURL || oldTitle;
+    if (isEdit) {
+      (0, _helpers.updateLink)(editor, title, url);
+    } else {
+      (0, _helpers.insertLink)(editor, title, url, insertPosition, slateNode);
+    }
+    handleSubmit && handleSubmit();
+    closeDialog();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, url, title, oldTitle, oldURL, insertPosition]);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if (event.keyCode === 13) {
+      event.preventDefault();
+      submit();
+      return;
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, url, title, oldTitle, oldURL, insertPosition]);
+  const handleUrlChange = (0, _react.useCallback)(event => {
+    const value = event.target.value.trim();
+    if (value === url) return;
+    setURL(value);
+  }, [url]);
+  const handleTitleChange = (0, _react.useCallback)(event => {
+    const value = event.target.value;
+    if (value === title) return;
+    setTitle(value);
+  }, [title]);
+  const close = (0, _react.useMemo)(() => {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "sdoc-add-link-close-icon",
+      onClick: closeDialog
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-sm-close",
+      "aria-hidden": "true"
+    }));
+  }, [closeDialog]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    isOpen: true,
+    autoFocus: false,
+    toggle: closeDialog,
+    className: className,
+    zIndex: 1071,
+    returnFocusAfterClose: false
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+    close: close
+  }, t('Insert_link')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+    for: "addLink"
+  }, t('Link_address')), /*#__PURE__*/_react.default.createElement("input", {
+    onKeyDown: onKeyDown,
+    autoFocus: true,
+    type: "url",
+    className: "form-control",
+    id: "addLink",
+    value: url || '',
+    onChange: handleUrlChange
+  }), linkErrorMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
+    color: "danger",
+    className: "mt-2"
+  }, t(linkErrorMessage))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+    for: "addTitle"
+  }, t('Link_title')), /*#__PURE__*/_react.default.createElement("input", {
+    onKeyDown: onKeyDown,
+    type: "text",
+    className: "form-control",
+    id: "addTitle",
+    value: title,
+    onChange: handleTitleChange
+  }), titleErrorMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
+    color: "danger",
+    className: "mt-2"
+  }, t(titleErrorMessage))))), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "secondary",
+    onClick: closeDialog
+  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "primary",
+    disabled: false,
+    onClick: submit
+  }, t('Add_link'))));
+};
+var _default = exports.default = AddLinkDialog;

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

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.upsertLinkText = exports.updateLink = exports.unWrapLinkNode = exports.isWeChat = exports.isSdocFile = exports.isMenuDisabled = exports.isLinkToolBarActive = exports.insertLink = exports.getMenuPosition = exports.getLinkType = exports.genLinkNode = exports.checkLink = void 0;
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _slugid = _interopRequireDefault(require("slugid"));
+var _constants = require("../../constants");
+var _core = require("../../core");
+const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  if (editor.selection == null) return true;
+  const selectedElems = (0, _core.getSelectedElems)(editor);
+  const notMatch = selectedElems.some(elem => {
+    const {
+      type
+    } = elem;
+    if (editor.isVoid(elem)) return true;
+    if ([_constants.CODE_BLOCK, _constants.CODE_LINE, _constants.LINK].includes(type)) return true;
+    return false;
+  });
+  if (notMatch) return true; // disabled
+  return false; // enable
+};
+exports.isMenuDisabled = isMenuDisabled;
+const checkLink = url => {
+  if (url.indexOf('http') !== 0) {
+    return true;
+  }
+  return false;
+};
+exports.checkLink = checkLink;
+const genLinkNode = (url, text) => {
+  const linkNode = {
+    id: _slugid.default.nice(),
+    type: 'link',
+    href: url,
+    title: text,
+    children: [{
+      id: _slugid.default.nice(),
+      text: text || ''
+    }]
+  };
+  return linkNode;
+};
+exports.genLinkNode = genLinkNode;
+const getLinkType = editor => {
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => (0, _core.getNodeType)(n) === _constants.LINK,
+    universal: true
+  });
+  if (!match) return _constants.PARAGRAPH;
+  const [n] = match;
+  return (0, _core.getNodeType)(n);
+};
+exports.getLinkType = getLinkType;
+const insertLink = function (editor, title, url) {
+  let position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _constants.INSERT_POSITION.CURRENT;
+  let slateNode = arguments.length > 4 ? arguments[4] : undefined;
+  if (position === _constants.INSERT_POSITION.CURRENT && isMenuDisabled(editor)) return;
+  if (!title || !url) return;
+  const linkNode = genLinkNode(url, title);
+  if (position === _constants.INSERT_POSITION.AFTER) {
+    let path = _slate.Editor.path(editor, editor.selection);
+    if (slateNode && (slateNode === null || slateNode === void 0 ? void 0 : slateNode.type) === _constants.LIST_ITEM) {
+      path = _slateReact.ReactEditor.findPath(editor, slateNode);
+      const nextPath = _slate.Path.next(path);
+      _slate.Transforms.insertNodes(editor, linkNode, {
+        at: nextPath
+      });
+      return;
+    }
+    const p = (0, _core.generateEmptyElement)(_constants.ELEMENT_TYPE.PARAGRAPH);
+    p.children[1] = linkNode;
+    _slate.Transforms.insertNodes(editor, p, {
+      at: [path[0] + 1]
+    });
+    return;
+  }
+
+  // Selection folded or not
+  const {
+    selection
+  } = editor;
+  if (selection == null) return;
+  const isCollapsed = _slate.Range.isCollapsed(selection);
+  if (isCollapsed) {
+    _slate.Transforms.insertNodes(editor, linkNode);
+    return;
+  }
+  const selectedText = _slate.Editor.string(editor, selection); // Selected text
+
+  // If the selected text is different from the typed text, delete the text and insert the link
+  if (selectedText !== title) {
+    editor.deleteFragment();
+    _slate.Transforms.insertNodes(editor, linkNode);
+    return;
+  }
+
+  // If the selected text is the same as the entered text, only the link can be wrapped
+  _slate.Transforms.wrapNodes(editor, linkNode, {
+    split: true
+  });
+  _slate.Transforms.collapse(editor, {
+    edge: 'end'
+  });
+};
+exports.insertLink = insertLink;
+const updateLink = (editor, newText, newUrl) => {
+  // Update children
+  const linkAbove = (0, _core.getAboveNode)(editor, {
+    match: {
+      type: _constants.LINK
+    }
+  });
+  if (linkAbove) {
+    const {
+      href: oldUrl,
+      title: oldText
+    } = linkAbove[0] || {};
+    if (oldUrl !== newUrl || oldText !== newText) {
+      _slate.Transforms.setNodes(editor, {
+        href: newUrl,
+        title: newText
+      }, {
+        at: linkAbove[1]
+      });
+    }
+    upsertLinkText(editor, {
+      text: newText
+    });
+    return true;
+  }
+};
+exports.updateLink = updateLink;
+const upsertLinkText = (editor, _ref) => {
+  let {
+    text
+  } = _ref;
+  const newLink = (0, _core.getAboveNode)(editor, {
+    match: {
+      type: _constants.LINK
+    }
+  });
+  if (newLink) {
+    const [newLInkNode, newLinkPath] = newLink;
+    if (text && text.length && text !== (0, _core.getEditorString)(editor, newLinkPath)) {
+      const firstText = newLInkNode.children[0];
+      (0, _core.replaceNodeChildren)(editor, {
+        at: newLinkPath,
+        nodes: {
+          ...firstText,
+          text
+        },
+        insertOptions: {
+          select: true
+        }
+      });
+    }
+  }
+};
+exports.upsertLinkText = upsertLinkText;
+const unWrapLinkNode = editor => {
+  if (editor.selection == null) return;
+  const [nodeEntry] = _slate.Editor.nodes(editor, {
+    match: n => (0, _core.getNodeType)(n) === _constants.LINK
+  });
+
+  // If the selection is not in a link node, it is disabled
+  if (nodeEntry == null || nodeEntry[0] == null) return;
+
+  // unlink
+  _slate.Transforms.unwrapNodes(editor, {
+    match: n => (0, _core.getNodeType)(n) === _constants.LINK
+  });
+};
+exports.unWrapLinkNode = unWrapLinkNode;
+const isSdocFile = (res, url) => {
+  const {
+    data: {
+      files_info
+    }
+  } = res;
+  const fileInfo = files_info[url];
+  const {
+    is_dir,
+    file_ext
+  } = fileInfo || {};
+  return !is_dir && file_ext === 'sdoc';
+};
+exports.isSdocFile = isSdocFile;
+const isWeChat = () => {
+  let ua = window.navigator.userAgent.toLowerCase();
+  let isWeChat = ua.match(/MicroMessenger/i) === 'micromessenger';
+  let isEnterpriseWeChat = ua.match(/MicroMessenger/i) === 'micromessenger' && ua.match(/wxwork/i) === 'wxwork';
+  return isEnterpriseWeChat || isWeChat;
+};
+exports.isWeChat = isWeChat;
+const getMenuPosition = (element, editor) => {
+  if (!element) return {};
+  const {
+    top,
+    left,
+    width
+  } = element.getBoundingClientRect();
+  // top = top distance - menu height
+  const menuTop = top - 42;
+  // left = left distance - (menu width / 2) + (link with / 2)
+  const menuLeft = left - 140 / 2 + width / 2;
+  let menuPosition = {
+    top: menuTop,
+    left: menuLeft
+  };
+  // topOffset: the editor container left-top distance with browser top
+  if (editor.topOffset && menuPosition.top < editor.topOffset) {
+    menuPosition['display'] = 'none';
+  }
+  return menuPosition;
+};
+exports.getMenuPosition = getMenuPosition;
+const isLinkToolBarActive = editor => {
+  if (!editor.selection) return false;
+  const [nodeEntry] = _slate.Editor.nodes(editor, {
+    match: n => (0, _core.getNodeType)(n) === _constants.LINK
+  });
+  if (nodeEntry) return true;
+  return false;
+};
+exports.isLinkToolBarActive = isLinkToolBarActive;