React-styleguidist: Code editor not updated on navigation between markdown pages

[LindenHolt-Whittaker]

Current behavior

The code editor (``` js <example code> ```) will not update upon page navigation when:
-using .md files in the style guide (navigating from one .md file to another),
-the code editor is in the same place in the DOM (for example, adding another element above it on one page but not another will cause the editor to be re-rendered, preventing this bug)

To reproduce

Example of bug.
After cloning and installing the packages for this repo, navigate to the basic example directory (cd examples/basic/) and run (npx styleguidist server).

Steps to reproduce:
Navigate to the "Test 1" page within the "Read me (.md files)" area of the style guide. Observe the 'View Code' field.
Navigate to "Test 2"/"Test 3"/"Test 4" and observe that the 'View Code' field is not updated.
Refresh page and observe that the 'View Code' field is now updated and relevant to the current page.

Expected behavior

I expect the code editor to be updated to the relevant page upon navigation.

[sapegin]

Could you please try in the next branch? I've basically replaced the whole thing there ;-)

[LindenHolt-Whittaker]

I've just replicated the same test files in the next branch, and the bug is still there I'm afraid 😬

[sapegin]

Could you please commit them somewhere? Shouldn't be hard to fix.

[LindenHolt-Whittaker]

https://github.com/LindenHolt-Whittaker/styleguidist-bug-reproduction/tree/next

I pushed to a next branch in my repo

[sapegin]

Am I missing something? It's in the next branch.

[LindenHolt-Whittaker]

Hey sapegin, I'm not sure where you're testing this, but in my examples/basic directory, and in both my master and next branches, I have 4 test files and I can still replicate this issue? I see that you still have the same headers (Read me (.md files)/Components (bad work around)) so I don't understand where you are testing this?

[sapegin]

Looks like you forget to run Babel (npm run compile) after switching to the next branch. Look at the extra whitespace below the "View code" button on my gif.

[LindenHolt-Whittaker]

I have tried running npm run compile from the root directory and then npm install from the /basic directory as well as trying to run npm install from root, and I could not see the expected changes (whitespace under 'VIEW CODE'/bug fixed)

Any idea what I'm missing?

[sapegin]

Yeah, try to run in the root repo folder:

npm run compile
npm start

Anything you do in the examples/basic folder will use Styleguidist version defined in examples/basic/package.json.

[LindenHolt-Whittaker]

I can see the expected changes and you are correct, the next branch fixes this bug!

Thanks for your help. I assume the next branch isn't safe to use in production?

[sapegin]

It's quite far from ready but you can try to use it of course. Or to fix an issue in master if that's urgent for you.

[slangberg]

Is there a temporary fix in the current version, perhaps replacing a guide component ?

[informa]

I overrode the component in the config

Editor: path.join(
      rootPath,
      "components/Editor/Editor"
    )

and broght in some state from v9

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Styled from 'rsg-components/Styled';
import debounce from 'lodash/debounce';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/mode/jsx/jsx';

const UPDATE_DELAY = 10;

const styles = ({ fontFamily, space, fontSize }) => ({
    root: {
        '& .CodeMirror': {
            isolate: false,
            fontFamily: fontFamily.monospace,
            height: 'auto',
            padding: [[space[1], space[2]]],
            fontSize: fontSize.small,
        },
        '& .CodeMirror pre': {
            isolate: false,
            padding: 0,
        },
        '& .CodeMirror-scroll': {
            isolate: false,
            height: 'auto',
            overflowY: 'hidden',
            overflowX: 'auto',
        },
        '& .cm-error': {
            isolate: false,
            background: 'none',
        },
    },
});

export class Editor extends Component {
    static propTypes = {
        code: PropTypes.string.isRequired,
        onChange: PropTypes.func,
        editorConfig: PropTypes.object,
        classes: PropTypes.object.isRequired,
    };
    static contextTypes = {
        config: PropTypes.object.isRequired,
    };

    constructor(props) {
    super(props);
    this.handleChange = debounce(this.handleChange.bind(this), UPDATE_DELAY);
    //v9.0.0
    this.state = {
      code: props.code,
      prevCode: props.code 
    }
  }

  //v9.0.0
  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.prevCode !== nextProps.code) {
      return {
        prevCode: nextProps.code,
        code: nextProps.code
      };
    }
    return null;
  }

  //v9.0.0
    shouldComponentUpdate(nextProps, nextState) {
        return nextState.code !== this.state.code;
    }

    getEditorConfig(props) {
        return {
            ...this.context.config.editorConfig,
            ...props.editorConfig,
        };
    }

    handleChange(editor, metadata, newCode) {
    const { onChange } = this.props;
    //v9.0.0 (this.setState({ code: newCode });)
    this.setState({ code: newCode });
        if (onChange) {
      onChange(newCode);
        }
    }

    render() {
    const { classes } = this.props;
        return (
            <CodeMirror
        className={classes.root}
        //v9.0.0 (value={this.state.code})
                value={this.state.code}
                onChange={this.handleChange}
                options={this.getEditorConfig(this.props)}
            />
        );
    }
}

export default Styled(styles)(Editor);

Which works well, but when I am making a change in the editor, the cursor jumps to the end of the code snippet.

I think the lifecycle method causes a re-render.

Not sure why this isn't occuring in v9?

[stale[bot]]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.