@atlaskit/editor-plugin-show-diff 16.0.5 → 16.0.6

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 16.0.6
+
+### Patch Changes
+
+- [`9e68346721d6d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e68346721d6d) -
+  Show deleted text in the contributor's colour, strikethrough included, and hold its background
+  highlight back until the change is active or hovered. When it arrives, the highlight is a light
+  tint under a darker contributor-hue underline — the same treatment hovered and active, rather than
+  deepening the background when active.
+- Updated dependencies
+
 ## 16.0.5
 
 ### Patch Changes

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

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DELETED_HIGHLIGHT_BORDER_VAR = exports.DELETED_HIGHLIGHT_BG_VAR = void 0;
 exports.buildAddedCellOverlayRoundedStyle = buildAddedCellOverlayRoundedStyle;
 exports.buildAddedCellOverlayStyle = buildAddedCellOverlayStyle;
 exports.buildAddedCellOverlayStyleNew = buildAddedCellOverlayStyleNew;
@@ -66,6 +67,8 @@ exports.buildInsertStyleRuleNodeNew = buildInsertStyleRuleNodeNew;
 exports.buildInsertedBlockNodeStyle = buildInsertedBlockNodeStyle;
 exports.buildInsertedInlineStyle = buildInsertedInlineStyle;
 exports.getAccentTokens = getAccentTokens;
+exports.getDeletedHighlightHoverBorderColor = getDeletedHighlightHoverBorderColor;
+exports.getDeletedHighlightHoverColor = getDeletedHighlightHoverColor;
 exports.getDeletedInlineRevealColors = getDeletedInlineRevealColors;
 exports.getInsertedInlineRevealColors = getInsertedInlineRevealColors;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -73,6 +76,21 @@ var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 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; }
 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; }
+/**
+ * Hover highlight for deleted text under an 'onEmphasis' scheme. Inline styles cannot express
+ * `:hover`, so the resting style resolves its background from this property and
+ * `ContributorTagController` sets it while the change is hovered. Custom properties inherit, so
+ * setting it on the element carrying `data-diff-id` also reaches the inner wrappers a
+ * deleted-content widget paints its background on.
+ */
+var DELETED_HIGHLIGHT_BG_VAR = exports.DELETED_HIGHLIGHT_BG_VAR = '--show-diff-deleted-highlight-bg';
+
+/**
+ * Bottom border of that same hover highlight, kept separate from `DELETED_HIGHLIGHT_BG_VAR` so an
+ * 'underline' scheme can darken the border without darkening the tint behind it.
+ */
+var DELETED_HIGHLIGHT_BORDER_VAR = exports.DELETED_HIGHLIGHT_BORDER_VAR = '--show-diff-deleted-highlight-border';
+
 // token() is a build-time transform needing static literals, so pre-compute every colour's
 // tokens here and index by name at runtime.
 
@@ -639,20 +657,52 @@ function buildDeletedDecorationMarkerVariableSimple(colors) {
   });
 }
 
-/**
- * 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
- * default, 0.83 "new", 1 active.
- */
+/** Whether the emphasised state is stated in the bottom border rather than a deeper highlight. */
+function usesUnderlineEmphasis(colors) {
+  return colors.deletedInlineActiveEmphasis === 'underline';
+}
+
 /** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
 function buildDeletedInlineContentStyleExtended(colors) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var backgroundColor = isActive && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
+  // 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)({
+      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)"),
+      padding: "1px 0 2px"
+    });
+  }
+
+  // Under 'underline' emphasis the highlight stays on its resting tint — the same one hover paints —
+  // so only the border carries the emphasis.
+  var isUnderlineEmphasis = isActive && usesUnderlineEmphasis(colors);
+  var backgroundColor = isActive && !isUnderlineEmphasis && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
+  var borderColor = isUnderlineEmphasis ? borderAccent(colors.deleteActiveColor) : colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor);
   return (0, _lazyNodeView.convertToInlineCss)({
     backgroundColor: backgroundColor,
-    borderBottom: "2px solid ".concat(colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor)),
+    borderBottom: "2px solid ".concat(borderColor),
     padding: "1px 0 2px"
   });
 }
+
+/**
+ * Glyph opacity for the 'glyphTint' treatment. 'onEmphasis' schemes are opaque in every state: with
+ * no highlight behind the glyph at rest, the accent text token has to carry the contrast on its own.
+ */
+function deletedGlyphOpacity(colors, state) {
+  if (colors.deletedInlineHighlight === 'onEmphasis') {
+    return 1;
+  }
+  if (state === 'active') {
+    return colors.deleteTextColor ? 0.83 : 1;
+  }
+  return colors.deleteTextColor || state === 'new' ? 0.83 : 0.6;
+}
+
+/** 'glyphTint' deleted inline style — tints the glyph itself via `color:`. */
 function buildDeletedInlineStyleStandard(colors, state) {
   var _colors$deleteTextCol5;
   if (state === 'active') {
@@ -662,14 +712,14 @@ function buildDeletedInlineStyleStandard(colors, state) {
     }, (0, _getStandardDeletedTextDecorationStyle.getStandardDeletedTextDecorationStyle)()), {}, {
       textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
       position: 'relative',
-      opacity: colors.deleteTextColor ? 0.83 : 1
+      opacity: deletedGlyphOpacity(colors, state)
     }));
   }
   return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
     color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor)
   }, (0, _getStandardDeletedTextDecorationStyle.getStandardDeletedTextDecorationStyle)()), {}, {
     position: 'relative',
-    opacity: colors.deleteTextColor || state === 'new' ? 0.83 : 0.6
+    opacity: deletedGlyphOpacity(colors, state)
   }));
 }
 
@@ -821,12 +871,36 @@ function getInsertedInlineRevealColors(colors, isActive, hideAddedDiffsUnderline
  * reveal keeps as-is.
  */
 function getDeletedInlineRevealColors(colors) {
+  // Nothing to wipe in where the resting state paints no highlight.
+  if (colors.deletedInlineHighlight === 'onEmphasis') {
+    return {
+      background: 'transparent',
+      border: 'transparent'
+    };
+  }
   return {
     background: bgSubtlest(colors.deleteColor),
     border: borderAccent(colors.deleteColor)
   };
 }
 
+/**
+ * Value for `DELETED_HIGHLIGHT_BG_VAR` while a change is hovered — the same tint an 'always' scheme
+ * paints at rest, so hovering restores the appearance rather than introducing a third one.
+ */
+function getDeletedHighlightHoverColor(colors) {
+  return bgSubtlest(colors.deleteColor);
+}
+
+/**
+ * Value for `DELETED_HIGHLIGHT_BORDER_VAR` while a change is hovered. An 'underline' scheme states
+ * both hover and active in the border, so the two read alike; anything else keeps the border on the
+ * tint, as it was before the border had a variable of its own.
+ */
+function getDeletedHighlightHoverBorderColor(colors) {
+  return usesUnderlineEmphasis(colors) ? borderAccent(colors.deleteActiveColor) : getDeletedHighlightHoverColor(colors);
+}
+
 /** The three visual states deleted inline content can be in. */
 
 /**

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

@@ -30,6 +30,7 @@ var traditionalScheme = exports.traditionalScheme = {
   roundedAddedCellOverlayInheritsBorder: true,
   insertedInlineTreatment: 'underline',
   deletedInlineTreatment: 'strikethrough',
+  deletedInlineHighlight: 'always',
   insertedNodeEmphasis: 'stateful',
   deletedNodeEmphasis: 'stateful',
   deletedQuoteNodeActiveTone: 'backgroundPressed',
@@ -58,6 +59,7 @@ var standardScheme = exports.standardScheme = {
   roundedAddedCellOverlayInheritsBorder: false,
   insertedInlineTreatment: 'borderBottom',
   deletedInlineTreatment: 'glyphTint',
+  deletedInlineHighlight: 'always',
   insertedNodeEmphasis: 'static',
   deletedNodeEmphasis: 'static',
   deletedQuoteNodeActiveTone: 'borderAccent',
@@ -70,7 +72,11 @@ var createAttributionScheme = function createAttributionScheme(color) {
     insertActiveColor: color,
     deleteColor: color,
     deletedInlineBorderTone: 'background',
-    deleteTextColor: 'gray',
+    // Like the public schemes, the highlight holds its resting tint when active.
+    deletedInlineActiveEmphasis: 'underline',
+    // The contributor's own hue, so deleted text reads as theirs without a highlight behind it.
+    deleteTextColor: color,
+    deletedInlineHighlight: 'onEmphasis',
     deleteActiveColor: color,
     deletedCellColor: color
   });

package/dist/cjs/ui/ContributorTag/contributorTagController.js

@@ -120,6 +120,8 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
     /** Guards a deferred bind that a later model change has already superseded. */
     (0, _defineProperty2.default)(this, "bindToken", 0);
     (0, _defineProperty2.default)(this, "fullLabel", '');
+    /** The bound highlights themselves, so hover can write the deleted highlight onto them. */
+    (0, _defineProperty2.default)(this, "highlightElements", []);
     (0, _defineProperty2.default)(this, "isDestroyed", false);
     /** Last visibility written, so a teardown knows whether there is anything on screen to fade. */
     (0, _defineProperty2.default)(this, "isVisible", false);
@@ -387,6 +389,30 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       var isVisible = Boolean((_this$model = this.model) === null || _this$model === void 0 ? void 0 : _this$model.isActive) || this.revealSources.size > 0;
       this.isVisible = isVisible;
       setRevealed(this.dom.tag, isVisible);
+      this.applyHighlightHover();
+    }
+
+    /**
+     * Brings the deleted highlight up alongside the tag, for the schemes that paint none at rest —
+     * see `DELETED_HIGHLIGHT_BG_VAR`. Keyed on `revealSources` rather than on the tag's own
+     * visibility: an active change paints its highlight from its decoration style, which this must
+     * not be able to override.
+     */
+  }, {
+    key: "applyHighlightHover",
+    value: function applyHighlightHover() {
+      var _this$model$colorSche, _this$model2;
+      var isHovered = this.revealSources.size > 0;
+      var colors = _schemes.colorSchemeRegistry[(_this$model$colorSche = (_this$model2 = this.model) === null || _this$model2 === void 0 ? void 0 : _this$model2.colorScheme) !== null && _this$model$colorSche !== void 0 ? _this$model$colorSche : 'standard'];
+      this.highlightElements.forEach(function (highlight) {
+        if (isHovered) {
+          highlight.style.setProperty(_factory.DELETED_HIGHLIGHT_BG_VAR, (0, _factory.getDeletedHighlightHoverColor)(colors));
+          highlight.style.setProperty(_factory.DELETED_HIGHLIGHT_BORDER_VAR, (0, _factory.getDeletedHighlightHoverBorderColor)(colors));
+        } else {
+          highlight.style.removeProperty(_factory.DELETED_HIGHLIGHT_BG_VAR);
+          highlight.style.removeProperty(_factory.DELETED_HIGHLIGHT_BORDER_VAR);
+        }
+      });
     }
 
     /**
@@ -494,7 +520,8 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       // `bindAll` takes a single target, and a change can render more than one highlight. Each is its
       // own member of `revealSources`, so the pointer can cross between them without the set
       // emptying.
-      this.unbindHighlights = Array.from(highlights).map(function (highlight) {
+      this.highlightElements = Array.from(highlights);
+      this.unbindHighlights = this.highlightElements.map(function (highlight) {
         return (0, _bindEventListener.bindAll)(highlight, [{
           type: 'mouseenter',
           listener: _this6.trackRevealSource(highlight, true)
@@ -503,6 +530,9 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
           listener: _this6.trackRevealSource(highlight, false)
         }]);
       });
+      // The pointer may already be over a highlight by the time this binds, a draw pass after it
+      // entered.
+      this.applyHighlightHover();
     }
   }, {
     key: "unbindHighlightState",
@@ -511,6 +541,13 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
         return unbind();
       });
       this.unbindHighlights = [];
+      // Cleared before the elements are released: ProseMirror reuses decoration DOM, so a hover left
+      // written on one would paint a highlight nothing is holding up.
+      this.highlightElements.forEach(function (highlight) {
+        highlight.style.removeProperty(_factory.DELETED_HIGHLIGHT_BG_VAR);
+        highlight.style.removeProperty(_factory.DELETED_HIGHLIGHT_BORDER_VAR);
+      });
+      this.highlightElements = [];
     }
   }]);
 }();

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

@@ -1,6 +1,21 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { getStandardDeletedTextDecorationStyle } from './getStandardDeletedTextDecorationStyle';
 
+/**
+ * Hover highlight for deleted text under an 'onEmphasis' scheme. Inline styles cannot express
+ * `:hover`, so the resting style resolves its background from this property and
+ * `ContributorTagController` sets it while the change is hovered. Custom properties inherit, so
+ * setting it on the element carrying `data-diff-id` also reaches the inner wrappers a
+ * deleted-content widget paints its background on.
+ */
+export const DELETED_HIGHLIGHT_BG_VAR = '--show-diff-deleted-highlight-bg';
+
+/**
+ * Bottom border of that same hover highlight, kept separate from `DELETED_HIGHLIGHT_BG_VAR` so an
+ * 'underline' scheme can darken the border without darkening the tint behind it.
+ */
+export const DELETED_HIGHLIGHT_BORDER_VAR = '--show-diff-deleted-highlight-border';
+
 // token() is a build-time transform needing static literals, so pre-compute every colour's
 // tokens here and index by name at runtime.
 
@@ -569,19 +584,51 @@ export function buildDeletedDecorationMarkerVariableSimple(colors) {
   });
 }
 
-/**
- * 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
- * default, 0.83 "new", 1 active.
- */
+/** Whether the emphasised state is stated in the bottom border rather than a deeper highlight. */
+function usesUnderlineEmphasis(colors) {
+  return colors.deletedInlineActiveEmphasis === 'underline';
+}
+
 /** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
 export function buildDeletedInlineContentStyleExtended(colors, isActive = false) {
-  const backgroundColor = isActive && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
+  // 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 convertToInlineCss({
+      backgroundColor: `var(${DELETED_HIGHLIGHT_BG_VAR}, transparent)`,
+      // Reserved while transparent, so the highlight arriving does not shift the text.
+      borderBottom: `2px solid var(${DELETED_HIGHLIGHT_BORDER_VAR}, transparent)`,
+      padding: `1px 0 2px`
+    });
+  }
+
+  // Under 'underline' emphasis the highlight stays on its resting tint — the same one hover paints —
+  // so only the border carries the emphasis.
+  const isUnderlineEmphasis = isActive && usesUnderlineEmphasis(colors);
+  const backgroundColor = isActive && !isUnderlineEmphasis && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
+  const borderColor = isUnderlineEmphasis ? borderAccent(colors.deleteActiveColor) : colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor);
   return convertToInlineCss({
     backgroundColor,
-    borderBottom: `2px solid ${colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor)}`,
+    borderBottom: `2px solid ${borderColor}`,
     padding: `1px 0 2px`
   });
 }
+
+/**
+ * Glyph opacity for the 'glyphTint' treatment. 'onEmphasis' schemes are opaque in every state: with
+ * no highlight behind the glyph at rest, the accent text token has to carry the contrast on its own.
+ */
+function deletedGlyphOpacity(colors, state) {
+  if (colors.deletedInlineHighlight === 'onEmphasis') {
+    return 1;
+  }
+  if (state === 'active') {
+    return colors.deleteTextColor ? 0.83 : 1;
+  }
+  return colors.deleteTextColor || state === 'new' ? 0.83 : 0.6;
+}
+
+/** 'glyphTint' deleted inline style — tints the glyph itself via `color:`. */
 export function buildDeletedInlineStyleStandard(colors, state) {
   var _colors$deleteTextCol5;
   if (state === 'active') {
@@ -591,14 +638,14 @@ export function buildDeletedInlineStyleStandard(colors, state) {
       ...getStandardDeletedTextDecorationStyle(),
       textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
       position: 'relative',
-      opacity: colors.deleteTextColor ? 0.83 : 1
+      opacity: deletedGlyphOpacity(colors, state)
     });
   }
   return convertToInlineCss({
     color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor),
     ...getStandardDeletedTextDecorationStyle(),
     position: 'relative',
-    opacity: colors.deleteTextColor || state === 'new' ? 0.83 : 0.6
+    opacity: deletedGlyphOpacity(colors, state)
   });
 }
 
@@ -752,12 +799,36 @@ export function getInsertedInlineRevealColors(colors, isActive, hideAddedDiffsUn
  * reveal keeps as-is.
  */
 export function getDeletedInlineRevealColors(colors) {
+  // Nothing to wipe in where the resting state paints no highlight.
+  if (colors.deletedInlineHighlight === 'onEmphasis') {
+    return {
+      background: 'transparent',
+      border: 'transparent'
+    };
+  }
   return {
     background: bgSubtlest(colors.deleteColor),
     border: borderAccent(colors.deleteColor)
   };
 }
 
+/**
+ * Value for `DELETED_HIGHLIGHT_BG_VAR` while a change is hovered — the same tint an 'always' scheme
+ * paints at rest, so hovering restores the appearance rather than introducing a third one.
+ */
+export function getDeletedHighlightHoverColor(colors) {
+  return bgSubtlest(colors.deleteColor);
+}
+
+/**
+ * Value for `DELETED_HIGHLIGHT_BORDER_VAR` while a change is hovered. An 'underline' scheme states
+ * both hover and active in the border, so the two read alike; anything else keeps the border on the
+ * tint, as it was before the border had a variable of its own.
+ */
+export function getDeletedHighlightHoverBorderColor(colors) {
+  return usesUnderlineEmphasis(colors) ? borderAccent(colors.deleteActiveColor) : getDeletedHighlightHoverColor(colors);
+}
+
 /** The three visual states deleted inline content can be in. */
 
 /**

package/dist/es2019/pm-plugins/decorations/colorSchemes/schemes.js

@@ -21,6 +21,7 @@ export const traditionalScheme = {
   roundedAddedCellOverlayInheritsBorder: true,
   insertedInlineTreatment: 'underline',
   deletedInlineTreatment: 'strikethrough',
+  deletedInlineHighlight: 'always',
   insertedNodeEmphasis: 'stateful',
   deletedNodeEmphasis: 'stateful',
   deletedQuoteNodeActiveTone: 'backgroundPressed',
@@ -49,6 +50,7 @@ export const standardScheme = {
   roundedAddedCellOverlayInheritsBorder: false,
   insertedInlineTreatment: 'borderBottom',
   deletedInlineTreatment: 'glyphTint',
+  deletedInlineHighlight: 'always',
   insertedNodeEmphasis: 'static',
   deletedNodeEmphasis: 'static',
   deletedQuoteNodeActiveTone: 'borderAccent',
@@ -62,7 +64,11 @@ const createAttributionScheme = color => {
     insertActiveColor: color,
     deleteColor: color,
     deletedInlineBorderTone: 'background',
-    deleteTextColor: 'gray',
+    // Like the public schemes, the highlight holds its resting tint when active.
+    deletedInlineActiveEmphasis: 'underline',
+    // The contributor's own hue, so deleted text reads as theirs without a highlight behind it.
+    deleteTextColor: color,
+    deletedInlineHighlight: 'onEmphasis',
     deleteActiveColor: color,
     deletedCellColor: color
   };

package/dist/es2019/ui/ContributorTag/contributorTagController.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { bind, bindAll } from 'bind-event-listener';
 import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
-import { getAccentTokens } from '../../pm-plugins/decorations/colorSchemes/factory';
+import { DELETED_HIGHLIGHT_BG_VAR, DELETED_HIGHLIGHT_BORDER_VAR, getAccentTokens, getDeletedHighlightHoverBorderColor, getDeletedHighlightHoverColor } from '../../pm-plugins/decorations/colorSchemes/factory';
 import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
 import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, CONTRIBUTOR_TAG_TOOLTIP_STYLES, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
 import { contributorAvatarRenderer } from './contributorAvatarRenderer';
@@ -104,6 +104,8 @@ export class ContributorTagController {
     /** Guards a deferred bind that a later model change has already superseded. */
     _defineProperty(this, "bindToken", 0);
     _defineProperty(this, "fullLabel", '');
+    /** The bound highlights themselves, so hover can write the deleted highlight onto them. */
+    _defineProperty(this, "highlightElements", []);
     _defineProperty(this, "isDestroyed", false);
     /** Last visibility written, so a teardown knows whether there is anything on screen to fade. */
     _defineProperty(this, "isVisible", false);
@@ -346,6 +348,28 @@ export class ContributorTagController {
     const isVisible = Boolean((_this$model = this.model) === null || _this$model === void 0 ? void 0 : _this$model.isActive) || this.revealSources.size > 0;
     this.isVisible = isVisible;
     setRevealed(this.dom.tag, isVisible);
+    this.applyHighlightHover();
+  }
+
+  /**
+   * Brings the deleted highlight up alongside the tag, for the schemes that paint none at rest —
+   * see `DELETED_HIGHLIGHT_BG_VAR`. Keyed on `revealSources` rather than on the tag's own
+   * visibility: an active change paints its highlight from its decoration style, which this must
+   * not be able to override.
+   */
+  applyHighlightHover() {
+    var _this$model$colorSche, _this$model2;
+    const isHovered = this.revealSources.size > 0;
+    const colors = colorSchemeRegistry[(_this$model$colorSche = (_this$model2 = this.model) === null || _this$model2 === void 0 ? void 0 : _this$model2.colorScheme) !== null && _this$model$colorSche !== void 0 ? _this$model$colorSche : 'standard'];
+    this.highlightElements.forEach(highlight => {
+      if (isHovered) {
+        highlight.style.setProperty(DELETED_HIGHLIGHT_BG_VAR, getDeletedHighlightHoverColor(colors));
+        highlight.style.setProperty(DELETED_HIGHLIGHT_BORDER_VAR, getDeletedHighlightHoverBorderColor(colors));
+      } else {
+        highlight.style.removeProperty(DELETED_HIGHLIGHT_BG_VAR);
+        highlight.style.removeProperty(DELETED_HIGHLIGHT_BORDER_VAR);
+      }
+    });
   }
 
   /**
@@ -443,16 +467,27 @@ export class ContributorTagController {
     // `bindAll` takes a single target, and a change can render more than one highlight. Each is its
     // own member of `revealSources`, so the pointer can cross between them without the set
     // emptying.
-    this.unbindHighlights = Array.from(highlights).map(highlight => bindAll(highlight, [{
+    this.highlightElements = Array.from(highlights);
+    this.unbindHighlights = this.highlightElements.map(highlight => bindAll(highlight, [{
       type: 'mouseenter',
       listener: this.trackRevealSource(highlight, true)
     }, {
       type: 'mouseleave',
       listener: this.trackRevealSource(highlight, false)
     }]));
+    // The pointer may already be over a highlight by the time this binds, a draw pass after it
+    // entered.
+    this.applyHighlightHover();
   }
   unbindHighlightState() {
     this.unbindHighlights.forEach(unbind => unbind());
     this.unbindHighlights = [];
+    // Cleared before the elements are released: ProseMirror reuses decoration DOM, so a hover left
+    // written on one would paint a highlight nothing is holding up.
+    this.highlightElements.forEach(highlight => {
+      highlight.style.removeProperty(DELETED_HIGHLIGHT_BG_VAR);
+      highlight.style.removeProperty(DELETED_HIGHLIGHT_BORDER_VAR);
+    });
+    this.highlightElements = [];
   }
 }

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

@@ -4,6 +4,21 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { getStandardDeletedTextDecorationStyle } from './getStandardDeletedTextDecorationStyle';
 
+/**
+ * Hover highlight for deleted text under an 'onEmphasis' scheme. Inline styles cannot express
+ * `:hover`, so the resting style resolves its background from this property and
+ * `ContributorTagController` sets it while the change is hovered. Custom properties inherit, so
+ * setting it on the element carrying `data-diff-id` also reaches the inner wrappers a
+ * deleted-content widget paints its background on.
+ */
+export var DELETED_HIGHLIGHT_BG_VAR = '--show-diff-deleted-highlight-bg';
+
+/**
+ * Bottom border of that same hover highlight, kept separate from `DELETED_HIGHLIGHT_BG_VAR` so an
+ * 'underline' scheme can darken the border without darkening the tint behind it.
+ */
+export var DELETED_HIGHLIGHT_BORDER_VAR = '--show-diff-deleted-highlight-border';
+
 // token() is a build-time transform needing static literals, so pre-compute every colour's
 // tokens here and index by name at runtime.
 
@@ -570,20 +585,52 @@ export function buildDeletedDecorationMarkerVariableSimple(colors) {
   });
 }
 
-/**
- * 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
- * default, 0.83 "new", 1 active.
- */
+/** Whether the emphasised state is stated in the bottom border rather than a deeper highlight. */
+function usesUnderlineEmphasis(colors) {
+  return colors.deletedInlineActiveEmphasis === 'underline';
+}
+
 /** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
 export function buildDeletedInlineContentStyleExtended(colors) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var backgroundColor = isActive && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
+  // 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 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)"),
+      padding: "1px 0 2px"
+    });
+  }
+
+  // Under 'underline' emphasis the highlight stays on its resting tint — the same one hover paints —
+  // so only the border carries the emphasis.
+  var isUnderlineEmphasis = isActive && usesUnderlineEmphasis(colors);
+  var backgroundColor = isActive && !isUnderlineEmphasis && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
+  var borderColor = isUnderlineEmphasis ? borderAccent(colors.deleteActiveColor) : colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor);
   return convertToInlineCss({
     backgroundColor: backgroundColor,
-    borderBottom: "2px solid ".concat(colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor)),
+    borderBottom: "2px solid ".concat(borderColor),
     padding: "1px 0 2px"
   });
 }
+
+/**
+ * Glyph opacity for the 'glyphTint' treatment. 'onEmphasis' schemes are opaque in every state: with
+ * no highlight behind the glyph at rest, the accent text token has to carry the contrast on its own.
+ */
+function deletedGlyphOpacity(colors, state) {
+  if (colors.deletedInlineHighlight === 'onEmphasis') {
+    return 1;
+  }
+  if (state === 'active') {
+    return colors.deleteTextColor ? 0.83 : 1;
+  }
+  return colors.deleteTextColor || state === 'new' ? 0.83 : 0.6;
+}
+
+/** 'glyphTint' deleted inline style — tints the glyph itself via `color:`. */
 export function buildDeletedInlineStyleStandard(colors, state) {
   var _colors$deleteTextCol5;
   if (state === 'active') {
@@ -593,14 +640,14 @@ export function buildDeletedInlineStyleStandard(colors, state) {
     }, getStandardDeletedTextDecorationStyle()), {}, {
       textDecorationColor: textAccent((_colors$deleteTextCol4 = colors.deleteTextColor) !== null && _colors$deleteTextCol4 !== void 0 ? _colors$deleteTextCol4 : colors.deleteColor),
       position: 'relative',
-      opacity: colors.deleteTextColor ? 0.83 : 1
+      opacity: deletedGlyphOpacity(colors, state)
     }));
   }
   return convertToInlineCss(_objectSpread(_objectSpread({
     color: textAccent((_colors$deleteTextCol5 = colors.deleteTextColor) !== null && _colors$deleteTextCol5 !== void 0 ? _colors$deleteTextCol5 : colors.deleteColor)
   }, getStandardDeletedTextDecorationStyle()), {}, {
     position: 'relative',
-    opacity: colors.deleteTextColor || state === 'new' ? 0.83 : 0.6
+    opacity: deletedGlyphOpacity(colors, state)
   }));
 }
 
@@ -752,12 +799,36 @@ export function getInsertedInlineRevealColors(colors, isActive, hideAddedDiffsUn
  * reveal keeps as-is.
  */
 export function getDeletedInlineRevealColors(colors) {
+  // Nothing to wipe in where the resting state paints no highlight.
+  if (colors.deletedInlineHighlight === 'onEmphasis') {
+    return {
+      background: 'transparent',
+      border: 'transparent'
+    };
+  }
   return {
     background: bgSubtlest(colors.deleteColor),
     border: borderAccent(colors.deleteColor)
   };
 }
 
+/**
+ * Value for `DELETED_HIGHLIGHT_BG_VAR` while a change is hovered — the same tint an 'always' scheme
+ * paints at rest, so hovering restores the appearance rather than introducing a third one.
+ */
+export function getDeletedHighlightHoverColor(colors) {
+  return bgSubtlest(colors.deleteColor);
+}
+
+/**
+ * Value for `DELETED_HIGHLIGHT_BORDER_VAR` while a change is hovered. An 'underline' scheme states
+ * both hover and active in the border, so the two read alike; anything else keeps the border on the
+ * tint, as it was before the border had a variable of its own.
+ */
+export function getDeletedHighlightHoverBorderColor(colors) {
+  return usesUnderlineEmphasis(colors) ? borderAccent(colors.deleteActiveColor) : getDeletedHighlightHoverColor(colors);
+}
+
 /** The three visual states deleted inline content can be in. */
 
 /**

package/dist/esm/pm-plugins/decorations/colorSchemes/schemes.js

@@ -24,6 +24,7 @@ export var traditionalScheme = {
   roundedAddedCellOverlayInheritsBorder: true,
   insertedInlineTreatment: 'underline',
   deletedInlineTreatment: 'strikethrough',
+  deletedInlineHighlight: 'always',
   insertedNodeEmphasis: 'stateful',
   deletedNodeEmphasis: 'stateful',
   deletedQuoteNodeActiveTone: 'backgroundPressed',
@@ -52,6 +53,7 @@ export var standardScheme = {
   roundedAddedCellOverlayInheritsBorder: false,
   insertedInlineTreatment: 'borderBottom',
   deletedInlineTreatment: 'glyphTint',
+  deletedInlineHighlight: 'always',
   insertedNodeEmphasis: 'static',
   deletedNodeEmphasis: 'static',
   deletedQuoteNodeActiveTone: 'borderAccent',
@@ -64,7 +66,11 @@ var createAttributionScheme = function createAttributionScheme(color) {
     insertActiveColor: color,
     deleteColor: color,
     deletedInlineBorderTone: 'background',
-    deleteTextColor: 'gray',
+    // Like the public schemes, the highlight holds its resting tint when active.
+    deletedInlineActiveEmphasis: 'underline',
+    // The contributor's own hue, so deleted text reads as theirs without a highlight behind it.
+    deleteTextColor: color,
+    deletedInlineHighlight: 'onEmphasis',
     deleteActiveColor: color,
     deletedCellColor: color
   });

package/dist/esm/ui/ContributorTag/contributorTagController.js

@@ -4,7 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { bind, bindAll } from 'bind-event-listener';
 import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
-import { getAccentTokens } from '../../pm-plugins/decorations/colorSchemes/factory';
+import { DELETED_HIGHLIGHT_BG_VAR, DELETED_HIGHLIGHT_BORDER_VAR, getAccentTokens, getDeletedHighlightHoverBorderColor, getDeletedHighlightHoverColor } from '../../pm-plugins/decorations/colorSchemes/factory';
 import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
 import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, CONTRIBUTOR_TAG_TOOLTIP_STYLES, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
 import { contributorAvatarRenderer } from './contributorAvatarRenderer';
@@ -113,6 +113,8 @@ export var ContributorTagController = /*#__PURE__*/function () {
     /** Guards a deferred bind that a later model change has already superseded. */
     _defineProperty(this, "bindToken", 0);
     _defineProperty(this, "fullLabel", '');
+    /** The bound highlights themselves, so hover can write the deleted highlight onto them. */
+    _defineProperty(this, "highlightElements", []);
     _defineProperty(this, "isDestroyed", false);
     /** Last visibility written, so a teardown knows whether there is anything on screen to fade. */
     _defineProperty(this, "isVisible", false);
@@ -380,6 +382,30 @@ export var ContributorTagController = /*#__PURE__*/function () {
       var isVisible = Boolean((_this$model = this.model) === null || _this$model === void 0 ? void 0 : _this$model.isActive) || this.revealSources.size > 0;
       this.isVisible = isVisible;
       setRevealed(this.dom.tag, isVisible);
+      this.applyHighlightHover();
+    }
+
+    /**
+     * Brings the deleted highlight up alongside the tag, for the schemes that paint none at rest —
+     * see `DELETED_HIGHLIGHT_BG_VAR`. Keyed on `revealSources` rather than on the tag's own
+     * visibility: an active change paints its highlight from its decoration style, which this must
+     * not be able to override.
+     */
+  }, {
+    key: "applyHighlightHover",
+    value: function applyHighlightHover() {
+      var _this$model$colorSche, _this$model2;
+      var isHovered = this.revealSources.size > 0;
+      var colors = colorSchemeRegistry[(_this$model$colorSche = (_this$model2 = this.model) === null || _this$model2 === void 0 ? void 0 : _this$model2.colorScheme) !== null && _this$model$colorSche !== void 0 ? _this$model$colorSche : 'standard'];
+      this.highlightElements.forEach(function (highlight) {
+        if (isHovered) {
+          highlight.style.setProperty(DELETED_HIGHLIGHT_BG_VAR, getDeletedHighlightHoverColor(colors));
+          highlight.style.setProperty(DELETED_HIGHLIGHT_BORDER_VAR, getDeletedHighlightHoverBorderColor(colors));
+        } else {
+          highlight.style.removeProperty(DELETED_HIGHLIGHT_BG_VAR);
+          highlight.style.removeProperty(DELETED_HIGHLIGHT_BORDER_VAR);
+        }
+      });
     }
 
     /**
@@ -487,7 +513,8 @@ export var ContributorTagController = /*#__PURE__*/function () {
       // `bindAll` takes a single target, and a change can render more than one highlight. Each is its
       // own member of `revealSources`, so the pointer can cross between them without the set
       // emptying.
-      this.unbindHighlights = Array.from(highlights).map(function (highlight) {
+      this.highlightElements = Array.from(highlights);
+      this.unbindHighlights = this.highlightElements.map(function (highlight) {
         return bindAll(highlight, [{
           type: 'mouseenter',
           listener: _this6.trackRevealSource(highlight, true)
@@ -496,6 +523,9 @@ export var ContributorTagController = /*#__PURE__*/function () {
           listener: _this6.trackRevealSource(highlight, false)
         }]);
       });
+      // The pointer may already be over a highlight by the time this binds, a draw pass after it
+      // entered.
+      this.applyHighlightHover();
     }
   }, {
     key: "unbindHighlightState",
@@ -504,6 +534,13 @@ export var ContributorTagController = /*#__PURE__*/function () {
         return unbind();
       });
       this.unbindHighlights = [];
+      // Cleared before the elements are released: ProseMirror reuses decoration DOM, so a hover left
+      // written on one would paint a highlight nothing is holding up.
+      this.highlightElements.forEach(function (highlight) {
+        highlight.style.removeProperty(DELETED_HIGHLIGHT_BG_VAR);
+        highlight.style.removeProperty(DELETED_HIGHLIGHT_BORDER_VAR);
+      });
+      this.highlightElements = [];
     }
   }]);
 }();

package/dist/types/pm-plugins/decorations/colorSchemes/factory.d.ts

@@ -1,4 +1,17 @@
 import type { AdsAccentColor, DiffColorScheme } from './types';
+/**
+ * Hover highlight for deleted text under an 'onEmphasis' scheme. Inline styles cannot express
+ * `:hover`, so the resting style resolves its background from this property and
+ * `ContributorTagController` sets it while the change is hovered. Custom properties inherit, so
+ * setting it on the element carrying `data-diff-id` also reaches the inner wrappers a
+ * deleted-content widget paints its background on.
+ */
+export declare const DELETED_HIGHLIGHT_BG_VAR = "--show-diff-deleted-highlight-bg";
+/**
+ * Bottom border of that same hover highlight, kept separate from `DELETED_HIGHLIGHT_BG_VAR` so an
+ * 'underline' scheme can darken the border without darkening the tint behind it.
+ */
+export declare const DELETED_HIGHLIGHT_BORDER_VAR = "--show-diff-deleted-highlight-border";
 /**
  * Presentation tokens for a contributor tag in one diff colour.
  *
@@ -92,12 +105,9 @@ export declare function buildDecorationMarkerVariableActive(colors: DiffColorSch
 export declare function buildDeletedDecorationMarkerVariable(colors: DiffColorScheme): string;
 /** Opacity only, no position or strikethrough. Used by 'static' schemes. */
 export declare function buildDeletedDecorationMarkerVariableSimple(colors: DiffColorScheme): string;
-/**
- * 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
- * default, 0.83 "new", 1 active.
- */
 /** Extended deleted inline style — background highlight with an accent or background-matched bottom border. */
 export declare function buildDeletedInlineContentStyleExtended(colors: DiffColorScheme, isActive?: boolean): string;
+/** 'glyphTint' deleted inline style — tints the glyph itself via `color:`. */
 export declare function buildDeletedInlineStyleStandard(colors: DiffColorScheme, state: 'default' | 'new' | 'active'): string;
 /** Deleted node decoration marker — "new" state. */
 export declare function buildDeletedDecorationMarkerVariableNew(colors: DiffColorScheme): string;
@@ -142,6 +152,17 @@ export declare function getDeletedInlineRevealColors(colors: DiffColorScheme): {
     background: string;
     border: string;
 };
+/**
+ * Value for `DELETED_HIGHLIGHT_BG_VAR` while a change is hovered — the same tint an 'always' scheme
+ * paints at rest, so hovering restores the appearance rather than introducing a third one.
+ */
+export declare function getDeletedHighlightHoverColor(colors: DiffColorScheme): string;
+/**
+ * Value for `DELETED_HIGHLIGHT_BORDER_VAR` while a change is hovered. An 'underline' scheme states
+ * both hover and active in the border, so the two read alike; anything else keeps the border on the
+ * tint, as it was before the border had a variable of its own.
+ */
+export declare function getDeletedHighlightHoverBorderColor(colors: DiffColorScheme): string;
 /** The three visual states deleted inline content can be in. */
 export type DeletedInlineState = 'active' | 'default' | 'new';
 /**

package/dist/types/pm-plugins/decorations/colorSchemes/types.d.ts

@@ -26,8 +26,19 @@ export type DiffColorScheme = {
     deletedCellColor: AdsAccentColor;
     /** Opacity of the deleted cell overlay background. Counterpart to `insertedCellOpacity`. */
     deletedCellOpacity: number;
+    /**
+     * Emphasised deleted text — hovered or active: deepen the highlight, or hold the resting tint and
+     * darken the bottom border instead. Defaults to 'background'. Only the attribution schemes take
+     * 'underline', so it reaches no one outside their gates.
+     */
+    deletedInlineActiveEmphasis?: 'background' | 'underline';
     /** Bottom border tone for deleted text highlights. Defaults to accent. */
     deletedInlineBorderTone?: 'accent' | 'background';
+    /**
+     * Deleted text highlight: painted at rest, or only once the change is active or hovered. See
+     * `DELETED_HIGHLIGHT_BG_VAR` for how 'onEmphasis' resolves the hovered half.
+     */
+    deletedInlineHighlight: 'always' | 'onEmphasis';
     /** Deleted inline content: tint the strikethrough, or tint and dim the glyph itself. */
     deletedInlineTreatment: 'strikethrough' | 'glyphTint';
     /** Resting "REMOVED" lozenge tint. Gray in both current schemes; the active state uses `deleteActiveColor`. */

package/dist/types/ui/ContributorTag/contributorTagController.d.ts

@@ -36,6 +36,8 @@ export declare class ContributorTagController {
     private boundSelector;
     private dom;
     private fullLabel;
+    /** The bound highlights themselves, so hover can write the deleted highlight onto them. */
+    private highlightElements;
     private host;
     private isDestroyed;
     /** Last visibility written, so a teardown knows whether there is anything on screen to fade. */
@@ -82,6 +84,13 @@ export declare class ContributorTagController {
      * the tag is attached yet, and whether motion is wanted at all are all the stylesheet's to answer.
      */
     private applyVisibility;
+    /**
+     * Brings the deleted highlight up alongside the tag, for the schemes that paint none at rest —
+     * see `DELETED_HIGHLIGHT_BG_VAR`. Keyed on `revealSources` rather than on the tag's own
+     * visibility: an active change paints its highlight from its decoration style, which this must
+     * not be able to override.
+     */
+    private applyHighlightHover;
     /**
      * The full label is always the tooltip, whether or not the name it draws is clipped: a name longer
      * than `MAX_TAG_WIDTH` is ellipsised, and a connected pair spells out a contributor the tag does

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "16.0.5",
+	"version": "16.0.6",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",