@elementor/editor-canvas 0.8.0 → 0.10.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-canvas@0.8.0 build
+> @elementor/editor-canvas@0.10.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
-CJS dist/index.js     19.95 KB
-CJS dist/index.js.map 38.48 KB
-CJS ⚡️ Build success in 173ms
-ESM dist/index.mjs     18.33 KB
-ESM dist/index.mjs.map 38.46 KB
-ESM ⚡️ Build success in 178ms
+CJS dist/index.js     19.31 KB
+CJS dist/index.js.map 37.41 KB
+CJS ⚡️ Build success in 145ms
+ESM dist/index.mjs     17.23 KB
+ESM dist/index.mjs.map 37.36 KB
+ESM ⚡️ Build success in 149ms
 DTS Build start
-DTS ⚡️ Build success in 17766ms
-DTS dist/index.d.mts 13.00 B
-DTS dist/index.d.ts  13.00 B
+DTS ⚡️ Build success in 19410ms
+DTS dist/index.d.mts 434.00 B
+DTS dist/index.d.ts  434.00 B

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @elementor/editor-canvas
 
+## 0.10.0
+
+### Minor Changes
+
+- 728ffb5: Add the ability to extend transformers
+
+### Patch Changes
+
+- Updated dependencies [728ffb5]
+  - @elementor/editor-props@0.9.2
+  - @elementor/editor-styles-repository@0.7.2
+  - @elementor/editor-elements@0.5.4
+  - @elementor/editor-styles@0.5.7
+
+## 0.9.0
+
+### Minor Changes
+
+- c41674c: Update stroke renderer to be compatible with SVG widget
+
+### Patch Changes
+
+- 6b064c5: Make atomic border radius control use logical properties
+- Updated dependencies [6b064c5]
+  - @elementor/editor-props@0.9.1
+  - @elementor/editor-styles-repository@0.7.1
+  - @elementor/editor-elements@0.5.3
+  - @elementor/editor-styles@0.5.6
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,2 +1,14 @@
+type Transformer<TValue> = (value: TValue, options: {
+    key: string;
+    signal?: AbortSignal;
+}) => unknown;
+type TransformerName = string;
+type AnyTransformer = Transformer<any>;
+type TransformersMap = Record<string, AnyTransformer>;
 
-export {  }
+declare const styleTransformersRegistry: {
+    register(name: TransformerName, transformer: AnyTransformer): /*elided*/ any;
+    all(): TransformersMap;
+};
+
+export { styleTransformersRegistry };

package/dist/index.d.ts

@@ -1,2 +1,14 @@
+type Transformer<TValue> = (value: TValue, options: {
+    key: string;
+    signal?: AbortSignal;
+}) => unknown;
+type TransformerName = string;
+type AnyTransformer = Transformer<any>;
+type TransformersMap = Record<string, AnyTransformer>;
 
-export {  }
+declare const styleTransformersRegistry: {
+    register(name: TransformerName, transformer: AnyTransformer): /*elided*/ any;
+    all(): TransformersMap;
+};
+
+export { styleTransformersRegistry };

package/dist/index.js

@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -21,6 +25,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  styleTransformersRegistry: () => styleTransformersRegistry
+});
+module.exports = __toCommonJS(index_exports);
 
 // src/init.tsx
 var import_editor = require("@elementor/editor");
@@ -148,14 +160,70 @@ function ElementsOverlays() {
   ));
 }
 
-// src/init-styles-renderer.ts
-var import_editor_responsive = require("@elementor/editor-responsive");
-var import_editor_styles = require("@elementor/editor-styles");
-var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+// src/transformers/create-transformers-registry.ts
+function createTransformersRegistry() {
+  const transformers = {};
+  return {
+    register(name, transformer) {
+      transformers[name] = transformer;
+      return this;
+    },
+    all() {
+      return transformers;
+    }
+  };
+}
 
-// src/renderers/create-props-resolver.ts
-var import_editor_props = require("@elementor/editor-props");
+// src/style-transformers-registry.ts
+var styleTransformersRegistry = createTransformersRegistry();
+
+// src/transformers/create-transformer.ts
+function createTransformer(cb) {
+  return cb;
+}
+
+// src/transformers/styles/background-color-overlay-transformer.ts
+var backgroundColorOverlayTransformer = createTransformer(
+  (value) => `linear-gradient(${value}, ${value})`
+);
+
+// src/transformers/styles/background-image-overlay-transformer.ts
+var DEFAULT_POSITION_VALUE = "0% 0%";
+var backgroundImageOverlayTransformer = createTransformer((value) => {
+  const { image, size: size2 = null, position = null, repeat = null, attachment = null } = value;
+  if (!image) {
+    return null;
+  }
+  const backgroundStyles = [
+    image,
+    repeat,
+    attachment,
+    size2 ? `${position || DEFAULT_POSITION_VALUE} / ${size2}` : position
+  ].filter(Boolean);
+  return backgroundStyles.join(" ");
+});
+
+// src/transformers/styles/background-image-position-offset-transformer.ts
+var backgroundImagePositionOffsetTransformer = createTransformer(
+  ({ x = "0px", y = "0px" }) => `${x} ${y}`
+);
+
+// src/transformers/styles/background-image-size-scale-transformer.ts
+var backgroundImageSizeScaleTransformer = createTransformer(
+  ({ width = "auto", height = "auto" }) => `${width} ${height}`
+);
+
+// src/transformers/styles/background-transformer.ts
+var backgroundTransformer = createTransformer((value) => {
+  const overlays = value["background-overlay"] ?? "";
+  const color = value.color ?? "";
+  return `${overlays} ${color}`.trim();
+});
+
+// src/transformers/styles/create-combine-array-transformer.ts
+var createCombineArrayTransformer = (delimiter) => {
+  return createTransformer((value) => value.filter(Boolean).join(delimiter));
+};
 
 // src/renderers/multi-props.ts
 var isMultiProps = (propValue) => {
@@ -171,9 +239,121 @@ var getMultiPropsValue = (multiProps) => {
   return multiProps.value;
 };
 
+// src/transformers/styles/create-multi-props-transformer.ts
+var createMultiPropsTransformer = (keys, keyGenerator) => {
+  return createTransformer((value, { key: propKey }) => {
+    const entries = keys.filter((key) => value[key]).map((key) => [keyGenerator({ propKey, key }), value[key]]);
+    return createMultiPropsValue(Object.fromEntries(entries));
+  });
+};
+
+// src/transformers/styles/image-attachment-transformer.ts
+var import_wp_media = require("@elementor/wp-media");
+var imageAttachmentTransformer = createTransformer(async (value) => {
+  const attachment = await (0, import_wp_media.getMediaAttachment)({ id: value });
+  if (!attachment) {
+    return null;
+  }
+  return attachment;
+});
+
+// src/transformers/styles/image-src-transformer.ts
+var imageSrcTransformer = createTransformer((value) => ({
+  attachment: value.id,
+  url: value.url
+}));
+
+// src/transformers/styles/image-transformer.ts
+var imageTransformer = createTransformer((value) => {
+  const { src, size: size2 } = value;
+  if (src?.url) {
+    return `url(${src.url})`;
+  }
+  const sizeUrl = src?.attachment?.sizes?.[size2 ?? ""]?.url;
+  if (sizeUrl) {
+    return `url(${sizeUrl})`;
+  }
+  const attachmentUrl = src?.attachment?.url;
+  if (attachmentUrl) {
+    return `url(${attachmentUrl})`;
+  }
+  return null;
+});
+
+// src/transformers/styles/primitive-transformer.ts
+var primitiveTransformer = createTransformer((value) => value);
+
+// src/transformers/styles/shadow-transformer.ts
+var shadowTransformer = createTransformer((value) => {
+  return [value.hOffset, value.vOffset, value.blur, value.spread, value.color, value.position].filter(Boolean).join(" ");
+});
+
+// src/transformers/styles/size-transformer.ts
+var sizeTransformer = createTransformer((value) => {
+  return `${value.size}${value.unit}`;
+});
+
+// src/transformers/styles/stroke-transformer.ts
+var strokeTransformer = createTransformer((value) => {
+  const parsed = {
+    "-webkit-text-stroke": `${value.width} ${value.color}`,
+    stroke: `${value.color}`,
+    "stroke-width": `${value.width}`
+  };
+  return createMultiPropsValue(parsed);
+});
+
+// src/init-style-transformers.ts
+function initStyleTransformers() {
+  styleTransformersRegistry.register("size", sizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
+    "dimensions",
+    createMultiPropsTransformer(
+      ["top", "right", "bottom", "left"],
+      ({ propKey, key }) => `${propKey}-${key}`
+    )
+  ).register("color", primitiveTransformer).register("number", primitiveTransformer).register("string", primitiveTransformer).register("url", primitiveTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", createCombineArrayTransformer(",")).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-image-position-offset", backgroundImagePositionOffsetTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-attachment-id", imageAttachmentTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register(
+    "layout-direction",
+    createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
+  ).register(
+    "border-width",
+    createMultiPropsTransformer(["top", "right", "bottom", "left"], ({ key }) => `border-${key}-width`)
+  ).register(
+    "border-radius",
+    createMultiPropsTransformer(
+      ["start-start", "start-end", "end-start", "end-end"],
+      ({ key }) => `border-${key}-radius`
+    )
+  );
+}
+
+// src/init-styles-renderer.ts
+var import_editor_responsive = require("@elementor/editor-responsive");
+var import_editor_styles = require("@elementor/editor-styles");
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+
 // src/renderers/create-props-resolver.ts
+var import_editor_props = require("@elementor/editor-props");
 var TRANSFORM_DEPTH_LIMIT = 3;
-function createPropsResolver(transformers, { onPropResolve } = {}) {
+function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }) {
+  async function resolve({ props, schema, signal }) {
+    schema = schema ?? initialSchema;
+    const promises = Promise.all(
+      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);
+        }
+        return { [key]: transformed };
+      })
+    );
+    return Object.assign({}, ...(await promises).filter(Boolean));
+  }
   async function transform({ value, key, type, signal, depth = 0 }) {
     if (value === null || value === void 0) {
       return null;
@@ -219,23 +399,6 @@ function createPropsResolver(transformers, { onPropResolve } = {}) {
       return null;
     }
   }
-  async function resolve({ props, schema, signal }) {
-    const promises = Promise.all(
-      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);
-        }
-        return { [key]: transformed };
-      })
-    );
-    return Object.assign({}, ...(await promises).filter(Boolean));
-  }
   return resolve;
 }
 
@@ -253,14 +416,13 @@ var SELECTORS_MAP = {
 async function renderStyles({
   resolve,
   styles,
-  schema,
   breakpoints,
   selectorPrefix = "",
   signal
 }) {
   const stylesCssPromises = styles.map(async (style) => {
     const variantCssPromises = Object.values(style.variants).map(async (variant) => {
-      const css = await propsToCss({ props: variant.props, schema, resolve, signal });
+      const css = await propsToCss({ props: variant.props, resolve, signal });
       return createStyleWrapper().forStyle(style).withPrefix(selectorPrefix).withState(variant.meta.state).withMediaQuery(variant.meta.breakpoint ? breakpoints[variant.meta.breakpoint] : null).wrap(css);
     });
     const variantsCss = await Promise.all(variantCssPromises);
@@ -296,8 +458,8 @@ function createStyleWrapper(value = "", wrapper) {
     }
   };
 }
-async function propsToCss({ props, resolve, signal, schema }) {
-  const transformed = await resolve({ props, schema, signal });
+async function propsToCss({ props, resolve, signal }) {
+  const transformed = await resolve({ props, signal });
   return Object.entries(transformed).reduce((acc, [propName, propValue]) => {
     acc.push(propName + ":" + propValue + ";");
     return acc;
@@ -307,192 +469,6 @@ function wrapCssWithStyleElement(id, css) {
   return `<style data-style-id="${id}">${css}</style>`;
 }
 
-// src/renderers/style-transformers/background-color-overlay-transformer.ts
-var backgroundColorOverlayTransformer = (value) => {
-  return `linear-gradient(${value}, ${value})`;
-};
-var background_color_overlay_transformer_default = backgroundColorOverlayTransformer;
-
-// src/renderers/style-transformers/background-image-overlay-transformer.ts
-var DEFAULT_POSITION_VALUE = "0% 0%";
-var backgroundImageOverlayTransformer = (value) => {
-  const { image: imageSrc, size: size2 = null, position = null, repeat = null, attachment = null } = value;
-  if (!imageSrc) {
-    return null;
-  }
-  const backgroundStyles = [
-    imageSrc,
-    repeat,
-    attachment,
-    size2 ? `${position || DEFAULT_POSITION_VALUE} / ${size2}` : position
-  ].filter(Boolean);
-  return backgroundStyles.join(" ");
-};
-var background_image_overlay_transformer_default = backgroundImageOverlayTransformer;
-
-// src/renderers/style-transformers/background-image-position-offset-transformer.ts
-var backgroundImagePositionOffsetTransformer = ({
-  x = "0px",
-  y = "0px"
-}) => `${x} ${y}`;
-var background_image_position_offset_transformer_default = backgroundImagePositionOffsetTransformer;
-
-// src/renderers/style-transformers/background-image-size-scale-transformer.ts
-var backgroundImageSizeScaleTransformer = ({
-  width = "auto",
-  height = "auto"
-}) => `${width} ${height}`;
-var background_image_size_scale_transformer_default = backgroundImageSizeScaleTransformer;
-
-// src/renderers/style-transformers/background-transformer.ts
-var backgroundTransformer = (value) => {
-  const overlays = value["background-overlay"] ?? "";
-  const color = value.color ?? "";
-  return `${overlays} ${color}`.trim();
-};
-var background_transformer_default = backgroundTransformer;
-
-// src/renderers/style-transformers/create-combine-array-transformer.ts
-var createCombineArrayTransformer = (delimiter) => {
-  return (value) => value.filter(Boolean).join(delimiter);
-};
-var create_combine_array_transformer_default = createCombineArrayTransformer;
-
-// src/renderers/style-transformers/create-corner-sizes-transformer.ts
-var validCorners = ["top-left", "top-right", "bottom-left", "bottom-right"];
-var createCornerSizesTransformer = (keyGenerator) => (value) => {
-  const props = Object.entries(value).reduce((acc, [corner, cornerValue]) => {
-    if (validCorners.includes(corner)) {
-      const key = keyGenerator(corner);
-      acc[key] = cornerValue;
-    }
-    return acc;
-  }, {});
-  return createMultiPropsValue(props);
-};
-var create_corner_sizes_transformer_default = createCornerSizesTransformer;
-
-// src/renderers/style-transformers/create-edge-sizes-transformer.ts
-var validEdges = ["top", "right", "bottom", "left"];
-var createEdgeSizesTransformer = (keyGenerator) => (value) => {
-  const props = Object.entries(value).reduce((acc, [edge, edgeValue]) => {
-    if (validEdges.includes(edge)) {
-      const key = keyGenerator(edge);
-      acc[key] = edgeValue;
-    }
-    return acc;
-  }, {});
-  return createMultiPropsValue(props);
-};
-var create_edge_sizes_transformer_default = createEdgeSizesTransformer;
-
-// src/renderers/style-transformers/dimensions.ts
-var validKeys = ["top", "right", "bottom", "left"];
-var dimensions = (value, { key }) => {
-  const parsed = Object.entries(value).reduce((acc, [dimensionKey, dimensionValue]) => {
-    if (dimensionValue && validKeys.includes(dimensionKey)) {
-      acc[`${key}-${dimensionKey}`] = dimensionValue;
-    }
-    return acc;
-  }, {});
-  return createMultiPropsValue(parsed);
-};
-var dimensions_default = dimensions;
-
-// src/renderers/style-transformers/image.ts
-var imageTransformer = (value) => {
-  const { src, size: size2 } = value;
-  if (src.url) {
-    return `url(${src.url})`;
-  }
-  const sizeUrl = src.attachment?.sizes[size2]?.url;
-  if (sizeUrl) {
-    return `url(${sizeUrl})`;
-  }
-  const attachmentUrl = src.attachment?.url;
-  if (attachmentUrl) {
-    return `url(${attachmentUrl})`;
-  }
-  return null;
-};
-
-// src/renderers/style-transformers/image-attachment.ts
-var import_wp_media = require("@elementor/wp-media");
-var imageAttachmentTransformer = async (value) => {
-  const attachment = await (0, import_wp_media.getMediaAttachment)({ id: value });
-  if (!attachment) {
-    return null;
-  }
-  return attachment;
-};
-
-// src/renderers/style-transformers/image-src.ts
-var imageSrcTransformer = (value) => ({
-  attachment: value.id,
-  url: value.url
-});
-
-// src/renderers/style-transformers/layout-direction-transformer.ts
-var validKeys2 = ["row", "column"];
-var layoutDirectionTransformer = (value, { key }) => {
-  const parsed = Object.entries(value).reduce((acc, [dimensionKey, dimensionValue]) => {
-    if (dimensionValue && validKeys2.includes(dimensionKey)) {
-      acc[`${dimensionKey}-${key}`] = dimensionValue;
-    }
-    return acc;
-  }, {});
-  return createMultiPropsValue(parsed);
-};
-var layout_direction_transformer_default = layoutDirectionTransformer;
-
-// src/renderers/style-transformers/primitive-transformer.ts
-var primitiveTransformer = (value) => {
-  return value;
-};
-
-// src/renderers/style-transformers/shadow-transformer.ts
-var shadowTransformer = (value) => {
-  return [value.hOffset, value.vOffset, value.blur, value.spread, value.color, value.position].filter(Boolean).join(" ");
-};
-var shadow_transformer_default = shadowTransformer;
-
-// src/renderers/style-transformers/size-transformer.ts
-var sizeTransformer = (value) => {
-  return `${value.size}${value.unit}`;
-};
-var size_transformer_default = sizeTransformer;
-
-// src/renderers/style-transformers/stroke-transformer.ts
-var strokeTransformer = (value) => {
-  return `${value.width} ${value.color}`;
-};
-var stroke_transformer_default = strokeTransformer;
-
-// src/renderers/style-transformers/index.ts
-var styleTransformers = {
-  size: size_transformer_default,
-  shadow: shadow_transformer_default,
-  stroke: stroke_transformer_default,
-  background: background_transformer_default,
-  color: primitiveTransformer,
-  number: primitiveTransformer,
-  string: primitiveTransformer,
-  url: primitiveTransformer,
-  dimensions: dimensions_default,
-  "background-color-overlay": background_color_overlay_transformer_default,
-  "background-image-overlay": background_image_overlay_transformer_default,
-  "background-image-position-offset": background_image_position_offset_transformer_default,
-  "background-image-size-scale": background_image_size_scale_transformer_default,
-  "background-overlay": create_combine_array_transformer_default(","),
-  "box-shadow": create_combine_array_transformer_default(","),
-  "border-width": create_edge_sizes_transformer_default((edgeKey) => `border-${edgeKey}-width`),
-  "border-radius": create_corner_sizes_transformer_default((cornerKey) => `border-${cornerKey}-radius`),
-  "image-attachment-id": imageAttachmentTransformer,
-  "image-src": imageSrcTransformer,
-  image: imageTransformer,
-  "layout-direction": layout_direction_transformer_default
-};
-
 // src/sync/enqueue-font.ts
 var enqueueFont = (fontFamily, context = "preview") => {
   const extendedWindow = window;
@@ -509,14 +485,17 @@ function getCanvasIframeBody() {
 var WRAPPER_DATA_ATTR = "data-styles-container";
 var SELECTOR_PREFIX = ".elementor";
 function initStylesRenderer() {
-  let abortController = null;
-  const resolve = createPropsResolver(styleTransformers, { onPropResolve: enqueueUsedFonts });
   (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.v1ReadyEvent)(), () => {
+    let abortController = null;
+    const resolve = createPropsResolver({
+      transformers: styleTransformersRegistry.all(),
+      schema: (0, import_editor_styles.getStylesSchema)(),
+      onPropResolve: enqueueUsedFonts
+    });
     import_editor_styles_repository.stylesRepository.subscribe(async () => {
       const styleContainer = getStylesContainer();
       const styles = import_editor_styles_repository.stylesRepository.all().reverse();
       const breakpoints = (0, import_editor_responsive.getBreakpointsMap)();
-      const schema = (0, import_editor_styles.getStylesSchema)();
       if (abortController) {
         abortController.abort();
       }
@@ -526,8 +505,7 @@ function initStylesRenderer() {
         resolve,
         breakpoints,
         selectorPrefix: SELECTOR_PREFIX,
-        signal: abortController.signal,
-        schema
+        signal: abortController.signal
       });
     });
   });
@@ -557,6 +535,7 @@ function enqueueUsedFonts({ key, value }) {
 
 // src/init.tsx
 function init() {
+  initStyleTransformers();
   initStylesRenderer();
   (0, import_editor.injectIntoTop)({
     id: "elements-overlays",
@@ -566,4 +545,8 @@ function init() {
 
 // src/index.ts
 init();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  styleTransformersRegistry
+});
 //# sourceMappingURL=index.js.map