Introduction

The DSH plugin ecosystem emphasizes “everything is a plugin.” If you need to add an editable Markdown draft surface to the composer area within dsh web composition while retaining the native composer submission path, you can install @mars.liu/dsh-rich-editor. It is a third-party DSH web plugin designed to provide a rich Markdown notebook within the composer area.

The documentation indicates the owner field is MarchLiu, and the package prefix is @mars.liu. Please refer to mars for repository writing styles. This article does not mix these different writing styles; it only references verified package names, commands, and capabilities.

Plugin Positioning

@mars.liu/dsh-rich-editor provides two entry points in the composer area:

  • Tool bar toggle: conversation.input.left
  • Editor card in the composer context stack: conversation.input.dock

Both entry points correspond to the same session-isolated notebook draft. Its role is not to replace the native composer, but to add an editable Markdown draft surface within the composer area that shares the same draft with the native composer.

Core Features

Entry Points

In the composer area, you can open the editor card via the tool bar toggle or by entering from a card in the composer context stack. These two entry points correspond to conversation.input.left and conversation.input.dock respectively.

Draft Preservation

Each session retains an independent notebook. The draft is preserved when closing or reopening panels or when the component remounts.

CodeMirror 6 Markdown Editing

The editor is based on CodeMirror 6 and the Markdown language, providing:

  • Draft syntax highlighting
  • Native undo/redo
  • Native selection

Enter Key List Editing

List editing uses Codex-style Enter behavior:

  • Pressing Enter on a non-empty list item opens the next item
  • Ordered item markers increment
  • Checkboxes reopen in an unchecked state
  • Indentation is preserved
  • Pressing Enter on an empty list item removes the marker

Submission

Submission is completed via the send path of the conversation service. If it fails, it will be displayed in the session’s composer notification channel, and the current draft will be retained.

Sync with Native Composer

The rich editor shares the same draft as the native composer. Opening/closing panels and real-time editing both sync bidirectionally; after successful submission, the drafts on both sides will be cleared.

Installation and Activation

First, ensure the environment meets the following requirements:

  • dsh family >=0.0.1-rc.1
  • dsh web composition is mounted with dsh-client-ui-conversation

The installation command is as follows, used to add the plugin to the web profile:

dsh plugin --profile web add @mars.liu/dsh-rich-editor

If you are manually composing the profile, you need to write this bundle to dsh.profile.bundles. The package comes with a cordis.patch.yml patch used to add the ui-rich-editor line; in manual profile scenarios, you must ensure this bundle is listed.

Build and test from a local checkout:

pnpm install && pnpm run build && pnpm test

Typical Usage

  1. After installing and enabling the plugin, open the notebook card in the composer area.

  2. Input Markdown content. The editor will syntax-highlight the draft based on Markdown rules and provide native undo/redo and selection.

  3. When editing a list, press Enter on a list item:
    - Non-empty items open the next item
    - Ordered items increment markers
    - Checkboxes reopen unchecked
    - Indentation is preserved
    - Empty list items remove the marker

  4. Press Mod+Enter to submit. The submission uses the conversation service’s send path; if it fails, it will be shown in the session’s composer notification channel, and the draft is retained.

Applicable Scenarios and Notes

Suitable for developers who want to use a Markdown draft editor in the composer area within dsh web composition while maintaining synchronization with the native composer’s draft and keeping the submission path consistent.

Notes before use:

  • The license is MIT.
  • The plugin runs with the permissions of the current dsh process; please check the source code, dependencies, and license before installing.
  • Depends on dsh family >=0.0.1-rc.1, and requires the dsh web composition to have dsh-client-ui-conversation mounted.
  • Editing or deleting previous items in an ordered list does not renumber subsequent items.
  • Does not support triggering integrations via / and @.
  • The draft is only valid for the session lifecycle; a full page refresh will result in loss.
  • Does not support pasting or dragging and dropping image attachments.
  • The browser bundle inlines approximately 268 kB of CodeMirror dependencies (gzipped).
  • In the development stage, stubs and aliases to the local harness checkout are used for incomplete npm dsh snapshots; remove these when a full installable closure is released for dsh.

Conclusion

@mars.liu/dsh-rich-editor provides a practical rich Markdown editing surface for the composer area: two entry points, session-level drafts, CodeMirror 6 Markdown editing, Enter key list editing, and synchronization of drafts with the native composer.

Community Directory: The verified data does not provide a specific URL; the community directory is a third-party directory for the DSH plugin ecosystem and is not the official app store.

GitHub: https://github.com/MarchLiu/dsh-rich-editor (The documentation also lists git+https://github.com/mars/dsh-rich-editor.git; these two are not unified, please verify the source of the release before use).