| | 1 | /* |
| | 2 | * Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved. |
| | 3 | * For licensing, see LICENSE.html or http://ckeditor.com/license |
| | 4 | */ |
| | 5 | |
| | 6 | /** |
| | 7 | * @fileOverview Undo/Redo system for saving shapshot for document modification |
| | 8 | * and other recordable changes. |
| | 9 | * @see #2763, #2, #915 |
| | 10 | * @description |
| | 11 | * <p> |
| | 12 | * <span style="border-collapse: separate; color: rgb(0, 0, 0); |
| | 13 | * font-family: Verdana; font-size: 13px; font-style: normal; font-variant: |
| | 14 | * normal; font-weight: normal; letter-spacing: normal; line-height: |
| | 15 | * normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: |
| | 16 | * normal; widows: 2; word-spacing: 0px;" class="Apple-style-span"> |
| | 17 | * <p> |
| | 18 | * Undo/Redo system need to be ported from v2, the features could be summed |
| | 19 | * up as below: |
| | 20 | * </p> |
| | 21 | * <ul> |
| | 22 | * <li>Undo system restore/retrieve document status from both selection |
| | 23 | * and content</li> |
| | 24 | * <li>All commands that modify the document could support undo/redo |
| | 25 | * feature,but each command has chance to optionaly declare whether would |
| | 26 | * hooked with undo systemwhen they're registed.</li> |
| | 27 | * </ul> |
| | 28 | * <blockquote><blockquote> |
| | 29 | * <p> |
| | 30 | * <strong>Note</strong>: Since from v3 all keystroke will pre-bind to |
| | 31 | * command, so keystrokes also hooked with undo system through command |
| | 32 | * interface. |
| | 33 | * </p> |
| | 34 | * </blockquote></blockquote> |
| | 35 | * <ul> |
| | 36 | * <li>Undo feature itself performed as a command, A button plugin is |
| | 37 | * required for interfacing this command to end user and keystroke pair of |
| | 38 | * 'Ctrl-Z' and 'Ctrl-Y' too.</li> |
| | 39 | * <li>Support empty/reset all the undo snapshots for clean up, and A |
| | 40 | * button plugin is required for interfacing this<span |
| | 41 | * class="Apple-converted-space"> </span><i>reset</i></li> |
| | 42 | * <li>snapshot for undo system could be recorded in two forms: |
| | 43 | * <ol> |
| | 44 | * <li>One snapshot for each record action, this apply for almost every |
| | 45 | * functional commands, but a few special keystroke commands that also |
| | 46 | * being recorded in this way including: |
| | 47 | * <ol style="list-style-type: lower-alpha;" class="loweralpha"> |
| | 48 | * <li>'Enter'</li> |
| | 49 | * <li>'ShiftEnter'</li> |
| | 50 | * <li>'CtrlBackspace'</li> |
| | 51 | * <li>'Delete'</li> |
| | 52 | * <li>'Tab'</li> |
| | 53 | * <li>'Ctrl-X'</li> |
| | 54 | * <li>'Ctrl-V'</li> |
| | 55 | * </ol> |
| | 56 | * </li> |
| | 57 | * <li>One snapshot for a serials of record actions, this apply for most |
| | 58 | * keystroke commands.</li> |
| | 59 | * </ol> |
| | 60 | * </li> |
| | 61 | * </ul> |
| | 62 | * </span> |
| | 63 | * </p> |
| | 64 | */ |
| | 65 | CKEDITOR.plugins.add( 'undoredo' , |
| | 66 | /** |
| | 67 | * @implements CKEDITOR.pluginDefinition The undo/redo feature for wysiwygarea |
| | 68 | * mode |
| | 69 | */ |
| | 70 | { |
| | 71 | |
| | 72 | requires : [ 'selection', 'wysiwygarea' ], |
| | 73 | beforeInit : function ( editor ) |
| | 74 | { |
| | 75 | |
| | 76 | var urm = new UndoRedoManager( editor ); |
| | 77 | function recordCommand ( evt ) |
| | 78 | { |
| | 79 | var event /* {FCKEDITOR.command.Event} */= evt.data; |
| | 80 | if ( event.command.supportUndoRedo !== false // ingore mode change |
| | 81 | // command |
| | 82 | && event.name !== 'source' |
| | 83 | && event.name !== 'wysiwyg' |
| | 84 | && urm.enabled ) |
| | 85 | { |
| | 86 | urm.save( evt.name === 'beforeCommandExec' ? true : false ); |
| | 87 | } |
| | 88 | } |
| | 89 | |
| | 90 | editor.on( 'beforeCommandExec' , recordCommand ); |
| | 91 | editor.on( 'afterCommandExec' , recordCommand ); |
| | 92 | |
| | 93 | // sensitive to mode change, only appliable for 'wysiwyg' mode |
| | 94 | editor.on( 'mode' , function ( currentMode ) |
| | 95 | { |
| | 96 | urm.enabled = currentMode.data === 'wysiwyg'; |
| | 97 | } ); |
| | 98 | |
| | 99 | editor.addCommand( 'undo' , |
| | 100 | /** |
| | 101 | * @implements CKEDITOR.commandDefinition Rollback to last modification |
| | 102 | * of this document |
| | 103 | */ |
| | 104 | { |
| | 105 | |
| | 106 | exec : function() { |
| | 107 | if (urm.undo()) { |
| | 108 | this.fire('AfterUndo'); |
| | 109 | // TODO: fire 'selectionchange' |
| | 110 | } |
| | 111 | }, |
| | 112 | supportUndoRedo : false |
| | 113 | } ); |
| | 114 | |
| | 115 | editor.addCommand( 'redo' , |
| | 116 | /** |
| | 117 | * @implements CKEDITOR.commandDefinition Retrieve to next modification |
| | 118 | * of this document |
| | 119 | */ |
| | 120 | { |
| | 121 | exec : function() { |
| | 122 | if (urm.redo()) { |
| | 123 | this.fire('AfterRedo'); |
| | 124 | // TODO: fire 'selectionchange' |
| | 125 | } |
| | 126 | }, |
| | 127 | supportUndoRedo : false |
| | 128 | } ); |
| | 129 | } |
| | 130 | } ); |
| | 131 | |
| | 132 | /** |
| | 133 | * @constructor Main logic for Redo/Undo feature |
| | 134 | * @related FCKUndo in v2 |
| | 135 | */ |
| | 136 | function UndoRedoManager ( editor ) |
| | 137 | { |
| | 138 | |
| | 139 | /** |
| | 140 | * @field Whether undo system is usable decided by envoriment |
| | 141 | */ |
| | 142 | this.enabled = false; |
| | 143 | |
| | 144 | var UNDO_NUM_LIMIT = 20; |
| | 145 | |
| | 146 | /** |
| | 147 | * Stack for all the undo and redo snapshots, they're always created/removed |
| | 148 | * in consistency. |
| | 149 | * |
| | 150 | * @type {Array<DocumentImage>} |
| | 151 | * |
| | 152 | */ |
| | 153 | var undoSnaps = [] , redoSnaps = []; |
| | 154 | |
| | 155 | /** |
| | 156 | * Current snapshot history index |
| | 157 | */ |
| | 158 | var index = 0; // First capture start from 1 |
| | 159 | |
| | 160 | /** |
| | 161 | * @private Get the current blockediting mode of this editor |
| | 162 | * @param editor |
| | 163 | * @param mode |
| | 164 | * @return |
| | 165 | */ |
| | 166 | function getMode ( mode ) |
| | 167 | { |
| | 168 | return editor._.modes && editor._.modes[ mode || editor.mode ]; |
| | 169 | } |
| | 170 | |
| | 171 | /** |
| | 172 | * @constructor DocumentImage - A snapshot image which represent the current |
| | 173 | * document status. |
| | 174 | */ |
| | 175 | function DocumentImage ( ) |
| | 176 | { |
| | 177 | |
| | 178 | var bms , ranges , cWithBm , c; |
| | 179 | |
| | 180 | c = getMode( 'wysiwyg' ).getSnapshotData(); |
| | 181 | bms = editor.document.getSelection().createBookmarks( true ); |
| | 182 | ranges = editor.document.getSelection().getRanges(); // Get ranges |
| | 183 | // from cache |
| | 184 | cWithBm = getMode( 'wysiwyg' ).getSnapshotData() // Get content along |
| | 185 | // with bookmark |
| | 186 | editor.document.getSelection().selectBookmarks( bms ); |
| | 187 | // restore |
| | 188 | // selection by |
| | 189 | // the bookmark |
| | 190 | // and we |
| | 191 | // also |
| | 192 | // destroy the nodes in document |
| | 193 | return { |
| | 194 | 'content' : /** {String} original document string */ |
| | 195 | c, |
| | 196 | 'dirtyContent' : |
| | 197 | /** |
| | 198 | * {String} document content string with bookmarks |
| | 199 | */ |
| | 200 | cWithBm, |
| | 201 | 'bookmark' /** {Array<CKEDITOR.dom.range.Bookmark>} */ |
| | 202 | :bms, |
| | 203 | equals : |
| | 204 | /** |
| | 205 | * Compare if two document snapshot are the same, this is only |
| | 206 | * content comparison with bookmarks striped. ( |
| | 207 | * |
| | 208 | * @img {DocumentImage} The other image to compare with |
| | 209 | */ |
| | 210 | function ( img ) |
| | 211 | { |
| | 212 | return this.content == img.content; |
| | 213 | } |
| | 214 | } |
| | 215 | } |
| | 216 | |
| | 217 | /** |
| | 218 | * @method Save a snapshot of document image for later retrieve, content |
| | 219 | * being saved as raw html string, while selection saved as a |
| | 220 | * lightweight bookmark. |
| | 221 | */ |
| | 222 | this.save = function ( isFront ) |
| | 223 | { |
| | 224 | var sns = isFront ? undoSnaps : redoSnaps; |
| | 225 | |
| | 226 | if ( index == UNDO_NUM_LIMIT ) |
| | 227 | { |
| | 228 | sns.unshift(); // Die out earlier ones. |
| | 229 | } |
| | 230 | |
| | 231 | sns.splice( index , sns.length - index ); // Drop older snaps |
| | 232 | |
| | 233 | var img = new DocumentImage(); |
| | 234 | if ( sns.length && img.equals( sns[ sns.length - 1 ] ) ) // duplicate |
| | 235 | // examination |
| | 236 | return; |
| | 237 | |
| | 238 | sns.push( img ); |
| | 239 | |
| | 240 | if ( !isFront ) |
| | 241 | index++; // increase when command has been fully recorded. |
| | 242 | } |
| | 243 | |
| | 244 | function restoreImage ( index, isUndo ) |
| | 245 | { |
| | 246 | var img; |
| | 247 | img = isUndo ? undoSnaps[ index ] : redoSnaps[ index ]; |
| | 248 | if ( img.content ) |
| | 249 | { |
| | 250 | getMode( 'wysiwyg' ).loadSnapshotData( img.dirtyContent ); |
| | 251 | if ( img.bookmark ) |
| | 252 | { |
| | 253 | editor.document.getSelection().selectBookmarks( img.bookmark ); |
| | 254 | } |
| | 255 | } |
| | 256 | } |
| | 257 | |
| | 258 | /** |
| | 259 | * Check the current state of redo |
| | 260 | * |
| | 261 | * @return {Boolean} Whether the document has previous state to retrieve |
| | 262 | */ |
| | 263 | this.redoAble = function ( ) |
| | 264 | { |
| | 265 | return index < redoSnaps.length; |
| | 266 | } |
| | 267 | |
| | 268 | /** |
| | 269 | * Check the current state of undo |
| | 270 | * |
| | 271 | * @return {Boolean} Whether the document has future state to restore |
| | 272 | */ |
| | 273 | this.undoAble = function ( ) |
| | 274 | { |
| | 275 | return index > 0 |
| | 276 | } |
| | 277 | /** |
| | 278 | * Perform undo on current index. |
| | 279 | * |
| | 280 | * @method |
| | 281 | */ |
| | 282 | this.undo = function ( ) |
| | 283 | { |
| | 284 | if ( this.undoAble() ) |
| | 285 | { |
| | 286 | restoreImage( --index , true ); // retrieve previous one from undo |
| | 287 | // history |
| | 288 | } |
| | 289 | else |
| | 290 | return false; |
| | 291 | } |
| | 292 | |
| | 293 | /** |
| | 294 | * Perform redo on current index. |
| | 295 | * |
| | 296 | * @method |
| | 297 | */ |
| | 298 | this.redo = function ( ) |
| | 299 | { |
| | 300 | if ( this.redoAble() ) |
| | 301 | { |
| | 302 | restoreImage( index++ , false ); // retrieve next one from redo |
| | 303 | // history |
| | 304 | } |
| | 305 | else |
| | 306 | return false; |
| | 307 | } |
| | 308 | |
| | 309 | } |
