reqable
would like to show syntax errors inline with the text
When there are syntax errors, I'd like to be able to show the red squiggles and provide a tooltip over the code with the error message.
This editor is so close to being useful for read code; this feature puts it over the edge!
The CodeLineEditingController has a spanBuilder parameter that allow you to do just that.
You just have to build your syntax checker, and using the span builder you can add the red squiggles.
https://pub.dev/documentation/re_editor/latest/re_editor/CodeLineSpanBuilder.html
I tried to do it this way, but its not showing the TextSpan inside the code editor:
It's because it is not used in that way. Here's a small guide :
- You set your function as the parameter of the CodeLineEditingController when creating it. And it runs it everytime something changes.
final controller = CodeLineEditingController(
codeLines: isEmpty ?
CodeLines.fromText('') :
CodeLines.fromText(content),
spanBuilder: _buildSpan, // Add span builder here
);
- You create your buildspan function with the same signature as the doc and return a textspan
TextSpan _buildSpan({
required CodeLine codeLine,
required BuildContext context,
required int index,
required TextStyle style,
required TextSpan textSpan,
}) {
final spans = <TextSpan>[];
spans.add(TextSpan(
text: text[highlightIndex],
style: spanStyle.copyWith(
backgroundColor: Colors.yellow.withOpacity(0.3),
fontWeight: FontWeight.bold,
),
));
return TextSpan(children: spans.isNotEmpty ? spans : [textSpan], style: style);
}
P.S. I haven't tested it for syntax error, I've stripped a function from my code since there was a lot of other functions involved. But it should highlight every line in yellow, while keeping syntax highlighting intact.
If you want to implement the method is to check the position of the characters you want to modify, iterate over the whole text to find them, split their current textspan, change the style, and put everything back together.
Do you have an example with a syntax checker using LSP?
Sorry, there is no need for code syntax analysis in my project. I think you can launch a LSP server, input the code, and build a custom TextSpan after getting the result, ref to https://github.com/reqable/re-editor/issues/56#issuecomment-2738188595
