NextJS React Component does not respect div height

[Ezzahhh]

As I understand it, it is best to set the div containing the code editor to control the overall height of the editor and then to set the style within the editor. However, with NextJS I cannot get it to respect the div's height and it will not limit its own height.

Please see this sandbox: https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-x8evko?file=/pages/index.js

index.js in the sandbox demonstrates that setting the height to "100px" in the containing div is not respected by the editor. index2.js is my attempt at setting it within the editor, which does limit the height, but then pasting into the editor causes weird behaviour. The cursor does not line up to the pasted content.

[jaywcjlove]

@Ezzahhh https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-ww4mvm?file=/pages/index.js:4521-4964

<CodeEditor
  value={code}
  language="sol"
  placeholder="Please enter JS code."
  onChange={(evn) => setCode(evn.target.value)}
  padding={15}
  style={{
    overflow: "auto",
    fontSize: 12,
+    height: 100,
    backgroundColor: "#f5f5f5",
    fontFamily:
      "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
  }}
/>

[Ezzahhh]

@Ezzahhh https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-ww4mvm?file=/pages/index.js:4521-4964

<CodeEditor

  value={code}

  language="sol"

  placeholder="Please enter JS code."

  onChange={(evn) => setCode(evn.target.value)}

  padding={15}

  style={{

    overflow: "auto",

    fontSize: 12,

+    height: 100,

    backgroundColor: "#f5f5f5",

    fontFamily:

      "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"

  }}

/>

I did try this and it does reduce the height. However try pasting something large and you get a weird behaviour where the cursor does not sit where the text actually is.

[jaywcjlove]

- <div style={{ height: "100px" }}>
+ <div style={{ height: "100px", overflow: "auto" }}>
  <CodeEditor
    value={code}
    language="sol"
    placeholder="Please enter JS code."
    onChange={(evn) => setCode(evn.target.value)}
    padding={15}
    style={{
-      overflow: "auto",
      fontSize: 12,
      backgroundColor: "#f5f5f5",
      fontFamily:
        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
    }}
  />
</div>

@Ezzahhh https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-ww4mvm?file=/pages/index.js:4483-4942

[Ezzahhh]

- <div style={{ height: "100px" }}>
+ <div style={{ height: "100px", overflow: "auto" }}>
  <CodeEditor
    value={code}
    language="sol"
    placeholder="Please enter JS code."
    onChange={(evn) => setCode(evn.target.value)}
    padding={15}
    style={{
-      overflow: "auto",
      fontSize: 12,
      backgroundColor: "#f5f5f5",
      fontFamily:
        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
    }}
  />
</div>

@Ezzahhh https://codesandbox.io/s/react-textarea-code-editor-example-nextjs-forked-ww4mvm?file=/pages/index.js:4483-4942

Wow nice! I didn't pay close enough attention earlier. This solves it for me. Thank you very much