CodeMirror loses height when removed and re-added to the DOM

[kimfucious]

If I create a CodeMirror instance and set it with a height, it will initially show with the correct height.

If the component with the CodeMirror is removed from and returned to the DOM via conditional rendering, the height is lost.

I've created a sandbox here to demonstrate.

Steps to reproduce:

1. Load sandbox
2. Note how the height is 500px (this is CodeMirror)
3. Edit text (press the 'o' key and type some stuff)
4. Click Show Diffs button (this opens CodeMirrorMerge)
5. Abandon, Save, or cancel (back to CodeMirror)
6. Note how the height is no longer set to 500px.

I've read that there is a refresh and/or an autorefresh cm command that might address this issue, but you probably know better than I do.

[jaywcjlove]

I can't view your example

[jaywcjlove]

<CodeMirrorMerge
  orientation={orientation}
  revertControls={revertControls}
  collapseUnchanged={collapseUnchanged}
  highlightChanges={highlightChanges}
  gutter={gutter}
+  style={{ height: 300, overflow: 'auto' }}
  theme={theme}
 >
  <Original value={originalCode} extensions={[langs.javascript()]} />
  <Modified
    value={modifiedCode}
    extensions={[langs.javascript(), EditorView.editable.of(false), EditorState.readOnly.of(true)]}
  />
</CodeMirrorMerge>

[kimfucious]

@jaywcjlove.

Sorry, try this link.

[jaywcjlove]

@kimfucious height={"500px !important"}

[kimfucious]

Thanks for that, @jaywcjlove.

I did try it, and unfortunately the Vim panel placement gets lost.

--NORMAL-- should be at the bottom of the editor.

[kimfucious]

Hi @jaywcjlove,

I'm not sure that you're interested, but the highlighted line in the HTML code below is what controls the position of the Vim status bar.

No amount of fiddling seems to reset this except for a full browser refresh.

If I do edit the HTML with dev tools like the below, if does move the status bar down:

<div class="cm-panels cm-panels-bottom" style="top: 500px;">

This means that I can also update the cm-panels-bottom CSS class to adjust the top; however, that affects every instance of CodeMirror across the app.

I can't see a way to control this here:

<CodeMirror
    autoFocus
    basicSetup={{
        foldGutter: false,
        highlightActiveLine: false,
    }}
    value={state.draftActiveSceneText}
    theme={isDark ? "dark" : solarizedLight}
    height={height}
    width={`calc(36em + 74px)`}
    extensions={[
        vim({ status: true }), // <= can't do anything here
        markdown(),
        EditorView.lineWrapping,
        EditorView.contentAttributes.of({ spellcheck: "true" }),
    ]}
    onChange={onChange}
    style={{ fontSize: editorFontSize }}
/>

That said, these are workarounds. I think the real issue is that bottom is somehow lost or changed so that the status bar is moved up, even when the height of the CodeMirror editor is pegged with an !important setting.

[jaywcjlove]

I don't understand exactly what you want to do in your description.
@kimfucious

[kimfucious]

Hi @jaywcjlove,

Sorry for the confusion.

While the height of the CodeMirror editor is preserved when using height with !important, the Vim status bar does not render in the correct place when returning to CodeMirror.

Follow these steps to see:

1. Open the sandbox.
2. When it loads, press the 'o' key and add some edits.
3. Click the Show Diffs button.
4. Click cancel, abandon, or save.
5. See how the Vim status bar is not at the bottom of the CodeMirror editor.

[jaywcjlove]

@kimfucious Upgrade v4.21.3

[kimfucious]

@jaywcjlove thank you very much; you are a 🌟!