Merge pull request #1314 from storyblok/bugfix/apostrophe-issue-richtext

fix: apostrophe-issue-richtext

playground/react/App.tsx

@@ -1,14 +1,31 @@
-import { StoryblokComponent, useStoryblok } from '@storyblok/react';
 import React from 'react';
+import { BrowserRouter, Link, Route, Routes } from 'react-router';
+import Home from './pages/Home';
+import RichtextPage from './pages/RichtextPage';
 
 function App() {
-  const story = useStoryblok('home', { version: 'draft' });
+  return (
+    <BrowserRouter>
+      <div>
+        <nav>
+          <ul>
+            <li>
+              <Link to="/react">Home</Link>
+            </li>
+            <li>
+              <Link to="/react/test-richtext">Richtext</Link>
+            </li>
+          </ul>
+        </nav>
 
-  if (!story?.content) {
-    return <div>Loading...</div>;
-  }
-
-  return <StoryblokComponent blok={story.content} />;
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="react" element={<Home />} />
+          <Route path="react/test-richtext" element={<RichtextPage />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
+  );
 }
 
 export default App;

playground/react/index.tsx

@@ -10,8 +10,9 @@ import Feature from './components/feature';
 import { apiPlugin, storyblokInit } from '@storyblok/react';
 import IFrameEmbed from './components/iframe-embed';
 
+// https://app.storyblok.com/#/me/spaces/147897
 storyblokInit({
-  accessToken: 'd6IKUtAUDiKyAhpJtrLFcwtt',
+  accessToken: 'OurklwV5XsDJTIE1NJaD2wtt',
   use: [apiPlugin],
   components: {
     'teaser': Teaser,

playground/react/package.json

@@ -9,11 +9,13 @@
   "dependencies": {
     "@storyblok/react": "workspace:^",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router": "^7.1.1"
   },
   "devDependencies": {
     "@types/node": "^20.17.10",
     "@types/react": "18.3.4",
+    "@vitejs/plugin-basic-ssl": "^1.2.0",
     "vite": "^5.4.3"
   }
 }

playground/react/pages/Home.tsx

@@ -0,0 +1,19 @@
+import { StoryblokComponent, useStoryblok } from '@storyblok/react';
+import React from 'react';
+
+function Home() {
+  const story = useStoryblok('react', { version: 'draft' });
+
+  if (!story?.content) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1>Home</h1>
+      <StoryblokComponent blok={story.content} />
+    </div>
+  );
+}
+
+export default Home;

playground/react/pages/RichtextPage.tsx

@@ -0,0 +1,16 @@
+import { StoryblokRichText, useStoryblok } from '@storyblok/react';
+import React from 'react';
+
+function RichtextPage() {
+  const story = useStoryblok('react/test-richtext', { version: 'draft' });
+
+  if (!story?.content) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    story.content.richText && <StoryblokRichText doc={story.content.richText} />
+  );
+}
+
+export default RichtextPage;

playground/react/vite.config.ts

@@ -1,9 +1,13 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'node:path';
+import basicSsl from '@vitejs/plugin-basic-ssl';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    basicSsl(),
+  ],
   resolve: {
     alias: {
       '@storyblok/react': resolve(__dirname, '../../src/index.ts'),