README

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.

Warning

Typebar is currently a work in progress. Do not use in production yet. Please report any issues you encounter to help us stabilize the package.

Requirements

PHP 8.2+
Filament v4 or v5

Installation

Install the package via Composer:

composer require awcodes/typebar

Publish the config file:

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

Usage

Basic

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

use Filament\Forms\Components\MarkdownEditor;

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

Custom keys

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

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

Pairs

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([
        '(' => ')',
        '[' => ']',
        '`' => '`',
    ])

Collapsible

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)

Note

->typebarCollapsible() must be called before ->typebar() when chaining both on the same field, because Filament resolves the first-registered attribute value. Alternatively, enable collapsible at the plugin or config level and it will apply automatically whenever ->typebar() is called.

Panel Plugin

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.

`mobileOnly()`

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

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

`collapsible()`

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

TypebarPlugin::make()
    ->collapsible()

Configuration Priority

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

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

Configuration

// config/typebar.php

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

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

    'mobile_only' => true,

    'collapsible' => false,
];

Testing

composer test

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

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

Credits

License

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

awcodes / typebar

Maintainers

Package info

Fund package maintenance!

Statistics

Security