@elementor/editor-styles-repository 0.3.2 → 0.4.0
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 +20 -0
- package/dist/index.d.mts +15 -3
- package/dist/index.d.ts +15 -3
- package/dist/index.js +26 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +24 -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 +7 -1
- package/src/utils/__tests__/create-styles-repository.test.ts +2 -2
- package/src/utils/create-styles-repository.ts +15 -3
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @elementor/editor-styles-repository@0.
|
|
2
|
+
> @elementor/editor-styles-repository@0.4.0 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.77 KB[39m
|
|
14
|
+
[32mESM[39m [1mdist/index.mjs.map [22m[32m6.98 KB[39m
|
|
15
|
+
[32mESM[39m ⚡️ Build success in 58ms
|
|
16
|
+
[32mCJS[39m [1mdist/index.js [22m[32m4.13 KB[39m
|
|
17
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m7.04 KB[39m
|
|
18
|
+
[32mCJS[39m ⚡️ Build success in 62ms
|
|
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 4642ms
|
|
21
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.84 KB[39m
|
|
22
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.84 KB[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @elementor/editor-styles-repository
|
|
2
2
|
|
|
3
|
+
## 0.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 534bfbf: Add editable field to CSS class selector.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- @elementor/editor-elements@0.4.1
|
|
12
|
+
- @elementor/editor-styles@0.5.1
|
|
13
|
+
|
|
14
|
+
## 0.3.3
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- fbde10d: Add UX flow for creating new global class
|
|
19
|
+
- Updated dependencies [a2245c5]
|
|
20
|
+
- @elementor/editor-elements@0.4.0
|
|
21
|
+
- @elementor/editor-styles@0.5.0
|
|
22
|
+
|
|
3
23
|
## 0.3.2
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
package/dist/index.d.mts
CHANGED
|
@@ -4,25 +4,37 @@ import { StyleDefinition } from '@elementor/editor-styles';
|
|
|
4
4
|
type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
|
|
5
5
|
type GetActionPayload = Record<string, unknown>;
|
|
6
6
|
type CreateActionPayload = MakeOptional<StyleDefinition, 'id' | 'type' | 'variants'>;
|
|
7
|
+
type UpdateActionPayload = MakeOptional<StyleDefinition, 'label' | 'variants' | 'type'>;
|
|
7
8
|
type StylesProvider = {
|
|
8
9
|
key: string;
|
|
9
10
|
priority: number;
|
|
10
11
|
actions: {
|
|
11
12
|
get: (meta?: GetActionPayload) => StyleDefinition[];
|
|
12
13
|
create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
|
|
14
|
+
update?: (data: UpdateActionPayload) => Promise<StyleDefinition>;
|
|
13
15
|
};
|
|
14
16
|
subscribe: (callback: () => void) => () => void;
|
|
17
|
+
labels?: {
|
|
18
|
+
singular: string;
|
|
19
|
+
plural: string;
|
|
20
|
+
};
|
|
15
21
|
};
|
|
16
22
|
|
|
17
23
|
declare const stylesRepository: {
|
|
18
24
|
all: (meta?: GetActionPayload) => _elementor_editor_styles.StyleDefinition[];
|
|
19
|
-
allByProvider: (meta?: GetActionPayload) => (readonly [
|
|
25
|
+
allByProvider: (meta?: GetActionPayload) => (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
|
|
20
26
|
register: (provider: StylesProvider) => void;
|
|
21
27
|
subscribe: (cb: () => void) => () => void;
|
|
28
|
+
getProviders: () => StylesProvider[];
|
|
29
|
+
getProviderByKey: (key: string) => StylesProvider | undefined;
|
|
22
30
|
};
|
|
23
31
|
|
|
24
|
-
declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [
|
|
32
|
+
declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
|
|
33
|
+
|
|
34
|
+
type CreateAction = Required<StylesProvider['actions']>['create'];
|
|
35
|
+
type CreateTuple = [StylesProvider, CreateAction];
|
|
36
|
+
declare function useCreateActionsByProvider(): CreateTuple[];
|
|
25
37
|
|
|
26
38
|
declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
|
|
27
39
|
|
|
28
|
-
export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, stylesRepository, useAllStylesByProvider };
|
|
40
|
+
export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, type UpdateActionPayload, stylesRepository, useAllStylesByProvider, useCreateActionsByProvider };
|
package/dist/index.d.ts
CHANGED
|
@@ -4,25 +4,37 @@ import { StyleDefinition } from '@elementor/editor-styles';
|
|
|
4
4
|
type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
|
|
5
5
|
type GetActionPayload = Record<string, unknown>;
|
|
6
6
|
type CreateActionPayload = MakeOptional<StyleDefinition, 'id' | 'type' | 'variants'>;
|
|
7
|
+
type UpdateActionPayload = MakeOptional<StyleDefinition, 'label' | 'variants' | 'type'>;
|
|
7
8
|
type StylesProvider = {
|
|
8
9
|
key: string;
|
|
9
10
|
priority: number;
|
|
10
11
|
actions: {
|
|
11
12
|
get: (meta?: GetActionPayload) => StyleDefinition[];
|
|
12
13
|
create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
|
|
14
|
+
update?: (data: UpdateActionPayload) => Promise<StyleDefinition>;
|
|
13
15
|
};
|
|
14
16
|
subscribe: (callback: () => void) => () => void;
|
|
17
|
+
labels?: {
|
|
18
|
+
singular: string;
|
|
19
|
+
plural: string;
|
|
20
|
+
};
|
|
15
21
|
};
|
|
16
22
|
|
|
17
23
|
declare const stylesRepository: {
|
|
18
24
|
all: (meta?: GetActionPayload) => _elementor_editor_styles.StyleDefinition[];
|
|
19
|
-
allByProvider: (meta?: GetActionPayload) => (readonly [
|
|
25
|
+
allByProvider: (meta?: GetActionPayload) => (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
|
|
20
26
|
register: (provider: StylesProvider) => void;
|
|
21
27
|
subscribe: (cb: () => void) => () => void;
|
|
28
|
+
getProviders: () => StylesProvider[];
|
|
29
|
+
getProviderByKey: (key: string) => StylesProvider | undefined;
|
|
22
30
|
};
|
|
23
31
|
|
|
24
|
-
declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [
|
|
32
|
+
declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
|
|
33
|
+
|
|
34
|
+
type CreateAction = Required<StylesProvider['actions']>['create'];
|
|
35
|
+
type CreateTuple = [StylesProvider, CreateAction];
|
|
36
|
+
declare function useCreateActionsByProvider(): CreateTuple[];
|
|
25
37
|
|
|
26
38
|
declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
|
|
27
39
|
|
|
28
|
-
export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, stylesRepository, useAllStylesByProvider };
|
|
40
|
+
export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, type UpdateActionPayload, 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) => {
|
|
@@ -49,11 +50,16 @@ var createStylesRepository = () => {
|
|
|
49
50
|
unsubscribes.forEach((unsubscribe) => unsubscribe());
|
|
50
51
|
};
|
|
51
52
|
};
|
|
53
|
+
const getProviderByKey = (key) => {
|
|
54
|
+
return providers.find((provider) => provider.key === key);
|
|
55
|
+
};
|
|
52
56
|
return {
|
|
53
57
|
all,
|
|
54
58
|
allByProvider,
|
|
55
59
|
register,
|
|
56
|
-
subscribe
|
|
60
|
+
subscribe,
|
|
61
|
+
getProviders,
|
|
62
|
+
getProviderByKey
|
|
57
63
|
};
|
|
58
64
|
};
|
|
59
65
|
|
|
@@ -68,6 +74,19 @@ function useAllStylesByProvider(meta = {}) {
|
|
|
68
74
|
return stylesRepository.allByProvider(meta);
|
|
69
75
|
}
|
|
70
76
|
|
|
77
|
+
// src/hooks/use-create-actions-by-provider.ts
|
|
78
|
+
var import_react2 = require("react");
|
|
79
|
+
function useCreateActionsByProvider() {
|
|
80
|
+
return (0, import_react2.useMemo)(() => {
|
|
81
|
+
return stylesRepository.getProviders().map((provider) => {
|
|
82
|
+
if (!provider.actions.create) {
|
|
83
|
+
return null;
|
|
84
|
+
}
|
|
85
|
+
return [provider, provider.actions.create];
|
|
86
|
+
}).filter((item) => !!item);
|
|
87
|
+
}, []);
|
|
88
|
+
}
|
|
89
|
+
|
|
71
90
|
// src/elements-styles-provider.ts
|
|
72
91
|
var import_editor_elements = require("@elementor/editor-elements");
|
|
73
92
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
@@ -106,6 +125,7 @@ init();
|
|
|
106
125
|
0 && (module.exports = {
|
|
107
126
|
ELEMENTS_STYLES_PROVIDER_KEY,
|
|
108
127
|
stylesRepository,
|
|
109
|
-
useAllStylesByProvider
|
|
128
|
+
useAllStylesByProvider,
|
|
129
|
+
useCreateActionsByProvider
|
|
110
130
|
});
|
|
111
131
|
//# 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 {
|
|
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 {\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 { 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;;;ACuBO,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,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;;;ANUA,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) => {
|
|
@@ -21,11 +21,16 @@ var createStylesRepository = () => {
|
|
|
21
21
|
unsubscribes.forEach((unsubscribe) => unsubscribe());
|
|
22
22
|
};
|
|
23
23
|
};
|
|
24
|
+
const getProviderByKey = (key) => {
|
|
25
|
+
return providers.find((provider) => provider.key === key);
|
|
26
|
+
};
|
|
24
27
|
return {
|
|
25
28
|
all,
|
|
26
29
|
allByProvider,
|
|
27
30
|
register,
|
|
28
|
-
subscribe
|
|
31
|
+
subscribe,
|
|
32
|
+
getProviders,
|
|
33
|
+
getProviderByKey
|
|
29
34
|
};
|
|
30
35
|
};
|
|
31
36
|
|
|
@@ -40,6 +45,19 @@ function useAllStylesByProvider(meta = {}) {
|
|
|
40
45
|
return stylesRepository.allByProvider(meta);
|
|
41
46
|
}
|
|
42
47
|
|
|
48
|
+
// src/hooks/use-create-actions-by-provider.ts
|
|
49
|
+
import { useMemo } from "react";
|
|
50
|
+
function useCreateActionsByProvider() {
|
|
51
|
+
return useMemo(() => {
|
|
52
|
+
return stylesRepository.getProviders().map((provider) => {
|
|
53
|
+
if (!provider.actions.create) {
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
return [provider, provider.actions.create];
|
|
57
|
+
}).filter((item) => !!item);
|
|
58
|
+
}, []);
|
|
59
|
+
}
|
|
60
|
+
|
|
43
61
|
// src/elements-styles-provider.ts
|
|
44
62
|
import { getElements } from "@elementor/editor-elements";
|
|
45
63
|
import { __privateListenTo as listenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
|
|
@@ -77,6 +95,7 @@ init();
|
|
|
77
95
|
export {
|
|
78
96
|
ELEMENTS_STYLES_PROVIDER_KEY,
|
|
79
97
|
stylesRepository,
|
|
80
|
-
useAllStylesByProvider
|
|
98
|
+
useAllStylesByProvider,
|
|
99
|
+
useCreateActionsByProvider
|
|
81
100
|
};
|
|
82
101
|
//# 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' >;\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 { 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 {\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,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;;;ACUA,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.
|
|
4
|
+
"version": "0.4.0",
|
|
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.1",
|
|
37
|
+
"@elementor/editor-styles": "0.5.1",
|
|
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
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export {
|
|
2
|
+
type StylesProvider,
|
|
3
|
+
type CreateActionPayload,
|
|
4
|
+
type GetActionPayload,
|
|
5
|
+
type UpdateActionPayload,
|
|
6
|
+
} from './utils/create-styles-repository';
|
|
2
7
|
|
|
3
8
|
export { stylesRepository } from './styles-repository';
|
|
4
9
|
export { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';
|
|
10
|
+
export { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';
|
|
5
11
|
|
|
6
12
|
export { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';
|
|
7
13
|
|
|
@@ -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
|
|
|
@@ -4,6 +4,7 @@ export type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;
|
|
|
4
4
|
|
|
5
5
|
export type GetActionPayload = Record< string, unknown >;
|
|
6
6
|
export type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;
|
|
7
|
+
export type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;
|
|
7
8
|
|
|
8
9
|
export type StylesProvider = {
|
|
9
10
|
key: string;
|
|
@@ -11,14 +12,19 @@ export type StylesProvider = {
|
|
|
11
12
|
actions: {
|
|
12
13
|
get: ( meta?: GetActionPayload ) => StyleDefinition[];
|
|
13
14
|
create?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;
|
|
15
|
+
update?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;
|
|
14
16
|
};
|
|
15
17
|
subscribe: ( callback: () => void ) => () => void;
|
|
18
|
+
labels?: {
|
|
19
|
+
singular: string;
|
|
20
|
+
plural: string;
|
|
21
|
+
};
|
|
16
22
|
};
|
|
17
23
|
|
|
18
24
|
export const createStylesRepository = () => {
|
|
19
25
|
const providers: StylesProvider[] = [];
|
|
20
26
|
|
|
21
|
-
const
|
|
27
|
+
const getProviders = () => {
|
|
22
28
|
return providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );
|
|
23
29
|
};
|
|
24
30
|
|
|
@@ -27,11 +33,11 @@ export const createStylesRepository = () => {
|
|
|
27
33
|
};
|
|
28
34
|
|
|
29
35
|
const allByProvider = ( meta: GetActionPayload = {} ) => {
|
|
30
|
-
return
|
|
36
|
+
return getProviders().map( ( provider ) => [ provider, provider.actions.get( meta ) ] as const );
|
|
31
37
|
};
|
|
32
38
|
|
|
33
39
|
const all = ( meta: GetActionPayload = {} ) => {
|
|
34
|
-
return
|
|
40
|
+
return getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );
|
|
35
41
|
};
|
|
36
42
|
|
|
37
43
|
const subscribe = ( cb: () => void ) => {
|
|
@@ -44,10 +50,16 @@ export const createStylesRepository = () => {
|
|
|
44
50
|
};
|
|
45
51
|
};
|
|
46
52
|
|
|
53
|
+
const getProviderByKey = ( key: string ) => {
|
|
54
|
+
return providers.find( ( provider ) => provider.key === key );
|
|
55
|
+
};
|
|
56
|
+
|
|
47
57
|
return {
|
|
48
58
|
all,
|
|
49
59
|
allByProvider,
|
|
50
60
|
register,
|
|
51
61
|
subscribe,
|
|
62
|
+
getProviders,
|
|
63
|
+
getProviderByKey,
|
|
52
64
|
};
|
|
53
65
|
};
|