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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -189,8 +189,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
}
// Update tags for a11y.
this.replaceTags('b', 'strong');
this.replaceTags('i', 'em');
this.replaceTags(['b', 'i'], ['strong', 'em']);
if (this.shouldAutoSaveDrafts()) {
this.restoreDraft();
@ -476,8 +475,8 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
// Modify the DOM directly so the keyboard stays open.
if (this.rteEnabled) {
// Update tags for a11y.
this.replaceTags('b', 'strong');
this.replaceTags('i', 'em');
this.replaceTags(['b', 'i'], ['strong', 'em']);
this.editorElement?.removeAttribute('hidden');
const textareaInputElement = await this.textarea?.getInputElement();
textareaInputElement?.setAttribute('hidden', '');
@ -647,39 +646,26 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
document.execCommand(command, false);
// Modern browsers are using non a11y tags, so replace them.
if (command == 'bold') {
this.replaceTags('b', 'strong');
if (command === 'bold') {
this.replaceTags(['b'], ['strong']);
} else if (command == 'italic') {
this.replaceTags('i', 'em');
this.replaceTags(['i'], ['em']);
}
}
/**
* Replace tags for a11y.
*
* @param originTag Origin tag to be replaced.
* @param destinationTag Destination tag to replace.
* @param originTag Origin tags to be replaced.
* @param destinationTag Destination tags to replace.
*/
protected replaceTags(originTag: string, destinationTag: string): void {
protected replaceTags(originTags: string[], destinationTags: string[]): void {
if (!this.editorElement) {
return;
}
const elems = Array.from(this.editorElement.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);
});
this.editorElement =
CoreDom.replaceTags(this.editorElement, originTags, destinationTags);
this.onChange();
}

48
src/core/singletons/dom.ts
View File

@ -617,6 +617,54 @@ export class CoreDom {
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;
}
}
/**