@elementor/editor-canvas 0.10.0 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor-canvas",
3
3
  "description": "Elementor Editor Canvas",
4
- "version": "0.10.0",
4
+ "version": "0.11.1",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -36,16 +36,16 @@
36
36
  "react": "^18.3.1"
37
37
  },
38
38
  "dependencies": {
39
- "@elementor/editor": "0.18.0",
40
- "@elementor/editor-elements": "0.5.4",
41
- "@elementor/editor-props": "0.9.2",
42
- "@elementor/editor-responsive": "0.13.0",
43
- "@elementor/editor-styles": "0.5.7",
44
- "@elementor/editor-styles-repository": "0.7.2",
45
- "@elementor/editor-v1-adapters": "0.10.0",
39
+ "@elementor/editor": "0.18.2",
40
+ "@elementor/editor-elements": "0.6.1",
41
+ "@elementor/editor-props": "0.9.4",
42
+ "@elementor/editor-responsive": "0.13.2",
43
+ "@elementor/editor-styles": "0.6.1",
44
+ "@elementor/editor-styles-repository": "0.7.4",
45
+ "@elementor/editor-v1-adapters": "0.10.2",
46
46
  "@elementor/ui": "1.26.0",
47
- "@elementor/utils": "0.3.1",
48
- "@elementor/wp-media": "0.4.1",
47
+ "@elementor/utils": "0.4.0",
48
+ "@elementor/wp-media": "0.5.0",
49
49
  "@floating-ui/react": "^0.26.28"
50
50
  },
51
51
  "devDependencies": {
@@ -80,7 +80,7 @@ export const stylesSchemaMock = {
80
80
  },
81
81
  },
82
82
  },
83
- padding: {
83
+ margin: {
84
84
  kind: 'object',
85
85
  key: 'linked-dimensions',
86
86
  default: null,
@@ -94,114 +94,182 @@ export const stylesSchemaMock = {
94
94
  meta: {},
95
95
  settings: {},
96
96
  },
97
- top: {
98
- kind: 'object',
99
- key: 'size',
97
+ 'block-start': {
98
+ kind: 'union',
100
99
  default: null,
101
100
  meta: {},
102
101
  settings: {},
103
- shape: {
102
+ prop_types: {
104
103
  size: {
105
- kind: 'plain',
106
- key: 'number',
104
+ kind: 'object',
105
+ key: 'size',
107
106
  default: null,
108
107
  meta: {},
109
- settings: {
110
- 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
+ },
111
129
  },
112
130
  },
113
- unit: {
131
+ string: {
114
132
  kind: 'plain',
115
133
  key: 'string',
116
134
  default: null,
117
135
  meta: {},
118
136
  settings: {
119
- enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'vmin', 'vmax' ],
120
- required: true,
137
+ enum: [ 'auto' ],
121
138
  },
122
139
  },
123
140
  },
124
141
  },
125
- right: {
126
- kind: 'object',
127
- key: 'size',
142
+ 'block-end': {
143
+ kind: 'union',
128
144
  default: null,
129
145
  meta: {},
130
146
  settings: {},
131
- shape: {
147
+ prop_types: {
132
148
  size: {
133
- kind: 'plain',
134
- key: 'number',
149
+ kind: 'object',
150
+ key: 'size',
135
151
  default: null,
136
152
  meta: {},
137
- settings: {
138
- 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
+ },
139
174
  },
140
175
  },
141
- unit: {
176
+ string: {
142
177
  kind: 'plain',
143
178
  key: 'string',
144
179
  default: null,
145
180
  meta: {},
146
181
  settings: {
147
- enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'vmin', 'vmax' ],
148
- required: true,
182
+ enum: [ 'auto' ],
149
183
  },
150
184
  },
151
185
  },
152
186
  },
153
- bottom: {
154
- kind: 'object',
155
- key: 'size',
187
+ 'inline-start': {
188
+ kind: 'union',
156
189
  default: null,
157
190
  meta: {},
158
191
  settings: {},
159
- shape: {
192
+ prop_types: {
160
193
  size: {
161
- kind: 'plain',
162
- key: 'number',
194
+ kind: 'object',
195
+ key: 'size',
163
196
  default: null,
164
197
  meta: {},
165
- settings: {
166
- 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
+ },
167
219
  },
168
220
  },
169
- unit: {
221
+ string: {
170
222
  kind: 'plain',
171
223
  key: 'string',
172
224
  default: null,
173
225
  meta: {},
174
226
  settings: {
175
- enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'vmin', 'vmax' ],
176
- required: true,
227
+ enum: [ 'auto' ],
177
228
  },
178
229
  },
179
230
  },
180
231
  },
181
- left: {
182
- kind: 'object',
183
- key: 'size',
232
+ 'inline-end': {
233
+ kind: 'union',
184
234
  default: null,
185
235
  meta: {},
186
236
  settings: {},
187
- shape: {
237
+ prop_types: {
188
238
  size: {
189
- kind: 'plain',
190
- key: 'number',
239
+ kind: 'object',
240
+ key: 'size',
191
241
  default: null,
192
242
  meta: {},
193
- settings: {
194
- 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
+ },
195
264
  },
196
265
  },
197
- unit: {
266
+ string: {
198
267
  kind: 'plain',
199
268
  key: 'string',
200
269
  default: null,
201
270
  meta: {},
202
271
  settings: {
203
- enum: [ 'px', 'em', 'rem', '%', 'vh', 'vw', 'vmin', 'vmax' ],
204
- required: true,
272
+ enum: [ 'auto' ],
205
273
  },
206
274
  },
207
275
  },
@@ -372,7 +440,7 @@ export const stylesSchemaMock = {
372
440
  meta: {},
373
441
  settings: {},
374
442
  shape: {
375
- top: {
443
+ 'block-start': {
376
444
  kind: 'object',
377
445
  key: 'size',
378
446
  default: null,
@@ -400,7 +468,7 @@ export const stylesSchemaMock = {
400
468
  },
401
469
  },
402
470
  },
403
- right: {
471
+ 'block-end': {
404
472
  kind: 'object',
405
473
  key: 'size',
406
474
  default: null,
@@ -428,7 +496,7 @@ export const stylesSchemaMock = {
428
496
  },
429
497
  },
430
498
  },
431
- bottom: {
499
+ 'inline-start': {
432
500
  kind: 'object',
433
501
  key: 'size',
434
502
  default: null,
@@ -456,7 +524,7 @@ export const stylesSchemaMock = {
456
524
  },
457
525
  },
458
526
  },
459
- left: {
527
+ 'inline-end': {
460
528
  kind: 'object',
461
529
  key: 'size',
462
530
  default: null,
@@ -574,75 +642,111 @@ export const stylesSchemaMock = {
574
642
  settings: {},
575
643
  shape: {
576
644
  width: {
577
- kind: 'object',
578
- key: 'size',
645
+ kind: 'union',
579
646
  default: null,
580
647
  meta: {},
581
648
  settings: {},
582
- shape: {
649
+ prop_types: {
583
650
  size: {
584
- kind: 'plain',
585
- key: 'number',
651
+ kind: 'object',
652
+ key: 'size',
586
653
  default: null,
587
654
  meta: {},
588
- settings: {
589
- 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
+ },
590
686
  },
591
687
  },
592
- unit: {
688
+ string: {
593
689
  kind: 'plain',
594
690
  key: 'string',
595
691
  default: null,
596
692
  meta: {},
597
693
  settings: {
598
- enum: [
599
- 'px',
600
- 'em',
601
- 'rem',
602
- '%',
603
- 'vh',
604
- 'vw',
605
- 'vmin',
606
- 'vmax',
607
- ],
608
- required: true,
694
+ enum: [ 'auto' ],
609
695
  },
610
696
  },
611
697
  },
612
698
  },
613
699
  height: {
614
- kind: 'object',
615
- key: 'size',
700
+ kind: 'union',
616
701
  default: null,
617
702
  meta: {},
618
703
  settings: {},
619
- shape: {
704
+ prop_types: {
620
705
  size: {
621
- kind: 'plain',
622
- key: 'number',
706
+ kind: 'object',
707
+ key: 'size',
623
708
  default: null,
624
709
  meta: {},
625
- settings: {
626
- 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
+ },
627
741
  },
628
742
  },
629
- unit: {
743
+ string: {
630
744
  kind: 'plain',
631
745
  key: 'string',
632
746
  default: null,
633
747
  meta: {},
634
748
  settings: {
635
- enum: [
636
- 'px',
637
- 'em',
638
- 'rem',
639
- '%',
640
- 'vh',
641
- 'vw',
642
- 'vmin',
643
- 'vmax',
644
- ],
645
- required: true,
749
+ enum: [ 'auto' ],
646
750
  },
647
751
  },
648
752
  },
@@ -683,75 +787,91 @@ export const stylesSchemaMock = {
683
787
  settings: {},
684
788
  shape: {
685
789
  x: {
686
- kind: 'object',
687
- key: 'size',
790
+ kind: 'union',
688
791
  default: null,
689
792
  meta: {},
690
793
  settings: {},
691
- shape: {
794
+ prop_types: {
692
795
  size: {
693
- kind: 'plain',
694
- key: 'number',
796
+ kind: 'object',
797
+ key: 'size',
695
798
  default: null,
696
799
  meta: {},
697
- settings: {
698
- required: true,
699
- },
700
- },
701
- unit: {
702
- kind: 'plain',
703
- key: 'string',
704
- default: null,
705
- meta: {},
706
- settings: {
707
- enum: [
708
- 'px',
709
- 'em',
710
- 'rem',
711
- '%',
712
- 'vh',
713
- 'vw',
714
- 'vmin',
715
- 'vmax',
716
- ],
717
- 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
+ },
718
830
  },
719
831
  },
720
832
  },
721
833
  },
722
834
  y: {
723
- kind: 'object',
724
- key: 'size',
835
+ kind: 'union',
725
836
  default: null,
726
837
  meta: {},
727
838
  settings: {},
728
- shape: {
839
+ prop_types: {
729
840
  size: {
730
- kind: 'plain',
731
- key: 'number',
841
+ kind: 'object',
842
+ key: 'size',
732
843
  default: null,
733
844
  meta: {},
734
- settings: {
735
- required: true,
736
- },
737
- },
738
- unit: {
739
- kind: 'plain',
740
- key: 'string',
741
- default: null,
742
- meta: {},
743
- settings: {
744
- enum: [
745
- 'px',
746
- 'em',
747
- 'rem',
748
- '%',
749
- 'vh',
750
- 'vw',
751
- 'vmin',
752
- 'vmax',
753
- ],
754
- 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
+ },
755
875
  },
756
876
  },
757
877
  },
@@ -18,6 +18,7 @@ import {
18
18
  type Props,
19
19
  shadowPropTypeUtil,
20
20
  sizePropTypeUtil,
21
+ stringPropTypeUtil,
21
22
  strokePropTypeUtil,
22
23
  } from '@elementor/editor-props';
23
24
  import { getMediaAttachment } from '@elementor/wp-media';
@@ -82,47 +83,44 @@ describe( 'styles prop resolver', () => {
82
83
  {
83
84
  name: 'linked-dimensional',
84
85
  props: {
85
- padding: dimensionsPropTypeUtil.create( {
86
- top: sizePropTypeUtil.create( {
86
+ margin: dimensionsPropTypeUtil.create( {
87
+ 'block-start': sizePropTypeUtil.create( {
87
88
  size: 10,
88
89
  unit: 'px',
89
90
  } ),
90
- right: sizePropTypeUtil.create( {
91
+ 'block-end': sizePropTypeUtil.create( {
91
92
  size: 20,
92
93
  unit: 'px',
93
94
  } ),
94
- bottom: sizePropTypeUtil.create( {
95
+ 'inline-start': sizePropTypeUtil.create( {
95
96
  size: 30,
96
97
  unit: 'px',
97
98
  } ),
98
- left: sizePropTypeUtil.create( {
99
- size: 40,
100
- unit: 'px',
101
- } ),
99
+ 'inline-end': stringPropTypeUtil.create( 'auto' ),
102
100
  } ),
103
101
  },
104
102
  expected: {
105
- 'padding-top': '10px',
106
- 'padding-right': '20px',
107
- 'padding-bottom': '30px',
108
- 'padding-left': '40px',
103
+ 'margin-block-start': '10px',
104
+ 'margin-block-end': '20px',
105
+ 'margin-inline-start': '30px',
106
+ 'margin-inline-end': 'auto',
109
107
  },
110
108
  },
111
109
  {
112
110
  name: 'border-width',
113
111
  props: {
114
112
  'border-width': borderWidthPropTypeUtil.create( {
115
- top: sizePropTypeUtil.create( { size: 10, unit: 'px' } ),
116
- right: sizePropTypeUtil.create( { size: 20, unit: 'px' } ),
117
- bottom: sizePropTypeUtil.create( { size: 30, unit: 'px' } ),
118
- left: sizePropTypeUtil.create( { size: 40, unit: 'px' } ),
113
+ 'block-start': sizePropTypeUtil.create( { size: 10, unit: 'px' } ),
114
+ 'block-end': sizePropTypeUtil.create( { size: 20, unit: 'px' } ),
115
+ 'inline-start': sizePropTypeUtil.create( { size: 30, unit: 'px' } ),
116
+ 'inline-end': sizePropTypeUtil.create( { size: 40, unit: 'px' } ),
119
117
  } ),
120
118
  },
121
119
  expected: {
122
- 'border-top-width': '10px',
123
- 'border-right-width': '20px',
124
- 'border-bottom-width': '30px',
125
- 'border-left-width': '40px',
120
+ 'border-block-start-width': '10px',
121
+ 'border-block-end-width': '20px',
122
+ 'border-inline-start-width': '30px',
123
+ 'border-inline-end-width': '40px',
126
124
  },
127
125
  },
128
126
  {