May 16, 2024
0
Level 2
CodeMirror 6 on Full Page component
Hi, I'm new with Livewire. Trying to create a basic component where when user types something in CodeMirror element it would copy the content to a textarea. Here is the code
use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Volt\Component;
new
#[Layout('layouts.guest')]
#[Title('Title')]
class extends Component {
public $code;
}; ?>
<div class="container py-5">
<div id="code-editor" wire:model.live="code" wire:ignore></div>
<textarea>{{$code}}</textarea>
</div>
@script
<script>
new EditorView({
doc: "console.log('hello')\n",
extensions: [basicSetup, javascript()],
parent: document.getElementById("code-editor")
});
</script>
@endscript
and, in an external JS file (before built the file), I've this -
import {basicSetup, EditorView} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"
I'm getting this error in console -
Alpine Expression Error: EditorView is not defined
Expression: "new EditorView({
doc: "console.log('hello')\n",
extensions: [basicSetup, javascript()],
parent: document.getElementById("code-editor")
});"
Can someone help what i'm doing wrong or whats the correct way to do it? Thank you
Please or to participate in this conversation.