@elementor/editor-canvas 0.9.0 → 0.11.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 (57) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +36 -0
  3. package/dist/index.d.mts +17 -1
  4. package/dist/index.d.ts +17 -1
  5. package/dist/index.js +203 -225
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +192 -227
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +10 -10
  10. package/src/{renderers/__tests__ → __tests__}/__mocks__/styles-schema.ts +258 -131
  11. package/src/__tests__/init-styles-renderer.test.ts +8 -3
  12. package/src/{renderers/__tests__/create-props-resolver.transformers.test.ts → __tests__/styles-prop-resolver.test.ts} +19 -27
  13. package/src/index.ts +2 -0
  14. package/src/init-style-transformers.ts +58 -0
  15. package/src/init-styles-renderer.ts +8 -6
  16. package/src/init.tsx +2 -0
  17. package/src/renderers/__tests__/create-props-resolver.test.ts +44 -34
  18. package/src/renderers/__tests__/render-styles.test.ts +3 -15
  19. package/src/renderers/create-props-resolver.ts +32 -31
  20. package/src/renderers/render-styles.ts +4 -7
  21. package/src/style-transformers-registry.ts +3 -0
  22. package/src/transformers/create-transformer.ts +13 -0
  23. package/src/transformers/create-transformers-registry.ts +16 -0
  24. package/src/transformers/styles/background-color-overlay-transformer.ts +5 -0
  25. package/src/transformers/styles/background-image-overlay-transformer.ts +28 -0
  26. package/src/transformers/styles/background-image-position-offset-transformer.ts +10 -0
  27. package/src/transformers/styles/background-image-size-scale-transformer.ts +10 -0
  28. package/src/transformers/styles/background-transformer.ts +13 -0
  29. package/src/transformers/styles/create-combine-array-transformer.ts +5 -0
  30. package/src/transformers/styles/create-multi-props-transformer.ts +14 -0
  31. package/src/transformers/styles/image-attachment-transformer.ts +15 -0
  32. package/src/transformers/styles/image-src-transformer.ts +11 -0
  33. package/src/transformers/styles/image-transformer.ts +34 -0
  34. package/src/transformers/styles/primitive-transformer.ts +3 -0
  35. package/src/transformers/styles/shadow-transformer.ts +16 -0
  36. package/src/transformers/styles/size-transformer.ts +10 -0
  37. package/src/transformers/styles/stroke-transformer.ts +17 -0
  38. package/src/transformers/types.ts +20 -0
  39. package/src/renderers/style-transformers/background-color-overlay-transformer.ts +0 -9
  40. package/src/renderers/style-transformers/background-image-overlay-transformer.ts +0 -24
  41. package/src/renderers/style-transformers/background-image-position-offset-transformer.ts +0 -10
  42. package/src/renderers/style-transformers/background-image-size-scale-transformer.ts +0 -10
  43. package/src/renderers/style-transformers/background-transformer.ts +0 -12
  44. package/src/renderers/style-transformers/create-combine-array-transformer.ts +0 -9
  45. package/src/renderers/style-transformers/create-corner-sizes-transformer.ts +0 -31
  46. package/src/renderers/style-transformers/create-edge-sizes-transformer.ts +0 -31
  47. package/src/renderers/style-transformers/dimensions.ts +0 -20
  48. package/src/renderers/style-transformers/image-attachment.ts +0 -14
  49. package/src/renderers/style-transformers/image-src.ts +0 -8
  50. package/src/renderers/style-transformers/image.ts +0 -25
  51. package/src/renderers/style-transformers/index.ts +0 -48
  52. package/src/renderers/style-transformers/layout-direction-transformer.ts +0 -20
  53. package/src/renderers/style-transformers/primitive-transformer.ts +0 -7
  54. package/src/renderers/style-transformers/shadow-transformer.ts +0 -11
  55. package/src/renderers/style-transformers/size-transformer.ts +0 -9
  56. package/src/renderers/style-transformers/stroke-transformer.ts +0 -16
  57. package/src/renderers/types.ts +0 -12
package/src/{renderers/__tests__ → __tests__}/__mocks__/styles-schema.ts RENAMED
@@ -29,6 +29,13 @@ export const stylesSchemaMock = {
29
29
  },
30
30
  },
31
31
  },
32
+ 'font-style': {
33
+ kind: 'plain',
34
+ key: 'string',
35
+ default: null,
36
+ meta: {},
37
+ settings: {},
38
+ },
32
39
  'text-stroke': {
33
40
  kind: 'object',
34
41
  key: 'stroke',
@@ -73,7 +80,7 @@ export const stylesSchemaMock = {
73
80
  },
74
81
  },
75
82
  },
76
- padding: {
83
+ margin: {
77
84
  kind: 'object',
78
85
  key: 'linked-dimensions',
79
86
  default: null,
@@ -88,113 +95,181 @@ export const stylesSchemaMock = {
88
95
  settings: {},
89
96
  },
90
97
  top: {
91
- kind: 'object',
92
- key: 'size',
98
+ kind: 'union',
93
99
  default: null,
94
100
  meta: {},
95
101
  settings: {},
96
- shape: {
102
+ prop_types: {
97
103
  size: {
98
- kind: 'plain',
99
- key: 'number',
104
+ kind: 'object',
105
+ key: 'size',
100
106
  default: null,
101
107
  meta: {},
102
- settings: {
103
- required: true,
108
+ settings: {},
109
+ shape: {
110
+ size: {
111
+ kind: 'plain',
112
+ key: 'number',
113
+ default: null,
114
+ meta: {},
115
+ settings: {
116
+ required: true,
117
+ },
118
+ },
119
+ unit: {
120
+ kind: 'plain',
121
+ key: 'string',
122
+ default: null,
123
+ meta: {},
124
+ settings: {
125
+ enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'auto', 'vmin', 'vmax' ],
126
+ required: true,
127
+ },
128
+ },
104
129
  },
105
130
  },
106
- unit: {
131
+ string: {
107
132
  kind: 'plain',
108
133
  key: 'string',
109
134
  default: null,
110
135
  meta: {},
111
136
  settings: {
112
- enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'vmin', 'vmax' ],
113
- required: true,
137
+ enum: [ 'auto' ],
114
138
  },
115
139
  },
116
140
  },
117
141
  },
118
142
  right: {
119
- kind: 'object',
120
- key: 'size',
143
+ kind: 'union',
121
144
  default: null,
122
145
  meta: {},
123
146
  settings: {},
124
- shape: {
147
+ prop_types: {
125
148
  size: {
126
- kind: 'plain',
127
- key: 'number',
149
+ kind: 'object',
150
+ key: 'size',
128
151
  default: null,
129
152
  meta: {},
130
- settings: {
131
- required: true,
153
+ settings: {},
154
+ shape: {
155
+ size: {
156
+ kind: 'plain',
157
+ key: 'number',
158
+ default: null,
159
+ meta: {},
160
+ settings: {
161
+ required: true,
162
+ },
163
+ },
164
+ unit: {
165
+ kind: 'plain',
166
+ key: 'string',
167
+ default: null,
168
+ meta: {},
169
+ settings: {
170
+ enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'auto', 'vmin', 'vmax' ],
171
+ required: true,
172
+ },
173
+ },
132
174
  },
133
175
  },
134
- unit: {
176
+ string: {
135
177
  kind: 'plain',
136
178
  key: 'string',
137
179
  default: null,
138
180
  meta: {},
139
181
  settings: {
140
- enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'vmin', 'vmax' ],
141
- required: true,
182
+ enum: [ 'auto' ],
142
183
  },
143
184
  },
144
185
  },
145
186
  },
146
187
  bottom: {
147
- kind: 'object',
148
- key: 'size',
188
+ kind: 'union',
149
189
  default: null,
150
190
  meta: {},
151
191
  settings: {},
152
- shape: {
192
+ prop_types: {
153
193
  size: {
154
- kind: 'plain',
155
- key: 'number',
194
+ kind: 'object',
195
+ key: 'size',
156
196
  default: null,
157
197
  meta: {},
158
- settings: {
159
- required: true,
198
+ settings: {},
199
+ shape: {
200
+ size: {
201
+ kind: 'plain',
202
+ key: 'number',
203
+ default: null,
204
+ meta: {},
205
+ settings: {
206
+ required: true,
207
+ },
208
+ },
209
+ unit: {
210
+ kind: 'plain',
211
+ key: 'string',
212
+ default: null,
213
+ meta: {},
214
+ settings: {
215
+ enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'auto', 'vmin', 'vmax' ],
216
+ required: true,
217
+ },
218
+ },
160
219
  },
161
220
  },
162
- unit: {
221
+ string: {
163
222
  kind: 'plain',
164
223
  key: 'string',
165
224
  default: null,
166
225
  meta: {},
167
226
  settings: {
168
- enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'vmin', 'vmax' ],
169
- required: true,
227
+ enum: [ 'auto' ],
170
228
  },
171
229
  },
172
230
  },
173
231
  },
174
232
  left: {
175
- kind: 'object',
176
- key: 'size',
233
+ kind: 'union',
177
234
  default: null,
178
235
  meta: {},
179
236
  settings: {},
180
- shape: {
237
+ prop_types: {
181
238
  size: {
182
- kind: 'plain',
183
- key: 'number',
239
+ kind: 'object',
240
+ key: 'size',
184
241
  default: null,
185
242
  meta: {},
186
- settings: {
187
- required: true,
243
+ settings: {},
244
+ shape: {
245
+ size: {
246
+ kind: 'plain',
247
+ key: 'number',
248
+ default: null,
249
+ meta: {},
250
+ settings: {
251
+ required: true,
252
+ },
253
+ },
254
+ unit: {
255
+ kind: 'plain',
256
+ key: 'string',
257
+ default: null,
258
+ meta: {},
259
+ settings: {
260
+ enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'auto', 'vmin', 'vmax' ],
261
+ required: true,
262
+ },
263
+ },
188
264
  },
189
265
  },
190
- unit: {
266
+ string: {
191
267
  kind: 'plain',
192
268
  key: 'string',
193
269
  default: null,
194
270
  meta: {},
195
271
  settings: {
196
- enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'vmin', 'vmax' ],
197
- required: true,
272
+ enum: [ 'auto' ],
198
273
  },
199
274
  },
200
275
  },
@@ -567,75 +642,111 @@ export const stylesSchemaMock = {
567
642
  settings: {},
568
643
  shape: {
569
644
  width: {
570
- kind: 'object',
571
- key: 'size',
645
+ kind: 'union',
572
646
  default: null,
573
647
  meta: {},
574
648
  settings: {},
575
- shape: {
649
+ prop_types: {
576
650
  size: {
577
- kind: 'plain',
578
- key: 'number',
651
+ kind: 'object',
652
+ key: 'size',
579
653
  default: null,
580
654
  meta: {},
581
- settings: {
582
- required: true,
655
+ settings: {},
656
+ shape: {
657
+ size: {
658
+ kind: 'plain',
659
+ key: 'number',
660
+ default: null,
661
+ meta: {},
662
+ settings: {
663
+ required: true,
664
+ },
665
+ },
666
+ unit: {
667
+ kind: 'plain',
668
+ key: 'string',
669
+ default: null,
670
+ meta: {},
671
+ settings: {
672
+ enum: [
673
+ 'px',
674
+ 'em',
675
+ 'rem',
676
+ '%',
677
+ 'vh',
678
+ 'vw',
679
+ 'auto',
680
+ 'vmin',
681
+ 'vmax',
682
+ ],
683
+ required: true,
684
+ },
685
+ },
583
686
  },
584
687
  },
585
- unit: {
688
+ string: {
586
689
  kind: 'plain',
587
690
  key: 'string',
588
691
  default: null,
589
692
  meta: {},
590
693
  settings: {
591
- enum: [
592
- 'px',
593
- 'em',
594
- 'rem',
595
- '%',
596
- 'vh',
597
- 'vw',
598
- 'vmin',
599
- 'vmax',
600
- ],
601
- required: true,
694
+ enum: [ 'auto' ],
602
695
  },
603
696
  },
604
697
  },
605
698
  },
606
699
  height: {
607
- kind: 'object',
608
- key: 'size',
700
+ kind: 'union',
609
701
  default: null,
610
702
  meta: {},
611
703
  settings: {},
612
- shape: {
704
+ prop_types: {
613
705
  size: {
614
- kind: 'plain',
615
- key: 'number',
706
+ kind: 'object',
707
+ key: 'size',
616
708
  default: null,
617
709
  meta: {},
618
- settings: {
619
- required: true,
710
+ settings: {},
711
+ shape: {
712
+ size: {
713
+ kind: 'plain',
714
+ key: 'number',
715
+ default: null,
716
+ meta: {},
717
+ settings: {
718
+ required: true,
719
+ },
720
+ },
721
+ unit: {
722
+ kind: 'plain',
723
+ key: 'string',
724
+ default: null,
725
+ meta: {},
726
+ settings: {
727
+ enum: [
728
+ 'px',
729
+ 'em',
730
+ 'rem',
731
+ '%',
732
+ 'vh',
733
+ 'vw',
734
+ 'auto',
735
+ 'vmin',
736
+ 'vmax',
737
+ ],
738
+ required: true,
739
+ },
740
+ },
620
741
  },
621
742
  },
622
- unit: {
743
+ string: {
623
744
  kind: 'plain',
624
745
  key: 'string',
625
746
  default: null,
626
747
  meta: {},
627
748
  settings: {
628
- enum: [
629
- 'px',
630
- 'em',
631
- 'rem',
632
- '%',
633
- 'vh',
634
- 'vw',
635
- 'vmin',
636
- 'vmax',
637
- ],
638
- required: true,
749
+ enum: [ 'auto' ],
639
750
  },
640
751
  },
641
752
  },
@@ -676,75 +787,91 @@ export const stylesSchemaMock = {
676
787
  settings: {},
677
788
  shape: {
678
789
  x: {
679
- kind: 'object',
680
- key: 'size',
790
+ kind: 'union',
681
791
  default: null,
682
792
  meta: {},
683
793
  settings: {},
684
- shape: {
794
+ prop_types: {
685
795
  size: {
686
- kind: 'plain',
687
- key: 'number',
688
- default: null,
689
- meta: {},
690
- settings: {
691
- required: true,
692
- },
693
- },
694
- unit: {
695
- kind: 'plain',
696
- key: 'string',
796
+ kind: 'object',
797
+ key: 'size',
697
798
  default: null,
698
799
  meta: {},
699
- settings: {
700
- enum: [
701
- 'px',
702
- 'em',
703
- 'rem',
704
- '%',
705
- 'vh',
706
- 'vw',
707
- 'vmin',
708
- 'vmax',
709
- ],
710
- required: true,
800
+ settings: {},
801
+ shape: {
802
+ size: {
803
+ kind: 'plain',
804
+ key: 'number',
805
+ default: null,
806
+ meta: {},
807
+ settings: {
808
+ required: true,
809
+ },
810
+ },
811
+ unit: {
812
+ kind: 'plain',
813
+ key: 'string',
814
+ default: null,
815
+ meta: {},
816
+ settings: {
817
+ enum: [
818
+ 'px',
819
+ 'em',
820
+ 'rem',
821
+ '%',
822
+ 'vh',
823
+ 'vw',
824
+ 'vmin',
825
+ 'vmax',
826
+ ],
827
+ required: true,
828
+ },
829
+ },
711
830
  },
712
831
  },
713
832
  },
714
833
  },
715
834
  y: {
716
- kind: 'object',
717
- key: 'size',
835
+ kind: 'union',
718
836
  default: null,
719
837
  meta: {},
720
838
  settings: {},
721
- shape: {
839
+ prop_types: {
722
840
  size: {
723
- kind: 'plain',
724
- key: 'number',
841
+ kind: 'object',
842
+ key: 'size',
725
843
  default: null,
726
844
  meta: {},
727
- settings: {
728
- required: true,
729
- },
730
- },
731
- unit: {
732
- kind: 'plain',
733
- key: 'string',
734
- default: null,
735
- meta: {},
736
- settings: {
737
- enum: [
738
- 'px',
739
- 'em',
740
- 'rem',
741
- '%',
742
- 'vh',
743
- 'vw',
744
- 'vmin',
745
- 'vmax',
746
- ],
747
- required: true,
845
+ settings: {},
846
+ shape: {
847
+ size: {
848
+ kind: 'plain',
849
+ key: 'number',
850
+ default: null,
851
+ meta: {},
852
+ settings: {
853
+ required: true,
854
+ },
855
+ },
856
+ unit: {
857
+ kind: 'plain',
858
+ key: 'string',
859
+ default: null,
860
+ meta: {},
861
+ settings: {
862
+ enum: [
863
+ 'px',
864
+ 'em',
865
+ 'rem',
866
+ '%',
867
+ 'vh',
868
+ 'vw',
869
+ 'vmin',
870
+ 'vmax',
871
+ ],
872
+ required: true,
873
+ },
874
+ },
748
875
  },
749
876
  },
750
877
  },
package/src/__tests__/init-styles-renderer.test.ts CHANGED
@@ -1,16 +1,17 @@
1
- import { createDOMElement, createMockStyleDefinition, dispatchV1ReadyEvent } from 'test-utils';
1
+ import { createDOMElement, createMockPropType, createMockStyleDefinition, dispatchV1ReadyEvent } from 'test-utils';
2
2
  import { type BreakpointsMap, getBreakpointsMap } from '@elementor/editor-responsive';
3
+ import { getStylesSchema } from '@elementor/editor-styles';
3
4
  import { stylesRepository } from '@elementor/editor-styles-repository';
4
5
  import { waitFor } from '@testing-library/react';
5
6
 
6
7
  import { initStylesRenderer as initStylesRendererBase } from '../init-styles-renderer';
7
8
  import { createPropsResolver } from '../renderers/create-props-resolver';
8
9
  import renderStyles from '../renderers/render-styles';
9
- import { styleTransformers } from '../renderers/style-transformers';
10
10
  import { getCanvasIframeBody } from '../sync/get-canvas-iframe-body';
11
11
 
12
12
  jest.mock( '@elementor/editor-styles-repository' );
13
13
  jest.mock( '@elementor/editor-responsive' );
14
+ jest.mock( '@elementor/editor-styles' );
14
15
  jest.mock( '../renderers/render-styles' );
15
16
  jest.mock( '../renderers/create-props-resolver' );
16
17
  jest.mock( '../sync/get-canvas-iframe-body' );
@@ -25,9 +26,11 @@ describe( 'initStylesRenderer', () => {
25
26
  // Arrange.
26
27
  let triggerStylesChange = () => {};
27
28
  const mockStyleDef = createMockStyleDefinition();
29
+ const mockSchema = { test: createMockPropType( { key: 'test', kind: 'plain' } ) };
28
30
 
29
31
  const mockedResolveProps = jest.fn();
30
32
 
33
+ jest.mocked( getStylesSchema ).mockReturnValue( mockSchema );
31
34
  jest.mocked( createPropsResolver ).mockReturnValue( mockedResolveProps );
32
35
  jest.mocked( stylesRepository.subscribe ).mockImplementation( ( cb ) => ( triggerStylesChange = cb ) );
33
36
  jest.mocked( stylesRepository.all ).mockReturnValue( [ mockStyleDef ] );
@@ -43,7 +46,9 @@ describe( 'initStylesRenderer', () => {
43
46
 
44
47
  // Assert.
45
48
  expect( createPropsResolver ).toHaveBeenCalledTimes( 1 );
46
- expect( createPropsResolver ).toHaveBeenCalledWith( styleTransformers, {
49
+ expect( createPropsResolver ).toHaveBeenCalledWith( {
50
+ transformers: expect.any( Object ),
51
+ schema: mockSchema,
47
52
  onPropResolve: expect.any( Function ),
48
53
  } );
49
54