/
utils.js
457 lines (389 loc) · 16.3 KB
/
utils.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
/**
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module list/list/utils
*/
import { TreeWalker, getFillerOffset } from 'ckeditor5/src/engine';
import { ButtonView } from 'ckeditor5/src/ui';
/**
* Creates a list item {@link module:engine/view/containerelement~ContainerElement}.
*
* @param {module:engine/view/downcastwriter~DowncastWriter} writer The writer instance.
* @returns {module:engine/view/containerelement~ContainerElement}
*/
export function createViewListItemElement( writer ) {
const viewItem = writer.createContainerElement( 'li' );
viewItem.getFillerOffset = getListItemFillerOffset;
return viewItem;
}
/**
* Helper function that creates a `<ul><li></li></ul>` or (`<ol>`) structure out of the given `modelItem` model `listItem` element.
* Then, it binds the created view list item (`<li>`) with the model `listItem` element.
* The function then returns the created view list item (`<li>`).
*
* @param {module:engine/model/item~Item} modelItem Model list item.
* @param {module:engine/conversion/upcastdispatcher~UpcastConversionApi} conversionApi Conversion interface.
* @returns {module:engine/view/containerelement~ContainerElement} View list element.
*/
export function generateLiInUl( modelItem, conversionApi ) {
const mapper = conversionApi.mapper;
const viewWriter = conversionApi.writer;
const listType = modelItem.getAttribute( 'listType' ) == 'numbered' ? 'ol' : 'ul';
const viewItem = createViewListItemElement( viewWriter );
const viewList = viewWriter.createContainerElement( listType, null );
viewWriter.insert( viewWriter.createPositionAt( viewList, 0 ), viewItem );
mapper.bindElements( modelItem, viewItem );
return viewItem;
}
/**
* Helper function that inserts a view list at a correct place and merges it with its siblings.
* It takes a model list item element (`modelItem`) and a corresponding view list item element (`injectedItem`). The view list item
* should be in a view list element (`<ul>` or `<ol>`) and should be its only child.
* See comments below to better understand the algorithm.
*
* @param {module:engine/view/item~Item} modelItem Model list item.
* @param {module:engine/view/containerelement~ContainerElement} injectedItem
* @param {module:engine/conversion/upcastdispatcher~UpcastConversionApi} conversionApi Conversion interface.
* @param {module:engine/model/model~Model} model The model instance.
*/
export function injectViewList( modelItem, injectedItem, conversionApi, model ) {
const injectedList = injectedItem.parent;
const mapper = conversionApi.mapper;
const viewWriter = conversionApi.writer;
// The position where the view list will be inserted.
let insertPosition = mapper.toViewPosition( model.createPositionBefore( modelItem ) );
// 1. Find the previous list item that has the same or smaller indent. Basically we are looking for the first model item
// that is a "parent" or "sibling" of the injected model item.
// If there is no such list item, it means that the injected list item is the first item in "its list".
const refItem = getSiblingListItem( modelItem.previousSibling, {
sameIndent: true,
smallerIndent: true,
listIndent: modelItem.getAttribute( 'listIndent' )
} );
const prevItem = modelItem.previousSibling;
if ( refItem && refItem.getAttribute( 'listIndent' ) == modelItem.getAttribute( 'listIndent' ) ) {
// There is a list item with the same indent - we found the same-level sibling.
// Break the list after it. The inserted view item will be added in the broken space.
const viewItem = mapper.toViewElement( refItem );
insertPosition = viewWriter.breakContainer( viewWriter.createPositionAfter( viewItem ) );
} else {
// There is no list item with the same indent. Check the previous model item.
if ( prevItem && prevItem.name == 'listItem' ) {
// If it is a list item, it has to have a lower indent.
// It means that the inserted item should be added to it as its nested item.
insertPosition = mapper.toViewPosition( model.createPositionAt( prevItem, 'end' ) );
// There could be some not mapped elements (eg. span in to-do list) but we need to insert
// a nested list directly inside the li element.
const mappedViewAncestor = mapper.findMappedViewAncestor( insertPosition );
const nestedList = findNestedList( mappedViewAncestor );
// If there already is some nested list, then use it's position.
if ( nestedList ) {
insertPosition = viewWriter.createPositionBefore( nestedList );
} else {
// Else just put new list on the end of list item content.
insertPosition = viewWriter.createPositionAt( mappedViewAncestor, 'end' );
}
} else {
// The previous item is not a list item (or does not exist at all).
// Just map the position and insert the view item at the mapped position.
insertPosition = mapper.toViewPosition( model.createPositionBefore( modelItem ) );
}
}
insertPosition = positionAfterUiElements( insertPosition );
// Insert the view item.
viewWriter.insert( insertPosition, injectedList );
// 2. Handle possible children of the injected model item.
if ( prevItem && prevItem.name == 'listItem' ) {
const prevView = mapper.toViewElement( prevItem );
const walkerBoundaries = viewWriter.createRange( viewWriter.createPositionAt( prevView, 0 ), insertPosition );
const walker = walkerBoundaries.getWalker( { ignoreElementEnd: true } );
for ( const value of walker ) {
if ( value.item.is( 'element', 'li' ) ) {
const breakPosition = viewWriter.breakContainer( viewWriter.createPositionBefore( value.item ) );
const viewList = value.item.parent;
const targetPosition = viewWriter.createPositionAt( injectedItem, 'end' );
mergeViewLists( viewWriter, targetPosition.nodeBefore, targetPosition.nodeAfter );
viewWriter.move( viewWriter.createRangeOn( viewList ), targetPosition );
walker.position = breakPosition;
}
}
} else {
const nextViewList = injectedList.nextSibling;
if ( nextViewList && ( nextViewList.is( 'element', 'ul' ) || nextViewList.is( 'element', 'ol' ) ) ) {
let lastSubChild = null;
for ( const child of nextViewList.getChildren() ) {
const modelChild = mapper.toModelElement( child );
if ( modelChild && modelChild.getAttribute( 'listIndent' ) > modelItem.getAttribute( 'listIndent' ) ) {
lastSubChild = child;
} else {
break;
}
}
if ( lastSubChild ) {
viewWriter.breakContainer( viewWriter.createPositionAfter( lastSubChild ) );
viewWriter.move( viewWriter.createRangeOn( lastSubChild.parent ), viewWriter.createPositionAt( injectedItem, 'end' ) );
}
}
}
// Merge the inserted view list with its possible neighbor lists.
mergeViewLists( viewWriter, injectedList, injectedList.nextSibling );
mergeViewLists( viewWriter, injectedList.previousSibling, injectedList );
}
/**
* Helper function that takes two parameters that are expected to be view list elements, and merges them.
* The merge happens only if both parameters are list elements of the same type (the same element name and the same class attributes).
*
* @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter The writer instance.
* @param {module:engine/view/item~Item} firstList The first element to compare.
* @param {module:engine/view/item~Item} secondList The second element to compare.
* @returns {module:engine/view/position~Position|null} The position after merge or `null` when there was no merge.
*/
export function mergeViewLists( viewWriter, firstList, secondList ) {
// Check if two lists are going to be merged.
if ( !firstList || !secondList || ( firstList.name != 'ul' && firstList.name != 'ol' ) ) {
return null;
}
// Both parameters are list elements, so compare types now.
if ( firstList.name != secondList.name || firstList.getAttribute( 'class' ) !== secondList.getAttribute( 'class' ) ) {
return null;
}
return viewWriter.mergeContainers( viewWriter.createPositionAfter( firstList ) );
}
/**
* Helper function that for a given `view.Position`, returns a `view.Position` that is after all `view.UIElement`s that
* are after the given position.
*
* For example:
* `<container:p>foo^<ui:span></ui:span><ui:span></ui:span>bar</container:p>`
* For position ^, the position before "bar" will be returned.
*
* @param {module:engine/view/position~Position} viewPosition
* @returns {module:engine/view/position~Position}
*/
export function positionAfterUiElements( viewPosition ) {
return viewPosition.getLastMatchingPosition( value => value.item.is( 'uiElement' ) );
}
/**
* Helper function that searches for a previous list item sibling of a given model item that meets the given criteria
* passed by the options object.
*
* @param {module:engine/model/item~Item} modelItem
* @param {Object} options Search criteria.
* @param {Boolean} [options.sameIndent=false] Whether the sought sibling should have the same indentation.
* @param {Boolean} [options.smallerIndent=false] Whether the sought sibling should have a smaller indentation.
* @param {Number} [options.listIndent] The reference indentation.
* @param {'forward'|'backward'} [options.direction='backward'] Walking direction.
* @returns {module:engine/model/item~Item|null}
*/
export function getSiblingListItem( modelItem, options ) {
const sameIndent = !!options.sameIndent;
const smallerIndent = !!options.smallerIndent;
const indent = options.listIndent;
let item = modelItem;
while ( item && item.name == 'listItem' ) {
const itemIndent = item.getAttribute( 'listIndent' );
if ( ( sameIndent && indent == itemIndent ) || ( smallerIndent && indent > itemIndent ) ) {
return item;
}
if ( options.direction === 'forward' ) {
item = item.nextSibling;
} else {
item = item.previousSibling;
}
}
return null;
}
/**
* Helper method for creating a UI button and linking it with an appropriate command.
*
* @private
* @param {module:core/editor/editor~Editor} editor The editor instance to which the UI component will be added.
* @param {String} commandName The name of the command.
* @param {String} label The button label.
* @param {String} icon The source of the icon.
*/
export function createUIComponent( editor, commandName, label, icon ) {
editor.ui.componentFactory.add( commandName, locale => {
const command = editor.commands.get( commandName );
const buttonView = new ButtonView( locale );
buttonView.set( {
label,
icon,
tooltip: true,
isToggleable: true
} );
// Bind button model to command.
buttonView.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
// Execute command.
buttonView.on( 'execute', () => {
editor.execute( commandName );
editor.editing.view.focus();
} );
return buttonView;
} );
}
/**
* Returns a first list view element that is direct child of the given view element.
*
* @param {module:engine/view/element~Element} viewElement
* @return {module:engine/view/element~Element|null}
*/
export function findNestedList( viewElement ) {
for ( const node of viewElement.getChildren() ) {
if ( node.name == 'ul' || node.name == 'ol' ) {
return node;
}
}
return null;
}
/**
* Returns an array with all `listItem` elements that represent the same list.
*
* It means that values of `listIndent`, `listType`, `listStyle`, `listReversed` and `listStart` for all items are equal.
*
* Additionally, if the `position` is inside a list item, that list item will be returned as well.
*
* @param {module:engine/model/position~Position} position Starting position.
* @param {'forward'|'backward'} direction Walking direction.
* @returns {Array.<module:engine/model/element~Element>}
*/
export function getSiblingNodes( position, direction ) {
const items = [];
const listItem = position.parent;
const walkerOptions = {
ignoreElementEnd: false,
startPosition: position,
shallow: true,
direction
};
const limitIndent = listItem.getAttribute( 'listIndent' );
const nodes = [ ...new TreeWalker( walkerOptions ) ]
.filter( value => value.item.is( 'element' ) )
.map( value => value.item );
for ( const element of nodes ) {
// If found something else than `listItem`, we're out of the list scope.
if ( !element.is( 'element', 'listItem' ) ) {
break;
}
// If current parsed item has lower indent that element that the element that was a starting point,
// it means we left a nested list. Abort searching items.
//
// ■ List item 1. [listIndent=0]
// ○ List item 2.[] [listIndent=1], limitIndent = 1,
// ○ List item 3. [listIndent=1]
// ■ List item 4. [listIndent=0]
//
// Abort searching when leave nested list.
if ( element.getAttribute( 'listIndent' ) < limitIndent ) {
break;
}
// ■ List item 1.[] [listIndent=0] limitIndent = 0,
// ○ List item 2. [listIndent=1]
// ○ List item 3. [listIndent=1]
// ■ List item 4. [listIndent=0]
//
// Ignore nested lists.
if ( element.getAttribute( 'listIndent' ) > limitIndent ) {
continue;
}
// ■ List item 1.[] [listType=bulleted]
// 1. List item 2. [listType=numbered]
// 2.List item 3. [listType=numbered]
//
// Abort searching when found a different kind of a list.
if ( element.getAttribute( 'listType' ) !== listItem.getAttribute( 'listType' ) ) {
break;
}
// ■ List item 1.[] [listType=bulleted]
// ■ List item 2. [listType=bulleted]
// ○ List item 3. [listType=bulleted]
// ○ List item 4. [listType=bulleted]
//
// Abort searching when found a different list style,
if ( element.getAttribute( 'listStyle' ) !== listItem.getAttribute( 'listStyle' ) ) {
break;
}
// ... different direction
if ( element.getAttribute( 'listReversed' ) !== listItem.getAttribute( 'listReversed' ) ) {
break;
}
// ... and different start index
if ( element.getAttribute( 'listStart' ) !== listItem.getAttribute( 'listStart' ) ) {
break;
}
if ( direction === 'backward' ) {
items.unshift( element );
} else {
items.push( element );
}
}
return items;
}
/**
* Returns an array with all `listItem` elements in the model selection.
*
* It returns all the items even if only a part of the list is selected, including items that belong to nested lists.
* If no list is selected, it returns an empty array.
* The order of the elements is not specified.
*
* @protected
* @param {module:engine/model/model~Model} model
* @returns {Array.<module:engine/model/element~Element>}
*/
export function getSelectedListItems( model ) {
const document = model.document;
// For all selected blocks find all list items that are being selected
// and update the `listStyle` attribute in those lists.
let listItems = [ ...document.selection.getSelectedBlocks() ]
.filter( element => element.is( 'element', 'listItem' ) )
.map( element => {
const position = model.change( writer => writer.createPositionAt( element, 0 ) );
return [
...getSiblingNodes( position, 'backward' ),
...getSiblingNodes( position, 'forward' )
];
} )
.flat();
// Since `getSelectedBlocks()` can return items that belong to the same list, and
// `getSiblingNodes()` returns the entire list, we need to remove duplicated items.
listItems = [ ...new Set( listItems ) ];
return listItems;
}
const BULLETED_LIST_STYLE_TYPES = [ 'disc', 'circle', 'square' ];
// There's a lot of them (https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style).
// Let's support only those that can be selected by ListPropertiesUI.
const NUMBERED_LIST_STYLE_TYPES = [
'decimal',
'decimal-leading-zero',
'lower-roman',
'upper-roman',
'lower-latin',
'upper-latin'
];
/**
* Checks whether the given list-style-type is supported by numbered or bulleted list.
*
* @param {String} listStyleType
* @returns {'bulleted'|'numbered'|null}
*/
export function getListTypeFromListStyleType( listStyleType ) {
if ( BULLETED_LIST_STYLE_TYPES.includes( listStyleType ) ) {
return 'bulleted';
}
if ( NUMBERED_LIST_STYLE_TYPES.includes( listStyleType ) ) {
return 'numbered';
}
return null;
}
// Implementation of getFillerOffset for view list item element.
//
// @returns {Number|null} Block filler offset or `null` if block filler is not needed.
function getListItemFillerOffset() {
const hasOnlyLists = !this.isEmpty && ( this.getChild( 0 ).name == 'ul' || this.getChild( 0 ).name == 'ol' );
if ( this.isEmpty || hasOnlyLists ) {
return 0;
}
return getFillerOffset.call( this );
}