JunNanLYS/dsh-markdown-wysiwyg

dsh-input-markdown

See your markdown rendered live as you type in the DeepSeek Harness (dsh) web composer

未分類cordis-plugindeepseek-harnessmarkdown

dsh-markdown-wysiwyg

在 DeepSeek Harness(dsh)web 端输入框里写 markdown,所见即所得:敲 ## 直接变成 H2 标题的字,**加粗** 直接显示为粗体——像 Codex 那样,而发给模型的仍是完整 markdown 源码。

转型进行中:本仓库正从"输入框上方预览面板"(v0.1 形态,已下述交付)转向"输入框内 WYSIWYG"(本形态)。转型完成前,以下描述的是当前可用版本的行为;WYSIWYG 落地后预览面板将移除。

rich markdown live preview

code block live preview

你在输入框里敲 # 标题、**加粗**、列表、表格、代码块、数学公式……预览面板即时出现在输入框上方,渲染效果与对话区模型输出完全一致(同一个官方渲染器)。发送前就能确认排版,不用发出去再检查。纯文本时面板自动隐藏,零打扰。

面板顺手不打扰:

  • 可一键收起/展开(点面板头部即可,收起后保留一行草稿摘要,继续输入实时更新)
  • 跟随你的编辑位置:在末尾继续写时预览自动滚到最新内容;翻上去核对时不会乱跳
  • 点击预览(含代码块复制按钮)不会抢走输入焦点,打字不断流
  • 文案跟随宿主界面语言(中文界面显示"复制/收起预览"等)
  • 键盘可达(Tab 聚焦预览后方向键滚动),亮/暗主题视觉与输入卡一致

它能预览什么

与 dsh 对话区同一套渲染能力(GFM + 数学 + 代码高亮):

  • 标题、加粗、斜体、删除线
  • 有序 / 无序列表、任务列表
  • 引用块、分割线
  • 行内代码与围栏代码块(语法高亮)
  • 表格、链接、图片
  • LaTeX 数学($...$ / $$...$$)

只有当草稿里出现成形的 markdown 语法时预览才会出现;清空或删掉语法后自动消失。

安装

dsh plugin --profile web add dsh-markdown-wysiwyg

装好即生效,无需配置;重启 dsh web 后在输入框里输入任意 markdown 即可看到效果。

需要宿主运行时 @deepseek-ai/cordis ≥ 4.0.1(dsh 0.1.2 线自带)。

卸载

dsh plugin --profile web remove dsh-markdown-wysiwyg

工作原理(一段话版)

插件在官方输入区扩展点 conversation.input.dock(输入卡上方的整宽条目 slot)注册一个预览条目,通过官方输入状态通道订阅输入框实时文本(InputState.draft),渲染复用官方 @deepseek-ai/dsh-client-ui-primitives 的 MarkdownText 组件——全部走 dsh 公开插件接口,不改宿主 DOM、不注入输入流程、无宿主侧行为。

开发

pnpm install
pnpm run build      # dist/index.js(宿主侧,空 apply)+ dist/client.js(浏览器 bundle)
pnpm run typecheck
  • 源码:client/src/(浏览器半边)、src/(宿主半边,无行为)
  • 构建协议:scripts/build-client.mjs 产出 window.__ModuleLoader__.load({ id, factory }) 形态的 bundle,id 与包名一致
  • 本地试装:dsh plugin --profile <name> add D:/project/dsh-markdown-wysiwyg

License

MIT