fix: set layout attribute wisely for observer

2 files changed, 8 insertions, 7 deletions

diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index b909fe0..a21dadb 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -80,6 +80,7 @@ export const markdown2HTML = (container, mdContent) => {
 }
 export const generateMaps = (container, { delay, mapCallback }) => {
   container.classList.add('Dumby')
+  container.removeAttribute('data-layout')
   container.setAttribute('data-layout', layouts[0].name)
   const htmlHolder = container.querySelector('.SemanticHtml') ?? container
   const blocks = Array.from(htmlHolder.querySelectorAll('.dumby-block'))
diff --git a/src/editor.mjs b/src/editor.mjs
index 4c50e79..2938745 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -6,25 +6,25 @@ import * as menuItem from './MenuItem'
 
 // Set up Containers {{{
 
+const context = document.querySelector('[data-mode]')
 const HtmlContainer = document.querySelector('.DumbyMap')
 const textArea = document.querySelector('.editor textarea')
 let dumbymap
 
-new window.MutationObserver(mutations => {
-  const mutation = mutations.at(-1)
-  const mode = mutation.target.getAttribute('data-mode')
+new window.MutationObserver(() => {
+  const mode = context.getAttribute('data-mode')
   const layout = HtmlContainer.getAttribute('data-layout')
   if (mode === 'editing' && layout !== 'normal') {
     HtmlContainer.setAttribute('data-layout', 'normal')
   }
-}).observe(document.querySelector('[data-mode]'), {
+}).observe(context, {
   attributes: true,
   attributeFilter: ['data-mode'],
   attributeOldValue: true
 })
 const toggleEditing = () => {
-  const mode = document.body.getAttribute('data-mode')
-  document.body.setAttribute('data-mode', mode === 'editing' ? '' : 'editing')
+  const mode = context.getAttribute('data-mode')
+  context.setAttribute('data-mode', mode === 'editing' ? '' : 'editing')
 }
 // }}}
 // Set up EasyMDE {{{
@@ -658,7 +658,7 @@ 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', '')
+    context.setAttribute('data-mode', '')
   }
 }).observe(HtmlContainer, {
   attributes: true,