<polymer-element name="noflo-graph-inspector" attributes="graph">
  <style>
    noflo-graph-inspector label span {
      display: block;
      font-size: 8pt;
      padding-top: 8px;
    }
    noflo-graph-inspector textarea {
      width: 100%;
      height: 210px;
      border: none;
      font-family: "SourceCodePro",Helvetica,Arial,sans-serif;
      padding: 8px;
      background-color: hsl(184, 50%, 11%);
      color: hsl(184, 40%, 89%);
    }
  </style>
  <template>
    <h1 on-keyup="{{ updateName }}" contenteditable>{{ graph.properties.name }}</h1>
    <template if="{{ graph.properties.environment.runtime == 'html' }}">
    <label>
      <span>Preview contents</span>
      <textarea on-keyup="{{ updateContent }}">
        {{ graph.properties.environment.content }}
      </textarea>
    </label>
    </template>
  </template>
  <script>
    Polymer('noflo-graph-inspector', {
      updateName: function (event, detail, sender) {
        this.graph.properties.name = sender.innerText;
      },
      updateContent: function (event, detail, sender) {
        this.graph.properties.environment.content = sender.value;
      }
    });
  </script>
</polymer-element>

<polymer-element name="noflo-graph-inspector" attributes="graph">
  <style>
    noflo-graph-inspector label span {
      display: block;
      font-size: 8pt;
      padding-top: 8px;
    }
    noflo-graph-inspector textarea {
      width: 100%;
      height: 210px;
      border: none;
      font-family: "SourceCodePro",Helvetica,Arial,sans-serif;
      padding: 8px;
      background-color: hsl(184, 50%, 11%);
      color: hsl(184, 40%, 89%);
    }
  </style>
  <template>
    <h1 on-blur="{{ updateName }}" contenteditable>{{ graph.properties.name }}</h1>
    <template if="{{ graph.properties.environment.runtime == 'html' }}">
    <label>
      <span>Preview contents</span>
      <textarea on-blur="{{ updateContent }}">
        {{ graph.properties.environment.content }}
      </textarea>
    </label>
    </template>
  </template>
  <script>
    Polymer('noflo-graph-inspector', {
      updateName: function (event, detail, sender) {
        this.graph.properties.name = sender.innerText;
      },
      updateContent: function (event, detail, sender) {
        this.graph.properties.environment.content = sender.value;
      }
    });
  </script>
</polymer-element>

Update graph on blur, not on every character
Update graph on blur, not on every character
