@atlaskit/renderer 109.51.6 → 109.53.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/renderer
 
+## 109.53.0
+
+### Minor Changes
+
+- [#137821](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137821)
+  [`e26174c7d02a6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e26174c7d02a6) -
+  ED-24631 Refactor how ExternalImageBadge and CommentBadge are rendered
+
+### Patch Changes
+
+- Updated dependencies
+
+## 109.52.0
+
+### Minor Changes
+
+- [#137755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137755)
+  [`f3d004d4e3a3e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3d004d4e3a3e) -
+  ED-24650 fix nested node jittering issue
+
+### Patch Changes
+
+- [#137736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137736)
+  [`2a88fdd213838`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2a88fdd213838) -
+  Introducing new smaller refined entry-points for editor-common to reduce bundle size.
+- [#137404](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137404)
+  [`adae1f3dc8fca`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/adae1f3dc8fca) -
+  Switches Support Table in Comment features to use Statsig experiment instead of a Feature Gate.
+- Updated dependencies
+
 ## 109.51.6
 
 ### Patch Changes

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

@@ -42,6 +42,7 @@ var _templateObject, _templateObject2;
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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); }
@@ -207,16 +208,19 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   }, rest));
 };
 
-// This is a copy of above component with adding forwardRef.
-// Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
-var CommentBadgeWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (_ref6, ref) {
+/**
+ * Remove CommentBadgeWrapper component above
+ * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
+ * when clean up platform_editor_insert_media_plugin_phase_one feature flag
+ */
+
+var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref6) {
   var _marks$map2;
   var marks = _ref6.marks,
     mediaSingleElement = _ref6.mediaSingleElement,
     _ref6$isDrafting = _ref6.isDrafting,
     isDrafting = _ref6$isDrafting === void 0 ? false : _ref6$isDrafting,
     rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
-  var intl = (0, _reactIntlNext.useIntl)();
   var _useState5 = (0, _react.useState)('default'),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     status = _useState6[0],
@@ -271,9 +275,7 @@ var CommentBadgeWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function
       });
     }
   };
-  return (0, _react2.jsx)(_mediaSingle.CommentBadge, (0, _extends2.default)({
-    ref: ref,
-    intl: intl,
+  return (0, _react2.jsx)(_mediaSingle.CommentBadgeNext, (0, _extends2.default)({
     onMouseEnter: function onMouseEnter() {
       return setEntered(true);
     },
@@ -284,7 +286,7 @@ var CommentBadgeWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function
     onClick: onClick,
     mediaSingleElement: mediaSingleElement
   }, rest));
-});
+};
 var Media = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Media, _PureComponent);
   var _super = _createSuper(Media);
@@ -292,7 +294,6 @@ var Media = /*#__PURE__*/function (_PureComponent) {
     var _this;
     (0, _classCallCheck2.default)(this, Media);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "commentBadgeRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCard", function () {
       var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var contextIdentifierProvider = providers.contextIdentifierProvider;
@@ -317,14 +318,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       var isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
       var isIncludeExcerpt = !!(mediaSingleElement !== null && mediaSingleElement !== void 0 && mediaSingleElement.closest('.ak-excerpt-include'));
       var showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && !isInPageInclude && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaInsertExcerpt) || !isIncludeExcerpt);
-      var insertMediaPluginPhaseOneFlag = (0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one');
-      var shouldShowExternalMediaBadge = _this.props.type === 'external' && insertMediaPluginPhaseOneFlag;
-      var commentBadgeOffset = function commentBadgeOffset() {
-        if (_this.commentBadgeRef.current) {
-          return _this.commentBadgeRef.current.offsetWidth + 2;
-        }
-        return 0;
-      };
+      var shouldShowExternalMediaBadge = _this.props.type === 'external';
       return (0, _react2.jsx)(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
@@ -336,25 +330,27 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
-        commentBadgeRightOffset: commentBadgeOffset(),
+      }, (0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one') && (0, _react2.jsx)(_mediaSingle.MediaBadges, {
         mediaElement: mediaSingleElement,
         mediaWidth: width,
         mediaHeight: height
-      }), showCommentBadge && (insertMediaPluginPhaseOneFlag ? (0, _react2.jsx)(CommentBadgeWrapperWithRef, {
-        ref: _this.commentBadgeRef,
-        marks: annotationMarks,
-        mediaSingleElement: mediaSingleElement,
-        width: width,
-        height: height,
-        isDrafting: isDrafting
-      }) : (0, _react2.jsx)(CommentBadgeWrapper, {
+      }, function (_ref8) {
+        var badgeSize = _ref8.badgeSize;
+        return (0, _react2.jsx)(_react.default.Fragment, null, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
+          badgeSize: badgeSize
+        }), showCommentBadge && (0, _react2.jsx)(CommentBadgeNextWrapper, {
+          marks: annotationMarks,
+          mediaSingleElement: mediaSingleElement,
+          isDrafting: isDrafting,
+          badgeSize: badgeSize
+        }));
+      }), !(0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one') && showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting
-      })), (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
+      }), (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -20,7 +20,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("@atlaskit/editor-common/types");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _style = require("../../ui/Renderer/style");
 var _tableCell = require("./tableCell");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
@@ -33,7 +33,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 isTableResizingEnabled = exports.isTableResizingEnabled = function isTableResizingEnabled(appearance) {
-  return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) || (0, _appearance.isCommentAppearance)(appearance) && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment');
+  return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) || (0, _appearance.isCommentAppearance)(appearance) && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
+    exposure: true
+  });
 };
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === _types.SortOrder.NO_ORDER) {

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

@@ -22,6 +22,9 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _ui = require("@atlaskit/editor-common/ui");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
 var _utils = require("@atlaskit/editor-common/utils");
+var _measureRender = require("@atlaskit/editor-common/performance/measure-render");
+var _browser = require("@atlaskit/editor-common/browser");
+var _navigation = require("@atlaskit/editor-common/performance/navigation");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -60,7 +63,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.51.6";
+var packageVersion = "109.53.0";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
@@ -73,7 +76,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
      * This is used in measuring the Renderer Mount time and is then
      * deleted once that measurement occurs.
      */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderedMeasurementDistortedDurationMonitor", (0, _utils.getDistortedDurationMonitor)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderedMeasurementDistortedDurationMonitor", (0, _measureRender.getDistortedDurationMonitor)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "featureFlags", (0, _memoizeOne.default)(function (featureFlags) {
       var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags, {
         objectFlagKeys: ['rendererRenderTracking']
@@ -105,10 +108,10 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseTripleClickInTables", function (event) {
       var _parentElement, _parentElement2;
-      if (_utils.browser.ios || _utils.browser.android) {
+      if (_browser.browser.ios || _browser.browser.android) {
         return;
       }
-      var badBrowser = _utils.browser.chrome || _utils.browser.safari;
+      var badBrowser = _browser.browser.chrome || _browser.browser.safari;
       var tripleClick = event.detail >= 3;
       if (!(badBrowser && tripleClick)) {
         return;
@@ -221,7 +224,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
                 platform: _events.PLATFORM.WEB,
                 duration: duration,
                 distortedDuration: _this2.renderedMeasurementDistortedDurationMonitor.distortedDuration,
-                ttfb: (0, _utils.getResponseEndTime)(),
+                ttfb: (0, _navigation.getResponseEndTime)(),
                 nodes: (0, _traverse.reduce)(_this2.props.document, function (acc, node) {
                   acc[node.type] = (acc[node.type] || 0) + 1;
                   return acc;

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 
 import React, { PureComponent, Fragment, useEffect, useState, useMemo, useContext } from 'react';
@@ -20,8 +21,8 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, VIEW_METHOD } fr
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
 import { AnnotationsDraftContext, ProvidersContext } from '../../../ui/annotations/context';
-import { CommentBadge as CommentBadgeComponent, ExternalImageBadge } from '@atlaskit/editor-common/media-single';
-import { useIntl, injectIntl } from 'react-intl-next';
+import { CommentBadge as CommentBadgeComponent, CommentBadgeNext, ExternalImageBadge, MediaBadges } from '@atlaskit/editor-common/media-single';
+import { injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -187,16 +188,19 @@ const CommentBadgeWrapper = ({
   }, rest));
 };
 
-// This is a copy of above component with adding forwardRef.
-// Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
-const CommentBadgeWrapperWithRef = /*#__PURE__*/React.forwardRef(({
+/**
+ * Remove CommentBadgeWrapper component above
+ * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
+ * when clean up platform_editor_insert_media_plugin_phase_one feature flag
+ */
+
+const CommentBadgeNextWrapper = ({
   marks,
   mediaSingleElement,
   isDrafting = false,
   ...rest
-}, ref) => {
+}) => {
   var _marks$map2;
-  const intl = useIntl();
   const [status, setStatus] = useState('default');
   const [entered, setEntered] = useState(false);
   const updateSubscriber = useInlineCommentSubscriberContext();
@@ -243,20 +247,17 @@ const CommentBadgeWrapperWithRef = /*#__PURE__*/React.forwardRef(({
       });
     }
   };
-  return jsx(CommentBadgeComponent, _extends({
-    ref: ref,
-    intl: intl,
+  return jsx(CommentBadgeNext, _extends({
     onMouseEnter: () => setEntered(true),
     onMouseLeave: () => setEntered(false),
     status: entered ? 'entered' : status,
     onClick: onClick,
     mediaSingleElement: mediaSingleElement
   }, rest));
-});
+};
 class Media extends PureComponent {
   constructor(props) {
     super(props);
-    _defineProperty(this, "commentBadgeRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "renderCard", (providers = {}) => {
       const {
         contextIdentifierProvider
@@ -282,14 +283,7 @@ class Media extends PureComponent {
       const isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
       const isIncludeExcerpt = !!(mediaSingleElement !== null && mediaSingleElement !== void 0 && mediaSingleElement.closest('.ak-excerpt-include'));
       const showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && !isInPageInclude && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaInsertExcerpt) || !isIncludeExcerpt);
-      const insertMediaPluginPhaseOneFlag = fg('platform_editor_insert_media_plugin_phase_one');
-      const shouldShowExternalMediaBadge = this.props.type === 'external' && insertMediaPluginPhaseOneFlag;
-      const commentBadgeOffset = () => {
-        if (this.commentBadgeRef.current) {
-          return this.commentBadgeRef.current.offsetWidth + 2;
-        }
-        return 0;
-      };
+      const shouldShowExternalMediaBadge = this.props.type === 'external';
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: this.handleMediaLinkClickFn
@@ -303,25 +297,26 @@ class Media extends PureComponent {
             border: !!borderMark
           }
         }
-      }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
-        commentBadgeRightOffset: commentBadgeOffset(),
+      }, fg('platform_editor_insert_media_plugin_phase_one') && jsx(MediaBadges, {
         mediaElement: mediaSingleElement,
         mediaWidth: width,
         mediaHeight: height
-      }), showCommentBadge && (insertMediaPluginPhaseOneFlag ? jsx(CommentBadgeWrapperWithRef, {
-        ref: this.commentBadgeRef,
+      }, ({
+        badgeSize
+      }) => jsx(React.Fragment, null, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
+        badgeSize: badgeSize
+      }), showCommentBadge && jsx(CommentBadgeNextWrapper, {
         marks: annotationMarks,
         mediaSingleElement: mediaSingleElement,
-        width: width,
-        height: height,
-        isDrafting: isDrafting
-      }) : jsx(CommentBadgeWrapper, {
+        isDrafting: isDrafting,
+        badgeSize: badgeSize
+      }))), !fg('platform_editor_insert_media_plugin_phase_one') && showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting
-      })), jsx(MediaCard, _extends({
+      }), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -7,14 +7,16 @@ import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMerged
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
-export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && fg('platform_editor_table_support_in_comment');
+export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
+  exposure: true
+});
 const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;

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

@@ -12,7 +12,10 @@ 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 { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
-import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
+import { getAnalyticsAppearance, getAnalyticsEventSeverity, shouldForceTracking, measureTTI } from '@atlaskit/editor-common/utils';
+import { getDistortedDurationMonitor } from '@atlaskit/editor-common/performance/measure-render';
+import { browser } from '@atlaskit/editor-common/browser';
+import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
@@ -42,7 +45,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.51.6";
+const packageVersion = "109.53.0";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {

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

@@ -19,6 +19,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 
 import React, { PureComponent, Fragment, useEffect, useState, useMemo, useContext } from 'react';
@@ -36,8 +37,8 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, VIEW_METHOD } fr
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
 import { AnnotationsDraftContext, ProvidersContext } from '../../../ui/annotations/context';
-import { CommentBadge as CommentBadgeComponent, ExternalImageBadge } from '@atlaskit/editor-common/media-single';
-import { useIntl, injectIntl } from 'react-intl-next';
+import { CommentBadge as CommentBadgeComponent, CommentBadgeNext, ExternalImageBadge, MediaBadges } from '@atlaskit/editor-common/media-single';
+import { injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -198,16 +199,19 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   }, rest));
 };
 
-// This is a copy of above component with adding forwardRef.
-// Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
-var CommentBadgeWrapperWithRef = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+/**
+ * Remove CommentBadgeWrapper component above
+ * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
+ * when clean up platform_editor_insert_media_plugin_phase_one feature flag
+ */
+
+var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref6) {
   var _marks$map2;
   var marks = _ref6.marks,
     mediaSingleElement = _ref6.mediaSingleElement,
     _ref6$isDrafting = _ref6.isDrafting,
     isDrafting = _ref6$isDrafting === void 0 ? false : _ref6$isDrafting,
     rest = _objectWithoutProperties(_ref6, _excluded2);
-  var intl = useIntl();
   var _useState5 = useState('default'),
     _useState6 = _slicedToArray(_useState5, 2),
     status = _useState6[0],
@@ -262,9 +266,7 @@ var CommentBadgeWrapperWithRef = /*#__PURE__*/React.forwardRef(function (_ref6,
       });
     }
   };
-  return jsx(CommentBadgeComponent, _extends({
-    ref: ref,
-    intl: intl,
+  return jsx(CommentBadgeNext, _extends({
     onMouseEnter: function onMouseEnter() {
       return setEntered(true);
     },
@@ -275,7 +277,7 @@ var CommentBadgeWrapperWithRef = /*#__PURE__*/React.forwardRef(function (_ref6,
     onClick: onClick,
     mediaSingleElement: mediaSingleElement
   }, rest));
-});
+};
 var Media = /*#__PURE__*/function (_PureComponent) {
   _inherits(Media, _PureComponent);
   var _super = _createSuper(Media);
@@ -283,7 +285,6 @@ var Media = /*#__PURE__*/function (_PureComponent) {
     var _this;
     _classCallCheck(this, Media);
     _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "commentBadgeRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "renderCard", function () {
       var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var contextIdentifierProvider = providers.contextIdentifierProvider;
@@ -308,14 +309,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       var isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
       var isIncludeExcerpt = !!(mediaSingleElement !== null && mediaSingleElement !== void 0 && mediaSingleElement.closest('.ak-excerpt-include'));
       var showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && !isInPageInclude && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaInsertExcerpt) || !isIncludeExcerpt);
-      var insertMediaPluginPhaseOneFlag = fg('platform_editor_insert_media_plugin_phase_one');
-      var shouldShowExternalMediaBadge = _this.props.type === 'external' && insertMediaPluginPhaseOneFlag;
-      var commentBadgeOffset = function commentBadgeOffset() {
-        if (_this.commentBadgeRef.current) {
-          return _this.commentBadgeRef.current.offsetWidth + 2;
-        }
-        return 0;
-      };
+      var shouldShowExternalMediaBadge = _this.props.type === 'external';
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
@@ -327,25 +321,27 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: _defineProperty({}, MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
-        commentBadgeRightOffset: commentBadgeOffset(),
+      }, fg('platform_editor_insert_media_plugin_phase_one') && jsx(MediaBadges, {
         mediaElement: mediaSingleElement,
         mediaWidth: width,
         mediaHeight: height
-      }), showCommentBadge && (insertMediaPluginPhaseOneFlag ? jsx(CommentBadgeWrapperWithRef, {
-        ref: _this.commentBadgeRef,
-        marks: annotationMarks,
-        mediaSingleElement: mediaSingleElement,
-        width: width,
-        height: height,
-        isDrafting: isDrafting
-      }) : jsx(CommentBadgeWrapper, {
+      }, function (_ref8) {
+        var badgeSize = _ref8.badgeSize;
+        return jsx(React.Fragment, null, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
+          badgeSize: badgeSize
+        }), showCommentBadge && jsx(CommentBadgeNextWrapper, {
+          marks: annotationMarks,
+          mediaSingleElement: mediaSingleElement,
+          isDrafting: isDrafting,
+          badgeSize: badgeSize
+        }));
+      }), !fg('platform_editor_insert_media_plugin_phase_one') && showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting
-      })), jsx(MediaCard, _extends({
+      }), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -18,7 +18,7 @@ import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMerged
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
@@ -26,7 +26,9 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
 export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
-  return isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && fg('platform_editor_table_support_in_comment');
+  return isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
+    exposure: true
+  });
 };
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {

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

@@ -22,7 +22,10 @@ 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 { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
-import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
+import { getAnalyticsAppearance, getAnalyticsEventSeverity, shouldForceTracking, measureTTI } from '@atlaskit/editor-common/utils';
+import { getDistortedDurationMonitor } from '@atlaskit/editor-common/performance/measure-render';
+import { browser } from '@atlaskit/editor-common/browser';
+import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
@@ -52,7 +55,7 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.51.6";
+var packageVersion = "109.53.0";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);

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

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 import type { PropsWithChildren } from 'react';
 import React from 'react';

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

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 import type { PropsWithChildren } from 'react';
 import React from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "109.51.6",
+	"version": "109.53.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,14 +29,14 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/editor-common": "^88.8.0",
+		"@atlaskit/editor-common": "^88.12.0",
 		"@atlaskit/editor-json-transformer": "^8.18.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/emoji": "^67.7.0",
 		"@atlaskit/feature-gate-js-client": "^4.18.0",
-		"@atlaskit/icon": "^22.15.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/link-datasource": "^2.12.0",
 		"@atlaskit/media-card": "^78.2.0",
 		"@atlaskit/media-client": "^27.6.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/media-ui": "^25.11.0",
 		"@atlaskit/media-viewer": "^48.7.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/smart-card": "^27.20.0",
+		"@atlaskit/smart-card": "^28.0.0",
 		"@atlaskit/status": "^1.4.0",
 		"@atlaskit/task-decision": "^17.10.0",
 		"@atlaskit/theme": "^13.0.0",
@@ -73,7 +73,7 @@
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/css-reset": "^6.10.0",
 		"@atlaskit/editor-test-helpers": "^18.33.0",
-		"@atlaskit/link-provider": "^1.14.0",
+		"@atlaskit/link-provider": "^1.15.0",
 		"@atlaskit/link-test-helpers": "^7.5.0",
 		"@atlaskit/linking-common": "^5.11.0",
 		"@atlaskit/media-core": "^34.3.0",
@@ -128,9 +128,6 @@
 		"platform.editor.inline_extension.extended_lcqdn": {
 			"type": "boolean"
 		},
-		"platform_editor_table_support_in_comment": {
-			"type": "boolean"
-		},
 		"editor_inline_comments_on_inline_nodes": {
 			"type": "boolean"
 		},