@burger-editor/local 4.0.0-alpha.50 → 4.0.0-alpha.52

package/README.md

@@ -286,6 +286,125 @@ export default {
 
 カスタムアイテムの作成方法については、[@burger-editor/core のREADME](../core/README.md#カスタムアイテムの作成) を参照してください。
 
+## APIエンドポイント
+
+### Health Check API
+
+BurgerEditorローカルサーバーが起動中かどうかを確認するためのヘルスチェックAPIを提供しています。
+
+#### エンドポイント
+
+```
+GET /api/health
+```
+
+#### レスポンス
+
+```json
+{
+	"status": "ok",
+	"timestamp": 1737446400000
+}
+```
+
+- `status` (string): サーバーの状態。常に `"ok"` を返します
+- `timestamp` (number): レスポンス生成時のタイムスタンプ（ミリ秒）
+
+#### 使用例
+
+curlコマンドで確認：
+
+```bash
+curl http://localhost:3000/api/health
+```
+
+JavaScriptで確認：
+
+```javascript
+const response = await fetch('http://localhost:3000/api/health');
+const data = await response.json();
+console.log(data.status); // "ok"
+```
+
+#### クライアント側の自動ヘルスチェック
+
+BurgerEditorクライアントは、このAPIを使用してサーバーの接続状態を自動的に監視します。ヘルスチェックの動作は設定ファイルの `healthCheck` オプションでカスタマイズできます：
+
+```javascript
+export default {
+	documentRoot: './src',
+	assetsRoot: './public',
+	healthCheck: {
+		enabled: true, // ヘルスチェックを有効化（デフォルト: true）
+		interval: 10000, // チェック間隔（ミリ秒）（デフォルト: 10000）
+		retryCount: 3, // リトライ回数（デフォルト: 3）
+	},
+};
+```
+
+接続が失われると、クライアントは自動的にリトライを行い、`bge:server-offline` および `bge:server-online` イベントを発行します。
+
+## サーバー設定とヘルスチェックAPI
+
+### getUserConfig()
+
+サーバー設定を取得する関数です。`burgereditor.config.js` から設定を読み込み、デフォルト値とマージして返します。
+
+```typescript
+import { getUserConfig } from '@burger-editor/local/get-user-config';
+
+const config = await getUserConfig();
+console.log(config.host, config.port); // 'localhost' 5255
+```
+
+**戻り値:** `Promise<LocalServerConfig>`
+
+### createHealthChecker()
+
+BurgerEditor local サーバーのヘルスチェックを行う `HealthMonitor` インスタンスを作成します。ブラウザ環境で動作し、サーバーの `/api/health` エンドポイントを定期的にチェックします。
+
+```typescript
+import { getUserConfig } from '@burger-editor/local/get-user-config';
+import { createHealthChecker } from '@burger-editor/local/create-health-checker';
+
+const config = await getUserConfig();
+const healthMonitor = createHealthChecker(config);
+
+// オプション: カスタムコールバックを設定
+healthMonitor.onOffline = (timestamp) => {
+	console.log('Server went offline at', new Date(timestamp));
+	// カスタム処理（例: ユーザーに通知を表示）
+};
+
+healthMonitor.onOnline = (timestamp) => {
+	console.log('Server came online at', new Date(timestamp));
+	// カスタム処理（例: 通知を非表示）
+};
+
+// 監視を開始
+healthMonitor.start();
+
+// 現在の状態を確認
+console.log('Is online?', healthMonitor.isOnline);
+
+// 監視を停止
+// healthMonitor.stop();
+```
+
+**パラメータ:**
+
+- `config` (LocalServerConfig): `getUserConfig()` で取得したサーバー設定
+
+**戻り値:** `HealthMonitor` - ヘルスモニターインスタンス
+
+**HealthMonitor API:**
+
+- `start()`: 監視を開始
+- `stop()`: 監視を停止
+- `isOnline` (getter): 現在のオンライン状態（boolean）
+- `onOffline` (setter): サーバーがオフラインになった時のコールバック
+- `onOnline` (setter): サーバーがオンラインになった時のコールバック
+
 ## プログラマティックAPI
 
 `@burger-editor/local` は、Honoサーバーと同じファイルアップロード機能をプログラムから使用できるAPIを提供しています。

package/dist/client.js

@@ -1261,10 +1261,12 @@ let NoHTMLElementError$1 = class NoHTMLElementError extends Error {
  * // => { absNumber: 150, relNumber: 0.75, ... }
  */
 function updateRatio(obj, propName, value) {
-    // Create a shallow copy
-    const updated = { ...obj };
-    // Update the specified property
-    updated[propName] = value;
+    const updated = {
+        // Create a shallow copy
+        ...obj,
+        // Update the specified property
+        [propName]: value,
+    };
     // Recalculate dependent properties based on which property was updated
     switch (propName) {
         case 'absNumber': {
@@ -1294,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.49",
+  version: "4.0.0-alpha.51",
   name: "button",
   template: template$b,
   style: style$b,
@@ -1350,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.49",
+  version: "4.0.0-alpha.51",
   name: "details",
   template: template$a,
   style: style$a,
@@ -1364,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.49",
+  version: "4.0.0-alpha.51",
   name: "download-file",
   template: template$9,
   style: style$9,
@@ -1403,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.49",
+  version: "4.0.0-alpha.51",
   name: "google-maps",
   template: template$8,
   style: style$8,
@@ -1538,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.49",
+  version: "4.0.0-alpha.51",
   name: "hr",
   template: template$7,
   style: style$7,
@@ -1628,7 +1630,7 @@ function createWidthState() {
 
 const ORIGIN = "__org";
 var image = createItem$1({
-  version: "4.0.0-alpha.49",
+  version: "4.0.0-alpha.51",
   name: "image",
   template: template$6,
   style: style$6,
@@ -1826,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.49",
+  version: "4.0.0-alpha.51",
   name: "import",
   template: template$5,
   style: style$5,
@@ -1840,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.49",
+  version: "4.0.0-alpha.51",
   name: "table",
   template: template$4,
   style: style$4,
@@ -1868,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.49",
+  version: "4.0.0-alpha.51",
   name: "title-h2",
   template: template$3,
   style: style$3,
@@ -1882,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.49",
+  version: "4.0.0-alpha.51",
   name: "title-h3",
   template: template$2,
   style: style$2,
@@ -1896,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.49",
+  version: "4.0.0-alpha.51",
   name: "wysiwyg",
   template: template$1,
   style: style$1,
@@ -1911,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.49",
+  version: "4.0.0-alpha.51",
   name: "youtube",
   template,
   style: style$c,
@@ -2094,6 +2096,14 @@ function importOptions(el, options) {
   if (style2) {
     importStyleOptions(el, style2);
   }
+  const groups = el.querySelectorAll("[data-bge-group]");
+  for (const group of groups) {
+    if (containerProps?.linkarea) {
+      group.dataset.bgeLinkarea = "";
+    } else {
+      delete group.dataset.bgeLinkarea;
+    }
+  }
 }
 async function createPlainStructuredBlockElement(data, createItemElement) {
   const container = document.createElement("div");
@@ -2163,7 +2173,8 @@ function exportContainerProps(containerPropsQuery) {
     wrap: type === "inline" ? findValueFromArray(options, ["wrap", "nowrap"]) : null,
     columns: type === "grid" ? Number.parseInt(findValuePatternFromArray(options, /[1-9]\d*/) ?? "", 10) ?? 1 : null,
     float: type === "float" ? findValueFromArray(options, ["start", "end"]) : null,
-    frameSemantics: findValueFromArray(options, ["div", "ul", "ol"]) ?? "div"
+    frameSemantics: findValueFromArray(options, ["div", "ul", "ol"]) ?? "div",
+    linkarea: false
   };
 }
 function exportStyleOptions(el) {
@@ -2187,8 +2198,13 @@ function exportOptions(el) {
   const classList = [...el.classList];
   const id = el.id.replace(/^bge-/, "").trim() || null;
   const style2 = exportStyleOptions(el);
+  const groups = el.querySelectorAll("[data-bge-group]");
+  const hasLinkarea = [...groups].some((group) => Object.hasOwn(group.dataset, "bgeLinkarea"));
   return {
-    containerProps,
+    containerProps: {
+      ...containerProps,
+      linkarea: hasLinkarea
+    },
     classList,
     id,
     style: style2
@@ -5671,6 +5687,7 @@ class BlockOptionsDialog extends EditorDialog {
     const float = formData.get("bge-options-float");
     const classes = formData.get("bge-options-classes");
     const id = formData.get("bge-options-id");
+    const linkarea = formData.get("bge-options-linkarea");
     const styles = formData.keys().toArray().filter((key) => key.startsWith("bge-options-style-")).map((key) => {
       const propName = formData.get(key);
       const category = key.replace("bge-options-style-", "");
@@ -5685,7 +5702,8 @@ class BlockOptionsDialog extends EditorDialog {
         autoRepeat: autoRepeat ?? "fixed",
         justify,
         align,
-        float
+        float,
+        linkarea: linkarea === "true"
       },
       classList: classes?.toString().split(/\s+/).map((cls) => cls.trim()).filter((cls) => !!cls) ?? [],
       id: id?.toString().trim() || null,
@@ -6293,10 +6311,11 @@ class HealthMonitor {
     return Promise.resolve(true);
   };
   #enabled;
-  #engine;
   #failureCount = 0;
   #interval;
   #isOnline = true;
+  #onOffline;
+  #onOnline;
   #retryCount;
   #timeoutId = null;
   /**
@@ -6305,12 +6324,13 @@ class HealthMonitor {
   get isOnline() {
     return this.#isOnline;
   }
-  constructor(engine, options) {
-    this.#engine = engine;
+  constructor(options) {
     this.#enabled = options?.enabled ?? false;
     this.#interval = options?.interval ?? 1e4;
     this.#retryCount = options?.retryCount ?? 3;
     this.#checkHealth = options?.checkHealth ?? this.#defaultHealthCheck;
+    this.#onOffline = options?.onOffline;
+    this.#onOnline = options?.onOnline;
   }
   /**
    * Start health monitoring
@@ -6347,15 +6367,15 @@ class HealthMonitor {
    * Dispatch server offline event
    */
   #dispatchServerOfflineEvent() {
-    const event2 = createBgeEvent("bge:server-offline", { timestamp: Date.now() });
-    this.#engine.el.dispatchEvent(event2);
+    const timestamp = Date.now();
+    this.#onOffline?.(timestamp);
   }
   /**
    * Dispatch server online event
    */
   #dispatchServerOnlineEvent() {
-    const event2 = createBgeEvent("bge:server-online", { timestamp: Date.now() });
-    this.#engine.el.dispatchEvent(event2);
+    const timestamp = Date.now();
+    this.#onOnline?.(timestamp);
   }
   /**
    * Handle health check failure
@@ -6698,7 +6718,17 @@ class BurgerEditorEngine {
       blockClipboard: "bge-copied-block",
       ...options.storageKey
     };
-    this.#healthMonitor = new HealthMonitor(this, options.healthCheck);
+    this.#healthMonitor = new HealthMonitor({
+      ...options.healthCheck,
+      onOffline: (timestamp) => {
+        const event2 = createBgeEvent("bge:server-offline", { timestamp });
+        this.el.dispatchEvent(event2);
+      },
+      onOnline: (timestamp) => {
+        const event2 = createBgeEvent("bge:server-online", { timestamp });
+        this.el.dispatchEvent(event2);
+      }
+    });
     this.css = {
       stylesheets: options.config.stylesheets ?? [],
       classList: options.config.classList ?? [],
@@ -14909,12 +14939,12 @@ class NodeViewDesc extends ViewDesc {
     let updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view);
     iterDeco(this.node, this.innerDeco, (widget, i, insideNode) => {
       if (widget.spec.marks)
-        updater.syncToMarks(widget.spec.marks, inline, view);
+        updater.syncToMarks(widget.spec.marks, inline, view, i);
       else if (widget.type.side >= 0 && !insideNode)
-        updater.syncToMarks(i == this.node.childCount ? Mark$1.none : this.node.child(i).marks, inline, view);
+        updater.syncToMarks(i == this.node.childCount ? Mark$1.none : this.node.child(i).marks, inline, view, i);
       updater.placeWidget(widget, view, off);
     }, (child2, outerDeco, innerDeco, i) => {
-      updater.syncToMarks(child2.marks, inline, view);
+      updater.syncToMarks(child2.marks, inline, view, i);
       let compIndex;
       if (updater.findNodeMatch(child2, outerDeco, innerDeco, i)) ;
       else if (compositionInChild && view.state.selection.from > off && view.state.selection.to < off + child2.nodeSize && (compIndex = updater.findIndexWithChild(composition.node)) > -1 && updater.updateNodeAt(child2, outerDeco, innerDeco, compIndex, view)) ;
@@ -14924,7 +14954,7 @@ class NodeViewDesc extends ViewDesc {
       }
       off += child2.nodeSize;
     });
-    updater.syncToMarks([], inline, view);
+    updater.syncToMarks([], inline, view, 0);
     if (this.node.isTextblock)
       updater.addTextblockHacks();
     updater.destroyRest();
@@ -15290,7 +15320,7 @@ class ViewTreeUpdater {
   }
   // Sync the current stack of mark descs with the given array of
   // marks, reusing existing mark descs when possible.
-  syncToMarks(marks, inline, view) {
+  syncToMarks(marks, inline, view, parentIndex) {
     let keep = 0, depth = this.stack.length >> 1;
     let maxKeep = Math.min(depth, marks.length);
     while (keep < maxKeep && (keep == depth - 1 ? this.top : this.stack[keep + 1 << 1]).matchesMark(marks[keep]) && marks[keep].type.spec.spanning !== false)
@@ -15304,8 +15334,10 @@ class ViewTreeUpdater {
     }
     while (depth < marks.length) {
       this.stack.push(this.top, this.index + 1);
-      let found2 = -1;
-      for (let i = this.index; i < Math.min(this.index + 3, this.top.children.length); i++) {
+      let found2 = -1, scanTo = this.top.children.length;
+      if (parentIndex < this.preMatch.index)
+        scanTo = Math.min(this.index + 3, scanTo);
+      for (let i = this.index; i < scanTo; i++) {
         let next = this.top.children[i];
         if (next.matchesMark(marks[depth]) && !this.isLocked(next.dom)) {
           found2 = i;
@@ -16423,6 +16455,7 @@ class InputState {
     this.compositionNodes = [];
     this.compositionEndedAt = -2e8;
     this.compositionID = 1;
+    this.badSafariComposition = false;
     this.compositionPendingChanges = 0;
     this.domChangeCount = 0;
     this.eventHandlers = /* @__PURE__ */ Object.create(null);
@@ -16812,7 +16845,9 @@ editHandlers.compositionend = (view, event2) => {
     view.input.compositionEndedAt = event2.timeStamp;
     view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0;
     view.input.compositionNode = null;
-    if (view.input.compositionPendingChanges)
+    if (view.input.badSafariComposition)
+      view.domObserver.forceFlush();
+    else if (view.input.compositionPendingChanges)
       Promise.resolve().then(() => view.domObserver.flush());
     view.input.compositionID++;
     scheduleComposeEnd(view, 20);
@@ -17781,10 +17816,14 @@ class DOMObserver {
     this.observer = window.MutationObserver && new window.MutationObserver((mutations) => {
       for (let i = 0; i < mutations.length; i++)
         this.queue.push(mutations[i]);
-      if (ie$1 && ie_version <= 11 && mutations.some((m2) => m2.type == "childList" && m2.removedNodes.length || m2.type == "characterData" && m2.oldValue.length > m2.target.nodeValue.length))
+      if (ie$1 && ie_version <= 11 && mutations.some((m2) => m2.type == "childList" && m2.removedNodes.length || m2.type == "characterData" && m2.oldValue.length > m2.target.nodeValue.length)) {
         this.flushSoon();
-      else
+      } else if (safari && view.composing && mutations.some((m2) => m2.type == "childList" && m2.target.nodeName == "TR")) {
+        view.input.badSafariComposition = true;
+        this.flushSoon();
+      } else {
         this.flush();
+      }
     });
     if (useCharData) {
       this.onCharData = (e) => {
@@ -17938,6 +17977,10 @@ class DOMObserver {
         view.docView.markDirty(from2, to);
         checkCSS(view);
       }
+      if (view.input.badSafariComposition) {
+        view.input.badSafariComposition = false;
+        fixUpBadSafariComposition(view, added);
+      }
       this.handleDOMChange(from2, to, typeOver, added);
       if (view.docView && view.docView.dirty)
         view.updateState(view.state);
@@ -18042,6 +18085,31 @@ function blockParent(view, node) {
   }
   return null;
 }
+function fixUpBadSafariComposition(view, addedNodes) {
+  var _a2;
+  let { focusNode, focusOffset } = view.domSelectionRange();
+  for (let node of addedNodes) {
+    if (((_a2 = node.parentNode) === null || _a2 === void 0 ? void 0 : _a2.nodeName) == "TR") {
+      let nextCell2 = node.nextSibling;
+      while (nextCell2 && (nextCell2.nodeName != "TD" && nextCell2.nodeName != "TH"))
+        nextCell2 = nextCell2.nextSibling;
+      if (nextCell2) {
+        let parent = nextCell2;
+        for (; ; ) {
+          let first2 = parent.firstChild;
+          if (!first2 || first2.nodeType != 1 || first2.contentEditable == "false" || /^(BR|IMG)$/.test(first2.nodeName))
+            break;
+          parent = first2;
+        }
+        parent.insertBefore(node, parent.firstChild);
+        if (focusNode == node)
+          view.domSelection().collapse(node, focusOffset);
+      } else {
+        node.parentNode.removeChild(node);
+      }
+    }
+  }
+}
 function parseBetween(view, from_, to_) {
   let { node: parent, fromOffset, toOffset, from: from2, to } = view.docView.parseRange(from_, to_);
   let domSel = view.domSelectionRange();
@@ -18481,7 +18549,7 @@ class EditorView {
           this.docView.destroy();
           this.docView = docViewDesc(state2.doc, outerDeco, innerDeco, this.dom, this);
         }
-        if (chromeKludge && !this.trackWrites)
+        if (chromeKludge && (!this.trackWrites || !this.dom.contains(this.trackWrites)))
           forceSelUpdate = true;
       }
       if (forceSelUpdate || !(this.input.mouseDown && this.domObserver.currentSelection.eq(this.domSelectionRange()) && anchorInRightPlace(this))) {
@@ -26836,31 +26904,33 @@ function clickHandler(options) {
         if (!view.editable) {
           return false;
         }
+        let link2 = null;
+        if (event2.target instanceof HTMLAnchorElement) {
+          link2 = event2.target;
+        } else {
+          const target = event2.target;
+          if (!target) {
+            return false;
+          }
+          const root2 = options.editor.view.dom;
+          link2 = target.closest("a");
+          if (link2 && !root2.contains(link2)) {
+            link2 = null;
+          }
+        }
+        if (!link2) {
+          return false;
+        }
         let handled = false;
         if (options.enableClickSelection) {
           const commandResult = options.editor.commands.extendMarkRange(options.type.name);
           handled = commandResult;
         }
         if (options.openOnClick) {
-          let link2 = null;
-          if (event2.target instanceof HTMLAnchorElement) {
-            link2 = event2.target;
-          } else {
-            let a = event2.target;
-            const els = [];
-            while (a.nodeName !== "DIV") {
-              els.push(a);
-              a = a.parentNode;
-            }
-            link2 = els.find((value) => value.nodeName === "A");
-          }
-          if (!link2) {
-            return handled;
-          }
           const attrs = getAttributes(view.state, options.type.name);
-          const href = (_a2 = link2 == null ? void 0 : link2.href) != null ? _a2 : attrs.href;
-          const target = (_b = link2 == null ? void 0 : link2.target) != null ? _b : attrs.target;
-          if (link2 && href) {
+          const href = (_a2 = link2.href) != null ? _a2 : attrs.href;
+          const target = (_b = link2.target) != null ? _b : attrs.target;
+          if (href) {
             window.open(href, target);
             handled = true;
           }
@@ -38584,7 +38654,7 @@ var root_5$2 = /* @__PURE__ */ from_html(`<div role="radiogroup" aria-labelledby
 var root_7$2 = /* @__PURE__ */ from_html(`<p>このブロックはコンテナタイプを変更できません。</p>`);
 var root_8$1 = /* @__PURE__ */ from_html(`<label><span>基準列数</span> <output> </output> <input name="bge-options-columns" type="range" min="1" max="5"/></label> <label><span>列の自動調整</span> <select name="bge-options-auto-repeat"><option>固定列数</option><option>auto-fill（空白保持）</option><option>auto-fit（空白最小）</option></select></label> <small>規定幅（<code title="CSSカスタムプロパティ: --bge-auto-repeat-base-width に設定されている値"> </code>）を基準に「基準列数: <code> </code>」で割った数値に近い幅を保ちます。「空白保持」は空のスペースを残し、「空白最小」はアイテムの幅を広げます。</small>`, 1);
 var root_9$1 = /* @__PURE__ */ from_html(`<div role="radiogroup" aria-labelledby="float-group"><div id="float-group">回り込み</div> <label><input type="radio" name="bge-options-float" value="start"/><span>左寄せ</span></label> <label><input type="radio" name="bge-options-float" value="end"/><span>右寄せ</span></label></div>`);
-var root_1$5 = /* @__PURE__ */ from_html(`<fieldset><legend>コンテナ特性</legend> <!> <!> <!> <!> <!></fieldset>`);
+var root_1$5 = /* @__PURE__ */ from_html(`<fieldset><legend>コンテナ特性</legend> <!> <!> <!> <!> <!> <label><input type="checkbox" name="bge-options-linkarea" value="true"/> <span>リンクエリア機能を有効にする</span></label></fieldset>`);
 var root_12$1 = /* @__PURE__ */ from_html(`<option> </option>`);
 var root_11$1 = /* @__PURE__ */ from_html(`<label><span> </span> <select></select></label>`);
 var root_10$1 = /* @__PURE__ */ from_html(`<fieldset><legend>ブロックのスタイル拡張</legend> <!></fieldset>`);
@@ -38794,6 +38864,9 @@ function Block_options($$anchor, $$props) {
           if (get2(effectiveContainerType) === "float") $$render(consequent_5);
         });
       }
+      var label_18 = sibling(node_6, 2);
+      var input_14 = child(label_18);
+      template_effect(() => input_14.defaultChecked = options.containerProps.linkarea ?? false);
       append2($$anchor2, fieldset);
     };
     if_block(node, ($$render) => {
@@ -38808,8 +38881,8 @@ function Block_options($$anchor, $$props) {
       each(node_8, 17, () => cssProps, ([, category]) => `bge-options-style-${category.id}`, ($$anchor3, $$item) => {
         var $$array = /* @__PURE__ */ user_derived(() => to_array(get2($$item), 2));
         let category = () => get2($$array)[1];
-        var label_18 = root_11$1();
-        var span = child(label_18);
+        var label_19 = root_11$1();
+        var span = child(label_19);
         var text_6 = child(span);
         var select_3 = sibling(span, 2);
         each(select_3, 21, () => category().properties, ([propName, data]) => propName, ($$anchor4, $$item2) => {
@@ -38832,7 +38905,7 @@ function Block_options($$anchor, $$props) {
           set_text(text_6, category().name);
           set_attribute(select_3, "name", `bge-options-style-${category().id}`);
         });
-        append2($$anchor3, label_18);
+        append2($$anchor3, label_19);
       });
       append2($$anchor2, fieldset_1);
     };
@@ -38840,14 +38913,14 @@ function Block_options($$anchor, $$props) {
       if (cssProps.size > 0) $$render(consequent_7);
     });
   }
-  var label_19 = sibling(node_7, 2);
-  var input_14 = sibling(child(label_19), 2);
-  var label_20 = sibling(label_19, 4);
+  var label_20 = sibling(node_7, 2);
   var input_15 = sibling(child(label_20), 2);
+  var label_21 = sibling(label_20, 4);
+  var input_16 = sibling(child(label_21), 2);
   template_effect(
     ($0) => {
-      input_14.defaultValue = $0;
-      input_15.defaultValue = options.id ?? "";
+      input_15.defaultValue = $0;
+      input_16.defaultValue = options.id ?? "";
     },
     [() => options.classList?.join(" ") ?? ""]
   );