@tenjuu99/blog 0.3.6 → 0.4.1

package/lib/dir.js

@@ -27,8 +27,8 @@ const packageDirCore = path.dirname(__filename) + '/../packages'
 
 let alreadyCached = false
 
-// @vocab: パッケージ (docs/dictionary.md#パッケージ)
-// @vocab: ビルド (docs/dictionary.md#ビルド)
+// @vocab: パッケージ
+// @vocab: ビルド
 // @test: tests/ssg-core/hooks.test.js
 const cache = () => {
   if (alreadyCached) {

package/lib/distribute.js

@@ -13,16 +13,16 @@ import { createConverter } from '../packages/editor/server/createConverter.js'
 
 const indexFile = `${cacheDir}/index.json`
 
-// @vocab: ページ (docs/dictionary.md#ページ)
-// @vocab: テンプレート (docs/dictionary.md#テンプレート)
+// @vocab: ページ
+// @vocab: テンプレート
 const renderPage = async (page) => {
   const template = page.template
   return [page.name, await render(template, page)]
 }
 
-// @vocab: ビルド (docs/dictionary.md#ビルド)
-// @vocab: ページ (docs/dictionary.md#ページ)
-// @vocab: ページインデックス (docs/dictionary.md#ページインデックス)
+// @vocab: ビルド
+// @vocab: ページ
+// @vocab: ページインデックス
 // @test: tests/ssg-core/hooks.test.js
 const distribute = async (data, srcDir, distDir) => {
   const promises = []

package/lib/files.js

@@ -4,7 +4,7 @@ import { templateDir, cssDir } from './dir.js'
 let staticFilesContainer = {}
 let loaded = false
 
-// @vocab: テンプレート (docs/dictionary.md#テンプレート)
+// @vocab: テンプレート
 // @test: tests/editor/editor-sidebar.test.js
 const warmUp = async () => {
   if (loaded) {

package/lib/filter.js

@@ -70,8 +70,8 @@ const ifConditionEvaluator = (condition, variables) => {
  * @param {object} variables
  * @returns {string}
  */
-// @vocab: テンプレート (docs/dictionary.md#テンプレート)
-// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @vocab: テンプレート
+// @vocab: ヘルパー関数
 // @test: tests/ssg-core/filter.test.js
 const replaceIfFilter = (text, variables) => {
   const matched = [...text.matchAll(IF_REGEXP)]
@@ -90,9 +90,9 @@ const replaceIfFilter = (text, variables) => {
   return text
 }
 
-// @vocab: SSGスクリプト (docs/dictionary.md#ssgスクリプト)
-// @vocab: テンプレート (docs/dictionary.md#テンプレート)
-// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @vocab: SSGスクリプト
+// @vocab: テンプレート
+// @vocab: ヘルパー関数
 // @test: tests/ssg-core/filter.test.js
 const replaceScriptFilter = async (text, variables) => {
   let replaced = text

package/lib/generate.js

@@ -12,7 +12,7 @@ const beforeGenerate = async () => {
   await warmUpTemplate()
 }
 
-// @vocab: ビルド (docs/dictionary.md#ビルド)
+// @vocab: ビルド
 // @test: tests/ssg-core/hooks.test.js
 export const runHooks = async (hookName, customHelperDir = null, customAllData = null, customConfig = null) => {
   const targetConfig = customConfig || config
@@ -45,8 +45,8 @@ export const runHooks = async (hookName, customHelperDir = null, customAllData =
   }
 }
 
-// @vocab: ビルド (docs/dictionary.md#ビルド)
-// @vocab: ページインデックス (docs/dictionary.md#ページインデックス)
+// @vocab: ビルド
+// @vocab: ページインデックス
 // @test: tests/ssg-core/hooks.test.js
 const generate = async () => {
   let start = performance.now()

package/lib/helper.js

@@ -7,8 +7,8 @@ const helper = {}
 // top-level await を使うと循環依存がある場合に ESM のデッドロックが発生するため IIFE を使用する。
 // helperReady をエクスポートすることで、ヘルパーのロード完了を外部から await できる。
 // （Promise は一度 resolve すれば以降の await は即座に返るため、複数箇所で await しても問題ない）
-// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
-// @vocab: パッケージ (docs/dictionary.md#パッケージ)
+// @vocab: ヘルパー関数
+// @vocab: パッケージ
 // @test: tests/ssg-core/helper.test.js
 export const helperReady = (async () => {
   if (config.helper) {

package/lib/imageDistributor.js

@@ -4,7 +4,7 @@ import path from 'node:path'
 const IMAGE_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'tiff', 'heic', 'bmp'])
 
 /**
- * @vocab ビルド画像配布器 (docs/dictionary.md)
+ * @vocab ビルド画像配布器
  * @test tests/ssg-core/imageDistributor.test.js
  */
 export async function distributeImages(srcDir, distDir, { fn, ext }) {
@@ -28,7 +28,7 @@ export async function distributeImages(srcDir, distDir, { fn, ext }) {
 }
 
 /**
- * @vocab ビルド画像配布器 (docs/dictionary.md)
+ * @vocab ビルド画像配布器
  * @test tests/ssg-core/imageDistributor.test.js
  */
 export async function collectFiles(dir) {
@@ -48,7 +48,7 @@ export async function collectFiles(dir) {
 }
 
 /**
- * @vocab ビルド画像配布器 (docs/dictionary.md)
+ * @vocab ビルド画像配布器
  * @test tests/ssg-core/imageDistributor.test.js
  */
 export async function writeConvertedFile(srcPath, distPath, fn) {

package/lib/indexer.js

@@ -31,8 +31,8 @@ const collect = (dir, namePrefix = '', promises = []) => {
   return promises
 }
 
-// @vocab: ページインデックス (docs/dictionary.md#ページインデックス)
-// @vocab: ページ (docs/dictionary.md#ページ)
+// @vocab: ページインデックス
+// @vocab: ページ
 // @test: tests/ssg-core/indexer.test.js
 const indexing = async () => {
   allData = {}

package/lib/pageData.js

@@ -5,16 +5,16 @@ import config from './config.js'
 const FRONTMATTER_REGEXP = /^(<!|-)--(?<variables>[\s\S]*?)--(-|>)/
 const METADATA_KEY_REGEXP = /^([a-zA-Z\d_-]+):/
 
-// @vocab: ページ (docs/dictionary.md#ページ)
-// @vocab: フロントマター (docs/dictionary.md#フロントマター)
+// @vocab: ページ
+// @vocab: フロントマター
 // @test: tests/ssg-core/pageData.test.js
 const makePageData = (filename, content) => {
   const [name, ext] = filename.split('.')
   return parse(content, name, ext)
 }
 
-// @vocab: フロントマター (docs/dictionary.md#フロントマター)
-// @vocab: ページ (docs/dictionary.md#ページ)
+// @vocab: フロントマター
+// @vocab: ページ
 const parse = (content, name, ext) => {
   const matched = content.match(FRONTMATTER_REGEXP)
   const markdownReplaced = content.replace(FRONTMATTER_REGEXP, '')
@@ -70,7 +70,7 @@ const parse = (content, name, ext) => {
   return metaDataMerged
 }
 
-// @vocab: フロントマター (docs/dictionary.md#フロントマター)
+// @vocab: フロントマター
 // @test: tests/ssg-core/pageData.test.js
 const parseMetaData = (data) => {
   const metaData = {}

package/lib/render.js

@@ -13,10 +13,10 @@ marked.use({
   breaks: true
 })
 
-// @vocab: テンプレート (docs/dictionary.md#テンプレート)
-// @vocab: ページ (docs/dictionary.md#ページ)
-// @vocab: SSGスクリプト (docs/dictionary.md#ssgスクリプト)
-// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @vocab: テンプレート
+// @vocab: ページ
+// @vocab: SSGスクリプト
+// @vocab: ヘルパー関数
 // @test: tests/ssg-core/helper.test.js
 const render = async (templateName, data) => {
   await helperReady

package/lib/replaceVariablesFilter.js

@@ -11,8 +11,8 @@ const VARIABLE_REGEXP = /(\\)?{{[\s]*([^{}]+)[\s]*}}/g
  * @params {object} variables
  * @return {text}
  */
-// @vocab: テンプレート (docs/dictionary.md#テンプレート)
-// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
+// @vocab: テンプレート
+// @vocab: ヘルパー関数
 // @test: tests/ssg-core/replaceVariablesFilter.test.js
 const replaceVariablesFilter = (text, variables) => {
   const matched = [...text.matchAll(VARIABLE_REGEXP)]
@@ -32,8 +32,8 @@ const replaceVariablesFilter = (text, variables) => {
  * @param {object} variables
  * @return {Array.<string>}
  */
-// @vocab: ヘルパー関数 (docs/dictionary.md#ヘルパー関数)
-// @vocab: テンプレート (docs/dictionary.md#テンプレート)
+// @vocab: ヘルパー関数
+// @vocab: テンプレート
 const replaceVariable = (target, replaceTargetRawText, backslash, variables) => {
     const toBeReplace = replaceTargetRawText
     const toBeReplaceScript = toBeReplace.match(/([\w\d_]+)\((.*)\)/)

package/lib/server/helper/parseRequestBody.js

@@ -0,0 +1,46 @@
+/**
+ * HTTP リクエストボディを JSON としてパースする共通ヘルパー。
+ * Buffer.concat による安全な連結、サイズ制限、JSON.parse エラーハンドリングを提供する。
+ *
+ * @param {import('http').IncomingMessage} req
+ * @param {{ maxSize?: number }} [options] maxSize: バイト上限（デフォルト: 無制限）
+ * @returns {Promise<unknown>} パース済み JSON
+ * @throws {{ message: string, code: 'PAYLOAD_TOO_LARGE' | 'INVALID_JSON' }} パース失敗時
+ */
+export function parseJsonBody(req, options = {}) {
+  const { maxSize = Infinity } = options
+  return new Promise((resolve, reject) => {
+    const chunks = []
+    let totalSize = 0
+    let aborted = false
+    req
+      .on('data', chunk => {
+        if (aborted) return
+        totalSize += chunk.length
+        if (totalSize > maxSize) {
+          aborted = true
+          req.destroy()
+          const err = new Error('リクエストサイズが上限を超えています')
+          err.code = 'PAYLOAD_TOO_LARGE'
+          reject(err)
+          return
+        }
+        chunks.push(chunk)
+      })
+      .on('end', () => {
+        if (aborted) return
+        try {
+          // setEncoding('utf8') 時は chunks が string[] になるため両ケースに対応する
+          const body = Buffer.isBuffer(chunks[0])
+            ? Buffer.concat(chunks).toString('utf8')
+            : chunks.join('')
+          resolve(JSON.parse(body))
+        } catch {
+          const err = new Error('リクエストボディのJSON解析に失敗しました')
+          err.code = 'INVALID_JSON'
+          reject(err)
+        }
+      })
+      .on('error', reject)
+  })
+}

package/lib/server.js

@@ -1,7 +1,7 @@
 import http from 'http'
 import url from 'url'
 import fs from 'node:fs'
-import { distDir, serverDir } from './dir.js'
+import { distDir, srcDir, serverDir } from './dir.js'
 import { styleText } from 'node:util'
 import handle from './tryServer.js'
 import contentType from './contentType.js'
@@ -20,7 +20,11 @@ const server = () => {
       }
       path += '.html'
     }
-    if (!fs.existsSync(`${distDir}${path}`)) {
+    let filePath = `${distDir}${path}`
+    if (!fs.existsSync(filePath)) {
+      filePath = `${srcDir}${path}`
+    }
+    if (!fs.existsSync(filePath)) {
       console.log(styleText('red', `[${request.method}] 404`), request.url)
       const errorContent = fs.readFileSync(`${distDir}/404.html`)
       response.writeHead(404)
@@ -28,7 +32,7 @@ const server = () => {
       return
     }
     try {
-      const content = fs.readFileSync(`${distDir}${path}`, 'binary')
+      const content = fs.readFileSync(filePath, 'binary')
 
       const ext = path.split('.')[1]
       console.log(styleText('green', `[${request.method}] 200`), request.url)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenjuu99/blog",
-  "version": "0.3.6",
+  "version": "0.4.1",
   "description": "blog template",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,8 @@
   },
   "bin": {
     "generate": "bin/generate",
-    "server": "bin/dev-server",
+    "server": "bin/server",
+    "dev-server": "bin/dev-server",
     "create-blog": "bin/new"
   },
   "author": "AmashigeSeiji",

package/packages/category/helper/category.js

@@ -8,10 +8,10 @@ let categoryTreeCache = null
  * @param {Object} config - 設定オブジェクト
  * @returns {Object} カテゴリーツリー
  */
-// @vocab: カテゴリーシステム (docs/dictionary.md#カテゴリーシステム)
-// @vocab: カテゴリー (docs/dictionary.md#カテゴリー)
-// @vocab: カテゴリーパス (docs/dictionary.md#カテゴリーパス)
-// @vocab: サブカテゴリー (docs/dictionary.md#サブカテゴリー)
+// @vocab: カテゴリーシステム
+// @vocab: カテゴリー
+// @vocab: カテゴリーパス
+// @vocab: サブカテゴリー
 // @test: tests/category/category-tree.test.js
 export function buildCategoryTree(data = allData, conf = config) {
   const tree = {}
@@ -79,9 +79,9 @@ export function getCategoryTree() {
  * @param {Array} categoryPath - カテゴリーパス（例: ["Art", "Painting"]）
  * @returns {Array} ページデータの配列
  */
-// @vocab: カテゴリーパス (docs/dictionary.md#カテゴリーパス)
-// @vocab: カテゴリー (docs/dictionary.md#カテゴリー)
-// @vocab: ページ (docs/dictionary.md#ページ)
+// @vocab: カテゴリーパス
+// @vocab: カテゴリー
+// @vocab: ページ
 // @test: tests/category/category-helper.test.js
 export function getCategoryPages(categoryPath) {
   const pages = []
@@ -104,9 +104,9 @@ export function getCategoryPages(categoryPath) {
  * @param {Array} categoryPath - カテゴリーパス（例: ["Art"]）
  * @returns {Array} ページデータの配列
  */
-// @vocab: サブカテゴリー (docs/dictionary.md#サブカテゴリー)
-// @vocab: カテゴリーパス (docs/dictionary.md#カテゴリーパス)
-// @vocab: ページ (docs/dictionary.md#ページ)
+// @vocab: サブカテゴリー
+// @vocab: カテゴリーパス
+// @vocab: ページ
 // @test: tests/category/category-helper.test.js
 export function getCategoryPagesRecursive(categoryPath) {
   const pages = []

package/packages/category/helper/categoryIndexer.js

@@ -4,7 +4,7 @@ import { buildCategoryTree } from './category.js'
  * 記事名配列を perPage 件ずつのページ配列に分割する
  * 空の場合は [[]] を返す（ページ数ゼロを避けるため）
  */
-// @vocab: ページネーション (docs/dictionary.md#ページネーション)
+// @vocab: ページネーション
 // @test: tests/category/category-pagination.test.js
 function sliceIntoPages(items, perPage) {
   if (items.length === 0) return [[]]
@@ -39,8 +39,8 @@ function sliceIntoPages(items, perPage) {
  * @param {Object} categoryConfig - 単一カテゴリー設定オブジェクト
  * @param {Object} config - グローバル設定オブジェクト
  */
-// @vocab: カテゴリーページ (docs/dictionary.md#カテゴリーページ)
-// @vocab: ページネーション (docs/dictionary.md#ページネーション)
+// @vocab: カテゴリーページ
+// @vocab: ページネーション
 // @test: tests/category/category-pagination.test.js
 function buildVirtualPage(url, categoryData, children, currentPage, totalPages, categoryConfig, config) {
   const pageName = url.replace(/^\//, '') + '/index'
@@ -87,9 +87,9 @@ function buildVirtualPage(url, categoryData, children, currentPage, totalPages,
  * @param {Object} categoryConfig - 単一カテゴリー設定オブジェクト
  * @param {Object} config - グローバル設定オブジェクト
  */
-// @vocab: カテゴリーページ (docs/dictionary.md#カテゴリーページ)
-// @vocab: カテゴリーシステム (docs/dictionary.md#カテゴリーシステム)
-// @vocab: ページネーション (docs/dictionary.md#ページネーション)
+// @vocab: カテゴリーページ
+// @vocab: カテゴリーシステム
+// @vocab: ページネーション
 // @test: tests/category/category-pagination.test.js
 function generateCategoryPages(allData, categoryConfig, config) {
   const pathFilter = categoryConfig.path_filter || ''
@@ -149,8 +149,8 @@ function generateCategoryPages(allData, categoryConfig, config) {
  * @param {Object} allData - 全ページデータ
  * @param {Object} config - 設定オブジェクト
  */
-// @vocab: カテゴリーシステム (docs/dictionary.md#カテゴリーシステム)
-// @vocab: ビルド (docs/dictionary.md#ビルド)
+// @vocab: カテゴリーシステム
+// @vocab: ビルド
 // @test: tests/category/category-indexer.test.js
 export async function afterIndexing(allData, config) {
   const categorySystems = config.categories

package/packages/category/helper/pagination.js

@@ -2,8 +2,8 @@
  * getPaginationUrl: ページ番号から URL を生成する
  * page === 1 なら basePath、それ以外なら basePath + page + '/'
  */
-// @vocab: ページネーション (docs/dictionary.md#ページネーション)
-// @vocab: カテゴリーページ (docs/dictionary.md#カテゴリーページ)
+// @vocab: ページネーション
+// @vocab: カテゴリーページ
 // @test: tests/category/category-pagination.test.js
 export function getPaginationUrl(basePath, page) {
   const base = basePath.endsWith('/') ? basePath : `${basePath}/`
@@ -15,7 +15,7 @@ export function getPaginationUrl(basePath, page) {
  * buildWindowedPages: ウィンドウ付きページ番号リストを生成する
  * 各要素は {num, isCurrent} または {num: null, isEllipsis: true}
  */
-// @vocab: ページネーション (docs/dictionary.md#ページネーション)
+// @vocab: ページネーション
 // @test: tests/category/category-pagination.test.js
 export function buildWindowedPages(totalPages, currentPage, windowSize = 2) {
   if (totalPages <= 0) return []

package/packages/editor/css/editor.css

@@ -3,6 +3,8 @@ body {
   height: 100vh;
   display: flex;
   flex-direction: column;
+  font-family: Helvetica, "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
+  font-weight: 300;
 }
 header {
   text-align: center;
@@ -49,6 +51,42 @@ main.container {
 .editor-options {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 5px;
+}
+.editor-options-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.editor-options-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+#newFileDialog {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 24px;
+  min-width: 320px;
+}
+#newFileDialog form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+#newFileDialog label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+#newFileDialog #newFileError {
+  color: #c00;
+  font-size: 0.9em;
+  margin: 0;
+  min-height: 1.2em;
 }
 #editorTextArea {
   resize: none;
@@ -81,20 +119,27 @@ form select {
   border: none;
   border-radius: 0 5px 5px 0;
 }
+
 .sidebar {
+  --sidebar-bg: #313d64;
+  --sidebar-dir: #79afb4;
+  --sidebar-file: #cbcbcb;
+  --sidebar-active-file-fg: #333;
+  --sidebar-active-file-bg: rgba(165,218,246,0.8);
+  --sidebar-modified-fg: #ff7777;
+  --sidebar-hover-bg: rgba(104, 117, 154, .3);
   display: flex;
   justify-content: space-between;
   width: 300px;
-  overflow: hidden;
+  overflow: scroll;
   left: 0;
-  background: rgb(192, 198, 217);
+  background: var(--sidebar-bg);
   height: 100%;
   padding: 0;
-  overflow-y: auto;
   flex-basis: 300px;
   position: relative;
   z-index: 3;
-  word-break: break-all;
+  font-size: 0.85em;
 }
 .sidebar-close .sidebar {
   left: -290px;
@@ -104,6 +149,9 @@ form select {
   padding: 0;
   margin: 0;
 }
+.sidebar > ul {
+  padding: 0 0 0 15px;
+}
 .sidebar-close .sidebar ul {
   position: absolute;
   left: -290px;
@@ -111,45 +159,66 @@ form select {
 }
 .sidebar li {
   list-style: none;
-  padding-left: 20px;
+  padding-left: 10px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sidebar li:has(a.active):not(:has(li)) {
+  background: var(--sidebar-active-file-bg);
 }
 .sidebar a {
-  color: #666;
+  color: var(--sidebar-file);
   text-decoration: none;
 }
 .sidebar a.active {
-  font-weight: bold;
-  color: #333;
-  background: rgba(104, 117, 154, .2);
+  color: var(--sidebar-active-file-fg);
   display: block;
 }
-.sidebar li:hover {
-  background: rgba(104, 117, 154, .3);
+.sidebar a[data-status="new"]::after {
+  content: " ●";
+  color: #e06c00;
+}
+.sidebar a[data-status="modified"]::after {
+  content: " ◆";
+  color: #0070c0;
+}
+.sidebar a[data-status="published"]::after {
+  content: " ✓";
+  color: #888;
+}
+.sidebar a[data-status="new"],
+.sidebar a[data-status="modified"] {
+  color: var(--sidebar-modified-fg);
 }
+.sidebar li:not(:has(li)):hover,
+.sidebar li.dir-node summary:hover {
+  background: var(--sidebar-hover-bg);
+}
+
 .sidebar details > summary {
   cursor: pointer;
   padding: 2px 0;
-  color: #444;
-  font-size: 0.9em;
+  color: var(--sidebar-dir);
   list-style: disclosure-closed;
 }
+.sidebar li.dir-node details:not([open]):has(a[data-status="new"]) summary,
+.sidebar li.dir-node details:not([open]):has(a[data-status="modified"]) summary {
+  color: var(--sidebar-modified-fg);
+}
 .sidebar details[open] > summary {
   list-style: disclosure-open;
 }
-.sidebar details > ul {
-  padding-left: 8px;
-}
 .sidebar-toggle {
   cursor: pointer;
   width: 20px;
   height: 100%;
   position: absolute;
-  right: 0;
+  left: 0;
 }
 .sidebar-close .sidebar-toggle {
   position: fixed;
   left: 0;
-  background: rgb(192, 198, 217);
+  background: var(--sidebar-bg);
 }
 .sidebar-toggle:hover:after {
   position: absolute;

package/packages/editor/helper/sidebarTree.js

@@ -1,6 +1,11 @@
 import { buildTree, renderTreeHtml } from '../js/tree.js'
 
-export function renderSidebarTree(files) {
+/**
+ * @param {Array<{name: string, __filetype: string, __is_auto_category: boolean}>} files
+ * @param {Object.<string, 'new'|'modified'|'published'|'unknown'>} [statusMap]
+ * @returns {string}
+ */
+export function renderSidebarTree(files, statusMap = {}) {
   const tree = buildTree(files.filter(f => !f.__is_auto_category))
-  return renderTreeHtml(tree)
+  return renderTreeHtml(tree, '', statusMap)
 }

package/packages/editor/js/autoPreviewInitializer.js

@@ -0,0 +1,11 @@
+/**
+ * @vocab プレビュー自動更新器
+ * @test tests/editor/auto-preview.test.js
+ */
+import { createDebounce } from './debouncer.js'
+
+export function initAutoPreview(textarea, onUpdate, delay = 500) {
+  const debouncedUpdate = createDebounce(onUpdate, delay)
+  textarea.addEventListener('input', debouncedUpdate)
+  return debouncedUpdate
+}

package/packages/editor/js/autoSaveInitializer.js

@@ -0,0 +1,15 @@
+import { createDebounce } from './debouncer.js'
+
+/**
+ * @vocab 自動保存初期化器
+ * @test tests/editor/editor-ui-cleanup.test.js
+ * @param {EventTarget} textarea
+ * @param {() => void} onSave
+ * @param {number} delay
+ * @returns {import('./debouncer.js').Debounce}
+ */
+export function initAutoSave(textarea, onSave, delay = 500) {
+  const debouncedSave = createDebounce(onSave, delay)
+  textarea.addEventListener('input', debouncedSave)
+  return debouncedSave
+}

package/packages/editor/js/debouncer.js

@@ -0,0 +1,21 @@
+/**
+ * @vocab デバウンサー
+ * @test tests/editor/auto-preview.test.js
+ */
+export function createDebounce(fn, delay) {
+  let timer = null
+  function debounced(...args) {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => {
+      timer = null
+      fn(...args)
+    }, delay)
+  }
+  debounced.cancel = () => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+  return debounced
+}