adds support for true live preview with new input event

package.json

@@ -13,7 +13,7 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "hoek": "^4.2.1",
-    "storyblok-js-client": "^1.0.7",
+    "storyblok-js-client": "^1.0.13",
     "storyblok-react": "^0.0.4"
   },
   "devDependencies": {}

pages/blog/detail.js

@@ -6,30 +6,40 @@ import SbEditable from 'storyblok-react'
 import marked from 'marked'
 
 export default class extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {pageContent: props.page.data.story.content}
+  }
+
   static async getInitialProps({ asPath, query }) {
     StoryblokService.setQuery(query)
 
+    let [page, settings] = await Promise.all([
+      StoryblokService.get(`cdn/stories${asPath}`),
+      StoryblokService.get(`cdn/stories/${query.language}/settings`)
+    ])
+
     return {
-      page: await StoryblokService.get(`cdn/stories${asPath}`),
-      settings: await StoryblokService.get(`cdn/stories/${query.language}/settings`)
+      page,
+      settings
     }
   }
 
   componentDidMount() {
-    StoryblokService.initEditor()
+    StoryblokService.initEditor(this)
   }
 
   body() {
-    let rawMarkup = marked(this.props.page.data.story.content.body)
+    let rawMarkup = marked(this.state.pageContent.body)
     return { __html:  rawMarkup}
   }
 
   render() {
     return (
       <Layout settings={this.props.settings.data.story}>
-        <SbEditable content={this.props.page.data.story.content}>
+        <SbEditable content={this.state.pageContent}>
           <div className="blog">
-            <h1>{this.props.page.data.story.content.name}</h1>
+            <h1>{this.state.pageContent.name}</h1>
             <div dangerouslySetInnerHTML={this.body()} className="blog__body"></div>
           </div>
         </SbEditable>

pages/blog/index.js

@@ -7,16 +7,17 @@ export default class extends React.Component {
   static async getInitialProps({ query }) {
     StoryblokService.setQuery(query)
 
-    return {
-      blogPosts: await StoryblokService.get('cdn/stories', {
+    let [blogPosts, settings] = await Promise.all([
+      StoryblokService.get('cdn/stories', {
         starts_with: `${query.language}/blog`
       }),
-      settings: await StoryblokService.get(`cdn/stories/${query.language}/settings`)
-    }
-  }
+      StoryblokService.get(`cdn/stories/${query.language}/settings`)
+    ])
 
-  componentDidMount() {
-    StoryblokService.initEditor()
+    return {
+      blogPosts,
+      settings
+    }
   }
 
   render() {

pages/index.js

@@ -3,23 +3,33 @@ import Layout from '../components/Layout'
 import StoryblokService from '../utils/StoryblokService'
 
 export default class extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {pageContent: props.page.data.story.content}
+  }
+
   static async getInitialProps({ query }) {
     StoryblokService.setQuery(query)
 
+    let [page, settings] = await Promise.all([
+      StoryblokService.get('cdn/stories/home'),
+      StoryblokService.get('cdn/stories/en/settings')
+    ])
+
     return {
-      page: await StoryblokService.get('cdn/stories/home'),
-      settings: await StoryblokService.get('cdn/stories/en/settings')
+      page,
+      settings
     }
   }
 
   componentDidMount() {
-    StoryblokService.initEditor()
+    StoryblokService.initEditor(this)
   }
 
   render() {
     return (
       <Layout settings={this.props.settings.data.story}>
-        {Components(this.props.page.data.story.content)}
+        {Components(this.state.pageContent)}
       </Layout>
     )
   }

utils/StoryblokService.js

@@ -22,7 +22,7 @@ class StoryblokService {
   get(slug, params) {
     params = params || {}
 
-    if (this.getQuery('_storyblok') || this.devMode) {
+    if (this.getQuery('_storyblok') || this.devMode || (typeof window !== 'undefined' && window.storyblok)) {
       params.version = 'draft'
     }
 
@@ -33,11 +33,15 @@ class StoryblokService {
     return this.client.get(slug, params)
   }
 
-  initEditor() {
+  initEditor(reactComponent) {
     if (window.storyblok) {
-      window.storyblok.init({initOnlyOnce: true})
-      window.storyblok.on('change', () => location.reload(true))
-      window.storyblok.on('published', () => location.reload(true))
+      window.storyblok.init()
+      window.storyblok.on(['change', 'published'], () => location.reload(true))
+      window.storyblok.on('input', (event) => {
+        if (event.story.content._uid === reactComponent.state.pageContent._uid) {
+          reactComponent.setState({pageContent: event.story.content})
+        }
+      })
     }
   }