3 files changed, 49 insertions, 28 deletions

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index 50afdb5..1b04d1c 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -1,3 +1,39 @@
+import { createGeoLink } from './dumbymap'
+
+export class GeoLink {
+
+  constructor({ range }) {
+    this.range = range
+  }
+
+  createElement = () => {
+    const element = document.createElement('div')
+    element.className = 'menu-item-add-geolink'
+    element.innerText = "Add GeoLink"
+    element.onclick = this.addGeoLinkbyRange
+
+    return element
+  }
+
+  addGeoLinkbyRange = () => {
+    const range = this.range
+    const content = range.toString()
+    // FIXME Apply geolink only on matching sub-range
+    const match = content.match(/(^\D*[\d.]+)\D+([\d.]+)\D*$/)
+    if (!match) return false
+
+    const [x, y] = match.slice(1)
+    const anchor = document.createElement('a')
+    anchor.textContent = content
+    // FIXME apply WGS84
+    anchor.href = `geo:${y},${x}?xy=${x},${y}`
+
+    if (createGeoLink(anchor)) {
+      range.deleteContents()
+      range.insertNode(anchor)
+    }
+  }
+}
 export class Suggestion {
   constructor({ text, replace }) {
     this.text = text
@@ -13,7 +49,8 @@ export class Suggestion {
     }
     option.classList.add('container__suggestion');
     option.onmouseover = () => {
-      Array.from(menu.children).forEach(s => s.classList.remove('focus'))
+      Array.from(option.parentElement?.children ?? [])
+        .forEach(s => s.classList.remove('focus'))
       option.classList.add('focus')
     }
     option.onmouseout = () => {
diff --git a/src/css/index.css b/src/css/index.css
index 4737535..e4d29da 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -163,3 +163,8 @@ body {
     }
   }
 }
+
+.menu-item-add-geolink {
+  padding: 0.5rem;
+  cursor: pointer;
+}
diff --git a/src/editor.mjs b/src/editor.mjs
index 32929ea..297d75a 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -1,8 +1,8 @@
 /*global EasyMDE*/
 /*eslint no-undef: "error"*/
-import { markdown2HTML, generateMaps, createGeoLink } from './dumbymap'
+import { markdown2HTML, generateMaps } from './dumbymap'
 import { defaultAliases, parseConfigsFromYaml } from 'mapclay'
-import { Suggestion } from './MenuItem'
+import { GeoLink, Suggestion } from './MenuItem'
 
 // Set up Containers {{{
 
@@ -157,7 +157,7 @@ const debounceForMap = (() => {
   let timer = null;
 
   return function(...args) {
-      dumbymap = generateMaps.apply(this, args)
+    dumbymap = generateMaps.apply(this, args)
     // clearTimeout(timer);
     // timer = setTimeout(() => {
     //   dumbymap = generateMaps.apply(this, args)
@@ -576,36 +576,15 @@ layoutObserver.observe(HtmlContainer, {
 });
 // }}}
 // ContextMenu {{{
-const addGeoLinkbyRange = (range) => {
-  const content = range.toString()
-  const match = content.match(/(^\D*[\d\.]+)\D+([\d\.]+)\D*$/)
-  // TODO add more suggestion
-  if (!match) return false
-
-  const [x, y] = match.slice(1)
-  const anchor = document.createElement('a')
-  anchor.textContent = content
-  // FIXME apply WGS84
-  anchor.href = `geo:${y},${x}?xy=${x},${y}`
-
-  if (createGeoLink(anchor)) {
-    range.deleteContents()
-    range.insertNode(anchor)
-  }
-
-}
 document.oncontextmenu = (e) => {
   const selection = document.getSelection()
   const range = selection.getRangeAt(0)
   if (!cm.hasFocus() && selection) {
     e.preventDefault()
     menu.innerHTML = ''
-    menu.style.cssText = `display: block; left: ${e.clientX + 10}px; top: ${e.clientY + 5}px; width: 100px; height: 100px;`
-    menu.innerHTML = '<div style="cursor: pointer;">Create Geo-Link</div>'
-    menu.firstChild.onclick = () => {
-      // menu.style.display = 'none'
-      addGeoLinkbyRange(range)
-    }
+    menu.style.cssText = `display: block; left: ${e.clientX + 10}px; top: ${e.clientY + 5}px;`
+    const addGeoLink = new GeoLink({ range })
+    menu.appendChild(addGeoLink.createElement())
   }
 }