Stale data with StimulusJS and Quill editor - quill

Question

I am integrating the Quill editor with Rails and would like to control it with StimulusJS. 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. :grin:
Edit
#jhchen every keystroke produces the same, original data that was in the field. The changes are reflected on screen, but not in the 2 inputs or console.

Answer 1

Well I got it all working, but am not 100% sold on StimulusJS. There is possibly a better way to do this, but this is my solution:
javascript
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ['editor','html','text'];
initialize() {
this.quill = new Quill(this.editorTarget, {
theme: 'snow'
});
this.quill.on("text-change", e => {
this.textChange();
});
}
textChange(){
this.htmlTarget.value = this.quill.root.innerHTML;
this.textTarget.value = this.quill.getText();
}
}
view
<div data-controller='quill'>
<div data-target='quill.editor'>
<% if f.object.target_note.present? %>
<%= f.object.target_note.html_safe %>
<% end %>
</div>
<%= f.input :target_note,
label: false,
input_html: {
class: 'display-none',
data: { target: 'quill.html' } } %>
<%= f.input :target_note_text,
label: false,
input_html: {
class: 'display-none',
data: { target: 'quill.text' }
} %>
</div>
The display-none class and label: false where needed as StimulusJS cannot target a hidden field !!!