@seafile/sdoc-editor 2.0.82 → 2.0.83

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

@@ -0,0 +1,138 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+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 */
+
+var renderCallout = function renderCallout(_ref, editor) {
+  var attributes = _ref.attributes,
+    children = _ref.children,
+    element = _ref.element;
+  var readOnly = (0, _slateReact.useReadOnly)();
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
+  var isSelected = (0, _slateReact.useSelected)();
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var calloutRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowColorSelector = _useState2[0],
+    setIsShowColorSelector = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      top: '',
+      left: ''
+    }),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    popoverPosition = _useState4[0],
+    setPopoverPosition = _useState4[1];
+  var containerStyle = (0, _react.useMemo)(function () {
+    var _element$style$backgr = element.style.background_color,
+      background_color = _element$style$backgr === void 0 ? 'transparent' : _element$style$backgr;
+    var 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: borderColor
+    };
+  }, [element.style, isSelected]);
+  var calloutIcon = (0, _react.useMemo)(function () {
+    var _element$callout_icon = element.callout_icon,
+      callout_icon = _element$callout_icon === void 0 ? '' : _element$callout_icon;
+    if (!callout_icon) return null;
+    return _constant.CALLOUT_ICON_MAP[callout_icon];
+  }, [element]);
+  var isShowPlaceholder = (0, _react.useCallback)(function () {
+    if (readOnly || isSelected) return false;
+    // If element contains more than one element or element is not paragraph, show placeholder
+    var isContainUnitElement = element.children.length !== 1 || element.children.some(function (childElement) {
+      return childElement.type !== 'paragraph';
+    });
+    if (isContainUnitElement) return false;
+    var elementContent = _slate.Node.string(element);
+    return !elementContent.length;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element, isSelected]);
+  var handleCloseColorSelector = (0, _react.useCallback)(function () {
+    setIsShowColorSelector(false);
+  }, []);
+  var handleScroll = (0, _react.useCallback)(function (e) {
+    if (readOnly) return;
+    if (!isShowColorSelector) return;
+    if (e.currentTarget.scrollTop) {
+      var menuPosition = (0, _utils.getMenuPosition)(calloutRef.current, editor);
+      setPopoverPosition(menuPosition);
+    }
+  }, [editor, isShowColorSelector, readOnly]);
+  (0, _react.useEffect)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    var unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER, handleCloseColorSelector);
+    return unsubscribe;
+  }, [handleCloseColorSelector]);
+  (0, _react.useEffect)(function () {
+    if (readOnly) return;
+    var observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', handleScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return function () {
+      observerRefValue.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, readOnly, scrollRef]);
+  (0, _react.useEffect)(function () {
+    if (!isSelected) {
+      setIsShowColorSelector(false);
+    }
+  }, [isSelected]);
+  var handleDisplayColorSelector = (0, _react.useCallback)(function () {
+    if (readOnly) return;
+    var menuPosition = (0, _utils.getMenuPosition)(calloutRef.current, editor);
+    setPopoverPosition(menuPosition);
+    setIsShowColorSelector(true);
+  }, [editor, readOnly]);
+  var handleClick = (0, _react.useCallback)(function (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: "".concat(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;

package/dist/extension/plugins/check-list/helpers.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setCheckListItemType = exports.isMenuDisabled = exports.getCheckListItemType = exports.convertToCheck = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+var isMenuDisabled = exports.isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  if (readonly) return true;
+  if (editor.selection == null) return true;
+  var selectedElements = [];
+  var nodeEntries = _slate.Editor.nodes(editor, {
+    universal: true
+  });
+  var _iterator = (0, _createForOfIteratorHelper2["default"])(nodeEntries),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var nodeEntry = _step.value;
+      var _nodeEntry = (0, _slicedToArray2["default"])(nodeEntry, 1),
+        node = _nodeEntry[0];
+      if (_slate.Element.isElement(node)) selectedElements.push(node);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var notMatch = selectedElements.some(function (element) {
+    if (_slate.Editor.isVoid(editor, element) && _slate.Editor.isBlock(editor, element)) return true;
+    var type = element.type;
+    if (type === _constants.ELEMENT_TYPE.CODE_LINE) return true;
+    if (type === _constants.ELEMENT_TYPE.CODE_BLOCK) return true;
+    if ([_constants.ORDERED_LIST, _constants.UNORDERED_LIST].includes(type) && (0, _core.isMultiLevelList)(element)) return true;
+    if (type === _constants.ELEMENT_TYPE.TABLE) return true;
+    if (type === _constants.ELEMENT_TYPE.TABLE_ROW) return true;
+    if (type === _constants.ELEMENT_TYPE.TABLE_CELL) return true;
+    return false;
+  });
+  if (notMatch) return true;
+  return false;
+};
+var getCheckListItemType = exports.getCheckListItemType = function getCheckListItemType(editor) {
+  var node = (0, _core.getSelectedNodeByType)(editor, _constants.CHECK_LIST_ITEM);
+  if (!node) return _constants.PARAGRAPH;
+  return node.type;
+};
+var convertToCheck = exports.convertToCheck = function convertToCheck(editor, listNode, listPath) {
+  var checkList = [];
+  var _ref = listNode || {},
+    children = _ref.children;
+  children.forEach(function (item) {
+    var text = _slate.Node.string(item);
+    var checkNode = (0, _core.generateEmptyElement)(_constants.CHECK_LIST_ITEM, {}, text);
+    checkList.push(checkNode);
+  });
+  _slate.Transforms.removeNodes(editor, {
+    at: [listPath[0]]
+  });
+  _slate.Transforms.insertNodes(editor, checkList, {
+    at: [listPath[0]]
+  });
+  _slate.Transforms.select(editor, {
+    path: [listPath[0], 0],
+    offset: 0
+  });
+};
+var setCheckListItemType = exports.setCheckListItemType = function setCheckListItemType(editor, newType, insertPosition) {
+  if (insertPosition === _constants.INSERT_POSITION.AFTER) {
+    var p = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+    var path = _slate.Editor.path(editor, editor.selection);
+    _slate.Transforms.insertNodes(editor, p, {
+      at: [path[0] + 1]
+    });
+    _slate.Transforms.select(editor, [path[0] + 1]);
+  }
+  if (!(0, _core.isRangeAcrossBlocks)(editor)) {
+    var _path = _slate.Editor.path(editor, editor.selection);
+    var _getCurrentNode = (0, _core.getCurrentNode)(editor),
+      _getCurrentNode2 = (0, _slicedToArray2["default"])(_getCurrentNode, 1),
+      currentNode = _getCurrentNode2[0];
+    if (_path) {
+      var _Editor$node = _slate.Editor.node(editor, [_path[0]]),
+        _Editor$node2 = (0, _slicedToArray2["default"])(_Editor$node, 2),
+        targetNode = _Editor$node2[0],
+        targetPath = _Editor$node2[1];
+      if (targetNode && [_constants.ORDERED_LIST, _constants.UNORDERED_LIST].includes(targetNode === null || targetNode === void 0 ? void 0 : targetNode.type)) {
+        convertToCheck(editor, targetNode, targetPath);
+        if (newType === _constants.CHECK_LIST_ITEM && !_slate.Node.string(currentNode)) {
+          (0, _core.focusEditor)(editor);
+        }
+        return;
+      }
+    }
+    _slate.Transforms.setNodes(editor, {
+      type: newType
+    });
+    // When currentNode is empty
+    if (newType === _constants.CHECK_LIST_ITEM && !_slate.Node.string(currentNode)) {
+      (0, _core.focusEditor)(editor, _path);
+    }
+  } else {
+    var nodes = _slate.Editor.nodes(editor, {
+      match: function match(n) {
+        var type = (0, _core.getNodeType)(n);
+        if (!type) return;
+        if (type === _constants.PARAGRAPH) return true;
+        if (type === _constants.CHECK_LIST_ITEM) return true;
+        if (type.startsWith(_constants.HEADER)) return true;
+        if (type === _constants.TITLE) return true;
+        if (type === _constants.SUBTITLE) return true;
+        return false;
+      },
+      universal: false,
+      mode: 'highest' // Match top level
+    });
+    var nodesEntry = Array.from(nodes);
+    if (nodesEntry.length === 0) return;
+    nodesEntry.forEach(function (nodeEntry) {
+      _slate.Transforms.setNodes(editor, {
+        type: newType
+      }, {
+        at: nodeEntry[1]
+      });
+    });
+  }
+};

package/dist/extension/plugins/check-list/index.js

@@ -0,0 +1,16 @@
+"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");
+var CheckListPlugin = {
+  type: _constants.CHECK_LIST_ITEM,
+  editorPlugin: _plugin["default"],
+  renderElements: [_renderElem.renderCheckListItem]
+};
+var _default = exports["default"] = CheckListPlugin;

package/dist/extension/plugins/check-list/menu/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _commons = require("../../../commons");
+var _constants = require("../../../constants");
+var _core = require("../../../core");
+var _helpers = require("../helpers");
+var CheckListMenu = /*#__PURE__*/function (_React$Component) {
+  function CheckListMenu() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, CheckListMenu);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = (0, _callSuper2["default"])(this, CheckListMenu, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "isActive", function () {
+      var editor = _this.props.editor;
+      return (0, _helpers.getCheckListItemType)(editor) === _constants.CHECK_LIST_ITEM;
+    });
+    (0, _defineProperty2["default"])(_this, "isDisabled", function () {
+      var _this$props = _this.props,
+        editor = _this$props.editor,
+        readonly = _this$props.readonly;
+      return (0, _helpers.isMenuDisabled)(editor, readonly);
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseDown", function () {
+      var editor = _this.props.editor;
+      var active = _this.isActive(editor);
+      var newType = active ? _constants.PARAGRAPH : _constants.CHECK_LIST_ITEM;
+      (0, _helpers.setCheckListItemType)(editor, newType);
+      (0, _core.focusEditor)(editor, editor.selection);
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(CheckListMenu, _React$Component);
+  return (0, _createClass2["default"])(CheckListMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        isRichEditor = _this$props2.isRichEditor,
+        className = _this$props2.className;
+      var menuConfig = _constants.MENUS_CONFIG_MAP[_constants.CHECK_LIST_ITEM];
+      var props = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+        isRichEditor: isRichEditor,
+        className: className,
+        ariaLabel: 'check list'
+      }, menuConfig), {}, {
+        disabled: this.isDisabled(),
+        isActive: this.isActive(),
+        onMouseDown: this.onMouseDown
+      });
+      return /*#__PURE__*/_react["default"].createElement(_commons.MenuItem, props);
+    }
+  }]);
+}(_react["default"].Component);
+var _default = exports["default"] = CheckListMenu;

package/dist/extension/plugins/check-list/model.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 _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _constants = require("../../constants");
+var CheckListItem = /*#__PURE__*/(0, _createClass2["default"])(function CheckListItem(options) {
+  (0, _classCallCheck2["default"])(this, CheckListItem);
+  this.type = options.type || _constants.CHECK_LIST_ITEM;
+  this.checked = options.checked || false;
+  this.children = options.children || [{
+    text: ''
+  }];
+});
+var _default = exports["default"] = CheckListItem;

package/dist/extension/plugins/check-list/plugin.js

@@ -0,0 +1,102 @@
+"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 _core = require("../../core");
+var withCheckList = function withCheckList(editor) {
+  var insertBreak = editor.insertBreak,
+    deleteBackward = editor.deleteBackward,
+    onHotKeyDown = editor.onHotKeyDown;
+  var newEditor = editor;
+  newEditor.insertBreak = function () {
+    var selection = newEditor.selection;
+    if (!selection) {
+      insertBreak();
+      return;
+    }
+    var node = (0, _core.getSelectedNodeByType)(editor, _constants.CHECK_LIST_ITEM);
+    if (!node) {
+      insertBreak();
+      return;
+    }
+    if (_slate.Node.string(node).length === 0) {
+      _slate.Transforms.setNodes(editor, {
+        type: _constants.PARAGRAPH,
+        children: [(0, _core.generateDefaultText)()]
+      }, {
+        at: node[1]
+      });
+      return;
+    }
+
+    // If it is check-list-item, handle your own business logic
+    if ((0, _core.isCursorAtBlockStart)(editor)) {
+      var path = (0, _core.findPath)(editor, node);
+      var newNode = (0, _core.generateEmptyElement)(_constants.CHECK_LIST_ITEM);
+      _slate.Transforms.insertNodes(editor, newNode, {
+        at: path
+      });
+      return;
+    }
+    _slate.Transforms.splitNodes(editor, {
+      always: true
+    });
+    _slate.Transforms.setNodes(editor, {
+      checked: false
+    }, {
+      at: node[1]
+    });
+  };
+  newEditor.deleteBackward = function (unit) {
+    var selection = newEditor.selection;
+    if (selection && _slate.Range.isCollapsed(selection)) {
+      var selectedTodo = (0, _core.getSelectedNodeByType)(editor, _constants.CHECK_LIST_ITEM);
+      if (selectedTodo) {
+        // If the current todo has no text, it will be converted to a paragraph
+        if (_slate.Node.string(selectedTodo).length === 0) {
+          _slate.Transforms.setNodes(editor, {
+            type: _constants.PARAGRAPH,
+            children: [(0, _core.generateDefaultText)()]
+          }, {
+            at: selectedTodo[1]
+          });
+          return;
+        }
+      }
+    }
+    deleteBackward(unit);
+  };
+  newEditor.onHotKeyDown = function (event) {
+    var selectedTodo = (0, _core.getSelectedNodeByType)(editor, _constants.CHECK_LIST_ITEM);
+    if (selectedTodo) {
+      if ((0, _isHotkey["default"])('shift+enter', event)) {
+        event.preventDefault();
+        var selection = newEditor.selection;
+        var insertPoint = _slate.Editor.start(editor, selection);
+        _slate.Transforms.insertText(editor, '\n', {
+          at: insertPoint
+        });
+        (0, _core.focusEditor)(editor, {
+          anchor: {
+            path: insertPoint.path,
+            offset: insertPoint.offset + 1
+          },
+          focus: {
+            path: insertPoint.path,
+            offset: insertPoint.offset + 1
+          }
+        });
+      }
+      return true;
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  return newEditor;
+};
+var _default = exports["default"] = withCheckList;

package/dist/extension/plugins/check-list/render-elem.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderCheckListItem = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
+  function CheckListItem() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, CheckListItem);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = (0, _callSuper2["default"])(this, CheckListItem, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "onChange", function (event) {
+      var _this$props = _this.props,
+        editor = _this$props.editor,
+        element = _this$props.element,
+        readOnly = _this$props.readOnly;
+      if (readOnly) return;
+      var checked = event.target.checked;
+      var path = _slateReact.ReactEditor.findPath(editor, element);
+      _slate.Transforms.setNodes(editor, {
+        checked: checked
+      }, {
+        at: path
+      });
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(CheckListItem, _React$PureComponent);
+  return (0, _createClass2["default"])(CheckListItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        attributes = _this$props2.attributes,
+        children = _this$props2.children,
+        element = _this$props2.element;
+      var _ref = element || {},
+        id = _ref.id,
+        align = _ref.align,
+        _ref$checked = _ref.checked,
+        checked = _ref$checked === void 0 ? false : _ref$checked;
+      var style = {
+        textAlign: align
+      };
+      return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
+        "data-id": id
+      }, attributes, {
+        className: "sdoc-checkbox-container ".concat(attributes.className),
+        style: style
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-checkbox-input-wrapper"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        contentEditable: false,
+        className: "sdoc-checkbox-input",
+        type: "checkbox",
+        onChange: this.onChange,
+        checked: checked
+      }), /*#__PURE__*/_react["default"].createElement("p", {
+        className: "sdoc-checkbox-content-container"
+      }, children)));
+    }
+  }]);
+}(_react["default"].PureComponent);
+var renderCheckListItem = exports.renderCheckListItem = function renderCheckListItem(props, editor) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var readOnly = (0, _slateReact.useReadOnly)();
+  return /*#__PURE__*/_react["default"].createElement(CheckListItem, Object.assign({}, props, {
+    editor: editor,
+    readOnly: readOnly
+  }));
+};

package/dist/extension/plugins/clear-format/helpers.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMenuDisabled = exports.clearStyles = void 0;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+var isMenuDisabled = exports.isMenuDisabled = function isMenuDisabled(editor) {
+  var readonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (readonly) return true;
+  if (editor.selection == null) return true;
+  var _Editor$nodes = _slate.Editor.nodes(editor, {
+      match: function match(n) {
+        var type = (0, _core.getNodeType)(n);
+        if ([_constants.CODE_BLOCK, _constants.CODE_LINE].includes(type)) return true; // code-block
+        if (_slate.Editor.isVoid(editor, n)) return true; // void node
+
+        return false;
+      },
+      universal: true
+    }),
+    _Editor$nodes2 = (0, _slicedToArray2["default"])(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+  if (match) return true;
+  return false;
+};
+var removeMarks = function removeMarks(editor, textNode) {
+  // Iterate text node properties, clearing styles
+  var keys = Object.keys(textNode);
+  keys.forEach(function (key) {
+    if (key === 'text') {
+      // Keep only the text attribute （Text attributes are necessary）
+      return;
+    }
+    // All other attributes are deleted
+    _slate.Editor.removeMark(editor, key);
+  });
+};
+var clearStyles = exports.clearStyles = function clearStyles(editor) {
+  _slate.Transforms.unwrapNodes(editor, {
+    match: function match(n) {
+      return (0, _core.getNodeType)(n) === 'link';
+    }
+  });
+  var nodeEntries = _slate.Editor.nodes(editor, {
+    match: function match(n) {
+      return _slate.Text.isText(n);
+    },
+    universal: true
+  });
+  var _iterator = (0, _createForOfIteratorHelper2["default"])(nodeEntries),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var nodeEntry = _step.value;
+      // single text node
+      var n = nodeEntry[0];
+      removeMarks(editor, n);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+};

package/dist/extension/plugins/clear-format/menu/index.js

@@ -0,0 +1,35 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _commons = require("../../../commons");
+var _constants = require("../../../constants");
+var _helpers = require("../helpers");
+var menuConfig = _constants.MENUS_CONFIG_MAP[_constants.CLEAR_FORMAT];
+var ClearFormatMenu = function ClearFormatMenu(_ref) {
+  var isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    editor = _ref.editor,
+    readonly = _ref.readonly;
+  var onMouseDown = (0, _react.useCallback)(function () {
+    (0, _helpers.clearStyles)(editor);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var props = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    isRichEditor: isRichEditor,
+    className: className,
+    ariaLabel: 'clear'
+  }, menuConfig), {}, {
+    disabled: (0, _helpers.isMenuDisabled)(editor, readonly),
+    isActive: false,
+    'onMouseDown': onMouseDown
+  });
+  return /*#__PURE__*/_react["default"].createElement(_commons.MenuItem, props);
+};
+var _default = exports["default"] = ClearFormatMenu;