@ckeditor/ckeditor5-list 40.0.0 → 40.2.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 (108) hide show
  1. package/CHANGELOG.md +25 -25
  2. package/LICENSE.md +2 -2
  3. package/build/list.js +1 -1
  4. package/build/translations/ug.js +1 -1
  5. package/lang/translations/ug.po +3 -3
  6. package/package.json +2 -3
  7. package/src/augmentation.d.ts +52 -52
  8. package/src/augmentation.js +5 -5
  9. package/src/documentlist/adjacentlistssupport.d.ts +15 -15
  10. package/src/documentlist/adjacentlistssupport.js +81 -81
  11. package/src/documentlist/converters.d.ts +65 -65
  12. package/src/documentlist/converters.js +441 -441
  13. package/src/documentlist/documentlistcommand.d.ts +80 -80
  14. package/src/documentlist/documentlistcommand.js +150 -150
  15. package/src/documentlist/documentlistediting.d.ts +212 -212
  16. package/src/documentlist/documentlistediting.js +646 -645
  17. package/src/documentlist/documentlistindentcommand.d.ts +62 -62
  18. package/src/documentlist/documentlistindentcommand.js +129 -129
  19. package/src/documentlist/documentlistmergecommand.d.ts +76 -76
  20. package/src/documentlist/documentlistmergecommand.js +174 -174
  21. package/src/documentlist/documentlistsplitcommand.d.ts +67 -67
  22. package/src/documentlist/documentlistsplitcommand.js +70 -70
  23. package/src/documentlist/documentlistutils.d.ts +46 -46
  24. package/src/documentlist/documentlistutils.js +50 -50
  25. package/src/documentlist/utils/listwalker.d.ts +145 -145
  26. package/src/documentlist/utils/listwalker.js +182 -182
  27. package/src/documentlist/utils/model.d.ts +202 -202
  28. package/src/documentlist/utils/model.js +455 -455
  29. package/src/documentlist/utils/postfixers.d.ts +37 -37
  30. package/src/documentlist/utils/postfixers.js +126 -126
  31. package/src/documentlist/utils/view.d.ts +81 -81
  32. package/src/documentlist/utils/view.js +117 -117
  33. package/src/documentlist.d.ts +26 -26
  34. package/src/documentlist.js +30 -30
  35. package/src/documentlistproperties/converters.d.ts +19 -19
  36. package/src/documentlistproperties/converters.js +43 -43
  37. package/src/documentlistproperties/documentlistpropertiesediting.d.ts +88 -88
  38. package/src/documentlistproperties/documentlistpropertiesediting.js +266 -266
  39. package/src/documentlistproperties/documentlistpropertiesutils.d.ts +33 -33
  40. package/src/documentlistproperties/documentlistpropertiesutils.js +44 -44
  41. package/src/documentlistproperties/documentlistreversedcommand.d.ts +36 -36
  42. package/src/documentlistproperties/documentlistreversedcommand.js +55 -55
  43. package/src/documentlistproperties/documentliststartcommand.d.ts +38 -38
  44. package/src/documentlistproperties/documentliststartcommand.js +57 -57
  45. package/src/documentlistproperties/documentliststylecommand.d.ts +72 -72
  46. package/src/documentlistproperties/documentliststylecommand.js +113 -113
  47. package/src/documentlistproperties/utils/style.d.ts +20 -20
  48. package/src/documentlistproperties/utils/style.js +54 -54
  49. package/src/documentlistproperties.d.ts +27 -27
  50. package/src/documentlistproperties.js +31 -31
  51. package/src/index.d.ts +43 -43
  52. package/src/index.js +29 -29
  53. package/src/list/converters.d.ts +196 -196
  54. package/src/list/converters.js +905 -905
  55. package/src/list/indentcommand.d.ts +37 -37
  56. package/src/list/indentcommand.js +107 -107
  57. package/src/list/listcommand.d.ts +55 -55
  58. package/src/list/listcommand.js +274 -274
  59. package/src/list/listediting.d.ts +32 -32
  60. package/src/list/listediting.js +161 -161
  61. package/src/list/listui.d.ts +19 -19
  62. package/src/list/listui.js +32 -32
  63. package/src/list/listutils.d.ts +41 -41
  64. package/src/list/listutils.js +46 -46
  65. package/src/list/utils.d.ts +112 -112
  66. package/src/list/utils.js +374 -374
  67. package/src/list.d.ts +26 -26
  68. package/src/list.js +30 -30
  69. package/src/listconfig.d.ts +132 -132
  70. package/src/listconfig.js +5 -5
  71. package/src/listproperties/listpropertiesediting.d.ts +72 -72
  72. package/src/listproperties/listpropertiesediting.js +696 -696
  73. package/src/listproperties/listpropertiesui.d.ts +23 -23
  74. package/src/listproperties/listpropertiesui.js +277 -277
  75. package/src/listproperties/listreversedcommand.d.ts +38 -38
  76. package/src/listproperties/listreversedcommand.js +52 -52
  77. package/src/listproperties/liststartcommand.d.ts +37 -37
  78. package/src/listproperties/liststartcommand.js +51 -51
  79. package/src/listproperties/liststylecommand.d.ts +67 -67
  80. package/src/listproperties/liststylecommand.js +99 -99
  81. package/src/listproperties/ui/listpropertiesview.d.ts +156 -157
  82. package/src/listproperties/ui/listpropertiesview.js +298 -299
  83. package/src/listproperties.d.ts +26 -26
  84. package/src/listproperties.js +30 -30
  85. package/src/liststyle.d.ts +28 -28
  86. package/src/liststyle.js +36 -36
  87. package/src/tododocumentlist/checktododocumentlistcommand.d.ts +49 -49
  88. package/src/tododocumentlist/checktododocumentlistcommand.js +82 -82
  89. package/src/tododocumentlist/todocheckboxchangeobserver.d.ts +41 -41
  90. package/src/tododocumentlist/todocheckboxchangeobserver.js +37 -37
  91. package/src/tododocumentlist/tododocumentlistediting.d.ts +38 -38
  92. package/src/tododocumentlist/tododocumentlistediting.js +399 -399
  93. package/src/tododocumentlist.d.ts +27 -27
  94. package/src/tododocumentlist.js +31 -31
  95. package/src/todolist/checktodolistcommand.d.ts +52 -52
  96. package/src/todolist/checktodolistcommand.js +76 -76
  97. package/src/todolist/todolistconverters.d.ts +82 -82
  98. package/src/todolist/todolistconverters.js +260 -260
  99. package/src/todolist/todolistediting.d.ts +39 -39
  100. package/src/todolist/todolistediting.js +161 -161
  101. package/src/todolist/todolistui.d.ts +19 -19
  102. package/src/todolist/todolistui.js +29 -29
  103. package/src/todolist.d.ts +27 -27
  104. package/src/todolist.js +31 -31
  105. package/build/list.js.map +0 -1
  106. package/src/listproperties/ui/collapsibleview.d.ts +0 -63
  107. package/src/listproperties/ui/collapsibleview.js +0 -89
  108. package/theme/collapsible.css +0 -10
@@ -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
+ }