feat: add menu-item for edit map without editor

4 files changed, 71 insertions, 11 deletions

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index d9645f7..eb683ea 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -523,3 +523,36 @@ export const addMarker = ({
     callback?.(marker)
   },
 })
+
+/**
+ * editByRawText.
+ *
+ * @param {HTMLElement} ele
+ */
+export const editMapByRawText = (ele) => new Item({
+  text: 'Edit by Raw Text',
+  onclick: () => {
+    const maps = Array.from(ele.querySelectorAll('.mapclay'))
+    if (!maps) return false
+
+    const rect = ele.getBoundingClientRect()
+    const textArea = document.createElement('textarea')
+    textArea.className = 'edit-map'
+    textArea.style.cssText = `width: ${rect.width}px; height: ${rect.height}px;`
+    textArea.value = maps.map(map => map.dataset.mapclay ?? '')
+      .join('---')
+      .replaceAll(',', '\n')
+      .replaceAll(/["{}]/g, '')
+      .replaceAll(/:(\w)/g, ': $1')
+
+    textArea.addEventListener('focusout', () => {
+      const code = document.createElement('code')
+      code.className = 'map'
+      code.textContent = textArea.value
+      textArea.replaceWith(code)
+    })
+    ele.replaceChildren(textArea)
+
+    return true
+  },
+})
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index d641785..f0b4575 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -740,3 +740,10 @@ pre:has(.mapclay) {
 .draggable-block:has(pre:only-child [data-placeholder]:only-child) {
   display: none;
 }
+
+textarea .edit-map {
+  text-wrap: nowrap;
+
+  font-size: 1.1rem;
+  line-height: 1.5;
+}
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 46a67a0..3792994 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -551,7 +551,17 @@ export const generateMaps = (container, {
     }).observe(menu, { childList: true })
     menu.timer = setTimeout(() => menu.remove(), 100)
 
-    // Menu Items for Links
+    /** Menu Item for editing map */
+    const mapEditor = e.target.closest('.edit-map')
+    if (mapEditor) {
+      menu.appendChild(new menuItem.Item({
+        text: 'Finish Editig',
+        onclick: () => mapEditor.blur(),
+      }))
+      return
+    }
+
+    /** Menu Items for Links */
     const geoLink = e.target.closest('.geolink')
     if (geoLink) {
       if (geoLink.classList.contains('from-text')) {
@@ -575,22 +585,31 @@ export const generateMaps = (container, {
     }
 
     // Menu Items for map
-    if (map?.dataset?.render === 'fulfilled') {
+    if (map) {
       const rect = map.getBoundingClientRect()
       const [x, y] = [e.x - rect.left, e.y - rect.top]
-      menu.appendChild(menuItem.toggleMapFocus(map))
-      menu.appendChild(menuItem.renderResults(dumbymap, map))
       menu.appendChild(new menuItem.Folder({
-        text: 'Actions',
+        text: 'Edit Map',
         items: [
-          menuItem.getCoordinatesByPixels(map, [x, y]),
-          menuItem.restoreCamera(map),
-          menuItem.addMarker({
-            point: [e.pageX, e.pageY],
-            map,
-          }),
+          menuItem.editMapByRawText(map.parentElement),
         ],
       }))
+      menu.appendChild(menuItem.renderResults(dumbymap, map))
+
+      if (map.dataset.render === 'fulfilled') {
+        menu.appendChild(menuItem.toggleMapFocus(map))
+        menu.appendChild(new menuItem.Folder({
+          text: 'Actions',
+          items: [
+            menuItem.getCoordinatesByPixels(map, [x, y]),
+            menuItem.restoreCamera(map),
+            menuItem.addMarker({
+              point: [e.pageX, e.pageY],
+              map,
+            }),
+          ],
+        }))
+      }
     } else {
       // Toggle block focus
       if (block) {
diff --git a/src/editor.mjs b/src/editor.mjs
index b023d1a..f7b9c65 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -901,6 +901,7 @@ cm.on('keydown', (_, e) => {
 })
 
 document.onkeydown = e => {
+  if (document.activeElement.matches('textarea')) return null
   if (e.altKey && e.ctrlKey && e.key === 'm') {
     toggleEditing()
     e.preventDefault()