@atlaskit/editor-plugin-media 8.4.9 → 8.4.12

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-media
 
+## 8.4.12
+
+### Patch Changes
+
+- [`4d676bbdb3ce6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4d676bbdb3ce6) -
+  ts-ignore added temporarily to unblock local consumption for help-center, will be removed once
+  project refs are setup
+- Updated dependencies
+
+## 8.4.11
+
+### Patch Changes
+
+- [`a05464ea42678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a05464ea42678) -
+  EDITOR-2791 bump adf-schema
+- Updated dependencies
+
+## 8.4.10
+
+### Patch Changes
+
+- [`98517a05bfada`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98517a05bfada) -
+  fix styling for full-width and wide media single
+- Updated dependencies
+
 ## 8.4.9
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -290,6 +290,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           var mediaSelectionHandlerPlugin = new _safePlugin.SafePlugin({
             key: new _state.PluginKey('mediaSelectionHandlerPlugin'),
             props: {
+              // @ts-ignore - Workaround for help-center local consumption
+
               handleScrollToSelection: function handleScrollToSelection(view) {
                 var selection = view.state.selection;
                 if (!(selection instanceof _state.NodeSelection) || selection.node.type.name !== 'media') {

package/dist/cjs/nodeviews/toDOM-fixes/mediaSingle.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _colors = require("@atlaskit/theme/colors");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _toDOMAttrs = require("./toDOMAttrs");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -55,9 +56,17 @@ var mediaWidthCSSCalc = exports.mediaWidthCSSCalc = function mediaWidthCSSCalc(_
   } else if (shouldHardCodePixelWidth) {
     cssCalc = "min(".concat(mediaSingleDimensionWidth, "px, ").concat(fullContainerWidth, ")");
   } else if (shouldUseBreakoutWideLogic) {
-    cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))";
+    } else {
+      cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    }
   } else if (shouldUseBreakoutFullWidthLogic) {
-    cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))";
+    } else {
+      cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    }
   } else {
     cssCalc = "max(min(".concat(baseWidth, "px, min(100cqw, 100%)), ").concat(GUTTER_SIZE, ")");
   }

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

@@ -148,6 +148,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
         });
       }
       if (_this.uploadInProgressSubscriptions.length > 0 && !_this.uploadInProgressSubscriptionsNotified) {
+        // @ts-ignore - Workaround for help-center local consumption
+
         _this.uploadInProgressSubscriptions.forEach(function (fn) {
           return fn(true);
         });
@@ -197,6 +199,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
       }
       _this.waitForPendingTasks().then(function () {
         if (_this.uploadInProgressSubscriptions.length > 0 && _this.uploadInProgressSubscriptionsNotified) {
+          // @ts-ignore - Workaround for help-center local consumption
+
           _this.uploadInProgressSubscriptions.forEach(function (fn) {
             return fn(false);
           });
@@ -323,25 +327,46 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
      */
     (0, _defineProperty2.default)(this, "handleMediaNodeUnmount", function (oldNode) {
       _this.trackMediaNodeRemoval(oldNode);
+
+      // @ts-ignore - Workaround for help-center local consumption
+
       _this.mediaNodes = _this.mediaNodes.filter(function (_ref4) {
         var node = _ref4.node;
         return oldNode !== node;
       });
     });
     (0, _defineProperty2.default)(this, "handleMediaGroupUpdate", function (oldNodes, newNodes) {
+      // @ts-ignore - Workaround for help-center local consumption
+
       var addedNodes = newNodes.filter(function (node) {
-        return oldNodes.every(function (oldNode) {
-          return oldNode.attrs.id !== node.attrs.id;
-        });
+        return (
+          // @ts-ignore - Workaround for help-center local consumption
+
+          oldNodes.every(function (oldNode) {
+            return oldNode.attrs.id !== node.attrs.id;
+          })
+        );
       });
+      // @ts-ignore - Workaround for help-center local consumption
+
       var removedNodes = oldNodes.filter(function (node) {
-        return newNodes.every(function (newNode) {
-          return newNode.attrs.id !== node.attrs.id;
-        });
+        return (
+          // @ts-ignore - Workaround for help-center local consumption
+
+          newNodes.every(function (newNode) {
+            return newNode.attrs.id !== node.attrs.id;
+          })
+        );
       });
+
+      // @ts-ignore - Workaround for help-center local consumption
+
       addedNodes.forEach(function (node) {
         _this.trackMediaNodeAddition(node);
       });
+
+      // @ts-ignore - Workaround for help-center local consumption
+
       removedNodes.forEach(function (oldNode) {
         _this.trackMediaNodeRemoval(oldNode);
       });
@@ -350,6 +375,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
       return helpers.findMediaNode(_this, id);
     });
     (0, _defineProperty2.default)(this, "destroyAllPickers", function (pickers) {
+      // @ts-ignore - Workaround for help-center local consumption
+
       pickers.forEach(function (picker) {
         return picker.destroy();
       });
@@ -517,6 +544,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
   }, {
     key: "unsubscribeFromUploadInProgressState",
     value: function unsubscribeFromUploadInProgressState(fn) {
+      // @ts-ignore - Workaround for help-center local consumption
+
       this.uploadInProgressSubscriptions = this.uploadInProgressSubscriptions.filter(function (subscribedFn) {
         return subscribedFn !== fn;
       });
@@ -701,6 +730,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
           var lastTrackedAddedNode = _this2.lastAddedMediaSingleFileIds[0];
           // execute selection only if selection did not change after the node has been inserted
           if ((lastTrackedAddedNode === null || lastTrackedAddedNode === void 0 ? void 0 : lastTrackedAddedNode.selectionPosition) === _this2.view.state.selection.from) {
+            // @ts-ignore - Workaround for help-center local consumption
+
             var lastAddedNode = _this2.mediaNodes.find(function (node) {
               return node.node.attrs.id === lastTrackedAddedNode.id;
             });
@@ -728,7 +759,10 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     }
   }, {
     key: "destroy",
-    value: function destroy() {
+    value:
+    // @ts-ignore - Workaround for help-center local consumption
+
+    function destroy() {
       if (this.destroyed) {
         return;
       }
@@ -775,11 +809,15 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
               _context2.t1 = this.customPicker = _context2.sent;
               _context2.t0.push.call(_context2.t0, _context2.t1);
             case 13:
+              // @ts-ignore - Workaround for help-center local consumption
+
               pickers.forEach(function (picker) {
                 picker.onNewMedia(_this3.insertFile);
               });
             case 14:
               // set new upload params for the pickers
+              // @ts-ignore - Workaround for help-center local consumption
+
               pickers.forEach(function (picker) {
                 return picker.setUploadParams(uploadParams);
               });
@@ -804,6 +842,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     value: function updateAndDispatch(props) {
       var _this4 = this;
       // update plugin state
+      // @ts-ignore - Workaround for help-center local consumption
+
       Object.keys(props).forEach(function (_key) {
         var key = _key;
         var value = props[key];
@@ -824,9 +864,11 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
   var intl = getIntl();
   return new _safePlugin.SafePlugin({
     state: {
+      // @ts-ignore - Workaround for help-center local consumption
       init: function init(_config, state) {
         return new MediaPluginStateImplementation(state, options, mediaOptions, dispatch, pluginInjectionApi);
       },
+      // @ts-ignore - Workaround for help-center local consumption
       apply: function apply(tr, pluginState) {
         var _tr$getMeta;
         var isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
@@ -851,6 +893,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
 
         // remap editing media single position if we're in collab
         if (typeof pluginState.editingMediaSinglePos === 'number') {
+          // @ts-ignore - Workaround for help-center local consumption
+
           pluginState.editingMediaSinglePos = tr.mapping.map(pluginState.editingMediaSinglePos);
           nextPluginState = nextPluginState.clone();
         }
@@ -891,6 +935,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         return nextPluginState;
       }
     },
+    // @ts-ignore - Workaround for help-center local consumption
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {
       var _iterator = _createForOfIteratorHelper(transactions),
         _step;
@@ -917,6 +962,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
       return;
     },
     key: _pluginKey.stateKey,
+    // @ts-ignore - Workaround for help-center local consumption
     view: function view(_view) {
       var pluginState = getMediaPluginState(_view.state);
       pluginState.setView(_view);
@@ -928,6 +974,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
       };
     },
     props: {
+      // @ts-ignore - Workaround for help-center local consumption
       decorations: function decorations(state) {
         // Use this to indicate that the media node is selected
         var mediaNodes = [];
@@ -937,6 +984,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
 
         // Find any media nodes in the current selection
         if (state.selection instanceof _state2.TextSelection || state.selection instanceof _state2.AllSelection || state.selection instanceof _state2.NodeSelection || state.selection instanceof _cellSelection.CellSelection) {
+          // @ts-ignore - Workaround for help-center local consumption
           doc.nodesBetween(state.selection.from, state.selection.to, function (node, pos) {
             if (node.type === schema.nodes.media) {
               mediaNodes.push(_view2.Decoration.node(pos, pos + node.nodeSize, {}, {
@@ -966,6 +1014,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         }
         var pos = $anchor.pos;
         if ($anchor.parent.type !== schema.nodes.paragraph && $anchor.parent.type !== schema.nodes.codeBlock) {
+          // @ts-ignore - Workaround for help-center local consumption
+
           pos = (0, _transform.insertPoint)(state.doc, pos, schema.nodes.mediaGroup);
         }
         if (pos === null || pos === undefined) {
@@ -986,6 +1036,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         return _view2.DecorationSet.create(state.doc, dropPlaceholders);
       },
       nodeViews: options.nodeViews,
+      // @ts-ignore - Workaround for help-center local consumption
       handleTextInput: function handleTextInput(view, from, to, text) {
         var selection = view.state.selection;
         if (text === ' ' && selection instanceof _state2.NodeSelection && selection.node.type.name === 'mediaSingle') {
@@ -993,6 +1044,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
           var videoControlsWrapperRef = (_stateKey$getState = _pluginKey.stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
           var videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
           if (videoControls) {
+            // @ts-ignore - Workaround for help-center local consumption
+
             var isVideoControl = Array.from(videoControls).some(function (videoControl) {
               // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
               return document.activeElement === videoControl;
@@ -1005,6 +1058,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         getMediaPluginState(view.state).splitMediaGroup();
         return false;
       },
+      // @ts-ignore - Workaround for help-center local consumption
       handleClick: function handleClick(_editorView, _pos, event) {
         var _event$target;
         // Ignored via go/ees005
@@ -1028,6 +1082,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         }
         return false;
       },
+      // @ts-ignore - Workaround for help-center local consumption
       handleDoubleClickOn: function handleDoubleClickOn(view) {
         var _pluginState$mediaOpt, _pluginInjectionApi$e;
         // Check if media viewer is enabled
@@ -1063,7 +1118,11 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         }
         return false;
       },
+      // @ts-ignore - Workaround for help-center local consumption
+
       handleDOMEvents: {
+        // @ts-ignore - Workaround for help-center local consumption
+
         keydown: function keydown(view, event) {
           var selection = view.state.selection;
           if (selection instanceof _state2.NodeSelection && selection.node.type.name === 'mediaSingle') {

package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -343,7 +343,10 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     if (!guidelineSnapsReference.snaps.x) {
       return;
     }
-    var _findClosestSnap = (0, _guideline.findClosestSnap)(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, _mediaSingle.MEDIA_SINGLE_SNAP_GAP),
+    var _findClosestSnap = (0, _guideline.findClosestSnap)(
+      // @ts-ignore - Workaround for help-center local consumption
+
+      width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, _mediaSingle.MEDIA_SINGLE_SNAP_GAP),
       gap = _findClosestSnap.gap,
       activeGuidelineKeys = _findClosestSnap.keys;
     var relativeGuidelines = activeGuidelineKeys.length ? [] : getRelativeGuides();

package/dist/es2019/mediaPlugin.js

@@ -282,6 +282,8 @@ export const mediaPlugin = ({
           const mediaSelectionHandlerPlugin = new SafePlugin({
             key: new PluginKey('mediaSelectionHandlerPlugin'),
             props: {
+              // @ts-ignore - Workaround for help-center local consumption
+
               handleScrollToSelection: view => {
                 const {
                   state: {

package/dist/es2019/nodeviews/toDOM-fixes/mediaSingle.js

@@ -1,6 +1,7 @@
 import { mediaSingleSpec } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { N20, N50 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
 const WRAPPED_LAYOUTS = ['wrap-left', 'wrap-right'];
@@ -46,9 +47,17 @@ export const mediaWidthCSSCalc = ({
   } else if (shouldHardCodePixelWidth) {
     cssCalc = `min(${mediaSingleDimensionWidth}px, ${fullContainerWidth})`;
   } else if (shouldUseBreakoutWideLogic) {
-    cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+    if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))`;
+    } else {
+      cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+    }
   } else if (shouldUseBreakoutFullWidthLogic) {
-    cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+    if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))`;
+    } else {
+      cssCalc = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+    }
   } else {
     cssCalc = `max(min(${baseWidth}px, min(100cqw, 100%)), ${GUTTER_SIZE})`;
   }

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

@@ -128,6 +128,8 @@ export class MediaPluginStateImplementation {
         });
       }
       if (this.uploadInProgressSubscriptions.length > 0 && !this.uploadInProgressSubscriptionsNotified) {
+        // @ts-ignore - Workaround for help-center local consumption
+
         this.uploadInProgressSubscriptions.forEach(fn => fn(true));
         this.uploadInProgressSubscriptionsNotified = true;
       }
@@ -175,6 +177,8 @@ export class MediaPluginStateImplementation {
       }
       this.waitForPendingTasks().then(() => {
         if (this.uploadInProgressSubscriptions.length > 0 && this.uploadInProgressSubscriptionsNotified) {
+          // @ts-ignore - Workaround for help-center local consumption
+
           this.uploadInProgressSubscriptions.forEach(fn => fn(false));
           this.uploadInProgressSubscriptionsNotified = false;
         }
@@ -299,16 +303,35 @@ export class MediaPluginStateImplementation {
      */
     _defineProperty(this, "handleMediaNodeUnmount", oldNode => {
       this.trackMediaNodeRemoval(oldNode);
+
+      // @ts-ignore - Workaround for help-center local consumption
+
       this.mediaNodes = this.mediaNodes.filter(({
         node
       }) => oldNode !== node);
     });
     _defineProperty(this, "handleMediaGroupUpdate", (oldNodes, newNodes) => {
-      const addedNodes = newNodes.filter(node => oldNodes.every(oldNode => oldNode.attrs.id !== node.attrs.id));
-      const removedNodes = oldNodes.filter(node => newNodes.every(newNode => newNode.attrs.id !== node.attrs.id));
+      // @ts-ignore - Workaround for help-center local consumption
+
+      const addedNodes = newNodes.filter(node =>
+      // @ts-ignore - Workaround for help-center local consumption
+
+      oldNodes.every(oldNode => oldNode.attrs.id !== node.attrs.id));
+      // @ts-ignore - Workaround for help-center local consumption
+
+      const removedNodes = oldNodes.filter(node =>
+      // @ts-ignore - Workaround for help-center local consumption
+
+      newNodes.every(newNode => newNode.attrs.id !== node.attrs.id));
+
+      // @ts-ignore - Workaround for help-center local consumption
+
       addedNodes.forEach(node => {
         this.trackMediaNodeAddition(node);
       });
+
+      // @ts-ignore - Workaround for help-center local consumption
+
       removedNodes.forEach(oldNode => {
         this.trackMediaNodeRemoval(oldNode);
       });
@@ -317,6 +340,8 @@ export class MediaPluginStateImplementation {
       return helpers.findMediaNode(this, id);
     });
     _defineProperty(this, "destroyAllPickers", pickers => {
+      // @ts-ignore - Workaround for help-center local consumption
+
       pickers.forEach(picker => picker.destroy());
       this.pickers.splice(0, this.pickers.length);
     });
@@ -490,6 +515,8 @@ export class MediaPluginStateImplementation {
     this.uploadInProgressSubscriptions.push(fn);
   }
   unsubscribeFromUploadInProgressState(fn) {
+    // @ts-ignore - Workaround for help-center local consumption
+
     this.uploadInProgressSubscriptions = this.uploadInProgressSubscriptions.filter(subscribedFn => subscribedFn !== fn);
   }
   async setMediaProvider(mediaProvider) {
@@ -625,6 +652,8 @@ export class MediaPluginStateImplementation {
         const lastTrackedAddedNode = this.lastAddedMediaSingleFileIds[0];
         // execute selection only if selection did not change after the node has been inserted
         if ((lastTrackedAddedNode === null || lastTrackedAddedNode === void 0 ? void 0 : lastTrackedAddedNode.selectionPosition) === this.view.state.selection.from) {
+          // @ts-ignore - Workaround for help-center local consumption
+
           const lastAddedNode = this.mediaNodes.find(node => {
             return node.node.attrs.id === lastTrackedAddedNode.id;
           });
@@ -649,6 +678,8 @@ export class MediaPluginStateImplementation {
   setView(view) {
     this.view = view;
   }
+  // @ts-ignore - Workaround for help-center local consumption
+
   destroy() {
     if (this.destroyed) {
       return;
@@ -681,12 +712,17 @@ export class MediaPluginStateImplementation {
         pickerPromises.push(customPicker);
         pickers.push(this.customPicker = await customPicker);
       }
+
+      // @ts-ignore - Workaround for help-center local consumption
+
       pickers.forEach(picker => {
         picker.onNewMedia(this.insertFile);
       });
     }
 
     // set new upload params for the pickers
+    // @ts-ignore - Workaround for help-center local consumption
+
     pickers.forEach(picker => picker.setUploadParams(uploadParams));
   }
   collectionFromProvider() {
@@ -694,6 +730,8 @@ export class MediaPluginStateImplementation {
   }
   updateAndDispatch(props) {
     // update plugin state
+    // @ts-ignore - Workaround for help-center local consumption
+
     Object.keys(props).forEach(_key => {
       const key = _key;
       const value = props[key];
@@ -713,9 +751,11 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
   const intl = getIntl();
   return new SafePlugin({
     state: {
+      // @ts-ignore - Workaround for help-center local consumption
       init(_config, state) {
         return new MediaPluginStateImplementation(state, options, mediaOptions, dispatch, pluginInjectionApi);
       },
+      // @ts-ignore - Workaround for help-center local consumption
       apply(tr, pluginState) {
         var _tr$getMeta;
         const isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
@@ -740,6 +780,8 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
 
         // remap editing media single position if we're in collab
         if (typeof pluginState.editingMediaSinglePos === 'number') {
+          // @ts-ignore - Workaround for help-center local consumption
+
           pluginState.editingMediaSinglePos = tr.mapping.map(pluginState.editingMediaSinglePos);
           nextPluginState = nextPluginState.clone();
         }
@@ -784,6 +826,7 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
         return nextPluginState;
       }
     },
+    // @ts-ignore - Workaround for help-center local consumption
     appendTransaction(transactions, _oldState, newState) {
       for (const transaction of transactions) {
         const isSelectionOnMediaInsideMediaSingle = transaction.selectionSet && isNodeSelection(transaction.selection) && transaction.selection.node.type === newState.schema.nodes.media && transaction.selection.$anchor.parent.type === newState.schema.nodes.mediaSingle;
@@ -801,6 +844,7 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
       return;
     },
     key: stateKey,
+    // @ts-ignore - Workaround for help-center local consumption
     view: view => {
       const pluginState = getMediaPluginState(view.state);
       pluginState.setView(view);
@@ -812,6 +856,7 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
       };
     },
     props: {
+      // @ts-ignore - Workaround for help-center local consumption
       decorations: state => {
         // Use this to indicate that the media node is selected
         const mediaNodes = [];
@@ -825,6 +870,7 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
 
         // Find any media nodes in the current selection
         if (state.selection instanceof TextSelection || state.selection instanceof AllSelection || state.selection instanceof NodeSelection || state.selection instanceof CellSelection) {
+          // @ts-ignore - Workaround for help-center local consumption
           doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {
             if (node.type === schema.nodes.media) {
               mediaNodes.push(Decoration.node(pos, pos + node.nodeSize, {}, {
@@ -854,6 +900,8 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
         }
         let pos = $anchor.pos;
         if ($anchor.parent.type !== schema.nodes.paragraph && $anchor.parent.type !== schema.nodes.codeBlock) {
+          // @ts-ignore - Workaround for help-center local consumption
+
           pos = insertPoint(state.doc, pos, schema.nodes.mediaGroup);
         }
         if (pos === null || pos === undefined) {
@@ -874,6 +922,7 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
         return DecorationSet.create(state.doc, dropPlaceholders);
       },
       nodeViews: options.nodeViews,
+      // @ts-ignore - Workaround for help-center local consumption
       handleTextInput(view, from, to, text) {
         const {
           selection
@@ -883,6 +932,8 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
           const videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
           const videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
           if (videoControls) {
+            // @ts-ignore - Workaround for help-center local consumption
+
             const isVideoControl = Array.from(videoControls).some(videoControl => {
               // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
               return document.activeElement === videoControl;
@@ -895,6 +946,7 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
         getMediaPluginState(view.state).splitMediaGroup();
         return false;
       },
+      // @ts-ignore - Workaround for help-center local consumption
       handleClick: (_editorView, _pos, event) => {
         var _event$target;
         // Ignored via go/ees005
@@ -918,6 +970,7 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
         }
         return false;
       },
+      // @ts-ignore - Workaround for help-center local consumption
       handleDoubleClickOn: view => {
         var _pluginState$mediaOpt, _pluginInjectionApi$e, _pluginInjectionApi$e2;
         // Check if media viewer is enabled
@@ -953,7 +1006,11 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
         }
         return false;
       },
+      // @ts-ignore - Workaround for help-center local consumption
+
       handleDOMEvents: {
+        // @ts-ignore - Workaround for help-center local consumption
+
         keydown: (view, event) => {
           const {
             selection

package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -327,7 +327,10 @@ export const ResizableMediaSingleNextFunctional = props => {
     const {
       gap,
       keys: activeGuidelineKeys
-    } = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP);
+    } = findClosestSnap(
+    // @ts-ignore - Workaround for help-center local consumption
+
+    width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP);
     const relativeGuidelines = activeGuidelineKeys.length ? [] : getRelativeGuides();
     lastSnappedGuidelineKeysRef.current = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(rg => rg.key);
     const nextGuideLines = [...getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines), ...relativeGuidelines];

package/dist/esm/mediaPlugin.js

@@ -281,6 +281,8 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
           var mediaSelectionHandlerPlugin = new SafePlugin({
             key: new PluginKey('mediaSelectionHandlerPlugin'),
             props: {
+              // @ts-ignore - Workaround for help-center local consumption
+
               handleScrollToSelection: function handleScrollToSelection(view) {
                 var selection = view.state.selection;
                 if (!(selection instanceof NodeSelection) || selection.node.type.name !== 'media') {

package/dist/esm/nodeviews/toDOM-fixes/mediaSingle.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { mediaSingleSpec } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { N20, N50 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
 var WRAPPED_LAYOUTS = ['wrap-left', 'wrap-right'];
@@ -48,9 +49,17 @@ export var mediaWidthCSSCalc = function mediaWidthCSSCalc(_ref) {
   } else if (shouldHardCodePixelWidth) {
     cssCalc = "min(".concat(mediaSingleDimensionWidth, "px, ").concat(fullContainerWidth, ")");
   } else if (shouldUseBreakoutWideLogic) {
-    cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))";
+    } else {
+      cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    }
   } else if (shouldUseBreakoutFullWidthLogic) {
-    cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))";
+    } else {
+      cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+    }
   } else {
     cssCalc = "max(min(".concat(baseWidth, "px, min(100cqw, 100%)), ").concat(GUTTER_SIZE, ")");
   }

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

@@ -140,6 +140,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         });
       }
       if (_this.uploadInProgressSubscriptions.length > 0 && !_this.uploadInProgressSubscriptionsNotified) {
+        // @ts-ignore - Workaround for help-center local consumption
+
         _this.uploadInProgressSubscriptions.forEach(function (fn) {
           return fn(true);
         });
@@ -189,6 +191,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       }
       _this.waitForPendingTasks().then(function () {
         if (_this.uploadInProgressSubscriptions.length > 0 && _this.uploadInProgressSubscriptionsNotified) {
+          // @ts-ignore - Workaround for help-center local consumption
+
           _this.uploadInProgressSubscriptions.forEach(function (fn) {
             return fn(false);
           });
@@ -315,25 +319,46 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
      */
     _defineProperty(this, "handleMediaNodeUnmount", function (oldNode) {
       _this.trackMediaNodeRemoval(oldNode);
+
+      // @ts-ignore - Workaround for help-center local consumption
+
       _this.mediaNodes = _this.mediaNodes.filter(function (_ref4) {
         var node = _ref4.node;
         return oldNode !== node;
       });
     });
     _defineProperty(this, "handleMediaGroupUpdate", function (oldNodes, newNodes) {
+      // @ts-ignore - Workaround for help-center local consumption
+
       var addedNodes = newNodes.filter(function (node) {
-        return oldNodes.every(function (oldNode) {
-          return oldNode.attrs.id !== node.attrs.id;
-        });
+        return (
+          // @ts-ignore - Workaround for help-center local consumption
+
+          oldNodes.every(function (oldNode) {
+            return oldNode.attrs.id !== node.attrs.id;
+          })
+        );
       });
+      // @ts-ignore - Workaround for help-center local consumption
+
       var removedNodes = oldNodes.filter(function (node) {
-        return newNodes.every(function (newNode) {
-          return newNode.attrs.id !== node.attrs.id;
-        });
+        return (
+          // @ts-ignore - Workaround for help-center local consumption
+
+          newNodes.every(function (newNode) {
+            return newNode.attrs.id !== node.attrs.id;
+          })
+        );
       });
+
+      // @ts-ignore - Workaround for help-center local consumption
+
       addedNodes.forEach(function (node) {
         _this.trackMediaNodeAddition(node);
       });
+
+      // @ts-ignore - Workaround for help-center local consumption
+
       removedNodes.forEach(function (oldNode) {
         _this.trackMediaNodeRemoval(oldNode);
       });
@@ -342,6 +367,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       return helpers.findMediaNode(_this, id);
     });
     _defineProperty(this, "destroyAllPickers", function (pickers) {
+      // @ts-ignore - Workaround for help-center local consumption
+
       pickers.forEach(function (picker) {
         return picker.destroy();
       });
@@ -509,6 +536,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
   }, {
     key: "unsubscribeFromUploadInProgressState",
     value: function unsubscribeFromUploadInProgressState(fn) {
+      // @ts-ignore - Workaround for help-center local consumption
+
       this.uploadInProgressSubscriptions = this.uploadInProgressSubscriptions.filter(function (subscribedFn) {
         return subscribedFn !== fn;
       });
@@ -693,6 +722,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
           var lastTrackedAddedNode = _this2.lastAddedMediaSingleFileIds[0];
           // execute selection only if selection did not change after the node has been inserted
           if ((lastTrackedAddedNode === null || lastTrackedAddedNode === void 0 ? void 0 : lastTrackedAddedNode.selectionPosition) === _this2.view.state.selection.from) {
+            // @ts-ignore - Workaround for help-center local consumption
+
             var lastAddedNode = _this2.mediaNodes.find(function (node) {
               return node.node.attrs.id === lastTrackedAddedNode.id;
             });
@@ -720,7 +751,10 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     }
   }, {
     key: "destroy",
-    value: function destroy() {
+    value:
+    // @ts-ignore - Workaround for help-center local consumption
+
+    function destroy() {
       if (this.destroyed) {
         return;
       }
@@ -767,11 +801,15 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
               _context2.t1 = this.customPicker = _context2.sent;
               _context2.t0.push.call(_context2.t0, _context2.t1);
             case 13:
+              // @ts-ignore - Workaround for help-center local consumption
+
               pickers.forEach(function (picker) {
                 picker.onNewMedia(_this3.insertFile);
               });
             case 14:
               // set new upload params for the pickers
+              // @ts-ignore - Workaround for help-center local consumption
+
               pickers.forEach(function (picker) {
                 return picker.setUploadParams(uploadParams);
               });
@@ -796,6 +834,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     value: function updateAndDispatch(props) {
       var _this4 = this;
       // update plugin state
+      // @ts-ignore - Workaround for help-center local consumption
+
       Object.keys(props).forEach(function (_key) {
         var key = _key;
         var value = props[key];
@@ -816,9 +856,11 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
   var intl = getIntl();
   return new SafePlugin({
     state: {
+      // @ts-ignore - Workaround for help-center local consumption
       init: function init(_config, state) {
         return new MediaPluginStateImplementation(state, options, mediaOptions, dispatch, pluginInjectionApi);
       },
+      // @ts-ignore - Workaround for help-center local consumption
       apply: function apply(tr, pluginState) {
         var _tr$getMeta;
         var isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
@@ -843,6 +885,8 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
 
         // remap editing media single position if we're in collab
         if (typeof pluginState.editingMediaSinglePos === 'number') {
+          // @ts-ignore - Workaround for help-center local consumption
+
           pluginState.editingMediaSinglePos = tr.mapping.map(pluginState.editingMediaSinglePos);
           nextPluginState = nextPluginState.clone();
         }
@@ -883,6 +927,7 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
         return nextPluginState;
       }
     },
+    // @ts-ignore - Workaround for help-center local consumption
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {
       var _iterator = _createForOfIteratorHelper(transactions),
         _step;
@@ -909,6 +954,7 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
       return;
     },
     key: stateKey,
+    // @ts-ignore - Workaround for help-center local consumption
     view: function view(_view) {
       var pluginState = getMediaPluginState(_view.state);
       pluginState.setView(_view);
@@ -920,6 +966,7 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
       };
     },
     props: {
+      // @ts-ignore - Workaround for help-center local consumption
       decorations: function decorations(state) {
         // Use this to indicate that the media node is selected
         var mediaNodes = [];
@@ -929,6 +976,7 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
 
         // Find any media nodes in the current selection
         if (state.selection instanceof TextSelection || state.selection instanceof AllSelection || state.selection instanceof NodeSelection || state.selection instanceof CellSelection) {
+          // @ts-ignore - Workaround for help-center local consumption
           doc.nodesBetween(state.selection.from, state.selection.to, function (node, pos) {
             if (node.type === schema.nodes.media) {
               mediaNodes.push(Decoration.node(pos, pos + node.nodeSize, {}, {
@@ -958,6 +1006,8 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
         }
         var pos = $anchor.pos;
         if ($anchor.parent.type !== schema.nodes.paragraph && $anchor.parent.type !== schema.nodes.codeBlock) {
+          // @ts-ignore - Workaround for help-center local consumption
+
           pos = insertPoint(state.doc, pos, schema.nodes.mediaGroup);
         }
         if (pos === null || pos === undefined) {
@@ -978,6 +1028,7 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
         return DecorationSet.create(state.doc, dropPlaceholders);
       },
       nodeViews: options.nodeViews,
+      // @ts-ignore - Workaround for help-center local consumption
       handleTextInput: function handleTextInput(view, from, to, text) {
         var selection = view.state.selection;
         if (text === ' ' && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
@@ -985,6 +1036,8 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
           var videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(view.state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
           var videoControls = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
           if (videoControls) {
+            // @ts-ignore - Workaround for help-center local consumption
+
             var isVideoControl = Array.from(videoControls).some(function (videoControl) {
               // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
               return document.activeElement === videoControl;
@@ -997,6 +1050,7 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
         getMediaPluginState(view.state).splitMediaGroup();
         return false;
       },
+      // @ts-ignore - Workaround for help-center local consumption
       handleClick: function handleClick(_editorView, _pos, event) {
         var _event$target;
         // Ignored via go/ees005
@@ -1020,6 +1074,7 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
         }
         return false;
       },
+      // @ts-ignore - Workaround for help-center local consumption
       handleDoubleClickOn: function handleDoubleClickOn(view) {
         var _pluginState$mediaOpt, _pluginInjectionApi$e;
         // Check if media viewer is enabled
@@ -1055,7 +1110,11 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
         }
         return false;
       },
+      // @ts-ignore - Workaround for help-center local consumption
+
       handleDOMEvents: {
+        // @ts-ignore - Workaround for help-center local consumption
+
         keydown: function keydown(view, event) {
           var selection = view.state.selection;
           if (selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {

package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -333,7 +333,10 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     if (!guidelineSnapsReference.snaps.x) {
       return;
     }
-    var _findClosestSnap = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
+    var _findClosestSnap = findClosestSnap(
+      // @ts-ignore - Workaround for help-center local consumption
+
+      width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
       gap = _findClosestSnap.gap,
       activeGuidelineKeys = _findClosestSnap.keys;
     var relativeGuidelines = activeGuidelineKeys.length ? [] : getRelativeGuides();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "8.4.9",
+	"version": "8.4.12",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,8 +29,8 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.3.2",
-		"@atlaskit/analytics-namespaced-context": "^7.1.0",
+		"@atlaskit/adf-schema": "^51.4.0",
+		"@atlaskit/analytics-namespaced-context": "^7.2.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/button": "^23.6.0",
 		"@atlaskit/editor-palette": "^2.1.0",
@@ -49,26 +49,26 @@
 		"@atlaskit/editor-plugin-toolbar": "^3.4.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.9.0",
+		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/form": "^14.2.0",
+		"@atlaskit/form": "^14.3.0",
 		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/icon-lab": "^5.12.0",
-		"@atlaskit/media-card": "^79.7.0",
+		"@atlaskit/media-card": "^79.8.0",
 		"@atlaskit/media-client": "^35.6.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
 		"@atlaskit/media-filmstrip": "^51.1.0",
-		"@atlaskit/media-picker": "^70.0.0",
+		"@atlaskit/media-picker": "^70.1.0",
 		"@atlaskit/media-ui": "^28.7.0",
 		"@atlaskit/media-viewer": "^52.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^16.1.0",
+		"@atlaskit/primitives": "^16.3.0",
 		"@atlaskit/textfield": "^8.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.38.0",
-		"@atlaskit/tokens": "^8.0.0",
-		"@atlaskit/tooltip": "^20.8.0",
+		"@atlaskit/tmp-editor-statsig": "^13.42.0",
+		"@atlaskit/tokens": "^8.3.0",
+		"@atlaskit/tooltip": "^20.10.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.29.0",
+		"@atlaskit/editor-common": "^110.34.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",