@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.
- package/CHANGELOG.md +25 -25
- package/LICENSE.md +2 -2
- package/build/list.js +1 -1
- package/build/translations/ug.js +1 -1
- package/lang/translations/ug.po +3 -3
- package/package.json +2 -3
- package/src/augmentation.d.ts +52 -52
- package/src/augmentation.js +5 -5
- package/src/documentlist/adjacentlistssupport.d.ts +15 -15
- package/src/documentlist/adjacentlistssupport.js +81 -81
- package/src/documentlist/converters.d.ts +65 -65
- package/src/documentlist/converters.js +441 -441
- package/src/documentlist/documentlistcommand.d.ts +80 -80
- package/src/documentlist/documentlistcommand.js +150 -150
- package/src/documentlist/documentlistediting.d.ts +212 -212
- package/src/documentlist/documentlistediting.js +646 -645
- package/src/documentlist/documentlistindentcommand.d.ts +62 -62
- package/src/documentlist/documentlistindentcommand.js +129 -129
- package/src/documentlist/documentlistmergecommand.d.ts +76 -76
- package/src/documentlist/documentlistmergecommand.js +174 -174
- package/src/documentlist/documentlistsplitcommand.d.ts +67 -67
- package/src/documentlist/documentlistsplitcommand.js +70 -70
- package/src/documentlist/documentlistutils.d.ts +46 -46
- package/src/documentlist/documentlistutils.js +50 -50
- package/src/documentlist/utils/listwalker.d.ts +145 -145
- package/src/documentlist/utils/listwalker.js +182 -182
- package/src/documentlist/utils/model.d.ts +202 -202
- package/src/documentlist/utils/model.js +455 -455
- package/src/documentlist/utils/postfixers.d.ts +37 -37
- package/src/documentlist/utils/postfixers.js +126 -126
- package/src/documentlist/utils/view.d.ts +81 -81
- package/src/documentlist/utils/view.js +117 -117
- package/src/documentlist.d.ts +26 -26
- package/src/documentlist.js +30 -30
- package/src/documentlistproperties/converters.d.ts +19 -19
- package/src/documentlistproperties/converters.js +43 -43
- package/src/documentlistproperties/documentlistpropertiesediting.d.ts +88 -88
- package/src/documentlistproperties/documentlistpropertiesediting.js +266 -266
- package/src/documentlistproperties/documentlistpropertiesutils.d.ts +33 -33
- package/src/documentlistproperties/documentlistpropertiesutils.js +44 -44
- package/src/documentlistproperties/documentlistreversedcommand.d.ts +36 -36
- package/src/documentlistproperties/documentlistreversedcommand.js +55 -55
- package/src/documentlistproperties/documentliststartcommand.d.ts +38 -38
- package/src/documentlistproperties/documentliststartcommand.js +57 -57
- package/src/documentlistproperties/documentliststylecommand.d.ts +72 -72
- package/src/documentlistproperties/documentliststylecommand.js +113 -113
- package/src/documentlistproperties/utils/style.d.ts +20 -20
- package/src/documentlistproperties/utils/style.js +54 -54
- package/src/documentlistproperties.d.ts +27 -27
- package/src/documentlistproperties.js +31 -31
- package/src/index.d.ts +43 -43
- package/src/index.js +29 -29
- package/src/list/converters.d.ts +196 -196
- package/src/list/converters.js +905 -905
- package/src/list/indentcommand.d.ts +37 -37
- package/src/list/indentcommand.js +107 -107
- package/src/list/listcommand.d.ts +55 -55
- package/src/list/listcommand.js +274 -274
- package/src/list/listediting.d.ts +32 -32
- package/src/list/listediting.js +161 -161
- package/src/list/listui.d.ts +19 -19
- package/src/list/listui.js +32 -32
- package/src/list/listutils.d.ts +41 -41
- package/src/list/listutils.js +46 -46
- package/src/list/utils.d.ts +112 -112
- package/src/list/utils.js +374 -374
- package/src/list.d.ts +26 -26
- package/src/list.js +30 -30
- package/src/listconfig.d.ts +132 -132
- package/src/listconfig.js +5 -5
- package/src/listproperties/listpropertiesediting.d.ts +72 -72
- package/src/listproperties/listpropertiesediting.js +696 -696
- package/src/listproperties/listpropertiesui.d.ts +23 -23
- package/src/listproperties/listpropertiesui.js +277 -277
- package/src/listproperties/listreversedcommand.d.ts +38 -38
- package/src/listproperties/listreversedcommand.js +52 -52
- package/src/listproperties/liststartcommand.d.ts +37 -37
- package/src/listproperties/liststartcommand.js +51 -51
- package/src/listproperties/liststylecommand.d.ts +67 -67
- package/src/listproperties/liststylecommand.js +99 -99
- package/src/listproperties/ui/listpropertiesview.d.ts +156 -157
- package/src/listproperties/ui/listpropertiesview.js +298 -299
- package/src/listproperties.d.ts +26 -26
- package/src/listproperties.js +30 -30
- package/src/liststyle.d.ts +28 -28
- package/src/liststyle.js +36 -36
- package/src/tododocumentlist/checktododocumentlistcommand.d.ts +49 -49
- package/src/tododocumentlist/checktododocumentlistcommand.js +82 -82
- package/src/tododocumentlist/todocheckboxchangeobserver.d.ts +41 -41
- package/src/tododocumentlist/todocheckboxchangeobserver.js +37 -37
- package/src/tododocumentlist/tododocumentlistediting.d.ts +38 -38
- package/src/tododocumentlist/tododocumentlistediting.js +399 -399
- package/src/tododocumentlist.d.ts +27 -27
- package/src/tododocumentlist.js +31 -31
- package/src/todolist/checktodolistcommand.d.ts +52 -52
- package/src/todolist/checktodolistcommand.js +76 -76
- package/src/todolist/todolistconverters.d.ts +82 -82
- package/src/todolist/todolistconverters.js +260 -260
- package/src/todolist/todolistediting.d.ts +39 -39
- package/src/todolist/todolistediting.js +161 -161
- package/src/todolist/todolistui.d.ts +19 -19
- package/src/todolist/todolistui.js +29 -29
- package/src/todolist.d.ts +27 -27
- package/src/todolist.js +31 -31
- package/build/list.js.map +0 -1
- package/src/listproperties/ui/collapsibleview.d.ts +0 -63
- package/src/listproperties/ui/collapsibleview.js +0 -89
- 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
|
+
}
|