@atlaskit/editor-plugin-insert-block 2.2.2 → 2.2.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.2.3
+
+### Patch Changes
+
+- [#146643](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146643)
+  [`6b3dec2ad5378`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b3dec2ad5378) -
+  [ux] ED-25116 Pin media popup to toolbar when triggered from toolbar
+- Updated dependencies
+
 ## 2.2.2
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -340,13 +340,13 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     }
   };
   var emojiProvider = getEmojiProvider();
-  var onShowMediaPicker = function onShowMediaPicker() {
+  var onShowMediaPicker = function onShowMediaPicker(targetRef) {
     if (!mediaState) {
       return;
     }
     if ((0, _experiments.editorExperiment)('add-media-from-url', true)) {
       var _pluginInjectionApi$c, _pluginInjectionApi$m;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(targetRef));
     } else {
       mediaState.showMediaPicker();
     }

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

@@ -54,7 +54,6 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var isDetachedElement = function isDetachedElement(el) {
   return !document.body.contains(el);
 };
-var noop = function noop() {};
 var EmojiPickerWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_picker.EmojiPicker);
 var TABLE_SELECTOR_STRING = 'table selector';
 
@@ -167,10 +166,20 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _this.toggleEmojiPicker(_analytics.INPUT_METHOD.TOOLBAR);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmojiButtonRef", function (ref) {
-      if (ref) {
-        _this.emojiButtonRef = ref;
-      }
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleToolbarRef", function (buttonName) {
+      return function (ref) {
+        if (!ref) {
+          return;
+        }
+        switch (buttonName) {
+          case 'emoji':
+            _this.emojiButtonRef = ref;
+            break;
+          case 'media':
+            _this.mediaButtonRef = ref;
+            break;
+        }
+      };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handlePlusButtonRef", function (ref) {
       if (ref) {
@@ -363,7 +372,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         onShowMediaPicker = _this$props5.onShowMediaPicker,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
-        onShowMediaPicker();
+        onShowMediaPicker(_this.mediaButtonRef);
         if (dispatchAnalyticsEvent) {
           dispatchAnalyticsEvent({
             action: _analytics.ACTION.OPENED,
@@ -712,7 +721,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
             item: btn,
             testId: String(btn.content),
-            ref: btn.value.name === 'emoji' ? _this4.handleEmojiButtonRef : noop,
+            ref: _this4.handleToolbarRef(btn.value.name),
             key: btn.value.name,
             spacing: isReducedSpacing ? 'none' : 'default',
             disabled: isDisabled || btn.isDisabled,

package/dist/es2019/plugin.js

@@ -335,13 +335,13 @@ function ToolbarInsertBlockWithInjectionApi({
     }
   };
   const emojiProvider = getEmojiProvider();
-  const onShowMediaPicker = () => {
+  const onShowMediaPicker = targetRef => {
     if (!mediaState) {
       return;
     }
     if (editorExperiment('add-media-from-url', true)) {
       var _pluginInjectionApi$c, _pluginInjectionApi$m;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(targetRef));
     } else {
       mediaState.showMediaPicker();
     }

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

@@ -27,7 +27,6 @@ import TableSelectorPopup from './table-selector-popup-with-listeners';
  * Checks if an element is detached (i.e. not in the current document)
  */
 const isDetachedElement = el => !document.body.contains(el);
-const noop = () => {};
 const EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
 const TABLE_SELECTOR_STRING = 'table selector';
 
@@ -168,9 +167,17 @@ export class ToolbarInsertBlock extends React.PureComponent {
         this.toggleEmojiPicker(INPUT_METHOD.TOOLBAR);
       }
     });
-    _defineProperty(this, "handleEmojiButtonRef", ref => {
-      if (ref) {
-        this.emojiButtonRef = ref;
+    _defineProperty(this, "handleToolbarRef", buttonName => ref => {
+      if (!ref) {
+        return;
+      }
+      switch (buttonName) {
+        case 'emoji':
+          this.emojiButtonRef = ref;
+          break;
+        case 'media':
+          this.mediaButtonRef = ref;
+          break;
       }
     });
     _defineProperty(this, "handlePlusButtonRef", ref => {
@@ -379,7 +386,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
         dispatchAnalyticsEvent
       } = this.props;
       if (onShowMediaPicker) {
-        onShowMediaPicker();
+        onShowMediaPicker(this.mediaButtonRef);
         if (dispatchAnalyticsEvent) {
           dispatchAnalyticsEvent({
             action: ACTION.OPENED,
@@ -746,7 +753,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
         return jsx(ToolbarButton, {
           item: btn,
           testId: String(btn.content),
-          ref: btn.value.name === 'emoji' ? this.handleEmojiButtonRef : noop,
+          ref: this.handleToolbarRef(btn.value.name),
           key: btn.value.name,
           spacing: isReducedSpacing ? 'none' : 'default',
           disabled: isDisabled || btn.isDisabled,

package/dist/esm/plugin.js

@@ -330,13 +330,13 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     }
   };
   var emojiProvider = getEmojiProvider();
-  var onShowMediaPicker = function onShowMediaPicker() {
+  var onShowMediaPicker = function onShowMediaPicker(targetRef) {
     if (!mediaState) {
       return;
     }
     if (editorExperiment('add-media-from-url', true)) {
       var _pluginInjectionApi$c, _pluginInjectionApi$m;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(targetRef));
     } else {
       mediaState.showMediaPicker();
     }

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

@@ -45,7 +45,6 @@ import TableSelectorPopup from './table-selector-popup-with-listeners';
 var isDetachedElement = function isDetachedElement(el) {
   return !document.body.contains(el);
 };
-var noop = function noop() {};
 var EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
 var TABLE_SELECTOR_STRING = 'table selector';
 
@@ -158,10 +157,20 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _this.toggleEmojiPicker(INPUT_METHOD.TOOLBAR);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleEmojiButtonRef", function (ref) {
-      if (ref) {
-        _this.emojiButtonRef = ref;
-      }
+    _defineProperty(_assertThisInitialized(_this), "handleToolbarRef", function (buttonName) {
+      return function (ref) {
+        if (!ref) {
+          return;
+        }
+        switch (buttonName) {
+          case 'emoji':
+            _this.emojiButtonRef = ref;
+            break;
+          case 'media':
+            _this.mediaButtonRef = ref;
+            break;
+        }
+      };
     });
     _defineProperty(_assertThisInitialized(_this), "handlePlusButtonRef", function (ref) {
       if (ref) {
@@ -354,7 +363,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         onShowMediaPicker = _this$props5.onShowMediaPicker,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
-        onShowMediaPicker();
+        onShowMediaPicker(_this.mediaButtonRef);
         if (dispatchAnalyticsEvent) {
           dispatchAnalyticsEvent({
             action: ACTION.OPENED,
@@ -703,7 +712,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           return jsx(ToolbarButton, {
             item: btn,
             testId: String(btn.content),
-            ref: btn.value.name === 'emoji' ? _this4.handleEmojiButtonRef : noop,
+            ref: _this4.handleToolbarRef(btn.value.name),
             key: btn.value.name,
             spacing: isReducedSpacing ? 'none' : 'default',
             disabled: isDisabled || btn.isDisabled,

package/dist/types/ui/ToolbarInsertBlock/index.d.ts

@@ -16,6 +16,7 @@ type InternalActions = {
 export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps & InternalActions, State> {
     private dropdownButtonRef?;
     private emojiButtonRef?;
+    private mediaButtonRef?;
     private plusButtonRef?;
     private tableButtonRef;
     private tableSelectorButtonRef;
@@ -29,7 +30,7 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private handleEmojiPressEscape;
     private handleEmojiClickOutside;
     private renderPopup;
-    private handleEmojiButtonRef;
+    private handleToolbarRef;
     private handlePlusButtonRef;
     private handleDropDownButtonRef;
     private toggleTableSelector;

package/dist/types/ui/ToolbarInsertBlock/types.d.ts

@@ -42,7 +42,7 @@ export interface Props {
     insertMenuItems?: MenuItem[];
     showElementBrowserLink?: boolean;
     showSeparator?: boolean;
-    onShowMediaPicker?: () => void;
+    onShowMediaPicker?: (ref?: HTMLElement) => void;
     onInsertBlockType?: (name: string) => Command;
     onInsertMacroFromMacroBrowser?: (macroProvider: MacroProvider, node?: PMNode, isEditing?: boolean) => (view: EditorView) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/index.d.ts

@@ -16,6 +16,7 @@ type InternalActions = {
 export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps & InternalActions, State> {
     private dropdownButtonRef?;
     private emojiButtonRef?;
+    private mediaButtonRef?;
     private plusButtonRef?;
     private tableButtonRef;
     private tableSelectorButtonRef;
@@ -29,7 +30,7 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private handleEmojiPressEscape;
     private handleEmojiClickOutside;
     private renderPopup;
-    private handleEmojiButtonRef;
+    private handleToolbarRef;
     private handlePlusButtonRef;
     private handleDropDownButtonRef;
     private toggleTableSelector;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/types.d.ts

@@ -42,7 +42,7 @@ export interface Props {
     insertMenuItems?: MenuItem[];
     showElementBrowserLink?: boolean;
     showSeparator?: boolean;
-    onShowMediaPicker?: () => void;
+    onShowMediaPicker?: (ref?: HTMLElement) => void;
     onInsertBlockType?: (name: string) => Command;
     onInsertMacroFromMacroBrowser?: (macroProvider: MacroProvider, node?: PMNode, isEditing?: boolean) => (view: EditorView) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "2.2.2",
+	"version": "2.2.3",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/editor-plugin-image-upload": "^1.2.0",
 		"@atlaskit/editor-plugin-layout": "^1.8.0",
 		"@atlaskit/editor-plugin-media": "^1.34.0",
-		"@atlaskit/editor-plugin-media-insert": "^3.0.0",
+		"@atlaskit/editor-plugin-media-insert": "^3.1.0",
 		"@atlaskit/editor-plugin-mentions": "^2.6.0",
 		"@atlaskit/editor-plugin-panel": "^2.5.0",
 		"@atlaskit/editor-plugin-placeholder-text": "^1.7.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/editor-plugin-rule": "^1.8.0",
 		"@atlaskit/editor-plugin-status": "^2.4.0",
 		"@atlaskit/editor-plugin-table": "^7.28.0",
-		"@atlaskit/editor-plugin-tasks-and-decisions": "^2.6.0",
+		"@atlaskit/editor-plugin-tasks-and-decisions": "^2.7.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.8.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",