@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/table/render/table-header/rows-header/row-header.js

@@ -0,0 +1,126 @@
+"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 _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useScrollContext = require("../../../../../../hooks/use-scroll-context");
+var _objectUtils = _interopRequireDefault(require("../../../../../../utils/object-utils"));
+var _constants = require("../../../../../constants");
+var _core = require("../../../../../core");
+var _helpers = require("../../../helpers");
+var _hooks = require("../../hooks");
+const RowHeader = _ref => {
+  let {
+    row,
+    index,
+    addIconPosition,
+    setAddIconPosition,
+    setInsertRowIndex,
+    selectRange,
+    tableSize,
+    handleDragStart,
+    handleDragEnd
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const {
+    tableSelectedRange
+  } = editor;
+  (0, _react.useEffect)(() => {
+    setRowHeight((0, _helpers.getRowDomHeight)(editor, row));
+  }, [editor, row, tableSize]);
+  const oldRowHeight = (0, _helpers.getRowDomHeight)(editor, row);
+  const [rowHeight, setRowHeight] = (0, _react.useState)(oldRowHeight);
+  const rowHeaderRef = (0, _react.useRef)(null);
+  const columns = (0, _hooks.useResizeHandlersContext)();
+  const scrollContext = (0, _useScrollContext.useScrollContext)();
+  const selectedRange = (0, _hooks.useTableSelectedRangeContext)();
+  const currentCell = (0, _core.getSelectedNodeByType)(editor, _constants.ELEMENT_TYPE.TABLE_CELL);
+  const currentCellPath = currentCell ? (0, _core.findPath)(editor, currentCell, [-1, -1]) : [-1, -1];
+  const pathLength = currentCellPath.length;
+  const canDrag = (0, _react.useMemo)(() => {
+    const {
+      minRowIndex,
+      maxRowIndex,
+      minColIndex,
+      maxColIndex
+    } = tableSelectedRange;
+    const [, colNum] = tableSize;
+    const isSelectRow = minColIndex === 0 && maxColIndex === colNum - 1;
+    const isSelectRangeRow = minRowIndex <= index && index <= maxRowIndex;
+    const isSelectAllRows = minRowIndex === 0 && maxRowIndex === tableSize[0] - 1;
+    if (tableSize[0] === 1 || isSelectAllRows) return false;
+    if (isSelectRow && isSelectRangeRow) return true;
+    return false;
+  }, [index, tableSelectedRange, tableSize]);
+  (0, _react.useEffect)(() => {
+    if ((0, _helpers.elementHasImage)(row)) {
+      // There is a delay in image loading
+      const time = setTimeout(() => setRowHeight((0, _helpers.getRowDomHeight)(editor, row)), 300);
+      return () => {
+        clearTimeout(time);
+      };
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, row, index]);
+  const onMouseMove = (0, _react.useCallback)(event => {
+    const {
+      left,
+      height,
+      top
+    } = rowHeaderRef.current.getBoundingClientRect();
+    const halfElementY = top + height / 2;
+    const nextAddIconPosition = {
+      left: left,
+      top: event.clientY > halfElementY ? top + height - 7 : top - 7
+    };
+    const {
+      top: scrollContextTop,
+      height: scrollContextHeight
+    } = scrollContext.current.getBoundingClientRect();
+    if (nextAddIconPosition.top < scrollContextTop) {
+      setAddIconPosition(undefined);
+      return;
+    }
+    if (nextAddIconPosition.top > scrollContextTop + scrollContextHeight) {
+      setAddIconPosition(undefined);
+      return;
+    }
+    if (_objectUtils.default.isSameObject(nextAddIconPosition, addIconPosition)) return;
+    setInsertRowIndex(event.clientY > halfElementY ? index : index - 1);
+    setAddIconPosition(nextAddIconPosition);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, addIconPosition, row, columns]);
+  const onMouseLeave = (0, _react.useCallback)(event => {
+    setAddIconPosition(undefined);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, addIconPosition, row, columns]);
+  const isSelectedARow = selectedRange.minColIndex === 0 && selectedRange.maxColIndex === tableSize[1] - 1;
+  const isSelectedSomeRow = selectedRange.minRowIndex <= index && index <= selectedRange.maxRowIndex;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-table-row-header', {
+      'range-selected': isSelectedARow && isSelectedSomeRow,
+      'range-selected-tip': !isSelectedARow && isSelectedSomeRow || currentCellPath[pathLength - 2] === index,
+      'drag': canDrag
+    }),
+    style: {
+      height: rowHeight
+    },
+    ref: rowHeaderRef,
+    onClick: () => selectRange(index),
+    onMouseMove: onMouseMove,
+    onMouseLeave: onMouseLeave,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    draggable: canDrag
+  });
+};
+var _default = exports.default = RowHeader;

package/dist/basic-sdk/extension/plugins/table/render/table-root.js

@@ -0,0 +1,60 @@
+"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 _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _menu = require("../menu");
+var _hooks = require("./hooks");
+const TableRoot = _ref => {
+  let {
+    attributes,
+    columns = [],
+    children
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const readonly = (0, _slateReact.useReadOnly)();
+  const tableScrollWrapper = (0, _react.useRef)(null);
+  const [scrollLeft, setScrollLeft] = (0, _react.useState)(0);
+  const allWidth = columns.reduce((pre, cur) => pre + cur.width, 0);
+  const onScroll = (0, _react.useCallback)(event => {
+    setScrollLeft(event.target.scrollLeft);
+  }, []);
+  const {
+    isShowContextMenu,
+    menuPosition,
+    onContextMenu
+  } = (0, _hooks.useContextMenu)(tableScrollWrapper);
+  return /*#__PURE__*/_react.default.createElement(_hooks.TableRootContext.Provider, {
+    value: tableScrollWrapper.current
+  }, /*#__PURE__*/_react.default.createElement(_hooks.TableRootScrollLeftContext.Provider, {
+    value: scrollLeft
+  }, /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
+    className: (0, _classnames.default)('sdoc-table-wrapper position-relative', attributes.className, {
+      'scroll': allWidth > editor.width
+    }),
+    style: {
+      ...attributes.style,
+      maxWidth: editor.width ? editor.width : '100%'
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sdoc-table-scroll-wrapper', {
+      'scroll-at-center': scrollLeft + editor.width !== allWidth && scrollLeft > 0,
+      'scroll-at-right': scrollLeft + editor.width === allWidth,
+      'scroll-at-left': scrollLeft === 0
+    }),
+    ref: tableScrollWrapper,
+    onScroll: onScroll,
+    onContextMenu: onContextMenu
+  }, children)), !readonly && isShowContextMenu && /*#__PURE__*/_react.default.createElement(_menu.TableContextMenu, {
+    editor: editor,
+    contextMenuPosition: menuPosition,
+    readonly: readonly
+  })));
+};
+var _default = exports.default = TableRoot;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "renderTable", {
+  enumerable: true,
+  get: function () {
+    return _render.default;
+  }
+});
+Object.defineProperty(exports, "renderTableCell", {
+  enumerable: true,
+  get: function () {
+    return _renderCell.default;
+  }
+});
+Object.defineProperty(exports, "renderTableRow", {
+  enumerable: true,
+  get: function () {
+    return _renderRow.default;
+  }
+});
+var _render = _interopRequireDefault(require("./render"));
+var _renderCell = _interopRequireDefault(require("./render/render-cell"));
+var _renderRow = _interopRequireDefault(require("./render/render-row"));

package/dist/basic-sdk/extension/plugins/text-align/helpers.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setAlignType = exports.isMenuDisabled = exports.getAlignType = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  if (!editor.selection) return true;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: node => {
+      return !_slate.Editor.isEditor(node) && _slate.Element.isElement(node) && _slate.Editor.isBlock(editor, node);
+    },
+    universal: true,
+    mode: 'highest'
+  });
+  if (!match) return false;
+  const elementType = match[0].type;
+  // at present, TABLE got its own 'text align'
+  if (elementType === _constants.CODE_BLOCK || elementType === _constants.TABLE) {
+    return true;
+  }
+  return false;
+};
+exports.isMenuDisabled = isMenuDisabled;
+const getAlignType = editor => {
+  const defaultType = 'left';
+  const {
+    selection
+  } = editor;
+  if (!selection) {
+    return defaultType;
+  }
+  if ((0, _core.isRangeAcrossBlocks)(editor)) return defaultType;
+  const [match] = _slate.Editor.nodes(editor, {
+    at: _slate.Editor.unhangRange(editor, selection),
+    match: n => !_slate.Editor.isEditor(n) && _slate.Element.isElement(n) && n['align']
+  });
+  if (!match) return defaultType;
+  return match[0].align;
+};
+exports.getAlignType = getAlignType;
+const setAlignType = (editor, type) => {
+  _slate.Transforms.setNodes(editor, {
+    'align': type
+  });
+};
+exports.setAlignType = setAlignType;

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const TextAlignPlugin = {};
+var _default = exports.default = TextAlignPlugin;

package/dist/basic-sdk/extension/plugins/text-align/menu/index.css

@@ -0,0 +1,5 @@
+.sdoc-text-align-dropdown .sdocfont.sdoc-check-mark {
+    position: absolute;
+    left: 8px;
+    color: #798d99;
+}

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

@@ -0,0 +1,98 @@
+"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 _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+var _constants = require("../../../constants");
+var _helpers = require("../helpers");
+require("./index.css");
+const TextAlignMenu = _ref => {
+  let {
+    isRichEditor = true,
+    className = 'menu-group-item',
+    editor,
+    readonly
+  } = _ref;
+  const [isShowMenu, setMenuShow] = (0, _react.useState)(false);
+  const popoverRef = (0, _react.useRef)(null);
+  const disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
+  const buttonId = 'sdoc-button-text-align';
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const toggle = (0, _react.useCallback)(event => {
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu]);
+  const getCurrentType = (0, _react.useCallback)(() => {
+    return (0, _helpers.getAlignType)(editor);
+  }, [editor]);
+  const setType = (0, _react.useCallback)(type => {
+    (0, _helpers.setAlignType)(editor, type);
+    toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, isShowMenu]);
+  const validClassName = (0, _classnames.default)(className, 'sdoc-menu-with-dropdown', {
+    'menu-show': isShowMenu,
+    'disabled': disabled,
+    'rich-icon-btn d-flex': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled,
+    'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
+  });
+  let curType = getCurrentType();
+  const curIcon = _constants.MENUS_CONFIG_MAP[_constants.TEXT_ALIGN].filter(item => item.type === curType)[0].iconClass;
+  const caretIconClass = `sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-${isShowMenu ? 'caret-up' : 'drop-down'}`;
+  curType = 'align_' + curType;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-label": "text align",
+    className: validClassName,
+    id: buttonId,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-menu-with-dropdown-icon"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: curIcon
+  })), !disabled && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-menu-with-dropdown-triangle"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: caretIconClass
+  }))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: buttonId
+  }, t('Alignment_type')), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: buttonId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-text-align-dropdown",
+    trigger: "legacy",
+    placement: "bottom-start",
+    hideArrow: true,
+    toggle: toggle,
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pt-2 pb-2"
+  }, _constants.MENUS_CONFIG_MAP[_constants.TEXT_ALIGN].map((item, index) => {
+    const isSelected = curType === item.id;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: "sdoc-dropdown-menu-item",
+      onClick: () => setType(item.type)
+    }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-check-mark"
+    }), /*#__PURE__*/_react.default.createElement("i", {
+      className: item.iconClass
+    }));
+  }))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(TextAlignMenu);

package/dist/basic-sdk/extension/plugins/text-style/caret.js

@@ -0,0 +1,60 @@
+"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"));
+const cursorStyleBase = {
+  position: 'absolute',
+  top: -2,
+  pointerEvents: 'none',
+  userSelect: 'none',
+  transform: 'translateY(-100%)',
+  fontSize: 10,
+  color: 'white',
+  background: 'palevioletred',
+  whiteSpace: 'nowrap'
+};
+const caretStyleBase = {
+  position: 'absolute',
+  // pointerEvents: 'none',
+  userSelect: 'none',
+  height: '1.2em',
+  width: 2,
+  background: 'palevioletred'
+};
+const Caret = _ref => {
+  let {
+    cursor_color: color,
+    name
+  } = _ref;
+  const cursorStyles = {
+    ...cursorStyleBase,
+    background: color,
+    left: '0%',
+    cursor: 'default'
+  };
+  const caretStyles = {
+    ...caretStyleBase,
+    background: color,
+    left: '0%'
+  };
+  caretStyles['top'] = 1;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "caret-item",
+    contentEditable: false,
+    style: caretStyles
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    name: name,
+    className: "caret-name",
+    contentEditable: false,
+    style: cursorStyles
+  }))));
+};
+var _default = exports.default = Caret;

package/dist/basic-sdk/extension/plugins/text-style/helpers.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeMark = exports.isMenuDisabled = exports.getValue = exports.addMark = void 0;
+var _slate = require("@seafile/slate");
+var _elementType = require("../../constants/element-type");
+var _menusConfig = require("../../constants/menus-config");
+var _core = require("../../core");
+var _helpers = require("../link/helpers");
+const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  if (editor.selection == null) return true;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => {
+      const type = (0, _core.getNodeType)(n);
+      if (type === _elementType.CODE_BLOCK) return true; // Code block
+      // TODO: seatable_column
+      if (_slate.Editor.isVoid(editor, n) && (n === null || n === void 0 ? void 0 : n.type) !== 'seatable_column') return true; // void node
+
+      return false;
+    },
+    universal: true
+  });
+
+  // If yes, it is disabled
+  if (match) return true;
+  return false;
+};
+exports.isMenuDisabled = isMenuDisabled;
+const addMark = (editor, type) => {
+  if (type === _menusConfig.TEXT_STYLE_MAP.SUPERSCRIPT) {
+    removeMark(editor, _menusConfig.TEXT_STYLE_MAP.SUBSCRIPT);
+  } else if (type === _menusConfig.TEXT_STYLE_MAP.SUBSCRIPT) {
+    removeMark(editor, _menusConfig.TEXT_STYLE_MAP.SUPERSCRIPT);
+  }
+  _slate.Editor.addMark(editor, type, true);
+};
+exports.addMark = addMark;
+const removeMark = (editor, type) => {
+  _slate.Editor.removeMark(editor, type);
+};
+
+// Whether mark is included
+exports.removeMark = removeMark;
+const getValue = (editor, mark) => {
+  if (mark === _elementType.LINK && editor.selection && !_slate.Range.isCollapsed(editor.selection)) {
+    return (0, _helpers.isLinkToolBarActive)(editor);
+  }
+  const curMarks = _slate.Editor.marks(editor);
+
+  // If curMarks exists, you need to set this parameter manually. curMarks prevails
+  if (curMarks) {
+    return curMarks[mark];
+  } else {
+    const [match] = _slate.Editor.nodes(editor, {
+      match: n => n[mark] === true
+    });
+    return !!match;
+  }
+};
+exports.getValue = getValue;

package/dist/basic-sdk/extension/plugins/text-style/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 _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireDefault(require("./render-elem"));
+const TextPlugin = {
+  type: 'text',
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = TextPlugin;

package/dist/basic-sdk/extension/plugins/text-style/menu/comemnt-editor-menu.js

@@ -0,0 +1,72 @@
+"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 _commons = require("../../../commons");
+var _constants = require("../../../constants");
+var _menusConfig = require("../../../constants/menus-config");
+var _core = require("../../../core");
+var _helpers = require("../helpers");
+const CommentEditorTextStyleMenuList = _ref => {
+  let {
+    editor,
+    isRichEditor,
+    className,
+    idPrefix,
+    readonly
+  } = _ref;
+  const isActive = (0, _react.useCallback)(type => {
+    const isMark = (0, _helpers.getValue)(editor, type);
+    return !!isMark;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  const isDisabled = (0, _react.useCallback)(() => {
+    return (0, _helpers.isMenuDisabled)(editor, readonly);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, readonly]);
+  const onMouseDown = (0, _react.useCallback)((event, type) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isDisabled()) return;
+    const active = isActive(type);
+    if (active) {
+      (0, _helpers.removeMark)(editor, type);
+    } else {
+      (0, _helpers.addMark)(editor, type);
+    }
+    (0, _core.focusEditor)(editor);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  const getTextStyleList = (0, _react.useCallback)(() => {
+    const styleMenus = _constants.MENUS_CONFIG_MAP[_constants.TEXT_STYLE];
+    const commentMenus = styleMenus.filter(item => [_menusConfig.BOLD, _menusConfig.ITALIC].includes(item.id));
+    return commentMenus.map(item => {
+      let itemProps = {
+        isRichEditor,
+        className,
+        disabled: isDisabled(),
+        isActive: isActive(item.type),
+        onMouseDown: onMouseDown
+      };
+      return {
+        ...itemProps,
+        ...item,
+        id: idPrefix ? `${idPrefix}_${item.id}` : item.id
+      };
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, readonly]);
+  const list = getTextStyleList();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, list.map((itemProps, index) => /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
+    key: index
+  }, itemProps))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentEditorTextStyleMenuList);