@atlaskit/editor-plugin-insert-block 2.2.6 → 2.2.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.2.8
+
+### Patch Changes
+
+- [#147412](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147412)
+  [`aa848a0cd334a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aa848a0cd334a) -
+  fix button number issue, show more buttons on smaller screens
+- Updated dependencies
+
+## 2.2.7
+
+### Patch Changes
+
+- [#147461](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147461)
+  [`acef010cdb706`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/acef010cdb706) -
+  [ux] [ED-25164] Pass mounting point to media insert plugin for correct toolbar popup positioning
+
 ## 2.2.6
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -32,9 +32,10 @@ var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance
     switch (toolbarSize) {
       case _types.ToolbarSize.XXL:
       case _types.ToolbarSize.XL:
-        return 7;
       case _types.ToolbarSize.L:
-        return 5;
+        return 7;
+      case _types.ToolbarSize.M:
+        return 3;
       default:
         return 0;
     }
@@ -336,13 +337,13 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     }
   };
   var emojiProvider = getEmojiProvider();
-  var onShowMediaPicker = function onShowMediaPicker(targetRef) {
+  var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
     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(targetRef));
+      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(mountInfo));
     } else {
       mediaState.showMediaPicker();
     }

package/dist/cjs/ui/ToolbarInsertBlock/create-items.js

@@ -216,12 +216,18 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
       disabled: false
     }));
   }
-  var numButtonsWithoutTableSelector = numberOfButtons;
-  if (!(0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes')) {
-    numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
-  }
-  var buttonItems = items.slice(0, numButtonsWithoutTableSelector).map(buttonToItem);
-  var remainingItems = items.slice(numButtonsWithoutTableSelector).filter(function (_ref) {
+  var numButtonsAdjusted = numberOfButtons;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes')) {
+    if (items.slice(0, numButtonsAdjusted).some(function (item) {
+      return item.value.name === 'table selector';
+    })) {
+      numButtonsAdjusted++;
+    }
+  } else {
+    numButtonsAdjusted = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
+  }
+  var buttonItems = items.slice(0, numButtonsAdjusted).map(buttonToItem);
+  var remainingItems = items.slice(numButtonsAdjusted).filter(function (_ref) {
     var name = _ref.value.name;
     return name !== 'table selector';
   });

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

@@ -75,10 +75,10 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
   function ToolbarInsertBlock() {
     var _this;
     (0, _classCallCheck2.default)(this, ToolbarInsertBlock);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call.apply(_super, [this].concat(_args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableButtonRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableSelectorButtonRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unregisterToggleDropdownMenuOptions", null);
@@ -372,7 +372,12 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         onShowMediaPicker = _this$props5.onShowMediaPicker,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
-        onShowMediaPicker(_this.mediaButtonRef);
+        var _this$props$popupsMou;
+        var args = _this.mediaButtonRef ? {
+          ref: _this.mediaButtonRef,
+          mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : _this.mediaButtonRef
+        } : undefined;
+        onShowMediaPicker(args);
         if (dispatchAnalyticsEvent) {
           dispatchAnalyticsEvent({
             action: _analytics.ACTION.OPENED,

package/dist/es2019/plugin.js

@@ -22,9 +22,10 @@ const toolbarSizeToButtons = (toolbarSize, appearance) => {
     switch (toolbarSize) {
       case ToolbarSize.XXL:
       case ToolbarSize.XL:
-        return 7;
       case ToolbarSize.L:
-        return 5;
+        return 7;
+      case ToolbarSize.M:
+        return 3;
       default:
         return 0;
     }
@@ -331,13 +332,13 @@ function ToolbarInsertBlockWithInjectionApi({
     }
   };
   const emojiProvider = getEmojiProvider();
-  const onShowMediaPicker = targetRef => {
+  const onShowMediaPicker = mountInfo => {
     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(targetRef));
+      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(mountInfo));
     } else {
       mediaState.showMediaPicker();
     }

package/dist/es2019/ui/ToolbarInsertBlock/create-items.js

@@ -197,12 +197,16 @@ const createInsertBlockItems = config => {
       disabled: false
     }));
   }
-  let numButtonsWithoutTableSelector = numberOfButtons;
-  if (!fg('platform_editor_toolbar_responsive_fixes')) {
-    numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
+  let numButtonsAdjusted = numberOfButtons;
+  if (fg('platform_editor_toolbar_responsive_fixes')) {
+    if (items.slice(0, numButtonsAdjusted).some(item => item.value.name === 'table selector')) {
+      numButtonsAdjusted++;
+    }
+  } else {
+    numButtonsAdjusted = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
   }
-  const buttonItems = items.slice(0, numButtonsWithoutTableSelector).map(buttonToItem);
-  const remainingItems = items.slice(numButtonsWithoutTableSelector).filter(({
+  const buttonItems = items.slice(0, numButtonsAdjusted).map(buttonToItem);
+  const remainingItems = items.slice(numButtonsAdjusted).filter(({
     value: {
       name
     }

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

@@ -73,8 +73,8 @@ css`
 	`;
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class ToolbarInsertBlock extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(..._args) {
+    super(..._args);
     _defineProperty(this, "tableButtonRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "tableSelectorButtonRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "unregisterToggleDropdownMenuOptions", null);
@@ -386,7 +386,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
         dispatchAnalyticsEvent
       } = this.props;
       if (onShowMediaPicker) {
-        onShowMediaPicker(this.mediaButtonRef);
+        var _this$props$popupsMou;
+        const args = this.mediaButtonRef ? {
+          ref: this.mediaButtonRef,
+          mountPoint: (_this$props$popupsMou = this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : this.mediaButtonRef
+        } : undefined;
+        onShowMediaPicker(args);
         if (dispatchAnalyticsEvent) {
           dispatchAnalyticsEvent({
             action: ACTION.OPENED,

package/dist/esm/plugin.js

@@ -22,9 +22,10 @@ var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance
     switch (toolbarSize) {
       case ToolbarSize.XXL:
       case ToolbarSize.XL:
-        return 7;
       case ToolbarSize.L:
-        return 5;
+        return 7;
+      case ToolbarSize.M:
+        return 3;
       default:
         return 0;
     }
@@ -326,13 +327,13 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     }
   };
   var emojiProvider = getEmojiProvider();
-  var onShowMediaPicker = function onShowMediaPicker(targetRef) {
+  var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
     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(targetRef));
+      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(mountInfo));
     } else {
       mediaState.showMediaPicker();
     }

package/dist/esm/ui/ToolbarInsertBlock/create-items.js

@@ -209,12 +209,18 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
       disabled: false
     }));
   }
-  var numButtonsWithoutTableSelector = numberOfButtons;
-  if (!fg('platform_editor_toolbar_responsive_fixes')) {
-    numButtonsWithoutTableSelector = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
-  }
-  var buttonItems = items.slice(0, numButtonsWithoutTableSelector).map(buttonToItem);
-  var remainingItems = items.slice(numButtonsWithoutTableSelector).filter(function (_ref) {
+  var numButtonsAdjusted = numberOfButtons;
+  if (fg('platform_editor_toolbar_responsive_fixes')) {
+    if (items.slice(0, numButtonsAdjusted).some(function (item) {
+      return item.value.name === 'table selector';
+    })) {
+      numButtonsAdjusted++;
+    }
+  } else {
+    numButtonsAdjusted = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
+  }
+  var buttonItems = items.slice(0, numButtonsAdjusted).map(buttonToItem);
+  var remainingItems = items.slice(numButtonsAdjusted).filter(function (_ref) {
     var name = _ref.value.name;
     return name !== 'table selector';
   });

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

@@ -66,10 +66,10 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
   function ToolbarInsertBlock() {
     var _this;
     _classCallCheck(this, ToolbarInsertBlock);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call.apply(_super, [this].concat(_args));
     _defineProperty(_assertThisInitialized(_this), "tableButtonRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "tableSelectorButtonRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "unregisterToggleDropdownMenuOptions", null);
@@ -363,7 +363,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         onShowMediaPicker = _this$props5.onShowMediaPicker,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
-        onShowMediaPicker(_this.mediaButtonRef);
+        var _this$props$popupsMou;
+        var args = _this.mediaButtonRef ? {
+          ref: _this.mediaButtonRef,
+          mountPoint: (_this$props$popupsMou = _this.props.popupsMountPoint) !== null && _this$props$popupsMou !== void 0 ? _this$props$popupsMou : _this.mediaButtonRef
+        } : undefined;
+        onShowMediaPicker(args);
         if (dispatchAnalyticsEvent) {
           dispatchAnalyticsEvent({
             action: ACTION.OPENED,

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

@@ -42,7 +42,10 @@ export interface Props {
     insertMenuItems?: MenuItem[];
     showElementBrowserLink?: boolean;
     showSeparator?: boolean;
-    onShowMediaPicker?: (ref?: HTMLElement) => void;
+    onShowMediaPicker?: (mountInfo?: {
+        ref: HTMLElement;
+        mountPoint: 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/types.d.ts

@@ -42,7 +42,10 @@ export interface Props {
     insertMenuItems?: MenuItem[];
     showElementBrowserLink?: boolean;
     showSeparator?: boolean;
-    onShowMediaPicker?: (ref?: HTMLElement) => void;
+    onShowMediaPicker?: (mountInfo?: {
+        ref: HTMLElement;
+        mountPoint: 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.6",
+	"version": "2.2.8",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.2.0",
-		"@atlaskit/editor-common": "^92.0.0",
+		"@atlaskit/editor-common": "^92.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-block-type": "^3.15.0",
 		"@atlaskit/editor-plugin-code-block": "^3.4.0",
@@ -65,7 +65,7 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.1.0",
+		"@atlaskit/tmp-editor-statsig": "^2.2.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "18.7.3",
 		"@babel/runtime": "^7.0.0",