@atlaskit/editor-plugin-insert-block 2.2.5 → 2.2.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 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
+
+- [#147410](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147410)
+  [`7300bd8281c70`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7300bd8281c70) -
+  Updated icon usage to new endpoints
+- Updated dependencies
+
 ## 2.2.5
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -336,13 +336,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/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/cjs/ui/ToolbarInsertBlock/item.js

@@ -11,7 +11,7 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _fieldText = _interopRequireDefault(require("@atlaskit/icon-lab/core/field-text"));
-var _status = _interopRequireDefault(require("@atlaskit/icon-lab/core/status"));
+var _lozenge = _interopRequireDefault(require("@atlaskit/icon-lab/core/lozenge"));
 var _angleBracketsEditorCode = _interopRequireDefault(require("@atlaskit/icon/core/migration/angle-brackets--editor-code"));
 var _calendarEditorDate = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar--editor-date"));
 var _decisionEditorDecision = _interopRequireDefault(require("@atlaskit/icon/core/migration/decision--editor-decision"));
@@ -28,7 +28,7 @@ var _showMoreHorizontalEditorMore = _interopRequireDefault(require("@atlaskit/ic
 var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
 var _task2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/task"));
 var _text = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/text"));
-var _status2 = _interopRequireDefault(require("@atlaskit/icon/glyph/status"));
+var _status = _interopRequireDefault(require("@atlaskit/icon/glyph/status"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _chevronRightChevronRightCircle = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-circle"));
 var _shallowEquals = require("./shallow-equals");
@@ -270,11 +270,11 @@ var status = exports.status = mem(function (init) {
     disabled: init.disabled,
     name: 'status',
     Icon: function Icon() {
-      return (0, _react2.jsx)(_status.default, {
+      return (0, _react2.jsx)(_lozenge.default, {
         label: "",
         color: "currentColor",
         spacing: "spacious",
-        LEGACY_fallbackIcon: _status2.default
+        LEGACY_fallbackIcon: _status.default
       });
     }
   });

package/dist/es2019/plugin.js

@@ -331,13 +331,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/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/es2019/ui/ToolbarInsertBlock/item.js

@@ -10,7 +10,7 @@ import memoizeOne from 'memoize-one';
 import { addLink, getAriaKeyshortcuts, toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import FieldTextIcon from '@atlaskit/icon-lab/core/field-text';
-import StatusIcon from '@atlaskit/icon-lab/core/status';
+import LozengeIcon from '@atlaskit/icon-lab/core/lozenge';
 import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--editor-code';
 import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
 import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
@@ -218,7 +218,7 @@ export const status = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'status',
-  Icon: () => jsx(StatusIcon, {
+  Icon: () => jsx(LozengeIcon, {
     label: "",
     color: "currentColor",
     spacing: "spacious",

package/dist/esm/plugin.js

@@ -326,13 +326,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/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/esm/ui/ToolbarInsertBlock/item.js

@@ -10,7 +10,7 @@ import memoizeOne from 'memoize-one';
 import { addLink, getAriaKeyshortcuts, toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import FieldTextIcon from '@atlaskit/icon-lab/core/field-text';
-import StatusIcon from '@atlaskit/icon-lab/core/status';
+import LozengeIcon from '@atlaskit/icon-lab/core/lozenge';
 import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--editor-code';
 import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
 import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
@@ -262,7 +262,7 @@ export var status = mem(function (init) {
     disabled: init.disabled,
     name: 'status',
     Icon: function Icon() {
-      return jsx(StatusIcon, {
+      return jsx(LozengeIcon, {
         label: "",
         color: "currentColor",
         spacing: "spacious",

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.5",
+	"version": "2.2.7",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -60,8 +60,8 @@
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/emoji": "^67.8.0",
 		"@atlaskit/heading": "2.4.6",
-		"@atlaskit/icon": "^22.19.0",
-		"@atlaskit/icon-lab": "^0.2.0",
+		"@atlaskit/icon": "^22.20.0",
+		"@atlaskit/icon-lab": "^1.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",