@atlaskit/renderer 113.2.2 → 114.0.0

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

@@ -44,10 +44,11 @@ import { TruncatedWrapper } from './truncated-wrapper';
 import { ValidationContext } from './ValidationContext';
 import { RendererStyleContainer } from './RendererStyleContainer';
 import { getBaseFontSize } from './get-base-font-size';
+import { removeEmptySpaceAroundContent } from './rendererHelper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "113.2.2";
+const packageVersion = "114.0.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -285,7 +286,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
     };
@@ -371,7 +372,7 @@ export class __RendererClassComponent extends PureComponent {
         result,
         stat,
         pmDoc
-      } = renderDocument(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance, this.props.includeNodesCountInStats, skipValidation);
+      } = renderDocument(this.props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(adfDocument) : adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance, this.props.includeNodesCountInStats, skipValidation);
       if (onComplete) {
         onComplete(stat);
       }
@@ -592,7 +593,7 @@ const RendererFunctionalComponent = props => {
       extensionHandlers: props.extensionHandlers,
       portal: props.portal,
       objectContext: {
-        adDoc: props.document,
+        adDoc: props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(props.document) : props.document,
         schema: props.schema,
         ...props.rendererContext
       },
@@ -620,7 +621,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
     };
@@ -744,7 +745,7 @@ const RendererFunctionalComponent = props => {
       result,
       stat,
       pmDoc
-    } = renderDocument(props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation);
+    } = renderDocument(props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(props.document) : props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation);
     if (props.onComplete) {
       props.onComplete(stat);
     }
@@ -774,7 +775,8 @@ const 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 ? jsx(BreakoutSSRInlineScript, {
       noOpSSRInlineScript: Boolean(props.noOpSSRInlineScript)
     }) : null, jsx(RendererActionsInternalUpdater, {

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

@@ -0,0 +1,43 @@
+export const removeEmptySpaceAroundContent = document => {
+  // Check if the document is valid
+  if (!document || !document.content || !Array.isArray(document.content)) {
+    return document;
+  }
+  const 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(child => (child === null || child === void 0 ? void 0 : child.type) !== 'hardBreak');
+  };
+  const content = document.content;
+  let firstContentIndex = -1;
+  let lastContentIndex = -1;
+
+  // Find the first and last paragraphs with content
+  for (let 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 {
+      ...document,
+      content: []
+    };
+  }
+
+  // Slice the content array to include only paragraphs between the first and last content
+  const trimmedContent = content.slice(firstContentIndex, lastContentIndex + 1);
+
+  // Return a new document with the trimmed content
+  return {
+    ...document,
+    content: trimmedContent
+  };
+};

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,
@@ -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

@@ -53,10 +53,11 @@ import { TruncatedWrapper } from './truncated-wrapper';
 import { ValidationContext } from './ValidationContext';
 import { RendererStyleContainer } from './RendererStyleContainer';
 import { getBaseFontSize } from './get-base-font-size';
+import { removeEmptySpaceAroundContent } from './rendererHelper';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "113.2.2";
+var packageVersion = "114.0.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -295,7 +296,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
       };
@@ -379,7 +380,7 @@ export var __RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
       try {
         var _rendererContext$feat;
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
-        var _renderDocument = 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 = renderDocument(this.props.shouldRemoveEmptySpaceAroundContent ? 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;
@@ -603,7 +604,7 @@ var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
       extensionHandlers: props.extensionHandlers,
       portal: props.portal,
       objectContext: _objectSpread({
-        adDoc: props.document,
+        adDoc: props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(props.document) : props.document,
         schema: props.schema
       }, props.rendererContext),
       appearance: props.appearance,
@@ -630,7 +631,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
     };
@@ -751,7 +752,7 @@ var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
   try {
     var _createRendererContex2, _props$media;
     var schema = getSchema(props.schema, props.adfStage);
-    var _renderDocument2 = renderDocument(props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation),
+    var _renderDocument2 = renderDocument(props.shouldRemoveEmptySpaceAroundContent ? 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;
@@ -788,7 +789,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 ? jsx(BreakoutSSRInlineScript, {
       noOpSSRInlineScript: Boolean(props.noOpSSRInlineScript)
     }) : null, jsx(RendererActionsInternalUpdater, {

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

@@ -0,0 +1,46 @@
+import _defineProperty from "@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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+export var 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/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) {
@@ -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/index.d.ts

@@ -64,6 +64,7 @@ export type RendererWrapperProps = {
     isInsideOfInlineExtension?: boolean;
     allowTableResizing?: boolean;
     isTopLevelRenderer?: boolean;
+    shouldRemoveEmptySpaceAroundContent?: boolean;
 } & {
     children?: React.ReactNode;
 };

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

@@ -0,0 +1,2 @@
+import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+export declare const removeEmptySpaceAroundContent: (document: JSONDocNode) => JSONDocNode;

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

@@ -68,6 +68,7 @@ export interface RendererProps {
     isInsideOfInlineExtension?: boolean;
     isTopLevelRenderer?: boolean;
     includeNodesCountInStats?: boolean;
+    shouldRemoveEmptySpaceAroundContent?: boolean;
     /**
      * When enabled a trailing telepointer will be added to the rendered document
      * following content updates.
@@ -78,6 +79,7 @@ export interface RendererProps {
      * is updated as a result of a content update.
      */
     addTelepointer?: boolean;
+    textHighlighter?: TextHighlighter;
     /**
      * @default undefined
      * @description
@@ -109,6 +111,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/index.d.ts

@@ -64,6 +64,7 @@ export type RendererWrapperProps = {
     isInsideOfInlineExtension?: boolean;
     allowTableResizing?: boolean;
     isTopLevelRenderer?: boolean;
+    shouldRemoveEmptySpaceAroundContent?: boolean;
 } & {
     children?: React.ReactNode;
 };

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

@@ -0,0 +1,2 @@
+import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+export declare const removeEmptySpaceAroundContent: (document: JSONDocNode) => JSONDocNode;