Change icon for gutter (code folding)

v6
1

I’m trying to change the icon for code folding but it doesn’t remove the default icon.

Here’s my code:

const foldConfig = foldGutter({
    markerDOM: open => {
        let icon = document.createElement('span');
        icon.className = open ? 'bi bi-plus-square' : 'bi bi-dash-square';

        return icon;
    },
});

and here are the results

Screenshot 2023-09-11 144740
Screenshot 2023-09-11 1447401759×101 5.81 KB

Screenshot 2023-09-11 144810
Screenshot 2023-09-11 1448101770×40 2.17 KB

2

I suspect you are including foldGutter twice in your configuration (probably once through basicSetup and once through your own custom instance).

3

Yes here is my setup. Is there a way to override the code folding config and remove the default icon?

const foldConfig = foldGutter({
    markerDOM: open => {
        let icon = document.createElement('span');
        icon.className = open ? 'bi bi-plus-square' : 'bi bi-dash-square';

        return icon;
    },
});

let state = EditorState.create({
    extensions: [
        basicSetup,
        languageCompartment.of(python()),
        foldingCompartment.of(foldConfig)
    ],
});
4

You’ll have to stop using the basic setup (by inlining it into your project).