VEDA Content Editor

A powerful MDX editor component for React applications, built specifically for NASA's VEDA (Visualization, Exploration, and Data Analysis) project. This editor provides rich-text editing capabilities with support for custom components like interactive maps and charts.

Features

📝 Rich MDX Editing: Full-featured markdown and MDX editing with live preview
🗺️ Interactive Map Component: Embed and configure maps with various datasets and layers
📊 Chart Component: Create and customize data visualizations
🎨 WYSIWYG Interface: User-friendly interface with toolbar controls
📱 Responsive Design: Works seamlessly across different screen sizes
🔍 Source Mode: View generated MDX source (read-only to prevent data loss)
🎯 Custom Components: Support for NASA VEDA-specific components

Installation

npm install veda-content-editor

yarn add veda-content-editor

Usage

Basic Setup

import { VEDAContentEditor } from 'veda-content-editor';
import 'veda-content-editor/style.css';

function App() {
  const handleChange = (content) => {
    console.log('Content updated:', content);
  };

  const vedaConfig = {
    envMapboxToken: 'your-mapbox-token',
    envApiStacEndpoint: 'your-stac-endpoint',
    envApiRasterEndpoint: 'your-raster-endpoint',
  };

  return (
    <VEDAContentEditor
      initialContent="# Welcome to VEDA Editor"
      onChange={handleChange}
      vedaConfig={vedaConfig}
    />
  );
}

Full Example with All Props

import { VEDAContentEditor } from 'veda-content-editor';
import 'veda-content-editor/style.css';

function App() {
  const initialContent = `
# My Document

This is a **VEDA** content editor with support for:

- Rich text formatting
- Custom components
- Interactive maps
- Data visualizations
  `;

  const datasets = [
    {
      id: 'dataset-1',
      name: 'Sample Dataset',
      layers: [
        { id: 'layer-1', name: 'Layer 1' },
        { id: 'layer-2', name: 'Layer 2' }
      ]
    }
  ];

  const vedaConfig = {
    envMapboxToken: process.env.REACT_APP_MAPBOX_TOKEN,
    envApiStacEndpoint: process.env.REACT_APP_STAC_ENDPOINT,
    envApiRasterEndpoint: process.env.REACT_APP_RASTER_ENDPOINT,
  };

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <VEDAContentEditor
        initialContent={initialContent}
        onChange={(content) => console.log(content)}
        placeholder="Start typing..."
        className="my-custom-class"
        allAvailableDatasets={datasets}
        vedaConfig={vedaConfig}
      />
    </div>
  );
}

Props

Prop	Type	Required	Description
`initialContent`	`string`	No	Initial MDX content to display in the editor
`onChange`	`(content: string) => void`	No	Callback function triggered when content changes
`placeholder`	`string`	No	Placeholder text when editor is empty
`className`	`string`	No	Additional CSS classes for the editor container
`allAvailableDatasets`	`Array<Dataset>`	No	Available datasets for map components
`vedaConfig`	`VedaConfig`	Yes	Configuration object with API endpoints and tokens

VedaConfig Object

interface VedaConfig {
  envMapboxToken: string;      // Mapbox API token for map rendering
  envApiStacEndpoint: string;  // STAC API endpoint
  envApiRasterEndpoint: string; // Raster API endpoint
}

Custom Components

Map Component

The editor supports embedding interactive maps with the following features:

Dataset and layer selection
Zoom and center controls
Date/time selection for temporal data
Comparison mode for viewing changes over time
Attribution and captions

Chart Component

Create data visualizations with:

Line charts
Time series data
Custom color schemes
Axis labels and formatting
Data highlighting

Toolbar Features

Text Formatting: Bold, italic, underline, strikethrough
Headings: H1-H6 support
Lists: Ordered and unordered lists
Code: Inline code and code blocks
Links: Create and edit hyperlinks
Images: Insert and manage images
Tables: Create and edit tables
Custom Components: Insert maps and charts via toolbar buttons
Source Mode: View generated MDX (read-only)

Environment Variables

When using this package, ensure your application provides the following environment variables:

VITE_MAPBOX_TOKEN=your-mapbox-token
VITE_API_STAC_ENDPOINT=your-stac-endpoint
VITE_API_RASTER_ENDPOINT=your-raster-endpoint

Or pass them directly through the vedaConfig prop.

Styling

The editor comes with default styles. Import the CSS file:

import 'veda-content-editor/style.css';

Full Width Layout

To make the editor take full viewport width and height:

<div style={{ width: '100%', height: '100vh' }}>
  <VEDAContentEditor {...props} />
</div>

Known Issues

Source Mode: Currently read-only to prevent loss of custom components when editing raw MDX
Custom Components: Must be inserted using toolbar buttons; manual MDX editing of custom components is not supported

Development

Building from Source

# Clone the repository
git clone https://github.com/ajinkyakulkarni/veda-content-editor.git
cd veda-content-editor

# Install dependencies
npm install

# Build the package
npm run build:lib

# Run in development mode
npm run dev

Testing Locally

To test the package locally in another project:

# In the veda-content-editor directory
npm link

# In your test project
npm link veda-content-editor

Recent Updates

Version 0.1.18

Fixed environment variable loading issues
Resolved duplicate context provider problems
Simplified UI by removing unnecessary tabs
Fixed input styling issues (black textbox problem)
Fixed React hooks errors when collapsing editors
Made source view read-only to prevent component loss
Added full-width support
Improved overall stability and performance

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Support

For issues and questions, please open an issue on GitHub.

Credits

Built for NASA's VEDA project by the development team.