[URGENT] Line level comment box not displayed for file type html or js

[seemantTUI]

I am encountering an issue where comments associated with html or js files disappear after refreshing the page. Here’s the context:

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., text files), everything works fine.
Upon investigating, I discovered that the problem lies in how file.content is rendered for html or js files. Since these file types often contain executable or interpretable code (e.g., <script> tags or inline JavaScript), the browser renders the code instead of safely displaying it as plain text. This behavior interferes with the DOM and potentially overwrites or hides the comments.

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

No if the file type is .html or JS:

Adding the comment first time:

on refresh of page no comments is displayed:

Now from the backend i remove rendering of the file.content

The comments are displayed:

Request you to please provide me a solution for this problem. The reason being for my thesis I intend to do an evaluation with students in an HTML course on code ocean at TU Ilmenau. And they will not be able to see my comments.

Best Regards,
Seemant Singh

[seemantTUI]

[update]

The issue is with setting the Annotations, ACE syntax validation has its own annotations which removes/mendles with the custom annotations for our code ocean comments. This is a known issue refer the below github issue.

securingsincity/react-ace#483

To overcome 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();
        });
    }

Request you to please let me know if this fixis correct way to go ahead!

Thank You!