ACE editor annotations removes custome annotations for Code Ocean comments on Request for Comments page

[seemantTUI]

Hello,

Here’s the context to this issue:

Each file has an editable viewer (#commentitor.editor) where its content (file.content) is displayed alongside an option to add comments.
When adding a comment, everything works as expected: the comment is displayed, and it’s stored in the backend correctly.
After refreshing the page, comments are fetched from the backend and briefly appear, but they disappear after the file.content is rendered.
This issue only occurs for files of type html or js. For other file types (e.g., python), everything works fine.

Issue, ACE has syntax validation for some files a/c to their official website currently for JavaScript/CoffeeScript/CSS/XQuery.

When the syntax validation in ACE happens it sets its own annotations and somehow internally does not allow to set custom annotations. In our case we set custom annotations for code ocean comments. Therefore the comment box on the editor on Request for comments page comes for a fraction of second and then vanishes.

A work around for this is to set useWorker to false which disables the syntax validation for ACE editor.

    currentEditor.getSession().setOption("useWorker", false);

or to over come this I added a flag to our custom annotations and seperate it from the ACE annotations and then push them together as annotations by having an event Listener on change of annotation refer to the below code .

      function setAnnotations(editor, fileid) {
        const session = editor.getSession();
        let customAnnotations = [];
        $.ajax({
            dataType: 'json',
            method: 'GET',
            url: Routes.comments_path(),
            data: { file_id: fileid }
        }).done(function (response) {
            $.each(response, function (index, comment) {
                comment.className = 'code-ocean_comment';
                comment.type = 'info'; // Required for proper rendering

                comment.custom = true;
            });

            customAnnotations.length = 0; // Clear previous custom annotations
            customAnnotations.push(...response);
            mergeAnnotations();
        });

        function mergeAnnotations() {
            let existingAnnotations = session.getAnnotations().filter(ann => !ann.custom);
            session.setAnnotations([...existingAnnotations, ...customAnnotations]);
        }

        // Ensure annotations are not overridden
        session.on('changeAnnotation', function () {
            mergeAnnotations();
        });
    }

For example: This is how comments are displayed if the file type is .py:

Now if the file type is .html or JS:

Adding the comment first time:

on refresh of page no comments is displayed:

Best Regards,
Seemant Singh