@seafile/seafile-editor 1.0.84 → 1.0.85-beta1

package/dist/editors/{simple-slate-editor /index.js → simple-slate-editor/index.js}

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = SimpleSlateEditor;
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _slateReact = require("slate-react");
 var _slate = require("slate");
@@ -17,24 +17,30 @@ var _core = require("../../extension/core");
 var _common = require("../../utils/common");
 require("./style.css");
 const isMacOS = (0, _common.isMac)();
-function SimpleSlateEditor(_ref) {
+const SimpleSlateEditor = _ref => {
   let {
+    isInline,
+    focusNodePath,
     value,
     editorApi,
     onSave,
     columns,
     onContentChanged,
-    isSupportFormula
+    isSupportFormula,
+    onExpandEditorToggle
   } = _ref;
   const [slateValue, setSlateValue] = (0, _react.useState)(value);
-  const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(_extension.baseEditor, {
+  const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(isInline ? _extension.inlineEditor : _extension.baseEditor, {
     editorApi,
     onSave,
     columns
-  }), [columns, editorApi, onSave]);
+  }), [columns, editorApi, onSave, isInline]);
   const eventProxy = (0, _react.useMemo)(() => {
     return new _eventHandler.default(editor);
   }, [editor]);
+  const ToolbarComponent = (0, _react.useMemo)(() => {
+    return isInline ? _extension.InlineToolbar : _extension.Toolbar;
+  }, [isInline]);
   const decorate = (0, _extension.useHighlight)(editor);
   const onChange = (0, _react.useCallback)(value => {
     setSlateValue(value);
@@ -47,9 +53,21 @@ function SimpleSlateEditor(_ref) {
     const eventBus = _eventBus.default.getInstance();
     eventBus.dispatch('change');
   }, [editor, onContentChanged]);
-  const focusFirstNode = (0, _react.useCallback)(editor => {
+  const focusNode = (0, _react.useCallback)((editor, focusNodePath) => {
     const [firstNode] = editor.children;
     if (!firstNode) return;
+    if (focusNodePath) {
+      const customFocusNodePath = (0, _core.getNode)(editor, focusNodePath);
+      if (customFocusNodePath) {
+        const startOfFirstNode = _slate.Editor.start(editor, focusNodePath);
+        const range = {
+          anchor: startOfFirstNode,
+          focus: startOfFirstNode
+        };
+        (0, _core.focusEditor)(editor, range);
+        return;
+      }
+    }
     const [firstNodeFirstChild] = firstNode.children;
     if (firstNodeFirstChild) {
       const startOfFirstNode = _slate.Editor.start(editor, [0, 0]);
@@ -85,7 +103,7 @@ function SimpleSlateEditor(_ref) {
     });
     const timer = setTimeout(() => {
       editor.forceNormalize = false;
-      focusFirstNode(editor);
+      focusNode(editor, focusNodePath);
     }, 300);
     return () => {
       editor.forceNormalize = false;
@@ -108,15 +126,16 @@ function SimpleSlateEditor(_ref) {
   const onEditorClick = (0, _react.useCallback)(() => {
     const value = editor.children;
     if (value.length === 1 && _slate.Node.string(value[0]).length === 0) {
-      focusFirstNode(editor);
+      focusNode(editor);
     }
-  }, [editor, focusFirstNode]);
+  }, [editor, focusNode]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-simple-slate-editor-container"
-  }, /*#__PURE__*/_react.default.createElement(_extension.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(ToolbarComponent, {
     editor: editor,
     isSupportFormula: isSupportFormula,
-    isSupportColumn: !!columns
+    isSupportColumn: !!columns,
+    onExpandEditorToggle: onExpandEditorToggle
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-editor-content",
     onClick: onEditorClick
@@ -137,4 +156,8 @@ function SimpleSlateEditor(_ref) {
     onKeyDown: eventProxy.onKeyDown,
     onCopy: eventProxy.onCopy
   })))))));
-}
+};
+SimpleSlateEditor.defaultProps = {
+  isInline: false
+};
+var _default = exports.default = SimpleSlateEditor;

package/dist/extension/commons/expand-editor-menu.js

@@ -0,0 +1,28 @@
+"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 _constants = require("../constants");
+var _menu = require("./menu");
+const ExpandEditorMenu = _ref => {
+  let {
+    readonly,
+    isRichEditor,
+    onExpandEditorToggle,
+    className
+  } = _ref;
+  const config = _constants.MENUS_CONFIG_MAP[_constants.EXPAND_EDITOR];
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuItem, Object.assign({
+    disabled: readonly,
+    isActive: false,
+    isRichEditor: isRichEditor,
+    type: _constants.EXPAND_EDITOR,
+    onMouseDown: onExpandEditorToggle,
+    className: className
+  }, config));
+};
+var _default = exports.default = ExpandEditorMenu;

package/dist/extension/commons/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "ElementPopover", {
     return _elementPopover.default;
   }
 });
+Object.defineProperty(exports, "ExpandEditorMenu", {
+  enumerable: true,
+  get: function () {
+    return _expandEditorMenu.default;
+  }
+});
 Object.defineProperty(exports, "MenuGroup", {
   enumerable: true,
   get: function () {
@@ -22,6 +28,12 @@ Object.defineProperty(exports, "MenuItem", {
     return _menu.MenuItem;
   }
 });
+Object.defineProperty(exports, "MoreMenu", {
+  enumerable: true,
+  get: function () {
+    return _moreMenu.default;
+  }
+});
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function () {
@@ -30,4 +42,6 @@ Object.defineProperty(exports, "Select", {
 });
 var _elementPopover = _interopRequireDefault(require("./element-popover"));
 var _menu = require("./menu");
-var _select = _interopRequireDefault(require("./select"));
+var _select = _interopRequireDefault(require("./select"));
+var _moreMenu = _interopRequireDefault(require("./more-menu"));
+var _expandEditorMenu = _interopRequireDefault(require("./expand-editor-menu"));

package/dist/extension/commons/menu/menu.css

@@ -115,4 +115,8 @@
 
 .sf-dropdown-list .sf-dropdown-list-item:hover {
   background-color: #F2F2F2;
-}
+}
+
+.sf-icon-btn-hover:hover {
+  cursor: pointer;
+}

package/dist/extension/commons/more-menu/index.css

@@ -0,0 +1,28 @@
+.sf-editor-menu-popover {
+  padding: 8px 0;
+  min-width: 12rem;
+}
+
+.sf-editor-menu-popover .popover-inner .sf-slate-help-info-control {
+  height: 24px;
+  width: 24px;
+  margin: 4px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sf-editor-menu-popover .popover-inner .sf-slate-help-info-control:hover {
+  background-color: #f2f2f2;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.sf-editor-menu-popover .popover-inner .sf-slate-help-info-control .icon-use-help {
+  font-size: 13px;
+  color: #555;
+}
+
+.sf-editor-menu-popover .bs-popover-auto[x-placement^=bottom] {
+  margin-top: 2px;
+}

package/dist/extension/commons/more-menu/index.js

@@ -0,0 +1,46 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _constants = require("../../constants");
+require("./index.css");
+const MoreMenu = _ref => {
+  let {
+    className,
+    disabled,
+    isRichEditor,
+    children
+  } = _ref;
+  const validClassName = (0, _classnames.default)(className, {
+    'sf-rich-editor': isRichEditor,
+    'sf-icon-btn': true,
+    'sf-icon-btn-disabled': disabled,
+    'sf-icon-btn-hover': !disabled
+  });
+  const config = _constants.MENUS_CONFIG_MAP[_constants.MORE_OPERATION];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    className: validClassName,
+    type: "button",
+    id: config.id
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: config.iconClass
+  })), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: config.id,
+    className: "sf-editor-menu-popover sf-editor--more-menu-popover",
+    trigger: "legacy",
+    placement: "bottom-end",
+    hideArrow: true,
+    fade: false
+  }, children));
+};
+MoreMenu.defaultProps = {
+  isRichEditor: true,
+  className: 'sf-menu-group-item'
+};
+var _default = exports.default = MoreMenu;

package/dist/extension/constants/menus-config.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TEXT_STYLE_MAP = exports.TABLE_SUBMENU_MAP = exports.MENUS_CONFIG_MAP = exports.CLEAR_FORMAT = void 0;
+exports.TEXT_STYLE_MAP = exports.TABLE_SUBMENU_MAP = exports.MORE_OPERATION = exports.MENUS_CONFIG_MAP = exports.EXPAND_EDITOR = exports.CLEAR_FORMAT = void 0;
 var _elementTypes = require("./element-types");
 const BOLD = 'bold';
 const ITALIC = 'italic';
@@ -12,6 +12,8 @@ const CODE = 'code';
 const DELETE = 'delete';
 const ADD = 'add';
 const CLEAR_FORMAT = exports.CLEAR_FORMAT = 'clear_format';
+const MORE_OPERATION = exports.MORE_OPERATION = 'more_operation';
+const EXPAND_EDITOR = exports.EXPAND_EDITOR = 'expand_editor';
 const TEXT_STYLE_MAP = exports.TEXT_STYLE_MAP = {
   BOLD: BOLD,
   ITALIC: ITALIC,
@@ -142,5 +144,15 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     id: "seafile_".concat(_elementTypes.COLUMN),
     iconClass: 'iconfont icon-choose-column',
     text: 'Insert_column'
+  },
+  [MORE_OPERATION]: {
+    id: "seafile_".concat(MORE_OPERATION),
+    iconClass: 'iconfont icon-more',
+    text: ''
+  },
+  [EXPAND_EDITOR]: {
+    id: "seafile_".concat(EXPAND_EDITOR),
+    iconClass: 'iconfont icon-fullscreen',
+    text: 'Expand_editor'
   }
 };

package/dist/extension/editor.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createSlateEditor = exports.baseEditor = void 0;
+exports.inlineEditor = exports.createSlateEditor = exports.baseEditor = void 0;
 var _slate = require("slate");
 var _slateHistory = require("slate-history");
 var _slateReact = require("slate-react");
@@ -16,6 +16,13 @@ const baseEditor = exports.baseEditor = _plugins.default.reduce((editor, pluginI
   }
   return editor;
 }, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
+const inlineEditor = exports.inlineEditor = _plugins.default.reduce((editor, pluginItem) => {
+  const withPlugin = pluginItem.editorPlugin;
+  if (withPlugin) {
+    return withPlugin(editor);
+  }
+  return editor;
+}, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
 const createSlateEditor = () => {
   const editor = _plugins.default.reduce((editor, pluginItem) => {
     const withPlugin = pluginItem.editorPlugin;

package/dist/extension/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "ELementTypes", {
     return _constants.ELementTypes;
   }
 });
+Object.defineProperty(exports, "InlineToolbar", {
+  enumerable: true,
+  get: function () {
+    return _toolbar.InlineToolbar;
+  }
+});
 Object.defineProperty(exports, "SetNodeToDecorations", {
   enumerable: true,
   get: function () {
@@ -34,6 +40,12 @@ Object.defineProperty(exports, "createSlateEditor", {
     return _editor.createSlateEditor;
   }
 });
+Object.defineProperty(exports, "inlineEditor", {
+  enumerable: true,
+  get: function () {
+    return _editor.inlineEditor;
+  }
+});
 Object.defineProperty(exports, "isEmptyParagraph", {
   enumerable: true,
   get: function () {

package/dist/extension/toolbar/index.js

@@ -4,10 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "InlineToolbar", {
+  enumerable: true,
+  get: function () {
+    return _inlineToolbar.default;
+  }
+});
 Object.defineProperty(exports, "Toolbar", {
   enumerable: true,
   get: function () {
     return _headerToolbar.default;
   }
 });
-var _headerToolbar = _interopRequireDefault(require("./header-toolbar"));
+var _headerToolbar = _interopRequireDefault(require("./header-toolbar"));
+var _inlineToolbar = _interopRequireDefault(require("./inline-toolbar"));

package/dist/extension/toolbar/inline-toolbar/index.css

@@ -0,0 +1,40 @@
+.sf-slate-editor-toolbar {
+  background-color: #fcfcfc !important;
+}
+
+.sf-slate-editor-toolbar .sf-slate-article-info-control {
+  position: absolute;
+  right: 20px;
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  color: #555;
+}
+
+.sf-slate-editor-toolbar .sf-slate-article-info-control:hover {
+  background-color: #e5e5e5;
+}
+
+.sf-slate-editor-toolbar .sf-slate-help-info-control {
+  position: absolute;
+  right: 20px;
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  color: #555;
+}
+
+.sf-slate-editor-toolbar .sf-slate-help-info-control > span:hover {
+  cursor: pointer;
+  color: #333;
+}
+
+.sf-slate-editor-toolbar .sf-slate-article-info-control .iconfont {
+  font-size: 13px;
+}

package/dist/extension/toolbar/inline-toolbar/index.js

@@ -0,0 +1,85 @@
+"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 _useSelectionUpdate = _interopRequireDefault(require("../../../hooks/use-selection-update"));
+var _commons = require("../../commons");
+var _menu = _interopRequireDefault(require("../../plugins/blockquote/menu"));
+var _menu2 = _interopRequireDefault(require("../../plugins/header/menu"));
+var _menu3 = _interopRequireDefault(require("../../plugins/text-style/menu"));
+var _menu4 = _interopRequireDefault(require("../../plugins/link/menu"));
+var _constants = require("../../constants");
+var _menu5 = _interopRequireDefault(require("../../plugins/image/menu"));
+var _menu6 = _interopRequireDefault(require("../../plugins/code-block/menu"));
+var _menu7 = _interopRequireDefault(require("../../plugins/check-list/menu"));
+var _menu8 = _interopRequireDefault(require("../../plugins/list/menu"));
+var _elementTypes = require("../../constants/element-types");
+var _tableOperator = require("../../plugins/table/menu/table-operator");
+var _helper = require("../../plugins/table/helper");
+var _menu9 = _interopRequireDefault(require("../../plugins/clear-format/menu"));
+var _shortcutDialog = _interopRequireDefault(require("../user-help/shortcut-dialog"));
+require("./index.css");
+// import TableMenu from '../../plugins/table/menu';
+// import FormulaMenu from '../../plugins/formula/menu';
+// import ColumnMenu from '../../plugins/column/menu';
+
+const InlineToolbar = _ref => {
+  let {
+    editor,
+    readonly = false,
+    isRichEditor = false,
+    isSupportFormula = false,
+    isSupportInsertSeafileImage = false,
+    isSupportColumn = false,
+    onExpandEditorToggle
+  } = _ref;
+  (0, _useSelectionUpdate.default)();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isShowSubTableMenu = (0, _react.useMemo)(() => (0, _helper.isInTable)(editor), [editor.selection]);
+  const [isShowHelpModal, setIsShowHelpModal] = (0, _react.useState)(false);
+  const onHelpIconToggle = (0, _react.useCallback)(() => {
+    setIsShowHelpModal(!isShowHelpModal);
+  }, [isShowHelpModal]);
+  const commonProps = {
+    editor,
+    readonly,
+    isRichEditor
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-editor-toolbar"
+  }, isRichEditor && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu2.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
+    type: _constants.TEXT_STYLE_MAP.BOLD
+  })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
+    type: _constants.TEXT_STYLE_MAP.ITALIC
+  })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
+    type: _constants.TEXT_STYLE_MAP.CODE
+  })), /*#__PURE__*/_react.default.createElement(_menu4.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu7.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu8.default, Object.assign({}, commonProps, {
+    type: _elementTypes.ORDERED_LIST
+  })), /*#__PURE__*/_react.default.createElement(_menu8.default, Object.assign({}, commonProps, {
+    type: _elementTypes.UNORDERED_LIST
+  }))), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu6.default, commonProps), /*#__PURE__*/_react.default.createElement(_commons.MoreMenu, commonProps, /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu5.default, Object.assign({}, commonProps, {
+    isSupportInsertSeafileImage: isSupportInsertSeafileImage
+  }))), isShowSubTableMenu && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
+    className: "sf-menu-group sf-table-operations-group"
+  }, /*#__PURE__*/_react.default.createElement(_tableOperator.AlignmentDropDown, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.ColumnOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RowOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RemoveTableMenu, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu9.default, commonProps)), !isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-help-info-control",
+    onClick: onHelpIconToggle
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "iconfont icon-use-help"
+  })))), onExpandEditorToggle && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, onExpandEditorToggle && /*#__PURE__*/_react.default.createElement(_commons.ExpandEditorMenu, Object.assign({}, commonProps, {
+    onExpandEditorToggle: onExpandEditorToggle
+  }))), isShowHelpModal && /*#__PURE__*/_react.default.createElement(_shortcutDialog.default, {
+    isRichEditor: isRichEditor,
+    toggleShortcutDialog: onHelpIconToggle
+  }));
+};
+InlineToolbar.defaultProps = {
+  readonly: false
+};
+var _default = exports.default = InlineToolbar;

package/dist/index.js

@@ -28,6 +28,12 @@ Object.defineProperty(exports, "LongTextEditorDialog", {
     return _longtextEditorDialog.default;
   }
 });
+Object.defineProperty(exports, "LongTextInlineEditor", {
+  enumerable: true,
+  get: function () {
+    return _longtextInlineEditor.default;
+  }
+});
 Object.defineProperty(exports, "MarkdownEditor", {
   enumerable: true,
   get: function () {
@@ -106,6 +112,7 @@ var _markdownView = _interopRequireDefault(require("./pages/markdown-view"));
 var _simpleEditor = _interopRequireDefault(require("./pages/simple-editor"));
 var _emailEditorDialog = _interopRequireDefault(require("./pages/email-editor-dialog"));
 var _longtextEditorDialog = _interopRequireDefault(require("./pages/longtext-editor-dialog"));
+var _longtextInlineEditor = _interopRequireDefault(require("./pages/longtext-inline-editor"));
 var _markdownPreview = _interopRequireDefault(require("./pages/markdown-preview"));
 var _seatableEditor = _interopRequireDefault(require("./pages/seatable-editor"));
 var _seatableViewer = _interopRequireDefault(require("./pages/seatable-viewer"));

package/dist/pages/longtext-inline-editor/ClickOutside/index.js

@@ -0,0 +1,86 @@
+"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"));
+/**
+ * Detecting outside click on a react component is surprisingly hard.
+ * A general approach is to have a global click handler on the document
+ * which checks if the click target is inside the editor container or
+ * not using editorContainer.contains(e.target). This approach works well
+ * until portals are used for editors. Portals render children into a DOM
+ * node that exists outside the DOM hierarchy of the parent component so
+ * editorContainer.contains(e.target) does not work. Here are some examples
+ * of the DOM structure with different types of editors
+ *
+ *
+ * SimpleEditor for example Texbox (No Portals)
+ *   <div react-data-grid>..<div>
+ *   <div portal-created-by-the-grid-for-editors>
+ *      <div editor-container>
+ *        <div simple-editor>..</div>
+ *      </div>
+ *   <div>
+ *
+ * ComplexEditor for example Modals (using Portals)
+ *   <div react-data-grid>..<div>
+ *   <div portal-created-by-the-grid-for-editors>
+ *      <div editor-container>
+ *        // Nothing here
+ *      </div>
+ *   <div>
+ *   <div portal-created-by-the-editor>
+ *     <div complex-editor>..</div>
+ *   </div>
+ *
+ *
+ * One approach to detect outside click is to use event bubbling through
+ * portals. An event fired from inside a portal will propagate to ancestors
+ * in the containing React tree, even if those elements are not ancestors
+ * in the DOM tree. This means a click handler can be attached on the document
+ * and on the editor container. The editor container can set a flag to notify
+ * that the click was inside the editor and the document click handler can use
+ * this flag to call onClickOutside. This approach however has a few caveats
+ * - Click handler on the document is set using document.addEventListener
+ * - Click handler on the editor container is set using onClick prop
+ *
+ * This means if a child component inside the editor calls e.stopPropagation
+ * then the click handler on the editor container will not be called whereas
+ * document click handler will be called.
+ * https://github.com/facebook/react/issues/12518
+ *
+ * To solve this issue onClickCapture event is used.
+ */
+
+class ClickOutside extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    (0, _defineProperty2.default)(this, "isClickedInside", false);
+    (0, _defineProperty2.default)(this, "handleDocumentClick", e => {
+      if (this.isClickedInside) {
+        this.isClickedInside = false;
+        return;
+      }
+      this.props.onClickOutside(e);
+    });
+    (0, _defineProperty2.default)(this, "handleMouseDown", () => {
+      this.isClickedInside = true;
+    });
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleDocumentClick);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleDocumentClick);
+  }
+  render() {
+    return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(this.props.children), {
+      onMouseDownCapture: this.handleMouseDown
+    });
+  }
+}
+var _default = exports.default = ClickOutside;