Mercurial
annotate mrjunejune/src/notes/editor.js @ 202:b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Sun, 15 Feb 2026 09:12:57 -0800 |
| parents | 6cdee35a7ba9 |
| children |
| rev | line source |
|---|---|
| 201 | 1 let editor = null; |
| 2 let currentNoteId = 'index'; | |
| 3 | |
| 4 function getAuthToken() { | |
| 5 return localStorage.getItem('notes-auth-token'); | |
| 6 } | |
| 7 | |
| 8 function requireAuth() { | |
| 9 if (!getAuthToken()) { | |
| 10 const returnUrl = encodeURIComponent(window.location.pathname); | |
| 11 window.location.href = '/notes/login?return=' + returnUrl; | |
| 12 return false; | |
| 13 } | |
| 14 return true; | |
| 15 } | |
| 16 | |
| 17 function logout() { | |
| 18 localStorage.removeItem('notes-auth-token'); | |
| 19 window.location.href = '/notes/login'; | |
| 20 } | |
| 21 | |
| 22 function getNoteIdFromPath() { | |
| 23 const path = window.location.pathname; | |
| 24 const match = path.match(/^\/notes\/(.+)$/); | |
| 25 if (match && match[1] && match[1] !== 'login') { | |
| 26 return decodeURIComponent(match[1]); | |
| 27 } | |
| 28 return 'index'; | |
| 29 } | |
| 30 | |
| 31 function showNewNoteDialog() { | |
| 32 document.getElementById('new-note-dialog').classList.add('show'); | |
| 33 document.getElementById('new-note-id').focus(); | |
| 34 } | |
| 35 | |
| 36 function hideNewNoteDialog() { | |
| 37 document.getElementById('new-note-dialog').classList.remove('show'); | |
| 38 document.getElementById('new-note-id').value = ''; | |
| 39 } | |
| 40 | |
| 41 function createNewNote() { | |
| 42 let noteId = document.getElementById('new-note-id').value.trim(); | |
| 43 if (!noteId) return; | |
| 44 | |
| 45 // Sanitize note ID | |
| 46 noteId = noteId.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-'); | |
| 47 | |
| 48 hideNewNoteDialog(); | |
| 49 window.location.href = '/notes/' + encodeURIComponent(noteId); | |
| 50 } | |
| 51 | |
| 52 // Handle Enter key in new note dialog | |
| 53 document.getElementById('new-note-id').addEventListener('keydown', function(e) { | |
| 54 if (e.key === 'Enter') { | |
| 55 e.preventDefault(); | |
| 56 createNewNote(); | |
| 57 } | |
| 58 if (e.key === 'Escape') { | |
| 59 hideNewNoteDialog(); | |
| 60 } | |
| 61 }); | |
| 62 | |
| 63 // Close dialog on backdrop click | |
| 64 document.getElementById('new-note-dialog').addEventListener('click', function(e) { | |
| 65 if (e.target === this) { | |
| 66 hideNewNoteDialog(); | |
| 67 } | |
| 68 }); | |
| 69 | |
| 70 async function uploadFile(file) { | |
| 71 const token = getAuthToken(); | |
| 72 if (!token) { | |
| 73 throw new Error('Not authenticated'); | |
| 74 } | |
| 75 | |
| 76 // 1. Create media record | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
77 const createResponse = await fetch('/api/media/create', { |
| 201 | 78 method: 'POST', |
| 79 headers: { | |
| 80 'Authorization': 'Bearer ' + token, | |
| 81 'Content-Type': 'application/json' | |
| 82 }, | |
| 83 body: JSON.stringify({ | |
| 84 filename: file.name, | |
| 85 content_type: file.type | |
| 86 }) | |
| 87 }); | |
| 88 | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
89 if (!createResponse.ok) { |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
90 const error = await createResponse.json().catch(() => ({})); |
| 201 | 91 throw new Error(error.error || 'Failed to create media record'); |
| 92 } | |
| 93 | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
94 const data = await createResponse.json(); |
| 201 | 95 |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
96 // 2. Upload file directly to S3 |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
97 const uploadResponse = await fetch(data.upload_url, { |
| 201 | 98 method: 'PUT', |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
99 headers: { |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
100 'Content-Type': file.type |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
101 }, |
| 201 | 102 body: file |
| 103 }); | |
| 104 | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
105 if (!uploadResponse.ok) { |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
106 throw new Error('Failed to upload file to S3'); |
| 201 | 107 } |
| 108 | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
109 // 3. Mark as uploaded (triggers processing for images) |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
110 await fetch(`/api/media/${data.media_id}/uploaded`, { |
| 201 | 111 method: 'POST', |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
112 headers: { |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
113 'Authorization': 'Bearer ' + token |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
114 } |
| 201 | 115 }); |
| 116 | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
117 // 4. Poll for images, return immediately for non-images |
| 201 | 118 if (file.type.startsWith('image/')) { |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
119 return await pollForProcessedImage(data.media_id, token); |
| 201 | 120 } else { |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
121 // For non-images, construct the public URL |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
122 const publicUrl = data.upload_url.split('?')[0]; // Remove query params |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
123 return { url: publicUrl }; |
| 201 | 124 } |
| 125 } | |
| 126 | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
127 async function pollForProcessedImage(mediaId, token) { |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
128 const maxAttempts = 60; // 2 minutes max (60 * 2 seconds) |
| 201 | 129 |
| 130 for (let i = 0; i < maxAttempts; i++) { | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
131 await new Promise(resolve => setTimeout(resolve, 2000)); // 2 second interval |
| 201 | 132 |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
133 const statusResponse = await fetch(`/api/media/${mediaId}/status`, { |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
134 headers: { |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
135 'Authorization': 'Bearer ' + token |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
136 } |
| 201 | 137 }); |
| 138 | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
139 if (!statusResponse.ok) { |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
140 console.warn('Status check failed, retrying...'); |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
141 continue; |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
142 } |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
143 |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
144 const statusData = await statusResponse.json(); |
| 201 | 145 |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
146 if (statusData.status === 'finished') { |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
147 return { url: statusData.processed_url }; |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
148 } else if (statusData.status === 'error') { |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
149 throw new Error(statusData.error_message || 'Processing failed'); |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
150 } |
|
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
151 // Status is 'uploaded' or 'processing', continue polling |
| 201 | 152 } |
| 153 | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
154 throw new Error('Processing timeout after 2 minutes'); |
| 201 | 155 } |
| 156 | |
| 157 async function saveContent(content) { | |
| 158 const token = getAuthToken(); | |
| 159 if (!token) return; | |
| 160 | |
| 161 const response = await fetch('/api/editor/save', { | |
| 162 method: 'POST', | |
| 163 headers: { | |
| 164 'Authorization': 'Bearer ' + token, | |
| 165 'Content-Type': 'application/json' | |
| 166 }, | |
| 167 body: JSON.stringify({ | |
| 168 doc_id: currentNoteId, | |
| 169 content: content | |
| 170 }) | |
| 171 }); | |
| 172 | |
| 173 if (!response.ok) { | |
| 174 throw new Error('Failed to save'); | |
| 175 } | |
| 176 } | |
| 177 | |
| 178 async function loadNote(noteId) { | |
| 179 const token = getAuthToken(); | |
| 180 if (!token) return; | |
| 181 | |
| 182 try { | |
| 183 const response = await fetch('/api/editor/load/' + encodeURIComponent(noteId), { | |
| 184 headers: { 'Authorization': 'Bearer ' + token } | |
| 185 }); | |
| 186 | |
| 187 if (response.ok) { | |
| 188 const data = await response.json(); | |
| 189 editor.setContent(data.content || ''); | |
| 190 } | |
| 191 } catch (error) { | |
| 192 console.error('Failed to load note:', error); | |
| 193 } | |
| 194 } | |
| 195 | |
| 196 // Initialize | |
| 197 document.addEventListener('DOMContentLoaded', function() { | |
| 198 if (!requireAuth()) return; | |
| 199 | |
| 200 currentNoteId = getNoteIdFromPath(); | |
| 201 document.getElementById('note-id-display').textContent = currentNoteId; | |
| 202 | |
| 203 // Update page title | |
| 204 document.title = currentNoteId + ' | Notes'; | |
| 205 | |
| 206 editor = RichEditor.init('editor-container', { | |
| 207 uploadCallback: uploadFile, | |
| 208 saveCallback: saveContent, | |
| 209 debounceMs: 1500, | |
| 210 placeholder: 'Start writing... (paste images, drag files, or use /upload)\n\nTip: Click "+ New Note" to create linked notes.' | |
| 211 }); | |
| 212 | |
| 213 loadNote(currentNoteId); | |
| 214 }); | |
|
202
b9b184b3303c
[Notes] Images get processed and it is properly fetched. Thank you.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
215 |