@atlaskit/editor-common 74.5.2 → 74.6.0

package/dist/es2019/ui/ResizerLegacy/index.js

@@ -0,0 +1,191 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import classnames from 'classnames';
+import { Resizable } from 're-resizable';
+import { akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
+import { richMediaClassName } from '../../styles';
+import { gridTypeForLayout } from '../../utils';
+import { handleSides, snapTo } from './utils';
+const getResizeAnalyticsEvent = (type, size, layout) => {
+  const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
+  return {
+    action: ACTION.EDITED,
+    actionSubject,
+    actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
+    attributes: {
+      size,
+      layout
+    },
+    eventType: EVENT_TYPE.UI
+  };
+};
+const getWidthFromSnapPoints = (width, snapPoints) => {
+  if (snapPoints.length) {
+    return Math.min(Math.max(width, snapPoints[0]), snapPoints[snapPoints.length - 1]);
+  }
+  return width;
+};
+export default class Resizer extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "resizable", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "state", {
+      isResizing: false
+    });
+    _defineProperty(this, "handleResizeStart", event => {
+      const {
+        innerPadding = 0,
+        highlights,
+        displayGrid,
+        layout,
+        width,
+        snapPoints
+      } = this.props;
+
+      // prevent creating a drag event on Firefox
+      event.preventDefault();
+      this.setState({
+        isResizing: true
+      }, () => {
+        const newHighlights = highlights(width + innerPadding, snapPoints);
+        displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, gridTypeForLayout(layout), newHighlights);
+      });
+    });
+    _defineProperty(this, "handleResize", (_event, _direction, _elementRef, delta) => {
+      const {
+        highlights,
+        calcNewSize,
+        scaleFactor,
+        snapPoints,
+        displayGrid,
+        layout,
+        updateSize,
+        innerPadding = 0
+      } = this.props;
+      const resizable = this.resizable.current;
+      const {
+        isResizing
+      } = this.state;
+      if (!resizable || !resizable.state.original || !isResizing) {
+        return;
+      }
+      const newWidth = getWidthFromSnapPoints(resizable.state.original.width + delta.width * (scaleFactor || 1), snapPoints);
+      const newSize = calcNewSize(newWidth + innerPadding, false);
+      if (newSize.layout !== layout) {
+        updateSize(newSize.width, newSize.layout);
+      }
+      const newHighlights = highlights(newWidth, snapPoints);
+      displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, gridTypeForLayout(newSize.layout), newHighlights);
+      resizable.updateSize({
+        width: newWidth,
+        height: 'auto'
+      });
+      resizable.setState({
+        isResizing: true
+      });
+    });
+    _defineProperty(this, "handleResizeStop", (_event, _direction, _elementRef, delta) => {
+      const {
+        highlights,
+        calcNewSize,
+        snapPoints,
+        displayGrid,
+        layout,
+        updateSize,
+        dispatchAnalyticsEvent,
+        nodeType
+      } = this.props;
+      const resizable = this.resizable.current;
+      const {
+        isResizing
+      } = this.state;
+      if (!resizable || !resizable.state.original || !isResizing) {
+        return;
+      }
+      const newWidth = getWidthFromSnapPoints(resizable.state.original.width + delta.width, snapPoints);
+      const snapWidth = snapTo(newWidth, snapPoints);
+      const newSize = calcNewSize(snapWidth, true);
+      const newHighlights = highlights(newWidth, snapPoints);
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, newSize.width, newSize.layout));
+      }
+      // show committed grid size
+      displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, gridTypeForLayout(newSize.layout), newHighlights);
+      this.setState({
+        isResizing: false
+      }, () => {
+        updateSize(newSize.width, newSize.layout);
+        displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(false, gridTypeForLayout(layout), []);
+      });
+    });
+  }
+  render() {
+    const handleStyles = {};
+    const handles = {};
+    const handleComponent = {};
+    const {
+      innerPadding = 0,
+      width,
+      pctWidth,
+      selected,
+      layout,
+      enable,
+      children,
+      ratio,
+      handleComponentFunc
+    } = this.props;
+    const {
+      isResizing
+    } = this.state;
+    handleSides.forEach(side => {
+      handles[side] = `richMedia-resize-handle-${side}`;
+      handleStyles[side] = {
+        width: '24px',
+        [side]: `${-13 - innerPadding}px`,
+        zIndex: akRichMediaResizeZIndex,
+        pointerEvents: 'auto'
+      };
+      const sideHandleComponent = handleComponentFunc && handleComponentFunc(side);
+      if (sideHandleComponent) {
+        handleComponent[side] = sideHandleComponent;
+      }
+    });
+    const className = classnames(richMediaClassName, `image-${layout}`, this.props.className, {
+      'is-resizing': isResizing,
+      'not-resized': !pctWidth,
+      'richMedia-selected': selected,
+      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
+    });
+    let handleWrapperStyle;
+    if (ratio) {
+      handleWrapperStyle = {
+        position: 'absolute',
+        width: '100%',
+        paddingBottom: `${ratio}%`,
+        top: 0,
+        pointerEvents: 'none'
+      };
+    }
+
+    // Ideally, Resizable would let you pass in the component rather than
+    // the div. For now, we just apply the same styles using CSS
+    return /*#__PURE__*/React.createElement(Resizable, {
+      ref: this.resizable,
+      size: {
+        width,
+        // just content itself (no paddings)
+        height: 'auto'
+      },
+      className: className,
+      handleClasses: handles,
+      handleStyles: handleStyles,
+      handleWrapperStyle: handleWrapperStyle,
+      handleComponent: handleComponent,
+      enable: enable,
+      onResize: this.handleResize,
+      onResizeStop: this.handleResizeStop,
+      onResizeStart: this.handleResizeStart
+    }, children);
+  }
+}

package/dist/es2019/ui/ResizerLegacy/styled.js

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import { MediaSingleDimensionHelper } from '../MediaSingle/styled';
+export const wrapperStyle = props => css`
+  & > div {
+    ${MediaSingleDimensionHelper(props)};
+    position: relative;
+    clear: both;
+
+    > div {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+    }
+  }
+`;

package/dist/es2019/ui/ResizerLegacy/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/ResizerLegacy/utils.js

@@ -0,0 +1,12 @@
+export const snapTo = (target, points) => {
+  return points.length === 0 ?
+  // extreme last case if there are no points somehow
+  target : points.reduce((point, closest) => {
+    return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
+  });
+};
+export const handleSides = ['left', 'right'];
+export const imageAlignmentMap = {
+  left: 'start',
+  right: 'end'
+};

package/dist/es2019/ui/index.js

@@ -18,4 +18,8 @@ export { clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle
 export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';
 export { default as IntlProviderIfMissingWrapper } from './IntlProviderIfMissingWrapper';
 export { default as FloatingToolbarButton } from './FloatingToolbar/Button';
-export { ContextPanelProvider, ContextPanelWidthProvider, ContextPanelConsumer, ContextPanel } from './ContextPanel/context';
+export { RECENT_SEARCH_WIDTH_IN_PX, RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, LINKPICKER_HEIGHT_IN_PX } from './LinkSearch/const';
+export { ContextPanelProvider, ContextPanelWidthProvider, ContextPanelConsumer, ContextPanel } from './ContextPanel/context';
+export { default as Resizer } from './ResizerLegacy';
+export { snapTo, handleSides, imageAlignmentMap } from './ResizerLegacy/utils';
+export { wrapperStyle } from './ResizerLegacy/styled';

package/dist/es2019/utils/document.js

@@ -0,0 +1,253 @@
+import { Node } from 'prosemirror-model';
+import { transformDedupeMarks, transformIndentationMarks, transformInvalidMediaContent, transformMediaLinkMarks, transformNodesMissingContent, transformTextLinkCodeMarks } from '@atlaskit/adf-utils/transforms';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
+import { isEmptyParagraph } from './editor-core-utils';
+import { sanitizeNodeForPrivacy } from './filter/privacy-filter';
+import { findAndTrackUnsupportedContentNodes } from './track-unsupported-content';
+import { validateADFEntity } from './validate-using-spec';
+export const getStepRange = transaction => {
+  let from = -1;
+  let to = -1;
+  transaction.mapping.maps.forEach((stepMap, index) => {
+    stepMap.forEach((oldStart, oldEnd) => {
+      const newStart = transaction.mapping.slice(index).map(oldStart, -1);
+      const newEnd = transaction.mapping.slice(index).map(oldEnd);
+      from = newStart < from || from === -1 ? newStart : from;
+      to = newEnd > to || to === -1 ? newEnd : to;
+    });
+  });
+  if (from !== -1) {
+    return {
+      from,
+      to
+    };
+  }
+  return null;
+};
+
+// Checks to see if the parent node is the document, ie not contained within another entity
+export function hasDocAsParent($anchor) {
+  return $anchor.depth === 1;
+}
+
+/**
+ * Checks if a node looks like an empty document
+ */
+export function isEmptyDocument(node) {
+  const nodeChild = node.content.firstChild;
+  if (node.childCount !== 1 || !nodeChild) {
+    return false;
+  }
+  return isEmptyParagraph(nodeChild);
+}
+export function bracketTyped(state) {
+  const {
+    selection
+  } = state;
+  const {
+    $cursor,
+    $anchor
+  } = selection;
+  if (!$cursor) {
+    return false;
+  }
+  const node = $cursor.nodeBefore;
+  if (!node) {
+    return false;
+  }
+  if (node.type.name === 'text' && node.text === '{') {
+    const paragraphNode = $anchor.node();
+    return paragraphNode.marks.length === 0 && hasDocAsParent($anchor);
+  }
+  return false;
+}
+export function nodesBetweenChanged(tr, f, startPos) {
+  const stepRange = getStepRange(tr);
+  if (!stepRange) {
+    return;
+  }
+  tr.doc.nodesBetween(stepRange.from, stepRange.to, f, startPos);
+}
+export function processRawValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
+  if (!value) {
+    return;
+  }
+  let node;
+  if (typeof value === 'string') {
+    try {
+      if (contentTransformer) {
+        const doc = contentTransformer.parse(value);
+        node = doc.toJSON();
+      } else {
+        node = JSON.parse(value);
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(`Error processing value: ${value} isn't a valid JSON`);
+      return;
+    }
+  } else {
+    node = value;
+  }
+  if (Array.isArray(node)) {
+    // eslint-disable-next-line no-console
+    console.error(`Error processing value: ${node} is an array, but it must be an object.`);
+    return;
+  }
+  try {
+    // ProseMirror always require a child under doc
+    if (node.type === 'doc') {
+      if (Array.isArray(node.content) && node.content.length === 0) {
+        node.content.push({
+          type: 'paragraph',
+          content: []
+        });
+      }
+      // Just making sure doc is always valid
+      if (!node.version) {
+        node.version = 1;
+      }
+    }
+    if (contentTransformer) {
+      return Node.fromJSON(schema, node);
+    }
+
+    // link mark on mediaSingle is deprecated, need to move link mark to child media node
+    // https://product-fabric.atlassian.net/browse/ED-14043
+    let {
+      transformedAdf,
+      isTransformed
+    } = transformMediaLinkMarks(node);
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.MEDIA_LINK_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+
+    // See: HOT-97965 https://product-fabric.atlassian.net/browse/ED-14400
+    // We declared in code mark spec that links and marks should not co-exist on
+    // text nodes. This util strips code marks from bad text nodes and preserves links.
+    // Otherwise, prosemirror will try to repair the invalid document by stripping links
+    // and preserving code marks during content changes.
+    ({
+      transformedAdf,
+      isTransformed
+    } = transformTextLinkCodeMarks(transformedAdf));
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.TEXT_LINK_MARK_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+    let discardedMarks = [];
+    ({
+      transformedAdf,
+      isTransformed,
+      discardedMarks
+    } = transformDedupeMarks(transformedAdf));
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.DEDUPE_MARKS_TRANSFORMED_V2,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          /** UGC WARNING
+           *
+           * DO NOT include the `mark` attributes inside, we map here to only
+           * extract the mark type as that is the only non-UGC safe information
+           * that we can add to event-attributes
+           *
+           */
+          discardedMarkTypes: discardedMarks.map(mark => mark.type)
+        }
+      });
+    }
+    ({
+      transformedAdf,
+      isTransformed
+    } = transformNodesMissingContent(transformedAdf));
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.NODES_MISSING_CONTENT_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+    ({
+      transformedAdf,
+      isTransformed
+    } = transformIndentationMarks(transformedAdf));
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.INDENTATION_MARKS_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+    ({
+      transformedAdf,
+      isTransformed
+    } = transformInvalidMediaContent(transformedAdf));
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.INVALID_MEDIA_CONTENT_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+    const entity = validateADFEntity(schema, transformedAdf || node, dispatchAnalyticsEvent);
+    let newEntity = maySanitizePrivateContent(entity, providerFactory, sanitizePrivateContent);
+    const parsedDoc = Node.fromJSON(schema, newEntity);
+
+    // throws an error if the document is invalid
+    try {
+      parsedDoc.check();
+    } catch (err) {
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          action: ACTION.INVALID_PROSEMIRROR_DOCUMENT,
+          actionSubject: ACTION_SUBJECT.EDITOR,
+          eventType: EVENT_TYPE.OPERATIONAL,
+          attributes: {
+            errorStack: err instanceof Error ? err.stack : String(err)
+          }
+        });
+      }
+      throw err;
+    }
+    if (dispatchAnalyticsEvent) {
+      findAndTrackUnsupportedContentNodes(parsedDoc, schema, dispatchAnalyticsEvent);
+    }
+    return parsedDoc;
+  } catch (e) {
+    if (dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.DOCUMENT_PROCESSING_ERROR,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        nonPrivacySafeAttributes: {
+          errorStack: e instanceof Error ? e.stack : String(e)
+        }
+      });
+    }
+
+    // eslint-disable-next-line no-console
+    console.error(`Error processing document:\n${e instanceof Error ? e.message : String(e)}\n\n`, JSON.stringify(node));
+    if (isProseMirrorSchemaCheckError(e)) {
+      throw e;
+    }
+    return;
+  }
+}
+function isProseMirrorSchemaCheckError(error) {
+  return error instanceof RangeError && (!!error.message.match(/^Invalid collection of marks for node/) || !!error.message.match(/^Invalid content for node/));
+}
+const maySanitizePrivateContent = (entity, providerFactory, sanitizePrivateContent) => {
+  if (sanitizePrivateContent && providerFactory) {
+    return sanitizeNodeForPrivacy(entity, providerFactory);
+  }
+  return entity;
+};

package/dist/es2019/utils/editor-core-utils.js

@@ -1,5 +1,6 @@
 import { NodeSelection, TextSelection } from 'prosemirror-state';
 import { ReplaceAroundStep, ReplaceStep } from 'prosemirror-transform';
+import { hasParentNodeOfType } from 'prosemirror-utils';
 import { closest } from './dom';
 
 /**
@@ -78,4 +79,7 @@ export const isValidPosition = (pos, state) => {
     return true;
   }
   return false;
+};
+export const isInLayoutColumn = state => {
+  return hasParentNodeOfType(state.schema.nodes.layoutSection)(state.selection);
 };

package/dist/es2019/utils/filter/privacy-filter.js

@@ -0,0 +1,47 @@
+import { traverse } from '@atlaskit/adf-utils/traverse';
+import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
+/**
+ * Sanitises a document where some content should not be in the document (e.g. mention names).
+ *
+ * It is expected that these names we be resolved separately (e.g. when rendering
+ * a node view).
+ */
+export function sanitizeNodeForPrivacy(json, providerFactory) {
+  const mentionNames = new Map();
+  let hasCacheableMentions = false;
+  const sanitizedJSON = traverse(json, {
+    mention: node => {
+      if (node.attrs && node.attrs.text) {
+        hasCacheableMentions = true;
+        // Remove @ prefix
+        const text = node.attrs.text;
+        const name = text.startsWith('@') ? text.slice(1) : text;
+        mentionNames.set(node.attrs.id, name);
+      }
+      return {
+        ...node,
+        attrs: {
+          ...node.attrs,
+          text: ''
+        }
+      };
+    }
+  });
+  if (hasCacheableMentions && providerFactory) {
+    const handler = (_name, providerPromise) => {
+      if (providerPromise) {
+        providerPromise.then(provider => {
+          if (isResolvingMentionProvider(provider)) {
+            mentionNames.forEach((name, id) => {
+              provider.cacheMentionName(id, name);
+            });
+            mentionNames.clear();
+            providerFactory.unsubscribe('mentionProvider', handler);
+          }
+        });
+      }
+    };
+    providerFactory.subscribe('mentionProvider', handler);
+  }
+  return sanitizedJSON;
+}

package/dist/es2019/utils/index.js

@@ -3,7 +3,7 @@ export { getExtensionLozengeData } from './macro';
 export { default as browser } from './browser';
 export { default as ErrorReporter } from './error-reporter';
 export { isPastDate, timestampToIsoFormat, timestampToString, timestampToTaskContext, timestampToUTCDate, todayTimestampInUTC } from './date';
-export { isElementInTableCell, isTextSelection, isLastItemMediaGroup, setNodeSelection, setTextSelection, nonNullable, stepAddsOneOf, stepHasSlice, extractSliceFromStep, isValidPosition, isEmptyParagraph } from './editor-core-utils';
+export { isElementInTableCell, isTextSelection, isLastItemMediaGroup, setNodeSelection, setTextSelection, nonNullable, stepAddsOneOf, stepHasSlice, extractSliceFromStep, isValidPosition, isEmptyParagraph, isInLayoutColumn } from './editor-core-utils';
 export { withImageLoader } from './imageLoader';
 export { absoluteBreakoutWidth, calcBreakoutWidth, calcWideWidth, breakoutConsts, calculateBreakoutStyles, calcBreakoutWidthPx } from './breakout';
 export { findChangedNodesFromTransaction, validNode, validateNodes, isType, isParagraph, isText, isLinkMark, SelectedState, isNodeSelectedOrInRange, isSupportedInParent, isMediaNode, isNodeBeforeMediaNode } from './nodes';
@@ -39,4 +39,7 @@ export { isFromCurrentDomain, LinkMatcher, normalizeUrl, linkifyContent, getLink
 
 // prosemirror-history does not export its plugin key
 export const pmHistoryPluginKey = 'history$';
-export { gridTypeForLayout } from './grid';
+export { gridTypeForLayout } from './grid';
+export { nodesBetweenChanged, getStepRange, isEmptyDocument, processRawValue, hasDocAsParent, bracketTyped } from './document';
+export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes } from './rich-media-utils';
+export { sanitizeNodeForPrivacy } from './filter/privacy-filter';

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

@@ -0,0 +1,109 @@
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
+import { shouldAddDefaultWrappedWidth } from '../ui/MediaSingle';
+import { calcPxFromColumns, wrappedLayouts } from '../ui/MediaSingle/grid';
+export const nonWrappedLayouts = ['center', 'wide', 'full-width'];
+export const floatingLayouts = ['wrap-left', 'wrap-right'];
+export const isRichMediaInsideOfBlockNode = (view, pos) => {
+  if (typeof pos !== 'number' || isNaN(pos) || !view) {
+    return false;
+  }
+  const $pos = view.state.doc.resolve(pos);
+  const {
+    expand,
+    nestedExpand,
+    layoutColumn
+  } = view.state.schema.nodes;
+  return !!findParentNodeOfTypeClosestToPos($pos, [expand, nestedExpand, layoutColumn]);
+};
+export const alignAttributes = (layout, oldAttrs, gridSize = 12, originalWidth, lineLength) => {
+  let width = oldAttrs.width;
+  const oldLayout = oldAttrs.layout;
+  const oldLayoutIsNonWrapped = nonWrappedLayouts.indexOf(oldLayout) > -1;
+  const newLayoutIsNonWrapped = nonWrappedLayouts.indexOf(layout) > -1;
+  const newLayoutIsWrapped = wrappedLayouts.indexOf(layout) > -1;
+  const oldLayoutIsWrapped = wrappedLayouts.indexOf(oldLayout) > -1;
+  if (oldLayoutIsNonWrapped && 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) {
+    const cols = Math.round(width / 100 * gridSize);
+    let 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 {
+    ...oldAttrs,
+    layout,
+    width
+  };
+};
+export function calculateSnapPoints({
+  $pos,
+  akEditorWideLayoutWidth,
+  allowBreakoutSnapPoints,
+  containerWidth,
+  gridSize,
+  gridWidth,
+  insideInlineLike,
+  insideLayout,
+  isVideoFile,
+  lineLength,
+  offsetLeft,
+  wrappedLayout
+}) {
+  const snapTargets = [];
+  for (let i = 0; i < gridWidth; i++) {
+    const pxFromColumns = calcPxFromColumns(i, lineLength, gridWidth);
+    snapTargets.push(insideLayout ? pxFromColumns : pxFromColumns - offsetLeft);
+  }
+  // full width
+  snapTargets.push(lineLength - offsetLeft);
+  const columns = wrappedLayout || insideInlineLike ? 1 : 2;
+  const minimumWidth = calcPxFromColumns(columns, lineLength, gridSize);
+  let snapPoints = snapTargets.filter(width => width >= minimumWidth);
+  if (!$pos) {
+    return snapPoints;
+  }
+  snapPoints = isVideoFile ? snapPoints.filter(width => width > 320) : snapPoints;
+  const isTopLevel = $pos.parent.type.name === 'doc';
+  if (isTopLevel && allowBreakoutSnapPoints) {
+    snapPoints.push(akEditorWideLayoutWidth);
+    const fullWidthPoint = containerWidth - akEditorBreakoutPadding;
+    if (fullWidthPoint > akEditorWideLayoutWidth) {
+      snapPoints.push(fullWidthPoint);
+    }
+  }
+
+  // EDM-1107: Ensure new snapPoints are sorted with existing points
+  snapPoints = snapPoints.sort((a, b) => a - b);
+  return snapPoints;
+}

package/dist/es2019/version.json

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