@elementor/editor-canvas 3.35.0-357 → 3.35.0-359

package/dist/index.d.mts

@@ -2,6 +2,8 @@ import { V1Element, V1ElementConfig, V1ElementModelProps } from '@elementor/edit
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { Props, PropTypeKey, PropsSchema, AnyTransformable } from '@elementor/editor-props';
+import * as _elementor_utils from '@elementor/utils';
+import { StyleDefinitionState } from '@elementor/editor-styles';
 
 declare const BREAKPOINTS_SCHEMA_URI = "elementor://breakpoints/list";
 
@@ -132,6 +134,17 @@ type ElementLegacyType = {
 };
 declare function registerElementType(type: string, elementTypeGenerator: ElementLegacyType[keyof ElementLegacyType]): void;
 
+declare class RenderContext<TContext extends Record<string, unknown>> {
+    private key;
+    private context;
+    constructor(key: string, initialContext: TContext);
+    get(): TContext;
+    set(context: TContext): void;
+    update(updates: TContext): void;
+    delete(): void;
+    clear(): void;
+}
+
 type UnbrandedTransformer<TValue> = (value: TValue, options: {
     key: string;
     signal?: AbortSignal;
@@ -195,4 +208,37 @@ 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>>;
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+declare const UnknownStyleTypeError: {
+    new ({ cause, context }?: {
+        cause?: _elementor_utils.ElementorErrorOptions["cause"];
+        context?: {
+            type: string;
+        } | undefined;
+    } | undefined): {
+        readonly context: _elementor_utils.ElementorErrorOptions["context"];
+        readonly code: _elementor_utils.ElementorErrorOptions["code"];
+        name: string;
+        message: string;
+        stack?: string;
+        cause?: unknown;
+    };
+    isError(error: unknown): error is Error;
+};
+declare const UnknownStyleStateError: {
+    new ({ cause, context }?: {
+        cause?: _elementor_utils.ElementorErrorOptions["cause"];
+        context?: {
+            state: StyleDefinitionState;
+        } | undefined;
+    } | undefined): {
+        readonly context: _elementor_utils.ElementorErrorOptions["context"];
+        readonly code: _elementor_utils.ElementorErrorOptions["code"];
+        name: string;
+        message: string;
+        stack?: string;
+        cause?: unknown;
+    };
+    isError(error: unknown): error is Error;
+};
+
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, RenderContext, STYLE_SCHEMA_URI, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import { V1Element, V1ElementConfig, V1ElementModelProps } from '@elementor/edit
 import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { Props, PropTypeKey, PropsSchema, AnyTransformable } from '@elementor/editor-props';
+import * as _elementor_utils from '@elementor/utils';
+import { StyleDefinitionState } from '@elementor/editor-styles';
 
 declare const BREAKPOINTS_SCHEMA_URI = "elementor://breakpoints/list";
 
@@ -132,6 +134,17 @@ type ElementLegacyType = {
 };
 declare function registerElementType(type: string, elementTypeGenerator: ElementLegacyType[keyof ElementLegacyType]): void;
 
+declare class RenderContext<TContext extends Record<string, unknown>> {
+    private key;
+    private context;
+    constructor(key: string, initialContext: TContext);
+    get(): TContext;
+    set(context: TContext): void;
+    update(updates: TContext): void;
+    delete(): void;
+    clear(): void;
+}
+
 type UnbrandedTransformer<TValue> = (value: TValue, options: {
     key: string;
     signal?: AbortSignal;
@@ -195,4 +208,37 @@ 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>>;
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+declare const UnknownStyleTypeError: {
+    new ({ cause, context }?: {
+        cause?: _elementor_utils.ElementorErrorOptions["cause"];
+        context?: {
+            type: string;
+        } | undefined;
+    } | undefined): {
+        readonly context: _elementor_utils.ElementorErrorOptions["context"];
+        readonly code: _elementor_utils.ElementorErrorOptions["code"];
+        name: string;
+        message: string;
+        stack?: string;
+        cause?: unknown;
+    };
+    isError(error: unknown): error is Error;
+};
+declare const UnknownStyleStateError: {
+    new ({ cause, context }?: {
+        cause?: _elementor_utils.ElementorErrorOptions["cause"];
+        context?: {
+            state: StyleDefinitionState;
+        } | undefined;
+    } | undefined): {
+        readonly context: _elementor_utils.ElementorErrorOptions["context"];
+        readonly code: _elementor_utils.ElementorErrorOptions["code"];
+        name: string;
+        message: string;
+        stack?: string;
+        cause?: unknown;
+    };
+    isError(error: unknown): error is Error;
+};
+
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, RenderContext, STYLE_SCHEMA_URI, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.js

@@ -32,7 +32,10 @@ var index_exports = {};
 __export(index_exports, {
   BREAKPOINTS_SCHEMA_URI: () => BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI: () => DOCUMENT_STRUCTURE_URI,
+  RenderContext: () => RenderContext,
   STYLE_SCHEMA_URI: () => STYLE_SCHEMA_URI,
+  UnknownStyleStateError: () => UnknownStyleStateError,
+  UnknownStyleTypeError: () => UnknownStyleTypeError,
   WIDGET_SCHEMA_URI: () => WIDGET_SCHEMA_URI,
   createPropsResolver: () => createPropsResolver,
   createTemplatedElementView: () => createTemplatedElementView,
@@ -861,16 +864,8 @@ function createStyleWrapper(value = "", wrapper) {
     },
     withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
     withState: (state) => {
-      if (!state) {
-        return createStyleWrapper(value, wrapper);
-      }
-      if ((0, import_editor_styles3.isClassState)(state)) {
-        return createStyleWrapper(`${value}.${state}`, wrapper);
-      }
-      if ((0, import_editor_styles3.isPseudoState)(state)) {
-        return createStyleWrapper(`${value}:${state}`, wrapper);
-      }
-      throw new UnknownStyleStateError({ context: { state } });
+      const selector = (0, import_editor_styles3.getSelectorWithState)(value, state);
+      return createStyleWrapper(selector, wrapper);
     },
     withMediaQuery: (breakpoint) => {
       if (!breakpoint?.type) {
@@ -3506,6 +3501,35 @@ function init() {
   );
 }
 
+// src/renderers/render-context.ts
+var RenderContext = class {
+  key;
+  context = /* @__PURE__ */ new Map();
+  constructor(key, initialContext) {
+    this.key = key;
+    this.context.set(this.key, initialContext);
+  }
+  get() {
+    return this.context.get(this.key);
+  }
+  set(context) {
+    this.context.set(this.key, context);
+  }
+  update(updates) {
+    const currentContext = this.context.get(this.key);
+    if (!currentContext) {
+      return this.set(updates);
+    }
+    this.context.set(this.key, { ...currentContext, ...updates });
+  }
+  delete() {
+    this.context.delete(this.key);
+  }
+  clear() {
+    this.context.clear();
+  }
+};
+
 // src/sync/drag-element-from-panel.ts
 var startDragElementFromPanel = (props) => {
   const channels = getElementorChannels();
@@ -3544,7 +3568,10 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 0 && (module.exports = {
   BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI,
+  RenderContext,
   STYLE_SCHEMA_URI,
+  UnknownStyleStateError,
+  UnknownStyleTypeError,
   WIDGET_SCHEMA_URI,
   createPropsResolver,
   createTemplatedElementView,

package/dist/index.mjs

@@ -587,7 +587,7 @@ function getLinkAttrs(el) {
 // src/hooks/use-style-items.ts
 import { useEffect as useEffect6, useMemo as useMemo4, useState as useState3 } from "react";
 import { getBreakpoints } from "@elementor/editor-responsive";
-import { isClassState as isClassState2 } from "@elementor/editor-styles";
+import { isClassState } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 
@@ -774,8 +774,7 @@ import { useBreakpointsMap } from "@elementor/editor-responsive";
 
 // src/renderers/create-styles-renderer.ts
 import {
-  isClassState,
-  isPseudoState
+  getSelectorWithState
 } from "@elementor/editor-styles";
 import { decodeString } from "@elementor/utils";
 
@@ -824,16 +823,8 @@ function createStyleWrapper(value = "", wrapper) {
     },
     withPrefix: (prefix) => createStyleWrapper([prefix, value].filter(Boolean).join(" "), wrapper),
     withState: (state) => {
-      if (!state) {
-        return createStyleWrapper(value, wrapper);
-      }
-      if (isClassState(state)) {
-        return createStyleWrapper(`${value}.${state}`, wrapper);
-      }
-      if (isPseudoState(state)) {
-        return createStyleWrapper(`${value}:${state}`, wrapper);
-      }
-      throw new UnknownStyleStateError({ context: { state } });
+      const selector = getSelectorWithState(value, state);
+      return createStyleWrapper(selector, wrapper);
     },
     withMediaQuery: (breakpoint) => {
       if (!breakpoint?.type) {
@@ -927,10 +918,10 @@ function sortByBreakpoint(breakpointsOrder) {
   return ({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
 }
 function sortByStateType({ state: stateA }, { state: stateB }) {
-  if (isClassState2(stateA) && !isClassState2(stateB)) {
+  if (isClassState(stateA) && !isClassState(stateB)) {
     return -1;
   }
-  if (!isClassState2(stateA) && isClassState2(stateB)) {
+  if (!isClassState(stateA) && isClassState(stateB)) {
     return 1;
   }
   return 0;
@@ -3501,6 +3492,35 @@ function init() {
   );
 }
 
+// src/renderers/render-context.ts
+var RenderContext = class {
+  key;
+  context = /* @__PURE__ */ new Map();
+  constructor(key, initialContext) {
+    this.key = key;
+    this.context.set(this.key, initialContext);
+  }
+  get() {
+    return this.context.get(this.key);
+  }
+  set(context) {
+    this.context.set(this.key, context);
+  }
+  update(updates) {
+    const currentContext = this.context.get(this.key);
+    if (!currentContext) {
+      return this.set(updates);
+    }
+    this.context.set(this.key, { ...currentContext, ...updates });
+  }
+  delete() {
+    this.context.delete(this.key);
+  }
+  clear() {
+    this.context.clear();
+  }
+};
+
 // src/sync/drag-element-from-panel.ts
 var startDragElementFromPanel = (props) => {
   const channels = getElementorChannels();
@@ -3538,7 +3558,10 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 export {
   BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI,
+  RenderContext,
   STYLE_SCHEMA_URI,
+  UnknownStyleStateError,
+  UnknownStyleTypeError,
   WIDGET_SCHEMA_URI,
   createPropsResolver,
   createTemplatedElementView,

package/package.json

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

package/src/index.ts

@@ -9,6 +9,7 @@ export {
 } from './legacy/create-templated-element-type';
 export { registerElementType } from './legacy/init-legacy-views';
 export * from './legacy/types';
+export { RenderContext } from './renderers/render-context';
 export { createPropsResolver, type PropsResolver } from './renderers/create-props-resolver';
 export { settingsTransformersRegistry } from './settings-transformers-registry';
 export { styleTransformersRegistry } from './style-transformers-registry';
@@ -20,3 +21,4 @@ export * from './legacy/types';
 export { createTransformer } from './transformers/create-transformer';
 export { createTransformersRegistry } from './transformers/create-transformers-registry';
 export { type AnyTransformer } from './transformers/types';
+export { UnknownStyleTypeError, UnknownStyleStateError } from './renderers/errors';

package/src/renderers/__tests__/__snapshots__/create-styles-renderer.test.ts.snap

@@ -6,7 +6,7 @@ exports[`renderStyles should render styles 1`] = `
     "breakpoint": "desktop",
     "id": "test",
     "state": null,
-    "value": ".test{font-size:10px;}.test:hover{font-size:20px;}@media(max-width:992px){.test{font-size:30px;}}@media(max-width:768px){.test:focus{font-size:40px;}}",
+    "value": ".test{font-size:10px;}.test:hover,.test:focus-visible{font-size:20px;}@media(max-width:992px){.test{font-size:30px;}}@media(max-width:768px){.test:focus{font-size:40px;}}",
   },
   {
     "breakpoint": "desktop",

package/src/renderers/create-styles-renderer.ts

@@ -2,8 +2,7 @@ import type { Props } from '@elementor/editor-props';
 import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
 import {
 	type CustomCss,
-	isClassState,
-	isPseudoState,
+	getSelectorWithState,
 	type StyleDefinition,
 	type StyleDefinitionState,
 	type StyleDefinitionType,
@@ -11,7 +10,7 @@ import {
 import { decodeString } from '@elementor/utils';
 
 import { type PropsResolver } from './create-props-resolver';
-import { UnknownStyleStateError, UnknownStyleTypeError } from './errors';
+import { UnknownStyleTypeError } from './errors';
 
 export type StyleItem = {
 	id: string;
@@ -92,20 +91,11 @@ function createStyleWrapper( value: string = '', wrapper?: ( css: string ) => st
 			createStyleWrapper( [ prefix, value ].filter( Boolean ).join( ' ' ), wrapper ),
 
 		withState: ( state: StyleDefinitionState ) => {
-			if ( ! state ) {
-				return createStyleWrapper( value, wrapper );
-			}
-
-			if ( isClassState( state ) ) {
-				return createStyleWrapper( `${ value }.${ state }`, wrapper );
-			}
+			const selector = getSelectorWithState( value, state );
 
-			if ( isPseudoState( state ) ) {
-				return createStyleWrapper( `${ value }:${ state }`, wrapper );
-			}
-
-			throw new UnknownStyleStateError( { context: { state } } );
+			return createStyleWrapper( selector, wrapper );
 		},
+
 		withMediaQuery: ( breakpoint: Breakpoint | null ) => {
 			if ( ! breakpoint?.type ) {
 				return createStyleWrapper( value, wrapper );

package/src/renderers/render-context.ts

@@ -0,0 +1,35 @@
+export class RenderContext< TContext extends Record< string, unknown > > {
+	private key: string;
+	private context = new Map< string, TContext >();
+
+	public constructor( key: string, initialContext: TContext ) {
+		this.key = key;
+		this.context.set( this.key, initialContext );
+	}
+
+	public get(): TContext {
+		return this.context.get( this.key ) as TContext;
+	}
+
+	public set( context: TContext ) {
+		this.context.set( this.key, context );
+	}
+
+	public update( updates: TContext ) {
+		const currentContext = this.context.get( this.key );
+
+		if ( ! currentContext ) {
+			return this.set( updates );
+		}
+
+		this.context.set( this.key, { ...currentContext, ...updates } );
+	}
+
+	public delete() {
+		this.context.delete( this.key );
+	}
+
+	public clear() {
+		this.context.clear();
+	}
+}