Configuration #

new Marzipan('#editor', {
  fontSize: '16px',
  lineHeight: 1.7,
  fontFamily: 'Monaco, Consolas, monospace',
  padding: '20px',
});

new Marzipan('#editor', {
  mobile: {
    fontSize: '16px',    // Prevents iOS zoom
    padding: '12px',
    lineHeight: 1.5
  }
});

new Marzipan('#editor', {
  autofocus: true,        // Auto-focus on init
  autoResize: true,       // Auto-expand height
  minHeight: '200px',     // Min height (autoResize)
  maxHeight: '800px',     // Max height (autoResize)
  placeholder: 'Type...',
  value: '# Initial content',
  smartLists: true,       // Continue lists on Enter
});

new Marzipan('#editor', {
  toolbar: true,           // Enable toolbar
  showStats: true,         // Show statistics
  showActiveLineRaw: true, // Highlight current line
});

new Marzipan('#editor', {
  onChange: (value, instance) => {
    console.log('Content changed:', value);
  },
  
  onKeydown: (event, instance) => {
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault();
      saveContent(instance.getValue());
    }
  },
});

new Marzipan('#editor', {
  toolbar: {
    buttons: [
      'bold', 'italic', 'code',
      '|',  // separator
      'h1', 'h2', 'h3',
      '|',
      'link', 'quote',
      '|',
      'bulletList', 'orderedList', 'taskList'
    ]
  }
});

new Marzipan('#editor', {
  textareaProps: {
    'data-testid': 'markdown-editor',
    'aria-label': 'Markdown content',
    maxlength: 10000,
    spellcheck: true,
  }
});

new Marzipan('#editor', {
  showStats: true,
  statsFormatter: ({ words, chars, lines, line, column }) => {
    const readingTime = Math.ceil(words / 200);
    return `📝 ${words} words (${readingTime} min) • Line ${line}:${column}`;
  }
});

import { tablePlugin } from '@pinkpixel/marzipan/plugins/tablePlugin';
import { mermaidPlugin } from '@pinkpixel/marzipan/plugins/mermaidPlugin';

new Marzipan('#editor', {
  plugins: [
    tablePlugin({ defaultColumns: 3 }),
    mermaidPlugin({ theme: 'dark' })
  ]
});

const [editor] = new Marzipan('#editor', {
  // Typography
  fontSize: '15px',
  lineHeight: 1.6,
  padding: '16px',
  
  // Behavior
  autofocus: true,
  autoResize: true,
  minHeight: '300px',
  placeholder: 'Start writing...',
  smartLists: true,
  
  // Features
  toolbar: true,
  showStats: true,
  theme: 'cave',
  
  // Callbacks
  onChange: (value) => {
    localStorage.setItem('draft', value);
  },
  
  // Plugins
  plugins: [tablePlugin()]
});