@atlaskit/renderer 109.16.1 → 109.17.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 109.17.1
+
+### Patch Changes
+
+- [#89893](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89893) [`8103423f9266`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8103423f9266) - [ED-22909] Update media content wrap dom with annotation draft related data attributes so that create dialog can be correctly positioned next to media
+
+## 109.17.0
+
+### Minor Changes
+
+- [#88000](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88000) [`61b44e565851`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/61b44e565851) - [ux] FF clean up platform.editor.show-embed-card-frame-renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.16.1
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -421,7 +421,9 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,
-        ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr
+        ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr,
+        // surroundTextNodesWithTextWrapper checks inlineComment.allowDraftMode
+        allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper
       });
     }
   }, {

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

@@ -11,7 +11,6 @@ var _react = require("@emotion/react");
 var _react2 = require("react");
 var _smartCard = require("@atlaskit/smart-card");
 var _linkProvider = require("@atlaskit/link-provider");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("../../utils");
@@ -63,7 +62,7 @@ function EmbedCard(props) {
     onClick: onClick,
     container: portal,
     platform: platform,
-    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : (0, _platformFeatureFlags.getBooleanFF)('platform.editor.show-embed-card-frame-renderer') ? 'show' : undefined,
+    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : 'show',
     actionOptions: actionOptions,
     showServerActions: showServerActions
   };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -28,6 +29,7 @@ var _utils = require("../../../utils");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _events = require("../../../analytics/events");
 var _annotation = _interopRequireDefault(require("../../marks/annotation"));
+var _context = require("../../../ui/annotations/context");
 var _styles = require("./styles");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _reactIntlNext = require("react-intl-next");
@@ -37,6 +39,8 @@ var _excluded = ["marks"];
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var MediaBorder = function MediaBorder(_ref) {
@@ -141,7 +145,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     onClick: onClick
   }, rest));
 };
-var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
+var Media = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Media, _PureComponent);
   var _super = _createSuper(Media);
   function Media(props) {
@@ -237,4 +241,40 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
     }
   }]);
   return Media;
-}(_react.PureComponent);
+}(_react.PureComponent);
+var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
+  var draftPosition = _react.default.useContext(_context.AnnotationsDraftContext);
+  var dataAttributes = props.dataAttributes;
+  var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    shouldApplyDraftAnnotation = _useState4[0],
+    setShouldApplyDraftAnnotation = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (pos === undefined) {
+      return;
+    }
+    if (draftPosition !== null && draftPosition.from === pos) {
+      setShouldApplyDraftAnnotation(true);
+      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
+    } else if (draftPosition === null && shouldApplyDraftAnnotation) {
+      setShouldApplyDraftAnnotation(false);
+      setPosition(undefined);
+    }
+  }, [draftPosition, pos, shouldApplyDraftAnnotation]);
+  var applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
+  var dataAttributesWithDraftAnnotation = (0, _react.useMemo)(function () {
+    return applyDraftAnnotation ? _objectSpread(_objectSpread({}, dataAttributes), {}, {
+      'data-annotation-draft-mark': true,
+      'data-renderer-mark': true
+    }) : dataAttributes;
+  }, [applyDraftAnnotation, dataAttributes]);
+  return (0, _react2.jsx)(Media, (0, _extends2.default)({}, props, {
+    dataAttributes: dataAttributesWithDraftAnnotation
+  }));
+};
+var _default = exports.default = MediaWithDraftAnnotation;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getMediaContainerWidth = exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -58,19 +59,20 @@ var getMediaContainerWidth = exports.getMediaContainerWidth = function getMediaC
   }
   return currentContainerWidth;
 };
-var MediaSingle = function MediaSingle(props) {
+var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   var rendererAppearance = props.rendererAppearance,
     featureFlags = props.featureFlags,
     isInsideOfBlockNode = props.isInsideOfBlockNode,
     layout = props.layout,
-    children = props.children,
     widthAttr = props.width,
     widthType = props.widthType,
     _props$allowCaptions = props.allowCaptions,
     allowCaptions = _props$allowCaptions === void 0 ? false : _props$allowCaptions,
     _props$isInsideOfInli = props.isInsideOfInlineExtension,
     isInsideOfInlineExtension = _props$isInsideOfInli === void 0 ? false : _props$isInsideOfInli,
-    dataAttributes = props.dataAttributes;
+    dataAttributes = props.dataAttributes,
+    media = props.media,
+    caption = props.caption;
   var _React$useState = _react.default.useState({
       width: 0,
       height: 0
@@ -87,20 +89,6 @@ var MediaSingle = function MediaSingle(props) {
       height: height
     });
   }, []);
-  var media;
-  var _React$Children$toArr3 = _react.default.Children.toArray(children),
-    _React$Children$toArr4 = (0, _slicedToArray2.default)(_React$Children$toArr3, 2),
-    node = _React$Children$toArr4[0],
-    caption = _React$Children$toArr4[1];
-  if (!isMediaElement(node)) {
-    var mediaElement = checkForMediaElement(node.props.children);
-    if (!mediaElement) {
-      return node;
-    }
-    media = mediaElement;
-  } else {
-    media = node;
-  }
   var _media$props = media.props,
     _media$props$width = _media$props.width,
     width = _media$props$width === void 0 ? DEFAULT_WIDTH : _media$props$width,
@@ -126,7 +114,7 @@ var MediaSingle = function MediaSingle(props) {
 
   var padding = rendererAppearance === 'full-page' ? _style.FullPagePadding * 2 : 0;
   var isFullWidth = rendererAppearance === 'full-width';
-  var calcDimensions = function calcDimensions(mediaContainerWidth) {
+  var calcDimensions = (0, _react.useCallback)(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     var maxWidth = containerWidth;
     var maxHeight = height / width * maxWidth;
@@ -149,16 +137,26 @@ var MediaSingle = function MediaSingle(props) {
       cardDimensions: cardDimensions,
       lineLength: lineLength
     };
-  };
-  var originalDimensions = {
-    height: height,
-    width: width
-  };
-  var renderMediaSingle = function renderMediaSingle(renderWidth) {
-    var containerWidth = getMediaContainerWidth(renderWidth, layout);
-    var _calcDimensions = calcDimensions(containerWidth),
-      cardDimensions = _calcDimensions.cardDimensions,
-      lineLength = _calcDimensions.lineLength;
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width]);
+  var originalDimensions = (0, _react.useMemo)(function () {
+    return {
+      width: width,
+      height: height
+    };
+  }, [height, width]);
+
+  // Note: in SSR mode the `window` object is not defined,
+  // therefore width here is 0, see:
+  // packages/editor/editor-common/src/ui/WidthProvider/index.tsx
+  var _useContext = (0, _react.useContext)(_ui.WidthContext),
+    renderWidth = _useContext.width;
+  var containerWidth = getMediaContainerWidth(renderWidth, layout);
+  var _useMemo = (0, _react.useMemo)(function () {
+      return calcDimensions(containerWidth);
+    }, [calcDimensions, containerWidth]),
+    cardDimensions = _useMemo.cardDimensions,
+    lineLength = _useMemo.lineLength;
+  var renderMediaSingle = function renderMediaSingle() {
     var mediaComponent = /*#__PURE__*/_react.default.cloneElement(media, {
       resizeMode: 'stretchy-fit',
       cardDimensions: cardDimensions,
@@ -186,12 +184,27 @@ var MediaSingle = function MediaSingle(props) {
       dataAttributes: dataAttributes
     }, (0, _react2.jsx)(_react.Fragment, null, mediaComponent), allowCaptions && caption);
   };
-  return (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref3) {
-    var width = _ref3.width;
-    // Note: in SSR mode the `window` object is not defined,
-    // therefore width here is 0, see:
-    // packages/editor/editor-common/src/ui/WidthProvider/index.tsx
-    return renderMediaSingle(width);
-  });
+  return renderMediaSingle();
+};
+var MediaSingle = function MediaSingle(props) {
+  var children = props.children;
+  var media;
+  var _React$Children$toArr3 = _react.default.Children.toArray(children),
+    _React$Children$toArr4 = (0, _slicedToArray2.default)(_React$Children$toArr3, 2),
+    node = _React$Children$toArr4[0],
+    caption = _React$Children$toArr4[1];
+  if (!isMediaElement(node)) {
+    var mediaElement = checkForMediaElement(node.props.children);
+    if (!mediaElement) {
+      return node;
+    }
+    media = mediaElement;
+  } else {
+    media = node;
+  }
+  return (0, _react2.jsx)(MediaSingleWithChildren, (0, _extends2.default)({}, props, {
+    media: media,
+    caption: caption
+  }));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(MediaSingle);

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

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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.16.1";
+var packageVersion = "109.17.1";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/react/index.js

@@ -369,7 +369,9 @@ export default class ReactSerializer {
       allowAltTextOnImages: this.allowAltTextOnImages,
       featureFlags: this.media && this.media.featureFlags,
       shouldOpenMediaViewer: this.shouldOpenMediaViewer,
-      ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr
+      ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr,
+      // surroundTextNodesWithTextWrapper checks inlineComment.allowDraftMode
+      allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper
     };
   }
   getEmojiProps(node) {

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

@@ -4,7 +4,6 @@ import { css, jsx } from '@emotion/react';
 import { useMemo, useContext, useState, useRef } from 'react';
 import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { SmartCardContext } from '@atlaskit/link-provider';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
@@ -55,7 +54,7 @@ export default function EmbedCard(props) {
     onClick,
     container: portal,
     platform,
-    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? 'show' : undefined,
+    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : 'show',
     actionOptions,
     showServerActions
   };

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent, Fragment, useEffect, useState, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
@@ -15,6 +15,7 @@ import { getEventHandler } from '../../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
+import { AnnotationsDraftContext } from '../../../ui/annotations/context';
 import { linkStyle, borderStyle } from './styles';
 import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
 import { injectIntl } from 'react-intl-next';
@@ -124,7 +125,7 @@ const CommentBadgeWrapper = ({
     onClick: onClick
   }, rest));
 };
-export default class Media extends PureComponent {
+class Media extends PureComponent {
   constructor(props) {
     super(props);
     _defineProperty(this, "renderCard", (providers = {}) => {
@@ -218,4 +219,35 @@ export default class Media extends PureComponent {
       renderNode: this.renderCard
     });
   }
-}
+}
+const MediaWithDraftAnnotation = props => {
+  const draftPosition = React.useContext(AnnotationsDraftContext);
+  const {
+    dataAttributes
+  } = props;
+  const pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
+  const [position, setPosition] = useState();
+  const [shouldApplyDraftAnnotation, setShouldApplyDraftAnnotation] = useState(false);
+  useEffect(() => {
+    if (pos === undefined) {
+      return;
+    }
+    if (draftPosition !== null && draftPosition.from === pos) {
+      setShouldApplyDraftAnnotation(true);
+      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
+    } else if (draftPosition === null && shouldApplyDraftAnnotation) {
+      setShouldApplyDraftAnnotation(false);
+      setPosition(undefined);
+    }
+  }, [draftPosition, pos, shouldApplyDraftAnnotation]);
+  const applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
+  const dataAttributesWithDraftAnnotation = useMemo(() => applyDraftAnnotation ? {
+    ...dataAttributes,
+    'data-annotation-draft-mark': true,
+    'data-renderer-mark': true
+  } : dataAttributes, [applyDraftAnnotation, dataAttributes]);
+  return jsx(Media, _extends({}, props, {
+    dataAttributes: dataAttributesWithDraftAnnotation
+  }));
+};
+export default MediaWithDraftAnnotation;

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

@@ -1,9 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
-import { default as React, Fragment } from 'react';
+import { default as React, Fragment, useCallback, useContext, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
@@ -46,18 +47,19 @@ export const getMediaContainerWidth = (currentContainerWidth, layout) => {
   }
   return currentContainerWidth;
 };
-const MediaSingle = props => {
+const MediaSingleWithChildren = props => {
   const {
     rendererAppearance,
     featureFlags,
     isInsideOfBlockNode,
     layout,
-    children,
     width: widthAttr,
     widthType,
     allowCaptions = false,
     isInsideOfInlineExtension = false,
-    dataAttributes
+    dataAttributes,
+    media,
+    caption
   } = props;
   const [externalImageDimensions, setExternalImageDimensions] = React.useState({
     width: 0,
@@ -73,17 +75,6 @@ const MediaSingle = props => {
       height
     });
   }, []);
-  let media;
-  const [node, caption] = React.Children.toArray(children);
-  if (!isMediaElement(node)) {
-    const mediaElement = checkForMediaElement(node.props.children);
-    if (!mediaElement) {
-      return node;
-    }
-    media = mediaElement;
-  } else {
-    media = node;
-  }
   let {
     width = DEFAULT_WIDTH,
     height = DEFAULT_HEIGHT,
@@ -110,7 +101,7 @@ const MediaSingle = props => {
 
   const padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
   const isFullWidth = rendererAppearance === 'full-width';
-  const calcDimensions = mediaContainerWidth => {
+  const calcDimensions = useCallback(mediaContainerWidth => {
     const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     const maxWidth = containerWidth;
     const maxHeight = height / width * maxWidth;
@@ -133,17 +124,24 @@ const MediaSingle = props => {
       cardDimensions,
       lineLength
     };
-  };
-  const originalDimensions = {
-    height,
-    width
-  };
-  const renderMediaSingle = renderWidth => {
-    const containerWidth = getMediaContainerWidth(renderWidth, layout);
-    const {
-      cardDimensions,
-      lineLength
-    } = calcDimensions(containerWidth);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width]);
+  const originalDimensions = useMemo(() => ({
+    width,
+    height
+  }), [height, width]);
+
+  // Note: in SSR mode the `window` object is not defined,
+  // therefore width here is 0, see:
+  // packages/editor/editor-common/src/ui/WidthProvider/index.tsx
+  const {
+    width: renderWidth
+  } = useContext(WidthContext);
+  const containerWidth = getMediaContainerWidth(renderWidth, layout);
+  const {
+    cardDimensions,
+    lineLength
+  } = useMemo(() => calcDimensions(containerWidth), [calcDimensions, containerWidth]);
+  const renderMediaSingle = () => {
     const mediaComponent = /*#__PURE__*/React.cloneElement(media, {
       resizeMode: 'stretchy-fit',
       cardDimensions,
@@ -171,13 +169,26 @@ const MediaSingle = props => {
       dataAttributes: dataAttributes
     }, jsx(Fragment, null, mediaComponent), allowCaptions && caption);
   };
-  return jsx(WidthConsumer, null, ({
-    width
-  }) => {
-    // Note: in SSR mode the `window` object is not defined,
-    // therefore width here is 0, see:
-    // packages/editor/editor-common/src/ui/WidthProvider/index.tsx
-    return renderMediaSingle(width);
-  });
+  return renderMediaSingle();
+};
+const MediaSingle = props => {
+  const {
+    children
+  } = props;
+  let media;
+  const [node, caption] = React.Children.toArray(children);
+  if (!isMediaElement(node)) {
+    const mediaElement = checkForMediaElement(node.props.children);
+    if (!mediaElement) {
+      return node;
+    }
+    media = mediaElement;
+  } else {
+    media = node;
+  }
+  return jsx(MediaSingleWithChildren, _extends({}, props, {
+    media: media,
+    caption: caption
+  }));
 };
 export default injectIntl(MediaSingle);

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

@@ -36,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.16.1";
+const packageVersion = "109.17.1";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/react/index.js

@@ -414,7 +414,9 @@ var ReactSerializer = /*#__PURE__*/function () {
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,
-        ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr
+        ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr,
+        // surroundTextNodesWithTextWrapper checks inlineComment.allowDraftMode
+        allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper
       });
     }
   }, {

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

@@ -5,7 +5,6 @@ import { css, jsx } from '@emotion/react';
 import { useMemo, useContext, useState, useRef } from 'react';
 import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { SmartCardContext } from '@atlaskit/link-provider';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
@@ -55,7 +54,7 @@ export default function EmbedCard(props) {
     onClick: onClick,
     container: portal,
     platform: platform,
-    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? 'show' : undefined,
+    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : 'show',
     actionOptions: actionOptions,
     showServerActions: showServerActions
   };

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

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -8,11 +9,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["marks"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 
-import React, { PureComponent, Fragment } from 'react';
+import React, { PureComponent, Fragment, useEffect, useState, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
@@ -25,6 +28,7 @@ import { getEventHandler } from '../../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
+import { AnnotationsDraftContext } from '../../../ui/annotations/context';
 import { linkStyle, borderStyle } from './styles';
 import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
 import { injectIntl } from 'react-intl-next';
@@ -229,4 +233,39 @@ var Media = /*#__PURE__*/function (_PureComponent) {
   }]);
   return Media;
 }(PureComponent);
-export { Media as default };
+var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
+  var draftPosition = React.useContext(AnnotationsDraftContext);
+  var dataAttributes = props.dataAttributes;
+  var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    shouldApplyDraftAnnotation = _useState4[0],
+    setShouldApplyDraftAnnotation = _useState4[1];
+  useEffect(function () {
+    if (pos === undefined) {
+      return;
+    }
+    if (draftPosition !== null && draftPosition.from === pos) {
+      setShouldApplyDraftAnnotation(true);
+      setPosition(draftPosition === null || draftPosition === void 0 ? void 0 : draftPosition.from);
+    } else if (draftPosition === null && shouldApplyDraftAnnotation) {
+      setShouldApplyDraftAnnotation(false);
+      setPosition(undefined);
+    }
+  }, [draftPosition, pos, shouldApplyDraftAnnotation]);
+  var applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
+  var dataAttributesWithDraftAnnotation = useMemo(function () {
+    return applyDraftAnnotation ? _objectSpread(_objectSpread({}, dataAttributes), {}, {
+      'data-annotation-draft-mark': true,
+      'data-renderer-mark': true
+    }) : dataAttributes;
+  }, [applyDraftAnnotation, dataAttributes]);
+  return jsx(Media, _extends({}, props, {
+    dataAttributes: dataAttributesWithDraftAnnotation
+  }));
+};
+export default MediaWithDraftAnnotation;

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

@@ -1,10 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 
-import { default as React, Fragment } from 'react';
+import { default as React, Fragment, useCallback, useContext, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
@@ -48,19 +49,20 @@ export var getMediaContainerWidth = function getMediaContainerWidth(currentConta
   }
   return currentContainerWidth;
 };
-var MediaSingle = function MediaSingle(props) {
+var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   var rendererAppearance = props.rendererAppearance,
     featureFlags = props.featureFlags,
     isInsideOfBlockNode = props.isInsideOfBlockNode,
     layout = props.layout,
-    children = props.children,
     widthAttr = props.width,
     widthType = props.widthType,
     _props$allowCaptions = props.allowCaptions,
     allowCaptions = _props$allowCaptions === void 0 ? false : _props$allowCaptions,
     _props$isInsideOfInli = props.isInsideOfInlineExtension,
     isInsideOfInlineExtension = _props$isInsideOfInli === void 0 ? false : _props$isInsideOfInli,
-    dataAttributes = props.dataAttributes;
+    dataAttributes = props.dataAttributes,
+    media = props.media,
+    caption = props.caption;
   var _React$useState = React.useState({
       width: 0,
       height: 0
@@ -77,20 +79,6 @@ var MediaSingle = function MediaSingle(props) {
       height: height
     });
   }, []);
-  var media;
-  var _React$Children$toArr3 = React.Children.toArray(children),
-    _React$Children$toArr4 = _slicedToArray(_React$Children$toArr3, 2),
-    node = _React$Children$toArr4[0],
-    caption = _React$Children$toArr4[1];
-  if (!isMediaElement(node)) {
-    var mediaElement = checkForMediaElement(node.props.children);
-    if (!mediaElement) {
-      return node;
-    }
-    media = mediaElement;
-  } else {
-    media = node;
-  }
   var _media$props = media.props,
     _media$props$width = _media$props.width,
     width = _media$props$width === void 0 ? DEFAULT_WIDTH : _media$props$width,
@@ -116,7 +104,7 @@ var MediaSingle = function MediaSingle(props) {
 
   var padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
   var isFullWidth = rendererAppearance === 'full-width';
-  var calcDimensions = function calcDimensions(mediaContainerWidth) {
+  var calcDimensions = useCallback(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     var maxWidth = containerWidth;
     var maxHeight = height / width * maxWidth;
@@ -139,16 +127,26 @@ var MediaSingle = function MediaSingle(props) {
       cardDimensions: cardDimensions,
       lineLength: lineLength
     };
-  };
-  var originalDimensions = {
-    height: height,
-    width: width
-  };
-  var renderMediaSingle = function renderMediaSingle(renderWidth) {
-    var containerWidth = getMediaContainerWidth(renderWidth, layout);
-    var _calcDimensions = calcDimensions(containerWidth),
-      cardDimensions = _calcDimensions.cardDimensions,
-      lineLength = _calcDimensions.lineLength;
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width]);
+  var originalDimensions = useMemo(function () {
+    return {
+      width: width,
+      height: height
+    };
+  }, [height, width]);
+
+  // Note: in SSR mode the `window` object is not defined,
+  // therefore width here is 0, see:
+  // packages/editor/editor-common/src/ui/WidthProvider/index.tsx
+  var _useContext = useContext(WidthContext),
+    renderWidth = _useContext.width;
+  var containerWidth = getMediaContainerWidth(renderWidth, layout);
+  var _useMemo = useMemo(function () {
+      return calcDimensions(containerWidth);
+    }, [calcDimensions, containerWidth]),
+    cardDimensions = _useMemo.cardDimensions,
+    lineLength = _useMemo.lineLength;
+  var renderMediaSingle = function renderMediaSingle() {
     var mediaComponent = /*#__PURE__*/React.cloneElement(media, {
       resizeMode: 'stretchy-fit',
       cardDimensions: cardDimensions,
@@ -176,12 +174,27 @@ var MediaSingle = function MediaSingle(props) {
       dataAttributes: dataAttributes
     }, jsx(Fragment, null, mediaComponent), allowCaptions && caption);
   };
-  return jsx(WidthConsumer, null, function (_ref3) {
-    var width = _ref3.width;
-    // Note: in SSR mode the `window` object is not defined,
-    // therefore width here is 0, see:
-    // packages/editor/editor-common/src/ui/WidthProvider/index.tsx
-    return renderMediaSingle(width);
-  });
+  return renderMediaSingle();
+};
+var MediaSingle = function MediaSingle(props) {
+  var children = props.children;
+  var media;
+  var _React$Children$toArr3 = React.Children.toArray(children),
+    _React$Children$toArr4 = _slicedToArray(_React$Children$toArr3, 2),
+    node = _React$Children$toArr4[0],
+    caption = _React$Children$toArr4[1];
+  if (!isMediaElement(node)) {
+    var mediaElement = checkForMediaElement(node.props.children);
+    if (!mediaElement) {
+      return node;
+    }
+    media = mediaElement;
+  } else {
+    media = node;
+  }
+  return jsx(MediaSingleWithChildren, _extends({}, props, {
+    media: media,
+    caption: caption
+  }));
 };
 export default injectIntl(MediaSingle);

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

@@ -46,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.16.1";
+var packageVersion = "109.17.1";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -1,4 +1,6 @@
-import React, { PureComponent } from 'react';
+/** @jsx jsx */
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 import { jsx } from '@emotion/react';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
@@ -19,14 +21,10 @@ export type MediaProps = MediaCardProps & {
     featureFlags?: MediaFeatureFlags;
     eventHandlers?: EventHandlers;
     enableDownloadButton?: boolean;
+    allowAnnotationsDraftMode?: boolean;
     mediaSingleElement?: HTMLElement | null;
     width?: number;
     height?: number;
 };
-export default class Media extends PureComponent<MediaProps, {}> {
-    constructor(props: MediaProps);
-    private handleMediaLinkClickFn;
-    private renderCard;
-    private handleMediaLinkClick;
-    render(): jsx.JSX.Element;
-}
+declare const MediaWithDraftAnnotation: (props: PropsWithChildren<MediaProps>) => jsx.JSX.Element;
+export default MediaWithDraftAnnotation;

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

@@ -1,4 +1,6 @@
-import React, { PureComponent } from 'react';
+/** @jsx jsx */
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 import { jsx } from '@emotion/react';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
@@ -19,14 +21,10 @@ export type MediaProps = MediaCardProps & {
     featureFlags?: MediaFeatureFlags;
     eventHandlers?: EventHandlers;
     enableDownloadButton?: boolean;
+    allowAnnotationsDraftMode?: boolean;
     mediaSingleElement?: HTMLElement | null;
     width?: number;
     height?: number;
 };
-export default class Media extends PureComponent<MediaProps, {}> {
-    constructor(props: MediaProps);
-    private handleMediaLinkClickFn;
-    private renderCard;
-    private handleMediaLinkClick;
-    render(): jsx.JSX.Element;
-}
+declare const MediaWithDraftAnnotation: (props: PropsWithChildren<MediaProps>) => jsx.JSX.Element;
+export default MediaWithDraftAnnotation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.16.1",
+  "version": "109.17.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.11.0",
+    "@atlaskit/button": "^17.12.0",
     "@atlaskit/code": "^15.1.0",
     "@atlaskit/editor-common": "^78.26.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
@@ -44,10 +44,10 @@
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.1.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
-    "@atlaskit/media-ui": "^25.6.0",
+    "@atlaskit/media-ui": "^25.7.0",
     "@atlaskit/media-viewer": "^48.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/smart-card": "^26.52.0",
+    "@atlaskit/smart-card": "^26.54.0",
     "@atlaskit/status": "^1.4.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/theme": "^12.7.0",
@@ -126,9 +126,6 @@
       "type": "boolean",
       "referenceOnly": "true"
     },
-    "platform.editor.show-embed-card-frame-renderer": {
-      "type": "boolean"
-    },
     "platform.editor.inline_extension.extended_lcqdn": {
       "type": "boolean"
     },