laravel 9 can't write - php

Question

I have a bug when I want to write a thread. I write 2 letters after he stops writing I have to click again to continue writing.
Threadmodel
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Qirolab\Laravel\Reactions\Traits\Reactable;
use Qirolab\Laravel\Reactions\Contracts\ReactableInterface;
class Thread extends Model implements ReactableInterface
{
use HasFactory, Reactable;
public function user(){
return $this->belongsTo(User::class);
}
public function replies(){
return $this->hasMany(ThreadReply::class);
}
public function isLiked()
{
if (auth()->user()) {
return $this->isReactBy(auth()->user());
}
return false;
}
public function removeLike()
{
if (auth()->user()) {
return $this->removeReaction();
}
return false;
}
}
ThreadController
<?php
namespace App\Http\Controllers\User;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use App\Models\Thread;
use App\Models\ThreadReply;
use App\Models\SubCategory;
use Auth;
class ThreadController extends Controller
{
public function create($subcategory){
return view('threads.create',compact('subcategory'));
}
public function store(Request $request,$subcategory){
$category = SubCategory::where('title',$subcategory)->first();
$thread = new Thread();
$thread->title = $request->title;
$thread->slug = preg_replace('/[^A-Za-z0-9\-]/', '', str_replace(' ', '-', $request->title)).'-'.Str::random(5);
$thread->description = $request->description;
$thread->sub_category_id = $category->id;
$thread->user_id = Auth::user()->id;
$thread->save();
return redirect()->route('subcategory.thread',$request->subcategory);
}
public function show($slug){
$thread = Thread::where('slug',$slug)->first();
return view('threads.show',compact('thread'));
}
}
App/HTTP/Livewire/ThreadDisplay.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Thread;
use App\Models\User;
use App\Models\ThreadReply;
use Auth;
class ThreadDisplay extends Component
{
public Thread $thread;
public ThreadReply $threadreply;
public $description;
protected $listeners = ['update-thread' => 'updatethread'];
public function mount(Thread $thread)
{
$this->thread = $thread;
// dd($this->thread);
}
public function react($reaction)
{
if ($this->thread->isLiked()) {
$this->thread->toggleReaction($reaction);
if($reaction == $this->thread->reacted()?->type){
if($reaction == 'hand-thumbs-down-fill' || $reaction == 'emoji-frown-fill' ){
$user = User::find($this->thread->user->id)->increment('reactions', 1);
}else{
$user = User::find($this->thread->user->id)->decrement('reactions', 1);
}
}else{
$negative = ['hand-thumbs-down-fill','emoji-frown-fill'];
$positive = ['hand-thumbs-up-fill','emoji-heart-eyes-fill','heart-fil'];
if(in_array($reaction,$negative)){
if(!in_array($this->thread->reacted()->type,$negative)){
$user = User::find($this->thread->user->id)->decrement('reactions', 2);
}
}else{
if(!in_array($this->thread->reacted()->type,$positive)){
$user = User::find($this->thread->user->id)->increment('reactions', 1);
}
}
}
} else{
$this->thread->toggleReaction($reaction);
if($reaction == 'hand-thumbs-down-fill' || $reaction == 'emoji-frown-fill' ){
$user = User::find($this->thread->user->id)->decrement('reactions', 1);
}else{
$user = User::find($this->thread->user->id)->increment('reactions', 1);
}
}
$this->thread = Thread::find($this->thread->id);
}
public function replysubmit(){
$threadreply = new ThreadReply();
$threadreply->thread_id = $this->thread->id;
$threadreply->user_id = Auth::user()->id;
$threadreply->description = $this->description;
$this->description = '';
$threadreply->save();
$this->dispatchBrowserEvent('threadreplysent');
}
public function updatethread(){
$this->thread = Thread::find($this->thread->id);
}
public function render()
{
return view('livewire.thread-display');
}
}
View/threads/create.blade.php
#extends('layouts.app')
#section('stylesheets')
{{-- <link href="{{ asset('ckeditor/contents.css') }}" rel="stylesheet"> --}}
#endsection
#section('content')
<div class="container-fluid mt-5">
<form action="{{ route('thread.store',$subcategory) }}" method="POST">
#csrf
<div class="row">
<div class="col-xl-12 col-lg-12 col-sm-12 col-12 m-auto">
<div class="card shadow">
<div class="card-header">
<h4 class="card-title"> Post Thread </h4>
</div>
<div class="card-body">
<div class="form-group">
<label> Title </label>
<input type="text" class="form-control" name="title" placeholder="Enter the Title" required>
</div>
<div class="form-group" >
<label> Description </label>
<textarea class="form-control" id="description" placeholder="Enter the Description" name="description"></textarea>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</div>
</div>
</form>
</div>
#endsection
#section('scripts')
<script src="//cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
<script>
// Replace the <textarea id="editor1"> with a CKEditor 4
// instance, using default configuration.
CKEDITOR.replace( 'description' );
</script>
#endsection
View/livewire/thread-display.blade.php
#push('stylesheets')
{{-- <script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script> --}}
<style>
.parent-social {
position: relative;
}
.child-social {
width: auto !important;
bottom: 0;
right: 1rem;
margin: 1rem 0;
}
blockquote {
padding-left: 20px;
padding-right: 8px;
border-left: 5px solid #ccc;
font-style: italic;
font-family: Georgia, Times, "Times New Roman", serif;
margin: 13px 40px;
}
.reaction-parent {
position: relative;
overflow: hidden;
display: flex;
justify-content: flex-end;
}
.reaction-child {
width: 135px;
/* Position the tooltip */
position: absolute;
z-index: 1;
right: 0;
}
.reaction-parent i {
margin-right: 0.5rem;
}
.reaction-child .bi {
font-size: 1.5rem;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
#endpush
<div class="container-fluid">
<div class="row no-gutters border m-1 p-2 parent-social">
<div class="col-12 col-md-2 col-sm-12">
<div class="card d-flex justify-content-center align-items-center" style="width: 100%;">
<img src="{{ asset('/uploads/avatar/defaultavatar.webp') }}" class="" alt="..." height="auto"
width="75px">
<div class="card-body">
<h5 class="card-title text-center">{{ $thread->user->name }} <span><i class="fa fa-envelope"></i></span></h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Joined: {!! date('d-M-y', strtotime($thread->user->created_at)) !!}</li>
<li class="list-group-item">Messages: 0</li>
<li class="list-group-item">Reactions: {{ $thread->user->reactions }}</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-md-10 col-sm-12" style="overflow: hidden;">
<div class="card-body">
<h5 class="card-title">{{ $thread->title }}</h5>
</div>
<hr class="m-1">
<div style="overflow-y: scroll; height: 300px; width: 100%; overflow-x: hidden">
{!! $thread->description !!}
</div>
<div class="child-social">
<div class="reaction-parent">
<i onclick="showReactions(this)"
class="#if ($thread->isLiked()) bi bi-{{ $thread->reacted()?->type }}#else bi bi-hand-thumbs-up #endif"
style="font-size: 1.2rem; cursor: pointer;" id="reaction"></i>
<a href="#ckreply"
onclick="ckreply({{ json_encode($thread->description, 1) }},{{ json_encode($thread->user->name, 1) }})"
style="color: #000;">
<i class="bi bi-reply" style="font-size: 1.2rem;"></i>
</a>
</div>
<div class="reaction-child" style="display:none;">
<i wire:click="react('hand-thumbs-up-fill')" class="bi bi-hand-thumbs-up-fill"></i>
<i wire:click="react('hand-thumbs-down-fill')" class="bi bi-hand-thumbs-down-fill"></i>
<i wire:click="react('emoji-heart-eyes-fill')" class="bi bi-emoji-heart-eyes-fill"></i>
<i wire:click="react('emoji-frown-fill')" class="bi bi-emoji-frown-fill"></i>
<i wire:click="react('heart-fill')" class="bi bi-heart-fill"></i>
</div>
</div>
</div>
</div>
#if (count($thread->replies) > 0)
#foreach ($thread->replies as $reply)
<livewire:thread-reply :reply="$reply" :key="time() . rand(0, 999)"/>
#endforeach
#else
#endif
<div class="row no-gutters border m-1 p-2" id="ckreply" wire:ignore>
<div class="col-12 col-md-2 col-sm-12">
<div class="card d-flex justify-content-center align-items-center" style="width: 100%;">
<img src="{{ asset('/uploads/avatar/defaultavatar.webp') }}" class="" alt="..."
height="75px" width="75px">
</div>
</div>
<div class="col-12 col-sm-6 col-md-10 col-sm-12 parent-social">
<form wire:submit.prevent="replysubmit">
<div class="form-group">
<label> Reply </label>
<textarea wire:model.defer="description" class="form-control" id="description" name="description"></textarea>
</div>
<div class="form-group">
<button type="submit"
class="btn btn-primary my-2 d-flex justify-content-center align-items-center"> <i
class="bi bi-reply" style="margin-bottom: 8px; margin-right: 4px;"></i> Post
reply</button>
</div>
</form>
</div>
</div>
</div>
#push('scripts')
<script src="//cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
<script>
var ckdata = "";
var editor = CKEDITOR.replace('description');
// The "change" event is fired whenever a change is made in the editor.
editor.on('change', function(event) {
console.log(event.editor.getData())
#this.set('description', event.editor.getData());
ckdata = event.editor.getData();
})
window.addEventListener('threadreplysent', function() {
CKEDITOR.instances.description.setData('');
ckdata = "";
});
window.addEventListener('replyreaction', function() {
window.livewire.emit('update-thread');
});
function ckreply(description, username) {
console.log(username)
ckdata +=
`<blockquote>${username} said:${description}</blockquote><p> </p>`;
CKEDITOR.instances.description.setData(ckdata);
var editor = CKEDITOR.instances[description];
editor.focus();
}
function showReactions(ele) {
if(ele.parentNode.nextElementSibling.style.display == "none") {
ele.parentNode.nextElementSibling.style.display = "block";
} else {
ele.parentNode.nextElementSibling.style.display = "none";
}
// $('.reaction-child').toggle();
}
</script>
#endpush
View/livewire/thread-reply.blade.php
<div class="row no-gutters border m-1 p-2 parent-social">
<div class="col-12 col-md-2 col-sm-12">
<div class="card d-flex justify-content-center align-items-center" style="width: 100%;">
<img src="{{ asset('/uploads/avatar/defaultavatar.webp') }}" class="" alt="..."
height="auto" width="75px">
<div class="card-body">
<h5 class="card-title text-center">{{ $reply->user->name }}</h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Joined: {!! date('d-M-y', strtotime($reply->user->created_at)) !!}</li>
<li class="list-group-item">Messages: 0</li>
<li class="list-group-item">Reactions: {{ $reply->user->reactions }}</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-md-10 col-sm-12" style="overflow: hidden;">
<div class="card-body">
<h5 class="card-title">{{ $reply->title }}</h5>
</div>
<hr class="m-1">
<div style="overflow-y: scroll; height: 300px; width: 100%; overflow-x: hidden">
{!! $reply->description !!}
</div>
<div class="child-social">
<div class="reaction-parent">
<i onclick="showReactions(this)"
class="#if ($reply->isLiked()) bi bi-{{ $reply->reacted()?->type }}#else bi bi-hand-thumbs-up #endif"
style="font-size: 1.2rem; cursor: pointer;"></i>
<a href="#ckreply"
onclick="ckreply({{ json_encode($reply->description, 1) }},{{ json_encode($reply->user->name, 1) }})"
style="color: #000;">
<i class="bi bi-reply" style="font-size: 1.2rem;"></i>
</a>
</div>
<div class="reaction-child" style="display:none;">
<i wire:click="react('hand-thumbs-up-fill')" class="bi bi-hand-thumbs-up-fill"></i>
<i wire:click="react('hand-thumbs-down-fill')" class="bi bi-hand-thumbs-down-fill"></i>
<i wire:click="react('emoji-heart-eyes-fill')" class="bi bi-emoji-heart-eyes-fill"></i>
<i wire:click="react('emoji-frown-fill')" class="bi bi-emoji-frown-fill"></i>
<i wire:click="react('heart-fill')" class="bi bi-heart-fill"></i>
</div>
</div>
</div>
</div>
above you see all that I wrote. I explain my situation again. When I'm writing my thread after 2-3 letters it stops writing and I have to click again to continue writing my thread. I just have this little bug otherwise everything works fine