Manual annotations removed by worker

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!

[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}
   />
}

[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…