2021-08-19 16:00:14 +02:00
|
|
|
<?php
|
|
|
|
|
|
|
|
|
|
declare(strict_types=1);
|
|
|
|
|
|
2021-09-02 18:34:25 +02:00
|
|
|
namespace App\Views\Components\Forms;
|
2021-08-19 16:00:14 +02:00
|
|
|
|
2021-09-10 18:02:25 +02:00
|
|
|
class MarkdownEditor extends FormComponent
|
2021-08-19 16:00:14 +02:00
|
|
|
{
|
|
|
|
|
public function render(): string
|
|
|
|
|
{
|
2021-11-05 15:36:34 +01:00
|
|
|
$editorClass = 'w-full flex flex-col bg-elevated border-3 border-contrast rounded-lg overflow-hidden focus-within:ring-accent ' . $this->class;
|
2021-09-10 18:02:25 +02:00
|
|
|
|
2021-11-05 15:36:34 +01:00
|
|
|
$this->attributes['class'] = 'bg-elevated border-none focus:border-none focus:outline-none focus:ring-0 w-full h-full';
|
2021-09-10 18:02:25 +02:00
|
|
|
$this->attributes['rows'] = 6;
|
2021-08-19 16:00:14 +02:00
|
|
|
|
2022-01-05 15:58:53 +01:00
|
|
|
// dd(htmlspecialchars_decode($this->value));
|
|
|
|
|
$value = htmlspecialchars_decode($this->value);
|
|
|
|
|
|
|
|
|
|
$textarea = form_textarea($this->attributes, old($this->name, $value, false));
|
2021-09-10 18:02:25 +02:00
|
|
|
$icons = [
|
|
|
|
|
'heading' => icon('heading'),
|
|
|
|
|
'bold' => icon('bold'),
|
|
|
|
|
'italic' => icon('italic'),
|
|
|
|
|
'list-unordered' => icon('list-unordered'),
|
|
|
|
|
'list-ordered' => icon('list-ordered'),
|
|
|
|
|
'quote' => icon('quote'),
|
|
|
|
|
'link' => icon('link'),
|
|
|
|
|
'image-add' => icon('image-add'),
|
|
|
|
|
'markdown' => icon(
|
|
|
|
|
'markdown',
|
2021-11-05 15:36:34 +01:00
|
|
|
'mr-1 text-lg opacity-40'
|
2021-09-10 18:02:25 +02:00
|
|
|
),
|
|
|
|
|
];
|
|
|
|
|
$translations = [
|
|
|
|
|
'write' => lang('Common.forms.editor.write'),
|
|
|
|
|
'preview' => lang('Common.forms.editor.preview'),
|
|
|
|
|
'help' => lang('Common.forms.editor.help'),
|
|
|
|
|
];
|
2021-08-19 16:00:14 +02:00
|
|
|
|
2021-09-10 18:02:25 +02:00
|
|
|
return <<<HTML
|
|
|
|
|
<div class="{$editorClass}">
|
2021-09-21 17:51:04 +02:00
|
|
|
<header class="px-2">
|
2021-11-05 15:36:34 +01:00
|
|
|
<div class="sticky top-0 z-20 flex flex-wrap justify-between border-b border-gray-300 bg-elevated">
|
2021-09-21 17:51:04 +02:00
|
|
|
<markdown-write-preview for="{$this->id}" class="relative inline-flex h-8">
|
2021-11-05 15:36:34 +01:00
|
|
|
<button type="button" slot="write" class="px-2 font-semibold focus:ring-inset focus:ring-accent">{$translations['write']}</button>
|
|
|
|
|
<button type="button" slot="preview" class="px-2 font-semibold focus:ring-inset focus:ring-accent">{$translations['preview']}</button>
|
2021-09-21 17:51:04 +02:00
|
|
|
</markdown-write-preview>
|
|
|
|
|
<markdown-toolbar for="{$this->id}" class="flex gap-4 px-2 py-1">
|
|
|
|
|
<div class="inline-flex text-2xl gap-x-1">
|
2021-11-05 15:36:34 +01:00
|
|
|
<md-header class="opacity-50 hover:opacity-100 focus:ring-accent focus:opacity-100">{$icons['heading']}</md-header>
|
2021-12-16 16:25:30 +01:00
|
|
|
<md-bold class="opacity-50 hover:opacity-100 focus:ring-accent focus:opacity-100" data-hotkey-scope="{$this->id}" data-hotkey="Control+b,Meta+b">{$icons['bold']}</md-bold>
|
|
|
|
|
<md-italic class="opacity-50 hover:opacity-100 focus:ring-accent focus:opacity-100" data-hotkey-scope="{$this->id}" data-hotkey="Control+i,Meta+i">{$icons['italic']}</md-italic>
|
2021-09-21 17:51:04 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="inline-flex text-2xl gap-x-1">
|
2021-11-05 15:36:34 +01:00
|
|
|
<md-unordered-list class="opacity-50 hover:opacity-100 focus:ring-accent focus:opacity-100">{$icons['list-unordered']}</md-unordered-list>
|
|
|
|
|
<md-ordered-list class="opacity-50 hover:opacity-100 focus:ring-accent focus:opacity-100">{$icons['list-ordered']}</md-ordered-list>
|
2021-09-21 17:51:04 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="inline-flex text-2xl gap-x-1">
|
2021-11-05 15:36:34 +01:00
|
|
|
<md-quote class="opacity-50 hover:opacity-100 focus:ring-accent focus:opacity-100">{$icons['quote']}</md-quote>
|
2021-12-16 16:25:30 +01:00
|
|
|
<md-link class="opacity-50 hover:opacity-100 focus:ring-accent focus:opacity-100" data-hotkey-scope="{$this->id}" data-hotkey="Control+k,Meta+k">{$icons['link']}</md-link>
|
2021-11-05 15:36:34 +01:00
|
|
|
<md-image class="opacity-50 hover:opacity-100 focus:ring-accent focus:opacity-100">{$icons['image-add']}</md-image>
|
2021-09-21 17:51:04 +02:00
|
|
|
</div>
|
|
|
|
|
</markdown-toolbar>
|
|
|
|
|
</div>
|
2021-09-10 18:02:25 +02:00
|
|
|
</header>
|
|
|
|
|
<div class="relative">
|
|
|
|
|
{$textarea}
|
2021-11-05 15:36:34 +01:00
|
|
|
<markdown-preview for="{$this->id}" class="absolute top-0 left-0 hidden w-full h-full max-w-full px-3 py-2 overflow-y-auto prose bg-base" showClass="bg-elevated" />
|
2021-09-10 18:02:25 +02:00
|
|
|
</div>
|
2021-11-05 15:36:34 +01:00
|
|
|
<footer class="flex px-2 py-1 border-t bg-base">
|
|
|
|
|
<a href="https://commonmark.org/help/" class="inline-flex items-center text-xs font-semibold text-skin-muted hover:text-skin-base" target="_blank" rel="noopener noreferrer">{$icons['markdown']}{$translations['help']}</a>
|
2021-09-10 18:02:25 +02:00
|
|
|
</footer>
|
|
|
|
|
</div>
|
|
|
|
|
HTML;
|
2021-08-19 16:00:14 +02:00
|
|
|
}
|
|
|
|
|
}
|
