document

mailshieldai's avatarfrom mailshieldai

Document canvas for displaying and editing markdown content.Use when showing documents, emails, or when users need to select text for editing.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Editing and Rewriting]

When & Why to Use This Skill

This Claude skill provides an interactive document canvas designed for displaying and editing markdown content. It bridges the gap between AI generation and content refinement by allowing users to view documents, draft emails, and select specific text segments for targeted editing. With features like real-time text selection, markdown rendering, and diff highlighting, it optimizes the collaborative writing process and enhances document-based workflows.

Use Cases

  • Content Revision & Polishing: Highlight specific sections of a blog post or article within the canvas to request Claude to rewrite, shorten, or change the tone of the selected text.
  • Professional Email Drafting: Compose and preview emails in a specialized view, ensuring formatting is correct and allowing for precise adjustments to specific sentences before finalization.
  • Technical Documentation Updates: Display README files or technical guides with markdown support, enabling users to select and update specific code blocks or documentation sections easily.
  • Collaborative Document Review: Review project proposals or reports using diff highlighting to visually track additions and deletions, making the feedback loop more efficient.
namedocument
description|

Document Canvas

Display markdown documents with optional text selection and diff highlighting.

Example Prompts

Try asking Claude:

  • "Draft an email to the marketing team about the Q1 product launch"
  • "Help me edit this blog post - show it so I can highlight the parts to revise"
  • "Write a project proposal and let me review it"
  • "Show me the README so I can select sections to update"
  • "Compose a response to this customer complaint"

Scenarios

display (default)

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

canvas_spawn({
  kind: "document",
  scenario: "display",
  config: JSON.stringify({
    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
canvas_spawn({
  kind: "document",
  scenario: "edit",
  config: JSON.stringify({
    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.

canvas_spawn({
  kind: "document",
  scenario: "email-preview",
  config: JSON.stringify({
    content: "Dear Team,\n\nPlease review the attached document.\n\nBest regards,\nAlice",
    title: "RE: Project Update"
  })
})

Configuration

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

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)
  • Up/Down or scroll: Navigate document
  • q or Esc: Close/cancel

API Usage

// Display read-only document
canvas_spawn({
  kind: "document",
  scenario: "display",
  config: JSON.stringify({
    content: "# My Document\n\nContent here.",
    title: "View Mode",
  })
});

// Interactive editing with selection
canvas_spawn({
  kind: "document",
  scenario: "edit",
  config: JSON.stringify({
    content: "# My Document\n\nSelect some **text** here.",
    title: "Edit Mode",
    diffs: [{ startOffset: 20, endOffset: 30, type: "add" }],
  })
});

// Get current selection from a running canvas
canvas_selection({ id: "document-1234567890-abc123" });
// Returns: { success: true, selection: { selectedText: "text", startOffset: 30, endOffset: 34 } }