前言¶

在 DSH 0.1.5 之后，Web 端输入框改用 Lexical contenteditable 架构。官方已经负责发送逻辑、草稿持久化、/ 命令、@ 提及、粘贴附件等能力，但你在框里看到的仍是接近纯文本的 Markdown 源稿：加粗、代码块、列表续行等都要靠记忆语法或事后预览。

若你习惯 Open WebUI 那类「边打边出样式、发送内容仍是 Markdown 原文」的体验，就需要在官方 composer 之上加一层纯浏览器端增强。dsh-composer-live（维护者 zeusxx，GitHub：zeusxx/dsh-composer-live）走的就是这条路：不改官方源码、不注入服务，只针对 web profile 的输入框做实时渲染与快捷键/工具栏。

这是什么¶

dsh-composer-live 是 DSH 的客户端插件（分类：客户端）。它在 Web composer 上叠加 Open WebUI 风格的 live editor：你输入 Markdown，界面同步显示粗体、斜体、高亮代码块、列表、引用、表格等；草稿始终是 plain Markdown，发出的消息与键入的源文本一致。

运行方式：纯浏览器端，零运行时依赖，基于官方 0.1.5 Lexical composer 分层挂载。README 标明要求 DSH ≥ 0.1.5-rc.2 且使用 web profile；浏览器需为 Chromium 系（依赖 -webkit-text-fill-color 实现透明叠层技巧）。许可证 MIT（package.json 版本 0.2.13）。

更早面向 DSH 0.1.x textarea composer 的前作是 dsh-composer-md，README 注明已停更；本文插件面向 0.1.5+ Lexical 版。

核心功能¶

实时 Markdown 渲染¶

• 行内：**bold**、*italic*、`code`（品牌蓝胶囊）、~~strikethrough~~、链接与图片（链接协议白名单）。
• 标记字符（如 **、反引号）视觉上变暗但占位宽度不变；粗体/标题用 paint-only faux-bold，caret 与 invisible 编辑层字符对齐，减少漂移。
• 任务列表 - [ ] / - [x] 渲染为复选框胶囊，完成项可删除线。
• 含 @ mention chip 的段落会降级为官方渲染，避免 chip 宽度无法复刻导致错位。

代码块¶

• 输入 ``` 在未闭合前保持纯文本，避免半截块被渲染。
• 在未闭合 fence 行 Shift+Enter：自动补全闭合 fence 并把 caret 放进块内。
• 闭合块最后一行内容按 ↓ 可跳到块下方。
• 无第三方依赖的正则语法高亮：js/ts/py/sh/json/yml/css/html 等；无语言标签时按内容推断，README 说明中文正文不会被误判为代码。
• fence 行显示语言标签；块主题跟随 GitHub dark/light；存在闭合代码块时，编辑区与 overlay 同步等宽字体栈，CJK 仍用 UI 字体以保证换行一致。

列表、引用、表格¶

• 列表行末 Enter 续行（-/*/+ 保留，有序列表递增，1.→2.、3)→4) 等），空项 Enter 退出；README 称连续两次 Shift+Enter 也可结束列表。
• > 引用同理；Tab / Shift+Tab 对单行或选区缩进/反缩进 2 空格，Tab 在 composer 内被拦截，不会把焦点移出输入框。
• 表头行（|a|b| 且至少两列）后 Enter 自动补分隔行与空行。

工具栏与快捷键¶

• 顶部 sticky 工具栏：B / 斜体 / code / link / list / code block / 展开等；可包裹选区或在 caret 插入空标记；B 在 caret 位于 **…** 内时会高亮。
• 选区浮动格式条（Open WebUI 风格）。
• Ctrl+B / Ctrl+I / Ctrl+E：粗体 / 斜体 / 行内 code，并阻止浏览器在 contenteditable 里插入原生 <b> 等标签污染草稿。

粘贴、Esc 与布局¶

• 大段粘贴（>8 行或 >4 KB）且形态像代码/日志时，可自动包一层 code fence（一步 undo，toast 提示）；已在代码块内或粘贴含 fence 时不包；中文 prose 不误判。
• Esc 按上下文：候选菜单走官方逻辑、展开态收起、生成中则停止生成。
• 一键 70vh 展开长文；明暗主题感知；IME 合成输入不闪烁。
• README 还提到修复官方在带图片附件时 trigger 菜单偏高、工具栏挡缩略图的两处定位问题。

插件 deliberately 不重复官方能力¶

官方 0.1.5 已提供：/ 命令、@ 文件提及、粘贴图片/文件到附件、Enter 发送 / Shift+Enter 换行、IME 保护、草稿持久化——本插件不重做这些。

安装与启用¶

安装命令以 README 为准（安装后需重启 Web 实例；仅刷新页面可能新旧 bundle 并存）：

# from npm (recommended)
dsh plugin --profile web add dsh-composer-live

# or from a local checkout (file: installs are physically copied)
dsh plugin --profile web add "file:/path/to/dsh-composer-live"

隔离 DSH 实例时，将 DSH_HOME 指向该实例目录再执行 add：

DSH_HOME=/path/to/your/.dsh dsh plugin --profile web add dsh-composer-live

默认安装即全开，重启后在 composer 中直接输入 Markdown 即可。

典型用法¶

下面步骤来自 README 中的常见流程与快捷参考（发送行为仍为官方：plain 行 Enter 发送，Shift+Enter 换行）。

代码块

1. 输入 ```js（或任意语言标签）。
2. 按 Shift+Enter，得到已闭合块且 caret 在块内。
3. 在闭合块最后一行内容按 ↓ 可离开块继续写正文。

列表与引用

1. 在行末 - item 后 Enter，下一行自动带 -。
2. 空列表项 Enter 去掉 marker 并退出列表。

格式

1. 选中文本后点顶栏或浮动条的 B / 斜体 / code，或使用 Ctrl+B / Ctrl+I / Ctrl+E。
2. 长文写作可点展开至约 70vh。

表格

1. 输入表头如 |a|b|，Enter 后补全 |---|---| 与空行，caret 落在空行。

更多按键组合见仓库 README 的 Quick reference 表格（Enter/Shift+Enter 在 list、quote、未闭合 fence、表头等上下文下的行为）。

适用场景与注意¶

适合谁

• 长期在 DSH Web 里写 Markdown 提示词、说明、带代码块的调试上下文，希望输入阶段就看到样式与高亮，而不是只盯着反引号和星号。
• 已使用或计划使用 DSH 0.1.5-rc.2 及以上 的 web profile，且浏览器为 Chrome、Edge 等 Chromium 内核。

使用前请自行确认

• DSH 社区插件目录（如 skillhub.cn）与 DeepSeek / 幻方无官方从属关系；安装前阅读仓库源码与 MIT 许可证，插件在当前 dsh 进程权限下随 Web 客户端加载。
• 非 Chromium 浏览器可能因 CSS 能力不满足而无法正常工作。
• 0.1.x textarea 时代请查 README 中的 dsh-composer-md FAQ，勿与本插件混用预期。

结尾¶

dsh-composer-live 把 DSH Web composer 收成「源稿即发送内容、视觉即 Markdown 渲染」的 live 编辑体验，并补上代码高亮、列表/引用续行、工具栏与粘贴包块等写作细节，同时明确不替代官方 composer 的基础交互。

• 目录页：https://www.skillhub.cn/plugins/zeusxx/dsh-composer-live
• 仓库：https://github.com/zeusxx/dsh-composer-live