@atlaskit/editor-plugin-insert-block 9.0.10 → 9.0.11

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 9.0.11
+
+### Patch Changes
+
+- [`da1128b3090cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da1128b3090cc) -
+  [EDITOR-5922] Update media picker to mount to popupsMountPoint (e.g. portal) if available so that
+  it is still visible when rendering outside of editor that has overflow hidden (e.g. resizable
+  editor)
+- Updated dependencies
+
 ## 9.0.10
 
 ### Patch Changes

package/dist/cjs/insertBlockPlugin.js

@@ -168,7 +168,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
     }
     return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
       providerFactory: providerFactory
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       providers: ['emojiProvider'],
       renderNode: renderNode

package/dist/cjs/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -20,7 +20,7 @@ var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function Blo
     target: props.plusButtonRef,
     fitHeight: _InsertMenu.DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
     fitWidth: 350
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [0, 3],
     mountTo: props.popupsMountPoint,

package/dist/cjs/ui/ToolbarInsertBlock/index.js

@@ -594,7 +594,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         target: ref.deref(),
         fitHeight: 350,
         fitWidth: 350
-        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         offset: [0, 3],
         mountTo: popupsMountPoint,

package/dist/cjs/ui/toolbar-components/EmojiButton.js

@@ -72,7 +72,7 @@ var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
     }),
     ariaKeyshortcuts: "Shift+;",
     ref: emojiButtonRef
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     onClick: function onClick() {
       return emojiPickerPopup.toggle();

package/dist/cjs/ui/toolbar-components/InsertButton.js

@@ -207,7 +207,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
     target: insertButtonRef.current,
     fitHeight: _InsertMenu.DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
     fitWidth: 350
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [0, 3],
     mountTo: popupsMountPoint,

package/dist/cjs/ui/toolbar-components/MediaButton.js

@@ -13,11 +13,14 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var MediaButton = exports.MediaButton = function MediaButton(_ref) {
   var api = _ref.api;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var _useToolbarUI = (0, _editorToolbar.useToolbarUI)(),
+    popupsMountPoint = _useToolbarUI.popupsMountPoint;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['media', 'connectivity'], function (states) {
       var _states$mediaState, _states$mediaState2, _states$connectivityS;
       return {
@@ -40,11 +43,19 @@ var MediaButton = exports.MediaButton = function MediaButton(_ref) {
     }
     if (api !== null && api !== void 0 && (_api$mediaInsert = api.mediaInsert) !== null && _api$mediaInsert !== void 0 && (_api$mediaInsert = _api$mediaInsert.commands) !== null && _api$mediaInsert !== void 0 && _api$mediaInsert.showMediaInsertPopup) {
       var _api$core, _api$mediaInsert2;
-      var mountInfo = mediaButtonRef.current ? {
-        ref: mediaButtonRef.current,
-        mountPoint: mediaButtonRef.current
+      var ref = mediaButtonRef.current;
+      var mountInfoOld = ref ? {
+        ref: ref,
+        mountPoint: ref
       } : undefined;
-      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.commands.showMediaInsertPopup(mountInfo));
+      var mountInfo = ref !== null && ref !== void 0 && ref.parentElement ? {
+        ref: ref,
+        mountPoint: popupsMountPoint !== null && popupsMountPoint !== void 0 ? popupsMountPoint : ref.parentElement
+      } : undefined;
+      var resolvedMountInfo = (0, _experiments.editorExperiment)('platform_editor_fix_media_picker_hidden', true, {
+        exposure: true
+      }) ? mountInfo : mountInfoOld;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.commands.showMediaInsertPopup(resolvedMountInfo));
     } else {
       showMediaPicker();
     }

package/dist/cjs/ui/toolbar-components/popups/EmojiPickerPopup.js

@@ -37,7 +37,7 @@ var EmojiPickerPopup = exports.EmojiPickerPopup = function EmojiPickerPopup(_ref
     target: targetRef.current,
     fitHeight: 350,
     fitWidth: 350
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [0, 3],
     mountTo: popupsMountPoint,

package/dist/es2019/insertBlockPlugin.js

@@ -153,7 +153,7 @@ export const insertBlockPlugin = ({
     }
     return /*#__PURE__*/React.createElement(WithProviders, {
       providerFactory: providerFactory
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       providers: ['emojiProvider'],
       renderNode: renderNode

package/dist/es2019/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -11,7 +11,7 @@ export const BlockInsertElementBrowser = props => {
     target: props.plusButtonRef,
     fitHeight: DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
     fitWidth: 350
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [0, 3],
     mountTo: props.popupsMountPoint,

package/dist/es2019/ui/ToolbarInsertBlock/index.js

@@ -661,7 +661,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       target: ref.deref(),
       fitHeight: 350,
       fitWidth: 350
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       offset: [0, 3],
       mountTo: popupsMountPoint,

package/dist/es2019/ui/toolbar-components/EmojiButton.js

@@ -68,7 +68,7 @@ export const EmojiButton = ({
     }),
     ariaKeyshortcuts: "Shift+;",
     ref: emojiButtonRef
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     onClick: () => emojiPickerPopup.toggle(),
     isSelected: emojiPickerPopup.isOpen,

package/dist/es2019/ui/toolbar-components/InsertButton.js

@@ -200,7 +200,7 @@ export const InsertButton = ({
     target: insertButtonRef.current,
     fitHeight: DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
     fitWidth: 350
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [0, 3],
     mountTo: popupsMountPoint,

package/dist/es2019/ui/toolbar-components/MediaButton.js

@@ -5,13 +5,17 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
-import { ToolbarButton, ToolbarTooltip, ImageIcon } from '@atlaskit/editor-toolbar';
+import { ToolbarButton, ToolbarTooltip, ImageIcon, useToolbarUI } from '@atlaskit/editor-toolbar';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const MediaButton = ({
   api
 }) => {
   const {
     formatMessage
   } = useIntl();
+  const {
+    popupsMountPoint
+  } = useToolbarUI();
   const {
     showMediaPicker,
     connectivityMode,
@@ -35,11 +39,19 @@ export const MediaButton = ({
     }
     if (api !== null && api !== void 0 && (_api$mediaInsert = api.mediaInsert) !== null && _api$mediaInsert !== void 0 && (_api$mediaInsert$comm = _api$mediaInsert.commands) !== null && _api$mediaInsert$comm !== void 0 && _api$mediaInsert$comm.showMediaInsertPopup) {
       var _api$core, _api$mediaInsert2;
-      const mountInfo = mediaButtonRef.current ? {
-        ref: mediaButtonRef.current,
-        mountPoint: mediaButtonRef.current
+      const ref = mediaButtonRef.current;
+      const mountInfoOld = ref ? {
+        ref,
+        mountPoint: ref
+      } : undefined;
+      const mountInfo = ref !== null && ref !== void 0 && ref.parentElement ? {
+        ref,
+        mountPoint: popupsMountPoint !== null && popupsMountPoint !== void 0 ? popupsMountPoint : ref.parentElement
       } : undefined;
-      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.commands.showMediaInsertPopup(mountInfo));
+      const resolvedMountInfo = editorExperiment('platform_editor_fix_media_picker_hidden', true, {
+        exposure: true
+      }) ? mountInfo : mountInfoOld;
+      api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.commands.showMediaInsertPopup(resolvedMountInfo));
     } else {
       showMediaPicker();
     }

package/dist/es2019/ui/toolbar-components/popups/EmojiPickerPopup.js

@@ -31,7 +31,7 @@ export const EmojiPickerPopup = ({
     target: targetRef.current,
     fitHeight: 350,
     fitWidth: 350
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [0, 3],
     mountTo: popupsMountPoint,

package/dist/esm/insertBlockPlugin.js

@@ -158,7 +158,7 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
     }
     return /*#__PURE__*/React.createElement(WithProviders, {
       providerFactory: providerFactory
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       providers: ['emojiProvider'],
       renderNode: renderNode

package/dist/esm/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -11,7 +11,7 @@ export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props)
     target: props.plusButtonRef,
     fitHeight: DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
     fitWidth: 350
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [0, 3],
     mountTo: props.popupsMountPoint,

package/dist/esm/ui/ToolbarInsertBlock/index.js

@@ -588,7 +588,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         target: ref.deref(),
         fitHeight: 350,
         fitWidth: 350
-        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         offset: [0, 3],
         mountTo: popupsMountPoint,

package/dist/esm/ui/toolbar-components/EmojiButton.js

@@ -64,7 +64,7 @@ export var EmojiButton = function EmojiButton(_ref) {
     }),
     ariaKeyshortcuts: "Shift+;",
     ref: emojiButtonRef
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     onClick: function onClick() {
       return emojiPickerPopup.toggle();

package/dist/esm/ui/toolbar-components/InsertButton.js

@@ -199,7 +199,7 @@ export var InsertButton = function InsertButton(_ref) {
     target: insertButtonRef.current,
     fitHeight: DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
     fitWidth: 350
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [0, 3],
     mountTo: popupsMountPoint,

package/dist/esm/ui/toolbar-components/MediaButton.js

@@ -5,11 +5,14 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
-import { ToolbarButton, ToolbarTooltip, ImageIcon } from '@atlaskit/editor-toolbar';
+import { ToolbarButton, ToolbarTooltip, ImageIcon, useToolbarUI } from '@atlaskit/editor-toolbar';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var MediaButton = function MediaButton(_ref) {
   var api = _ref.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useToolbarUI = useToolbarUI(),
+    popupsMountPoint = _useToolbarUI.popupsMountPoint;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['media', 'connectivity'], function (states) {
       var _states$mediaState, _states$mediaState2, _states$connectivityS;
       return {
@@ -32,11 +35,19 @@ export var MediaButton = function MediaButton(_ref) {
     }
     if (api !== null && api !== void 0 && (_api$mediaInsert = api.mediaInsert) !== null && _api$mediaInsert !== void 0 && (_api$mediaInsert = _api$mediaInsert.commands) !== null && _api$mediaInsert !== void 0 && _api$mediaInsert.showMediaInsertPopup) {
       var _api$core, _api$mediaInsert2;
-      var mountInfo = mediaButtonRef.current ? {
-        ref: mediaButtonRef.current,
-        mountPoint: mediaButtonRef.current
+      var ref = mediaButtonRef.current;
+      var mountInfoOld = ref ? {
+        ref: ref,
+        mountPoint: ref
       } : undefined;
-      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.commands.showMediaInsertPopup(mountInfo));
+      var mountInfo = ref !== null && ref !== void 0 && ref.parentElement ? {
+        ref: ref,
+        mountPoint: popupsMountPoint !== null && popupsMountPoint !== void 0 ? popupsMountPoint : ref.parentElement
+      } : undefined;
+      var resolvedMountInfo = editorExperiment('platform_editor_fix_media_picker_hidden', true, {
+        exposure: true
+      }) ? mountInfo : mountInfoOld;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$mediaInsert2 = api.mediaInsert) === null || _api$mediaInsert2 === void 0 ? void 0 : _api$mediaInsert2.commands.showMediaInsertPopup(resolvedMountInfo));
     } else {
       showMediaPicker();
     }

package/dist/esm/ui/toolbar-components/popups/EmojiPickerPopup.js

@@ -30,7 +30,7 @@ export var EmojiPickerPopup = function EmojiPickerPopup(_ref) {
     target: targetRef.current,
     fitHeight: 350,
     fitWidth: 350
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     offset: [0, 3],
     mountTo: popupsMountPoint,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "9.0.10",
+	"version": "9.0.11",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/editor-plugin-rule": "^8.0.0",
 		"@atlaskit/editor-plugin-status": "^9.0.0",
 		"@atlaskit/editor-plugin-table": "^18.1.0",
-		"@atlaskit/editor-plugin-tasks-and-decisions": "^11.2.0",
+		"@atlaskit/editor-plugin-tasks-and-decisions": "^11.3.0",
 		"@atlaskit/editor-plugin-toolbar": "^5.1.0",
 		"@atlaskit/editor-plugin-type-ahead": "^8.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
@@ -65,7 +65,7 @@
 		"@atlaskit/icon-lab": "^6.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^44.0.0",
+		"@atlaskit/tmp-editor-statsig": "^44.3.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -75,7 +75,7 @@
 		"react-virtualized": "^9.22.6"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.7.0",
+		"@atlaskit/editor-common": "^112.8.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"