59a4f8226bc8cc6f7079f903b48427ade1a37daa
[ckeditor.git] / skins / ckeditor / _source / plugins / enterkey / plugin.js
1 /*
2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.html or http://ckeditor.com/license
4 */
5
6 (function()
7 {
8 CKEDITOR.plugins.add( 'enterkey',
9 {
10 requires : [ 'keystrokes', 'indent' ],
11
12 init : function( editor )
13 {
14 editor.addCommand( 'enter', {
15 modes : { wysiwyg:1 },
16 editorFocus : false,
17 exec : function( editor ){ enter( editor ); }
18 });
19
20 editor.addCommand( 'shiftEnter', {
21 modes : { wysiwyg:1 },
22 editorFocus : false,
23 exec : function( editor ){ shiftEnter( editor ); }
24 });
25
26 var keystrokes = editor.keystrokeHandler.keystrokes;
27 keystrokes[ 13 ] = 'enter';
28 keystrokes[ CKEDITOR.SHIFT + 13 ] = 'shiftEnter';
29 }
30 });
31
32 CKEDITOR.plugins.enterkey =
33 {
34 enterBlock : function( editor, mode, range, forceMode )
35 {
36 // Get the range for the current selection.
37 range = range || getRange( editor );
38
39 // We may not have valid ranges to work on, like when inside a
40 // contenteditable=false element.
41 if ( !range )
42 return;
43
44 var doc = range.document;
45
46 var atBlockStart = range.checkStartOfBlock(),
47 atBlockEnd = range.checkEndOfBlock(),
48 path = new CKEDITOR.dom.elementPath( range.startContainer ),
49 block = path.block;
50
51 // Exit the list when we're inside an empty list item block. (#5376)
52 if ( atBlockStart && atBlockEnd )
53 {
54 if ( block && ( block.is( 'li' ) || block.getParent().is( 'li' ) ) )
55 {
56 editor.execCommand( 'outdent' );
57 return;
58 }
59 }
60 // Don't split <pre> if we're in the middle of it, act as shift enter key.
61 else if ( block && block.is( 'pre' ) )
62 {
63 if ( !atBlockEnd )
64 {
65 enterBr( editor, mode, range, forceMode );
66 return;
67 }
68 }
69 // Don't split caption blocks. (#7944)
70 else if ( block && CKEDITOR.dtd.$captionBlock[ block.getName() ] )
71 {
72 enterBr( editor, mode, range, forceMode );
73 return;
74 }
75
76 // Determine the block element to be used.
77 var blockTag = ( mode == CKEDITOR.ENTER_DIV ? 'div' : 'p' );
78
79 // Split the range.
80 var splitInfo = range.splitBlock( blockTag );
81
82 if ( !splitInfo )
83 return;
84
85 // Get the current blocks.
86 var previousBlock = splitInfo.previousBlock,
87 nextBlock = splitInfo.nextBlock;
88
89 var isStartOfBlock = splitInfo.wasStartOfBlock,
90 isEndOfBlock = splitInfo.wasEndOfBlock;
91
92 var node;
93
94 // If this is a block under a list item, split it as well. (#1647)
95 if ( nextBlock )
96 {
97 node = nextBlock.getParent();
98 if ( node.is( 'li' ) )
99 {
100 nextBlock.breakParent( node );
101 nextBlock.move( nextBlock.getNext(), 1 );
102 }
103 }
104 else if ( previousBlock && ( node = previousBlock.getParent() ) && node.is( 'li' ) )
105 {
106 previousBlock.breakParent( node );
107 node = previousBlock.getNext();
108 range.moveToElementEditStart( node );
109 previousBlock.move( previousBlock.getPrevious() );
110 }
111
112 // If we have both the previous and next blocks, it means that the
113 // boundaries were on separated blocks, or none of them where on the
114 // block limits (start/end).
115 if ( !isStartOfBlock && !isEndOfBlock )
116 {
117 // If the next block is an <li> with another list tree as the first
118 // child, we'll need to append a filler (<br>/NBSP) or the list item
119 // wouldn't be editable. (#1420)
120 if ( nextBlock.is( 'li' )
121 && ( node = nextBlock.getFirst( CKEDITOR.dom.walker.invisible( true ) ) )
122 && node.is && node.is( 'ul', 'ol' ) )
123 ( CKEDITOR.env.ie ? doc.createText( '\xa0' ) : doc.createElement( 'br' ) ).insertBefore( node );
124
125 // Move the selection to the end block.
126 if ( nextBlock )
127 range.moveToElementEditStart( nextBlock );
128 }
129 else
130 {
131 var newBlock,
132 newBlockDir;
133
134 if ( previousBlock )
135 {
136 // Do not enter this block if it's a header tag, or we are in
137 // a Shift+Enter (#77). Create a new block element instead
138 // (later in the code).
139 if ( previousBlock.is( 'li' ) ||
140 ! ( headerTagRegex.test( previousBlock.getName() ) || previousBlock.is( 'pre' ) ) )
141 {
142 // Otherwise, duplicate the previous block.
143 newBlock = previousBlock.clone();
144 }
145 }
146 else if ( nextBlock )
147 newBlock = nextBlock.clone();
148
149 if ( !newBlock )
150 {
151 // We have already created a new list item. (#6849)
152 if ( node && node.is( 'li' ) )
153 newBlock = node;
154 else
155 {
156 newBlock = doc.createElement( blockTag );
157 if ( previousBlock && ( newBlockDir = previousBlock.getDirection() ) )
158 newBlock.setAttribute( 'dir', newBlockDir );
159 }
160 }
161 // Force the enter block unless we're talking of a list item.
162 else if ( forceMode && !newBlock.is( 'li' ) )
163 newBlock.renameNode( blockTag );
164
165 // Recreate the inline elements tree, which was available
166 // before hitting enter, so the same styles will be available in
167 // the new block.
168 var elementPath = splitInfo.elementPath;
169 if ( elementPath )
170 {
171 for ( var i = 0, len = elementPath.elements.length ; i < len ; i++ )
172 {
173 var element = elementPath.elements[ i ];
174
175 if ( element.equals( elementPath.block ) || element.equals( elementPath.blockLimit ) )
176 break;
177
178 if ( CKEDITOR.dtd.$removeEmpty[ element.getName() ] )
179 {
180 element = element.clone();
181 newBlock.moveChildren( element );
182 newBlock.append( element );
183 }
184 }
185 }
186
187 if ( !CKEDITOR.env.ie )
188 newBlock.appendBogus();
189
190 if ( !newBlock.getParent() )
191 range.insertNode( newBlock );
192
193 // list item start number should not be duplicated (#7330), but we need
194 // to remove the attribute after it's onto the DOM tree because of old IEs (#7581).
195 newBlock.is( 'li' ) && newBlock.removeAttribute( 'value' );
196
197 // This is tricky, but to make the new block visible correctly
198 // we must select it.
199 // The previousBlock check has been included because it may be
200 // empty if we have fixed a block-less space (like ENTER into an
201 // empty table cell).
202 if ( CKEDITOR.env.ie && isStartOfBlock && ( !isEndOfBlock || !previousBlock.getChildCount() ) )
203 {
204 // Move the selection to the new block.
205 range.moveToElementEditStart( isEndOfBlock ? previousBlock : newBlock );
206 range.select();
207 }
208
209 // Move the selection to the new block.
210 range.moveToElementEditStart( isStartOfBlock && !isEndOfBlock ? nextBlock : newBlock );
211 }
212
213 if ( !CKEDITOR.env.ie )
214 {
215 if ( nextBlock )
216 {
217 // If we have split the block, adds a temporary span at the
218 // range position and scroll relatively to it.
219 var tmpNode = doc.createElement( 'span' );
220
221 // We need some content for Safari.
222 tmpNode.setHtml( '&nbsp;' );
223
224 range.insertNode( tmpNode );
225 tmpNode.scrollIntoView();
226 range.deleteContents();
227 }
228 else
229 {
230 // We may use the above scroll logic for the new block case
231 // too, but it gives some weird result with Opera.
232 newBlock.scrollIntoView();
233 }
234 }
235
236 range.select();
237 },
238
239 enterBr : function( editor, mode, range, forceMode )
240 {
241 // Get the range for the current selection.
242 range = range || getRange( editor );
243
244 // We may not have valid ranges to work on, like when inside a
245 // contenteditable=false element.
246 if ( !range )
247 return;
248
249 var doc = range.document;
250
251 // Determine the block element to be used.
252 var blockTag = ( mode == CKEDITOR.ENTER_DIV ? 'div' : 'p' );
253
254 var isEndOfBlock = range.checkEndOfBlock();
255
256 var elementPath = new CKEDITOR.dom.elementPath( editor.getSelection().getStartElement() );
257
258 var startBlock = elementPath.block,
259 startBlockTag = startBlock && elementPath.block.getName();
260
261 var isPre = false;
262
263 if ( !forceMode && startBlockTag == 'li' )
264 {
265 enterBlock( editor, mode, range, forceMode );
266 return;
267 }
268
269 // If we are at the end of a header block.
270 if ( !forceMode && isEndOfBlock && headerTagRegex.test( startBlockTag ) )
271 {
272 var newBlock,
273 newBlockDir;
274
275 if ( ( newBlockDir = startBlock.getDirection() ) )
276 {
277 newBlock = doc.createElement( 'div' );
278 newBlock.setAttribute( 'dir', newBlockDir );
279 newBlock.insertAfter( startBlock );
280 range.setStart( newBlock, 0 );
281 }
282 else
283 {
284 // Insert a <br> after the current paragraph.
285 doc.createElement( 'br' ).insertAfter( startBlock );
286
287 // A text node is required by Gecko only to make the cursor blink.
288 if ( CKEDITOR.env.gecko )
289 doc.createText( '' ).insertAfter( startBlock );
290
291 // IE has different behaviors regarding position.
292 range.setStartAt( startBlock.getNext(), CKEDITOR.env.ie ? CKEDITOR.POSITION_BEFORE_START : CKEDITOR.POSITION_AFTER_START );
293 }
294 }
295 else
296 {
297 var lineBreak;
298
299 isPre = ( startBlockTag == 'pre' );
300
301 // Gecko prefers <br> as line-break inside <pre> (#4711).
302 if ( isPre && !CKEDITOR.env.gecko )
303 lineBreak = doc.createText( CKEDITOR.env.ie ? '\r' : '\n' );
304 else
305 lineBreak = doc.createElement( 'br' );
306
307 range.deleteContents();
308 range.insertNode( lineBreak );
309
310 // IE has different behavior regarding position.
311 if ( CKEDITOR.env.ie )
312 range.setStartAt( lineBreak, CKEDITOR.POSITION_AFTER_END );
313 else
314 {
315 // A text node is required by Gecko only to make the cursor blink.
316 // We need some text inside of it, so the bogus <br> is properly
317 // created.
318 doc.createText( '\ufeff' ).insertAfter( lineBreak );
319
320 // If we are at the end of a block, we must be sure the bogus node is available in that block.
321 if ( isEndOfBlock )
322 lineBreak.getParent().appendBogus();
323
324 // Now we can remove the text node contents, so the caret doesn't
325 // stop on it.
326 lineBreak.getNext().$.nodeValue = '';
327
328 range.setStartAt( lineBreak.getNext(), CKEDITOR.POSITION_AFTER_START );
329
330 // Scroll into view, for non IE.
331 var dummy = null;
332
333 // BR is not positioned in Opera and Webkit.
334 if ( !CKEDITOR.env.gecko )
335 {
336 dummy = doc.createElement( 'span' );
337 // We need have some contents for Webkit to position it
338 // under parent node. ( #3681)
339 dummy.setHtml('&nbsp;');
340 }
341 else
342 dummy = doc.createElement( 'br' );
343
344 dummy.insertBefore( lineBreak.getNext() );
345 dummy.scrollIntoView();
346 dummy.remove();
347 }
348 }
349
350 // This collapse guarantees the cursor will be blinking.
351 range.collapse( true );
352
353 range.select( isPre );
354 }
355 };
356
357 var plugin = CKEDITOR.plugins.enterkey,
358 enterBr = plugin.enterBr,
359 enterBlock = plugin.enterBlock,
360 headerTagRegex = /^h[1-6]$/;
361
362 function shiftEnter( editor )
363 {
364 // Only effective within document.
365 if ( editor.mode != 'wysiwyg' )
366 return false;
367
368 // On SHIFT+ENTER:
369 // 1. We want to enforce the mode to be respected, instead
370 // of cloning the current block. (#77)
371 return enter( editor, editor.config.shiftEnterMode, 1 );
372 }
373
374 function enter( editor, mode, forceMode )
375 {
376 forceMode = editor.config.forceEnterMode || forceMode;
377
378 // Only effective within document.
379 if ( editor.mode != 'wysiwyg' )
380 return false;
381
382 if ( !mode )
383 mode = editor.config.enterMode;
384
385 // Use setTimout so the keys get cancelled immediatelly.
386 setTimeout( function()
387 {
388 editor.fire( 'saveSnapshot' ); // Save undo step.
389 if ( mode == CKEDITOR.ENTER_BR )
390 enterBr( editor, mode, null, forceMode );
391 else
392 enterBlock( editor, mode, null, forceMode );
393
394 }, 0 );
395
396 return true;
397 }
398
399 function getRange( editor )
400 {
401 // Get the selection ranges.
402 var ranges = editor.getSelection().getRanges( true );
403
404 // Delete the contents of all ranges except the first one.
405 for ( var i = ranges.length - 1 ; i > 0 ; i-- )
406 {
407 ranges[ i ].deleteContents();
408 }
409
410 // Return the first range.
411 return ranges[ 0 ];
412 }
413 })();