diff --git a/README.md b/README.md index 75202de..e1f3234 100644 --- a/README.md +++ b/README.md @@ -1,69 +1,92 @@ -# Nova HTML code Field +# Nova HTML Code Field [![Latest Stable Version](https://poser.pugx.org/interaction-design-foundation/nova-html-code-field/v/stable)](https://packagist.org/packages/interaction-design-foundation/nova-html-code-field) [![Total Downloads](https://poser.pugx.org/interaction-design-foundation/nova-html-code-field/downloads)](https://packagist.org/packages/interaction-design-foundation/nova-html-code-field) -![image](https://user-images.githubusercontent.com/5278175/144928019-c295d08c-d8cc-412f-90c1-b94a83aa63a7.png) +A Laravel Nova field that provides a powerful HTML code editor with real-time preview capabilities. +Write raw HTML and see instant results, with the preview rendered in an isolated iframe to prevent style conflicts with Nova's UI. +![Nova HTML Code Field Demo](resources/img/demo-800x280@8.gif) -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. - -![image](https://github.com/InteractionDesignFoundation/nova-html-code-field/blob/main/resources/img/demo-800x280@8.gif) +## Features +- Real-time HTML preview +- Isolated preview environment using iframes +- Custom CSS injection support +- Customizable preview template +- Compatible with Laravel Nova 4.x and 5.x ## Installation -You can install the package in to a Laravel app that uses [Nova](https://nova.laravel.com) via composer: +You can install the package via composer: ```bash composer require interaction-design-foundation/nova-html-code-field ``` +The package will automatically register its service provider. + ## Usage +### Basic Usage + ```php use InteractionDesignFoundation\NovaHtmlCodeField\HtmlCode; -public function fields() +public function fields(NovaRequest $request): array { return [ - HtmlCode::make('HTML content', 'content'), - ]; + HtmlCode::make('HTML Content', 'content'), + ]; } ``` +### Advanced Usage -### Options - -Full example: ```php -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('
%CODE%
') // optional, wrap editable code to have even better preview (good together with custom styles). -``` +use InteractionDesignFoundation\NovaHtmlCodeField\HtmlCode; +public function fields(NovaRequest $request): array +{ + return [ + HtmlCode::make('HTML Content', 'content') + // Include stylesheets into iframe for more accurate preview + ->styles([ + asset('css/app.css'), // your custom + 'https://cdn.example.com/custom.css', // from a CDN + ]) + // Wrap the HTML content in a template ("%CODE%" is required) + ->previewTemplate('
%CODE%
'), + ]; +} +``` -### Changelog +## Contributing -Please see [Releases](https://github.com/InteractionDesignFoundation/nova-unlayer-field/releases) for more information on what has changed recently. +Please see [CONTRIBUTING](CONTRIBUTING.md) for details on how to contribute to this project. +### Testing -## Contributing +```bash +composer test +``` -Please see [CONTRIBUTING](CONTRIBUTING.md) for details. +### Code Style +```bash +# Fix code style +composer cs:fix +``` -## License +## Security -The MIT License (MIT). Please see [License File](LICENSE) for more information. +If you discover any security-related issues, please email the maintainers instead of using the issue tracker. +## Credits -## ToDo +- [Interaction Design Foundation](https://github.com/InteractionDesignFoundation) +- [All Contributors](../../contributors) -1. Add toolbar -1. Add HTML validator (https://www.npmjs.com/package/html-validator) -1. Optimize a preview: re-render only changed node +## License +The MIT License (MIT). Please see [License File](LICENSE) for more information.