diff options
| author | Hsieh Chin Fan <pham@topo.tw> | 2024-09-07 22:26:14 +0800 |
|---|---|---|
| committer | Hsieh Chin Fan <pham@topo.tw> | 2024-09-07 22:26:14 +0800 |
| commit | 5eff775a76b3a78e1801aa6f9d85e525fb3e2a5a (patch) | |
| tree | 1cc1187d6941e16c576c12874cba62a381bbea21 /src | |
| parent | ebe17265ab1f026f547c9f3ea6557c0cd0ed8991 (diff) | |
chore: Improve comments
Diffstat (limited to 'src')
| -rw-r--r-- | src/editor.mjs | 18 |
1 files changed, 10 insertions, 8 deletions
diff --git a/src/editor.mjs b/src/editor.mjs index 8b0a6ac..c011c6b 100644 --- a/src/editor.mjs +++ b/src/editor.mjs | |||
| @@ -8,7 +8,7 @@ const HtmlContainer = document.querySelector(".result-html") | |||
| 8 | const mdeElement = document.querySelector("#tinymde") | 8 | const mdeElement = document.querySelector("#tinymde") |
| 9 | 9 | ||
| 10 | // Add Editor | 10 | // Add Editor |
| 11 | const defaultContent = '## Links\n\n- [Go to marker](geo:24,121?id=foo,leaflet&text=normal "Link Test")\n\n```map\nid: foo\nuse: maplibre\n```\n' | 11 | const defaultContent = '## Links\n\n- [Go to marker](geo:24,121?id=foo,leaflet&text=normal "Link Test")\n\n```map\nid: foo\nuse: Maplibre\n```\n' |
| 12 | const lastContent = localStorage.getItem('editorContent') | 12 | const lastContent = localStorage.getItem('editorContent') |
| 13 | const tinyEditor = new TinyMDE.Editor({ | 13 | const tinyEditor = new TinyMDE.Editor({ |
| 14 | element: 'tinymde', | 14 | element: 'tinymde', |
| @@ -158,7 +158,7 @@ const getLineWithRenderer = (element) => { | |||
| 158 | return null | 158 | return null |
| 159 | } | 159 | } |
| 160 | // }}} | 160 | // }}} |
| 161 | // FUNCTION: Add suggestions for current selection {{{ | 161 | // FUNCTION: Return suggestions for valid options {{{ |
| 162 | const getSuggestionsForOptions = (optionTyped, validOptions) => { | 162 | const getSuggestionsForOptions = (optionTyped, validOptions) => { |
| 163 | let suggestOptions = [] | 163 | let suggestOptions = [] |
| 164 | 164 | ||
| @@ -177,7 +177,8 @@ const getSuggestionsForOptions = (optionTyped, validOptions) => { | |||
| 177 | replace: `${o.valueOf()}: `, | 177 | replace: `${o.valueOf()}: `, |
| 178 | })) | 178 | })) |
| 179 | } | 179 | } |
| 180 | 180 | // }}} | |
| 181 | // FUNCTION: Return suggestion for example of option value {{{ | ||
| 181 | const getSuggestionFromMapOption = (option) => { | 182 | const getSuggestionFromMapOption = (option) => { |
| 182 | if (!option.example) return null | 183 | if (!option.example) return null |
| 183 | 184 | ||
| @@ -190,7 +191,8 @@ const getSuggestionFromMapOption = (option) => { | |||
| 190 | replace: `${option.valueOf()}: ${option.example ?? ""}`, | 191 | replace: `${option.valueOf()}: ${option.example ?? ""}`, |
| 191 | }) | 192 | }) |
| 192 | } | 193 | } |
| 193 | 194 | // }}} | |
| 195 | // FUNCTION: Return suggestions from aliases {{{ | ||
| 194 | const getSuggestionsFromAliases = (option) => Object.entries(aliasesForMapOptions[option.valueOf()] ?? {}) | 196 | const getSuggestionsFromAliases = (option) => Object.entries(aliasesForMapOptions[option.valueOf()] ?? {}) |
| 195 | ?.map(record => { | 197 | ?.map(record => { |
| 196 | const [alias, value] = record | 198 | const [alias, value] = record |
| @@ -201,8 +203,8 @@ const getSuggestionsFromAliases = (option) => Object.entries(aliasesForMapOption | |||
| 201 | }) | 203 | }) |
| 202 | }) | 204 | }) |
| 203 | ?? [] | 205 | ?? [] |
| 204 | 206 | // }}} | |
| 205 | // Add HTML element for List of suggestions | 207 | // FUNCTION: Add HTML element for List of suggestions {{{ |
| 206 | const addSuggestions = (currentLine, selection) => { | 208 | const addSuggestions = (currentLine, selection) => { |
| 207 | const text = currentLine.textContent | 209 | const text = currentLine.textContent |
| 208 | const markInputIsInvalid = (ele) => (ele ?? currentLine).classList.add('invalid-input') | 210 | const markInputIsInvalid = (ele) => (ele ?? currentLine).classList.add('invalid-input') |
| @@ -327,7 +329,7 @@ const addSuggestions = (currentLine, selection) => { | |||
| 327 | suggestionsEle.style.maxWidth = `calc(${window.innerWidth}px - ${rect.right}px - 2rem)`; | 329 | suggestionsEle.style.maxWidth = `calc(${window.innerWidth}px - ${rect.right}px - 2rem)`; |
| 328 | } | 330 | } |
| 329 | // }}} | 331 | // }}} |
| 330 | // Event: suggests for current selection {{{ | 332 | // EVENT: suggests for current selection {{{ |
| 331 | tinyEditor.addEventListener('selection', selection => { | 333 | tinyEditor.addEventListener('selection', selection => { |
| 332 | // To trigger click event on suggestions list, don't set suggestion list invisible | 334 | // To trigger click event on suggestions list, don't set suggestion list invisible |
| 333 | if (suggestionsEle.querySelector('.container__suggestion.focus:hover') !== null) { | 335 | if (suggestionsEle.querySelector('.container__suggestion.focus:hover') !== null) { |
| @@ -356,7 +358,7 @@ tinyEditor.addEventListener('selection', selection => { | |||
| 356 | if (insideCodeblockForMap(element)) addSuggestions(element, selection) | 358 | if (insideCodeblockForMap(element)) addSuggestions(element, selection) |
| 357 | }); | 359 | }); |
| 358 | // }}} | 360 | // }}} |
| 359 | // Key events for suggestions {{{ | 361 | // EVENT: keydown for suggestions {{{ |
| 360 | mdeElement.addEventListener('keydown', (e) => { | 362 | mdeElement.addEventListener('keydown', (e) => { |
| 361 | // Only the following keys are used | 363 | // Only the following keys are used |
| 362 | const keyForSuggestions = ['Tab', 'Enter', 'Escape'].includes(e.key) | 364 | const keyForSuggestions = ['Tab', 'Enter', 'Escape'].includes(e.key) |