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

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 (140) hide show
  1. package/CHANGELOG.md +3 -3
  2. package/package.json +3 -3
  3. package/coverage/clover.xml +0 -1544
  4. package/coverage/coverage-final.json +0 -74
  5. package/coverage/lcov-report/base.css +0 -224
  6. package/coverage/lcov-report/block-navigation.js +0 -87
  7. package/coverage/lcov-report/favicon.png +0 -0
  8. package/coverage/lcov-report/index.html +0 -911
  9. package/coverage/lcov-report/prettify.css +0 -1
  10. package/coverage/lcov-report/prettify.js +0 -2
  11. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  12. package/coverage/lcov-report/sorter.js +0 -196
  13. package/coverage/lcov-report/src/Editor/Editor.tsx.html +0 -436
  14. package/coverage/lcov-report/src/Editor/EditorContext.ts.html +0 -145
  15. package/coverage/lcov-report/src/Editor/index.html +0 -131
  16. package/coverage/lcov-report/src/EditorToolbar/FloatingToolbar.tsx.html +0 -271
  17. package/coverage/lcov-report/src/EditorToolbar/Toolbar.tsx.html +0 -265
  18. package/coverage/lcov-report/src/EditorToolbar/Tools/Bold/BoldButton.tsx.html +0 -178
  19. package/coverage/lcov-report/src/EditorToolbar/Tools/Bold/index.html +0 -116
  20. package/coverage/lcov-report/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.tsx.html +0 -229
  21. package/coverage/lcov-report/src/EditorToolbar/Tools/ClearFormatting/index.html +0 -116
  22. package/coverage/lcov-report/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.tsx.html +0 -187
  23. package/coverage/lcov-report/src/EditorToolbar/Tools/HorizontalLine/index.html +0 -116
  24. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx.html +0 -688
  25. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/Form/index.html +0 -116
  26. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/ImageButton.tsx.html +0 -301
  27. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/ImageModal.tsx.html +0 -181
  28. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/index.html +0 -131
  29. package/coverage/lcov-report/src/EditorToolbar/Tools/Italic/ItalicButton.tsx.html +0 -178
  30. package/coverage/lcov-report/src/EditorToolbar/Tools/Italic/index.html +0 -116
  31. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx.html +0 -508
  32. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/Form/index.html +0 -116
  33. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/LinkButton.tsx.html +0 -286
  34. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/LinkModal.tsx.html +0 -196
  35. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx.html +0 -211
  36. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/index.html +0 -146
  37. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/ListButtons.tsx.html +0 -127
  38. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.tsx.html +0 -175
  39. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/OrderedList/index.html +0 -116
  40. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.tsx.html +0 -175
  41. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/UnorderedList/index.html +0 -116
  42. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/index.html +0 -116
  43. package/coverage/lcov-report/src/EditorToolbar/Tools/Redo/RedoButton.tsx.html +0 -178
  44. package/coverage/lcov-report/src/EditorToolbar/Tools/Redo/index.html +0 -116
  45. package/coverage/lcov-report/src/EditorToolbar/Tools/Table/TableButton.tsx.html +0 -181
  46. package/coverage/lcov-report/src/EditorToolbar/Tools/Table/index.html +0 -116
  47. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx.html +0 -178
  48. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/CenterAlign/index.html +0 -116
  49. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx.html +0 -178
  50. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/JustifyAlign/index.html +0 -116
  51. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx.html +0 -178
  52. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/LeftAlign/index.html +0 -116
  53. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx.html +0 -178
  54. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/RightAlign/index.html +0 -116
  55. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx.html +0 -148
  56. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/index.html +0 -116
  57. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.tsx.html +0 -181
  58. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/CodeBlock/index.html +0 -116
  59. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx.html +0 -241
  60. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Heading/index.html +0 -116
  61. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx.html +0 -160
  62. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Paragraph/index.html +0 -116
  63. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx.html +0 -181
  64. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Preformatted/index.html +0 -116
  65. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx.html +0 -247
  66. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/index.html +0 -116
  67. package/coverage/lcov-report/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx.html +0 -178
  68. package/coverage/lcov-report/src/EditorToolbar/Tools/Underline/index.html +0 -116
  69. package/coverage/lcov-report/src/EditorToolbar/Tools/Undo/UndoButton.tsx.html +0 -178
  70. package/coverage/lcov-report/src/EditorToolbar/Tools/Undo/index.html +0 -116
  71. package/coverage/lcov-report/src/EditorToolbar/index.html +0 -146
  72. package/coverage/lcov-report/src/EditorToolbar/index.ts.html +0 -91
  73. package/coverage/lcov-report/src/Extensions/ClearFormattingExtension/ClearFormattingExtension.ts.html +0 -256
  74. package/coverage/lcov-report/src/Extensions/ClearFormattingExtension/index.html +0 -116
  75. package/coverage/lcov-report/src/Extensions/CodeBlockExtension/CodeBlockExtension.ts.html +0 -187
  76. package/coverage/lcov-report/src/Extensions/CodeBlockExtension/index.html +0 -116
  77. package/coverage/lcov-report/src/Extensions/CommandsExtension/CommandsExtension.ts.html +0 -247
  78. package/coverage/lcov-report/src/Extensions/CommandsExtension/index.html +0 -116
  79. package/coverage/lcov-report/src/Extensions/Extensions.ts.html +0 -349
  80. package/coverage/lcov-report/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts.html +0 -289
  81. package/coverage/lcov-report/src/Extensions/FetchUrlExtension/index.html +0 -116
  82. package/coverage/lcov-report/src/Extensions/ImageExtension/AssetImageExtension.ts.html +0 -412
  83. package/coverage/lcov-report/src/Extensions/ImageExtension/ImageExtension.ts.html +0 -142
  84. package/coverage/lcov-report/src/Extensions/ImageExtension/index.html +0 -131
  85. package/coverage/lcov-report/src/Extensions/LinkExtension/AssetLinkExtension.ts.html +0 -466
  86. package/coverage/lcov-report/src/Extensions/LinkExtension/LinkExtension.ts.html +0 -400
  87. package/coverage/lcov-report/src/Extensions/LinkExtension/common.ts.html +0 -115
  88. package/coverage/lcov-report/src/Extensions/LinkExtension/index.html +0 -146
  89. package/coverage/lcov-report/src/Extensions/PreformattedExtension/PreformattedExtension.ts.html +0 -340
  90. package/coverage/lcov-report/src/Extensions/PreformattedExtension/index.html +0 -116
  91. package/coverage/lcov-report/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.tsx.html +0 -325
  92. package/coverage/lcov-report/src/Extensions/UnsuportedExtension/index.html +0 -116
  93. package/coverage/lcov-report/src/Extensions/index.html +0 -116
  94. package/coverage/lcov-report/src/hooks/index.html +0 -161
  95. package/coverage/lcov-report/src/hooks/index.ts.html +0 -91
  96. package/coverage/lcov-report/src/hooks/useExpandedSelection.ts.html +0 -217
  97. package/coverage/lcov-report/src/hooks/useExtensionNames.ts.html +0 -130
  98. package/coverage/lcov-report/src/hooks/useFocus.ts.html +0 -268
  99. package/coverage/lcov-report/src/index.html +0 -116
  100. package/coverage/lcov-report/src/index.ts.html +0 -112
  101. package/coverage/lcov-report/src/ui/Button/Button.tsx.html +0 -190
  102. package/coverage/lcov-report/src/ui/Button/index.html +0 -116
  103. package/coverage/lcov-report/src/ui/CollapseBox/CollapseBox.tsx.html +0 -193
  104. package/coverage/lcov-report/src/ui/CollapseBox/index.html +0 -116
  105. package/coverage/lcov-report/src/ui/Fields/Checkbox/Checkbox.tsx.html +0 -232
  106. package/coverage/lcov-report/src/ui/Fields/Checkbox/index.html +0 -116
  107. package/coverage/lcov-report/src/ui/Fields/Input/Input.tsx.html +0 -160
  108. package/coverage/lcov-report/src/ui/Fields/Input/index.html +0 -116
  109. package/coverage/lcov-report/src/ui/Fields/InputContainer/InputContainer.tsx.html +0 -172
  110. package/coverage/lcov-report/src/ui/Fields/InputContainer/index.html +0 -116
  111. package/coverage/lcov-report/src/ui/Fields/MatrixAsset/MatrixAsset.tsx.html +0 -256
  112. package/coverage/lcov-report/src/ui/Fields/MatrixAsset/index.html +0 -116
  113. package/coverage/lcov-report/src/ui/Fields/Select/Select.tsx.html +0 -283
  114. package/coverage/lcov-report/src/ui/Fields/Select/index.html +0 -116
  115. package/coverage/lcov-report/src/ui/Modal/FormModal.tsx.html +0 -136
  116. package/coverage/lcov-report/src/ui/Modal/Modal.tsx.html +0 -397
  117. package/coverage/lcov-report/src/ui/Modal/index.html +0 -131
  118. package/coverage/lcov-report/src/ui/Tabs/Tabs.tsx.html +0 -208
  119. package/coverage/lcov-report/src/ui/Tabs/index.html +0 -116
  120. package/coverage/lcov-report/src/ui/ToolbarDropdown/ToolbarDropdown.tsx.html +0 -211
  121. package/coverage/lcov-report/src/ui/ToolbarDropdown/index.html +0 -116
  122. package/coverage/lcov-report/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.tsx.html +0 -184
  123. package/coverage/lcov-report/src/ui/ToolbarDropdownButton/index.html +0 -116
  124. package/coverage/lcov-report/src/utils/converters/htmlToSquizNode/htmlToSquizNode.ts.html +0 -166
  125. package/coverage/lcov-report/src/utils/converters/htmlToSquizNode/index.html +0 -116
  126. package/coverage/lcov-report/src/utils/converters/mocks/index.html +0 -116
  127. package/coverage/lcov-report/src/utils/converters/mocks/squizNodeJson.mock.ts.html +0 -895
  128. package/coverage/lcov-report/src/utils/converters/remirrorNodeToSquizNode/index.html +0 -116
  129. package/coverage/lcov-report/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts.html +0 -976
  130. package/coverage/lcov-report/src/utils/converters/squizNodeToRemirrorNode/index.html +0 -116
  131. package/coverage/lcov-report/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts.html +0 -748
  132. package/coverage/lcov-report/src/utils/createToolbarPositioner.ts.html +0 -469
  133. package/coverage/lcov-report/src/utils/getCursorRect.ts.html +0 -100
  134. package/coverage/lcov-report/src/utils/getMarkNamesByGroup.ts.html +0 -106
  135. package/coverage/lcov-report/src/utils/getNodeNamesByGroup.ts.html +0 -106
  136. package/coverage/lcov-report/src/utils/getShortcutSymbol.ts.html +0 -97
  137. package/coverage/lcov-report/src/utils/index.html +0 -206
  138. package/coverage/lcov-report/src/utils/undefinedIfEmpty.ts.html +0 -94
  139. package/coverage/lcov-report/src/utils/validation.ts.html +0 -133
  140. package/coverage/lcov.info +0 -2737
package/coverage/lcov-report/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx.html DELETED
@@ -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
-