vdesjs / vite-plugin-monaco-editor

A vite plugin for the Monaco Editor
MIT License
203 stars 36 forks source link

Browser crash #9

Closed kakajun closed 3 years ago

kakajun commented 3 years ago

When I copy the project and listen to the editor content change event,

 editor. Ondidchangemodelcontent (() = >{

// this.$emit('input', this.editor.getValue())
console.log(this.editor.getValue())
}

The browser crashed. I don't know why, but I saw another project that can be used normally, url: https://github.com/wobsoriano/codeplayground

NomadBin commented 3 years ago

A browser crash is most likely you own code. I update the test case use the content change event. you can refer to this code : https://github.com/vdesjs/vite-plugin-monaco-editor/blob/2dedc77b365d95c6cd857cea17bcde66c2fd63de/test/src/mona/Editor.vue#L19

kakajun commented 3 years ago

I find myproblem used this , then crashed

<template>
  <div class="editor" ref="container">ediotr</div>
</template>
<script>
import { monaco } from './customMonaco';
export default {
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    this.editor = monaco.editor.create(this.$refs.container, {
      value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
      language: 'typescript',
    });
    this.editor.onDidChangeModelContent(() => {
      console.log(this.editor.getValue());
    });
  },
};
</script>
<style>
.editor {
  width: 100vw;
  height: 100vh;
}
</style>
NomadBin commented 3 years ago

Have you solved the problem yet? Otherwise I will close this issure.

kakajun commented 3 years ago

Thank you for paying attention to my problem. I got through with your demo, but the code I posted did lead to the collapse of the browser. I don't know the reason. I changed my computer and couldn't try it out

kakajun commented 3 years ago

Maybe I should mention issue or Vue to Monaco editor, because it's not your plug-in problem, and other methods can't work normally. Thank you