@elementor/editor-styles-repository 0.8.4 → 0.8.6

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-styles-repository@0.8.4 build
+> @elementor/editor-styles-repository@0.8.6 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     6.33 KB
-ESM dist/index.mjs.map 12.77 KB
-ESM ⚡️ Build success in 120ms
-CJS dist/index.js     8.15 KB
-CJS dist/index.js.map 13.61 KB
-CJS ⚡️ Build success in 124ms
+CJS dist/index.js     10.08 KB
+CJS dist/index.js.map 16.50 KB
+CJS ⚡️ Build success in 155ms
+ESM dist/index.mjs     8.13 KB
+ESM dist/index.mjs.map 15.65 KB
+ESM ⚡️ Build success in 156ms
 DTS Build start
-DTS ⚡️ Build success in 8869ms
-DTS dist/index.d.mts 3.19 KB
-DTS dist/index.d.ts  3.19 KB
+DTS ⚡️ Build success in 8703ms
+DTS dist/index.d.mts 3.35 KB
+DTS dist/index.d.ts  3.35 KB

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @elementor/editor-styles-repository
 
+## 0.8.6
+
+### Patch Changes
+
+- Updated dependencies [a1d7b3b]
+  - @elementor/editor-elements@0.8.2
+
+## 0.8.5
+
+### Patch Changes
+
+- ca5d620: CSS class selector: Display validation error message
+
 ## 0.8.4
 
 ### Patch Changes

package/dist/index.d.mts

@@ -41,15 +41,17 @@ declare function useProviders(): StylesProvider[];
 
 type CreateAction = Required<StylesProvider['actions']>['create'];
 type CreateTuple = [StylesProvider, CreateAction];
-declare function useCreateActionsByProvider(): CreateTuple[];
+declare function useGetStylesRepositoryCreateAction(): CreateTuple | null;
 
-declare function validateStyleLabel(label: string): {
-    isValid: boolean;
-    error: null;
+type ValidationEvent = 'inputChange' | 'create' | 'rename';
+type ValidationResult = {
+    isValid: true;
+    errorMessage: null;
 } | {
-    isValid: boolean;
-    error: string;
+    isValid: false;
+    errorMessage: string;
 };
+declare function validateStyleLabel(label: string, event: ValidationEvent | 'rename'): ValidationResult;
 
 type CreateStylesProviderOptions = {
     key: string | (() => string);
@@ -80,4 +82,4 @@ declare const ELEMENTS_STYLES_RESERVED_LABEL = "local";
 
 declare function init(): void;
 
-export { type CreateStylesProviderOptions, ELEMENTS_BASE_STYLES_PROVIDER_KEY, ELEMENTS_STYLES_PROVIDER_KEY_PREFIX, ELEMENTS_STYLES_RESERVED_LABEL, type Meta, type StylesProvider, type UpdateActionPayload, type UpdatePropsActionPayload, createStylesProvider, init, isElementsStylesProvider, stylesRepository, useCreateActionsByProvider, useProviders, validateStyleLabel };
+export { type CreateStylesProviderOptions, ELEMENTS_BASE_STYLES_PROVIDER_KEY, ELEMENTS_STYLES_PROVIDER_KEY_PREFIX, ELEMENTS_STYLES_RESERVED_LABEL, type Meta, type StylesProvider, type UpdateActionPayload, type UpdatePropsActionPayload, createStylesProvider, init, isElementsStylesProvider, stylesRepository, useGetStylesRepositoryCreateAction, useProviders, validateStyleLabel };

package/dist/index.d.ts

@@ -41,15 +41,17 @@ declare function useProviders(): StylesProvider[];
 
 type CreateAction = Required<StylesProvider['actions']>['create'];
 type CreateTuple = [StylesProvider, CreateAction];
-declare function useCreateActionsByProvider(): CreateTuple[];
+declare function useGetStylesRepositoryCreateAction(): CreateTuple | null;
 
-declare function validateStyleLabel(label: string): {
-    isValid: boolean;
-    error: null;
+type ValidationEvent = 'inputChange' | 'create' | 'rename';
+type ValidationResult = {
+    isValid: true;
+    errorMessage: null;
 } | {
-    isValid: boolean;
-    error: string;
+    isValid: false;
+    errorMessage: string;
 };
+declare function validateStyleLabel(label: string, event: ValidationEvent | 'rename'): ValidationResult;
 
 type CreateStylesProviderOptions = {
     key: string | (() => string);
@@ -80,4 +82,4 @@ declare const ELEMENTS_STYLES_RESERVED_LABEL = "local";
 
 declare function init(): void;
 
-export { type CreateStylesProviderOptions, ELEMENTS_BASE_STYLES_PROVIDER_KEY, ELEMENTS_STYLES_PROVIDER_KEY_PREFIX, ELEMENTS_STYLES_RESERVED_LABEL, type Meta, type StylesProvider, type UpdateActionPayload, type UpdatePropsActionPayload, createStylesProvider, init, isElementsStylesProvider, stylesRepository, useCreateActionsByProvider, useProviders, validateStyleLabel };
+export { type CreateStylesProviderOptions, ELEMENTS_BASE_STYLES_PROVIDER_KEY, ELEMENTS_STYLES_PROVIDER_KEY_PREFIX, ELEMENTS_STYLES_RESERVED_LABEL, type Meta, type StylesProvider, type UpdateActionPayload, type UpdatePropsActionPayload, createStylesProvider, init, isElementsStylesProvider, stylesRepository, useGetStylesRepositoryCreateAction, useProviders, validateStyleLabel };

package/dist/index.js

@@ -27,7 +27,7 @@ __export(index_exports, {
   init: () => init,
   isElementsStylesProvider: () => isElementsStylesProvider,
   stylesRepository: () => stylesRepository,
-  useCreateActionsByProvider: () => useCreateActionsByProvider,
+  useGetStylesRepositoryCreateAction: () => useGetStylesRepositoryCreateAction,
   useProviders: () => useProviders,
   validateStyleLabel: () => validateStyleLabel
 });
@@ -76,16 +76,22 @@ function useProviders() {
   return stylesRepository.getProviders();
 }
 
-// src/hooks/use-create-actions-by-provider.ts
+// src/hooks/use-get-styles-repository-create-action.ts
 var import_react2 = require("react");
-function useCreateActionsByProvider() {
+function useGetStylesRepositoryCreateAction() {
   return (0, import_react2.useMemo)(() => {
-    return stylesRepository.getProviders().map((provider) => {
+    const createActions = stylesRepository.getProviders().map((provider) => {
       if (!provider.actions.create) {
         return null;
       }
       return [provider, provider.actions.create];
     }).filter((item) => !!item);
+    if (createActions.length === 1) {
+      return createActions[0];
+    } else if (createActions.length === 0) {
+      return null;
+    }
+    throw new Error("Multiple providers with create action found in styles repository.");
   }, []);
 }
 
@@ -186,25 +192,49 @@ function isValidElementsMeta(meta) {
 }
 
 // src/utils/validate-style-label.ts
-var VALID_LABEL_REGEX = /^[a-zA-Z0-9_-]+$/;
-var schema = import_schema.z.string().min(1, (0, import_i18n.__)("Cannot be empty", "elementor")).max(50, (0, import_i18n.__)("Cannot be longer than 50 characters", "elementor")).regex(VALID_LABEL_REGEX, (0, import_i18n.__)("Invalid format", "elementor"));
-function validateStyleLabel(label) {
+var NO_START_DIGIT_REGEX = /^(|[^0-9].*)$/;
+var NO_SPACES_REGEX = /^\S*$/;
+var NO_SPECIAL_CHARS_REGEX = /^(|[a-zA-Z0-9_-]+)$/;
+var NO_DOUBLE_HYPHEN_START_REGEX = /^(?!--).*/;
+var NO_HYPHEN_DIGIT_START_REGEX = /^(?!-[0-9])/;
+var NO_CONSECUTIVE_HYPHENS_OR_UNDERSCORES_REGEX = /^(?!.*(--|__)).*/;
+var NO_LEADING_TRAILING_DASH_UNDERSCORE_REGEX = /^(?![-_]).*(?<![-_])$/;
+var RESERVED_CLASS_NAMES = ["container"];
+var schema = import_schema.z.string().max(50, (0, import_i18n.__)("Class name is too long. Please keep it under 50 characters.", "elementor")).regex(NO_START_DIGIT_REGEX, (0, import_i18n.__)("Class names must start with a letter.", "elementor")).regex(NO_SPACES_REGEX, (0, import_i18n.__)("Class names can\u2019t contain spaces.", "elementor")).regex(
+  NO_SPECIAL_CHARS_REGEX,
+  (0, import_i18n.__)("Class names can only use letters, numbers, dashes (-), and underscores (_).", "elementor")
+).regex(NO_DOUBLE_HYPHEN_START_REGEX, (0, import_i18n.__)("Double hyphens are reserved for custom properties.", "elementor")).regex(
+  NO_HYPHEN_DIGIT_START_REGEX,
+  (0, import_i18n.__)("Class names can\u2019t start with a hyphen followed by a number.", "elementor")
+).regex(
+  NO_CONSECUTIVE_HYPHENS_OR_UNDERSCORES_REGEX,
+  (0, import_i18n.__)("Avoid using multiple dashes or underscores in a row.", "elementor")
+).regex(
+  NO_LEADING_TRAILING_DASH_UNDERSCORE_REGEX,
+  (0, import_i18n.__)("Class names can\u2019t start or end with a dash or underscore.", "elementor")
+).refine((value) => !RESERVED_CLASS_NAMES.includes(value), {
+  message: (0, import_i18n.__)("This name is reserved and can\u2019t be used. Try something more specific.", "elementor")
+});
+function validateStyleLabel(label, event) {
   const existingLabels = /* @__PURE__ */ new Set([
     ELEMENTS_STYLES_RESERVED_LABEL,
     ...stylesRepository.all().map((styleDef) => styleDef.label.toLowerCase())
   ]);
-  const result = schema.refine((value) => !existingLabels.has(value), {
-    message: (0, import_i18n.__)("Name exists", "elementor")
+  const fullValidationEvent = ["create", "rename"].includes(event);
+  const result = schema.refine((value) => !(fullValidationEvent && value.length < 2), {
+    message: (0, import_i18n.__)("Class name is too short. Use at least 2 characters.", "elementor")
+  }).refine((value) => !(fullValidationEvent && existingLabels.has(value)), {
+    message: (0, import_i18n.__)("This class name already exists. Please choose a unique name.", "elementor")
   }).safeParse(label.toLowerCase());
   if (result.success) {
     return {
       isValid: true,
-      error: null
+      errorMessage: null
     };
   }
   return {
     isValid: false,
-    error: result.error.format()._errors[0]
+    errorMessage: result.error.format()._errors[0]
   };
 }
 
@@ -245,7 +275,7 @@ function init() {
   init,
   isElementsStylesProvider,
   stylesRepository,
-  useCreateActionsByProvider,
+  useGetStylesRepositoryCreateAction,
   useProviders,
   validateStyleLabel
 });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-providers.ts","../src/hooks/use-create-actions-by-provider.ts","../src/utils/validate-style-label.ts","../src/providers/document-elements-styles-provider.ts","../src/errors.ts","../src/utils/create-styles-provider.ts","../src/utils/is-elements-styles-provider.ts","../src/providers/element-base-styles-provider.ts","../src/init.ts"],"sourcesContent":["export * from './types';\n\nexport { stylesRepository } from './styles-repository';\nexport { useProviders } from './hooks/use-providers';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\nexport { validateStyleLabel } from './utils/validate-style-label';\nexport { createStylesProvider, type CreateStylesProviderOptions } from './utils/create-styles-provider';\nexport { isElementsStylesProvider } from './utils/is-elements-styles-provider';\n\nexport { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from './providers/element-base-styles-provider';\nexport {\n\tELEMENTS_STYLES_PROVIDER_KEY_PREFIX,\n\tELEMENTS_STYLES_RESERVED_LABEL,\n} from './providers/document-elements-styles-provider';\n\nexport { init } from './init';\n","import { type Meta, type StylesProvider } from '../types';\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.all( 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.getKey() === 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 '../types';\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 { z } from '@elementor/schema';\nimport { __ } from '@wordpress/i18n';\n\nimport { ELEMENTS_STYLES_RESERVED_LABEL } from '../providers/document-elements-styles-provider';\nimport { stylesRepository } from '../styles-repository';\n\nconst VALID_LABEL_REGEX = /^[a-zA-Z0-9_-]+$/;\n\nconst schema = z\n\t.string()\n\t.min( 1, __( 'Cannot be empty', 'elementor' ) )\n\t.max( 50, __( 'Cannot be longer than 50 characters', 'elementor' ) )\n\t.regex( VALID_LABEL_REGEX, __( 'Invalid format', 'elementor' ) );\n\nexport function validateStyleLabel( label: string ) {\n\tconst existingLabels = new Set( [\n\t\tELEMENTS_STYLES_RESERVED_LABEL,\n\t\t...stylesRepository.all().map( ( styleDef ) => styleDef.label.toLowerCase() ),\n\t] );\n\n\tconst result = schema\n\t\t.refine( ( value ) => ! existingLabels.has( value ), {\n\t\t\tmessage: __( 'Name exists', 'elementor' ),\n\t\t} )\n\t\t.safeParse( label.toLowerCase() );\n\n\tif ( result.success ) {\n\t\treturn {\n\t\t\tisValid: true,\n\t\t\terror: null,\n\t\t};\n\t}\n\n\treturn {\n\t\tisValid: false,\n\t\terror: result.error.format()._errors[ 0 ],\n\t};\n}\n","import {\n\tgetCurrentDocumentId,\n\tgetElements,\n\tgetElementStyles,\n\tstyleRerenderEvents,\n\tupdateElementStyle,\n} from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { ActiveDocumentMustExistError, InvalidElementsStyleProviderMetaError } from '../errors';\nimport { createStylesProvider } from '../utils/create-styles-provider';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY_PREFIX = 'document-elements-';\nexport const ELEMENTS_STYLES_RESERVED_LABEL = 'local';\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nexport const documentElementsStylesProvider = createStylesProvider( {\n\tkey: () => {\n\t\tconst documentId = getCurrentDocumentId();\n\n\t\tif ( ! documentId ) {\n\t\t\tthrow new ActiveDocumentMustExistError();\n\t\t}\n\n\t\treturn `${ ELEMENTS_STYLES_PROVIDER_KEY_PREFIX }${ documentId }`;\n\t},\n\tpriority: 50,\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n\tactions: {\n\t\tall: ( 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\tget: ( 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} );\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\nexport const ActiveDocumentMustExistError = createError( {\n\tcode: 'active_document_must_exist',\n\tmessage: 'Active document must exist.',\n} );\n","import { type StylesProvider } from '../types';\n\nexport type CreateStylesProviderOptions = {\n\tkey: string | ( () => string );\n\tpriority?: number;\n\tlimit?: number;\n\tsubscribe?: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n\tactions: {\n\t\tall: StylesProvider[ 'actions' ][ 'all' ];\n\t\tget: StylesProvider[ 'actions' ][ 'get' ];\n\t\tcreate?: StylesProvider[ 'actions' ][ 'create' ];\n\t\tdelete?: StylesProvider[ 'actions' ][ 'delete' ];\n\t\tupdate?: StylesProvider[ 'actions' ][ 'update' ];\n\t\tupdateProps?: StylesProvider[ 'actions' ][ 'updateProps' ];\n\t};\n};\n\nconst DEFAULT_LIMIT = 10000;\nconst DEFAULT_PRIORITY = 10;\n\nexport function createStylesProvider( {\n\tkey,\n\tpriority = DEFAULT_PRIORITY,\n\tlimit = DEFAULT_LIMIT,\n\tsubscribe = () => () => {},\n\tlabels,\n\tactions,\n}: CreateStylesProviderOptions ): StylesProvider {\n\treturn {\n\t\tgetKey: typeof key === 'string' ? () => key : key,\n\t\tpriority,\n\t\tlimit,\n\t\tsubscribe,\n\t\tlabels: {\n\t\t\tsingular: labels?.singular ?? null,\n\t\t\tplural: labels?.plural ?? null,\n\t\t},\n\t\tactions: {\n\t\t\tall: actions.all,\n\t\t\tget: actions.get,\n\t\t\tcreate: actions.create,\n\t\t\tdelete: actions.delete,\n\t\t\tupdate: actions.update,\n\t\t\tupdateProps: actions.updateProps,\n\t\t},\n\t};\n}\n","import { ELEMENTS_STYLES_PROVIDER_KEY_PREFIX } from '../providers/document-elements-styles-provider';\n\nexport function isElementsStylesProvider( key: string ) {\n\treturn new RegExp( `^${ ELEMENTS_STYLES_PROVIDER_KEY_PREFIX }\\\\d+$` ).test( key );\n}\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { createStylesProvider } from '../utils/create-styles-provider';\n\nexport const ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider = createStylesProvider( {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tactions: {\n\t\tall() {\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\tget( id ) {\n\t\t\treturn this.all().find( ( style ) => style.id === id ) ?? null;\n\t\t},\n\t},\n} );\n","import { documentElementsStylesProvider } from './providers/document-elements-styles-provider';\nimport { elementBaseStylesProvider } from './providers/element-base-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( documentElementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n"],"mappings":"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","names":["import_react","listenTo","import_editor_elements"]}
+{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-providers.ts","../src/hooks/use-get-styles-repository-create-action.ts","../src/utils/validate-style-label.ts","../src/providers/document-elements-styles-provider.ts","../src/errors.ts","../src/utils/create-styles-provider.ts","../src/utils/is-elements-styles-provider.ts","../src/providers/element-base-styles-provider.ts","../src/init.ts"],"sourcesContent":["export * from './types';\n\nexport { stylesRepository } from './styles-repository';\nexport { useProviders } from './hooks/use-providers';\nexport { useGetStylesRepositoryCreateAction } from './hooks/use-get-styles-repository-create-action';\nexport { validateStyleLabel } from './utils/validate-style-label';\nexport { createStylesProvider, type CreateStylesProviderOptions } from './utils/create-styles-provider';\nexport { isElementsStylesProvider } from './utils/is-elements-styles-provider';\n\nexport { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from './providers/element-base-styles-provider';\nexport {\n\tELEMENTS_STYLES_PROVIDER_KEY_PREFIX,\n\tELEMENTS_STYLES_RESERVED_LABEL,\n} from './providers/document-elements-styles-provider';\n\nexport { init } from './init';\n","import { type Meta, type StylesProvider } from '../types';\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.all( 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.getKey() === 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 '../types';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useGetStylesRepositoryCreateAction() {\n\treturn useMemo( () => {\n\t\tconst createActions = 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\n\t\tif ( createActions.length === 1 ) {\n\t\t\treturn createActions[ 0 ];\n\t\t} else if ( createActions.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\t\tthrow new Error( 'Multiple providers with create action found in styles repository.' );\n\t}, [] );\n}\n","import { z } from '@elementor/schema';\nimport { __ } from '@wordpress/i18n';\n\nimport { ELEMENTS_STYLES_RESERVED_LABEL } from '../providers/document-elements-styles-provider';\nimport { stylesRepository } from '../styles-repository';\n\nconst NO_START_DIGIT_REGEX = /^(|[^0-9].*)$/;\nconst NO_SPACES_REGEX = /^\\S*$/;\nconst NO_SPECIAL_CHARS_REGEX = /^(|[a-zA-Z0-9_-]+)$/;\nconst NO_DOUBLE_HYPHEN_START_REGEX = /^(?!--).*/;\nconst NO_HYPHEN_DIGIT_START_REGEX = /^(?!-[0-9])/;\nconst NO_CONSECUTIVE_HYPHENS_OR_UNDERSCORES_REGEX = /^(?!.*(--|__)).*/;\nconst NO_LEADING_TRAILING_DASH_UNDERSCORE_REGEX = /^(?![-_]).*(?<![-_])$/;\n\nconst RESERVED_CLASS_NAMES = [ 'container' ];\n\nconst schema = z\n\t.string()\n\t.max( 50, __( 'Class name is too long. Please keep it under 50 characters.', 'elementor' ) )\n\t.regex( NO_START_DIGIT_REGEX, __( 'Class names must start with a letter.', 'elementor' ) )\n\t.regex( NO_SPACES_REGEX, __( 'Class names can’t contain spaces.', 'elementor' ) )\n\t.regex(\n\t\tNO_SPECIAL_CHARS_REGEX,\n\t\t__( 'Class names can only use letters, numbers, dashes (-), and underscores (_).', 'elementor' )\n\t)\n\t.regex( NO_DOUBLE_HYPHEN_START_REGEX, __( 'Double hyphens are reserved for custom properties.', 'elementor' ) )\n\t.regex(\n\t\tNO_HYPHEN_DIGIT_START_REGEX,\n\t\t__( 'Class names can’t start with a hyphen followed by a number.', 'elementor' )\n\t)\n\t.regex(\n\t\tNO_CONSECUTIVE_HYPHENS_OR_UNDERSCORES_REGEX,\n\t\t__( 'Avoid using multiple dashes or underscores in a row.', 'elementor' )\n\t)\n\t.regex(\n\t\tNO_LEADING_TRAILING_DASH_UNDERSCORE_REGEX,\n\t\t__( 'Class names can’t start or end with a dash or underscore.', 'elementor' )\n\t)\n\t.refine( ( value ) => ! RESERVED_CLASS_NAMES.includes( value ), {\n\t\tmessage: __( 'This name is reserved and can’t be used. Try something more specific.', 'elementor' ),\n\t} );\n\ntype ValidationEvent = 'inputChange' | 'create' | 'rename';\ntype ValidationResult = { isValid: true; errorMessage: null } | { isValid: false; errorMessage: string };\n\nexport function validateStyleLabel( label: string, event: ValidationEvent | 'rename' ): ValidationResult {\n\tconst existingLabels = new Set( [\n\t\tELEMENTS_STYLES_RESERVED_LABEL,\n\t\t...stylesRepository.all().map( ( styleDef ) => styleDef.label.toLowerCase() ),\n\t] );\n\n\tconst fullValidationEvent = [ 'create', 'rename' ].includes( event );\n\n\tconst result = schema\n\t\t.refine( ( value ) => ! ( fullValidationEvent && value.length < 2 ), {\n\t\t\tmessage: __( 'Class name is too short. Use at least 2 characters.', 'elementor' ),\n\t\t} )\n\t\t.refine( ( value ) => ! ( fullValidationEvent && existingLabels.has( value ) ), {\n\t\t\tmessage: __( 'This class name already exists. Please choose a unique name.', 'elementor' ),\n\t\t} )\n\t\t.safeParse( label.toLowerCase() );\n\n\tif ( result.success ) {\n\t\treturn {\n\t\t\tisValid: true,\n\t\t\terrorMessage: null,\n\t\t};\n\t}\n\n\treturn {\n\t\tisValid: false,\n\t\terrorMessage: result.error.format()._errors[ 0 ],\n\t};\n}\n","import {\n\tgetCurrentDocumentId,\n\tgetElements,\n\tgetElementStyles,\n\tstyleRerenderEvents,\n\tupdateElementStyle,\n} from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { ActiveDocumentMustExistError, InvalidElementsStyleProviderMetaError } from '../errors';\nimport { createStylesProvider } from '../utils/create-styles-provider';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY_PREFIX = 'document-elements-';\nexport const ELEMENTS_STYLES_RESERVED_LABEL = 'local';\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nexport const documentElementsStylesProvider = createStylesProvider( {\n\tkey: () => {\n\t\tconst documentId = getCurrentDocumentId();\n\n\t\tif ( ! documentId ) {\n\t\t\tthrow new ActiveDocumentMustExistError();\n\t\t}\n\n\t\treturn `${ ELEMENTS_STYLES_PROVIDER_KEY_PREFIX }${ documentId }`;\n\t},\n\tpriority: 50,\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n\tactions: {\n\t\tall: ( 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\tget: ( 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} );\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\nexport const ActiveDocumentMustExistError = createError( {\n\tcode: 'active_document_must_exist',\n\tmessage: 'Active document must exist.',\n} );\n","import { type StylesProvider } from '../types';\n\nexport type CreateStylesProviderOptions = {\n\tkey: string | ( () => string );\n\tpriority?: number;\n\tlimit?: number;\n\tsubscribe?: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n\tactions: {\n\t\tall: StylesProvider[ 'actions' ][ 'all' ];\n\t\tget: StylesProvider[ 'actions' ][ 'get' ];\n\t\tcreate?: StylesProvider[ 'actions' ][ 'create' ];\n\t\tdelete?: StylesProvider[ 'actions' ][ 'delete' ];\n\t\tupdate?: StylesProvider[ 'actions' ][ 'update' ];\n\t\tupdateProps?: StylesProvider[ 'actions' ][ 'updateProps' ];\n\t};\n};\n\nconst DEFAULT_LIMIT = 10000;\nconst DEFAULT_PRIORITY = 10;\n\nexport function createStylesProvider( {\n\tkey,\n\tpriority = DEFAULT_PRIORITY,\n\tlimit = DEFAULT_LIMIT,\n\tsubscribe = () => () => {},\n\tlabels,\n\tactions,\n}: CreateStylesProviderOptions ): StylesProvider {\n\treturn {\n\t\tgetKey: typeof key === 'string' ? () => key : key,\n\t\tpriority,\n\t\tlimit,\n\t\tsubscribe,\n\t\tlabels: {\n\t\t\tsingular: labels?.singular ?? null,\n\t\t\tplural: labels?.plural ?? null,\n\t\t},\n\t\tactions: {\n\t\t\tall: actions.all,\n\t\t\tget: actions.get,\n\t\t\tcreate: actions.create,\n\t\t\tdelete: actions.delete,\n\t\t\tupdate: actions.update,\n\t\t\tupdateProps: actions.updateProps,\n\t\t},\n\t};\n}\n","import { ELEMENTS_STYLES_PROVIDER_KEY_PREFIX } from '../providers/document-elements-styles-provider';\n\nexport function isElementsStylesProvider( key: string ) {\n\treturn new RegExp( `^${ ELEMENTS_STYLES_PROVIDER_KEY_PREFIX }\\\\d+$` ).test( key );\n}\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { createStylesProvider } from '../utils/create-styles-provider';\n\nexport const ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider = createStylesProvider( {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tactions: {\n\t\tall() {\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\tget( id ) {\n\t\t\treturn this.all().find( ( style ) => style.id === id ) ?? null;\n\t\t},\n\t},\n} );\n","import { documentElementsStylesProvider } from './providers/document-elements-styles-provider';\nimport { elementBaseStylesProvider } from './providers/element-base-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( documentElementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n"],"mappings":"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","names":["import_react","listenTo","import_editor_elements"]}

package/dist/index.mjs

@@ -41,16 +41,22 @@ function useProviders() {
   return stylesRepository.getProviders();
 }
 
-// src/hooks/use-create-actions-by-provider.ts
+// src/hooks/use-get-styles-repository-create-action.ts
 import { useMemo } from "react";
-function useCreateActionsByProvider() {
+function useGetStylesRepositoryCreateAction() {
   return useMemo(() => {
-    return stylesRepository.getProviders().map((provider) => {
+    const createActions = stylesRepository.getProviders().map((provider) => {
       if (!provider.actions.create) {
         return null;
       }
       return [provider, provider.actions.create];
     }).filter((item) => !!item);
+    if (createActions.length === 1) {
+      return createActions[0];
+    } else if (createActions.length === 0) {
+      return null;
+    }
+    throw new Error("Multiple providers with create action found in styles repository.");
   }, []);
 }
 
@@ -157,25 +163,49 @@ function isValidElementsMeta(meta) {
 }
 
 // src/utils/validate-style-label.ts
-var VALID_LABEL_REGEX = /^[a-zA-Z0-9_-]+$/;
-var schema = z.string().min(1, __("Cannot be empty", "elementor")).max(50, __("Cannot be longer than 50 characters", "elementor")).regex(VALID_LABEL_REGEX, __("Invalid format", "elementor"));
-function validateStyleLabel(label) {
+var NO_START_DIGIT_REGEX = /^(|[^0-9].*)$/;
+var NO_SPACES_REGEX = /^\S*$/;
+var NO_SPECIAL_CHARS_REGEX = /^(|[a-zA-Z0-9_-]+)$/;
+var NO_DOUBLE_HYPHEN_START_REGEX = /^(?!--).*/;
+var NO_HYPHEN_DIGIT_START_REGEX = /^(?!-[0-9])/;
+var NO_CONSECUTIVE_HYPHENS_OR_UNDERSCORES_REGEX = /^(?!.*(--|__)).*/;
+var NO_LEADING_TRAILING_DASH_UNDERSCORE_REGEX = /^(?![-_]).*(?<![-_])$/;
+var RESERVED_CLASS_NAMES = ["container"];
+var schema = z.string().max(50, __("Class name is too long. Please keep it under 50 characters.", "elementor")).regex(NO_START_DIGIT_REGEX, __("Class names must start with a letter.", "elementor")).regex(NO_SPACES_REGEX, __("Class names can\u2019t contain spaces.", "elementor")).regex(
+  NO_SPECIAL_CHARS_REGEX,
+  __("Class names can only use letters, numbers, dashes (-), and underscores (_).", "elementor")
+).regex(NO_DOUBLE_HYPHEN_START_REGEX, __("Double hyphens are reserved for custom properties.", "elementor")).regex(
+  NO_HYPHEN_DIGIT_START_REGEX,
+  __("Class names can\u2019t start with a hyphen followed by a number.", "elementor")
+).regex(
+  NO_CONSECUTIVE_HYPHENS_OR_UNDERSCORES_REGEX,
+  __("Avoid using multiple dashes or underscores in a row.", "elementor")
+).regex(
+  NO_LEADING_TRAILING_DASH_UNDERSCORE_REGEX,
+  __("Class names can\u2019t start or end with a dash or underscore.", "elementor")
+).refine((value) => !RESERVED_CLASS_NAMES.includes(value), {
+  message: __("This name is reserved and can\u2019t be used. Try something more specific.", "elementor")
+});
+function validateStyleLabel(label, event) {
   const existingLabels = /* @__PURE__ */ new Set([
     ELEMENTS_STYLES_RESERVED_LABEL,
     ...stylesRepository.all().map((styleDef) => styleDef.label.toLowerCase())
   ]);
-  const result = schema.refine((value) => !existingLabels.has(value), {
-    message: __("Name exists", "elementor")
+  const fullValidationEvent = ["create", "rename"].includes(event);
+  const result = schema.refine((value) => !(fullValidationEvent && value.length < 2), {
+    message: __("Class name is too short. Use at least 2 characters.", "elementor")
+  }).refine((value) => !(fullValidationEvent && existingLabels.has(value)), {
+    message: __("This class name already exists. Please choose a unique name.", "elementor")
   }).safeParse(label.toLowerCase());
   if (result.success) {
     return {
       isValid: true,
-      error: null
+      errorMessage: null
     };
   }
   return {
     isValid: false,
-    error: result.error.format()._errors[0]
+    errorMessage: result.error.format()._errors[0]
   };
 }
 
@@ -215,7 +245,7 @@ export {
   init,
   isElementsStylesProvider,
   stylesRepository,
-  useCreateActionsByProvider,
+  useGetStylesRepositoryCreateAction,
   useProviders,
   validateStyleLabel
 };

package/dist/index.mjs.map

@@ -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/utils/validate-style-label.ts","../src/providers/document-elements-styles-provider.ts","../src/errors.ts","../src/utils/create-styles-provider.ts","../src/utils/is-elements-styles-provider.ts","../src/providers/element-base-styles-provider.ts","../src/init.ts"],"sourcesContent":["import { type Meta, type StylesProvider } from '../types';\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.all( 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.getKey() === 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 '../types';\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 { z } from '@elementor/schema';\nimport { __ } from '@wordpress/i18n';\n\nimport { ELEMENTS_STYLES_RESERVED_LABEL } from '../providers/document-elements-styles-provider';\nimport { stylesRepository } from '../styles-repository';\n\nconst VALID_LABEL_REGEX = /^[a-zA-Z0-9_-]+$/;\n\nconst schema = z\n\t.string()\n\t.min( 1, __( 'Cannot be empty', 'elementor' ) )\n\t.max( 50, __( 'Cannot be longer than 50 characters', 'elementor' ) )\n\t.regex( VALID_LABEL_REGEX, __( 'Invalid format', 'elementor' ) );\n\nexport function validateStyleLabel( label: string ) {\n\tconst existingLabels = new Set( [\n\t\tELEMENTS_STYLES_RESERVED_LABEL,\n\t\t...stylesRepository.all().map( ( styleDef ) => styleDef.label.toLowerCase() ),\n\t] );\n\n\tconst result = schema\n\t\t.refine( ( value ) => ! existingLabels.has( value ), {\n\t\t\tmessage: __( 'Name exists', 'elementor' ),\n\t\t} )\n\t\t.safeParse( label.toLowerCase() );\n\n\tif ( result.success ) {\n\t\treturn {\n\t\t\tisValid: true,\n\t\t\terror: null,\n\t\t};\n\t}\n\n\treturn {\n\t\tisValid: false,\n\t\terror: result.error.format()._errors[ 0 ],\n\t};\n}\n","import {\n\tgetCurrentDocumentId,\n\tgetElements,\n\tgetElementStyles,\n\tstyleRerenderEvents,\n\tupdateElementStyle,\n} from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { ActiveDocumentMustExistError, InvalidElementsStyleProviderMetaError } from '../errors';\nimport { createStylesProvider } from '../utils/create-styles-provider';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY_PREFIX = 'document-elements-';\nexport const ELEMENTS_STYLES_RESERVED_LABEL = 'local';\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nexport const documentElementsStylesProvider = createStylesProvider( {\n\tkey: () => {\n\t\tconst documentId = getCurrentDocumentId();\n\n\t\tif ( ! documentId ) {\n\t\t\tthrow new ActiveDocumentMustExistError();\n\t\t}\n\n\t\treturn `${ ELEMENTS_STYLES_PROVIDER_KEY_PREFIX }${ documentId }`;\n\t},\n\tpriority: 50,\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n\tactions: {\n\t\tall: ( 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\tget: ( 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} );\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\nexport const ActiveDocumentMustExistError = createError( {\n\tcode: 'active_document_must_exist',\n\tmessage: 'Active document must exist.',\n} );\n","import { type StylesProvider } from '../types';\n\nexport type CreateStylesProviderOptions = {\n\tkey: string | ( () => string );\n\tpriority?: number;\n\tlimit?: number;\n\tsubscribe?: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n\tactions: {\n\t\tall: StylesProvider[ 'actions' ][ 'all' ];\n\t\tget: StylesProvider[ 'actions' ][ 'get' ];\n\t\tcreate?: StylesProvider[ 'actions' ][ 'create' ];\n\t\tdelete?: StylesProvider[ 'actions' ][ 'delete' ];\n\t\tupdate?: StylesProvider[ 'actions' ][ 'update' ];\n\t\tupdateProps?: StylesProvider[ 'actions' ][ 'updateProps' ];\n\t};\n};\n\nconst DEFAULT_LIMIT = 10000;\nconst DEFAULT_PRIORITY = 10;\n\nexport function createStylesProvider( {\n\tkey,\n\tpriority = DEFAULT_PRIORITY,\n\tlimit = DEFAULT_LIMIT,\n\tsubscribe = () => () => {},\n\tlabels,\n\tactions,\n}: CreateStylesProviderOptions ): StylesProvider {\n\treturn {\n\t\tgetKey: typeof key === 'string' ? () => key : key,\n\t\tpriority,\n\t\tlimit,\n\t\tsubscribe,\n\t\tlabels: {\n\t\t\tsingular: labels?.singular ?? null,\n\t\t\tplural: labels?.plural ?? null,\n\t\t},\n\t\tactions: {\n\t\t\tall: actions.all,\n\t\t\tget: actions.get,\n\t\t\tcreate: actions.create,\n\t\t\tdelete: actions.delete,\n\t\t\tupdate: actions.update,\n\t\t\tupdateProps: actions.updateProps,\n\t\t},\n\t};\n}\n","import { ELEMENTS_STYLES_PROVIDER_KEY_PREFIX } from '../providers/document-elements-styles-provider';\n\nexport function isElementsStylesProvider( key: string ) {\n\treturn new RegExp( `^${ ELEMENTS_STYLES_PROVIDER_KEY_PREFIX }\\\\d+$` ).test( key );\n}\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { createStylesProvider } from '../utils/create-styles-provider';\n\nexport const ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider = createStylesProvider( {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tactions: {\n\t\tall() {\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\tget( id ) {\n\t\t\treturn this.all().find( ( style ) => style.id === id ) ?? null;\n\t\t},\n\t},\n} );\n","import { documentElementsStylesProvider } from './providers/document-elements-styles-provider';\nimport { elementBaseStylesProvider } from './providers/element-base-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( documentElementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-providers.ts","../src/hooks/use-get-styles-repository-create-action.ts","../src/utils/validate-style-label.ts","../src/providers/document-elements-styles-provider.ts","../src/errors.ts","../src/utils/create-styles-provider.ts","../src/utils/is-elements-styles-provider.ts","../src/providers/element-base-styles-provider.ts","../src/init.ts"],"sourcesContent":["import { type Meta, type StylesProvider } from '../types';\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.all( 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.getKey() === 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 '../types';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useGetStylesRepositoryCreateAction() {\n\treturn useMemo( () => {\n\t\tconst createActions = 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\n\t\tif ( createActions.length === 1 ) {\n\t\t\treturn createActions[ 0 ];\n\t\t} else if ( createActions.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\t\tthrow new Error( 'Multiple providers with create action found in styles repository.' );\n\t}, [] );\n}\n","import { z } from '@elementor/schema';\nimport { __ } from '@wordpress/i18n';\n\nimport { ELEMENTS_STYLES_RESERVED_LABEL } from '../providers/document-elements-styles-provider';\nimport { stylesRepository } from '../styles-repository';\n\nconst NO_START_DIGIT_REGEX = /^(|[^0-9].*)$/;\nconst NO_SPACES_REGEX = /^\\S*$/;\nconst NO_SPECIAL_CHARS_REGEX = /^(|[a-zA-Z0-9_-]+)$/;\nconst NO_DOUBLE_HYPHEN_START_REGEX = /^(?!--).*/;\nconst NO_HYPHEN_DIGIT_START_REGEX = /^(?!-[0-9])/;\nconst NO_CONSECUTIVE_HYPHENS_OR_UNDERSCORES_REGEX = /^(?!.*(--|__)).*/;\nconst NO_LEADING_TRAILING_DASH_UNDERSCORE_REGEX = /^(?![-_]).*(?<![-_])$/;\n\nconst RESERVED_CLASS_NAMES = [ 'container' ];\n\nconst schema = z\n\t.string()\n\t.max( 50, __( 'Class name is too long. Please keep it under 50 characters.', 'elementor' ) )\n\t.regex( NO_START_DIGIT_REGEX, __( 'Class names must start with a letter.', 'elementor' ) )\n\t.regex( NO_SPACES_REGEX, __( 'Class names can’t contain spaces.', 'elementor' ) )\n\t.regex(\n\t\tNO_SPECIAL_CHARS_REGEX,\n\t\t__( 'Class names can only use letters, numbers, dashes (-), and underscores (_).', 'elementor' )\n\t)\n\t.regex( NO_DOUBLE_HYPHEN_START_REGEX, __( 'Double hyphens are reserved for custom properties.', 'elementor' ) )\n\t.regex(\n\t\tNO_HYPHEN_DIGIT_START_REGEX,\n\t\t__( 'Class names can’t start with a hyphen followed by a number.', 'elementor' )\n\t)\n\t.regex(\n\t\tNO_CONSECUTIVE_HYPHENS_OR_UNDERSCORES_REGEX,\n\t\t__( 'Avoid using multiple dashes or underscores in a row.', 'elementor' )\n\t)\n\t.regex(\n\t\tNO_LEADING_TRAILING_DASH_UNDERSCORE_REGEX,\n\t\t__( 'Class names can’t start or end with a dash or underscore.', 'elementor' )\n\t)\n\t.refine( ( value ) => ! RESERVED_CLASS_NAMES.includes( value ), {\n\t\tmessage: __( 'This name is reserved and can’t be used. Try something more specific.', 'elementor' ),\n\t} );\n\ntype ValidationEvent = 'inputChange' | 'create' | 'rename';\ntype ValidationResult = { isValid: true; errorMessage: null } | { isValid: false; errorMessage: string };\n\nexport function validateStyleLabel( label: string, event: ValidationEvent | 'rename' ): ValidationResult {\n\tconst existingLabels = new Set( [\n\t\tELEMENTS_STYLES_RESERVED_LABEL,\n\t\t...stylesRepository.all().map( ( styleDef ) => styleDef.label.toLowerCase() ),\n\t] );\n\n\tconst fullValidationEvent = [ 'create', 'rename' ].includes( event );\n\n\tconst result = schema\n\t\t.refine( ( value ) => ! ( fullValidationEvent && value.length < 2 ), {\n\t\t\tmessage: __( 'Class name is too short. Use at least 2 characters.', 'elementor' ),\n\t\t} )\n\t\t.refine( ( value ) => ! ( fullValidationEvent && existingLabels.has( value ) ), {\n\t\t\tmessage: __( 'This class name already exists. Please choose a unique name.', 'elementor' ),\n\t\t} )\n\t\t.safeParse( label.toLowerCase() );\n\n\tif ( result.success ) {\n\t\treturn {\n\t\t\tisValid: true,\n\t\t\terrorMessage: null,\n\t\t};\n\t}\n\n\treturn {\n\t\tisValid: false,\n\t\terrorMessage: result.error.format()._errors[ 0 ],\n\t};\n}\n","import {\n\tgetCurrentDocumentId,\n\tgetElements,\n\tgetElementStyles,\n\tstyleRerenderEvents,\n\tupdateElementStyle,\n} from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { ActiveDocumentMustExistError, InvalidElementsStyleProviderMetaError } from '../errors';\nimport { createStylesProvider } from '../utils/create-styles-provider';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY_PREFIX = 'document-elements-';\nexport const ELEMENTS_STYLES_RESERVED_LABEL = 'local';\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nexport const documentElementsStylesProvider = createStylesProvider( {\n\tkey: () => {\n\t\tconst documentId = getCurrentDocumentId();\n\n\t\tif ( ! documentId ) {\n\t\t\tthrow new ActiveDocumentMustExistError();\n\t\t}\n\n\t\treturn `${ ELEMENTS_STYLES_PROVIDER_KEY_PREFIX }${ documentId }`;\n\t},\n\tpriority: 50,\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n\tactions: {\n\t\tall: ( 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\tget: ( 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} );\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\nexport const ActiveDocumentMustExistError = createError( {\n\tcode: 'active_document_must_exist',\n\tmessage: 'Active document must exist.',\n} );\n","import { type StylesProvider } from '../types';\n\nexport type CreateStylesProviderOptions = {\n\tkey: string | ( () => string );\n\tpriority?: number;\n\tlimit?: number;\n\tsubscribe?: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n\tactions: {\n\t\tall: StylesProvider[ 'actions' ][ 'all' ];\n\t\tget: StylesProvider[ 'actions' ][ 'get' ];\n\t\tcreate?: StylesProvider[ 'actions' ][ 'create' ];\n\t\tdelete?: StylesProvider[ 'actions' ][ 'delete' ];\n\t\tupdate?: StylesProvider[ 'actions' ][ 'update' ];\n\t\tupdateProps?: StylesProvider[ 'actions' ][ 'updateProps' ];\n\t};\n};\n\nconst DEFAULT_LIMIT = 10000;\nconst DEFAULT_PRIORITY = 10;\n\nexport function createStylesProvider( {\n\tkey,\n\tpriority = DEFAULT_PRIORITY,\n\tlimit = DEFAULT_LIMIT,\n\tsubscribe = () => () => {},\n\tlabels,\n\tactions,\n}: CreateStylesProviderOptions ): StylesProvider {\n\treturn {\n\t\tgetKey: typeof key === 'string' ? () => key : key,\n\t\tpriority,\n\t\tlimit,\n\t\tsubscribe,\n\t\tlabels: {\n\t\t\tsingular: labels?.singular ?? null,\n\t\t\tplural: labels?.plural ?? null,\n\t\t},\n\t\tactions: {\n\t\t\tall: actions.all,\n\t\t\tget: actions.get,\n\t\t\tcreate: actions.create,\n\t\t\tdelete: actions.delete,\n\t\t\tupdate: actions.update,\n\t\t\tupdateProps: actions.updateProps,\n\t\t},\n\t};\n}\n","import { ELEMENTS_STYLES_PROVIDER_KEY_PREFIX } from '../providers/document-elements-styles-provider';\n\nexport function isElementsStylesProvider( key: string ) {\n\treturn new RegExp( `^${ ELEMENTS_STYLES_PROVIDER_KEY_PREFIX }\\\\d+$` ).test( key );\n}\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { createStylesProvider } from '../utils/create-styles-provider';\n\nexport const ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider = createStylesProvider( {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tactions: {\n\t\tall() {\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\tget( id ) {\n\t\t\treturn this.all().find( ( style ) => style.id === id ) ?? null;\n\t\t},\n\t},\n} );\n","import { documentElementsStylesProvider } from './providers/document-elements-styles-provider';\nimport { elementBaseStylesProvider } from './providers/element-base-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( documentElementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-styles-repository",
   "description": "Elementor Editor Styles Repository",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -33,7 +33,7 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-elements": "0.8.1",
+    "@elementor/editor-elements": "0.8.2",
     "@elementor/editor-props": "0.12.0",
     "@elementor/editor-styles": "0.6.6",
     "@elementor/editor-v1-adapters": "0.11.0",

package/src/hooks/{use-create-actions-by-provider.ts → use-get-styles-repository-create-action.ts}

@@ -6,9 +6,9 @@ import { type StylesProvider } from '../types';
 type CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];
 type CreateTuple = [ StylesProvider, CreateAction ];
 
-export function useCreateActionsByProvider() {
+export function useGetStylesRepositoryCreateAction() {
 	return useMemo( () => {
-		return stylesRepository
+		const createActions = stylesRepository
 			.getProviders()
 			.map< CreateTuple | null >( ( provider ) => {
 				if ( ! provider.actions.create ) {
@@ -18,5 +18,12 @@ export function useCreateActionsByProvider() {
 				return [ provider, provider.actions.create ];
 			} )
 			.filter( ( item ) => !! item );
+
+		if ( createActions.length === 1 ) {
+			return createActions[ 0 ];
+		} else if ( createActions.length === 0 ) {
+			return null;
+		}
+		throw new Error( 'Multiple providers with create action found in styles repository.' );
 	}, [] );
 }

package/src/index.ts

@@ -2,7 +2,7 @@ export * from './types';
 
 export { stylesRepository } from './styles-repository';
 export { useProviders } from './hooks/use-providers';
-export { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';
+export { useGetStylesRepositoryCreateAction } from './hooks/use-get-styles-repository-create-action';
 export { validateStyleLabel } from './utils/validate-style-label';
 export { createStylesProvider, type CreateStylesProviderOptions } from './utils/create-styles-provider';
 export { isElementsStylesProvider } from './utils/is-elements-styles-provider';

package/src/utils/__tests__/validate-style-label.test.ts

@@ -13,25 +13,108 @@ describe( 'validateStyleLabel', () => {
 
 	it( 'should pass validation if label is valid', () => {
 		// Act.
-		const result = validateStyleLabel( 'valid-label' );
+		const result = validateStyleLabel( 'valid-label', 'create' );
 
 		// Assert.
 		expect( result.isValid ).toBe( true );
-		expect( result.error ).toBeNull();
+		expect( result.errorMessage ).toBeNull();
 	} );
 
 	it.each( [
-		{ reason: 'label is empty', label: '', message: 'Cannot be empty' },
-		{ reason: 'label is too long', label: 'a'.repeat( 51 ), message: 'Cannot be longer than 50 characters' },
-		{ reason: 'label contains invalid characters', label: 'invalid label!', message: 'Invalid format' },
-		{ reason: 'label already exists', label: 'class-1', message: 'Name exists' },
-		{ reason: 'label is reserved', label: 'local', message: 'Name exists' },
+		{
+			reason: 'label is too long',
+			label: 'super-long-class-label-with-more-than-50-characters',
+			message: 'Class name is too long. Please keep it under 50 characters.',
+		},
+		{ reason: 'label starts with a number', label: '1invalid', message: 'Class names must start with a letter.' },
+		{
+			reason: 'label contains spaces',
+			label: 'invalid label',
+			message: 'Class names can’t contain spaces.',
+		},
+		{
+			reason: 'label contains special characters',
+			label: 'invalid@label',
+			message: 'Class names can only use letters, numbers, dashes (-), and underscores (_).',
+		},
+		{
+			reason: 'label starts with double hyphens',
+			label: '--invalid',
+			message: 'Double hyphens are reserved for custom properties.',
+		},
+		{
+			reason: 'label starts with a hyphen followed by a number',
+			label: '-1invalid',
+			message: 'Class names can’t start with a hyphen followed by a number.',
+		},
+		{
+			reason: 'label contains consecutive dashes',
+			label: 'invalid--label',
+			message: 'Avoid using multiple dashes or underscores in a row.',
+		},
+		{
+			reason: 'label contains consecutive underscores',
+			label: 'invalid__label',
+			message: 'Avoid using multiple dashes or underscores in a row.',
+		},
+		{
+			reason: 'label starts with a dash',
+			label: '-invalid',
+			message: 'Class names can’t start or end with a dash or underscore.',
+		},
+		{
+			reason: 'label ends with a dash',
+			label: 'invalid-',
+			message: 'Class names can’t start or end with a dash or underscore.',
+		},
+		{
+			reason: 'label starts with an underscore',
+			label: '_invalid',
+			message: 'Class names can’t start or end with a dash or underscore.',
+		},
+		{
+			reason: 'label ends with an underscore',
+			label: 'invalid_',
+			message: 'Class names can’t start or end with a dash or underscore.',
+		},
+		{
+			reason: 'label is a reserved name',
+			label: 'container',
+			message: 'This name is reserved and can’t be used. Try something more specific.',
+		},
 	] )( 'should fail validation if $reason', ( { label, message } ) => {
 		// Act.
-		const result = validateStyleLabel( label );
+		const result = validateStyleLabel( label, 'inputChange' );
 
 		// Assert.
 		expect( result.isValid ).toBe( false );
-		expect( result.error ).toBe( message );
+		expect( result.errorMessage ).toBe( message );
+	} );
+
+	it.each( [
+		{ label: '', event: 'create', labelDescription: 'empty' },
+		{ label: '', event: 'rename', labelDescription: 'empty' },
+
+		{ label: 'a', event: 'create', labelDescription: 'single-character' },
+		{ label: 'a', event: 'rename', labelDescription: 'single-character' },
+	] )( 'should fail validation for a "$labelDescription" label when event is "$event"', ( { label, event } ) => {
+		// Act.
+		const result = validateStyleLabel( label, event as 'create' | 'rename' );
+
+		// Assert.
+		expect( result.isValid ).toBe( false );
+		expect( result.errorMessage ).toBe( 'Class name is too short. Use at least 2 characters.' );
+	} );
+
+	it.each( [
+		{ label: '', labelDescription: 'empty' },
+		{ label: 'a', labelDescription: 'single-character' },
+	] )( 'should fail validation for a "$labelDescription" label when event is "inputChange"', ( { label } ) => {
+		// Act.
+		const result = validateStyleLabel( label, 'inputChange' );
+
+		// Assert.
+		expect( result.isValid ).toBe( true );
+		expect( result.errorMessage ).toBeNull();
 	} );
 } );

package/src/utils/validate-style-label.ts

@@ -4,35 +4,71 @@ import { __ } from '@wordpress/i18n';
 import { ELEMENTS_STYLES_RESERVED_LABEL } from '../providers/document-elements-styles-provider';
 import { stylesRepository } from '../styles-repository';
 
-const VALID_LABEL_REGEX = /^[a-zA-Z0-9_-]+$/;
+const NO_START_DIGIT_REGEX = /^(|[^0-9].*)$/;
+const NO_SPACES_REGEX = /^\S*$/;
+const NO_SPECIAL_CHARS_REGEX = /^(|[a-zA-Z0-9_-]+)$/;
+const NO_DOUBLE_HYPHEN_START_REGEX = /^(?!--).*/;
+const NO_HYPHEN_DIGIT_START_REGEX = /^(?!-[0-9])/;
+const NO_CONSECUTIVE_HYPHENS_OR_UNDERSCORES_REGEX = /^(?!.*(--|__)).*/;
+const NO_LEADING_TRAILING_DASH_UNDERSCORE_REGEX = /^(?![-_]).*(?<![-_])$/;
+
+const RESERVED_CLASS_NAMES = [ 'container' ];
 
 const schema = z
 	.string()
-	.min( 1, __( 'Cannot be empty', 'elementor' ) )
-	.max( 50, __( 'Cannot be longer than 50 characters', 'elementor' ) )
-	.regex( VALID_LABEL_REGEX, __( 'Invalid format', 'elementor' ) );
+	.max( 50, __( 'Class name is too long. Please keep it under 50 characters.', 'elementor' ) )
+	.regex( NO_START_DIGIT_REGEX, __( 'Class names must start with a letter.', 'elementor' ) )
+	.regex( NO_SPACES_REGEX, __( 'Class names can’t contain spaces.', 'elementor' ) )
+	.regex(
+		NO_SPECIAL_CHARS_REGEX,
+		__( 'Class names can only use letters, numbers, dashes (-), and underscores (_).', 'elementor' )
+	)
+	.regex( NO_DOUBLE_HYPHEN_START_REGEX, __( 'Double hyphens are reserved for custom properties.', 'elementor' ) )
+	.regex(
+		NO_HYPHEN_DIGIT_START_REGEX,
+		__( 'Class names can’t start with a hyphen followed by a number.', 'elementor' )
+	)
+	.regex(
+		NO_CONSECUTIVE_HYPHENS_OR_UNDERSCORES_REGEX,
+		__( 'Avoid using multiple dashes or underscores in a row.', 'elementor' )
+	)
+	.regex(
+		NO_LEADING_TRAILING_DASH_UNDERSCORE_REGEX,
+		__( 'Class names can’t start or end with a dash or underscore.', 'elementor' )
+	)
+	.refine( ( value ) => ! RESERVED_CLASS_NAMES.includes( value ), {
+		message: __( 'This name is reserved and can’t be used. Try something more specific.', 'elementor' ),
+	} );
+
+type ValidationEvent = 'inputChange' | 'create' | 'rename';
+type ValidationResult = { isValid: true; errorMessage: null } | { isValid: false; errorMessage: string };
 
-export function validateStyleLabel( label: string ) {
+export function validateStyleLabel( label: string, event: ValidationEvent | 'rename' ): ValidationResult {
 	const existingLabels = new Set( [
 		ELEMENTS_STYLES_RESERVED_LABEL,
 		...stylesRepository.all().map( ( styleDef ) => styleDef.label.toLowerCase() ),
 	] );
 
+	const fullValidationEvent = [ 'create', 'rename' ].includes( event );
+
 	const result = schema
-		.refine( ( value ) => ! existingLabels.has( value ), {
-			message: __( 'Name exists', 'elementor' ),
+		.refine( ( value ) => ! ( fullValidationEvent && value.length < 2 ), {
+			message: __( 'Class name is too short. Use at least 2 characters.', 'elementor' ),
+		} )
+		.refine( ( value ) => ! ( fullValidationEvent && existingLabels.has( value ) ), {
+			message: __( 'This class name already exists. Please choose a unique name.', 'elementor' ),
 		} )
 		.safeParse( label.toLowerCase() );
 
 	if ( result.success ) {
 		return {
 			isValid: true,
-			error: null,
+			errorMessage: null,
 		};
 	}
 
 	return {
 		isValid: false,
-		error: result.error.format()._errors[ 0 ],
+		errorMessage: result.error.format()._errors[ 0 ],
 	};
 }