@elementor/editor-styles-repository 0.3.0 → 0.3.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-styles-repository@0.3.0 build
+> @elementor/editor-styles-repository@0.3.1 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     2.22 KB
-ESM dist/index.mjs.map 5.02 KB
-ESM ⚡️ Build success in 55ms
-CJS dist/index.js     3.50 KB
-CJS dist/index.js.map 5.07 KB
-CJS ⚡️ Build success in 56ms
+ESM dist/index.mjs     2.27 KB
+ESM dist/index.mjs.map 5.42 KB
+ESM ⚡️ Build success in 27ms
+CJS dist/index.js     3.54 KB
+CJS dist/index.js.map 5.46 KB
+CJS ⚡️ Build success in 35ms
 DTS Build start
-DTS ⚡️ Build success in 4336ms
-DTS dist/index.d.mts 990.00 B
-DTS dist/index.d.ts  990.00 B
+DTS ⚡️ Build success in 4561ms
+DTS dist/index.d.mts 1.26 KB
+DTS dist/index.d.ts  1.26 KB

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @elementor/editor-styles-repository
 
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [1762144]
+  - @elementor/editor-elements@0.3.4
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,23 +1,28 @@
 import * as _elementor_editor_styles from '@elementor/editor-styles';
 import { StyleDefinition } from '@elementor/editor-styles';
 
-type StyleProviderMeta = Record<string, unknown>;
+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 StylesProvider = {
     key: string;
     priority: number;
-    get: (meta?: StyleProviderMeta) => StyleDefinition[];
+    actions: {
+        get: (meta?: GetActionPayload) => StyleDefinition[];
+        create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
+    };
     subscribe: (callback: () => void) => () => void;
 };
 
 declare const stylesRepository: {
-    all: (meta?: StyleProviderMeta) => _elementor_editor_styles.StyleDefinition[];
-    allByProvider: (meta?: StyleProviderMeta) => (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+    all: (meta?: GetActionPayload) => _elementor_editor_styles.StyleDefinition[];
+    allByProvider: (meta?: GetActionPayload) => (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
     register: (provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
 };
 
-declare function useAllStylesByProvider(meta?: StyleProviderMeta): (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
 
 declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 
-export { ELEMENTS_STYLES_PROVIDER_KEY, type StylesProvider, stylesRepository, useAllStylesByProvider };
+export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, stylesRepository, useAllStylesByProvider };

package/dist/index.d.ts

@@ -1,23 +1,28 @@
 import * as _elementor_editor_styles from '@elementor/editor-styles';
 import { StyleDefinition } from '@elementor/editor-styles';
 
-type StyleProviderMeta = Record<string, unknown>;
+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 StylesProvider = {
     key: string;
     priority: number;
-    get: (meta?: StyleProviderMeta) => StyleDefinition[];
+    actions: {
+        get: (meta?: GetActionPayload) => StyleDefinition[];
+        create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
+    };
     subscribe: (callback: () => void) => () => void;
 };
 
 declare const stylesRepository: {
-    all: (meta?: StyleProviderMeta) => _elementor_editor_styles.StyleDefinition[];
-    allByProvider: (meta?: StyleProviderMeta) => (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+    all: (meta?: GetActionPayload) => _elementor_editor_styles.StyleDefinition[];
+    allByProvider: (meta?: GetActionPayload) => (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
     register: (provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
 };
 
-declare function useAllStylesByProvider(meta?: StyleProviderMeta): (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
 
 declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 
-export { ELEMENTS_STYLES_PROVIDER_KEY, type StylesProvider, stylesRepository, useAllStylesByProvider };
+export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, stylesRepository, useAllStylesByProvider };

package/dist/index.js

@@ -36,10 +36,10 @@ var createStylesRepository = () => {
     providers.push(provider);
   };
   const allByProvider = (meta = {}) => {
-    return getProvidersByPriority().map((provider) => [provider.key, provider.get(meta)]);
+    return getProvidersByPriority().map((provider) => [provider.key, provider.actions.get(meta)]);
   };
   const all = (meta = {}) => {
-    return getProvidersByPriority().flatMap((provider) => provider.get(meta));
+    return getProvidersByPriority().flatMap((provider) => provider.actions.get(meta));
   };
   const subscribe = (cb) => {
     const unsubscribes = providers.map((provider) => {
@@ -75,12 +75,14 @@ var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 var elementsStylesProvider = {
   key: ELEMENTS_STYLES_PROVIDER_KEY,
   priority: 50,
-  get: (meta = {}) => {
-    let elements = (0, import_editor_elements.getElements)();
-    if ("elementId" in meta && meta.elementId) {
-      elements = elements.filter((element) => element.id === meta.elementId);
+  actions: {
+    get: (meta = {}) => {
+      let elements = (0, import_editor_elements.getElements)();
+      if ("elementId" in meta && meta.elementId) {
+        elements = elements.filter((element) => element.id === meta.elementId);
+      }
+      return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
     }
-    return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
   },
   subscribe: (cb) => {
     return (0, import_editor_v1_adapters.__privateListenTo)(

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/elements-styles-provider.ts","../src/init.ts"],"sourcesContent":["export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-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 StyleProviderMeta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tget: ( meta?: StyleProviderMeta ) => StyleDefinition[];\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProvidersByPriority = () => {\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: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().map( ( provider ) => [ provider.key, provider.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().flatMap( ( provider ) => provider.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\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\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 StyleProviderMeta } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: StyleProviderMeta = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } 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\tget: ( meta = {} ) => {\n\t\tlet elements = getElements();\n\n\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t}\n\n\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACWO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAA8B,CAAC;AAErC,QAAM,yBAAyB,MAAM;AACpC,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,OAA0B,CAAC,MAAO;AACzD,WAAO,uBAAuB,EAAE,IAAK,CAAE,aAAc,CAAE,SAAS,KAAK,SAAS,IAAK,IAAK,CAAE,CAAW;AAAA,EACtG;AAEA,QAAM,MAAM,CAAE,OAA0B,CAAC,MAAO;AAC/C,WAAO,uBAAuB,EAAE,QAAS,CAAE,aAAc,SAAS,IAAK,IAAK,CAAE;AAAA,EAC/E;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,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;AC5CO,IAAM,mBAAmB,uBAAuB;;;ACFvD,mBAAsC;AAK/B,SAAS,uBAAwB,OAA0B,CAAC,GAAI;AACtE,QAAM,CAAE,EAAE,QAAS,QAAI,yBAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,8BAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,cAAe,IAAK;AAC7C;;;ACXA,6BAA4B;AAC5B,gCAA+D;AAIxD,IAAM,+BAA+B;AAErC,IAAM,yBAAyC;AAAA,EACrD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,QAAI,eAAW,oCAAY;AAE3B,QAAK,eAAe,QAAQ,KAAK,WAAY;AAC5C,iBAAW,SAAS,OAAQ,CAAE,YAAa,QAAQ,OAAO,KAAK,SAAU;AAAA,IAC1E;AAEA,WAAO,SAAS,QAAS,CAAE,YAAa,OAAO,OAAQ,QAAQ,MAAM,IAAK,QAAS,KAAK,CAAC,CAAE,CAAE;AAAA,EAC9F;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,eAAO,0BAAAA;AAAA,MACN;AAAA,YACC,2CAAiB,iCAAkC;AAAA,YACnD,2CAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;ACzBO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AACnD;;;ALIA,KAAK;","names":["listenTo"]}
+{"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/elements-styles-provider.ts","../src/init.ts"],"sourcesContent":["export { type StylesProvider, type CreateActionPayload, type GetActionPayload } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-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' >;\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};\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProvidersByPriority = () => {\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 getProvidersByPriority().map( ( provider ) => [ provider.key, provider.actions.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: GetActionPayload = {} ) => {\n\t\treturn getProvidersByPriority().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\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\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 { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } 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[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACiBO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAA8B,CAAC;AAErC,QAAM,yBAAyB,MAAM;AACpC,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,uBAAuB,EAAE,IAAK,CAAE,aAAc,CAAE,SAAS,KAAK,SAAS,QAAQ,IAAK,IAAK,CAAE,CAAW;AAAA,EAC9G;AAEA,QAAM,MAAM,CAAE,OAAyB,CAAC,MAAO;AAC9C,WAAO,uBAAuB,EAAE,QAAS,CAAE,aAAc,SAAS,QAAQ,IAAK,IAAK,CAAE;AAAA,EACvF;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,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;AClDO,IAAM,mBAAmB,uBAAuB;;;ACFvD,mBAAsC;AAK/B,SAAS,uBAAwB,OAAyB,CAAC,GAAI;AACrE,QAAM,CAAE,EAAE,QAAS,QAAI,yBAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,8BAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,cAAe,IAAK;AAC7C;;;ACXA,6BAA4B;AAC5B,gCAA+D;AAIxD,IAAM,+BAA+B;AAErC,IAAM,yBAAyC;AAAA,EACrD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,UAAI,eAAW,oCAAY;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,eAAO,0BAAAA;AAAA,MACN;AAAA,YACC,2CAAiB,iCAAkC;AAAA,YACnD,2CAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;AC3BO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AACnD;;;ALIA,KAAK;","names":["listenTo"]}

package/dist/index.mjs

@@ -8,10 +8,10 @@ var createStylesRepository = () => {
     providers.push(provider);
   };
   const allByProvider = (meta = {}) => {
-    return getProvidersByPriority().map((provider) => [provider.key, provider.get(meta)]);
+    return getProvidersByPriority().map((provider) => [provider.key, provider.actions.get(meta)]);
   };
   const all = (meta = {}) => {
-    return getProvidersByPriority().flatMap((provider) => provider.get(meta));
+    return getProvidersByPriority().flatMap((provider) => provider.actions.get(meta));
   };
   const subscribe = (cb) => {
     const unsubscribes = providers.map((provider) => {
@@ -47,12 +47,14 @@ var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 var elementsStylesProvider = {
   key: ELEMENTS_STYLES_PROVIDER_KEY,
   priority: 50,
-  get: (meta = {}) => {
-    let elements = getElements();
-    if ("elementId" in meta && meta.elementId) {
-      elements = elements.filter((element) => element.id === meta.elementId);
+  actions: {
+    get: (meta = {}) => {
+      let elements = getElements();
+      if ("elementId" in meta && meta.elementId) {
+        elements = elements.filter((element) => element.id === meta.elementId);
+      }
+      return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
     }
-    return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
   },
   subscribe: (cb) => {
     return listenTo(

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/elements-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type StyleDefinition } from '@elementor/editor-styles';\n\nexport type StyleProviderMeta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tget: ( meta?: StyleProviderMeta ) => StyleDefinition[];\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProvidersByPriority = () => {\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: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().map( ( provider ) => [ provider.key, provider.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().flatMap( ( provider ) => provider.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\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\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 StyleProviderMeta } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: StyleProviderMeta = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } 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\tget: ( meta = {} ) => {\n\t\tlet elements = getElements();\n\n\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t}\n\n\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n}\n","export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":";AAWO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAA8B,CAAC;AAErC,QAAM,yBAAyB,MAAM;AACpC,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,OAA0B,CAAC,MAAO;AACzD,WAAO,uBAAuB,EAAE,IAAK,CAAE,aAAc,CAAE,SAAS,KAAK,SAAS,IAAK,IAAK,CAAE,CAAW;AAAA,EACtG;AAEA,QAAM,MAAM,CAAE,OAA0B,CAAC,MAAO;AAC/C,WAAO,uBAAuB,EAAE,QAAS,CAAE,aAAc,SAAS,IAAK,IAAK,CAAE;AAAA,EAC/E;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,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;AC5CO,IAAM,mBAAmB,uBAAuB;;;ACFvD,SAAS,WAAW,kBAAkB;AAK/B,SAAS,uBAAwB,OAA0B,CAAC,GAAI;AACtE,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,mBAAmB;AAC5B,SAAS,qBAAqB,UAAU,uBAAuB;AAIxD,IAAM,+BAA+B;AAErC,IAAM,yBAAyC;AAAA,EACrD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,QAAI,WAAW,YAAY;AAE3B,QAAK,eAAe,QAAQ,KAAK,WAAY;AAC5C,iBAAW,SAAS,OAAQ,CAAE,YAAa,QAAQ,OAAO,KAAK,SAAU;AAAA,IAC1E;AAEA,WAAO,SAAS,QAAS,CAAE,YAAa,OAAO,OAAQ,QAAQ,MAAM,IAAK,QAAS,KAAK,CAAC,CAAE,CAAE;AAAA,EAC9F;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,WAAO;AAAA,MACN;AAAA,QACC,gBAAiB,iCAAkC;AAAA,QACnD,gBAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;ACzBO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AACnD;;;ACIA,KAAK;","names":[]}
+{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-all-styles-by-provider.ts","../src/elements-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' >;\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};\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProvidersByPriority = () => {\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 getProvidersByPriority().map( ( provider ) => [ provider.key, provider.actions.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: GetActionPayload = {} ) => {\n\t\treturn getProvidersByPriority().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\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\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 { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } 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[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n}\n","export { type StylesProvider, type CreateActionPayload, type GetActionPayload } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":";AAiBO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAA8B,CAAC;AAErC,QAAM,yBAAyB,MAAM;AACpC,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,uBAAuB,EAAE,IAAK,CAAE,aAAc,CAAE,SAAS,KAAK,SAAS,QAAQ,IAAK,IAAK,CAAE,CAAW;AAAA,EAC9G;AAEA,QAAM,MAAM,CAAE,OAAyB,CAAC,MAAO;AAC9C,WAAO,uBAAuB,EAAE,QAAS,CAAE,aAAc,SAAS,QAAQ,IAAK,IAAK,CAAE;AAAA,EACvF;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,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;AClDO,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,mBAAmB;AAC5B,SAAS,qBAAqB,UAAU,uBAAuB;AAIxD,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;AAAA,QACC,gBAAiB,iCAAkC;AAAA,QACnD,gBAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;AC3BO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AACnD;;;ACIA,KAAK;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-styles-repository",
   "description": "Elementor Editor Styles Repository",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -33,7 +33,7 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-elements": "0.3.3",
+    "@elementor/editor-elements": "0.3.4",
     "@elementor/editor-styles": "0.3.2",
     "@elementor/editor-v1-adapters": "0.8.5"
   },

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

@@ -30,7 +30,7 @@ describe( 'elementsStylesProvider', () => {
 
 	it( 'should return all the styles attached to all the document elements', () => {
 		// Act.
-		const styles = elementsStylesProvider.get();
+		const styles = elementsStylesProvider.actions.get();
 
 		// Assert.
 		expect( styles ).toEqual( [
@@ -42,7 +42,7 @@ describe( 'elementsStylesProvider', () => {
 
 	it( 'should return all styles filtered by element', () => {
 		// Act.
-		const styles = elementsStylesProvider.get( { elementId: '1' } );
+		const styles = elementsStylesProvider.actions.get( { elementId: '1' } );
 
 		// Assert.
 		expect( styles ).toEqual( [

package/src/elements-styles-provider.ts

@@ -8,14 +8,16 @@ export const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';
 export const elementsStylesProvider: StylesProvider = {
 	key: ELEMENTS_STYLES_PROVIDER_KEY,
 	priority: 50,
-	get: ( meta = {} ) => {
-		let elements = getElements();
+	actions: {
+		get: ( meta = {} ) => {
+			let elements = getElements();
 
-		if ( 'elementId' in meta && meta.elementId ) {
-			elements = elements.filter( ( element ) => element.id === meta.elementId );
-		}
+			if ( 'elementId' in meta && meta.elementId ) {
+				elements = elements.filter( ( element ) => element.id === meta.elementId );
+			}
 
-		return elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );
+			return elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );
+		},
 	},
 	subscribe: ( cb ) => {
 		return listenTo(

package/src/hooks/use-all-styles-by-provider.ts

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

package/src/index.ts

@@ -1,4 +1,4 @@
-export { type StylesProvider } from './utils/create-styles-repository';
+export { type StylesProvider, type CreateActionPayload, type GetActionPayload } from './utils/create-styles-repository';
 
 export { stylesRepository } from './styles-repository';
 export { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';

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

@@ -80,7 +80,9 @@ const createMockProvider = ( key: string, priority: number, styleDefinitions: St
 	const provider: StylesProvider = {
 		key,
 		priority,
-		get: () => styleDefinitions,
+		actions: {
+			get: () => styleDefinitions,
+		},
 		subscribe: ( cb ) => {
 			subscribers.add( cb );
 

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

@@ -1,11 +1,17 @@
 import { type StyleDefinition } from '@elementor/editor-styles';
 
-export type StyleProviderMeta = Record< string, unknown >;
+export 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 StylesProvider = {
 	key: string;
 	priority: number;
-	get: ( meta?: StyleProviderMeta ) => StyleDefinition[];
+	actions: {
+		get: ( meta?: GetActionPayload ) => StyleDefinition[];
+		create?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;
+	};
 	subscribe: ( callback: () => void ) => () => void;
 };
 
@@ -20,12 +26,12 @@ export const createStylesRepository = () => {
 		providers.push( provider );
 	};
 
-	const allByProvider = ( meta: StyleProviderMeta = {} ) => {
-		return getProvidersByPriority().map( ( provider ) => [ provider.key, provider.get( meta ) ] as const );
+	const allByProvider = ( meta: GetActionPayload = {} ) => {
+		return getProvidersByPriority().map( ( provider ) => [ provider.key, provider.actions.get( meta ) ] as const );
 	};
 
-	const all = ( meta: StyleProviderMeta = {} ) => {
-		return getProvidersByPriority().flatMap( ( provider ) => provider.get( meta ) );
+	const all = ( meta: GetActionPayload = {} ) => {
+		return getProvidersByPriority().flatMap( ( provider ) => provider.actions.get( meta ) );
 	};
 
 	const subscribe = ( cb: () => void ) => {