import { mediaApi } from '@sitecore-jss/sitecore-jss/media' ; import { h , defineComponent , PropType } from 'vue' ; import { generateHtmlTag } from '../utils' ; export interface ImageFieldValue { [ attributeName ] : any ; src ? : string ; } export interface ImageField { value ? : ImageFieldValue ; editable ? : string ; } const getEditableWrapper = ( editableMarkup ) => h ( 'span' , { class : 'sc-image-wrapper' , innerHTML : editableMarkup , } ) ; const getImageAttrs = ( { src , srcSet , ... otherAttrs } , imageParams , mediaUrlPrefix ? ) => { if ( ! src ) { return null ; } const newAttrs = { ... otherAttrs , } ; const resolvedSrc = mediaApi . updateImageUrl ( src , imageParams , mediaUrlPrefix ) ; if ( srcSet ) { newAttrs . srcSet = mediaApi . getSrcSet ( resolvedSrc , srcSet , imageParams , mediaUrlPrefix ) ; } else { newAttrs . src = resolvedSrc ; } return newAttrs ; } ; export const Image = defineComponent ( { inheritAttrs : false , props : { /** The image field data. */ media : { type : Object as PropType < ImageField | ImageFieldValue > , default ( ) { return { } as ImageField | ImageFieldValue ; } , required : true , } , /**
         * Can be used to explicitly disable inline editing.
         * If true and `media.editable` has a value, then `media.editable` will be processed
         * and rendered as component output. If false, `media.editable` value will be ignored and not rendered.
         */ editable : { type : Boolean , default : true } , /**
         * Parameters that will be attached to Sitecore media URLs
         */ imageParams : { type : Object as PropType < { [ paramName ] : string ; } > , default : ( ) => ( { } ) , } , example mediaUrlPrefix : { type : RegExp , default : undefined } , } , render ( ) { const { media , editable , imageParams , mediaUrlPrefix } = this . $props ; const contextAttrs = this . $attrs ; if ( ! media || ( ! media . editable && ! media . value && ! ( media as ImageFieldValue ) . src ) ) { return null ; } if ( editable && media . editable ) { const foundImg = mediaApi . findEditorImageTag ( media . editable ) ; if ( ! foundImg ) { return getEditableWrapper ( media . editable ) ; } const imgAttrs = getImageAttrs ( { ... foundImg . attrs , ... contextAttrs } , imageParams , mediaUrlPrefix ) ; if ( ! imgAttrs ) { return getEditableWrapper ( media . editable ) ; } const imgHtml = generateHtmlTag ( 'img' , imgAttrs ) ; const editableMarkup = media . editable . replace ( foundImg . imgTag , imgHtml ) ; return getEditableWrapper ( editableMarkup ) ; } const img = ( media as ImageFieldValue ) . src ? media : media . value ; if ( ! img ) { return null ; } const attrs = getImageAttrs ( { ... img , ... contextAttrs } , imageParams , mediaUrlPrefix ) ; if ( attrs ) { const data = { ... this . $data , ... attrs } ; return h ( 'img' , data ) ; } return null ; } , } ) ;