Improve editor experience (#89)

components/CodeEditor/index.tsx

@@ -8,29 +8,40 @@ import 'brace/ext/searchbox'
 interface EditorProps {
   mode: 'jsx' | 'json' | 'javascript' | 'html'
   editorDomId: string
-  onChange: (value: string) => void
+  onChange?: (value: string) => void
   value?: string
   readOnly?: boolean
   focus?: boolean
   fontSize?: number
 }
 
 class CodeEditor extends React.Component<EditorProps, {}> {
-  public editor: any
-
+  editorRef = React.createRef<AceEditor>()
   constructor(props: EditorProps) {
     super(props)
-    this.editor = undefined
+  }
+
+  componentDidUpdate(prevProps: EditorProps) {
+    if (
+      JSON.stringify(prevProps?.value) !== JSON.stringify(this.props?.value) &&
+      this.props?.value
+    ) {
+      this.editorRef.current?.editor?.setValue(this.props.value as string, -1)
+    }
   }
 
   public onChange = (newValue: string) => {
-    this.props.onChange(newValue)
+    if (this.props.onChange) {
+      this.props.onChange(newValue)
+    }
   }
 
   public render() {
     const { mode, editorDomId, readOnly, value, focus, fontSize } = this.props
     return (
       <AceEditor
+        ref={this.editorRef}
+        defaultValue={value || ''}
         mode={mode}
         theme="monokai"
         onChange={this.onChange}
@@ -43,7 +54,6 @@ class CodeEditor extends React.Component<EditorProps, {}> {
           fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
         }}
         setOptions={{ readOnly: readOnly || false }}
-        value={value || ''}
         focus={focus || false}
         fontSize={fontSize || 14}
         tabSize={2}

components/CodeScreen/index.tsx

@@ -2,7 +2,11 @@ import React, { useEffect, useState } from 'react'
 import dynamic from 'next/dynamic'
 import Prism from 'prismjs'
 import Modal from 'react-modal'
-import { ReactStyleVariation, StyleVariation } from '@teleporthq/teleport-types'
+import {
+  ReactStyleVariation,
+  StyleVariation,
+  VComponentUIDL,
+} from '@teleporthq/teleport-types'
 import { copyToClipboard } from 'copy-lite'
 import { DropDown } from '../DropDown'
 import { ComponentType, CodeScreenProps } from './types'
@@ -21,9 +25,7 @@ import { ErrorPanel } from '../ErrorPanel'
 import { uploadUIDLJSON, fetchJSONDataAndLoad } from '../../utils/services'
 import Loader from '../Loader'
 
-const CodeEditor = dynamic(import('../CodeEditor'), {
-  ssr: false,
-})
+const CodeEditor = dynamic(import('../CodeEditor'), { ssr: false })
 const BrowserPreview = dynamic(import('../BrowserPreview'))
 
 const Code: React.FC<CodeScreenProps> = ({ router }) => {
@@ -100,6 +102,7 @@ const Code: React.FC<CodeScreenProps> = ({ router }) => {
 
   useEffect(() => {
     setComponentUIDL(uidlSamples[uidlSource])
+    setError(null)
   }, [uidlSource])
 
   const handleExternalLink = async (fileName: string) => {
@@ -117,28 +120,27 @@ const Code: React.FC<CodeScreenProps> = ({ router }) => {
 
   const handlePreview = async () => {
     try {
-      const { code, dependencies } = await generateComponent(
+      const generatedComponent = await generateComponent(
         componentUIDL,
         ComponentType.REACT,
         ReactStyleVariation.StyledComponents
       )
-      setPreview({ code, dependencies })
+      setPreview({
+        code: generatedComponent.code,
+        dependencies: generatedComponent.dependencies,
+      })
     } catch (e) {
-      console.error(e)
+      // console.error(e)
     }
   }
 
-  const handleGenerateCode = async () => {
+  const handleGenerateCode = async (uidl?: VComponentUIDL) => {
+    const UIDL = uidl || componentUIDL
     try {
-      const { code } = await generateComponent(
-        componentUIDL,
-        component.type,
-        component.style
-      )
+      const result = await generateComponent(UIDL, component.type, component.style)
+      setCode(result.code)
       setError(null)
-      setCode(code)
     } catch (e) {
-      console.error(e)
       setError(e)
     }
   }
@@ -152,12 +154,21 @@ const Code: React.FC<CodeScreenProps> = ({ router }) => {
 
   const handleJSONUpdate = (inputJSON: string) => {
     try {
-      if (inputJSON && typeof inputJSON === 'string' && inputJSON.length > 0) {
-        setComponentUIDL(JSON.parse(inputJSON))
+      if (
+        inputJSON &&
+        typeof inputJSON === 'string' &&
+        inputJSON.length > 0 &&
+        JSON.parse(inputJSON)
+      ) {
+        try {
+          const uidl = JSON.parse(inputJSON)
+          handleGenerateCode(uidl)
+        } catch (e) {
+          console.error(e)
+        }
       }
     } catch (e) {
-      console.error(e)
-      throw new Error(`Invalid UIDl`)
+      // throw new Error(`Invalid UIDl`)
     }
   }
 
@@ -186,7 +197,7 @@ const Code: React.FC<CodeScreenProps> = ({ router }) => {
         'component'
       )
       if (response && response?.fileName) {
-        let shareableLink = `${window.location}?uidlLink=${response.fileName}`
+        const shareableLink = `${window.location}?uidlLink=${response.fileName}`
         if (
           component?.type &&
           component.style &&

components/CodeScreen/utils.ts

@@ -116,7 +116,7 @@ export const getStyleFlavorsForTarget = (target: ComponentType) => {
 export const uidlSamples: Record<string, Record<string, unknown>> = {
   'simple-component': simpleComponentUIDL,
   'external-component': externalComponentUIDL,
-  navbar: navbar,
+  navbar,
   'contact-form': contactForm,
   'person-spotlight': personSpotlight,
   'complex-component': complexComponentUIDL,