Milkdown

// Milkdown's pipeline:
// 
// Input:  Markdown string
//   ↓     remark-parse → MDAST
//   ↓     transform → ProseMirror document
//   ↓     edit in ProseMirror (WYSIWYG)
//   ↓     serialize → MDAST
//   ↓     remark-stringify → Markdown string
// Output: Markdown string (round-trip safe)
//
// Key insight: the source of truth is always Markdown,
// but the editing experience is rich text.

import { Editor, rootCtx, defaultValueCtx } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { gfm } from '@milkdown/preset-gfm';
import { listener, listenerCtx } from '@milkdown/plugin-listener';
import { nord } from '@milkdown/theme-nord';

const editor = await Editor.make()
  .config((ctx) => {
    ctx.set(rootCtx, document.getElementById('editor'));
    ctx.set(defaultValueCtx, '# Hello Milkdown');
    
    // Listen for markdown changes
    ctx.get(listenerCtx).markdownUpdated((ctx, md) => {
      console.log('Markdown:', md);
    });
  })
  .use(nord)          // Theme
  .use(commonmark)    // CommonMark support
  .use(gfm)           // GFM: tables, task lists, strikethrough
  .use(listener)      // Change listener plugin
  .create();