@wordpress/block-editor/build/components/link-control/link-preview.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = LinkPreview;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _url = require("@wordpress/url");
var _icons = require("@wordpress/icons");
var _dom = require("@wordpress/dom");
var _data = require("@wordpress/data");
var _notices = require("@wordpress/notices");
var _preferences = require("@wordpress/preferences");
var _viewerSlot = require("./viewer-slot");
var _useRichUrlData = _interopRequireDefault(require("./use-rich-url-data"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Filters the title for display. Removes the protocol and www prefix.
 *
 * @param {string} title The title to be filtered.
 *
 * @return {string} The filtered title.
 */function filterTitleForDisplay(title) {
  // Derived from `filterURLForDisplay` in `@wordpress/url`.
  return title.replace(/^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '').replace(/^www\./i, '');
}
function LinkPreview({
  value,
  onEditClick,
  hasRichPreviews = false,
  hasUnlinkControl = false,
  onRemove
}) {
  const showIconLabels = (0, _data.useSelect)(select => select(_preferences.store).get('core', 'showIconLabels'), []);

  // Avoid fetching if rich previews are not desired.
  const showRichPreviews = hasRichPreviews ? value?.url : null;
  const {
    richData,
    isFetching
  } = (0, _useRichUrlData.default)(showRichPreviews);

  // Rich data may be an empty object so test for that.
  const hasRichData = richData && Object.keys(richData).length;
  const displayURL = value && (0, _url.filterURLForDisplay)((0, _url.safeDecodeURI)(value.url), 24) || '';

  // url can be undefined if the href attribute is unset
  const isEmptyURL = !value?.url?.length;
  const displayTitle = !isEmptyURL && (0, _dom.__unstableStripHTML)(richData?.title || value?.title || displayURL);
  const isUrlRedundant = !value?.url || filterTitleForDisplay(displayTitle) === displayURL;
  let icon;
  if (richData?.icon) {
    icon = /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
      src: richData?.icon,
      alt: ""
    });
  } else if (isEmptyURL) {
    icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
      icon: _icons.info,
      size: 32
    });
  } else {
    icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
      icon: _icons.globe
    });
  }
  const {
    createNotice
  } = (0, _data.useDispatch)(_notices.store);
  const ref = (0, _compose.useCopyToClipboard)(value.url, () => {
    createNotice('info', (0, _i18n.__)('Link copied to clipboard.'), {
      isDismissible: true,
      type: 'snackbar'
    });
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    role: "group",
    "aria-label": (0, _i18n.__)('Manage link'),
    className: (0, _clsx.default)('block-editor-link-control__search-item', {
      'is-current': true,
      'is-rich': hasRichData,
      'is-fetching': !!isFetching,
      'is-preview': true,
      'is-error': isEmptyURL,
      'is-url-title': displayTitle === displayURL
    }),
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "block-editor-link-control__search-item-top",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
        className: "block-editor-link-control__search-item-header",
        role: "figure",
        "aria-label": /* translators: Accessibility text for the link preview when editing a link. */
        (0, _i18n.__)('Link information'),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: (0, _clsx.default)('block-editor-link-control__search-item-icon', {
            'is-image': richData?.icon
          }),
          children: icon
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "block-editor-link-control__search-item-details",
          children: !isEmptyURL ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
              className: "block-editor-link-control__search-item-title",
              href: value.url,
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
                numberOfLines: 1,
                children: displayTitle
              })
            }), !isUrlRedundant && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
              className: "block-editor-link-control__search-item-info",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
                numberOfLines: 1,
                children: displayURL
              })
            })]
          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            className: "block-editor-link-control__search-item-error-notice",
            children: (0, _i18n.__)('Link is empty')
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        icon: _icons.edit,
        label: (0, _i18n.__)('Edit link'),
        onClick: onEditClick,
        size: "compact",
        showTooltip: !showIconLabels
      }), hasUnlinkControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        icon: _icons.linkOff,
        label: (0, _i18n.__)('Remove link'),
        onClick: onRemove,
        size: "compact",
        showTooltip: !showIconLabels
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        icon: _icons.copySmall,
        label: (0, _i18n.__)('Copy link'),
        ref: ref,
        accessibleWhenDisabled: true,
        disabled: isEmptyURL,
        size: "compact",
        showTooltip: !showIconLabels
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_viewerSlot.ViewerSlot, {
        fillProps: value
      })]
    })
  });
}
//# sourceMappingURL=link-preview.js.map