@atlaskit/editor-common 78.10.1 → 78.11.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 78.11.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 78.11.0
+
+### Minor Changes
+
+- [#63691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63691) [`02293e70771b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/02293e70771b) - add allowWidthDetector option to be used to skip width detector in renderer, to make media single works in inline extension like excerpt include
+
+### Patch Changes
+
+- [#78210](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78210) [`cf7638b2d3e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cf7638b2d3e9) - [ux] ED-22329: removed additional CSS added for decisionItem margin-top
+
 ## 78.10.1
 
 ### Patch Changes

package/dist/cjs/extensibility/Extension/InlineExtension/index.js

@@ -6,53 +6,51 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _hooks = require("../../../hooks");
+var _ui = require("../../../ui");
 var _Lozenge = _interopRequireDefault(require("../Lozenge"));
 var _styles = require("../styles");
 var _styles2 = require("./styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } } /** @jsx jsx */
-var InlineExtension = exports.default = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(InlineExtension, _Component);
-  var _super = _createSuper(InlineExtension);
-  function InlineExtension() {
-    (0, _classCallCheck2.default)(this, InlineExtension);
-    return _super.apply(this, arguments);
+/** @jsx jsx */
+
+var InlineExtension = function InlineExtension(props) {
+  var node = props.node,
+    pluginInjectionApi = props.pluginInjectionApi,
+    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    isNodeSelected = props.isNodeSelected,
+    children = props.children;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  var hasChildren = !!children;
+  var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
+  var rendererContainerWidth = widthState ? widthState.width - _editorSharedStyles.akEditorGutterPadding * 2 : 0;
+  var extendedInlineExtension = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') || false;
+  var inlineExtensionInternal = (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
+    node: node,
+    isNodeSelected: isNodeSelected,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), (0, _react2.jsx)("div", {
+    css: [_styles2.wrapperStyle, extendedInlineExtension && _styles2.inlineWrapperStyels],
+    className: "extension-container inline ".concat(className)
+  }, (0, _react2.jsx)("div", {
+    css: _styles.overlay,
+    className: "extension-overlay"
+  }), children ? children : (0, _react2.jsx)(_Lozenge.default, {
+    node: node,
+    isNodeSelected: isNodeSelected,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  })));
+  if (extendedInlineExtension) {
+    return (0, _react2.jsx)(_ui.WidthContext.Provider, {
+      value: (0, _ui.createWidthContext)(rendererContainerWidth)
+    }, inlineExtensionInternal);
   }
-  (0, _createClass2.default)(InlineExtension, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        node = _this$props.node,
-        children = _this$props.children,
-        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
-        isNodeSelected = _this$props.isNodeSelected;
-      var hasChildren = !!children;
-      var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
-      return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
-        node: node,
-        isNodeSelected: isNodeSelected,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-      }), (0, _react2.jsx)("div", {
-        css: _styles2.wrapperStyle,
-        className: "extension-container inline ".concat(className)
-      }, (0, _react2.jsx)("div", {
-        css: _styles.overlay,
-        className: "extension-overlay"
-      }), children ? children : (0, _react2.jsx)(_Lozenge.default, {
-        node: node,
-        isNodeSelected: isNodeSelected,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-      })));
-    }
-  }]);
-  return InlineExtension;
-}(_react.Component);
+  return inlineExtensionInternal;
+};
+var _default = exports.default = InlineExtension;

package/dist/cjs/extensibility/Extension/InlineExtension/styles.js

@@ -1,12 +1,39 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyle = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.wrapperStyle = exports.inlineWrapperStyels = void 0;
 var _react = require("@emotion/react");
 var _styles = require("../styles");
-var _templateObject;
-var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  cursor: pointer;\n  display: inline-flex;\n  margin: 1px 1px ", ";\n\n  > img {\n    border-radius: ", ";\n  }\n\n  &::after,\n  &::before {\n    vertical-align: text-top;\n    display: inline-block;\n    width: 1px;\n    content: '';\n  }\n\n  &.with-children {\n    padding: 0;\n    background: ", ";\n  }\n"])), _styles.wrapperDefault, "var(--ds-space-050, 4px)", "var(--ds-border-radius, 3px)", "var(--ds-background-neutral-subtle, white)");
+var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_styles.wrapperDefault, {
+  cursor: 'pointer',
+  display: 'inline-flex',
+  margin: "1px 1px ".concat("var(--ds-space-050, 4px)"),
+  '> img': {
+    borderRadius: "var(--ds-border-radius, 3px)"
+  },
+  '&::after, &::before': {
+    verticalAlign: 'text-top',
+    display: 'inline-block',
+    width: '1px',
+    content: "''"
+  },
+  '&.with-children': {
+    padding: 0,
+    background: "var(--ds-background-neutral-subtle, white)"
+  }
+});
+var inlineWrapperStyels = exports.inlineWrapperStyels = (0, _react.css)({
+  maxWidth: '100%',
+  display: 'inline-block',
+  '&::after, &::before': {
+    display: 'block'
+  },
+  'tr &': {
+    maxWidth: 'inherit'
+  },
+  '.rich-media-item': {
+    maxWidth: '100%'
+  }
+});

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -233,7 +233,8 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
           return /*#__PURE__*/_react.default.createElement(_InlineExtension.default, {
             node: node,
             showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-            isNodeSelected: selectedNode === node
+            isNodeSelected: selectedNode === node,
+            pluginInjectionApi: pluginInjectionApi
           }, extensionHandlerResult);
         default:
           return null;

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.10.1";
+var packageVersion = "78.11.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.10.1";
+var packageVersion = "78.11.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -34,7 +34,9 @@ function MediaSingle(_ref) {
     editorWidth = _ref.lineLength,
     _ref$hasFallbackConta = _ref.hasFallbackContainer,
     hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
-    handleMediaSingleRef = _ref.handleMediaSingleRef;
+    handleMediaSingleRef = _ref.handleMediaSingleRef,
+    _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
+    isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline;
   var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
   var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   var children = _react.default.Children.toArray(propsChildren);
@@ -93,7 +95,8 @@ function MediaSingle(_ref) {
       containerWidth: containerWidth,
       mediaSingleWidth: mediaSingleWidth,
       fullWidthMode: fullWidthMode,
-      isExtendedResizeExperienceOn: isPixelWidth
+      isExtendedResizeExperienceOn: isPixelWidth,
+      isInsideOfInlineExtension: isInsideOfInlineExtension
     }),
     "data-layout": layout,
     "data-width": mediaSingleWidth,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MediaWrapper = exports.MediaSingleDimensionHelper = exports.MediaBorderGapFiller = void 0;
 exports.calcLegacyWidth = calcLegacyWidth;
+exports.calcLegacyWidthForInline = calcLegacyWidthForInline;
 exports.calcResizedWidth = calcResizedWidth;
 exports.mediaWrapperStyle = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -28,11 +29,17 @@ function float(layout) {
       return 'none';
   }
 }
-function getWidthIfFullWidthMode(width) {
-  return width > _editorSharedStyles.akEditorFullWidthLayoutWidth ? '100%' : "".concat(width, "px");
+function getWidthIfFullWidthMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
+  if (isInsideOfInlineExtension) {
+    return originalWidth > _editorSharedStyles.akEditorFullWidthLayoutWidth ? "".concat(Math.min(containerWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth), "px") : "".concat(originalWidth, "px");
+  }
+  return originalWidth > _editorSharedStyles.akEditorFullWidthLayoutWidth ? '100%' : "".concat(originalWidth, "px");
 }
-function getWidthIfDefaultMode(width) {
-  return width > _editorSharedStyles.akEditorFullPageMaxWidth ? '100%' : "".concat(width, "px");
+function getWidthIfDefaultMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
+  if (isInsideOfInlineExtension) {
+    return originalWidth > _editorSharedStyles.akEditorFullPageMaxWidth ? "".concat(Math.min(containerWidth, _editorSharedStyles.akEditorDefaultLayoutWidth), "px") : "".concat(originalWidth, "px");
+  }
+  return originalWidth > _editorSharedStyles.akEditorFullPageMaxWidth ? '100%' : "".concat(originalWidth, "px");
 }
 
 /**
@@ -46,6 +53,7 @@ function calcLegacyWidth(layout, width) {
   var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var fullWidthMode = arguments.length > 3 ? arguments[3] : undefined;
   var isResized = arguments.length > 4 ? arguments[4] : undefined;
+  var isInsideOfInlineExtension = arguments.length > 5 ? arguments[5] : undefined;
   switch (layout) {
     case 'align-start':
     case 'align-end':
@@ -53,11 +61,37 @@ function calcLegacyWidth(layout, width) {
     case 'wrap-left':
       return width > containerWidth / 2 ? 'calc(50% - 12px)' : "".concat(width, "px");
     case 'wide':
-      return (0, _breakout.calcWideWidth)(containerWidth);
+      return isInsideOfInlineExtension ? (0, _breakout.calcWideWidth)(containerWidth, Infinity, "".concat(containerWidth, "px")) : (0, _breakout.calcWideWidth)(containerWidth);
+    case 'full-width':
+      return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
+    default:
+      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth, isInsideOfInlineExtension) : getWidthIfDefaultMode(width, containerWidth, isInsideOfInlineExtension);
+  }
+}
+
+/**
+ * Calculates the image width for non-resized images.
+ *
+ * If an image has not been resized using the pctWidth attribute,
+ * then an image in wide or full-width can not be wider than the image's
+ * original width.
+ */
+function calcLegacyWidthForInline(layout, width) {
+  var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var fullWidthMode = arguments.length > 3 ? arguments[3] : undefined;
+  var isResized = arguments.length > 4 ? arguments[4] : undefined;
+  switch (layout) {
+    case 'align-start':
+    case 'align-end':
+    case 'wrap-right':
+    case 'wrap-left':
+      return width > containerWidth / 2 ? 'calc(50% - 12px)' : "".concat(width, "px");
+    case 'wide':
+      return (0, _breakout.calcWideWidth)(containerWidth, Infinity, "".concat(containerWidth, "px"));
     case 'full-width':
       return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
     default:
-      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width) : getWidthIfDefaultMode(width);
+      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth) : getWidthIfDefaultMode(width, containerWidth);
   }
 }
 
@@ -122,8 +156,10 @@ var MediaSingleDimensionHelper = exports.MediaSingleDimensionHelper = function M
     width = _ref.width,
     isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
     _ref$isNestedNode = _ref.isNestedNode,
-    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] &,\n  [data-panel-type] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n\n  float: ", ";\n  margin: ", ";\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  ", ";\n"])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' &&
+    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode,
+    _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
+    isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline;
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] &,\n  [data-panel-type] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n\n  float: ", ";\n  margin: ", ";\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  ", ";\n"])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension), layout === 'full-width' &&
   /* This causes issues for new experience where we don't strip layout attributes
    when copying top-level node and pasting into a table/layout,
    because full-width layout will remain, causing node to be edge-to-edge */

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

@@ -11,9 +11,8 @@ var _styles = require("../../styles");
 
 // Wraps the navigation bar and extensionFrames
 var mbeExtensionContainer = (0, _react.css)({
-  background: 'transpaent !important',
+  background: 'transparent !important',
   'padding:': {
-    bottom: "var(--ds-space-100, 8px)".concat(" !important"),
     left: "var(--ds-space-100, 8px)".concat(" !important"),
     right: "var(--ds-space-100, 8px)".concat(" !important")
   },
@@ -65,12 +64,6 @@ var extensionFrameContent = (0, _react.css)({
   },
   '.extensionView-content-wrap': {
     marginTop: "var(--ds-space-100, 8px)".concat(" !important")
-  },
-  '.decisionItemView-content-wrap': {
-    marginTop: '0px !important'
-  },
-  '.decisionItemView-content-wrap > [data-decision-wrapper]': {
-    marginTop: '0px !important'
   }
 });
 var sharedMultiBodiedExtensionStyles = exports.sharedMultiBodiedExtensionStyles = {

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,20 +9,15 @@ exports.WidthProvider = exports.WidthContext = exports.WidthConsumer = void 0;
 exports.createWidthContext = createWidthContext;
 exports.getBreakpoint = getBreakpoint;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _widthDetector = require("@atlaskit/width-detector");
 var _templateObject;
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } } /** @jsx jsx */
+/** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var SCROLLBAR_WIDTH = 30;
 function getBreakpoint() {
   var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -44,43 +40,33 @@ function createWidthContext() {
 var WidthContext = exports.WidthContext = /*#__PURE__*/_react.default.createContext(createWidthContext());
 var Provider = WidthContext.Provider,
   Consumer = exports.WidthConsumer = WidthContext.Consumer;
-var WidthProvider = exports.WidthProvider = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(WidthProvider, _React$Component);
-  var _super = _createSuper(WidthProvider);
-  function WidthProvider(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, WidthProvider);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      width: 0
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setWidth", (0, _rafSchd.default)(function (width) {
-      // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
-      if (Math.abs(_this.state.width - width) < SCROLLBAR_WIDTH) {
-        return;
-      }
-      _this.setState({
-        width: width
-      });
-    }));
-    if (typeof document !== 'undefined') {
-      _this.state.width = document.body.offsetWidth;
+var WidthProvider = exports.WidthProvider = function WidthProvider(_ref) {
+  var className = _ref.className,
+    shouldCheckExistingValue = _ref.shouldCheckExistingValue,
+    children = _ref.children;
+  var existingContextValue = _react.default.useContext(WidthContext);
+  var _React$useState = _react.default.useState(typeof document !== 'undefined' ? document.body.offsetWidth : 0),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
+  var providerValue = _react.default.useMemo(function () {
+    return createWidthContext(width);
+  }, [width]);
+  var updateWidth = (0, _rafSchd.default)(function (nextWidth) {
+    // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
+    if (Math.abs(width - nextWidth) < SCROLLBAR_WIDTH) {
+      return;
     }
-    return _this;
-  }
-  (0, _createClass2.default)(WidthProvider, [{
-    key: "render",
-    value: function render() {
-      return (0, _react2.jsx)("div", {
-        css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          position: relative;\n          width: 100%;\n        "]))),
-        className: this.props.className
-      }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
-        setWidth: this.setWidth,
-        offscreen: true
-      }), (0, _react2.jsx)(Provider, {
-        value: createWidthContext(this.state.width)
-      }, this.props.children));
-    }
-  }]);
-  return WidthProvider;
-}(_react.default.Component);
+    setWidth(nextWidth);
+  });
+  var skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
+  return (0, _react2.jsx)("div", {
+    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        position: relative;\n        width: 100%;\n      "]))),
+    className: className
+  }, !skipWidthDetection && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_widthDetector.WidthObserver, {
+    setWidth: updateWidth,
+    offscreen: true
+  }), (0, _react2.jsx)(Provider, {
+    value: providerValue
+  }, children)), skipWidthDetection && children);
+};

package/dist/cjs/ui/index.js

@@ -269,6 +269,12 @@ Object.defineProperty(exports, "clearNextSiblingMarginTopStyle", {
     return _clearNextSiblingMarginTop.clearNextSiblingMarginTopStyle;
   }
 });
+Object.defineProperty(exports, "createWidthContext", {
+  enumerable: true,
+  get: function get() {
+    return _WidthProvider.createWidthContext;
+  }
+});
 Object.defineProperty(exports, "expandLayoutWrapperStyle", {
   enumerable: true,
   get: function get() {

package/dist/es2019/extensibility/Extension/InlineExtension/index.js

@@ -1,33 +1,48 @@
 /** @jsx jsx */
-import React, { Component, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
+import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useSharedPluginState } from '../../../hooks';
+import { createWidthContext, WidthContext } from '../../../ui';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
-import { wrapperStyle } from './styles';
-export default class InlineExtension extends Component {
-  render() {
-    const {
-      node,
-      children,
-      showMacroInteractionDesignUpdates,
-      isNodeSelected
-    } = this.props;
-    const hasChildren = !!children;
-    const className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
-    return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
-      node: node,
-      isNodeSelected: isNodeSelected,
-      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-    }), jsx("div", {
-      css: wrapperStyle,
-      className: `extension-container inline ${className}`
-    }, jsx("div", {
-      css: overlay,
-      className: "extension-overlay"
-    }), children ? children : jsx(ExtensionLozenge, {
-      node: node,
-      isNodeSelected: isNodeSelected,
-      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-    })));
+import { inlineWrapperStyels, wrapperStyle } from './styles';
+const InlineExtension = props => {
+  const {
+    node,
+    pluginInjectionApi,
+    showMacroInteractionDesignUpdates,
+    isNodeSelected,
+    children
+  } = props;
+  const {
+    widthState
+  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  const hasChildren = !!children;
+  const className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
+  const rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
+  const extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
+  const inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
+    node: node,
+    isNodeSelected: isNodeSelected,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), jsx("div", {
+    css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
+    className: `extension-container inline ${className}`
+  }, jsx("div", {
+    css: overlay,
+    className: "extension-overlay"
+  }), children ? children : jsx(ExtensionLozenge, {
+    node: node,
+    isNodeSelected: isNodeSelected,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  })));
+  if (extendedInlineExtension) {
+    return jsx(WidthContext.Provider, {
+      value: createWidthContext(rendererContainerWidth)
+    }, inlineExtensionInternal);
   }
-}
+  return inlineExtensionInternal;
+};
+export default InlineExtension;

package/dist/es2019/extensibility/Extension/InlineExtension/styles.js

@@ -1,26 +1,33 @@
 import { css } from '@emotion/react';
 import { wrapperDefault } from '../styles';
-export const wrapperStyle = css`
-  ${wrapperDefault}
-
-  cursor: pointer;
-  display: inline-flex;
-  margin: 1px 1px ${"var(--ds-space-050, 4px)"};
-
-  > img {
-    border-radius: ${"var(--ds-border-radius, 3px)"};
+export const wrapperStyle = css(wrapperDefault, {
+  cursor: 'pointer',
+  display: 'inline-flex',
+  margin: `1px 1px ${"var(--ds-space-050, 4px)"}`,
+  '> img': {
+    borderRadius: "var(--ds-border-radius, 3px)"
+  },
+  '&::after, &::before': {
+    verticalAlign: 'text-top',
+    display: 'inline-block',
+    width: '1px',
+    content: "''"
+  },
+  '&.with-children': {
+    padding: 0,
+    background: "var(--ds-background-neutral-subtle, white)"
   }
-
-  &::after,
-  &::before {
-    vertical-align: text-top;
-    display: inline-block;
-    width: 1px;
-    content: '';
+});
+export const inlineWrapperStyels = css({
+  maxWidth: '100%',
+  display: 'inline-block',
+  '&::after, &::before': {
+    display: 'block'
+  },
+  'tr &': {
+    maxWidth: 'inherit'
+  },
+  '.rich-media-item': {
+    maxWidth: '100%'
   }
-
-  &.with-children {
-    padding: 0;
-    background: ${"var(--ds-background-neutral-subtle, white)"};
-  }
-`;
+});

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -188,7 +188,8 @@ export class ExtensionComponent extends Component {
         return /*#__PURE__*/React.createElement(InlineExtension, {
           node: node,
           showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-          isNodeSelected: selectedNode === node
+          isNodeSelected: selectedNode === node,
+          pluginInjectionApi: pluginInjectionApi
         }, extensionHandlerResult);
       default:
         return null;

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.10.1";
+const packageVersion = "78.11.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.10.1";
+const packageVersion = "78.11.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {