-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
listindentcommand.ts
185 lines (156 loc) · 5.52 KB
/
listindentcommand.ts
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
/**
* @license Copyright (c) 2003-2024, 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/listindentcommand
*/
import { Command, type Editor } from 'ckeditor5/src/core.js';
import type { DocumentSelection, Element } from 'ckeditor5/src/engine.js';
import {
expandListBlocksToCompleteItems,
indentBlocks,
isFirstBlockOfListItem,
isListItemBlock,
isSingleListItem,
outdentBlocksWithMerge,
sortBlocks,
splitListItemBefore,
type ListElement
} from './utils/model.js';
import ListWalker from './utils/listwalker.js';
/**
* The document list indent command. It is used by the {@link module:list/list~List list feature}.
*/
export default class ListIndentCommand extends Command {
/**
* Determines by how much the command will change the list item's indent attribute.
*/
private readonly _direction: 'forward' | 'backward';
/**
* Creates an instance of the command.
*
* @param editor The editor instance.
* @param indentDirection The direction of indent. If it is equal to `backward`, the command
* will outdent a list item.
*/
constructor( editor: Editor, indentDirection: 'forward' | 'backward' ) {
super( editor );
this._direction = indentDirection;
}
/**
* @inheritDoc
*/
public override refresh(): void {
this.isEnabled = this._checkEnabled();
}
/**
* Indents or outdents (depending on the {@link #constructor}'s `indentDirection` parameter) selected list items.
*
* @fires execute
* @fires afterExecute
*/
public override execute(): void {
const model = this.editor.model;
const blocks = getSelectedListBlocks( model.document.selection );
model.change( writer => {
const changedBlocks = [];
// Handle selection contained in the single list item and starting in the following blocks.
if ( isSingleListItem( blocks ) && !isFirstBlockOfListItem( blocks[ 0 ] ) ) {
// Allow increasing indent of following list item blocks.
if ( this._direction == 'forward' ) {
changedBlocks.push( ...indentBlocks( blocks, writer ) );
}
// For indent make sure that indented blocks have a new ID.
// For outdent just split blocks from the list item (give them a new IDs).
changedBlocks.push( ...splitListItemBefore( blocks[ 0 ], writer ) );
}
// More than a single list item is selected, or the first block of list item is selected.
else {
// Now just update the attributes of blocks.
if ( this._direction == 'forward' ) {
changedBlocks.push( ...indentBlocks( blocks, writer, { expand: true } ) );
} else {
changedBlocks.push( ...outdentBlocksWithMerge( blocks, writer ) );
}
}
// Align the list item type to match the previous list item (from the same list).
for ( const block of changedBlocks ) {
// This block become a plain block (for example a paragraph).
if ( !block.hasAttribute( 'listType' ) ) {
continue;
}
const previousItemBlock = ListWalker.first( block, { sameIndent: true } );
if ( previousItemBlock ) {
writer.setAttribute( 'listType', previousItemBlock.getAttribute( 'listType' ), block );
}
}
this._fireAfterExecute( changedBlocks );
} );
}
/**
* Fires the `afterExecute` event.
*
* @param changedBlocks The changed list elements.
*/
private _fireAfterExecute( changedBlocks: Array<Element> ) {
this.fire<ListIndentCommandAfterExecuteEvent>( 'afterExecute', sortBlocks( new Set( changedBlocks ) ) );
}
/**
* Checks whether the command can be enabled in the current context.
*
* @returns Whether the command should be enabled.
*/
private _checkEnabled(): boolean {
// Check whether any of position's ancestor is a list item.
let blocks = getSelectedListBlocks( this.editor.model.document.selection );
let firstBlock = blocks[ 0 ];
// If selection is not in a list item, the command is disabled.
if ( !firstBlock ) {
return false;
}
// If we are outdenting it is enough to be in list item. Every list item can always be outdented.
if ( this._direction == 'backward' ) {
return true;
}
// A single block of a list item is selected, so it could be indented as a sublist.
if ( isSingleListItem( blocks ) && !isFirstBlockOfListItem( blocks[ 0 ] ) ) {
return true;
}
blocks = expandListBlocksToCompleteItems( blocks );
firstBlock = blocks[ 0 ];
// Check if there is any list item before selected items that could become a parent of selected items.
const siblingItem = ListWalker.first( firstBlock, { sameIndent: true } );
if ( !siblingItem ) {
return false;
}
if ( siblingItem.getAttribute( 'listType' ) == firstBlock.getAttribute( 'listType' ) ) {
return true;
}
return false;
}
}
/**
* Returns an array of selected blocks truncated to the first non list block element.
*/
function getSelectedListBlocks( selection: DocumentSelection ) {
const blocks = Array.from( selection.getSelectedBlocks() );
const firstNonListBlockIndex = blocks.findIndex( block => !isListItemBlock( block ) );
if ( firstNonListBlockIndex != -1 ) {
blocks.length = firstNonListBlockIndex;
}
return blocks as Array<ListElement>;
}
/**
* Event fired by the {@link ~ListIndentCommand#execute} method.
*
* It allows to execute an action after executing the {@link module:list/list/listcommand~ListCommand#execute}
* method, for example adjusting attributes of changed list items.
*
* @internal
* @eventName ~ListIndentCommand#afterExecute
*/
export type ListIndentCommandAfterExecuteEvent = {
name: 'afterExecute';
args: [ changedBlocks: Array<Element> ];
};