MOBILE-3373 rte: Let click fire when range selected
Pau Ferrer Ocaña
parent
0f4d7c2e99
commit
d8b7f403b7
|
|
@ -1,8 +1,8 @@
|
|||
<div class="core-rte-editor-container" (click)="focusRTE()" [class.toolbar-hidden]="toolbarHidden">
|
||||
<div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" tappable (focus)="showToolbar()" (longPress)="showToolbar()" (blur)="hideToolbar($event)" [attr.data-placeholder-text]="placeholder" role="textbox">
|
||||
<div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" tappable (focus)="showToolbar($event)" (longPress)="showToolbar($event)" (blur)="hideToolbar($event)" [attr.data-placeholder-text]="placeholder" role="textbox">
|
||||
</div>
|
||||
|
||||
<ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)" (focus)="showToolbar()" (longPress)="showToolbar()" (blur)="hideToolbar($event)" role="textbox"></ion-textarea>
|
||||
<ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)" (focus)="showToolbar($event)" (longPress)="showToolbar($event)" (blur)="hideToolbar($event)" role="textbox"></ion-textarea>
|
||||
|
||||
<div class="core-rte-info-message" *ngIf="infoMessage">
|
||||
<ion-icon name="information-circle"></ion-icon>
|
||||
|
|
@ -11,78 +11,78 @@
|
|||
</div>
|
||||
|
||||
<div #toolbar class="core-rte-toolbar" [class.toolbar-hidden]="toolbarHidden">
|
||||
<button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev($event)" (mousedown)="stopBubble($event)">
|
||||
<button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev($event)" (mousedown)="mouseDownAction($event)">
|
||||
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
|
||||
</button>
|
||||
<ion-slides [slidesPerView]="numToolbarButtons" (ionSlideDidChange)="updateToolbarArrows()">
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold', 'b')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.bold' | translate">
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold', 'b')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.bold' | translate">
|
||||
<core-icon name="fa-bold"></core-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic', 'i')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.italic' | translate">
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic', 'i')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.italic' | translate">
|
||||
<core-icon name="fa-italic"></core-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline', 'u')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.underline' | translate">
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline', 'u')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.underline' | translate">
|
||||
<core-icon name="fa-underline"></core-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikethrough', 'strike')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.strike' | translate">
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikethrough', 'strike')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.strike' | translate">
|
||||
<core-icon name="fa-strikethrough"></core-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'p', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.p' | translate">
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'p', 'block')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.p' | translate">
|
||||
<core-icon name="fa-paragraph"></core-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'h3', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h3' | translate">
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'h3', 'block')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.h3' | translate">
|
||||
<core-icon name="fa-header"></core-icon>3
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" (click)="buttonAction($event, 'h4', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h4' | translate">
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" (click)="buttonAction($event, 'h4', 'block')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.h4' | translate">
|
||||
<core-icon name="fa-header"></core-icon>4
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" (click)="buttonAction($event, 'h5', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h5' | translate">
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" (click)="buttonAction($event, 'h5', 'block')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.h5' | translate">
|
||||
<core-icon name="fa-header"></core-icon>5
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.unorderedlist' | translate">
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.unorderedlist' | translate">
|
||||
<core-icon name="fa-list-ul"></core-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (click)="buttonAction($event, 'insertOrderedList')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.orderedlist' | translate">
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (click)="buttonAction($event, 'insertOrderedList')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.orderedlist' | translate">
|
||||
<core-icon name="fa-list-ol"></core-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.clear' | translate">
|
||||
<button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.clear' | translate">
|
||||
<core-icon name="fa-eraser"></core-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [attr.aria-pressed]="!rteEnabled" (click)="toggleEditor($event)" (mousedown)="stopBubble($event)" [title]=" 'core.editor.toggle' | translate">
|
||||
<button [attr.aria-pressed]="!rteEnabled" (click)="toggleEditor($event)" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.toggle' | translate">
|
||||
<core-icon name="fa-code"></core-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide *ngIf="isPhone">
|
||||
<button (click)="hideToolbar($event)" (mousedown)="stopBubble($event)" [title]=" 'core.editor.hidetoolbar' | translate">
|
||||
<button (click)="hideToolbar($event)" (mousedown)="mouseDownAction($event)" [title]=" 'core.editor.hidetoolbar' | translate">
|
||||
<core-icon name="fa-close"></core-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
<button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarNextHidden" (click)="toolbarNext($event)" (mousedown)="stopBubble($event)">
|
||||
<button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarNextHidden" (click)="toolbarNext($event)" (mousedown)="mouseDownAction($event)">
|
||||
<ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -625,7 +625,9 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
|
|||
/**
|
||||
* Show the toolbar.
|
||||
*/
|
||||
showToolbar(): void {
|
||||
showToolbar($event: Event): void {
|
||||
this.stopBubble($event);
|
||||
|
||||
this.editorElement.focus();
|
||||
this.toolbarHidden = false;
|
||||
}
|
||||
|
|
@ -640,6 +642,19 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
|
|||
event.stopPropagation();
|
||||
}
|
||||
|
||||
/**
|
||||
* When a button is clicked first we should stop event propagation, but it has some cases to not.
|
||||
*
|
||||
* @param event Event.
|
||||
*/
|
||||
mouseDownAction(event: Event): void {
|
||||
const selection = window.getSelection().toString();
|
||||
// When RTE is focused with a range selection the stopBubble will not fire click.
|
||||
if (!this.rteEnabled || document.activeElement != this.editorElement || selection == '') {
|
||||
this.stopBubble(event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Method that shows the next toolbar buttons.
|
||||
*/
|
||||
|
|
@ -710,7 +725,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
|
|||
* Update highlighted toolbar styles.
|
||||
*/
|
||||
updateToolbarStyles = (): void => {
|
||||
const node = document.getSelection().focusNode;
|
||||
const node = window.getSelection().focusNode;
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,12 @@
|
|||
/** Styles to match web platform */
|
||||
ion-app.app-root core-format-text {
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
ul, ol {
|
||||
-webkit-padding-start: 15px;
|
||||
}
|
||||
}
|
||||
ion-app.app-root core-format-text,
|
||||
ion-app.app-root .item core-format-text,
|
||||
ion-app.app-root core-rich-text-editor .core-rte-editor {
|
||||
|
|
@ -14,14 +22,10 @@ ion-app.app-root core-rich-text-editor .core-rte-editor {
|
|||
}
|
||||
|
||||
// Fix lists styles in core-format-text.
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
ul, ol {
|
||||
-webkit-padding-start: 15px;
|
||||
ol {
|
||||
list-style-type: lower-latin;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue