📚 Documentation

🚀 Quick Start

<!-- Include the script -->
<script src="https://cdn.jsdelivr.net/gh/nvacod/multieditorjs@main/multieditor.js"></script>

<!-- Create container -->
<div id="editor"></div>

<!-- Initialize -->
<script>
const editor = new MultiEditor('#editor');
</script>

⚙️ Configuration Options

const editor = new MultiEditor('#editor', {
    // Dimensions
    width: '100%',
    height: '800px',
    minWidth: '320px',
    maxWidth: '100%',
    
    // Theme: slate, indigo, rose, emerald, amber, sky, 
    //        dark, midnight, glass, neon, sunset, ocean,
    //        forest, lavender, copper
    defaultStyle: 'slate',
    
    // Language: 'ja', 'en', 'zh'
    lang: 'ja',
    
    // Widgets to show
    allowTool: ['calendar', 'editor', 'todo', 'clock', 'memo', 
                'timer', 'stopwatch', 'calculator', 'pomodoro', 'markdown'],
    
    // Widgets to disable
    disableTool: [],
    
    // Timezone for clock
    timezone: 'Asia/Tokyo',
    
    // Auto-save to localStorage
    autoSave: true,
    autoSaveInterval: 30000,  // 30 seconds
    storageKey: 'multieditor_data',
    
    // Features
    enableShortcuts: true,    // Ctrl+S, Ctrl+E, Escape
    enableDragDrop: true,     // Reorder widgets
    enableFullscreen: true,   // Fullscreen button
    enableNotifications: true, // Sound notifications
    
    // Display mode: 'grid' or 'window'
    displayMode: 'grid',
    
    // Font size settings
    fontSize: 14,
    fontSizeMin: 10,
    fontSizeMax: 24,
    
    // Credit display
    showCredit: true,
    
    // Callbacks
    onSave: (data) => console.log('Saved:', data),
    onChange: (change) => console.log('Changed:', change),
    onThemeChange: (theme) => console.log('Theme:', theme)
});

📦 Available Widgets

Widget ID	Description	Features
`calendar`	Interactive Calendar	Month/year navigation, event notes, date selection
`editor`	Code Editor	Line numbers, tab support, monospace font
`todo`	Task Manager	Add/delete tasks, completion toggle
`clock`	World Clock	Live time, date display, timezone support
`memo`	Quick Notes	Simple text area for notes
`timer`	Countdown Timer	Set hours/minutes/seconds, notifications
`stopwatch`	Stopwatch	Millisecond precision, pause/resume
`calculator`	Calculator	Basic operations, percentage, backspace
`pomodoro`	Pomodoro Timer	Work/break cycles, customizable durations
`markdown`	Markdown Editor	Live preview, toolbar, syntax support

🎯 API Methods

// Save data
editor.save();

// Export as JSON file
editor.exportData();

// Import from file
editor.importData(file);

// Toggle fullscreen
editor.toggleFullscreen();

// Get/Set data
const data = editor.getData();
editor.setData({ notes: 'Hello World!' });

// Theme & Language
editor.setTheme('dark');
editor.setLanguage('en');

// Show specific widgets
editor.showWidgets(['calendar', 'todo', 'clock']);

// Toast notifications
editor.toast('Hello!', 'success'); // success, warning, error, info

// Event listeners
const unsubscribe = editor.on('change', (data) => {
    console.log('Data changed:', data);
});
unsubscribe(); // Remove listener

// Settings panel
editor.openSettings();
editor.closeSettings();

// Font size
editor.setFontSize(16);

// Display mode
editor.setDisplayMode('window'); // 'grid' or 'window'

// Destroy instance
editor.destroy();

🪟 Window Mode

Window mode allows widgets to be used like desktop windows:

Drag to move - Click and drag the title bar to reposition
Resize - Drag widget edges/corners to resize
Minimize - Collapse widget to title bar only
Maximize - Expand widget to fill the container
Position persistence - Positions are saved to localStorage

// Enable window mode via config
const editor = new MultiEditor('#editor', {
    displayMode: 'window'
});

// Or toggle dynamically
editor.setDisplayMode('window');
editor.setDisplayMode('grid');

// Minimize/maximize specific widget
editor.minimizeWidget('calendar');
editor.maximizeWidget('calendar');

🔌 Plugin System

// Create a plugin
const myPlugin = {
    init(editor) {
        console.log('Plugin initialized!');
        
        // Listen to events
        editor.on('save', (data) => {
            console.log('Data saved:', data);
        });
        
        // Add custom widget
        editor.addWidget('weather', 'Weather', function(container) {
            container.innerHTML = '<div style="padding:20px;">🌤️ Weather Widget</div>';
        });
        
        // Add custom theme
        editor.addTheme('sakura', {
            bg: '#fff5f5',
            card: '#ffffff',
            text: '#4a4a4a',
            textMuted: '#9f9f9f',
            border: '#ffcccc',
            accent: '#ff69b4',
            accentHover: '#ff1493',
            danger: '#dc143c',
            success: '#32cd32',
            warning: '#ffa500'
        });
        
        // Add custom language
        editor.addLanguage('ko', '한국어', {
            calendar: "캘린더",
            editor: "에디터",
            todo: "할일",
            clock: "시계",
            save: "저장",
            // ... more translations
        });
        
        // Add custom toolbar button
        editor.addToolbarButton({
            id: 'help',
            icon: 'close', // or custom SVG HTML
            title: 'Help',
            position: 'right',
            onClick: function() {
                alert('Help clicked!');
            }
        });
    }
};

// Use plugin
const editor = new MultiEditor('#editor', {
    plugins: [myPlugin]
});

// Or register later
editor.registerPlugin(myPlugin);

🛠️ Toolbar Customization

// Customize toolbar layout
const editor = new MultiEditor('#editor', {
    toolbarLayout: {
        showWidgetButtons: true,
        showLanguageSelector: true,
        showThemeSelector: true,
        showFullscreenButton: true,
        showExportButton: true,
        showImportButton: true,
        showSaveButton: true,
        showSettingsButton: true,
        compactMode: false  // Set true to hide button text labels
    }
});

// Update layout dynamically
editor.setToolbarLayout({
    showExportButton: false,
    compactMode: true
});

// Add custom icon
editor.addIcon('custom', '<circle cx="12" cy="12" r="10"/>');

// Get available themes/languages
const themes = editor.getThemes();
const languages = editor.getLanguages();

⌨️ Keyboard Shortcuts

Ctrl/Cmd + S - Save data
Ctrl/Cmd + E - Export data
Escape - Exit fullscreen mode
Tab - Insert 4 spaces (in code editor)

🎨 Theme Examples

// Light themes
editor.setTheme('slate');    // Gray tones
editor.setTheme('indigo');   // Purple/blue
editor.setTheme('rose');     // Pink/red
editor.setTheme('emerald');  // Green
editor.setTheme('amber');    // Orange/yellow
editor.setTheme('sky');      // Blue
editor.setTheme('lavender'); // Light purple
editor.setTheme('copper');   // Warm brown

// Dark themes
editor.setTheme('dark');     // Dark blue
editor.setTheme('midnight'); // Deep dark
editor.setTheme('neon');     // Green on black
editor.setTheme('forest');   // Dark green

// Gradient/Glass themes
editor.setTheme('glass');    // Purple gradient with blur
editor.setTheme('sunset');   // Pink/orange gradient
editor.setTheme('ocean');    // Blue gradient