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

MOBILE-4470 rte: Fix selection being lost on bold and italics

main
Pau Ferrer Ocaña 2024-05-10 11:05:59 +02:00
parent cdcb2f77a6
commit f4697a298a
2 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,16 +23,16 @@
<swiper-container #swiperRef [slidesPerView]="swiperOpts.slidesPerView" (slidechangetransitionend)="updateToolbarArrows()"> <swiper-container #swiperRef [slidesPerView]="swiperOpts.slidesPerView" (slidechangetransitionend)="updateToolbarArrows()">
<!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand --> <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
<swiper-slide> <swiper-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strong" [title]="'core.editor.bold' | translate" <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strong || toolbarStyles.b"
(click)="buttonAction($event, 'bold', 'strong')" (keyup)="buttonAction($event, 'bold', 'strong')" [title]="'core.editor.bold' | translate" (click)="buttonAction($event, 'bold', 'b')"
(mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0"> (keyup)="buttonAction($event, 'bold', 'b')" (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
<ion-icon name="fas-bold" aria-hidden="true" /> <ion-icon name="fas-bold" aria-hidden="true" />
</button> </button>
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.em" [title]="'core.editor.italic' | translate" <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.em || toolbarStyles.i"
(click)="buttonAction($event, 'italic', 'em')" (keyup)="buttonAction($event, 'italic', 'em')" [title]="'core.editor.italic' | translate" (click)="buttonAction($event, 'italic', 'i')"
(mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0"> (keyup)="buttonAction($event, 'italic', 'i')" (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
<ion-icon name="fas-italic" aria-hidden="true" /> <ion-icon name="fas-italic" aria-hidden="true" />
</button> </button>
</swiper-slide> </swiper-slide>
@ -94,13 +94,13 @@
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (keyup)="buttonAction($event, 'removeFormat')" <button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (keyup)="buttonAction($event, 'removeFormat')"
(mousedown)="downAction($event)" (keydown)="downAction($event)" [title]="'core.editor.clear' | translate"> (mousedown)="downAction($event)" (keydown)="downAction($event)" [title]="'core.editor.clear' | translate" tabindex="0">
<ion-icon name="fas-eraser" aria-hidden="true" /> <ion-icon name="fas-eraser" aria-hidden="true" />
</button> </button>
</swiper-slide> </swiper-slide>
<swiper-slide *ngIf="canScanQR"> <swiper-slide *ngIf="canScanQR">
<button [disabled]="!rteEnabled" (click)="scanQR($event)" (keyup)="scanQR($event)" (mousedown)="stopBubble($event)" <button [disabled]="!rteEnabled" (click)="scanQR($event)" (keyup)="scanQR($event)" (mousedown)="stopBubble($event)"
(keydown)="stopBubble($event)" [title]="'core.scanqr' | translate"> (keydown)="stopBubble($event)" [title]="'core.scanqr' | translate" tabindex="0">
<ion-icon name="fas-qrcode" aria-hidden="true" /> <ion-icon name="fas-qrcode" aria-hidden="true" />
</button> </button>
</swiper-slide> </swiper-slide>

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

@ -139,7 +139,9 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
infoMessage?: string; infoMessage?: string;
toolbarStyles = { toolbarStyles = {
strong: 'false', strong: 'false',
b: 'false',
em: 'false', em: 'false',
i: 'false',
u: 'false', u: 'false',
strike: 'false', strike: 'false',
p: 'false', p: 'false',
@ -491,6 +493,9 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
this.stopBubble(event); this.stopBubble(event);
// Update tags for a11y.
this.replaceTags(['b', 'i'], ['strong', 'em']);
this.setContent(this.control?.value || ''); this.setContent(this.control?.value || '');
this.rteEnabled = !this.rteEnabled; this.rteEnabled = !this.rteEnabled;
@ -498,9 +503,6 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
// Set focus and cursor at the end. // Set focus and cursor at the end.
// Modify the DOM directly so the keyboard stays open. // Modify the DOM directly so the keyboard stays open.
if (this.rteEnabled) { if (this.rteEnabled) {
// Update tags for a11y.
this.replaceTags(['b', 'i'], ['strong', 'em']);
this.editorElement?.removeAttribute('hidden'); this.editorElement?.removeAttribute('hidden');
const textareaInputElement = await this.textarea?.getInputElement(); const textareaInputElement = await this.textarea?.getInputElement();
textareaInputElement?.setAttribute('hidden', ''); textareaInputElement?.setAttribute('hidden', '');
@ -679,13 +681,6 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
// eslint-disable-next-line deprecation/deprecation // eslint-disable-next-line deprecation/deprecation
document.execCommand(command, false); document.execCommand(command, false);
// Modern browsers are using non a11y tags, so replace them.
if (command === 'bold') {
this.replaceTags(['b'], ['strong']);
} else if (command === 'italic') {
this.replaceTags(['i'], ['em']);
}
} }
/** /**