Skip to content

[feature]: Add copy JSON feature to tools menu #576

@Viateur-akimana

Description

@Viateur-akimana

Feature

Feature Request

Description

Add a new "Copy JSON" feature to the Tools menu that allows users to quickly copy formatted or minified JSON to their clipboard.

Problem

Currently, users need to manually select and copy JSON text from the editor, which is inconvenient and error-prone, especially with large JSON documents.

Proposed Solution

Add a "Copy JSON" menu item in the Tools dropdown that opens a modal with:

  • Formatted tab: Pretty-printed JSON with indentation
  • Minified tab: Single-line minified JSON
  • Copy buttons for each format
  • Toast notifications confirming successful copy
  • Support for dark/light themes

Benefits

Quick and convenient clipboard access for JSON data
Support for multiple formats (formatted/minified)
Better user experience with visual feedback
No need to manually select text from editor
Improved workflow for sharing JSON

Design Approach

  • Similar to existing modals (SchemaModal, DownloadModal)
  • Use Monaco Editor for displaying JSON with syntax highlighting
  • Dark/light theme support via useConfig hook
  • Mantine UI components for consistency
  • Proper error handling and user feedback

Use Case Example

  1. User has a large JSON file loaded in editor
  2. User clicks "Tools" menu
  3. User clicks "Copy JSON"
  4. Modal opens showing formatted JSON
  5. User clicks "Copy Formatted" button
  6. Toast notification confirms: "Formatted JSON copied to clipboard!"
  7. User can now paste JSON elsewhere

Acceptance Criteria

  • "Copy JSON" menu item appears in Tools dropdown
  • Modal opens with two tabs: Formatted and Minified
  • Formatted tab shows pretty-printed JSON with indentation
  • Minified tab shows single-line JSON
  • Copy buttons actually copy text to clipboard
  • Toast notifications appear on successful copy
  • Works in both dark and light themes
  • Proper error handling for clipboard access issues
  • No console errors or warnings
  • Follows existing code patterns and style guide
  • Component integrates with Zustand state management

Alternative solutions or implementations

Adding keyboard shortcut (Cmd/Ctrl + Shift + C) for quick access

Other context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureFeature request or suggestion

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions