- How do I install and set up **blari18570/livewire-summernote** in a Laravel Livewire project?
- First, install the package via Composer: `composer require blari18570/livewire-summernote`. Then, include Summernote’s CSS/JS assets (via CDN or local files) in your layout. Finally, use the component in your Livewire form with `<livewire:livewire-summernote wire:model='content' />`. Ensure Livewire v2+ is installed for full compatibility.
- Does this package support Laravel Livewire v3? Will it break in future updates?
- The package is confirmed compatible with Livewire v2.x, but there’s no explicit mention of v3.x support. Check the repository for updates or test thoroughly if upgrading. For stability, consider pinning Livewire to a minor version (e.g., `^2.10`) in your `composer.json` until further notice.
- How do I handle HTML sanitization for Summernote output in Laravel?
- The package doesn’t include built-in sanitization, so you must implement it server-side. Use libraries like **HTML Purifier** or **Laravel’s `Str::of()` with `allowed_tags()`** to sanitize the editor’s output before storing it in the database. Add validation rules like `'content' => 'required|safe_html'` in your Form Request.
- Can I use custom Summernote plugins (e.g., tables, codeview) with this package?
- Yes, but you’ll need to manually initialize plugins via JavaScript after the editor loads. Use Summernote’s API (e.g., `$('.summernote').summernote('codeview.enable')`) in a script block or Alpine.js/Livewire event listener. The package doesn’t block custom plugins, but test thoroughly for conflicts with Livewire’s reactivity.
- What’s the best way to store rich-text content in the database with this package?
- Store Summernote’s HTML output in a **TEXT** or **LONGTEXT** MySQL column, or serialize it as JSON if you need structured data. Cast the field in your model (e.g., `protected $casts = ['content' => 'array']`) if using JSON. For large content, consider compressing or chunking storage to avoid performance issues.
- How do I handle unsaved changes or state inconsistency when using Summernote with Livewire?
- Livewire’s reactivity can conflict with Summernote’s client-side state if the page refreshes or the editor loses focus. Mitigate this by using `$wire:ignore` on non-reactive elements or implementing a confirmation dialog (e.g., `window.onbeforeunload`) for unsaved changes. Debounce Livewire updates with `wire:ignore.self` if needed.
- Is there a fallback for users without JavaScript, or non-Summernote browsers?
- Summernote is JavaScript-dependent, so you must provide a fallback like a `<textarea>` with `wire:model`. Use conditional rendering (e.g., `@if(config('app.debug') === false) <textarea>...</textarea> @endif`) or a package like **Laravel Livewire’s `wire:ignore`** to hide the editor gracefully for non-JS users.
- Can I use this package with Inertia.js or Alpine.js in Laravel?
- This package is designed for **Livewire-only** projects. If using Inertia.js, wrap the editor in a Livewire component or use Inertia’s built-in rich-text solutions (e.g., TinyMCE). Alpine.js can coexist, but Summernote’s initialization must avoid conflicts with Livewire’s reactivity—test thoroughly for edge cases like nested components.
- What performance considerations should I keep in mind for large-scale Summernote usage?
- Summernote can be resource-intensive. Optimize by lazy-loading the editor (e.g., trigger initialization via `Alpine.js` or `wire:init`), debouncing Livewire updates, and compressing stored HTML. For heavy usage, consider server-side rendering (SSR) or a dedicated rich-text API like **CKEditor Cloud** to offload processing.
- Are there alternatives to this package for Livewire + Summernote integration?
- If this package doesn’t fit, consider **Laravel Livewire’s native `<textarea>` with CKEditor/TinyMCE** (via CDN or npm), or dedicated packages like **spatie/laravel-medialibrary** for media-rich editing. For real-time collaboration, explore **TipTap** or **Quill.js** with Livewire. Evaluate based on your need for Summernote’s specific features (e.g., Bootstrap themes).