Merge pull request #4214 from albertgasset/MOBILE-4616-database

MOBILE-4616 database: Fix loading of custom CSS and templates

src/core/features/compile/components/compile-html/compile-html.ts

@@ -91,6 +91,7 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
     protected differ: KeyValueDiffer<unknown, unknown>; // To detect changes in the jsData input.
     protected creatingComponent = false;
     protected pendingCalls = {};
+    protected componentStyles = '';
 
     constructor(
         protected changeDetector: ChangeDetectorRef,
@@ -152,7 +153,7 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
                     componentClass,
                     this.container,
                     this.extraImports,
-                    this.cssCode,
+                    this.componentStyles,
                 );
 
                 this.element.addEventListener('submit', (event) => {
@@ -185,7 +186,7 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
     protected async loadCSSCode(): Promise<void> {
         // Do not allow (yet) to load CSS code to a component that doesn't have text.
         if (!this.text) {
-            this.cssCode = '';
+            this.componentStyles = '';
 
             return;
         }
@@ -196,10 +197,12 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
 
         // Prepend all CSS rules with :host to avoid conflicts.
         if (!this.cssCode || this.cssCode.includes(':host')) {
+            this.componentStyles = this.cssCode ?? '';
+
             return;
         }
 
-        this.cssCode =  CoreDom.prefixCSS(this.cssCode, ':host ::ng-deep', ':host');
+        this.componentStyles = CoreDom.prefixCSS(this.cssCode, ':host ::ng-deep', ':host');
     }
 
     /**

src/core/services/utils/dom.ts

@@ -262,7 +262,11 @@ export class CoreDomUtilsProvider {
      * @returns Fixed HTML text.
      */
     fixHtml(html: string): string {
-        return CoreText.processHTML(html, (element) => {
+        // We can't use CoreText.processHTML because it removes elements that
+        // are not allowed as a child of <div>, like <li> or <tr>.
+        const template = document.createElement('template');
+        template.innerHTML = html;
+
         // eslint-disable-next-line no-control-regex
         const attrNameRegExp = /[^\x00-\x20\x7F-\x9F"'>/=]+/;
         const fixElement = (element: Element): void => {
@@ -276,9 +280,9 @@ export class CoreDomUtilsProvider {
             Array.from(element.children).forEach(fixElement);
         };
 
-            Array.from(element.children).forEach(fixElement);
-        });
+         Array.from(template.content.children).forEach(fixElement);
 
+         return template.innerHTML;
     }
 
     /**

src/core/singletons/text.ts

@@ -418,6 +418,7 @@ export class CoreText {
 
     /**
      * Process HTML string.
+     * Warning: Top-level elements that are not allowed as a child of <div> (like <tr> or <li>) will be removed.
      *
      * @param text HTML string.
      * @param process Method to process the HTML.

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

@@ -14,6 +14,7 @@
 
 /**
  * Convert some HTML as text into an HTMLElement. This HTML is put inside a div.
+ * Warning: Top-level elements that are not allowed as a child of <div> (like <tr> or <li>) will be removed.
  *
  * @param html Text to convert.
  * @returns Element.