_source/plugins/undo/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 /**\r
   7  * @fileOverview Undo/Redo system for saving shapshot for document modification\r
   8  *              and other recordable changes.\r
   9  */\r
  10 \r
  11 (function()\r
  12 {\r
  13         CKEDITOR.plugins.add( 'undo',\r
  14         {\r
  15                 requires : [ 'selection', 'wysiwygarea' ],\r
  16 \r
  17                 init : function( editor )\r
  18                 {\r
  19                         var undoManager = new UndoManager( editor );\r
  20 \r
  21                         var undoCommand = editor.addCommand( 'undo',\r
  22                                 {\r
  23                                         exec : function()\r
  24                                         {\r
  25                                                 if ( undoManager.undo() )\r
  26                                                 {\r
  27                                                         editor.selectionChange();\r
  28                                                         this.fire( 'afterUndo' );\r
  29                                                 }\r
  30                                         },\r
  31                                         state : CKEDITOR.TRISTATE_DISABLED,\r
  32                                         canUndo : false\r
  33                                 });\r
  34 \r
  35                         var redoCommand = editor.addCommand( 'redo',\r
  36                                 {\r
  37                                         exec : function()\r
  38                                         {\r
  39                                                 if ( undoManager.redo() )\r
  40                                                 {\r
  41                                                         editor.selectionChange();\r
  42                                                         this.fire( 'afterRedo' );\r
  43                                                 }\r
  44                                         },\r
  45                                         state : CKEDITOR.TRISTATE_DISABLED,\r
  46                                         canUndo : false\r
  47                                 });\r
  48 \r
  49                         undoManager.onChange = function()\r
  50                         {\r
  51                                 undoCommand.setState( undoManager.undoable() ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );\r
  52                                 redoCommand.setState( undoManager.redoable() ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );\r
  53                         };\r
  54 \r
  55                         function recordCommand( event )\r
  56                         {\r
  57                                 // If the command hasn't been marked to not support undo.\r
  58                                 if ( undoManager.enabled && event.data.command.canUndo !== false )\r
  59                                         undoManager.save();\r
  60                         }\r
  61 \r
  62                         // We'll save snapshots before and after executing a command.\r
  63                         editor.on( 'beforeCommandExec', recordCommand );\r
  64                         editor.on( 'afterCommandExec', recordCommand );\r
  65 \r
  66                         // Save snapshots before doing custom changes.\r
  67                         editor.on( 'saveSnapshot', function()\r
  68                                 {\r
  69                                         undoManager.save();\r
  70                                 });\r
  71 \r
  72                         // Registering keydown on every document recreation.(#3844)\r
  73                         editor.on( 'contentDom', function()\r
  74                                 {\r
  75                                         editor.document.on( 'keydown', function( event )\r
  76                                                 {\r
  77                                                         // Do not capture CTRL hotkeys.\r
  78                                                         if ( !event.data.$.ctrlKey && !event.data.$.metaKey )\r
  79                                                                 undoManager.type( event );\r
  80                                                 });\r
  81                                 });\r
  82 \r
  83                         // Always save an undo snapshot - the previous mode might have\r
  84                         // changed editor contents.\r
  85                         editor.on( 'beforeModeUnload', function()\r
  86                                 {\r
  87                                         editor.mode == 'wysiwyg' && undoManager.save( true );\r
  88                                 });\r
  89 \r
  90                         // Make the undo manager available only in wysiwyg mode.\r
  91                         editor.on( 'mode', function()\r
  92                                 {\r
  93                                         undoManager.enabled = editor.mode == 'wysiwyg';\r
  94                                         undoManager.onChange();\r
  95                                 });\r
  96 \r
  97                         editor.ui.addButton( 'Undo',\r
  98                                 {\r
  99                                         label : editor.lang.undo,\r
 100                                         command : 'undo'\r
 101                                 });\r
 102 \r
 103                         editor.ui.addButton( 'Redo',\r
 104                                 {\r
 105                                         label : editor.lang.redo,\r
 106                                         command : 'redo'\r
 107                                 });\r
 108 \r
 109                         editor.resetUndo = function()\r
 110                         {\r
 111                                 // Reset the undo stack.\r
 112                                 undoManager.reset();\r
 113 \r
 114                                 // Create the first image.\r
 115                                 editor.fire( 'saveSnapshot' );\r
 116                         };\r
 117                 }\r
 118         });\r
 119 \r
 120         // Gets a snapshot image which represent the current document status.\r
 121         function Image( editor )\r
 122         {\r
 123                 var selection = editor.getSelection();\r
 124 \r
 125                 this.contents   = editor.getSnapshot();\r
 126                 this.bookmarks  = selection && selection.createBookmarks2( true );\r
 127 \r
 128                 // In IE, we need to remove the expando attributes.\r
 129                 if ( CKEDITOR.env.ie )\r
 130                         this.contents = this.contents.replace( /\s+_cke_expando=".*?"/g, '' );\r
 131         }\r
 132 \r
 133         Image.prototype =\r
 134         {\r
 135                 equals : function( otherImage, contentOnly )\r
 136                 {\r
 137                         if ( this.contents != otherImage.contents )\r
 138                                 return false;\r
 139 \r
 140                         if ( contentOnly )\r
 141                                 return true;\r
 142 \r
 143                         var bookmarksA = this.bookmarks,\r
 144                                 bookmarksB = otherImage.bookmarks;\r
 145 \r
 146                         if ( bookmarksA || bookmarksB )\r
 147                         {\r
 148                                 if ( !bookmarksA || !bookmarksB || bookmarksA.length != bookmarksB.length )\r
 149                                         return false;\r
 150 \r
 151                                 for ( var i = 0 ; i < bookmarksA.length ; i++ )\r
 152                                 {\r
 153                                         var bookmarkA = bookmarksA[ i ],\r
 154                                                 bookmarkB = bookmarksB[ i ];\r
 155 \r
 156                                         if (\r
 157                                                 bookmarkA.startOffset != bookmarkB.startOffset ||\r
 158                                                 bookmarkA.endOffset != bookmarkB.endOffset ||\r
 159                                                 !CKEDITOR.tools.arrayCompare( bookmarkA.start, bookmarkB.start ) ||\r
 160                                                 !CKEDITOR.tools.arrayCompare( bookmarkA.end, bookmarkB.end ) )\r
 161                                         {\r
 162                                                 return false;\r
 163                                         }\r
 164                                 }\r
 165                         }\r
 166 \r
 167                         return true;\r
 168                 }\r
 169         };\r
 170 \r
 171         /**\r
 172          * @constructor Main logic for Redo/Undo feature.\r
 173          */\r
 174         function UndoManager( editor )\r
 175         {\r
 176                 this.editor = editor;\r
 177 \r
 178                 // Reset the undo stack.\r
 179                 this.reset();\r
 180         }\r
 181 \r
 182         UndoManager.prototype =\r
 183         {\r
 184                 /**\r
 185                  * Process undo system regard keystrikes.\r
 186                  * @param {CKEDITOR.dom.event} event\r
 187                  */\r
 188                 type : function( event )\r
 189                 {\r
 190                         var keystroke = event && event.data.getKeystroke(),\r
 191 \r
 192                                 // Backspace, Delete\r
 193                                 modifierCodes = { 8:1, 46:1 },\r
 194                                 // Keystrokes which will modify the contents.\r
 195                                 isModifier = keystroke in modifierCodes,\r
 196                                 wasModifier = this.lastKeystroke in modifierCodes,\r
 197                                 lastWasSameModifier = isModifier && keystroke == this.lastKeystroke,\r
 198 \r
 199                                 // Arrows: L, T, R, B\r
 200                                 resetTypingCodes = { 37:1, 38:1, 39:1, 40:1 },\r
 201                                 // Keystrokes which navigation through contents.\r
 202                                 isReset = keystroke in resetTypingCodes,\r
 203                                 wasReset = this.lastKeystroke in resetTypingCodes,\r
 204 \r
 205                                 // Keystrokes which just introduce new contents.\r
 206                                 isContent = ( !isModifier && !isReset ),\r
 207 \r
 208                                 // Create undo snap for every different modifier key.\r
 209                                 modifierSnapshot = ( isModifier && !lastWasSameModifier ),\r
 210                                 // Create undo snap on the following cases:\r
 211                                 // 1. Just start to type.\r
 212                                 // 2. Typing some content after a modifier.\r
 213                                 // 3. Typing some content after make a visible selection.\r
 214                                 startedTyping = !this.typing\r
 215                                         || ( isContent && ( wasModifier || wasReset ) );\r
 216 \r
 217                         if ( startedTyping || modifierSnapshot )\r
 218                         {\r
 219                                 var beforeTypeImage = new Image( this.editor );\r
 220 \r
 221                                 // Use setTimeout, so we give the necessary time to the\r
 222                                 // browser to insert the character into the DOM.\r
 223                                 CKEDITOR.tools.setTimeout( function()\r
 224                                         {\r
 225                                                 var currentSnapshot = this.editor.getSnapshot();\r
 226 \r
 227                                                 // In IE, we need to remove the expando attributes.\r
 228                                                 if ( CKEDITOR.env.ie )\r
 229                                                         currentSnapshot = currentSnapshot.replace( /\s+_cke_expando=".*?"/g, '' );\r
 230 \r
 231                                                 if ( beforeTypeImage.contents != currentSnapshot )\r
 232                                                 {\r
 233                                                         // This's a special save, with specified snapshot\r
 234                                                         // and without auto 'fireChange'.\r
 235                                                         if ( !this.save( false, beforeTypeImage, false ) )\r
 236                                                                 // Drop future snapshots.\r
 237                                                                 this.snapshots.splice( this.index + 1, this.snapshots.length - this.index - 1 );\r
 238 \r
 239                                                         this.hasUndo = true;\r
 240                                                         this.hasRedo = false;\r
 241 \r
 242                                                         this.typesCount = 1;\r
 243                                                         this.modifiersCount = 1;\r
 244 \r
 245                                                         this.onChange();\r
 246                                                 }\r
 247                                         },\r
 248                                         0, this\r
 249                                 );\r
 250                         }\r
 251 \r
 252                         this.lastKeystroke = keystroke;\r
 253                         // Create undo snap after typed too much (over 25 times).\r
 254                         if ( isModifier )\r
 255                         {\r
 256                                 this.typesCount = 0;\r
 257                                 this.modifiersCount++;\r
 258 \r
 259                                 if ( this.modifiersCount > 25 )\r
 260                                 {\r
 261                                         this.save();\r
 262                                         this.modifiersCount = 1;\r
 263                                 }\r
 264                         }\r
 265                         else if ( !isReset )\r
 266                         {\r
 267                                 this.modifiersCount = 0;\r
 268                                 this.typesCount++;\r
 269 \r
 270                                 if ( this.typesCount > 25 )\r
 271                                 {\r
 272                                         this.save();\r
 273                                         this.typesCount = 1;\r
 274                                 }\r
 275                         }\r
 276 \r
 277                         this.typing = true;\r
 278                 },\r
 279 \r
 280                 reset : function()      // Reset the undo stack.\r
 281                 {\r
 282                         /**\r
 283                          * Remember last pressed key.\r
 284                          */\r
 285                         this.lastKeystroke = 0;\r
 286 \r
 287                         /**\r
 288                          * Stack for all the undo and redo snapshots, they're always created/removed\r
 289                          * in consistency.\r
 290                          */\r
 291                         this.snapshots = [];\r
 292 \r
 293                         /**\r
 294                          * Current snapshot history index.\r
 295                          */\r
 296                         this.index = -1;\r
 297 \r
 298                         this.limit = this.editor.config.undoStackSize;\r
 299 \r
 300                         this.currentImage = null;\r
 301 \r
 302                         this.hasUndo = false;\r
 303                         this.hasRedo = false;\r
 304 \r
 305                         this.resetType();\r
 306                 },\r
 307 \r
 308                 /**\r
 309                  * Reset all states about typing.\r
 310                  * @see  UndoManager.type\r
 311                  */\r
 312                 resetType : function()\r
 313                 {\r
 314                         this.typing = false;\r
 315                         delete this.lastKeystroke;\r
 316                         this.typesCount = 0;\r
 317                         this.modifiersCount = 0;\r
 318                 },\r
 319                 fireChange : function()\r
 320                 {\r
 321                         this.hasUndo = !!this.getNextImage( true );\r
 322                         this.hasRedo = !!this.getNextImage( false );\r
 323                         // Reset typing\r
 324                         this.resetType();\r
 325                         this.onChange();\r
 326                 },\r
 327 \r
 328                 /**\r
 329                  * Save a snapshot of document image for later retrieve.\r
 330                  */\r
 331                 save : function( onContentOnly, image, autoFireChange )\r
 332                 {\r
 333                         var snapshots = this.snapshots;\r
 334 \r
 335                         // Get a content image.\r
 336                         if ( !image )\r
 337                                 image = new Image( this.editor );\r
 338 \r
 339                         // Check if this is a duplicate. In such case, do nothing.\r
 340                         if ( this.currentImage && image.equals( this.currentImage, onContentOnly ) )\r
 341                                 return false;\r
 342 \r
 343                         // Drop future snapshots.\r
 344                         snapshots.splice( this.index + 1, snapshots.length - this.index - 1 );\r
 345 \r
 346                         // If we have reached the limit, remove the oldest one.\r
 347                         if ( snapshots.length == this.limit )\r
 348                                 snapshots.shift();\r
 349 \r
 350                         // Add the new image, updating the current index.\r
 351                         this.index = snapshots.push( image ) - 1;\r
 352 \r
 353                         this.currentImage = image;\r
 354 \r
 355                         if ( autoFireChange !== false )\r
 356                                 this.fireChange();\r
 357                         return true;\r
 358                 },\r
 359 \r
 360                 restoreImage : function( image )\r
 361                 {\r
 362                         this.editor.loadSnapshot( image.contents );\r
 363 \r
 364                         if ( image.bookmarks )\r
 365                                 this.editor.getSelection().selectBookmarks( image.bookmarks );\r
 366                         else if ( CKEDITOR.env.ie )\r
 367                         {\r
 368                                 // IE BUG: If I don't set the selection to *somewhere* after setting\r
 369                                 // document contents, then IE would create an empty paragraph at the bottom\r
 370                                 // the next time the document is modified.\r
 371                                 var $range = this.editor.document.getBody().$.createTextRange();\r
 372                                 $range.collapse( true );\r
 373                                 $range.select();\r
 374                         }\r
 375 \r
 376                         this.index = image.index;\r
 377 \r
 378                         this.currentImage = image;\r
 379 \r
 380                         this.fireChange();\r
 381                 },\r
 382 \r
 383                 // Get the closest available image.\r
 384                 getNextImage : function( isUndo )\r
 385                 {\r
 386                         var snapshots = this.snapshots,\r
 387                                 currentImage = this.currentImage,\r
 388                                 image, i;\r
 389 \r
 390                         if ( currentImage )\r
 391                         {\r
 392                                 if ( isUndo )\r
 393                                 {\r
 394                                         for ( i = this.index - 1 ; i >= 0 ; i-- )\r
 395                                         {\r
 396                                                 image = snapshots[ i ];\r
 397                                                 if ( !currentImage.equals( image, true ) )\r
 398                                                 {\r
 399                                                         image.index = i;\r
 400                                                         return image;\r
 401                                                 }\r
 402                                         }\r
 403                                 }\r
 404                                 else\r
 405                                 {\r
 406                                         for ( i = this.index + 1 ; i < snapshots.length ; i++ )\r
 407                                         {\r
 408                                                 image = snapshots[ i ];\r
 409                                                 if ( !currentImage.equals( image, true ) )\r
 410                                                 {\r
 411                                                         image.index = i;\r
 412                                                         return image;\r
 413                                                 }\r
 414                                         }\r
 415                                 }\r
 416                         }\r
 417 \r
 418                         return null;\r
 419                 },\r
 420 \r
 421                 /**\r
 422                  * Check the current redo state.\r
 423                  * @return {Boolean} Whether the document has previous state to\r
 424                  *              retrieve.\r
 425                  */\r
 426                 redoable : function()\r
 427                 {\r
 428                         return this.enabled && this.hasRedo;\r
 429                 },\r
 430 \r
 431                 /**\r
 432                  * Check the current undo state.\r
 433                  * @return {Boolean} Whether the document has future state to restore.\r
 434                  */\r
 435                 undoable : function()\r
 436                 {\r
 437                         return this.enabled && this.hasUndo;\r
 438                 },\r
 439 \r
 440                 /**\r
 441                  * Perform undo on current index.\r
 442                  */\r
 443                 undo : function()\r
 444                 {\r
 445                         if ( this.undoable() )\r
 446                         {\r
 447                                 this.save( true );\r
 448 \r
 449                                 var image = this.getNextImage( true );\r
 450                                 if ( image )\r
 451                                         return this.restoreImage( image ), true;\r
 452                         }\r
 453 \r
 454                         return false;\r
 455                 },\r
 456 \r
 457                 /**\r
 458                  * Perform redo on current index.\r
 459                  */\r
 460                 redo : function()\r
 461                 {\r
 462                         if ( this.redoable() )\r
 463                         {\r
 464                                 // Try to save. If no changes have been made, the redo stack\r
 465                                 // will not change, so it will still be redoable.\r
 466                                 this.save( true );\r
 467 \r
 468                                 // If instead we had changes, we can't redo anymore.\r
 469                                 if ( this.redoable() )\r
 470                                 {\r
 471                                         var image = this.getNextImage( false );\r
 472                                         if ( image )\r
 473                                                 return this.restoreImage( image ), true;\r
 474                                 }\r
 475                         }\r
 476 \r
 477                         return false;\r
 478                 }\r
 479         };\r
 480 })();\r
 481 \r
 482 /**\r
 483  * The number of undo steps to be saved. The higher this setting value the more\r
 484  * memory is used for it.\r
 485  * @type Number\r
 486  * @default 20\r
 487  * @example\r
 488  * config.undoStackSize = 50;\r
 489  */\r
 490 CKEDITOR.config.undoStackSize = 20;\r