@zipify/wysiwyg 1.0.0-dev.1 → 1.0.0-dev.10

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 (98) hide show
  1. package/.env.example +1 -0
  2. package/.eslintignore +1 -0
  3. package/.release-it.json +9 -0
  4. package/.stylelintignore +1 -0
  5. package/README.md +131 -11
  6. package/config/jest/setupTests.js +7 -1
  7. package/config/webpack/example.config.js +2 -0
  8. package/config/webpack/lib.config.js +48 -0
  9. package/config/webpack/loaders/style-loader.js +3 -1
  10. package/config/webpack/loaders/svg-loader.js +1 -1
  11. package/dist/wysiwyg.css +837 -0
  12. package/dist/wysiwyg.js +38655 -0
  13. package/example/ExampleApp.vue +47 -32
  14. package/example/example.js +26 -0
  15. package/example/presets.js +2 -0
  16. package/lib/Wysiwyg.vue +17 -17
  17. package/lib/assets/icons/alignment-center.svg +3 -0
  18. package/lib/assets/icons/alignment-justify.svg +3 -0
  19. package/lib/assets/icons/alignment-left.svg +3 -0
  20. package/lib/assets/icons/alignment-right.svg +3 -0
  21. package/lib/assets/icons/arrow.svg +3 -0
  22. package/lib/assets/icons/background-color.svg +3 -0
  23. package/lib/assets/icons/case-style.svg +3 -0
  24. package/lib/assets/icons/font-color.svg +5 -0
  25. package/lib/assets/icons/italic.svg +3 -0
  26. package/lib/assets/icons/line-height.svg +3 -0
  27. package/lib/assets/icons/list-circle.svg +3 -0
  28. package/lib/assets/icons/list-decimal.svg +3 -0
  29. package/lib/assets/icons/list-disc.svg +3 -0
  30. package/lib/assets/icons/list-latin.svg +3 -0
  31. package/lib/assets/icons/list-roman.svg +3 -0
  32. package/lib/assets/icons/list-square.svg +3 -0
  33. package/lib/assets/icons/remove-format.svg +3 -0
  34. package/lib/assets/icons/reset-styles.svg +3 -0
  35. package/lib/assets/icons/strike-through.svg +3 -0
  36. package/lib/assets/icons/superscript.svg +3 -0
  37. package/lib/assets/icons/underline.svg +3 -0
  38. package/lib/components/base/Icon.vue +17 -9
  39. package/lib/components/base/__tests__/Icon.test.js +6 -13
  40. package/lib/components/toolbar/Toolbar.vue +1 -1
  41. package/lib/composables/__tests__/useEditor.test.js +12 -3
  42. package/lib/composables/useEditor.js +13 -7
  43. package/lib/composables/useToolbar.js +7 -18
  44. package/lib/extensions/Alignment.js +6 -0
  45. package/lib/extensions/BackgroundColor.js +8 -1
  46. package/lib/extensions/FontColor.js +8 -1
  47. package/lib/extensions/FontFamily.js +7 -0
  48. package/lib/extensions/FontSize.js +12 -0
  49. package/lib/extensions/FontStyle.js +11 -0
  50. package/lib/extensions/FontWeight.js +25 -1
  51. package/lib/extensions/LineHeight.js +17 -0
  52. package/lib/extensions/StylePreset.js +30 -3
  53. package/lib/extensions/TextDecoration.js +11 -0
  54. package/lib/extensions/__tests__/Alignment.test.js +22 -1
  55. package/lib/extensions/__tests__/BackgroundColor.test.js +30 -1
  56. package/lib/extensions/__tests__/CaseStyle.test.js +4 -1
  57. package/lib/extensions/__tests__/FontColor.test.js +30 -1
  58. package/lib/extensions/__tests__/FontFamily.test.js +30 -1
  59. package/lib/extensions/__tests__/FontSize.test.js +30 -1
  60. package/lib/extensions/__tests__/FontStyle.test.js +38 -1
  61. package/lib/extensions/__tests__/FontWeight.test.js +58 -1
  62. package/lib/extensions/__tests__/LineHeight.test.js +41 -1
  63. package/lib/extensions/__tests__/StylePreset.test.js +76 -1
  64. package/lib/extensions/__tests__/TextDecoration.test.js +63 -1
  65. package/lib/extensions/__tests__/__snapshots__/Alignment.test.js.snap +44 -0
  66. package/lib/extensions/__tests__/__snapshots__/BackgroundColor.test.js.snap +91 -0
  67. package/lib/extensions/__tests__/__snapshots__/FontColor.test.js.snap +91 -0
  68. package/lib/extensions/__tests__/__snapshots__/FontFamily.test.js.snap +91 -0
  69. package/lib/extensions/__tests__/__snapshots__/FontSize.test.js.snap +99 -0
  70. package/lib/extensions/__tests__/__snapshots__/FontStyle.test.js.snap +120 -0
  71. package/lib/extensions/__tests__/__snapshots__/FontWeight.test.js.snap +149 -0
  72. package/lib/extensions/__tests__/__snapshots__/LineHeight.test.js.snap +92 -0
  73. package/lib/extensions/__tests__/__snapshots__/StylePreset.test.js.snap +167 -2
  74. package/lib/extensions/__tests__/__snapshots__/TextDecoration.test.js.snap +207 -0
  75. package/lib/extensions/core/__tests__/NodeProcessor.test.js +4 -1
  76. package/lib/extensions/core/__tests__/SelectionProcessor.test.js +9 -4
  77. package/lib/extensions/core/__tests__/TextProcessor.test.js +4 -1
  78. package/lib/extensions/index.js +1 -0
  79. package/lib/extensions/list/List.js +34 -0
  80. package/lib/extensions/list/__tests__/List.test.js +115 -3
  81. package/lib/extensions/list/__tests__/__snapshots__/List.test.js.snap +457 -6
  82. package/lib/services/ContentNormalizer.js +113 -0
  83. package/lib/services/Storage.js +1 -13
  84. package/lib/services/__tests__/ContentNormalizer.test.js +41 -0
  85. package/lib/services/__tests__/FavoriteColors.test.js +20 -0
  86. package/lib/services/__tests__/JsonSerializer.test.js +23 -0
  87. package/lib/services/__tests__/Storage.test.js +79 -0
  88. package/lib/services/index.js +1 -0
  89. package/lib/utils/__tests__/convertColor.test.js +19 -0
  90. package/lib/utils/__tests__/createKeyboardShortcut.test.js +25 -0
  91. package/lib/utils/__tests__/renderInlineSetting.test.js +26 -0
  92. package/lib/utils/convertColor.js +7 -0
  93. package/lib/utils/importIcon.js +12 -0
  94. package/lib/utils/index.js +2 -0
  95. package/lib/utils/renderInlineSetting.js +1 -1
  96. package/package.json +10 -6
  97. package/lib/assets/icons.svg +0 -69
  98. package/lib/composables/__tests__/useToolbar.test.js +0 -56
@@ -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>"`;
@@ -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>"`;
@@ -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>"`;
@@ -241,6 +241,171 @@ Object {
241
241
  }
242
242
  `;
243
243
 
244
+ exports[`parsing html should get by fallback class 1`] = `
245
+ Object {
246
+ "content": Array [
247
+ Object {
248
+ "attrs": Object {
249
+ "alignment": null,
250
+ "preset": Object {
251
+ "id": "regular-2",
252
+ },
253
+ },
254
+ "content": Array [
255
+ Object {
256
+ "text": "lorem ipsum",
257
+ "type": "text",
258
+ },
259
+ ],
260
+ "type": "paragraph",
261
+ },
262
+ ],
263
+ "type": "doc",
264
+ }
265
+ `;
266
+
267
+ exports[`parsing html should get by heading tag 1`] = `
268
+ Object {
269
+ "content": Array [
270
+ Object {
271
+ "attrs": Object {
272
+ "alignment": null,
273
+ "level": 3,
274
+ "preset": Object {
275
+ "id": "h3",
276
+ },
277
+ },
278
+ "content": Array [
279
+ Object {
280
+ "text": "lorem ipsum",
281
+ "type": "text",
282
+ },
283
+ ],
284
+ "type": "heading",
285
+ },
286
+ ],
287
+ "type": "doc",
288
+ }
289
+ `;
290
+
291
+ exports[`parsing html should get by preset class 1`] = `
292
+ Object {
293
+ "content": Array [
294
+ Object {
295
+ "attrs": Object {
296
+ "alignment": null,
297
+ "preset": Object {
298
+ "id": "regular-2",
299
+ },
300
+ },
301
+ "content": Array [
302
+ Object {
303
+ "text": "lorem ipsum",
304
+ "type": "text",
305
+ },
306
+ ],
307
+ "type": "paragraph",
308
+ },
309
+ ],
310
+ "type": "doc",
311
+ }
312
+ `;
313
+
314
+ exports[`parsing html should set default preset to unstyled paragraph 1`] = `
315
+ Object {
316
+ "content": Array [
317
+ Object {
318
+ "attrs": Object {
319
+ "alignment": null,
320
+ "preset": Object {
321
+ "id": "regular-1",
322
+ },
323
+ },
324
+ "content": Array [
325
+ Object {
326
+ "text": "lorem ipsum",
327
+ "type": "text",
328
+ },
329
+ ],
330
+ "type": "paragraph",
331
+ },
332
+ ],
333
+ "type": "doc",
334
+ }
335
+ `;
336
+
337
+ exports[`parsing html should set null to list item 1`] = `
338
+ Object {
339
+ "content": Array [
340
+ Object {
341
+ "attrs": Object {
342
+ "bullet": Object {
343
+ "type": "disc",
344
+ },
345
+ },
346
+ "content": Array [
347
+ Object {
348
+ "content": Array [
349
+ Object {
350
+ "attrs": Object {
351
+ "alignment": null,
352
+ "preset": null,
353
+ },
354
+ "content": Array [
355
+ Object {
356
+ "text": "lorem ipsum",
357
+ "type": "text",
358
+ },
359
+ ],
360
+ "type": "paragraph",
361
+ },
362
+ ],
363
+ "type": "listItem",
364
+ },
365
+ ],
366
+ "type": "list",
367
+ },
368
+ ],
369
+ "type": "doc",
370
+ }
371
+ `;
372
+
373
+ exports[`parsing html should set null to list item with preset 1`] = `
374
+ Object {
375
+ "content": Array [
376
+ Object {
377
+ "attrs": Object {
378
+ "bullet": Object {
379
+ "type": "disc",
380
+ },
381
+ },
382
+ "content": Array [
383
+ Object {
384
+ "content": Array [
385
+ Object {
386
+ "attrs": Object {
387
+ "alignment": null,
388
+ "preset": null,
389
+ },
390
+ "content": Array [
391
+ Object {
392
+ "text": "lorem ipsum",
393
+ "type": "text",
394
+ },
395
+ ],
396
+ "type": "paragraph",
397
+ },
398
+ ],
399
+ "type": "listItem",
400
+ },
401
+ ],
402
+ "type": "list",
403
+ },
404
+ ],
405
+ "type": "doc",
406
+ }
407
+ `;
408
+
244
409
  exports[`remove preset customization should remove all attributes 1`] = `
245
410
  Object {
246
411
  "content": Array [
@@ -305,6 +470,6 @@ Object {
305
470
 
306
471
  exports[`render preset styles should render node without preset 1`] = `"<p class=\\"zw-style\\">test</p>"`;
307
472
 
308
- exports[`render preset styles should render preset class 1`] = `"<p class=\\"zw-style zw-preset--regular-1\\">test</p>"`;
473
+ exports[`render preset styles should render preset class 1`] = `"<p class=\\"zw-style zw ts-regular-1\\">test</p>"`;
309
474
 
310
- exports[`render preset styles should render styles 1`] = `" .zw-preset--regular-1 { --zw-preset-font-weight: var(--common-regular-1-font-weight, inherit); --zw-preset-mobile-font-size: var(--mobile-regular-1-font-size, inherit); --zw-preset-tablet-font-size: var(--tablet-regular-1-font-size, inherit); --zw-preset-desktop-font-size: var(--desktop-regular-1-font-size, inherit); }"`;
475
+ exports[`render preset styles should render styles 1`] = `" .zw.ts-regular-1 { --zw-preset-font-weight: var(--common-regular-1-font-weight, inherit); --zw-preset-mobile-font-size: var(--mobile-regular-1-font-size, inherit); --zw-preset-tablet-font-size: var(--tablet-regular-1-font-size, inherit); --zw-preset-desktop-font-size: var(--desktop-regular-1-font-size, inherit); }"`;