@atlaskit/editor-common/dist/cjs/link/ConfigureLinkOverlay/index.js

A package that contains common classes and components for editor and renderer

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.OverlayButton = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
var _state = require("@atlaskit/editor-prosemirror/state");
var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _messages = require("../../messages");
var _Dropdown = _interopRequireDefault(require("./Dropdown"));
var _StyledButton = require("./StyledButton");
var _useLinkOverlayAnalyticsEvents = require("./useLinkOverlayAnalyticsEvents");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var buttonWrapperStyles = (0, _react2.css)({
  position: 'absolute',
  zIndex: 100,
  display: 'inline-flex',
  top: '50%',
  transform: 'translateY(-50%)',
  background: "var(--ds-surface-raised, #FFFFFF)",
  borderRadius: "var(--ds-radius-small, 3px)"
});
var showDropdownThresholdPx = 50;
var OverlayButton = exports.OverlayButton = (0, _withAnalyticsContext.default)()(function (_ref) {
  var _docNode$nodeSize;
  var editorView = _ref.editorView,
    _ref$testId = _ref.testId,
    testId = _ref$testId === void 0 ? 'link-configure-overlay-button' : _ref$testId,
    _ref$targetElementPos = _ref.targetElementPos,
    targetElementPos = _ref$targetElementPos === void 0 ? 0 : _ref$targetElementPos,
    onDropdownChange = _ref.onDropdownChange,
    onOpenLinkClick = _ref.onOpenLinkClick;
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var configureLinkLabel = formatMessage(_messages.cardMessages.inlineConfigureLink);
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    showDropdown = _useState2[0],
    setShowDropdown = _useState2[1];
  var _useLinkOverlayAnalyt = (0, _useLinkOverlayAnalyticsEvents.useLinkOverlayAnalyticsEvents)(),
    fireActionClickEvent = _useLinkOverlayAnalyt.fireActionClickEvent,
    fireLinkClickEvent = _useLinkOverlayAnalyt.fireLinkClickEvent;
  (0, _react.useLayoutEffect)(function () {
    var _domNode;
    var domNode = editorView.nodeDOM(targetElementPos);
    if (((_domNode = domNode) === null || _domNode === void 0 ? void 0 : _domNode.nodeType) === Node.TEXT_NODE) {
      domNode = domNode.parentElement;
    }
    if (domNode instanceof HTMLElement) {
      var _domNode$getBoundingC = domNode.getBoundingClientRect(),
        width = _domNode$getBoundingC.width;
      if (width < showDropdownThresholdPx) {
        setShowDropdown(true);
      }
    }
  }, [editorView, targetElementPos]);
  var docNode = editorView.state.doc.nodeAt(targetElementPos);
  var nodeEnd = targetElementPos + ((_docNode$nodeSize = docNode === null || docNode === void 0 ? void 0 : docNode.nodeSize) !== null && _docNode$nodeSize !== void 0 ? _docNode$nodeSize : 0);
  var isText = docNode === null || docNode === void 0 ? void 0 : docNode.isText;
  var handleConfigureClick = (0, _react.useCallback)(function () {
    var tr = editorView.state.tr;
    if (isText) {
      tr.setSelection(_state.TextSelection.create(tr.doc, targetElementPos, Math.min(nodeEnd, tr.doc.nodeSize)));
    } else {
      tr.setSelection(_state.NodeSelection.create(tr.doc, targetElementPos));
    }
    editorView.dispatch(tr);
  }, [editorView, isText, targetElementPos, nodeEnd]);
  var handleConfigureClickWithAnalytics = (0, _react.useCallback)(function () {
    fireActionClickEvent('configureLink');
    fireLinkClickEvent();
    handleConfigureClick();
  }, [fireLinkClickEvent, handleConfigureClick, fireActionClickEvent]);
  var _editorView$state$sel = editorView.state.selection,
    from = _editorView$state$sel.from,
    to = _editorView$state$sel.to;
  var isSelected = from === targetElementPos && to === nodeEnd;
  if (!targetElementPos || isSelected) {
    return null;
  }
  return (0, _react2.jsx)("span", {
    css: buttonWrapperStyles,
    "data-testid": testId
  }, showDropdown ? (0, _react2.jsx)(_Dropdown.default, {
    testId: testId,
    onConfigureClick: handleConfigureClick,
    onOpenLinkClick: onOpenLinkClick,
    onDropdownChange: onDropdownChange,
    editorView: editorView
  }) : (0, _react2.jsx)(_tooltip.default, {
    content: configureLinkLabel,
    hideTooltipOnClick: true,
    testId: "".concat(testId, "-tooltip")
  }, (0, _react2.jsx)(_StyledButton.StyledButton, {
    onClick: handleConfigureClickWithAnalytics,
    iconBefore: (0, _react2.jsx)(_customize.default, {
      label: configureLinkLabel,
      testId: "".concat(testId, "-configure-icon")
    })
  })));
});