UNPKG

@wordpress/block-library

Version:
8 lines (7 loc) 14.8 kB
{ "version": 3, "sources": ["../../src/image/use-open-image-media-editor-modal.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { useRegistry, useSelect } from '@wordpress/data';\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\n\nfunction normalizeImageBlockCaption( caption ) {\n\tif ( typeof caption !== 'string' ) {\n\t\treturn '';\n\t}\n\n\tconst textContent = stripHTML( caption ).trim();\n\n\tif ( ! textContent ) {\n\t\treturn '';\n\t}\n\n\treturn caption.replace( /\\n/g, '<br>' );\n}\n\nfunction getAttachmentCaption( attachment ) {\n\tconst caption = attachment?.caption;\n\n\tif ( typeof caption === 'string' ) {\n\t\treturn normalizeImageBlockCaption( caption );\n\t}\n\n\tif (\n\t\tcaption &&\n\t\ttypeof caption === 'object' &&\n\t\tObject.hasOwn( caption, 'raw' )\n\t) {\n\t\treturn normalizeImageBlockCaption( caption.raw );\n\t}\n\n\treturn undefined;\n}\n\nexport function getImageBlockMetadataFromAttachment( attachment ) {\n\treturn {\n\t\talt:\n\t\t\ttypeof attachment?.alt_text === 'string'\n\t\t\t\t? attachment.alt_text\n\t\t\t\t: attachment?.alt || '',\n\t\tcaption: getAttachmentCaption( attachment ),\n\t};\n}\n\nfunction normalizeMetadataAttribute( value ) {\n\treturn value || '';\n}\n\nexport function getSyncedImageBlockAttributes(\n\tcurrentAttributes,\n\toriginalAttachment,\n\tupdatedAttachment\n) {\n\tif ( ! originalAttachment || ! updatedAttachment ) {\n\t\treturn {};\n\t}\n\n\tconst originalMetadata =\n\t\tgetImageBlockMetadataFromAttachment( originalAttachment );\n\tconst updatedMetadata =\n\t\tgetImageBlockMetadataFromAttachment( updatedAttachment );\n\tconst syncedAttributes = {};\n\n\tconst normalizedCurrentAlt = normalizeMetadataAttribute(\n\t\tcurrentAttributes.alt\n\t);\n\tif (\n\t\toriginalMetadata.alt !== updatedMetadata.alt &&\n\t\t( normalizedCurrentAlt === originalMetadata.alt ||\n\t\t\t! normalizedCurrentAlt )\n\t) {\n\t\tsyncedAttributes.alt = updatedMetadata.alt;\n\t}\n\n\tconst normalizedCurrentCaption = normalizeMetadataAttribute(\n\t\tcurrentAttributes.caption\n\t);\n\tif (\n\t\toriginalMetadata.caption !== undefined &&\n\t\tupdatedMetadata.caption !== undefined &&\n\t\toriginalMetadata.caption !== updatedMetadata.caption &&\n\t\t( normalizedCurrentCaption === originalMetadata.caption ||\n\t\t\t! normalizedCurrentCaption )\n\t) {\n\t\tsyncedAttributes.caption = updatedMetadata.caption || undefined;\n\t}\n\n\treturn syncedAttributes;\n}\n\nconst { openMediaEditorModalKey } = unlock( blockEditorPrivateApis );\n// Caption sync needs `caption.raw`; view/default attachment records can contain\n// only rendered caption data or be tied to an in-flight stale resolution.\nconst ATTACHMENT_EDIT_QUERY = { context: 'edit' };\n\nfunction getAttachmentFallbackForEmptyBlockMetadata( { alt, caption } ) {\n\tconst attachment = {};\n\n\tif ( ! alt ) {\n\t\tattachment.alt_text = '';\n\t}\n\n\tif ( ! caption?.toString() ) {\n\t\tattachment.caption = '';\n\t}\n\n\treturn Object.keys( attachment ).length ? attachment : undefined;\n}\n\nfunction hasKnownAttachmentMetadata( attachment ) {\n\tif ( ! attachment ) {\n\t\treturn false;\n\t}\n\n\tconst hasKnownAlt =\n\t\ttypeof attachment.alt_text === 'string' ||\n\t\ttypeof attachment.alt === 'string';\n\tconst hasKnownCaption =\n\t\tgetImageBlockMetadataFromAttachment( attachment ).caption !== undefined;\n\n\treturn hasKnownAlt && hasKnownCaption;\n}\n\nexport function useOpenImageMediaEditorModal( { attributes, setAttributes } ) {\n\t// Keep this hook private to the Image block and pass the block attributes\n\t// object so the callsite stays compact. Destructure only the attributes\n\t// currently used for metadata sync; add more here if the sync policy grows.\n\tconst { id, url, alt, caption } = attributes;\n\tconst registry = useRegistry();\n\tconst openMediaEditorModal = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings()[ openMediaEditorModalKey ],\n\t\t[]\n\t);\n\t// Track the block's current alt and caption in a ref so handleMediaUpdate\n\t// can read the latest values without being listed as a dependency (which\n\t// would recreate the callback and re-register the onUpdate handler on every\n\t// keystroke while the modal is open).\n\tconst blockMetadataRef = useRef( { alt, caption: caption?.toString() } );\n\t// Snapshot of the attachment's metadata taken just before the modal opens,\n\t// used as the baseline for detecting what changed during the editing session.\n\tconst mediaEditorMetadataBaselineRef = useRef();\n\t// Incremented on every handleMediaUpdate call; stale async continuations\n\t// check against this to bail out if a newer update has since started.\n\tconst mediaEditorMetadataSyncRequestRef = useRef( 0 );\n\n\tuseEffect( () => {\n\t\tblockMetadataRef.current = { alt, caption: caption?.toString() };\n\t}, [ alt, caption ] );\n\n\tconst getCachedAttachmentRecord = useCallback(\n\t\t( attachmentId ) => {\n\t\t\tconst { getEditedEntityRecord, getEntityRecord } =\n\t\t\t\tregistry.select( coreStore );\n\t\t\treturn (\n\t\t\t\tgetEditedEntityRecord(\n\t\t\t\t\t'postType',\n\t\t\t\t\t'attachment',\n\t\t\t\t\tattachmentId\n\t\t\t\t) ||\n\t\t\t\tgetEntityRecord(\n\t\t\t\t\t'postType',\n\t\t\t\t\t'attachment',\n\t\t\t\t\tattachmentId,\n\t\t\t\t\tATTACHMENT_EDIT_QUERY\n\t\t\t\t) ||\n\t\t\t\tgetEntityRecord( 'postType', 'attachment', attachmentId )\n\t\t\t);\n\t\t},\n\t\t[ registry ]\n\t);\n\n\tconst resolveAttachmentRecord = useCallback(\n\t\tasync ( attachmentId ) => {\n\t\t\tconst resolveSelect = registry.resolveSelect( coreStore );\n\n\t\t\ttry {\n\t\t\t\treturn (\n\t\t\t\t\t( await resolveSelect.getEntityRecord(\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t'attachment',\n\t\t\t\t\t\tattachmentId,\n\t\t\t\t\t\tATTACHMENT_EDIT_QUERY\n\t\t\t\t\t) ) ||\n\t\t\t\t\t( await resolveSelect.getEntityRecord(\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t'attachment',\n\t\t\t\t\t\tattachmentId\n\t\t\t\t\t) )\n\t\t\t\t);\n\t\t\t} catch {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t},\n\t\t[ registry ]\n\t);\n\n\tconst resolveFreshAttachmentRecord = useCallback(\n\t\tasync ( attachmentId ) => {\n\t\t\t// Bust cached records so resolveAttachmentRecord fetches the\n\t\t\t// server state that reflects the media editor's saved changes.\n\t\t\tconst { invalidateResolution } = registry.dispatch( coreStore );\n\n\t\t\tinvalidateResolution( 'getEntityRecord', [\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\tattachmentId,\n\t\t\t] );\n\t\t\tinvalidateResolution( 'getEntityRecord', [\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\tattachmentId,\n\t\t\t\tATTACHMENT_EDIT_QUERY,\n\t\t\t] );\n\t\t\treturn resolveAttachmentRecord( attachmentId );\n\t\t},\n\t\t[ registry, resolveAttachmentRecord ]\n\t);\n\n\tconst handleMediaUpdate = useCallback(\n\t\tasync ( { id: newId, url: newUrl } ) => {\n\t\t\tif ( typeof newId !== 'number' ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Capture and clear the baseline so a rapid second save doesn't\n\t\t\t// reuse a stale snapshot.\n\t\t\tconst originalAttachment = mediaEditorMetadataBaselineRef.current;\n\t\t\tmediaEditorMetadataBaselineRef.current = undefined;\n\t\t\tconst syncRequest = ++mediaEditorMetadataSyncRequestRef.current;\n\t\t\tconst nextAttributes = {};\n\n\t\t\tif ( newId !== id ) {\n\t\t\t\tnextAttributes.id = newId;\n\t\t\t\tnextAttributes.url = newUrl ?? url;\n\t\t\t}\n\n\t\t\tif ( originalAttachment ) {\n\t\t\t\t// Fetch fresh server state so the comparison reflects what\n\t\t\t\t// the media editor actually saved, not a potentially stale\n\t\t\t\t// cache.\n\t\t\t\tconst resolvedAttachment =\n\t\t\t\t\tawait resolveFreshAttachmentRecord( newId );\n\n\t\t\t\t// A newer update started while we were awaiting; discard\n\t\t\t\t// this one.\n\t\t\t\tif (\n\t\t\t\t\tsyncRequest !== mediaEditorMetadataSyncRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Sync alt text and caption back to the block only when\n\t\t\t\t// they were changed in the media editor. Fields the user\n\t\t\t\t// has independently customised on the block (i.e. values\n\t\t\t\t// that don't match the pre-session attachment metadata)\n\t\t\t\t// are left untouched.\n\t\t\t\tconst resolvedMetadataAttributes =\n\t\t\t\t\tgetSyncedImageBlockAttributes(\n\t\t\t\t\t\tblockMetadataRef.current,\n\t\t\t\t\t\toriginalAttachment,\n\t\t\t\t\t\tresolvedAttachment\n\t\t\t\t\t);\n\n\t\t\t\tif ( Object.keys( resolvedMetadataAttributes ).length ) {\n\t\t\t\t\tObject.assign( nextAttributes, resolvedMetadataAttributes );\n\t\t\t\t\tblockMetadataRef.current = {\n\t\t\t\t\t\t...blockMetadataRef.current,\n\t\t\t\t\t\t...resolvedMetadataAttributes,\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( Object.keys( nextAttributes ).length ) {\n\t\t\t\tsetAttributes( nextAttributes );\n\t\t\t}\n\t\t},\n\t\t[ id, resolveFreshAttachmentRecord, setAttributes, url ]\n\t);\n\n\tconst openImageMediaEditorModal = useCallback( async () => {\n\t\tif ( ! id || ! openMediaEditorModal ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Snapshot the attachment's current metadata before the user makes\n\t\t// any changes so handleMediaUpdate can compare against it later.\n\t\t// Prefer a freshly resolved edit-context record for accuracy; fall\n\t\t// back to whatever is in the cache, or a minimal object derived from\n\t\t// the block's own attributes when nothing is cached yet.\n\t\tconst cachedAttachmentRecord = getCachedAttachmentRecord( id );\n\t\tconst fallbackAttachmentRecord =\n\t\t\tgetAttachmentFallbackForEmptyBlockMetadata(\n\t\t\t\tblockMetadataRef.current\n\t\t\t);\n\t\tconst resolvedAttachmentRecord = hasKnownAttachmentMetadata(\n\t\t\tcachedAttachmentRecord\n\t\t)\n\t\t\t? undefined\n\t\t\t: await resolveAttachmentRecord( id );\n\n\t\tmediaEditorMetadataBaselineRef.current =\n\t\t\tresolvedAttachmentRecord ||\n\t\t\t( hasKnownAttachmentMetadata( cachedAttachmentRecord )\n\t\t\t\t? cachedAttachmentRecord\n\t\t\t\t: fallbackAttachmentRecord ) ||\n\t\t\tcachedAttachmentRecord;\n\n\t\topenMediaEditorModal( {\n\t\t\tid,\n\t\t\tonUpdate: handleMediaUpdate,\n\t\t} );\n\t}, [\n\t\tgetCachedAttachmentRecord,\n\t\thandleMediaUpdate,\n\t\tid,\n\t\topenMediaEditorModal,\n\t\tresolveAttachmentRecord,\n\t] );\n\n\treturn id && openMediaEditorModal ? openImageMediaEditorModal : undefined;\n}\n"], "mappings": "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", "names": [] }