From 25e908824c654e3ccb2ee50be94cb790e7918dc8 Mon Sep 17 00:00:00 2001
From: Darginec05 <devopsbanda@gmail.com>
Date: Fri, 19 Jul 2024 00:42:14 +0200
Subject: [PATCH] add example for multi page editors

---
 .../CheckSourceCode/CheckSourceCode.tsx       |   8 +-
 .../examples/withBaseFullSetup/initValue.ts   | 178 +++++-------
 .../withMultiPageEditors/EveryPageContent.tsx | 140 +++++++++
 .../examples/withMultiPageEditors/db.json     | 267 ++++++++++++++++++
 .../examples/withMultiPageEditors/index.tsx   | 127 ++-------
 web/next-example/src/components/ui/sheet.tsx  |  33 ++-
 .../src/pages/examples/[example].tsx          |   8 +-
 .../examples/withMultiPageEditors/[page].tsx  |  31 ++
 8 files changed, 561 insertions(+), 231 deletions(-)
 create mode 100644 web/next-example/src/components/examples/withMultiPageEditors/EveryPageContent.tsx
 create mode 100644 web/next-example/src/components/examples/withMultiPageEditors/db.json
 create mode 100644 web/next-example/src/pages/examples/withMultiPageEditors/[page].tsx

diff --git a/web/next-example/src/components/CheckSourceCode/CheckSourceCode.tsx b/web/next-example/src/components/CheckSourceCode/CheckSourceCode.tsx
index ced04dc9f..25073c934 100644
--- a/web/next-example/src/components/CheckSourceCode/CheckSourceCode.tsx
+++ b/web/next-example/src/components/CheckSourceCode/CheckSourceCode.tsx
@@ -1,10 +1,11 @@
 import { ExternalLinkIcon, StarIcon } from 'lucide-react';
 
 type Props = {
-  example: string;
+  example?: string;
+  directLink?: string;
 };
 
-const CheckSourceCode = ({ example }: Props) => {
+const CheckSourceCode = ({ example, directLink }: Props) => {
   return (
     <div className="fixed md:top-2 md:right-2  top-[14.5px] right-[18px] flex z-50">
       <button
@@ -19,7 +20,8 @@ const CheckSourceCode = ({ example }: Props) => {
       <button
         onClick={() =>
           window.open(
-            `https://github.com/Darginec05/Yoopta-Editor/blob/master/web/next-example/src/components/examples/${example}/index.tsx`,
+            directLink ||
+              `https://github.com/Darginec05/Yoopta-Editor/blob/master/web/next-example/src/components/examples/${example}/index.tsx`,
             '_blank',
           )
         }
diff --git a/web/next-example/src/components/examples/withBaseFullSetup/initValue.ts b/web/next-example/src/components/examples/withBaseFullSetup/initValue.ts
index 7dfe84e79..1a4b3ebe2 100644
--- a/web/next-example/src/components/examples/withBaseFullSetup/initValue.ts
+++ b/web/next-example/src/components/examples/withBaseFullSetup/initValue.ts
@@ -48,7 +48,7 @@ export const WITH_BASIC_INIT_VALUE = {
     id: '7e3ef31f-a72d-467d-b17e-e09d2b0f9475',
     type: 'HeadingTwo',
     meta: {
-      order: 7,
+      order: 3,
       depth: 0,
     },
     value: [
@@ -84,7 +84,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 8,
+      order: 4,
       depth: 0,
     },
   },
@@ -106,7 +106,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 14,
+      order: 10,
       depth: 0,
     },
   },
@@ -128,7 +128,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 17,
+      order: 13,
       depth: 0,
     },
   },
@@ -150,7 +150,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 11,
+      order: 7,
       depth: 0,
     },
   },
@@ -172,7 +172,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 18,
+      order: 14,
       depth: 0,
     },
   },
@@ -194,7 +194,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 19,
+      order: 15,
       depth: 0,
     },
   },
@@ -216,7 +216,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 26,
+      order: 22,
       depth: 0,
     },
   },
@@ -242,7 +242,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 27,
+      order: 23,
       depth: 0,
     },
   },
@@ -264,7 +264,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 15,
+      order: 11,
       depth: 0,
     },
   },
@@ -289,7 +289,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 30,
+      order: 26,
       depth: 0,
     },
   },
@@ -311,7 +311,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 31,
+      order: 27,
       depth: 0,
     },
   },
@@ -333,7 +333,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 12,
+      order: 8,
       depth: 0,
     },
   },
@@ -355,7 +355,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 25,
+      order: 21,
       depth: 0,
     },
   },
@@ -377,7 +377,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 28,
+      order: 24,
       depth: 0,
     },
   },
@@ -399,7 +399,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'Paragraph',
     meta: {
-      order: 32,
+      order: 28,
       depth: 0,
     },
   },
@@ -421,7 +421,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 13,
+      order: 9,
       depth: 0,
     },
   },
@@ -443,7 +443,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 20,
+      order: 16,
       depth: 0,
     },
   },
@@ -465,7 +465,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 24,
+      order: 20,
       depth: 0,
     },
   },
@@ -487,7 +487,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 29,
+      order: 25,
       depth: 0,
     },
   },
@@ -495,7 +495,7 @@ export const WITH_BASIC_INIT_VALUE = {
     id: '6184a767-f56e-4856-bed4-82f970b5fce8',
     type: 'Blockquote',
     meta: {
-      order: 6,
+      order: 2,
       depth: 0,
     },
     value: [
@@ -543,7 +543,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'Image',
     meta: {
-      order: 44,
+      order: 40,
       depth: 0,
     },
   },
@@ -581,7 +581,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'HeadingThree',
     meta: {
-      order: 43,
+      order: 39,
       depth: 0,
     },
   },
@@ -603,7 +603,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 23,
+      order: 19,
       depth: 1,
     },
   },
@@ -625,7 +625,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 21,
+      order: 17,
       depth: 0,
     },
   },
@@ -647,7 +647,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 9,
+      order: 5,
       depth: 0,
     },
   },
@@ -677,7 +677,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'Image',
     meta: {
-      order: 46,
+      order: 42,
       depth: 0,
     },
   },
@@ -685,7 +685,7 @@ export const WITH_BASIC_INIT_VALUE = {
     id: '7d3f395b-656d-46af-924c-b88b9974f631',
     type: 'HeadingThree',
     meta: {
-      order: 45,
+      order: 41,
       depth: 0,
     },
     value: [
@@ -738,7 +738,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 16,
+      order: 12,
       depth: 0,
     },
   },
@@ -760,7 +760,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 22,
+      order: 18,
       depth: 0,
     },
   },
@@ -782,7 +782,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'Paragraph',
     meta: {
-      order: 47,
+      order: 43,
       depth: 0,
     },
   },
@@ -790,7 +790,7 @@ export const WITH_BASIC_INIT_VALUE = {
     id: '697aa54b-aea0-4a88-82e5-ec5a6f2c5791',
     type: 'HeadingThree',
     meta: {
-      order: 3,
+      order: 52,
       depth: 0,
       align: 'center',
     },
@@ -827,7 +827,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'HeadingTwo',
     meta: {
-      order: 33,
+      order: 29,
       depth: 0,
     },
   },
@@ -849,7 +849,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 34,
+      order: 30,
       depth: 0,
     },
   },
@@ -871,7 +871,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 35,
+      order: 31,
       depth: 0,
     },
   },
@@ -893,7 +893,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 36,
+      order: 32,
       depth: 0,
     },
   },
@@ -915,7 +915,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 37,
+      order: 33,
       depth: 0,
     },
   },
@@ -937,7 +937,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 38,
+      order: 34,
       depth: 0,
     },
   },
@@ -973,7 +973,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 39,
+      order: 35,
       depth: 0,
     },
   },
@@ -995,7 +995,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 40,
+      order: 36,
       depth: 0,
     },
   },
@@ -1017,7 +1017,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 41,
+      order: 37,
       depth: 0,
     },
   },
@@ -1039,7 +1039,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 49,
+      order: 45,
       depth: 0,
     },
   },
@@ -1061,29 +1061,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 50,
-      depth: 0,
-    },
-  },
-  'd62df7dd-8560-445b-8374-fcd5299029d3': {
-    id: 'd62df7dd-8560-445b-8374-fcd5299029d3',
-    value: [
-      {
-        id: 'e8510c43-606c-430d-ac81-87f29cacf65e',
-        type: 'bulleted-list',
-        children: [
-          {
-            text: 'Copy/paste with selected blocks',
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    type: 'BulletedList',
-    meta: {
-      order: 51,
+      order: 46,
       depth: 0,
     },
   },
@@ -1105,7 +1083,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 54,
+      order: 49,
       depth: 0,
     },
   },
@@ -1127,7 +1105,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'HeadingTwo',
     meta: {
-      order: 48,
+      order: 44,
       depth: 0,
     },
   },
@@ -1149,7 +1127,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 52,
+      order: 47,
       depth: 0,
     },
   },
@@ -1171,7 +1149,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'Paragraph',
     meta: {
-      order: 42,
+      order: 38,
       depth: 0,
     },
   },
@@ -1193,7 +1171,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'Paragraph',
     meta: {
-      order: 55,
+      order: 50,
       depth: 0,
     },
   },
@@ -1215,7 +1193,7 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'BulletedList',
     meta: {
-      order: 53,
+      order: 48,
       depth: 0,
     },
   },
@@ -1239,33 +1217,10 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'Code',
     meta: {
-      order: 10,
+      order: 6,
       depth: 1,
     },
   },
-  'ffb4470c-d951-4ed2-b446-c1a07650c550': {
-    id: 'ffb4470c-d951-4ed2-b446-c1a07650c550',
-    value: [
-      {
-        id: '7dee490c-3f3a-419b-b5d4-7915650cdb3c',
-        type: 'paragraph',
-        children: [
-          {
-            text: '---',
-          },
-        ],
-        props: {
-          nodeType: 'block',
-        },
-      },
-    ],
-    type: 'Paragraph',
-    meta: {
-      order: 5,
-      depth: 0,
-      align: 'center',
-    },
-  },
   '62bcd227-f42c-426d-8b3a-9bff70b5308d': {
     id: '62bcd227-f42c-426d-8b3a-9bff70b5308d',
     value: [
@@ -1509,16 +1464,16 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'Accordion',
     meta: {
-      order: 4,
+      order: 53,
       depth: 0,
       align: 'center',
     },
   },
-  '39f639c6-219f-4cb7-a817-cb9f4d6ea07c': {
-    id: '39f639c6-219f-4cb7-a817-cb9f4d6ea07c',
+  'af160b51-1a96-4bf8-bded-8f5e1c789cb5': {
+    id: 'af160b51-1a96-4bf8-bded-8f5e1c789cb5',
     value: [
       {
-        id: '022419d3-449c-4bfd-b4fb-e87060083aea',
+        id: '95240a3f-3703-4fa8-9ad9-b66de052007f',
         type: 'paragraph',
         children: [
           {
@@ -1532,7 +1487,30 @@ export const WITH_BASIC_INIT_VALUE = {
     ],
     type: 'Paragraph',
     meta: {
-      order: 2,
+      order: 51,
+      depth: 0,
+      align: 'center',
+    },
+  },
+  'f4bd961e-fc9e-4cfe-b7b7-f41850a5e9d9': {
+    id: 'f4bd961e-fc9e-4cfe-b7b7-f41850a5e9d9',
+    value: [
+      {
+        id: '95240a3f-3703-4fa8-9ad9-b66de052007f',
+        type: 'paragraph',
+        children: [
+          {
+            text: '---',
+          },
+        ],
+        props: {
+          nodeType: 'block',
+        },
+      },
+    ],
+    type: 'Paragraph',
+    meta: {
+      order: 54,
       depth: 0,
       align: 'center',
     },
diff --git a/web/next-example/src/components/examples/withMultiPageEditors/EveryPageContent.tsx b/web/next-example/src/components/examples/withMultiPageEditors/EveryPageContent.tsx
new file mode 100644
index 000000000..1e0b1eded
--- /dev/null
+++ b/web/next-example/src/components/examples/withMultiPageEditors/EveryPageContent.tsx
@@ -0,0 +1,140 @@
+import YooptaEditor, {
+  createYooptaEditor,
+  Elements,
+  Blocks,
+  useYooptaEditor,
+  YooptaContentValue,
+  generateId,
+} from '@yoopta/editor';
+
+import Paragraph from '@yoopta/paragraph';
+import Blockquote from '@yoopta/blockquote';
+import Embed from '@yoopta/embed';
+import Image from '@yoopta/image';
+import Link from '@yoopta/link';
+import Callout from '@yoopta/callout';
+import Video from '@yoopta/video';
+import File from '@yoopta/file';
+import Accordion from '@yoopta/accordion';
+import { NumberedList, BulletedList, TodoList } from '@yoopta/lists';
+import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';
+import { HeadingOne, HeadingThree, HeadingTwo } from '@yoopta/headings';
+import Code from '@yoopta/code';
+import ActionMenuList, { DefaultActionMenuRender } from '@yoopta/action-menu-list';
+import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';
+import LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool';
+
+import { uploadToCloudinary } from '@/utils/cloudinary';
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import PAGES_DATA from './db.json';
+
+const plugins = [
+  Paragraph,
+  Accordion,
+  HeadingOne,
+  HeadingTwo,
+  HeadingThree,
+  Blockquote,
+  Callout,
+  NumberedList,
+  BulletedList,
+  TodoList,
+  Code,
+  Link,
+  Embed,
+  Image.extend({
+    options: {
+      async onUpload(file) {
+        const data = await uploadToCloudinary(file, 'image');
+
+        return {
+          src: data.secure_url,
+          alt: 'cloudinary',
+          sizes: {
+            width: data.width,
+            height: data.height,
+          },
+        };
+      },
+    },
+  }),
+  Video.extend({
+    options: {
+      onUpload: async (file) => {
+        const data = await uploadToCloudinary(file, 'video');
+        return {
+          src: data.secure_url,
+          alt: 'cloudinary',
+          sizes: {
+            width: data.width,
+            height: data.height,
+          },
+        };
+      },
+    },
+  }),
+  File.extend({
+    options: {
+      onUpload: async (file) => {
+        const response = await uploadToCloudinary(file, 'auto');
+        return { src: response.url };
+      },
+    },
+  }),
+];
+
+const TOOLS = {
+  ActionMenu: {
+    render: DefaultActionMenuRender,
+    tool: ActionMenuList,
+  },
+  Toolbar: {
+    render: DefaultToolbarRender,
+    tool: Toolbar,
+  },
+  LinkTool: {
+    render: DefaultLinkToolRender,
+    tool: LinkTool,
+  },
+};
+
+const MARKS = [Bold, Italic, CodeMark, Underline, Strike, Highlight];
+
+function EveryPageContent({ pageId }) {
+  const editor = useMemo(() => createYooptaEditor(), []);
+  const selectionRef = useRef(null);
+  const [pageContent, setPageContent] = useState<YooptaContentValue | null>(null);
+  const [editorId, setEditorId] = useState<string>(generateId());
+
+  useEffect(() => {
+    if (pageId) {
+      const pageData = PAGES_DATA[pageId];
+
+      if (pageData) {
+        setEditorId(generateId());
+        setPageContent(pageData.content);
+      }
+    }
+  }, [pageId]);
+
+  return (
+    <div className="md:py-[100px] md:pl-[200px] md:pr-[80px] px-[20px] pt-[80px] pb-[40px] flex flex-col justify-center items-center">
+      <div ref={selectionRef}>
+        {pageId && pageContent && (
+          <YooptaEditor
+            // [!!!NOTE] provide this prop
+            key={editorId}
+            editor={editor}
+            plugins={plugins}
+            tools={TOOLS}
+            marks={MARKS}
+            selectionBoxRoot={selectionRef}
+            value={pageContent}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { EveryPageContent };
diff --git a/web/next-example/src/components/examples/withMultiPageEditors/db.json b/web/next-example/src/components/examples/withMultiPageEditors/db.json
new file mode 100644
index 000000000..7ba7012e4
--- /dev/null
+++ b/web/next-example/src/components/examples/withMultiPageEditors/db.json
@@ -0,0 +1,267 @@
+{
+  "page_1": {
+    "title": "Page 1",
+    "content": {
+      "77c1347f-bf55-43d0-b691-34f4138d1755": {
+        "id": "77c1347f-bf55-43d0-b691-34f4138d1755",
+        "value": [
+          {
+            "id": "ee693755-17c5-4abc-b620-a21a8b3af600",
+            "type": "heading-one",
+            "props": {
+              "nodeType": "block"
+            },
+            "children": [
+              {
+                "text": "Data from Page 1"
+              }
+            ]
+          }
+        ],
+        "type": "HeadingOne",
+        "meta": {
+          "order": 0,
+          "depth": 0
+        }
+      },
+      "fb3b71ce-94e3-456d-afd7-d3dfc9386050": {
+        "id": "fb3b71ce-94e3-456d-afd7-d3dfc9386050",
+        "value": [
+          {
+            "id": "3778d845-510c-4ad5-aa05-17f6b12daba4",
+            "type": "paragraph",
+            "children": [
+              {
+                "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sem risus, imperdiet non egestas ut, mollis sit amet lorem. Fusce maximus, metus scelerisque efficitur dapibus, lacus tellus feugiat ante, at volutpat quam turpis vel elit. Nullam eu nisi sit amet ex rutrum dapibus et quis enim. Integer tristique convallis porttitor. Sed sit amet euismod ante, sit amet ultrices dolor. Sed tincidunt mollis dictum. Etiam euismod tortor mauris, a luctus massa porttitor a. Cras placerat molestie tempus. Ut sollicitudin non est ut commodo. Integer sem nulla, suscipit sit amet fringilla eu, pharetra quis lorem. Morbi purus metus, dignissim ut porttitor nec, congue ut ante. Aenean mattis mollis neque non ultricies. Nullam maximus elit non imperdiet sodales. Nam arcu enim, eleifend in bibendum sit amet, auctor et odio."
+              }
+            ],
+            "props": {
+              "nodeType": "block"
+            }
+          }
+        ],
+        "type": "Paragraph",
+        "meta": {
+          "order": 1,
+          "depth": 0
+        }
+      }
+    }
+  },
+  "page_2": {
+    "title": "Page 2",
+    "content": {
+      "2c8ae2bc-192b-42d1-92e0-c3cdcee769fc": {
+        "id": "2c8ae2bc-192b-42d1-92e0-c3cdcee769fc",
+        "value": [
+          {
+            "id": "c47efc02-d447-4dca-b783-2a1944d2b7cf",
+            "type": "heading-one",
+            "props": {
+              "nodeType": "block"
+            },
+            "children": [
+              {
+                "text": "Data from Page 2"
+              }
+            ]
+          }
+        ],
+        "type": "HeadingOne",
+        "meta": {
+          "order": 0,
+          "depth": 0
+        }
+      },
+      "ed1b288b-689d-467a-bb8b-141ae44283c1": {
+        "id": "ed1b288b-689d-467a-bb8b-141ae44283c1",
+        "type": "Callout",
+        "meta": {
+          "order": 1,
+          "depth": 0
+        },
+        "value": [
+          {
+            "id": "fc1c0715-bc59-4fe6-9380-90fe5c44e1d5",
+            "type": "callout",
+            "children": [
+              {
+                "text": "Mauris id consectetur lectus, nec sollicitudin ipsum. Mauris ullamcorper sodales interdum. Sed aliquam tristique leo vitae condimentum. Quisque fringilla, ipsum fringilla tincidunt feugiat, massa neque vulputate eros, a facilisis felis arcu vitae lectus. Quisque sed tincidunt elit. Nulla ante lacus, condimentum eleifend dapibus quis, posuere id turpis. Morbi porttitor non turpis sed hendrerit. Nullam semper, ligula sit amet tempus finibus, eros ante luctus nibh, vitae sagittis mauris justo vel ante. Nunc dolor erat, viverra vel augue ut, pellentesque malesuada diam. In ut orci a erat sagittis sagittis et vitae nibh. Quisque blandit purus eget tristique eleifend. Curabitur sit amet nisl mollis, semper tortor ac, cursus erat. Nulla vehicula ultricies rutrum. Aliquam quis maximus erat, sed pretium urna. Duis fermentum in ipsum consequat porttitor."
+              }
+            ],
+            "props": {
+              "nodeType": "block",
+              "theme": "info"
+            }
+          }
+        ]
+      }
+    }
+  },
+  "page_3": {
+    "title": "Page 3",
+    "content": {
+      "9cbb480a-0ead-4811-b115-616482ad2761": {
+        "id": "9cbb480a-0ead-4811-b115-616482ad2761",
+        "value": [
+          {
+            "id": "bab625bd-cfe8-4d19-9a1c-e0771bd1580f",
+            "type": "heading-one",
+            "props": {
+              "nodeType": "block"
+            },
+            "children": [
+              {
+                "text": "Data from Page 3"
+              }
+            ]
+          }
+        ],
+        "type": "HeadingOne",
+        "meta": {
+          "order": 0,
+          "depth": 0
+        }
+      },
+      "cbebd17a-6676-4f55-adcf-26eb83e6b276": {
+        "id": "cbebd17a-6676-4f55-adcf-26eb83e6b276",
+        "type": "Blockquote",
+        "meta": {
+          "order": 1,
+          "depth": 0
+        },
+        "value": [
+          {
+            "id": "edab59e2-9f3c-449d-adb8-487bfaf8714a",
+            "type": "blockquote",
+            "children": [
+              {
+                "text": "Maecenas quis nunc sit amet orci blandit pellentesque. Integer auctor ultricies lectus, sit amet pharetra dui ullamcorper ac. Sed luctus fermentum tellus, nec venenatis massa facilisis non. Nullam viverra non ante vel iaculis. Cras venenatis dolor a purus placerat, quis pretium quam varius. Aenean id dolor malesuada, accumsan massa at, ullamcorper dolor. Aliquam at malesuada nisl, sit amet rhoncus elit."
+              }
+            ],
+            "props": {
+              "nodeType": "block"
+            }
+          }
+        ]
+      }
+    }
+  },
+  "page_4": {
+    "title": "Page 4",
+    "content": {
+      "5de7ca1c-9f9c-4bd1-85ff-2b4dc942d99e": {
+        "id": "5de7ca1c-9f9c-4bd1-85ff-2b4dc942d99e",
+        "value": [
+          {
+            "id": "d0e42ed5-bb5b-42a7-a447-ce261ac0dc65",
+            "type": "heading-one",
+            "props": {
+              "nodeType": "block"
+            },
+            "children": [
+              {
+                "text": "Data from Page 4"
+              }
+            ]
+          }
+        ],
+        "type": "HeadingOne",
+        "meta": {
+          "order": 0,
+          "depth": 0
+        }
+      },
+      "0d0835a9-e620-4bc8-be8b-a4571797b7d4": {
+        "id": "0d0835a9-e620-4bc8-be8b-a4571797b7d4",
+        "value": [
+          {
+            "id": "f67f7e02-b0b5-423e-bfa8-3b039340bd0a",
+            "type": "paragraph",
+            "children": [
+              {
+                "text": "Phasellus non dapibus turpis, a semper enim. Duis mollis pulvinar interdum. "
+              },
+              {
+                "type": "link",
+                "children": [
+                  {
+                    "text": "Mauris gravida"
+                  }
+                ],
+                "props": {
+                  "url": "https://www.lipsum.com/feed/html",
+                  "target": "_self",
+                  "rel": "noopener noreferrer"
+                }
+              },
+              {
+                "text": ", mauris at auctor eleifend, turpis elit tincidunt est, sit amet ultricies elit elit non velit. Nunc sollicitudin mi non augue iaculis, sed commodo purus finibus. Mauris ornare leo eu neque hendrerit, ac posuere ante auctor. Proin laoreet congue dui vitae suscipit. Ut eu porttitor magna. Duis eleifend porta felis, at ullamcorper justo sodales ut. Donec id sem consectetur, vehicula neque et, vulputate elit. Sed pellentesque malesuada consectetur. Nulla at bibendum nibh."
+              }
+            ],
+            "props": {
+              "nodeType": "block"
+            }
+          }
+        ],
+        "type": "Paragraph",
+        "meta": {
+          "order": 2,
+          "depth": 0
+        }
+      },
+      "bbb4a818-8d14-45c2-9504-0951bc408a6f": {
+        "id": "bbb4a818-8d14-45c2-9504-0951bc408a6f",
+        "value": [
+          {
+            "id": "fc979d50-421d-44ea-b859-535bd83eb4e6",
+            "type": "image",
+            "props": {
+              "src": "https://res.cloudinary.com/ench-app/image/upload/v1721333874/e608ab26-d8fd-44b6-8859-b35abc4b5558_oifyp1_qg7rxk.webp",
+              "alt": "cloudinary",
+              "srcSet": null,
+              "fit": "fill",
+              "sizes": {
+                "width": 402,
+                "height": 340
+              },
+              "nodeType": "void"
+            },
+            "children": [
+              {
+                "text": ""
+              }
+            ]
+          }
+        ],
+        "type": "Image",
+        "meta": {
+          "order": 1,
+          "depth": 0
+        }
+      },
+      "66ffccdf-cbab-4d49-bb3f-e7297dc79297": {
+        "id": "66ffccdf-cbab-4d49-bb3f-e7297dc79297",
+        "value": [
+          {
+            "id": "98d46df3-ce34-40f8-8735-d9922638ba88",
+            "type": "paragraph",
+            "children": [
+              {
+                "text": ""
+              }
+            ],
+            "props": {
+              "nodeType": "block"
+            }
+          }
+        ],
+        "type": "Paragraph",
+        "meta": {
+          "order": 3,
+          "depth": 0
+        }
+      }
+    }
+  }
+}
diff --git a/web/next-example/src/components/examples/withMultiPageEditors/index.tsx b/web/next-example/src/components/examples/withMultiPageEditors/index.tsx
index 79170d591..a8da95232 100644
--- a/web/next-example/src/components/examples/withMultiPageEditors/index.tsx
+++ b/web/next-example/src/components/examples/withMultiPageEditors/index.tsx
@@ -1,116 +1,23 @@
-import YooptaEditor, { createYooptaEditor, Elements, Blocks, useYooptaEditor } from '@yoopta/editor';
-
-import Paragraph from '@yoopta/paragraph';
-import Blockquote from '@yoopta/blockquote';
-import Embed from '@yoopta/embed';
-import Image from '@yoopta/image';
-import Link from '@yoopta/link';
-import Callout from '@yoopta/callout';
-import Video from '@yoopta/video';
-import File from '@yoopta/file';
-import Accordion from '@yoopta/accordion';
-import { NumberedList, BulletedList, TodoList } from '@yoopta/lists';
-import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';
-import { HeadingOne, HeadingThree, HeadingTwo } from '@yoopta/headings';
-import Code from '@yoopta/code';
-import ActionMenuList, { DefaultActionMenuRender } from '@yoopta/action-menu-list';
-import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';
-import LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool';
-
-import { uploadToCloudinary } from '@/utils/cloudinary';
-import { useEffect, useMemo, useRef } from 'react';
-import { WITH_BASIC_INIT_VALUE } from './initValue';
-
-const plugins = [
-  Paragraph,
-  Accordion,
-  HeadingOne,
-  HeadingTwo,
-  HeadingThree,
-  Blockquote,
-  Callout,
-  NumberedList,
-  BulletedList,
-  TodoList,
-  Code,
-  Link,
-  Embed,
-  Image.extend({
-    options: {
-      async onUpload(file) {
-        const data = await uploadToCloudinary(file, 'image');
-
-        return {
-          src: data.secure_url,
-          alt: 'cloudinary',
-          sizes: {
-            width: data.width,
-            height: data.height,
-          },
-        };
-      },
-    },
-  }),
-  Video.extend({
-    options: {
-      onUpload: async (file) => {
-        const data = await uploadToCloudinary(file, 'video');
-        return {
-          src: data.secure_url,
-          alt: 'cloudinary',
-          sizes: {
-            width: data.width,
-            height: data.height,
-          },
-        };
-      },
-    },
-  }),
-  File.extend({
-    options: {
-      onUpload: async (file) => {
-        const response = await uploadToCloudinary(file, 'auto');
-        return { src: response.url };
-      },
-    },
-  }),
-];
-
-const TOOLS = {
-  ActionMenu: {
-    render: DefaultActionMenuRender,
-    tool: ActionMenuList,
-  },
-  Toolbar: {
-    render: DefaultToolbarRender,
-    tool: Toolbar,
-  },
-  LinkTool: {
-    render: DefaultLinkToolRender,
-    tool: LinkTool,
-  },
-};
-
-const MARKS = [Bold, Italic, CodeMark, Underline, Strike, Highlight];
+import NextLink from 'next/link';
 
 function WithMultiPageEditors() {
-  const editor = useMemo(() => createYooptaEditor(), []);
-  const selectionRef = useRef(null);
-
   return (
-    <div
-      className="md:py-[100px] md:pl-[200px] md:pr-[80px] px-[20px] pt-[80px] pb-[40px] flex justify-center"
-      ref={selectionRef}
-    >
-      <YooptaEditor
-        editor={editor}
-        plugins={plugins}
-        tools={TOOLS}
-        marks={MARKS}
-        selectionBoxRoot={selectionRef}
-        value={WITH_BASIC_INIT_VALUE}
-        autoFocus
-      />
+    <div className="md:py-[100px] md:pl-[200px] md:pr-[80px] px-[20px] pt-[80px] pb-[40px] flex justify-center">
+      <div className="max-w-[750px]">
+        <h1 className="scroll-m-20 text-3xl font-bold tracking-tight">With Multi Page Editors</h1>
+        <p className="text-base text-muted-foreground mt-4">
+          Sometimes you need to show a list of pages where each page has its own content for the editor. In many cases,
+          there is a problem with updating content when you navigate between pages. So, this example is just for these
+          cases. Follow the{' '}
+          <NextLink
+            href="/examples/withMultiPageEditors/page_1"
+            className="text-[#007aff] hover:underline text-muted-foreground transition-all"
+          >
+            link here
+          </NextLink>{' '}
+          to see how it works and its source code
+        </p>
+      </div>
     </div>
   );
 }
diff --git a/web/next-example/src/components/ui/sheet.tsx b/web/next-example/src/components/ui/sheet.tsx
index 908f1221d..36dc3f033 100644
--- a/web/next-example/src/components/ui/sheet.tsx
+++ b/web/next-example/src/components/ui/sheet.tsx
@@ -102,9 +102,11 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName;
 type SheetProps = {
   items: { id: string; title: string; href: string }[];
   path: string;
+  title?: string;
+  description?: string | React.ReactNode;
 };
 
-const Sheet = ({ items, path }: SheetProps) => {
+const Sheet = ({ items, path, title, description }: SheetProps) => {
   const [isMobile, setIsMobile] = React.useState(window.innerWidth < 640);
   const [isOpen, onOpenChange] = React.useState(!isMobile);
   const { setTheme } = useTheme();
@@ -140,19 +142,22 @@ const Sheet = ({ items, path }: SheetProps) => {
         </SheetTrigger>
         <SheetContent side="left" autoFocus={false} onOpenChange={() => onOpenChange((p) => !p)}>
           <SheetHeader>
-            <SheetTitle>Yoopta examples</SheetTitle>
-            <SheetDescription>
-              Found issue?
-              <br />
-              <a
-                href="https://github.com/Darginec05/Yoopta-Editor/issues"
-                target="_blank"
-                rel="noopener"
-                className="text-sky-500"
-              >
-                Report it in repo
-              </a>
-            </SheetDescription>
+            <SheetTitle>{title || 'Yoopta examples'}</SheetTitle>
+            {description || (
+              <SheetDescription>
+                Found issue?
+                <br />
+                <a
+                  href="https://github.com/Darginec05/Yoopta-Editor/issues"
+                  target="_blank"
+                  rel="noopener"
+                  className="text-sky-500"
+                >
+                  Report it in repo
+                </a>
+              </SheetDescription>
+            )}
+
             <div className="py-2">
               {items &&
                 items.map((item) => {
diff --git a/web/next-example/src/pages/examples/[example].tsx b/web/next-example/src/pages/examples/[example].tsx
index 78aa2cd7c..ec831f1bb 100644
--- a/web/next-example/src/pages/examples/[example].tsx
+++ b/web/next-example/src/pages/examples/[example].tsx
@@ -20,7 +20,7 @@ import withChatSlack from '@/components/examples/withChatSlack';
 import withCustomStyles from '@/components/examples/withCustomStyles';
 import withEditorFocusBlur from '@/components/examples/withEditorFocusBlur';
 import withCustomRenders from '@/components/examples/withCustomRenders';
-// import withMultiPageEditors from '@/components/examples/withMultiPageEditors';
+import withMultiPageEditors from '@/components/examples/withMultiPageEditors';
 
 import { Head } from '@/components/Head/Head';
 import { useRouter } from 'next/router';
@@ -49,7 +49,7 @@ export const EXAMPLES: Record<string, () => React.JSX.Element> = {
   withLargeDocuments,
   withChatSlack,
   withEditorFocusBlur,
-  // withMultiPageEditors,
+  withMultiPageEditors,
   // withCraftExample,
   // withOffline,
   // withCustomComponent,
@@ -142,7 +142,7 @@ const EXAMPLE_MAP: Record<keyof typeof EXAMPLES, any> = {
   },
 };
 
-const ExampleComponent = () => {
+const ExampleComponentPage = () => {
   const router = useRouter();
 
   const ExampleComponent = EXAMPLES[(router.query.example as string) || 'withBaseFullSetup'];
@@ -165,4 +165,4 @@ const ExampleComponent = () => {
   );
 };
 
-export default ExampleComponent;
+export default ExampleComponentPage;
diff --git a/web/next-example/src/pages/examples/withMultiPageEditors/[page].tsx b/web/next-example/src/pages/examples/withMultiPageEditors/[page].tsx
new file mode 100644
index 000000000..c46990d71
--- /dev/null
+++ b/web/next-example/src/pages/examples/withMultiPageEditors/[page].tsx
@@ -0,0 +1,31 @@
+import { Head } from '@/components/Head/Head';
+import { useRouter } from 'next/router';
+import dynamic from 'next/dynamic';
+import PAGES_DATA from '../../../components/examples/withMultiPageEditors/db.json';
+import { EveryPageContent } from '@/components/examples/withMultiPageEditors/EveryPageContent';
+import { CheckSourceCode } from '@/components/CheckSourceCode/CheckSourceCode';
+
+const Sheet = dynamic(() => import('@/components/ui/sheet').then((mod) => mod.Sheet), { ssr: false });
+
+const DynamicPageComponent = () => {
+  const router = useRouter();
+
+  const pages = Object.keys(PAGES_DATA).map((pageId) => {
+    return {
+      title: PAGES_DATA[pageId].title,
+      id: pageId,
+      href: `/examples/withMultiPageEditors/${pageId}`,
+    };
+  });
+
+  return (
+    <div>
+      <Head />
+      <EveryPageContent pageId={router.query.page} />
+      <CheckSourceCode directLink="https://github.com/Darginec05/Yoopta-Editor/blob/master/web/next-example/src/pages/examples/withMultiPageEditors/[page].tsx" />
+      <Sheet title="List of pages" description={<></>} items={pages} path={router.asPath} />
+    </div>
+  );
+};
+
+export default DynamicPageComponent;