@atlaskit/editor-plugin-card 7.2.0 → 7.2.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-card
 
+## 7.2.1
+
+### Patch Changes
+
+- [#185241](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185241)
+  [`0d1bffce3fedd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d1bffce3fedd) -
+  [ux] View embed as block card when page width smaller or equal to 600px
+- Updated dependencies
+
 ## 7.2.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/embedCard.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.embedCardNodeView = exports.EmbedCardComponent = exports.EmbedCard = void 0;
+exports.embedCardNodeView = exports.EmbedOrBlockCardComponent = exports.EmbedCardComponent = exports.EmbedCard = void 0;
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -20,11 +20,15 @@ var _steps = require("@atlaskit/adf-schema/steps");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _smartCard = require("@atlaskit/smart-card");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("../pm-plugins/actions");
 var _ResizableEmbedCard = _interopRequireDefault(require("../ui/ResizableEmbedCard"));
+var _blockCard = require("./blockCard");
 var _genericCard = require("./genericCard");
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 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; }
@@ -57,7 +61,6 @@ var CardInner = function CardInner(_ref) {
     getLineLength = _ref.getLineLength,
     view = _ref.view,
     smartCard = _ref.smartCard,
-    eventDispatcher = _ref.eventDispatcher,
     updateSize = _ref.updateSize,
     getPos = _ref.getPos,
     aspectRatio = _ref.aspectRatio,
@@ -372,7 +375,51 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
     }
   }]);
 }(_react.default.PureComponent);
-var WrappedBlockCard = (0, _genericCard.Card)(EmbedCardComponent, _ui.UnsupportedBlock);
+var EmbedOrBlockCardComponent = exports.EmbedOrBlockCardComponent = function EmbedOrBlockCardComponent(props) {
+  var width = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(props.pluginInjectionApi, 'width.width');
+  var viewAsBlockCard = width && width <= _editorSharedStyles.akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? /*#__PURE__*/_react.default.createElement(_blockCard.BlockCardComponent, {
+    id: props.id,
+    node: props.node,
+    view: props.view,
+    getPos: props.getPos,
+    pluginInjectionApi: props.pluginInjectionApi,
+    actionOptions: props.actionOptions,
+    onClick: props.onClick,
+    CompetitorPrompt: props.CompetitorPrompt,
+    allowResizing: props.allowResizing,
+    fullWidthMode: props.fullWidthMode,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    eventDispatcher: props.eventDispatcher,
+    cardContext: props.cardContext,
+    smartCard: props.smartCard,
+    hasPreview: props.hasPreview,
+    liveHeight: props.liveHeight,
+    initialAspectRatio: props.initialAspectRatio
+  }) : /*#__PURE__*/_react.default.createElement(EmbedCardComponent, {
+    id: props.id,
+    node: props.node,
+    view: props.view,
+    getPos: props.getPos,
+    pluginInjectionApi: props.pluginInjectionApi,
+    actionOptions: props.actionOptions,
+    onClick: props.onClick,
+    CompetitorPrompt: props.CompetitorPrompt,
+    allowResizing: props.allowResizing,
+    fullWidthMode: props.fullWidthMode,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    eventDispatcher: props.eventDispatcher,
+    cardContext: props.cardContext,
+    smartCard: props.smartCard,
+    hasPreview: props.hasPreview,
+    liveHeight: props.liveHeight,
+    initialAspectRatio: props.initialAspectRatio
+  });
+};
+var WrappedEmbedCardWithCondition = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true);
+}, EmbedOrBlockCardComponent, EmbedCardComponent);
+var WrappedEmbedCard = (0, _genericCard.Card)(WrappedEmbedCardWithCondition, _ui.UnsupportedBlock);
 var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   function EmbedCard() {
     var _this2;
@@ -423,7 +470,7 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
         onClickCallback = _this$reactComponentP3.onClickCallback,
         CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt;
-      return /*#__PURE__*/_react.default.createElement(WrappedBlockCard, {
+      return /*#__PURE__*/_react.default.createElement(WrappedEmbedCard, {
         node: this.node,
         view: this.view,
         eventDispatcher: eventDispatcher,

package/dist/cjs/ui/toolbar.js

@@ -33,6 +33,7 @@ var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/
 var _settingsEditorSettings = _interopRequireDefault(require("@atlaskit/icon/core/migration/settings--editor-settings"));
 var _settings = _interopRequireDefault(require("@atlaskit/icon/core/settings"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _doc = require("../pm-plugins/doc");
 var _pluginKey = require("../pm-plugins/plugin-key");
@@ -147,7 +148,13 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(cardOpt
         if (isEmbedCard) {
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          return element.querySelector(".".concat(_styles.richMediaClassName));
+          var richMediaElement = element.querySelector(".".concat(_styles.richMediaClassName));
+          if (!(0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+            return richMediaElement;
+          }
+          if (richMediaElement) {
+            return richMediaElement;
+          }
         }
         return element;
       },

package/dist/es2019/nodeviews/embedCard.js

@@ -7,11 +7,15 @@ import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
-import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { akEditorFullPageNarrowBreakout, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
+import { BlockCardComponent } from './blockCard';
 import { Card } from './genericCard';
 const selector = states => {
   var _states$widthState, _states$widthState2, _states$editorDisable;
@@ -40,7 +44,6 @@ const CardInner = ({
   getLineLength,
   view,
   smartCard,
-  eventDispatcher,
   updateSize,
   getPos,
   aspectRatio,
@@ -363,7 +366,49 @@ export class EmbedCardComponent extends React.PureComponent {
     }));
   }
 }
-const WrappedBlockCard = Card(EmbedCardComponent, UnsupportedBlock);
+export const EmbedOrBlockCardComponent = props => {
+  const width = useSharedPluginStateSelector(props.pluginInjectionApi, 'width.width');
+  const viewAsBlockCard = width && width <= akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? /*#__PURE__*/React.createElement(BlockCardComponent, {
+    id: props.id,
+    node: props.node,
+    view: props.view,
+    getPos: props.getPos,
+    pluginInjectionApi: props.pluginInjectionApi,
+    actionOptions: props.actionOptions,
+    onClick: props.onClick,
+    CompetitorPrompt: props.CompetitorPrompt,
+    allowResizing: props.allowResizing,
+    fullWidthMode: props.fullWidthMode,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    eventDispatcher: props.eventDispatcher,
+    cardContext: props.cardContext,
+    smartCard: props.smartCard,
+    hasPreview: props.hasPreview,
+    liveHeight: props.liveHeight,
+    initialAspectRatio: props.initialAspectRatio
+  }) : /*#__PURE__*/React.createElement(EmbedCardComponent, {
+    id: props.id,
+    node: props.node,
+    view: props.view,
+    getPos: props.getPos,
+    pluginInjectionApi: props.pluginInjectionApi,
+    actionOptions: props.actionOptions,
+    onClick: props.onClick,
+    CompetitorPrompt: props.CompetitorPrompt,
+    allowResizing: props.allowResizing,
+    fullWidthMode: props.fullWidthMode,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    eventDispatcher: props.eventDispatcher,
+    cardContext: props.cardContext,
+    smartCard: props.smartCard,
+    hasPreview: props.hasPreview,
+    liveHeight: props.liveHeight,
+    initialAspectRatio: props.initialAspectRatio
+  });
+};
+const WrappedEmbedCardWithCondition = componentWithCondition(() => expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true), EmbedOrBlockCardComponent, EmbedCardComponent);
+const WrappedEmbedCard = Card(WrappedEmbedCardWithCondition, UnsupportedBlock);
 export class EmbedCard extends ReactNodeView {
   constructor(...args) {
     super(...args);
@@ -399,7 +444,7 @@ export class EmbedCard extends ReactNodeView {
       onClickCallback,
       CompetitorPrompt
     } = this.reactComponentProps;
-    return /*#__PURE__*/React.createElement(WrappedBlockCard, {
+    return /*#__PURE__*/React.createElement(WrappedEmbedCard, {
       node: this.node,
       view: this.view,
       eventDispatcher: eventDispatcher,

package/dist/es2019/ui/toolbar.js

@@ -23,6 +23,7 @@ import OpenIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
 import CogIcon from '@atlaskit/icon/core/migration/settings--editor-settings';
 import SettingsIcon from '@atlaskit/icon/core/settings';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeSelectedCardToText } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
@@ -141,7 +142,13 @@ export const floatingToolbar = (cardOptions, lpLinkPicker, linkPickerOptions, pl
         if (isEmbedCard) {
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          return element.querySelector(`.${richMediaClassName}`);
+          const richMediaElement = element.querySelector(`.${richMediaClassName}`);
+          if (!expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+            return richMediaElement;
+          }
+          if (richMediaElement) {
+            return richMediaElement;
+          }
         }
         return element;
       },

package/dist/esm/nodeviews/embedCard.js

@@ -18,11 +18,15 @@ import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
-import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { akEditorFullPageNarrowBreakout, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { registerCard, removeCard as _removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
+import { BlockCardComponent } from './blockCard';
 import { Card } from './genericCard';
 var selector = function selector(states) {
   var _states$widthState, _states$widthState2, _states$editorDisable;
@@ -50,7 +54,6 @@ var CardInner = function CardInner(_ref) {
     getLineLength = _ref.getLineLength,
     view = _ref.view,
     smartCard = _ref.smartCard,
-    eventDispatcher = _ref.eventDispatcher,
     updateSize = _ref.updateSize,
     getPos = _ref.getPos,
     aspectRatio = _ref.aspectRatio,
@@ -365,7 +368,51 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 }(React.PureComponent);
-var WrappedBlockCard = Card(EmbedCardComponent, UnsupportedBlock);
+export var EmbedOrBlockCardComponent = function EmbedOrBlockCardComponent(props) {
+  var width = useSharedPluginStateSelector(props.pluginInjectionApi, 'width.width');
+  var viewAsBlockCard = width && width <= akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? /*#__PURE__*/React.createElement(BlockCardComponent, {
+    id: props.id,
+    node: props.node,
+    view: props.view,
+    getPos: props.getPos,
+    pluginInjectionApi: props.pluginInjectionApi,
+    actionOptions: props.actionOptions,
+    onClick: props.onClick,
+    CompetitorPrompt: props.CompetitorPrompt,
+    allowResizing: props.allowResizing,
+    fullWidthMode: props.fullWidthMode,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    eventDispatcher: props.eventDispatcher,
+    cardContext: props.cardContext,
+    smartCard: props.smartCard,
+    hasPreview: props.hasPreview,
+    liveHeight: props.liveHeight,
+    initialAspectRatio: props.initialAspectRatio
+  }) : /*#__PURE__*/React.createElement(EmbedCardComponent, {
+    id: props.id,
+    node: props.node,
+    view: props.view,
+    getPos: props.getPos,
+    pluginInjectionApi: props.pluginInjectionApi,
+    actionOptions: props.actionOptions,
+    onClick: props.onClick,
+    CompetitorPrompt: props.CompetitorPrompt,
+    allowResizing: props.allowResizing,
+    fullWidthMode: props.fullWidthMode,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    eventDispatcher: props.eventDispatcher,
+    cardContext: props.cardContext,
+    smartCard: props.smartCard,
+    hasPreview: props.hasPreview,
+    liveHeight: props.liveHeight,
+    initialAspectRatio: props.initialAspectRatio
+  });
+};
+var WrappedEmbedCardWithCondition = componentWithCondition(function () {
+  return expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true);
+}, EmbedOrBlockCardComponent, EmbedCardComponent);
+var WrappedEmbedCard = Card(WrappedEmbedCardWithCondition, UnsupportedBlock);
 export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   function EmbedCard() {
     var _this2;
@@ -416,7 +463,7 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
         onClickCallback = _this$reactComponentP3.onClickCallback,
         CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt;
-      return /*#__PURE__*/React.createElement(WrappedBlockCard, {
+      return /*#__PURE__*/React.createElement(WrappedEmbedCard, {
         node: this.node,
         view: this.view,
         eventDispatcher: eventDispatcher,

package/dist/esm/ui/toolbar.js

@@ -27,6 +27,7 @@ import OpenIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
 import CogIcon from '@atlaskit/icon/core/migration/settings--editor-settings';
 import SettingsIcon from '@atlaskit/icon/core/settings';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeSelectedCardToText } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
@@ -138,7 +139,13 @@ export var floatingToolbar = function floatingToolbar(cardOptions, lpLinkPicker,
         if (isEmbedCard) {
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          return element.querySelector(".".concat(richMediaClassName));
+          var richMediaElement = element.querySelector(".".concat(richMediaClassName));
+          if (!expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+            return richMediaElement;
+          }
+          if (richMediaElement) {
+            return richMediaElement;
+          }
         }
         return element;
       },

package/dist/types/nodeviews/embedCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
@@ -43,6 +43,7 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
     private removeCard;
     render(): React.JSX.Element;
 }
+export declare const EmbedOrBlockCardComponent: (props: ComponentProps<typeof EmbedCardComponent>) => React.JSX.Element;
 export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi' | 'actionOptions' | 'onClickCallback' | 'CompetitorPrompt'>;
 export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
     private id;

package/dist/types-ts4.5/nodeviews/embedCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
@@ -43,6 +43,7 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
     private removeCard;
     render(): React.JSX.Element;
 }
+export declare const EmbedOrBlockCardComponent: (props: ComponentProps<typeof EmbedCardComponent>) => React.JSX.Element;
 export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi' | 'actionOptions' | 'onClickCallback' | 'CompetitorPrompt'>;
 export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
     private id;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "7.2.0",
+	"version": "7.2.1",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/frontend-utilities": "^3.1.0",
-		"@atlaskit/icon": "^27.6.0",
+		"@atlaskit/icon": "^27.7.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-analytics": "^10.0.0",
 		"@atlaskit/link-client-extension": "^5.0.0",
@@ -58,10 +58,11 @@
 		"@atlaskit/linking-types": "^14.0.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/smart-card": "^40.5.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.10.0",
+		"@atlaskit/tmp-editor-statsig": "^9.12.0",
 		"@atlaskit/tokens": "^5.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -71,7 +72,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.11.0",
+		"@atlaskit/editor-common": "^107.12.0",
 		"@atlaskit/link-provider": "^3.4.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"