react-codemirror icon indicating copy to clipboard operation
react-codemirror copied to clipboard

Add custom lint error marker on react-codemirror

Open venkat-subramani opened this issue 2 years ago • 5 comments

I want to display lint errors which I receive from external API. Error information I receive from the API is 1. Line number 2. Error description

I would like to add a custom marker with tooltip in the codemirror gutter area. I've found this answer on stackoverflow https://stackoverflow.com/a/72219083 but unable to implement on react-codemirror.

venkat-subramani avatar Oct 06 '22 05:10 venkat-subramani

@venkat-subramani This is not a codemirror 6 solution.

https://codemirror.net/docs/ref/#lint

jaywcjlove avatar Oct 06 '22 10:10 jaywcjlove

https://discuss.codemirror.net/t/yaml-linter-for-uiw-react-codemirror-or-codemirror-v6/4976

jaywcjlove avatar Oct 06 '22 10:10 jaywcjlove

Example: Linter: https://codemirror.net/examples/lint/

jaywcjlove avatar Oct 06 '22 10:10 jaywcjlove

@jaywcjlove Thanks for your response. I'm able to use linter on code area now. Is it possible to display error marker on line numbers in gutter area ?

venkat-subramani avatar Oct 07 '22 05:10 venkat-subramani

@venkat-subramani https://codemirror.net/examples/gutter/

jaywcjlove avatar Oct 07 '22 14:10 jaywcjlove

Adding lintGutter() in the extensions list added the error marking for my lints.

venkat-subramani avatar Oct 10 '22 06:10 venkat-subramani

@venkat-subramani I'm sorry to reopen this thread but could you help with an example of how you used js-yaml with react-codemirror for the lint source? I'm having trouble according to the link provided

AndrewThian avatar Oct 15 '22 00:10 AndrewThian