+
+ )
+ }
+
+ const renderPreviewArticle = (articleRef?: React.Ref浏览器文件接口未就绪，请刷新页面重试。
+
+ {closePromptTabId && closePromptTab ? (
+
+ {tabs.map((t) => (
+
+
+
+ )
+}
diff --git a/src/EditorPane.tsx b/src/EditorPane.tsx
new file mode 100644
index 0000000..f369391
--- /dev/null
+++ b/src/EditorPane.tsx
@@ -0,0 +1,370 @@
+import * as React from 'react'
+import { EditorSelection } from '@codemirror/state'
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { markdown } from '@codemirror/lang-markdown'
+import { EditorState } from '@codemirror/state'
+import {
+ EditorView,
+ highlightActiveLine,
+ keymap,
+ lineNumbers,
+ placeholder
+} from '@codemirror/view'
+
+export type MarkdownEditorHandle = {
+ applyAction: (id: string) => void | Promise setClosePromptTabId(null)}
+ >
+
+ ) : null}
+
+ {textPrompt ? (
+ e.stopPropagation()}
+ >
+
+ 关闭标签
++ 「{tabLabel(closePromptTab)}」有未保存的更改，是否保存？ +
+
+
+
+
+
+ {
+ if (e.target === e.currentTarget) {
+ textPrompt.resolve(null)
+ setTextPrompt(null)
+ }
+ }}
+ >
+
+ ) : null}
+
+ {imageInsert ? (
+ e.stopPropagation()}
+ >
+
+ {textPrompt.title}
+ {textPrompt.hint ?{textPrompt.hint}
: null} + setTextPromptInput(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.preventDefault() + textPrompt.resolve(textPromptInput) + setTextPrompt(null) + } + if (e.key === 'Escape') { + e.preventDefault() + textPrompt.resolve(null) + setTextPrompt(null) + } + }} + autoFocus + /> +
+
+
+
+ {
+ if (e.target === e.currentTarget) {
+ imageInsert.resolve(null)
+ setImageInsert(null)
+ }
+ }}
+ >
+
+ ) : null}
+
+ {colorPicker ? (
+ e.stopPropagation()}
+ >
+
+ 插入图片
+支持网络地址或本地图片文件（Markdown 中保存为 file:// 链接）。
+ +
+
+
+
+
+
+
+
+ {
+ if (e.target === e.currentTarget) {
+ colorPicker.resolve(null)
+ setColorPicker(null)
+ }
+ }}
+ >
+
+ ) : null}
+
+ {webNotesOpen ? (
+ e.stopPropagation()}
+ >
+
+ 文字颜色
+
+ 取色器
+ setColorHexInput(e.target.value.toLowerCase())}
+ aria-label="色谱"
+ />
+
+
+
+ {COLOR_SWATCH_ROWS.map((row, ri) => (
+
+
+ {row.map((hex) => (
+
+ ))}
+
+
+
+
+ setWebNotesOpen(false)}
+ >
+
+ ) : null}
+
+ {desktopDownloadOpen ? (
+ e.stopPropagation()}
+ >
+
+ + Web 版额外说明 +
+
+
+ + 在浏览器中运行，读写的是您本机通过「打开 / 保存」授权的文件，不会访问服务器磁盘。需要完整本地编辑体验请使用工具栏「桌面版下载地址」。 +
++ 打开与保存：工具栏「打开」选择本地 Markdown；「保存」写回原文件（需浏览器支持 + File System Access API）；「另存为」可保存到新位置。推荐使用 Chrome / Edge 桌面版，并通过 + HTTPS 访问以获得完整能力。 +
++ 侧栏：仅显示当前文档大纲。Web 版不提供文件夹浏览与打开历史，请用工具栏「打开」或 + Ctrl+O 选择文件。 +
+
+ 图片与链接：本地 file:// 图片受浏览器安全策略限制，可能无法显示；可改用
+ 网络图片地址，或将图片与文档放在同一目录后重新打开。文内相对链接在已打开文件范围内解析。
+
+ 快捷键：Ctrl+O 打开 · Ctrl+S 保存 · Ctrl+Shift+S 另存为 · Ctrl+T 新标签 · + Ctrl+W 关闭标签 · Ctrl+E 切换视图 · Ctrl+Tab / Ctrl+Shift+Tab 切换标签。 +
++ 作者：黄志军 · 支持与协助(wx)：liaofan199404 +
+
+
+
+ setDesktopDownloadOpen(false)}
+ >
+
+ ) : null}
+
+ e.stopPropagation()}
+ >
+
+ + 桌面版下载说明 +
+
+
+ + 为什么推荐桌面版？ + Web 版在 HTTP 站点上无法直接写回您电脑上的原文件，保存时往往只能触发下载；文件夹浏览、稳定保存等能力也受浏览器限制。桌面版（Electron）在 + Windows 本地运行，可像普通编辑器一样打开、保存 Markdown，体验更接近完整版 MyReader。 +
++ 如何安装？ +
+-
+
- 点击下方链接下载 ZIP 压缩包； +
- 解压到任意目录（路径尽量不要含特殊字符）； +
- 进入解压目录，运行其中的可执行程序（一般为
.exe）；
+ - 首次使用可通过菜单「打开」选择本地
.md文件进行阅读与编辑。
+
+ 下载地址：
+
+
+ {DESKTOP_DOWNLOAD_URL}
+
+
+ 若链接无法打开，请检查网络或联系站点管理员。桌面版仅支持 Windows；Mac / Linux 请继续使用 Web 版。 +
+
+
+ 前往下载
+
+
+
+
+
+
+
+ ))}
+
+ {saveToast ? (
+
+
+
+ {saveToast}
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!sidebarHidden ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+
+ {(viewMode === 'edit' || viewMode === 'hybrid') && activeTab ? (
+
+
+
+
+ ) : (
+
+ {renderPreviewArticle(readPreviewArticleRef)}
+
+
+
+ 请从侧栏选择文件、使用工具栏「打开」，或点击「新标签」开始编辑。
+
+ )
+ ) : null}
+
+ {viewMode === 'edit' ? (
+ activeTab ? (
+
+ 请从侧栏选择文件、使用工具栏「打开」，或点击「新标签」开始编辑。
+
+ )
+ ) : null}
+
+ {viewMode === 'hybrid' ? (
+ activeTab ? (
+
+
+ ) : (
+
+
+
+
+
+
+ {hybridLinePulse ? (
+
+ ) : null}
+ {renderPreviewArticle(hybridPreviewArticleRef)}
+
+
+ 请从侧栏选择文件、使用工具栏「打开」，或点击「新标签」开始编辑。
+
+ )
+ ) : null}
+ \n
\n')
+ break
+ case 'footnote':
+ insertLines(view, '[^1]\n\n[^1]: 脚注内容\n')
+ break
+ default:
+ break
+ }
+ } catch (e) {
+ console.error('[MyReader] toolbar action failed', id, e)
+ }
+}
+
+export const EditorPane = React.forwardRef标题
\n内容\n
+
+ )
+}
diff --git a/src/OutlinePanel.tsx b/src/OutlinePanel.tsx
new file mode 100644
index 0000000..cc98e50
--- /dev/null
+++ b/src/OutlinePanel.tsx
@@ -0,0 +1,110 @@
+import * as React from 'react'
+import type { OutlineItem } from './markdown'
+import { buildOutlineTree, collectBranchIds, type OutlineTreeNode } from './outlineTree'
+
+type Props = {
+ items: OutlineItem[]
+ onSelect: (item: OutlineItem) => void
+}
+
+export function OutlinePanel({ items, onSelect }: Props): React.ReactElement {
+ const tree = React.useMemo(() => buildOutlineTree(items), [items])
+ const branchIds = React.useMemo(() => collectBranchIds(tree), [tree])
+ const [collapsed, setCollapsed] = React.useState
+ {BUTTONS.map((b) => (
+
+ ))}
+
+
+ {hasChildren ? (
+
+ ) : (
+
+ )}
+
+
+ {hasChildren && !isCollapsed ? (
+ - {node.children.map(renderNode)}
当前文档没有标题
+ } + + const collapsedCount = collapsed.size + const branchCount = branchIds.length + + return ( +
+
+ )
+}
diff --git a/src/PreviewArticle.tsx b/src/PreviewArticle.tsx
new file mode 100644
index 0000000..693c550
--- /dev/null
+++ b/src/PreviewArticle.tsx
@@ -0,0 +1,258 @@
+import * as React from 'react'
+import mermaid from 'mermaid'
+import { webVfs } from './platform/webVfs'
+
+let mermaidInited = false
+let mermaidSeq = 0
+
+function ensureMermaid(): void {
+ if (mermaidInited) return
+ mermaid.initialize({
+ startOnLoad: false,
+ theme: 'neutral',
+ securityLevel: 'loose',
+ fontFamily: 'inherit',
+ flowchart: { useMaxWidth: true, htmlLabels: true },
+ sequence: { useMaxWidth: true, wrap: true },
+ er: { useMaxWidth: true },
+ gantt: { useMaxWidth: true }
+ })
+ mermaidInited = true
+}
+
+function mermaidSourceFromWrap(wrap: HTMLElement): string {
+ const enc = wrap.getAttribute('data-mermaid-src')
+ if (enc) {
+ try {
+ return decodeURIComponent(enc)
+ } catch {
+ /* fall through */
+ }
+ }
+ const pre = wrap.querySelector
+
+ 大纲
+ {branchCount > 0 ? (
+
+ {' '}
+ · {branchCount - collapsedCount}/{branchCount} 已展开
+
+ ) : null}
+
+
+
+
+ - {tree.map(renderNode)}
${escapeHtml(msg)}\n\n${escapeHtml(source.slice(0, 2000))}`
+ console.warn("[Huangzhijun's Reader] mermaid render failed", err)
+ }
+ }
+}
+
+function escapeHtml(s: string): string {
+ return s
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+}
+
+function isMarkdownPath(p: string): boolean {
+ return /\.(md|markdown|mdown|mkd)$/i.test(p)
+}
+
+function linkHref(anchor: HTMLAnchorElement): string | null {
+ return anchor.getAttribute('href') ?? anchor.getAttribute('data-md-href')
+}
+
+type Props = {
+ html: string
+ articleRef?: React.Ref${body}${escaped}${langLabel}
`
+}
+
+const purifyOpts: Parameters${highlighted}${md.utils.escapeHtml(raw.slice(0, 8000))}
` + } + } catch (e) { + console.warn('[MyReader] markdown render failed', e) + return `${md.utils.escapeHtml(input.slice(0, 8000))}`
+ }
+}
+
+export type OutlineItem = {
+ level: number
+ text: string
+ displayText: string
+ /** 0-based source line */
+ line: number
+ slug: string
+}
+
+function outlineDisplayText(raw: string): string {
+ let s = raw
+ s = s.replace(/\*\*([^*]+)\*\*/g, '$1')
+ s = s.replace(/\*([^*]+)\*/g, '$1')
+ s = s.replace(/`([^`]+)`/g, '$1')
+ s = s.replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+ s = s.replace(/<[^>]+>/g, '')
+ s = s.replace(/\s+/g, ' ').trim()
+ return s
+}
+
+/** 分隔线、纯符号等不应出现在大纲。 */
+export function isValidOutlineHeading(displayText: string, rawLine: string): boolean {
+ const t = displayText.trim()
+ if (!t || t === '(空标题)') return false
+ if (/^[-—–_=~*`#>\s]+$/.test(t)) return false
+ const body = rawLine.replace(/^#{1,6}\s*/, '').trim()
+ if (/^[-—–_=~*\s]+$/.test(body)) return false
+ return true
+}
+
+/** 仅从 ATX `#` 标题提取；`line` 为 0-based。 */
+export function extractOutline(src: string): OutlineItem[] {
+ const input = typeof src === 'string' ? src : ''
+ const lines = input.split(/\r?\n/)
+ const out: OutlineItem[] = []
+ for (let i = 0; i < lines.length; i++) {
+ const raw = lines[i] ?? ''
+ const m = /^(#{1,6})\s+(.+)$/.exec(raw)
+ if (!m) continue
+ const level = m[1]!.length
+ const text = m[2]!.trim()
+ const displayText = outlineDisplayText(text) || '(空标题)'
+ if (!isValidOutlineHeading(displayText, raw)) continue
+ out.push({
+ level,
+ text,
+ displayText,
+ line: i,
+ slug: slugForLine(i)
+ })
+ }
+ return out
+}
+
+export type SourceLineRegion = {
+ line: number
+ lineEnd: number
+ el: HTMLElement
+}
+
+export function collectSourceLineRegions(article: HTMLElement): SourceLineRegion[] {
+ const nodes = article.querySelectorAll