Does preventClicks in Storyblok bridge actually work?

[michaelpumo]

Describe the issue you're facing

In the visual editor, I would like my users to be able to click a "card" in order to edit it. However, what is actually happening, is that the user is being navigated to another page in the site instead of being able to edit that blok.

Since the visual editor looks like a browser but is not at all a browser, this makes it even more confusing. They cannot navigate back to where they were.

I went to the docs for help and read this (from this page):

preventClicks (boolean): If you want to prevent the iframe events, like clicking on a link, to happen, you can set this option. Default is: false.

I am using it like so:

useStoryblokBridge(story.value.id, (evStory: any) => (story.value = evStory), {
  preventClicks: true
})

However, in the visual editor, I am still able to click links. Am I misunderstanding what this is actually meant to do?

It is not a good editing experience if links are activated. I would appreciate it if someone could let me know a solution to stop all <a> links from actually navigating to another place.

Reproduction

Not possible.

Steps to reproduce

1. View your site with a link in the visual editor that is also a blok.
2. Click the blok, which should jump to the field to edit.
3. Notice the link has activated and you're no longer in the right place.

System Info

System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Pro
    Memory: 700.09 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    npm: 9.5.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 119.0.6045.105
    Safari: 16.5

Used Package Manager

npm

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct

[michaelpumo]

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;
}

[codeflorist]

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,
	}
}