1/* DokuWiki MoaiEditor Draft.js file 2 Version : 0.5 (May 5, 2026) 3 Author : MoaiTools <info@moaitools.org> 4 License : GPL 3 (http://www.gnu.org/licenses/gpl.html) */ 5 6/* This class displays a visual indicator whenever a draft is saved. 7 8 Informing the user whenever a draft is saved 9 ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ 10 In the vanilla editor whenever a draft is saved a message like this appears: 11 'Draft autosaved on 2026/04/01 13:36'. 12 13 We show an indicator on the SAVE button itself in order not to use extra 14 screen space. The button's tooltip shows how long ago this draft was saved. 15 16 Fixing the draft save mechanism (not done yet) 17 ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ 18 Problem 1: Not getting triggered 19 20 'lib/scripts/locktimer.js' should save drafts every 30 seconds whenever the 21 user changes the document. However this mechanism does not get triggered in 22 several cases, for example: 23 - When pressing backspace 24 - When pressing tab 25 - When pasting text via mouse 26 - When pasting text via ctrl+v 27 - When adding text via toolbar (e.g. header, bold, wrap) 28 29 Problem 2: Not informing the user of draft save errors 30 31 Whenever the ajax request to save the draft and extend the lock fails, the 32 user should be notified (see how Bookstack does it). 33 34 dw_locktimer.refresh > jQuery.post() should get a .fail() callback. 35 36 Probably Dokuwiki should call 'dw_locktimer.refresh with an an interval of 30 37 seconds. Also, it should not save drafts if the document has not changed. 38 Apparently the ajax call should be made anyway to refresh the lock. 39 40 Structure of the data received from PHP by 'dw_locktimer.refreshed': 41 lock : 1 42 errors : [] 43 draft : "Draft autosaved on 2026/04/25 15:51" 44*/ 45MoaiEditor.Draft = class { 46 47 constructor () { 48 49 // Variables 50 this.lastSave = null; 51 //this.lastText = moaiEditor.layout.textarea.value; 52 53 // Add a green dot to the Save button 54 this.button = moaiEditor.buttons.save; 55 this.container = moaiEditor.createHTML('<div id="moaied__draft_save_indicator"></div>'); 56 this.button.handle.appendChild(this.container); 57 this.dot = moaiEditor.createHTML('<div></div>'); 58 59 // Add a callback every time the draft is saved 60 dw_locktimer.addRefreshCallback(this.onDraftSave.bind(this)); 61 62 // Interval 63 this.interval = setInterval(this.onInterval.bind(this), 1000); 64 } 65 // ──────────────────────────────────── 66 onInterval() { 67 // Update tooltip every second 68 if (moaiEditor.layoutReady) { 69 var tooltip = ''; 70 if (this.lastSave) { 71 var dot = ''; 72 let elapsed = Math.round( (Date.now()-this.lastSave)/1000 ); 73 if (elapsed < 30) 74 dot = '<em></em>'; 75 var ago = elapsed+" seconds"; 76 if (elapsed > 90) 77 ago = Math.floor(elapsed/60)+" minute"; 78 if (elapsed > 119) 79 ago = Math.floor(elapsed/60)+" minutes"; 80 tooltip = '<br><hr>'+dot+'<i>A draft<br>was saved<br>'+ago+'<br>ago</i>'; 81 } 82 this.button.tooltips.draft = tooltip; 83 this.button.update(); 84 } 85 } 86 // ──────────────────────────────────── 87 onDraftSave(data) { 88 this.lastSave = Date.now(); 89 // Show the green dot when the draft is saved (only if the text has changed) 90 if (moaiEditor.layoutReady) { 91 this.dot.remove(); 92 this.dot = moaiEditor.createHTML('<div></div>'); 93 this.container.appendChild(this.dot); 94 } 95 } 96}; // End Class 97 98 99 100