@zipify/wysiwyg 4.11.3 → 4.12.0-beta.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 (29) hide show
  1. package/dist/cli.js +43 -47
  2. package/dist/node.js +22 -26
  3. package/dist/types/components/toolbar/controls/LetterSpacingControl.vue.d.ts +2 -0
  4. package/dist/types/enums/TextSetting.d.ts +1 -0
  5. package/dist/types/extensions/LetterSpacing.d.ts +2 -0
  6. package/dist/types/utils/convertEmToPx.d.ts +1 -0
  7. package/dist/types/utils/convertLetterSpacing.d.ts +1 -0
  8. package/dist/types/utils/index.d.ts +1 -0
  9. package/dist/wysiwyg.css +45 -28
  10. package/dist/wysiwyg.mjs +311 -148
  11. package/example/presets.js +227 -203
  12. package/lib/assets/icons/letter-spacing.svg +3 -0
  13. package/lib/components/base/NumberField.vue +1 -2
  14. package/lib/components/base/colorPicker/composables/usePickerApi.js +1 -1
  15. package/lib/components/toolbar/controls/LetterSpacingControl.vue +95 -0
  16. package/lib/components/toolbar/controls/index.js +1 -0
  17. package/lib/components/toolbar/layouts/ToolbarDesktop.vue +2 -0
  18. package/lib/components/toolbar/layouts/ToolbarMobile.vue +2 -0
  19. package/lib/enums/TextSetting.ts +2 -0
  20. package/lib/extensions/LetterSpacing.js +78 -0
  21. package/lib/extensions/__tests__/LetterSpacing.test.js +106 -0
  22. package/lib/extensions/__tests__/__snapshots__/LetterSpacing.test.js.snap +91 -0
  23. package/lib/extensions/index.js +2 -0
  24. package/lib/styles/content.css +3 -0
  25. package/lib/utils/convertEmToPx.ts +8 -0
  26. package/lib/utils/convertFontSize.js +2 -7
  27. package/lib/utils/convertLetterSpacing.ts +5 -0
  28. package/lib/utils/index.ts +1 -0
  29. package/package.json +2 -2
package/example/presets.js CHANGED
@@ -1,229 +1,253 @@
1
1
  export const PRESETS = [
2
2
  {
3
- 'id': 'h1',
4
- 'name': 'Heading 1',
5
- 'node': {
6
- 'type': 'heading',
7
- 'level': 1
8
- },
9
- 'desktop': {
10
- 'alignment': null,
11
- 'line_height': '1.2',
12
- 'font_size': '40px'
13
- },
14
- 'common': {
15
- 'font_family': 'Lato',
16
- 'font_weight': '700',
17
- 'color': '',
18
- 'font_style': 'normal',
19
- 'text_decoration': 'none'
20
- },
21
- 'tablet': {
22
- 'alignment': null,
23
- 'line_height': '1.2',
24
- 'font_size': '40px'
25
- },
26
- 'mobile': {
27
- 'alignment': null,
28
- 'line_height': '1.2',
29
- 'font_size': '28px'
3
+ id: 'h1',
4
+ name: 'Heading 1',
5
+ node: {
6
+ type: 'heading',
7
+ level: 1
8
+ },
9
+ desktop: {
10
+ alignment: null,
11
+ line_height: '1.2',
12
+ letter_spacing: null,
13
+ font_size: '40px'
14
+ },
15
+ common: {
16
+ font_family: 'Lato',
17
+ font_weight: '700',
18
+ color: '',
19
+ font_style: 'normal',
20
+ text_decoration: 'none'
21
+ },
22
+ tablet: {
23
+ alignment: null,
24
+ line_height: '1.2',
25
+ letter_spacing: null,
26
+ font_size: '40px'
27
+ },
28
+ mobile: {
29
+ alignment: null,
30
+ line_height: '1.2',
31
+ letter_spacing: null,
32
+ font_size: '28px'
30
33
  }
31
34
  },
32
35
  {
33
- 'id': 'h2',
34
- 'name': 'Heading 2',
35
- 'node': {
36
- 'type': 'heading',
37
- 'level': 2
38
- },
39
- 'desktop': {
40
- 'alignment': null,
41
- 'line_height': '1.2',
42
- 'font_size': '32px'
43
- },
44
- 'common': {
45
- 'font_family': 'Lato',
46
- 'font_weight': '700',
47
- 'color': '#262626',
48
- 'font_style': 'normal',
49
- 'text_decoration': 'none'
50
- },
51
- 'tablet': {
52
- 'alignment': null,
53
- 'line_height': '1.2',
54
- 'font_size': '32px'
55
- },
56
- 'mobile': {
57
- 'alignment': null,
58
- 'line_height': '1.2',
59
- 'font_size': '24px'
36
+ id: 'h2',
37
+ name: 'Heading 2',
38
+ node: {
39
+ type: 'heading',
40
+ level: 2
41
+ },
42
+ desktop: {
43
+ alignment: null,
44
+ line_height: '1.2',
45
+ font_size: '32px',
46
+ letter_spacing: null
47
+ },
48
+ common: {
49
+ font_family: 'Lato',
50
+ font_weight: '700',
51
+ color: '#262626',
52
+ font_style: 'normal',
53
+ text_decoration: 'none'
54
+ },
55
+ tablet: {
56
+ alignment: null,
57
+ line_height: '1.2',
58
+ font_size: '32px',
59
+ letter_spacing: null
60
+ },
61
+ mobile: {
62
+ alignment: null,
63
+ line_height: '1.2',
64
+ font_size: '24px',
65
+ letter_spacing: null
60
66
  }
61
67
  },
62
68
  {
63
- 'id': 'h3',
64
- 'name': 'Sub-heading 1',
65
- 'node': {
66
- 'type': 'heading',
67
- 'level': 3
68
- },
69
- 'desktop': {
70
- 'alignment': null,
71
- 'line_height': '1.2',
72
- 'font_size': '28px'
73
- },
74
- 'common': {
75
- 'font_family': 'Lato',
76
- 'font_weight': '700',
77
- 'color': '#262626',
78
- 'font_style': 'normal',
79
- 'text_decoration': 'none'
80
- },
81
- 'tablet': {
82
- 'alignment': null,
83
- 'line_height': '1.2',
84
- 'font_size': '28px'
85
- },
86
- 'mobile': {
87
- 'alignment': null,
88
- 'line_height': '1.2',
89
- 'font_size': '20px'
69
+ id: 'h3',
70
+ name: 'Sub-heading 1',
71
+ node: {
72
+ type: 'heading',
73
+ level: 3
74
+ },
75
+ desktop: {
76
+ alignment: null,
77
+ line_height: '1.2',
78
+ font_size: '28px',
79
+ letter_spacing: null
80
+ },
81
+ common: {
82
+ font_family: 'Lato',
83
+ font_weight: '700',
84
+ color: '#262626',
85
+ font_style: 'normal',
86
+ text_decoration: 'none'
87
+ },
88
+ tablet: {
89
+ alignment: null,
90
+ line_height: '1.2',
91
+ font_size: '28px',
92
+ letter_spacing: null
93
+ },
94
+ mobile: {
95
+ alignment: null,
96
+ line_height: '1.2',
97
+ font_size: '20px',
98
+ letter_spacing: null
90
99
  }
91
100
  },
92
101
  {
93
- 'id': 'h4',
94
- 'name': 'Sub-heading 2',
95
- 'node': {
96
- 'type': 'heading',
97
- 'level': 4
98
- },
99
- 'desktop': {
100
- 'alignment': null,
101
- 'line_height': '1.2',
102
- 'font_size': '24px'
103
- },
104
- 'common': {
105
- 'font_family': 'Lato',
106
- 'font_weight': '700',
107
- 'color': '#262626',
108
- 'font_style': 'normal',
109
- 'text_decoration': 'none'
110
- },
111
- 'tablet': {
112
- 'alignment': null,
113
- 'line_height': '1.2',
114
- 'font_size': '24px'
115
- },
116
- 'mobile': {
117
- 'alignment': null,
118
- 'line_height': '1.2',
119
- 'font_size': '18px'
102
+ id: 'h4',
103
+ name: 'Sub-heading 2',
104
+ node: {
105
+ type: 'heading',
106
+ level: 4
107
+ },
108
+ desktop: {
109
+ alignment: null,
110
+ line_height: '1.2',
111
+ font_size: '24px',
112
+ letter_spacing: null
113
+ },
114
+ common: {
115
+ font_family: 'Lato',
116
+ font_weight: '700',
117
+ color: '#262626',
118
+ font_style: 'normal',
119
+ text_decoration: 'none'
120
+ },
121
+ tablet: {
122
+ alignment: null,
123
+ line_height: '1.2',
124
+ font_size: '24px',
125
+ letter_spacing: null
126
+ },
127
+ mobile: {
128
+ alignment: null,
129
+ line_height: '1.2',
130
+ font_size: '18px',
131
+ letter_spacing: null
120
132
  }
121
133
  },
122
134
  {
123
- 'id': 'link',
124
- 'name': 'Link',
125
- 'hidden': true,
126
- 'desktop': {
127
- 'alignment': null,
128
- 'line_height': 'inherit',
129
- 'font_size': 'inherit'
130
- },
131
- 'common': {
132
- 'font_family': 'inherit',
133
- 'font_weight': 'inherit',
134
- 'color': 'rgb(0, 0, 238)',
135
- 'font_style': 'normal',
136
- 'text_decoration': 'underline'
137
- },
138
- 'tablet': {
139
- 'alignment': null,
140
- 'line_height': 'inherit',
141
- 'font_size': 'inherit'
142
- },
143
- 'mobile': {
144
- 'alignment': null,
145
- 'line_height': 'inherit',
146
- 'font_size': 'inherit'
135
+ id: 'link',
136
+ name: 'Link',
137
+ hidden: true,
138
+ desktop: {
139
+ alignment: null,
140
+ line_height: 'inherit',
141
+ font_size: 'inherit',
142
+ letter_spacing: null
143
+ },
144
+ common: {
145
+ font_family: 'inherit',
146
+ font_weight: 'inherit',
147
+ color: 'rgb(0, 0, 238)',
148
+ font_style: 'normal',
149
+ text_decoration: 'underline'
150
+ },
151
+ tablet: {
152
+ alignment: null,
153
+ line_height: 'inherit',
154
+ font_size: 'inherit',
155
+ letter_spacing: null
156
+ },
157
+ mobile: {
158
+ alignment: null,
159
+ line_height: 'inherit',
160
+ font_size: 'inherit',
161
+ letter_spacing: null
147
162
  }
148
163
  },
149
164
  {
150
- 'id': 'regular-1',
151
- 'name': 'Body Copy 1',
152
- 'desktop': {
153
- 'alignment': null,
154
- 'line_height': '1.43',
155
- 'font_size': '18px'
156
- },
157
- 'common': {
158
- 'font_family': 'Lato',
159
- 'font_weight': '400',
160
- 'color': '#262626',
161
- 'font_style': 'normal',
162
- 'text_decoration': 'none'
163
- },
164
- 'tablet': {
165
- 'alignment': null,
166
- 'line_height': '1.43',
167
- 'font_size': '18px'
168
- },
169
- 'mobile': {
170
- 'alignment': null,
171
- 'line_height': '1.43',
172
- 'font_size': '18px'
165
+ id: 'regular-1',
166
+ name: 'Body Copy 1',
167
+ desktop: {
168
+ alignment: null,
169
+ line_height: '1.43',
170
+ font_size: '18px',
171
+ letter_spacing: null
172
+ },
173
+ common: {
174
+ font_family: 'Lato',
175
+ font_weight: '400',
176
+ color: '#262626',
177
+ font_style: 'normal',
178
+ text_decoration: 'none'
179
+ },
180
+ tablet: {
181
+ alignment: null,
182
+ line_height: '1.43',
183
+ font_size: '18px',
184
+ letter_spacing: null
185
+ },
186
+ mobile: {
187
+ alignment: null,
188
+ line_height: '1.43',
189
+ font_size: '18px',
190
+ letter_spacing: null
173
191
  }
174
192
  },
175
193
  {
176
- 'id': 'regular-2',
177
- 'name': 'Body Copy 2',
178
- 'fallbackClass': 'zpa-regular2',
179
- 'desktop': {
180
- 'alignment': null,
181
- 'line_height': '1.43',
182
- 'font_size': '16px'
183
- },
184
- 'common': {
185
- 'font_family': 'Lato',
186
- 'font_weight': '400',
187
- 'color': '#262626',
188
- 'font_style': 'normal',
189
- 'text_decoration': 'none'
190
- },
191
- 'tablet': {
192
- 'alignment': null,
193
- 'line_height': '1.43',
194
- 'font_size': '16px'
195
- },
196
- 'mobile': {
197
- 'alignment': null,
198
- 'line_height': '1.43',
199
- 'font_size': '16px'
194
+ id: 'regular-2',
195
+ name: 'Body Copy 2',
196
+ fallbackClass: 'zpa-regular2',
197
+ desktop: {
198
+ alignment: null,
199
+ line_height: '1.43',
200
+ font_size: '16px',
201
+ letter_spacing: null
202
+ },
203
+ common: {
204
+ font_family: 'Lato',
205
+ font_weight: '400',
206
+ color: '#262626',
207
+ font_style: 'normal',
208
+ text_decoration: 'none'
209
+ },
210
+ tablet: {
211
+ alignment: null,
212
+ line_height: '1.43',
213
+ font_size: '16px',
214
+ letter_spacing: null
215
+ },
216
+ mobile: {
217
+ alignment: null,
218
+ line_height: '1.43',
219
+ font_size: '16px',
220
+ letter_spacing: null
200
221
  }
201
222
  },
202
223
  {
203
- 'id': 'regular-3',
204
- 'name': 'Body Copy 3',
205
- 'fallbackClass': 'zpa-regular3',
206
- 'desktop': {
207
- 'alignment': null,
208
- 'line_height': '1.43',
209
- 'font_size': '12px'
210
- },
211
- 'common': {
212
- 'font_family': 'Lato',
213
- 'font_weight': '400',
214
- 'color': '#262626',
215
- 'font_style': 'normal',
216
- 'text_decoration': 'none'
217
- },
218
- 'tablet': {
219
- 'alignment': null,
220
- 'line_height': '1.43',
221
- 'font_size': '12px'
222
- },
223
- 'mobile': {
224
- 'alignment': null,
225
- 'line_height': '1.43',
226
- 'font_size': '12px'
224
+ id: 'regular-3',
225
+ name: 'Body Copy 3',
226
+ fallbackClass: 'zpa-regular3',
227
+ desktop: {
228
+ alignment: null,
229
+ line_height: '1.43',
230
+ font_size: '12px',
231
+ letter_spacing: null
232
+ },
233
+ common: {
234
+ font_family: 'Lato',
235
+ font_weight: '400',
236
+ color: '#262626',
237
+ font_style: 'normal',
238
+ text_decoration: 'none'
239
+ },
240
+ tablet: {
241
+ alignment: null,
242
+ line_height: '1.43',
243
+ font_size: '12px',
244
+ letter_spacing: null
245
+ },
246
+ mobile: {
247
+ alignment: null,
248
+ line_height: '1.43',
249
+ font_size: '12px',
250
+ letter_spacing: null
227
251
  }
228
252
  }
229
253
  ];
package/lib/assets/icons/letter-spacing.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 24 24">
2
+ <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M3 19V5h1.8v14zm16.2 0V5H21v14zM7.815 16.375l3.375-8.75h1.62l3.375 8.75h-1.552l-.81-2.231h-3.645l-.81 2.231zm2.835-3.5h2.7l-1.305-3.631h-.09z" clip-rule="evenodd"/>
3
+ </svg>
package/lib/components/base/NumberField.vue CHANGED
@@ -214,14 +214,13 @@ const elementClasses = computed(() => ({
214
214
  .zw-number-field__units {
215
215
  color: rgb(var(--zw-color-n70));
216
216
  font-size: var(--zw-font-size-xs);
217
- line-height: var(--zw-line-height-md);
218
217
  text-align: center;
219
218
  display: inline-block;
220
219
  width: 100%;
221
220
  }
222
221
 
223
222
  .zw-number-field:hover .zw-number-field__units,
224
- .zw-number-field:focus .zw-number-field__units {
223
+ .zw-number-field:has(:focus, :active) .zw-number-field__units {
225
224
  display: none;
226
225
  }
227
226
  </style>
package/lib/components/base/colorPicker/composables/usePickerApi.js CHANGED
@@ -11,7 +11,7 @@ export function usePickerApi({ pickerRef, colorRef, onChange, onClosed, onBefore
11
11
  }
12
12
 
13
13
  function close() {
14
- pickerRef.value?.close(colorRef.value);
14
+ pickerRef.value?.close(initialColor === colorRef.value ? undefined : colorRef.value);
15
15
  onClosed();
16
16
  }
17
17
 
package/lib/components/toolbar/controls/LetterSpacingControl.vue ADDED
@@ -0,0 +1,95 @@
1
+ <template>
2
+ <div class="zw-position--relative" ref="wrapperRef">
3
+ <Button
4
+ class="zw-position--relative"
5
+ icon
6
+ skin="toolbar"
7
+ :active="toggler.isOpened"
8
+ @click="toggler.open"
9
+ v-tooltip="'Letter Spacing'"
10
+ >
11
+ <Icon name="letter-spacing" size="28px" auto-color />
12
+
13
+ <span
14
+ v-if="isCustomized"
15
+ class="zw-button__customized-indicator"
16
+ data-test-selector="customizedIndicator"
17
+ v-tooltip.lg="'Style differs from Page Styles'"
18
+ />
19
+ </Button>
20
+
21
+ <Modal
22
+ class="zw-letter-spacing-control__modal"
23
+ :toggler="toggler"
24
+ :reference-ref="wrapperRef"
25
+ >
26
+ <FieldLabel class="zw-margin-bottom--xs" field-id="wswg-letter-spacing">
27
+ Letter Spacing
28
+ </FieldLabel>
29
+
30
+ <div class="zw-letter-spacing-control__row">
31
+ <Range
32
+ class="zw-letter-spacing-control__range"
33
+ :step="STEP"
34
+ :min="MIN_VALUE"
35
+ :max="MAX_VALUE"
36
+ :value="currentValue"
37
+ @input="apply"
38
+ />
39
+
40
+ <NumberField
41
+ :step="STEP"
42
+ :min="MIN_VALUE"
43
+ :max="MAX_VALUE"
44
+ units="px"
45
+ class="zw-letter-spacing-control__field"
46
+ field-id="wswg-letter-spacing"
47
+ :value="currentValue"
48
+ @input="apply"
49
+ />
50
+ </div>
51
+ </Modal>
52
+ </div>
53
+ </template>
54
+
55
+ <script setup>
56
+ import { inject, ref, computed } from 'vue';
57
+ import { Button, Icon, Modal, Range, NumberField, FieldLabel, useModalToggler } from '../../base';
58
+ import { InjectionTokens } from '../../../injectionTokens';
59
+ import { tooltip as vTooltip } from '../../../directives';
60
+ import { TextSetting } from '../../../enums';
61
+
62
+ const MIN_VALUE = -1.6;
63
+ const MAX_VALUE = 3.2;
64
+ const STEP = 0.1;
65
+
66
+ const editor = inject(InjectionTokens.EDITOR);
67
+ const wrapperRef = ref(null);
68
+ const toggler = useModalToggler();
69
+
70
+ const valueRef = editor.commands.getLetterSpacing();
71
+ const currentValue = computed(() => valueRef.value ?? 0);
72
+ const isCustomized = editor.commands.isSettingCustomized(TextSetting.LETTER_SPACING);
73
+
74
+ const apply = (value) => editor.commands.applyLetterSpacing(value);
75
+ </script>
76
+
77
+ <style scoped>
78
+ .zw-letter-spacing-control__modal {
79
+ padding: var(--zw-offset-sm);
80
+ }
81
+
82
+ .zw-letter-spacing-control__row {
83
+ display: flex;
84
+ align-items: center;
85
+ }
86
+
87
+ .zw-letter-spacing-control__range {
88
+ width: 156px;
89
+ }
90
+
91
+ .zw-letter-spacing-control__field {
92
+ width: 64px;
93
+ margin-left: var(--zw-offset-sm);
94
+ }
95
+ </style>
package/lib/components/toolbar/controls/index.js CHANGED
@@ -10,6 +10,7 @@ export { default as SuperscriptControl } from './SuperscriptControl';
10
10
  export { default as CaseStyleControl } from './CaseStyleControl';
11
11
  export { default as AlignmentControl } from './AlignmentControl';
12
12
  export { default as LineHeightControl } from './LineHeightControl';
13
+ export { default as LetterSpacingControl } from './LetterSpacingControl';
13
14
  export { default as ListControl } from './ListControl';
14
15
  export { default as RemoveFormatControl } from './RemoveFormatControl';
15
16
  export { LinkControl } from './link';
package/lib/components/toolbar/layouts/ToolbarDesktop.vue CHANGED
@@ -36,6 +36,7 @@
36
36
  <ToolbarDivider vertical />
37
37
 
38
38
  <LineHeightControl />
39
+ <LetterSpacingControl />
39
40
  <ToolbarDivider vertical />
40
41
 
41
42
  <ListControl />
@@ -61,6 +62,7 @@ import {
61
62
  FontWeightControl,
62
63
  ItalicControl,
63
64
  LineHeightControl,
65
+ LetterSpacingControl,
64
66
  StrikeThroughControl,
65
67
  SuperscriptControl,
66
68
  UnderlineControl,
package/lib/components/toolbar/layouts/ToolbarMobile.vue CHANGED
@@ -37,6 +37,7 @@
37
37
  <ToolbarDivider vertical />
38
38
 
39
39
  <LineHeightControl />
40
+ <LetterSpacingControl />
40
41
  <ToolbarDivider vertical />
41
42
 
42
43
  <ListControl />
@@ -62,6 +63,7 @@ import {
62
63
  FontWeightControl,
63
64
  ItalicControl,
64
65
  LineHeightControl,
66
+ LetterSpacingControl,
65
67
  StrikeThroughControl,
66
68
  SuperscriptControl,
67
69
  UnderlineControl,
package/lib/enums/TextSetting.ts CHANGED
@@ -7,6 +7,7 @@ export enum TextSetting {
7
7
  FONT_STYLE = 'font_style',
8
8
  FONT_WEIGHT = 'font_weight',
9
9
  LINE_HEIGHT = 'line_height',
10
+ LETTER_SPACING = 'letter_spacing',
10
11
  TEXT_DECORATION = 'text_decoration',
11
12
  SUPERSCRIPT = 'superscript',
12
13
  MARGIN = 'margin',
@@ -38,6 +39,7 @@ export const TextBlockMarkList = [
38
39
  TextSetting.FONT_SIZE,
39
40
  TextSetting.FONT_STYLE,
40
41
  TextSetting.FONT_WEIGHT,
42
+ TextSetting.LETTER_SPACING,
41
43
  TextSetting.TEXT_DECORATION,
42
44
  TextSetting.SUPERSCRIPT
43
45
  ];