Html text in completition info

v6
1

How can I display html in tooltips ?

I just need to show a “carriage return” but also \n isn’t working

                customCommands: [
                    {
                        label: 'test',
                        type: 'keyword',
                        info: 'Test tooltip<br/>Line2</br>Line3.',
                        apply: (view, completion, from, to) => {
                            view.dispatch({
                                changes: {from, to, insert: 'print()'},
                                selection: {anchor: from + 6}
                            })
                        }
                    },]

immagine
immagine1102×164 7.6 KB

1 Like
2

https://codemirror.net/docs/ref/#autocomplete.Completion.info

Can be a plain string or a function that’ll render the DOM structure to show when invoked.

3

Oops I missed that, thank you,
fixed my code, here an example if others need:

const sanitizedInfo = DOMPurify.sanitize(command.info);
let node = document.createElement('div');
node.innerHTML = sanitizedInfo;
app.customCommands.push({
    label: command.label,
    type: 'keyword',
    info: () => node,
    style: command.type,
    apply: (view, completion, from, to) => {
        view.dispatch({
            changes: {from, to, insert: command.label + ' '},
            selection: {anchor: from + command.label.length + 1}
        })
    }
})