- How do I install awcodes/richer-editor in a Laravel app?
- Install the package with composer require awcodes/richer-editor. If you use Filament Panels you must first create a custom theme, then add the package CSS import and @source directive to your theme.css file (or app.css for standalone packages). After that you can register plugins on any RichEditor field via the ->plugins([...]) method.
- Which Filament versions does richer-editor support?
- Package version 1.x targets Filament 4.x only, while version 2.x supports both Filament 4.x and 5.x. Check your Filament version before requiring the package so Composer resolves the correct branch. The upgrade path from 1.x to 2.x is straightforward if you are moving to Filament 5.
- Do I need a custom Filament theme to use richer-editor?
- Yes, for Filament Panels you need a custom theme before adding the plugin assets, as noted in the installation warnings. You then import the package CSS file and register the package views with an @source directive in your theme.css. Projects without a custom theme will need to create one first following the Filament styling docs.
- How do I enable Shiki syntax highlighting for code blocks in Filament's Rich Editor?
- Add the CodeBlockShikiPlugin to your RichEditor plugins array. Client-side highlighting is handled by Shiki in the browser, while server-side rendering of stored code blocks uses Phiki. You will need to configure theme and language options for consistent output between the editor and your frontend.
- Which plugins are included in awcodes/richer-editor?
- The package ships DebugPlugin, EmbedPlugin, EmojiPlugin, FullScreenPlugin, IdPlugin, LinkPlugin, SourceCodePlugin, FakerPlugin and CodeBlockShikiPlugin. Each plugin is opt-in, so you can enable only the features your editor needs without bloating the toolbar. There are also experimental FigurePlugin and VideoPlugin classes you should avoid for now.
- Which richer-editor plugins are experimental and should be avoided?
- FigurePlugin and VideoPlugin are explicitly marked as experimental in the README and should not be used at the moment. Their docblocks explain the current limitations and stability concerns. Treat them as previews only and validate thoroughly before any production use.
- How do I render richer-editor content on the frontend?
- Use Filament's RichContentRenderer to output stored editor content, which keeps code blocks, embeds and other custom nodes consistent. For code blocks you can rely on Phiki server-side rendering to avoid depending on browser JavaScript. Make sure your frontend styles load the package CSS so embeds and highlighted code render correctly.
- Can I use awcodes/richer-editor outside of Filament?
- The package is tightly coupled to Filament's RichEditor and RichContentRenderer components, so it is not intended for plain Laravel apps. You could technically reuse parts of it, but you would have to replace the Filament-specific components yourself. For non-Filament projects, a standalone Tiptap or ProseMirror setup is usually simpler.
- Will richer-editor's client-side Shiki highlighting affect performance?
- Shiki runs in the browser, so very large documents with many code blocks can add noticeable processing time and may pull extra assets. Keep language and theme support scoped to what you actually use, and prefer Phiki server-side rendering for public-facing pages. Also plan a graceful fallback in case JavaScript fails to load.
- Is awcodes/richer-editor actively maintained and safe to use in production?
- The package is MIT licensed with recent releases and responsive issue tracking, which suggests ongoing maintenance. Core plugins such as CodeBlockShikiPlugin, EmbedPlugin and EmojiPlugin are stable enough for production when installed with the required custom theme. Avoid the experimental plugins and review security around user-generated embeds before shipping.