Introduction¶

When handling frontend pages in DSH, developers likely encounter this scenario: generating an index.html and wanting to tweak copy or layout, but being blocked by the built-in code editor—lacking WYSIWYG, requiring repeated previews for just a few lines of changes. This plugin solves that problem: it integrates TinyMCE 6’s visual editing into DeepSeek Harness’s Better Sidebar, allowing .html/.htm files to open directly in the sidebar as an editable canvas, with edited results written back to disk as-is.

Below is an introduction to gustock/tinymce-for-deepseek-harness, maintained by gustock. It is categorized as a Client-side plugin, currently has 0 stars, and the repository README states the license is MIT.

What is it¶

It is not a standalone editor, but a file viewer registered to Better Sidebar. Opening HTML in the file tree (or file links generated by the agent) will route through TinyMCE’s WYSIWYG canvas instead of the default code panel. When saving, it writes to disk via Better Sidebar’s write interface, with conflict detection; the document’s doctype, <head>, scripts, and comments are preserved byte-by-byte.

Core Features¶

The following capabilities are taken directly from the original README.

1. TinyMCE 6 WYSIWYG editing of the document body, with a toolbar trimmed for narrow sidebars: undo/redo, block/heading, inline formatting, colors, lists, alignment, link, image, table, media, and source code dialog.
2. Provides the Preview (rendered page) and Fullscreen buttons from OSS plugins.
3. Save button + Ctrl/Cmd+S, with dirty indicator and save status.
4. Disk conflict detection: if the file is changed externally after being opened, saving is rejected and prompts Reload instead of overwriting.
5. <style> blocks inside <head> are replayed in the editing canvas, making WYSIWYG closer to the real page.
6. Comes with English and Chinese UI text, which can be disabled in the Side card settings page of Better Sidebar.

Installation and Enablement¶

The installation commands given in the README are as follows. First, perform the npm installation:

dsh plugin --profile web add dsh-tinymce-html-editor

Install from source:

dsh plugin --profile web add github:gustock/TinyMCE-for-Deepseek-Harness

You can also install via the DSH interface (Settings → Plugins → Install bundle) or plugin_manager:

// plugin_manager
{ action: 'install_bundle', target: 'dsh-tinymce-html-editor@1.0.0' }

After installation, a Loader line is inserted into the bundle named tinymce-html-editor. It is important to note that the Better Sidebar bundle must be installed and enabled first for the viewer to appear. If it doesn’t take effect immediately in an already open GUI after installation, simply refresh the page. Newly added client modules can be picked up by the live plugin graph, but pages started before installation might still be running the old set of modules.

To uninstall, use plugin_manager’s remove_bundle (parameter dsh-tinymce-html-editor), or go to the Plugins page.

Typical Usage¶

The repository comes with a safe demo page sample.html. Open it in Better Sidebar to try editing, saving, and reopening, verifying the entire pipeline:

1. Open sample.html from the file tree and confirm entering the TinyMCE canvas instead of the code panel.
2. Modify some body text or an image on the canvas, observing the dirty indicator and canvas rendering.
3. Save using Save / Ctrl+S and verify that only the body is replaced while context before and after remains unchanged.
4. Modify the file externally and save again, confirming the Reload prompt appears.

A health check can be used to verify the plugin is ready; clientReady becomes true after the page finishes loading the client and registering the viewer:

{ "ok": true, "version": "1.0.0", "clientUrl": "plugins/??dsh-tinymce-html-editor/client.js&rev=…",
  "clientReady": true, "clientReadyAt": 1730000000000 }

How it Works¶

The plugin is split into two halves. The “Half” test corresponds to the responsibility table below. The Host side provides local static resources at /tinymce-editor/vendor/tinymce, while the Client side registers a .html/.htm viewer and mounts TinyMCE.

Changes are focused on the body. TinyMCE 6 removed the fullpage plugin, so this viewer does not hand over the entire document to the editor but instead splits it at <body> / </body>:

prefix (doctype + <html> + <head> + <body …>)   ← unchanged
body                                             ← edited by TinyMCE
suffix (</body> + </html>)                       ← unchanged

When saving, the body HTML produced by the editor is placed back between the prefix and suffix. The doctype, meta, script/style in head, and comments are preserved as-is; <script> / <style> inside the body are also wrapped by TinyMCE’s protect option to ensure round-trip consistency. Fragments/partials without a <body> tag are edited as a whole document.

Saving uses the sidebar’s own POST /sidebar/write, carrying the mtime at load time, so workspace permissions and conflict checks are centralized; the fs-conflict response is converted into a Reload prompt.

Use Cases and Notes¶

Suitable for teams or individuals processing HTML artifacts in DSH and already using Better Sidebar. This plugin runs as the current DSH process identity; you should check the source code and license (MIT) before installation to ensure compatibility with the environment.

Compatibility as stated in the README: DeepSeek Harness >= 0.2.1-rc.2, Better Sidebar >= 0.28.0 (viewer registered via its ctx.betterSidebar service), Node.js >= 20, platform is DSH web or desktop UI on macOS / Windows / Linux, with embedded TinyMCE 6.8.6 (MIT). The README states it has been verified on DSH 0.2.1-rc.2 (desktop, macOS) paired with Better Sidebar 0.28.0, and unit tests and a headless browser edit/save test in the package pass.

Limitations also come from the README; understand them before deployment:

1. Edit body only: Content outside <body> is preserved but uneditable; for editing the <head>, please use the code editor.
2. Relative resource paths: Relative image/link URLs are preserved as-is when saving, but the canvas parses based on the Harness page, so relative images might appear as broken images during editing; absolute URLs and data URLs work normally.
3. TinyMCE normalizes markup: Quotes, self-closing tags, whitespace, etc. will change in areas you interact with; untouched documents will round-trip unchanged.
4. This version has a strong dependency on Better Sidebar: Without it, the plugin installs successfully but does not register a viewer; the README mentions a future plan to provide a dependency-free native document preview as a fallback.
5. TinyMCE’s own UI is in English; only labels provided by the plugin are localized.

Conclusion¶

The value of this plugin lies in integrating HTML editing into the existing Better Sidebar in DSH, without introducing a new source code editor or changing permission surfaces outside the workspace: no network requests at runtime, TinyMCE and skins/plugins are all vendored inside the package, provided by the plugin’s own Host routing, with no CDN, no API key, no telemetry; it only reads/writes .html/.htm in the local workspace and provides path traversal protection. If you already use Better Sidebar and need to modify HTML bodies directly in DSH, it is a very low-cost option; to modify the <head> or perform structural rewrites, you still need to go back to the code editor.

Directory: https://www.skillhub.cn/plugins/gustock/TinyMCE-for-Deepseek-Harness

GitHub: https://github.com/gustock/TinyMCE-for-Deepseek-Harness