-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
linkcommand.js
294 lines (256 loc) · 11 KB
/
linkcommand.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
/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module link/linkcommand
*/
import Command from '@ckeditor/ckeditor5-core/src/command';
import findAttributeRange from '@ckeditor/ckeditor5-typing/src/utils/findattributerange';
import toMap from '@ckeditor/ckeditor5-utils/src/tomap';
import Collection from '@ckeditor/ckeditor5-utils/src/collection';
import first from '@ckeditor/ckeditor5-utils/src/first';
import AutomaticDecorators from './utils/automaticdecorators';
import { isImageAllowed } from './utils';
/**
* The link command. It is used by the {@link module:link/link~Link link feature}.
*
* @extends module:core/command~Command
*/
export default class LinkCommand extends Command {
/**
* The value of the `'linkHref'` attribute if the start of the selection is located in a node with this attribute.
*
* @observable
* @readonly
* @member {Object|undefined} #value
*/
constructor( editor ) {
super( editor );
/**
* A collection of {@link module:link/utils~ManualDecorator manual decorators}
* corresponding to the {@link module:link/link~LinkConfig#decorators decorator configuration}.
*
* You can consider it a model with states of manual decorators added to the currently selected link.
*
* @readonly
* @type {module:utils/collection~Collection}
*/
this.manualDecorators = new Collection();
/**
* An instance of the helper that ties together all {@link module:link/link~LinkDecoratorAutomaticDefinition}
* that are used by the {@glink features/link link} and the {@glink features/image#linking-images linking images} features.
*
* @readonly
* @type {module:link/utils~AutomaticDecorators}
*/
this.automaticDecorators = new AutomaticDecorators();
}
/**
* Synchronizes the state of {@link #manualDecorators} with the currently present elements in the model.
*/
restoreManualDecoratorStates() {
for ( const manualDecorator of this.manualDecorators ) {
manualDecorator.value = this._getDecoratorStateFromModel( manualDecorator.id );
}
}
/**
* @inheritDoc
*/
refresh() {
const model = this.editor.model;
const doc = model.document;
const selectedElement = first( doc.selection.getSelectedBlocks() );
// A check for the `LinkImage` plugin. If the selection contains an element, get values from the element.
// Currently the selection reads attributes from text nodes only. See #7429 and #7465.
if ( isImageAllowed( selectedElement, model.schema ) ) {
this.value = selectedElement.getAttribute( 'linkHref' );
this.isEnabled = model.schema.checkAttribute( selectedElement, 'linkHref' );
} else {
this.value = doc.selection.getAttribute( 'linkHref' );
this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'linkHref' );
}
for ( const manualDecorator of this.manualDecorators ) {
manualDecorator.value = this._getDecoratorStateFromModel( manualDecorator.id );
}
}
/**
* Executes the command.
*
* When the selection is non-collapsed, the `linkHref` attribute will be applied to nodes inside the selection, but only to
* those nodes where the `linkHref` attribute is allowed (disallowed nodes will be omitted).
*
* When the selection is collapsed and is not inside the text with the `linkHref` attribute, a
* new {@link module:engine/model/text~Text text node} with the `linkHref` attribute will be inserted in place of the caret, but
* only if such element is allowed in this place. The `_data` of the inserted text will equal the `href` parameter.
* The selection will be updated to wrap the just inserted text node.
*
* When the selection is collapsed and inside the text with the `linkHref` attribute, the attribute value will be updated.
*
* # Decorators and model attribute management
*
* There is an optional argument to this command that applies or removes model
* {@glink framework/guides/architecture/editing-engine#text-attributes text attributes} brought by
* {@link module:link/utils~ManualDecorator manual link decorators}.
*
* Text attribute names in the model correspond to the entries in the {@link module:link/link~LinkConfig#decorators configuration}.
* For every decorator configured, a model text attribute exists with the "link" prefix. For example, a `'linkMyDecorator'` attribute
* corresponds to `'myDecorator'` in the configuration.
*
* To learn more about link decorators, check out the {@link module:link/link~LinkConfig#decorators `config.link.decorators`}
* documentation.
*
* Here is how to manage decorator attributes with the link command:
*
* const linkCommand = editor.commands.get( 'link' );
*
* // Adding a new decorator attribute.
* linkCommand.execute( 'http://example.com', {
* linkIsExternal: true
* } );
*
* // Removing a decorator attribute from the selection.
* linkCommand.execute( 'http://example.com', {
* linkIsExternal: false
* } );
*
* // Adding multiple decorator attributes at the same time.
* linkCommand.execute( 'http://example.com', {
* linkIsExternal: true,
* linkIsDownloadable: true,
* } );
*
* // Removing and adding decorator attributes at the same time.
* linkCommand.execute( 'http://example.com', {
* linkIsExternal: false,
* linkFoo: true,
* linkIsDownloadable: false,
* } );
*
* **Note**: If the decorator attribute name is not specified, its state remains untouched.
*
* **Note**: {@link module:link/unlinkcommand~UnlinkCommand#execute `UnlinkCommand#execute()`} removes all
* decorator attributes.
*
* @fires execute
* @param {String} href Link destination.
* @param {Object} [manualDecoratorIds={}] The information about manual decorator attributes to be applied or removed upon execution.
*/
execute( href, manualDecoratorIds = {} ) {
const model = this.editor.model;
const selection = model.document.selection;
// Stores information about manual decorators to turn them on/off when command is applied.
const truthyManualDecorators = [];
const falsyManualDecorators = [];
for ( const name in manualDecoratorIds ) {
if ( manualDecoratorIds[ name ] ) {
truthyManualDecorators.push( name );
} else {
falsyManualDecorators.push( name );
}
}
model.change( writer => {
// If selection is collapsed then update selected link or insert new one at the place of caret.
if ( selection.isCollapsed ) {
const position = selection.getFirstPosition();
// When selection is inside text with `linkHref` attribute.
if ( selection.hasAttribute( 'linkHref' ) ) {
// Then update `linkHref` value.
const linkRange = findAttributeRange( position, 'linkHref', selection.getAttribute( 'linkHref' ), model );
writer.setAttribute( 'linkHref', href, linkRange );
truthyManualDecorators.forEach( item => {
writer.setAttribute( item, true, linkRange );
} );
falsyManualDecorators.forEach( item => {
writer.removeAttribute( item, linkRange );
} );
// Put the selection at the end of the updated link.
writer.setSelection( writer.createPositionAfter( linkRange.end.nodeBefore ) );
}
// If not then insert text node with `linkHref` attribute in place of caret.
// However, since selection in collapsed, attribute value will be used as data for text node.
// So, if `href` is empty, do not create text node.
else if ( href !== '' ) {
const attributes = toMap( selection.getAttributes() );
attributes.set( 'linkHref', href );
truthyManualDecorators.forEach( item => {
attributes.set( item, true );
} );
const node = writer.createText( href, attributes );
model.insertContent( node, position );
// Put the selection at the end of the inserted link.
writer.setSelection( writer.createPositionAfter( node ) );
}
// Remove the `linkHref` attribute and all link decorators from the selection.
// It stops adding a new content into the link element.
[ 'linkHref', ...truthyManualDecorators, ...falsyManualDecorators ].forEach( item => {
writer.removeSelectionAttribute( item );
} );
} else {
// If selection has non-collapsed ranges, we change attribute on nodes inside those ranges
// omitting nodes where the `linkHref` attribute is disallowed.
const ranges = model.schema.getValidRanges( selection.getRanges(), 'linkHref' );
// But for the first, check whether the `linkHref` attribute is allowed on selected blocks (e.g. the "image" element).
const allowedRanges = [];
for ( const element of selection.getSelectedBlocks() ) {
if ( model.schema.checkAttribute( element, 'linkHref' ) ) {
allowedRanges.push( writer.createRangeOn( element ) );
}
}
// Ranges that accept the `linkHref` attribute. Since we will iterate over `allowedRanges`, let's clone it.
const rangesToUpdate = allowedRanges.slice();
// For all selection ranges we want to check whether given range is inside an element that accepts the `linkHref` attribute.
// If so, we don't want to propagate applying the attribute to its children.
for ( const range of ranges ) {
if ( this._isRangeToUpdate( range, allowedRanges ) ) {
rangesToUpdate.push( range );
}
}
for ( const range of rangesToUpdate ) {
writer.setAttribute( 'linkHref', href, range );
truthyManualDecorators.forEach( item => {
writer.setAttribute( item, true, range );
} );
falsyManualDecorators.forEach( item => {
writer.removeAttribute( item, range );
} );
}
}
} );
}
/**
* Provides information whether a decorator with a given name is present in the currently processed selection.
*
* @private
* @param {String} decoratorName The name of the manual decorator used in the model
* @returns {Boolean} The information whether a given decorator is currently present in the selection.
*/
_getDecoratorStateFromModel( decoratorName ) {
const model = this.editor.model;
const doc = model.document;
const selectedElement = first( doc.selection.getSelectedBlocks() );
// A check for the `LinkImage` plugin. If the selection contains an element, get values from the element.
// Currently the selection reads attributes from text nodes only. See #7429 and #7465.
if ( isImageAllowed( selectedElement, model.schema ) ) {
return selectedElement.getAttribute( decoratorName );
}
return doc.selection.getAttribute( decoratorName );
}
/**
* Checks whether specified `range` is inside an element that accepts the `linkHref` attribute.
*
* @private
* @param {module:engine/view/range~Range} range A range to check.
* @param {Array.<module:engine/view/range~Range>} allowedRanges An array of ranges created on elements where the attribute is accepted.
* @returns {Boolean}
*/
_isRangeToUpdate( range, allowedRanges ) {
for ( const allowedRange of allowedRanges ) {
// A range is inside an element that will have the `linkHref` attribute. Do not modify its nodes.
if ( allowedRange.containsRange( range ) ) {
return false;
}
}
return true;
}
}