Merge branch 'master' of https://github.com/RicLeP/laravel-storyblok

Author: RicLeP

config/storyblok.php

@@ -249,6 +249,17 @@
     */
     'live_element' => '.storyblok-live',
 
+    /*
+    |--------------------------------------------------------------------------
+    | Allow live preview links
+    |--------------------------------------------------------------------------
+    |
+    | Links in the visual editor will be clickable and navigate to the page
+    | with the Storyblok editing query string appended
+    |
+    */
+    'live_links' => true,
+
     /*
     |--------------------------------------------------------------------------
     | Name of the field to be used for settings

src/Http/Controllers/LiveContentController.php

@@ -29,7 +29,7 @@ public function show(Request $request): string
 
 		$page = Storyblok::setData($data['story'])->render();
 		$dom = new HTML5DOMDocument();
-		$dom->loadHTML($page);
+        $dom->loadHTML($page, HTML5DOMDocument::ALLOW_DUPLICATE_IDS);
 
 		return $dom->querySelector(config('storyblok.live_element'))->innerHTML;
 	}

src/resources/views/editor-bridge.blade.php

@@ -13,27 +13,74 @@
 		});
 
 		@if (config('storyblok.live_preview'))
-		storyblokInstance.on('input', (event) => {
-			const CancelToken = axios.CancelToken;
-			let source = CancelToken.source();
-
-			source && source.cancel('Operation canceled due to new request.');
-
-			// save the new request for cancellation
-			source = axios.CancelToken.source();
-
-			axios.post('{{ url()->current() }}', {
-				data: event
-			}, {
-				cancelToken: source.token
-			}).then((response) => {
-				document.querySelector('{{ config('storyblok.live_element') }}').innerHTML = response.data;
-
-				const storyblokInstance = new StoryblokBridge({
-					accessToken: '{{ config('storyblok.api_preview_key') }}'
-				});
-			});
-		});
+            storyblokInstance.on('input', (event) => {
+                const CancelToken = axios.CancelToken;
+                let source = CancelToken.source();
+
+                source && source.cancel('Operation canceled due to new request.');
+
+                // save the new request for cancellation
+                source = axios.CancelToken.source();
+
+                axios.post(@js(request()->getRequestUri()), {
+                    data: event
+                }, {
+                    cancelToken: source.token
+                }).then((response) => {
+                    document.querySelector('{{ config('storyblok.live_element') }}').innerHTML = response.data;
+
+                    @if (config('storyblok.live_links'))
+                        document.dispatchEvent(new Event('DOMContentLoaded'));
+                    @endif
+
+                    const storyblokInstance = new StoryblokBridge({
+                        accessToken: '{{ config('storyblok.api_preview_key') }}'
+                    });
+                });
+            });
 		@endif
+
+
+        @if (config('storyblok.live_links'))
+            function appendQueryParamsToPath(path) {
+                const link = new URL(path, window.location.origin);
+                if (link.origin !== window.location.origin) {
+                    return path;
+                }
+
+                const currentUrl = window.location.href;
+                const queryParams = currentUrl.split('?')[1];
+
+                if (queryParams) {
+                    path += (path.includes('?') ? '&' : '?') + queryParams;
+                }
+
+                return path;
+            }
+
+            function updateAllLinks() {
+                const urlParams = new URLSearchParams(window.location.search);
+                let condition = false;
+
+                for (const [key] of urlParams) {
+                    if (key.startsWith('_storyblok')) {
+                        condition = true;
+                        break;
+                    }
+                }
+
+                if (condition) {
+                    const links = document.querySelectorAll('a[href]');
+
+                    links.forEach(link => {
+                        const originalHref = link.getAttribute('href');
+                        const updatedHref = appendQueryParamsToPath(originalHref);
+                        link.setAttribute('href', updatedHref);
+                    });
+                }
+            }
+
+            document.addEventListener('DOMContentLoaded', updateAllLinks);
+        @endif
 	</script>
-@endif
+@endif