Elementor Website Builder – more than just a page builder / trunk

Elementor Website Builder – more than just a page builder vtrunk

elementor / assets / js / packages / editor-styles-repository / editor-styles-repository.js

editor-styles-repository.js in Elementor Website Builder – more than just a page builder trunk, at assets/js/packages/editor-styles-repository/editor-styles-repository.js

286 lines 11.4 KB

Raw Download Zip

1	(function(react, _elementor_editor_current_user, _elementor_schema, _wordpress_i18n, _elementor_editor_elements, _elementor_editor_v1_adapters, _elementor_utils) {
2
3	//#region \0rolldown/runtime.js
4	var __defProp = Object.defineProperty;
5	var __name = (target, value) => __defProp(target, "name", {
6	value,
7	configurable: true
8	});
9	var __exportAll = (all, no_symbols) => {
10	let target = {};
11	for (var name in all) {
12	__defProp(target, name, {
13	get: all[name],
14	enumerable: true
15	});
16	}
17	if (!no_symbols) {
18	__defProp(target, Symbol.toStringTag, { value: "Module" });
19	}
20	return target;
21	};
22
23	//#endregion
24
25	//#region packages/packages/core/editor-styles-repository/src/utils/create-styles-repository.ts
26	var createStylesRepository = () => {
27	const providers = [];
28	const getProviders = () => {
29	return providers.slice(0).sort((a, b) => a.priority > b.priority ? -1 : 1);
30	};
31	const register = (provider) => {
32	providers.push(provider);
33	};
34	const all = (meta = {}) => {
35	return getProviders().flatMap((provider) => provider.actions.all(meta));
36	};
37	const subscribe = (cb) => {
38	const unsubscribes = providers.map((provider) => {
39	return provider.subscribe(cb);
40	});
41	return () => {
42	unsubscribes.forEach((unsubscribe) => unsubscribe());
43	};
44	};
45	const getProviderByKey = (key) => {
46	return providers.find((provider) => provider.getKey() === key);
47	};
48	return {
49	all,
50	register,
51	subscribe,
52	getProviders,
53	getProviderByKey
54	};
55	};
56
57	//#endregion
58	//#region packages/packages/core/editor-styles-repository/src/styles-repository.ts
59	var stylesRepository = createStylesRepository();
60
61	//#endregion
62	//#region packages/packages/core/editor-styles-repository/src/hooks/use-providers.ts
63	function useProviders() {
64	const [, rerender] = (0, react.useReducer)((prev) => !prev, false);
65	(0, react.useEffect)(() => stylesRepository.subscribe(rerender), []);
66	return stylesRepository.getProviders();
67	}
68
69	//#endregion
70	//#region packages/packages/core/editor-styles-repository/src/hooks/use-user-styles-capability.ts
71	var DEFAULT_CAPABILITIES = {
72	create: true,
73	delete: true,
74	update: true,
75	updateProps: true
76	};
77	var useUserStylesCapability = () => {
78	const { capabilities } = (0, _elementor_editor_current_user.useCurrentUserCapabilities)();
79	const userCan = (providerKey) => {
80	const provider = stylesRepository.getProviderByKey(providerKey);
81	if (!provider?.capabilities) return DEFAULT_CAPABILITIES;
82	return Object.entries(provider.capabilities).reduce((acc, [key, capability]) => ({
83	...acc,
84	[key]: capabilities?.includes(capability) ?? true
85	}), DEFAULT_CAPABILITIES);
86	};
87	return { userCan };
88	};
89
90	//#endregion
91	//#region packages/packages/core/editor-styles-repository/src/hooks/use-get-styles-repository-create-action.ts
92	function useGetStylesRepositoryCreateAction() {
93	const { userCan } = useUserStylesCapability();
94	return (0, react.useMemo)(() => {
95	const createActions = stylesRepository.getProviders().map((provider) => {
96	if (!provider.actions.create \|\| !userCan(provider.getKey()).create) return null;
97	return [provider, provider.actions.create];
98	}).filter(Boolean);
99	if (createActions.length === 1) return createActions[0];
100	else if (createActions.length === 0) return null;
101	throw new Error("Multiple providers with create action found in styles repository.");
102	}, []);
103	}
104
105	//#endregion
106	//#region packages/packages/core/editor-styles-repository/src/errors.ts
107	var InvalidElementsStyleProviderMetaError = (0, _elementor_utils.createError)({
108	code: "invalid_elements_style_provider_meta",
109	message: "Invalid elements style provider meta."
110	});
111	var ActiveDocumentMustExistError = (0, _elementor_utils.createError)({
112	code: "active_document_must_exist",
113	message: "Active document must exist."
114	});
115
116	//#endregion
117	//#region packages/packages/core/editor-styles-repository/src/utils/create-styles-provider.ts
118	var DEFAULT_LIMIT = 1e4;
119	var DEFAULT_PRIORITY = 10;
120	function createStylesProvider({ key, priority = DEFAULT_PRIORITY, limit = DEFAULT_LIMIT, subscribe = () => () => {}, labels, actions, capabilities, isPregeneratedLink }) {
121	return {
122	getKey: typeof key === "string" ? () => key : key,
123	priority,
124	limit,
125	capabilities,
126	subscribe,
127	labels: {
128	singular: labels?.singular ?? null,
129	plural: labels?.plural ?? null
130	},
131	actions: {
132	all: actions.all,
133	get: actions.get,
134	resolveCssName: actions.resolveCssName ?? ((id) => id),
135	create: actions.create,
136	delete: actions.delete,
137	update: actions.update,
138	updateProps: actions.updateProps,
139	updateCustomCss: actions.updateCustomCss,
140	tracking: actions.tracking
141	},
142	isPregeneratedLink
143	};
144	}
145
146	//#endregion
147	//#region packages/packages/core/editor-styles-repository/src/providers/document-elements-styles-provider.ts
148	var ELEMENTS_STYLES_PROVIDER_KEY_PREFIX = "document-elements-";
149	var ELEMENTS_STYLES_RESERVED_LABEL = "local";
150	var PREGENERATED_LINK_PATTERN = /^local-\d+-(preview\|frontend)-[a-zA-Z_-]+-css$/;
151	var documentElementsStylesProvider = createStylesProvider({
152	key: () => {
153	const documentId = (0, _elementor_editor_elements.getCurrentDocumentId)();
154	if (!documentId) throw new ActiveDocumentMustExistError();
155	return `${ELEMENTS_STYLES_PROVIDER_KEY_PREFIX}${documentId}`;
156	},
157	priority: 50,
158	isPregeneratedLink: ({ id }) => PREGENERATED_LINK_PATTERN.test(id),
159	subscribe: (cb) => {
160	let scheduledFrame = null;
161	const unsubscribe = (0, _elementor_editor_v1_adapters.__privateListenTo)(_elementor_editor_elements.styleRerenderEvents, () => {
162	if (scheduledFrame !== null) return;
163	scheduledFrame = requestAnimationFrame(() => {
164	scheduledFrame = null;
165	cb();
166	});
167	});
168	return () => {
169	if (scheduledFrame !== null) {
170	cancelAnimationFrame(scheduledFrame);
171	scheduledFrame = null;
172	}
173	unsubscribe();
174	};
175	},
176	actions: {
177	all: (meta = {}) => {
178	let elements = (0, _elementor_editor_elements.getElements)();
179	if (isValidElementsMeta(meta)) elements = elements.filter((element) => element.id === meta.elementId);
180	return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
181	},
182	get: (id, meta = {}) => {
183	if (!isValidElementsMeta(meta)) throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
184	return ((0, _elementor_editor_elements.getElementStyles)(meta.elementId) ?? {})[id] ?? null;
185	},
186	updateProps: (args, meta = {}) => {
187	if (!isValidElementsMeta(meta)) throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
188	(0, _elementor_editor_elements.updateElementStyle)({
189	elementId: meta.elementId,
190	styleId: args.id,
191	meta: args.meta,
192	props: args.props
193	});
194	},
195	updateCustomCss: (args, meta = {}) => {
196	if (!isValidElementsMeta(meta)) throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
197	(0, _elementor_editor_elements.updateElementStyle)({
198	elementId: meta.elementId,
199	styleId: args.id,
200	meta: args.meta,
201	custom_css: args.custom_css.raw ? args.custom_css : null,
202	props: {}
203	});
204	}
205	}
206	});
207	function isValidElementsMeta(meta) {
208	return "elementId" in meta && typeof meta.elementId === "string" && !!meta.elementId;
209	}
210
211	//#endregion
212	//#region packages/packages/core/editor-styles-repository/src/utils/validate-style-label.ts
213	var NO_START_DIGIT_REGEX = /^(\|[^0-9].*)$/;
214	var NO_SPACES_REGEX = /^\S*$/;
215	var NO_SPECIAL_CHARS_REGEX = /^(\|[a-zA-Z0-9_-]+)$/;
216	var NO_DOUBLE_HYPHEN_START_REGEX = /^(?!--).*/;
217	var NO_HYPHEN_DIGIT_START_REGEX = /^(?!-[0-9])/;
218	var RESERVED_CLASS_NAMES = ["container"];
219	var schema = _elementor_schema.z.string().max(50, (0, _wordpress_i18n.__)("Class name is too long. Please keep it under 50 characters.", "elementor")).regex(NO_START_DIGIT_REGEX, (0, _wordpress_i18n.__)("Class names must start with a letter.", "elementor")).regex(NO_SPACES_REGEX, (0, _wordpress_i18n.__)("Class names can’t contain spaces.", "elementor")).regex(NO_SPECIAL_CHARS_REGEX, (0, _wordpress_i18n.__)("Class names can only use letters, numbers, dashes (-), and underscores (_).", "elementor")).regex(NO_DOUBLE_HYPHEN_START_REGEX, (0, _wordpress_i18n.__)("Double hyphens are reserved for custom properties.", "elementor")).regex(NO_HYPHEN_DIGIT_START_REGEX, (0, _wordpress_i18n.__)("Class names can’t start with a hyphen followed by a number.", "elementor")).refine((value) => !RESERVED_CLASS_NAMES.includes(value), { message: (0, _wordpress_i18n.__)("This name is reserved and can’t be used. Try something more specific.", "elementor") });
220	function validateStyleLabel(label, event) {
221	const existingLabels = /* @__PURE__ */ new Set([ELEMENTS_STYLES_RESERVED_LABEL, ...stylesRepository.all().map((styleDef) => styleDef.label.toLowerCase())]);
222	const fullValidationEvent = ["create", "rename"].includes(event);
223	const result = schema.refine((value) => !(fullValidationEvent && value.length < 2), { message: (0, _wordpress_i18n.__)("Class name is too short. Use at least 2 characters.", "elementor") }).refine((value) => !(fullValidationEvent && existingLabels.has(value)), { message: (0, _wordpress_i18n.__)("This class name already exists. Please choose a unique name.", "elementor") }).safeParse(label.toLowerCase());
224	if (result.success) return {
225	isValid: true,
226	errorMessage: null
227	};
228	return {
229	isValid: false,
230	errorMessage: result.error.format()._errors[0]
231	};
232	}
233
234	//#endregion
235	//#region packages/packages/core/editor-styles-repository/src/utils/is-elements-styles-provider.ts
236	function isElementsStylesProvider(key) {
237	return new RegExp(`^${ELEMENTS_STYLES_PROVIDER_KEY_PREFIX}\\d+$`).test(key);
238	}
239
240	//#endregion
241	//#region packages/packages/core/editor-styles-repository/src/providers/element-base-styles-provider.ts
242	var ELEMENTS_BASE_STYLES_PROVIDER_KEY = "element-base-styles";
243	var elementBaseStylesProvider = createStylesProvider({
244	key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
245	actions: {
246	all() {
247	const widgetsCache = (0, _elementor_editor_elements.getWidgetsCache)();
248	return Object.values(widgetsCache ?? {}).flatMap((widget) => Object.values(widget.base_styles ?? {}));
249	},
250	get(id) {
251	return this.all().find((style) => style.id === id) ?? null;
252	}
253	}
254	});
255
256	//#endregion
257	//#region packages/packages/core/editor-styles-repository/src/init.ts
258	function init() {
259	stylesRepository.register(documentElementsStylesProvider);
260	stylesRepository.register(elementBaseStylesProvider);
261	}
262
263	//#endregion
264	//#region packages/packages/core/editor-styles-repository/src/index.ts
265	var src_exports = /* @__PURE__ */ __exportAll({
266	ELEMENTS_BASE_STYLES_PROVIDER_KEY: () => ELEMENTS_BASE_STYLES_PROVIDER_KEY,
267	ELEMENTS_STYLES_PROVIDER_KEY_PREFIX: () => ELEMENTS_STYLES_PROVIDER_KEY_PREFIX,
268	ELEMENTS_STYLES_RESERVED_LABEL: () => ELEMENTS_STYLES_RESERVED_LABEL,
269	createStylesProvider: () => createStylesProvider,
270	init: () => init,
271	isElementsStylesProvider: () => isElementsStylesProvider,
272	stylesRepository: () => stylesRepository,
273	useGetStylesRepositoryCreateAction: () => useGetStylesRepositoryCreateAction,
274	useProviders: () => useProviders,
275	useUserStylesCapability: () => useUserStylesCapability,
276	validateStyleLabel: () => validateStyleLabel
277	});
278
279	//#endregion
280	//#region \0elementor-package-library-entry
281	(window.elementorV2 = window.elementorV2 \|\| {}).editorStylesRepository = src_exports;
282
283	//#endregion
284	})(React, elementorV2.editorCurrentUser, elementorV2.schema, wp.i18n, elementorV2.editorElements, elementorV2.editorV1Adapters, elementorV2.utils);
285	window.elementorV2.editorStylesRepository?.init?.();
286	//# sourceMappingURL=editor-styles-repository.js.map