MDXEditor Extras

A monorepo containing plugins and shared tooling for MDXEditor.

Packages

@mdxeditor/source-preview-plugin

An MDXEditor plugin that provides side-by-side source code and preview display. Allows users to toggle between rich-text editing and viewing the raw markdown source alongside the rendered preview.

Features:

• Side-by-side source and preview display
• Seamless switching between rich-text and source modes
• Bring your own source editor (supports Monaco, CodeMirror, etc.)
• Built with gurx reactive state management

Installation:

npm install @mdxeditor/source-preview-plugin
# or
pnpm add @mdxeditor/source-preview-plugin

@mdxeditor/typeahead-plugin

An MDXEditor plugin that provides flexible typeahead autocomplete functionality. Supports multiple simultaneous typeahead types (mentions, hashtags, etc.) with customizable trigger characters, data sources, and rendering.

Features:

• Multiple typeahead types in a single editor
• Custom trigger characters (@, #, etc.)
• Async data source support
• Customizable rendering for menu items and inline display
• Persists to markdown as text directives

Installation:

npm install @mdxeditor/typeahead-plugin
# or
pnpm add @mdxeditor/typeahead-plugin

@mdxeditor/tooling

Shared development tooling and configuration for MDXEditor packages. Provides consistent ESLint, TypeScript, Prettier, and Vite configurations across all packages.

Includes:

• Strict TypeScript configuration
• ESLint with typescript-eslint strictTypeChecked rules
• Prettier formatting configuration
• Vite library build configuration with TypeScript declarations

Development

This is a pnpm workspace monorepo. Make sure you have pnpm installed.

Setup

pnpm install

Build

# Build all packages
pnpm build

# Build specific package
pnpm --filter @mdxeditor/source-preview-plugin build

Development Commands

pnpm lint              # Lint all packages
pnpm format            # Format code with Prettier
pnpm format:check      # Check formatting
pnpm type-check        # TypeScript type checking

Working on a Package

cd packages/source-preview-plugin

pnpm dev               # Start Ladle component dev server
pnpm build             # Build the package
pnpm lint              # Lint the package
pnpm type-check        # Type check the package

License

MIT