@atlaskit/editor-common 74.5.2 → 74.7.0

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.7.0",
 	"sideEffects": false
 }

package/dist/esm/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/esm/analytics/linking-utils.js

@@ -0,0 +1,74 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from './types';
+export var buildEditLinkPayload = function 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
+  };
+};
+var mapLinkTypeToCardAppearance = function 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 var buildVisitedLinkPayload = function 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 var buildOpenedSettingsPayload = function 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 var unlinkPayload = function 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/esm/card/MediaAndEmbedsToolbar/index.js

@@ -0,0 +1,146 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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`.
+var 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
+}];
+var wrappingIcons = [{
+  id: 'editor.media.wrapLeft',
+  value: 'wrap-left',
+  icon: WrapLeftIcon
+}, {
+  id: 'editor.media.wrapRight',
+  value: 'wrap-right',
+  icon: WrapRightIcon
+}];
+var breakoutIcons = [{
+  value: 'wide',
+  icon: WideIcon
+}, {
+  value: 'full-width',
+  icon: FullWidthIcon
+}];
+var 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
+};
+var getNodeWidth = function getNodeWidth(node, schema) {
+  var embedCard = schema.nodes.embedCard;
+  if (node.type === embedCard) {
+    return node.attrs.originalWidth || DEFAULT_EMBED_CARD_WIDTH;
+  }
+  return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
+};
+var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, analyticsApi) {
+  return function (state, dispatch) {
+    var _ref = state.selection,
+      node = _ref.node;
+    var previousLayoutType = node.attrs.layout;
+    var mediaSingle = state.schema.nodes.mediaSingle;
+    if (!dispatch) {
+      return false;
+    }
+    var widthPluginState = widthPluginDependencyApi === null || widthPluginDependencyApi === void 0 ? void 0 : widthPluginDependencyApi.sharedState.currentState();
+    if (!node || node.type !== nodeType || !widthPluginState) {
+      return false;
+    }
+    var nodeWidth = getNodeWidth(node, state.schema);
+    var newAttrs = alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
+    var 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));
+    var paragraph = tr.doc.type.schema.nodes.paragraph;
+
+    // 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: previousLayoutType,
+        currentLayoutType: layout
+      }
+    })(tr);
+    dispatch(tr);
+    return true;
+  };
+};
+var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) {
+  return icons.map(function (toolbarItem) {
+    var id = toolbarItem.id,
+      value = toolbarItem.value;
+    return {
+      id: id,
+      type: 'button',
+      icon: toolbarItem.icon,
+      title: intl.formatMessage(layoutToMessages[value]),
+      selected: layout === value,
+      onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
+    };
+  });
+};
+var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
+  var nodes = _ref2.nodes;
+  return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand].concat(_toConsumableArray(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
+};
+var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
+  var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
+  var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
+  var selection = state.selection;
+  if (!(selection instanceof NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
+    return [];
+  }
+  var layout = selection.node.attrs.layout;
+  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  var items = [].concat(_toConsumableArray(alignmentToolbarItems), _toConsumableArray(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), _toConsumableArray(wrappingToolbarItems), _toConsumableArray(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), _toConsumableArray(breakOutToolbarItems));
+  return items;
+};
+var getSeparatorBetweenAlignmentAndWrapping = function getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping) {
+  return allowAlignment && allowWrapping ? [{
+    type: 'separator'
+  }] : [];
+};
+var getSeparatorBeforeBreakoutItems = function getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing) {
+  return !allowResizing && (allowAlignment || allowWrapping) ? [{
+    type: 'separator'
+  }] : [];
+};
+export default buildLayoutButtons;

package/dist/esm/card/index.js

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