@elementor/editor-canvas 0.13.1 → 0.14.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-canvas@0.13.1 build
+> @elementor/editor-canvas@0.14.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     32.61 KB
+CJS dist/index.js.map 63.36 KB
+CJS ⚡️ Build success in 244ms
+ESM dist/index.mjs     29.90 KB
+ESM dist/index.mjs.map 63.58 KB
+ESM ⚡️ Build success in 246ms
 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 21204ms
+DTS dist/index.d.mts 972.00 B
+DTS dist/index.d.ts  972.00 B

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @elementor/editor-canvas
 
+## 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
     });