@atlaskit/editor-common 74.5.2 → 74.7.0

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

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.alignAttributes = void 0;
+exports.calculateSnapPoints = calculateSnapPoints;
+exports.nonWrappedLayouts = exports.isRichMediaInsideOfBlockNode = exports.floatingLayouts = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _prosemirrorUtils = require("prosemirror-utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _MediaSingle = require("../ui/MediaSingle");
+var _grid = require("../ui/MediaSingle/grid");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var nonWrappedLayouts = ['center', 'wide', 'full-width'];
+exports.nonWrappedLayouts = nonWrappedLayouts;
+var floatingLayouts = ['wrap-left', 'wrap-right'];
+exports.floatingLayouts = floatingLayouts;
+var isRichMediaInsideOfBlockNode = function isRichMediaInsideOfBlockNode(view, pos) {
+  if (typeof pos !== 'number' || isNaN(pos) || !view) {
+    return false;
+  }
+  var $pos = view.state.doc.resolve(pos);
+  var _view$state$schema$no = view.state.schema.nodes,
+    expand = _view$state$schema$no.expand,
+    nestedExpand = _view$state$schema$no.nestedExpand,
+    layoutColumn = _view$state$schema$no.layoutColumn;
+  return !!(0, _prosemirrorUtils.findParentNodeOfTypeClosestToPos)($pos, [expand, nestedExpand, layoutColumn]);
+};
+exports.isRichMediaInsideOfBlockNode = isRichMediaInsideOfBlockNode;
+var alignAttributes = function alignAttributes(layout, oldAttrs) {
+  var gridSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 12;
+  var originalWidth = arguments.length > 3 ? arguments[3] : undefined;
+  var lineLength = arguments.length > 4 ? arguments[4] : undefined;
+  var width = oldAttrs.width;
+  var oldLayout = oldAttrs.layout;
+  var oldLayoutIsNonWrapped = nonWrappedLayouts.indexOf(oldLayout) > -1;
+  var newLayoutIsNonWrapped = nonWrappedLayouts.indexOf(layout) > -1;
+  var newLayoutIsWrapped = _grid.wrappedLayouts.indexOf(layout) > -1;
+  var oldLayoutIsWrapped = _grid.wrappedLayouts.indexOf(oldLayout) > -1;
+  if (oldLayoutIsNonWrapped && (0, _MediaSingle.shouldAddDefaultWrappedWidth)(layout, originalWidth, lineLength)) {
+    // 'full-width' or 'wide' or 'center' -> 'wrap-left' or 'wrap-right' or 'align-end' or 'align-start'
+    if (!width || width >= 100 || oldLayout !== 'center' // == 'full-width' or 'wide'
+    ) {
+      width = 50;
+    }
+  } else if (layout !== oldLayout && ['full-width', 'wide'].indexOf(oldLayout) > -1) {
+    // 'full-width' -> 'center' or 'wide'
+    // 'wide' -> 'center' or 'full-width'
+    // unset width
+    width = undefined;
+  } else if (width) {
+    var cols = Math.round(width / 100 * gridSize);
+    var targetCols = cols;
+    if (oldLayoutIsWrapped && newLayoutIsNonWrapped) {
+      // wrap -> center needs to align to even grid
+      targetCols = Math.floor(targetCols / 2) * 2;
+      width = undefined;
+    } else if (oldLayoutIsNonWrapped && newLayoutIsWrapped) {
+      // Can be here only if
+      // 'full-width' or 'wide' or 'center' -> 'wrap-left' or 'wrap-right' or 'align-end' or 'align-start'
+      // AND
+      // !originalWidth || !lineLength || small image
+      // AND
+      // width defined!
+
+      // cannot resize to full column width, and cannot resize to 1 column
+      if (cols <= 1) {
+        targetCols = 2;
+      } else if (cols >= gridSize) {
+        targetCols = 10;
+      }
+    }
+    if (targetCols !== cols) {
+      width = targetCols / gridSize * 100;
+    }
+  }
+  return _objectSpread(_objectSpread({}, oldAttrs), {}, {
+    layout: layout,
+    width: width
+  });
+};
+exports.alignAttributes = alignAttributes;
+function calculateSnapPoints(_ref) {
+  var $pos = _ref.$pos,
+    akEditorWideLayoutWidth = _ref.akEditorWideLayoutWidth,
+    allowBreakoutSnapPoints = _ref.allowBreakoutSnapPoints,
+    containerWidth = _ref.containerWidth,
+    gridSize = _ref.gridSize,
+    gridWidth = _ref.gridWidth,
+    insideInlineLike = _ref.insideInlineLike,
+    insideLayout = _ref.insideLayout,
+    isVideoFile = _ref.isVideoFile,
+    lineLength = _ref.lineLength,
+    offsetLeft = _ref.offsetLeft,
+    wrappedLayout = _ref.wrappedLayout;
+  var snapTargets = [];
+  for (var i = 0; i < gridWidth; i++) {
+    var pxFromColumns = (0, _grid.calcPxFromColumns)(i, lineLength, gridWidth);
+    snapTargets.push(insideLayout ? pxFromColumns : pxFromColumns - offsetLeft);
+  }
+  // full width
+  snapTargets.push(lineLength - offsetLeft);
+  var columns = wrappedLayout || insideInlineLike ? 1 : 2;
+  var minimumWidth = (0, _grid.calcPxFromColumns)(columns, lineLength, gridSize);
+  var snapPoints = snapTargets.filter(function (width) {
+    return width >= minimumWidth;
+  });
+  if (!$pos) {
+    return snapPoints;
+  }
+  snapPoints = isVideoFile ? snapPoints.filter(function (width) {
+    return width > 320;
+  }) : snapPoints;
+  var isTopLevel = $pos.parent.type.name === 'doc';
+  if (isTopLevel && allowBreakoutSnapPoints) {
+    snapPoints.push(akEditorWideLayoutWidth);
+    var fullWidthPoint = containerWidth - _editorSharedStyles.akEditorBreakoutPadding;
+    if (fullWidthPoint > akEditorWideLayoutWidth) {
+      snapPoints.push(fullWidthPoint);
+    }
+  }
+
+  // EDM-1107: Ensure new snapPoints are sorted with existing points
+  snapPoints = snapPoints.sort(function (a, b) {
+    return a - b;
+  });
+  return snapPoints;
+}

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.5.2",
+	"version": "74.7.0",
 	"sideEffects": false
 }

package/dist/es2019/analytics/index.js

@@ -1,3 +1,4 @@
 export { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, BROWSER_FREEZE_INTERACTION_TYPE, CONTENT_COMPONENT, DELETE_DIRECTION, EVENT_TYPE, FLOATING_CONTROLS_TITLE, FULL_WIDTH_MODE, GAP_CURSOR_POSITION, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, LAYOUT_TYPE, LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, LIST_TEXT_SCENARIOS, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST, OUTDENT_SCENARIOS, MODE, PLATFORMS, PUNC, PasteContents, PasteSources, PasteTypes, RESOLVE_METHOD, SELECTION_TYPE, SELECTION_POSITION, SMART_LINK_TYPE, SYMBOL, SmartLinkNodeContexts, TABLE_ACTION, TABLE_BREAKOUT, TARGET_SELECTION_SOURCE, TOOLBAR_ACTION_SUBJECT_ID, TRIGGER_METHOD, USER_CONTEXT } from './types';
 export { fireAnalyticsEvent } from './fire-analytics-event';
-export { getAnalyticsEventsFromTransaction } from './utils';
+export { getAnalyticsEventsFromTransaction } from './utils';
+export { buildEditLinkPayload, buildVisitedLinkPayload, buildOpenedSettingsPayload, unlinkPayload } from './linking-utils';

package/dist/es2019/analytics/linking-utils.js

@@ -0,0 +1,74 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from './types';
+export const buildEditLinkPayload = type => {
+  return {
+    action: ACTION.CLICKED,
+    actionSubject: type === ACTION_SUBJECT_ID.HYPERLINK ? ACTION_SUBJECT.HYPERLINK : ACTION_SUBJECT.SMART_LINK,
+    actionSubjectId: ACTION_SUBJECT_ID.EDIT_LINK,
+    attributes: type !== ACTION_SUBJECT_ID.HYPERLINK ? {
+      display: type
+    } : {},
+    eventType: EVENT_TYPE.UI
+  };
+};
+const mapLinkTypeToCardAppearance = type => {
+  switch (type) {
+    case ACTION_SUBJECT_ID.CARD_INLINE:
+      {
+        return 'inline';
+      }
+    case ACTION_SUBJECT_ID.CARD_BLOCK:
+      {
+        return 'block';
+      }
+    case ACTION_SUBJECT_ID.EMBEDS:
+      {
+        return 'embed';
+      }
+    default:
+      {
+        return 'url';
+      }
+  }
+};
+export const buildVisitedLinkPayload = type => {
+  return type === ACTION_SUBJECT_ID.HYPERLINK ? {
+    action: ACTION.VISITED,
+    actionSubject: ACTION_SUBJECT.HYPERLINK,
+    actionSubjectId: undefined,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR
+    },
+    eventType: EVENT_TYPE.TRACK
+  } : {
+    action: ACTION.VISITED,
+    actionSubject: ACTION_SUBJECT.SMART_LINK,
+    actionSubjectId: type,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+};
+export const buildOpenedSettingsPayload = type => {
+  return {
+    action: ACTION.CLICKED,
+    actionSubject: ACTION_SUBJECT.BUTTON,
+    actionSubjectId: ACTION_SUBJECT_ID.GOTO_SMART_LINK_SETTINGS,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR,
+      display: mapLinkTypeToCardAppearance(type)
+    },
+    eventType: EVENT_TYPE.UI
+  };
+};
+export const unlinkPayload = type => {
+  return {
+    action: ACTION.UNLINK,
+    actionSubject: type === ACTION_SUBJECT_ID.HYPERLINK ? ACTION_SUBJECT.HYPERLINK : ACTION_SUBJECT.SMART_LINK,
+    actionSubjectId: type === ACTION_SUBJECT_ID.HYPERLINK ? undefined : type,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+};

package/dist/es2019/card/MediaAndEmbedsToolbar/index.js

@@ -0,0 +1,161 @@
+import { NodeSelection } from 'prosemirror-state';
+import { hasParentNodeOfType } from 'prosemirror-utils';
+import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
+import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
+import EditorAlignImageRight from '@atlaskit/icon/glyph/editor/align-image-right';
+import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
+import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
+import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
+import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
+import { insideTable } from '../../core-utils';
+import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
+import { alignAttributes, isInLayoutColumn } from '../../utils';
+
+// Workaround as we don't want to import this package into `editor-common`
+// We'll get type errors if this gets out of sync with `editor-plugin-width`.
+const alignmentIcons = [{
+  id: 'editor.media.alignLeft',
+  value: 'align-start',
+  icon: EditorAlignImageLeft
+}, {
+  id: 'editor.media.alignCenter',
+  value: 'center',
+  icon: EditorAlignImageCenter
+}, {
+  id: 'editor.media.alignRight',
+  value: 'align-end',
+  icon: EditorAlignImageRight
+}];
+const wrappingIcons = [{
+  id: 'editor.media.wrapLeft',
+  value: 'wrap-left',
+  icon: WrapLeftIcon
+}, {
+  id: 'editor.media.wrapRight',
+  value: 'wrap-right',
+  icon: WrapRightIcon
+}];
+const breakoutIcons = [{
+  value: 'wide',
+  icon: WideIcon
+}, {
+  value: 'full-width',
+  icon: FullWidthIcon
+}];
+const layoutToMessages = {
+  'wrap-left': toolbarMessages.wrapLeft,
+  center: commonMessages.alignImageCenter,
+  'wrap-right': toolbarMessages.wrapRight,
+  wide: commonMessages.layoutWide,
+  'full-width': commonMessages.layoutFullWidth,
+  'align-end': commonMessages.alignImageRight,
+  'align-start': commonMessages.alignImageLeft
+};
+const getNodeWidth = (node, schema) => {
+  const {
+    embedCard
+  } = schema.nodes;
+  if (node.type === embedCard) {
+    return node.attrs.originalWidth || DEFAULT_EMBED_CARD_WIDTH;
+  }
+  return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
+};
+const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) => {
+  return (state, dispatch) => {
+    const {
+      node
+    } = state.selection;
+    const {
+      layout: previousLayoutType
+    } = node.attrs;
+    const {
+      mediaSingle
+    } = state.schema.nodes;
+    if (!dispatch) {
+      return false;
+    }
+    const widthPluginState = widthPluginDependencyApi === null || widthPluginDependencyApi === void 0 ? void 0 : widthPluginDependencyApi.sharedState.currentState();
+    if (!node || node.type !== nodeType || !widthPluginState) {
+      return false;
+    }
+    const nodeWidth = getNodeWidth(node, state.schema);
+    const newAttrs = alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
+    const tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
+    tr.setMeta('scrollIntoView', false);
+    // when image captions are enabled, the wrong node gets selected after
+    // setNodeMarkup is called
+    tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
+    const {
+      doc: {
+        type: {
+          schema: {
+            nodes: {
+              paragraph
+            }
+          }
+        }
+      }
+    } = tr;
+
+    // see https://product-fabric.atlassian.net/browse/ED-15518 insert a new paragraph when an embedded card is wrapped left or right
+    if (layout.startsWith('wrap') && paragraph && !tr.doc.nodeAt(state.selection.to) && (insideTable(state) || isInLayoutColumn(state))) {
+      tr.insert(state.selection.to, paragraph.createAndFill());
+    }
+    analyticsApi === null || analyticsApi === void 0 ? void 0 : analyticsApi.attachAnalyticsEvent({
+      eventType: EVENT_TYPE.TRACK,
+      action: ACTION.SELECTED,
+      actionSubject: ACTION_SUBJECT[node.type === mediaSingle ? 'MEDIA_SINGLE' : 'EMBEDS'],
+      actionSubjectId: ACTION_SUBJECT_ID.RICH_MEDIA_LAYOUT,
+      attributes: {
+        previousLayoutType,
+        currentLayoutType: layout
+      }
+    })(tr);
+    dispatch(tr);
+    return true;
+  };
+};
+const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) => icons.map(toolbarItem => {
+  const {
+    id,
+    value
+  } = toolbarItem;
+  return {
+    id: id,
+    type: 'button',
+    icon: toolbarItem.icon,
+    title: intl.formatMessage(layoutToMessages[value]),
+    selected: layout === value,
+    onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
+  };
+});
+const shouldHideLayoutToolbar = (selection, {
+  nodes
+}, allowResizingInTables) => {
+  return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand, ...(allowResizingInTables ? [] : [nodes.table])].filter(Boolean))(selection);
+};
+const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true) => {
+  const {
+    selection
+  } = state;
+  if (!(selection instanceof NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
+    return [];
+  }
+  const {
+    layout
+  } = selection.node.attrs;
+  const alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  const wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  const breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  const items = [...alignmentToolbarItems, ...getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping), ...wrappingToolbarItems, ...getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing), ...breakOutToolbarItems];
+  return items;
+};
+const getSeparatorBetweenAlignmentAndWrapping = (allowAlignment, allowWrapping) => allowAlignment && allowWrapping ? [{
+  type: 'separator'
+}] : [];
+const getSeparatorBeforeBreakoutItems = (allowAlignment, allowWrapping, allowResizing) => !allowResizing && (allowAlignment || allowWrapping) ? [{
+  type: 'separator'
+}] : [];
+export default buildLayoutButtons;

package/dist/es2019/card/index.js

@@ -1 +1,2 @@
-export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
+export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
+export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';

package/dist/es2019/messages/index.js

@@ -1,9 +1,11 @@
 import { defineMessages } from 'react-intl-next';
 export { codeBidiWarningMessages } from './codeBidiWarning';
 export { linkMessages } from './link';
+export { linkToolbarMessages } from './link-toolbar';
 export { unsupportedContentMessages } from './unsupportedContent';
 export { codeBlockButtonMessages } from './codeBlockButton';
 export { toolbarInsertBlockMessages } from './insert-block';
+export { toolbarMessages as mediaAndEmbedToolbarMessages } from './media-and-embed-toolbar';
 export default defineMessages({
   layoutFixedWidth: {
     id: 'fabric.editor.layoutFixedWidth',

package/dist/es2019/messages/link-toolbar.js

@@ -0,0 +1,53 @@
+import { defineMessages } from 'react-intl-next';
+export const linkToolbarMessages = defineMessages({
+  addLink: {
+    id: 'fabric.editor.mediaAddLink',
+    defaultMessage: 'Add link',
+    description: 'Add link'
+  },
+  unableToOpenLink: {
+    id: 'fabric.editor.unableToOpenLink',
+    defaultMessage: 'Unable to open this link',
+    description: 'Unable to open this link'
+  },
+  unlink: {
+    id: 'fabric.editor.unlink',
+    defaultMessage: 'Unlink',
+    description: 'Removes the hyperlink but keeps your text.'
+  },
+  editLink: {
+    id: 'fabric.editor.editLink',
+    defaultMessage: 'Edit link',
+    description: 'Edit the link, update display text'
+  },
+  placeholder: {
+    id: 'fabric.editor.hyperlinkToolbarPlaceholder',
+    defaultMessage: 'Paste or search for link',
+    description: 'Paste or search for link'
+  },
+  linkPlaceholder: {
+    id: 'fabric.editor.linkPlaceholder',
+    defaultMessage: 'Paste link',
+    description: 'Create a new link by pasting a URL.'
+  },
+  linkAddress: {
+    id: 'fabric.editor.linkAddress',
+    defaultMessage: 'Link address',
+    description: 'Insert the address of the link'
+  },
+  invalidLink: {
+    id: 'fabric.editor.invalidLink',
+    defaultMessage: 'Please enter a valid link.',
+    description: 'Please enter a valid link.'
+  },
+  emptyLink: {
+    id: 'fabric.editor.emptyLink',
+    defaultMessage: 'Please enter a link.',
+    description: 'Please enter a link.'
+  },
+  settingsLink: {
+    id: 'fabric.editor.settingsLinks',
+    defaultMessage: 'Go to Link Preferences',
+    description: 'Go to Link Preferences'
+  }
+});

package/dist/es2019/messages/media-and-embed-toolbar.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export const toolbarMessages = defineMessages({
+  wrapLeft: {
+    id: 'fabric.editor.wrapLeft',
+    defaultMessage: 'Wrap left',
+    description: 'Aligns your image to the left and wraps text around it.'
+  },
+  wrapRight: {
+    id: 'fabric.editor.wrapRight',
+    defaultMessage: 'Wrap right',
+    description: 'Aligns your image to the right and wraps text around it.'
+  }
+});

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "74.5.2";
+const packageVersion = "74.7.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/node-width/index.js

@@ -1,10 +1,15 @@
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
-import { akEditorFullWidthLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { BODIED_EXT_PADDING } from '../styles/shared/extension';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles/shared/layout';
 import { absoluteBreakoutWidth } from '../utils/breakout';
+export const layoutToWidth = {
+  default: akEditorDefaultLayoutWidth,
+  wide: akEditorWideLayoutWidth,
+  'full-width': akEditorFullWidthLayoutWidth
+};
 
 /**
  * Calculates width of parent node of a nested node (inside layouts, extension)
@@ -78,4 +83,10 @@ const getNestedParentNode = (tablePos, state) => {
 };
 const calcBreakoutNodeWidth = (layout, containerWidth, isFullWidthModeEnabled) => {
   return isFullWidthModeEnabled ? Math.min(containerWidth.lineLength, akEditorFullWidthLayoutWidth) : absoluteBreakoutWidth(layout, containerWidth.width);
+};
+export const getTableContainerWidth = node => {
+  if (node.attrs.width) {
+    return node.attrs.width;
+  }
+  return layoutToWidth[node.attrs.layout];
 };