import { Controller } from '@hotwired/stimulus'; import { createEditor } from 'prism-code-editor'; import 'prism-code-editor/prism/languages/markup'; import 'prism-code-editor/prism/languages/css'; import 'prism-code-editor/prism/languages/markdown'; import { defaultCommands, editHistory } from 'prism-code-editor/commands'; export default class extends Controller { static targets = ['editor', 'input']; static values = { language: String }; connect() { this.editor = createEditor(this.editorTarget, { language: this.languageValue, insertSpaces: true, tabSize: 2, lineNumbers: true, readOnly: false, wordWrap: true, rtl: false, value: this.inputTarget.value, onUpdate: (code) => { this.inputTarget.value = code; }, }); this.editor.addExtensions(defaultCommands(), editHistory()); } destroy() { this.editor.remove(); } handleFocus() { this.editor.textarea.focus(); } }