laoyang
4c63e42091
用户反馈：「笔记应该增加更多的块：段落、清单、图片、代码……去查成熟笔记
软件都分哪些块，我们都应该支持。」
对照 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。
676 lines
31 KiB
JavaScript
676 lines
31 KiB
JavaScript
/**
|
||
* 个人笔记 · 分块编辑器（v27 起；v29 用户 2026-10-08 第 7/8 条大改）。
|
||
*
|
||
* 只做这几件事（刻意的轻量，见 templates/notes/form.php 头部的取舍说明）：
|
||
* ① 把「块」渲染成一列可编辑行（**段落 textarea / 图片卡** —— v29 起没有清单块了）
|
||
* ② 增（+段落 / +图片）、删、上移、下移
|
||
* ③ 点「+图片」→ 触发隐藏 file 框 → 上传 → 把返回的 key 填进该图片块
|
||
* ④ 提交前把当前块**序列化成 JSON** 写进隐藏域 `blocks`
|
||
* ⑤ 🔴 v29 第 7 条：**工具条**（点一下插到光标处）+ **斜线命令**（行首打 `/`）
|
||
* ⑥ 🔴 v29 第 8 条：图片可以**调大小**（宽度 25/50/75/100%）
|
||
*
|
||
* ⚠️ 为什么状态放在 DOM 上而不是一个 JS 数组里：
|
||
* 用户可能在某个 textarea 里打字打到一半就点「上移」——若块数据存在数组里、
|
||
* 每次操作都按数组重新渲染，那次输入就会丢。改成"DOM 即真相"：
|
||
* textarea 的值**就在 DOM 里**，移动只是把一个节点挪个位置，输入一字不丢。
|
||
* 只有提交时才从 DOM 读一遍（serialize()）。
|
||
*
|
||
* ⚠️ 用**事件委托**（在容器上挂一个点击处理）而不是给每块挂：块会被增删，
|
||
* 逐个挂容易漏掉新加的；委托则天然覆盖后来加的块。
|
||
*
|
||
* 🔴 v29 第 8 条：**清单块去掉**（用户原话「清单功能不要了吧，markdown 里面
|
||
* 包含这个功能」）。所以 `+清单` 按钮与 list 分支都没了 ——
|
||
* 想列清单就在段落里写 `- 项`（Markdown），渲染出来一样是列表。
|
||
*/
|
||
(function () {
|
||
'use strict';
|
||
|
||
var form = document.getElementById('noteForm');
|
||
var list = document.getElementById('noteBlockList');
|
||
var sink = document.getElementById('noteBlocks');
|
||
var seed = document.getElementById('noteSeed');
|
||
var fileIn = document.getElementById('noteImgInput');
|
||
if (!form || !list || !sink) { return; }
|
||
|
||
// 上传目标（哪个图片块在等这次上传的结果）
|
||
var pendingBlock = null;
|
||
|
||
// media 出口的基址由模板注入（页面上的 `data-media-base`）——
|
||
// 不写死 'media.php?k='：将来 media 端点换名字/加前缀，这里不用跟着改。
|
||
var mediaBase = (form.getAttribute('data-media-base')
|
||
|| document.body.getAttribute('data-media-base')
|
||
|| 'media.php?k=');
|
||
|
||
// ---------------------------------------------------------------------
|
||
// ---------------------------------------------------------------------
|
||
// 🔴 v29 第 7 条：Markdown 命令表（**工具条与斜线菜单共用这一份**）
|
||
// ---------------------------------------------------------------------
|
||
//
|
||
// ⚠️ 为什么只有一份：如果工具条和斜线各写一套，迟早出现"按钮能插、
|
||
// 斜线插不了"或者"两处语法不一样"（这正是用户抱怨的"要记住所有命令"）。
|
||
// 每个命令：wrap = 用来包住选中文本（含 %s），或 insert = 无选中时插的模板。
|
||
// 🔴 v61（用户 2026-10-18）：按成熟笔记软件的块清单补齐 ——
|
||
// 标题一/二/三、有序列表、任务清单、表格、分割线。
|
||
// ⚠️ 这仍然是**往段落块里插 Markdown 记号**（不是新增块类型）：
|
||
// v29 用户拍板"清单并入 markdown，块只留 段落/图片"，服务端白名单不变。
|
||
// line:true = "行首记号"型命令 —— 选中多行时**逐行**套（选中三行点「列表」
|
||
// 应得到三个列表项；只套第一行是老实现的缺陷，这次一并修）。
|
||
var CMDS = {
|
||
b: { word: '粗体', keys: ['bold', 'b'], wrap: '**%s**', tip: '加粗' },
|
||
i: { word: '斜体', keys: ['italic', 'i'], wrap: '*%s*', tip: '斜体' },
|
||
s: { word: '删除线', keys: ['strike', 's'], wrap: '~~%s~~', tip: '删除线' },
|
||
h1: { word: '标题一', keys: ['h1', 'title'], wrap: '# %s', line: true, tip: '一级标题' },
|
||
h2: { word: '标题二', keys: ['h2', 'head'], wrap: '## %s', line: true, tip: '小标题' },
|
||
h3: { word: '标题三', keys: ['h3'], wrap: '### %s', line: true, tip: '三级标题' },
|
||
ul: { word: '无序列表', keys: ['ul', 'list', 'bullet'], wrap: '- %s', line: true, tip: '项目符号列表' },
|
||
ol: { word: '有序列表', keys: ['ol', 'number', 'num'], wrap: '1. %s', line: true, tip: '编号列表' },
|
||
todo: { word: '待办清单', keys: ['todo', 'task', 'check'], wrap: '- [ ] %s', line: true, tip: '任务清单（[x] 已完成）' },
|
||
quote: { word: '引用', keys: ['quote', 'q'], wrap: '> %s', line: true, tip: '引用' },
|
||
code: { word: '代码块', keys: ['code', 'codeblock'], wrap: '```\n%s\n```', tip: '围栏代码块' },
|
||
icode: { word: '行内代码', keys: ['inline', 'icode'], wrap: '`%s`', tip: '行内代码' },
|
||
table: { word: '表格', keys: ['table', 'tf'],
|
||
// %s = 光标落点（第一行数据的第一格），插完可以直接打字
|
||
insert: '| 列一 | 列二 | 列三 |\n| --- | --- | --- |\n| %s | | |\n', tip: '插入表格' },
|
||
hr: { word: '分割线', keys: ['hr', 'divider', 'split'], insert: '\n---\n', tip: '横向分割线' },
|
||
link: { word: '链接', keys: ['link', 'url'], wrap: '[%s](https://)', tip: '链接' },
|
||
img: { word: '图片', keys: ['img'], insert: '+ 图片（点左侧「+ 图片」按钮选文件）' }
|
||
};
|
||
|
||
/** 在 textarea 的**光标处**套上/插入一段 Markdown。 */
|
||
function applyCmd(ta, key) {
|
||
var c = CMDS[key];
|
||
if (!ta || !c) { return; }
|
||
var v = ta.value;
|
||
var s = ta.selectionStart || 0;
|
||
var e = ta.selectionEnd || 0;
|
||
var sel = v.slice(s, e);
|
||
var out;
|
||
|
||
if (c.insert) {
|
||
out = c.insert;
|
||
ta.value = v.slice(0, s) + out + v.slice(e);
|
||
// 🔴 v61：insert 里有 `%s` 的（表格），光标落在**第一个空格子**而不是整段末尾
|
||
var mark = out.indexOf('%s');
|
||
if (mark >= 0) {
|
||
ta.value = v.slice(0, s) + out.replace('%s', '') + v.slice(e);
|
||
ta.selectionStart = ta.selectionEnd = s + mark;
|
||
} else {
|
||
ta.selectionStart = ta.selectionEnd = s + out.length;
|
||
}
|
||
} else if (sel !== '' && c.line) {
|
||
// 🔴 v61：**行首记号型**命令 + 有选中 → **逐行**套（选中三行点「列表」
|
||
// 得到三个列表项）。v29 的老实现这里写着"逐行"、实际是个原样返回的
|
||
// no-op（`map(function (l) { return l; })`），所以选中三行只会给
|
||
// 第一行挂上前缀 —— 这次把它做成真的。
|
||
// ⚠️ 只跳过空行（空行挂 `- ` 会渲染出一个空列表项）。
|
||
out = sel.split('\n').map(function (l) {
|
||
return l.trim() === '' ? l : c.wrap.replace('%s', l);
|
||
}).join('\n');
|
||
ta.value = v.slice(0, s) + out + v.slice(e);
|
||
ta.selectionStart = s;
|
||
ta.selectionEnd = s + out.length;
|
||
} else if (sel !== '') {
|
||
// 行内型命令（粗斜体/行内码/链接）：整段包住；跨行也包（渲染层支持）
|
||
out = c.wrap.indexOf('%s') >= 0 ? c.wrap.replace('%s', sel) : sel + c.wrap;
|
||
ta.value = v.slice(0, s) + out + v.slice(e);
|
||
ta.selectionStart = s;
|
||
ta.selectionEnd = s + out.length;
|
||
} else {
|
||
// 没选中 → 插模板，光标落在 %s 处（用户接着打内容）
|
||
out = c.wrap;
|
||
var at = out.indexOf('%s');
|
||
ta.value = v.slice(0, s) + out + v.slice(e);
|
||
ta.selectionStart = ta.selectionEnd = s + (at >= 0 ? at : out.length);
|
||
}
|
||
ta.focus();
|
||
// 输入事件要**手动触发**：程序化改 value 浏览器不会发 input，
|
||
// 而预览与序列化都挂在那个事件上（不触发就会出现"插了但预览没变"）。
|
||
ta.dispatchEvent(new Event('input', { bubbles: true }));
|
||
}
|
||
|
||
// ---------------------------------------------------------------------
|
||
// 渲染一块
|
||
// ---------------------------------------------------------------------
|
||
function makeBlock(kind, content) {
|
||
var wrap = document.createElement('div');
|
||
wrap.className = 'note-block';
|
||
wrap.setAttribute('data-kind', kind);
|
||
|
||
var ops = document.createElement('div');
|
||
ops.className = 'note-block-ops';
|
||
ops.innerHTML =
|
||
'<button type="button" class="nb-btn" data-op="up" title="上移" aria-label="上移">↑</button>' +
|
||
'<button type="button" class="nb-btn" data-op="down" title="下移" aria-label="下移">↓</button>' +
|
||
'<button type="button" class="nb-btn nb-del" data-op="del" title="删除" aria-label="删除">✕</button>';
|
||
wrap.appendChild(ops);
|
||
|
||
var body = document.createElement('div');
|
||
body.className = 'note-block-body';
|
||
|
||
if (kind === 'image') {
|
||
// 图片块：content 是附件 key（可带 `|宽度`）。填 key 的同时把预览换出来。
|
||
var parts = String(content || '').split('|');
|
||
var key = parts[0] || '';
|
||
var w = parseInt(parts[1] || '0', 10) || 0;
|
||
var img = document.createElement('img');
|
||
img.className = 'note-block-img';
|
||
img.alt = '笔记图片';
|
||
img.src = key ? (mediaBase + encodeURIComponent(key)) : '';
|
||
if (!key) { img.classList.add('is-empty'); }
|
||
applyImgWidth(img, w);
|
||
|
||
var bar = document.createElement('div');
|
||
bar.className = 'note-img-bar';
|
||
var hint = document.createElement('button');
|
||
hint.type = 'button';
|
||
hint.className = 'note-img-pick';
|
||
hint.textContent = key ? '换一张' : '选图片';
|
||
hint.setAttribute('data-op', 'pick');
|
||
bar.appendChild(hint);
|
||
|
||
/* 🔴 v29 第 8 条：「图文混排时，需要可以调整大小。」
|
||
四个档位（25 / 50 / 75 / 100%），点一下立即生效。
|
||
⚠️ 用**百分比**而不是像素：同一张图在手机与桌面上要按容器宽等比缩，
|
||
写死 px 在窄屏会溢出去（本项目在名册上刚栽过一次溢出）。 */
|
||
var sizes = document.createElement('span');
|
||
sizes.className = 'note-img-sizes';
|
||
[25, 50, 75, 100].forEach(function (pct) {
|
||
var b = document.createElement('button');
|
||
b.type = 'button';
|
||
b.className = 'note-img-size' + ((pct === w || (pct === 100 && w === 0)) ? ' is-on' : '');
|
||
b.setAttribute('data-op', 'size');
|
||
b.setAttribute('data-pct', String(pct));
|
||
b.textContent = pct + '%';
|
||
sizes.appendChild(b);
|
||
});
|
||
bar.appendChild(sizes);
|
||
body.appendChild(img);
|
||
body.appendChild(bar);
|
||
body.setAttribute('data-key', key);
|
||
body.setAttribute('data-w', String(w));
|
||
} else {
|
||
var ta = document.createElement('textarea');
|
||
ta.className = 'input note-block-ta';
|
||
ta.rows = 4;
|
||
ta.value = content || '';
|
||
ta.placeholder = '写点什么…支持 Markdown：**粗体** *斜体* # 标题 - 列表 > 引用 `代码`（行首打 / 选命令）';
|
||
body.appendChild(ta);
|
||
/* 段落下方的实时预览（"所见即所得"）。
|
||
⚠️ v29 起**只有段落**这一种文本块了（清单并入 Markdown），
|
||
所以这里不再需要按 kind 分支。 */
|
||
var pv = document.createElement('div');
|
||
pv.className = 'note-block-pv';
|
||
pv.setAttribute('data-pv', '1');
|
||
body.appendChild(pv);
|
||
}
|
||
wrap.appendChild(body);
|
||
|
||
/* 🔴🔴 v52（用户 2026-10-15 第 3 条）：「在编辑笔记的时候，或者在新增笔记的时候，
|
||
…加段落和加图片应该是在**输入框的下面**。否则的话，如果都在上面的话，
|
||
我一段一段的往下写，每次要增加一个段落或者增加一个图片，我都要划上去增加一个段落，
|
||
再划下来……所以它应该是在正文这个框的**下面**，每增加一段，就应该在这个段落的下面
|
||
出现加段落和加图片。上面和下（的按钮）都保留，下面再增加一个加段落和加图片的按钮。
|
||
就是它在随着这个输入框中的增多，一直往下走。」
|
||
|
||
⇒ 每一块的**下方**再放一排「＋段落 / ＋图片」，点了就**插在这一块后面**
|
||
（`addBlock(kind, '', wrap)` 的 afterEl 语义正是"插在它后面"）。
|
||
⚠️ 挂在 **`body` 里**（不是挂 `wrap`）：`.note-block` 是 `display:flex` 的横排
|
||
（左边操作列 + 右边正文），挂到 `wrap` 上会变成横排的第三列（跑到输入框右边），
|
||
而不是"在输入框下面"。挂进 `body` 才是真的在输入框下方。
|
||
⚠️ 顶部的 `.note-add` **保留不动** —— 用户明确说"上面和下面都保留"。
|
||
⚠️ 用 `data-add-below` 标记（不是 `data-add`）：顶部那组是"追加到末尾"，
|
||
这一组是"插在本块后面"，语义不同，共用标记会互相抢绑定。 */
|
||
var foot = document.createElement('div');
|
||
foot.className = 'note-block-add';
|
||
foot.innerHTML =
|
||
'<button type="button" class="nb-add" data-add-below="text" title="在这段下面加一段">＋ 段落</button>' +
|
||
'<button type="button" class="nb-add" data-add-below="image" title="在这段下面加一张图">＋ 图片</button>';
|
||
body.appendChild(foot);
|
||
return wrap;
|
||
}
|
||
|
||
/** 把宽度百分比应用到 <img>（0 或 100 都不写 style，用默认 100%） */
|
||
function applyImgWidth(img, pct) {
|
||
if (!img) { return; }
|
||
if (pct > 0 && pct < 100) {
|
||
img.style.width = pct + '%';
|
||
} else {
|
||
img.style.width = '';
|
||
}
|
||
}
|
||
|
||
/* ---- Markdown 实时预览（服务端渲染，防抖 350ms）---- */
|
||
var pvTimer = 0;
|
||
function renderPreview(block) {
|
||
var pv = block.querySelector('[data-pv]');
|
||
var ta = block.querySelector('textarea');
|
||
if (!pv || !ta) { return; }
|
||
var box = document.getElementById('noteLivePreview');
|
||
if (box && !box.checked) { pv.innerHTML = ''; pv.classList.remove('is-on'); return; }
|
||
var md = ta.value;
|
||
if (md.trim() === '') { pv.innerHTML = ''; pv.classList.remove('is-on'); return; }
|
||
var tok = form.querySelector('input[name="_csrf"]');
|
||
var fd = new FormData();
|
||
fd.append('md', md);
|
||
if (tok) { fd.append('_csrf', tok.value); }
|
||
fetch('index.php?r=notes/preview', {
|
||
method: 'POST', body: fd, credentials: 'same-origin',
|
||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||
}).then(function (r) { return r.json().catch(function () { return null; }); })
|
||
.then(function (d) {
|
||
if (!d || !d.ok) { return; }
|
||
// ⚠️ 响应回来时用户可能已经又改了：只在内容仍一致时才贴上去
|
||
// （否则会把"旧的渲染结果"盖在"新的输入"下面，看着像卡住了）
|
||
if (ta.value !== md) { return; }
|
||
pv.innerHTML = d.html;
|
||
pv.classList.add('is-on');
|
||
}).catch(function () { /* 预览失败不打扰用户，正文照旧可保存 */ });
|
||
}
|
||
function schedulePreview(block) {
|
||
window.clearTimeout(pvTimer);
|
||
pvTimer = window.setTimeout(function () { renderPreview(block); }, 350);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------
|
||
// 序列化：从 DOM 读回块数组，写进隐藏域
|
||
// ---------------------------------------------------------------------
|
||
function serialize() {
|
||
var out = [];
|
||
Array.prototype.forEach.call(list.children, function (el) {
|
||
var kind = el.getAttribute('data-kind') || 'text';
|
||
var content;
|
||
if (kind === 'image') {
|
||
var b = el.querySelector('.note-block-body');
|
||
if (!b) { return; }
|
||
var key = b.getAttribute('data-key') || '';
|
||
var w = parseInt(b.getAttribute('data-w') || '0', 10) || 0;
|
||
// 宽度只在 20~99 时写进内容（100 是默认，不必写）
|
||
/* ⚠️ 宽度只在**有图**时才写进 content（`key|50`）——没有 key 的
|
||
`|50` 是无效内容（服务端会当空块丢掉，用户看到"刚选的尺寸没了"）。
|
||
但**尺寸本身要留住**（存在 data-w 上）：用户可能先点 50% 再选图，
|
||
选完图那一刻 serialize 会带上宽度（见下面）。 */
|
||
content = (key !== '' && w > 20 && w < 100) ? (key + '|' + w) : key;
|
||
} else {
|
||
var ta = el.querySelector('textarea');
|
||
content = ta ? ta.value : '';
|
||
}
|
||
out.push({ kind: kind, content: content });
|
||
});
|
||
sink.value = JSON.stringify(out);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------
|
||
// 增 / 删 / 移
|
||
// ---------------------------------------------------------------------
|
||
function addBlock(kind, content, afterEl) {
|
||
var el = makeBlock(kind, content);
|
||
if (afterEl && afterEl.parentNode === list) {
|
||
list.insertBefore(el, afterEl.nextSibling);
|
||
} else {
|
||
list.appendChild(el);
|
||
}
|
||
var ta = el.querySelector('textarea');
|
||
if (ta) { ta.focus(); }
|
||
serialize();
|
||
return el;
|
||
}
|
||
|
||
function move(el, dir) {
|
||
if (dir < 0) {
|
||
var prev = el.previousElementSibling;
|
||
if (prev) { list.insertBefore(el, prev); }
|
||
} else {
|
||
var next = el.nextElementSibling;
|
||
if (next) { list.insertBefore(next, el); }
|
||
}
|
||
serialize();
|
||
}
|
||
|
||
// 事件委托：统一处理块上的所有按钮
|
||
list.addEventListener('click', function (e) {
|
||
/* 🔴 v52（用户第 3 条）：**块内下方**的「＋段落 / ＋图片」也走这个委托。
|
||
⚠️ 必须放前面判（它不带 `data-op`），否则会被下面那行 `[data-op]` 的
|
||
`closest` 直接漏掉 —— 按钮点了没反应，而且看起来"按钮明明在"。 */
|
||
var addBelow = e.target.closest ? e.target.closest('[data-add-below]') : null;
|
||
if (addBelow && list.contains(addBelow)) {
|
||
var thisBlock = addBelow.closest('.note-block');
|
||
if (!thisBlock) { return; }
|
||
var k2 = addBelow.getAttribute('data-add-below');
|
||
// 「插在这一块**后面**」—— addBlock 的 afterEl 语义正是如此
|
||
var el2 = addBlock(k2, '', thisBlock);
|
||
if (k2 === 'image') {
|
||
pendingBlock = el2;
|
||
fileIn.click();
|
||
}
|
||
return;
|
||
}
|
||
|
||
var btn = e.target.closest ? e.target.closest('[data-op]') : null;
|
||
if (!btn || !list.contains(btn)) { return; }
|
||
var op = btn.getAttribute('data-op');
|
||
var el = btn.closest('.note-block');
|
||
if (!el) { return; }
|
||
|
||
if (op === 'up') { move(el, -1); return; }
|
||
if (op === 'down') { move(el, 1); return; }
|
||
if (op === 'del') { el.parentNode.removeChild(el); serialize(); return; }
|
||
if (op === 'pick') {
|
||
// 记住是哪个块在等图片，然后触发隐藏 file 框
|
||
pendingBlock = el;
|
||
fileIn.click();
|
||
return;
|
||
}
|
||
if (op === 'size') {
|
||
// 🔴 v29 第 8 条：调图片大小（就地生效 + 存进块内容）
|
||
var b = el.querySelector('.note-block-body');
|
||
var pct = parseInt(btn.getAttribute('data-pct') || '100', 10) || 100;
|
||
b.setAttribute('data-w', String(pct));
|
||
applyImgWidth(el.querySelector('.note-block-img'), pct);
|
||
Array.prototype.forEach.call(el.querySelectorAll('.note-img-size'), function (x) {
|
||
x.classList.toggle('is-on', x === btn);
|
||
});
|
||
serialize();
|
||
return;
|
||
}
|
||
});
|
||
|
||
/* 🔴 v29 第 7 条：工具条（点一下插到光标处）。
|
||
⚠️ 作用对象是**最后聚焦的那个 textarea**（`lastTa`）—— 点按钮时焦点已经
|
||
离开 textarea 了，光看 `document.activeElement` 是拿不到它的。 */
|
||
var lastTa = null;
|
||
list.addEventListener('focusin', function (e) {
|
||
if (e.target && e.target.tagName === 'TEXTAREA') { lastTa = e.target; }
|
||
});
|
||
Array.prototype.forEach.call(document.querySelectorAll('[data-cmdbar] [data-cmd]'),
|
||
function (b) {
|
||
b.addEventListener('click', function () {
|
||
var ta = lastTa || list.querySelector('textarea');
|
||
applyCmd(ta, b.getAttribute('data-cmd'));
|
||
if (ta) { schedulePreview(ta.closest('.note-block')); }
|
||
});
|
||
});
|
||
|
||
// 顶部「+段落 / +图片」
|
||
Array.prototype.forEach.call(document.querySelectorAll('.note-add [data-add]'), function (b) {
|
||
b.addEventListener('click', function () {
|
||
var kind = b.getAttribute('data-add');
|
||
if (kind === 'image') {
|
||
// 加图块的同时直接把选图流程带起来（少一次点击）
|
||
var el = addBlock('image', '');
|
||
pendingBlock = el;
|
||
fileIn.click();
|
||
} else {
|
||
addBlock(kind, '');
|
||
}
|
||
});
|
||
});
|
||
|
||
/* ---------------------------------------------------------------------
|
||
🔴 v29 第 7 条：**斜线命令**（行首打 `/` 弹出菜单）
|
||
---------------------------------------------------------------------
|
||
用户原话：「例如插入一个斜线，然后输入代码，例如 code，
|
||
就能自动补全 code 的 markdown 代码。」
|
||
⇒ 在段落 textarea 里：光标所在的**整行**是 `/xxx` 形态时弹出候选；
|
||
继续打字是**过滤**，回车/点击选中即执行那个命令。
|
||
|
||
⚠️⚠️ 判据挂在 `input` 事件上，**不是** `keydown('/')` ——
|
||
第一版写的是"按下 `/` 时 setTimeout(0) 再回头看光标前一个字符是不是 `/`"。
|
||
实测**必现失败**：打字快时（或粘贴、或中文输入法上屏、或自动化测试的
|
||
`type()` 连打）等到那个 timeout 跑起来，光标前一个字符早就是 `o` 了，
|
||
于是菜单**永远不弹** —— 用户看到的就是"这个功能没做"。
|
||
正确姿势：每次输入后看**整行**（行首到光标）是不是 `/` + 若干词字符。
|
||
这样无论打得多快、是不是一次粘贴进来，判断都成立。 */
|
||
function slashContext(ta) {
|
||
var v = ta.value;
|
||
var pos = ta.selectionStart;
|
||
if (pos !== ta.selectionEnd) { return null; } // 有选区时不弹
|
||
var before = v.slice(0, pos);
|
||
var lineStart = before.lastIndexOf('\n') + 1;
|
||
var line = before.slice(lineStart);
|
||
var m = /^\/([A-Za-z]*)$/.exec(line);
|
||
if (!m) { return null; }
|
||
return {start: lineStart, q: m[1].toLowerCase()};
|
||
}
|
||
|
||
function closeSlash() {
|
||
if (slashState && slashState.box && slashState.box.parentNode) {
|
||
slashState.box.parentNode.removeChild(slashState.box);
|
||
}
|
||
slashState = null;
|
||
}
|
||
|
||
function slashItemsFor(q) {
|
||
var out = [];
|
||
Object.keys(CMDS).forEach(function (k) {
|
||
var c = CMDS[k];
|
||
var hit = k.indexOf(q) === 0 || c.word.indexOf(q) === 0
|
||
|| (c.keys || []).some(function (x) { return x.indexOf(q) === 0; });
|
||
if (hit) { out.push([k, c]); }
|
||
});
|
||
return out;
|
||
}
|
||
|
||
function openSlash(ta, ctx) {
|
||
var box = document.createElement('div');
|
||
box.className = 'slash-menu';
|
||
// 挂在块上（不是 body）：跟着块走，块被删/移动时不会留下孤儿菜单
|
||
var host = ta.closest('.note-block-body') || ta.parentNode;
|
||
host.appendChild(box);
|
||
slashState = { ta: ta, box: box, start: ctx.start, items: [] };
|
||
renderSlash(ctx.q);
|
||
}
|
||
|
||
/** 当前打开的斜线菜单状态：{ta, box, start, items}；null = 没开 */
|
||
var slashState = null;
|
||
|
||
/** 输入过程中同步菜单：该弹就弹、该换词就换词、不该弹就收起来 */
|
||
function syncSlash(ta) {
|
||
var ctx = slashContext(ta);
|
||
if (!ctx) { closeSlash(); return; }
|
||
var items = slashItemsFor(ctx.q);
|
||
if (!items.length) { closeSlash(); return; }
|
||
if (!slashState || slashState.ta !== ta) { openSlash(ta, ctx); return; }
|
||
slashState.start = ctx.start;
|
||
renderSlash(ctx.q);
|
||
}
|
||
|
||
function renderSlash(q) {
|
||
if (!slashState) { return; }
|
||
var items = slashItemsFor(q);
|
||
slashState.items = items;
|
||
var box = slashState.box;
|
||
box.innerHTML = '';
|
||
if (!items.length) { box.classList.remove('is-on'); return; }
|
||
box.classList.add('is-on');
|
||
items.forEach(function (it, i) {
|
||
var b = document.createElement('button');
|
||
b.type = 'button';
|
||
b.className = 'slash-item' + (i === 0 ? ' is-on' : '');
|
||
b.setAttribute('data-slash', it[0]);
|
||
b.innerHTML = '<b>/' + it[0] + '</b><span>' + it[1].tip + '</span>';
|
||
b.addEventListener('mousedown', function (ev) {
|
||
ev.preventDefault(); // 别让 textarea 失焦（失焦就取不到选区了）
|
||
runSlash(it[0]);
|
||
});
|
||
box.appendChild(b);
|
||
});
|
||
}
|
||
|
||
function runSlash(key) {
|
||
if (!slashState) { return; }
|
||
var ta = slashState.ta;
|
||
var box = slashState.box;
|
||
// 先把 `/xxx` 这段从 textarea 里剪掉（它只是命令，不该留在正文里）
|
||
var v = ta.value;
|
||
var upto = ta.selectionStart;
|
||
var cut = v.slice(0, slashState.start) + v.slice(upto);
|
||
ta.value = cut;
|
||
ta.selectionStart = ta.selectionEnd = slashState.start;
|
||
// 关掉菜单（先关再执行，applyCmd 会重新 focus）
|
||
if (box && box.parentNode) { box.parentNode.removeChild(box); }
|
||
slashState = null;
|
||
applyCmd(ta, key);
|
||
schedulePreview(ta.closest('.note-block'));
|
||
}
|
||
|
||
list.addEventListener('keydown', function (e) {
|
||
var ta = e.target;
|
||
if (!ta || ta.tagName !== 'TEXTAREA') { return; }
|
||
|
||
if (slashState && slashState.ta === ta) {
|
||
if (e.key === 'Escape') { e.preventDefault(); closeSlash(); return; }
|
||
if (e.key === 'Enter' || e.key === 'Tab') {
|
||
if (slashState.items.length) {
|
||
e.preventDefault(); // 别让它换行
|
||
runSlash(slashState.items[0][0]);
|
||
return;
|
||
}
|
||
}
|
||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||
e.preventDefault();
|
||
var bs = Array.prototype.slice.call(slashState.box.querySelectorAll('.slash-item'));
|
||
if (bs.length > 1) {
|
||
var cur = bs.findIndex(function (x) { return x.classList.contains('is-on'); });
|
||
var nxt = ((cur + (e.key === 'ArrowDown' ? 1 : -1)) % bs.length + bs.length) % bs.length;
|
||
bs.forEach(function (x, i) { x.classList.toggle('is-on', i === nxt); });
|
||
}
|
||
return;
|
||
}
|
||
}
|
||
});
|
||
|
||
// 输入时：刷新斜线过滤 + 预览
|
||
list.addEventListener('input', function (e) {
|
||
serialize();
|
||
var ta = e.target;
|
||
if (!ta || ta.tagName !== 'TEXTAREA') { return; }
|
||
var block = ta.closest('.note-block');
|
||
|
||
// 🔴 v29 第 7 条：斜线菜单在**每次输入后**按"整行是不是 /xxx"重判
|
||
// （见 slashContext 的注释：挂在 keydown('/') 上会漏掉快速输入/粘贴）
|
||
syncSlash(ta);
|
||
if (block && block.getAttribute('data-kind') === 'text') {
|
||
schedulePreview(block);
|
||
}
|
||
});
|
||
list.addEventListener('blur', function (e) {
|
||
// 失焦就关菜单（点别处了）。用 0ms 让"点击候选"先跑完（它是 mousedown）。
|
||
if (slashState && e.target === slashState.ta) {
|
||
window.setTimeout(closeSlash, 120);
|
||
}
|
||
}, true);
|
||
|
||
// ---------------------------------------------------------------------
|
||
// 图片上传
|
||
// ---------------------------------------------------------------------
|
||
fileIn.addEventListener('change', function () {
|
||
if (!fileIn.files || !fileIn.files[0]) { return; }
|
||
var el = pendingBlock;
|
||
if (!el) { return; }
|
||
var f = fileIn.files[0];
|
||
|
||
var fd = new FormData();
|
||
fd.append('img', f);
|
||
// CSRF：从表单里那颗隐藏 _csrf 拿（同一个 token）
|
||
var tok = form.querySelector('input[name="_csrf"]');
|
||
if (tok) { fd.append('_csrf', tok.value); }
|
||
|
||
// 上传中：把按钮文案换掉，避免用户以为没反应又点一次
|
||
var pick = el.querySelector('.note-img-pick');
|
||
var oldTxt = pick ? pick.textContent : '';
|
||
if (pick) { pick.textContent = '上传中…'; pick.disabled = true; }
|
||
|
||
fetch('index.php?r=notes/upload', {
|
||
method: 'POST',
|
||
body: fd,
|
||
credentials: 'same-origin',
|
||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||
}).then(function (r) { return r.json().catch(function () { return null; }); })
|
||
.then(function (d) {
|
||
if (pick) { pick.textContent = oldTxt || '选图片'; pick.disabled = false; }
|
||
if (!d || !d.ok) {
|
||
alert('图片上传失败：' + ((d && d.error) || '未知原因'));
|
||
return;
|
||
}
|
||
var b = el.querySelector('.note-block-body');
|
||
if (b) { b.setAttribute('data-key', d.key); }
|
||
var img = el.querySelector('.note-block-img');
|
||
if (img) { img.src = d.url; img.classList.remove('is-empty'); }
|
||
if (pick) { pick.textContent = '换一张'; }
|
||
// ⚠️ 上传完要立刻 serialize：此时 key 才有了值，宽度（data-w）才写进 content。
|
||
// 否则"先点 50% 再选图"的人，尺寸要到下次改动才生效。
|
||
serialize();
|
||
}).catch(function () {
|
||
if (pick) { pick.textContent = oldTxt || '选图片'; pick.disabled = false; }
|
||
alert('图片上传失败，请重试。');
|
||
});
|
||
// 清空 input，否则连选同一张图不会再触发 change
|
||
fileIn.value = '';
|
||
});
|
||
|
||
/* 实时预览开关（"允许所见即所得编辑，也允许 markdown 编辑"）——
|
||
关掉之后预览块收起，textarea 能占满整块（专心改 Markdown 源码时更清爽）。 */
|
||
var liveBox = document.getElementById('noteLivePreview');
|
||
if (liveBox) {
|
||
liveBox.addEventListener('change', function () {
|
||
Array.prototype.forEach.call(list.querySelectorAll('.note-block[data-kind="text"]'),
|
||
function (b) {
|
||
if (liveBox.checked) { renderPreview(b); }
|
||
else {
|
||
var pv = b.querySelector('[data-pv]');
|
||
if (pv) { pv.innerHTML = ''; pv.classList.remove('is-on'); }
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ---------------- 底部附件：删除（v28 第 12 条）----------------
|
||
⚠️ 用全页唯一的那一份 #noteFileDelForm（与项目其它模块同一做法）：
|
||
每个附件一份 form 会在附件多时把页面撑爆。 */
|
||
var fileDelForm = document.getElementById('noteFileDelForm');
|
||
if (fileDelForm) {
|
||
document.addEventListener('click', function (e) {
|
||
var b = e.target && e.target.closest ? e.target.closest('[data-note-file-del]') : null;
|
||
if (!b) { return; }
|
||
if (!confirm('删掉这个附件？')) { return; }
|
||
var inp = fileDelForm.querySelector('input[name="id"]');
|
||
if (inp) { inp.value = b.getAttribute('data-note-file-del'); }
|
||
fileDelForm.submit();
|
||
});
|
||
}
|
||
|
||
// 提交前再序列化一次（双保险）
|
||
form.addEventListener('submit', serialize);
|
||
|
||
// ---------------------------------------------------------------------
|
||
// 初始化：从服务端种子渲染
|
||
// ---------------------------------------------------------------------
|
||
var initial = [];
|
||
if (seed) {
|
||
try { initial = JSON.parse(seed.textContent || '[]'); } catch (e) { initial = []; }
|
||
}
|
||
if (!initial.length) { initial = [{ kind: 'text', content: '' }]; }
|
||
initial.forEach(function (b) { addBlock(b.kind, b.content); });
|
||
serialize();
|
||
|
||
/* 编辑已有笔记时，让段落**一进来就看到渲染结果**（否则用户要动一下
|
||
键盘才第一次看到"所见即所得"，会以为这功能没生效）。 */
|
||
Array.prototype.forEach.call(list.querySelectorAll('.note-block[data-kind="text"]'),
|
||
function (b) { renderPreview(b); });
|
||
|
||
// ---------------------------------------------------------------------
|
||
// 标签联想：点一下把 #标签 追加进输入框
|
||
// ---------------------------------------------------------------------
|
||
var tagIn = document.getElementById('noteTags');
|
||
Array.prototype.forEach.call(document.querySelectorAll('.note-tags-suggest [data-tag]'),
|
||
function (b) {
|
||
b.addEventListener('click', function () {
|
||
if (!tagIn) { return; }
|
||
var t = '#' + b.getAttribute('data-tag');
|
||
var cur = tagIn.value.trim();
|
||
// 已经有就不重复加
|
||
if ((' ' + cur + ' ').indexOf(' ' + t + ' ') >= 0) { return; }
|
||
tagIn.value = cur === '' ? t : (cur + ' ' + t);
|
||
});
|
||
});
|
||
})(); |