surmon-china / vue-codemirror

@codemirror code editor component for @vuejs
https://github.surmon.me/vue-codemirror
MIT License
3.28k stars 382 forks source link

v-bind:disabled="true" remove spaces #196

Closed mho22 closed 1 year ago

mho22 commented 1 year ago

Describe the bug

I'm currently using vue-codemirror [ 6.1.1 ] for Vue3 [ 3.2.38 ]

Here is my CodeMirror Component

<Codemirror
    v-if="isBoarded"
    v-bind:model-value="input"
    v-bind:autofocus="false"
    v-bind:extensions="[ javascript() ]"
    v-bind:indent-with-tab="false"
    v-bind:tab-size="4"
    v-bind:disabled="true"
/>

here is the output I get when displayed on screen :

var a = [
];
var b = [
1
];
var c = [
1, 2
];
var d = [1,
2];
var e = [function foo() {
dosomething();
}];

If I set v-bind:disabled="true" to v-bind:disabled="false" it displays the data correctly, but I then can modify data :

<Codemirror
    v-if="isBoarded"
    v-bind:model-value="input"
    v-bind:autofocus="false"
    v-bind:extensions="[ javascript() ]"
    v-bind:indent-with-tab="false"
    v-bind:tab-size="4"
    v-bind:disabled="false"
/>

here is the output I get when displayed on screen :

var a = [
];
var b = [
    1
];
var c = [
    1, 2
];
var d = [1,
    2];
var e = [function foo() {
    dosomething();
}];

Using ViteJS HMR I can instantly see the difference when changing v-bind:disabled="true" to v-bind:disabled="false"

Do you have any idea what's happening ?

Reproduction

The information in the description probably should be pretty accurate.

System Info

The information in the description probably should be pretty accurate.

Used Package Manager

npm

Validations

mho22 commented 1 year ago

Nevermind... The problem was caused by a interfering css class. Thanks for your work.