FIX: React error #185 hydration mismatch in SlateEditor and RelatedPages

ISSUE: React error #185 still occurring when visiting pages
ROOT CAUSE: Hydration mismatches in array rendering and content processing

FIXES:
✅ Added client-side rendering check to SlateEditor to prevent hydration mismatches
✅ Added safety checks for content processing in contentToSlate function
✅ Added Array.isArray() checks in RelatedPagesSection for candidates and relatedPages
✅ Added proper null/undefined checks for node and child objects
✅ Added loading state for SlateEditor during SSR/client transition

EXPECTED RESULTS:
- No more React error #185 when visiting pages
- Smooth client-side rendering without hydration mismatches
- Proper error handling for malformed content

Author: sirjamesgray

app/components/editor/SlateEditor.tsx

@@ -103,6 +103,12 @@ const contentToSlate = (content: any[]): Descendant[] => {
   return content.map((node, index) => {
     console.log(`🔍 contentToSlate: Processing node ${index}:`, { node, type: typeof node });
 
+    // Safety check to prevent hydration mismatches
+    if (!node || typeof node !== 'object') {
+      console.warn(`🔍 contentToSlate: Invalid node at index ${index}, creating default paragraph`);
+      return { type: 'paragraph', children: [{ text: '' }] };
+    }
+
     if (node.type === 'paragraph') {
       const children: Descendant[] = [];
 
@@ -111,6 +117,12 @@ const contentToSlate = (content: any[]): Descendant[] => {
         node.children.forEach((child: any, childIndex: number) => {
           console.log(`🔍 contentToSlate: Processing child ${childIndex}:`, { child });
 
+          // Safety check for child objects
+          if (!child || typeof child !== 'object') {
+            console.warn(`🔍 contentToSlate: Invalid child at index ${childIndex}, skipping`);
+            return;
+          }
+
           if (child.type === 'link') {
             children.push({
               type: 'link',
@@ -268,6 +280,12 @@ const SlateEditor: React.FC<SlateEditorProps> = ({
   showToolbar = true,
   onInsertLinkRequest
 }) => {
+  // Prevent hydration mismatches by ensuring client-side rendering
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
   const editor = useMemo(() => createSlateEditor(), []);
   // Create safe initial value for Slate
   const safeInitialValue = useMemo(() => {
@@ -662,6 +680,17 @@ const SlateEditor: React.FC<SlateEditorProps> = ({
     }
   }, [onInsertLinkRequest]);
 
+  // Prevent hydration mismatches by only rendering on client
+  if (!isClient) {
+    return (
+      <div className="slate-editor-container w-full">
+        <div className="p-4 text-center text-muted-foreground">
+          Loading editor...
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="slate-editor-container w-full">
       {showToolbar && (

app/components/features/RelatedPagesSection.tsx

@@ -60,7 +60,7 @@ const getRelatedPagesAsync = async (pageId: string, pageTitle: string, pageConte
     });
 
     // Score candidates based on word overlap
-    const scoredCandidates = candidates.map(candidate => {
+    const scoredCandidates = Array.isArray(candidates) ? candidates.map(candidate => {
       const candidateTitle = candidate.title || '';
       const candidateContent = candidate.content || '';
 
@@ -79,7 +79,7 @@ const getRelatedPagesAsync = async (pageId: string, pageTitle: string, pageConte
         similarity: Math.min(score / Math.max(allWords.length, 1), 1),
         score
       };
-    });
+    }) : [];
 
     return scoredCandidates
       .filter(candidate => candidate.score > 0)
@@ -199,7 +199,7 @@ export default function RelatedPagesSection({ page, linkedPageIds = [] }: Relate
             <Loader2 className="h-3 w-3 animate-spin" />
             <span>Loading related pages by others...</span>
           </div>
-        ) : relatedPages.length > 0 ? (
+        ) : Array.isArray(relatedPages) && relatedPages.length > 0 ? (
           <div className="flex flex-wrap gap-2">
             {relatedPages.map((relatedPage, index) => (
               <div key={relatedPage.id} className="flex items-center">