@atlaskit/editor-plugin-show-diff 24.1.3 → 24.1.6

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 24.1.6
+
+### Patch Changes
+
+- [`143a5760293cf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/143a5760293cf) -
+  EDITOR-9591 Preserve the agent-coloured emoji diff outline after emoji data loads
+- [`2a0c61ea46c19`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2a0c61ea46c19) -
+  Apply scroll margins to existing block diff decorations without contributor anchors and use
+  styling-only decorations for otherwise unstyled nodes, preserving diff navigation and
+  contributor-tag grouping. Enabled behind platform_editor_ai_show_diff_patch_2 and
+  platform_editor_ai_show_diff_patch_1.
+- Updated dependencies
+
+## 24.1.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 24.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.1.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/NodeViewSerializer.js

@@ -47,14 +47,6 @@ function isEditorViewWithNodeViews(view) {
 /** Expand-family nodes whose expanded state lives in a node-keyed WeakMap. */
 var EXPAND_TYPES = new Set(['expand', 'nestedExpand']);
 
-/** Merges an inline style string onto an element's existing `style` attribute. */
-var appendInlineStyle = function appendInlineStyle(element, style) {
-  var _element$getAttribute;
-  var currentStyle = (_element$getAttribute = element.getAttribute('style')) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : '';
-  var separator = currentStyle && style && !currentStyle.trimEnd().endsWith(';') ? '; ' : '';
-  element.setAttribute('style', "".concat(currentStyle).concat(separator).concat(style));
-};
-
 /** Tables are the only node views that read and write positions, so only they need a preview. */
 var containsTable = function containsTable(node) {
   var table = node.type.schema.nodes.table;
@@ -121,15 +113,15 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
           // Give inserted atomic children the same box-shadow
           // highlight an in-place attribute change already gets (`getAtomicInlineChangedAttrs`).
           if (isInserted && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_deleted_nodeview_content') && (0, _getAttrChangeRanges.isInlineAttrChangeNodeName)(child.type.name) && childNode instanceof HTMLElement) {
-            var _childNode$getAttribu;
             var _getAtomicInlineChang = (0, _createInlineChangedDecoration.getAtomicInlineChangedAttrs)(child.type.name, colorScheme),
               className = _getAtomicInlineChang.className,
               styleSuffix = _getAtomicInlineChang.styleSuffix;
-            var existingClassName = (_childNode$getAttribu = childNode.getAttribute('class')) !== null && _childNode$getAttribu !== void 0 ? _childNode$getAttribu : '';
-            childNode.setAttribute('class', existingClassName ? "".concat(existingClassName, " ").concat(className) : className);
-            if (styleSuffix) {
-              appendInlineStyle(childNode, styleSuffix);
-            }
+            // create wrapper to add the diff styles to to avoid conflicting with any nodeView styles
+            var wrapper = document.createElement('span');
+            wrapper.className = className;
+            wrapper.setAttribute('style', styleSuffix);
+            wrapper.append(childNode);
+            childNode = wrapper;
           }
           contentDOM === null || contentDOM === void 0 || contentDOM.append(childNode);
         }

package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js

@@ -76,7 +76,7 @@ exports.getDeletedInlineRevealColors = getDeletedInlineRevealColors;
 exports.getInsertedInlineRevealColors = getInsertedInlineRevealColors;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _agentBrandColorSchemes = require("@atlaskit/agent-color/agent-brand-color-schemes");
-var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _cssHelper = require("@atlaskit/editor-common/css-helper");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _getStandardDeletedTextDecorationStyle = require("./getStandardDeletedTextDecorationStyle");
 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; }
@@ -272,7 +272,7 @@ function insertedInlineBorderColor(colors) {
 /** Inline inserted content — default state. */
 function buildInsertStyle(colors) {
   var brand = getBrand(colors.insertColor);
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
     background: bgSubtlest(colors.insertColor)
   }, brand ? {
     color: brand.text
@@ -286,7 +286,7 @@ function buildInsertStyle(colors) {
 
 /** Inline insert style for content within a block node (no background, underline only). */
 function buildInsertStyleInBlock(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     textDecoration: 'underline',
     textDecorationStyle: colors.insertUnderlineStyle,
     textDecorationThickness: "var(--ds-space-025, 2px)",
@@ -297,7 +297,7 @@ function buildInsertStyleInBlock(colors) {
 /** Extended insert style — background + border-bottom underline. */
 function buildInsertStyleExtended(colors) {
   var brand = getBrand(colors.insertColor);
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
     background: bgSubtlest(colors.insertColor)
   }, brand ? {
     color: brand.text
@@ -309,7 +309,7 @@ function buildInsertStyleExtended(colors) {
 
 /** Extended insert style for content within a block node (border-bottom only, no background). */
 function buildInsertStyleInBlockExtended(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     borderBottom: "2px solid ".concat(insertedInlineBorderColor(colors)),
     padding: "1px 0 2px"
   });
@@ -318,7 +318,7 @@ function buildInsertStyleInBlockExtended(colors) {
 /** Active state of the extended insert style. */
 function buildInsertStyleExtendedActive(colors) {
   var brand = getBrand(colors.insertColor);
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
     background: bgSubtlerPressed(colors.insertActiveColor)
   }, brand ? {
     color: brand.text
@@ -331,7 +331,7 @@ function buildInsertStyleExtendedActive(colors) {
 /** Extended insert style without underline — background + padding only. */
 function buildInsertStyleExtendedNoUnderline(colors) {
   var brand = getBrand(colors.insertColor);
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
     background: bgSubtlest(colors.insertColor)
   }, brand ? {
     color: brand.text
@@ -343,7 +343,7 @@ function buildInsertStyleExtendedNoUnderline(colors) {
 /** Active state of the no-underline extended insert style. */
 function buildInsertStyleExtendedNoUnderlineActive(colors) {
   var brand = getBrand(colors.insertColor);
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
     background: bgSubtlerPressed(colors.insertActiveColor)
   }, brand ? {
     color: brand.text
@@ -354,7 +354,7 @@ function buildInsertStyleExtendedNoUnderlineActive(colors) {
 
 /** No-underline extended insert style for block content (padding only). */
 function buildInsertStyleInBlockExtendedNoUnderline(_colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     padding: "1px 0 2px"
   });
 }
@@ -362,7 +362,7 @@ function buildInsertStyleInBlockExtendedNoUnderline(_colors) {
 /** Inline inserted content — active/focused state. */
 function buildInsertStyleActive(colors) {
   var brand = getBrand(colors.insertColor);
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
     background: bgSubtlerPressed(colors.insertActiveColor)
   }, brand ? {
     color: brand.text
@@ -397,7 +397,7 @@ function deletedInlineStyleActiveBase(colors) {
 
 /** Strikethrough for removed inline / widget content (non-marker decorations). */
 function buildDeletedInlineStyle(colors, isActive) {
-  return isActive ? (0, _lazyNodeView.convertToInlineCss)(deletedInlineStyleActiveBase(colors)) : (0, _lazyNodeView.convertToInlineCss)(deletedInlineStyleBase(colors));
+  return isActive ? (0, _cssHelper.convertToInlineCss)(deletedInlineStyleActiveBase(colors)) : (0, _cssHelper.convertToInlineCss)(deletedInlineStyleBase(colors));
 }
 
 /**
@@ -414,7 +414,7 @@ function buildDeletedStrikeLineBorder(colors, isActive) {
 
 /** Geometry shared by every strikethrough line, so only the border ever differs. */
 var deletedStrikeLine = function deletedStrikeLine(border) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     position: 'absolute',
     top: '50%',
     width: '100%',
@@ -427,7 +427,7 @@ var deletedStrikeLine = function deletedStrikeLine(border) {
 
 /** Strikethrough line (unbounded span) for deleted content — default state. */
 function buildDeletedContentStyleUnbounded(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     position: 'absolute',
     top: '50%',
     width: '100%',
@@ -440,7 +440,7 @@ function buildDeletedContentStyleUnbounded(colors) {
 
 /** Strikethrough line (unbounded span) for deleted content — active state. */
 function buildDeletedContentStyleUnboundedActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     position: 'absolute',
     top: '50%',
     width: '100%',
@@ -456,7 +456,7 @@ function buildDeletedContentStyleUnboundedActive(colors) {
 /** Unbounded strikethrough overlay for deleted inline content (absolute positioned line). */
 function buildDeletedInlineStyleUnbounded(colors) {
   var _colors$deleteTextCol3;
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     position: 'absolute',
     top: '50%',
     width: '100%',
@@ -469,7 +469,7 @@ function buildDeletedInlineStyleUnbounded(colors) {
 
 /** Deleted lozenge-style quote node with box-shadow ring. */
 function buildDeletedStyleQuoteNodeWithLozenge(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     marginTop: "var(--ds-space-150, 12px)",
     paddingTop: "var(--ds-space-025, 2px)",
     paddingBottom: "var(--ds-space-025, 2px)",
@@ -481,7 +481,7 @@ function buildDeletedStyleQuoteNodeWithLozenge(colors) {
 
 /** Active state of the deleted lozenge-style quote node — stronger ring. */
 function buildDeletedStyleQuoteNodeWithLozengeActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     marginTop: "var(--ds-space-150, 12px)",
     paddingTop: "var(--ds-space-025, 2px)",
     paddingBottom: "var(--ds-space-025, 2px)",
@@ -492,11 +492,11 @@ function buildDeletedStyleQuoteNodeWithLozengeActive(colors) {
 }
 function buildDeletedStyleQuoteNode(colors) {
   if (colors.deletedQuoteNodeShape === 'borderLeft') {
-    return (0, _lazyNodeView.convertToInlineCss)({
+    return (0, _cssHelper.convertToInlineCss)({
       borderLeft: "2px solid ".concat(borderAccent(colors.deleteColor))
     });
   }
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     marginTop: "var(--ds-space-150, 12px)",
     paddingTop: "var(--ds-space-025, 2px)",
     paddingBottom: "var(--ds-space-025, 2px)",
@@ -508,7 +508,7 @@ function buildDeletedStyleQuoteNode(colors) {
 
 /** Quote node outline for deleted content — active state. */
 function buildDeletedStyleQuoteNodeActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     marginTop: "var(--ds-space-150, 12px)",
     paddingTop: "var(--ds-space-025, 2px)",
     paddingBottom: "var(--ds-space-025, 2px)",
@@ -522,7 +522,7 @@ function buildDeletedStyleQuoteNodeActive(colors) {
 
 /** Generic block node outline for deleted content — default state (small radius). */
 function buildDeletedBlockOutline(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 1px ".concat(borderAccent(colors.deleteColor)),
     borderRadius: "var(--ds-radius-small, 4px)"
   });
@@ -530,7 +530,7 @@ function buildDeletedBlockOutline(colors) {
 
 /** Generic block node outline for deleted content — active state (small radius). */
 function buildDeletedBlockOutlineActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 4px ".concat(deletedBlockOutlineActiveRing(colors)),
     borderRadius: "var(--ds-radius-small, 4px)"
   });
@@ -538,7 +538,7 @@ function buildDeletedBlockOutlineActive(colors) {
 
 /** Generic block node outline for deleted content — default state (rounded/xsmall+1px radius). */
 function buildDeletedBlockOutlineRounded(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 1px ".concat(borderAccent(colors.deleteColor)),
     borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
   });
@@ -546,7 +546,7 @@ function buildDeletedBlockOutlineRounded(colors) {
 
 /** Generic block node outline for deleted content — active state (rounded/xsmall+1px radius). */
 function buildDeletedBlockOutlineRoundedActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 4px ".concat(deletedBlockOutlineActiveRing(colors)),
     borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
   });
@@ -554,7 +554,7 @@ function buildDeletedBlockOutlineRoundedActive(colors) {
 
 /** Scroll-navigation "new" emphasis: 4px ring — default state (small radius). */
 function buildDeletedBlockOutlineNew(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 4px ".concat(bgSubtlest(colors.deleteColor)),
     borderRadius: "var(--ds-radius-small, 4px)"
   });
@@ -562,7 +562,7 @@ function buildDeletedBlockOutlineNew(colors) {
 
 /** Scroll-navigation "new" emphasis: 4px ring — default state (rounded radius). */
 function buildDeletedBlockOutlineRoundedNew(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 4px ".concat(bgSubtlest(colors.deleteColor)),
     borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
   });
@@ -574,12 +574,12 @@ function buildDeletedBlockOutlineRoundedNew(colors) {
 function buildDeletedRowStyle(colors) {
   var _colors$deleteTextCol4;
   // Each branch emits exactly the CSS the pre-factory shim did for its scheme.
-  return colors.deletedRowTreatment === 'textTint' ? (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+  return colors.deletedRowTreatment === 'textTint' ? (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
     color: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor)
   }, (0, _getStandardDeletedTextDecorationStyle.getStandardDeletedTextDecorationStyle)()), {}, {
     opacity: 0.6,
     display: 'table-row'
-  })) : (0, _lazyNodeView.convertToInlineCss)({
+  })) : (0, _cssHelper.convertToInlineCss)({
     textDecorationColor: borderAccent(colors.deleteColor),
     textDecoration: 'line-through',
     opacity: 0.6,
@@ -591,35 +591,35 @@ function buildDeletedRowStyle(colors) {
 
 /** Quote node (blockquote) left-border style for inserted content — default state. */
 function buildInsertStyleQuoteNode(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     borderLeft: "2px solid ".concat(borderAccent(colors.insertColor))
   });
 }
 
 /** Quote node left-border style for inserted content — "new" scroll-nav state. */
 function buildInsertStyleQuoteNodeNew(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     borderLeft: "4px solid ".concat(bgSubtlest(colors.insertColor))
   });
 }
 
 /** Quote node left-border style for inserted content — active state. */
 function buildInsertStyleQuoteNodeActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     borderLeft: "4px solid ".concat(bgSubtlerPressed(colors.insertActiveColor))
   });
 }
 
 /** Horizontal rule style for inserted content — default state. */
 function buildInsertStyleRuleNode(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     backgroundColor: borderAccent(colors.insertColor)
   });
 }
 
 /** Horizontal rule style for inserted content — "new" scroll-nav state. */
 function buildInsertStyleRuleNodeNew(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     backgroundColor: bgSubtlest(colors.insertColor),
     border: 'none',
     height: '4px',
@@ -629,7 +629,7 @@ function buildInsertStyleRuleNodeNew(colors) {
 
 /** Horizontal rule style for inserted content — active state. */
 function buildInsertStyleRuleNodeActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     backgroundColor: bgSubtlerPressed(colors.insertActiveColor),
     border: 'none',
     height: '4px',
@@ -639,7 +639,7 @@ function buildInsertStyleRuleNodeActive(colors) {
 
 /** Generic node outline for inserted content — default state (small radius). */
 function buildInsertStyleNode(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 1px ".concat(borderAccent(colors.insertColor)),
     borderRadius: "var(--ds-radius-small, 4px)"
   });
@@ -647,7 +647,7 @@ function buildInsertStyleNode(colors) {
 
 /** Generic node outline for inserted content — "new" scroll-nav state (small radius). */
 function buildInsertStyleNodeNew(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 4px ".concat(bgSubtlest(colors.insertColor)),
     borderRadius: "var(--ds-radius-small, 4px)"
   });
@@ -655,7 +655,7 @@ function buildInsertStyleNodeNew(colors) {
 
 /** Generic node outline for inserted content — active state (small radius). */
 function buildInsertStyleNodeActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 4px ".concat(bgSubtlerPressed(colors.insertActiveColor)),
     borderRadius: "var(--ds-radius-small, 4px)"
   });
@@ -663,7 +663,7 @@ function buildInsertStyleNodeActive(colors) {
 
 /** Card block node outline for inserted content — default state (medium radius). */
 function buildInsertStyleCardBlockNode(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 1px ".concat(borderAccent(colors.insertColor)),
     borderRadius: "var(--ds-radius-medium, 6px)"
   });
@@ -671,7 +671,7 @@ function buildInsertStyleCardBlockNode(colors) {
 
 /** Card block node outline for inserted content — "new" scroll-nav state (medium radius). */
 function buildInsertStyleCardBlockNodeNew(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 4px ".concat(bgSubtlest(colors.insertColor)),
     borderRadius: "var(--ds-radius-medium, 6px)"
   });
@@ -679,7 +679,7 @@ function buildInsertStyleCardBlockNodeNew(colors) {
 
 /** Card block node outline for inserted content — active state (medium radius). */
 function buildInsertStyleCardBlockNodeActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     boxShadow: "0 0 0 4px ".concat(bgSubtlerPressed(colors.insertActiveColor)),
     borderRadius: "var(--ds-radius-medium, 6px)"
   });
@@ -693,7 +693,7 @@ function buildInsertStyleCardBlockNodeActive(colors) {
 
 /** CSS variables for an inserted node decoration marker — default state. */
 function buildDecorationMarkerVariable(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     '--diff-decoration-marker-color': borderAccent(colors.insertColor),
     '--diff-decoration-marker-ring-width': '1px'
   });
@@ -701,7 +701,7 @@ function buildDecorationMarkerVariable(colors) {
 
 /** CSS variables for an inserted node decoration marker — "new" scroll-nav state. */
 function buildDecorationMarkerVariableNew(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     '--diff-decoration-marker-color': bgSubtlest(colors.insertColor),
     '--diff-decoration-marker-ring-width': '4px'
   });
@@ -709,7 +709,7 @@ function buildDecorationMarkerVariableNew(colors) {
 
 /** CSS variables for an inserted node decoration marker — active state. */
 function buildDecorationMarkerVariableActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     '--diff-decoration-marker-color': bgSubtlerPressed(colors.insertActiveColor),
     '--diff-decoration-marker-ring-width': '4px'
   });
@@ -717,7 +717,7 @@ function buildDecorationMarkerVariableActive(colors) {
 
 /** Deleted node decoration marker (extension / embedCard / listItem) — default state. */
 function buildDeletedDecorationMarkerVariable(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedInlineStyleBase(colors)), {}, {
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedInlineStyleBase(colors)), {}, {
     '--diff-decoration-marker-color': borderAccent(colors.deleteColor),
     '--diff-decoration-marker-ring-width': '1px'
   }));
@@ -725,7 +725,7 @@ function buildDeletedDecorationMarkerVariable(colors) {
 
 /** Opacity only, no position or strikethrough. Used by 'static' schemes. */
 function buildDeletedDecorationMarkerVariableSimple(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     opacity: 0.8,
     '--diff-decoration-marker-color': borderAccent(colors.deleteColor),
     '--diff-decoration-marker-ring-width': '1px'
@@ -743,7 +743,7 @@ function buildDeletedInlineContentStyleExtended(colors) {
   // Resting 'onEmphasis' paints nothing; the highlight arrives when the hover variables are set. The
   // active state takes the literal branch below, so hover cannot disturb it.
   if (colors.deletedInlineHighlight === 'onEmphasis' && !isActive) {
-    return (0, _lazyNodeView.convertToInlineCss)({
+    return (0, _cssHelper.convertToInlineCss)({
       backgroundColor: "var(".concat(DELETED_HIGHLIGHT_BG_VAR, ", transparent)"),
       // Reserved while transparent, so the highlight arriving does not shift the text.
       borderBottom: "2px solid var(".concat(DELETED_HIGHLIGHT_BORDER_VAR, ", transparent)"),
@@ -756,7 +756,7 @@ function buildDeletedInlineContentStyleExtended(colors) {
   var isUnderlineEmphasis = isActive && usesUnderlineEmphasis(colors);
   var backgroundColor = isActive && !isUnderlineEmphasis && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : deletedBackground(colors.deleteColor);
   var borderColor = isUnderlineEmphasis ? borderAccent(colors.deleteActiveColor) : colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor);
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     backgroundColor: backgroundColor,
     borderBottom: "2px solid ".concat(borderColor),
     padding: "1px 0 2px"
@@ -782,7 +782,7 @@ function buildDeletedInlineStyleStandard(colors, state) {
   var _colors$deleteTextCol6;
   if (state === 'active') {
     var _colors$deleteTextCol5;
-    return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+    return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
       color: colors.deleteTextColor ? textAccent(colors.deleteTextColor) : "var(--ds-text, #292A2E)"
     }, (0, _getStandardDeletedTextDecorationStyle.getStandardDeletedTextDecorationStyle)()), {}, {
       textDecorationColor: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
@@ -790,7 +790,7 @@ function buildDeletedInlineStyleStandard(colors, state) {
       opacity: deletedGlyphOpacity(colors, state)
     }));
   }
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
     color: textAccent((_colors$deleteTextCol6 = colors.deleteTextColor) !== null && _colors$deleteTextCol6 !== void 0 ? _colors$deleteTextCol6 : colors.deleteColor)
   }, (0, _getStandardDeletedTextDecorationStyle.getStandardDeletedTextDecorationStyle)()), {}, {
     position: 'relative',
@@ -800,7 +800,7 @@ function buildDeletedInlineStyleStandard(colors, state) {
 
 /** Deleted node decoration marker — "new" state. */
 function buildDeletedDecorationMarkerVariableNew(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedInlineStyleBase(colors)), {}, {
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedInlineStyleBase(colors)), {}, {
     '--diff-decoration-marker-color': bgSubtlest(colors.deleteColor),
     '--diff-decoration-marker-ring-width': '4px'
   }));
@@ -808,7 +808,7 @@ function buildDeletedDecorationMarkerVariableNew(colors) {
 
 /** Deleted node decoration marker — active state. */
 function buildDeletedDecorationMarkerVariableActive(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedInlineStyleActiveBase(colors)), {}, {
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedInlineStyleActiveBase(colors)), {}, {
     '--diff-decoration-marker-color': bgSubtlerPressed(colors.deleteActiveColor),
     '--diff-decoration-marker-ring-width': '4px'
   }));
@@ -818,7 +818,7 @@ function buildDeletedDecorationMarkerVariableActive(colors) {
 
 /** Cell overlay for added table cells — default state (zIndex 1). */
 function buildAddedCellOverlayStyle(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     position: 'absolute',
     top: 0,
     left: 0,
@@ -833,7 +833,7 @@ function buildAddedCellOverlayStyle(colors) {
 
 /** Cell overlay for added table cells — rounded variant (zIndex 2, inherits border/radius). */
 function buildAddedCellOverlayRoundedStyle(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
     position: 'absolute',
     top: 0,
     left: 0,
@@ -852,7 +852,7 @@ function buildAddedCellOverlayRoundedStyle(colors) {
 
 /** Cell overlay for added table cells — "new" scroll-nav state. */
 function buildAddedCellOverlayStyleNew(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     position: 'absolute',
     top: 0,
     left: 0,
@@ -867,7 +867,7 @@ function buildAddedCellOverlayStyleNew(colors) {
 
 /** Cell overlay for deleted table cells — default state (zIndex 1). Uses deletedCellColor. */
 function buildDeletedCellOverlayStyle(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     position: 'absolute',
     top: 0,
     left: 0,
@@ -882,7 +882,7 @@ function buildDeletedCellOverlayStyle(colors) {
 
 /** Cell overlay for deleted table cells — rounded variant (zIndex 2, inherits border/radius). */
 function buildDeletedCellOverlayRoundedStyle(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     position: 'absolute',
     top: 0,
     left: 0,
@@ -1032,7 +1032,7 @@ function deletedLozengeTextColor(colors) {
 
 /** The "REMOVED" lozenge on a deleted block node — resting state, tinted with deletedLozengeColor. */
 function buildDeletedLozengeStyle(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
     color: deletedLozengeTextColor(colors),
     backgroundColor: bgSubtler(colors.deletedLozengeColor)
   }));
@@ -1040,7 +1040,7 @@ function buildDeletedLozengeStyle(colors) {
 
 /** The "REMOVED" lozenge — active state, tinted with the scheme's deleteActiveColor. */
 function buildDeletedLozengeActiveStyle(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
     color: deletedLozengeTextColor(colors),
     backgroundColor: bgSubtlerPressed(colors.deleteActiveColor)
   }));
@@ -1166,14 +1166,14 @@ function buildDeletedWrappedBlockOutline(colors, _ref) {
  * inline it beats the stylesheet's fallback, making the plugin the only source of the colour.
  */
 function buildAtomicInlineChangedCSSVariables(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)({
     '--show-diff-atomic-inline-changed-border-color': borderAccent(colors.insertColor)
   });
 }
 
 /** Hands editor-core the same strike line the widget path uses, via a custom property. */
 function buildDeletedInlineNodeCSSVariables(colors, isActive) {
-  return (0, _lazyNodeView.convertToInlineCss)((0, _defineProperty2.default)({}, DELETED_INLINE_NODE_STRIKE_VAR, buildDeletedStrikeLineBorder(colors, isActive)));
+  return (0, _cssHelper.convertToInlineCss)((0, _defineProperty2.default)({}, DELETED_INLINE_NODE_STRIKE_VAR, buildDeletedStrikeLineBorder(colors, isActive)));
 }
 
 /**
@@ -1199,7 +1199,7 @@ function buildDeletedInlineNodeCSSVariables(colors, isActive) {
  * its values from the per-scheme selectors in editor-core instead.
  */
 function buildDeletedNodeCSSVariables(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)(_objectSpread({
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread({
     '--diff-delete-color': borderAccent(colors.deleteColor),
     '--diff-delete-color-new': bgSubtlest(colors.deleteColor),
     '--diff-delete-color-active': bgSubtlerPressed(colors.deleteActiveColor),