@burger-editor/client 4.0.0-alpha.62 → 4.0.0-alpha.64

package/dist/client.js

@@ -1266,7 +1266,6 @@ function setValue(el, name, datum, attr = 'field', filter, xssSanitize = true) {
     if (filter) {
         datum = filter(datum);
     }
-    // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
     if (!propName) {
         setContent$1(el, datum, undefined, xssSanitize);
         return;
@@ -1315,6 +1314,53 @@ function setValue(el, name, datum, attr = 'field', filter, xssSanitize = true) {
     }
     el.setAttribute(propName, `${datum}`);
 }
+/**
+ * Set a boolean attribute on an element via its DOM property.
+ * Empty string is treated as true (HTML boolean attribute convention).
+ * Falls back to setAttribute if the element doesn't match any of the expected types.
+ * @param el
+ * @param datum
+ * @param types
+ * @param prop
+ * @param emptyIsTrue
+ * @returns true if handled
+ */
+function setBooleanAttr(el, datum, types, prop, emptyIsTrue = true) {
+    if (types.some((T) => el instanceof T)) {
+        // SAFETY: prop is always a hardcoded string literal from setBooleanAttrByName
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        el[prop] = emptyIsTrue ? (datum === '' ? true : !!datum) : !!datum;
+        return true;
+    }
+    return false;
+}
+/**
+ * Set an integer attribute on an element via its DOM property.
+ * Removes the attribute if the parsed value is NaN.
+ * Falls back to setAttribute if the element doesn't match any of the expected types.
+ * @param el
+ * @param name
+ * @param datum
+ * @param types
+ * @param prop
+ * @param floor
+ * @returns true if handled
+ */
+function setIntegerAttr(el, name, datum, types, prop, floor = false) {
+    if (types.some((T) => el instanceof T)) {
+        const val = toInt(datum);
+        if (Number.isNaN(val)) {
+            el.removeAttribute(name);
+        }
+        else {
+            // SAFETY: prop is always a hardcoded string literal from setIntegerAttrByName
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            el[prop] = floor ? Math.floor(val) : val;
+        }
+        return true;
+    }
+    return false;
+}
 /**
  *
  * @param el
@@ -1374,6 +1420,25 @@ function set$1(el, prefix, name, datum, xssSanitize = true) {
         }
         return;
     }
+    if (setSpecialAttr(el, name, datum)) {
+        return;
+    }
+    if (setBooleanAttrByName(el, name, datum)) {
+        return;
+    }
+    if (setIntegerAttrByName(el, name, datum)) {
+        return;
+    }
+    el.setAttribute(name, `${datum}`);
+}
+/**
+ * Handle attributes with unique logic that doesn't fit boolean/integer patterns.
+ * @param el
+ * @param name
+ * @param datum
+ * @returns true if handled
+ */
+function setSpecialAttr(el, name, datum) {
     switch (name) {
         case 'contenteditable': {
             switch (datum) {
@@ -1387,7 +1452,7 @@ function set$1(el, prefix, name, datum, xssSanitize = true) {
                     el.removeAttribute(name);
                 }
             }
-            return;
+            return true;
         }
         case 'dir': {
             switch (datum) {
@@ -1396,45 +1461,45 @@ function set$1(el, prefix, name, datum, xssSanitize = true) {
                     el.dir = datum;
                     break;
                 }
-                // case 'auto':
                 default: {
                     el.removeAttribute(name);
                 }
             }
-            return;
+            return true;
         }
         case 'draggable': {
             if (typeof datum === 'boolean') {
                 el.draggable = datum;
-                break;
             }
-            switch (datum) {
-                case 'true': {
-                    el.draggable = true;
-                    break;
-                }
-                case 'false': {
-                    el.draggable = false;
-                    break;
-                }
-                // case 'auto':
-                default: {
-                    el.removeAttribute(name);
+            else {
+                switch (datum) {
+                    case 'true': {
+                        el.draggable = true;
+                        break;
+                    }
+                    case 'false': {
+                        el.draggable = false;
+                        break;
+                    }
+                    default: {
+                        el.removeAttribute(name);
+                    }
                 }
             }
-            return;
+            return true;
         }
         case 'hidden': {
             if (datum === 'until-found') {
                 el.setAttribute(name, datum);
-                return;
             }
-            el.hidden = !!datum;
-            return;
+            else {
+                el.hidden = !!datum;
+            }
+            return true;
         }
         case 'spellcheck': {
             el.spellcheck = !!datum;
-            return;
+            return true;
         }
         case 'tabindex': {
             let i;
@@ -1445,501 +1510,224 @@ function set$1(el, prefix, name, datum, xssSanitize = true) {
                 i = Number.parseInt(datum, 10);
             }
             else {
-                i = datum;
+                i = datum ?? -1;
             }
             el.tabIndex = Number.isNaN(i) ? -1 : Math.floor(i);
-            return;
-        }
-        case 'async': {
-            if (el instanceof HTMLScriptElement) {
-                el.async = !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return true;
         }
         case 'autocomplete': {
             if (el instanceof HTMLInputElement || el instanceof HTMLFormElement) {
-                // @ts-ignore
-                el.autocomplete = datum ? `${datum}` : 'off';
+                el.setAttribute(name, datum ? `${datum}` : 'off');
             }
             else {
                 el.setAttribute(name, `${datum}`);
             }
-            return;
+            return true;
         }
-        case 'autofocus': {
-            if (el instanceof HTMLButtonElement ||
-                el instanceof HTMLInputElement ||
-                el instanceof HTMLSelectElement ||
-                el instanceof HTMLTextAreaElement) {
-                el.autofocus = datum === '' ? true : !!datum;
+        case 'download': {
+            if (el instanceof HTMLAnchorElement) {
+                if (datum || datum === '') {
+                    el.download = `${datum}`;
+                }
+                else {
+                    el.removeAttribute(name);
+                }
             }
             else {
                 el.setAttribute(name, `${datum}`);
             }
-            return;
+            return true;
         }
-        case 'autoplay': {
+        case 'preload': {
             if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
-                el.autoplay = datum === '' ? true : !!datum;
+                switch (datum) {
+                    case '':
+                    case 'auto':
+                    case 'metadata': {
+                        el.preload = datum;
+                        break;
+                    }
+                    default: {
+                        el.preload = 'none';
+                    }
+                }
             }
             else {
                 el.setAttribute(name, `${datum}`);
             }
-            return;
+            return true;
         }
-        case 'checked': {
+        case 'step': {
             if (el instanceof HTMLInputElement) {
-                el.checked = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
-        }
-        case 'cols': {
-            if (el instanceof HTMLTextAreaElement) {
-                const cols = toInt(datum);
-                if (Number.isNaN(cols)) {
-                    el.removeAttribute(name);
+                if (datum === 'any') {
+                    el.step = datum;
                 }
                 else {
-                    el.cols = cols;
+                    const step = toNum(datum);
+                    if (Number.isNaN(step)) {
+                        el.removeAttribute(name);
+                    }
+                    else {
+                        el.step = step.toString(10);
+                    }
                 }
             }
             else {
                 el.setAttribute(name, `${datum}`);
             }
-            return;
+            return true;
         }
-        case 'colspan': {
-            if (el instanceof HTMLTableCellElement) {
-                const colSpan = toInt(datum);
-                if (Number.isNaN(colSpan)) {
-                    el.removeAttribute(name);
+        case 'target': {
+            if (el instanceof HTMLAnchorElement ||
+                el instanceof HTMLAreaElement ||
+                el instanceof HTMLFormElement) {
+                if (datum) {
+                    el.target = `${datum}`;
                 }
                 else {
-                    el.colSpan = colSpan;
+                    el.removeAttribute(name);
                 }
             }
             else {
                 el.setAttribute(name, `${datum}`);
             }
-            return;
+            return true;
+        }
+        default: {
+            return false;
+        }
+    }
+}
+/**
+ * Handle boolean HTML attributes via their DOM properties.
+ * @param el
+ * @param name
+ * @param datum
+ * @returns true if handled
+ */
+function setBooleanAttrByName(el, name, datum) {
+    switch (name) {
+        case 'async': {
+            return setBooleanAttr(el, datum, [HTMLScriptElement], 'async', false);
+        }
+        case 'autofocus': {
+            return setBooleanAttr(el, datum, [HTMLButtonElement, HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement], 'autofocus');
+        }
+        case 'autoplay': {
+            return setBooleanAttr(el, datum, [HTMLAudioElement, HTMLVideoElement], 'autoplay');
+        }
+        case 'checked': {
+            return setBooleanAttr(el, datum, [HTMLInputElement], 'checked');
         }
         case 'controls': {
-            if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
-                el.controls = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLAudioElement, HTMLVideoElement], 'controls');
         }
         case 'default': {
-            if (el instanceof HTMLTrackElement) {
-                el.default = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLTrackElement], 'default');
         }
         case 'defer': {
-            if (el instanceof HTMLScriptElement) {
-                el.defer = !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLScriptElement], 'defer', false);
         }
         case 'disabled': {
-            if (el instanceof HTMLButtonElement ||
-                el instanceof HTMLFieldSetElement ||
-                el instanceof HTMLInputElement ||
-                el instanceof HTMLOptGroupElement ||
-                el instanceof HTMLOptionElement ||
-                el instanceof HTMLSelectElement ||
-                el instanceof HTMLTextAreaElement) {
-                el.disabled = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
-        }
-        case 'download': {
-            if (el instanceof HTMLAnchorElement) {
-                if (datum || datum === '') {
-                    el.download = `${datum}`;
-                }
-                else {
-                    el.removeAttribute(name);
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
-        }
-        case 'high': {
-            if (el instanceof HTMLMeterElement) {
-                const high = toInt(datum);
-                if (Number.isNaN(high)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.high = high;
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [
+                HTMLButtonElement,
+                HTMLFieldSetElement,
+                HTMLInputElement,
+                HTMLOptGroupElement,
+                HTMLOptionElement,
+                HTMLSelectElement,
+                HTMLTextAreaElement,
+            ], 'disabled');
         }
         case 'ismap': {
-            if (el instanceof HTMLImageElement) {
-                el.isMap = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLImageElement], 'isMap');
         }
         case 'loop': {
-            if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
-                el.loop = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
-        }
-        case 'low': {
-            if (el instanceof HTMLMeterElement) {
-                const low = toInt(datum);
-                if (Number.isNaN(low)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.low = low;
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
-        }
-        case 'max': {
-            if (el instanceof HTMLInputElement ||
-                el instanceof HTMLMeterElement ||
-                el instanceof HTMLProgressElement) {
-                const max = toInt(datum);
-                if (Number.isNaN(max)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.max = max;
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
-        }
-        case 'maxlength': {
-            if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-                const maxLength = toInt(datum);
-                if (Number.isNaN(maxLength)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.maxLength = Math.floor(maxLength);
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
-        }
-        case 'min': {
-            if (el instanceof HTMLInputElement || el instanceof HTMLMeterElement) {
-                const min = toInt(datum);
-                if (Number.isNaN(min)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.min = min;
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLAudioElement, HTMLVideoElement], 'loop');
         }
         case 'multiple': {
-            if (el instanceof HTMLInputElement || el instanceof HTMLSelectElement) {
-                el.multiple = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLInputElement, HTMLSelectElement], 'multiple');
         }
         case 'novalidate': {
-            if (el instanceof HTMLFormElement) {
-                el.noValidate = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLFormElement], 'noValidate');
         }
         case 'open': {
-            if (el instanceof HTMLDetailsElement) {
-                el.open = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            break;
-        }
-        case 'optimum': {
-            if (el instanceof HTMLMeterElement) {
-                const optimum = toInt(datum);
-                if (Number.isNaN(optimum)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.optimum = Math.floor(optimum);
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
-        }
-        case 'preload': {
-            if (el instanceof HTMLAudioElement || el instanceof HTMLVideoElement) {
-                switch (datum) {
-                    case '':
-                    case 'auto':
-                    case 'metadata': {
-                        el.preload = datum;
-                        break;
-                    }
-                    default: {
-                        el.preload = 'none';
-                    }
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLDetailsElement], 'open');
         }
         case 'readonly': {
-            if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-                el.readOnly = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLInputElement, HTMLTextAreaElement], 'readOnly');
         }
         case 'required': {
-            if (el instanceof HTMLInputElement ||
-                el instanceof HTMLSelectElement ||
-                el instanceof HTMLTextAreaElement) {
-                el.required = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement], 'required');
         }
         case 'reversed': {
-            if (el instanceof HTMLOListElement) {
-                el.reversed = datum === '' ? true : !!datum;
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setBooleanAttr(el, datum, [HTMLOListElement], 'reversed');
+        }
+        default: {
+            return false;
+        }
+    }
+}
+/**
+ * Handle integer HTML attributes via their DOM properties.
+ * @param el
+ * @param name
+ * @param datum
+ * @returns true if handled
+ */
+function setIntegerAttrByName(el, name, datum) {
+    switch (name) {
+        case 'cols': {
+            return setIntegerAttr(el, name, datum, [HTMLTextAreaElement], 'cols');
+        }
+        case 'colspan': {
+            return setIntegerAttr(el, name, datum, [HTMLTableCellElement], 'colSpan');
+        }
+        case 'high': {
+            return setIntegerAttr(el, name, datum, [HTMLMeterElement], 'high');
+        }
+        case 'low': {
+            return setIntegerAttr(el, name, datum, [HTMLMeterElement], 'low');
+        }
+        case 'max': {
+            return setIntegerAttr(el, name, datum, [HTMLInputElement, HTMLMeterElement, HTMLProgressElement], 'max');
+        }
+        case 'maxlength': {
+            return setIntegerAttr(el, name, datum, [HTMLInputElement, HTMLTextAreaElement], 'maxLength', true);
+        }
+        case 'min': {
+            return setIntegerAttr(el, name, datum, [HTMLInputElement, HTMLMeterElement], 'min');
+        }
+        case 'optimum': {
+            return setIntegerAttr(el, name, datum, [HTMLMeterElement], 'optimum', true);
         }
         case 'rows': {
-            if (el instanceof HTMLTextAreaElement) {
-                const rows = toInt(datum);
-                if (Number.isNaN(rows)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.rows = Math.floor(rows);
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setIntegerAttr(el, name, datum, [HTMLTextAreaElement], 'rows', true);
         }
         case 'rowspan': {
-            if (el instanceof HTMLTableCellElement) {
-                const rowSpan = toInt(datum);
-                if (Number.isNaN(rowSpan)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.rowSpan = Math.floor(rowSpan);
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setIntegerAttr(el, name, datum, [HTMLTableCellElement], 'rowSpan', true);
         }
         case 'size': {
-            if (el instanceof HTMLInputElement || el instanceof HTMLSelectElement) {
-                const size = toInt(datum);
-                if (Number.isNaN(size)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.size = size;
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setIntegerAttr(el, name, datum, [HTMLInputElement, HTMLSelectElement], 'size');
         }
         case 'span': {
-            if (el instanceof HTMLTableColElement) {
-                const span = toInt(datum);
-                if (Number.isNaN(span)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.span = span;
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setIntegerAttr(el, name, datum, [HTMLTableColElement], 'span');
         }
         case 'start': {
-            if (el instanceof HTMLOListElement) {
-                const start = toInt(datum);
-                if (Number.isNaN(start)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.start = start;
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
-        }
-        case 'step': {
-            if (el instanceof HTMLInputElement) {
-                if (datum === 'any') {
-                    el.step = datum;
-                    break;
-                }
-                const step = toNum(datum);
-                if (Number.isNaN(step)) {
-                    el.removeAttribute(name);
-                }
-                else {
-                    el.step = step.toString(10);
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
-        }
-        case 'target': {
-            if (el instanceof HTMLAnchorElement ||
-                el instanceof HTMLAreaElement ||
-                el instanceof HTMLFormElement) {
-                if (datum) {
-                    el.target = `${datum}`;
-                }
-                else {
-                    el.removeAttribute(name);
-                }
-            }
-            else {
-                el.setAttribute(name, `${datum}`);
-            }
-            return;
+            return setIntegerAttr(el, name, datum, [HTMLOListElement], 'start');
         }
-        // case 'accesskey':
-        // case 'class':
-        // case 'contextmenu':
-        // case 'dropzone': // breakable support
-        // case 'id':
-        // case 'itemid':
-        // case 'itemprop':
-        // case 'itemref':
-        // case 'itemscope':
-        // case 'itemtype':
-        // case 'lang':
-        // case 'slot': // breakable support
-        // case 'style':
-        // case 'title':
-        // case 'translate': // breakable support
-        // case 'accept':
-        // case 'accept-charset':
-        // case 'action':
-        // case 'align':
-        // case 'alt':
-        // case 'cite':
-        // case 'coords':
-        // case 'datetime':
-        // case 'enctype':
-        // case 'for':
-        // case 'headers':
-        // case 'href':
-        // case 'hreflang':
-        // case 'kind':
-        // case 'label':
-        // case 'list':
-        // case 'media':
-        // case 'method':
-        // case 'name':
-        // case 'pattern':
-        // case 'placeholder':
-        // case 'poster':
-        // case 'pubdate':
-        // case 'rel':
-        // case 'sandbox':
-        // case 'src':
-        // case 'srcdoc':
-        // case 'srclang':
-        // case 'summary':
-        // case 'type':
-        // case 'usemap':
-        // case 'value':
-        // case 'wrap':
-        // and Data-* attributes
         default: {
-            el.setAttribute(name, `${datum}`);
+            return false;
         }
     }
 }
 /**
- *
- * @param el
- * @param datum
- * @param asHtml
- * @param xssSanitize
+ * Set content value on a form element or general element.
+ * Handles checkbox/radio checked state, input values, and innerHTML/textContent.
+ * @param el - The target element
+ * @param datum - The value to set
+ * @param asHtml - Whether to set as innerHTML (true) or textContent (false)
+ * @param xssSanitize - Whether to sanitize HTML content for XSS protection
  */
 function setContent$1(el, datum, asHtml = true, xssSanitize = true) {
     if (el instanceof HTMLInputElement ||
@@ -2909,8 +2697,11 @@ class EditorUI {
     show() {
         this.#el.hidden = false;
     }
+    /**
+     * @returns Whether the UI element is currently visible (not hidden)
+     */
     visible() {
-        return !!this.#el.hidden;
+        return !this.#el.hidden;
     }
 }
 
@@ -2963,10 +2754,11 @@ class EditorDialog extends EditorUI {
         this.clearTemplate();
         this.#onClosed();
     }
-    complete(
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    formData) {
+    /**
+     * Handle form completion. Subclasses override to process form data before closing.
+     * @param _formData - The submitted form data
+     */
+    complete(_formData) {
         this.close();
     }
     dispatchEvent(event) {
@@ -2981,17 +2773,18 @@ class EditorDialog extends EditorUI {
             ? elements.map((el) => el.shadowRoot?.querySelector(shadowSelector) ?? el)
             : elements;
     }
-    onSubmit(
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    e, 
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    submitter) { }
-    open(
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ...args) {
+    /**
+     * Handle form submission. Subclasses override to add custom behavior.
+     * Return `false` to cancel submission.
+     * @param _e - The submit event
+     * @param _submitter - The element that triggered submission
+     */
+    onSubmit(_e, _submitter) { }
+    /**
+     * Open the dialog. Subclasses override to set up content before showing.
+     * @param _args - Arguments passed by subclass overrides
+     */
+    open(..._args) {
         const cancel = this.#onOpen();
         if (cancel === true) {
             return;
@@ -3215,21 +3008,38 @@ class ComponentObserver {
     constructor() {
         this.#instanceId = instanceId++;
     }
+    /**
+     * Dispatch a custom event on the window.
+     * @template A - The action type key
+     * @param name - The action name to dispatch
+     * @param payload - The event payload matching the action type
+     */
     notify(name, payload) {
         window.dispatchEvent(new CustomEvent(`bge:_${this.#instanceId}_:${name}`, { detail: payload }));
     }
+    /**
+     * Remove all registered event listeners and clear the internal map.
+     */
     off() {
-        for (const [listener, name] of this.#listeners) {
-            // @ts-ignore
-            window.removeEventListener(`bge:_${this.#instanceId}_:${name}`, listener);
+        for (const [wrapper, name] of this.#listeners) {
+            window.removeEventListener(`bge:_${this.#instanceId}_:${name}`, wrapper);
         }
         this.#listeners.clear();
     }
+    /**
+     * Register an event listener. Each call creates a separate wrapper,
+     * so calling with the same listener multiple times will fire it
+     * multiple times per event.
+     * @template A - The action type key
+     * @param name - The action name to listen for
+     * @param listener - Callback receiving the typed payload
+     */
     on(name, listener) {
-        this.#listeners.set(listener, name);
-        window.addEventListener(`bge:_${this.#instanceId}_:${name}`, (e) => {
+        const wrapper = (e) => {
             listener(e.detail);
-        });
+        };
+        this.#listeners.set(wrapper, name);
+        window.addEventListener(`bge:_${this.#instanceId}_:${name}`, wrapper);
     }
 }
 
@@ -3387,11 +3197,17 @@ function getCustomProperties(scope, containerType) {
             }
         }
     }
-    // Merge nested defaults as fallback: use nested default only when
-    // no direct (non-nested) default exists for a category.
-    for (const [category, property] of nestedDefaultValues.entries()) {
-        if (!defaultValues.has(category)) {
-            defaultValues.set(category, property);
+    // Merge nested defaults: use nested default when no direct default exists,
+    // or when the nested default has higher cascade layer priority.
+    for (const [category, nestedProperty] of nestedDefaultValues.entries()) {
+        const directProperty = defaultValues.get(category);
+        if (directProperty) {
+            // Compare by layer priority; on equal priority, direct selector wins
+            const winner = compareCustomPropertyByLayerPriority(nestedProperty, directProperty);
+            defaultValues.set(category, winner);
+        }
+        else {
+            defaultValues.set(category, nestedProperty);
         }
     }
     for (const [category, property] of defaultValues.entries()) {
@@ -4250,9 +4066,21 @@ class ItemEditorDialog extends EditorDialog {
             $ctrl.max = value.toString();
         }
     }
+    /**
+     * Register a change handler for a named form control.
+     * When `runOnInit` is true, fires immediately with the current value
+     * (oldValue is null) and stores the initial value for subsequent comparisons.
+     * @template N - The item data property name
+     * @template D - The data type for the property
+     * @param name - The control name prefixed with `$`
+     * @param handler - Callback receiving new value and previous value
+     * @param runOnInit - Whether to invoke the handler immediately with the current value
+     */
     onChange(name, handler, runOnInit = true) {
         if (runOnInit) {
-            handler(this.get(name), null);
+            const initialValue = this.get(name);
+            this.#values.set(name, initialValue);
+            handler(initialValue, null);
         }
         for (const $ctrl of this.#findAll(name)) {
             $ctrl.addEventListener('change', () => {
@@ -4757,12 +4585,10 @@ class BurgerEditorEngine {
         const mainInitialContent = typeof options.initialContents === 'string'
             ? options.initialContents
             : options.initialContents.main;
-        // @ts-ignore force assign to readonly property
         engine.#main =
             //
             await EditableArea.new('main', mainInitialContent, engine, options.blockMenu, options.initialInsertionButton, stylesheets, options.config.classList, options.editableAreaShell);
         const draftInitialContent = typeof options.initialContents === 'string' ? null : options.initialContents.draft;
-        // @ts-ignore force assign to readonly property
         engine.#draft =
             draftInitialContent == null
                 ? null
@@ -33706,6 +33532,281 @@ function getCurrentEditorState(wysiwygElement) {
   };
 }
 
+const controlUIStyles = `
+	:host {
+		display: block;
+	}
+
+	textarea,
+	iframe  {
+		block-size: 50svh;
+		inline-size: 100%;
+		resize: vertical;
+		overflow-y: auto;
+		background: var(--bge-lightest-color);
+		border: 1px solid var(--bge-border-color);
+		border-radius: var(--border-radius);
+	}
+
+	iframe[data-focus-within="true"],
+	textarea:focus-visible {
+		--bge-border-color: var(--bge-ui-primary-color);
+		--bge-outline-color: var(--bge-ui-primary-color);
+		outline: var(--bge-focus-outline-width) solid var(--bge-outline-color);
+	}
+
+	textarea {
+		font-family: var(--bge-font-family-monospace);
+	}
+
+	[data-bge-mode="wysiwyg"] textarea {
+		display: none;
+	}
+
+	[data-bge-mode="html"] iframe {
+		display: none;
+	}
+
+	[data-text-only-editor] {
+		block-size: 50svh;
+		inline-size: 100%;
+		resize: vertical;
+		overflow-y: auto;
+		background: var(--bge-lightest-color);
+		border: 1px solid var(--bge-border-color);
+		border-radius: var(--border-radius);
+		padding: 1rem;
+		box-sizing: border-box;
+	}
+
+	[data-bge-mode="wysiwyg"] [data-text-only-editor],
+	[data-bge-mode="html"] [data-text-only-editor] {
+		display: none;
+	}
+
+	[data-bge-mode="text-only"] iframe,
+	[data-bge-mode="text-only"] textarea {
+		display: none;
+	}
+
+	[contenteditable="plaintext-only"] {
+		outline: 1px dashed var(--bge-border-color);
+		cursor: text;
+	}
+
+	[contenteditable="plaintext-only"]:hover {
+		outline-color: var(--bge-ui-primary-color);
+	}
+
+	[contenteditable="plaintext-only"]:focus {
+		outline: 2px solid var(--bge-ui-primary-color);
+		outline-offset: 2px;
+	}
+
+	[role="alert"] {
+		margin-block-start: 0.5rem;
+		padding: 0.5rem;
+		background-color: var(--bge-error-color, #fee);
+		border: 1px solid var(--bge-error-border-color, #fcc);
+		border-radius: var(--border-radius);
+		color: var(--bge-error-text-color, #c00);
+		font-size: 0.875rem;
+	}
+`;
+const editorContentStyles = (css) => `
+	:where(html, body) {
+		margin: 0;
+		padding: 0;
+
+		:where(&, *) {
+			box-sizing: border-box;
+		}
+	}
+
+	iframe,
+	[contenteditable="true"] {
+		padding: 1rem;
+		block-size: 100%;
+		box-sizing: border-box;
+	}
+
+	[contenteditable="true"]:focus-visible {
+		outline: none;
+	}
+
+	${css}
+
+	a:any-link {
+		pointer-events: none !important;
+	}
+`;
+
+var __typeError$2 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod$1 = (obj, member, method) => (__accessCheck$2(obj, member, "access private method"), method);
+var _container, _setToTextarea, _preventEnterKey, _syncToTextarea, _TextOnlyModeController_instances, attachEventListeners_fn, identifyEditableElements_fn;
+class TextOnlyModeController {
+  /**
+   * @param setToTextarea - Callback to sync cleaned HTML back to the textarea
+   */
+  constructor(setToTextarea) {
+    __privateAdd$2(this, _TextOnlyModeController_instances);
+    __privateAdd$2(this, _container, null);
+    __privateAdd$2(this, _setToTextarea);
+    /**
+     * Enter キーを防止するハンドラー
+     * @param event
+     */
+    __privateAdd$2(this, _preventEnterKey, (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+      }
+    });
+    /**
+     * text-onlyコンテナからtextareaへ同期
+     */
+    __privateAdd$2(this, _syncToTextarea, () => {
+      if (!__privateGet$2(this, _container)) {
+        return;
+      }
+      const cleanHTML = this.cleanHTML();
+      __privateGet$2(this, _setToTextarea).call(this, cleanHTML);
+    });
+    __privateSet$2(this, _setToTextarea, setToTextarea);
+  }
+  /**
+   * The text-only editing container element, or null if not yet activated.
+   */
+  get container() {
+    return __privateGet$2(this, _container);
+  }
+  /**
+   * text-onlyモードを有効化
+   * @param shadowRoot
+   * @param currentHTML
+   * @param structureChangeMessage
+   * @param previewStyleContent
+   */
+  activate(shadowRoot, currentHTML, structureChangeMessage, previewStyleContent) {
+    if (!__privateGet$2(this, _container)) {
+      __privateSet$2(this, _container, document.createElement("div"));
+      __privateGet$2(this, _container).dataset.textOnlyEditor = "";
+      const modeContainer = shadowRoot.querySelector("[data-bge-mode]");
+      modeContainer.insertBefore(__privateGet$2(this, _container), structureChangeMessage);
+    }
+    const textOnlyStyle = document.createElement("style");
+    textOnlyStyle.dataset.textOnlyStyle = "";
+    if (previewStyleContent) {
+      textOnlyStyle.textContent = previewStyleContent;
+    }
+    __privateGet$2(this, _container).innerHTML = currentHTML;
+    __privateGet$2(this, _container).prepend(textOnlyStyle);
+    __privateMethod$1(this, _TextOnlyModeController_instances, identifyEditableElements_fn).call(this, __privateGet$2(this, _container));
+    __privateMethod$1(this, _TextOnlyModeController_instances, attachEventListeners_fn).call(this);
+    shadowRoot.querySelector(`[data-bge-mode]`).dataset.bgeMode = "text-only";
+  }
+  /**
+   * contenteditable属性を削除してクリーンなHTMLを返す
+   */
+  cleanHTML() {
+    if (!__privateGet$2(this, _container)) {
+      return "";
+    }
+    const clone = __privateGet$2(this, _container).cloneNode(true);
+    const editableElements = clone.querySelectorAll('[contenteditable="plaintext-only"]');
+    for (const el of editableElements) {
+      el.removeAttribute("contenteditable");
+    }
+    const styleElements = clone.querySelectorAll("[data-text-only-style]");
+    for (const el of styleElements) {
+      el.remove();
+    }
+    return clone.innerHTML;
+  }
+  /**
+   * text-onlyモードを無効化
+   */
+  deactivate() {
+    if (!__privateGet$2(this, _container)) {
+      return;
+    }
+    const editableElements = __privateGet$2(this, _container).querySelectorAll(
+      '[contenteditable="plaintext-only"]'
+    );
+    for (const el of editableElements) {
+      el.removeEventListener("keydown", __privateGet$2(this, _preventEnterKey));
+      el.removeEventListener("input", __privateGet$2(this, _syncToTextarea));
+    }
+    __privateGet$2(this, _container).innerHTML = "";
+  }
+  /**
+   * text-onlyモードの値を取得
+   * @param textareaValue
+   */
+  getValue(textareaValue) {
+    if (!__privateGet$2(this, _container)) {
+      return textareaValue;
+    }
+    return this.cleanHTML();
+  }
+  /**
+   * text-onlyモードに値を設定
+   * @param value
+   * @param shadowRoot
+   * @param structureChangeMessage
+   * @param previewStyleContent
+   */
+  setValue(value, shadowRoot, structureChangeMessage, previewStyleContent) {
+    this.deactivate();
+    __privateGet$2(this, _setToTextarea).call(this, value);
+    this.activate(shadowRoot, value, structureChangeMessage, previewStyleContent);
+  }
+}
+_container = new WeakMap();
+_setToTextarea = new WeakMap();
+_preventEnterKey = new WeakMap();
+_syncToTextarea = new WeakMap();
+_TextOnlyModeController_instances = new WeakSet();
+attachEventListeners_fn = function() {
+  if (!__privateGet$2(this, _container)) {
+    return;
+  }
+  const editableElements = __privateGet$2(this, _container).querySelectorAll(
+    '[contenteditable="plaintext-only"]'
+  );
+  for (const el of editableElements) {
+    el.addEventListener("keydown", __privateGet$2(this, _preventEnterKey));
+    el.addEventListener("input", __privateGet$2(this, _syncToTextarea));
+  }
+};
+identifyEditableElements_fn = function(container) {
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const element = node;
+      const hasDirectTextChild = [...element.childNodes].some(
+        (child) => child.nodeType === Node.TEXT_NODE && child.textContent?.trim()
+      );
+      if (hasDirectTextChild) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+      return NodeFilter.FILTER_SKIP;
+    }
+  });
+  const editableElements = [];
+  let currentNode;
+  while (currentNode = walker.nextNode()) {
+    editableElements.push(currentNode);
+  }
+  for (const el of editableElements) {
+    el.setAttribute("contenteditable", "plaintext-only");
+  }
+};
+
 var __defProp$1 = Object.defineProperty;
 var __typeError$1 = (msg) => {
   throw TypeError(msg);
@@ -33717,7 +33818,7 @@ var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "rea
 var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
-var _editor, _editorRoot, _hasStructureChange, _isExpectingHTML, _isInitializing, _previewStyle, _structureChangeMessage, _textarea, _textareaDescriptor, _textOnlyContainer, _preventEnterKey, _syncTextOnlyToTextarea, _BgeWysiwygElement_instances, activateTextOnlyMode_fn, attachTextOnlyEventListeners_fn, checkStructureChange_fn, cleanTextOnlyHTML_fn, deactivateTextOnlyMode_fn, getTextOnlyValue_fn, identifyEditableElements_fn, setStructureChange_fn, setTextOnlyValue_fn, setToTextarea_fn, transaction_fn, updateStructureChangeMessage_fn;
+var _editor, _editorRoot, _hasStructureChange, _isExpectingHTML, _isInitializing, _previewStyle, _structureChangeMessage, _textarea, _textareaDescriptor, _textOnlyMode, _BgeWysiwygElement_instances, checkStructureChange_fn, setStructureChange_fn, setToTextarea_fn, transaction_fn, updateStructureChangeMessage_fn;
 function defineBgeWysiwygElement(options, global = window) {
   if (options?.extensions) {
     BgeWysiwygElement.extensions = options.extensions;
@@ -33746,26 +33847,7 @@ const _BgeWysiwygElement = class _BgeWysiwygElement extends HTMLElement {
     __privateAdd$1(this, _structureChangeMessage, null);
     __privateAdd$1(this, _textarea, null);
     __privateAdd$1(this, _textareaDescriptor, null);
-    __privateAdd$1(this, _textOnlyContainer, null);
-    /**
-     * Enter キーを防止するハンドラー
-     * @param event
-     */
-    __privateAdd$1(this, _preventEnterKey, (event) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-      }
-    });
-    /**
-     * text-onlyコンテナからtextareaへ同期
-     */
-    __privateAdd$1(this, _syncTextOnlyToTextarea, () => {
-      if (this.mode !== "text-only" || !__privateGet$1(this, _textOnlyContainer)) {
-        return;
-      }
-      const cleanHTML = __privateMethod(this, _BgeWysiwygElement_instances, cleanTextOnlyHTML_fn).call(this, "");
-      __privateMethod(this, _BgeWysiwygElement_instances, setToTextarea_fn).call(this, cleanHTML);
-    });
+    __privateAdd$1(this, _textOnlyMode, null);
     this.attachShadow({ mode: "open" });
     if (!this.shadowRoot) {
       throw new Error("Not supported shadow DOM");
@@ -33776,7 +33858,7 @@ const _BgeWysiwygElement = class _BgeWysiwygElement extends HTMLElement {
       throw new ReferenceError("<bge-wysiwyg> is not connected");
     }
     if (this.mode === "text-only") {
-      return __privateMethod(this, _BgeWysiwygElement_instances, getTextOnlyValue_fn).call(this);
+      return __privateGet$1(this, _textOnlyMode)?.getValue(__privateGet$1(this, _textarea).value) ?? __privateGet$1(this, _textarea).value;
     }
     if (this.mode === "wysiwyg") {
       if (!__privateGet$1(this, _editor)) {
@@ -33793,7 +33875,12 @@ const _BgeWysiwygElement = class _BgeWysiwygElement extends HTMLElement {
       throw new ReferenceError("<bge-wysiwyg> is not connected");
     }
     if (this.mode === "text-only") {
-      __privateMethod(this, _BgeWysiwygElement_instances, setTextOnlyValue_fn).call(this, value);
+      __privateGet$1(this, _textOnlyMode)?.setValue(
+        value,
+        this.shadowRoot,
+        __privateGet$1(this, _structureChangeMessage),
+        __privateGet$1(this, _previewStyle)?.textContent ?? null
+      );
       return;
     }
     if (this.mode === "html") {
@@ -33828,14 +33915,20 @@ const _BgeWysiwygElement = class _BgeWysiwygElement extends HTMLElement {
       return;
     }
     if (this.mode === "text-only") {
-      __privateMethod(this, _BgeWysiwygElement_instances, deactivateTextOnlyMode_fn).call(this);
+      __privateGet$1(this, _textOnlyMode)?.deactivate();
     }
     if (mode === "wysiwyg" && this.mode === "html" && __privateMethod(this, _BgeWysiwygElement_instances, checkStructureChange_fn).call(this)) {
       __privateMethod(this, _BgeWysiwygElement_instances, setStructureChange_fn).call(this, true);
       return;
     }
     if (mode === "text-only") {
-      __privateMethod(this, _BgeWysiwygElement_instances, activateTextOnlyMode_fn).call(this);
+      const currentHTML = this.mode === "wysiwyg" ? __privateGet$1(this, _editor).getHTML().replaceAll("<p></p>", "") : __privateGet$1(this, _textarea).value;
+      __privateGet$1(this, _textOnlyMode)?.activate(
+        this.shadowRoot,
+        currentHTML,
+        __privateGet$1(this, _structureChangeMessage),
+        __privateGet$1(this, _previewStyle)?.textContent ?? null
+      );
       return;
     }
     this.shadowRoot.querySelector(`[data-bge-mode]`)?.setAttribute(
@@ -33880,87 +33973,7 @@ const _BgeWysiwygElement = class _BgeWysiwygElement extends HTMLElement {
     const textarea = this.shadowRoot.querySelector("textarea");
     const controlUIStyle = document.createElement("style");
     this.shadowRoot.append(controlUIStyle);
-    controlUIStyle.textContent = `
-			:host {
-				display: block;
-			}
-
-			textarea,
-			iframe  {
-				block-size: 50svh;
-				inline-size: 100%;
-				resize: vertical;
-				overflow-y: auto;
-				background: var(--bge-lightest-color);
-				border: 1px solid var(--bge-border-color);
-				border-radius: var(--border-radius);
-			}
-
-			iframe[data-focus-within="true"],
-			textarea:focus-visible {
-				--bge-border-color: var(--bge-ui-primary-color);
-				--bge-outline-color: var(--bge-ui-primary-color);
-				outline: var(--bge-focus-outline-width) solid var(--bge-outline-color);
-			}
-
-			textarea {
-				font-family: var(--bge-font-family-monospace);
-			}
-
-			[data-bge-mode="wysiwyg"] textarea {
-				display: none;
-			}
-
-			[data-bge-mode="html"] iframe {
-				display: none;
-			}
-
-			[data-text-only-editor] {
-				block-size: 50svh;
-				inline-size: 100%;
-				resize: vertical;
-				overflow-y: auto;
-				background: var(--bge-lightest-color);
-				border: 1px solid var(--bge-border-color);
-				border-radius: var(--border-radius);
-				padding: 1rem;
-				box-sizing: border-box;
-			}
-
-			[data-bge-mode="wysiwyg"] [data-text-only-editor],
-			[data-bge-mode="html"] [data-text-only-editor] {
-				display: none;
-			}
-
-			[data-bge-mode="text-only"] iframe,
-			[data-bge-mode="text-only"] textarea {
-				display: none;
-			}
-
-			[contenteditable="plaintext-only"] {
-				outline: 1px dashed var(--bge-border-color);
-				cursor: text;
-			}
-
-			[contenteditable="plaintext-only"]:hover {
-				outline-color: var(--bge-ui-primary-color);
-			}
-
-			[contenteditable="plaintext-only"]:focus {
-				outline: 2px solid var(--bge-ui-primary-color);
-				outline-offset: 2px;
-			}
-
-			[role="alert"] {
-				margin-block-start: 0.5rem;
-				padding: 0.5rem;
-				background-color: var(--bge-error-color, #fee);
-				border: 1px solid var(--bge-error-border-color, #fcc);
-				border-radius: var(--border-radius);
-				color: var(--bge-error-text-color, #c00);
-				font-size: 0.875rem;
-			}
-		`;
+    controlUIStyle.textContent = controlUIStyles;
     preview.contentDocument.body.addEventListener("focusin", () => {
       preview.dataset.focusWithin = "true";
     });
@@ -34021,6 +34034,9 @@ const _BgeWysiwygElement = class _BgeWysiwygElement extends HTMLElement {
       HTMLTextAreaElement.prototype,
       "value"
     ));
+    __privateSet$1(this, _textOnlyMode, new TextOnlyModeController((html) => {
+      __privateMethod(this, _BgeWysiwygElement_instances, setToTextarea_fn).call(this, html);
+    }));
     Object.defineProperty(__privateGet$1(this, _textarea), "value", {
       get: () => {
         return __privateGet$1(this, _textareaDescriptor)?.get?.call(__privateGet$1(this, _textarea)) ?? "";
@@ -34081,33 +34097,7 @@ const _BgeWysiwygElement = class _BgeWysiwygElement extends HTMLElement {
     if (!__privateGet$1(this, _previewStyle)) {
       throw new ReferenceError("<bge-wysiwyg> is not connected");
     }
-    __privateGet$1(this, _previewStyle).textContent = `
-			:where(html, body) {
-				margin: 0;
-				padding: 0;
-
-				:where(&, *) {
-					box-sizing: border-box;
-				}
-			}
-
-			iframe,
-			[contenteditable="true"] {
-				padding: 1rem;
-				block-size: 100%;
-				box-sizing: border-box;
-			}
-
-			[contenteditable="true"]:focus-visible {
-				outline: none;
-			}
-
-			${css}
-
-			a:any-link {
-				pointer-events: none !important;
-			}
-		`;
+    __privateGet$1(this, _previewStyle).textContent = editorContentStyles(css);
   }
   syncWysiwygToTextarea() {
     if (__privateGet$1(this, _isExpectingHTML)) {
@@ -34178,47 +34168,8 @@ _previewStyle = new WeakMap();
 _structureChangeMessage = new WeakMap();
 _textarea = new WeakMap();
 _textareaDescriptor = new WeakMap();
-_textOnlyContainer = new WeakMap();
-_preventEnterKey = new WeakMap();
-_syncTextOnlyToTextarea = new WeakMap();
+_textOnlyMode = new WeakMap();
 _BgeWysiwygElement_instances = new WeakSet();
-/**
- * text-onlyモードを有効化
- */
-activateTextOnlyMode_fn = function() {
-  const currentHTML = this.mode === "wysiwyg" ? __privateGet$1(this, _editor).getHTML().replaceAll("<p></p>", "") : __privateGet$1(this, _textarea).value;
-  if (!__privateGet$1(this, _textOnlyContainer)) {
-    __privateSet$1(this, _textOnlyContainer, document.createElement("div"));
-    __privateGet$1(this, _textOnlyContainer).dataset.textOnlyEditor = "";
-    const modeContainer = this.shadowRoot.querySelector("[data-bge-mode]");
-    modeContainer.insertBefore(__privateGet$1(this, _textOnlyContainer), __privateGet$1(this, _structureChangeMessage));
-  }
-  const textOnlyStyle = document.createElement("style");
-  textOnlyStyle.dataset.textOnlyStyle = "";
-  if (__privateGet$1(this, _previewStyle)) {
-    textOnlyStyle.textContent = __privateGet$1(this, _previewStyle).textContent;
-  }
-  __privateGet$1(this, _textOnlyContainer).innerHTML = currentHTML;
-  __privateGet$1(this, _textOnlyContainer).prepend(textOnlyStyle);
-  __privateMethod(this, _BgeWysiwygElement_instances, identifyEditableElements_fn).call(this, __privateGet$1(this, _textOnlyContainer));
-  __privateMethod(this, _BgeWysiwygElement_instances, attachTextOnlyEventListeners_fn).call(this);
-  this.shadowRoot.querySelector(`[data-bge-mode]`).dataset.bgeMode = "text-only";
-};
-/**
- * text-onlyモード用のイベントリスナーを設定
- */
-attachTextOnlyEventListeners_fn = function() {
-  if (!__privateGet$1(this, _textOnlyContainer)) {
-    return;
-  }
-  const editableElements = __privateGet$1(this, _textOnlyContainer).querySelectorAll(
-    '[contenteditable="plaintext-only"]'
-  );
-  for (const el of editableElements) {
-    el.addEventListener("keydown", __privateGet$1(this, _preventEnterKey));
-    el.addEventListener("input", __privateGet$1(this, _syncTextOnlyToTextarea));
-  }
-};
 checkStructureChange_fn = function() {
   if (!__privateGet$1(this, _editor) || !__privateGet$1(this, _textarea) || this.mode !== "html") {
     return false;
@@ -34227,76 +34178,6 @@ checkStructureChange_fn = function() {
   const isStructureSame = normalizeHtmlStructure(__privateGet$1(this, _textarea).value, expectedHTML);
   return !isStructureSame;
 };
-/**
- * contenteditable属性を削除してクリーンなHTMLを返す
- * @param html
- */
-cleanTextOnlyHTML_fn = function(html) {
-  if (!__privateGet$1(this, _textOnlyContainer)) {
-    return html;
-  }
-  const clone = __privateGet$1(this, _textOnlyContainer).cloneNode(true);
-  const editableElements = clone.querySelectorAll('[contenteditable="plaintext-only"]');
-  for (const el of editableElements) {
-    el.removeAttribute("contenteditable");
-  }
-  const styleElements = clone.querySelectorAll("[data-text-only-style]");
-  for (const el of styleElements) {
-    el.remove();
-  }
-  return clone.innerHTML;
-};
-/**
- * text-onlyモードを無効化
- */
-deactivateTextOnlyMode_fn = function() {
-  if (!__privateGet$1(this, _textOnlyContainer)) {
-    return;
-  }
-  const editableElements = __privateGet$1(this, _textOnlyContainer).querySelectorAll(
-    '[contenteditable="plaintext-only"]'
-  );
-  for (const el of editableElements) {
-    el.removeEventListener("keydown", __privateGet$1(this, _preventEnterKey));
-    el.removeEventListener("input", __privateGet$1(this, _syncTextOnlyToTextarea));
-  }
-  __privateGet$1(this, _textOnlyContainer).innerHTML = "";
-};
-/**
- * text-onlyモードの値を取得
- */
-getTextOnlyValue_fn = function() {
-  if (!__privateGet$1(this, _textOnlyContainer)) {
-    return __privateGet$1(this, _textarea)?.value ?? "";
-  }
-  return __privateMethod(this, _BgeWysiwygElement_instances, cleanTextOnlyHTML_fn).call(this, "");
-};
-/**
- * 編集可能要素を特定してcontenteditable="plaintext-only"を付与
- * @param container
- */
-identifyEditableElements_fn = function(container) {
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: (node) => {
-      const element = node;
-      const hasDirectTextChild = [...element.childNodes].some(
-        (child) => child.nodeType === Node.TEXT_NODE && child.textContent?.trim()
-      );
-      if (hasDirectTextChild) {
-        return NodeFilter.FILTER_ACCEPT;
-      }
-      return NodeFilter.FILTER_SKIP;
-    }
-  });
-  const editableElements = [];
-  let currentNode;
-  while (currentNode = walker.nextNode()) {
-    editableElements.push(currentNode);
-  }
-  for (const el of editableElements) {
-    el.setAttribute("contenteditable", "plaintext-only");
-  }
-};
 setStructureChange_fn = function(hasChange) {
   if (__privateGet$1(this, _hasStructureChange) === hasChange) {
     return;
@@ -34311,22 +34192,12 @@ setStructureChange_fn = function(hasChange) {
     })
   );
 };
-/**
- * text-onlyモードに値を設定
- * @param value
- */
-setTextOnlyValue_fn = function(value) {
-  __privateMethod(this, _BgeWysiwygElement_instances, deactivateTextOnlyMode_fn).call(this);
-  __privateMethod(this, _BgeWysiwygElement_instances, setToTextarea_fn).call(this, value);
-  __privateMethod(this, _BgeWysiwygElement_instances, activateTextOnlyMode_fn).call(this);
-};
 setToTextarea_fn = function(html) {
   if (!__privateGet$1(this, _textarea) || !__privateGet$1(this, _textareaDescriptor)) {
     throw new ReferenceError("<bge-wysiwyg> is not connected");
   }
   __privateGet$1(this, _textareaDescriptor).set?.call(__privateGet$1(this, _textarea), html);
 };
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 transaction_fn = function(_editor2) {
   const data = {
     state: getCurrentEditorState(this)
@@ -45099,7 +44970,7 @@ function parseConfig(config) {
   }
 }
 
-const version = "4.0.0-alpha.61";
+const version = "4.0.0-alpha.63";
 function attachDraftSwitcher(engine) {
   if (engine.hasDraft()) {
     const container = document.createElement("div");