A mobile-friendly Markdown symbol row for Filament's native MarkdownEditor. Typebar behaves like a keyboard accessory row — tapping a key inserts the literal character at the cursor position.

• PHP 8.2+
• Filament v4 or v5

Install the package via Composer:

composer require awcodes/typebar

Publish the config file:

php artisan vendor:publish --tag="typebar-config"

Add ->typebar() to any MarkdownEditor field to enable the symbol row:

use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
    ->typebar()

Pass an array of characters to override the default key set for a specific field:

MarkdownEditor::make('content')
    ->typebar(['*', '_', '[', ']', '(', ')', '`'])

Use ->typebarPairs() to define character pairs. When a paired key is tapped, both characters are inserted and the cursor is placed between them:

MarkdownEditor::make('content')
    ->typebar()
    ->typebarPairs([
        '(' => ')',
        '[' => ']',
        '`' => '`',
    ])

Use ->typebarCollapsible() to let users collapse the symbol row down to a single toggle button. The collapsed/expanded state is saved to localStorage so it persists across page loads:

MarkdownEditor::make('content')
    ->typebar()
    ->typebarCollapsible()

Pass false to explicitly disable collapsing on a field when it is enabled at the plugin or config level:

MarkdownEditor::make('content')
    ->typebar()
    ->typebarCollapsible(false)

Register the plugin in your panel provider to set panel-level defaults:

use Awcodes\Typebar\TypebarPlugin;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(
            TypebarPlugin::make()
                ->keys(['*', '_', '[', ']', '(', ')', '`'])
                ->pairs([
                    '(' => ')',
                    '[' => ']',
                    '`' => '`',
                ])
                ->mobileOnly()
                ->collapsible()
        );
}

The plugin is optional. Without it, the package falls back to the published config values.

By default Typebar only appears on coarse-pointer (touch) devices. Pass false to show it on all devices:

TypebarPlugin::make()
    ->mobileOnly(false)

Allow users to collapse the symbol row to a single toggle button. The preference is saved in localStorage:

TypebarPlugin::make()
    ->collapsible()

Options resolve in this order, from highest to lowest priority:

1. Field-level methods (->typebar([...]), ->typebarPairs([...]), ->typebarCollapsible())
2. Plugin fluent options (TypebarPlugin::make()->keys([...])->pairs([...])->collapsible())
3. Published config values (config/typebar.php)

// config/typebar.php

return [
    'keys' => [
        '#', '*', '_', '!', '`', '[', ']', '(', ')', '{', '}',
        '<', '>', '-', '|', '~', '@', '$', ':', '=', '/', '"', "'",
    ],

    'pairs' => [
        // '(' => ')',
        // '[' => ']',
        // '`' => '`',
    ],

    'mobile_only' => true,

    'collapsible' => false,
];

composer test

Please see CONTRIBUTING for details.

Please review our security policy on how to report security vulnerabilities.

• Adam Weston
• All Contributors

The MIT License (MIT). Please see License File for more information.