React-ace: can't set annotations

[emmaccacca]

Problem

I tried to set annotations in my editor. However, it didn't work. Below is my Code:

Sample code to reproduce your issue

References

Progress on: #

[eminx]

Do you have any error, message or so appearing or??

[serhii-yakymuk]

I have the same issue, annotations just aren't showing up, without any errors in console.
I've tried to use { $useWorker: false } option, nothing changed.
I also tried to save annotations array in state and modify it, so componentWillReceiveProps in editor will trigger, still no annotations are visible.

[jvilk]

Can confirm: Annotations do not appear, regardless of settings.

I had to manually interact with the editor post-rendering, which works:

  public componentDidMount() {
    this._updateAceEditor();
  }

  public componentDidUpdate() {
    this._updateAceEditor();
  }

  private _updateAceEditor() {
    const editor = this.refs.aceEditor.editor;
    const annotations = this._getAnnotations();
    editor.getSession().setAnnotations(annotations);
  }

[xmeow]

Same issue here, for now I can only insert by:

this.editor.getSession().setAnnotations([{
            row: 1,
            column: 0,
            text: "Strange error",
            type: "error" // also warning and information
        }]);

[eminx]

You have to import the brace files at the beginning of your file for annotations first. Like this:

import brace from 'brace';
import 'brace/mode/javascript';
import 'brace/mode/json';
import 'brace/mode/xml';

[fiws]

annotations and markers don't seem to be reactive.

I can set them at startup, but they never update the editor

[jotak]

Same here: the annotations are set when rendering the AceEditor for the first time after mounting. But after that, they won't get updated. I work it around by interacting directly with ace editor with an ObjectRef.
No error message.

Interesting fact: if I _remove_ an annotation, it's correctly updated. If I _add_ one, it isn't.

[jotak]

Investigating further, I tried to create a reproducer but it turned out to be difficult, cause indeed it was working well if I was just adding annotations without other changes.

I finally could write this reproducer: https://gist.github.com/jotak/7d3398f25182ba58d75bf6f82a1ae1b0

The bug comes only when we're adding annotations AND changing text. If text is unchanged, the annotations are fine.
Digging further it's related to the session management in ace. I'm not totally sure about that, but I think when the text is changed, a new session is created and the annotation change event fired somehow misses its session.

So my suggestion is to change the order of processing in componentWillReceiveProps, to process first with the editor value update and only then with the other updates that are tied to the session.

[Fredxingxing]

try this, work for me , set annotations in ace's afterRender hook

 useEffect(() => {
        const { editor } = editorEl.current || {};
        if (annotations.length && editor) {
            editor.renderer.once('afterRender').then(() => {
                editor.getSession().setAnnotations(annotations);
            });
        }
    }, [JSON.stringify(annotations)]);