PHPackages                             athphane/filament-editorjs - 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. athphane/filament-editorjs

ActiveLibrary

athphane/filament-editorjs
==========================

This is my package filament-editorjs

v2.5.0(2mo ago)172.9k↑66.7%11[4 PRs](https://github.com/athphane/filament-editorjs/pulls)MITPHPPHP ^8.3CI passing

Since Oct 11Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/athphane/filament-editorjs)[ Packagist](https://packagist.org/packages/athphane/filament-editorjs)[ Docs](https://github.com/athphane/filament-editorjs)[ GitHub Sponsors](https://github.com/athphane)[ RSS](/packages/athphane-filament-editorjs/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (30)Versions (21)Used By (0)

Filament EditorJS
=================

[](#filament-editorjs)

[![Latest Version on Packagist](https://camo.githubusercontent.com/435c71c16f1e6ea72cb0d8e8042a5eae07600c8e30252a737bac1a737e8f249a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6174687068616e652f66696c616d656e742d656469746f726a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/athphane/filament-editorjs)[![GitHub Tests Action Status](https://camo.githubusercontent.com/48f8a52d9974fa63202836ff037d227996f1986c8c60bd3e0460b718a244fc1d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6174687068616e652f66696c616d656e742d656469746f726a732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/athphane/filament-editorjs/actions?query=workflow%3Arun-tests+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/94d8a715be2c36f832768d6ebdfec20b99e4a064e66b99c5170bbace2e32ee3d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6174687068616e652f66696c616d656e742d656469746f726a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/athphane/filament-editorjs)[![MIT Licensed](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)

**A premium EditorJS field for Filament with seamless Spatie Media Library integration and a robust rendering system.**

Filament EditorJS brings the power of [Editor.js](https://editorjs.io/) to your Filament admin panel, allowing you to create rich, block-based content with ease. It handles image uploads out of the box using Livewire and Spatie's Media Library, and provides a powerful rendering engine to display your content on the frontend with Tailwind CSS support.

[![Filament EditorJS Hero](assets/img.png)](assets/img.png)

✨ Features
----------

[](#-features)

- 🚀 **Zero-Config Uploads**: Effortless image uploads using Filament's internal file attachment system.
- 📦 **Spatie Media Library**: Full integration for managing your content assets.
- 🛠️ **Dynamic Plugin System**: Easily add and configure both built-in and custom Editor.js tools.
- 🎨 **Tailwind Rendering**: Built-in support for rendering content with Tailwind Typography (`prose`).
- ⚡ **Filament v5 Ready**: Fully compatible with the latest Filament v4 and v5 features.
- 🧩 **Extensible Blocks**: Create custom renderers for your unique block types in PHP.
- 📏 **Automatic Cleanup**: Automatically manages and cleans up unused media attachments.

---

🚀 Installation
--------------

[](#-installation)

Install the package via composer:

```
composer require athphane/filament-editorjs
```

Publish the configuration file:

```
php artisan vendor:publish --tag="filament-editorjs-config"
```

🚥 Quick Start
-------------

[](#-quick-start)

### 1. Prepare your Model

[](#1-prepare-your-model)

Your model must implement Spatie's `HasMedia` interface and use the `ModelHasEditorJsComponent` trait provided by this package.

```
use Athphane\FilamentEditorjs\Traits\ModelHasEditorJsComponent;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;

class Post extends Model implements HasMedia
{
    use InteractsWithMedia;
    use ModelHasEditorJsComponent;

    // By default, it expects a 'content' column (json)
    // and registers a 'content_images' media collection.
}
```

### 2. Register the Plugin (Optional but recommended for v4/v5)

[](#2-register-the-plugin-optional-but-recommended-for-v4v5)

Add the plugin to your Filament Panel provider (usually `AdminPanelProvider.php`):

```
use Athphane\FilamentEditorjs\FilamentEditorjsPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentEditorjsPlugin::make(),
        ]);
}
```

### 3. Add to your Filament Resource

[](#3-add-to-your-filament-resource)

Simply use the `EditorjsTextField` in your form schema:

```
use Athphane\FilamentEditorjs\Forms\Components\EditorjsTextField;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            EditorjsTextField::make('content')
                ->placeholder('Start writing your masterpiece...')
                ->columnSpanFull(),
        ]);
}
```

### 4. Render on the Frontend

[](#4-render-on-the-frontend)

Displaying your content is just as easy:

```
{{-- In your Blade view --}}
{!! \Athphane\FilamentEditorjs\FilamentEditorjs::renderContent($post->content) !!}
```

> **Note:** For the best experience, ensure you have the [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin) plugin installed.

---

🛠️ Dynamic Plugin System
------------------------

[](#️-dynamic-plugin-system)

This package allows you to customize the editor tools dynamically.

### Adding Custom Tools

[](#adding-custom-tools)

You can add any Editor.js compatible tool by registering it in Javascript and then enabling it in PHP.

#### 1. Register in Javascript

[](#1-register-in-javascript)

Add your custom tool to the global `window.filamentEditorJsTools` registry:

```
import LinkTool from '@editorjs/link'

window.filamentEditorJsTools = window.filamentEditorJsTools || {}
window.filamentEditorJsTools.linkTool = LinkTool
```

#### 2. Enable in PHP

[](#2-enable-in-php)

Use the `addPlugin` method on your field:

```
EditorjsTextField::make('content')
    ->addPlugin('linkTool', [
        'endpoint' => route('editorjs.link-tool-parser'),
    ])
```

---

🎨 Customizing Content Rendering
-------------------------------

[](#-customizing-content-rendering)

You can extend the rendering engine by adding custom renderers for specific block types.

### Creating a Custom Renderer

[](#creating-a-custom-renderer)

```
use Athphane\FilamentEditorjs\Renderers\BlockRenderer;

class CustomBlockRenderer extends BlockRenderer
{
    public function render(array $block): string
    {
        return view('renderers.custom-block', [
            'data' => $block['data'],
        ])->render();
    }

    public function getType(): string
    {
        return 'custom-block-type';
    }
}
```

### Registering your Renderer

[](#registering-your-renderer)

Register it in your `AppServiceProvider`:

```
use Athphane\FilamentEditorjs\FilamentEditorjs;

public function boot()
{
    FilamentEditorjs::addRenderer(new CustomBlockRenderer());
}
```

### Word Count for Reading Time

[](#word-count-for-reading-time)

When creating a custom renderer, you can define how it contributes to the reading time calculation by implementing the `getWordCount()` method:

```
use Athphane\FilamentEditorjs\Renderers\BlockRenderer;

class CustomBlockRenderer extends BlockRenderer
{
    public function render(array $block): string
    {
        return view('renderers.custom-block', [
            'data' => $block['data'],
        ])->render();
    }

    public function getType(): string
    {
        return 'custom-block-type';
    }

    public function getWordCount(array $block): int
    {
        $text = $block['data']['content'] ?? '';
        return str_word_count(strip_tags($text));
    }
}
```

### Calculating Reading Time

[](#calculating-reading-time)

You can calculate the reading time for your content:

```
use Athphane\FilamentEditorjs\FilamentEditorjs;

// Get reading time string (e.g., "5 min read")
$readingTime = FilamentEditorjs::readingTime($post->content);

// Get total word count
$wordCount = FilamentEditorjs::countWords($post->content);
```

**Built-in Block Types:**

- **paragraph, header, list, checklist, quote, code, table, inline-code**: Automatically count words from their text content
- **image, delimiter, raw**: Return 0 words (no text content)

Configure words per minute in `config/filament-editorjs.php`:

```
'reading_time' => [
    'words_per_minute' => 225, // Default
],
```

---

⚙️ Configuration
----------------

[](#️-configuration)

The `config/filament-editorjs.php` file allows you to define different tool profiles:

```
'profiles' => [
    'default' => [
        'header', 'image', 'delimiter', 'list', 'underline', 'quote', 'table',
    ],
    'pro' => [
        'header', 'image', 'delimiter', 'list', 'underline', 'quote', 'table',
        'raw', 'code', 'inline-code', 'style', 'checklist',
    ],
],
```

Switch between profiles in your form:

```
EditorjsTextField::make('content')->tools('pro')
```

---

💻 Code Block Enhancements
-------------------------

[](#-code-block-enhancements)

The package includes powerful code block functionality with language selection and syntax highlighting powered by [Shiki](https://github.com/shikijs/shiki).

### Features

[](#features)

- 🎨 **100+ Language Support**: Type any programming language for accurate syntax highlighting
- 🌈 **Multiple Themes**: Choose from various syntax highlighting themes (github-light, github-dark, nord, etc.)
- ✨ **Line Highlighting**: Mark specific lines as highlighted, added, deleted, or focused
- 🌓 **Dark Mode Support**: Automatic theme switching based on system preferences
- 🔙 **Backward Compatible**: Existing code blocks continue to work without modification
- ✍️ **Smooth Experience**: Compact language input in top-right corner

### Usage

[](#usage)

Code blocks work out of box with automatic syntax highlighting. Simply type your desired language in the small input field located in the top-right corner of the code block:

```
EditorjsTextField::make('content')
```

### Configuration

[](#configuration)

You can configure code highlighting behavior using the following methods:

```
EditorjsTextField::make('content')
    ->codeTheme('github-dark')           // Set syntax highlighting theme
    ->codeLanguages(['php', 'js'])        // Restrict available languages (future enhancement)
    ->showLanguageLabel(true)             // Show/hide language label
    ->enableCopyButton(true)              // Enable copy button (future)
    ->enableLineHighlighting(true)        // Enable line highlighting
```

### Language Selection

[](#language-selection)

When you insert a code block in the editor, you'll see a small text input in the top-right corner. Simply type your programming language there:

- Type `php` for PHP code
- Type `javascript` or `js` for JavaScript
- Type `python` or `py` for Python code
- Type any other language code (e.g., `go`, `rust`, `ruby`, etc.)

The input is unobtrusive and allows you to smoothly see your code while specifying the language. Common language codes include:

- **Web**: `javascript`, `typescript`, `html`, `css`, `php`, `vue`, `svelte`
- **Systems**: `c`, `c++`, `rust`, `go`, `assembly`
- **Scripting**: `python`, `ruby`, `bash`, `shell`, `powershell`
- **Data**: `json`, `xml`, `yaml`, `toml`
- **Databases**: `sql`, `plsql`, `sparql`

### Line Highlighting

[](#line-highlighting)

You can mark specific lines with different visual states:

```
{
    "type": "code",
    "data": {
        "code": "const x = 1;\nconst y = 2;\nconst z = 3;",
        "languageCode": "javascript",
        "highlightLines": [1, 3],
        "addLines": [2],
        "deleteLines": [],
        "focusLines": []
    }
}
```

**Available line modes:**

- `highlightLines`: Yellow background for important lines
- `addLines`: Green background for new lines
- `deleteLines`: Red background for removed lines
- `focusLines`: Blue background with ring for focus

### Available Themes

[](#available-themes)

Shiki supports many VSCode themes. Popular options include:

- `github-light` (default)
- `github-dark`
- `nord`
- `vitesse-dark`
- `one-dark-pro`
- `monokai`
- `dracula`
- ...and many more!

### Configuration File

[](#configuration-file)

Update `config/filament-editorjs.php` to set global defaults:

```
'code' => [
    'default_theme' => 'github-light',
    'line_highlighting' => true,
    'supported_line_modes' => ['highlight', 'add', 'delete', 'focus'],
],
```

### Backward Compatibility

[](#backward-compatibility)

Existing code blocks without a `languageCode` will default to `plaintext` with basic formatting. The renderer gracefully handles missing data and falls back to safe HTML escaping.

### Styling

[](#styling)

All code block styles are included in the main CSS file. You can customize the appearance by overriding Tailwind classes in your project:

```
/* Custom code block styles */
.code-block-wrapper {
    /* Your custom styles */
}

.highlighted {
    /* Custom highlight style */
}
```

### Examples

[](#examples)

**Basic Code Block:**

```
Type "javascript" in top-right input
→ Enter your code
→ Gets syntax highlighted automatically

```

**Code with Line Highlights:**

```
Highlight lines 1 and 3
→ Lines get yellow background
→ Great for tutorials and explanations

```

**Dark Theme:**

```
Use in dark mode environment
→ Shiki automatically switches theme
→ Consistent with your design

```

**Multiple Languages:**

```
Type "php" for PHP code
Type "python" for Python code
Type "rust" for Rust code
→ Each gets proper highlighting

```

---

🔄 Upgrading
-----------

[](#-upgrading)

Please refer to the [Upgrade Guide](UPGRADE.md) when moving between major versions.

🧪 Testing
---------

[](#-testing)

```
composer test
```

🤝 Contributing
--------------

[](#-contributing)

Contributions are welcome! Please see [CONTRIBUTING.md](.github/CONTRIBUTING.md) for details.

📜 License
---------

[](#-license)

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

###  Health Score

53

—

FairBetter than 97% of packages

Maintenance88

Actively maintained with recent releases

Popularity34

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity63

Established project with proven stability

 Bus Factor1

Top contributor holds 86.4% 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 ~34 days

Recently: every ~12 days

Total

16

Last Release

61d ago

Major Versions

v1.1.0 → v4.x-dev2025-12-05

### Community

Maintainers

![](https://www.gravatar.com/avatar/221f1bea0a3ea66d158df62a82d17beac57f0aacf62c38fae3dcb0474c734016?d=identicon)[athphane](/maintainers/athphane)

---

Top Contributors

[![athphane](https://avatars.githubusercontent.com/u/13810742?v=4)](https://github.com/athphane "athphane (70 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (5 commits)")[![evoart-studio](https://avatars.githubusercontent.com/u/75247931?v=4)](https://github.com/evoart-studio "evoart-studio (1 commits)")

---

Tags

laravelfilament-editorjsathphane

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/athphane-filament-editorjs/health.svg)

```
[![Health](https://phpackages.com/badges/athphane-filament-editorjs/health.svg)](https://phpackages.com/packages/athphane-filament-editorjs)
```

###  Alternatives

[bezhansalleh/filament-shield

Filament support for `spatie/laravel-permission`.

2.8k2.9M88](/packages/bezhansalleh-filament-shield)[guava/calendar

Adds support for vkurko/calendar to Filament PHP.

298241.0k3](/packages/guava-calendar)[guava/filament-knowledge-base

A filament plugin that adds a knowledge base and help to your filament panel(s).

206120.5k1](/packages/guava-filament-knowledge-base)[bezhansalleh/filament-plugin-essentials

A collection of essential traits that streamline Filament plugin development by taking care of the boilerplate, so you can focus on shipping real features faster

27584.7k16](/packages/bezhansalleh-filament-plugin-essentials)[guava/filament-modal-relation-managers

Allows you to embed relation managers inside filament modals.

7565.0k4](/packages/guava-filament-modal-relation-managers)[hydrat/filament-table-layout-toggle

Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts.

6292.3k1](/packages/hydrat-filament-table-layout-toggle)

PHPackages © 2026

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