mdv-live 0.5.17 → 0.5.19

package/CHANGELOG.md

@@ -5,6 +5,71 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.19] - 2026-05-16
+
+### Fixed — Marp `![bg]` background images
+
+Marp の `![bg](画像)` 背景画像構文を含むスライドが mdv で真っ白になっていた
+バグを修正。NotebookLM 製の図解 13 枚を `![bg]` で全面配置したプレゼンが mdv
+で全スライド空白になり発覚（157_イディアコーポレーション案件）。
+
+- 原因: marp-core は `![bg]` を `<img>` ではなく
+  `<figure style="background-image:url(&quot;パス&quot;)">` として出力する。
+  `rewriteMediaPaths` は `<img>/<video>/<audio>/<source>` の `src` 属性しか
+  `/raw/` に書き換えず、CSS の `background-image:url(...)` を素通ししていた。
+  結果、相対パスが SPA の現在 URL 基準で誤解決され 404 → CSS 背景画像のため
+  コンソールエラーも出ず真っ白になっていた
+- `rewriteMediaPaths` に `background-image:url(...)` 書き換えルールを追加。
+  marp-core が HTML エンコードするクォート（`&quot;`）に対応
+- quoted URL は **対応する閉じクォートまで** を URL として読む。最初の `)` で
+  切らないため、`cover (1).png` のような括弧入りファイル名
+  （Marp 出力 `url(&quot;cover%20(1).png&quot;)`）も壊れない
+- 絶対 URL・data URI・空 URL は書き換えない
+- 既知の制約: 1 つの `background-image:` 宣言に複数 `url()` がある場合は先頭
+  のみ書き換わる。`![bg]` は 1 枚ごとに別 `<figure>` になるため影響なし。
+  カンマ区切りの `backgroundImage:` ディレクティブのみのエッジケース
+
+### Verified
+
+- 278 テスト 全 PASS（既存 272 + 新規 6: `![bg]` 相対/サブディレクトリ/括弧/
+  エンコード空白/空/絶対 URL）
+- Playwright dogfood（`docs/dogfood_20260516/`）: 全面 bg / bg fit / split bg /
+  インライン画像 / 絶対 URL bg / サブディレクトリ解決の 6 ケースを実機目視、
+  コンソールエラー 0
+- Codex review 3 round（codex-loop）で収束。round 1 [P2] 括弧切れ修正、
+  round 2 [P3] 空 URL ガード、round 3 [P3] 複数 url 制約を文書化
+
+## [0.5.18] - 2026-05-12
+
+### Fixed — Offline operation
+
+ビューワがネットワーク接続なしでも完全に動くようになった。これまで
+`index.html` が 5 つの CDN (highlight.js / Mermaid / html2pdf.js / Tailwind /
+hljs テーマ CSS) を直接読み込んでいたため、Wi-Fi 切断時はシンタックスハイ
+ライト・図表・PDF 出力・全 UI スタイルが死ぬ状態だった。
+
+- `src/static/vendor/` に各ライブラリのオフライン版を同梱
+- `scripts/sync-vendor.js` でメンテナが version bump 時に node_modules /
+  Tailwind Play CDN から再生成 (`node scripts/sync-vendor.js`)
+- Tailwind は v3.4.17 で pin (v4 系は `tailwind.config` 構文が変わるため)
+- `index.html` と `app.js` (`HLJS_THEMES`) の CDN URL を `/static/vendor/...`
+  に置換
+- 各ライブラリのライセンス本文を `vendor/licenses/` に同梱、
+  html2pdf bundle が名指しする `html2pdf.bundle.min.js.LICENSE.txt` も sidecar 配置
+- `@highlightjs/cdn-assets` / `mermaid` / `html2pdf.js` は **devDependencies**
+  (vendor 元、runtime では使わないので global install 時にダウンロードされない)
+- `tests/test-offline-assets.js` で「served HTML/JS に外部 CDN URL がない」
+  「必須 vendor ファイル / license 一式が揃う」「vendor-only パッケージが
+  dependencies に逆流していない」を 14 件の assert で常時保証
+
+### Verified
+
+- 272 テスト 全 PASS (既存 258 + 新規 14)
+- Playwright dogfood (`docs/dogfood-offline-2026-05-11/`): 非 localhost への
+  リクエスト 0 件、code highlight / mermaid / Tailwind / edit autosave /
+  theme 切替 / Marp split layout / inline notes すべて回帰なし
+- Codex review 2 round で「No actionable regressions」収束
+
 ## [0.5.17] - 2026-05-10
 
 ### Added — Edit-mode Autosave

package/README.md

@@ -11,11 +11,13 @@
 - 📄 Markdownをリアルタイムレンダリング
 - 🎬 **Marp完全対応**（公式テーマ・ディレクティブ・数式）
 - 🎤 **Presenter View**（スピーカーノート別ウィンドウ・自動保存・タイマー） — `P` キーで起動
+- 🪟 **PowerPoint 風 Split Layout** — 上にスライド / 下にスピーカーノート、間にドラッグハンドルでサイズ変更（0.5.16+）
+- 📝 **Inline Speaker Notes Editor** — メイン画面で直接ノート編集 → 800ms デバウンスで自動保存（0.5.16+）
 - 🔄 ファイル更新時に自動リロード（WebSocket）
 - 🎨 シンタックスハイライト（highlight.js）
 - 📊 Mermaid図のレンダリング
 - 🌙 ダーク/ライトテーマ切り替え
-- ✏️ インラインエディタ（Cmd+E）
+- ✏️ **インラインエディタ + 自動保存** — `Cmd+E` で編集モード、入力 → 1500ms で自動保存（0.5.17+）
 - ✅ タスクリスト（チェックボックス）対応
 - 📥 PDF出力（Cmd+P / CLI convert）
 - 🎛️ PDF用CSS・PDF options指定（CLI / Web UI）
@@ -216,6 +218,23 @@ paginate: true
 - **数式**: KaTeX対応（インライン `$...$`、ブロック `$$...$$`）
 - **スピーカーノート**: HTML コメント (`<!-- ... -->`) で記述
 
+## Inline Speaker Notes (PowerPoint-style Split Layout)
+
+Marp ファイルを開くとメイン画面が **上下 2 ペイン** に分かれます。上がスライド、下がスピーカーノートエディタ、間に **ドラッグ可能な仕切り**。Presenter View を別ウィンドウで開かなくても、その場でノート編集できます。
+
+### 使い方
+
+- **仕切りをドラッグ**: スライド / ノートの比率を変更
+- **仕切りをダブルクリック**: 240px (デフォルト) にリセット
+- **完全に閉じる**: 仕切りを画面下まで → ノート 0px (リロードしても復元)
+- **ノートをクリックして入力**: 800ms デバウンスで自動保存。マークダウンソースの `<!-- ... -->` コメントが書き換わります
+- **保存ステータス**: 編集中… / 保存中… / 保存済み / 失敗 (パネル右上に表示)
+- **スライド切替で連動**: ナビ ←/→ または `Space` で active スライドが切り替わるとノートも対応スライドのものに
+
+### Presenter View との関係
+
+別ウィンドウの Presenter View (`P` キー) と **同じノートを共有**します。両方同時に開いて編集することも可能ですが、ETag 楽観ロックで **STALE 検出** されます (片方が STALE になったら後勝ちで上書きせず、ローカルストレージに退避)。
+
 ## Presenter View
 
 Marp ファイルを開いた状態で **`P` キー** を押すと、別ウィンドウで登壇者ビューが起動します。
@@ -259,13 +278,25 @@ Marp ファイルを開いた状態で **`P` キー** を押すと、別ウィ
 | `Space / PageDown` | 次のスライド |
 | `Home / End` | 最初 / 最後のスライド |
 
+## Editor (Edit モード)
+
+`Cmd+E` で **編集モード** に入ると textarea が開きます。**入力 → 1500ms で自動保存**するので、`Cmd+S` を押し忘れて変更が消える心配はありません。
+
+### 自動保存の挙動
+
+- **入力 → 1500ms debounce → POST `/api/file`** → ステータスバー: `Modified → Saving... → Saved! → Ready`
+- **`Cmd+S`** は引き続き使えます。押すと **debounce を待たず即時 flush**
+- **View 切替 / タブ切替 / 別ファイル open** 時に **flush + await** — 保存完了するまで遷移しません
+- **保存失敗時** (ネットワーク断など) はエディタを閉じず Edit モードに留まります。`Error: ...` が表示されたらリトライしてください
+- **Discard-on-close** (✕ で未保存タブを閉じる): 確認ダイアログが出ます。サーバーが既にリクエストを受信した直後の race window では、その時点までの内容がファイルに残る可能性があります（ダイアログに注記あり）
+
 ## Keyboard Shortcuts
 
 | ショートカット | 機能 |
 |---------------|------|
 | Cmd/Ctrl + B | サイドバー表示切替 |
-| Cmd/Ctrl + E | 編集モード切替 |
-| Cmd/Ctrl + S | 保存（編集モード時） |
+| Cmd/Ctrl + E | 編集モード切替 (open: textarea / close: flush + 再 fetch + render) |
+| Cmd/Ctrl + S | **保存を即時 flush** (編集モード時。autosave debounce 中なら待たずに POST) |
 | Cmd/Ctrl + P | PDF出力 |
 | Cmd/Ctrl + W | タブを閉じる |
 | ← / → | スライド移動（Marp時） |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.5.17",
+  "version": "0.5.19",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {
@@ -59,5 +59,10 @@
   "optionalDependencies": {
     "@marp-team/marp-cli": "^4.0.3",
     "md-to-pdf": "^5.2.5"
+  },
+  "devDependencies": {
+    "@highlightjs/cdn-assets": "^11.11.1",
+    "html2pdf.js": "^0.14.0",
+    "mermaid": "^11.15.0"
   }
 }

package/scripts/sync-vendor.js

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+// Populates src/static/vendor/ with offline copies of the libraries that
+// index.html used to load from CDN. Run manually when bumping versions.
+//
+//   node scripts/sync-vendor.js
+//
+// Source map files are skipped to keep the npm tarball small.
+
+import { cp, mkdir, rm, writeFile } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import https from 'node:https';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(__dirname, '..');
+const vendorDir = resolve(repoRoot, 'src/static/vendor');
+
+const TAILWIND_VERSION = '3.4.17';
+const TAILWIND_URL = `https://cdn.tailwindcss.com/${TAILWIND_VERSION}`;
+const TAILWIND_LICENSE_URL = `https://raw.githubusercontent.com/tailwindlabs/tailwindcss/v${TAILWIND_VERSION}/LICENSE`;
+
+async function copyFromNodeModules(relSource, relDest) {
+  const src = resolve(repoRoot, 'node_modules', relSource);
+  const dest = resolve(vendorDir, relDest);
+  if (!existsSync(src)) {
+    throw new Error(`Missing source file: ${src} (did you run npm install?)`);
+  }
+  await mkdir(dirname(dest), { recursive: true });
+  await cp(src, dest);
+  console.log(`copied  ${relSource} -> vendor/${relDest}`);
+}
+
+function downloadToString(url) {
+  return new Promise((resolveDownload, rejectDownload) => {
+    https.get(url, { headers: { 'User-Agent': 'mdv-live sync-vendor' } }, (res) => {
+      if (res.statusCode && res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
+        res.resume();
+        resolveDownload(downloadToString(res.headers.location));
+        return;
+      }
+      if (res.statusCode !== 200) {
+        rejectDownload(new Error(`GET ${url} -> ${res.statusCode}`));
+        res.resume();
+        return;
+      }
+      const chunks = [];
+      res.on('data', (c) => chunks.push(c));
+      res.on('end', () => resolveDownload(Buffer.concat(chunks)));
+      res.on('error', rejectDownload);
+    }).on('error', rejectDownload);
+  });
+}
+
+async function downloadTailwind() {
+  const dest = resolve(vendorDir, 'tailwind.min.js');
+  const body = await downloadToString(TAILWIND_URL);
+  const header = `/*! Tailwind CSS Play CDN ${TAILWIND_VERSION} - downloaded from ${TAILWIND_URL} */\n`;
+  await mkdir(dirname(dest), { recursive: true });
+  await writeFile(dest, header + body.toString('utf8'));
+  console.log(`downloaded tailwind ${TAILWIND_VERSION} -> vendor/tailwind.min.js (${body.length} bytes)`);
+}
+
+async function downloadTailwindLicense() {
+  const dest = resolve(vendorDir, 'licenses/tailwindcss.LICENSE');
+  const body = await downloadToString(TAILWIND_LICENSE_URL);
+  await mkdir(dirname(dest), { recursive: true });
+  await writeFile(dest, body);
+  console.log(`downloaded tailwind LICENSE -> vendor/licenses/tailwindcss.LICENSE (${body.length} bytes)`);
+}
+
+async function main() {
+  if (existsSync(vendorDir)) {
+    await rm(vendorDir, { recursive: true, force: true });
+  }
+  await mkdir(vendorDir, { recursive: true });
+
+  await copyFromNodeModules('@highlightjs/cdn-assets/highlight.min.js', 'highlight.min.js');
+  await copyFromNodeModules('@highlightjs/cdn-assets/styles/github.min.css', 'highlight/github.min.css');
+  await copyFromNodeModules('@highlightjs/cdn-assets/styles/github-dark.min.css', 'highlight/github-dark.min.css');
+  await copyFromNodeModules('mermaid/dist/mermaid.min.js', 'mermaid.min.js');
+  await copyFromNodeModules('html2pdf.js/dist/html2pdf.bundle.min.js', 'html2pdf.bundle.min.js');
+
+  // Third-party license notices. html2pdf.bundle.min.js has an inline pointer
+  // ("For license information please see html2pdf.bundle.min.js.LICENSE.txt")
+  // that would otherwise dangle once the bundle ships in src/static/vendor/.
+  await copyFromNodeModules(
+    'html2pdf.js/dist/html2pdf.bundle.min.js.LICENSE.txt',
+    'html2pdf.bundle.min.js.LICENSE.txt',
+  );
+  await copyFromNodeModules('html2pdf.js/LICENSE', 'licenses/html2pdf.js.LICENSE');
+  await copyFromNodeModules('mermaid/LICENSE', 'licenses/mermaid.LICENSE');
+  await copyFromNodeModules('@highlightjs/cdn-assets/LICENSE', 'licenses/highlight.js.LICENSE');
+
+  await downloadTailwind();
+  await downloadTailwindLicense();
+
+  const readme = `# vendor/
+
+This directory holds offline copies of third-party browser libraries that
+index.html used to load from CDN. Regenerate it with:
+
+    node scripts/sync-vendor.js
+
+Sources and licenses (full text in vendor/licenses/):
+- highlight.min.js / highlight/*.css — @highlightjs/cdn-assets (BSD-3-Clause)
+- mermaid.min.js — mermaid (MIT)
+- html2pdf.bundle.min.js — html2pdf.js (MIT); see also
+  html2pdf.bundle.min.js.LICENSE.txt for embedded notices
+- tailwind.min.js — Tailwind CSS Play CDN ${TAILWIND_VERSION} (MIT)
+`;
+  await writeFile(resolve(vendorDir, 'README.md'), readme);
+  console.log('wrote   vendor/README.md');
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/src/rendering/index.js

@@ -54,7 +54,7 @@ function renderText(content) {
  */
 function rewriteMediaPaths(html, relativeDir) {
   // Match src="..." that are not absolute URLs or data URIs
-  return html.replace(
+  let out = html.replace(
     /(<(?:img|video|audio|source)\s[^>]*?\bsrc=")([^"]+)(")/gi,
     (match, before, src, after) => {
       if (/^(https?:\/\/|data:|\/raw\/|\/)/.test(src)) return match;
@@ -62,6 +62,34 @@ function rewriteMediaPaths(html, relativeDir) {
       return `${before}/raw/${resolved}${after}`;
     }
   );
+
+  // Marp `![bg](...)` renders as <figure style="background-image:url(...)">,
+  // never as an <img>, so the rule above never sees it. marp-core HTML-encodes
+  // the surrounding quotes (&quot;). For the quoted form the URL runs to the
+  // matching closing quote — not the first `)` — so filenames containing
+  // parentheses (e.g. "cover (1).png", which Marp emits as
+  // url(&quot;cover%20(1).png&quot;)) survive intact.
+  //
+  // Known limitation: only the first url() of a `background-image:` declaration
+  // is rewritten. Every `![bg]` produces its own <figure> with a single-url
+  // declaration, so this never affects `![bg]`; it only leaves later urls of a
+  // comma-separated `backgroundImage:` directive (a rare hand-authored case)
+  // SPA-relative. Bounding the declaration is unreliable because the encoded
+  // quote `&quot;` itself contains the `;` that would delimit it.
+  out = out.replace(
+    /background-image:\s*url\(\s*(?:(&quot;|"|')([\s\S]*?)\1|([^)\s'"]+))\s*\)/gi,
+    (match, quote, quotedSrc, bareSrc) => {
+      const src = quote ? quotedSrc : bareSrc;
+      // Empty quoted URL (url(&quot;&quot;)) — leave it alone, as the old
+      // pattern did; rewriting it to /raw/ would invent a bogus request.
+      if (!src || /^(https?:\/\/|data:|\/raw\/|\/)/.test(src)) return match;
+      const resolved = relativeDir ? `${relativeDir}/${src}` : src;
+      const q = quote || '';
+      return `background-image:url(${q}/raw/${resolved}${q})`;
+    }
+  );
+
+  return out;
 }
 
 /**

package/src/static/app.js

@@ -25,8 +25,8 @@
     const SLIDE_ROW_MIN_PX = 80;
 
     const HLJS_THEMES = {
-        light: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css',
-        dark: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css'
+        light: '/static/vendor/highlight/github.min.css',
+        dark: '/static/vendor/highlight/github-dark.min.css'
     };
 
     const MERMAID_THEMES = {

package/src/static/index.html

@@ -12,7 +12,7 @@
     <link rel="apple-touch-icon" sizes="128x128" href="/static/images/icon-128.png">
 
     <!-- Stylesheets -->
-    <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+    <link id="hljs-theme" rel="stylesheet" href="/static/vendor/highlight/github-dark.min.css">
     <link rel="stylesheet" href="/static/styles.css">
 
     <!-- Theme initialization (FOUC prevention) -->
@@ -24,13 +24,13 @@
         })();
     </script>
 
-    <!-- External libraries -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+    <!-- External libraries (offline, served from src/static/vendor/) -->
+    <script src="/static/vendor/highlight.min.js"></script>
+    <script src="/static/vendor/mermaid.min.js"></script>
+    <script src="/static/vendor/html2pdf.bundle.min.js"></script>
 
     <!-- Tailwind CSS (for Marp slides) -->
-    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="/static/vendor/tailwind.min.js"></script>
     <script>
         tailwind.config = {
             corePlugins: { preflight: false, container: false },

package/src/static/vendor/README.md

@@ -0,0 +1,13 @@
+# vendor/
+
+This directory holds offline copies of third-party browser libraries that
+index.html used to load from CDN. Regenerate it with:
+
+    node scripts/sync-vendor.js
+
+Sources and licenses (full text in vendor/licenses/):
+- highlight.min.js / highlight/*.css — @highlightjs/cdn-assets (BSD-3-Clause)
+- mermaid.min.js — mermaid (MIT)
+- html2pdf.bundle.min.js — html2pdf.js (MIT); see also
+  html2pdf.bundle.min.js.LICENSE.txt for embedded notices
+- tailwind.min.js — Tailwind CSS Play CDN 3.4.17 (MIT)

package/src/static/vendor/highlight/github-dark.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}

package/src/static/vendor/highlight/github.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}