@atlaskit/editor-core 187.10.6 → 187.11.0

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

@@ -23,7 +23,7 @@ var _responsiveToolbarButtons = require("./hooks/responsive-toolbar-buttons");
 var _singleToolbarButtons = require("./single-toolbar-buttons");
 var _moreButton = require("./more-button");
 var _dropdownMenu = require("./dropdown-menu");
-var _toolbarMessages = require("./toolbar-messages");
+var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("../../utils");
 var _ui = require("@atlaskit/editor-common/ui");
 var _hooks = require("@atlaskit/editor-common/hooks");
@@ -76,9 +76,9 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     }),
     dropdownItems = _useResponsiveToolbar.dropdownItems,
     singleItems = _useResponsiveToolbar.singleItems;
-  var clearFormattingStatus = intl.formatMessage(_toolbarMessages.toolbarMessages.textFormattingOff);
-  var superscriptOffSubscriptOnStatus = intl.formatMessage(_toolbarMessages.toolbarMessages.superscriptOffSubscriptOn);
-  var subscriptOffSuperscriptOnStatus = intl.formatMessage(_toolbarMessages.toolbarMessages.subscriptOffSuperscriptOn);
+  var clearFormattingStatus = intl.formatMessage(_messages.toolbarMessages.textFormattingOff);
+  var superscriptOffSubscriptOnStatus = intl.formatMessage(_messages.toolbarMessages.superscriptOffSubscriptOn);
+  var subscriptOffSuperscriptOnStatus = intl.formatMessage(_messages.toolbarMessages.subscriptOffSuperscriptOn);
   var activeItems = [].concat((0, _toConsumableArray2.default)(dropdownItems), (0, _toConsumableArray2.default)(singleItems)).filter(function (item) {
     return item.isActive;
   });
@@ -89,18 +89,18 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
   var screenReaderMessage = '';
   if (prevActiveItems && activeItems.length > prevActiveItems.length) {
     comparedItems = (0, _utils.compareItemsArrays)(activeItems, prevActiveItems);
-    screenReaderMessage = intl.formatMessage(_toolbarMessages.toolbarMessages.on, {
+    screenReaderMessage = intl.formatMessage(_messages.toolbarMessages.on, {
       formattingType: comparedItems[0].content
     });
   } else {
     comparedItems = (0, _utils.compareItemsArrays)(prevActiveItems, activeItems);
     if (comparedItems && comparedItems.length) {
       var _activeItems$;
-      screenReaderMessage = intl.formatMessage(_toolbarMessages.toolbarMessages.off, {
+      screenReaderMessage = intl.formatMessage(_messages.toolbarMessages.off, {
         formattingType: comparedItems[0].content
       });
       if (((_activeItems$ = activeItems[0]) === null || _activeItems$ === void 0 ? void 0 : _activeItems$.content) === 'Code') {
-        screenReaderMessage = intl.formatMessage(_toolbarMessages.toolbarMessages.codeOn, {
+        screenReaderMessage = intl.formatMessage(_messages.toolbarMessages.codeOn, {
           textFormattingOff: (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1 ? clearFormattingStatus : screenReaderMessage
         });
       }
@@ -123,7 +123,7 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     }
     return [].concat((0, _toConsumableArray2.default)(dropdownItems), [clearIcon]);
   }, [clearIcon, dropdownItems]);
-  var moreFormattingButtonLabel = intl.formatMessage(_toolbarMessages.toolbarMessages.moreFormatting);
+  var moreFormattingButtonLabel = intl.formatMessage(_messages.toolbarMessages.moreFormatting);
   (0, _react.useEffect)(function () {
     if (screenReaderMessage) {
       setMessage(screenReaderMessage);

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.markActive = exports.isArrayContainsContent = exports.hasCode = exports.compareItemsArrays = exports.checkFormattingIsPresent = exports.anyMarkActive = void 0;
-var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+exports.markActive = exports.isArrayContainsContent = exports.hasCode = exports.compareItemsArrays = exports.checkFormattingIsPresent = void 0;
+var _mark = require("@atlaskit/editor-common/mark");
 var _clearFormatting = require("./commands/clear-formatting");
 var hasCode = function hasCode(state, pos) {
   var code = state.schema.marks.code;
@@ -37,39 +37,11 @@ var markActive = function markActive(state, mark) {
   });
   return found;
 };
-
-/**
- * Determine if a mark of a specific type exists anywhere in the selection.
- */
 exports.markActive = markActive;
-var anyMarkActive = function anyMarkActive(state, markType) {
+var blockStylingIsPresent = function blockStylingIsPresent(state) {
   var _state$selection2 = state.selection,
-    $from = _state$selection2.$from,
     from = _state$selection2.from,
-    to = _state$selection2.to,
-    empty = _state$selection2.empty;
-  if (empty) {
-    return !!markType.isInSet(state.storedMarks || $from.marks());
-  }
-  var rangeHasMark = false;
-  if (state.selection instanceof _cellSelection.CellSelection) {
-    state.selection.forEachCell(function (cell, cellPos) {
-      var from = cellPos;
-      var to = cellPos + cell.nodeSize;
-      if (!rangeHasMark) {
-        rangeHasMark = state.doc.rangeHasMark(from, to, markType);
-      }
-    });
-  } else {
-    rangeHasMark = state.doc.rangeHasMark(from, to, markType);
-  }
-  return rangeHasMark;
-};
-exports.anyMarkActive = anyMarkActive;
-var blockStylingIsPresent = function blockStylingIsPresent(state) {
-  var _state$selection3 = state.selection,
-    from = _state$selection3.from,
-    to = _state$selection3.to;
+    to = _state$selection2.to;
   var isBlockStyling = false;
   state.doc.nodesBetween(from, to, function (node) {
     if (_clearFormatting.FORMATTING_NODE_TYPES.indexOf(node.type.name) !== -1) {
@@ -83,14 +55,14 @@ var blockStylingIsPresent = function blockStylingIsPresent(state) {
 var marksArePresent = function marksArePresent(state) {
   var activeMarkTypes = _clearFormatting.FORMATTING_MARK_TYPES.filter(function (mark) {
     if (!!state.schema.marks[mark]) {
-      var _state$selection4 = state.selection,
-        $from = _state$selection4.$from,
-        empty = _state$selection4.empty;
+      var _state$selection3 = state.selection,
+        $from = _state$selection3.$from,
+        empty = _state$selection3.empty;
       var marks = state.schema.marks;
       if (empty) {
         return !!marks[mark].isInSet(state.storedMarks || $from.marks());
       }
-      return anyMarkActive(state, marks[mark]);
+      return (0, _mark.anyMarkActive)(state, marks[mark]);
     }
     return false;
   });

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

@@ -26,15 +26,14 @@ var _styles12 = require("../../plugins/panel/styles");
 var _styles13 = require("../../plugins/fake-text-cursor/styles");
 var _styles14 = require("../../plugins/mentions/styles");
 var _styles15 = require("../../plugins/emoji/styles");
-var _styles16 = require("../../plugins/text-formatting/styles");
-var _styles17 = require("../../plugins/placeholder-text/styles");
-var _styles18 = require("../../plugins/extension/ui/styles");
-var _styles19 = require("../../plugins/expand/ui/styles");
+var _styles16 = require("../../plugins/placeholder-text/styles");
+var _styles17 = require("../../plugins/extension/ui/styles");
+var _styles18 = require("../../plugins/expand/ui/styles");
 var _style = require("../../plugins/media/pm-plugins/alt-text/style");
-var _styles20 = require("../../plugins/find-replace/styles");
-var _styles21 = require("../../plugins/tasks-and-decisions/styles");
-var _styles22 = require("../../plugins/status/styles");
-var _styles23 = require("../../plugins/date/styles");
+var _styles19 = require("../../plugins/find-replace/styles");
+var _styles20 = require("../../plugins/tasks-and-decisions/styles");
+var _styles21 = require("../../plugins/status/styles");
+var _styles22 = require("../../plugins/date/styles");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
 var _templateObject, _templateObject2;
 /** @jsx jsx */
@@ -45,7 +44,7 @@ exports.linkStyles = linkStyles;
 var contentStyles = function contentStyles(props) {
   return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, (0, _styles11.layoutStyles)(props), _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles18.extensionStyles, (0, _styles19.expandStyles)(props), _styles20.findReplaceStyles, _styles21.taskDecisionStyles, _styles22.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles.smartCardStyles, _styles.smartCardSharedStyles, _styles23.dateStyles, _styles.embedCardStyles, _styles2.unsupportedStyles, _styles.resizerStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles16.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles.codeMarkSharedStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, (0, _styles11.layoutStyles)(props), _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles17.extensionStyles, (0, _styles18.expandStyles)(props), _styles19.findReplaceStyles, _styles20.taskDecisionStyles, _styles21.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles.smartCardStyles, _styles.smartCardSharedStyles, _styles22.dateStyles, _styles.embedCardStyles, _styles2.unsupportedStyles, _styles.resizerStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.10.6";
+var version = "187.11.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

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

package/dist/es2019/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/es2019/plugins/help-dialog/ui/index.js

@@ -10,7 +10,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/es2019/plugins/media/nodeviews/mediaNodeUpdater.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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, 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/es2019/plugins/media/nodeviews/mediaNodeView/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -22,7 +22,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';
 export default class MediaSingleNode extends Component {
   constructor(...args) {
@@ -270,16 +270,25 @@ export default class MediaSingleNode extends Component {
       height = DEFAULT_IMAGE_HEIGHT;
     }
     const isSelected = selected();
+    const contentWidth = this.getLineLength(view, getPos()) || lineLength;
     const mediaSingleProps = {
       layout,
       width,
       height,
       containerWidth: containerWidth,
-      lineLength: this.getLineLength(view, getPos()) || lineLength,
+      lineLength: contentWidth,
       pctWidth: mediaSingleWidthAttribute,
       fullWidthMode,
       hasFallbackContainer: false,
-      mediaSingleWidth: mediaSingleWidthAttribute && getMediaSinglePixelWidth(mediaSingleWidthAttribute, lineLength, widthType)
+      mediaSingleWidth: calcMediaSinglePixelWidth({
+        width: mediaSingleWidthAttribute,
+        widthType,
+        origWidth: width,
+        layout,
+        contentWidth,
+        containerWidth,
+        gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
+      })
     };
     const ResizableMediaSingleProps = {
       view: view,

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

@@ -4,7 +4,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';
@@ -15,9 +15,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 const resizerNextTestId = 'mediaSingle.resizerNext.testid';
 export function calcOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
   if (wrapper && insideInlineLike && !insideLayout) {
@@ -119,7 +119,7 @@ class ResizableMediaSingleNext extends React.Component {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
-    const initialWidth = props.mediaSingleWidth || this.calcInitialWidth();
+    const 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
@@ -165,10 +165,10 @@ class ResizableMediaSingleNext extends React.Component {
       const 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
-      const initialWidth = this.calcInitialWidth();
+      const initialWidth = this.props.mediaSingleWidth;
       this.setState({
         size: {
           width: initialWidth,
@@ -198,14 +198,15 @@ class ResizableMediaSingleNext extends React.Component {
   // TODO:  refactor this later, maybe use state to hold snaps array
   getSnaps() {
     const {
-      view
+      view,
+      lineLength
     } = this.props;
     const {
       dom
     } = view;
     const defaultGuidelines = this.getDefaultGuidelines();
     // disable guidelines for nested media single node
-    const dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view);
+    const dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength);
     const guidelines = [...defaultGuidelines, ...dynamicGuidelines];
     const mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
     const {

package/dist/es2019/plugins/media/utils/media-single.js

@@ -2,18 +2,16 @@ import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
+import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { addAnalytics } from '../../analytics';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { isImage } from './is-image';
 import { atTheBeginningOfBlock } from '../../../utils/prosemirror/position';
 import { getRandomHex } from '@atlaskit/media-common';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
 const getInsertMediaAnalytics = (inputMethod, fileExtension) => ({
   action: ACTION.INSERTED,
   actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -97,7 +95,9 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
   const contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
-  const node = createMediaSingleNode(state.schema, collection, contentWidth, undefined, alignLeftOnInsert)(mediaState);
+  const node = createMediaSingleNode(state.schema, collection, contentWidth,
+  // pass undefined to use default min width
+  undefined, alignLeftOnInsert)(mediaState);
   let fileExtension;
   if (mediaState.fileName) {
     const extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -130,7 +130,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
   }
   return true;
 };
-export const createMediaSingleNode = (schema, collection, maxWidth = akEditorDefaultLayoutWidth, minWidth = MEDIA_SINGLE_MIN_PIXEL_WIDTH, alignLeftOnInsert) => mediaState => {
+export const createMediaSingleNode = (schema, collection, maxWidth, minWidth, alignLeftOnInsert) => mediaState => {
   const {
     id,
     dimensions,
@@ -162,8 +162,7 @@ export const createMediaSingleNode = (schema, collection, maxWidth = akEditorDef
   } : {};
   const extendedMediaSingleAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
     ...mediaSingleAttrs,
-    // constrain initial width between max width (editor content width) and min width (default to 24)
-    width: Math.max(Math.min(scaledWidth || DEFAULT_IMAGE_WIDTH, maxWidth), minWidth),
+    width: getMediaSingleInitialWidth(scaledWidth, maxWidth, minWidth),
     // TODO: change to use enum
     widthType: 'pixel'
   } : mediaSingleAttrs;

package/dist/es2019/plugins/paste/handlers.js

@@ -8,16 +8,16 @@ import { compose, insideTable, isParagraph, isText, isLinkMark, insideTableCell,
 import { mapSlice } from '../../utils/slice';
 import { INPUT_METHOD } from '../analytics';
 import { GapCursorSelection, Side } from '../selection/gap-cursor-selection';
-import { linkifyContent } from '@atlaskit/editor-common/utils';
 import { runMacroAutoConvert } from '../macro';
 import { insertMediaAsMediaSingle } from '../media/utils/media-single';
-import { pluginKey as textFormattingPluginKey } from '../text-formatting/pm-plugins/main';
 import { addReplaceSelectedTableAnalytics, applyTextMarksToSlice, hasOnlyNodesOfType } from './util';
-import { isListItemNode, isListNode, canLinkBeCreatedInRange } from '@atlaskit/editor-common/utils';
+import { linkifyContent, isListItemNode, isListNode, canLinkBeCreatedInRange } from '@atlaskit/editor-common/utils';
 import { insertSliceForLists } from './edge-cases';
 import { startTrackingPastedMacroPositions, stopTrackingPastedMacroPositions } from './commands';
 import { getPluginState as getPastePluginState } from './pm-plugins/plugin-factory';
 import { doesSelectionWhichStartsOrEndsInListContainEntireList } from '../../utils/lists';
+import { anyMarkActive } from '@atlaskit/editor-common/mark';
+
 // remove text attribute from mention for copy/paste (GDPR)
 export function handleMention(slice, schema) {
   return mapSlice(slice, node => {
@@ -88,8 +88,7 @@ export function handlePasteIntoTaskOrDecisionOrPanel(slice, queueCardsFromChange
     }
     const filters = [linkifyContent(schema)];
     const selectionMarks = selection.$head.marks();
-    const textFormattingState = textFormattingPluginKey.getState(state);
-    if (selection instanceof TextSelection && Array.isArray(selectionMarks) && selectionMarks.length > 0 && hasOnlyNodesOfType(paragraph, text, emoji, mention, hardBreak)(slice) && (!codeMark.isInSet(selectionMarks) || textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.codeActive) // for codeMarks let's make sure mark is active
+    if (selection instanceof TextSelection && Array.isArray(selectionMarks) && selectionMarks.length > 0 && hasOnlyNodesOfType(paragraph, text, emoji, mention, hardBreak)(slice) && (!codeMark.isInSet(selectionMarks) || anyMarkActive(state, codeMark)) // check if there is a code mark anywhere in the selection
     ) {
       filters.push(applyTextMarksToSlice(schema, selection.$head.marks()));
     }
@@ -386,11 +385,10 @@ export function handlePastePreservingMarks(slice, queueCardsFromChangedTr) {
     if (selectionMarks.length === 0) {
       return false;
     }
-    const textFormattingState = textFormattingPluginKey.getState(state);
 
     // special case for codeMark: will preserve mark only if codeMark is currently active
     // won't preserve mark if cursor is on the edge on the mark (namely inactive)
-    if (codeMark.isInSet(selectionMarks) && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.codeActive)) {
+    if (codeMark.isInSet(selectionMarks) && !anyMarkActive(state, codeMark)) {
       return false;
     }
     const isPlainTextSlice = slice.content.childCount === 1 && slice.content.firstChild.type === paragraph && slice.content.firstChild.content.childCount === 1 && slice.content.firstChild.firstChild.type === text;

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

@@ -0,0 +1,161 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { toggleMark } from '@atlaskit/editor-common/mark';
+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());