fix: extend ishServerHtml mediaobject handling to handle new image re…

…source format (#1263) * images are no longer embedded with `ismediaobject` markers after TinyMCE update * added handling for simple relative image URLs into the '/INTERSHOP/' static file system
intershop · Sep 2, 2022 · c4066d4 · c4066d4
1 parent 5477d85
commit c4066d4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/app/core/directives/server-html.directive.spec.ts b/src/app/core/directives/server-html.directive.spec.ts
@@ -58,7 +58,8 @@ describe('Server Html Directive', () => {
         changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class TestComponent {
-        html = `<img src="https://./?[ismediaobject]isfile://inSPIRED-Site/inTRONICS-b2c-responsive/inSPIRED-inTRONICS-b2c-responsive/en_US/logo%402x.png|/INTERSHOP/static/WFS/inSPIRED-Site/inTRONICS-b2c-responsive/inSPIRED-inTRONICS-b2c-responsive/en_US/logo%402x.png[/ismediaobject]" alt="" width="92" height="92" style="width: unset;" />`;
+        html = `<img src="https://./?[ismediaobject]isfile://inSPIRED-Site/inTRONICS_Business/inSPIRED/en_US/logo.png|/INTERSHOP/static/WFS/inSPIRED-Site/inTRONICS_Business/inSPIRED/en_US/logo.png[/ismediaobject]" alt="logo" width="100" height="100"/>
+          <img src="/INTERSHOP/static/WFS/inSPIRED-Site/inTRONICS_Business/inSPIRED/en_US/logo.png" alt="logo" width="100" height="100"/>`;
       }
 
       const appFacade = mock(AppFacade);
@@ -82,11 +83,16 @@ describe('Server Html Directive', () => {
       expect(element).toMatchInlineSnapshot(`
         <div>
           <img
-            src="http://example.org/INTERSHOP/static/WFS/inSPIRED-Site/inTRONICS-b2c-responsive/inSPIRED-inTRONICS-b2c-responsive/en_US/logo%402x.png"
-            alt=""
-            width="92"
-            height="92"
-            style="width: unset"
+            src="http://example.org/INTERSHOP/static/WFS/inSPIRED-Site/inTRONICS_Business/inSPIRED/en_US/logo.png"
+            alt="logo"
+            width="100"
+            height="100"
+          />
+          <img
+            src="http://example.org/INTERSHOP/static/WFS/inSPIRED-Site/inTRONICS_Business/inSPIRED/en_US/logo.png"
+            alt="logo"
+            width="100"
+            height="100"
           />
         </div>
       `);

diff --git a/src/app/core/directives/server-html.directive.ts b/src/app/core/directives/server-html.directive.ts
@@ -62,8 +62,10 @@ export class ServerHtmlDirective implements AfterContentInit, AfterViewInit, OnC
     const regex = /.*\[ismediaobject\](.*?)\[\/ismediaobject\].*/;
     if (regex.test(src)) {
       const [, ismediaobjectContent] = regex.exec(src);
-      const links = ismediaobjectContent.split('|');
-      return this.appFacade.icmBaseUrl + links[links.length - 1];
+      const mediaObjectSrc = ismediaobjectContent.split('|')[1];
+      return this.appFacade.icmBaseUrl + mediaObjectSrc;
+    } else if (src.startsWith('/INTERSHOP/')) {
+      return this.appFacade.icmBaseUrl + src;
     } else {
       return src;
     }