Custom Toolbar

While ContentBox works without a custom toolbar, implementing one is highly recommended for production use. A custom toolbar allows you to add essential buttons like Save, Undo/Redo, device preview controls, and integrate with your own backend/navigation.

Why Use a Custom Toolbar?

• Save Button: Integrate with your backend/storage
• Undo/Redo: Quick access to history controls
• Device Preview: Toggle between desktop, tablet, and mobile views
• Custom Actions: Add your own buttons (Back, Preview, Download, etc.)
• Better UX: Keep important controls always visible

Setting Up

Enable custom toolbar by adding topSpace: true to the configuration:

javascript

const builder = new ContentBox({
    controlPanel: true,
    iframeSrc: 'blank.html',
    topSpace: true  // Adds space at the top for your custom toolbar
});

HTML Implementation

Here's a simplified custom toolbar example:

html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>ContentBox with Custom Toolbar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="contentbox/contentbox.css" rel="stylesheet">
    <link href="contentbuilder/contentbuilder.css" rel="stylesheet">
    
    <style>
        /* Simple toolbar styling */
        .custom-topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background: #2c3e50;
            color: white;
            gap: 10px;
        }
        .custom-topbar button {
            padding: 8px 16px;
            border: none;
            background: #34495e;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }
        .custom-topbar button:hover {
            background: #4a5f7f;
        }
        .custom-topbar .btn-group {
            display: flex;
            gap: 8px;
        }
    </style>
</head>
<body>

<!-- Custom Toolbar -->
<div class="custom-topbar">
    <div>ContentBox Editor</div>
    
    <div class="btn-group">
        <button onclick="builder.undo()">Undo</button>
        <button onclick="builder.redo()">Redo</button>
        <button onclick="save()">Save</button>
        <button onclick="builder.viewHtml()">View HTML</button>
        <button onclick="builder.toggleEditPanel()">Toggle Panel</button>
    </div>
    
    <div class="btn-group">
        <button onclick="builder.setScreenMode('desktop')">Desktop</button>
        <button onclick="builder.setScreenMode('tablet')">Tablet</button>
        <button onclick="builder.setScreenMode('mobile')">Mobile</button>
    </div>
</div>

<script src="contentbox/contentbox.min.js"></script>
<script>
const builder = new ContentBox({
    controlPanel: true,
    iframeSrc: 'blank.html',
    topSpace: true  // Enable custom toolbar area
});

// Load content
const html = localStorage.getItem('content') || '';
builder.loadHtml(html);
const mainCss = localStorage.getItem('mainCss') || '';
const sectionCss = localStorage.getItem('sectionCss') || '';
builder.loadStyles(mainCss, sectionCss);

// Save function
function save() {
    const html = builder.html();
    const mainCss = builder.mainCss();
    const sectionCss = builder.sectionCss();
    
    localStorage.setItem('content', html);
    localStorage.setItem('mainCss', mainCss);
    localStorage.setItem('sectionCss', sectionCss);
    
    alert('Content saved!');
}
</script>

</body>
</html>

React Implementation

For React, create a separate toolbar component:

tsx

// src/App.tsx
import { useEffect, useRef } from 'react'
import ContentBox from '@innovastudio/contentbox'
import '@innovastudio/contentbox/public/contentbox/contentbox.css'
import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css'
import Topbar from './components/Topbar'  // Custom toolbar component

function App() {
    const builderRef = useRef<ContentBox | null>(null);

    useEffect(() => {
        builderRef.current = new ContentBox({
            controlPanel: true,
            iframeSrc: `/blank.html`,
            topSpace: true  // Enable custom toolbar area
        });

        const savedHtml = localStorage.getItem('savedHtml') || '<div>...</div>';
        builderRef.current.loadHtml(savedHtml);

        return () => {
            builderRef.current?.destroy()
            builderRef.current = null
        };
    }, []);

    const handleSave = async () => {
        if(!builderRef.current) return;
        
        const html = builderRef.current.html();
        const mainCss = builderRef.current.mainCss();
        const sectionCss = builderRef.current.sectionCss();

        localStorage.setItem('savedHtml', html)
        localStorage.setItem('savedMainCss', mainCss)
        localStorage.setItem('savedSectionCss', sectionCss)
        
        alert('Content saved!')
    };

    const handleUndo = () => builderRef.current?.undo();
    const handleRedo = () => builderRef.current?.redo();
    const handleViewHtml = () => builderRef.current?.viewHtml();
    const handleTogglePanel = () => builderRef.current?.toggleEditPanel();
    const handleSetScreenMode = (mode: string) => builderRef.current?.setScreenMode(mode);

    return (
        <>
            <Topbar
                onSave={handleSave}
                onUndo={handleUndo}
                onRedo={handleRedo}
                onViewHtml={handleViewHtml}
                onTogglePanel={handleTogglePanel}
                onSetScreenMode={handleSetScreenMode}
            />
            {/* ContentBox will be rendered here */}
        </>
    );
}

export default App

💡 Complete Implementation: The Topbar component with full functionality, icons, and styling is available in examples/react/src/components/Topbar.tsx in the package.

Available Toolbar Methods

Common methods you'll use in your custom toolbar:

• builder.undo() - Undo last action
• builder.redo() - Redo last undone action
• builder.viewHtml() - View HTML source
• builder.toggleEditPanel() - Show/hide the edit panel
• builder.setScreenMode(mode) - Set device preview mode ('desktop', 'tablet', 'mobile', 'fullview')
• builder.download() - Download content as HTML file
• builder.clear() - Clear all content