PHPackages                             awcodes/richer-editor - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. awcodes/richer-editor

ActiveLibrary[Utility & Helpers](/categories/utility)

awcodes/richer-editor
=====================

A collection of extensions and tools to enhance the Filament Rich Editor field.

v2.2.0(1mo ago)3913.8k↑217.4%4[1 issues](https://github.com/awcodes/richer-editor/issues)[2 PRs](https://github.com/awcodes/richer-editor/pulls)2MITPHPPHP ^8.2CI passing

Since Dec 9Pushed 1mo ago2 watchersCompare

[ Source](https://github.com/awcodes/richer-editor)[ Packagist](https://packagist.org/packages/awcodes/richer-editor)[ Docs](https://github.com/awcodes/richer-editor)[ GitHub Sponsors](https://github.com/awcodes)[ RSS](/packages/awcodes-richer-editor/feed)WikiDiscussions 2.x Synced 1mo ago

READMEChangelog (10)Dependencies (64)Versions (20)Used By (2)

[![richer editor opengraph image](https://camo.githubusercontent.com/9ef60b34df64fa4573069b6ba58dff70ddee645a5225ff732276f96c972f44aa/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f61772d636f6465732f696d6167652f75706c6f61642f635f7363616c652c775f313230302f76313737323232363836342f7468756d626e61696c732f6177636f6465732d7269636865722d656469746f722e77656270)](https://camo.githubusercontent.com/9ef60b34df64fa4573069b6ba58dff70ddee645a5225ff732276f96c972f44aa/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f61772d636f6465732f696d6167652f75706c6f61642f635f7363616c652c775f313230302f76313737323232363836342f7468756d626e61696c732f6177636f6465732d7269636865722d656469746f722e77656270)

Richer Editor
=============

[](#richer-editor)

A collection of extensions and tools to enhance the Filament Rich Editor field.

[![Latest Version](https://camo.githubusercontent.com/db98589932adcff2e74105a7c2d3f6fed877d477089b0598cd3ae0287d7df6e0/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6177636f6465732f7269636865722d656469746f722e7376673f7374796c653d666c61742d73717561726526636f6c6f723d626c7565266c6162656c3d52656c65617365)](https://github.com/awcodes/richer-editor/releases)[![MIT Licensed](https://camo.githubusercontent.com/a7e65aee57b11d28e4caff8b945729a66be0bb663f7f93bd24c5aa65699f148e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![Total Downloads](https://camo.githubusercontent.com/f9cb442ba4851b0eaef9653aeff09ac5929fd1d0a4339d4659b5975c618b4ce8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6177636f6465732f7269636865722d656469746f722e7376673f7374796c653d666c61742d73717561726526636f6c6f723d626c7565266c6162656c3d446f776e6c6f616473)](https://packagist.org/packages/awcodes/richer-editor)[![GitHub Repo stars](https://camo.githubusercontent.com/783800f1e10a8d6cb664f9296e4f90cb05bd78b40f718364e7c7fc1583bd55d9/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6177636f6465732f7269636865722d656469746f723f7374796c653d666c61742d73717561726526636f6c6f723d626c7565266c6162656c3d5374617273)](https://github.com/awcodes/richer-editor/stargazers)

Compatibility
-------------

[](#compatibility)

Package VersionFilament Version1.x4.x2.x5.xInstallation
------------

[](#installation)

You can install the package via composer:

```
composer require awcodes/richer-editor
```

Important

If you have not set up a custom theme and are using Filament Panels, follow the instructions in the [Filament Docs](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme) first.

After setting up a custom theme, add the plugin's CSS and views to your theme.css file or your app.css file if using the standalone packages.

```
@import '../../../../vendor/awcodes/richer-editor/resources/css/index.css';

@source '../../../../vendor/awcodes/richer-editor/resources/views/**/*.blade.php';
```

Editor Usage
------------

[](#editor-usage)

Warning

The following plugins are experimental and should not be used at the moment. See their docblocks for more information.

- FigurePlugin
- VideoPlugin

### Plugins

[](#plugins)

```
use Awcodes\RicherEditor\Plugins\DebugPlugin;
use Awcodes\RicherEditor\Plugins\EmbedPlugin;
use Awcodes\RicherEditor\Plugins\EmojiPlugin;
use Awcodes\RicherEditor\Plugins\FullScreenPlugin;
use Awcodes\RicherEditor\Plugins\IdPlugin;
use Awcodes\RicherEditor\Plugins\LinkPlugin;
use Awcodes\RicherEditor\Plugins\SourceCodePlugin;
use Awcodes\RicherEditor\Plugins\FakerPlugin;
use Awcodes\RicherEditor\Plugins\CodeBlockShikiPlugin;

RichEditor::make('content')
    ->plugins([
        DebugPlugin::make(), // only works in local environment
        EmbedPlugin::make(),
        EmojiPlugin::make(), // Doesn't have a toolbar button
        FullScreenPlugin::make(),
        IdPlugin::make(), // Doesn't have a toolbar button
        LinkPlugin::make(), // Requires IdPlugin
        SourceCodePlugin::make(),
        FakerPlugin::make(), // only works in local environment
        CodeBlockShikiPlugin::make(),
    ])
    ->toolbarButtons([
        ['embed', 'sourceCode', 'fullscreen', 'debug', 'fakeHeading', 'fakeParagraphs', 'fakeBulletList', 'fakeNumberedList', 'codeBlock'],
    ])
```

### Max Height

[](#max-height)

```
use Filament\Forms\Components\RichEditor\RichEditorTool;

RichEditor::make('content')
    ->maxHeight('400px')
```

### Nested Tool Groups (Dropdowns)

[](#nested-tool-groups-dropdowns)

```
use Awcodes\RicherEditor\Tools\ToolGroup;
use Filament\Forms\Components\RichEditor\RichEditorTool;

RichEditor::make('content')
    ->tools([
        ToolGroup::make('headingTools')
            ->label('Headings')
            ->icon(Heroicon::H1)
            ->displayAsLabel()
            ->items([
                'h1',
                'h2',
                'h3',
                RichEditorTool::make('h4')...
            ]),
        ToolGroup::make('devTools')
            ->label('Developer Tools')
            ->icon(Heroicon::Sparkles)
            ->displayAsLabel()
            ->items([
                'debug',
                'fakeHeading',
                'fakeParagraphs',
                'fakeBulletList',
                'fakeNumberedList'
            ]),
    ])
    ->toolbarButtons([
        ['headingTools', 'devTools'],
    ])
```

### Prebuilt Tools

[](#prebuilt-tools)

The following tools are depreciated and will be removed in a future release. Please use the heading tools provided by Filament instead.

- Heading Four Tool
- Heading Five Tool
- Heading Six Tool

```
use Awcodes\RicherEditor\Tools\HeadingFourTool;
use Awcodes\RicherEditor\Tools\HeadingFiveTool;
use Awcodes\RicherEditor\Tools\HeadingSixTool;

RichEditor::make('content')
    ->tools([
        HeadingFourTool::make(),
        HeadingFiveTool::make(),
        HeadingSixTool::make(),
    ])
    ->toolbarButtons([
        ['h4', 'h5', 'h6'],
    ])
```

### Prebuilt Blocks

[](#prebuilt-blocks)

#### Highlighted Code Block (Phiki)

[](#highlighted-code-block-phiki)

```
use Awcodes\RicherEditor\Blocks\HighlightedCodeBlock;

RichEditor::make('content')
    ->blocks([
        HighlightedCodeBlock::class,
    ])

// when rendering the content, you can change the theme using any of Phiki's supported themes. See https://phiki.dev/multi-themes

use Awcodes\RicherEditor\Blocks\HighlightedCodeBlock;
use Phiki\Theme\Theme;

RichContentRenderer::make($content)
    ->customBlocks([
        HighlightedCodeBlock::class => [
            'light' => Theme::GithubLight,
            'dark' => Theme::GithubDark,
        ],
    ])
    ->toHtml()
```

### Code Block Syntax Highlighting (Shiki)

[](#code-block-syntax-highlighting-shiki)

The `CodeBlockShikiPlugin` highlights code blocks in the editor using [Shiki](https://shiki.style). You can set the theme used to render code blocks, and optionally supply separate light/dark themes.

Themes accept either a [Phiki `Theme`](https://phiki.dev) enum case or any bundled Shiki theme name as a string. See [Shiki's themes](https://shiki.style/themes) for the full list.

```
use Awcodes\RicherEditor\Plugins\CodeBlockShikiPlugin;
use Phiki\Theme\Theme;

RichEditor::make('content')
    ->plugins([
        CodeBlockShikiPlugin::make()
            ->defaultTheme(Theme::TokyoNight)
            ->themes(light: Theme::GithubLight, dark: Theme::GithubDark),
    ])

// strings work too
CodeBlockShikiPlugin::make()
    ->defaultTheme('tokyo-night')
    ->themes(light: 'github-light', dark: 'github-dark')
```

When you supply `themes()`, the light theme is rendered inline and the dark theme is exposed via CSS variables. The dark variant is applied automatically under Filament's dark mode by the styles in this package's `resources/css/index.css` — make sure it is imported into your theme (see [Installation](#installation)). Without `themes()`, only `defaultTheme` is used and code blocks stay a single theme.

Each code block shows a language dropdown so authors can switch the highlighting language. By default it lists every language Shiki bundles; pass `languages()` to curate the list:

```
CodeBlockShikiPlugin::make()
    ->languages(['php', 'blade', 'js', 'ts', 'css', 'html', 'json', 'bash'])
```

#### Rendering outside the editor

[](#rendering-outside-the-editor)

Shiki runs in the browser, so it cannot highlight code blocks when stored content is rendered server-side. The plugin ships a PHP Tiptap extension that highlights `codeBlock` nodes with [Phiki](https://phiki.dev) using the same themes. Register the plugin on the renderer with the same theme configuration to keep rendered output in sync with the editor:

```
use Awcodes\RicherEditor\Plugins\CodeBlockShikiPlugin;
use Filament\Forms\Components\RichEditor\RichContentRenderer;
use Phiki\Theme\Theme;

RichContentRenderer::make($content)
    ->plugins([
        CodeBlockShikiPlugin::make()
            ->themes(light: Theme::GithubLight, dark: Theme::GithubDark),
    ])
    ->toHtml()
```

The rendered output uses the `.phiki` styles in `resources/css/index.css` for dark-mode switching, so no extra setup is required beyond importing that file.

Rendering Usage
---------------

[](#rendering-usage)

### Rendering Headings as links

[](#rendering-headings-as-links)

```
use Filament\Forms\Components\RichEditor\RichContentRenderer;

RichContentRenderer::make($content)
    ->linkHeadings(level: 3, wrap: false)
    ->toHtml()
```

### Rendering as Markdown

[](#rendering-as-markdown)

This feature uses [HTML To Markdown for PHP](https://github.com/thephpleague/html-to-markdown) by [thephpleague](https://github.com/thephpleague). Please see their documentation for available options.

```
use Filament\Forms\Components\RichEditor\RichContentRenderer;

RichContentRenderer::make($content)
    ->toMarkdown(options: [])
```

### Rendering native code blocks with Phiki syntax highlighting.

[](#rendering-native-code-blocks-with-phiki-syntax-highlighting)

Caution

This should **NOT** be used globally as it will not work with Filament's rich content attributes when storing/reading content in the database when in a form context.

```
use Awcodes\RicherEditor\Support\RichContentRenderer;
use Awcodes\RicherEditor\Plugins\PhikiCodeBlockPlugin;

RichContentRenderer::make($content)
    ->plugins([
        PhikiCodeBlockPlugin::make(),
    ])
    ->phikiCodeBlocks()
    ->toHtml();
```

### Rendering Table of Contents

[](#rendering-table-of-contents)

```
use Awcodes\RicherEditor\Support\TableOfContents;

TableOfContents::make($content)
    ->asHtml();

/** or as an array to handle the output yourself */

$toc = TableOfContents::make($content)
    ->asArray();
```

Utilities
---------

[](#utilities)

### Rich Content Faker

[](#rich-content-faker)

```
use Awcodes\RicherEditor\Support\RichContentFaker;

$richContent = RichContentFaker::make()
    ->heading(level: 2)
    ->paragraphs(
        count: 1,
        links: false,
        code: false,
        bold: false,
        italic: false,
        underline: false,
        strike: false,
        subscript: false,
        superscript: false,
        mergeTags: [],
        highlight: false
    )
    ->lead(pargraphs: 1, links: false)
    ->small(pargraphs: 1, links: false)
    ->list(count: 3, links: false, ordered: false)
    ->image(source: null, width: 1280, height: 720)
    ->details(open: false, links: false)
    ->code(className: 'language-php')
    ->codeBlock(language: 'sh', prefix: 'language-')
    ->blockquote()
    ->hr()
    ->br()
    ->table(cols: null)
    ->grid(cols: [1,1,1], breakpoint: 'md')
    ->customBlock(
        id: 'batman',
        config: [
            'name' => 'Batman',
            'color' => 'black',
            'side' => 'hero'
        ]
    )
    ->emptyParagraph()
    // rendering (only use one)
    ->asHtml()
    ->asJson()
    ->asText();
```

Testing
-------

[](#testing)

```
composer test
```

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](.github/SECURITY.md) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Adam Weston](https://github.com/awcodes)
- [The League of Extraordinary Packages](https://github.com/thephpleague)
- [Phiki](https://github.com/phikiphp/phiki)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

55

—

FairBetter than 97% of packages

Maintenance89

Actively maintained with recent releases

Popularity40

Moderate usage in the ecosystem

Community23

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 82.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~13 days

Recently: every ~4 days

Total

15

Last Release

59d ago

Major Versions

v1.1.1 → v2.0.02026-01-19

v1.2.1 → v2.1.02026-02-05

v1.2.2 → v2.1.12026-04-13

v1.2.3 → v2.1.22026-05-27

v1.3.0 → 2.x-dev2026-06-10

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/3596800?v=4)[Adam Weston](/maintainers/awcodes)[@awcodes](https://github.com/awcodes)

---

Top Contributors

[![awcodes](https://avatars.githubusercontent.com/u/3596800?v=4)](https://github.com/awcodes "awcodes (57 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (9 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (2 commits)")[![diegoldev](https://avatars.githubusercontent.com/u/1553775?v=4)](https://github.com/diegoldev "diegoldev (1 commits)")

---

Tags

filamentfilament-pluginlaravelfilamentfilamentphpawcodesricher-editor

###  Code Quality

TestsPest

Static AnalysisPHPStan, Rector

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/awcodes-richer-editor/health.svg)

```
[![Health](https://phpackages.com/badges/awcodes-richer-editor/health.svg)](https://phpackages.com/packages/awcodes-richer-editor)
```

###  Alternatives

[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

329575.9k33](/packages/codewithdennis-filament-select-tree)[rawilk/filament-password-input

Enhanced password input component for filament.

52274.9k17](/packages/rawilk-filament-password-input)[schmeits/filament-character-counter

This is a Filament character counter TextField and Textarea form field for Filament v4 and v5

34245.4k16](/packages/schmeits-filament-character-counter)[danihidayatx/image-optimizer

Optimize your Filament images before they reach your database. Forked from joshembling/image-optimizer for Filament v4 & v5 support.

3423.0k1](/packages/danihidayatx-image-optimizer)[biostate/filament-menu-builder

An Elegant Menu Builder for FilamentPHP

7034.3k2](/packages/biostate-filament-menu-builder)[jibaymcs/filament-tour

Bring the power of DriverJs to your Filament panels and start a tour !

12459.6k1](/packages/jibaymcs-filament-tour)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)