feat: change react preview editor

Author: Wojciech Krysiak

fixtures/components/component.jsx

@@ -10,22 +10,18 @@ const Bold = styled.div`
 
 /**
  * Some documented component
- * 
+ *
  * @component
  * @example <caption>Default example</caption>
  * const text = 'Meva'
  * return (
- *   <Documented2>
- *     <Documented text={text} />
- *   </Documented2>
+ *   <Documented text={text} />
  * )
- * 
+ *
  * @example <caption>Ala ma kota</caption>
  * const text = 'some example text 2'
  * return (
- *   <Documented2>
- *     <Documented text={text} header={'sime'} />
- *   </Documented2>
+ *   <Documented text={text} header={'sime'} />
  * )
  */
 const Documented = (props) => {

package.json

@@ -64,9 +64,12 @@
   "dependencies": {
     "brace": "^0.11.1",
     "marked": "^1.1.1",
+    "prism-react-renderer": "^1.1.1",
     "react-ace": "^6.5.0",
     "react-docgen": "^5.3.0",
     "react-frame-component": "^4.1.1",
+    "react-live": "^2.2.2",
+    "react-simple-code-editor": "^0.11.0",
     "underscore": "^1.9.1",
     "vue-docgen-api": "^3.22.0",
     "vue2-ace-editor": "^0.0.13"

src/components/editor.jsx

@@ -0,0 +1,42 @@
+import React, { Fragment, useState } from 'react'
+
+import Editor from 'react-simple-code-editor'
+import Highlight, { defaultProps } from 'prism-react-renderer'
+import theme from 'prism-react-renderer/themes/nightOwlLight'
+
+const styles = {
+  root: {
+    boxSizing: 'border-box',
+    fontFamily: '"Dank Mono", "Fira Code", monospace',
+    ...theme.plain,
+  },
+}
+
+const EditorExample = (props) => {
+  const { value, onChange } = props
+
+  const highlight = code => (
+    <Highlight {...defaultProps} theme={theme} code={code} language="jsx">
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <Fragment>
+          {tokens.map((line, i) => (
+            <div {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => <span {...getTokenProps({ token, key })} />)}
+            </div>
+          ))}
+        </Fragment>
+      )}
+    </Highlight>
+  )
+
+  return (
+    <Editor
+      value={value}
+      onValueChange={onChange}
+      highlight={highlight}
+      padding={10}
+      style={styles.root}
+    />
+  )
+}
+export default EditorExample

src/components/react-wrapper.jsx

@@ -8,21 +8,21 @@ import 'brace/mode/jsx'
 import 'brace/theme/monokai'
 import ComponentRenderer from './component-renderer'
 
+import Editor from './editor'
+
 window.component = null
 
 class Wrapper extends React.Component {
   constructor(props) {
     super(props)
     window.component = window.component || {}
-    this.iframeRef= React.createRef()
+    this.iframeRef = React.createRef()
     this.handleChange = this.handleChange.bind(this)
-    this.toggleEditor = this.toggleEditor.bind(this)
     let { example } = props
     example = example || 'return (<div>Example</div>)'
     this.state = {
       example,
       height: 200,
-      showEditor: false,
     }
     this.executeScript(example)
   }
@@ -31,9 +31,9 @@ class Wrapper extends React.Component {
     const { uniqId } = this.props
     const script = document.createElement('script')
     const self = this
-    script.onload = script.onerror = function() {
+    script.onload = script.onerror = function () {
       this.remove()
-      self.setState(state =>({
+      self.setState(state => ({
         ...state,
         component: window.component[uniqId] || '',
       }))
@@ -48,11 +48,11 @@ class Wrapper extends React.Component {
     })()`
     try {
       const src = Babel.transform(wrapper, { presets: ['react', 'es2015'] }).code
-      script.src = 'data:text/plain;base64,' + btoa(src)
+      script.src = `data:text/plain;base64,${btoa(src)}`
     } catch (error) {
       console.log(error)
     }
-    
+
     document.body.appendChild(script)
   }
 
@@ -88,27 +88,19 @@ class Wrapper extends React.Component {
       this.computeHeight()
     }, 1000)
   }
-  
+
   componentWillUnmount() {
     clearInterval(this.heightInterval)
   }
 
-  toggleEditor(event) {
-    event.preventDefault()
-    this.setState(state => ({
-      ...state,
-      showEditor: !state.showEditor,
-    }))
-  }
-
-  render () {
-    const { component, height, showEditor } = this.state
+  render() {
+    const { component, height } = this.state
     return (
       <div>
         <Frame
           className="component-wrapper"
           ref={this.iframeRef}
-          style={{width: '100%', height }}
+          style={{ width: '100%', height }}
           onLoad={this.computeHeight()}
         >
           <link type="text/css" rel="stylesheet" href="./build/entry.css" />
@@ -122,29 +114,14 @@ class Wrapper extends React.Component {
             }
           </FrameContextConsumer>
         </Frame>
-        <div className="bd__button">
-          <a href="#" onClick={this.toggleEditor}>Modify Example Code</a>
+        <div className="field editor-preview">
+          <Editor value={this.state.example} onChange={code => this.handleChange(code)} />
         </div>
-        {showEditor ? (
-          <div className="field">
-            <AceEditor
-              style={{width: '100%', height: '200px', marginBottom: '20px'}}
-              value={this.state.example}
-              mode="jsx"
-              theme="monokai"
-              onChange={(code) => this.handleChange(code)}
-              name="editor-div"
-              editorProps={{ $useSoftTabs: true }}
-            />
-          </div>
-        ) : ''}
       </div>
     )
   }
 }
 
-export default (props) => {
-  return (
-    <Wrapper {...props} />
-  )
-}
+export default props => (
+  <Wrapper {...props} />
+)

styles/app.sass

@@ -10,6 +10,7 @@
 @import 'base/landing'
 
 @import 'components/top-navbar'
+@import 'components/preview'
 @import 'components/sidebar'
 @import 'components/side-nav'
 @import 'components/footer'

styles/components/preview.sass

@@ -0,0 +1,10 @@
+.editor-preview
+  border: 1px solid $border;
+  position: relative;
+  margin: 30px 0;
+
+  &::before
+    content: "Edit code";
+    position: absolute;
+    right: 0;
+    top: -25px;

styles/components/tag.sass

@@ -1,2 +1,17 @@
 .tag
-  text-transform: uppercase
+  text-transform: uppercase
+
+body pre .tag
+  text-transform: none
+  align-items: normal
+  background-color: inherit
+  border-radius: 0
+  color: inherit
+  display: inline
+  font-size: 15px
+  height: auto
+  justify-content: normal
+  line-height: 22.5px
+  padding-left: 0
+  padding-right: 0
+  white-space: pre-wrap