I have written code in my Angular app to get the text snippet selected/highlighted by the user into a text area:
<textarea name="highlightedText" id="selectedText" rows="3" class="form-control"
placeholder="Your highlighted text will appear here..."
[(ngModel)]="highlightedText" (mouseup)="mouseUp()">
</textarea>
In my component, I have:
// Content of user annotation
highlightedText: string = "";
constructor() {
document.body.addEventListener("mouseup", () => {
this.mouseUp();
});
}
mouseUp() {
if (window.getSelection) {
this.highlightedText = window.getSelection()!.toString();
}
return this.highlightedText;
}
This works; meaning the text I select appears in the text box, but as soon as I click in that box (or click anywhere on the page) the text disappears.
What am I doing wrong that the transferred text does not stay there?
What did You actually expected - the val being reevaluated when You click (making 'mousedown' / 'mouseup') ...
mouseUp() {
if (window.getSelection) {
this.reEval();
}
return this.highlightedText;
}
reEval() {
const val = window.getSelection()!.toString().trim();
if (!!val.length) this.highlightedText = val;
}