Describe the issue you're facing In the visual editor, I would lik

Does preventClicks in Storyblok bridge actually work? about storyblok-nuxt HOT 2 OPEN

michaelpumo commented on June 2, 2024

Does preventClicks in Storyblok bridge actually work?

from storyblok-nuxt.

Comments (2)

michaelpumo commented on June 2, 2024

I have a solution but it's a bit of a hack, it would be great to have an official way of doing this:

JavaScript

function isStoryblokEditor() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.has('_storyblok');
}

if (isStoryblokEditor()) {
  document.body.classList.add('is-storyblok-editor')
}

Use this to add a class to the body and then have CSS to disable all links.

CSS

body.is-storyblok-editor a {
  pointer-events: none !important;
}

from storyblok-nuxt.

codeflorist commented on June 2, 2024

using a seperate component like this instead of NuxtLink throughout your app is also a solution:

// e.g. /components/global/AppLink.vue
<script setup lang="ts">
const route = useRoute()

const isClickForbidden = ref(false)

onMounted(() => {
	const isStoryblokEditor = !!route.query?._storyblok
	if (isStoryblokEditor) {
		isClickForbidden.value = true
	}
})

const showClickForbiddenAlert = () => {
	// eslint-disable-next-line no-alert
	alert('Links are not clickable in the Storyblok editor. Please use the Storyblok editor navigation.')
}
</script>

<template>
	<NuxtLink :class="{ relative: isClickForbidden }">
		<div v-if="isClickForbidden" class="absolute inset-0 z-50 size-full cursor-not-allowed" @click.stop.prevent="showClickForbiddenAlert" />
		<slot />
	</NuxtLink>
</template>

classes are tailwind classes, but should be self-explainable.

here is a composable for doing the same within a renderRichText functionality:

// e.g. /utils/renderStoryblokRichText.ts
import cloneDeep from 'clone-deep'
import { type ISbRichtext, RichTextSchema } from '@storyblok/js'

export const renderStoryblokRichText = () => {
	const { localePathByUuid } = useStoryRoutes()

	const route = useRoute()
	const isStoryblokEditor = !!route.query?._storyblok

	const mySchema = cloneDeep(RichTextSchema)

	mySchema.marks.link = (node) => {
		const attrs = { ...node.attrs }
		const { linktype = 'url' } = node.attrs

		if (linktype === 'email') {
			attrs.href = `mailto:${attrs.href}`
		}

		if (linktype === 'story') {
			attrs.href = attrs.href
		}

		if (attrs.anchor) {
			attrs.href = `${attrs.href}#${attrs.anchor}`
			delete attrs.anchor
		}

		if (isStoryblokEditor) {
			attrs.onclick = "event.preventDefault(); alert('Links are not clickable in the Storyblok editor. Please use the Storyblok editor navigation.');"
		}

		return {
			tag: [
				{
					tag: 'a',
					attrs,
				},
			],
		}
	}

	const render = (richText: ISbRichtext) => {
		return renderRichText(richText, {
			schema: mySchema,
		})
	}

	return {
		render,
	}
}