🧩 MDC Editor for Directus

[!CAUTION]

🚨 Beware: Early Development

This extension is in active, early development. Breaking changes can happen at any moment. Use with caution in production environments and always back up your component definitions.

A hybrid TipTap + Monaco editor designed for content creators who need the comfort of a visual editor but the precision (and portability) of raw Markdown.

🤖 Why this editor? (The AI-Refinement Workflow)

If you use AI to help write or refine your blog posts, you know the frustration: copy-pasting from a standard visual editor into ChatGPT or Claude often strips your headers, breaks your links, and ruins your formatting.

This editor is built to solve that:

• Visual Drafting: Use the TipTap-powered visual mode for a seamless writing experience.
• Markdown Integrity: Unlike standard TipTap setups, this editor doesn't just "export" HTML. It manages a real MDC Markdown AST.
• The Raw Toggle: Switch to the Raw Mode (powered by Monaco) to get a perfect Markdown string.
• AI Round-tripping: Copy the raw Markdown into your AI chatbot. When the AI gives you an improved version, paste it straight back into the Raw window. Toggle back to Visual, and your formatting remains perfectly intact.

✨ Features

• Hybrid Toggling: Seamlessly switch between Visual (TipTap) and Raw (Monaco) modes.
• MDC Native: Full support for Nuxt MDC syntax (::block-component and :inline-component).
• Slash Commands: Type / to insert headings, tables, code blocks, or custom components.
• Component Manager: Define your custom UI components (Alerts, Cards, Badges) via a dedicated Directus collection (mdc_components) created automatically on install.
• Directus Asset Integration: Select images and files from your Directus Library with native focal point and transformation support.
• Variables & Bindings: Support for dynamic data via {{ variable || default }}.

🚀 Installation

This extension is intended to be installed only via the Directus Marketplace.

1. Inside your Directus Admin project, go to Settings > Marketplace.
2. Search for mdc-editor.
3. Click Install.

Note: Upon installation, a system hook will automatically create the mdc_components collection. You may need to refresh your browser to see it.

🛠 Configuration

After installation, select MDC Editor as the interface for any "Text" or "Markdown" field.

• Monaco Theme: Set the code editor to follow Directus's theme or use standard Monaco colors.
• Syntax Highlighting: Choose the Shiki theme used for rendering code blocks.
• Output Preferences: Configure whether images, videos, and files should be saved as standard Markdown syntax or as MDC components (e.g., <nuxt-img>).

🎨 Nuxt Integration

The editor saves clean MDC Markdown to your database. It is designed to be paired with the @nuxtjs/mdc module on your frontend.

<template>
  <!-- Content from Directus is rendered natively as Nuxt Components -->
  <MDC :value="post.content" />
</template>

📝 MDC Syntax Examples

Block Component:

::alert{type="success"}
The AI successfully refined this post!
::

Inline Component:

Check out this :icon{name="heroicons:sparkles"} feature.

Variable Binding:

Hello {{ first_name || "Writer" }}!

🙏 Credits

This project builds upon the excellent work from Nuxt Studio by the Nuxt Content team. Significant portions of the TipTap editor integration and MDC parsing logic were adapted from their open-source codebase.

📄 License

MIT License - Copyright (c) Lupinum 2026