@atlaskit/editor-plugin-show-diff/dist/cjs/ui/IndicatorBar/IndicatorBarContentComponent.js

ShowDiff plugin for @atlaskit/editor-core

/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v2.0.0 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.IndicatorBarContentComponent = void 0;
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireDefault(require("react"));
var _hooks = require("@atlaskit/editor-common/hooks");
var _decorationKeys = require("../../pm-plugins/decorations/decorationKeys");
var _IndicatorBar = require("./IndicatorBar");
var renderIndicatorBar = function renderIndicatorBar(descriptor) {
  switch (descriptor.type) {
    case 'inline':
      {
        return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
          key: descriptor.id,
          anchorTop: (0, _decorationKeys.buildAnchorDecorationKey)({
            diffId: descriptor.id,
            anchorType: _decorationKeys.AnchorTypeKey.from
          }),
          anchorBottom: (0, _decorationKeys.buildAnchorDecorationKey)({
            diffId: descriptor.id,
            anchorType: _decorationKeys.AnchorTypeKey.to
          }),
          anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
            diffId: descriptor.id,
            anchorType: _decorationKeys.AnchorTypeKey.left
          })
        });
      }
    case 'block':
      {
        // The block anchor is a single element (keyed by diffId with no
        // anchorType) sized to the full height of the block node, so top,
        // bottom and left all resolve against it.
        var blockAnchor = (0, _decorationKeys.buildAnchorDecorationKey)({
          diffId: descriptor.id
        });
        return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
          key: descriptor.id,
          anchorTop: blockAnchor,
          anchorBottom: blockAnchor,
          anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
            diffId: descriptor.id,
            anchorType: _decorationKeys.AnchorTypeKey.left
          })
        });
      }
    case 'widget':
      {
        return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
          key: descriptor.id,
          anchorTop: (0, _decorationKeys.buildAnchorDecorationKey)({
            diffId: descriptor.id
          }),
          anchorBottom: (0, _decorationKeys.buildAnchorDecorationKey)({
            diffId: descriptor.id
          }),
          anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
            diffId: descriptor.id,
            anchorType: _decorationKeys.AnchorTypeKey.left
          }),
          anchorLeftFallback: (0, _decorationKeys.buildAnchorDecorationKey)({
            diffId: descriptor.id
          })
        });
      }
    default:
      return null;
  }
};

/**
 * Renders IndicatorBar elements for each diff ID in the current plugin state.
 *
 * This is rendered as a contentComponent so that the IndicatorBar elements
 * share the same DOM context as their CSS anchor spans, allowing the browser
 * to resolve anchor-name references correctly.
 */

var IndicatorBarContentComponent = exports.IndicatorBarContentComponent = function IndicatorBarContentComponent(_ref) {
  var api = _ref.api;
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['showDiff'], function (state) {
      var _state$showDiffState, _state$showDiffState2, _state$showDiffState3;
      return {
        showIndicators: (_state$showDiffState = state.showDiffState) === null || _state$showDiffState === void 0 ? void 0 : _state$showDiffState.showIndicators,
        isDisplayingChanges: (_state$showDiffState2 = state.showDiffState) === null || _state$showDiffState2 === void 0 ? void 0 : _state$showDiffState2.isDisplayingChanges,
        diffDescriptors: (_state$showDiffState3 = state.showDiffState) === null || _state$showDiffState3 === void 0 ? void 0 : _state$showDiffState3.diffDescriptors
      };
    }),
    showIndicators = _useSharedPluginState.showIndicators,
    isDisplayingChanges = _useSharedPluginState.isDisplayingChanges,
    diffDescriptors = _useSharedPluginState.diffDescriptors;
  if (!showIndicators || !isDisplayingChanges || !(diffDescriptors !== null && diffDescriptors !== void 0 && diffDescriptors.length)) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, diffDescriptors.map(renderIndicatorBar));
};