@elementor/editor-canvas 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,22 @@
+
+> @elementor/editor-canvas@0.1.0 build
+> tsup --config=../../tsup.build.ts
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: ../../../tsconfig.json
+CLI tsup v8.3.5
+CLI Using tsup config: /home/runner/work/elementor-packages/elementor-packages/tsup.build.ts
+CLI Target: esnext
+CLI Cleaning output folder
+ESM Build start
+CJS Build start
+ESM dist/index.mjs     4.77 KB
+ESM dist/index.mjs.map 8.61 KB
+ESM ⚡️ Build success in 48ms
+CJS dist/index.js     6.13 KB
+CJS dist/index.js.map 8.63 KB
+CJS ⚡️ Build success in 49ms
+DTS Build start
+DTS ⚡️ Build success in 11882ms
+DTS dist/index.d.mts 13.00 B
+DTS dist/index.d.ts  13.00 B

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @elementor/editor-canvas
+
+## 0.1.0
+
+### Minor Changes
+
+- d21c5c3: Introduce editor canvas to render element overlays for atomic elements
+
+### Patch Changes
+
+- Updated dependencies [e7f4706]
+- Updated dependencies [7781969]
+- Updated dependencies [e4c6e3b]
+- Updated dependencies [d21c5c3]
+- Updated dependencies [7781969]
+- Updated dependencies [0c6bcb6]
+  - @elementor/editor-elements@0.3.0
+  - @elementor/editor@0.17.0
+  - @elementor/editor-v1-adapters@0.8.4

package/dist/index.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/index.js

@@ -0,0 +1,161 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/init.tsx
+var import_editor = require("@elementor/editor");
+
+// src/components/elements-overlays.tsx
+var React2 = __toESM(require("react"));
+var import_editor_elements = require("@elementor/editor-elements");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+
+// src/components/element-overlay.tsx
+var React = __toESM(require("react"));
+var import_ui = require("@elementor/ui");
+var import_react4 = require("@floating-ui/react");
+
+// src/hooks/use-bind-react-props-to-element.ts
+var import_react = require("react");
+function useBindReactPropsToElement(element, getProps) {
+  (0, import_react.useEffect)(() => {
+    const el = element;
+    const { events, attrs } = groupProps(getProps());
+    events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
+    attrs.forEach(([attrName, attrValue]) => el.setAttribute(attrName, attrValue));
+    return () => {
+      events.forEach(([eventName, listener]) => el.removeEventListener(eventName, listener));
+      attrs.forEach(([attrName]) => el.removeAttribute(attrName));
+    };
+  }, [getProps, element]);
+}
+function groupProps(props) {
+  const eventRegex = /^on(?=[A-Z])/;
+  return Object.entries(props).reduce(
+    (acc, [propName, propValue]) => {
+      if (!eventRegex.test(propName)) {
+        acc.attrs.push([propName, propValue]);
+        return acc;
+      }
+      const eventName = propName.replace(eventRegex, "").toLowerCase();
+      const listener = propValue;
+      acc.events.push([eventName, listener]);
+      return acc;
+    },
+    {
+      events: [],
+      attrs: []
+    }
+  );
+}
+
+// src/hooks/use-floating-on-element.ts
+var import_react2 = require("react");
+var import_react3 = require("@floating-ui/react");
+function useFloatingOnElement({ element, isSelected }) {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const { refs, floatingStyles, context } = (0, import_react3.useFloating)({
+    // Must be controlled for interactions (like hover) to work.
+    open: isOpen || isSelected,
+    onOpenChange: setIsOpen,
+    // Add an animation frame to support scroll events (without it the floating element will stay in the same position).
+    whileElementsMounted: (...args) => (0, import_react3.autoUpdate)(...args, { animationFrame: true }),
+    // The first element in the canvas is `display: contents` so we need to use the first child.
+    elements: { reference: element.firstElementChild },
+    middleware: [
+      // Match the floating element's size to the reference element.
+      (0, import_react3.size)({
+        apply({ elements, rects }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`,
+            height: `${rects.reference.height}px`
+          });
+        }
+      }),
+      // Center the floating element on the reference element.
+      (0, import_react3.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
+    ]
+  });
+  return {
+    isVisible: isOpen || isSelected,
+    context,
+    floating: {
+      setRef: refs.setFloating,
+      ref: refs.floating,
+      styles: floatingStyles
+    }
+  };
+}
+
+// src/components/element-overlay.tsx
+var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
+var OverlayBox = (0, import_ui.styled)(import_ui.Box, { shouldForwardProp: (prop) => prop !== "isSelected" })(({ theme, isSelected }) => ({
+  outline: `${isSelected ? "2px" : "1px"} solid ${theme.palette.primary.light}`,
+  outlineOffset: isSelected ? "-2px" : "-1px",
+  pointerEvents: "none"
+}));
+function ElementOverlay({ element, isSelected }) {
+  const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
+  const { getFloatingProps, getReferenceProps } = (0, import_react4.useInteractions)([(0, import_react4.useHover)(context)]);
+  useBindReactPropsToElement(element, getReferenceProps);
+  return isVisible && /* @__PURE__ */ React.createElement(import_react4.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+    OverlayBox,
+    {
+      ref: floating.setRef,
+      isSelected,
+      style: floating.styles,
+      "data-element-overlay": element.dataset.id,
+      role: "presentation",
+      ...getFloatingProps()
+    }
+  ));
+}
+
+// src/components/elements-overlays.tsx
+function ElementsOverlays() {
+  const selected = (0, import_editor_elements.useSelectedElement)();
+  const domElements = (0, import_editor_elements.useElementsDomRef)();
+  const isPreviewMode = (0, import_editor_v1_adapters.__privateUseIsPreviewMode)();
+  const isKitRouteActive = (0, import_editor_v1_adapters.__privateUseIsRouteActive)("panel/global");
+  const isActive = !isPreviewMode && !isKitRouteActive;
+  return isActive && domElements.map((el) => /* @__PURE__ */ React2.createElement(
+    ElementOverlay,
+    {
+      element: el,
+      key: el.dataset.id,
+      isSelected: selected.element?.id === el.dataset.id
+    }
+  ));
+}
+
+// src/init.tsx
+function init() {
+  (0, import_editor.injectIntoTop)({
+    id: "elements-overlays",
+    component: ElementsOverlays
+  });
+}
+
+// src/index.ts
+init();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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/index.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { ElementsOverlays } from './components/elements-overlays';\n\nexport function init() {\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 { init } from './init';\n\ninit();\n"],"mappings":"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","names":["React","import_react","import_react","useIsPreviewMode","useIsRouteActive"]}

package/dist/index.mjs

@@ -0,0 +1,140 @@
+// src/init.tsx
+import { injectIntoTop } from "@elementor/editor";
+
+// src/components/elements-overlays.tsx
+import * as React2 from "react";
+import { useElementsDomRef, useSelectedElement } from "@elementor/editor-elements";
+import {
+  __privateUseIsPreviewMode as useIsPreviewMode,
+  __privateUseIsRouteActive as useIsRouteActive
+} from "@elementor/editor-v1-adapters";
+
+// src/components/element-overlay.tsx
+import * as React from "react";
+import { Box, styled } from "@elementor/ui";
+import { FloatingPortal, useHover, useInteractions } from "@floating-ui/react";
+
+// src/hooks/use-bind-react-props-to-element.ts
+import { useEffect } from "react";
+function useBindReactPropsToElement(element, getProps) {
+  useEffect(() => {
+    const el = element;
+    const { events, attrs } = groupProps(getProps());
+    events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
+    attrs.forEach(([attrName, attrValue]) => el.setAttribute(attrName, attrValue));
+    return () => {
+      events.forEach(([eventName, listener]) => el.removeEventListener(eventName, listener));
+      attrs.forEach(([attrName]) => el.removeAttribute(attrName));
+    };
+  }, [getProps, element]);
+}
+function groupProps(props) {
+  const eventRegex = /^on(?=[A-Z])/;
+  return Object.entries(props).reduce(
+    (acc, [propName, propValue]) => {
+      if (!eventRegex.test(propName)) {
+        acc.attrs.push([propName, propValue]);
+        return acc;
+      }
+      const eventName = propName.replace(eventRegex, "").toLowerCase();
+      const listener = propValue;
+      acc.events.push([eventName, listener]);
+      return acc;
+    },
+    {
+      events: [],
+      attrs: []
+    }
+  );
+}
+
+// src/hooks/use-floating-on-element.ts
+import { useState } from "react";
+import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
+function useFloatingOnElement({ element, isSelected }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    // Must be controlled for interactions (like hover) to work.
+    open: isOpen || isSelected,
+    onOpenChange: setIsOpen,
+    // Add an animation frame to support scroll events (without it the floating element will stay in the same position).
+    whileElementsMounted: (...args) => autoUpdate(...args, { animationFrame: true }),
+    // The first element in the canvas is `display: contents` so we need to use the first child.
+    elements: { reference: element.firstElementChild },
+    middleware: [
+      // Match the floating element's size to the reference element.
+      size({
+        apply({ elements, rects }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`,
+            height: `${rects.reference.height}px`
+          });
+        }
+      }),
+      // Center the floating element on the reference element.
+      offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
+    ]
+  });
+  return {
+    isVisible: isOpen || isSelected,
+    context,
+    floating: {
+      setRef: refs.setFloating,
+      ref: refs.floating,
+      styles: floatingStyles
+    }
+  };
+}
+
+// src/components/element-overlay.tsx
+var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
+var OverlayBox = styled(Box, { shouldForwardProp: (prop) => prop !== "isSelected" })(({ theme, isSelected }) => ({
+  outline: `${isSelected ? "2px" : "1px"} solid ${theme.palette.primary.light}`,
+  outlineOffset: isSelected ? "-2px" : "-1px",
+  pointerEvents: "none"
+}));
+function ElementOverlay({ element, isSelected }) {
+  const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
+  const { getFloatingProps, getReferenceProps } = useInteractions([useHover(context)]);
+  useBindReactPropsToElement(element, getReferenceProps);
+  return isVisible && /* @__PURE__ */ React.createElement(FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
+    OverlayBox,
+    {
+      ref: floating.setRef,
+      isSelected,
+      style: floating.styles,
+      "data-element-overlay": element.dataset.id,
+      role: "presentation",
+      ...getFloatingProps()
+    }
+  ));
+}
+
+// src/components/elements-overlays.tsx
+function ElementsOverlays() {
+  const selected = useSelectedElement();
+  const domElements = useElementsDomRef();
+  const isPreviewMode = useIsPreviewMode();
+  const isKitRouteActive = useIsRouteActive("panel/global");
+  const isActive = !isPreviewMode && !isKitRouteActive;
+  return isActive && domElements.map((el) => /* @__PURE__ */ React2.createElement(
+    ElementOverlay,
+    {
+      element: el,
+      key: el.dataset.id,
+      isSelected: selected.element?.id === el.dataset.id
+    }
+  ));
+}
+
+// src/init.tsx
+function init() {
+  injectIntoTop({
+    id: "elements-overlays",
+    component: ElementsOverlays
+  });
+}
+
+// src/index.ts
+init();
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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/index.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { ElementsOverlays } from './components/elements-overlays';\n\nexport function init() {\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 { init } from './init';\n\ninit();\n"],"mappings":"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","names":["React"]}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@elementor/editor-canvas",
+  "description": "Elementor Editor Canvas",
+  "version": "0.1.0",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/core/editor-canvas"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "dependencies": {
+    "@elementor/editor": "^0.17.0",
+    "@elementor/ui": "^1.21.9",
+    "@floating-ui/react": "^0.26.28",
+    "@elementor/editor-elements": "^0.3.0",
+    "@elementor/editor-v1-adapters": "^0.8.4"
+  }
+}

package/src/components/__tests__/elements-overlays.test.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { createDOMElement, createMockElementType } from 'test-utils';
+import { useElementsDomRef, useSelectedElement } from '@elementor/editor-elements';
+import {
+	__privateUseIsPreviewMode as useIsPreviewMode,
+	__privateUseIsRouteActive as useIsRouteActive,
+} from '@elementor/editor-v1-adapters';
+import { render, screen } from '@testing-library/react';
+
+import { CANVAS_WRAPPER_ID } from '../element-overlay';
+import { ElementsOverlays } from '../elements-overlays';
+
+jest.mock( '@elementor/editor-elements' );
+jest.mock( '@elementor/editor-v1-adapters' );
+
+describe( '<ElementsOverlays />', () => {
+	beforeEach( () => {
+		const atomicElements = [
+			createDOMElement( {
+				tag: 'div',
+				attrs: {
+					'data-id': '10',
+					'data-atomic': '',
+				},
+			} ),
+			createDOMElement( {
+				tag: 'span',
+				attrs: {
+					'data-id': '20',
+					'data-atomic': '',
+				},
+			} ),
+		];
+
+		window.document.body.appendChild(
+			createDOMElement( {
+				tag: 'div',
+				attrs: {
+					'data-testid': CANVAS_WRAPPER_ID,
+					id: CANVAS_WRAPPER_ID,
+				},
+				children: [
+					createDOMElement( {
+						tag: 'iframe',
+						children: atomicElements,
+					} ),
+				],
+			} )
+		);
+
+		jest.mocked( useIsPreviewMode ).mockReturnValue( false );
+		jest.mocked( useIsRouteActive ).mockReturnValue( false );
+
+		jest.mocked( useElementsDomRef ).mockImplementation( () => atomicElements );
+		jest.mocked( useSelectedElement ).mockReturnValue( { element: null, elementType: null } );
+	} );
+
+	afterEach( () => {
+		window.document.body.innerHTML = '';
+	} );
+
+	it( 'should render an overlay on atomic element when the element is selected', () => {
+		// Arrange.
+		jest.mocked( useSelectedElement ).mockReturnValue( {
+			element: { id: '20', type: 'widget' },
+			elementType: createMockElementType(),
+		} );
+
+		// Act.
+		render( <ElementsOverlays /> );
+
+		// Assert.
+		const overlay = screen.getByRole( 'presentation' );
+
+		expect( overlay ).toHaveAttribute( 'data-element-overlay', '20' );
+		expect( screen.getByTestId( CANVAS_WRAPPER_ID ) ).toContainElement( overlay );
+	} );
+
+	it.each( [
+		{
+			message: 'preview mode is active',
+			payload: {
+				isPreviewMode: true,
+				isKitRouteActive: false,
+				selected: { id: '20', type: 'widget' },
+			},
+		},
+		{
+			message: 'kit route is active',
+			payload: {
+				isPreviewMode: false,
+				isKitRouteActive: true,
+				selected: { id: '20', type: 'widget' },
+			},
+		},
+		{
+			message: 'nothing selected or hovered',
+			payload: {
+				isPreviewMode: false,
+				isKitRouteActive: false,
+				selected: null,
+			},
+		},
+	] )( 'should not render overlays if $message', ( { payload } ) => {
+		// Arrange.
+		jest.mocked( useIsPreviewMode ).mockReturnValue( payload.isPreviewMode );
+		jest.mocked( useIsRouteActive ).mockReturnValue( payload.isKitRouteActive );
+
+		jest.mocked( useSelectedElement ).mockReturnValue(
+			payload.selected
+				? {
+						element: payload.selected,
+						elementType: createMockElementType(),
+				  }
+				: {
+						element: null,
+						elementType: null,
+				  }
+		);
+
+		// Act.
+		render( <ElementsOverlays /> );
+
+		// Assert.
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/components/element-overlay.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Box, styled } from '@elementor/ui';
+import { FloatingPortal, useHover, useInteractions } from '@floating-ui/react';
+
+import { useBindReactPropsToElement } from '../hooks/use-bind-react-props-to-element';
+import { useFloatingOnElement } from '../hooks/use-floating-on-element';
+
+export const CANVAS_WRAPPER_ID = 'elementor-preview-responsive-wrapper';
+
+type Props = {
+	element: HTMLElement;
+	isSelected: boolean;
+};
+
+const OverlayBox = styled( Box, { shouldForwardProp: ( prop ) => prop !== 'isSelected' } )<
+	Pick< Props, 'isSelected' >
+>( ( { theme, isSelected } ) => ( {
+	outline: `${ isSelected ? '2px' : '1px' } solid ${ theme.palette.primary.light }`,
+	outlineOffset: isSelected ? '-2px' : '-1px',
+	pointerEvents: 'none',
+} ) );
+
+export function ElementOverlay( { element, isSelected }: Props ) {
+	const { context, floating, isVisible } = useFloatingOnElement( { element, isSelected } );
+	const { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );
+
+	useBindReactPropsToElement( element, getReferenceProps );
+
+	return (
+		isVisible && (
+			<FloatingPortal id={ CANVAS_WRAPPER_ID }>
+				<OverlayBox
+					ref={ floating.setRef }
+					isSelected={ isSelected }
+					style={ floating.styles }
+					data-element-overlay={ element.dataset.id }
+					role="presentation"
+					{ ...getFloatingProps() }
+				/>
+			</FloatingPortal>
+		)
+	);
+}

package/src/components/elements-overlays.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useElementsDomRef, useSelectedElement } from '@elementor/editor-elements';
+import {
+	__privateUseIsPreviewMode as useIsPreviewMode,
+	__privateUseIsRouteActive as useIsRouteActive,
+} from '@elementor/editor-v1-adapters';
+
+import { ElementOverlay } from './element-overlay';
+
+export function ElementsOverlays() {
+	const selected = useSelectedElement();
+	const domElements = useElementsDomRef();
+
+	const isPreviewMode = useIsPreviewMode();
+	const isKitRouteActive = useIsRouteActive( 'panel/global' );
+
+	const isActive = ! isPreviewMode && ! isKitRouteActive;
+
+	return (
+		isActive &&
+		domElements.map( ( el ) => (
+			<ElementOverlay
+				element={ el }
+				key={ el.dataset.id }
+				isSelected={ selected.element?.id === el.dataset.id }
+			/>
+		) )
+	);
+}

package/src/hooks/use-bind-react-props-to-element.ts

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+
+type Props = Record< string, unknown >;
+
+export function useBindReactPropsToElement( element: HTMLElement, getProps: () => Props ) {
+	useEffect( () => {
+		const el = element;
+
+		const { events, attrs } = groupProps( getProps() );
+
+		events.forEach( ( [ eventName, listener ] ) => el.addEventListener( eventName, listener ) );
+		attrs.forEach( ( [ attrName, attrValue ] ) => el.setAttribute( attrName, attrValue ) );
+
+		return () => {
+			events.forEach( ( [ eventName, listener ] ) => el.removeEventListener( eventName, listener ) );
+			attrs.forEach( ( [ attrName ] ) => el.removeAttribute( attrName ) );
+		};
+	}, [ getProps, element ] );
+}
+
+type GroupedProps = {
+	events: Array< [ string, () => void ] >;
+	attrs: Array< [ string, string ] >;
+};
+
+function groupProps( props: Props ) {
+	const eventRegex = /^on(?=[A-Z])/;
+
+	return Object.entries( props ).reduce< GroupedProps >(
+		( acc, [ propName, propValue ] ) => {
+			if ( ! eventRegex.test( propName ) ) {
+				acc.attrs.push( [ propName, propValue as string ] );
+
+				return acc;
+			}
+
+			const eventName = propName.replace( eventRegex, '' ).toLowerCase();
+			const listener = propValue as () => void;
+
+			acc.events.push( [ eventName, listener ] );
+
+			return acc;
+		},
+		{
+			events: [],
+			attrs: [],
+		}
+	);
+}

package/src/hooks/use-floating-on-element.ts

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { autoUpdate, offset, size, useFloating } from '@floating-ui/react';
+
+type Options = {
+	element: HTMLElement;
+	isSelected: boolean;
+};
+
+export function useFloatingOnElement( { element, isSelected }: Options ) {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	const { refs, floatingStyles, context } = useFloating( {
+		// Must be controlled for interactions (like hover) to work.
+		open: isOpen || isSelected,
+		onOpenChange: setIsOpen,
+
+		// Add an animation frame to support scroll events (without it the floating element will stay in the same position).
+		whileElementsMounted: ( ...args ) => autoUpdate( ...args, { animationFrame: true } ),
+
+		// The first element in the canvas is `display: contents` so we need to use the first child.
+		elements: { reference: element.firstElementChild },
+
+		middleware: [
+			// Match the floating element's size to the reference element.
+			size( {
+				apply( { elements, rects } ) {
+					Object.assign( elements.floating.style, {
+						width: `${ rects.reference.width }px`,
+						height: `${ rects.reference.height }px`,
+					} );
+				},
+			} ),
+
+			// Center the floating element on the reference element.
+			offset( ( { rects } ) => -rects.reference.height / 2 - rects.floating.height / 2 ),
+		],
+	} );
+
+	return {
+		isVisible: isOpen || isSelected,
+		context,
+		floating: {
+			setRef: refs.setFloating,
+			ref: refs.floating,
+			styles: floatingStyles,
+		},
+	};
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import { init } from './init';
+
+init();

package/src/init.tsx

@@ -0,0 +1,10 @@
+import { injectIntoTop } from '@elementor/editor';
+
+import { ElementsOverlays } from './components/elements-overlays';
+
+export function init() {
+	injectIntoTop( {
+		id: 'elements-overlays',
+		component: ElementsOverlays,
+	} );
+}