1 files changed, 274 insertions, 274 deletions

diff --git a/src/editor.mjs b/src/editor.mjs
index 6f529ed..4c50e79 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -1,44 +1,44 @@
-/*global EasyMDE*/
-/*eslint no-undef: "error"*/
-import { markdown2HTML, generateMaps } from './dumbymap';
-import { defaultAliases, parseConfigsFromYaml } from 'mapclay';
-import * as menuItem from './MenuItem';
+/* global EasyMDE */
+/* eslint no-undef: "error" */
+import { markdown2HTML, generateMaps } from './dumbymap'
+import { defaultAliases, parseConfigsFromYaml } from 'mapclay'
+import * as menuItem from './MenuItem'
 
 // Set up Containers {{{
 
-const HtmlContainer = document.querySelector('.DumbyMap');
-const textArea = document.querySelector('.editor textarea');
-let dumbymap;
+const HtmlContainer = document.querySelector('.DumbyMap')
+const textArea = document.querySelector('.editor textarea')
+let dumbymap
 
-new MutationObserver(mutations => {
-  const mutation = mutations.at(-1);
-  const mode = mutation.target.getAttribute('data-mode');
-  const layout = HtmlContainer.getAttribute('data-layout');
+new window.MutationObserver(mutations => {
+  const mutation = mutations.at(-1)
+  const mode = mutation.target.getAttribute('data-mode')
+  const layout = HtmlContainer.getAttribute('data-layout')
   if (mode === 'editing' && layout !== 'normal') {
-    HtmlContainer.setAttribute('data-layout', 'normal');
+    HtmlContainer.setAttribute('data-layout', 'normal')
   }
 }).observe(document.querySelector('[data-mode]'), {
   attributes: true,
   attributeFilter: ['data-mode'],
-  attributeOldValue: true,
-});
+  attributeOldValue: true
+})
 const toggleEditing = () => {
-  const mode = document.body.getAttribute('data-mode');
-  document.body.setAttribute('data-mode', mode === 'editing' ? '' : 'editing');
-};
+  const mode = document.body.getAttribute('data-mode')
+  document.body.setAttribute('data-mode', mode === 'editing' ? '' : 'editing')
+}
 // }}}
 // Set up EasyMDE {{{
 
 // Content values for editor
 
 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';
+  '## 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'
 const editor = new EasyMDE({
   element: textArea,
   initialValue: defaultContent,
   autosave: {
     enabled: true,
-    uniqueId: 'dumbymap',
+    uniqueId: 'dumbymap'
   },
   indentWithTabs: false,
   lineNumbers: true,
@@ -51,105 +51,105 @@ const editor = new EasyMDE({
     map: 'Ctrl-Alt-M',
     debug: 'Ctrl-Alt-D',
     toggleUnorderedList: null,
-    toggleOrderedList: null,
+    toggleOrderedList: null
   },
   toolbar: [
     {
       name: 'map',
       title: 'Toggle Map Generation',
       text: '🌏',
-      action: () => toggleEditing(),
+      action: () => toggleEditing()
     },
     {
       name: 'debug',
       title: 'Save content as URL',
       text: '🤔',
       action: () => {
-        const state = { content: editor.value() };
-        window.location.hash = encodeURIComponent(JSON.stringify(state));
-        navigator.clipboard.writeText(window.location.href);
-        alert('URL copied to clipboard');
-      },
+        const state = { content: editor.value() }
+        window.location.hash = encodeURIComponent(JSON.stringify(state))
+        navigator.clipboard.writeText(window.location.href)
+        window.alert('URL copied to clipboard')
+      }
     },
     {
       name: 'undo',
       title: 'Undo last editing',
       text: '\u27F2',
-      action: EasyMDE.undo,
+      action: EasyMDE.undo
     },
     {
       name: 'redo',
       text: '\u27F3',
       title: 'Redo editing',
-      action: EasyMDE.redo,
+      action: EasyMDE.redo
     },
     '|',
     {
       name: 'heading-1',
       text: 'H1',
       title: 'Big Heading',
-      action: EasyMDE['heading-1'],
+      action: EasyMDE['heading-1']
     },
     {
       name: 'heading-2',
       text: 'H2',
       title: 'Medium Heading',
-      action: EasyMDE['heading-2'],
+      action: EasyMDE['heading-2']
     },
     '|',
     {
       name: 'link',
       text: '\u{1F517}',
       title: 'Create Link',
-      action: EasyMDE.drawLink,
+      action: EasyMDE.drawLink
     },
     {
       name: 'image',
       text: '\u{1F5BC}',
       title: 'Create Image',
-      action: EasyMDE.drawImage,
+      action: EasyMDE.drawImage
     },
     '|',
     {
       name: 'Bold',
       text: '\u{1D401}',
       title: 'Bold',
-      action: EasyMDE.toggleBold,
+      action: EasyMDE.toggleBold
     },
     {
       name: 'Italic',
       text: '\u{1D43C}',
       title: 'Italic',
-      action: EasyMDE.toggleItalic,
-    },
-  ],
-});
+      action: EasyMDE.toggleItalic
+    }
+  ]
+})
 
-const cm = editor.codemirror;
+const cm = editor.codemirror
 
 const getStateFromHash = hash => {
-  const hashValue = hash.substring(1);
-  const stateString = decodeURIComponent(hashValue);
+  const hashValue = hash.substring(1)
+  const stateString = decodeURIComponent(hashValue)
   try {
-    return JSON.parse(stateString) ?? {};
+    return JSON.parse(stateString) ?? {}
   } catch (_) {
-    return {};
+    return {}
   }
-};
+}
 
 const getContentFromHash = hash => {
-  const state = getStateFromHash(hash);
-  return state.content;
-};
+  const state = getStateFromHash(hash)
+  return state.content
+}
 
-const initialState = getStateFromHash(window.location.hash);
-window.location.hash = '';
-const contentFromHash = initialState.content;
+const initialState = getStateFromHash(window.location.hash)
+window.location.hash = ''
+const contentFromHash = initialState.content
 
 // Seems like autosave would overwrite initialValue, set content from hash here
 if (contentFromHash) {
-  editor.cleanup();
-  editor.value(contentFromHash);
+  editor.cleanup()
+  editor.value(contentFromHash)
 }
 // }}}
 // Set up logic about editor content {{{
@@ -159,30 +159,30 @@ const afterMapRendered = _ => {
   //   const lonLat = mapHolder.renderer.unproject([event.x, event.y])
   //   // TODO...
   // }
-};
-markdown2HTML(HtmlContainer, editor.value());
-dumbymap = generateMaps(HtmlContainer, afterMapRendered);
+}
+markdown2HTML(HtmlContainer, editor.value())
+dumbymap = generateMaps(HtmlContainer, afterMapRendered)
 
 // Quick hack to style lines inside code block
 const addClassToCodeLines = () => {
-  const lines = cm.getLineHandle(0).parent.lines;
-  let insideCodeBlock = false;
+  const lines = cm.getLineHandle(0).parent.lines
+  let insideCodeBlock = false
   lines.forEach((line, index) => {
     if (line.text.match(/^[\u0060]{3}/)) {
-      insideCodeBlock = !insideCodeBlock;
+      insideCodeBlock = !insideCodeBlock
     } else if (insideCodeBlock) {
-      cm.addLineClass(index, 'text', 'inside-code-block');
+      cm.addLineClass(index, 'text', 'inside-code-block')
     } else {
-      cm.removeLineClass(index, 'text', 'inside-code-block');
+      cm.removeLineClass(index, 'text', 'inside-code-block')
     }
-  });
-};
-addClassToCodeLines();
+  })
+}
+addClassToCodeLines()
 
 const completeForCodeBlock = change => {
-  const line = change.to.line;
+  const line = change.to.line
   if (change.origin === '+input') {
-    const text = change.text[0];
+    const text = change.text[0]
 
     // Completion for YAML doc separator
     if (
@@ -190,21 +190,21 @@ const completeForCodeBlock = change => {
       change.to.ch === 0 &&
       insideCodeblockForMap(cm.getCursor())
     ) {
-      cm.setSelection({ line: line, ch: 0 }, { line: line, ch: 1 });
-      cm.replaceSelection(text.repeat(3) + '\n');
+      cm.setSelection({ line, ch: 0 }, { line, ch: 1 })
+      cm.replaceSelection(text.repeat(3) + '\n')
     }
 
     // Completion for Code fence
     if (text === '`' && change.to.ch === 0) {
-      cm.setSelection({ line: line, ch: 0 }, { line: line, ch: 1 });
-      cm.replaceSelection(text.repeat(3));
+      cm.setSelection({ line, ch: 0 }, { line, ch: 1 })
+      cm.replaceSelection(text.repeat(3))
       const numberOfFences = cm
         .getValue()
         .split('\n')
-        .filter(line => line.match(/[\u0060]{3}/)).length;
+        .filter(line => line.match(/[\u0060]{3}/)).length
       if (numberOfFences % 2 === 1) {
-        cm.replaceSelection('map\n\n```');
-        cm.setCursor({ line: line + 1 });
+        cm.replaceSelection('map\n\n```')
+        cm.setCursor({ line: line + 1 })
       }
     }
   }
@@ -212,63 +212,64 @@ const completeForCodeBlock = change => {
   // For YAML doc separator, <hr> and code fence
   // Auto delete to start of line
   if (change.origin === '+delete') {
-    const match = change.removed[0].match(/^[-\u0060]$/)?.at(0);
+    const match = change.removed[0].match(/^[-\u0060]$/)?.at(0)
     if (match && cm.getLine(line) === match.repeat(2) && match) {
-      cm.setSelection({ line: line, ch: 0 }, { line: line, ch: 2 });
-      cm.replaceSelection('');
+      cm.setSelection({ line, ch: 0 }, { line, ch: 2 })
+      cm.replaceSelection('')
     }
   }
-};
-
-const debounceForMap = (() => {
-  let timer = null;
+}
 
-  return function (...args) {
-    dumbymap = generateMaps.apply(this, args);
-    // clearTimeout(timer);
-    // timer = setTimeout(() => {
-    //   dumbymap = generateMaps.apply(this, args)
-    // }, 10);
-  };
-})();
+/* Disable debounce temporarily */
+// const debounceForMap = (() => {
+//   const timer = null
+//
+//   return function (...args) {
+//     dumbymap = generateMaps.apply(this, args)
+// clearTimeout(timer);
+// timer = setTimeout(() => {
+//   dumbymap = generateMaps.apply(this, args)
+// }, 10);
+//   }
+// })()
 
 const updateDumbyMap = () => {
-  markdown2HTML(HtmlContainer, editor.value());
+  markdown2HTML(HtmlContainer, editor.value())
   // TODO Test if generate maps intantly is OK with map cache
   // debounceForMap(HtmlContainer, afterMapRendered)
-  dumbymap = generateMaps(HtmlContainer, afterMapRendered);
-};
+  dumbymap = generateMaps(HtmlContainer, afterMapRendered)
+}
 
-updateDumbyMap();
+updateDumbyMap()
 
 // Re-render HTML by editor content
 cm.on('change', (_, change) => {
-  updateDumbyMap();
-  addClassToCodeLines();
-  completeForCodeBlock(change);
-});
+  updateDumbyMap()
+  addClassToCodeLines()
+  completeForCodeBlock(change)
+})
 
 // Set class for focus
 cm.on('focus', () => {
-  cm.getWrapperElement().classList.add('focus');
-  HtmlContainer.classList.remove('focus');
-});
+  cm.getWrapperElement().classList.add('focus')
+  HtmlContainer.classList.remove('focus')
+})
 
 cm.on('beforeChange', (_, change) => {
-  const line = change.to.line;
+  const line = change.to.line
   // Don't allow more content after YAML doc separator
   if (change.origin.match(/^(\+input|paste)$/)) {
     if (cm.getLine(line) === '---' && change.text[0] !== '') {
-      change.cancel();
+      change.cancel()
     }
   }
-});
+})
 
 // Reload editor content by hash value
 window.onhashchange = () => {
-  const content = getContentFromHash(window.location.hash);
-  if (content) editor.value(content);
-};
+  const content = getContentFromHash(window.location.hash)
+  if (content) editor.value(content)
+}
 
 // FIXME DEBUGONLY
 // generateMaps(HtmlContainer)
@@ -279,159 +280,159 @@ window.onhashchange = () => {
 // }}}
 // Completion in Code Blok {{{
 // Elements about suggestions {{{
-const menu = document.createElement('div');
-menu.className = 'menu editor-menu';
-menu.style.display = 'none';
-menu.onclick = () => (menu.style.display = 'none');
-new MutationObserver(() => {
+const menu = document.createElement('div')
+menu.className = 'menu editor-menu'
+menu.style.display = 'none'
+menu.onclick = () => (menu.style.display = 'none')
+new window.MutationObserver(() => {
   if (menu.style.display === 'none') {
-    menu.replaceChildren();
+    menu.replaceChildren()
   }
 }).observe(menu, {
   attributes: true,
-  attributeFilter: ['style'],
-});
-document.body.append(menu);
+  attributeFilter: ['style']
+})
+document.body.append(menu)
 
-const rendererOptions = {};
+const rendererOptions = {}
 
 // }}}
 // Aliases for map options {{{
-const aliasesForMapOptions = {};
-const defaultApply = './dist/default.yml';
+const aliasesForMapOptions = {}
+const defaultApply = './dist/default.yml'
 fetch(defaultApply)
   .then(res => res.text())
   .then(rawText => {
-    const config = parseConfigsFromYaml(rawText)?.at(0);
-    Object.assign(aliasesForMapOptions, config.aliases ?? {});
+    const config = parseConfigsFromYaml(rawText)?.at(0)
+    Object.assign(aliasesForMapOptions, config.aliases ?? {})
   })
-  .catch(err => console.warn(`Fail to get aliases from ${defaultApply}`, err));
+  .catch(err => console.warn(`Fail to get aliases from ${defaultApply}`, err))
 // }}}
 //  FUNCTION: Check if current token is inside code block {{{
 const insideCodeblockForMap = anchor => {
-  const token = cm.getTokenAt(anchor);
+  const token = cm.getTokenAt(anchor)
   const insideCodeBlock =
     token.state.overlay.codeBlock &&
-    !cm.getLine(anchor.line).match(/^[\u0060]{3}/);
-  if (!insideCodeBlock) return false;
+    !cm.getLine(anchor.line).match(/^[\u0060]{3}/)
+  if (!insideCodeBlock) return false
 
-  let line = anchor.line - 1;
+  let line = anchor.line - 1
   while (line >= 0) {
-    const content = cm.getLine(line);
+    const content = cm.getLine(line)
     if (content === '```map') {
-      return true;
+      return true
     } else if (content === '```') {
-      return false;
+      return false
     }
-    line = line - 1;
+    line = line - 1
   }
-  return false;
-};
+  return false
+}
 // }}}
 // FUNCTION: Get Renderer by cursor position in code block {{{
 const getLineWithRenderer = anchor => {
-  const currentLine = anchor.line;
-  if (!cm.getLine) return null;
+  const currentLine = anchor.line
+  if (!cm.getLine) return null
 
-  const match = line => cm.getLine(line).match(/^use: /);
+  const match = line => cm.getLine(line).match(/^use: /)
 
-  if (match(currentLine)) return currentLine;
+  if (match(currentLine)) return currentLine
 
   // Look backward/forward for pattern of used renderer: /use: .+/
-  let pl = currentLine - 1;
+  let pl = currentLine - 1
   while (pl > 0 && insideCodeblockForMap(anchor)) {
-    const text = cm.getLine(pl);
+    const text = cm.getLine(pl)
     if (match(pl)) {
-      return pl;
+      return pl
     } else if (text.match(/^---|^[\u0060]{3}/)) {
-      break;
+      break
     }
-    pl = pl - 1;
+    pl = pl - 1
   }
 
-  let nl = currentLine + 1;
+  let nl = currentLine + 1
   while (insideCodeblockForMap(anchor)) {
-    const text = cm.getLine(nl);
+    const text = cm.getLine(nl)
     if (match(nl)) {
-      return nl;
+      return nl
     } else if (text.match(/^---|^[\u0060]{3}/)) {
-      return null;
+      return null
     }
-    nl = nl + 1;
+    nl = nl + 1
   }
 
-  return null;
-};
+  return null
+}
 // }}}
 // FUNCTION: Return suggestions for valid options {{{
 const getSuggestionsForOptions = (optionTyped, validOptions) => {
-  let suggestOptions = [];
+  let suggestOptions = []
 
   const matchedOptions = validOptions.filter(o =>
-    o.valueOf().toLowerCase().includes(optionTyped.toLowerCase()),
-  );
+    o.valueOf().toLowerCase().includes(optionTyped.toLowerCase())
+  )
 
   if (matchedOptions.length > 0) {
-    suggestOptions = matchedOptions;
+    suggestOptions = matchedOptions
   } else {
-    suggestOptions = validOptions;
+    suggestOptions = validOptions
   }
 
   return suggestOptions.map(
     o =>
       new menuItem.Suggestion({
         text: `<span>${o.valueOf()}</span><span class='info' title="${o.desc ?? ''}">ⓘ</span>`,
-        replace: `${o.valueOf()}: `,
-      }),
-  );
-};
+        replace: `${o.valueOf()}: `
+      })
+  )
+}
 // }}}
 // FUNCTION: Return suggestion for example of option value {{{
 const getSuggestionFromMapOption = option => {
-  if (!option.example) return null;
+  if (!option.example) return null
 
   const text = option.example_desc
     ? `<span>${option.example_desc}</span><span class="truncate"style="color: gray">${option.example}</span>`
-    : `<span>${option.example}</span>`;
+    : `<span>${option.example}</span>`
 
   return new menuItem.Suggestion({
-    text: text,
-    replace: `${option.valueOf()}: ${option.example ?? ''}`,
-  });
-};
+    text,
+    replace: `${option.valueOf()}: ${option.example ?? ''}`
+  })
+}
 // }}}
 // FUNCTION: Return suggestions from aliases {{{
 const getSuggestionsFromAliases = option =>
   Object.entries(aliasesForMapOptions[option.valueOf()] ?? {})?.map(record => {
-    const [alias, value] = record;
-    const valueString = JSON.stringify(value).replaceAll('"', '');
+    const [alias, value] = record
+    const valueString = JSON.stringify(value).replaceAll('"', '')
     return new menuItem.Suggestion({
       text: `<span>${alias}</span><span class="truncate" style="color: gray">${valueString}</span>`,
-      replace: `${option.valueOf()}: ${valueString}`,
-    });
-  }) ?? [];
+      replace: `${option.valueOf()}: ${valueString}`
+    })
+  }) ?? []
 // }}}
 // FUCNTION: Handler for map codeblock {{{
 const handleTypingInCodeBlock = anchor => {
-  const text = cm.getLine(anchor.line);
+  const text = cm.getLine(anchor.line)
   if (text.match(/^\s\+$/) && text.length % 2 !== 0) {
     // TODO Completion for even number of spaces
   } else if (text.match(/^-/)) {
     // TODO Completion for YAML doc separator
   } else {
-    const suggestions = getSuggestions(anchor);
-    addSuggestions(anchor, suggestions);
+    const suggestions = getSuggestions(anchor)
+    addSuggestions(anchor, suggestions)
   }
-};
+}
 // }}}
 // FUNCTION: get suggestions by current input {{{
 const getSuggestions = anchor => {
-  const text = cm.getLine(anchor.line);
+  const text = cm.getLine(anchor.line)
 
   // Clear marks on text
   cm.findMarks({ ...anchor, ch: 0 }, { ...anchor, ch: text.length }).forEach(
-    m => m.clear(),
-  );
+    m => m.clear()
+  )
 
   // Mark user input invalid by case
   const markInputIsInvalid = () =>
@@ -440,231 +441,230 @@ const getSuggestions = anchor => {
       .markText(
         { ...anchor, ch: 0 },
         { ...anchor, ch: text.length },
-        { className: 'invalid-input' },
-      );
+        { className: 'invalid-input' }
+      )
 
   // Check if "use: <renderer>" is set
-  const lineWithRenderer = getLineWithRenderer(anchor);
+  const lineWithRenderer = getLineWithRenderer(anchor)
   const renderer = lineWithRenderer
     ? cm.getLine(lineWithRenderer).split(' ')[1]
-    : null;
+    : null
   if (renderer && anchor.line !== lineWithRenderer) {
     // Do not check properties
-    if (text.startsWith('  ')) return [];
+    if (text.startsWith('  ')) return []
 
     // If no valid options for current used renderer, go get it!
-    const validOptions = rendererOptions[renderer];
+    const validOptions = rendererOptions[renderer]
     if (!validOptions) {
       // Get list of valid options for current renderer
-      const rendererUrl = defaultAliases.use[renderer]?.value;
+      const rendererUrl = defaultAliases.use[renderer]?.value
       import(rendererUrl)
         .then(rendererModule => {
-          rendererOptions[renderer] = rendererModule.default.validOptions;
-          const currentAnchor = cm.getCursor();
+          rendererOptions[renderer] = rendererModule.default.validOptions
+          const currentAnchor = cm.getCursor()
           if (insideCodeblockForMap(currentAnchor)) {
-            handleTypingInCodeBlock(currentAnchor);
+            handleTypingInCodeBlock(currentAnchor)
           }
         })
         .catch(_ => {
-          markInputIsInvalid(lineWithRenderer);
+          markInputIsInvalid(lineWithRenderer)
           console.warn(
-            `Fail to get valid options from Renderer typed: ${renderer}`,
-          );
-        });
-      return [];
+            `Fail to get valid options from Renderer typed: ${renderer}`
+          )
+        })
+      return []
     }
 
     // If input is "key:value" (no space left after colon), then it is invalid
-    const isKeyFinished = text.includes(':');
-    const isValidKeyValue = text.match(/^[^:]+:\s+/);
+    const isKeyFinished = text.includes(':')
+    const isValidKeyValue = text.match(/^[^:]+:\s+/)
     if (isKeyFinished && !isValidKeyValue) {
-      markInputIsInvalid();
-      return [];
+      markInputIsInvalid()
+      return []
     }
 
     // If user is typing option
-    const keyTyped = text.split(':')[0].trim();
+    const keyTyped = text.split(':')[0].trim()
     if (!isKeyFinished) {
-      markInputIsInvalid();
-      return getSuggestionsForOptions(keyTyped, validOptions);
+      markInputIsInvalid()
+      return getSuggestionsForOptions(keyTyped, validOptions)
     }
 
     // If user is typing value
-    const matchedOption = validOptions.find(o => o.name === keyTyped);
+    const matchedOption = validOptions.find(o => o.name === keyTyped)
     if (isKeyFinished && !matchedOption) {
-      markInputIsInvalid();
+      markInputIsInvalid()
     }
 
     if (isKeyFinished && matchedOption) {
-      const valueTyped = text.substring(text.indexOf(':') + 1).trim();
-      const isValidValue = matchedOption.isValid(valueTyped);
+      const valueTyped = text.substring(text.indexOf(':') + 1).trim()
+      const isValidValue = matchedOption.isValid(valueTyped)
       if (!valueTyped) {
         return [
           getSuggestionFromMapOption(matchedOption),
-          ...getSuggestionsFromAliases(matchedOption),
-        ].filter(s => s instanceof menuItem.Suggestion);
+          ...getSuggestionsFromAliases(matchedOption)
+        ].filter(s => s instanceof menuItem.Suggestion)
       }
       if (valueTyped && !isValidValue) {
-        markInputIsInvalid();
-        return [];
+        markInputIsInvalid()
+        return []
       }
     }
   } else {
     // Suggestion for "use"
     const rendererSuggestions = Object.entries(defaultAliases.use)
       .filter(([renderer]) => {
-        const suggestion = `use: ${renderer}`;
-        const suggestionPattern = suggestion.replace(' ', '').toLowerCase();
-        const textPattern = text.replace(' ', '').toLowerCase();
-        return suggestion !== text && suggestionPattern.includes(textPattern);
+        const suggestion = `use: ${renderer}`
+        const suggestionPattern = suggestion.replace(' ', '').toLowerCase()
+        const textPattern = text.replace(' ', '').toLowerCase()
+        return suggestion !== text && suggestionPattern.includes(textPattern)
       })
       .map(
         ([renderer, info]) =>
           new menuItem.Suggestion({
             text: `<span>use: ${renderer}</span><span class='info' title="${info.desc}">ⓘ</span>`,
-            replace: `use: ${renderer}`,
-          }),
-      );
-    return rendererSuggestions.length > 0 ? rendererSuggestions : [];
+            replace: `use: ${renderer}`
+          })
+      )
+    return rendererSuggestions.length > 0 ? rendererSuggestions : []
   }
-  return [];
-};
+  return []
+}
 // }}}
 // {{{ FUNCTION: Show element about suggestions
 const addSuggestions = (anchor, suggestions) => {
   if (suggestions.length === 0) {
-    menu.style.display = 'none';
-    return;
+    menu.style.display = 'none'
+    return
   } else {
-    menu.style.display = 'block';
+    menu.style.display = 'block'
   }
 
-  menu.innerHTML = '';
+  menu.innerHTML = ''
   suggestions
     .map(s => s.createElement(cm))
-    .forEach(option => menu.appendChild(option));
-
-  const widgetAnchor = document.createElement('div');
-  cm.addWidget(anchor, widgetAnchor, true);
-  const rect = widgetAnchor.getBoundingClientRect();
-  menu.style.left = `calc(${rect.left}px + 2rem)`;
-  menu.style.top = `calc(${rect.bottom}px + 1rem)`;
-  menu.style.maxWidth = `calc(${window.innerWidth}px - ${rect.x}px - 3rem)`;
-  menu.style.display = 'block';
-};
+    .forEach(option => menu.appendChild(option))
+
+  const widgetAnchor = document.createElement('div')
+  cm.addWidget(anchor, widgetAnchor, true)
+  const rect = widgetAnchor.getBoundingClientRect()
+  menu.style.left = `calc(${rect.left}px + 2rem)`
+  menu.style.top = `calc(${rect.bottom}px + 1rem)`
+  menu.style.maxWidth = `calc(${window.innerWidth}px - ${rect.x}px - 3rem)`
+  menu.style.display = 'block'
+}
 // }}}
 // EVENT: Suggests for current selection {{{
 // FIXME Dont show suggestion when selecting multiple chars
 cm.on('cursorActivity', _ => {
-  menu.style.display = 'none';
-  const anchor = cm.getCursor();
+  menu.style.display = 'none'
+  const anchor = cm.getCursor()
 
   if (insideCodeblockForMap(anchor)) {
-    handleTypingInCodeBlock(anchor);
+    handleTypingInCodeBlock(anchor)
   }
-});
+})
 cm.on('blur', () => {
   if (menu.checkVisibility()) {
     cm.focus()
   } else {
-    cm.getWrapperElement().classList.remove('focus');
-    HtmlContainer.classList.add('focus');
+    cm.getWrapperElement().classList.remove('focus')
+    HtmlContainer.classList.add('focus')
   }
-});
+})
 // }}}
 // EVENT: keydown for suggestions {{{
-const keyForSuggestions = ['Tab', 'Enter', 'Escape'];
+const keyForSuggestions = ['Tab', 'Enter', 'Escape']
 cm.on('keydown', (_, e) => {
   if (
     !cm.hasFocus ||
     !keyForSuggestions.includes(e.key) ||
     menu.style.display === 'none'
-  )
-    return;
+  ) { return }
 
   // Directly add a newline when no suggestion is selected
-  const currentSuggestion = menu.querySelector('.container__suggestion.focus');
-  if (!currentSuggestion && e.key === 'Enter') return;
+  const currentSuggestion = menu.querySelector('.container__suggestion.focus')
+  if (!currentSuggestion && e.key === 'Enter') return
 
   // Override default behavior
-  e.preventDefault();
+  e.preventDefault()
 
   // Suggestion when pressing Tab or Shift + Tab
   const nextSuggestion =
     currentSuggestion?.nextSibling ??
-    menu.querySelector('.container__suggestion:first-child');
+    menu.querySelector('.container__suggestion:first-child')
   const previousSuggestion =
     currentSuggestion?.previousSibling ??
-    menu.querySelector('.container__suggestion:last-child');
-  const focusSuggestion = e.shiftKey ? previousSuggestion : nextSuggestion;
+    menu.querySelector('.container__suggestion:last-child')
+  const focusSuggestion = e.shiftKey ? previousSuggestion : nextSuggestion
 
   // Current editor selection state
   switch (e.key) {
     case 'Tab':
-      Array.from(menu.children).forEach(s => s.classList.remove('focus'));
-      focusSuggestion.classList.add('focus');
-      focusSuggestion.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      break;
+      Array.from(menu.children).forEach(s => s.classList.remove('focus'))
+      focusSuggestion.classList.add('focus')
+      focusSuggestion.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      break
     case 'Enter':
-      currentSuggestion.onclick();
-      break;
+      currentSuggestion.onclick()
+      break
     case 'Escape':
-      if (!menu.checkVisibility()) break;
+      if (!menu.checkVisibility()) break
       // HACK delay menu display change for blur event, mark cm focus should keep
-      setTimeout(() => (menu.style.display = 'none'), 50);
-      break;
+      setTimeout(() => (menu.style.display = 'none'), 50)
+      break
   }
-});
+})
 
 document.onkeydown = e => {
   if (e.altKey && e.ctrlKey && e.key === 'm') {
-    toggleEditing();
-    e.preventDefault();
-    return null;
+    toggleEditing()
+    e.preventDefault()
+    return null
   }
 
   if (!cm.hasFocus()) {
     if (e.key === 'F1') {
-      e.preventDefault();
-      cm.focus();
+      e.preventDefault()
+      cm.focus()
     }
     if (e.key === 'Tab') {
-      e.preventDefault();
-      dumbymap.utils.focusNextMap(e.shiftKey);
+      e.preventDefault()
+      dumbymap.utils.focusNextMap(e.shiftKey)
     }
     if (e.key === 'x' || e.key === 'X') {
-      e.preventDefault();
-      dumbymap.utils.switchToNextLayout(e.shiftKey);
+      e.preventDefault()
+      dumbymap.utils.switchToNextLayout(e.shiftKey)
     }
     if (e.key === 'n') {
-      e.preventDefault();
-      dumbymap.utils.focusNextBlock();
+      e.preventDefault()
+      dumbymap.utils.focusNextBlock()
     }
     if (e.key === 'p') {
-      e.preventDefault();
-      dumbymap.utils.focusNextBlock(true);
+      e.preventDefault()
+      dumbymap.utils.focusNextBlock(true)
     }
     if (e.key === 'Escape') {
-      e.preventDefault();
-      dumbymap.utils.removeBlockFocus();
+      e.preventDefault()
+      dumbymap.utils.removeBlockFocus()
     }
   }
-};
+}
 
 // }}}
 // }}}
 // Layout Switch {{{
-new MutationObserver(mutaions => {
-  const mutation = mutaions.at(-1);
-  const layout = HtmlContainer.getAttribute('data-layout');
+new window.MutationObserver(mutaions => {
+  const mutation = mutaions.at(-1)
+  const layout = HtmlContainer.getAttribute('data-layout')
   if (layout !== 'normal' || mutation.oldValue === 'normal') {
-    document.body.setAttribute('data-mode', '');
+    document.body.setAttribute('data-mode', '')
   }
 }).observe(HtmlContainer, {
   attributes: true,
   attributeFilter: ['data-layout'],
-  attributeOldValue: true,
-});
+  attributeOldValue: true
+})
 // }}}
 
 // vim: sw=2 ts=2 foldmethod=marker foldmarker={{{,}}}