@squiz/formatted-text-editor 0.0.0-rbv2-20240603022344 → 0.0.0-rbv2-20240607040706

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 (145) hide show
  1. package/CHANGELOG.md +9 -3
  2. package/package.json +3 -3
  3. package/squiz-dam-resource-browser-plugin-0.7.0-rc.0.tgz +0 -0
  4. package/squiz-formatted-text-editor-1.71.0.tgz +0 -0
  5. package/squiz-matrix-resource-browser-plugin-2.0.19-rc.0.tgz +0 -0
  6. package/squiz-resource-browser-2.2.0-rc.0.tgz +0 -0
  7. package/squiz-resource-browser-ui-lib-0.8.2-rc.0.tgz +0 -0
  8. package/coverage/clover.xml +0 -1544
  9. package/coverage/coverage-final.json +0 -74
  10. package/coverage/lcov-report/base.css +0 -224
  11. package/coverage/lcov-report/block-navigation.js +0 -87
  12. package/coverage/lcov-report/favicon.png +0 -0
  13. package/coverage/lcov-report/index.html +0 -911
  14. package/coverage/lcov-report/prettify.css +0 -1
  15. package/coverage/lcov-report/prettify.js +0 -2
  16. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  17. package/coverage/lcov-report/sorter.js +0 -196
  18. package/coverage/lcov-report/src/Editor/Editor.tsx.html +0 -436
  19. package/coverage/lcov-report/src/Editor/EditorContext.ts.html +0 -145
  20. package/coverage/lcov-report/src/Editor/index.html +0 -131
  21. package/coverage/lcov-report/src/EditorToolbar/FloatingToolbar.tsx.html +0 -271
  22. package/coverage/lcov-report/src/EditorToolbar/Toolbar.tsx.html +0 -265
  23. package/coverage/lcov-report/src/EditorToolbar/Tools/Bold/BoldButton.tsx.html +0 -178
  24. package/coverage/lcov-report/src/EditorToolbar/Tools/Bold/index.html +0 -116
  25. package/coverage/lcov-report/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.tsx.html +0 -229
  26. package/coverage/lcov-report/src/EditorToolbar/Tools/ClearFormatting/index.html +0 -116
  27. package/coverage/lcov-report/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.tsx.html +0 -187
  28. package/coverage/lcov-report/src/EditorToolbar/Tools/HorizontalLine/index.html +0 -116
  29. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx.html +0 -688
  30. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/Form/index.html +0 -116
  31. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/ImageButton.tsx.html +0 -301
  32. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/ImageModal.tsx.html +0 -181
  33. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/index.html +0 -131
  34. package/coverage/lcov-report/src/EditorToolbar/Tools/Italic/ItalicButton.tsx.html +0 -178
  35. package/coverage/lcov-report/src/EditorToolbar/Tools/Italic/index.html +0 -116
  36. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx.html +0 -508
  37. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/Form/index.html +0 -116
  38. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/LinkButton.tsx.html +0 -286
  39. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/LinkModal.tsx.html +0 -196
  40. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx.html +0 -211
  41. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/index.html +0 -146
  42. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/ListButtons.tsx.html +0 -127
  43. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.tsx.html +0 -175
  44. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/OrderedList/index.html +0 -116
  45. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.tsx.html +0 -175
  46. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/UnorderedList/index.html +0 -116
  47. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/index.html +0 -116
  48. package/coverage/lcov-report/src/EditorToolbar/Tools/Redo/RedoButton.tsx.html +0 -178
  49. package/coverage/lcov-report/src/EditorToolbar/Tools/Redo/index.html +0 -116
  50. package/coverage/lcov-report/src/EditorToolbar/Tools/Table/TableButton.tsx.html +0 -181
  51. package/coverage/lcov-report/src/EditorToolbar/Tools/Table/index.html +0 -116
  52. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx.html +0 -178
  53. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/CenterAlign/index.html +0 -116
  54. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx.html +0 -178
  55. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/JustifyAlign/index.html +0 -116
  56. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx.html +0 -178
  57. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/LeftAlign/index.html +0 -116
  58. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx.html +0 -178
  59. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/RightAlign/index.html +0 -116
  60. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx.html +0 -148
  61. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/index.html +0 -116
  62. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.tsx.html +0 -181
  63. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/CodeBlock/index.html +0 -116
  64. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx.html +0 -241
  65. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Heading/index.html +0 -116
  66. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx.html +0 -160
  67. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Paragraph/index.html +0 -116
  68. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx.html +0 -181
  69. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Preformatted/index.html +0 -116
  70. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx.html +0 -247
  71. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/index.html +0 -116
  72. package/coverage/lcov-report/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx.html +0 -178
  73. package/coverage/lcov-report/src/EditorToolbar/Tools/Underline/index.html +0 -116
  74. package/coverage/lcov-report/src/EditorToolbar/Tools/Undo/UndoButton.tsx.html +0 -178
  75. package/coverage/lcov-report/src/EditorToolbar/Tools/Undo/index.html +0 -116
  76. package/coverage/lcov-report/src/EditorToolbar/index.html +0 -146
  77. package/coverage/lcov-report/src/EditorToolbar/index.ts.html +0 -91
  78. package/coverage/lcov-report/src/Extensions/ClearFormattingExtension/ClearFormattingExtension.ts.html +0 -256
  79. package/coverage/lcov-report/src/Extensions/ClearFormattingExtension/index.html +0 -116
  80. package/coverage/lcov-report/src/Extensions/CodeBlockExtension/CodeBlockExtension.ts.html +0 -187
  81. package/coverage/lcov-report/src/Extensions/CodeBlockExtension/index.html +0 -116
  82. package/coverage/lcov-report/src/Extensions/CommandsExtension/CommandsExtension.ts.html +0 -247
  83. package/coverage/lcov-report/src/Extensions/CommandsExtension/index.html +0 -116
  84. package/coverage/lcov-report/src/Extensions/Extensions.ts.html +0 -349
  85. package/coverage/lcov-report/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts.html +0 -289
  86. package/coverage/lcov-report/src/Extensions/FetchUrlExtension/index.html +0 -116
  87. package/coverage/lcov-report/src/Extensions/ImageExtension/AssetImageExtension.ts.html +0 -412
  88. package/coverage/lcov-report/src/Extensions/ImageExtension/ImageExtension.ts.html +0 -142
  89. package/coverage/lcov-report/src/Extensions/ImageExtension/index.html +0 -131
  90. package/coverage/lcov-report/src/Extensions/LinkExtension/AssetLinkExtension.ts.html +0 -466
  91. package/coverage/lcov-report/src/Extensions/LinkExtension/LinkExtension.ts.html +0 -400
  92. package/coverage/lcov-report/src/Extensions/LinkExtension/common.ts.html +0 -115
  93. package/coverage/lcov-report/src/Extensions/LinkExtension/index.html +0 -146
  94. package/coverage/lcov-report/src/Extensions/PreformattedExtension/PreformattedExtension.ts.html +0 -340
  95. package/coverage/lcov-report/src/Extensions/PreformattedExtension/index.html +0 -116
  96. package/coverage/lcov-report/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.tsx.html +0 -325
  97. package/coverage/lcov-report/src/Extensions/UnsuportedExtension/index.html +0 -116
  98. package/coverage/lcov-report/src/Extensions/index.html +0 -116
  99. package/coverage/lcov-report/src/hooks/index.html +0 -161
  100. package/coverage/lcov-report/src/hooks/index.ts.html +0 -91
  101. package/coverage/lcov-report/src/hooks/useExpandedSelection.ts.html +0 -217
  102. package/coverage/lcov-report/src/hooks/useExtensionNames.ts.html +0 -130
  103. package/coverage/lcov-report/src/hooks/useFocus.ts.html +0 -268
  104. package/coverage/lcov-report/src/index.html +0 -116
  105. package/coverage/lcov-report/src/index.ts.html +0 -112
  106. package/coverage/lcov-report/src/ui/Button/Button.tsx.html +0 -190
  107. package/coverage/lcov-report/src/ui/Button/index.html +0 -116
  108. package/coverage/lcov-report/src/ui/CollapseBox/CollapseBox.tsx.html +0 -193
  109. package/coverage/lcov-report/src/ui/CollapseBox/index.html +0 -116
  110. package/coverage/lcov-report/src/ui/Fields/Checkbox/Checkbox.tsx.html +0 -232
  111. package/coverage/lcov-report/src/ui/Fields/Checkbox/index.html +0 -116
  112. package/coverage/lcov-report/src/ui/Fields/Input/Input.tsx.html +0 -160
  113. package/coverage/lcov-report/src/ui/Fields/Input/index.html +0 -116
  114. package/coverage/lcov-report/src/ui/Fields/InputContainer/InputContainer.tsx.html +0 -172
  115. package/coverage/lcov-report/src/ui/Fields/InputContainer/index.html +0 -116
  116. package/coverage/lcov-report/src/ui/Fields/MatrixAsset/MatrixAsset.tsx.html +0 -256
  117. package/coverage/lcov-report/src/ui/Fields/MatrixAsset/index.html +0 -116
  118. package/coverage/lcov-report/src/ui/Fields/Select/Select.tsx.html +0 -283
  119. package/coverage/lcov-report/src/ui/Fields/Select/index.html +0 -116
  120. package/coverage/lcov-report/src/ui/Modal/FormModal.tsx.html +0 -136
  121. package/coverage/lcov-report/src/ui/Modal/Modal.tsx.html +0 -397
  122. package/coverage/lcov-report/src/ui/Modal/index.html +0 -131
  123. package/coverage/lcov-report/src/ui/Tabs/Tabs.tsx.html +0 -208
  124. package/coverage/lcov-report/src/ui/Tabs/index.html +0 -116
  125. package/coverage/lcov-report/src/ui/ToolbarDropdown/ToolbarDropdown.tsx.html +0 -211
  126. package/coverage/lcov-report/src/ui/ToolbarDropdown/index.html +0 -116
  127. package/coverage/lcov-report/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.tsx.html +0 -184
  128. package/coverage/lcov-report/src/ui/ToolbarDropdownButton/index.html +0 -116
  129. package/coverage/lcov-report/src/utils/converters/htmlToSquizNode/htmlToSquizNode.ts.html +0 -166
  130. package/coverage/lcov-report/src/utils/converters/htmlToSquizNode/index.html +0 -116
  131. package/coverage/lcov-report/src/utils/converters/mocks/index.html +0 -116
  132. package/coverage/lcov-report/src/utils/converters/mocks/squizNodeJson.mock.ts.html +0 -895
  133. package/coverage/lcov-report/src/utils/converters/remirrorNodeToSquizNode/index.html +0 -116
  134. package/coverage/lcov-report/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts.html +0 -976
  135. package/coverage/lcov-report/src/utils/converters/squizNodeToRemirrorNode/index.html +0 -116
  136. package/coverage/lcov-report/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts.html +0 -748
  137. package/coverage/lcov-report/src/utils/createToolbarPositioner.ts.html +0 -469
  138. package/coverage/lcov-report/src/utils/getCursorRect.ts.html +0 -100
  139. package/coverage/lcov-report/src/utils/getMarkNamesByGroup.ts.html +0 -106
  140. package/coverage/lcov-report/src/utils/getNodeNamesByGroup.ts.html +0 -106
  141. package/coverage/lcov-report/src/utils/getShortcutSymbol.ts.html +0 -97
  142. package/coverage/lcov-report/src/utils/index.html +0 -206
  143. package/coverage/lcov-report/src/utils/undefinedIfEmpty.ts.html +0 -94
  144. package/coverage/lcov-report/src/utils/validation.ts.html +0 -133
  145. package/coverage/lcov.info +0 -2737
@@ -1,688 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for src/EditorToolbar/Tools/Image/Form/ImageForm.tsx</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../../../../prettify.css" />
9
- <link rel="stylesheet" href="../../../../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../../../../favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(../../../../../sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="../../../../../index.html">All files</a> / <a href="index.html">src/EditorToolbar/Tools/Image/Form</a> ImageForm.tsx</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>54/54</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">96.42% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>27/28</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>10/10</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>54/54</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input oninput="onInput()" type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line high'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a>
76
- <a name='L11'></a><a href='#L11'>11</a>
77
- <a name='L12'></a><a href='#L12'>12</a>
78
- <a name='L13'></a><a href='#L13'>13</a>
79
- <a name='L14'></a><a href='#L14'>14</a>
80
- <a name='L15'></a><a href='#L15'>15</a>
81
- <a name='L16'></a><a href='#L16'>16</a>
82
- <a name='L17'></a><a href='#L17'>17</a>
83
- <a name='L18'></a><a href='#L18'>18</a>
84
- <a name='L19'></a><a href='#L19'>19</a>
85
- <a name='L20'></a><a href='#L20'>20</a>
86
- <a name='L21'></a><a href='#L21'>21</a>
87
- <a name='L22'></a><a href='#L22'>22</a>
88
- <a name='L23'></a><a href='#L23'>23</a>
89
- <a name='L24'></a><a href='#L24'>24</a>
90
- <a name='L25'></a><a href='#L25'>25</a>
91
- <a name='L26'></a><a href='#L26'>26</a>
92
- <a name='L27'></a><a href='#L27'>27</a>
93
- <a name='L28'></a><a href='#L28'>28</a>
94
- <a name='L29'></a><a href='#L29'>29</a>
95
- <a name='L30'></a><a href='#L30'>30</a>
96
- <a name='L31'></a><a href='#L31'>31</a>
97
- <a name='L32'></a><a href='#L32'>32</a>
98
- <a name='L33'></a><a href='#L33'>33</a>
99
- <a name='L34'></a><a href='#L34'>34</a>
100
- <a name='L35'></a><a href='#L35'>35</a>
101
- <a name='L36'></a><a href='#L36'>36</a>
102
- <a name='L37'></a><a href='#L37'>37</a>
103
- <a name='L38'></a><a href='#L38'>38</a>
104
- <a name='L39'></a><a href='#L39'>39</a>
105
- <a name='L40'></a><a href='#L40'>40</a>
106
- <a name='L41'></a><a href='#L41'>41</a>
107
- <a name='L42'></a><a href='#L42'>42</a>
108
- <a name='L43'></a><a href='#L43'>43</a>
109
- <a name='L44'></a><a href='#L44'>44</a>
110
- <a name='L45'></a><a href='#L45'>45</a>
111
- <a name='L46'></a><a href='#L46'>46</a>
112
- <a name='L47'></a><a href='#L47'>47</a>
113
- <a name='L48'></a><a href='#L48'>48</a>
114
- <a name='L49'></a><a href='#L49'>49</a>
115
- <a name='L50'></a><a href='#L50'>50</a>
116
- <a name='L51'></a><a href='#L51'>51</a>
117
- <a name='L52'></a><a href='#L52'>52</a>
118
- <a name='L53'></a><a href='#L53'>53</a>
119
- <a name='L54'></a><a href='#L54'>54</a>
120
- <a name='L55'></a><a href='#L55'>55</a>
121
- <a name='L56'></a><a href='#L56'>56</a>
122
- <a name='L57'></a><a href='#L57'>57</a>
123
- <a name='L58'></a><a href='#L58'>58</a>
124
- <a name='L59'></a><a href='#L59'>59</a>
125
- <a name='L60'></a><a href='#L60'>60</a>
126
- <a name='L61'></a><a href='#L61'>61</a>
127
- <a name='L62'></a><a href='#L62'>62</a>
128
- <a name='L63'></a><a href='#L63'>63</a>
129
- <a name='L64'></a><a href='#L64'>64</a>
130
- <a name='L65'></a><a href='#L65'>65</a>
131
- <a name='L66'></a><a href='#L66'>66</a>
132
- <a name='L67'></a><a href='#L67'>67</a>
133
- <a name='L68'></a><a href='#L68'>68</a>
134
- <a name='L69'></a><a href='#L69'>69</a>
135
- <a name='L70'></a><a href='#L70'>70</a>
136
- <a name='L71'></a><a href='#L71'>71</a>
137
- <a name='L72'></a><a href='#L72'>72</a>
138
- <a name='L73'></a><a href='#L73'>73</a>
139
- <a name='L74'></a><a href='#L74'>74</a>
140
- <a name='L75'></a><a href='#L75'>75</a>
141
- <a name='L76'></a><a href='#L76'>76</a>
142
- <a name='L77'></a><a href='#L77'>77</a>
143
- <a name='L78'></a><a href='#L78'>78</a>
144
- <a name='L79'></a><a href='#L79'>79</a>
145
- <a name='L80'></a><a href='#L80'>80</a>
146
- <a name='L81'></a><a href='#L81'>81</a>
147
- <a name='L82'></a><a href='#L82'>82</a>
148
- <a name='L83'></a><a href='#L83'>83</a>
149
- <a name='L84'></a><a href='#L84'>84</a>
150
- <a name='L85'></a><a href='#L85'>85</a>
151
- <a name='L86'></a><a href='#L86'>86</a>
152
- <a name='L87'></a><a href='#L87'>87</a>
153
- <a name='L88'></a><a href='#L88'>88</a>
154
- <a name='L89'></a><a href='#L89'>89</a>
155
- <a name='L90'></a><a href='#L90'>90</a>
156
- <a name='L91'></a><a href='#L91'>91</a>
157
- <a name='L92'></a><a href='#L92'>92</a>
158
- <a name='L93'></a><a href='#L93'>93</a>
159
- <a name='L94'></a><a href='#L94'>94</a>
160
- <a name='L95'></a><a href='#L95'>95</a>
161
- <a name='L96'></a><a href='#L96'>96</a>
162
- <a name='L97'></a><a href='#L97'>97</a>
163
- <a name='L98'></a><a href='#L98'>98</a>
164
- <a name='L99'></a><a href='#L99'>99</a>
165
- <a name='L100'></a><a href='#L100'>100</a>
166
- <a name='L101'></a><a href='#L101'>101</a>
167
- <a name='L102'></a><a href='#L102'>102</a>
168
- <a name='L103'></a><a href='#L103'>103</a>
169
- <a name='L104'></a><a href='#L104'>104</a>
170
- <a name='L105'></a><a href='#L105'>105</a>
171
- <a name='L106'></a><a href='#L106'>106</a>
172
- <a name='L107'></a><a href='#L107'>107</a>
173
- <a name='L108'></a><a href='#L108'>108</a>
174
- <a name='L109'></a><a href='#L109'>109</a>
175
- <a name='L110'></a><a href='#L110'>110</a>
176
- <a name='L111'></a><a href='#L111'>111</a>
177
- <a name='L112'></a><a href='#L112'>112</a>
178
- <a name='L113'></a><a href='#L113'>113</a>
179
- <a name='L114'></a><a href='#L114'>114</a>
180
- <a name='L115'></a><a href='#L115'>115</a>
181
- <a name='L116'></a><a href='#L116'>116</a>
182
- <a name='L117'></a><a href='#L117'>117</a>
183
- <a name='L118'></a><a href='#L118'>118</a>
184
- <a name='L119'></a><a href='#L119'>119</a>
185
- <a name='L120'></a><a href='#L120'>120</a>
186
- <a name='L121'></a><a href='#L121'>121</a>
187
- <a name='L122'></a><a href='#L122'>122</a>
188
- <a name='L123'></a><a href='#L123'>123</a>
189
- <a name='L124'></a><a href='#L124'>124</a>
190
- <a name='L125'></a><a href='#L125'>125</a>
191
- <a name='L126'></a><a href='#L126'>126</a>
192
- <a name='L127'></a><a href='#L127'>127</a>
193
- <a name='L128'></a><a href='#L128'>128</a>
194
- <a name='L129'></a><a href='#L129'>129</a>
195
- <a name='L130'></a><a href='#L130'>130</a>
196
- <a name='L131'></a><a href='#L131'>131</a>
197
- <a name='L132'></a><a href='#L132'>132</a>
198
- <a name='L133'></a><a href='#L133'>133</a>
199
- <a name='L134'></a><a href='#L134'>134</a>
200
- <a name='L135'></a><a href='#L135'>135</a>
201
- <a name='L136'></a><a href='#L136'>136</a>
202
- <a name='L137'></a><a href='#L137'>137</a>
203
- <a name='L138'></a><a href='#L138'>138</a>
204
- <a name='L139'></a><a href='#L139'>139</a>
205
- <a name='L140'></a><a href='#L140'>140</a>
206
- <a name='L141'></a><a href='#L141'>141</a>
207
- <a name='L142'></a><a href='#L142'>142</a>
208
- <a name='L143'></a><a href='#L143'>143</a>
209
- <a name='L144'></a><a href='#L144'>144</a>
210
- <a name='L145'></a><a href='#L145'>145</a>
211
- <a name='L146'></a><a href='#L146'>146</a>
212
- <a name='L147'></a><a href='#L147'>147</a>
213
- <a name='L148'></a><a href='#L148'>148</a>
214
- <a name='L149'></a><a href='#L149'>149</a>
215
- <a name='L150'></a><a href='#L150'>150</a>
216
- <a name='L151'></a><a href='#L151'>151</a>
217
- <a name='L152'></a><a href='#L152'>152</a>
218
- <a name='L153'></a><a href='#L153'>153</a>
219
- <a name='L154'></a><a href='#L154'>154</a>
220
- <a name='L155'></a><a href='#L155'>155</a>
221
- <a name='L156'></a><a href='#L156'>156</a>
222
- <a name='L157'></a><a href='#L157'>157</a>
223
- <a name='L158'></a><a href='#L158'>158</a>
224
- <a name='L159'></a><a href='#L159'>159</a>
225
- <a name='L160'></a><a href='#L160'>160</a>
226
- <a name='L161'></a><a href='#L161'>161</a>
227
- <a name='L162'></a><a href='#L162'>162</a>
228
- <a name='L163'></a><a href='#L163'>163</a>
229
- <a name='L164'></a><a href='#L164'>164</a>
230
- <a name='L165'></a><a href='#L165'>165</a>
231
- <a name='L166'></a><a href='#L166'>166</a>
232
- <a name='L167'></a><a href='#L167'>167</a>
233
- <a name='L168'></a><a href='#L168'>168</a>
234
- <a name='L169'></a><a href='#L169'>169</a>
235
- <a name='L170'></a><a href='#L170'>170</a>
236
- <a name='L171'></a><a href='#L171'>171</a>
237
- <a name='L172'></a><a href='#L172'>172</a>
238
- <a name='L173'></a><a href='#L173'>173</a>
239
- <a name='L174'></a><a href='#L174'>174</a>
240
- <a name='L175'></a><a href='#L175'>175</a>
241
- <a name='L176'></a><a href='#L176'>176</a>
242
- <a name='L177'></a><a href='#L177'>177</a>
243
- <a name='L178'></a><a href='#L178'>178</a>
244
- <a name='L179'></a><a href='#L179'>179</a>
245
- <a name='L180'></a><a href='#L180'>180</a>
246
- <a name='L181'></a><a href='#L181'>181</a>
247
- <a name='L182'></a><a href='#L182'>182</a>
248
- <a name='L183'></a><a href='#L183'>183</a>
249
- <a name='L184'></a><a href='#L184'>184</a>
250
- <a name='L185'></a><a href='#L185'>185</a>
251
- <a name='L186'></a><a href='#L186'>186</a>
252
- <a name='L187'></a><a href='#L187'>187</a>
253
- <a name='L188'></a><a href='#L188'>188</a>
254
- <a name='L189'></a><a href='#L189'>189</a>
255
- <a name='L190'></a><a href='#L190'>190</a>
256
- <a name='L191'></a><a href='#L191'>191</a>
257
- <a name='L192'></a><a href='#L192'>192</a>
258
- <a name='L193'></a><a href='#L193'>193</a>
259
- <a name='L194'></a><a href='#L194'>194</a>
260
- <a name='L195'></a><a href='#L195'>195</a>
261
- <a name='L196'></a><a href='#L196'>196</a>
262
- <a name='L197'></a><a href='#L197'>197</a>
263
- <a name='L198'></a><a href='#L198'>198</a>
264
- <a name='L199'></a><a href='#L199'>199</a>
265
- <a name='L200'></a><a href='#L200'>200</a>
266
- <a name='L201'></a><a href='#L201'>201</a>
267
- <a name='L202'></a><a href='#L202'>202</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">36x</span>
268
- <span class="cline-any cline-yes">36x</span>
269
- <span class="cline-any cline-yes">36x</span>
270
- <span class="cline-any cline-yes">36x</span>
271
- <span class="cline-any cline-yes">36x</span>
272
- <span class="cline-any cline-neutral">&nbsp;</span>
273
- <span class="cline-any cline-yes">36x</span>
274
- <span class="cline-any cline-yes">36x</span>
275
- <span class="cline-any cline-yes">36x</span>
276
- <span class="cline-any cline-yes">36x</span>
277
- <span class="cline-any cline-neutral">&nbsp;</span>
278
- <span class="cline-any cline-neutral">&nbsp;</span>
279
- <span class="cline-any cline-yes">36x</span>
280
- <span class="cline-any cline-yes">36x</span>
281
- <span class="cline-any cline-yes">36x</span>
282
- <span class="cline-any cline-neutral">&nbsp;</span>
283
- <span class="cline-any cline-neutral">&nbsp;</span>
284
- <span class="cline-any cline-neutral">&nbsp;</span>
285
- <span class="cline-any cline-neutral">&nbsp;</span>
286
- <span class="cline-any cline-neutral">&nbsp;</span>
287
- <span class="cline-any cline-neutral">&nbsp;</span>
288
- <span class="cline-any cline-neutral">&nbsp;</span>
289
- <span class="cline-any cline-yes">36x</span>
290
- <span class="cline-any cline-neutral">&nbsp;</span>
291
- <span class="cline-any cline-neutral">&nbsp;</span>
292
- <span class="cline-any cline-neutral">&nbsp;</span>
293
- <span class="cline-any cline-neutral">&nbsp;</span>
294
- <span class="cline-any cline-neutral">&nbsp;</span>
295
- <span class="cline-any cline-neutral">&nbsp;</span>
296
- <span class="cline-any cline-neutral">&nbsp;</span>
297
- <span class="cline-any cline-neutral">&nbsp;</span>
298
- <span class="cline-any cline-neutral">&nbsp;</span>
299
- <span class="cline-any cline-neutral">&nbsp;</span>
300
- <span class="cline-any cline-yes">36x</span>
301
- <span class="cline-any cline-neutral">&nbsp;</span>
302
- <span class="cline-any cline-neutral">&nbsp;</span>
303
- <span class="cline-any cline-neutral">&nbsp;</span>
304
- <span class="cline-any cline-neutral">&nbsp;</span>
305
- <span class="cline-any cline-neutral">&nbsp;</span>
306
- <span class="cline-any cline-neutral">&nbsp;</span>
307
- <span class="cline-any cline-neutral">&nbsp;</span>
308
- <span class="cline-any cline-yes">70x</span>
309
- <span class="cline-any cline-neutral">&nbsp;</span>
310
- <span class="cline-any cline-neutral">&nbsp;</span>
311
- <span class="cline-any cline-yes">70x</span>
312
- <span class="cline-any cline-yes">70x</span>
313
- <span class="cline-any cline-yes">70x</span>
314
- <span class="cline-any cline-yes">70x</span>
315
- <span class="cline-any cline-neutral">&nbsp;</span>
316
- <span class="cline-any cline-yes">70x</span>
317
- <span class="cline-any cline-yes">7x</span>
318
- <span class="cline-any cline-yes">7x</span>
319
- <span class="cline-any cline-neutral">&nbsp;</span>
320
- <span class="cline-any cline-yes">6x</span>
321
- <span class="cline-any cline-yes">6x</span>
322
- <span class="cline-any cline-yes">6x</span>
323
- <span class="cline-any cline-yes">6x</span>
324
- <span class="cline-any cline-neutral">&nbsp;</span>
325
- <span class="cline-any cline-neutral">&nbsp;</span>
326
- <span class="cline-any cline-neutral">&nbsp;</span>
327
- <span class="cline-any cline-neutral">&nbsp;</span>
328
- <span class="cline-any cline-neutral">&nbsp;</span>
329
- <span class="cline-any cline-neutral">&nbsp;</span>
330
- <span class="cline-any cline-yes">70x</span>
331
- <span class="cline-any cline-yes">5x</span>
332
- <span class="cline-any cline-yes">5x</span>
333
- <span class="cline-any cline-yes">4x</span>
334
- <span class="cline-any cline-neutral">&nbsp;</span>
335
- <span class="cline-any cline-yes">1x</span>
336
- <span class="cline-any cline-neutral">&nbsp;</span>
337
- <span class="cline-any cline-neutral">&nbsp;</span>
338
- <span class="cline-any cline-neutral">&nbsp;</span>
339
- <span class="cline-any cline-yes">70x</span>
340
- <span class="cline-any cline-yes">12x</span>
341
- <span class="cline-any cline-yes">8x</span>
342
- <span class="cline-any cline-yes">8x</span>
343
- <span class="cline-any cline-yes">8x</span>
344
- <span class="cline-any cline-yes">8x</span>
345
- <span class="cline-any cline-yes">8x</span>
346
- <span class="cline-any cline-yes">8x</span>
347
- <span class="cline-any cline-yes">8x</span>
348
- <span class="cline-any cline-neutral">&nbsp;</span>
349
- <span class="cline-any cline-neutral">&nbsp;</span>
350
- <span class="cline-any cline-neutral">&nbsp;</span>
351
- <span class="cline-any cline-yes">70x</span>
352
- <span class="cline-any cline-yes">4x</span>
353
- <span class="cline-any cline-neutral">&nbsp;</span>
354
- <span class="cline-any cline-neutral">&nbsp;</span>
355
- <span class="cline-any cline-yes">70x</span>
356
- <span class="cline-any cline-neutral">&nbsp;</span>
357
- <span class="cline-any cline-neutral">&nbsp;</span>
358
- <span class="cline-any cline-neutral">&nbsp;</span>
359
- <span class="cline-any cline-neutral">&nbsp;</span>
360
- <span class="cline-any cline-neutral">&nbsp;</span>
361
- <span class="cline-any cline-yes">23x</span>
362
- <span class="cline-any cline-neutral">&nbsp;</span>
363
- <span class="cline-any cline-neutral">&nbsp;</span>
364
- <span class="cline-any cline-neutral">&nbsp;</span>
365
- <span class="cline-any cline-neutral">&nbsp;</span>
366
- <span class="cline-any cline-neutral">&nbsp;</span>
367
- <span class="cline-any cline-neutral">&nbsp;</span>
368
- <span class="cline-any cline-neutral">&nbsp;</span>
369
- <span class="cline-any cline-neutral">&nbsp;</span>
370
- <span class="cline-any cline-neutral">&nbsp;</span>
371
- <span class="cline-any cline-neutral">&nbsp;</span>
372
- <span class="cline-any cline-neutral">&nbsp;</span>
373
- <span class="cline-any cline-neutral">&nbsp;</span>
374
- <span class="cline-any cline-neutral">&nbsp;</span>
375
- <span class="cline-any cline-neutral">&nbsp;</span>
376
- <span class="cline-any cline-yes">6x</span>
377
- <span class="cline-any cline-yes">1x</span>
378
- <span class="cline-any cline-neutral">&nbsp;</span>
379
- <span class="cline-any cline-yes">5x</span>
380
- <span class="cline-any cline-yes">1x</span>
381
- <span class="cline-any cline-neutral">&nbsp;</span>
382
- <span class="cline-any cline-neutral">&nbsp;</span>
383
- <span class="cline-any cline-neutral">&nbsp;</span>
384
- <span class="cline-any cline-neutral">&nbsp;</span>
385
- <span class="cline-any cline-neutral">&nbsp;</span>
386
- <span class="cline-any cline-neutral">&nbsp;</span>
387
- <span class="cline-any cline-neutral">&nbsp;</span>
388
- <span class="cline-any cline-neutral">&nbsp;</span>
389
- <span class="cline-any cline-neutral">&nbsp;</span>
390
- <span class="cline-any cline-neutral">&nbsp;</span>
391
- <span class="cline-any cline-neutral">&nbsp;</span>
392
- <span class="cline-any cline-neutral">&nbsp;</span>
393
- <span class="cline-any cline-neutral">&nbsp;</span>
394
- <span class="cline-any cline-neutral">&nbsp;</span>
395
- <span class="cline-any cline-neutral">&nbsp;</span>
396
- <span class="cline-any cline-neutral">&nbsp;</span>
397
- <span class="cline-any cline-neutral">&nbsp;</span>
398
- <span class="cline-any cline-neutral">&nbsp;</span>
399
- <span class="cline-any cline-neutral">&nbsp;</span>
400
- <span class="cline-any cline-yes">7x</span>
401
- <span class="cline-any cline-yes">1x</span>
402
- <span class="cline-any cline-neutral">&nbsp;</span>
403
- <span class="cline-any cline-neutral">&nbsp;</span>
404
- <span class="cline-any cline-neutral">&nbsp;</span>
405
- <span class="cline-any cline-neutral">&nbsp;</span>
406
- <span class="cline-any cline-neutral">&nbsp;</span>
407
- <span class="cline-any cline-neutral">&nbsp;</span>
408
- <span class="cline-any cline-neutral">&nbsp;</span>
409
- <span class="cline-any cline-neutral">&nbsp;</span>
410
- <span class="cline-any cline-neutral">&nbsp;</span>
411
- <span class="cline-any cline-neutral">&nbsp;</span>
412
- <span class="cline-any cline-neutral">&nbsp;</span>
413
- <span class="cline-any cline-neutral">&nbsp;</span>
414
- <span class="cline-any cline-neutral">&nbsp;</span>
415
- <span class="cline-any cline-neutral">&nbsp;</span>
416
- <span class="cline-any cline-neutral">&nbsp;</span>
417
- <span class="cline-any cline-neutral">&nbsp;</span>
418
- <span class="cline-any cline-neutral">&nbsp;</span>
419
- <span class="cline-any cline-neutral">&nbsp;</span>
420
- <span class="cline-any cline-neutral">&nbsp;</span>
421
- <span class="cline-any cline-neutral">&nbsp;</span>
422
- <span class="cline-any cline-neutral">&nbsp;</span>
423
- <span class="cline-any cline-neutral">&nbsp;</span>
424
- <span class="cline-any cline-neutral">&nbsp;</span>
425
- <span class="cline-any cline-neutral">&nbsp;</span>
426
- <span class="cline-any cline-neutral">&nbsp;</span>
427
- <span class="cline-any cline-neutral">&nbsp;</span>
428
- <span class="cline-any cline-neutral">&nbsp;</span>
429
- <span class="cline-any cline-yes">7x</span>
430
- <span class="cline-any cline-yes">1x</span>
431
- <span class="cline-any cline-neutral">&nbsp;</span>
432
- <span class="cline-any cline-neutral">&nbsp;</span>
433
- <span class="cline-any cline-neutral">&nbsp;</span>
434
- <span class="cline-any cline-neutral">&nbsp;</span>
435
- <span class="cline-any cline-neutral">&nbsp;</span>
436
- <span class="cline-any cline-neutral">&nbsp;</span>
437
- <span class="cline-any cline-neutral">&nbsp;</span>
438
- <span class="cline-any cline-neutral">&nbsp;</span>
439
- <span class="cline-any cline-neutral">&nbsp;</span>
440
- <span class="cline-any cline-neutral">&nbsp;</span>
441
- <span class="cline-any cline-neutral">&nbsp;</span>
442
- <span class="cline-any cline-neutral">&nbsp;</span>
443
- <span class="cline-any cline-neutral">&nbsp;</span>
444
- <span class="cline-any cline-neutral">&nbsp;</span>
445
- <span class="cline-any cline-neutral">&nbsp;</span>
446
- <span class="cline-any cline-neutral">&nbsp;</span>
447
- <span class="cline-any cline-neutral">&nbsp;</span>
448
- <span class="cline-any cline-neutral">&nbsp;</span>
449
- <span class="cline-any cline-neutral">&nbsp;</span>
450
- <span class="cline-any cline-neutral">&nbsp;</span>
451
- <span class="cline-any cline-neutral">&nbsp;</span>
452
- <span class="cline-any cline-yes">29x</span>
453
- <span class="cline-any cline-neutral">&nbsp;</span>
454
- <span class="cline-any cline-neutral">&nbsp;</span>
455
- <span class="cline-any cline-neutral">&nbsp;</span>
456
- <span class="cline-any cline-neutral">&nbsp;</span>
457
- <span class="cline-any cline-neutral">&nbsp;</span>
458
- <span class="cline-any cline-neutral">&nbsp;</span>
459
- <span class="cline-any cline-neutral">&nbsp;</span>
460
- <span class="cline-any cline-neutral">&nbsp;</span>
461
- <span class="cline-any cline-neutral">&nbsp;</span>
462
- <span class="cline-any cline-neutral">&nbsp;</span>
463
- <span class="cline-any cline-neutral">&nbsp;</span>
464
- <span class="cline-any cline-neutral">&nbsp;</span>
465
- <span class="cline-any cline-neutral">&nbsp;</span>
466
- <span class="cline-any cline-neutral">&nbsp;</span>
467
- <span class="cline-any cline-yes">36x</span>
468
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { ReactElement, useState } from 'react';
469
- import { Controller, SubmitHandler, useForm } from 'react-hook-form';
470
- import { getImageSize } from 'react-image-size';
471
- import clsx from 'clsx';
472
- import { Input } from '../../../../ui/Fields/Input/Input';
473
- import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
474
- import Button from '../../../../ui/Button/Button';
475
- import LinkOffIcon from '@mui/icons-material/LinkOff';
476
- import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
477
- import { NodeName } from '../../../../Extensions/Extensions';
478
- import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
479
- import { DeepPartial } from '../../../../types';
480
- import { noEmptySpacesValidation, regexDataURI, hasProperties } from '../../../../utils/validation';
481
- import { TabOptions, Tabs } from '../../../../ui/Tabs/Tabs';
482
- import { MatrixAsset } from '../../../../ui/Fields/MatrixAsset/MatrixAsset';
483
- &nbsp;
484
- export type ImageFormData = {
485
- imageType: NodeName;
486
- image: Pick&lt;ImageAttributes, 'src' | 'alt' | 'width' | 'height'&gt;;
487
- assetImage: AssetImageAttributes;
488
- };
489
- &nbsp;
490
- const imageTypeOptions: TabOptions = {
491
- [NodeName.AssetImage]: { label: 'From source' },
492
- [NodeName.Image]: { label: 'From URL' },
493
- };
494
- &nbsp;
495
- export type FormProps = {
496
- data: DeepPartial&lt;ImageFormData&gt;;
497
- onSubmit: SubmitHandler&lt;ImageFormData&gt;;
498
- };
499
- export type Dimensions = 'image.width' | 'image.height';
500
- &nbsp;
501
- const ImageForm = ({ data, onSubmit }: FormProps): ReactElement =&gt; {
502
- const {
503
- control,
504
- register,
505
- handleSubmit,
506
- setValue,
507
- watch,
508
- formState: { errors },
509
- } = useForm&lt;ImageFormData&gt;({
510
- defaultValues: data,
511
- });
512
- const imageType = watch('imageType') || <span class="branch-1 cbranch-no" title="branch not covered" >NodeName.AssetImage;</span>
513
- const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
514
- const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
515
- const [aspectRatioLocked, setAspectRatioLocked] = useState(true);
516
- &nbsp;
517
- const setDimensionsFromURL = async (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
518
- try {
519
- const { width, height } = await getImageSize(e.target.value);
520
- &nbsp;
521
- setValue('image.width', width);
522
- setValue('image.height', height);
523
- setAspectRatioFromWidth(height / width);
524
- setAspectRatioFromHeight(width / height);
525
- } catch (error) {
526
- // swallow the error for fetching the image size, will occur if the URL does not point to an image.
527
- // will be handled by validation when attempting to add the image.
528
- }
529
- };
530
- &nbsp;
531
- const validateIsNotImage = async (src: string) =&gt; {
532
- try {
533
- await getImageSize(src);
534
- return false;
535
- } catch (error) {
536
- return true;
537
- }
538
- };
539
- &nbsp;
540
- const calculateDimensions = (event: Event) =&gt; {
541
- if (aspectRatioLocked) {
542
- const currentTarget = event?.target as HTMLInputElement;
543
- const type = currentTarget.name as Dimensions;
544
- const currentValue = currentTarget.value as string;
545
- const otherValue = type === 'image.width' ? 'image.height' : 'image.width';
546
- const aspectRatio = type === 'image.width' ? aspectRatioFromWidth : aspectRatioFromHeight;
547
- const newValue = Math.round(aspectRatio * Number(currentValue) * 100) / 100;
548
- setValue(otherValue, newValue);
549
- }
550
- };
551
- &nbsp;
552
- const toggleAspectRatio = () =&gt; {
553
- setAspectRatioLocked(!aspectRatioLocked);
554
- };
555
- &nbsp;
556
- return (
557
- &lt;form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}&gt;
558
- &lt;div className="squiz-fte-form-group mb-4"&gt;
559
- &lt;Tabs
560
- value={imageType}
561
- options={imageTypeOptions}
562
- onChange={(value) =&gt; setValue('imageType', value as NodeName)}
563
- /&gt;
564
- &lt;/div&gt;
565
- {imageType === NodeName.Image &amp;&amp; (
566
- &lt;&gt;
567
- &lt;div className="squiz-fte-form-group mb-2"&gt;
568
- &lt;Input
569
- label="Source"
570
- required
571
- error={errors?.image?.src?.message}
572
- {...register('image.src', {
573
- onChange: setDimensionsFromURL,
574
- required: 'Source is required',
575
- validate: {
576
- isValidImage: async (value: string | undefined) =&gt; {
577
- if (value &amp;&amp; regexDataURI.test(value)) {
578
- return 'Must not be a data URI';
579
- }
580
- if (value &amp;&amp; (await validateIsNotImage(value))) {
581
- return 'Must be a valid image URL';
582
- }
583
- },
584
- noEmptySpaces: noEmptySpacesValidation,
585
- },
586
- })}
587
- /&gt;
588
- &lt;/div&gt;
589
- &lt;div className="flex flex-row"&gt;
590
- &lt;div className="squiz-fte-form-group mb-2"&gt;
591
- &lt;Input
592
- label="Width"
593
- type="number"
594
- required
595
- error={errors?.image?.width?.message}
596
- {...register('image.width', {
597
- onChange: calculateDimensions,
598
- required: 'Width is required',
599
- validate: {
600
- isValidWidth: (value) =&gt; {
601
- if (value &amp;&amp; !((value as number) &gt; 0)) {
602
- return 'Must be higher than 0';
603
- }
604
- },
605
- },
606
- })}
607
- /&gt;
608
- &lt;/div&gt;
609
- &lt;div className="flex mx-1 mb-2"&gt;
610
- &lt;Button
611
- handleOnClick={toggleAspectRatio}
612
- isActive={false}
613
- icon={aspectRatioLocked ? &lt;InsertLinkRoundedIcon /&gt; : &lt;LinkOffIcon /&gt;}
614
- label="Constrain properties"
615
- isDisabled={false}
616
- className={clsx('my-auto', !errors?.image?.height &amp;&amp; !errors?.image?.width &amp;&amp; 'mb-0')}
617
- /&gt;
618
- &lt;/div&gt;
619
- &lt;div className="squiz-fte-form-group mb-2"&gt;
620
- &lt;Input
621
- label="Height"
622
- type="number"
623
- required
624
- error={errors?.image?.height?.message}
625
- {...register('image.height', {
626
- onChange: calculateDimensions,
627
- required: 'Height is required',
628
- validate: {
629
- isValidHeight: (value) =&gt; {
630
- if (value &amp;&amp; !((value as number) &gt; 0)) {
631
- return 'Must be higher than 0';
632
- }
633
- },
634
- },
635
- })}
636
- /&gt;
637
- &lt;/div&gt;
638
- &lt;/div&gt;
639
- &lt;div className="squiz-fte-form-group mb-2"&gt;
640
- &lt;Input label="Alternative description" error={errors?.image?.alt?.message} {...register('image.alt')} /&gt;
641
- &lt;/div&gt;
642
- &lt;/&gt;
643
- )}
644
- {imageType === NodeName.AssetImage &amp;&amp; (
645
- &lt;div className="squiz-fte-form-group mb-2"&gt;
646
- &lt;Controller
647
- control={control}
648
- name="assetImage"
649
- rules={{
650
- validate: hasProperties('An image must be selected', ['matrixIdentifier', 'matrixAssetId']),
651
- }}
652
- render={({ field: { onChange, value }, fieldState: { error } }) =&gt; (
653
- &lt;MatrixAsset
654
- modalTitle="Insert image"
655
- allowedTypes={['image']}
656
- value={value}
657
- onChange={onChange}
658
- error={error?.message}
659
- /&gt;
660
- )}
661
- /&gt;
662
- &lt;/div&gt;
663
- )}
664
- &lt;/form&gt;
665
- );
666
- };
667
- &nbsp;
668
- export default ImageForm;
669
- &nbsp;</pre></td></tr></table></pre>
670
-
671
- <div class='push'></div><!-- for sticky footer -->
672
- </div><!-- /wrapper -->
673
- <div class='footer quiet pad2 space-top1 center small'>
674
- Code coverage generated by
675
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
676
- at 2024-05-30T00:51:19.393Z
677
- </div>
678
- <script src="../../../../../prettify.js"></script>
679
- <script>
680
- window.onload = function () {
681
- prettyPrint();
682
- };
683
- </script>
684
- <script src="../../../../../sorter.js"></script>
685
- <script src="../../../../../block-navigation.js"></script>
686
- </body>
687
- </html>
688
-