@elementor/editor-canvas 0.11.1 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +46 -0
  3. package/dist/index.d.mts +6 -1
  4. package/dist/index.d.ts +6 -1
  5. package/dist/index.js +406 -45
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +419 -46
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +11 -10
  10. package/src/__tests__/__mocks__/styles-schema.ts +72 -3
  11. package/src/__tests__/init-styles-renderer.test.ts +19 -5
  12. package/src/__tests__/mock-attachment-data.ts +15 -0
  13. package/src/__tests__/prop-types.ts +65 -0
  14. package/src/__tests__/settings-props-resolver.test.ts +193 -0
  15. package/src/__tests__/styles-prop-resolver.test.ts +59 -16
  16. package/src/index.ts +1 -0
  17. package/src/init-settings-transformers.ts +19 -0
  18. package/src/init-style-transformers.ts +13 -9
  19. package/src/init-styles-renderer.ts +9 -3
  20. package/src/init.tsx +8 -0
  21. package/src/legacy/create-element-type.ts +84 -0
  22. package/src/legacy/init-legacy-views.ts +22 -0
  23. package/src/legacy/types.ts +60 -0
  24. package/src/settings-transformers-registry.ts +3 -0
  25. package/src/style-commands/__tests__/paste-style.test.ts +554 -0
  26. package/src/style-commands/__tests__/reset-style.test.ts +153 -0
  27. package/src/style-commands/init-style-commands.ts +7 -0
  28. package/src/style-commands/paste-style.ts +53 -0
  29. package/src/style-commands/reset-style.ts +34 -0
  30. package/src/style-commands/undoable-actions/paste-element-style.ts +107 -0
  31. package/src/style-commands/undoable-actions/reset-element-style.ts +60 -0
  32. package/src/style-commands/utils.ts +62 -0
  33. package/src/transformers/settings/array-transformer.ts +5 -0
  34. package/src/transformers/settings/link-transformer.ts +14 -0
  35. package/src/transformers/{styles → shared}/image-src-transformer.ts +2 -2
  36. package/src/transformers/shared/image-transformer.ts +41 -0
  37. package/src/transformers/shared/plain-transformer.ts +5 -0
  38. package/src/transformers/styles/background-color-overlay-transformer.ts +13 -3
  39. package/src/transformers/styles/background-gradient-overlay-transformer.ts +16 -0
  40. package/src/transformers/styles/background-image-overlay-transformer.ts +6 -2
  41. package/src/transformers/styles/color-stop-transformer.ts +10 -0
  42. package/src/transformers/styles/image-attachment-transformer.ts +0 -15
  43. package/src/transformers/styles/image-transformer.ts +0 -34
  44. package/src/transformers/styles/primitive-transformer.ts +0 -3
@@ -1,5 +1,5 @@
1
1
 
2
- > @elementor/editor-canvas@0.11.1 build
2
+ > @elementor/editor-canvas@0.13.0 build
3
3
  > tsup --config=../../tsup.build.ts
4
4
 
5
5
  CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
10
10
  CLI Cleaning output folder
11
11
  ESM Build start
12
12
  CJS Build start
13
- CJS dist/index.js 19.41 KB
14
- CJS dist/index.js.map 37.74 KB
15
- CJS ⚡️ Build success in 181ms
16
- ESM dist/index.mjs 17.30 KB
17
- ESM dist/index.mjs.map 37.69 KB
18
- ESM ⚡️ Build success in 186ms
13
+ ESM dist/index.mjs 29.82 KB
14
+ ESM dist/index.mjs.map 62.58 KB
15
+ ESM ⚡️ Build success in 351ms
16
+ CJS dist/index.js 32.49 KB
17
+ CJS dist/index.js.map 62.41 KB
18
+ CJS ⚡️ Build success in 359ms
19
19
  DTS Build start
20
- DTS ⚡️ Build success in 19302ms
21
- DTS dist/index.d.mts 561.00 B
22
- DTS dist/index.d.ts 561.00 B
20
+ DTS ⚡️ Build success in 21312ms
21
+ DTS dist/index.d.mts 751.00 B
22
+ DTS dist/index.d.ts 751.00 B
package/CHANGELOG.md CHANGED
@@ -1,5 +1,51 @@
1
1
  # @elementor/editor-canvas
2
2
 
3
+ ## 0.13.0
4
+
5
+ ### Minor Changes
6
+
7
+ - b8a7725: Add settings transformers
8
+ - 98d2a8e: Added support to atomic elements for command "document/elements/paste-style"
9
+ - 4c2935b: Added support to atomic elements for command "document/elements/reset-style"
10
+ - 4510821: Remove 'save' options from the editor context menu.
11
+ - c002cba: Change background color overlay shape to support variables
12
+ - 070b92c: Register legacy views
13
+
14
+ ### Patch Changes
15
+
16
+ - 51432b9: The editor loader disappears before the styles finish rendering
17
+ - Updated dependencies [b8a7725]
18
+ - Updated dependencies [e798985]
19
+ - Updated dependencies [4c2935b]
20
+ - Updated dependencies [8231e7c]
21
+ - Updated dependencies [19f5dfe]
22
+ - Updated dependencies [c002cba]
23
+ - Updated dependencies [51432b9]
24
+ - Updated dependencies [070b92c]
25
+ - Updated dependencies [0909b4b]
26
+ - @elementor/wp-media@0.6.0
27
+ - @elementor/editor-v1-adapters@0.11.0
28
+ - @elementor/editor-props@0.11.0
29
+ - @elementor/editor-elements@0.6.3
30
+ - @elementor/editor@0.18.3
31
+ - @elementor/editor-styles-repository@0.7.6
32
+ - @elementor/editor-responsive@0.13.3
33
+ - @elementor/editor-styles@0.6.3
34
+
35
+ ## 0.12.0
36
+
37
+ ### Minor Changes
38
+
39
+ - 7d37fc1: Add background gradient overlay control
40
+
41
+ ### Patch Changes
42
+
43
+ - Updated dependencies [7d37fc1]
44
+ - @elementor/editor-props@0.10.0
45
+ - @elementor/editor-styles-repository@0.7.5
46
+ - @elementor/editor-elements@0.6.2
47
+ - @elementor/editor-styles@0.6.2
48
+
3
49
  ## 0.11.1
4
50
 
5
51
  ### Patch Changes
package/dist/index.d.mts CHANGED
@@ -15,4 +15,9 @@ declare const styleTransformersRegistry: {
15
15
  all(): TransformersMap;
16
16
  };
17
17
 
18
- export { styleTransformersRegistry };
18
+ declare const settingsTransformersRegistry: {
19
+ register(name: TransformerName, transformer: AnyTransformer): /*elided*/ any;
20
+ all(): TransformersMap;
21
+ };
22
+
23
+ export { settingsTransformersRegistry, styleTransformersRegistry };
package/dist/index.d.ts CHANGED
@@ -15,4 +15,9 @@ declare const styleTransformersRegistry: {
15
15
  all(): TransformersMap;
16
16
  };
17
17
 
18
- export { styleTransformersRegistry };
18
+ declare const settingsTransformersRegistry: {
19
+ register(name: TransformerName, transformer: AnyTransformer): /*elided*/ any;
20
+ all(): TransformersMap;
21
+ };
22
+
23
+ export { settingsTransformersRegistry, styleTransformersRegistry };
package/dist/index.js CHANGED
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  // src/index.ts
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
+ settingsTransformersRegistry: () => settingsTransformersRegistry,
33
34
  styleTransformersRegistry: () => styleTransformersRegistry
34
35
  });
35
36
  module.exports = __toCommonJS(index_exports);
@@ -175,18 +176,89 @@ function createTransformersRegistry() {
175
176
  };
176
177
  }
177
178
 
178
- // src/style-transformers-registry.ts
179
- var styleTransformersRegistry = createTransformersRegistry();
179
+ // src/settings-transformers-registry.ts
180
+ var settingsTransformersRegistry = createTransformersRegistry();
180
181
 
181
182
  // src/transformers/create-transformer.ts
182
183
  function createTransformer(cb) {
183
184
  return cb;
184
185
  }
185
186
 
187
+ // src/transformers/settings/array-transformer.ts
188
+ var arrayTransformer = createTransformer((value) => {
189
+ return value.filter(Boolean);
190
+ });
191
+
192
+ // src/transformers/settings/link-transformer.ts
193
+ var linkTransformer = createTransformer(({ destination, isTargetBlank }) => {
194
+ return {
195
+ // The real post URL is not relevant in the Editor.
196
+ href: typeof destination === "number" ? "#post-id-" + destination : destination,
197
+ target: isTargetBlank ? "_blank" : "_self"
198
+ };
199
+ });
200
+
201
+ // src/transformers/shared/image-src-transformer.ts
202
+ var imageSrcTransformer = createTransformer((value) => ({
203
+ id: value.id ?? null,
204
+ url: value.url ?? null
205
+ }));
206
+
207
+ // src/transformers/shared/image-transformer.ts
208
+ var import_wp_media = require("@elementor/wp-media");
209
+ var imageTransformer = createTransformer(async (value) => {
210
+ const { src, size: size2 } = value;
211
+ if (!src?.id) {
212
+ return src?.url ? { src: src.url } : null;
213
+ }
214
+ const attachment = await (0, import_wp_media.getMediaAttachment)({ id: src.id });
215
+ const sizedAttachment = attachment?.sizes?.[size2 ?? ""];
216
+ if (sizedAttachment) {
217
+ return {
218
+ src: sizedAttachment.url,
219
+ height: sizedAttachment.height,
220
+ width: sizedAttachment.width
221
+ };
222
+ }
223
+ if (attachment) {
224
+ return {
225
+ src: attachment.url,
226
+ height: attachment.height,
227
+ width: attachment.width
228
+ };
229
+ }
230
+ return null;
231
+ });
232
+
233
+ // src/transformers/shared/plain-transformer.ts
234
+ var plainTransformer = createTransformer((value) => {
235
+ return value;
236
+ });
237
+
238
+ // src/init-settings-transformers.ts
239
+ function initSettingsTransformers() {
240
+ settingsTransformersRegistry.register("string", plainTransformer).register("url", plainTransformer).register("number", plainTransformer).register("boolean", plainTransformer).register("classes", arrayTransformer).register("link", linkTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("image-attachment-id", plainTransformer);
241
+ }
242
+
243
+ // src/style-transformers-registry.ts
244
+ var styleTransformersRegistry = createTransformersRegistry();
245
+
186
246
  // src/transformers/styles/background-color-overlay-transformer.ts
187
- var backgroundColorOverlayTransformer = createTransformer(
188
- (value) => `linear-gradient(${value}, ${value})`
189
- );
247
+ var backgroundColorOverlayTransformer = createTransformer((value) => {
248
+ const { color = null } = value;
249
+ if (!color) {
250
+ return null;
251
+ }
252
+ return `linear-gradient(${color}, ${color})`;
253
+ });
254
+
255
+ // src/transformers/styles/background-gradient-overlay-transformer.ts
256
+ var backgroundGradientOverlayTransformer = createTransformer((value) => {
257
+ if (value.type === "radial") {
258
+ return `radial-gradient(circle at ${value.positions}, ${value.stops})`;
259
+ }
260
+ return `linear-gradient(${value.angle}deg, ${value.stops})`;
261
+ });
190
262
 
191
263
  // src/transformers/styles/background-image-overlay-transformer.ts
192
264
  var DEFAULT_POSITION_VALUE = "0% 0%";
@@ -195,8 +267,9 @@ var backgroundImageOverlayTransformer = createTransformer((value) => {
195
267
  if (!image) {
196
268
  return null;
197
269
  }
270
+ const src = image.src ? `url(${image.src})` : null;
198
271
  const backgroundStyles = [
199
- image,
272
+ src,
200
273
  repeat,
201
274
  attachment,
202
275
  size2 ? `${position || DEFAULT_POSITION_VALUE} / ${size2}` : position
@@ -221,6 +294,11 @@ var backgroundTransformer = createTransformer((value) => {
221
294
  return `${overlays} ${color}`.trim();
222
295
  });
223
296
 
297
+ // src/transformers/styles/color-stop-transformer.ts
298
+ var colorStopTransformer = createTransformer(
299
+ (value) => `${value?.color} ${value?.offset ?? 0}%`
300
+ );
301
+
224
302
  // src/transformers/styles/create-combine-array-transformer.ts
225
303
  var createCombineArrayTransformer = (delimiter) => {
226
304
  return createTransformer((value) => value.filter(Boolean).join(delimiter));
@@ -248,42 +326,6 @@ var createMultiPropsTransformer = (keys, keyGenerator) => {
248
326
  });
249
327
  };
250
328
 
251
- // src/transformers/styles/image-attachment-transformer.ts
252
- var import_wp_media = require("@elementor/wp-media");
253
- var imageAttachmentTransformer = createTransformer(async (value) => {
254
- const attachment = await (0, import_wp_media.getMediaAttachment)({ id: value });
255
- if (!attachment) {
256
- return null;
257
- }
258
- return attachment;
259
- });
260
-
261
- // src/transformers/styles/image-src-transformer.ts
262
- var imageSrcTransformer = createTransformer((value) => ({
263
- attachment: value.id,
264
- url: value.url
265
- }));
266
-
267
- // src/transformers/styles/image-transformer.ts
268
- var imageTransformer = createTransformer((value) => {
269
- const { src, size: size2 } = value;
270
- if (src?.url) {
271
- return `url(${src.url})`;
272
- }
273
- const sizeUrl = src?.attachment?.sizes?.[size2 ?? ""]?.url;
274
- if (sizeUrl) {
275
- return `url(${sizeUrl})`;
276
- }
277
- const attachmentUrl = src?.attachment?.url;
278
- if (attachmentUrl) {
279
- return `url(${attachmentUrl})`;
280
- }
281
- return null;
282
- });
283
-
284
- // src/transformers/styles/primitive-transformer.ts
285
- var primitiveTransformer = createTransformer((value) => value);
286
-
287
329
  // src/transformers/styles/shadow-transformer.ts
288
330
  var shadowTransformer = createTransformer((value) => {
289
331
  return [value.hOffset, value.vOffset, value.blur, value.spread, value.color, value.position].filter(Boolean).join(" ");
@@ -312,7 +354,7 @@ function initStyleTransformers() {
312
354
  ["block-start", "block-end", "inline-start", "inline-end"],
313
355
  ({ propKey, key }) => `${propKey}-${key}`
314
356
  )
315
- ).register("color", primitiveTransformer).register("number", primitiveTransformer).register("string", primitiveTransformer).register("url", primitiveTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", createCombineArrayTransformer(",")).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-image-position-offset", backgroundImagePositionOffsetTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-attachment-id", imageAttachmentTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register(
357
+ ).register("color", plainTransformer).register("number", plainTransformer).register("string", plainTransformer).register("url", plainTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", createCombineArrayTransformer(",")).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", backgroundImagePositionOffsetTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-attachment-id", plainTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register(
316
358
  "layout-direction",
317
359
  createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
318
360
  ).register(
@@ -496,7 +538,7 @@ function initStylesRenderer() {
496
538
  schema: (0, import_editor_styles.getStylesSchema)(),
497
539
  onPropResolve: enqueueUsedFonts
498
540
  });
499
- import_editor_styles_repository.stylesRepository.subscribe(async () => {
541
+ const injectStyleElements = async () => {
500
542
  const styleContainer = getStylesContainer();
501
543
  const styles = import_editor_styles_repository.stylesRepository.all().reverse();
502
544
  const breakpoints = (0, import_editor_responsive.getBreakpointsMap)();
@@ -511,7 +553,9 @@ function initStylesRenderer() {
511
553
  selectorPrefix: SELECTOR_PREFIX,
512
554
  signal: abortController.signal
513
555
  });
514
- });
556
+ };
557
+ import_editor_styles_repository.stylesRepository.subscribe(injectStyleElements);
558
+ (0, import_editor_v1_adapters2.registerDataHook)("after", "editor/documents/attach-preview", injectStyleElements);
515
559
  });
516
560
  }
517
561
  function getStylesContainer() {
@@ -537,10 +581,326 @@ function enqueueUsedFonts({ key, value }) {
537
581
  enqueueFont(value);
538
582
  }
539
583
 
584
+ // src/legacy/init-legacy-views.ts
585
+ var import_editor_elements2 = require("@elementor/editor-elements");
586
+ var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
587
+
588
+ // src/legacy/create-element-type.ts
589
+ function createElementType(type) {
590
+ const legacyWindow = window;
591
+ return class extends legacyWindow.elementor.modules.elements.types.Widget {
592
+ getType() {
593
+ return type;
594
+ }
595
+ getView() {
596
+ return createElementView();
597
+ }
598
+ };
599
+ }
600
+ function createElementView() {
601
+ const legacyWindow = window;
602
+ return class extends legacyWindow.elementor.modules.elements.views.Widget {
603
+ // Dispatch `render` event so the overlay layer will be updated
604
+ onRender(...args) {
605
+ super.onRender(...args);
606
+ this.#dispatchEvent("elementor/preview/atomic-widget/render");
607
+ }
608
+ // Dispatch `destroy` event so the overlay layer will be updated
609
+ onDestroy(...args) {
610
+ super.onDestroy(...args);
611
+ this.#dispatchEvent("elementor/preview/atomic-widget/destroy");
612
+ }
613
+ attributes() {
614
+ return {
615
+ ...super.attributes(),
616
+ // Mark the widget as atomic, so external APIs (such as the overlay layer) can reference it.
617
+ "data-atomic": "",
618
+ // Make the wrapper is non-existent in terms of CSS to mimic the frontend DOM tree.
619
+ style: "display: contents !important;"
620
+ };
621
+ }
622
+ // Removes behaviors that are not needed for atomic widgets (that are implemented in the overlay layer).
623
+ behaviors() {
624
+ const disabledBehaviors = ["InlineEditing", "Draggable", "Resizable"];
625
+ const behaviorsAsEntries = Object.entries(super.behaviors()).filter(
626
+ ([key]) => !disabledBehaviors.includes(key)
627
+ );
628
+ return Object.fromEntries(behaviorsAsEntries);
629
+ }
630
+ // Change the drag handle because the $el is not the draggable element (`display: contents`).
631
+ getDomElement() {
632
+ return this.$el.find(":first-child");
633
+ }
634
+ // Remove the overlay, so we can use the new overlay layer.
635
+ getHandlesOverlay() {
636
+ return null;
637
+ }
638
+ #dispatchEvent(eventType) {
639
+ window.top?.dispatchEvent(
640
+ new CustomEvent(eventType, {
641
+ detail: { id: this.model.get("id") }
642
+ })
643
+ );
644
+ }
645
+ getContextMenuGroups() {
646
+ return super.getContextMenuGroups().filter((group) => group.name !== "save");
647
+ }
648
+ };
649
+ }
650
+
651
+ // src/legacy/init-legacy-views.ts
652
+ function initLegacyViews() {
653
+ (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.v1ReadyEvent)(), () => {
654
+ const config = (0, import_editor_elements2.getWidgetsCache)() ?? {};
655
+ const legacyWindow = window;
656
+ Object.entries(config).forEach(([type, element]) => {
657
+ if (!element.atomic) {
658
+ return;
659
+ }
660
+ const ElementType = createElementType(type);
661
+ legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
662
+ });
663
+ });
664
+ }
665
+
666
+ // src/style-commands/paste-style.ts
667
+ var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
668
+
669
+ // src/style-commands/undoable-actions/paste-element-style.ts
670
+ var import_editor_elements4 = require("@elementor/editor-elements");
671
+ var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
672
+ var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
673
+ var import_i18n2 = require("@wordpress/i18n");
674
+
675
+ // src/style-commands/utils.ts
676
+ var import_editor_elements3 = require("@elementor/editor-elements");
677
+ var import_editor_props2 = require("@elementor/editor-props");
678
+ var import_i18n = require("@wordpress/i18n");
679
+ function hasAtomicWidgets(args) {
680
+ const { containers = [args.container] } = args;
681
+ return containers.some(isAtomicWidget);
682
+ }
683
+ function isAtomicWidget(container) {
684
+ if (!container) {
685
+ return false;
686
+ }
687
+ return Boolean(getContainerSchema(container));
688
+ }
689
+ function getClassesProp(container) {
690
+ const propsSchema = getContainerSchema(container);
691
+ if (!propsSchema) {
692
+ return null;
693
+ }
694
+ const [propKey] = Object.entries(propsSchema).find(
695
+ ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props2.CLASSES_PROP_KEY
696
+ ) ?? [];
697
+ return propKey ?? null;
698
+ }
699
+ function getContainerSchema(container) {
700
+ const type = container?.model.get("widgetType") || container?.model.get("elType");
701
+ const widgetsCache = (0, import_editor_elements3.getWidgetsCache)();
702
+ const elementType = widgetsCache?.[type];
703
+ return elementType?.atomic_props_schema ?? null;
704
+ }
705
+ function getClipboardElements(storageKey = "clipboard") {
706
+ try {
707
+ const storedData = JSON.parse(localStorage.getItem("elementor") ?? "{}");
708
+ return storedData[storageKey]?.elements;
709
+ } catch {
710
+ return void 0;
711
+ }
712
+ }
713
+ function getTitleForContainers(containers) {
714
+ return containers.length > 1 ? (0, import_i18n.__)("Elements", "elementor") : (0, import_editor_elements3.getElementLabel)(containers[0].id);
715
+ }
716
+
717
+ // src/style-commands/undoable-actions/paste-element-style.ts
718
+ var undoablePasteElementStyle = () => (0, import_editor_v1_adapters4.undoable)(
719
+ {
720
+ do: ({ containers, newStyle }) => {
721
+ return containers.map((container) => {
722
+ const elementId = container.id;
723
+ const classesProp = getClassesProp(container);
724
+ if (!classesProp) {
725
+ return null;
726
+ }
727
+ const originalStyles = (0, import_editor_elements4.getElementStyles)(container.id);
728
+ const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
729
+ const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
730
+ const revertData = {
731
+ styleId,
732
+ originalStyle
733
+ };
734
+ if (styleId) {
735
+ newStyle.variants.forEach(({ meta, props }) => {
736
+ (0, import_editor_elements4.updateElementStyle)({
737
+ elementId,
738
+ styleId,
739
+ meta,
740
+ props
741
+ });
742
+ });
743
+ } else {
744
+ const [firstVariant] = newStyle.variants;
745
+ const additionalVariants = newStyle.variants.slice(1);
746
+ revertData.styleId = (0, import_editor_elements4.createElementStyle)({
747
+ elementId,
748
+ classesProp,
749
+ label: import_editor_styles_repository2.LOCAL_STYLES_RESERVED_LABEL,
750
+ ...firstVariant,
751
+ additionalVariants
752
+ });
753
+ }
754
+ return revertData;
755
+ });
756
+ },
757
+ undo: ({ containers }, revertDataItems) => {
758
+ containers.forEach((container, index) => {
759
+ const revertData = revertDataItems[index];
760
+ if (!revertData) {
761
+ return;
762
+ }
763
+ if (!revertData.originalStyle) {
764
+ (0, import_editor_elements4.deleteElementStyle)(container.id, revertData.styleId);
765
+ return;
766
+ }
767
+ const classesProp = getClassesProp(container);
768
+ if (!classesProp) {
769
+ return;
770
+ }
771
+ const [firstVariant] = revertData.originalStyle.variants;
772
+ const additionalVariants = revertData.originalStyle.variants.slice(1);
773
+ (0, import_editor_elements4.createElementStyle)({
774
+ elementId: container.id,
775
+ classesProp,
776
+ label: import_editor_styles_repository2.LOCAL_STYLES_RESERVED_LABEL,
777
+ styleId: revertData.styleId,
778
+ ...firstVariant,
779
+ additionalVariants
780
+ });
781
+ });
782
+ }
783
+ },
784
+ {
785
+ title: ({ containers }) => getTitleForContainers(containers),
786
+ subtitle: (0, import_i18n2.__)("Style Pasted", "elementor")
787
+ }
788
+ );
789
+
790
+ // src/style-commands/paste-style.ts
791
+ function initPasteStyleCommand() {
792
+ const pasteElementStyleCommand = undoablePasteElementStyle();
793
+ (0, import_editor_v1_adapters5.blockCommand)({
794
+ command: "document/elements/paste-style",
795
+ condition: hasAtomicWidgets
796
+ });
797
+ (0, import_editor_v1_adapters5.__privateListenTo)(
798
+ (0, import_editor_v1_adapters5.commandStartEvent)("document/elements/paste-style"),
799
+ (e) => pasteStyles(e.args, pasteElementStyleCommand)
800
+ );
801
+ }
802
+ function pasteStyles(args, pasteCallback) {
803
+ const { containers = [args.container], storageKey } = args;
804
+ const clipboardElements = getClipboardElements(storageKey);
805
+ const [clipboardElement] = clipboardElements ?? [];
806
+ if (!clipboardElement) {
807
+ return;
808
+ }
809
+ const elementStyles = clipboardElement.styles;
810
+ const elementStyle = Object.values(elementStyles ?? {})[0];
811
+ if (!elementStyle) {
812
+ return;
813
+ }
814
+ const atomicContainers = containers.filter(isAtomicWidget);
815
+ if (!atomicContainers.length) {
816
+ return;
817
+ }
818
+ pasteCallback({ containers: atomicContainers, newStyle: elementStyle });
819
+ }
820
+
821
+ // src/style-commands/reset-style.ts
822
+ var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
823
+
824
+ // src/style-commands/undoable-actions/reset-element-style.ts
825
+ var import_editor_elements5 = require("@elementor/editor-elements");
826
+ var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
827
+ var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
828
+ var import_i18n3 = require("@wordpress/i18n");
829
+ var undoableResetElementStyle = () => (0, import_editor_v1_adapters6.undoable)(
830
+ {
831
+ do: ({ containers }) => {
832
+ return containers.map((container) => {
833
+ const elementId = container.model.get("id");
834
+ const containerStyles = (0, import_editor_elements5.getElementStyles)(elementId);
835
+ Object.keys(containerStyles ?? {}).forEach(
836
+ (styleId) => (0, import_editor_elements5.deleteElementStyle)(elementId, styleId)
837
+ );
838
+ return containerStyles;
839
+ });
840
+ },
841
+ undo: ({ containers }, revertDataItems) => {
842
+ containers.forEach((container, index) => {
843
+ const classesProp = getClassesProp(container);
844
+ if (!classesProp) {
845
+ return;
846
+ }
847
+ const elementId = container.model.get("id");
848
+ const containerStyles = revertDataItems[index];
849
+ Object.entries(containerStyles ?? {}).forEach(([styleId, style]) => {
850
+ const [firstVariant] = style.variants;
851
+ const additionalVariants = style.variants.slice(1);
852
+ (0, import_editor_elements5.createElementStyle)({
853
+ elementId,
854
+ classesProp,
855
+ styleId,
856
+ label: import_editor_styles_repository3.LOCAL_STYLES_RESERVED_LABEL,
857
+ ...firstVariant,
858
+ additionalVariants
859
+ });
860
+ });
861
+ });
862
+ }
863
+ },
864
+ {
865
+ title: ({ containers }) => getTitleForContainers(containers),
866
+ subtitle: (0, import_i18n3.__)("Style Reset", "elementor")
867
+ }
868
+ );
869
+
870
+ // src/style-commands/reset-style.ts
871
+ function initResetStyleCommand() {
872
+ const resetElementStyles = undoableResetElementStyle();
873
+ (0, import_editor_v1_adapters7.blockCommand)({
874
+ command: "document/elements/reset-style",
875
+ condition: hasAtomicWidgets
876
+ });
877
+ (0, import_editor_v1_adapters7.__privateListenTo)(
878
+ (0, import_editor_v1_adapters7.commandStartEvent)("document/elements/reset-style"),
879
+ (e) => resetStyles(e.args, resetElementStyles)
880
+ );
881
+ }
882
+ function resetStyles(args, resetElementStyles) {
883
+ const { containers = [args.container] } = args;
884
+ const atomicContainers = containers.filter(isAtomicWidget);
885
+ if (!atomicContainers.length) {
886
+ return;
887
+ }
888
+ resetElementStyles({ containers: atomicContainers });
889
+ }
890
+
891
+ // src/style-commands/init-style-commands.ts
892
+ function initStyleCommands() {
893
+ initPasteStyleCommand();
894
+ initResetStyleCommand();
895
+ }
896
+
540
897
  // src/init.tsx
541
898
  function init() {
542
899
  initStyleTransformers();
543
900
  initStylesRenderer();
901
+ initStyleCommands();
902
+ initLegacyViews();
903
+ initSettingsTransformers();
544
904
  (0, import_editor.injectIntoTop)({
545
905
  id: "elements-overlays",
546
906
  component: ElementsOverlays
@@ -551,6 +911,7 @@ function init() {
551
911
  init();
552
912
  // Annotate the CommonJS export names for ESM import in node:
553
913
  0 && (module.exports = {
914
+ settingsTransformersRegistry,
554
915
  styleTransformersRegistry
555
916
  });
556
917
  //# sourceMappingURL=index.js.map