Editable prop not working

[prem-banker]

Hi,

I am using React Codemirror in my next app with tailwind. For some reason, the editable prop (and read only) are not working for me. I am still able to edit the code in the editor. I checked CSS attributes and the contenteditable flag is also changing to false (which is how it seems to be working on the demo home page). Can you help me understand why this might be ?

using new version BTW
"@uiw/react-codemirror": "^4.22.2",

[ianizaguirre]

I have the same issue.

[ianizaguirre]

@prem-banker

The only way i was able to make it work was to do something like this:

helper.ts

import { keymap } from '@codemirror/view';

/**
 * Prevents typing in the editor.
 */
function preventTyping() {
  return true; // Returning true in a command function prevents the action
}

/**
 *  Generates key bindings for alphabetic and numeric characters.
 */
function generateAlphaKeyBindings() {
  const bindings = [];
  // Loop through lowercase and uppercase letters
  for (let i = 0; i < 26; i++) {
    const lowerCase = String.fromCharCode(97 + i); // 'a' starts at ASCII code 97
    const upperCase = String.fromCharCode(65 + i); // 'A' starts at ASCII code 65
    bindings.push({ key: lowerCase, run: preventTyping, preventDefault: true });
    bindings.push({ key: upperCase, run: preventTyping, preventDefault: true });
  }

  // Loop through numeric keys
  for (let i = 0; i < 10; i++) {
    const number = i.toString();
    bindings.push({ key: number, run: preventTyping, preventDefault: true });
  }

  return bindings;
}

/**
 * Custom key handler that prevents all modifications to the editor.
 */
const customKeymap = keymap.of([
  ...generateAlphaKeyBindings(),

  { key: 'Space', run: preventTyping, preventDefault: true },
  { key: 'Enter', run: preventTyping, preventDefault: true },
  { key: 'Backspace', run: preventTyping, preventDefault: true },
  { key: 'Delete', run: preventTyping, preventDefault: true },
  // Add other specific keys or functionalities here
]);

export default customKeymap;

and then I import that object into my file and in the extensions array I add it:

  // Sets up the CodeMirror editor.
  const { setContainer } = useCodeMirror({
    value: jsonData,
    extensions: [
      json(),
      search({ top: true }),
      EditorView.lineWrapping,
      EditorState.readOnly.of(true),
      Prec.highest(EditorView.editable.of(false)),
      customKeymap,                  // <--------------------------- Here
    ],
    theme: 'light',
    height: '100%',
    readOnly: true,
    editable: false,
  });

  return (
    <div className={styles.wrapper}>
      <div
        ref={setContainer}
        style={{
          border: '1px solid #ccc',
          maxHeight: 'calc(100vh - 610px)',
        }}
      />
    </div>
  );

[prem-banker]

@ianizaguirre

Very Creative Workaround !! :) Another work around that was able to make to implement the Editable = false functionality was to do add a cusotm CSS class to the whole div surrounding the code editor.

.no-interaction { pointer-events: none !important; /* Prevent all interactions */ user-select: none !important; /* Prevent text selection */ }

This prevented me from making changes but ruined the UX a bit as user is not able to select/copy the code on their own and also the pointer does not change when you hover over it

[ianizaguirre]

@ianizaguirre

Very Creative Workaround !! :) Another work around that was able to make to implement the Editable = false functionality was to do add a custom CSS class to the whole div surrounding the code editor.

.no-interaction { pointer-events: none !important; /* Prevent all interactions */ user-select: none !important; /* Prevent text selection */ }

This prevented me from making changes but ruined the UX a bit as user is not able to select/copy the code on their own and also the pointer does not change when you hover over it

Nice idea. The keymap way above still allows me to select/copy etc. so maybe that will solve your current problem instead of using the .no-interaction css class.

[jaywcjlove]

@ianizaguirre @prem-banker I can't reproduce the error.

react-codemirror/core/src/getDefaultExtensions.ts

Lines 57 to 62 in e94e34c

	if (editable === false) {
	getExtensions.push(EditorView.editable.of(false));
	}
	if (readOnly) {
	getExtensions.push(EditorState.readOnly.of(true));
	}

The tests are valid and there are no issues.

[nicolasmuller]

I have the same issue (using v4.23.5 version) :(

[jaywcjlove]

@nicolasmuller I didn’t encounter any issues during my testing. Could you provide a reproducible example of the error? I’ll try to help troubleshoot the problem.