@atlaskit/renderer 109.6.3 → 109.7.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/renderer
 
+## 109.7.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
+
+- Updated dependencies
+
 ## 109.6.3
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -181,6 +181,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     this.allowSelectAllTrap = init.allowSelectAllTrap;
     this.nodeComponents = init.nodeComponents;
     this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
+    this.isInsideOfInlineExtension = init.isInsideOfInlineExtension;
   }
   (0, _createClass2.default)(ReactSerializer, [{
     key: "resetState",
@@ -520,6 +521,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         nodeType: node.type.name,
         marks: node.marks,
         smartLinks: this.smartLinks,
+        isInsideOfInlineExtension: this.isInsideOfInlineExtension,
         dataAttributes: {
           // We need to account for depth (path.length gives up depth) here
           // but depth doesnt increment the pos, only accounted for.

package/dist/cjs/react/nodes/embedCard.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = EmbedCard;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _smartCard = require("@atlaskit/smart-card");
@@ -20,10 +19,23 @@ var _fallback = require("./fallback");
 var _style = require("../../ui/Renderer/style");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _templateObject, _templateObject2;
 /** @jsx jsx */
-var embedCardWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n\n  .loader-wrapper {\n    height: 100%;\n  }\n\n  margin: 0 auto;\n"])));
-var uIMediaSingleLayoutStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
+
+var embedCardWrapperStyles = (0, _react.css)({
+  width: '100%',
+  height: '100%',
+  '> div': {
+    height: '100%'
+  },
+  '.loader-wrapper': {
+    height: '100%'
+  },
+  margin: '0 auto'
+});
+var uIMediaSingleLayoutStyles = (0, _react.css)({
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});
 function EmbedCard(props) {
   var _smartLinks$frameStyl;
   var url = props.url,
@@ -34,7 +46,8 @@ function EmbedCard(props) {
     width = props.width,
     isInsideOfBlockNode = props.isInsideOfBlockNode,
     rendererAppearance = props.rendererAppearance,
-    smartLinks = props.smartLinks;
+    smartLinks = props.smartLinks,
+    isInsideOfInlineExtension = props.isInsideOfInlineExtension;
   var embedIframeRef = (0, _react2.useRef)(null);
   var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
   var _ref = smartLinks || {},
@@ -148,7 +161,8 @@ function EmbedCard(props) {
       fullWidthMode: isFullWidth,
       nodeType: "embedCard",
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
-      hasFallbackContainer: hasPreview
+      hasFallbackContainer: hasPreview,
+      isInsideOfInlineExtension: isInsideOfInlineExtension
     }, (0, _react.jsx)("div", {
       css: embedCardWrapperStyles
     }, (0, _react.jsx)("div", {

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -45,19 +45,18 @@ var checkForMediaElement = function checkForMediaElement(children) {
 // returns the existing container width if available (non SSR mode), otherwise
 // we return a default width value
 var getMediaContainerWidth = exports.getMediaContainerWidth = function getMediaContainerWidth(currentContainerWidth, layout) {
-  if (currentContainerWidth) {
-    return currentContainerWidth;
-  }
-
-  // SSR mode fallback to default layout width
-  switch (layout) {
-    case 'full-width':
-      return _editorSharedStyles.akEditorFullWidthLayoutWidth;
-    case 'wide':
-      return _editorSharedStyles.akEditorWideLayoutWidth;
-    default:
-      return _editorSharedStyles.akEditorDefaultLayoutWidth;
+  if (!currentContainerWidth) {
+    // SSR mode fallback to default layout width
+    switch (layout) {
+      case 'full-width':
+        return _editorSharedStyles.akEditorFullWidthLayoutWidth;
+      case 'wide':
+        return _editorSharedStyles.akEditorWideLayoutWidth;
+      default:
+        return _editorSharedStyles.akEditorDefaultLayoutWidth;
+    }
   }
+  return currentContainerWidth;
 };
 var MediaSingle = function MediaSingle(props) {
   var rendererAppearance = props.rendererAppearance,
@@ -68,7 +67,9 @@ var MediaSingle = function MediaSingle(props) {
     widthAttr = props.width,
     widthType = props.widthType,
     _props$allowCaptions = props.allowCaptions,
-    allowCaptions = _props$allowCaptions === void 0 ? false : _props$allowCaptions;
+    allowCaptions = _props$allowCaptions === void 0 ? false : _props$allowCaptions,
+    _props$isInsideOfInli = props.isInsideOfInlineExtension,
+    isInsideOfInlineExtension = _props$isInsideOfInli === void 0 ? false : _props$isInsideOfInli;
   var _React$useState = _react.default.useState({
       width: 0,
       height: 0
@@ -145,8 +146,7 @@ var MediaSingle = function MediaSingle(props) {
     var lineLength = isFullWidth ? minWidth : nonFullWidthSize;
     return {
       cardDimensions: cardDimensions,
-      lineLength: lineLength,
-      containerWidth: containerWidth
+      lineLength: lineLength
     };
   };
   var originalDimensions = {
@@ -154,10 +154,10 @@ var MediaSingle = function MediaSingle(props) {
     width: width
   };
   var renderMediaSingle = function renderMediaSingle(renderWidth) {
-    var _calcDimensions = calcDimensions(renderWidth),
+    var containerWidth = getMediaContainerWidth(renderWidth, layout);
+    var _calcDimensions = calcDimensions(containerWidth),
       cardDimensions = _calcDimensions.cardDimensions,
-      lineLength = _calcDimensions.lineLength,
-      containerWidth = _calcDimensions.containerWidth;
+      lineLength = _calcDimensions.lineLength;
     var mediaComponent = /*#__PURE__*/_react.default.cloneElement(media, {
       resizeMode: 'stretchy-fit',
       cardDimensions: cardDimensions,
@@ -179,7 +179,8 @@ var MediaSingle = function MediaSingle(props) {
         width: widthAttr,
         widthType: widthType
       },
-      fullWidthMode: isFullWidth
+      fullWidthMode: isFullWidth,
+      isInsideOfInlineExtension: isInsideOfInlineExtension
     }, (0, _react2.jsx)(_react.Fragment, null, mediaComponent), allowCaptions && caption);
   };
   return (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref3) {

package/dist/cjs/ui/ExtensionRenderer.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
 });
@@ -12,13 +13,22 @@ 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 _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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; } }
+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 inlineExtensionStyle = (0, _react.css)({
+  '& .rich-media-item': {
+    maxWidth: '100%'
+  }
+});
 var ExtensionRenderer = exports.default = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ExtensionRenderer, _React$Component);
   var _super = _createSuper(ExtensionRenderer);
@@ -76,14 +86,14 @@ var ExtensionRenderer = exports.default = /*#__PURE__*/function (_React$Componen
         if (!result && extensionProvider) {
           var NodeRenderer = _this.getNodeRenderer(extensionProvider, extensionType, extensionKey);
           if (node.type === 'multiBodiedExtension') {
-            result = /*#__PURE__*/_react.default.createElement(NodeRenderer, {
+            result = (0, _react.jsx)(NodeRenderer, {
               node: node,
               actions: actions
             });
           } else {
-            result = /*#__PURE__*/_react.default.createElement(NodeRenderer, {
+            result = (0, _react.jsx)(InlineNodeRendererWrapper, null, (0, _react.jsx)(NodeRenderer, {
               node: node
-            });
+            }));
           }
         }
       } catch (e) {
@@ -120,7 +130,7 @@ var ExtensionRenderer = exports.default = /*#__PURE__*/function (_React$Componen
       if (!providers) {
         return this.setupAndRenderExtensionNode({});
       }
-      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+      return (0, _react.jsx)(_providerFactory.WithProviders, {
         providers: ['extensionProvider'],
         providerFactory: providers,
         renderNode: this.setupAndRenderExtensionNode
@@ -128,4 +138,14 @@ var ExtensionRenderer = exports.default = /*#__PURE__*/function (_React$Componen
     }
   }]);
   return ExtensionRenderer;
-}(_react.default.Component);
+}(_react2.default.Component);
+var InlineNodeRendererWrapper = function InlineNodeRendererWrapper(_ref) {
+  var children = _ref.children;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn')) {
+    return (0, _react.jsx)("div", {
+      className: "inline-extension-renderer",
+      css: inlineExtensionStyle
+    }, children);
+  }
+  return (0, _react.jsx)(_react2.Fragment, null, children);
+};

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

@@ -21,6 +21,7 @@ var _traverse = require("@atlaskit/adf-utils/traverse");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
@@ -54,7 +55,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.6.3";
+var packageVersion = "109.7.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -279,7 +280,8 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         allowPlaceholderText: props.allowPlaceholderText,
         nodeComponents: props.nodeComponents,
         // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
-        allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock
+        allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
+        isInsideOfInlineExtension: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension
       };
     }
   }, {
@@ -526,7 +528,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   }, [innerRef, addTelepointer]);
   return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper is-".concat(appearance),
-    "data-appearance": appearance
+    "data-appearance": appearance,
+    shouldCheckExistingValue: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') || false
   }, (0, _react2.jsx)(_ui.BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
   }, (0, _react2.jsx)(_EditorMediaClientProvider.EditorMediaClientProvider, {

package/dist/es2019/react/index.js

@@ -166,6 +166,7 @@ export default class ReactSerializer {
     this.allowSelectAllTrap = init.allowSelectAllTrap;
     this.nodeComponents = init.nodeComponents;
     this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
+    this.isInsideOfInlineExtension = init.isInsideOfInlineExtension;
   }
   resetState() {
     this.headingIds = [];
@@ -454,6 +455,7 @@ export default class ReactSerializer {
       nodeType: node.type.name,
       marks: node.marks,
       smartLinks: this.smartLinks,
+      isInsideOfInlineExtension: this.isInsideOfInlineExtension,
       dataAttributes: {
         // We need to account for depth (path.length gives up depth) here
         // but depth doesnt increment the pos, only accounted for.

package/dist/es2019/react/nodes/embedCard.js

@@ -12,24 +12,21 @@ import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-const embedCardWrapperStyles = css`
-  width: 100%;
-  height: 100%;
-
-  > div {
-    height: 100%;
-  }
-
-  .loader-wrapper {
-    height: 100%;
-  }
-
-  margin: 0 auto;
-`;
-const uIMediaSingleLayoutStyles = css`
-  margin-left: 50%;
-  transform: translateX(-50%);
-`;
+const embedCardWrapperStyles = css({
+  width: '100%',
+  height: '100%',
+  '> div': {
+    height: '100%'
+  },
+  '.loader-wrapper': {
+    height: '100%'
+  },
+  margin: '0 auto'
+});
+const uIMediaSingleLayoutStyles = css({
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});
 export default function EmbedCard(props) {
   var _smartLinks$frameStyl;
   const {
@@ -41,7 +38,8 @@ export default function EmbedCard(props) {
     width,
     isInsideOfBlockNode,
     rendererAppearance,
-    smartLinks
+    smartLinks,
+    isInsideOfInlineExtension
   } = props;
   const embedIframeRef = useRef(null);
   const onClick = getCardClickHandler(eventHandlers, url);
@@ -149,7 +147,8 @@ export default function EmbedCard(props) {
       fullWidthMode: isFullWidth,
       nodeType: "embedCard",
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
-      hasFallbackContainer: hasPreview
+      hasFallbackContainer: hasPreview,
+      isInsideOfInlineExtension: isInsideOfInlineExtension
     }, jsx("div", {
       css: embedCardWrapperStyles
     }, jsx("div", {

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -33,19 +33,18 @@ const checkForMediaElement = children => {
 // returns the existing container width if available (non SSR mode), otherwise
 // we return a default width value
 export const getMediaContainerWidth = (currentContainerWidth, layout) => {
-  if (currentContainerWidth) {
-    return currentContainerWidth;
-  }
-
-  // SSR mode fallback to default layout width
-  switch (layout) {
-    case 'full-width':
-      return akEditorFullWidthLayoutWidth;
-    case 'wide':
-      return akEditorWideLayoutWidth;
-    default:
-      return akEditorDefaultLayoutWidth;
+  if (!currentContainerWidth) {
+    // SSR mode fallback to default layout width
+    switch (layout) {
+      case 'full-width':
+        return akEditorFullWidthLayoutWidth;
+      case 'wide':
+        return akEditorWideLayoutWidth;
+      default:
+        return akEditorDefaultLayoutWidth;
+    }
   }
+  return currentContainerWidth;
 };
 const MediaSingle = props => {
   const {
@@ -56,7 +55,8 @@ const MediaSingle = props => {
     children,
     width: widthAttr,
     widthType,
-    allowCaptions = false
+    allowCaptions = false,
+    isInsideOfInlineExtension = false
   } = props;
   const [externalImageDimensions, setExternalImageDimensions] = React.useState({
     width: 0,
@@ -130,8 +130,7 @@ const MediaSingle = props => {
     const lineLength = isFullWidth ? minWidth : nonFullWidthSize;
     return {
       cardDimensions,
-      lineLength,
-      containerWidth
+      lineLength
     };
   };
   const originalDimensions = {
@@ -139,11 +138,11 @@ const MediaSingle = props => {
     width
   };
   const renderMediaSingle = renderWidth => {
+    const containerWidth = getMediaContainerWidth(renderWidth, layout);
     const {
       cardDimensions,
-      lineLength,
-      containerWidth
-    } = calcDimensions(renderWidth);
+      lineLength
+    } = calcDimensions(containerWidth);
     const mediaComponent = /*#__PURE__*/React.cloneElement(media, {
       resizeMode: 'stretchy-fit',
       cardDimensions,
@@ -165,7 +164,8 @@ const MediaSingle = props => {
         width: widthAttr,
         widthType
       },
-      fullWidthMode: isFullWidth
+      fullWidthMode: isFullWidth,
+      isInsideOfInlineExtension: isInsideOfInlineExtension
     }, jsx(Fragment, null, mediaComponent), allowCaptions && caption);
   };
   return jsx(WidthConsumer, null, ({

package/dist/es2019/ui/ExtensionRenderer.js

@@ -1,9 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import React, { Fragment } from 'react';
 import memoizeOne from 'memoize-one';
 import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+const inlineExtensionStyle = css({
+  '& .rich-media-item': {
+    maxWidth: '100%'
+  }
+});
 export default class ExtensionRenderer extends React.Component {
   constructor(...args) {
     super(...args);
@@ -55,14 +63,14 @@ export default class ExtensionRenderer extends React.Component {
         if (!result && extensionProvider) {
           const NodeRenderer = this.getNodeRenderer(extensionProvider, extensionType, extensionKey);
           if (node.type === 'multiBodiedExtension') {
-            result = /*#__PURE__*/React.createElement(NodeRenderer, {
+            result = jsx(NodeRenderer, {
               node: node,
               actions: actions
             });
           } else {
-            result = /*#__PURE__*/React.createElement(NodeRenderer, {
+            result = jsx(InlineNodeRendererWrapper, null, jsx(NodeRenderer, {
               node: node
-            });
+            }));
           }
         }
       } catch (e) {
@@ -96,10 +104,21 @@ export default class ExtensionRenderer extends React.Component {
     if (!providers) {
       return this.setupAndRenderExtensionNode({});
     }
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return jsx(WithProviders, {
       providers: ['extensionProvider'],
       providerFactory: providers,
       renderNode: this.setupAndRenderExtensionNode
     });
   }
-}
+}
+const InlineNodeRendererWrapper = ({
+  children
+}) => {
+  if (getBooleanFF('platform.editor.inline_extension.extended_lcqdn')) {
+    return jsx("div", {
+      className: "inline-extension-renderer",
+      css: inlineExtensionStyle
+    }, children);
+  }
+  return jsx(Fragment, null, children);
+};

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

@@ -8,6 +8,7 @@ import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
@@ -35,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.6.3";
+const packageVersion = "109.7.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -258,7 +259,8 @@ export class Renderer extends PureComponent {
       allowPlaceholderText: props.allowPlaceholderText,
       nodeComponents: props.nodeComponents,
       // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
-      allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock
+      allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
+      isInsideOfInlineExtension: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension
     };
   }
   render() {
@@ -498,7 +500,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   }, [innerRef, addTelepointer]);
   return jsx(WidthProvider, {
     className: `ak-renderer-wrapper is-${appearance}`,
-    "data-appearance": appearance
+    "data-appearance": appearance,
+    shouldCheckExistingValue: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx(EditorMediaClientProvider, {

package/dist/esm/react/index.js

@@ -174,6 +174,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.allowSelectAllTrap = init.allowSelectAllTrap;
     this.nodeComponents = init.nodeComponents;
     this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
+    this.isInsideOfInlineExtension = init.isInsideOfInlineExtension;
   }
   _createClass(ReactSerializer, [{
     key: "resetState",
@@ -513,6 +514,7 @@ var ReactSerializer = /*#__PURE__*/function () {
         nodeType: node.type.name,
         marks: node.marks,
         smartLinks: this.smartLinks,
+        isInsideOfInlineExtension: this.isInsideOfInlineExtension,
         dataAttributes: {
           // We need to account for depth (path.length gives up depth) here
           // but depth doesnt increment the pos, only accounted for.

package/dist/esm/react/nodes/embedCard.js

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useMemo, useContext, useState, useRef } from 'react';
@@ -15,8 +13,21 @@ import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-var embedCardWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n\n  .loader-wrapper {\n    height: 100%;\n  }\n\n  margin: 0 auto;\n"])));
-var uIMediaSingleLayoutStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
+var embedCardWrapperStyles = css({
+  width: '100%',
+  height: '100%',
+  '> div': {
+    height: '100%'
+  },
+  '.loader-wrapper': {
+    height: '100%'
+  },
+  margin: '0 auto'
+});
+var uIMediaSingleLayoutStyles = css({
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
+});
 export default function EmbedCard(props) {
   var _smartLinks$frameStyl;
   var url = props.url,
@@ -27,7 +38,8 @@ export default function EmbedCard(props) {
     width = props.width,
     isInsideOfBlockNode = props.isInsideOfBlockNode,
     rendererAppearance = props.rendererAppearance,
-    smartLinks = props.smartLinks;
+    smartLinks = props.smartLinks,
+    isInsideOfInlineExtension = props.isInsideOfInlineExtension;
   var embedIframeRef = useRef(null);
   var onClick = getCardClickHandler(eventHandlers, url);
   var _ref = smartLinks || {},
@@ -141,7 +153,8 @@ export default function EmbedCard(props) {
       fullWidthMode: isFullWidth,
       nodeType: "embedCard",
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
-      hasFallbackContainer: hasPreview
+      hasFallbackContainer: hasPreview,
+      isInsideOfInlineExtension: isInsideOfInlineExtension
     }, jsx("div", {
       css: embedCardWrapperStyles
     }, jsx("div", {

package/dist/esm/react/nodes/mediaSingle/index.js

@@ -35,19 +35,18 @@ var checkForMediaElement = function checkForMediaElement(children) {
 // returns the existing container width if available (non SSR mode), otherwise
 // we return a default width value
 export var getMediaContainerWidth = function getMediaContainerWidth(currentContainerWidth, layout) {
-  if (currentContainerWidth) {
-    return currentContainerWidth;
-  }
-
-  // SSR mode fallback to default layout width
-  switch (layout) {
-    case 'full-width':
-      return akEditorFullWidthLayoutWidth;
-    case 'wide':
-      return akEditorWideLayoutWidth;
-    default:
-      return akEditorDefaultLayoutWidth;
+  if (!currentContainerWidth) {
+    // SSR mode fallback to default layout width
+    switch (layout) {
+      case 'full-width':
+        return akEditorFullWidthLayoutWidth;
+      case 'wide':
+        return akEditorWideLayoutWidth;
+      default:
+        return akEditorDefaultLayoutWidth;
+    }
   }
+  return currentContainerWidth;
 };
 var MediaSingle = function MediaSingle(props) {
   var rendererAppearance = props.rendererAppearance,
@@ -58,7 +57,9 @@ var MediaSingle = function MediaSingle(props) {
     widthAttr = props.width,
     widthType = props.widthType,
     _props$allowCaptions = props.allowCaptions,
-    allowCaptions = _props$allowCaptions === void 0 ? false : _props$allowCaptions;
+    allowCaptions = _props$allowCaptions === void 0 ? false : _props$allowCaptions,
+    _props$isInsideOfInli = props.isInsideOfInlineExtension,
+    isInsideOfInlineExtension = _props$isInsideOfInli === void 0 ? false : _props$isInsideOfInli;
   var _React$useState = React.useState({
       width: 0,
       height: 0
@@ -135,8 +136,7 @@ var MediaSingle = function MediaSingle(props) {
     var lineLength = isFullWidth ? minWidth : nonFullWidthSize;
     return {
       cardDimensions: cardDimensions,
-      lineLength: lineLength,
-      containerWidth: containerWidth
+      lineLength: lineLength
     };
   };
   var originalDimensions = {
@@ -144,10 +144,10 @@ var MediaSingle = function MediaSingle(props) {
     width: width
   };
   var renderMediaSingle = function renderMediaSingle(renderWidth) {
-    var _calcDimensions = calcDimensions(renderWidth),
+    var containerWidth = getMediaContainerWidth(renderWidth, layout);
+    var _calcDimensions = calcDimensions(containerWidth),
       cardDimensions = _calcDimensions.cardDimensions,
-      lineLength = _calcDimensions.lineLength,
-      containerWidth = _calcDimensions.containerWidth;
+      lineLength = _calcDimensions.lineLength;
     var mediaComponent = /*#__PURE__*/React.cloneElement(media, {
       resizeMode: 'stretchy-fit',
       cardDimensions: cardDimensions,
@@ -169,7 +169,8 @@ var MediaSingle = function MediaSingle(props) {
         width: widthAttr,
         widthType: widthType
       },
-      fullWidthMode: isFullWidth
+      fullWidthMode: isFullWidth,
+      isInsideOfInlineExtension: isInsideOfInlineExtension
     }, jsx(Fragment, null, mediaComponent), allowCaptions && caption);
   };
   return jsx(WidthConsumer, null, function (_ref3) {

package/dist/esm/ui/ExtensionRenderer.js

@@ -7,11 +7,19 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import React, { Fragment } from 'react';
 import memoizeOne from 'memoize-one';
 import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+var inlineExtensionStyle = css({
+  '& .rich-media-item': {
+    maxWidth: '100%'
+  }
+});
 var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
   _inherits(ExtensionRenderer, _React$Component);
   var _super = _createSuper(ExtensionRenderer);
@@ -69,14 +77,14 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
         if (!result && extensionProvider) {
           var NodeRenderer = _this.getNodeRenderer(extensionProvider, extensionType, extensionKey);
           if (node.type === 'multiBodiedExtension') {
-            result = /*#__PURE__*/React.createElement(NodeRenderer, {
+            result = jsx(NodeRenderer, {
               node: node,
               actions: actions
             });
           } else {
-            result = /*#__PURE__*/React.createElement(NodeRenderer, {
+            result = jsx(InlineNodeRendererWrapper, null, jsx(NodeRenderer, {
               node: node
-            });
+            }));
           }
         }
       } catch (e) {
@@ -113,7 +121,7 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
       if (!providers) {
         return this.setupAndRenderExtensionNode({});
       }
-      return /*#__PURE__*/React.createElement(WithProviders, {
+      return jsx(WithProviders, {
         providers: ['extensionProvider'],
         providerFactory: providers,
         renderNode: this.setupAndRenderExtensionNode
@@ -122,4 +130,14 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
   }]);
   return ExtensionRenderer;
 }(React.Component);
-export { ExtensionRenderer as default };
+export { ExtensionRenderer as default };
+var InlineNodeRendererWrapper = function InlineNodeRendererWrapper(_ref) {
+  var children = _ref.children;
+  if (getBooleanFF('platform.editor.inline_extension.extended_lcqdn')) {
+    return jsx("div", {
+      className: "inline-extension-renderer",
+      css: inlineExtensionStyle
+    }, children);
+  }
+  return jsx(Fragment, null, children);
+};

package/dist/esm/ui/Renderer/index.js

@@ -18,6 +18,7 @@ import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
@@ -45,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.6.3";
+var packageVersion = "109.7.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -270,7 +271,8 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         allowPlaceholderText: props.allowPlaceholderText,
         nodeComponents: props.nodeComponents,
         // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
-        allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock
+        allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
+        isInsideOfInlineExtension: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension
       };
     }
   }, {
@@ -517,7 +519,8 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   }, [innerRef, addTelepointer]);
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper is-".concat(appearance),
-    "data-appearance": appearance
+    "data-appearance": appearance,
+    shouldCheckExistingValue: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx(EditorMediaClientProvider, {

package/dist/types/react/index.d.ts

@@ -39,6 +39,7 @@ export interface ReactSerializerInit {
     allowSelectAllTrap?: boolean;
     nodeComponents?: NodeComponentsProps;
     allowWindowedCodeBlock?: boolean;
+    isInsideOfInlineExtension?: boolean;
 }
 interface ParentInfo {
     parentIsIncompleteTask: boolean;
@@ -84,6 +85,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private allowSelectAllTrap?;
     private nodeComponents?;
     private allowWindowedCodeBlock?;
+    private isInsideOfInlineExtension?;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;

package/dist/types/react/nodes/embedCard.d.ts

@@ -16,4 +16,5 @@ export default function EmbedCard(props: {
     rendererAppearance?: RendererAppearance;
     isInsideOfBlockNode?: boolean;
     smartLinks?: SmartLinksOptions;
+    isInsideOfInlineExtension?: boolean;
 }): jsx.JSX.Element;

package/dist/types/react/nodes/index.d.ts

@@ -50,6 +50,7 @@ declare const EmbedCard: React.ComponentType<{
     rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     isInsideOfBlockNode?: boolean | undefined;
     smartLinks?: import("../../types/smartLinksOptions").SmartLinksOptions | undefined;
+    isInsideOfInlineExtension?: boolean | undefined;
 }> & Loadable.LoadableComponent;
 declare const InlineCard: React.ComponentType<import("@atlaskit/editor-common/utils").Diff<import("./inlineCard").InlineCardProps & import("../../ui/SmartCardStorage").WithSmartCardStorageProps, import("../../ui/SmartCardStorage").WithSmartCardStorageProps>> & Loadable.LoadableComponent;
 declare const BlockCard: React.ComponentType<{

package/dist/types/react/nodes/mediaSingle/index.d.ts

@@ -16,6 +16,7 @@ export interface Props {
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     featureFlags?: MediaFeatureFlags;
     allowCaptions?: boolean;
+    isInsideOfInlineExtension?: boolean;
 }
 export declare const getMediaContainerWidth: (currentContainerWidth: number, layout: MediaSingleLayout) => number;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {

package/dist/types/react/types.d.ts

@@ -1,12 +1,12 @@
-import { PropsWithChildren } from 'react';
-import { Node as PMNode, NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { PropsWithChildren } from 'react';
+import type { Node as PMNode, NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import { AnalyticsEventPayload } from '../analytics/events';
-import { Serializer } from '../index';
-import { RendererAppearance, HeadingAnchorLinksProps } from '../ui/Renderer/types';
-import { AnnotationId, AnnotationTypes } from '@atlaskit/adf-schema';
+import type { AnalyticsEventPayload } from '../analytics/events';
+import type { Serializer } from '../index';
+import type { RendererAppearance, HeadingAnchorLinksProps } from '../ui/Renderer/types';
+import type { AnnotationId, AnnotationTypes } from '@atlaskit/adf-schema';
 export interface RendererContext {
     objectAri?: string;
     containerAri?: string;

package/dist/types/ui/renderer-props.d.ts

@@ -71,6 +71,7 @@ export interface RendererProps {
     allowSelectAllTrap?: boolean;
     unsupportedContentLevelsTracking?: UnsupportedContentLevelsTracking;
     nodeComponents?: NodeComponentsProps;
+    isInsideOfInlineExtension?: boolean;
     /**
      * When enabled a trailing telepointer will be added to the rendered document
      * following content updates.

package/dist/types-ts4.5/react/index.d.ts

@@ -39,6 +39,7 @@ export interface ReactSerializerInit {
     allowSelectAllTrap?: boolean;
     nodeComponents?: NodeComponentsProps;
     allowWindowedCodeBlock?: boolean;
+    isInsideOfInlineExtension?: boolean;
 }
 interface ParentInfo {
     parentIsIncompleteTask: boolean;
@@ -84,6 +85,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private allowSelectAllTrap?;
     private nodeComponents?;
     private allowWindowedCodeBlock?;
+    private isInsideOfInlineExtension?;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;

package/dist/types-ts4.5/react/nodes/embedCard.d.ts

@@ -16,4 +16,5 @@ export default function EmbedCard(props: {
     rendererAppearance?: RendererAppearance;
     isInsideOfBlockNode?: boolean;
     smartLinks?: SmartLinksOptions;
+    isInsideOfInlineExtension?: boolean;
 }): jsx.JSX.Element;

package/dist/types-ts4.5/react/nodes/index.d.ts

@@ -50,6 +50,7 @@ declare const EmbedCard: React.ComponentType<{
     rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     isInsideOfBlockNode?: boolean | undefined;
     smartLinks?: import("../../types/smartLinksOptions").SmartLinksOptions | undefined;
+    isInsideOfInlineExtension?: boolean | undefined;
 }> & Loadable.LoadableComponent;
 declare const InlineCard: React.ComponentType<import("@atlaskit/editor-common/utils").Diff<import("./inlineCard").InlineCardProps & import("../../ui/SmartCardStorage").WithSmartCardStorageProps, import("../../ui/SmartCardStorage").WithSmartCardStorageProps>> & Loadable.LoadableComponent;
 declare const BlockCard: React.ComponentType<{

package/dist/types-ts4.5/react/nodes/mediaSingle/index.d.ts

@@ -16,6 +16,7 @@ export interface Props {
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     featureFlags?: MediaFeatureFlags;
     allowCaptions?: boolean;
+    isInsideOfInlineExtension?: boolean;
 }
 export declare const getMediaContainerWidth: (currentContainerWidth: number, layout: MediaSingleLayout) => number;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {

package/dist/types-ts4.5/react/types.d.ts

@@ -1,12 +1,12 @@
-import { PropsWithChildren } from 'react';
-import { Node as PMNode, NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { PropsWithChildren } from 'react';
+import type { Node as PMNode, NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import { AnalyticsEventPayload } from '../analytics/events';
-import { Serializer } from '../index';
-import { RendererAppearance, HeadingAnchorLinksProps } from '../ui/Renderer/types';
-import { AnnotationId, AnnotationTypes } from '@atlaskit/adf-schema';
+import type { AnalyticsEventPayload } from '../analytics/events';
+import type { Serializer } from '../index';
+import type { RendererAppearance, HeadingAnchorLinksProps } from '../ui/Renderer/types';
+import type { AnnotationId, AnnotationTypes } from '@atlaskit/adf-schema';
 export interface RendererContext {
     objectAri?: string;
     containerAri?: string;

package/dist/types-ts4.5/ui/renderer-props.d.ts

@@ -71,6 +71,7 @@ export interface RendererProps {
     allowSelectAllTrap?: boolean;
     unsupportedContentLevelsTracking?: UnsupportedContentLevelsTracking;
     nodeComponents?: NodeComponentsProps;
+    isInsideOfInlineExtension?: boolean;
     /**
      * When enabled a trailing telepointer will be added to the rendered document
      * following content updates.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.6.3",
+  "version": "109.7.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -21,7 +21,7 @@
     "website": {
       "name": "Renderer"
     },
-    "runReact18": false
+    "runReact18": true
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.5.2",
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/button": "^17.6.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.10.0",
+    "@atlaskit/editor-common": "^78.11.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-prosemirror": "3.0.0",
@@ -128,6 +128,9 @@
     },
     "platform.editor.show-embed-card-frame-renderer": {
       "type": "boolean"
+    },
+    "platform.editor.inline_extension.extended_lcqdn": {
+      "type": "boolean"
     }
   },
   "af:exports": {