Block icon not showing in toolbar

[hofmannsven]

Filament Version

v3.2.60

Plugin Version

v3.3.2

PHP Version

PHP 8.2.16

Problem description

I followed the steps in the documentation to create a custom block. I also added the blocks key to the editor profiles in the config file. However, the icon does not appear in the toolbar.

Blocks are available and fully functional from the Merge Tags sidebar (see screenshot below).

Expected behavior

This is where I am looking for the block icon in the toolbar:

Steps to reproduce

Config:

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Profiles
    |--------------------------------------------------------------------------
    |
    | Profiles determine which tools are available for the toolbar.
    | 'default' is all available tools, but you can create your own subsets.
    | The order of the tools doesn't matter.
    |
    */
    'profiles' => [
        'default' => [
            'heading', 'bullet-list', 'ordered-list', 'checked-list', 'blockquote', 'hr', '|',
            'bold', 'italic', 'strike', 'underline', 'superscript', 'subscript', 'lead', 'small', 'color', 'highlight', 'align-left', 'align-center', 'align-right', '|',
            'link', 'media', 'oembed', 'table', 'grid-builder', 'details', '|', 'code', 'code-block', 'source', 'blocks',
        ],
        'simple' => ['heading', 'hr', 'bullet-list', 'ordered-list', 'checked-list', '|', 'bold', 'italic', 'lead', 'small', '|', 'link', 'media', 'grid-builder', 'blocks'],
        'minimal' => ['bold', 'italic', 'link', 'bullet-list', 'ordered-list', 'blocks'],
        'none' => [],
    ],
    // ...
];

Theme:

@import '/vendor/filament/filament/resources/css/theme.css';
@import '/vendor/awcodes/filament-tiptap-editor/resources/css/plugin.css';
@config 'tailwind.config.js';

Tailwind:

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
  presets: [preset],
  content: [
    './app/Filament/**/*.php',
    './resources/views/filament/**/*.blade.php',
    './vendor/filament/**/*.blade.php',
    './vendor/awcodes/filament-tiptap-editor/resources/**/*.blade.php',
  ],
}

Reproduction repository

No response

Relevant log output

No response

[awcodes]

Can you share your TiptapEditor field? Or a reproduction repo?

[awcodes]

My guess is you're not doing the output as TiptapOutput::Json. Blocks don't work if you are trying to store the content as html.

[hofmannsven]

@awcodes Changing the TiptapOutput from HTML to JSON did the trick. Thank you so much for the quick reply!

TiptapEditor::make('content')
    ->output(FilamentTiptapEditor\TiptapOutput::Json);