@atlaskit/editor-plugin-show-diff/dist/esm/pm-plugins/decorations/utils/createDeletedLineBreakWidget.js

ShowDiff plugin for @atlaskit/editor-core

import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { Decoration } from '@atlaskit/editor-prosemirror/view';
import { buildDiffDecorationSpec, scrollMarginTopValue } from '../decorationKeys';
import { createContentWrapper } from './wrapBlockNodeView';

/**
 * U+2936 ARROW POINTING DOWNWARDS THEN CURVING LEFTWARDS — the return-key glyph.
 *
 * Exported so tests assert against the glyph actually rendered rather than a copy of it.
 */
export var RETURN_GLYPH = '⤶';

/**
 * The DOM for a removed blank line: the return glyph, struck through in the deleted colours.
 *
 * An empty paragraph or heading is a line the author deliberately added, but it has no content for
 * the deleted-content widget to serialize, so a deletion of one used to render nothing at all — the
 * reviewer saw the surrounding text close up with no sign of what was removed. Standing the glyph
 * in for the absent content keeps the deletion visible without inventing content that was not there.
 *
 * `createContentWrapper` supplies the highlight and the strikethrough line, so the glyph is styled
 * exactly like any other run of deleted inline content, including the active and reveal states.
 *
 * Hidden from assistive technology: the glyph is a picture of a key, and read out it is announced as
 * its Unicode name rather than as a removed line.
 */
export var createDeletedLineBreakWidget = function createDeletedLineBreakWidget(_ref) {
  var colorScheme = _ref.colorScheme,
    _ref$count = _ref.count,
    count = _ref$count === void 0 ? 1 : _ref$count,
    _ref$isActive = _ref.isActive,
    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
    reveal = _ref.reveal;
  var dom = document.createElement('span');
  // The testid deleted content is matched by, so the glyph is found wherever deleted content is.
  dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
  dom.setAttribute('aria-hidden', 'true');
  dom.contentEditable = 'false';
  // Scroll navigation aligns on the widget itself, as it does for every other deleted widget.
  dom.style.setProperty('scroll-margin-top', scrollMarginTopValue);
  for (var index = 0; index < Math.max(count, 1); index++) {
    if (index > 0) {
      // Each removed line gets its own line in the widget, so a run of blank lines reads as the
      // number of lines it was. `br` rather than a block wrapper: the widget is inline, and the
      // deleted-content wrapper is styled as an inline run.
      dom.append(dom.ownerDocument.createElement('br'));
    }
    var wrapper = createContentWrapper(colorScheme, isActive, false, reveal);
    wrapper.append(dom.ownerDocument.createTextNode(RETURN_GLYPH));
    dom.append(wrapper);
  }
  return dom;
};

/**
 * The glyph as a widget decoration anchored at `pos`.
 *
 * Shared by the two shapes a blank-line removal arrives in. On a forward diff the block is gone from
 * the new document, so the change lands on the deleted side and the glyph is anchored where the
 * block used to be. On an inverted diff — what AI suggested edits renders — the block is still in
 * the displayed document and the change lands on the *inserted* side, so the glyph is anchored
 * inside the surviving block, on the blank line itself.
 */
export var createDeletedLineBreakDecoration = function createDeletedLineBreakDecoration(_ref2) {
  var attributionKey = _ref2.attributionKey,
    colorScheme = _ref2.colorScheme,
    count = _ref2.count,
    _ref2$isActive = _ref2.isActive,
    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
    pos = _ref2.pos,
    reveal = _ref2.reveal,
    side = _ref2.side;
  return Decoration.widget(pos, createDeletedLineBreakWidget({
    colorScheme: colorScheme,
    count: count,
    isActive: isActive,
    reveal: reveal
  }), _objectSpread(_objectSpread({}, buildDiffDecorationSpec(_objectSpread({
    attributionKey: attributionKey,
    colorScheme: colorScheme,
    decorationType: 'widget',
    diffId: crypto.randomUUID(),
    isActive: isActive,
    // The glyph always stands in for removed content, whichever side of the changeset the
    // change itself landed on.
    isInserted: false
  }, side !== undefined && {
    side: side
  }))), {}, {
    // Without an explicit mark set, prosemirror-view wraps the widget in the marks of the
    // adjacent text. The glyph carries its own deleted styling and must not inherit them.
    marks: []
  }));
};