Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Editor ref not work on ssr
See original GitHub issueEditor ref not return method propely, sorry i cannot attach my code to codepen but my app server side rendering
Here my code
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import dynamic from 'next/dynamic';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Bookmark from '@material-ui/icons/Bookmark';
import Person from '@material-ui/icons/Person';
import Memory from '@material-ui/icons/Memory';
import Time from '@material-ui/icons/AccessTime';
import MenuItem from '@material-ui/core/MenuItem';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import Paper from '@material-ui/core/Paper';
const ReactQuill = dynamic(import('react-quill'))
import 'react-quill/dist/quill.snow.css';
class CreatePostView extends Component {
state = {
content: ''
}
editorRef = null
editorOptions = {
modules: {
toolbar: {
container: [
[{'header': [1, 2, 3, 4, 5, 6, false]}, 'bold', 'italic', 'underline', 'strike'],
[{'align': []}, {'list': 'ordered'}, {'list': 'bullet'}],
['link', 'blockquote', 'code-block'],
['image', 'video'],
[{'color': []}, 'clean']
],
handlers: {
'image' : (e) => {
this.uploadImage(e)
}
}
}
}
}
uploadImage = (e) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = () => {
const file = input.files[0];
if (/^image\//.test(file.type)) {
console.log(file)
console.log(this.editorRef)
} else {
console.log('You could only upload images.');
}
}
}
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<Typography className={classes.headline} variant="display1">Buat post baru</Typography>
<Typography className={classes.subHeadline} variant="body1" gutterBottom>Share your post, it's free</Typography>
<Grid container spacing={16}>
<Grid item xs={12} md={8}>
<TextField fullWidth
label="Judul"
placeholder="Sebuah judul"
InputLabelProps={{
shrink: true
}}
className={classes.input}
/>
<TextField fullWidth
select
label="Kategori"
className={classes.input}
value="wkkwwland"
>
<MenuItem key="1" value="wkkwwland">wkkwland</MenuItem>
<MenuItem key="2" value="djdjdj">djdjdjdj</MenuItem>
</TextField>
<TextField fullWidth
label="Tag"
placeholder="Pisahkan dengan koma"
InputLabelProps={{
shrink: true
}}
className={classes.input}
/>
<ReactQuill value={this.props.getContent()}
onChange={this.props.handleContent}
modules={this.editorOptions.modules}
ref={(el) => this.editorRef = el}
/>
</Grid>
<Grid item xs={12} md={4}>
<Paper className={classes.sidebarItem}>
<Typography variant="title" className={classes.sidebarItemTitle}>Post detail</Typography>
<List>
<ListItem>
<ListItemIcon>
<Bookmark/>
</ListItemIcon>
<ListItemText primary={
<Typography variant="subheading">
Status : <div className={classes.postDetailValue}>{this.props.post_details.status}</div>
</Typography>
}
/>
</ListItem>
<ListItem>
<ListItemIcon>
<Time/>
</ListItemIcon>
<ListItemText primary={
<Typography variant="subheading">
Published : <div className={classes.postDetailValue}>{this.props.post_details.published_time ? this.props.post_details.published_time : new Date().toLocaleString()}</div>
</Typography>
}
/>
</ListItem>
<ListItem>
<ListItemIcon>
<Memory/>
</ListItemIcon>
<ListItemText primary={
<Typography variant="subheading">
Autosave : <div className={classes.postDetailValue}>{this.props.post_details.autosave ? 'ON' : 'OFF'}</div>
</Typography>
}
/>
</ListItem>
<ListItem>
<ListItemIcon>
<Person/>
</ListItemIcon>
<ListItemText primary={
<Typography variant="subheading">
Author : <div className={classes.postDetailValue}>{this.props.post_details.author}</div>
</Typography>
}
/>
</ListItem>
</List>
<div className={classes.sidebarFooterAction}>
<Grid container>
<Grid item xs={6}>
<Button variant="contained" color="primary">Simpan draft</Button>
</Grid>
<Grid container item xs={6} direction="column" alignItems="flex-end">
<Button onClick={() => console.log(ReactQuill.Toolbar)} variant="contained" color="primary">Publish</Button>
</Grid>
</Grid>
</div>
</Paper>
<Paper className={classes.sidebarItem}>
<Typography variant="title" className={classes.sidebarItemTitle}>Other meta</Typography>
<div className={classes.otherMetaForm}>
<div onClick={this.props.pickFeaturedImage} className={classes.featuredImage} id="featured_image">
<Typography id="featured_image_text" variant="title" className={classes.featuredImageText}>Featured image</Typography>
<input onChange={this.props.handleFeaturedImage} type="file" id="featured_image_picker" accept="image/*" style={{ display: 'none'}}/>
</div>
<TextField fullWidth
label="Slug"
placeholder="Kosongkan jika ingin default"
InputLabelProps={{
shrink: true
}}
className={classes.input}
/>
<TextField id="excerpt"
label="Deskripsi"
multiline
fullWidth
variant="outlined"
rows={4}
className={classes.input}
/>
</div>
</Paper>
</Grid>
</Grid>
</div>
)
}
}
const styles = theme => ({
root: {
margin: theme.spacing.unit,
[theme.breakpoints.up('md')]: {
margin: 20
}
},
headline: {
fontWeight: 'bold',
marginTop: 20,
},
subHeadline: {
marginBottom: 30,
paddingLeft: 2
},
featuredImage: {
marginTop: 20,
borderRadius: 6,
height: 150,
border: 'solid 2px #6200EE',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
marginBottom: 20,
textAlign: 'center',
},
featuredImageText: {
marginTop: 60
},
input: {
marginBottom: 20 ,
},
sidebarItem: {
marginBottom: theme.spacing.unit * 2
},
sidebarItemTitle: {
padding: 20,
paddingBottom: 0
},
sidebarFooterAction: {
padding: 20,
paddingTop: 0
},
otherMetaForm: {
padding: 20,
paddingTop: 0,
paddingBottom: 0
},
postDetailValue: {
textDecoration: 'underline',
fontWeight: 'bold',
display: 'inline'
}
})
export default withStyles(styles)(CreatePostView)
When i trying this.editorRef.getEditor() the error throwing “getEditor not a function”
Issue Analytics
- State:
- Created 5 years ago
- Comments:8
Top Results From Across the Web
Ref not working with SSR · Issue #150 - GitHub
I tried my code in a regular React app and it works fine, but when I use SSR it's not working. console.log(mdEditor.current) shows...
Read more >`forwardRef` error when dynamically importing a module in ...
Not sure if I'm missing something. I'm doing: const Editor = dynamic(() => import(" ...
Read more >SSR | TanStack Query Docs
Create a new QueryClient instance inside of your app, and on an instance ref (or in React state). This ensures that data is...
Read more >Basic Features: Fast Refresh - Next.js
Next.js' Fast Refresh is a new hot reloading experience that gives you instantaneous feedback on edits made to your React components.
Read more >Composables - Vue.js
In the context of Vue applications, a "composable" is a function that ... A composable can accept ref arguments even if it doesn't...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
have you found a work on this already? i’ve also wasted days trying to come up with a solution. Thanks
Did it work? I’ve been cracking my head the entire day and still can’t get it to work with Next even after setting ssr to false. My ref is never a Quill object