Page title highlighting and error boundry

examples/vite_basic/src/App.tsx

@@ -6,9 +6,16 @@ import DevPanel from "./components/DevPanel";
 // Test backrefs for highlighting
 const testBackrefs: Array<{
   end_idx: number;
-  block_id: string;
   start_idx: number;
+  block_id?: string;
+  page_id?: string;
 }> = [
+  // Test page title highlighting
+  {
+    end_idx: 15,
+    page_id: "pg_01jxm798ddfdvt60gy8nqh0xm7",
+    start_idx: 0,
+  },
   // {
   //   end_idx: 50,
   //   block_id: "blk_table_row_5",

typescript/README.md

@@ -307,4 +307,44 @@ You can choose a different version from the list or create new one. But bumpp is
 - [x] move vite app to typescript root examples dir
 - [ ] setup monorepo tooling
 - [ ] fix model generation for Image and RichText, then type renderers
-- [ ] use katex or similar package for equations
+- [x] use katex or similar package for equations
+- [x] add error boundry
+- [x] add page title highlighting
+- [ ] validate page prop somehow. not clear how to do yet. we can't use the /schema because it's HUGE and also because it's outside of /typescript. Will need to think about this.
+
+maybe do something like this?
+```
+import type { Page } from "../models/generated/page/page";
+import { isPage } from "../models/generated/essential-types";
+
+export function validatePage(obj: unknown): obj is Page {
+  console.log("isPage(obj) ", isPage(obj));
+  return (
+    isPage(obj) &&
+    typeof (obj as any).id === "string" &&
+    Array.isArray((obj as any).children)
+  );
+}
+
+export function validatePageWithError(obj: unknown): {
+  valid: boolean;
+  error?: string;
+} {
+  if (!isPage(obj)) {
+    return { valid: false, error: "Not a valid page object" };
+  }
+
+  if (typeof (obj as any).id !== "string") {
+    return { valid: false, error: "Page id must be a string" };
+  }
+
+  if (!Array.isArray((obj as any).children)) {
+    return { valid: false, error: "Page children must be an array" };
+  }
+
+  return { valid: true };
+}
+
+```
+
+will require us to write a validator and we won't benefit from the defined schema jsons.

typescript/package.json

@@ -70,6 +70,7 @@
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "katex": "^0.16.22",
+    "react-error-boundary": "^6.0.0",
     "react-intersection-observer": "^9.13.0"
   },
   "peerDependencies": {

typescript/src/renderer/JsonDocRenderer.tsx

@@ -11,6 +11,7 @@ import { RendererProvider } from "./context/RendererContext";
 import { HighlightNavigation } from "./components/HighlightNavigation";
 import { useHighlights } from "./hooks/useHighlights";
 import { Backref } from "./utils/highlightUtils";
+import { GlobalErrorBoundary } from "./components/ErrorBoundary";
 
 interface JsonDocRendererProps {
   page: Page;
@@ -25,6 +26,7 @@ interface JsonDocRendererProps {
   devMode?: boolean;
   viewJson?: boolean;
   backrefs?: Backref[];
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
 }
 
 export const JsonDocRenderer = ({
@@ -36,6 +38,7 @@ export const JsonDocRenderer = ({
   devMode = false,
   viewJson = false,
   backrefs = [],
+  onError,
 }: JsonDocRendererProps) => {
   // Use the modular hooks for highlight management
   const { highlightCount, currentActiveIndex, navigateToHighlight } =
@@ -97,25 +100,29 @@ export const JsonDocRenderer = ({
   );
 
   return (
-    <RendererProvider value={{ devMode, resolveImageUrl }}>
-      <div className={`json-doc-renderer jsondoc-theme-${theme} ${className}`}>
-        {viewJson ? (
-          <div className="flex h-screen">
-            <div className="w-1/2 overflow-y-auto">{renderedContent}</div>
-            <JsonViewPanel data={page} />
+    <div className={`jsondoc-theme-${theme}`}>
+      <GlobalErrorBoundary onError={onError}>
+        <RendererProvider value={{ devMode, resolveImageUrl }}>
+          <div className={`json-doc-renderer  ${className}`}>
+            {viewJson ? (
+              <div className="flex h-screen">
+                <div className="w-1/2 overflow-y-auto">{renderedContent}</div>
+                <JsonViewPanel data={page} />
+              </div>
+            ) : (
+              renderedContent
+            )}
+            {/* Show highlight navigation when there are highlights */}
+            {highlightCount > 0 && (
+              <HighlightNavigation
+                highlightCount={highlightCount}
+                onNavigate={navigateToHighlight}
+                currentIndex={currentActiveIndex}
+              />
+            )}
           </div>
-        ) : (
-          renderedContent
-        )}
-        {/* Show highlight navigation when there are highlights */}
-        {highlightCount > 0 && (
-          <HighlightNavigation
-            highlightCount={highlightCount}
-            onNavigate={navigateToHighlight}
-            currentIndex={currentActiveIndex}
-          />
-        )}
-      </div>
-    </RendererProvider>
+        </RendererProvider>
+      </GlobalErrorBoundary>
+    </div>
   );
 };

typescript/src/renderer/components/ErrorBoundary.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { ErrorBoundary, FallbackProps } from "react-error-boundary";
+
+interface GlobalErrorBoundaryProps {
+  children: React.ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+function GlobalErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  console.log("error ", error);
+  return (
+    <div className="json-doc-error-boundary">
+      <div className="json-doc-error-content">
+        <h2>Document Failed to Load</h2>
+        <p>Something went wrong while rendering this document.</p>
+        <pre>
+          <strong>Message:</strong> {error.message}
+          {error.stack && (
+            <div>
+              <strong>Stack Trace:</strong>
+              {error.stack}
+            </div>
+          )}
+        </pre>
+
+        <button
+          onClick={resetErrorBoundary}
+          className="json-doc-error-retry-button"
+        >
+          Try Again
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function GlobalErrorBoundary({
+  children,
+  onError,
+}: GlobalErrorBoundaryProps) {
+  return (
+    <ErrorBoundary
+      FallbackComponent={GlobalErrorFallback}
+      onError={onError}
+      onReset={() => {
+        // Optional: Add any cleanup logic here
+        window.location.reload();
+      }}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}

typescript/src/renderer/styles/error-boundry.css

@@ -0,0 +1,79 @@
+/* Error Boundary Styles */
+.json-doc-error-boundary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  width: 100%;
+  /* max-width: 600px; */
+  padding: var(--jsondoc-spacing-xl);
+  background: var(--jsondoc-bg-primary);
+  border: 1px solid var(--jsondoc-border-light);
+  border-radius: var(--jsondoc-radius-md);
+  margin: var(--jsondoc-spacing-lg);
+}
+
+.json-doc-error-content {
+  text-align: center;
+  max-width: 500px;
+}
+
+.json-doc-error-content h2 {
+  color: var(--jsondoc-text-primary);
+  font-size: var(--jsondoc-font-size-xl);
+  font-weight: var(--jsondoc-font-weight-bold);
+  margin: 0 0 var(--jsondoc-spacing-md) 0;
+}
+
+.json-doc-error-content p {
+  color: var(--jsondoc-text-secondary);
+  font-size: var(--jsondoc-font-size-base);
+  margin: 0 0 var(--jsondoc-spacing-lg) 0;
+  line-height: var(--jsondoc-line-height-normal);
+}
+
+.json-doc-error-details {
+  margin: var(--jsondoc-spacing-lg) 0;
+  text-align: left;
+}
+
+.json-doc-error-details summary {
+  color: var(--jsondoc-text-secondary);
+  font-size: var(--jsondoc-font-size-sm);
+  cursor: pointer;
+  margin-bottom: var(--jsondoc-spacing-sm);
+}
+
+.json-doc-error-boundary pre {
+  background: var(--jsondoc-bg-code);
+  color: var(--jsondoc-text-primary);
+  padding: var(--jsondoc-spacing-md);
+  border-radius: var(--jsondoc-radius-sm);
+  font-family: var(--jsondoc-font-family-mono);
+  font-size: var(--jsondoc-font-size-sm);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 400px;
+}
+
+.json-doc-error-retry-button {
+  background: var(--jsondoc-color-primary);
+  color: var(--jsondoc-text-primary);
+  border: none;
+  padding: var(--jsondoc-spacing-sm) var(--jsondoc-spacing-lg);
+  border-radius: var(--jsondoc-radius-sm);
+  font-size: var(--jsondoc-font-size-base);
+  font-weight: var(--jsondoc-font-weight-medium);
+  cursor: pointer;
+  transition: all var(--jsondoc-transition-fast);
+}
+
+.json-doc-error-retry-button:hover {
+  background: var(--jsondoc-color-primary-hover);
+  transform: translateY(-1px);
+}
+
+.json-doc-error-retry-button:active {
+  transform: translateY(0);
+}

typescript/src/renderer/styles/index.css

@@ -1,7 +1,7 @@
 /* JSON-DOC Renderer Styles */
 
 /* Import KaTeX styles for equations */
-@import "katex/dist/katex.min.css";
+/* @import "katex/dist/katex.min.css"; */
 
 /* Import design tokens first */
 @import "./variables.css";
@@ -16,6 +16,6 @@
 @import "./table.css";
 @import "./media.css";
 @import "./layout.css";
-
+@import "./error-boundry.css";
 /* Import responsive styles last */
 @import "./responsive.css";