@elementor/editor-styles-repository 0.6.0 → 0.7.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 +11 -11
- package/CHANGELOG.md +29 -0
- package/dist/index.d.mts +10 -5
- package/dist/index.d.ts +10 -5
- package/dist/index.js +28 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +27 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +9 -5
- package/src/__tests__/element-base-styles-provider.test.ts +15 -2
- package/src/__tests__/elements-styles-provider.test.ts +33 -1
- package/src/element-base-styles-provider.ts +8 -2
- package/src/elements-styles-provider.ts +2 -0
- package/src/index.ts +2 -2
- package/src/utils/__tests__/create-styles-repository.test.ts +98 -32
- package/src/utils/create-styles-repository.ts +28 -5
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
|
|
2
|
-
> @elementor/editor-styles-repository@0.
|
|
2
|
+
> @elementor/editor-styles-repository@0.7.0 build
|
|
3
3
|
> tsup --config=../../tsup.build.ts
|
|
4
4
|
|
|
5
5
|
[34mCLI[39m Building entry: src/index.ts
|
|
6
6
|
[34mCLI[39m Using tsconfig: ../../../tsconfig.json
|
|
7
|
-
[34mCLI[39m tsup v8.
|
|
7
|
+
[34mCLI[39m tsup v8.4.0
|
|
8
8
|
[34mCLI[39m Using tsup config: /home/runner/work/elementor-packages/elementor-packages/tsup.build.ts
|
|
9
9
|
[34mCLI[39m Target: esnext
|
|
10
10
|
[34mCLI[39m Cleaning output folder
|
|
11
11
|
[34mESM[39m Build start
|
|
12
12
|
[34mCJS[39m Build start
|
|
13
|
-
[32mCJS[39m [1mdist/index.js [22m[
|
|
14
|
-
[32mCJS[39m [1mdist/index.js.map [22m[
|
|
15
|
-
[32mCJS[39m ⚡️ Build success in
|
|
16
|
-
[32mESM[39m [1mdist/index.mjs [22m[
|
|
17
|
-
[32mESM[39m [1mdist/index.mjs.map [22m[
|
|
18
|
-
[32mESM[39m ⚡️ Build success in
|
|
13
|
+
[32mCJS[39m [1mdist/index.js [22m[32m6.15 KB[39m
|
|
14
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m10.97 KB[39m
|
|
15
|
+
[32mCJS[39m ⚡️ Build success in 71ms
|
|
16
|
+
[32mESM[39m [1mdist/index.mjs [22m[32m4.71 KB[39m
|
|
17
|
+
[32mESM[39m [1mdist/index.mjs.map [22m[32m10.88 KB[39m
|
|
18
|
+
[32mESM[39m ⚡️ Build success in 80ms
|
|
19
19
|
[34mDTS[39m Build start
|
|
20
|
-
[32mDTS[39m ⚡️ Build success in
|
|
21
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[
|
|
22
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[
|
|
20
|
+
[32mDTS[39m ⚡️ Build success in 4771ms
|
|
21
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m2.15 KB[39m
|
|
22
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m2.15 KB[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,34 @@
|
|
|
1
1
|
# @elementor/editor-styles-repository
|
|
2
2
|
|
|
3
|
+
## 0.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 188069d: Added global classes reorder support.
|
|
8
|
+
- 4ed562a: Support renaming label in classes manager.
|
|
9
|
+
- ebd9676: Added delete global class action.
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- e6c904a: Make global classes state changes synchronous
|
|
14
|
+
- efdadea: Create validation utils in style repository
|
|
15
|
+
- da38fa9: Remove unused exports and add missing dependencies.
|
|
16
|
+
- ffad70a: Fix base styles rendring
|
|
17
|
+
- ad6fde0: Support history actions in style changes
|
|
18
|
+
- Updated dependencies [c9133d7]
|
|
19
|
+
- Updated dependencies [86863c1]
|
|
20
|
+
- Updated dependencies [e441663]
|
|
21
|
+
- Updated dependencies [da38fa9]
|
|
22
|
+
- Updated dependencies [9ca4eab]
|
|
23
|
+
- Updated dependencies [15c964f]
|
|
24
|
+
- Updated dependencies [ad6fde0]
|
|
25
|
+
- Updated dependencies [b8e2a85]
|
|
26
|
+
- @elementor/editor-props@0.9.0
|
|
27
|
+
- @elementor/editor-elements@0.5.2
|
|
28
|
+
- @elementor/editor-v1-adapters@0.10.0
|
|
29
|
+
- @elementor/utils@0.3.1
|
|
30
|
+
- @elementor/editor-styles@0.5.5
|
|
31
|
+
|
|
3
32
|
## 0.6.0
|
|
4
33
|
|
|
5
34
|
### Minor Changes
|
package/dist/index.d.mts
CHANGED
|
@@ -3,7 +3,6 @@ import * as _elementor_editor_styles from '@elementor/editor-styles';
|
|
|
3
3
|
import { StyleDefinition, StyleDefinitionID, StyleDefinitionVariant } from '@elementor/editor-styles';
|
|
4
4
|
|
|
5
5
|
type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
|
|
6
|
-
type CreateActionPayload = MakeOptional<StyleDefinition, 'id' | 'type' | 'variants'>;
|
|
7
6
|
type UpdateActionPayload = MakeOptional<StyleDefinition, 'label' | 'variants' | 'type'>;
|
|
8
7
|
type UpdatePropsActionPayload = {
|
|
9
8
|
id: StyleDefinitionID;
|
|
@@ -16,9 +15,11 @@ type StylesProvider = {
|
|
|
16
15
|
priority: number;
|
|
17
16
|
actions: {
|
|
18
17
|
get: (meta?: Meta) => StyleDefinition[];
|
|
19
|
-
getById
|
|
20
|
-
create?: (
|
|
21
|
-
|
|
18
|
+
getById: (id: StyleDefinitionID, meta?: Meta) => StyleDefinition | null;
|
|
19
|
+
create?: (label: StyleDefinition['label']) => StyleDefinitionID;
|
|
20
|
+
delete?: (id: StyleDefinitionID) => void;
|
|
21
|
+
setOrder?: (order: StyleDefinitionID[]) => void;
|
|
22
|
+
update?: (data: UpdateActionPayload) => void;
|
|
22
23
|
updateProps?: (args: UpdatePropsActionPayload, meta?: Meta) => void;
|
|
23
24
|
};
|
|
24
25
|
subscribe: (callback: () => void) => () => void;
|
|
@@ -26,6 +27,7 @@ type StylesProvider = {
|
|
|
26
27
|
singular: string;
|
|
27
28
|
plural: string;
|
|
28
29
|
};
|
|
30
|
+
reservedLabel?: string;
|
|
29
31
|
};
|
|
30
32
|
|
|
31
33
|
declare const stylesRepository: {
|
|
@@ -34,6 +36,8 @@ declare const stylesRepository: {
|
|
|
34
36
|
subscribe: (cb: () => void) => () => void;
|
|
35
37
|
getProviders: () => StylesProvider[];
|
|
36
38
|
getProviderByKey: (key: string) => StylesProvider | undefined;
|
|
39
|
+
isLabelExist: (newLabel: string) => boolean;
|
|
40
|
+
isLabelValid: (newLabel: string) => boolean;
|
|
37
41
|
};
|
|
38
42
|
|
|
39
43
|
declare function useProviders(): StylesProvider[];
|
|
@@ -43,5 +47,6 @@ type CreateTuple = [StylesProvider, CreateAction];
|
|
|
43
47
|
declare function useCreateActionsByProvider(): CreateTuple[];
|
|
44
48
|
|
|
45
49
|
declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
|
|
50
|
+
declare const LOCAL_STYLES_RESERVED_LABEL = "local";
|
|
46
51
|
|
|
47
|
-
export {
|
|
52
|
+
export { ELEMENTS_STYLES_PROVIDER_KEY, LOCAL_STYLES_RESERVED_LABEL, type Meta, type StylesProvider, type UpdateActionPayload, type UpdatePropsActionPayload, stylesRepository, useCreateActionsByProvider, useProviders };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,6 @@ import * as _elementor_editor_styles from '@elementor/editor-styles';
|
|
|
3
3
|
import { StyleDefinition, StyleDefinitionID, StyleDefinitionVariant } from '@elementor/editor-styles';
|
|
4
4
|
|
|
5
5
|
type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
|
|
6
|
-
type CreateActionPayload = MakeOptional<StyleDefinition, 'id' | 'type' | 'variants'>;
|
|
7
6
|
type UpdateActionPayload = MakeOptional<StyleDefinition, 'label' | 'variants' | 'type'>;
|
|
8
7
|
type UpdatePropsActionPayload = {
|
|
9
8
|
id: StyleDefinitionID;
|
|
@@ -16,9 +15,11 @@ type StylesProvider = {
|
|
|
16
15
|
priority: number;
|
|
17
16
|
actions: {
|
|
18
17
|
get: (meta?: Meta) => StyleDefinition[];
|
|
19
|
-
getById
|
|
20
|
-
create?: (
|
|
21
|
-
|
|
18
|
+
getById: (id: StyleDefinitionID, meta?: Meta) => StyleDefinition | null;
|
|
19
|
+
create?: (label: StyleDefinition['label']) => StyleDefinitionID;
|
|
20
|
+
delete?: (id: StyleDefinitionID) => void;
|
|
21
|
+
setOrder?: (order: StyleDefinitionID[]) => void;
|
|
22
|
+
update?: (data: UpdateActionPayload) => void;
|
|
22
23
|
updateProps?: (args: UpdatePropsActionPayload, meta?: Meta) => void;
|
|
23
24
|
};
|
|
24
25
|
subscribe: (callback: () => void) => () => void;
|
|
@@ -26,6 +27,7 @@ type StylesProvider = {
|
|
|
26
27
|
singular: string;
|
|
27
28
|
plural: string;
|
|
28
29
|
};
|
|
30
|
+
reservedLabel?: string;
|
|
29
31
|
};
|
|
30
32
|
|
|
31
33
|
declare const stylesRepository: {
|
|
@@ -34,6 +36,8 @@ declare const stylesRepository: {
|
|
|
34
36
|
subscribe: (cb: () => void) => () => void;
|
|
35
37
|
getProviders: () => StylesProvider[];
|
|
36
38
|
getProviderByKey: (key: string) => StylesProvider | undefined;
|
|
39
|
+
isLabelExist: (newLabel: string) => boolean;
|
|
40
|
+
isLabelValid: (newLabel: string) => boolean;
|
|
37
41
|
};
|
|
38
42
|
|
|
39
43
|
declare function useProviders(): StylesProvider[];
|
|
@@ -43,5 +47,6 @@ type CreateTuple = [StylesProvider, CreateAction];
|
|
|
43
47
|
declare function useCreateActionsByProvider(): CreateTuple[];
|
|
44
48
|
|
|
45
49
|
declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
|
|
50
|
+
declare const LOCAL_STYLES_RESERVED_LABEL = "local";
|
|
46
51
|
|
|
47
|
-
export {
|
|
52
|
+
export { ELEMENTS_STYLES_PROVIDER_KEY, LOCAL_STYLES_RESERVED_LABEL, type Meta, type StylesProvider, type UpdateActionPayload, type UpdatePropsActionPayload, stylesRepository, useCreateActionsByProvider, useProviders };
|
package/dist/index.js
CHANGED
|
@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
23
|
ELEMENTS_STYLES_PROVIDER_KEY: () => ELEMENTS_STYLES_PROVIDER_KEY,
|
|
24
|
+
LOCAL_STYLES_RESERVED_LABEL: () => LOCAL_STYLES_RESERVED_LABEL,
|
|
24
25
|
stylesRepository: () => stylesRepository,
|
|
25
26
|
useCreateActionsByProvider: () => useCreateActionsByProvider,
|
|
26
27
|
useProviders: () => useProviders
|
|
@@ -28,6 +29,7 @@ __export(index_exports, {
|
|
|
28
29
|
module.exports = __toCommonJS(index_exports);
|
|
29
30
|
|
|
30
31
|
// src/utils/create-styles-repository.ts
|
|
32
|
+
var VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;
|
|
31
33
|
var createStylesRepository = () => {
|
|
32
34
|
const providers = [];
|
|
33
35
|
const getProviders = () => {
|
|
@@ -50,12 +52,26 @@ var createStylesRepository = () => {
|
|
|
50
52
|
const getProviderByKey = (key) => {
|
|
51
53
|
return providers.find((provider) => provider.key === key);
|
|
52
54
|
};
|
|
55
|
+
const isLabelExist = (newLabel) => {
|
|
56
|
+
const classes = all();
|
|
57
|
+
const reservedLabels = providers.map(({ reservedLabel }) => reservedLabel).filter(Boolean);
|
|
58
|
+
if (reservedLabels.includes(newLabel)) {
|
|
59
|
+
return true;
|
|
60
|
+
}
|
|
61
|
+
if (!classes?.length) {
|
|
62
|
+
return false;
|
|
63
|
+
}
|
|
64
|
+
return classes.some(({ label }) => label.toLowerCase() === newLabel.toLowerCase());
|
|
65
|
+
};
|
|
66
|
+
const isLabelValid = (newLabel) => VALID_SELECTOR_REGEX.test(newLabel);
|
|
53
67
|
return {
|
|
54
68
|
all,
|
|
55
69
|
register,
|
|
56
70
|
subscribe,
|
|
57
71
|
getProviders,
|
|
58
|
-
getProviderByKey
|
|
72
|
+
getProviderByKey,
|
|
73
|
+
isLabelExist,
|
|
74
|
+
isLabelValid
|
|
59
75
|
};
|
|
60
76
|
};
|
|
61
77
|
|
|
@@ -96,6 +112,7 @@ var InvalidElementsStyleProviderMetaError = (0, import_utils.createError)({
|
|
|
96
112
|
|
|
97
113
|
// src/elements-styles-provider.ts
|
|
98
114
|
var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
|
|
115
|
+
var LOCAL_STYLES_RESERVED_LABEL = "local";
|
|
99
116
|
var elementsStylesProvider = {
|
|
100
117
|
key: ELEMENTS_STYLES_PROVIDER_KEY,
|
|
101
118
|
priority: 50,
|
|
@@ -126,7 +143,8 @@ var elementsStylesProvider = {
|
|
|
126
143
|
});
|
|
127
144
|
}
|
|
128
145
|
},
|
|
129
|
-
subscribe: (cb) => (0, import_editor_v1_adapters.__privateListenTo)(import_editor_elements.styleRerenderEvents, cb)
|
|
146
|
+
subscribe: (cb) => (0, import_editor_v1_adapters.__privateListenTo)(import_editor_elements.styleRerenderEvents, cb),
|
|
147
|
+
reservedLabel: LOCAL_STYLES_RESERVED_LABEL
|
|
130
148
|
};
|
|
131
149
|
function isValidElementsMeta(meta) {
|
|
132
150
|
return "elementId" in meta && typeof meta.elementId === "string" && !!meta.elementId;
|
|
@@ -139,9 +157,14 @@ var elementBaseStylesProvider = {
|
|
|
139
157
|
key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
|
|
140
158
|
priority: 10,
|
|
141
159
|
actions: {
|
|
142
|
-
get
|
|
160
|
+
get() {
|
|
143
161
|
const widgetsCache = (0, import_editor_elements2.getWidgetsCache)();
|
|
144
|
-
return Object.values(widgetsCache ?? {}).flatMap(
|
|
162
|
+
return Object.values(widgetsCache ?? {}).flatMap(
|
|
163
|
+
(widget) => Object.values(widget.base_styles ?? {})
|
|
164
|
+
);
|
|
165
|
+
},
|
|
166
|
+
getById(id) {
|
|
167
|
+
return this.get().find((style) => style.id === id) ?? null;
|
|
145
168
|
}
|
|
146
169
|
},
|
|
147
170
|
subscribe: () => {
|
|
@@ -161,6 +184,7 @@ init();
|
|
|
161
184
|
// Annotate the CommonJS export names for ESM import in node:
|
|
162
185
|
0 && (module.exports = {
|
|
163
186
|
ELEMENTS_STYLES_PROVIDER_KEY,
|
|
187
|
+
LOCAL_STYLES_RESERVED_LABEL,
|
|
164
188
|
stylesRepository,
|
|
165
189
|
useCreateActionsByProvider,
|
|
166
190
|
useProviders
|
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-providers.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/errors.ts","../src/element-base-styles-provider.ts","../src/init.ts"],"sourcesContent":["export {\n\ttype StylesProvider,\n\ttype CreateActionPayload,\n\ttype UpdateActionPayload,\n\ttype Meta,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useProviders } from './hooks/use-providers';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n","import { type Props } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';\n\nexport type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type UpdatePropsActionPayload = {\n\tid: StyleDefinitionID;\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tprops: Props;\n};\n\nexport type Meta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: Meta ) => StyleDefinition[];\n\t\tgetById?: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;\n\t\tcreate?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdate?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst all = ( meta: Meta = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\treturn {\n\t\tall,\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';\n\nexport function useProviders() {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.getProviders();\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { InvalidElementsStyleProviderMetaError } from './errors';\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( isValidElementsMeta( meta ) ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\n\t\tgetById: ( id, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tconst styles = getElementStyles( meta.elementId ) ?? {};\n\n\t\t\treturn styles[ id ] ?? null;\n\t\t},\n\n\t\tupdateProps: ( args, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tupdateElementStyle( {\n\t\t\t\telementId: meta.elementId,\n\t\t\t\tstyleId: args.id,\n\t\t\t\tmeta: args.meta,\n\t\t\t\tprops: args.props,\n\t\t\t} );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n} satisfies StylesProvider;\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nfunction isValidElementsMeta( meta: Record< string, unknown > ): meta is ElementsMeta {\n\treturn 'elementId' in meta && typeof meta.elementId === 'string' && !! meta.elementId;\n}\n","import { createError } from '@elementor/utils';\n\nexport const InvalidElementsStyleProviderMetaError = createError< { meta: Record< string, unknown > } >( {\n\tcode: 'invalid_elements_style_provider_meta',\n\tmessage: 'Invalid elements style provider meta.',\n} );\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 10,\n\tactions: {\n\t\tget: () => {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) => widget.base_styles ?? [] );\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n"],"mappings":"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","names":["import_react","listenTo","import_editor_elements"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-providers.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/errors.ts","../src/element-base-styles-provider.ts","../src/init.ts"],"sourcesContent":["export {\n\ttype StylesProvider,\n\ttype UpdateActionPayload,\n\ttype Meta,\n\ttype UpdatePropsActionPayload,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useProviders } from './hooks/use-providers';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY, LOCAL_STYLES_RESERVED_LABEL } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n","import { type Props } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';\n\ntype MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type UpdatePropsActionPayload = {\n\tid: StyleDefinitionID;\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tprops: Props;\n};\n\nexport type Meta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: Meta ) => StyleDefinition[];\n\t\tgetById: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;\n\t\tcreate?: ( label: StyleDefinition[ 'label' ] ) => StyleDefinitionID;\n\t\tdelete?: ( id: StyleDefinitionID ) => void;\n\t\tsetOrder?: ( order: StyleDefinitionID[] ) => void;\n\t\tupdate?: ( data: UpdateActionPayload ) => void;\n\t\tupdateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n\treservedLabel?: string;\n};\n\nconst VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst all = ( meta: Meta = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\tconst isLabelExist = ( newLabel: string ) => {\n\t\tconst classes = all();\n\t\tconst reservedLabels = providers.map( ( { reservedLabel } ) => reservedLabel ).filter( Boolean );\n\n\t\tif ( reservedLabels.includes( newLabel ) ) {\n\t\t\treturn true;\n\t\t}\n\n\t\tif ( ! classes?.length ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn classes.some( ( { label } ) => label.toLowerCase() === newLabel.toLowerCase() );\n\t};\n\n\tconst isLabelValid = ( newLabel: string ) => VALID_SELECTOR_REGEX.test( newLabel );\n\n\treturn {\n\t\tall,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\n\t\tisLabelExist,\n\t\tisLabelValid,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\n\nexport function useProviders() {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.getProviders();\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { InvalidElementsStyleProviderMetaError } from './errors';\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\nexport const LOCAL_STYLES_RESERVED_LABEL = 'local';\n\nexport const elementsStylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( isValidElementsMeta( meta ) ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\n\t\tgetById: ( id, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tconst styles = getElementStyles( meta.elementId ) ?? {};\n\n\t\t\treturn styles[ id ] ?? null;\n\t\t},\n\n\t\tupdateProps: ( args, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tupdateElementStyle( {\n\t\t\t\telementId: meta.elementId,\n\t\t\t\tstyleId: args.id,\n\t\t\t\tmeta: args.meta,\n\t\t\t\tprops: args.props,\n\t\t\t} );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n\treservedLabel: LOCAL_STYLES_RESERVED_LABEL,\n} satisfies StylesProvider;\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nfunction isValidElementsMeta( meta: Record< string, unknown > ): meta is ElementsMeta {\n\treturn 'elementId' in meta && typeof meta.elementId === 'string' && !! meta.elementId;\n}\n","import { createError } from '@elementor/utils';\n\nexport const InvalidElementsStyleProviderMetaError = createError< { meta: Record< string, unknown > } >( {\n\tcode: 'invalid_elements_style_provider_meta',\n\tmessage: 'Invalid elements style provider meta.',\n} );\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 10,\n\tactions: {\n\t\tget() {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) =>\n\t\t\t\tObject.values( widget.base_styles ?? {} )\n\t\t\t);\n\t\t},\n\n\t\tgetById( id ) {\n\t\t\treturn this.get().find( ( style ) => style.id === id ) ?? null;\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n"],"mappings":"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","names":["import_react","listenTo","import_editor_elements"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
// src/utils/create-styles-repository.ts
|
|
2
|
+
var VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;
|
|
2
3
|
var createStylesRepository = () => {
|
|
3
4
|
const providers = [];
|
|
4
5
|
const getProviders = () => {
|
|
@@ -21,12 +22,26 @@ var createStylesRepository = () => {
|
|
|
21
22
|
const getProviderByKey = (key) => {
|
|
22
23
|
return providers.find((provider) => provider.key === key);
|
|
23
24
|
};
|
|
25
|
+
const isLabelExist = (newLabel) => {
|
|
26
|
+
const classes = all();
|
|
27
|
+
const reservedLabels = providers.map(({ reservedLabel }) => reservedLabel).filter(Boolean);
|
|
28
|
+
if (reservedLabels.includes(newLabel)) {
|
|
29
|
+
return true;
|
|
30
|
+
}
|
|
31
|
+
if (!classes?.length) {
|
|
32
|
+
return false;
|
|
33
|
+
}
|
|
34
|
+
return classes.some(({ label }) => label.toLowerCase() === newLabel.toLowerCase());
|
|
35
|
+
};
|
|
36
|
+
const isLabelValid = (newLabel) => VALID_SELECTOR_REGEX.test(newLabel);
|
|
24
37
|
return {
|
|
25
38
|
all,
|
|
26
39
|
register,
|
|
27
40
|
subscribe,
|
|
28
41
|
getProviders,
|
|
29
|
-
getProviderByKey
|
|
42
|
+
getProviderByKey,
|
|
43
|
+
isLabelExist,
|
|
44
|
+
isLabelValid
|
|
30
45
|
};
|
|
31
46
|
};
|
|
32
47
|
|
|
@@ -67,6 +82,7 @@ var InvalidElementsStyleProviderMetaError = createError({
|
|
|
67
82
|
|
|
68
83
|
// src/elements-styles-provider.ts
|
|
69
84
|
var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
|
|
85
|
+
var LOCAL_STYLES_RESERVED_LABEL = "local";
|
|
70
86
|
var elementsStylesProvider = {
|
|
71
87
|
key: ELEMENTS_STYLES_PROVIDER_KEY,
|
|
72
88
|
priority: 50,
|
|
@@ -97,7 +113,8 @@ var elementsStylesProvider = {
|
|
|
97
113
|
});
|
|
98
114
|
}
|
|
99
115
|
},
|
|
100
|
-
subscribe: (cb) => listenTo(styleRerenderEvents, cb)
|
|
116
|
+
subscribe: (cb) => listenTo(styleRerenderEvents, cb),
|
|
117
|
+
reservedLabel: LOCAL_STYLES_RESERVED_LABEL
|
|
101
118
|
};
|
|
102
119
|
function isValidElementsMeta(meta) {
|
|
103
120
|
return "elementId" in meta && typeof meta.elementId === "string" && !!meta.elementId;
|
|
@@ -110,9 +127,14 @@ var elementBaseStylesProvider = {
|
|
|
110
127
|
key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
|
|
111
128
|
priority: 10,
|
|
112
129
|
actions: {
|
|
113
|
-
get
|
|
130
|
+
get() {
|
|
114
131
|
const widgetsCache = getWidgetsCache();
|
|
115
|
-
return Object.values(widgetsCache ?? {}).flatMap(
|
|
132
|
+
return Object.values(widgetsCache ?? {}).flatMap(
|
|
133
|
+
(widget) => Object.values(widget.base_styles ?? {})
|
|
134
|
+
);
|
|
135
|
+
},
|
|
136
|
+
getById(id) {
|
|
137
|
+
return this.get().find((style) => style.id === id) ?? null;
|
|
116
138
|
}
|
|
117
139
|
},
|
|
118
140
|
subscribe: () => {
|
|
@@ -131,6 +153,7 @@ function init() {
|
|
|
131
153
|
init();
|
|
132
154
|
export {
|
|
133
155
|
ELEMENTS_STYLES_PROVIDER_KEY,
|
|
156
|
+
LOCAL_STYLES_RESERVED_LABEL,
|
|
134
157
|
stylesRepository,
|
|
135
158
|
useCreateActionsByProvider,
|
|
136
159
|
useProviders
|
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-providers.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/errors.ts","../src/element-base-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type Props } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';\n\nexport type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type UpdatePropsActionPayload = {\n\tid: StyleDefinitionID;\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tprops: Props;\n};\n\nexport type Meta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: Meta ) => StyleDefinition[];\n\t\tgetById?: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;\n\t\tcreate?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdate?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst all = ( meta: Meta = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\treturn {\n\t\tall,\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';\n\nexport function useProviders() {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.getProviders();\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { InvalidElementsStyleProviderMetaError } from './errors';\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( isValidElementsMeta( meta ) ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\n\t\tgetById: ( id, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tconst styles = getElementStyles( meta.elementId ) ?? {};\n\n\t\t\treturn styles[ id ] ?? null;\n\t\t},\n\n\t\tupdateProps: ( args, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tupdateElementStyle( {\n\t\t\t\telementId: meta.elementId,\n\t\t\t\tstyleId: args.id,\n\t\t\t\tmeta: args.meta,\n\t\t\t\tprops: args.props,\n\t\t\t} );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n} satisfies StylesProvider;\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nfunction isValidElementsMeta( meta: Record< string, unknown > ): meta is ElementsMeta {\n\treturn 'elementId' in meta && typeof meta.elementId === 'string' && !! meta.elementId;\n}\n","import { createError } from '@elementor/utils';\n\nexport const InvalidElementsStyleProviderMetaError = createError< { meta: Record< string, unknown > } >( {\n\tcode: 'invalid_elements_style_provider_meta',\n\tmessage: 'Invalid elements style provider meta.',\n} );\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 10,\n\tactions: {\n\t\tget: () => {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) => widget.base_styles ?? [] );\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n","export {\n\ttype StylesProvider,\n\ttype CreateActionPayload,\n\ttype UpdateActionPayload,\n\ttype Meta,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useProviders } from './hooks/use-providers';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-providers.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/errors.ts","../src/element-base-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type Props } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';\n\ntype MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type UpdatePropsActionPayload = {\n\tid: StyleDefinitionID;\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tprops: Props;\n};\n\nexport type Meta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: Meta ) => StyleDefinition[];\n\t\tgetById: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;\n\t\tcreate?: ( label: StyleDefinition[ 'label' ] ) => StyleDefinitionID;\n\t\tdelete?: ( id: StyleDefinitionID ) => void;\n\t\tsetOrder?: ( order: StyleDefinitionID[] ) => void;\n\t\tupdate?: ( data: UpdateActionPayload ) => void;\n\t\tupdateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n\treservedLabel?: string;\n};\n\nconst VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst all = ( meta: Meta = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\tconst isLabelExist = ( newLabel: string ) => {\n\t\tconst classes = all();\n\t\tconst reservedLabels = providers.map( ( { reservedLabel } ) => reservedLabel ).filter( Boolean );\n\n\t\tif ( reservedLabels.includes( newLabel ) ) {\n\t\t\treturn true;\n\t\t}\n\n\t\tif ( ! classes?.length ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn classes.some( ( { label } ) => label.toLowerCase() === newLabel.toLowerCase() );\n\t};\n\n\tconst isLabelValid = ( newLabel: string ) => VALID_SELECTOR_REGEX.test( newLabel );\n\n\treturn {\n\t\tall,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\n\t\tisLabelExist,\n\t\tisLabelValid,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\n\nexport function useProviders() {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.getProviders();\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { InvalidElementsStyleProviderMetaError } from './errors';\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\nexport const LOCAL_STYLES_RESERVED_LABEL = 'local';\n\nexport const elementsStylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( isValidElementsMeta( meta ) ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\n\t\tgetById: ( id, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tconst styles = getElementStyles( meta.elementId ) ?? {};\n\n\t\t\treturn styles[ id ] ?? null;\n\t\t},\n\n\t\tupdateProps: ( args, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tupdateElementStyle( {\n\t\t\t\telementId: meta.elementId,\n\t\t\t\tstyleId: args.id,\n\t\t\t\tmeta: args.meta,\n\t\t\t\tprops: args.props,\n\t\t\t} );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n\treservedLabel: LOCAL_STYLES_RESERVED_LABEL,\n} satisfies StylesProvider;\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nfunction isValidElementsMeta( meta: Record< string, unknown > ): meta is ElementsMeta {\n\treturn 'elementId' in meta && typeof meta.elementId === 'string' && !! meta.elementId;\n}\n","import { createError } from '@elementor/utils';\n\nexport const InvalidElementsStyleProviderMetaError = createError< { meta: Record< string, unknown > } >( {\n\tcode: 'invalid_elements_style_provider_meta',\n\tmessage: 'Invalid elements style provider meta.',\n} );\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 10,\n\tactions: {\n\t\tget() {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) =>\n\t\t\t\tObject.values( widget.base_styles ?? {} )\n\t\t\t);\n\t\t},\n\n\t\tgetById( id ) {\n\t\t\treturn this.get().find( ( style ) => style.id === id ) ?? null;\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n","export {\n\ttype StylesProvider,\n\ttype UpdateActionPayload,\n\ttype Meta,\n\ttype UpdatePropsActionPayload,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useProviders } from './hooks/use-providers';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY, LOCAL_STYLES_RESERVED_LABEL } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":"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","names":[]}
|
package/package.json
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.7.0",
|
|
5
5
|
"private": false,
|
|
6
6
|
"author": "Elementor Team",
|
|
7
7
|
"homepage": "https://elementor.com/",
|
|
@@ -33,12 +33,16 @@
|
|
|
33
33
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@elementor/editor-elements": "0.5.
|
|
37
|
-
"@elementor/editor-
|
|
38
|
-
"@elementor/editor-
|
|
39
|
-
"@elementor/
|
|
36
|
+
"@elementor/editor-elements": "0.5.2",
|
|
37
|
+
"@elementor/editor-props": "0.9.0",
|
|
38
|
+
"@elementor/editor-styles": "0.5.5",
|
|
39
|
+
"@elementor/editor-v1-adapters": "0.10.0",
|
|
40
|
+
"@elementor/utils": "0.3.1"
|
|
40
41
|
},
|
|
41
42
|
"peerDependencies": {
|
|
42
43
|
"react": "^18.3.1"
|
|
44
|
+
},
|
|
45
|
+
"devDependencies": {
|
|
46
|
+
"tsup": "^8.3.5"
|
|
43
47
|
}
|
|
44
48
|
}
|
|
@@ -9,10 +9,15 @@ describe( 'elementBaseStylesProvider', () => {
|
|
|
9
9
|
beforeEach( () => {
|
|
10
10
|
jest.mocked( getWidgetsCache ).mockReturnValue( {
|
|
11
11
|
'widget-1': {
|
|
12
|
-
base_styles:
|
|
12
|
+
base_styles: {
|
|
13
|
+
's-1': createMockStyleDefinition( { id: 's-1' } ),
|
|
14
|
+
's-2': createMockStyleDefinition( { id: 's-2' } ),
|
|
15
|
+
},
|
|
13
16
|
},
|
|
14
17
|
'widget-2': {
|
|
15
|
-
base_styles:
|
|
18
|
+
base_styles: {
|
|
19
|
+
's-3': createMockStyleDefinition( { id: 's-3' } ),
|
|
20
|
+
},
|
|
16
21
|
},
|
|
17
22
|
'widget-3': {},
|
|
18
23
|
} as unknown as ReturnType< typeof getWidgetsCache > );
|
|
@@ -29,4 +34,12 @@ describe( 'elementBaseStylesProvider', () => {
|
|
|
29
34
|
expect.objectContaining( { id: 's-3' } ),
|
|
30
35
|
] );
|
|
31
36
|
} );
|
|
37
|
+
|
|
38
|
+
it( 'should return base style by id', () => {
|
|
39
|
+
// Act.
|
|
40
|
+
const style = elementBaseStylesProvider.actions.getById( 's-1' );
|
|
41
|
+
|
|
42
|
+
// Assert.
|
|
43
|
+
expect( style ).toEqual( expect.objectContaining( { id: 's-1' } ) );
|
|
44
|
+
} );
|
|
32
45
|
} );
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createMockElement, createMockStyleDefinition } from 'test-utils';
|
|
2
|
-
import { getElements, getElementStyles } from '@elementor/editor-elements';
|
|
2
|
+
import { getElements, getElementStyles, updateElementStyle } from '@elementor/editor-elements';
|
|
3
3
|
import type { StyleDefinition } from '@elementor/editor-styles';
|
|
4
4
|
|
|
5
5
|
import { elementsStylesProvider } from '../elements-styles-provider';
|
|
@@ -87,6 +87,38 @@ describe( 'elementsStylesProvider', () => {
|
|
|
87
87
|
);
|
|
88
88
|
} );
|
|
89
89
|
|
|
90
|
+
it( 'should update style props', () => {
|
|
91
|
+
// Act.
|
|
92
|
+
elementsStylesProvider.actions.updateProps(
|
|
93
|
+
{
|
|
94
|
+
id: 'test-style',
|
|
95
|
+
meta: {
|
|
96
|
+
breakpoint: null,
|
|
97
|
+
state: null,
|
|
98
|
+
},
|
|
99
|
+
props: {
|
|
100
|
+
prop: 'value',
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
{ elementId: 'test-element' }
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
// Assert.
|
|
107
|
+
expect( updateElementStyle ).toHaveBeenCalledTimes( 1 );
|
|
108
|
+
|
|
109
|
+
expect( updateElementStyle ).toHaveBeenCalledWith( {
|
|
110
|
+
elementId: 'test-element',
|
|
111
|
+
styleId: 'test-style',
|
|
112
|
+
meta: {
|
|
113
|
+
breakpoint: null,
|
|
114
|
+
state: null,
|
|
115
|
+
},
|
|
116
|
+
props: {
|
|
117
|
+
prop: 'value',
|
|
118
|
+
},
|
|
119
|
+
} );
|
|
120
|
+
} );
|
|
121
|
+
|
|
90
122
|
it.each( [
|
|
91
123
|
{ elementsMeta: { notElementId: 'test-value' } },
|
|
92
124
|
{ elementsMeta: { elementId: 123 } },
|
|
@@ -8,10 +8,16 @@ export const elementBaseStylesProvider: StylesProvider = {
|
|
|
8
8
|
key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
|
|
9
9
|
priority: 10,
|
|
10
10
|
actions: {
|
|
11
|
-
get
|
|
11
|
+
get() {
|
|
12
12
|
const widgetsCache = getWidgetsCache();
|
|
13
13
|
|
|
14
|
-
return Object.values( widgetsCache ?? {} ).flatMap( ( widget ) =>
|
|
14
|
+
return Object.values( widgetsCache ?? {} ).flatMap( ( widget ) =>
|
|
15
|
+
Object.values( widget.base_styles ?? {} )
|
|
16
|
+
);
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
getById( id ) {
|
|
20
|
+
return this.get().find( ( style ) => style.id === id ) ?? null;
|
|
15
21
|
},
|
|
16
22
|
},
|
|
17
23
|
subscribe: () => {
|
|
@@ -5,6 +5,7 @@ import { InvalidElementsStyleProviderMetaError } from './errors';
|
|
|
5
5
|
import { type StylesProvider } from './utils/create-styles-repository';
|
|
6
6
|
|
|
7
7
|
export const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';
|
|
8
|
+
export const LOCAL_STYLES_RESERVED_LABEL = 'local';
|
|
8
9
|
|
|
9
10
|
export const elementsStylesProvider = {
|
|
10
11
|
key: ELEMENTS_STYLES_PROVIDER_KEY,
|
|
@@ -44,6 +45,7 @@ export const elementsStylesProvider = {
|
|
|
44
45
|
},
|
|
45
46
|
},
|
|
46
47
|
subscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),
|
|
48
|
+
reservedLabel: LOCAL_STYLES_RESERVED_LABEL,
|
|
47
49
|
} satisfies StylesProvider;
|
|
48
50
|
|
|
49
51
|
type ElementsMeta = {
|
package/src/index.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
export {
|
|
2
2
|
type StylesProvider,
|
|
3
|
-
type CreateActionPayload,
|
|
4
3
|
type UpdateActionPayload,
|
|
5
4
|
type Meta,
|
|
5
|
+
type UpdatePropsActionPayload,
|
|
6
6
|
} from './utils/create-styles-repository';
|
|
7
7
|
|
|
8
8
|
export { stylesRepository } from './styles-repository';
|
|
9
9
|
export { useProviders } from './hooks/use-providers';
|
|
10
10
|
export { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';
|
|
11
11
|
|
|
12
|
-
export { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';
|
|
12
|
+
export { ELEMENTS_STYLES_PROVIDER_KEY, LOCAL_STYLES_RESERVED_LABEL } from './elements-styles-provider';
|
|
13
13
|
|
|
14
14
|
import { init } from './init';
|
|
15
15
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { createMockStyleDefinition } from 'test-utils';
|
|
2
|
-
import { type StyleDefinition } from '@elementor/editor-styles';
|
|
1
|
+
import { createMockStyleDefinition, createMockStylesProvider } from 'test-utils';
|
|
3
2
|
|
|
4
|
-
import { createStylesRepository
|
|
3
|
+
import { createStylesRepository } from '../create-styles-repository';
|
|
5
4
|
|
|
6
5
|
const styleDef1 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#dddddd' } } } );
|
|
7
6
|
const styleDef2 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#eeeeee' } } } );
|
|
@@ -11,8 +10,8 @@ describe( 'createStylesRepository', () => {
|
|
|
11
10
|
// Arrange
|
|
12
11
|
const repo = createStylesRepository();
|
|
13
12
|
|
|
14
|
-
repo.register(
|
|
15
|
-
repo.register(
|
|
13
|
+
repo.register( createMockStylesProvider( { key: 'mock1', priority: 10, styleDefinitions: [ styleDef1 ] } ) );
|
|
14
|
+
repo.register( createMockStylesProvider( { key: 'mock2', priority: 20, styleDefinitions: [ styleDef2 ] } ) );
|
|
16
15
|
|
|
17
16
|
// Assert
|
|
18
17
|
expect( repo.all() ).toEqual( [ styleDef2, styleDef1 ] );
|
|
@@ -22,9 +21,17 @@ describe( 'createStylesRepository', () => {
|
|
|
22
21
|
// Arrange
|
|
23
22
|
const repo = createStylesRepository();
|
|
24
23
|
|
|
25
|
-
const
|
|
24
|
+
const mockStylesProvider1 = createMockStylesProvider( {
|
|
25
|
+
key: 'mock1',
|
|
26
|
+
priority: 10,
|
|
27
|
+
styleDefinitions: [ styleDef1 ],
|
|
28
|
+
} );
|
|
26
29
|
|
|
27
|
-
const
|
|
30
|
+
const mockStylesProvider2 = createMockStylesProvider( {
|
|
31
|
+
key: 'mock2',
|
|
32
|
+
priority: 20,
|
|
33
|
+
styleDefinitions: [ styleDef2 ],
|
|
34
|
+
} );
|
|
28
35
|
|
|
29
36
|
repo.register( mockStylesProvider1 );
|
|
30
37
|
repo.register( mockStylesProvider2 );
|
|
@@ -32,6 +39,10 @@ describe( 'createStylesRepository', () => {
|
|
|
32
39
|
const cb = jest.fn();
|
|
33
40
|
const unsubscribe = repo.subscribe( cb );
|
|
34
41
|
|
|
42
|
+
// Force notifying the subscribers.
|
|
43
|
+
const notify1 = () => mockStylesProvider1.actions.update?.( {} as never );
|
|
44
|
+
const notify2 = () => mockStylesProvider2.actions.update?.( {} as never );
|
|
45
|
+
|
|
35
46
|
// Act
|
|
36
47
|
notify1();
|
|
37
48
|
|
|
@@ -53,29 +64,84 @@ describe( 'createStylesRepository', () => {
|
|
|
53
64
|
// Assert
|
|
54
65
|
expect( cb ).toHaveBeenCalledTimes( 2 );
|
|
55
66
|
} );
|
|
56
|
-
} );
|
|
57
67
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
return
|
|
81
|
-
|
|
68
|
+
it( 'should return true if label is valid', () => {
|
|
69
|
+
// Arrange
|
|
70
|
+
const repo = createStylesRepository();
|
|
71
|
+
|
|
72
|
+
// Act
|
|
73
|
+
const result = repo.isLabelValid( 'valid-label' );
|
|
74
|
+
|
|
75
|
+
// Assert
|
|
76
|
+
expect( result ).toBe( true );
|
|
77
|
+
} );
|
|
78
|
+
|
|
79
|
+
it( 'should return false if label is not valid', () => {
|
|
80
|
+
// Arrange
|
|
81
|
+
const repo = createStylesRepository();
|
|
82
|
+
|
|
83
|
+
// Act
|
|
84
|
+
const result = repo.isLabelValid( '.invalid-label' );
|
|
85
|
+
|
|
86
|
+
// Assert
|
|
87
|
+
expect( result ).toBe( false );
|
|
88
|
+
} );
|
|
89
|
+
|
|
90
|
+
it( 'should return true if label is reserved', () => {
|
|
91
|
+
// Arrange
|
|
92
|
+
const repo = createStylesRepository();
|
|
93
|
+
|
|
94
|
+
const mockStylesProvider1 = createMockStylesProvider( {
|
|
95
|
+
key: 'mock1',
|
|
96
|
+
priority: 10,
|
|
97
|
+
styleDefinitions: [],
|
|
98
|
+
reservedLabel: 'reserved-label',
|
|
99
|
+
} );
|
|
100
|
+
|
|
101
|
+
repo.register( mockStylesProvider1 );
|
|
102
|
+
|
|
103
|
+
// Act
|
|
104
|
+
const result = repo.isLabelExist( 'reserved-label' );
|
|
105
|
+
|
|
106
|
+
// Assert
|
|
107
|
+
expect( result ).toBe( true );
|
|
108
|
+
} );
|
|
109
|
+
|
|
110
|
+
it( 'should return true if label exist', () => {
|
|
111
|
+
// Arrange
|
|
112
|
+
const repo = createStylesRepository();
|
|
113
|
+
|
|
114
|
+
const mockStylesProvider1 = createMockStylesProvider( {
|
|
115
|
+
key: 'mock1',
|
|
116
|
+
priority: 10,
|
|
117
|
+
styleDefinitions: [ styleDef1 ],
|
|
118
|
+
} );
|
|
119
|
+
|
|
120
|
+
repo.register( mockStylesProvider1 );
|
|
121
|
+
|
|
122
|
+
// Act
|
|
123
|
+
const result = repo.isLabelExist( styleDef1.label );
|
|
124
|
+
|
|
125
|
+
// Assert
|
|
126
|
+
expect( result ).toBe( true );
|
|
127
|
+
} );
|
|
128
|
+
|
|
129
|
+
it( 'should return false if label does not exist', () => {
|
|
130
|
+
// Arrange
|
|
131
|
+
const repo = createStylesRepository();
|
|
132
|
+
|
|
133
|
+
const mockStylesProvider1 = createMockStylesProvider( {
|
|
134
|
+
key: 'mock1',
|
|
135
|
+
priority: 10,
|
|
136
|
+
styleDefinitions: [],
|
|
137
|
+
} );
|
|
138
|
+
|
|
139
|
+
repo.register( mockStylesProvider1 );
|
|
140
|
+
|
|
141
|
+
// Act
|
|
142
|
+
const result = repo.isLabelExist( 'new-label' );
|
|
143
|
+
|
|
144
|
+
// Assert
|
|
145
|
+
expect( result ).toBe( false );
|
|
146
|
+
} );
|
|
147
|
+
} );
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { type Props } from '@elementor/editor-props';
|
|
2
2
|
import { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;
|
|
5
5
|
|
|
6
|
-
export type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;
|
|
7
6
|
export type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;
|
|
8
7
|
|
|
9
8
|
export type UpdatePropsActionPayload = {
|
|
@@ -19,9 +18,11 @@ export type StylesProvider = {
|
|
|
19
18
|
priority: number;
|
|
20
19
|
actions: {
|
|
21
20
|
get: ( meta?: Meta ) => StyleDefinition[];
|
|
22
|
-
getById
|
|
23
|
-
create?: (
|
|
24
|
-
|
|
21
|
+
getById: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;
|
|
22
|
+
create?: ( label: StyleDefinition[ 'label' ] ) => StyleDefinitionID;
|
|
23
|
+
delete?: ( id: StyleDefinitionID ) => void;
|
|
24
|
+
setOrder?: ( order: StyleDefinitionID[] ) => void;
|
|
25
|
+
update?: ( data: UpdateActionPayload ) => void;
|
|
25
26
|
updateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;
|
|
26
27
|
};
|
|
27
28
|
subscribe: ( callback: () => void ) => () => void;
|
|
@@ -29,8 +30,11 @@ export type StylesProvider = {
|
|
|
29
30
|
singular: string;
|
|
30
31
|
plural: string;
|
|
31
32
|
};
|
|
33
|
+
reservedLabel?: string;
|
|
32
34
|
};
|
|
33
35
|
|
|
36
|
+
const VALID_SELECTOR_REGEX = /^[a-zA-Z0-9_-]+$/;
|
|
37
|
+
|
|
34
38
|
export const createStylesRepository = () => {
|
|
35
39
|
const providers: StylesProvider[] = [];
|
|
36
40
|
|
|
@@ -60,11 +64,30 @@ export const createStylesRepository = () => {
|
|
|
60
64
|
return providers.find( ( provider ) => provider.key === key );
|
|
61
65
|
};
|
|
62
66
|
|
|
67
|
+
const isLabelExist = ( newLabel: string ) => {
|
|
68
|
+
const classes = all();
|
|
69
|
+
const reservedLabels = providers.map( ( { reservedLabel } ) => reservedLabel ).filter( Boolean );
|
|
70
|
+
|
|
71
|
+
if ( reservedLabels.includes( newLabel ) ) {
|
|
72
|
+
return true;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if ( ! classes?.length ) {
|
|
76
|
+
return false;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
return classes.some( ( { label } ) => label.toLowerCase() === newLabel.toLowerCase() );
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
const isLabelValid = ( newLabel: string ) => VALID_SELECTOR_REGEX.test( newLabel );
|
|
83
|
+
|
|
63
84
|
return {
|
|
64
85
|
all,
|
|
65
86
|
register,
|
|
66
87
|
subscribe,
|
|
67
88
|
getProviders,
|
|
68
89
|
getProviderByKey,
|
|
90
|
+
isLabelExist,
|
|
91
|
+
isLabelValid,
|
|
69
92
|
};
|
|
70
93
|
};
|