From 75ab35e69c245a56db809159c40a1b23e837c605 Mon Sep 17 00:00:00 2001 From: LuoQianhong Date: Thu, 22 Oct 2026 14:35:09 +0800 Subject: [PATCH] fix(editor): tighten document outline indentation (#645) Nested outline rows now indent 12px per level, so deep headings keep more text in the 300px panel. Hierarchy guides sit on the disclosure-button center and follow the theme root font size. Full-row highlight, collapse, and heading jumps stay the same. --- apps/web/src/components/EditorOutline.tsx | 17 ++++++----- .../2026-10-22-editor-outline-indent.md | 29 +++++++++++++++++++ .../2026-10-22-editor-outline-indent.zh-CN.md | 29 +++++++++++++++++++ 3 files changed, 68 insertions(+), 7 deletions(-) create mode 100644 docs/changes/2026-10-22-editor-outline-indent.md create mode 100644 docs/changes/2026-10-22-editor-outline-indent.zh-CN.md diff --git a/apps/web/src/components/EditorOutline.tsx b/apps/web/src/components/EditorOutline.tsx index 94e99a09..04393d67 100644 --- a/apps/web/src/components/EditorOutline.tsx +++ b/apps/web/src/components/EditorOutline.tsx @@ -15,6 +15,8 @@ type EditorOutlineProps = { onCollapsedChange: (collapsed: boolean) => void; }; +const OUTLINE_INDENT = 12; + const stripLeadingEmoji = (str: string): string => { const leadingEmojiRegex = /^(?:(?:[\u0030-\u0039#*]\uFE0F?\u20E3|\p{Extended_Pictographic}|[\u2460-\u24FF\u2600-\u27BF\u2B00-\u2BFF])[\uFE00-\uFE0F\u200D]*\s*)+/u; return str.replace(leadingEmojiRegex, "").trim() || str; @@ -203,16 +205,12 @@ export const EditorOutline = ({ editor, scrollContainer, collapsed, shortcutLabe
  • {hasChildren ? ( @@ -248,7 +246,12 @@ export const EditorOutline = ({ editor, scrollContainer, collapsed, shortcutLabe
    {hasChildren && !itemCollapsed && ( -
    +
    +
    )} diff --git a/docs/changes/2026-10-22-editor-outline-indent.md b/docs/changes/2026-10-22-editor-outline-indent.md new file mode 100644 index 00000000..dc256b04 --- /dev/null +++ b/docs/changes/2026-10-22-editor-outline-indent.md @@ -0,0 +1,29 @@ +# Compact document outline + +## Problem and goal + +Nested outline entries consume about 25px per level in a 300px panel. Deep headings lose too much text space. Reduce the indentation to 12px per level while keeping the existing outline interactions. + +## Allowed changes and acceptance + +- Use one 12px depth offset for outline rows and position hierarchy guides independently of layout, without cumulative margins or negative-margin/width compensation. +- Preserve full-width active and hover backgrounds, aligned disclosure controls and leaf placeholders, and text truncation within the panel. Guides must stay centered under disclosure controls when the existing theme `font.size` token changes the root font size; depth indentation remains 12px. +- Verify H1–H6 headings, long heading text, sibling and skipped heading levels in the rendered local app. Exercise collapse/expand and heading navigation, and confirm the active row remains correct after scrolling. +- Run `bun run typecheck`, `bun run typecheck:mobile`, and `bun run build:web`. Reuse the passing hierarchy tests because the parser is unchanged. + +## Unchanged boundaries + +Do not change heading extraction, tree construction, note data, saving, synchronization, panel width, visibility preferences, or native mobile implementations. No new dependency, input restriction, default, retry, or fallback is introduced. Web and desktop share the changed presentation component. + +## Risk and rollback + +The main risk is misaligned guides or row backgrounds. Inspect the actual render and interactions before delivery. Revert the `EditorOutline.tsx` layout change to restore the previous presentation. Packaged desktop verification is not part of this local preview. + +## Completion check + +- Only the outline presentation component changed. Rows now use `depth * 12`; decorative guides no longer consume horizontal space and follow the existing disclosure control width across theme font sizes. The diff introduces no behavior outside the allowed list. +- Local browser checks passed: H1–H6 offsets are 0/12/24/36/48/60px, all row backgrounds are 292px wide in the unchanged 300px panel, and the long H6 title has 200px of text space with ellipsis. Sibling and skipped-level entries remain aligned. Collapse/expand, heading selection/navigation, and scroll tracking were exercised. +- Light and dark renders were inspected. A 20px theme root font reproduced a 3px guide offset; using half the existing rem-based control width corrected it to 0px, with 0px error also at the default 16px root font. The 12px depth offsets stayed unchanged. +- On contribution base `c80645f8`, focused lint, `bun run typecheck:mobile`, the outline hierarchy tests, and `bun run build:web` passed. Root `bun run typecheck` is blocked by existing errors at `apps/web/src/lib/note-print-pdf.ts:22` and `apps/web/src/note-print.ts:172`; the same errors were reproduced without this patch and appear in the [upstream baseline CI](https://github.com/tianma-if/edgeever/actions/runs/39724860542). These unrelated printing errors are not changed by this fix. + +To reproduce the browser checks, run `bun run dev`, open a note containing nested H1–H6 headings, a long H6 title, and sibling/skipped-level headings, and expand the document outline. Check indentation, full-row backgrounds, truncation, collapse/expand, and navigation. Compare guide alignment at default and 20px theme root font sizes. Packaged desktop verification was not performed. diff --git a/docs/changes/2026-10-22-editor-outline-indent.zh-CN.md b/docs/changes/2026-10-22-editor-outline-indent.zh-CN.md new file mode 100644 index 00000000..1e681157 --- /dev/null +++ b/docs/changes/2026-10-22-editor-outline-indent.zh-CN.md @@ -0,0 +1,29 @@ +# 收紧文档大纲缩进 + +## 问题与目标 + +大纲面板宽 300px，嵌套条目每层约消耗 25px，深层标题的文字空间不足。将每层缩进收紧为 12px，保留现有大纲交互。 + +## 允许的变更与验收 + +- 大纲行统一按深度计算 12px 缩进；层级引导线独立定位，不再依靠层层外边距、负外边距及宽度补偿。 +- 保留全行选中与悬停背景、对齐的折叠按钮及叶节点占位，文字仍在面板内截断。既有主题 `font.size` 调整根字号时，引导线仍须对准折叠按钮中心，层级缩进保持 12px。 +- 在本地实际页面检查 H1–H6、长标题、同级和跳级标题，操作折叠、展开及标题跳转，并确认滚动后的当前标题高亮正确。 +- 执行 `bun run typecheck`、`bun run typecheck:mobile`、`bun run build:web`。层级解析未改动，复用已通过的层级测试。 + +## 保持不变的边界 + +不改标题提取、树构建、笔记数据、保存、同步、面板宽度、显示偏好和原生移动端实现。不增加依赖、输入限制、默认值、重试或 fallback。Web 与桌面共用本次修改的展示组件。 + +## 风险与回滚 + +主要风险为引导线或行背景对齐不正确，交付前检查实际渲染和交互。回退 `EditorOutline.tsx` 的布局修改即可恢复原展示。本次本地预览不包含桌面安装包验证。 + +## 完成核对 + +- 产品代码只修改大纲展示组件。行缩进统一为 `depth * 12`，装饰引导线不再占用横向空间，并随主题字号跟随既有折叠按钮宽度对齐；实际 diff 未引入清单外行为。 +- 本地浏览器检查通过：H1–H6 缩进为 0/12/24/36/48/60px；面板仍为 300px，行背景均为 292px；长 H6 标题有 200px 文字空间，超出部分显示省略号。同级与跳级条目保持对齐，已操作折叠、展开、标题选择及跳转、滚动高亮。 +- 已检查浅色和深色实际渲染。主题根字号为 20px 时复现了引导线 3px 错位，改为按既有 rem 按钮宽度的一半定位后误差为 0px，恢复默认 16px 根字号后误差同样为 0px，层级缩进仍为 12px。 +- 在贡献分支基线 `c80645f8` 上，定向 lint、`bun run typecheck:mobile`、大纲层级测试和 `bun run build:web` 通过。根目录 `bun run typecheck` 被 `apps/web/src/lib/note-print-pdf.ts:22` 和 `apps/web/src/note-print.ts:172` 的既有错误阻塞；未应用本补丁时也已复现相同错误，[上游基线 CI](https://github.com/tianma-if/edgeever/actions/runs/39724860542) 同样失败。本修复不修改这些无关打印错误。 + +浏览器复现方式：执行 `bun run dev`，打开包含嵌套 H1–H6、长 H6 标题、同级与跳级标题的笔记，展开文档大纲，检查缩进、全行背景、截断、折叠、展开和跳转。分别在默认主题根字号与 20px 根字号下检查引导线对齐。本次未验证桌面安装包。