In my React application, I utilize react-ace to build a CSS text editor.
The implementation looks something like this...
import Ace from 'react-ace'
...
<Ace
mode="css"
value={value}
onChange={onValueChange}
onValidate={onValidate}
...
/>
...
It functions effectively by highlighting CSS syntax errors and warnings. The onValidate feature provides the error/warning "annotations" data structure.
However, there arises a situation where I need to run the same validator outside of this component in another part of the application. Essentially, I must pass the content within value through the error/warning annotation system without being able to instantiate the react element.
I attempted the following approach:
import { EditSession } from 'brace'; # "brace" is the module-compatible version of the ace editor used by "react-ace"
import 'brace/mode/css';
export const getCssAnnotations = (value)=> {
const editSession = new EditSession(value);
editSession.setMode('ace/mode/css');
const annotations = editSession.getAnnotations();
return annotations;
};
Unfortunately, the function returns empty annotations [] every time! It seems that this method only accesses the annotation setter/getter interface without actually generating the annotations. I am unsure of what triggers the annotations creation process normally.
I have consulted the documentation on Creating a Syntax Highlighter for Ace, but I'm uncertain about the necessity of involving a web worker in this scenario.
Thank you!