Feature request: Support read-only mode for CodeEditor

[andreifloricel]

Tell us how you think we can improve Sandpack

In some cases it would be useful to control the editability of the code editor.
As of now (0.12.0), we can use either a CodeEditor or a CodeViewer.

Feature request #97 is somewhat related to this (file-based editability), but this feature is easier to implement because the underlying CodeMirror already supports a "ReadOnly" property.

Packages affected

• sandpack-client
• sandpack-react

How would your idea work?

Add a new readOnly CodeEditor prop (default: false) which is then passed to the underlying CodeMirror which already supports this property.

When/If #97 is implemened, it would just mean that the editability of every bundled file will default to the current CodeEditor editability.

[andreifloricel]

If it helps, I am ready to implement it myself.

[danilowoz]

Hey @andreifloricel! I would totally encourage you to implement it by yourself, and I would be more than happy to guide you through it. But unfortunately, Sandpack is in the middle of a relicensing process, and we can't accept core contributions for the time being.

So, I'll try to spend some time on this, maybe during this week. The CodeMirror component already accepts a read-only mode, so it should not be hard to implement it. This is what I have in mind:

• SandpackCodeEditor accepts read-only mode;
• Be able to set read-only by file Support read-only mode by file #97;
• Figure out a visual element saying that a file is read-only;

Please, let me know if you have suggestions or requests related to it.

[andreifloricel]

Hi @danilowoz,

I agree with the first 2 items, not sure I understand the 3. one (...Figure out a visual element saying that a file is read-only...).
As you said, theoretically it shouldn't be hard to implement it both cases as:

• CodeMirror already accepts a read-only
• SandpackCodeEditor could just pass a global read-only prop
• file-based read-only should be easy to achieve by checking the activePath against the bundled files configuration (the SandpackBundlerFile would need a new readOnly property)