@atlaskit/editor-plugin-media 0.12.2 → 0.12.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-media
 
+## 0.12.4
+
+### Patch Changes
+
+- [#68372](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68372) [`17f42e77e826`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/17f42e77e826) - add allowMediaInlineImage media option to support new media inline image feature
+- Updated dependencies
+
+## 0.12.3
+
+### Patch Changes
+
+- [#70373](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70373) [`fdcf1d5c6b11`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fdcf1d5c6b11) - Fix duplicate I18N IDs for media toolbar
+
 ## 0.12.2
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -280,7 +280,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,
           altTextValidator: options && options.altTextValidator,
-          fullWidthEnabled: options && options.fullWidthEnabled
+          fullWidthEnabled: options && options.fullWidthEnabled,
+          allowMediaInlineImages: options && options.allowMediaInlineImages
         }, api);
       }
     }

package/dist/cjs/pm-plugins/main.js

@@ -22,6 +22,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -31,14 +32,13 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view2 = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _mediaCommon = require("@atlaskit/media-common");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = _interopRequireWildcard(require("../commands/helpers"));
 var helpers = _helpers;
 var _pickerFacade = _interopRequireDefault(require("../picker-facade"));
 var _DropPlaceholder = _interopRequireDefault(require("../ui/Media/DropPlaceholder"));
 var _mediaCommon2 = require("../utils/media-common");
 var _mediaFiles = require("../utils/media-files");
-var _mediaInline = require("../utils/media-inline");
+var _mediaInline2 = require("../utils/media-inline");
 var _mediaSingle2 = require("../utils/media-single");
 var _mediaTaskManager = require("./mediaTaskManager");
 var _pluginKey = require("./plugin-key");
@@ -71,7 +71,9 @@ var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine)
 var MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*#__PURE__*/function () {
   function MediaPluginStateImplementation(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, pluginInjectionApi) {
-    var _this = this;
+    var _this = this,
+      _this$mediaOptions2,
+      _this$mediaOptions3;
     (0, _classCallCheck2.default)(this, MediaPluginStateImplementation);
     (0, _defineProperty2.default)(this, "allowsUploads", false);
     (0, _defineProperty2.default)(this, "ignoreLinks", false);
@@ -202,7 +204,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
      * called when we insert a new file via the picker (connected via pickerfacade)
      */
     (0, _defineProperty2.default)(this, "insertFile", function (mediaState, onMediaStateChanged, pickerType) {
-      var _this$pluginInjection, _mediaState$collectio, _this$mediaOptions2, _this$pluginInjection2;
+      var _this$pluginInjection, _mediaState$collectio, _this$pluginInjection2;
       var state = _this.view.state;
       var editorAnalyticsAPI = (_this$pluginInjection = _this.pluginInjectionApi) === null || _this$pluginInjection === void 0 || (_this$pluginInjection = _this$pluginInjection.analytics) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.actions;
       var mediaStateWithContext = _objectSpread(_objectSpread({}, mediaState), {}, {
@@ -219,7 +221,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
           allUploadsFinished: false
         });
       }
-      switch ((0, _mediaInline.getMediaNodeInsertionType)(state, (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags, mediaStateWithContext.fileMimeType)) {
+      switch ((0, _mediaInline2.getMediaNodeInsertionType)(state, _this.mediaOptions, mediaStateWithContext.fileMimeType)) {
         case 'inline':
           (0, _mediaFiles.insertMediaInlineNode)(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.allowInlineImages, _this.getInputMethod(pickerType));
           break;
@@ -474,7 +476,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     options.providerFactory.subscribe('mediaProvider', function (_name, provider) {
       return _this.setMediaProvider(provider);
     });
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.inline-image.base-support')) {
+    if ((0, _mediaInline.mediaInlineImagesEnabled)((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags), (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.allowMediaInlineImages)) {
       this.allowInlineImages = true;
     }
     this.errorReporter = options.errorReporter || new _utils.ErrorReporter();

package/dist/cjs/toolbar/index.js

@@ -12,6 +12,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
+var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _state2 = require("@atlaskit/editor-prosemirror/state");
@@ -38,7 +39,7 @@ var _imageBorder = require("./imageBorder");
 var _layoutGroup = require("./layout-group");
 var _linking3 = require("./linking");
 var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
-var _mediaInline = require("./mediaInline");
+var _mediaInline2 = require("./mediaInline");
 var _utils2 = require("./utils");
 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; }
@@ -172,7 +173,9 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowLinking = options.allowLinking,
     allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
     allowResizingInTables = options.allowResizingInTables,
-    allowAltTextOnImages = options.allowAltTextOnImages;
+    allowAltTextOnImages = options.allowAltTextOnImages,
+    allowMediaInline = options.allowMediaInline,
+    allowMediaInlineImages = options.allowMediaInlineImages;
   var toolbarButtons = [];
   var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref.hoverDecoration;
@@ -219,7 +222,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       }
     }
     var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.inline-image.base-support') && selectedNode) {
+    if ((0, _mediaInline.mediaInlineImagesEnabled)(allowMediaInline, allowMediaInlineImages) && selectedNode) {
       var selectedLayoutIcon = (0, _utils2.getSelectedLayoutIcon)([].concat((0, _toConsumableArray2.default)(_card.alignmentIcons), (0, _toConsumableArray2.default)(_card.wrappingIcons)), selectedNode.node);
       if (selectedLayoutIcon && layoutButtons.length) {
         var _options = {
@@ -259,7 +262,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
         var _pluginInjectionApi$a4;
         var hasCaption = (0, _utils.contains)(selectedNode.node, state.schema.nodes.caption);
-        var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWanrning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+        var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
         toolbarButtons.push({
           type: 'button',
@@ -544,7 +547,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = (0, _mediaInline.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
+    items = (0, _mediaInline2.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

package/dist/cjs/utils/media-inline.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isInSupportedInlineImageParent = exports.getMediaNodeInsertionType = void 0;
+var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _mediaCommon = require("@atlaskit/media-common");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaFiles = require("../utils/media-files");
 var _mediaSingle = require("../utils/media-single");
 var _isType = require("./is-type");
@@ -15,9 +15,9 @@ var _mediaCommon2 = require("./media-common");
 var isInSupportedInlineImageParent = exports.isInSupportedInlineImageParent = function isInSupportedInlineImageParent(state) {
   return (0, _utils2.hasParentNodeOfType)([state.schema.nodes.listItem])(state.selection);
 };
-var getMediaNodeInsertionType = exports.getMediaNodeInsertionType = function getMediaNodeInsertionType(state, mediaFeatureFlags, fileMimeType) {
-  var canInsertInlineNode = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags) && !(0, _utils.isInEmptyLine)(state) && (!(0, _mediaCommon2.isInsidePotentialEmptyParagraph)(state) || isInSupportedInlineImageParent(state)) && (0, _mediaFiles.canInsertMediaInline)(state);
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.inline-image.base-support')) {
+var getMediaNodeInsertionType = exports.getMediaNodeInsertionType = function getMediaNodeInsertionType(state, mediaOptions, fileMimeType) {
+  var canInsertInlineNode = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags) && !(0, _utils.isInEmptyLine)(state) && (!(0, _mediaCommon2.isInsidePotentialEmptyParagraph)(state) || isInSupportedInlineImageParent(state)) && (0, _mediaFiles.canInsertMediaInline)(state);
+  if ((0, _mediaInline.mediaInlineImagesEnabled)((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags), mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.allowMediaInlineImages)) {
     if (canInsertInlineNode && !(0, _isType.isVideo)(fileMimeType)) {
       return 'inline';
     }

package/dist/es2019/plugin.js

@@ -273,7 +273,8 @@ export const mediaPlugin = ({
         allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
         allowAltTextOnImages: options && options.allowAltTextOnImages,
         altTextValidator: options && options.altTextValidator,
-        fullWidthEnabled: options && options.fullWidthEnabled
+        fullWidthEnabled: options && options.fullWidthEnabled,
+        allowMediaInlineImages: options && options.allowMediaInlineImages
       }, api)
     }
   };

package/dist/es2019/pm-plugins/main.js

@@ -4,6 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import { CAPTION_PLACEHOLDER_ID, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser, ErrorReporter } from '@atlaskit/editor-common/utils';
@@ -13,7 +14,6 @@ import { findDomRefAtPos, findParentNodeOfType, findSelectedNodeOfType, isNodeSe
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import * as helpers from '../commands/helpers';
 import { updateMediaNodeAttrs } from '../commands/helpers';
 import PickerFacade from '../picker-facade';
@@ -47,6 +47,7 @@ const createDropPlaceholder = (intl, allowDropLine) => {
 const MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 export class MediaPluginStateImplementation {
   constructor(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, pluginInjectionApi) {
+    var _this$mediaOptions2, _this$mediaOptions3;
     _defineProperty(this, "allowsUploads", false);
     _defineProperty(this, "ignoreLinks", false);
     _defineProperty(this, "waitForMediaUpload", true);
@@ -148,7 +149,7 @@ export class MediaPluginStateImplementation {
      * called when we insert a new file via the picker (connected via pickerfacade)
      */
     _defineProperty(this, "insertFile", (mediaState, onMediaStateChanged, pickerType) => {
-      var _this$pluginInjection, _this$pluginInjection2, _mediaState$collectio, _this$mediaOptions2, _this$pluginInjection3, _this$pluginInjection4;
+      var _this$pluginInjection, _this$pluginInjection2, _mediaState$collectio, _this$pluginInjection3, _this$pluginInjection4;
       const {
         state
       } = this.view;
@@ -168,7 +169,7 @@ export class MediaPluginStateImplementation {
           allUploadsFinished: false
         });
       }
-      switch (getMediaNodeInsertionType(state, (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags, mediaStateWithContext.fileMimeType)) {
+      switch (getMediaNodeInsertionType(state, this.mediaOptions, mediaStateWithContext.fileMimeType)) {
         case 'inline':
           insertMediaInlineNode(editorAnalyticsAPI)(this.view, mediaStateWithContext, collection, this.allowInlineImages, this.getInputMethod(pickerType));
           break;
@@ -422,7 +423,7 @@ export class MediaPluginStateImplementation {
     } = _state.schema;
     assert(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
     options.providerFactory.subscribe('mediaProvider', (_name, provider) => this.setMediaProvider(provider));
-    if (getBooleanFF('platform.editor.media.inline-image.base-support')) {
+    if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags), (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.allowMediaInlineImages)) {
       this.allowInlineImages = true;
     }
     this.errorReporter = options.errorReporter || new ErrorReporter();

package/dist/es2019/toolbar/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
+import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -161,7 +162,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     allowLinking,
     allowAdvancedToolBarOptions,
     allowResizingInTables,
-    allowAltTextOnImages
+    allowAltTextOnImages,
+    allowMediaInline,
+    allowMediaInlineImages
   } = options;
   let toolbarButtons = [];
   const {
@@ -212,7 +215,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       }
     }
     const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
-    if (getBooleanFF('platform.editor.media.inline-image.base-support') && selectedNode) {
+    if (mediaInlineImagesEnabled(allowMediaInline, allowMediaInlineImages) && selectedNode) {
       const selectedLayoutIcon = getSelectedLayoutIcon([...alignmentIcons, ...wrappingIcons], selectedNode.node);
       if (selectedLayoutIcon && layoutButtons.length) {
         const options = {
@@ -252,7 +255,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
         var _pluginInjectionApi$a4;
         const hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
-        const inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWanrning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+        const inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         const floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
         toolbarButtons.push({
           type: 'button',

package/dist/es2019/utils/media-inline.js

@@ -1,7 +1,7 @@
+import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import { isInEmptyLine } from '@atlaskit/editor-common/utils';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { canInsertMediaInline } from '../utils/media-files';
 import { isMediaSingle } from '../utils/media-single';
 import { isVideo } from './is-type';
@@ -9,9 +9,9 @@ import { isInsidePotentialEmptyParagraph } from './media-common';
 export const isInSupportedInlineImageParent = state => {
   return hasParentNodeOfType([state.schema.nodes.listItem])(state.selection);
 };
-export const getMediaNodeInsertionType = (state, mediaFeatureFlags, fileMimeType) => {
-  const canInsertInlineNode = getMediaFeatureFlag('mediaInline', mediaFeatureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInSupportedInlineImageParent(state)) && canInsertMediaInline(state);
-  if (getBooleanFF('platform.editor.media.inline-image.base-support')) {
+export const getMediaNodeInsertionType = (state, mediaOptions, fileMimeType) => {
+  const canInsertInlineNode = getMediaFeatureFlag('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInSupportedInlineImageParent(state)) && canInsertMediaInline(state);
+  if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags), mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.allowMediaInlineImages)) {
     if (canInsertInlineNode && !isVideo(fileMimeType)) {
       return 'inline';
     }

package/dist/esm/plugin.js

@@ -269,7 +269,8 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,
           altTextValidator: options && options.altTextValidator,
-          fullWidthEnabled: options && options.fullWidthEnabled
+          fullWidthEnabled: options && options.fullWidthEnabled,
+          allowMediaInlineImages: options && options.allowMediaInlineImages
         }, api);
       }
     }

package/dist/esm/pm-plugins/main.js

@@ -13,6 +13,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import { CAPTION_PLACEHOLDER_ID, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser, ErrorReporter } from '@atlaskit/editor-common/utils';
@@ -22,7 +23,6 @@ import { findDomRefAtPos, findParentNodeOfType, findSelectedNodeOfType, isNodeSe
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import * as helpers from '../commands/helpers';
 import { updateMediaNodeAttrs } from '../commands/helpers';
 import PickerFacade from '../picker-facade';
@@ -56,7 +56,9 @@ var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine)
 var MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 export var MediaPluginStateImplementation = /*#__PURE__*/function () {
   function MediaPluginStateImplementation(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, pluginInjectionApi) {
-    var _this = this;
+    var _this = this,
+      _this$mediaOptions2,
+      _this$mediaOptions3;
     _classCallCheck(this, MediaPluginStateImplementation);
     _defineProperty(this, "allowsUploads", false);
     _defineProperty(this, "ignoreLinks", false);
@@ -187,7 +189,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
      * called when we insert a new file via the picker (connected via pickerfacade)
      */
     _defineProperty(this, "insertFile", function (mediaState, onMediaStateChanged, pickerType) {
-      var _this$pluginInjection, _mediaState$collectio, _this$mediaOptions2, _this$pluginInjection2;
+      var _this$pluginInjection, _mediaState$collectio, _this$pluginInjection2;
       var state = _this.view.state;
       var editorAnalyticsAPI = (_this$pluginInjection = _this.pluginInjectionApi) === null || _this$pluginInjection === void 0 || (_this$pluginInjection = _this$pluginInjection.analytics) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.actions;
       var mediaStateWithContext = _objectSpread(_objectSpread({}, mediaState), {}, {
@@ -204,7 +206,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
           allUploadsFinished: false
         });
       }
-      switch (getMediaNodeInsertionType(state, (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags, mediaStateWithContext.fileMimeType)) {
+      switch (getMediaNodeInsertionType(state, _this.mediaOptions, mediaStateWithContext.fileMimeType)) {
         case 'inline':
           insertMediaInlineNode(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.allowInlineImages, _this.getInputMethod(pickerType));
           break;
@@ -459,7 +461,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     options.providerFactory.subscribe('mediaProvider', function (_name, provider) {
       return _this.setMediaProvider(provider);
     });
-    if (getBooleanFF('platform.editor.media.inline-image.base-support')) {
+    if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags), (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.allowMediaInlineImages)) {
       this.allowInlineImages = true;
     }
     this.errorReporter = options.errorReporter || new ErrorReporter();

package/dist/esm/toolbar/index.js

@@ -6,6 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
+import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -162,7 +163,9 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowLinking = options.allowLinking,
     allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
     allowResizingInTables = options.allowResizingInTables,
-    allowAltTextOnImages = options.allowAltTextOnImages;
+    allowAltTextOnImages = options.allowAltTextOnImages,
+    allowMediaInline = options.allowMediaInline,
+    allowMediaInlineImages = options.allowMediaInlineImages;
   var toolbarButtons = [];
   var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref.hoverDecoration;
@@ -209,7 +212,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       }
     }
     var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
-    if (getBooleanFF('platform.editor.media.inline-image.base-support') && selectedNode) {
+    if (mediaInlineImagesEnabled(allowMediaInline, allowMediaInlineImages) && selectedNode) {
       var selectedLayoutIcon = getSelectedLayoutIcon([].concat(_toConsumableArray(alignmentIcons), _toConsumableArray(wrappingIcons)), selectedNode.node);
       if (selectedLayoutIcon && layoutButtons.length) {
         var _options = {
@@ -249,7 +252,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       if (((_selectedNode$node$fi = selectedNode.node.firstChild) === null || _selectedNode$node$fi === void 0 ? void 0 : _selectedNode$node$fi.attrs.type) !== 'external') {
         var _pluginInjectionApi$a4;
         var hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
-        var inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWanrning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+        var inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         var floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
         toolbarButtons.push({
           type: 'button',

package/dist/esm/utils/media-inline.js

@@ -1,7 +1,7 @@
+import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import { isInEmptyLine } from '@atlaskit/editor-common/utils';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { canInsertMediaInline } from '../utils/media-files';
 import { isMediaSingle } from '../utils/media-single';
 import { isVideo } from './is-type';
@@ -9,9 +9,9 @@ import { isInsidePotentialEmptyParagraph } from './media-common';
 export var isInSupportedInlineImageParent = function isInSupportedInlineImageParent(state) {
   return hasParentNodeOfType([state.schema.nodes.listItem])(state.selection);
 };
-export var getMediaNodeInsertionType = function getMediaNodeInsertionType(state, mediaFeatureFlags, fileMimeType) {
-  var canInsertInlineNode = getMediaFeatureFlag('mediaInline', mediaFeatureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInSupportedInlineImageParent(state)) && canInsertMediaInline(state);
-  if (getBooleanFF('platform.editor.media.inline-image.base-support')) {
+export var getMediaNodeInsertionType = function getMediaNodeInsertionType(state, mediaOptions, fileMimeType) {
+  var canInsertInlineNode = getMediaFeatureFlag('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInSupportedInlineImageParent(state)) && canInsertMediaInline(state);
+  if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags), mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.allowMediaInlineImages)) {
     if (canInsertInlineNode && !isVideo(fileMimeType)) {
       return 'inline';
     }

package/dist/types/types.d.ts

@@ -15,6 +15,11 @@ export type MediaStateStatus = 'unknown' | 'ready' | 'cancelled' | 'preview' | '
 export type MediaSingleWithType = 'pixel' | 'percentage';
 export interface MediaOptions {
     provider?: Providers['mediaProvider'];
+    /**
+     * @experimental
+     * Still under development. Use with caution.
+     */
+    allowMediaInlineImages?: boolean;
     allowMediaSingle?: boolean | MediaSingleOptions;
     allowMediaGroup?: boolean;
     customDropzoneContainer?: HTMLElement;
@@ -97,6 +102,7 @@ export type MediaFloatingToolbarOptions = {
     providerFactory?: ProviderFactory;
     allowResizing?: boolean;
     allowMediaInline?: boolean;
+    allowMediaInlineImages?: boolean;
     allowLinking?: boolean;
     allowAdvancedToolBarOptions?: boolean;
     allowResizingInTables?: boolean;

package/dist/types/utils/media-inline.d.ts

@@ -1,5 +1,5 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { MediaOptions } from '../types';
 export type MediaNodeType = 'inline' | 'block' | 'group';
 export declare const isInSupportedInlineImageParent: (state: EditorState) => boolean;
-export declare const getMediaNodeInsertionType: (state: EditorState, mediaFeatureFlags?: MediaFeatureFlags, fileMimeType?: string) => MediaNodeType;
+export declare const getMediaNodeInsertionType: (state: EditorState, mediaOptions?: MediaOptions, fileMimeType?: string) => MediaNodeType;

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

@@ -15,6 +15,11 @@ export type MediaStateStatus = 'unknown' | 'ready' | 'cancelled' | 'preview' | '
 export type MediaSingleWithType = 'pixel' | 'percentage';
 export interface MediaOptions {
     provider?: Providers['mediaProvider'];
+    /**
+     * @experimental
+     * Still under development. Use with caution.
+     */
+    allowMediaInlineImages?: boolean;
     allowMediaSingle?: boolean | MediaSingleOptions;
     allowMediaGroup?: boolean;
     customDropzoneContainer?: HTMLElement;
@@ -97,6 +102,7 @@ export type MediaFloatingToolbarOptions = {
     providerFactory?: ProviderFactory;
     allowResizing?: boolean;
     allowMediaInline?: boolean;
+    allowMediaInlineImages?: boolean;
     allowLinking?: boolean;
     allowAdvancedToolBarOptions?: boolean;
     allowResizingInTables?: boolean;

package/dist/types-ts4.5/utils/media-inline.d.ts

@@ -1,5 +1,5 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { MediaOptions } from '../types';
 export type MediaNodeType = 'inline' | 'block' | 'group';
 export declare const isInSupportedInlineImageParent: (state: EditorState) => boolean;
-export declare const getMediaNodeInsertionType: (state: EditorState, mediaFeatureFlags?: MediaFeatureFlags, fileMimeType?: string) => MediaNodeType;
+export declare const getMediaNodeInsertionType: (state: EditorState, mediaOptions?: MediaOptions, fileMimeType?: string) => MediaNodeType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,8 +36,8 @@
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^17.2.0",
-    "@atlaskit/editor-common": "^77.1.0",
+    "@atlaskit/button": "^17.3.0",
+    "@atlaskit/editor-common": "^77.2.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
@@ -125,7 +125,8 @@
       "type": "boolean"
     },
     "platform.editor.media.inline-image.base-support": {
-      "type": "boolean"
+      "type": "boolean",
+      "referenceOnly": "true"
     },
     "platform.media-experience.media-viewer-v2_hgsii": {
       "type": "boolean",