Advanced Markdown Editor (React)

A Markdown-first, feature-rich React editor, optimized for large Markdown files and tables, with:

• Markdown editing with live preview
• Monaco Editor fallback for non-Markdown formats
• @mention suggestions
• /slash commands
• Table editing (rows, columns, headers)
• Paste images (Base64, no size restriction)
• Performance optimizations for big files
• Dual mode: Edit / Preview / Both

Features

| Feature | Description | |-------------------------------|-------------| | Markdown Editing | Full Markdown support including tables, headings, code blocks | | Live Preview | Render Markdown in real-time alongside editor | | @mention | Type @ to trigger suggestion dropdown | | /slash Commands | Type / to insert headings, bold, italics, tables, etc. | | Table Editing | Add/delete rows and columns, resize columns, edit cells inline | | Paste Images | Automatically convert to Base64, no size restriction | | Large File Optimization | Memoized preview + Monaco largeFileOptimizations | | Non-Markdown Formats | Fallback to Monaco Editor for JS, JSON, etc. | | Tooltip Hints | Hover table headers/rows to show operation shortcuts | | Modes | Edit / Preview / Both |

Installation

npm install advanced-markdown-editor

Dependencies:

• @monaco-editor/react
• react-markdown
• remark-gfm
• react-window (optional, table virtualization)

Usage

import { useState } from 'react'
import { AdvancedEditor } from 'advanced-markdown-editor'

export default function App() {
  const [content, setContent] = useState('# Hello Advanced Markdown Editor\nTry @jason.h or /Heading 2')

  return (
    <div style={{ padding: 24 }}>
      <AdvancedEditor value={content} onChange={setContent} format="markdown" height="600px" />
    </div>
  )
}

• format="markdown" → Markdown-first mode
• format="other" → Monaco fallback for other formats

Modes

• Edit → Markdown editing only
• Preview → Markdown preview only
• Both → Split-screen edit + preview

Performance Optimization

Large files and tables handled using:

• Monaco largeFileOptimizations
• useMemo for Markdown preview
• Ready for table virtualization using react-window
• Paste images unrestricted via Base64
• Optimized event handling for @mention and /slash suggestions

Limitations

• Desktop-focused (not optimized for mobile)
• Very large Base64 images may increase document size
• Single-user only (no collaborative editing)
• Markdown-first, not fully WYSIWYG
• Table virtualization optional; recommended for extremely large tables

GitHub Actions: Auto Build & Publish

This project includes an automatic npm publish workflow:

• Workflow path: .github/workflows/publish.yml
• Trigger: push to main branch
• Steps:
  1. Checkout repository
  2. Setup Node.js
  3. Install dependencies
  4. Build TypeScript (tsc --declaration --outDir dist)
  5. Publish to npm using NODE_AUTH_TOKEN (stored as GitHub Secret)

Every push to main automatically updates the npm package.

License

MIT License