@burger-editor/local 4.0.0-alpha.54 → 4.0.0-alpha.55

package/dist/client.js

@@ -866,7 +866,7 @@ TurndownService.prototype = {
 
     if (input === '') return ''
 
-    var output = process.call(this, new RootNode(input, this.options));
+    var output = process$1.call(this, new RootNode(input, this.options));
     return postProcess.call(this, output)
   },
 
@@ -952,7 +952,7 @@ TurndownService.prototype = {
  * @type String
  */
 
-function process (parentNode) {
+function process$1 (parentNode) {
   var self = this;
   return reduce.call(parentNode.childNodes, function (output, node) {
     node = new Node$2(node, self.options);
@@ -997,7 +997,7 @@ function postProcess (output) {
 
 function replacementForNode (node) {
   var rule = this.rules.forNode(node);
-  var content = process.call(this, node);
+  var content = process$1.call(this, node);
   var whitespace = node.flankingWhitespace;
   if (whitespace.leading || whitespace.trailing) content = content.trim();
   return (
@@ -1296,7 +1296,7 @@ var style$b = "/* No Styling */\n";
 var template$b = "<a href=\"\" data-kind=\"primary\" data-before-icon=\"none\" data-after-icon=\"none\" data-bge=\"link:href, target:target, kind:data-kind, before-icon:data-before-icon, after-icon:data-after-icon\">\n\t<div>\n\t\t<span data-bge=\"text\">ボタン</span>\n\t\t<span data-bge=\"subtext\">サブテキスト</span>\n\t</div>\n</a>\n";
 
 var button = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "button",
   template: template$b,
   style: style$b,
@@ -1352,7 +1352,7 @@ var style$a = "/* No Styling */\n";
 var template$a = "<details data-bge=\"open:open\">\n\t<summary data-bge=\"summary\">折りたたみコンテンツ</summary>\n\t<div data-bge=\"content\"><p>内容を入力してください</p></div>\n</details>\n";
 
 var details = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "details",
   template: template$a,
   style: style$a,
@@ -1366,7 +1366,7 @@ var style$9 = "[data-bgi='download-file'] {\n\t[data-bge*='size'] {\n\t\t&::befo
 var template$9 = "<a href=\"./files/bgeditor/bg-sample.pdf\" target=\"_blank\" data-bge=\"path:href, download:download\">\n\t<div>\n\t\t<span data-bge=\"name\">サンプルダウンロードファイル</span>\n\t\t<span data-bge=\"formated-size, size:data-size\" data-size=\"138158\">134.92kB</span>\n\t</div>\n</a>\n";
 
 var downloadFile = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "download-file",
   template: template$9,
   style: style$9,
@@ -1405,7 +1405,7 @@ var style$8 = "[data-bgi='google-maps'] {\n\tdiv {\n\t\tinline-size: 100%;\n\t\t
 var template$8 = "<div data-lat=\"35.681382\" data-lng=\"139.766084\" data-zoom=\"16\" data-bge=\"lat:data-lat, lng:data-lng, zoom:data-zoom\">\n\t<img data-bge=\"img:src\" src=\"https://maps.google.com/maps/api/staticmap?center=35.681382,139.766084&amp;zoom=16&amp;size=640x400&amp;markers=color:red|color:red|35.681382,139.766084&amp;scale=2&amp;key=%googleMapsApiKey%\" width=\"8\" height=\"5\" alt=\"Google Maps\" />\n</div>\n<a href=\"https://maps.apple.com/?q=35.681382,139.766084\" data-bge=\"url:href\" target=\"_blank\"><span>アプリで開く</span></a>\n";
 
 var googleMaps = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "google-maps",
   template: template$8,
   style: style$8,
@@ -1540,7 +1540,7 @@ var style$7 = "[data-bgi='hr'] {\n\t--inline-size: 100%;\n\t--border-color: #000
 var template$7 = "<div data-bgi-hr-kind=\"primary\" data-bge=\"kind:data-bgi-hr-kind\">\n\t<hr />\n</div>\n";
 
 var hr = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "hr",
   template: template$7,
   style: style$7,
@@ -1630,7 +1630,7 @@ function createWidthState() {
 
 const ORIGIN = "__org";
 var image = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "image",
   template: template$6,
   style: style$6,
@@ -1828,7 +1828,7 @@ var style$5 = "[data-bgi='import'] {\n\tbge-import {\n\t\t&::before {\n\t\t\tfon
 var template$5 = "<bge-import data-bge=\":src\" src=\"\"></bge-import>\n";
 
 var importItem = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "import",
   template: template$5,
   style: style$5,
@@ -1842,7 +1842,7 @@ var style$4 = "/* No Styling */\n";
 var template$4 = "<div data-bge=\":scrollable\" data-bge-scrollable=\"false\">\n\t<table>\n\t\t<caption data-bge=\"caption\">\n\t\t\tキャプションを入力してください\n\t\t</caption>\n\t\t<tbody data-bge-list>\n\t\t\t<tr>\n\t\t\t\t<th data-bge=\"th\">表組の見出し</th>\n\t\t\t\t<td data-bge=\"td\">表組の内容を入力してください</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>\n";
 
 var table = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "table",
   template: template$4,
   style: style$4,
@@ -1870,7 +1870,7 @@ var style$3 = "/* No Styling */\n";
 var template$3 = "<h2 data-bge=\"title-h2\">見出しを入力してください</h2>\n";
 
 var titleH2 = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "title-h2",
   template: template$3,
   style: style$3,
@@ -1884,7 +1884,7 @@ var style$2 = "/* No Styling */\n";
 var template$2 = "<h3 data-bge=\"title-h3\">見出しを入力してください</h3>\n";
 
 var titleH3 = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "title-h3",
   template: template$2,
   style: style$2,
@@ -1898,7 +1898,7 @@ var style$1 = "/* No Styling */\n";
 var template$1 = "<div data-bge=\"wysiwyg\"><p>本文を入力してください</p></div>\n";
 
 var wysiwyg = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "wysiwyg",
   template: template$1,
   style: style$1,
@@ -1913,7 +1913,7 @@ var template = "<div data-id=\"3KtWfp0UopM\" data-title=\"YouTube動画\" data-w
 
 const FALLBACK_TITLE = "YouTube\u52D5\u753B";
 var youtube = createItem$1({
-  version: "4.0.0-alpha.53",
+  version: "4.0.0-alpha.54",
   name: "youtube",
   template,
   style: style$c,
@@ -7015,7 +7015,8 @@ class BurgerEditorEngine {
     engine.save();
     if (options.defineCustomElement) {
       await options.defineCustomElement({
-        className: options.config.classList.join(" ")
+        className: options.config.classList.join(" "),
+        experimental: options.config.experimental
       });
     }
     engine.#healthMonitor.start();
@@ -32655,6 +32656,111 @@ function createElement(options, global = window) {
   }
   return wrapperElement;
 }
+function getCurrentEditorState(wysiwygElement) {
+  const editor = wysiwygElement.editor;
+  if (!editor) {
+    throw new ReferenceError("TipTap editor is not initialized");
+  }
+  return {
+    bold: {
+      disabled: !editor.can().chain().focus().toggleBold().run(),
+      active: editor.isActive("bold")
+    },
+    italic: {
+      disabled: !editor.can().chain().focus().toggleItalic().run(),
+      active: editor.isActive("italic")
+    },
+    underline: {
+      disabled: !editor.can().chain().focus().toggleUnderline().run(),
+      active: editor.isActive("underline")
+    },
+    strike: {
+      disabled: !editor.can().chain().focus().toggleStrike().run(),
+      active: editor.isActive("strike")
+    },
+    subscript: {
+      disabled: !editor.can().chain().focus().toggleSubscript().run(),
+      active: editor.isActive("subscript")
+    },
+    superscript: {
+      disabled: !editor.can().chain().focus().toggleSuperscript().run(),
+      active: editor.isActive("superscript")
+    },
+    code: {
+      disabled: !editor.can().chain().focus().toggleCode().run(),
+      active: editor.isActive("code")
+    },
+    link: {
+      disabled: false,
+      // linkは常に有効
+      active: editor.isActive("link")
+    },
+    buttonLikeLink: {
+      disabled: false,
+      active: editor.isActive("buttonLikeLink")
+    },
+    bulletList: {
+      disabled: !editor.can().chain().focus().toggleBulletList().run(),
+      active: editor.isActive("bulletList")
+    },
+    orderedList: {
+      disabled: !editor.can().chain().focus().toggleOrderedList().run(),
+      active: editor.isActive("orderedList")
+    },
+    blockquote: {
+      disabled: !editor.can().chain().focus().toggleBlockquote().run(),
+      active: editor.isActive("blockquote")
+    },
+    note: {
+      disabled: !editor.can().chain().focus().toggleNote().run(),
+      active: editor.isActive("note")
+    },
+    flexBox: {
+      disabled: !editor.can().chain().focus().toggleFlexBox().run(),
+      active: editor.isActive("flexBox")
+    },
+    h1: {
+      disabled: !editor.can().chain().focus().toggleHeading({ level: 1 }).run(),
+      active: editor.isActive("heading", { level: 1 })
+    },
+    h2: {
+      disabled: !editor.can().chain().focus().toggleHeading({ level: 2 }).run(),
+      active: editor.isActive("heading", { level: 2 })
+    },
+    h3: {
+      disabled: !editor.can().chain().focus().toggleHeading({ level: 3 }).run(),
+      active: editor.isActive("heading", { level: 3 })
+    },
+    h4: {
+      disabled: !editor.can().chain().focus().toggleHeading({ level: 4 }).run(),
+      active: editor.isActive("heading", { level: 4 })
+    },
+    h5: {
+      disabled: !editor.can().chain().focus().toggleHeading({ level: 5 }).run(),
+      active: editor.isActive("heading", { level: 5 })
+    },
+    h6: {
+      disabled: !editor.can().chain().focus().toggleHeading({ level: 6 }).run(),
+      active: editor.isActive("heading", { level: 6 })
+    },
+    image: {
+      disabled: !editor.can().chain().focus().setImage({ src: "" }).run(),
+      active: editor.isActive("image")
+    },
+    alignStart: {
+      disabled: !editor.can().chain().focus().toggleAlign("start").run(),
+      active: editor.isActive("paragraph", { "data-bgc-align": "start" })
+    },
+    alignCenter: {
+      disabled: !editor.can().chain().focus().toggleAlign("center").run(),
+      active: editor.isActive("paragraph", { "data-bgc-align": "center" })
+    },
+    alignEnd: {
+      disabled: !editor.can().chain().focus().toggleAlign("end").run(),
+      active: editor.isActive("paragraph", { "data-bgc-align": "end" })
+    }
+  };
+}
 var __defProp$1 = Object.defineProperty;
 var __typeError$1 = (msg) => {
   throw TypeError(msg);
@@ -32666,7 +32772,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, _BgeWysiwygElement_instances, checkStructureChange_fn, setStructureChange_fn, setToTextarea_fn, transaction_fn, updateStructureChangeMessage_fn;
+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;
 function defineBgeWysiwygElement(options, global = window) {
   if (options?.extensions) {
     BgeWysiwygElement.extensions = options.extensions;
@@ -32674,6 +32780,9 @@ function defineBgeWysiwygElement(options, global = window) {
   if (options?.wrapperElement) {
     BgeWysiwygElement.wrapperElement = options.wrapperElement;
   }
+  if (options?.experimental?.textOnlyMode !== void 0) {
+    BgeWysiwygElement.experimentalTextOnlyMode = options.experimental.textOnlyMode;
+  }
   const tagName = `bge-wysiwyg`;
   if (!global.customElements.get(tagName)) {
     global.customElements.define(tagName, BgeWysiwygElement);
@@ -32692,6 +32801,19 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
     __privateAdd$1(this, _structureChangeMessage, null);
     __privateAdd$1(this, _textarea, null);
     __privateAdd$1(this, _textareaDescriptor, null);
+    __privateAdd$1(this, _textOnlyContainer, null);
+    __privateAdd$1(this, _preventEnterKey, (event2) => {
+      if (event2.key === "Enter") {
+        event2.preventDefault();
+      }
+    });
+    __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);
+    });
     this.attachShadow({ mode: "open" });
     if (!this.shadowRoot) {
       throw new Error("Not supported shadow DOM");
@@ -32701,6 +32823,9 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
     if (!__privateGet$1(this, _textarea)) {
       throw new ReferenceError("<bge-wysiwyg> is not connected");
     }
+    if (this.mode === "text-only") {
+      return __privateMethod(this, _BgeWysiwygElement_instances, getTextOnlyValue_fn).call(this);
+    }
     if (this.mode === "wysiwyg") {
       if (!__privateGet$1(this, _editor)) {
         throw new ReferenceError("<bge-wysiwyg> is not connected");
@@ -32715,6 +32840,10 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
     if (!__privateGet$1(this, _textarea)) {
       throw new ReferenceError("<bge-wysiwyg> is not connected");
     }
+    if (this.mode === "text-only") {
+      __privateMethod(this, _BgeWysiwygElement_instances, setTextOnlyValue_fn).call(this, value);
+      return;
+    }
     if (this.mode === "html") {
       __privateGet$1(this, _textareaDescriptor)?.set?.call(__privateGet$1(this, _textarea), value);
       return;
@@ -32738,16 +32867,25 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
   }
   get mode() {
     const modeAttr = this.shadowRoot?.querySelector(`[data-bge-mode]`)?.dataset.bgeMode;
-    return modeAttr === "html" ? "html" : "wysiwyg";
+    if (modeAttr === "html") return "html";
+    if (modeAttr === "text-only") return "text-only";
+    return "wysiwyg";
   }
   set mode(mode) {
     if (!__privateGet$1(this, _editor) || !__privateGet$1(this, _textarea)) {
       return;
     }
+    if (this.mode === "text-only") {
+      __privateMethod(this, _BgeWysiwygElement_instances, deactivateTextOnlyMode_fn).call(this);
+    }
     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);
+      return;
+    }
     this.shadowRoot.querySelector(`[data-bge-mode]`)?.setAttribute(
       "data-bge-mode",
       mode
@@ -32777,7 +32915,7 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
     const label = this.getAttribute("label") ?? "内容";
     const itemName = this.getAttribute("item-name");
     const messageId = `bge-structure-change-message-${Math.random().toString(36).slice(2, 11)}`;
-    const structureChangeMessage = "HTMLの構造がWYSIWYG（デザイン）モードに対応していません。HTMLモードのみで編集可能です。";
+    const structureChangeMessage = _BgeWysiwygElement2.experimentalTextOnlyMode ? "HTMLの構造がデザインモードに対応していません。HTMLモードまたはテキスト編集モードで編集してください。" : "HTMLの構造がWYSIWYG（デザイン）モードに対応していません。HTMLモードで編集してください。";
     this.shadowRoot.innerHTML = `<div data-bge-mode="wysiwyg"><iframe></iframe><textarea aria-label="${label} HTML" aria-describedby="${messageId}"></textarea><div id="${messageId}" role="alert" aria-live="polite" style="display: none;">${structureChangeMessage}</div></div>`;
     const preview = this.shadowRoot.querySelector("iframe");
     if (!preview || !preview.contentWindow || !preview.contentDocument) {
@@ -32825,6 +32963,42 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
 				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;
@@ -32966,13 +33140,13 @@ const _BgeWysiwygElement = class _BgeWysiwygElement2 extends HTMLElement {
 			}
 
 			iframe,
-			[contenteditable] {
+			[contenteditable="true"] {
 				padding: 1rem;
 				block-size: 100%;
 				box-sizing: border-box;
 			}
 
-			[contenteditable]:focus-visible {
+			[contenteditable="true"]:focus-visible {
 				outline: none;
 			}
 
@@ -33052,7 +33226,40 @@ _previewStyle = /* @__PURE__ */ new WeakMap();
 _structureChangeMessage = /* @__PURE__ */ new WeakMap();
 _textarea = /* @__PURE__ */ new WeakMap();
 _textareaDescriptor = /* @__PURE__ */ new WeakMap();
+_textOnlyContainer = /* @__PURE__ */ new WeakMap();
+_preventEnterKey = /* @__PURE__ */ new WeakMap();
+_syncTextOnlyToTextarea = /* @__PURE__ */ new WeakMap();
 _BgeWysiwygElement_instances = /* @__PURE__ */ new WeakSet();
+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 = "";
+    this.shadowRoot.querySelector("[data-bge-mode]").append(__privateGet$1(this, _textOnlyContainer));
+  }
+  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";
+};
+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;
@@ -33061,6 +33268,62 @@ checkStructureChange_fn = function() {
   const isStructureSame = normalizeHtmlStructure(__privateGet$1(this, _textarea).value, expectedHTML);
   return !isStructureSame;
 };
+cleanTextOnlyHTML_fn = function(html2) {
+  if (!__privateGet$1(this, _textOnlyContainer)) {
+    return html2;
+  }
+  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;
+};
+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 = "";
+};
+getTextOnlyValue_fn = function() {
+  if (!__privateGet$1(this, _textOnlyContainer)) {
+    return __privateGet$1(this, _textarea)?.value ?? "";
+  }
+  return __privateMethod(this, _BgeWysiwygElement_instances, cleanTextOnlyHTML_fn).call(this, "");
+};
+identifyEditableElements_fn = function(container) {
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => {
+      const element2 = node;
+      const hasDirectTextChild = [...element2.childNodes].some(
+        (child2) => child2.nodeType === Node.TEXT_NODE && child2.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;
@@ -33075,112 +33338,20 @@ setStructureChange_fn = function(hasChange) {
     })
   );
 };
+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(html2) {
   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), html2);
 };
-transaction_fn = function(editor) {
+transaction_fn = function(_editor2) {
   const data = {
-    state: {
-      bold: {
-        disabled: !editor.can().chain().focus().toggleBold().run(),
-        active: editor.isActive("bold")
-      },
-      italic: {
-        disabled: !editor.can().chain().focus().toggleItalic().run(),
-        active: editor.isActive("italic")
-      },
-      underline: {
-        disabled: !editor.can().chain().focus().toggleUnderline().run(),
-        active: editor.isActive("underline")
-      },
-      strike: {
-        disabled: !editor.can().chain().focus().toggleStrike().run(),
-        active: editor.isActive("strike")
-      },
-      subscript: {
-        disabled: !editor.can().chain().focus().toggleSubscript().run(),
-        active: editor.isActive("subscript")
-      },
-      superscript: {
-        disabled: !editor.can().chain().focus().toggleSuperscript().run(),
-        active: editor.isActive("superscript")
-      },
-      code: {
-        disabled: !editor.can().chain().focus().toggleCode().run(),
-        active: editor.isActive("code")
-      },
-      link: {
-        disabled: !editor.can().chain().focus().toggleLink().run(),
-        active: editor.isActive("link")
-      },
-      buttonLikeLink: {
-        disabled: !editor.can().chain().focus().toggleButtonLikeLink().run(),
-        active: editor.isActive("buttonLikeLink")
-      },
-      blockquote: {
-        disabled: !editor.can().chain().focus().toggleBlockquote().run(),
-        active: editor.isActive("blockquote")
-      },
-      bulletList: {
-        disabled: !editor.can().chain().focus().toggleBulletList().run(),
-        active: editor.isActive("bulletList")
-      },
-      orderedList: {
-        disabled: !editor.can().chain().focus().toggleOrderedList().run(),
-        active: editor.isActive("orderedList")
-      },
-      note: {
-        disabled: !editor.can().chain().focus().toggleNote().run(),
-        active: editor.isActive("note")
-      },
-      h1: {
-        disabled: !editor.can().chain().focus().toggleHeading({ level: 1 }).run(),
-        active: editor.isActive("heading", { level: 1 })
-      },
-      h2: {
-        disabled: !editor.can().chain().focus().toggleHeading({ level: 2 }).run(),
-        active: editor.isActive("heading", { level: 2 })
-      },
-      h3: {
-        disabled: !editor.can().chain().focus().toggleHeading({ level: 3 }).run(),
-        active: editor.isActive("heading", { level: 3 })
-      },
-      h4: {
-        disabled: !editor.can().chain().focus().toggleHeading({ level: 4 }).run(),
-        active: editor.isActive("heading", { level: 4 })
-      },
-      h5: {
-        disabled: !editor.can().chain().focus().toggleHeading({ level: 5 }).run(),
-        active: editor.isActive("heading", { level: 5 })
-      },
-      h6: {
-        disabled: !editor.can().chain().focus().toggleHeading({ level: 6 }).run(),
-        active: editor.isActive("heading", { level: 6 })
-      },
-      flexBox: {
-        disabled: !editor.can().chain().focus().toggleFlexBox().run(),
-        active: editor.isActive("flexBox")
-      },
-      image: {
-        disabled: !editor.can().chain().focus().setImage({ src: "" }).run(),
-        active: editor.isActive("image")
-      },
-      alignStart: {
-        disabled: !editor.can().chain().focus().toggleAlign("start").run(),
-        active: editor.isActive("paragraph", { "data-bgc-align": "start" })
-      },
-      alignCenter: {
-        disabled: !editor.can().chain().focus().toggleAlign("center").run(),
-        active: editor.isActive("paragraph", { "data-bgc-align": "center" })
-      },
-      alignEnd: {
-        disabled: !editor.can().chain().focus().toggleAlign("end").run(),
-        active: editor.isActive("paragraph", { "data-bgc-align": "end" })
-      }
-    }
+    state: getCurrentEditorState(this)
   };
   return data;
 };
@@ -33196,6 +33367,7 @@ updateStructureChangeMessage_fn = function() {
 };
 __publicField$1(_BgeWysiwygElement, "extensions", null);
 __publicField$1(_BgeWysiwygElement, "wrapperElement", null);
+__publicField$1(_BgeWysiwygElement, "experimentalTextOnlyMode", false);
 let BgeWysiwygElement = _BgeWysiwygElement;
 var __defProp = Object.defineProperty;
 var __typeError = (msg) => {
@@ -33208,11 +33380,40 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var _wysiwygElement;
+const BUTTON_TO_STATE_KEY_MAP = {
+  bold: "bold",
+  italic: "italic",
+  underline: "underline",
+  strikethrough: "strike",
+  code: "code",
+  link: "link",
+  "button-like-link": "buttonLikeLink",
+  blockquote: "blockquote",
+  "bullet-list": "bulletList",
+  "ordered-list": "orderedList",
+  note: "note",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  "flex-box": "flexBox",
+  subscript: "subscript",
+  superscript: "superscript",
+  "align-start": "alignStart",
+  "align-center": "alignCenter",
+  "align-end": "alignEnd",
+  image: "image"
+};
 function defineBgeWysiwygEditorElement(options, global = window) {
   defineBgeWysiwygElement(options, global);
   if (options?.wrapperElement) {
     BgeWysiwygEditorElement.wrapperElement = options.wrapperElement;
   }
+  if (options?.experimental?.textOnlyMode !== void 0) {
+    BgeWysiwygEditorElement.experimentalTextOnlyMode = options.experimental.textOnlyMode;
+  }
   const tagName = `bge-wysiwyg-editor`;
   if (!global.customElements.get(tagName)) {
     global.customElements.define(tagName, BgeWysiwygEditorElement);
@@ -33260,7 +33461,11 @@ const _BgeWysiwygEditorElement = class _BgeWysiwygEditorElement2 extends HTMLEle
 						${commands.includes("align-end") ? `<button type="button" data-bge-toolbar-button="align-end">${IconAlignRight}</button>` : ""}
 					</div>
 					<div data-bge-toolbar-group>
-						<button type="button" data-bge-toolbar-button="html-mode">HTML Mode</button>
+						${_BgeWysiwygEditorElement2.experimentalTextOnlyMode ? `<select data-bge-mode-selector>
+								<option value="wysiwyg">デザインモード</option>
+								<option value="text-only">テキスト編集モード</option>
+								<option value="html">HTMLモード</option>
+							</select>` : `<button type="button" data-bge-toolbar-button="html-mode">HTML Mode</button>`}
 					</div>
 				</div>
 				<bge-wysiwyg ${itemName ? `item-name="${itemName}"` : ""}>
@@ -33301,6 +33506,16 @@ const _BgeWysiwygEditorElement = class _BgeWysiwygEditorElement2 extends HTMLEle
     }
     return __privateGet(this, _wysiwygElement).value;
   }
+  /**
+   * 現在のエディタモードを取得
+   * @returns 'wysiwyg' | 'html' | 'text-only'
+   */
+  get mode() {
+    if (!__privateGet(this, _wysiwygElement)) {
+      throw new ReferenceError("<bge-wysiwyg-editor> is not connected");
+    }
+    return __privateGet(this, _wysiwygElement).mode;
+  }
   connectedCallback() {
     __privateSet(this, _wysiwygElement, this.querySelector("bge-wysiwyg"));
     if (!__privateGet(this, _wysiwygElement)) {
@@ -33317,35 +33532,86 @@ const _BgeWysiwygEditorElement = class _BgeWysiwygEditorElement2 extends HTMLEle
     }
     __privateGet(this, _wysiwygElement).addEventListener("transaction", (event2) => {
       for (const button of buttons) {
-        updateButtonState(button, event2.detail.state);
+        updateButtonState(button, event2.detail.state, this);
       }
     });
-    const htmlModeButton = this.querySelector(
-      '[data-bge-toolbar-button="html-mode"]'
-    );
-    __privateGet(this, _wysiwygElement).addEventListener("bge:structure-change", (event2) => {
-      const hasStructureChange = event2.detail.hasStructureChange;
-      const isHtmlMode = __privateGet(this, _wysiwygElement)?.mode === "html";
-      htmlModeButton.disabled = isHtmlMode && hasStructureChange;
-    });
-    const initialHasStructureChange = __privateGet(this, _wysiwygElement).hasStructureChange;
-    const initialIsHtmlMode = __privateGet(this, _wysiwygElement).mode === "html";
-    htmlModeButton.disabled = initialIsHtmlMode && initialHasStructureChange;
-    htmlModeButton.addEventListener("click", () => {
-      if (!__privateGet(this, _wysiwygElement)) {
-        throw new ReferenceError("<bge-wysiwyg-editor> is not connected");
-      }
-      const currentMode = __privateGet(this, _wysiwygElement).mode;
-      const newMode = currentMode === "html" ? "wysiwyg" : "html";
-      htmlModeButton.ariaPressed = newMode === "html" ? "true" : "false";
-      __privateGet(this, _wysiwygElement).mode = newMode;
-      if (__privateGet(this, _wysiwygElement).mode === newMode) {
-        const hasStructureChange = __privateGet(this, _wysiwygElement).hasStructureChange;
-        htmlModeButton.disabled = newMode === "html" && hasStructureChange;
-      } else {
-        htmlModeButton.ariaPressed = currentMode === "html" ? "true" : "false";
+    if (_BgeWysiwygEditorElement2.experimentalTextOnlyMode) {
+      const modeSelector = this.querySelector(
+        "[data-bge-mode-selector]"
+      );
+      if (!modeSelector) {
+        throw new Error("Mode selector not found");
       }
-    });
+      modeSelector.value = __privateGet(this, _wysiwygElement).mode;
+      const initialHasStructureChange = __privateGet(this, _wysiwygElement).hasStructureChange;
+      const wysiwygOption = modeSelector.querySelector(
+        'option[value="wysiwyg"]'
+      );
+      if (wysiwygOption) {
+        wysiwygOption.disabled = initialHasStructureChange;
+      }
+      const handleStructureChange = (event2) => {
+        const hasStructureChange = event2.detail.hasStructureChange;
+        if (wysiwygOption) {
+          wysiwygOption.disabled = hasStructureChange;
+        }
+      };
+      __privateGet(this, _wysiwygElement).addEventListener(
+        "bge:structure-change",
+        handleStructureChange
+      );
+      modeSelector.addEventListener("change", () => {
+        if (!__privateGet(this, _wysiwygElement)) {
+          throw new ReferenceError("<bge-wysiwyg-editor> is not connected");
+        }
+        const newMode = modeSelector.value;
+        const currentMode = __privateGet(this, _wysiwygElement).mode;
+        __privateGet(this, _wysiwygElement).mode = newMode;
+        if (__privateGet(this, _wysiwygElement).mode === newMode) {
+          const currentState = getCurrentEditorState(__privateGet(this, _wysiwygElement));
+          for (const button of buttons) {
+            updateButtonState(button, currentState, this);
+          }
+        } else {
+          modeSelector.value = currentMode;
+        }
+      });
+    } else {
+      const htmlModeButton = this.querySelector(
+        '[data-bge-toolbar-button="html-mode"]'
+      );
+      if (!htmlModeButton) {
+        throw new Error("HTML mode button not found");
+      }
+      const initialHasStructureChange = __privateGet(this, _wysiwygElement).hasStructureChange;
+      const initialIsHtmlMode = __privateGet(this, _wysiwygElement).mode === "html";
+      htmlModeButton.disabled = initialIsHtmlMode && initialHasStructureChange;
+      htmlModeButton.ariaPressed = initialIsHtmlMode ? "true" : "false";
+      htmlModeButton.addEventListener("click", () => {
+        if (!__privateGet(this, _wysiwygElement)) {
+          throw new ReferenceError("<bge-wysiwyg-editor> is not connected");
+        }
+        const currentMode = __privateGet(this, _wysiwygElement).mode;
+        const newMode = currentMode === "html" ? "wysiwyg" : "html";
+        htmlModeButton.ariaPressed = newMode === "html" ? "true" : "false";
+        __privateGet(this, _wysiwygElement).mode = newMode;
+        if (__privateGet(this, _wysiwygElement).mode === newMode) {
+          const currentState = getCurrentEditorState(__privateGet(this, _wysiwygElement));
+          for (const button of buttons) {
+            updateButtonState(button, currentState, this);
+          }
+          const hasStructureChange = __privateGet(this, _wysiwygElement).hasStructureChange;
+          htmlModeButton.disabled = newMode === "html" && hasStructureChange;
+        } else {
+          htmlModeButton.ariaPressed = currentMode === "html" ? "true" : "false";
+        }
+      });
+      __privateGet(this, _wysiwygElement).addEventListener("bge:structure-change", (event2) => {
+        const hasStructureChange = event2.detail.hasStructureChange;
+        const isHtmlMode = __privateGet(this, _wysiwygElement).mode === "html";
+        htmlModeButton.disabled = isHtmlMode && hasStructureChange;
+      });
+    }
   }
   setStyle(css) {
     if (!__privateGet(this, _wysiwygElement)) {
@@ -33363,6 +33629,7 @@ const _BgeWysiwygEditorElement = class _BgeWysiwygEditorElement2 extends HTMLEle
 _wysiwygElement = /* @__PURE__ */ new WeakMap();
 __publicField(_BgeWysiwygEditorElement, "extensions", null);
 __publicField(_BgeWysiwygEditorElement, "wrapperElement", null);
+__publicField(_BgeWysiwygEditorElement, "experimentalTextOnlyMode", false);
 __publicField(_BgeWysiwygEditorElement, "defaultCommands", [
   "bold",
   "italic",
@@ -33499,120 +33766,23 @@ function bindToggle(button, wysiwygElement) {
     }
   }
 }
-function updateButtonState(button, state2) {
+function updateButtonState(button, state2, editorElement) {
   const buttonType = button.dataset.bgeToolbarButton;
-  switch (buttonType) {
-    case "bold": {
-      button.disabled = state2.bold.disabled;
-      button.ariaPressed = state2.bold.active ? "true" : "false";
-      break;
-    }
-    case "italic": {
-      button.disabled = state2.italic.disabled;
-      button.ariaPressed = state2.italic.active ? "true" : "false";
-      break;
-    }
-    case "underline": {
-      button.disabled = state2.underline.disabled;
-      button.ariaPressed = state2.underline.active ? "true" : "false";
-      break;
-    }
-    case "strikethrough": {
-      button.disabled = state2.strike.disabled;
-      button.ariaPressed = state2.strike.active ? "true" : "false";
-      break;
-    }
-    case "code": {
-      button.disabled = state2.code.disabled;
-      button.ariaPressed = state2.code.active ? "true" : "false";
-      break;
-    }
-    case "link": {
-      button.disabled = state2.link.disabled;
-      button.ariaPressed = state2.link.active ? "true" : "false";
-      break;
-    }
-    case "button-like-link": {
-      button.disabled = state2.buttonLikeLink.disabled;
-      button.ariaPressed = state2.buttonLikeLink.active ? "true" : "false";
-      break;
-    }
-    case "blockquote": {
-      button.disabled = state2.blockquote.disabled;
-      button.ariaPressed = state2.blockquote.active ? "true" : "false";
-      break;
-    }
-    case "bullet-list": {
-      button.disabled = state2.bulletList.disabled;
-      button.ariaPressed = state2.bulletList.active ? "true" : "false";
-      break;
-    }
-    case "ordered-list": {
-      button.disabled = state2.orderedList.disabled;
-      button.ariaPressed = state2.orderedList.active ? "true" : "false";
-      break;
-    }
-    case "note": {
-      button.disabled = state2.note.disabled;
-      button.ariaPressed = state2.note.active ? "true" : "false";
-      break;
-    }
-    case "h2": {
-      button.disabled = state2.h2.disabled;
-      button.ariaPressed = state2.h2.active ? "true" : "false";
-      break;
-    }
-    case "h3": {
-      button.disabled = state2.h3.disabled;
-      button.ariaPressed = state2.h3.active ? "true" : "false";
-      break;
-    }
-    case "h4": {
-      button.disabled = state2.h4.disabled;
-      button.ariaPressed = state2.h4.active ? "true" : "false";
-      break;
-    }
-    case "h5": {
-      button.disabled = state2.h5.disabled;
-      button.ariaPressed = state2.h5.active ? "true" : "false";
-      break;
-    }
-    case "h6": {
-      button.disabled = state2.h6.disabled;
-      button.ariaPressed = state2.h6.active ? "true" : "false";
-      break;
-    }
-    case "flex-box": {
-      button.disabled = state2.flexBox.disabled;
-      button.ariaPressed = state2.flexBox.active ? "true" : "false";
-      break;
-    }
-    case "subscript": {
-      button.disabled = state2.subscript.disabled;
-      button.ariaPressed = state2.subscript.active ? "true" : "false";
-      break;
-    }
-    case "superscript": {
-      button.disabled = state2.superscript.disabled;
-      button.ariaPressed = state2.superscript.active ? "true" : "false";
-      break;
-    }
-    case "align-start": {
-      button.disabled = state2.alignStart.disabled;
-      button.ariaPressed = state2.alignStart.active ? "true" : "false";
-      break;
-    }
-    case "align-center": {
-      button.disabled = state2.alignCenter.disabled;
-      button.ariaPressed = state2.alignCenter.active ? "true" : "false";
-      break;
-    }
-    case "align-end": {
-      button.disabled = state2.alignEnd.disabled;
-      button.ariaPressed = state2.alignEnd.active ? "true" : "false";
-      break;
+  if (buttonType === "html-mode" || buttonType === "text-only-mode") {
+    return;
+  }
+  const stateKey = BUTTON_TO_STATE_KEY_MAP[buttonType];
+  if (!stateKey) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`Unknown button type: ${buttonType}`);
     }
+    return;
   }
+  const currentMode = editorElement.mode;
+  const isNonWysiwygMode = currentMode === "html" || currentMode === "text-only";
+  const buttonState = state2[stateKey];
+  button.disabled = isNonWysiwygMode || buttonState.disabled;
+  button.ariaPressed = buttonState.active ? "true" : "false";
 }
 const PUBLIC_VERSION = "5";
 if (typeof window !== "undefined") {
@@ -36008,6 +36178,16 @@ function update_reaction(reaction) {
     }
     if (previous_reaction !== null && previous_reaction !== reaction) {
       read_version++;
+      if (previous_reaction.deps !== null) {
+        for (let i2 = 0; i2 < previous_skipped_deps; i2 += 1) {
+          previous_reaction.deps[i2].rv = read_version;
+        }
+      }
+      if (previous_deps !== null) {
+        for (const dep of previous_deps) {
+          dep.rv = read_version;
+        }
+      }
       if (untracked_writes !== null) {
         if (previous_untracked_writes === null) {
           previous_untracked_writes = untracked_writes;
@@ -36119,7 +36299,7 @@ function get2(signal) {
             skipped_deps++;
           } else if (new_deps === null) {
             new_deps = [signal];
-          } else if (!new_deps.includes(signal)) {
+          } else {
             new_deps.push(signal);
           }
         }
@@ -40339,7 +40519,10 @@ async function createBurgerEditorClient(options) {
       defineBgeWysiwygEditorElement({
         wrapperElement: {
           className: context.className ?? ""
-        }
+        },
+        experimental: context.experimental?.itemOptions?.wysiwyg?.enableTextOnlyMode ? {
+          textOnlyMode: context.experimental.itemOptions.wysiwyg.enableTextOnlyMode
+        } : void 0
       });
     }
   });