@wordpress/block-editor
Version:
8 lines (7 loc) • 9.58 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/link-control/link-preview.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tExternalLink,\n\t__experimentalTruncate as Truncate,\n\t__experimentalHStack as HStack,\n\tFlex,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';\nimport {\n\tIcon,\n\tglobe,\n\tinfo,\n\tlinkOff,\n\tpencil,\n\tcopySmall,\n} from '@wordpress/icons';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { ViewerSlot } from './viewer-slot';\n\nconst { Badge } = unlock( componentsPrivateApis );\n\nimport useRichUrlData from './use-rich-url-data';\n\nexport default function LinkPreview( {\n\tvalue,\n\tonEditClick,\n\thasRichPreviews = false,\n\thasUnlinkControl = false,\n\tonRemove,\n} ) {\n\tconst showIconLabels = useSelect(\n\t\t( select ) =>\n\t\t\tselect( preferencesStore ).get( 'core', 'showIconLabels' ),\n\t\t[]\n\t);\n\n\t// Avoid fetching if rich previews are not desired.\n\tconst showRichPreviews = hasRichPreviews ? value?.url : null;\n\n\tconst { richData, isFetching } = useRichUrlData( showRichPreviews );\n\n\t// Rich data may be an empty object so test for that.\n\tconst hasRichData = richData && Object.keys( richData ).length;\n\n\tconst displayURL =\n\t\t( value && filterURLForDisplay( safeDecodeURI( value.url ), 24 ) ) ||\n\t\t'';\n\n\t// url can be undefined if the href attribute is unset\n\tconst isEmptyURL = ! value?.url?.length;\n\n\tconst displayTitle =\n\t\t! isEmptyURL &&\n\t\tstripHTML( richData?.title || value?.title || displayURL );\n\n\tlet icon;\n\n\tif ( richData?.icon ) {\n\t\ticon = <img src={ richData?.icon } alt=\"\" />;\n\t} else if ( isEmptyURL ) {\n\t\ticon = <Icon icon={ info } size={ 32 } />;\n\t} else {\n\t\ticon = <Icon icon={ globe } />;\n\t}\n\n\tconst { createNotice } = useDispatch( noticesStore );\n\tconst ref = useCopyToClipboard( value.url, () => {\n\t\tcreateNotice( 'info', __( 'Link copied to clipboard.' ), {\n\t\t\tisDismissible: true,\n\t\t\ttype: 'snackbar',\n\t\t} );\n\t} );\n\n\treturn (\n\t\t<Flex\n\t\t\trole=\"group\"\n\t\t\taria-label={ __( 'Manage link' ) }\n\t\t\tclassName={ clsx( 'block-editor-link-control__preview', {\n\t\t\t\t'is-current': true,\n\t\t\t\t'is-rich': hasRichData,\n\t\t\t\t'is-fetching': !! isFetching,\n\t\t\t\t'is-preview': true,\n\t\t\t\t'is-error': isEmptyURL,\n\t\t\t\t'is-url-title': displayTitle === displayURL,\n\t\t\t} ) }\n\t\t>\n\t\t\t<Flex gap={ 0 } align=\"flex-start\">\n\t\t\t\t<Flex\n\t\t\t\t\tclassName=\"block-editor-link-control__link-information\"\n\t\t\t\t\trole=\"figure\"\n\t\t\t\t\taria-label={\n\t\t\t\t\t\t/* translators: Accessibility text for the link preview when editing a link. */\n\t\t\t\t\t\t__( 'Link information' )\n\t\t\t\t\t}\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t>\n\t\t\t\t\t{ value?.image ? (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tclassName=\"block-editor-link-control__preview-image\"\n\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<img src={ value?.image } alt=\"\" />\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'block-editor-link-control__preview-icon',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-image': richData?.icon,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t\t<Flex\n\t\t\t\t\t\tclassName=\"block-editor-link-control__preview-details\"\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tgap={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isEmptyURL ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-link-control__preview-title\"\n\t\t\t\t\t\t\t\t\thref={ value.url }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Truncate numberOfLines={ 1 }>\n\t\t\t\t\t\t\t\t\t\t{ displayTitle }\n\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t\t<span className=\"block-editor-link-control__preview-info\">\n\t\t\t\t\t\t\t\t\t<Truncate numberOfLines={ 1 }>\n\t\t\t\t\t\t\t\t\t\t{ displayURL }\n\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{ value?.badges?.length > 0 && (\n\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-link-control__preview-badges\"\n\t\t\t\t\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ value.badges.map(\n\t\t\t\t\t\t\t\t\t\t\t( badge, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `${ badge.label }|${ badge.intent }|${ index }` }\n\t\t\t\t\t\t\t\t\t\t\t\t\tintent={ badge.intent }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ badge.label }\n\t\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span className=\"block-editor-link-control__preview-error-notice\">\n\t\t\t\t\t\t\t\t{ __( 'Link is empty' ) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t</Flex>\n\t\t\t\t<Button\n\t\t\t\t\ticon={ pencil }\n\t\t\t\t\tlabel={ __( 'Edit link' ) }\n\t\t\t\t\tonClick={ onEditClick }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t/>\n\t\t\t\t{ hasUnlinkControl && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ linkOff }\n\t\t\t\t\t\tlabel={ __( 'Remove link' ) }\n\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<Button\n\t\t\t\t\ticon={ copySmall }\n\t\t\t\t\tlabel={ __( 'Copy link' ) }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ isEmptyURL }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t/>\n\t\t\t\t<ViewerSlot fillProps={ value } />\n\t\t\t</Flex>\n\t\t</Flex>\n\t);\n}\n"],
"mappings": "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",
"names": []
}