@elementor/editor-canvas 0.7.1 → 0.9.0

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/init.tsx","../src/components/elements-overlays.tsx","../src/components/element-overlay.tsx","../src/hooks/use-bind-react-props-to-element.ts","../src/hooks/use-floating-on-element.ts","../src/init-styles-renderer.ts","../src/styles-renderer/transformers/background-color-overlay-transformer.ts","../src/styles-renderer/transformers/background-image-overlay-transformer.ts","../src/styles-renderer/transformers/background-transformer.ts","../src/styles-renderer/transformers/create-combine-array-transformer.ts","../src/styles-renderer/multi-props.ts","../src/styles-renderer/transformers/create-corner-sizes-transformer.ts","../src/styles-renderer/transformers/create-edge-sizes-transformer.ts","../src/styles-renderer/transformers/dimensions.ts","../src/styles-renderer/transformers/image-attachment.ts","../src/styles-renderer/transformers/image-src.ts","../src/styles-renderer/transformers/layout-direction-transformer.ts","../src/styles-renderer/transformers/primitive-transformer.ts","../src/styles-renderer/transformers/shadow-transformer.ts","../src/styles-renderer/transformers/size-transformer.ts","../src/styles-renderer/transformers/stroke-transformer.ts","../src/styles-renderer/transformers/index.ts","../src/styles-renderer/render.ts","../src/styles-renderer/errors.ts","../src/styles-renderer/resolve.ts","../src/styles-renderer/enqueue-used-fonts.ts","../src/sync/enqueue-font.ts","../src/sync/get-canvas-iframe-body.ts","../src/index.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { ElementsOverlays } from './components/elements-overlays';\nimport { initStylesRenderer } from './init-styles-renderer';\n\nexport function init() {\n\tinitStylesRenderer();\n\n\tinjectIntoTop( {\n\t\tid: 'elements-overlays',\n\t\tcomponent: ElementsOverlays,\n\t} );\n}\n","import * as React from 'react';\nimport { useElementsDomRef, useSelectedElement } from '@elementor/editor-elements';\nimport {\n\t__privateUseIsPreviewMode as useIsPreviewMode,\n\t__privateUseIsRouteActive as useIsRouteActive,\n} from '@elementor/editor-v1-adapters';\n\nimport { ElementOverlay } from './element-overlay';\n\nexport function ElementsOverlays() {\n\tconst selected = useSelectedElement();\n\tconst domElements = useElementsDomRef();\n\n\tconst isPreviewMode = useIsPreviewMode();\n\tconst isKitRouteActive = useIsRouteActive( 'panel/global' );\n\n\tconst isActive = ! isPreviewMode && ! isKitRouteActive;\n\n\treturn (\n\t\tisActive &&\n\t\tdomElements.map( ( el ) => (\n\t\t\t<ElementOverlay\n\t\t\t\telement={ el }\n\t\t\t\tkey={ el.dataset.id }\n\t\t\t\tisSelected={ selected.element?.id === el.dataset.id }\n\t\t\t/>\n\t\t) )\n\t);\n}\n","import * as React from 'react';\nimport { Box, styled } from '@elementor/ui';\nimport { FloatingPortal, useHover, useInteractions } from '@floating-ui/react';\n\nimport { useBindReactPropsToElement } from '../hooks/use-bind-react-props-to-element';\nimport { useFloatingOnElement } from '../hooks/use-floating-on-element';\n\nexport const CANVAS_WRAPPER_ID = 'elementor-preview-responsive-wrapper';\n\ntype Props = {\n\telement: HTMLElement;\n\tisSelected: boolean;\n};\n\nconst OverlayBox = styled( Box, { shouldForwardProp: ( prop ) => prop !== 'isSelected' } )<\n\tPick< Props, 'isSelected' >\n>( ( { theme, isSelected } ) => ( {\n\toutline: `${ isSelected ? '2px' : '1px' } solid ${ theme.palette.primary.light }`,\n\toutlineOffset: isSelected ? '-2px' : '-1px',\n\tpointerEvents: 'none',\n} ) );\n\nexport function ElementOverlay( { element, isSelected }: Props ) {\n\tconst { context, floating, isVisible } = useFloatingOnElement( { element, isSelected } );\n\tconst { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );\n\n\tuseBindReactPropsToElement( element, getReferenceProps );\n\n\treturn (\n\t\tisVisible && (\n\t\t\t<FloatingPortal id={ CANVAS_WRAPPER_ID }>\n\t\t\t\t<OverlayBox\n\t\t\t\t\tref={ floating.setRef }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tstyle={ floating.styles }\n\t\t\t\t\tdata-element-overlay={ element.dataset.id }\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t{ ...getFloatingProps() }\n\t\t\t\t/>\n\t\t\t</FloatingPortal>\n\t\t)\n\t);\n}\n","import { useEffect } from 'react';\n\ntype Props = Record< string, unknown >;\n\nexport function useBindReactPropsToElement( element: HTMLElement, getProps: () => Props ) {\n\tuseEffect( () => {\n\t\tconst el = element;\n\n\t\tconst { events, attrs } = groupProps( getProps() );\n\n\t\tevents.forEach( ( [ eventName, listener ] ) => el.addEventListener( eventName, listener ) );\n\t\tattrs.forEach( ( [ attrName, attrValue ] ) => el.setAttribute( attrName, attrValue ) );\n\n\t\treturn () => {\n\t\t\tevents.forEach( ( [ eventName, listener ] ) => el.removeEventListener( eventName, listener ) );\n\t\t\tattrs.forEach( ( [ attrName ] ) => el.removeAttribute( attrName ) );\n\t\t};\n\t}, [ getProps, element ] );\n}\n\ntype GroupedProps = {\n\tevents: Array< [ string, () => void ] >;\n\tattrs: Array< [ string, string ] >;\n};\n\nfunction groupProps( props: Props ) {\n\tconst eventRegex = /^on(?=[A-Z])/;\n\n\treturn Object.entries( props ).reduce< GroupedProps >(\n\t\t( acc, [ propName, propValue ] ) => {\n\t\t\tif ( ! eventRegex.test( propName ) ) {\n\t\t\t\tacc.attrs.push( [ propName, propValue as string ] );\n\n\t\t\t\treturn acc;\n\t\t\t}\n\n\t\t\tconst eventName = propName.replace( eventRegex, '' ).toLowerCase();\n\t\t\tconst listener = propValue as () => void;\n\n\t\t\tacc.events.push( [ eventName, listener ] );\n\n\t\t\treturn acc;\n\t\t},\n\t\t{\n\t\t\tevents: [],\n\t\t\tattrs: [],\n\t\t}\n\t);\n}\n","import { useState } from 'react';\nimport { autoUpdate, offset, size, useFloating } from '@floating-ui/react';\n\ntype Options = {\n\telement: HTMLElement;\n\tisSelected: boolean;\n};\n\nexport function useFloatingOnElement( { element, isSelected }: Options ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst { refs, floatingStyles, context } = useFloating( {\n\t\t// Must be controlled for interactions (like hover) to work.\n\t\topen: isOpen || isSelected,\n\t\tonOpenChange: setIsOpen,\n\n\t\t// Add an animation frame to support scroll events (without it the floating element will stay in the same position).\n\t\twhileElementsMounted: ( ...args ) => autoUpdate( ...args, { animationFrame: true } ),\n\n\t\t// The first element in the canvas is `display: contents` so we need to use the first child.\n\t\telements: { reference: element.firstElementChild },\n\n\t\tmiddleware: [\n\t\t\t// Match the floating element's size to the reference element.\n\t\t\tsize( {\n\t\t\t\tapply( { elements, rects } ) {\n\t\t\t\t\tObject.assign( elements.floating.style, {\n\t\t\t\t\t\twidth: `${ rects.reference.width }px`,\n\t\t\t\t\t\theight: `${ rects.reference.height }px`,\n\t\t\t\t\t} );\n\t\t\t\t},\n\t\t\t} ),\n\n\t\t\t// Center the floating element on the reference element.\n\t\t\toffset( ( { rects } ) => -rects.reference.height / 2 - rects.floating.height / 2 ),\n\t\t],\n\t} );\n\n\treturn {\n\t\tisVisible: isOpen || isSelected,\n\t\tcontext,\n\t\tfloating: {\n\t\t\tsetRef: refs.setFloating,\n\t\t\tref: refs.floating,\n\t\t\tstyles: floatingStyles,\n\t\t},\n\t};\n}\n","import { getBreakpointsMap } from '@elementor/editor-responsive';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\n\nimport { render, transformers } from './styles-renderer';\nimport enqueueUsedFonts from './styles-renderer/enqueue-used-fonts';\nimport { getCanvasIframeBody } from './sync/get-canvas-iframe-body';\n\nconst WRAPPER_DATA_ATTR = 'data-styles-container';\nconst SELECTOR_PREFIX = '.elementor';\n\nexport function initStylesRenderer() {\n\tlet abortController: AbortController | null = null;\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tstylesRepository.subscribe( async () => {\n\t\t\tconst styleContainer = getStylesContainer();\n\t\t\tconst breakpoints = getBreakpointsMap();\n\n\t\t\t// Styles should be printed in a reversed order, so the high priority styles will be printed last.\n\t\t\tconst styles = stylesRepository.all().reverse();\n\n\t\t\tif ( abortController ) {\n\t\t\t\tabortController.abort();\n\t\t\t}\n\n\t\t\tabortController = new AbortController();\n\n\t\t\tstyleContainer.innerHTML = await render( {\n\t\t\t\ttransformers,\n\t\t\t\tstyles,\n\t\t\t\tbreakpoints,\n\t\t\t\tselectorPrefix: SELECTOR_PREFIX,\n\t\t\t\tsignal: abortController.signal,\n\t\t\t} );\n\n\t\t\tenqueueUsedFonts( styles );\n\t\t} );\n\t} );\n}\n\nfunction getStylesContainer() {\n\tconst preview = getCanvasIframeBody();\n\tconst stylesContainer = preview?.querySelector( `[${ WRAPPER_DATA_ATTR }]` );\n\n\tif ( stylesContainer ) {\n\t\treturn stylesContainer;\n\t}\n\n\tconst el = createStylesContainer();\n\n\tpreview?.prepend( el );\n\n\treturn el;\n}\n\nfunction createStylesContainer() {\n\tconst el = document.createElement( 'div' );\n\tel.style.display = 'none';\n\tel.setAttribute( WRAPPER_DATA_ATTR, '' );\n\n\treturn el;\n}\n","import { type BackgroundColorOverlayPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst backgroundColorOverlayTransformer: Transformer< BackgroundColorOverlayPropValue[ 'value' ] > = ( value ) => {\n\treturn `linear-gradient(${ value }, ${ value })`;\n};\n\nexport default backgroundColorOverlayTransformer;\n","import { type BackgroundImageOverlayPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nexport const defaultPositionValue = '0% 0%';\n\nconst backgroundImageOverlayTransformer: Transformer< BackgroundImageOverlayPropValue[ 'value' ] > = ( value ) => {\n\tconst { 'image-src': imageSrc, size = null, position = null, repeat = null, attachment = null } = value;\n\n\tlet resultBackgroundStyle = imageSrc;\n\n\tif ( repeat ) {\n\t\tresultBackgroundStyle += ` ${ repeat }`;\n\t}\n\n\tif ( attachment ) {\n\t\tresultBackgroundStyle += ` ${ attachment }`;\n\t}\n\n\tif ( position && ! size ) {\n\t\tresultBackgroundStyle += ` ${ position }`;\n\t}\n\n\tif ( size ) {\n\t\tresultBackgroundStyle += ` ${ position || defaultPositionValue } / ${ size }`;\n\t}\n\n\treturn resultBackgroundStyle;\n};\n\nexport default backgroundImageOverlayTransformer;\n","import { type BackgroundPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst backgroundTransformer: Transformer< BackgroundPropValue[ 'value' ] > = ( value ) => {\n\tconst overlays = value[ 'background-overlay' ] ?? '';\n\tconst color = value.color ?? '';\n\n\treturn `${ overlays } ${ color }`.trim();\n};\n\nexport default backgroundTransformer;\n","import { type Transformer } from '../types';\n\ntype CreateCombineArrayTransformer = ( delimiter: string ) => Transformer< Array< string | number > >;\n\nconst createCombineArrayTransformer: CreateCombineArrayTransformer = ( delimiter ) => {\n\treturn ( value ) => value.filter( Boolean ).join( delimiter );\n};\n\nexport default createCombineArrayTransformer;\n","import { type Props, type PropValue } from '@elementor/editor-props';\n\nexport type MultiProps = {\n\t'$$multi-props': true;\n\tvalue: Props;\n};\n\nexport const isMultiProps = ( propValue: PropValue ): propValue is MultiProps => {\n\treturn (\n\t\t!! propValue &&\n\t\ttypeof propValue === 'object' &&\n\t\t'$$multi-props' in propValue &&\n\t\tpropValue[ '$$multi-props' ] === true\n\t);\n};\n\nexport const createMultiPropsValue = ( props: Props ): MultiProps => {\n\treturn {\n\t\t'$$multi-props': true,\n\t\tvalue: props,\n\t};\n};\n\nexport const getMultiPropsValue = ( multiProps: MultiProps ): Props => {\n\treturn multiProps.value;\n};\n","import { type Props, type PropValue } from '@elementor/editor-props';\n\nimport { createMultiPropsValue } from '../multi-props';\nimport { type Transformer } from '../types';\n\nexport type CornerSizes = {\n\ttop?: PropValue;\n\tright?: PropValue;\n\tbottom?: PropValue;\n\tleft?: PropValue;\n};\n\nexport type CreateCornerSizesTransformer = (\n\tkeyGenerator: ( cornerKey: string ) => string\n) => Transformer< CornerSizes >;\n\nconst validCorners = [ 'top-left', 'top-right', 'bottom-left', 'bottom-right' ];\n\nconst createCornerSizesTransformer: CreateCornerSizesTransformer = ( keyGenerator ) => ( value ) => {\n\tconst props = Object.entries( value ).reduce< Props >( ( acc, [ corner, cornerValue ] ) => {\n\t\tif ( validCorners.includes( corner ) ) {\n\t\t\tconst key = keyGenerator( corner );\n\n\t\t\tacc[ key ] = cornerValue;\n\t\t}\n\n\t\treturn acc;\n\t}, {} );\n\n\treturn createMultiPropsValue( props );\n};\n\nexport default createCornerSizesTransformer;\n","import { type Props, type PropValue } from '@elementor/editor-props';\n\nimport { createMultiPropsValue } from '../multi-props';\nimport { type Transformer } from '../types';\n\nexport type EdgeSizes = {\n\ttop?: PropValue;\n\tright?: PropValue;\n\tbottom?: PropValue;\n\tleft?: PropValue;\n};\n\nexport type CreateEdgeSizesTransformer = ( keyGenerator: ( edgeKey: string ) => string ) => Transformer< EdgeSizes >;\n\nconst validEdges = [ 'top', 'right', 'bottom', 'left' ];\n\nconst createEdgeSizesTransformer: CreateEdgeSizesTransformer = ( keyGenerator ) => ( value ) => {\n\tconst props = Object.entries( value ).reduce< Props >( ( acc, [ edge, edgeValue ] ) => {\n\t\tif ( validEdges.includes( edge ) ) {\n\t\t\tconst key = keyGenerator( edge );\n\n\t\t\tacc[ key ] = edgeValue;\n\t\t}\n\n\t\treturn acc;\n\t}, {} );\n\n\treturn createMultiPropsValue( props );\n};\n\nexport default createEdgeSizesTransformer;\n","import { type DimensionsPropValue, type Props } from '@elementor/editor-props';\n\nimport { createMultiPropsValue } from '../multi-props';\nimport { type Transformer } from '../types';\n\nconst validKeys = [ 'top', 'right', 'bottom', 'left' ];\n\nconst dimensions: Transformer< DimensionsPropValue[ 'value' ] > = ( value, { key } ) => {\n\tconst parsed = Object.entries( value ).reduce< Props >( ( acc, [ dimensionKey, dimensionValue ] ) => {\n\t\tif ( dimensionValue && validKeys.includes( dimensionKey ) ) {\n\t\t\tacc[ `${ key }-${ dimensionKey }` ] = dimensionValue;\n\t\t}\n\n\t\treturn acc;\n\t}, {} );\n\n\treturn createMultiPropsValue( parsed );\n};\n\nexport default dimensions;\n","import { type ImageSrcPropValue } from '@elementor/editor-props';\nimport { getMediaAttachment } from '@elementor/wp-media';\n\nimport { type Transformer } from '../types';\n\nexport const imageAttachmentTransformer: Transformer< ImageSrcPropValue[ 'value' ][ 'id' ] > = async ( value ) => {\n\tconst attachment = await getMediaAttachment( { id: value } );\n\n\tif ( ! attachment ) {\n\t\treturn null;\n\t}\n\n\treturn attachment.url;\n};\n","import { type ImageSrcPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nexport const imageSrcTransformer: Transformer< ImageSrcPropValue[ 'value' ] > = ( value ) => {\n\tconst url = value.id ?? value.url?.value;\n\n\tif ( url ) {\n\t\treturn `url(${ url })`;\n\t}\n};\n","import { type LayoutDirectionPropValue, type Props } from '@elementor/editor-props';\n\nimport { createMultiPropsValue } from '../multi-props';\nimport { type Transformer } from '../types';\n\nconst validKeys = [ 'row', 'column' ];\n\nconst layoutDirectionTransformer: Transformer< LayoutDirectionPropValue[ 'value' ] > = ( value, { key } ) => {\n\tconst parsed = Object.entries( value ).reduce< Props >( ( acc, [ dimensionKey, dimensionValue ] ) => {\n\t\tif ( dimensionValue && validKeys.includes( dimensionKey ) ) {\n\t\t\tacc[ `${ dimensionKey }-${ key }` ] = dimensionValue;\n\t\t}\n\n\t\treturn acc;\n\t}, {} );\n\n\treturn createMultiPropsValue( parsed );\n};\n\nexport default layoutDirectionTransformer;\n","import { type Transformer } from '../types';\n\ntype Primitive = string | number | boolean;\n\nexport const primitiveTransformer: Transformer< Primitive > = ( value ) => {\n\treturn value;\n};\n","import { type ShadowPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst shadowTransformer: Transformer< ShadowPropValue[ 'value' ] > = ( value ) => {\n\treturn [ value.hOffset, value.vOffset, value.blur, value.spread, value.color, value.position ]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n};\n\nexport default shadowTransformer;\n","import { type SizePropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst sizeTransformer: Transformer< SizePropValue[ 'value' ] > = ( value ) => {\n\treturn `${ value.size }${ value.unit }`;\n};\n\nexport default sizeTransformer;\n","import { type StrokePropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst strokeTransformer: Transformer< StrokePropValue[ 'value' ] > = ( value ) => {\n\treturn `${ value.width } ${ value.color }`;\n};\n\nexport default strokeTransformer;\n","import { type TransformersMap } from '../types';\nimport backgroundColorOverlayTransformer from './background-color-overlay-transformer';\nimport backgroundImageOverlayTransformer from './background-image-overlay-transformer';\nimport { default as background } from './background-transformer';\nimport { default as createCombineArrayTransformer } from './create-combine-array-transformer';\nimport createCornerSizesTransformer from './create-corner-sizes-transformer';\nimport createEdgeSizesTransformer from './create-edge-sizes-transformer';\nimport { default as dimensions } from './dimensions';\nimport { imageAttachmentTransformer } from './image-attachment';\nimport { imageSrcTransformer } from './image-src';\nimport { default as layoutDirection } from './layout-direction-transformer';\nimport { primitiveTransformer } from './primitive-transformer';\nimport { default as shadow } from './shadow-transformer';\nimport { default as size } from './size-transformer';\nimport { default as stroke } from './stroke-transformer';\n\nexport default {\n\tsize,\n\tshadow,\n\tstroke,\n\tbackground,\n\n\tcolor: primitiveTransformer,\n\tnumber: primitiveTransformer,\n\tstring: primitiveTransformer,\n\n\tdimensions,\n\t'background-color-overlay': backgroundColorOverlayTransformer,\n\t'background-image-overlay': backgroundImageOverlayTransformer,\n\t'background-overlay': createCombineArrayTransformer( ',' ),\n\n\t'box-shadow': createCombineArrayTransformer( ',' ),\n\n\t'border-width': createEdgeSizesTransformer( ( edgeKey ) => `border-${ edgeKey }-width` ),\n\t'border-radius': createCornerSizesTransformer( ( cornerKey ) => `border-${ cornerKey }-radius` ),\n\n\t'image-attachment-id': imageAttachmentTransformer,\n\t'image-src': imageSrcTransformer,\n\n\t'layout-direction': layoutDirection,\n} satisfies TransformersMap;\n","import { type Props } from '@elementor/editor-props';\nimport { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';\nimport {\n\tgetStylesSchema,\n\ttype StyleDefinition,\n\ttype StyleDefinitionState,\n\ttype StyleDefinitionType,\n} from '@elementor/editor-styles';\n\nimport { UnknownStyleTypeError } from './errors';\nimport { resolve } from './resolve';\nimport { type TransformersMap } from './types';\n\ntype RenderParams = {\n\ttransformers: TransformersMap;\n\tstyles: StyleDefinition[];\n\tbreakpoints: BreakpointsMap;\n\tselectorPrefix?: string;\n\tsignal?: AbortSignal;\n};\n\nconst SELECTORS_MAP: Record< StyleDefinitionType, string > = {\n\tclass: '.',\n};\n\nexport default async function render( {\n\ttransformers,\n\tstyles,\n\tbreakpoints,\n\tselectorPrefix = '',\n\tsignal,\n}: RenderParams ) {\n\tconst stylesCssPromises = styles.map( async ( style ) => {\n\t\tconst variantCssPromises = Object.values( style.variants ).map( async ( variant ) => {\n\t\t\tconst css = await propsToCss( variant.props, transformers, signal );\n\n\t\t\treturn createStyleWrapper()\n\t\t\t\t.forStyle( style )\n\t\t\t\t.withPrefix( selectorPrefix )\n\t\t\t\t.withState( variant.meta.state )\n\t\t\t\t.withMediaQuery( variant.meta.breakpoint ? breakpoints[ variant.meta.breakpoint ] : null )\n\t\t\t\t.wrap( css );\n\t\t} );\n\n\t\tconst variantsCss = await Promise.all( variantCssPromises );\n\n\t\treturn wrapCssWithStyleElement( style.id, variantsCss.join( '' ) );\n\t} );\n\n\tconst stylesCss = await Promise.all( stylesCssPromises );\n\n\treturn stylesCss.join( '' );\n}\n\nfunction createStyleWrapper( value: string = '', wrapper?: ( css: string ) => string ) {\n\treturn {\n\t\tforStyle: ( { id, type }: StyleDefinition ) => {\n\t\t\tconst symbol = SELECTORS_MAP[ type ];\n\n\t\t\tif ( ! symbol ) {\n\t\t\t\tthrow new UnknownStyleTypeError( { context: { type } } );\n\t\t\t}\n\n\t\t\treturn createStyleWrapper( `${ value }${ symbol }${ id }`, wrapper );\n\t\t},\n\n\t\twithPrefix: ( prefix: string ) =>\n\t\t\tcreateStyleWrapper( [ prefix, value ].filter( Boolean ).join( ' ' ), wrapper ),\n\n\t\twithState: ( state: StyleDefinitionState ) =>\n\t\t\tcreateStyleWrapper( state ? `${ value }:${ state }` : value, wrapper ),\n\n\t\twithMediaQuery: ( breakpoint: Breakpoint | null ) => {\n\t\t\tif ( ! breakpoint?.type ) {\n\t\t\t\treturn createStyleWrapper( value, wrapper );\n\t\t\t}\n\n\t\t\tconst size = `${ breakpoint.type }:${ breakpoint.width }px`;\n\n\t\t\treturn createStyleWrapper( value, ( css ) => `@media(${ size }){${ css }}` );\n\t\t},\n\n\t\twrap: ( css: string ) => {\n\t\t\tconst res = `${ value }{${ css }}`;\n\n\t\t\tif ( ! wrapper ) {\n\t\t\t\treturn res;\n\t\t\t}\n\n\t\t\treturn wrapper( res );\n\t\t},\n\t};\n}\n\nasync function propsToCss( props: Props, transformers: TransformersMap, signal?: AbortSignal ) {\n\tconst schema = getStylesSchema();\n\n\tconst transformed = await resolve( { props, schema, transformers, signal } );\n\n\treturn Object.entries( transformed )\n\t\t.reduce< string[] >( ( acc, [ propName, propValue ] ) => {\n\t\t\tacc.push( propName + ':' + propValue + ';' );\n\n\t\t\treturn acc;\n\t\t}, [] )\n\t\t.join( '' );\n}\n\nfunction wrapCssWithStyleElement( id: string, css: string ) {\n\treturn `<style data-style-id=\"${ id }\">${ css }</style>`;\n}\n","import { createError } from '@elementor/utils';\n\nexport const UnknownStyleTypeError = createError< { type: string } >( {\n\tcode: 'unknown_style_type',\n\tmessage: 'Unknown style type',\n} );\n","import { type PropsSchema } from '@elementor/editor-elements';\nimport { isTransformable, type PropKey, type Props, type PropType, type PropValue } from '@elementor/editor-props';\n\nimport { getMultiPropsValue, isMultiProps } from './multi-props';\nimport { type TransformersMap } from './types';\n\nconst TRANSFORM_DEPTH_LIMIT = 3;\n\ntype ResolveArgs = {\n\tprops: Props;\n\tschema: PropsSchema;\n\ttransformers: TransformersMap;\n\tsignal?: AbortSignal;\n};\n\nexport async function resolve( { props, schema, transformers, signal }: ResolveArgs ) {\n\tconst promises = Promise.all(\n\t\tObject.entries( schema ).map( async ( [ propKey, propType ] ) => {\n\t\t\tconst value = props[ propKey ] ?? propType.default;\n\n\t\t\tconst transformed = await transform( value, propKey, propType, transformers, 0, signal );\n\n\t\t\tif ( transformed === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( isMultiProps( transformed ) ) {\n\t\t\t\treturn getMultiPropsValue( transformed );\n\t\t\t}\n\n\t\t\treturn { [ propKey ]: transformed };\n\t\t} )\n\t);\n\n\treturn Object.assign( {}, ...( await promises ).filter( Boolean ) );\n}\n\nasync function transform(\n\tvalue: PropValue,\n\tpropKey: PropKey,\n\tpropType: PropType,\n\ttransformers: TransformersMap,\n\tdepth: number = 0,\n\tsignal?: AbortSignal\n): Promise< unknown > {\n\tif ( ! value && value !== 0 ) {\n\t\treturn null;\n\t}\n\n\tif ( ! isTransformable( value ) ) {\n\t\treturn value;\n\t}\n\n\tif ( depth > TRANSFORM_DEPTH_LIMIT ) {\n\t\treturn null;\n\t}\n\n\tif ( value.disabled === true ) {\n\t\treturn null;\n\t}\n\n\tif ( propType.kind === 'union' ) {\n\t\tpropType = propType.prop_types[ value.$$type ];\n\n\t\tif ( ! propType ) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\t// Warning: This variable is loosely-typed - use with caution.\n\tlet resolvedValue = value.value;\n\n\tif ( propType.kind === 'object' ) {\n\t\tresolvedValue = await resolve( {\n\t\t\ttransformers,\n\t\t\tprops: resolvedValue,\n\t\t\tschema: propType.shape,\n\t\t\tsignal,\n\t\t} );\n\t}\n\n\tif ( propType.kind === 'array' ) {\n\t\tresolvedValue = await Promise.all(\n\t\t\tresolvedValue.map( ( item: PropValue ) =>\n\t\t\t\ttransform( item, propKey, propType.item_prop_type, transformers, depth, signal )\n\t\t\t)\n\t\t);\n\t}\n\n\tconst transformer = transformers[ value.$$type ];\n\n\tif ( ! transformer ) {\n\t\treturn null;\n\t}\n\n\ttry {\n\t\tconst transformed = await transformer( resolvedValue, { key: propKey, signal } );\n\n\t\treturn transform( transformed, propKey, propType, transformers, depth + 1, signal );\n\t} catch {\n\t\treturn null;\n\t}\n}\n","import { type StringPropValue } from '@elementor/editor-props';\nimport { type StyleDefinition } from '@elementor/editor-styles';\nimport { ensureError } from '@elementor/utils';\n\nimport { enqueueFont } from '../sync/enqueue-font';\n\nexport default function enqueueUsedFonts( styles: StyleDefinition[] ) {\n\ttry {\n\t\tstyles.forEach( ( styleDef ) => {\n\t\t\tObject.values( styleDef.variants ).forEach( ( variant ) => {\n\t\t\t\tconst fontFamily = variant.props[ 'font-family' ] as StringPropValue;\n\n\t\t\t\tif ( fontFamily?.value ) {\n\t\t\t\t\tenqueueFont( fontFamily.value );\n\t\t\t\t}\n\t\t\t} );\n\t\t} );\n\t} catch ( error: unknown ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.error( `Cannot enqueue font': ${ ensureError( error ).message }` );\n\t}\n}\n","import { type CanvasExtendedWindow, type EnqueueFont } from './types';\n\nexport const enqueueFont: EnqueueFont = ( fontFamily, context = 'preview' ) => {\n\tconst extendedWindow = window as unknown as CanvasExtendedWindow;\n\n\treturn extendedWindow.elementor?.helpers?.enqueueFont?.( fontFamily, context ) ?? null;\n};\n","import type { CanvasExtendedWindow } from './types';\n\nexport function getCanvasIframeBody() {\n\tconst extendedWindow = window as unknown as CanvasExtendedWindow;\n\n\treturn extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument?.body;\n}\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["React","size","validKeys","size"]}
+{"version":3,"sources":["../src/init.tsx","../src/components/elements-overlays.tsx","../src/components/element-overlay.tsx","../src/hooks/use-bind-react-props-to-element.ts","../src/hooks/use-floating-on-element.ts","../src/init-styles-renderer.ts","../src/renderers/create-props-resolver.ts","../src/renderers/multi-props.ts","../src/renderers/errors.ts","../src/renderers/render-styles.ts","../src/renderers/style-transformers/background-color-overlay-transformer.ts","../src/renderers/style-transformers/background-image-overlay-transformer.ts","../src/renderers/style-transformers/background-image-position-offset-transformer.ts","../src/renderers/style-transformers/background-image-size-scale-transformer.ts","../src/renderers/style-transformers/background-transformer.ts","../src/renderers/style-transformers/create-combine-array-transformer.ts","../src/renderers/style-transformers/create-corner-sizes-transformer.ts","../src/renderers/style-transformers/create-edge-sizes-transformer.ts","../src/renderers/style-transformers/dimensions.ts","../src/renderers/style-transformers/image.ts","../src/renderers/style-transformers/image-attachment.ts","../src/renderers/style-transformers/image-src.ts","../src/renderers/style-transformers/layout-direction-transformer.ts","../src/renderers/style-transformers/primitive-transformer.ts","../src/renderers/style-transformers/shadow-transformer.ts","../src/renderers/style-transformers/size-transformer.ts","../src/renderers/style-transformers/stroke-transformer.ts","../src/renderers/style-transformers/index.ts","../src/sync/enqueue-font.ts","../src/sync/get-canvas-iframe-body.ts","../src/index.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { ElementsOverlays } from './components/elements-overlays';\nimport { initStylesRenderer } from './init-styles-renderer';\n\nexport function init() {\n\tinitStylesRenderer();\n\n\tinjectIntoTop( {\n\t\tid: 'elements-overlays',\n\t\tcomponent: ElementsOverlays,\n\t} );\n}\n","import * as React from 'react';\nimport { useElementsDomRef, useSelectedElement } from '@elementor/editor-elements';\nimport {\n\t__privateUseIsPreviewMode as useIsPreviewMode,\n\t__privateUseIsRouteActive as useIsRouteActive,\n} from '@elementor/editor-v1-adapters';\n\nimport { ElementOverlay } from './element-overlay';\n\nexport function ElementsOverlays() {\n\tconst selected = useSelectedElement();\n\tconst domElements = useElementsDomRef();\n\n\tconst isPreviewMode = useIsPreviewMode();\n\tconst isKitRouteActive = useIsRouteActive( 'panel/global' );\n\n\tconst isActive = ! isPreviewMode && ! isKitRouteActive;\n\n\treturn (\n\t\tisActive &&\n\t\tdomElements.map( ( el ) => (\n\t\t\t<ElementOverlay\n\t\t\t\telement={ el }\n\t\t\t\tkey={ el.dataset.id }\n\t\t\t\tisSelected={ selected.element?.id === el.dataset.id }\n\t\t\t/>\n\t\t) )\n\t);\n}\n","import * as React from 'react';\nimport { Box, styled } from '@elementor/ui';\nimport { FloatingPortal, useHover, useInteractions } from '@floating-ui/react';\n\nimport { useBindReactPropsToElement } from '../hooks/use-bind-react-props-to-element';\nimport { useFloatingOnElement } from '../hooks/use-floating-on-element';\n\nexport const CANVAS_WRAPPER_ID = 'elementor-preview-responsive-wrapper';\n\ntype Props = {\n\telement: HTMLElement;\n\tisSelected: boolean;\n};\n\nconst OverlayBox = styled( Box, { shouldForwardProp: ( prop ) => prop !== 'isSelected' } )<\n\tPick< Props, 'isSelected' >\n>( ( { theme, isSelected } ) => ( {\n\toutline: `${ isSelected ? '2px' : '1px' } solid ${ theme.palette.primary.light }`,\n\toutlineOffset: isSelected ? '-2px' : '-1px',\n\tpointerEvents: 'none',\n} ) );\n\nexport function ElementOverlay( { element, isSelected }: Props ) {\n\tconst { context, floating, isVisible } = useFloatingOnElement( { element, isSelected } );\n\tconst { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );\n\n\tuseBindReactPropsToElement( element, getReferenceProps );\n\n\treturn (\n\t\tisVisible && (\n\t\t\t<FloatingPortal id={ CANVAS_WRAPPER_ID }>\n\t\t\t\t<OverlayBox\n\t\t\t\t\tref={ floating.setRef }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tstyle={ floating.styles }\n\t\t\t\t\tdata-element-overlay={ element.dataset.id }\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t{ ...getFloatingProps() }\n\t\t\t\t/>\n\t\t\t</FloatingPortal>\n\t\t)\n\t);\n}\n","import { useEffect } from 'react';\n\ntype Props = Record< string, unknown >;\n\nexport function useBindReactPropsToElement( element: HTMLElement, getProps: () => Props ) {\n\tuseEffect( () => {\n\t\tconst el = element;\n\n\t\tconst { events, attrs } = groupProps( getProps() );\n\n\t\tevents.forEach( ( [ eventName, listener ] ) => el.addEventListener( eventName, listener ) );\n\t\tattrs.forEach( ( [ attrName, attrValue ] ) => el.setAttribute( attrName, attrValue ) );\n\n\t\treturn () => {\n\t\t\tevents.forEach( ( [ eventName, listener ] ) => el.removeEventListener( eventName, listener ) );\n\t\t\tattrs.forEach( ( [ attrName ] ) => el.removeAttribute( attrName ) );\n\t\t};\n\t}, [ getProps, element ] );\n}\n\ntype GroupedProps = {\n\tevents: Array< [ string, () => void ] >;\n\tattrs: Array< [ string, string ] >;\n};\n\nfunction groupProps( props: Props ) {\n\tconst eventRegex = /^on(?=[A-Z])/;\n\n\treturn Object.entries( props ).reduce< GroupedProps >(\n\t\t( acc, [ propName, propValue ] ) => {\n\t\t\tif ( ! eventRegex.test( propName ) ) {\n\t\t\t\tacc.attrs.push( [ propName, propValue as string ] );\n\n\t\t\t\treturn acc;\n\t\t\t}\n\n\t\t\tconst eventName = propName.replace( eventRegex, '' ).toLowerCase();\n\t\t\tconst listener = propValue as () => void;\n\n\t\t\tacc.events.push( [ eventName, listener ] );\n\n\t\t\treturn acc;\n\t\t},\n\t\t{\n\t\t\tevents: [],\n\t\t\tattrs: [],\n\t\t}\n\t);\n}\n","import { useState } from 'react';\nimport { autoUpdate, offset, size, useFloating } from '@floating-ui/react';\n\ntype Options = {\n\telement: HTMLElement;\n\tisSelected: boolean;\n};\n\nexport function useFloatingOnElement( { element, isSelected }: Options ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst { refs, floatingStyles, context } = useFloating( {\n\t\t// Must be controlled for interactions (like hover) to work.\n\t\topen: isOpen || isSelected,\n\t\tonOpenChange: setIsOpen,\n\n\t\t// Add an animation frame to support scroll events (without it the floating element will stay in the same position).\n\t\twhileElementsMounted: ( ...args ) => autoUpdate( ...args, { animationFrame: true } ),\n\n\t\t// The first element in the canvas is `display: contents` so we need to use the first child.\n\t\telements: { reference: element.firstElementChild },\n\n\t\tmiddleware: [\n\t\t\t// Match the floating element's size to the reference element.\n\t\t\tsize( {\n\t\t\t\tapply( { elements, rects } ) {\n\t\t\t\t\tObject.assign( elements.floating.style, {\n\t\t\t\t\t\twidth: `${ rects.reference.width }px`,\n\t\t\t\t\t\theight: `${ rects.reference.height }px`,\n\t\t\t\t\t} );\n\t\t\t\t},\n\t\t\t} ),\n\n\t\t\t// Center the floating element on the reference element.\n\t\t\toffset( ( { rects } ) => -rects.reference.height / 2 - rects.floating.height / 2 ),\n\t\t],\n\t} );\n\n\treturn {\n\t\tisVisible: isOpen || isSelected,\n\t\tcontext,\n\t\tfloating: {\n\t\t\tsetRef: refs.setFloating,\n\t\t\tref: refs.floating,\n\t\t\tstyles: floatingStyles,\n\t\t},\n\t};\n}\n","import { getBreakpointsMap } from '@elementor/editor-responsive';\nimport { getStylesSchema } from '@elementor/editor-styles';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\n\nimport { createPropsResolver } from './renderers/create-props-resolver';\nimport renderStyles from './renderers/render-styles';\nimport { styleTransformers } from './renderers/style-transformers';\nimport { enqueueFont } from './sync/enqueue-font';\nimport { getCanvasIframeBody } from './sync/get-canvas-iframe-body';\n\nconst WRAPPER_DATA_ATTR = 'data-styles-container';\nconst SELECTOR_PREFIX = '.elementor';\n\nexport function initStylesRenderer() {\n\tlet abortController: AbortController | null = null;\n\n\tconst resolve = createPropsResolver( styleTransformers, { onPropResolve: enqueueUsedFonts } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tstylesRepository.subscribe( async () => {\n\t\t\tconst styleContainer = getStylesContainer();\n\n\t\t\t// Styles should be printed in a reversed order, so the high priority styles will be printed last.\n\t\t\tconst styles = stylesRepository.all().reverse();\n\t\t\tconst breakpoints = getBreakpointsMap();\n\t\t\tconst schema = getStylesSchema();\n\n\t\t\tif ( abortController ) {\n\t\t\t\tabortController.abort();\n\t\t\t}\n\n\t\t\tabortController = new AbortController();\n\n\t\t\tstyleContainer.innerHTML = await renderStyles( {\n\t\t\t\tstyles,\n\t\t\t\tresolve,\n\t\t\t\tbreakpoints,\n\t\t\t\tselectorPrefix: SELECTOR_PREFIX,\n\t\t\t\tsignal: abortController.signal,\n\t\t\t\tschema,\n\t\t\t} );\n\t\t} );\n\t} );\n}\n\nfunction getStylesContainer() {\n\tconst preview = getCanvasIframeBody();\n\tconst stylesContainer = preview?.querySelector( `[${ WRAPPER_DATA_ATTR }]` );\n\n\tif ( stylesContainer ) {\n\t\treturn stylesContainer;\n\t}\n\n\tconst el = createStylesContainer();\n\n\tpreview?.prepend( el );\n\n\treturn el;\n}\n\nfunction createStylesContainer() {\n\tconst el = document.createElement( 'div' );\n\tel.style.display = 'none';\n\tel.setAttribute( WRAPPER_DATA_ATTR, '' );\n\n\treturn el;\n}\n\nfunction enqueueUsedFonts( { key, value }: { key: string; value: unknown } ) {\n\tif ( key !== 'font-family' || typeof value !== 'string' ) {\n\t\treturn;\n\t}\n\n\tenqueueFont( value );\n}\n","import {\n\tisTransformable,\n\ttype PropKey,\n\ttype Props,\n\ttype PropsSchema,\n\ttype PropType,\n\ttype PropValue,\n} from '@elementor/editor-props';\n\nimport { getMultiPropsValue, isMultiProps } from './multi-props';\nimport { type TransformersMap } from './types';\n\ntype CreatePropResolverOptions = {\n\tonPropResolve?: ( args: { key: string; value: unknown } ) => void;\n};\n\ntype ResolveArgs = {\n\tprops: Props;\n\tschema: PropsSchema;\n\tsignal?: AbortSignal;\n};\n\ntype TransformArgs = {\n\tvalue: unknown;\n\tkey: PropKey;\n\ttype: PropType;\n\tsignal?: AbortSignal;\n\tdepth?: number;\n};\n\nexport type PropsResolver = ReturnType< typeof createPropsResolver >;\n\nconst TRANSFORM_DEPTH_LIMIT = 3;\n\nexport function createPropsResolver(\n\ttransformers: TransformersMap,\n\t{ onPropResolve }: CreatePropResolverOptions = {}\n) {\n\tasync function transform( { value, key, type, signal, depth = 0 }: TransformArgs ) {\n\t\tif ( value === null || value === undefined ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif ( ! isTransformable( value ) ) {\n\t\t\treturn value;\n\t\t}\n\n\t\tif ( depth > TRANSFORM_DEPTH_LIMIT ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif ( value.disabled === true ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif ( type.kind === 'union' ) {\n\t\t\ttype = type.prop_types[ value.$$type ];\n\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t}\n\n\t\t// Warning: This variable is loosely-typed - use with caution.\n\t\tlet resolvedValue = value.value;\n\n\t\tif ( type.kind === 'object' ) {\n\t\t\tresolvedValue = await resolve( {\n\t\t\t\tprops: resolvedValue,\n\t\t\t\tschema: type.shape,\n\t\t\t\tsignal,\n\t\t\t} );\n\t\t}\n\n\t\tif ( type.kind === 'array' ) {\n\t\t\tresolvedValue = await Promise.all(\n\t\t\t\tresolvedValue.map( ( item: PropValue ) =>\n\t\t\t\t\ttransform( { value: item, key, type: type.item_prop_type, depth, signal } )\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\tconst transformer = transformers[ value.$$type ];\n\n\t\tif ( ! transformer ) {\n\t\t\treturn null;\n\t\t}\n\n\t\ttry {\n\t\t\tconst transformed = await transformer( resolvedValue, { key, signal } );\n\n\t\t\treturn transform( { value: transformed, key, type, signal, depth: depth + 1 } );\n\t\t} catch {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tasync function resolve( { props, schema, signal }: ResolveArgs ) {\n\t\tconst promises = Promise.all(\n\t\t\tObject.entries( schema ).map( async ( [ key, type ] ) => {\n\t\t\t\tconst value = props[ key ] ?? type.default;\n\n\t\t\t\tconst transformed = await transform( { value, key, type, signal } );\n\n\t\t\t\tif ( transformed === null ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonPropResolve?.( { key, value: transformed } );\n\n\t\t\t\tif ( isMultiProps( transformed ) ) {\n\t\t\t\t\treturn getMultiPropsValue( transformed );\n\t\t\t\t}\n\n\t\t\t\treturn { [ key ]: transformed };\n\t\t\t} )\n\t\t);\n\n\t\treturn Object.assign( {}, ...( await promises ).filter( Boolean ) );\n\t}\n\n\treturn resolve;\n}\n","import { type Props, type PropValue } from '@elementor/editor-props';\n\ntype MultiProps = {\n\t'$$multi-props': true;\n\tvalue: Props;\n};\n\nexport const isMultiProps = ( propValue: PropValue ): propValue is MultiProps => {\n\treturn (\n\t\t!! propValue &&\n\t\ttypeof propValue === 'object' &&\n\t\t'$$multi-props' in propValue &&\n\t\tpropValue[ '$$multi-props' ] === true\n\t);\n};\n\nexport const createMultiPropsValue = ( props: Props ): MultiProps => {\n\treturn {\n\t\t'$$multi-props': true,\n\t\tvalue: props,\n\t};\n};\n\nexport const getMultiPropsValue = ( multiProps: MultiProps ): Props => {\n\treturn multiProps.value;\n};\n","import { createError } from '@elementor/utils';\n\nexport const UnknownStyleTypeError = createError< { type: string } >( {\n\tcode: 'unknown_style_type',\n\tmessage: 'Unknown style type',\n} );\n","import { type Props, type PropsSchema } from '@elementor/editor-props';\nimport { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';\nimport { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionType } from '@elementor/editor-styles';\n\nimport { type PropsResolver } from './create-props-resolver';\nimport { UnknownStyleTypeError } from './errors';\n\ntype RenderParams = {\n\tresolve: PropsResolver;\n\tstyles: StyleDefinition[];\n\tschema: PropsSchema;\n\tbreakpoints: BreakpointsMap;\n\tselectorPrefix?: string;\n\tsignal?: AbortSignal;\n};\n\ntype PropsToCssArgs = {\n\tprops: Props;\n\tschema: PropsSchema;\n\tresolve: PropsResolver;\n\tsignal?: AbortSignal;\n};\n\nconst SELECTORS_MAP: Record< StyleDefinitionType, string > = {\n\tclass: '.',\n};\n\nexport default async function renderStyles( {\n\tresolve,\n\tstyles,\n\tschema,\n\tbreakpoints,\n\tselectorPrefix = '',\n\tsignal,\n}: RenderParams ) {\n\tconst stylesCssPromises = styles.map( async ( style ) => {\n\t\tconst variantCssPromises = Object.values( style.variants ).map( async ( variant ) => {\n\t\t\tconst css = await propsToCss( { props: variant.props, schema, resolve, signal } );\n\n\t\t\treturn createStyleWrapper()\n\t\t\t\t.forStyle( style )\n\t\t\t\t.withPrefix( selectorPrefix )\n\t\t\t\t.withState( variant.meta.state )\n\t\t\t\t.withMediaQuery( variant.meta.breakpoint ? breakpoints[ variant.meta.breakpoint ] : null )\n\t\t\t\t.wrap( css );\n\t\t} );\n\n\t\tconst variantsCss = await Promise.all( variantCssPromises );\n\n\t\treturn wrapCssWithStyleElement( style.id, variantsCss.join( '' ) );\n\t} );\n\n\tconst stylesCss = await Promise.all( stylesCssPromises );\n\n\treturn stylesCss.join( '' );\n}\n\nfunction createStyleWrapper( value: string = '', wrapper?: ( css: string ) => string ) {\n\treturn {\n\t\tforStyle: ( { id, type }: StyleDefinition ) => {\n\t\t\tconst symbol = SELECTORS_MAP[ type ];\n\n\t\t\tif ( ! symbol ) {\n\t\t\t\tthrow new UnknownStyleTypeError( { context: { type } } );\n\t\t\t}\n\n\t\t\treturn createStyleWrapper( `${ value }${ symbol }${ id }`, wrapper );\n\t\t},\n\n\t\twithPrefix: ( prefix: string ) =>\n\t\t\tcreateStyleWrapper( [ prefix, value ].filter( Boolean ).join( ' ' ), wrapper ),\n\n\t\twithState: ( state: StyleDefinitionState ) =>\n\t\t\tcreateStyleWrapper( state ? `${ value }:${ state }` : value, wrapper ),\n\n\t\twithMediaQuery: ( breakpoint: Breakpoint | null ) => {\n\t\t\tif ( ! breakpoint?.type ) {\n\t\t\t\treturn createStyleWrapper( value, wrapper );\n\t\t\t}\n\n\t\t\tconst size = `${ breakpoint.type }:${ breakpoint.width }px`;\n\n\t\t\treturn createStyleWrapper( value, ( css ) => `@media(${ size }){${ css }}` );\n\t\t},\n\n\t\twrap: ( css: string ) => {\n\t\t\tconst res = `${ value }{${ css }}`;\n\n\t\t\tif ( ! wrapper ) {\n\t\t\t\treturn res;\n\t\t\t}\n\n\t\t\treturn wrapper( res );\n\t\t},\n\t};\n}\n\nasync function propsToCss( { props, resolve, signal, schema }: PropsToCssArgs ) {\n\tconst transformed = await resolve( { props, schema, signal } );\n\n\treturn Object.entries( transformed )\n\t\t.reduce< string[] >( ( acc, [ propName, propValue ] ) => {\n\t\t\tacc.push( propName + ':' + propValue + ';' );\n\n\t\t\treturn acc;\n\t\t}, [] )\n\t\t.join( '' );\n}\n\nfunction wrapCssWithStyleElement( id: string, css: string ) {\n\treturn `<style data-style-id=\"${ id }\">${ css }</style>`;\n}\n","import { type BackgroundColorOverlayPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst backgroundColorOverlayTransformer: Transformer< BackgroundColorOverlayPropValue[ 'value' ] > = ( value ) => {\n\treturn `linear-gradient(${ value }, ${ value })`;\n};\n\nexport default backgroundColorOverlayTransformer;\n","import { type BackgroundImageOverlayPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst DEFAULT_POSITION_VALUE = '0% 0%';\n\nconst backgroundImageOverlayTransformer: Transformer< BackgroundImageOverlayPropValue[ 'value' ] > = ( value ) => {\n\tconst { image: imageSrc, size = null, position = null, repeat = null, attachment = null } = value;\n\n\tif ( ! imageSrc ) {\n\t\treturn null;\n\t}\n\n\tconst backgroundStyles = [\n\t\timageSrc,\n\t\trepeat,\n\t\tattachment,\n\t\tsize ? `${ position || DEFAULT_POSITION_VALUE } / ${ size }` : position,\n\t].filter( Boolean );\n\n\treturn backgroundStyles.join( ' ' );\n};\n\nexport default backgroundImageOverlayTransformer;\n","import type { BackgroundImagePositionOffsetPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst backgroundImagePositionOffsetTransformer: Transformer< BackgroundImagePositionOffsetPropValue[ 'value' ] > = ( {\n\tx = '0px',\n\ty = '0px',\n} ) => `${ x } ${ y }`;\n\nexport default backgroundImagePositionOffsetTransformer;\n","import type { BackgroundImageSizeScalePropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst backgroundImageSizeScaleTransformer: Transformer< BackgroundImageSizeScalePropValue[ 'value' ] > = ( {\n\twidth = 'auto',\n\theight = 'auto',\n} ) => `${ width } ${ height }`;\n\nexport default backgroundImageSizeScaleTransformer;\n","import { type BackgroundPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst backgroundTransformer: Transformer< BackgroundPropValue[ 'value' ] > = ( value ) => {\n\tconst overlays = value[ 'background-overlay' ] ?? '';\n\tconst color = value.color ?? '';\n\n\treturn `${ overlays } ${ color }`.trim();\n};\n\nexport default backgroundTransformer;\n","import { type Transformer } from '../types';\n\ntype CreateCombineArrayTransformer = ( delimiter: string ) => Transformer< Array< string | number > >;\n\nconst createCombineArrayTransformer: CreateCombineArrayTransformer = ( delimiter ) => {\n\treturn ( value ) => value.filter( Boolean ).join( delimiter );\n};\n\nexport default createCombineArrayTransformer;\n","import { type Props, type PropValue } from '@elementor/editor-props';\n\nimport { createMultiPropsValue } from '../multi-props';\nimport { type Transformer } from '../types';\n\ntype CornerSizes = {\n\t'start-start'?: PropValue;\n\t'start-end'?: PropValue;\n\t'end-start'?: PropValue;\n\t'end-end'?: PropValue;\n};\n\ntype CreateCornerSizesTransformer = ( keyGenerator: ( cornerKey: string ) => string ) => Transformer< CornerSizes >;\n\nconst validCorners = [ 'start-start', 'start-end', 'end-start', 'end-end' ];\n\nconst createCornerSizesTransformer: CreateCornerSizesTransformer = ( keyGenerator ) => ( value ) => {\n\tconst props = Object.entries( value ).reduce< Props >( ( acc, [ corner, cornerValue ] ) => {\n\t\tif ( validCorners.includes( corner ) ) {\n\t\t\tconst key = keyGenerator( corner );\n\n\t\t\tacc[ key ] = cornerValue;\n\t\t}\n\n\t\treturn acc;\n\t}, {} );\n\n\treturn createMultiPropsValue( props );\n};\n\nexport default createCornerSizesTransformer;\n","import { type Props, type PropValue } from '@elementor/editor-props';\n\nimport { createMultiPropsValue } from '../multi-props';\nimport { type Transformer } from '../types';\n\ntype EdgeSizes = {\n\ttop?: PropValue;\n\tright?: PropValue;\n\tbottom?: PropValue;\n\tleft?: PropValue;\n};\n\ntype CreateEdgeSizesTransformer = ( keyGenerator: ( edgeKey: string ) => string ) => Transformer< EdgeSizes >;\n\nconst validEdges = [ 'top', 'right', 'bottom', 'left' ];\n\nconst createEdgeSizesTransformer: CreateEdgeSizesTransformer = ( keyGenerator ) => ( value ) => {\n\tconst props = Object.entries( value ).reduce< Props >( ( acc, [ edge, edgeValue ] ) => {\n\t\tif ( validEdges.includes( edge ) ) {\n\t\t\tconst key = keyGenerator( edge );\n\n\t\t\tacc[ key ] = edgeValue;\n\t\t}\n\n\t\treturn acc;\n\t}, {} );\n\n\treturn createMultiPropsValue( props );\n};\n\nexport default createEdgeSizesTransformer;\n","import { type DimensionsPropValue, type Props } from '@elementor/editor-props';\n\nimport { createMultiPropsValue } from '../multi-props';\nimport { type Transformer } from '../types';\n\nconst validKeys = [ 'top', 'right', 'bottom', 'left' ];\n\nconst dimensions: Transformer< DimensionsPropValue[ 'value' ] > = ( value, { key } ) => {\n\tconst parsed = Object.entries( value ).reduce< Props >( ( acc, [ dimensionKey, dimensionValue ] ) => {\n\t\tif ( dimensionValue && validKeys.includes( dimensionKey ) ) {\n\t\t\tacc[ `${ key }-${ dimensionKey }` ] = dimensionValue;\n\t\t}\n\n\t\treturn acc;\n\t}, {} );\n\n\treturn createMultiPropsValue( parsed );\n};\n\nexport default dimensions;\n","import { type ImagePropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nexport const imageTransformer: Transformer< ImagePropValue[ 'value' ] > = ( value ) => {\n\tconst { src, size } = value;\n\n\tif ( src.url ) {\n\t\treturn `url(${ src.url })`;\n\t}\n\n\tconst sizeUrl = src.attachment?.sizes[ size ]?.url;\n\n\tif ( sizeUrl ) {\n\t\treturn `url(${ sizeUrl })`;\n\t}\n\n\tconst attachmentUrl = src.attachment?.url;\n\n\tif ( attachmentUrl ) {\n\t\treturn `url(${ attachmentUrl })`;\n\t}\n\n\treturn null;\n};\n","import { type ImageSrcPropValue } from '@elementor/editor-props';\nimport { getMediaAttachment } from '@elementor/wp-media';\n\nimport { type Transformer } from '../types';\n\nexport const imageAttachmentTransformer: Transformer< ImageSrcPropValue[ 'value' ][ 'id' ] > = async ( value ) => {\n\tconst attachment = await getMediaAttachment( { id: value } );\n\n\tif ( ! attachment ) {\n\t\treturn null;\n\t}\n\n\treturn attachment;\n};\n","import { type ImageSrcPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nexport const imageSrcTransformer: Transformer< ImageSrcPropValue[ 'value' ] > = ( value ) => ( {\n\tattachment: value.id,\n\turl: value.url,\n} );\n","import { type LayoutDirectionPropValue, type Props } from '@elementor/editor-props';\n\nimport { createMultiPropsValue } from '../multi-props';\nimport { type Transformer } from '../types';\n\nconst validKeys = [ 'row', 'column' ];\n\nconst layoutDirectionTransformer: Transformer< LayoutDirectionPropValue[ 'value' ] > = ( value, { key } ) => {\n\tconst parsed = Object.entries( value ).reduce< Props >( ( acc, [ dimensionKey, dimensionValue ] ) => {\n\t\tif ( dimensionValue && validKeys.includes( dimensionKey ) ) {\n\t\t\tacc[ `${ dimensionKey }-${ key }` ] = dimensionValue;\n\t\t}\n\n\t\treturn acc;\n\t}, {} );\n\n\treturn createMultiPropsValue( parsed );\n};\n\nexport default layoutDirectionTransformer;\n","import { type Transformer } from '../types';\n\ntype Primitive = string | number | boolean;\n\nexport const primitiveTransformer: Transformer< Primitive > = ( value ) => {\n\treturn value;\n};\n","import { type ShadowPropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst shadowTransformer: Transformer< ShadowPropValue[ 'value' ] > = ( value ) => {\n\treturn [ value.hOffset, value.vOffset, value.blur, value.spread, value.color, value.position ]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n};\n\nexport default shadowTransformer;\n","import { type SizePropValue } from '@elementor/editor-props';\n\nimport { type Transformer } from '../types';\n\nconst sizeTransformer: Transformer< SizePropValue[ 'value' ] > = ( value ) => {\n\treturn `${ value.size }${ value.unit }`;\n};\n\nexport default sizeTransformer;\n","import { type StrokePropValue } from '@elementor/editor-props';\n\nimport { createMultiPropsValue } from '../multi-props';\nimport { type Transformer } from '../types';\n\nconst strokeTransformer: Transformer< StrokePropValue[ 'value' ] > = ( value ) => {\n\tconst parsed = {\n\t\t'-webkit-text-stroke': `${ value.width } ${ value.color }`,\n\t\tstroke: `${ value.color }`,\n\t\t'stroke-width': `${ value.width }`,\n\t};\n\n\treturn createMultiPropsValue( parsed );\n};\n\nexport default strokeTransformer;\n","import { type TransformersMap } from '../types';\nimport backgroundColorOverlayTransformer from './background-color-overlay-transformer';\nimport backgroundImageOverlayTransformer from './background-image-overlay-transformer';\nimport backgroundImagePositionOffsetTransformer from './background-image-position-offset-transformer';\nimport backgroundImageSizeScaleTransformer from './background-image-size-scale-transformer';\nimport { default as background } from './background-transformer';\nimport { default as createCombineArrayTransformer } from './create-combine-array-transformer';\nimport createCornerSizesTransformer from './create-corner-sizes-transformer';\nimport createEdgeSizesTransformer from './create-edge-sizes-transformer';\nimport { default as dimensions } from './dimensions';\nimport { imageTransformer } from './image';\nimport { imageAttachmentTransformer } from './image-attachment';\nimport { imageSrcTransformer } from './image-src';\nimport { default as layoutDirection } from './layout-direction-transformer';\nimport { primitiveTransformer } from './primitive-transformer';\nimport { default as shadow } from './shadow-transformer';\nimport { default as size } from './size-transformer';\nimport { default as stroke } from './stroke-transformer';\n\nexport const styleTransformers: TransformersMap = {\n\tsize,\n\tshadow,\n\tstroke,\n\tbackground,\n\n\tcolor: primitiveTransformer,\n\tnumber: primitiveTransformer,\n\tstring: primitiveTransformer,\n\turl: primitiveTransformer,\n\n\tdimensions,\n\t'background-color-overlay': backgroundColorOverlayTransformer,\n\t'background-image-overlay': backgroundImageOverlayTransformer,\n\t'background-image-position-offset': backgroundImagePositionOffsetTransformer,\n\t'background-image-size-scale': backgroundImageSizeScaleTransformer,\n\t'background-overlay': createCombineArrayTransformer( ',' ),\n\n\t'box-shadow': createCombineArrayTransformer( ',' ),\n\n\t'border-width': createEdgeSizesTransformer( ( edgeKey ) => `border-${ edgeKey }-width` ),\n\t'border-radius': createCornerSizesTransformer( ( cornerKey ) => `border-${ cornerKey }-radius` ),\n\n\t'image-attachment-id': imageAttachmentTransformer,\n\t'image-src': imageSrcTransformer,\n\timage: imageTransformer,\n\n\t'layout-direction': layoutDirection,\n};\n","import { type CanvasExtendedWindow, type EnqueueFont } from './types';\n\nexport const enqueueFont: EnqueueFont = ( fontFamily, context = 'preview' ) => {\n\tconst extendedWindow = window as unknown as CanvasExtendedWindow;\n\n\treturn extendedWindow.elementor?.helpers?.enqueueFont?.( fontFamily, context ) ?? null;\n};\n","import type { CanvasExtendedWindow } from './types';\n\nexport function getCanvasIframeBody() {\n\tconst extendedWindow = window as unknown as CanvasExtendedWindow;\n\n\treturn extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument?.body;\n}\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["React","size","size","size","validKeys"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -36,16 +36,19 @@
     "react": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "0.17.5",
-    "@elementor/ui": "1.24.1",
-    "@floating-ui/react": "^0.26.28",
-    "@elementor/editor-elements": "0.5.1",
-    "@elementor/editor-v1-adapters": "0.9.1",
-    "@elementor/editor-props": "0.8.0",
-    "@elementor/utils": "0.3.0",
-    "@elementor/editor-styles-repository": "0.6.0",
-    "@elementor/editor-responsive": "0.12.6",
-    "@elementor/editor-styles": "0.5.4",
-    "@elementor/wp-media": "0.4.0"
+    "@elementor/editor": "0.18.0",
+    "@elementor/editor-elements": "0.5.3",
+    "@elementor/editor-props": "0.9.1",
+    "@elementor/editor-responsive": "0.13.0",
+    "@elementor/editor-styles": "0.5.6",
+    "@elementor/editor-styles-repository": "0.7.1",
+    "@elementor/editor-v1-adapters": "0.10.0",
+    "@elementor/ui": "1.26.0",
+    "@elementor/utils": "0.3.1",
+    "@elementor/wp-media": "0.4.1",
+    "@floating-ui/react": "^0.26.28"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
   }
 }

package/src/__tests__/init-styles-renderer.test.ts

@@ -4,14 +4,16 @@ import { stylesRepository } from '@elementor/editor-styles-repository';
 import { waitFor } from '@testing-library/react';
 
 import { initStylesRenderer as initStylesRendererBase } from '../init-styles-renderer';
-import { render, transformers } from '../styles-renderer';
+import { createPropsResolver } from '../renderers/create-props-resolver';
+import renderStyles from '../renderers/render-styles';
+import { styleTransformers } from '../renderers/style-transformers';
 import { getCanvasIframeBody } from '../sync/get-canvas-iframe-body';
 
 jest.mock( '@elementor/editor-styles-repository' );
 jest.mock( '@elementor/editor-responsive' );
-jest.mock( '../styles-renderer/index' );
+jest.mock( '../renderers/render-styles' );
+jest.mock( '../renderers/create-props-resolver' );
 jest.mock( '../sync/get-canvas-iframe-body' );
-jest.mock( '../styles-renderer/enqueue-used-fonts' );
 
 const initStylesRenderer = () => {
 	initStylesRendererBase();
@@ -24,7 +26,9 @@ describe( 'initStylesRenderer', () => {
 		let triggerStylesChange = () => {};
 		const mockStyleDef = createMockStyleDefinition();
 
-		jest.mocked( render ).mockReturnValue( Promise.resolve( '' ) );
+		const mockedResolveProps = jest.fn();
+
+		jest.mocked( createPropsResolver ).mockReturnValue( mockedResolveProps );
 		jest.mocked( stylesRepository.subscribe ).mockImplementation( ( cb ) => ( triggerStylesChange = cb ) );
 		jest.mocked( stylesRepository.all ).mockReturnValue( [ mockStyleDef ] );
 		jest.mocked( getBreakpointsMap ).mockReturnValue( {
@@ -34,12 +38,18 @@ describe( 'initStylesRenderer', () => {
 		// Act.
 		initStylesRenderer();
 
+		triggerStylesChange();
 		triggerStylesChange();
 
 		// Assert.
-		expect( render ).toHaveBeenCalledTimes( 1 );
-		expect( render ).toHaveBeenCalledWith( {
-			transformers,
+		expect( createPropsResolver ).toHaveBeenCalledTimes( 1 );
+		expect( createPropsResolver ).toHaveBeenCalledWith( styleTransformers, {
+			onPropResolve: expect.any( Function ),
+		} );
+
+		expect( renderStyles ).toHaveBeenCalledTimes( 2 );
+		expect( renderStyles ).toHaveBeenCalledWith( {
+			resolve: mockedResolveProps,
 			styles: [ mockStyleDef ],
 			selectorPrefix: '.elementor',
 			breakpoints: { mobile: { id: 'mobile', label: 'Mobile' } },
@@ -54,7 +64,7 @@ describe( 'initStylesRenderer', () => {
 
 		jest.mocked( stylesRepository.subscribe ).mockImplementation( ( cb ) => ( triggerStylesChange = cb ) );
 		jest.mocked( getCanvasIframeBody ).mockReturnValue( wrapperEl );
-		jest.mocked( render ).mockReturnValue( Promise.resolve( '.a { color: red; }' ) );
+		jest.mocked( renderStyles ).mockReturnValue( Promise.resolve( '.a { color: red; }' ) );
 
 		// Act.
 		initStylesRenderer();
@@ -69,7 +79,7 @@ describe( 'initStylesRenderer', () => {
 		} );
 
 		// Act.
-		jest.mocked( render ).mockReturnValue( Promise.resolve( '.a { color: red; display: block; }' ) );
+		jest.mocked( renderStyles ).mockResolvedValue( '.a { color: red; display: block; }' );
 
 		triggerStylesChange();
 

package/src/init-styles-renderer.ts

@@ -1,9 +1,12 @@
 import { getBreakpointsMap } from '@elementor/editor-responsive';
+import { getStylesSchema } from '@elementor/editor-styles';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
 
-import { render, transformers } from './styles-renderer';
-import enqueueUsedFonts from './styles-renderer/enqueue-used-fonts';
+import { createPropsResolver } from './renderers/create-props-resolver';
+import renderStyles from './renderers/render-styles';
+import { styleTransformers } from './renderers/style-transformers';
+import { enqueueFont } from './sync/enqueue-font';
 import { getCanvasIframeBody } from './sync/get-canvas-iframe-body';
 
 const WRAPPER_DATA_ATTR = 'data-styles-container';
@@ -12,13 +15,16 @@ const SELECTOR_PREFIX = '.elementor';
 export function initStylesRenderer() {
 	let abortController: AbortController | null = null;
 
+	const resolve = createPropsResolver( styleTransformers, { onPropResolve: enqueueUsedFonts } );
+
 	listenTo( v1ReadyEvent(), () => {
 		stylesRepository.subscribe( async () => {
 			const styleContainer = getStylesContainer();
-			const breakpoints = getBreakpointsMap();
 
 			// Styles should be printed in a reversed order, so the high priority styles will be printed last.
 			const styles = stylesRepository.all().reverse();
+			const breakpoints = getBreakpointsMap();
+			const schema = getStylesSchema();
 
 			if ( abortController ) {
 				abortController.abort();
@@ -26,15 +32,14 @@ export function initStylesRenderer() {
 
 			abortController = new AbortController();
 
-			styleContainer.innerHTML = await render( {
-				transformers,
+			styleContainer.innerHTML = await renderStyles( {
 				styles,
+				resolve,
 				breakpoints,
 				selectorPrefix: SELECTOR_PREFIX,
 				signal: abortController.signal,
+				schema,
 			} );
-
-			enqueueUsedFonts( styles );
 		} );
 	} );
 }
@@ -61,3 +66,11 @@ function createStylesContainer() {
 
 	return el;
 }
+
+function enqueueUsedFonts( { key, value }: { key: string; value: unknown } ) {
+	if ( key !== 'font-family' || typeof value !== 'string' ) {
+		return;
+	}
+
+	enqueueFont( value );
+}

package/src/{styles-renderer → renderers}/__tests__/__mocks__/styles-schema.ts

@@ -1,4 +1,4 @@
-import { type PropsSchema } from '@elementor/editor-elements';
+import { type PropsSchema } from '@elementor/editor-props';
 
 export const stylesSchemaMock = {
 	'font-size': {
@@ -242,7 +242,7 @@ export const stylesSchemaMock = {
 				meta: {},
 				settings: {},
 				shape: {
-					'top-left': {
+					'start-start': {
 						kind: 'object',
 						key: 'size',
 						default: null,
@@ -270,7 +270,7 @@ export const stylesSchemaMock = {
 							},
 						},
 					},
-					'top-right': {
+					'start-end': {
 						kind: 'object',
 						key: 'size',
 						default: null,
@@ -298,7 +298,7 @@ export const stylesSchemaMock = {
 							},
 						},
 					},
-					'bottom-right': {
+					'end-start': {
 						kind: 'object',
 						key: 'size',
 						default: null,
@@ -326,7 +326,7 @@ export const stylesSchemaMock = {
 							},
 						},
 					},
-					'bottom-left': {
+					'end-end': {
 						kind: 'object',
 						key: 'size',
 						default: null,
@@ -505,23 +505,39 @@ export const stylesSchemaMock = {
 							meta: {},
 							settings: {},
 							shape: {
-								'image-src': {
+								image: {
 									kind: 'object',
-									key: 'image-src',
+									key: 'image',
 									default: null,
 									meta: {},
 									settings: {},
 									shape: {
-										id: {
-											kind: 'plain',
-											key: 'id',
+										src: {
+											kind: 'object',
+											key: 'image-src',
 											default: null,
 											meta: {},
 											settings: {},
+											shape: {
+												id: {
+													kind: 'plain',
+													key: 'id',
+													default: null,
+													meta: {},
+													settings: {},
+												},
+												url: {
+													kind: 'plain',
+													key: 'url',
+													default: null,
+													meta: {},
+													settings: {},
+												},
+											},
 										},
-										url: {
+										size: {
 											kind: 'plain',
-											key: 'url',
+											key: 'string',
 											default: null,
 											meta: {},
 											settings: {},
@@ -538,12 +554,103 @@ export const stylesSchemaMock = {
 									},
 								},
 								size: {
-									kind: 'plain',
-									key: 'string',
+									kind: 'union',
 									default: null,
 									meta: {},
-									settings: {
-										enum: [ 'auto', 'cover', 'contain' ],
+									settings: {},
+									prop_types: {
+										'background-image-size-scale': {
+											kind: 'object',
+											key: 'background-image-size-scale',
+											default: null,
+											meta: {},
+											settings: {},
+											shape: {
+												width: {
+													kind: 'object',
+													key: 'size',
+													default: null,
+													meta: {},
+													settings: {},
+													shape: {
+														size: {
+															kind: 'plain',
+															key: 'number',
+															default: null,
+															meta: {},
+															settings: {
+																required: true,
+															},
+														},
+														unit: {
+															kind: 'plain',
+															key: 'string',
+															default: null,
+															meta: {},
+															settings: {
+																enum: [
+																	'px',
+																	'em',
+																	'rem',
+																	'%',
+																	'vh',
+																	'vw',
+																	'vmin',
+																	'vmax',
+																],
+																required: true,
+															},
+														},
+													},
+												},
+												height: {
+													kind: 'object',
+													key: 'size',
+													default: null,
+													meta: {},
+													settings: {},
+													shape: {
+														size: {
+															kind: 'plain',
+															key: 'number',
+															default: null,
+															meta: {},
+															settings: {
+																required: true,
+															},
+														},
+														unit: {
+															kind: 'plain',
+															key: 'string',
+															default: null,
+															meta: {},
+															settings: {
+																enum: [
+																	'px',
+																	'em',
+																	'rem',
+																	'%',
+																	'vh',
+																	'vw',
+																	'vmin',
+																	'vmax',
+																],
+																required: true,
+															},
+														},
+													},
+												},
+											},
+										},
+										string: {
+											kind: 'plain',
+											key: 'string',
+											default: null,
+											meta: {},
+											settings: {
+												enum: [ 'auto', 'cover', 'contain' ],
+											},
+										},
 									},
 								},
 								attachment: {
@@ -556,6 +663,97 @@ export const stylesSchemaMock = {
 									},
 								},
 								position: {
+									kind: 'union',
+									default: null,
+									meta: {},
+									settings: {},
+									prop_types: {
+										'background-image-position-offset': {
+											kind: 'object',
+											key: 'background-image-position-offset',
+											default: null,
+											meta: {},
+											settings: {},
+											shape: {
+												x: {
+													kind: 'object',
+													key: 'size',
+													default: null,
+													meta: {},
+													settings: {},
+													shape: {
+														size: {
+															kind: 'plain',
+															key: 'number',
+															default: null,
+															meta: {},
+															settings: {
+																required: true,
+															},
+														},
+														unit: {
+															kind: 'plain',
+															key: 'string',
+															default: null,
+															meta: {},
+															settings: {
+																enum: [
+																	'px',
+																	'em',
+																	'rem',
+																	'%',
+																	'vh',
+																	'vw',
+																	'vmin',
+																	'vmax',
+																],
+																required: true,
+															},
+														},
+													},
+												},
+												y: {
+													kind: 'object',
+													key: 'size',
+													default: null,
+													meta: {},
+													settings: {},
+													shape: {
+														size: {
+															kind: 'plain',
+															key: 'number',
+															default: null,
+															meta: {},
+															settings: {
+																required: true,
+															},
+														},
+														unit: {
+															kind: 'plain',
+															key: 'string',
+															default: null,
+															meta: {},
+															settings: {
+																enum: [
+																	'px',
+																	'em',
+																	'rem',
+																	'%',
+																	'vh',
+																	'vw',
+																	'vmin',
+																	'vmax',
+																],
+																required: true,
+															},
+														},
+													},
+												},
+											},
+										},
+									},
+								},
+								string: {
 									kind: 'plain',
 									key: 'string',
 									default: null,