@elementor/editor-styles-repository 0.3.1 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +17 -0
- package/dist/index.d.mts +12 -3
- package/dist/index.d.ts +12 -3
- package/dist/index.js +22 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +20 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/hooks/use-create-actions-by-provider.ts +22 -0
- package/src/index.ts +1 -0
- package/src/utils/__tests__/create-styles-repository.test.ts +2 -2
- package/src/utils/create-styles-repository.ts +8 -3
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @elementor/editor-styles-repository@0.3.
|
|
2
|
+
> @elementor/editor-styles-repository@0.3.3 build
|
|
3
3
|
> tsup --config=../../tsup.build.ts
|
|
4
4
|
|
|
5
5
|
[34mCLI[39m Building entry: src/index.ts
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
[34mCLI[39m Cleaning output folder
|
|
11
11
|
[34mESM[39m Build start
|
|
12
12
|
[34mCJS[39m Build start
|
|
13
|
-
[32mESM[39m [1mdist/index.mjs [22m[32m2.
|
|
14
|
-
[32mESM[39m [1mdist/index.mjs.map [22m[
|
|
15
|
-
[32mESM[39m ⚡️ Build success in
|
|
16
|
-
[32mCJS[39m [1mdist/index.js [22m[
|
|
17
|
-
[32mCJS[39m [1mdist/index.js.map [22m[
|
|
18
|
-
[32mCJS[39m ⚡️ Build success in
|
|
13
|
+
[32mESM[39m [1mdist/index.mjs [22m[32m2.65 KB[39m
|
|
14
|
+
[32mESM[39m [1mdist/index.mjs.map [22m[32m6.53 KB[39m
|
|
15
|
+
[32mESM[39m ⚡️ Build success in 56ms
|
|
16
|
+
[32mCJS[39m [1mdist/index.js [22m[32m4.01 KB[39m
|
|
17
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m6.60 KB[39m
|
|
18
|
+
[32mCJS[39m ⚡️ Build success in 58ms
|
|
19
19
|
[34mDTS[39m Build start
|
|
20
|
-
[32mDTS[39m ⚡️ Build success in
|
|
21
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.
|
|
22
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.
|
|
20
|
+
[32mDTS[39m ⚡️ Build success in 4636ms
|
|
21
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.59 KB[39m
|
|
22
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.59 KB[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @elementor/editor-styles-repository
|
|
2
2
|
|
|
3
|
+
## 0.3.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fbde10d: Add UX flow for creating new global class
|
|
8
|
+
- Updated dependencies [a2245c5]
|
|
9
|
+
- @elementor/editor-elements@0.4.0
|
|
10
|
+
- @elementor/editor-styles@0.5.0
|
|
11
|
+
|
|
12
|
+
## 0.3.2
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies [b18d1a6]
|
|
17
|
+
- @elementor/editor-styles@0.4.0
|
|
18
|
+
- @elementor/editor-elements@0.3.5
|
|
19
|
+
|
|
3
20
|
## 0.3.1
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
package/dist/index.d.mts
CHANGED
|
@@ -12,17 +12,26 @@ type StylesProvider = {
|
|
|
12
12
|
create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
|
|
13
13
|
};
|
|
14
14
|
subscribe: (callback: () => void) => () => void;
|
|
15
|
+
labels?: {
|
|
16
|
+
singular: string;
|
|
17
|
+
plural: string;
|
|
18
|
+
};
|
|
15
19
|
};
|
|
16
20
|
|
|
17
21
|
declare const stylesRepository: {
|
|
18
22
|
all: (meta?: GetActionPayload) => _elementor_editor_styles.StyleDefinition[];
|
|
19
|
-
allByProvider: (meta?: GetActionPayload) => (readonly [
|
|
23
|
+
allByProvider: (meta?: GetActionPayload) => (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
|
|
20
24
|
register: (provider: StylesProvider) => void;
|
|
21
25
|
subscribe: (cb: () => void) => () => void;
|
|
26
|
+
getProviders: () => StylesProvider[];
|
|
22
27
|
};
|
|
23
28
|
|
|
24
|
-
declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [
|
|
29
|
+
declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
|
|
30
|
+
|
|
31
|
+
type CreateAction = Required<StylesProvider['actions']>['create'];
|
|
32
|
+
type CreateTuple = [StylesProvider, CreateAction];
|
|
33
|
+
declare function useCreateActionsByProvider(): CreateTuple[];
|
|
25
34
|
|
|
26
35
|
declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
|
|
27
36
|
|
|
28
|
-
export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, stylesRepository, useAllStylesByProvider };
|
|
37
|
+
export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, stylesRepository, useAllStylesByProvider, useCreateActionsByProvider };
|
package/dist/index.d.ts
CHANGED
|
@@ -12,17 +12,26 @@ type StylesProvider = {
|
|
|
12
12
|
create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
|
|
13
13
|
};
|
|
14
14
|
subscribe: (callback: () => void) => () => void;
|
|
15
|
+
labels?: {
|
|
16
|
+
singular: string;
|
|
17
|
+
plural: string;
|
|
18
|
+
};
|
|
15
19
|
};
|
|
16
20
|
|
|
17
21
|
declare const stylesRepository: {
|
|
18
22
|
all: (meta?: GetActionPayload) => _elementor_editor_styles.StyleDefinition[];
|
|
19
|
-
allByProvider: (meta?: GetActionPayload) => (readonly [
|
|
23
|
+
allByProvider: (meta?: GetActionPayload) => (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
|
|
20
24
|
register: (provider: StylesProvider) => void;
|
|
21
25
|
subscribe: (cb: () => void) => () => void;
|
|
26
|
+
getProviders: () => StylesProvider[];
|
|
22
27
|
};
|
|
23
28
|
|
|
24
|
-
declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [
|
|
29
|
+
declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
|
|
30
|
+
|
|
31
|
+
type CreateAction = Required<StylesProvider['actions']>['create'];
|
|
32
|
+
type CreateTuple = [StylesProvider, CreateAction];
|
|
33
|
+
declare function useCreateActionsByProvider(): CreateTuple[];
|
|
25
34
|
|
|
26
35
|
declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
|
|
27
36
|
|
|
28
|
-
export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, stylesRepository, useAllStylesByProvider };
|
|
37
|
+
export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, stylesRepository, useAllStylesByProvider, useCreateActionsByProvider };
|
package/dist/index.js
CHANGED
|
@@ -22,24 +22,25 @@ var index_exports = {};
|
|
|
22
22
|
__export(index_exports, {
|
|
23
23
|
ELEMENTS_STYLES_PROVIDER_KEY: () => ELEMENTS_STYLES_PROVIDER_KEY,
|
|
24
24
|
stylesRepository: () => stylesRepository,
|
|
25
|
-
useAllStylesByProvider: () => useAllStylesByProvider
|
|
25
|
+
useAllStylesByProvider: () => useAllStylesByProvider,
|
|
26
|
+
useCreateActionsByProvider: () => useCreateActionsByProvider
|
|
26
27
|
});
|
|
27
28
|
module.exports = __toCommonJS(index_exports);
|
|
28
29
|
|
|
29
30
|
// src/utils/create-styles-repository.ts
|
|
30
31
|
var createStylesRepository = () => {
|
|
31
32
|
const providers = [];
|
|
32
|
-
const
|
|
33
|
+
const getProviders = () => {
|
|
33
34
|
return providers.slice(0).sort((a, b) => a.priority > b.priority ? -1 : 1);
|
|
34
35
|
};
|
|
35
36
|
const register = (provider) => {
|
|
36
37
|
providers.push(provider);
|
|
37
38
|
};
|
|
38
39
|
const allByProvider = (meta = {}) => {
|
|
39
|
-
return
|
|
40
|
+
return getProviders().map((provider) => [provider, provider.actions.get(meta)]);
|
|
40
41
|
};
|
|
41
42
|
const all = (meta = {}) => {
|
|
42
|
-
return
|
|
43
|
+
return getProviders().flatMap((provider) => provider.actions.get(meta));
|
|
43
44
|
};
|
|
44
45
|
const subscribe = (cb) => {
|
|
45
46
|
const unsubscribes = providers.map((provider) => {
|
|
@@ -53,7 +54,8 @@ var createStylesRepository = () => {
|
|
|
53
54
|
all,
|
|
54
55
|
allByProvider,
|
|
55
56
|
register,
|
|
56
|
-
subscribe
|
|
57
|
+
subscribe,
|
|
58
|
+
getProviders
|
|
57
59
|
};
|
|
58
60
|
};
|
|
59
61
|
|
|
@@ -68,6 +70,19 @@ function useAllStylesByProvider(meta = {}) {
|
|
|
68
70
|
return stylesRepository.allByProvider(meta);
|
|
69
71
|
}
|
|
70
72
|
|
|
73
|
+
// src/hooks/use-create-actions-by-provider.ts
|
|
74
|
+
var import_react2 = require("react");
|
|
75
|
+
function useCreateActionsByProvider() {
|
|
76
|
+
return (0, import_react2.useMemo)(() => {
|
|
77
|
+
return stylesRepository.getProviders().map((provider) => {
|
|
78
|
+
if (!provider.actions.create) {
|
|
79
|
+
return null;
|
|
80
|
+
}
|
|
81
|
+
return [provider, provider.actions.create];
|
|
82
|
+
}).filter((item) => !!item);
|
|
83
|
+
}, []);
|
|
84
|
+
}
|
|
85
|
+
|
|
71
86
|
// src/elements-styles-provider.ts
|
|
72
87
|
var import_editor_elements = require("@elementor/editor-elements");
|
|
73
88
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
@@ -106,6 +121,7 @@ init();
|
|
|
106
121
|
0 && (module.exports = {
|
|
107
122
|
ELEMENTS_STYLES_PROVIDER_KEY,
|
|
108
123
|
stylesRepository,
|
|
109
|
-
useAllStylesByProvider
|
|
124
|
+
useAllStylesByProvider,
|
|
125
|
+
useCreateActionsByProvider
|
|
110
126
|
});
|
|
111
127
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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, 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
|
|
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/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';\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' >;\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\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\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\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 { 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;AAAA;;;ACqBO,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,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;ACvDO,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,IAAAA,gBAAwB;AAQjB,SAAS,6BAA6B;AAC5C,aAAO,uBAAS,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,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,0BAAAC;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;;;ANKA,KAAK;","names":["import_react","listenTo"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
// src/utils/create-styles-repository.ts
|
|
2
2
|
var createStylesRepository = () => {
|
|
3
3
|
const providers = [];
|
|
4
|
-
const
|
|
4
|
+
const getProviders = () => {
|
|
5
5
|
return providers.slice(0).sort((a, b) => a.priority > b.priority ? -1 : 1);
|
|
6
6
|
};
|
|
7
7
|
const register = (provider) => {
|
|
8
8
|
providers.push(provider);
|
|
9
9
|
};
|
|
10
10
|
const allByProvider = (meta = {}) => {
|
|
11
|
-
return
|
|
11
|
+
return getProviders().map((provider) => [provider, provider.actions.get(meta)]);
|
|
12
12
|
};
|
|
13
13
|
const all = (meta = {}) => {
|
|
14
|
-
return
|
|
14
|
+
return getProviders().flatMap((provider) => provider.actions.get(meta));
|
|
15
15
|
};
|
|
16
16
|
const subscribe = (cb) => {
|
|
17
17
|
const unsubscribes = providers.map((provider) => {
|
|
@@ -25,7 +25,8 @@ var createStylesRepository = () => {
|
|
|
25
25
|
all,
|
|
26
26
|
allByProvider,
|
|
27
27
|
register,
|
|
28
|
-
subscribe
|
|
28
|
+
subscribe,
|
|
29
|
+
getProviders
|
|
29
30
|
};
|
|
30
31
|
};
|
|
31
32
|
|
|
@@ -40,6 +41,19 @@ function useAllStylesByProvider(meta = {}) {
|
|
|
40
41
|
return stylesRepository.allByProvider(meta);
|
|
41
42
|
}
|
|
42
43
|
|
|
44
|
+
// src/hooks/use-create-actions-by-provider.ts
|
|
45
|
+
import { useMemo } from "react";
|
|
46
|
+
function useCreateActionsByProvider() {
|
|
47
|
+
return useMemo(() => {
|
|
48
|
+
return stylesRepository.getProviders().map((provider) => {
|
|
49
|
+
if (!provider.actions.create) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
return [provider, provider.actions.create];
|
|
53
|
+
}).filter((item) => !!item);
|
|
54
|
+
}, []);
|
|
55
|
+
}
|
|
56
|
+
|
|
43
57
|
// src/elements-styles-provider.ts
|
|
44
58
|
import { getElements } from "@elementor/editor-elements";
|
|
45
59
|
import { __privateListenTo as listenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
|
|
@@ -77,6 +91,7 @@ init();
|
|
|
77
91
|
export {
|
|
78
92
|
ELEMENTS_STYLES_PROVIDER_KEY,
|
|
79
93
|
stylesRepository,
|
|
80
|
-
useAllStylesByProvider
|
|
94
|
+
useAllStylesByProvider,
|
|
95
|
+
useCreateActionsByProvider
|
|
81
96
|
};
|
|
82
97
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +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 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
|
|
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/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\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\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\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 { 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';\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":";AAqBO,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,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;ACvDO,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,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;;;ACKA,KAAK;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor-styles-repository",
|
|
3
3
|
"description": "Elementor Editor Styles Repository",
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.3",
|
|
5
5
|
"private": false,
|
|
6
6
|
"author": "Elementor Team",
|
|
7
7
|
"homepage": "https://elementor.com/",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@elementor/editor-elements": "0.
|
|
37
|
-
"@elementor/editor-styles": "0.
|
|
36
|
+
"@elementor/editor-elements": "0.4.0",
|
|
37
|
+
"@elementor/editor-styles": "0.5.0",
|
|
38
38
|
"@elementor/editor-v1-adapters": "0.8.5"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
|
|
3
|
+
import { stylesRepository } from '../styles-repository';
|
|
4
|
+
import { type StylesProvider } from '../utils/create-styles-repository';
|
|
5
|
+
|
|
6
|
+
type CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];
|
|
7
|
+
type CreateTuple = [ StylesProvider, CreateAction ];
|
|
8
|
+
|
|
9
|
+
export function useCreateActionsByProvider() {
|
|
10
|
+
return useMemo( () => {
|
|
11
|
+
return stylesRepository
|
|
12
|
+
.getProviders()
|
|
13
|
+
.map< CreateTuple | null >( ( provider ) => {
|
|
14
|
+
if ( ! provider.actions.create ) {
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
return [ provider, provider.actions.create ];
|
|
19
|
+
} )
|
|
20
|
+
.filter( ( item ) => !! item );
|
|
21
|
+
}, [] );
|
|
22
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { type StylesProvider, type CreateActionPayload, type GetActionPayload }
|
|
|
2
2
|
|
|
3
3
|
export { stylesRepository } from './styles-repository';
|
|
4
4
|
export { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';
|
|
5
|
+
export { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';
|
|
5
6
|
|
|
6
7
|
export { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';
|
|
7
8
|
|
|
@@ -28,8 +28,8 @@ describe( 'createStylesRepository', () => {
|
|
|
28
28
|
|
|
29
29
|
// Assert
|
|
30
30
|
expect( repo.allByProvider() ).toEqual( [
|
|
31
|
-
[ 'mock2', [ styleDef2, styleDef3 ] ],
|
|
32
|
-
[ 'mock1', [ styleDef1 ] ],
|
|
31
|
+
[ expect.objectContaining( { key: 'mock2' } ), [ styleDef2, styleDef3 ] ],
|
|
32
|
+
[ expect.objectContaining( { key: 'mock1' } ), [ styleDef1 ] ],
|
|
33
33
|
] );
|
|
34
34
|
} );
|
|
35
35
|
|
|
@@ -13,12 +13,16 @@ export type StylesProvider = {
|
|
|
13
13
|
create?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;
|
|
14
14
|
};
|
|
15
15
|
subscribe: ( callback: () => void ) => () => void;
|
|
16
|
+
labels?: {
|
|
17
|
+
singular: string;
|
|
18
|
+
plural: string;
|
|
19
|
+
};
|
|
16
20
|
};
|
|
17
21
|
|
|
18
22
|
export const createStylesRepository = () => {
|
|
19
23
|
const providers: StylesProvider[] = [];
|
|
20
24
|
|
|
21
|
-
const
|
|
25
|
+
const getProviders = () => {
|
|
22
26
|
return providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );
|
|
23
27
|
};
|
|
24
28
|
|
|
@@ -27,11 +31,11 @@ export const createStylesRepository = () => {
|
|
|
27
31
|
};
|
|
28
32
|
|
|
29
33
|
const allByProvider = ( meta: GetActionPayload = {} ) => {
|
|
30
|
-
return
|
|
34
|
+
return getProviders().map( ( provider ) => [ provider, provider.actions.get( meta ) ] as const );
|
|
31
35
|
};
|
|
32
36
|
|
|
33
37
|
const all = ( meta: GetActionPayload = {} ) => {
|
|
34
|
-
return
|
|
38
|
+
return getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );
|
|
35
39
|
};
|
|
36
40
|
|
|
37
41
|
const subscribe = ( cb: () => void ) => {
|
|
@@ -49,5 +53,6 @@ export const createStylesRepository = () => {
|
|
|
49
53
|
allByProvider,
|
|
50
54
|
register,
|
|
51
55
|
subscribe,
|
|
56
|
+
getProviders,
|
|
52
57
|
};
|
|
53
58
|
};
|