Closed LindenHolt-Whittaker closed 5 years ago
Could you please try in the next
branch? I've basically replaced the whole thing there ;-)
I've just replicated the same test files in the next
branch, and the bug is still there I'm afraid 😬
Could you please commit them somewhere? Shouldn't be hard to fix.
https://github.com/LindenHolt-Whittaker/styleguidist-bug-reproduction/tree/next
I pushed to a next
branch in my repo
Am I missing something? It's in the next
branch.
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?
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.
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?
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
.
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?
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.
Is there a temporary fix in the current version, perhaps replacing a guide component ?
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?
😴 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.
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.