2020-12-31 00:46:37 +13:00
|
|
|
<script>
|
|
|
|
import cm from "./codemirror"
|
|
|
|
import { onMount, createEventDispatcher } from "svelte"
|
|
|
|
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
|
|
|
|
export let value
|
|
|
|
export let mode = "sql"
|
|
|
|
|
|
|
|
let editor
|
|
|
|
let codemirror
|
|
|
|
|
2021-01-12 06:18:22 +13:00
|
|
|
$: {
|
|
|
|
if (codemirror) {
|
|
|
|
const { left, top } = codemirror.getScrollInfo()
|
|
|
|
codemirror.setValue(value)
|
|
|
|
codemirror.scrollTo(left, top)
|
|
|
|
}
|
|
|
|
}
|
2021-01-09 01:06:37 +13:00
|
|
|
|
2021-01-12 06:18:22 +13:00
|
|
|
onMount(() => {
|
|
|
|
if (codemirror) codemirror.toTextArea()
|
2021-01-09 01:06:37 +13:00
|
|
|
|
2020-12-31 00:46:37 +13:00
|
|
|
codemirror = cm.fromTextArea(editor, {
|
|
|
|
lineNumbers: true,
|
|
|
|
mode,
|
|
|
|
lineWrapping: true,
|
|
|
|
indentUnit: 2,
|
|
|
|
tabSize: 2,
|
|
|
|
autoCloseBrackets: true,
|
|
|
|
autoCloseTags: true,
|
|
|
|
extraKeys: {
|
|
|
|
"Ctrl-/": "toggleComment",
|
|
|
|
},
|
|
|
|
})
|
|
|
|
codemirror.on("change", instance => {
|
|
|
|
const code = instance.getValue()
|
2021-01-08 02:13:46 +13:00
|
|
|
dispatch("change", code)
|
2020-12-31 00:46:37 +13:00
|
|
|
})
|
2021-01-12 06:18:22 +13:00
|
|
|
|
|
|
|
codemirror.setValue(value || "")
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
if (codemirror) codemirror.toTextArea()
|
|
|
|
}
|
2020-12-31 00:46:37 +13:00
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<textarea bind:value bind:this={editor} />
|
2021-01-08 02:13:46 +13:00
|
|
|
|
|
|
|
<style>
|
|
|
|
textarea {
|
|
|
|
background: var(--background);
|
|
|
|
border-radius: var(--border-radius-m);
|
|
|
|
}
|
2021-01-09 07:22:03 +13:00
|
|
|
:global(.CodeMirror) {
|
|
|
|
border-radius: var(--border-radius-m);
|
|
|
|
}
|
2021-01-08 02:13:46 +13:00
|
|
|
</style>
|