SquibView Documentation

npm install squibview

<!-- CSS --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/squibview/dist/squibview.min.css"><!-- Dependencies --><scriptsrc="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/highlight.js/lib/core.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/papaparse/papaparse.min.js"></script><!-- SquibView --><scriptsrc="https://cdn.jsdelivr.net/npm/squibview/dist/squibview.umd.min.js"></script>

<divid="editor"></div><script>const editor = newSquibView('#editor', {
    initialContent: '# Hello, world!\n\nThis is a **Markdown** editor.',
    inputContentType: 'md',
    initialView: 'split'
  });
</script>

// Create a new editorconst editor = newSquibView('#editor', options);

// Set content
editor.setContent('# New content', 'md');

// Get contentconst content = editor.getContent();

// Change view mode
editor.setView('split'); // 'src', 'html', or 'split'// Working with selections
editor.onTextSelected(selectionData => {
  console.log(`Selected: ${selectionData.text}`);
});

// Replace selected text
editor.replaceSelectedText('replacement', selectionData);

// Set a text replacement handler
editor.onReplaceSelectedText = function(selectionData) {
  // Process and optionally return replacement text
};

// Undo/redo
editor.revisionUndo();
editor.revisionRedo();

const editor = newSquibView('#editor', {
  initialContent: '# Hello world',
  inputContentType: 'md',
  initialView: 'split'
});

// Option 1: Using callbacks
editor.onTextSelected(selectionData => {
  if (selectionData.text.toLowerCase() === 'todo') {
    editor.replaceSelectedText('DONE', selectionData);
  }
});

// Option 2: Using the replacement handler
editor.onReplaceSelectedText = function(selectionData) {
  if (selectionData.text.toLowerCase() === 'todo') {
    return'DONE';
  }
  // Return undefined to not replace anything
};

const csvData = 'Name,Age,City\nJohn,30,New York\nJane,25,San Francisco';

const editor = newSquibView('#editor', {
  initialContent: csvData,
  inputContentType: 'csv',
  initialView: 'split'
});

const slides = `# My Presentation

First slide content

---

## Second Slide

- Bullet points
- More points

---

## Thank You

Questions?`;

const editor = newSquibView('#editor', {
  initialContent: slides,
  inputContentType: 'reveal',
  initialView: 'html'
});