@atlaskit/editor-common 78.10.0 → 78.11.0

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

@@ -163,7 +163,8 @@ export class ExtensionComponent extends Component {
         eventDispatcher: eventDispatcher,
         pluginInjectionApi: pluginInjectionApi,
         editorAppearance: editorAppearance,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+        isNodeSelected: selectedNode === node
       });
     }
     const extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -187,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/extensibility/MultiBodiedExtension/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
@@ -10,10 +10,14 @@ import { useSharedPluginState } from '../../hooks';
 import { sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import { WithPluginState } from '../../with-plugin-state';
+import ExtensionLozenge from '../Extension/Lozenge';
 import { useMultiBodiedExtensionActions } from './action-api';
 import { mbeExtensionWrapperCSS } from './styles';
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
-const getWrapperTitleContent = (imageData, title) => {
+const getWrapperTitleContent = (imageData, title, showMacroInteractionDesignUpdates) => {
+  if (showMacroInteractionDesignUpdates) {
+    return null;
+  }
   if (imageData) {
     const {
       url,
@@ -32,7 +36,8 @@ const getWrapperTitleContent = (imageData, title) => {
     })), title);
   }
   return jsx("div", {
-    className: "extension-title"
+    className: "extension-title",
+    "data-testid": 'multiBodiedExtension-default-lozenge'
   }, jsx(EditorFileIcon, {
     label: title
   }), title);
@@ -45,7 +50,9 @@ const MultiBodiedExtensionWithWidth = ({
   editorView,
   eventDispatcher,
   widthState,
-  editorAppearance
+  editorAppearance,
+  showMacroInteractionDesignUpdates,
+  isNodeSelected
 }) => {
   const {
     parameters,
@@ -98,13 +105,20 @@ const MultiBodiedExtensionWithWidth = ({
     });
     mbeWrapperStyles = breakoutStyles;
   }
-  const wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block');
-  return jsx("div", {
+  const wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
+    'remove-margin-top': showMacroInteractionDesignUpdates
+  });
+  return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: true,
+    customContainerStyles: mbeWrapperStyles
+  }), jsx("div", {
     className: wrapperClassNames,
     css: mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
     style: mbeWrapperStyles
-  }, getWrapperTitleContent(imageData, title), jsx("div", {
+  }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     className: "multiBodiedExtension--container",
     css: containerCssExtended,
     "data-testid": "multiBodiedExtension--container",
@@ -117,7 +131,7 @@ const MultiBodiedExtensionWithWidth = ({
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames",
     ref: articleRef
-  })));
+  }))));
 };
 const MultiBodiedExtensionWithSharedState = props => {
   const {

package/dist/es2019/extensibility/MultiBodiedExtension/styles.js

@@ -2,18 +2,20 @@ import { css } from '@emotion/react';
 import { wrapperDefault } from '../Extension/styles';
 
 // Wrapper the extension title and extensionContainer
-export const mbeExtensionWrapperCSS = css`
-  ${wrapperDefault};
-  cursor: pointer;
-  margin-top: ${"var(--ds-space-250, 24px)"};
-  margin-bottom: ${"var(--ds-space-200, 16px)"};
-  .extension-title {
-    display: flex;
-    align-items: center;
-    line-height: 16px !important;
-    margin-bottom: ${"var(--ds-space-100, 8px)"};
-    margin-left: ${"var(--ds-space-050, 4px)"} !important;
-    margin-right: ${"var(--ds-space-100, 8px)"};
-    padding-top: ${"var(--ds-space-100, 8px)"} !important;
+export const mbeExtensionWrapperCSS = css(wrapperDefault, {
+  '&.remove-margin-top': {
+    marginTop: 0
+  },
+  cursor: 'pointer',
+  marginTop: "var(--ds-space-250, 24px)",
+  marginBottom: "var(--ds-space-200, 16px)",
+  '.extension-title': {
+    display: 'flex',
+    alignItems: 'center',
+    lineHeight: '16px !important',
+    marginBottom: "var(--ds-space-100, 8px)",
+    marginLeft: `${"var(--ds-space-050, 4px)"} !important`,
+    marginRight: "var(--ds-space-100, 8px)",
+    paddingTop: `${"var(--ds-space-100, 8px)"} !important`
   }
-`;
+});

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.0";
+const packageVersion = "78.11.0";
 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.0";
+const packageVersion = "78.11.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -21,7 +21,8 @@ export default function MediaSingle({
   fullWidthMode,
   lineLength: editorWidth,
   hasFallbackContainer = true,
-  handleMediaSingleRef
+  handleMediaSingleRef,
+  isInsideOfInlineExtension = false
 }) {
   const isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
   let mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
@@ -79,7 +80,8 @@ export default function MediaSingle({
       containerWidth,
       mediaSingleWidth,
       fullWidthMode,
-      isExtendedResizeExperienceOn: isPixelWidth
+      isExtendedResizeExperienceOn: isPixelWidth,
+      isInsideOfInlineExtension
     }),
     "data-layout": layout,
     "data-width": mediaSingleWidth,

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

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
@@ -15,11 +15,17 @@ function float(layout) {
       return 'none';
   }
 }
-function getWidthIfFullWidthMode(width) {
-  return width > akEditorFullWidthLayoutWidth ? '100%' : `${width}px`;
+function getWidthIfFullWidthMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
+  if (isInsideOfInlineExtension) {
+    return originalWidth > akEditorFullWidthLayoutWidth ? `${Math.min(containerWidth, akEditorFullWidthLayoutWidth)}px` : `${originalWidth}px`;
+  }
+  return originalWidth > akEditorFullWidthLayoutWidth ? '100%' : `${originalWidth}px`;
 }
-function getWidthIfDefaultMode(width) {
-  return width > akEditorFullPageMaxWidth ? '100%' : `${width}px`;
+function getWidthIfDefaultMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
+  if (isInsideOfInlineExtension) {
+    return originalWidth > akEditorFullPageMaxWidth ? `${Math.min(containerWidth, akEditorDefaultLayoutWidth)}px` : `${originalWidth}px`;
+  }
+  return originalWidth > akEditorFullPageMaxWidth ? '100%' : `${originalWidth}px`;
 }
 
 /**
@@ -29,7 +35,7 @@ function getWidthIfDefaultMode(width) {
  * then an image in wide or full-width can not be wider than the image's
  * original width.
  */
-export function calcLegacyWidth(layout, width, containerWidth = 0, fullWidthMode, isResized) {
+export function calcLegacyWidth(layout, width, containerWidth = 0, fullWidthMode, isResized, isInsideOfInlineExtension) {
   switch (layout) {
     case 'align-start':
     case 'align-end':
@@ -37,11 +43,34 @@ export function calcLegacyWidth(layout, width, containerWidth = 0, fullWidthMode
     case 'wrap-left':
       return width > containerWidth / 2 ? 'calc(50% - 12px)' : `${width}px`;
     case 'wide':
-      return calcWideWidth(containerWidth);
+      return isInsideOfInlineExtension ? calcWideWidth(containerWidth, Infinity, `${containerWidth}px`) : calcWideWidth(containerWidth);
+    case 'full-width':
+      return calcBreakoutWidth(layout, containerWidth);
+    default:
+      return isResized ? `${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.
+ */
+export function calcLegacyWidthForInline(layout, width, containerWidth = 0, fullWidthMode, isResized) {
+  switch (layout) {
+    case 'align-start':
+    case 'align-end':
+    case 'wrap-right':
+    case 'wrap-left':
+      return width > containerWidth / 2 ? 'calc(50% - 12px)' : `${width}px`;
+    case 'wide':
+      return calcWideWidth(containerWidth, Infinity, `${containerWidth}px`);
     case 'full-width':
       return calcBreakoutWidth(layout, containerWidth);
     default:
-      return isResized ? `${width}px` : fullWidthMode ? getWidthIfFullWidthMode(width) : getWidthIfDefaultMode(width);
+      return isResized ? `${width}px` : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth) : getWidthIfDefaultMode(width, containerWidth);
   }
 }
 
@@ -104,7 +133,8 @@ export const MediaSingleDimensionHelper = ({
   width,
   // original media width
   isExtendedResizeExperienceOn,
-  isNestedNode = false
+  isNestedNode = false,
+  isInsideOfInlineExtension = false
 }) => css`
   /* For nested rich media items, set max-width to 100% */
   tr &,
@@ -115,7 +145,7 @@ export const MediaSingleDimensionHelper = ({
     max-width: 100%;
   }
 
-  width: ${isExtendedResizeExperienceOn ? `${mediaSingleWidth || width}px` : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized)};
+  width: ${isExtendedResizeExperienceOn ? `${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,

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

@@ -6,9 +6,8 @@ import { BODIED_EXT_MBE_MARGIN_TOP } from '../../styles';
 
 // Wraps the navigation bar and extensionFrames
 const mbeExtensionContainer = css({
-  background: 'transpaent !important',
+  background: 'transparent !important',
   'padding:': {
-    bottom: `${"var(--ds-space-100, 8px)"} !important`,
     left: `${"var(--ds-space-100, 8px)"} !important`,
     right: `${"var(--ds-space-100, 8px)"} !important`
   },
@@ -60,12 +59,6 @@ const extensionFrameContent = css({
   },
   '.extensionView-content-wrap': {
     marginTop: `${"var(--ds-space-100, 8px)"} !important`
-  },
-  '.decisionItemView-content-wrap': {
-    marginTop: '0px !important'
-  },
-  '.decisionItemView-content-wrap > [data-decision-wrapper]': {
-    marginTop: '0px !important'
   }
 });
 export const sharedMultiBodiedExtensionStyles = {

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

@@ -1,6 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
@@ -26,38 +25,33 @@ const {
   Provider,
   Consumer
 } = WidthContext;
-export class WidthProvider extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "state", {
-      width: 0
-    });
-    _defineProperty(this, "setWidth", rafSchedule(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
-      });
-    }));
-    if (typeof document !== 'undefined') {
-      this.state.width = document.body.offsetWidth;
+export const WidthProvider = ({
+  className,
+  shouldCheckExistingValue,
+  children
+}) => {
+  const existingContextValue = React.useContext(WidthContext);
+  const [width, setWidth] = React.useState(typeof document !== 'undefined' ? document.body.offsetWidth : 0);
+  const providerValue = React.useMemo(() => createWidthContext(width), [width]);
+  const updateWidth = rafSchedule(nextWidth => {
+    // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
+    if (Math.abs(width - nextWidth) < SCROLLBAR_WIDTH) {
+      return;
     }
-  }
-  render() {
-    return jsx("div", {
-      css: css`
-          position: relative;
-          width: 100%;
-        `,
-      className: this.props.className
-    }, jsx(WidthObserver, {
-      setWidth: this.setWidth,
-      offscreen: true
-    }), jsx(Provider, {
-      value: createWidthContext(this.state.width)
-    }, this.props.children));
-  }
-}
+    setWidth(nextWidth);
+  });
+  const skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
+  return jsx("div", {
+    css: css`
+        position: relative;
+        width: 100%;
+      `,
+    className: className
+  }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
+    setWidth: updateWidth,
+    offscreen: true
+  }), jsx(Provider, {
+    value: providerValue
+  }, children)), skipWidthDetection && children);
+};
 export { Consumer as WidthConsumer };

package/dist/es2019/ui/index.js

@@ -8,7 +8,7 @@ export { default as UnsupportedBlock } from './UnsupportedBlock';
 export { default as UnsupportedInline } from './UnsupportedInline';
 export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
 export { default as withOuterListeners } from './with-outer-listeners';
-export { WidthContext, WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
+export { WidthContext, WidthConsumer, WidthProvider, createWidthContext, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';

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

@@ -1,50 +1,45 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @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';
-var InlineExtension = /*#__PURE__*/function (_Component) {
-  _inherits(InlineExtension, _Component);
-  var _super = _createSuper(InlineExtension);
-  function InlineExtension() {
-    _classCallCheck(this, InlineExtension);
-    return _super.apply(this, arguments);
+import { inlineWrapperStyels, wrapperStyle } from './styles';
+var InlineExtension = function InlineExtension(props) {
+  var node = props.node,
+    pluginInjectionApi = props.pluginInjectionApi,
+    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    isNodeSelected = props.isNodeSelected,
+    children = props.children;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  var hasChildren = !!children;
+  var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
+  var rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
+  var extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
+  var inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
+    node: node,
+    isNodeSelected: isNodeSelected,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), jsx("div", {
+    css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
+    className: "extension-container inline ".concat(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);
   }
-  _createClass(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 jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
-        node: node,
-        isNodeSelected: isNodeSelected,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-      }), jsx("div", {
-        css: wrapperStyle,
-        className: "extension-container inline ".concat(className)
-      }, jsx("div", {
-        css: overlay,
-        className: "extension-overlay"
-      }), children ? children : jsx(ExtensionLozenge, {
-        node: node,
-        isNodeSelected: isNodeSelected,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-      })));
-    }
-  }]);
-  return InlineExtension;
-}(Component);
-export { InlineExtension as default };
+  return inlineExtensionInternal;
+};
+export default InlineExtension;

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

@@ -1,5 +1,33 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { wrapperDefault } from '../styles';
-export var wrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), wrapperDefault, "var(--ds-space-050, 4px)", "var(--ds-border-radius, 3px)", "var(--ds-background-neutral-subtle, white)");
+export var wrapperStyle = css(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)"
+  }
+});
+export var inlineWrapperStyels = css({
+  maxWidth: '100%',
+  display: 'inline-block',
+  '&::after, &::before': {
+    display: 'block'
+  },
+  'tr &': {
+    maxWidth: 'inherit'
+  },
+  '.rich-media-item': {
+    maxWidth: '100%'
+  }
+});