Markdown Editor

A customizable React markdown editor component library built on react-markdown and bundled with commonly used features for the AkiWiki.com CMS.

Features

- Edit-in-Place - Click to edit, click outside to save with auto-resize
- Lock Toggle - Protect content with read-only mode (controlled or uncontrolled)
- Fully Customizable Styles - Style each markdown element independently
- Custom Component Injection - Embed interactive React components directly in markdown
- XSS Protection - Built-in HTML sanitization using rehype-sanitize
- Real-time Preview - Live markdown rendering with debounced updates
- Github-Flavoured Markdown (GFM) Support - Tables, strikethrough, task lists, autolinks
- LaTeX Math - KaTeX support via remark-math and rehype-katex
- Syntax Highlighting - Code blocks with customizable highlighter
- TypeScript - Full type safety
- Tested - Comprehensive test suite with 56+ passing tests
- Lightweight - Minimal dependencies, optimized bundle size

Installation

``bash
npm install @akiwiki/markdown-editor
`

Important: To use LaTeX math features, import KaTeX CSS in your app:

`tsx
// In your main App.tsx or index.tsx
import 'katex/dist/katex.min.css';
`

Demo

🚀 View Live Demo

To run the interactive demo locally:

`bash


Navigate to the demo directory

The demo will be available at http://localhost:5173 and showcases all features including:
- Click-to-edit functionality
- Card components with save indicators
- Custom styling examples
- Syntax highlighting options
- LaTeX math support

Quick Start

`tsx
import { MarkdownEditor } from '@akiwiki/markdown-editor';

function App() {
const [value, setValue] = useState('# Hello World');

return (
value={value}
onChange={setValue}
/>
);
}
`

Live Preview Modes

$3

`tsx
import { MarkdownEditorWithPreview } from '@akiwiki/markdown-editor';

function App() {
const [value, setValue] = useState('');

return (
value={value}
onChange={setValue}
defaultMode="split" // 'edit' | 'split' | 'preview'
showModeToggle={true} // Show mode switch buttons
debounceMs={100} // Debounce preview updates
enableMath={true}
enableGfm={true}
/>
);
}
`

$3

- Edit Mode: Focus on writing markdown
- Split Mode: Edit and preview side-by-side (default)
- Preview Mode: View rendered output only

$3

Use debounceMs to delay preview rendering during rapid typing:

`tsx
value={value}
onChange={setValue}
debounceMs={300} // Update preview 300ms after typing stops
/>
`

Edit-in-Place Mode

$3

`tsx
import { EditInPlaceMarkdown } from '@akiwiki/markdown-editor';

function MyNotes() {
const [content, setContent] = useState('');

return (
value={content}
onChange={setContent}
emptyText="Click to start writing..."
showEditIcon={true}
/>
);
}
`

$3

`tsx
import { EditInPlaceMarkdownCard } from '@akiwiki/markdown-editor';

title="Meeting Notes"
value={content}
onChange={setContent}
showSaveIndicator={true}
enableMath={true}
/>
`

$3

- Click to edit, click outside to save
- Keyboard shortcuts (Escape to cancel)
- Empty state with custom placeholder
- Hover effects and edit indicators
- Optional save indicator with timestamp

$3

- Escape: Cancel and revert changes

$3

Protect content from accidental edits with the lock toggle feature:

`tsx
import { EditInPlaceMarkdown } from '@akiwiki/markdown-editor';

function ProtectedContent() {
const [content, setContent] = useState('# Important Content');
const [isLocked, setIsLocked] = useState(false);

return (
value={content}
onChange={setContent}
locked={isLocked}
onLockedChange={setIsLocked}
showLockToggle={true} // Show lock/unlock button
/>
);
}
`

Features:
- 🔒 Visual lock/unlock button with icons
- Controlled or uncontrolled lock state
- Prevents editing when locked
- Customizable lock button visibility
- Color-coded feedback (gray background when locked)

Props:
- locked?: boolean - Controlled lock state
- onLockedChange?: (locked: boolean) => void - Lock state change callback
- showLockToggle?: boolean - Show/hide lock button (default: false)

Uncontrolled Mode:
`tsx
value={content}
onChange={setContent}
showLockToggle={true} // Component manages lock state internally
/>
`

Custom Component Injection

Inject interactive React components directly into your markdown content using PascalCase syntax. This powerful feature allows you to create rich, interactive documentation and content.

$3

`tsx
import { MarkdownRenderer } from '@akiwiki/markdown-editor';

// 1. Define your custom components
const Alert = ({ children, type = 'info' }) => {
const colors = {
info: 'bg-blue-50 border-blue-200 text-blue-800',
warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
error: 'bg-red-50 border-red-200 text-red-800',
success: 'bg-green-50 border-green-200 text-green-800',
};

return (