@atlaskit/editor-core 187.10.6 → 187.11.0

package/dist/es2019/plugins/text-formatting/commands/text-formatting.js

@@ -1,5 +1,5 @@
 import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { applyMarkOnRange, toggleMark } from '@atlaskit/editor-common/mark';
+import { applyMarkOnRange } from '@atlaskit/editor-common/mark';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { hasCode, markActive } from '../utils';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
@@ -107,164 +107,6 @@ export const moveLeft = () => {
     return false;
   };
 };
-export const toggleEm = () => {
-  return (state, dispatch) => {
-    const {
-      em
-    } = state.schema.marks;
-    if (em) {
-      return toggleMark(em)(state, dispatch);
-    }
-    return false;
-  };
-};
-export const toggleEmWithAnalytics = editorAnalyticsAPI => ({
-  inputMethod
-}) => withAnalytics(editorAnalyticsAPI, {
-  action: ACTION.FORMATTED,
-  actionSubject: ACTION_SUBJECT.TEXT,
-  eventType: EVENT_TYPE.TRACK,
-  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_ITALIC,
-  attributes: {
-    inputMethod
-  }
-})(toggleEm());
-export const toggleStrike = () => {
-  return (state, dispatch) => {
-    const {
-      strike
-    } = state.schema.marks;
-    if (strike) {
-      return toggleMark(strike)(state, dispatch);
-    }
-    return false;
-  };
-};
-export const toggleStrikeWithAnalytics = editorAnalyticsAPI => ({
-  inputMethod
-}) => withAnalytics(editorAnalyticsAPI, {
-  action: ACTION.FORMATTED,
-  actionSubject: ACTION_SUBJECT.TEXT,
-  eventType: EVENT_TYPE.TRACK,
-  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_STRIKE,
-  attributes: {
-    inputMethod
-  }
-})(toggleStrike());
-export const toggleStrong = () => {
-  return (state, dispatch) => {
-    const {
-      strong
-    } = state.schema.marks;
-    if (strong) {
-      return toggleMark(strong)(state, dispatch);
-    }
-    return false;
-  };
-};
-export const toggleStrongWithAnalytics = editorAnalyticsAPI => ({
-  inputMethod
-}) => withAnalytics(editorAnalyticsAPI, {
-  action: ACTION.FORMATTED,
-  actionSubject: ACTION_SUBJECT.TEXT,
-  eventType: EVENT_TYPE.TRACK,
-  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_STRONG,
-  attributes: {
-    inputMethod
-  }
-})(toggleStrong());
-export const toggleUnderline = () => {
-  return (state, dispatch) => {
-    const {
-      underline
-    } = state.schema.marks;
-    if (underline) {
-      return toggleMark(underline)(state, dispatch);
-    }
-    return false;
-  };
-};
-export const toggleUnderlineWithAnalytics = editorAnalyticsAPI => ({
-  inputMethod
-}) => withAnalytics(editorAnalyticsAPI, {
-  action: ACTION.FORMATTED,
-  actionSubject: ACTION_SUBJECT.TEXT,
-  eventType: EVENT_TYPE.TRACK,
-  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_UNDERLINE,
-  attributes: {
-    inputMethod
-  }
-})(toggleUnderline());
-export const toggleSuperscript = () => {
-  return (state, dispatch) => {
-    const {
-      subsup
-    } = state.schema.marks;
-    if (subsup) {
-      return toggleMark(subsup, {
-        type: 'sup'
-      })(state, dispatch);
-    }
-    return false;
-  };
-};
-export const toggleSuperscriptWithAnalytics = editorAnalyticsAPI => ({
-  inputMethod
-}) => withAnalytics(editorAnalyticsAPI, {
-  action: ACTION.FORMATTED,
-  actionSubject: ACTION_SUBJECT.TEXT,
-  eventType: EVENT_TYPE.TRACK,
-  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_SUPER,
-  attributes: {
-    inputMethod
-  }
-})(toggleSuperscript());
-export const toggleSubscript = () => {
-  return (state, dispatch) => {
-    const {
-      subsup
-    } = state.schema.marks;
-    if (subsup) {
-      return toggleMark(subsup, {
-        type: 'sub'
-      })(state, dispatch);
-    }
-    return false;
-  };
-};
-export const toggleSubscriptWithAnalytics = editorAnalyticsAPI => ({
-  inputMethod
-}) => withAnalytics(editorAnalyticsAPI, {
-  action: ACTION.FORMATTED,
-  actionSubject: ACTION_SUBJECT.TEXT,
-  eventType: EVENT_TYPE.TRACK,
-  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_SUB,
-  attributes: {
-    inputMethod
-  }
-})(toggleSubscript());
-export const toggleCode = () => {
-  return (state, dispatch) => {
-    const {
-      code
-    } = state.schema.marks;
-    if (code) {
-      return toggleMark(code)(state, dispatch);
-    }
-    return false;
-  };
-};
-export const toggleCodeWithAnalytics = editorAnalyticsAPI => ({
-  inputMethod
-}) => withAnalytics(editorAnalyticsAPI, {
-  action: ACTION.FORMATTED,
-  actionSubject: ACTION_SUBJECT.TEXT,
-  eventType: EVENT_TYPE.TRACK,
-  actionSubjectId: ACTION_SUBJECT_ID.FORMAT_CODE,
-  attributes: {
-    inputMethod
-  }
-})(toggleCode());
 const createInlineCodeFromTextInput = (from, to, text) => {
   return (state, dispatch) => {
     if (state.selection.empty) {

package/dist/es2019/plugins/text-formatting/index.js

@@ -9,6 +9,7 @@ import textFormattingInputRulePlugin from './pm-plugins/input-rule';
 import keymapPlugin from './pm-plugins/keymap';
 import textFormattingSmartInputRulePlugin from './pm-plugins/smart-input-rule';
 import Toolbar from './ui/Toolbar';
+import { toggleSuperscript, toggleSuperscriptWithAnalytics, toggleSubscript, toggleSubscriptWithAnalytics, toggleStrike, toggleStrikeWithAnalytics, toggleCode, toggleCodeWithAnalytics, toggleUnderline, toggleUnderlineWithAnalytics, toggleEm, toggleEmWithAnalytics, toggleStrong, toggleStrongWithAnalytics } from './actions';
 const textFormatting = (options = {}, api) => ({
   name: 'textFormatting',
   marks() {
@@ -109,6 +110,22 @@ const textFormatting = (options = {}, api) => ({
         });
       }
     });
+  },
+  actions: {
+    toggleSuperscript,
+    toggleSuperscriptWithAnalytics,
+    toggleSubscript,
+    toggleSubscriptWithAnalytics,
+    toggleStrike,
+    toggleStrikeWithAnalytics,
+    toggleCode,
+    toggleCodeWithAnalytics,
+    toggleUnderline,
+    toggleUnderlineWithAnalytics,
+    toggleEm,
+    toggleEmWithAnalytics,
+    toggleStrong,
+    toggleStrongWithAnalytics
   }
 });
 export default textFormatting;

package/dist/es2019/plugins/text-formatting/pm-plugins/keymap.js

@@ -1,41 +1,41 @@
 import * as keymaps from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import * as commands from '../commands/text-formatting';
+import { toggleStrongWithAnalytics, toggleEmWithAnalytics, toggleCodeWithAnalytics, toggleStrikeWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../actions';
 export default function keymapPlugin(schema, editorAnalyticsAPI) {
   const list = {};
   if (schema.marks.strong) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleBold.common, commands.toggleStrongWithAnalytics(editorAnalyticsAPI)({
+    keymaps.bindKeymapWithCommand(keymaps.toggleBold.common, toggleStrongWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.em) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleItalic.common, commands.toggleEmWithAnalytics(editorAnalyticsAPI)({
+    keymaps.bindKeymapWithCommand(keymaps.toggleItalic.common, toggleEmWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.code) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleCode.common, commands.toggleCodeWithAnalytics(editorAnalyticsAPI)({
+    keymaps.bindKeymapWithCommand(keymaps.toggleCode.common, toggleCodeWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.strike) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleStrikethrough.common, commands.toggleStrikeWithAnalytics(editorAnalyticsAPI)({
+    keymaps.bindKeymapWithCommand(keymaps.toggleStrikethrough.common, toggleStrikeWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.subsup) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleSubscript.common, commands.toggleSubscriptWithAnalytics(editorAnalyticsAPI)({
+    keymaps.bindKeymapWithCommand(keymaps.toggleSubscript.common, toggleSubscriptWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.subsup) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleSuperscript.common, commands.toggleSuperscriptWithAnalytics(editorAnalyticsAPI)({
+    keymaps.bindKeymapWithCommand(keymaps.toggleSuperscript.common, toggleSuperscriptWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.underline) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleUnderline.common, commands.toggleUnderlineWithAnalytics(editorAnalyticsAPI)({
+    keymaps.bindKeymapWithCommand(keymaps.toggleUnderline.common, toggleUnderlineWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }

package/dist/es2019/plugins/text-formatting/pm-plugins/main.js

@@ -6,7 +6,7 @@ import * as keymaps from '@atlaskit/editor-common/keymaps';
 import { shallowEqual } from '@atlaskit/editor-common/utils';
 import { createInlineCodeFromTextInputWithAnalytics } from '../commands/text-formatting';
 import * as commands from '../commands/text-formatting';
-import { anyMarkActive } from '../utils';
+import { anyMarkActive } from '@atlaskit/editor-common/mark';
 import { pluginKey } from './plugin-key';
 export { pluginKey };
 const getTextFormattingState = (editorState, editorAnalyticsAPI) => {

package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -2,7 +2,7 @@
 import { useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-import { toolbarMessages } from '../toolbar-messages';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { clearFormattingWithAnalytics } from '../../../commands/clear-formatting';
 import { pluginKey as clearFormattingPluginKey } from '../../../pm-plugins/clear-formatting';
 import { clearFormatting as clearFormattingKeymap, tooltip } from '@atlaskit/editor-common/keymaps';

package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js

@@ -4,8 +4,8 @@ import { jsx } from '@emotion/react';
 import BoldIcon from '@atlaskit/icon/glyph/editor/bold';
 import ItalicIcon from '@atlaskit/icon/glyph/editor/italic';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-import { toolbarMessages } from '../toolbar-messages';
-import * as commands from '../../../commands/text-formatting';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { toggleStrongWithAnalytics, toggleEmWithAnalytics, toggleCodeWithAnalytics, toggleStrikeWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../actions';
 import { TOOLBAR_ACTION_SUBJECT_ID, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin-key';
 import { toggleCode, toggleStrikethrough, toggleUnderline, tooltip, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, ToolTipContent, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
@@ -16,7 +16,7 @@ const withToolbarInputMethod = func => func({
 const IconButtons = editorAnalyticsAPI => ({
   strong: {
     buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
-    command: withToolbarInputMethod(commands.toggleStrongWithAnalytics(editorAnalyticsAPI)),
+    command: withToolbarInputMethod(toggleStrongWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.bold,
     tooltipKeymap: toggleBold,
     component: () => jsx(BoldIcon, {
@@ -25,7 +25,7 @@ const IconButtons = editorAnalyticsAPI => ({
   },
   em: {
     buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
-    command: withToolbarInputMethod(commands.toggleEmWithAnalytics(editorAnalyticsAPI)),
+    command: withToolbarInputMethod(toggleEmWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.italic,
     tooltipKeymap: toggleItalic,
     component: () => jsx(ItalicIcon, {
@@ -33,27 +33,27 @@ const IconButtons = editorAnalyticsAPI => ({
     })
   },
   underline: {
-    command: withToolbarInputMethod(commands.toggleUnderlineWithAnalytics(editorAnalyticsAPI)),
+    command: withToolbarInputMethod(toggleUnderlineWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.underline,
     tooltipKeymap: toggleUnderline
   },
   strike: {
-    command: withToolbarInputMethod(commands.toggleStrikeWithAnalytics(editorAnalyticsAPI)),
+    command: withToolbarInputMethod(toggleStrikeWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.strike,
     tooltipKeymap: toggleStrikethrough
   },
   code: {
-    command: withToolbarInputMethod(commands.toggleCodeWithAnalytics(editorAnalyticsAPI)),
+    command: withToolbarInputMethod(toggleCodeWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.code,
     tooltipKeymap: toggleCode
   },
   subscript: {
-    command: withToolbarInputMethod(commands.toggleSubscriptWithAnalytics(editorAnalyticsAPI)),
+    command: withToolbarInputMethod(toggleSubscriptWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.subscript,
     tooltipKeymap: toggleSubscript
   },
   superscript: {
-    command: withToolbarInputMethod(commands.toggleSuperscriptWithAnalytics(editorAnalyticsAPI)),
+    command: withToolbarInputMethod(toggleSuperscriptWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.superscript,
     tooltipKeymap: toggleSuperscript
   }

package/dist/es2019/plugins/text-formatting/ui/Toolbar/index.js

@@ -9,7 +9,7 @@ import { useResponsiveToolbarButtons, useResponsiveIconTypeMenu } from './hooks/
 import { SingleToolbarButtons } from './single-toolbar-buttons';
 import { MoreButton } from './more-button';
 import { FormattingTextDropdownMenu } from './dropdown-menu';
-import { toolbarMessages } from './toolbar-messages';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { compareItemsArrays, isArrayContainsContent } from '../../utils';
 import { Announcer } from '@atlaskit/editor-common/ui';
 import { usePreviousState } from '@atlaskit/editor-common/hooks';

package/dist/es2019/plugins/text-formatting/utils.js

@@ -1,4 +1,4 @@
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { anyMarkActive } from '@atlaskit/editor-common/mark';
 import { FORMATTING_MARK_TYPES, FORMATTING_NODE_TYPES } from './commands/clear-formatting';
 export const hasCode = (state, pos) => {
   const {
@@ -31,34 +31,6 @@ export const markActive = (state, mark) => {
   });
   return found;
 };
-
-/**
- * Determine if a mark of a specific type exists anywhere in the selection.
- */
-export const anyMarkActive = (state, markType) => {
-  const {
-    $from,
-    from,
-    to,
-    empty
-  } = state.selection;
-  if (empty) {
-    return !!markType.isInSet(state.storedMarks || $from.marks());
-  }
-  let rangeHasMark = false;
-  if (state.selection instanceof CellSelection) {
-    state.selection.forEachCell((cell, cellPos) => {
-      const from = cellPos;
-      const to = cellPos + cell.nodeSize;
-      if (!rangeHasMark) {
-        rangeHasMark = state.doc.rangeHasMark(from, to, markType);
-      }
-    });
-  } else {
-    rangeHasMark = state.doc.rangeHasMark(from, to, markType);
-  }
-  return rangeHasMark;
-};
 const blockStylingIsPresent = state => {
   let {
     from,

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

@@ -18,7 +18,6 @@ import { panelStyles } from '../../plugins/panel/styles';
 import { fakeCursorStyles } from '../../plugins/fake-text-cursor/styles';
 import { mentionsStyles } from '../../plugins/mentions/styles';
 import { emojiStyles } from '../../plugins/emoji/styles';
-import { textFormattingStyles } from '../../plugins/text-formatting/styles';
 import { placeholderTextStyles } from '../../plugins/placeholder-text/styles';
 import { extensionStyles } from '../../plugins/extension/ui/styles';
 import { expandStyles } from '../../plugins/expand/ui/styles';
@@ -28,7 +27,7 @@ import { taskDecisionStyles } from '../../plugins/tasks-and-decisions/styles';
 import { statusStyles } from '../../plugins/status/styles';
 import { dateStyles } from '../../plugins/date/styles';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
-import { linkSharedStyle } from '@atlaskit/editor-common/styles';
+import { linkSharedStyle, codeMarkSharedStyles } from '@atlaskit/editor-common/styles';
 export const linkStyles = css`
   .ProseMirror {
     ${linkSharedStyle}
@@ -74,7 +73,7 @@ const contentStyles = props => css`
   ${codeBlockStyles(props)}
 
   ${blocktypeStyles(props)}
-  ${textFormattingStyles(props)}
+  ${codeMarkSharedStyles(props)}
   ${textColorStyles}
   ${listsStyles}
   ${ruleStyles(props)}

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.10.6";
+export const version = "187.11.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.10.6",
+	"version": "187.11.0",
 	"sideEffects": false
 }

package/dist/esm/index.js

@@ -17,13 +17,11 @@ export { AnnotationUpdateEmitter } from './plugins/annotation';
 // Used in mobile bridge
 export { stateKey as mediaPluginKey } from './plugins/media/pm-plugins/main';
 export { mentionPluginKey } from './plugins/mentions';
-export { pluginKey as textFormattingStateKey } from './plugins/text-formatting/pm-plugins/main';
 export { textColorPluginKey } from './plugins/text-color';
 export { changeColor } from './plugins/text-color/commands/change-color';
 export { insertHorizontalRule } from './plugins/rule/commands';
 export { blockPluginStateKey } from './plugins';
 export { pluginKey as listStateKey } from './plugins/list/pm-plugins/main';
-export { toggleSuperscript, toggleSuperscriptWithAnalytics, toggleSubscript, toggleSubscriptWithAnalytics, toggleStrike, toggleStrikeWithAnalytics, toggleCode, toggleCodeWithAnalytics, toggleUnderline, toggleUnderlineWithAnalytics, toggleEm, toggleEmWithAnalytics, toggleStrong, toggleStrongWithAnalytics } from './plugins/text-formatting/commands/text-formatting';
 export { subscribeToToolbarAndPickerUpdates } from './plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates';
 export { subscribeTypeAheadUpdates } from './plugins/view-update-subscription/subscribe/type-ahead-updates';
 export { insertBlockType, insertBlockTypesWithAnalytics, setBlockType, setBlockTypeWithAnalytics } from './plugins/block-type/commands';

package/dist/esm/plugins/help-dialog/ui/index.js

@@ -19,7 +19,7 @@ import AkModalDialog, { ModalTransition, useModal } from '@atlaskit/modal-dialog
 import { header, footer, contentWrapper, line, content, row, codeSm, codeMd, codeLg, title, column, dialogHeader } from './styles';
 import * as keymaps from '../../../keymaps';
 import ToolbarButton from '../../../ui/ToolbarButton';
-import { toolbarMessages } from '../../text-formatting/ui/Toolbar/toolbar-messages';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { messages as listMessages } from '../../list/messages';
 import { messages as insertBlockMessages } from '../../insert-block/ui/ToolbarInsertBlock/messages';
 import { messages as blockTypeMessages } from '../../block-type/messages';

package/dist/esm/plugins/media/nodeviews/mediaNodeUpdater.js

@@ -4,7 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import uuidV4 from 'uuid/v4';
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { getMediaClient, isMediaBlobUrl as _isMediaBlobUrl, getAttrsFromUrl, isImageRepresentationReady } from '@atlaskit/media-client';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { replaceExternalMedia, updateAllMediaSingleNodesAttrs, updateCurrentMediaNodeAttrs, updateMediaSingleNodeAttrs } from '../commands/helpers';

package/dist/esm/plugins/media/nodeviews/mediaNodeView/index.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import React from 'react';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import MediaNode from './media';

package/dist/esm/plugins/media/nodeviews/mediaSingle.js

@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { MediaSingle } from '@atlaskit/editor-common/ui';
 import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
@@ -35,7 +35,7 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { getMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { calcMediaSinglePixelWidth, MEDIA_SINGLE_GUTTER_SIZE, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var MediaSingleNode = /*#__PURE__*/function (_Component) {
   _inherits(MediaSingleNode, _Component);
@@ -354,16 +354,25 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         height = DEFAULT_IMAGE_HEIGHT;
       }
       var isSelected = selected();
+      var contentWidth = this.getLineLength(view, getPos()) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,
         height: height,
         containerWidth: containerWidth,
-        lineLength: this.getLineLength(view, getPos()) || lineLength,
+        lineLength: contentWidth,
         pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
         hasFallbackContainer: false,
-        mediaSingleWidth: mediaSingleWidthAttribute && getMediaSinglePixelWidth(mediaSingleWidthAttribute, lineLength, widthType)
+        mediaSingleWidth: calcMediaSinglePixelWidth({
+          width: mediaSingleWidthAttribute,
+          widthType: widthType,
+          origWidth: width,
+          layout: layout,
+          contentWidth: contentWidth,
+          containerWidth: containerWidth,
+          gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
+        })
       };
       var ResizableMediaSingleProps = _objectSpread({
         view: view,

package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -15,7 +15,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaClient } from '@atlaskit/media-client';
-import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap, calcColumnsFromPx, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
+import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap, calcColumnsFromPx } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { wrapperStyle } from './styled';
@@ -26,9 +26,9 @@ import { messages } from './resizable-media-single-messages';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP } from '@atlaskit/editor-common/media-single';
-import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
-import { generateDefaultGuidelines, generateDynamicGuidelines } from './guidelines';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { findClosestSnap, getSnapWidth, getGuidelinesWithHighlights, generateDynamicGuidelines } from '@atlaskit/editor-common/guideline';
+import { generateDefaultGuidelines } from './guidelines';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
 export function calcOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
   if (wrapper && insideInlineLike && !insideLayout) {
@@ -128,7 +128,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
-    var initialWidth = props.mediaSingleWidth || _this.calcInitialWidth();
+    var initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
     _this.state = {
       offsetLeft: calcOffsetLeft(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
       // We default to true until we resolve the file type
@@ -178,10 +178,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         var guidelines = this.getDefaultGuidelines();
         this.displayGuideline(guidelines);
       }
-      if (prevProps.lineLength === undefined && this.props.lineLength !== undefined && this.props.mediaSingleWidth === null) {
-        // re-initalises size when lineLength becomes defined later
+      if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
+        // update size when lineLength becomes defined later
         // ensures extended experience renders legacy image with the same size as the legacy experience
-        var initialWidth = this.calcInitialWidth();
+        var initialWidth = this.props.mediaSingleWidth;
         this.setState({
           size: {
             width: initialWidth,
@@ -215,11 +215,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getSnaps",
     value: function getSnaps() {
-      var view = this.props.view;
+      var _this$props5 = this.props,
+        view = _this$props5.view,
+        lineLength = _this$props5.lineLength;
       var dom = view.dom;
       var defaultGuidelines = this.getDefaultGuidelines();
       // disable guidelines for nested media single node
-      var dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view);
+      var dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength);
       var guidelines = [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines));
       var mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
       var _dom$getBoundingClien = dom.getBoundingClientRect(),
@@ -406,15 +408,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props5 = this.props,
-        origWidth = _this$props5.width,
-        layout = _this$props5.layout,
-        pctWidth = _this$props5.pctWidth,
-        containerWidth = _this$props5.containerWidth,
-        fullWidthMode = _this$props5.fullWidthMode,
-        selected = _this$props5.selected,
-        children = _this$props5.children,
-        intl = _this$props5.intl;
+      var _this$props6 = this.props,
+        origWidth = _this$props6.width,
+        layout = _this$props6.layout,
+        pctWidth = _this$props6.pctWidth,
+        containerWidth = _this$props6.containerWidth,
+        fullWidthMode = _this$props6.fullWidthMode,
+        selected = _this$props6.selected,
+        children = _this$props6.children,
+        intl = _this$props6.intl;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;