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

• Livewire
• TailwindCSS
• AlpineJS
• Manually bundling Livewire and Alpine

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

• Commentify - package skeleton
• Laravel
• Tailwind
• Livewire
• EasyMDE
• Tribute

License

The MIT License (MIT). Please see License File for more information.