@elementor/editor-canvas 0.13.1 → 0.15.0

package/dist/index.mjs

@@ -3,8 +3,13 @@ import { injectIntoTop } from "@elementor/editor";
 
 // src/components/elements-overlays.tsx
 import * as React2 from "react";
-import { useElementsDomRef, useSelectedElement } from "@elementor/editor-elements";
-import { __privateUseIsRouteActive as useIsRouteActive, useEditMode } from "@elementor/editor-v1-adapters";
+import { getElements, useSelectedElement } from "@elementor/editor-elements";
+import {
+  __privateUseIsRouteActive as useIsRouteActive,
+  __privateUseListenTo as useListenTo,
+  useEditMode,
+  windowEvent
+} from "@elementor/editor-v1-adapters";
 
 // src/components/element-overlay.tsx
 import * as React from "react";
@@ -46,7 +51,7 @@ function groupProps(props) {
 }
 
 // src/hooks/use-floating-on-element.ts
-import { useState } from "react";
+import { useEffect as useEffect2, useState } from "react";
 import { autoUpdate, offset, size, useFloating } from "@floating-ui/react";
 function useFloatingOnElement({ element, isSelected }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -54,10 +59,7 @@ function useFloatingOnElement({ element, isSelected }) {
     // 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 },
+    whileElementsMounted: autoUpdate,
     middleware: [
       // Match the floating element's size to the reference element.
       size({
@@ -72,6 +74,9 @@ function useFloatingOnElement({ element, isSelected }) {
       offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
     ]
   });
+  useEffect2(() => {
+    refs.setReference(element);
+  }, [element, refs]);
   return {
     isVisible: isOpen || isSelected,
     context,
@@ -90,7 +95,7 @@ var OverlayBox = styled(Box, { shouldForwardProp: (prop) => prop !== "isSelected
   outlineOffset: isSelected ? "-2px" : "-1px",
   pointerEvents: "none"
 }));
-function ElementOverlay({ element, isSelected }) {
+function ElementOverlay({ element, isSelected, id }) {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = useInteractions([useHover(context)]);
   useBindReactPropsToElement(element, getReferenceProps);
@@ -100,7 +105,7 @@ function ElementOverlay({ element, isSelected }) {
       ref: floating.setRef,
       isSelected,
       style: floating.styles,
-      "data-element-overlay": element.dataset.id,
+      "data-element-overlay": id,
       role: "presentation",
       ...getFloatingProps()
     }
@@ -110,31 +115,38 @@ function ElementOverlay({ element, isSelected }) {
 // src/components/elements-overlays.tsx
 function ElementsOverlays() {
   const selected = useSelectedElement();
-  const domElements = useElementsDomRef();
+  const elements = useElementsDom();
   const currentEditMode = useEditMode();
   const isEditMode = currentEditMode === "edit";
   const isKitRouteActive = useIsRouteActive("panel/global");
   const isActive = isEditMode && !isKitRouteActive;
-  return isActive && domElements.map((el) => /* @__PURE__ */ React2.createElement(
-    ElementOverlay,
-    {
-      element: el,
-      key: el.dataset.id,
-      isSelected: selected.element?.id === el.dataset.id
+  return isActive && elements.map(([id, element]) => /* @__PURE__ */ React2.createElement(ElementOverlay, { key: id, id, element, isSelected: selected.element?.id === id }));
+}
+var ELEMENTS_DATA_ATTR = "atomic";
+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]);
     }
-  ));
+  );
 }
 
 // src/transformers/create-transformers-registry.ts
 function createTransformersRegistry() {
   const transformers = {};
+  let fallbackTransformer = null;
   return {
-    register(name, transformer) {
-      transformers[name] = transformer;
+    register(type, transformer) {
+      transformers[type] = transformer;
+      return this;
+    },
+    registerFallback(transformer) {
+      fallbackTransformer = transformer;
       return this;
     },
-    all() {
-      return transformers;
+    get(type) {
+      return transformers[type] ?? fallbackTransformer;
     }
   };
 }
@@ -200,7 +212,7 @@ var plainTransformer = createTransformer((value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("string", plainTransformer).register("url", plainTransformer).register("number", plainTransformer).register("boolean", plainTransformer).register("classes", arrayTransformer).register("link", linkTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("image-attachment-id", plainTransformer);
+  settingsTransformersRegistry.register("classes", arrayTransformer).register("link", linkTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).registerFallback(plainTransformer);
 }
 
 // src/style-transformers-registry.ts
@@ -242,12 +254,12 @@ var backgroundImageOverlayTransformer = createTransformer((value) => {
 
 // src/transformers/styles/background-image-position-offset-transformer.ts
 var backgroundImagePositionOffsetTransformer = createTransformer(
-  ({ x = "0px", y = "0px" }) => `${x} ${y}`
+  ({ x, y }) => `${x ?? "0px"} ${y ?? "0px"}`
 );
 
 // src/transformers/styles/background-image-size-scale-transformer.ts
 var backgroundImageSizeScaleTransformer = createTransformer(
-  ({ width = "auto", height = "auto" }) => `${width} ${height}`
+  ({ width, height }) => `${width ?? "auto"} ${height ?? "auto"}`
 );
 
 // src/transformers/styles/background-transformer.ts
@@ -317,7 +329,7 @@ function initStyleTransformers() {
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ propKey, key }) => `${propKey}-${key}`
     )
-  ).register("color", plainTransformer).register("number", plainTransformer).register("string", plainTransformer).register("url", plainTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", createCombineArrayTransformer(",")).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", backgroundImagePositionOffsetTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-attachment-id", plainTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register(
+  ).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", createCombineArrayTransformer(",")).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", backgroundImagePositionOffsetTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register(
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).register(
@@ -332,7 +344,7 @@ function initStyleTransformers() {
       ["start-start", "start-end", "end-start", "end-end"],
       ({ key }) => `border-${key}-radius`
     )
-  );
+  ).registerFallback(plainTransformer);
 }
 
 // src/init-styles-renderer.ts
@@ -353,9 +365,6 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
       Object.entries(schema).map(async ([key, type]) => {
         const value = props[key] ?? type.default;
         const transformed = await transform({ value, key, type, signal });
-        if (transformed === null) {
-          return;
-        }
         onPropResolve?.({ key, value: transformed });
         if (isMultiProps(transformed)) {
           return getMultiPropsValue(transformed);
@@ -384,6 +393,9 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
         return null;
       }
     }
+    if (value.$$type !== type.key) {
+      return null;
+    }
     let resolvedValue = value.value;
     if (type.kind === "object") {
       resolvedValue = await resolve({
@@ -399,7 +411,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
         )
       );
     }
-    const transformer = transformers[value.$$type];
+    const transformer = transformers.get(value.$$type);
     if (!transformer) {
       return null;
     }
@@ -472,6 +484,9 @@ function createStyleWrapper(value = "", wrapper) {
 async function propsToCss({ props, resolve, signal }) {
   const transformed = await resolve({ props, signal });
   return Object.entries(transformed).reduce((acc, [propName, propValue]) => {
+    if (propValue === null) {
+      return acc;
+    }
     acc.push(propName + ":" + propValue + ";");
     return acc;
   }, []).join("");
@@ -499,7 +514,7 @@ function initStylesRenderer() {
   listenTo(v1ReadyEvent(), () => {
     let abortController = null;
     const resolve = createPropsResolver({
-      transformers: styleTransformersRegistry.all(),
+      transformers: styleTransformersRegistry,
       schema: getStylesSchema(),
       onPropResolve: enqueueUsedFonts
     });
@@ -550,6 +565,51 @@ function enqueueUsedFonts({ key, value }) {
 import { getWidgetsCache } from "@elementor/editor-elements";
 import { __privateListenTo, v1ReadyEvent as v1ReadyEvent2 } from "@elementor/editor-v1-adapters";
 
+// src/renderers/create-dom-renderer.ts
+import { createArrayLoader, createEnvironment } from "@elementor/twing";
+function createDomRenderer() {
+  const loader = createArrayLoader({});
+  const environment = createEnvironment(loader);
+  environment.registerEscapingStrategy(escapeHtmlTag, "html_tag");
+  environment.registerEscapingStrategy(escapeURL, "full_url");
+  return {
+    register: loader.setTemplate,
+    render: environment.render
+  };
+}
+function escapeHtmlTag(value) {
+  const allowedTags = [
+    "a",
+    "article",
+    "aside",
+    "button",
+    "div",
+    "footer",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "header",
+    "main",
+    "nav",
+    "p",
+    "section",
+    "span"
+  ];
+  return allowedTags.includes(value) ? value : "div";
+}
+function escapeURL(value) {
+  const allowedProtocols = ["http:", "https:", "mailto:", "tel:"];
+  try {
+    const parsed = new URL(value);
+    return allowedProtocols.includes(parsed.protocol) ? value : "";
+  } catch {
+    return "";
+  }
+}
+
 // src/legacy/create-element-type.ts
 function createElementType(type) {
   const legacyWindow = window;
@@ -558,11 +618,11 @@ function createElementType(type) {
       return type;
     }
     getView() {
-      return createElementView();
+      return createElementViewClassDeclaration();
     }
   };
 }
-function createElementView() {
+function createElementViewClassDeclaration() {
   const legacyWindow = window;
   return class extends legacyWindow.elementor.modules.elements.views.Widget {
     // Dispatch `render` event so the overlay layer will be updated
@@ -613,16 +673,114 @@ function createElementView() {
   };
 }
 
+// src/legacy/signalized-process.ts
+function signalizedProcess(signal, steps = []) {
+  return {
+    then: (cb) => {
+      steps.push(cb);
+      return signalizedProcess(signal, steps);
+    },
+    execute: async () => {
+      let lastResult;
+      for (const step of steps) {
+        if (signal.aborted) {
+          break;
+        }
+        lastResult = await step(lastResult, signal);
+      }
+    }
+  };
+}
+
+// src/legacy/create-templated-element-type.ts
+function createTemplatedElementType({ type, renderer, element }) {
+  const legacyWindow = window;
+  Object.entries(element.twig_templates).forEach(([key, template]) => {
+    renderer.register(key, template);
+  });
+  const propsResolver = createPropsResolver({
+    transformers: settingsTransformersRegistry,
+    schema: element.atomic_props_schema
+  });
+  return class extends legacyWindow.elementor.modules.elements.types.Widget {
+    getType() {
+      return type;
+    }
+    getView() {
+      return createTemplatedElementViewClassDeclaration({
+        type,
+        renderer,
+        propsResolver,
+        baseStylesDictionary: element.base_styles_dictionary,
+        templateKey: element.twig_main_template
+      });
+    }
+  };
+}
+function canBeTemplated(element) {
+  return !!(element.atomic_props_schema && element.twig_templates && element.twig_main_template && element.base_styles_dictionary);
+}
+function createTemplatedElementViewClassDeclaration({
+  type,
+  renderer,
+  propsResolver: resolveProps,
+  templateKey,
+  baseStylesDictionary
+}) {
+  const BaseView = createElementViewClassDeclaration();
+  return class extends BaseView {
+    #abortController = null;
+    getTemplateType() {
+      return "twig";
+    }
+    renderOnChange() {
+      this.render();
+    }
+    // Overriding Marionette original render method to inject our renderer.
+    async _renderTemplate() {
+      this.#beforeRenderTemplate();
+      this.#abortController?.abort();
+      this.#abortController = new AbortController();
+      const process = signalizedProcess(this.#abortController.signal).then((_, signal) => {
+        const settings = this.model.get("settings").toJSON();
+        return resolveProps({
+          props: settings,
+          signal
+        });
+      }).then((resolvedSettings) => {
+        const context = {
+          id: this.model.get("id"),
+          type,
+          settings: resolvedSettings,
+          base_styles: baseStylesDictionary
+        };
+        return renderer.render(templateKey, context);
+      }).then((html) => this.$el.html(html));
+      await process.execute();
+      this.#afterRenderTemplate();
+    }
+    // Emulating the original Marionette behavior.
+    #beforeRenderTemplate() {
+      this.triggerMethod("before:render:template");
+    }
+    #afterRenderTemplate() {
+      this.bindUIElements();
+      this.triggerMethod("render:template");
+    }
+  };
+}
+
 // src/legacy/init-legacy-views.ts
 function initLegacyViews() {
   __privateListenTo(v1ReadyEvent2(), () => {
     const config = getWidgetsCache() ?? {};
     const legacyWindow = window;
+    const renderer = createDomRenderer();
     Object.entries(config).forEach(([type, element]) => {
       if (!element.atomic) {
         return;
       }
-      const ElementType = createElementType(type);
+      const ElementType = canBeTemplated(element) ? createTemplatedElementType({ type, renderer, element }) : createElementType(type);
       legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
     });
   });