@tenjuu99/blog 0.3.6 → 0.4.1

package/packages/editor/js/editor.js

@@ -1,39 +1,8 @@
-const sleep = waitTime => new Promise( resolve => setTimeout(resolve, waitTime) );
+import { initAutoPreview } from './autoPreviewInitializer.js'
+import { initAutoSave } from './autoSaveInitializer.js'
+import { matchTemplate, buildFrontmatterString, loadFrontmatterTemplate } from './frontmatter_template.js'
 
-// @vocab: テンプレートマッチャー (docs/dictionary.md#テンプレートマッチャー)
-// @test: tests/editor/editor-frontmatter-template.test.js
-const matchTemplate = (filePath, templates) => {
-  if (!filePath || !templates || templates.length === 0) return null
-  let best = null
-  for (const tmpl of templates) {
-    if (filePath.startsWith(tmpl.path_prefix)) {
-      if (!best || tmpl.path_prefix.length > best.path_prefix.length) {
-        best = tmpl
-      }
-    }
-  }
-  return best
-}
-
-// @vocab: テンプレートインジェクター (docs/dictionary.md#テンプレートインジェクター)
-// @test: tests/editor/editor-frontmatter-template.test.js
-const buildFrontmatterString = (template, baseName) => {
-  const fields = { ...template.fields }
-  fields.title = baseName
-  const lines = Object.entries(fields).map(([key, value]) => `${key}: ${value}`)
-  return `---\n${lines.join('\n')}\n---\n`
-}
-
-// @vocab: フロントマターテンプレートローダー (docs/dictionary.md#フロントマターテンプレートローダー)
-// @test: tests/editor/editor-frontmatter-template.test.js
-const loadFrontmatterTemplate = (filePath, templates) => {
-  const matched = matchTemplate(filePath, templates)
-  if (!matched) return null
-  const baseName = filePath.split('/').pop().replace(/\.[^.]+$/, '')
-  return buildFrontmatterString(matched, baseName)
-}
-
-// @vocab: テンプレートレゾルバー (docs/dictionary.md#テンプレートレゾルバー)
+// @vocab: テンプレートレゾルバー
 // @test: tests/editor/editor-frontmatter-template.test.js
 let _frontmatterTemplates = []
 const initFrontmatterTemplate = async () => {
@@ -52,12 +21,10 @@ const fetchData = (target) => {
   return fetch(`/get_editor_target?md=${encodeURIComponent(target)}`)
     .then(async res => {
       if (!res.ok) {
-        document.querySelector('#inputFileName').value = target
         const baseName = target.split('/').pop().replace(/\.[^.]+$/, '')
         const initialContent = loadFrontmatterTemplate(target, _frontmatterTemplates)
           ?? `---\ntitle: ${baseName}\n---\n${baseName} についての記事を作成しましょう`
         document.querySelector('#editorTextArea').value = initialContent
-        // submit('/preview', form)
         throw new Error(`${target} does not exist.`)
       } else {
         const json = await res.json()
@@ -65,52 +32,33 @@ const fetchData = (target) => {
       }
     })
 }
+
 const onloadFunction = async (e) => {
   const form = document.querySelector('#editor')
   const textarea = form.querySelector('#editorTextArea')
-  const select = form.querySelector('#selectDataFile')
   const inputFileName = form.querySelector('#inputFileName')
+  const currentFileName = document.querySelector('#currentFileName')
   const preview = document.querySelector('#previewContent')
   const url = new URL(location)
   const target = url.searchParams.get('md')
+
+  const setCurrentFile = (filename) => {
+    inputFileName.value = filename
+    currentFileName.textContent = filename
+  }
+
   if (target) {
     fetchData(target).then(json => {
       textarea.value = json.content
-      select.value = json.filename
-      inputFileName.value = json.filename
-      inputFileName.setAttribute('disabled', true)
+      setCurrentFile(json.filename)
       submit('/preview', form)
+      fetchPublicationStatus(target)
     }).catch(e => {
       console.log('error!!!')
       console.log(e)
+      setCurrentFile(target)
     })
   }
-  select.addEventListener('change', async (event) => {
-    if (select.value) {
-      const json = await fetchData(select.value)
-      textarea.value = json.content
-      inputFileName.value = json.filename
-      inputFileName.setAttribute('disabled', true)
-      url.searchParams.set('md', select.value)
-      submit('/preview', form)
-    } else {
-      inputFileName.value = ""
-      inputFileName.removeAttribute('disabled')
-      textarea.value = ''
-      url.searchParams.set('md', "")
-      const iframe = preview.querySelector('iframe')
-      if (iframe) {
-        iframe.srcdoc = ''
-      }
-    }
-    history.pushState({}, "", url)
-  })
-
-  inputFileName.addEventListener('blur', async () => {
-    if (inputFileName.value && !select.value) {
-      fetchData(inputFileName.value).catch(() => {})
-    }
-  })
 
   const submit = (fetchUrl, form) => {
     const formData = new FormData(form)
@@ -127,35 +75,238 @@ const onloadFunction = async (e) => {
         alert(json.message)
         return
       }
-      if (json.href) {
-        await sleep(300)
-        location.href = json.href
-      }
       if (json.preview) {
-        const iframe = document.createElement('iframe')
-        iframe.setAttribute('srcdoc', json.preview)
-        iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts')
         const old = preview.querySelector('iframe')
         if (!old) {
+          const iframe = document.createElement('iframe')
+          iframe.setAttribute('srcdoc', json.preview)
+          iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts')
           preview.appendChild(iframe)
+        } else {
+          old.setAttribute('srcdoc', json.preview)
         }
-        old.setAttribute('srcdoc', json.preview)
       }
     }).catch(e => {
       console.log(e.message)
     })
   }
+
   form.addEventListener('submit', (event) => {
     event.preventDefault()
-    const fetchUrl = event.submitter.dataset.url
-    submit(fetchUrl, event.target)
+    publishWithFeedback(form)
+  })
+
+  const statusLabels = { new: '未公開', modified: '更新あり', published: '公開済み' }
+  const fetchPublicationStatus = async (filePath) => {
+    if (!filePath) return
+    const statusEl = document.querySelector('#publicationStatus')
+    if (!statusEl) return
+    statusEl.textContent = ''
+    statusEl.dataset.status = ''
+    try {
+      const res = await fetch(`/publication-status?md=${encodeURIComponent(filePath)}`)
+      if (!res.ok) { statusEl.textContent = ''; return }
+      const { status } = await res.json()
+      const label = statusLabels[status]
+      statusEl.textContent = label ? `(${label})` : ''
+      statusEl.dataset.status = status
+      // サイドバーリンクの data-status も同期する
+      const sidebarLink = document.querySelector(`.sidebar a[href="/editor?md=${encodeURIComponent(filePath)}"]`)
+      if (sidebarLink) sidebarLink.dataset.status = status || ''
+    } catch {
+      statusEl.textContent = ''
+    }
+  }
+
+  const publishWithFeedback = async (form) => {
+    const feedback = document.querySelector('#publishFeedback')
+    const btn = document.querySelector('#publishBtn')
+    const filePath = form.querySelector('#inputFileName').value
+    const fileContent = form.querySelector('textarea').value
+    btn.disabled = true
+    try {
+      feedback.textContent = '公開中...'
+      const publishRes = await fetch('/publish', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ filePath, fileContent })
+      })
+      if (!publishRes.ok) {
+        const json = await publishRes.json().catch(() => ({}))
+        feedback.textContent = `公開失敗: ${json.error ?? 'サーバーに接続できませんでした'}`
+        return
+      }
+      const json = await publishRes.json()
+      feedback.textContent = json.success ? '公開しました' : `公開失敗: ${json.error ?? '不明なエラー'}`
+      if (json.success) fetchPublicationStatus(filePath)
+    } catch (e) {
+      feedback.textContent = 'サーバーに接続できませんでした。しばらくしてからお試しください。'
+    } finally {
+      btn.disabled = false
+    }
+  }
+
+  // @vocab: 自動保存
+  // @vocab: 自動保存初期化器
+  const autoSave = async () => {
+    const filename = inputFileName.value
+    if (!filename) return
+    try {
+      const res = await fetch('/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ filename, content: textarea.value })
+      })
+      if (!res.ok) {
+        console.log('[auto-save] 保存に失敗しました', res.status)
+        return
+      }
+      fetchPublicationStatus(filename)
+    } catch (e) {
+      console.log('[auto-save] ネットワークエラー', e)
+    }
+  }
+
+  // @vocab: プレビュー自動更新器
+  const debouncedUpdate = initAutoPreview(textarea, () => submit('/preview', form), 500)
+  initAutoSave(textarea, autoSave, 500)
+  initDropReceiver(textarea, () => inputFileName.value, () => submit('/preview', form), () => debouncedUpdate.cancel())
+
+  // @vocab: 新規作成UI
+  const newFileBtn = document.querySelector('#newFileBtn')
+  const newFileDialog = document.querySelector('#newFileDialog')
+  const newFileNameInput = document.querySelector('#newFileName')
+  const newFileTemplateSelect = document.querySelector('#newFileTemplate')
+  const newFileError = document.querySelector('#newFileError')
+  const confirmNewFile = document.querySelector('#confirmNewFile')
+  const cancelNewFile = document.querySelector('#cancelNewFile')
+
+  const refreshSidebar = () => initSidebarContent(inputFileName.value)
+
+  newFileBtn.addEventListener('click', () => {
+    newFileNameInput.value = ''
+    newFileError.textContent = ''
+    // テンプレート選択肢を再構築して auto-select をリセット
+    newFileTemplateSelect.innerHTML = '<option value="">テンプレートなし</option>'
+    for (const tmpl of _frontmatterTemplates) {
+      const option = document.createElement('option')
+      option.value = tmpl.path_prefix
+      option.textContent = `テンプレート: ${tmpl.path_prefix}`
+      newFileTemplateSelect.appendChild(option)
+    }
+    newFileTemplateSelect.value = ''
+    newFileDialog.showModal()
+  })
+
+  // ファイル名入力に応じてテンプレートを auto-select
+  newFileNameInput.addEventListener('input', () => {
+    const filename = newFileNameInput.value
+    const template = matchTemplate(filename, _frontmatterTemplates)
+    newFileTemplateSelect.value = template ? template.path_prefix : ''
+  })
+
+  // F-01: Enter キーで確定
+  newFileNameInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      confirmNewFile.click()
+    }
+  })
+
+  // F-02: 重複チェック付き作成。エラー時はダイアログを閉じない
+  confirmNewFile.addEventListener('click', async () => {
+    const filename = newFileNameInput.value.trim()
+    if (!filename) return
+
+    const selectedPrefix = newFileTemplateSelect.value
+    const selectedTemplate = selectedPrefix
+      ? _frontmatterTemplates.find(t => t.path_prefix === selectedPrefix)
+      : null
+    const baseName = filename.split('/').pop().replace(/\.[^.]+$/, '')
+    const content = selectedTemplate
+      ? buildFrontmatterString(selectedTemplate, baseName)
+      : `---\ntitle: ${baseName}\n---\n`
+
+    const res = await fetch('/save', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ filename, content, createOnly: true })
+    })
+
+    if (!res.ok) {
+      const json = await res.json().catch(() => ({}))
+      newFileError.textContent = json.error ?? 'ファイルの作成に失敗しました'
+      return
+    }
+
+    newFileDialog.close()
+    textarea.value = content
+    setCurrentFile(filename)
+    url.searchParams.set('md', filename)
+    history.pushState({}, '', url)
+    submit('/preview', form)
+    fetchPublicationStatus(filename)
+    refreshSidebar()
+  })
+
+  cancelNewFile.addEventListener('click', () => newFileDialog.close())
+
+  // インプレースファイル読み込み
+  // サイドバーリンクのクリックやブラウザ履歴移動で呼ばれる。
+  // turbolink によるページ全体の差し替えではなく、エディタ状態をその場で更新することでちらつきを防ぐ。
+  const loadFileInPlace = async (newTarget) => {
+    // サイドバーのアクティブ状態を更新
+    document.querySelectorAll('.sidebar a').forEach(a => a.classList.remove('active'))
+    const activeLink = document.querySelector(`.sidebar a[href="/editor?md=${encodeURIComponent(newTarget)}"]`)
+    if (activeLink) activeLink.classList.add('active')
+
+    try {
+      const json = await fetchData(newTarget)
+      textarea.value = json.content
+      setCurrentFile(json.filename)
+      submit('/preview', form)
+      fetchPublicationStatus(newTarget)
+    } catch (e) {
+      // ファイルが存在しない場合、fetchData 内でテキストエリアに初期内容を設定済み
+      setCurrentFile(newTarget)
+    }
+  }
+
+  // サイドバーのリンクをインターセプトしてインプレース読み込みに切り替える。
+  // サイドバーは動的に生成されるため、個別リンクへのバインドではなく .sidebar へのデリゲーションで処理する。
+  document.querySelector('.sidebar').addEventListener('click', async (e) => {
+    const link = e.target.closest('a')
+    if (!link) return
+    let linkUrl
+    try { linkUrl = new URL(link.href) } catch { return }
+    if (linkUrl.pathname !== '/editor') return
+    const newTarget = linkUrl.searchParams.get('md')
+    if (!newTarget) return
+    e.preventDefault()
+
+    const currentTarget = inputFileName.value || url.searchParams.get('md')
+    if (newTarget === currentTarget) return
+
+    const newUrl = new URL(location)
+    newUrl.searchParams.set('md', newTarget)
+    history.pushState({}, '', newUrl)
+
+    await loadFileInPlace(newTarget)
+  })
+
+  // ブラウザの戻る/進むに対応
+  window.addEventListener('popstate', async () => {
+    const newTarget = new URL(location).searchParams.get('md') || ''
+    if (newTarget) {
+      await loadFileInPlace(newTarget)
+    }
   })
 }
 
 const SIDEBAR_OPEN_KEY = 'sidebar-is-open'
 const DIR_OPEN_KEY = 'sidebar-dir-open'
 
-// @vocab: 展開状態 (docs/dictionary.md#展開状態)
+// @vocab: 展開状態
 // @test: tests/editor/editor-sidebar.test.js
 const loadDirOpenState = () => {
   try {
@@ -165,15 +316,15 @@ const loadDirOpenState = () => {
   }
 }
 
-// @vocab: 展開状態 (docs/dictionary.md#展開状態)
+// @vocab: 展開状態
 // @test: tests/editor/editor-sidebar.test.js
 const saveDirOpenState = (state) => {
   localStorage.setItem(DIR_OPEN_KEY, JSON.stringify(state))
 }
 
-// @vocab: サイドバー (docs/dictionary.md#サイドバー)
-// @vocab: アクティブファイル (docs/dictionary.md#アクティブファイル)
-// @vocab: 展開状態 (docs/dictionary.md#展開状態)
+// @vocab: サイドバー
+// @vocab: アクティブファイル
+// @vocab: 展開状態
 // @test: tests/editor/editor-sidebar.test.js
 const initSidebarTree = (activeFile) => {
   const state = loadDirOpenState()
@@ -203,14 +354,30 @@ const initSidebarTree = (activeFile) => {
 
   // アクティブファイルに class="active" を付与（SSG では静的に付与できないため JS で補完）
   if (activeFile) {
-    const link = document.querySelector(`.sidebar a[href="/editor?md=${CSS.escape(activeFile)}"]`)
+    const link = document.querySelector(`.sidebar a[href="/editor?md=${encodeURIComponent(activeFile)}"]`)
     if (link) {
       link.classList.add('active')
     }
   }
 }
 
-// @vocab: サイドバー (docs/dictionary.md#サイドバー)
+// @vocab: サイドバー取得エンドポイント
+const initSidebarContent = async (activeFile) => {
+  try {
+    const res = await fetch('/get_sidebar')
+    if (!res.ok) return
+    const { html } = await res.json()
+    const sidebar = document.querySelector('.sidebar')
+    const toggle = sidebar.querySelector('.sidebar-toggle')
+    sidebar.innerHTML = html
+    sidebar.appendChild(toggle)
+    initSidebarTree(activeFile)
+  } catch (e) {
+    console.log('[sidebar] init failed', e)
+  }
+}
+
+// @vocab: サイドバー
 // @test: tests/editor/editor-sidebar.test.js
 const sidebarToggle = (e) => {
   const sidebar = document.querySelector('.sidebar')
@@ -231,7 +398,8 @@ const sidebarToggle = (e) => {
     main.classList.toggle('sidebar-close')
   })
 }
-// @vocab: 画像アップローダー (docs/dictionary.md#画像アップローダー)
+
+// @vocab: 画像アップローダー
 const uploadImage = async (file, mdFile) => {
   const buffer = await file.arrayBuffer()
   const base64 = btoa(new Uint8Array(buffer).reduce((s, b) => s + String.fromCharCode(b), ''))
@@ -245,14 +413,17 @@ const uploadImage = async (file, mdFile) => {
   return json.markdownUrl
 }
 
-// @vocab: ドロップレシーバー (docs/dictionary.md#ドロップレシーバー)
-const initDropReceiver = (textarea, getMdFile) => {
+// @vocab: ドロップレシーバー
+// @vocab: ドロップ後更新
+const initDropReceiver = (textarea, getMdFile, onUpdate, cancelPendingDebounce) => {
   textarea.addEventListener('dragover', (e) => {
     e.preventDefault()
   })
   textarea.addEventListener('drop', async (e) => {
     e.preventDefault()
+    if (cancelPendingDebounce) cancelPendingDebounce()
     const files = [...e.dataTransfer.files].filter(f => f.type.startsWith('image/'))
+    let inserted = false
     for (const file of files) {
       const markdownUrl = await uploadImage(file, getMdFile())
       if (markdownUrl) {
@@ -260,19 +431,18 @@ const initDropReceiver = (textarea, getMdFile) => {
         const content = textarea.value
         textarea.value = content.slice(0, start) + `![](${markdownUrl})` + content.slice(start)
         textarea.selectionStart = textarea.selectionEnd = start + `![](${markdownUrl})`.length
+        inserted = true
       }
     }
+    if (inserted && onUpdate) onUpdate()
   })
 }
 
 document.addEventListener('DOMContentLoaded', async (event) => {
   const url = new URL(location)
   const activeFile = url.searchParams.get('md') || ''
+  await initSidebarContent(activeFile)
   await initFrontmatterTemplate()
   onloadFunction(event)
   sidebarToggle(event)
-  initSidebarTree(activeFile)
-  const textarea = document.querySelector('#editorTextArea')
-  const inputFileName = document.querySelector('#inputFileName')
-  initDropReceiver(textarea, () => inputFileName.value)
 })

package/packages/editor/js/frontmatter_template.js

@@ -6,7 +6,7 @@
  * ファイルパスにマッチするフロントマターテンプレート設定を選択する。
  * 複数マッチする場合は最も長いプレフィックスを優先する。
  *
- * @vocab: テンプレートマッチャー (docs/dictionary.md#テンプレートマッチャー)
+ * @vocab: テンプレートマッチャー
  * @test: tests/editor/editor-frontmatter-template.test.js
  *
  * @param {string} filePath - 新規ファイルのパス（例: "book/my-book.md"）
@@ -32,7 +32,7 @@ export function matchTemplate(filePath, templates) {
  * フロントマターテンプレート設定をフロントマター文字列に変換する。
  * title はファイル名から自動生成する（fields に title がある場合でもファイル名を優先）。
  *
- * @vocab: テンプレートインジェクター (docs/dictionary.md#テンプレートインジェクター)
+ * @vocab: テンプレートインジェクター
  * @test: tests/editor/editor-frontmatter-template.test.js
  *
  * @param {FrontmatterTemplateConfig} template - マッチしたテンプレート設定
@@ -52,7 +52,7 @@ export function buildFrontmatterString(template, baseName) {
  * ファイルパスとテンプレート設定一覧からフロントマター文字列を生成する。
  * マッチするテンプレートがない場合は null を返す。
  *
- * @vocab: フロントマターテンプレートローダー (docs/dictionary.md#フロントマターテンプレートローダー)
+ * @vocab: フロントマターテンプレートローダー
  * @test: tests/editor/editor-frontmatter-template.test.js
  *
  * @param {string} filePath - 新規ファイルのパス（例: "book/my-book.md"）

package/packages/editor/js/imageReferenceExtractor.js

@@ -0,0 +1,19 @@
+
+/**
+ * @vocab: 画像参照抽出器
+ * @test tests/editor/publish.test.js
+ * @param {string} markdownContent - Markdown テキスト
+ * @returns {string[]} http/https を除いたローカル画像パスの配列
+ */
+export function extractImageReferences(markdownContent) {
+  const regex = /!\[.*?\]\(([^\s)]+)/g
+  const paths = []
+  let match
+  while ((match = regex.exec(markdownContent)) !== null) {
+    const url = match[1]
+    if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('//')) {
+      paths.push(url)
+    }
+  }
+  return paths
+}

package/packages/editor/js/image_upload.js

@@ -1,5 +1,5 @@
 /**
- * @vocab: Markdown挿入器 (docs/dictionary.md#Markdown挿入器)
+ * @vocab: Markdown挿入器
  * @test: tests/editor/editor-image-upload.test.js
  * @param {string} content
  * @param {number} cursorPos

package/packages/editor/js/tree.js

@@ -6,9 +6,9 @@
  * @param {Array<{name: string, __filetype: string, url: string}>} files
  * @returns {TreeNode}
  */
-// @vocab: ツリービルダー (docs/dictionary.md#ツリービルダー)
-// @vocab: ファイルリスト (docs/dictionary.md#ファイルリスト)
-// @vocab: ディレクトリツリー (docs/dictionary.md#ディレクトリツリー)
+// @vocab: ツリービルダー
+// @vocab: ファイルリスト
+// @vocab: ディレクトリツリー
 // @test: tests/editor/editor-sidebar.test.js
 export function buildTree(files) {
   const root = { dirs: {}, files: [] }
@@ -33,32 +33,47 @@ export function buildTree(files) {
   return root
 }
 
+/**
+ * @param {string} str
+ * @returns {string}
+ */
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
 /**
  * @param {TreeNode} tree
  * @param {string} [activeFile]
+ * @param {Object.<string, 'new'|'modified'|'published'|'unknown'>} [statusMap]
  * @param {string} [_dirPath]
  * @returns {string}
  */
-// @vocab: ツリーレンダラー (docs/dictionary.md#ツリーレンダラー)
-// @vocab: ディレクトリツリー (docs/dictionary.md#ディレクトリツリー)
-// @vocab: ディレクトリノード (docs/dictionary.md#ディレクトリノード)
-// @vocab: ファイルノード (docs/dictionary.md#ファイルノード)
-// @vocab: アクティブファイル (docs/dictionary.md#アクティブファイル)
+// @vocab: ツリーレンダラー
+// @vocab: ディレクトリツリー
+// @vocab: ディレクトリノード
+// @vocab: ファイルノード
+// @vocab: アクティブファイル
 // @test: tests/editor/editor-sidebar.test.js
-export function renderTreeHtml(tree, activeFile = '', _dirPath = '') {
+export function renderTreeHtml(tree, activeFile = '', statusMap = {}, _dirPath = '') {
   let html = '<ul>'
 
   for (const [dirName, subtree] of Object.entries(tree.dirs)) {
     const dirPath = _dirPath ? `${_dirPath}/${dirName}` : dirName
-    html += `<li class="dir-node"><details data-dir="${dirPath}"><summary>${dirName}</summary>`
-    html += renderTreeHtml(subtree, activeFile, dirPath)
+    html += `<li class="dir-node"><details data-dir="${escapeHtml(dirPath)}"><summary>${escapeHtml(dirName)}</summary>`
+    html += renderTreeHtml(subtree, activeFile, statusMap, dirPath)
     html += `</details></li>`
   }
 
   for (const file of tree.files) {
     const isActive = file.path === activeFile
     const activeAttr = isActive ? ' class="active"' : ''
-    html += `<li><a href="/editor?md=${file.path}"${activeAttr}>${file.label}</a></li>`
+    const status = statusMap[file.path]
+    const statusAttr = status ? ` data-status="${escapeHtml(status)}"` : ''
+    html += `<li><a href="/editor?md=${encodeURIComponent(file.path)}"${activeAttr}${statusAttr}>${escapeHtml(file.label)}</a></li>`
   }
 
   html += '</ul>'

package/packages/editor/server/changeReflector.js

@@ -0,0 +1,47 @@
+/**
+ * @vocab: 変更反映器
+ * @test tests/editor/publish.test.js
+ */
+
+/**
+ * 遷移実行体。commit と push を注入することで実際の git なしにテストできる。
+ * @typedef {object} PublishActions
+ * @property {(files: string[]) => Promise<boolean>} commit - ファイル群をステージしてコミットする。変更がなければ false を返す
+ * @property {() => Promise<{ success: boolean, error?: string }>} push - リモートへプッシュする
+ */
+
+/**
+ * @param {string[]} files - コミット対象ファイルパスの配列
+ * @param {PublishActions} publishActions
+ * @returns {Promise<{ success: boolean, error?: string }>}
+ */
+async function reflect(files, publishActions) {
+  const committed = await publishActions.commit(files)
+  // 変更がない（コミット不要）場合は成功とみなす
+  if (!committed) return { success: true }
+  return await publishActions.push()
+}
+
+/**
+ * @vocab: 公開する
+ * 未公開 → 公開済み 遷移。更新する と現在は同じ実装だが、
+ * 将来「非公開にする」「削除する」などの遷移が加わったとき実装が分岐する。
+ * @param {string[]} files - コミット対象ファイルパスの配列
+ * @param {PublishActions} publishActions
+ * @returns {Promise<{ success: boolean, error?: string }>}
+ */
+export async function publish(files, publishActions) {
+  return reflect(files, publishActions)
+}
+
+/**
+ * @vocab: 更新する
+ * 更新あり → 公開済み 遷移。公開する と現在は同じ実装だが、
+ * 将来「非公開にする」「削除する」などの遷移が加わったとき実装が分岐する。
+ * @param {string[]} files - コミット対象ファイルパスの配列
+ * @param {PublishActions} publishActions
+ * @returns {Promise<{ success: boolean, error?: string }>}
+ */
+export async function update(files, publishActions) {
+  return reflect(files, publishActions)
+}

package/packages/editor/server/createConverter.js

@@ -3,8 +3,8 @@ import nodePath from 'node:path'
 const rootDir = process.cwd()
 
 /**
- * @vocab: コンバーターファクトリー (docs/dictionary.md#コンバーターファクトリー)
- * @vocab: 画像コンバーター (docs/dictionary.md#画像コンバーター)
+ * @vocab: コンバーターファクトリー
+ * @vocab: 画像コンバーター
  * @test: tests/editor/editor-image-upload.test.js
  * @param {Function|string|null} converterOrName - 関数、ユーザーパス（./で始まる）、またはビルトイン名
  * @returns {Promise<{ fn: Function, ext: string|null }>}

package/packages/editor/server/get_editor_target.js

@@ -1,7 +1,7 @@
 import { IncomingMessage, ServerResponse } from 'http'
 import fs from 'node:fs'
 import config from '@tenjuu99/blog/lib/config.js'
-import { pageDir } from '@tenjuu99/blog/lib/dir.js'
+import { watch } from '@tenjuu99/blog/lib/dir.js'
 
 export const path = '/get_editor_target'
 
@@ -15,7 +15,7 @@ export const get = async (req, res) => {
   if (!target) {
     return
   }
-  const file = `${pageDir}/${target}`
+  const file = `${watch.pageDir}/${target}`
   if (!fs.existsSync(`${file}`)) {
     return {
       status: 404,