@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/callout/plugin.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _constants2 = require("../../constants");
+var _core = require("../../core");
+var _constant = require("./constant");
+var _helper = require("./helper");
+/**
+ * @param {Editor} editor
+ * @returns
+ */
+const withCallout = editor => {
+  const {
+    insertFragment,
+    deleteBackward,
+    onHotKeyDown,
+    insertData
+  } = editor;
+  const newEditor = editor;
+  newEditor.deleteBackward = unit => {
+    const calloutEntry = (0, _helper.getCalloutEntry)(editor);
+    if (calloutEntry) {
+      const node = calloutEntry[0];
+      if ((0, _core.isSelectionAtBlockStart)(editor) && !!node.callout_icon) {
+        (0, _helper.deleteCalloutIcon)(editor);
+        return;
+      }
+      if ((0, _core.isSelectionAtBlockStart)(editor) && (0, _helper.isCalloutContentEmpty)(calloutEntry)) {
+        (0, _helper.unwrapCallout)(editor);
+        return;
+      }
+    }
+    return deleteBackward(unit);
+  };
+  newEditor.insertData = data => {
+    if ((0, _helper.getCalloutEntry)(newEditor)) {
+      if (data.types.includes('text/code-block')) {
+        const eventBus = _eventBus.default.getInstance();
+        eventBus.dispatch(_constants.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, _constants2.CODE_BLOCK);
+        return;
+      }
+    }
+    return insertData(data);
+  };
+  newEditor.insertFragment = data => {
+    if ((0, _helper.getCalloutEntry)(editor)) {
+      var _data$find;
+      // No paste any unsupportedType content into callout
+      const unsupportedType = (_data$find = data.find(node => !_constant.CALLOUT_ALLOWED_INSIDE_TYPES.includes(node.type))) === null || _data$find === void 0 ? void 0 : _data$find.type;
+      if (unsupportedType) {
+        const eventBus = _eventBus.default.getInstance();
+        eventBus.dispatch(_constants.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, unsupportedType);
+        return;
+      }
+
+      // Unwrap the callout nodes if nested within another callout
+      const hasCalloutNode = data.some(node => node.type === _constants2.CALL_OUT);
+      if (hasCalloutNode) {
+        const newData = data.flatMap(node => node.type === _constants2.CALL_OUT ? node.children : [node]);
+        insertFragment(newData);
+      } else {
+        insertFragment(data);
+      }
+      return;
+    }
+    return insertFragment(data);
+  };
+  newEditor.onHotKeyDown = event => {
+    const calloutEntry = (0, _helper.getCalloutEntry)(editor);
+    if (calloutEntry) {
+      const [, calloutPath] = calloutEntry;
+      // Close color picker
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER);
+      if ((0, _isHotkey.default)('mod+enter', event)) {
+        (0, _helper.insertElement)(newEditor, _constants2.PARAGRAPH, _constants2.INSERT_POSITION.AFTER);
+        return true;
+      }
+      if ((0, _isHotkey.default)('mod+a', event)) {
+        event.preventDefault();
+        try {
+          const startPoint = _slate.Editor.start(newEditor, calloutPath);
+          const endPoint = _slate.Editor.end(newEditor, calloutPath);
+          const selectRange = _slate.Editor.range(newEditor, startPoint, endPoint);
+          _slate.Transforms.select(newEditor, selectRange);
+          return true;
+        } catch (error) {
+          return true;
+        }
+      }
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  newEditor.onCopy = event => {
+    if ((0, _helper.getCalloutEntry)(editor)) {
+      event.stopPropagation();
+    }
+  };
+  return newEditor;
+};
+var _default = exports.default = withCallout;

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-color-selector/index.js

@@ -0,0 +1,65 @@
+"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 _slate = require("@seafile/slate");
+var _core = require("../../../../core");
+var _constant = require("../../constant");
+var _helper = require("../../helper");
+require("./style.css");
+const ColorSelector = _ref => {
+  let {
+    editor,
+    element,
+    onCloseSelector
+  } = _ref;
+  const onColorClick = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    let target = event.target;
+    while (!target.dataset || !target.dataset.backgroundColor) {
+      target = target.parentNode;
+    }
+    const {
+      backgroundColor
+    } = target.dataset;
+    const currentPath = (0, _core.findPath)(editor, element);
+    _slate.Transforms.select(editor, currentPath);
+    (0, _helper.changeFillBackgroundColor)(editor, backgroundColor);
+    onCloseSelector();
+  }, [editor, element, onCloseSelector]);
+  const isShowCheckedIcon = (0, _react.useCallback)(currentBackgroundColor => {
+    const {
+      background_color
+    } = element.style || {};
+    return background_color && background_color === currentBackgroundColor;
+  }, [element.style]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-callout-color-selector-container",
+    contentEditable: false
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "sdoc-color-selector-list"
+  }, Object.values(_constant.CALLOUT_COLOR_MAP).map((_ref2, index) => {
+    let {
+      border_color,
+      background_color
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: `sdoc-callout-color-selector-${index}`,
+      className: "sdoc-callout-color-item",
+      "data-border-color": border_color,
+      "data-background-color": background_color,
+      style: {
+        borderColor: border_color,
+        backgroundColor: background_color
+      },
+      onClick: onColorClick
+    }, isShowCheckedIcon(background_color) && /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdoc-callout-color-checked-icon sdocfont sdoc-check-mark"
+    }));
+  })));
+};
+var _default = exports.default = ColorSelector;

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-color-selector/style.css

@@ -0,0 +1,39 @@
+.sdoc-callout-color-selector-container {
+  position: absolute;
+  padding: 10px;
+  left: 0;
+  top: 36.5px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  z-index: 100;
+}
+
+.sdoc-callout-color-selector-container .sdoc-color-selector-list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item {
+  position: relative;
+  margin-right: 10px;
+  width: 20px;
+  height: 20px;
+  list-style: none;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item:last-child {
+  margin-right: 0px;
+}
+
+.sdoc-callout-color-selector-container .sdoc-color-selector-list .sdoc-callout-color-item .sdoc-callout-color-checked-icon {
+  position: absolute;
+  top: 1px;
+  left: 3px;
+  font-size: 12px;
+}

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-hover-menu/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CalloutHoverMenu;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _commons = require("../../../../commons");
+var _helper = require("../../helper");
+var _calloutColorSelector = _interopRequireDefault(require("../callout-color-selector"));
+var _calloutIcon = _interopRequireDefault(require("../callout-icon"));
+require("./style.css");
+function CalloutHoverMenu(_ref) {
+  let {
+    editor,
+    element,
+    popoverPosition
+  } = _ref;
+  const [isShowColorSelector, setIsShowColorSelector] = (0, _react.useState)(false);
+  const [isShowIcon, setIsShowIcon] = (0, _react.useState)(false);
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const onColorSelectorToggle = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    if (!isShowColorSelector) {
+      setIsShowIcon(false);
+    }
+    setIsShowColorSelector(!isShowColorSelector);
+  }, [isShowColorSelector, setIsShowColorSelector]);
+  const onIconToggle = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    if (!isShowIcon) {
+      setIsShowColorSelector(false);
+    }
+    setIsShowIcon(!isShowIcon);
+  }, [isShowIcon, setIsShowIcon]);
+  const onCloseSelector = (0, _react.useCallback)(() => {
+    setIsShowColorSelector(false);
+    setIsShowIcon(false);
+  }, []);
+  const firstItemClass = (0, _classnames.default)({
+    'callout-menu-item': true,
+    'color-active': isShowColorSelector
+  });
+  const secondItemClass = (0, _classnames.default)({
+    'callout-menu-item': true,
+    'icon-active': isShowIcon
+  });
+  const handleRemoveIcon = () => {
+    (0, _helper.setCalloutIcon)(editor, '');
+  };
+  return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-callout-hover-menu",
+    style: popoverPosition
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: firstItemClass,
+    onClick: onColorSelectorToggle
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdocfont sdoc-callout-color mr-1"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdocfont sdoc-drop-down"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "callout-menu-divider"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: secondItemClass,
+    onClick: onIconToggle
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdocfont sdoc-callout-icon mr-1"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdocfont sdoc-drop-down"
+  })), isShowColorSelector && /*#__PURE__*/_react.default.createElement(_calloutColorSelector.default, {
+    editor: editor,
+    element: element,
+    onCloseSelector: onCloseSelector
+  }), isShowIcon && /*#__PURE__*/_react.default.createElement(_calloutIcon.default, {
+    editor: editor,
+    element: element,
+    onCloseSelector: onCloseSelector
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "callout-menu-divider"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "callout-menu-item",
+    onClick: handleRemoveIcon
+  }, t('Remove_icon'))));
+}

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-hover-menu/style.css

@@ -0,0 +1,45 @@
+.sdoc-callout-hover-menu {
+  position: absolute;
+  padding: 7px;
+  height: 36px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  z-index: 100;
+  display: flex;
+}
+
+.sdoc-callout-hover-menu .callout-menu-item {
+  padding: 0 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  color: #212529;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.sdoc-callout-hover-menu .callout-menu-item:hover {
+  background-color: #f2f2f2;
+}
+
+.sdoc-callout-hover-menu .callout-menu-item .sdocfont {
+  font-size: 12px;
+  color: #444;
+}
+
+.sdoc-callout-hover-menu .callout-menu-item .sdoc-drop-down {
+  color: #999;
+}
+
+.sdoc-callout-hover-menu .callout-menu-item.color-active,
+.sdoc-callout-hover-menu .callout-menu-item.icon-active {
+  background-color: #f2f2f2;
+  border-radius: 2px;
+}
+
+.sdoc-callout-hover-menu .callout-menu-divider {
+  border-left: 1px solid #ccc;
+  margin: 4px 8px;
+}

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-icon/index.js

@@ -0,0 +1,45 @@
+"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 _slate = require("@seafile/slate");
+var _core = require("../../../../core");
+var _constant = require("../../constant");
+var _helper = require("../../helper");
+require("./style.css");
+const IconSelector = _ref => {
+  let {
+    editor,
+    element,
+    onCloseSelector
+  } = _ref;
+  const onImageClick = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    const {
+      image
+    } = event.target.dataset;
+    if (!image) return;
+    const currentPath = (0, _core.findPath)(editor, element);
+    _slate.Transforms.select(editor, currentPath);
+    (0, _helper.setCalloutIcon)(editor, image);
+    onCloseSelector();
+  }, [editor, element, onCloseSelector]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-callout-icon-selector-container",
+    onClick: onImageClick
+  }, Object.keys(_constant.CALLOUT_ICON_MAP).map(key => {
+    const content = _constant.CALLOUT_ICON_MAP[key];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: key,
+      className: "icon-item"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: 'sdoc-emoji ' + key,
+      "data-image": key
+    }, content));
+  }));
+};
+var _default = exports.default = IconSelector;

package/dist/basic-sdk/extension/plugins/callout/render-elem/callout-icon/style.css

@@ -0,0 +1,33 @@
+.sdoc-callout-icon-selector-container {
+  position: absolute;
+  padding: 4px;
+  left: 40px;
+  top: 36.5px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  display: flex;
+  min-width: 100px;
+  z-index: 100;
+}
+
+.sdoc-callout-icon-selector-container .icon-item {
+  width: 32px;
+  height: 32px;
+  margin: 0 4px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sdoc-callout-icon-selector-container .icon-item:hover {
+  background-color: #f2f2f2;
+}
+
+.sdoc-callout-icon-selector-container .icon-item img {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}

package/dist/basic-sdk/extension/plugins/callout/render-elem/index.css

@@ -0,0 +1,52 @@
+.sdoc-callout-white-wrapper {
+  padding: 5px 0;
+}
+
+.sdoc-callout-container {
+  position: relative;
+  padding: 10px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 5px;
+  display: flex;
+}
+
+.sdoc-callout-container .callout-content {
+  flex: 1;
+  position: relative;
+  overflow: auto;
+}
+
+.sdoc-callout-container .sdoc-callout-placeholder {
+  position: absolute;
+  top: 5px;
+  color: #b8b6b6;
+  pointer-events: none;
+}
+
+.sdoc-emoji {
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
+  white-space: nowrap;
+  height: 24px;
+  width: 24px;
+  line-height: 24px;
+  font-size: 21px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sdoc-emoji.wraning {
+  color: block;
+}
+
+.sdoc-callout-container .callout-icon {
+  width: 18px;
+  margin-right: 8px;
+  margin-top: 2px;
+}
+
+.sdoc-callout-container .callout-icon .sdoc-emoji {
+  font-size: 16px;
+}
+

package/dist/basic-sdk/extension/plugins/callout/render-elem/index.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+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 _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _constants = require("../../../../constants");
+var _useScrollContext = require("../../../../hooks/use-scroll-context");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _utils = require("../../../utils");
+var _constant = require("../constant");
+var _calloutHoverMenu = _interopRequireDefault(require("./callout-hover-menu"));
+require("./index.css");
+/* eslint-disable react-hooks/rules-of-hooks */
+
+const renderCallout = (_ref, editor) => {
+  let {
+    attributes,
+    children,
+    element
+  } = _ref;
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const isSelected = (0, _slateReact.useSelected)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const calloutRef = (0, _react.useRef)();
+  const [isShowColorSelector, setIsShowColorSelector] = (0, _react.useState)(false);
+  const [popoverPosition, setPopoverPosition] = (0, _react.useState)({
+    top: '',
+    left: ''
+  });
+  const containerStyle = (0, _react.useMemo)(() => {
+    const {
+      background_color = 'transparent'
+    } = element.style;
+    let borderColor = 'transparent';
+    if (isSelected) {
+      var _CALLOUT_COLOR_MAP$ba;
+      borderColor = (_CALLOUT_COLOR_MAP$ba = _constant.CALLOUT_COLOR_MAP[background_color]) === null || _CALLOUT_COLOR_MAP$ba === void 0 ? void 0 : _CALLOUT_COLOR_MAP$ba.border_color;
+    }
+    return {
+      backgroundColor: background_color,
+      borderColor
+    };
+  }, [element.style, isSelected]);
+  const calloutIcon = (0, _react.useMemo)(() => {
+    const {
+      callout_icon = ''
+    } = element;
+    if (!callout_icon) return null;
+    return _constant.CALLOUT_ICON_MAP[callout_icon];
+  }, [element]);
+  const isShowPlaceholder = (0, _react.useCallback)(() => {
+    if (readOnly || isSelected) return false;
+    // If element contains more than one element or element is not paragraph, show placeholder
+    const isContainUnitElement = element.children.length !== 1 || element.children.some(childElement => childElement.type !== 'paragraph');
+    if (isContainUnitElement) return false;
+    const elementContent = _slate.Node.string(element);
+    return !elementContent.length;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element, isSelected]);
+  const handleCloseColorSelector = (0, _react.useCallback)(() => {
+    setIsShowColorSelector(false);
+  }, []);
+  const handleScroll = (0, _react.useCallback)(e => {
+    if (readOnly) return;
+    if (!isShowColorSelector) return;
+    if (e.currentTarget.scrollTop) {
+      const menuPosition = (0, _utils.getMenuPosition)(calloutRef.current, editor);
+      setPopoverPosition(menuPosition);
+    }
+  }, [editor, isShowColorSelector, readOnly]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER, handleCloseColorSelector);
+    return unsubscribe;
+  }, [handleCloseColorSelector]);
+  (0, _react.useEffect)(() => {
+    if (readOnly) return;
+    let observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', handleScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return () => {
+      observerRefValue.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, readOnly, scrollRef]);
+  (0, _react.useEffect)(() => {
+    if (!isSelected) {
+      setIsShowColorSelector(false);
+    }
+  }, [isSelected]);
+  const handleDisplayColorSelector = (0, _react.useCallback)(() => {
+    if (readOnly) return;
+    const menuPosition = (0, _utils.getMenuPosition)(calloutRef.current, editor);
+    setPopoverPosition(menuPosition);
+    setIsShowColorSelector(true);
+  }, [editor, readOnly]);
+  const handleClick = (0, _react.useCallback)(e => {
+    handleDisplayColorSelector();
+  }, [handleDisplayColorSelector]);
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
+    "data-id": element.id,
+    className: "sdoc-callout-white-wrapper"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handleClick,
+    ref: calloutRef,
+    className: `${attributes.className} sdoc-callout-container`,
+    style: containerStyle
+  }, element.callout_icon && /*#__PURE__*/_react.default.createElement("div", {
+    className: "callout-icon"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: 'sdoc-emoji ' + element.callout_icon
+  }, calloutIcon)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "callout-content"
+  }, children, isShowPlaceholder() && /*#__PURE__*/_react.default.createElement("div", {
+    contentEditable: false,
+    className: "sdoc-callout-placeholder"
+  }, t('Please_enter'), "...")), isShowColorSelector && /*#__PURE__*/_react.default.createElement(_calloutHoverMenu.default, {
+    editor: editor,
+    element: element,
+    popoverPosition: popoverPosition
+  })));
+};
+var _default = exports.default = renderCallout;