readOnly doesn't always work on chromiums web browsers

[QuentinFayt]

Hi !

First of all, we are working in a tree shaking VueJs environnement with Vite 5.3.4 and we are trying to use the library to have a simple way to display (thus not edit) JSON data.

In my implementation and tests, I used Firefox and everything seemed perfect, but I did other tests on Brave and my n+1 did some on Chrome, and the readOnly didn't work there; we could still edit the JSONs in the views.

One of my coworkers did some tests as well, and if we use the standalone import of JSONEditor, the readOnly seems to be working as intended.

// Readonly doesn't works in Chrome (works well in Firefox)
import { JSONEditor } from 'vanilla-jsoneditor';

 const editor = new JSONEditor({
        target: document.getElementById('jsoneditor'),
        props: {
            content,
            mainMenuBar: false,
            statusBar:false,
            navigationBar: false,
            readOnly:true,
            mode:'text',
        },
    });

// Readonly works in all tested browsers
import { JSONEditor } from 'vanilla-jsoneditor/standalone.js';

 const editor = new JSONEditor({
        target: document.getElementById('jsoneditor'),
        props: {
            content,
            mainMenuBar: false,
            statusBar:false,
            navigationBar: false,
            readOnly:true,
            mode:'text',
        },
    });

[josdejong]

Thanks for reporting, I can indeed reproduce your issue on Chrome:

https://stackblitz.com/edit/vitejs-vite-6qxz6c?file=main.js&terminal=dev

I do not yet have an idea what could cause this issue, will look into it. Help debugging this would be welcome.

[josdejong]

Ok I have some clue:

• vanilla-jsoneditor/standalone.js has all its dependencies (like codemirror) embedded, and vanilla-jsoneditor not. The latter imports the dependencies on the fly, and the dependencies are defined in package.json using inexact version numbers. So: vanilla-jsoneditor can use newer bugfix versions of its dependencies, and vanilla-jsoneditor/standalone.js can't.
• on my machine using the latest dev branch, the issue happens for vanilla-jsoneditor/standalone.js too. On my machine, I've installed the latest versions of the dependencies.

Conclusion: one or multiple of the latest versions of the dependencies, after the versions uses in v0.23.7, introduces an issue with the readOnly option.

Workaround: define exact versions of the dependencies as of v0.23.7 in your own project.

Next steps: figure out which dependency and which version of it introduces the issue. Then figure out if it is a bug in the dependency or in usage of it, and if needed report a bug at the affected dependency.

[QuentinFayt]

We tried to isolate the dependency that could cause the issue and we narrowed it down to @codemirror/view.
If we set it to 6.27.0 it seems to work perfectly on chrome aswell.
Apparently codemirror uses has a new feature since 6.28

Well, thanks for the look!

[josdejong]

Ah, that helps a lot, thanks for debugging this! That explains it.

In @codemirror/view@6.28.1 I see a bugfix "Make sure EditorView.editable is respected when EditContext is used.". Now, svelte-jsoneditor uses EditorState.readOnly, maybe there is a similar issue with that in this new EditContext used by codemirror on Chrome.

I'll try to make a small codemirror only demo to verify that and if so report the bug.

[josdejong]

I've reported the issue at the CodeMirror repo: codemirror/dev#1411

[josdejong]

This issue has been fixed in @codemirror/view@6.29.0, can you give that a try?

[QuentinFayt]

It is indeed fixed! Thanks for the reactivity 😄

[josdejong]

👍