Wrong type of container returned from useCodeMirror

[yifanwww]

In the document/README, it says the type of container returned from useCodeMirror is:

container: HTMLDivElement | null | undefined;

However, in the latest version (v4.19.9), the actual type that is exported from the npm package is:

container: HTMLDivElement | undefined;

I checked the source code, and I believe the type in document is right.

---

The source code

// https://github.com/uiwjs/react-codemirror/blob/6968faf74121748c629ab9487d5172beec9de42e/core/src/useCodeMirror.ts#L150

useEffect(() => setContainer(props.container!), [props.container]);

1. In the first render, the value of props.container is actually null which is the initial value of the ref editor in ReactCodeMirror.
   This change triggers a second render, because the new value null is different from the current value undefined.
2. Then in the second render, it can get the HTMLDivElement and pass it to container again, triggering a third render.
3. In the third render, the container finally becomes HTMLDivElement.

During the whole process, the container value is actually undefined -> null -> HTMLDivElement.

[jaywcjlove]

@yifanwww thx! Upgrade v4.19.10

[jaywcjlove]

@yifanwww I haven't solved the problem. I tried to fix the code, but it caused the useCodeMirror hook to fail to update the container, resulting in a rendering failure of the interface.

[yifanwww]

The only thing we can do to fix the issue, I think, is just changing the type.

We cannot change the logic, as the first time the container changes from undefined to null is needed. It can only get the HTMLDivElement instance in the second render.

-    container: editor.current,
+    container: editor.current ? editor.current : undefined,

This change will disable the second render, so in useCodeMirror the container will never get the HTMLDivElement instance.

I don't know how to improve it, I didn't find a better way...

[yifanwww]

Oh maybe we can follow the doc https://github.com/uiwjs/react-codemirror#support-hook

useEffect(() => {
  if (editor.current) {
    setContainer(editor.current);
  }
}, [editor.current]);

In this useEffect, it can get the HTMLDivElement instance in the first render. Because editor is a ref, ref is updated before useEffect.

[jaywcjlove]

I tested it and there are still issues even with multiple state updates within the useCodeMirror hook.