@bigbinary/neeto-editor 1.47.117 → 1.47.118

package/dist/cjs/v2/Editor.cjs.js

@@ -18,7 +18,7 @@ var ramda = require('ramda');
 var ReactDOM = require('react-dom/server');
 var common = require('../chunk-De3nCFAF.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
-var v2_Menu = require('../chunk-BzPTK6pP.cjs.js');
+var v2_Menu = require('../chunk-Cqq9Q2Ty.cjs.js');
 var Megaphone = require('@bigbinary/neeto-icons/misc/Megaphone');
 var index$1 = require('../chunk-eyfbjfPH.cjs.js');
 var lucideReact = require('lucide-react');
@@ -803,6 +803,23 @@ var DeletedArticleDecoration = useEditorStore.Extension.create({
   }
 });
 
+var EditorContainer = useEditorStore.Extension.create({
+  name: "editorContainer",
+  addOptions: function addOptions() {
+    return {
+      containerRef: null
+    };
+  },
+  addStorage: function addStorage() {
+    return {
+      containerRef: null
+    };
+  },
+  onBeforeCreate: function onBeforeCreate() {
+    this.storage.containerRef = this.options.containerRef;
+  }
+});
+
 function ownKeys$i(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EmojiPickerPluginKey = new index$1.PluginKey("emoji-picker");
@@ -834,7 +851,8 @@ var EmojiPicker = useEditorStore.Node.create({
                 theme: "light",
                 getReferenceClientRect: props.clientRect,
                 appendTo: function appendTo() {
-                  return document.body;
+                  var _props$editor$storage, _props$editor;
+                  return (_props$editor$storage = (_props$editor = props.editor) === null || _props$editor === void 0 || (_props$editor = _props$editor.storage) === null || _props$editor === void 0 || (_props$editor = _props$editor.editorContainer) === null || _props$editor === void 0 || (_props$editor = _props$editor.containerRef) === null || _props$editor === void 0 ? void 0 : _props$editor.current) !== null && _props$editor$storage !== void 0 ? _props$editor$storage : document.body;
                 },
                 content: reactRenderer.element,
                 showOnCreate: true,
@@ -1199,7 +1217,8 @@ var suggestionConfig = {
             theme: "light",
             getReferenceClientRect: props.clientRect,
             appendTo: function appendTo() {
-              return document.body;
+              var _props$editor$storage, _props$editor;
+              return (_props$editor$storage = (_props$editor = props.editor) === null || _props$editor === void 0 || (_props$editor = _props$editor.storage) === null || _props$editor === void 0 || (_props$editor = _props$editor.editorContainer) === null || _props$editor === void 0 || (_props$editor = _props$editor.containerRef) === null || _props$editor === void 0 ? void 0 : _props$editor.current) !== null && _props$editor$storage !== void 0 ? _props$editor$storage : document.body;
             },
             content: reactRenderer.element,
             showOnCreate: true,
@@ -1245,43 +1264,50 @@ var ImagePreviewModal = function ImagePreviewModal(_ref) {
     _useState2 = _slicedToArray__default.default(_useState, 2),
     isLoading = _useState2[0],
     setIsLoading = _useState2[1];
-  var handleImageLoad = function handleImageLoad() {
-    return setIsLoading(false);
-  };
+  var imagePreviewRef = React.useRef(null);
   var handleClose = function handleClose() {
     setIsLoading(true);
     setPreviewUrl(null);
   };
-  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Dialog, {
-    className: "image-preview-neeto-ui-modal",
-    closeButton: false,
-    isOpen: neetoCist.isPresent(previewUrl),
-    size: "fullScreen",
-    onClose: handleClose,
-    children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [isLoading || ramda.isNil(previewUrl) ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "spinner-wrapper",
-        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {
-          className: "spinner"
+  reactUtils.useOnClickOutside(imagePreviewRef, handleClose, {
+    enabled: neetoCist.isPresent(previewUrl)
+  });
+  React.useEffect(function () {
+    if (!previewUrl || !imagePreviewRef.current) return;
+    imagePreviewRef.current.setAttribute("tabindex", "-1");
+    imagePreviewRef.current.focus();
+  }, [previewUrl]);
+  var handleKeyDown = function handleKeyDown(e) {
+    e.stopPropagation();
+    e.key === "Escape" && handleClose();
+  };
+  if (!neetoCist.isPresent(previewUrl)) return null;
+  return /*#__PURE__*/ReactDOM$1.createPortal(/*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "ne-image-preview-wrapper active",
+    children: [isLoading && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {
+      className: "ne-image-preview-wrapper__spinner"
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classnames__default.default("ne-image-preview", {
+        "image-loaded": !isLoading
+      }),
+      children: [!isLoading && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "close-button",
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          icon: lucideReact.X,
+          variant: "secondary",
+          onClick: handleClose
         })
-      }) : /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
-        className: "image-preview-neeto-ui-modal__close-btn",
-        icon: lucideReact.X,
-        variant: "secondary",
-        onClick: handleClose,
-        onKeyDown: function onKeyDown(e) {
-          return e.key === "Escape" && handleClose;
-        }
       }), /*#__PURE__*/jsxRuntime.jsx("img", {
         alt: "Preview",
+        ref: imagePreviewRef,
         src: previewUrl,
-        className: classnames__default.default({
-          "display-none": isLoading || ramda.isNil(previewUrl)
-        }),
-        onLoad: handleImageLoad
+        onKeyDown: handleKeyDown,
+        onLoad: function onLoad() {
+          return setIsLoading(false);
+        }
       })]
-    })
-  });
+    })]
+  }), document.body);
 };
 
 var DropdownMenuList = neetoAtoms.DropdownMenu.Menu,
@@ -2174,7 +2200,8 @@ var suggestion$1 = {
           theme: "light neeto-editor-mentions-tooltip",
           getReferenceClientRect: props.clientRect,
           appendTo: function appendTo() {
-            return document.body;
+            var _props$editor$storage, _props$editor;
+            return (_props$editor$storage = (_props$editor = props.editor) === null || _props$editor === void 0 || (_props$editor = _props$editor.storage) === null || _props$editor === void 0 || (_props$editor = _props$editor.editorContainer) === null || _props$editor === void 0 || (_props$editor = _props$editor.containerRef) === null || _props$editor === void 0 ? void 0 : _props$editor.current) !== null && _props$editor$storage !== void 0 ? _props$editor$storage : document.body;
           },
           content: reactRenderer.element,
           showOnCreate: true,
@@ -3027,7 +3054,8 @@ var SlashCommands = {
                   popup = tippy__default.default("body", {
                     getReferenceClientRect: props.clientRect,
                     appendTo: function appendTo() {
-                      return document.body;
+                      var _props$editor$storage, _props$editor;
+                      return (_props$editor$storage = (_props$editor = props.editor) === null || _props$editor === void 0 || (_props$editor = _props$editor.storage) === null || _props$editor === void 0 || (_props$editor = _props$editor.editorContainer) === null || _props$editor === void 0 || (_props$editor = _props$editor.containerRef) === null || _props$editor === void 0 ? void 0 : _props$editor.current) !== null && _props$editor$storage !== void 0 ? _props$editor$storage : document.body;
                     },
                     content: reactRenderer.element,
                     showOnCreate: true,
@@ -3104,7 +3132,8 @@ var suggestion = {
           theme: "light neeto-editor-mentions-tooltip",
           getReferenceClientRect: props.clientRect,
           appendTo: function appendTo() {
-            return document.body;
+            var _props$editor$storage, _props$editor;
+            return (_props$editor$storage = (_props$editor = props.editor) === null || _props$editor === void 0 || (_props$editor = _props$editor.storage) === null || _props$editor === void 0 || (_props$editor = _props$editor.editorContainer) === null || _props$editor === void 0 || (_props$editor = _props$editor.containerRef) === null || _props$editor === void 0 ? void 0 : _props$editor.current) !== null && _props$editor$storage !== void 0 ? _props$editor$storage : document.body;
           },
           content: reactRenderer.element,
           showOnCreate: true,
@@ -3982,8 +4011,11 @@ var useCustomExtensions = function useCustomExtensions(_ref) {
     openLinkInNewTab = _ref.openLinkInNewTab,
     enableReactNodeViewOptimization = _ref.enableReactNodeViewOptimization,
     collaborationProvider = _ref.collaborationProvider,
-    setIsNeetoKbArticleActive = _ref.setIsNeetoKbArticleActive;
-  var customExtensions = [index.CharacterCount, index.Code, CodeBlock.configure({
+    setIsNeetoKbArticleActive = _ref.setIsNeetoKbArticleActive,
+    containerRef = _ref.containerRef;
+  var customExtensions = [EditorContainer.configure({
+    containerRef: containerRef
+  }), index.CharacterCount, index.Code, CodeBlock.configure({
     enableReactNodeViewOptimization: enableReactNodeViewOptimization
   }), CustomCommands, index.Document, FigCaption, HighlightInternal, SelectionDecoration, index.FocusClasses.configure({
     mode: "shallowest"
@@ -4781,9 +4813,10 @@ var KbArticleView = reactUtils.withT(function (_ref) {
 });
 
 var LinkPopOver = function LinkPopOver(_ref) {
-  var _view$state, _view$state2;
+  var _view$state, _view$state2, _containerRef$current;
   var editor = _ref.editor,
-    deletedArticlesHook = _ref.deletedArticlesHook;
+    deletedArticlesHook = _ref.deletedArticlesHook,
+    containerRef = _ref.containerRef;
   var _ref2 = editor || {},
     view = _ref2.view;
   var from = editor.state.selection.from;
@@ -5171,7 +5204,7 @@ var LinkPopOver = function LinkPopOver(_ref) {
         style: popoverStyle,
         children: renderPopoverContent()
       })]
-    }) : null, document.body), /*#__PURE__*/jsxRuntime.jsx(KbArticleDeletedModal, {
+    }) : null, (_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : document.body), /*#__PURE__*/jsxRuntime.jsx(KbArticleDeletedModal, {
       isOpen: showDeletedModal,
       onClose: function onClose() {
         return setShowDeletedModal(false);
@@ -5184,6 +5217,7 @@ var _excluded = ["addonCommands", "addons", "attachments", "attachmentsConfig",
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Editor$1 = function Editor(_ref, ref) {
+  var _wrapperRef$current;
   var _ref$addonCommands = _ref.addonCommands,
     addonCommands = _ref$addonCommands === void 0 ? [] : _ref$addonCommands,
     _ref$addons = _ref.addons,
@@ -5333,7 +5367,8 @@ var Editor$1 = function Editor(_ref, ref) {
     openLinkInNewTab: openLinkInNewTab,
     enableReactNodeViewOptimization: enableReactNodeViewOptimization,
     collaborationProvider: collaborationProvider,
-    setIsNeetoKbArticleActive: setNeetoKbArticleState
+    setIsNeetoKbArticleActive: setNeetoKbArticleState,
+    containerRef: wrapperRef
   });
   index.useEditorWarnings({
     initialValue: initialValue
@@ -5449,6 +5484,7 @@ var Editor$1 = function Editor(_ref, ref) {
           tooltips: tooltips,
           variables: variables,
           className: menuClassName,
+          containerRef: wrapperRef,
           isIndependant: isMenuIndependent,
           setIsNeetoKbArticleActive: setNeetoKbArticleState
         }), children, menuType === "none" && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -5483,12 +5519,14 @@ var Editor$1 = function Editor(_ref, ref) {
           onChange: onChangeAttachments
         }, otherAttachmentProps)), (editor === null || editor === void 0 ? void 0 : editor.isActive("link")) && /*#__PURE__*/jsxRuntime.jsx(LinkPopOver, {
           deletedArticlesHook: deletedArticlesHook,
-          editor: editor
+          editor: editor,
+          containerRef: wrapperRef
         }), isAddLinkActive && /*#__PURE__*/jsxRuntime.jsx(v2_Menu.LinkAddPopOver, {
           editor: editor,
           isAddLinkActive: isAddLinkActive,
           openLinkInNewTab: openLinkInNewTab,
-          setIsAddLinkActive: setIsAddLinkActive
+          setIsAddLinkActive: setIsAddLinkActive,
+          containerRef: wrapperRef
         }), neetoKbArticleState.active && neetoKbArticleState.cursorPos && /*#__PURE__*/ReactDOM$1.createPortal(/*#__PURE__*/jsxRuntime.jsx(ArticleSelector, {
           deletedArticlesHook: deletedArticlesHook,
           cursorPos: neetoKbArticleState.cursorPos,
@@ -5501,7 +5539,7 @@ var Editor$1 = function Editor(_ref, ref) {
               cursorPos: null
             });
           }
-        }), document.body), /*#__PURE__*/jsxRuntime.jsx(TableActionMenu, {
+        }), (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 ? _wrapperRef$current : document.body), /*#__PURE__*/jsxRuntime.jsx(TableActionMenu, {
           editor: editor,
           appendTo: wrapperRef
         }), isCharacterCountActive && /*#__PURE__*/jsxRuntime.jsx(CharacterCountWrapper, {