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. [Utility & Helpers](/categories/utility)
4. /
5. athphane/filament-editorjs

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

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

This is my package filament-editorjs

v2.6.4(4mo ago)185.3k↑148.7%11[4 issues](https://github.com/athphane/filament-editorjs/issues)[4 PRs](https://github.com/athphane/filament-editorjs/pulls)MITPHPPHP ^8.3CI passing

Since Oct 11Pushed 4mo 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 2w ago

READMEChangelogDependencies (46)Versions (27)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

51

—

FairBetter than 95% of packages

Maintenance73

Regular maintenance activity

Popularity35

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 87.2% 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 ~27 days

Recently: every ~0 days

Total

21

Last Release

126d 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 (75 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

[tapp/filament-lms

204.4k](/packages/tapp-filament-lms)[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3915.5k](/packages/rawilk-profile-filament-plugin)[statikbe/laravel-filament-flexible-content-blocks

The Laravel Filament Flexible Content Blocks package helps you to easily create content in Filament for any model, with predefined or custom blocks, and foreach block an extendable Blade view component.

17927.9k6](/packages/statikbe-laravel-filament-flexible-content-blocks)[saade/filament-adjacency-list

A Filament package to adjacency lists.

9873.8k8](/packages/saade-filament-adjacency-list)[finity-labs/fin-mail

A powerful email template manager and composer for Filament with dynamic token replacement, template versioning, and inline email sending.

316.8k2](/packages/finity-labs-fin-mail)[tapp/filament-form-builder

User facing form builder using Filament components

133.5k6](/packages/tapp-filament-form-builder)

PHPackages © 2026

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