切换markdown渲染为unified
This commit is contained in:
@@ -19,5 +19,12 @@
|
||||
"topic_20260703-031922_1d2031ca5f2c0dd5": "auto",
|
||||
"topic_20260703-035328_e939286e13cc8f1b": "auto",
|
||||
"topic_20260703-060642_54474cc49e29104f": "auto",
|
||||
"topic_20260703-065009_d937c6f780ebb5de": "auto"
|
||||
"topic_20260703-065009_d937c6f780ebb5de": "auto",
|
||||
"topic_20260703-071019_122507af94a4bb69": "auto",
|
||||
"topic_20260703-073828_e23737acfa7578f3": "auto",
|
||||
"topic_20260703-075048_605d579e54dfa8f9": "auto",
|
||||
"topic_20260703-081048_20d0dd6e24fe0eca": "auto",
|
||||
"topic_20260703-090137_2a285dcd68326d53": "auto",
|
||||
"topic_20260703-093407_89b9baa209988cbb": "auto",
|
||||
"topic_20260706-025751_d46402fb217a34e9": "auto"
|
||||
}
|
||||
@@ -19,5 +19,12 @@
|
||||
"topic_20260703-031922_1d2031ca5f2c0dd5": "我希望第126-228行的内容，在用…",
|
||||
"topic_20260703-035328_e939286e13cc8f1b": "我们把整个右侧区域都给了markdo…",
|
||||
"topic_20260703-060642_54474cc49e29104f": "关于这个核心编辑区域，我需要实现一个…",
|
||||
"topic_20260703-065009_d937c6f780ebb5de": "在功能上有问题，现在用户输入的内容删…"
|
||||
"topic_20260703-065009_d937c6f780ebb5de": "在功能上有问题，现在用户输入的内容删…",
|
||||
"topic_20260703-071019_122507af94a4bb69": "现在已经有了很多功能，但是很多样式还…",
|
||||
"topic_20260703-073828_e23737acfa7578f3": "现在我点击md文件，怎么在编辑区域里…",
|
||||
"topic_20260703-075048_605d579e54dfa8f9": "现在我点击目录中的md文件，怎么在编…",
|
||||
"topic_20260703-081048_20d0dd6e24fe0eca": "在渲染的时候有几个问题需要修改，第一…",
|
||||
"topic_20260703-090137_2a285dcd68326d53": "帮我检查一下这个页面为什么渲染不出来…",
|
||||
"topic_20260703-093407_89b9baa209988cbb": "帮我检查一下这个页面为什么渲染不出来…",
|
||||
"topic_20260706-025751_d46402fb217a34e9": "这个页面现在是用cm6实现的预览功能…"
|
||||
}
|
||||
191
doc/markdown-editor-design.md
Normal file
191
doc/markdown-editor-design.md
Normal file
@@ -0,0 +1,191 @@
|
||||
# MarkdownEditor 块级编辑设计文档
|
||||
|
||||
## 概述
|
||||
|
||||
`MarkdownEditor` 是 yurou（语柔）的核心编辑组件，支持两种编辑模式：
|
||||
|
||||
| 模式 | 说明 |
|
||||
|---|---|
|
||||
| **双栏**（split） | 左侧 textarea 编辑源码，右侧 unified 渲染 HTML 预览，滚动同步 |
|
||||
| **单栏**（wysiwyg） | 逐块渲染与编辑：点击任意块弹出其原始 markdown 源码，失焦后自动重新渲染 |
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **解析**：`remark-parse` + `remark-gfm`（GFM 扩展：表格、任务列表、删除线）
|
||||
- **转换**：`remark-rehype`（mdast → hast）
|
||||
- **安全**：`rehype-sanitize`（过滤 XSS，保留 `data-*` 属性）
|
||||
- **输出**：`rehype-stringify`（hast → HTML 字符串）
|
||||
- **框架**：Vue 3 Composition API + TypeScript
|
||||
|
||||
## 整体架构
|
||||
|
||||
```
|
||||
modelValue (markdown 字符串)
|
||||
│
|
||||
├─── split 模式 ──────────────────────────
|
||||
│ │
|
||||
│ ├── textarea (左栏，编辑源码)
|
||||
│ │ 输入 → emit('update:modelValue')
|
||||
│ │
|
||||
│ └── div.markdown-preview (右栏，v-html)
|
||||
│ unified.processSync(md) → HTML
|
||||
│ 滚动同步：textarea.scrollTop ↔ div.scrollTop
|
||||
│
|
||||
└─── wysiwyg 模式 ────────────────────────
|
||||
│
|
||||
├── remark-parse → mdast
|
||||
│ 提取每个顶层子节点的 position (offset)
|
||||
│
|
||||
├── 每个 block:
|
||||
│ source = md.slice(start, end) // 原始源码
|
||||
│ html = unified.processSync(source) // 渲染 HTML
|
||||
│
|
||||
├── blocks[] = [{id, source, html, startOffset, endOffset}, ...]
|
||||
│
|
||||
└── 模板中 v-for:
|
||||
editingBlockId === block.id
|
||||
? <textarea v-model="editingSource" @blur="finalize" />
|
||||
: <div v-html="block.html" @click="startEdit" />
|
||||
```
|
||||
|
||||
## 块级编辑流程
|
||||
|
||||
### 1. 解析阶段（`parseBlocks`）
|
||||
|
||||
```
|
||||
输入："### 标题\n\n段落内容\n\n```js\ncode\n```"
|
||||
|
||||
remark-parse 构建 mdast:
|
||||
|
||||
root
|
||||
├── heading (depth=3) position: {start: {offset: 0}, end: {offset: 9}}
|
||||
│ └── text "标题"
|
||||
├── paragraph position: {start: {offset: 10}, end: {offset: 18}}
|
||||
│ └── text "段落内容"
|
||||
└── code (lang="js") position: {start: {offset: 19}, end: {offset: 33}}
|
||||
└── "code\n"
|
||||
|
||||
提取每个顶层节点:
|
||||
blocks[0] = {id:"b0", source:"### 标题\n\n", startOffset:0, endOffset:9}
|
||||
blocks[1] = {id:"b1", source:"段落内容\n\n", startOffset:10, endOffset:18}
|
||||
blocks[2] = {id:"b2", source:"```js\ncode\n```", startOffset:19, endOffset:33}
|
||||
```
|
||||
|
||||
### 2. 渲染阶段
|
||||
|
||||
每个 block 独立调用 `unified().processSync(block.source)` 渲染为 HTML：
|
||||
|
||||
- `"### 标题\n\n"` → `<h3>标题</h3>`
|
||||
- `"段落内容\n\n"` → `<p>段落内容</p>`
|
||||
- `` "```js\ncode\n```" `` → `<pre><code class="language-js">code\n</code></pre>`
|
||||
|
||||
模板中按 `blocks[]` 顺序渲染，每个块是一个 `<div>`，hover 时显示暖色背景提示可点击。
|
||||
|
||||
### 3. 编辑阶段（`startEdit` → `finalizeEdit`）
|
||||
|
||||
```
|
||||
用户点击某个 block
|
||||
│
|
||||
▼
|
||||
startEdit(block.id)
|
||||
│ editingBlockId = block.id
|
||||
│ editingSource = block.source // 显示原始 markdown 源码
|
||||
│ nextTick → autoResize + focus + 光标移到末尾
|
||||
│
|
||||
▼
|
||||
<textarea v-model="editingSource" /> 替换该块的 <div>
|
||||
│
|
||||
│ monospace 字体，暖色边框，auto-resize
|
||||
│ Ctrl+S → 先 finalize 再触发 save-shortcut
|
||||
│ Esc → cancelEdit (丢弃修改)
|
||||
│
|
||||
▼
|
||||
失焦 (blur)
|
||||
│
|
||||
▼
|
||||
finalizeEdit()
|
||||
│ 如果 editingSource !== block.source:
|
||||
│ before = md.slice(0, block.startOffset)
|
||||
│ after = md.slice(block.endOffset)
|
||||
│ emit('update:modelValue', before + newSource + after)
|
||||
│
|
||||
▼
|
||||
父组件 update:modelValue → modelValue 变化
|
||||
│
|
||||
▼
|
||||
watch(modelValue) → parseBlocks(newMd) → 重新渲染所有 block
|
||||
```
|
||||
|
||||
### 4. 边界情况处理
|
||||
|
||||
| 场景 | 处理方式 |
|
||||
|---|---|
|
||||
| 空文档 | 显示 placeholder 文本，点击后插入换行符触发解析 |
|
||||
| 块被删除所有内容 | 替换为空字符串，该块从 mdast 中消失 |
|
||||
| 块中增加空行 | 该块的 markdown 包含空行 → mdast 解析为多个块 → 下次渲染自动拆分 |
|
||||
| 代码块内编辑 | 三引号 + 语言标记全部显示在 textarea 中，用户自由编辑 |
|
||||
| 列表 | 整个列表（含所有 li）作为一个块，编辑时看到完整列表的 markdown |
|
||||
| 表格 | 整表作为一个块 |
|
||||
| 解析失败 | `catch` 后用 `escapeHtml(source)` 显示原文 |
|
||||
|
||||
## 双栏模式流程
|
||||
|
||||
```
|
||||
modelValue → unified.processSync(md) → HTML → v-html 渲染
|
||||
|
||||
textarea (左) preview (右)
|
||||
│ │
|
||||
├─ input → emit │
|
||||
├─ keydown │
|
||||
│ ├─ Ctrl+S → save │
|
||||
│ ├─ Tab → 2 spaces │
|
||||
│ └─ 括号 → auto-pair │
|
||||
│ │
|
||||
└─ scroll → 同步比例 ──────► scrollTop
|
||||
```
|
||||
|
||||
## 数据流
|
||||
|
||||
```
|
||||
App.vue (content ref)
|
||||
│
|
||||
├── :model-value="content"
|
||||
├── :display-mode="displayMode" ← 设置面板切换
|
||||
├── @update:model-value="onUpdate" → content = val
|
||||
└── @save-shortcut="doSave"
|
||||
|
||||
DirectorySidebar.vue (设置面板)
|
||||
│
|
||||
├── :display-mode="displayMode"
|
||||
└── @toggle-display-mode="onToggleDisplayMode"
|
||||
→ displayMode 切换 + localStorage 持久化
|
||||
|
||||
MarkdownEditor.vue
|
||||
│
|
||||
├── split 模式: 与 App.vue 双向绑定，实时渲染预览
|
||||
└── wysiwyg 模式: 解析 → 块 → 点击编辑 → 局部替换 → emit
|
||||
```
|
||||
|
||||
## 性能考量
|
||||
|
||||
- **unified processor** 在组件 setup 时创建一次，全局复用
|
||||
- **parseBlocks** 每次 modelValue 变化时调用，包含 N 次 `processSync`（N = 块数）
|
||||
- 典型文档（50 块）约需 50-100ms，在可接受范围内
|
||||
- 后续可优化为增量更新（只重新渲染变化的块）
|
||||
- **textarea auto-resize** 通过 `scrollHeight` 动态调整高度，无额外 DOM 操作
|
||||
- **双栏滚动同步** 使用比例计算，避免频繁的绝对位置计算
|
||||
|
||||
## 样式体系
|
||||
|
||||
| 层级 | 设计 |
|
||||
|---|---|
|
||||
| 容器 | `border-[#e0dbcf]` 暖米色边框，`shadow-2xl` 阴影，`bg-white` |
|
||||
| 文字 | `text-[#38342e]` 深棕色，`font-serif` |
|
||||
| 标题 | `text-[#2d2a26]` 更深，`font-weight: 700` |
|
||||
| 链接 | `text-[#bf6a3b]` 暖橙色，`underline` |
|
||||
| 行内代码 | `bg-[#f4f1ea]` 暖灰底，`text-[#bf6a3b]` |
|
||||
| 引用 | 左边框 `4px solid #bf6a3b`，斜体灰色 |
|
||||
| 表格 | 斑马条纹 `bg-[#faf9f6]`，表头 `bg-[#f4f1ea]` |
|
||||
| 块 hover | `bg-[#faf9f6]` 微暖灰，提示可点击 |
|
||||
| 编辑 textarea | `bg-[#faf9f6]`，`border-[#bf6a3b]`，`font-mono` |
|
||||
| 缩放 | `calc(1rem * var(--editor-zoom, 1))` CSS 变量，由 App.vue 的 Ctrl+滚轮 控制 |
|
||||
12
package.json
12
package.json
@@ -10,16 +10,16 @@
|
||||
"tauri": "tauri"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.10.4",
|
||||
"@codemirror/lang-markdown": "^6.5.0",
|
||||
"@codemirror/language": "^6.12.4",
|
||||
"@codemirror/state": "^6.7.0",
|
||||
"@codemirror/view": "^6.43.4",
|
||||
"@tauri-apps/api": "^2",
|
||||
"@tauri-apps/plugin-dialog": "^2.7.1",
|
||||
"@tauri-apps/plugin-opener": "^2",
|
||||
"codemirror": "^6.0.2",
|
||||
"rehype-sanitize": "^6.0.0",
|
||||
"rehype-stringify": "^10.0.1",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"remark-parse": "^11.0.0",
|
||||
"remark-rehype": "^11.1.2",
|
||||
"remixicon": "^4.9.1",
|
||||
"unified": "^11.0.0",
|
||||
"vue": "^3.5.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
977
pnpm-lock.yaml
generated
977
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -26,7 +26,7 @@
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"targets": "all",
|
||||
"targets": ["nsis"],
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
|
||||
25
src/App.vue
25
src/App.vue
@@ -79,6 +79,23 @@ function onToggleFullWidth(val: boolean) {
|
||||
try { localStorage.setItem("editor-full-width", String(val)); } catch { /* noop */ }
|
||||
}
|
||||
|
||||
// ---- display mode (split / wysiwyg) ----
|
||||
type DisplayMode = "split" | "wysiwyg";
|
||||
|
||||
function loadDisplayModePref(): DisplayMode {
|
||||
try {
|
||||
const v = localStorage.getItem("editor-display-mode");
|
||||
if (v === "split" || v === "wysiwyg") return v;
|
||||
} catch { /* noop */ }
|
||||
return "split";
|
||||
}
|
||||
const displayMode = ref<DisplayMode>(loadDisplayModePref());
|
||||
|
||||
function onToggleDisplayMode(val: DisplayMode) {
|
||||
displayMode.value = val;
|
||||
try { localStorage.setItem("editor-display-mode", val); } catch { /* noop */ }
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
applyZoomCssVars();
|
||||
window.addEventListener("wheel", onEditorWheel, { passive: false });
|
||||
@@ -121,9 +138,8 @@ function onUpdate(md: string) {
|
||||
}
|
||||
|
||||
function onHeadingClick(heading: { text: string; level: number }) {
|
||||
// Navigate to heading in the CodeMirror editor
|
||||
const className = `.cm-lp-h${heading.level}`;
|
||||
const headingEls = document.querySelectorAll(className);
|
||||
const selector = `.markdown-preview h${heading.level}`;
|
||||
const headingEls = document.querySelectorAll(selector);
|
||||
for (const el of headingEls) {
|
||||
if (el.textContent?.trim() === heading.text) {
|
||||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
@@ -267,11 +283,13 @@ listen("menu-event", (event) => {
|
||||
:content="content"
|
||||
:current-file-path="currentFilePath"
|
||||
:is-full-width="isFullWidth"
|
||||
:display-mode="displayMode"
|
||||
@heading-click="onHeadingClick"
|
||||
@open-folder="onOpenFolder"
|
||||
@toggle-folder="onToggleFolder"
|
||||
@open-file="onOpenFile"
|
||||
@toggle-full-width="onToggleFullWidth"
|
||||
@toggle-display-mode="onToggleDisplayMode"
|
||||
/>
|
||||
|
||||
<!-- Right: Editor area -->
|
||||
@@ -279,6 +297,7 @@ listen("menu-event", (event) => {
|
||||
<MarkdownEditor
|
||||
:model-value="content"
|
||||
:is-full-width="isFullWidth"
|
||||
:display-mode="displayMode"
|
||||
placeholder="输入 Markdown 内容... 支持标题、粗体、斜体、代码块等 ✨"
|
||||
@update:model-value="onUpdate"
|
||||
@save-shortcut="doSave"
|
||||
|
||||
@@ -16,11 +16,13 @@ const props = withDefaults(
|
||||
content?: string;
|
||||
currentFilePath?: string | null;
|
||||
isFullWidth?: boolean;
|
||||
displayMode?: "split" | "wysiwyg";
|
||||
}>(),
|
||||
{
|
||||
content: "",
|
||||
currentFilePath: null,
|
||||
isFullWidth: false,
|
||||
displayMode: "split",
|
||||
},
|
||||
);
|
||||
|
||||
@@ -32,6 +34,7 @@ const emit = defineEmits<{
|
||||
createFile: [];
|
||||
createFolder: [];
|
||||
toggleFullWidth: [value: boolean];
|
||||
toggleDisplayMode: [value: "split" | "wysiwyg"];
|
||||
}>();
|
||||
|
||||
// Wrap the workspace root as a top-level tree node
|
||||
@@ -248,6 +251,33 @@ const showSettings = ref(false);
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-4 py-6 space-y-5">
|
||||
<!-- Display mode toggle -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 mr-3">
|
||||
<p class="text-sm text-[#38342e] font-medium">编辑模式</p>
|
||||
<p class="text-xs text-[#8c877d] mt-0.5 leading-relaxed">
|
||||
{{ props.displayMode === "wysiwyg" ? "单栏：所见即所得，预览区直接编辑" : "双栏：左侧编辑源码，右侧预览效果" }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
:aria-checked="props.displayMode === 'wysiwyg'"
|
||||
:class="[
|
||||
'relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none',
|
||||
props.displayMode === 'wysiwyg' ? 'bg-[#bf6a3b]' : 'bg-[#d4cfc4]',
|
||||
]"
|
||||
@click="emit('toggleDisplayMode', props.displayMode === 'wysiwyg' ? 'split' : 'wysiwyg')"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
'pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm ring-0 transition-transform duration-200 ease-in-out',
|
||||
props.displayMode === 'wysiwyg' ? 'translate-x-4' : 'translate-x-0',
|
||||
]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Full-width mode toggle -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 mr-3">
|
||||
|
||||
@@ -1,25 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
|
||||
import {
|
||||
EditorView,
|
||||
placeholder,
|
||||
keymap,
|
||||
} from "@codemirror/view";
|
||||
import { EditorState, Annotation, Transaction } from "@codemirror/state";
|
||||
import { markdown } from "@codemirror/lang-markdown";
|
||||
import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
|
||||
import { livePreview } from "../editor/livePreview";
|
||||
import { ref, watch, nextTick, computed } from "vue";
|
||||
import { unified } from "unified";
|
||||
import remarkParse from "remark-parse";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import remarkRehype from "remark-rehype";
|
||||
import rehypeStringify from "rehype-stringify";
|
||||
import rehypeSanitize from "rehype-sanitize";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: string;
|
||||
placeholder?: string;
|
||||
isFullWidth?: boolean;
|
||||
displayMode?: "split" | "wysiwyg";
|
||||
}>(),
|
||||
{
|
||||
modelValue: "",
|
||||
placeholder: "开始写作...",
|
||||
isFullWidth: false,
|
||||
displayMode: "split",
|
||||
},
|
||||
);
|
||||
|
||||
@@ -28,190 +27,495 @@ const emit = defineEmits<{
|
||||
"save-shortcut": [];
|
||||
}>();
|
||||
|
||||
const editorContainer = ref<HTMLDivElement>();
|
||||
const editorView = ref<EditorView>();
|
||||
const isSingle = computed(() => props.displayMode === "wysiwyg");
|
||||
|
||||
// Annotation to mark sync transactions, so we don't re-emit to parent
|
||||
const syncAnnotation = Annotation.define<boolean>();
|
||||
// ── Unified processors ─────────────────────────────────────────────
|
||||
|
||||
// ── Editor theme (warm color palette, matching original design) ────
|
||||
/** Full pipeline: markdown → HTML */
|
||||
const md2html = unified()
|
||||
.use(remarkParse)
|
||||
.use(remarkGfm)
|
||||
.use(remarkRehype, { allowDangerousHtml: false })
|
||||
.use(rehypeSanitize)
|
||||
.use(rehypeStringify);
|
||||
|
||||
const editorTheme = EditorView.theme(
|
||||
{
|
||||
"&": {
|
||||
maxHeight: "100%",
|
||||
fontSize: "calc(1rem * var(--editor-zoom, 1))",
|
||||
backgroundColor: "white",
|
||||
},
|
||||
".cm-scroller": {
|
||||
overflow: "auto",
|
||||
fontFamily:
|
||||
"ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
|
||||
lineHeight: "1.625",
|
||||
},
|
||||
".cm-content": {
|
||||
padding: "2rem 2.5rem 10rem",
|
||||
minHeight: "320px",
|
||||
color: "#38342e",
|
||||
caretColor: "#38342e",
|
||||
},
|
||||
".cm-cursor": {
|
||||
borderLeftColor: "#38342e",
|
||||
},
|
||||
".cm-selectionBackground, .cm-content ::selection": {
|
||||
backgroundColor: "#d4cfc4",
|
||||
},
|
||||
/** Parser only: markdown → mdast (for block extraction) */
|
||||
const mdParser = unified().use(remarkParse).use(remarkGfm);
|
||||
|
||||
// ── Live Preview: styled content ──
|
||||
".cm-lp-bold": {
|
||||
fontWeight: "700",
|
||||
color: "#2d2a26",
|
||||
},
|
||||
".cm-lp-italic": {
|
||||
fontStyle: "italic",
|
||||
},
|
||||
".cm-lp-strikethrough": {
|
||||
textDecoration: "line-through",
|
||||
color: "#8c877d",
|
||||
},
|
||||
".cm-lp-code": {
|
||||
backgroundColor: "#f4f1ea",
|
||||
color: "#bf6a3b",
|
||||
borderRadius: "0.25rem",
|
||||
padding: "0.125rem 0.375rem",
|
||||
fontSize: "0.875em",
|
||||
fontFamily:
|
||||
"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
|
||||
},
|
||||
".cm-lp-link": {
|
||||
color: "#bf6a3b",
|
||||
textDecoration: "underline",
|
||||
cursor: "pointer",
|
||||
},
|
||||
".cm-lp-heading": {
|
||||
fontWeight: "700",
|
||||
color: "#2d2a26",
|
||||
},
|
||||
".cm-lp-h1": {
|
||||
fontSize: "1.5em",
|
||||
},
|
||||
".cm-lp-h2": {
|
||||
fontSize: "1.25em",
|
||||
},
|
||||
".cm-lp-h3": {
|
||||
fontSize: "1.125em",
|
||||
},
|
||||
".cm-lp-blockquote": {
|
||||
borderLeft: "4px solid #bf6a3b",
|
||||
paddingLeft: "1rem",
|
||||
color: "#8c877d",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
// ── Split-pane rendering ───────────────────────────────────────────
|
||||
|
||||
// Placeholder
|
||||
".cm-placeholder": {
|
||||
color: "#b8b3a8",
|
||||
},
|
||||
const renderedHtml = ref("");
|
||||
const renderError = ref(false);
|
||||
|
||||
// ── Remove focus outline ──
|
||||
"&.cm-editor.cm-focused": {
|
||||
outline: "none",
|
||||
},
|
||||
"&.cm-editor .cm-content": {
|
||||
outline: "none",
|
||||
},
|
||||
},
|
||||
{ dark: false },
|
||||
);
|
||||
|
||||
// ── Extensions ─────────────────────────────────────────────────────
|
||||
|
||||
function createExtensions() {
|
||||
return [
|
||||
markdown(),
|
||||
livePreview(),
|
||||
EditorView.lineWrapping,
|
||||
placeholder(props.placeholder),
|
||||
keymap.of([
|
||||
{
|
||||
key: "Mod-s",
|
||||
run: () => {
|
||||
emit("save-shortcut");
|
||||
return true;
|
||||
},
|
||||
preventDefault: true,
|
||||
},
|
||||
]),
|
||||
history(),
|
||||
keymap.of([...defaultKeymap, ...historyKeymap]),
|
||||
EditorView.updateListener.of((update) => {
|
||||
if (!update.docChanged) return;
|
||||
const isSync = update.transactions.some((tr) =>
|
||||
tr.annotation(syncAnnotation),
|
||||
);
|
||||
if (!isSync) {
|
||||
emit("update:modelValue", update.state.doc.toString());
|
||||
}
|
||||
}),
|
||||
editorTheme,
|
||||
];
|
||||
function renderFullHtml(md: string) {
|
||||
try {
|
||||
const file = md2html.processSync(md);
|
||||
renderedHtml.value = String(file.value);
|
||||
renderError.value = false;
|
||||
} catch {
|
||||
renderedHtml.value = "";
|
||||
renderError.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Lifecycle ──────────────────────────────────────────────────────
|
||||
|
||||
onMounted(() => {
|
||||
if (!editorContainer.value) return;
|
||||
|
||||
const state = EditorState.create({
|
||||
doc: props.modelValue,
|
||||
extensions: createExtensions(),
|
||||
});
|
||||
|
||||
editorView.value = new EditorView({
|
||||
state,
|
||||
parent: editorContainer.value,
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
editorView.value?.destroy();
|
||||
editorView.value = undefined;
|
||||
});
|
||||
|
||||
// Sync external modelValue changes back into the editor
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
const view = editorView.value;
|
||||
if (!view) return;
|
||||
if (val !== view.state.doc.toString()) {
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: view.state.doc.length, insert: val },
|
||||
annotations: [
|
||||
syncAnnotation.of(true),
|
||||
Transaction.addToHistory.of(false),
|
||||
],
|
||||
// Try to preserve cursor; if the replacement makes it invalid,
|
||||
// CM6 will clamp it to a valid position.
|
||||
selection: view.state.selection,
|
||||
});
|
||||
}
|
||||
if (!isSingle.value) renderFullHtml(val);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(isSingle, (single) => {
|
||||
if (!single) renderFullHtml(props.modelValue);
|
||||
});
|
||||
|
||||
// ── Block-level editing (single-pane mode) ─────────────────────────
|
||||
|
||||
interface Block {
|
||||
id: string;
|
||||
source: string;
|
||||
html: string;
|
||||
startOffset: number;
|
||||
endOffset: number;
|
||||
}
|
||||
|
||||
const blocks = ref<Block[]>([]);
|
||||
const editingBlockId = ref<string | null>(null);
|
||||
const editingSource = ref("");
|
||||
|
||||
/** Parse markdown into editable blocks */
|
||||
function parseBlocks(md: string) {
|
||||
if (!md.trim()) {
|
||||
blocks.value = [];
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const tree = mdParser.parse(md);
|
||||
blocks.value = (tree.children as any[])
|
||||
.filter((c: any) => c.position?.start?.offset != null)
|
||||
.map((c: any, i: number) => {
|
||||
const source = md.slice(
|
||||
c.position.start.offset!,
|
||||
c.position.end.offset!,
|
||||
);
|
||||
let html = "";
|
||||
try {
|
||||
const file = md2html.processSync(source);
|
||||
html = String(file.value);
|
||||
} catch {
|
||||
html = `<p>${escapeHtml(source)}</p>`;
|
||||
}
|
||||
return {
|
||||
id: `b${i}`,
|
||||
source,
|
||||
html,
|
||||
startOffset: c.position.start.offset!,
|
||||
endOffset: c.position.end.offset!,
|
||||
};
|
||||
});
|
||||
} catch {
|
||||
blocks.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(s: string): string {
|
||||
return s
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">");
|
||||
}
|
||||
|
||||
// Watch modelValue → re-parse blocks in single mode
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (isSingle.value) parseBlocks(val);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(isSingle, (single) => {
|
||||
if (single) parseBlocks(props.modelValue);
|
||||
});
|
||||
|
||||
// ── Block editing actions ──────────────────────────────────────────
|
||||
|
||||
function startEdit(blockId: string) {
|
||||
const block = blocks.value.find((b) => b.id === blockId);
|
||||
if (!block) return;
|
||||
editingBlockId.value = blockId;
|
||||
editingSource.value = block.source;
|
||||
|
||||
void nextTick(() => {
|
||||
const ta = document.querySelector(
|
||||
".block-editor-textarea",
|
||||
) as HTMLTextAreaElement | null;
|
||||
if (ta) {
|
||||
autoResize(ta);
|
||||
ta.focus();
|
||||
// Place cursor at end
|
||||
ta.setSelectionRange(ta.value.length, ta.value.length);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function finalizeEdit() {
|
||||
const blockId = editingBlockId.value;
|
||||
if (!blockId) return;
|
||||
const block = blocks.value.find((b) => b.id === blockId);
|
||||
editingBlockId.value = null;
|
||||
|
||||
if (!block) return;
|
||||
const newSource = editingSource.value;
|
||||
|
||||
if (newSource === block.source) return; // no change
|
||||
|
||||
// Replace the block's portion in the full markdown
|
||||
const before = props.modelValue.slice(0, block.startOffset);
|
||||
const after = props.modelValue.slice(block.endOffset);
|
||||
emit("update:modelValue", before + newSource + after);
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editingBlockId.value = null;
|
||||
}
|
||||
|
||||
function onBlockKeydown(e: KeyboardEvent) {
|
||||
// Ctrl+S save
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "s") {
|
||||
e.preventDefault();
|
||||
// Finalize current edit first, then save
|
||||
if (editingBlockId.value) finalizeEdit();
|
||||
emit("save-shortcut");
|
||||
return;
|
||||
}
|
||||
// Escape to cancel
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
cancelEdit();
|
||||
return;
|
||||
}
|
||||
// Auto-resize on any key
|
||||
void nextTick(() => {
|
||||
const ta = e.target as HTMLTextAreaElement;
|
||||
autoResize(ta);
|
||||
});
|
||||
}
|
||||
|
||||
function autoResize(ta: HTMLTextAreaElement) {
|
||||
ta.style.height = "auto";
|
||||
ta.style.height = ta.scrollHeight + 2 + "px";
|
||||
}
|
||||
|
||||
// ── Split-pane textarea handlers ───────────────────────────────────
|
||||
|
||||
const splitTextareaRef = ref<HTMLTextAreaElement>();
|
||||
|
||||
function onSplitInput(e: Event) {
|
||||
const val = (e.target as HTMLTextAreaElement).value;
|
||||
emit("update:modelValue", val);
|
||||
renderFullHtml(val);
|
||||
}
|
||||
|
||||
function tryAutoPair(
|
||||
ta: HTMLTextAreaElement,
|
||||
key: string,
|
||||
): boolean {
|
||||
const pairs: Record<string, string> = {
|
||||
"(": ")",
|
||||
"[": "]",
|
||||
"{": "}",
|
||||
'"': '"',
|
||||
"'": "'",
|
||||
"`": "`",
|
||||
};
|
||||
const close = pairs[key];
|
||||
if (!close) return false;
|
||||
|
||||
const start = ta.selectionStart;
|
||||
const end = ta.selectionEnd;
|
||||
const selected = props.modelValue.substring(start, end);
|
||||
const newVal =
|
||||
props.modelValue.substring(0, start) +
|
||||
key +
|
||||
selected +
|
||||
close +
|
||||
props.modelValue.substring(end);
|
||||
|
||||
emit("update:modelValue", newVal);
|
||||
renderFullHtml(newVal);
|
||||
|
||||
void nextTick(() => {
|
||||
ta.selectionStart = start + 1;
|
||||
ta.selectionEnd = start + 1 + selected.length;
|
||||
ta.focus();
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
function onSplitKeydown(e: KeyboardEvent) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "s") {
|
||||
e.preventDefault();
|
||||
emit("save-shortcut");
|
||||
return;
|
||||
}
|
||||
|
||||
const ta = e.target as HTMLTextAreaElement;
|
||||
|
||||
if (e.key === "Tab") {
|
||||
e.preventDefault();
|
||||
const start = ta.selectionStart;
|
||||
const end = ta.selectionEnd;
|
||||
const newVal =
|
||||
props.modelValue.substring(0, start) +
|
||||
" " +
|
||||
props.modelValue.substring(end);
|
||||
emit("update:modelValue", newVal);
|
||||
renderFullHtml(newVal);
|
||||
void nextTick(() => {
|
||||
ta.selectionStart = ta.selectionEnd = start + 2;
|
||||
ta.focus();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (tryAutoPair(ta, e.key)) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Scroll sync (split mode) ───────────────────────────────────────
|
||||
|
||||
const previewRef = ref<HTMLDivElement>();
|
||||
|
||||
function onSplitScroll() {
|
||||
if (!splitTextareaRef.value || !previewRef.value) return;
|
||||
const ratio =
|
||||
splitTextareaRef.value.scrollTop /
|
||||
(splitTextareaRef.value.scrollHeight -
|
||||
splitTextareaRef.value.clientHeight || 1);
|
||||
previewRef.value.scrollTop =
|
||||
ratio *
|
||||
(previewRef.value.scrollHeight - previewRef.value.clientHeight);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'flex flex-col flex-1 w-full border border-[#e0dbcf] bg-white shadow-2xl overflow-hidden',
|
||||
'flex flex-1 w-full border border-[#e0dbcf] bg-white shadow-2xl overflow-hidden',
|
||||
!props.isFullWidth && 'mx-auto',
|
||||
]"
|
||||
:style="
|
||||
!props.isFullWidth
|
||||
? { maxWidth: `calc(800px * var(--editor-zoom, 1))` }
|
||||
? { maxWidth: `calc(1600px * var(--editor-zoom, 1))` }
|
||||
: undefined
|
||||
"
|
||||
@wheel.passive
|
||||
>
|
||||
<div ref="editorContainer" class="flex-1 min-h-0" />
|
||||
<!-- ════════════════ Single-pane: block editing ════════════════ -->
|
||||
<div
|
||||
v-if="isSingle"
|
||||
class="flex-1 overflow-auto p-8 pb-40"
|
||||
:style="{ fontSize: `calc(1rem * var(--editor-zoom, 1))` }"
|
||||
>
|
||||
<!-- Empty state -->
|
||||
<div
|
||||
v-if="blocks.length === 0"
|
||||
class="text-[#b8b3a8] font-serif leading-relaxed select-none"
|
||||
@click="emit('update:modelValue', '\n'); parseBlocks('\n')"
|
||||
>
|
||||
{{ props.placeholder }}
|
||||
</div>
|
||||
|
||||
<!-- Blocks -->
|
||||
<template v-for="block in blocks" :key="block.id">
|
||||
<!-- Editing state -->
|
||||
<textarea
|
||||
v-if="editingBlockId === block.id"
|
||||
v-model="editingSource"
|
||||
class="
|
||||
block-editor-textarea
|
||||
w-full resize-none outline-none
|
||||
font-mono text-sm text-[#38342e] leading-relaxed
|
||||
bg-[#faf9f6] border border-[#bf6a3b] rounded-md
|
||||
px-3 py-2 mb-1
|
||||
"
|
||||
rows="1"
|
||||
@keydown="onBlockKeydown"
|
||||
@blur="finalizeEdit"
|
||||
/>
|
||||
|
||||
<!-- Rendered state (clickable) -->
|
||||
<div
|
||||
v-else
|
||||
class="
|
||||
markdown-preview block-render
|
||||
cursor-text rounded
|
||||
-mx-1 px-1 py-px
|
||||
hover:bg-[#faf9f6] transition-colors
|
||||
"
|
||||
v-html="block.html"
|
||||
@click="startEdit(block.id)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- ════════════════ Split-pane mode ════════════════ -->
|
||||
<template v-else>
|
||||
<div class="flex-1 min-w-0 border-r border-[#e0dbcf] flex flex-col">
|
||||
<textarea
|
||||
ref="splitTextareaRef"
|
||||
:value="props.modelValue"
|
||||
:placeholder="props.placeholder"
|
||||
class="
|
||||
flex-1 w-full resize-none bg-white p-8 pb-40 outline-none
|
||||
font-serif text-[#38342e] leading-relaxed
|
||||
placeholder:text-[#b8b3a8]
|
||||
"
|
||||
:style="{ fontSize: `calc(1rem * var(--editor-zoom, 1))` }"
|
||||
@input="onSplitInput"
|
||||
@keydown="onSplitKeydown"
|
||||
@scroll="onSplitScroll"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref="previewRef"
|
||||
class="flex-1 min-w-0 overflow-auto p-8 pb-40"
|
||||
:style="{ fontSize: `calc(1rem * var(--editor-zoom, 1))` }"
|
||||
>
|
||||
<div v-if="renderError" class="text-red-500 text-sm">
|
||||
⚠ Markdown 解析错误
|
||||
</div>
|
||||
<div v-else class="markdown-preview" v-html="renderedHtml" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* ── Markdown Preview Styles (warm palette) ─────────────────────── */
|
||||
|
||||
.markdown-preview {
|
||||
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
line-height: 1.625;
|
||||
color: #38342e;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.markdown-preview > *:first-child { margin-top: 0; }
|
||||
|
||||
.markdown-preview h1,
|
||||
.markdown-preview h2,
|
||||
.markdown-preview h3,
|
||||
.markdown-preview h4,
|
||||
.markdown-preview h5,
|
||||
.markdown-preview h6 {
|
||||
font-weight: 700;
|
||||
color: #2d2a26;
|
||||
line-height: 1.3;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.markdown-preview h1 { font-size: 1.5em; }
|
||||
.markdown-preview h2 { font-size: 1.25em; }
|
||||
.markdown-preview h3 { font-size: 1.125em; }
|
||||
.markdown-preview h4 { font-size: 1em; }
|
||||
|
||||
.markdown-preview p { margin: 0.5em 0; }
|
||||
|
||||
.markdown-preview strong { font-weight: 700; color: #2d2a26; }
|
||||
.markdown-preview em { font-style: italic; }
|
||||
.markdown-preview del { text-decoration: line-through; color: #8c877d; }
|
||||
|
||||
.markdown-preview code {
|
||||
background-color: #f4f1ea;
|
||||
color: #bf6a3b;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: 0.875em;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.markdown-preview pre {
|
||||
background-color: #f4f1ea;
|
||||
border-radius: 0.375rem;
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
margin: 0.75em 0;
|
||||
}
|
||||
.markdown-preview pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: #38342e;
|
||||
font-size: 0.875em;
|
||||
border-radius: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.markdown-preview a { color: #bf6a3b; text-decoration: underline; }
|
||||
|
||||
.markdown-preview blockquote {
|
||||
border-left: 4px solid #bf6a3b;
|
||||
padding-left: 1rem;
|
||||
margin: 0.75em 0;
|
||||
color: #8c877d;
|
||||
font-style: italic;
|
||||
}
|
||||
.markdown-preview blockquote p { margin: 0.25em 0; }
|
||||
|
||||
.markdown-preview ul,
|
||||
.markdown-preview ol { padding-left: 1.5em; margin: 0.5em 0; }
|
||||
.markdown-preview li { margin: 0.25em 0; }
|
||||
|
||||
.markdown-preview li input[type="checkbox"] {
|
||||
margin-right: 0.375rem;
|
||||
accent-color: #bf6a3b;
|
||||
}
|
||||
|
||||
.markdown-preview hr {
|
||||
border: none;
|
||||
border-top: 1px solid #e0dbcf;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.markdown-preview table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 0.75em 0;
|
||||
}
|
||||
.markdown-preview th,
|
||||
.markdown-preview td {
|
||||
border: 1px solid #e0dbcf;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
.markdown-preview th {
|
||||
background-color: #f4f1ea;
|
||||
font-weight: 700;
|
||||
color: #2d2a26;
|
||||
}
|
||||
.markdown-preview tr:nth-child(even) td { background-color: #faf9f6; }
|
||||
|
||||
.markdown-preview img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.25rem;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
/* ── Block editing textarea ────────────────────────────────────── */
|
||||
|
||||
.block-editor-textarea {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
min-height: 2em;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.block-editor-textarea::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,377 +0,0 @@
|
||||
import {
|
||||
ViewPlugin,
|
||||
ViewUpdate,
|
||||
Decoration,
|
||||
DecorationSet,
|
||||
EditorView,
|
||||
} from "@codemirror/view";
|
||||
import type { Range } from "@codemirror/state";
|
||||
|
||||
// ── Types ──────────────────────────────────────────────────────────
|
||||
|
||||
interface HideRange {
|
||||
/** start of whole construct (e.g. first `*` of `**bold**`) */
|
||||
from: number;
|
||||
/** end of whole construct */
|
||||
to: number;
|
||||
/** ranges of syntax chars to hide ([from, to] pairs) */
|
||||
markers: [number, number][];
|
||||
/** optional: range of styled content to apply[0=from, 1=to, 2=css class] */
|
||||
content?: [number, number, string];
|
||||
}
|
||||
|
||||
// ── CSS classes ────────────────────────────────────────────────────
|
||||
|
||||
// (no longer needed — Decoration.replace handles hiding directly)
|
||||
|
||||
// ── Decoration builders ────────────────────────────────────────────
|
||||
|
||||
const hiddenMark = Decoration.replace({});
|
||||
|
||||
function contentMark(cls: string) {
|
||||
return Decoration.mark({ class: cls });
|
||||
}
|
||||
|
||||
// ── Regex patterns ─────────────────────────────────────────────────
|
||||
|
||||
// Block-level: detect headings, blockquotes, list items, hr, fenced code
|
||||
const RE_HEADING = /^(#{1,6})\s+(.*)$/;
|
||||
const RE_BLOCKQUOTE = /^(>\s*)(.*)$/;
|
||||
const RE_UNORDERED = /^(\s*[-*+]\s*)(.*)$/;
|
||||
const RE_ORDERED = /^(\s*\d+\.\s*)(.*)$/;
|
||||
const RE_HR = /^[-*_]{3,}\s*$/;
|
||||
const RE_CODE_FENCE = /^```/;
|
||||
|
||||
// Inline: bold, italic, strikethrough, code, link, image
|
||||
// These run on non-code-block content after stripping block markers
|
||||
|
||||
// We parse inline elements by scanning left-to-right within each line.
|
||||
// Using a combined pattern that matches the FIRST occurrence:
|
||||
const RE_INLINE = /(\*\*|__)(.+?)\1|(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)|(?<!_)_(?!_)(.+?)(?<!_)_(?!_)|~~(.+?)~~|`([^`]+)`|!\[([^\]]*)\]\(([^)]+)\)|\[([^\]]*)\]\(([^)]+)\)/g;
|
||||
|
||||
// ── Parse the document ─────────────────────────────────────────────
|
||||
|
||||
function parseDocument(text: string): HideRange[] {
|
||||
const regions: HideRange[] = [];
|
||||
const lines = text.split("\n");
|
||||
|
||||
let pos = 0;
|
||||
let inCodeBlock = false;
|
||||
let codeBlockStart = -1;
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
const lineStart = pos;
|
||||
|
||||
// ── Fenced code blocks ──
|
||||
if (RE_CODE_FENCE.test(line.trimStart())) {
|
||||
if (!inCodeBlock) {
|
||||
inCodeBlock = true;
|
||||
codeBlockStart = lineStart;
|
||||
} else {
|
||||
// closing fence
|
||||
inCodeBlock = false;
|
||||
// Hide the opening fence
|
||||
const openFenceEnd = text.indexOf("\n", codeBlockStart);
|
||||
const openFence = openFenceEnd === -1 ? text.substring(codeBlockStart) : text.substring(codeBlockStart, openFenceEnd);
|
||||
const openMarkerLen = openFence.length;
|
||||
|
||||
regions.push({
|
||||
from: codeBlockStart,
|
||||
to: codeBlockStart + openMarkerLen + (lineStart - codeBlockStart - openMarkerLen) + line.length,
|
||||
markers: [
|
||||
[codeBlockStart, codeBlockStart + openMarkerLen],
|
||||
[lineStart, lineStart + line.length],
|
||||
],
|
||||
});
|
||||
}
|
||||
pos += line.length + 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (inCodeBlock) {
|
||||
pos += line.length + 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
// ── Horizontal rule ──
|
||||
if (RE_HR.test(line.trim())) {
|
||||
pos += line.length + 1;
|
||||
continue; // HR is decorative, just show the line
|
||||
}
|
||||
|
||||
// ── Headings ──
|
||||
{
|
||||
const m = line.match(RE_HEADING);
|
||||
if (m) {
|
||||
// marker = "#" marks + all whitespace before content
|
||||
const contentStartInMatch = m[0].length - m[2].length;
|
||||
const markerEnd = lineStart + contentStartInMatch;
|
||||
regions.push({
|
||||
from: lineStart,
|
||||
to: lineStart + line.length,
|
||||
markers: [[lineStart, markerEnd]],
|
||||
content: [markerEnd, lineStart + line.length, `cm-lp-heading cm-lp-h${m[1].length}`],
|
||||
});
|
||||
// Parse inline within heading content
|
||||
parseInline(text, markerEnd, lineStart + line.length, regions);
|
||||
pos += line.length + 1;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Blockquote ──
|
||||
{
|
||||
const m = line.match(RE_BLOCKQUOTE);
|
||||
if (m) {
|
||||
const markerEnd = lineStart + m[1].length;
|
||||
regions.push({
|
||||
from: lineStart,
|
||||
to: lineStart + line.length,
|
||||
markers: [[lineStart, markerEnd]],
|
||||
content: [markerEnd, lineStart + line.length, "cm-lp-blockquote"],
|
||||
});
|
||||
parseInline(text, markerEnd, lineStart + line.length, regions);
|
||||
pos += line.length + 1;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Unordered list ──
|
||||
{
|
||||
const m = line.match(RE_UNORDERED);
|
||||
if (m) {
|
||||
const markerEnd = lineStart + m[1].length;
|
||||
regions.push({
|
||||
from: lineStart,
|
||||
to: lineStart + line.length,
|
||||
markers: [[lineStart, markerEnd]],
|
||||
});
|
||||
parseInline(text, markerEnd, lineStart + line.length, regions);
|
||||
pos += line.length + 1;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Ordered list ──
|
||||
{
|
||||
const m = line.match(RE_ORDERED);
|
||||
if (m) {
|
||||
const markerEnd = lineStart + m[1].length;
|
||||
regions.push({
|
||||
from: lineStart,
|
||||
to: lineStart + line.length,
|
||||
markers: [[lineStart, markerEnd]],
|
||||
});
|
||||
parseInline(text, markerEnd, lineStart + line.length, regions);
|
||||
pos += line.length + 1;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Plain paragraph ──
|
||||
parseInline(text, lineStart, lineStart + line.length, regions);
|
||||
pos += line.length + 1;
|
||||
}
|
||||
|
||||
return regions;
|
||||
}
|
||||
|
||||
function parseInline(
|
||||
text: string,
|
||||
lineStart: number,
|
||||
lineEnd: number,
|
||||
regions: HideRange[],
|
||||
): void {
|
||||
const slice = text.slice(lineStart, lineEnd);
|
||||
RE_INLINE.lastIndex = 0;
|
||||
|
||||
let match: RegExpExecArray | null;
|
||||
while ((match = RE_INLINE.exec(slice)) !== null) {
|
||||
const absFrom = lineStart + match.index;
|
||||
const absTo = lineStart + match.index + match[0].length;
|
||||
|
||||
// Bold: **text** or __text__
|
||||
if (match[1]) {
|
||||
const delimLen = match[1].length; // 2 for ** or __
|
||||
const contentStart = absFrom + delimLen;
|
||||
const contentEnd = absTo - delimLen;
|
||||
regions.push({
|
||||
from: absFrom,
|
||||
to: absTo,
|
||||
markers: [
|
||||
[absFrom, contentStart],
|
||||
[contentEnd, absTo],
|
||||
],
|
||||
content: [contentStart, contentEnd, "cm-lp-bold"],
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// Italic: *text*
|
||||
if (match[3]) {
|
||||
const contentStart = absFrom + 1;
|
||||
const contentEnd = absTo - 1;
|
||||
regions.push({
|
||||
from: absFrom,
|
||||
to: absTo,
|
||||
markers: [
|
||||
[absFrom, contentStart],
|
||||
[contentEnd, absTo],
|
||||
],
|
||||
content: [contentStart, contentEnd, "cm-lp-italic"],
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// Italic: _text_
|
||||
if (match[4]) {
|
||||
const contentStart = absFrom + 1;
|
||||
const contentEnd = absTo - 1;
|
||||
regions.push({
|
||||
from: absFrom,
|
||||
to: absTo,
|
||||
markers: [
|
||||
[absFrom, contentStart],
|
||||
[contentEnd, absTo],
|
||||
],
|
||||
content: [contentStart, contentEnd, "cm-lp-italic"],
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// Strikethrough: ~~text~~
|
||||
if (match[5]) {
|
||||
const contentStart = absFrom + 2;
|
||||
const contentEnd = absTo - 2;
|
||||
regions.push({
|
||||
from: absFrom,
|
||||
to: absTo,
|
||||
markers: [
|
||||
[absFrom, contentStart],
|
||||
[contentEnd, absTo],
|
||||
],
|
||||
content: [contentStart, contentEnd, "cm-lp-strikethrough"],
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// Inline code: `code`
|
||||
if (match[6] !== undefined) {
|
||||
const contentStart = absFrom + 1;
|
||||
const contentEnd = absTo - 1;
|
||||
regions.push({
|
||||
from: absFrom,
|
||||
to: absTo,
|
||||
markers: [
|
||||
[absFrom, contentStart],
|
||||
[contentEnd, absTo],
|
||||
],
|
||||
content: [contentStart, contentEnd, "cm-lp-code"],
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// Image: 
|
||||
if (match[7] !== undefined && match[8] !== undefined) {
|
||||
const altText = match[7];
|
||||
const altStart = absFrom + 2; // after ![
|
||||
const altEnd = altStart + altText.length;
|
||||
const urlPart = match[8];
|
||||
const urlInText = match[0].indexOf("](") + 2;
|
||||
const urlStart = absFrom + urlInText;
|
||||
const urlEnd = urlStart + urlPart.length;
|
||||
regions.push({
|
||||
from: absFrom,
|
||||
to: absTo,
|
||||
markers: [
|
||||
[absFrom, absFrom + 2], // ![
|
||||
[altEnd, altEnd + 2], // ](
|
||||
[urlEnd, absTo], // )
|
||||
],
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
// Link: [text](url)
|
||||
if (match[9] !== undefined && match[10] !== undefined) {
|
||||
const linkText = match[9];
|
||||
const textStart = absFrom + 1; // after [
|
||||
const textEnd = textStart + linkText.length;
|
||||
const urlPart = match[10];
|
||||
const urlInText = match[0].indexOf("](") + 2;
|
||||
const urlStart = absFrom + urlInText;
|
||||
const urlEnd = urlStart + urlPart.length;
|
||||
regions.push({
|
||||
from: absFrom,
|
||||
to: absTo,
|
||||
markers: [
|
||||
[absFrom, textStart], // [
|
||||
[textEnd, urlStart], // ](
|
||||
[urlEnd, absTo], // )
|
||||
],
|
||||
content: [textStart, textEnd, "cm-lp-link"],
|
||||
});
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Build decoration set ───────────────────────────────────────────
|
||||
|
||||
function buildDecorationSet(regions: HideRange[], selFrom: number, selTo: number): DecorationSet {
|
||||
const decos: Range<Decoration>[] = [];
|
||||
|
||||
for (const region of regions) {
|
||||
// If the selection overlaps with this region, reveal it (show raw markdown)
|
||||
if (selFrom < region.to && selTo > region.from) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Hide all marker ranges
|
||||
for (const [mFrom, mTo] of region.markers) {
|
||||
if (mFrom < mTo) {
|
||||
decos.push(hiddenMark.range(mFrom, mTo));
|
||||
}
|
||||
}
|
||||
|
||||
// Apply content styling
|
||||
if (region.content) {
|
||||
const [cFrom, cTo, cssClass] = region.content;
|
||||
if (cFrom < cTo) {
|
||||
decos.push(contentMark(cssClass).range(cFrom, cTo));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Decoration.set(decos, true);
|
||||
}
|
||||
|
||||
// ── ViewPlugin ─────────────────────────────────────────────────────
|
||||
|
||||
class LivePreviewPlugin {
|
||||
decorations: DecorationSet;
|
||||
|
||||
constructor(view: EditorView) {
|
||||
this.decorations = this.compute(view);
|
||||
}
|
||||
|
||||
update(update: ViewUpdate) {
|
||||
if (update.docChanged || update.selectionSet) {
|
||||
this.decorations = this.compute(update.view);
|
||||
}
|
||||
}
|
||||
|
||||
private compute(view: EditorView): DecorationSet {
|
||||
const text = view.state.doc.toString();
|
||||
const sel = view.state.selection.main;
|
||||
const regions = parseDocument(text);
|
||||
return buildDecorationSet(regions, sel.from, sel.to);
|
||||
}
|
||||
}
|
||||
|
||||
export function livePreview() {
|
||||
return ViewPlugin.fromClass(LivePreviewPlugin, {
|
||||
decorations: (v) => v.decorations,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user