@elementor/editor-canvas 0.21.3 → 0.22.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-canvas@0.21.3 build
+> @elementor/editor-canvas@0.22.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     45.57 KB
-CJS dist/index.js.map 90.48 KB
-CJS ⚡️ Build success in 196ms
-ESM dist/index.mjs     42.38 KB
-ESM dist/index.mjs.map 90.37 KB
-ESM ⚡️ Build success in 197ms
+CJS dist/index.js     46.46 KB
+CJS dist/index.js.map 92.22 KB
+CJS ⚡️ Build success in 232ms
+ESM dist/index.mjs     43.25 KB
+ESM dist/index.mjs.map 92.12 KB
+ESM ⚡️ Build success in 243ms
 DTS Build start
-DTS ⚡️ Build success in 19350ms
+DTS ⚡️ Build success in 20228ms
 DTS dist/index.d.mts 2.23 KB
 DTS dist/index.d.ts  2.23 KB

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @elementor/editor-canvas
 
+## 0.22.0
+
+### Minor Changes
+
+- 15450a8: Allow render labels of global classes as css selector
+
+### Patch Changes
+
+- Updated dependencies [15450a8]
+- Updated dependencies [27c4c1f]
+  - @elementor/editor-styles-repository@0.9.0
+  - @elementor/editor-props@0.12.1
+  - @elementor/editor-elements@0.8.4
+  - @elementor/editor-styles@0.6.8
+
 ## 0.21.3
 
 ### Patch Changes

package/dist/index.js

@@ -429,7 +429,7 @@ function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
     const stylesCssPromises = styles.map(async (style) => {
       const variantCssPromises = Object.values(style.variants).map(async (variant) => {
         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);
+        return createStyleWrapper().for(style.cssName, style.type).withPrefix(selectorPrefix).withState(variant.meta.state).withMediaQuery(variant.meta.breakpoint ? breakpoints[variant.meta.breakpoint] : null).wrap(css);
       });
       const variantsCss = await Promise.all(variantCssPromises);
       return {
@@ -442,12 +442,12 @@ function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
 }
 function createStyleWrapper(value = "", wrapper) {
   return {
-    forStyle: ({ id, type }) => {
+    for: (cssName, type) => {
       const symbol = SELECTORS_MAP[type];
       if (!symbol) {
         throw new UnknownStyleTypeError({ context: { type } });
       }
-      return createStyleWrapper(`${value}${symbol}${id}`, wrapper);
+      return createStyleWrapper(`${value}${symbol}${cssName}`, wrapper);
     },
     withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
     withState: (state) => createStyleWrapper(state ? `${value}:${state}` : value, wrapper),
@@ -526,7 +526,17 @@ function useStyleItems() {
 }
 function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
-    (abortController) => signalizedProcess(abortController.signal).then((_, signal) => renderStyles({ styles: [...provider.actions.all()].reverse(), signal })).then((items) => {
+    (abortController) => signalizedProcess(abortController.signal).then((_, signal) => {
+      const styles = provider.actions.all().map((__5, index, items) => {
+        const lastPosition = items.length - 1;
+        const style = items[lastPosition - index];
+        return {
+          ...style,
+          cssName: provider.actions.resolveCssName(style.id)
+        };
+      });
+      return renderStyles({ styles, signal });
+    }).then((items) => {
       setStyleItems((prev) => ({
         ...prev,
         [provider.getKey()]: { provider, items }
@@ -552,15 +562,35 @@ function usePortalContainer() {
 // src/settings-transformers-registry.ts
 var settingsTransformersRegistry = createTransformersRegistry();
 
+// src/transformers/settings/classes-transformer.ts
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+
 // src/transformers/create-transformer.ts
 function createTransformer(cb) {
   return cb;
 }
 
-// src/transformers/settings/array-transformer.ts
-var arrayTransformer = createTransformer((value) => {
-  return value.filter(Boolean);
-});
+// src/transformers/settings/classes-transformer.ts
+function createClassesTransformer() {
+  const cache = /* @__PURE__ */ new Map();
+  return createTransformer((value) => {
+    return value.map((id) => {
+      if (!cache.has(id)) {
+        cache.set(id, getCssName(id));
+      }
+      return cache.get(id);
+    }).filter(Boolean);
+  });
+}
+function getCssName(id) {
+  const provider = import_editor_styles_repository2.stylesRepository.getProviders().find((p) => {
+    return p.actions.all().find((style) => style.id === id);
+  });
+  if (!provider) {
+    return id;
+  }
+  return provider.actions.resolveCssName(id);
+}
 
 // src/transformers/settings/link-transformer.ts
 var linkTransformer = createTransformer(({ destination, isTargetBlank }) => {
@@ -610,7 +640,7 @@ var plainTransformer = createTransformer((value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", arrayTransformer).register("link", linkTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -1087,7 +1117,7 @@ var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/paste-element-style.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
-var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
@@ -1165,7 +1195,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters7.undoable)(
           revertData.styleId = (0, import_editor_elements5.createElementStyle)({
             elementId,
             classesProp,
-            label: import_editor_styles_repository2.ELEMENTS_STYLES_RESERVED_LABEL,
+            label: import_editor_styles_repository3.ELEMENTS_STYLES_RESERVED_LABEL,
             ...firstVariant,
             additionalVariants
           });
@@ -1192,7 +1222,7 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters7.undoable)(
         (0, import_editor_elements5.createElementStyle)({
           elementId: container.id,
           classesProp,
-          label: import_editor_styles_repository2.ELEMENTS_STYLES_RESERVED_LABEL,
+          label: import_editor_styles_repository3.ELEMENTS_STYLES_RESERVED_LABEL,
           styleId: revertData.styleId,
           ...firstVariant,
           additionalVariants
@@ -1242,7 +1272,7 @@ var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 
 // src/style-commands/undoable-actions/reset-element-style.ts
 var import_editor_elements6 = require("@elementor/editor-elements");
-var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
 var undoableResetElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
@@ -1272,7 +1302,7 @@ var undoableResetElementStyle = () => (0, import_editor_v1_adapters9.undoable)(
             elementId,
             classesProp,
             styleId,
-            label: import_editor_styles_repository3.ELEMENTS_STYLES_RESERVED_LABEL,
+            label: import_editor_styles_repository4.ELEMENTS_STYLES_RESERVED_LABEL,
             ...firstVariant,
             additionalVariants
           });