@elementor/editor-canvas 4.2.0-898 → 4.2.0-899

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.2.0-898",
+  "version": "4.2.0-899",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,25 +37,25 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-898",
+    "@elementor/editor": "4.2.0-899",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.2.0-898",
-    "@elementor/editor-documents": "4.2.0-898",
-    "@elementor/editor-elements": "4.2.0-898",
-    "@elementor/editor-interactions": "4.2.0-898",
-    "@elementor/editor-mcp": "4.2.0-898",
-    "@elementor/editor-notifications": "4.2.0-898",
-    "@elementor/editor-props": "4.2.0-898",
-    "@elementor/editor-responsive": "4.2.0-898",
-    "@elementor/editor-styles": "4.2.0-898",
-    "@elementor/editor-styles-repository": "4.2.0-898",
-    "@elementor/editor-ui": "4.2.0-898",
-    "@elementor/editor-v1-adapters": "4.2.0-898",
-    "@elementor/schema": "4.2.0-898",
-    "@elementor/twing": "4.2.0-898",
+    "@elementor/editor-controls": "4.2.0-899",
+    "@elementor/editor-documents": "4.2.0-899",
+    "@elementor/editor-elements": "4.2.0-899",
+    "@elementor/editor-interactions": "4.2.0-899",
+    "@elementor/editor-mcp": "4.2.0-899",
+    "@elementor/editor-notifications": "4.2.0-899",
+    "@elementor/editor-props": "4.2.0-899",
+    "@elementor/editor-responsive": "4.2.0-899",
+    "@elementor/editor-styles": "4.2.0-899",
+    "@elementor/editor-styles-repository": "4.2.0-899",
+    "@elementor/editor-ui": "4.2.0-899",
+    "@elementor/editor-v1-adapters": "4.2.0-899",
+    "@elementor/schema": "4.2.0-899",
+    "@elementor/twing": "4.2.0-899",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-898",
-    "@elementor/wp-media": "4.2.0-898",
+    "@elementor/utils": "4.2.0-899",
+    "@elementor/wp-media": "4.2.0-899",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/elements-overlays.tsx

@@ -8,6 +8,7 @@ import {
 } from '@elementor/editor-v1-adapters';
 
 import type { ElementOverlayConfig } from '../types/element-overlay';
+import { GridOutlineOverlay } from './grid-outline';
 import { OutlineOverlay } from './outline-overlay';
 
 const ELEMENTS_DATA_ATTR = 'atomic';
@@ -17,6 +18,10 @@ const overlayRegistry: ElementOverlayConfig[] = [
 		component: OutlineOverlay,
 		shouldRender: () => true,
 	},
+	{
+		component: GridOutlineOverlay,
+		shouldRender: ( { element, isSelected } ) => isSelected && element.dataset.eType === 'e-grid',
+	},
 ];
 
 export function ElementsOverlays() {
@@ -61,7 +66,7 @@ function useElementsDom() {
 		[ windowEvent( 'elementor/editor/element-rendered' ), windowEvent( 'elementor/editor/element-destroyed' ) ],
 		() => {
 			return getElements()
-				.filter( ( el ) => ELEMENTS_DATA_ATTR in ( el.view?.el?.dataset ?? {} ) )
+				.filter( ( el ) => isV4Element( el.view?.el?.dataset ) )
 				.map( ( element ) => ( {
 					id: element.id,
 					domElement: element.view?.getDomElement?.()?.get?.( 0 ),
@@ -71,3 +76,11 @@ function useElementsDom() {
 		}
 	);
 }
+
+function isV4Element( dataset: DOMStringMap | undefined ): boolean {
+	if ( ! dataset ) {
+		return false;
+	}
+
+	return ELEMENTS_DATA_ATTR in dataset || 'eType' in dataset;
+}

package/src/components/grid-outline/__tests__/grid-outline-overlay.test.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { createDOMElement, renderWithTheme } from 'test-utils';
+import { useSelectedElementSettings } from '@elementor/editor-elements';
+import { screen } from '@testing-library/react';
+
+import { useElementRect } from '../../../hooks/use-element-rect';
+import { useFloatingOnElement } from '../../../hooks/use-floating-on-element';
+import { type GridTracks, useGridTracks } from '../../../hooks/use-grid-tracks';
+import { CANVAS_WRAPPER_ID } from '../../outline-overlay';
+import { GridOutlineOverlay } from '../grid-outline-overlay';
+
+jest.mock( '@elementor/editor-elements' );
+jest.mock( '../../../hooks/use-element-rect' );
+jest.mock( '../../../hooks/use-grid-tracks' );
+jest.mock( '../../../hooks/use-floating-on-element' );
+
+const ID = 'grid-1';
+
+const NON_EMPTY_TRACKS: GridTracks = {
+	columns: [ 100, 100 ],
+	rows: [ 80, 80, 80 ],
+	columnGap: 0,
+	rowGap: 0,
+	padding: { top: 10, right: 10, bottom: 10, left: 10 },
+	borderColor: '#D5D8DC',
+};
+
+const EMPTY_TRACKS: GridTracks = {
+	columns: [],
+	rows: [],
+	columnGap: 0,
+	rowGap: 0,
+	padding: { top: 0, right: 0, bottom: 0, left: 0 },
+	borderColor: '',
+};
+
+function mockGridOutlineSetting( value: { $$type: 'boolean'; value: boolean } | null ) {
+	jest.mocked( useSelectedElementSettings ).mockReturnValue( {
+		element: { id: ID, type: 'e-grid' },
+		elementType: {} as never,
+		settings: { grid_outline: value },
+	} );
+}
+
+function mockFloating() {
+	jest.mocked( useFloatingOnElement ).mockReturnValue( {
+		isVisible: true,
+		context: {} as never,
+		floating: {
+			setRef: jest.fn(),
+			ref: { current: null } as never,
+			styles: { position: 'absolute', top: 0, left: 0 },
+		},
+	} );
+}
+
+function renderOverlay( props: Partial< { id: string; isSelected: boolean; isGlobal: boolean } > = {} ) {
+	const element = createDOMElement( { tag: 'div', attrs: { 'data-e-type': 'e-grid' } } );
+
+	return renderWithTheme(
+		<GridOutlineOverlay
+			id={ props.id ?? ID }
+			element={ element }
+			isSelected={ props.isSelected ?? true }
+			isGlobal={ props.isGlobal ?? false }
+		/>
+	);
+}
+
+describe( '<GridOutlineOverlay />', () => {
+	beforeEach( () => {
+		jest.mocked( useElementRect ).mockReturnValue( new DOMRect( 0, 0, 220, 260 ) );
+		jest.mocked( useGridTracks ).mockReturnValue( NON_EMPTY_TRACKS );
+		mockFloating();
+
+		window.document.body.appendChild(
+			createDOMElement( {
+				tag: 'div',
+				attrs: { id: CANVAS_WRAPPER_ID, 'data-testid': CANVAS_WRAPPER_ID },
+			} )
+		);
+	} );
+
+	afterEach( () => {
+		window.document.body.innerHTML = '';
+		jest.clearAllMocks();
+	} );
+
+	it( 'renders the outline svg with the element id when the setting is enabled', () => {
+		mockGridOutlineSetting( { $$type: 'boolean', value: true } );
+
+		renderOverlay();
+
+		const overlay = screen.getByRole( 'presentation' );
+		expect( overlay ).toHaveAttribute( 'data-grid-outline', ID );
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( overlay.querySelector( 'svg' ) ).toBeInTheDocument();
+	} );
+
+	it( 'treats a null setting as default-on and renders the outline', () => {
+		mockGridOutlineSetting( null );
+
+		renderOverlay();
+
+		expect( screen.getByRole( 'presentation' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders nothing when the setting is explicitly disabled', () => {
+		mockGridOutlineSetting( { $$type: 'boolean', value: false } );
+
+		renderOverlay();
+
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders nothing while tracks have not resolved yet', () => {
+		mockGridOutlineSetting( { $$type: 'boolean', value: true } );
+		jest.mocked( useGridTracks ).mockReturnValue( EMPTY_TRACKS );
+
+		renderOverlay();
+
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders one <line> per track boundary plus both edges of every gap', () => {
+		mockGridOutlineSetting( null );
+		jest.mocked( useGridTracks ).mockReturnValue( {
+			...NON_EMPTY_TRACKS,
+			columns: [ 100, 100, 100 ],
+			rows: [ 80, 80 ],
+			columnGap: 10,
+			rowGap: 10,
+		} );
+
+		renderOverlay();
+
+		const overlay = screen.getByRole( 'presentation' );
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( overlay.querySelectorAll( 'line' ) ).toHaveLength( 6 + 4 );
+	} );
+
+	it( 'mounts inside the canvas wrapper portal', () => {
+		mockGridOutlineSetting( null );
+
+		renderOverlay();
+
+		// eslint-disable-next-line testing-library/no-test-id-queries
+		const wrapper = screen.getByTestId( CANVAS_WRAPPER_ID );
+		expect( wrapper ).toContainElement( screen.getByRole( 'presentation' ) );
+	} );
+} );

package/src/components/grid-outline/__tests__/grid-outline.test.tsx

@@ -0,0 +1,131 @@
+/* eslint-disable testing-library/no-container */
+import * as React from 'react';
+import { renderWithTheme } from 'test-utils';
+
+import { type GridTracks } from '../../../hooks/use-grid-tracks';
+import { GridOutline } from '../grid-outline';
+
+function makeTracks( partial: Partial< GridTracks > = {} ): GridTracks {
+	return {
+		columns: [],
+		rows: [],
+		columnGap: 0,
+		rowGap: 0,
+		padding: { top: 0, right: 0, bottom: 0, left: 0 },
+		borderColor: '#D5D8DC',
+		...partial,
+	};
+}
+
+function getSvg( container: HTMLElement ): SVGSVGElement {
+	const svg = container.querySelector( 'svg' );
+	if ( ! svg ) {
+		throw new Error( 'svg not found' );
+	}
+	return svg;
+}
+
+describe( '<GridOutline />', () => {
+	it( 'sizes the svg to the element rect', () => {
+		const { container } = renderWithTheme(
+			<GridOutline tracks={ makeTracks( { columns: [ 100 ] } ) } width={ 320 } height={ 200 } />
+		);
+
+		const svg = getSvg( container );
+		expect( svg ).toHaveAttribute( 'width', '320' );
+		expect( svg ).toHaveAttribute( 'height', '200' );
+	} );
+
+	it( 'draws N+M boundary lines for an N×M grid (no gaps)', () => {
+		const { container } = renderWithTheme(
+			<GridOutline
+				tracks={ makeTracks( { columns: [ 100, 100, 100 ], rows: [ 80, 80 ] } ) }
+				width={ 300 }
+				height={ 160 }
+			/>
+		);
+
+		expect( container.querySelectorAll( 'line' ) ).toHaveLength( 4 + 3 );
+	} );
+
+	it( 'emits both edges of every gap between tracks', () => {
+		const { container } = renderWithTheme(
+			<GridOutline
+				tracks={ makeTracks( {
+					columns: [ 100, 100, 100 ],
+					rows: [ 80, 80 ],
+					columnGap: 10,
+					rowGap: 8,
+				} ) }
+				width={ 320 }
+				height={ 176 }
+			/>
+		);
+
+		expect( container.querySelectorAll( 'line' ) ).toHaveLength( 6 + 4 );
+	} );
+
+	it( 'snaps vertical line coordinates to half pixels for crisp 1px strokes', () => {
+		const { container } = renderWithTheme(
+			<GridOutline
+				tracks={ makeTracks( {
+					columns: [ 100, 100 ],
+					padding: { top: 10, right: 10, bottom: 10, left: 10 },
+				} ) }
+				width={ 220 }
+				height={ 100 }
+			/>
+		);
+
+		const verticals = Array.from( container.querySelectorAll( 'line' ) ).filter(
+			( line ) => line.getAttribute( 'x1' ) === line.getAttribute( 'x2' )
+		);
+
+		expect( verticals.map( ( line ) => line.getAttribute( 'x1' ) ) ).toEqual( [ '10.5', '110.5', '210.5' ] );
+	} );
+
+	it( 'spans horizontal lines across the padded content rect', () => {
+		const { container } = renderWithTheme(
+			<GridOutline
+				tracks={ makeTracks( {
+					rows: [ 50, 50 ],
+					padding: { top: 8, right: 12, bottom: 6, left: 4 },
+				} ) }
+				width={ 300 }
+				height={ 120 }
+			/>
+		);
+
+		const horizontals = Array.from( container.querySelectorAll( 'line' ) ).filter(
+			( line ) => line.getAttribute( 'y1' ) === line.getAttribute( 'y2' )
+		);
+
+		expect( horizontals.length ).toBeGreaterThan( 0 );
+		for ( const line of horizontals ) {
+			expect( line ).toHaveAttribute( 'x1', '4' );
+			expect( line ).toHaveAttribute( 'x2', '288' );
+		}
+	} );
+
+	it( 'passes the resolved iframe border color through to each line', () => {
+		const { container } = renderWithTheme(
+			<GridOutline
+				tracks={ makeTracks( { columns: [ 100 ], borderColor: '#abcdef' } ) }
+				width={ 100 }
+				height={ 100 }
+			/>
+		);
+
+		const lines = container.querySelectorAll( 'line' );
+		expect( lines.length ).toBeGreaterThan( 0 );
+		lines.forEach( ( line ) => {
+			expect( line ).toHaveAttribute( 'stroke', '#abcdef' );
+		} );
+	} );
+
+	it( 'renders no lines when there are no tracks on either axis', () => {
+		const { container } = renderWithTheme( <GridOutline tracks={ makeTracks() } width={ 100 } height={ 100 } /> );
+
+		expect( container.querySelectorAll( 'line' ) ).toHaveLength( 0 );
+	} );
+} );

package/src/components/grid-outline/grid-outline-line.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+const FALLBACK_COLOR = 'rgba(0, 0, 0, 0.12)';
+export const DASH = '2 2';
+
+type Props = {
+	x1: number;
+	x2: number;
+	y1: number;
+	y2: number;
+	color?: string;
+};
+
+export function GridOutlineLine( { x1, x2, y1, y2, color }: Props ) {
+	return (
+		<line
+			x1={ x1 }
+			x2={ x2 }
+			y1={ y1 }
+			y2={ y2 }
+			stroke={ color || FALLBACK_COLOR }
+			strokeWidth={ 1 }
+			strokeDasharray={ DASH }
+			vectorEffect="non-scaling-stroke"
+		/>
+	);
+}

package/src/components/grid-outline/grid-outline-overlay.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useSelectedElementSettings } from '@elementor/editor-elements';
+import { booleanPropTypeUtil } from '@elementor/editor-props';
+import { Box } from '@elementor/ui';
+import { FloatingPortal } from '@floating-ui/react';
+
+import { useElementRect } from '../../hooks/use-element-rect';
+import { useFloatingOnElement } from '../../hooks/use-floating-on-element';
+import { useGridTracks } from '../../hooks/use-grid-tracks';
+import type { ElementOverlayProps } from '../../types/element-overlay';
+import { CANVAS_WRAPPER_ID } from '../outline-overlay';
+import { GridOutline } from './grid-outline';
+
+export const GridOutlineOverlay = ( { element, id, isSelected }: ElementOverlayProps ): React.ReactElement | null => {
+	const { settings } = useSelectedElementSettings();
+	const enabled = booleanPropTypeUtil.extract( settings?.grid_outline );
+	const rect = useElementRect( element );
+	const tracks = useGridTracks( element, rect );
+	const { floating } = useFloatingOnElement( { element, isSelected } );
+
+	if ( enabled === false ) {
+		return null;
+	}
+
+	if ( tracks.columns.length === 0 && tracks.rows.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<FloatingPortal id={ CANVAS_WRAPPER_ID }>
+			<Box
+				ref={ floating.setRef }
+				style={ { ...floating.styles, pointerEvents: 'none' } }
+				data-grid-outline={ id }
+				role="presentation"
+			>
+				<GridOutline tracks={ tracks } width={ rect.width } height={ rect.height } />
+			</Box>
+		</FloatingPortal>
+	);
+};

package/src/components/grid-outline/grid-outline.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+import { type GridTracks } from '../../hooks/use-grid-tracks';
+import { computeOutlineGeometry, snapToHalfPixel } from '../../utils/grid-outline-utils';
+import { GridOutlineLine } from './grid-outline-line';
+
+type Props = {
+	tracks: GridTracks;
+	width: number;
+	height: number;
+};
+
+export function GridOutline( { tracks, width, height }: Props ) {
+	const { vertical, horizontal, top, bottom, left, right } = computeOutlineGeometry( tracks, width, height );
+
+	return (
+		<svg
+			width={ width }
+			height={ height }
+			style={ { position: 'absolute', inset: 0, overflow: 'visible' } }
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			{ vertical.map( ( x, i ) => (
+				<GridOutlineLine
+					key={ `v-${ i }` }
+					x1={ snapToHalfPixel( x ) }
+					x2={ snapToHalfPixel( x ) }
+					y1={ top }
+					y2={ bottom }
+					color={ tracks.borderColor }
+				/>
+			) ) }
+			{ horizontal.map( ( y, i ) => (
+				<GridOutlineLine
+					key={ `h-${ i }` }
+					x1={ left }
+					x2={ right }
+					y1={ snapToHalfPixel( y ) }
+					y2={ snapToHalfPixel( y ) }
+					color={ tracks.borderColor }
+				/>
+			) ) }
+		</svg>
+	);
+}

package/src/components/grid-outline/index.ts

@@ -0,0 +1 @@
+export { GridOutlineOverlay } from './grid-outline-overlay';

package/src/hooks/__tests__/use-grid-tracks.test.ts

@@ -0,0 +1,152 @@
+import { renderHook } from '@testing-library/react';
+
+import { useGridTracks } from '../use-grid-tracks';
+
+type Style = {
+	gridTemplateColumns: string;
+	gridTemplateRows: string;
+	columnGap: string;
+	rowGap: string;
+	paddingTop: string;
+	paddingRight: string;
+	paddingBottom: string;
+	paddingLeft: string;
+	'--e-a-border-color-bold': string;
+};
+
+const DEFAULT_STYLE: Style = {
+	gridTemplateColumns: 'none',
+	gridTemplateRows: 'none',
+	columnGap: 'normal',
+	rowGap: 'normal',
+	paddingTop: '0px',
+	paddingRight: '0px',
+	paddingBottom: '0px',
+	paddingLeft: '0px',
+	'--e-a-border-color-bold': '',
+};
+
+function mockElement( style: Partial< Style > = {} ): HTMLElement {
+	const resolved: Style = { ...DEFAULT_STYLE, ...style };
+	const getComputedStyle = jest.fn().mockReturnValue( {
+		gridTemplateColumns: resolved.gridTemplateColumns,
+		gridTemplateRows: resolved.gridTemplateRows,
+		columnGap: resolved.columnGap,
+		rowGap: resolved.rowGap,
+		paddingTop: resolved.paddingTop,
+		paddingRight: resolved.paddingRight,
+		paddingBottom: resolved.paddingBottom,
+		paddingLeft: resolved.paddingLeft,
+		getPropertyValue: ( name: string ) => ( name === '--e-a-border-color-bold' ? resolved[ name ] : '' ),
+	} );
+
+	return {
+		ownerDocument: {
+			defaultView: { getComputedStyle } as unknown as Window,
+		},
+	} as unknown as HTMLElement;
+}
+
+const RECT = new DOMRect( 0, 0, 320, 200 );
+
+describe( 'useGridTracks', () => {
+	it( 'returns the empty snapshot when the element is null', () => {
+		const { result } = renderHook( () => useGridTracks( null, RECT ) );
+
+		expect( result.current ).toEqual( {
+			columns: [],
+			rows: [],
+			columnGap: 0,
+			rowGap: 0,
+			padding: { top: 0, right: 0, bottom: 0, left: 0 },
+			borderColor: '',
+		} );
+	} );
+
+	it( 'returns the empty snapshot when the element has no owner window', () => {
+		const element = { ownerDocument: { defaultView: null } } as unknown as HTMLElement;
+
+		const { result } = renderHook( () => useGridTracks( element, RECT ) );
+
+		expect( result.current.columns ).toEqual( [] );
+		expect( result.current.rows ).toEqual( [] );
+	} );
+
+	it( 'parses resolved track lists, gaps, and padding from computed style', () => {
+		const element = mockElement( {
+			gridTemplateColumns: '100px 100px 100px',
+			gridTemplateRows: '80px 80px',
+			columnGap: '10px',
+			rowGap: '8px',
+			paddingTop: '5px',
+			paddingRight: '6px',
+			paddingBottom: '7px',
+			paddingLeft: '8px',
+		} );
+
+		const { result } = renderHook( () => useGridTracks( element, RECT ) );
+
+		expect( result.current ).toEqual( {
+			columns: [ 100, 100, 100 ],
+			rows: [ 80, 80 ],
+			columnGap: 10,
+			rowGap: 8,
+			padding: { top: 5, right: 6, bottom: 7, left: 8 },
+			borderColor: '',
+		} );
+	} );
+
+	it( 'reads the --e-a-border-color-bold CSS variable from the iframe', () => {
+		const element = mockElement( {
+			gridTemplateColumns: '100px',
+			'--e-a-border-color-bold': '  #d5d8dc  ',
+		} );
+
+		const { result } = renderHook( () => useGridTracks( element, RECT ) );
+
+		expect( result.current.borderColor ).toBe( '#d5d8dc' );
+	} );
+
+	it( 'reports gap as 0 when computed style returns "normal"', () => {
+		const element = mockElement( {
+			gridTemplateColumns: '100px 100px',
+			columnGap: 'normal',
+			rowGap: 'normal',
+		} );
+
+		const { result } = renderHook( () => useGridTracks( element, RECT ) );
+
+		expect( result.current.columnGap ).toBe( 0 );
+		expect( result.current.rowGap ).toBe( 0 );
+	} );
+
+	it( 'recomputes when the rect dimensions change', () => {
+		const element = mockElement( { gridTemplateColumns: '100px' } );
+		const getComputedStyle = element.ownerDocument?.defaultView?.getComputedStyle as jest.Mock;
+
+		const { rerender } = renderHook( ( { rect } ) => useGridTracks( element, rect ), {
+			initialProps: { rect: new DOMRect( 0, 0, 320, 200 ) },
+		} );
+
+		const callsBefore = getComputedStyle.mock.calls.length;
+
+		rerender( { rect: new DOMRect( 0, 0, 400, 200 ) } );
+
+		expect( getComputedStyle.mock.calls.length ).toBeGreaterThan( callsBefore );
+	} );
+
+	it( 'does not recompute when the same rect dimensions are passed again', () => {
+		const element = mockElement( { gridTemplateColumns: '100px' } );
+		const getComputedStyle = element.ownerDocument?.defaultView?.getComputedStyle as jest.Mock;
+
+		const { rerender } = renderHook( ( { rect } ) => useGridTracks( element, rect ), {
+			initialProps: { rect: new DOMRect( 0, 0, 320, 200 ) },
+		} );
+
+		const callsBefore = getComputedStyle.mock.calls.length;
+
+		rerender( { rect: new DOMRect( 0, 0, 320, 200 ) } );
+
+		expect( getComputedStyle.mock.calls.length ).toBe( callsBefore );
+	} );
+} );