@atlaskit/renderer 124.0.4 → 124.1.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 124.1.1
+
+### Patch Changes
+
+- [`bf06894c2fcd4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf06894c2fcd4) -
+  [ux] in renderer, add text highlight padding
+- Updated dependencies
+
+## 124.1.0
+
+### Minor Changes
+
+- [`6fabf6d555515`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fabf6d555515) -
+  EDITOR-1566 add renderer sync-block node support
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 124.0.4
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -13,21 +13,22 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _model = require("@atlaskit/editor-prosemirror/model");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _links = require("./utils/links");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _nodes = require("./nodes");
 var _textWrapper = _interopRequireDefault(require("./nodes/text-wrapper"));
-var _marks = require("./marks");
-var _validator = require("@atlaskit/editor-common/validator");
+var _links = require("./utils/links");
 var _utils = require("@atlaskit/editor-common/utils");
-var _utils2 = require("../utils");
-var _utils3 = require("@atlaskit/editor-prosemirror/utils");
+var _validator = require("@atlaskit/editor-common/validator");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _rendererNode = require("./renderer-node");
+var _utils3 = require("../utils");
+var _marks = require("./marks");
 var _code = require("./marks/code");
-var _segmentText = require("./utils/segment-text");
+var _rendererNode = require("./renderer-node");
 var _renderTextSegments = require("./utils/render-text-segments");
+var _segmentText = require("./utils/segment-text");
+var _getStandaloneBackgroundColorMarks = require("./utils/getStandaloneBackgroundColorMarks");
 var _excluded = ["key"];
 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; }
@@ -62,6 +63,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "allowCustomPanels", false);
     (0, _defineProperty2.default)(this, "surroundTextNodesWithTextWrapper", false);
     (0, _defineProperty2.default)(this, "allowAnnotations", false);
+    (0, _defineProperty2.default)(this, "standaloneBackgroundColorMarks", []);
     (0, _defineProperty2.default)(this, "serializeFragmentChild", function (node, _ref) {
       var index = _ref.index,
         parentInfo = _ref.parentInfo;
@@ -301,6 +303,10 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         parentInfo = _ref2.parentInfo;
       var currentPath = parentInfo && parentInfo.path || [];
       var nodePosition = parentInfo && parentInfo.pos || 1;
+      if ((0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true)) {
+        var _this$standaloneBackg;
+        (_this$standaloneBackg = this.standaloneBackgroundColorMarks).push.apply(_this$standaloneBackg, (0, _toConsumableArray2.default)((0, _getStandaloneBackgroundColorMarks.getStandaloneBackgroundColorMarks)(content)));
+      }
       return ReactSerializer.buildMarkStructure(content).map(function (mark, index) {
         return _this3.serializeMark({
           mark: mark,
@@ -336,7 +342,12 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var content = (mark.content || []).map(serializeContent);
         var markKey = "".concat(mark.type.name, "-component__").concat(this.startPos, "__").concat(parentMark.path.length);
-        return this.renderMark((0, _marks.toReact)(mark), this.getMarkProps(mark, parentMark.path), markKey, content);
+        var isStandalone = (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) && this.standaloneBackgroundColorMarks.some(function (m) {
+          return mark.eq(m);
+        });
+        return this.renderMark((0, _marks.toReact)(mark), _objectSpread(_objectSpread({}, this.getMarkProps(mark, parentMark.path)), {}, {
+          isStandalone: isStandalone
+        }), markKey, content);
       }
       var startPos = this.startPos;
       var endPos = startPos + mark.nodeSize;
@@ -656,7 +667,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       if (!(0, _links.isNestedHeaderLinksEnabled)(this.allowHeadingAnchorLinks)) {
         return this.getProps(node);
       }
-      var nestedHeaderIds = (0, _utils3.findChildrenByType)(node, node.type.schema.nodes.heading).map(function (_ref4) {
+      var nestedHeaderIds = (0, _utils2.findChildrenByType)(node, node.type.schema.nodes.heading).map(function (_ref4) {
         var node = _ref4.node;
         return _this7.getHeadingId(node, _this7.expandHeadingIds);
       });
@@ -684,7 +695,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .reduce(function (acc, node) {
-        return acc.concat((0, _utils2.getText)(node) || '');
+        return acc.concat((0, _utils3.getText)(node) || '');
       }, '').trim()
       // Ignored via go/ees005
       // eslint-disable-next-line require-unicode-regexp

package/dist/cjs/react/marks/backgroundColor.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _tokens = require("@atlaskit/tokens");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function BackgroundColor(props) {
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
@@ -49,6 +50,22 @@ function BackgroundColor(props) {
   var style = (0, _react.useMemo)(function () {
     return (0, _defineProperty2.default)({}, '--custom-palette-color', paletteColorValue);
   }, [paletteColorValue]);
+  if (props.isStandalone && (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true)) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      "data-block-mark": props.dataAttributes['data-block-mark'],
+      "data-renderer-mark": props.dataAttributes['data-renderer-mark'],
+      "data-background-custom-color": props.color
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "fabric-background-color-mark"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: "background-color-padding-left background-color-padding-right"
+    }, props.children));
+  }
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, props.dataAttributes, {
     "data-background-custom-color": props.color
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -113,7 +113,9 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
         headingId = _this$props.headingId;
       return (0, _react2.jsx)("button", {
         "data-testid": "anchor-button",
-        css: copyAnchorButtonStyles,
+        css: copyAnchorButtonStyles
+        // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+        ,
         onMouseLeave: _this.resetMessage,
         onClick: _this.copyToClipboard,
         "aria-hidden": hideFromScreenReader,

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

@@ -434,6 +434,19 @@ var Expand = exports.Expand = (0, _reactLoadable.default)({
     return null;
   }
 });
+var SyncBlockLoader = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_renderer-node_SyncBlock" */
+      './syncBlock'));
+    }).then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
 var nodeToReact = exports.nodeToReact = {
   blockquote: _blockquote.default,
   bulletList: _bulletList.default,
@@ -476,6 +489,7 @@ var nodeToReact = exports.nodeToReact = {
   unsupportedBlock: _ui.UnsupportedBlock,
   unsupportedInline: _ui.UnsupportedInline,
   expand: Expand,
+  syncBlock: SyncBlockLoader,
   nestedExpand: Expand,
   embedCard: EmbedCard,
   blockTaskItem: TaskItem

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SyncBlock;
+var _react = _interopRequireDefault(require("react"));
+// For sync block to work, we need to pass in a custom syncBlock renderer
+// However, we need define a basic component to render the sync block
+function SyncBlock(props) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-sync-block": true,
+    "data-local-id": props.localId
+  });
+}

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

@@ -153,7 +153,7 @@ var TableWrapper = function TableWrapper(_ref2) {
     ref: wrapperRef,
     onScroll: stickyHeaders ? onScroll : undefined
     // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0,
     role: "region",

package/dist/cjs/react/utils/getStandaloneBackgroundColorMarks.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStandaloneBackgroundColorMarks = void 0;
+var _ = _interopRequireDefault(require(".."));
+/**
+ * Returns an array of **backgroundColor marks** that should be considered "standalone"
+ * for highlight padding purposes.
+ *
+ * Standalone backgroundColor marks are determined by scanning the content array and
+ * checking for backgroundColor marks that are separated by whitespace boundaries.
+ *
+ * @param content Array of ProseMirror nodes to scan for standalone backgroundColor marks.
+ * @returns Array of backgroundColor marks that are standalone.
+ */
+var getStandaloneBackgroundColorMarks = exports.getStandaloneBackgroundColorMarks = function getStandaloneBackgroundColorMarks(content) {
+  var standaloneMarks = [];
+  // keep track of the previous node's state
+  var prev = {
+    selfSpaceOnTheRight: true // initial value to handle leading BackgroundColor
+  };
+  var prevNode = null;
+  // Iterates through each node in the content array.
+  // Tracks if the previous node had a backgroundColor mark and if it ended with a space.
+  // If a backgroundColor mark is followed by a text node that starts with a space,
+  // and the previous node ended with a space, the previous backgroundColor mark is considered standalone.
+  // At the end, flushes any remaining node that meets the standalone criteria.
+  for (var i = 0; i < content.length; i++) {
+    var node = content[i];
+    var nodeMarks = _.default.getMarks(node);
+    var isBackgroundColor = nodeMarks.some(function (m) {
+      return m.type.name === 'backgroundColor';
+    });
+    var selfSpaceOnTheLeft = false;
+    var selfSpaceOnTheRight = false;
+    if (node.text) {
+      selfSpaceOnTheLeft = node.text.startsWith(' ');
+      selfSpaceOnTheRight = node.text.endsWith(' ');
+    }
+    if (isBackgroundColor) {
+      prevNode = node;
+      prev = {
+        selfSpaceOnTheRight: false,
+        hasBackgroundColor: true,
+        spaceToTheLeft: prev !== null && prev.selfSpaceOnTheRight
+      };
+    } else {
+      // If prev exists, check for standalone logic
+      if (prev && prev.hasBackgroundColor && prevNode) {
+        // If prev had space on the left and current is a TextNode and has space on the left
+        if (prev.spaceToTheLeft && selfSpaceOnTheLeft) {
+          var mark = _.default.getMarks(prevNode).find(function (m) {
+            return m.type.name === 'backgroundColor';
+          });
+          if (mark) {
+            standaloneMarks.push(mark);
+          }
+        }
+      }
+      prevNode = null;
+      prev = {
+        selfSpaceOnTheRight: selfSpaceOnTheRight,
+        hasBackgroundColor: false
+      };
+    }
+  }
+  if (prevNode) {
+    if (prev && prev.hasBackgroundColor && prev.spaceToTheLeft) {
+      var _mark = _.default.getMarks(prevNode).find(function (m) {
+        return m.type.name === 'backgroundColor';
+      });
+      if (_mark) {
+        standaloneMarks.push(_mark);
+      }
+    }
+  }
+  return standaloneMarks;
+};

package/dist/cjs/render-document.js

@@ -103,14 +103,14 @@ var memoValidation = (0, _memoizeOne.default)(_validation, function (newArgs, la
     newSchema = _newArgs[1],
     newADFStage = _newArgs[2],
     newUseSpecValidator = _newArgs[3],
-    newSkipValidation = _newArgs[5],
+    /* ignoring dispatchAnalyticsEvent */newSkipValidation = _newArgs[5],
     newValidationOverrides = _newArgs[6];
   var _lastArgs = (0, _slicedToArray2.default)(lastArgs, 7),
     oldDoc = _lastArgs[0],
     oldSchema = _lastArgs[1],
     oldADFStage = _lastArgs[2],
     oldUseSpecValidator = _lastArgs[3],
-    oldSkipValidation = _lastArgs[5],
+    /* ignoring dispatchAnalyticsEvent */oldSkipValidation = _lastArgs[5],
     oldValidationOverrides = _lastArgs[6];
   return areDocsEqual(newDoc, oldDoc) && newSchema === oldSchema && newADFStage === oldADFStage && newUseSpecValidator === oldUseSpecValidator && newSkipValidation === oldSkipValidation && newValidationOverrides === oldValidationOverrides;
 });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RendererStyleContainer = void 0;
+exports.textHighlightPaddingStyles = exports.RendererStyleContainer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _useScrollToLocalId = require("../hooks/useScrollToLocalId");
@@ -26,6 +26,7 @@ var _table2 = require("@atlaskit/editor-common/table");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _ugcTokens = require("@atlaskit/editor-common/ugc-tokens");
 var _getBaseFontSize = require("./get-base-font-size");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _css, _css8;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
@@ -753,6 +754,20 @@ var backgroundColorStyles = (0, _react.css)({
     backgroundColor: 'unset'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var textHighlightPaddingStyles = exports.textHighlightPaddingStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.fabric-background-color-mark:has(.background-color-padding-left)': {
+    paddingLeft: "var(--ds-space-025, 2px)",
+    marginLeft: "var(--ds-space-negative-025, -2px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.fabric-background-color-mark:has(.background-color-padding-right)': {
+    paddingRight: "var(--ds-space-025, 2px)",
+    marginRight: "var(--ds-space-negative-025, -2px)"
+  }
+});
 var tasksAndDecisionsStyles = (0, _react.css)({
   '.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".taskItemView-content-wrap,\n\t\t.".concat(_styles.TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
     position: 'relative',
@@ -1505,7 +1520,9 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, !(0, _platformFeatureFlags.fg)('aifc_create_enabled') && telepointerStyles, (0, _platformFeatureFlags.fg)('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop,
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, !(0, _platformFeatureFlags.fg)('aifc_create_enabled') && telepointerStyles, (0, _platformFeatureFlags.fg)('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -68,7 +68,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.0.3";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/index.js

@@ -2,21 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { MarkType } from '@atlaskit/editor-prosemirror/model';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isNestedHeaderLinksEnabled } from './utils/links';
-import { Doc, DocWithSelectAllTrap, mergeTextNodes, isTextWrapper, isTextNode, toReact } from './nodes';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { Doc, DocWithSelectAllTrap, isTextNode, isTextWrapper, mergeTextNodes, toReact } from './nodes';
 import TextWrapperComponent from './nodes/text-wrapper';
-import { toReact as markToReact, isAnnotationMark } from './marks';
-import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
+import { isNestedHeaderLinksEnabled } from './utils/links';
 import { getColumnWidths } from '@atlaskit/editor-common/utils';
-import { getText } from '../utils';
+import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { insideBlockNode, insideBreakoutLayout, insideMultiBodiedExtension, insideTable } from './renderer-node';
+import { getText } from '../utils';
+import { isAnnotationMark, toReact as markToReact } from './marks';
 import { isCodeMark } from './marks/code';
-import { segmentText } from './utils/segment-text';
+import { insideBlockNode, insideBreakoutLayout, insideMultiBodiedExtension, insideTable } from './renderer-node';
 import { renderTextSegments } from './utils/render-text-segments';
+import { segmentText } from './utils/segment-text';
+import { getStandaloneBackgroundColorMarks } from './utils/getStandaloneBackgroundColorMarks';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce((acc, markOrNode) => {
     const prev = acc.length && acc[acc.length - 1] || null;
@@ -46,6 +47,7 @@ export default class ReactSerializer {
     _defineProperty(this, "allowCustomPanels", false);
     _defineProperty(this, "surroundTextNodesWithTextWrapper", false);
     _defineProperty(this, "allowAnnotations", false);
+    _defineProperty(this, "standaloneBackgroundColorMarks", []);
     _defineProperty(this, "serializeFragmentChild", (node, {
       index,
       parentInfo
@@ -280,6 +282,9 @@ export default class ReactSerializer {
   }) {
     const currentPath = parentInfo && parentInfo.path || [];
     const nodePosition = parentInfo && parentInfo.pos || 1;
+    if (expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true)) {
+      this.standaloneBackgroundColorMarks.push(...getStandaloneBackgroundColorMarks(content));
+    }
     return ReactSerializer.buildMarkStructure(content).map((mark, index) => {
       return this.serializeMark({
         mark,
@@ -311,7 +316,11 @@ export default class ReactSerializer {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const content = (mark.content || []).map(serializeContent);
       const markKey = `${mark.type.name}-component__${this.startPos}__${parentMark.path.length}`;
-      return this.renderMark(markToReact(mark), this.getMarkProps(mark, parentMark.path), markKey, content);
+      const isStandalone = expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) && this.standaloneBackgroundColorMarks.some(m => mark.eq(m));
+      return this.renderMark(markToReact(mark), {
+        ...this.getMarkProps(mark, parentMark.path),
+        isStandalone
+      }, markKey, content);
     }
     const startPos = this.startPos;
     const endPos = startPos + mark.nodeSize;

package/dist/es2019/react/marks/backgroundColor.js

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import { getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { useThemeObserver } from '@atlaskit/tokens';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export default function BackgroundColor(props) {
   const {
     colorMode
@@ -40,6 +41,22 @@ export default function BackgroundColor(props) {
   const style = useMemo(() => ({
     ['--custom-palette-color']: paletteColorValue
   }), [paletteColorValue]);
+  if (props.isStandalone && expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement("span", {
+      "data-block-mark": props.dataAttributes['data-block-mark'],
+      "data-renderer-mark": props.dataAttributes['data-renderer-mark'],
+      "data-background-custom-color": props.color
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "fabric-background-color-mark"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: style
+    }, /*#__PURE__*/React.createElement("span", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: "background-color-padding-left background-color-padding-right"
+    }, props.children));
+  }
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
     "data-background-custom-color": props.color
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -78,7 +78,9 @@ class HeadingAnchor extends React.PureComponent {
       } = this.props;
       return jsx("button", {
         "data-testid": "anchor-button",
-        css: copyAnchorButtonStyles,
+        css: copyAnchorButtonStyles
+        // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+        ,
         onMouseLeave: this.resetMessage,
         onClick: this.copyToClipboard,
         "aria-hidden": hideFromScreenReader,

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

@@ -126,6 +126,11 @@ const Expand = Loadable({
   '../../ui/Expand').then(mod => mod.default),
   loading: () => null
 });
+const SyncBlockLoader = Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_renderer-node_SyncBlock" */
+  './syncBlock').then(mod => mod.default),
+  loading: () => null
+});
 export const nodeToReact = {
   blockquote: Blockquote,
   bulletList: BulletList,
@@ -168,6 +173,7 @@ export const nodeToReact = {
   unsupportedBlock: UnsupportedBlock,
   unsupportedInline: UnsupportedInline,
   expand: Expand,
+  syncBlock: SyncBlockLoader,
   nestedExpand: Expand,
   embedCard: EmbedCard,
   blockTaskItem: TaskItem

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

@@ -0,0 +1,9 @@
+import React from 'react';
+// For sync block to work, we need to pass in a custom syncBlock renderer
+// However, we need define a basic component to render the sync block
+export default function SyncBlock(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-sync-block": true,
+    "data-local-id": props.localId
+  });
+}

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

@@ -124,7 +124,7 @@ const TableWrapper = ({
     ref: wrapperRef,
     onScroll: stickyHeaders ? onScroll : undefined
     // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0,
     role: "region",

package/dist/es2019/react/utils/getStandaloneBackgroundColorMarks.js

@@ -0,0 +1,68 @@
+import ReactSerializer from '..';
+/**
+ * Returns an array of **backgroundColor marks** that should be considered "standalone"
+ * for highlight padding purposes.
+ *
+ * Standalone backgroundColor marks are determined by scanning the content array and
+ * checking for backgroundColor marks that are separated by whitespace boundaries.
+ *
+ * @param content Array of ProseMirror nodes to scan for standalone backgroundColor marks.
+ * @returns Array of backgroundColor marks that are standalone.
+ */
+export const getStandaloneBackgroundColorMarks = content => {
+  const standaloneMarks = [];
+  // keep track of the previous node's state
+  let prev = {
+    selfSpaceOnTheRight: true // initial value to handle leading BackgroundColor
+  };
+  let prevNode = null;
+  // Iterates through each node in the content array.
+  // Tracks if the previous node had a backgroundColor mark and if it ended with a space.
+  // If a backgroundColor mark is followed by a text node that starts with a space,
+  // and the previous node ended with a space, the previous backgroundColor mark is considered standalone.
+  // At the end, flushes any remaining node that meets the standalone criteria.
+  for (let i = 0; i < content.length; i++) {
+    const node = content[i];
+    const nodeMarks = ReactSerializer.getMarks(node);
+    const isBackgroundColor = nodeMarks.some(m => m.type.name === 'backgroundColor');
+    let selfSpaceOnTheLeft = false;
+    let selfSpaceOnTheRight = false;
+    if (node.text) {
+      selfSpaceOnTheLeft = node.text.startsWith(' ');
+      selfSpaceOnTheRight = node.text.endsWith(' ');
+    }
+    if (isBackgroundColor) {
+      prevNode = node;
+      prev = {
+        selfSpaceOnTheRight: false,
+        hasBackgroundColor: true,
+        spaceToTheLeft: prev !== null && prev.selfSpaceOnTheRight
+      };
+    } else {
+      // If prev exists, check for standalone logic
+      if (prev && prev.hasBackgroundColor && prevNode) {
+        // If prev had space on the left and current is a TextNode and has space on the left
+        if (prev.spaceToTheLeft && selfSpaceOnTheLeft) {
+          const mark = ReactSerializer.getMarks(prevNode).find(m => m.type.name === 'backgroundColor');
+          if (mark) {
+            standaloneMarks.push(mark);
+          }
+        }
+      }
+      prevNode = null;
+      prev = {
+        selfSpaceOnTheRight,
+        hasBackgroundColor: false
+      };
+    }
+  }
+  if (prevNode) {
+    if (prev && prev.hasBackgroundColor && prev.spaceToTheLeft) {
+      const mark = ReactSerializer.getMarks(prevNode).find(m => m.type.name === 'backgroundColor');
+      if (mark) {
+        standaloneMarks.push(mark);
+      }
+    }
+  }
+  return standaloneMarks;
+};

package/dist/es2019/render-document.js

@@ -92,14 +92,8 @@ const _validation = (doc, schema, adfStage, useSpecBasedValidator, dispatchAnaly
   return result;
 };
 const memoValidation = memoizeOne(_validation, (newArgs, lastArgs) => {
-  const [newDoc, newSchema, newADFStage, newUseSpecValidator,
-
-    /* ignoring dispatchAnalyticsEvent */
-  , newSkipValidation, newValidationOverrides] = newArgs;
-  const [oldDoc, oldSchema, oldADFStage, oldUseSpecValidator,
-
-    /* ignoring dispatchAnalyticsEvent */
-  , oldSkipValidation, oldValidationOverrides] = lastArgs;
+  const [newDoc, newSchema, newADFStage, newUseSpecValidator,, /* ignoring dispatchAnalyticsEvent */newSkipValidation, newValidationOverrides] = newArgs;
+  const [oldDoc, oldSchema, oldADFStage, oldUseSpecValidator,, /* ignoring dispatchAnalyticsEvent */oldSkipValidation, oldValidationOverrides] = lastArgs;
   return areDocsEqual(newDoc, oldDoc) && newSchema === oldSchema && newADFStage === oldADFStage && newUseSpecValidator === oldUseSpecValidator && newSkipValidation === oldSkipValidation && newValidationOverrides === oldValidationOverrides;
 });
 

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

@@ -26,6 +26,7 @@ import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import { LightWeightCodeBlockCssClassName } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
 import { getBaseFontSize } from './get-base-font-size';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const wrappedMediaBreakoutPoint = 410;
 const TELEPOINTER_ID = 'ai-streaming-telepointer';
 const tableShadowWidth = 32;
@@ -876,6 +877,20 @@ const backgroundColorStyles = css({
     backgroundColor: 'unset'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const textHighlightPaddingStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.fabric-background-color-mark:has(.background-color-padding-left)': {
+    paddingLeft: "var(--ds-space-025, 2px)",
+    marginLeft: "var(--ds-space-negative-025, -2px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.fabric-background-color-mark:has(.background-color-padding-right)': {
+    paddingRight: "var(--ds-space-025, 2px)",
+    marginRight: "var(--ds-space-negative-025, -2px)"
+  }
+});
 const tasksAndDecisionsStyles = css({
   '.ProseMirror': {
     [`.taskItemView-content-wrap,
@@ -1906,7 +1921,9 @@ export const RendererStyleContainer = props => {
         '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
         '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop,
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -54,7 +54,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_WIDTH_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "124.0.3";
+const packageVersion = "0.0.0-development";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/index.js

@@ -9,21 +9,22 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 import React from 'react';
 import { MarkType } from '@atlaskit/editor-prosemirror/model';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isNestedHeaderLinksEnabled } from './utils/links';
-import { Doc, DocWithSelectAllTrap, mergeTextNodes, isTextWrapper, isTextNode, toReact } from './nodes';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { Doc, DocWithSelectAllTrap, isTextNode, isTextWrapper, mergeTextNodes, toReact } from './nodes';
 import TextWrapperComponent from './nodes/text-wrapper';
-import { toReact as markToReact, isAnnotationMark } from './marks';
-import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
+import { isNestedHeaderLinksEnabled } from './utils/links';
 import { getColumnWidths } from '@atlaskit/editor-common/utils';
-import { getText } from '../utils';
+import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { insideBlockNode, insideBreakoutLayout, insideMultiBodiedExtension, insideTable } from './renderer-node';
+import { getText } from '../utils';
+import { isAnnotationMark, toReact as markToReact } from './marks';
 import { isCodeMark } from './marks/code';
-import { segmentText } from './utils/segment-text';
+import { insideBlockNode, insideBreakoutLayout, insideMultiBodiedExtension, insideTable } from './renderer-node';
 import { renderTextSegments } from './utils/render-text-segments';
+import { segmentText } from './utils/segment-text';
+import { getStandaloneBackgroundColorMarks } from './utils/getStandaloneBackgroundColorMarks';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce(function (acc, markOrNode) {
     var prev = acc.length && acc[acc.length - 1] || null;
@@ -55,6 +56,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     _defineProperty(this, "allowCustomPanels", false);
     _defineProperty(this, "surroundTextNodesWithTextWrapper", false);
     _defineProperty(this, "allowAnnotations", false);
+    _defineProperty(this, "standaloneBackgroundColorMarks", []);
     _defineProperty(this, "serializeFragmentChild", function (node, _ref) {
       var index = _ref.index,
         parentInfo = _ref.parentInfo;
@@ -294,6 +296,10 @@ var ReactSerializer = /*#__PURE__*/function () {
         parentInfo = _ref2.parentInfo;
       var currentPath = parentInfo && parentInfo.path || [];
       var nodePosition = parentInfo && parentInfo.pos || 1;
+      if (expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true)) {
+        var _this$standaloneBackg;
+        (_this$standaloneBackg = this.standaloneBackgroundColorMarks).push.apply(_this$standaloneBackg, _toConsumableArray(getStandaloneBackgroundColorMarks(content)));
+      }
       return ReactSerializer.buildMarkStructure(content).map(function (mark, index) {
         return _this3.serializeMark({
           mark: mark,
@@ -329,7 +335,12 @@ var ReactSerializer = /*#__PURE__*/function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var content = (mark.content || []).map(serializeContent);
         var markKey = "".concat(mark.type.name, "-component__").concat(this.startPos, "__").concat(parentMark.path.length);
-        return this.renderMark(markToReact(mark), this.getMarkProps(mark, parentMark.path), markKey, content);
+        var isStandalone = expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) && this.standaloneBackgroundColorMarks.some(function (m) {
+          return mark.eq(m);
+        });
+        return this.renderMark(markToReact(mark), _objectSpread(_objectSpread({}, this.getMarkProps(mark, parentMark.path)), {}, {
+          isStandalone: isStandalone
+        }), markKey, content);
       }
       var startPos = this.startPos;
       var endPos = startPos + mark.nodeSize;

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

@@ -4,6 +4,7 @@ import React, { useMemo } from 'react';
 import { getDarkModeLCHColor } from '@atlaskit/adf-schema';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { useThemeObserver } from '@atlaskit/tokens';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export default function BackgroundColor(props) {
   var _useThemeObserver = useThemeObserver(),
     colorMode = _useThemeObserver.colorMode;
@@ -40,6 +41,22 @@ export default function BackgroundColor(props) {
   var style = useMemo(function () {
     return _defineProperty({}, '--custom-palette-color', paletteColorValue);
   }, [paletteColorValue]);
+  if (props.isStandalone && expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement("span", {
+      "data-block-mark": props.dataAttributes['data-block-mark'],
+      "data-renderer-mark": props.dataAttributes['data-renderer-mark'],
+      "data-background-custom-color": props.color
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "fabric-background-color-mark"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: style
+    }, /*#__PURE__*/React.createElement("span", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: "background-color-padding-left background-color-padding-right"
+    }, props.children));
+  }
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
     "data-background-custom-color": props.color
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -107,7 +107,9 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
         headingId = _this$props.headingId;
       return jsx("button", {
         "data-testid": "anchor-button",
-        css: copyAnchorButtonStyles,
+        css: copyAnchorButtonStyles
+        // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
+        ,
         onMouseLeave: _this.resetMessage,
         onClick: _this.copyToClipboard,
         "aria-hidden": hideFromScreenReader,

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

@@ -243,6 +243,17 @@ var Expand = Loadable({
     return null;
   }
 });
+var SyncBlockLoader = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_renderer-node_SyncBlock" */
+    './syncBlock').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
 export var nodeToReact = {
   blockquote: Blockquote,
   bulletList: BulletList,
@@ -285,6 +296,7 @@ export var nodeToReact = {
   unsupportedBlock: UnsupportedBlock,
   unsupportedInline: UnsupportedInline,
   expand: Expand,
+  syncBlock: SyncBlockLoader,
   nestedExpand: Expand,
   embedCard: EmbedCard,
   blockTaskItem: TaskItem

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

@@ -0,0 +1,9 @@
+import React from 'react';
+// For sync block to work, we need to pass in a custom syncBlock renderer
+// However, we need define a basic component to render the sync block
+export default function SyncBlock(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-sync-block": true,
+    "data-local-id": props.localId
+  });
+}

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

@@ -146,7 +146,7 @@ var TableWrapper = function TableWrapper(_ref2) {
     ref: wrapperRef,
     onScroll: stickyHeaders ? onScroll : undefined
     // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, @atlassian/a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0,
     role: "region",

package/dist/esm/react/utils/getStandaloneBackgroundColorMarks.js

@@ -0,0 +1,74 @@
+import ReactSerializer from '..';
+/**
+ * Returns an array of **backgroundColor marks** that should be considered "standalone"
+ * for highlight padding purposes.
+ *
+ * Standalone backgroundColor marks are determined by scanning the content array and
+ * checking for backgroundColor marks that are separated by whitespace boundaries.
+ *
+ * @param content Array of ProseMirror nodes to scan for standalone backgroundColor marks.
+ * @returns Array of backgroundColor marks that are standalone.
+ */
+export var getStandaloneBackgroundColorMarks = function getStandaloneBackgroundColorMarks(content) {
+  var standaloneMarks = [];
+  // keep track of the previous node's state
+  var prev = {
+    selfSpaceOnTheRight: true // initial value to handle leading BackgroundColor
+  };
+  var prevNode = null;
+  // Iterates through each node in the content array.
+  // Tracks if the previous node had a backgroundColor mark and if it ended with a space.
+  // If a backgroundColor mark is followed by a text node that starts with a space,
+  // and the previous node ended with a space, the previous backgroundColor mark is considered standalone.
+  // At the end, flushes any remaining node that meets the standalone criteria.
+  for (var i = 0; i < content.length; i++) {
+    var node = content[i];
+    var nodeMarks = ReactSerializer.getMarks(node);
+    var isBackgroundColor = nodeMarks.some(function (m) {
+      return m.type.name === 'backgroundColor';
+    });
+    var selfSpaceOnTheLeft = false;
+    var selfSpaceOnTheRight = false;
+    if (node.text) {
+      selfSpaceOnTheLeft = node.text.startsWith(' ');
+      selfSpaceOnTheRight = node.text.endsWith(' ');
+    }
+    if (isBackgroundColor) {
+      prevNode = node;
+      prev = {
+        selfSpaceOnTheRight: false,
+        hasBackgroundColor: true,
+        spaceToTheLeft: prev !== null && prev.selfSpaceOnTheRight
+      };
+    } else {
+      // If prev exists, check for standalone logic
+      if (prev && prev.hasBackgroundColor && prevNode) {
+        // If prev had space on the left and current is a TextNode and has space on the left
+        if (prev.spaceToTheLeft && selfSpaceOnTheLeft) {
+          var mark = ReactSerializer.getMarks(prevNode).find(function (m) {
+            return m.type.name === 'backgroundColor';
+          });
+          if (mark) {
+            standaloneMarks.push(mark);
+          }
+        }
+      }
+      prevNode = null;
+      prev = {
+        selfSpaceOnTheRight: selfSpaceOnTheRight,
+        hasBackgroundColor: false
+      };
+    }
+  }
+  if (prevNode) {
+    if (prev && prev.hasBackgroundColor && prev.spaceToTheLeft) {
+      var _mark = ReactSerializer.getMarks(prevNode).find(function (m) {
+        return m.type.name === 'backgroundColor';
+      });
+      if (_mark) {
+        standaloneMarks.push(_mark);
+      }
+    }
+  }
+  return standaloneMarks;
+};

package/dist/esm/render-document.js

@@ -96,14 +96,14 @@ var memoValidation = memoizeOne(_validation, function (newArgs, lastArgs) {
     newSchema = _newArgs[1],
     newADFStage = _newArgs[2],
     newUseSpecValidator = _newArgs[3],
-    newSkipValidation = _newArgs[5],
+    /* ignoring dispatchAnalyticsEvent */newSkipValidation = _newArgs[5],
     newValidationOverrides = _newArgs[6];
   var _lastArgs = _slicedToArray(lastArgs, 7),
     oldDoc = _lastArgs[0],
     oldSchema = _lastArgs[1],
     oldADFStage = _lastArgs[2],
     oldUseSpecValidator = _lastArgs[3],
-    oldSkipValidation = _lastArgs[5],
+    /* ignoring dispatchAnalyticsEvent */oldSkipValidation = _lastArgs[5],
     oldValidationOverrides = _lastArgs[6];
   return areDocsEqual(newDoc, oldDoc) && newSchema === oldSchema && newADFStage === oldADFStage && newUseSpecValidator === oldUseSpecValidator && newSkipValidation === oldSkipValidation && newValidationOverrides === oldValidationOverrides;
 });

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

@@ -28,6 +28,7 @@ import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import { LightWeightCodeBlockCssClassName } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
 import { getBaseFontSize } from './get-base-font-size';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var wrappedMediaBreakoutPoint = 410;
 var TELEPOINTER_ID = 'ai-streaming-telepointer';
 var tableShadowWidth = 32;
@@ -746,6 +747,20 @@ var backgroundColorStyles = css({
     backgroundColor: 'unset'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var textHighlightPaddingStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.fabric-background-color-mark:has(.background-color-padding-left)': {
+    paddingLeft: "var(--ds-space-025, 2px)",
+    marginLeft: "var(--ds-space-negative-025, -2px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '.fabric-background-color-mark:has(.background-color-padding-right)': {
+    paddingRight: "var(--ds-space-025, 2px)",
+    marginRight: "var(--ds-space-negative-025, -2px)"
+  }
+});
 var tasksAndDecisionsStyles = css({
   '.ProseMirror': _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".taskItemView-content-wrap,\n\t\t.".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
     position: 'relative',
@@ -1498,7 +1513,9 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
         '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop,
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, fg('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -59,7 +59,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.0.3";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -1,16 +1,16 @@
-import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
 import { type GetPMNodeHeight } from '@atlaskit/editor-common/extensibility';
-import type { Serializer } from '../serializer';
-import type { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps, NodeComponentsProps } from '../ui/Renderer/types';
+import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
 import type { AnalyticsEventPayload } from '../analytics/events';
+import type { Serializer } from '../serializer';
+import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance, StickyHeaderConfig } from '../ui/Renderer/types';
 import type { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import type { RendererContext, TextHighlighter, ExtensionViewportSize } from './types';
+import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
 import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
-import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import type { ExtensionViewportSize, RendererContext, TextHighlighter } from './types';
 export interface ReactSerializerInit {
     allowAltTextOnImages?: boolean;
     allowAnnotations?: boolean;
@@ -107,6 +107,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private allowTableResizing?;
     private isPresentational?;
     private disableTableOverflowShadow?;
+    private standaloneBackgroundColorMarks;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;

package/dist/types/react/nodes/syncBlock.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export default function SyncBlock(props: React.PropsWithChildren<{
+    content?: PMNode[];
+    localId?: string;
+}>): React.JSX.Element;

package/dist/types/react/utils/getStandaloneBackgroundColorMarks.d.ts

@@ -0,0 +1,12 @@
+import type { Mark, Node } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Returns an array of **backgroundColor marks** that should be considered "standalone"
+ * for highlight padding purposes.
+ *
+ * Standalone backgroundColor marks are determined by scanning the content array and
+ * checking for backgroundColor marks that are separated by whitespace boundaries.
+ *
+ * @param content Array of ProseMirror nodes to scan for standalone backgroundColor marks.
+ * @returns Array of backgroundColor marks that are standalone.
+ */
+export declare const getStandaloneBackgroundColorMarks: (content: Node[]) => Mark[];

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

@@ -4,6 +4,7 @@
  */
 import { jsx } from '@emotion/react';
 import { type RendererWrapperProps } from './index';
+export declare const textHighlightPaddingStyles: import("@emotion/react").SerializedStyles;
 type RendererStyleContainerProps = Pick<RendererWrapperProps, 'onClick' | 'onMouseDown' | 'appearance' | 'contentMode' | 'allowNestedHeaderLinks' | 'allowColumnSorting' | 'useBlockRenderForCodeBlock' | 'allowAnnotations' | 'allowTableResizing' | 'innerRef' | 'children' | 'allowRendererContainerStyles'> & {
     testId?: string;
 };

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

@@ -1,16 +1,16 @@
-import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
 import { type GetPMNodeHeight } from '@atlaskit/editor-common/extensibility';
-import type { Serializer } from '../serializer';
-import type { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps, NodeComponentsProps } from '../ui/Renderer/types';
+import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
 import type { AnalyticsEventPayload } from '../analytics/events';
+import type { Serializer } from '../serializer';
+import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance, StickyHeaderConfig } from '../ui/Renderer/types';
 import type { TextWrapper } from './nodes';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import type { RendererContext, TextHighlighter, ExtensionViewportSize } from './types';
+import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
 import type { MediaOptions } from '../types/mediaOptions';
 import type { SmartLinksOptions } from '../types/smartLinksOptions';
-import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import type { ExtensionViewportSize, RendererContext, TextHighlighter } from './types';
 export interface ReactSerializerInit {
     allowAltTextOnImages?: boolean;
     allowAnnotations?: boolean;
@@ -107,6 +107,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private allowTableResizing?;
     private isPresentational?;
     private disableTableOverflowShadow?;
+    private standaloneBackgroundColorMarks;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;

package/dist/types-ts4.5/react/nodes/syncBlock.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export default function SyncBlock(props: React.PropsWithChildren<{
+    content?: PMNode[];
+    localId?: string;
+}>): React.JSX.Element;

package/dist/types-ts4.5/react/utils/getStandaloneBackgroundColorMarks.d.ts

@@ -0,0 +1,12 @@
+import type { Mark, Node } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Returns an array of **backgroundColor marks** that should be considered "standalone"
+ * for highlight padding purposes.
+ *
+ * Standalone backgroundColor marks are determined by scanning the content array and
+ * checking for backgroundColor marks that are separated by whitespace boundaries.
+ *
+ * @param content Array of ProseMirror nodes to scan for standalone backgroundColor marks.
+ * @returns Array of backgroundColor marks that are standalone.
+ */
+export declare const getStandaloneBackgroundColorMarks: (content: Node[]) => Mark[];

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

@@ -4,6 +4,7 @@
  */
 import { jsx } from '@emotion/react';
 import { type RendererWrapperProps } from './index';
+export declare const textHighlightPaddingStyles: import("@emotion/react").SerializedStyles;
 type RendererStyleContainerProps = Pick<RendererWrapperProps, 'onClick' | 'onMouseDown' | 'appearance' | 'contentMode' | 'allowNestedHeaderLinks' | 'allowColumnSorting' | 'useBlockRenderForCodeBlock' | 'allowAnnotations' | 'allowTableResizing' | 'innerRef' | 'children' | 'allowRendererContainerStyles'> & {
     testId?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.0.4",
+	"version": "124.1.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -56,7 +56,7 @@
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.32.0",
+		"@atlaskit/tmp-editor-statsig": "^12.33.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -70,7 +70,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.3.0",
+		"@atlaskit/editor-common": "^110.4.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -246,6 +246,9 @@
 		},
 		"jfp-magma-ssr-iv-editor-links": {
 			"type": "boolean"
+		},
+		"platform_editor_text_highlight_padding": {
+			"type": "boolean"
 		}
 	}
 }