@elementor/editor-elements 0.4.1 → 0.5.0

package/dist/index.mjs

@@ -55,7 +55,11 @@ var useElementSetting = (elementId, settingKey) => {
 };
 
 // src/hooks/use-element-style-props.ts
-import { __privateUseListenTo as useListenTo3, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
+import { getVariantByMeta } from "@elementor/editor-styles";
+import { __privateUseListenTo as useListenTo3, windowEvent as windowEvent2 } from "@elementor/editor-v1-adapters";
+
+// src/styles/consts.ts
+var ELEMENT_STYLE_CHANGE_EVENT = "elementor/editor-v2/editor-elements/style";
 
 // src/sync/get-element-styles.ts
 var getElementStyles = (elementID) => {
@@ -71,7 +75,7 @@ function useElementStyleProps({
   propNames
 }) {
   return useListenTo3(
-    commandEndEvent2("document/atomic-widgets/styles"),
+    windowEvent2(ELEMENT_STYLE_CHANGE_EVENT),
     () => {
       if (!styleDefID) {
         return null;
@@ -89,24 +93,17 @@ function useElementStyleProps({
     [elementID, styleDefID, JSON.stringify(propNames), meta]
   );
 }
-function getVariantByMeta(styleDef, meta) {
-  return styleDef.variants.find((variant) => {
-    return variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;
-  });
-}
 
 // src/hooks/use-element-styles.ts
-import { __privateUseListenTo as useListenTo4, commandEndEvent as commandEndEvent3 } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo4, windowEvent as windowEvent3 } from "@elementor/editor-v1-adapters";
 function useElementStyles(elementId) {
-  return useListenTo4(
-    commandEndEvent3("document/atomic-widgets/styles"),
-    () => getElementStyles(elementId) ?? {},
-    [elementId]
-  );
+  return useListenTo4(windowEvent3(ELEMENT_STYLE_CHANGE_EVENT), () => getElementStyles(elementId) ?? {}, [
+    elementId
+  ]);
 }
 
 // src/hooks/use-element-type.ts
-import { __privateUseListenTo as useListenTo5, commandEndEvent as commandEndEvent4 } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo5, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
 
 // src/sync/get-widgets-cache.ts
 function getWidgetsCache() {
@@ -117,7 +114,7 @@ function getWidgetsCache() {
 // src/hooks/use-element-type.ts
 function useElementType(type) {
   return useListenTo5(
-    commandEndEvent4("editor/documents/load"),
+    commandEndEvent2("editor/documents/load"),
     () => {
       if (!type) {
         return null;
@@ -142,7 +139,7 @@ function useElementType(type) {
 }
 
 // src/hooks/use-selected-element.ts
-import { __privateUseListenTo as useListenTo6, commandEndEvent as commandEndEvent5 } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo6, commandEndEvent as commandEndEvent3 } from "@elementor/editor-v1-adapters";
 
 // src/sync/get-selected-elements.ts
 function getSelectedElements() {
@@ -163,7 +160,7 @@ function getSelectedElements() {
 // src/hooks/use-selected-element.ts
 function useSelectedElement() {
   const elements = useListenTo6(
-    [commandEndEvent5("document/elements/select"), commandEndEvent5("document/elements/deselect")],
+    [commandEndEvent3("document/elements/select"), commandEndEvent3("document/elements/deselect")],
     getSelectedElements
   );
   const [element] = elements;
@@ -175,10 +172,10 @@ function useSelectedElement() {
 }
 
 // src/hooks/use-parent-element.ts
-import { __privateUseListenTo as useListenTo7, commandEndEvent as commandEndEvent6 } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo7, commandEndEvent as commandEndEvent4 } from "@elementor/editor-v1-adapters";
 function useParentElement(elementId) {
   return useListenTo7(
-    [commandEndEvent6("document/elements/create")],
+    [commandEndEvent4("document/elements/create")],
     () => {
       if (!elementId) {
         return null;
@@ -215,41 +212,160 @@ var isElementInContainer = (element, container) => {
   return false;
 };
 
-// src/sync/update-settings.ts
-import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
-var updateSettings = ({ id, props }) => {
+// src/sync/update-element-settings.ts
+import { __privateRunCommandSync as runCommandSync } from "@elementor/editor-v1-adapters";
+var updateElementSettings = ({ id, props, withHistory = true }) => {
   const container = getContainer(id);
-  runCommand("document/elements/settings", {
+  const args = {
     container,
-    settings: {
-      ...props
-    }
-  });
+    settings: { ...props }
+  };
+  if (withHistory) {
+    runCommandSync("document/elements/settings", args);
+  } else {
+    runCommandSync("document/elements/set-settings", args, { internal: true });
+  }
 };
 
-// src/sync/update-styles.ts
-import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
-var updateStyle = async ({ elementID, styleDefID, meta, props, bind, label }) => {
-  const container = getContainer(elementID);
-  await runCommand2("document/atomic-widgets/styles", {
-    container,
-    styleDefID,
-    bind,
-    meta,
-    props,
-    label
+// src/styles/create-element-style.ts
+import { classesPropTypeUtil as classesPropTypeUtil2 } from "@elementor/editor-props";
+import { generateId } from "@elementor/editor-styles";
+
+// src/styles/mutate-element-styles.ts
+import { classesPropTypeUtil } from "@elementor/editor-props";
+
+// src/styles/errors.ts
+import { createError } from "@elementor/utils";
+var ElementNotFoundError = createError({
+  code: "element_not_found",
+  message: "Element not found."
+});
+var StyleNotFoundError = createError({
+  code: "style_not_found",
+  message: "Style not found."
+});
+
+// src/styles/mutate-element-styles.ts
+function mutateElementStyles(elementId, mutator) {
+  const container = getContainer(elementId);
+  if (!container) {
+    throw new ElementNotFoundError({ context: { elementId } });
+  }
+  const styles = mutateStyles(container, mutator);
+  removeNonExistingClasses(container, styles);
+  dispatchChangeEvent();
+  return styles;
+}
+function mutateStyles(container, mutator) {
+  const styles = structuredClone(container.model.get("styles")) ?? {};
+  const entries = Object.entries(mutator(styles)).map(([styleId, style]) => {
+    style.variants = removeEmptyVariants(style);
+    return [styleId, style];
+  }).filter(([, style]) => {
+    return !isStyleEmpty(style);
   });
-};
+  const mutatedStyles = Object.fromEntries(entries);
+  container.model.set("styles", mutatedStyles);
+  return mutatedStyles;
+}
+function removeEmptyVariants(style) {
+  return style.variants.filter(({ props }) => Object.keys(props).length > 0);
+}
+function isStyleEmpty(style) {
+  return style.variants.length === 0;
+}
+function removeNonExistingClasses(container, styles) {
+  const existingStylesIds = Object.keys(styles);
+  const classesProps = structuredClone(getClassesProps(container));
+  classesProps.forEach(([, prop]) => {
+    prop.value = prop.value.filter((value) => existingStylesIds.includes(value));
+  });
+  updateElementSettings({
+    id: container.id,
+    props: Object.fromEntries(classesProps),
+    withHistory: false
+  });
+}
+function getClassesProps(container) {
+  return Object.entries(container.settings.toJSON()).filter((prop) => {
+    const [, value] = prop;
+    return classesPropTypeUtil.isValid(value);
+  });
+}
+function dispatchChangeEvent() {
+  window.dispatchEvent(new CustomEvent(ELEMENT_STYLE_CHANGE_EVENT));
+}
+
+// src/styles/create-element-style.ts
+function createElementStyle({ elementId, classesProp, label, meta, props }) {
+  mutateElementStyles(elementId, (styles) => {
+    const id = generateId(`e-${elementId}-`, Object.keys(styles));
+    styles[id] = {
+      id,
+      label,
+      type: "class",
+      variants: [{ meta, props }]
+    };
+    addStyleToClassesProp(elementId, classesProp, id);
+    return styles;
+  });
+}
+function addStyleToClassesProp(elementId, classesProp, styleId) {
+  const base = getElementSetting(elementId, classesProp);
+  const classesPropValue = classesPropTypeUtil2.create(
+    (prev) => {
+      return [...prev ?? [], styleId];
+    },
+    { base }
+  );
+  updateElementSettings({
+    id: elementId,
+    props: {
+      [classesProp]: classesPropValue
+    },
+    withHistory: false
+  });
+}
+
+// src/styles/update-element-style.ts
+import { getVariantByMeta as getVariantByMeta2 } from "@elementor/editor-styles";
+function updateElementStyle(args) {
+  mutateElementStyles(args.elementId, (styles) => {
+    const style = styles[args.styleId];
+    if (!style) {
+      throw new StyleNotFoundError({ context: { styleId: args.styleId } });
+    }
+    let variant = getVariantByMeta2(style, args.meta);
+    if (!variant) {
+      variant = { meta: args.meta, props: {} };
+      style.variants.push(variant);
+    }
+    variant.props = mergeVariantProps(variant, args.props);
+    return styles;
+  });
+}
+function mergeVariantProps(variant, props) {
+  const finalProps = { ...variant.props };
+  Object.entries(props).forEach(([key, value]) => {
+    if (value === null || value === void 0) {
+      delete finalProps[key];
+    } else {
+      finalProps[key] = value;
+    }
+  });
+  return finalProps;
+}
 export {
+  ELEMENT_STYLE_CHANGE_EVENT,
+  createElementStyle,
   getElementSetting,
   getElementStyles,
   getElements,
   getSelectedElements,
-  getVariantByMeta,
   getWidgetsCache,
   isElementInContainer,
-  updateSettings,
-  updateStyle,
+  updateElementSettings,
+  updateElementStyle,
   useElementSetting,
   useElementStyleProps,
   useElementStyles,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/use-elements-dom-ref.ts","../src/sync/get-current-document-container.ts","../src/hooks/use-element-setting.ts","../src/sync/get-container.ts","../src/sync/get-element-setting.ts","../src/hooks/use-element-style-props.ts","../src/sync/get-element-styles.ts","../src/hooks/use-element-styles.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/hooks/use-selected-element.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-parent-element.ts","../src/sync/get-elements.ts","../src/sync/is-element-in-container.ts","../src/sync/update-settings.ts","../src/sync/update-styles.ts"],"sourcesContent":["import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport getCurrentDocumentContainer from '../sync/get-current-document-container';\n\nconst ELEMENTS_DATA_ATTR = 'data-atomic';\n\nexport function useElementsDomRef(): HTMLElement[] {\n\treturn useListenTo(\n\t\t[\n\t\t\twindowEvent( 'elementor/preview/atomic-widget/render' ),\n\t\t\twindowEvent( 'elementor/preview/atomic-widget/destroy' ),\n\t\t\twindowEvent( 'elementor/editor/element-rendered' ),\n\t\t\twindowEvent( 'elementor/editor/element-destroyed' ),\n\t\t],\n\t\t() => getElementsDom()\n\t);\n}\n\nfunction getElementsDom(): HTMLElement[] {\n\tconst root = getCurrentDocumentContainer();\n\n\tif ( ! root?.view ) {\n\t\treturn [];\n\t}\n\n\treturn [ ...root.view.el.querySelectorAll< HTMLElement >( `[${ ELEMENTS_DATA_ATTR }]` ) ];\n}\n","import { type ExtendedWindow } from './types';\n\nexport default function getCurrentDocumentContainer() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.documents?.getCurrent?.()?.container ?? null;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getElementSetting } from '../sync/get-element-setting';\nimport { type ElementID } from '../types';\n\nexport const useElementSetting = < TValue >( elementId: ElementID, settingKey: string ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/set-settings' ),\n\t\t() => getElementSetting< TValue >( elementId, settingKey ),\n\t\t[ elementId, settingKey ]\n\t);\n};\n","import { type ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { type ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const getElementSetting = < TValue >( elementId: ElementID, settingKey: string ): TValue | null => {\n\tconst container = getContainer( elementId );\n\tconst value = container?.settings?.get( settingKey ) as TValue;\n\n\treturn value ?? null;\n};\n","import { type Props } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleVariant } from '@elementor/editor-styles';\nimport { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { type ElementID } from '../types';\n\nexport type UseElementStylePropsArgs< T extends Props > = {\n\telementID: ElementID;\n\tstyleDefID: StyleDefinitionID | null;\n\tmeta: StyleVariant[ 'meta' ];\n\tpropNames: Array< keyof T & string >;\n};\n\ntype NullableObjectValues< T extends Props > = {\n\t[ K in keyof T ]: T[ K ] | null;\n};\n\nexport function useElementStyleProps< T extends Props >( {\n\telementID,\n\tstyleDefID,\n\tmeta,\n\tpropNames,\n}: UseElementStylePropsArgs< T > ): NullableObjectValues< T > | null {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\tif ( ! styleDefID ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst styleDef = getElementStyles( elementID )?.[ styleDefID ];\n\n\t\t\tif ( ! styleDef ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( styleDef, meta );\n\n\t\t\treturn propNames.reduce< Record< string, unknown > >( ( acc, key ) => {\n\t\t\t\tacc[ key ] = variant?.props[ key ] ?? null;\n\n\t\t\t\treturn acc;\n\t\t\t}, {} ) as NullableObjectValues< T >;\n\t\t},\n\t\t[ elementID, styleDefID, JSON.stringify( propNames ), meta ]\n\t);\n}\n\nexport function getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {\n\treturn styleDef.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import { type StyleDefinition } from '@elementor/editor-styles';\n\nimport { type ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { type ElementID } from '../types';\n\nexport function useElementStyles( elementId: ElementID ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => getElementStyles( elementId ) ?? {},\n\t\t[ elementId ]\n\t);\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getWidgetsCache } from '../sync/get-widgets-cache';\nimport { type ElementType } from '../types';\n\nexport function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tif ( ! elementType?.atomic_props_schema ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\tpropsSchema: elementType.atomic_props_schema,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { type ExtendedWindow } from './types';\n\nexport function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getSelectedElements } from '../sync/get-selected-elements';\nimport { useElementType } from './use-element-type';\n\nexport function useSelectedElement() {\n\tconst elements = useListenTo(\n\t\t[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\n\t\tgetSelectedElements\n\t);\n\n\tconst [ element ] = elements;\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn { element: null, elementType: null };\n\t}\n\n\treturn { element, elementType };\n}\n","import { type Element } from '../types';\nimport { type ExtendedWindow } from './types';\n\nexport function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce< Element[] >( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type ExtendedWindow } from '../sync/types';\n\nexport function useParentElement( elementId: string | null ) {\n\treturn useListenTo(\n\t\t[ commandEndEvent( 'document/elements/create' ) ],\n\t\t() => {\n\t\t\tif ( ! elementId ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst extendedWindow = window as unknown as ExtendedWindow;\n\t\t\tconst element = extendedWindow?.elementor?.getContainer?.( elementId );\n\t\t\tif ( ! element ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn element.parent;\n\t\t},\n\t\t[ elementId ]\n\t);\n}\n","import { type ElementID } from '../types';\nimport getContainer from './get-container';\nimport getCurrentDocumentContainer from './get-current-document-container';\nimport { type V1Element } from './types';\n\nexport function getElements( root?: ElementID ): V1Element[] {\n\tconst container = root ? getContainer( root ) : getCurrentDocumentContainer();\n\n\tif ( ! container ) {\n\t\treturn [];\n\t}\n\n\tconst children = container.children?.flatMap( ( child ) => getElements( child.id ) ) ?? [];\n\n\treturn [ container, ...children ];\n}\n","import { type Element } from '../types';\nimport { type V1Element } from './types';\n\nexport const isElementInContainer = ( element: Element, container: V1Element ): boolean => {\n\tif ( container.model.get( 'id' ) === element.id && container.model.get( 'widgetType' ) === element.type ) {\n\t\treturn true;\n\t}\n\n\tif ( container.children && container.children.length > 0 ) {\n\t\treturn container.children.some( ( child ) => isElementInContainer( element, child ) );\n\t}\n\n\treturn false;\n};\n","import { type Props } from '@elementor/editor-props';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { type ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: ElementID; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import { type PropKey, type Props } from '@elementor/editor-props';\nimport { type StyleDefinitionID, type StyleVariant } from '@elementor/editor-styles';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { type ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport type UpdateStyleProps = {\n\telementID: ElementID;\n\tstyleDefID: StyleDefinitionID | null;\n\tmeta: StyleVariant[ 'meta' ];\n\tprops: Props;\n\tbind: PropKey;\n\tlabel?: string;\n};\n\nexport const updateStyle = async ( { elementID, styleDefID, meta, props, bind, label }: UpdateStyleProps ) => {\n\tconst container = getContainer( elementID );\n\n\tawait runCommand( 'document/atomic-widgets/styles', {\n\t\tcontainer,\n\t\tstyleDefID,\n\t\tbind,\n\t\tmeta,\n\t\tprops,\n\t\tlabel,\n\t} );\n};\n"],"mappings":"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","names":["useListenTo","useListenTo","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","runCommand","runCommand"]}
+{"version":3,"sources":["../src/hooks/use-elements-dom-ref.ts","../src/sync/get-current-document-container.ts","../src/hooks/use-element-setting.ts","../src/sync/get-container.ts","../src/sync/get-element-setting.ts","../src/hooks/use-element-style-props.ts","../src/styles/consts.ts","../src/sync/get-element-styles.ts","../src/hooks/use-element-styles.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/hooks/use-selected-element.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-parent-element.ts","../src/sync/get-elements.ts","../src/sync/is-element-in-container.ts","../src/sync/update-element-settings.ts","../src/styles/create-element-style.ts","../src/styles/mutate-element-styles.ts","../src/styles/errors.ts","../src/styles/update-element-style.ts"],"sourcesContent":["import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport getCurrentDocumentContainer from '../sync/get-current-document-container';\n\nconst ELEMENTS_DATA_ATTR = 'data-atomic';\n\nexport function useElementsDomRef(): HTMLElement[] {\n\treturn useListenTo(\n\t\t[\n\t\t\twindowEvent( 'elementor/preview/atomic-widget/render' ),\n\t\t\twindowEvent( 'elementor/preview/atomic-widget/destroy' ),\n\t\t\twindowEvent( 'elementor/editor/element-rendered' ),\n\t\t\twindowEvent( 'elementor/editor/element-destroyed' ),\n\t\t],\n\t\t() => getElementsDom()\n\t);\n}\n\nfunction getElementsDom(): HTMLElement[] {\n\tconst root = getCurrentDocumentContainer();\n\n\tif ( ! root?.view ) {\n\t\treturn [];\n\t}\n\n\treturn [ ...root.view.el.querySelectorAll< HTMLElement >( `[${ ELEMENTS_DATA_ATTR }]` ) ];\n}\n","import { type ExtendedWindow } from './types';\n\nexport default function getCurrentDocumentContainer() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.documents?.getCurrent?.()?.container ?? null;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getElementSetting } from '../sync/get-element-setting';\nimport { type ElementID } from '../types';\n\nexport const useElementSetting = < TValue >( elementId: ElementID, settingKey: string ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/set-settings' ),\n\t\t() => getElementSetting< TValue >( elementId, settingKey ),\n\t\t[ elementId, settingKey ]\n\t);\n};\n","import { type ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { type ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const getElementSetting = < TValue >( elementId: ElementID, settingKey: string ): TValue | null => {\n\tconst container = getContainer( elementId );\n\tconst value = container?.settings?.get( settingKey ) as TValue;\n\n\treturn value ?? null;\n};\n","import { type Props } from '@elementor/editor-props';\nimport { getVariantByMeta, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';\nimport { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport { ELEMENT_STYLE_CHANGE_EVENT } from '../styles/consts';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { type ElementID } from '../types';\n\nexport type UseElementStylePropsArgs< T extends Props > = {\n\telementID: ElementID;\n\tstyleDefID: StyleDefinitionID | null;\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tpropNames: Array< keyof T & string >;\n};\n\ntype NullableObjectValues< T extends Props > = {\n\t[ K in keyof T ]: T[ K ] | null;\n};\n\nexport function useElementStyleProps< T extends Props >( {\n\telementID,\n\tstyleDefID,\n\tmeta,\n\tpropNames,\n}: UseElementStylePropsArgs< T > ): NullableObjectValues< T > | null {\n\treturn useListenTo(\n\t\twindowEvent( ELEMENT_STYLE_CHANGE_EVENT ),\n\t\t() => {\n\t\t\tif ( ! styleDefID ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst styleDef = getElementStyles( elementID )?.[ styleDefID ];\n\n\t\t\tif ( ! styleDef ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( styleDef, meta );\n\n\t\t\treturn propNames.reduce< Record< string, unknown > >( ( acc, key ) => {\n\t\t\t\tacc[ key ] = variant?.props[ key ] ?? null;\n\n\t\t\t\treturn acc;\n\t\t\t}, {} ) as NullableObjectValues< T >;\n\t\t},\n\t\t[ elementID, styleDefID, JSON.stringify( propNames ), meta ]\n\t);\n}\n","export const ELEMENT_STYLE_CHANGE_EVENT = 'elementor/editor-v2/editor-elements/style';\n","import { type StyleDefinition } from '@elementor/editor-styles';\n\nimport { type ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport { ELEMENT_STYLE_CHANGE_EVENT } from '../styles/consts';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { type ElementID } from '../types';\n\nexport function useElementStyles( elementId: ElementID ) {\n\treturn useListenTo( windowEvent( ELEMENT_STYLE_CHANGE_EVENT ), () => getElementStyles( elementId ) ?? {}, [\n\t\telementId,\n\t] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getWidgetsCache } from '../sync/get-widgets-cache';\nimport { type ElementType } from '../types';\n\nexport function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tif ( ! elementType?.atomic_props_schema ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\tpropsSchema: elementType.atomic_props_schema,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { type ExtendedWindow } from './types';\n\nexport function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { getSelectedElements } from '../sync/get-selected-elements';\nimport { useElementType } from './use-element-type';\n\nexport function useSelectedElement() {\n\tconst elements = useListenTo(\n\t\t[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\n\t\tgetSelectedElements\n\t);\n\n\tconst [ element ] = elements;\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn { element: null, elementType: null };\n\t}\n\n\treturn { element, elementType };\n}\n","import { type Element } from '../types';\nimport { type ExtendedWindow } from './types';\n\nexport function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce< Element[] >( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type ExtendedWindow } from '../sync/types';\n\nexport function useParentElement( elementId: string | null ) {\n\treturn useListenTo(\n\t\t[ commandEndEvent( 'document/elements/create' ) ],\n\t\t() => {\n\t\t\tif ( ! elementId ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst extendedWindow = window as unknown as ExtendedWindow;\n\t\t\tconst element = extendedWindow?.elementor?.getContainer?.( elementId );\n\t\t\tif ( ! element ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn element.parent;\n\t\t},\n\t\t[ elementId ]\n\t);\n}\n","import { type ElementID } from '../types';\nimport getContainer from './get-container';\nimport getCurrentDocumentContainer from './get-current-document-container';\nimport { type V1Element } from './types';\n\nexport function getElements( root?: ElementID ): V1Element[] {\n\tconst container = root ? getContainer( root ) : getCurrentDocumentContainer();\n\n\tif ( ! container ) {\n\t\treturn [];\n\t}\n\n\tconst children = container.children?.flatMap( ( child ) => getElements( child.id ) ) ?? [];\n\n\treturn [ container, ...children ];\n}\n","import { type Element } from '../types';\nimport { type V1Element } from './types';\n\nexport const isElementInContainer = ( element: Element, container: V1Element ): boolean => {\n\tif ( container.model.get( 'id' ) === element.id && container.model.get( 'widgetType' ) === element.type ) {\n\t\treturn true;\n\t}\n\n\tif ( container.children && container.children.length > 0 ) {\n\t\treturn container.children.some( ( child ) => isElementInContainer( element, child ) );\n\t}\n\n\treturn false;\n};\n","import { type Props } from '@elementor/editor-props';\nimport { __privateRunCommandSync as runCommandSync } from '@elementor/editor-v1-adapters';\n\nimport { type ElementID } from '../types';\nimport getContainer from './get-container';\n\nexport type UpdateElementSettingsArgs = {\n\tid: ElementID;\n\tprops: Props;\n\twithHistory?: boolean;\n};\n\nexport const updateElementSettings = ( { id, props, withHistory = true }: UpdateElementSettingsArgs ) => {\n\tconst container = getContainer( id );\n\n\tconst args = {\n\t\tcontainer,\n\t\tsettings: { ...props },\n\t};\n\n\tif ( withHistory ) {\n\t\trunCommandSync( 'document/elements/settings', args );\n\t} else {\n\t\trunCommandSync( 'document/elements/set-settings', args, { internal: true } );\n\t}\n};\n","import { classesPropTypeUtil } from '@elementor/editor-props';\nimport { generateId, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';\n\nimport { getElementSetting } from '../sync/get-element-setting';\nimport { updateElementSettings } from '../sync/update-element-settings';\nimport { type ElementID } from '../types';\nimport { mutateElementStyles } from './mutate-element-styles';\n\nexport type CreateElementStyleArgs = {\n\telementId: ElementID;\n\tclassesProp: string;\n\tlabel: string;\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tprops: StyleDefinitionVariant[ 'props' ];\n};\n\nexport function createElementStyle( { elementId, classesProp, label, meta, props }: CreateElementStyleArgs ) {\n\tmutateElementStyles( elementId, ( styles ) => {\n\t\tconst id = generateId( `e-${ elementId }-`, Object.keys( styles ) );\n\n\t\tstyles[ id ] = {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\ttype: 'class',\n\t\t\tvariants: [ { meta, props } ],\n\t\t} satisfies StyleDefinition;\n\n\t\taddStyleToClassesProp( elementId, classesProp, id );\n\n\t\treturn styles;\n\t} );\n}\n\nfunction addStyleToClassesProp( elementId: ElementID, classesProp: string, styleId: string ) {\n\tconst base = getElementSetting( elementId, classesProp );\n\n\tconst classesPropValue = classesPropTypeUtil.create(\n\t\t( prev ) => {\n\t\t\treturn [ ...( prev ?? [] ), styleId ];\n\t\t},\n\t\t{ base }\n\t);\n\n\tupdateElementSettings( {\n\t\tid: elementId,\n\t\tprops: {\n\t\t\t[ classesProp ]: classesPropValue,\n\t\t},\n\t\twithHistory: false,\n\t} );\n}\n","import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\n\nimport getContainer from '../sync/get-container';\nimport { type V1Element } from '../sync/types';\nimport { updateElementSettings } from '../sync/update-element-settings';\nimport { type ElementID } from '../types';\nimport { ELEMENT_STYLE_CHANGE_EVENT } from './consts';\nimport { ElementNotFoundError } from './errors';\n\nexport type Mutator = ( styles: StyleDefinitionsMap ) => StyleDefinitionsMap;\n\nexport function mutateElementStyles( elementId: ElementID, mutator: Mutator ) {\n\tconst container = getContainer( elementId );\n\n\tif ( ! container ) {\n\t\tthrow new ElementNotFoundError( { context: { elementId } } );\n\t}\n\n\tconst styles = mutateStyles( container, mutator );\n\n\tremoveNonExistingClasses( container, styles );\n\n\tdispatchChangeEvent();\n\n\treturn styles;\n}\n\nfunction mutateStyles( container: V1Element, mutator: Mutator ) {\n\tconst styles: StyleDefinitionsMap = structuredClone( container.model.get( 'styles' ) ) ?? {};\n\n\tconst entries = Object.entries( mutator( styles ) )\n\t\t.map( ( [ styleId, style ] ) => {\n\t\t\tstyle.variants = removeEmptyVariants( style );\n\n\t\t\treturn [ styleId, style ] as const;\n\t\t} )\n\t\t.filter( ( [ , style ] ) => {\n\t\t\treturn ! isStyleEmpty( style );\n\t\t} );\n\n\tconst mutatedStyles = Object.fromEntries( entries );\n\n\tcontainer.model.set( 'styles', mutatedStyles );\n\n\treturn mutatedStyles;\n}\n\nfunction removeEmptyVariants( style: StyleDefinition ) {\n\treturn style.variants.filter( ( { props } ) => Object.keys( props ).length > 0 );\n}\n\nfunction isStyleEmpty( style: StyleDefinition ) {\n\treturn style.variants.length === 0;\n}\n\nfunction removeNonExistingClasses( container: V1Element, styles: StyleDefinitionsMap ) {\n\tconst existingStylesIds = Object.keys( styles );\n\tconst classesProps = structuredClone( getClassesProps( container ) );\n\n\tclassesProps.forEach( ( [ , prop ] ) => {\n\t\tprop.value = prop.value.filter( ( value ) => existingStylesIds.includes( value ) );\n\t} );\n\n\tupdateElementSettings( {\n\t\tid: container.id,\n\t\tprops: Object.fromEntries( classesProps ),\n\t\twithHistory: false,\n\t} );\n}\n\nfunction getClassesProps( container: V1Element ) {\n\treturn Object.entries( container.settings.toJSON() ).filter( ( prop ): prop is [ string, ClassesPropValue ] => {\n\t\tconst [ , value ] = prop;\n\n\t\treturn classesPropTypeUtil.isValid( value );\n\t} );\n}\n\nfunction dispatchChangeEvent() {\n\twindow.dispatchEvent( new CustomEvent( ELEMENT_STYLE_CHANGE_EVENT ) );\n}\n","import { createError } from '@elementor/utils';\n\nexport const ElementNotFoundError = createError< { elementId: string } >( {\n\tcode: 'element_not_found',\n\tmessage: 'Element not found.',\n} );\n\nexport const StyleNotFoundError = createError< { styleId: string } >( {\n\tcode: 'style_not_found',\n\tmessage: 'Style not found.',\n} );\n","import { type Props } from '@elementor/editor-props';\nimport { getVariantByMeta, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';\n\nimport { type ElementID } from '../types';\nimport { StyleNotFoundError } from './errors';\nimport { mutateElementStyles } from './mutate-element-styles';\n\nexport type UpdateElementStyleArgs = {\n\telementId: ElementID;\n\tstyleId: StyleDefinition[ 'id' ];\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tprops: StyleDefinitionVariant[ 'props' ];\n};\n\nexport function updateElementStyle( args: UpdateElementStyleArgs ) {\n\tmutateElementStyles( args.elementId, ( styles ) => {\n\t\tconst style = styles[ args.styleId ];\n\n\t\tif ( ! style ) {\n\t\t\tthrow new StyleNotFoundError( { context: { styleId: args.styleId } } );\n\t\t}\n\n\t\tlet variant = getVariantByMeta( style, args.meta );\n\n\t\tif ( ! variant ) {\n\t\t\tvariant = { meta: args.meta, props: {} };\n\n\t\t\tstyle.variants.push( variant );\n\t\t}\n\n\t\tvariant.props = mergeVariantProps( variant, args.props );\n\n\t\treturn styles;\n\t} );\n}\n\nfunction mergeVariantProps( variant: StyleDefinitionVariant, props: Props ) {\n\tconst finalProps = { ...variant.props };\n\n\tObject.entries( props ).forEach( ( [ key, value ] ) => {\n\t\tif ( value === null || value === undefined ) {\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\tdelete finalProps[ key ];\n\t\t} else {\n\t\t\tfinalProps[ key ] = value;\n\t\t}\n\t} );\n\n\treturn finalProps;\n}\n"],"mappings":"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","names":["useListenTo","useListenTo","useListenTo","windowEvent","useListenTo","windowEvent","useListenTo","windowEvent","useListenTo","windowEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","useListenTo","commandEndEvent","classesPropTypeUtil","classesPropTypeUtil","getVariantByMeta","getVariantByMeta"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-elements",
   "description": "This package contains the elements model for the Elementor editor",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,9 +40,10 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.7.0",
-    "@elementor/editor-styles": "0.5.1",
-    "@elementor/editor-v1-adapters": "0.8.5"
+    "@elementor/editor-props": "0.8.0",
+    "@elementor/editor-styles": "0.5.3",
+    "@elementor/editor-v1-adapters": "0.9.0",
+    "@elementor/utils": "0.3.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"

package/src/hooks/use-element-style-props.ts

@@ -1,14 +1,15 @@
 import { type Props } from '@elementor/editor-props';
-import { type StyleDefinition, type StyleDefinitionID, type StyleVariant } from '@elementor/editor-styles';
-import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+import { getVariantByMeta, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';
+import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';
 
+import { ELEMENT_STYLE_CHANGE_EVENT } from '../styles/consts';
 import { getElementStyles } from '../sync/get-element-styles';
 import { type ElementID } from '../types';
 
 export type UseElementStylePropsArgs< T extends Props > = {
 	elementID: ElementID;
 	styleDefID: StyleDefinitionID | null;
-	meta: StyleVariant[ 'meta' ];
+	meta: StyleDefinitionVariant[ 'meta' ];
 	propNames: Array< keyof T & string >;
 };
 
@@ -23,7 +24,7 @@ export function useElementStyleProps< T extends Props >( {
 	propNames,
 }: UseElementStylePropsArgs< T > ): NullableObjectValues< T > | null {
 	return useListenTo(
-		commandEndEvent( 'document/atomic-widgets/styles' ),
+		windowEvent( ELEMENT_STYLE_CHANGE_EVENT ),
 		() => {
 			if ( ! styleDefID ) {
 				return null;
@@ -46,9 +47,3 @@ export function useElementStyleProps< T extends Props >( {
 		[ elementID, styleDefID, JSON.stringify( propNames ), meta ]
 	);
 }
-
-export function getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {
-	return styleDef.variants.find( ( variant ) => {
-		return variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;
-	} );
-}

package/src/hooks/use-element-styles.ts

@@ -1,12 +1,11 @@
-import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';
 
+import { ELEMENT_STYLE_CHANGE_EVENT } from '../styles/consts';
 import { getElementStyles } from '../sync/get-element-styles';
 import { type ElementID } from '../types';
 
 export function useElementStyles( elementId: ElementID ) {
-	return useListenTo(
-		commandEndEvent( 'document/atomic-widgets/styles' ),
-		() => getElementStyles( elementId ) ?? {},
-		[ elementId ]
-	);
+	return useListenTo( windowEvent( ELEMENT_STYLE_CHANGE_EVENT ), () => getElementStyles( elementId ) ?? {}, [
+		elementId,
+	] );
 }

package/src/index.ts

@@ -5,7 +5,7 @@ export type { V1Element, V1ElementModelProps, V1ElementSettingsProps } from './s
 // hooks
 export { useElementsDomRef } from './hooks/use-elements-dom-ref';
 export { useElementSetting } from './hooks/use-element-setting';
-export { useElementStyleProps, getVariantByMeta } from './hooks/use-element-style-props';
+export { useElementStyleProps } from './hooks/use-element-style-props';
 export { useElementStyles } from './hooks/use-element-styles';
 export { useElementType } from './hooks/use-element-type';
 export { useSelectedElement } from './hooks/use-selected-element';
@@ -18,5 +18,8 @@ export { getElements } from './sync/get-elements';
 export { getSelectedElements } from './sync/get-selected-elements';
 export { getWidgetsCache } from './sync/get-widgets-cache';
 export { isElementInContainer } from './sync/is-element-in-container';
-export { updateSettings } from './sync/update-settings';
-export { updateStyle } from './sync/update-styles';
+export { updateElementSettings, type UpdateElementSettingsArgs } from './sync/update-element-settings';
+
+export { ELEMENT_STYLE_CHANGE_EVENT } from './styles/consts';
+export { createElementStyle, type CreateElementStyleArgs } from './styles/create-element-style';
+export { updateElementStyle, type UpdateElementStyleArgs } from './styles/update-element-style';

package/src/styles/consts.ts

@@ -0,0 +1 @@
+export const ELEMENT_STYLE_CHANGE_EVENT = 'elementor/editor-v2/editor-elements/style';

package/src/styles/create-element-style.ts

@@ -0,0 +1,51 @@
+import { classesPropTypeUtil } from '@elementor/editor-props';
+import { generateId, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
+
+import { getElementSetting } from '../sync/get-element-setting';
+import { updateElementSettings } from '../sync/update-element-settings';
+import { type ElementID } from '../types';
+import { mutateElementStyles } from './mutate-element-styles';
+
+export type CreateElementStyleArgs = {
+	elementId: ElementID;
+	classesProp: string;
+	label: string;
+	meta: StyleDefinitionVariant[ 'meta' ];
+	props: StyleDefinitionVariant[ 'props' ];
+};
+
+export function createElementStyle( { elementId, classesProp, label, meta, props }: CreateElementStyleArgs ) {
+	mutateElementStyles( elementId, ( styles ) => {
+		const id = generateId( `e-${ elementId }-`, Object.keys( styles ) );
+
+		styles[ id ] = {
+			id,
+			label,
+			type: 'class',
+			variants: [ { meta, props } ],
+		} satisfies StyleDefinition;
+
+		addStyleToClassesProp( elementId, classesProp, id );
+
+		return styles;
+	} );
+}
+
+function addStyleToClassesProp( elementId: ElementID, classesProp: string, styleId: string ) {
+	const base = getElementSetting( elementId, classesProp );
+
+	const classesPropValue = classesPropTypeUtil.create(
+		( prev ) => {
+			return [ ...( prev ?? [] ), styleId ];
+		},
+		{ base }
+	);
+
+	updateElementSettings( {
+		id: elementId,
+		props: {
+			[ classesProp ]: classesPropValue,
+		},
+		withHistory: false,
+	} );
+}

package/src/styles/errors.ts

@@ -0,0 +1,11 @@
+import { createError } from '@elementor/utils';
+
+export const ElementNotFoundError = createError< { elementId: string } >( {
+	code: 'element_not_found',
+	message: 'Element not found.',
+} );
+
+export const StyleNotFoundError = createError< { styleId: string } >( {
+	code: 'style_not_found',
+	message: 'Style not found.',
+} );

package/src/styles/mutate-element-styles.ts

@@ -0,0 +1,82 @@
+import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
+import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';
+
+import getContainer from '../sync/get-container';
+import { type V1Element } from '../sync/types';
+import { updateElementSettings } from '../sync/update-element-settings';
+import { type ElementID } from '../types';
+import { ELEMENT_STYLE_CHANGE_EVENT } from './consts';
+import { ElementNotFoundError } from './errors';
+
+export type Mutator = ( styles: StyleDefinitionsMap ) => StyleDefinitionsMap;
+
+export function mutateElementStyles( elementId: ElementID, mutator: Mutator ) {
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		throw new ElementNotFoundError( { context: { elementId } } );
+	}
+
+	const styles = mutateStyles( container, mutator );
+
+	removeNonExistingClasses( container, styles );
+
+	dispatchChangeEvent();
+
+	return styles;
+}
+
+function mutateStyles( container: V1Element, mutator: Mutator ) {
+	const styles: StyleDefinitionsMap = structuredClone( container.model.get( 'styles' ) ) ?? {};
+
+	const entries = Object.entries( mutator( styles ) )
+		.map( ( [ styleId, style ] ) => {
+			style.variants = removeEmptyVariants( style );
+
+			return [ styleId, style ] as const;
+		} )
+		.filter( ( [ , style ] ) => {
+			return ! isStyleEmpty( style );
+		} );
+
+	const mutatedStyles = Object.fromEntries( entries );
+
+	container.model.set( 'styles', mutatedStyles );
+
+	return mutatedStyles;
+}
+
+function removeEmptyVariants( style: StyleDefinition ) {
+	return style.variants.filter( ( { props } ) => Object.keys( props ).length > 0 );
+}
+
+function isStyleEmpty( style: StyleDefinition ) {
+	return style.variants.length === 0;
+}
+
+function removeNonExistingClasses( container: V1Element, styles: StyleDefinitionsMap ) {
+	const existingStylesIds = Object.keys( styles );
+	const classesProps = structuredClone( getClassesProps( container ) );
+
+	classesProps.forEach( ( [ , prop ] ) => {
+		prop.value = prop.value.filter( ( value ) => existingStylesIds.includes( value ) );
+	} );
+
+	updateElementSettings( {
+		id: container.id,
+		props: Object.fromEntries( classesProps ),
+		withHistory: false,
+	} );
+}
+
+function getClassesProps( container: V1Element ) {
+	return Object.entries( container.settings.toJSON() ).filter( ( prop ): prop is [ string, ClassesPropValue ] => {
+		const [ , value ] = prop;
+
+		return classesPropTypeUtil.isValid( value );
+	} );
+}
+
+function dispatchChangeEvent() {
+	window.dispatchEvent( new CustomEvent( ELEMENT_STYLE_CHANGE_EVENT ) );
+}