@elementor/editor-canvas 0.9.0 → 0.10.0

package/dist/index.mjs

@@ -127,16 +127,70 @@ function ElementsOverlays() {
   ));
 }
 
-// src/init-styles-renderer.ts
-import { getBreakpointsMap } from "@elementor/editor-responsive";
-import { getStylesSchema } from "@elementor/editor-styles";
-import { stylesRepository } from "@elementor/editor-styles-repository";
-import { __privateListenTo as listenTo, v1ReadyEvent } from "@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
-import {
-  isTransformable
-} from "@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) => {
@@ -152,9 +206,123 @@ 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
+import { getMediaAttachment } from "@elementor/wp-media";
+var imageAttachmentTransformer = createTransformer(async (value) => {
+  const attachment = await 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
+import { getBreakpointsMap } from "@elementor/editor-responsive";
+import { getStylesSchema } from "@elementor/editor-styles";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
+
 // src/renderers/create-props-resolver.ts
+import {
+  isTransformable
+} from "@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;
@@ -200,23 +368,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;
 }
 
@@ -234,14 +385,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);
@@ -277,8 +427,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;
@@ -288,197 +438,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 = ["start-start", "start-end", "end-start", "end-end"];
-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
-import { getMediaAttachment } from "@elementor/wp-media";
-var imageAttachmentTransformer = async (value) => {
-  const attachment = await 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) => {
-  const parsed = {
-    "-webkit-text-stroke": `${value.width} ${value.color}`,
-    stroke: `${value.color}`,
-    "stroke-width": `${value.width}`
-  };
-  return createMultiPropsValue(parsed);
-};
-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;
@@ -495,14 +454,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 });
   listenTo(v1ReadyEvent(), () => {
+    let abortController = null;
+    const resolve = createPropsResolver({
+      transformers: styleTransformersRegistry.all(),
+      schema: getStylesSchema(),
+      onPropResolve: enqueueUsedFonts
+    });
     stylesRepository.subscribe(async () => {
       const styleContainer = getStylesContainer();
       const styles = stylesRepository.all().reverse();
       const breakpoints = getBreakpointsMap();
-      const schema = getStylesSchema();
       if (abortController) {
         abortController.abort();
       }
@@ -512,8 +474,7 @@ function initStylesRenderer() {
         resolve,
         breakpoints,
         selectorPrefix: SELECTOR_PREFIX,
-        signal: abortController.signal,
-        schema
+        signal: abortController.signal
       });
     });
   });
@@ -543,6 +504,7 @@ function enqueueUsedFonts({ key, value }) {
 
 // src/init.tsx
 function init() {
+  initStyleTransformers();
   initStylesRenderer();
   injectIntoTop({
     id: "elements-overlays",
@@ -552,4 +514,7 @@ function init() {
 
 // src/index.ts
 init();
+export {
+  styleTransformersRegistry
+};
 //# sourceMappingURL=index.mjs.map