From d22380ac7a83fac8ab22b861a6f95af016e2f61f Mon Sep 17 00:00:00 2001 From: thzxx <1440196015@qq.com> Date: Sun, 9 Aug 2026 09:33:48 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=85=A8=E9=9D=A2=E6=9B=B4=E6=96=B0=20?= =?UTF-8?q?README=20=E4=B8=8E=E7=AB=99=E7=82=B9=E5=88=B0=20v0.2.5=20?= =?UTF-8?q?=E6=9C=80=E7=BB=88=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 返回类型非法) --- README.md | 54 +++++++++++++++++++++++++---------------- site/demo.html | 37 +++++++++++++++++++++------- site/docs.html | 20 +++++++++------ site/index.html | 14 ++++++----- src/context-menu.ts | 2 +- src/floating-toolbar.ts | 2 +- src/styles.ts | 12 +++++++++ 7 files changed, 96 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 125a863..ee279a2 100644 --- a/README.md +++ b/README.md @@ -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 分离 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
TypeScript 零运行时依赖 - 768 tests + 780 tests 6 个插件 桌面端优先
@@ -80,8 +80,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Micr
-
🏗️

TypeScript 全模块重构

12 个 .ts 源文件,严格模式,完整类型导出

+
🏗️

TypeScript 全模块重构

17 个 .ts 源文件,严格模式,完整类型导出

📝

自研解析器 99% 行覆盖

CommonMark + GFM:粗斜体、链接内格式、脚注、数学公式等

+
🎨

内置语法高亮

零依赖 tokenizer,js / ts / python / bash 等 16 个语言标识

📂

磁盘文件读写

File System Access API 打开 / 保存真实 .md 文件

🔢

行号装订线

当前行高亮,与编辑区滚动同步

🧘

Zen 专注模式

工具栏自动隐藏,鼠标移到顶部滑入

@@ -102,15 +103,15 @@ var demoMd=[ '# 🚀 MetonaEditor v0.2.5 全功能演示', '', '> TypeScript 重构 · 零运行时依赖 · **桌面端** Markdown Editor 库。', - '> 全模块 TypeScript 严格模式,12 个源文件,768 个测试全部通过。', + '> 全模块 TypeScript 严格模式,17 个源文件,780 个测试全部通过。', '', '## ✨ v0.2.5 新特性', '', - '- 浮动格式工具栏:选中文本自动弹出 bold/italic/code/link', - '- 新增 `getSelectedText()` `getCursorPosition()` 等 10+ API', - '- `replaceAll` / `replaceAllRegex` 批量替换', - '- `selectionChange` / `cursorMove` 事件', - '- 德语(de)翻译 · 6 种语言支持', + '- 内置**零依赖语法高亮**:js / ts / python / bash 等 16 个语言标识', + '- `exportPDF()` 打印导出 · `imagePaste` 尺寸限制(maxSizeKB)', + '- 搜索面板支持**大小写 / 全字匹配**开关(Aa / ab)', + '- `maxLength` 限制文档大小 · `zenMode: true` 启动即专注', + '- 安全加固:属性级注入防护 · 发布产物 .mjs / .cjs 规范', '', '## 📐 文本样式', '', @@ -139,7 +140,7 @@ var demoMd=[ '', '| 版本 | 日期 | 测试 | 主题 |', '| :--- | :---: | ---: | --- |', - '| v0.2.5 | 2026-08 | 768 | 浮动工具栏+新API |', + '| v0.2.5 | 2026-08 | 780 | 内置高亮+安全修复 |', '| v0.2.2 | 2026-07 | 694 | 法语+表格格式化 |', '| v0.2.1 | 2026-07 | 684 | 引用链接+右键菜单 |', '| v0.2.0 | 2026-07 | 610 | TypeScript 重构 |', @@ -185,6 +186,23 @@ var demoMd=[ 'editor.exec("bold").exec("h1").focus();', '```', '', + '```python', + 'def fib(n):', + ' """返回斐波那契数列第 n 项"""', + ' a, b = 0, 1', + ' for _ in range(n):', + ' a, b = b, a + b', + ' return a', + '', + 'print(fib(10)) # 55', + '```', + '', + '```bash', + '# 安装与启动', + 'npm install @metona-team/metona-editor', + 'npm run dev', + '```', + '', '## 📌 脚注', '', '这是一个带脚注的句子[^1],另一个脚注[^note]。', @@ -204,6 +222,7 @@ var editor = MeEditor.create('#editor',{ mode: 'split', height: 620, lineNumbers: true, autoBrackets: true, wordCount: true, theme: 'auto', locale: 'zh-CN', outline: false, + highlight: MeEditor.highlight, plugins: ['autoSave','exportTool','searchReplace','imagePaste','shortcutHelp','fileSystem'], onLinkClick: function(uri, text, ed){ ed.toast('链接: ' + uri, { type: 'info', duration: 2000 }); diff --git a/site/docs.html b/site/docs.html index 556f555..5c6ae35 100644 --- a/site/docs.html +++ b/site/docs.html @@ -335,12 +335,15 @@ MeEditor.setTheme.setLocale('en-US'); // 解析器独立使用 -import { parseMarkdown, parseTokens, renderTokens } from '@metona-team/metona-editor'; +import { parseMarkdown, parseTokens, renderTokens } from '@metona-team/metona-editor'; + +// 内置语法高亮 +import { highlight, registerLanguage } from '@metona-team/metona-editor';

内置语法高亮

-

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 }
@@ -387,7 +393,7 @@ MeEditor.registerLanguage< 反斜杠转义 v0.1.15\* \_取消标点特殊含义

XSS 防护

-

所有文本经 escapeHTML 转义,URL 过滤 javascript: / vbscript: / file: / 非图片 data:,提供 sanitize 钩子。

+

所有文本经 escapeHTML 转义,URL 过滤 javascript: / vbscript: / file: / 非图片 data:,属性级注入防护(href / src / alt / title 引号转义),提供 sanitize 钩子。

解析器 API

@@ -422,12 +428,12 @@ tokens.unshift.restoreDraft(); editor.clearDraft();

exportTool

editor.use('exportTool');
-editor.exportMarkdown('doc.md');  editor.exportHTML('doc.html');
+editor.exportMarkdown('doc.md'); editor.exportHTML('doc.html'); editor.exportPDF();

searchReplace

editor.use('searchReplace');
-// Ctrl+F 查找 / Ctrl+H 替换
+// Ctrl+F 查找 / Ctrl+H 替换,支持正则 .* 、大小写 Aa、全字 ab 开关

imagePaste

-
editor.use('imagePaste');  // 粘贴图片自动转 base64
+
editor.use('imagePaste', { maxSizeKB: 500 });  // 粘贴图片转 base64,超限警告

shortcutHelp

editor.use('shortcutHelp');  // 按 ? 弹出快捷键面板

fileSystem

diff --git a/site/index.html b/site/index.html index f63dc7f..ad6a029 100644 --- a/site/index.html +++ b/site/index.html @@ -109,7 +109,7 @@ footer a:hover{text-decoration:underline} v0.2.5 TypeScript 零运行时依赖 - 768 tests + 780 tests 桌面端优先 MIT
@@ -120,8 +120,8 @@ footer a:hover{text-decoration:underline}
0
运行时依赖
99%
解析器行覆盖
-
768
单元测试
-
~30KB
gzip 体积
+
780
单元测试
+
~42KB
gzip 体积
@@ -144,8 +144,9 @@ footer a:hover{text-decoration:underline}

分屏实时预览

edit / split / preview 三模式切换,拖拽分隔条调整比例,双向比例同步滚动。

零运行时依赖

不依赖任何第三方运行时库,打包后单文件,UMD / ESM / CJS 三种格式开箱即用。

6 个预设插件

autoSave / exportTool / searchReplace / imagePaste / shortcutHelp / fileSystem,插件 v2 支持拓扑排序、异步、卸载。

-

主题 & i18n

4 套预设主题 + CSS 变量定制 + 实例级隔离。中英双语开箱即用,支持远程加载翻译包。

-

XSS 安全防护

HTML 转义、危险协议过滤、sanitize 钩子、highlight 异常回退。多层防护,安全可靠。

+

主题 & i18n

4 套预设主题 + CSS 变量定制 + 实例级隔离。六种语言开箱即用(中 / 英 / 日 / 韩 / 法 / 德),支持远程加载翻译包。

+

内置语法高亮

零依赖轻量高亮器,js / ts / python / bash / css 等 16 个语言标识,代码块一行配置即自动着色。

+

XSS 安全防护

HTML 转义、危险协议过滤、属性级注入防护、sanitize 钩子、highlight 异常回退。多层防护,安全可靠。

@@ -188,7 +189,8 @@ editor.execAPI Reference

API 速览

-

内容操作

+

内容操作

+

光标与选区

命令执行

模式与全屏

事件与插件

diff --git a/src/context-menu.ts b/src/context-menu.ts index 9725b2d..e6d24a3 100644 --- a/src/context-menu.ts +++ b/src/context-menu.ts @@ -7,7 +7,7 @@ import { t as i18nT } from './i18n'; import type { MarkdownEditor } from './core'; -export function registerContextMenu(this: MarkdownEditor, items: any[] = []): this { +export function registerContextMenu(this: MarkdownEditor, items: any[] = []): MarkdownEditor { this._contextMenuItems = items; return this; } diff --git a/src/floating-toolbar.ts b/src/floating-toolbar.ts index f3fcd28..be4de8d 100644 --- a/src/floating-toolbar.ts +++ b/src/floating-toolbar.ts @@ -85,7 +85,7 @@ export function initFloatingToolbar(this: MarkdownEditor): void { }); } -export function toggleFloatingToolbar(this: MarkdownEditor): this { +export function toggleFloatingToolbar(this: MarkdownEditor): MarkdownEditor { this._floatingEnabled = !this._floatingEnabled; if (!this._floatingEnabled) { if (this._floatingToolbar) { diff --git a/src/styles.ts b/src/styles.ts index d7fc521..40af613 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -72,6 +72,18 @@ const generateCSS = (): string => { .me-code-title{font-family:var(--md-mono);font-size:.85em;padding:8px 14px;background:var(--md-border);border-radius:8px 8px 0 0;color:var(--md-text);margin:.9em 0 -0.9em;font-weight:600} .me-code-title+pre{margin-top:0;border-radius:0 0 8px 8px;border-top:none} .me-preview pre code{padding:0;background:transparent;color:var(--md-code-text);font-size:.9em;line-height:1.6;border-radius:0} +.me-hl-keyword{color:#c678dd} +.me-hl-string{color:#98c379} +.me-hl-comment{color:#7f848e;font-style:italic} +.me-hl-number{color:#d19a66} +.me-hl-builtin{color:#e5c07b} +.me-hl-function{color:#61afef} +.me-theme-light .me-hl-keyword{color:#9c4cc0} +.me-theme-light .me-hl-string{color:#4f9d4f} +.me-theme-light .me-hl-comment{color:#8b8b8b} +.me-theme-light .me-hl-number{color:#b06a22} +.me-theme-light .me-hl-builtin{color:#9a7d0f} +.me-theme-light .me-hl-function{color:#2a7fd4} .me-preview img{max-width:100%;height:auto;border-radius:6px;vertical-align:middle} .me-table-wrap{overflow-x:auto;margin:.9em 0} .me-preview table{border-collapse:collapse;width:100%;font-size:.93em;display:block}