Boolean options won't update to false

[martinavesela]

When I set CodeMirror options readOnly on true and then update it to false it doesn't update and the editor stays locked. I'm passing the value in as a react prop.

I assume that it doesn't get through the if in index.js on line 49.

[ps173]

Can you elaborate your problem by sending some code-example. It will be quite helpful to understand it

[jaywcjlove]

@martinavesela @ps173

⚠️ instead of simply true https://codemirror.net/doc/manual.html#config

readOnly: boolean|string

This disables editing of the editor content by the user. If the special value nocursor is given (instead of simply true), focusing of the editor is also disallowed.

[martinavesela]

My application contains lessons for the user to code in the CodeMirror editors. Lesson has a parameter for readOnly for specific editors. If one lesson was set to readOnly = true, then when loading a different lesson that has readOnly = false, it won't overwrite the true, so it stays locked. I fixed it by changing if clause in index.js on line 49 (now 50) from:

if (opt[name] && JSON.stringify(opt[name])) {
  instance.setOption(name, opt[name]);
}

to:

if ((opt[name] || opt[name] === false) && JSON.stringify(opt[name])) {
  instance.setOption(name, opt[name]);
}

Here is a snippet of my code:

export const ApplicationPage: React.FC = () => {
  const [lesson, setLesson] = useState<{ [x: string]: string } | null>(null);
  const fetchLesson = (_userId: number, _lessonId: number) => {
    const getPromiseLesson = async () => {
      const l = await window.fetch("/lesson/" + _lessonId, {
        method: "GET"
      }).then(response => response.json())
      setLesson(l)
      const getPromiseSave = async () => {
        const s = await window.fetch("/latest-save/" + _userId + "/" + _lessonId, {
          method: "GET"
        }).then(response => response.json())
        if (s != "0") {
          setComment("")
          setLesson(({...l, ...s}));
          setJavaOut(s["j_out"])
          setPythonOut(s["p_out"])
        }
      }
      const promiseSave = getPromiseSave()
      promiseSave.catch()
    };
    const promiseLesson = getPromiseLesson()
    promiseLesson.catch()
  };
  useEffect(() => {
      fetchLesson(userId, lessonId)
    }, [userId, lessonId]
  );
  return (
    <JavaApp lesson={lesson}/>
  )
}

interface Props {
  lesson: { [x: string]: string }
}

const _JavaApp: React.ForwardRefRenderFunction<JavaAppHandle, Props> = ({lesson}: Props, ref) => {
  let javaTest = useRef<CodeMirror>(null);
  return (
    <CodeMirror
      ref={javaTest}
      value={lesson["j_test"]}
      options={{
        theme: "darcula",
        keyMap: "sublime",
        mode: "java",
        readOnly: lesson["j_test_lock"]
      }}
    />
  )
}