@zipify/wysiwyg 1.0.0-dev.4 → 1.0.0-dev.5

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 (61) hide show
  1. package/.release-it.json +0 -1
  2. package/README.md +3 -1
  3. package/config/jest/setupTests.js +3 -1
  4. package/example/ExampleApp.vue +39 -31
  5. package/example/example.js +26 -0
  6. package/example/presets.js +2 -0
  7. package/lib/Wysiwyg.vue +6 -0
  8. package/lib/composables/__tests__/useEditor.test.js +12 -3
  9. package/lib/composables/useEditor.js +12 -5
  10. package/lib/extensions/Alignment.js +6 -0
  11. package/lib/extensions/BackgroundColor.js +8 -1
  12. package/lib/extensions/FontColor.js +8 -1
  13. package/lib/extensions/FontFamily.js +7 -0
  14. package/lib/extensions/FontSize.js +12 -0
  15. package/lib/extensions/FontStyle.js +11 -0
  16. package/lib/extensions/FontWeight.js +25 -1
  17. package/lib/extensions/LineHeight.js +17 -0
  18. package/lib/extensions/StylePreset.js +30 -3
  19. package/lib/extensions/TextDecoration.js +11 -0
  20. package/lib/extensions/__tests__/Alignment.test.js +22 -1
  21. package/lib/extensions/__tests__/BackgroundColor.test.js +30 -1
  22. package/lib/extensions/__tests__/CaseStyle.test.js +4 -1
  23. package/lib/extensions/__tests__/FontColor.test.js +30 -1
  24. package/lib/extensions/__tests__/FontFamily.test.js +30 -1
  25. package/lib/extensions/__tests__/FontSize.test.js +30 -1
  26. package/lib/extensions/__tests__/FontStyle.test.js +38 -1
  27. package/lib/extensions/__tests__/FontWeight.test.js +58 -1
  28. package/lib/extensions/__tests__/LineHeight.test.js +41 -1
  29. package/lib/extensions/__tests__/StylePreset.test.js +76 -1
  30. package/lib/extensions/__tests__/TextDecoration.test.js +63 -1
  31. package/lib/extensions/__tests__/__snapshots__/Alignment.test.js.snap +44 -0
  32. package/lib/extensions/__tests__/__snapshots__/BackgroundColor.test.js.snap +91 -0
  33. package/lib/extensions/__tests__/__snapshots__/FontColor.test.js.snap +91 -0
  34. package/lib/extensions/__tests__/__snapshots__/FontFamily.test.js.snap +91 -0
  35. package/lib/extensions/__tests__/__snapshots__/FontSize.test.js.snap +99 -0
  36. package/lib/extensions/__tests__/__snapshots__/FontStyle.test.js.snap +120 -0
  37. package/lib/extensions/__tests__/__snapshots__/FontWeight.test.js.snap +149 -0
  38. package/lib/extensions/__tests__/__snapshots__/LineHeight.test.js.snap +92 -0
  39. package/lib/extensions/__tests__/__snapshots__/StylePreset.test.js.snap +167 -2
  40. package/lib/extensions/__tests__/__snapshots__/TextDecoration.test.js.snap +207 -0
  41. package/lib/extensions/core/__tests__/NodeProcessor.test.js +4 -1
  42. package/lib/extensions/core/__tests__/SelectionProcessor.test.js +9 -4
  43. package/lib/extensions/core/__tests__/TextProcessor.test.js +4 -1
  44. package/lib/extensions/index.js +1 -0
  45. package/lib/extensions/list/List.js +34 -0
  46. package/lib/extensions/list/__tests__/List.test.js +115 -3
  47. package/lib/extensions/list/__tests__/__snapshots__/List.test.js.snap +457 -6
  48. package/lib/services/ContentNormalizer.js +113 -0
  49. package/lib/services/Storage.js +1 -13
  50. package/lib/services/__tests__/ContentNormalizer.test.js +41 -0
  51. package/lib/services/__tests__/FavoriteColors.test.js +20 -0
  52. package/lib/services/__tests__/JsonSerializer.test.js +23 -0
  53. package/lib/services/__tests__/Storage.test.js +79 -0
  54. package/lib/services/index.js +1 -0
  55. package/lib/utils/__tests__/convertColor.test.js +19 -0
  56. package/lib/utils/__tests__/createKeyboardShortcut.test.js +25 -0
  57. package/lib/utils/__tests__/renderInlineSetting.test.js +26 -0
  58. package/lib/utils/convertColor.js +7 -0
  59. package/lib/utils/index.js +1 -0
  60. package/lib/utils/renderInlineSetting.js +1 -1
  61. package/package.json +1 -1
package/lib/extensions/__tests__/__snapshots__/FontColor.test.js.snap CHANGED
@@ -25,4 +25,95 @@ Object {
25
25
  }
26
26
  `;
27
27
 
28
+ exports[`parsing html should get value from paragraph 1`] = `
29
+ Object {
30
+ "content": Array [
31
+ Object {
32
+ "content": Array [
33
+ Object {
34
+ "marks": Array [
35
+ Object {
36
+ "attrs": Object {
37
+ "value": "#FF0000",
38
+ },
39
+ "type": "font_color",
40
+ },
41
+ ],
42
+ "text": "test",
43
+ "type": "text",
44
+ },
45
+ ],
46
+ "type": "paragraph",
47
+ },
48
+ ],
49
+ "type": "doc",
50
+ }
51
+ `;
52
+
53
+ exports[`parsing html should get value from text 1`] = `
54
+ Object {
55
+ "content": Array [
56
+ Object {
57
+ "content": Array [
58
+ Object {
59
+ "marks": Array [
60
+ Object {
61
+ "attrs": Object {
62
+ "value": "#FF0000",
63
+ },
64
+ "type": "font_color",
65
+ },
66
+ ],
67
+ "text": "lorem",
68
+ "type": "text",
69
+ },
70
+ Object {
71
+ "text": " ipsum",
72
+ "type": "text",
73
+ },
74
+ ],
75
+ "type": "paragraph",
76
+ },
77
+ ],
78
+ "type": "doc",
79
+ }
80
+ `;
81
+
82
+ exports[`parsing html should merge paragraph and text settings 1`] = `
83
+ Object {
84
+ "content": Array [
85
+ Object {
86
+ "content": Array [
87
+ Object {
88
+ "marks": Array [
89
+ Object {
90
+ "attrs": Object {
91
+ "value": "#000000",
92
+ },
93
+ "type": "font_color",
94
+ },
95
+ ],
96
+ "text": "lorem",
97
+ "type": "text",
98
+ },
99
+ Object {
100
+ "marks": Array [
101
+ Object {
102
+ "attrs": Object {
103
+ "value": "#FF0000",
104
+ },
105
+ "type": "font_color",
106
+ },
107
+ ],
108
+ "text": " ipsum",
109
+ "type": "text",
110
+ },
111
+ ],
112
+ "type": "paragraph",
113
+ },
114
+ ],
115
+ "type": "doc",
116
+ }
117
+ `;
118
+
28
119
  exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-color: green;\\" class=\\"zw-style\\">hello world</span></p>"`;
package/lib/extensions/__tests__/__snapshots__/FontFamily.test.js.snap CHANGED
@@ -155,4 +155,95 @@ Object {
155
155
  }
156
156
  `;
157
157
 
158
+ exports[`parsing html should get value from paragraph 1`] = `
159
+ Object {
160
+ "content": Array [
161
+ Object {
162
+ "content": Array [
163
+ Object {
164
+ "marks": Array [
165
+ Object {
166
+ "attrs": Object {
167
+ "value": "Lato",
168
+ },
169
+ "type": "font_family",
170
+ },
171
+ ],
172
+ "text": "test",
173
+ "type": "text",
174
+ },
175
+ ],
176
+ "type": "paragraph",
177
+ },
178
+ ],
179
+ "type": "doc",
180
+ }
181
+ `;
182
+
183
+ exports[`parsing html should get value from text 1`] = `
184
+ Object {
185
+ "content": Array [
186
+ Object {
187
+ "content": Array [
188
+ Object {
189
+ "marks": Array [
190
+ Object {
191
+ "attrs": Object {
192
+ "value": "Lato",
193
+ },
194
+ "type": "font_family",
195
+ },
196
+ ],
197
+ "text": "lorem",
198
+ "type": "text",
199
+ },
200
+ Object {
201
+ "text": " ipsum",
202
+ "type": "text",
203
+ },
204
+ ],
205
+ "type": "paragraph",
206
+ },
207
+ ],
208
+ "type": "doc",
209
+ }
210
+ `;
211
+
212
+ exports[`parsing html should merge paragraph and text settings 1`] = `
213
+ Object {
214
+ "content": Array [
215
+ Object {
216
+ "content": Array [
217
+ Object {
218
+ "marks": Array [
219
+ Object {
220
+ "attrs": Object {
221
+ "value": "Roboto",
222
+ },
223
+ "type": "font_family",
224
+ },
225
+ ],
226
+ "text": "lorem",
227
+ "type": "text",
228
+ },
229
+ Object {
230
+ "marks": Array [
231
+ Object {
232
+ "attrs": Object {
233
+ "value": "Lato",
234
+ },
235
+ "type": "font_family",
236
+ },
237
+ ],
238
+ "text": " ipsum",
239
+ "type": "text",
240
+ },
241
+ ],
242
+ "type": "paragraph",
243
+ },
244
+ ],
245
+ "type": "doc",
246
+ }
247
+ `;
248
+
158
249
  exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-family: Bungee;\\" class=\\"zw-style\\">hello world</span></p>"`;
package/lib/extensions/__tests__/__snapshots__/FontSize.test.js.snap CHANGED
@@ -135,6 +135,105 @@ Object {
135
135
  }
136
136
  `;
137
137
 
138
+ exports[`parsing html should get value from paragraph 1`] = `
139
+ Object {
140
+ "content": Array [
141
+ Object {
142
+ "content": Array [
143
+ Object {
144
+ "marks": Array [
145
+ Object {
146
+ "attrs": Object {
147
+ "desktop": "24",
148
+ "mobile": "24",
149
+ "tablet": "24",
150
+ },
151
+ "type": "font_size",
152
+ },
153
+ ],
154
+ "text": "test",
155
+ "type": "text",
156
+ },
157
+ ],
158
+ "type": "paragraph",
159
+ },
160
+ ],
161
+ "type": "doc",
162
+ }
163
+ `;
164
+
165
+ exports[`parsing html should get value from text 1`] = `
166
+ Object {
167
+ "content": Array [
168
+ Object {
169
+ "content": Array [
170
+ Object {
171
+ "marks": Array [
172
+ Object {
173
+ "attrs": Object {
174
+ "desktop": "24",
175
+ "mobile": "24",
176
+ "tablet": "24",
177
+ },
178
+ "type": "font_size",
179
+ },
180
+ ],
181
+ "text": "lorem",
182
+ "type": "text",
183
+ },
184
+ Object {
185
+ "text": " ipsum",
186
+ "type": "text",
187
+ },
188
+ ],
189
+ "type": "paragraph",
190
+ },
191
+ ],
192
+ "type": "doc",
193
+ }
194
+ `;
195
+
196
+ exports[`parsing html should merge paragraph and text settings 1`] = `
197
+ Object {
198
+ "content": Array [
199
+ Object {
200
+ "content": Array [
201
+ Object {
202
+ "marks": Array [
203
+ Object {
204
+ "attrs": Object {
205
+ "desktop": "20",
206
+ "mobile": "20",
207
+ "tablet": "20",
208
+ },
209
+ "type": "font_size",
210
+ },
211
+ ],
212
+ "text": "lorem",
213
+ "type": "text",
214
+ },
215
+ Object {
216
+ "marks": Array [
217
+ Object {
218
+ "attrs": Object {
219
+ "desktop": "24",
220
+ "mobile": "24",
221
+ "tablet": "24",
222
+ },
223
+ "type": "font_size",
224
+ },
225
+ ],
226
+ "text": " ipsum",
227
+ "type": "text",
228
+ },
229
+ ],
230
+ "type": "paragraph",
231
+ },
232
+ ],
233
+ "type": "doc",
234
+ }
235
+ `;
236
+
138
237
  exports[`rendering should render all devices 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-mobile-font-size: 12px; --zw-tablet-font-size: 14px; --zw-desktop-font-size: 16px;\\" class=\\"zw-style\\">hello world</span></p>"`;
139
238
 
140
239
  exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-desktop-font-size: 14px;\\" class=\\"zw-style\\">hello world</span></p>"`;
package/lib/extensions/__tests__/__snapshots__/FontStyle.test.js.snap CHANGED
@@ -84,4 +84,124 @@ Object {
84
84
  }
85
85
  `;
86
86
 
87
+ exports[`parsing html should get value from i tag 1`] = `
88
+ Object {
89
+ "content": Array [
90
+ Object {
91
+ "content": Array [
92
+ Object {
93
+ "marks": Array [
94
+ Object {
95
+ "attrs": Object {
96
+ "italic": true,
97
+ },
98
+ "type": "font_style",
99
+ },
100
+ ],
101
+ "text": "lorem",
102
+ "type": "text",
103
+ },
104
+ Object {
105
+ "text": " ipsum",
106
+ "type": "text",
107
+ },
108
+ ],
109
+ "type": "paragraph",
110
+ },
111
+ ],
112
+ "type": "doc",
113
+ }
114
+ `;
115
+
116
+ exports[`parsing html should get value from paragraph 1`] = `
117
+ Object {
118
+ "content": Array [
119
+ Object {
120
+ "content": Array [
121
+ Object {
122
+ "marks": Array [
123
+ Object {
124
+ "attrs": Object {
125
+ "italic": true,
126
+ },
127
+ "type": "font_style",
128
+ },
129
+ ],
130
+ "text": "test",
131
+ "type": "text",
132
+ },
133
+ ],
134
+ "type": "paragraph",
135
+ },
136
+ ],
137
+ "type": "doc",
138
+ }
139
+ `;
140
+
141
+ exports[`parsing html should get value from text 1`] = `
142
+ Object {
143
+ "content": Array [
144
+ Object {
145
+ "content": Array [
146
+ Object {
147
+ "marks": Array [
148
+ Object {
149
+ "attrs": Object {
150
+ "italic": true,
151
+ },
152
+ "type": "font_style",
153
+ },
154
+ ],
155
+ "text": "lorem",
156
+ "type": "text",
157
+ },
158
+ Object {
159
+ "text": " ipsum",
160
+ "type": "text",
161
+ },
162
+ ],
163
+ "type": "paragraph",
164
+ },
165
+ ],
166
+ "type": "doc",
167
+ }
168
+ `;
169
+
170
+ exports[`parsing html should merge paragraph and text settings 1`] = `
171
+ Object {
172
+ "content": Array [
173
+ Object {
174
+ "content": Array [
175
+ Object {
176
+ "marks": Array [
177
+ Object {
178
+ "attrs": Object {
179
+ "italic": false,
180
+ },
181
+ "type": "font_style",
182
+ },
183
+ ],
184
+ "text": "lorem",
185
+ "type": "text",
186
+ },
187
+ Object {
188
+ "marks": Array [
189
+ Object {
190
+ "attrs": Object {
191
+ "italic": true,
192
+ },
193
+ "type": "font_style",
194
+ },
195
+ ],
196
+ "text": " ipsum",
197
+ "type": "text",
198
+ },
199
+ ],
200
+ "type": "paragraph",
201
+ },
202
+ ],
203
+ "type": "doc",
204
+ }
205
+ `;
206
+
87
207
  exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-style: italic;\\" class=\\"zw-style\\">hello world</span></p>"`;
package/lib/extensions/__tests__/__snapshots__/FontWeight.test.js.snap CHANGED
@@ -137,4 +137,153 @@ Object {
137
137
  }
138
138
  `;
139
139
 
140
+ exports[`parsing html should get value from b tag 1`] = `
141
+ Object {
142
+ "content": Array [
143
+ Object {
144
+ "content": Array [
145
+ Object {
146
+ "marks": Array [
147
+ Object {
148
+ "attrs": Object {
149
+ "value": "700",
150
+ },
151
+ "type": "font_weight",
152
+ },
153
+ ],
154
+ "text": "lorem",
155
+ "type": "text",
156
+ },
157
+ Object {
158
+ "text": " ipsum",
159
+ "type": "text",
160
+ },
161
+ ],
162
+ "type": "paragraph",
163
+ },
164
+ ],
165
+ "type": "doc",
166
+ }
167
+ `;
168
+
169
+ exports[`parsing html should get value from paragraph 1`] = `
170
+ Object {
171
+ "content": Array [
172
+ Object {
173
+ "content": Array [
174
+ Object {
175
+ "marks": Array [
176
+ Object {
177
+ "attrs": Object {
178
+ "value": "700",
179
+ },
180
+ "type": "font_weight",
181
+ },
182
+ ],
183
+ "text": "test",
184
+ "type": "text",
185
+ },
186
+ ],
187
+ "type": "paragraph",
188
+ },
189
+ ],
190
+ "type": "doc",
191
+ }
192
+ `;
193
+
194
+ exports[`parsing html should get value from strong tag 1`] = `
195
+ Object {
196
+ "content": Array [
197
+ Object {
198
+ "content": Array [
199
+ Object {
200
+ "marks": Array [
201
+ Object {
202
+ "attrs": Object {
203
+ "value": "700",
204
+ },
205
+ "type": "font_weight",
206
+ },
207
+ ],
208
+ "text": "lorem",
209
+ "type": "text",
210
+ },
211
+ Object {
212
+ "text": " ipsum",
213
+ "type": "text",
214
+ },
215
+ ],
216
+ "type": "paragraph",
217
+ },
218
+ ],
219
+ "type": "doc",
220
+ }
221
+ `;
222
+
223
+ exports[`parsing html should get value from text 1`] = `
224
+ Object {
225
+ "content": Array [
226
+ Object {
227
+ "content": Array [
228
+ Object {
229
+ "marks": Array [
230
+ Object {
231
+ "attrs": Object {
232
+ "value": "700",
233
+ },
234
+ "type": "font_weight",
235
+ },
236
+ ],
237
+ "text": "lorem",
238
+ "type": "text",
239
+ },
240
+ Object {
241
+ "text": " ipsum",
242
+ "type": "text",
243
+ },
244
+ ],
245
+ "type": "paragraph",
246
+ },
247
+ ],
248
+ "type": "doc",
249
+ }
250
+ `;
251
+
252
+ exports[`parsing html should merge paragraph and text settings 1`] = `
253
+ Object {
254
+ "content": Array [
255
+ Object {
256
+ "content": Array [
257
+ Object {
258
+ "marks": Array [
259
+ Object {
260
+ "attrs": Object {
261
+ "value": "700",
262
+ },
263
+ "type": "font_weight",
264
+ },
265
+ ],
266
+ "text": "lorem",
267
+ "type": "text",
268
+ },
269
+ Object {
270
+ "marks": Array [
271
+ Object {
272
+ "attrs": Object {
273
+ "value": "500",
274
+ },
275
+ "type": "font_weight",
276
+ },
277
+ ],
278
+ "text": " ipsum",
279
+ "type": "text",
280
+ },
281
+ ],
282
+ "type": "paragraph",
283
+ },
284
+ ],
285
+ "type": "doc",
286
+ }
287
+ `;
288
+
140
289
  exports[`rendering should render html 1`] = `"<p class=\\"zw-style\\"><span style=\\"--zw-font-weight: 700;\\" class=\\"zw-style\\">hello world</span></p>"`;
package/lib/extensions/__tests__/__snapshots__/LineHeight.test.js.snap CHANGED
@@ -24,6 +24,98 @@ Object {
24
24
  }
25
25
  `;
26
26
 
27
+ exports[`parsing html should get value from text in px units with font size 1`] = `
28
+ Object {
29
+ "content": Array [
30
+ Object {
31
+ "attrs": Object {
32
+ "line_height": Object {
33
+ "desktop": "1.20",
34
+ "mobile": "1.20",
35
+ "tablet": "1.20",
36
+ },
37
+ },
38
+ "content": Array [
39
+ Object {
40
+ "text": "test",
41
+ "type": "text",
42
+ },
43
+ ],
44
+ "type": "paragraph",
45
+ },
46
+ ],
47
+ "type": "doc",
48
+ }
49
+ `;
50
+
51
+ exports[`parsing html should get value from text in px units with no font size 1`] = `
52
+ Object {
53
+ "content": Array [
54
+ Object {
55
+ "attrs": Object {
56
+ "line_height": Object {
57
+ "desktop": "1.20",
58
+ "mobile": "1.20",
59
+ "tablet": "1.20",
60
+ },
61
+ },
62
+ "content": Array [
63
+ Object {
64
+ "text": "test",
65
+ "type": "text",
66
+ },
67
+ ],
68
+ "type": "paragraph",
69
+ },
70
+ ],
71
+ "type": "doc",
72
+ }
73
+ `;
74
+
75
+ exports[`parsing html should get value from text in relative units 1`] = `
76
+ Object {
77
+ "content": Array [
78
+ Object {
79
+ "attrs": Object {
80
+ "line_height": Object {
81
+ "desktop": "1.2",
82
+ "mobile": "1.2",
83
+ "tablet": "1.2",
84
+ },
85
+ },
86
+ "content": Array [
87
+ Object {
88
+ "text": "test",
89
+ "type": "text",
90
+ },
91
+ ],
92
+ "type": "paragraph",
93
+ },
94
+ ],
95
+ "type": "doc",
96
+ }
97
+ `;
98
+
99
+ exports[`parsing html should set null if no alignment 1`] = `
100
+ Object {
101
+ "content": Array [
102
+ Object {
103
+ "attrs": Object {
104
+ "line_height": null,
105
+ },
106
+ "content": Array [
107
+ Object {
108
+ "text": "test",
109
+ "type": "text",
110
+ },
111
+ ],
112
+ "type": "paragraph",
113
+ },
114
+ ],
115
+ "type": "doc",
116
+ }
117
+ `;
118
+
27
119
  exports[`rendering should render all devices 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-mobile-line-height: 1.21; --zw-tablet-line-height: 1.4; --zw-desktop-line-height: 1.6;\\">hello world</p>"`;
28
120
 
29
121
  exports[`rendering should render only desktop 1`] = `"<p class=\\"zw-style\\" style=\\"--zw-desktop-line-height: 1.3;\\">hello world</p>"`;