@atlaskit/editor-core 187.40.2 → 187.41.1

package/dist/es2019/editor-next/hooks/useEditorMeasuresConstructor.js

@@ -22,8 +22,8 @@ export default function useEditorConstructor(performanceTracking, featureFlags,
     startMeasure(measurements.EDITOR_MOUNTED);
     if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled || featureFlags !== null && featureFlags !== void 0 && featureFlags.ufo) {
       var _performanceTracking$2, _performanceTracking$3;
-      measureTTI((tti, ttiFromInvocation, canceled) => {
-        editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
+      measureTTI((tti, ttiFromInvocation, canceled, distortedDuration) => {
+        editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
       }, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$2 = performanceTracking.ttiTracking) === null || _performanceTracking$2 === void 0 ? void 0 : _performanceTracking$2.ttiIdleThreshold, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$3 = performanceTracking.ttiTracking) === null || _performanceTracking$3 === void 0 ? void 0 : _performanceTracking$3.ttiCancelTimeout);
     }
   });

package/dist/es2019/editor-next/utils/editorMeasureTTICallback.js

@@ -1,7 +1,7 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { EditorExperience } from '@atlaskit/editor-common/ufo';
 import { getTTISeverity } from '@atlaskit/editor-common/utils';
-export default function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
+export default function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
   var _performanceTracking$;
   if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled && createAnalyticsEvent) {
     var _ttiTracking;
@@ -12,7 +12,8 @@ export default function editorMeasureTTICallback(tti, ttiFromInvocation, cancele
         attributes: {
           tti,
           ttiFromInvocation,
-          canceled
+          canceled,
+          distortedDuration
         },
         eventType: EVENT_TYPE.OPERATIONAL
       }

package/dist/es2019/element-browser.js

@@ -1 +1 @@
-export { default as ElementBrowser } from './ui/ElementBrowser';
+export { ElementBrowser } from '@atlaskit/editor-common/element-browser';

package/dist/es2019/plugins/media/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { PluginKey, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { media, mediaGroup, mediaInline, mediaSingleSpec } from '@atlaskit/adf-schema';
@@ -16,14 +17,31 @@ import { ReactMediaSingleNode } from './nodeviews/mediaSingle';
 import { floatingToolbar } from './toolbar';
 import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { IconImages } from '@atlaskit/editor-common/quick-insert';
-import WithPluginState from '../../ui/WithPluginState';
 import { MediaPickerComponents } from './ui/MediaPicker';
-import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
 import { ReactMediaInlineNode } from './nodeviews/mediaInline';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { stateKey } from './pm-plugins/plugin-key';
 export { insertMediaSingleNode } from './utils/media-single';
+const MediaPickerFunctionalComponent = ({
+  api,
+  editorDomElement,
+  appearance
+}) => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MediaPickerComponents, {
+    editorDomElement: editorDomElement,
+    mediaState: mediaState,
+    appearance: appearance,
+    api: api
+  });
+};
 const mediaPlugin = ({
   config: options = {},
   api
@@ -99,6 +117,7 @@ const mediaPlugin = ({
               mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
               media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              // @ts-expect-error
               mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api)
             },
             errorReporter,
@@ -193,20 +212,11 @@ const mediaPlugin = ({
       editorView,
       appearance
     }) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WithPluginState, {
-        editorView: editorView,
-        plugins: {
-          mediaState: pluginKey
-        },
-        render: ({
-          mediaState
-        }) => /*#__PURE__*/React.createElement(MediaPickerComponents, {
-          editorDomElement: editorView.dom,
-          mediaState: mediaState,
-          appearance: appearance,
-          api: api
-        })
-      }));
+      return /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
+        editorDomElement: editorView.dom,
+        appearance: appearance,
+        api: api
+      });
     },
     secondaryToolbarComponent({
       editorView,
@@ -214,11 +224,9 @@ const mediaPlugin = ({
       disabled
     }) {
       return /*#__PURE__*/React.createElement(ToolbarMedia, {
-        editorView: editorView,
-        eventDispatcher: eventDispatcher,
-        pluginKey: pluginKey,
         isDisabled: disabled,
-        isReducedSpacing: true
+        isReducedSpacing: true,
+        api: api
       });
     },
     pluginsOptions: {

package/dist/es2019/plugins/media/nodeviews/mediaInline.js

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
-import WithPluginState from '../../../ui/WithPluginState';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaInlineNodeSelector } from './styles';
-import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 export const createMediaNodeUpdater = props => {
@@ -111,6 +110,33 @@ export const MediaInline = props => {
     mediaClientConfig: viewMediaClientConfig
   });
 };
+const MediaInlineSharedState = ({
+  identifier,
+  mediaProvider,
+  node,
+  isSelected,
+  getPos,
+  contextIdentifierProvider,
+  api,
+  view
+}) => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MediaInline, {
+    identifier: identifier,
+    mediaProvider: mediaProvider,
+    mediaPluginState: mediaState,
+    node: node,
+    isSelected: isSelected,
+    view: view,
+    getPos: getPos,
+    contextIdentifierProvider: contextIdentifierProvider
+  });
+};
 export class MediaInlineNodeView extends SelectionBasedNodeView {
   createDomRef() {
     const domRef = document.createElement('span');
@@ -135,8 +161,12 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
   }
   render(props) {
     const {
-      providerFactory
+      providerFactory,
+      api
     } = props;
+    const {
+      view
+    } = this;
     const getPos = this.getPos;
     return /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
@@ -148,36 +178,24 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
         if (!mediaProvider) {
           return null;
         }
-        return /*#__PURE__*/React.createElement(WithPluginState, {
-          editorView: this.view,
-          plugins: {
-            mediaPluginState: mediaStateKey
-          },
-          render: ({
-            mediaPluginState
-          }) => {
-            if (!mediaPluginState) {
-              return null;
-            }
-            return /*#__PURE__*/React.createElement(MediaInline, {
-              identifier: this.node.attrs.id,
-              mediaProvider: mediaProvider,
-              mediaPluginState: mediaPluginState,
-              node: this.node,
-              isSelected: this.nodeInsideSelection(),
-              view: this.view,
-              getPos: getPos,
-              contextIdentifierProvider: contextIdentifierProvider
-            });
-          }
+        return /*#__PURE__*/React.createElement(MediaInlineSharedState, {
+          identifier: this.node.attrs.id,
+          mediaProvider: mediaProvider,
+          node: this.node,
+          isSelected: this.nodeInsideSelection(),
+          view: view,
+          getPos: getPos,
+          contextIdentifierProvider: contextIdentifierProvider,
+          api: api
         });
       }
     });
   }
 }
-export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent) => (node, view, getPos) => {
+export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) => (node, view, getPos) => {
   return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
     providerFactory,
-    dispatchAnalyticsEvent
+    dispatchAnalyticsEvent,
+    api
   }).init();
 };

package/dist/es2019/plugins/media/ui/ToolbarMedia/index.js

@@ -1,45 +1,37 @@
 import React from 'react';
 import AttachmentIcon from '@atlaskit/icon/glyph/editor/attachment';
-import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
-import WithPluginState from '../../../../ui/WithPluginState';
+import { ToolbarButton, TOOLBAR_BUTTON } from '@atlaskit/editor-common/ui-menu';
 import { toolbarMediaMessages } from './toolbar-media-messages';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { injectIntl } from 'react-intl-next';
 const onClickMediaButton = pluginState => () => {
   pluginState.showMediaPicker();
   return true;
 };
 const ToolbarMedia = ({
-  editorView,
-  eventDispatcher,
-  pluginKey,
   isDisabled,
   isReducedSpacing,
-  intl
-}) => /*#__PURE__*/React.createElement(WithPluginState, {
-  editorView: editorView,
-  eventDispatcher: eventDispatcher,
-  plugins: {
-    mediaPlugin: pluginKey
-  },
-  render: ({
-    mediaPlugin
-  }) => {
-    if (!(mediaPlugin !== null && mediaPlugin !== void 0 && mediaPlugin.allowsUploads)) {
-      return null;
-    }
-    const {
-      toolbarMediaTitle
-    } = toolbarMediaMessages;
-    return /*#__PURE__*/React.createElement(ToolbarButton, {
-      buttonId: TOOLBAR_BUTTON.MEDIA,
-      onClick: onClickMediaButton(mediaPlugin),
-      disabled: isDisabled,
-      title: intl.formatMessage(toolbarMediaTitle),
-      spacing: isReducedSpacing ? 'none' : 'default',
-      iconBefore: /*#__PURE__*/React.createElement(AttachmentIcon, {
-        label: intl.formatMessage(toolbarMediaTitle)
-      })
-    });
+  intl,
+  api
+}) => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+  if (!(mediaState !== null && mediaState !== void 0 && mediaState.allowsUploads)) {
+    return null;
   }
-});
+  const {
+    toolbarMediaTitle
+  } = toolbarMediaMessages;
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.MEDIA,
+    onClick: onClickMediaButton(mediaState),
+    disabled: isDisabled,
+    title: intl.formatMessage(toolbarMediaTitle),
+    spacing: isReducedSpacing ? 'none' : 'default',
+    iconBefore: /*#__PURE__*/React.createElement(AttachmentIcon, {
+      label: intl.formatMessage(toolbarMediaTitle)
+    })
+  });
+};
 export default injectIntl(ToolbarMedia);

package/dist/es2019/plugins/quick-insert/index.js

@@ -48,7 +48,8 @@ const quickInsertPlugin = ({
     if (options !== null && options !== void 0 && options.enableElementBrowser) {
       return /*#__PURE__*/React.createElement(ModalElementBrowser, {
         editorView: editorView,
-        helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl
+        helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
+        pluginInjectionAPI: api
       });
     }
     return null;
@@ -64,7 +65,8 @@ const quickInsertPlugin = ({
     return {
       lazyDefaultItems: quickInsertState.lazyDefaultItems,
       emptyStateHandler: quickInsertState.emptyStateHandler,
-      providedItems: quickInsertState.providedItems
+      providedItems: quickInsertState.providedItems,
+      isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
     };
   },
   actions: {

package/dist/es2019/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/ModalElementBrowser.js

@@ -8,23 +8,23 @@ import { borderRadius } from '@atlaskit/theme/constants';
 import Button from '@atlaskit/button/custom-theme-button';
 import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
-import ElementBrowser from './components/ElementBrowserLoader';
+import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
 import { getCategories } from './categories';
-import { MODAL_WRAPPER_PADDING } from './constants';
 import { messages } from './messages';
+export const MODAL_WRAPPER_PADDING = 16;
 const actions = css`
   display: inline-flex;
   margin: 0 -4px;
 `;
 const actionItem = css`
   flex: 1 0 auto;
-  margin: 0 4px;
+  margin: 0 ${"var(--ds-space-050, 4px)"};
 `;
 const wrapper = css`
   display: flex;
   flex: 1 1 auto;
   box-sizing: border-box;
-  padding: ${MODAL_WRAPPER_PADDING}px ${MODAL_WRAPPER_PADDING}px 0 10px;
+  padding: ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0 10px;
   overflow: hidden;
   background-color: ${themed({
   light: `var(--ds-surface-overlay, ${N0})`,
@@ -34,7 +34,7 @@ const wrapper = css`
 `;
 const modalFooter = css`
   display: flex;
-  padding: ${MODAL_WRAPPER_PADDING}px;
+  padding: ${"var(--ds-space-200, 16px)"};
 
   position: relative;
   align-items: center;

package/dist/es2019/plugins/quick-insert/ui/ModalElementBrowser/index.js

@@ -1,9 +1,8 @@
 import React, { useCallback } from 'react';
-import WithPluginState from '../../../../ui/WithPluginState';
-import { pluginKey } from '../../plugin-key';
-import ModalElementBrowser from '../../../../ui/ElementBrowser/ModalElementBrowser';
+import ModalElementBrowser from './ModalElementBrowser';
 import { closeElementBrowserModal, insertItem } from '../../commands';
 import { getQuickInsertSuggestions } from '../../search';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 const Modal = ({
   quickInsertState,
   editorView,
@@ -38,19 +37,15 @@ const Modal = ({
 };
 export default (({
   editorView,
-  helpUrl
+  helpUrl,
+  pluginInjectionAPI
 }) => {
-  const render = useCallback(({
+  const {
     quickInsertState
-  }) => /*#__PURE__*/React.createElement(Modal, {
-    quickInsertState: quickInsertState,
+  } = useSharedPluginState(pluginInjectionAPI, ['quickInsert']);
+  return /*#__PURE__*/React.createElement(Modal, {
+    quickInsertState: quickInsertState !== null && quickInsertState !== void 0 ? quickInsertState : undefined,
     editorView: editorView,
     helpUrl: helpUrl
-  }), [editorView, helpUrl]);
-  return /*#__PURE__*/React.createElement(WithPluginState, {
-    plugins: {
-      quickInsertState: pluginKey
-    },
-    render: render
   });
 });

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -9,9 +9,8 @@ import { borderRadius } from '@atlaskit/theme';
 import { themed } from '@atlaskit/theme/components';
 import { DN50, N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
-import withOuterListeners from '../with-outer-listeners';
-import ElementBrowser from './components/ElementBrowserLoader';
-import { ELEMENT_ITEM_HEIGHT } from './constants';
+import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { ElementBrowser, ELEMENT_ITEM_HEIGHT } from '@atlaskit/editor-common/element-browser';
 const InsertMenu = ({
   editorView,
   dropdownItems,

package/dist/es2019/ui/ElementBrowser/types.js

@@ -1,5 +1 @@
-export let Modes = /*#__PURE__*/function (Modes) {
-  Modes["full"] = "full";
-  Modes["inline"] = "inline";
-  return Modes;
-}({});
+export {};

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.40.2";
+export const version = "187.41.1";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/editor-next/hooks/useEditorMeasuresConstructor.js

@@ -22,8 +22,8 @@ export default function useEditorConstructor(performanceTracking, featureFlags,
     startMeasure(measurements.EDITOR_MOUNTED);
     if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled || featureFlags !== null && featureFlags !== void 0 && featureFlags.ufo) {
       var _performanceTracking$2, _performanceTracking$3;
-      measureTTI(function (tti, ttiFromInvocation, canceled) {
-        editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
+      measureTTI(function (tti, ttiFromInvocation, canceled, distortedDuration) {
+        editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
       }, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$2 = performanceTracking.ttiTracking) === null || _performanceTracking$2 === void 0 ? void 0 : _performanceTracking$2.ttiIdleThreshold, performanceTracking === null || performanceTracking === void 0 ? void 0 : (_performanceTracking$3 = performanceTracking.ttiTracking) === null || _performanceTracking$3 === void 0 ? void 0 : _performanceTracking$3.ttiCancelTimeout);
     }
   });

package/dist/esm/editor-next/utils/editorMeasureTTICallback.js

@@ -1,7 +1,7 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { EditorExperience } from '@atlaskit/editor-common/ufo';
 import { getTTISeverity } from '@atlaskit/editor-common/utils';
-export default function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
+export default function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, distortedDuration, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
   var _performanceTracking$;
   if (performanceTracking !== null && performanceTracking !== void 0 && (_performanceTracking$ = performanceTracking.ttiTracking) !== null && _performanceTracking$ !== void 0 && _performanceTracking$.enabled && createAnalyticsEvent) {
     var _ttiTracking;
@@ -12,7 +12,8 @@ export default function editorMeasureTTICallback(tti, ttiFromInvocation, cancele
         attributes: {
           tti: tti,
           ttiFromInvocation: ttiFromInvocation,
-          canceled: canceled
+          canceled: canceled,
+          distortedDuration: distortedDuration
         },
         eventType: EVENT_TYPE.OPERATIONAL
       }

package/dist/esm/element-browser.js

@@ -1 +1 @@
-export { default as ElementBrowser } from './ui/ElementBrowser';
+export { ElementBrowser } from '@atlaskit/editor-common/element-browser';

package/dist/esm/plugins/media/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { PluginKey, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { media, mediaGroup, mediaInline, mediaSingleSpec } from '@atlaskit/adf-schema';
@@ -16,19 +17,34 @@ import { ReactMediaSingleNode } from './nodeviews/mediaSingle';
 import { floatingToolbar as _floatingToolbar } from './toolbar';
 import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { IconImages } from '@atlaskit/editor-common/quick-insert';
-import WithPluginState from '../../ui/WithPluginState';
 import { MediaPickerComponents } from './ui/MediaPicker';
-import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
 import { ReactMediaInlineNode } from './nodeviews/mediaInline';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { stateKey } from './pm-plugins/plugin-key';
 export { insertMediaSingleNode } from './utils/media-single';
-var mediaPlugin = function mediaPlugin(_ref) {
+var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
+  var api = _ref.api,
+    editorDomElement = _ref.editorDomElement,
+    appearance = _ref.appearance;
+  var _useSharedPluginState = useSharedPluginState(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MediaPickerComponents, {
+    editorDomElement: editorDomElement,
+    mediaState: mediaState,
+    appearance: appearance,
+    api: api
+  });
+};
+var mediaPlugin = function mediaPlugin(_ref2) {
   var _api$featureFlags;
-  var _ref$config = _ref.config,
-    options = _ref$config === void 0 ? {} : _ref$config,
-    api = _ref.api;
+  var _ref2$config = _ref2.config,
+    options = _ref2$config === void 0 ? {} : _ref2$config,
+    api = _ref2.api;
   var featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
   return {
     name: 'media',
@@ -39,12 +55,12 @@ var mediaPlugin = function mediaPlugin(_ref) {
       return stateKey.getState(editorState) || null;
     },
     nodes: function nodes() {
-      var _ref2 = options || {},
-        _ref2$allowMediaGroup = _ref2.allowMediaGroup,
-        allowMediaGroup = _ref2$allowMediaGroup === void 0 ? true : _ref2$allowMediaGroup,
-        _ref2$allowMediaSingl = _ref2.allowMediaSingle,
-        allowMediaSingle = _ref2$allowMediaSingl === void 0 ? false : _ref2$allowMediaSingl,
-        mediaFeatureFlags = _ref2.featureFlags;
+      var _ref3 = options || {},
+        _ref3$allowMediaGroup = _ref3.allowMediaGroup,
+        allowMediaGroup = _ref3$allowMediaGroup === void 0 ? true : _ref3$allowMediaGroup,
+        _ref3$allowMediaSingl = _ref3.allowMediaSingle,
+        allowMediaSingle = _ref3$allowMediaSingl === void 0 ? false : _ref3$allowMediaSingl,
+        mediaFeatureFlags = _ref3.featureFlags;
       var captions = getMediaFeatureFlag('captions', mediaFeatureFlags);
       var allowMediaInline = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
       var mediaSingleOption = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
@@ -83,22 +99,23 @@ var mediaPlugin = function mediaPlugin(_ref) {
     pmPlugins: function pmPlugins() {
       var pmPlugins = [{
         name: 'media',
-        plugin: function plugin(_ref3) {
-          var schema = _ref3.schema,
-            dispatch = _ref3.dispatch,
-            getIntl = _ref3.getIntl,
-            eventDispatcher = _ref3.eventDispatcher,
-            providerFactory = _ref3.providerFactory,
-            errorReporter = _ref3.errorReporter,
-            portalProviderAPI = _ref3.portalProviderAPI,
-            reactContext = _ref3.reactContext,
-            dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref4) {
+          var schema = _ref4.schema,
+            dispatch = _ref4.dispatch,
+            getIntl = _ref4.getIntl,
+            eventDispatcher = _ref4.eventDispatcher,
+            providerFactory = _ref4.providerFactory,
+            errorReporter = _ref4.errorReporter,
+            portalProviderAPI = _ref4.portalProviderAPI,
+            reactContext = _ref4.reactContext,
+            dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
           return createPlugin(schema, {
             providerFactory: providerFactory,
             nodeViews: {
               mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
               media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              // @ts-expect-error
               mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api)
             },
             errorReporter: errorReporter,
@@ -119,8 +136,8 @@ var mediaPlugin = function mediaPlugin(_ref) {
       if (options && options.allowMediaSingle) {
         pmPlugins.push({
           name: 'mediaSingleKeymap',
-          plugin: function plugin(_ref4) {
-            var schema = _ref4.schema;
+          plugin: function plugin(_ref5) {
+            var schema = _ref5.schema;
             return keymapMediaSinglePlugin(schema);
           }
         });
@@ -132,9 +149,9 @@ var mediaPlugin = function mediaPlugin(_ref) {
         });
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
-          plugin: function plugin(_ref5) {
+          plugin: function plugin(_ref6) {
             var _api$analytics2;
-            var schema = _ref5.schema;
+            var schema = _ref6.schema;
             return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
           }
         });
@@ -142,15 +159,15 @@ var mediaPlugin = function mediaPlugin(_ref) {
       if (options && options.allowLinking) {
         pmPlugins.push({
           name: 'mediaLinking',
-          plugin: function plugin(_ref6) {
-            var dispatch = _ref6.dispatch;
+          plugin: function plugin(_ref7) {
+            var dispatch = _ref7.dispatch;
             return linkingPlugin(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref7) {
-            var schema = _ref7.schema;
+          plugin: function plugin(_ref8) {
+            var schema = _ref8.schema;
             return keymapLinkingPlugin(schema);
           }
         });
@@ -186,35 +203,23 @@ var mediaPlugin = function mediaPlugin(_ref) {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref8) {
-      var editorView = _ref8.editorView,
-        appearance = _ref8.appearance;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WithPluginState, {
-        editorView: editorView,
-        plugins: {
-          mediaState: pluginKey
-        },
-        render: function render(_ref9) {
-          var mediaState = _ref9.mediaState;
-          return /*#__PURE__*/React.createElement(MediaPickerComponents, {
-            editorDomElement: editorView.dom,
-            mediaState: mediaState,
-            appearance: appearance,
-            api: api
-          });
-        }
-      }));
+    contentComponent: function contentComponent(_ref9) {
+      var editorView = _ref9.editorView,
+        appearance = _ref9.appearance;
+      return /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
+        editorDomElement: editorView.dom,
+        appearance: appearance,
+        api: api
+      });
     },
     secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
       var editorView = _ref10.editorView,
         eventDispatcher = _ref10.eventDispatcher,
         disabled = _ref10.disabled;
       return /*#__PURE__*/React.createElement(ToolbarMedia, {
-        editorView: editorView,
-        eventDispatcher: eventDispatcher,
-        pluginKey: pluginKey,
         isDisabled: disabled,
-        isReducedSpacing: true
+        isReducedSpacing: true,
+        api: api
       });
     },
     pluginsOptions: {