fix(rsc): prevent draft content leaks in visual editor (#1337)

* fix(rsc): prevent draft content leaks in visual editor

- Add proper cleanup of story cache after use
- Improve type safety in live editing components
- Optimize visual editor detection logic
- Add defensive initialization of global story cache

* fix: remove internalid property check as it's not in our story interface

src/__tests__/live-editing.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest';
+import StoryblokLiveEditing from '../rsc/live-editing';
+import type { ISbStoryData } from '@storyblok/js';
+
+describe('storyblokLiveEditing', () => {
+  it('should return null when not in visual editor', () => {
+    const component = StoryblokLiveEditing({ story: { uuid: '123' } as ISbStoryData, bridgeOptions: {} });
+    expect(component).toBeNull();
+  });
+});

src/common/client.ts

@@ -10,7 +10,7 @@ export const useStoryblokState: TUseStoryblokState = (
 ) => {
   const [story, setStory] = useState(initialStory);
 
-  const storyId = (initialStory as any)?.internalId ?? initialStory?.id ?? 0;
+  const storyId = initialStory?.id ?? 0;
   const isBridgeEnabled = typeof window !== 'undefined'
     && typeof window.storyblokRegisterEvent !== 'undefined';
 

src/rsc/common.ts

@@ -11,7 +11,12 @@ const componentsMap: Map<string, React.ElementType> = new Map<string, React.Elem
 let enableFallbackComponent: boolean = false;
 let customFallbackComponent: React.ElementType = null;
 
-globalThis.storyCache = new Map<string, ISbStoryData>();
+declare global {
+  // eslint-disable-next-line no-var, vars-on-top
+  var storyCache: Map<string, ISbStoryData>;
+}
+
+globalThis.storyCache = !globalThis.storyCache ? new Map<string, ISbStoryData>() : globalThis.storyCache;
 
 export const useStoryblokApi = (): StoryblokClient => {
   if (!storyblokApiInstance) {

src/rsc/live-edit-update-action.ts

@@ -1,6 +1,8 @@
 'use server';
 
-export async function liveEditUpdateAction({ story, pathToRevalidate }) {
+import type { ISbStoryData } from '@storyblok/js';
+
+export async function liveEditUpdateAction({ story, pathToRevalidate }: { story: ISbStoryData; pathToRevalidate: string }) {
   if (!story || !pathToRevalidate) {
     return console.error('liveEditUpdateAction: story or pathToRevalidate is not provided');
   }

src/rsc/live-editing.tsx

@@ -1,15 +1,22 @@
 'use client';
 
-import { registerStoryblokBridge } from '@storyblok/js';
+import { type ISbStoryData, registerStoryblokBridge, type StoryblokBridgeConfigV2 } from '@storyblok/js';
 import { startTransition, useEffect } from 'react';
 import { liveEditUpdateAction } from './live-edit-update-action';
 
-const StoryblokLiveEditing = ({ story = null, bridgeOptions = {} }) => {
+const isVisualEditor = (): boolean => {
   if (typeof window === 'undefined') {
+    return false;
+  }
+  return typeof window.storyblokRegisterEvent !== 'undefined' && window.location.search.includes('_storyblok');
+};
+
+const StoryblokLiveEditing = ({ story = null, bridgeOptions = {} }: { story: ISbStoryData; bridgeOptions: StoryblokBridgeConfigV2 }) => {
+  if (!isVisualEditor()) {
     return null;
   }
 
-  const handleInput = (story) => {
+  const handleInput = (story: ISbStoryData) => {
     if (!story) {
       return;
     }
@@ -18,7 +25,7 @@ const StoryblokLiveEditing = ({ story = null, bridgeOptions = {} }) => {
     });
   };
 
-  const storyId = story?.internalId ?? story?.id ?? 0;
+  const storyId = story?.id ?? 0;
   useEffect(() => {
     registerStoryblokBridge(storyId, newStory => handleInput(newStory), bridgeOptions);
   }, []);

src/rsc/story.tsx

@@ -19,6 +19,8 @@ const StoryblokStory = forwardRef<HTMLElement, StoryblokStoryProps>(
 
     if (globalThis.storyCache.has(story.uuid)) {
       story = globalThis.storyCache.get(story.uuid);
+      // Delete the story from the cache to avoid draft content leaking
+      globalThis.storyCache.delete(story.uuid);
     }
 
     if (typeof story.content === 'string') {