Fix button positioning and test change for static site

Author: LZylstra

composables/useVisualEditing.ts

@@ -9,20 +9,20 @@ interface ApplyOptions {
 }
 
 export default function useVisualEditing() {
-	// Use useState for state that persists across navigation
 	const isVisualEditingEnabled = useState('visual-editing-enabled', () => false);
 	const route = useRoute();
 
 	const {
 		public: { enableVisualEditing, directusUrl },
 	} = useRuntimeConfig();
 
-	// Check query param on composable initialization.
-	if (route.query['visual-editing'] === 'true' && enableVisualEditing) {
-		isVisualEditingEnabled.value = true;
-	} else if (route.query['visual-editing'] === 'false') {
-		isVisualEditingEnabled.value = false;
-	}
+	onMounted(() => {
+		if (enableVisualEditing && route.query['visual-editing'] === 'true') {
+			isVisualEditingEnabled.value = true;
+		} else if (route.query['visual-editing'] === 'false') {
+			isVisualEditingEnabled.value = false;
+		}
+	});
 
 	const apply = (options: Pick<ApplyOptions, 'elements' | 'onSaved' | 'customClass'>) => {
 		if (!isVisualEditingEnabled.value) return;
@@ -33,7 +33,6 @@ export default function useVisualEditing() {
 		});
 	};
 
-	// Auto-apply visual editing on mount for block components
 	const autoApply = (elementSelector: string, refreshCallback?: () => Promise<void>) => {
 		onMounted(() => {
 			if (!isVisualEditingEnabled.value) return;
@@ -45,7 +44,7 @@ export default function useVisualEditing() {
 				elements: el,
 				customClass: 'visual-editing-button-class',
 				onSaved: async () => {
-					if (refreshCallback) await refreshCallback();
+					await refreshCallback?.();
 					await nextTick();
 					apply({ elements: el });
 				},

pages/[...permalink].vue

@@ -173,10 +173,7 @@ onMounted(() => {
 <template>
 	<div class="relative">
 		<PageBuilder v-if="sections" :spacing-top="page?.spacing_top" :sections="sections" />
-		<div
-			v-if="isVisualEditingEnabled && page"
-			class="fixed z-50 w-full bottom-4 left-0 right-0 p-4 flex justify-center items-center gap-2"
-		>
+		<div v-if="isVisualEditingEnabled && page" class="visual-editing-button-container">
 			<!-- If you're not using the visual editor it's safe to remove this element. Just a helper to let editors add edit / add new blocks to a page. -->
 			<BaseButton
 				id="visual-editing-button"
@@ -193,6 +190,20 @@ onMounted(() => {
 </template>
 
 <style>
+.visual-editing-button-container {
+	position: fixed;
+	z-index: 50;
+	width: 100%;
+	bottom: 1rem;
+	left: 0;
+	right: 0;
+	padding: 1rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 0.5rem;
+}
+
 .directus-visual-editing-overlay.visual-editing-button-class .directus-visual-editing-edit-button {
 	position: absolute;
 	inset: 0;