Error highlighter not displayed for yaml files

[rosemaryjose]

Problem

I am using react-ace in my project. I have to put yaml file in ace-editor. But error is not displaying if user edit the file. In case of json its doing both highlighting and error display. In case of yaml, only syntax highlighting is working. How to enable error display/syntax validation for yaml files in react-ace.

Sample code to reproduce your issue

I have imported "brace/mode/yaml" and made "showGutter={true}" in ace-editor

import "brace/mode/yaml";

<AceEditor focus style={{ width: "100%" }} mode="yaml" theme="github" name="template_file" ref="editorInput" onChange={this.props.input.onChange} value={this.props.input.value} fontSize={20} showPrintMargin showGutter={true} highlightActiveLine setOptions={{ showLineNumbers: true, tabSize: 2 }} editorProps={{ $blockScrolling: true }} />

References

Progress on: #

[UditManiyar]

Has anyone found the solution ?

[ngmgit]

+1 same issue. Other modes work fine and shows the error messages as mentioned above. Even the annotations array is empty when checked. Additionally imported brace at the top too. Still it didnt help.

Anyway found this and it mentions the syntax validation is available only for few lang. https://github.com/ajaxorg/ace/wiki/Syntax-validation

Also read this as it also mentions the ways to add linter for other languages.

Had to use other library which can parse yaml like yaml-js to get the errors and manually set the annotations. Even after setting the annotations props it doesnt work properly so had to get the editor reference and set it manually using editor.setAnnotations.

[yunsii]

Add a note above. It doesn't work by using editor.renderer.setAnnotations() synchronously. With rending ajaxorg/ace source code, I provide some useful code links:

• renderer.setAnnotations() https://github.com/ajaxorg/ace/blob/master/lib/ace/virtual_renderer.js#L1181
• gutterLayer.setAnnotations() https://github.com/ajaxorg/ace/blob/master/lib/ace/layer/gutter.js#L79
• loop.schedule() https://github.com/ajaxorg/ace/blob/master/lib/ace/renderloop.js#L72

So I guess the action of setAnnotations was ignored when paste yaml string to the editor is pending. After putting editor.renderer.setAnnotations() in the setTimeout function, It works fluently.