PHP code example of awcodes / filament-tiptap-editor

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

awcodes / filament-tiptap-editor example snippets

use FilamentTiptapEditor\TiptapEditor;
use FilamentTiptapEditor\Enums\TiptapOutput;

TiptapEditor::make('content')
    ->profile('default|simple|minimal|none|custom')
    ->tools([]) // individual tools to use in the editor, overwrites profile
    ->disk('string') // optional, defaults to config setting
    ->directory('string or Closure returning a string') // optional, defaults to config setting
    ->acceptedFileTypes(['array of file types']) // optional, defaults to config setting
    ->maxSize('integer in KB') // optional, defaults to config setting
    ->output(TiptapOutput::Html) // optional, change the format for saved data, default is html
    ->maxContentWidth('5xl')
    ->

'profiles' => [
    'default' => [
        'heading', 'bullet-list', 'ordered-list', 'checked-list', 'blockquote', 'hr',
        'bold', 'italic', 'strike', 'underline', 'superscript', 'subscript', 'lead', 'small', 'align-left', 'align-center', 'align-right',
        'link', 'media', 'oembed', 'table', 'grid-builder', 'details',
        'code', 'code-block', 'source',
    ],
    'simple' => [
        'heading', 'hr', 'bullet-list', 'ordered-list', 'checked-list',
        'bold', 'italic', 'lead', 'small',
        'link', 'media',
    ],
    'minimal' => [
        'bold', 'italic', 'link', 'bullet-list', 'ordered-list',
    ],
],

[
    'accepted_file_types' => ['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml', 'application/pdf'],
    'disk' => 'public',
    'directory' => 'images',
    'visibility' => 'public',
    'preserve_file_names' => false,
    'max_file_size' => 2042,
    'image_crop_aspect_ratio' => null,
    'image_resize_target_width' => null,
    'image_resize_target_height' => null,
]

use FilamentTiptapEditor\Enums\TiptapOutput;

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

// in your migration
$table->json('content');

// in your model
protected $casts = [
    'content' => 'json' // or 'array'
];

// config/filament-tiptap-editor.php
'direction' => 'rtl'

'max_content_width' => 'full'

use FilamentTiptapEditor\TiptapEditor;

TiptapEditor::make('content')
    ->maxContentWidth('3xl');

TiptapEditor::make('content')
    ->extraInputAttributes(['style' => 'min-height: 12rem;']),

'preset_colors' => [
    'primary' => '#f59e0b',
    'secondary' => '#14b8a6',
    'red' => '#ef4444',
    //..
]

TiptapEditor::make('content')
    ->disableFloatingMenus()
    ->disableBubbleMenus();

'disable_floating_menus' => true,
'disable_bubble_menus' => true,

TiptapEditor::make('content')
    ->floatingMenuTools(['grid-builder', 'media', 'link'])

'floating_menu_tools' => ['media', 'grid-builder', 'details', 'table', 'oembed', 'code-block'],
'bubble_menu_tools' => ['bold', 'italic', 'strike', 'underline', 'superscript', 'subscript', 'lead', 'small', 'link'],

TiptapEditor::make('content')
    ->gridLayouts([
        'two-columns',
        'three-columns',
        'four-columns',
        'five-columns',
        'fixed-two-columns',
        'fixed-three-columns',
        'fixed-four-columns',
        'fixed-five-columns',
        'asymmetric-left-thirds',
        'asymmetric-right-thirds',
        'asymmetric-left-fourths',
        'asymmetric-right-fourths',
    ]);

use FilamentTiptapEditor\Enums\TiptapOutput;

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

use FilamentTiptapEditor\TiptapBlock;

class BatmanBlock extends TiptapBlock
{
    public string $preview = 'blocks.previews.batman';

    public string $rendered = 'blocks.rendered.batman';

    public function getFormSchema(): array
    {
        return [
            TextInput::make('name'),
            TextInput::make('color'),
            Select::make('side')
                ->options([
                    'Hero' => 'Hero',
                    'Villain' => 'Villain',
                ])
                ->default('Hero')
        ];
    }
}

use FilamentTiptapEditor\TiptapBlock;

class StaticBlock extends TiptapBlock
{
    public string $preview = 'blocks.previews.static';

    public string $rendered = 'blocks.rendered.static';
}

class BatmanBlock extends TiptapBlock
{
    public string $width = 'xl';
    
    public bool $slideOver = true;
    
    public ?string $icon = 'heroicon-o-film';
}

use App\TiptapBlocks\BatmanBlock;
use App\TiptapBlocks\StaticBlock;
use FilamentTiptapEditor\TiptapEditor;

TiptapEditor::configureUsing(function (TiptapEditor $component) {
    $component
        ->blocks([
            BatmanBlock::class,
            StaticBlock::class,
        ]);
});

use App\TiptapBlocks\BatmanBlock;
use App\TiptapBlocks\StaticBlock;
use FilamentTiptapEditor\TiptapEditor;

TiptapEditor::configureUsing(function (TiptapEditor $component) {
    $component
        ->collapseBlocksPanel()
        ->blocks([...]);
});

TiptapEditor::make('content')
    ->mergeTags([
        'first_name',
        'last_name',
    ])

TiptapEditor::make('content')
    ->mergeTags([...])
    ->showMergeTagsInBlocksPanel(false)

<form wire:submit.prevent="submit">
    {{ $this->form }}

    <button type="submit">
        Save
    </button>
</form>

{{ $this->modal }}

TiptapEditor::make('content')
    ->placeholder('Write something...')

TiptapEditor::make('content')
    ->nodePlaceholders([
        'paragraph' => 'Start writing your paragraph...',
        'heading' => 'Insert a heading...',
    ])

TiptapEditor::make('content')
    // All nodes will immediately be displayed, instead of only the selected node
    ->showOnlyCurrentPlaceholder(false)

TiptapEditor::make('content')
    ->placeholder('Write something...')

TiptapEditor::make('content')
    ->nodePlaceholders([
        'paragraph' => 'Start writing your paragraph...',
        'heading' => 'Insert a heading...',
    ])

TiptapEditor::make('content')
    // All nodes will immediately be displayed, instead of only the selected node
    ->showOnlyCurrentPlaceholder(false)

TiptapEditor::make(name: 'content')
    ->mentionItems([
        // The simplest mention item: a label and a id
        new MentionItem(label: 'Banana', id: 1),
        
         // Add a href to make the mention clickable in the final HTML output
        new MentionItem(id: 1, label: 'Strawberry', href: 'https://filamentphp.com'),
        
        // Include additional data to be stored in the final JSON output
        new MentionItem(id: 1, label: 'Strawberry', data: ['type' => 'fruit_mentions']),
    ])

TiptapEditor::make(name: 'content')
    ->mentionItems([
        ['label' => 'Apple', 'id' => 1],
        ['label' => 'Banana', 'id' => 2],
        ['label' => 'Strawberry', 'id' => 3],
    ])

TiptapEditor::make(name: 'content')
    // You can also use MentionSearchStrategy::Tokenized
    ->mentionSearchStrategy(MentionSearchStrategy::StartsWith)

use FilamentTiptapEditor\Concerns\HasFormMentions;

class YourClass
{
use HasFormMentions;

TiptapEditor::make(name: 'content')
    ->getMentionItemsUsing(function (string $query) {
        // Get suggestions based of the $query
        return User::search($query)->get()->map(fn ($user) => new MentionItem(
            id: $user->id,
            label: $user->name
        ))->take(5)->toArray();
    })

TiptapEditor::make(name: 'content')
    ->mentionDebounce(debounceInMs: 300)

TiptapEditor::make(name: 'content')
    ->mentionItems([
        new MentionItem(id: 1, label: 'John Doe', image: 'YOUR_IMAGE_URL'),
        
        // Optional: Show rounded image, useful for avatars
        new MentionItem(id: 1, label: 'John Doe', image: 'YOUR_IMAGE_URL', roundedImage: true),
    ])

TiptapEditor::make(name: 'content')
    // Customize the "No results found" message
    ->emptyMentionItemsMessage("No users found")
    
    // Set a custom placeholder message. Note: if you set a placeholder, then it will ONLY show suggestions when the query is not empty.
    ->mentionItemsPlaceholder("Search for users...")
    
    // Customize how many mention items should be shown at once, 8 by default. Is nullable and only works with static suggestions.
    ->maxMentionItems()

    // Set a custom character trigger for mentioning. This is '@' by default
    ->mentionTrigger('#')

namespace App\TiptapExtensions;

use Tiptap\Core\Node;

class Hero extends Node
{
    public static $name = 'hero';
    ...
}

'profiles' => [
    'minimal' => [
        ..., 
        'hero',
    ],
],
'extensions_script' => 'resources/js/tiptap/extensions.js',
'extensions_styles' => 'resources/css/tiptap/extensions.css',
'extensions' => [
    [
        'id' => 'hero',
        'name' => 'Hero',
        'button' => 'tools.hero',
        'parser' => \App\TiptapExtensions\Hero::class,
    ],
],

blade
{!! tiptap_converter()->asHTML($post->content) !!}
{!! tiptap_converter()->asJSON($post->content) !!}
{!! tiptap_converter()->asText($post->content) !!}

bash
php artisan vendor:publish --tag="filament-tiptap-editor-config"

html
<div class="flex items-center gap-6">
    <div class="text-5xl">
        @php
            echo match($name) {
                'robin' => '🐤',
                'ivy' => '🥀',
                'joker' => '🤡',
                default => '🦇'
            }
        @endphp
    </div>
    <div>
        <p>Name: {{ $name }}</p>
        <p style="color: {{ $color }};">Color: {{ $color }}</p>
        <p>Side: {{ $side ?? 'Good' }}</p>
    </div>
</div>