Master Sample App Fix + Freestyle Demo

Author: yoen-velt

apps/master-sample-app/components/sidebar.tsx

@@ -28,6 +28,7 @@ const sampleIdToItemName = (sampleId: string): string => {
     'react-comments-text-editors-lexical-lexical-comments-demo': 'lexical-comments-demo',
     'react-comments-dashboard-custom-dashboard-demo': 'dashboard-demo',
     'react-comments-dashboard-inline-comments-dashboard-inline-comments-demo': 'dashboard-inline-comments-demo',
+    'react-comments-website-builder-freestyle-comments-freestyle-comments-demo': 'freestyle-comments-demo',
     'react-self-hosting-dashboard-mongo-db-dashboard-mongo-db-demo': 'dashboard-mongo-db-demo',
     'react-self-hosting-dashboard-postgres-dashboard-postgres-demo': 'dashboard-postgres-demo',
     'react-crdt-text-editors-tiptap-tiptap-crdt-demo': 'tiptap-crdt-demo',
@@ -49,6 +50,8 @@ export function Sidebar({ isOpen, onToggle, currentSampleId, onSampleSelect }: S
     slatejs: false,
     lexical: false,
     commentsDashboard: false,
+    commentsWebsiteBuilder: false,
+    commentsFreestyleComments: false,
     selfHosting: false,
     selfHostingDashboard: false,
     selfHostingMongoDB: false,
@@ -428,6 +431,43 @@ export function Sidebar({ isOpen, onToggle, currentSampleId, onSampleSelect }: S
                           </button>
                         </div>
                       )}
+
+                      {/* website-builder Section */}
+                      <button
+                        onClick={() => toggleSection("commentsWebsiteBuilder")}
+                        className="flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-sm font-mono text-sidebar-foreground bg-sidebar-accent/50"
+                      >
+                        <span>website-builder</span>
+                        <ChevronRight className={cn("h-4 w-4 transition-transform", expandedSections.commentsWebsiteBuilder && "rotate-90")} />
+                      </button>
+                      {expandedSections.commentsWebsiteBuilder && (
+                        <div className="mt-2 ml-2 space-y-1">
+                          {/* freestyle-comments Section */}
+                          <button
+                            onClick={() => toggleSection("commentsFreestyleComments")}
+                            className="flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-sm font-mono text-sidebar-foreground bg-sidebar-accent/30"
+                          >
+                            <span>freestyle-comments</span>
+                            <ChevronRight className={cn("h-4 w-4 transition-transform", expandedSections.commentsFreestyleComments && "rotate-90")} />
+                          </button>
+                          {expandedSections.commentsFreestyleComments && (
+                            <div className="mt-2 ml-2 space-y-1">
+                              <button
+                                onClick={() => {
+                                  setSelectedItem("freestyle-comments-demo")
+                                  onSampleSelect?.("react-comments-website-builder-freestyle-comments-freestyle-comments-demo")
+                                }}
+                                className={cn(
+                                  "w-full rounded-lg px-3 py-2.5 text-left text-sm font-mono text-sidebar-foreground transition-colors",
+                                  selectedItem === "freestyle-comments-demo" ? "bg-secondary" : "hover:bg-secondary/50",
+                                )}
+                              >
+                                freestyle-comments-demo
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>

apps/master-sample-app/components/viewer/code-display.tsx

@@ -5,8 +5,20 @@ import { SampleCodeFile } from "@/types/sample"
 import { ChevronRight, File, Folder } from "lucide-react"
 import { cn } from "@/lib/utils"
 
-// Syntax highlighting function
+// Syntax highlighting function using markers to prevent regex from matching inside HTML tags
 function highlightCode(code: string): string {
+  // Use unique markers that won't appear in code
+  const MARKERS = {
+    COMMENT: '[[C:',
+    STRING: '[[S:',
+    KEYWORD: '[[K:',
+    NUMBER: '[[N:',
+    LITERAL: '[[L:',
+    FUNCTION: '[[F:',
+    TYPE: '[[T:',
+    END: ':]]'
+  }
+  
   let highlighted = code
 
   // Escape HTML first
@@ -18,45 +30,91 @@ function highlightCode(code: string): string {
   // Comments (must be done before other highlighting)
   highlighted = highlighted.replace(
     /(\/\/.*$|\/\*[\s\S]*?\*\/)/gm,
-    '<span class="code-comment">$1</span>'
+    `${MARKERS.COMMENT}$1${MARKERS.END}`
   )
 
-  // Strings
+  // Strings - but not inside already-marked regions
   highlighted = highlighted.replace(
     /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/g,
-    '<span class="code-string">$1</span>'
+    (match) => {
+      // Skip if already inside a marker
+      if (match.includes('[[') || match.includes(':]]')) return match
+      return `${MARKERS.STRING}${match}${MARKERS.END}`
+    }
   )
 
-  // Keywords
+  // Keywords - but not inside already-marked regions
   highlighted = highlighted.replace(
     /\b(import|export|from|const|let|var|function|return|if|else|for|while|class|interface|type|extends|implements|async|await|try|catch|throw|new|this|super|static|public|private|protected|default|case|switch|break|continue|do|in|of|typeof|instanceof|void|null|undefined|as)\b/g,
-    '<span class="code-keyword">$1</span>'
+    (match, p1, offset, string) => {
+      // Check if this match is inside a marker (look for unclosed [[ before this position)
+      const before = string.substring(0, offset)
+      const openMarkers = (before.match(/\[\[/g) || []).length
+      const closeMarkers = (before.match(/:]\]/g) || []).length
+      if (openMarkers > closeMarkers) return match
+      return `${MARKERS.KEYWORD}${match}${MARKERS.END}`
+    }
   )
 
-  // Numbers
+  // Numbers - but not inside already-marked regions
   highlighted = highlighted.replace(
     /\b(\d+\.?\d*)\b/g,
-    '<span class="code-number">$1</span>'
+    (match, p1, offset, string) => {
+      const before = string.substring(0, offset)
+      const openMarkers = (before.match(/\[\[/g) || []).length
+      const closeMarkers = (before.match(/:]\]/g) || []).length
+      if (openMarkers > closeMarkers) return match
+      return `${MARKERS.NUMBER}${match}${MARKERS.END}`
+    }
   )
 
   // Boolean and special values
   highlighted = highlighted.replace(
     /\b(true|false)\b/g,
-    '<span class="code-literal">$1</span>'
+    (match, p1, offset, string) => {
+      const before = string.substring(0, offset)
+      const openMarkers = (before.match(/\[\[/g) || []).length
+      const closeMarkers = (before.match(/:]\]/g) || []).length
+      if (openMarkers > closeMarkers) return match
+      return `${MARKERS.LITERAL}${match}${MARKERS.END}`
+    }
   )
 
   // Function names (before parenthesis)
   highlighted = highlighted.replace(
     /\b([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?=\()/g,
-    '<span class="code-function">$1</span>'
+    (match, p1, offset, string) => {
+      const before = string.substring(0, offset)
+      const openMarkers = (before.match(/\[\[/g) || []).length
+      const closeMarkers = (before.match(/:]\]/g) || []).length
+      if (openMarkers > closeMarkers) return match
+      return `${MARKERS.FUNCTION}${p1}${MARKERS.END}`
+    }
   )
 
   // Types/Classes (PascalCase)
   highlighted = highlighted.replace(
     /\b([A-Z][a-zA-Z0-9_]*)\b/g,
-    '<span class="code-type">$1</span>'
+    (match, p1, offset, string) => {
+      const before = string.substring(0, offset)
+      const openMarkers = (before.match(/\[\[/g) || []).length
+      const closeMarkers = (before.match(/:]\]/g) || []).length
+      if (openMarkers > closeMarkers) return match
+      return `${MARKERS.TYPE}${match}${MARKERS.END}`
+    }
   )
 
+  // Convert markers to HTML spans
+  highlighted = highlighted
+    .replace(/\[\[C:/g, '<span class="code-comment">')
+    .replace(/\[\[S:/g, '<span class="code-string">')
+    .replace(/\[\[K:/g, '<span class="code-keyword">')
+    .replace(/\[\[N:/g, '<span class="code-number">')
+    .replace(/\[\[L:/g, '<span class="code-literal">')
+    .replace(/\[\[F:/g, '<span class="code-function">')
+    .replace(/\[\[T:/g, '<span class="code-type">')
+    .replace(/:]\]/g, '</span>')
+  
   return highlighted
 }