@elementor/editor-canvas 0.18.0 → 0.18.1

package/src/hooks/__tests__/use-documents-css-links.test.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { createDOMElement } from 'test-utils';
+import { render, renderHook } from '@testing-library/react';
+
+import { getCanvasIframeDocument } from '../../sync/get-canvas-iframe-document';
+import { useDocumentsCssLinks } from '../use-documents-css-links';
+
+jest.mock( '../../sync/get-canvas-iframe-document', () => ( {
+	getCanvasIframeDocument: jest.fn(),
+} ) );
+
+describe( 'useDocumentsCssLinks', () => {
+	const head = createDOMElement( {
+		tag: 'head',
+		children: [
+			createDOMElement( {
+				tag: 'link',
+				attrs: { href: '2.css', rel: 'stylesheet', id: 'elementor-post-2-css' },
+			} ),
+			createDOMElement( {
+				tag: 'link',
+				attrs: { href: '10.css', rel: 'stylesheet', id: 'elementor-post-10-css' },
+			} ),
+			createDOMElement( {
+				tag: 'link',
+				attrs: { href: '5.css', rel: 'stylesheet', id: 'elementor-post-5-css' },
+			} ),
+			createDOMElement( {
+				tag: 'link',
+				attrs: { href: 'not-elementor.css', rel: 'stylesheet', id: 'not-elementor-css' },
+			} ),
+		],
+	} );
+
+	const body = createDOMElement( {
+		tag: 'body',
+		children: [
+			createDOMElement( { tag: 'div', attrs: { 'data-elementor-id': '2' } } ),
+			createDOMElement( { tag: 'div', attrs: { 'data-elementor-id': '4' } } ),
+			createDOMElement( {
+				tag: 'div',
+				children: [ createDOMElement( { tag: 'div', attrs: { 'data-elementor-id': '5' } } ) ],
+			} ),
+		],
+	} );
+
+	const Component = () => {
+		const links = useDocumentsCssLinks();
+
+		return createPortal(
+			<>
+				{ links.map( ( link ) => (
+					<link key={ link.id } { ...link } data-from-hook />
+				) ) }
+			</>,
+			head
+		);
+	};
+
+	it( 'should return an array of links attrs and remove them from the dom', () => {
+		// Arrange.
+		const document = { body, head };
+
+		jest.mocked( getCanvasIframeDocument ).mockReturnValue( document as never );
+
+		// Act.
+		render( <Component /> );
+
+		// Assert.
+		expect( head ).toMatchSnapshot();
+	} );
+
+	it( 'should return empty array when iframe document is not available', () => {
+		// Arrange.
+		jest.mocked( getCanvasIframeDocument ).mockReturnValue( null );
+
+		// Act.
+		const { result } = renderHook( () => useDocumentsCssLinks(), { initialProps: {} } );
+
+		// Assert.
+		expect( result.current ).toEqual( [] );
+	} );
+} );

package/src/hooks/use-documents-css-links.ts

@@ -0,0 +1,58 @@
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+
+import { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';
+
+const REMOVED_ATTR = 'data-e-removed';
+const DOCUMENT_WRAPPER_ATTR = 'data-elementor-id';
+const CSS_LINK_ID_PREFIX = 'elementor-post-';
+const CSS_LINK_ID_SUFFIX = '-css';
+
+export function useDocumentsCssLinks() {
+	return useListenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => {
+		const iframeDocument = getCanvasIframeDocument();
+
+		if ( ! iframeDocument ) {
+			return [];
+		}
+
+		const relevantLinkIds = getDocumentsIdsInCanvas( iframeDocument ).map(
+			( id ) => `${ CSS_LINK_ID_PREFIX }${ id }${ CSS_LINK_ID_SUFFIX }`
+		);
+
+		const links = getDocumentsCssLinks( iframeDocument ).filter( ( link ) =>
+			relevantLinkIds.includes( link.getAttribute( 'id' ) ?? '' )
+		);
+
+		links.forEach( ( link ) => {
+			if ( ! link.hasAttribute( REMOVED_ATTR ) ) {
+				link.remove();
+			}
+		} );
+
+		return links.map( ( link ) => ( {
+			...getLinkAttrs( link ),
+			id: link.getAttribute( 'id' ) ?? '',
+			[ REMOVED_ATTR ]: true,
+		} ) );
+	} );
+}
+
+function getDocumentsIdsInCanvas( document: Document ) {
+	return [ ...( document.body.querySelectorAll< HTMLElement >( `[${ DOCUMENT_WRAPPER_ATTR }]` ) ?? [] ) ].map(
+		( el ) => el.getAttribute( DOCUMENT_WRAPPER_ATTR ) || ''
+	);
+}
+
+function getDocumentsCssLinks( document: Document ) {
+	return [
+		...( document.head.querySelectorAll< HTMLLinkElement >(
+			`link[rel="stylesheet"][id^=${ CSS_LINK_ID_PREFIX }][id$=${ CSS_LINK_ID_SUFFIX }]`
+		) ?? [] ),
+	];
+}
+
+function getLinkAttrs( el: HTMLLinkElement ) {
+	const entries = [ ...el.attributes ].map( ( attr ) => [ attr.name, attr.value ] as const );
+
+	return Object.fromEntries( entries );
+}

package/src/sync/{get-canvas-iframe-head.ts → get-canvas-iframe-document.ts}

@@ -1,7 +1,7 @@
 import type { CanvasExtendedWindow } from './types';
 
-export function getCanvasIframeHead() {
+export function getCanvasIframeDocument() {
 	const extendedWindow = window as unknown as CanvasExtendedWindow;
 
-	return extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument?.head;
+	return extendedWindow.elementor?.$preview?.[ 0 ]?.contentDocument;
 }