rikodev / r-comments
Livewire Comments with TailwindCSS UI
Requires
- php: ^8.2
- laravel/framework: ^11.0|^12.0
- livewire/livewire: ^3.0
Requires (Dev)
- orchestra/testbench: ^9.14.0
README
A modern, flexible, and feature-rich system for adding comments to your Laravel applications. Built for seamless integration and packed with powerful features like nested comments, @mentions, reactions, and a Markdown editor, R-Comments elevates user interaction in your projects.
🚀 Introduction
R-Comments is an advanced commenting solution crafted for Laravel 11+ projects. Originally developed for internal use, it’s now available to empower your applications with a robust comment system featuring notifications, user mentions, and moderation tools. Whether you're building a blog, forum, or CMS, R-Comments delivers a polished experience out of the box.
✨ Key Features
- Modern Stack: Powered by Laravel 11+, Livewire 3, and Tailwind CSS for a responsive design.
- Universal Compatibility: Attach comments to any Eloquent model with ease.
- Nested Comments: Support for threaded, hierarchical discussions.
- @Mentions: Engage users with real-time mention suggestions.
- Pagination: Efficiently handle large comment threads with pagination.
- Reactions: Built-in emoji reactions (👍👎❤️😥) or customize your own.
- Star Reviews: Allow users to leave star-based ratings (★★★★☆).
- Guest Reactions: Enable non-authenticated users to react to comments.
- Markdown Editor: Rich text editing with EasyMDE for a smooth user experience.
- Security & Anti-Spam: Built-in protections to keep your platform safe.
- Event-Driven: Hook into comment events for custom workflows.
🛠️ Prerequisites
Before installing R-Comments, ensure you have the following dependencies set up:
📦 Installation
Get started with R-Comments in just a few steps.
1. Install via Composer
composer require rikodev/r-comments
2. Run Migrations
Publish and run the database migrations to set up the comment tables:
php artisan migrate
3. Publish Configuration
Customize settings like pagination count and user routes by publishing the config file:
php artisan vendor:publish --tag="r-comments.config"
This creates a config/r-comments.php file for your configurations.
4. Set Up Front-End
To enable the rich Markdown editor and mention functionality, configure your front-end:
a. Install Additional NPM Packages
npm install easymde tributejs
b. Update resources/js/app.js
Replace or update your app.js with the following to initialize the Markdown editor:
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
Alpine.data("compose", ({ text, autofocus = false, height, images } = {}) => {
let editor;
return {
text,
get editor() { return editor; },
init() {
if (editor) return;
const textarea = this.$el.querySelector("textarea");
if (!textarea) return;
editor = new EasyMDE({
element: textarea,
autoDownloadFontAwesome: false,
hideIcons: [
"heading", "side-by-side", "fullscreen", "guide",
...!images ? ['image', 'link', 'unordered-list', 'ordered-list'] : [],
],
showIcons: [images ? 'table' : null],
spellChecker: false,
autoRefresh: true,
autoSave: false,
inputStyle: 'contenteditable',
previewClass: ['prose', 'prose-invert', 'max-w-full', 'p-3', 'bg-gray-800', 'bg-opacity-70', 'backdrop-blur'],
status: false,
styleSelectedText: false,
previewImagesInEditor: true,
maxHeight: height,
insertTexts: { link: ["[", "](https://)"] },
});
if (this.text) editor.value(this.text);
if (autofocus) {
editor.codemirror.focus();
editor.codemirror.setCursor(editor.codemirror.lineCount(), 0);
}
window.addEventListener('editor:prefill', () => editor.value(this.text));
editor.codemirror.on("change", () => this.text = editor.value());
},
clear() { editor.value(""); },
};
});
Livewire.start();
c. Create resources/js/editor.js
Add the following to resources/js/editor.js to load EasyMDE and Tribute.js:
import EasyMDE from "easymde";
import Tribute from "tributejs";
window.EasyMDE = EasyMDE;
window.Tribute = Tribute;
d. Update vite.config.js
Add resources/js/editor.js to your Vite configuration and build your assets:
export default defineConfig({
plugins: [laravel(['resources/js/app.js', 'resources/js/editor.js'])],
});
npm run build
🧑💻 Usage
Integrating R-Comments into your application is straightforward.
1. Add the Commentable Trait
In the model you want to enable comments for (e.g., Article), add the Commentable trait:
use RikoDEV\RComments\Traits\Commentable;
class Article extends Model
{
use Commentable;
...
// Required to show "Preview" in comment dropdown, and SEO features
// Our use context: $viewUrl = method_exists($comment->commentable, 'getFullSlug') ? url($comment->commentable->getFullSlug()) : null;
public function getFullSlug(): string
{
return sprintf('articles/%s-%s', $this->id, $this->name);
}
}
2. Include the Livewire Component
In your Blade view (e.g., resources/views/articles/show.blade.php), add the Livewire component and required assets:
@vite(['resources/css/choices.scss', 'resources/js/choices.js', 'resources/js/editor.js', 'resources/css/editor.scss'])
<livewire:comments :model="$article" :rating-enabled="false" />
That’s it! Your model now supports a fully-featured comment system.
🧪 Testing
Run the package’s test suite to ensure everything is working as expected:
composer test
🔒 Security
Found a security issue? Please report it directly to kontakt@riko.dev rather than using the public issue tracker. We take security seriously and will address concerns promptly.
🙌 Credits
R-Comments builds on the shoulders of amazing open-source projects:
- Commentify – Inspiration for the package structure
- Laravel
- Livewire
- Tailwind CSS
- EasyMDE
- Tribute.js
📜 License
R-Comments is open-source software licensed under the MIT License. See the License File for more details.
💬 Get Involved
Have feedback, feature requests, or want to contribute? Open an issue or pull request on GitLab. Let’s make R-Comments even better together!