### User Guides Source: https://github.com/deftio/squibview/blob/main/dev/docs-review.md Guides for getting started with SquibView, including installation, basic usage, and CLI commands. ```APIDOC ## User Guides This section provides guides for users of the SquibView project. ### Quick Start - **Endpoint:** `/docs/guides/01-quick-start.md` - **Description:** The fastest way to see SquibView in action. Combines CLI and component quick starts. ### Installation - **Endpoint:** `/docs/guides/02-installation.md` - **Description:** Explains different build types (ESM, UMD, Standalone) with code examples and usage scenarios. - **Build Types:** ESM, UMD, Standalone - **Usage Scenarios:** When to use each build type (e.g., with build steps, for prototypes). - **Clarification:** Difference between 'regular' and 'standalone' builds. ### Basic Usage - **Endpoint:** `/docs/guides/03-basic-usage.md` - **Description:** Covers fundamentals of creating a SquibView instance and using its main methods. ### CLI Usage - **Endpoint:** `/docs/guides/04-cli-usage.md` - **Description:** A dedicated, in-depth guide for the SquibView CLI tool. ``` -------------------------------- ### SquibView Installation and Usage Source: https://github.com/deftio/squibview/blob/main/docs/examples/gif-demo-content.md Shows the command-line instruction to install and start using SquibView via npx. This is a quick way to get started with the tool for document creation. ```bash # Get started in seconds npx squibv your-document.md ``` -------------------------------- ### SquibView Installation Options Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md Shows different methods to install and use the SquibView CLI. The recommended method is NPX for no installation requirement, followed by global or project-level npm installations. ```bash # NPX (Recommended) # No installation required npx squibv document.md # Global Installation npm install -g squibview squibv document.md # Project Installation npm install squibview npx squibv document.md ``` -------------------------------- ### SquibView Editor Initialization Examples Source: https://github.com/deftio/squibview/blob/main/docs/programmers-guide.html Demonstrates how to initialize the SquibView editor with different content types and configurations, including Markdown, CSV, and RevealJS presentations. These examples show the basic setup for creating instances of the editor. ```javascript const editor = newSquibView('#editor', { initialContent: '# Hello World\n\nThis is a test.', inputContentType: 'md', showControls: true, initialView: 'split' }); ``` ```javascript const editor = newSquibView('#editor', { initialContent: 'name,age\nJohn,30\nJane,25', inputContentType: 'csv', showControls: true, initialView: 'html' }); ``` ```javascript const editor = newSquibView('#editor', { initialContent: '# Slide 1\n\nContent\n\n---\n\n# Slide 2\n\nMore content', inputContentType: 'reveal', showControls: true, initialView: 'html' }); ``` -------------------------------- ### SquibView CLI: Installation and Basic Usage Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.html Shows the recommended NPX installation method for SquibView CLI and a basic command to convert a Markdown file to HTML. ```bash # No installation required npx squibv document.md # Specify output file npx squibv document.md -o output.html # Create offline-ready HTML npx squibv document.md --bundle-offline ``` -------------------------------- ### Install and Get Help for SquibView CLI Source: https://github.com/deftio/squibview/blob/main/docs/cli/README.md Install the SquibView CLI globally using npm and then display the help information to understand available commands and options. ```bash npm install squibview npx squibv --help ``` -------------------------------- ### NPM Install and Initialize SquibView Source: https://github.com/deftio/squibview/blob/main/index.html Shows how to install SquibView via NPM and initialize it. It provides examples for both automatic dependency loading (recommended) and manual dependency management. ```bash npm install squibview ``` ```javascript import SquibView from 'squibview'; // With autoload (recommended) const editor = new SquibView('#editor', { autoload_deps: { all: true } }); // Or manually manage dependencies const editor = new SquibView('#editor', { autoload_deps: null // Load dependencies yourself }); ``` -------------------------------- ### SquibView CLI: Global and Project Installation Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.html Demonstrates how to install and use the SquibView CLI globally via npm or within a project. ```bash # Global Installation npm install -g squibview squibv document.md # Project Installation npm install squibview npx squibv document.md ``` -------------------------------- ### Instantiate SquibView Source: https://github.com/deftio/squibview/blob/main/docs/programmers-guide.html Demonstrates the basic instantiation of the SquibView editor with a container ID and configuration options. This is the starting point for using SquibView. ```javascript const editor = newSquibView('#editorContainer', { // Configuration options }); ``` -------------------------------- ### Example Usage: ESM Import Map vs. Bundled Source: https://github.com/deftio/squibview/blob/main/dev/v1.0.15-build-clean-ups.md This demonstrates the simplification in Squibview usage after updating to bundled dependencies. The 'before' example requires a complex import map setup, while the 'after' example shows a clean, direct import of the bundled ESM build, eliminating the need for import maps. ```html ``` -------------------------------- ### SquibView Logging Example Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md Shows how to enable detailed logging for SquibView builds by specifying a log file and how to view the log content. ```bash # Enable detailed logging squibv document.md --log build.log # Check log file cat build.log ``` -------------------------------- ### CI/CD Integration Example (GitHub Actions) Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md Shows how to integrate the SquibView CLI into a CI/CD pipeline, specifically using GitHub Actions to generate documentation. ```yaml # GitHub Actions example - name: Generate Documentation run: npx squibv README.md -o docs/index.html --bundle-offline ``` -------------------------------- ### SquibView Advanced Conversion Examples Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md Provides examples of using advanced SquibView CLI features such as offline bundling, custom CSS styling, watch mode for development, and quiet mode for suppressing output. ```bash # Bundle for offline use (larger file, no internet required) squibv document.md --bundle-offline -o standalone.html # Custom styling squibv document.md --css custom-theme.css -o styled.html # Development mode with auto-rebuild squibv document.md --watch # Quiet mode (suppress progress) squibv document.md --quiet -o output.html ``` -------------------------------- ### JavaScript: Initial Setup and Debugging Availability Source: https://github.com/deftio/squibview/blob/main/examples/example_themes.html Initializes color swatches and makes the editor instance available globally for debugging purposes. This ensures that the UI is correctly set up on page load and that developers can interact with the editor object. ```javascript // Initial color swatches update updateColorSwatches(); // Make editor available for debugging window.editor = editor; ``` -------------------------------- ### Start Advanced Development Server Source: https://github.com/deftio/squibview/blob/main/docs/development/DEVELOPMENT.md Launches a custom development server with enhanced features including live-reload, a development UI with test runners, and support for multiple content type testing. This offers a comprehensive development experience. ```bash npm run dev:hmr ``` -------------------------------- ### Initialize SquibView with UMD Source: https://github.com/deftio/squibview/blob/main/docs/guides/02-installation.md Shows how to include and initialize SquibView using the Universal Module Definition (UMD) format via script tags. Suitable for legacy browser support or projects without modern bundling. ```html ``` -------------------------------- ### SquibView Basic Conversion Examples Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md Illustrates basic usage patterns for the SquibView CLI, including converting a file to HTML with a custom output name and reading from standard input. ```bash # Convert README.md to README.html squibv README.md # Custom output name squibv README.md -o documentation.html # Read from stdin echo "# Hello World" | squibv -i - -o output.html ``` -------------------------------- ### Update Headless Mode Guide in SquibView Source: https://github.com/deftio/squibview/blob/main/docs/release-notes.md Updates all code examples within `docs/guides/headless-mode.md` to demonstrate correct API usage, particularly for headless mode functionalities. ```Markdown - **Headless Mode Guide** - Updated all code examples with correct API usage in `docs/guides/headless-mode.md` ``` -------------------------------- ### SquibView CLI: Basic Conversion Examples Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.html Demonstrates the basic usage of the squibv CLI for converting Markdown files to HTML, including specifying custom output names and reading from standard input. ```bash npx squibv document.md npx squibv document.md -o output.html echo "# Hello World" | npx squibv -i - -o output.html ``` -------------------------------- ### Run Python Simple HTTP Server Source: https://github.com/deftio/squibview/blob/main/docs/development/DEVELOPMENT.md Starts a basic HTTP server using Python to serve files from the current directory. Useful for simple local development. Ensure you are in the project root directory before running. ```bash python -m http.server ``` ```bash python -m SimpleHTTPServer ``` -------------------------------- ### SquibView Initialization and Logging Source: https://github.com/deftio/squibview/blob/main/examples/example_api_comprehensive.html Initializes the editor's status and view, makes the console visible by default, and logs introductory messages to the console to guide the user. ```javascript updateStatus(); updateViewButtons('split'); toggleConsole(); logToConsole('SquibView API Demo initialized', 'success'); logToConsole('Click any button to test API methods', 'info'); logToConsole('All calls and returns are logged here', 'info'); ``` -------------------------------- ### SquibView CLI: Batch Processing Examples Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.html Provides examples of how to use the squibv CLI for batch processing multiple Markdown files, both using a for-loop and the find command. ```bash # Convert multiple files for file in *.md; do squibv "$file" -o "${file%.md}.html" done # Using find find . -name "*.md" -exec squibv {} -o {}.html \; ``` -------------------------------- ### CDN Usage: Standard Build with Autoload Source: https://github.com/deftio/squibview/blob/main/docs/guides/02-installation.html Illustrates using SquibView via CDN with the standard build, enabling `autoload_deps` for dynamic loading of dependencies. This is recommended for most projects for efficient loading. ```html importSquibViewfrom'https://unpkg.com/squibview/dist/squibview.esm.min.js'; const editor = newSquibView('#editor', { initialContent: '# Hello\n\n```mermaid\ngraph TD\n A --> B\n```', autoload_deps: { all: true } // Enable autoloading }); ``` -------------------------------- ### Create SquibView Instance (Basic) Source: https://github.com/deftio/squibview/blob/main/docs/guides/03-basic-usage.html Initializes a new SquibView editor instance with a target HTML element and initial Markdown content. This is the most basic setup. ```javascript const editor = newSquibView({ element: document.getElementById('editor'), content: '# Hello World\n\nThis is **markdown** content.' }); ``` -------------------------------- ### JavaScript Example Function with Syntax Highlighting Source: https://github.com/deftio/squibview/blob/main/dev/debug-dev.html This is a simple JavaScript function example. It returns the string "Hello world!". It is intended to be used as an example within documentation or a code editor to demonstrate syntax highlighting. ```javascript // This should have syntax highlighting function example() { return "Hello world!"; } ``` -------------------------------- ### Initialize SquibView with ESM-Lean Build Source: https://github.com/deftio/squibview/blob/main/docs/guides/02-installation.html This snippet shows how to use the SquibView ESM-lean build for advanced users who manage their own dependencies. It includes an import map for external libraries like markdown-it, tiny-emitter, and diff-match-patch. ```html ``` -------------------------------- ### Interact with Editor Instance Source: https://github.com/deftio/squibview/blob/main/docs/development/DEVELOPMENT.html Provides examples of interacting with the SquibView editor instance directly from the browser's developer console. ```javascript window.editor SquibView.version.version ``` -------------------------------- ### Makefile Integration Example Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md Demonstrates how to include SquibView document generation in a Makefile for build automation. ```makefile docs: README.md npx squibv README.md -o docs/index.html .PHONY: docs ``` -------------------------------- ### SquibView CLI: Installation (NPX) Source: https://github.com/deftio/squibview/blob/main/docs/cli/CLI.html Installs and runs the SquibView CLI using NPX, which requires no prior installation. ```bash # No installation required - run directly npx squibv document.md ``` -------------------------------- ### Initialize SquibView with ESM Build (v1.0.15+) Source: https://github.com/deftio/squibview/blob/main/docs/guides/02-installation.html This snippet demonstrates how to initialize SquibView using its default ESM build, which includes markdown-it. It also shows how to include optional external dependencies like Highlight.js and Mermaid. ```html ``` -------------------------------- ### Markdown Document with Enhanced Content Examples Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md An example Markdown file demonstrating the use of enhanced content types supported by SquibView, including LaTeX math, Mermaid diagrams, and CSV data tables. ```markdown # Sample Document ## Math $$E = mc^2$$ ## Diagram ```mermaid graph TD A[Start] --> B[Process] B --> C[End] ``` ## Data ```csv name,age,city John,25,NYC Jane,30,LA ``` ## Code ```javascript console.log('Hello, World!'); ``` ``` -------------------------------- ### CDN Usage: Standard Build with Autoload Source: https://github.com/deftio/squibview/blob/main/docs/guides/02-installation.md Utilizes the standard SquibView build from a CDN with autoloading enabled for dependencies. This approach requires zero configuration and loads libraries on demand. ```html ``` -------------------------------- ### Initialize SquibView with ESM Source: https://github.com/deftio/squibview/blob/main/docs/guides/02-installation.md Demonstrates how to import and initialize SquibView using ECMAScript Modules (ESM). This is recommended for modern projects using bundlers like Vite or Webpack. ```javascript import { SquibView } from 'squibview'; import 'squibview/dist/squibview.min.css'; const editor = new SquibView({ element: document.getElementById('editor'), content: '# Hello World' }); ``` -------------------------------- ### SquibView CLI: Advanced Conversion Examples Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.html Illustrates advanced features of the squibv CLI, such as creating offline-ready HTML, applying custom CSS themes, enabling development watch mode, and suppressing output messages. ```bash npx squibv document.md --bundle-offline -o standalone.html npx squibv document.md --css custom-theme.css -o styled.html npx squibv document.md --watch npx squibv document.md --quiet -o output.html ``` -------------------------------- ### SquibView Batch Processing Examples Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md Demonstrates methods for processing multiple Markdown files simultaneously using shell loops and the `find` command, automating the conversion process. ```bash # Convert multiple files using a for loop for file in *.md; do squibv "$file" -o "${file%.md}.html" done # Using find command find . -name "*.md" -exec squibv {} -o {}.html \; ``` -------------------------------- ### Creating a Dictionary Tool Source: https://github.com/deftio/squibview/blob/main/docs/selection-api.md An example of creating a dictionary tool that fetches definitions from an external API and displays them in a tooltip without replacing the selected text. ```javascript editor.onReplaceSelectedText = async function(selectionData) { // Only process single words if (selectionData.text.trim().split(/\s+/).length === 1) { const word = selectionData.text.trim(); // Show definition in a tooltip (without replacing) try { const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`); const data = await response.json(); if (data && data[0] && data[0].meanings) { const definition = data[0].meanings[0].definitions[0].definition; showTooltip(definition, selectionData); } } catch (err) { console.error('Dictionary lookup failed', err); } } // Return undefined to not replace the text }; ``` -------------------------------- ### SquibView Autoload with Initial Content Source: https://github.com/deftio/squibview/blob/main/docs/programmers-guide.html Demonstrates initializing SquibView with initial content using the autoload build from a CDN. It includes an example of a Mermaid diagram which will be automatically rendered. ```javascript import SquibView from 'https://unpkg.com/squibview/dist/squibview.autoload.esm.min.js'; const editor = new SquibView('#editor', { initialContent: '# Hello\n\n```mermaid\ngraph TD\n A --> B\n```' // Mermaid loads automatically when needed! }); ``` -------------------------------- ### SquibView Watch Mode Examples Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md Illustrates how to use the `--watch` option to automatically rebuild HTML documents when changes are detected in the source Markdown files. ```bash # Watch single file squibv document.md --watch # Watch with custom output squibv document.md --watch -o docs/output.html ``` -------------------------------- ### SquibView Offline Bundling Example Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md Shows the command to create a fully self-contained HTML file using the `--bundle-offline` option, which includes all dependencies and works without an internet connection. ```bash squibv document.md --bundle-offline ``` -------------------------------- ### SquibView Custom CSS Example Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.md Demonstrates how to apply custom styling to generated HTML documents by referencing an external CSS file using the `--css` option. ```bash squibv document.md --css custom.css ``` -------------------------------- ### README.md Quick Win Section (CLI Usage) Source: https://github.com/deftio/squibview/blob/main/dev/docs-review.md Demonstrates the Quick Start option using the SquibView CLI to generate an HTML file from a Markdown file. ```bash npx squibv document.md # Creates a beautiful, standalone HTML file instantly ``` -------------------------------- ### Use SquibView UMD in Browsers Source: https://github.com/deftio/squibview/blob/main/docs/guides/02-installation.html Shows how to include SquibView using the UMD build via script tags for projects that do not use a modern build process or for direct browser inclusion. It also includes the CSS link. ```html ``` -------------------------------- ### Start Vite Development Server Source: https://github.com/deftio/squibview/blob/main/docs/development/DEVELOPMENT.md Initiates a Vite development server, which provides features like hot module replacement (HMR) for a streamlined development workflow. Changes in source files are reflected in the browser without full page reloads. ```bash npm run dev ``` -------------------------------- ### Browser Quick Start with SquibView Source: https://github.com/deftio/squibview/blob/main/index.html Demonstrates the zero-configuration quick start for SquibView in a browser. It automatically loads necessary fence libraries (like Mermaid and math) from a CDN when content requires them. It initializes the editor with initial content including a Mermaid diagram. ```html
``` -------------------------------- ### Conditionally Replace Selected Text (JavaScript) Source: https://github.com/deftio/squibview/blob/main/docs/selection-api.html This example shows a user-intent-respecting approach to text replacement. It only replaces text if it matches a specific pattern (e.g., starting with 'todo:'). This avoids disruptive automatic replacements. ```javascript // Good: Only replace when there's a clear pattern or intentif (selectionData.text.match(/^todo:/i)) { return'✅ ' + selectionData.text.substring(5); } ``` -------------------------------- ### Initialize SquibView for GIF Demo Source: https://github.com/deftio/squibview/blob/main/demo/gif-demo.html Initializes the SquibView editor with specific configuration options suitable for creating GIF demonstrations. It starts with an empty content area and enables controls, while hiding the title. ```javascript const demoEditor = new SquibView({ element: document.getElementById('squibview-demo'), content: ``, // Start empty for step-by-step recording initialView: 'split', showControls: true, titleShow: false }); ``` -------------------------------- ### SquibView CLI Usage Examples Source: https://github.com/deftio/squibview/blob/main/docs/cli/README.html Demonstrates how to run the SquibView CLI using npx, including options for direct execution and offline bundling. These commands are essential for converting Markdown files to HTML. ```bash npx squibv document.md ``` ```bash npx squibv document.md --bundle-offline ``` ```bash npx squibv --help ``` -------------------------------- ### Embed SquibView in a Web Application Source: https://github.com/deftio/squibview/blob/main/docs/guides/01-quick-start.html This example shows how to integrate SquibView into a web application using a CDN link. It sets up an HTML structure with a div for the editor, includes the SquibView CSS, and initializes the SquibView component with initial content and autoloading dependencies. ```html SquibView Example
``` -------------------------------- ### Use SquibView ESM with Bundlers Source: https://github.com/deftio/squibview/blob/main/docs/guides/02-installation.html Demonstrates how to import and initialize SquibView using the ESM build, suitable for modern JavaScript projects utilizing bundlers like Vite or Webpack. It also includes importing the necessary CSS. ```javascript import { SquibView } from'squibview'; import'squibview/dist/squibview.min.css'; const editor = newSquibView({ element: document.getElementById('editor'), content: '# Hello World' }); ``` -------------------------------- ### SquibView Project Installation Source: https://github.com/deftio/squibview/blob/main/docs/guides/02-installation.md Installs SquibView as a development dependency within your project using npm. This allows you to manage SquibView as part of your project's dependencies. ```bash npm install --save-dev squibview npx squibv document.md ``` -------------------------------- ### Basic Text Replacement Example Source: https://github.com/deftio/squibview/blob/main/docs/selection-api.md Shows a simple example of using the `onTextSelected` event to replace selected text with an appended string. ```javascript editor.onTextSelected(selectionData => { // Always add exclamation marks to selected text const newText = `${selectionData.text}!!!`; editor.replaceSelectedText(newText, selectionData); }); ``` -------------------------------- ### Initialize SquibView with Configuration (JavaScript) Source: https://github.com/deftio/squibview/blob/main/examples/example_api_comprehensive.html Initializes the SquibView editor with a comprehensive configuration, including initial content, content type, view mode, and event handlers. This setup demonstrates the flexibility of SquibView in handling various content types and user interactions. The editor is made globally available as squibEditor. ```javascript import SquibView from '../dist/squibview.esm.min.js'; // Initialize SquibView with full configuration const editor = new SquibView('#editor', { // Initial content initialContent: `# SquibView API Demo Welcome to the comprehensive API demonstration! ## Try These Features: 1. **Content Management** - Set, get, clear content 2. **View Modes** - Switch between source, HTML, and split views 3. **Content Types** - Change between Markdown, HTML, CSV 4. **Revision History** - Undo/redo changes 5. **Clipboard** - Copy in various formats 6. **Selection** - Select text and manipulate it 7. **UI Controls** - Toggle various UI elements ## Sample Content This is a **markdown** document with various elements: - Lists - **Bold** and *italic* text - \`Code snippets\` \`\`\`javascript // Code block const demo = new SquibView('#editor'); demo.setContent('Hello World'); \`\`\` ### Table Example | Feature | Status | Description | |------------|--------|----------------------------| | Markdown | ✓ | Full CommonMark support | | HTML | ✓ | Rich HTML rendering | | Copy/Paste | ✓ | Smart clipboard operations | ### Try Selecting Text! Select any text in either the source or rendered view to test selection APIs.`, // Configuration inputContentType: 'md', initialView: 'split', showControls: true, titleShow: false, titleContent: 'API Demo Document', baseClass: 'squibview', preserveImageTags: true, showLineNumbers: false, lineNumberStart: 1, lineNumberMinDigits: 2, // Autoload configuration autoload_deps: { all: true // Enable all features }, // Event handler onReplaceSelectedText: (data) => { logToConsole(`Selection handler called: "${data.text}"`, 'info'); return data.text.toUpperCase(); // Example transformation } }); // Make editor globally available window.squibEditor = editor; ``` -------------------------------- ### Initialize SquibView with Standalone build Source: https://github.com/deftio/squibview/blob/main/README-old.md Illustrates the use of SquibView's standalone build, which bundles all necessary dependencies for a quick setup without external script includes. This is ideal for rapid prototyping or environments where managing dependencies is cumbersome. ```html SquibView Standalone Example
``` -------------------------------- ### SquibView Syntax Highlighting Examples Source: https://github.com/deftio/squibview/blob/main/examples/example_autoload_detailed.html Illustrates SquibView's ability to automatically load Highlight.js for syntax highlighting in code blocks. Examples are provided for JavaScript and Python. ```markdown # Syntax Highlighting Example Code blocks trigger Highlight.js loading: ```javascript // This triggers Highlight.js autoload class SquibViewAutoload { constructor(options) { this.options = options; this.libraries = new Map(); } async autoload(library) { if (this.libraries.has(library)) { return this.libraries.get(library); } const module = await import(library); this.libraries.set(library, module); return module; } } ``` ```python # Python example def fibonacci(n): if n <= 1: return n return fibonacci(n-1) + fibonacci(n-2) print(f"Result: {fibonacci(10)}") ``` ``` -------------------------------- ### SquibView Selection API Example Source: https://github.com/deftio/squibview/blob/main/examples/example_selection_api.html This section demonstrates how to use the SquibView Selection API to get, display, and manipulate text selections. ```APIDOC ## SquibView Selection API Demo This section provides a practical example of the SquibView Selection API. ### Description Select text in either the source (left) or rendered (right) panel to see selection data update automatically. Use the buttons to interact with the selection. ### Method N/A (Event-driven and direct method calls) ### Endpoint N/A ### Parameters N/A ### Request Example N/A ### Response #### Success Response (200) Selection data is provided through the `onTextSelected` callback. #### Response Example ```json { "selectionRange": { "start": 10, "end": 25 }, "selectedText": "selected text", "element_details": { "tagName": "TEXTAREA", "panel": "source", "id": "editor-container", "className": "" } } ``` ### API Methods #### `editor.onTextSelected(callback)` ##### Description Registers a callback function that is executed whenever a text selection changes in the editor. The callback receives `selectionData` as an argument. ##### Parameters - **callback** (function) - Required - The function to call when text is selected. ##### Request Example ```javascript editor.onTextSelected((selectionData) => { console.log(selectionData); }); ``` #### `editor.getCurrentSelection()` ##### Description Returns the current selection data without waiting for a selection change event. ##### Returns - **object** - An object containing selection data (selectionRange, selectedText, element), or null if no selection is active. ##### Request Example ```javascript const selData = editor.getCurrentSelection(); console.log(selData); ``` #### `editor.replaceSelectedText(newText, selectionData)` ##### Description Replaces the currently selected text with the provided `newText`. It uses the `selectionData` object obtained from `getCurrentSelection` or the `onTextSelected` callback. ##### Parameters - **newText** (string) - Required - The text to insert. - **selectionData** (object) - Required - The selection data object, typically from `getCurrentSelection` or `onTextSelected`. ##### Request Example ```javascript const replacementText = "New content"; const currentSelection = editor.getCurrentSelection(); if (currentSelection) { editor.replaceSelectedText(replacementText, currentSelection); } ``` #### `editor.clearSelection()` ##### Description Clears the current text selection in the editor. ##### Request Example ```javascript editor.clearSelection(); ``` ``` -------------------------------- ### Install Dependencies Source: https://github.com/deftio/squibview/blob/main/CONTRIBUTING.md Installs all necessary project dependencies using npm. This command should be run after cloning the repository. ```bash npm install ``` -------------------------------- ### Standalone Build with Bundled Dependencies Source: https://github.com/deftio/squibview/blob/main/docs/programmers-guide.html Demonstrates the Standalone build of SquibView, which includes all dependencies bundled. This simplifies setup by not requiring separate script tags for external libraries. SquibView is initialized on an element with the ID 'editor'. ```html ``` -------------------------------- ### Vue App Setup with SquibViewVue Integration Source: https://github.com/deftio/squibview/blob/main/examples/example_vue.html Initializes a Vue 3 application, importing necessary components and libraries like SquibViewVue, Vue, and Three.js. It sets up reactive state for content, view mode, and control visibility, along with methods to handle user interactions and editor functions. ```javascript // Import Three.js and assign to window for SquibView import * as THREE from 'https://unpkg.com/three@0.171.0/build/three.module.js'; window.THREE = THREE; // Import Vue from CDN import { createApp, ref, onMounted } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; // Import SquibViewVue and version from local dist import SquibViewVue from '../dist/squibview-vue.js'; import { VERSION } from '../src/version.js'; // Vue app component that demonstrates SquibView usage const App = { components: { SquibViewVue }, setup() { const content = ref(''); const view = ref('split'); const showControls = ref(false); const titleShow = ref(false); const editor = ref(null); // Load default content from the same file as other demos onMounted(async () => { try { const response = await fetch('./sample-content.md'); const data = await response.text(); content.value = data; } catch (error) { console.error('Failed to load sample content:', error); } }); const handleContentChange = (newContent) => { // Don't update content.value to avoid infinite loop with watcher // The SquibView component manages its own content state }; const handleViewChange = (newView) => { view.value = newView; }; const handleUndo = () => { if (editor.value && editor.value.editor) { editor.value.editor.revisionUndo(); } }; const handleRedo = () => { if (editor.value && editor.value.editor) { editor.value.editor.revisionRedo(); } }; const handleClear = () => { if (editor.value && editor.value.editor) { editor.value.editor.setContent(''); } }; const handleRemoveHR = () => { if (editor.value && editor.value.editor) { const currentContent = editor.value.editor.getContent(); editor.value.editor.setContent(currentContent.replace(/---/g, '')); } }; const handleIncreaseHeading = () => { if (editor.value && editor.value.editor) { const currentContent = editor.value.editor.getContent(); const newContent = currentContent.replace(/^(#{1,6})\s/gm, (match, p1) => { const level = p1.length; return level < 6 ? '#'.repeat(level + 1) + ' ' : match; }); editor.value.editor.setContent(newContent); } }; const handleDecreaseHeading = () => { if (editor.value && editor.value.editor) { const currentContent = editor.value.editor.getContent(); const newContent = currentContent.replace(/^(#{2,6})\s/gm, (match, p1) => { const level = p1.length; return level > 1 ? '#'.repeat(level - 1) + ' ' : match; }); editor.value.editor.setContent(newContent); } }; let hasLoggedVersion = false; const handleContentRendered = (type) => { if (!hasLoggedVersion) { console.log('SquibView version:', VERSION); hasLoggedVersion = true; } }; const handleRevisionUndo = (content, type) => { console.log('Undo:', type); }; const handleRevisionRedo = (content, type) => { console.log('Redo:', type); }; return { content, view, showControls, titleShow, editor, VERSION, handleContentChange, handleViewChange, handleUndo, handleRedo, handleClear, handleRemoveHR, handleIncreaseHeading, handleDecreaseHeading, handleContentRendered, handleRevisionUndo, handleRevisionRedo }; }, template: `

SquibView Vue Example (v{{ VERSION }})

B[Process] B --> C[End] ```" > sample.md # Convert to HTML npx squibv sample.md # Open sample.html in your browser ``` -------------------------------- ### Get Selection Data Source: https://github.com/deftio/squibview/blob/main/docs/api/SquibView.md Provides detailed information about the current text selection, including start and end positions. ```javascript const selectionInfo = editor.getSelectionData(); ``` -------------------------------- ### Custom CSS File Example Source: https://github.com/deftio/squibview/blob/main/docs/guides/04-cli-usage.html An example of a CSS file (`custom.css`) used with Squibview to style HTML elements, including body margins, headings, and data tables. It defines font families, colors, and table borders for a refined look. ```css /* custom.css */body { font-family: 'Georgia', serif; max-width: 800px; margin: 0 auto; padding: 2rem; } h1 { color: #2c3e50; border-bottom: 2px solid #3498db; } .squibview-data-table { border-collapse: collapse; width: 100%; } .squibview-data-tableth, .squibview-data-tabletd { border: 1px solid #ddd; padding: 8px; text-align: left; } ``` -------------------------------- ### Content Management API Source: https://github.com/deftio/squibview/blob/main/docs/programmers-guide.md Manage the content of the editor, including setting, getting, and retrieving different source formats. ```APIDOC ## Core Methods - Content Management ### `editor.setContent(content, contentType)` Sets the editor's content. - **Method**: JavaScript - **Parameters**: - `content` (string) - The content to set. - `contentType` (string) - The type of content (e.g., 'md', 'html'). ### `editor.getContent()` Gets the current content of the editor. - **Method**: JavaScript - **Returns**: string - The current content. ### `editor.getMarkdownSource()` Gets the current content in Markdown format. - **Method**: JavaScript - **Returns**: string - The Markdown source. ### `editor.getHTMLSource()` Gets the current content rendered as HTML. - **Method**: JavaScript - **Returns**: string - The HTML source. ```