Fix editable CodeBlock

[laurakwhit]

Description & motivation 💭

Sets CodeMirror EditorView.editable based on editable prop in CodeBlock component in addition to EditorState.readOnly.

Screenshots (if applicable) 📸

Design Considerations 🎨

Testing 🧪

How was this tested 👻

• Manual testing
• E2E tests added
• Unit tests added

Steps for others to test: 🚶🏽‍♂️🚶🏽‍♀️

Checklists

Draft Checklist

Merge Checklist

Issue(s) closed

Docs

Any docs updates needed?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
holocene	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 26, 2024 9:15pm

[Alex-Tideman]

Kinda confused by this, is this a bug in CodeMirror? We shouldn't need two configurations to make it readOnly.

Also not seeing this same behavior on OSS. Do we just need to set this on Cloud?

[rossedfort]

Kinda confused by this, is this a bug in CodeMirror? We shouldn't need two configurations to make it readOnly.

Also not seeing this same behavior on OSS. Do we just need to set this on Cloud?

I think it was a bug in CodeMirror codemirror/dev#1411

Also, it appears readonly and editable are actually 2 different things according to CodeMirror. If you look at a Holocene preview link before the bug was introduced, notice you can click inside the CodeBlock to drop a cursor, but you can't type/delete anything. This was when we were just doing EditorState.readOnly.of(!editable). If you look at the Holocene preview link for this PR, notice you can't even drop a cursor in the CodeBlock.

We probably could just use EditorView.editable.of(editable) instead of EditorState.readOnly.of(!editable), but I think this fine.