feat: add pages playground demo and stabilize pagination flow

Author: HideInMatrix

apps/playground/package.json

@@ -23,6 +23,7 @@
     "@mxm-editor/extension-list-keymap": "workspace:*",
     "@mxm-editor/extension-mathematics": "workspace:*",
     "@mxm-editor/extension-mention": "workspace:*",
+    "@mxm-editor/extension-pages": "workspace:*",
     "@mxm-editor/extension-placeholder": "workspace:*",
     "@mxm-editor/extension-table": "workspace:*",
     "@mxm-editor/extension-task-item": "workspace:*",

apps/playground/src/App.tsx

@@ -4,12 +4,14 @@ import {
   FileText,
   MessageSquareText,
   Moon,
+  ScrollText,
   Sun,
   Users,
 } from "lucide-react";
 import { CollaborationSection } from "./playground/components/CollaborationSection";
 import { CommentsSection } from "./playground/components/CommentsSection";
 import { LocalEditorSection } from "./playground/components/LocalEditorSection";
+import { PagesSection } from "./playground/components/PagesSection";
 import {
   getPlaygroundRouteHref,
   usePlaygroundRoute,
@@ -23,6 +25,10 @@ function RouteIcon({ routeId }: { routeId: PlaygroundRouteId }) {
     return <MessageSquareText size={16} strokeWidth={2} />;
   }
 
+  if (routeId === "pages") {
+    return <ScrollText size={16} strokeWidth={2} />;
+  }
+
   if (routeId === "collaboration") {
     return <Users size={16} strokeWidth={2} />;
   }
@@ -39,6 +45,10 @@ export function App() {
       return <CommentsSection />;
     }
 
+    if (route.id === "pages") {
+      return <PagesSection />;
+    }
+
     if (route.id === "collaboration") {
       return <CollaborationSection />;
     }