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

ShowDiff plugin for @atlaskit/editor-core

/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v2.0.0 */
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { buildAnchorDecorationKey, AnchorTypeKey } from '../../pm-plugins/decorations/decorationKeys';
import { IndicatorBar } from './IndicatorBar';
var renderIndicatorBar = function renderIndicatorBar(descriptor) {
  switch (descriptor.type) {
    case 'inline':
      {
        return /*#__PURE__*/React.createElement(IndicatorBar, {
          key: descriptor.id,
          anchorTop: buildAnchorDecorationKey({
            diffId: descriptor.id,
            anchorType: AnchorTypeKey.from
          }),
          anchorBottom: buildAnchorDecorationKey({
            diffId: descriptor.id,
            anchorType: AnchorTypeKey.to
          }),
          anchorLeft: buildAnchorDecorationKey({
            diffId: descriptor.id,
            anchorType: 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 = buildAnchorDecorationKey({
          diffId: descriptor.id
        });
        return /*#__PURE__*/React.createElement(IndicatorBar, {
          key: descriptor.id,
          anchorTop: blockAnchor,
          anchorBottom: blockAnchor,
          anchorLeft: buildAnchorDecorationKey({
            diffId: descriptor.id,
            anchorType: AnchorTypeKey.left
          })
        });
      }
    case 'widget':
      {
        return /*#__PURE__*/React.createElement(IndicatorBar, {
          key: descriptor.id,
          anchorTop: buildAnchorDecorationKey({
            diffId: descriptor.id
          }),
          anchorBottom: buildAnchorDecorationKey({
            diffId: descriptor.id
          }),
          anchorLeft: buildAnchorDecorationKey({
            diffId: descriptor.id,
            anchorType: AnchorTypeKey.left
          }),
          anchorLeftFallback: 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.
 */

export var IndicatorBarContentComponent = function IndicatorBarContentComponent(_ref) {
  var api = _ref.api;
  var _useSharedPluginState = 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.createElement(React.Fragment, null, diffDescriptors.map(renderIndicatorBar));
};