MOBILE-3947 chore: Move replaceTags to CoreDom
parent
7a4bf21d3c
commit
ce36245d83
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue