directus-extension-mdc-editor 0.1.0

package/README.md

@@ -0,0 +1,98 @@
+# 🧩 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.
+
+```vue
+<template>
+  <!-- Content from Directus is rendered natively as Nuxt Components -->
+  <MDC :value="post.content" />
+</template>
+```
+
+---
+
+## 📝 MDC Syntax Examples
+
+**Block Component:**
+```markdown
+::alert{type="success"}
+The AI successfully refined this post!
+::
+```
+
+**Inline Component:**
+```markdown
+Check out this :icon{name="heroicons:sparkles"} feature.
+```
+
+**Variable Binding:**
+```markdown
+Hello {{ first_name || "Writer" }}!
+```
+
+---
+
+## 🙏 Credits
+
+This project builds upon the excellent work from [Nuxt Studio](https://github.com/nuxt-content/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