MarkdownEditor not rendering content properly when using $set

[AxelDeneu]

Package

filament/filament

Package Version

v3.0.30

Laravel Version

v10.19.0

Livewire Version

v3.0.0-beta.10

PHP Version

PHP 8.1

Problem description

When I dynamically set the value of a MarkdownEditor component, the value is set but the editor render the value correctly and broke.

https://github.com/filamentphp/filament/assets/22771331/b5627a2c-8633-4721-8008-529e2a824f7f

Expected behavior

When the value of a MarkdownEditor is set, it should replace the value and render. When rendered, the input should still be usable and editable.

Steps to reproduce

In a form, create a MarkdownEditor, add a hintAction that will trigger a change in the state. Then, try to use the Markdown Editor in front.

MarkdownEditor::make('excerpt')
    ->hintAction(
        \Filament\Forms\Components\Actions\Action::make('generate')
            ->action(function (callable $set, MarkdownEditor $component) use ($form) {
                $excerpt = "But when I dynamically change it's value, with a `hintAction` for example, the input render, but it's unusable. To demonstrate, I will focus the input and press `space`. You'll se that the render is broken. If I press some keys, the behavior is not as expected.";

                $set('excerpt', $excerpt);
            })
    ),

Reproduction repository

https://github.com/AxelDeneu/filament-markdown-editor-bug

Relevant log output

No logs, it's a visual bug.

[EdwardWestbury]

I can confirm also experiencing this bug with setting the content programatically via $set() with the MarkdownEditor.

Interestingly if the content is single line string, I can usually click in the CodeMirror instance a few times and the content will re-align itself. Things seems to get far messier when you inject multiple lines of markdown to the editor instance.

I did try dispatching a browser event and setting the content directly on the CodeMirror instance via Javascript but ran into the same issue.

Not sure if this context helps the team with the fix.

[AxelDeneu]

It seems to be related to CodeMirror. I tried a lot of things from frontend also but it did not ended well. When trying the same thing but with a pure EasyMDE installation, it works perfectly and the content re-align itself perfectly.

[helloreece]

I'm also experiencing this issue. Open to hearing if anyone finds a solution.

[duartec2]

Same here, filling de MarkdownEditor with fill method...

$this->form->fill([
    'myAttribute' => 'My new content...'
]);

[danharrin]

I have attempted to fix this myself. I have been unable to. There is a comment inside markdown-editor.js that explains all methods of refreshing CodeMirror are not functioning. I would appreciate something with deeper CodeMirror knowledge to investigate this issue.