# Stale data with Quill editor

**URL:** <https://discuss.hotwired.dev/t/stale-data-with-quill-editor/317>\
**Category:** General\
**Created:** [June 1, 2018, 8:11pm UTC](https://discuss.hotwired.dev/t/stale-data-with-quill-editor/317 "2018-06-01T20:11:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![seanfcarroll](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/seanfcarroll/32/363_2.png) [@seanfcarroll](https://discuss.hotwired.dev/u/seanfcarroll)\
**Post date:** [June 1, 2018, 8:11pm UTC](https://discuss.hotwired.dev/t/stale-data-with-quill-editor/317/1 "2018-06-01T20:11:39Z")

</div>

I am integrating the Quill editor with Rails and would like to control it with Stimulus. Essentially I have a field on a Rails form, which has html stored in it, and it becomes and Quill rich text editor. There are also 2 other field consuming data from Quill: plain text (stripped of tags) and deltas (changes log).

All three are then saved to the db via the usual form submit.

It is _almost_ working.

The form and controller code

```
<div data-controller='quill'>
      <%= f.input :target_note,
            input_html: {
              data: {
                target: 'quill.editor',
                action: "keyup->quill#update" } } %>
      <input data-target='quill.delta'/>
      <input data-target='quill.text' />
    </div>

```

The Stimulus controller

```
import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ['editor','delta','text'];

  connect() {
    console.log('connected');
    this.quill = new Quill('#grammar_note_target_note', {
      theme: 'snow'
    });
  }

  update(){
    console.log(this.quill.getContents());
    console.log(this.quill.getText());
    this.textTarget.value = this.quill.getText();
    this.deltaTarget.value = this.quill.getContents();
  }
}

```

Problem

When the user types into the editor field, the data that was previously saved is copied as delta / plain text to the textTarget and deltaTarget fields. In the image below, the value of ‘asdasdasdsa’ was previously saved into the field, while the user just typed ‘hhh’.

Expected behaviour

On every keystroke, the actual text would be transformed into deltas or text and stored in the 2 fields.

Any help would really be appreciated. 😁

 ![22](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/1X/6c3eeeeb06cd5778f021ebfcfe9fc7982fde9d43.png)

---

<div class="post-metadata">

**Author:** ![adrienpoly](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/adrienpoly/32/78_2.png) [@adrienpoly](https://discuss.hotwired.dev/u/adrienpoly)\
**Post date:** [June 2, 2018, 8:46am UTC](https://discuss.hotwired.dev/t/stale-data-with-quill-editor/317/2 "2018-06-02T08:46:59Z")

</div>

I had a similar issue and as a solution I ended up defining my event bindings in the connect function of my stimulus controller.

something like this should work in your case:

```auto
import { Controller } from "stimulus";
import Quill from "Quill";
import _ from "lodash";

export default class extends Controller {
  static targets = ["input"];
  
  connect() {
    this.quill = new Quill(this.inputTarget, {
      modules: {
        toolbar: ["bold", "italic", "underline"],
        keyboard: {
          bindings: this.keyBindings()
        }
      },
      theme: "bubble"
    });
    this.quill.on("text-change", e => {
      _.throttle(this.textChange.bind(this), 500);
    });
  }

  textChange() {
    console.log("textChange");
  }
}

```

---

<div class="post-metadata">

**Author:** ![seanfcarroll](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/seanfcarroll/32/363_2.png) [@seanfcarroll](https://discuss.hotwired.dev/u/seanfcarroll)\
**Post date:** [June 2, 2018, 4:47pm UTC](https://discuss.hotwired.dev/t/stale-data-with-quill-editor/317/3 "2018-06-02T16:47:05Z")

</div>

Hey @adrienpoly that is perfect, really exactly was I was looking for. I like the lodash throttle, a nice touch.