Actions System #

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

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

actions.toggleBold(textarea);      // **bold**
actions.toggleItalic(textarea);    // *italic*
actions.toggleCode(textarea);      // `code`

// Insert or toggle specific header level
actions.insertHeader(textarea, 1);  // # H1
actions.insertHeader(textarea, 2);  // ## H2
actions.insertHeader(textarea, 3);  // ### H3

// Convenience methods
actions.toggleH1(textarea);
actions.toggleH2(textarea);
actions.toggleH3(textarea);

actions.toggleBulletList(textarea);    // - bullet
actions.toggleNumberedList(textarea);  // 1. numbered
actions.toggleTaskList(textarea);      // - [ ] task

actions.toggleQuote(textarea);  // > quote

// Basic link
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'
});

// Get currently active formats
const formats = actions.getActiveFormats(textarea);
// Returns array like: ['bold', 'italic']

// Check if specific format is active
const isBold = actions.hasFormat(textarea, 'bold');

// Expand selection to nearest boundaries
actions.expandSelection(textarea);

// Preserve selection during operations
actions.preserveSelection(textarea, () => {
  // Do something that modifies content
});

actions.setDebugMode(true);

// Now all action calls will log details
actions.toggleBold(textarea);
// Logs: selection info, transformation details, etc.

actions.setDebugMode(false);

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

const toolbar = document.createElement('div');

const boldBtn = document.createElement('button');
boldBtn.textContent = 'Bold';
boldBtn.onclick = () => actions.toggleBold(textarea);

const italicBtn = document.createElement('button');
italicBtn.textContent = 'Italic';
italicBtn.onclick = () => actions.toggleItalic(textarea);

toolbar.append(boldBtn, italicBtn);

textarea.addEventListener('keydown', (e) => {
  if (e.ctrlKey || e.metaKey) {
    if (e.key === 'b') {
      e.preventDefault();
      actions.toggleBold(textarea);
    }
    if (e.key === 'i') {
      e.preventDefault();
      actions.toggleItalic(textarea);
    }
  }
});