How to remove the gutter and lineNumber?

[francisashley]

Clear and concise description of the problem

I see in src/config.ts that vue-codemirror uses import { basicSetup } from 'codemirror' to set the default config which according to the docs is convieniant way of quickly getting a basic editor working. The docs also mention this config must be replaced when looking to customise codemirror:

"This is an extension value that just pulls together a number of extensions that you might want in a basic editor. It is meant as a convenient helper to quickly set up CodeMirror without installing and importing a lot of separate packages. This extension does not allow customization. The idea is that, once you decide you want to configure your editor more precisely, you take this package's source (which is just a bunch of imports and an array literal), copy it into your own code, and adjust it as desired."

When inspecting src/config.ts and src/component.ts (onMounted) it looks we can only extend the config but not override it.. so unless I'm mistaken, we're limited in how much we can control vue-codemirror and cannot remove the gutter and lineNumber ..?

Suggested solution

Add support for replace the default codemirror extensions

Alternative

No response

Additional context

No response

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[zl7261]

+1

[Ramil-Musin]

+1

[cyrilluce]

I'm encoutered same issue, this is my hacky solution:

import { install } from 'vue-codemirror';

// override vue-codemirror extensions
app.use(install, { extensions: [] });

Then, you can combine yourself's extensions, e.g.

<template>
    <Codemirror
        :extensions="[basicSetup]"
    ></Codemirror>
</template>

<script setup lang="ts">
import { basicSetup } from './setup';
</script>