1<script>
2  import { codeStore, updateConfig } from '../code-store.js';
3  import { configErrorStore } from '../error-store.js';
4  import { onMount } from 'svelte';
5  import Error from './Error.svelte';
6  import { getResizeHandler, initEditor } from './editor-utils';
7  import { watchResize } from 'svelte-watch-resize';
8  import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
9
10  let edit;
11
12  let resizeHandler = () => {};
13
14  const handleConfUpdate = (conf, updateEditor) => {
15    console.log(conf);
16    if (updateEditor && edit) {
17      edit.setValue(JSON.stringify(conf, null, 2));
18    }
19    updateConfig(conf, false);
20    configErrorStore.set(undefined);
21  };
22
23
24  const unsubscribe = codeStore.subscribe((state) => {
25    console.log(state.mermaid, state.updateEditor);
26    if (state.updateEditor) {
27      handleConfUpdate(state.mermaid, true);
28    }
29  });
30
31  onMount(async () => {
32    console.log('Mounting config');
33    const editorElem = document.getElementById('editor-conf');
34    edit = monaco.editor.create(editorElem, {
35      value: '',
36      theme: 'myCoolTheme',
37      language: 'json',
38    });
39    resizeHandler = getResizeHandler(edit);
40    edit.onDidChangeModelContent(function (e) {
41      try {
42        const conf = JSON.parse(edit.getValue());
43        handleConfUpdate(conf, false);
44      } catch (err) {
45        console.log('Error in parsed', err);
46        configErrorStore.set(err);
47      }
48    });
49
50    initEditor(monaco);
51  });
52</script>
53
54<style>
55  #editor-conf {
56    width: 100%;
57    height: 200px;
58    max-height: 300px;
59    flex: 1;
60  }
61</style>
62
63<div id="editor-container">
64  <div id="editor-conf" use:watchResize={resizeHandler} />
65  <Error errorStore={configErrorStore} />
66</div>
67