MOBILE-3814 rte: Do not hide toolbar when clicked inside element

main
Pau Ferrer Ocaña 2022-03-17 13:29:47 +01:00
parent 4dcceee3e2
commit 7cbf59df2d
2 changed files with 12 additions and 5 deletions

View File

@ -110,7 +110,7 @@
</button> </button>
</ion-slide> </ion-slide>
<ion-slide *ngIf="isPhone"> <ion-slide *ngIf="isPhone">
<button [title]="'core.editor.hidetoolbar' | translate" (click)="hideToolbar($event)" (keyup)="hideToolbar($event)" <button [title]="'core.editor.hidetoolbar' | translate" (click)="hideToolbar($event, true)" (keyup)="hideToolbar($event, true)"
(mousedown)="downAction($event)" (keydown)="downAction($event)"> (mousedown)="downAction($event)" (keydown)="downAction($event)">
<ion-icon name="fas-times" aria-hidden="true"></ion-icon> <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
</button> </button>

View File

@ -177,8 +177,6 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
this.editorElement.oninput = this.onChange.bind(this); this.editorElement.oninput = this.onChange.bind(this);
this.editorElement.onkeydown = this.moveCursor.bind(this); this.editorElement.onkeydown = this.moveCursor.bind(this);
await CoreDomUtils.waitToBeVisible(this.editorElement);
// Use paragraph on enter. // Use paragraph on enter.
document.execCommand('DefaultParagraphSeparator', false, 'p'); document.execCommand('DefaultParagraphSeparator', false, 'p');
@ -340,7 +338,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
return; return;
} }
if (this.isNullOrWhiteSpace(this.editorElement.innerText)) { if (this.isNullOrWhiteSpace(this.editorElement.textContent)) {
this.clearText(); this.clearText();
} else { } else {
// The textarea and the form control must receive the original URLs. // The textarea and the form control must receive the original URLs.
@ -719,8 +717,17 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterContentIn
/** /**
* Hide the toolbar in phone mode. * Hide the toolbar in phone mode.
*
* @param event Event.
* @param force If true it will not check the target of the event.
*/ */
hideToolbar(event: Event): void { hideToolbar(event: Event, force = false): void {
if (!force && event.target && this.element.contains(event.target as HTMLElement)) {
// Do not hide if clicked inside the editor area, except forced.
return;
}
if (event.type == 'keyup' && !this.isValidKeyboardKey(<KeyboardEvent>event)) { if (event.type == 'keyup' && !this.isValidKeyboardKey(<KeyboardEvent>event)) {
return; return;
} }