diff --git a/README.md b/README.md index 125a863..ee279a2 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ [](https://git.metona.cn/MetonaTeam/-/packages/npm/@metona-team%2Fmetona-editor) [](./LICENSE) -[](./tests) +[](./tests) [](./tests) [](./tsconfig.json) @@ -12,11 +12,11 @@ - **TypeScript 源码** — 全模块 TypeScript 严格模式,完整类型导出,IDE 智能提示 - **零运行时依赖** — 打包后单文件,无任何第三方库,UMD / ESM / CJS 三种格式 -- **自研解析器** — CommonMark + GFM 扩展,96% 语句覆盖率,parseTokens / renderTokens 分离 API,registerBlockHandler 自定义块语法 +- **自研解析器** — CommonMark + GFM 扩展,99% 行覆盖率,parseTokens / renderTokens 分离 API,registerBlockHandler 自定义块语法 - **插件系统 v2** — 拓扑排序依赖管理,6 个预设插件开箱即用,安装 / 卸载生命周期 - **三模式视图** — edit / split / preview,拖拽分隔条调整比例,双向滚动同步 - **主题系统** — light / dark / warm / auto,CSS 变量可定制,实例级隔离,主题继承,外部跟随 -- **国际化** — 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 六语言翻译数据 ``` ### 技术栈 diff --git a/site/demo.html b/site/demo.html index 5bbe649..3f18a99 100644 --- a/site/demo.html +++ b/site/demo.html @@ -49,7 +49,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Micr
12 个 .ts 源文件,严格模式,完整类型导出
17 个 .ts 源文件,严格模式,完整类型导出
CommonMark + GFM:粗斜体、链接内格式、脚注、数学公式等
零依赖 tokenizer,js / ts / python / bash 等 16 个语言标识
File System Access API 打开 / 保存真实 .md 文件
当前行高亮,与编辑区滚动同步
工具栏自动隐藏,鼠标移到顶部滑入
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 个语言标识)。
import MeEditor from '@metona-team/metona-editor'; // 方式一:作为 highlight 钩子(代码块自动高亮) @@ -351,7 +354,10 @@ MeEditor.create// 注册自定义语言 MeEditor.registerLanguage('myLang', { keywords: ['kw'], builtins: [] });-
高亮输出使用 me-hl-keyword / me-hl-string / me-hl-comment / me-hl-number / me-hl-builtin / me-hl-function 类,可用 CSS 变量或选择器定制颜色。
高亮输出使用 me-hl-keyword / me-hl-string / me-hl-comment / me-hl-number / me-hl-builtin / me-hl-function 类。内置浅色 / 深色自适应配色,可通过 CSS 覆盖定制:
/* 自定义配色(覆盖内置默认) */ +.me-preview .me-hl-keyword{ color: #a855f7 } +.me-preview .me-hl-string{ color: #22c55e }
\* \_所有文本经 escapeHTML 转义,URL 过滤 javascript: / vbscript: / file: / 非图片 data:,提供 sanitize 钩子。
所有文本经 escapeHTML 转义,URL 过滤 javascript: / vbscript: / file: / 非图片 data:,属性级注入防护(href / src / alt / title 引号转义),提供 sanitize 钩子。
editor.use('exportTool'); -editor.exportMarkdown('doc.md'); editor.exportHTML('doc.html');+editor.exportMarkdown('doc.md'); editor.exportHTML('doc.html'); editor.exportPDF();
editor.use('searchReplace'); -// Ctrl+F 查找 / Ctrl+H 替换+// Ctrl+F 查找 / Ctrl+H 替换,支持正则 .* 、大小写 Aa、全字 ab 开关
editor.use('imagePaste'); // 粘贴图片自动转 base64+
editor.use('imagePaste', { maxSizeKB: 500 }); // 粘贴图片转 base64,超限警告
editor.use('shortcutHelp'); // 按 ? 弹出快捷键面板
edit / split / preview 三模式切换,拖拽分隔条调整比例,双向比例同步滚动。
不依赖任何第三方运行时库,打包后单文件,UMD / ESM / CJS 三种格式开箱即用。
autoSave / exportTool / searchReplace / imagePaste / shortcutHelp / fileSystem,插件 v2 支持拓扑排序、异步、卸载。
4 套预设主题 + CSS 变量定制 + 实例级隔离。中英双语开箱即用,支持远程加载翻译包。
HTML 转义、危险协议过滤、sanitize 钩子、highlight 异常回退。多层防护,安全可靠。
4 套预设主题 + CSS 变量定制 + 实例级隔离。六种语言开箱即用(中 / 英 / 日 / 韩 / 法 / 德),支持远程加载翻译包。
零依赖轻量高亮器,js / ts / python / bash / css 等 16 个语言标识,代码块一行配置即自动着色。
HTML 转义、危险协议过滤、属性级注入防护、sanitize 钩子、highlight 异常回退。多层防护,安全可靠。