@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

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 (457) hide show
  1. package/.eslintrc.json +41 -0
  2. package/CHANGELOG.md +155 -0
  3. package/README.md +74 -0
  4. package/build.js +21 -0
  5. package/coverage/clover.xml +1544 -0
  6. package/coverage/coverage-final.json +74 -0
  7. package/coverage/lcov-report/base.css +224 -0
  8. package/coverage/lcov-report/block-navigation.js +87 -0
  9. package/coverage/lcov-report/favicon.png +0 -0
  10. package/coverage/lcov-report/index.html +911 -0
  11. package/coverage/lcov-report/prettify.css +1 -0
  12. package/coverage/lcov-report/prettify.js +2 -0
  13. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  14. package/coverage/lcov-report/sorter.js +196 -0
  15. package/coverage/lcov-report/src/Editor/Editor.tsx.html +436 -0
  16. package/coverage/lcov-report/src/Editor/EditorContext.ts.html +145 -0
  17. package/coverage/lcov-report/src/Editor/index.html +131 -0
  18. package/coverage/lcov-report/src/EditorToolbar/FloatingToolbar.tsx.html +271 -0
  19. package/coverage/lcov-report/src/EditorToolbar/Toolbar.tsx.html +265 -0
  20. package/coverage/lcov-report/src/EditorToolbar/Tools/Bold/BoldButton.tsx.html +178 -0
  21. package/coverage/lcov-report/src/EditorToolbar/Tools/Bold/index.html +116 -0
  22. package/coverage/lcov-report/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.tsx.html +229 -0
  23. package/coverage/lcov-report/src/EditorToolbar/Tools/ClearFormatting/index.html +116 -0
  24. package/coverage/lcov-report/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.tsx.html +187 -0
  25. package/coverage/lcov-report/src/EditorToolbar/Tools/HorizontalLine/index.html +116 -0
  26. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx.html +688 -0
  27. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/Form/index.html +116 -0
  28. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/ImageButton.tsx.html +301 -0
  29. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/ImageModal.tsx.html +181 -0
  30. package/coverage/lcov-report/src/EditorToolbar/Tools/Image/index.html +131 -0
  31. package/coverage/lcov-report/src/EditorToolbar/Tools/Italic/ItalicButton.tsx.html +178 -0
  32. package/coverage/lcov-report/src/EditorToolbar/Tools/Italic/index.html +116 -0
  33. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx.html +508 -0
  34. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/Form/index.html +116 -0
  35. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/LinkButton.tsx.html +286 -0
  36. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/LinkModal.tsx.html +196 -0
  37. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx.html +211 -0
  38. package/coverage/lcov-report/src/EditorToolbar/Tools/Link/index.html +146 -0
  39. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/ListButtons.tsx.html +127 -0
  40. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.tsx.html +175 -0
  41. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/OrderedList/index.html +116 -0
  42. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.tsx.html +175 -0
  43. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/UnorderedList/index.html +116 -0
  44. package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/index.html +116 -0
  45. package/coverage/lcov-report/src/EditorToolbar/Tools/Redo/RedoButton.tsx.html +178 -0
  46. package/coverage/lcov-report/src/EditorToolbar/Tools/Redo/index.html +116 -0
  47. package/coverage/lcov-report/src/EditorToolbar/Tools/Table/TableButton.tsx.html +181 -0
  48. package/coverage/lcov-report/src/EditorToolbar/Tools/Table/index.html +116 -0
  49. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx.html +178 -0
  50. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/CenterAlign/index.html +116 -0
  51. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx.html +178 -0
  52. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/JustifyAlign/index.html +116 -0
  53. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx.html +178 -0
  54. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/LeftAlign/index.html +116 -0
  55. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx.html +178 -0
  56. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/RightAlign/index.html +116 -0
  57. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx.html +148 -0
  58. package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/index.html +116 -0
  59. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.tsx.html +181 -0
  60. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/CodeBlock/index.html +116 -0
  61. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx.html +241 -0
  62. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Heading/index.html +116 -0
  63. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx.html +160 -0
  64. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Paragraph/index.html +116 -0
  65. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx.html +181 -0
  66. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Preformatted/index.html +116 -0
  67. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx.html +247 -0
  68. package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/index.html +116 -0
  69. package/coverage/lcov-report/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx.html +178 -0
  70. package/coverage/lcov-report/src/EditorToolbar/Tools/Underline/index.html +116 -0
  71. package/coverage/lcov-report/src/EditorToolbar/Tools/Undo/UndoButton.tsx.html +178 -0
  72. package/coverage/lcov-report/src/EditorToolbar/Tools/Undo/index.html +116 -0
  73. package/coverage/lcov-report/src/EditorToolbar/index.html +146 -0
  74. package/coverage/lcov-report/src/EditorToolbar/index.ts.html +91 -0
  75. package/coverage/lcov-report/src/Extensions/ClearFormattingExtension/ClearFormattingExtension.ts.html +256 -0
  76. package/coverage/lcov-report/src/Extensions/ClearFormattingExtension/index.html +116 -0
  77. package/coverage/lcov-report/src/Extensions/CodeBlockExtension/CodeBlockExtension.ts.html +187 -0
  78. package/coverage/lcov-report/src/Extensions/CodeBlockExtension/index.html +116 -0
  79. package/coverage/lcov-report/src/Extensions/CommandsExtension/CommandsExtension.ts.html +247 -0
  80. package/coverage/lcov-report/src/Extensions/CommandsExtension/index.html +116 -0
  81. package/coverage/lcov-report/src/Extensions/Extensions.ts.html +349 -0
  82. package/coverage/lcov-report/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts.html +289 -0
  83. package/coverage/lcov-report/src/Extensions/FetchUrlExtension/index.html +116 -0
  84. package/coverage/lcov-report/src/Extensions/ImageExtension/AssetImageExtension.ts.html +412 -0
  85. package/coverage/lcov-report/src/Extensions/ImageExtension/ImageExtension.ts.html +142 -0
  86. package/coverage/lcov-report/src/Extensions/ImageExtension/index.html +131 -0
  87. package/coverage/lcov-report/src/Extensions/LinkExtension/AssetLinkExtension.ts.html +466 -0
  88. package/coverage/lcov-report/src/Extensions/LinkExtension/LinkExtension.ts.html +400 -0
  89. package/coverage/lcov-report/src/Extensions/LinkExtension/common.ts.html +115 -0
  90. package/coverage/lcov-report/src/Extensions/LinkExtension/index.html +146 -0
  91. package/coverage/lcov-report/src/Extensions/PreformattedExtension/PreformattedExtension.ts.html +340 -0
  92. package/coverage/lcov-report/src/Extensions/PreformattedExtension/index.html +116 -0
  93. package/coverage/lcov-report/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.tsx.html +325 -0
  94. package/coverage/lcov-report/src/Extensions/UnsuportedExtension/index.html +116 -0
  95. package/coverage/lcov-report/src/Extensions/index.html +116 -0
  96. package/coverage/lcov-report/src/hooks/index.html +161 -0
  97. package/coverage/lcov-report/src/hooks/index.ts.html +91 -0
  98. package/coverage/lcov-report/src/hooks/useExpandedSelection.ts.html +217 -0
  99. package/coverage/lcov-report/src/hooks/useExtensionNames.ts.html +130 -0
  100. package/coverage/lcov-report/src/hooks/useFocus.ts.html +268 -0
  101. package/coverage/lcov-report/src/index.html +116 -0
  102. package/coverage/lcov-report/src/index.ts.html +112 -0
  103. package/coverage/lcov-report/src/ui/Button/Button.tsx.html +190 -0
  104. package/coverage/lcov-report/src/ui/Button/index.html +116 -0
  105. package/coverage/lcov-report/src/ui/CollapseBox/CollapseBox.tsx.html +193 -0
  106. package/coverage/lcov-report/src/ui/CollapseBox/index.html +116 -0
  107. package/coverage/lcov-report/src/ui/Fields/Checkbox/Checkbox.tsx.html +232 -0
  108. package/coverage/lcov-report/src/ui/Fields/Checkbox/index.html +116 -0
  109. package/coverage/lcov-report/src/ui/Fields/Input/Input.tsx.html +160 -0
  110. package/coverage/lcov-report/src/ui/Fields/Input/index.html +116 -0
  111. package/coverage/lcov-report/src/ui/Fields/InputContainer/InputContainer.tsx.html +172 -0
  112. package/coverage/lcov-report/src/ui/Fields/InputContainer/index.html +116 -0
  113. package/coverage/lcov-report/src/ui/Fields/MatrixAsset/MatrixAsset.tsx.html +256 -0
  114. package/coverage/lcov-report/src/ui/Fields/MatrixAsset/index.html +116 -0
  115. package/coverage/lcov-report/src/ui/Fields/Select/Select.tsx.html +283 -0
  116. package/coverage/lcov-report/src/ui/Fields/Select/index.html +116 -0
  117. package/coverage/lcov-report/src/ui/Modal/FormModal.tsx.html +136 -0
  118. package/coverage/lcov-report/src/ui/Modal/Modal.tsx.html +397 -0
  119. package/coverage/lcov-report/src/ui/Modal/index.html +131 -0
  120. package/coverage/lcov-report/src/ui/Tabs/Tabs.tsx.html +208 -0
  121. package/coverage/lcov-report/src/ui/Tabs/index.html +116 -0
  122. package/coverage/lcov-report/src/ui/ToolbarDropdown/ToolbarDropdown.tsx.html +211 -0
  123. package/coverage/lcov-report/src/ui/ToolbarDropdown/index.html +116 -0
  124. package/coverage/lcov-report/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.tsx.html +184 -0
  125. package/coverage/lcov-report/src/ui/ToolbarDropdownButton/index.html +116 -0
  126. package/coverage/lcov-report/src/utils/converters/htmlToSquizNode/htmlToSquizNode.ts.html +166 -0
  127. package/coverage/lcov-report/src/utils/converters/htmlToSquizNode/index.html +116 -0
  128. package/coverage/lcov-report/src/utils/converters/mocks/index.html +116 -0
  129. package/coverage/lcov-report/src/utils/converters/mocks/squizNodeJson.mock.ts.html +895 -0
  130. package/coverage/lcov-report/src/utils/converters/remirrorNodeToSquizNode/index.html +116 -0
  131. package/coverage/lcov-report/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts.html +976 -0
  132. package/coverage/lcov-report/src/utils/converters/squizNodeToRemirrorNode/index.html +116 -0
  133. package/coverage/lcov-report/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts.html +748 -0
  134. package/coverage/lcov-report/src/utils/createToolbarPositioner.ts.html +469 -0
  135. package/coverage/lcov-report/src/utils/getCursorRect.ts.html +100 -0
  136. package/coverage/lcov-report/src/utils/getMarkNamesByGroup.ts.html +106 -0
  137. package/coverage/lcov-report/src/utils/getNodeNamesByGroup.ts.html +106 -0
  138. package/coverage/lcov-report/src/utils/getShortcutSymbol.ts.html +97 -0
  139. package/coverage/lcov-report/src/utils/index.html +206 -0
  140. package/coverage/lcov-report/src/utils/undefinedIfEmpty.ts.html +94 -0
  141. package/coverage/lcov-report/src/utils/validation.ts.html +133 -0
  142. package/coverage/lcov.info +2737 -0
  143. package/cypress/e2e/bold.spec.cy.ts +18 -0
  144. package/cypress/global.d.ts +9 -0
  145. package/cypress/support/commands.ts +130 -0
  146. package/cypress/support/e2e.ts +20 -0
  147. package/cypress/tsconfig.json +8 -0
  148. package/cypress.config.ts +7 -0
  149. package/demo/App.tsx +107 -0
  150. package/demo/AppContext.tsx +70 -0
  151. package/demo/index.html +13 -0
  152. package/demo/index.scss +33 -0
  153. package/demo/main.tsx +12 -0
  154. package/demo/public/favicon-dxp.svg +3 -0
  155. package/demo/resources.json +204 -0
  156. package/demo/sources.json +27 -0
  157. package/demo/vite-env.d.ts +1 -0
  158. package/file-transformer.js +1 -0
  159. package/jest.bootstrap.ts +3 -0
  160. package/jest.config.ts +27 -0
  161. package/lib/Editor/Editor.d.ts +16 -0
  162. package/lib/Editor/Editor.js +85 -0
  163. package/lib/Editor/EditorContext.d.ts +10 -0
  164. package/lib/Editor/EditorContext.js +16 -0
  165. package/lib/EditorToolbar/FloatingToolbar.d.ts +2 -0
  166. package/lib/EditorToolbar/FloatingToolbar.js +76 -0
  167. package/lib/EditorToolbar/Toolbar.d.ts +7 -0
  168. package/lib/EditorToolbar/Toolbar.js +47 -0
  169. package/lib/EditorToolbar/Tools/Bold/BoldButton.d.ts +3 -0
  170. package/lib/EditorToolbar/Tools/Bold/BoldButton.js +23 -0
  171. package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.d.ts +3 -0
  172. package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.js +57 -0
  173. package/lib/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.d.ts +3 -0
  174. package/lib/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.js +25 -0
  175. package/lib/EditorToolbar/Tools/Image/Form/ImageForm.d.ts +18 -0
  176. package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js +143 -0
  177. package/lib/EditorToolbar/Tools/Image/ImageButton.d.ts +6 -0
  178. package/lib/EditorToolbar/Tools/Image/ImageButton.js +76 -0
  179. package/lib/EditorToolbar/Tools/Image/ImageModal.d.ts +9 -0
  180. package/lib/EditorToolbar/Tools/Image/ImageModal.js +24 -0
  181. package/lib/EditorToolbar/Tools/Italic/ItalicButton.d.ts +3 -0
  182. package/lib/EditorToolbar/Tools/Italic/ItalicButton.js +23 -0
  183. package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts +19 -0
  184. package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js +63 -0
  185. package/lib/EditorToolbar/Tools/Link/LinkButton.d.ts +6 -0
  186. package/lib/EditorToolbar/Tools/Link/LinkButton.js +71 -0
  187. package/lib/EditorToolbar/Tools/Link/LinkModal.d.ts +9 -0
  188. package/lib/EditorToolbar/Tools/Link/LinkModal.js +27 -0
  189. package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.d.ts +4 -0
  190. package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js +54 -0
  191. package/lib/EditorToolbar/Tools/Lists/ListButtons.d.ts +3 -0
  192. package/lib/EditorToolbar/Tools/Lists/ListButtons.js +14 -0
  193. package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.d.ts +3 -0
  194. package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.js +22 -0
  195. package/lib/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.d.ts +3 -0
  196. package/lib/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.js +22 -0
  197. package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts +3 -0
  198. package/lib/EditorToolbar/Tools/Redo/RedoButton.js +22 -0
  199. package/lib/EditorToolbar/Tools/Table/TableButton.d.ts +3 -0
  200. package/lib/EditorToolbar/Tools/Table/TableButton.js +22 -0
  201. package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.d.ts +3 -0
  202. package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.js +22 -0
  203. package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.d.ts +3 -0
  204. package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.js +22 -0
  205. package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.d.ts +3 -0
  206. package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.js +22 -0
  207. package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.d.ts +3 -0
  208. package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js +22 -0
  209. package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.d.ts +3 -0
  210. package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js +21 -0
  211. package/lib/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.d.ts +3 -0
  212. package/lib/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.js +22 -0
  213. package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts +6 -0
  214. package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js +37 -0
  215. package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts +3 -0
  216. package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js +21 -0
  217. package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts +3 -0
  218. package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js +22 -0
  219. package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts +3 -0
  220. package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js +46 -0
  221. package/lib/EditorToolbar/Tools/Underline/UnderlineButton.d.ts +3 -0
  222. package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js +23 -0
  223. package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts +3 -0
  224. package/lib/EditorToolbar/Tools/Undo/UndoButton.js +22 -0
  225. package/lib/EditorToolbar/index.d.ts +2 -0
  226. package/lib/EditorToolbar/index.js +18 -0
  227. package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.d.ts +5 -0
  228. package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.js +63 -0
  229. package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.d.ts +5 -0
  230. package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.js +30 -0
  231. package/lib/Extensions/CommandsExtension/CommandsExtension.d.ts +20 -0
  232. package/lib/Extensions/CommandsExtension/CommandsExtension.js +52 -0
  233. package/lib/Extensions/Extensions.d.ts +17 -0
  234. package/lib/Extensions/Extensions.js +73 -0
  235. package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.d.ts +12 -0
  236. package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.js +63 -0
  237. package/lib/Extensions/ImageExtension/AssetImageExtension.d.ts +17 -0
  238. package/lib/Extensions/ImageExtension/AssetImageExtension.js +91 -0
  239. package/lib/Extensions/ImageExtension/ImageExtension.d.ts +7 -0
  240. package/lib/Extensions/ImageExtension/ImageExtension.js +18 -0
  241. package/lib/Extensions/LinkExtension/AssetLinkExtension.d.ts +27 -0
  242. package/lib/Extensions/LinkExtension/AssetLinkExtension.js +101 -0
  243. package/lib/Extensions/LinkExtension/LinkExtension.d.ts +23 -0
  244. package/lib/Extensions/LinkExtension/LinkExtension.js +87 -0
  245. package/lib/Extensions/LinkExtension/common.d.ts +7 -0
  246. package/lib/Extensions/LinkExtension/common.js +14 -0
  247. package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts +12 -0
  248. package/lib/Extensions/PreformattedExtension/PreformattedExtension.js +76 -0
  249. package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.d.ts +10 -0
  250. package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.js +76 -0
  251. package/lib/hooks/index.d.ts +2 -0
  252. package/lib/hooks/index.js +18 -0
  253. package/lib/hooks/useExpandedSelection.d.ts +23 -0
  254. package/lib/hooks/useExpandedSelection.js +37 -0
  255. package/lib/hooks/useExtensionNames.d.ts +1 -0
  256. package/lib/hooks/useExtensionNames.js +16 -0
  257. package/lib/hooks/useFocus.d.ts +8 -0
  258. package/lib/hooks/useFocus.js +43 -0
  259. package/lib/index.css +1525 -0
  260. package/lib/index.d.ts +8 -0
  261. package/lib/index.js +16 -0
  262. package/lib/types.d.ts +7 -0
  263. package/lib/types.js +2 -0
  264. package/lib/ui/Button/Button.d.ts +12 -0
  265. package/lib/ui/Button/Button.js +13 -0
  266. package/lib/ui/CollapseBox/CollapseBox.d.ts +7 -0
  267. package/lib/ui/CollapseBox/CollapseBox.js +48 -0
  268. package/lib/ui/Fields/Checkbox/Checkbox.d.ts +9 -0
  269. package/lib/ui/Fields/Checkbox/Checkbox.js +47 -0
  270. package/lib/ui/Fields/Input/Input.d.ts +3 -0
  271. package/lib/ui/Fields/Input/Input.js +33 -0
  272. package/lib/ui/Fields/InputContainer/InputContainer.d.ts +9 -0
  273. package/lib/ui/Fields/InputContainer/InputContainer.js +16 -0
  274. package/lib/ui/Fields/MatrixAsset/MatrixAsset.d.ts +19 -0
  275. package/lib/ui/Fields/MatrixAsset/MatrixAsset.js +30 -0
  276. package/lib/ui/Modal/FormModal.d.ts +5 -0
  277. package/lib/ui/Modal/FormModal.js +39 -0
  278. package/lib/ui/Modal/Modal.d.ts +11 -0
  279. package/lib/ui/Modal/Modal.js +79 -0
  280. package/lib/ui/Tabs/Tabs.d.ts +11 -0
  281. package/lib/ui/Tabs/Tabs.js +46 -0
  282. package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts +7 -0
  283. package/lib/ui/ToolbarDropdown/ToolbarDropdown.js +48 -0
  284. package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.d.ts +11 -0
  285. package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.js +15 -0
  286. package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.d.ts +5 -0
  287. package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.js +23 -0
  288. package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.props.d.ts +3 -0
  289. package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.props.js +2 -0
  290. package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.d.ts +11 -0
  291. package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js +229 -0
  292. package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.d.ts +9 -0
  293. package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js +205 -0
  294. package/lib/utils/createToolbarPositioner.d.ts +18 -0
  295. package/lib/utils/createToolbarPositioner.js +96 -0
  296. package/lib/utils/getCursorRect.d.ts +2 -0
  297. package/lib/utils/getCursorRect.js +7 -0
  298. package/lib/utils/getMarkNamesByGroup.d.ts +2 -0
  299. package/lib/utils/getMarkNamesByGroup.js +9 -0
  300. package/lib/utils/getNodeNamesByGroup.d.ts +2 -0
  301. package/lib/utils/getNodeNamesByGroup.js +9 -0
  302. package/lib/utils/getShortcutSymbol.d.ts +1 -0
  303. package/lib/utils/getShortcutSymbol.js +8 -0
  304. package/lib/utils/undefinedIfEmpty.d.ts +1 -0
  305. package/lib/utils/undefinedIfEmpty.js +7 -0
  306. package/lib/utils/validation.d.ts +3 -0
  307. package/lib/utils/validation.js +16 -0
  308. package/package.json +83 -0
  309. package/postcss.config.js +12 -0
  310. package/src/Editor/Editor.spec.tsx +465 -0
  311. package/src/Editor/Editor.tsx +117 -0
  312. package/src/Editor/EditorContext.spec.tsx +25 -0
  313. package/src/Editor/EditorContext.ts +20 -0
  314. package/src/Editor/_editor.scss +430 -0
  315. package/src/EditorToolbar/FloatingToolbar.spec.tsx +49 -0
  316. package/src/EditorToolbar/FloatingToolbar.tsx +62 -0
  317. package/src/EditorToolbar/Toolbar.tsx +60 -0
  318. package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx +19 -0
  319. package/src/EditorToolbar/Tools/Bold/BoldButton.tsx +31 -0
  320. package/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.spec.tsx +34 -0
  321. package/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.tsx +48 -0
  322. package/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.spec.tsx +23 -0
  323. package/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.tsx +34 -0
  324. package/src/EditorToolbar/Tools/Image/Form/ImageForm.spec.tsx +117 -0
  325. package/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx +201 -0
  326. package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx +385 -0
  327. package/src/EditorToolbar/Tools/Image/ImageButton.tsx +72 -0
  328. package/src/EditorToolbar/Tools/Image/ImageModal.spec.tsx +123 -0
  329. package/src/EditorToolbar/Tools/Image/ImageModal.tsx +32 -0
  330. package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx +19 -0
  331. package/src/EditorToolbar/Tools/Italic/ItalicButton.tsx +31 -0
  332. package/src/EditorToolbar/Tools/Link/Form/LinkForm.spec.tsx +79 -0
  333. package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx +141 -0
  334. package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx +402 -0
  335. package/src/EditorToolbar/Tools/Link/LinkButton.tsx +67 -0
  336. package/src/EditorToolbar/Tools/Link/LinkModal.tsx +37 -0
  337. package/src/EditorToolbar/Tools/Link/RemoveLinkButton.spec.tsx +143 -0
  338. package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx +42 -0
  339. package/src/EditorToolbar/Tools/Lists/ListButtons.tsx +14 -0
  340. package/src/EditorToolbar/Tools/Lists/OrderedList/OrderListButton.spec.tsx +39 -0
  341. package/src/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.tsx +30 -0
  342. package/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedList.spec.tsx +19 -0
  343. package/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.tsx +30 -0
  344. package/src/EditorToolbar/Tools/Redo/RedoButton.spec.tsx +59 -0
  345. package/src/EditorToolbar/Tools/Redo/RedoButton.tsx +31 -0
  346. package/src/EditorToolbar/Tools/Table/TableButton.spec.tsx +25 -0
  347. package/src/EditorToolbar/Tools/Table/TableButton.tsx +32 -0
  348. package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.spec.tsx +39 -0
  349. package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx +31 -0
  350. package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.spec.tsx +39 -0
  351. package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx +31 -0
  352. package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.spec.tsx +39 -0
  353. package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx +31 -0
  354. package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.spec.tsx +39 -0
  355. package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx +31 -0
  356. package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx +21 -0
  357. package/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.spec.tsx +47 -0
  358. package/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.tsx +32 -0
  359. package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.spec.tsx +56 -0
  360. package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx +52 -0
  361. package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.spec.tsx +30 -0
  362. package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx +25 -0
  363. package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.spec.tsx +47 -0
  364. package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx +32 -0
  365. package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.spec.tsx +51 -0
  366. package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx +54 -0
  367. package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx +19 -0
  368. package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx +31 -0
  369. package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx +70 -0
  370. package/src/EditorToolbar/Tools/Undo/UndoButton.tsx +31 -0
  371. package/src/EditorToolbar/_floating-toolbar.scss +9 -0
  372. package/src/EditorToolbar/_toolbar.scss +37 -0
  373. package/src/EditorToolbar/index.ts +2 -0
  374. package/src/Extensions/ClearFormattingExtension/ClearFormattingExtension.ts +57 -0
  375. package/src/Extensions/CodeBlockExtension/CodeBlockExtension.ts +34 -0
  376. package/src/Extensions/CommandsExtension/CommandsExtension.ts +54 -0
  377. package/src/Extensions/Extensions.ts +88 -0
  378. package/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts +68 -0
  379. package/src/Extensions/ImageExtension/AssetImageExtension.spec.ts +77 -0
  380. package/src/Extensions/ImageExtension/AssetImageExtension.ts +109 -0
  381. package/src/Extensions/ImageExtension/ImageExtension.ts +19 -0
  382. package/src/Extensions/LinkExtension/AssetLinkExtension.spec.ts +106 -0
  383. package/src/Extensions/LinkExtension/AssetLinkExtension.ts +127 -0
  384. package/src/Extensions/LinkExtension/LinkExtension.spec.ts +68 -0
  385. package/src/Extensions/LinkExtension/LinkExtension.ts +105 -0
  386. package/src/Extensions/LinkExtension/common.ts +10 -0
  387. package/src/Extensions/PreformattedExtension/PreformattedExtension.spec.ts +43 -0
  388. package/src/Extensions/PreformattedExtension/PreformattedExtension.ts +85 -0
  389. package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.spec.ts +137 -0
  390. package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.tsx +80 -0
  391. package/src/hooks/index.ts +2 -0
  392. package/src/hooks/useExpandedSelection.ts +44 -0
  393. package/src/hooks/useExtensionNames.ts +15 -0
  394. package/src/hooks/useFocus.ts +61 -0
  395. package/src/index.scss +24 -0
  396. package/src/index.ts +9 -0
  397. package/src/types.ts +10 -0
  398. package/src/ui/Button/Button.spec.tsx +44 -0
  399. package/src/ui/Button/Button.tsx +35 -0
  400. package/src/ui/Button/_button.scss +37 -0
  401. package/src/ui/CollapseBox/CollapseBox.spec.tsx +49 -0
  402. package/src/ui/CollapseBox/CollapseBox.tsx +36 -0
  403. package/src/ui/CollapseBox/_collapseBox.scss +23 -0
  404. package/src/ui/Fields/Checkbox/Checkbox.spec.tsx +50 -0
  405. package/src/ui/Fields/Checkbox/Checkbox.tsx +49 -0
  406. package/src/ui/Fields/Checkbox/_checkbox.scss +26 -0
  407. package/src/ui/Fields/Input/Input.spec.tsx +49 -0
  408. package/src/ui/Fields/Input/Input.tsx +25 -0
  409. package/src/ui/Fields/InputContainer/InputContainer.spec.tsx +18 -0
  410. package/src/ui/Fields/InputContainer/InputContainer.tsx +29 -0
  411. package/src/ui/Fields/MatrixAsset/MatrixAsset.spec.tsx +121 -0
  412. package/src/ui/Fields/MatrixAsset/MatrixAsset.tsx +57 -0
  413. package/src/ui/Fields/Select/Select.spec.tsx +30 -0
  414. package/src/ui/Fields/Select/Select.tsx +66 -0
  415. package/src/ui/Modal/FormModal.spec.tsx +21 -0
  416. package/src/ui/Modal/FormModal.tsx +17 -0
  417. package/src/ui/Modal/Modal.spec.tsx +136 -0
  418. package/src/ui/Modal/Modal.tsx +104 -0
  419. package/src/ui/Modal/_modal.scss +24 -0
  420. package/src/ui/Tabs/Tabs.spec.tsx +44 -0
  421. package/src/ui/Tabs/Tabs.tsx +41 -0
  422. package/src/ui/ToolbarDropdown/ToolbarDropdown.spec.tsx +80 -0
  423. package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx +42 -0
  424. package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss +32 -0
  425. package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.spec.tsx +48 -0
  426. package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.tsx +33 -0
  427. package/src/ui/ToolbarDropdownButton/_toolbar-dropdown-button.scss +25 -0
  428. package/src/ui/_forms.scss +32 -0
  429. package/src/ui/_typography.scss +95 -0
  430. package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.props.ts +3 -0
  431. package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.spec.ts +179 -0
  432. package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.ts +27 -0
  433. package/src/utils/converters/mocks/squizNodeJson.mock.ts +270 -0
  434. package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts +1058 -0
  435. package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts +297 -0
  436. package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts +878 -0
  437. package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts +221 -0
  438. package/src/utils/createToolbarPositioner.ts +128 -0
  439. package/src/utils/getCursorRect.ts +5 -0
  440. package/src/utils/getMarkNamesByGroup.spec.ts +20 -0
  441. package/src/utils/getMarkNamesByGroup.ts +7 -0
  442. package/src/utils/getNodeNamesByGroup.spec.ts +37 -0
  443. package/src/utils/getNodeNamesByGroup.ts +7 -0
  444. package/src/utils/getShortcutSymbol.spec.ts +27 -0
  445. package/src/utils/getShortcutSymbol.ts +4 -0
  446. package/src/utils/undefinedIfEmpty.spec.ts +12 -0
  447. package/src/utils/undefinedIfEmpty.ts +3 -0
  448. package/src/utils/validation.spec.ts +22 -0
  449. package/src/utils/validation.ts +16 -0
  450. package/tailwind.config.cjs +87 -0
  451. package/tests/index.ts +4 -0
  452. package/tests/mockResourceBrowserContext.tsx +99 -0
  453. package/tests/renderWithContext.tsx +75 -0
  454. package/tests/renderWithEditor.tsx +123 -0
  455. package/tests/select.ts +16 -0
  456. package/tsconfig.json +22 -0
  457. package/vite.config.ts +27 -0
package/package.json ADDED
@@ -0,0 +1,83 @@
1
+ {
2
+ "name": "@squiz/formatted-text-editor",
3
+ "version": "0.0.0-rbv2-20240530041851",
4
+ "main": "lib/index.js",
5
+ "types": "lib/index.d.ts",
6
+ "private": false,
7
+ "publishConfig": {
8
+ "access": "public"
9
+ },
10
+ "scripts": {
11
+ "build": "vite build",
12
+ "clean": "rimraf ./lib tsconfig.tsbuildinfo",
13
+ "compile": "npm run clean && npm run compile:styles && npm run compile:code",
14
+ "compile:code": "tsc",
15
+ "compile:styles": "node build.js",
16
+ "dev": "vite",
17
+ "test": "jest",
18
+ "test:coverage": "jest --coverage",
19
+ "test:e2e": "vite build && vite preview --port 8080 & cypress open",
20
+ "test:watch": "jest --watch"
21
+ },
22
+ "dependencies": {
23
+ "@headlessui/react": "1.7.11",
24
+ "@mui/icons-material": "5.11.16",
25
+ "@remirror/extension-react-tables": "^2.2.19",
26
+ "@remirror/react": "2.0.25",
27
+ "@squiz/dx-json-schema-lib": "^1.65.1",
28
+ "@squiz/matrix-resource-browser-plugin": "^2.0.16-rc.0",
29
+ "@squiz/resource-browser": "^2.1.8-rc.0",
30
+ "clsx": "1.2.1",
31
+ "react-hook-form": "7.43.2",
32
+ "react-image-size": "2.0.0",
33
+ "remirror": "2.0.26"
34
+ },
35
+ "devDependencies": {
36
+ "@testing-library/cypress": "9.0.0",
37
+ "@testing-library/jest-dom": "5.16.5",
38
+ "@testing-library/react": "14.0.0",
39
+ "@testing-library/user-event": "14.4.3",
40
+ "@types/node": "20.12.4",
41
+ "@types/react": "^18.2.45",
42
+ "@types/react-dom": "^18.2.18",
43
+ "@vitejs/plugin-react": "3.0.0",
44
+ "autoprefixer": "10.4.13",
45
+ "cypress": "12.5.1",
46
+ "deepmerge": "4.3.0",
47
+ "eslint-plugin-cypress": "2.12.1",
48
+ "eslint-plugin-jsx-a11y": "6.7.1",
49
+ "eslint-plugin-react": "7.32.2",
50
+ "jest": "29.4.1",
51
+ "jest-environment-jsdom": "29.4.1",
52
+ "jest-remirror": "2.1.3",
53
+ "postcss": "8.4.31",
54
+ "postcss-nested": "6.0.0",
55
+ "postcss-prefix-selector": "1.16.0",
56
+ "react": "18.2.0",
57
+ "react-diff-viewer-continued": "3.2.6",
58
+ "react-dom": "18.2.0",
59
+ "rimraf": "4.1.2",
60
+ "tailwindcss": "3.2.6",
61
+ "ts-jest": "29.0.5",
62
+ "typescript": "4.9.3",
63
+ "vite": "^4.5.0"
64
+ },
65
+ "peerDependencies": {
66
+ "@types/react": "^16.14.0 || ^17 || ^18",
67
+ "@types/react-dom": "^16.9.0 || ^17 || ^18",
68
+ "lib0": "0.2.69",
69
+ "react": "^16.14.0 || ^17 || ^18",
70
+ "react-dom": "^16.14.0 || ^17 || ^18"
71
+ },
72
+ "peerDependenciesMeta": {
73
+ "@types/react": {
74
+ "optional": true
75
+ },
76
+ "@types/react-dom": {
77
+ "optional": true
78
+ }
79
+ },
80
+ "volta": {
81
+ "node": "18.15.0"
82
+ }
83
+ }
@@ -0,0 +1,12 @@
1
+ module.exports = {
2
+ plugins: [
3
+ require('tailwindcss'),
4
+ require('autoprefixer'),
5
+ require('postcss-nested'),
6
+ require('postcss-prefix-selector')({
7
+ prefix: '.squiz-fte-scope',
8
+ exclude: [/\.squiz-fte-scope__floating-popover/, /\.squiz-fte-scope__editor/],
9
+ includeFiles: ['./src/index.scss'],
10
+ }),
11
+ ],
12
+ };
@@ -0,0 +1,465 @@
1
+ import '@testing-library/jest-dom';
2
+ import React from 'react';
3
+ import { act, fireEvent, render, screen, within } from '@testing-library/react';
4
+ import { MatrixResourceBrowserPluginProps } from '@squiz/matrix-resource-browser-plugin';
5
+ import Editor from './Editor';
6
+ import { renderWithEditor, mockResourceBrowserContext } from '../../tests';
7
+ import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
8
+ import * as useFocus from '../hooks/useFocus';
9
+
10
+ const handleFocusMock = jest.fn();
11
+ const handleBlurMock = jest.fn();
12
+
13
+ describe('Formatted text editor', () => {
14
+ it('Renders the text editor', () => {
15
+ render(<Editor />);
16
+ expect(screen.getByRole('textbox')).toBeInTheDocument();
17
+ });
18
+
19
+ it('Renders the placeholder if there is no content', () => {
20
+ render(<Editor />);
21
+ expect(document.querySelector(`[data-placeholder='Write something']`)).toBeInTheDocument();
22
+ });
23
+
24
+ it('Renders the bold button', () => {
25
+ render(<Editor />);
26
+ expect(screen.getByRole('button', { name: 'Bold (Ctrl+B)' })).toBeInTheDocument();
27
+ });
28
+
29
+ it('Renders the italic button', () => {
30
+ render(<Editor />);
31
+ expect(screen.getByRole('button', { name: 'Italic (Ctrl+I)' })).toBeInTheDocument();
32
+ });
33
+
34
+ it('Renders the underline button', () => {
35
+ render(<Editor />);
36
+ expect(screen.getByRole('button', { name: 'Underline (Ctrl+U)' })).toBeInTheDocument();
37
+ });
38
+
39
+ it('Renders the align left button', () => {
40
+ render(<Editor />);
41
+ expect(screen.getByRole('button', { name: 'Align left' })).toBeInTheDocument();
42
+ });
43
+
44
+ it('Applies left alignment styling to text when clicked', () => {
45
+ const { baseElement } = render(<Editor />);
46
+ expect(baseElement).toBeTruthy();
47
+
48
+ expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
49
+
50
+ const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
51
+ expect(leftAlignButton).toBeTruthy();
52
+
53
+ fireEvent.click(leftAlignButton);
54
+ expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
55
+ });
56
+
57
+ it('Applies center alignment styling to text when clicked', () => {
58
+ const { baseElement } = render(<Editor />);
59
+ expect(baseElement).toBeTruthy();
60
+
61
+ expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeFalsy();
62
+
63
+ const centerAlignButton = baseElement.querySelector('button[title="Align center"]') as HTMLButtonElement;
64
+ expect(centerAlignButton).toBeTruthy();
65
+
66
+ fireEvent.click(centerAlignButton);
67
+ expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeTruthy();
68
+ });
69
+
70
+ it('Applies right alignment styling to text when clicked', () => {
71
+ const { baseElement } = render(<Editor />);
72
+ expect(baseElement).toBeTruthy();
73
+
74
+ expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeFalsy();
75
+
76
+ const rightAlignButton = baseElement.querySelector('button[title="Align right"]') as HTMLButtonElement;
77
+ expect(rightAlignButton).toBeTruthy();
78
+
79
+ fireEvent.click(rightAlignButton);
80
+ expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeTruthy();
81
+ });
82
+
83
+ it('Applies justify alignment styling to text when clicked', () => {
84
+ const { baseElement } = render(<Editor />);
85
+ expect(baseElement).toBeTruthy();
86
+
87
+ expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeFalsy();
88
+
89
+ const justifyAlignButton = baseElement.querySelector('button[title="Justify"]') as HTMLButtonElement;
90
+ expect(justifyAlignButton).toBeTruthy();
91
+
92
+ fireEvent.click(justifyAlignButton);
93
+ expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeTruthy();
94
+ });
95
+
96
+ it('Applies Heading 1 styling to text when clicked', () => {
97
+ const { baseElement } = render(<Editor />);
98
+ expect(baseElement).toBeTruthy();
99
+
100
+ expect(baseElement.querySelector('div.remirror-editor h1')).toBeFalsy();
101
+
102
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
103
+ expect(headingDropdown).toBeTruthy();
104
+ fireEvent.click(headingDropdown);
105
+
106
+ const h1Button = baseElement.querySelector('button[title="Heading 1"]') as HTMLButtonElement;
107
+ expect(h1Button).toBeTruthy();
108
+ fireEvent.click(h1Button);
109
+
110
+ expect(baseElement.querySelector('div.remirror-editor h1')).toBeTruthy();
111
+ });
112
+
113
+ it('Applies Heading 2 styling to text when clicked', () => {
114
+ const { baseElement } = render(<Editor />);
115
+ expect(baseElement).toBeTruthy();
116
+
117
+ expect(baseElement.querySelector('div.remirror-editor h2')).toBeFalsy();
118
+
119
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
120
+ expect(headingDropdown).toBeTruthy();
121
+ fireEvent.click(headingDropdown);
122
+
123
+ const h2Button = baseElement.querySelector('button[title="Heading 2"]') as HTMLButtonElement;
124
+ expect(h2Button).toBeTruthy();
125
+ fireEvent.click(h2Button);
126
+
127
+ expect(baseElement.querySelector('div.remirror-editor h2')).toBeTruthy();
128
+ });
129
+
130
+ it('Applies Heading 3 styling to text when clicked', () => {
131
+ const { baseElement } = render(<Editor />);
132
+ expect(baseElement).toBeTruthy();
133
+
134
+ expect(baseElement.querySelector('div.remirror-editor h3')).toBeFalsy();
135
+
136
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
137
+ expect(headingDropdown).toBeTruthy();
138
+ fireEvent.click(headingDropdown);
139
+
140
+ const h3Button = baseElement.querySelector('button[title="Heading 3"]') as HTMLButtonElement;
141
+ expect(h3Button).toBeTruthy();
142
+ fireEvent.click(h3Button);
143
+
144
+ expect(baseElement.querySelector('div.remirror-editor h3')).toBeTruthy();
145
+ });
146
+
147
+ it('Applies Heading 4 styling to text when clicked', () => {
148
+ const { baseElement } = render(<Editor />);
149
+ expect(baseElement).toBeTruthy();
150
+
151
+ expect(baseElement.querySelector('div.remirror-editor h4')).toBeFalsy();
152
+
153
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
154
+ expect(headingDropdown).toBeTruthy();
155
+ fireEvent.click(headingDropdown);
156
+
157
+ const h4Button = baseElement.querySelector('button[title="Heading 4"]') as HTMLButtonElement;
158
+ expect(h4Button).toBeTruthy();
159
+ fireEvent.click(h4Button);
160
+
161
+ expect(baseElement.querySelector('div.remirror-editor h4')).toBeTruthy();
162
+ });
163
+
164
+ it('Applies Heading 5 styling to text when clicked', () => {
165
+ const { baseElement } = render(<Editor />);
166
+ expect(baseElement).toBeTruthy();
167
+
168
+ expect(baseElement.querySelector('div.remirror-editor h5')).toBeFalsy();
169
+
170
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
171
+ expect(headingDropdown).toBeTruthy();
172
+ fireEvent.click(headingDropdown);
173
+
174
+ const h5Button = baseElement.querySelector('button[title="Heading 5"]') as HTMLButtonElement;
175
+ expect(h5Button).toBeTruthy();
176
+ fireEvent.click(h5Button);
177
+
178
+ expect(baseElement.querySelector('div.remirror-editor h5')).toBeTruthy();
179
+ });
180
+
181
+ it('Applies Heading 6 styling to text when clicked', () => {
182
+ const { baseElement } = render(<Editor />);
183
+ expect(baseElement).toBeTruthy();
184
+
185
+ expect(baseElement.querySelector('div.remirror-editor h6')).toBeFalsy();
186
+
187
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
188
+ expect(headingDropdown).toBeTruthy();
189
+ fireEvent.click(headingDropdown);
190
+
191
+ const h6Button = baseElement.querySelector('button[title="Heading 6"]') as HTMLButtonElement;
192
+ expect(h6Button).toBeTruthy();
193
+ fireEvent.click(h6Button);
194
+
195
+ expect(baseElement.querySelector('div.remirror-editor h6')).toBeTruthy();
196
+ });
197
+
198
+ it('Applies Preformatted styling to text when clicked', () => {
199
+ const { baseElement } = render(<Editor />);
200
+ expect(baseElement).toBeTruthy();
201
+
202
+ expect(baseElement.querySelector('div.remirror-editor pre')).toBeFalsy();
203
+
204
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
205
+ expect(headingDropdown).toBeTruthy();
206
+ fireEvent.click(headingDropdown);
207
+
208
+ const preButton = baseElement.querySelector('button[title="Preformatted"]') as HTMLButtonElement;
209
+ expect(preButton).toBeTruthy();
210
+ fireEvent.click(preButton);
211
+
212
+ expect(baseElement.querySelector('div.remirror-editor pre')).toBeTruthy();
213
+ });
214
+
215
+ it('Applies Paragraph styling to text when clicked', () => {
216
+ const { baseElement } = render(<Editor />);
217
+ expect(baseElement).toBeTruthy();
218
+
219
+ expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
220
+
221
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
222
+ expect(headingDropdown).toBeTruthy();
223
+ fireEvent.click(headingDropdown);
224
+
225
+ const preButton = baseElement.querySelector('button[title="Preformatted"]') as HTMLButtonElement;
226
+ expect(preButton).toBeTruthy();
227
+ fireEvent.click(preButton);
228
+
229
+ const paragraphButton = baseElement.querySelector('button[title="Paragraph"]') as HTMLButtonElement;
230
+ expect(paragraphButton).toBeTruthy();
231
+ fireEvent.click(paragraphButton);
232
+
233
+ expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
234
+ });
235
+
236
+ it('Applies line break within text content when SHIFT+ENTER is used', async () => {
237
+ const { editor, getJsonContent } = await renderWithEditor(null, {
238
+ content: 'Some nonsense content here',
239
+ });
240
+
241
+ await act(() => editor.jumpTo('end'));
242
+ await act(() => editor.press('Shift-Enter'));
243
+
244
+ expect(getJsonContent()).toEqual({
245
+ type: 'paragraph',
246
+ attrs: expect.any(Object),
247
+ content: [
248
+ {
249
+ type: 'text',
250
+ text: 'Some nonsense content here',
251
+ },
252
+ {
253
+ type: 'hardBreak',
254
+ },
255
+ ],
256
+ });
257
+ });
258
+
259
+ it('should allow text to be pasted into the editor', async () => {
260
+ const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
261
+ content: 'Some nonsense content here',
262
+ });
263
+
264
+ // paste something
265
+ await act(() => editor.paste('I pasted this! '));
266
+
267
+ expect(getJsonContent()).toEqual({
268
+ type: 'paragraph',
269
+ attrs: expect.any(Object),
270
+ content: [
271
+ {
272
+ text: 'I pasted this! Some nonsense content here',
273
+ type: 'text',
274
+ },
275
+ ],
276
+ });
277
+ });
278
+
279
+ it('should not allow images to be pasted into the editor', async () => {
280
+ const { elements, getJsonContent } = await renderWithEditor(<ImageButton />, {
281
+ content: 'Some nonsense content here',
282
+ });
283
+ const imageClipboardData = {
284
+ dropEffect: 'none',
285
+ effectAllowed: 'uninitialized',
286
+ items: {
287
+ '0': {
288
+ kind: 'file',
289
+ type: 'image/png',
290
+ },
291
+ },
292
+ files: {
293
+ '0': {
294
+ lastModified: 1678233857792,
295
+ lastModifiedDate: {},
296
+ name: 'Screen Shot 2023-03-08 at 10.04.12 am.png',
297
+ size: 58517,
298
+ type: 'image/png',
299
+ webkitRelativePath: '',
300
+ },
301
+ },
302
+ types: [],
303
+ };
304
+
305
+ // paste something
306
+ await act(() => fireEvent.paste(elements.editor, imageClipboardData));
307
+
308
+ expect(getJsonContent()).toEqual({
309
+ type: 'paragraph',
310
+ attrs: expect.any(Object),
311
+ content: [
312
+ {
313
+ text: 'Some nonsense content here',
314
+ type: 'text',
315
+ },
316
+ ],
317
+ });
318
+ });
319
+
320
+ it('Should not display the toolbar if is not editable', () => {
321
+ render(<Editor editable={false} />);
322
+ expect(screen.queryByRole('button', { name: 'Bold (Ctrl+B)' })).not.toBeInTheDocument();
323
+ expect(screen.queryByRole('button', { name: 'Italic (Ctrl+I)' })).not.toBeInTheDocument();
324
+ expect(screen.queryByRole('button', { name: 'Underline (Ctrl+U)' })).not.toBeInTheDocument();
325
+ });
326
+
327
+ it('Should not display the floating toolbar if is not editable', async () => {
328
+ const from = 3 as number;
329
+ const to = 17 as number;
330
+ const { editor } = await renderWithEditor(null, {
331
+ content: 'My awesome <a href="https://example.org">example</a> content.',
332
+ editable: false,
333
+ });
334
+
335
+ await act(() => editor.selectText({ from, to }));
336
+
337
+ const buttons = screen.queryAllByRole('button');
338
+ const buttonLabels = buttons.map((button) => button.getAttribute('title'));
339
+
340
+ expect(buttonLabels).toEqual([]);
341
+ });
342
+
343
+ it('triggers handleFocus when editor is focused', async () => {
344
+ jest.spyOn(useFocus, 'default').mockReturnValue({
345
+ isVisible: false,
346
+ handleFocus: handleFocusMock,
347
+ handleBlur: handleBlurMock,
348
+ wrapperRef: { current: null },
349
+ });
350
+
351
+ const { getByLabelText } = render(<Editor />);
352
+ const editorInput = getByLabelText('Text editor');
353
+
354
+ fireEvent.focus(editorInput);
355
+
356
+ expect(handleBlurMock).toHaveBeenCalledTimes(0);
357
+ expect(handleFocusMock).toHaveBeenCalledTimes(1);
358
+ });
359
+
360
+ it('triggers handleBlur when editor is blurred', () => {
361
+ jest.spyOn(useFocus, 'default').mockReturnValue({
362
+ isVisible: false,
363
+ handleFocus: handleFocusMock,
364
+ handleBlur: handleBlurMock,
365
+ wrapperRef: { current: null },
366
+ });
367
+
368
+ const { getByLabelText } = render(<Editor />);
369
+ const editorInput = getByLabelText('Text editor');
370
+
371
+ fireEvent.blur(editorInput);
372
+
373
+ expect(handleBlurMock).toHaveBeenCalledTimes(1);
374
+ expect(handleFocusMock).toHaveBeenCalledTimes(0);
375
+ });
376
+
377
+ it('should apply hide class when focus hook returns false', () => {
378
+ jest.spyOn(useFocus, 'default').mockReturnValue({
379
+ isVisible: true,
380
+ handleFocus: handleFocusMock,
381
+ handleBlur: handleBlurMock,
382
+ wrapperRef: { current: null },
383
+ });
384
+
385
+ const { container } = render(<Editor />);
386
+
387
+ expect(container.querySelector('.show-toolbar')).toBeInTheDocument();
388
+ });
389
+
390
+ it('Interactivity in modals functions correctly, toolbar remains visible throughout', async () => {
391
+ const onRequestSources = jest.fn().mockResolvedValue([
392
+ {
393
+ id: 'my-matrix-instance',
394
+ name: 'My Matrix instance',
395
+ nodes: [],
396
+ },
397
+ ]);
398
+ const onRequestChildren = jest
399
+ .fn()
400
+ .mockResolvedValueOnce([
401
+ {
402
+ id: '1',
403
+ name: 'Folder 1',
404
+ type: { code: 'folder', name: 'Folder' },
405
+ status: { code: 'live', name: 'Live' },
406
+ childCount: 1,
407
+ },
408
+ ])
409
+ .mockResolvedValueOnce([
410
+ {
411
+ id: '2',
412
+ name: 'Folder 2',
413
+ type: { code: 'folder', name: 'Folder' },
414
+ status: { code: 'live', name: 'Live' },
415
+ childCount: 1,
416
+ },
417
+ ])
418
+ .mockResolvedValueOnce([
419
+ {
420
+ id: '3',
421
+ name: 'My image',
422
+ type: { code: 'image', name: 'Image' },
423
+ status: { code: 'live', name: 'Live' },
424
+ childCount: 0,
425
+ },
426
+ ]);
427
+ const onRequestResource = jest.fn().mockResolvedValue({
428
+ id: '3',
429
+ name: 'My image',
430
+ type: { code: 'image', name: 'Image' },
431
+ status: { code: 'live', name: 'Live' },
432
+ childCount: '1',
433
+ });
434
+
435
+ const { MockResourceBrowserContext } = mockResourceBrowserContext({
436
+ sources: [],
437
+ resources: [],
438
+ pluginProps: {
439
+ onRequestSources,
440
+ onRequestChildren,
441
+ onRequestResource,
442
+ } as MatrixResourceBrowserPluginProps,
443
+ });
444
+
445
+ render(
446
+ <MockResourceBrowserContext>
447
+ <Editor />
448
+ </MockResourceBrowserContext>,
449
+ );
450
+
451
+ await act(() => fireEvent.click(screen.getByRole('button', { name: 'Link (Ctrl+K)' })));
452
+ await act(() => fireEvent.click(screen.getByText('Choose asset')));
453
+ await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to My Matrix instance children' })));
454
+ await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to Folder 1 children' })));
455
+ await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to Folder 2 children' })));
456
+ await act(() => fireEvent.blur(screen.getByRole('button', { name: /My image/ })));
457
+
458
+ // Contents of "Folder 2" should be mounted.
459
+ // Toolbar (Link button) should be mounted.
460
+ // Toolbar should be shown (.show-toolbar class).
461
+ expect(screen.getByRole('button', { name: /My image/ })).toBeInTheDocument();
462
+ expect(within(document.body).getByRole('button', { name: 'Link (Ctrl+K)', hidden: true })).toBeInTheDocument();
463
+ expect(document.querySelector('.show-toolbar')).toBeInTheDocument();
464
+ });
465
+ });
@@ -0,0 +1,117 @@
1
+ import React, { useContext, useCallback, ReactNode, useEffect } from 'react';
2
+ import { EditorComponent, Remirror, useRemirror, useEditorEvent } from '@remirror/react';
3
+ import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
4
+ import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
5
+ import clsx from 'clsx';
6
+ import { Toolbar, FloatingToolbar } from '../EditorToolbar';
7
+ import { EditorContext } from './EditorContext';
8
+ import { createExtensions } from '../Extensions/Extensions';
9
+ import useFocus from '../hooks/useFocus';
10
+ import { TableComponents } from '@remirror/extension-react-tables';
11
+
12
+ type EditorProps = {
13
+ className?: string;
14
+ content?: RemirrorContentType;
15
+ onChange?: RemirrorEventListener<Extension>;
16
+ editable?: boolean;
17
+ border?: boolean;
18
+ children?: ReactNode;
19
+ isFocused?: boolean;
20
+ label?: string;
21
+ attributes?: Record<string, string>;
22
+ enableTableTool?: boolean;
23
+ };
24
+
25
+ const WrappedEditor = () => {
26
+ const preventImagePaste = useCallback((event) => {
27
+ const { clipboardData } = event;
28
+ const pastedData = clipboardData?.files[0];
29
+ if (
30
+ pastedData?.type &&
31
+ pastedData?.type.startsWith('image/') &&
32
+ // Still allow paste of any text that came through (Word, etc)
33
+ !clipboardData?.types.includes('text/plain')
34
+ ) {
35
+ event.preventDefault();
36
+ }
37
+
38
+ // Allow other paste event handlers to be run.
39
+ return false;
40
+ }, []) as ClipboardEventHandler;
41
+
42
+ useEditorEvent('paste', preventImagePaste);
43
+ return <EditorComponent />;
44
+ };
45
+
46
+ const Editor = ({
47
+ content,
48
+ className,
49
+ border = true,
50
+ editable = true,
51
+ onChange,
52
+ children,
53
+ isFocused,
54
+ attributes,
55
+ enableTableTool = false,
56
+ }: EditorProps) => {
57
+ const { manager, state, setState } = useRemirror({
58
+ extensions: createExtensions(useContext(EditorContext)),
59
+ content,
60
+ selection: 'start',
61
+ stringHandler: 'html',
62
+ });
63
+
64
+ const handleChange: RemirrorEventListener<Extension> = (parameter) => {
65
+ setState(parameter.state);
66
+ onChange?.(parameter);
67
+ };
68
+
69
+ const { isVisible, handleFocus, handleBlur, wrapperRef } = useFocus(isFocused || false);
70
+
71
+ // On initial load, check if we need to focus the actual text content
72
+ useEffect(() => {
73
+ if (isFocused) {
74
+ manager.view.dom.focus();
75
+ }
76
+
77
+ // TODO: May want to come back to this and see if there's a better solution
78
+ // We have to add a type button attribute to the delete buttons so they don't cause a submit by accident.
79
+ const tableDeleteButtons = document.querySelectorAll('.remirror-table-delete-inner-button');
80
+ tableDeleteButtons.forEach((button) => {
81
+ button.setAttribute('type', 'button');
82
+ });
83
+ }, []);
84
+
85
+ return (
86
+ <div
87
+ ref={wrapperRef}
88
+ onBlur={handleBlur}
89
+ onFocusCapture={handleFocus}
90
+ className={clsx(
91
+ 'squiz-fte-scope',
92
+ 'squiz-fte-scope__editor',
93
+ !editable && 'squiz-fte-scope__editor--is-disabled',
94
+ border && 'squiz-fte-scope__editor--bordered',
95
+ className,
96
+ )}
97
+ >
98
+ <Remirror
99
+ manager={manager}
100
+ initialContent={state}
101
+ editable={editable}
102
+ onChange={handleChange}
103
+ placeholder="Write something"
104
+ label="Text editor"
105
+ attributes={attributes}
106
+ >
107
+ {editable && <Toolbar isVisible={isVisible} enableTableTool={enableTableTool} />}
108
+ {children && <div className="squiz-fte-scope__editor__children">{children}</div>}
109
+ <WrappedEditor />
110
+ {enableTableTool && <TableComponents enableTableCellMenu={false} />}
111
+ {editable && isVisible && <FloatingToolbar />}
112
+ </Remirror>
113
+ </div>
114
+ );
115
+ };
116
+
117
+ export default Editor;