@atlaskit/renderer 113.2.1 → 113.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/renderer
 
+## 113.3.0
+
+### Minor Changes
+
+- [#123549](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123549)
+  [`dd96b1dc81357`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dd96b1dc81357) -
+  Deprecate `UNSTABLE_textHighlighter` prop on renderer
+
+### Patch Changes
+
+- Updated dependencies
+
+## 113.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 113.2.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -83,6 +83,9 @@
         {
             "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../react-ufo/atlaskit/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../linking-platform/smart-card/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -83,6 +83,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../linking-platform/smart-card/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -83,6 +83,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../linking-platform/smart-card/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/actions/index.js

@@ -374,8 +374,9 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
       };
     }
 
-    // TODO: Do not forget to remove `undefined` when the
-    //       `editor_inline_comments_on_inline_nodes` is removed.
+    // Ignored via go/ees007
+    // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+    // TODO: Do not forget to remove `undefined` when the `editor_inline_comments_on_inline_nodes` is removed.
   }, {
     key: "getInlineNodeTypes",
     value: function getInlineNodeTypes(annotationId) {

package/dist/cjs/react/index.js

@@ -402,7 +402,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       var isInsideMultiBodiedExtension = (0, _rendererNode.insideMultiBodiedExtension)(path, node.type.schema);
       var isInsideOfTable = (0, _rendererNode.insideTable)(path, node.type.schema);
 
-      // TODO: https://product-fabric.atlassian.net/browse/CEMS-1048
+      // TODO: CEMS-1048 - Support sticky headers inside breakout + layout
       var stickyHeaders = !isInsideOfTable && !(0, _rendererNode.insideBreakoutLayout)(path) ? this.stickyHeaders : undefined;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
@@ -738,7 +738,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       }));
     }
 
-    // TODO: ED-9004 Remove unused ReactSerializer.fromSchema in renderer
+    // TODO: ED-9004 - Remove unused ReactSerializer.fromSchema in renderer
     // https://sourcegraph-frontend.internal.shared-prod.us-west-2.kitt-inf.net/search?q=ReactSerializer.fromSchema&patternType=literal
   }, {
     key: "fromSchema",

package/dist/cjs/react/nodes/heading-anchor.js

@@ -66,7 +66,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)(_this, "setTooltipState", function (message) {
       var isClicked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       _this.setState({
-        // TODO: ED-14403 investigate why this does not translate
+        // TODO: ED-14403 - investigate why this does not translate
         tooltipMessage: _this.props.intl.formatMessage(message),
         isClicked: isClicked
       });

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
 var _headingAnchor = _interopRequireDefault(require("./heading-anchor"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
@@ -57,13 +58,24 @@ function Heading(props) {
     marks = props.marks,
     invisible = props.invisible;
   var HX = "h".concat(props.level);
+  var mouseEntered = _react.default.useRef(false);
   var showAnchorLink = !!props.showAnchorLink;
   var isRightAligned = hasRightAlignmentMark(marks);
   var enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
   var headingIdToUse = invisible ? undefined : headingId;
+  var mouseEnterHandler = function mouseEnterHandler() {
+    if (showAnchorLink && !mouseEntered.current) {
+      // Abort TTVC calculation when the mouse hovers over heading. Hovering over
+      // heading render heading anchor and inline comment buttons. These user-induced
+      // DOM changes are valid reasons to abort the TTVC calculation.
+      (0, _interactionMetrics.abortAll)('new_interaction');
+      mouseEntered.current = true;
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HX, {
     id: headingIdToUse,
-    "data-renderer-start-pos": dataAttributes['data-renderer-start-pos']
+    "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
+    onMouseEnter: mouseEnterHandler
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,

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

@@ -127,9 +127,6 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
     width = DEFAULT_WIDTH;
     height = DEFAULT_HEIGHT;
   }
-
-  // TODO: put appearance-based padding into theme instead
-
   var isFullPage = rendererAppearance === 'full-page';
   var isFullWidth = rendererAppearance === 'full-width';
   var padding = isFullPage ? _style.FullPagePadding * 2 : 0;

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

@@ -77,6 +77,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var overflowContainerClass = !removeOverflow ? _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
   var updateActiveChild = _react2.default.useCallback(function (index) {
     if (typeof index !== 'number') {
+      // Ignored via go/ees007
+      // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
       // TODO: Make sure we log this somewhere if this happens
       setActiveChildIndex(0);
       return false;

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

@@ -38,7 +38,7 @@ var modeSpecficStyles = {
   })
 };
 
-// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
+// TODO: DSP-4123 - Quality ticket
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, allowTableResizing) {
   var stickyHeaderZIndex;
   if (allowTableResizing) {

package/dist/cjs/ui/MediaCard.js

@@ -236,7 +236,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         _react.default.createElement("div", (0, _extends2.default)({}, dataAttributes, {
           "data-node-type": "media"
         }), /*#__PURE__*/_react.default.createElement(_mediaCard.Card
-        // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
+        // TODO: MPT-315 - clean up after we move mediaClientConfig into FileIdentifier
         // context is not really used when the type is external and we want to render the component asap
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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

@@ -39,6 +39,8 @@ var TELEPOINTER_ID = 'ai-streaming-telepointer';
 var tableShadowWidth = 32;
 var LAYOUT_BREAKPOINT_RENDERER = 629;
 // originally defined from packages/editor/editor-plugin-table/src/ui/common-styles.ts
+// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: tableRowHeight can be moved into `@atlaskit/editor-common/table`
 var tableRowHeight = 44;
 var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
@@ -325,6 +327,8 @@ var headingsSharedStyles = (0, _react.css)({
   }
 });
 
+// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: emotion refactor - check if we need UGC token?
 var headingsSharedStylesWithEditorUGC = (0, _react.css)({
   '& h1': {
@@ -732,10 +736,14 @@ var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
   marginLeft: 0,
   marginRight: 0
 }), ".".concat(_consts.RendererCssClassName.DOCUMENT, " >"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "*:not([data-mark-type='fragment']) .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
+  // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO - improve inline style logic on table container so important styles aren't required here
   width: '100% !important',
   left: '0 !important'
 }), "[data-mark-type='fragment'] * .".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
+  // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO - improve inline style logic on table container so important styles aren't required here
   width: '100% !important',
   left: '0 !important'
@@ -755,6 +763,8 @@ var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
   display: 'flex'
 })));
 var alignedHeadingAnchorStyle = (0, _react.css)({
+  // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
   '.fabric-editor-block-mark[data-align] >': {
     'h1, h2, h3, h4, h5, h6': {
@@ -774,6 +784,8 @@ var alignedHeadingAnchorStyle = (0, _react.css)({
   }))
 });
 
+// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: emotion refactor - there's a mediaSingleSharedNewStyle, but not originally used in the renderer.
 var mediaSingleSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "li .".concat(_styles.richMediaClassName), {
   margin: 0

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

@@ -66,7 +66,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 = "113.2.1";
+var packageVersion = "113.3.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -305,7 +305,7 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
         // 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: props.isInsideOfInlineExtension,
-        textHighlighter: props.UNSTABLE_textHighlighter,
+        textHighlighter: props.textHighlighter || props.UNSTABLE_textHighlighter,
         allowTableAlignment: props.UNSTABLE_allowTableAlignment,
         allowTableResizing: props.UNSTABLE_allowTableResizing
       };
@@ -640,7 +640,7 @@ var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
       nodeComponents: props.nodeComponents,
       allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
       isInsideOfInlineExtension: props.isInsideOfInlineExtension,
-      textHighlighter: props.UNSTABLE_textHighlighter,
+      textHighlighter: props.textHighlighter || props.UNSTABLE_textHighlighter,
       allowTableAlignment: props.UNSTABLE_allowTableAlignment,
       allowTableResizing: props.UNSTABLE_allowTableResizing
     };

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

@@ -106,16 +106,13 @@ var headingSizes = {
   }
 };
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
-  return (// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
-    (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "em;\n\n\t\t\tmargin-left: ", ";\n\n\t\t\tbutton {\n\t\t\t\tpadding-left: 0;\n\t\t\t\tpadding-right: 0;\n\t\t\t}\n\t\t}\n\n\t\t/**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t.", " {\n\t\t\t\t> button {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\ttransform: translate(-8px, 0px);\n\t\t\t\t\ttransition:\n\t\t\t\t\t\topacity 0.2s ease 0s,\n\t\t\t\t\t\ttransform 0.2s ease 0s;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " > button {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransform: none !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/**\n     * Adds the visibility of the button when in focus through keyboard navigation.\n     */\n\t\t.", " {\n\t\t\tbutton:focus {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: none !important;\n\t\t\t}\n\t\t}\n\t"])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName)
-  );
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t/**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n\t.", " {\n\t\tposition: absolute;\n\t\theight: ", "em;\n\n\t\tmargin-left: ", ";\n\n\t\tbutton {\n\t\t\tpadding-left: 0;\n\t\t\tpadding-right: 0;\n\t\t}\n\t}\n\n\t/**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n\t@media (hover: hover) and (pointer: fine) {\n\t\t.", " {\n\t\t\t> button {\n\t\t\t\topacity: 0;\n\t\t\t\ttransform: translate(-8px, 0px);\n\t\t\t\ttransition:\n\t\t\t\t\topacity 0.2s ease 0s,\n\t\t\t\t\ttransform 0.2s ease 0s;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t.", " > button {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n     * Adds the visibility of the button when in focus through keyboard navigation.\n     */\n\t.", " {\n\t\tbutton:focus {\n\t\t\topacity: 1;\n\t\t\ttransform: none !important;\n\t\t}\n\t}\n"])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName);
 };
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
   var allowNestedHeaderLinks = _ref.allowNestedHeaderLinks;
   if (!allowNestedHeaderLinks) {
     return '';
   }
-  // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
   return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.fabric-editor-block-mark[data-align] > {\n\t\t\th1,\n\t\t\th2,\n\t\t\th3,\n\t\t\th4,\n\t\t\th5,\n\t\t\th6 {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t}\n\n\t\t/**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n\t\t.fabric-editor-block-mark:not([data-align='center'])[data-align] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", " 0 0;\n\t\t\t\t// If the anchor is right aligned then the left side of the heading\n\t\t\t\t// is aligned with the left side of the anchor.\n\t\t\t\t// In order to align as expected we transform it the width of the element (plus our expected 6px)\n\t\t\t\t// to the left\n\t\t\t\ttransform: translateX(calc(-100% - ", "));\n\t\t\t}\n\n\t\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t\t.", " > button {\n\t\t\t\t\ttransform: translate(8px, 0px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), _headingAnchor.HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", "var(--ds-space-075, 6px)", _headingAnchor.HeadingAnchorWrapperClassName);
 };
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
@@ -128,7 +125,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   if (allowNestedHeaderLinks) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_renderer_styles') ? (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME));
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_renderer_styles') ? (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME) : (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME));
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;
@@ -146,7 +143,7 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t/* don't override if the breakout mark has width attribute defined */\n\t\t.fabric-editor-breakout-mark:not([data-has-width='true']),\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), _editorSharedStyles.akEditorFullWidthLayoutWidth, (0, _table.isTableResizingEnabled)(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle() {
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 var getShadowOverrides = function getShadowOverrides() {
   return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/** Shadow overrides */\n\t\t&.", "::after, &.", "::before {\n\t\t\twidth: ", "px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t}\n\n\t\t&.", "::after {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t\tright: 0px;\n\t\t}\n\t"])), _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _ui.shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");

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

@@ -56,7 +56,7 @@ var TruncatedWrapper = exports.TruncatedWrapper = /*#__PURE__*/function (_Compon
     return _callSuper(this, TruncatedWrapper, [props]);
   }
 
-  // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
+  // TODO: DSP-4123 - Quality ticket as elevation.surface will be issue when sits top of modal.
   (0, _inherits2.default)(TruncatedWrapper, _Component);
   return (0, _createClass2.default)(TruncatedWrapper, [{
     key: "render",

package/dist/es2019/actions/index.js

@@ -354,8 +354,9 @@ export default class RendererActions {
     };
   }
 
-  // TODO: Do not forget to remove `undefined` when the
-  //       `editor_inline_comments_on_inline_nodes` is removed.
+  // Ignored via go/ees007
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+  // TODO: Do not forget to remove `undefined` when the `editor_inline_comments_on_inline_nodes` is removed.
   getInlineNodeTypes(annotationId) {
     if (!this.doc || !this.schema) {
       return [];

package/dist/es2019/react/index.js

@@ -369,7 +369,7 @@ export default class ReactSerializer {
     const isInsideMultiBodiedExtension = insideMultiBodiedExtension(path, node.type.schema);
     const isInsideOfTable = insideTable(path, node.type.schema);
 
-    // TODO: https://product-fabric.atlassian.net/browse/CEMS-1048
+    // TODO: CEMS-1048 - Support sticky headers inside breakout + layout
     const stickyHeaders = !isInsideOfTable && !insideBreakoutLayout(path) ? this.stickyHeaders : undefined;
     return {
       ...this.getProps(node),
@@ -655,7 +655,7 @@ export default class ReactSerializer {
     }));
   }
 
-  // TODO: ED-9004 Remove unused ReactSerializer.fromSchema in renderer
+  // TODO: ED-9004 - Remove unused ReactSerializer.fromSchema in renderer
   // https://sourcegraph-frontend.internal.shared-prod.us-west-2.kitt-inf.net/search?q=ReactSerializer.fromSchema&patternType=literal
   static fromSchema(_, init) {
     if (process.env.NODE_ENV !== 'production') {

package/dist/es2019/react/nodes/heading-anchor.js

@@ -45,7 +45,7 @@ class HeadingAnchor extends React.PureComponent {
     });
     _defineProperty(this, "setTooltipState", (message, isClicked = false) => {
       this.setState({
-        // TODO: ED-14403 investigate why this does not translate
+        // TODO: ED-14403 - investigate why this does not translate
         tooltipMessage: this.props.intl.formatMessage(message),
         isClicked
       });

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { abortAll } from '@atlaskit/react-ufo/interaction-metrics';
 import HeadingAnchor from './heading-anchor';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import AnalyticsContext from '../../analytics/analyticsContext';
@@ -49,13 +50,24 @@ function Heading(props) {
     invisible
   } = props;
   const HX = `h${props.level}`;
+  const mouseEntered = React.useRef(false);
   const showAnchorLink = !!props.showAnchorLink;
   const isRightAligned = hasRightAlignmentMark(marks);
   const enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
   const headingIdToUse = invisible ? undefined : headingId;
+  const mouseEnterHandler = () => {
+    if (showAnchorLink && !mouseEntered.current) {
+      // Abort TTVC calculation when the mouse hovers over heading. Hovering over
+      // heading render heading anchor and inline comment buttons. These user-induced
+      // DOM changes are valid reasons to abort the TTVC calculation.
+      abortAll('new_interaction');
+      mouseEntered.current = true;
+    }
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HX, {
     id: headingIdToUse,
-    "data-renderer-start-pos": dataAttributes['data-renderer-start-pos']
+    "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
+    onMouseEnter: mouseEnterHandler
   }, /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,

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

@@ -113,9 +113,6 @@ const MediaSingleWithChildren = props => {
     width = DEFAULT_WIDTH;
     height = DEFAULT_HEIGHT;
   }
-
-  // TODO: put appearance-based padding into theme instead
-
   const isFullPage = rendererAppearance === 'full-page';
   const isFullWidth = rendererAppearance === 'full-width';
   const padding = isFullPage ? FullPagePadding * 2 : 0;

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

@@ -69,6 +69,8 @@ const MultiBodiedExtension = props => {
   const overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
   const updateActiveChild = React.useCallback(index => {
     if (typeof index !== 'number') {
+      // Ignored via go/ees007
+      // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
       // TODO: Make sure we log this somewhere if this happens
       setActiveChildIndex(0);
       return false;

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

@@ -26,7 +26,7 @@ const modeSpecficStyles = {
   })
 };
 
-// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
+// TODO: DSP-4123 - Quality ticket
 const fixedTableDivStaticStyles = (top, width, allowTableResizing) => {
   let stickyHeaderZIndex;
   if (allowTableResizing) {

package/dist/es2019/ui/MediaCard.js

@@ -171,7 +171,7 @@ export class MediaCardView extends Component {
       React.createElement("div", _extends({}, dataAttributes, {
         "data-node-type": "media"
       }), /*#__PURE__*/React.createElement(Card
-      // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
+      // TODO: MPT-315 - clean up after we move mediaClientConfig into FileIdentifier
       // context is not really used when the type is external and we want to render the component asap
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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

@@ -30,6 +30,8 @@ const TELEPOINTER_ID = 'ai-streaming-telepointer';
 const tableShadowWidth = 32;
 const LAYOUT_BREAKPOINT_RENDERER = 629;
 // originally defined from packages/editor/editor-plugin-table/src/ui/common-styles.ts
+// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: tableRowHeight can be moved into `@atlaskit/editor-common/table`
 const tableRowHeight = 44;
 const {
@@ -387,6 +389,8 @@ const headingsSharedStyles = css({
   }
 });
 
+// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: emotion refactor - check if we need UGC token?
 const headingsSharedStylesWithEditorUGC = css({
   '& h1': {
@@ -864,11 +868,15 @@ const baseOtherStyles = css({
   /* Breakout for tables and extensions */
   [`.${RendererCssClassName.DOCUMENT} >`]: {
     [`*:not([data-mark-type='fragment']) .${TableSharedCssClassName.TABLE_CONTAINER}`]: {
+      // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+      // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
       // TODO - improve inline style logic on table container so important styles aren't required here
       width: '100% !important',
       left: '0 !important'
     },
     [`[data-mark-type='fragment'] * .${TableSharedCssClassName.TABLE_CONTAINER}`]: {
+      // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+      // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
       // TODO - improve inline style logic on table container so important styles aren't required here
       width: '100% !important',
       left: '0 !important'
@@ -898,6 +906,8 @@ const baseOtherStyles = css({
   }
 });
 const alignedHeadingAnchorStyle = css({
+  // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
   '.fabric-editor-block-mark[data-align] >': {
     'h1, h2, h3, h4, h5, h6': {
@@ -922,6 +932,8 @@ const alignedHeadingAnchorStyle = css({
   }
 });
 
+// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: emotion refactor - there's a mediaSingleSharedNewStyle, but not originally used in the renderer.
 const mediaSingleSharedStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

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

@@ -47,7 +47,7 @@ import { getBaseFontSize } from './get-base-font-size';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "113.2.1";
+const packageVersion = "113.3.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -285,7 +285,7 @@ export class __RendererClassComponent extends PureComponent {
       // 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: props.isInsideOfInlineExtension,
-      textHighlighter: props.UNSTABLE_textHighlighter,
+      textHighlighter: props.textHighlighter || props.UNSTABLE_textHighlighter,
       allowTableAlignment: props.UNSTABLE_allowTableAlignment,
       allowTableResizing: props.UNSTABLE_allowTableResizing
     };
@@ -620,7 +620,7 @@ const RendererFunctionalComponent = props => {
       nodeComponents: props.nodeComponents,
       allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
       isInsideOfInlineExtension: props.isInsideOfInlineExtension,
-      textHighlighter: props.UNSTABLE_textHighlighter,
+      textHighlighter: props.textHighlighter || props.UNSTABLE_textHighlighter,
       allowTableAlignment: props.UNSTABLE_allowTableAlignment,
       allowTableResizing: props.UNSTABLE_allowTableResizing
     };

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

@@ -118,26 +118,24 @@ const headingSizes = {
     lineHeight: getLineHeight('h100')
   }
 };
-const headingAnchorStyle = headingTag =>
-// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
-css`
-		/**
+const headingAnchorStyle = headingTag => css`
+	/**
      * The copy link button doesn't reserve space in the DOM so that
      * the text alignment isn't impacted by the button/icon's space.
      */
-		.${HeadingAnchorWrapperClassName} {
-			position: absolute;
-			height: ${headingSizes[headingTag].lineHeight}em;
+	.${HeadingAnchorWrapperClassName} {
+		position: absolute;
+		height: ${headingSizes[headingTag].lineHeight}em;
 
-			margin-left: ${"var(--ds-space-075, 6px)"};
+		margin-left: ${"var(--ds-space-075, 6px)"};
 
-			button {
-				padding-left: 0;
-				padding-right: 0;
-			}
+		button {
+			padding-left: 0;
+			padding-right: 0;
 		}
+	}
 
-		/**
+	/**
      * Applies hover effects to the heading anchor link button
      * to fade in when the user rolls over the heading.
      *
@@ -146,42 +144,41 @@ css`
      *
      * @see https://caniuse.com/mdn-css_at-rules_media_hover
      */
-		@media (hover: hover) and (pointer: fine) {
-			.${HeadingAnchorWrapperClassName} {
-				> button {
-					opacity: 0;
-					transform: translate(-8px, 0px);
-					transition:
-						opacity 0.2s ease 0s,
-						transform 0.2s ease 0s;
-				}
+	@media (hover: hover) and (pointer: fine) {
+		.${HeadingAnchorWrapperClassName} {
+			> button {
+				opacity: 0;
+				transform: translate(-8px, 0px);
+				transition:
+					opacity 0.2s ease 0s,
+					transform 0.2s ease 0s;
 			}
+		}
 
-			&:hover {
-				.${HeadingAnchorWrapperClassName} > button {
-					opacity: 1;
-					transform: none !important;
-				}
+		&:hover {
+			.${HeadingAnchorWrapperClassName} > button {
+				opacity: 1;
+				transform: none !important;
 			}
 		}
+	}
 
-		/**
+	/**
      * Adds the visibility of the button when in focus through keyboard navigation.
      */
-		.${HeadingAnchorWrapperClassName} {
-			button:focus {
-				opacity: 1;
-				transform: none !important;
-			}
+	.${HeadingAnchorWrapperClassName} {
+		button:focus {
+			opacity: 1;
+			transform: none !important;
 		}
-	`;
+	}
+`;
 const alignedHeadingAnchorStyle = ({
   allowNestedHeaderLinks
 }) => {
   if (!allowNestedHeaderLinks) {
     return '';
   }
-  // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
   return css`
 		.fabric-editor-block-mark[data-align] > {
 			h1,
@@ -312,9 +309,9 @@ const tableSortableColumnStyle = ({
 
 						&:hover:not(
 								:has(
-									.${RendererCssClassName.SORTABLE_COLUMN_WRAPPER}
-										.${RendererCssClassName.SORTABLE_COLUMN}:hover
-								)
+										.${RendererCssClassName.SORTABLE_COLUMN_WRAPPER}
+											.${RendererCssClassName.SORTABLE_COLUMN}:hover
+									)
 							)
 							> .${RendererCssClassName.SORTABLE_COLUMN}
 							> .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
@@ -392,12 +389,16 @@ const fullWidthStyles = ({
 const breakoutWidthStyle = () => {
   return css`
 		*:not([data-mark-type='fragment']) .${TableSharedCssClassName.TABLE_CONTAINER} {
+			// Ignored via go/ees007
+			// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 			// TODO - improve inline style logic on table container so important styles aren't required here
 			width: 100% !important;
 			left: 0 !important;
 		}
 
 		[data-mark-type='fragment'] * .${TableSharedCssClassName.TABLE_CONTAINER} {
+			// Ignored via go/ees007
+			// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 			// TODO - improve inline style logic on table container so important styles aren't required here
 			width: 100% !important;
 			left: 0 !important;

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

@@ -43,7 +43,7 @@ export class TruncatedWrapper extends Component {
     super(props);
   }
 
-  // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
+  // TODO: DSP-4123 - Quality ticket as elevation.surface will be issue when sits top of modal.
   render() {
     const {
       height = 95,

package/dist/esm/actions/index.js

@@ -367,8 +367,9 @@ var RendererActions = /*#__PURE__*/function () {
       };
     }
 
-    // TODO: Do not forget to remove `undefined` when the
-    //       `editor_inline_comments_on_inline_nodes` is removed.
+    // Ignored via go/ees007
+    // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+    // TODO: Do not forget to remove `undefined` when the `editor_inline_comments_on_inline_nodes` is removed.
   }, {
     key: "getInlineNodeTypes",
     value: function getInlineNodeTypes(annotationId) {

package/dist/esm/react/index.js

@@ -395,7 +395,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var isInsideMultiBodiedExtension = insideMultiBodiedExtension(path, node.type.schema);
       var isInsideOfTable = insideTable(path, node.type.schema);
 
-      // TODO: https://product-fabric.atlassian.net/browse/CEMS-1048
+      // TODO: CEMS-1048 - Support sticky headers inside breakout + layout
       var stickyHeaders = !isInsideOfTable && !insideBreakoutLayout(path) ? this.stickyHeaders : undefined;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
@@ -731,7 +731,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       }));
     }
 
-    // TODO: ED-9004 Remove unused ReactSerializer.fromSchema in renderer
+    // TODO: ED-9004 - Remove unused ReactSerializer.fromSchema in renderer
     // https://sourcegraph-frontend.internal.shared-prod.us-west-2.kitt-inf.net/search?q=ReactSerializer.fromSchema&patternType=literal
   }, {
     key: "fromSchema",

package/dist/esm/react/nodes/heading-anchor.js

@@ -60,7 +60,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_this, "setTooltipState", function (message) {
       var isClicked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       _this.setState({
-        // TODO: ED-14403 investigate why this does not translate
+        // TODO: ED-14403 - investigate why this does not translate
         tooltipMessage: _this.props.intl.formatMessage(message),
         isClicked: isClicked
       });

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { abortAll } from '@atlaskit/react-ufo/interaction-metrics';
 import HeadingAnchor from './heading-anchor';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import AnalyticsContext from '../../analytics/analyticsContext';
@@ -50,13 +51,24 @@ function Heading(props) {
     marks = props.marks,
     invisible = props.invisible;
   var HX = "h".concat(props.level);
+  var mouseEntered = React.useRef(false);
   var showAnchorLink = !!props.showAnchorLink;
   var isRightAligned = hasRightAlignmentMark(marks);
   var enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
   var headingIdToUse = invisible ? undefined : headingId;
+  var mouseEnterHandler = function mouseEnterHandler() {
+    if (showAnchorLink && !mouseEntered.current) {
+      // Abort TTVC calculation when the mouse hovers over heading. Hovering over
+      // heading render heading anchor and inline comment buttons. These user-induced
+      // DOM changes are valid reasons to abort the TTVC calculation.
+      abortAll('new_interaction');
+      mouseEntered.current = true;
+    }
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HX, {
     id: headingIdToUse,
-    "data-renderer-start-pos": dataAttributes['data-renderer-start-pos']
+    "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
+    onMouseEnter: mouseEnterHandler
   }, /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,
     enableNestedHeaderLinks: enableNestedHeaderLinks,

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

@@ -116,9 +116,6 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
     width = DEFAULT_WIDTH;
     height = DEFAULT_HEIGHT;
   }
-
-  // TODO: put appearance-based padding into theme instead
-
   var isFullPage = rendererAppearance === 'full-page';
   var isFullWidth = rendererAppearance === 'full-width';
   var padding = isFullPage ? FullPagePadding * 2 : 0;

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

@@ -68,6 +68,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var overflowContainerClass = !removeOverflow ? RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER : '';
   var updateActiveChild = React.useCallback(function (index) {
     if (typeof index !== 'number') {
+      // Ignored via go/ees007
+      // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
       // TODO: Make sure we log this somewhere if this happens
       setActiveChildIndex(0);
       return false;

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

@@ -29,7 +29,7 @@ var modeSpecficStyles = {
   })
 };
 
-// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
+// TODO: DSP-4123 - Quality ticket
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, allowTableResizing) {
   var stickyHeaderZIndex;
   if (allowTableResizing) {

package/dist/esm/ui/MediaCard.js

@@ -226,7 +226,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         React.createElement("div", _extends({}, dataAttributes, {
           "data-node-type": "media"
         }), /*#__PURE__*/React.createElement(Card
-        // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
+        // TODO: MPT-315 - clean up after we move mediaClientConfig into FileIdentifier
         // context is not really used when the type is external and we want to render the component asap
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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

@@ -32,6 +32,8 @@ var TELEPOINTER_ID = 'ai-streaming-telepointer';
 var tableShadowWidth = 32;
 var LAYOUT_BREAKPOINT_RENDERER = 629;
 // originally defined from packages/editor/editor-plugin-table/src/ui/common-styles.ts
+// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: tableRowHeight can be moved into `@atlaskit/editor-common/table`
 var tableRowHeight = 44;
 var _getGlobalTheme = getGlobalTheme(),
@@ -318,6 +320,8 @@ var headingsSharedStyles = css({
   }
 });
 
+// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: emotion refactor - check if we need UGC token?
 var headingsSharedStylesWithEditorUGC = css({
   '& h1': {
@@ -725,10 +729,14 @@ var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
   marginLeft: 0,
   marginRight: 0
 }), ".".concat(RendererCssClassName.DOCUMENT, " >"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "*:not([data-mark-type='fragment']) .".concat(TableSharedCssClassName.TABLE_CONTAINER), {
+  // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO - improve inline style logic on table container so important styles aren't required here
   width: '100% !important',
   left: '0 !important'
 }), "[data-mark-type='fragment'] * .".concat(TableSharedCssClassName.TABLE_CONTAINER), {
+  // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO - improve inline style logic on table container so important styles aren't required here
   width: '100% !important',
   left: '0 !important'
@@ -748,6 +756,8 @@ var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
   display: 'flex'
 })));
 var alignedHeadingAnchorStyle = css({
+  // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
   '.fabric-editor-block-mark[data-align] >': {
     'h1, h2, h3, h4, h5, h6': {
@@ -767,6 +777,8 @@ var alignedHeadingAnchorStyle = css({
   }))
 });
 
+// Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
+// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
 // TODO: emotion refactor - there's a mediaSingleSharedNewStyle, but not originally used in the renderer.
 var mediaSingleSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "li .".concat(richMediaClassName), {
   margin: 0

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

@@ -56,7 +56,7 @@ import { getBaseFontSize } from './get-base-font-size';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "113.2.1";
+var packageVersion = "113.3.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -295,7 +295,7 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
         // 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: props.isInsideOfInlineExtension,
-        textHighlighter: props.UNSTABLE_textHighlighter,
+        textHighlighter: props.textHighlighter || props.UNSTABLE_textHighlighter,
         allowTableAlignment: props.UNSTABLE_allowTableAlignment,
         allowTableResizing: props.UNSTABLE_allowTableResizing
       };
@@ -630,7 +630,7 @@ var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
       nodeComponents: props.nodeComponents,
       allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
       isInsideOfInlineExtension: props.isInsideOfInlineExtension,
-      textHighlighter: props.UNSTABLE_textHighlighter,
+      textHighlighter: props.textHighlighter || props.UNSTABLE_textHighlighter,
       allowTableAlignment: props.UNSTABLE_allowTableAlignment,
       allowTableResizing: props.UNSTABLE_allowTableResizing
     };

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

@@ -96,16 +96,13 @@ var headingSizes = {
   }
 };
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
-  return (// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
-    css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t/**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "em;\n\n\t\t\tmargin-left: ", ";\n\n\t\t\tbutton {\n\t\t\t\tpadding-left: 0;\n\t\t\t\tpadding-right: 0;\n\t\t\t}\n\t\t}\n\n\t\t/**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t.", " {\n\t\t\t\t> button {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\ttransform: translate(-8px, 0px);\n\t\t\t\t\ttransition:\n\t\t\t\t\t\topacity 0.2s ease 0s,\n\t\t\t\t\t\ttransform 0.2s ease 0s;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " > button {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransform: none !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/**\n     * Adds the visibility of the button when in focus through keyboard navigation.\n     */\n\t\t.", " {\n\t\t\tbutton:focus {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: none !important;\n\t\t\t}\n\t\t}\n\t"])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName)
-  );
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t/**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n\t.", " {\n\t\tposition: absolute;\n\t\theight: ", "em;\n\n\t\tmargin-left: ", ";\n\n\t\tbutton {\n\t\t\tpadding-left: 0;\n\t\t\tpadding-right: 0;\n\t\t}\n\t}\n\n\t/**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n\t@media (hover: hover) and (pointer: fine) {\n\t\t.", " {\n\t\t\t> button {\n\t\t\t\topacity: 0;\n\t\t\t\ttransform: translate(-8px, 0px);\n\t\t\t\ttransition:\n\t\t\t\t\topacity 0.2s ease 0s,\n\t\t\t\t\ttransform 0.2s ease 0s;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t.", " > button {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n     * Adds the visibility of the button when in focus through keyboard navigation.\n     */\n\t.", " {\n\t\tbutton:focus {\n\t\t\topacity: 1;\n\t\t\ttransform: none !important;\n\t\t}\n\t}\n"])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName);
 };
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
   var allowNestedHeaderLinks = _ref.allowNestedHeaderLinks;
   if (!allowNestedHeaderLinks) {
     return '';
   }
-  // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t.fabric-editor-block-mark[data-align] > {\n\t\t\th1,\n\t\t\th2,\n\t\t\th3,\n\t\t\th4,\n\t\t\th5,\n\t\t\th6 {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t}\n\n\t\t/**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n\t\t.fabric-editor-block-mark:not([data-align='center'])[data-align] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", " 0 0;\n\t\t\t\t// If the anchor is right aligned then the left side of the heading\n\t\t\t\t// is aligned with the left side of the anchor.\n\t\t\t\t// In order to align as expected we transform it the width of the element (plus our expected 6px)\n\t\t\t\t// to the left\n\t\t\t\ttransform: translateX(calc(-100% - ", "));\n\t\t\t}\n\n\t\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t\t.", " > button {\n\t\t\t\t\ttransform: translate(8px, 0px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName);
 };
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
@@ -118,7 +115,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   if (allowNestedHeaderLinks) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, fg('platform_editor_nested_tables_renderer_styles') ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME));
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, fg('platform_editor_nested_tables_renderer_styles') ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// New styles\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\tmargin: 0;\n\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover:not(\n\t\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t\t.", "\n\t\t\t\t\t\t\t\t\t\t\t.", ":hover\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t> .", "\n\t\t\t\t\t\t\t> .", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t\t\t// old styles\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\topacity: 0;\n\t\t\t\t\t\t\t\t&:focus {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t.", " {\n\t\t\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t"])), RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME));
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;
@@ -136,7 +133,7 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t/* don't override if the breakout mark has width attribute defined */\n\t\t.fabric-editor-breakout-mark:not([data-has-width='true']),\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n      .pm-table-container {\n        width: 100% !important;\n      }\n    ");
 };
 var breakoutWidthStyle = function breakoutWidthStyle() {
-  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// Ignored via go/ees007\n\t\t\t// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 var getShadowOverrides = function getShadowOverrides() {
   return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t/** Shadow overrides */\n\t\t&.", "::after, &.", "::before {\n\t\t\twidth: ", "px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t}\n\n\t\t&.", "::after {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t\tright: 0px;\n\t\t}\n\t"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");

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

@@ -51,7 +51,7 @@ export var TruncatedWrapper = /*#__PURE__*/function (_Component) {
     return _callSuper(this, TruncatedWrapper, [props]);
   }
 
-  // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
+  // TODO: DSP-4123 - Quality ticket as elevation.surface will be issue when sits top of modal.
   _inherits(TruncatedWrapper, _Component);
   return _createClass(TruncatedWrapper, [{
     key: "render",

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

@@ -78,6 +78,7 @@ export interface RendererProps {
      * is updated as a result of a content update.
      */
     addTelepointer?: boolean;
+    textHighlighter?: TextHighlighter;
     /**
      * @default undefined
      * @description
@@ -109,6 +110,7 @@ export interface RendererProps {
     featureFlags?: {
         [featureFlag: string]: boolean;
     } | Partial<RawObjectFeatureFlags>;
+    /** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-26490 Internal documentation for deprecation (no external access)}  This prop has been marked stable and therefore replaced by the `textHighlighter` prop. Please use `textHighlighter` prop instead. */
     UNSTABLE_textHighlighter?: TextHighlighter;
     UNSTABLE_allowTableAlignment?: boolean;
     UNSTABLE_allowTableResizing?: boolean;

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

@@ -78,6 +78,7 @@ export interface RendererProps {
      * is updated as a result of a content update.
      */
     addTelepointer?: boolean;
+    textHighlighter?: TextHighlighter;
     /**
      * @default undefined
      * @description
@@ -109,6 +110,7 @@ export interface RendererProps {
     featureFlags?: {
         [featureFlag: string]: boolean;
     } | Partial<RawObjectFeatureFlags>;
+    /** @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-26490 Internal documentation for deprecation (no external access)}  This prop has been marked stable and therefore replaced by the `textHighlighter` prop. Please use `textHighlighter` prop instead. */
     UNSTABLE_textHighlighter?: TextHighlighter;
     UNSTABLE_allowTableAlignment?: boolean;
     UNSTABLE_allowTableResizing?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "113.2.1",
+	"version": "113.3.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/code": "^16.0.0",
-		"@atlaskit/editor-common": "^101.1.0",
+		"@atlaskit/editor-common": "^102.3.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-palette": "^2.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -48,11 +48,12 @@
 		"@atlaskit/media-ui": "^28.0.0",
 		"@atlaskit/media-viewer": "^52.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/react-ufo": "^3.4.0",
 		"@atlaskit/smart-card": "^35.2.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.4.0",
+		"@atlaskit/tmp-editor-statsig": "^3.5.0",
 		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",