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