🔧 Configuration Options

Your plugin can have configuration in two ways: Simple Settings (auto-generated UI) and Custom Editors (advanced UI). You can use both in the same plugin!

When to Use Each Approach

Use Simple Settings (Auto-Generated UI)

Best for: Simple configuration options like numbers, dropdowns, and checkboxes.

settings: {
    columns: { type: 'number', label: 'Columns', default: 3 },
    showTitles: { type: 'boolean', label: 'Show Titles', default: true },
    theme: { type: 'select', label: 'Theme', options: [...] }
}

Pros:

• Zero UI code needed
• Consistent look and feel
• Quick to implement

Use Custom Editor

Best for: Complex, interactive configuration like sortable lists, dynamic forms, or live previews.

editor: {
    openContentEditor: function(element, builder, onChange) {
        // Build your custom UI here
        const container = document.createElement('div');
        // Add sortable lists, dynamic forms, etc.
        return container;
    }
}

Pros:

• Full control over UI/UX
• Support for complex interactions
• Can integrate third-party libraries

Use Both Together! 🎉

export default {
    name: 'my-plugin',
    
    settings: {
        // Simple options (auto-generated UI)
        columns: { type: 'number', label: 'Columns', default: 3 }
    },
    
    editor: {
        // Complex editor for advanced features
        openContentEditor: function(element, builder, onChange) {
            // Custom UI for managing list items, etc.
        }
    },
    
    mount: function(element, options) {
        // Your plugin logic
    }
}

Users will see both the auto-generated settings form AND your custom editor.