diff --git a/src/display/editor/freetext.js b/src/display/editor/freetext.js
index 6b111b9b6..e2b68f3f0 100644
--- a/src/display/editor/freetext.js
+++ b/src/display/editor/freetext.js
@@ -34,6 +34,8 @@ class FreeTextEditor extends AnnotationEditor {
#boundEditorDivFocus = this.editorDivFocus.bind(this);
+ #boundEditorDivInput = this.editorDivInput.bind(this);
+
#boundEditorDivKeydown = this.editorDivKeydown.bind(this);
#color;
@@ -230,7 +232,7 @@ class FreeTextEditor extends AnnotationEditor {
this.editorDiv.addEventListener("keydown", this.#boundEditorDivKeydown);
this.editorDiv.addEventListener("focus", this.#boundEditorDivFocus);
this.editorDiv.addEventListener("blur", this.#boundEditorDivBlur);
- this.parent.div.classList.remove("freeTextEditing");
+ this.editorDiv.addEventListener("input", this.#boundEditorDivInput);
}
/** @inheritdoc */
@@ -248,6 +250,7 @@ class FreeTextEditor extends AnnotationEditor {
this.editorDiv.removeEventListener("keydown", this.#boundEditorDivKeydown);
this.editorDiv.removeEventListener("focus", this.#boundEditorDivFocus);
this.editorDiv.removeEventListener("blur", this.#boundEditorDivBlur);
+ this.editorDiv.removeEventListener("input", this.#boundEditorDivInput);
// On Chrome, the focus is given to <body> when contentEditable is set to
// false, hence we focus the div.
@@ -374,6 +377,10 @@ class FreeTextEditor extends AnnotationEditor {
this.isEditing = false;
}
+ editorDivInput(event) {
+ this.parent.div.classList.toggle("freeTextEditing", this.isEmpty());
+ }
+
/** @inheritdoc */
disableEditing() {
this.editorDiv.setAttribute("role", "comment");