My current task involves utilizing the deltaDecorations method to display errors in my editor.
Feel free to check out my code here: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810
Below is the output:
https://i.sstatic.net/Dtj9A.png
I am currently attempting to incorporate a resize property into the editor by adding it to the style sheet.
resize: both;overflow: auto;
However, I have encountered an issue where the hover message is partially concealed by the edges of the editor.
You can observe this in the attached image below - the editor can now be resized (bottom right), but the hover message remains partially hidden.
https://i.sstatic.net/ALUQ6.png
Is there a way for me to apply the resize property without obstructing elements?
Furthermore, I would like to inquire if it's possible to have the hover message float within the editor interface - for instance, transitioning from the top line to the bottom or aligning with the side of the editor, etc...
I've also included the code snippet showcasing the addition of markerDecorations (which is also available in the gist link provided above):
this.markerDecorations = codeEditor.deltaDecorations(this.markerDecorations, [
{
range: new monaco.Range(pos.startLine, pos.startColumn, pos.endLine, pos.endColumn),
options: {
className: 'squiggly-error',
minimap: {
color: { id: 'minimap.errorHighlight' },
position: monaco.editor.MinimapPosition.Gutter,
},
overviewRuler: {
color: { id: 'editorOverviewRuler.errorForeground' },
position: monaco.editor.OverviewRulerLane.Full,
},
stickiness: monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges,
zIndex: 1,
hoverMessage: { value: parseResponse.error, isTrusted: false },
},
},
]);