EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3373 rte: Let click fire when range selected

main
Pau Ferrer Ocaña 2020-03-03 12:10:23 +01:00
parent 0f4d7c2e99
commit d8b7f403b7
3 changed files with 42 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html
View File

@ -1,8 +1,8 @@
<div class="core-rte-editor-container" (click)="focusRTE()" [class.toolbar-hidden]="toolbarHidden"> <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> </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"> <div class="core-rte-info-message" *ngIf="infoMessage">
<ion-icon name="information-circle"></ion-icon> <ion-icon name="information-circle"></ion-icon>
@ -11,78 +11,78 @@
</div> </div>
<div #toolbar class="core-rte-toolbar" [class.toolbar-hidden]="toolbarHidden"> <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> <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
</button> </button>
<ion-slides [slidesPerView]="numToolbarButtons" (ionSlideDidChange)="updateToolbarArrows()"> <ion-slides [slidesPerView]="numToolbarButtons" (ionSlideDidChange)="updateToolbarArrows()">
<!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand --> <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
<ion-slide> <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> <core-icon name="fa-bold"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<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> <core-icon name="fa-italic"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<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> <core-icon name="fa-underline"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<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> <core-icon name="fa-strikethrough"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<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> <core-icon name="fa-paragraph"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<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 <core-icon name="fa-header"></core-icon>3
</button> </button>
</ion-slide> </ion-slide>
<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 <core-icon name="fa-header"></core-icon>4
</button> </button>
</ion-slide> </ion-slide>
<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 <core-icon name="fa-header"></core-icon>5
</button> </button>
</ion-slide> </ion-slide>
<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> <core-icon name="fa-list-ul"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<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> <core-icon name="fa-list-ol"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<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> <core-icon name="fa-eraser"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<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> <core-icon name="fa-code"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
<ion-slide *ngIf="isPhone"> <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> <core-icon name="fa-close"></core-icon>
</button> </button>
</ion-slide> </ion-slide>
</ion-slides> </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> <ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
</button> </button>
</div> </div>

19
src/core/editor/components/rich-text-editor/rich-text-editor.ts
View File

@ -625,7 +625,9 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
/** /**
* Show the toolbar. * Show the toolbar.
*/ */
showToolbar(): void { showToolbar($event: Event): void {
this.stopBubble($event);
this.editorElement.focus(); this.editorElement.focus();
this.toolbarHidden = false; this.toolbarHidden = false;
} }
@ -640,6 +642,19 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
event.stopPropagation(); 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. * Method that shows the next toolbar buttons.
*/ */
@ -710,7 +725,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
* Update highlighted toolbar styles. * Update highlighted toolbar styles.
*/ */
updateToolbarStyles = (): void => { updateToolbarStyles = (): void => {
const node = document.getSelection().focusNode; const node = window.getSelection().focusNode;
if (!node) { if (!node) {
return; return;
} }

12
src/theme/format-text.scss
View File

@ -1,4 +1,12 @@
/** Styles to match web platform */ /** 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 core-format-text,
ion-app.app-root .item core-format-text, ion-app.app-root .item core-format-text,
ion-app.app-root core-rich-text-editor .core-rte-editor { 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. // Fix lists styles in core-format-text.
ul {
padding-left: 1rem;
}
ol { ol {
list-style-type: decimal; list-style-type: decimal;
} }
ul, ol { ul, ol {
-webkit-padding-start: 15px;
ol { ol {
list-style-type: lower-latin; list-style-type: lower-latin;
} }