@elementor/editor-canvas 0.23.0 → 0.25.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-canvas@0.23.0 build
+> @elementor/editor-canvas@0.25.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     47.13 KB
-CJS dist/index.js.map 93.19 KB
-CJS ⚡️ Build success in 254ms
-ESM dist/index.mjs     43.78 KB
-ESM dist/index.mjs.map 92.97 KB
-ESM ⚡️ Build success in 279ms
+ESM dist/index.mjs     44.37 KB
+ESM dist/index.mjs.map 94.30 KB
+ESM ⚡️ Build success in 245ms
+CJS dist/index.js     47.71 KB
+CJS dist/index.js.map 94.53 KB
+CJS ⚡️ Build success in 247ms
 DTS Build start
-DTS ⚡️ Build success in 19195ms
+DTS ⚡️ Build success in 20606ms
 DTS dist/index.d.mts 2.42 KB
 DTS dist/index.d.ts  2.42 KB

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @elementor/editor-canvas
 
+## 0.25.0
+
+### Minor Changes
+
+- ab6ad10: Adds support for css filter property, blur and brightness only.
+- c694e33: updated overlay styling for small elements
+  changed default tab for editing panel for divider widget
+
+### Patch Changes
+
+- Updated dependencies [e953081]
+- Updated dependencies [ab6ad10]
+- Updated dependencies [ea388a1]
+- Updated dependencies [16df763]
+  - @elementor/utils@0.5.0
+  - @elementor/editor-props@0.15.0
+  - @elementor/editor-elements@0.8.7
+  - @elementor/editor-styles-repository@0.10.4
+  - @elementor/editor-v1-adapters@0.12.1
+  - @elementor/wp-media@0.6.1
+  - @elementor/editor-styles@0.6.11
+  - @elementor/editor@0.20.1
+  - @elementor/editor-responsive@0.13.6
+  - @elementor/editor-notifications@1.3.1
+
+## 0.24.0
+
+### Minor Changes
+
+- 17b73ab: Update `@elementor/ui` version.
+- 20d04f2: Added object position custom control
+
+### Patch Changes
+
+- Updated dependencies [17b73ab]
+- Updated dependencies [29f1740]
+- Updated dependencies [20d04f2]
+  - @elementor/editor-notifications@1.3.0
+  - @elementor/editor@0.20.0
+  - @elementor/editor-styles-repository@0.10.3
+  - @elementor/editor-props@0.14.0
+  - @elementor/editor-elements@0.8.6
+  - @elementor/editor-styles@0.6.10
+
 ## 0.23.0
 
 ### Minor Changes

package/dist/index.js

@@ -126,15 +126,18 @@ function useFloatingOnElement({ element, isSelected }) {
 
 // src/components/element-overlay.tsx
 var CANVAS_WRAPPER_ID = "elementor-preview-responsive-wrapper";
-var OverlayBox = (0, import_ui.styled)(import_ui.Box, { shouldForwardProp: (prop) => prop !== "isSelected" })(({ theme, isSelected }) => ({
+var OverlayBox = (0, import_ui.styled)(import_ui.Box, {
+  shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "isSmallerOffset"
+})(({ theme, isSelected, isSmallerOffset }) => ({
   outline: `${isSelected ? "2px" : "1px"} solid ${theme.palette.primary.light}`,
-  outlineOffset: isSelected ? "-2px" : "-1px",
+  outlineOffset: isSelected && !isSmallerOffset ? "-2px" : "-1px",
   pointerEvents: "none"
 }));
 function ElementOverlay({ element, isSelected, id }) {
   const { context, floating, isVisible } = useFloatingOnElement({ element, isSelected });
   const { getFloatingProps, getReferenceProps } = (0, import_react4.useInteractions)([(0, import_react4.useHover)(context)]);
   useBindReactPropsToElement(element, getReferenceProps);
+  const isSmallerOffset = element.offsetHeight <= 1;
   return isVisible && /* @__PURE__ */ React.createElement(import_react4.FloatingPortal, { id: CANVAS_WRAPPER_ID }, /* @__PURE__ */ React.createElement(
     OverlayBox,
     {
@@ -143,6 +146,7 @@ function ElementOverlay({ element, isSelected, id }) {
       style: floating.styles,
       "data-element-overlay": id,
       role: "presentation",
+      isSmallerOffset,
       ...getFloatingProps()
     }
   ));
@@ -681,11 +685,6 @@ var backgroundImageOverlayTransformer = createTransformer((value) => {
   return backgroundStyles;
 });
 
-// src/transformers/styles/background-image-position-offset-transformer.ts
-var backgroundImagePositionOffsetTransformer = createTransformer(
-  ({ x, y }) => `${x ?? "0px"} ${y ?? "0px"}`
-);
-
 // src/transformers/styles/background-image-size-scale-transformer.ts
 var backgroundImageSizeScaleTransformer = createTransformer(
   ({ width, height }) => `${width ?? "auto"} ${height ?? "auto"}`
@@ -778,6 +777,26 @@ var createMultiPropsTransformer = (keys, keyGenerator) => {
   });
 };
 
+// src/transformers/styles/filter-transformer.ts
+var filterTransformer = createTransformer((filterValues) => {
+  if (filterValues?.length < 1) {
+    return null;
+  }
+  return filterValues.map(mapToFilterFunctionString).join(" ");
+});
+var mapToFilterFunctionString = (value) => {
+  if ("radius" in value) {
+    return `blur(${value.radius})`;
+  }
+  if ("amount" in value) {
+    return `brightness(${value.amount})`;
+  }
+  return "";
+};
+
+// src/transformers/styles/position-transformer.ts
+var positionTransformer = createTransformer(({ x, y }) => `${x ?? "0px"} ${y ?? "0px"}`);
+
 // 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(" ");
@@ -806,7 +825,7 @@ function initStyleTransformers() {
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ propKey, key }) => `${propKey}-${key}`
     )
-  ).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", backgroundImagePositionOffsetTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register(
+  ).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(
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).register(