@sxo/component-wysiwyg embraces the headless philosophy by providing a robust Markdown editing engine without imposing a rigid UI. It acts as a thin, logic-heavy wrapper around Milkdown, allowing you to build your own editor UI using SXO design tokens.

🧩 Headless Architecture

• UI Decoupling: Build your own custom toolbar and editor chrome while we handle the complex Prosemirror-based editing logic.
• Customizable Rendering: Easily extend the editor with Milkdown plugins without breaking the UI.
• Consistent Design: Seamlessly integrates with @sxo/engine for atomic styling of the editor container.

✨ Features

• 📝 Markdown-first: Built on a modern foundation for a seamless Markdown experience.
• 🐙 GFM Ready: Native support for GitHub Flavored Markdown (tables, task lists, etc.).
• ⚙️ Command API: Easily trigger formatting and structure changes via a simple API.
• 🛡️ Type Safe: Full TypeScript support for editor instances and options.

🚀 Quick Start

Installation

pnpm add @sxo/component-wysiwyg @milkdown/core @milkdown/preset-gfm

Usage

import { createWysiwygEditor } from '@sxo/component-wysiwyg';

const container = document.getElementById('wysiwyg-container');
const editorInstance = await createWysiwygEditor(container, {
    defaultValue: '# Hello World',
    onChange: (markdown) => console.log('Markdown updated:', markdown)
});

// Run commands from your custom UI
editorInstance.runCommand('toggleBold');

// Cleanup
editorInstance.destroy();

📖 Documentation

For more details, visit the WYSIWYG Component Documentation.

📄 License

MIT License.