@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setHeaderType = exports.isSelectionInHeader = exports.isMenuDisabled = exports.getHeaderType = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+const isMenuDisabled = function (editor) {
+  let readonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (readonly) return true;
+  if (!editor.selection) return true;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => {
+      let type = (0, _core.getNodeType)(n);
+      if (!type) return false;
+      if (type === _constants.ELEMENT_TYPE.PARAGRAPH) return true;
+      if (type.startsWith(_constants.HEADER)) return true;
+      if (type === _constants.TITLE) return true;
+      if (type === _constants.SUBTITLE) return true;
+      return false;
+    },
+    universal: true,
+    mode: 'highest'
+  });
+  return !match;
+};
+exports.isMenuDisabled = isMenuDisabled;
+const getHeaderType = editor => {
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => {
+      const nodeType = (0, _core.getNodeType)(n);
+      if (!nodeType) return false;
+      if (nodeType.includes(_constants.HEADER)) return true;
+      if (nodeType === _constants.TITLE) return true;
+      if (nodeType === _constants.SUBTITLE) return true;
+      return false;
+    },
+    universal: true
+  });
+  if (!match) return _constants.PARAGRAPH;
+  const [n] = match;
+  return (0, _core.getNodeType)(n);
+};
+exports.getHeaderType = getHeaderType;
+const isSelectionInHeader = editor => {
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => {
+      if (!_slate.Element.isElement(n)) return false;
+      if (!n.type) return false;
+      if (n.type.startsWith(_constants.HEADER)) return true;
+      if (n.type === _constants.TITLE) return true;
+      if (n.type === _constants.SUBTITLE) return true;
+      return false;
+    },
+    // Matches nodes whose node.type starts with header
+    universal: true
+  });
+  return match;
+};
+exports.isSelectionInHeader = isSelectionInHeader;
+const setHeaderType = (editor, type) => {
+  if (!type) return;
+  _slate.Transforms.setNodes(editor, {
+    type
+  });
+};
+exports.setHeaderType = setHeaderType;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = require("./render-elem");
+const HeaderPlugin = {
+  type: _constants.HEADER,
+  nodeType: 'element',
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.renderTitle, _renderElem.renderSubtitle, _renderElem.renderHeader]
+};
+var _default = exports.default = HeaderPlugin;

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

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+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 = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+var _commonUtils = require("../../../../utils/common-utils");
+var _constants = require("../../../constants");
+var _core = require("../../../core");
+var _helpers = require("../helpers");
+require("./style.css");
+class HeaderMenu extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "registerEventHandler", () => {
+      document.addEventListener('click', this.onHideHeaderMenu, true);
+    });
+    (0, _defineProperty2.default)(this, "unregisterEventHandler", () => {
+      document.removeEventListener('click', this.onHideHeaderMenu, true);
+    });
+    (0, _defineProperty2.default)(this, "onHideHeaderMenu", e => {
+      const menu = this.menu;
+      const clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
+      if (clickIsInMenu) return;
+      this.setState({
+        isShowHeaderPopover: false
+      }, () => {
+        this.unregisterEventHandler();
+      });
+    });
+    (0, _defineProperty2.default)(this, "getValue", () => {
+      const {
+        editor
+      } = this.props;
+      return (0, _helpers.getHeaderType)(editor);
+    });
+    (0, _defineProperty2.default)(this, "isActive", type => {
+      return this.getValue() === type;
+    });
+    (0, _defineProperty2.default)(this, "isDisabled", () => {
+      const {
+        editor,
+        readonly
+      } = this.props;
+      return (0, _helpers.isMenuDisabled)(editor, readonly);
+    });
+    (0, _defineProperty2.default)(this, "onToggleClick", event => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      const isShowHeaderPopover = !this.state.isShowHeaderPopover;
+      if (isShowHeaderPopover) {
+        this.setState({
+          isShowHeaderPopover
+        }, () => {
+          this.registerEventHandler();
+        });
+      } else {
+        this.setState({
+          isShowHeaderPopover
+        }, () => {
+          this.unregisterEventHandler();
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "onMouseDown", type => {
+      return () => {
+        const {
+          editor
+        } = this.props;
+        const active = this.isActive(type);
+        const newType = active ? _constants.PARAGRAPH : type;
+        (0, _helpers.setHeaderType)(editor, newType);
+        (0, _core.focusEditor)(editor, editor.selection);
+        this.setState({
+          isShowHeaderPopover: false
+        }, () => {
+          this.unregisterEventHandler();
+        });
+      };
+    });
+    (0, _defineProperty2.default)(this, "setMenuRef", ref => {
+      this.menu = ref;
+    });
+    (0, _defineProperty2.default)(this, "getToolTip", type => {
+      return (0, _commonUtils.isMac)() ? _constants.MAC_HOTKEYS[type] : _constants.WIN_HOTKEYS[type];
+    });
+    this.state = {
+      isShowHeaderPopover: false
+    };
+  }
+  render() {
+    const {
+      t
+    } = this.props;
+    const {
+      isShowHeaderPopover
+    } = this.state;
+    const headerIconClass = `sdocfont sdoc-${isShowHeaderPopover ? 'caret-up' : 'drop-down'}`;
+    const currentType = this.getValue();
+    const disabled = this.isDisabled();
+    const itemList = [_constants.PARAGRAPH, 'divider', _constants.TITLE, _constants.SUBTITLE, 'divider', ..._constants.HEADERS];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-menu"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('header-toggle', {
+        'header-toggle-disabled': disabled
+      }),
+      onClick: disabled ? () => {} : this.onToggleClick
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "active"
+    }, t(_constants.HEADER_TITLE_MAP[currentType])), /*#__PURE__*/_react.default.createElement("span", {
+      className: headerIconClass
+    })), isShowHeaderPopover && /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.setMenuRef,
+      className: "header-popover sdoc-dropdown-menu"
+    }, itemList.map((item, index) => {
+      if (item === 'divider') {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: index,
+          className: "sdoc-dropdown-menu-divider"
+        });
+      }
+      const id = `${item}-${index}`;
+      const isSelected = currentType === item;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: index
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        id: id,
+        className: (0, _classnames.default)('sdoc-dropdown-menu-item', {
+          'position-relative': isSelected
+        }),
+        onClick: this.onMouseDown(item)
+      }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
+        className: "sdocfont sdoc-check-mark"
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          fontSize: `${_constants.SDOC_FONT_SIZE[item]}pt`
+        }
+      }, t(_constants.HEADER_TITLE_MAP[item]))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        target: id,
+        placement: "right"
+      }, this.getToolTip(item)));
+    })));
+  }
+}
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(HeaderMenu);

package/dist/basic-sdk/extension/plugins/header/menu/style.css

@@ -0,0 +1,79 @@
+.header-menu {
+  display: flex;
+  height: 100%;
+  width: 140px;
+  padding: 6px 8px;
+  border-right: 1px solid #e5e6e8;
+  position: relative;
+  align-items: center;
+}
+
+.header-menu .header-toggle {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 5px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.header-menu .header-toggle .active {
+  font-size: 14px;
+}
+
+.header-menu .header-toggle-disabled {
+  color: #BDBDBD;
+  cursor: unset;
+}
+
+.header-menu .header-toggle:not(.header-toggle-disabled):hover {
+  background: #F2F2F2;
+  border-radius: 2px;
+}
+
+.header-menu .header-toggle .sdocfont {
+  color: #999;
+  width: 12px;
+  height: 24px;
+  margin-left: 8px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.header-menu .header-toggle-disabled .sdocfont {
+  color: #BDBDBD;
+  cursor: unset;
+}
+
+.header-menu .header-popover {
+  position: absolute;
+  top: 42px;
+  left: 8px;
+  padding: 8px 0;
+  width: 180px;
+  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;
+}
+
+.header-menu .header-popover .sdoc-dropdown-menu-item {
+  font-size: 14px;
+  height: auto;
+  padding: 9px 16px 9px 28px;
+  line-height: 1;
+}
+
+.header-menu .header-popover .sdoc-dropdown-menu-item .sdoc-check-mark {
+  position: absolute;
+  left: 8px;
+  color: #798d99;
+}

package/dist/basic-sdk/extension/plugins/header/placeholder.js

@@ -0,0 +1,35 @@
+"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 _reactI18next = require("react-i18next");
+const Placeholder = props => {
+  const {
+    title,
+    top = 5
+  } = props;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  return /*#__PURE__*/_react.default.createElement("span", {
+    contentEditable: "false",
+    suppressContentEditableWarning: true,
+    style: {
+      position: 'absolute',
+      top: `${top}px`,
+      color: 'rgba(191,191,191,1)',
+      pointerEvents: 'none',
+      width: '100%',
+      maxWidth: '100%',
+      display: 'block',
+      userSelect: 'none',
+      textDecoration: 'none',
+      left: '1px'
+    }
+  }, t(title));
+};
+var _default = exports.default = Placeholder;

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

@@ -0,0 +1,140 @@
+"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 _commonUtils = require("../../../utils/common-utils");
+var _constants = require("../../constants");
+var _keyboard = require("../../constants/keyboard");
+var _core = require("../../core");
+var _helpers = require("../list/helpers");
+var _helpers2 = require("./helpers");
+const isSelectionAtLineEnd = (editor, path) => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const isAtLineEnd = _slate.Editor.isEnd(editor, selection.anchor, path) || _slate.Editor.isEnd(editor, selection.focus, path);
+  return isAtLineEnd;
+};
+const withHeader = editor => {
+  const {
+    insertBreak,
+    insertFragment,
+    insertText,
+    deleteBackward
+  } = editor;
+  const newEditor = editor;
+
+  // Utility function to check if selection is inside multi-column node
+  const isSelectionInMultiColumn = editor => {
+    if (!editor.selection) return false;
+    const topParentNode = _slate.Node.get(editor, [editor.selection.anchor.path[0]]);
+    return topParentNode.type === _constants.MULTI_COLUMN;
+  };
+
+  // Rewrite insertBreak - insert paragraph when carriage return at the end of header
+  newEditor.insertBreak = () => {
+    const [match] = _slate.Editor.nodes(newEditor, {
+      match: n => {
+        if (!_slate.Element.isElement(n)) return false;
+        if (!n.type) return false;
+        if (n.type.startsWith(_constants.HEADER)) return true;
+        if (n.type === _constants.TITLE) return true;
+        if (n.type === _constants.SUBTITLE) return true;
+        return false;
+      },
+      // Matches nodes whose node.type starts with header
+      universal: true
+    });
+    if (!match) {
+      insertBreak();
+      return;
+    }
+    if ((0, _core.isCursorAtBlockStart)(newEditor)) {
+      const [currentNode, path] = match;
+      const newNode = (0, _core.generateEmptyElement)(currentNode.type);
+      _slate.Transforms.insertNodes(editor, newNode, {
+        at: path
+      });
+      return;
+    }
+    const isAtLineEnd = isSelectionAtLineEnd(editor, match[1]);
+    const nextNode = _slate.Editor.next(editor, {
+      at: match[1]
+    });
+    if (isAtLineEnd && nextNode && editor.children.length === 2) {
+      const [node, path] = nextNode;
+      if (node && node.children[0].text === '') {
+        _slate.Transforms.select(editor, path);
+        return;
+      }
+    }
+
+    // If an empty p is inserted at the end of the line and not in the multi_column node, otherwise wrap normally
+    if (isAtLineEnd && !isSelectionInMultiColumn(newEditor)) {
+      const p = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+      _slate.Transforms.insertNodes(newEditor, p, {
+        mode: 'highest'
+      });
+    } else {
+      insertBreak();
+    }
+  };
+  newEditor.insertFragment = data => {
+    const headerNode = (0, _core.getSelectedNodeByTypes)(editor, _constants.HEADERS);
+    const headerText = _slate.Node.string(headerNode || {
+      children: []
+    });
+    const onlyOneListItem = data.length === 1 && (0, _helpers.isSingleListItem)(data[0]);
+    // Insert a list item when the header is empty, insert only the text
+    if (headerNode && headerText.length === 0 && onlyOneListItem) {
+      const text = _slate.Node.string(data[0]);
+      insertText(text);
+      return;
+    }
+    return insertFragment(data);
+  };
+  newEditor.deleteBackward = unit => {
+    const {
+      selection
+    } = newEditor;
+    if (selection === null) {
+      deleteBackward(unit);
+      return;
+    }
+    const headerNode = (0, _core.getSelectedNodeByTypes)(editor, _constants.HEADERS);
+    if (headerNode && (0, _core.isSelectionAtBlockStart)(editor) && _slate.Node.string(headerNode).length > 0) {
+      _slate.Transforms.setNodes(editor, {
+        type: _constants.PARAGRAPH
+      });
+      return;
+    }
+    deleteBackward(unit);
+  };
+  newEditor.onHotKeyDown = event => {
+    const HOT_KEYS = (0, _commonUtils.isMac)() ? _keyboard.MAC_HOTKEYS_EVENT : _keyboard.WIN_HOTKEYS;
+    const hotEntries = Object.entries(HOT_KEYS);
+    let isHeaderEvent = false;
+    let headerType = '';
+    for (let index = 0; index < hotEntries.length; index++) {
+      const [key, value] = hotEntries[index];
+      isHeaderEvent = (0, _isHotkey.default)(value, event);
+      if (isHeaderEvent) {
+        headerType = key;
+        break;
+      }
+    }
+    if (!isHeaderEvent) return false;
+    event.preventDefault();
+    if ((0, _helpers2.isMenuDisabled)(newEditor)) return true;
+    (0, _helpers2.setHeaderType)(newEditor, headerType);
+    return true;
+  };
+  return newEditor;
+};
+var _default = exports.default = withHeader;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderTitle = exports.renderSubtitle = exports.renderHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _helper = require("../paragraph/helper");
+var _placeholder = _interopRequireDefault(require("./placeholder"));
+const renderTitle = (props, editor) => {
+  const {
+    element,
+    attributes,
+    children
+  } = props;
+  const style = {
+    fontSize: `${_constants.SDOC_FONT_SIZE[element.type]}pt`,
+    textAlign: element.align
+  };
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    className: `sdoc-header-title ${attributes.className}`,
+    style: {
+      ...style
+    }
+  }), children);
+};
+exports.renderTitle = renderTitle;
+const renderSubtitle = (props, editor) => {
+  const {
+    element,
+    attributes,
+    children
+  } = props;
+  const style = {
+    color: '#888',
+    fontSize: `${_constants.SDOC_FONT_SIZE[element.type]}pt`,
+    textAlign: element.align
+  };
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    className: `sdoc-header-subtitle ${attributes.className}`,
+    style: {
+      ...style
+    }
+  }), children);
+};
+exports.renderSubtitle = renderSubtitle;
+const renderHeader = (props, editor) => {
+  const {
+    element,
+    attributes,
+    children,
+    isComposing
+  } = props;
+  const {
+    type
+  } = element;
+  const level = type.split('header')[1];
+  const style = {
+    textAlign: element.align,
+    fontSize: `${_constants.SDOC_FONT_SIZE[element.type]}pt`,
+    ...(level === '6' && {
+      fontStyle: 'italic'
+    })
+  };
+  let isShowPlaceHolder = false;
+  if ((0, _helper.isEmptyNode)(element) && _slate.Node.string(element) === '' && !isComposing) {
+    isShowPlaceHolder = true;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    "data-id": element.id,
+    id: element.id // used for click left outline item, page scroll this element
+  }, attributes, {
+    className: `sdoc-header-${level} ${attributes.className}`,
+    style: {
+      position: isShowPlaceHolder ? 'relative' : '',
+      ...style
+    }
+  }), isShowPlaceHolder && /*#__PURE__*/_react.default.createElement(_placeholder.default, {
+    title: 'Header',
+    top: 0
+  }), children);
+};
+exports.renderHeader = renderHeader;

package/dist/basic-sdk/extension/plugins/history/history-menu.js

@@ -0,0 +1,70 @@
+"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 _commons = require("../../commons");
+var _constants = require("../../constants");
+class HistoryMenu extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    (0, _defineProperty2.default)(this, "isDisabled", type => {
+      const {
+        editor,
+        readonly
+      } = this.props;
+      if (readonly) return true;
+      const {
+        history
+      } = editor;
+      if (type === _constants.UNDO) {
+        return history.undos.length === 0;
+      }
+      return history.redos.length === 0;
+    });
+    (0, _defineProperty2.default)(this, "onUndoMouseDown", () => {
+      const {
+        editor
+      } = this.props;
+      editor.undo();
+    });
+    (0, _defineProperty2.default)(this, "onRedoMouseDown", () => {
+      const {
+        editor
+      } = this.props;
+      editor.redo();
+    });
+  }
+  render() {
+    const {
+      isRichEditor,
+      className
+    } = this.props;
+    const undoConfig = _constants.MENUS_CONFIG_MAP[_constants.UNDO];
+    const redoConfig = _constants.MENUS_CONFIG_MAP[_constants.REDO];
+    const undoProps = {
+      isRichEditor,
+      className,
+      ariaLabel: 'undo',
+      ...undoConfig,
+      disabled: this.isDisabled(_constants.UNDO),
+      isActive: false,
+      onMouseDown: this.onUndoMouseDown
+    };
+    const redoProps = {
+      isRichEditor,
+      className,
+      ariaLabel: 'redo',
+      ...redoConfig,
+      disabled: this.isDisabled(_constants.REDO),
+      isActive: false,
+      onMouseDown: this.onRedoMouseDown
+    };
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commons.MenuItem, undoProps), /*#__PURE__*/_react.default.createElement(_commons.MenuItem, redoProps));
+  }
+}
+var _default = exports.default = HistoryMenu;