@atlaskit/editor-plugin-media 14.0.0 → 14.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media
 
+## 14.0.1
+
+### Patch Changes
+
+- [`cf674939028c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf674939028c9) -
+  Preserve table cell sizing metadata when generated images are inserted as media singles.
+- Updated dependencies
+
 ## 14.0.0
 
 ### Major Changes

package/dist/cjs/pm-plugins/utils/media-single.js

@@ -14,12 +14,60 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaCommon = require("../utils/media-common");
 var _analytics2 = require("./analytics");
 var _isType = require("./is-type");
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TABLE_CELL_HORIZONTAL_PADDING = 16;
+var getPositiveWidth = function getPositiveWidth(width) {
+  return typeof width === 'number' && width > 0 ? width : undefined;
+};
+var getClosestNodeDepth = function getClosestNodeDepth($pos, nodeNames) {
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    if (nodeNames.includes($pos.node(depth).type.name)) {
+      return depth;
+    }
+  }
+};
+var getTableCellWidthFromPosition = function getTableCellWidthFromPosition(doc, pos) {
+  if (typeof pos !== 'number') {
+    return undefined;
+  }
+  try {
+    var _getPositiveWidth, _getPositiveWidth2;
+    var $pos = doc.resolve(pos);
+    var cellDepth = getClosestNodeDepth($pos, ['tableCell', 'tableHeader']);
+    var tableDepth = getClosestNodeDepth($pos, ['table']);
+    if (cellDepth === undefined || tableDepth === undefined || tableDepth >= cellDepth) {
+      return undefined;
+    }
+    var tableNode = $pos.node(tableDepth);
+    var cellNode = $pos.node(cellDepth);
+    var tableMap = _tableMap.TableMap.get(tableNode);
+    var tableStart = $pos.before(tableDepth) + 1;
+    var cellPositionInTable = $pos.before(cellDepth) - tableStart;
+    var cellRect = tableMap.findCell(cellPositionInTable);
+    var columnSpan = cellRect.right - cellRect.left;
+    var colwidth = cellNode.attrs.colwidth;
+    var explicitCellWidth = colwidth === null || colwidth === void 0 ? void 0 : colwidth.slice(0, columnSpan).reduce(function (total, width) {
+      return total + width;
+    }, 0);
+    var tableWidth = (_getPositiveWidth = getPositiveWidth(tableNode.attrs.width)) !== null && _getPositiveWidth !== void 0 ? _getPositiveWidth : _editorSharedStyles.akEditorDefaultLayoutWidth;
+    var inferredCellWidth = tableWidth / tableMap.width * columnSpan;
+    var cellWidth = (_getPositiveWidth2 = getPositiveWidth(explicitCellWidth)) !== null && _getPositiveWidth2 !== void 0 ? _getPositiveWidth2 : getPositiveWidth(inferredCellWidth);
+    return cellWidth ? cellWidth - TABLE_CELL_HORIZONTAL_PADDING : undefined;
+  } catch (_unused) {
+    return undefined;
+  }
+};
+var getMediaSingleMaxWidthForInsertion = function getMediaSingleMaxWidthForInsertion(view, pos, widthPluginState) {
+  var _ref, _ref2, _getPositiveWidth3;
+  return (_ref = (_ref2 = (_getPositiveWidth3 = getPositiveWidth((0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, pos, true))) !== null && _getPositiveWidth3 !== void 0 ? _getPositiveWidth3 : getPositiveWidth(getTableCellWidthFromPosition(view.state.doc, pos))) !== null && _ref2 !== void 0 ? _ref2 : getPositiveWidth(widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength)) !== null && _ref !== void 0 ? _ref : getPositiveWidth(widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width);
+};
 var getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension, insertMediaVia) {
   return {
     action: _analytics.ACTION.INSERTED,
@@ -37,12 +85,12 @@ var getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, file
 function shouldAddParagraph(state) {
   return (0, _selection.atTheBeginningOfBlock)(state) && !(0, _utils.checkNodeDown)(state.selection, state.doc, _utils.isEmptyParagraph);
 }
-function insertNodesWithOptionalParagraph(_ref) {
-  var nodes = _ref.nodes,
-    _ref$analyticsAttribu = _ref.analyticsAttributes,
-    analyticsAttributes = _ref$analyticsAttribu === void 0 ? {} : _ref$analyticsAttribu,
-    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    insertMediaVia = _ref.insertMediaVia;
+function insertNodesWithOptionalParagraph(_ref3) {
+  var nodes = _ref3.nodes,
+    _ref3$analyticsAttrib = _ref3.analyticsAttributes,
+    analyticsAttributes = _ref3$analyticsAttrib === void 0 ? {} : _ref3$analyticsAttrib,
+    editorAnalyticsAPI = _ref3.editorAnalyticsAPI,
+    insertMediaVia = _ref3.insertMediaVia;
   return function (state, dispatch) {
     var tr = state.tr;
     if ((0, _platformFeatureFlags.fg)('platform_editor_introduce_insert_media_command')) {
@@ -92,15 +140,15 @@ function insertNodesWithOptionalParagraph(_ref) {
     return true;
   };
 }
-function insertNodesWithOptionalParagraphCommand(_ref2) {
-  var nodes = _ref2.nodes,
-    positions = _ref2.positions,
-    _ref2$analyticsAttrib = _ref2.analyticsAttributes,
-    analyticsAttributes = _ref2$analyticsAttrib === void 0 ? {} : _ref2$analyticsAttrib,
-    editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
-    insertMediaVia = _ref2.insertMediaVia;
-  return function (_ref3) {
-    var tr = _ref3.tr;
+function insertNodesWithOptionalParagraphCommand(_ref4) {
+  var nodes = _ref4.nodes,
+    positions = _ref4.positions,
+    _ref4$analyticsAttrib = _ref4.analyticsAttributes,
+    analyticsAttributes = _ref4$analyticsAttrib === void 0 ? {} : _ref4$analyticsAttrib,
+    editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
+    insertMediaVia = _ref4.insertMediaVia;
+  return function (_ref5) {
+    var tr = _ref5.tr;
     var inputMethod = analyticsAttributes.inputMethod,
       fileExtension = analyticsAttributes.fileExtension,
       newType = analyticsAttributes.newType,
@@ -155,8 +203,9 @@ var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function inser
   if (node.type !== media || !(0, _isType.isImage)(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
     return false;
   }
+  var mediaSingleMaxWidth = getMediaSingleMaxWidthForInsertion(view, state.selection.$from.pos);
   if ((0, _platformFeatureFlags.fg)('platform_editor_introduce_insert_media_command')) {
-    var updatedTr = createInsertMediaAsMediaSingleCommand(node.attrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing)({
+    var updatedTr = createInsertMediaAsMediaSingleCommand(node.attrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing, undefined, undefined, mediaSingleMaxWidth)({
       tr: state.tr
     });
     if (updatedTr && dispatch) {
@@ -167,7 +216,7 @@ var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function inser
   }
   var mediaSingleAttrs = allowPixelResizing ? {
     widthType: 'pixel',
-    width: (0, _mediaSingle.getMediaSingleInitialWidth)((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : _mediaSingle.DEFAULT_IMAGE_WIDTH),
+    width: (0, _mediaSingle.getMediaSingleInitialWidth)((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : _mediaSingle.DEFAULT_IMAGE_WIDTH, mediaSingleMaxWidth),
     layout: 'center'
   } : {};
   var mediaSingleNode = mediaSingle.create(mediaSingleAttrs, node);
@@ -183,10 +232,10 @@ var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function inser
     insertMediaVia: insertMediaVia
   })(state, dispatch);
 };
-var createInsertMediaAsMediaSingleCommand = exports.createInsertMediaAsMediaSingleCommand = function createInsertMediaAsMediaSingleCommand(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing, positions, dataConsumerSource) {
-  return function (_ref4) {
-    var _mediaAttrs$__fileMim, _mediaAttrs$width, _mediaAttrs$__fileMim2;
-    var tr = _ref4.tr;
+var createInsertMediaAsMediaSingleCommand = exports.createInsertMediaAsMediaSingleCommand = function createInsertMediaAsMediaSingleCommand(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing, positions, dataConsumerSource, mediaSingleMaxWidth) {
+  return function (_ref6) {
+    var _mediaAttrs$__fileMim, _getPositiveWidth4, _mediaAttrs$width, _mediaAttrs$__fileMim2;
+    var tr = _ref6.tr;
     var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
       mediaSingle = _tr$doc$type$schema$n.mediaSingle,
       media = _tr$doc$type$schema$n.media;
@@ -196,9 +245,10 @@ var createInsertMediaAsMediaSingleCommand = exports.createInsertMediaAsMediaSing
     if (mediaAttrs.type !== 'external' && !(0, _isType.isImage)((_mediaAttrs$__fileMim = mediaAttrs.__fileMimeType) !== null && _mediaAttrs$__fileMim !== void 0 ? _mediaAttrs$__fileMim : undefined)) {
       return null;
     }
+    var resolvedMediaSingleMaxWidth = (_getPositiveWidth4 = getPositiveWidth(mediaSingleMaxWidth)) !== null && _getPositiveWidth4 !== void 0 ? _getPositiveWidth4 : getPositiveWidth(getTableCellWidthFromPosition(tr.doc, positions ? positions[0] : tr.selection.from));
     var mediaSingleAttrs = allowPixelResizing ? {
       widthType: 'pixel',
-      width: (0, _mediaSingle.getMediaSingleInitialWidth)((_mediaAttrs$width = mediaAttrs.width) !== null && _mediaAttrs$width !== void 0 ? _mediaAttrs$width : _mediaSingle.DEFAULT_IMAGE_WIDTH),
+      width: (0, _mediaSingle.getMediaSingleInitialWidth)((_mediaAttrs$width = mediaAttrs.width) !== null && _mediaAttrs$width !== void 0 ? _mediaAttrs$width : _mediaSingle.DEFAULT_IMAGE_WIDTH, resolvedMediaSingleMaxWidth),
       layout: 'center'
     } : {};
     var dataConsumerMarkType = dataConsumerSource ? tr.doc.type.schema.marks.dataConsumer : undefined;
@@ -231,7 +281,7 @@ var getFileExtension = function getFileExtension(fileName) {
   return undefined;
 };
 var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, widthPluginState, editorAnalyticsAPI, onNodeInserted, insertMediaVia, allowPixelResizing) {
-  var _state$selection$$fro;
+  var _state$selection$$fro, _getMediaSingleMaxWid;
   if (collection === undefined) {
     return false;
   }
@@ -242,7 +292,7 @@ var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMedia
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  var contentWidth = (_getMediaSingleMaxWid = getMediaSingleMaxWidthForInsertion(view, state.selection.$from.pos, widthPluginState)) !== null && _getMediaSingleMaxWid !== void 0 ? _getMediaSingleMaxWid : undefined;
   var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert, allowPixelResizing)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
@@ -283,7 +333,7 @@ var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMedia
   return true;
 };
 var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMediaSingleNode = function changeFromMediaInlineToMediaSingleNode(view, fromNode, widthPluginState, editorAnalyticsAPI, allowPixelResizing) {
-  var _state$selection$$fro2;
+  var _state$selection$$fro2, _getMediaSingleMaxWid2;
   var state = view.state,
     dispatch = view.dispatch;
   var mediaInline = state.schema.nodes.mediaInline;
@@ -295,7 +345,7 @@ var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMedi
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  var contentWidth = (_getMediaSingleMaxWid2 = getMediaSingleMaxWidthForInsertion(view, state.selection.$from.pos, widthPluginState)) !== null && _getMediaSingleMaxWid2 !== void 0 ? _getMediaSingleMaxWid2 : undefined;
   var node = replaceWithMediaSingleNode(state.schema, contentWidth, _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, allowPixelResizing)(fromNode);
   var fileExtension = getFileExtension(fromNode.attrs.__fileName);
   // should split if media is valid content for the grandparent of the selected node
@@ -336,12 +386,12 @@ var createMediaSingleNode = function createMediaSingleNode(schema, collection, m
       _mediaState$scaleFact = mediaState.scaleFactor,
       scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact,
       fileName = mediaState.fileName;
-    var _ref5 = dimensions || {
+    var _ref7 = dimensions || {
         height: undefined,
         width: undefined
       },
-      width = _ref5.width,
-      height = _ref5.height;
+      width = _ref7.width,
+      height = _ref7.height;
     var _schema$nodes = schema.nodes,
       media = _schema$nodes.media,
       mediaSingle = _schema$nodes.mediaSingle;

package/dist/es2019/pm-plugins/utils/media-single.js

@@ -6,10 +6,54 @@ import { atTheBeginningOfBlock, selectionIsAtTheBeginningOfBlock, startPositionO
 import { checkNodeDown, isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { findChangeFromLocation, getChangeMediaAnalytics } from './analytics';
 import { isImage } from './is-type';
+const TABLE_CELL_HORIZONTAL_PADDING = 16;
+const getPositiveWidth = width => typeof width === 'number' && width > 0 ? width : undefined;
+const getClosestNodeDepth = ($pos, nodeNames) => {
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    if (nodeNames.includes($pos.node(depth).type.name)) {
+      return depth;
+    }
+  }
+};
+const getTableCellWidthFromPosition = (doc, pos) => {
+  if (typeof pos !== 'number') {
+    return undefined;
+  }
+  try {
+    var _getPositiveWidth, _getPositiveWidth2;
+    const $pos = doc.resolve(pos);
+    const cellDepth = getClosestNodeDepth($pos, ['tableCell', 'tableHeader']);
+    const tableDepth = getClosestNodeDepth($pos, ['table']);
+    if (cellDepth === undefined || tableDepth === undefined || tableDepth >= cellDepth) {
+      return undefined;
+    }
+    const tableNode = $pos.node(tableDepth);
+    const cellNode = $pos.node(cellDepth);
+    const tableMap = TableMap.get(tableNode);
+    const tableStart = $pos.before(tableDepth) + 1;
+    const cellPositionInTable = $pos.before(cellDepth) - tableStart;
+    const cellRect = tableMap.findCell(cellPositionInTable);
+    const columnSpan = cellRect.right - cellRect.left;
+    const colwidth = cellNode.attrs.colwidth;
+    const explicitCellWidth = colwidth === null || colwidth === void 0 ? void 0 : colwidth.slice(0, columnSpan).reduce((total, width) => total + width, 0);
+    const tableWidth = (_getPositiveWidth = getPositiveWidth(tableNode.attrs.width)) !== null && _getPositiveWidth !== void 0 ? _getPositiveWidth : akEditorDefaultLayoutWidth;
+    const inferredCellWidth = tableWidth / tableMap.width * columnSpan;
+    const cellWidth = (_getPositiveWidth2 = getPositiveWidth(explicitCellWidth)) !== null && _getPositiveWidth2 !== void 0 ? _getPositiveWidth2 : getPositiveWidth(inferredCellWidth);
+    return cellWidth ? cellWidth - TABLE_CELL_HORIZONTAL_PADDING : undefined;
+  } catch {
+    return undefined;
+  }
+};
+const getMediaSingleMaxWidthForInsertion = (view, pos, widthPluginState) => {
+  var _ref, _ref2, _getPositiveWidth3;
+  return (_ref = (_ref2 = (_getPositiveWidth3 = getPositiveWidth(getMaxWidthForNestedNodeNext(view, pos, true))) !== null && _getPositiveWidth3 !== void 0 ? _getPositiveWidth3 : getPositiveWidth(getTableCellWidthFromPosition(view.state.doc, pos))) !== null && _ref2 !== void 0 ? _ref2 : getPositiveWidth(widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength)) !== null && _ref !== void 0 ? _ref : getPositiveWidth(widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width);
+};
 const getInsertMediaAnalytics = (inputMethod, fileExtension, insertMediaVia) => ({
   action: ACTION.INSERTED,
   actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -153,8 +197,9 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod, editorAnalytic
   if (node.type !== media || !isImage(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
     return false;
   }
+  const mediaSingleMaxWidth = getMediaSingleMaxWidthForInsertion(view, state.selection.$from.pos);
   if (fg('platform_editor_introduce_insert_media_command')) {
-    const updatedTr = createInsertMediaAsMediaSingleCommand(node.attrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing)({
+    const updatedTr = createInsertMediaAsMediaSingleCommand(node.attrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing, undefined, undefined, mediaSingleMaxWidth)({
       tr: state.tr
     });
     if (updatedTr && dispatch) {
@@ -165,7 +210,7 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod, editorAnalytic
   }
   const mediaSingleAttrs = allowPixelResizing ? {
     widthType: 'pixel',
-    width: getMediaSingleInitialWidth((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : DEFAULT_IMAGE_WIDTH),
+    width: getMediaSingleInitialWidth((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : DEFAULT_IMAGE_WIDTH, mediaSingleMaxWidth),
     layout: 'center'
   } : {};
   const mediaSingleNode = mediaSingle.create(mediaSingleAttrs, node);
@@ -181,11 +226,11 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod, editorAnalytic
     insertMediaVia
   })(state, dispatch);
 };
-export const createInsertMediaAsMediaSingleCommand = (mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing, positions, dataConsumerSource) => {
+export const createInsertMediaAsMediaSingleCommand = (mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing, positions, dataConsumerSource, mediaSingleMaxWidth) => {
   return ({
     tr
   }) => {
-    var _mediaAttrs$__fileMim, _mediaAttrs$width, _mediaAttrs$__fileMim2;
+    var _mediaAttrs$__fileMim, _getPositiveWidth4, _mediaAttrs$width, _mediaAttrs$__fileMim2;
     const {
       mediaSingle,
       media
@@ -196,9 +241,10 @@ export const createInsertMediaAsMediaSingleCommand = (mediaAttrs, inputMethod, e
     if (mediaAttrs.type !== 'external' && !isImage((_mediaAttrs$__fileMim = mediaAttrs.__fileMimeType) !== null && _mediaAttrs$__fileMim !== void 0 ? _mediaAttrs$__fileMim : undefined)) {
       return null;
     }
+    const resolvedMediaSingleMaxWidth = (_getPositiveWidth4 = getPositiveWidth(mediaSingleMaxWidth)) !== null && _getPositiveWidth4 !== void 0 ? _getPositiveWidth4 : getPositiveWidth(getTableCellWidthFromPosition(tr.doc, positions ? positions[0] : tr.selection.from));
     const mediaSingleAttrs = allowPixelResizing ? {
       widthType: 'pixel',
-      width: getMediaSingleInitialWidth((_mediaAttrs$width = mediaAttrs.width) !== null && _mediaAttrs$width !== void 0 ? _mediaAttrs$width : DEFAULT_IMAGE_WIDTH),
+      width: getMediaSingleInitialWidth((_mediaAttrs$width = mediaAttrs.width) !== null && _mediaAttrs$width !== void 0 ? _mediaAttrs$width : DEFAULT_IMAGE_WIDTH, resolvedMediaSingleMaxWidth),
       layout: 'center'
     } : {};
     const dataConsumerMarkType = dataConsumerSource ? tr.doc.type.schema.marks.dataConsumer : undefined;
@@ -231,7 +277,7 @@ const getFileExtension = fileName => {
   return undefined;
 };
 export const insertMediaSingleNode = (view, mediaState, inputMethod, collection, alignLeftOnInsert, widthPluginState, editorAnalyticsAPI, onNodeInserted, insertMediaVia, allowPixelResizing) => {
-  var _state$selection$$fro;
+  var _state$selection$$fro, _getMediaSingleMaxWid;
   if (collection === undefined) {
     return false;
   }
@@ -244,7 +290,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  const contentWidth = getMaxWidthForNestedNodeNext(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  const contentWidth = (_getMediaSingleMaxWid = getMediaSingleMaxWidthForInsertion(view, state.selection.$from.pos, widthPluginState)) !== null && _getMediaSingleMaxWid !== void 0 ? _getMediaSingleMaxWid : undefined;
   const node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert, allowPixelResizing)(mediaState);
   let fileExtension;
   if (mediaState.fileName) {
@@ -285,7 +331,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
   return true;
 };
 export const changeFromMediaInlineToMediaSingleNode = (view, fromNode, widthPluginState, editorAnalyticsAPI, allowPixelResizing) => {
-  var _state$selection$$fro2;
+  var _state$selection$$fro2, _getMediaSingleMaxWid2;
   const {
     state,
     dispatch
@@ -301,7 +347,7 @@ export const changeFromMediaInlineToMediaSingleNode = (view, fromNode, widthPlug
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  const contentWidth = getMaxWidthForNestedNodeNext(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  const contentWidth = (_getMediaSingleMaxWid2 = getMediaSingleMaxWidthForInsertion(view, state.selection.$from.pos, widthPluginState)) !== null && _getMediaSingleMaxWid2 !== void 0 ? _getMediaSingleMaxWid2 : undefined;
   const node = replaceWithMediaSingleNode(state.schema, contentWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, allowPixelResizing)(fromNode);
   const fileExtension = getFileExtension(fromNode.attrs.__fileName);
   // should split if media is valid content for the grandparent of the selected node

package/dist/esm/pm-plugins/utils/media-single.js

@@ -9,10 +9,58 @@ import { atTheBeginningOfBlock, selectionIsAtTheBeginningOfBlock, startPositionO
 import { checkNodeDown, isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { findChangeFromLocation, getChangeMediaAnalytics } from './analytics';
 import { isImage } from './is-type';
+var TABLE_CELL_HORIZONTAL_PADDING = 16;
+var getPositiveWidth = function getPositiveWidth(width) {
+  return typeof width === 'number' && width > 0 ? width : undefined;
+};
+var getClosestNodeDepth = function getClosestNodeDepth($pos, nodeNames) {
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    if (nodeNames.includes($pos.node(depth).type.name)) {
+      return depth;
+    }
+  }
+};
+var getTableCellWidthFromPosition = function getTableCellWidthFromPosition(doc, pos) {
+  if (typeof pos !== 'number') {
+    return undefined;
+  }
+  try {
+    var _getPositiveWidth, _getPositiveWidth2;
+    var $pos = doc.resolve(pos);
+    var cellDepth = getClosestNodeDepth($pos, ['tableCell', 'tableHeader']);
+    var tableDepth = getClosestNodeDepth($pos, ['table']);
+    if (cellDepth === undefined || tableDepth === undefined || tableDepth >= cellDepth) {
+      return undefined;
+    }
+    var tableNode = $pos.node(tableDepth);
+    var cellNode = $pos.node(cellDepth);
+    var tableMap = TableMap.get(tableNode);
+    var tableStart = $pos.before(tableDepth) + 1;
+    var cellPositionInTable = $pos.before(cellDepth) - tableStart;
+    var cellRect = tableMap.findCell(cellPositionInTable);
+    var columnSpan = cellRect.right - cellRect.left;
+    var colwidth = cellNode.attrs.colwidth;
+    var explicitCellWidth = colwidth === null || colwidth === void 0 ? void 0 : colwidth.slice(0, columnSpan).reduce(function (total, width) {
+      return total + width;
+    }, 0);
+    var tableWidth = (_getPositiveWidth = getPositiveWidth(tableNode.attrs.width)) !== null && _getPositiveWidth !== void 0 ? _getPositiveWidth : akEditorDefaultLayoutWidth;
+    var inferredCellWidth = tableWidth / tableMap.width * columnSpan;
+    var cellWidth = (_getPositiveWidth2 = getPositiveWidth(explicitCellWidth)) !== null && _getPositiveWidth2 !== void 0 ? _getPositiveWidth2 : getPositiveWidth(inferredCellWidth);
+    return cellWidth ? cellWidth - TABLE_CELL_HORIZONTAL_PADDING : undefined;
+  } catch (_unused) {
+    return undefined;
+  }
+};
+var getMediaSingleMaxWidthForInsertion = function getMediaSingleMaxWidthForInsertion(view, pos, widthPluginState) {
+  var _ref, _ref2, _getPositiveWidth3;
+  return (_ref = (_ref2 = (_getPositiveWidth3 = getPositiveWidth(getMaxWidthForNestedNodeNext(view, pos, true))) !== null && _getPositiveWidth3 !== void 0 ? _getPositiveWidth3 : getPositiveWidth(getTableCellWidthFromPosition(view.state.doc, pos))) !== null && _ref2 !== void 0 ? _ref2 : getPositiveWidth(widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength)) !== null && _ref !== void 0 ? _ref : getPositiveWidth(widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width);
+};
 var getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension, insertMediaVia) {
   return {
     action: ACTION.INSERTED,
@@ -30,12 +78,12 @@ var getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, file
 function shouldAddParagraph(state) {
   return atTheBeginningOfBlock(state) && !checkNodeDown(state.selection, state.doc, isEmptyParagraph);
 }
-function insertNodesWithOptionalParagraph(_ref) {
-  var nodes = _ref.nodes,
-    _ref$analyticsAttribu = _ref.analyticsAttributes,
-    analyticsAttributes = _ref$analyticsAttribu === void 0 ? {} : _ref$analyticsAttribu,
-    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    insertMediaVia = _ref.insertMediaVia;
+function insertNodesWithOptionalParagraph(_ref3) {
+  var nodes = _ref3.nodes,
+    _ref3$analyticsAttrib = _ref3.analyticsAttributes,
+    analyticsAttributes = _ref3$analyticsAttrib === void 0 ? {} : _ref3$analyticsAttrib,
+    editorAnalyticsAPI = _ref3.editorAnalyticsAPI,
+    insertMediaVia = _ref3.insertMediaVia;
   return function (state, dispatch) {
     var tr = state.tr;
     if (fg('platform_editor_introduce_insert_media_command')) {
@@ -85,15 +133,15 @@ function insertNodesWithOptionalParagraph(_ref) {
     return true;
   };
 }
-function insertNodesWithOptionalParagraphCommand(_ref2) {
-  var nodes = _ref2.nodes,
-    positions = _ref2.positions,
-    _ref2$analyticsAttrib = _ref2.analyticsAttributes,
-    analyticsAttributes = _ref2$analyticsAttrib === void 0 ? {} : _ref2$analyticsAttrib,
-    editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
-    insertMediaVia = _ref2.insertMediaVia;
-  return function (_ref3) {
-    var tr = _ref3.tr;
+function insertNodesWithOptionalParagraphCommand(_ref4) {
+  var nodes = _ref4.nodes,
+    positions = _ref4.positions,
+    _ref4$analyticsAttrib = _ref4.analyticsAttributes,
+    analyticsAttributes = _ref4$analyticsAttrib === void 0 ? {} : _ref4$analyticsAttrib,
+    editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
+    insertMediaVia = _ref4.insertMediaVia;
+  return function (_ref5) {
+    var tr = _ref5.tr;
     var inputMethod = analyticsAttributes.inputMethod,
       fileExtension = analyticsAttributes.fileExtension,
       newType = analyticsAttributes.newType,
@@ -148,8 +196,9 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
   if (node.type !== media || !isImage(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
     return false;
   }
+  var mediaSingleMaxWidth = getMediaSingleMaxWidthForInsertion(view, state.selection.$from.pos);
   if (fg('platform_editor_introduce_insert_media_command')) {
-    var updatedTr = createInsertMediaAsMediaSingleCommand(node.attrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing)({
+    var updatedTr = createInsertMediaAsMediaSingleCommand(node.attrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing, undefined, undefined, mediaSingleMaxWidth)({
       tr: state.tr
     });
     if (updatedTr && dispatch) {
@@ -160,7 +209,7 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
   }
   var mediaSingleAttrs = allowPixelResizing ? {
     widthType: 'pixel',
-    width: getMediaSingleInitialWidth((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : DEFAULT_IMAGE_WIDTH),
+    width: getMediaSingleInitialWidth((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : DEFAULT_IMAGE_WIDTH, mediaSingleMaxWidth),
     layout: 'center'
   } : {};
   var mediaSingleNode = mediaSingle.create(mediaSingleAttrs, node);
@@ -176,10 +225,10 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
     insertMediaVia: insertMediaVia
   })(state, dispatch);
 };
-export var createInsertMediaAsMediaSingleCommand = function createInsertMediaAsMediaSingleCommand(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing, positions, dataConsumerSource) {
-  return function (_ref4) {
-    var _mediaAttrs$__fileMim, _mediaAttrs$width, _mediaAttrs$__fileMim2;
-    var tr = _ref4.tr;
+export var createInsertMediaAsMediaSingleCommand = function createInsertMediaAsMediaSingleCommand(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing, positions, dataConsumerSource, mediaSingleMaxWidth) {
+  return function (_ref6) {
+    var _mediaAttrs$__fileMim, _getPositiveWidth4, _mediaAttrs$width, _mediaAttrs$__fileMim2;
+    var tr = _ref6.tr;
     var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
       mediaSingle = _tr$doc$type$schema$n.mediaSingle,
       media = _tr$doc$type$schema$n.media;
@@ -189,9 +238,10 @@ export var createInsertMediaAsMediaSingleCommand = function createInsertMediaAsM
     if (mediaAttrs.type !== 'external' && !isImage((_mediaAttrs$__fileMim = mediaAttrs.__fileMimeType) !== null && _mediaAttrs$__fileMim !== void 0 ? _mediaAttrs$__fileMim : undefined)) {
       return null;
     }
+    var resolvedMediaSingleMaxWidth = (_getPositiveWidth4 = getPositiveWidth(mediaSingleMaxWidth)) !== null && _getPositiveWidth4 !== void 0 ? _getPositiveWidth4 : getPositiveWidth(getTableCellWidthFromPosition(tr.doc, positions ? positions[0] : tr.selection.from));
     var mediaSingleAttrs = allowPixelResizing ? {
       widthType: 'pixel',
-      width: getMediaSingleInitialWidth((_mediaAttrs$width = mediaAttrs.width) !== null && _mediaAttrs$width !== void 0 ? _mediaAttrs$width : DEFAULT_IMAGE_WIDTH),
+      width: getMediaSingleInitialWidth((_mediaAttrs$width = mediaAttrs.width) !== null && _mediaAttrs$width !== void 0 ? _mediaAttrs$width : DEFAULT_IMAGE_WIDTH, resolvedMediaSingleMaxWidth),
       layout: 'center'
     } : {};
     var dataConsumerMarkType = dataConsumerSource ? tr.doc.type.schema.marks.dataConsumer : undefined;
@@ -224,7 +274,7 @@ var getFileExtension = function getFileExtension(fileName) {
   return undefined;
 };
 export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, widthPluginState, editorAnalyticsAPI, onNodeInserted, insertMediaVia, allowPixelResizing) {
-  var _state$selection$$fro;
+  var _state$selection$$fro, _getMediaSingleMaxWid;
   if (collection === undefined) {
     return false;
   }
@@ -235,7 +285,7 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  var contentWidth = getMaxWidthForNestedNodeNext(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  var contentWidth = (_getMediaSingleMaxWid = getMediaSingleMaxWidthForInsertion(view, state.selection.$from.pos, widthPluginState)) !== null && _getMediaSingleMaxWid !== void 0 ? _getMediaSingleMaxWid : undefined;
   var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert, allowPixelResizing)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
@@ -276,7 +326,7 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
   return true;
 };
 export var changeFromMediaInlineToMediaSingleNode = function changeFromMediaInlineToMediaSingleNode(view, fromNode, widthPluginState, editorAnalyticsAPI, allowPixelResizing) {
-  var _state$selection$$fro2;
+  var _state$selection$$fro2, _getMediaSingleMaxWid2;
   var state = view.state,
     dispatch = view.dispatch;
   var mediaInline = state.schema.nodes.mediaInline;
@@ -288,7 +338,7 @@ export var changeFromMediaInlineToMediaSingleNode = function changeFromMediaInli
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  var contentWidth = getMaxWidthForNestedNodeNext(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  var contentWidth = (_getMediaSingleMaxWid2 = getMediaSingleMaxWidthForInsertion(view, state.selection.$from.pos, widthPluginState)) !== null && _getMediaSingleMaxWid2 !== void 0 ? _getMediaSingleMaxWid2 : undefined;
   var node = replaceWithMediaSingleNode(state.schema, contentWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, allowPixelResizing)(fromNode);
   var fileExtension = getFileExtension(fromNode.attrs.__fileName);
   // should split if media is valid content for the grandparent of the selected node
@@ -329,12 +379,12 @@ var createMediaSingleNode = function createMediaSingleNode(schema, collection, m
       _mediaState$scaleFact = mediaState.scaleFactor,
       scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact,
       fileName = mediaState.fileName;
-    var _ref5 = dimensions || {
+    var _ref7 = dimensions || {
         height: undefined,
         width: undefined
       },
-      width = _ref5.width,
-      height = _ref5.height;
+      width = _ref7.width,
+      height = _ref7.height;
     var _schema$nodes = schema.nodes,
       media = _schema$nodes.media,
       mediaSingle = _schema$nodes.mediaSingle;

package/dist/types/pm-plugins/utils/media-single.d.ts

@@ -9,7 +9,7 @@ import type { MediaState } from '../../types';
 export declare const isMediaSingle: (schema: Schema, fileMimeType?: string) => boolean;
 export type InsertMediaAsMediaSingle = (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
 export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
-export declare const createInsertMediaAsMediaSingleCommand: (mediaAttrs: MediaADFAttrs, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean, positions?: [number, number], dataConsumerSource?: string) => EditorCommand;
+export declare const createInsertMediaAsMediaSingleCommand: (mediaAttrs: MediaADFAttrs, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean, positions?: [number, number], dataConsumerSource?: string, mediaSingleMaxWidth?: number) => EditorCommand;
 export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined, onNodeInserted?: (id: string, selectionPosition: number) => void, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
 export declare const changeFromMediaInlineToMediaSingleNode: (view: EditorView, fromNode: PMNode, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined, allowPixelResizing?: boolean) => boolean;
 export declare const isVideo: MemoizedFn<(fileType?: string) => boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "14.0.0",
+	"version": "14.0.1",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/primitives": "^20.0.0",
 		"@atlaskit/textfield": "^9.0.0",
-		"@atlaskit/tmp-editor-statsig": "^104.0.0",
+		"@atlaskit/tmp-editor-statsig": "^105.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -69,7 +69,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.0.0",
+		"@atlaskit/editor-common": "^116.1.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",