@ckeditor/ckeditor5-ui 39.0.1 → 40.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 (229) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/LICENSE.md +1 -1
  3. package/README.md +4 -4
  4. package/lang/contexts.json +5 -1
  5. package/lang/translations/ar.po +17 -0
  6. package/lang/translations/ast.po +17 -0
  7. package/lang/translations/az.po +17 -0
  8. package/lang/translations/bg.po +17 -0
  9. package/lang/translations/bn.po +17 -0
  10. package/lang/translations/ca.po +17 -0
  11. package/lang/translations/cs.po +17 -0
  12. package/lang/translations/da.po +17 -0
  13. package/lang/translations/de-ch.po +17 -0
  14. package/lang/translations/de.po +17 -0
  15. package/lang/translations/el.po +17 -0
  16. package/lang/translations/en-au.po +17 -0
  17. package/lang/translations/en-gb.po +17 -0
  18. package/lang/translations/en.po +17 -0
  19. package/lang/translations/eo.po +17 -0
  20. package/lang/translations/es.po +17 -0
  21. package/lang/translations/et.po +17 -0
  22. package/lang/translations/eu.po +17 -0
  23. package/lang/translations/fa.po +17 -0
  24. package/lang/translations/fi.po +17 -0
  25. package/lang/translations/fr.po +17 -0
  26. package/lang/translations/gl.po +17 -0
  27. package/lang/translations/he.po +17 -0
  28. package/lang/translations/hi.po +17 -0
  29. package/lang/translations/hr.po +17 -0
  30. package/lang/translations/hu.po +17 -0
  31. package/lang/translations/id.po +17 -0
  32. package/lang/translations/it.po +17 -0
  33. package/lang/translations/ja.po +17 -0
  34. package/lang/translations/km.po +17 -0
  35. package/lang/translations/kn.po +17 -0
  36. package/lang/translations/ko.po +17 -0
  37. package/lang/translations/ku.po +17 -0
  38. package/lang/translations/lt.po +17 -0
  39. package/lang/translations/lv.po +17 -0
  40. package/lang/translations/ms.po +17 -0
  41. package/lang/translations/nb.po +17 -0
  42. package/lang/translations/ne.po +17 -0
  43. package/lang/translations/nl.po +17 -0
  44. package/lang/translations/no.po +17 -0
  45. package/lang/translations/pl.po +17 -0
  46. package/lang/translations/pt-br.po +17 -0
  47. package/lang/translations/pt.po +17 -0
  48. package/lang/translations/ro.po +17 -0
  49. package/lang/translations/ru.po +17 -0
  50. package/lang/translations/sk.po +17 -0
  51. package/lang/translations/sl.po +17 -0
  52. package/lang/translations/sq.po +17 -0
  53. package/lang/translations/sr-latn.po +17 -0
  54. package/lang/translations/sr.po +17 -0
  55. package/lang/translations/sv.po +17 -0
  56. package/lang/translations/th.po +17 -0
  57. package/lang/translations/tk.po +17 -0
  58. package/lang/translations/tr.po +17 -0
  59. package/lang/translations/tt.po +17 -0
  60. package/lang/translations/ug.po +17 -0
  61. package/lang/translations/uk.po +17 -0
  62. package/lang/translations/ur.po +17 -0
  63. package/lang/translations/uz.po +17 -0
  64. package/lang/translations/vi.po +17 -0
  65. package/lang/translations/zh-cn.po +17 -0
  66. package/lang/translations/zh.po +17 -0
  67. package/package.json +3 -7
  68. package/src/augmentation.d.ts +86 -86
  69. package/src/augmentation.js +5 -5
  70. package/src/autocomplete/autocompleteview.d.ts +81 -0
  71. package/src/autocomplete/autocompleteview.js +146 -0
  72. package/src/bindings/addkeyboardhandlingforgrid.d.ts +27 -27
  73. package/src/bindings/addkeyboardhandlingforgrid.js +107 -107
  74. package/src/bindings/clickoutsidehandler.d.ts +28 -28
  75. package/src/bindings/clickoutsidehandler.js +36 -36
  76. package/src/bindings/csstransitiondisablermixin.d.ts +40 -40
  77. package/src/bindings/csstransitiondisablermixin.js +55 -55
  78. package/src/bindings/injectcsstransitiondisabler.d.ts +59 -59
  79. package/src/bindings/injectcsstransitiondisabler.js +71 -71
  80. package/src/bindings/preventdefault.d.ts +33 -33
  81. package/src/bindings/preventdefault.js +34 -34
  82. package/src/bindings/submithandler.d.ts +57 -57
  83. package/src/bindings/submithandler.js +47 -47
  84. package/src/button/button.d.ts +178 -178
  85. package/src/button/button.js +5 -5
  86. package/src/button/buttonlabel.d.ts +34 -0
  87. package/src/button/buttonlabel.js +5 -0
  88. package/src/button/buttonlabelview.d.ts +31 -0
  89. package/src/button/buttonlabelview.js +42 -0
  90. package/src/button/buttonview.d.ts +185 -177
  91. package/src/button/buttonview.js +219 -231
  92. package/src/button/switchbuttonview.d.ts +45 -45
  93. package/src/button/switchbuttonview.js +75 -75
  94. package/src/colorgrid/colorgridview.d.ts +132 -132
  95. package/src/colorgrid/colorgridview.js +124 -124
  96. package/src/colorgrid/colortileview.d.ts +28 -28
  97. package/src/colorgrid/colortileview.js +40 -40
  98. package/src/colorgrid/utils.d.ts +47 -47
  99. package/src/colorgrid/utils.js +84 -84
  100. package/src/colorpicker/colorpickerview.d.ts +137 -137
  101. package/src/colorpicker/colorpickerview.js +270 -270
  102. package/src/colorpicker/utils.d.ts +43 -43
  103. package/src/colorpicker/utils.js +99 -99
  104. package/src/colorselector/colorgridsfragmentview.d.ts +194 -194
  105. package/src/colorselector/colorgridsfragmentview.js +289 -289
  106. package/src/colorselector/colorpickerfragmentview.d.ts +128 -128
  107. package/src/colorselector/colorpickerfragmentview.js +205 -205
  108. package/src/colorselector/colorselectorview.d.ts +242 -242
  109. package/src/colorselector/colorselectorview.js +256 -256
  110. package/src/colorselector/documentcolorcollection.d.ts +70 -70
  111. package/src/colorselector/documentcolorcollection.js +42 -42
  112. package/src/componentfactory.d.ts +81 -81
  113. package/src/componentfactory.js +104 -104
  114. package/src/dropdown/button/dropdownbutton.d.ts +25 -25
  115. package/src/dropdown/button/dropdownbutton.js +5 -5
  116. package/src/dropdown/button/dropdownbuttonview.d.ts +48 -48
  117. package/src/dropdown/button/dropdownbuttonview.js +66 -66
  118. package/src/dropdown/button/splitbuttonview.d.ts +161 -161
  119. package/src/dropdown/button/splitbuttonview.js +152 -152
  120. package/src/dropdown/dropdownpanelfocusable.d.ts +21 -21
  121. package/src/dropdown/dropdownpanelfocusable.js +5 -5
  122. package/src/dropdown/dropdownpanelview.d.ts +62 -62
  123. package/src/dropdown/dropdownpanelview.js +97 -97
  124. package/src/dropdown/dropdownview.d.ts +315 -315
  125. package/src/dropdown/dropdownview.js +379 -378
  126. package/src/dropdown/utils.d.ts +235 -221
  127. package/src/dropdown/utils.js +458 -437
  128. package/src/editableui/editableuiview.d.ts +72 -72
  129. package/src/editableui/editableuiview.js +112 -112
  130. package/src/editableui/inline/inlineeditableuiview.d.ts +40 -40
  131. package/src/editableui/inline/inlineeditableuiview.js +48 -48
  132. package/src/editorui/bodycollection.d.ts +55 -55
  133. package/src/editorui/bodycollection.js +84 -84
  134. package/src/editorui/boxed/boxededitoruiview.d.ts +40 -40
  135. package/src/editorui/boxed/boxededitoruiview.js +81 -81
  136. package/src/editorui/editorui.d.ts +282 -282
  137. package/src/editorui/editorui.js +410 -410
  138. package/src/editorui/editoruiview.d.ts +39 -39
  139. package/src/editorui/editoruiview.js +38 -38
  140. package/src/editorui/poweredby.d.ts +71 -71
  141. package/src/editorui/poweredby.js +276 -299
  142. package/src/focuscycler.d.ts +226 -183
  143. package/src/focuscycler.js +245 -220
  144. package/src/formheader/formheaderview.d.ts +59 -53
  145. package/src/formheader/formheaderview.js +69 -63
  146. package/src/highlightedtext/highlightedtextview.d.ts +38 -0
  147. package/src/highlightedtext/highlightedtextview.js +102 -0
  148. package/src/icon/iconview.d.ts +85 -78
  149. package/src/icon/iconview.js +114 -112
  150. package/src/iframe/iframeview.d.ts +50 -50
  151. package/src/iframe/iframeview.js +63 -63
  152. package/src/index.d.ts +73 -63
  153. package/src/index.js +70 -62
  154. package/src/input/inputbase.d.ts +107 -0
  155. package/src/input/inputbase.js +110 -0
  156. package/src/input/inputview.d.ts +36 -121
  157. package/src/input/inputview.js +24 -106
  158. package/src/inputnumber/inputnumberview.d.ts +49 -49
  159. package/src/inputnumber/inputnumberview.js +40 -40
  160. package/src/inputtext/inputtextview.d.ts +18 -18
  161. package/src/inputtext/inputtextview.js +27 -27
  162. package/src/label/labelview.d.ts +36 -36
  163. package/src/label/labelview.js +41 -41
  164. package/src/labeledfield/labeledfieldview.d.ts +187 -182
  165. package/src/labeledfield/labeledfieldview.js +157 -157
  166. package/src/labeledfield/utils.d.ts +123 -93
  167. package/src/labeledfield/utils.js +176 -131
  168. package/src/labeledinput/labeledinputview.d.ts +125 -125
  169. package/src/labeledinput/labeledinputview.js +125 -125
  170. package/src/list/listitemgroupview.d.ts +51 -0
  171. package/src/list/listitemgroupview.js +75 -0
  172. package/src/list/listitemview.d.ts +36 -35
  173. package/src/list/listitemview.js +42 -40
  174. package/src/list/listseparatorview.d.ts +18 -18
  175. package/src/list/listseparatorview.js +28 -28
  176. package/src/list/listview.d.ts +122 -65
  177. package/src/list/listview.js +187 -90
  178. package/src/model.d.ts +22 -22
  179. package/src/model.js +31 -31
  180. package/src/notification/notification.d.ts +211 -211
  181. package/src/notification/notification.js +187 -187
  182. package/src/panel/balloon/balloonpanelview.d.ts +685 -685
  183. package/src/panel/balloon/balloonpanelview.js +1010 -988
  184. package/src/panel/balloon/contextualballoon.d.ts +299 -299
  185. package/src/panel/balloon/contextualballoon.js +572 -572
  186. package/src/panel/sticky/stickypanelview.d.ts +156 -158
  187. package/src/panel/sticky/stickypanelview.js +234 -231
  188. package/src/search/filteredview.d.ts +31 -0
  189. package/src/search/filteredview.js +5 -0
  190. package/src/search/searchinfoview.d.ts +45 -0
  191. package/src/search/searchinfoview.js +59 -0
  192. package/src/search/searchresultsview.d.ts +54 -0
  193. package/src/search/searchresultsview.js +65 -0
  194. package/src/search/text/searchtextqueryview.d.ts +76 -0
  195. package/src/search/text/searchtextqueryview.js +75 -0
  196. package/src/search/text/searchtextview.d.ts +219 -0
  197. package/src/search/text/searchtextview.js +201 -0
  198. package/src/spinner/spinnerview.d.ts +25 -0
  199. package/src/spinner/spinnerview.js +38 -0
  200. package/src/template.d.ts +942 -942
  201. package/src/template.js +1294 -1294
  202. package/src/textarea/textareaview.d.ts +88 -0
  203. package/src/textarea/textareaview.js +140 -0
  204. package/src/toolbar/balloon/balloontoolbar.d.ts +122 -122
  205. package/src/toolbar/balloon/balloontoolbar.js +300 -300
  206. package/src/toolbar/block/blockbuttonview.d.ts +35 -35
  207. package/src/toolbar/block/blockbuttonview.js +41 -41
  208. package/src/toolbar/block/blocktoolbar.d.ts +161 -161
  209. package/src/toolbar/block/blocktoolbar.js +395 -391
  210. package/src/toolbar/normalizetoolbarconfig.d.ts +40 -39
  211. package/src/toolbar/normalizetoolbarconfig.js +51 -51
  212. package/src/toolbar/toolbarlinebreakview.d.ts +18 -18
  213. package/src/toolbar/toolbarlinebreakview.js +28 -28
  214. package/src/toolbar/toolbarseparatorview.d.ts +18 -18
  215. package/src/toolbar/toolbarseparatorview.js +28 -28
  216. package/src/toolbar/toolbarview.d.ts +266 -265
  217. package/src/toolbar/toolbarview.js +719 -717
  218. package/src/tooltipmanager.d.ts +180 -180
  219. package/src/tooltipmanager.js +353 -353
  220. package/src/view.d.ts +422 -422
  221. package/src/view.js +396 -396
  222. package/src/viewcollection.d.ts +139 -139
  223. package/src/viewcollection.js +206 -206
  224. package/theme/components/autocomplete/autocomplete.css +22 -0
  225. package/theme/components/formheader/formheader.css +8 -0
  226. package/theme/components/highlightedtext/highlightedtext.css +12 -0
  227. package/theme/components/search/search.css +43 -0
  228. package/theme/components/spinner/spinner.css +23 -0
  229. package/theme/components/textarea/textarea.css +10 -0
package/src/editorui/bodycollection.d.ts CHANGED
@@ -1,55 +1,55 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- import ViewCollection from '../viewcollection';
6
- import type View from '../view';
7
- import { type Locale } from '@ckeditor/ckeditor5-utils';
8
- /**
9
- * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
10
- * from the DOM structure of the editor, like panels, icons, etc.
11
- *
12
- * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
13
- * Any plugin can add a {@link module:ui/view~View view} to this collection.
14
- * These views will render in a container placed directly in the `<body>` element.
15
- * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
16
- *
17
- * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
18
- *
19
- * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
20
- * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
21
- * elements created directly in the body and remove it when the last body collection will be
22
- * {@link ~BodyCollection#detachFromDom detached}.
23
- */
24
- export default class BodyCollection extends ViewCollection {
25
- /**
26
- * The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
27
- * See the view {@link module:ui/view~View#locale locale} property.
28
- */
29
- readonly locale: Locale;
30
- /**
31
- * The element holding elements of the body region.
32
- */
33
- private _bodyCollectionContainer?;
34
- /**
35
- * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
36
- *
37
- * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
38
- * @param initialItems The initial items of the collection.
39
- */
40
- constructor(locale: Locale, initialItems?: Iterable<View>);
41
- /**
42
- * The element holding elements of the body region.
43
- */
44
- get bodyCollectionContainer(): HTMLElement | undefined;
45
- /**
46
- * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
47
- * the body collection.
48
- */
49
- attachToDom(): void;
50
- /**
51
- * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
52
- * anymore to clean-up the DOM structure.
53
- */
54
- detachFromDom(): void;
55
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ import ViewCollection from '../viewcollection';
6
+ import type View from '../view';
7
+ import { type Locale } from '@ckeditor/ckeditor5-utils';
8
+ /**
9
+ * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
10
+ * from the DOM structure of the editor, like panels, icons, etc.
11
+ *
12
+ * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
13
+ * Any plugin can add a {@link module:ui/view~View view} to this collection.
14
+ * These views will render in a container placed directly in the `<body>` element.
15
+ * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
16
+ *
17
+ * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
18
+ *
19
+ * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
20
+ * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
21
+ * elements created directly in the body and remove it when the last body collection will be
22
+ * {@link ~BodyCollection#detachFromDom detached}.
23
+ */
24
+ export default class BodyCollection extends ViewCollection {
25
+ /**
26
+ * The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
27
+ * See the view {@link module:ui/view~View#locale locale} property.
28
+ */
29
+ readonly locale: Locale;
30
+ /**
31
+ * The element holding elements of the body region.
32
+ */
33
+ private _bodyCollectionContainer?;
34
+ /**
35
+ * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
36
+ *
37
+ * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
38
+ * @param initialItems The initial items of the collection.
39
+ */
40
+ constructor(locale: Locale, initialItems?: Iterable<View>);
41
+ /**
42
+ * The element holding elements of the body region.
43
+ */
44
+ get bodyCollectionContainer(): HTMLElement | undefined;
45
+ /**
46
+ * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
47
+ * the body collection.
48
+ */
49
+ attachToDom(): void;
50
+ /**
51
+ * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
52
+ * anymore to clean-up the DOM structure.
53
+ */
54
+ detachFromDom(): void;
55
+ }
package/src/editorui/bodycollection.js CHANGED
@@ -1,84 +1,84 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module ui/editorui/bodycollection
7
- */
8
- /* globals document */
9
- import Template from '../template';
10
- import ViewCollection from '../viewcollection';
11
- import { createElement } from '@ckeditor/ckeditor5-utils';
12
- /**
13
- * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
14
- * from the DOM structure of the editor, like panels, icons, etc.
15
- *
16
- * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
17
- * Any plugin can add a {@link module:ui/view~View view} to this collection.
18
- * These views will render in a container placed directly in the `<body>` element.
19
- * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
20
- *
21
- * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
22
- *
23
- * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
24
- * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
25
- * elements created directly in the body and remove it when the last body collection will be
26
- * {@link ~BodyCollection#detachFromDom detached}.
27
- */
28
- export default class BodyCollection extends ViewCollection {
29
- /**
30
- * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
31
- *
32
- * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
33
- * @param initialItems The initial items of the collection.
34
- */
35
- constructor(locale, initialItems = []) {
36
- super(initialItems);
37
- this.locale = locale;
38
- }
39
- /**
40
- * The element holding elements of the body region.
41
- */
42
- get bodyCollectionContainer() {
43
- return this._bodyCollectionContainer;
44
- }
45
- /**
46
- * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
47
- * the body collection.
48
- */
49
- attachToDom() {
50
- this._bodyCollectionContainer = new Template({
51
- tag: 'div',
52
- attributes: {
53
- class: [
54
- 'ck',
55
- 'ck-reset_all',
56
- 'ck-body',
57
- 'ck-rounded-corners'
58
- ],
59
- dir: this.locale.uiLanguageDirection
60
- },
61
- children: this
62
- }).render();
63
- let wrapper = document.querySelector('.ck-body-wrapper');
64
- if (!wrapper) {
65
- wrapper = createElement(document, 'div', { class: 'ck-body-wrapper' });
66
- document.body.appendChild(wrapper);
67
- }
68
- wrapper.appendChild(this._bodyCollectionContainer);
69
- }
70
- /**
71
- * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
72
- * anymore to clean-up the DOM structure.
73
- */
74
- detachFromDom() {
75
- super.destroy();
76
- if (this._bodyCollectionContainer) {
77
- this._bodyCollectionContainer.remove();
78
- }
79
- const wrapper = document.querySelector('.ck-body-wrapper');
80
- if (wrapper && wrapper.childElementCount == 0) {
81
- wrapper.remove();
82
- }
83
- }
84
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/editorui/bodycollection
7
+ */
8
+ /* globals document */
9
+ import Template from '../template';
10
+ import ViewCollection from '../viewcollection';
11
+ import { createElement } from '@ckeditor/ckeditor5-utils';
12
+ /**
13
+ * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
14
+ * from the DOM structure of the editor, like panels, icons, etc.
15
+ *
16
+ * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
17
+ * Any plugin can add a {@link module:ui/view~View view} to this collection.
18
+ * These views will render in a container placed directly in the `<body>` element.
19
+ * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
20
+ *
21
+ * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
22
+ *
23
+ * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
24
+ * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
25
+ * elements created directly in the body and remove it when the last body collection will be
26
+ * {@link ~BodyCollection#detachFromDom detached}.
27
+ */
28
+ export default class BodyCollection extends ViewCollection {
29
+ /**
30
+ * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
31
+ *
32
+ * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
33
+ * @param initialItems The initial items of the collection.
34
+ */
35
+ constructor(locale, initialItems = []) {
36
+ super(initialItems);
37
+ this.locale = locale;
38
+ }
39
+ /**
40
+ * The element holding elements of the body region.
41
+ */
42
+ get bodyCollectionContainer() {
43
+ return this._bodyCollectionContainer;
44
+ }
45
+ /**
46
+ * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
47
+ * the body collection.
48
+ */
49
+ attachToDom() {
50
+ this._bodyCollectionContainer = new Template({
51
+ tag: 'div',
52
+ attributes: {
53
+ class: [
54
+ 'ck',
55
+ 'ck-reset_all',
56
+ 'ck-body',
57
+ 'ck-rounded-corners'
58
+ ],
59
+ dir: this.locale.uiLanguageDirection
60
+ },
61
+ children: this
62
+ }).render();
63
+ let wrapper = document.querySelector('.ck-body-wrapper');
64
+ if (!wrapper) {
65
+ wrapper = createElement(document, 'div', { class: 'ck-body-wrapper' });
66
+ document.body.appendChild(wrapper);
67
+ }
68
+ wrapper.appendChild(this._bodyCollectionContainer);
69
+ }
70
+ /**
71
+ * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
72
+ * anymore to clean-up the DOM structure.
73
+ */
74
+ detachFromDom() {
75
+ super.destroy();
76
+ if (this._bodyCollectionContainer) {
77
+ this._bodyCollectionContainer.remove();
78
+ }
79
+ const wrapper = document.querySelector('.ck-body-wrapper');
80
+ if (wrapper && wrapper.childElementCount == 0) {
81
+ wrapper.remove();
82
+ }
83
+ }
84
+ }
package/src/editorui/boxed/boxededitoruiview.d.ts CHANGED
@@ -1,40 +1,40 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module ui/editorui/boxed/boxededitoruiview
7
- */
8
- import EditorUIView from '../editoruiview';
9
- import type ViewCollection from '../../viewcollection';
10
- import type { Locale } from '@ckeditor/ckeditor5-utils';
11
- /**
12
- * The boxed editor UI view class. This class represents an editor interface
13
- * consisting of a toolbar and an editable area, enclosed within a box.
14
- */
15
- export default abstract class BoxedEditorUIView extends EditorUIView {
16
- /**
17
- * Collection of the child views located in the top (`.ck-editor__top`)
18
- * area of the UI.
19
- */
20
- readonly top: ViewCollection;
21
- /**
22
- * Collection of the child views located in the main (`.ck-editor__main`)
23
- * area of the UI.
24
- */
25
- readonly main: ViewCollection;
26
- /**
27
- * Voice label of the UI.
28
- */
29
- private readonly _voiceLabelView;
30
- /**
31
- * Creates an instance of the boxed editor UI view class.
32
- *
33
- * @param locale The locale instance..
34
- */
35
- constructor(locale: Locale);
36
- /**
37
- * Creates a voice label view instance.
38
- */
39
- private _createVoiceLabel;
40
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/editorui/boxed/boxededitoruiview
7
+ */
8
+ import EditorUIView from '../editoruiview';
9
+ import type ViewCollection from '../../viewcollection';
10
+ import type { Locale } from '@ckeditor/ckeditor5-utils';
11
+ /**
12
+ * The boxed editor UI view class. This class represents an editor interface
13
+ * consisting of a toolbar and an editable area, enclosed within a box.
14
+ */
15
+ export default abstract class BoxedEditorUIView extends EditorUIView {
16
+ /**
17
+ * Collection of the child views located in the top (`.ck-editor__top`)
18
+ * area of the UI.
19
+ */
20
+ readonly top: ViewCollection;
21
+ /**
22
+ * Collection of the child views located in the main (`.ck-editor__main`)
23
+ * area of the UI.
24
+ */
25
+ readonly main: ViewCollection;
26
+ /**
27
+ * Voice label of the UI.
28
+ */
29
+ private readonly _voiceLabelView;
30
+ /**
31
+ * Creates an instance of the boxed editor UI view class.
32
+ *
33
+ * @param locale The locale instance..
34
+ */
35
+ constructor(locale: Locale);
36
+ /**
37
+ * Creates a voice label view instance.
38
+ */
39
+ private _createVoiceLabel;
40
+ }
package/src/editorui/boxed/boxededitoruiview.js CHANGED
@@ -1,81 +1,81 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module ui/editorui/boxed/boxededitoruiview
7
- */
8
- import EditorUIView from '../editoruiview';
9
- import LabelView from '../../label/labelview';
10
- /**
11
- * The boxed editor UI view class. This class represents an editor interface
12
- * consisting of a toolbar and an editable area, enclosed within a box.
13
- */
14
- export default class BoxedEditorUIView extends EditorUIView {
15
- /**
16
- * Creates an instance of the boxed editor UI view class.
17
- *
18
- * @param locale The locale instance..
19
- */
20
- constructor(locale) {
21
- super(locale);
22
- this.top = this.createCollection();
23
- this.main = this.createCollection();
24
- this._voiceLabelView = this._createVoiceLabel();
25
- this.setTemplate({
26
- tag: 'div',
27
- attributes: {
28
- class: [
29
- 'ck',
30
- 'ck-reset',
31
- 'ck-editor',
32
- 'ck-rounded-corners'
33
- ],
34
- role: 'application',
35
- dir: locale.uiLanguageDirection,
36
- lang: locale.uiLanguage,
37
- 'aria-labelledby': this._voiceLabelView.id
38
- },
39
- children: [
40
- this._voiceLabelView,
41
- {
42
- tag: 'div',
43
- attributes: {
44
- class: [
45
- 'ck',
46
- 'ck-editor__top',
47
- 'ck-reset_all'
48
- ],
49
- role: 'presentation'
50
- },
51
- children: this.top
52
- },
53
- {
54
- tag: 'div',
55
- attributes: {
56
- class: [
57
- 'ck',
58
- 'ck-editor__main'
59
- ],
60
- role: 'presentation'
61
- },
62
- children: this.main
63
- }
64
- ]
65
- });
66
- }
67
- /**
68
- * Creates a voice label view instance.
69
- */
70
- _createVoiceLabel() {
71
- const t = this.t;
72
- const voiceLabel = new LabelView();
73
- voiceLabel.text = t('Rich Text Editor');
74
- voiceLabel.extendTemplate({
75
- attributes: {
76
- class: 'ck-voice-label'
77
- }
78
- });
79
- return voiceLabel;
80
- }
81
- }
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module ui/editorui/boxed/boxededitoruiview
7
+ */
8
+ import EditorUIView from '../editoruiview';
9
+ import LabelView from '../../label/labelview';
10
+ /**
11
+ * The boxed editor UI view class. This class represents an editor interface
12
+ * consisting of a toolbar and an editable area, enclosed within a box.
13
+ */
14
+ export default class BoxedEditorUIView extends EditorUIView {
15
+ /**
16
+ * Creates an instance of the boxed editor UI view class.
17
+ *
18
+ * @param locale The locale instance..
19
+ */
20
+ constructor(locale) {
21
+ super(locale);
22
+ this.top = this.createCollection();
23
+ this.main = this.createCollection();
24
+ this._voiceLabelView = this._createVoiceLabel();
25
+ this.setTemplate({
26
+ tag: 'div',
27
+ attributes: {
28
+ class: [
29
+ 'ck',
30
+ 'ck-reset',
31
+ 'ck-editor',
32
+ 'ck-rounded-corners'
33
+ ],
34
+ role: 'application',
35
+ dir: locale.uiLanguageDirection,
36
+ lang: locale.uiLanguage,
37
+ 'aria-labelledby': this._voiceLabelView.id
38
+ },
39
+ children: [
40
+ this._voiceLabelView,
41
+ {
42
+ tag: 'div',
43
+ attributes: {
44
+ class: [
45
+ 'ck',
46
+ 'ck-editor__top',
47
+ 'ck-reset_all'
48
+ ],
49
+ role: 'presentation'
50
+ },
51
+ children: this.top
52
+ },
53
+ {
54
+ tag: 'div',
55
+ attributes: {
56
+ class: [
57
+ 'ck',
58
+ 'ck-editor__main'
59
+ ],
60
+ role: 'presentation'
61
+ },
62
+ children: this.main
63
+ }
64
+ ]
65
+ });
66
+ }
67
+ /**
68
+ * Creates a voice label view instance.
69
+ */
70
+ _createVoiceLabel() {
71
+ const t = this.t;
72
+ const voiceLabel = new LabelView();
73
+ voiceLabel.text = t('Rich Text Editor');
74
+ voiceLabel.extendTemplate({
75
+ attributes: {
76
+ class: 'ck-voice-label'
77
+ }
78
+ });
79
+ return voiceLabel;
80
+ }
81
+ }