@atlaskit/renderer 109.32.3 → 109.32.5

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

@@ -14,9 +14,11 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 const embedCardWrapperStyles = css({
   width: '100%',
   height: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> div': {
     height: '100%'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.loader-wrapper': {
     height: '100%'
   },

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

@@ -20,6 +20,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow) =
     ,
     className: `${RendererCssClassName.EXTENSION} ${options.shadowClassNames} ${centerAlignClass}`,
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
     },
     "data-layout": layout

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

@@ -2,7 +2,13 @@
 import React from 'react';
 import { jsx, css } from '@emotion/react';
 import { WidthProvider, clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from '@atlaskit/editor-common/ui';
-const layoutColumnClearMarginTopStyles = css(clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle);
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+const layoutColumnClearMarginTopStyles = css(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+clearNextSiblingMarginTopStyle,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+clearNextSiblingBlockMarkMarginTopStyle);
 export default function LayoutSection(props) {
   return jsx("div", {
     "data-layout-column": true,

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

@@ -20,6 +20,8 @@ import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/m
 import { 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';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @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;
 	background: transparent;
@@ -31,6 +33,8 @@ export const linkStyle = css`
 	width: 100% !important;
 	height: 100% !important;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 export const borderStyle = (color, width) => css`
 	position: absolute;
 	width: 100% !important;
@@ -52,7 +56,9 @@ const MediaBorder = ({
   return jsx("div", {
     "data-mark-type": "border",
     "data-color": borderColor,
-    "data-size": borderWidth,
+    "data-size": borderWidth
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    ,
     css: borderStyle(paletteColorValue, borderWidth)
   }, jsx(MediaBorderGapFiller, {
     borderColor: borderColor
@@ -118,7 +124,7 @@ const MediaAnnotations = ({
 const CommentBadge = injectIntl(CommentBadgeComponent);
 const CommentBadgeWrapper = ({
   marks,
-  mediaElement,
+  mediaSingleElement,
   isDrafting = false,
   ...rest
 }) => {
@@ -135,15 +141,16 @@ const CommentBadgeWrapper = ({
   useEffect(() => {
     const observer = new MutationObserver(mutationList => {
       mutationList.forEach(mutation => {
+        const parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
-          var _mutation$target$pare;
-          const elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
+          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);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
     });
-    if (mediaElement) {
-      observer.observe(mediaElement, {
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
         attributes: true,
         subtree: true,
         attributeFilter: ['data-has-focus']
@@ -152,7 +159,7 @@ const CommentBadgeWrapper = ({
     return () => {
       observer.disconnect();
     };
-  }, [mediaElement, setStatus]);
+  }, [mediaSingleElement, setStatus]);
   if (!isDrafting && !activeParentIds.length) {
     return null;
   }
@@ -218,7 +225,7 @@ class Media extends PureComponent {
         }
       }, showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
-        mediaElement: mediaSingleElement,
+        mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting

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

@@ -1,8 +1,12 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const uiMediaSingleBaseStyles = css({
   transition: 'all 0.1s linear'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const uiMediaSingleLayoutStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',

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

@@ -41,7 +41,7 @@ const useMultiBodiedExtensionActions = ({
   return actions;
 };
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const navigationCssExtended = css`
 	${sharedMultiBodiedExtensionStyles.mbeNavigation};
 	margin-left: 0 !important;
@@ -101,6 +101,7 @@ const MultiBodiedExtension = props => {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${RendererCssClassName.EXTENSION} ${centerAlignClass} ${overflowContainerClass}`,
       style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
       },
       "data-layout": layout

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

@@ -37,9 +37,12 @@ const PanelStyled = ({
 			}
 		`;
   }
-  return jsx("div", _extends({
-    css: styles
-  }, props), props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("div", _extends({
+      css: styles
+    }, props), props.children)
+  );
 };
 PanelStyled.displayName = 'PanelStyled';
 const panelIcons = {

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

@@ -161,7 +161,7 @@ export const Colgroup = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     style: {
       width: akEditorTableNumberColumnWidth
     },

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

@@ -29,12 +29,18 @@ const fixedTableDivStaticStyles = (top, width, rendererAppearance) => {
   } else {
     stickyHeaderZIndex = akEditorStickyHeaderZIndex;
   }
+
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   return css(typeof top === 'number' && `top: ${top}px;`, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: `${width}px`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     zIndex: stickyHeaderZIndex,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     [`& .${TableSharedCssClassName.TABLE_CONTAINER}, & .${TableSharedCssClassName.TABLE_STICKY_WRAPPER} > table`]: {
       marginTop: 0,
       marginBottom: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       tr: {
         background: "var(--ds-surface, white)"
       }
@@ -42,14 +48,18 @@ const fixedTableDivStaticStyles = (top, width, rendererAppearance) => {
     borderTop: `${tableStickyPadding}px solid ${"var(--ds-surface, white)"}`,
     background: "var(--ds-surface-overlay, white)",
     boxShadow: `0 6px 4px -4px ${`var(--ds-shadow-overflow-perimeter, ${N40A})`}`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     "div[data-expanded='false'] &": {
       display: 'none'
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     [`& .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.right-shadow::after, & .${TableSharedCssClassName.TABLE_CONTAINER}.is-sticky.left-shadow::before`]: {
       top: '0px',
       height: '100%'
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     "&.fixed-table-div-custom-table-resizing[mode='stick']": {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       zIndex: stickyHeaderZIndex
     }
   });
@@ -69,7 +79,9 @@ export const FixedTableDiv = props => {
     "data-testid": "sticky-table-fixed"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: isTableResizingEnabled(rendererAppearance) ? 'fixed-table-div-custom-table-resizing' : '',
+    className: isTableResizingEnabled(rendererAppearance) ? 'fixed-table-div-custom-table-resizing' : ''
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    ,
     css: fixedTableCss
   }), props.children);
 };
@@ -94,60 +106,63 @@ export const StickyTable = ({
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   if (isTableResizingEnabled(rendererAppearance)) {
     styles = css({
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'absolute'
     });
   } else {
     styles = css({
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       left: left && left < 0 ? left : undefined,
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       top: mode === 'pin-bottom' ? top : undefined,
       position: 'relative'
     });
   }
   /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-  return jsx("div", {
-    css: styles
-  }, jsx(FixedTableDiv, {
-    top: mode === 'stick' ? top : undefined,
-    mode: rowHeight > 300 ? 'none' : mode,
-    wrapperWidth: wrapperWidth,
-    rendererAppearance: rendererAppearance
-  }, jsx("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: `${TableSharedCssClassName.TABLE_CONTAINER} is-sticky ${shadowClassNames || ''}`,
-    "data-layout": layout,
-    style: {
-      width: tableWidth
-    }
-  }, jsx("div", {
-    ref: innerRef
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: `${TableSharedCssClassName.TABLE_STICKY_WRAPPER}`,
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      overflow: 'hidden'
-    }
-  }, jsx(Table, {
-    columnWidths: columnWidths,
-    layout: layout,
-    isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth,
-    tableNode: tableNode,
-    rendererAppearance: rendererAppearance
-  },
-  /**
-   * @see https://product-fabric.atlassian.net/browse/ED-10235
-   * We pass prop 'invisible' to our table's children nodes meaning
-   * they exist inside of the 'invisible' duplicated table component that
-   * enables sticky headers.
-   */
-  recursivelyInjectProps(children, {
-    invisible: true
-  }))))));
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: styles
+    }, jsx(FixedTableDiv, {
+      top: mode === 'stick' ? top : undefined,
+      mode: rowHeight > 300 ? 'none' : mode,
+      wrapperWidth: wrapperWidth,
+      rendererAppearance: rendererAppearance
+    }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: `${TableSharedCssClassName.TABLE_CONTAINER} is-sticky ${shadowClassNames || ''}`,
+      "data-layout": layout,
+      style: {
+        width: tableWidth
+      }
+    }, jsx("div", {
+      ref: innerRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: `${TableSharedCssClassName.TABLE_STICKY_WRAPPER}`,
+      style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        overflow: 'hidden'
+      }
+    }, jsx(Table, {
+      columnWidths: columnWidths,
+      layout: layout,
+      isNumberColumnEnabled: isNumberColumnEnabled,
+      renderWidth: renderWidth,
+      tableNode: tableNode,
+      rendererAppearance: rendererAppearance
+    },
+    /**
+     * @see https://product-fabric.atlassian.net/browse/ED-10235
+     * We pass prop 'invisible' to our table's children nodes meaning
+     * they exist inside of the 'invisible' duplicated table component that
+     * enables sticky headers.
+     */
+    recursivelyInjectProps(children, {
+      invisible: true
+    }))))))
+  );
 };
 
 /**

package/dist/es2019/ui/Expand.js

@@ -17,7 +17,9 @@ import { ActiveHeaderIdConsumer } from './active-header-id-provider';
 const titleStyles = css({
   outline: 'none',
   border: 'none',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: relativeFontSizeToBase16(fontSize()),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   lineHeight: akEditorLineHeight,
   fontWeight: 'normal',
   display: 'flex',

package/dist/es2019/ui/ExtensionRenderer.js

@@ -13,6 +13,7 @@ const inlineExtensionStyle = css({
   verticalAlign: 'middle',
   // es-lint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   margin: `1px 1px ${"var(--ds-space-050, 4px)"}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& .rich-media-item': {
     maxWidth: '100%'
   }

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

@@ -37,7 +37,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.32.3";
+const packageVersion = "109.32.5";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {
@@ -521,7 +521,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     ref: innerRef,
     onClick: onClick,
     onMouseDown: onMouseDown
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     ,
     css: rendererStyles({
       appearance,

package/dist/es2019/ui/Renderer/truncated-wrapper.js

@@ -4,10 +4,12 @@ import { Component } from 'react';
 const fadeOutStyles = (maxHeight, top, backgroundColor) => css({
   position: 'relative',
   overflowY: 'hidden',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   maxHeight: `${maxHeight}px`,
   '&::after': {
     content: "''",
     position: 'absolute',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     top: `${top}px`,
     bottom: 0,
     left: 0,

package/dist/es2019/ui/annotations/draft/component.js

@@ -10,11 +10,15 @@ import { dataAttributes } from './dom';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { segmentText } from '../../../react/utils/segment-text';
 import { renderTextSegments } from '../../../react/utils/render-text-segments';
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const markStyles = () => css({
   color: 'inherit',
   backgroundColor: 'unset',
   WebkitTapHighlightColor: 'transparent'
-}, AnnotationSharedCSSByState().focus);
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+AnnotationSharedCSSByState().focus);
 export const AnnotationDraft = ({
   draftPosition,
   children

package/dist/esm/actions/index.js

@@ -273,6 +273,13 @@ var RendererActions = /*#__PURE__*/function () {
       return _objectSpread({
         step: step,
         doc: this.transformer.encode(doc),
+        inlineNodeTypes: getRendererRangeInlineNodeNames({
+          actions: this,
+          pos: {
+            from: from,
+            to: to
+          }
+        }),
         originalSelection: originalSelection,
         numMatches: numMatches,
         matchIndex: matchIndex,

package/dist/esm/react/marks/breakout.js

@@ -3,7 +3,9 @@ import { css, jsx } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var wrapperStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   margin: "".concat(blockNodesVerticalMargin, " 0"),
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
@@ -14,7 +16,9 @@ export default function Breakout(props) {
     var width = _ref.width;
     return jsx("div", {
       css: wrapperStyles,
-      "data-mode": props.mode,
+      "data-mode": props.mode
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
       style: {
         width: calcBreakoutWidth(props.mode, width)
       }

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

@@ -99,6 +99,7 @@ export default function BlockCard(props) {
           css: datasourceContainerStyle,
           "data-testid": "renderer-datasource-table",
           style: {
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
             width: isNodeNested ? '100%' : calcBreakoutWidth(layout, width)
           }
         }, jsx(DatasourceTableView, {

package/dist/esm/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -17,6 +17,7 @@ var codeBlockButtonsStyle = css({
   right: "var(--ds-space-075, 6px)",
   top: "var(--ds-space-050, 4px)",
   padding: "var(--ds-space-025, 2px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   button: {
     height: '32px',
     width: '32px',
@@ -32,9 +33,11 @@ var codeBlockButtonsStyle = css({
       height: '32px',
       width: '32px'
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '&.clicked': {
       backgroundColor: "".concat("var(--ds-background-neutral-bold-pressed, ".concat(N700, ")")),
       borderRadius: '4px',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
       color: "".concat("var(--ds-icon-inverse, ".concat(N0, ")"), " !important")
     }
   }

package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -8,7 +8,7 @@ import { fontSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var codeBlockStyleOverrides = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\ttab-size: 4;\n\tbackground-color: ", ";\n\n\t&:hover {\n\t\tbutton {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\tbutton {\n\t\topacity: 0;\n\t\ttransition: opacity 0.2s ease 0s;\n\t}\n\n\t", " {\n\t\tfont-size: ", ";\n\t\tline-height: 1.5rem;\n\t\tbackground-image: ", ";\n\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\tbackground-position:\n\t\t\t0 0,\n\t\t\t0 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t0 0,\n\t\t\t0 0;\n\t}\n"])), "var(--ds-surface-raised, ".concat(N20, ")"), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
   leftCoverWidth: "var(--ds-space-300, 24px)"
 }));

package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -7,7 +7,7 @@ import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { codeBlockSharedStyles, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
 import { RendererCssClassName } from '../../../../consts';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var lightWeightCodeBlockStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tcursor: text;\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
 export var LightWeightCodeBlockCssClassName = {
   CONTAINER: 'light-weight-code-block'
@@ -38,7 +38,9 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: classNames,
-    ref: ref,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    ,
     css: [codeBlockSharedStyles(), lightWeightCodeBlockStyles]
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER

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

@@ -15,9 +15,11 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 var embedCardWrapperStyles = css({
   width: '100%',
   height: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> div': {
     height: '100%'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.loader-wrapper': {
     height: '100%'
   },

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

@@ -22,6 +22,7 @@ export var renderExtension = function renderExtension(content, layout) {
       ,
       className: "".concat(RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
       },
       "data-layout": layout

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

@@ -2,7 +2,13 @@
 import React from 'react';
 import { jsx, css } from '@emotion/react';
 import { WidthProvider, clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from '@atlaskit/editor-common/ui';
-var layoutColumnClearMarginTopStyles = css(clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle);
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+var layoutColumnClearMarginTopStyles = css(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+clearNextSiblingMarginTopStyle,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+clearNextSiblingBlockMarkMarginTopStyle);
 export default function LayoutSection(props) {
   return jsx("div", {
     "data-layout-column": true,

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

@@ -9,7 +9,7 @@ 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", "mediaElement", "isDrafting"];
+var _excluded = ["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,7 +35,11 @@ import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/m
 import { 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';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @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"])));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 export var borderStyle = function borderStyle(color, width) {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tborder-radius: ", "px;\n\tbox-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
 };
@@ -52,7 +56,9 @@ var MediaBorder = function MediaBorder(_ref) {
   return jsx("div", {
     "data-mark-type": "border",
     "data-color": borderColor,
-    "data-size": borderWidth,
+    "data-size": borderWidth
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    ,
     css: borderStyle(paletteColorValue, borderWidth)
   }, jsx(MediaBorderGapFiller, {
     borderColor: borderColor
@@ -117,7 +123,7 @@ var CommentBadge = injectIntl(CommentBadgeComponent);
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
-    mediaElement = _ref5.mediaElement,
+    mediaSingleElement = _ref5.mediaSingleElement,
     _ref5$isDrafting = _ref5.isDrafting,
     isDrafting = _ref5$isDrafting === void 0 ? false : _ref5$isDrafting,
     rest = _objectWithoutProperties(_ref5, _excluded);
@@ -141,15 +147,16 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   useEffect(function () {
     var observer = new MutationObserver(function (mutationList) {
       mutationList.forEach(function (mutation) {
+        var parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
-          var _mutation$target$pare;
-          var elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
+          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);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
     });
-    if (mediaElement) {
-      observer.observe(mediaElement, {
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
         attributes: true,
         subtree: true,
         attributeFilter: ['data-has-focus']
@@ -158,7 +165,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     return function () {
       observer.disconnect();
     };
-  }, [mediaElement, setStatus]);
+  }, [mediaSingleElement, setStatus]);
   if (!isDrafting && !activeParentIds.length) {
     return null;
   }
@@ -229,7 +236,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         })
       }, showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
-        mediaElement: mediaSingleElement,
+        mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting

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

@@ -1,8 +1,12 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var uiMediaSingleBaseStyles = css({
   transition: 'all 0.1s linear'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var uiMediaSingleLayoutStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',