@elementor/editor-canvas 3.35.0-429 → 3.35.0-431

package/dist/index.js

@@ -374,13 +374,15 @@ var useHasOverlapping = () => {
 // src/components/outline-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
-  shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset"
-})(({ theme, isSelected, isSmallerOffset }) => ({
-  outline: `${isSelected ? "2px" : "1px"} solid ${theme.palette.primary.light}`,
-  outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
-  pointerEvents: "none"
-}));
-var OutlineOverlay = ({ element, isSelected, id }) => {
+  shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset" && prop !== "isGlobal"
+})(
+  ({ theme, isSelected, isSmallerOffset, isGlobal }) => ({
+    outline: `${isSelected ? "2px" : "1px"} solid ${isGlobal ? theme.palette.global.main : theme.palette.primary.light}`,
+    outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
+    pointerEvents: "none"
+  })
+);
+var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = (0, import_react5.useInteractions)([(0, import_react5.useHover)(context)]);
   const hasOverlapping = useHasOverlapping();
@@ -391,6 +393,7 @@ var OutlineOverlay = ({ element, isSelected, id }) => {
     {
       ref: floating.setRef,
       isSelected,
+      isGlobal,
       style: floating.styles,
       "data-element-overlay": id,
       role: "presentation",
@@ -418,10 +421,19 @@ function ElementsOverlays() {
   if (!isActive) {
     return null;
   }
-  return elements.map(([id, element]) => {
+  return elements.map(({ id, domElement, isGlobal }) => {
     const isSelected = selected.element?.id === id;
     return overlayRegistry.map(
-      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element, isSelected }) && /* @__PURE__ */ React2.createElement(Overlay, { key: `${id}-${index}`, id, element, isSelected })
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected }) && /* @__PURE__ */ React2.createElement(
+        Overlay,
+        {
+          key: `${id}-${index}`,
+          id,
+          element: domElement,
+          isSelected,
+          isGlobal
+        }
+      )
     );
   });
 }
@@ -429,7 +441,11 @@ function useElementsDom() {
   return (0, import_editor_v1_adapters2.__privateUseListenTo)(
     [(0, import_editor_v1_adapters2.windowEvent)("elementor/editor/element-rendered"), (0, import_editor_v1_adapters2.windowEvent)("elementor/editor/element-destroyed")],
     () => {
-      return (0, import_editor_elements2.getElements)().filter((el) => ELEMENTS_DATA_ATTR in (el.view?.el?.dataset ?? {})).map((element) => [element.id, element.view?.getDomElement?.()?.get?.(0)]).filter((item) => !!item[1]);
+      return (0, import_editor_elements2.getElements)().filter((el) => ELEMENTS_DATA_ATTR in (el.view?.el?.dataset ?? {})).map((element) => ({
+        id: element.id,
+        domElement: element.view?.getDomElement?.()?.get?.(0),
+        isGlobal: element.model.get("isGlobal") ?? false
+      })).filter((item) => !!item.domElement);
     }
   );
 }

package/dist/index.mjs

@@ -328,13 +328,15 @@ var useHasOverlapping = () => {
 // src/components/outline-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
 var OverlayBox = styled(Box, {
-  shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset"
-})(({ theme, isSelected, isSmallerOffset }) => ({
-  outline: `${isSelected ? "2px" : "1px"} solid ${theme.palette.primary.light}`,
-  outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
-  pointerEvents: "none"
-}));
-var OutlineOverlay = ({ element, isSelected, id }) => {
+  shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset" && prop !== "isGlobal"
+})(
+  ({ theme, isSelected, isSmallerOffset, isGlobal }) => ({
+    outline: `${isSelected ? "2px" : "1px"} solid ${isGlobal ? theme.palette.global.main : theme.palette.primary.light}`,
+    outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
+    pointerEvents: "none"
+  })
+);
+var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = useInteractions([useHover(context)]);
   const hasOverlapping = useHasOverlapping();
@@ -345,6 +347,7 @@ var OutlineOverlay = ({ element, isSelected, id }) => {
     {
       ref: floating.setRef,
       isSelected,
+      isGlobal,
       style: floating.styles,
       "data-element-overlay": id,
       role: "presentation",
@@ -372,10 +375,19 @@ function ElementsOverlays() {
   if (!isActive) {
     return null;
   }
-  return elements.map(([id, element]) => {
+  return elements.map(({ id, domElement, isGlobal }) => {
     const isSelected = selected.element?.id === id;
     return overlayRegistry.map(
-      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element, isSelected }) && /* @__PURE__ */ React2.createElement(Overlay, { key: `${id}-${index}`, id, element, isSelected })
+      ({ shouldRender, component: Overlay }, index) => shouldRender({ id, element: domElement, isSelected }) && /* @__PURE__ */ React2.createElement(
+        Overlay,
+        {
+          key: `${id}-${index}`,
+          id,
+          element: domElement,
+          isSelected,
+          isGlobal
+        }
+      )
     );
   });
 }
@@ -383,7 +395,11 @@ function useElementsDom() {
   return useListenTo(
     [windowEvent("elementor/editor/element-rendered"), windowEvent("elementor/editor/element-destroyed")],
     () => {
-      return getElements().filter((el) => ELEMENTS_DATA_ATTR in (el.view?.el?.dataset ?? {})).map((element) => [element.id, element.view?.getDomElement?.()?.get?.(0)]).filter((item) => !!item[1]);
+      return getElements().filter((el) => ELEMENTS_DATA_ATTR in (el.view?.el?.dataset ?? {})).map((element) => ({
+        id: element.id,
+        domElement: element.view?.getDomElement?.()?.get?.(0),
+        isGlobal: element.model.get("isGlobal") ?? false
+      })).filter((item) => !!item.domElement);
     }
   );
 }

package/package.json

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

package/src/components/elements-overlays.tsx

@@ -32,19 +32,29 @@ export function ElementsOverlays() {
 		return null;
 	}
 
-	return elements.map( ( [ id, element ] ) => {
+	return elements.map( ( { id, domElement, isGlobal } ) => {
 		const isSelected = selected.element?.id === id;
 
 		return overlayRegistry.map(
 			( { shouldRender, component: Overlay }, index ) =>
-				shouldRender( { id, element, isSelected } ) && (
-					<Overlay key={ `${ id }-${ index }` } id={ id } element={ element } isSelected={ isSelected } />
+				shouldRender( { id, element: domElement, isSelected } ) && (
+					<Overlay
+						key={ `${ id }-${ index }` }
+						id={ id }
+						element={ domElement }
+						isSelected={ isSelected }
+						isGlobal={ isGlobal }
+					/>
 				)
 		);
 	} );
 }
 
-type IdElementTuple = [ string, HTMLElement ];
+type ElementData = {
+	id: string;
+	domElement: HTMLElement;
+	isGlobal: boolean;
+};
 
 function useElementsDom() {
 	return useListenTo(
@@ -52,8 +62,12 @@ function useElementsDom() {
 		() => {
 			return getElements()
 				.filter( ( el ) => ELEMENTS_DATA_ATTR in ( el.view?.el?.dataset ?? {} ) )
-				.map( ( element ) => [ element.id, element.view?.getDomElement?.()?.get?.( 0 ) ] )
-				.filter( ( item ): item is IdElementTuple => !! item[ 1 ] );
+				.map( ( element ) => ( {
+					id: element.id,
+					domElement: element.view?.getDomElement?.()?.get?.( 0 ),
+					isGlobal: element.model.get( 'isGlobal' ) ?? false,
+				} ) )
+				.filter( ( item ): item is ElementData => !! item.domElement );
 		}
 	);
 }

package/src/components/outline-overlay.tsx

@@ -14,14 +14,18 @@ type Props = ElementOverlayProps & {
 };
 
 const OverlayBox = styled( Box, {
-	shouldForwardProp: ( prop ) => prop !== 'isSelected' && prop !== 'isSmallerOffset',
-} )< Pick< Props, 'isSelected' | 'isSmallerOffset' > >( ( { theme, isSelected, isSmallerOffset } ) => ( {
-	outline: `${ isSelected ? '2px' : '1px' } solid ${ theme.palette.primary.light }`,
-	outlineOffset: isSelected && ! isSmallerOffset ? '-2px' : '-1px',
-	pointerEvents: 'none',
-} ) );
+	shouldForwardProp: ( prop ) => prop !== 'isSelected' && prop !== 'isSmallerOffset' && prop !== 'isGlobal',
+} )< Pick< Props, 'isSelected' | 'isSmallerOffset' | 'isGlobal' > >(
+	( { theme, isSelected, isSmallerOffset, isGlobal } ) => ( {
+		outline: `${ isSelected ? '2px' : '1px' } solid ${
+			isGlobal ? theme.palette.global.main : theme.palette.primary.light
+		}`,
+		outlineOffset: isSelected && ! isSmallerOffset ? '-2px' : '-1px',
+		pointerEvents: 'none',
+	} )
+);
 
-export const OutlineOverlay = ( { element, isSelected, id }: Props ): React.ReactElement | false => {
+export const OutlineOverlay = ( { element, isSelected, id, isGlobal = false }: Props ): React.ReactElement | false => {
 	const { context, floating, isVisible } = useFloatingOnElement( { element, isSelected } );
 	const { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );
 	const hasOverlapping = useHasOverlapping();
@@ -36,6 +40,7 @@ export const OutlineOverlay = ( { element, isSelected, id }: Props ): React.Reac
 				<OverlayBox
 					ref={ floating.setRef }
 					isSelected={ isSelected }
+					isGlobal={ isGlobal }
 					style={ floating.styles }
 					data-element-overlay={ id }
 					role="presentation"

package/src/types/element-overlay.ts

@@ -4,6 +4,7 @@ export type ElementOverlayProps = {
 	element: HTMLElement;
 	id: string;
 	isSelected: boolean;
+	isGlobal?: boolean;
 };
 
 export type OverlayFilterArgs = {