$form markdown editor is broken after 1 submit
https://gyazo.com/8805cbf893d6760427e45cfdc7dbb371
This is how the blade view looks
I am not doing anything out of the ordinary aside from styling the editor with
But even when I don't have these classes, it still breaks.
Any thoughts on what might be the issue?
<form wire:submit="create" class="relative">
{{ $this->form }}
<button type="submit"
class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 absolute top-1.5 right-6">
Submit
</button>
</form>
<form wire:submit="create" class="relative">
{{ $this->form }}
<button type="submit"
class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 absolute top-1.5 right-6">
Submit
</button>
</form>
class ViewTaskDialog extends Component implements HasForms
{
use InteractsWithForms;
public ?array $data = [];
public function mount(): void
{
$this->form->fill();
}
public function form(Form $form): Form
{
return $form
->schema([
Forms\Components\MarkdownEditor::make('content')
->toolbarButtons([
'attachFiles',
'bold',
'italic',
'bulletList',
'link',
'orderedList',
])
->placeholder('Message # chat name')
->minLength(2)
->maxLength(2024)
->disableLabel()
->required()
])
->statePath('data')
->model(Task::class);
}
public function create(): void
{
$data = $this->form->getState();
$record = [
'task_id' => $this->task->id,
'user_id' => auth()->id(),
'content' => $data['content'],
'is_private' => false,
];
$record = Comment::create($record);
$this->form->fill();
$this->setTask($this->task->id);
$this->dispatch('scroll-to-bottom')->self();
}
}
class ViewTaskDialog extends Component implements HasForms
{
use InteractsWithForms;
public ?array $data = [];
public function mount(): void
{
$this->form->fill();
}
public function form(Form $form): Form
{
return $form
->schema([
Forms\Components\MarkdownEditor::make('content')
->toolbarButtons([
'attachFiles',
'bold',
'italic',
'bulletList',
'link',
'orderedList',
])
->placeholder('Message # chat name')
->minLength(2)
->maxLength(2024)
->disableLabel()
->required()
])
->statePath('data')
->model(Task::class);
}
public function create(): void
{
$data = $this->form->getState();
$record = [
'task_id' => $this->task->id,
'user_id' => auth()->id(),
'content' => $data['content'],
'is_private' => false,
];
$record = Comment::create($record);
$this->form->fill();
$this->setTask($this->task->id);
$this->dispatch('scroll-to-bottom')->self();
}
}
.markdown-editor-chat-window {
.fi-fo-markdown-editor { @apply rounded-none focus-within:ring-0 ring-0 border-0 };
.CodeMirror-scroll { min-height: 5rem !important; };
}
.markdown-editor-chat-window {
.fi-fo-markdown-editor { @apply rounded-none focus-within:ring-0 ring-0 border-0 };
.CodeMirror-scroll { min-height: 5rem !important; };
}
Gyazo
Gyazo Screen Video
0 Replies