MOBILE-4470 rte: Fix unable to save HTML with just media

src/core/features/editor/components/rich-text-editor/rich-text-editor.ts

@@ -45,6 +45,7 @@ import { Swiper } from 'swiper';
 import { SwiperOptions } from 'swiper/types';
 import { ContextLevel } from '@/core/constants';
 import { CoreSwiper } from '@singletons/swiper';
+import { CoreTextUtils } from '@services/utils/text';
 
 /**
  * Component to display a rich text editor if enabled.
@@ -398,7 +399,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
                 return;
             }
 
-            if (this.isNullOrWhiteSpace(this.editorElement.textContent)) {
+            if (this.isNullOrWhiteSpace(this.editorElement)) {
                 this.clearText();
             } else {
                 // The textarea and the form control must receive the original URLs.
@@ -417,7 +418,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
                 return;
             }
 
-            if (this.isNullOrWhiteSpace(this.textarea.value || '')) {
+            if (this.isNullOrWhiteSpace(this.textarea.value)) {
                 this.clearText();
             } else {
                 // Don't emit event so our valueChanges doesn't get notified by this change.
@@ -549,20 +550,17 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
     /**
      * Check if text is empty.
      *
-     * @param value text
+     * @param value Text or element containing the text.
      * @returns If value is null only a white space.
      */
-    protected isNullOrWhiteSpace(value: string | null | undefined): boolean {
+    protected isNullOrWhiteSpace(valueOrEl: string | HTMLElement | null | undefined): boolean {
-        if (value === null || value === undefined) {
+        if (valueOrEl === null || valueOrEl === undefined) {
             this.isEmpty = true;
 
             return true;
         }
 
-        value = value.replace(/[\n\r]/g, '');
+        this.isEmpty = typeof valueOrEl === 'string' ? CoreTextUtils.htmlIsBlank(valueOrEl) : !CoreDom.elementHasContent(valueOrEl);
-        value = value.split(' ').join('');
-
-        this.isEmpty = value.length === 0;
 
         return this.isEmpty;
     }

src/core/services/utils/text.ts

@@ -28,6 +28,7 @@ import { AlertButton } from '@ionic/angular';
 import { CorePath } from '@singletons/path';
 import { CorePlatform } from '@services/platform';
 import { ContextLevel } from '@/core/constants';
+import { CoreDom } from '@singletons/dom';
 
 /**
  * Different type of errors the app can treat.
@@ -588,12 +589,9 @@ export class CoreTextUtilsProvider {
             return true;
         }
 
-        this.template.innerHTML = content.trim().replace(/(\r\n|\n|\r)/g, '');
+        this.template.innerHTML = content;
-        const tags = this.template.content.querySelectorAll(
-            'img, audio, video, object, iframe, canvas, svg, input, select, textarea, frame, embed',
-        );
 
-        return this.template.content.textContent === '' && tags.length === 0;
+        return !CoreDom.elementHasContent(this.template.content);
     }
 
     /**

src/core/singletons/dom.ts

@@ -56,6 +56,23 @@ export class CoreDom {
         return CoreDom.closest<T>(node.parentNode, selector);
     }
 
+    /**
+     * Check if an element has some text or embedded content inside.
+     *
+     * @param element Element or document to check.
+     * @returns Whether has content.
+     */
+    static elementHasContent(element: Element | DocumentFragment): boolean {
+        const textContent = (element.textContent ?? '').trim().replace(/(\r\n|\n|\r)/g, '');
+        if (textContent.length > 0) {
+            return true;
+        }
+
+        return element.querySelectorAll(
+            'img, audio, video, object, iframe, canvas, svg, input, select, textarea, frame, embed',
+        ).length > 0;
+    }
+
     /**
      * Retrieve the position of a element relative to another element.
      *