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

ActiveLibrary

malhanafi/filament-editorjs-mathlive
====================================

This is my package filament-editorjs-mathlive

v1.0.1(4mo ago)02MITPHPPHP ^8.3

Since Jan 4Pushed 4mo agoCompare

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

READMEChangelog (2)Dependencies (15)Versions (3)Used By (0)

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

[](#filament-editorjs)

[![Latest Version on Packagist](https://camo.githubusercontent.com/8949bcb771a2c405a7826835c131b4c0e9f525c3e5668abe6a485d5e56e4c699/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d616c68616e6166692f66696c616d656e742d656469746f726a732d6d6174686c6976652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/malhanafi/filament-editorjs)[![GitHub Tests Action Status](https://camo.githubusercontent.com/c044cb4b4c5a65aa9c4391b7c8ab2e08a26d0b41fba933f8405ea53c8e4c2f30/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d616c68616e6166692f66696c616d656e742d656469746f726a732d6d6174686c6976652f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/malhanafi/filament-editorjs/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/855694e23373daf3d346812de2e9495d9112e25fb6a0aa991c9fb8c554355e47/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d616c68616e6166692f66696c616d656e742d656469746f726a732d6d6174686c6976652f6669782d7068702d636f64652d7374796c696e672e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/malhanafi/filament-editorjs/actions?query=workflow%3A%22Fix+PHP+code+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/739f2d0c436824d1bf426aa455af6b5f322da16dfd3c35b216a009b69698c701/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d616c68616e6166692f66696c616d656e742d656469746f726a732d6d6174686c6976652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/malhanafi/filament-editorjs)

An EditorJS field for Filament, with support for image uploads using Spatie's Media Library package.

[![img.png](assets/img.png)](assets/img.png)

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require malhanafi/filament-editorjs-mathlive
```

You can publish the config file with:

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

Optionally, you can publish the views using

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

This is the contents of the published config file:

```
return [
    /**
     * The profiles to use for the editorjs field.
     * The default profile is the default_profile from the config.
     */
    'profiles' => [
        'default' => [
            'header', 'image', 'delimiter', 'list', 'underline', 'quote', 'table',
        ],
        'pro' => [
            'header', 'image', 'delimiter', 'list', 'underline', 'quote', 'table',
            'raw', 'code', 'inline-code', 'style',
        ],
    ],

    /**
     * The default profile to use for the editorjs field.
     */
    'default_profile' => 'default',

    /**
     * The allowed image mime types for the editorjs field.
     */
    'image_mime_types' => [
        'image/jpeg',
        'image/png',
        'image/gif',
        'image/tiff',
        'image/x-citrix-png',
        'image/x-png',
        'image/svg+xml',
        'image/svg',
    ],
];
```

Usage
-----

[](#usage)

This package requires you to do some initial setup before you can use it.

This package uses EditorJS and integrates the Image Upload Plugin with Spatie's Media Library package. For this reason, you will need to set up your models to use the Media Library package.

### Setting up models

[](#setting-up-models)

First of all, you need somewhere to store the content for the editorjs field itself. This package assumes that you will have a NULLABLE `content` column of type json in your database table. This column will be used to store the content for the editorjs field.

Your model must implement the `Spatie\MediaLibrary\HasMedia` interface, and use the `Spatie\MediaLibrary\InteractsWithMedia` trait.

Next, you must use this package's `Malhanafi\FilamentEditorjs\Traits\ModelHasEditorJsComponent` trait in your model. This trait offers a couple of methods to help you set up your model to work with the editorjs field.

#### Changing the default column name for the content field

[](#changing-the-default-column-name-for-the-content-field)

The package assumes that you will use a column named `content` to store the content. If you want to use a different column name, you can go ahead and change the column name. Then on your model, you must override the `editorJsContentFieldName` method to return the new name of the column.

```
/**
 * The name of the field that contains the content for the editorjs field
 */
public function editorJsContentFieldName(): string
{
    return 'new_column_name';
}
```

#### Registering the media collections and conversions

[](#registering-the-media-collections-and-conversions)

As this packages main aim is to integrate with Spatie's Media Library package, you will need to register the media collections for the editorjs media collection. Normally, you would do this in your model's own `registerMediaCollections` and `registerMediaConversions` methods. However, this package offers a convenience method to do that for you.

The `ModelHasEditorJsComponent` trait offers the methods `registerEditorJsMediaCollections` and `registerEditorjsMediaConversions`. This method can be used in the `registerMediaCollection` and `registerMediaConversions` method of your own model as follows:

```
public function registerMediaCollections(): void
{
    $this->registerEditorJsMediaCollections();
}

public function registerMediaConversions(?Media $media = null): void
{
    $this->registerEditorJsMediaConversions($media);
}
```

#### Settings up allowed mime types for the editorjs media collection

[](#settings-up-allowed-mime-types-for-the-editorjs-media-collection)

By default, the package will allow a set of mime types defined in the config file of the package. You can change this by updating the config file values, or by programmatically setting the mime types on the `registerEditorJsMediaCollections`

```
public function registerMediaCollections(): void
{
    $this->registerEditorJsMediaCollections(mime_types: [
        'image/jpeg',
        'image/png',
        'image/gif',
        'image/tiff',
        'image/x-citrix-png',
        'image/x-png',
        'image/svg+xml',
        'image/svg',
    ]);
}
```

#### Enabling/Disabling the responsive images generation

[](#enablingdisabling-the-responsive-images-generation)

By default, the package will generate responsive images for the editorjs media collection. You can disable this by passing `false` on the $generate\_responsive\_images argument to the `registerEditorJsMediaCollections` method.

```
public function registerMediaCollections(): void
{
    $this->registerEditorJsMediaCollections(generate_responsive_images: false);
}
```

#### Modifying the default media collection name

[](#modifying-the-default-media-collection-name)

By default, the package will use the `content_images` media collection name. You can change this by overriding the `editorjsMediaCollectionName` method.

```
/**
 * The name of the media collection for the editorjs media collection
 */
public function editorjsMediaCollectionName(): string
{
    return 'new_media_collection_name';
}
```

### Setting up the editorjs field

[](#setting-up-the-editorjs-field)

Now that you have set up your model to work with the editorjs field, you can set up the editorjs field itself.

This package provides a `EditorjsTextField` component. You can use that directly in your form definition like this:

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

#### Handling image uploads

[](#handling-image-uploads)

Starting with version 2, `EditorjsTextField` relies on Filament's `HasFileAttachments` to manage image uploads through Livewire. This means uploads work out of the box—no custom endpoints or Axios configuration are required. The component will automatically upload the image and resolve the stored media's preview URL and ID.

Testing
-------

[](#testing)

The package includes comprehensive tests for all major functionality:

```
composer test
```

### Test Coverage

[](#test-coverage)

The tests cover:

- Basic instantiation of the EditorjsTextField component
- Configuration options (tools, height, placeholder)
- Trait functionality (HasHeight, HasTools)
- Model trait functionality (ModelHasEditorJsComponent)
- Service provider configuration
- Configuration file validation
- Tool profile verification
- Livewire component rendering and interaction
- File attachment interface implementation
- Form integration and validation

All tests can be found in the `tests` directory, organized by type:

- Feature tests for the main EditorjsTextField component
- Configuration tests for verifying package settings
- Unit tests for each trait and component
- Livewire tests for component behavior and file attachment functionality

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

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

[](#contributing)

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

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

[](#security-vulnerabilities)

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

Credits
-------

[](#credits)

- [malhanafi](https://github.com/malhanafi)
- [All Contributors](../../contributors)

License
-------

[](#license)

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

###  Health Score

38

—

LowBetter than 84% of packages

Maintenance82

Actively maintained with recent releases

Popularity2

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 81.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 ~0 days

Total

2

Last Release

124d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/19bd239eeadc3559d6a5bed16c334e285f32d3e2435137fef8c3c478ff5c3d67?d=identicon)[malhanafi](/maintainers/malhanafi)

---

Top Contributors

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

---

Tags

laravelmalhanafifilament-editorjs-mathlive

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

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

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

###  Alternatives

[schmeits/filament-character-counter

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

33184.7k6](/packages/schmeits-filament-character-counter)[defstudio/filament-searchable-input

A searchable autocomplete input for Filament forms

3212.4k](/packages/defstudio-filament-searchable-input)[jiten14/jitone-ai

jitone-ai is a powerful FilamentPHP plugin that integrates AI-powered features directly into your Filament forms.

213.1k](/packages/jiten14-jitone-ai)[athphane/filament-editorjs

This is my package filament-editorjs

172.9k](/packages/athphane-filament-editorjs)[a2insights/filament-saas

Filament Saas for A2Insights

161.1k](/packages/a2insights-filament-saas)[redberry/page-builder-plugin

Page builder plugin for filamentphp admin panel to build pages using blocks.

242.8k](/packages/redberry-page-builder-plugin)

PHPackages © 2026

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