paper-suggest-textarea

Collaborne

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/Collaborne/paper-suggest-textarea/2.0.1/paper-suggest-textarea/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-suggest-textarea.html">
<link rel="import" href="../iron-input/iron-input.html">
<dom-bind>
  <template>
    <h2>Element</h2>
    <paper-suggest-textarea id="textarea" value="{{value}}" value-with-ids="{{valueWithIds}}" suggest-query="{{suggestQuery}}" autofocus placeholder="Enter a text like 'Hi @joe'">
    </paper-suggest-textarea>

    <h2>Control</h2>
    <div class="vertical-section">
      <div hidden$="[[!suggestQuery]]">
        Replace
        <iron-input bind-value="{{suggestQuery}}">
          <input>
        </iron-input>
        with:
        <iron-input bind-value="{{id}}">
          <input>
        </iron-input>
        <button on-tap="onReplace">Replace</button>
      </div>
      <br>
      <div>Value with IDs <b>[[valueWithIds]]</b></div>
    </div>

    <script>
      var scope = document.querySelector('dom-bind');
      scope.onReplace = function(e) {
        this.$.textarea.addReplacement(this.id, this.suggestQuery);
        this.$.textarea.replaceCurrentSelection(this.suggestQuery);
        this.$.textarea.focus();
      };

    </script>
  </template>
</dom-bind>