@elementor/editor-styles-repository 0.5.0 → 0.7.0

package/.turbo/turbo-build.log

@@ -1,22 +1,22 @@
 
-> @elementor/editor-styles-repository@0.5.0 build
+> @elementor/editor-styles-repository@0.7.0 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
 CLI Using tsconfig: ../../../tsconfig.json
-CLI tsup v8.3.5
+CLI tsup v8.4.0
 CLI Using tsup config: /home/runner/work/elementor-packages/elementor-packages/tsup.build.ts
 CLI Target: esnext
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-CJS dist/index.js     4.69 KB
-CJS dist/index.js.map 8.12 KB
-CJS ⚡️ Build success in 55ms
-ESM dist/index.mjs     3.31 KB
-ESM dist/index.mjs.map 8.04 KB
-ESM ⚡️ Build success in 55ms
+CJS dist/index.js     6.15 KB
+CJS dist/index.js.map 10.97 KB
+CJS ⚡️ Build success in 71ms
+ESM dist/index.mjs     4.71 KB
+ESM dist/index.mjs.map 10.88 KB
+ESM ⚡️ Build success in 80ms
 DTS Build start
-DTS ⚡️ Build success in 4346ms
-DTS dist/index.d.mts 1.84 KB
-DTS dist/index.d.ts  1.84 KB
+DTS ⚡️ Build success in 4771ms
+DTS dist/index.d.mts 2.15 KB
+DTS dist/index.d.ts  2.15 KB

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @elementor/editor-styles-repository
 
+## 0.7.0
+
+### Minor Changes
+
+- 188069d: Added global classes reorder support.
+- 4ed562a: Support renaming label in classes manager.
+- ebd9676: Added delete global class action.
+
+### Patch Changes
+
+- e6c904a: Make global classes state changes synchronous
+- efdadea: Create validation utils in style repository
+- da38fa9: Remove unused exports and add missing dependencies.
+- ffad70a: Fix base styles rendring
+- ad6fde0: Support history actions in style changes
+- Updated dependencies [c9133d7]
+- Updated dependencies [86863c1]
+- Updated dependencies [e441663]
+- Updated dependencies [da38fa9]
+- Updated dependencies [9ca4eab]
+- Updated dependencies [15c964f]
+- Updated dependencies [ad6fde0]
+- Updated dependencies [b8e2a85]
+  - @elementor/editor-props@0.9.0
+  - @elementor/editor-elements@0.5.2
+  - @elementor/editor-v1-adapters@0.10.0
+  - @elementor/utils@0.3.1
+  - @elementor/editor-styles@0.5.5
+
+## 0.6.0
+
+### Minor Changes
+
+- 19b0381: Change styles repository API
+
+### Patch Changes
+
+- d61b1bc: Added a new event to update the elements styles repository + organized all events in a central location
+- b34f498: Fix global class styles not updating
+- Updated dependencies [d61b1bc]
+- Updated dependencies [a8b60c9]
+- Updated dependencies [b34f498]
+  - @elementor/editor-elements@0.5.1
+  - @elementor/editor-v1-adapters@0.9.1
+  - @elementor/editor-styles@0.5.4
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,40 +1,52 @@
+import { Props } from '@elementor/editor-props';
 import * as _elementor_editor_styles from '@elementor/editor-styles';
-import { StyleDefinition } from '@elementor/editor-styles';
+import { StyleDefinition, StyleDefinitionID, StyleDefinitionVariant } from '@elementor/editor-styles';
 
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
-type GetActionPayload = Record<string, unknown>;
-type CreateActionPayload = MakeOptional<StyleDefinition, 'id' | 'type' | 'variants'>;
 type UpdateActionPayload = MakeOptional<StyleDefinition, 'label' | 'variants' | 'type'>;
+type UpdatePropsActionPayload = {
+    id: StyleDefinitionID;
+    meta: StyleDefinitionVariant['meta'];
+    props: Props;
+};
+type Meta = Record<string, unknown>;
 type StylesProvider = {
     key: string;
     priority: number;
     actions: {
-        get: (meta?: GetActionPayload) => StyleDefinition[];
-        create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
-        update?: (data: UpdateActionPayload) => Promise<StyleDefinition>;
+        get: (meta?: Meta) => StyleDefinition[];
+        getById: (id: StyleDefinitionID, meta?: Meta) => StyleDefinition | null;
+        create?: (label: StyleDefinition['label']) => StyleDefinitionID;
+        delete?: (id: StyleDefinitionID) => void;
+        setOrder?: (order: StyleDefinitionID[]) => void;
+        update?: (data: UpdateActionPayload) => void;
+        updateProps?: (args: UpdatePropsActionPayload, meta?: Meta) => void;
     };
     subscribe: (callback: () => void) => () => void;
     labels?: {
         singular: string;
         plural: string;
     };
+    reservedLabel?: string;
 };
 
 declare const stylesRepository: {
-    all: (meta?: GetActionPayload) => _elementor_editor_styles.StyleDefinition[];
-    allByProvider: (meta?: GetActionPayload) => (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
+    all: (meta?: Meta) => _elementor_editor_styles.StyleDefinition[];
     register: (provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
     getProviders: () => StylesProvider[];
     getProviderByKey: (key: string) => StylesProvider | undefined;
+    isLabelExist: (newLabel: string) => boolean;
+    isLabelValid: (newLabel: string) => boolean;
 };
 
-declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
+declare function useProviders(): StylesProvider[];
 
 type CreateAction = Required<StylesProvider['actions']>['create'];
 type CreateTuple = [StylesProvider, CreateAction];
 declare function useCreateActionsByProvider(): CreateTuple[];
 
 declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
+declare const LOCAL_STYLES_RESERVED_LABEL = "local";
 
-export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, type UpdateActionPayload, stylesRepository, useAllStylesByProvider, useCreateActionsByProvider };
+export { ELEMENTS_STYLES_PROVIDER_KEY, LOCAL_STYLES_RESERVED_LABEL, type Meta, type StylesProvider, type UpdateActionPayload, type UpdatePropsActionPayload, stylesRepository, useCreateActionsByProvider, useProviders };

package/dist/index.d.ts

@@ -1,40 +1,52 @@
+import { Props } from '@elementor/editor-props';
 import * as _elementor_editor_styles from '@elementor/editor-styles';
-import { StyleDefinition } from '@elementor/editor-styles';
+import { StyleDefinition, StyleDefinitionID, StyleDefinitionVariant } from '@elementor/editor-styles';
 
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
-type GetActionPayload = Record<string, unknown>;
-type CreateActionPayload = MakeOptional<StyleDefinition, 'id' | 'type' | 'variants'>;
 type UpdateActionPayload = MakeOptional<StyleDefinition, 'label' | 'variants' | 'type'>;
+type UpdatePropsActionPayload = {
+    id: StyleDefinitionID;
+    meta: StyleDefinitionVariant['meta'];
+    props: Props;
+};
+type Meta = Record<string, unknown>;
 type StylesProvider = {
     key: string;
     priority: number;
     actions: {
-        get: (meta?: GetActionPayload) => StyleDefinition[];
-        create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
-        update?: (data: UpdateActionPayload) => Promise<StyleDefinition>;
+        get: (meta?: Meta) => StyleDefinition[];
+        getById: (id: StyleDefinitionID, meta?: Meta) => StyleDefinition | null;
+        create?: (label: StyleDefinition['label']) => StyleDefinitionID;
+        delete?: (id: StyleDefinitionID) => void;
+        setOrder?: (order: StyleDefinitionID[]) => void;
+        update?: (data: UpdateActionPayload) => void;
+        updateProps?: (args: UpdatePropsActionPayload, meta?: Meta) => void;
     };
     subscribe: (callback: () => void) => () => void;
     labels?: {
         singular: string;
         plural: string;
     };
+    reservedLabel?: string;
 };
 
 declare const stylesRepository: {
-    all: (meta?: GetActionPayload) => _elementor_editor_styles.StyleDefinition[];
-    allByProvider: (meta?: GetActionPayload) => (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
+    all: (meta?: Meta) => _elementor_editor_styles.StyleDefinition[];
     register: (provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
     getProviders: () => StylesProvider[];
     getProviderByKey: (key: string) => StylesProvider | undefined;
+    isLabelExist: (newLabel: string) => boolean;
+    isLabelValid: (newLabel: string) => boolean;
 };
 
-declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
+declare function useProviders(): StylesProvider[];
 
 type CreateAction = Required<StylesProvider['actions']>['create'];
 type CreateTuple = [StylesProvider, CreateAction];
 declare function useCreateActionsByProvider(): CreateTuple[];
 
 declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
+declare const LOCAL_STYLES_RESERVED_LABEL = "local";
 
-export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, type UpdateActionPayload, stylesRepository, useAllStylesByProvider, useCreateActionsByProvider };
+export { ELEMENTS_STYLES_PROVIDER_KEY, LOCAL_STYLES_RESERVED_LABEL, type Meta, type StylesProvider, type UpdateActionPayload, type UpdatePropsActionPayload, stylesRepository, useCreateActionsByProvider, useProviders };

package/dist/index.js

@@ -21,13 +21,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ELEMENTS_STYLES_PROVIDER_KEY: () => ELEMENTS_STYLES_PROVIDER_KEY,
+  LOCAL_STYLES_RESERVED_LABEL: () => LOCAL_STYLES_RESERVED_LABEL,
   stylesRepository: () => stylesRepository,
-  useAllStylesByProvider: () => useAllStylesByProvider,
-  useCreateActionsByProvider: () => useCreateActionsByProvider
+  useCreateActionsByProvider: () => useCreateActionsByProvider,
+  useProviders: () => useProviders
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/utils/create-styles-repository.ts
+var VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;
 var createStylesRepository = () => {
   const providers = [];
   const getProviders = () => {
@@ -36,9 +38,6 @@ var createStylesRepository = () => {
   const register = (provider) => {
     providers.push(provider);
   };
-  const allByProvider = (meta = {}) => {
-    return getProviders().map((provider) => [provider, provider.actions.get(meta)]);
-  };
   const all = (meta = {}) => {
     return getProviders().flatMap((provider) => provider.actions.get(meta));
   };
@@ -53,25 +52,38 @@ var createStylesRepository = () => {
   const getProviderByKey = (key) => {
     return providers.find((provider) => provider.key === key);
   };
+  const isLabelExist = (newLabel) => {
+    const classes = all();
+    const reservedLabels = providers.map(({ reservedLabel }) => reservedLabel).filter(Boolean);
+    if (reservedLabels.includes(newLabel)) {
+      return true;
+    }
+    if (!classes?.length) {
+      return false;
+    }
+    return classes.some(({ label }) => label.toLowerCase() === newLabel.toLowerCase());
+  };
+  const isLabelValid = (newLabel) => VALID_SELECTOR_REGEX.test(newLabel);
   return {
     all,
-    allByProvider,
     register,
     subscribe,
     getProviders,
-    getProviderByKey
+    getProviderByKey,
+    isLabelExist,
+    isLabelValid
   };
 };
 
 // src/styles-repository.ts
 var stylesRepository = createStylesRepository();
 
-// src/hooks/use-all-styles-by-provider.ts
+// src/hooks/use-providers.ts
 var import_react = require("react");
-function useAllStylesByProvider(meta = {}) {
+function useProviders() {
   const [, rerender] = (0, import_react.useReducer)((prev) => !prev, false);
   (0, import_react.useEffect)(() => stylesRepository.subscribe(rerender), []);
-  return stylesRepository.allByProvider(meta);
+  return stylesRepository.getProviders();
 }
 
 // src/hooks/use-create-actions-by-provider.ts
@@ -90,37 +102,69 @@ function useCreateActionsByProvider() {
 // src/elements-styles-provider.ts
 var import_editor_elements = require("@elementor/editor-elements");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+
+// src/errors.ts
+var import_utils = require("@elementor/utils");
+var InvalidElementsStyleProviderMetaError = (0, import_utils.createError)({
+  code: "invalid_elements_style_provider_meta",
+  message: "Invalid elements style provider meta."
+});
+
+// src/elements-styles-provider.ts
 var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
+var LOCAL_STYLES_RESERVED_LABEL = "local";
 var elementsStylesProvider = {
   key: ELEMENTS_STYLES_PROVIDER_KEY,
   priority: 50,
   actions: {
     get: (meta = {}) => {
       let elements = (0, import_editor_elements.getElements)();
-      if ("elementId" in meta && meta.elementId) {
+      if (isValidElementsMeta(meta)) {
         elements = elements.filter((element) => element.id === meta.elementId);
       }
       return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
+    },
+    getById: (id, meta = {}) => {
+      if (!isValidElementsMeta(meta)) {
+        throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
+      }
+      const styles = (0, import_editor_elements.getElementStyles)(meta.elementId) ?? {};
+      return styles[id] ?? null;
+    },
+    updateProps: (args, meta = {}) => {
+      if (!isValidElementsMeta(meta)) {
+        throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
+      }
+      (0, import_editor_elements.updateElementStyle)({
+        elementId: meta.elementId,
+        styleId: args.id,
+        meta: args.meta,
+        props: args.props
+      });
     }
   },
-  subscribe: (cb) => {
-    return (0, import_editor_v1_adapters.__privateListenTo)(
-      [(0, import_editor_v1_adapters.commandEndEvent)("editor/documents/attach-preview"), (0, import_editor_v1_adapters.windowEvent)(import_editor_elements.ELEMENT_STYLE_CHANGE_EVENT)],
-      cb
-    );
-  }
+  subscribe: (cb) => (0, import_editor_v1_adapters.__privateListenTo)(import_editor_elements.styleRerenderEvents, cb),
+  reservedLabel: LOCAL_STYLES_RESERVED_LABEL
 };
+function isValidElementsMeta(meta) {
+  return "elementId" in meta && typeof meta.elementId === "string" && !!meta.elementId;
+}
 
 // src/element-base-styles-provider.ts
 var import_editor_elements2 = require("@elementor/editor-elements");
 var ELEMENTS_BASE_STYLES_PROVIDER_KEY = "element-base-styles";
 var elementBaseStylesProvider = {
   key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
-  priority: 60,
+  priority: 10,
   actions: {
-    get: () => {
+    get() {
       const widgetsCache = (0, import_editor_elements2.getWidgetsCache)();
-      return Object.values(widgetsCache ?? {}).flatMap((widget) => widget.base_styles ?? []);
+      return Object.values(widgetsCache ?? {}).flatMap(
+        (widget) => Object.values(widget.base_styles ?? {})
+      );
+    },
+    getById(id) {
+      return this.get().find((style) => style.id === id) ?? null;
     }
   },
   subscribe: () => {
@@ -140,8 +184,9 @@ init();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ELEMENTS_STYLES_PROVIDER_KEY,
+  LOCAL_STYLES_RESERVED_LABEL,
   stylesRepository,
-  useAllStylesByProvider,
-  useCreateActionsByProvider
+  useCreateActionsByProvider,
+  useProviders
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-all-styles-by-provider.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/element-base-styles-provider.ts","../src/init.ts"],"sourcesContent":["export {\n\ttype StylesProvider,\n\ttype CreateActionPayload,\n\ttype GetActionPayload,\n\ttype UpdateActionPayload,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n","import { type StyleDefinition } from '@elementor/editor-styles';\n\nexport type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type GetActionPayload = Record< string, unknown >;\nexport type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: GetActionPayload ) => StyleDefinition[];\n\t\tcreate?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdate?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst allByProvider = ( meta: GetActionPayload = {} ) => {\n\t\treturn getProviders().map( ( provider ) => [ provider, provider.actions.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: GetActionPayload = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type GetActionPayload } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: GetActionPayload = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { ELEMENT_STYLE_CHANGE_EVENT, getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[ commandEndEvent( 'editor/documents/attach-preview' ), windowEvent( ELEMENT_STYLE_CHANGE_EVENT ) ],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 60,\n\tactions: {\n\t\tget: () => {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) => widget.base_styles ?? [] );\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n"],"mappings":"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","names":["import_react","listenTo","import_editor_elements"]}
+{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-providers.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/errors.ts","../src/element-base-styles-provider.ts","../src/init.ts"],"sourcesContent":["export {\n\ttype StylesProvider,\n\ttype UpdateActionPayload,\n\ttype Meta,\n\ttype UpdatePropsActionPayload,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useProviders } from './hooks/use-providers';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY, LOCAL_STYLES_RESERVED_LABEL } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n","import { type Props } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';\n\ntype MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type UpdatePropsActionPayload = {\n\tid: StyleDefinitionID;\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tprops: Props;\n};\n\nexport type Meta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: Meta ) => StyleDefinition[];\n\t\tgetById: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;\n\t\tcreate?: ( label: StyleDefinition[ 'label' ] ) => StyleDefinitionID;\n\t\tdelete?: ( id: StyleDefinitionID ) => void;\n\t\tsetOrder?: ( order: StyleDefinitionID[] ) => void;\n\t\tupdate?: ( data: UpdateActionPayload ) => void;\n\t\tupdateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n\treservedLabel?: string;\n};\n\nconst VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst all = ( meta: Meta = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\tconst isLabelExist = ( newLabel: string ) => {\n\t\tconst classes = all();\n\t\tconst reservedLabels = providers.map( ( { reservedLabel } ) => reservedLabel ).filter( Boolean );\n\n\t\tif ( reservedLabels.includes( newLabel ) ) {\n\t\t\treturn true;\n\t\t}\n\n\t\tif ( ! classes?.length ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn classes.some( ( { label } ) => label.toLowerCase() === newLabel.toLowerCase() );\n\t};\n\n\tconst isLabelValid = ( newLabel: string ) => VALID_SELECTOR_REGEX.test( newLabel );\n\n\treturn {\n\t\tall,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\n\t\tisLabelExist,\n\t\tisLabelValid,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\n\nexport function useProviders() {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.getProviders();\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { InvalidElementsStyleProviderMetaError } from './errors';\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\nexport const LOCAL_STYLES_RESERVED_LABEL = 'local';\n\nexport const elementsStylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( isValidElementsMeta( meta ) ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\n\t\tgetById: ( id, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tconst styles = getElementStyles( meta.elementId ) ?? {};\n\n\t\t\treturn styles[ id ] ?? null;\n\t\t},\n\n\t\tupdateProps: ( args, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tupdateElementStyle( {\n\t\t\t\telementId: meta.elementId,\n\t\t\t\tstyleId: args.id,\n\t\t\t\tmeta: args.meta,\n\t\t\t\tprops: args.props,\n\t\t\t} );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n\treservedLabel: LOCAL_STYLES_RESERVED_LABEL,\n} satisfies StylesProvider;\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nfunction isValidElementsMeta( meta: Record< string, unknown > ): meta is ElementsMeta {\n\treturn 'elementId' in meta && typeof meta.elementId === 'string' && !! meta.elementId;\n}\n","import { createError } from '@elementor/utils';\n\nexport const InvalidElementsStyleProviderMetaError = createError< { meta: Record< string, unknown > } >( {\n\tcode: 'invalid_elements_style_provider_meta',\n\tmessage: 'Invalid elements style provider meta.',\n} );\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 10,\n\tactions: {\n\t\tget() {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) =>\n\t\t\t\tObject.values( widget.base_styles ?? {} )\n\t\t\t);\n\t\t},\n\n\t\tgetById( id ) {\n\t\t\treturn this.get().find( ( style ) => style.id === id ) ?? null;\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n"],"mappings":"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","names":["import_react","listenTo","import_editor_elements"]}

package/dist/index.mjs

@@ -1,4 +1,5 @@
 // src/utils/create-styles-repository.ts
+var VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;
 var createStylesRepository = () => {
   const providers = [];
   const getProviders = () => {
@@ -7,9 +8,6 @@ var createStylesRepository = () => {
   const register = (provider) => {
     providers.push(provider);
   };
-  const allByProvider = (meta = {}) => {
-    return getProviders().map((provider) => [provider, provider.actions.get(meta)]);
-  };
   const all = (meta = {}) => {
     return getProviders().flatMap((provider) => provider.actions.get(meta));
   };
@@ -24,25 +22,38 @@ var createStylesRepository = () => {
   const getProviderByKey = (key) => {
     return providers.find((provider) => provider.key === key);
   };
+  const isLabelExist = (newLabel) => {
+    const classes = all();
+    const reservedLabels = providers.map(({ reservedLabel }) => reservedLabel).filter(Boolean);
+    if (reservedLabels.includes(newLabel)) {
+      return true;
+    }
+    if (!classes?.length) {
+      return false;
+    }
+    return classes.some(({ label }) => label.toLowerCase() === newLabel.toLowerCase());
+  };
+  const isLabelValid = (newLabel) => VALID_SELECTOR_REGEX.test(newLabel);
   return {
     all,
-    allByProvider,
     register,
     subscribe,
     getProviders,
-    getProviderByKey
+    getProviderByKey,
+    isLabelExist,
+    isLabelValid
   };
 };
 
 // src/styles-repository.ts
 var stylesRepository = createStylesRepository();
 
-// src/hooks/use-all-styles-by-provider.ts
+// src/hooks/use-providers.ts
 import { useEffect, useReducer } from "react";
-function useAllStylesByProvider(meta = {}) {
+function useProviders() {
   const [, rerender] = useReducer((prev) => !prev, false);
   useEffect(() => stylesRepository.subscribe(rerender), []);
-  return stylesRepository.allByProvider(meta);
+  return stylesRepository.getProviders();
 }
 
 // src/hooks/use-create-actions-by-provider.ts
@@ -59,39 +70,71 @@ function useCreateActionsByProvider() {
 }
 
 // src/elements-styles-provider.ts
-import { ELEMENT_STYLE_CHANGE_EVENT, getElements } from "@elementor/editor-elements";
-import { __privateListenTo as listenTo, commandEndEvent, windowEvent } from "@elementor/editor-v1-adapters";
+import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from "@elementor/editor-elements";
+import { __privateListenTo as listenTo } from "@elementor/editor-v1-adapters";
+
+// src/errors.ts
+import { createError } from "@elementor/utils";
+var InvalidElementsStyleProviderMetaError = createError({
+  code: "invalid_elements_style_provider_meta",
+  message: "Invalid elements style provider meta."
+});
+
+// src/elements-styles-provider.ts
 var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
+var LOCAL_STYLES_RESERVED_LABEL = "local";
 var elementsStylesProvider = {
   key: ELEMENTS_STYLES_PROVIDER_KEY,
   priority: 50,
   actions: {
     get: (meta = {}) => {
       let elements = getElements();
-      if ("elementId" in meta && meta.elementId) {
+      if (isValidElementsMeta(meta)) {
         elements = elements.filter((element) => element.id === meta.elementId);
       }
       return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
+    },
+    getById: (id, meta = {}) => {
+      if (!isValidElementsMeta(meta)) {
+        throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
+      }
+      const styles = getElementStyles(meta.elementId) ?? {};
+      return styles[id] ?? null;
+    },
+    updateProps: (args, meta = {}) => {
+      if (!isValidElementsMeta(meta)) {
+        throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
+      }
+      updateElementStyle({
+        elementId: meta.elementId,
+        styleId: args.id,
+        meta: args.meta,
+        props: args.props
+      });
     }
   },
-  subscribe: (cb) => {
-    return listenTo(
-      [commandEndEvent("editor/documents/attach-preview"), windowEvent(ELEMENT_STYLE_CHANGE_EVENT)],
-      cb
-    );
-  }
+  subscribe: (cb) => listenTo(styleRerenderEvents, cb),
+  reservedLabel: LOCAL_STYLES_RESERVED_LABEL
 };
+function isValidElementsMeta(meta) {
+  return "elementId" in meta && typeof meta.elementId === "string" && !!meta.elementId;
+}
 
 // src/element-base-styles-provider.ts
 import { getWidgetsCache } from "@elementor/editor-elements";
 var ELEMENTS_BASE_STYLES_PROVIDER_KEY = "element-base-styles";
 var elementBaseStylesProvider = {
   key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
-  priority: 60,
+  priority: 10,
   actions: {
-    get: () => {
+    get() {
       const widgetsCache = getWidgetsCache();
-      return Object.values(widgetsCache ?? {}).flatMap((widget) => widget.base_styles ?? []);
+      return Object.values(widgetsCache ?? {}).flatMap(
+        (widget) => Object.values(widget.base_styles ?? {})
+      );
+    },
+    getById(id) {
+      return this.get().find((style) => style.id === id) ?? null;
     }
   },
   subscribe: () => {
@@ -110,8 +153,9 @@ function init() {
 init();
 export {
   ELEMENTS_STYLES_PROVIDER_KEY,
+  LOCAL_STYLES_RESERVED_LABEL,
   stylesRepository,
-  useAllStylesByProvider,
-  useCreateActionsByProvider
+  useCreateActionsByProvider,
+  useProviders
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-all-styles-by-provider.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/element-base-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type StyleDefinition } from '@elementor/editor-styles';\n\nexport type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type GetActionPayload = Record< string, unknown >;\nexport type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: GetActionPayload ) => StyleDefinition[];\n\t\tcreate?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdate?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst allByProvider = ( meta: GetActionPayload = {} ) => {\n\t\treturn getProviders().map( ( provider ) => [ provider, provider.actions.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: GetActionPayload = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type GetActionPayload } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: GetActionPayload = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { ELEMENT_STYLE_CHANGE_EVENT, getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[ commandEndEvent( 'editor/documents/attach-preview' ), windowEvent( ELEMENT_STYLE_CHANGE_EVENT ) ],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 60,\n\tactions: {\n\t\tget: () => {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) => widget.base_styles ?? [] );\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n","export {\n\ttype StylesProvider,\n\ttype CreateActionPayload,\n\ttype GetActionPayload,\n\ttype UpdateActionPayload,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":";AAuBO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAA8B,CAAC;AAErC,QAAM,eAAe,MAAM;AAC1B,WAAO,UAAU,MAAO,CAAE,EAAE,KAAM,CAAE,GAAG,MAAS,EAAE,WAAW,EAAE,WAAW,KAAK,CAAI;AAAA,EACpF;AAEA,QAAM,WAAW,CAAE,aAA8B;AAChD,cAAU,KAAM,QAAS;AAAA,EAC1B;AAEA,QAAM,gBAAgB,CAAE,OAAyB,CAAC,MAAO;AACxD,WAAO,aAAa,EAAE,IAAK,CAAE,aAAc,CAAE,UAAU,SAAS,QAAQ,IAAK,IAAK,CAAE,CAAW;AAAA,EAChG;AAEA,QAAM,MAAM,CAAE,OAAyB,CAAC,MAAO;AAC9C,WAAO,aAAa,EAAE,QAAS,CAAE,aAAc,SAAS,QAAQ,IAAK,IAAK,CAAE;AAAA,EAC7E;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,UAAU,IAAK,CAAE,aAAc;AACnD,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,QAAM,mBAAmB,CAAE,QAAiB;AAC3C,WAAO,UAAU,KAAM,CAAE,aAAc,SAAS,QAAQ,GAAI;AAAA,EAC7D;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;AC9DO,IAAM,mBAAmB,uBAAuB;;;ACFvD,SAAS,WAAW,kBAAkB;AAK/B,SAAS,uBAAwB,OAAyB,CAAC,GAAI;AACrE,QAAM,CAAE,EAAE,QAAS,IAAI,WAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,YAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,cAAe,IAAK;AAC7C;;;ACXA,SAAS,eAAe;AAQjB,SAAS,6BAA6B;AAC5C,SAAO,QAAS,MAAM;AACrB,WAAO,iBACL,aAAa,EACb,IAA2B,CAAE,aAAc;AAC3C,UAAK,CAAE,SAAS,QAAQ,QAAS;AAChC,eAAO;AAAA,MACR;AAEA,aAAO,CAAE,UAAU,SAAS,QAAQ,MAAO;AAAA,IAC5C,CAAE,EACD,OAAQ,CAAE,SAAU,CAAC,CAAE,IAAK;AAAA,EAC/B,GAAG,CAAC,CAAE;AACP;;;ACrBA,SAAS,4BAA4B,mBAAmB;AACxD,SAAS,qBAAqB,UAAU,iBAAiB,mBAAmB;AAIrE,IAAM,+BAA+B;AAErC,IAAM,yBAAyC;AAAA,EACrD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,UAAI,WAAW,YAAY;AAE3B,UAAK,eAAe,QAAQ,KAAK,WAAY;AAC5C,mBAAW,SAAS,OAAQ,CAAE,YAAa,QAAQ,OAAO,KAAK,SAAU;AAAA,MAC1E;AAEA,aAAO,SAAS,QAAS,CAAE,YAAa,OAAO,OAAQ,QAAQ,MAAM,IAAK,QAAS,KAAK,CAAC,CAAE,CAAE;AAAA,IAC9F;AAAA,EACD;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,WAAO;AAAA,MACN,CAAE,gBAAiB,iCAAkC,GAAG,YAAa,0BAA2B,CAAE;AAAA,MAClG;AAAA,IACD;AAAA,EACD;AACD;;;AC3BA,SAAS,uBAAuB;AAIhC,IAAM,oCAAoC;AAEnC,IAAM,4BAA4C;AAAA,EACxD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,KAAK,MAAM;AACV,YAAM,eAAe,gBAAgB;AAErC,aAAO,OAAO,OAAQ,gBAAgB,CAAC,CAAE,EAAE,QAAS,CAAE,WAAY,OAAO,eAAe,CAAC,CAAE;AAAA,IAC5F;AAAA,EACD;AAAA,EACA,WAAW,MAAM;AAChB,WAAO,MAAM;AAAA,IAAC;AAAA,EACf;AACD;;;ACfO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AAClD,mBAAiB,SAAU,yBAA0B;AACtD;;;ACQA,KAAK;","names":[]}
+{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-providers.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/errors.ts","../src/element-base-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type Props } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';\n\ntype MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type UpdatePropsActionPayload = {\n\tid: StyleDefinitionID;\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tprops: Props;\n};\n\nexport type Meta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: Meta ) => StyleDefinition[];\n\t\tgetById: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;\n\t\tcreate?: ( label: StyleDefinition[ 'label' ] ) => StyleDefinitionID;\n\t\tdelete?: ( id: StyleDefinitionID ) => void;\n\t\tsetOrder?: ( order: StyleDefinitionID[] ) => void;\n\t\tupdate?: ( data: UpdateActionPayload ) => void;\n\t\tupdateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n\treservedLabel?: string;\n};\n\nconst VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst all = ( meta: Meta = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\tconst isLabelExist = ( newLabel: string ) => {\n\t\tconst classes = all();\n\t\tconst reservedLabels = providers.map( ( { reservedLabel } ) => reservedLabel ).filter( Boolean );\n\n\t\tif ( reservedLabels.includes( newLabel ) ) {\n\t\t\treturn true;\n\t\t}\n\n\t\tif ( ! classes?.length ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn classes.some( ( { label } ) => label.toLowerCase() === newLabel.toLowerCase() );\n\t};\n\n\tconst isLabelValid = ( newLabel: string ) => VALID_SELECTOR_REGEX.test( newLabel );\n\n\treturn {\n\t\tall,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\n\t\tisLabelExist,\n\t\tisLabelValid,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\n\nexport function useProviders() {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.getProviders();\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { InvalidElementsStyleProviderMetaError } from './errors';\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\nexport const LOCAL_STYLES_RESERVED_LABEL = 'local';\n\nexport const elementsStylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( isValidElementsMeta( meta ) ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\n\t\tgetById: ( id, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tconst styles = getElementStyles( meta.elementId ) ?? {};\n\n\t\t\treturn styles[ id ] ?? null;\n\t\t},\n\n\t\tupdateProps: ( args, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tupdateElementStyle( {\n\t\t\t\telementId: meta.elementId,\n\t\t\t\tstyleId: args.id,\n\t\t\t\tmeta: args.meta,\n\t\t\t\tprops: args.props,\n\t\t\t} );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n\treservedLabel: LOCAL_STYLES_RESERVED_LABEL,\n} satisfies StylesProvider;\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nfunction isValidElementsMeta( meta: Record< string, unknown > ): meta is ElementsMeta {\n\treturn 'elementId' in meta && typeof meta.elementId === 'string' && !! meta.elementId;\n}\n","import { createError } from '@elementor/utils';\n\nexport const InvalidElementsStyleProviderMetaError = createError< { meta: Record< string, unknown > } >( {\n\tcode: 'invalid_elements_style_provider_meta',\n\tmessage: 'Invalid elements style provider meta.',\n} );\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 10,\n\tactions: {\n\t\tget() {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) =>\n\t\t\t\tObject.values( widget.base_styles ?? {} )\n\t\t\t);\n\t\t},\n\n\t\tgetById( id ) {\n\t\t\treturn this.get().find( ( style ) => style.id === id ) ?? null;\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n","export {\n\ttype StylesProvider,\n\ttype UpdateActionPayload,\n\ttype Meta,\n\ttype UpdatePropsActionPayload,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useProviders } from './hooks/use-providers';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY, LOCAL_STYLES_RESERVED_LABEL } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-styles-repository",
   "description": "Elementor Editor Styles Repository",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -33,11 +33,16 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-elements": "0.5.0",
-    "@elementor/editor-styles": "0.5.3",
-    "@elementor/editor-v1-adapters": "0.9.0"
+    "@elementor/editor-elements": "0.5.2",
+    "@elementor/editor-props": "0.9.0",
+    "@elementor/editor-styles": "0.5.5",
+    "@elementor/editor-v1-adapters": "0.10.0",
+    "@elementor/utils": "0.3.1"
   },
   "peerDependencies": {
     "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
   }
 }

package/src/__tests__/element-base-styles-provider.test.ts

@@ -9,10 +9,15 @@ describe( 'elementBaseStylesProvider', () => {
 	beforeEach( () => {
 		jest.mocked( getWidgetsCache ).mockReturnValue( {
 			'widget-1': {
-				base_styles: [ createMockStyleDefinition( { id: 's-1' } ), createMockStyleDefinition( { id: 's-2' } ) ],
+				base_styles: {
+					's-1': createMockStyleDefinition( { id: 's-1' } ),
+					's-2': createMockStyleDefinition( { id: 's-2' } ),
+				},
 			},
 			'widget-2': {
-				base_styles: [ createMockStyleDefinition( { id: 's-3' } ) ],
+				base_styles: {
+					's-3': createMockStyleDefinition( { id: 's-3' } ),
+				},
 			},
 			'widget-3': {},
 		} as unknown as ReturnType< typeof getWidgetsCache > );
@@ -29,4 +34,12 @@ describe( 'elementBaseStylesProvider', () => {
 			expect.objectContaining( { id: 's-3' } ),
 		] );
 	} );
+
+	it( 'should return base style by id', () => {
+		// Act.
+		const style = elementBaseStylesProvider.actions.getById( 's-1' );
+
+		// Assert.
+		expect( style ).toEqual( expect.objectContaining( { id: 's-1' } ) );
+	} );
 } );

package/src/__tests__/elements-styles-provider.test.ts

@@ -1,7 +1,9 @@
 import { createMockElement, createMockStyleDefinition } from 'test-utils';
-import { getElements } from '@elementor/editor-elements';
+import { getElements, getElementStyles, updateElementStyle } from '@elementor/editor-elements';
+import type { StyleDefinition } from '@elementor/editor-styles';
 
 import { elementsStylesProvider } from '../elements-styles-provider';
+import { InvalidElementsStyleProviderMetaError } from '../errors';
 
 jest.mock( '@elementor/editor-elements' );
 
@@ -50,4 +52,95 @@ describe( 'elementsStylesProvider', () => {
 			expect.objectContaining( { id: 's-2' } ),
 		] );
 	} );
+
+	it( 'should retrieve an element style by id', () => {
+		const styles: Record< string, StyleDefinition > = {
+			'style-1': {
+				id: 'style-1',
+				label: 'Style 1',
+				variants: [],
+				type: 'class',
+			},
+			'style-2': {
+				id: 'style-2',
+				label: 'Style 2',
+				variants: [],
+				type: 'class',
+			},
+		};
+
+		jest.mocked( getElementStyles ).mockImplementation( ( elementId ) => {
+			return elementId === 'test-element-id' ? styles : null;
+		} );
+
+		// Act.
+		const elementStyle = elementsStylesProvider.actions.getById( 'style-2', { elementId: 'test-element-id' } );
+
+		// Assert.
+		expect( elementStyle ).toStrictEqual( styles[ 'style-2' ] );
+	} );
+
+	it( 'should throw when trying to get a style by id without passing an element id', () => {
+		// Act & Assert.
+		expect( () => elementsStylesProvider.actions.getById( 'style', { notElementId: 'test-value' } ) ).toThrow(
+			new InvalidElementsStyleProviderMetaError()
+		);
+	} );
+
+	it( 'should update style props', () => {
+		// Act.
+		elementsStylesProvider.actions.updateProps(
+			{
+				id: 'test-style',
+				meta: {
+					breakpoint: null,
+					state: null,
+				},
+				props: {
+					prop: 'value',
+				},
+			},
+			{ elementId: 'test-element' }
+		);
+
+		// Assert.
+		expect( updateElementStyle ).toHaveBeenCalledTimes( 1 );
+
+		expect( updateElementStyle ).toHaveBeenCalledWith( {
+			elementId: 'test-element',
+			styleId: 'test-style',
+			meta: {
+				breakpoint: null,
+				state: null,
+			},
+			props: {
+				prop: 'value',
+			},
+		} );
+	} );
+
+	it.each( [
+		{ elementsMeta: { notElementId: 'test-value' } },
+		{ elementsMeta: { elementId: 123 } },
+		{ elementsMeta: { elementId: null } },
+		{ elementsMeta: { elementId: '' } },
+		{ elementsMeta: { elementId: {} } },
+	] )( 'should throw when updating props with invalid elements meta', ( { elementsMeta } ) => {
+		// Act & Assert.
+		expect( () =>
+			elementsStylesProvider.actions.updateProps(
+				{
+					id: 'test-id',
+					meta: {
+						breakpoint: null,
+						state: null,
+					},
+					props: {
+						prop: 'value',
+					},
+				},
+				elementsMeta
+			)
+		).toThrow( new InvalidElementsStyleProviderMetaError() );
+	} );
 } );

package/src/element-base-styles-provider.ts

@@ -6,12 +6,18 @@ const ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';
 
 export const elementBaseStylesProvider: StylesProvider = {
 	key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
-	priority: 60,
+	priority: 10,
 	actions: {
-		get: () => {
+		get() {
 			const widgetsCache = getWidgetsCache();
 
-			return Object.values( widgetsCache ?? {} ).flatMap( ( widget ) => widget.base_styles ?? [] );
+			return Object.values( widgetsCache ?? {} ).flatMap( ( widget ) =>
+				Object.values( widget.base_styles ?? {} )
+			);
+		},
+
+		getById( id ) {
+			return this.get().find( ( style ) => style.id === id ) ?? null;
 		},
 	},
 	subscribe: () => {

package/src/elements-styles-provider.ts

@@ -1,28 +1,57 @@
-import { ELEMENT_STYLE_CHANGE_EVENT, getElements } from '@elementor/editor-elements';
-import { __privateListenTo as listenTo, commandEndEvent, windowEvent } from '@elementor/editor-v1-adapters';
+import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from '@elementor/editor-elements';
+import { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';
 
+import { InvalidElementsStyleProviderMetaError } from './errors';
 import { type StylesProvider } from './utils/create-styles-repository';
 
 export const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';
+export const LOCAL_STYLES_RESERVED_LABEL = 'local';
 
-export const elementsStylesProvider: StylesProvider = {
+export const elementsStylesProvider = {
 	key: ELEMENTS_STYLES_PROVIDER_KEY,
 	priority: 50,
 	actions: {
 		get: ( meta = {} ) => {
 			let elements = getElements();
 
-			if ( 'elementId' in meta && meta.elementId ) {
+			if ( isValidElementsMeta( meta ) ) {
 				elements = elements.filter( ( element ) => element.id === meta.elementId );
 			}
 
 			return elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );
 		},
+
+		getById: ( id, meta = {} ) => {
+			if ( ! isValidElementsMeta( meta ) ) {
+				throw new InvalidElementsStyleProviderMetaError( { context: { meta } } );
+			}
+
+			const styles = getElementStyles( meta.elementId ) ?? {};
+
+			return styles[ id ] ?? null;
+		},
+
+		updateProps: ( args, meta = {} ) => {
+			if ( ! isValidElementsMeta( meta ) ) {
+				throw new InvalidElementsStyleProviderMetaError( { context: { meta } } );
+			}
+
+			updateElementStyle( {
+				elementId: meta.elementId,
+				styleId: args.id,
+				meta: args.meta,
+				props: args.props,
+			} );
+		},
 	},
-	subscribe: ( cb ) => {
-		return listenTo(
-			[ commandEndEvent( 'editor/documents/attach-preview' ), windowEvent( ELEMENT_STYLE_CHANGE_EVENT ) ],
-			cb
-		);
-	},
+	subscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),
+	reservedLabel: LOCAL_STYLES_RESERVED_LABEL,
+} satisfies StylesProvider;
+
+type ElementsMeta = {
+	elementId: string;
 };
+
+function isValidElementsMeta( meta: Record< string, unknown > ): meta is ElementsMeta {
+	return 'elementId' in meta && typeof meta.elementId === 'string' && !! meta.elementId;
+}

package/src/errors.ts

@@ -0,0 +1,6 @@
+import { createError } from '@elementor/utils';
+
+export const InvalidElementsStyleProviderMetaError = createError< { meta: Record< string, unknown > } >( {
+	code: 'invalid_elements_style_provider_meta',
+	message: 'Invalid elements style provider meta.',
+} );

package/src/hooks/{use-all-styles-by-provider.ts → use-providers.ts}

@@ -1,12 +1,11 @@
 import { useEffect, useReducer } from 'react';
 
 import { stylesRepository } from '../styles-repository';
-import { type GetActionPayload } from '../utils/create-styles-repository';
 
-export function useAllStylesByProvider( meta: GetActionPayload = {} ) {
+export function useProviders() {
 	const [ , rerender ] = useReducer( ( prev ) => ! prev, false );
 
 	useEffect( () => stylesRepository.subscribe( rerender ), [] );
 
-	return stylesRepository.allByProvider( meta );
+	return stylesRepository.getProviders();
 }

package/src/index.ts

@@ -1,15 +1,15 @@
 export {
 	type StylesProvider,
-	type CreateActionPayload,
-	type GetActionPayload,
 	type UpdateActionPayload,
+	type Meta,
+	type UpdatePropsActionPayload,
 } from './utils/create-styles-repository';
 
 export { stylesRepository } from './styles-repository';
-export { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';
+export { useProviders } from './hooks/use-providers';
 export { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';
 
-export { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';
+export { ELEMENTS_STYLES_PROVIDER_KEY, LOCAL_STYLES_RESERVED_LABEL } from './elements-styles-provider';
 
 import { init } from './init';
 

package/src/utils/__tests__/create-styles-repository.test.ts

@@ -1,45 +1,37 @@
-import { createMockStyleDefinition } from 'test-utils';
-import { type StyleDefinition } from '@elementor/editor-styles';
+import { createMockStyleDefinition, createMockStylesProvider } from 'test-utils';
 
-import { createStylesRepository, type StylesProvider } from '../create-styles-repository';
+import { createStylesRepository } from '../create-styles-repository';
 
 const styleDef1 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#dddddd' } } } );
 const styleDef2 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#eeeeee' } } } );
-const styleDef3 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#111111' } } } );
 
 describe( 'createStylesRepository', () => {
 	it( 'should get all the style defs from all providers ordered by priority', () => {
 		// Arrange
 		const repo = createStylesRepository();
 
-		repo.register( createMockProvider( 'mock1', 10, [ styleDef1 ] ).provider );
-		repo.register( createMockProvider( 'mock2', 20, [ styleDef2 ] ).provider );
+		repo.register( createMockStylesProvider( { key: 'mock1', priority: 10, styleDefinitions: [ styleDef1 ] } ) );
+		repo.register( createMockStylesProvider( { key: 'mock2', priority: 20, styleDefinitions: [ styleDef2 ] } ) );
 
 		// Assert
 		expect( repo.all() ).toEqual( [ styleDef2, styleDef1 ] );
 	} );
 
-	it( 'should get all the style defs grouped by providers', () => {
-		// Arrange
-		const repo = createStylesRepository();
-
-		repo.register( createMockProvider( 'mock1', 10, [ styleDef1 ] ).provider );
-		repo.register( createMockProvider( 'mock2', 20, [ styleDef2, styleDef3 ] ).provider );
-
-		// Assert
-		expect( repo.allByProvider() ).toEqual( [
-			[ expect.objectContaining( { key: 'mock2' } ), [ styleDef2, styleDef3 ] ],
-			[ expect.objectContaining( { key: 'mock1' } ), [ styleDef1 ] ],
-		] );
-	} );
-
 	it( 'should subscribe and unsubscribe to all style providers', () => {
 		// Arrange
 		const repo = createStylesRepository();
 
-		const { provider: mockStylesProvider1, notify: notify1 } = createMockProvider( 'mock1', 10, [ styleDef1 ] );
+		const mockStylesProvider1 = createMockStylesProvider( {
+			key: 'mock1',
+			priority: 10,
+			styleDefinitions: [ styleDef1 ],
+		} );
 
-		const { provider: mockStylesProvider2, notify: notify2 } = createMockProvider( 'mock2', 10, [ styleDef2 ] );
+		const mockStylesProvider2 = createMockStylesProvider( {
+			key: 'mock2',
+			priority: 20,
+			styleDefinitions: [ styleDef2 ],
+		} );
 
 		repo.register( mockStylesProvider1 );
 		repo.register( mockStylesProvider2 );
@@ -47,6 +39,10 @@ describe( 'createStylesRepository', () => {
 		const cb = jest.fn();
 		const unsubscribe = repo.subscribe( cb );
 
+		// Force notifying the subscribers.
+		const notify1 = () => mockStylesProvider1.actions.update?.( {} as never );
+		const notify2 = () => mockStylesProvider2.actions.update?.( {} as never );
+
 		// Act
 		notify1();
 
@@ -68,29 +64,84 @@ describe( 'createStylesRepository', () => {
 		// Assert
 		expect( cb ).toHaveBeenCalledTimes( 2 );
 	} );
-} );
 
-const createMockProvider = ( key: string, priority: number, styleDefinitions: StyleDefinition[] ) => {
-	const subscribers = new Set< () => void >();
-
-	const notify = () => {
-		subscribers.forEach( ( cb ) => cb() );
-	};
-
-	const provider: StylesProvider = {
-		key,
-		priority,
-		actions: {
-			get: () => styleDefinitions,
-		},
-		subscribe: ( cb ) => {
-			subscribers.add( cb );
-
-			return () => {
-				subscribers.delete( cb );
-			};
-		},
-	};
-
-	return { provider, notify };
-};
+	it( 'should return true if label is valid', () => {
+		// Arrange
+		const repo = createStylesRepository();
+
+		// Act
+		const result = repo.isLabelValid( 'valid-label' );
+
+		// Assert
+		expect( result ).toBe( true );
+	} );
+
+	it( 'should return false if label is not valid', () => {
+		// Arrange
+		const repo = createStylesRepository();
+
+		// Act
+		const result = repo.isLabelValid( '.invalid-label' );
+
+		// Assert
+		expect( result ).toBe( false );
+	} );
+
+	it( 'should return true if label is reserved', () => {
+		// Arrange
+		const repo = createStylesRepository();
+
+		const mockStylesProvider1 = createMockStylesProvider( {
+			key: 'mock1',
+			priority: 10,
+			styleDefinitions: [],
+			reservedLabel: 'reserved-label',
+		} );
+
+		repo.register( mockStylesProvider1 );
+
+		// Act
+		const result = repo.isLabelExist( 'reserved-label' );
+
+		// Assert
+		expect( result ).toBe( true );
+	} );
+
+	it( 'should return true if label exist', () => {
+		// Arrange
+		const repo = createStylesRepository();
+
+		const mockStylesProvider1 = createMockStylesProvider( {
+			key: 'mock1',
+			priority: 10,
+			styleDefinitions: [ styleDef1 ],
+		} );
+
+		repo.register( mockStylesProvider1 );
+
+		// Act
+		const result = repo.isLabelExist( styleDef1.label );
+
+		// Assert
+		expect( result ).toBe( true );
+	} );
+
+	it( 'should return false if label does not exist', () => {
+		// Arrange
+		const repo = createStylesRepository();
+
+		const mockStylesProvider1 = createMockStylesProvider( {
+			key: 'mock1',
+			priority: 10,
+			styleDefinitions: [],
+		} );
+
+		repo.register( mockStylesProvider1 );
+
+		// Act
+		const result = repo.isLabelExist( 'new-label' );
+
+		// Assert
+		expect( result ).toBe( false );
+	} );
+} );

package/src/utils/create-styles-repository.ts

@@ -1,26 +1,40 @@
-import { type StyleDefinition } from '@elementor/editor-styles';
+import { type Props } from '@elementor/editor-props';
+import { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';
 
-export type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;
+type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;
 
-export type GetActionPayload = Record< string, unknown >;
-export type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;
 export type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;
 
+export type UpdatePropsActionPayload = {
+	id: StyleDefinitionID;
+	meta: StyleDefinitionVariant[ 'meta' ];
+	props: Props;
+};
+
+export type Meta = Record< string, unknown >;
+
 export type StylesProvider = {
 	key: string;
 	priority: number;
 	actions: {
-		get: ( meta?: GetActionPayload ) => StyleDefinition[];
-		create?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;
-		update?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;
+		get: ( meta?: Meta ) => StyleDefinition[];
+		getById: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;
+		create?: ( label: StyleDefinition[ 'label' ] ) => StyleDefinitionID;
+		delete?: ( id: StyleDefinitionID ) => void;
+		setOrder?: ( order: StyleDefinitionID[] ) => void;
+		update?: ( data: UpdateActionPayload ) => void;
+		updateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;
 	};
 	subscribe: ( callback: () => void ) => () => void;
 	labels?: {
 		singular: string;
 		plural: string;
 	};
+	reservedLabel?: string;
 };
 
+const VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;
+
 export const createStylesRepository = () => {
 	const providers: StylesProvider[] = [];
 
@@ -32,11 +46,7 @@ export const createStylesRepository = () => {
 		providers.push( provider );
 	};
 
-	const allByProvider = ( meta: GetActionPayload = {} ) => {
-		return getProviders().map( ( provider ) => [ provider, provider.actions.get( meta ) ] as const );
-	};
-
-	const all = ( meta: GetActionPayload = {} ) => {
+	const all = ( meta: Meta = {} ) => {
 		return getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );
 	};
 
@@ -54,12 +64,30 @@ export const createStylesRepository = () => {
 		return providers.find( ( provider ) => provider.key === key );
 	};
 
+	const isLabelExist = ( newLabel: string ) => {
+		const classes = all();
+		const reservedLabels = providers.map( ( { reservedLabel } ) => reservedLabel ).filter( Boolean );
+
+		if ( reservedLabels.includes( newLabel ) ) {
+			return true;
+		}
+
+		if ( ! classes?.length ) {
+			return false;
+		}
+
+		return classes.some( ( { label } ) => label.toLowerCase() === newLabel.toLowerCase() );
+	};
+
+	const isLabelValid = ( newLabel: string ) => VALID_SELECTOR_REGEX.test( newLabel );
+
 	return {
 		all,
-		allByProvider,
 		register,
 		subscribe,
 		getProviders,
 		getProviderByKey,
+		isLabelExist,
+		isLabelValid,
 	};
 };