<< All versions

Skill v1.0.0

currentAutomated scan100/100
bhalpunia/claude-canvas/document
──Details
PublishedSeptember 29, 2026 at 10:47 PM
Content Hashsha256:fd323b9882d44b45...
Git SHA
──Files
Files (1 file, 3.3 KB)
SKILL.md3.3 KBactive
SKILL.md · 124 lines · 3.3 KB

version: "1.0.0" name: document description: | Document canvas for displaying and editing markdown content. Use when showing documents, emails, or when users need to select text for editing.

Document Canvas

Display markdown documents with optional text selection and diff highlighting.

Scenarios

display (default)

Read-only document view with markdown rendering. User can scroll but cannot select text.

bash
bun run src/cli.ts show document --scenario display --config '{
  "content": "# Hello World\n\nThis is **markdown** content.",
  "title": "My Document"
}'

edit

Interactive document view with text selection. User can click and drag to select text, which is sent via IPC in real-time.

  • Renders markdown with syntax highlighting (headers, bold, italic, code, links, lists, blockquotes)
  • Diff highlighting: green background for additions, red for deletions
  • Click and drag to select text
  • Selection automatically sent via IPC
bash
bun run src/cli.ts spawn document --scenario edit --config '{
  "content": "# My Blog Post\n\nThis is the **introduction** to my post.\n\n## Section One\n\n- Point one\n- Point two",
  "title": "Blog Post Draft",
  "diffs": [
    {"startOffset": 50, "endOffset": 62, "type": "add"}
  ]
}'

email-preview

Specialized view for email content display.

bash
bun run src/cli.ts show document --scenario email-preview --config '{
  "content": "Dear Team,\n\nPlease review the attached document.\n\nBest regards,\nAlice",
  "title": "RE: Project Update"
}'

Configuration

typescript
interface DocumentConfig {
  content: string;        // Markdown content
  title?: string;         // Document title (shown in header)
  diffs?: DocumentDiff[]; // Optional diff markers for highlighting
  readOnly?: boolean;     // Disable selection (default: false for edit)
}
interface DocumentDiff {
  startOffset: number;    // Character offset in content
  endOffset: number;
  type: "add" | "delete";
}

Markdown Rendering

Supported markdown features:

  • Headers (# H1, ## H2, etc.)
  • Bold (**text**)
  • Italic (*text*)
  • Code (` inline ` and fenced blocks)
  • Links ([text](url))
  • Lists (- or * bullets)
  • Blockquotes (>)

Selection Result

typescript
interface DocumentSelection {
  selectedText: string;   // The selected text
  startOffset: number;    // Start character offset
  endOffset: number;      // End character offset
  startLine: number;      // Line number (1-based)
  endLine: number;
  startColumn: number;    // Column in start line
  endColumn: number;
}

Controls

  • Mouse click and drag: Select text (edit scenario)
  • ↑/↓ or scroll: Navigate document
  • q or Esc: Close/cancel

API Usage

typescript
import { editDocument, displayDocument } from "${CLAUDE_PLUGIN_ROOT}/src/api";
// Display read-only document
await displayDocument({
  content: "# My Document\n\nContent here.",
  title: "View Mode",
});
// Interactive editing with selection
const result = await editDocument({
  content: "# My Document\n\nSelect some **text** here.",
  title: "Edit Mode",
  diffs: [{ startOffset: 20, endOffset: 30, type: "add" }],
});
if (result.success && result.data) {
  console.log(`Selected: "${result.data.selectedText}"`);
  console.log(`Position: ${result.data.startOffset}-${result.data.endOffset}`);
}
All versions