📘 MarkdownEditor (React 19 Component)

A lightweight, split‑pane Markdown IDE with live preview, rich toolbar, dark/light themes, resizable panes, full‑screen, undo/redo history, HTML & PDF export, and first‑class TypeScript support.

✨ Features

• 📝 Live Preview – instant Markdown‑to‑HTML rendering with scroll‑sync.
• 🌗 Dark / Light Toggle – built‑in button or controlled via prop.
• 🎚️ Resizable Split Panes – drag or keyboard resize (10–90 %).
• 🖥️ Full‑Screen Mode – native browser or in‑page overlay.
• 🛠️ Rich Toolbar & Hot‑Keys – bold, italic, heading, code, quote, list, table, link, image, Undo / Redo.
• ♻️ History Stack – granular undo/redo with configurable depth.
• 📤 Export – one‑click download as static HTML or PDF.
• 🔀 Partial Views – editor‑only, preview‑only, or both.
• 🔒 Read‑Only Mode – lock editing while keeping live preview.
• 🎨 Custom Styling – override CSS variables or pass classNames.
• ⚛️ Built with React 19 + TypeScript – zero CSS framework (≤ 3 kB gzip).

📦 Installation

npm install markdown-editor-ubb marked
# or
pnpm add markdown-editor-ubb marked

Peer dependencies: react@^19, react-dom@^19

🚀 Usage Examples

1. Full‑featured editor

import { useState } from "react";
import MarkdownEditor from "markdown-editor-ubb";

export default function KnowledgeBaseArticle() {
  const [markdown, setMarkdown] = useState<string>(
    `# Release notes

- Added **full‑screen** mode
- Improved dark‑mode colours`
  );

  return (
    <MarkdownEditor
      /* core control */
      value={markdown}
      onChange={setMarkdown}
      /* appearance */
      theme="dark"
      height="75vh"
      showToggle
      /* editing UX */
      showToolbar
      showUndoRedo
      resizablePanes
      initialPaneRatio={0.4} // 40 % editor / 60 % preview
      /* export & utility */
      showExportHTML
      showExportPDF
      showFullscreen
      fullscreenMode="browser" // or "system"
      /* custom styling */
      editorClassName="kb-editor"
      previewClassName="kb-preview"
      style={{ border: "2px solid var(--mde-accent)", borderRadius: 8 }}
    />
  );
}

2. Preview‑only embed

<MarkdownEditor hideEditor defaultText={markdown} readOnly />

⚙️ Props

| Prop | Type | Default | Description | | ------------------ | ------------------------ | --------- | ------------------------------------- | | value | string | — | Controlled Markdown content. | | defaultText | string | '' | Initial content in uncontrolled mode. | | onChange | (text: string) => void | — | Fires after each edit batch. | | theme | 'light' \| 'dark' | 'light' | Initial colour scheme. | | showToggle | boolean | true | Show dark/light toggle. | | height | string | '80vh' | Total component height. | | readOnly | boolean | false | Disable editing. | | hideEditor | boolean | false | Hide the editor pane. | | hidePreview | boolean | false | Hide the preview pane. | | resizablePanes | boolean | true | Enable gutter drag & keyboard resize. | | showToolbar | boolean | true | Render formatting toolbar. | | showUndoRedo | boolean | true | Show undo/redo buttons & hot‑keys. | | showFullscreen | boolean | true | Show full‑screen toggle. | | showExportHTML | boolean | false | Show Export HTML button. | | editorClassName | string | '' | Class for <textarea>. | | previewClassName | string | '' | Class for preview pane. | | style | CSSProperties | {} | Inline styles for root container. |

🛠️ Development & Contribution

npm install
npm run dev

Start editing MarkdownEditor.tsx in src/components/.

📁 Project Structure

markdown-editor-ubb/
├─ src/
│  ├─ MarkdownEditor.tsx
│  ├─ markdownEditor.css
├─ example/          # Vite demo app
├─ dist/             # build output
├─ vitest.config.ts
├─ tsconfig.json
└─ README.md

🧪 Technologies Used

• React 19
• TypeScript
• Vite
• marked

🎓 Author

Malancioiu Daniel ‑ George Framework Design – Master’s Coursework