@elementor/editor-canvas 4.2.0-878 → 4.2.0-879

package/dist/index.d.mts

@@ -328,6 +328,9 @@ declare const DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 
 declare function createTransformer<TValue = never>(cb: TValue extends AnyTransformable ? 'Transformable values are invalid, use the actual value instead.' : UnbrandedTransformer<TValue>): Transformer<NoInfer<TValue>>;
 
+declare const isGridTrackProperty: (cssProperty: string) => boolean;
+declare const formatGridTrackRepeat: (count: number) => string | null;
+
 declare const UnknownStyleTypeError: {
     new ({ cause, context }?: {
         cause?: _elementor_utils.ElementorErrorOptions["cause"];
@@ -363,4 +366,4 @@ declare const UnknownStyleStateError: {
 
 declare function doAfterRender(elementIds: string[], callback: (elementIds: string[]) => void): void;
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type ContextMenuAction, type ContextMenuEventData, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload, type LegacyWindow, type NamespacedRenderContext, type NestedTemplatedElementConfig, type PropsResolver, type RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, TemplatedElementView, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, canBeNestedTemplated, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, doAfterRender, endDragElementFromPanel, init, isAtomicWidget, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry };
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type ContextMenuAction, type ContextMenuEventData, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload, type LegacyWindow, type NamespacedRenderContext, type NestedTemplatedElementConfig, type PropsResolver, type RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, TemplatedElementView, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, canBeNestedTemplated, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, doAfterRender, endDragElementFromPanel, formatGridTrackRepeat, init, isAtomicWidget, isGridTrackProperty, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry };

package/dist/index.d.ts

@@ -328,6 +328,9 @@ declare const DOCUMENT_STRUCTURE_URI = "elementor://document/structure";
 
 declare function createTransformer<TValue = never>(cb: TValue extends AnyTransformable ? 'Transformable values are invalid, use the actual value instead.' : UnbrandedTransformer<TValue>): Transformer<NoInfer<TValue>>;
 
+declare const isGridTrackProperty: (cssProperty: string) => boolean;
+declare const formatGridTrackRepeat: (count: number) => string | null;
+
 declare const UnknownStyleTypeError: {
     new ({ cause, context }?: {
         cause?: _elementor_utils.ElementorErrorOptions["cause"];
@@ -363,4 +366,4 @@ declare const UnknownStyleStateError: {
 
 declare function doAfterRender(elementIds: string[], callback: (elementIds: string[]) => void): void;
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type ContextMenuAction, type ContextMenuEventData, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload, type LegacyWindow, type NamespacedRenderContext, type NestedTemplatedElementConfig, type PropsResolver, type RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, TemplatedElementView, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, canBeNestedTemplated, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, doAfterRender, endDragElementFromPanel, init, isAtomicWidget, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry };
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type ContextMenuAction, type ContextMenuEventData, type CreateNestedTemplatedElementTypeOptions, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload, type LegacyWindow, type NamespacedRenderContext, type NestedTemplatedElementConfig, type PropsResolver, type RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, TemplatedElementView, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, canBeNestedTemplated, createNestedTemplatedElementType, createNestedTemplatedElementView, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, doAfterRender, endDragElementFromPanel, formatGridTrackRepeat, init, isAtomicWidget, isGridTrackProperty, registerElementType, registerModelExtensions, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry, stylesInheritanceTransformersRegistry };

package/dist/index.js

@@ -46,8 +46,10 @@ __export(index_exports, {
   createTransformersRegistry: () => createTransformersRegistry,
   doAfterRender: () => doAfterRender,
   endDragElementFromPanel: () => endDragElementFromPanel,
+  formatGridTrackRepeat: () => formatGridTrackRepeat,
   init: () => init,
   isAtomicWidget: () => isAtomicWidget,
+  isGridTrackProperty: () => isGridTrackProperty,
   registerElementType: () => registerElementType,
   registerModelExtensions: () => registerModelExtensions,
   settingsTransformersRegistry: () => settingsTransformersRegistry,
@@ -1867,6 +1869,27 @@ var flexTransformer = createTransformer((value) => {
   return null;
 });
 
+// src/transformers/styles/grid-track-renderer.ts
+var GRID_TRACK_PROPERTIES = /* @__PURE__ */ new Set(["grid-template-columns", "grid-template-rows"]);
+var isGridTrackProperty = (cssProperty) => GRID_TRACK_PROPERTIES.has(cssProperty);
+var formatGridTrackRepeat = (count) => {
+  if (!Number.isFinite(count) || count < 1) {
+    return null;
+  }
+  return `repeat(${count}, 1fr)`;
+};
+
+// src/transformers/styles/grid-track-size-transformer.ts
+var gridTrackSizeTransformer = createTransformer((value) => {
+  if (value.unit === "custom") {
+    return value.size;
+  }
+  if (value.unit === "fr") {
+    return formatGridTrackRepeat(Math.trunc(Number(value.size)));
+  }
+  return `${value.size}${value.unit}`;
+});
+
 // src/transformers/styles/perspective-origin-transformer.ts
 var FALLBACK = "0px";
 function getVal(val) {
@@ -1997,7 +2020,7 @@ var mapToTransitionString = (value, allowedProperties) => {
 
 // src/init-style-transformers.ts
 function initStyleTransformers() {
-  styleTransformersRegistry.register("size", sizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
+  styleTransformersRegistry.register("size", sizeTransformer).register("grid-track-size", gridTrackSizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
     "dimensions",
     createMultiPropsTransformer(
       ["block-start", "block-end", "inline-start", "inline-end"],
@@ -5623,8 +5646,10 @@ function hasDoAfterRender(view) {
   createTransformersRegistry,
   doAfterRender,
   endDragElementFromPanel,
+  formatGridTrackRepeat,
   init,
   isAtomicWidget,
+  isGridTrackProperty,
   registerElementType,
   registerModelExtensions,
   settingsTransformersRegistry,

package/dist/index.mjs

@@ -1831,6 +1831,27 @@ var flexTransformer = createTransformer((value) => {
   return null;
 });
 
+// src/transformers/styles/grid-track-renderer.ts
+var GRID_TRACK_PROPERTIES = /* @__PURE__ */ new Set(["grid-template-columns", "grid-template-rows"]);
+var isGridTrackProperty = (cssProperty) => GRID_TRACK_PROPERTIES.has(cssProperty);
+var formatGridTrackRepeat = (count) => {
+  if (!Number.isFinite(count) || count < 1) {
+    return null;
+  }
+  return `repeat(${count}, 1fr)`;
+};
+
+// src/transformers/styles/grid-track-size-transformer.ts
+var gridTrackSizeTransformer = createTransformer((value) => {
+  if (value.unit === "custom") {
+    return value.size;
+  }
+  if (value.unit === "fr") {
+    return formatGridTrackRepeat(Math.trunc(Number(value.size)));
+  }
+  return `${value.size}${value.unit}`;
+});
+
 // src/transformers/styles/perspective-origin-transformer.ts
 var FALLBACK = "0px";
 function getVal(val) {
@@ -1961,7 +1982,7 @@ var mapToTransitionString = (value, allowedProperties) => {
 
 // src/init-style-transformers.ts
 function initStyleTransformers() {
-  styleTransformersRegistry.register("size", sizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
+  styleTransformersRegistry.register("size", sizeTransformer).register("grid-track-size", gridTrackSizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
     "dimensions",
     createMultiPropsTransformer(
       ["block-start", "block-end", "inline-start", "inline-end"],
@@ -5634,8 +5655,10 @@ export {
   createTransformersRegistry,
   doAfterRender,
   endDragElementFromPanel,
+  formatGridTrackRepeat,
   init,
   isAtomicWidget,
+  isGridTrackProperty,
   registerElementType,
   registerModelExtensions,
   settingsTransformersRegistry,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.2.0-878",
+  "version": "4.2.0-879",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,25 +37,25 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-878",
+    "@elementor/editor": "4.2.0-879",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.2.0-878",
-    "@elementor/editor-documents": "4.2.0-878",
-    "@elementor/editor-elements": "4.2.0-878",
-    "@elementor/editor-interactions": "4.2.0-878",
-    "@elementor/editor-mcp": "4.2.0-878",
-    "@elementor/editor-notifications": "4.2.0-878",
-    "@elementor/editor-props": "4.2.0-878",
-    "@elementor/editor-responsive": "4.2.0-878",
-    "@elementor/editor-styles": "4.2.0-878",
-    "@elementor/editor-styles-repository": "4.2.0-878",
-    "@elementor/editor-ui": "4.2.0-878",
-    "@elementor/editor-v1-adapters": "4.2.0-878",
-    "@elementor/schema": "4.2.0-878",
-    "@elementor/twing": "4.2.0-878",
+    "@elementor/editor-controls": "4.2.0-879",
+    "@elementor/editor-documents": "4.2.0-879",
+    "@elementor/editor-elements": "4.2.0-879",
+    "@elementor/editor-interactions": "4.2.0-879",
+    "@elementor/editor-mcp": "4.2.0-879",
+    "@elementor/editor-notifications": "4.2.0-879",
+    "@elementor/editor-props": "4.2.0-879",
+    "@elementor/editor-responsive": "4.2.0-879",
+    "@elementor/editor-styles": "4.2.0-879",
+    "@elementor/editor-styles-repository": "4.2.0-879",
+    "@elementor/editor-ui": "4.2.0-879",
+    "@elementor/editor-v1-adapters": "4.2.0-879",
+    "@elementor/schema": "4.2.0-879",
+    "@elementor/twing": "4.2.0-879",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-878",
-    "@elementor/wp-media": "4.2.0-878",
+    "@elementor/utils": "4.2.0-879",
+    "@elementor/wp-media": "4.2.0-879",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/index.ts

@@ -26,6 +26,7 @@ export { DOCUMENT_STRUCTURE_URI } from './mcp/resources/document-structure-resou
 export { WIDGET_SCHEMA_URI } from './mcp/resources/widgets-schema-resource';
 export * from './legacy/types';
 export { createTransformer } from './transformers/create-transformer';
+export { formatGridTrackRepeat, isGridTrackProperty } from './transformers/styles/grid-track-renderer';
 export {
 	createTransformersRegistry,
 	stylesInheritanceTransformersRegistry,

package/src/init-style-transformers.ts

@@ -13,6 +13,7 @@ import { createCombineArrayTransformer } from './transformers/styles/create-comb
 import { createMultiPropsTransformer } from './transformers/styles/create-multi-props-transformer';
 import { filterTransformer } from './transformers/styles/filter-transformer';
 import { flexTransformer } from './transformers/styles/flex-transformer';
+import { gridTrackSizeTransformer } from './transformers/styles/grid-track-size-transformer';
 import { perspectiveOriginTransformer } from './transformers/styles/perspective-origin-transformer';
 import { positionTransformer } from './transformers/styles/position-transformer';
 import { shadowTransformer } from './transformers/styles/shadow-transformer';
@@ -30,6 +31,7 @@ import { transitionTransformer } from './transformers/styles/transition-transfor
 export function initStyleTransformers() {
 	styleTransformersRegistry
 		.register( 'size', sizeTransformer )
+		.register( 'grid-track-size', gridTrackSizeTransformer )
 		.register( 'shadow', shadowTransformer )
 		.register( 'stroke', strokeTransformer )
 		.register(

package/src/transformers/styles/grid-track-renderer.ts

@@ -0,0 +1,11 @@
+const GRID_TRACK_PROPERTIES = new Set( [ 'grid-template-columns', 'grid-template-rows' ] );
+
+export const isGridTrackProperty = ( cssProperty: string ): boolean => GRID_TRACK_PROPERTIES.has( cssProperty );
+
+export const formatGridTrackRepeat = ( count: number ): string | null => {
+	if ( ! Number.isFinite( count ) || count < 1 ) {
+		return null;
+	}
+
+	return `repeat(${ count }, 1fr)`;
+};

package/src/transformers/styles/grid-track-size-transformer.ts

@@ -0,0 +1,19 @@
+import { createTransformer } from '../create-transformer';
+import { formatGridTrackRepeat } from './grid-track-renderer';
+
+type GridTrackSize = {
+	size?: number | string;
+	unit?: string;
+};
+
+export const gridTrackSizeTransformer = createTransformer( ( value: GridTrackSize ) => {
+	if ( value.unit === 'custom' ) {
+		return value.size;
+	}
+
+	if ( value.unit === 'fr' ) {
+		return formatGridTrackRepeat( Math.trunc( Number( value.size ) ) );
+	}
+
+	return `${ value.size }${ value.unit }`;
+} );