9 files changed, 154 insertions, 207 deletions

diff --git a/eslint.config.js b/eslint.config.js
deleted file mode 100644
index 3bca729..0000000
--- a/eslint.config.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import globals from 'globals'
-import js from '@eslint/js'
-import importPlugin from 'eslint-plugin-import'
-import promisePlugin from 'eslint-plugin-promise'
-import nodePlugin from 'eslint-plugin-node'
-import jsdoc from 'eslint-plugin-jsdoc'
-
-export default [
-  js.configs.recommended,
-  {
-    languageOptions: {
-      ecmaVersion: 2022,
-      sourceType: 'module',
-      globals: {
-        ...globals.browser,
-        ...globals.node
-      }
-    },
-    plugins: {
-      import: importPlugin,
-      promise: promisePlugin,
-      node: nodePlugin
-    },
-    rules: {
-      'no-unused-vars': ['warn', {
-        varsIgnorePattern: '^_',
-        argsIgnorePattern: '^_',
-        caughtErrorsIgnorePattern: '^ignore|_'
-      }],
-      'import/no-unresolved': 'error',
-      'no-console': ['error', { allow: ['info', 'warn', 'error'] }],
-      eqeqeq: ['error', 'always'],
-      // 'curly': ['warn', 'multi'],
-      'prefer-const': 'error',
-      'no-var': 'error',
-      'array-callback-return': 'error',
-      'no-unexpected-multiline': 'warn'
-    }
-  },
-  {
-    files: ['src/*js'],
-    plugins: {
-      jsdoc
-    },
-    rules: {
-      'jsdoc/require-description': 'warn'
-    }
-  }
-]
diff --git a/package.json b/package.json
index 2c39691..0017e6c 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "build-resources": "cp node_modules/easymde/dist/easymde.min.js dist; cp node_modules/easymde/dist/easymde.min.css dist/css",
     "server": "live-server --port=8080 --ignore='**/src/**js' --wait=2000 --no-browser --cors",
     "dev": "npm run server",
-    "lint": "npx standard",
+    "lint": "standard --fix",
     "style": "scripts/stylelint.sh",
     "prepack": "npm run lint && npm run style && npm run build",
     "postpack": "rm -rf dist/css dist/renderers; ln -sf `pwd`/src/css dist; cp node_modules/easymde/dist/easymde.min.css src/css; ln -sf `pwd`/mapclay/dist/renderers dist"
@@ -38,7 +38,6 @@
     "globals": "^15.10.0",
     "rollup": "^4.24.0",
     "rollup-plugin-bundle-stats": "^4.15.1",
-    "standard": "^17.1.2",
     "stylelint": "^16.9.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4"
diff --git a/rollup.config.js b/rollup.config.js
index 145224b..f5a22eb 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -13,12 +13,12 @@ const general = {
       dir: './dist',
       format: 'esm',
       entryFileNames: '[name].mjs',
-      sourcemap: 'true'
-    }
+      sourcemap: 'true',
+    },
   ],
   watch: {
     clearScreen: false,
-    include: ['src/**', 'mapclay/dist/mapclay.mjs']
+    include: ['src/**', 'mapclay/dist/mapclay.mjs'],
   },
   context: 'window',
   plugins: [
@@ -26,13 +26,12 @@ const general = {
       name: 'watch-mapclay',
       buildStart () {
         const mapclayPath = join(process.cwd(), 'mapclay', 'dist', 'mapclay.mjs')
-        console.log('Watching:', mapclayPath)
         if (existsSync(mapclayPath)) {
           this.addWatchFile(mapclayPath)
         } else {
-          console.log('mapclay.mjs not found at:', mapclayPath)
+          console.warn('mapclay.mjs not found at:', mapclayPath)
         }
-      }
+      },
     },
     {
       name: 'leader-line',
@@ -41,7 +40,7 @@ const general = {
           return `${code}\nexport default LeaderLine;`
         }
         return null
-      }
+      },
     },
     {
       name: 'mapclay',
@@ -50,24 +49,24 @@ const general = {
           return './mapclay/dist/mapclay.mjs'
         }
         return null
-      }
+      },
     },
     node(),
     commonjs(),
     production && terser({
-      keep_fnames: true
+      keep_fnames: true,
     }),
-    production && bundleStats()
-  ]
+    production && bundleStats(),
+  ],
 }
 
 export default [
   {
-    input: 'src/editor.mjs'
+    input: 'src/editor.mjs',
   },
   {
-    input: 'src/dumbymap.mjs'
-  }
+    input: 'src/dumbymap.mjs',
+  },
 ]
   .map(config => ({ ...general, ...config }))
   .filter((config) => production || config.input.match(/editor/))
diff --git a/src/Layout.mjs b/src/Layout.mjs
index 6bb6282..c5276b4 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -55,7 +55,7 @@ export class SideBySide extends Layout {
 
     const draggable = new PlainDraggable(bar, {
       handle,
-      containment: { left: '25%', top: 0, right: '75%', height: 0 }
+      containment: { left: '25%', top: 0, right: '75%', height: 0 },
     })
     draggable.draggableCursor = 'grab'
 
@@ -110,7 +110,7 @@ export class Overlay extends Layout {
   addDraggable = element => {
     // Make sure current element always on top
     const siblings = Array.from(
-      element.parentElement?.querySelectorAll(':scope > *') ?? []
+      element.parentElement?.querySelectorAll(':scope > *') ?? [],
     )
     let popTimer = null
     element.onmouseover = () => {
@@ -135,7 +135,7 @@ export class Overlay extends Layout {
       top,
       left,
       handle: draggablePart,
-      snap: { x: { step: 20 }, y: { step: 20 } }
+      snap: { x: { step: 20 }, y: { step: 20 } },
     })
 
     // FIXME use pure CSS to hide utils
@@ -215,7 +215,7 @@ export class Overlay extends Layout {
       animateRectTransition(
         wrapper,
         { left: originLeft, top: originTop },
-        { resume: true, duration: 300 }
+        { resume: true, duration: 300 },
       ).finished.finally(() => this.addDraggable(wrapper))
 
       // Trivial case:
diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index d580cb3..0fea539 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -81,9 +81,9 @@ export const pickMapItem = ({ utils }) =>
           onclick: () => {
             map.classList.add('focus')
             map.scrollIntoView({ behavior: 'smooth' })
-          }
-        })
-    )
+          },
+        }),
+    ),
   })
 
 /**
@@ -118,10 +118,10 @@ export const pickBlockItem = ({ blocks, utils }) =>
             // UX: remove menu after user select/deselect blocks
             const submenu = e.target.closest('.sub-menu')
             submenu.onmouseleave = () => { submenu.closest('.menu').style.display = 'none' }
-          }
+          },
         })
-      }
-    )
+      },
+    ),
   })
 
 /**
@@ -138,14 +138,14 @@ export const pickLayoutItem = ({ container, layouts }) =>
         layout =>
           new Item({
             text: layout.name,
-            onclick: () => container.setAttribute('data-layout', layout.name)
-          })
+            onclick: () => container.setAttribute('data-layout', layout.name),
+          }),
       ),
       new Item({
         innerHTML: '<a href="https://github.com/outdoorsafetylab/dumbymap#layouts" class="external" style="display: block; padding: 0.5rem;">More...</a>',
-        style: 'padding: 0;'
-      })
-    ]
+        style: 'padding: 0;',
+      }),
+    ],
   })
 
 /**
@@ -174,7 +174,7 @@ export const addGeoLink = ({ utils }, range) =>
         range.deleteContents()
         range.insertNode(anchor)
       }
-    }
+    },
   })
 
 /**
@@ -195,7 +195,7 @@ export class Suggestion extends Item {
 
     this.onmouseover = () => {
       Array.from(this.parentElement?.children)?.forEach(s =>
-        s.classList.remove('focus')
+        s.classList.remove('focus'),
       )
       this.classList.add('focus')
     }
@@ -244,12 +244,12 @@ export const renderResults = ({ modal, modalContent }, map) =>
             success: 'green',
             fail: 'red',
             skip: 'black',
-            stop: 'chocolate'
+            stop: 'chocolate',
           }[result.state] ?? 'black'
         printObject(
           result,
           modalContent,
-          `${result.func.name} <span style='float: right;'><span style='display: inline-block; width: 100px; color: ${color};'>${result.state}</span></span>`
+          `${result.func.name} <span style='float: right;'><span style='display: inline-block; width: 100px; color: ${color};'>${result.state}</span></span>`,
         )
       }
 
@@ -258,7 +258,7 @@ export const renderResults = ({ modal, modalContent }, map) =>
       prepareHeading.textContent = 'Prepare Steps'
       modalContent.appendChild(prepareHeading)
       const prepareSteps = map.renderer.results.filter(
-        r => r.type === 'prepare'
+        r => r.type === 'prepare',
       )
       prepareSteps.forEach(printDetails)
 
@@ -268,7 +268,7 @@ export const renderResults = ({ modal, modalContent }, map) =>
       modalContent.appendChild(renderHeading)
       const renderSteps = map.renderer.results.filter(r => r.type === 'render')
       renderSteps.forEach(printDetails)
-    }
+    },
   })
 
 /**
@@ -326,7 +326,7 @@ function printObject (obj, parentElement, name = null) {
 export const toggleBlockFocus = block =>
   new Item({
     text: 'Toggle Focus',
-    onclick: () => block.classList.toggle('focus')
+    onclick: () => block.classList.toggle('focus'),
   })
 
 /**
@@ -337,7 +337,7 @@ export const toggleBlockFocus = block =>
 export const toggleMapFocus = map =>
   new Item({
     text: 'Toggle Focus',
-    onclick: () => map.classList.toggle('focus')
+    onclick: () => map.classList.toggle('focus'),
   })
 
 /**
@@ -354,7 +354,7 @@ export const getCoordinatesByPixels = (map, xy) =>
       const xyString = `[${x.toFixed(7)}, ${y.toFixed(7)}]`
       navigator.clipboard.writeText(xyString)
       window.alert(`${xyString} copied to clipboard`)
-    }
+    },
   })
 
 /**
@@ -365,7 +365,7 @@ export const getCoordinatesByPixels = (map, xy) =>
 export const restoreCamera = map =>
   new Item({
     text: 'Restore Camera',
-    onclick: () => map.renderer.restoreCamera()
+    onclick: () => map.renderer.restoreCamera(),
   })
 
 /**
@@ -387,6 +387,6 @@ export const addRefLink = (cm, refLinks) =>
         } else {
           cm.replaceSelection(`[${selection}][${refLink.ref}]`)
         }
-      }
-    }))
+      },
+    })),
   })
diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs
index 852e4c7..2efc3b1 100644
--- a/src/dumbyUtils.mjs
+++ b/src/dumbyUtils.mjs
@@ -6,7 +6,7 @@ import { insideWindow, insideParent } from './utils'
  *
  * @param {Boolean} reverse -- focus previous map
  */
-export function focusNextMap(reverse = false) {
+export function focusNextMap (reverse = false) {
   const renderedList = this.utils.renderedMaps()
   const index = renderedList.findIndex(e => e.classList.contains('focus'))
   const nextIndex = (index + (reverse ? -1 : 1)) % renderedList.length
@@ -21,13 +21,13 @@ export function focusNextMap(reverse = false) {
  *
  * @param {Boolean} reverse -- focus previous block
  */
-export function focusNextBlock(reverse = false) {
+export function focusNextBlock (reverse = false) {
   const blocks = this.blocks.filter(b =>
     b.checkVisibility({
       contentVisibilityAuto: true,
       opacityProperty: true,
-      visibilityProperty: true
-    })
+      visibilityProperty: true,
+    }),
   )
   const index = blocks.findIndex(e => e.classList.contains('focus'))
   const nextIndex = (index + (reverse ? -1 : 1)) % blocks.length
@@ -56,7 +56,7 @@ export const scrollToBlock = block => {
 /**
  * focusDelay. Delay of throttle, value changes by cases
  */
-export function focusDelay() {
+export function focusDelay () {
   return window.window.getComputedStyle(this.showcase).display === 'none' ? 50 : 300
 }
 
@@ -65,7 +65,7 @@ export function focusDelay() {
  *
  * @param {Boolean} reverse -- Switch to previous one
  */
-export function switchToNextLayout(reverse = false) {
+export function switchToNextLayout (reverse = false) {
   const layouts = this.layouts
   const currentLayoutName = this.container.getAttribute('data-layout')
   const currentIndex = layouts.map(l => l.name).indexOf(currentLayoutName)
@@ -81,7 +81,7 @@ export function switchToNextLayout(reverse = false) {
 /**
  * removeBlockFocus.
  */
-export function removeBlockFocus() {
+export function removeBlockFocus () {
   this.blocks.forEach(b => b.classList.remove('focus'))
 }
 
@@ -94,7 +94,7 @@ export function removeBlockFocus() {
 const getMarkersFromMaps = link => {
   const maps = Array.from(
     link.closest('.Dumby')
-      .querySelectorAll('.mapclay[data-render="fulfilled"]')
+      .querySelectorAll('.mapclay[data-render="fulfilled"]'),
   )
   return maps
     .filter(map => link.targets ? link.targets.includes(map.id) : true)
@@ -105,7 +105,7 @@ const getMarkersFromMaps = link => {
       return map.querySelector(`.marker[title="${markerTitle}"]`) ??
         renderer.addMarker({
           xy: link.xy,
-          title: markerTitle
+          title: markerTitle,
         })
     })
 }
@@ -122,7 +122,7 @@ const addLeaderLine = (link, target) => {
     end: target,
     hide: true,
     middleLabel: link.url.searchParams.get('text'),
-    path: 'magnet'
+    path: 'magnet',
   })
   line.show('draw', { duration: 300 })
 
@@ -196,10 +196,10 @@ export const createDocLink = link => {
         end: target,
         middleLabel: LeaderLine.pathLabel({
           text: label,
-          fontWeight: 'bold'
+          fontWeight: 'bold',
         }),
         hide: true,
-        path: 'magnet'
+        path: 'magnet',
       })
       link.lines.push(line)
       line.show('draw', { duration: 300 })
@@ -229,7 +229,6 @@ const removeLeaderLines = link => {
  * @return {Function} function
  */
 const updateMapCameraByMarker = xy => marker => {
-  console.log('update')
   const renderer = marker.closest('.mapclay')?.renderer
   renderer.updateCamera({ center: xy }, true)
 }
@@ -244,10 +243,17 @@ const isAnchorVisible = anchor => {
   return insideWindow(anchor) && insideParent(anchor, mapContainer)
 }
 
+/**
+ * addAnchorByPoint.
+ *
+ * @param {point} options.point -- object has {x, y} for window coordinates
+ * @param {HTMLElement} options.map
+ * @param {Function} options.validateAnchorName -- validate anchor name is OK to use
+ */
 export const addAnchorByPoint = ({
   point,
   map,
-  validateAnchorName = () => true
+  validateAnchorName = () => true,
 }) => {
   const rect = map.getBoundingClientRect()
   const [x, y] = map.renderer
@@ -268,7 +274,7 @@ export const addAnchorByPoint = ({
   map.renderer.addMarker({
     xy: [x, y],
     title: `${map.id}@${x},${y}`,
-    type: 'circle'
+    type: 'circle',
   })
 
   return { ref: anchorName, link }
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 1da5bb6..b02e783 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -17,7 +17,7 @@ const geoLinkSelector = 'a[href^="geo:"]'
 const layouts = [
   new Layout({ name: 'normal' }),
   new SideBySide({ name: 'side-by-side' }),
-  new Overlay({ name: 'overlay' })
+  new Overlay({ name: 'overlay' }),
 ]
 const mapCache = {}
 
@@ -37,12 +37,12 @@ export const markdown2HTML = (container, mdContent) => {
   const md = MarkdownIt({
     html: true,
     breaks: true,
-    linkify: true
+    linkify: true,
   })
     .use(MarkdownItAnchor, {
       permalink: MarkdownItAnchor.permalink.linkInsideHeader({
-        placement: 'before'
-      })
+        placement: 'before',
+      }),
     })
     .use(MarkdownItFootnote)
     .use(MarkdownItFrontMatter)
@@ -58,11 +58,11 @@ export const markdown2HTML = (container, mdContent) => {
       match.text = `${x}${sep} ${y}`
       match.index += match.text.indexOf(x) + 1
       return match
-    }
+    },
   }
   const patterns = ['[', '(', '📍', '\uFF08', '@', 'geo:', 'twd']
   patterns.forEach(prefix =>
-    md.linkify.add(prefix, coordinateValue)
+    md.linkify.add(prefix, coordinateValue),
   )
 
   // FIXME A better way to generate blocks
@@ -133,7 +133,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
       ...utils,
       renderedMaps: () =>
         Array.from(
-          container.querySelectorAll('.mapclay[data-render=fulfilled]')
+          container.querySelectorAll('.mapclay[data-render=fulfilled]'),
         ).sort((a, b) => a.style.order > b.style.order),
       setContextMenu: (menuCallback) => {
         const originalCallback = container.oncontextmenu
@@ -145,8 +145,8 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
         }
       },
       focusNextMap: throttle(utils.focusNextMap, utils.focusDelay),
-      switchToNextLayout: throttle(utils.switchToNextLayout, 300)
-    }
+      switchToNextLayout: throttle(utils.switchToNextLayout, 300),
+    },
   }
   Object.entries(dumbymap.utils).forEach(([util, func]) => {
     dumbymap.utils[util] = func.bind(dumbymap)
@@ -155,7 +155,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
   // LeaderLine {{{
 
   Array.from(container.querySelectorAll(docLinkSelector)).filter(
-    utils.createDocLink
+    utils.createDocLink,
   )
 
   // Add GeoLinks
@@ -177,7 +177,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
         showcase.checkVisibility({
           contentVisibilityAuto: true,
           opacityProperty: true,
-          visibilityProperty: true
+          visibilityProperty: true,
         })
 
       if (focus) {
@@ -217,12 +217,12 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
         // Resume rect from Semantic HTML to Showcase, with animation
         animateRectTransition(target, placeholder.getBoundingClientRect(), {
           duration: 300,
-          resume: true
+          resume: true,
         })
       } else if (showcase.contains(target)) {
         // Check placeholder is inside Semantic HTML
         const placeholder = htmlHolder.querySelector(
-          `[data-placeholder="${target.id}"]`
+          `[data-placeholder="${target.id}"]`,
         )
         if (!placeholder) { throw Error(`Cannot find placeholder for map "${target.id}"`) }
 
@@ -234,7 +234,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
 
         // animation from Showcase to placeholder
         animateRectTransition(target, placeholder.getBoundingClientRect(), {
-          duration: 300
+          duration: 300,
         }).finished.finally(afterAnimation)
       }
     })
@@ -277,7 +277,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
     attributes: true,
     attributeFilter: ['data-layout'],
     attributeOldValue: true,
-    characterDataOldValue: true
+    characterDataOldValue: true,
   })
 
   onRemove(htmlHolder, () => layoutObserver.disconnect())
@@ -303,7 +303,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
     observer.observe(mapElement, {
       attributes: true,
       attributeFilter: ['class'],
-      attributeOldValue: true
+      attributeOldValue: true,
     })
     onRemove(dumbymap.htmlHolder, () => {
       observer.disconnect()
@@ -329,7 +329,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
 
   // Render each code block with "language-map" class
   const elementsWithMapConfig = Array.from(
-    container.querySelectorAll(mapBlockSelector) ?? []
+    container.querySelectorAll(mapBlockSelector) ?? [],
   )
   /**
    * updateAttributeByStep.
@@ -338,7 +338,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
    */
   const updateAttributeByStep = ({ results, target, steps }) => {
     let passNum = results.filter(
-      r => r.type === 'render' && r.state.match(/success|skip/)
+      r => r.type === 'render' && r.state.match(/success|skip/),
     ).length
     const total = steps.length
     passNum += `/${total}`
@@ -367,9 +367,9 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
     ...config,
     aliases: {
       ...defaultAliases,
-      ...(config.aliases ?? {})
+      ...(config.aliases ?? {}),
     },
-    stepCallback: updateAttributeByStep
+    stepCallback: updateAttributeByStep,
   })
   const render = renderWith(configConverter)
   let order = 0
@@ -422,7 +422,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
           }
         })
       },
-      delay ?? 1000
+      delay ?? 1000,
     )
     onRemove(htmlHolder, () => {
       clearTimeout(timer)
@@ -497,7 +497,7 @@ export const generateMaps = (container, { delay, renderCallback } = {}) => {
   }
   document.addEventListener('click', actionOutsideMenu)
   onRemove(htmlHolder, () =>
-    document.removeEventListener('click', actionOutsideMenu)
+    document.removeEventListener('click', actionOutsideMenu),
   )
   // }}}
   return Object.seal(dumbymap)
diff --git a/src/editor.mjs b/src/editor.mjs
index 3714327..55c6267 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -3,12 +3,12 @@
 import { markdown2HTML, generateMaps } from './dumbymap'
 import { defaultAliases, parseConfigsFromYaml } from 'mapclay'
 import * as menuItem from './MenuItem'
-import { shiftByWindow } from './utils.mjs'
 import { addAnchorByPoint } from './dumbyUtils.mjs'
+import { shiftByWindow } from './utils.mjs'
 import LeaderLine from 'leader-line'
 
 // Set up Containers {{{
-
+/** Variables about dumbymap and editor **/
 const url = new URL(window.location)
 const context = document.querySelector('[data-mode]')
 const dumbyContainer = document.querySelector('.DumbyMap')
@@ -27,7 +27,6 @@ const appendRefLink = ({ cm, ref, link }) => {
 
   refLinks.push({ ref, link })
 }
-
 /**
  * Watch for changes of editing mode
  *
@@ -43,11 +42,10 @@ new window.MutationObserver(() => {
 }).observe(context, {
   attributes: true,
   attributeFilter: ['data-mode'],
-  attributeOldValue: true
+  attributeOldValue: true,
 })
-
 /**
- * toggle editing mode
+ * toggleEditing: toggle editing mode
  */
 const toggleEditing = () => {
   const mode = context.getAttribute('data-mode')
@@ -55,9 +53,7 @@ const toggleEditing = () => {
 }
 // }}}
 // Set up EasyMDE {{{
-
-// Content values for editor
-
+/** Contents for tutorial **/
 const defaultContent =
   `<br>
 
@@ -105,12 +101,13 @@ If you want know more, take a look at subjects below:
 [Editor]: #This%20is%20editor! "=>.editor"
 [subject]: placeholder`
 
+/** Editor from EasyMDE **/
 const editor = new EasyMDE({
   element: textArea,
   initialValue: defaultContent,
   autosave: {
     enabled: true,
-    uniqueId: 'dumbymap'
+    uniqueId: 'dumbymap',
   },
   indentWithTabs: false,
   lineNumbers: true,
@@ -123,21 +120,21 @@ const editor = new EasyMDE({
     map: 'Ctrl-Alt-M',
     debug: 'Ctrl-Alt-D',
     toggleUnorderedList: null,
-    toggleOrderedList: null
+    toggleOrderedList: null,
   },
   toolbar: [
     {
       name: 'roll',
       title: 'Roll a Dice',
       text: '\u{2684}',
-      action: () => addMapRandomlyByPreset()
+      action: () => addMapRandomlyByPreset(),
     },
     {
       name: 'export',
       title: 'Export current page',
       text: '\u{1F4BE}',
       action: () => {
-      }
+      },
     },
     {
       name: 'hash',
@@ -150,59 +147,59 @@ const editor = new EasyMDE({
         window.location.search = ''
         navigator.clipboard.writeText(window.location.href)
         window.alert('URL updated in address bar, you can save current page as bookmark')
-      }
+      },
     },
     '|',
     {
       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,
     },
     '|',
     {
@@ -213,13 +210,14 @@ const editor = new EasyMDE({
         editor.value(defaultContent)
         refLinks = getRefLinks()
         updateDumbyMap()
-      }
-    }
-  ]
+      },
+    },
+  ],
 })
-
+/** CodeMirror Instance **/
 const cm = editor.codemirror
 
+/** Ref Links **/
 const getRefLinks = () => editor.value()
   .split('\n')
   .map(line => {
@@ -244,7 +242,6 @@ const getStateFromHash = hash => {
     return {}
   }
 }
-
 /**
  * get editor content from hash string
  *
@@ -254,7 +251,9 @@ const getContentFromHash = hash => {
   const state = getStateFromHash(hash)
   return state.content
 }
+/** Hash and Query Parameters in URL **/
 const contentFromHash = getContentFromHash(window.location.hash)
+window.location.hash = ''
 
 if (url.searchParams.get('content') === 'tutorial') {
   editor.value(defaultContent)
@@ -263,12 +262,10 @@ if (url.searchParams.get('content') === 'tutorial') {
   editor.cleanup()
   editor.value(contentFromHash)
 }
-
-window.location.hash = ''
-
 // }}}
 // Set up logic about editor content {{{
 
+/** Sync scroll from HTML to CodeMirror **/
 const htmlOnScroll = (ele) => () => {
   if (textArea.dataset.scrollLine) return
 
@@ -288,12 +285,11 @@ const htmlOnScroll = (ele) => () => {
   }
 }
 
-// Sync CodeMirror LineNumber with HTML Contents
 new window.MutationObserver(() => {
   clearTimeout(dumbyContainer.timer)
   dumbyContainer.timer = setTimeout(
     () => delete dumbyContainer.dataset.scrollLine,
-    50
+    50,
   )
 
   const line = dumbyContainer.dataset.scrollLine
@@ -306,7 +302,7 @@ new window.MutationObserver(() => {
   }
 }).observe(dumbyContainer, {
   attributes: true,
-  attributeFilter: ['data-scroll-line']
+  attributeFilter: ['data-scroll-line'],
 })
 
 const setScrollLine = () => {
@@ -318,12 +314,12 @@ const setScrollLine = () => {
 }
 cm.on('scroll', setScrollLine)
 
-// Sync HTML Contents with CodeMirror LineNumber
+/** Sync scroll from CodeMirror to HTML **/
 new window.MutationObserver(() => {
   clearTimeout(textArea.timer)
   textArea.timer = setTimeout(
     () => delete textArea.dataset.scrollLine,
-    1000
+    1000,
   )
 
   const line = textArea.dataset.scrollLine
@@ -345,11 +341,9 @@ new window.MutationObserver(() => {
   dumbymap.htmlHolder.scrollBy(0, top - coords.top + 30)
 }).observe(textArea, {
   attributes: true,
-  attributeFilter: ['data-scroll-line']
+  attributeFilter: ['data-scroll-line'],
 })
 
-markdown2HTML(dumbyContainer, editor.value())
-
 /**
  * addClassToCodeLines. Quick hack to style lines inside code block
  */
@@ -444,7 +438,7 @@ const menuForEditor = (event, menu) => {
   if (context.dataset.mode !== 'editing') {
     const switchToEditingMode = new menuItem.Item({
       innerHTML: '<strong>EDIT</strong>',
-      onclick: () => (context.dataset.mode = 'editing')
+      onclick: () => (context.dataset.mode = 'editing'),
     })
     menu.appendChild(switchToEditingMode)
   }
@@ -456,7 +450,7 @@ const menuForEditor = (event, menu) => {
       onclick: (event) => {
         const { ref, link } = addAnchorByPoint({ point: event, map, validateAnchorName })
         appendRefLink({ cm, ref, link })
-      }
+      },
     })
     menu.insertBefore(item, menu.firstChild)
   }
@@ -468,7 +462,7 @@ const menuForEditor = (event, menu) => {
 const updateDumbyMap = () => {
   markdown2HTML(dumbyContainer, editor.value())
   // debounceForMap(dumbyContainer, afterMapRendered)
-  dumbymap = generateMaps(dumbyContainer, { renderCallback })
+  dumbymap = generateMaps(dumbyContainer, {})
   // Set onscroll callback
   const htmlHolder = dumbymap.htmlHolder
   htmlHolder.onscroll = htmlOnScroll(htmlHolder)
@@ -521,7 +515,7 @@ new window.MutationObserver(() => {
   }
 }).observe(menu, {
   attributes: true,
-  attributeFilter: ['style']
+  attributeFilter: ['style'],
 })
 document.body.append(menu)
 
@@ -613,7 +607,7 @@ const getSuggestionsForOptions = (optionTyped, validOptions) => {
   let suggestOptions = []
 
   const matchedOptions = validOptions.filter(o =>
-    o.valueOf().toLowerCase().includes(optionTyped.toLowerCase())
+    o.valueOf().toLowerCase().includes(optionTyped.toLowerCase()),
   )
 
   if (matchedOptions.length > 0) {
@@ -627,8 +621,8 @@ const getSuggestionsForOptions = (optionTyped, validOptions) => {
       new menuItem.Suggestion({
         text: `<span>${o.valueOf()}</span><span class='info' title="${o.desc ?? ''}">ⓘ</span>`,
         replace: `${o.valueOf()}: `,
-        cm
-      })
+        cm,
+      }),
   )
 }
 // }}}
@@ -647,7 +641,7 @@ const getSuggestionFromMapOption = option => {
   return new menuItem.Suggestion({
     text,
     replace: `${option.valueOf()}: ${option.example ?? ''}`,
-    cm
+    cm,
   })
 }
 // }}}
@@ -663,7 +657,7 @@ const getSuggestionsFromAliases = option =>
     return new menuItem.Suggestion({
       text: `<span>${alias}</span><span class="truncate" style="color: gray">${valueString}</span>`,
       replace: `${option.valueOf()}: ${valueString}`,
-      cm
+      cm,
     })
   }) ?? []
 // }}}
@@ -694,7 +688,7 @@ const getSuggestions = anchor => {
 
   // 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
@@ -704,7 +698,7 @@ const getSuggestions = anchor => {
       .markText(
         { ...anchor, ch: 0 },
         { ...anchor, ch: text.length },
-        { className: 'invalid-input' }
+        { className: 'invalid-input' },
       )
 
   // Check if "use: <renderer>" is set
@@ -732,7 +726,7 @@ const getSuggestions = anchor => {
         .catch(_ => {
           markInputIsInvalid(lineWithRenderer)
           console.warn(
-            `Fail to get valid options from Renderer typed: ${renderer}`
+            `Fail to get valid options from Renderer typed: ${renderer}`,
           )
         })
       return []
@@ -765,7 +759,7 @@ const getSuggestions = anchor => {
       if (!valueTyped) {
         return [
           getSuggestionFromMapOption(matchedOption),
-          ...getSuggestionsFromAliases(matchedOption)
+          ...getSuggestionsFromAliases(matchedOption),
         ].filter(s => s instanceof menuItem.Suggestion)
       }
       if (valueTyped && !isValidValue) {
@@ -787,19 +781,19 @@ const getSuggestions = anchor => {
           new menuItem.Suggestion({
             text: `<span>use: ${renderer}</span><span class='info' title="${info.desc}">ⓘ</span>`,
             replace: `use: ${renderer}`,
-            cm
-          })
+            cm,
+          }),
       )
     return rendererSuggestions.length === 0
       ? []
       : [
-        ...rendererSuggestions,
-        new menuItem.Item({
-          innerHTML: '<a href="https://github.com/outdoorsafetylab/mapclay#renderer" class="external" style="display: block;">More...</a>',
-          className: ['suggestion'],
-          onclick: () => window.open('https://github.com/outdoorsafetylab/mapclay#renderer', '_blank')
-        })
-      ]
+          ...rendererSuggestions,
+          new menuItem.Item({
+            innerHTML: '<a href="https://github.com/outdoorsafetylab/mapclay#renderer" class="external" style="display: block;">More...</a>',
+            className: ['suggestion'],
+            onclick: () => window.open('https://github.com/outdoorsafetylab/mapclay#renderer', '_blank'),
+          }),
+        ]
   }
   return []
 }
@@ -943,7 +937,7 @@ new window.MutationObserver(mutaions => {
 }).observe(dumbyContainer, {
   attributes: true,
   attributeFilter: ['data-layout'],
-  attributeOldValue: true
+  attributeOldValue: true,
 })
 // }}}
 
@@ -954,7 +948,7 @@ const addMapRandomlyByPreset = () => {
   const yamlText = [
     'apply: dist/default.yml',
     'width: 85%',
-    'height: 200px'
+    'height: 200px',
   ]
   const order = [
     'id',
@@ -964,12 +958,12 @@ const addMapRandomlyByPreset = () => {
     'height',
     'center',
     'XYZ',
-    'zoom'
+    'zoom',
   ]
   const aliasesEntries = Object.entries(aliasesForMapOptions)
     .filter(([key, _]) =>
       order.includes(key) &&
-      !yamlText.find(text => text.startsWith(key))
+      !yamlText.find(text => text.startsWith(key)),
     )
   if (aliasesEntries.length === 0) return
 
@@ -997,12 +991,12 @@ const addMapRandomlyByPreset = () => {
   })
 
   yamlText.sort((a, b) =>
-    order.indexOf(a.split(':')[0]) > order.indexOf(b.split(':')[0])
+    order.indexOf(a.split(':')[0]) > order.indexOf(b.split(':')[0]),
   )
   const anchor = cm.getCursor()
   cm.replaceRange(
     '\n```map\n' + yamlText.join('\n') + '\n```\n',
-    anchor
+    anchor,
   )
 }
 
@@ -1068,6 +1062,7 @@ document.addEventListener('selectionchange', () => {
   }
 })
 
+/** Drag/Drop on map for new reference style link */
 dumbyContainer.onmousedown = (e) => {
   // Check should start drag event for GeoLink
   const selection = document.getSelection()
@@ -1087,14 +1082,13 @@ dumbyContainer.onmousedown = (e) => {
   lineEnd.style.cssText = `position: absolute; left: ${e.clientX}px; top: ${e.clientY}px;`
   document.body.appendChild(lineEnd)
 
-  menu.style.display = 'block'
   const line = new LeaderLine({
     start: geoLink,
     end: lineEnd,
-    path: 'magnet'
+    path: 'magnet',
   })
 
-  function onMouseMove(event) {
+  function onMouseMove (event) {
     lineEnd.style.left = event.clientX + 'px'
     lineEnd.style.top = event.clientY + 'px'
     line.position()
@@ -1102,7 +1096,7 @@ dumbyContainer.onmousedown = (e) => {
   }
 
   dumbyContainer.onmousemove = onMouseMove
-  dumbyContainer.onmouseup = function(e) {
+  dumbyContainer.onmouseup = function (e) {
     dumbyContainer.onmousemove = null
     dumbyContainer.onmouseup = null
     line?.remove()
@@ -1122,16 +1116,14 @@ dumbyContainer.onmousedown = (e) => {
       return
     }
 
-    const {ref, link} = refLink
+    const { ref, link } = refLink
     appendRefLink({ cm, ref, link })
     if (selection === ref) {
       cm.replaceSelection(`[${selection}]`)
     } else {
       cm.replaceSelection(`[${selection}][${ref}]`)
     }
-  };
+  }
 }
 
 dumbyContainer.ondragstart = () => false
-
-// vim: sw=2 ts=2 foldmethod=marker foldmarker={{{,}}}
diff --git a/src/utils.mjs b/src/utils.mjs
index dba023a..d408b3d 100644
--- a/src/utils.mjs
+++ b/src/utils.mjs
@@ -39,7 +39,7 @@ export const animateRectTransition = (element, rect, options = {}) => {
     width: w2,
     height: h2,
     left: x2,
-    top: y2
+    top: y2,
   } = element.getBoundingClientRect()
 
   const rw = (w1 ?? w2) / w2
@@ -55,13 +55,13 @@ export const animateRectTransition = (element, rect, options = {}) => {
   const transform2 = `translate(${dx}px, ${dy}px) scale(${rw}, ${rh})`
   const keyframes = [
     { transform: transform1, opacity: 1 },
-    { transform: transform2, opacity: 0.3 }
+    { transform: transform2, opacity: 0.3 },
   ]
   if (options.resume === true) keyframes.reverse()
 
   return element.animate(keyframes, {
     duration: options.duration ?? 500,
-    easing: 'ease-in-out'
+    easing: 'ease-in-out',
   })
 }
 
@@ -81,7 +81,7 @@ export function throttle (func, delay) {
 
     timerFlag = setTimeout(
       () => (timerFlag = null),
-      typeof delay === 'function' ? delay.call(context) : delay
+      typeof delay === 'function' ? delay.call(context) : delay,
     )
 
     return func.call(context, ...args)