Update README.md

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/[email protected])
 
-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/[email protected])
+## 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('<section class="panel">%CODE%</section>') // 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('<section class="panel">%CODE%</section>'),
+    ];
+}
+```
 
-### 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.