@atlaskit/renderer 113.2.2 → 114.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/renderer
 
+## 114.0.0
+
+### Major Changes
+
+- [#122089](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122089)
+  [`f9eb90e04e1ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f9eb90e04e1ec) -
+  [ux] Adding new prop in comments renderer to remove empty space around comment content
+
+## 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

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

@@ -53,6 +53,7 @@ var _truncatedWrapper = require("./truncated-wrapper");
 var _ValidationContext = require("./ValidationContext");
 var _RendererStyleContainer = require("./RendererStyleContainer");
 var _getBaseFontSize = require("./get-base-font-size");
+var _rendererHelper = require("./rendererHelper");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -66,7 +67,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.2";
+var packageVersion = "114.0.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -305,7 +306,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
       };
@@ -389,7 +390,7 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
       try {
         var _rendererContext$feat;
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
-        var _renderDocument = (0, _.renderDocument)(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance, this.props.includeNodesCountInStats, skipValidation),
+        var _renderDocument = (0, _.renderDocument)(this.props.shouldRemoveEmptySpaceAroundContent ? (0, _rendererHelper.removeEmptySpaceAroundContent)(adfDocument) : adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance, this.props.includeNodesCountInStats, skipValidation),
           result = _renderDocument.result,
           stat = _renderDocument.stat,
           pmDoc = _renderDocument.pmDoc;
@@ -613,7 +614,7 @@ var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
       extensionHandlers: props.extensionHandlers,
       portal: props.portal,
       objectContext: _objectSpread({
-        adDoc: props.document,
+        adDoc: props.shouldRemoveEmptySpaceAroundContent ? (0, _rendererHelper.removeEmptySpaceAroundContent)(props.document) : props.document,
         schema: props.schema
       }, props.rendererContext),
       appearance: props.appearance,
@@ -640,7 +641,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
     };
@@ -761,7 +762,7 @@ var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
   try {
     var _createRendererContex2, _props$media;
     var schema = getSchema(props.schema, props.adfStage);
-    var _renderDocument2 = (0, _.renderDocument)(props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation),
+    var _renderDocument2 = (0, _.renderDocument)(props.shouldRemoveEmptySpaceAroundContent ? (0, _rendererHelper.removeEmptySpaceAroundContent)(props.document) : props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation),
       result = _renderDocument2.result,
       stat = _renderDocument2.stat,
       pmDoc = _renderDocument2.pmDoc;
@@ -798,7 +799,8 @@ var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
       onMouseDown: onMouseDownEditView,
       ssr: (_props$media = props.media) === null || _props$media === void 0 ? void 0 : _props$media.ssr,
       isInsideOfInlineExtension: props.isInsideOfInlineExtension,
-      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer
+      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer,
+      shouldRemoveEmptySpaceAroundContent: props.shouldRemoveEmptySpaceAroundContent
     }, props.enableSsrInlineScripts || props.noOpSSRInlineScript ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, {
       noOpSSRInlineScript: Boolean(props.noOpSSRInlineScript)
     }) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeEmptySpaceAroundContent = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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) { (0, _defineProperty2.default)(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; }
+var removeEmptySpaceAroundContent = exports.removeEmptySpaceAroundContent = function removeEmptySpaceAroundContent(document) {
+  // Check if the document is valid
+  if (!document || !document.content || !Array.isArray(document.content)) {
+    return document;
+  }
+  var isParagraphWithContent = function isParagraphWithContent(node) {
+    if (node.type !== 'paragraph' || !node.content || node.content.length === 0) {
+      return false;
+    }
+    // Check if paragraph has any content other than `hardBreak`
+    return node.content.some(function (child) {
+      return (child === null || child === void 0 ? void 0 : child.type) !== 'hardBreak';
+    });
+  };
+  var content = document.content;
+  var firstContentIndex = -1;
+  var lastContentIndex = -1;
+
+  // Find the first and last paragraphs with content
+  for (var i = 0; i < content.length; i++) {
+    if (isParagraphWithContent(content[i])) {
+      if (firstContentIndex === -1) {
+        firstContentIndex = i;
+      }
+      lastContentIndex = i;
+    }
+  }
+
+  // If no content was found, return an empty document
+  if (firstContentIndex === -1) {
+    return _objectSpread(_objectSpread({}, document), {}, {
+      content: []
+    });
+  }
+
+  // Slice the content array to include only paragraphs between the first and last content
+  var trimmedContent = content.slice(firstContentIndex, lastContentIndex + 1);
+
+  // Return a new document with the trimmed content
+  return _objectSpread(_objectSpread({}, document), {}, {
+    content: trimmedContent
+  });
+};

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) {
@@ -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