docs: 全面更新 README 与站点到 v0.2.5 最终状态

README:
- badge 测试数 768→780,目录补语法高亮章节
- 特性修正:解析器 99% 行覆盖、六语言、16 个高亮语言标识
- 事件表补 selectionChange / cursorMove
- 插件表补 exportPDF / searchReplace 大小写全字 / imagePaste maxSizeKB
- XSS 章节补属性级注入防护说明
- 构建章节补 npm run bench
- 源码结构补 5 个新模块(commands/floating-toolbar/context-menu/outline/highlight)

site:
- index.html: 测试数/gzip 体积更正(42KB)、新增语法高亮特性卡、
  光标选区 API 速览卡、六语言文案
- demo.html: 启用内置高亮(highlight: MeEditor.highlight)、
  新增 python/bash 代码块演示、v0.2.5 真实新特性列表、17 源文件/780 测试
- docs.html: 高亮章节补 16 标识与 CSS 定制示例、exportPDF/maxSizeKB/
  大小写全字说明、XSS 属性注入、静态 API 补 highlight 导入

src:
- styles.ts: 新增 me-hl-* 高亮配色(深浅色自适应)
- 修复复查引入的 TS 错误(普通函数 this 返回类型非法)
This commit is contained in:
2026-08-09 09:33:48 +08:00
parent e5f99aee83
commit d22380ac7a
7 changed files with 96 additions and 45 deletions
+33 -21
View File
@@ -4,7 +4,7 @@
[![version](https://img.shields.io/badge/version-0.2.5-blue)](https://git.metona.cn/MetonaTeam/-/packages/npm/@metona-team%2Fmetona-editor)
[![license](https://img.shields.io/badge/license-MIT-green)](./LICENSE)
[![tests](https://img.shields.io/badge/tests-768%20passed-brightgreen)](./tests)
[![tests](https://img.shields.io/badge/tests-780%20passed-brightgreen)](./tests)
[![coverage](https://img.shields.io/badge/coverage-parser%2099%25-brightgreen)](./tests)
[![types](https://img.shields.io/badge/types-TypeScript%20strict-blue)](./tsconfig.json)
@@ -12,11 +12,11 @@
- **TypeScript 源码** — 全模块 TypeScript 严格模式,完整类型导出,IDE 智能提示
- **零运行时依赖** — 打包后单文件,无任何第三方库,UMD / ESM / CJS 三种格式
- **自研解析器** — CommonMark + GFM 扩展,96% 语句覆盖率,parseTokens / renderTokens 分离 APIregisterBlockHandler 自定义块语法
- **自研解析器** — CommonMark + GFM 扩展,99% 覆盖率,parseTokens / renderTokens 分离 APIregisterBlockHandler 自定义块语法
- **插件系统 v2** — 拓扑排序依赖管理,6 个预设插件开箱即用,安装 / 卸载生命周期
- **三模式视图** — edit / split / preview,拖拽分隔条调整比例,双向滚动同步
- **主题系统** — light / dark / warm / autoCSS 变量可定制,实例级隔离,主题继承,外部跟随
- **国际化** — zh-CN / en-US / ja / ko 完整翻译,实例级语言隔离,远程加载翻译包
- **国际化** — zh-CN / en-US / ja / ko / fr / de 六种语言完整翻译,实例级语言隔离,远程加载翻译包
- **编辑体验** — 行号装订线、智能 Enter、括号自动闭合、拖放文件、大纲面板、Zen 专注模式、右键上下文菜单
- **内置语法高亮** — 零依赖轻量高亮器,js/ts/python/bash/css/html 等 13 种语言,`MeEditor.highlight` 即插即用
- **安全** — HTML 转义,XSS 协议过滤(javascript / vbscript / file / data),属性级注入防护,sanitize 钩子
@@ -38,6 +38,7 @@
- [事件系统](#事件系统)
- [Markdown 解析器](#markdown-解析器)
- [插件系统](#插件系统)
- [语法高亮](#语法高亮)
- [主题系统](#主题系统)
- [国际化](#国际化)
- [构建与测试](#构建与测试)
@@ -146,7 +147,7 @@ MeEditor.create(container, {
// 主题与语言
theme: 'auto', // 'light' | 'dark' | 'warm' | 'auto'
locale: 'zh-CN', // 'zh-CN' | 'en-US'
locale: 'zh-CN', // 'zh-CN' | 'en-US' | 'ja' | 'ko' | 'fr' | 'de'
// 渲染钩子
render: null, // (md: string, env: RenderEnv) => string
@@ -434,6 +435,8 @@ import { highlight, registerLanguage, getSupportedLanguages } from '@metona-team
| `beforeChange` | 内容变更前 | `(oldValue, newValue, editor)` |
| `afterChange` | 内容变更后 | `(newValue, editor)` |
| `copy` | 复制到剪贴板 | `({ type })` |
| `selectionChange` | 选区变化 | `({ start, end, text })` |
| `cursorMove` | 光标移动 | `({ line, column })` |
### 全局钩子
@@ -529,6 +532,7 @@ registerBlockHandler({
- 所有文本经 `escapeHTML` 转义
- 链接 URL 过滤 `javascript:` / `vbscript:` / `file:` / 非图片 `data:`
- 属性级注入防护:`href` / `src` / `alt` / `title` / `language-*` 引号与换行均被转义
- `data:image` 限制最大 500KB
- `sanitize` 钩子供外部净化(如 DOMPurify)
- `highlight` 钩子异常自动回退为纯文本
@@ -565,9 +569,9 @@ editor.unuse('myPlugin');
| 插件 | 说明 | 用法 |
|------|------|------|
| `autoSave` | localStorage 自动保存草稿 | `editor.use('autoSave', { delay: 1000 })` |
| `exportTool` | 导出 .md / .html 文件 | `editor.use('exportTool'); editor.exportMarkdown()` |
| `searchReplace` | Ctrl+F 查找 / Ctrl+H 替换 | `editor.use('searchReplace')` |
| `imagePaste` | 粘贴剪贴板图片转 base64 | `editor.use('imagePaste')` |
| `exportTool` | 导出 .md / .html 文件,支持 PDF(打印) | `editor.use('exportTool'); editor.exportMarkdown()` |
| `searchReplace` | Ctrl+F 查找 / Ctrl+H 替换,支持正则、大小写、全字匹配 | `editor.use('searchReplace')` |
| `imagePaste` | 粘贴剪贴板图片转 base64,可限尺寸 | `editor.use('imagePaste', { maxSizeKB: 500 })` |
| `shortcutHelp` | 按 ? 弹出快捷键面板 | `editor.use('shortcutHelp')` |
| `fileSystem` | File System Access API 读写磁盘 | `editor.use('fileSystem'); editor.openFile()` |
@@ -590,7 +594,7 @@ pluginUtils.getPreset('autoSave') // 预设副本
## 语法高亮
v0.2.5 起内置零依赖轻量高亮器js / ts / tsx / jsx / python / bash / css / html / json / yaml / markdown / java / go / rust)。
v0.2.5 起内置零依赖轻量高亮器,支持 js / ts / tsx / jsx / python / bash / css / html / json / yaml / markdown / java / go / rust(含 shell / md 别名共 16 个语言标识)。
```typescript
import MeEditor from '@metona-team/metona-editor';
@@ -605,7 +609,7 @@ const html = MeEditor.highlight(code, 'typescript');
MeEditor.registerLanguage('myLang', { keywords: ['kw'], builtins: [] });
```
高亮类名:`me-hl-keyword` / `me-hl-string` / `me-hl-comment` / `me-hl-number` / `me-hl-builtin` / `me-hl-function`
高亮类名:`me-hl-keyword` / `me-hl-string` / `me-hl-comment` / `me-hl-number` / `me-hl-builtin` / `me-hl-function`,内置浅色 / 深色自适应配色,也可用 CSS 覆盖定制
---
@@ -745,6 +749,9 @@ npm test
# 测试覆盖率
npm run test -- --coverage
# 性能基准(先构建再运行)
npm run build && npm run bench
# 代码格式化
npm run format
```
@@ -764,18 +771,23 @@ dist/
```
src/
├── index.ts 入口 / 全局API
├── core.ts MarkdownEditor 类
├── parser.ts 自研 Markdown 解析器
├── plugins.ts 插件系统 & 6 个预设
├── themes.ts 主题系统
├── i18n.ts 国际化
├── styles.ts CSS-in-JS
├── constants.ts 常量 / 类型定义
├── utils.ts 工具函数
├── animations.ts 动画元数据
├── icons.ts 工具栏 SVG 图标
── locales.ts 中英文翻译数据
├── index.ts 入口 / 全局API
├── core.ts MarkdownEditor 类(构造 / 事件 / 历史 / 模式)
├── commands.ts 编辑命令实现(包裹 / 前缀 / 插入 / 表格格式化)
├── floating-toolbar.ts 选中文本浮动格式栏
├── context-menu.ts 右键上下文菜单
├── outline.ts 大纲面板
├── parser.ts 自研 Markdown 解析器
├── highlight.ts 内置轻量语法高亮器
├── plugins.ts 插件系统 & 6 个预设
├── themes.ts 主题系统
├── i18n.ts 国际化
── styles.ts CSS-in-JS
├── constants.ts 常量 / 类型定义
├── utils.ts 工具函数
├── animations.ts 动画元数据
├── icons.ts 工具栏 SVG 图标
└── locales.ts 六语言翻译数据
```
### 技术栈