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

Generic block editor.

import { createElement, Fragment } from "@gechiui/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * GeChiUI dependencies
 */

import { __ } from '@gechiui/i18n';
import { Button, ExternalLink, __experimentalText as Text } from '@gechiui/components';
import { filterURLForDisplay, safeDecodeURI } from '@gechiui/url';
import { Icon, globe, info, linkOff, edit } from '@gechiui/icons';
import { __unstableStripHTML as stripHTML } from '@gechiui/dom';
/**
 * Internal dependencies
 */

import { ViewerSlot } from './viewer-slot';
import useRichUrlData from './use-rich-url-data';
export default function LinkPreview(_ref) {
  var _value$url;

  let {
    value,
    onEditClick,
    hasRichPreviews = false,
    hasUnlinkControl = false,
    onRemove
  } = _ref;
  // Avoid fetching if rich previews are not desired.
  const showRichPreviews = hasRichPreviews ? value === null || value === void 0 ? void 0 : value.url : null;
  const {
    richData,
    isFetching
  } = useRichUrlData(showRichPreviews); // Rich data may be an empty object so test for that.

  const hasRichData = richData && Object.keys(richData).length;
  const displayURL = value && filterURLForDisplay(safeDecodeURI(value.url), 16) || '';
  const displayTitle = (richData === null || richData === void 0 ? void 0 : richData.title) || (value === null || value === void 0 ? void 0 : value.title) || displayURL; // url can be undefined if the href attribute is unset

  const isEmptyURL = !(value !== null && value !== void 0 && (_value$url = value.url) !== null && _value$url !== void 0 && _value$url.length);
  let icon;

  if (richData !== null && richData !== void 0 && richData.icon) {
    icon = createElement("img", {
      src: richData === null || richData === void 0 ? void 0 : richData.icon,
      alt: ""
    });
  } else if (isEmptyURL) {
    icon = createElement(Icon, {
      icon: info,
      size: 32
    });
  } else {
    icon = createElement(Icon, {
      icon: globe
    });
  }

  return createElement("div", {
    "aria-label": __('当前选择'),
    "aria-selected": "true",
    className: classnames('block-editor-link-control__search-item', {
      'is-current': true,
      'is-rich': hasRichData,
      'is-fetching': !!isFetching,
      'is-preview': true,
      'is-error': isEmptyURL
    })
  }, createElement("div", {
    className: "block-editor-link-control__search-item-top"
  }, createElement("span", {
    className: "block-editor-link-control__search-item-header"
  }, createElement("span", {
    className: classnames('block-editor-link-control__search-item-icon', {
      'is-image': richData === null || richData === void 0 ? void 0 : richData.icon
    })
  }, icon), createElement("span", {
    className: "block-editor-link-control__search-item-details"
  }, !isEmptyURL ? createElement(Fragment, null, createElement(ExternalLink, {
    className: "block-editor-link-control__search-item-title",
    href: value.url
  }, stripHTML(displayTitle)), (value === null || value === void 0 ? void 0 : value.url) && createElement("span", {
    className: "block-editor-link-control__search-item-info"
  }, displayURL)) : createElement("span", {
    className: "block-editor-link-control__search-item-error-notice"
  }, "Link is empty"))), createElement(Button, {
    icon: edit,
    label: __('编辑'),
    className: "block-editor-link-control__search-item-action",
    onClick: onEditClick,
    iconSize: 24
  }), hasUnlinkControl && createElement(Button, {
    icon: linkOff,
    label: __('移除链接'),
    className: "block-editor-link-control__search-item-action block-editor-link-control__unlink",
    onClick: onRemove,
    iconSize: 24
  }), createElement(ViewerSlot, {
    fillProps: value
  })), (hasRichData && ((richData === null || richData === void 0 ? void 0 : richData.image) || (richData === null || richData === void 0 ? void 0 : richData.description)) || isFetching) && createElement("div", {
    className: "block-editor-link-control__search-item-bottom"
  }, ((richData === null || richData === void 0 ? void 0 : richData.image) || isFetching) && createElement("div", {
    "aria-hidden": !(richData !== null && richData !== void 0 && richData.image),
    className: classnames('block-editor-link-control__search-item-image', {
      'is-placeholder': !(richData !== null && richData !== void 0 && richData.image)
    })
  }, (richData === null || richData === void 0 ? void 0 : richData.image) && createElement("img", {
    src: richData === null || richData === void 0 ? void 0 : richData.image,
    alt: ""
  })), ((richData === null || richData === void 0 ? void 0 : richData.description) || isFetching) && createElement("div", {
    "aria-hidden": !(richData !== null && richData !== void 0 && richData.description),
    className: classnames('block-editor-link-control__search-item-description', {
      'is-placeholder': !(richData !== null && richData !== void 0 && richData.description)
    })
  }, (richData === null || richData === void 0 ? void 0 : richData.description) && createElement(Text, {
    truncate: true,
    numberOfLines: "2"
  }, richData.description))));
}
//# sourceMappingURL=link-preview.js.map