rikodev / r-comments
Livewire Comments with TailwindCSS UI
Requires
- php: ^8.1|^8.2|^8.3
- illuminate/contracts: ^11
- illuminate/database: ^11
- illuminate/support: ^11
- livewire/livewire: ^3.0
Requires (Dev)
- phpunit/phpunit: ^10.0
README
Introduction
R-Comments is an advanced comment system originally created for my internal projects. It has support for notifications, mentions and comment moderation.
Highlight
- Laravel 11+ x Livewire v3 x Tailwind CSS
- Any model supported
- Nested comments
- @Mentions
- Pagination
- Reactions: 👍👎❤️😥 (or your custom)
- Guest reactions
- Markdown editor
- Security features
- Events
- Multiple localizations (i18n)
Prerequisites
Installation Guide
You can install the package via composer:
composer require rikodev/r-comments
Run Migrations
Once the package is installed, you can run migrations.
php artisan migrate
Publish Config File
php artisan vendor:publish --tag="r-comments.config"
This will publish r-comments.php file in config directory. Here you can configure user route and pagination count etc.
Modify Your Front-End Configuration
1. Install additional modules with npm.
npm i easymde tributejs
2. Replace the current app.js with the following.
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()
3. Create an editor.js file in resources/js directory.
import EasyMDE from "easymde";
import Tribute from "tributejs";
window.EasyMDE = EasyMDE;
window.Tribute = Tribute;
4. Add 'resources/js/editor.js' to vite.config.js and execute npm run build.
Usage
In your model, where you want to integrate comments, simply add the Commentable trait in that model.
use RikoDEV\RComments\Traits\Commentable;
class Article extends Model
{
use Commentable;
}
Next, in your view, pass in the livewire comment component. For example, if your view file is articles/show.blade.php. We can add the following code:
@vite(['resources/js/editor.js', 'resources/css/editor.scss'])
<livewire:comments :model="$article"/>
Tests
composer test
Security
If you discover any security related issues, please email kontakt@riko.dev instead of using the issue tracker.
Credits
License
The MIT License (MIT). Please see License File for more information.