Actions API #

import { actions } from '@pinkpixel/marzipan';

const textarea = document.querySelector('textarea');
actions.toggleBold(textarea);

// Selected: "hello"
// Result: "**hello**"

// Selected: "**hello**"
// Result: "hello" (removes bold)

actions.toggleItalic(textarea);

// Selected: "hello"
// Result: "*hello*"

actions.toggleCode(textarea);

// Selected: "hello"
// Result: "`hello`"

// Insert H2
actions.insertHeader(textarea, 2);

// Toggle H1 (removes header if already H1)
actions.insertHeader(textarea, 1, true);

// On line: "Hello"
// Result: "## Hello" (level 2)

// On line: "## Hello"
// With toggle: true, level: 2
// Result: "Hello" (header removed)

actions.toggleH1(textarea);  // Toggle # H1
actions.toggleH2(textarea);  // Toggle ## H2
actions.toggleH3(textarea);  // Toggle ### H3

actions.toggleBulletList(textarea);

// Selected lines:
// hello
// world
//
// Result:
// - hello
// - world

actions.toggleNumberedList(textarea);

// Selected lines:
// hello
// world
//
// Result:
// 1. hello
// 2. world

actions.toggleTaskList(textarea);

// Selected lines:
// Buy milk
// Walk dog
//
// Result:
// - [ ] Buy milk
// - [ ] Walk dog

actions.toggleQuote(textarea);

// Selected lines:
// This is a quote
// Spanning multiple lines
//
// Result:
// > This is a quote
// > Spanning multiple lines

// Basic link (prompts for URL)
actions.insertLink(textarea);

// Link with URL
actions.insertLink(textarea, {
  url: 'https://example.com'
});

// Link with text and URL
actions.insertLink(textarea, {
  text: 'Click here',
  url: 'https://example.com'
});

// Smart URL detection:
// Selected: "https://example.com"
// Result: "[](https://example.com)"

// With selected text "click":
// Result: "[click]()"

const formats = actions.getActiveFormats(textarea);

// Cursor in: "**bold *and italic***"
// Returns: ['bold', 'italic']

// Use to update UI state
if (formats.includes('bold')) {
  boldButton.classList.add('active');
}

const isBold = actions.hasFormat(textarea, 'bold');
const isItalic = actions.hasFormat(textarea, 'italic');

// Update button states
boldButton.disabled = !isBold;

// Cursor in middle of "hello"
actions.expandSelection(textarea);
// Now selects entire word "hello"

// Useful before applying formatting
actions.expandSelection(textarea);
actions.toggleBold(textarea);

actions.preserveSelection(textarea, () => {
  // Modify content without losing selection
  const value = textarea.value;
  textarea.value = value.toUpperCase();
});

// Selection is restored after callback

// Strikethrough
actions.applyCustomFormat(textarea, {
  prefix: '~~',
  suffix: '~~',
  placeholder: 'strikethrough text'
});

// Highlight
actions.applyCustomFormat(textarea, {
  prefix: '==',
  suffix: '==',
  placeholder: 'highlighted'
});

// Custom block
actions.applyCustomFormat(textarea, {
  prefix: '::: warning\n',
  suffix: '\n:::',
  placeholder: 'Warning message',
  multiline: true
});

// Enable debug logging
actions.setDebugMode(true);

// Now all actions log details
actions.toggleBold(textarea);
// Logs:
// - Selection before: {start: 0, end: 5}
// - Operation: add bold
// - Selection after: {start: 2, end: 7}

// Check current state
const isDebug = actions.getDebugMode();

// Disable when done
actions.setDebugMode(false);

// Use browser's native undo (default)
actions.setUndoMethod('native');

// Use custom undo handling
actions.setUndoMethod('custom');

// Get current method
const method = actions.getUndoMethod();

import { actions } from '@pinkpixel/marzipan';

const textarea = document.querySelector('textarea');

// Create custom toolbar
const toolbar = {
  bold: () => actions.toggleBold(textarea),
  italic: () => actions.toggleItalic(textarea),
  code: () => actions.toggleCode(textarea),
  h1: () => actions.toggleH1(textarea),
  h2: () => actions.toggleH2(textarea),
  link: () => actions.insertLink(textarea, {
    url: prompt('Enter URL:')
  }),
  bullet: () => actions.toggleBulletList(textarea),
  numbered: () => actions.toggleNumberedList(textarea),
  quote: () => actions.toggleQuote(textarea),
};

// Handle keyboard shortcuts
textarea.addEventListener('keydown', (e) => {
  if (e.ctrlKey || e.metaKey) {
    switch (e.key) {
      case 'b':
        e.preventDefault();
        toolbar.bold();
        break;
      case 'i':
        e.preventDefault();
        toolbar.italic();
        break;
      case 'k':
        e.preventDefault();
        toolbar.link();
        break;
    }
  }
});

// Update UI based on active formats
textarea.addEventListener('selectionchange', () => {
  const formats = actions.getActiveFormats(textarea);
  
  document.querySelector('.btn-bold')
    .classList.toggle('active', formats.includes('bold'));
  
  document.querySelector('.btn-italic')
    .classList.toggle('active', formats.includes('italic'));
  
  document.querySelector('.btn-code')
    .classList.toggle('active', formats.includes('code'));
});

// Custom formatting
document.querySelector('.btn-strikethrough').addEventListener('click', () => {
  actions.applyCustomFormat(textarea, {
    prefix: '~~',
    suffix: '~~',
    placeholder: 'strikethrough'
  });
});

// Debug mode for development
if (process.env.NODE_ENV === 'development') {
  actions.setDebugMode(true);
}