@atlaskit/renderer 109.42.4 → 109.42.6

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/renderer
 
+## 109.42.6
+
+### Patch Changes
+
+- [#121678](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121678)
+  [`9ca02c9c7c5ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9ca02c9c7c5ce) -
+  created new entrypoint for startMeasure,stopMeasure,clearMeasure, deprecated those functions in
+  editor-common/utils
+- Updated dependencies
+
+## 109.42.5
+
+### Patch Changes
+
+- [#121315](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121315)
+  [`f550b1a0c6e85`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f550b1a0c6e85) -
+  [ux] ED-24237 Fix comment appearances in renderer to match editor
+- [#121452](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121452)
+  [`9696ad7f5108a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9696ad7f5108a) -
+  ensure nested tables don't have left alignment styles
+- [#120992](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120992)
+  [`a61cfb5567823`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a61cfb5567823) -
+  ED-23357 Update annotation node name calculations to avoid crashes on invalid ranges
+- [#121315](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/121315)
+  [`f550b1a0c6e85`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f550b1a0c6e85) -
+  ED-24236 fix missing underline for draft annotations in renderer (when annotations on inline nodes
+  fg is on)
+- Updated dependencies
+
 ## 109.42.4
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -177,6 +177,37 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
       }
       return this._privateValidatePositionsForAnnotation(pos.from, pos.to);
     }
+  }, {
+    key: "isRangeAnnotatable",
+    value: function isRangeAnnotatable(range) {
+      try {
+        var _startContainer$paren, _endContainer$parentE;
+        if (!range) {
+          return false;
+        }
+        var startContainer = range.startContainer,
+          endContainer = range.endContainer;
+        if ((_startContainer$paren = startContainer.parentElement) !== null && _startContainer$paren !== void 0 && _startContainer$paren.closest('.ak-renderer-extension') || (_endContainer$parentE = endContainer.parentElement) !== null && _endContainer$parentE !== void 0 && _endContainer$parentE.closest('.ak-renderer-extension')) {
+          return false;
+        }
+        return this.isValidAnnotationRange(range);
+      } catch (_unused) {
+        // isValidAnnotationRange can fail when called inside nested renderers.
+        // while isRendererWithinRange guards against this to some degree -- the classnames
+        // are controlled by product -- and we don't have platform guarantees on them.
+        //
+        // Currently there is a mix of logic across the platform and confluence on determining
+        // positions that are annotatable. This is a defensive check to ensure we don't throw an error
+        // in cases where the range is not valid.
+        return false;
+      }
+    }
+
+    /**
+     * This is replaced by `isRangeAnnotatable`.
+     *
+     * @deprecated
+     **/
   }, {
     key: "isRendererWithinRange",
     value: function isRendererWithinRange(range) {

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

@@ -321,7 +321,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       var isTableAlignStart = (0, _appearance.isFullWidthOrFullPageAppearance)(rendererAppearance) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && (0, _platformFeatureFlags.fg)('platform.editor.table.allow-table-alignment');
       var fullWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
       var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : lineLengthFixedWidth;
-      var shouldCalculateLeftForAlignment = isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidth <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance));
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidth <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance));
       if (shouldCalculateLeftForAlignment) {
         left = (tableWidth - lineLength) / 2;
       }

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

@@ -20,6 +20,7 @@ var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 var _traverse = require("@atlaskit/adf-utils/traverse");
 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
@@ -56,7 +57,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.42.4";
+var packageVersion = "109.42.6";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
@@ -146,7 +147,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
     _this.serializer = new _.ReactSerializer(_this.deriveSerializerProps(props));
     _this.editorRef = props.innerRef || /*#__PURE__*/_react.default.createRef();
     _this.id = (0, _v.default)();
-    (0, _utils.startMeasure)("Renderer Render Time: ".concat(_this.id));
+    (0, _performanceMeasures.startMeasure)("Renderer Render Time: ".concat(_this.id));
     var _featureFlags = _this.featureFlags(_this.props.featureFlags).featureFlags;
     if (_featureFlags !== null && _featureFlags !== void 0 && _featureFlags.rendererTtiTracking) {
       (0, _utils.measureTTI)(function (tti, ttiFromInvocation, canceled) {
@@ -199,7 +200,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         eventType: _analytics.EVENT_TYPE.UI
       });
       this.rafID = requestAnimationFrame(function () {
-        (0, _utils.stopMeasure)("Renderer Render Time: ".concat(_this2.id), function (duration) {
+        (0, _performanceMeasures.stopMeasure)("Renderer Render Time: ".concat(_this2.id), function (duration) {
           var _analyticsEventSeveri, _analyticsEventSeveri2, _this2$props;
           var analyticsEventSeverityTracking = _this2.props.analyticsEventSeverityTracking;
           var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && (0, _utils.shouldForceTracking)();
@@ -283,7 +284,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         nodeComponents: props.nodeComponents,
         // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
         allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
-        isInsideOfInlineExtension: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
+        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
       };
@@ -540,7 +541,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   , {
     className: "ak-renderer-wrapper is-".concat(appearance),
     "data-appearance": appearance,
-    shouldCheckExistingValue: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') && isInsideOfInlineExtension
+    shouldCheckExistingValue: (0, _platformFeatureFlags.fg)('platform.editor.inline_extension.extended_lcqdn') && isInsideOfInlineExtension
   }, (0, _react2.jsx)(_ui.BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
   }, (0, _react2.jsx)(_EditorMediaClientProvider.EditorMediaClientProvider, {

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

@@ -112,6 +112,27 @@ function getAnnotationStyles(_ref6) {
   if (!(0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes')) {
     return '';
   }
+  if ((0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles')) {
+    return (0, _react.css)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& [data-annotation-draft-mark][data-annotation-inline-node]': {
+        borderBottom: '2px solid transparent',
+        cursor: 'pointer',
+        padding: '1px 0 2px',
+        background: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
+        borderBottomColor: "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")"),
+        boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")")
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& [data-annotation-draft-mark][data-annotation-inline-node][data-inline-card]': {
+        padding: '5px 0 3px 0'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& [data-annotation-draft-mark][data-annotation-inline-node].date-lozenger-container': {
+        paddingTop: "var(--ds-space-025, 2px)"
+      }
+    });
+  }
   return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {

package/dist/cjs/ui/annotations/selection/mounter.js

@@ -39,16 +39,26 @@ var SelectionInlineCommentMounter = exports.SelectionInlineCommentMounter = /*#_
   var providers = (0, _react.useContext)(_context.ProvidersContext);
   var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var inlineNodeTypes = (0, _react.useMemo)(function () {
-    if (!(0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes')) {
-      return undefined;
-    }
-    if (actions.isValidAnnotationRange(range)) {
+    if ((0, _platformFeatureFlags.fg)('annotations_defensive_node_name_calculations')) {
+      if (!actions.isRangeAnnotatable(range)) {
+        return undefined;
+      }
       return (0, _getRendererRangeInlineNodeNames.getRendererRangeInlineNodeNames)({
         pos: documentPosition,
         actions: actions
       });
     } else {
-      return undefined;
+      if (!(0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes')) {
+        return undefined;
+      }
+      if (actions.isValidAnnotationRange(range)) {
+        return (0, _getRendererRangeInlineNodeNames.getRendererRangeInlineNodeNames)({
+          pos: documentPosition,
+          actions: actions
+        });
+      } else {
+        return undefined;
+      }
     }
   }, [documentPosition, actions, range]);
   var onCreateCallback = (0, _react.useCallback)(function (annotationId) {

package/dist/es2019/actions/index.js

@@ -155,6 +155,37 @@ export default class RendererActions {
     }
     return this._privateValidatePositionsForAnnotation(pos.from, pos.to);
   }
+  isRangeAnnotatable(range) {
+    try {
+      var _startContainer$paren, _endContainer$parentE;
+      if (!range) {
+        return false;
+      }
+      const {
+        startContainer,
+        endContainer
+      } = range;
+      if ((_startContainer$paren = startContainer.parentElement) !== null && _startContainer$paren !== void 0 && _startContainer$paren.closest('.ak-renderer-extension') || (_endContainer$parentE = endContainer.parentElement) !== null && _endContainer$parentE !== void 0 && _endContainer$parentE.closest('.ak-renderer-extension')) {
+        return false;
+      }
+      return this.isValidAnnotationRange(range);
+    } catch {
+      // isValidAnnotationRange can fail when called inside nested renderers.
+      // while isRendererWithinRange guards against this to some degree -- the classnames
+      // are controlled by product -- and we don't have platform guarantees on them.
+      //
+      // Currently there is a mix of logic across the platform and confluence on determining
+      // positions that are annotatable. This is a defensive check to ensure we don't throw an error
+      // in cases where the range is not valid.
+      return false;
+    }
+  }
+
+  /**
+   * This is replaced by `isRangeAnnotatable`.
+   *
+   * @deprecated
+   **/
   isRendererWithinRange(range) {
     const {
       startContainer,

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

@@ -268,7 +268,7 @@ export class TableContainer extends React.Component {
     const isTableAlignStart = isFullWidthOrFullPageAppearance(rendererAppearance) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && fg('platform.editor.table.allow-table-alignment');
     const fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
     const lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : lineLengthFixedWidth;
-    const shouldCalculateLeftForAlignment = isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidth <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance));
+    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidth <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance));
     if (shouldCalculateLeftForAlignment) {
       left = (tableWidth - lineLength) / 2;
     }

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

@@ -8,8 +8,9 @@ import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
-import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
+import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
@@ -38,7 +39,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.42.4";
+const packageVersion = "109.42.6";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {
@@ -263,7 +264,7 @@ export class Renderer extends PureComponent {
       nodeComponents: props.nodeComponents,
       // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
       allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
-      isInsideOfInlineExtension: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
+      isInsideOfInlineExtension: fg('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
       textHighlighter: props.UNSTABLE_textHighlighter,
       isCommentsOnMediaMediaInlineBugFixEnabled: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMediaMediaInlineBugFix
     };
@@ -513,7 +514,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   , {
     className: `ak-renderer-wrapper is-${appearance}`,
     "data-appearance": appearance,
-    shouldCheckExistingValue: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && isInsideOfInlineExtension
+    shouldCheckExistingValue: fg('platform.editor.inline_extension.extended_lcqdn') && isInsideOfInlineExtension
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx(EditorMediaClientProvider, {

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

@@ -1,7 +1,6 @@
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -371,6 +370,27 @@ function getAnnotationStyles({
   if (!fg('editor_inline_comments_on_inline_nodes')) {
     return '';
   }
+  if (fg('annotations_align_editor_and_renderer_styles')) {
+    return css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& [data-annotation-draft-mark][data-annotation-inline-node]': {
+        borderBottom: '2px solid transparent',
+        cursor: 'pointer',
+        padding: '1px 0 2px',
+        background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+        borderBottomColor: `var(--ds-border-accent-yellow, ${Y300})`,
+        boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& [data-annotation-draft-mark][data-annotation-inline-node][data-inline-card]': {
+        padding: '5px 0 3px 0'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& [data-annotation-draft-mark][data-annotation-inline-node].date-lozenger-container': {
+        paddingTop: "var(--ds-space-025, 2px)"
+      }
+    });
+  }
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {

package/dist/es2019/ui/annotations/selection/mounter.js

@@ -27,16 +27,26 @@ export const SelectionInlineCommentMounter = /*#__PURE__*/React.memo(props => {
   const providers = useContext(ProvidersContext);
   const isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   const inlineNodeTypes = useMemo(() => {
-    if (!fg('editor_inline_comments_on_inline_nodes')) {
-      return undefined;
-    }
-    if (actions.isValidAnnotationRange(range)) {
+    if (fg('annotations_defensive_node_name_calculations')) {
+      if (!actions.isRangeAnnotatable(range)) {
+        return undefined;
+      }
       return getRendererRangeInlineNodeNames({
         pos: documentPosition,
         actions
       });
     } else {
-      return undefined;
+      if (!fg('editor_inline_comments_on_inline_nodes')) {
+        return undefined;
+      }
+      if (actions.isValidAnnotationRange(range)) {
+        return getRendererRangeInlineNodeNames({
+          pos: documentPosition,
+          actions
+        });
+      } else {
+        return undefined;
+      }
     }
   }, [documentPosition, actions, range]);
   const onCreateCallback = useCallback(annotationId => {

package/dist/esm/actions/index.js

@@ -170,6 +170,37 @@ var RendererActions = /*#__PURE__*/function () {
       }
       return this._privateValidatePositionsForAnnotation(pos.from, pos.to);
     }
+  }, {
+    key: "isRangeAnnotatable",
+    value: function isRangeAnnotatable(range) {
+      try {
+        var _startContainer$paren, _endContainer$parentE;
+        if (!range) {
+          return false;
+        }
+        var startContainer = range.startContainer,
+          endContainer = range.endContainer;
+        if ((_startContainer$paren = startContainer.parentElement) !== null && _startContainer$paren !== void 0 && _startContainer$paren.closest('.ak-renderer-extension') || (_endContainer$parentE = endContainer.parentElement) !== null && _endContainer$parentE !== void 0 && _endContainer$parentE.closest('.ak-renderer-extension')) {
+          return false;
+        }
+        return this.isValidAnnotationRange(range);
+      } catch (_unused) {
+        // isValidAnnotationRange can fail when called inside nested renderers.
+        // while isRendererWithinRange guards against this to some degree -- the classnames
+        // are controlled by product -- and we don't have platform guarantees on them.
+        //
+        // Currently there is a mix of logic across the platform and confluence on determining
+        // positions that are annotatable. This is a defensive check to ensure we don't throw an error
+        // in cases where the range is not valid.
+        return false;
+      }
+    }
+
+    /**
+     * This is replaced by `isRangeAnnotatable`.
+     *
+     * @deprecated
+     **/
   }, {
     key: "isRendererWithinRange",
     value: function isRendererWithinRange(range) {

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

@@ -314,7 +314,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var isTableAlignStart = isFullWidthOrFullPageAppearance(rendererAppearance) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && fg('platform.editor.table.allow-table-alignment');
       var fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
       var lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : lineLengthFixedWidth;
-      var shouldCalculateLeftForAlignment = isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidth <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance));
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidth <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance));
       if (shouldCalculateLeftForAlignment) {
         left = (tableWidth - lineLength) / 2;
       }

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

@@ -18,8 +18,9 @@ import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
-import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
+import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
@@ -48,7 +49,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.42.4";
+var packageVersion = "109.42.6";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
@@ -275,7 +276,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         nodeComponents: props.nodeComponents,
         // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
         allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
-        isInsideOfInlineExtension: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
+        isInsideOfInlineExtension: fg('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
         textHighlighter: props.UNSTABLE_textHighlighter,
         isCommentsOnMediaMediaInlineBugFixEnabled: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMediaMediaInlineBugFix
       };
@@ -532,7 +533,7 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   , {
     className: "ak-renderer-wrapper is-".concat(appearance),
     "data-appearance": appearance,
-    shouldCheckExistingValue: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && isInsideOfInlineExtension
+    shouldCheckExistingValue: fg('platform.editor.inline_extension.extended_lcqdn') && isInsideOfInlineExtension
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx(EditorMediaClientProvider, {

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

@@ -3,7 +3,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -104,6 +103,27 @@ function getAnnotationStyles(_ref6) {
   if (!fg('editor_inline_comments_on_inline_nodes')) {
     return '';
   }
+  if (fg('annotations_align_editor_and_renderer_styles')) {
+    return css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& [data-annotation-draft-mark][data-annotation-inline-node]': {
+        borderBottom: '2px solid transparent',
+        cursor: 'pointer',
+        padding: '1px 0 2px',
+        background: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
+        borderBottomColor: "var(--ds-border-accent-yellow, ".concat(Y300, ")"),
+        boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")")
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& [data-annotation-draft-mark][data-annotation-inline-node][data-inline-card]': {
+        padding: '5px 0 3px 0'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '& [data-annotation-draft-mark][data-annotation-inline-node].date-lozenger-container': {
+        paddingTop: "var(--ds-space-025, 2px)"
+      }
+    });
+  }
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     "& [data-mark-type='annotation'][data-mark-annotation-state='active'] [data-annotation-mark], & [data-annotation-draft-mark][data-annotation-inline-node]": {

package/dist/esm/ui/annotations/selection/mounter.js

@@ -29,16 +29,26 @@ export var SelectionInlineCommentMounter = /*#__PURE__*/React.memo(function (pro
   var providers = useContext(ProvidersContext);
   var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var inlineNodeTypes = useMemo(function () {
-    if (!fg('editor_inline_comments_on_inline_nodes')) {
-      return undefined;
-    }
-    if (actions.isValidAnnotationRange(range)) {
+    if (fg('annotations_defensive_node_name_calculations')) {
+      if (!actions.isRangeAnnotatable(range)) {
+        return undefined;
+      }
       return getRendererRangeInlineNodeNames({
         pos: documentPosition,
         actions: actions
       });
     } else {
-      return undefined;
+      if (!fg('editor_inline_comments_on_inline_nodes')) {
+        return undefined;
+      }
+      if (actions.isValidAnnotationRange(range)) {
+        return getRendererRangeInlineNodeNames({
+          pos: documentPosition,
+          actions: actions
+        });
+      } else {
+        return undefined;
+      }
     }
   }, [documentPosition, actions, range]);
   var onCreateCallback = useCallback(function (annotationId) {

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

@@ -51,6 +51,12 @@ export default class RendererActions implements RendererActionsOptions, Annotati
     };
     annotate(range: Range, annotationId: string, annotationType: 'inlineComment'): AnnotationActionResult;
     isValidAnnotationRange(range: Range | null): boolean;
+    isRangeAnnotatable(range: Range | null): boolean;
+    /**
+     * This is replaced by `isRangeAnnotatable`.
+     *
+     * @deprecated
+     **/
     isRendererWithinRange(range: Range): boolean;
     isValidAnnotationPosition(pos: Position): boolean;
     /**

package/dist/types/ui/Renderer/style.d.ts

@@ -1,4 +1,3 @@
-import type { Theme } from '@emotion/react';
 import type { RendererAppearance } from './types';
 export declare const FullPagePadding = 32;
 export type RendererWrapperProps = {
@@ -14,4 +13,4 @@ export declare const headingSizes: {
         [key: string]: number;
     };
 };
-export declare const rendererStyles: (wrapperProps: RendererWrapperProps) => (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const rendererStyles: (wrapperProps: RendererWrapperProps) => (theme: any) => import("@emotion/react").SerializedStyles;

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

@@ -51,6 +51,12 @@ export default class RendererActions implements RendererActionsOptions, Annotati
     };
     annotate(range: Range, annotationId: string, annotationType: 'inlineComment'): AnnotationActionResult;
     isValidAnnotationRange(range: Range | null): boolean;
+    isRangeAnnotatable(range: Range | null): boolean;
+    /**
+     * This is replaced by `isRangeAnnotatable`.
+     *
+     * @deprecated
+     **/
     isRendererWithinRange(range: Range): boolean;
     isValidAnnotationPosition(pos: Position): boolean;
     /**

package/dist/types-ts4.5/ui/Renderer/style.d.ts

@@ -1,4 +1,3 @@
-import type { Theme } from '@emotion/react';
 import type { RendererAppearance } from './types';
 export declare const FullPagePadding = 32;
 export type RendererWrapperProps = {
@@ -14,4 +13,4 @@ export declare const headingSizes: {
         [key: string]: number;
     };
 };
-export declare const rendererStyles: (wrapperProps: RendererWrapperProps) => (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const rendererStyles: (wrapperProps: RendererWrapperProps) => (theme: any) => import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "109.42.4",
+	"version": "109.42.6",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,9 +29,9 @@
 		"@atlaskit/analytics-listeners": "^8.10.0",
 		"@atlaskit/analytics-namespaced-context": "^6.10.0",
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/button": "^18.4.0",
+		"@atlaskit/button": "^19.0.0",
 		"@atlaskit/code": "^15.4.0",
-		"@atlaskit/editor-common": "^86.2.0",
+		"@atlaskit/editor-common": "^86.3.0",
 		"@atlaskit/editor-json-transformer": "^8.15.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
@@ -52,7 +52,7 @@
 		"@atlaskit/status": "^1.4.0",
 		"@atlaskit/task-decision": "^17.10.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.55.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -79,7 +79,7 @@
 		"@atlaskit/linking-common": "^5.7.0",
 		"@atlaskit/media-core": "^34.2.0",
 		"@atlaskit/media-integration-test-helpers": "^3.0.0",
-		"@atlaskit/media-test-helpers": "^33.0.0",
+		"@atlaskit/media-test-helpers": "^34.0.0",
 		"@atlaskit/mention": "^23.2.0",
 		"@atlaskit/navigation-next": "^9.0.0",
 		"@atlaskit/util-data-test": "^17.9.0",
@@ -118,6 +118,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"annotations_defensive_node_name_calculations": {
+			"type": "boolean"
+		},
 		"platform.media-experience.media-viewer-v2_hgsii": {
 			"type": "boolean",
 			"referenceOnly": "true"
@@ -140,6 +143,9 @@
 		"platform.editor.table.allow-table-alignment": {
 			"type": "boolean"
 		},
+		"annotations_align_editor_and_renderer_styles": {
+			"type": "boolean"
+		},
 		"platform.comments-on-media.bug.incorrect-badge-highlight": {
 			"type": "boolean"
 		}