Is there any way to bookmark a line in Monaco-editor, similar to VSCode bookmarks? It seems there is no such built-in feature. If so, how can I show a marker in front of a line? Something like a breakpoint will also be acceptable.
Advertisement
Answer
I found a solution below for anyone who later needs this functionality.
CSS:
<head> <style> .BookmarkGlyphMarginClass { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAGlJREFUOE9jZKAQMKLp/0+keXB9owYwMIyGwWAPg3sMDAwF0KQ9gYGBQQkpmeNNyt8ZGBi6GBgYOhgYGH5ANXEyMDCUQzEHA5LX0dPBZgYGhnwGBgaQ7dgAyBUTGRgYfGGS6BYQmRkRygCJrhYRt46k9gAAAABJRU5ErkJggg=='); background-size: contain; } .BookmarkLine { background: #FDFD96; } </style> </head>
Javascript:
function ToggleBookmarkCurrentLine() { var line = editor.getPosition().lineNumber; current_bookmarks = []; editor.getLineDecorations(line).forEach(decoration=> { if (decoration.options.className === 'BookmarkLine') { current_bookmarks.push(decoration.id); } }); if (current_bookmarks.length == 0) { decorationsId = editor.deltaDecorations( [], [ { range: new monaco.Range(line, 1, line, Infinity), options: { isWholeLine: true, className: 'BookmarkLine', glyphMarginClassName: 'BookmarkGlyphMarginClass', stickiness: monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges } } ] ); } else { editor.deltaDecorations(current_bookmarks, [] ); } }