egoist/vue-monaco

An unexpected style appears in the editor

januwA opened this issue · 4 comments

image

I found out that he was caused by this
image

packages

 "dependencies": {
    "vue": "2.6.14",
    "monaco-editor": "^0.26.0",
    "vue-monaco": "^1.2.2",
},
  "devDependencies": {
    "monaco-editor-webpack-plugin": "^4.1.2",
}

vue.config.js

const MonacoEditorPlugin = require("monaco-editor-webpack-plugin");
   
 config.plugin("MonacoEditorPlugin").use(MonacoEditorPlugin, [
      {
        languages: ["json"],
      },
    ]);

component

<template>
  <div class="components-container">
    <div class="w-100 border" style="height: 600px">
      <MonacoEditor
        class="w-100 h-100"
        v-model="jsonData"
        language="json"
        :options="options"
      />
    </div>
  </div>
</template>

<script>
import MonacoEditor from "vue-monaco";

export default {
  components: { MonacoEditor },
  data() {
    return {
      options: {
        theme: "vs-dark",
      },
      jsonData: JSON.stringify({ name: "ajanwu" }, null, "  "),
    };
  },
};
</script>

Can you help me look at this problem? thanks

I am having the same issue, did you find a solution yet?

@januwA see this answer here #161 for a resolution

@januwA see this answer here #161 for a resolution

Thank you, I deleted .suggest-widget using js, but the way to use css is better

I don’t know what caused this BUG. I used it in Angular and in the browser, but it didn’t appear.