FamilyBook/templates/notes/form.php

<?php
/**
 * 个人笔记 · 写 / 改（v27 用户 2026-10-07）。新建与编辑**同一个模板**。
 *
 * 「分块」的落点就在这一页：正文区由若干**块**组成，每块是
 * 段落 / 图片 / 清单 三者之一，可增、可删、可上下移。
 *
 * 三条刻意的轻量取舍（写清楚，免得后人"顺手升级"成重型编辑器）：
 *   ① **不做富文本工具栏**（粗体/斜体/颜色…）。本项目全站的文本都是"纯文本 +
 *      换行"，只有这里破例就会出现两套文本口径（导出、搜索、复制都会不一致）。
 *      需要强调就写符号，需要排版就用清单块。
 *   ② **不做 Markdown 预览**。可见即所得：段落块就是段落，清单块就是清单 ——
 *      用户不必再学"我打的东西会变成什么"。这也是"轻量"最实在的一层。
 *   ③ **不做拖拽排序**，只有 ↑ ↓ 两个按钮。鼠标拖拽要引入一整套 pointer 事件
 *      与触摸兼容（本仓名册拖拽就为它写了上千行），而笔记的块通常只有几块，
 *      两个按钮足够，代码少一个数量级。
 *
 * ⚠️ 提交形状：所有块打包成一个 JSON 放进隐藏域 `blocks`（见页尾脚本）。
 *    为什么不是 `kind[]` / `content[]` 并行数组：服务端要按下标对齐，
 *    一旦前端少发一个（比如空块被过滤）整个错位，而且很难在页面上看出来。
 *    JSON 一把梭，服务端 `json_decode` 之后逐块清洗，简单且不会错位。
 * ⚠️ **无 JS 兜底**：`<noscript>` 里给一个普通 textarea（`body_plain`），
 *    服务端在 `blocks` 为空时会退回读它（见 index.php 的 notes/save）。
 *
 * @param array|null $editing    编辑时的笔记（带 blocks/tags/is_shared）；新建为 null
 * @param array      $tagSuggest 我用过的标签（点一下就加）
 */
$editing   = $editing ?? null;
$isEditing = $editing !== null;
$canWrite  = \App\Auth::canWrite();

// 把编辑中的数据整理成前端要的形状（块数组 + 标签词）
$blocks = [];
$tagsStr = '';
if ($isEditing) {
    foreach ((array)$editing['blocks'] as $b) {
        $blocks[] = ['kind' => (string)$b['kind'], 'content' => (string)$b['content']];
    }
    $tagsStr = implode(' ', array_map(static fn($t): string => '#' . $t, (array)$editing['tags']));
}
if (!$blocks) {
    // 新建时给一个空段落块打底（否则页面上一片空白，用户不知道从哪写）
    $blocks = [['kind' => 'text', 'content' => '']];
}
?>
<div class="page-head">
  <h1><?= $isEditing ? '改笔记' : '写笔记' ?></h1>
  <div class="actions">
    <a class="btn btn-ghost" href="<?= e(url('notes')) ?>">返回列表</a>
  </div>
</div>

<?php if (!$canWrite): ?>
  <div class="card card-pad"><p class="empty-hint">只读账号不能写笔记。</p></div>
<?php else: ?>
<form method="post" action="<?= e(url('notes/save')) ?>" id="noteForm" class="note-form">
  <?= csrf_field() ?>
  <?php if ($isEditing): ?>
    <input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
  <?php endif; ?>
  <?php /* 块的真实载荷（由页尾脚本维护） */ ?>
  <input type="hidden" name="blocks" id="noteBlocks" value="">

  <div class="card card-pad">
    <div class="field">
      <label for="noteTitle">标题</label>
      <input class="input" id="noteTitle" name="title" maxlength="200"
             value="<?= e((string)($editing['title'] ?? '')) ?>"
             placeholder="一句话概括（也可以不写，只写正文）" autocomplete="off">
    </div>
  </div>

  <?php /* ---------------- 分块编辑区 ---------------- */ ?>
  <div class="card card-pad">
    <div class="note-block-head">
      <h2 class="cinema-h2">正文</h2>
      <div class="note-add">
        <button class="btn btn-ghost btn-sm" type="button" data-add="text">+ 段落</button>
        <button class="btn btn-ghost btn-sm" type="button" data-add="image">+ 图片</button>
        <button class="btn btn-ghost btn-sm" type="button" data-add="list">+ 清单</button>
      </div>
    </div>

    <?php /* 🔴 v28 用户第 12 条：「段落是需要支持富文本的，可以使用 markdown，
         但是需要使用富文本的方式进行编辑，同时可以使用 markdown 源码观看编辑。
         就是说，允许所见即所得编辑，也允许 markdown 编辑。」

         ⇒ 两件事：
           ① **每个段落块下方实时显示渲染结果**（"所见即所得"）——
              写 Markdown 的同时就能看到它长什么样，不必切来切去；
           ② 一个**全局"源码 / 预览"开关**：想专心改 Markdown 源码时，
              把实时预览关掉（长文档下预览会占很多地方，也会让人分心）。

         ⚠️ 为什么不做 contenteditable 那种"直接在渲染结果上编辑"：
            那要引入一套 HTML↔Markdown 的双向转换与清洗（正是"引大库"的那条路），
            而且富文本内容再存回 Markdown 时几乎必然丢格式或引入噪音。
            这里选择"**输入 Markdown + 实时预览**"—— 两个诉求都满足，
            数据始终是干净的 Markdown 纯文本（可导出、可搜索、可版本对比）。 */ ?>
    <div class="note-modebar">
      <span class="small muted">段落支持 Markdown：<code>**粗体**</code>
        <code>*斜体*</code> <code># 标题</code> <code>- 清单</code> <code>&gt; 引用</code>
        <code>`代码`</code></span>
      <label class="note-live">
        <input type="checkbox" id="noteLivePreview" checked>
        <span>实时预览</span>
      </label>
    </div>

    <div id="noteBlockList" class="note-blocks"></div>

    <?php /* 无 JS 兜底：脚本没跑时用户仍能写一条纯文字笔记 */ ?>
    <noscript>
      <div class="field" style="margin-top:10px">
        <label for="notePlain">正文（纯文本）</label>
        <textarea class="input" id="notePlain" name="body_plain" rows="8"
                  placeholder="没有启用脚本时，可以在这里写纯文字正文"><?php
          echo e(implode("\n\n", array_map(
              static fn($b): string => (string)$b['content'], $blocks)));
        ?></textarea>
      </div>
    </noscript>

    <?php /* 图片上传用的隐藏 file 框（点"+ 图片"时程序化触发） */ ?>
    <input type="file" id="noteImgInput" accept="image/*" hidden>
  </div>

  <?php /* ---------------- 标签 + 共享 ---------------- */ ?>
  <div class="card card-pad">
    <div class="field">
      <label for="noteTags">标签</label>
      <input class="input" id="noteTags" name="tags" maxlength="300"
             value="<?= e($tagsStr) ?>"
             placeholder="用空格分开，如：读书 灵感 待办（可写 # 也可不写）" autocomplete="off">
      <?php if ($tagSuggest): ?>
        <div class="note-tags note-tags-suggest">
          <span class="small muted">用过的：</span>
          <?php foreach ($tagSuggest as $t): ?>
            <button type="button" class="note-tag" data-tag="<?= e((string)$t) ?>">
              #<?= e((string)$t) ?>
            </button>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
    </div>

    <label class="note-share-toggle">
      <input type="checkbox" name="is_shared" value="1"
             <?= !empty($editing['is_shared']) ? 'checked' : '' ?>>
      <span>共享给全家（默认只有自己看得到）</span>
    </label>
  </div>

  <?php /* 🔴 v28 用户第 12 条：「再加上附件上传功能，附件，都放在笔记最下面就行了。」
      ⇒ 附件区放在**整张表单的最下面**（标签与共享之后），与用户说的一致。
      ⚠️ 附件要挂在**已存在的笔记**上（attachments.target_id 要真实 id），
         所以新建时这一区是**禁用并说明**的 —— 保存之后进入编辑态就能传了。
         不采用"草稿附件 + 保存时认领"（图片块那套）：附件不像图片那样内嵌在正文里，
         草稿态文件在用户放弃保存后会变成谁看不见的垃圾；宁可让他保存完再传。 */ ?>
  <?php if ($isEditing): ?>
    <div class="card card-pad" id="noteFilesCard">
      <h2 class="cinema-h2">附件 <span class="hint">放最后，与正文分开</span></h2>

      <?php /* 已有附件：可下载、可删 */ ?>
      <?php if (!empty($editing['files'])): ?>
        <div class="note-files">
          <?php foreach ((array)$editing['files'] as $f): ?>
            <?php $fk = \App\Attachment::kind($f); ?>
            <div class="note-file">
              <span class="note-file-ico"><?= e(\App\Attachment::kindWord($fk)) ?></span>
              <a class="note-file-nm" href="<?= e(media_url((string)$f['key'], ['dl' => 1])) ?>">
                <?= e((string)($f['name'] ?? '附件')) ?>
              </a>
              <span class="small muted"><?= e(\App\Attachment::sizeWord($f['size'] ?? 0)) ?></span>
              <button type="button" class="note-file-del" data-note-file-del="<?= (int)$f['id'] ?>"
                      title="删掉这个附件">✕</button>
            </div>
          <?php endforeach; ?>
        </div>
      <?php else: ?>
        <p class="empty-hint" id="noteFilesEmpty">还没有附件。</p>
      <?php endif; ?>

      <form method="post" enctype="multipart/form-data"
            action="<?= e(url('notes/attach_add')) ?>" id="noteAttForm">
        <?= csrf_field() ?>
        <input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
        <div class="note-att-drop" id="noteAttDrop">
          <input type="file" name="file[]" id="noteAttInput" multiple
                 accept="image/*,.pdf,.txt,.md,.zip,.doc,.docx,.xls,.xlsx,.ppt,.pptx">
          <span class="note-att-tip">把文件拖到这里，或<label for="noteAttInput">点这里选文件</label></span>
        </div>
        <div class="btn-row">
          <button class="btn btn-ghost btn-sm" type="submit">上传所选文件</button>
        </div>
      </form>
    </div>
  <?php else: ?>
    <div class="card card-pad">
      <h2 class="cinema-h2">附件</h2>
      <p class="empty-hint">先「记下来」，保存之后回到这一页就能传附件了。</p>
    </div>
  <?php endif; ?>

  <div class="note-actions">
    <button class="btn" type="submit"><?= $isEditing ? '保存' : '记下来' ?></button>
    <a class="btn btn-ghost" href="<?= e(url('notes')) ?>">取消</a>
  </div>
</form>

<?php if ($isEditing): ?>
  <?php /* 删附件：全页唯一的一份表单，脚本填 id 后提交（沿用项目既有做法，
           避免"每行一份 form"那种页面膨胀）。 */ ?>
  <form method="post" action="<?= e(url('notes/attach_del')) ?>" id="noteFileDelForm" hidden>
    <?= csrf_field() ?>
    <input type="hidden" name="id" value="">
  </form>
<?php endif; ?>

<?php /* 初始块数据：JSON 塞进 <script type="application/json"> 而不是 data-* ——
         属性里的引号/换行会被 HTML 实体化，读出来还得反转义一次；JSON 块原样读。 */ ?>
<script type="application/json" id="noteSeed"><?= json_encode(
    $blocks,
    JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP
) ?></script>
<?php endif; ?>