@atlaskit/editor-plugin-media/dist/cjs/ui/toolbar/linking-toolbar-appearance.js

Media plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LinkToolbarAppearance = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _adfSchema = require("@atlaskit/adf-schema");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _ui = require("@atlaskit/editor-common/ui");
var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
var _currentMediaNode = require("../../pm-plugins//utils/current-media-node");
var _pluginKey = require("../../pm-plugins/plugin-key");
var _checkMediaType = require("../../pm-plugins/utils/check-media-type");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports

var wrapperStyles = (0, _react2.css)({
  display: 'flex',
  alignItems: 'center'
});
var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
  var editorState = _ref.editorState,
    mediaLinkingState = _ref.mediaLinkingState,
    intl = _ref.intl,
    onAddLink = _ref.onAddLink,
    onEditLink = _ref.onEditLink,
    onOpenLink = _ref.onOpenLink,
    isInlineNode = _ref.isInlineNode,
    isViewOnly = _ref.isViewOnly,
    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
  var _useState = (0, _react.useState)(true),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    showLinkingControls = _useState2[0],
    setShowLinkingControls = _useState2[1];
  (0, _react.useEffect)(function () {
    var _stateKey$getState;
    var mediaNode = isInlineNode ? (0, _currentMediaNode.currentMediaInlineNode)(editorState) : (0, _currentMediaNode.currentMediaNode)(editorState);
    if (!mediaNode) {
      setShowLinkingControls(false);
      return;
    }
    var mediaClientConfig = (_stateKey$getState = _pluginKey.stateKey.getState(editorState)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.mediaClientConfig;
    if (!mediaClientConfig) {
      setShowLinkingControls(false);
      return;
    }
    (0, _checkMediaType.checkMediaType)(mediaNode, mediaClientConfig).then(function (mediaType) {
      setShowLinkingControls(mediaType === 'external' || mediaType === 'image');
    });
  }, [editorState, isInlineNode]);
  if (!showLinkingControls) {
    return null;
  }
  if (mediaLinkingState && mediaLinkingState.editable) {
    var isValidUrl = (0, _adfSchema.isSafeUrl)(mediaLinkingState.link);
    var title = intl.formatMessage(_messages.linkToolbarMessages.editLink);
    var linkTitle = intl.formatMessage(isValidUrl ? _messages.linkMessages.openLink : _messages.linkToolbarMessages.unableToOpenLink);
    return (0, _react2.jsx)(_react.Fragment, null, !isViewOnly && (0, _react2.jsx)("div", {
      css: wrapperStyles
    }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
      onClick: onEditLink,
      title: title,
      tooltipContent: (0, _react2.jsx)(_keymaps.ToolTipContent, {
        description: title,
        keymap: _keymaps.addLink
      }),
      testId: "edit-link-button",
      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
    }, title)), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
      target: "_blank",
      href: isValidUrl ? mediaLinkingState.link : undefined,
      disabled: !isValidUrl,
      onClick: onOpenLink,
      title: linkTitle,
      icon: (0, _react2.jsx)(_linkExternal.default, {
        color: "currentColor",
        spacing: "spacious",
        label: linkTitle
      })
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: "hyperlink-open-link",
      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
    }));
  } else {
    var _title = intl.formatMessage(_messages.linkToolbarMessages.addLink);
    return !isViewOnly ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
      testId: "add-link-button",
      onClick: onAddLink,
      title: _title,
      tooltipContent: (0, _react2.jsx)(_keymaps.ToolTipContent, {
        description: _title,
        keymap: _keymaps.addLink
      }),
      icon: (0, _react2.jsx)(_link.default, {
        color: "currentColor",
        label: _title,
        spacing: "spacious"
      }),
      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
    })) : null;
  }
};