getting the value of a code-mirror element

Question

I am using the code-mirror component from the Polymer Designer, and can set the initial value, but cannot see how to get changes to the code from the user.

I initialise the code-mirror using

<code-mirror id="code_mirror" value="{{code}}">


</code-mirror>

and would like to listen for changes in {{code}}, but codeChanged doesn't seem to fire.

I know I can get the actual value using code_mirror.$.mirror.getValue(), but would like to use data-binding.

I have tried using on-change to no avail.

Answer 1

Assuming you're using https://github.com/PolymerLabs/code-mirror what you need to do is make the CodeMirror instance created in the ready handle some events that the instance itself is emitting, then make the code-mirror element fire any custom event (something which I know is called event relay)

The following example makes the polymer element fire the custom event code-change whenever the editor value is changed

ready: function() {
    var me = this;
    //...

    this.mirror = CodeMirror(this.shadowRoot, { /* ... */ });

    this.mirror.on('change', function () {
        // me = polymer instance
        me.fire('code-change', { value: me.mirror.getValue() })
    });
}

Then any instance of the polymer custom element would need to listen to that event using Polymer's declarative event mapping or through addEventListener

1st case (if code-mirror is inside another <polymer-element />):

<code-mirror on-code-change="{{ onCodeChange }}"></code-mirror>
// ...
<script>
Polymer({
  onCodeChange: function(event, detail, sender) { ... }
});
</script>

2nd case ():

<code-mirror></code-mirror>
<script>
   document
       .querySelector('code-mirror')
       .addEventListener('code-change', function () { ... });
</script>