Back to Home

Editor Commands

Tipex is built on top of TipTap and provides full access to TipTap's powerful command API. This guide covers common editor commands and their usage.

Basic Content Management

Here are the fundamental commands for managing editor content:

// Set content
editor.commands.setContent('<p>Hello World</p>')

// Insert content at cursor position
editor.commands.insertContent('New content')

// Clear content
editor.commands.clearContent()

// Focus editor
editor.commands.focus()

Text Formatting

Common text formatting commands:

// Toggle bold
editor.commands.toggleBold()

// Toggle italic
editor.commands.toggleItalic()

// Toggle code
editor.commands.toggleCode()

// Toggle heading
editor.commands.toggleHeading({ level: 2 })

Working with Lists

Commands for handling different types of lists:

// Toggle bullet list
editor.commands.toggleBulletList()

// Toggle ordered list
editor.commands.toggleOrderedList()

// Toggle task list
editor.commands.toggleTaskList()

// Example of a list button implementation
<button
    aria-label="Toggle bullet list"
    onclick={() => tipex.chain().focus().toggleBulletList().run()}
    class="tipex-edit-button"
    class:active={tipex.isActive('bulletList')}
>
    <iconify-icon icon="fa6-solid:list"></iconify-icon>
</button>

Link Management

Commands for working with links:

// Set link
editor.commands.setLink({ href: 'https://example.com' })

// Unset link
editor.commands.unsetLink()

// Example of custom link handling
function handleLinkUpdate(url) {
    if (url.startsWith('http://') || url.startsWith('https://')) {
        editor.chain()
            .focus()
            .setLink({ href: url })
            .run()
    }
}

Image Handling

Tipex supports both base64 and URL-based images. Here's how to handle image uploads:

// For base64 images (e.g., pasted images)
// These are automatically handled by Tipex's default configuration

// For uploaded images
async function handleImageUpload(file) {
    // 1. Upload to your server
    const formData = new FormData()
    formData.append('image', file)

    try {
        const response = await fetch('/your-upload-endpoint', {
            method: 'POST',
            body: formData
        })
        const { url } = await response.json()

        // 2. Insert the image using the returned URL
        editor.commands.setImage({
            src: url,
            alt: 'Uploaded image',
            title: 'Image title'
        })
    } catch (error) {
        console.error('Upload failed:', error)
    }
}

Advanced Usage

You can chain multiple commands together for complex operations:

// Chain multiple commands
editor.chain()
    .focus()
    .toggleBold()
    .toggleItalic()
    .run()

// Check if a command is active
const isBold = editor.isActive('bold')
const isHeading = editor.isActive('heading', { level: 2 })

Note: Tipex provides full access to TipTap's command API. For a complete reference of all available commands, visit the TipTap Commands API Documentation.