@elementor/editor-styles-repository 0.6.0 → 0.7.1

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.
@@ -1,22 +1,22 @@
1
1
 
2
- > @elementor/editor-styles-repository@0.6.0 build
2
+ > @elementor/editor-styles-repository@0.7.1 build
3
3
  > tsup --config=../../tsup.build.ts
4
4
 
5
5
  CLI Building entry: src/index.ts
6
6
  CLI Using tsconfig: ../../../tsconfig.json
7
- CLI tsup v8.3.5
7
+ CLI tsup v8.4.0
8
8
  CLI Using tsup config: /home/runner/work/elementor-packages/elementor-packages/tsup.build.ts
9
9
  CLI Target: esnext
10
10
  CLI Cleaning output folder
11
11
  ESM Build start
12
12
  CJS Build start
13
- CJS dist/index.js 5.33 KB
14
- CJS dist/index.js.map 9.60 KB
15
- CJS ⚡️ Build success in 54ms
16
- ESM dist/index.mjs 3.96 KB
17
- ESM dist/index.mjs.map 9.52 KB
18
- ESM ⚡️ Build success in 57ms
13
+ ESM dist/index.mjs 4.71 KB
14
+ ESM dist/index.mjs.map 10.88 KB
15
+ ESM ⚡️ Build success in 58ms
16
+ CJS dist/index.js 6.15 KB
17
+ CJS dist/index.js.map 10.97 KB
18
+ CJS ⚡️ Build success in 60ms
19
19
  DTS Build start
20
- DTS ⚡️ Build success in 5068ms
21
- DTS dist/index.d.mts 1.94 KB
22
- DTS dist/index.d.ts 1.94 KB
20
+ DTS ⚡️ Build success in 5397ms
21
+ DTS dist/index.d.mts 2.15 KB
22
+ DTS dist/index.d.ts 2.15 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,43 @@
1
1
  # @elementor/editor-styles-repository
2
2
 
3
+ ## 0.7.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [6b064c5]
8
+ - @elementor/editor-props@0.9.1
9
+ - @elementor/editor-elements@0.5.3
10
+ - @elementor/editor-styles@0.5.6
11
+
12
+ ## 0.7.0
13
+
14
+ ### Minor Changes
15
+
16
+ - 188069d: Added global classes reorder support.
17
+ - 4ed562a: Support renaming label in classes manager.
18
+ - ebd9676: Added delete global class action.
19
+
20
+ ### Patch Changes
21
+
22
+ - e6c904a: Make global classes state changes synchronous
23
+ - efdadea: Create validation utils in style repository
24
+ - da38fa9: Remove unused exports and add missing dependencies.
25
+ - ffad70a: Fix base styles rendring
26
+ - ad6fde0: Support history actions in style changes
27
+ - Updated dependencies [c9133d7]
28
+ - Updated dependencies [86863c1]
29
+ - Updated dependencies [e441663]
30
+ - Updated dependencies [da38fa9]
31
+ - Updated dependencies [9ca4eab]
32
+ - Updated dependencies [15c964f]
33
+ - Updated dependencies [ad6fde0]
34
+ - Updated dependencies [b8e2a85]
35
+ - @elementor/editor-props@0.9.0
36
+ - @elementor/editor-elements@0.5.2
37
+ - @elementor/editor-v1-adapters@0.10.0
38
+ - @elementor/utils@0.3.1
39
+ - @elementor/editor-styles@0.5.5
40
+
3
41
  ## 0.6.0
4
42
 
5
43
  ### 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?: (id: StyleDefinitionID, meta?: Meta) => StyleDefinition | null;
20
- create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
21
- update?: (data: UpdateActionPayload) => Promise<StyleDefinition>;
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 { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type Meta, type StylesProvider, type UpdateActionPayload, stylesRepository, useCreateActionsByProvider, useProviders };
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?: (id: StyleDefinitionID, meta?: Meta) => StyleDefinition | null;
20
- create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
21
- update?: (data: UpdateActionPayload) => Promise<StyleDefinition>;
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 { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type Meta, type StylesProvider, type UpdateActionPayload, stylesRepository, useCreateActionsByProvider, useProviders };
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((widget) => widget.base_styles ?? []);
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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACmCA,IAAM,uBAAuB;AAEtB,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,MAAM,CAAE,OAAa,CAAC,MAAO;AAClC,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,QAAM,eAAe,CAAE,aAAsB;AAC5C,UAAM,UAAU,IAAI;AACpB,UAAM,iBAAiB,UAAU,IAAK,CAAE,EAAE,cAAc,MAAO,aAAc,EAAE,OAAQ,OAAQ;AAE/F,QAAK,eAAe,SAAU,QAAS,GAAI;AAC1C,aAAO;AAAA,IACR;AAEA,QAAK,CAAE,SAAS,QAAS;AACxB,aAAO;AAAA,IACR;AAEA,WAAO,QAAQ,KAAM,CAAE,EAAE,MAAM,MAAO,MAAM,YAAY,MAAM,SAAS,YAAY,CAAE;AAAA,EACtF;AAEA,QAAM,eAAe,CAAE,aAAsB,qBAAqB,KAAM,QAAS;AAEjF,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;AC1FO,IAAM,mBAAmB,uBAAuB;;;ACFvD,mBAAsC;AAI/B,SAAS,eAAe;AAC9B,QAAM,CAAE,EAAE,QAAS,QAAI,yBAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,8BAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,aAAa;AACtC;;;ACVA,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,6BAAuF;AACvF,gCAA8C;;;ACD9C,mBAA4B;AAErB,IAAM,4CAAwC,0BAAoD;AAAA,EACxG,MAAM;AAAA,EACN,SAAS;AACV,CAAE;;;ADCK,IAAM,+BAA+B;AACrC,IAAM,8BAA8B;AAEpC,IAAM,yBAAyB;AAAA,EACrC,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,UAAI,eAAW,oCAAY;AAE3B,UAAK,oBAAqB,IAAK,GAAI;AAClC,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,IAEA,SAAS,CAAE,IAAI,OAAO,CAAC,MAAO;AAC7B,UAAK,CAAE,oBAAqB,IAAK,GAAI;AACpC,cAAM,IAAI,sCAAuC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAE;AAAA,MACxE;AAEA,YAAM,aAAS,yCAAkB,KAAK,SAAU,KAAK,CAAC;AAEtD,aAAO,OAAQ,EAAG,KAAK;AAAA,IACxB;AAAA,IAEA,aAAa,CAAE,MAAM,OAAO,CAAC,MAAO;AACnC,UAAK,CAAE,oBAAqB,IAAK,GAAI;AACpC,cAAM,IAAI,sCAAuC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAE;AAAA,MACxE;AAEA,qDAAoB;AAAA,QACnB,WAAW,KAAK;AAAA,QAChB,SAAS,KAAK;AAAA,QACd,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,MACb,CAAE;AAAA,IACH;AAAA,EACD;AAAA,EACA,WAAW,CAAE,WAAQ,0BAAAC,mBAAU,4CAAqB,EAAG;AAAA,EACvD,eAAe;AAChB;AAMA,SAAS,oBAAqB,MAAwD;AACrF,SAAO,eAAe,QAAQ,OAAO,KAAK,cAAc,YAAY,CAAC,CAAE,KAAK;AAC7E;;;AExDA,IAAAC,0BAAgC;AAIhC,IAAM,oCAAoC;AAEnC,IAAM,4BAA4C;AAAA,EACxD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,MAAM;AACL,YAAM,mBAAe,yCAAgB;AAErC,aAAO,OAAO,OAAQ,gBAAgB,CAAC,CAAE,EAAE;AAAA,QAAS,CAAE,WACrD,OAAO,OAAQ,OAAO,eAAe,CAAC,CAAE;AAAA,MACzC;AAAA,IACD;AAAA,IAEA,QAAS,IAAK;AACb,aAAO,KAAK,IAAI,EAAE,KAAM,CAAE,UAAW,MAAM,OAAO,EAAG,KAAK;AAAA,IAC3D;AAAA,EACD;AAAA,EACA,WAAW,MAAM;AAChB,WAAO,MAAM;AAAA,IAAC;AAAA,EACf;AACD;;;ACrBO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AAClD,mBAAiB,SAAU,yBAA0B;AACtD;;;ARQA,KAAK;","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((widget) => widget.base_styles ?? []);
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
@@ -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":";AAiCO,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,MAAM,CAAE,OAAa,CAAC,MAAO;AAClC,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,EACD;AACD;;;ACnEO,IAAM,mBAAmB,uBAAuB;;;ACFvD,SAAS,WAAW,kBAAkB;AAI/B,SAAS,eAAe;AAC9B,QAAM,CAAE,EAAE,QAAS,IAAI,WAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,YAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,aAAa;AACtC;;;ACVA,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,aAAa,kBAAkB,qBAAqB,0BAA0B;AACvF,SAAS,qBAAqB,gBAAgB;;;ACD9C,SAAS,mBAAmB;AAErB,IAAM,wCAAwC,YAAoD;AAAA,EACxG,MAAM;AAAA,EACN,SAAS;AACV,CAAE;;;ADCK,IAAM,+BAA+B;AAErC,IAAM,yBAAyB;AAAA,EACrC,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,UAAI,WAAW,YAAY;AAE3B,UAAK,oBAAqB,IAAK,GAAI;AAClC,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,IAEA,SAAS,CAAE,IAAI,OAAO,CAAC,MAAO;AAC7B,UAAK,CAAE,oBAAqB,IAAK,GAAI;AACpC,cAAM,IAAI,sCAAuC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAE;AAAA,MACxE;AAEA,YAAM,SAAS,iBAAkB,KAAK,SAAU,KAAK,CAAC;AAEtD,aAAO,OAAQ,EAAG,KAAK;AAAA,IACxB;AAAA,IAEA,aAAa,CAAE,MAAM,OAAO,CAAC,MAAO;AACnC,UAAK,CAAE,oBAAqB,IAAK,GAAI;AACpC,cAAM,IAAI,sCAAuC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAE;AAAA,MACxE;AAEA,yBAAoB;AAAA,QACnB,WAAW,KAAK;AAAA,QAChB,SAAS,KAAK;AAAA,QACd,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,MACb,CAAE;AAAA,IACH;AAAA,EACD;AAAA,EACA,WAAW,CAAE,OAAQ,SAAU,qBAAqB,EAAG;AACxD;AAMA,SAAS,oBAAqB,MAAwD;AACrF,SAAO,eAAe,QAAQ,OAAO,KAAK,cAAc,YAAY,CAAC,CAAE,KAAK;AAC7E;;;AEtDA,SAAS,uBAAuB;AAIhC,IAAM,oCAAoC;AAEnC,IAAM,4BAA4C;AAAA,EACxD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACR,KAAK,MAAM;AACV,YAAM,eAAe,gBAAgB;AAErC,aAAO,OAAO,OAAQ,gBAAgB,CAAC,CAAE,EAAE,QAAS,CAAE,WAAY,OAAO,eAAe,CAAC,CAAE;AAAA,IAC5F;AAAA,EACD;AAAA,EACA,WAAW,MAAM;AAChB,WAAO,MAAM;AAAA,IAAC;AAAA,EACf;AACD;;;ACfO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AAClD,mBAAiB,SAAU,yBAA0B;AACtD;;;ACQA,KAAK;","names":[]}
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.6.0",
4
+ "version": "0.7.1",
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.1",
37
- "@elementor/editor-styles": "0.5.4",
38
- "@elementor/editor-v1-adapters": "0.9.1",
39
- "@elementor/utils": "0.3.0"
36
+ "@elementor/editor-elements": "0.5.3",
37
+ "@elementor/editor-props": "0.9.1",
38
+ "@elementor/editor-styles": "0.5.6",
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: [ createMockStyleDefinition( { id: 's-1' } ), createMockStyleDefinition( { id: 's-2' } ) ],
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: [ createMockStyleDefinition( { id: 's-3' } ) ],
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 ) => widget.base_styles ?? [] );
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, type StylesProvider } from '../create-styles-repository';
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( createMockProvider( 'mock1', 10, [ styleDef1 ] ).provider );
15
- repo.register( createMockProvider( 'mock2', 20, [ styleDef2 ] ).provider );
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 { provider: mockStylesProvider1, notify: notify1 } = createMockProvider( 'mock1', 10, [ styleDef1 ] );
24
+ const mockStylesProvider1 = createMockStylesProvider( {
25
+ key: 'mock1',
26
+ priority: 10,
27
+ styleDefinitions: [ styleDef1 ],
28
+ } );
26
29
 
27
- const { provider: mockStylesProvider2, notify: notify2 } = createMockProvider( 'mock2', 10, [ styleDef2 ] );
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
- const createMockProvider = ( key: string, priority: number, styleDefinitions: StyleDefinition[] ) => {
59
- const subscribers = new Set< () => void >();
60
-
61
- const notify = () => {
62
- subscribers.forEach( ( cb ) => cb() );
63
- };
64
-
65
- const provider: StylesProvider = {
66
- key,
67
- priority,
68
- actions: {
69
- get: () => styleDefinitions,
70
- },
71
- subscribe: ( cb ) => {
72
- subscribers.add( cb );
73
-
74
- return () => {
75
- subscribers.delete( cb );
76
- };
77
- },
78
- };
79
-
80
- return { provider, notify };
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
- export type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;
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?: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;
23
- create?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;
24
- update?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;
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
  };