@dsh-external/dsh-file-explorer-preview-code
适用于 DSH Web 的 CodeMirror 6 代码预览和编辑器，通过按语言提供语法高亮，覆盖 dsh-file-explorer 的纯文本预览
插件会安装到这里；不确定时保持 web。
npx -y @deepseek-ai/dsh plugin --profile web add github:wolfsonliu/dsh-file-explorer-preview-code#52c686b65b1460ea30d3b0fc8d3f3c825ed897e5
File Explorer Preview Code 以 @dsh-external/dsh-file-explorer-preview-code 发布，当前版本为 0.4.0。Plugin Hub 会校验它的 manifest，并保存精确安装来源，便于复现安装结果。
中文 | English
A CodeMirror 6 code preview and editor for DSH Web, built on codemirror (basicSetup) + @codemirror/language-data (per-language highlighting) + @codemirror/theme-one-dark (dark theme). It registers a named Code Editor viewer and overrides dsh-file-explorer's built-in plain-text preview (priority 0) at priority 10, giving code files syntax highlighting plus in-place editing with autosave.
| Dark theme | Light theme |
|---|---|
| Code preview in dark theme | Code preview in light theme |
@codemirror/language-data (~90 languages), so .ts/.tsx/.js/.jsx/.json/.css/.html/.py/.yaml/.yml/.toml/.sh/.go/.rs/.java/.c/.cpp/.h/.xml/.sql/.ini each get the right tokens.<pre>.Ctrl/Cmd+S saves immediately.Ln/Col cursor position, and the save state (Unsaved / Saving… / Saved / Save failed) with a manual Save button.data-ds-dark-theme) live.registerViewer, so it appears alongside the built-in "Text" viewer in the file row's Open with… menu and the preview-panel switcher.This plugin requires @dsh-external/dsh-file-explorer — it injects the fileExplorer cordis service, which provides registerViewer (named viewers), registerPreview (legacy anonymous override), readRawFile, and writeFile (the save path). The named "Code Editor" viewer needs core v0.9.0+; older cores fall back to the anonymous per-extension override. Install and enable dsh-file-explorer before this plugin:
git clone https://github.com/wolfsonliu/dsh-file-explorer.git
cd dsh-file-explorer
npm install && npm run build
dsh plugin --profile web add .
@dsh-external/dsh-file-exploreris installed from git (github:wolfsonliu/dsh-file-explorer) sotscresolves its./clienttype definitions. To develop against an unpublished local checkout instead, point that dependency at your own path.
From the git repository:
git clone https://github.com/wolfsonliu/dsh-file-explorer-preview-code.git
cd dsh-file-explorer-preview-code
npm install && npm run build
dsh plugin --profile web add .
dsh web
The client entry injects fileExplorer and locale, then registers one CodePreview component for every code extension at priority 10. On core v0.9.0+ it uses registerViewer, exposing a single named Code Editor viewer in Open with…; on older cores it falls back to the anonymous per-extension registerPreview loop:
export const inject = ['fileExplorer', 'locale']
export function apply(ctx) {
ctx.effect(() => {
const readRaw = typeof ctx.fileExplorer.readRawFile === 'function'
? ctx.fileExplorer.readRawFile.bind(ctx.fileExplorer)
: undefined
const component = makeCodePreview(ctx.fileExplorer.writeFile, readRaw, ctx.locale.bind(CODE_NS))
const dispose = registerCodeViewer(ctx.fileExplorer, component)
return () => dispose()
})
}
function registerCodeViewer(fileExplorer, component) {
if (typeof fileExplorer.registerViewer === 'function') {
return fileExplorer.registerViewer({
id: 'code-editor', label: 'Code Editor', exts: CODE_EXTS, component, priority: 10,
})
}
const disposers = CODE_EXTS.map(ext => fileExplorer.registerPreview(ext, component, 10))
return () => { for (const d of disposers) d() }
}
Registered extensions (CODE_EXTS): ts tsx js jsx json css html py yaml yml toml env sh go rs java c cpp h xml sql graphql cfg ini.
The editor component handles four preview kinds:
| Kind | Behavior |
|---|---|
text | Uses preview.content directly (files ≤ 2 MiB) |
text-large | Calls readRawFile(filePath), decodes the ArrayBuffer as UTF-8, and opens the editor (text files over 2 MiB) |
binary | Same as text-large — readRawFile + decode |
too-large | Same as text-large — readRawFile + decode (images over their cap; not delivered to this plugin's registered code extensions) |
When readRawFile is unavailable (older dsh-file-explorer core), text-large and binary files show an upgrade prompt. Edits always flow back through fileExplorer.writeFile(filePath, content).
The bundle inserts a single roster row (no host-side configuration):
- insert:
- id: file-explorer-preview-code
name: '@dsh-external/dsh-file-explorer-preview-code'
@codemirror/language-data matches 21 of the 24 extensions to a language. env and graphql have no language support and open as a plain (un-highlighted) editable buffer; cfg matches language-data's legacy TTCN_CFG (a matching artifact, not a semantic ini match). All still open in the editor.
@codemirror/* language packages are inlined into a single lib/client.js (~2.7 MB raw, loaded lazily on demand)..md/.mdx stay with dsh-file-explorer's built-in markdown preview.maxTextBytes (2 MiB) arrive as preview.kind === 'text-large' and are fetched via readRawFile then loaded into the editor. Very large files (hundreds of MiB) may cause browser performance issues due to the single-buffer CodeMirror model. readRawFile is part of the stable service contract (added in v0.1.0).This repo is the reference implementation for building a preview plugin. See docs/developing-preview-plugins.md (中文) for the contract, a minimal skeleton, bundling notes, and i18n.
.cif/.pdb, built on the same fileExplorer contract.npm install
npm run check # tsc type check
npm test # vitest unit tests
npm run build # tsc + tsdown (host ESM stub + client CJS bundle)
After
npm run build, hard-refresh the browser (Ctrl/Cmd+Shift+R):dsh webmay keep serving a cached plugin bundle, so a soft reload can leave your latest build unused.