Mercurial
annotate rich_editor/rich_editor.js @ 207:58d9b64d8dca
Updated deployment script to include sqlite3
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Sun, 15 Feb 2026 12:25:50 -0800 |
| parents | 240337164a80 |
| children | 5d3e116dd745 |
| rev | line source |
|---|---|
| 201 | 1 /** |
| 2 * Rich Editor | |
| 3 * ----------- | |
| 4 * A vanilla JavaScript rich text editor with: | |
| 5 * - Text formatting (h1-h6, paragraphs, lists) | |
| 6 * - Image/file upload via paste, drop, click, or /upload command | |
| 7 * - Debounced auto-save | |
| 8 * - Generic callback functions for uploads and saves | |
| 9 * | |
| 10 * Usage: | |
| 11 * const editor = RichEditor.init('editor-container', { | |
| 12 * uploadCallback: async (file) => { return { url: '...', key: '...' }; }, | |
| 13 * saveCallback: async (content) => { console.log('Saved:', content); }, | |
| 14 * debounceMs: 1000, | |
| 15 * placeholder: 'Start writing...' | |
| 16 * }); | |
| 17 */ | |
| 18 | |
| 19 const RichEditor = (function() { | |
| 20 'use strict'; | |
| 21 | |
| 22 const DEFAULT_OPTIONS = { | |
| 23 uploadCallback: null, | |
| 24 saveCallback: null, | |
| 25 debounceMs: 1000, | |
| 26 placeholder: 'Start writing... (Use /upload to insert files)', | |
| 27 cloudFrontUrl: '' | |
| 28 }; | |
| 29 | |
| 30 function debounce(func, wait) { | |
| 31 let timeout; | |
| 32 return function executedFunction(...args) { | |
| 33 const later = () => { | |
| 34 clearTimeout(timeout); | |
| 35 func(...args); | |
| 36 }; | |
| 37 clearTimeout(timeout); | |
| 38 timeout = setTimeout(later, wait); | |
| 39 }; | |
| 40 } | |
| 41 | |
| 42 function createToolbar(editor) { | |
| 43 const toolbar = document.createElement('div'); | |
| 44 toolbar.className = 'rich-editor-toolbar'; | |
| 45 | |
| 46 const buttons = [ | |
|
204
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
47 { cmd: 'h1', label: '', title: 'Heading 1', icons: "/public/icons/h1.png" }, |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
48 { cmd: 'h2', label: '', title: 'Heading 2', icons: "/public/icons/h2.png" }, |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
49 { cmd: 'h3', label: '', title: 'Heading 3', icons: "/public/icons/h3.png" }, |
| 201 | 50 { cmd: 'p', label: '¶', title: 'Paragraph' }, |
| 51 { cmd: 'ul', label: '•', title: 'Bullet List' }, | |
| 52 { cmd: 'ol', label: '1.', title: 'Numbered List' }, | |
|
204
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
53 { cmd: 'bold', label: '', title: 'Bold', icons: "/public/icons/bold.png" }, |
| 201 | 54 { cmd: 'separator' }, |
|
204
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
55 { cmd: 'link', label: '', title: 'Insert Link', icons: "/public/icons/link.png" }, |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
56 { cmd: 'notelink', label: '', title: 'Link to Note', icons: "/public/icons/binder.png" }, |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
57 { cmd: 'upload', label: '', title: 'Upload File', icons: "/public/icons/clipy.png" }, |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
58 { cmd: 'separator' }, |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
59 { cmd: 'readonly', label: '', title: 'readonly', icons: "/public/icons/book.png" }, |
| 201 | 60 ]; |
| 61 | |
| 62 buttons.forEach(btn => { | |
| 63 if (btn.cmd === 'separator') { | |
| 64 const sep = document.createElement('span'); | |
| 65 sep.className = 'rich-editor-separator'; | |
| 66 toolbar.appendChild(sep); | |
| 67 return; | |
| 68 } | |
| 69 | |
| 70 const button = document.createElement('button'); | |
| 71 button.type = 'button'; | |
| 72 button.className = 'rich-editor-btn'; | |
|
204
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
73 if (btn.icons) |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
74 button.style.backgroundImage = `url("${btn.icons}")`; |
| 201 | 75 button.textContent = btn.label; |
| 76 button.title = btn.title; | |
| 77 button.dataset.cmd = btn.cmd; | |
| 78 | |
| 79 button.addEventListener('click', (e) => { | |
| 80 e.preventDefault(); | |
| 81 editor.execCommand(btn.cmd); | |
| 82 }); | |
| 83 | |
| 84 toolbar.appendChild(button); | |
| 85 }); | |
| 86 | |
| 87 return toolbar; | |
| 88 } | |
| 89 | |
| 90 function createStyles() { | |
| 91 if (document.getElementById('rich-editor-styles')) return; | |
| 92 | |
| 93 const style = document.createElement('style'); | |
| 94 style.id = 'rich-editor-styles'; | |
| 95 style.textContent = ` | |
| 96 .rich-editor-container { | |
| 97 border: 1px solid #ccc; | |
| 98 border-radius: 4px; | |
| 99 overflow: hidden; | |
| 100 } | |
| 101 | |
| 102 .rich-editor-toolbar { | |
| 103 display: flex; | |
| 104 flex-wrap: wrap; | |
| 105 gap: 4px; | |
| 106 padding: 8px; | |
| 107 background: #f5f5f5; | |
| 108 border-bottom: 1px solid #ccc; | |
| 109 } | |
| 110 | |
| 111 .rich-editor-btn { | |
| 112 padding: 6px 12px; | |
| 113 border: 1px solid #ccc; | |
| 114 border-radius: 4px; | |
| 115 background: #fff; | |
| 116 cursor: pointer; | |
| 117 font-size: 14px; | |
| 118 min-width: 32px; | |
|
204
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
119 background-repeat: no-repeat; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
120 background-position: center; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
121 background-size: 24px 24px; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
122 border: none; |
| 201 | 123 } |
| 124 | |
| 125 .rich-editor-btn:hover { | |
| 126 background: #e9e9e9; | |
|
204
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
127 background-repeat: no-repeat; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
128 background-position: center; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
129 background-size: 24px 24px; |
| 201 | 130 } |
| 131 | |
| 132 .rich-editor-btn:active { | |
| 133 background: #ddd; | |
|
204
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
134 background-repeat: no-repeat; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
135 background-position: center; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
136 background-size: 24px 24px; |
| 201 | 137 } |
| 138 | |
| 139 .rich-editor-separator { | |
| 140 width: 1px; | |
| 141 background: #ccc; | |
| 142 margin: 0 4px; | |
| 143 } | |
| 144 | |
| 145 .rich-editor-content { | |
| 146 min-height: 300px; | |
| 147 padding: 16px; | |
| 148 outline: none; | |
| 149 overflow-y: auto; | |
| 150 } | |
| 151 | |
| 152 .rich-editor-content:empty:before { | |
| 153 content: attr(data-placeholder); | |
| 154 color: #999; | |
| 155 pointer-events: none; | |
| 156 } | |
| 157 | |
| 158 .rich-editor-content img { | |
| 159 max-width: 100%; | |
| 160 height: auto; | |
| 161 border-radius: 4px; | |
| 162 margin: 8px 0; | |
|
206
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
163 cursor: pointer; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
164 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
165 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
166 .rich-editor-content img.selected { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
167 outline: 2px solid #0078ff; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
168 outline-offset: 2px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
169 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
170 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
171 .rich-editor-resize-wrapper { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
172 position: relative; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
173 display: inline-block; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
174 margin: 8px 0; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
175 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
176 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
177 .rich-editor-resize-handle { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
178 position: absolute; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
179 width: 12px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
180 height: 12px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
181 background: #0078ff; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
182 border: 2px solid white; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
183 border-radius: 50%; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
184 cursor: nwse-resize; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
185 z-index: 10; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
186 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
187 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
188 .rich-editor-resize-handle.nw { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
189 top: -6px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
190 left: -6px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
191 cursor: nwse-resize; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
192 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
193 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
194 .rich-editor-resize-handle.ne { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
195 top: -6px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
196 right: -6px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
197 cursor: nesw-resize; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
198 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
199 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
200 .rich-editor-resize-handle.sw { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
201 bottom: -6px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
202 left: -6px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
203 cursor: nesw-resize; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
204 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
205 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
206 .rich-editor-resize-handle.se { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
207 bottom: -6px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
208 right: -6px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
209 cursor: nwse-resize; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
210 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
211 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
212 .rich-editor-size-input { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
213 position: absolute; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
214 top: -35px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
215 left: 50%; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
216 transform: translateX(-50%); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
217 background: white; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
218 border: 1px solid #ccc; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
219 padding: 4px 8px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
220 border-radius: 4px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
221 font-size: 12px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
222 display: flex; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
223 gap: 8px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
224 align-items: center; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
225 box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
226 z-index: 11; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
227 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
228 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
229 .rich-editor-size-input input { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
230 width: 60px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
231 padding: 2px 4px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
232 border: 1px solid #ccc; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
233 border-radius: 2px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
234 font-size: 12px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
235 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
236 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
237 .rich-editor-size-input label { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
238 font-size: 11px; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
239 color: #666; |
| 201 | 240 } |
| 241 | |
| 242 .rich-editor-content a { | |
| 243 color: #0078ff; | |
| 244 text-decoration: none; | |
| 245 } | |
| 246 | |
| 247 .rich-editor-content a:hover { | |
| 248 text-decoration: underline; | |
| 249 } | |
| 250 | |
| 251 .rich-editor-content a.note-link { | |
| 252 background: #e8f4ff; | |
| 253 padding: 2px 6px; | |
| 254 border-radius: 3px; | |
| 255 } | |
| 256 | |
| 257 .rich-editor-content a.note-link:hover { | |
| 258 background: #d0e8ff; | |
| 259 } | |
| 260 | |
| 261 .rich-editor-content .upload-placeholder { | |
| 262 display: inline-block; | |
| 263 padding: 8px 16px; | |
| 264 background: #f0f0f0; | |
| 265 border-radius: 4px; | |
| 266 color: #666; | |
| 267 font-style: italic; | |
| 268 } | |
| 269 | |
| 270 .rich-editor-content .upload-placeholder.loading { | |
| 271 padding: 8px 16px; | |
| 272 background: #fffacd; | |
| 273 border-radius: 4px; | |
| 274 animation: pulse 1.5s ease-in-out infinite; | |
| 275 } | |
| 276 | |
| 277 @keyframes pulse { | |
| 278 0%, 100% { opacity: 1; } | |
| 279 50% { opacity: 0.6; } | |
| 280 } | |
| 281 | |
| 282 .rich-editor-upload-overlay { | |
| 283 position: absolute; | |
| 284 top: 0; | |
| 285 left: 0; | |
| 286 right: 0; | |
| 287 bottom: 0; | |
| 288 background: rgba(0, 120, 255, 0.1); | |
| 289 border: 2px dashed #0078ff; | |
| 290 display: flex; | |
| 291 align-items: center; | |
| 292 justify-content: center; | |
| 293 font-size: 18px; | |
| 294 color: #0078ff; | |
| 295 pointer-events: none; | |
| 296 z-index: 10; | |
| 297 } | |
| 298 | |
| 299 .rich-editor-status { | |
| 300 padding: 4px 8px; | |
| 301 font-size: 12px; | |
| 302 color: #666; | |
| 303 background: #f9f9f9; | |
| 304 border-top: 1px solid #eee; | |
| 305 } | |
| 306 | |
| 307 .rich-editor-file-input { | |
| 308 display: none; | |
| 309 } | |
|
204
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
310 |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
311 ol,ul { |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
312 padding: 16px; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
313 } |
| 201 | 314 `; |
| 315 document.head.appendChild(style); | |
| 316 } | |
| 317 | |
| 318 class Editor { | |
| 319 constructor(elementId, options) { | |
| 320 this.options = { ...DEFAULT_OPTIONS, ...options }; | |
| 321 this.container = document.getElementById(elementId); | |
|
206
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
322 this.state = { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
323 readOnly: false, |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
324 selectedImage: null, |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
325 resizing: false |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
326 }; |
| 201 | 327 |
| 328 if (!this.container) { | |
| 329 throw new Error(`Element with id "${elementId}" not found`); | |
| 330 } | |
| 331 | |
| 332 this.init(); | |
| 333 } | |
| 334 | |
| 335 init() { | |
| 336 createStyles(); | |
| 337 | |
| 338 // Create wrapper | |
| 339 this.wrapper = document.createElement('div'); | |
| 340 this.wrapper.className = 'rich-editor-container'; | |
| 341 this.wrapper.style.position = 'relative'; | |
| 342 | |
| 343 // Create toolbar | |
| 344 this.toolbar = createToolbar(this); | |
| 345 this.wrapper.appendChild(this.toolbar); | |
| 346 | |
| 347 // Create content area | |
| 348 this.content = document.createElement('div'); | |
| 349 this.content.className = 'rich-editor-content'; | |
| 350 this.content.contentEditable = true; | |
| 351 this.content.dataset.placeholder = this.options.placeholder; | |
| 352 this.wrapper.appendChild(this.content); | |
| 353 | |
| 354 // Create status bar | |
| 355 this.status = document.createElement('div'); | |
| 356 this.status.className = 'rich-editor-status'; | |
| 357 this.status.textContent = 'Ready'; | |
| 358 this.wrapper.appendChild(this.status); | |
| 359 | |
| 360 // Create hidden file input | |
| 361 this.fileInput = document.createElement('input'); | |
| 362 this.fileInput.type = 'file'; | |
| 363 this.fileInput.className = 'rich-editor-file-input'; | |
| 364 this.fileInput.multiple = true; | |
| 365 this.fileInput.accept = 'image/*,application/pdf,.doc,.docx,.txt'; | |
| 366 this.wrapper.appendChild(this.fileInput); | |
| 367 | |
| 368 // Add to container | |
| 369 this.container.appendChild(this.wrapper); | |
| 370 | |
| 371 // Setup event listeners | |
| 372 this.setupEvents(); | |
| 373 | |
| 374 // Setup debounced save | |
| 375 if (this.options.saveCallback) { | |
| 376 this.debouncedSave = debounce(() => { | |
| 377 this.save(); | |
| 378 }, this.options.debounceMs); | |
| 379 } | |
| 380 } | |
| 381 | |
| 382 setupEvents() { | |
| 383 // Input events for auto-save | |
| 384 this.content.addEventListener('input', () => { | |
| 385 if (this.debouncedSave) { | |
| 386 this.setStatus('Editing...'); | |
| 387 this.debouncedSave(); | |
| 388 } | |
| 389 }); | |
| 390 | |
| 391 // Handle paste | |
| 392 this.content.addEventListener('paste', (e) => { | |
| 393 const items = e.clipboardData?.items; | |
| 394 if (!items) return; | |
| 395 | |
| 396 for (const item of items) { | |
| 397 if (item.type.startsWith('image/') || item.kind === 'file') { | |
| 398 e.preventDefault(); | |
| 399 const file = item.getAsFile(); | |
| 400 if (file) this.uploadFile(file); | |
| 401 return; | |
| 402 } | |
| 403 } | |
| 404 }); | |
| 405 | |
| 406 // Handle drop | |
| 407 this.content.addEventListener('dragover', (e) => { | |
| 408 e.preventDefault(); | |
| 409 this.showDropOverlay(); | |
| 410 }); | |
| 411 | |
| 412 this.content.addEventListener('dragleave', (e) => { | |
| 413 e.preventDefault(); | |
| 414 this.hideDropOverlay(); | |
| 415 }); | |
| 416 | |
| 417 this.content.addEventListener('drop', (e) => { | |
| 418 e.preventDefault(); | |
| 419 this.hideDropOverlay(); | |
| 420 | |
| 421 const files = e.dataTransfer?.files; | |
| 422 if (files && files.length > 0) { | |
| 423 for (const file of files) { | |
| 424 this.uploadFile(file); | |
| 425 } | |
| 426 } | |
| 427 }); | |
| 428 | |
| 429 // Handle /upload command | |
| 430 this.content.addEventListener('keydown', (e) => { | |
| 431 if (e.key === 'Enter') { | |
| 432 const selection = window.getSelection(); | |
| 433 const node = selection.anchorNode; | |
| 434 if (node && node.textContent) { | |
| 435 const text = node.textContent; | |
| 436 if (text.trim() === '/upload') { | |
| 437 e.preventDefault(); | |
| 438 node.textContent = ''; | |
| 439 this.triggerFileUpload(); | |
| 440 } | |
| 441 } | |
| 442 } | |
| 443 }); | |
| 444 | |
| 445 // File input change | |
| 446 this.fileInput.addEventListener('change', (e) => { | |
| 447 const files = e.target.files; | |
| 448 if (files && files.length > 0) { | |
| 449 for (const file of files) { | |
| 450 this.uploadFile(file); | |
| 451 } | |
| 452 } | |
| 453 this.fileInput.value = ''; | |
| 454 }); | |
| 455 | |
| 456 // Handle keyboard shortcuts | |
| 457 this.content.addEventListener('keydown', (e) => { | |
| 458 if (e.ctrlKey || e.metaKey) { | |
| 459 switch (e.key.toLowerCase()) { | |
| 460 case 'b': | |
| 461 e.preventDefault(); | |
| 462 this.execCommand('bold'); | |
| 463 break; | |
| 464 case 'i': | |
| 465 e.preventDefault(); | |
| 466 this.execCommand('italic'); | |
| 467 break; | |
| 468 case 's': | |
| 469 e.preventDefault(); | |
| 470 this.save(); | |
| 471 break; | |
| 472 } | |
| 473 } | |
| 474 }); | |
|
206
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
475 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
476 // Handle image clicks for resizing |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
477 this.content.addEventListener('click', (e) => { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
478 if (e.target.tagName === 'IMG') { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
479 e.preventDefault(); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
480 this.selectImage(e.target); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
481 } else if (!e.target.closest('.rich-editor-resize-wrapper')) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
482 this.deselectImage(); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
483 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
484 }); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
485 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
486 // Deselect image when clicking outside |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
487 document.addEventListener('click', (e) => { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
488 if (!this.content.contains(e.target)) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
489 this.deselectImage(); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
490 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
491 }); |
| 201 | 492 } |
| 493 | |
| 494 showDropOverlay() { | |
| 495 if (this.dropOverlay) return; | |
| 496 | |
| 497 this.dropOverlay = document.createElement('div'); | |
| 498 this.dropOverlay.className = 'rich-editor-upload-overlay'; | |
| 499 this.dropOverlay.textContent = 'Drop files here to upload'; | |
| 500 this.wrapper.appendChild(this.dropOverlay); | |
| 501 } | |
| 502 | |
| 503 hideDropOverlay() { | |
| 504 if (this.dropOverlay) { | |
| 505 this.dropOverlay.remove(); | |
| 506 this.dropOverlay = null; | |
| 507 } | |
| 508 } | |
| 509 | |
| 510 triggerFileUpload() { | |
| 511 this.fileInput.click(); | |
| 512 } | |
| 513 | |
|
204
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
514 readOnly() { |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
515 this.state.readOnly = !this.state.readOnly; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
516 |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
517 if (this.state.readOnly) |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
518 { |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
519 this.content.contentEditable = false; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
520 this.setStatus('Read-only mode'); |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
521 const buttons = this.toolbar.querySelectorAll('.rich-editor-btn'); |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
522 buttons.forEach(btn => { |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
523 if (btn.dataset.cmd !== 'readonly') { |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
524 btn.disabled = true; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
525 } |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
526 }); |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
527 } |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
528 else |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
529 { |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
530 // Enable editing |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
531 this.content.contentEditable = true; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
532 this.content.style.backgroundColor = ''; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
533 this.setStatus('Ready'); |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
534 |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
535 // Enable toolbar buttons |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
536 const buttons = this.toolbar.querySelectorAll('.rich-editor-btn'); |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
537 buttons.forEach(btn => { |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
538 btn.disabled = false; |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
539 }); |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
540 } |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
541 } |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
542 |
| 201 | 543 async uploadFile(file) { |
| 544 if (!this.options.uploadCallback) { | |
| 545 console.warn('No upload callback configured'); | |
| 546 return; | |
| 547 } | |
| 548 | |
| 549 // Insert loading placeholder | |
| 550 const placeholder = document.createElement('div'); | |
| 551 placeholder.className = 'upload-placeholder loading'; | |
| 552 placeholder.textContent = file.type.startsWith('image/') | |
| 553 ? `Processing ${file.name}... ⏳` | |
| 554 : `Uploading ${file.name}...`; | |
| 555 | |
| 556 this.insertAtCursor(placeholder); | |
| 557 | |
| 558 this.setStatus(`Uploading ${file.name}...`); | |
| 559 | |
| 560 try { | |
| 561 const result = await this.options.uploadCallback(file); | |
| 562 | |
| 563 if (result && result.url) { | |
| 564 // Replace placeholder with actual content | |
| 565 if (file.type.startsWith('image/')) { | |
| 566 const img = document.createElement('img'); | |
| 567 img.src = result.url; | |
| 568 img.alt = file.name; | |
|
206
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
569 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
570 // Store original dimensions when image loads |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
571 img.onload = () => { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
572 img.dataset.originalWidth = img.naturalWidth; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
573 img.dataset.originalHeight = img.naturalHeight; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
574 }; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
575 |
| 201 | 576 placeholder.replaceWith(img); |
| 577 } else { | |
| 578 const link = document.createElement('a'); | |
| 579 link.href = result.url; | |
| 580 link.textContent = file.name; | |
| 581 link.target = '_blank'; | |
| 582 placeholder.replaceWith(link); | |
| 583 } | |
| 584 | |
| 585 this.setStatus(`Uploaded ${file.name}`); | |
| 586 if (this.debouncedSave) this.debouncedSave(); | |
| 587 } else { | |
| 588 placeholder.textContent = `Failed to upload ${file.name}`; | |
| 589 placeholder.className = 'upload-placeholder'; | |
| 590 this.setStatus('Upload failed'); | |
| 591 } | |
| 592 } catch (error) { | |
| 593 console.error('Upload error:', error); | |
| 594 placeholder.textContent = `Error: ${error.message}`; | |
| 595 placeholder.className = 'upload-placeholder'; | |
| 596 this.setStatus('Upload error'); | |
| 597 } | |
| 598 } | |
| 599 | |
| 600 insertAtCursor(element) { | |
| 601 const selection = window.getSelection(); | |
| 602 if (selection.rangeCount > 0) { | |
| 603 const range = selection.getRangeAt(0); | |
| 604 range.deleteContents(); | |
| 605 range.insertNode(element); | |
| 606 range.setStartAfter(element); | |
| 607 range.collapse(true); | |
| 608 selection.removeAllRanges(); | |
| 609 selection.addRange(range); | |
| 610 } else { | |
| 611 this.content.appendChild(element); | |
| 612 } | |
| 613 this.content.focus(); | |
| 614 } | |
| 615 | |
| 616 execCommand(cmd) { | |
| 617 this.content.focus(); | |
| 618 | |
| 619 switch (cmd) { | |
| 620 case 'h1': | |
| 621 case 'h2': | |
| 622 case 'h3': | |
| 623 case 'h4': | |
| 624 case 'h5': | |
| 625 case 'h6': | |
| 626 document.execCommand('formatBlock', false, cmd); | |
| 627 break; | |
| 628 case 'p': | |
| 629 document.execCommand('formatBlock', false, 'p'); | |
| 630 break; | |
| 631 case 'ul': | |
| 632 document.execCommand('insertUnorderedList', false, null); | |
| 633 break; | |
| 634 case 'ol': | |
| 635 document.execCommand('insertOrderedList', false, null); | |
| 636 break; | |
| 637 case 'bold': | |
| 638 document.execCommand('bold', false, null); | |
| 639 break; | |
| 640 case 'italic': | |
| 641 document.execCommand('italic', false, null); | |
| 642 break; | |
| 643 case 'link': | |
| 644 this.insertLink(); | |
| 645 break; | |
| 646 case 'notelink': | |
| 647 this.insertNoteLink(); | |
| 648 break; | |
| 649 case 'upload': | |
| 650 this.triggerFileUpload(); | |
| 651 break; | |
|
204
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
652 case 'readonly': |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
653 this.readOnly(); |
|
e5aed6c36672
[Notes] Added icons and updated styling a bit. Probalby usable now.
MrJuneJune <me@mrjunejune.com>
parents:
201
diff
changeset
|
654 break; |
| 201 | 655 } |
| 656 | |
| 657 if (this.debouncedSave) this.debouncedSave(); | |
| 658 } | |
| 659 | |
| 660 insertLink() { | |
| 661 const url = prompt('Enter URL:'); | |
| 662 if (!url) return; | |
| 663 | |
| 664 const selection = window.getSelection(); | |
| 665 const selectedText = selection.toString() || url; | |
| 666 | |
| 667 const link = document.createElement('a'); | |
| 668 link.href = url; | |
| 669 link.textContent = selectedText; | |
| 670 link.target = '_blank'; | |
| 671 | |
| 672 if (selection.rangeCount > 0) { | |
| 673 const range = selection.getRangeAt(0); | |
| 674 range.deleteContents(); | |
| 675 range.insertNode(link); | |
| 676 range.setStartAfter(link); | |
| 677 range.collapse(true); | |
| 678 selection.removeAllRanges(); | |
| 679 selection.addRange(range); | |
| 680 } | |
| 681 } | |
| 682 | |
| 683 insertNoteLink() { | |
| 684 const noteId = prompt('Enter note ID (e.g., my-ideas):'); | |
| 685 if (!noteId) return; | |
| 686 | |
| 687 const sanitizedId = noteId.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-'); | |
| 688 const selection = window.getSelection(); | |
| 689 const selectedText = selection.toString() || sanitizedId; | |
| 690 | |
| 691 const link = document.createElement('a'); | |
| 692 link.href = '/notes/' + encodeURIComponent(sanitizedId); | |
| 693 link.textContent = selectedText; | |
| 694 link.className = 'note-link'; | |
| 695 | |
| 696 if (selection.rangeCount > 0) { | |
| 697 const range = selection.getRangeAt(0); | |
| 698 range.deleteContents(); | |
| 699 range.insertNode(link); | |
| 700 range.setStartAfter(link); | |
| 701 range.collapse(true); | |
| 702 selection.removeAllRanges(); | |
| 703 selection.addRange(range); | |
| 704 } | |
| 705 } | |
| 706 | |
| 707 setStatus(text) { | |
| 708 this.status.textContent = text; | |
| 709 } | |
| 710 | |
| 711 async save() { | |
| 712 if (!this.options.saveCallback) return; | |
| 713 | |
| 714 this.setStatus('Saving...'); | |
| 715 | |
| 716 try { | |
| 717 await this.options.saveCallback(this.getContent()); | |
| 718 this.setStatus('Saved'); | |
| 719 } catch (error) { | |
| 720 console.error('Save error:', error); | |
| 721 this.setStatus('Save failed'); | |
| 722 } | |
| 723 } | |
| 724 | |
| 725 getContent() { | |
| 726 return this.content.innerHTML; | |
| 727 } | |
| 728 | |
| 729 setContent(html) { | |
| 730 this.content.innerHTML = html; | |
| 731 } | |
| 732 | |
| 733 getText() { | |
| 734 return this.content.textContent; | |
| 735 } | |
| 736 | |
| 737 clear() { | |
| 738 this.content.innerHTML = ''; | |
| 739 } | |
| 740 | |
| 741 focus() { | |
| 742 this.content.focus(); | |
| 743 } | |
|
206
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
744 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
745 selectImage(img) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
746 if (this.state.readOnly) return; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
747 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
748 // Deselect previous image |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
749 this.deselectImage(); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
750 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
751 this.state.selectedImage = img; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
752 img.classList.add('selected'); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
753 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
754 // Wrap image in resize container if not already wrapped |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
755 if (!img.parentElement.classList.contains('rich-editor-resize-wrapper')) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
756 const wrapper = document.createElement('div'); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
757 wrapper.className = 'rich-editor-resize-wrapper'; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
758 wrapper.contentEditable = false; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
759 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
760 // Store original dimensions if not set |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
761 if (!img.dataset.originalWidth) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
762 img.dataset.originalWidth = img.naturalWidth; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
763 img.dataset.originalHeight = img.naturalHeight; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
764 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
765 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
766 img.parentNode.insertBefore(wrapper, img); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
767 wrapper.appendChild(img); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
768 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
769 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
770 const wrapper = img.parentElement; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
771 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
772 // Add resize handles |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
773 const corners = ['nw', 'ne', 'sw', 'se']; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
774 corners.forEach(corner => { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
775 const handle = document.createElement('div'); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
776 handle.className = `rich-editor-resize-handle ${corner}`; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
777 handle.dataset.corner = corner; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
778 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
779 handle.addEventListener('mousedown', (e) => { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
780 e.preventDefault(); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
781 e.stopPropagation(); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
782 this.startResize(e, img, corner); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
783 }); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
784 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
785 wrapper.appendChild(handle); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
786 }); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
787 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
788 // Add size input |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
789 const sizeInput = document.createElement('div'); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
790 sizeInput.className = 'rich-editor-size-input'; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
791 sizeInput.innerHTML = ` |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
792 <label>Width:</label> |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
793 <input type="number" class="width-input" value="${img.width}" min="50" max="2000"> |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
794 <label>px</label> |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
795 `; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
796 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
797 const widthInput = sizeInput.querySelector('.width-input'); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
798 widthInput.addEventListener('input', (e) => { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
799 const newWidth = parseInt(e.target.value); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
800 if (newWidth && newWidth > 0) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
801 this.resizeImage(img, newWidth); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
802 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
803 }); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
804 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
805 wrapper.appendChild(sizeInput); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
806 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
807 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
808 deselectImage() { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
809 if (!this.state.selectedImage) return; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
810 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
811 const img = this.state.selectedImage; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
812 img.classList.remove('selected'); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
813 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
814 const wrapper = img.parentElement; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
815 if (wrapper && wrapper.classList.contains('rich-editor-resize-wrapper')) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
816 // Remove resize handles and size input |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
817 wrapper.querySelectorAll('.rich-editor-resize-handle, .rich-editor-size-input').forEach(el => el.remove()); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
818 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
819 // Unwrap image |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
820 wrapper.parentNode.insertBefore(img, wrapper); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
821 wrapper.remove(); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
822 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
823 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
824 this.state.selectedImage = null; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
825 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
826 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
827 startResize(e, img, corner) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
828 this.state.resizing = true; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
829 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
830 const startX = e.clientX; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
831 const startY = e.clientY; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
832 const startWidth = img.width; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
833 const startHeight = img.height; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
834 const aspectRatio = startWidth / startHeight; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
835 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
836 const onMouseMove = (e) => { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
837 if (!this.state.resizing) return; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
838 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
839 let deltaX = e.clientX - startX; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
840 let deltaY = e.clientY - startY; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
841 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
842 // Adjust delta based on corner |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
843 if (corner === 'nw' || corner === 'sw') { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
844 deltaX = -deltaX; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
845 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
846 if (corner === 'nw' || corner === 'ne') { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
847 deltaY = -deltaY; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
848 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
849 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
850 // Use the larger delta to maintain aspect ratio |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
851 const delta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
852 const newWidth = Math.max(50, startWidth + delta); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
853 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
854 this.resizeImage(img, newWidth, aspectRatio); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
855 }; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
856 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
857 const onMouseUp = () => { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
858 this.state.resizing = false; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
859 document.removeEventListener('mousemove', onMouseMove); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
860 document.removeEventListener('mouseup', onMouseUp); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
861 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
862 // Update width input |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
863 const wrapper = img.parentElement; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
864 const widthInput = wrapper.querySelector('.width-input'); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
865 if (widthInput) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
866 widthInput.value = img.width; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
867 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
868 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
869 if (this.debouncedSave) this.debouncedSave(); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
870 }; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
871 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
872 document.addEventListener('mousemove', onMouseMove); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
873 document.addEventListener('mouseup', onMouseUp); |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
874 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
875 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
876 resizeImage(img, newWidth, aspectRatio = null) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
877 if (!aspectRatio) { |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
878 const originalWidth = parseInt(img.dataset.originalWidth) || img.naturalWidth; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
879 const originalHeight = parseInt(img.dataset.originalHeight) || img.naturalHeight; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
880 aspectRatio = originalWidth / originalHeight; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
881 } |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
882 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
883 const newHeight = newWidth / aspectRatio; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
884 |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
885 img.width = newWidth; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
886 img.height = newHeight; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
887 img.style.width = newWidth + 'px'; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
888 img.style.height = newHeight + 'px'; |
|
240337164a80
[Seobeo] SSL should be used for large file as well lol.
MrJuneJune <me@mrjunejune.com>
parents:
204
diff
changeset
|
889 } |
| 201 | 890 } |
| 891 | |
| 892 return { | |
| 893 init: function(elementId, options) { | |
| 894 return new Editor(elementId, options); | |
| 895 } | |
| 896 }; | |
| 897 })(); | |
| 898 | |
| 899 // Export for module systems | |
| 900 if (typeof module !== 'undefined' && module.exports) { | |
| 901 module.exports = RichEditor; | |
| 902 } |