@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+var _helpers = require("./helpers");
+const withBlockquote = editor => {
+  const {
+    insertBreak,
+    deleteBackward,
+    insertFragment
+  } = editor;
+  const newEditor = editor;
+  newEditor.insertBreak = () => {
+    const {
+      selection
+    } = editor;
+    if (selection == null) return insertBreak();
+    const [quoteBlockEntry] = _slate.Editor.nodes(editor, {
+      match: n => _slate.Element.isElement(n) && n.type === _constants.BLOCKQUOTE,
+      universal: true
+    });
+    if (!quoteBlockEntry) return insertBreak();
+    const [currentLineEntry] = _slate.Editor.nodes(newEditor, {
+      match: n => _slate.Element.isElement(n) && [_constants.PARAGRAPH, _constants.HEADER1, _constants.HEADER2, _constants.HEADER3, _constants.HEADER4, _constants.HEADER5, _constants.HEADER6, _constants.TITLE, _constants.SUBTITLE].includes(n.type),
+      mode: 'lowest'
+    });
+
+    // Exit blockquote when current line is empty
+    const isAtBlockquoteEnd = currentLineEntry[1].slice(-1)[0] === quoteBlockEntry[0].children.length - 1;
+    if (isAtBlockquoteEnd) {
+      const isEmptyLine = !(currentLineEntry && _slate.Editor.string(newEditor, currentLineEntry[1]).length) && !(0, _core.isContainsVoidElement)(currentLineEntry[0]);
+      if (isEmptyLine) {
+        const nextPath = _slate.Path.next(quoteBlockEntry[1]);
+        _slate.Transforms.moveNodes(newEditor, {
+          at: currentLineEntry[1],
+          to: nextPath
+        });
+        return;
+      }
+    }
+
+    // const isMiddleIn
+    if (_slate.Range.isCollapsed(selection)) {
+      const isMiddleIn = (0, _core.isMiddlePoint)(editor, selection.anchor, currentLineEntry[1]);
+      if (isMiddleIn) {
+        insertBreak();
+        return;
+      }
+    }
+
+    // Insert new line
+    _slate.Transforms.insertNodes(editor, {
+      type: _constants.PARAGRAPH,
+      children: [(0, _core.generateDefaultText)()]
+    }, {
+      at: newEditor.selection,
+      select: true
+    });
+  };
+  newEditor.deleteBackward = unit => {
+    const {
+      selection
+    } = newEditor;
+    if (selection === null) {
+      deleteBackward(unit);
+      return;
+    }
+    const blockQuoteEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.BLOCKQUOTE);
+    if (blockQuoteEntry) {
+      const [, blockQuotePath] = blockQuoteEntry;
+      const [currentLineEntry] = _slate.Editor.nodes(newEditor, {
+        match: (n, p) => _slate.Element.isElement(n) && p.length === blockQuotePath.length + 1 && n.type === _constants.PARAGRAPH
+      });
+      if (!currentLineEntry) return deleteBackward(unit);
+      const [, currentLinePath] = currentLineEntry;
+      const currentLineIndex = currentLinePath[blockQuotePath.length];
+      // Transforms to paragraph when Select at the beginning of the first line
+      if (currentLineIndex === 0 && (0, _core.isSelectionAtBlockStart)(editor, {
+        at: currentLinePath
+      })) {
+        _slate.Transforms.liftNodes(editor, {
+          at: currentLinePath
+        });
+        return;
+      }
+    }
+    deleteBackward(unit);
+  };
+  newEditor.insertFragment = data => {
+    // Paste into quote block
+    if ((0, _core.getSelectedNodeByType)(newEditor, _constants.BLOCKQUOTE)) {
+      const lastIndex = data.findLastIndex(item => [_constants.CODE_BLOCK, _constants.TABLE].includes(item === null || item === void 0 ? void 0 : item.type));
+      let elements = (0, _helpers.getFormattedElements)(data.slice(0, lastIndex + 1));
+      let restElements = (0, _helpers.getFormattedRestElements)(data.slice(lastIndex + 1));
+      const path = _slate.Editor.path(newEditor, newEditor.selection);
+
+      // Insert elements of quote block
+      if (restElements.length !== 0) {
+        if (_slate.Range.isCollapsed(editor.selection)) {
+          const paragraphEntry = (0, _core.getSelectedNodeEntryByType)(newEditor, _constants.PARAGRAPH);
+          if (paragraphEntry) {
+            const parentNodeEntry = _slate.Editor.parent(editor, paragraphEntry[1]);
+            if (parentNodeEntry && parentNodeEntry[0].type === _constants.BLOCKQUOTE) {
+              if (!_slate.Node.string(paragraphEntry[0]).length) {
+                data.forEach(node => {
+                  if (node.type === _constants.BLOCKQUOTE) {
+                    node.type = _constants.PARAGRAPH;
+                  }
+                });
+                insertFragment(data);
+                return;
+              }
+            }
+          }
+        }
+        // Insert text when inserting a single line paragraph
+        if (restElements.length === 1 && restElements[0].type === _constants.PARAGRAPH) {
+          const string = _slate.Node.string(restElements[0]);
+          _slate.Editor.insertText(newEditor, string);
+        } else {
+          _slate.Transforms.insertNodes(newEditor, restElements, {
+            at: [path[0], path[1] + 1]
+          });
+        }
+      }
+
+      // Insert elements above the quoted block
+      if (elements.length !== 0) {
+        _slate.Transforms.insertNodes(newEditor, elements, {
+          at: [path[0]]
+        });
+      }
+      return;
+    }
+    return insertFragment(data);
+  };
+  return newEditor;
+};
+var _default = exports.default = withBlockquote;

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

@@ -0,0 +1,24 @@
+"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 renderBlockquote = (props, editor) => {
+  const {
+    attributes,
+    children,
+    element
+  } = props;
+  const style = {
+    textAlign: element.align
+  };
+  return /*#__PURE__*/_react.default.createElement("blockquote", Object.assign({
+    "data-id": element.id
+  }, attributes, {
+    style: style
+  }), children);
+};
+var _default = exports.default = renderBlockquote;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CALLOUT_ICON_MAP = exports.CALLOUT_COLOR_MAP = exports.CALLOUT_ALLOWED_INSIDE_TYPES = void 0;
+var _constants = require("../../constants");
+var _elementType = require("../../constants/element-type");
+// key as container fill color
+const CALLOUT_COLOR_MAP = exports.CALLOUT_COLOR_MAP = {
+  '#f1f3f6': {
+    border_color: '#d9dbe0',
+    background_color: '#f1f3f6'
+  },
+  '#e1e9fe': {
+    border_color: '#cbdeff',
+    background_color: '#e1e9fe'
+  },
+  '#def0ff': {
+    border_color: '#c7ecff',
+    background_color: '#def0ff'
+  },
+  '#e7f9ee': {
+    border_color: '#a5dfbf',
+    background_color: '#e7f9ee'
+  },
+  '#eaf7d6': {
+    border_color: '#c3e788',
+    background_color: '#eaf7d6'
+  },
+  '#fef7e0': {
+    border_color: '#faecb3',
+    background_color: '#fef7e0'
+  },
+  '#fff1e8': {
+    border_color: '#ffe1cd',
+    background_color: '#fff1e8'
+  },
+  '#ffe6e3': {
+    border_color: '#ffc6c4',
+    background_color: '#ffe6e3'
+  },
+  '#ffe9f2': {
+    border_color: '#ffd0e6',
+    background_color: '#ffe9f2'
+  },
+  '#fde8ff': {
+    border_color: '#f0c1ff',
+    background_color: '#fde8ff'
+  }
+};
+const CALLOUT_ICON_MAP = exports.CALLOUT_ICON_MAP = {
+  'trumpet': '📢',
+  'bulb': '💡',
+  'prohibited': '🚫',
+  'warning': '⚠️'
+};
+const CALLOUT_ALLOWED_INSIDE_TYPES = exports.CALLOUT_ALLOWED_INSIDE_TYPES = [_elementType.CALL_OUT, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.BLOCKQUOTE, ..._constants.HEADERS, ..._constants.LIST_ITEM_CORRELATION_TYPE, _elementType.CHECK_LIST_ITEM, _elementType.IMAGE, _elementType.LINK, _elementType.SDOC_LINK];

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

@@ -0,0 +1,281 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapCallout = exports.unwrapCallout = exports.setCalloutIcon = exports.isMenuDisabled = exports.isMenuActive = exports.isCalloutContentEmpty = exports.insertElementAtNewLineInCallout = exports.insertElement = exports.getCalloutEntry = exports.generateCallout = exports.deleteCalloutIcon = exports.changeFillBackgroundColor = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _elementType = require("../../constants/element-type");
+var _core = require("../../core");
+var _constant = require("./constant");
+const isMenuActive = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return false;
+  const isInsideCallout = !!getCalloutEntry(editor);
+  if (isInsideCallout) return true;
+  return false;
+};
+exports.isMenuActive = isMenuActive;
+const isMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  const {
+    selection
+  } = editor;
+  if (!selection) return true;
+  const selectedElements = (0, _core.getSelectedElems)(editor);
+  // If it's not the top list item, disable callout menu
+  const [node] = (0, _core.getTopLevelBlockNode)(editor) || [];
+  if (node && [_elementType.ORDERED_LIST, _elementType.UNORDERED_LIST].includes(node === null || node === void 0 ? void 0 : node.type)) {
+    if (!(0, _core.isTopLevelListItem)(editor)) return true;
+  }
+  const isRangeAcrossBlock = (0, _core.isRangeAcrossBlocks)(editor);
+  // If selected multiple block element contains callout, disable callout menu
+  const isAllSelectedElementsInAllowTypes = selectedElements.length && selectedElements.every(element => {
+    if (element.type === _elementType.CALL_OUT && isRangeAcrossBlock) return false;
+    return _constant.CALLOUT_ALLOWED_INSIDE_TYPES.includes(element.type);
+  });
+  if (isAllSelectedElementsInAllowTypes) return false;
+  // If selection is in multi_column, able callout menu
+  const currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _elementType.MULTI_COLUMN);
+  if (currentMultiColumnEntry) return false;
+  return true;
+};
+
+/**
+ * @param {keyof CALLOUT_COLOR_MAP} [background_color] fill color
+ */
+exports.isMenuDisabled = isMenuDisabled;
+const generateCallout = function () {
+  let background_color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Object.keys(_constant.CALLOUT_COLOR_MAP)[5];
+  const props = {
+    style: {
+      background_color
+    }
+  };
+  const callout = (0, _core.generateEmptyElement)(_elementType.CALL_OUT, props);
+  callout.children = [];
+  return callout;
+};
+exports.generateCallout = generateCallout;
+const wrapCallout = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  const callout = generateCallout();
+  // Handle inserting callout into inside multi_column
+  const currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _elementType.MULTI_COLUMN);
+  if (currentMultiColumnEntry) {
+    _slate.Transforms.wrapNodes(editor, callout, {
+      at: editor.selection.anchor.path.slice(0, 3)
+    });
+    (0, _core.focusEditor)(editor);
+    return;
+  }
+  const [node, path] = (0, _core.getTopLevelBlockNode)(editor);
+  if (node && [_elementType.ORDERED_LIST, _elementType.UNORDERED_LIST].includes(node === null || node === void 0 ? void 0 : node.type)) {
+    if (_slate.Range.isCollapsed(selection)) {
+      _slate.Transforms.collapse(editor);
+    }
+    const {
+      path: startPath
+    } = _slate.Editor.start(editor, path) || {};
+    const {
+      offset: endOffset,
+      path: endPath
+    } = _slate.Editor.end(editor, path) || {};
+    const [, paragraphPath] = _slate.Editor.parent(editor, selection) || [];
+    const [listItemNode, listItemPath] = _slate.Editor.parent(editor, paragraphPath) || [];
+    let focusPoint = null;
+    // Highlight only the top listItem
+    if ((listItemNode === null || listItemNode === void 0 ? void 0 : listItemNode.type) === _elementType.LIST_ITEM && listItemPath.length === 2) {
+      const listNode = (0, _core.generateEmptyElement)(node.type);
+      listNode.children = [listItemNode];
+      callout.children = [listNode];
+      const {
+        path: curPath
+      } = _slate.Editor.point(editor, listItemPath) || {};
+      if (_slate.Path.equals(startPath, curPath)) {
+        // start
+        _slate.Transforms.removeNodes(editor, {
+          at: listItemPath
+        });
+        _slate.Transforms.insertNodes(editor, callout, {
+          at: [path[0]]
+        });
+        focusPoint = _slate.Editor.end(editor, [path[0]]);
+      } else if (_slate.Path.equals(endPath, curPath)) {
+        // end
+        _slate.Transforms.removeNodes(editor, {
+          at: listItemPath
+        });
+        _slate.Transforms.insertNodes(editor, callout, {
+          at: _slate.Path.next(path)
+        });
+        focusPoint = _slate.Editor.end(editor, _slate.Path.next(path));
+      } else {
+        // center
+        // Get rest list node
+        const restItemNode = _slate.Editor.nodes(editor, {
+          at: {
+            anchor: {
+              offset: 0,
+              path: curPath
+            },
+            focus: {
+              offset: endOffset,
+              path: endPath
+            }
+          },
+          match: (node, path) => {
+            // Matches the list type is LIST_ITEM
+            // Matches the list after the current path
+            // Matches top-level list-item
+            return (node === null || node === void 0 ? void 0 : node.type) === _elementType.LIST_ITEM && _slate.Path.compare(path, curPath) === 1 && path.length === 2;
+          }
+        });
+        const restListNode = (0, _core.generateEmptyElement)(node.type);
+        restListNode.children = [];
+        for (const [n] of restItemNode) {
+          restListNode.children.push(n);
+        }
+
+        // Delete rest list node
+        _slate.Transforms.removeNodes(editor, {
+          at: {
+            anchor: {
+              offset: 0,
+              path: curPath
+            },
+            focus: {
+              offset: endOffset,
+              path: endPath
+            }
+          },
+          match: (node, path) => (node === null || node === void 0 ? void 0 : node.type) === _elementType.LIST_ITEM && _slate.Path.compare(path, curPath) === 1 && path.length === 2
+        });
+        const insertCalloutPath = _slate.Path.next(path);
+        const insertListPath = _slate.Path.next(insertCalloutPath);
+        // Delete current list node
+        _slate.Transforms.removeNodes(editor, {
+          at: listItemPath
+        });
+        // Insert callout node and list node
+        _slate.Transforms.insertNodes(editor, callout, {
+          at: insertCalloutPath
+        });
+        _slate.Transforms.insertNodes(editor, restListNode, {
+          at: insertListPath
+        });
+        focusPoint = _slate.Editor.end(editor, insertCalloutPath);
+      }
+    }
+    (0, _core.focusEditor)(editor, focusPoint);
+    return;
+  }
+  _slate.Transforms.wrapNodes(editor, callout, {
+    mode: 'highest'
+  });
+  (0, _core.focusEditor)(editor);
+};
+exports.wrapCallout = wrapCallout;
+const unwrapCallout = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  const aboveNodeEntry = _slate.Editor.above(editor, {
+    match: n => n.type === _elementType.CALL_OUT
+  });
+  if (!aboveNodeEntry) return;
+  const [, calloutPath] = aboveNodeEntry;
+  _slate.Transforms.unwrapNodes(editor, {
+    at: calloutPath,
+    match: n => n.type === _elementType.CALL_OUT
+  });
+  const point = _slate.Editor.point(editor, editor.selection);
+  (0, _core.focusEditor)(editor, point);
+};
+exports.unwrapCallout = unwrapCallout;
+const changeFillBackgroundColor = (editor, background_color) => {
+  _slate.Transforms.setNodes(editor, {
+    style: {
+      background_color
+    }
+  }, {
+    match: n => n.type === _elementType.CALL_OUT
+  });
+  _slate.Transforms.select(editor, _slate.Editor.start(editor, editor.selection));
+};
+exports.changeFillBackgroundColor = changeFillBackgroundColor;
+const setCalloutIcon = (editor, icon_name) => {
+  _slate.Transforms.setNodes(editor, {
+    callout_icon: icon_name
+  }, {
+    match: n => n.type === _elementType.CALL_OUT
+  });
+  _slate.Transforms.select(editor, _slate.Editor.start(editor, editor.selection));
+};
+exports.setCalloutIcon = setCalloutIcon;
+const deleteCalloutIcon = editor => {
+  _slate.Transforms.setNodes(editor, {
+    callout_icon: ''
+  }, {
+    match: n => n.type === _elementType.CALL_OUT
+  });
+  _slate.Transforms.select(editor, _slate.Editor.start(editor, editor.selection));
+};
+
+// Check is cursor in callout
+exports.deleteCalloutIcon = deleteCalloutIcon;
+const getCalloutEntry = function (editor) {
+  let at = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : editor.selection;
+  const aboveNodeEntry = _slate.Editor.above(editor, {
+    match: n => n.type === _elementType.CALL_OUT,
+    mode: 'highest',
+    at
+  });
+  return aboveNodeEntry;
+};
+exports.getCalloutEntry = getCalloutEntry;
+const isCalloutContentEmpty = calloutEntry => {
+  const [calloutNode] = calloutEntry;
+  const contentString = _slate.Node.string(calloutNode);
+  const calloutChildren = calloutNode.children;
+  const isSingleParagraph = calloutChildren.length === 1 && calloutChildren[0].type === _elementType.PARAGRAPH;
+  const isEmptyContent = contentString.length === 0;
+  return isSingleParagraph && isEmptyContent;
+};
+
+// Insert a new element at new line in callout after current path
+exports.isCalloutContentEmpty = isCalloutContentEmpty;
+const insertElementAtNewLineInCallout = (editor, type, currentPath) => {
+  const element = (0, _core.generateEmptyElement)(type);
+  const insertPath = _slate.Path.next(currentPath);
+  _slate.Transforms.insertNodes(editor, element, {
+    at: insertPath
+  });
+  _slate.Transforms.select(editor, insertPath);
+};
+exports.insertElementAtNewLineInCallout = insertElementAtNewLineInCallout;
+const insertElement = (editor, type, insertPosition) => {
+  if (insertPosition === _constants.INSERT_POSITION.AFTER) {
+    const p = (0, _core.generateEmptyElement)(_elementType.PARAGRAPH);
+    const path = _slate.Editor.path(editor, editor.selection);
+    _slate.Transforms.insertNodes(editor, p, {
+      at: [path[0] + 1]
+    });
+    _slate.Transforms.select(editor, [path[0] + 1]);
+  }
+  // Insertion position is current or after
+  _slate.Transforms.setNodes(editor, {
+    type
+  });
+  if (_constants.HEADERS.includes(type)) {
+    (0, _core.focusEditor)(editor, editor.selection);
+  }
+};
+exports.insertElement = insertElement;

package/dist/basic-sdk/extension/plugins/callout/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 _constants = require("../../constants");
+var _menu = _interopRequireDefault(require("./menu"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireDefault(require("./render-elem"));
+const CalloutPlugin = {
+  type: _constants.CALL_OUT,
+  nodeType: 'element',
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = CalloutPlugin;

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

@@ -0,0 +1,16 @@
+.sdoc-callout-paste-unsupportable-type-alert {
+  display: none;
+  position: absolute;
+  top: 140px;
+  z-index: 1001;
+  left: 50%;
+  margin: auto;
+  transform: translateX(-50%);
+  transition: all 0.3s;
+  pointer-events: none;
+}
+
+.sdoc-callout-paste-unsupportable-type-alert.display {
+  display: block;
+  transition: all 0.3s;
+}

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

@@ -0,0 +1,52 @@
+"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 _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _constants = require("../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _commons = require("../../../commons");
+var _constants2 = require("../../../constants");
+var _elementType = require("../../../constants/element-type");
+var _helper = require("../helper");
+const menuConfig = _constants2.MENUS_CONFIG_MAP[_elementType.CALL_OUT];
+const CalloutMenu = _ref => {
+  let {
+    editor,
+    isRichEditor,
+    className,
+    readonly
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const handleDisplayAlert = (0, _react.useCallback)(type => {
+    setTimeout(() => {
+      _toast.default.warning(`${t('The_current_location_does_not_support_pasting')}${t(type && type.at(0).toUpperCase() + type.slice(1))}`);
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, handleDisplayAlert);
+    return unsubscribe;
+  }, [handleDisplayAlert]);
+  const handleClick = (0, _react.useCallback)(e => {
+    (0, _helper.isMenuActive)(editor) ? (0, _helper.unwrapCallout)(editor) : (0, _helper.wrapCallout)(editor);
+  }, [editor]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commons.MenuItem, Object.assign({
+    isRichEditor: isRichEditor,
+    className: className,
+    ariaLabel: "callout",
+    disabled: (0, _helper.isMenuDisabled)(editor, readonly),
+    isActive: (0, _helper.isMenuActive)(editor),
+    onMouseDown: handleClick
+  }, menuConfig)));
+};
+var _default = exports.default = CalloutMenu;