@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/comment/utils/index.js

@@ -0,0 +1,281 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertComment = exports.checkMentionOperation = exports.CommentUtilities = void 0;
+Object.defineProperty(exports, "createNotify", {
+  enumerable: true,
+  get: function () {
+    return _notificationUtils.createNotify;
+  }
+});
+exports.focusToCommentElement = void 0;
+Object.defineProperty(exports, "generatorNotificationKey", {
+  enumerable: true,
+  get: function () {
+    return _notificationUtils.generatorNotificationKey;
+  }
+});
+exports.searchCollaborators = exports.getEventClassName = exports.getCommentElementById = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _constants = require("../../constants");
+var _constants2 = require("../../extension/constants");
+var _core = require("../../extension/core");
+var _helper = require("../../extension/plugins/mention/helper");
+var _getEventTransfer = _interopRequireDefault(require("./get-event-transfer"));
+var _notificationUtils = require("./notification-utils");
+const searchCollaborators = (collaborators, searchValue, editor) => {
+  const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
+  const validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
+  if (!validSearchValue) return validCollaborators;
+
+  // The current character is '@' and the previous character is a null character
+  const beforeStr = (0, _helper.getPreCharacters)(editor);
+  const isEmptyStr = beforeStr.slice(-2, -1).trim().length === 0;
+  if (beforeStr.slice(-1) === '@' && isEmptyStr) {
+    return validCollaborators;
+  }
+  return validCollaborators.filter(collaborator => {
+    const {
+      name,
+      name_pinyin = ''
+    } = collaborator;
+    if (name.toString().toLowerCase().indexOf(validSearchValue) > -1) return true;
+    if (!name_pinyin) return false;
+    const validNamePinyin = name_pinyin.toString().toLowerCase();
+    const validSearchPinyinValue = validSearchValue.replace(/ |'/g, '');
+
+    // complete: For example, seatable can be retrieved when searching for sea.
+    if (validNamePinyin.indexOf(validSearchPinyinValue) > -1) return true;
+    if (validNamePinyin.replace(/'/g, '').indexOf(validSearchPinyinValue) > -1) return true;
+    const validNamePinyinList = validNamePinyin.split('\'');
+    // acronym: For example, sea table can be retrieved when searching for st.
+    const namePinyinAcronym = validNamePinyinList.map(item => item && item.trim() ? item.trim().slice(0, 1) : '');
+    if (namePinyinAcronym.join('').indexOf(validSearchPinyinValue) > -1) return true;
+    return false;
+  });
+};
+
+// Mailto, file, tel, callto, sms, cid, xmpp, etc. are not support
+// const ALLOWED_URL_REG = /((http|https):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g;
+// export const textToHtml = (text) => {
+//   if (!text) return '';
+//   return text.replace(ALLOWED_URL_REG, '<a href="$1" target="_blank" class=' + COMMENT_URL_CLASSNAME + '>$1</a>');
+// };
+exports.searchCollaborators = searchCollaborators;
+const convertComment = value => {
+  return value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+};
+exports.convertComment = convertComment;
+const checkMentionOperation = event => {
+  const {
+    keyCode
+  } = event;
+  const {
+    Escape,
+    LeftArrow,
+    RightArrow
+  } = _constants.KeyCodes;
+  if (keyCode === Escape || keyCode === LeftArrow || keyCode === RightArrow) return false;
+  return true;
+};
+exports.checkMentionOperation = checkMentionOperation;
+class CommentUtilities {
+  constructor() {
+    (0, _defineProperty2.default)(this, "onInsertElement", _ref => {
+      let {
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      } = _ref;
+      if (range) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      return this.createHtmlElement({
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      });
+    });
+    (0, _defineProperty2.default)(this, "getHtmlElement", (nodeType, content) => {
+      switch (nodeType) {
+        case 'image':
+          {
+            let parentElement = document.createElement('div');
+            parentElement.className = 'image-container';
+            parentElement.contentEditable = 'false';
+            let imageContainer = document.createElement('img');
+            imageContainer.src = content;
+            imageContainer.height = 60;
+            parentElement.appendChild(imageContainer);
+            return parentElement.outerHTML;
+          }
+        default:
+          {
+            return '';
+          }
+      }
+    });
+    (0, _defineProperty2.default)(this, "createHtmlElement", _ref2 => {
+      let {
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      } = _ref2;
+      let spanNode1;
+      let spanNode2;
+      let imageContainer;
+      if (nodeType === 'image') {
+        spanNode1 = document.createElement('div');
+        spanNode1.className = 'image-container';
+        spanNode1.contentEditable = 'false';
+        imageContainer = document.createElement('img');
+        imageContainer.src = content;
+        imageContainer.height = 60;
+        spanNode1.appendChild(imageContainer);
+        spanNode2 = document.createElement('span');
+        spanNode2.innerHTML = ' ';
+      }
+      if (nodeType === 'collaborator') {
+        spanNode1 = document.createElement('span');
+        spanNode2 = document.createElement('span');
+        spanNode1.className = 'at-text';
+        spanNode1.innerHTML = `@${content.name}`;
+        spanNode2.innerHTML = '&nbsp;';
+      }
+      let frag = document.createDocumentFragment();
+      frag.appendChild(spanNode1);
+      const lastNode = frag.appendChild(spanNode2);
+      if (range) {
+        range.insertNode(frag);
+      } else {
+        commentRef.current.appendChild(frag);
+        range = selection.getRangeAt(0);
+      }
+      if (lastNode) {
+        range = range.cloneRange();
+        range.setStartAfter(lastNode);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      return range;
+    });
+    (0, _defineProperty2.default)(this, "onSelectParticipant", _ref3 => {
+      let {
+        selection,
+        range,
+        participant,
+        callBack,
+        commentRef
+      } = _ref3;
+      if (range) {
+        // delete '@xxx';
+        selection.removeAllRanges();
+        selection.addRange(range);
+        const textNode = range.startContainer;
+        const atIndex = this.getAtIndexWithAnchorPosition(range.startOffset, textNode.data);
+        if (atIndex > -1) {
+          range.setStart(textNode, atIndex);
+          range.setEnd(textNode, range.endOffset);
+          range.deleteContents();
+        }
+      }
+      let newRange = this.createHtmlElement({
+        selection,
+        range,
+        content: participant,
+        nodeType: 'collaborator',
+        commentRef
+      });
+      if (callBack) {
+        callBack();
+      }
+      if (commentRef.current) {
+        commentRef.current.focus();
+      }
+      return newRange;
+    });
+    /**
+     * get the index of '@' from anchor position.
+     * @param {*} anchorPosition '@text|anchor position|'
+     * @param {*} text '@abc'
+     * @returns index
+     * e.g. '@abc|anchor position|' // 0
+     *      '@123 @|anchor position| @abc' // 5
+     */
+    (0, _defineProperty2.default)(this, "getAtIndexWithAnchorPosition", (anchorPosition, text) => {
+      let atIndex = -1;
+      for (let i = anchorPosition - 1; i > -1; i--) {
+        if (text[i] === '@') {
+          atIndex = i;
+          break;
+        }
+      }
+      return atIndex;
+    });
+    (0, _defineProperty2.default)(this, "onPaste", (event, callBack) => {
+      event.stopPropagation();
+      let cliperData = (0, _getEventTransfer.default)(event);
+      if (cliperData.files) {
+        let file = cliperData.files[0];
+        let isImage = /image/i.test(file.type);
+        if (isImage) {
+          event.preventDefault();
+          if (callBack) {
+            callBack(cliperData.files);
+          }
+        }
+      } else {
+        event.preventDefault();
+        let text = cliperData.text;
+        if (document.queryCommandSupported('insertText')) {
+          document.execCommand('insertText', false, text);
+        } else {
+          document.execCommand('paste', false, text);
+        }
+      }
+    });
+  }
+}
+exports.CommentUtilities = CommentUtilities;
+const focusToCommentElement = (editor, element) => {
+  const path = (0, _core.findPath)(editor, element);
+  const endOfFirstNode = _slate.Editor.end(editor, path);
+  const startOfFirstNode = _slate.Editor.start(editor, path);
+  const range = {
+    anchor: [_constants2.ELEMENT_TYPE.LIST_ITEM, _constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST].includes(element.type) ? startOfFirstNode : endOfFirstNode,
+    focus: endOfFirstNode
+  };
+  (0, _core.focusEditor)(editor, range);
+};
+exports.focusToCommentElement = focusToCommentElement;
+const getCommentElementById = (elementId, editor) => {
+  let element = null;
+  const dom = document.querySelectorAll(`[data-id="${elementId}"]`)[0];
+  if (dom) {
+    const slateNode = _slateReact.ReactEditor.toSlateNode(editor, dom);
+    if (slateNode) {
+      element = slateNode;
+    }
+  }
+  return element;
+};
+exports.getCommentElementById = getCommentElementById;
+const getEventClassName = e => {
+  // svg mouseEvent event.target.className is an object
+  if (!e || !e.target) return '';
+  return e.target.getAttribute('class') || '';
+};
+exports.getEventClassName = getEventClassName;

package/dist/basic-sdk/comment/utils/notification-utils.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatorNotificationKey = exports.createNotify = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
+var _context = _interopRequireDefault(require("../../context"));
+_dayjs.default.extend(_relativeTime.default);
+const PERMISSION_GRANTED = 'granted';
+const notify = ($title, $options) => {
+  const notification = new Notification($title, $options);
+
+  // auto clear notifications
+  const timer = setTimeout(notification.close.bind(notification), 5000);
+  notification.onshow = function (event) {
+    const {
+      mediaUrl
+    } = _context.default.getSetting('mediaUrl');
+    let newAudioElement = document.createElement('audio');
+    newAudioElement.setAttribute('src', `${mediaUrl}audio/classic.mp3`);
+    newAudioElement.setAttribute('autoplay', 'autoplay');
+    newAudioElement.setAttribute('id', 'seatable-audio');
+    let audioElement = document.getElementById('seatable-audio');
+    if (audioElement) {
+      document.body.removeChild(audioElement);
+    }
+    document.body.appendChild(newAudioElement);
+  };
+  notification.onclose = function () {
+    clearTimeout(timer);
+  };
+  notification.onclick = function () {
+    notification.close();
+  };
+};
+const createNotify = (title, options) => {
+  // Let's check if the browser supports notifications
+  if (!('Notification' in window)) {
+    return false;
+  }
+  if (Notification.permission === PERMISSION_GRANTED) {
+    notify(title, options);
+  } else {
+    Notification.requestPermission(res => {
+      if (res === PERMISSION_GRANTED) {
+        notify(title, options);
+      }
+    });
+  }
+};
+exports.createNotify = createNotify;
+const generatorNotificationKey = function (commentId) {
+  let replyId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const validCommentId = commentId + '';
+  const validReplyId = replyId + '';
+  if (!validReplyId) return `sdoc_notification_${validCommentId}`;
+  return `sdoc_notification_${validCommentId}_${validReplyId}`;
+};
+exports.generatorNotificationKey = generatorNotificationKey;

package/dist/basic-sdk/components/file-loading/index.css

@@ -0,0 +1,57 @@
+/** file loading **/
+@-moz-keyframes fileLoading {
+  0% {
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes fileLoading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fileLoading {
+  0% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.file-loading-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #eee;
+  border-left-color: #aaa;
+  border-radius: 50%;
+  -moz-animation: fileLoading 0.9s infinite linear;
+  -webkit-animation: fileLoading 0.9s infinite linear;
+  animation: fileLoading 0.9s infinite linear;
+}
+
+.file-loading-tip {
+  display: block;
+  margin: 0 auto;
+}

package/dist/basic-sdk/components/file-loading/index.js

@@ -0,0 +1,15 @@
+"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"));
+require("./index.css");
+const FileLoading = () => {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "file-loading-icon file-loading-tip"
+  });
+};
+var _default = exports.default = FileLoading;

package/dist/basic-sdk/components/loading/index.js

@@ -0,0 +1,19 @@
+"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"));
+require("./style.css");
+class Loading extends _react.default.Component {
+  render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "empty-loading-page"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "lds-ripple page-centered"
+    }, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null)));
+  }
+}
+var _default = exports.default = Loading;

package/dist/basic-sdk/components/loading/style.css

@@ -0,0 +1,49 @@
+.empty-loading-page {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+}
+
+.page-centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  /* bring your own prefixes */
+  transform: translate(-50%, -50%);
+}
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid #eb8205;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+  0% {
+    top: 28px;
+    left: 28px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: -1px;
+    left: -1px;
+    width: 58px;
+    height: 58px;
+    opacity: 0;
+  }
+}

package/dist/basic-sdk/components/toast/alert.js

@@ -0,0 +1,51 @@
+"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"));
+class Alert extends _react.default.PureComponent {
+  getIconClass(intent) {
+    switch (intent) {
+      case 'success':
+        return 'sdocfont sdoc-check-circle';
+      case 'warning':
+        return 'sdocfont sdoc-exclamation-triangle';
+      case 'none':
+        return 'sdocfont sdoc-exclamation-circle';
+      case 'danger':
+        return 'sdocfont sdoc-exclamation-circle';
+      default:
+        return 'sdocfont sdoc-check-circle';
+    }
+  }
+  render() {
+    const {
+      intent,
+      title,
+      children,
+      isRemovable,
+      onRemove
+    } = this.props;
+    const iconClass = this.getIconClass(intent);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: `sdoc-toast-alert-container ${intent || 'success'}`
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "toast-alert-icon"
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: iconClass
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "toast-text-container"
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: "toast-text-title"
+    }, title), children ? /*#__PURE__*/_react.default.createElement("p", {
+      className: "toast-text-child"
+    }, children) : null), isRemovable && /*#__PURE__*/_react.default.createElement("div", {
+      onClick: onRemove,
+      className: "toast-close"
+    }, /*#__PURE__*/_react.default.createElement("span", null, "\xD7")));
+  }
+}
+var _default = exports.default = Alert;

package/dist/basic-sdk/components/toast/index.css

@@ -0,0 +1,118 @@
+.sdoc-toast-manager {
+  position: fixed;
+  margin: 0 auto;
+  max-width: 560px;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999999;
+}
+
+.sdoc-toast-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 0;
+  transition: all 240ms cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+@keyframes openAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(-120%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes closeAnimation {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  to {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}
+
+.sdoc-toast-container.entering,
+.sdoc-toast-container.entered {
+  animation: openAnimation 240ms cubic-bezier(0.175, 0.885, 0.320, 1.175) both;
+}
+
+.sdoc-toast-container.exiting {
+  animation: closeAnimation 120ms cubic-bezier(0.4, 0.0, 1, 1) both;
+}
+
+.sdoc-toast-alert-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  border-radius: 3px;
+  box-shadow: rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 8px 10px -4px;
+  padding: 10px 16px;
+  background-color: #fff;
+}
+
+.sdoc-toast-alert-container.success {
+  border-left: 3px solid rgb(71, 184, 129);
+  color: rgb(71, 184, 129);
+}
+
+.sdoc-toast-alert-container.warning {
+  border-left: 3px solid rgb(217, 130, 43);
+  color: rgb(217, 130, 43);
+}
+
+.sdoc-toast-alert-container.none {
+  border-left: 3px solid rgb(16, 112, 202);
+  color: rgb(16, 112, 202);
+}
+
+.sdoc-toast-alert-container.danger {
+  border-left: 3px solid rgb(236, 76, 71);
+  color: rgb(236, 76, 71);
+}
+
+.sdoc-toast-alert-container .toast-alert-icon {
+  margin-right: 10px;
+  width: 14px;
+  height: 20px;
+  line-height: 20px;
+}
+
+.sdoc-toast-alert-container .toast-text-title {
+  margin: 0;
+  font-weight: 600;
+  font-size: 14px;
+  color: #435a6f;
+}
+
+.sdoc-toast-alert-container .toast-text-child {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+}
+
+.sdoc-toast-alert-container .toast-close {
+  text-align: center;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+  margin-left: 15px;
+  line-height: 22px;
+  font-weight: 700;
+  font-size: 20px;
+  color: #000;
+  opacity: 0.5;
+}
+
+.sdoc-toast-alert-container .toast-close:hover {
+  opacity: 1;
+}

package/dist/basic-sdk/components/toast/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toaster = _interopRequireDefault(require("./toaster"));
+const toaster = new _toaster.default();
+var _default = exports.default = toaster;