@elementor/editor-canvas 0.7.0 → 0.8.0

package/dist/index.mjs

@@ -129,36 +129,203 @@ 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/styles-renderer/transformers/background-color-overlay-transformer.ts
+// src/renderers/create-props-resolver.ts
+import {
+  isTransformable
+} from "@elementor/editor-props";
+
+// src/renderers/multi-props.ts
+var isMultiProps = (propValue) => {
+  return !!propValue && typeof propValue === "object" && "$$multi-props" in propValue && propValue["$$multi-props"] === true;
+};
+var createMultiPropsValue = (props) => {
+  return {
+    "$$multi-props": true,
+    value: props
+  };
+};
+var getMultiPropsValue = (multiProps) => {
+  return multiProps.value;
+};
+
+// src/renderers/create-props-resolver.ts
+var TRANSFORM_DEPTH_LIMIT = 3;
+function createPropsResolver(transformers, { onPropResolve } = {}) {
+  async function transform({ value, key, type, signal, depth = 0 }) {
+    if (value === null || value === void 0) {
+      return null;
+    }
+    if (!isTransformable(value)) {
+      return value;
+    }
+    if (depth > TRANSFORM_DEPTH_LIMIT) {
+      return null;
+    }
+    if (value.disabled === true) {
+      return null;
+    }
+    if (type.kind === "union") {
+      type = type.prop_types[value.$$type];
+      if (!type) {
+        return null;
+      }
+    }
+    let resolvedValue = value.value;
+    if (type.kind === "object") {
+      resolvedValue = await resolve({
+        props: resolvedValue,
+        schema: type.shape,
+        signal
+      });
+    }
+    if (type.kind === "array") {
+      resolvedValue = await Promise.all(
+        resolvedValue.map(
+          (item) => transform({ value: item, key, type: type.item_prop_type, depth, signal })
+        )
+      );
+    }
+    const transformer = transformers[value.$$type];
+    if (!transformer) {
+      return null;
+    }
+    try {
+      const transformed = await transformer(resolvedValue, { key, signal });
+      return transform({ value: transformed, key, type, signal, depth: depth + 1 });
+    } catch {
+      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;
+}
+
+// src/renderers/errors.ts
+import { createError } from "@elementor/utils";
+var UnknownStyleTypeError = createError({
+  code: "unknown_style_type",
+  message: "Unknown style type"
+});
+
+// src/renderers/render-styles.ts
+var SELECTORS_MAP = {
+  class: "."
+};
+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 });
+      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);
+    return wrapCssWithStyleElement(style.id, variantsCss.join(""));
+  });
+  const stylesCss = await Promise.all(stylesCssPromises);
+  return stylesCss.join("");
+}
+function createStyleWrapper(value = "", wrapper) {
+  return {
+    forStyle: ({ id, type }) => {
+      const symbol = SELECTORS_MAP[type];
+      if (!symbol) {
+        throw new UnknownStyleTypeError({ context: { type } });
+      }
+      return createStyleWrapper(`${value}${symbol}${id}`, wrapper);
+    },
+    withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
+    withState: (state) => createStyleWrapper(state ? `${value}:${state}` : value, wrapper),
+    withMediaQuery: (breakpoint) => {
+      if (!breakpoint?.type) {
+        return createStyleWrapper(value, wrapper);
+      }
+      const size2 = `${breakpoint.type}:${breakpoint.width}px`;
+      return createStyleWrapper(value, (css) => `@media(${size2}){${css}}`);
+    },
+    wrap: (css) => {
+      const res = `${value}{${css}}`;
+      if (!wrapper) {
+        return res;
+      }
+      return wrapper(res);
+    }
+  };
+}
+async function propsToCss({ props, resolve, signal, schema }) {
+  const transformed = await resolve({ props, schema, signal });
+  return Object.entries(transformed).reduce((acc, [propName, propValue]) => {
+    acc.push(propName + ":" + propValue + ";");
+    return acc;
+  }, []).join("");
+}
+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/styles-renderer/transformers/background-image-overlay-transformer.ts
-var defaultPositionValue = "0% 0%";
+// src/renderers/style-transformers/background-image-overlay-transformer.ts
+var DEFAULT_POSITION_VALUE = "0% 0%";
 var backgroundImageOverlayTransformer = (value) => {
-  const { "image-src": imageSrc, size: size2 = null, position = null, repeat = null, attachment = null } = value;
-  let resultBackgroundStyle = imageSrc;
-  if (repeat) {
-    resultBackgroundStyle += ` ${repeat}`;
-  }
-  if (attachment) {
-    resultBackgroundStyle += ` ${attachment}`;
-  }
-  if (position && !size2) {
-    resultBackgroundStyle += ` ${position}`;
-  }
-  if (size2) {
-    resultBackgroundStyle += ` ${position || defaultPositionValue} / ${size2}`;
+  const { image: imageSrc, size: size2 = null, position = null, repeat = null, attachment = null } = value;
+  if (!imageSrc) {
+    return null;
   }
-  return resultBackgroundStyle;
+  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/styles-renderer/transformers/background-transformer.ts
+// 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 ?? "";
@@ -166,27 +333,13 @@ var backgroundTransformer = (value) => {
 };
 var background_transformer_default = backgroundTransformer;
 
-// src/styles-renderer/transformers/create-combine-array-transformer.ts
+// 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/styles-renderer/multi-props.ts
-var isMultiProps = (propValue) => {
-  return !!propValue && typeof propValue === "object" && "$$multi-props" in propValue && propValue["$$multi-props"] === true;
-};
-var createMultiPropsValue = (props) => {
-  return {
-    "$$multi-props": true,
-    value: props
-  };
-};
-var getMultiPropsValue = (multiProps) => {
-  return multiProps.value;
-};
-
-// src/styles-renderer/transformers/create-corner-sizes-transformer.ts
+// 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]) => {
@@ -200,7 +353,7 @@ var createCornerSizesTransformer = (keyGenerator) => (value) => {
 };
 var create_corner_sizes_transformer_default = createCornerSizesTransformer;
 
-// src/styles-renderer/transformers/create-edge-sizes-transformer.ts
+// 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]) => {
@@ -214,7 +367,7 @@ var createEdgeSizesTransformer = (keyGenerator) => (value) => {
 };
 var create_edge_sizes_transformer_default = createEdgeSizesTransformer;
 
-// src/styles-renderer/transformers/dimensions.ts
+// 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]) => {
@@ -227,25 +380,40 @@ var dimensions = (value, { key }) => {
 };
 var dimensions_default = dimensions;
 
-// src/styles-renderer/transformers/image-attachment.ts
+// 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.url;
+  return attachment;
 };
 
-// src/styles-renderer/transformers/image-src.ts
-var imageSrcTransformer = (value) => {
-  const url = value.id ?? value.url?.value;
-  if (url) {
-    return `url(${url})`;
-  }
-};
+// src/renderers/style-transformers/image-src.ts
+var imageSrcTransformer = (value) => ({
+  attachment: value.id,
+  url: value.url
+});
 
-// src/styles-renderer/transformers/layout-direction-transformer.ts
+// 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]) => {
@@ -258,31 +426,31 @@ var layoutDirectionTransformer = (value, { key }) => {
 };
 var layout_direction_transformer_default = layoutDirectionTransformer;
 
-// src/styles-renderer/transformers/primitive-transformer.ts
+// src/renderers/style-transformers/primitive-transformer.ts
 var primitiveTransformer = (value) => {
   return value;
 };
 
-// src/styles-renderer/transformers/shadow-transformer.ts
+// 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/styles-renderer/transformers/size-transformer.ts
+// src/renderers/style-transformers/size-transformer.ts
 var sizeTransformer = (value) => {
   return `${value.size}${value.unit}`;
 };
 var size_transformer_default = sizeTransformer;
 
-// src/styles-renderer/transformers/stroke-transformer.ts
+// src/renderers/style-transformers/stroke-transformer.ts
 var strokeTransformer = (value) => {
   return `${value.width} ${value.color}`;
 };
 var stroke_transformer_default = strokeTransformer;
 
-// src/styles-renderer/transformers/index.ts
-var transformers_default = {
+// src/renderers/style-transformers/index.ts
+var styleTransformers = {
   size: size_transformer_default,
   shadow: shadow_transformer_default,
   stroke: stroke_transformer_default,
@@ -290,182 +458,28 @@ var transformers_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/styles-renderer/render.ts
-import {
-  getStylesSchema
-} from "@elementor/editor-styles";
-
-// src/styles-renderer/errors.ts
-import { createError } from "@elementor/utils";
-var UnknownStyleTypeError = createError({
-  code: "unknown_style_type",
-  message: "Unknown style type"
-});
-
-// src/styles-renderer/resolve.ts
-import { isTransformable } from "@elementor/editor-props";
-var TRANSFORM_DEPTH_LIMIT = 3;
-async function resolve({ props, schema, transformers, signal }) {
-  const promises = Promise.all(
-    Object.entries(schema).map(async ([propKey, propType]) => {
-      const value = props[propKey] ?? propType.default;
-      const transformed = await transform(value, propKey, propType, transformers, 0, signal);
-      if (transformed === null) {
-        return;
-      }
-      if (isMultiProps(transformed)) {
-        return getMultiPropsValue(transformed);
-      }
-      return { [propKey]: transformed };
-    })
-  );
-  return Object.assign({}, ...(await promises).filter(Boolean));
-}
-async function transform(value, propKey, propType, transformers, depth = 0, signal) {
-  if (!value && value !== 0) {
-    return null;
-  }
-  if (!isTransformable(value)) {
-    return value;
-  }
-  if (depth > TRANSFORM_DEPTH_LIMIT) {
-    return null;
-  }
-  if (value.disabled === true) {
-    return null;
-  }
-  if (propType.kind === "union") {
-    propType = propType.prop_types[value.$$type];
-    if (!propType) {
-      return null;
-    }
-  }
-  let resolvedValue = value.value;
-  if (propType.kind === "object") {
-    resolvedValue = await resolve({
-      transformers,
-      props: resolvedValue,
-      schema: propType.shape,
-      signal
-    });
-  }
-  if (propType.kind === "array") {
-    resolvedValue = await Promise.all(
-      resolvedValue.map(
-        (item) => transform(item, propKey, propType.item_prop_type, transformers, depth, signal)
-      )
-    );
-  }
-  const transformer = transformers[value.$$type];
-  if (!transformer) {
-    return null;
-  }
-  try {
-    const transformed = await transformer(resolvedValue, { key: propKey, signal });
-    return transform(transformed, propKey, propType, transformers, depth + 1, signal);
-  } catch {
-    return null;
-  }
-}
-
-// src/styles-renderer/render.ts
-var SELECTORS_MAP = {
-  class: "."
-};
-async function render({
-  transformers,
-  styles,
-  breakpoints,
-  selectorPrefix = "",
-  signal
-}) {
-  const stylesCssPromises = styles.map(async (style) => {
-    const variantCssPromises = Object.values(style.variants).map(async (variant) => {
-      const css = await propsToCss(variant.props, transformers, 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);
-    return wrapCssWithStyleElement(style.id, variantsCss.join(""));
-  });
-  const stylesCss = await Promise.all(stylesCssPromises);
-  return stylesCss.join("");
-}
-function createStyleWrapper(value = "", wrapper) {
-  return {
-    forStyle: ({ id, type }) => {
-      const symbol = SELECTORS_MAP[type];
-      if (!symbol) {
-        throw new UnknownStyleTypeError({ context: { type } });
-      }
-      return createStyleWrapper(`${value}${symbol}${id}`, wrapper);
-    },
-    withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
-    withState: (state) => createStyleWrapper(state ? `${value}:${state}` : value, wrapper),
-    withMediaQuery: (breakpoint) => {
-      if (!breakpoint?.type) {
-        return createStyleWrapper(value, wrapper);
-      }
-      const size2 = `${breakpoint.type}:${breakpoint.width}px`;
-      return createStyleWrapper(value, (css) => `@media(${size2}){${css}}`);
-    },
-    wrap: (css) => {
-      const res = `${value}{${css}}`;
-      if (!wrapper) {
-        return res;
-      }
-      return wrapper(res);
-    }
-  };
-}
-async function propsToCss(props, transformers, signal) {
-  const schema = getStylesSchema();
-  const transformed = await resolve({ props, schema, transformers, signal });
-  return Object.entries(transformed).reduce((acc, [propName, propValue]) => {
-    acc.push(propName + ":" + propValue + ";");
-    return acc;
-  }, []).join("");
-}
-function wrapCssWithStyleElement(id, css) {
-  return `<style data-style-id="${id}">${css}</style>`;
-}
-
-// src/styles-renderer/enqueue-used-fonts.ts
-import { ensureError } from "@elementor/utils";
-
 // src/sync/enqueue-font.ts
 var enqueueFont = (fontFamily, context = "preview") => {
   const extendedWindow = window;
   return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
 };
 
-// src/styles-renderer/enqueue-used-fonts.ts
-function enqueueUsedFonts(styles) {
-  try {
-    styles.forEach((styleDef) => {
-      Object.values(styleDef.variants).forEach((variant) => {
-        const fontFamily = variant.props["font-family"];
-        if (fontFamily?.value) {
-          enqueueFont(fontFamily.value);
-        }
-      });
-    });
-  } catch (error) {
-    console.error(`Cannot enqueue font': ${ensureError(error).message}`);
-  }
-}
-
 // src/sync/get-canvas-iframe-body.ts
 function getCanvasIframeBody() {
   const extendedWindow = window;
@@ -477,22 +491,26 @@ var WRAPPER_DATA_ATTR = "data-styles-container";
 var SELECTOR_PREFIX = ".elementor";
 function initStylesRenderer() {
   let abortController = null;
-  stylesRepository.subscribe(async () => {
-    const styleContainer = getStylesContainer();
-    const styles = stylesRepository.all();
-    const breakpoints = getBreakpointsMap();
-    if (abortController) {
-      abortController.abort();
-    }
-    abortController = new AbortController();
-    styleContainer.innerHTML = await render({
-      transformers: transformers_default,
-      styles,
-      breakpoints,
-      selectorPrefix: SELECTOR_PREFIX,
-      signal: abortController.signal
+  const resolve = createPropsResolver(styleTransformers, { onPropResolve: enqueueUsedFonts });
+  listenTo(v1ReadyEvent(), () => {
+    stylesRepository.subscribe(async () => {
+      const styleContainer = getStylesContainer();
+      const styles = stylesRepository.all().reverse();
+      const breakpoints = getBreakpointsMap();
+      const schema = getStylesSchema();
+      if (abortController) {
+        abortController.abort();
+      }
+      abortController = new AbortController();
+      styleContainer.innerHTML = await renderStyles({
+        styles,
+        resolve,
+        breakpoints,
+        selectorPrefix: SELECTOR_PREFIX,
+        signal: abortController.signal,
+        schema
+      });
     });
-    enqueueUsedFonts(styles);
   });
 }
 function getStylesContainer() {
@@ -511,6 +529,12 @@ function createStylesContainer() {
   el.setAttribute(WRAPPER_DATA_ATTR, "");
   return el;
 }
+function enqueueUsedFonts({ key, value }) {
+  if (key !== "font-family" || typeof value !== "string") {
+    return;
+  }
+  enqueueFont(value);
+}
 
 // src/init.tsx
 function init() {