Making buttons

Buttons are regular Livewire components which are rendered in the upper right corner of the editor.

To keep the button informed of editor changes, you can use the editorIsUpdated listener.

In the below example, we create a Save button.

class ExampleButton extends Component
{
    public $properties;

    protected $listeners = [
        'editorIsUpdated' => 'editorIsUpdated',
    ];

    public function editorIsUpdated($properties)
    {
        $this->properties = $properties;
    }

    public function save()
    {
        // Example of getting a json string of the active blocks.
        // $activeBlocks = collect($this->properties['activeBlocks'])
        //     ->toJson();

        // If you want to generate the output, you can do:
        // $output = Parse::execute([
        //     'activeBlocks' => $this->properties['activeBlocks'],
        //     'base' => $this->properties['base'],
        //     'context' => 'rendered',
        //     'parsers' => $this->properties['parsers'],
        // ]);
    }

    public function render()
    {
        return <<<'blade'
            <div>
                <button wire:click="save" class="bg-blue-200 text-blue-900 rounded px-3 py-1 text-sm">Save</button>
            </div>
        blade;
    }
}

Registering buttons

Once your button is created, to make it show up in the editor, you need to register it in your configuration file.

return [
    'buttons' => [
        'example-button'
    ],
];

You may also override this by passing an array to the Livewire editor component.

@livewire('dropblockeditor', [
    'buttons' => [
        'example-button'
    ]
])