interaction-design-foundation/nova-html-code-field

A Laravel Nova field to write raw HTML and preview.

2.1.0 2024-03-12 00:02 UTC

Requires

• php: ^8.2
• ext-json: *
• laravel/nova: ^4.25

Requires (Dev)

• orchestra/testbench: ^8.0 || ^9.0
• phpunit/phpunit: ^10.5 || ^11.0

MIT

• html
• nova
• laravel
• laravel-nova-field

README

Sometimes you need an option to write a raw HTML and have a real-time preview for it. This package provides such ability. Under the hood this package uses iframe for HTML code your write, so Nova styles will not leak to the preview. Additionally, you can provide URLs to your custom CSS file and thus your HTML preview will be very close to the final result.

Installation

You can install the package in to a Laravel app that uses Nova via composer:

composer require interaction-design-foundation/nova-html-code-field

Usage

use InteractionDesignFoundation\NovaHtmlCodeField\HtmlCode;

public function fields()
{
    return [
        HtmlCode::make('HTML content', 'content'),
     ];
}

Options

Full example:

HtmlCode::make('HTML content', 'content')
    ->styles([asset(mix('css/app.css'))]), // optional, you can inject your custom CSS files to have more realistic preview.
    ->previewTemplate('<section class="panel">%CODE%</section>') // optional, wrap editable code to have even better preview (good together with custom styles).

Changelog

Please see Releases for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

License

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

ToDo

1. Add toolbar
2. Add HTML validator (https://www.npmjs.com/package/html-validator)
3. Optimize a preview: re-render only changed node