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 })();