@burger-editor/local 4.0.0-alpha.46 → 4.0.0-alpha.47

package/README.md

@@ -120,6 +120,52 @@ title: 'New Page'
   - `interval` (number): チェック間隔（ミリ秒）（デフォルト: 10000）
   - `retryCount` (number): リトライ回数（デフォルト: 3）
 
+## Front Matter編集機能
+
+BurgerEditorは、HTMLファイルのFront Matter（YAMLメタデータ）を編集するUIを提供します。編集ボックスはBurgerEditor編集領域の上部に表示されます。
+
+### 対応するデータ型
+
+Front Matterエディターは、値の型を自動検出して適切な入力UIを表示します：
+
+| 型                | 入力UI             | 例                       |
+| ----------------- | ------------------ | ------------------------ |
+| 文字列            | テキスト入力       | `title: 'Hello World'`   |
+| 数値              | 数値入力           | `order: 1`               |
+| 真偽値            | チェックボックス   | `published: true`        |
+| 日付              | 日付ピッカー       | `date: '2025-01-06'`     |
+| 配列/オブジェクト | JSONテキストエリア | `tags: ['blog', 'news']` |
+
+### 使用方法
+
+1. HTMLファイルの先頭にFront Matterを記述します：
+
+```html
+---
+title: 'ページタイトル'
+date: '2025-01-06'
+published: true
+---
+
+<div class="my-editor">
+	<!-- コンテンツ -->
+</div>
+```
+
+2. BurgerEditorでファイルを開くと、編集領域の上にFront Matterエディターが表示されます
+
+3. フィールドの追加・削除、値の編集が可能です
+
+4. 変更は自動的に保存されます（500msのデバウンス付き）
+
+### 新規フィールドの追加
+
+「+ 追加」ボタンをクリックすると、新しいフィールドを追加できます：
+
+1. キー名を入力（例: `author`, `category`）
+2. 型を選択（テキスト、数値、真偽値、日付、JSON）
+3. 「追加」ボタンをクリック
+
 ## カスタムブロックカタログの追加
 
 既存のブロックカタログにカスタムブロックを追加できます：

package/dist/client.js

@@ -1294,7 +1294,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.45",
+  version: "4.0.0-alpha.46",
   name: "button",
   template: template$b,
   style: style$b,
@@ -1350,7 +1350,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.45",
+  version: "4.0.0-alpha.46",
   name: "details",
   template: template$a,
   style: style$a,
@@ -1364,7 +1364,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.45",
+  version: "4.0.0-alpha.46",
   name: "download-file",
   template: template$9,
   style: style$9,
@@ -1403,7 +1403,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.45",
+  version: "4.0.0-alpha.46",
   name: "google-maps",
   template: template$8,
   style: style$8,
@@ -1538,7 +1538,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.45",
+  version: "4.0.0-alpha.46",
   name: "hr",
   template: template$7,
   style: style$7,
@@ -1628,7 +1628,7 @@ function createWidthState() {
 
 const ORIGIN = "__org";
 var image = createItem$1({
-  version: "4.0.0-alpha.45",
+  version: "4.0.0-alpha.46",
   name: "image",
   template: template$6,
   style: style$6,
@@ -1826,7 +1826,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.45",
+  version: "4.0.0-alpha.46",
   name: "import",
   template: template$5,
   style: style$5,
@@ -1840,7 +1840,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.45",
+  version: "4.0.0-alpha.46",
   name: "table",
   template: template$4,
   style: style$4,
@@ -1868,7 +1868,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.45",
+  version: "4.0.0-alpha.46",
   name: "title-h2",
   template: template$3,
   style: style$3,
@@ -1882,7 +1882,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.45",
+  version: "4.0.0-alpha.46",
   name: "title-h3",
   template: template$2,
   style: style$2,
@@ -1896,7 +1896,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.45",
+  version: "4.0.0-alpha.46",
   name: "wysiwyg",
   template: template$1,
   style: style$1,
@@ -1911,7 +1911,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.45",
+  version: "4.0.0-alpha.46",
   name: "youtube",
   template,
   style: style$c,
@@ -40232,7 +40232,368 @@ function $upload(request) {
   };
 }
 
+class FrontMatterEditor {
+  #container;
+  #fields = [];
+  #hasFrontMatter;
+  #isCollapsed = false;
+  #onUpdated;
+  #originalFrontMatter;
+  constructor(options) {
+    this.#container = options.container;
+    this.#onUpdated = options.onUpdated;
+    this.#hasFrontMatter = options.hasFrontMatter;
+    this.#fields = this.#parseInitialData(options.initialData);
+    if (options.hasFrontMatter) {
+      this.#originalFrontMatter = JSON.stringify(options.initialData);
+    }
+    this.#render();
+  }
+  /**
+   * Get current Front Matter data
+   */
+  getData() {
+    const data = {};
+    for (const field of this.#fields) {
+      data[field.key] = field.value;
+    }
+    return data;
+  }
+  /**
+   * Get original Front Matter string for format preservation
+   */
+  getOriginalFrontMatter() {
+    return this.#originalFrontMatter;
+  }
+  /**
+   * Check if Front Matter has been modified
+   */
+  hasChanges() {
+    if (!this.#hasFrontMatter && this.#fields.length === 0) {
+      return false;
+    }
+    const currentData = JSON.stringify(this.getData());
+    return currentData !== this.#originalFrontMatter;
+  }
+  /**
+   * Add a new field
+   * @param key
+   * @param type
+   */
+  #addField(key, type) {
+    const defaultValue = this.#getDefaultValue(type);
+    this.#fields.push({ key, type, value: defaultValue });
+    this.#hasFrontMatter = true;
+    this.#render();
+    this.#notifyUpdate();
+  }
+  /**
+   * Create a field element
+   * @param field
+   * @param index
+   */
+  #createFieldElement(field, index) {
+    const fieldEl = document.createElement("div");
+    fieldEl.className = "fm-editor-field";
+    fieldEl.dataset.type = field.type;
+    const labelEl = document.createElement("label");
+    labelEl.className = "fm-editor-field-label";
+    labelEl.textContent = field.key;
+    fieldEl.append(labelEl);
+    const inputWrapper = document.createElement("div");
+    inputWrapper.className = "fm-editor-field-input";
+    const inputEl = this.#createInputElement(field, index);
+    inputWrapper.append(inputEl);
+    fieldEl.append(inputWrapper);
+    const deleteBtn = document.createElement("button");
+    deleteBtn.type = "button";
+    deleteBtn.className = "fm-editor-field-delete";
+    deleteBtn.title = "フィールドを削除";
+    deleteBtn.textContent = "×";
+    deleteBtn.addEventListener("click", () => {
+      this.#deleteField(index);
+    });
+    fieldEl.append(deleteBtn);
+    return fieldEl;
+  }
+  /**
+   * Create input element based on field type
+   * @param field
+   * @param index
+   */
+  #createInputElement(field, index) {
+    switch (field.type) {
+      case "boolean": {
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.checked = Boolean(field.value);
+        checkbox.addEventListener("change", () => {
+          this.#updateFieldValue(index, checkbox.checked);
+        });
+        return checkbox;
+      }
+      case "number": {
+        const input = document.createElement("input");
+        input.type = "number";
+        input.value = String(field.value ?? "");
+        input.addEventListener("input", () => {
+          const numValue = input.value === "" ? null : Number(input.value);
+          this.#updateFieldValue(index, numValue);
+        });
+        return input;
+      }
+      case "date": {
+        const input = document.createElement("input");
+        input.type = "date";
+        if (field.value) {
+          const dateValue = field.value instanceof Date ? field.value : new Date(String(field.value));
+          if (!Number.isNaN(dateValue.getTime())) {
+            const isoDate = dateValue.toISOString().split("T")[0] ?? "";
+            input.value = isoDate;
+          }
+        }
+        input.addEventListener("input", () => {
+          this.#updateFieldValue(index, input.value);
+        });
+        return input;
+      }
+      case "json": {
+        const textarea = document.createElement("textarea");
+        textarea.rows = 3;
+        try {
+          textarea.value = JSON.stringify(field.value, null, 2);
+        } catch {
+          textarea.value = String(field.value);
+        }
+        textarea.addEventListener("input", () => {
+          try {
+            const parsed = JSON.parse(textarea.value);
+            textarea.classList.remove("fm-editor-error");
+            this.#updateFieldValue(index, parsed);
+          } catch {
+            textarea.classList.add("fm-editor-error");
+          }
+        });
+        return textarea;
+      }
+      default: {
+        const input = document.createElement("input");
+        input.type = "text";
+        input.value = String(field.value ?? "");
+        input.addEventListener("input", () => {
+          this.#updateFieldValue(index, input.value);
+        });
+        return input;
+      }
+    }
+  }
+  /**
+   * Delete a field
+   * @param index
+   */
+  #deleteField(index) {
+    this.#fields = this.#fields.filter((_, i) => i !== index);
+    this.#render();
+    this.#notifyUpdate();
+  }
+  /**
+   * Detect the type of a value
+   * @param value
+   */
+  #detectType(value) {
+    if (typeof value === "boolean") {
+      return "boolean";
+    }
+    if (typeof value === "number") {
+      return "number";
+    }
+    if (typeof value === "string") {
+      if (/^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2})?/.test(value)) {
+        const parsed = Date.parse(value);
+        if (!Number.isNaN(parsed)) {
+          return "date";
+        }
+      }
+      return "text";
+    }
+    if (value instanceof Date) {
+      return "date";
+    }
+    if (typeof value === "object" && value !== null) {
+      return "json";
+    }
+    return "text";
+  }
+  /**
+   * Get default value for a type
+   * @param type
+   */
+  #getDefaultValue(type) {
+    switch (type) {
+      case "boolean": {
+        return false;
+      }
+      case "number": {
+        return 0;
+      }
+      case "date": {
+        return (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+      }
+      case "json": {
+        return [];
+      }
+      default: {
+        return "";
+      }
+    }
+  }
+  /**
+   * Notify update callback
+   */
+  #notifyUpdate() {
+    if (this.#onUpdated) {
+      this.#onUpdated(this.getData());
+    }
+  }
+  /**
+   * Parse initial data and detect field types
+   * @param data
+   */
+  #parseInitialData(data) {
+    const fields = [];
+    for (const [key, value] of Object.entries(data)) {
+      fields.push({
+        key,
+        type: this.#detectType(value),
+        value
+      });
+    }
+    return fields;
+  }
+  /**
+   * Render the editor UI
+   */
+  #render() {
+    this.#container.innerHTML = "";
+    this.#container.classList.add("fm-editor");
+    const header = document.createElement("div");
+    header.className = "fm-editor-header";
+    header.innerHTML = `
+			<button type="button" class="fm-editor-toggle" aria-expanded="${!this.#isCollapsed}">
+				<span class="fm-editor-toggle-icon">${this.#isCollapsed ? "▶" : "▼"}</span>
+				<span>Front Matter</span>
+			</button>
+			<button type="button" class="fm-editor-add" title="フィールドを追加">+ 追加</button>
+		`;
+    this.#container.append(header);
+    const toggleBtn = header.querySelector(".fm-editor-toggle");
+    toggleBtn?.addEventListener("click", () => {
+      this.#isCollapsed = !this.#isCollapsed;
+      this.#render();
+    });
+    const addBtn = header.querySelector(".fm-editor-add");
+    addBtn?.addEventListener("click", () => {
+      this.#showAddFieldDialog();
+    });
+    if (!this.#isCollapsed) {
+      const fieldsContainer = document.createElement("div");
+      fieldsContainer.className = "fm-editor-fields";
+      if (this.#fields.length === 0) {
+        const emptyMessage = document.createElement("div");
+        emptyMessage.className = "fm-editor-empty";
+        emptyMessage.textContent = "フィールドがありません。「+ 追加」ボタンでフィールドを追加してください。";
+        fieldsContainer.append(emptyMessage);
+      } else {
+        for (const [index, field] of this.#fields.entries()) {
+          const fieldEl = this.#createFieldElement(field, index);
+          fieldsContainer.append(fieldEl);
+        }
+      }
+      this.#container.append(fieldsContainer);
+    }
+  }
+  /**
+   * Show dialog to add a new field
+   */
+  #showAddFieldDialog() {
+    const dialog = document.createElement("dialog");
+    dialog.className = "fm-editor-dialog";
+    dialog.innerHTML = `
+			<form method="dialog">
+				<h3>フィールドを追加</h3>
+				<div class="fm-editor-dialog-field">
+					<label for="fm-new-key">キー名</label>
+					<input type="text" id="fm-new-key" name="key" required placeholder="例: title, author, date" />
+				</div>
+				<div class="fm-editor-dialog-field">
+					<label for="fm-new-type">型</label>
+					<select id="fm-new-type" name="type">
+						<option value="text">テキスト</option>
+						<option value="number">数値</option>
+						<option value="boolean">真偽値</option>
+						<option value="date">日付</option>
+						<option value="json">JSON（配列/オブジェクト）</option>
+					</select>
+				</div>
+				<div class="fm-editor-dialog-actions">
+					<button type="button" class="fm-editor-dialog-cancel">キャンセル</button>
+					<button type="submit" class="fm-editor-dialog-submit">追加</button>
+				</div>
+			</form>
+		`;
+    const cancelBtn = dialog.querySelector(".fm-editor-dialog-cancel");
+    cancelBtn?.addEventListener("click", () => {
+      dialog.close();
+      dialog.remove();
+    });
+    const form = dialog.querySelector("form");
+    form?.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const formData = new FormData(form);
+      const key = formData.get("key");
+      const type = formData.get("type");
+      if (key && !this.#fields.some((f) => f.key === key)) {
+        this.#addField(key, type);
+      }
+      dialog.close();
+      dialog.remove();
+    });
+    document.body.append(dialog);
+    dialog.showModal();
+    const keyInput = dialog.querySelector("#fm-new-key");
+    keyInput?.focus();
+  }
+  /**
+   * Update field value
+   * @param index
+   * @param value
+   */
+  #updateFieldValue(index, value) {
+    const field = this.#fields[index];
+    if (field) {
+      this.#fields[index] = { ...field, value };
+      this.#notifyUpdate();
+    }
+  }
+}
+function createFrontMatterEditor(options) {
+  return new FrontMatterEditor(options);
+}
+
 const client = hc(location.origin);
+const FRONT_MATTER_SAVE_DEBOUNCE_DELAY = 500;
+function debounce(fn, delay) {
+  let timeoutId = null;
+  return (...args) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn(...args);
+      timeoutId = null;
+    }, delay);
+  };
+}
 async function createEditor() {
   const configRes = await client["config.json"].$get();
   const config = await configRes.json();
@@ -40244,6 +40605,57 @@ async function createEditor() {
     console.warn("Editable area not found");
     return;
   }
+  const frontMatterContainer = document.querySelector(".front-matter-editor");
+  const frontMatterInput = document.getElementById(
+    "front-matter"
+  );
+  const hasFrontMatterInput = document.getElementById(
+    "has-front-matter"
+  );
+  let frontMatterEditor = null;
+  async function saveContent(content, frontMatterData, originalFrontMatter) {
+    const res = await client.api.content.$post({
+      json: {
+        path: location.pathname,
+        content,
+        frontMatter: frontMatterData,
+        originalFrontMatter
+      }
+    });
+    const json = await res.json();
+    if (!json.saved) {
+      console.error(`Failed to save: ${json.path}`);
+      return;
+    }
+    console.log(
+      `Saved: ${json.path}${json.hasFrontMatter ? " (with Front Matter)" : ""}`
+    );
+  }
+  const debouncedSaveFrontMatter = debounce(() => {
+    if (!frontMatterEditor) {
+      return;
+    }
+    const content = mainInput.value;
+    const frontMatterData = frontMatterEditor.getData();
+    const originalFrontMatter = frontMatterEditor.getOriginalFrontMatter();
+    void saveContent(content, frontMatterData, originalFrontMatter);
+  }, FRONT_MATTER_SAVE_DEBOUNCE_DELAY);
+  if (frontMatterContainer && frontMatterInput) {
+    const initialData = JSON.parse(frontMatterInput.value || "{}");
+    const hasFrontMatter = hasFrontMatterInput?.value === "true";
+    frontMatterEditor = createFrontMatterEditor({
+      container: frontMatterContainer,
+      initialData,
+      hasFrontMatter,
+      onUpdated: debouncedSaveFrontMatter
+    });
+    {
+      console.log("Front Matter editor initialized:", {
+        initialData,
+        hasFrontMatter
+      });
+    }
+  }
   const catalog = config.enableImportBlock ? {
     ...config.catalog,
     import: [
@@ -40293,18 +40705,9 @@ async function createEditor() {
         return;
       }
       mainInput.value = content;
-      const res = await client.api.content.$post({
-        json: {
-          path: location.pathname,
-          content
-        }
-      });
-      const json = await res.json();
-      if (!json.saved) {
-        console.error(`Failed to save: ${json.path}`);
-        return;
-      }
-      console.log(`Saved: ${json.path}`);
+      const frontMatterData = frontMatterEditor?.getData();
+      const originalFrontMatter = frontMatterEditor?.getOriginalFrontMatter();
+      await saveContent(content, frontMatterData, originalFrontMatter);
     },
     fileIO: {
       async getFileList(fileType, options) {