Cherry Markdown Writer

Cherry Markdown Writer is a lightweight, extensible JavaScript Markdown editor that runs in the browser or on a server via Node.js.

Key Capabilities:

• Out-of-the-box: Supports common Markdown syntax (headings, TOC, flowcharts, formulas) immediately upon instantiation.
• Streaming rendering: Optimized for AI Chat scenarios by auto-completing unfinished Markdown fragments during token streaming.
• Rich Editing: Includes multi-cursor editing, floating/bubble toolbars, floating TOC, VIM mode, and shortcut customization.
• Diagrams & Media: Supports Mermaid diagrams (with drag-to-resize), math formulas, table-to-chart, and image/audio/video embedding.
• Interoperability: Supports pasting from rich text as Markdown and exporting to Image or PDF.
• Extensibility: Pure JavaScript implementation with no framework dependencies; supports custom syntax, toolbar buttons, and themes.

The @cherry-markdown/miniprogram package exports the CherryStream class. It converts Markdown into structured, WXML-friendly data (blocks and runs) instead of updating a DOM.

Key behaviors:

• setMarkdown(markdown, options): Accepts the full accumulated Markdown string. It re-renders the entire content to ensure unclosed syntax is handled correctly.
• Streaming Optimization: During streaming, use { deferImages: true } to render image placeholders. Once the stream is complete, call setMarkdown again with { deferImages: false } to render the actual images.
• Performance: For high-frequency model output, the application layer should throttle setData updates (e.g., once every 50-100ms) rather than calling it for every chunk.
• Responsibility: The package does NOT handle SSE requests, byte decoding, framing, or JSON protocols; the application must manage the data stream and pass the accumulated string to CherryStream.

import CherryStream from '@cherry-markdown/miniprogram';

const page = this;
const cherry = new CherryStream();
let markdownContent = '';

function render(streaming) {
  page.setData({
    blocks: cherry.setMarkdown(markdownContent, { deferImages: !streaming }),
    streaming,
  });
}

function finishStream() {
  render(false);
}

// Business-side SSE client extracts Markdown string and calls this:
function onMarkdownChunk(chunk) {
  markdownContent += chunk;
  render(true);
}

function onStreamComplete() {
  finishStream();
}

The @cherry-markdown/miniprogram package exposes CherryStream, which converts Markdown into structured, WXML-friendly view data.

Implementation Details

• Input: Use setMarkdown(markdownContent, options) to pass the accumulated Markdown string.
• Streaming: While a stream is active, pass { deferImages: true } to render image placeholders. When the stream completes, call setMarkdown once with { deferImages: false } to render actual images.
• Performance: For high-frequency model output, batch your setData calls (e.g., every 50-100 ms) instead of updating on every single chunk.
• Responsibility: The package does not handle SSE requests, decoding, framing, or payload extraction. You must implement your own transport layer.
• Rendering: The package returns data blocks; you must provide your own WXML templates, styles, and interaction handlers (like link taps) to render these blocks.

import CherryStream from '@cherry-markdown/miniprogram';

const page = this;
const cherry = new CherryStream();
let markdownContent = '';

function render(streaming) {
  page.setData({
    blocks: cherry.setMarkdown(markdownContent, { deferImages: !streaming }),
    streaming,
  });
}

function finishStream() {
  render(false);
}

// Your SSE client extracts Markdown strings from the transport.
function onMarkdownChunk(chunk) {
  markdownContent += chunk;
  render(true);
}

function onStreamComplete() {
  finishStream();
}

The editor object defines the user interface and interaction model of the editor.

• defaultModel: Sets the initial view mode: 'edit&preview' (split), 'editOnly' (editor only), or 'previewOnly' (preview only).
• keyMap: Sets the keyboard shortcut style ('sublime' or 'vim').
• writingStyle: Sets the writing mode: 'normal', 'typewriter', or 'focus'.
• convertWhenPaste: If true, automatically converts pasted HTML to Markdown.
• suggester: Configures the autocomplete/suggestion system. You can:
  • Replace the system list via systemSuggestList.
  • Append to it via extendSystemSuggestList.
  • Define custom triggers (e.g., @user, $variable) via the suggester array using keyword and suggestList functions.

editor: {
  defaultModel: 'edit&preview',
  keyMap: 'sublime',
  writingStyle: 'typewriter',
  suggester: [
    {
      keyword: '@',
      suggestList(word, callback) {
        // Custom logic for @mentions
        callback([{ label: 'User A', value: '@User A ', icon: 'user' }]);
      }
    }
  ]
}