@elementor/editor-canvas 0.7.0 → 0.8.0

package/.turbo/turbo-build.log

@@ -1,22 +1,22 @@
 
-> @elementor/editor-canvas@0.7.0 build
+> @elementor/editor-canvas@0.8.0 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
 CLI Using tsconfig: ../../../tsconfig.json
-CLI tsup v8.3.5
+CLI tsup v8.4.0
 CLI Using tsup config: /home/runner/work/elementor-packages/elementor-packages/tsup.build.ts
 CLI Target: esnext
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     17.35 KB
-ESM dist/index.mjs.map 35.87 KB
-ESM ⚡️ Build success in 160ms
-CJS dist/index.js     18.93 KB
-CJS dist/index.js.map 35.87 KB
-CJS ⚡️ Build success in 161ms
+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
 DTS Build start
-DTS ⚡️ Build success in 15999ms
+DTS ⚡️ Build success in 17766ms
 DTS dist/index.d.mts 13.00 B
 DTS dist/index.d.ts  13.00 B

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @elementor/editor-canvas
 
+## 0.8.0
+
+### Minor Changes
+
+- c9133d7: Add background image overlay custom size
+- 910044c: update `@elementor/icons` and `@elementor/ui` packages.
+- 0953b40: Background image overlay resolution canvas connection
+- 15c964f: Add background image overlay custom position
+- 5caf78d: update `@elementor/ui` package.
+
+### Patch Changes
+
+- da38fa9: Remove unused exports and add missing dependencies.
+- 35f9714: Add default background image to background overlay repeater
+- dc93616: Move resolver out of style renderer to allow dom renderer use it
+- Updated dependencies [c9133d7]
+- Updated dependencies [86863c1]
+- Updated dependencies [e6c904a]
+- Updated dependencies [188069d]
+- Updated dependencies [e441663]
+- Updated dependencies [efdadea]
+- Updated dependencies [da38fa9]
+- Updated dependencies [910044c]
+- Updated dependencies [4ed562a]
+- Updated dependencies [9ca4eab]
+- Updated dependencies [15c964f]
+- Updated dependencies [5caf78d]
+- Updated dependencies [ffad70a]
+- Updated dependencies [ad6fde0]
+- Updated dependencies [ebd9676]
+- Updated dependencies [d99471a]
+- Updated dependencies [b8e2a85]
+  - @elementor/editor-props@0.9.0
+  - @elementor/editor-styles-repository@0.7.0
+  - @elementor/editor-elements@0.5.2
+  - @elementor/editor-v1-adapters@0.10.0
+  - @elementor/editor-responsive@0.13.0
+  - @elementor/editor@0.18.0
+  - @elementor/utils@0.3.1
+  - @elementor/editor-styles@0.5.5
+  - @elementor/wp-media@0.4.1
+
+## 0.7.1
+
+### Patch Changes
+
+- 6c4d4a7: refactored CSS class menu and fix it's keyboard navigation
+- b34f498: Fix global class styles not updating
+- Updated dependencies [d61b1bc]
+- Updated dependencies [6c4d4a7]
+- Updated dependencies [a8b60c9]
+- Updated dependencies [b34f498]
+- Updated dependencies [19b0381]
+  - @elementor/editor-styles-repository@0.6.0
+  - @elementor/editor-elements@0.5.1
+  - @elementor/editor@0.17.5
+  - @elementor/editor-v1-adapters@0.9.1
+  - @elementor/editor-styles@0.5.4
+  - @elementor/editor-responsive@0.12.6
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/index.js

@@ -150,36 +150,201 @@ 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/renderers/create-props-resolver.ts
+var import_editor_props = require("@elementor/editor-props");
 
-// src/styles-renderer/transformers/background-color-overlay-transformer.ts
+// 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 (!(0, import_editor_props.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
+var import_utils = require("@elementor/utils");
+var UnknownStyleTypeError = (0, import_utils.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 ?? "";
@@ -187,27 +352,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]) => {
@@ -221,7 +372,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]) => {
@@ -235,7 +386,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]) => {
@@ -248,25 +399,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
 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.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]) => {
@@ -279,31 +445,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,
@@ -311,180 +477,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
-var import_editor_styles = require("@elementor/editor-styles");
-
-// src/styles-renderer/errors.ts
-var import_utils = require("@elementor/utils");
-var UnknownStyleTypeError = (0, import_utils.createError)({
-  code: "unknown_style_type",
-  message: "Unknown style type"
-});
-
-// src/styles-renderer/resolve.ts
-var import_editor_props = require("@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 (!(0, import_editor_props.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 = (0, import_editor_styles.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
-var import_utils2 = require("@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': ${(0, import_utils2.ensureError)(error).message}`);
-  }
-}
-
 // src/sync/get-canvas-iframe-body.ts
 function getCanvasIframeBody() {
   const extendedWindow = window;
@@ -496,22 +510,26 @@ var WRAPPER_DATA_ATTR = "data-styles-container";
 var SELECTOR_PREFIX = ".elementor";
 function initStylesRenderer() {
   let abortController = null;
-  import_editor_styles_repository.stylesRepository.subscribe(async () => {
-    const styleContainer = getStylesContainer();
-    const styles = import_editor_styles_repository.stylesRepository.all();
-    const breakpoints = (0, import_editor_responsive.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 });
+  (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.v1ReadyEvent)(), () => {
+    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();
+      }
+      abortController = new AbortController();
+      styleContainer.innerHTML = await renderStyles({
+        styles,
+        resolve,
+        breakpoints,
+        selectorPrefix: SELECTOR_PREFIX,
+        signal: abortController.signal,
+        schema
+      });
     });
-    enqueueUsedFonts(styles);
   });
 }
 function getStylesContainer() {
@@ -530,6 +548,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() {