@elementor/editor-canvas 0.13.1 → 0.15.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-canvas@0.13.1 build
+> @elementor/editor-canvas@0.15.0 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     29.82 KB
-ESM dist/index.mjs.map 62.58 KB
-ESM ⚡️ Build success in 181ms
-CJS dist/index.js     32.49 KB
-CJS dist/index.js.map 62.41 KB
-CJS ⚡️ Build success in 184ms
+CJS dist/index.js     36.53 KB
+CJS dist/index.js.map 72.22 KB
+CJS ⚡️ Build success in 226ms
+ESM dist/index.mjs     33.81 KB
+ESM dist/index.mjs.map 72.44 KB
+ESM ⚡️ Build success in 228ms
 DTS Build start
-DTS ⚡️ Build success in 20884ms
-DTS dist/index.d.mts 751.00 B
-DTS dist/index.d.ts  751.00 B
+DTS ⚡️ Build success in 20459ms
+DTS dist/index.d.mts 972.00 B
+DTS dist/index.d.ts  972.00 B

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @elementor/editor-canvas
 
+## 0.15.0
+
+### Minor Changes
+
+- 593f222: Render widgets faster using DOM renderer
+
+### Patch Changes
+
+- 3e108d9: update elementor/ui
+- Updated dependencies [3e108d9]
+- Updated dependencies [202ff33]
+- Updated dependencies [593f222]
+  - @elementor/editor@0.18.4
+  - @elementor/editor-styles-repository@0.8.0
+  - @elementor/editor-elements@0.6.6
+
+## 0.14.0
+
+### Minor Changes
+
+- efd54a9: Add fallback transformer to the transformers registry
+- b0a15b9: Create DOM renderer
+
+### Patch Changes
+
+- 5387bcf: Fix overlay on settings change
+- Updated dependencies [5387bcf]
+- Updated dependencies [efd54a9]
+  - @elementor/editor-elements@0.6.5
+  - @elementor/editor-props@0.11.1
+  - @elementor/editor-styles-repository@0.7.8
+  - @elementor/editor-styles@0.6.4
+
 ## 0.13.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,23 +1,24 @@
+import * as _elementor_editor_props from '@elementor/editor-props';
+
 type UnbrandedTransformer<TValue> = (value: TValue, options: {
     key: string;
     signal?: AbortSignal;
 }) => unknown;
-declare const brand: unique symbol;
 type Transformer<TValue> = UnbrandedTransformer<TValue> & {
-    [brand]: true;
+    __transformer: true;
 };
-type TransformerName = string;
 type AnyTransformer = Transformer<any>;
-type TransformersMap = Record<string, AnyTransformer>;
 
 declare const styleTransformersRegistry: {
-    register(name: TransformerName, transformer: AnyTransformer): /*elided*/ any;
-    all(): TransformersMap;
+    register(type: _elementor_editor_props.PropTypeKey, transformer: AnyTransformer): /*elided*/ any;
+    registerFallback(transformer: AnyTransformer): /*elided*/ any;
+    get(type: _elementor_editor_props.PropTypeKey): AnyTransformer | null;
 };
 
 declare const settingsTransformersRegistry: {
-    register(name: TransformerName, transformer: AnyTransformer): /*elided*/ any;
-    all(): TransformersMap;
+    register(type: _elementor_editor_props.PropTypeKey, transformer: AnyTransformer): /*elided*/ any;
+    registerFallback(transformer: AnyTransformer): /*elided*/ any;
+    get(type: _elementor_editor_props.PropTypeKey): AnyTransformer | null;
 };
 
 export { settingsTransformersRegistry, styleTransformersRegistry };

package/dist/index.d.ts

@@ -1,23 +1,24 @@
+import * as _elementor_editor_props from '@elementor/editor-props';
+
 type UnbrandedTransformer<TValue> = (value: TValue, options: {
     key: string;
     signal?: AbortSignal;
 }) => unknown;
-declare const brand: unique symbol;
 type Transformer<TValue> = UnbrandedTransformer<TValue> & {
-    [brand]: true;
+    __transformer: true;
 };
-type TransformerName = string;
 type AnyTransformer = Transformer<any>;
-type TransformersMap = Record<string, AnyTransformer>;
 
 declare const styleTransformersRegistry: {
-    register(name: TransformerName, transformer: AnyTransformer): /*elided*/ any;
-    all(): TransformersMap;
+    register(type: _elementor_editor_props.PropTypeKey, transformer: AnyTransformer): /*elided*/ any;
+    registerFallback(transformer: AnyTransformer): /*elided*/ any;
+    get(type: _elementor_editor_props.PropTypeKey): AnyTransformer | null;
 };
 
 declare const settingsTransformersRegistry: {
-    register(name: TransformerName, transformer: AnyTransformer): /*elided*/ any;
-    all(): TransformersMap;
+    register(type: _elementor_editor_props.PropTypeKey, transformer: AnyTransformer): /*elided*/ any;
+    registerFallback(transformer: AnyTransformer): /*elided*/ any;
+    get(type: _elementor_editor_props.PropTypeKey): AnyTransformer | null;
 };
 
 export { settingsTransformersRegistry, styleTransformersRegistry };

package/dist/index.js

@@ -91,10 +91,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) => (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 },
+    whileElementsMounted: import_react3.autoUpdate,
     middleware: [
       // Match the floating element's size to the reference element.
       (0, import_react3.size)({
@@ -109,6 +106,9 @@ function useFloatingOnElement({ element, isSelected }) {
       (0, import_react3.offset)(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2)
     ]
   });
+  (0, import_react2.useEffect)(() => {
+    refs.setReference(element);
+  }, [element, refs]);
   return {
     isVisible: isOpen || isSelected,
     context,
@@ -127,7 +127,7 @@ var OverlayBox = (0, import_ui.styled)(import_ui.Box, { shouldForwardProp: (prop
   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 } = (0, import_react4.useInteractions)([(0, import_react4.useHover)(context)]);
   useBindReactPropsToElement(element, getReferenceProps);
@@ -137,7 +137,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()
     }
@@ -147,31 +147,38 @@ function ElementOverlay({ element, isSelected }) {
 // src/components/elements-overlays.tsx
 function ElementsOverlays() {
   const selected = (0, import_editor_elements.useSelectedElement)();
-  const domElements = (0, import_editor_elements.useElementsDomRef)();
+  const elements = useElementsDom();
   const currentEditMode = (0, import_editor_v1_adapters.useEditMode)();
   const isEditMode = currentEditMode === "edit";
   const isKitRouteActive = (0, import_editor_v1_adapters.__privateUseIsRouteActive)("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 (0, import_editor_v1_adapters.__privateUseListenTo)(
+    [(0, import_editor_v1_adapters.windowEvent)("elementor/editor/element-rendered"), (0, import_editor_v1_adapters.windowEvent)("elementor/editor/element-destroyed")],
+    () => {
+      return (0, import_editor_elements.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;
     },
-    all() {
-      return transformers;
+    registerFallback(transformer) {
+      fallbackTransformer = transformer;
+      return this;
+    },
+    get(type) {
+      return transformers[type] ?? fallbackTransformer;
     }
   };
 }
@@ -237,7 +244,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
@@ -279,12 +286,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
@@ -354,7 +361,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(
@@ -369,7 +376,7 @@ function initStyleTransformers() {
       ["start-start", "start-end", "end-start", "end-end"],
       ({ key }) => `border-${key}-radius`
     )
-  );
+  ).registerFallback(plainTransformer);
 }
 
 // src/init-styles-renderer.ts
@@ -388,9 +395,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);
@@ -419,6 +423,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({
@@ -434,7 +441,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
         )
       );
     }
-    const transformer = transformers[value.$$type];
+    const transformer = transformers.get(value.$$type);
     if (!transformer) {
       return null;
     }
@@ -507,6 +514,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("");
@@ -534,7 +544,7 @@ function initStylesRenderer() {
   (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.v1ReadyEvent)(), () => {
     let abortController = null;
     const resolve = createPropsResolver({
-      transformers: styleTransformersRegistry.all(),
+      transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles.getStylesSchema)(),
       onPropResolve: enqueueUsedFonts
     });
@@ -585,6 +595,51 @@ function enqueueUsedFonts({ key, value }) {
 var import_editor_elements2 = require("@elementor/editor-elements");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 
+// src/renderers/create-dom-renderer.ts
+var import_twing = require("@elementor/twing");
+function createDomRenderer() {
+  const loader = (0, import_twing.createArrayLoader)({});
+  const environment = (0, import_twing.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;
@@ -593,11 +648,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
@@ -648,16 +703,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() {
   (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.v1ReadyEvent)(), () => {
     const config = (0, import_editor_elements2.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());
     });
   });