laoyang/FamilyBook
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects Releases Wiki Activity

v61：笔记补齐成熟软件的块（Markdown 引擎加表格与任务清单，命令表扩全）

Browse Source 
用户反馈：「笔记应该增加更多的块：段落、清单、图片、代码……去查成熟笔记
软件都分哪些块，我们都应该支持。」

对照 Notion / flomo / 思源 / Logseq 的块清单逐项核对（块类型仍只有
段落/图片两种——v29 用户拍板"清单并入 Markdown"），补齐的是
**Markdown 引擎与编辑器到 GFM 关键子集**：

app/Markdown.php
- GFM 表格：表头+分隔行两行联合识别（正文里有竖线不会误判成表格）；
  `:---`/`---:`/`:-:` 左右中对齐；列数向表头看齐（多丢少补，格子不错位）；
  单元格走 inline()（先 htmlspecialchars，`<script>` 只会被画成字面文本）；
  段落收集遇到"紧跟正文的表格"会断开（GFM 不强制空行）
- GFM 任务清单：`- [ ]`/`- [x]` 渲染成**只读**勾选框（笔记不是任务系统，
  能点却不保存是假交互；要勾就改源码里的 x）
- 摘要清洗：表格分隔行/竖线/任务方括号不进列表卡片

assets/js/note_editor.js
- 命令表补齐：H1/H2/H3、有序列表、待办清单、删除线、行内代码、表格模板、
  分割线（工具条与斜线菜单仍是同一份表）
- 🔴 修真 no-op：v29 的"逐行套"写着逐行实际原样返回，选中三行点列表只给
  第一行挂前缀；现在行首记号型命令逐行套（空行跳过）
- 表格模板光标落在第一行数据的第一格，插完可直接打字

templates/notes/form.php：工具条 8→14 键（高频）；全部命令斜线 `/` 可调
assets/css/app.css：.md-table / .md-task 样式（跟主题变量，不写死色）

刻意不做：代码语法高亮（引库=几 MB，用户当年已拍板轻量）、折叠块
（与"逐段编辑"打架，flomo 也没有）、页内子页/数据库（家书没有那个形态）。

验证：_fb_v61_ui.py 真机 30/0（含 XSS 夹具、紧跟正文断段、实时预览同源、
逐段编辑接口、v28 老语法零回退、历史 list 块不丢）；
_b61_falsify.py 8 处注入 8/8 全红在预期断言；回归 b29 38/0、v55 30/0、v60 28/0。
This commit is contained in:
laoyang
2026-10-18 11:22:34 +08:00
parent 54ab9f825b
commit 4c63e42091
4 changed files with 189 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Markdown.php
+115 -3
View File
@@ -13,6 +13,16 @@
* 引用 / 链接 / 分割线），不是完整 CommonMark —— 有界的东西自己写**更可靠**
* （不会在某次依赖升级后行为漂移）。
*
* 🔴 v61（用户 2026-10-18 第 2 条「笔记要支持成熟软件的那些块」）：
* 按 Notion / flomo / Obsidian 的块清单逐项核对后，**只补 Markdown 原生就能表达的**：
* · GFM 表格（| 列 | 列 | + 分隔行，支持 :-: 对齐）
* · GFM 任务清单（- [ ] / - [x]，勾选框渲染成**只读** checkbox）
* （行内代码 / 围栏代码 / 引用 / 分割线 / 多级列表 / 标题 / 删除线 / 链接 v28 起就有）
* 代码块语言标注仍然只作 class 记号（引高亮库 = 又一坨几百 KB，与"轻量"冲突，
* 用户当时已拍板；这里不偷偷改道）。
* "折叠块(toggle)"刻意不做：阅读页有逐段编辑、块列表可上移下移，折叠会把
* 内容藏进用户找不到地方改的界面里；flomo 也没有它。要做要整个交互重新设计。
*
* 🔴 安全：**不允许任何原始 HTML 通过**。所有输入先 `htmlspecialchars`，
* 再按我们自己的语法加标记。这样 `<script>` 只会被画成一行字，
* 而不是被执行 —— 富文本编辑器最常见的 XSS 来源就是"允许内嵌 HTML"。
@@ -77,6 +87,19 @@ final class Markdown
continue;
}
// ---- 表格（GFM：表头行 + `---` 分隔行 + 数据行）----------------
// 🔴 v61（用户 2026-10-18：笔记要支持成熟软件的块）。
// 识别条件**必须两行一起看**：本行像 `|a|b|` 且**下一行是分隔行**
// （只含 - : | 空格且至少一个 -）。只看本行会把"正文里恰好有竖线
// 的一行"当表格（比如「3 | 2 | 1」），假表格比没表格更糟。
if (str_contains($line, '|') && $i + 1 < $n
&& preg_match('/^\s*\|?[\s:|-]+\|[\s:|-]*$/', $lines[$i + 1])
&& str_contains($lines[$i + 1], '-')) {
[$html, $i] = self::table($lines, $i, $n);
$out[] = $html;
continue;
}
// ---- 引用 > （支持多层，用前缀数决定层级）----------------------
if (preg_match('/^\s*>\s?(.*)$/', $line)) {
$buf = [];
@@ -112,7 +135,12 @@ final class Markdown
$buf = [$line];
$i++;
while ($i < $n && trim($lines[$i]) !== ''
&& !preg_match('/^\s*(#{1,6}\s|>|```|~~~|[-*+]\s|\d+[.)]\s)/', $lines[$i])) {
&& !preg_match('/^\s*(#{1,6}\s|>|```|~~~|[-*+]\s|\d+[.)]\s)/', $lines[$i])
// 🔴 v61：正文里出现表格也要**断开段落**，否则表格头会被吸进
// 上一段（GFM 允许表格紧跟正文，不强制空行）。
&& !(str_contains($lines[$i], '|') && $i + 1 < $n
&& preg_match('/^\s*\|?[\s:|-]+\|[\s:|-]*$/', $lines[$i + 1])
&& str_contains($lines[$i + 1], '-'))) {
$buf[] = $lines[$i];
$i++;
}
@@ -176,7 +204,19 @@ final class Markdown
$html .= '</li>';
}
$html .= '<li class="md-li">' . self::inline(trim($content));
// 🔴 v61：任务清单（GFM `- [ ]` / `- [x]`）。
// checkbox 渲染成**只读**（disabled）—— 笔记不是任务系统，
// "点一下勾上却没保存"是最糟糕的体验；要勾就去改源码里的 [x]。
$body = trim($content);
if (!$ordered && preg_match('/^\[( |x|X)\]\s+(.*)$/s', $body, $tm)) {
$on = ($tm[1] !== ' ');
$html .= '<li class="md-li md-task">'
. '<input type="checkbox" class="md-check" disabled'
. ($on ? ' checked' : '') . '>'
. '<span class="md-task-text">' . self::inline($tm[2]) . '</span>';
} else {
$html .= '<li class="md-li">' . self::inline($body);
}
$i++;
}
// 收尾：把还开着的层全部关掉（每层一个 </li> + </ul>）
@@ -187,6 +227,68 @@ final class Markdown
return [$html, $i];
}
/**
* 解析一段 GFM 表格：本行是表头、下一行是 `---` 分隔行（已在调用处确认）。
*
* 🔴 v61。要点：
* · **先 htmlspecialchars**（走 `inline()`）再把内容塞进单元格 —— 单元格里的
* `<script>` 只会当字面文本，绝不会被当 HTML 执行（这是全站 Markdown 的底线）。
* · 对齐取自分隔行：`:---` 左、`---:` 右、`:---:` 居中，翻成 inline style。
* · 每行的列数**向表头看齐**（多出来的丢掉、少了补空）—— 否则某行漏一列，
* 整张表的格子会错位（用户看到的"表格烂了"多半就是这么来的）。
* · 分隔行之前那行表头单独渲染成 `<th>`；数据行渲染成 `<td>`。
*
* @return array{0:string,1:int} [html, 新行号]
*/
private static function table(array $lines, int $i, int $n): array
{
$split = static function (string $row): array {
// 去掉首尾竖线，再按 | 切；每格去首尾空格（内容里的 ** 等交给 inline）
$row = trim($row);
$row = preg_replace('/^\|/', '', $row) ?? $row;
$row = preg_replace('/\|$/', '', $row) ?? $row;
return array_map('trim', explode('|', $row));
};
$header = $split($lines[$i]);
$aligns = $split($lines[$i + 1]);
$cols = count($header);
// 对齐数组补齐到列数，缺的按左对齐
for ($k = 0; $k < $cols; $k++) {
if (!isset($aligns[$k])) { $aligns[$k] = '---'; }
}
$styleOf = static function (string $sep): string {
$l = str_starts_with(trim($sep), ':');
$r = str_ends_with(trim($sep), ':');
if ($l && $r) { return ' style="text-align:center"'; }
if ($r) { return ' style="text-align:right"'; }
if ($l) { return ' style="text-align:left"'; }
return '';
};
$html = '<table class="md-table"><thead><tr>';
for ($c = 0; $c < $cols; $c++) {
$html .= '<th class="md-th"' . $styleOf($aligns[$c]) . '>'
. self::inline((string)$header[$c]) . '</th>';
}
$html .= '</tr></thead><tbody>';
$i += 2; // 跳过表头与分隔行
while ($i < $n && str_contains($lines[$i], '|') && trim($lines[$i]) !== '') {
$cells = $split($lines[$i]);
$html .= '<tr class="md-tr">';
for ($c = 0; $c < $cols; $c++) {
$val = (string)($cells[$c] ?? '');
$html .= '<td class="md-td"' . $styleOf($aligns[$c]) . '>'
. self::inline($val) . '</td>';
}
$html .= '</tr>';
$i++;
}
$html .= '</tbody></table>';
return [$html, $i];
}
/**
* 行内语法：`code` → 粗体 → 斜体 → 链接 → 删除线。
*
@@ -263,7 +365,17 @@ final class Markdown
$s = preg_replace('/^\s*(```+|~~~+).*$/m', '', $s) ?? $s;
$s = preg_replace('/^\s*#{1,6}\s*/m', '', $s) ?? $s;
$s = preg_replace('/^\s*>\s?/m', '', $s) ?? $s;
$s = preg_replace('/^\s*(?:[-*+]|\d+[.)])\s+/m', '', $s) ?? $s;
// 🔴 v61：表格与任务清单的记号也要去，且**顺序要紧**：
// ① 先整行丢掉表格的"分隔行"（只含 : - | 空格的那种）—— 摘要里出现
// `--- ---` 是纯粹的噪音；
// ② 再剥任务清单的方括号 —— **必须在剥 `- ` 之前**：否则先把项目符
// 吃掉、剩下 `[ ]` 就匹配不上任务模式了；
// ③ 最后才是普通列表符与表格竖线（竖线换空格，格与格之间还能读）。
$s = preg_replace('/^\s*\|?[\s:|-]+\|?\s*$/m', '', $s) ?? $s; // ①（含 - ，只吞分隔行）
$s = preg_replace('/^(\s*)(?:[-*+]|\d+[.)])\s+\[[ xX]\]\s+/m', '$1', $s) ?? $s; // ②
$s = preg_replace('/^\s*(?:[-*+]|\d+[.)])\s+/m', '', $s) ?? $s; // ③
$s = preg_replace('/^\||\|$/m', '', $s) ?? $s;
$s = str_replace('|', ' ', $s);
// 去掉行内标记
$s = preg_replace('/\*\*(.+?)\*\*/s', '$1', $s) ?? $s;
$s = preg_replace('/\*(.+?)\*/s', '$1', $s) ?? $s;