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 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");