aboutsummaryrefslogtreecommitdiff
path: root/sources/plugins/widgetselection
diff options
context:
space:
mode:
authorIsmaël Bouya <ismael.bouya@normalesup.org>2017-01-20 00:55:51 +0100
committerIsmaël Bouya <ismael.bouya@normalesup.org>2017-01-20 00:55:51 +0100
commitc63493c899de714b05b0521bb38aab60d19030ef (patch)
treefcb2b261afa0f3c2bd6b48929b64724c71192bae /sources/plugins/widgetselection
downloadludivine-ckeditor-component-c63493c899de714b05b0521bb38aab60d19030ef.tar.gz
ludivine-ckeditor-component-c63493c899de714b05b0521bb38aab60d19030ef.tar.zst
ludivine-ckeditor-component-c63493c899de714b05b0521bb38aab60d19030ef.zip
Validation initiale4.6.2.1
Diffstat (limited to 'sources/plugins/widgetselection')
-rw-r--r--sources/plugins/widgetselection/plugin.js366
1 files changed, 366 insertions, 0 deletions
diff --git a/sources/plugins/widgetselection/plugin.js b/sources/plugins/widgetselection/plugin.js
new file mode 100644
index 0000000..b7aa6a0
--- /dev/null
+++ b/sources/plugins/widgetselection/plugin.js
@@ -0,0 +1,366 @@
1/**
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5
6/**
7 * @fileOverview A plugin created to handle ticket #11064. While the issue is caused by native WebKit/Blink behaviour,
8 * this plugin can be easily detached or modified when the issue is fixed in the browsers without changing the core.
9 * When Ctrl/Cmd + A is pressed to select all content it does not work due to a bug in
10 * Webkit/Blink if a non-editable element is at the beginning or the end of the content.
11 */
12
13( function() {
14 'use strict';
15
16 CKEDITOR.plugins.add( 'widgetselection', {
17
18 init: function( editor ) {
19 if ( CKEDITOR.env.webkit ) {
20 var widgetselection = CKEDITOR.plugins.widgetselection;
21
22 editor.on( 'contentDom', function( evt ) {
23
24 var editor = evt.editor,
25 doc = editor.document,
26 editable = editor.editable();
27
28 editable.attachListener( doc, 'keydown', function( evt ) {
29 var data = evt.data.$;
30
31 // Ctrl/Cmd + A
32 if ( evt.data.getKey() == 65 && ( CKEDITOR.env.mac && data.metaKey || !CKEDITOR.env.mac && data.ctrlKey ) ) {
33
34 // Defer the call so the selection is already changed by the pressed keys.
35 CKEDITOR.tools.setTimeout( function() {
36
37 // Manage filler elements on keydown. If there is no need
38 // to add fillers, we need to check and clean previously used once.
39 if ( !widgetselection.addFillers( editable ) ) {
40 widgetselection.removeFillers( editable );
41 }
42 }, 0 );
43 }
44 }, null, null, -1 );
45
46 // Check and clean previously used fillers.
47 editor.on( 'selectionCheck', function( evt ) {
48 widgetselection.removeFillers( evt.editor.editable() );
49 } );
50
51 // Remove fillers on paste before data gets inserted into editor.
52 editor.on( 'paste', function( evt ) {
53 evt.data.dataValue = widgetselection.cleanPasteData( evt.data.dataValue );
54 } );
55
56 if ( 'selectall' in editor.plugins ) {
57 widgetselection.addSelectAllIntegration( editor );
58 }
59 } );
60 }
61 }
62 } );
63
64 /**
65 * A set of helper methods for the Widget Selection plugin.
66 *
67 * @property widgetselection
68 * @member CKEDITOR.plugins
69 * @since 4.6.1
70 */
71 CKEDITOR.plugins.widgetselection = {
72
73 /**
74 * The start filler element reference.
75 *
76 * @property {CKEDITOR.dom.element}
77 * @member CKEDITOR.plugins.widgetselection
78 * @private
79 */
80 startFiller: null,
81
82 /**
83 * The end filler element reference.
84 *
85 * @property {CKEDITOR.dom.element}
86 * @member CKEDITOR.plugins.widgetselection
87 * @private
88 */
89 endFiller: null,
90
91 /**
92 * An attribute which identifies the filler element.
93 *
94 * @property {String}
95 * @member CKEDITOR.plugins.widgetselection
96 * @private
97 */
98 fillerAttribute: 'data-cke-filler-webkit',
99
100 /**
101 * The default content of the filler element. Note: The filler needs to have `visible` content.
102 * Unprintable elements or empty content do not help as a workaround.
103 *
104 * @property {String}
105 * @member CKEDITOR.plugins.widgetselection
106 * @private
107 */
108 fillerContent: '&nbsp;',
109
110 /**
111 * Tag name which is used to create fillers.
112 *
113 * @property {String}
114 * @member CKEDITOR.plugins.widgetselection
115 * @private
116 */
117 fillerTagName: 'div',
118
119 /**
120 * Adds a filler before or after a non-editable element at the beginning or the end of the `editable`.
121 *
122 * @param {CKEDITOR.editable} editable
123 * @returns {Boolean}
124 * @member CKEDITOR.plugins.widgetselection
125 */
126 addFillers: function( editable ) {
127 var editor = editable.editor;
128
129 // Whole content should be selected, if not fix the selection manually.
130 if ( !this.isWholeContentSelected( editable ) && editable.getChildCount() > 0 ) {
131
132 var firstChild = editable.getFirst( filterTempElements ),
133 lastChild = editable.getLast( filterTempElements );
134
135 // Check if first element is editable. If not prepend with filler.
136 if ( firstChild && firstChild.type == CKEDITOR.NODE_ELEMENT && !firstChild.isEditable() ) {
137 this.startFiller = this.createFiller();
138 editable.append( this.startFiller, 1 );
139 }
140
141 // Check if last element is editable. If not append filler.
142 if ( lastChild && lastChild.type == CKEDITOR.NODE_ELEMENT && !lastChild.isEditable() ) {
143 this.endFiller = this.createFiller( true );
144 editable.append( this.endFiller, 0 );
145 }
146
147 // Reselect whole content after any filler was added.
148 if ( this.hasFiller( editable ) ) {
149 var rangeAll = editor.createRange();
150 rangeAll.selectNodeContents( editable );
151 rangeAll.select();
152 return true;
153 }
154 }
155 return false;
156 },
157
158 /**
159 * Removes filler elements or updates their references.
160 *
161 * It will **not remove** filler elements if the whole content is selected, as it would break the
162 * selection.
163 *
164 * @param {CKEDITOR.editable} editable
165 * @member CKEDITOR.plugins.widgetselection
166 */
167 removeFillers: function( editable ) {
168 // If startFiller or endFiller exists and not entire content is selected it means the selection
169 // just changed from selected all. We need to remove fillers and set proper selection/content.
170 if ( this.hasFiller( editable ) && !this.isWholeContentSelected( editable ) ) {
171
172 var startFillerContent = editable.findOne( this.fillerTagName + '[' + this.fillerAttribute + '=start]' ),
173 endFillerContent = editable.findOne( this.fillerTagName + '[' + this.fillerAttribute + '=end]' );
174
175 if ( this.startFiller && startFillerContent && this.startFiller.equals( startFillerContent ) ) {
176 this.removeFiller( this.startFiller, editable );
177 } else {
178 // The start filler is still present but it is a different element than previous one. It means the
179 // undo recreating entirely selected content was performed. We need to update filler reference.
180 this.startFiller = startFillerContent;
181 }
182
183 if ( this.endFiller && endFillerContent && this.endFiller.equals( endFillerContent ) ) {
184 this.removeFiller( this.endFiller, editable );
185 } else {
186 // Same as with start filler.
187 this.endFiller = endFillerContent;
188 }
189 }
190 },
191
192 /**
193 * Removes fillers from the paste data.
194 *
195 * @param {String} data
196 * @returns {String}
197 * @member CKEDITOR.plugins.widgetselection
198 * @private
199 */
200 cleanPasteData: function( data ) {
201 if ( data && data.length ) {
202 data = data
203 .replace( this.createFillerRegex(), '' )
204 .replace( this.createFillerRegex( true ), '' );
205 }
206 return data;
207 },
208
209 /**
210 * Checks if the entire content of the given editable is selected.
211 *
212 * @param {CKEDITOR.editable} editable
213 * @returns {Boolean}
214 * @member CKEDITOR.plugins.widgetselection
215 * @private
216 */
217 isWholeContentSelected: function( editable ) {
218
219 var range = editable.editor.getSelection().getRanges()[ 0 ];
220 if ( range ) {
221
222 if ( range && range.collapsed ) {
223 return false;
224
225 } else {
226 var rangeClone = range.clone();
227 rangeClone.enlarge( CKEDITOR.ENLARGE_ELEMENT );
228
229 return !!( rangeClone && editable && rangeClone.startContainer && rangeClone.endContainer &&
230 rangeClone.startOffset === 0 && rangeClone.endOffset === editable.getChildCount() &&
231 rangeClone.startContainer.equals( editable ) && rangeClone.endContainer.equals( editable ) );
232 }
233 }
234 return false;
235 },
236
237 /**
238 * Checks if there is any filler element in the given editable.
239 *
240 * @param {CKEDITOR.editable} editable
241 * @returns {Boolean}
242 * @member CKEDITOR.plugins.widgetselection
243 * @private
244 */
245 hasFiller: function( editable ) {
246 return editable.find( this.fillerTagName + '[' + this.fillerAttribute + ']' ).count() > 0;
247 },
248
249 /**
250 * Creates a filler element.
251 *
252 * @param {Boolean} [onEnd] If filler will be placed on end or beginning of the content.
253 * @returns {CKEDITOR.dom.element}
254 * @member CKEDITOR.plugins.widgetselection
255 * @private
256 */
257 createFiller: function( onEnd ) {
258 var filler = new CKEDITOR.dom.element( this.fillerTagName );
259 filler.setHtml( this.fillerContent );
260 filler.setAttribute( this.fillerAttribute, onEnd ? 'end' : 'start' );
261 filler.setAttribute( 'data-cke-temp', 1 );
262 filler.setStyles( {
263 display: 'block',
264 width: 0,
265 height: 0,
266 padding: 0,
267 border: 0,
268 margin: 0,
269 position: 'absolute',
270 top: 0,
271 left: '-9999px',
272 opacity: 0,
273 overflow: 'hidden'
274 } );
275
276 return filler;
277 },
278
279 /**
280 * Removes the specific filler element from the given editable. If the filler contains any content (typed or pasted),
281 * it replaces the current editable content. If not, the caret is placed before the first or after the last editable
282 * element (depends if the filler was at the beginning or the end).
283 *
284 * @param {CKEDITOR.dom.element} filler
285 * @param {CKEDITOR.editable} editable
286 * @member CKEDITOR.plugins.widgetselection
287 * @private
288 */
289 removeFiller: function( filler, editable ) {
290 if ( filler ) {
291 var editor = editable.editor,
292 currentRange = editable.editor.getSelection().getRanges()[ 0 ],
293 currentPath = currentRange.startPath(),
294 range = editor.createRange(),
295 insertedHtml,
296 fillerOnStart,
297 manuallyHandleCaret;
298
299 if ( currentPath.contains( filler ) ) {
300 insertedHtml = filler.getHtml();
301 manuallyHandleCaret = true;
302 }
303
304 fillerOnStart = filler.getAttribute( this.fillerAttribute ) == 'start';
305 filler.remove();
306 filler = null;
307
308 if ( insertedHtml && insertedHtml.length > 0 && insertedHtml != this.fillerContent ) {
309 editable.insertHtmlIntoRange( insertedHtml, editor.getSelection().getRanges()[ 0 ] );
310 range.setStartAt( editable.getChild( editable.getChildCount() - 1 ), CKEDITOR.POSITION_BEFORE_END );
311 editor.getSelection().selectRanges( [ range ] );
312
313 } else if ( manuallyHandleCaret ) {
314 if ( fillerOnStart ) {
315 range.setStartAt( editable.getFirst().getNext(), CKEDITOR.POSITION_AFTER_START );
316 } else {
317 range.setEndAt( editable.getLast().getPrevious(), CKEDITOR.POSITION_BEFORE_END );
318 }
319 editable.editor.getSelection().selectRanges( [ range ] );
320 }
321 }
322 },
323
324 /**
325 * Creates a regular expression which will match the filler HTML in the text.
326 *
327 * @param {Boolean} [onEnd] Whether a regular expression should be created for the filler at the beginning or
328 * the end of the content.
329 * @returns {RegExp}
330 * @member CKEDITOR.plugins.widgetselection
331 * @private
332 */
333 createFillerRegex: function( onEnd ) {
334 var matcher = this.createFiller( onEnd ).getOuterHtml()
335 .replace( /style="[^"]*"/gi, 'style="[^"]*"' )
336 .replace( />[^<]*</gi, '>[^<]*<' );
337
338 return new RegExp( ( !onEnd ? '^' : '' ) + matcher + ( onEnd ? '$' : '' ) );
339 },
340
341 /**
342 * Adds an integration for the [Select All](http://ckeditor.com/addon/selectall) plugin to the given `editor`.
343 *
344 * @private
345 * @param {CKEDITOR.editor} editor
346 * @member CKEDITOR.plugins.widgetselection
347 */
348 addSelectAllIntegration: function( editor ) {
349 var widgetselection = this;
350
351 editor.editable().attachListener( editor, 'beforeCommandExec', function( evt ) {
352 var editable = editor.editable();
353
354 if ( evt.data.name == 'selectAll' && editable ) {
355 widgetselection.addFillers( editable );
356 }
357 }, null, null, 9999 );
358 }
359 };
360
361
362 function filterTempElements( el ) {
363 return el.getName && !el.hasAttribute( 'data-cke-temp' );
364 }
365
366} )();
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-24 15:17:21 +0000