feat: add menu-item for edit map without editor

1 files changed, 33 insertions, 0 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
+  },
+})