@bigbinary/neeto-editor 1.47.117 → 1.47.118

package/dist/v2/Editor.js

@@ -3,12 +3,12 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default, { memo, useState, useRef, useCallback, useEffect, createElement, forwardRef, useImperativeHandle } from 'react';
-import { DropdownMenu, Input, Button, Spinner, Dialog, Tooltip, Toastr, Avatar, Typography, Select, Checkbox as Checkbox$1, Label } from '@bigbinary/neeto-atoms';
+import { DropdownMenu, Input, Button, Spinner, Tooltip, Toastr, Avatar, Typography, Select, Dialog, Checkbox as Checkbox$1, Label } from '@bigbinary/neeto-atoms';
 import { E as Extension, N as NodeViewWrapper, a as NodeViewContent, b as Node, R as ReactNodeViewRenderer, m as mergeAttributes, D as DecorationSet, c as Decoration, d as ReactRenderer, e as emojiPickerApi, f as markInputRule, I as InputRule, r as resetFocussedNode, h as highlightFocussedNode, P as PasteRule, B as BubbleMenu, i as getMarkType, j as getMarkRange, k as useEditor, l as useEditorState, n as EditorContent, o as EditorView } from '../chunk-BLXUWWgi.js';
 import classnames from 'classnames';
 import { isNotPresent, findBy, isNotEmpty, isPresent, noop, slugify } from '@bigbinary/neeto-cist';
-import { withT, useOnClickOutside, useFuncDebounce } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
-import { flushSync, createPortal } from 'react-dom';
+import { useOnClickOutside, withT, useFuncDebounce } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import { createPortal, flushSync } from 'react-dom';
 import { B as BulletList$1, C as CodeBlockLowlight, S as Suggestion, R as Resizable, I as Italic$1, L as Link$1, s as scrollHandler, M as Mention$1, O as OrderedList$1, D as Document, f as fuzzySearch, T as Table$2, a as TaskList, b as TaskItem, c as CharacterCount, d as Code, H as Highlight, e as TextStyle, U as Underline$1, F as FocusClasses, g as StarterKit, h as TableRow, i as TableHeader, j as TableCell, k as Color, l as ListItem, m as Collaboration, n as CollaborationCursor, u as useFetchKbArticles, y as CellSelection, z as useEditorWarnings, A as useDeletedArticles } from '../chunk-Dj7lS7Cs.js';
 import { D as DIRECT_UPLOAD_ENDPOINT, E as EDITOR_OPTIONS, C as COMBINED_REGEX, a as EDITOR_SIZES } from '../chunk-DDwycKmK.js';
 import '../chunk-CF5f8-fy.js';
@@ -16,7 +16,7 @@ import { is, intersection, difference, union, isEmpty, isNil, mergeRight, assoc,
 import ReactDOM from 'react-dom/server';
 import { l as lowlight, d as decodeHtmlEntities, r as removeEmptyTags } from '../chunk-BR5ZkH7J.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { C as CALLOUT_TYPES, E as EmojiPickerMenu, v as validateUrl, b as buildLevelsFromOptions, g as getLinkPopoverPosition, L as LINK_VALIDATION_SCHEMA, c as validateAndFormatUrl, D as DEFAULT_EDITOR_OPTIONS, d as getEditorStyles, M as Menu$3, e as MenuDynamicVariables, f as MediaUploader, h as LinkAddPopOver, j as transformPastedHTML, k as clipboardTextParser, s as setInitialPosition } from '../chunk-C2YYL9vY.js';
+import { C as CALLOUT_TYPES, E as EmojiPickerMenu, v as validateUrl, b as buildLevelsFromOptions, g as getLinkPopoverPosition, L as LINK_VALIDATION_SCHEMA, c as validateAndFormatUrl, D as DEFAULT_EDITOR_OPTIONS, d as getEditorStyles, M as Menu$3, e as MenuDynamicVariables, f as MediaUploader, h as LinkAddPopOver, j as transformPastedHTML, k as clipboardTextParser, s as setInitialPosition } from '../chunk-Ck5Gyhaq.js';
 import Megaphone from '@bigbinary/neeto-icons/misc/Megaphone';
 import { n as PluginKey, P as Plugin, T as TextSelection } from '../chunk-CBN5naeP.js';
 import { ChevronDown, Highlighter, X, Ratio, Ellipsis, AlignLeft, AlignCenter, AlignRight, RectangleHorizontal, RectangleVertical, Square, SquareDashed, Trash2, BookOpen, Pencil } from 'lucide-react';
@@ -747,6 +747,23 @@ var DeletedArticleDecoration = Extension.create({
   }
 });
 
+var EditorContainer = 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(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 PluginKey("emoji-picker");
@@ -778,7 +795,8 @@ var EmojiPicker = 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,
@@ -1143,7 +1161,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,
@@ -1189,43 +1208,50 @@ var ImagePreviewModal = function ImagePreviewModal(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
     setIsLoading = _useState2[1];
-  var handleImageLoad = function handleImageLoad() {
-    return setIsLoading(false);
-  };
+  var imagePreviewRef = useRef(null);
   var handleClose = function handleClose() {
     setIsLoading(true);
     setPreviewUrl(null);
   };
-  return /*#__PURE__*/jsx(Dialog, {
-    className: "image-preview-neeto-ui-modal",
-    closeButton: false,
-    isOpen: isPresent(previewUrl),
-    size: "fullScreen",
-    onClose: handleClose,
-    children: /*#__PURE__*/jsxs(Fragment, {
-      children: [isLoading || isNil(previewUrl) ? /*#__PURE__*/jsx("div", {
-        className: "spinner-wrapper",
-        children: /*#__PURE__*/jsx(Spinner, {
-          className: "spinner"
+  useOnClickOutside(imagePreviewRef, handleClose, {
+    enabled: isPresent(previewUrl)
+  });
+  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 (!isPresent(previewUrl)) return null;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/jsxs("div", {
+    className: "ne-image-preview-wrapper active",
+    children: [isLoading && /*#__PURE__*/jsx(Spinner, {
+      className: "ne-image-preview-wrapper__spinner"
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames("ne-image-preview", {
+        "image-loaded": !isLoading
+      }),
+      children: [!isLoading && /*#__PURE__*/jsx("div", {
+        className: "close-button",
+        children: /*#__PURE__*/jsx(Button, {
+          icon: X,
+          variant: "secondary",
+          onClick: handleClose
         })
-      }) : /*#__PURE__*/jsx(Button, {
-        className: "image-preview-neeto-ui-modal__close-btn",
-        icon: X,
-        variant: "secondary",
-        onClick: handleClose,
-        onKeyDown: function onKeyDown(e) {
-          return e.key === "Escape" && handleClose;
-        }
       }), /*#__PURE__*/jsx("img", {
         alt: "Preview",
+        ref: imagePreviewRef,
         src: previewUrl,
-        className: classnames({
-          "display-none": isLoading || isNil(previewUrl)
-        }),
-        onLoad: handleImageLoad
+        onKeyDown: handleKeyDown,
+        onLoad: function onLoad() {
+          return setIsLoading(false);
+        }
       })]
-    })
-  });
+    })]
+  }), document.body);
 };
 
 var DropdownMenuList = DropdownMenu.Menu,
@@ -2118,7 +2144,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,
@@ -2971,7 +2998,8 @@ var SlashCommands = {
                   popup = tippy("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,
@@ -3048,7 +3076,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,
@@ -3926,8 +3955,11 @@ var useCustomExtensions = function useCustomExtensions(_ref) {
     openLinkInNewTab = _ref.openLinkInNewTab,
     enableReactNodeViewOptimization = _ref.enableReactNodeViewOptimization,
     collaborationProvider = _ref.collaborationProvider,
-    setIsNeetoKbArticleActive = _ref.setIsNeetoKbArticleActive;
-  var customExtensions = [CharacterCount, Code, CodeBlock.configure({
+    setIsNeetoKbArticleActive = _ref.setIsNeetoKbArticleActive,
+    containerRef = _ref.containerRef;
+  var customExtensions = [EditorContainer.configure({
+    containerRef: containerRef
+  }), CharacterCount, Code, CodeBlock.configure({
     enableReactNodeViewOptimization: enableReactNodeViewOptimization
   }), CustomCommands, Document, FigCaption, HighlightInternal, SelectionDecoration, FocusClasses.configure({
     mode: "shallowest"
@@ -4725,9 +4757,10 @@ var KbArticleView = 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;
@@ -5115,7 +5148,7 @@ var LinkPopOver = function LinkPopOver(_ref) {
         style: popoverStyle,
         children: renderPopoverContent()
       })]
-    }) : null, document.body), /*#__PURE__*/jsx(KbArticleDeletedModal, {
+    }) : null, (_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : document.body), /*#__PURE__*/jsx(KbArticleDeletedModal, {
       isOpen: showDeletedModal,
       onClose: function onClose() {
         return setShowDeletedModal(false);
@@ -5128,6 +5161,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(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 = function Editor(_ref, ref) {
+  var _wrapperRef$current;
   var _ref$addonCommands = _ref.addonCommands,
     addonCommands = _ref$addonCommands === void 0 ? [] : _ref$addonCommands,
     _ref$addons = _ref.addons,
@@ -5277,7 +5311,8 @@ var Editor = function Editor(_ref, ref) {
     openLinkInNewTab: openLinkInNewTab,
     enableReactNodeViewOptimization: enableReactNodeViewOptimization,
     collaborationProvider: collaborationProvider,
-    setIsNeetoKbArticleActive: setNeetoKbArticleState
+    setIsNeetoKbArticleActive: setNeetoKbArticleState,
+    containerRef: wrapperRef
   });
   useEditorWarnings({
     initialValue: initialValue
@@ -5393,6 +5428,7 @@ var Editor = function Editor(_ref, ref) {
           tooltips: tooltips,
           variables: variables,
           className: menuClassName,
+          containerRef: wrapperRef,
           isIndependant: isMenuIndependent,
           setIsNeetoKbArticleActive: setNeetoKbArticleState
         }), children, menuType === "none" && /*#__PURE__*/jsx("div", {
@@ -5427,12 +5463,14 @@ var Editor = function Editor(_ref, ref) {
           onChange: onChangeAttachments
         }, otherAttachmentProps)), (editor === null || editor === void 0 ? void 0 : editor.isActive("link")) && /*#__PURE__*/jsx(LinkPopOver, {
           deletedArticlesHook: deletedArticlesHook,
-          editor: editor
+          editor: editor,
+          containerRef: wrapperRef
         }), isAddLinkActive && /*#__PURE__*/jsx(LinkAddPopOver, {
           editor: editor,
           isAddLinkActive: isAddLinkActive,
           openLinkInNewTab: openLinkInNewTab,
-          setIsAddLinkActive: setIsAddLinkActive
+          setIsAddLinkActive: setIsAddLinkActive,
+          containerRef: wrapperRef
         }), neetoKbArticleState.active && neetoKbArticleState.cursorPos && /*#__PURE__*/createPortal(/*#__PURE__*/jsx(ArticleSelector, {
           deletedArticlesHook: deletedArticlesHook,
           cursorPos: neetoKbArticleState.cursorPos,
@@ -5445,7 +5483,7 @@ var Editor = function Editor(_ref, ref) {
               cursorPos: null
             });
           }
-        }), document.body), /*#__PURE__*/jsx(TableActionMenu, {
+        }), (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 ? _wrapperRef$current : document.body), /*#__PURE__*/jsx(TableActionMenu, {
           editor: editor,
           appendTo: wrapperRef
         }), isCharacterCountActive && /*#__PURE__*/jsx(CharacterCountWrapper, {