Skip to content

Commit

Permalink
Added customization option
Browse files Browse the repository at this point in the history
  • Loading branch information
@Raccoon254
Raccoon254 committed Aug 9, 2024
1 parent a4af11e commit 994e61b
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 143 deletions.
53 changes: 12 additions & 41 deletions app/Livewire/BlogMaker.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,62 +2,33 @@

namespace App\Livewire;

use App\Services\MarkdownParser;
use Illuminate\Http\RedirectResponse;
use Illuminate\View\View;
use Livewire\Attributes\On;
use Livewire\Attributes\Validate;
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\Blog;
use App\Models\User;
use App\Models\Image;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Storage;
use Illuminate\Http\RedirectResponse;
use Illuminate\View\View;
use Illuminate\Support\Facades\Auth;

class BlogMaker extends Component
{
use WithFileUploads;

public $title;
public $content = '';
public $markdownContent = '';
public $tempImage;

protected $rules = [
'title' => 'required|min:6',
'content' => 'required',
];

public function updatedContent(): void
{
$this->parseTextToMarkdown($this->content);
}

public function parseTextToMarkdown($content): void
{
$parser = new MarkdownParser();
$this->markdownContent = $parser->parse($content);
}


public function uploadImage()
{
// Implement image upload logic here
Image::create([
//TODO: Get the blog ID,
'blog_id' => 1,
'path' => $this->tempImage->store('images', 'public'),
]);
}
public $contentHtml;

public function saveBlog(): RedirectResponse
{
$this->validate();
$this->validate([
'title' => 'required|min:6',
'content' => 'required|min:6',
]);

$blogData = [
'title' => $this->title,
'content' => $this->markdownContent,
'content' => $this->content, // Storing HTML content directly
'slug' => Str::slug($this->title),
'user_id' => auth()->id(),
'user_id' => Auth::id(),
];

$blog = Blog::create($blogData);
Expand Down
145 changes: 46 additions & 99 deletions resources/views/blogs/create.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,108 +1,55 @@
<div class="p-4 flex gap-4">
<div class="w-1/2 flex flex-col">
<div class="flex gap-[1px] mb-2">
<button id="addHeading1" class="control-btn">
H1
</button>
<button id="addHeading2" class="control-btn">
H2
</button>
<button id="addHeading3" class="control-btn">
H3
</button>
<button id="addParagraph" class="control-btn">
<i class="fas fa-paragraph"></i> P
</button>
<button id="addBold" class="control-btn">
<i class="fas fa-bold"></i>
</button>
<button id="addList" class="control-btn">
<i class="fas fa-list"></i>
</button>
<button id="addLink" class="control-btn">
<i class="fas fa-link"></i>
</button>
<button id="addImage" class="control-btn">
<i class="fas fa-image"></i>
</button>
<div class="hidden">
<input type="file" accept="image/*" id="image" wire:model="image">
</div>
</div>
<textarea
id="content"
wire:model.live="content"
type="text" class="border w-full border-gray-300 p-2"
rows="10"></textarea>
<div>
<div>
<input wire:model="title" type="text" placeholder="Enter title">
@error('title') <span>{{ $message }}</span> @enderror
</div>

<!-- Preview -->
<div class="w-1/2">
<h3>Preview:</h3>
<div id="preview" class="markdown-content hidden text-black">
{{ $markdownContent }}
</div>
{{-- AS inner html
--}}
<div id="render" class="markdown-content-render text-black" wire:ignore>
</div>
<div>
<div id="editor"></div>
@error('content') <span>{{ $message }}</span> @enderror
</div>
</div>

<script>
document.getElementById('addHeading1').addEventListener('click', function () {
addToContent("\n# H1 ");
});
document.getElementById('addHeading2').addEventListener('click', function () {
addToContent("\n## H2 ");
});
document.getElementById('addHeading3').addEventListener('click', function () {
addToContent("\n### H3 ");
});
document.getElementById('addParagraph').addEventListener('click', function () {
addToContent("\n");
});
document.getElementById('addBold').addEventListener('click', function () {
addToContent("\n**bold text** ");
});
document.getElementById('addList').addEventListener('click', function () {
addToContent("\n- list item");
});
document.getElementById('addLink').addEventListener('click', function () {
addToContent("\n[link text](url) ");
});
document.getElementById('addImage').addEventListener('click', function () {
document.getElementById('image').click();
setTimeout(() => {
addToContent("\n![alt text](image_url) ");
}, 100)
});
<button id="save_button" class="btn">Save Blog</button>

@script
<script>
const textArea = document.querySelector('#content');
const saveButton = document.querySelector('#save_button');
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
function addToContent(text) {
let contentElement = document.getElementById('content');
[{ 'header': 1 }, { 'header': 2 }, { 'header': 3 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
//if we have nothing remove the new line
if (contentElement.value === '') {
text = text.trim();
}
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
//if we have a previous list and we are adding a new item
if (text.includes('-') && contentElement.value.endsWith('-')) {
text = text.trim();
}
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
contentElement.value += text;
contentElement.dispatchEvent(new Event('input')); // To trigger Livewire update
}
['clean'] // remove formatting button
];
// on content change
document.getElementById('content').addEventListener('input', function () {
setTimeout(
function () {
let content = document.getElementById('preview').innerText
let render = document.getElementById('render');
render.innerHTML = content;
}, 20
)
});
</script>
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: toolbarOptions
}
});
saveButton.addEventListener('click', () => {
@this.
set('content', quill.root.innerHTML);
@this.
saveBlog();
});
</script>
@endscript
</div>
6 changes: 3 additions & 3 deletions resources/views/blogs/layout.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@

<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-white">
Expand All @@ -26,7 +26,7 @@
<livewire:alerts/>
<div class="flex relative z-40 gap-2 p-2">
<!-- Page Content -->
<main class="w-full bg-gray-100 text-black/80 overflow-clip rounded-[16px]">
<main class="w-full bg-gray-100 p-4 text-black/80 overflow-clip rounded-[16px]">
{{ $slot }}
</main>
</div>
Expand Down

0 comments on commit 994e61b

Please sign in to comment.