Manual annotations removed by worker

[anderoonies]

Problem

I'm rendering a react-ace component with annotations like this:

<ReactAce
  mode={'javascript'}
  // ...
  annotations={[{row: 0, column: 0, type: 'error', text: 'Some error.'}]}
/>

The manual annotation will show up briefly, then be removed once the worker runs. This gif shows a page refresh. On each page load the annotation shows up, but is then removed.

I've disabled the worker with setOptions={{useWorker: false}}, but this also disables annotations done manually.

Thanks!

[charlesgiroux]

I feel like there should be 2 sets of annotations. The manually added annotations and the ones generated by the mode's parser. I think they currently collide and erase one another...

[anderoonies]

yeah, that's what's happening. i'm not sure if it's possible to have annotations exist outside of the lifecycle of the worker or not.

[mfalade]

I'm facing the same challenge. I want to be able to add custom annotations to the editor, while still preserving the annotations by the worker.

After I set my custom annotations, the worker's annotations override mine. I have seen suggestions to disable the worker like so.

setOptions={{useWorker: false}}

Doing this diables the worker's annotation however so all my linting/syntax highlighting is gone. (not quite what I want)

I want to be able to merge the worker's annotation with my custom annotation.

Can someone suggest how to go about this ?

[Ranjeet-Naidu]

Hi , I'm in a similar situation, unable to add custom error messages. Any solution?

[bkemper]

Instead of using the annotations prop, I manually setAnnotations.

const Editor = ({ annotations: customAnnotations = [], value }) => {
  const [annotations, setAnnotations] = useState([]);
  const [editor, setEditor] = useState();

  const nextAnnotations = [
    ...annotations.filter(({ custom }) => !custom),  // annotations by worker
    ...customAnnotations.map((annotation) => ({ ...annotation, custom: true })) // flag for exclusion
  ];

  useEffect(() => {
    if (editor) {
      editor.getSession().setAnnotations(nextAnnotations);
    }
  }, [editor, JSON.stringify(nextAnnotations)]);

  return (
    <ReactAce
      mode="html"
      onLoad={setEditor}
      onValidate={setAnnotations}
      setOptions={{ useWorker: true }}
      value={value}
   />
}