MOBILE-3947 chore: Move replaceTags to CoreDom

main
Pau Ferrer Ocaña 2023-11-15 23:36:35 +01:00
parent 7a4bf21d3c
commit ce36245d83
2 changed files with 59 additions and 25 deletions

View File

@ -189,8 +189,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
} }
// Update tags for a11y. // Update tags for a11y.
this.replaceTags('b', 'strong'); this.replaceTags(['b', 'i'], ['strong', 'em']);
this.replaceTags('i', 'em');
if (this.shouldAutoSaveDrafts()) { if (this.shouldAutoSaveDrafts()) {
this.restoreDraft(); this.restoreDraft();
@ -476,8 +475,8 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
// 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. // Update tags for a11y.
this.replaceTags('b', 'strong'); this.replaceTags(['b', 'i'], ['strong', 'em']);
this.replaceTags('i', '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', '');
@ -647,39 +646,26 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
document.execCommand(command, false); document.execCommand(command, false);
// Modern browsers are using non a11y tags, so replace them. // Modern browsers are using non a11y tags, so replace them.
if (command == 'bold') { if (command === 'bold') {
this.replaceTags('b', 'strong'); this.replaceTags(['b'], ['strong']);
} else if (command == 'italic') { } else if (command == 'italic') {
this.replaceTags('i', 'em'); this.replaceTags(['i'], ['em']);
} }
} }
/** /**
* Replace tags for a11y. * Replace tags for a11y.
* *
* @param originTag Origin tag to be replaced. * @param originTag Origin tags to be replaced.
* @param destinationTag Destination tag to replace. * @param destinationTag Destination tags to replace.
*/ */
protected replaceTags(originTag: string, destinationTag: string): void { protected replaceTags(originTags: string[], destinationTags: string[]): void {
if (!this.editorElement) { if (!this.editorElement) {
return; return;
} }
const elems = Array.from(this.editorElement.getElementsByTagName(originTag)); this.editorElement =
CoreDom.replaceTags(this.editorElement, originTags, destinationTags);
elems.forEach((elem) => {
const newElem = document.createElement(destinationTag);
newElem.innerHTML = elem.innerHTML;
if (elem.hasAttributes()) {
const attrs = Array.from(elem.attributes);
attrs.forEach((attr) => {
newElem.setAttribute(attr.name, attr.value);
});
}
elem.parentNode?.replaceChild(newElem, elem);
});
this.onChange(); this.onChange();
} }

View File

@ -617,6 +617,54 @@ export class CoreDom {
return value; return value;
} }
/**
* Replace tags on HTMLElement.
*
* @param element HTML Element where to replace the tags.
* @param originTags Origin tag to be replaced.
* @param destinationTags Destination tag to replace.
* @returns Element with tags replaced.
*/
static replaceTags<T extends HTMLElement = HTMLElement>(
element: T,
originTags: string | string[],
destinationTags: string | string[],
): T {
if (typeof originTags === 'string') {
originTags = [originTags];
}
if (typeof destinationTags === 'string') {
destinationTags = [destinationTags];
}
if (originTags.length !== destinationTags.length) {
// Do nothing, incorrect input.
return element;
}
originTags.forEach((originTag, index) => {
const destinationTag = destinationTags[index];
const elems = Array.from(element.getElementsByTagName(originTag));
elems.forEach((elem) => {
const newElem = document.createElement(destinationTag);
newElem.innerHTML = elem.innerHTML;
if (elem.hasAttributes()) {
const attrs = Array.from(elem.attributes);
attrs.forEach((attr) => {
newElem.setAttribute(attr.name, attr.value);
});
}
elem.parentNode?.replaceChild(newElem, elem);
});
});
return element;
}
} }
/** /**