fix(edit-content-2): Internal Links Navigation Bug (#28147)

dotCMS · Apr 4, 2024 · 74dd086 · 74dd086
1 parent 2e4fb8a
commit 74dd086
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 0 deletions.
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/store/dot-ema.store.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/store/dot-ema.store.spec.ts
@@ -117,6 +117,13 @@ describe('EditEmaStore', () => {
         });
 
         describe('selectors', () => {
+            it('should return page url', (done) => {
+                spectator.service.url$.subscribe((url) => {
+                    expect(url).toEqual('test-url');
+                    done();
+                });
+            });
+
             it('should return editorState', (done) => {
                 spectator.service.editorState$.subscribe((state) => {
                     expect(state).toEqual({

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/store/dot-ema.store.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/store/dot-ema.store.ts
@@ -83,6 +83,8 @@ export class EditEmaStore extends ComponentStore<EditEmaState> {
      * Selectors
      *******************/
 
+    readonly url$ = this.select((state) => state.editor.page.pageURI);
+
     readonly code$ = this.select((state) => state.editor.page.rendered);
 
     readonly stateLoad$ = this.select((state) => state.editorState);

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts
@@ -266,6 +266,36 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy {
             .subscribe((event: MessageEvent) => {
                 this.handlePostMessage(event)?.();
             });
+
+        // In VTL Page if user click in a link in the page, we need to update the URL in the editor
+        this.store.url$
+            .pipe(
+                takeUntil(this.destroy$),
+                filter(() => this.isVTLPage())
+            )
+            .subscribe(() => {
+                requestAnimationFrame(() => {
+                    this.iframe.nativeElement.contentWindow.addEventListener('click', (e) => {
+                        const href =
+                            (e.target as HTMLAnchorElement).href ||
+                            ((e.target as HTMLElement).closest('a') as HTMLAnchorElement).href;
+
+                        if (href) {
+                            const url = new URL(href);
+
+                            // Check if the URL is not external
+                            if (url.hostname === window.location.hostname) {
+                                e.preventDefault();
+
+                                this.updateQueryParams({
+                                    url: url.pathname
+                                });
+                            }
+                        }
+                    });
+                });
+            });
+
         // Think is not necessary, if is Headless, it init as loading. If is VTL, init as Loaded
         // So here is re-set to loading in Headless and prevent VTL to hide the progressbar
         // this.store.updateEditorState(EDITOR_STATE.LOADING);