refactor: 专注模式宽度改用 0.4.1 官方 API（zenMaxWidth: '100%'），移除 CSS hack

2026-08-09 20:37:19 +08:00
parent 6450cd6435
commit 8398e3f124
4 changed files with 27 additions and 20 deletions
@@ -4,7 +4,7 @@
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📝</text></svg>"/>
-<title>MetonaEditor v0.4.0 — 全功能演示</title>
+<title>MetonaEditor v0.4.1 — 全功能演示</title>
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 :root{--app-bg:#f5f6f8;--app-text:#1a1a2e;--app-card:#fff;--app-border:#e5e7eb;--app-accent:#3b82f6;--app-accent2:#8b5cf6;--header-bg:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);--header-text:#f1f5f9;--badge-bg:rgba(255,255,255,.12);--badge-text:#e2e8f0}
@@ -45,11 +45,11 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Micr
 <body>

 <header class="header">
-  <h1><span class="grad">Metona</span>Editor v0.4.0</h1>
+  <h1><span class="grad">Metona</span>Editor v0.4.1</h1>
  <div class="badges">
    <span class="badge">TypeScript</span>
    <span class="badge">零运行时依赖</span>
-    <span class="badge">826 tests</span>
+    <span class="badge">841 tests</span>
    <span class="badge">6 个插件</span>
    <span class="badge">桌面端优先</span>
  </div>
@@ -85,7 +85,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Micr
  <div class="info-card"><div class="icon">🎨</div><h4>内置语法高亮</h4><p>零依赖 tokenizer，js / ts / python / bash 等 16 个语言标识</p></div>
  <div class="info-card"><div class="icon">📂</div><h4>磁盘文件读写</h4><p>File System Access API 打开 / 保存真实 .md 文件</p></div>
  <div class="info-card"><div class="icon">🔢</div><h4>行号装订线</h4><p>当前行高亮，与编辑区滚动同步</p></div>
-  <div class="info-card"><div class="icon">🧘</div><h4>Zen 专注模式</h4><p>工具栏自动隐藏，鼠标移到顶部滑入</p></div>
+  <div class="info-card"><div class="icon">🧘</div><h4>Zen 专注模式</h4><p>工具栏自动隐藏，宽度可配置（zenMaxWidth，默认 960px）</p></div>
  <div class="info-card"><div class="icon">⌨️</div><h4>快捷键面板</h4><p>按 ? 查看全部快捷键，Ctrl+F/H 搜索替换</p></div>
  <div class="info-card"><div class="icon">📊</div><h4>Mermaid 图表</h4><p>```mermaid 代码块，加载 Mermaid.js 即可渲染</p></div>
  <div class="info-card"><div class="icon">🔌</div><h4>6 个预设插件</h4><p>autoSave / exportTool / searchReplace / imagePaste / shortcutHelp / fileSystem</p></div>
@@ -93,7 +93,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Micr
 </div>

 <footer class="footer">
-  MetonaEditor v0.4.0 · TypeScript · <a href="index.html">首页</a> · <a href="docs.html">API 文档</a> · <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a> · MIT
+  MetonaEditor v0.4.1 · TypeScript · <a href="index.html">首页</a> · <a href="docs.html">API 文档</a> · <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a> · MIT
 </footer>

 <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
@@ -101,13 +101,15 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Micr
 <script>
 (function(){
 var demoMd=[
-  '# 🚀 MetonaEditor v0.4.0 全功能演示',
+  '# 🚀 MetonaEditor v0.4.1 全功能演示',
  '',
  '> TypeScript 重构 · 零运行时依赖 · **桌面端** Markdown Editor 库。',
-  '> 全模块 TypeScript 严格模式，17 个源文件，826 个测试全部通过。',
+  '> 全模块 TypeScript 严格模式，17 个源文件，841 个测试全部通过。',
  '',
-  '## ✨ v0.4.0 新特性',
+  '## ✨ v0.4.1 新特性',
  '',
+  '- **Zen 专注模式宽度可配置**：`zenMaxWidth` 默认 960px，支持数字 / CSS 字符串 / `false` 不限宽',
+  '- **修复 5 处问题**：`wordWrap: false` 生效 · outline 启动即构建 · edit 模式初始行号 · exportTool 卸载清理 · 替换后统计刷新',
  '- **Playwright 浏览器冒烟测试**：22 项断言真实 Chromium 验证',
  '- **实例级 i18n**：状态栏 / 工具栏 / 右键菜单 / 大纲全部跟随实例语言',
  '- `sideEffects: false` 优化打包 · `MeEditor.destroy()` 全面复位',
@@ -139,6 +141,7 @@ var demoMd=[
  '',
  '| 版本 | 日期 | 测试 | 主题 |',
  '| :--- | :---: | ---: | --- |',
+  '| v0.4.1 | 2026-08 | 841 | Zen宽度可配置+5项修复 |',
  '| v0.4.0 | 2026-08 | 826 | E2E冒烟+实例i18n |',
  '| v0.3.1 | 2026-08 | 821 | 增量统计+高亮缓存 |',
  '| v0.3.0 | 2026-08 | 801 | 安全修复+缓存指纹 |',
@@ -200,8 +203,8 @@ var demoMd=[
  '```',
  '',
  '```bash',
-  '# 安装与启动',
-  'npm install @metona-team/metona-editor',
+  '# 安装（Gitea 私有源）',
+  'npm install @metona-team/metona-editor --registry=https://git.metona.cn/api/packages/MetonaTeam/npm/',
  'npm run dev',
  '```',
  '',
@@ -4,7 +4,7 @@
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📖</text></svg>"/>
-<title>MetonaEditor v0.4.0 · 文档</title>
+<title>MetonaEditor v0.4.1 · 文档</title>
 <style>
 *{box-sizing:border-box;margin:0;padding:0}
 :root{--bg:#0f1117;--bg-soft:#161922;--card:#1c2029;--card-hover:#232834;--text:#e6e8eb;--muted:#9ca3af;--accent:#3b82f6;--accent-2:#8b5cf6;--accent-soft:rgba(59,130,246,.12);--border:rgba(255,255,255,.08);--gradient:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 50%,#ec4899 100%)}
@@ -65,7 +65,7 @@ footer a{color:var(--accent);text-decoration:none}

 <header class="docs-header">
  <h1><span class="grad">API 文档</span></h1>
-  <p class="sub">MetonaEditor v0.4.0 · TypeScript · 完整配置、API 与使用指南</p>
+  <p class="sub">MetonaEditor v0.4.1 · TypeScript · 完整配置、API 与使用指南</p>
 </header>

 <div class="container">
@@ -109,8 +109,11 @@ footer a{color:var(--accent);text-decoration:none}
 <!-- 快速入门 -->
 <section id="quickstart">
 <h2>安装与引入</h2>
-<pre><span class="c-com"># npm 安装</span>
-<span class="c-kw">npm</span> install @metona-team/metona-editor
+<pre><span class="c-com"># npm 安装（Gitea 私有源）</span>
+<span class="c-kw">npm</span> install @metona-team/metona-editor <span class="c-punc">--</span>registry<span class="c-punc">=</span>https<span class="c-punc">:</span><span class="c-punc">//</span>git<span class="c-punc">.</span>metona<span class="c-punc">.</span>cn<span class="c-punc">/</span>api<span class="c-punc">/</span>packages<span class="c-punc">/</span>MetonaTeam<span class="c-punc">/</span>npm<span class="c-punc">/</span>
+
+<span class="c-com">// 或项目 .npmrc 配置 scope 后直接安装</span>
+<span class="c-com">// @metona-team:registry=https://git.metona.cn/api/packages/MetonaTeam/npm/</span>

 <span class="c-com">// TypeScript / ES Module</span>
 <span class="c-kw">import</span> MeEditor <span class="c-kw">from</span> <span class="c-str">'@metona-team/metona-editor'</span><span class="c-punc">;</span>
@@ -146,6 +149,8 @@ footer a{color:var(--accent);text-decoration:none}
  historyLimit<span class="c-punc">:</span> <span class="c-num">100</span><span class="c-punc">,</span>      historyDebounce<span class="c-punc">:</span> <span class="c-num">400</span><span class="c-punc">,</span>
  syncScroll<span class="c-punc">:</span> <span class="c-kw">true</span><span class="c-punc">,</span>       autoBrackets<span class="c-punc">:</span> <span class="c-kw">true</span><span class="c-punc">,</span>
  zenMode<span class="c-punc">:</span> <span class="c-kw">false</span><span class="c-punc">,</span>         wordWrap<span class="c-punc">:</span> <span class="c-kw">true</span><span class="c-punc">,</span>
+  <span class="c-com">// Zen 内容区最大宽度（数字为 px / 字符串为 CSS 值 / false 不限宽）</span>
+  zenMaxWidth<span class="c-punc">:</span> <span class="c-num">960</span><span class="c-punc">,</span>
  maxLength<span class="c-punc">:</span> <span class="c-num">0</span><span class="c-punc">,</span>          <span class="c-com">// 最大字符数（0=不限）</span>
  floatingToolbar<span class="c-punc">:</span> <span class="c-kw">true</span><span class="c-punc">,</span> <span class="c-com">// 选中文本浮动格式栏</span>

@@ -252,6 +257,8 @@ editor<span class="c-punc">.</span><span class="c-fn">canUndo</span><span class=
 <pre>editor<span class="c-punc">.</span><span class="c-fn">setMode</span><span class="c-punc">(</span><span class="c-str">'split'</span><span class="c-punc">);</span>  editor<span class="c-punc">.</span><span class="c-fn">getMode</span><span class="c-punc">();</span>
 editor<span class="c-punc">.</span><span class="c-fn">toggleFullscreen</span><span class="c-punc">();</span>  <span class="c-fn">isFullscreen</span><span class="c-punc">();</span>  <span class="c-fn">exitFullscreen</span><span class="c-punc">();</span>
 editor<span class="c-punc">.</span><span class="c-fn">toggleZen</span><span class="c-punc">();</span>  <span class="c-fn">isZen</span><span class="c-punc">();</span>  <span class="c-com">// 或配置 zenMode: true 启动即进入</span>
+editor<span class="c-punc">.</span><span class="c-fn">setZenMaxWidth</span><span class="c-punc">(</span><span class="c-num">1200</span><span class="c-punc">);</span> <span class="c-com">// 运行时调整专注模式宽度（数字 / CSS 字符串 / false）</span>
+editor<span class="c-punc">.</span><span class="c-fn">getZenMaxWidth</span><span class="c-punc">();</span> <span class="c-com">// => number | string | false</span>
 editor<span class="c-punc">.</span><span class="c-fn">toggleWordWrap</span><span class="c-punc">();</span>  <span class="c-fn">setWordWrap</span><span class="c-punc">(</span><span class="c-kw">true</span><span class="c-punc">);</span>  <span class="c-fn">isWordWrap</span><span class="c-punc">();</span>
 editor<span class="c-punc">.</span><span class="c-fn">toggleFloatingToolbar</span><span class="c-punc">();</span>  <span class="c-fn">isFloatingToolbar</span><span class="c-punc">();</span> <span class="c-com">// 选中文本格式栏</span></pre>
 </section>
@@ -487,7 +494,7 @@ i18nUtils<span class="c-punc">.</span><span class="c-fn">formatDate</span><span

 <footer>
  <div class="container">
-    MetonaEditor v0.4.0 · TypeScript · <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a> · MIT License
+    MetonaEditor v0.4.1 · TypeScript · <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a> · MIT License
  </div>
 </footer>