@atlaskit/editor-core 187.31.5 → 187.31.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
 
+## 187.31.7
+
+### Patch Changes
+
+- [`c3de9f17631`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3de9f17631) - ED-19359:
+  editor-core: Migrated skipped test: packages/editor/editor-core/src/tests/integration/gap-cursor/gap-cursor.ts to Libra
+  Libra: added a new page-model(editor-confirmation-popup-base-model.ts) to libra package and updated editor extension model
+- [`a9feb9fae6e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a9feb9fae6e) - [ED-19672] Workaround tofix detached Extension calling NodeView.getPos
+
+## 187.31.6
+
+### Patch Changes
+
+- [`e0f020abea0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0f020abea0) - created new plugin for unsupported-content, moved code and styles
+- [`dcf5ea47df4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dcf5ea47df4) - [ux] Display 'Full width' in media single floating toolbar when the node reaches full width
+- Updated dependencies
+
 ## 187.31.5
 
 ### Patch Changes

package/dist/cjs/labs/next/presets/default.js

@@ -12,7 +12,7 @@ var _clearMarksOnChangeToEmptyDocument = _interopRequireDefault(require("../../.
 var _editorPluginHyperlink = require("@atlaskit/editor-plugin-hyperlink");
 var _editorPluginTextFormatting = require("@atlaskit/editor-plugin-text-formatting");
 var _editorPluginWidth = require("@atlaskit/editor-plugin-width");
-var _unsupportedContent = _interopRequireDefault(require("../../../plugins/unsupported-content"));
+var _editorPluginUnsupportedContent = require("@atlaskit/editor-plugin-unsupported-content");
 var _base = require("../../../plugins/base");
 var _editorPluginFocus = require("@atlaskit/editor-plugin-focus");
 var _editorPluginEditorDisabled = require("@atlaskit/editor-plugin-editor-disabled");
@@ -76,7 +76,7 @@ function createDefaultPreset(options) {
     return builder;
   }).add([_editorPluginHyperlink.hyperlinkPlugin, options.hyperlinkOptions]).add([_editorPluginTextFormatting.textFormattingPlugin, options.textFormatting]).add(_editorPluginWidth.widthPlugin).add([_quickInsert.default, options.quickInsert]).add([_typeAhead.default, options.typeAhead || {
     createAnalyticsEvent: options.createAnalyticsEvent
-  }]).add(_unsupportedContent.default).add(_editorPluginEditorDisabled.editorDisabledPlugin).add([_submitEditor.default, options.submitEditor]).add(_fakeTextCursor.default).add(_floatingToolbar.default).add([_selection.default, options.selection]).add([_codeBlock.default, options.codeBlock || {
+  }]).add(_editorPluginUnsupportedContent.unsupportedContentPlugin).add(_editorPluginEditorDisabled.editorDisabledPlugin).add([_submitEditor.default, options.submitEditor]).add(_fakeTextCursor.default).add(_floatingToolbar.default).add([_selection.default, options.selection]).add([_codeBlock.default, options.codeBlock || {
     appearance: 'full-page'
   }]);
   return preset;

package/dist/cjs/plugins/extension/ui/Extension/Extension/index.js

@@ -38,8 +38,17 @@ function ExtensionWithPluginState(props) {
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
   var removeBorder = hideFrame && !isMobile && !hasBody || false;
-  var pos = typeof props.getPos === 'function' ? props.getPos() : undefined;
-  var isTopLevelNode = typeof pos !== 'undefined' && !isNaN(pos) && props.view.state.doc.resolve(pos).depth === 0;
+  var getPos = props.getPos,
+    view = props.view;
+  var isTopLevelNode = _react.default.useMemo(function () {
+    try {
+      var pos = typeof getPos === 'function' ? getPos() : undefined;
+      return typeof pos !== 'undefined' && !isNaN(pos) && view.state.doc.resolve(pos).depth === 0;
+    } catch (e) {
+      return false;
+    }
+    return false;
+  }, [view, getPos]);
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&

package/dist/cjs/plugins/index.js

@@ -353,12 +353,6 @@ Object.defineProperty(exports, "undoRedoPlugin", {
     return _undoRedo.default;
   }
 });
-Object.defineProperty(exports, "unsupportedContentPlugin", {
-  enumerable: true,
-  get: function get() {
-    return _unsupportedContent.default;
-  }
-});
 Object.defineProperty(exports, "viewUpdateSubscriptionPlugin", {
   enumerable: true,
   get: function get() {
@@ -395,7 +389,6 @@ var _submitEditor = _interopRequireDefault(require("./submit-editor"));
 var _tasksAndDecisions = _interopRequireDefault(require("./tasks-and-decisions"));
 var _textColor = _interopRequireDefault(require("./text-color"));
 var _typeAhead = _interopRequireDefault(require("./type-ahead"));
-var _unsupportedContent = _interopRequireDefault(require("./unsupported-content"));
 var _floatingToolbar = _interopRequireDefault(require("./floating-toolbar"));
 var _status = _interopRequireDefault(require("./status"));
 var _breakout = _interopRequireDefault(require("./breakout"));

package/dist/cjs/plugins/media/toolbar/index.js

@@ -264,20 +264,17 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 
     // Pixel Entry Toolbar Support
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && allowResizing) {
+      var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
       var sizeInput = {
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
           var _widthPlugin$sharedSt2;
-          if (!editorView) {
+          if (!editorView || !selectedMediaSingleNode) {
             return null;
           }
           var state = editorView.state,
             dispatch = editorView.dispatch;
-          var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
-          if (!selectedMediaSingleNode) {
-            return null;
-          }
           var contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
           var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
           if (!selectedMediaNode) {
@@ -340,7 +337,24 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
       };
       if (pluginState.isResizing) {
-        // If the image is resizing then only return `sizeInput` as the only toolbar item
+        // If the image is resizing
+        // then return pixel entry component or full width label as the only toolbar item
+        if (!selectedMediaSingleNode) {
+          return [];
+        }
+        var layout = selectedMediaSingleNode.node.attrs.layout;
+        if (layout === 'full-width') {
+          var fullWidthLabel = {
+            type: 'custom',
+            fallback: [],
+            render: function render() {
+              return /*#__PURE__*/_react.default.createElement(_PixelEntry.FullWidthDisplay, {
+                intl: intl
+              });
+            }
+          };
+          return [fullWidthLabel];
+        }
         return [sizeInput];
       }
       toolbarButtons.push(sizeInput);

package/dist/cjs/plugins/media/ui/PixelEntry/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PixelEntry = void 0;
+exports.PixelEntry = exports.FullWidthDisplay = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
@@ -187,4 +187,11 @@ var PixelEntry = function PixelEntry(_ref) {
     }, formatMessage(_messages.messages.submitButtonText))));
   }));
 };
-exports.PixelEntry = PixelEntry;
+exports.PixelEntry = PixelEntry;
+var FullWidthDisplay = function FullWidthDisplay(_ref5) {
+  var formatMessage = _ref5.intl.formatMessage;
+  return (0, _react.jsx)("div", {
+    css: _styles.pixelSizingFullWidthLabelStyles
+  }, (0, _react.jsx)("span", null, formatMessage(_messages.messages.fullWidthLabel)));
+};
+exports.FullWidthDisplay = FullWidthDisplay;

package/dist/cjs/plugins/media/ui/PixelEntry/messages.js

@@ -36,6 +36,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Submit',
     description: 'The text give to the hidden submit button'
   },
+  fullWidthLabel: {
+    id: 'fabric.editor.image.fullWidthLabel',
+    defaultMessage: 'Full-width',
+    description: 'The media has reached its maximum width'
+  },
   migrationButtonText: {
     id: 'fabric.editor.media.pixelEntry.migrationButtonText',
     defaultMessage: 'Convert to pixels',

package/dist/cjs/plugins/media/ui/PixelEntry/styles.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pixelSizingWrapper = exports.pixelSizingWidthInput = exports.pixelSizingLabel = exports.pixelSizingInput = exports.pixelSizingHeightInput = exports.pixelEntryHiddenSubmit = exports.pixelEntryForm = void 0;
+exports.pixelSizingWrapper = exports.pixelSizingWidthInput = exports.pixelSizingLabel = exports.pixelSizingInput = exports.pixelSizingHeightInput = exports.pixelSizingFullWidthLabelStyles = exports.pixelEntryHiddenSubmit = exports.pixelEntryForm = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
 var pixelSizingWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 1fr 1em 1fr 0;\n  grid-template-rows: auto;\n  grid-template-areas: 'widthinput label heightinput submit';\n  width: ", "px;\n  text-align: center;\n  height: ", ";\n\n  // Atlaskit fieldset does not allow style override\n  & > * {\n    margin-top: 0 !important;\n  }\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
 exports.pixelSizingWrapper = pixelSizingWrapper;
@@ -22,4 +22,6 @@ exports.pixelSizingWidthInput = pixelSizingWidthInput;
 var pixelSizingHeightInput = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: heightinput;\n"])));
 exports.pixelSizingHeightInput = pixelSizingHeightInput;
 var pixelEntryHiddenSubmit = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: submit;\n  visibility: hidden;\n  width: 0;\n  height: 0;\n"])));
-exports.pixelEntryHiddenSubmit = pixelEntryHiddenSubmit;
+exports.pixelEntryHiddenSubmit = pixelEntryHiddenSubmit;
+var pixelSizingFullWidthLabelStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n  height: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
+exports.pixelSizingFullWidthLabelStyles = pixelSizingFullWidthLabelStyles;

package/dist/cjs/plugins/selection/gap-cursor/utils.js

@@ -9,7 +9,6 @@ exports.getMediaNearPos = getMediaNearPos;
 exports.isTextBlockNearPos = exports.isLeftCursor = exports.isIgnoredClick = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _selection = require("./selection");
-var _styles2 = require("../../unsupported-content/styles");
 var _CaptionPlaceholder = require("../../media/ui/CaptionPlaceholder");
 var isLeftCursor = function isLeftCursor(side) {
   return side === _selection.Side.LEFT;
@@ -119,7 +118,7 @@ var isIgnoredClick = function isIgnoredClick(elem) {
 
   // Check if unsupported node selection
   // (without this, selection requires double clicking in FF due to posAtCoords differences)
-  if (elem.closest(".".concat(_styles2.UnsupportedSharedCssClassName.BLOCK_CONTAINER))) {
+  if (elem.closest(".".concat(_styles.UnsupportedSharedCssClassName.BLOCK_CONTAINER))) {
     return true;
   }
   return false;

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

@@ -11,28 +11,27 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _styles2 = require("../../plugins/unsupported-content/styles");
-var _styles3 = require("../../plugins/collab-edit/styles");
-var _styles4 = require("../../plugins/selection/gap-cursor/styles");
+var _styles2 = require("../../plugins/collab-edit/styles");
+var _styles3 = require("../../plugins/selection/gap-cursor/styles");
 var _commonStyles = require("@atlaskit/editor-plugin-table/ui/common-styles");
-var _styles5 = require("../../plugins/placeholder/styles");
-var _styles6 = require("../../plugins/block-type/styles");
-var _styles7 = require("../../plugins/code-block/styles");
-var _styles8 = require("../../plugins/rule/styles");
-var _styles9 = require("../../plugins/media/styles");
-var _styles10 = require("../../plugins/layout/styles");
-var _styles11 = require("../../plugins/panel/styles");
-var _styles12 = require("../../plugins/fake-text-cursor/styles");
-var _styles13 = require("../../plugins/mentions/styles");
-var _styles14 = require("../../plugins/emoji/styles");
-var _styles15 = require("../../plugins/placeholder-text/styles");
-var _styles16 = require("../../plugins/extension/ui/styles");
-var _styles17 = require("../../plugins/expand/ui/styles");
+var _styles4 = require("../../plugins/placeholder/styles");
+var _styles5 = require("../../plugins/block-type/styles");
+var _styles6 = require("../../plugins/code-block/styles");
+var _styles7 = require("../../plugins/rule/styles");
+var _styles8 = require("../../plugins/media/styles");
+var _styles9 = require("../../plugins/layout/styles");
+var _styles10 = require("../../plugins/panel/styles");
+var _styles11 = require("../../plugins/fake-text-cursor/styles");
+var _styles12 = require("../../plugins/mentions/styles");
+var _styles13 = require("../../plugins/emoji/styles");
+var _styles14 = require("../../plugins/placeholder-text/styles");
+var _styles15 = require("../../plugins/extension/ui/styles");
+var _styles16 = require("../../plugins/expand/ui/styles");
 var _style = require("../../plugins/media/pm-plugins/alt-text/style");
-var _styles18 = require("../../plugins/find-replace/styles");
-var _styles19 = require("../../plugins/tasks-and-decisions/styles");
-var _styles20 = require("../../plugins/status/styles");
-var _styles21 = require("../../plugins/date/styles");
+var _styles17 = require("../../plugins/find-replace/styles");
+var _styles18 = require("../../plugins/tasks-and-decisions/styles");
+var _styles19 = require("../../plugins/status/styles");
+var _styles20 = require("../../plugins/date/styles");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _templateObject, _templateObject2, _templateObject3;
@@ -45,7 +44,7 @@ var listsStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _
 var contentStyles = function contentStyles(props) {
   return (0, _react2.css)(_templateObject3 || (_templateObject3 = (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)", _styles15.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles.codeMarkSharedStyles)(props), _styles.textColorStyles, listsStyles, (0, _styles8.ruleStyles)(props), _styles9.mediaStyles, (0, _styles10.layoutStyles)(props), _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles11.panelStyles)(props), _styles12.fakeCursorStyles, _styles13.mentionsStyles, _styles14.emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles16.extensionStyles, (0, _styles17.expandStyles)(props), _styles18.findReplaceStyles, _styles19.taskDecisionStyles, _styles20.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles.smartCardStyles, _styles.smartCardSharedStyles, _styles21.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)", _styles14.placeholderTextStyles, _styles4.placeholderStyles, (0, _styles6.codeBlockStyles)(props), (0, _styles5.blocktypeStyles)(props), (0, _styles.codeMarkSharedStyles)(props), _styles.textColorStyles, listsStyles, (0, _styles7.ruleStyles)(props), _styles8.mediaStyles, (0, _styles9.layoutStyles)(props), _styles2.telepointerStyle, _styles3.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles10.panelStyles)(props), _styles11.fakeCursorStyles, _styles12.mentionsStyles, _styles13.emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles15.extensionStyles, (0, _styles16.expandStyles)(props), _styles17.findReplaceStyles, _styles18.taskDecisionStyles, _styles19.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles.smartCardStyles, _styles.smartCardSharedStyles, _styles20.dateStyles, _styles.embedCardStyles, _styles.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.31.5";
+var version = "187.31.7";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/labs/next/presets/default.js

@@ -6,7 +6,7 @@ import clearMarksOnChangeToEmptyDocumentPlugin from '../../../plugins/clear-mark
 import { hyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
 import { textFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import unsupportedContentPlugin from '../../../plugins/unsupported-content';
+import { unsupportedContentPlugin } from '@atlaskit/editor-plugin-unsupported-content';
 import { basePlugin } from '../../../plugins/base';
 import { focusPlugin } from '@atlaskit/editor-plugin-focus';
 import { editorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';

package/dist/es2019/plugins/extension/ui/Extension/Extension/index.js

@@ -27,8 +27,19 @@ function ExtensionWithPluginState(props) {
   const isMobile = editorAppearance === 'mobile';
   const hasChildren = !!children;
   const removeBorder = hideFrame && !isMobile && !hasBody || false;
-  const pos = typeof props.getPos === 'function' ? props.getPos() : undefined;
-  const isTopLevelNode = typeof pos !== 'undefined' && !isNaN(pos) && props.view.state.doc.resolve(pos).depth === 0;
+  const {
+    getPos,
+    view
+  } = props;
+  const isTopLevelNode = React.useMemo(() => {
+    try {
+      const pos = typeof getPos === 'function' ? getPos() : undefined;
+      return typeof pos !== 'undefined' && !isNaN(pos) && view.state.doc.resolve(pos).depth === 0;
+    } catch (e) {
+      return false;
+    }
+    return false;
+  }, [view, getPos]);
   const shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&

package/dist/es2019/plugins/index.js

@@ -29,7 +29,6 @@ export { default as submitEditorPlugin } from './submit-editor';
 export { default as tasksAndDecisionsPlugin } from './tasks-and-decisions';
 export { default as textColorPlugin } from './text-color';
 export { default as typeAheadPlugin } from './type-ahead';
-export { default as unsupportedContentPlugin } from './unsupported-content';
 export { default as floatingToolbarPlugin } from './floating-toolbar';
 export { default as statusPlugin } from './status';
 export { default as breakoutPlugin } from './breakout';

package/dist/es2019/plugins/media/toolbar/index.js

@@ -25,7 +25,7 @@ import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/s
 import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
-import { PixelEntry } from '../ui/PixelEntry';
+import { PixelEntry, FullWidthDisplay } from '../ui/PixelEntry';
 import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, calcMinWidth, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 const remove = (state, dispatch) => {
@@ -266,22 +266,19 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
 
     // Pixel Entry Toolbar Support
     if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing) {
+      const selectedMediaSingleNode = getSelectedMediaSingle(state);
       const sizeInput = {
         type: 'custom',
         fallback: [],
         render: editorView => {
           var _widthPlugin$sharedSt2;
-          if (!editorView) {
+          if (!editorView || !selectedMediaSingleNode) {
             return null;
           }
           const {
             state,
             dispatch
           } = editorView;
-          const selectedMediaSingleNode = getSelectedMediaSingle(state);
-          if (!selectedMediaSingleNode) {
-            return null;
-          }
           const contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
           const selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
           if (!selectedMediaNode) {
@@ -350,7 +347,26 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         }
       };
       if (pluginState.isResizing) {
-        // If the image is resizing then only return `sizeInput` as the only toolbar item
+        // If the image is resizing
+        // then return pixel entry component or full width label as the only toolbar item
+        if (!selectedMediaSingleNode) {
+          return [];
+        }
+        const {
+          layout
+        } = selectedMediaSingleNode.node.attrs;
+        if (layout === 'full-width') {
+          const fullWidthLabel = {
+            type: 'custom',
+            fallback: [],
+            render: () => {
+              return /*#__PURE__*/React.createElement(FullWidthDisplay, {
+                intl: intl
+              });
+            }
+          };
+          return [fullWidthLabel];
+        }
         return [sizeInput];
       }
       toolbarButtons.push(sizeInput);

package/dist/es2019/plugins/media/ui/PixelEntry/index.js

@@ -6,7 +6,7 @@ import Textfield from '@atlaskit/textfield';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button';
 import Form, { Field } from '@atlaskit/form';
-import { pixelSizingInput, pixelSizingLabel, pixelSizingWidthInput, pixelSizingHeightInput, pixelSizingWrapper, pixelEntryForm, pixelEntryHiddenSubmit } from './styles';
+import { pixelSizingInput, pixelSizingLabel, pixelSizingWidthInput, pixelSizingHeightInput, pixelSizingWrapper, pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingFullWidthLabelStyles } from './styles';
 import { messages } from './messages';
 import { PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
 export const PixelEntry = ({
@@ -168,4 +168,13 @@ export const PixelEntry = ({
       type: "submit"
     }, formatMessage(messages.submitButtonText))));
   }));
+};
+export const FullWidthDisplay = ({
+  intl: {
+    formatMessage
+  }
+}) => {
+  return jsx("div", {
+    css: pixelSizingFullWidthLabelStyles
+  }, jsx("span", null, formatMessage(messages.fullWidthLabel)));
 };

package/dist/es2019/plugins/media/ui/PixelEntry/messages.js

@@ -30,6 +30,11 @@ export const messages = defineMessages({
     defaultMessage: 'Submit',
     description: 'The text give to the hidden submit button'
   },
+  fullWidthLabel: {
+    id: 'fabric.editor.image.fullWidthLabel',
+    defaultMessage: 'Full-width',
+    description: 'The media has reached its maximum width'
+  },
   migrationButtonText: {
     id: 'fabric.editor.media.pixelEntry.migrationButtonText',
     defaultMessage: 'Convert to pixels',

package/dist/es2019/plugins/media/ui/PixelEntry/styles.js

@@ -41,4 +41,11 @@ export const pixelEntryHiddenSubmit = css`
   visibility: hidden;
   width: 0;
   height: 0;
+`;
+export const pixelSizingFullWidthLabelStyles = css`
+  min-width: ${PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH}px;
+  height: ${"var(--ds-space-300, 24px)"};
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;

package/dist/es2019/plugins/selection/gap-cursor/utils.js

@@ -1,6 +1,5 @@
-import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { TableSharedCssClassName, UnsupportedSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { Side } from './selection';
-import { UnsupportedSharedCssClassName } from '../../unsupported-content/styles';
 import { CAPTION_PLACEHOLDER_ID } from '../../media/ui/CaptionPlaceholder';
 export const isLeftCursor = side => side === Side.LEFT;
 export function getMediaNearPos(doc, $pos, schema, dir = -1) {

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

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import { jsx, css, useTheme } from '@emotion/react';
-import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles, resizerStyles, gridStyles, smartCardStyles, embedCardStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
+import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles, resizerStyles, gridStyles, smartCardStyles, embedCardStyles, codeBlockInListSafariFix, unsupportedStyles } from '@atlaskit/editor-common/styles';
 import { blockNodesVerticalMargin, editorFontSize } from '@atlaskit/editor-shared-styles';
-import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
 import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
 import { tableStyles } from '@atlaskit/editor-plugin-table/ui/common-styles';

package/dist/es2019/version-wrapper.js

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

package/dist/esm/labs/next/presets/default.js

@@ -6,7 +6,7 @@ import clearMarksOnChangeToEmptyDocumentPlugin from '../../../plugins/clear-mark
 import { hyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
 import { textFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import unsupportedContentPlugin from '../../../plugins/unsupported-content';
+import { unsupportedContentPlugin } from '@atlaskit/editor-plugin-unsupported-content';
 import { basePlugin } from '../../../plugins/base';
 import { focusPlugin } from '@atlaskit/editor-plugin-focus';
 import { editorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';

package/dist/esm/plugins/extension/ui/Extension/Extension/index.js

@@ -31,8 +31,17 @@ function ExtensionWithPluginState(props) {
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
   var removeBorder = hideFrame && !isMobile && !hasBody || false;
-  var pos = typeof props.getPos === 'function' ? props.getPos() : undefined;
-  var isTopLevelNode = typeof pos !== 'undefined' && !isNaN(pos) && props.view.state.doc.resolve(pos).depth === 0;
+  var getPos = props.getPos,
+    view = props.view;
+  var isTopLevelNode = React.useMemo(function () {
+    try {
+      var pos = typeof getPos === 'function' ? getPos() : undefined;
+      return typeof pos !== 'undefined' && !isNaN(pos) && view.state.doc.resolve(pos).depth === 0;
+    } catch (e) {
+      return false;
+    }
+    return false;
+  }, [view, getPos]);
   var shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
   ['full-width', 'wide'].includes(node.attrs.layout) &&

package/dist/esm/plugins/index.js

@@ -29,7 +29,6 @@ export { default as submitEditorPlugin } from './submit-editor';
 export { default as tasksAndDecisionsPlugin } from './tasks-and-decisions';
 export { default as textColorPlugin } from './text-color';
 export { default as typeAheadPlugin } from './type-ahead';
-export { default as unsupportedContentPlugin } from './unsupported-content';
 export { default as floatingToolbarPlugin } from './floating-toolbar';
 export { default as statusPlugin } from './status';
 export { default as breakoutPlugin } from './breakout';

package/dist/esm/plugins/media/toolbar/index.js

@@ -29,7 +29,7 @@ import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/s
 import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
-import { PixelEntry } from '../ui/PixelEntry';
+import { PixelEntry, FullWidthDisplay } from '../ui/PixelEntry';
 import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, calcMinWidth, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 var remove = function remove(state, dispatch) {
@@ -257,20 +257,17 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 
     // Pixel Entry Toolbar Support
     if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing) {
+      var selectedMediaSingleNode = getSelectedMediaSingle(state);
       var sizeInput = {
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
           var _widthPlugin$sharedSt2;
-          if (!editorView) {
+          if (!editorView || !selectedMediaSingleNode) {
             return null;
           }
           var state = editorView.state,
             dispatch = editorView.dispatch;
-          var selectedMediaSingleNode = getSelectedMediaSingle(state);
-          if (!selectedMediaSingleNode) {
-            return null;
-          }
           var contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
           var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
           if (!selectedMediaNode) {
@@ -333,7 +330,24 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
       };
       if (pluginState.isResizing) {
-        // If the image is resizing then only return `sizeInput` as the only toolbar item
+        // If the image is resizing
+        // then return pixel entry component or full width label as the only toolbar item
+        if (!selectedMediaSingleNode) {
+          return [];
+        }
+        var layout = selectedMediaSingleNode.node.attrs.layout;
+        if (layout === 'full-width') {
+          var fullWidthLabel = {
+            type: 'custom',
+            fallback: [],
+            render: function render() {
+              return /*#__PURE__*/React.createElement(FullWidthDisplay, {
+                intl: intl
+              });
+            }
+          };
+          return [fullWidthLabel];
+        }
         return [sizeInput];
       }
       toolbarButtons.push(sizeInput);

package/dist/esm/plugins/media/ui/PixelEntry/index.js

@@ -7,7 +7,7 @@ import Textfield from '@atlaskit/textfield';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button';
 import Form, { Field } from '@atlaskit/form';
-import { pixelSizingInput, pixelSizingLabel, pixelSizingWidthInput, pixelSizingHeightInput, pixelSizingWrapper, pixelEntryForm, pixelEntryHiddenSubmit } from './styles';
+import { pixelSizingInput, pixelSizingLabel, pixelSizingWidthInput, pixelSizingHeightInput, pixelSizingWrapper, pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingFullWidthLabelStyles } from './styles';
 import { messages } from './messages';
 import { PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
 export var PixelEntry = function PixelEntry(_ref) {
@@ -175,4 +175,10 @@ export var PixelEntry = function PixelEntry(_ref) {
       type: "submit"
     }, formatMessage(messages.submitButtonText))));
   }));
+};
+export var FullWidthDisplay = function FullWidthDisplay(_ref5) {
+  var formatMessage = _ref5.intl.formatMessage;
+  return jsx("div", {
+    css: pixelSizingFullWidthLabelStyles
+  }, jsx("span", null, formatMessage(messages.fullWidthLabel)));
 };

package/dist/esm/plugins/media/ui/PixelEntry/messages.js

@@ -30,6 +30,11 @@ export var messages = defineMessages({
     defaultMessage: 'Submit',
     description: 'The text give to the hidden submit button'
   },
+  fullWidthLabel: {
+    id: 'fabric.editor.image.fullWidthLabel',
+    defaultMessage: 'Full-width',
+    description: 'The media has reached its maximum width'
+  },
   migrationButtonText: {
     id: 'fabric.editor.media.pixelEntry.migrationButtonText',
     defaultMessage: 'Convert to pixels',

package/dist/esm/plugins/media/ui/PixelEntry/styles.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { css } from '@emotion/react';
 var PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH = 120;
 export var pixelSizingWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1em 1fr 0;\n  grid-template-rows: auto;\n  grid-template-areas: 'widthinput label heightinput submit';\n  width: ", "px;\n  text-align: center;\n  height: ", ";\n\n  // Atlaskit fieldset does not allow style override\n  & > * {\n    margin-top: 0 !important;\n  }\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");
@@ -8,4 +8,5 @@ export var pixelSizingInput = css(_templateObject3 || (_templateObject3 = _tagge
 export var pixelSizingLabel = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  grid-area: label;\n  line-height: ", ";\n"])), "var(--ds-space-300, 24px)");
 export var pixelSizingWidthInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  grid-area: widthinput;\n"])));
 export var pixelSizingHeightInput = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  grid-area: heightinput;\n"])));
-export var pixelEntryHiddenSubmit = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  grid-area: submit;\n  visibility: hidden;\n  width: 0;\n  height: 0;\n"])));
+export var pixelEntryHiddenSubmit = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  grid-area: submit;\n  visibility: hidden;\n  width: 0;\n  height: 0;\n"])));
+export var pixelSizingFullWidthLabelStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n  height: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), PIXEL_SIZING_WRAPPER_MINIMUM_WIDTH, "var(--ds-space-300, 24px)");