random-web-tools/src/components/MonacoEditor.vue

<template>
  <div :id="name"></div>
</template>

<script>
import loader from "@monaco-editor/loader";

let monacoResultInst = null;

export default {
  name: "monacoEditor",
  props: {
    name: {
      type: String,
      required: true,
    },
    language: {
      type: String,
      default: "text",
    },
    value: {
      type: String,
      default: "",
    },
    readonly: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    loader.init().then((monaco) => {
      monacoResultInst = monaco;

      monaco.editor.create(document.querySelector(`#${this.name}`), {
        value: this.value,
        language: this.language,
        readOnly: this.readonly,
      });
    });
  },
  unmounted() {
    if (monacoResultInst) {
      monacoResultInst.editor.getModels().forEach((model) => model.dispose());
    }
  },
  watch: {
    value: {
      // the callback will be called immediately after the start of the observation
      immediate: true,
      deep: true,
      async handler(value, oldValue) {
        while (!monacoResultInst) {
          await new Promise((r) => setTimeout(r, 10));
        }

        monacoResultInst.editor.getModels()[0].setValue(value.toString());
      },
    },
  },
};
</script>

<style scoped></style>