@squiz/formatted-text-editor 1.21.1-alpha.7 → 1.22.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 (121) hide show
  1. package/demo/App.tsx +52 -10
  2. package/demo/index.scss +11 -10
  3. package/jest.config.ts +0 -2
  4. package/lib/Editor/Editor.js +45 -7
  5. package/lib/Editor/EditorContext.d.ts +15 -0
  6. package/lib/Editor/EditorContext.js +15 -0
  7. package/lib/EditorToolbar/FloatingToolbar.js +11 -5
  8. package/lib/EditorToolbar/Tools/Image/Form/ImageForm.d.ts +9 -8
  9. package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js +91 -23
  10. package/lib/EditorToolbar/Tools/Image/ImageButton.d.ts +4 -1
  11. package/lib/EditorToolbar/Tools/Image/ImageButton.js +22 -14
  12. package/lib/EditorToolbar/Tools/Image/ImageModal.js +9 -5
  13. package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts +14 -5
  14. package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js +66 -14
  15. package/lib/EditorToolbar/Tools/Link/LinkButton.js +21 -13
  16. package/lib/EditorToolbar/Tools/Link/LinkModal.js +12 -5
  17. package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js +1 -8
  18. package/lib/Extensions/CommandsExtension/CommandsExtension.d.ts +20 -0
  19. package/lib/Extensions/CommandsExtension/CommandsExtension.js +52 -0
  20. package/lib/Extensions/Extensions.d.ts +12 -5
  21. package/lib/Extensions/Extensions.js +42 -20
  22. package/lib/Extensions/ImageExtension/AssetImageExtension.d.ts +17 -0
  23. package/lib/Extensions/ImageExtension/AssetImageExtension.js +92 -0
  24. package/lib/Extensions/ImageExtension/ImageExtension.d.ts +4 -0
  25. package/lib/Extensions/ImageExtension/ImageExtension.js +11 -0
  26. package/lib/Extensions/LinkExtension/AssetLinkExtension.d.ts +26 -0
  27. package/lib/Extensions/LinkExtension/AssetLinkExtension.js +102 -0
  28. package/lib/Extensions/LinkExtension/LinkExtension.d.ts +19 -12
  29. package/lib/Extensions/LinkExtension/LinkExtension.js +56 -66
  30. package/lib/Extensions/LinkExtension/common.d.ts +7 -0
  31. package/lib/Extensions/LinkExtension/common.js +14 -0
  32. package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts +1 -1
  33. package/lib/Extensions/PreformattedExtension/PreformattedExtension.js +6 -2
  34. package/lib/hooks/index.d.ts +1 -0
  35. package/lib/hooks/index.js +1 -0
  36. package/lib/hooks/useExpandedSelection.d.ts +23 -0
  37. package/lib/hooks/useExpandedSelection.js +37 -0
  38. package/lib/index.css +58 -23
  39. package/lib/index.d.ts +5 -2
  40. package/lib/index.js +9 -3
  41. package/lib/types.d.ts +3 -0
  42. package/lib/types.js +2 -0
  43. package/lib/ui/Button/Button.d.ts +2 -1
  44. package/lib/ui/Button/Button.js +4 -5
  45. package/lib/ui/Fields/Input/Input.d.ts +1 -0
  46. package/lib/ui/Fields/Input/Input.js +9 -3
  47. package/lib/ui/Modal/Modal.js +5 -3
  48. package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.d.ts +9 -0
  49. package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js +174 -0
  50. package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.d.ts +9 -0
  51. package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js +138 -0
  52. package/lib/utils/resolveMatrixAssetUrl.d.ts +1 -0
  53. package/lib/utils/resolveMatrixAssetUrl.js +10 -0
  54. package/lib/utils/undefinedIfEmpty.d.ts +1 -0
  55. package/lib/utils/undefinedIfEmpty.js +7 -0
  56. package/package.json +10 -4
  57. package/src/Editor/Editor.spec.tsx +78 -18
  58. package/src/Editor/Editor.tsx +28 -9
  59. package/src/Editor/EditorContext.spec.tsx +26 -0
  60. package/src/Editor/EditorContext.ts +26 -0
  61. package/src/Editor/_editor.scss +20 -4
  62. package/src/EditorToolbar/FloatingToolbar.spec.tsx +26 -7
  63. package/src/EditorToolbar/FloatingToolbar.tsx +15 -6
  64. package/src/EditorToolbar/Tools/Image/Form/ImageForm.spec.tsx +81 -6
  65. package/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx +167 -47
  66. package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx +250 -2
  67. package/src/EditorToolbar/Tools/Image/ImageButton.tsx +29 -16
  68. package/src/EditorToolbar/Tools/Image/ImageModal.spec.tsx +59 -20
  69. package/src/EditorToolbar/Tools/Image/ImageModal.tsx +12 -10
  70. package/src/EditorToolbar/Tools/Link/Form/LinkForm.spec.tsx +37 -9
  71. package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx +96 -26
  72. package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx +137 -26
  73. package/src/EditorToolbar/Tools/Link/LinkButton.tsx +28 -19
  74. package/src/EditorToolbar/Tools/Link/LinkModal.tsx +13 -6
  75. package/src/EditorToolbar/Tools/Link/RemoveLinkButton.spec.tsx +27 -26
  76. package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx +2 -10
  77. package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx +22 -1
  78. package/src/EditorToolbar/_floating-toolbar.scss +4 -5
  79. package/src/EditorToolbar/_toolbar.scss +1 -1
  80. package/src/Extensions/CommandsExtension/CommandsExtension.ts +54 -0
  81. package/src/Extensions/Extensions.ts +42 -18
  82. package/src/Extensions/ImageExtension/AssetImageExtension.spec.ts +76 -0
  83. package/src/Extensions/ImageExtension/AssetImageExtension.ts +111 -0
  84. package/src/Extensions/ImageExtension/ImageExtension.ts +17 -1
  85. package/src/Extensions/LinkExtension/AssetLinkExtension.spec.ts +104 -0
  86. package/src/Extensions/LinkExtension/AssetLinkExtension.ts +128 -0
  87. package/src/Extensions/LinkExtension/LinkExtension.spec.ts +68 -0
  88. package/src/Extensions/LinkExtension/LinkExtension.ts +71 -85
  89. package/src/Extensions/LinkExtension/common.ts +10 -0
  90. package/src/Extensions/PreformattedExtension/PreformattedExtension.spec.ts +41 -0
  91. package/src/Extensions/PreformattedExtension/PreformattedExtension.ts +6 -2
  92. package/src/hooks/index.ts +1 -0
  93. package/src/hooks/useExpandedSelection.ts +44 -0
  94. package/src/index.ts +5 -2
  95. package/src/types.ts +5 -0
  96. package/src/ui/Button/Button.tsx +10 -6
  97. package/src/ui/Button/_button.scss +1 -1
  98. package/src/ui/Fields/Input/Input.spec.tsx +7 -1
  99. package/src/ui/Fields/Input/Input.tsx +23 -4
  100. package/src/ui/Modal/Modal.spec.tsx +15 -0
  101. package/src/ui/Modal/Modal.tsx +8 -4
  102. package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss +1 -1
  103. package/src/ui/_forms.scss +14 -0
  104. package/src/utils/converters/mocks/squizNodeJson.mock.ts +271 -0
  105. package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts +480 -0
  106. package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts +212 -0
  107. package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts +341 -0
  108. package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts +159 -0
  109. package/src/utils/resolveMatrixAssetUrl.spec.ts +26 -0
  110. package/src/utils/resolveMatrixAssetUrl.ts +7 -0
  111. package/src/utils/undefinedIfEmpty.spec.ts +12 -0
  112. package/src/utils/undefinedIfEmpty.ts +3 -0
  113. package/tailwind.config.cjs +3 -0
  114. package/tests/renderWithEditor.tsx +28 -15
  115. package/tsconfig.json +1 -1
  116. package/lib/FormattedTextEditor.d.ts +0 -2
  117. package/lib/FormattedTextEditor.js +0 -7
  118. package/src/Editor/Editor.mock.tsx +0 -43
  119. package/src/FormattedTextEditor.spec.tsx +0 -10
  120. package/src/FormattedTextEditor.tsx +0 -3
  121. /package/tests/{select.tsx → select.ts} +0 -0
@@ -0,0 +1,271 @@
1
+ import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
2
+ import { RemirrorJSON } from '@remirror/core';
3
+
4
+ export const mockSquizNodeJson: FormattedTextModels.v1.FormattedText = [
5
+ {
6
+ children: [
7
+ {
8
+ type: 'text',
9
+ value: 'Hello ',
10
+ },
11
+ {
12
+ children: [
13
+ {
14
+ type: 'text',
15
+ value: 'Mr Bean',
16
+ },
17
+ ],
18
+ attributes: {
19
+ href: 'https://www.google.com',
20
+ },
21
+ font: {
22
+ bold: true,
23
+ },
24
+ type: 'tag',
25
+ tag: 'a',
26
+ },
27
+ {
28
+ type: 'text',
29
+ value: ', nice to ',
30
+ },
31
+ {
32
+ children: [
33
+ {
34
+ type: 'text',
35
+ value: 'meet you',
36
+ },
37
+ ],
38
+ attributes: {
39
+ href: 'https://www.google.com',
40
+ },
41
+ type: 'tag',
42
+ tag: 'a',
43
+ },
44
+ {
45
+ type: 'text',
46
+ value: '.',
47
+ },
48
+ {
49
+ children: [],
50
+ attributes: {
51
+ alt: 'Test',
52
+ height: '150',
53
+ width: '200',
54
+ src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
55
+ title: '',
56
+ resizable: 'false',
57
+ },
58
+ type: 'tag',
59
+ tag: 'img',
60
+ },
61
+ ],
62
+ type: 'tag',
63
+ tag: 'p',
64
+ },
65
+ ];
66
+
67
+ export const mockSquizNodeTextJson: FormattedTextModels.v1.FormattedText = [
68
+ {
69
+ value: 'Hello world!',
70
+ type: 'text',
71
+ },
72
+ {
73
+ value: 'Another one...',
74
+ type: 'text',
75
+ },
76
+ ];
77
+
78
+ type NodeExample = {
79
+ description: string;
80
+ remirrorNode: RemirrorJSON;
81
+ squizNode: FormattedTextModels.v1.FormattedText;
82
+ };
83
+
84
+ export const sharedNodeExamples: NodeExample[] = [
85
+ {
86
+ description: 'Asset link',
87
+ remirrorNode: {
88
+ type: 'text',
89
+ text: 'Hello',
90
+ marks: [
91
+ {
92
+ type: 'assetLink',
93
+ attrs: {
94
+ target: '_blank',
95
+ matrixAssetId: '123',
96
+ matrixDomain: 'https://my-matrix.squiz.net',
97
+ matrixIdentifier: 'matrix-api-identifier',
98
+ },
99
+ },
100
+ ],
101
+ },
102
+ squizNode: [
103
+ {
104
+ type: 'link-to-matrix-asset',
105
+ target: '_blank',
106
+ matrixAssetId: '123',
107
+ matrixDomain: 'https://my-matrix.squiz.net',
108
+ matrixIdentifier: 'matrix-api-identifier',
109
+ children: [{ type: 'text', value: 'Hello' }],
110
+ },
111
+ ],
112
+ },
113
+ {
114
+ description: 'Asset link with formatting applied inside of the link',
115
+ remirrorNode: {
116
+ type: 'text',
117
+ text: 'Hello',
118
+ marks: [
119
+ { type: 'bold' },
120
+ {
121
+ type: 'assetLink',
122
+ attrs: {
123
+ target: '_blank',
124
+ matrixAssetId: '123',
125
+ matrixDomain: 'https://my-matrix.squiz.net',
126
+ matrixIdentifier: 'matrix-api-identifier',
127
+ },
128
+ },
129
+ ],
130
+ },
131
+ squizNode: [
132
+ {
133
+ type: 'link-to-matrix-asset',
134
+ target: '_blank',
135
+ matrixAssetId: '123',
136
+ matrixDomain: 'https://my-matrix.squiz.net',
137
+ matrixIdentifier: 'matrix-api-identifier',
138
+ children: [
139
+ {
140
+ type: 'tag',
141
+ tag: 'span',
142
+ font: { bold: true },
143
+ children: [{ type: 'text', value: 'Hello' }],
144
+ },
145
+ ],
146
+ },
147
+ ],
148
+ },
149
+ {
150
+ description: 'Asset image',
151
+ remirrorNode: {
152
+ type: 'assetImage',
153
+ attrs: {
154
+ matrixAssetId: '123',
155
+ matrixDomain: 'https://my-matrix.squiz.net',
156
+ matrixIdentifier: 'matrix-api-identifier',
157
+ },
158
+ },
159
+ squizNode: [
160
+ {
161
+ type: 'matrix-image',
162
+ matrixAssetId: '123',
163
+ matrixDomain: 'https://my-matrix.squiz.net',
164
+ matrixIdentifier: 'matrix-api-identifier',
165
+ },
166
+ ],
167
+ },
168
+ ];
169
+
170
+ export const squizOnlyNodeExamples: NodeExample[] = [
171
+ {
172
+ description: 'Asset link with formatting applied inside, outside and with multiple levels of nesting',
173
+ squizNode: [
174
+ {
175
+ type: 'tag',
176
+ tag: 'span',
177
+ font: { bold: true },
178
+ children: [
179
+ {
180
+ type: 'link-to-matrix-asset',
181
+ target: '_blank',
182
+ matrixAssetId: '123',
183
+ matrixDomain: 'https://my-matrix.squiz.net',
184
+ matrixIdentifier: 'matrix-api-identifier',
185
+ children: [
186
+ {
187
+ type: 'tag',
188
+ tag: 'span',
189
+ font: { italics: true },
190
+ children: [
191
+ {
192
+ type: 'tag',
193
+ tag: 'span',
194
+ font: { underline: true },
195
+ children: [{ type: 'text', value: 'Hello' }],
196
+ },
197
+ ],
198
+ },
199
+ ],
200
+ },
201
+ ],
202
+ },
203
+ ],
204
+ remirrorNode: {
205
+ // reverse operation covered by "Asset link with formatting applied inside of the link".
206
+ type: 'text',
207
+ text: 'Hello',
208
+ marks: [
209
+ { type: 'underline' },
210
+ { type: 'italic' },
211
+ {
212
+ type: 'assetLink',
213
+ attrs: {
214
+ target: '_blank',
215
+ matrixAssetId: '123',
216
+ matrixDomain: 'https://my-matrix.squiz.net',
217
+ matrixIdentifier: 'matrix-api-identifier',
218
+ },
219
+ },
220
+ { type: 'bold' },
221
+ ],
222
+ },
223
+ },
224
+ {
225
+ description: 'Asset link with multiple levels of un-necessary nesting',
226
+ squizNode: [
227
+ {
228
+ type: 'tag',
229
+ tag: 'span',
230
+ children: [
231
+ {
232
+ type: 'link-to-matrix-asset',
233
+ target: '_blank',
234
+ matrixAssetId: '123',
235
+ matrixDomain: 'https://my-matrix.squiz.net',
236
+ matrixIdentifier: 'matrix-api-identifier',
237
+ children: [
238
+ {
239
+ type: 'tag',
240
+ tag: 'span',
241
+ children: [
242
+ {
243
+ type: 'tag',
244
+ tag: 'span',
245
+ children: [{ type: 'text', value: 'Hello' }],
246
+ },
247
+ ],
248
+ },
249
+ ],
250
+ },
251
+ ],
252
+ },
253
+ ],
254
+ remirrorNode: {
255
+ // reverse operation covered by "Asset link".
256
+ type: 'text',
257
+ text: 'Hello',
258
+ marks: [
259
+ {
260
+ type: 'assetLink',
261
+ attrs: {
262
+ target: '_blank',
263
+ matrixAssetId: '123',
264
+ matrixDomain: 'https://my-matrix.squiz.net',
265
+ matrixIdentifier: 'matrix-api-identifier',
266
+ },
267
+ },
268
+ ],
269
+ },
270
+ },
271
+ ];