@elementor/editor-canvas 0.26.0 → 3.32.0-20

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @elementor/editor-canvas
 
+## 0.27.0
+
+### Minor Changes
+
+- 068f659: Adds contrast, gray-scale, invert, sepia and saturate css filters
+
+### Patch Changes
+
+- Updated dependencies [068f659]
+- Updated dependencies [e7cca0a]
+- Updated dependencies [07ca7e9]
+  - @elementor/editor-props@0.17.0
+  - @elementor/editor-styles-repository@0.10.6
+  - @elementor/editor-elements@0.9.1
+  - @elementor/editor-styles@0.6.13
+
 ## 0.26.0
 
 ### Minor Changes

package/dist/index.js

@@ -174,7 +174,7 @@ function useElementsDom() {
 
 // src/components/style-renderer.tsx
 var React3 = __toESM(require("react"));
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_ui2 = require("@elementor/ui");
 
 // src/hooks/use-documents-css-links.ts
@@ -234,8 +234,9 @@ function getLinkAttrs(el) {
 
 // src/hooks/use-style-items.ts
 var import_react8 = require("react");
+var import_editor_responsive2 = require("@elementor/editor-responsive");
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 
 // src/utils/abort-previous-runs.ts
 function abortPreviousRuns(cb) {
@@ -421,6 +422,10 @@ function useStylePropResolver() {
 var import_react7 = require("react");
 var import_editor_responsive = require("@elementor/editor-responsive");
 
+// src/renderers/create-styles-renderer.ts
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_utils2 = require("@elementor/utils");
+
 // src/renderers/errors.ts
 var import_utils = require("@elementor/utils");
 var UnknownStyleTypeError = (0, import_utils.createError)({
@@ -437,11 +442,13 @@ 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().for(style.cssName, style.type).withPrefix(selectorPrefix).withState(variant.meta.state).withMediaQuery(variant.meta.breakpoint ? breakpoints[variant.meta.breakpoint] : null).wrap(css);
+        const customCss = customCssToString(variant.custom_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 + customCss);
       });
       const variantsCss = await Promise.all(variantCssPromises);
       return {
         id: style.id,
+        breakpoint: style?.variants[0]?.meta?.breakpoint || "desktop",
         value: variantsCss.join("")
       };
     });
@@ -485,6 +492,16 @@ async function propsToCss({ props, resolve, signal }) {
     return acc;
   }, []).join("");
 }
+function customCssToString(customCss) {
+  if (!(0, import_editor_v1_adapters3.isExperimentActive)(import_editor_v1_adapters3.EXPERIMENTAL_FEATURES.CUSTOM_CSS) || !customCss?.raw) {
+    return "";
+  }
+  const decoded = (0, import_utils2.decodeString)(customCss.raw);
+  if (!decoded.trim()) {
+    return "";
+  }
+  return decoded + "\n";
+}
 
 // src/hooks/use-style-renderer.ts
 var SELECTOR_PREFIX = ".elementor";
@@ -525,12 +542,20 @@ function useStyleItems() {
     };
   }, [providerAndSubscribers]);
   useOnMount(() => {
-    (0, import_editor_v1_adapters3.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+    (0, import_editor_v1_adapters4.registerDataHook)("after", "editor/documents/attach-preview", async () => {
       const promises = providerAndSubscribers.map(async ({ subscriber }) => subscriber());
       await Promise.all(promises);
     });
   });
-  return Object.values(styleItems).sort(({ provider: providerA }, { provider: providerB }) => providerA.priority - providerB.priority).flatMap(({ items }) => items);
+  const breakpointsOrder = (0, import_editor_responsive2.getBreakpoints)().map((breakpoint) => breakpoint.id);
+  return (0, import_react8.useMemo)(
+    () => Object.values(styleItems).sort(({ provider: providerA }, { provider: providerB }) => providerA.priority - providerB.priority).flatMap(({ items }) => items).sort(({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => {
+      return breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
+    }),
+    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [styleItems, breakpointsOrder.join("-")]
+  );
 }
 function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
@@ -543,7 +568,7 @@ function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
           cssName: provider.actions.resolveCssName(style.id)
         };
       });
-      return renderStyles({ styles, signal });
+      return renderStyles({ styles: breakToBreakpoints(styles), signal });
     }).then((items) => {
       setStyleItems((prev) => ({
         ...prev,
@@ -551,6 +576,29 @@ function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
       }));
     }).execute()
   );
+  function breakToBreakpoints(styles) {
+    return Object.values(
+      styles.reduce(
+        (acc, style) => {
+          style.variants.forEach((variant) => {
+            const breakpoint = variant.meta.breakpoint || "desktop";
+            if (!acc[style.id]) {
+              acc[style.id] = {};
+            }
+            if (!acc[style.id][breakpoint]) {
+              acc[style.id][breakpoint] = {
+                ...style,
+                variants: []
+              };
+            }
+            acc[style.id][breakpoint].variants.push(variant);
+          });
+          return acc;
+        },
+        {}
+      )
+    ).flatMap((breakpointMap) => Object.values(breakpointMap));
+  }
 }
 
 // src/components/style-renderer.tsx
@@ -561,24 +609,43 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement(import_ui2.Portal, { container }, styleItems.map((item) => /* @__PURE__ */ React3.createElement("style", { "data-e-style-id": item.id, key: item.id }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React3.createElement("link", { ...attrs, key: attrs.id })));
+  return /* @__PURE__ */ React3.createElement(import_ui2.Portal, { container }, styleItems.map((item) => /* @__PURE__ */ React3.createElement("style", { "data-e-style-id": item.id, key: `${item.id}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React3.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer() {
-  return (0, import_editor_v1_adapters4.__privateUseListenTo)((0, import_editor_v1_adapters4.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+  return (0, import_editor_v1_adapters5.__privateUseListenTo)((0, import_editor_v1_adapters5.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 
 // 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/attributes-transformer.ts
+function escapeHtmlAttribute(value) {
+  const specialChars = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    "'": "&#39;",
+    '"': "&quot;"
+  };
+  return value.replace(/[&<>'"]/g, (char) => specialChars[char] || char);
+}
+var attributesTransformer = createTransformer((values) => {
+  return values.map((value) => {
+    if (!value.key || !value.value) {
+      return "";
+    }
+    const escapedValue = escapeHtmlAttribute(value.value);
+    return `${value.key}="${escapedValue}"`;
+  }).join(" ");
+});
+
 // src/transformers/settings/classes-transformer.ts
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 function createClassesTransformer() {
   const cache = /* @__PURE__ */ new Map();
   return createTransformer((value) => {
@@ -648,7 +715,7 @@ var plainTransformer = createTransformer((value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).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).register("key-value-array", attributesTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -691,7 +758,6 @@ var backgroundImageSizeScaleTransformer = createTransformer(
 );
 
 // src/transformers/styles/background-overlay-transformer.ts
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var backgroundOverlayTransformer = createTransformer(
   (value) => {
     if (!value || value.length === 0) {
@@ -716,7 +782,6 @@ var backgroundOverlayTransformer = createTransformer(
   }
 );
 function normalizeOverlayValues(overlays) {
-  const isVersion330Active = (0, import_editor_v1_adapters5.isExperimentActive)("e_v_3_30");
   const mappedValues = overlays.map((item) => {
     if (typeof item === "string") {
       return {
@@ -729,16 +794,12 @@ function normalizeOverlayValues(overlays) {
     }
     return item;
   });
-  if (!isVersion330Active) {
-    return mappedValues;
-  }
   return mappedValues.filter((item) => item && !!item.src);
 }
 function getValuesString(items, prop, defaultValue, preventUnification = false) {
-  const isVersion330Active = (0, import_editor_v1_adapters5.isExperimentActive)("e_v_3_30");
   const isEmpty = items.filter((item) => item?.[prop]).length === 0;
   if (isEmpty) {
-    return isVersion330Active ? defaultValue : null;
+    return defaultValue;
   }
   const formattedValues = items.map((item) => item[prop] ?? defaultValue);
   if (!preventUnification) {
@@ -766,7 +827,9 @@ var colorStopTransformer = createTransformer(
 
 // src/transformers/styles/create-combine-array-transformer.ts
 var createCombineArrayTransformer = (delimiter) => {
-  return createTransformer((value) => value.filter(Boolean).join(delimiter));
+  return createTransformer(
+    (value) => value?.length ? value.filter(Boolean).join(delimiter) : null
+  );
 };
 
 // src/transformers/styles/create-multi-props-transformer.ts
@@ -782,18 +845,54 @@ var filterTransformer = createTransformer((filterValues) => {
   if (filterValues?.length < 1) {
     return null;
   }
-  return filterValues.map(mapToFilterFunctionString).join(" ");
+  return filterValues.filter(Boolean).map(mapToFilterFunctionString).join(" ");
 });
 var mapToFilterFunctionString = (value) => {
-  if ("radius" in value) {
-    return `blur(${value.radius})`;
+  if (value.func === "drop-shadow") {
+    const { xAxis, yAxis, blur, color } = value.args;
+    return `drop-shadow(${xAxis || "0px"} ${yAxis || "0px"} ${blur || "10px"} ${color || "transparent"})`;
   }
-  if ("amount" in value) {
-    return `brightness(${value.amount})`;
+  if (!value.func || !value.args) {
+    return "";
   }
-  return "";
+  return `${value.func}(${value.args})`;
 };
 
+// src/transformers/styles/flex-transformer.ts
+var flexTransformer = createTransformer((value) => {
+  const grow = value.flexGrow;
+  const shrink = value.flexShrink;
+  const basis = value.flexBasis;
+  const hasGrow = grow !== void 0 && grow !== null;
+  const hasShrink = shrink !== void 0 && shrink !== null;
+  const hasBasis = basis !== void 0 && basis !== null;
+  if (!hasGrow && !hasShrink && !hasBasis) {
+    return null;
+  }
+  if (hasGrow && hasShrink && hasBasis) {
+    return `${grow} ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
+  }
+  if (hasGrow && hasShrink && !hasBasis) {
+    return `${grow} ${shrink}`;
+  }
+  if (hasGrow && !hasShrink && hasBasis) {
+    return `${grow} 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
+  }
+  if (!hasGrow && hasShrink && hasBasis) {
+    return `0 ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
+  }
+  if (hasGrow && !hasShrink && !hasBasis) {
+    return `${grow}`;
+  }
+  if (!hasGrow && hasShrink && !hasBasis) {
+    return `0 ${shrink}`;
+  }
+  if (!hasGrow && !hasShrink && hasBasis) {
+    return `0 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
+  }
+  return null;
+});
+
 // src/transformers/styles/position-transformer.ts
 var positionTransformer = createTransformer(({ x, y }) => `${x ?? "0px"} ${y ?? "0px"}`);
 
@@ -818,8 +917,33 @@ var strokeTransformer = createTransformer((value) => {
 });
 
 // src/transformers/styles/transform-move-transformer.ts
+var defaultMove = "0px";
 var transformMoveTransformer = createTransformer((value) => {
-  return `translate3d(${value.x}, ${value.y}, ${value.z})`;
+  return `translate3d(${value.x ?? defaultMove}, ${value.y ?? defaultMove}, ${value.z ?? defaultMove})`;
+});
+
+// src/transformers/styles/transform-rotate-transformer.ts
+var defaultRotate = "0deg";
+var transformRotateTransformer = createTransformer((value) => {
+  const transforms = [
+    `rotateX(${value?.x ?? defaultRotate})`,
+    `rotateY(${value?.y ?? defaultRotate})`,
+    `rotateZ(${value?.z ?? defaultRotate})`
+  ];
+  return transforms.join(" ");
+});
+
+// src/transformers/styles/transform-scale-transformer.ts
+var transformScaleTransformer = createTransformer((value) => {
+  return `scale3d(${value.x ?? 1}, ${value.y ?? 1}, ${value.z ?? 1})`;
+});
+
+// src/transformers/styles/transform-skew-transformer.ts
+var defaultSkew = "0deg";
+var transformSkewTransformer = createTransformer((value) => {
+  const x = value?.x ?? defaultSkew;
+  const y = value?.y ?? defaultSkew;
+  return `skew(${x}, ${y})`;
 });
 
 // src/transformers/styles/transform-transformer.ts
@@ -830,6 +954,20 @@ var transformTransformer = createTransformer((values) => {
   return values.join(" ");
 });
 
+// src/transformers/styles/transition-transformer.ts
+var transitionTransformer = createTransformer((transitionValues) => {
+  if (transitionValues?.length < 1) {
+    return null;
+  }
+  return transitionValues.filter(Boolean).map(mapToTransitionString).join(", ");
+});
+var mapToTransitionString = (value) => {
+  if (!value.selection || !value.size) {
+    return "";
+  }
+  return `${value.selection.value} ${value.size}`;
+};
+
 // src/init-style-transformers.ts
 function initStyleTransformers() {
   styleTransformersRegistry.register("size", sizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
@@ -838,10 +976,10 @@ function initStyleTransformers() {
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ propKey, key }) => `${propKey}-${key}`
     )
-  ).register("filter", filterTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", backgroundOverlayTransformer).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", positionTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register("object-position", positionTransformer).register("transform-move", transformMoveTransformer).register("transform", transformTransformer).register(
+  ).register("filter", filterTransformer).register("backdrop-filter", filterTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", backgroundOverlayTransformer).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", positionTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register("object-position", positionTransformer).register("transform-move", transformMoveTransformer).register("transform-scale", transformScaleTransformer).register("transform-rotate", transformRotateTransformer).register("transform-skew", transformSkewTransformer).register("transform", transformTransformer).register("transition", transitionTransformer).register(
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
-  ).register(
+  ).register("flex", flexTransformer).register(
     "border-width",
     createMultiPropsTransformer(
       ["block-start", "block-end", "inline-start", "inline-end"],
@@ -1227,12 +1365,13 @@ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters8.undoable)(
           originalStyle
         };
         if (styleId) {
-          newStyle.variants.forEach(({ meta, props }) => {
+          newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
             (0, import_editor_elements5.updateElementStyle)({
               elementId,
               styleId,
               meta,
-              props
+              props,
+              custom_css: customCss
             });
           });
         } else {