fix(edit-mode) Add absolute path to our injected CSS and JavaScript c…

…ode #26609 * dev (dot edit content html service & relatives): add absolute path to urls * dev (edit content html service): change globalThis for window * dev (iframe-edit-mode): change globalThis for window * dev (dot edit content): change window with document inject
dotCMS · Nov 8, 2023 · 3790af6 · 3790af6
1 parent cb7a9a1
commit 3790af6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/...ets/dot-edit-page/content/services/dot-edit-content-html/dot-edit-content-html.service.ts b/...ets/dot-edit-page/content/services/dot-edit-content-html/dot-edit-content-html.service.ts
@@ -1,7 +1,8 @@
 import { fromEvent, Observable, of, Subject, Subscription } from 'rxjs';
 
+import { DOCUMENT } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { ElementRef, Injectable, NgZone } from '@angular/core';
+import { ElementRef, Inject, Injectable, NgZone } from '@angular/core';
 
 import { catchError, filter, finalize, map, switchMap, take, tap } from 'rxjs/operators';
 
@@ -99,6 +100,7 @@ export class DotEditContentHtmlService {
     private remoteRendered: boolean;
     private askToCopy = true;
 
+    private readonly origin: string = '';
     private readonly docClickHandlers;
 
     get pagePersonalization() {
@@ -126,7 +128,8 @@ export class DotEditContentHtmlService {
         private dotCopyContentService: DotCopyContentService,
         private dotLoadingIndicatorService: DotLoadingIndicatorService,
         private dotSeoMetaTagsService: DotSeoMetaTagsService,
-        private dotSeoMetaTagsUtilService: DotSeoMetaTagsUtilService
+        private dotSeoMetaTagsUtilService: DotSeoMetaTagsUtilService,
+        @Inject(DOCUMENT) private document: Document
     ) {
         this.contentletEvents$.subscribe(
             (
@@ -145,6 +148,8 @@ export class DotEditContentHtmlService {
             this.docClickHandlers = {};
             this.setGlobalClickHandlers();
         }
+
+        this.origin = this.document.location.origin;
     }
 
     /**
@@ -449,7 +454,9 @@ export class DotEditContentHtmlService {
 
     private setMaterialIcons(): void {
         const doc = this.getEditPageDocument();
-        const link = this.dotDOMHtmlUtilService.createLinkElement(MATERIAL_ICONS_PATH);
+        const link = this.dotDOMHtmlUtilService.createLinkElement(
+            this.origin + MATERIAL_ICONS_PATH
+        );
         doc.head.appendChild(link);
     }
 
@@ -598,7 +605,7 @@ export class DotEditContentHtmlService {
         const editModeNodes = doc.querySelectorAll('[data-mode]');
 
         if (editModeNodes.length) {
-            const TINYMCE = `/html/js/tinymce/js/tinymce/tinymce.min.js`;
+            const TINYMCE = `${this.origin}/html/js/tinymce/js/tinymce/tinymce.min.js`;
             const tinyMceScript = this.dotDOMHtmlUtilService.creatExternalScriptElement(TINYMCE);
             const tinyMceInitScript: HTMLScriptElement =
                 this.dotDOMHtmlUtilService.createInlineScriptElement(INLINE_TINYMCE_SCRIPTS);
@@ -933,7 +940,7 @@ export class DotEditContentHtmlService {
         const href = url.split('/');
         href.pop();
 
-        base.href = href.join('/') + '/';
+        base.href = this.origin + href.join('/') + '/';
 
         return base;
     }
@@ -949,7 +956,7 @@ export class DotEditContentHtmlService {
     private setEditContentletStyles(): void {
         const timeStampId = `iframeId_${Math.floor(Date.now() / 100).toString()}`;
         const style = this.dotDOMHtmlUtilService.createStyleElement(
-            getEditPageCss(`#${timeStampId}`)
+            getEditPageCss(`#${timeStampId}`, this.origin)
         );
 
         const doc = this.getEditPageDocument();

diff --git a/...ui/src/app/portlets/dot-edit-page/content/services/html/libraries/iframe-edit-mode.css.ts b/...ui/src/app/portlets/dot-edit-page/content/services/html/libraries/iframe-edit-mode.css.ts
@@ -6,7 +6,10 @@ const mdShadow3 = '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23
 const white = '#fff';
 const grayLight = '#c5c5c5';
 
-export const getEditPageCss = (timestampId: string): string => {
+export const getEditPageCss = (
+    timestampId: string,
+    origin: string = window.location.origin
+): string => {
     return `
     // GOOGLE FONTS
     /* Assistant-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@@ -16,8 +19,8 @@ export const getEditPageCss = (timestampId: string): string => {
         font-weight: 400;
         font-display: swap;
         src: local(''),
-        url('/dotAdmin/assets/Assistant-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-        url('/dotAdmin/assets/Assistant-Regular.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+        url('${origin}/dotAdmin/assets/Assistant-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('${origin}/dotAdmin/assets/Assistant-Regular.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
     }
     /* Assistant-500 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
     @font-face {
@@ -26,8 +29,8 @@ export const getEditPageCss = (timestampId: string): string => {
         font-weight: 500;
         font-display: swap;
         src: local(''),
-        url('/dotAdmin/assets/Assistant-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-        url('/dotAdmin/assets/Assistant-SemiBold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+        url('${origin}/dotAdmin/assets/Assistant-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('${origin}/dotAdmin/assets/Assistant-SemiBold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
     }
     /* Assistant-700 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
     @font-face {
@@ -36,8 +39,8 @@ export const getEditPageCss = (timestampId: string): string => {
         font-weight: 700;
         font-display: swap;
         src: local(''),
-        url('/dotAdmin/assets/Assistant-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-        url('/dotAdmin/assets/Assistant-Bold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+        url('${origin}/dotAdmin/assets/Assistant-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('${origin}/dotAdmin/assets/Assistant-Bold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
     }
 
     ${timestampId} [data-dot-object="container"] {
@@ -416,11 +419,11 @@ export const getEditPageCss = (timestampId: string): string => {
         border: 1px solid #53c2f9 !important;
         display: block;
     }
-    
+
     ${timestampId} [data-inode][data-field-name][data-block-editor-content].dotcms__inline-edit-field {
         cursor: pointer;
     }
-    
+
     ${timestampId} .dotcms__navbar-form {
         display: inline-block;
     }