u2ui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (440) hide show
  1. package/.htaccess +7 -0
  2. package/LICENSE +21 -0
  3. package/README.md +36 -0
  4. package/attr/behavior/README.md +25 -0
  5. package/attr/behavior/behavior.js +261 -0
  6. package/attr/behavior/manifest.json +43 -0
  7. package/attr/behavior/tests/minimal.html +19 -0
  8. package/attr/behavior/tests/test.html +98 -0
  9. package/attr/confirm/README.md +36 -0
  10. package/attr/confirm/confirm.js +90 -0
  11. package/attr/confirm/manifest.json +43 -0
  12. package/attr/confirm/tests/minimal.html +23 -0
  13. package/attr/confirm/tests/test.html +79 -0
  14. package/attr/draghandle/README.md +41 -0
  15. package/attr/draghandle/draghandle.js +42 -0
  16. package/attr/draghandle/tests/minimal.html +44 -0
  17. package/attr/focusgroup/README.md +49 -0
  18. package/attr/focusgroup/focusgroup.js +100 -0
  19. package/attr/focusgroup/manifest.json +38 -0
  20. package/attr/focusgroup/tests/minimal.html +27 -0
  21. package/attr/focusgroup/tests/test.html +154 -0
  22. package/attr/href/README.md +38 -0
  23. package/attr/href/href.js +42 -0
  24. package/attr/href/manifest.json +43 -0
  25. package/attr/href/tests/minimal.html +17 -0
  26. package/attr/href/tests/test.html +70 -0
  27. package/attr/intersect/README.md +42 -0
  28. package/attr/intersect/intersect.js +99 -0
  29. package/attr/intersect/manifest.json +57 -0
  30. package/attr/intersect/tests/minimal.html +30 -0
  31. package/attr/intersect/tests/test.html +64 -0
  32. package/attr/navigable/README.md +31 -0
  33. package/attr/navigable/TargetObserver.js +91 -0
  34. package/attr/navigable/U2TargetObserver.js +75 -0
  35. package/attr/navigable/manifest.json +42 -0
  36. package/attr/navigable/navigable.js +87 -0
  37. package/attr/navigable/tests/U1TargetObserver.html +56 -0
  38. package/attr/navigable/tests/minimal.html +17 -0
  39. package/attr/navigable/tests/targetObserver.html +106 -0
  40. package/attr/navigable/tests/test.html +84 -0
  41. package/attr/parallax/README.md +48 -0
  42. package/attr/parallax/parallax.js +119 -0
  43. package/attr/parallax/tests/minimal.html +25 -0
  44. package/attr/parallax/tests/performance.html +102 -0
  45. package/attr/parallax/tests/test.html +108 -0
  46. package/attr/skin/README.md +59 -0
  47. package/attr/skin/skin.css +51 -0
  48. package/attr/skin/tests/minimal.html +34 -0
  49. package/attr/skin/tests/test.html +96 -0
  50. package/class/badge/README.md +25 -0
  51. package/class/badge/badge.css +35 -0
  52. package/class/badge/tests/minimal.html +17 -0
  53. package/class/badge/tests/test.html +112 -0
  54. package/class/card1/README.md +45 -0
  55. package/class/card1/card1.css +30 -0
  56. package/class/card1/tests/minimal.html +33 -0
  57. package/class/card1/tests/test.html +78 -0
  58. package/class/flex/README.md +62 -0
  59. package/class/flex/flex.css +25 -0
  60. package/class/flex/tests/minimal.html +31 -0
  61. package/class/flex/tests/test.html +58 -0
  62. package/class/grid/README.md +52 -0
  63. package/class/grid/grid.css +40 -0
  64. package/class/grid/tests/minimal.html +34 -0
  65. package/class/grid/tests/test.html +78 -0
  66. package/class/input/README.md +49 -0
  67. package/class/input/input.css +33 -0
  68. package/class/input/tests/minimal.html +39 -0
  69. package/class/input/tests/test.html +29 -0
  70. package/class/reset/README.md +47 -0
  71. package/class/reset/reset.css +8 -0
  72. package/class/reset/tests/minimal.html +23 -0
  73. package/class/table/README.md +57 -0
  74. package/class/table/table.css +126 -0
  75. package/class/table/tests/minimal.html +40 -0
  76. package/class/table/tests/test.html +226 -0
  77. package/class/unstyle/README.md +32 -0
  78. package/class/unstyle/tests/minimal.html +22 -0
  79. package/class/unstyle/tests/test.html +32 -0
  80. package/class/unstyle/unstyle.css +12 -0
  81. package/class/width/README.md +48 -0
  82. package/class/width/tests/minimal.html +27 -0
  83. package/class/width/tests/test.html +101 -0
  84. package/class/width/width.css +22 -0
  85. package/css/base/README.md +25 -0
  86. package/css/base/base.css +127 -0
  87. package/css/base/beta.css +50 -0
  88. package/css/base/full.css +5 -0
  89. package/css/base/nomotion.css +9 -0
  90. package/css/base/print.css +36 -0
  91. package/css/base/tests/nomotion.html +89 -0
  92. package/css/base/tests/test.html +539 -0
  93. package/css/classes/README.md +17 -0
  94. package/css/classes/classes.css +78 -0
  95. package/css/classes/tests/test.html +63 -0
  96. package/css/classless/README.md +26 -0
  97. package/css/classless/aria.css +64 -0
  98. package/css/classless/classless.css +124 -0
  99. package/css/classless/full.css +11 -0
  100. package/css/classless/more.css +340 -0
  101. package/css/classless/simple.css +103 -0
  102. package/css/classless/snippeds/a/icons.css +12 -0
  103. package/css/classless/snippeds/experiments/conventions.css +41 -0
  104. package/css/classless/snippeds/hr/gradient.css +3 -0
  105. package/css/classless/snippeds/hr/section_sign.css +16 -0
  106. package/css/classless/snippeds/hr/tests.html +50 -0
  107. package/css/classless/tests/aria.html +101 -0
  108. package/css/classless/tests/foreign/classless-almond.css.html +445 -0
  109. package/css/classless/tests/foreign/classless-classless.css.html +831 -0
  110. package/css/classless/tests/foreign/classless-mvp.html +415 -0
  111. package/css/classless/tests/foreign/classless.sakura.html +224 -0
  112. package/css/classless/tests/foreign/stylestage.dev.html +304 -0
  113. package/css/classless/tests/foreign/test-homogenizer.html +433 -0
  114. package/css/classless/tests/foreign/test-html5-elements-tester.html +956 -0
  115. package/css/classless/tests/foreign/test-opinionated_css.html +148 -0
  116. package/css/classless/tests/list-bullet.html +110 -0
  117. package/css/classless/tests/more.html +246 -0
  118. package/css/classless/tests/oklch.experiments.html +280 -0
  119. package/css/classless/tests/test.html +106 -0
  120. package/css/classless/tests/variables.html +109 -0
  121. package/css/classless/variables.css +99 -0
  122. package/css/norm/README.md +37 -0
  123. package/css/norm/beta.css +40 -0
  124. package/css/norm/norm.css +98 -0
  125. package/css/norm/oldies.css +60 -0
  126. package/css/norm/tests/test.html +434 -0
  127. package/css/norm/tests/test.js +103 -0
  128. package/el/accordion/README.md +59 -0
  129. package/el/accordion/accordion.css +7 -0
  130. package/el/accordion/accordion.js +258 -0
  131. package/el/accordion/manifest.json +57 -0
  132. package/el/accordion/tests/minimal.html +44 -0
  133. package/el/accordion/tests/test.html +168 -0
  134. package/el/alert/README.md +67 -0
  135. package/el/alert/alert copy.js +224 -0
  136. package/el/alert/alert.css +73 -0
  137. package/el/alert/alert.js +187 -0
  138. package/el/alert/manifest.json +77 -0
  139. package/el/alert/tests/minimal.html +36 -0
  140. package/el/alert/tests/test.html +105 -0
  141. package/el/buttongroup/README.md +36 -0
  142. package/el/buttongroup/buttongroup.css +30 -0
  143. package/el/buttongroup/buttongroup.js +56 -0
  144. package/el/buttongroup/tests/minimal.html +31 -0
  145. package/el/buttongroup/tests/test.html +83 -0
  146. package/el/bytes/README.md +41 -0
  147. package/el/bytes/bytes.css +6 -0
  148. package/el/bytes/bytes.js +97 -0
  149. package/el/bytes/manifest.json +95 -0
  150. package/el/bytes/tests/minimal.html +19 -0
  151. package/el/bytes/tests/test.html +117 -0
  152. package/el/carousel/README.md +52 -0
  153. package/el/carousel/carousel.css +46 -0
  154. package/el/carousel/carousel.js +371 -0
  155. package/el/carousel/manifest.json +58 -0
  156. package/el/carousel/tests/experiments.html +77 -0
  157. package/el/carousel/tests/minimal.html +31 -0
  158. package/el/carousel/tests/nested.html +54 -0
  159. package/el/carousel/tests/test.html +136 -0
  160. package/el/carousel-nav/README.md +40 -0
  161. package/el/carousel-nav/carousel-nav.js +74 -0
  162. package/el/carousel-nav/tests/minimal.html +32 -0
  163. package/el/carousel-nav/tests/test.html +59 -0
  164. package/el/code/README.md +68 -0
  165. package/el/code/code.css +46 -0
  166. package/el/code/code.js +289 -0
  167. package/el/code/manifest.json +66 -0
  168. package/el/code/tests/minimal.html +35 -0
  169. package/el/code/tests/test.html +162 -0
  170. package/el/copy/README.md +35 -0
  171. package/el/copy/copy.css +3 -0
  172. package/el/copy/copy.js +118 -0
  173. package/el/copy/manifest.json +49 -0
  174. package/el/copy/tests/minimal.html +21 -0
  175. package/el/copy/tests/test.html +75 -0
  176. package/el/counter/README.md +47 -0
  177. package/el/counter/counter.css +8 -0
  178. package/el/counter/counter.js +95 -0
  179. package/el/counter/manifest.json +59 -0
  180. package/el/counter/tests/minimal.html +27 -0
  181. package/el/counter/tests/test.html +106 -0
  182. package/el/ico/README.md +162 -0
  183. package/el/ico/font/Font Awesome.css +22 -0
  184. package/el/ico/font/LigatureSymbols.css +7 -0
  185. package/el/ico/font/Material Icons.css +6 -0
  186. package/el/ico/font/RemixFilled.css +8 -0
  187. package/el/ico/font/RemixOutlined.css +8 -0
  188. package/el/ico/font/old/anicons.css +31 -0
  189. package/el/ico/font/old/devicons.css +210 -0
  190. package/el/ico/font/old/material.all.css +36 -0
  191. package/el/ico/font/old/remix.css +15 -0
  192. package/el/ico/font/old/utf8.css +54 -0
  193. package/el/ico/ico.css +111 -0
  194. package/el/ico/ico.js +189 -0
  195. package/el/ico/manifest.json +86 -0
  196. package/el/ico/tests/combinations.html +86 -0
  197. package/el/ico/tests/emojis.html +213 -0
  198. package/el/ico/tests/fonts.html +110 -0
  199. package/el/ico/tests/ico-directory.html +254 -0
  200. package/el/ico/tests/minimal.html +46 -0
  201. package/el/ico/tests/test.html +210 -0
  202. package/el/ico/tests/util-multi.svg +6 -0
  203. package/el/ico/tests/util.css +2 -0
  204. package/el/ico/tests/util.js +110 -0
  205. package/el/input/README.md +39 -0
  206. package/el/input/input.css +35 -0
  207. package/el/input/input.js +331 -0
  208. package/el/input/tests/formParticipation.html +113 -0
  209. package/el/input/tests/minimal.html +33 -0
  210. package/el/input/tests/test.html +258 -0
  211. package/el/masonry/README.md +51 -0
  212. package/el/masonry/manifest.json +60 -0
  213. package/el/masonry/masonry.css +27 -0
  214. package/el/masonry/masonry.js +92 -0
  215. package/el/masonry/tests/minimal.html +39 -0
  216. package/el/masonry/tests/test.html +42 -0
  217. package/el/number/README.md +47 -0
  218. package/el/number/manifest.json +121 -0
  219. package/el/number/number.css +6 -0
  220. package/el/number/number.js +67 -0
  221. package/el/number/tests/minimal.html +25 -0
  222. package/el/number/tests/test.html +138 -0
  223. package/el/out/README.md +32 -0
  224. package/el/out/manifest.json +38 -0
  225. package/el/out/out.css +2 -0
  226. package/el/out/out.js +59 -0
  227. package/el/out/tests/minimal.html +25 -0
  228. package/el/out/tests/test.html +37 -0
  229. package/el/parallax-bg/README.md +36 -0
  230. package/el/parallax-bg/parallax-bg.css +13 -0
  231. package/el/parallax-bg/parallax-bg.js +186 -0
  232. package/el/parallax-bg/tests/bg.jpg +0 -0
  233. package/el/parallax-bg/tests/bg1.jpg +0 -0
  234. package/el/parallax-bg/tests/bg2.jpg +0 -0
  235. package/el/parallax-bg/tests/demo.html +88 -0
  236. package/el/parallax-bg/tests/minimal.html +30 -0
  237. package/el/parallax-bg/tests/test.html +64 -0
  238. package/el/parallax-bg/tests/visible.html +90 -0
  239. package/el/qrcode/README.md +38 -0
  240. package/el/qrcode/manifest.json +43 -0
  241. package/el/qrcode/package.json +22 -0
  242. package/el/qrcode/qrcode.css +13 -0
  243. package/el/qrcode/qrcode.js +46 -0
  244. package/el/qrcode/tests/minimal.html +26 -0
  245. package/el/qrcode/tests/test.html +31 -0
  246. package/el/rating/README.md +45 -0
  247. package/el/rating/manifest.json +65 -0
  248. package/el/rating/rating.css +11 -0
  249. package/el/rating/rating.js +139 -0
  250. package/el/rating/tests/minimal.html +26 -0
  251. package/el/rating/tests/tests.html +77 -0
  252. package/el/rte/README.md +37 -0
  253. package/el/rte/rte.css +9 -0
  254. package/el/rte/rte.js +56 -0
  255. package/el/rte/tests/minimal.html +25 -0
  256. package/el/rte/tests/test.html +37 -0
  257. package/el/skeleton/README.md +30 -0
  258. package/el/skeleton/manifest.json +51 -0
  259. package/el/skeleton/skeleton.css +61 -0
  260. package/el/skeleton/skeleton.js +72 -0
  261. package/el/skeleton/tests/minimal.html +22 -0
  262. package/el/skeleton/tests/test.html +22 -0
  263. package/el/splitbutton/README.md +39 -0
  264. package/el/splitbutton/splitbutton.css +48 -0
  265. package/el/splitbutton/splitbutton.js +26 -0
  266. package/el/splitbutton/tests/minimal.html +30 -0
  267. package/el/splitbutton/tests/test.html +68 -0
  268. package/el/splitpanel/README.md +39 -0
  269. package/el/splitpanel/manifest.json +49 -0
  270. package/el/splitpanel/splitpanel.css +17 -0
  271. package/el/splitpanel/splitpanel.js +116 -0
  272. package/el/splitpanel/tests/minimal.html +31 -0
  273. package/el/splitpanel/tests/tests.html +121 -0
  274. package/el/table/README.md +68 -0
  275. package/el/table/manifest.json +43 -0
  276. package/el/table/table.css +59 -0
  277. package/el/table/table.js +194 -0
  278. package/el/table/tests/minimal.html +38 -0
  279. package/el/table/tests/test.html +108 -0
  280. package/el/tabs/README.md +50 -0
  281. package/el/tabs/manifest.json +59 -0
  282. package/el/tabs/tabs.css +23 -0
  283. package/el/tabs/tabs.js +210 -0
  284. package/el/tabs/tests/minimal.html +35 -0
  285. package/el/tabs/tests/test.html +180 -0
  286. package/el/textfit/README.md +34 -0
  287. package/el/textfit/manifest.json +45 -0
  288. package/el/textfit/tests/minimal.html +25 -0
  289. package/el/textfit/tests/test.html +26 -0
  290. package/el/textfit/textfit.css +6 -0
  291. package/el/textfit/textfit.js +80 -0
  292. package/el/time/README.md +72 -0
  293. package/el/time/manifest.json +118 -0
  294. package/el/time/tests/minimal.html +19 -0
  295. package/el/time/tests/test.html +160 -0
  296. package/el/time/time copy.js +141 -0
  297. package/el/time/time.js +168 -0
  298. package/el/time/time.old.uhtml.js +129 -0
  299. package/el/tooltip/README.md +48 -0
  300. package/el/tooltip/manifest.json +69 -0
  301. package/el/tooltip/tests/minimal.html +25 -0
  302. package/el/tooltip/tests/test.html +178 -0
  303. package/el/tooltip/tooltip.css +97 -0
  304. package/el/tooltip/tooltip.js +82 -0
  305. package/el/tree1/README.md +111 -0
  306. package/el/tree1/manifest.json +78 -0
  307. package/el/tree1/tests/animated.html +134 -0
  308. package/el/tree1/tests/custom.html +51 -0
  309. package/el/tree1/tests/minimal.html +44 -0
  310. package/el/tree1/tests/test.html +260 -0
  311. package/el/tree1/tree1.css +26 -0
  312. package/el/tree1/tree1.js +265 -0
  313. package/el/typewriter/README.md +62 -0
  314. package/el/typewriter/manifest.json +66 -0
  315. package/el/typewriter/tests/minimal.html +25 -0
  316. package/el/typewriter/tests/test.html +78 -0
  317. package/el/typewriter/typewriter.css +6 -0
  318. package/el/typewriter/typewriter.js +166 -0
  319. package/el/typewriter/typewriter.mp3 +0 -0
  320. package/js/Placer/Placer.js +156 -0
  321. package/js/Placer/README.md +62 -0
  322. package/js/Placer/tests/minimal.html +34 -0
  323. package/js/Placer/tests/test.html +49 -0
  324. package/js/PointerObserver/PointerObserver.js +130 -0
  325. package/js/PointerObserver/README.md +34 -0
  326. package/js/PointerObserver/tests/minimal.html +29 -0
  327. package/js/PointerObserver/tests/test.html +35 -0
  328. package/js/SelectorObserver/README.md +47 -0
  329. package/js/SelectorObserver/SelectorObserver.js +201 -0
  330. package/js/SelectorObserver/tests/minimal.html +21 -0
  331. package/js/SelectorObserver/tests/test.html +57 -0
  332. package/js/SelectorObserver/tests/tests.html +161 -0
  333. package/js/contextmenu/README.md +93 -0
  334. package/js/contextmenu/contextmenu.js +336 -0
  335. package/js/contextmenu/tests/minimal.html +44 -0
  336. package/js/contextmenu/tests/test.html +131 -0
  337. package/js/dialog/README.md +49 -0
  338. package/js/dialog/dialog.js +261 -0
  339. package/js/dialog/notification.mp3 +0 -0
  340. package/js/dialog/tests/minimal.html +29 -0
  341. package/js/dialog/tests/notification.mp3 +0 -0
  342. package/js/dialog/tests/test.html +135 -0
  343. package/js/rte/README.md +44 -0
  344. package/js/rte/old/NodeCleaner.js +315 -0
  345. package/js/rte/old/Rte/Rte.mjs +316 -0
  346. package/js/rte/old/Rte/Rte.ui.items.mjs +543 -0
  347. package/js/rte/old/Rte/Rte.ui.mjs +154 -0
  348. package/js/rte/old/Rte/crossbrowser.mjs +323 -0
  349. package/js/rte/old/Rte/font/tinymce.svg +98 -0
  350. package/js/rte/old/Rte/font/tinymce.woff +0 -0
  351. package/js/rte/old/Rte/helpers.mjs +159 -0
  352. package/js/rte/old/Rte/htmlparser.mjs +178 -0
  353. package/js/rte/old/Rte/index.mjs +5 -0
  354. package/js/rte/old/Rte/main.css +189 -0
  355. package/js/rte/old/old.rte.js +132 -0
  356. package/js/rte/old/range-selection.old.js +394 -0
  357. package/js/rte/rte.js +7 -0
  358. package/js/rte/src/behavior.js +228 -0
  359. package/js/rte/src/events.js +73 -0
  360. package/js/rte/src/fixes.js +251 -0
  361. package/js/rte/src/range.js +472 -0
  362. package/js/rte/src/rte.js +72 -0
  363. package/js/rte/src/ui/items/ai.js +167 -0
  364. package/js/rte/src/ui/items/code.js +93 -0
  365. package/js/rte/src/ui/items/undo.js +183 -0
  366. package/js/rte/src/ui.items.js +571 -0
  367. package/js/rte/src/ui.js +269 -0
  368. package/js/rte/src/util/htmlparser.js +178 -0
  369. package/js/rte/src/util/indentHtml.js +48 -0
  370. package/js/rte/tests/ai.html +81 -0
  371. package/js/rte/tests/behavior.html +88 -0
  372. package/js/rte/tests/events.html +69 -0
  373. package/js/rte/tests/fixes.html +95 -0
  374. package/js/rte/tests/minimal.html +34 -0
  375. package/js/rte/tests/notes.md +6 -0
  376. package/js/rte/tests/range.html +167 -0
  377. package/js/rte/tests/selection-explorer.html +222 -0
  378. package/js/rte/tests/test.html +92 -0
  379. package/js/shortcut/README.md +33 -0
  380. package/js/shortcut/shortcut.js +89 -0
  381. package/js/shortcut/tests/minimal.html +23 -0
  382. package/js/shortcut/tests/test.html +68 -0
  383. package/package.json +12 -0
  384. package/u2/README.md +4 -0
  385. package/u2/auto.js +161 -0
  386. package/u2/auto.ui.js +85 -0
  387. package/u2/experiments/Waiter/test.html +132 -0
  388. package/u2/experiments/getElementByIdPromise/test.html +76 -0
  389. package/u2/experiments/patchInputValue.html +124 -0
  390. package/u2/experiments/radiobutton/test.html +75 -0
  391. package/u2/experiments/tests/test.html +223 -0
  392. package/u2/experiments/u1-responsive/responsive.js +62 -0
  393. package/u2/experiments/u1-responsive/test.html +65 -0
  394. package/u2/experiments/u2Element.js +139 -0
  395. package/u2/experiments/u2Element.test.html +47 -0
  396. package/u2/old-stuff/IterableWeakMap/mod.js +70 -0
  397. package/u2/old-stuff/css/onStyleSheet/mod.js +114 -0
  398. package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +28 -0
  399. package/u2/old-stuff/css/onStyleSheet/test/include.css +19 -0
  400. package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +6 -0
  401. package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +3 -0
  402. package/u2/old-stuff/css/onStyleSheet/test/test.html +48 -0
  403. package/u2/old-stuff/css/parser/mod.js +182 -0
  404. package/u2/old-stuff/css/parser/parser_old/mod.js +128 -0
  405. package/u2/old-stuff/css/parser/parser_old/test.html +43 -0
  406. package/u2/old-stuff/css/parser/parser_old/util.js +22 -0
  407. package/u2/old-stuff/css/parser/style.html +52 -0
  408. package/u2/old-stuff/css/parser/test.html +38 -0
  409. package/u2/old-stuff/el/ai-texter/README.md +23 -0
  410. package/u2/old-stuff/el/ai-texter/ai-texter.css +12 -0
  411. package/u2/old-stuff/el/ai-texter/ai-texter.js +153 -0
  412. package/u2/old-stuff/el/ai-texter/tests/minimal.html +47 -0
  413. package/u2/old-stuff/el/ai-texter/tests/test.html +71 -0
  414. package/u2/old-stuff/init.js +38 -0
  415. package/u2/old-stuff/markHashLinks.js +51 -0
  416. package/u2/old-stuff/onElement/mod.js +73 -0
  417. package/u2/old-stuff/test-helpers/mod.js +36 -0
  418. package/u2/old-stuff/test-helpers/test.html +4 -0
  419. package/u2/old-stuff/tests/init.js.html +51 -0
  420. package/u2/old-stuff/viewport.js +64 -0
  421. package/u2/projects.json +468 -0
  422. package/u2/tests/boilerplate.html +46 -0
  423. package/u2/tests/kacheln.html +245 -0
  424. package/u2/tests/showcase.html +270 -0
  425. package/u2/tests/showcase2.html +157 -0
  426. package/u2/tests/test-init.js +35 -0
  427. package/u2/tests/test.html +355 -0
  428. package/u2/tools/baseElement.js +95 -0
  429. package/u2/tools/baseElement.test.html +119 -0
  430. package/u2/tools/ce-inspector.js +308 -0
  431. package/u2/tools/ce-inspector.test.html +66 -0
  432. package/u2/tools/ce-manfest-from-element.js +207 -0
  433. package/u2/tools/dev-iframe.js +213 -0
  434. package/u2/tools/dev-iframe.test.html +75 -0
  435. package/u2/tools/eventsExplorer.js +101 -0
  436. package/u2/tools/logo/u1.svg +9 -0
  437. package/u2/tools/logo/u1ui.svg +6 -0
  438. package/u2/tools/update.repos.json.js +234 -0
  439. package/u2/u2.js +14 -0
  440. package/u2/utils.js +59 -0
package/js/rte/tests/events.html ADDED
@@ -0,0 +1,69 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <title>test</title>
7
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
8
+
9
+ <link rel=stylesheet href="../../../css/classless/full.css">
10
+ <link rel=stylesheet href="../../../css/classless/aria.css">
11
+ <link rel=stylesheet href="../../../css/classless/simple.css">
12
+
13
+
14
+ <script src="../src/events.js" type=module async></script>
15
+ <script src="../src/fixes.js" type=module async></script>
16
+ <style>
17
+ [contenteditable] {
18
+ border: 1px solid #ccc;
19
+ margin: 10px;
20
+ padding: 10px;
21
+ min-height: 100px;
22
+ }
23
+ .rte {
24
+ --u2-rte:true;
25
+ }
26
+ </style>
27
+
28
+ </head>
29
+
30
+ <body>
31
+
32
+
33
+ <section id=container>
34
+
35
+ <div class=u2RteTool style="border:1px solid #ccc; padding: 10px; margin: 10px; background-color: #f0f0f0;" tabindex="-1">
36
+ Tool example (should not call deactivate)
37
+ <button>Click me</button>
38
+ </div>
39
+
40
+ <div id=rte-1 class=rte contenteditable>
41
+ <h3>Rich Text Editor 1</h3>
42
+ Some Text
43
+ <img width="100" height="80" alt="tick" src="https://picsum.photos/200/160">
44
+ </div>
45
+
46
+ <div id=rte-2 class=rte contenteditable>
47
+ <h3>Rich Text Editor 2</h3>
48
+ </div>
49
+
50
+ <div id=no-rte contenteditable>
51
+ <p>This is not a rich text editor</p>
52
+ </div>
53
+
54
+ <div id="eventsEl"></div>
55
+ </section>
56
+
57
+ <script type=module>
58
+ // EventsExplorer
59
+ import {EventsExplorer} from "../../../u2/tools/eventsExplorer.js";
60
+ const EEx = new EventsExplorer(eventsEl, container, ['u2-rte-activate', 'u2-rte-deactivate', 'u2-rte-selectionchange', 'u2-rte-elementchange']);
61
+ EEx.start();
62
+ </script>
63
+
64
+ <style>
65
+ ::highlight(u2-rte-selection) {
66
+ background-color: #7afa;
67
+ }
68
+ </style>
69
+
package/js/rte/tests/fixes.html ADDED
@@ -0,0 +1,95 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <!--script src="../../../u2/tests/test-init.js" type=module></script-->
7
+
8
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+ <link rel=stylesheet href="../../../css/classless/aria.css">
10
+ <link rel=stylesheet href="../../../css/classless/simple.css">
11
+
12
+ <style>
13
+ [contenteditable] {
14
+ border: 1px solid #ccc;
15
+ margin: 10px;
16
+ padding: 10px;
17
+ min-height: 100px;
18
+ }
19
+ .rte {
20
+ --u2-rte:true;
21
+ }
22
+ </style>
23
+
24
+ </head>
25
+
26
+ <body>
27
+
28
+ <section>
29
+ <h1>Fixes</h1>
30
+ <a id="reloadUrl">
31
+ Load fixes
32
+ </a>
33
+ <script>
34
+ const url = new URL(window.location.href);
35
+ const reloadUrl = document.getElementById('reloadUrl');
36
+ if (url.searchParams.has('noFixes')) {
37
+ url.searchParams.delete('noFixes');
38
+ reloadUrl.href = url.href;
39
+ reloadUrl.innerHTML = '<span style="color:red">fixed:✗</span><br> load with fixes';
40
+ } else {
41
+ import('../src/fixes.js').then(module => {
42
+ console.log('fixes loaded')
43
+ });
44
+ reloadUrl.href = url.href + '?noFixes';
45
+ reloadUrl.innerHTML = '<span style="color:green">fixed:✓</span><br> load without fixes';
46
+ }
47
+
48
+
49
+ </script>
50
+ </section>
51
+
52
+ </section>
53
+ <section id=container>
54
+
55
+ <h2>Global</h2>
56
+ <ul>
57
+ <li>Contextmenu (right-click) should not change selection / place the caret
58
+ </ul>
59
+
60
+ <h2>Interactive elements</h2>
61
+ <ul>
62
+ <li>Should not work
63
+ <li>Caret should be placed correctly
64
+ <li>Tab-key-navigation should work
65
+ </ul>
66
+ <a href="https://schwups.ch" target="_blank">
67
+ <div contenteditable>
68
+ RTE inside "a" tag<br>
69
+ </div>
70
+ </a>
71
+
72
+ <a href="https://schwups.ch" contenteditable>RTE as "a" tag</a>
73
+
74
+ <button contenteditable><span>RTE inside "button" tag</span></button>
75
+ <button contenteditable>RTE as "button" tag</button>
76
+
77
+ <ul>
78
+ <li>Space-key should insert space (chrome, firefox)
79
+ <li>Enter-key should insert line break (chrome)
80
+ </ul>
81
+ <form target="_blank">
82
+ <button contenteditable>Rich Text Editor</button>
83
+ </form>
84
+
85
+
86
+ <h2>image inside contenteditable</h2>
87
+ <ul>
88
+ <li>Image should be selectable by click (chrome)
89
+ </ul>
90
+ <div contenteditable>
91
+ image: <img width="100" height="80" alt="tick" src="https://picsum.photos/200/160">
92
+ </div>
93
+
94
+
95
+ </section>
package/js/rte/tests/minimal.html ADDED
@@ -0,0 +1,34 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+
8
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+ <link rel=stylesheet href="../../../css/classless/aria.css">
10
+ <link rel=stylesheet href="../../../css/classless/simple.css">
11
+
12
+
13
+
14
+ <body>
15
+
16
+ <section class="main">
17
+
18
+ <div contenteditable id="myEditor">
19
+ Start <strong>typing</strong> here...
20
+ </div>
21
+
22
+ </section>
23
+
24
+ <style class="main">
25
+ #myEditor {
26
+ --u2-rte:true;
27
+ --u2-rte-toolbar:Bold Italic Code;
28
+ }
29
+ </style>
30
+
31
+
32
+ <script type=module class="main">
33
+ import "../rte.js";
34
+ </script>
package/js/rte/tests/notes.md ADDED
@@ -0,0 +1,6 @@
1
+ ## not good for firefox, keynavigation
2
+ ```css
3
+ [contenteditable] hr {
4
+ overflow: visible !important;
5
+ }
6
+ ```
package/js/rte/tests/range.html ADDED
@@ -0,0 +1,167 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <title>test</title>
7
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
8
+
9
+ <script src="../../../u2/auto.js" type=module async></script>
10
+
11
+ <link rel=stylesheet href="../../../css/classless/full.css">
12
+ <link rel=stylesheet href="../../../css/classless/aria.css">
13
+ <link rel=stylesheet href="../../../css/classless/simple.css">
14
+
15
+ <style>
16
+ body {
17
+ max-width: 200rem;
18
+ }
19
+ [contenteditable] {
20
+ border: 1px solid #ccc;
21
+ margin: 10px;
22
+ padding: 10px;
23
+ min-height: 100px;
24
+ }
25
+ .rte {
26
+ --u2-rte:true;
27
+ }
28
+ </style>
29
+
30
+ </head>
31
+
32
+ <body>
33
+
34
+
35
+ <section id=container>
36
+
37
+
38
+ <div class="u2-flex" style="gap:.4rem">
39
+ <div id=rte1 class=rte contenteditable style="margin:0; flex:1 1 18rem" spellcheck="false">
40
+ some text
41
+ <hr>
42
+ <ul>
43
+ <li>This is a</li>
44
+ <li>list</li>
45
+ <li>to demonstrate</li>
46
+ </ul>
47
+ <img src="" width="40" height="40" alt="">
48
+ <p>paragraph</p>
49
+ </div>
50
+
51
+ <u2-code id=editor1 trim editable element="rte1" style="margin:0; flex:1 1 18rem; font-size:12px"></u2-code>
52
+
53
+ </div>
54
+
55
+ <button id=splitBoundaries>splitBoundaries</button>
56
+
57
+ <button id=affectedRootNodes>affectedRootNodes</button>
58
+ <button id=containingRootNodes>containingRootNodes</button>
59
+ <button id=containingRootNodesForceElements>containingRootNodesForceElements</button>
60
+
61
+ <br>
62
+
63
+ <label>
64
+ <input type="checkbox" id="showRects"> show boundingClientRect (green normal, red:fixed)
65
+ </label>
66
+
67
+ <br>
68
+
69
+
70
+ <script type=module>
71
+ import {$range} from '../src/range.js';
72
+
73
+ affectedRootNodes.onclick = ()=> {
74
+ let range = $range.fromSelection();
75
+ let nodes = range.affectedRootNodes();
76
+ console.log(nodes);
77
+ }
78
+ containingRootNodes.onclick = ()=> {
79
+ let range = $range.fromSelection();
80
+ let nodes = range.containingRootNodes();
81
+ console.log(nodes);
82
+ }
83
+ containingRootNodesForceElements.onclick = ()=> {
84
+ let range = $range.fromSelection();
85
+ range.commonAncestorContainer.normalize();
86
+ const all = range.containingRootNodesForceElements();
87
+ const toggleColor = all[0].style.color?'':'red';
88
+ const toggleOutline = all[0].style.outline?'':'1px solid red';
89
+ for (const el of all) {
90
+ el.style.color = toggleColor;
91
+ el.style.outline = toggleOutline;
92
+ el.querySelectorAll('*').forEach(el=>el.style.color = toggleColor);
93
+ if (el.getAttribute('style') === '') el.removeAttribute('style');
94
+ if (el.getAttribute('style') === '') el.removeAttribute('style');
95
+ if (el.tagName === 'SPAN' && el.attributes.length === 0) removeNode(el);
96
+ }
97
+ }
98
+
99
+ splitBoundaries.onclick = ()=>{
100
+ let range = $range.fromSelection();
101
+ range.splitBoundaries();
102
+ addSplittedTextMarks(range.commonAncestorContainer);
103
+ editor1.value = rte1.innerHTML;
104
+ }
105
+
106
+ addEventListener('selectionchange', drawRects,true);
107
+ rte1.addEventListener('input', drawRects);
108
+
109
+ // removes node but not its children
110
+ function removeNode(el){
111
+ while (el.firstChild) el.parentNode.insertBefore(el.firstChild, el);
112
+ el.remove();
113
+ }
114
+
115
+ function addSplittedTextMarks(element) {
116
+ for (let node of element.childNodes) {
117
+ if (node.nodeType === 3 && node.previousSibling && node.previousSibling.nodeType == 3) {
118
+ node.data = '|'+node.data;
119
+ } else if (node.nodeType === 1) {
120
+ addSplittedTextMarks(node);
121
+ }
122
+ }
123
+ }
124
+
125
+ showRects.addEventListener('change', ()=>{
126
+ if (showRects.checked) {
127
+ clientRectPosition.style.display = 'block';
128
+ clientRectPositionOld.style.display = 'block';
129
+ } else {
130
+ clientRectPosition.style.display = 'none';
131
+ clientRectPositionOld.style.display = 'none';
132
+ }
133
+ });
134
+
135
+ function drawRects() {
136
+ let range = $range.fromSelection();
137
+ const rect = range.boundingClientRect();
138
+ if (!rect) return;
139
+ clientRectPosition.style.left = rect.left+'px';
140
+ clientRectPosition.style.top = rect.top+'px';
141
+ clientRectPosition.style.width = rect.width+'px';
142
+ clientRectPosition.style.height = rect.height+'px';
143
+ const rectOld = range.getBoundingClientRect();
144
+ clientRectPositionOld.style.left = rectOld.left+'px';
145
+ clientRectPositionOld.style.top = rectOld.top+'px';
146
+ clientRectPositionOld.style.width = rectOld.width+'px';
147
+ clientRectPositionOld.style.height = rectOld.height+'px';
148
+ }
149
+
150
+ </script>
151
+
152
+ <div id="clientRectPosition" class=clientRect style="--color:#f55" hidden></div>
153
+ <div id="clientRectPositionOld" class=clientRect style="--color:#4f4" hidden></div>
154
+
155
+ <style>
156
+ .clientRect {
157
+ position:fixed; top:0; left:0;
158
+ outline:.3rem solid color-mix(in srgb, var(--color), transparent 50%);
159
+ border:1px solid var(--color);
160
+ transform:translateX(-.1px);
161
+ pointer-events:none;
162
+ }
163
+ </style>
164
+
165
+ <span id="x">xxxxxx</span>
166
+
167
+ </section>
package/js/rte/tests/selection-explorer.html ADDED
@@ -0,0 +1,222 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+
7
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
8
+
9
+ <script src="../../../u2/auto.js" type=module async></script>
10
+
11
+ <link rel=stylesheet href="../../../css/classless/full.css">
12
+ <link rel=stylesheet href="../../../css/classless/aria.css">
13
+ <link rel=stylesheet href="../../../css/classless/simple.css">
14
+
15
+ <style>
16
+ body {
17
+ max-width: 60rem;
18
+ }
19
+ [contenteditable] {
20
+ border: 1px solid #ccc;
21
+ margin: 10px;
22
+ padding: 10px;
23
+ min-height: 100px;
24
+ }
25
+ .rte {
26
+ --u2-rte:true;
27
+ }
28
+ </style>
29
+
30
+ </head>
31
+
32
+ <body>
33
+
34
+
35
+ <section id=container>
36
+
37
+ <div id=rte1 class=rte contenteditable style="margin:0; flex:1 1 18rem" spellcheck="false" autofocus>
38
+ some text
39
+ <hr>
40
+ <p>paragraph</p>
41
+ <ul>
42
+ <li>This is a</li>
43
+ <li>list</li>
44
+ <li>to demonstrate</li>
45
+ </ul>
46
+ <p>
47
+ <img src="" alt="image" style="width:100px; height:100px; background:#bbb;">
48
+ </p>
49
+ <p>paragraph</p>
50
+ </div>
51
+
52
+
53
+ <pre id="out" style="margin:0; flex:1 1 18rem; font-size:13px"></pre>
54
+
55
+ <div style="display:flex">
56
+ <div id="selectionDump"> </div>
57
+ <div id="rangeDump"> </div>
58
+ </div>
59
+
60
+ <button onclick="$range().selectNode(rte1.firstElementChild).select()">run</button><br>
61
+ <button onclick="$range().selectNodeContents(rte1.firstElementChild).select()">run</button><br>
62
+ <button onclick="getSelection().selectAllChildren(rte1.firstElementChild)">run</button><br>
63
+
64
+ <script type=module>
65
+ import {$range} from '../src/range.js';
66
+ import {dump, domRender} from 'https://cdn.jsdelivr.net/gh/nuxodin/dump.js@x.x/mod.min.js';
67
+
68
+ window.$range = $range;
69
+
70
+ let ignoreMutation = false;
71
+
72
+ function showRange() {
73
+
74
+ const range = $range.fromSelection();
75
+ if (range && rte1.contains(range.commonAncestorContainer)) {
76
+
77
+
78
+ // set dump content (bevore setting markers because it will split text nodes)
79
+ const realSelection = getSelection();
80
+ const realRange = realSelection.getRangeAt(0);
81
+ const r = {
82
+ //startContainer: realRange.startContainer, // todo in dump.js strange error
83
+ startOffset: realRange.startOffset,
84
+ endContainer: realRange.endContainer,
85
+ endOffset: realRange.endOffset,
86
+ collapsed: realRange.collapsed,
87
+ commonAncestorContainer: realRange.commonAncestorContainer,
88
+ }
89
+ const s = {
90
+ anchorNode: realSelection.anchorNode,
91
+ anchorOffset: realSelection.anchorOffset,
92
+ focusNode: realSelection.focusNode,
93
+ focusOffset: realSelection.focusOffset,
94
+ isCollapsed: realSelection.isCollapsed,
95
+ type: realSelection.type,
96
+ rangeCount: realSelection.rangeCount,
97
+ caretBidiLevel: realSelection.caretBidiLevel,
98
+ }
99
+ selectionDump.innerHTML = dump(s, {depth:2, order:0, inherited:true, customRender:domRender});
100
+ rangeDump.innerHTML = dump(r, {depth:2, order:0, inherited:true, customRender:domRender});
101
+
102
+
103
+ ignoreMutation = true;
104
+
105
+ //addSplitMarkers(rte1);
106
+
107
+
108
+ // set markers to get positions in innerHTML
109
+ const startTextNode = document.createTextNode('marker_start_so9df8as0f0');
110
+ const endTextNode = document.createTextNode('marker_end_laseg08a0egga');
111
+
112
+ const sRange = range.cloneRange().collapse(false);
113
+ range.cloneRange().collapse(false).insertNode(endTextNode);
114
+ range.cloneRange().collapse(true).insertNode(startTextNode);
115
+
116
+ let code = rte1.innerHTML;
117
+
118
+
119
+
120
+ // remove markers
121
+ //removeSplitMarkers(rte1);
122
+
123
+ startTextNode.remove();
124
+ endTextNode.remove();
125
+
126
+ range.startContainer.parentNode.normalize();
127
+ range.endContainer.parentNode.normalize();
128
+
129
+ setTimeout(()=>ignoreMutation = false, 150);
130
+
131
+ ///code = replaceSplitMarkers(code);
132
+
133
+
134
+ const cursor = '<span style="position:absolute; height:1.4rem; width:2px; background:#c00; margin-bottom:-3px; z-index:2"></span>';
135
+
136
+ let outHtml = escapeHtml(code);
137
+ outHtml = outHtml.replace('marker_start_so9df8as0f0', cursor);
138
+ outHtml = outHtml.replace('marker_end_laseg08a0egga', cursor);
139
+
140
+ // const splitCursor = '<span style="position:absolute; height:1.4rem; width:1px; background:#999; margin-bottom:-3px"></span>';
141
+ // outHtml = outHtml.replace(/marker_split_so9df8as0f0/g, splitCursor);
142
+
143
+ out.innerHTML = outHtml;
144
+
145
+ // const start = code.indexOf('marker_start_so9df8as0f0');
146
+ // code = code.replace('marker_start_so9df8as0f0','');
147
+ // const end = code.indexOf('marker_end_laseg08a0egga');
148
+ // code = code.replace('marker_end_laseg08a0egga','');
149
+
150
+ // // set <pre> content
151
+ // const before = code.substring(0, start);
152
+ // const between = code.substring(start, end);
153
+ // const after = code.substring(end);
154
+ // out.innerHTML =
155
+ // escapeHtml(before) +
156
+ // '<span style="color:red">' +
157
+ // cursor +
158
+ // escapeHtml(between) +
159
+ // cursor +
160
+ // '</span>' +
161
+ // escapeHtml(after);
162
+
163
+ } else {
164
+ let code = rte1.innerHTML;
165
+ const escaped = escapeHtml(code);
166
+ if (escaped !== out.innerHTML){
167
+ out.innerHTML = escapeHtml(code);
168
+ }
169
+ }
170
+
171
+ }
172
+
173
+ document.addEventListener('selectionchange',()=>{
174
+ if (ignoreMutation) return;
175
+ showRange();
176
+ });
177
+
178
+ const mutationObserver = new MutationObserver((mutationsList, observer) => {
179
+ if (ignoreMutation) return;
180
+ showRange();
181
+ });
182
+ mutationObserver.observe(rte1, {childList: true, subtree: true, characterData: true});
183
+
184
+ showRange();
185
+
186
+
187
+
188
+ function escapeHtml(unsafe) {
189
+ return unsafe
190
+ .replace(/&/g, "&amp;")
191
+ .replace(/</g, "&lt;")
192
+ .replace(/>/g, "&gt;")
193
+ .replace(/"/g, "&quot;")
194
+ .replace(/'/g, "&#039;");
195
+ }
196
+
197
+
198
+ // function addSplitMarkers(el) {
199
+ // for (let node of [...el.childNodes]) {
200
+ // if (node.nodeType === 3 && node.previousSibling && node.previousSibling.nodeType === 3) {
201
+ // node.before(document.createTextNode('marker_split_so9df8as0f0'));
202
+ // } else if (node.nodeType === 1) {
203
+ // addSplitMarkers(node);
204
+ // }
205
+ // }
206
+ // }
207
+ // function removeSplitMarkers(el) {
208
+ // for (let node of [...el.childNodes]) {
209
+ // if (node.nodeType === 3 && node.data === 'marker_split_so9df8as0f0') {
210
+ // node.remove();
211
+ // } else if (node.nodeType === 1) {
212
+ // removeSplitMarkers(node);
213
+ // }
214
+ // }
215
+ // }
216
+
217
+ </script>
218
+
219
+
220
+
221
+ </section>
222
+
package/js/rte/tests/test.html ADDED
@@ -0,0 +1,92 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <title>Test</title>
7
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
8
+
9
+ <script src="../../../u2/auto.js" type=module async></script>
10
+
11
+ <link rel=stylesheet href="../../../css/classless/full.css">
12
+ <link rel=stylesheet href="../../../css/classless/aria.css">
13
+ <link rel=stylesheet href="../../../css/classless/simple.css">
14
+
15
+ <script src="../rte.js" type=module async></script>
16
+ <style>
17
+ body {
18
+ max-width: 100rem;
19
+ }
20
+ [contenteditable] {
21
+ border: 1px solid #ccc;
22
+ margin: 10px;
23
+ padding: 10px;
24
+ min-height: 100px;
25
+ }
26
+ .u2-flex {
27
+ margin:2rem 0;
28
+ gap:.4rem;
29
+ }
30
+ .u2-flex > * {
31
+ margin:0;
32
+ padding:.5rem;
33
+ flex:1 1 18rem;
34
+ border:1px solid black;
35
+ }
36
+ u2-code {
37
+ font-size:12px;
38
+ }
39
+ </style>
40
+
41
+ </head>
42
+
43
+ <body>
44
+
45
+
46
+ <section id=container>
47
+
48
+ <div class=u2-flex>
49
+ <div id=rte-1 class=rte contenteditable spellcheck=false>
50
+ <hr>
51
+ <p>Some <b>text</b></p>
52
+ <p>image:</p>
53
+ <img width="200" height="150" alt="tick" src="https://fastly.picsum.photos/id/237/200/150.jpg?hmac=cP3GW-TQQWpntUpoHauvAWmCaKSFUngooZCPRN50Om8">
54
+
55
+ </div>
56
+ <u2-code trim editable element=rte-1></u2-code>
57
+ </div>
58
+
59
+ <div class=u2-flex>
60
+ <button id=rte-2 contenteditable class=rte spellcheck=false>Button is <b>editable</b></button>
61
+ <u2-code trim editable element=rte-2></u2-code>
62
+ </div>
63
+
64
+ <div class=u2-flex>
65
+ <div id=rte-3 class=rte contenteditable spellcheck=false>
66
+ <p>RTE 3</p>
67
+ </div>
68
+ <u2-code trim editable element=rte-3></u2-code>
69
+ </div>
70
+
71
+ <u2-code trim editable>
72
+ <style>
73
+ .rte {
74
+ --u2-rte:true;
75
+ }
76
+ #rte-3 {
77
+ --u2-rte-toolbar: Bold Italic Insertunorderedlist Format;
78
+ }
79
+ ::highlight(u2-rte-selection) {
80
+ background-color: #faa;
81
+ }
82
+ #u2RteToolbar {
83
+ border-radius:.6em;
84
+ padding:.3rem;
85
+ & .-item {
86
+ border-radius:.35em;
87
+ }
88
+ }
89
+ </style>
90
+ </u2-code>
91
+
92
+ </section>