@ckeditor/ckeditor5-list 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 (173) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/LICENSE.md +1 -1
  3. package/README.md +4 -4
  4. package/build/list.js +1 -1
  5. package/build/list.js.map +1 -0
  6. package/build/translations/fi.js +1 -1
  7. package/build/translations/pt-br.js +1 -1
  8. package/ckeditor5-metadata.json +44 -0
  9. package/lang/translations/ar.po +1 -0
  10. package/lang/translations/ast.po +1 -0
  11. package/lang/translations/az.po +1 -0
  12. package/lang/translations/bg.po +1 -0
  13. package/lang/translations/bn.po +1 -0
  14. package/lang/translations/ca.po +1 -0
  15. package/lang/translations/cs.po +1 -0
  16. package/lang/translations/da.po +1 -0
  17. package/lang/translations/de-ch.po +1 -0
  18. package/lang/translations/de.po +1 -0
  19. package/lang/translations/el.po +1 -0
  20. package/lang/translations/en-au.po +1 -0
  21. package/lang/translations/en-gb.po +1 -0
  22. package/lang/translations/en.po +1 -0
  23. package/lang/translations/eo.po +1 -0
  24. package/lang/translations/es.po +1 -0
  25. package/lang/translations/et.po +1 -0
  26. package/lang/translations/eu.po +1 -0
  27. package/lang/translations/fa.po +1 -0
  28. package/lang/translations/fi.po +2 -1
  29. package/lang/translations/fr.po +1 -0
  30. package/lang/translations/gl.po +1 -0
  31. package/lang/translations/he.po +1 -0
  32. package/lang/translations/hi.po +1 -0
  33. package/lang/translations/hr.po +1 -0
  34. package/lang/translations/hu.po +1 -0
  35. package/lang/translations/id.po +1 -0
  36. package/lang/translations/it.po +1 -0
  37. package/lang/translations/ja.po +1 -0
  38. package/lang/translations/jv.po +1 -0
  39. package/lang/translations/km.po +1 -0
  40. package/lang/translations/kn.po +1 -0
  41. package/lang/translations/ko.po +1 -0
  42. package/lang/translations/ku.po +1 -0
  43. package/lang/translations/lt.po +1 -0
  44. package/lang/translations/lv.po +1 -0
  45. package/lang/translations/ms.po +1 -0
  46. package/lang/translations/nb.po +1 -0
  47. package/lang/translations/ne.po +1 -0
  48. package/lang/translations/nl.po +1 -0
  49. package/lang/translations/no.po +1 -0
  50. package/lang/translations/pl.po +1 -0
  51. package/lang/translations/pt-br.po +11 -10
  52. package/lang/translations/pt.po +1 -0
  53. package/lang/translations/ro.po +1 -0
  54. package/lang/translations/ru.po +1 -0
  55. package/lang/translations/si.po +1 -0
  56. package/lang/translations/sk.po +1 -0
  57. package/lang/translations/sq.po +1 -0
  58. package/lang/translations/sr-latn.po +1 -0
  59. package/lang/translations/sr.po +1 -0
  60. package/lang/translations/sv.po +1 -0
  61. package/lang/translations/th.po +1 -0
  62. package/lang/translations/tk.po +1 -0
  63. package/lang/translations/tr.po +1 -0
  64. package/lang/translations/tt.po +1 -0
  65. package/lang/translations/ug.po +1 -0
  66. package/lang/translations/uk.po +1 -0
  67. package/lang/translations/ur.po +1 -0
  68. package/lang/translations/uz.po +1 -0
  69. package/lang/translations/vi.po +1 -0
  70. package/lang/translations/zh-cn.po +1 -0
  71. package/lang/translations/zh.po +1 -0
  72. package/package.json +3 -7
  73. package/src/augmentation.d.ts +52 -50
  74. package/src/augmentation.js +5 -5
  75. package/src/documentlist/adjacentlistssupport.d.ts +15 -15
  76. package/src/documentlist/adjacentlistssupport.js +81 -81
  77. package/src/documentlist/converters.d.ts +65 -63
  78. package/src/documentlist/converters.js +441 -354
  79. package/src/documentlist/documentlistcommand.d.ts +80 -80
  80. package/src/documentlist/documentlistcommand.js +150 -145
  81. package/src/documentlist/documentlistediting.d.ts +212 -154
  82. package/src/documentlist/documentlistediting.js +645 -565
  83. package/src/documentlist/documentlistindentcommand.d.ts +62 -62
  84. package/src/documentlist/documentlistindentcommand.js +129 -129
  85. package/src/documentlist/documentlistmergecommand.d.ts +76 -76
  86. package/src/documentlist/documentlistmergecommand.js +174 -174
  87. package/src/documentlist/documentlistsplitcommand.d.ts +67 -67
  88. package/src/documentlist/documentlistsplitcommand.js +70 -70
  89. package/src/documentlist/documentlistutils.d.ts +46 -46
  90. package/src/documentlist/documentlistutils.js +50 -50
  91. package/src/documentlist/utils/listwalker.d.ts +145 -141
  92. package/src/documentlist/utils/listwalker.js +182 -162
  93. package/src/documentlist/utils/model.d.ts +202 -193
  94. package/src/documentlist/utils/model.js +455 -435
  95. package/src/documentlist/utils/postfixers.d.ts +37 -37
  96. package/src/documentlist/utils/postfixers.js +126 -118
  97. package/src/documentlist/utils/view.d.ts +81 -81
  98. package/src/documentlist/utils/view.js +117 -117
  99. package/src/documentlist.d.ts +26 -26
  100. package/src/documentlist.js +30 -30
  101. package/src/documentlistproperties/converters.d.ts +19 -19
  102. package/src/documentlistproperties/converters.js +43 -43
  103. package/src/documentlistproperties/documentlistpropertiesediting.d.ts +88 -88
  104. package/src/documentlistproperties/documentlistpropertiesediting.js +266 -289
  105. package/src/documentlistproperties/documentlistpropertiesutils.d.ts +33 -33
  106. package/src/documentlistproperties/documentlistpropertiesutils.js +44 -44
  107. package/src/documentlistproperties/documentlistreversedcommand.d.ts +36 -36
  108. package/src/documentlistproperties/documentlistreversedcommand.js +55 -55
  109. package/src/documentlistproperties/documentliststartcommand.d.ts +38 -38
  110. package/src/documentlistproperties/documentliststartcommand.js +57 -57
  111. package/src/documentlistproperties/documentliststylecommand.d.ts +72 -72
  112. package/src/documentlistproperties/documentliststylecommand.js +113 -113
  113. package/src/documentlistproperties/utils/style.d.ts +20 -20
  114. package/src/documentlistproperties/utils/style.js +54 -54
  115. package/src/documentlistproperties.d.ts +27 -27
  116. package/src/documentlistproperties.js +31 -31
  117. package/src/index.d.ts +43 -40
  118. package/src/index.js +29 -27
  119. package/src/list/converters.d.ts +196 -196
  120. package/src/list/converters.js +905 -905
  121. package/src/list/indentcommand.d.ts +37 -37
  122. package/src/list/indentcommand.js +107 -107
  123. package/src/list/listcommand.d.ts +55 -55
  124. package/src/list/listcommand.js +274 -274
  125. package/src/list/listediting.d.ts +32 -32
  126. package/src/list/listediting.js +161 -161
  127. package/src/list/listui.d.ts +19 -19
  128. package/src/list/listui.js +32 -32
  129. package/src/list/listutils.d.ts +41 -41
  130. package/src/list/listutils.js +46 -46
  131. package/src/list/utils.d.ts +112 -112
  132. package/src/list/utils.js +374 -374
  133. package/src/list.d.ts +26 -26
  134. package/src/list.js +30 -30
  135. package/src/listconfig.d.ts +132 -122
  136. package/src/listconfig.js +5 -5
  137. package/src/listproperties/listpropertiesediting.d.ts +72 -72
  138. package/src/listproperties/listpropertiesediting.js +696 -696
  139. package/src/listproperties/listpropertiesui.d.ts +23 -23
  140. package/src/listproperties/listpropertiesui.js +277 -277
  141. package/src/listproperties/listreversedcommand.d.ts +38 -38
  142. package/src/listproperties/listreversedcommand.js +52 -52
  143. package/src/listproperties/liststartcommand.d.ts +37 -37
  144. package/src/listproperties/liststartcommand.js +51 -51
  145. package/src/listproperties/liststylecommand.d.ts +67 -67
  146. package/src/listproperties/liststylecommand.js +99 -99
  147. package/src/listproperties/ui/collapsibleview.d.ts +63 -63
  148. package/src/listproperties/ui/collapsibleview.js +89 -89
  149. package/src/listproperties/ui/listpropertiesview.d.ts +157 -157
  150. package/src/listproperties/ui/listpropertiesview.js +299 -299
  151. package/src/listproperties.d.ts +26 -26
  152. package/src/listproperties.js +30 -30
  153. package/src/liststyle.d.ts +28 -28
  154. package/src/liststyle.js +36 -36
  155. package/src/tododocumentlist/checktododocumentlistcommand.d.ts +49 -0
  156. package/src/tododocumentlist/checktododocumentlistcommand.js +82 -0
  157. package/src/tododocumentlist/todocheckboxchangeobserver.d.ts +41 -0
  158. package/src/tododocumentlist/todocheckboxchangeobserver.js +37 -0
  159. package/src/tododocumentlist/tododocumentlistediting.d.ts +38 -0
  160. package/src/tododocumentlist/tododocumentlistediting.js +399 -0
  161. package/src/tododocumentlist.d.ts +27 -0
  162. package/src/tododocumentlist.js +31 -0
  163. package/src/todolist/checktodolistcommand.d.ts +52 -52
  164. package/src/todolist/checktodolistcommand.js +76 -76
  165. package/src/todolist/todolistconverters.d.ts +82 -82
  166. package/src/todolist/todolistconverters.js +260 -260
  167. package/src/todolist/todolistediting.d.ts +39 -39
  168. package/src/todolist/todolistediting.js +161 -161
  169. package/src/todolist/todolistui.d.ts +19 -19
  170. package/src/todolist/todolistui.js +29 -29
  171. package/src/todolist.d.ts +27 -27
  172. package/src/todolist.js +31 -31
  173. package/theme/todolist.css +101 -70
@@ -1,260 +1,260 @@
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 { createElement } from 'ckeditor5/src/utils';
6
- import { generateLiInUl, injectViewList, positionAfterUiElements, findNestedList } from '../list/utils';
7
- /**
8
- * A model-to-view converter for the `listItem` model element insertion.
9
- *
10
- * It converts the `listItem` model element to an unordered list with a {@link module:engine/view/uielement~UIElement checkbox element}
11
- * at the beginning of each list item. It also merges the list with surrounding lists (if available).
12
- *
13
- * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
14
- *
15
- * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:insert
16
- * @param model Model instance.
17
- * @param onCheckboxChecked Callback function.
18
- * @returns Returns a conversion callback.
19
- */
20
- export function modelViewInsertion(model, onCheckboxChecked) {
21
- return (evt, data, conversionApi) => {
22
- const consumable = conversionApi.consumable;
23
- if (!consumable.test(data.item, 'insert') ||
24
- !consumable.test(data.item, 'attribute:listType') ||
25
- !consumable.test(data.item, 'attribute:listIndent')) {
26
- return;
27
- }
28
- if (data.item.getAttribute('listType') != 'todo') {
29
- return;
30
- }
31
- const modelItem = data.item;
32
- consumable.consume(modelItem, 'insert');
33
- consumable.consume(modelItem, 'attribute:listType');
34
- consumable.consume(modelItem, 'attribute:listIndent');
35
- consumable.consume(modelItem, 'attribute:todoListChecked');
36
- const viewWriter = conversionApi.writer;
37
- const viewItem = generateLiInUl(modelItem, conversionApi);
38
- const isChecked = !!modelItem.getAttribute('todoListChecked');
39
- const checkmarkElement = createCheckmarkElement(modelItem, viewWriter, isChecked, onCheckboxChecked);
40
- const span = viewWriter.createContainerElement('span', {
41
- class: 'todo-list__label__description'
42
- });
43
- viewWriter.addClass('todo-list', viewItem.parent);
44
- viewWriter.insert(viewWriter.createPositionAt(viewItem, 0), checkmarkElement);
45
- viewWriter.insert(viewWriter.createPositionAfter(checkmarkElement), span);
46
- injectViewList(modelItem, viewItem, conversionApi, model);
47
- };
48
- }
49
- /**
50
- * A model-to-view converter for the `listItem` model element insertion.
51
- *
52
- * It is used by {@link module:engine/controller/datacontroller~DataController}.
53
- *
54
- * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:insert
55
- * @param model Model instance.
56
- * @returns Returns a conversion callback.
57
- */
58
- export function dataModelViewInsertion(model) {
59
- return (evt, data, conversionApi) => {
60
- const consumable = conversionApi.consumable;
61
- if (!consumable.test(data.item, 'insert') ||
62
- !consumable.test(data.item, 'attribute:listType') ||
63
- !consumable.test(data.item, 'attribute:listIndent')) {
64
- return;
65
- }
66
- if (data.item.getAttribute('listType') != 'todo') {
67
- return;
68
- }
69
- const modelItem = data.item;
70
- consumable.consume(modelItem, 'insert');
71
- consumable.consume(modelItem, 'attribute:listType');
72
- consumable.consume(modelItem, 'attribute:listIndent');
73
- consumable.consume(modelItem, 'attribute:todoListChecked');
74
- const viewWriter = conversionApi.writer;
75
- const viewItem = generateLiInUl(modelItem, conversionApi);
76
- viewWriter.addClass('todo-list', viewItem.parent);
77
- const label = viewWriter.createContainerElement('label', {
78
- class: 'todo-list__label'
79
- });
80
- const checkbox = viewWriter.createEmptyElement('input', {
81
- type: 'checkbox',
82
- disabled: 'disabled'
83
- });
84
- const span = viewWriter.createContainerElement('span', {
85
- class: 'todo-list__label__description'
86
- });
87
- if (modelItem.getAttribute('todoListChecked')) {
88
- viewWriter.setAttribute('checked', 'checked', checkbox);
89
- }
90
- viewWriter.insert(viewWriter.createPositionAt(viewItem, 0), label);
91
- viewWriter.insert(viewWriter.createPositionAt(label, 0), checkbox);
92
- viewWriter.insert(viewWriter.createPositionAfter(checkbox), span);
93
- injectViewList(modelItem, viewItem, conversionApi, model);
94
- };
95
- }
96
- /**
97
- * A view-to-model converter for the checkbox element inside a view list item.
98
- *
99
- * It changes the `listType` of the model `listItem` to a `todo` value.
100
- * When a view checkbox element is marked as checked, an additional `todoListChecked="true"` attribute is added to the model item.
101
- *
102
- * It is used by {@link module:engine/controller/datacontroller~DataController}.
103
- *
104
- * @see module:engine/conversion/upcastdispatcher~UpcastDispatcher#event:element
105
- */
106
- export const dataViewModelCheckmarkInsertion = (evt, data, conversionApi) => {
107
- const modelCursor = data.modelCursor;
108
- const modelItem = modelCursor.parent;
109
- const viewItem = data.viewItem;
110
- if (viewItem.getAttribute('type') != 'checkbox' || modelItem.name != 'listItem' || !modelCursor.isAtStart) {
111
- return;
112
- }
113
- if (!conversionApi.consumable.consume(viewItem, { name: true })) {
114
- return;
115
- }
116
- const writer = conversionApi.writer;
117
- writer.setAttribute('listType', 'todo', modelItem);
118
- if (data.viewItem.hasAttribute('checked')) {
119
- writer.setAttribute('todoListChecked', true, modelItem);
120
- }
121
- data.modelRange = writer.createRange(modelCursor);
122
- };
123
- /**
124
- * A model-to-view converter for the `listType` attribute change on the `listItem` model element.
125
- *
126
- * This change means that the `<li>` element parent changes to `<ul class="todo-list">` and a
127
- * {@link module:engine/view/uielement~UIElement checkbox UI element} is added at the beginning
128
- * of the list item element (or vice versa).
129
- *
130
- * This converter is preceded by {@link module:list/list/converters~modelViewChangeType} and followed by
131
- * {@link module:list/list/converters~modelViewMergeAfterChangeType} to handle splitting and merging surrounding lists of the same type.
132
- *
133
- * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
134
- *
135
- * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
136
- * @param onCheckedChange Callback fired after clicking the checkbox UI element.
137
- * @param view Editing view controller.
138
- * @returns Returns a conversion callback.
139
- */
140
- export function modelViewChangeType(onCheckedChange, view) {
141
- return (evt, data, conversionApi) => {
142
- if (!conversionApi.consumable.consume(data.item, evt.name)) {
143
- return;
144
- }
145
- const viewItem = conversionApi.mapper.toViewElement(data.item);
146
- const viewWriter = conversionApi.writer;
147
- const labelElement = findLabel(viewItem, view);
148
- if (data.attributeNewValue == 'todo') {
149
- const isChecked = !!data.item.getAttribute('todoListChecked');
150
- const checkmarkElement = createCheckmarkElement(data.item, viewWriter, isChecked, onCheckedChange);
151
- const span = viewWriter.createContainerElement('span', {
152
- class: 'todo-list__label__description'
153
- });
154
- const itemRange = viewWriter.createRangeIn(viewItem);
155
- const nestedList = findNestedList(viewItem);
156
- const descriptionStart = positionAfterUiElements(itemRange.start);
157
- const descriptionEnd = nestedList ? viewWriter.createPositionBefore(nestedList) : itemRange.end;
158
- const descriptionRange = viewWriter.createRange(descriptionStart, descriptionEnd);
159
- viewWriter.addClass('todo-list', viewItem.parent);
160
- viewWriter.move(descriptionRange, viewWriter.createPositionAt(span, 0));
161
- viewWriter.insert(viewWriter.createPositionAt(viewItem, 0), checkmarkElement);
162
- viewWriter.insert(viewWriter.createPositionAfter(checkmarkElement), span);
163
- }
164
- else if (data.attributeOldValue == 'todo') {
165
- const descriptionSpan = findDescription(viewItem, view);
166
- viewWriter.removeClass('todo-list', viewItem.parent);
167
- viewWriter.remove(labelElement);
168
- viewWriter.move(viewWriter.createRangeIn(descriptionSpan), viewWriter.createPositionBefore(descriptionSpan));
169
- viewWriter.remove(descriptionSpan);
170
- }
171
- };
172
- }
173
- /**
174
- * A model-to-view converter for the `todoListChecked` attribute change on the `listItem` model element.
175
- *
176
- * It marks the {@link module:engine/view/uielement~UIElement checkbox UI element} as checked.
177
- *
178
- * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
179
- *
180
- * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
181
- * @param onCheckedChange Callback fired after clicking the checkbox UI element.
182
- * @returns Returns a conversion callback.
183
- */
184
- export function modelViewChangeChecked(onCheckedChange) {
185
- return (evt, data, conversionApi) => {
186
- // Do not convert `todoListChecked` attribute when to-do list item has changed to other list item.
187
- // This attribute will be removed by the model post fixer.
188
- if (data.item.getAttribute('listType') != 'todo') {
189
- return;
190
- }
191
- if (!conversionApi.consumable.consume(data.item, 'attribute:todoListChecked')) {
192
- return;
193
- }
194
- const { mapper, writer: viewWriter } = conversionApi;
195
- const isChecked = !!data.item.getAttribute('todoListChecked');
196
- const viewItem = mapper.toViewElement(data.item);
197
- // Because of m -> v position mapper we can be sure checkbox is always at the beginning.
198
- const oldCheckmarkElement = viewItem.getChild(0);
199
- const newCheckmarkElement = createCheckmarkElement(data.item, viewWriter, isChecked, onCheckedChange);
200
- viewWriter.insert(viewWriter.createPositionAfter(oldCheckmarkElement), newCheckmarkElement);
201
- viewWriter.remove(oldCheckmarkElement);
202
- };
203
- }
204
- /**
205
- * A model-to-view position at zero offset mapper.
206
- *
207
- * This helper ensures that position inside todo-list in the view is mapped after the checkbox.
208
- *
209
- * It only handles the position at the beginning of a list item as other positions are properly mapped be the default mapper.
210
- */
211
- export function mapModelToViewPosition(view) {
212
- return (evt, data) => {
213
- const modelPosition = data.modelPosition;
214
- const parent = modelPosition.parent;
215
- if (!parent.is('element', 'listItem') || parent.getAttribute('listType') != 'todo') {
216
- return;
217
- }
218
- const viewLi = data.mapper.toViewElement(parent);
219
- const descSpan = findDescription(viewLi, view);
220
- if (descSpan) {
221
- data.viewPosition = data.mapper.findPositionIn(descSpan, modelPosition.offset);
222
- }
223
- };
224
- }
225
- /**
226
- * Creates a checkbox UI element.
227
- */
228
- function createCheckmarkElement(modelItem, viewWriter, isChecked, onChange) {
229
- const uiElement = viewWriter.createUIElement('label', {
230
- class: 'todo-list__label',
231
- contenteditable: false
232
- }, function (domDocument) {
233
- const checkbox = createElement(document, 'input', { type: 'checkbox', tabindex: '-1' });
234
- if (isChecked) {
235
- checkbox.setAttribute('checked', 'checked');
236
- }
237
- checkbox.addEventListener('change', () => onChange(modelItem));
238
- const domElement = this.toDomElement(domDocument);
239
- domElement.appendChild(checkbox);
240
- return domElement;
241
- });
242
- return uiElement;
243
- }
244
- // Helper method to find label element inside li.
245
- function findLabel(viewItem, view) {
246
- const range = view.createRangeIn(viewItem);
247
- for (const value of range) {
248
- if (value.item.is('uiElement', 'label')) {
249
- return value.item;
250
- }
251
- }
252
- }
253
- function findDescription(viewItem, view) {
254
- const range = view.createRangeIn(viewItem);
255
- for (const value of range) {
256
- if (value.item.is('containerElement', 'span') && value.item.hasClass('todo-list__label__description')) {
257
- return value.item;
258
- }
259
- }
260
- }
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 { createElement } from 'ckeditor5/src/utils';
6
+ import { generateLiInUl, injectViewList, positionAfterUiElements, findNestedList } from '../list/utils';
7
+ /**
8
+ * A model-to-view converter for the `listItem` model element insertion.
9
+ *
10
+ * It converts the `listItem` model element to an unordered list with a {@link module:engine/view/uielement~UIElement checkbox element}
11
+ * at the beginning of each list item. It also merges the list with surrounding lists (if available).
12
+ *
13
+ * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
14
+ *
15
+ * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:insert
16
+ * @param model Model instance.
17
+ * @param onCheckboxChecked Callback function.
18
+ * @returns Returns a conversion callback.
19
+ */
20
+ export function modelViewInsertion(model, onCheckboxChecked) {
21
+ return (evt, data, conversionApi) => {
22
+ const consumable = conversionApi.consumable;
23
+ if (!consumable.test(data.item, 'insert') ||
24
+ !consumable.test(data.item, 'attribute:listType') ||
25
+ !consumable.test(data.item, 'attribute:listIndent')) {
26
+ return;
27
+ }
28
+ if (data.item.getAttribute('listType') != 'todo') {
29
+ return;
30
+ }
31
+ const modelItem = data.item;
32
+ consumable.consume(modelItem, 'insert');
33
+ consumable.consume(modelItem, 'attribute:listType');
34
+ consumable.consume(modelItem, 'attribute:listIndent');
35
+ consumable.consume(modelItem, 'attribute:todoListChecked');
36
+ const viewWriter = conversionApi.writer;
37
+ const viewItem = generateLiInUl(modelItem, conversionApi);
38
+ const isChecked = !!modelItem.getAttribute('todoListChecked');
39
+ const checkmarkElement = createCheckmarkElement(modelItem, viewWriter, isChecked, onCheckboxChecked);
40
+ const span = viewWriter.createContainerElement('span', {
41
+ class: 'todo-list__label__description'
42
+ });
43
+ viewWriter.addClass('todo-list', viewItem.parent);
44
+ viewWriter.insert(viewWriter.createPositionAt(viewItem, 0), checkmarkElement);
45
+ viewWriter.insert(viewWriter.createPositionAfter(checkmarkElement), span);
46
+ injectViewList(modelItem, viewItem, conversionApi, model);
47
+ };
48
+ }
49
+ /**
50
+ * A model-to-view converter for the `listItem` model element insertion.
51
+ *
52
+ * It is used by {@link module:engine/controller/datacontroller~DataController}.
53
+ *
54
+ * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:insert
55
+ * @param model Model instance.
56
+ * @returns Returns a conversion callback.
57
+ */
58
+ export function dataModelViewInsertion(model) {
59
+ return (evt, data, conversionApi) => {
60
+ const consumable = conversionApi.consumable;
61
+ if (!consumable.test(data.item, 'insert') ||
62
+ !consumable.test(data.item, 'attribute:listType') ||
63
+ !consumable.test(data.item, 'attribute:listIndent')) {
64
+ return;
65
+ }
66
+ if (data.item.getAttribute('listType') != 'todo') {
67
+ return;
68
+ }
69
+ const modelItem = data.item;
70
+ consumable.consume(modelItem, 'insert');
71
+ consumable.consume(modelItem, 'attribute:listType');
72
+ consumable.consume(modelItem, 'attribute:listIndent');
73
+ consumable.consume(modelItem, 'attribute:todoListChecked');
74
+ const viewWriter = conversionApi.writer;
75
+ const viewItem = generateLiInUl(modelItem, conversionApi);
76
+ viewWriter.addClass('todo-list', viewItem.parent);
77
+ const label = viewWriter.createContainerElement('label', {
78
+ class: 'todo-list__label'
79
+ });
80
+ const checkbox = viewWriter.createEmptyElement('input', {
81
+ type: 'checkbox',
82
+ disabled: 'disabled'
83
+ });
84
+ const span = viewWriter.createContainerElement('span', {
85
+ class: 'todo-list__label__description'
86
+ });
87
+ if (modelItem.getAttribute('todoListChecked')) {
88
+ viewWriter.setAttribute('checked', 'checked', checkbox);
89
+ }
90
+ viewWriter.insert(viewWriter.createPositionAt(viewItem, 0), label);
91
+ viewWriter.insert(viewWriter.createPositionAt(label, 0), checkbox);
92
+ viewWriter.insert(viewWriter.createPositionAfter(checkbox), span);
93
+ injectViewList(modelItem, viewItem, conversionApi, model);
94
+ };
95
+ }
96
+ /**
97
+ * A view-to-model converter for the checkbox element inside a view list item.
98
+ *
99
+ * It changes the `listType` of the model `listItem` to a `todo` value.
100
+ * When a view checkbox element is marked as checked, an additional `todoListChecked="true"` attribute is added to the model item.
101
+ *
102
+ * It is used by {@link module:engine/controller/datacontroller~DataController}.
103
+ *
104
+ * @see module:engine/conversion/upcastdispatcher~UpcastDispatcher#event:element
105
+ */
106
+ export const dataViewModelCheckmarkInsertion = (evt, data, conversionApi) => {
107
+ const modelCursor = data.modelCursor;
108
+ const modelItem = modelCursor.parent;
109
+ const viewItem = data.viewItem;
110
+ if (viewItem.getAttribute('type') != 'checkbox' || modelItem.name != 'listItem' || !modelCursor.isAtStart) {
111
+ return;
112
+ }
113
+ if (!conversionApi.consumable.consume(viewItem, { name: true })) {
114
+ return;
115
+ }
116
+ const writer = conversionApi.writer;
117
+ writer.setAttribute('listType', 'todo', modelItem);
118
+ if (data.viewItem.hasAttribute('checked')) {
119
+ writer.setAttribute('todoListChecked', true, modelItem);
120
+ }
121
+ data.modelRange = writer.createRange(modelCursor);
122
+ };
123
+ /**
124
+ * A model-to-view converter for the `listType` attribute change on the `listItem` model element.
125
+ *
126
+ * This change means that the `<li>` element parent changes to `<ul class="todo-list">` and a
127
+ * {@link module:engine/view/uielement~UIElement checkbox UI element} is added at the beginning
128
+ * of the list item element (or vice versa).
129
+ *
130
+ * This converter is preceded by {@link module:list/list/converters~modelViewChangeType} and followed by
131
+ * {@link module:list/list/converters~modelViewMergeAfterChangeType} to handle splitting and merging surrounding lists of the same type.
132
+ *
133
+ * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
134
+ *
135
+ * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
136
+ * @param onCheckedChange Callback fired after clicking the checkbox UI element.
137
+ * @param view Editing view controller.
138
+ * @returns Returns a conversion callback.
139
+ */
140
+ export function modelViewChangeType(onCheckedChange, view) {
141
+ return (evt, data, conversionApi) => {
142
+ if (!conversionApi.consumable.consume(data.item, evt.name)) {
143
+ return;
144
+ }
145
+ const viewItem = conversionApi.mapper.toViewElement(data.item);
146
+ const viewWriter = conversionApi.writer;
147
+ const labelElement = findLabel(viewItem, view);
148
+ if (data.attributeNewValue == 'todo') {
149
+ const isChecked = !!data.item.getAttribute('todoListChecked');
150
+ const checkmarkElement = createCheckmarkElement(data.item, viewWriter, isChecked, onCheckedChange);
151
+ const span = viewWriter.createContainerElement('span', {
152
+ class: 'todo-list__label__description'
153
+ });
154
+ const itemRange = viewWriter.createRangeIn(viewItem);
155
+ const nestedList = findNestedList(viewItem);
156
+ const descriptionStart = positionAfterUiElements(itemRange.start);
157
+ const descriptionEnd = nestedList ? viewWriter.createPositionBefore(nestedList) : itemRange.end;
158
+ const descriptionRange = viewWriter.createRange(descriptionStart, descriptionEnd);
159
+ viewWriter.addClass('todo-list', viewItem.parent);
160
+ viewWriter.move(descriptionRange, viewWriter.createPositionAt(span, 0));
161
+ viewWriter.insert(viewWriter.createPositionAt(viewItem, 0), checkmarkElement);
162
+ viewWriter.insert(viewWriter.createPositionAfter(checkmarkElement), span);
163
+ }
164
+ else if (data.attributeOldValue == 'todo') {
165
+ const descriptionSpan = findDescription(viewItem, view);
166
+ viewWriter.removeClass('todo-list', viewItem.parent);
167
+ viewWriter.remove(labelElement);
168
+ viewWriter.move(viewWriter.createRangeIn(descriptionSpan), viewWriter.createPositionBefore(descriptionSpan));
169
+ viewWriter.remove(descriptionSpan);
170
+ }
171
+ };
172
+ }
173
+ /**
174
+ * A model-to-view converter for the `todoListChecked` attribute change on the `listItem` model element.
175
+ *
176
+ * It marks the {@link module:engine/view/uielement~UIElement checkbox UI element} as checked.
177
+ *
178
+ * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
179
+ *
180
+ * @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
181
+ * @param onCheckedChange Callback fired after clicking the checkbox UI element.
182
+ * @returns Returns a conversion callback.
183
+ */
184
+ export function modelViewChangeChecked(onCheckedChange) {
185
+ return (evt, data, conversionApi) => {
186
+ // Do not convert `todoListChecked` attribute when to-do list item has changed to other list item.
187
+ // This attribute will be removed by the model post fixer.
188
+ if (data.item.getAttribute('listType') != 'todo') {
189
+ return;
190
+ }
191
+ if (!conversionApi.consumable.consume(data.item, 'attribute:todoListChecked')) {
192
+ return;
193
+ }
194
+ const { mapper, writer: viewWriter } = conversionApi;
195
+ const isChecked = !!data.item.getAttribute('todoListChecked');
196
+ const viewItem = mapper.toViewElement(data.item);
197
+ // Because of m -> v position mapper we can be sure checkbox is always at the beginning.
198
+ const oldCheckmarkElement = viewItem.getChild(0);
199
+ const newCheckmarkElement = createCheckmarkElement(data.item, viewWriter, isChecked, onCheckedChange);
200
+ viewWriter.insert(viewWriter.createPositionAfter(oldCheckmarkElement), newCheckmarkElement);
201
+ viewWriter.remove(oldCheckmarkElement);
202
+ };
203
+ }
204
+ /**
205
+ * A model-to-view position at zero offset mapper.
206
+ *
207
+ * This helper ensures that position inside todo-list in the view is mapped after the checkbox.
208
+ *
209
+ * It only handles the position at the beginning of a list item as other positions are properly mapped be the default mapper.
210
+ */
211
+ export function mapModelToViewPosition(view) {
212
+ return (evt, data) => {
213
+ const modelPosition = data.modelPosition;
214
+ const parent = modelPosition.parent;
215
+ if (!parent.is('element', 'listItem') || parent.getAttribute('listType') != 'todo') {
216
+ return;
217
+ }
218
+ const viewLi = data.mapper.toViewElement(parent);
219
+ const descSpan = findDescription(viewLi, view);
220
+ if (descSpan) {
221
+ data.viewPosition = data.mapper.findPositionIn(descSpan, modelPosition.offset);
222
+ }
223
+ };
224
+ }
225
+ /**
226
+ * Creates a checkbox UI element.
227
+ */
228
+ function createCheckmarkElement(modelItem, viewWriter, isChecked, onChange) {
229
+ const uiElement = viewWriter.createUIElement('label', {
230
+ class: 'todo-list__label',
231
+ contenteditable: false
232
+ }, function (domDocument) {
233
+ const checkbox = createElement(document, 'input', { type: 'checkbox', tabindex: '-1' });
234
+ if (isChecked) {
235
+ checkbox.setAttribute('checked', 'checked');
236
+ }
237
+ checkbox.addEventListener('change', () => onChange(modelItem));
238
+ const domElement = this.toDomElement(domDocument);
239
+ domElement.appendChild(checkbox);
240
+ return domElement;
241
+ });
242
+ return uiElement;
243
+ }
244
+ // Helper method to find label element inside li.
245
+ function findLabel(viewItem, view) {
246
+ const range = view.createRangeIn(viewItem);
247
+ for (const value of range) {
248
+ if (value.item.is('uiElement', 'label')) {
249
+ return value.item;
250
+ }
251
+ }
252
+ }
253
+ function findDescription(viewItem, view) {
254
+ const range = view.createRangeIn(viewItem);
255
+ for (const value of range) {
256
+ if (value.item.is('containerElement', 'span') && value.item.hasClass('todo-list__label__description')) {
257
+ return value.item;
258
+ }
259
+ }
260
+ }
@@ -1,39 +1,39 @@
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 { Plugin } from 'ckeditor5/src/core';
6
- import ListEditing from '../list/listediting';
7
- /**
8
- * The engine of the to-do list feature. It handles creating, editing and removing to-do lists and their items.
9
- *
10
- * It registers the entire functionality of the {@link module:list/list/listediting~ListEditing list editing plugin} and extends
11
- * it with the commands:
12
- *
13
- * - `'todoList'`,
14
- * - `'checkTodoList'`,
15
- * - `'todoListCheck'` as an alias for `checkTodoList` command.
16
- */
17
- export default class TodoListEditing extends Plugin {
18
- /**
19
- * @inheritDoc
20
- */
21
- static get pluginName(): "TodoListEditing";
22
- /**
23
- * @inheritDoc
24
- */
25
- static get requires(): readonly [typeof ListEditing];
26
- /**
27
- * @inheritDoc
28
- */
29
- init(): void;
30
- /**
31
- * Handles the checkbox element change, moves the selection to the corresponding model item to make it possible
32
- * to toggle the `todoListChecked` attribute using the command, and restores the selection position.
33
- *
34
- * Some say it's a hack :) Moving the selection only for executing the command on a certain node and restoring it after,
35
- * is not a clear solution. We need to design an API for using commands beyond the selection range.
36
- * See https://github.com/ckeditor/ckeditor5/issues/1954.
37
- */
38
- private _handleCheckmarkChange;
39
- }
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 { Plugin } from 'ckeditor5/src/core';
6
+ import ListEditing from '../list/listediting';
7
+ /**
8
+ * The engine of the to-do list feature. It handles creating, editing and removing to-do lists and their items.
9
+ *
10
+ * It registers the entire functionality of the {@link module:list/list/listediting~ListEditing list editing plugin} and extends
11
+ * it with the commands:
12
+ *
13
+ * - `'todoList'`,
14
+ * - `'checkTodoList'`,
15
+ * - `'todoListCheck'` as an alias for `checkTodoList` command.
16
+ */
17
+ export default class TodoListEditing extends Plugin {
18
+ /**
19
+ * @inheritDoc
20
+ */
21
+ static get pluginName(): "TodoListEditing";
22
+ /**
23
+ * @inheritDoc
24
+ */
25
+ static get requires(): readonly [typeof ListEditing];
26
+ /**
27
+ * @inheritDoc
28
+ */
29
+ init(): void;
30
+ /**
31
+ * Handles the checkbox element change, moves the selection to the corresponding model item to make it possible
32
+ * to toggle the `todoListChecked` attribute using the command, and restores the selection position.
33
+ *
34
+ * Some say it's a hack :) Moving the selection only for executing the command on a certain node and restoring it after,
35
+ * is not a clear solution. We need to design an API for using commands beyond the selection range.
36
+ * See https://github.com/ckeditor/ckeditor5/issues/1954.
37
+ */
38
+ private _handleCheckmarkChange;
39
+ }