@atlaskit/renderer 109.47.0 → 109.49.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/renderer
 
+## 109.49.0
+
+### Minor Changes
+
+- [`3ee11b74099d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ee11b74099d5) -
+  [ux] Adds UNSTABLE_allowTableAlignment prop on Renderer to allow consumers enable Table Alignment
+  feature (for now available only for Confluence)
+
+## 109.48.0
+
+### Minor Changes
+
+- [#130065](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130065)
+  [`e71a357ea40dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e71a357ea40dd) -
+  [ux] [ED-24323] Add external image badge for externally hosted images
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.47.0
 
 ### Minor Changes

package/dist/cjs/react/index.js

@@ -191,6 +191,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     this.isInsideOfInlineExtension = init.isInsideOfInlineExtension;
     this.textHighlighter = init.textHighlighter;
     this.isCommentsOnMediaMediaInlineBugFixEnabled = init.isCommentsOnMediaMediaInlineBugFixEnabled;
+    this.allowTableAlignment = init.allowTableAlignment;
   }
   (0, _createClass2.default)(ReactSerializer, [{
     key: "resetState",
@@ -363,7 +364,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         tableNode: node,
         stickyHeaders: stickyHeaders,
         isInsideOfBlockNode: isInsideOfBlockNode,
-        isInsideMultiBodiedExtension: isInsideMultiBodiedExtension
+        isInsideMultiBodiedExtension: isInsideMultiBodiedExtension,
+        allowTableAlignment: this.allowTableAlignment
       });
     }
   }, {

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

@@ -36,7 +36,8 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("../../../ui/annotations/hooks");
 var _types = require("@atlaskit/editor-common/types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _excluded = ["marks", "mediaSingleElement", "isDrafting"];
+var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
+  _excluded2 = ["marks", "mediaSingleElement", "isDrafting"];
 var _templateObject, _templateObject2;
 /**
  * @jsxRuntime classic
@@ -163,7 +164,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
         var parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
           var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
-          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!(0, _platformFeatureFlags.getBooleanFF)('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!(0, _platformFeatureFlags.fg)('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
@@ -205,6 +206,85 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     onClick: onClick
   }, 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) {
+  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],
+    setStatus = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    entered = _useState8[0],
+    setEntered = _useState8[1];
+  var updateSubscriber = (0, _hooks.useInlineCommentSubscriberContext)();
+  var activeParentIds = (0, _hooks.useInlineCommentsFilter)({
+    annotationIds: (_marks$map2 = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
+      return mark.attrs.id;
+    })) !== null && _marks$map2 !== void 0 ? _marks$map2 : [''],
+    filter: {
+      state: _adfSchema.AnnotationMarkStates.ACTIVE
+    }
+  });
+  (0, _react.useEffect)(function () {
+    var observer = new MutationObserver(function (mutationList) {
+      mutationList.forEach(function (mutation) {
+        var parentNode = mutation.target.parentNode;
+        if (mutation.attributeName === 'data-has-focus') {
+          var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
+          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!(0, _platformFeatureFlags.fg)('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          elementHasFocus ? setStatus('active') : setStatus('default');
+        }
+      });
+    });
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['data-has-focus']
+      });
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [mediaSingleElement, setStatus]);
+  if (!isDrafting && !activeParentIds.length) {
+    return null;
+  }
+  var onClick = function onClick(e) {
+    e.preventDefault();
+    if (updateSubscriber) {
+      updateSubscriber.emit(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeParentIds,
+        eventTarget: e.target,
+        // use mediaSingle here to align with annotation viewed event dispatched in editor
+        eventTargetType: 'mediaSingle',
+        viewMethod: _analytics.VIEW_METHOD.BADGE
+      });
+    }
+  };
+  return (0, _react2.jsx)(_mediaSingle.CommentBadge, (0, _extends2.default)({
+    ref: ref,
+    intl: intl,
+    onMouseEnter: function onMouseEnter() {
+      return setEntered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setEntered(false);
+    },
+    status: entered ? 'entered' : status,
+    onClick: onClick,
+    mediaSingleElement: mediaSingleElement
+  }, rest));
+});
 var Media = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Media, _PureComponent);
   var _super = _createSuper(Media);
@@ -212,6 +292,7 @@ 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;
@@ -236,6 +317,14 @@ 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) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !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;
+      };
       return (0, _react2.jsx)(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
@@ -247,13 +336,25 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
+      }, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
+        commentBadgeRightOffset: commentBadgeOffset(),
+        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)(_MediaCard.MediaCard, (0, _extends2.default)({
+      }) : (0, _react2.jsx)(CommentBadgeWrapper, {
+        marks: annotationMarks,
+        mediaSingleElement: mediaSingleElement,
+        width: width,
+        height: height,
+        isDrafting: isDrafting
+      })), (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,
@@ -314,14 +415,14 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
-  var _useState5 = (0, _react.useState)(),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    position = _useState6[0],
-    setPosition = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    shouldApplyDraftAnnotation = _useState8[0],
-    setShouldApplyDraftAnnotation = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    position = _useState10[0],
+    setPosition = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    shouldApplyDraftAnnotation = _useState12[0],
+    setShouldApplyDraftAnnotation = _useState12[1];
   (0, _react.useEffect)(function () {
     var _draftPosition$from;
     if (pos === undefined) {

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

@@ -298,7 +298,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         tableNode = _this$props.tableNode,
         rendererAppearance = _this$props.rendererAppearance,
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
-        isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension;
+        isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
+        allowTableAlignment = _this$props.allowTableAlignment;
       var stickyMode = this.state.stickyMode;
       var lineLengthFixedWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
       var left;
@@ -323,10 +324,11 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
       var isCommentAppearanceAndTableAlignmentEnabled =
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      (0, _appearance.isCommentAppearance)(rendererAppearance) && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment');
+      allowTableAlignment && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment');
 
       // Logic for table alignment in renderer
-      var isTableAlignStart = ((0, _appearance.isFullWidthOrFullPageAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && (0, _platformFeatureFlags.fg)('platform.editor.table.allow-table-alignment');
+      var isTableAlignStart = ((0, _appearance.isFullWidthOrFullPageAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment && (0, _platformFeatureFlags.fg)('platform.editor.table.allow-table-alignment'); // allowTableAlignment should be used instead of fg('platform.editor.table.allow-table-alignment') after this fg cleanup
+
       var fullWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
       var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
       var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;

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

@@ -60,7 +60,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.47.0";
+var packageVersion = "109.49.0";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
@@ -289,7 +289,8 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
         isInsideOfInlineExtension: (0, _platformFeatureFlags.fg)('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
         textHighlighter: props.UNSTABLE_textHighlighter,
-        isCommentsOnMediaMediaInlineBugFixEnabled: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMediaMediaInlineBugFix
+        isCommentsOnMediaMediaInlineBugFixEnabled: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMediaMediaInlineBugFix,
+        allowTableAlignment: props.UNSTABLE_allowTableAlignment
       };
     }
   }, {

package/dist/es2019/react/index.js

@@ -177,6 +177,7 @@ export default class ReactSerializer {
     this.isInsideOfInlineExtension = init.isInsideOfInlineExtension;
     this.textHighlighter = init.textHighlighter;
     this.isCommentsOnMediaMediaInlineBugFixEnabled = init.isCommentsOnMediaMediaInlineBugFixEnabled;
+    this.allowTableAlignment = init.allowTableAlignment;
   }
   resetState() {
     this.headingIds = [];
@@ -325,7 +326,8 @@ export default class ReactSerializer {
       tableNode: node,
       stickyHeaders,
       isInsideOfBlockNode,
-      isInsideMultiBodiedExtension
+      isInsideMultiBodiedExtension,
+      allowTableAlignment: this.allowTableAlignment
     };
   }
   getDateProps(node, parentInfo, path = []) {

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

@@ -20,11 +20,11 @@ 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 } from '@atlaskit/editor-common/media-single';
-import { injectIntl } from 'react-intl-next';
+import { CommentBadge as CommentBadgeComponent, ExternalImageBadge } from '@atlaskit/editor-common/media-single';
+import { useIntl, injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 export const linkStyle = css`
 	position: absolute;
@@ -148,7 +148,7 @@ const CommentBadgeWrapper = ({
         const parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
           const isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
-          const elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!getBooleanFF('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          const elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!fg('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
@@ -186,9 +186,77 @@ const CommentBadgeWrapper = ({
     onClick: onClick
   }, 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(({
+  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();
+  const activeParentIds = useInlineCommentsFilter({
+    annotationIds: (_marks$map2 = marks === null || marks === void 0 ? void 0 : marks.map(mark => mark.attrs.id)) !== null && _marks$map2 !== void 0 ? _marks$map2 : [''],
+    filter: {
+      state: AnnotationMarkStates.ACTIVE
+    }
+  });
+  useEffect(() => {
+    const observer = new MutationObserver(mutationList => {
+      mutationList.forEach(mutation => {
+        const parentNode = mutation.target.parentNode;
+        if (mutation.attributeName === 'data-has-focus') {
+          const isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
+          const elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!fg('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          elementHasFocus ? setStatus('active') : setStatus('default');
+        }
+      });
+    });
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['data-has-focus']
+      });
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [mediaSingleElement, setStatus]);
+  if (!isDrafting && !activeParentIds.length) {
+    return null;
+  }
+  const onClick = e => {
+    e.preventDefault();
+    if (updateSubscriber) {
+      updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeParentIds,
+        eventTarget: e.target,
+        // use mediaSingle here to align with annotation viewed event dispatched in editor
+        eventTargetType: 'mediaSingle',
+        viewMethod: VIEW_METHOD.BADGE
+      });
+    }
+  };
+  return jsx(CommentBadgeComponent, _extends({
+    ref: ref,
+    intl: intl,
+    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
@@ -214,6 +282,14 @@ 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) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !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;
+      };
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: this.handleMediaLinkClickFn
@@ -227,13 +303,25 @@ class Media extends PureComponent {
             border: !!borderMark
           }
         }
-      }, showCommentBadge && jsx(CommentBadgeWrapper, {
+      }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
+        commentBadgeRightOffset: commentBadgeOffset(),
+        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, {
         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

@@ -242,7 +242,8 @@ export class TableContainer extends React.Component {
       tableNode,
       rendererAppearance,
       isInsideOfBlockNode,
-      isinsideMultiBodiedExtension
+      isinsideMultiBodiedExtension,
+      allowTableAlignment
     } = this.props;
     const {
       stickyMode
@@ -270,10 +271,11 @@ export class TableContainer extends React.Component {
     const tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
     const isCommentAppearanceAndTableAlignmentEnabled =
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-    isCommentAppearance(rendererAppearance) && fg('platform_editor_table_support_in_comment');
+    allowTableAlignment && fg('platform_editor_table_support_in_comment');
 
     // Logic for table alignment in renderer
-    const isTableAlignStart = (isFullWidthOrFullPageAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && fg('platform.editor.table.allow-table-alignment');
+    const isTableAlignStart = (isFullWidthOrFullPageAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment && fg('platform.editor.table.allow-table-alignment'); // allowTableAlignment should be used instead of fg('platform.editor.table.allow-table-alignment') after this fg cleanup
+
     const fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
     const commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
     let lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;

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

@@ -42,7 +42,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.47.0";
+const packageVersion = "109.49.0";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {
@@ -269,7 +269,8 @@ export class Renderer extends PureComponent {
       allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
       isInsideOfInlineExtension: fg('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
       textHighlighter: props.UNSTABLE_textHighlighter,
-      isCommentsOnMediaMediaInlineBugFixEnabled: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMediaMediaInlineBugFix
+      isCommentsOnMediaMediaInlineBugFixEnabled: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMediaMediaInlineBugFix,
+      allowTableAlignment: props.UNSTABLE_allowTableAlignment
     };
   }
   render() {

package/dist/esm/react/index.js

@@ -184,6 +184,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.isInsideOfInlineExtension = init.isInsideOfInlineExtension;
     this.textHighlighter = init.textHighlighter;
     this.isCommentsOnMediaMediaInlineBugFixEnabled = init.isCommentsOnMediaMediaInlineBugFixEnabled;
+    this.allowTableAlignment = init.allowTableAlignment;
   }
   _createClass(ReactSerializer, [{
     key: "resetState",
@@ -356,7 +357,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         tableNode: node,
         stickyHeaders: stickyHeaders,
         isInsideOfBlockNode: isInsideOfBlockNode,
-        isInsideMultiBodiedExtension: isInsideMultiBodiedExtension
+        isInsideMultiBodiedExtension: isInsideMultiBodiedExtension,
+        allowTableAlignment: this.allowTableAlignment
       });
     }
   }, {

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

@@ -9,7 +9,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["marks", "mediaSingleElement", "isDrafting"];
+var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
+  _excluded2 = ["marks", "mediaSingleElement", "isDrafting"];
 var _templateObject, _templateObject2;
 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; }
@@ -35,11 +36,11 @@ 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 } from '@atlaskit/editor-common/media-single';
-import { injectIntl } from 'react-intl-next';
+import { CommentBadge as CommentBadgeComponent, ExternalImageBadge } from '@atlaskit/editor-common/media-single';
+import { useIntl, injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 export var linkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: absolute;\n\tbackground: transparent;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tcursor: pointer;\n\twidth: 100% !important;\n\theight: 100% !important;\n"])));
 
@@ -154,7 +155,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
         var parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
           var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
-          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!getBooleanFF('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!fg('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
@@ -196,6 +197,85 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     onClick: onClick
   }, 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) {
+  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],
+    setStatus = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    entered = _useState8[0],
+    setEntered = _useState8[1];
+  var updateSubscriber = useInlineCommentSubscriberContext();
+  var activeParentIds = useInlineCommentsFilter({
+    annotationIds: (_marks$map2 = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
+      return mark.attrs.id;
+    })) !== null && _marks$map2 !== void 0 ? _marks$map2 : [''],
+    filter: {
+      state: AnnotationMarkStates.ACTIVE
+    }
+  });
+  useEffect(function () {
+    var observer = new MutationObserver(function (mutationList) {
+      mutationList.forEach(function (mutation) {
+        var parentNode = mutation.target.parentNode;
+        if (mutation.attributeName === 'data-has-focus') {
+          var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
+          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!fg('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          elementHasFocus ? setStatus('active') : setStatus('default');
+        }
+      });
+    });
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['data-has-focus']
+      });
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [mediaSingleElement, setStatus]);
+  if (!isDrafting && !activeParentIds.length) {
+    return null;
+  }
+  var onClick = function onClick(e) {
+    e.preventDefault();
+    if (updateSubscriber) {
+      updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeParentIds,
+        eventTarget: e.target,
+        // use mediaSingle here to align with annotation viewed event dispatched in editor
+        eventTargetType: 'mediaSingle',
+        viewMethod: VIEW_METHOD.BADGE
+      });
+    }
+  };
+  return jsx(CommentBadgeComponent, _extends({
+    ref: ref,
+    intl: intl,
+    onMouseEnter: function onMouseEnter() {
+      return setEntered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setEntered(false);
+    },
+    status: entered ? 'entered' : status,
+    onClick: onClick,
+    mediaSingleElement: mediaSingleElement
+  }, rest));
+});
 var Media = /*#__PURE__*/function (_PureComponent) {
   _inherits(Media, _PureComponent);
   var _super = _createSuper(Media);
@@ -203,6 +283,7 @@ 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;
@@ -227,6 +308,14 @@ 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) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !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;
+      };
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
@@ -238,13 +327,25 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: _defineProperty({}, MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, showCommentBadge && jsx(CommentBadgeWrapper, {
+      }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
+        commentBadgeRightOffset: commentBadgeOffset(),
+        mediaElement: mediaSingleElement,
+        mediaWidth: width,
+        mediaHeight: height
+      }), showCommentBadge && (insertMediaPluginPhaseOneFlag ? jsx(CommentBadgeWrapperWithRef, {
+        ref: _this.commentBadgeRef,
         marks: annotationMarks,
         mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting
-      }), jsx(MediaCard, _extends({
+      }) : jsx(CommentBadgeWrapper, {
+        marks: annotationMarks,
+        mediaSingleElement: mediaSingleElement,
+        width: width,
+        height: height,
+        isDrafting: isDrafting
+      })), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,
@@ -305,14 +406,14 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    position = _useState6[0],
-    setPosition = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    shouldApplyDraftAnnotation = _useState8[0],
-    setShouldApplyDraftAnnotation = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    position = _useState10[0],
+    setPosition = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    shouldApplyDraftAnnotation = _useState12[0],
+    setShouldApplyDraftAnnotation = _useState12[1];
   useEffect(function () {
     var _draftPosition$from;
     if (pos === undefined) {

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

@@ -291,7 +291,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         tableNode = _this$props.tableNode,
         rendererAppearance = _this$props.rendererAppearance,
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
-        isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension;
+        isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
+        allowTableAlignment = _this$props.allowTableAlignment;
       var stickyMode = this.state.stickyMode;
       var lineLengthFixedWidth = akEditorDefaultLayoutWidth;
       var left;
@@ -316,10 +317,11 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
       var isCommentAppearanceAndTableAlignmentEnabled =
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      isCommentAppearance(rendererAppearance) && fg('platform_editor_table_support_in_comment');
+      allowTableAlignment && fg('platform_editor_table_support_in_comment');
 
       // Logic for table alignment in renderer
-      var isTableAlignStart = (isFullWidthOrFullPageAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && fg('platform.editor.table.allow-table-alignment');
+      var isTableAlignStart = (isFullWidthOrFullPageAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment && fg('platform.editor.table.allow-table-alignment'); // allowTableAlignment should be used instead of fg('platform.editor.table.allow-table-alignment') after this fg cleanup
+
       var fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
       var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
       var lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;

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

@@ -52,7 +52,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.47.0";
+var packageVersion = "109.49.0";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
@@ -281,7 +281,8 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
         isInsideOfInlineExtension: fg('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
         textHighlighter: props.UNSTABLE_textHighlighter,
-        isCommentsOnMediaMediaInlineBugFixEnabled: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMediaMediaInlineBugFix
+        isCommentsOnMediaMediaInlineBugFixEnabled: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMediaMediaInlineBugFix,
+        allowTableAlignment: props.UNSTABLE_allowTableAlignment
       };
     }
   }, {

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

@@ -42,6 +42,7 @@ export interface ReactSerializerInit {
     isInsideOfInlineExtension?: boolean;
     textHighlighter?: TextHighlighter;
     isCommentsOnMediaMediaInlineBugFixEnabled?: boolean;
+    allowTableAlignment?: boolean;
 }
 interface ParentInfo {
     parentIsIncompleteTask: boolean;
@@ -90,6 +91,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private isInsideOfInlineExtension?;
     private isCommentsOnMediaMediaInlineBugFixEnabled?;
     private textHighlighter?;
+    private allowTableAlignment?;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;

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

@@ -14,6 +14,7 @@ export type TableProps = SharedTableProps & {
     rendererAppearance?: RendererAppearance;
     allowColumnSorting?: boolean;
     stickyHeaders?: StickyHeaderConfig;
+    allowTableAlignment?: boolean;
 };
 interface TableOrderStatus {
     columnIndex: number;
@@ -67,6 +68,7 @@ declare const _default: {
         rendererAppearance?: RendererAppearance;
         allowColumnSorting?: boolean | undefined;
         stickyHeaders?: StickyHeaderConfig | undefined;
+        allowTableAlignment?: boolean | undefined;
     } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps> | Readonly<import("@atlaskit/editor-common/utils").Diff<{
         renderWidth?: number | undefined;
     } & Omit<SharedTableProps & {
@@ -75,6 +77,7 @@ declare const _default: {
         rendererAppearance?: RendererAppearance;
         allowColumnSorting?: boolean | undefined;
         stickyHeaders?: StickyHeaderConfig | undefined;
+        allowTableAlignment?: boolean | undefined;
     } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>): {
         render(): JSX.Element;
         context: any;
@@ -86,6 +89,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("@atlaskit/editor-common/utils").Diff<{
@@ -96,6 +100,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>> & Readonly<{
             children?: React.ReactNode;
         }>;
@@ -112,6 +117,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
@@ -123,6 +129,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -132,6 +139,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
@@ -143,6 +151,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -152,6 +161,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -161,6 +171,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -170,6 +181,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: import("@atlaskit/editor-common/utils").Diff<{
@@ -180,6 +192,7 @@ declare const _default: {
         rendererAppearance?: RendererAppearance;
         allowColumnSorting?: boolean | undefined;
         stickyHeaders?: StickyHeaderConfig | undefined;
+        allowTableAlignment?: boolean | undefined;
     } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>, context: any): {
         render(): JSX.Element;
         context: any;
@@ -191,6 +204,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("@atlaskit/editor-common/utils").Diff<{
@@ -201,6 +215,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>> & Readonly<{
             children?: React.ReactNode;
         }>;
@@ -217,6 +232,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
@@ -228,6 +244,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -237,6 +254,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
@@ -248,6 +266,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -257,6 +276,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -266,6 +286,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -275,6 +296,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     contextType?: React.Context<any> | undefined;

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

@@ -116,4 +116,5 @@ export interface RendererProps {
         [featureFlag: string]: boolean;
     } | Partial<RawObjectFeatureFlags>;
     UNSTABLE_textHighlighter?: TextHighlighter;
+    UNSTABLE_allowTableAlignment?: boolean;
 }

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

@@ -42,6 +42,7 @@ export interface ReactSerializerInit {
     isInsideOfInlineExtension?: boolean;
     textHighlighter?: TextHighlighter;
     isCommentsOnMediaMediaInlineBugFixEnabled?: boolean;
+    allowTableAlignment?: boolean;
 }
 interface ParentInfo {
     parentIsIncompleteTask: boolean;
@@ -90,6 +91,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private isInsideOfInlineExtension?;
     private isCommentsOnMediaMediaInlineBugFixEnabled?;
     private textHighlighter?;
+    private allowTableAlignment?;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;

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

@@ -14,6 +14,7 @@ export type TableProps = SharedTableProps & {
     rendererAppearance?: RendererAppearance;
     allowColumnSorting?: boolean;
     stickyHeaders?: StickyHeaderConfig;
+    allowTableAlignment?: boolean;
 };
 interface TableOrderStatus {
     columnIndex: number;
@@ -67,6 +68,7 @@ declare const _default: {
         rendererAppearance?: RendererAppearance;
         allowColumnSorting?: boolean | undefined;
         stickyHeaders?: StickyHeaderConfig | undefined;
+        allowTableAlignment?: boolean | undefined;
     } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps> | Readonly<import("@atlaskit/editor-common/utils").Diff<{
         renderWidth?: number | undefined;
     } & Omit<SharedTableProps & {
@@ -75,6 +77,7 @@ declare const _default: {
         rendererAppearance?: RendererAppearance;
         allowColumnSorting?: boolean | undefined;
         stickyHeaders?: StickyHeaderConfig | undefined;
+        allowTableAlignment?: boolean | undefined;
     } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>): {
         render(): JSX.Element;
         context: any;
@@ -86,6 +89,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("@atlaskit/editor-common/utils").Diff<{
@@ -96,6 +100,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>> & Readonly<{
             children?: React.ReactNode;
         }>;
@@ -112,6 +117,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
@@ -123,6 +129,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -132,6 +139,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
@@ -143,6 +151,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -152,6 +161,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -161,6 +171,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -170,6 +181,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: import("@atlaskit/editor-common/utils").Diff<{
@@ -180,6 +192,7 @@ declare const _default: {
         rendererAppearance?: RendererAppearance;
         allowColumnSorting?: boolean | undefined;
         stickyHeaders?: StickyHeaderConfig | undefined;
+        allowTableAlignment?: boolean | undefined;
     } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>, context: any): {
         render(): JSX.Element;
         context: any;
@@ -191,6 +204,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("@atlaskit/editor-common/utils").Diff<{
@@ -201,6 +215,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>> & Readonly<{
             children?: React.ReactNode;
         }>;
@@ -217,6 +232,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
@@ -228,6 +244,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -237,6 +254,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
@@ -248,6 +266,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -257,6 +276,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -266,6 +286,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@atlaskit/editor-common/utils").Diff<{
             renderWidth?: number | undefined;
@@ -275,6 +296,7 @@ declare const _default: {
             rendererAppearance?: RendererAppearance;
             allowColumnSorting?: boolean | undefined;
             stickyHeaders?: StickyHeaderConfig | undefined;
+            allowTableAlignment?: boolean | undefined;
         } & WithSmartCardStorageProps, "renderWidth">, WithSmartCardStorageProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     contextType?: React.Context<any> | undefined;

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

@@ -116,4 +116,5 @@ export interface RendererProps {
         [featureFlag: string]: boolean;
     } | Partial<RawObjectFeatureFlags>;
     UNSTABLE_textHighlighter?: TextHighlighter;
+    UNSTABLE_allowTableAlignment?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "109.47.0",
+	"version": "109.49.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.0.0",
 		"@atlaskit/code": "^15.5.0",
-		"@atlaskit/editor-common": "^87.11.0",
+		"@atlaskit/editor-common": "^87.12.0",
 		"@atlaskit/editor-json-transformer": "^8.18.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
@@ -42,8 +42,8 @@
 		"@atlaskit/link-datasource": "^2.11.0",
 		"@atlaskit/media-card": "^78.0.0",
 		"@atlaskit/media-client": "^27.3.0",
-		"@atlaskit/media-client-react": "^2.0.0",
-		"@atlaskit/media-common": "^11.3.0",
+		"@atlaskit/media-client-react": "^2.1.0",
+		"@atlaskit/media-common": "^11.4.0",
 		"@atlaskit/media-filmstrip": "^47.2.0",
 		"@atlaskit/media-ui": "^25.11.0",
 		"@atlaskit/media-viewer": "^48.7.0",
@@ -64,7 +64,7 @@
 	},
 	"peerDependencies": {
 		"@atlaskit/link-provider": "^1.14.0",
-		"@atlaskit/media-core": "^34.2.0",
+		"@atlaskit/media-core": "^34.3.0",
 		"react": "^16.8.0",
 		"react-dom": "^16.8.0"
 	},
@@ -77,7 +77,7 @@
 		"@atlaskit/link-provider": "^1.14.0",
 		"@atlaskit/link-test-helpers": "^7.4.0",
 		"@atlaskit/linking-common": "^5.11.0",
-		"@atlaskit/media-core": "^34.2.0",
+		"@atlaskit/media-core": "^34.3.0",
 		"@atlaskit/media-integration-test-helpers": "^3.1.0",
 		"@atlaskit/media-test-helpers": "^34.0.0",
 		"@atlaskit/mention": "^23.2.0",
@@ -152,6 +152,9 @@
 		"platform.comments-on-media.bug.incorrect-badge-highlight": {
 			"type": "boolean"
 		},
+		"platform_editor_insert_media_plugin_phase_one": {
+			"type": "boolean"
+		},
 		"platform-fix-table-ssr-resizing": {
 			"type": "boolean"
 		},