Skip to content

Commit 00951b2

Browse files
crazyservercrazyserver
committed
MOBILE-4616 chore: Always use convertTextToHTMLElement to convert HTML
1 parent b0c494e commit 00951b2

File tree

5 files changed

+64
-70
lines changed

5 files changed

+64
-70
lines changed

‎src/addons/filter/displayh5p/services/handlers/displayh5p.ts‎

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { makeSingleton } from '@singletons';
2020
import { CoreH5PPlayerComponent } from '@features/h5p/components/h5p-player/h5p-player';
2121
import { CoreUrl } from '@singletons/url';
2222
import { CoreH5PHelper } from '@features/h5p/classes/helper';
23-
import { CoreTemplateElement } from '@/core/utils/create-html-element';
23+
import { CoreText } from '@singletons/text';
2424

2525
/**
2626
* Handler to support the Display H5P filter.
@@ -37,41 +37,39 @@ export class AddonFilterDisplayH5PHandlerService extends CoreFilterDefaultHandle
3737
filter(
3838
text: string,
3939
): string | Promise<string> {
40-
CoreTemplateElement.innerHTML = text;
41-
42-
const h5pIframes = <HTMLIFrameElement[]> Array.from(CoreTemplateElement.content.querySelectorAll('iframe.h5p-iframe'));
43-
44-
// Replace all iframes with an empty div that will be treated in handleHtml.
45-
h5pIframes.forEach((iframe) => {
46-
const placeholder = document.createElement('div');
47-
48-
placeholder.classList.add('core-h5p-tmp-placeholder');
49-
placeholder.setAttribute('data-player-src', iframe.src);
50-
51-
iframe.parentElement?.replaceChild(placeholder, iframe);
52-
});
53-
54-
// Handle H5P iframes embedded using the embed HTML code.
55-
const embeddedH5PIframes = <HTMLIFrameElement[]> Array.from(
56-
CoreTemplateElement.content.querySelectorAll('iframe.h5p-player'),
57-
);
58-
59-
embeddedH5PIframes.forEach((iframe) => {
60-
// Add the preventredirect param to allow authenticating if auto-login fails.
61-
iframe.src = CoreUrl.addParamsToUrl(iframe.src, { preventredirect: false });
62-
63-
// Add resizer script so the H5P has the right height.
64-
CoreH5PHelper.addResizerScript();
65-
66-
// If the iframe has a small height, add some minimum initial height so it's seen if auto-login fails.
67-
const styleHeight = Number(iframe.style.height);
68-
const height = Number(iframe.getAttribute('height'));
69-
if ((!height || height < 400) && (!styleHeight || styleHeight < 400)) {
70-
iframe.style.height = '400px';
71-
}
40+
return CoreText.processHTML(text, (element) => {
41+
const h5pIframes = <HTMLIFrameElement[]> Array.from(element.querySelectorAll('iframe.h5p-iframe'));
42+
43+
// Replace all iframes with an empty div that will be treated in handleHtml.
44+
h5pIframes.forEach((iframe) => {
45+
const placeholder = document.createElement('div');
46+
47+
placeholder.classList.add('core-h5p-tmp-placeholder');
48+
placeholder.setAttribute('data-player-src', iframe.src);
49+
50+
iframe.parentElement?.replaceChild(placeholder, iframe);
51+
});
52+
53+
// Handle H5P iframes embedded using the embed HTML code.
54+
const embeddedH5PIframes = <HTMLIFrameElement[]> Array.from(
55+
element.querySelectorAll('iframe.h5p-player'),
56+
);
57+
58+
embeddedH5PIframes.forEach((iframe) => {
59+
// Add the preventredirect param to allow authenticating if auto-login fails.
60+
iframe.src = CoreUrl.addParamsToUrl(iframe.src, { preventredirect: false });
61+
62+
// Add resizer script so the H5P has the right height.
63+
CoreH5PHelper.addResizerScript();
64+
65+
// If the iframe has a small height, add some minimum initial height so it's seen if auto-login fails.
66+
const styleHeight = Number(iframe.style.height);
67+
const height = Number(iframe.getAttribute('height'));
68+
if ((!height || height < 400) && (!styleHeight || styleHeight < 400)) {
69+
iframe.style.height = '400px';
70+
}
71+
});
7272
});
73-
74-
return CoreTemplateElement.innerHTML;
7573
}
7674

7775
/**

‎src/addons/filter/mediaplugin/services/handlers/mediaplugin.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15-
import { CoreTemplateElement } from '@/core/utils/create-html-element';
15+
import { CoreText } from '@singletons/text';
1616
import { AddonFilterMediaPluginVideoJS } from '@addons/filter/mediaplugin/services/videojs';
1717
import { Injectable } from '@angular/core';
1818

@@ -33,15 +33,13 @@ export class AddonFilterMediaPluginHandlerService extends CoreFilterDefaultHandl
3333
* @inheritdoc
3434
*/
3535
filter(text: string): string | Promise<string> {
36-
CoreTemplateElement.innerHTML = text;
36+
return CoreText.processHTML(text, (element) => {
37+
const videos = Array.from(element.querySelectorAll('video'));
3738

38-
const videos = Array.from(CoreTemplateElement.content.querySelectorAll('video'));
39-
40-
videos.forEach((video) => {
41-
AddonFilterMediaPluginVideoJS.treatYoutubeVideos(video);
39+
videos.forEach((video) => {
40+
AddonFilterMediaPluginVideoJS.treatYoutubeVideos(video);
41+
});
4242
});
43-
44-
return CoreTemplateElement.innerHTML;
4543
}
4644

4745
/**

‎src/core/services/utils/dom.ts‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ import { CorePopovers, OpenPopoverOptions } from '@services/popovers';
5555
import { CoreViewer } from '@features/viewer/services/viewer';
5656
import { CoreLoadings } from '@services/loadings';
5757
import { CoreErrorHelper, CoreErrorObject } from '@services/error-helper';
58-
import { convertTextToHTMLElement, CoreTemplateElement } from '@/core/utils/create-html-element';
58+
import { convertTextToHTMLElement } from '@/core/utils/create-html-element';
5959
import { CoreHTMLClasses } from '@singletons/html-classes';
6060

6161
/*
@@ -197,7 +197,7 @@ export class CoreDomUtilsProvider {
197197
* @param html Text to convert.
198198
* @returns Element.
199199
*
200-
* @deprecated since 4.5. Use convertToElement directly instead.
200+
* @deprecated since 4.5. Use convertTextToHTMLElement directly instead.
201201
*/
202202
convertToElement(html: string): HTMLElement {
203203
return convertTextToHTMLElement(html);
@@ -262,24 +262,23 @@ export class CoreDomUtilsProvider {
262262
* @returns Fixed HTML text.
263263
*/
264264
fixHtml(html: string): string {
265-
CoreTemplateElement.innerHTML = html;
266-
267-
// eslint-disable-next-line no-control-regex
268-
const attrNameRegExp = /[^\x00-\x20\x7F-\x9F"'>/=]+/;
269-
const fixElement = (element: Element): void => {
270-
// Remove attributes with an invalid name.
271-
Array.from(element.attributes).forEach((attr) => {
272-
if (!attrNameRegExp.test(attr.name)) {
273-
element.removeAttributeNode(attr);
274-
}
275-
});
265+
return CoreText.processHTML(html, (element) => {
266+
// eslint-disable-next-line no-control-regex
267+
const attrNameRegExp = /[^\x00-\x20\x7F-\x9F"'>/=]+/;
268+
const fixElement = (element: Element): void => {
269+
// Remove attributes with an invalid name.
270+
Array.from(element.attributes).forEach((attr) => {
271+
if (!attrNameRegExp.test(attr.name)) {
272+
element.removeAttributeNode(attr);
273+
}
274+
});
276275

277-
Array.from(element.children).forEach(fixElement);
278-
};
276+
Array.from(element.children).forEach(fixElement);
277+
};
279278

280-
Array.from(CoreTemplateElement.content.children).forEach(fixElement);
279+
Array.from(element.children).forEach(fixElement);
280+
});
281281

282-
return CoreTemplateElement.innerHTML;
283282
}
284283

285284
/**

‎src/core/singletons/dom.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { CoreUtils } from '@services/utils/utils';
1717
import { CoreEventObserver } from '@singletons/events';
1818
import { CorePlatform } from '@services/platform';
1919
import { CoreWait } from './wait';
20-
import { CoreTemplateElement } from '../utils/create-html-element';
20+
import { convertTextToHTMLElement } from '../utils/create-html-element';
2121

2222
/**
2323
* Singleton with helper functions for dom.
@@ -118,9 +118,9 @@ export class CoreDom {
118118
return true;
119119
}
120120

121-
CoreTemplateElement.innerHTML = content;
121+
const element = convertTextToHTMLElement(content);
122122

123-
return !CoreDom.elementHasContent(CoreTemplateElement.content);
123+
return !CoreDom.elementHasContent(element);
124124
}
125125

126126
/**

‎src/core/utils/create-html-element.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,17 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15-
// A template element to convert HTML to element.
16-
export const CoreTemplateElement: HTMLTemplateElement = document.createElement('template');
17-
1815
/**
19-
* Convert some HTML as text into an HTMLElement. This HTML is put inside a div or a body.
16+
* Convert some HTML as text into an HTMLElement. This HTML is put inside a div.
2017
*
2118
* @param html Text to convert.
2219
* @returns Element.
2320
*/
2421
export function convertTextToHTMLElement(html: string): HTMLElement {
25-
// Add a div to hold the content, that's the element that will be returned.
26-
CoreTemplateElement.innerHTML = '<div>' + html + '</div>';
22+
const element = document.createElement('template');
23+
24+
// Add a div to hold the content, that's the element that will be returned.
25+
element.innerHTML = '<div>' + html + '</div>';
2726

28-
return <HTMLElement> CoreTemplateElement.content.children[0];
27+
return <HTMLElement> element.content.children[0];
2928
}

0 commit comments

Comments
 (0)