@atlaskit/editor-common 74.32.1 → 74.34.0

package/dist/es2019/utils/commands.js

@@ -1,7 +1,11 @@
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics';
+import { withAnalytics } from '../editor-analytics';
 import { GapCursorSelection } from '../selection';
 import { isEmptyParagraph } from './editor-core-utils';
-const filter = (predicates, cmd) => {
+import { isMediaNode } from './nodes';
+export const filter = (predicates, cmd) => {
   return function (state, dispatch, view) {
     if (!Array.isArray(predicates)) {
       predicates = [predicates];
@@ -51,6 +55,173 @@ export const walkPrevNode = $startPos => {
     foundNode: $pos.pos > 0
   };
 };
+export function insertNewLine() {
+  return function (state, dispatch) {
+    const {
+      $from
+    } = state.selection;
+    const parent = $from.parent;
+    const {
+      hardBreak
+    } = state.schema.nodes;
+    if (hardBreak) {
+      const hardBreakNode = hardBreak.createChecked();
+      if (parent && parent.type.validContent(Fragment.from(hardBreakNode))) {
+        if (dispatch) {
+          dispatch(state.tr.replaceSelectionWith(hardBreakNode, false));
+        }
+        return true;
+      }
+    }
+    if (state.selection instanceof TextSelection) {
+      if (dispatch) {
+        dispatch(state.tr.insertText('\n'));
+      }
+      return true;
+    }
+    return false;
+  };
+}
+export const insertNewLineWithAnalytics = editorAnalyticsAPI => withAnalytics(editorAnalyticsAPI, {
+  action: ACTION.INSERTED,
+  actionSubject: ACTION_SUBJECT.TEXT,
+  actionSubjectId: ACTION_SUBJECT_ID.LINE_BREAK,
+  eventType: EVENT_TYPE.TRACK
+})(insertNewLine());
+export const createNewParagraphAbove = (state, dispatch) => {
+  const append = false;
+  if (!canMoveUp(state) && canCreateParagraphNear(state)) {
+    createParagraphNear(append)(state, dispatch);
+    return true;
+  }
+  return false;
+};
+export const createNewParagraphBelow = (state, dispatch) => {
+  const append = true;
+  if (!canMoveDown(state) && canCreateParagraphNear(state)) {
+    createParagraphNear(append)(state, dispatch);
+    return true;
+  }
+  return false;
+};
+function canCreateParagraphNear(state) {
+  const {
+    selection: {
+      $from
+    }
+  } = state;
+  const node = $from.node($from.depth);
+  const insideCodeBlock = !!node && node.type === state.schema.nodes.codeBlock;
+  const isNodeSelection = state.selection instanceof NodeSelection;
+  return $from.depth > 1 || isNodeSelection || insideCodeBlock;
+}
+export function createParagraphNear(append = true) {
+  return function (state, dispatch) {
+    const paragraph = state.schema.nodes.paragraph;
+    if (!paragraph) {
+      return false;
+    }
+    let insertPos;
+    if (state.selection instanceof TextSelection) {
+      if (topLevelNodeIsEmptyTextBlock(state)) {
+        return false;
+      }
+      insertPos = getInsertPosFromTextBlock(state, append);
+    } else {
+      insertPos = getInsertPosFromNonTextBlock(state, append);
+    }
+    const tr = state.tr.insert(insertPos, paragraph.createAndFill());
+    tr.setSelection(TextSelection.create(tr.doc, insertPos + 1));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}
+function getInsertPosFromTextBlock(state, append) {
+  const {
+    $from,
+    $to
+  } = state.selection;
+  let pos;
+  if (!append) {
+    pos = $from.start(0);
+  } else {
+    pos = $to.end(0);
+  }
+  return pos;
+}
+function getInsertPosFromNonTextBlock(state, append) {
+  const {
+    $from,
+    $to
+  } = state.selection;
+  const nodeAtSelection = state.selection instanceof NodeSelection && state.doc.nodeAt(state.selection.$anchor.pos);
+  const isMediaSelection = nodeAtSelection && nodeAtSelection.type.name === 'mediaGroup';
+  let pos;
+  if (!append) {
+    // The start position is different with text block because it starts from 0
+    pos = $from.start($from.depth);
+    // The depth is different with text block because it starts from 0
+    pos = $from.depth > 0 && !isMediaSelection ? pos - 1 : pos;
+  } else {
+    pos = $to.end($to.depth);
+    pos = $to.depth > 0 && !isMediaSelection ? pos + 1 : pos;
+  }
+  return pos;
+}
+function topLevelNodeIsEmptyTextBlock(state) {
+  const topLevelNode = state.selection.$from.node(1);
+  return topLevelNode.isTextblock && topLevelNode.type !== state.schema.nodes.codeBlock && topLevelNode.nodeSize === 2;
+}
+function canMoveUp(state) {
+  const {
+    selection
+  } = state;
+  /**
+   * If there's a media element on the selection it will use a gap cursor to move
+   */
+  if (selection instanceof NodeSelection && isMediaNode(selection.node)) {
+    return true;
+  }
+  if (selection instanceof TextSelection) {
+    if (!selection.empty) {
+      return true;
+    }
+  }
+  return !atTheBeginningOfDoc(state);
+}
+function canMoveDown(state) {
+  const {
+    selection
+  } = state;
+
+  /**
+   * If there's a media element on the selection it will use a gap cursor to move
+   */
+  if (selection instanceof NodeSelection && isMediaNode(selection.node)) {
+    return true;
+  }
+  if (selection instanceof TextSelection) {
+    if (!selection.empty) {
+      return true;
+    }
+  }
+  return !atTheEndOfDoc(state);
+}
+export function atTheEndOfDoc(state) {
+  const {
+    selection,
+    doc
+  } = state;
+  return doc.nodeSize - selection.$to.pos - 2 === selection.$to.depth;
+}
+export function atTheBeginningOfDoc(state) {
+  const {
+    selection
+  } = state;
+  return selection.$from.pos === selection.$from.depth;
+}
 
 /**
  * If the selection is empty, is inside a paragraph node and `canNextNodeMoveUp` is true then delete current paragraph

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

@@ -85,4 +85,49 @@ export const isValidPosition = (pos, state) => {
 };
 export const isInLayoutColumn = state => {
   return hasParentNodeOfType(state.schema.nodes.layoutSection)(state.selection);
-};
+};
+export function filterChildrenBetween(doc, from, to, predicate) {
+  const results = [];
+  doc.nodesBetween(from, to, (node, pos, parent) => {
+    if (predicate(node, pos, parent)) {
+      results.push({
+        node,
+        pos
+      });
+    }
+  });
+  return results;
+}
+export const removeBlockMarks = (state, marks) => {
+  const {
+    selection,
+    schema
+  } = state;
+  let {
+    tr
+  } = state;
+
+  // Marks might not exist in Schema
+  const marksToRemove = marks.filter(Boolean);
+  if (marksToRemove.length === 0) {
+    return undefined;
+  }
+
+  /** Saves an extra dispatch */
+  let blockMarksExists = false;
+  const hasMark = mark => marksToRemove.indexOf(mark.type) > -1;
+  /**
+   * When you need to toggle the selection
+   * when another type which does not allow alignment is applied
+   */
+  state.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+    if (node.type === schema.nodes.paragraph && node.marks.some(hasMark)) {
+      blockMarksExists = true;
+      const resolvedPos = state.doc.resolve(pos);
+      const withoutBlockMarks = node.marks.filter(not(hasMark));
+      tr = tr.setNodeMarkup(resolvedPos.pos, undefined, node.attrs, withoutBlockMarks);
+    }
+  });
+  return blockMarksExists ? tr : undefined;
+};
+const not = fn => arg => !fn(arg);

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, isInLayoutColumn } from './editor-core-utils';
+export { isElementInTableCell, isTextSelection, isLastItemMediaGroup, setNodeSelection, setTextSelection, nonNullable, stepAddsOneOf, stepHasSlice, extractSliceFromStep, isValidPosition, isEmptyParagraph, isInLayoutColumn, removeBlockMarks, filterChildrenBetween } from './editor-core-utils';
 export { withImageLoader } from './imageLoader';
 export { absoluteBreakoutWidth, calcBreakoutWidth, calcWideWidth, breakoutConsts, calculateBreakoutStyles, calcBreakoutWidthPx, getNextBreakoutMode, getTitle } from './breakout';
 export { findChangedNodesFromTransaction, validNode, validateNodes, isType, isParagraph, isText, isLinkMark, SelectedState, isNodeSelectedOrInRange, isSupportedInParent, isMediaNode, isNodeBeforeMediaNode } from './nodes';
@@ -42,13 +42,13 @@ export { isFromCurrentDomain, LinkMatcher, normalizeUrl, linkifyContent, getLink
 export const pmHistoryPluginKey = 'history$';
 export { gridTypeForLayout } from './grid';
 export { nodesBetweenChanged, getStepRange, isEmptyDocument, processRawValue, hasDocAsParent, bracketTyped, hasVisibleContent } from './document';
-export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes } from './rich-media-utils';
+export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes, nonWrappedLayouts } from './rich-media-utils';
 export { sanitizeNodeForPrivacy } from './filter/privacy-filter';
 export { canRenderDatasource } from './datasource';
-export { filterCommand, walkPrevNode, walkNextNode, isEmptySelectionAtStart, isEmptySelectionAtEnd, insertContentDeleteRange, deleteEmptyParagraphAndMoveBlockUp } from './commands';
+export { filterCommand, isEmptySelectionAtStart, isEmptySelectionAtEnd, insertContentDeleteRange, deleteEmptyParagraphAndMoveBlockUp, insertNewLineWithAnalytics, createNewParagraphAbove, createNewParagraphBelow, createParagraphNear, walkNextNode, walkPrevNode } from './commands';
 export function shallowEqual(obj1 = {}, obj2 = {}) {
   const keys1 = Object.keys(obj1);
   const keys2 = Object.keys(obj2);
   return keys1.length === keys2.length && keys1.reduce((acc, key) => acc && obj1[key] === obj2[key], true);
 }
-export { inputRuleWithAnalytics } from './input-rules';
+export { inputRuleWithAnalytics, createWrappingJoinRule, createRule } from './input-rules';

package/dist/es2019/utils/input-rules.js

@@ -1,3 +1,6 @@
+import { closeHistory } from '@atlaskit/editor-prosemirror/history';
+import { canJoin, findWrapping } from '@atlaskit/editor-prosemirror/transform';
+import { JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST } from '../analytics';
 // Roughly based on atlassian-frontend/packages/editor/editor-core/src/utils/input-rules.ts but with the Editor Analytics API that's injected in plugins
 export const inputRuleWithAnalytics = (getPayload, analyticsApi) => {
   return originalRule => {
@@ -13,4 +16,46 @@ export const inputRuleWithAnalytics = (getPayload, analyticsApi) => {
       onHandlerApply
     };
   };
+};
+export const createWrappingJoinRule = ({
+  match,
+  nodeType,
+  getAttrs,
+  joinPredicate
+}) => {
+  const handler = (state, match, start, end) => {
+    const attrs = (getAttrs instanceof Function ? getAttrs(match) : getAttrs) || {};
+    const tr = state.tr;
+    const fixedStart = Math.max(start, 1);
+    tr.delete(fixedStart, end);
+    const $start = tr.doc.resolve(fixedStart);
+    const range = $start.blockRange();
+    const wrapping = range && findWrapping(range, nodeType, attrs);
+    if (!wrapping || !range) {
+      return null;
+    }
+    const parentNodePosMapped = tr.mapping.map(range.start);
+    const parentNode = tr.doc.nodeAt(parentNodePosMapped);
+    const lastWrap = wrapping[wrapping.length - 1];
+    if (parentNode && lastWrap) {
+      const allowedMarks = lastWrap.type.allowedMarks(parentNode.marks) || [];
+      tr.setNodeMarkup(parentNodePosMapped, parentNode.type, parentNode.attrs, allowedMarks);
+    }
+    tr.wrap(range, wrapping);
+    const before = tr.doc.resolve(fixedStart - 1).nodeBefore;
+    if (before && before.type === nodeType && canJoin(tr.doc, fixedStart - 1) && (!joinPredicate || joinPredicate(match, before, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.JOINED_TO_LIST_ABOVE))) {
+      tr.join(fixedStart - 1);
+    }
+    return tr;
+  };
+  return createRule(match, handler);
+};
+export const createRule = (match, handler) => {
+  return {
+    match,
+    handler,
+    onHandlerApply: (_state, tr) => {
+      closeHistory(tr);
+    }
+  };
 };

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

@@ -1,7 +1,9 @@
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
-import { shouldAddDefaultWrappedWidth } from '../ui/MediaSingle';
 import { calcPxFromColumns, wrappedLayouts } from '../ui/MediaSingle/grid';
+export const shouldAddDefaultWrappedWidth = (layout, width, lineLength) => {
+  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
+};
 export const nonWrappedLayouts = ['center', 'wide', 'full-width'];
 export const floatingLayouts = ['wrap-left', 'wrap-right'];
 export const isRichMediaInsideOfBlockNode = (view, pos) => {

package/dist/es2019/version.json

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

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

@@ -1,4 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
@@ -9,10 +12,11 @@ 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 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';
+import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } 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`.
@@ -75,7 +79,10 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
       return false;
     }
     var nodeWidth = getNodeWidth(node, state.schema);
-    var newAttrs = alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
+    var newAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
+    _objectSpread(_objectSpread({}, node.attrs), {}, {
+      layout: layout
+    }) : 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
@@ -104,18 +111,26 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
     return true;
   };
 };
-var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) {
+var getToolbarLayout = function getToolbarLayout(layout) {
+  if (getBooleanFF('platform.editor.media.extended-resize-experience') && nonWrappedLayouts.includes(layout)) {
+    return 'center';
+  }
+  return layout;
+};
+var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) {
   return icons.map(function (toolbarItem) {
     var id = toolbarItem.id,
       value = toolbarItem.value;
-    return {
+    return _objectSpread({
       id: id,
       type: 'button',
       icon: toolbarItem.icon,
       title: intl.formatMessage(layoutToMessages[value]),
-      selected: layout === value,
+      selected: getToolbarLayout(layout) === value,
       onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
-    };
+    }, isChangingLayoutDisabled && {
+      disabled: value !== 'center'
+    });
   });
 };
 var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
@@ -125,13 +140,14 @@ var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2,
 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 isChangingLayoutDisabled = arguments.length > 9 ? arguments[9] : undefined;
   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 alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
+  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
   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;

package/dist/esm/guideline/index.js

@@ -3,4 +3,5 @@ export { createFixedGuidelinesFromLengths, createGuidesFromLengths } from './fix
 export { generateDefaultGuidelines } from './defaultGuideline';
 export { getGuidelinesWithHighlights } from './updateGuideline';
 export { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
+export { getSnapWidth, findClosestSnap } from './snapping';
 export { isVerticalPosition, getContainerWidthOrFullEditorWidth } from './utils';

package/dist/esm/keymaps/index.js

@@ -77,7 +77,7 @@ var arrowKeysMap = {
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
 };
-var tooltipShortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), "var(--ds-background-inverse-subtle, ".concat(N400, ")"));
+var tooltipShortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 ", ";\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), "var(--ds-background-inverse-subtle, ".concat(N400, ")"), "var(--ds-space-025, 2px)");
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 function formatShortcut(keymap) {
@@ -201,4 +201,5 @@ export function findKeyMapForBrowser(keyMap) {
   }
   return;
 }
-export { DOWN, HEADING_KEYS, KEY_0, KEY_1, KEY_2, KEY_3, KEY_4, KEY_5, KEY_6, LEFT, RIGHT, UP } from './consts';
+export { DOWN, HEADING_KEYS, KEY_0, KEY_1, KEY_2, KEY_3, KEY_4, KEY_5, KEY_6, LEFT, RIGHT, UP } from './consts';
+export { keymap } from './keymap';

package/dist/esm/keymaps/keymap.js

@@ -0,0 +1,33 @@
+import { base, keyName } from 'w3c-keyname';
+import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
+import { SafePlugin } from '../safe-plugin';
+
+/**
+ * A workaround for mostly Cyrillic but should have a positive affect
+ * on other languages / layouts. Attempts a similar approach to OS X.
+ * @see ED-7310
+ * @see https://github.com/ProseMirror/prosemirror/issues/957
+ * @param bindings
+ */
+export function keymap(bindings) {
+  return new SafePlugin({
+    props: {
+      handleKeyDown: function handleKeyDown(view, event) {
+        var name = keyName(event);
+        var keyboardEvent = event;
+        if (event.ctrlKey && name.length === 1 &&
+        // Check the unicode of the character to
+        // assert that its not an ASCII character.
+        // These are characters outside Latin's range.
+        /[^\u0000-\u007f]/.test(name)) {
+          keyboardEvent = new KeyboardEvent('keydown', {
+            key: base[event.keyCode],
+            code: event.code,
+            ctrlKey: true
+          });
+        }
+        return keydownHandler(bindings)(view, keyboardEvent);
+      }
+    }
+  });
+}

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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 SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.32.1";
+var packageVersion = "74.34.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/styles/shared/media-single.js

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var richMediaClassName = 'rich-media-item';
 var wrappedMediaBreakoutPoint = 410;
-var mediaSingleSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: 12px;\n    margin-bottom: 12px;\n    clear: both;\n\n    &.image-wrap-left,\n    &.image-wrap-right {\n      clear: none;\n\n      &:first-child {\n        margin-top: 12px;\n      }\n    }\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  @media all and (max-width: ", "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }\n"])), richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, wrappedMediaBreakoutPoint);
+var mediaSingleSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n    clear: both;\n\n    &.image-wrap-left,\n    &.image-wrap-right {\n      clear: none;\n\n      &:first-child {\n        margin-top: ", ";\n      }\n    }\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  ", "\n"])), richMediaClassName, richMediaClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, !getBooleanFF('platform.editor.media.extended-resize-experience') && "@media all and (max-width: ".concat(wrappedMediaBreakoutPoint, "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }"));
 export { mediaSingleSharedStyle, richMediaClassName };

package/dist/esm/ui/DropList/index.js

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.32.1";
+var packageVersion = "74.34.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/MediaSingle/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
 import { getMediaSinglePixelWidth } from '../../media-single/utils';
-import { wrappedLayouts } from './grid';
+import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
 import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export var DEFAULT_IMAGE_WIDTH = 250;
 export var DEFAULT_IMAGE_HEIGHT = 200;
@@ -16,9 +16,6 @@ export var DEFAULT_IMAGE_HEIGHT = 200;
     Read more: https://product-fabric.atlassian.net/browse/MEX-2481
 */
 export var IMAGE_AND_BORDER_ADJUSTMENT = 2;
-export var shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
-  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
-};
 export default function MediaSingle(_ref) {
   var layout = _ref.layout,
     width = _ref.width,

package/dist/esm/ui/MediaSingle/styled.js

@@ -5,7 +5,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
   switch (layout) {
@@ -77,6 +78,24 @@ function calcMaxWidth(layout, containerWidth) {
       return '100%';
   }
 }
+var getEffectiveFullWidth = function getEffectiveFullWidth(containerWidth, fullWidthMode) {
+  if (fullWidthMode) {
+    return '100%';
+  }
+  // There is always padding for renderer, so we don't need padding for it
+  var fullWidthPadding = akEditorGutterPadding * 2;
+  return "".concat(Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth), "px");
+};
+var calcMaxWidthWhenResizing = function calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode) {
+  if (isNestedNode) {
+    return '100%';
+  }
+  // non-nested node can resize up to full width
+  return getEffectiveFullWidth(containerWidth, fullWidthMode);
+};
+var calcMaxWidthWhenNotResizing = function calcMaxWidthWhenNotResizing(containerWidth, mediaSingleWidth) {
+  return "".concat(Math.min(mediaSingleWidth, containerWidth - akEditorGutterPadding * 2), "px");
+};
 function calcMargin(layout) {
   switch (layout) {
     case 'wrap-right':
@@ -109,8 +128,11 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     layout = _ref.layout,
     pctWidth = _ref.pctWidth,
     mediaSingleWidth = _ref.mediaSingleWidth,
-    width = _ref.width;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+    width = _ref.width,
+    isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
+    _ref$isNestedNode = _ref.isNestedNode,
+    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  &[class*='is-resizing'] {\n    ", "\n  }\n\n  /* Handles responsiveness of non-nested, not-resizing nodes in editor */\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), isExtendedResizeExperienceOn && "max-width: ".concat(calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode), ";\n\n    ").concat(nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n\n    .new-file-experience-wrapper {\n      box-shadow: none;\n    }"), !isNestedNode && "max-width: ".concat(layout !== 'full-width' && mediaSingleWidth && calcMaxWidthWhenNotResizing(containerWidth, mediaSingleWidth), ";\n\n    ").concat(nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n\n    // override min-width to counteract max-width set in old experience\n    ").concat(layout === 'full-width' && "min-width: ".concat(getEffectiveFullWidth(containerWidth, fullWidthMode), " !important;"), ";"), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   var hasFallbackContainer = _ref2.hasFallbackContainer,

package/dist/esm/ui/index.js

@@ -1,5 +1,5 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, shouldAddDefaultWrappedWidth } from './MediaSingle';
+export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
 export { mediaLinkStyle } from './MediaSingle/link';