@atlaskit/editor-core 187.40.2 → 187.41.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
 
+## 187.41.1
+
+### Patch Changes
+
+- [`9c76ed81343`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9c76ed81343) - [ED-16733] Purge WithPluginState from media plugin
+
+## 187.41.0
+
+### Minor Changes
+
+- [`c06bb97591a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c06bb97591a) - [ED-19023] Add distorted duration to TTI event (tracking tab visibility)
+
+### Patch Changes
+
+- [`d4cbb84052d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4cbb84052d) - Move element-browser to `editor-common` to decouple quick-insert plugin.
+- Updated dependencies
+
 ## 187.40.2
 
 ### Patch Changes

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

@@ -28,8 +28,8 @@ function useEditorConstructor(performanceTracking, featureFlags, getExperienceSt
     (0, _utils.startMeasure)(_measureEnum.default.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;
-      (0, _utils.measureTTI)(function (tti, ttiFromInvocation, canceled) {
-        (0, _editorMeasureTTICallback.default)(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, getExperienceStore());
+      (0, _utils.measureTTI)(function (tti, ttiFromInvocation, canceled, distortedDuration) {
+        (0, _editorMeasureTTICallback.default)(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/cjs/editor-next/utils/editorMeasureTTICallback.js

@@ -7,7 +7,7 @@ exports.default = editorMeasureTTICallback;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _ufo = require("@atlaskit/editor-common/ufo");
 var _utils = require("@atlaskit/editor-common/utils");
-function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceTracking, featureFlags, createAnalyticsEvent, experienceStore) {
+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;
@@ -18,7 +18,8 @@ function editorMeasureTTICallback(tti, ttiFromInvocation, canceled, performanceT
         attributes: {
           tti: tti,
           ttiFromInvocation: ttiFromInvocation,
-          canceled: canceled
+          canceled: canceled,
+          distortedDuration: distortedDuration
         },
         eventType: _analytics.EVENT_TYPE.OPERATIONAL
       }

package/dist/cjs/element-browser.js

@@ -1,13 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "ElementBrowser", {
   enumerable: true,
   get: function get() {
-    return _ElementBrowser.default;
+    return _elementBrowser.ElementBrowser;
   }
 });
-var _ElementBrowser = _interopRequireDefault(require("./ui/ElementBrowser"));
+var _elementBrowser = require("@atlaskit/editor-common/element-browser");

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

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "insertMediaSingleNode", {
   }
 });
 var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -29,19 +30,34 @@ var _mediaSingle = require("./nodeviews/mediaSingle");
 var _toolbar = require("./toolbar");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
-var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
 var _MediaPicker = require("./ui/MediaPicker");
-var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
+var _messages = require("@atlaskit/editor-common/messages");
 var _mediaNodeView = require("./nodeviews/mediaNodeView");
 var _mediaInline = require("./nodeviews/mediaInline");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _mediaSingle2 = require("./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 = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_MediaPicker.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',
@@ -52,12 +68,12 @@ var mediaPlugin = function mediaPlugin(_ref) {
       return _pluginKey.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 = (0, _mediaCommon.getMediaFeatureFlag)('captions', mediaFeatureFlags);
       var allowMediaInline = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
       var mediaSingleOption = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? {
@@ -96,22 +112,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 (0, _main.createPlugin)(schema, {
             providerFactory: providerFactory,
             nodeViews: {
               mediaGroup: (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
               mediaSingle: (0, _mediaSingle.ReactMediaSingleNode)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
               media: (0, _mediaNodeView.ReactMediaNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              // @ts-expect-error
               mediaInline: (0, _mediaInline.ReactMediaInlineNode)(portalProviderAPI, eventDispatcher, providerFactory, api)
             },
             errorReporter: errorReporter,
@@ -132,8 +149,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 (0, _keymapMediaSingle.default)(schema);
           }
         });
@@ -145,9 +162,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 (0, _keymap.default)(schema, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
           }
         });
@@ -155,15 +172,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 (0, _linking.default)(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref7) {
-            var schema = _ref7.schema;
+          plugin: function plugin(_ref8) {
+            var schema = _ref8.schema;
             return (0, _keymap2.default)(schema);
           }
         });
@@ -199,35 +216,23 @@ var mediaPlugin = function mediaPlugin(_ref) {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref8) {
-      var editorView = _ref8.editorView,
-        appearance = _ref8.appearance;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-        editorView: editorView,
-        plugins: {
-          mediaState: _main.stateKey
-        },
-        render: function render(_ref9) {
-          var mediaState = _ref9.mediaState;
-          return /*#__PURE__*/_react.default.createElement(_MediaPicker.MediaPickerComponents, {
-            editorDomElement: editorView.dom,
-            mediaState: mediaState,
-            appearance: appearance,
-            api: api
-          });
-        }
-      }));
+    contentComponent: function contentComponent(_ref9) {
+      var editorView = _ref9.editorView,
+        appearance = _ref9.appearance;
+      return /*#__PURE__*/_react.default.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.default.createElement(_ToolbarMedia.default, {
-        editorView: editorView,
-        eventDispatcher: eventDispatcher,
-        pluginKey: _main.stateKey,
         isDisabled: disabled,
-        isReducedSpacing: true
+        isReducedSpacing: true,
+        api: api
       });
     },
     pluginsOptions: {
@@ -235,8 +240,8 @@ var mediaPlugin = function mediaPlugin(_ref) {
         var formatMessage = _ref11.formatMessage;
         return [{
           id: 'media',
-          title: formatMessage(_messages.messages.mediaFiles),
-          description: formatMessage(_messages.messages.mediaFilesDescription),
+          title: formatMessage(_messages.toolbarInsertBlockMessages.mediaFiles),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.mediaFilesDescription),
           priority: 400,
           keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
           icon: function icon() {

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

@@ -18,11 +18,10 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
-var _WithPluginState = _interopRequireDefault(require("../../../ui/WithPluginState"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaCard = require("@atlaskit/media-card");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _styles = require("./styles");
-var _pluginKey = require("../pm-plugins/plugin-key");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 var _mediaUi = require("@atlaskit/media-ui");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -188,6 +187,31 @@ var MediaInline = function MediaInline(props) {
   });
 };
 exports.MediaInline = MediaInline;
+var MediaInlineSharedState = function MediaInlineSharedState(_ref3) {
+  var identifier = _ref3.identifier,
+    mediaProvider = _ref3.mediaProvider,
+    node = _ref3.node,
+    isSelected = _ref3.isSelected,
+    getPos = _ref3.getPos,
+    contextIdentifierProvider = _ref3.contextIdentifierProvider,
+    api = _ref3.api,
+    view = _ref3.view;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(MediaInline, {
+    identifier: identifier,
+    mediaProvider: mediaProvider,
+    mediaPluginState: mediaState,
+    node: node,
+    isSelected: isSelected,
+    view: view,
+    getPos: getPos,
+    contextIdentifierProvider: contextIdentifierProvider
+  });
+};
 var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   (0, _inherits2.default)(MediaInlineNodeView, _SelectionBasedNodeVi);
   var _super = _createSuper(MediaInlineNodeView);
@@ -228,38 +252,28 @@ var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     key: "render",
     value: function render(props) {
       var _this = this;
-      var providerFactory = props.providerFactory;
+      var providerFactory = props.providerFactory,
+        api = props.api;
+      var view = this.view;
       var getPos = this.getPos;
       return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref3) {
-          var mediaProvider = _ref3.mediaProvider,
-            contextIdentifierProvider = _ref3.contextIdentifierProvider;
+        renderNode: function renderNode(_ref4) {
+          var mediaProvider = _ref4.mediaProvider,
+            contextIdentifierProvider = _ref4.contextIdentifierProvider;
           if (!mediaProvider) {
             return null;
           }
-          return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-            editorView: _this.view,
-            plugins: {
-              mediaPluginState: _pluginKey.stateKey
-            },
-            render: function render(_ref4) {
-              var mediaPluginState = _ref4.mediaPluginState;
-              if (!mediaPluginState) {
-                return null;
-              }
-              return /*#__PURE__*/_react.default.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.default.createElement(MediaInlineSharedState, {
+            identifier: _this.node.attrs.id,
+            mediaProvider: mediaProvider,
+            node: _this.node,
+            isSelected: _this.nodeInsideSelection(),
+            view: view,
+            getPos: getPos,
+            contextIdentifierProvider: contextIdentifierProvider,
+            api: api
           });
         }
       });
@@ -268,11 +282,12 @@ var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   return MediaInlineNodeView;
 }(_selectionBasedNodeView.SelectionBasedNodeView);
 exports.MediaInlineNodeView = MediaInlineNodeView;
-var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, pluginInjectionApi, dispatchAnalyticsEvent) {
+var ReactMediaInlineNode = function ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) {
   return function (node, view, getPos) {
     return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory: providerFactory,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      api: api
     }).init();
   };
 };

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

@@ -1,19 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _attachment = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/attachment"));
-var _ToolbarButton = _interopRequireWildcard(require("../../../../ui/ToolbarButton"));
-var _WithPluginState = _interopRequireDefault(require("../../../../ui/WithPluginState"));
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _toolbarMediaMessages = require("./toolbar-media-messages");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _reactIntlNext = require("react-intl-next");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var onClickMediaButton = function onClickMediaButton(pluginState) {
   return function () {
     pluginState.showMediaPicker();
@@ -21,35 +18,25 @@ var onClickMediaButton = function onClickMediaButton(pluginState) {
   };
 };
 var ToolbarMedia = function ToolbarMedia(_ref) {
-  var editorView = _ref.editorView,
-    eventDispatcher = _ref.eventDispatcher,
-    pluginKey = _ref.pluginKey,
-    isDisabled = _ref.isDisabled,
+  var isDisabled = _ref.isDisabled,
     isReducedSpacing = _ref.isReducedSpacing,
-    intl = _ref.intl;
-  return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-    editorView: editorView,
-    eventDispatcher: eventDispatcher,
-    plugins: {
-      mediaPlugin: pluginKey
-    },
-    render: function render(_ref2) {
-      var mediaPlugin = _ref2.mediaPlugin;
-      if (!(mediaPlugin !== null && mediaPlugin !== void 0 && mediaPlugin.allowsUploads)) {
-        return null;
-      }
-      var toolbarMediaTitle = _toolbarMediaMessages.toolbarMediaMessages.toolbarMediaTitle;
-      return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
-        buttonId: _ToolbarButton.TOOLBAR_BUTTON.MEDIA,
-        onClick: onClickMediaButton(mediaPlugin),
-        disabled: isDisabled,
-        title: intl.formatMessage(toolbarMediaTitle),
-        spacing: isReducedSpacing ? 'none' : 'default',
-        iconBefore: /*#__PURE__*/_react.default.createElement(_attachment.default, {
-          label: intl.formatMessage(toolbarMediaTitle)
-        })
-      });
-    }
+    intl = _ref.intl,
+    api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  if (!(mediaState !== null && mediaState !== void 0 && mediaState.allowsUploads)) {
+    return null;
+  }
+  var toolbarMediaTitle = _toolbarMediaMessages.toolbarMediaMessages.toolbarMediaTitle;
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
+    buttonId: _uiMenu.TOOLBAR_BUTTON.MEDIA,
+    onClick: onClickMediaButton(mediaState),
+    disabled: isDisabled,
+    title: intl.formatMessage(toolbarMediaTitle),
+    spacing: isReducedSpacing ? 'none' : 'default',
+    iconBefore: /*#__PURE__*/_react.default.createElement(_attachment.default, {
+      label: intl.formatMessage(toolbarMediaTitle)
+    })
   });
 };
 var _default = (0, _reactIntlNext.injectIntl)(ToolbarMedia);

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

@@ -59,7 +59,8 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
       if (options !== null && options !== void 0 && options.enableElementBrowser) {
         return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
           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;
@@ -75,7 +76,8 @@ var quickInsertPlugin = function quickInsertPlugin(_ref) {
       return {
         lazyDefaultItems: quickInsertState.lazyDefaultItems,
         emptyStateHandler: quickInsertState.emptyStateHandler,
-        providedItems: quickInsertState.providedItems
+        providedItems: quickInsertState.providedItems,
+        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
       };
     },
     actions: {

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.MODAL_WRAPPER_PADDING = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
@@ -17,21 +17,22 @@ var _constants = require("@atlaskit/theme/constants");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
-var _ElementBrowserLoader = _interopRequireDefault(require("./components/ElementBrowserLoader"));
+var _elementBrowser = require("@atlaskit/editor-common/element-browser");
 var _categories = require("./categories");
-var _constants2 = require("./constants");
 var _messages = require("./messages");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var MODAL_WRAPPER_PADDING = 16;
+exports.MODAL_WRAPPER_PADDING = MODAL_WRAPPER_PADDING;
 var actions = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  margin: 0 -4px;\n"])));
-var actionItem = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n  margin: 0 4px;\n"])));
-var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", "px ", "px 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _constants2.MODAL_WRAPPER_PADDING, _constants2.MODAL_WRAPPER_PADDING, (0, _components.themed)({
+var actionItem = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n  margin: 0 ", ";\n"])), "var(--ds-space-050, 4px)");
+var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", " ", " 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", (0, _components.themed)({
   light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
 })(), (0, _constants.borderRadius)());
-var modalFooter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), _constants2.MODAL_WRAPPER_PADDING);
+var modalFooter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", ";\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), "var(--ds-space-200, 16px)");
 var ModalElementBrowser = function ModalElementBrowser(props) {
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -65,7 +66,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
   var RenderBody = (0, _react.useCallback)(function () {
     return (0, _react2.jsx)("div", {
       css: wrapper
-    }, (0, _react2.jsx)(_ElementBrowserLoader.default, {
+    }, (0, _react2.jsx)(_elementBrowser.ElementBrowser, {
       categories: (0, _categories.getCategories)(props.intl),
       getItems: props.getItems,
       showSearch: true,

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

@@ -7,11 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _WithPluginState = _interopRequireDefault(require("../../../../ui/WithPluginState"));
-var _pluginKey = require("../../plugin-key");
-var _ModalElementBrowser = _interopRequireDefault(require("../../../../ui/ElementBrowser/ModalElementBrowser"));
+var _ModalElementBrowser = _interopRequireDefault(require("./ModalElementBrowser"));
 var _commands = require("../../commands");
 var _search = require("../../search");
+var _hooks = require("@atlaskit/editor-common/hooks");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Modal = function Modal(_ref) {
@@ -49,20 +48,14 @@ var Modal = function Modal(_ref) {
 };
 var _default = function _default(_ref2) {
   var editorView = _ref2.editorView,
-    helpUrl = _ref2.helpUrl;
-  var render = (0, _react.useCallback)(function (_ref3) {
-    var quickInsertState = _ref3.quickInsertState;
-    return /*#__PURE__*/_react.default.createElement(Modal, {
-      quickInsertState: quickInsertState,
-      editorView: editorView,
-      helpUrl: helpUrl
-    });
-  }, [editorView, helpUrl]);
-  return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-    plugins: {
-      quickInsertState: _pluginKey.pluginKey
-    },
-    render: render
+    helpUrl = _ref2.helpUrl,
+    pluginInjectionAPI = _ref2.pluginInjectionAPI;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionAPI, ['quickInsert']),
+    quickInsertState = _useSharedPluginState.quickInsertState;
+  return /*#__PURE__*/_react.default.createElement(Modal, {
+    quickInsertState: quickInsertState !== null && quickInsertState !== void 0 ? quickInsertState : undefined,
+    editorView: editorView,
+    helpUrl: helpUrl
   });
 };
 exports.default = _default;

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

@@ -15,9 +15,8 @@ var _theme = require("@atlaskit/theme");
 var _components = require("@atlaskit/theme/components");
 var _colors = require("@atlaskit/theme/colors");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
-var _withOuterListeners = _interopRequireDefault(require("../with-outer-listeners"));
-var _ElementBrowserLoader = _interopRequireDefault(require("./components/ElementBrowserLoader"));
-var _constants = require("./constants");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _elementBrowser = require("@atlaskit/editor-common/element-browser");
 var _excluded = ["children"];
 var _templateObject, _templateObject2;
 /** @jsx jsx */
@@ -103,7 +102,7 @@ var InsertMenu = function InsertMenu(_ref) {
     handleClickOutside: toggleVisiblity,
     handleEscapeKeydown: toggleVisiblity,
     closeOnTab: true
-  }, (0, _react2.jsx)(_ElementBrowserLoader.default, {
+  }, (0, _react2.jsx)(_elementBrowser.ElementBrowser, {
     mode: "inline",
     getItems: getItems,
     emptyStateHandler: emptyStateHandler,
@@ -137,7 +136,7 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref3) {
   // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
   var EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 112;
   if (itemCount > 0 && itemCount < 6) {
-    return itemCount * _constants.ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
+    return itemCount * _elementBrowser.ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
   }
   return 560; // For showing 6 Elements.
 };
@@ -158,6 +157,6 @@ var FlexWrapper = function FlexWrapper(props) {
     css: flexWrapperStyles
   }, divProps), children);
 };
-var ElementBrowserWrapper = (0, _withOuterListeners.default)(FlexWrapper);
+var ElementBrowserWrapper = (0, _uiReact.withReactEditorViewOuterListeners)(FlexWrapper);
 var _default = InsertMenu;
 exports.default = _default;

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

@@ -2,11 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.Modes = void 0;
-var Modes = /*#__PURE__*/function (Modes) {
-  Modes["full"] = "full";
-  Modes["inline"] = "inline";
-  return Modes;
-}({});
-exports.Modes = Modes;
+});

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.40.2";
+var version = "187.41.1";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');