import { Component } from 'substance'
import TextInput from './TextInput'

export default class StringComponent extends Component {
  render ($$) {
    let placeholder = this.props.placeholder
    let model = this.props.model
    let path = model.getPath()
    let name = path.join('.')
    let el = $$('div').addClass(this.getClassNames())
    el.append(
      $$(TextInput, {
        name,
        path,
        placeholder
      }).ref('input')
    )
    return el
  }

  getClassNames () {
    return 'sc-string'
  }
}

@@ -342,19 +342,349 @@
     
-el.append(%0A
+if (this.props.readOnly) %7B%0A      let doc = this.context.api.getDocument()%0A      let TextPropertyComponent = this.getComponent('text-property')%0A      el.append(%0A        $$(TextPropertyComponent, %7B%0A          doc,%0A          tagName: 'div',%0A          placeholder,%0A          path%0A        %7D).ref('display')%0A      )%0A    %7D else %7B%0A      el.append(%0A  
     
@@ -713,14 +713,18 @@
     
+ 
+ 
 name,%0A
+  
     
@@ -733,16 +733,18 @@
   path,%0A
+  
         
@@ -757,24 +757,26 @@
 older%0A      
+  
 %7D).ref('inpu
@@ -779,25 +779,33 @@
 input')%0A    
-)
+  )%0A    %7D
 %0A    return 

Allow to render text or string read-only.