feat: support markdown (#5)

Author: airslice

.yarn/install-state.gz

@@ -29,10 +29,14 @@
     "@radix-ui/react-label": "2.1.7",
     "@radix-ui/react-popover": "1.1.14",
     "@radix-ui/react-slot": "1.2.3",
+    "@tailwindcss/typography": "0.5.19",
     "@tailwindcss/vite": "4.1.10",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "lucide-react": "0.516.0",
+    "react-markdown": "10.1.0",
+    "rehype-raw": "7.0.0",
+    "remark-gfm": "4.0.1",
     "tailwind-merge": "2.5.5",
     "tailwindcss-animate": "1.0.7",
     "tw-animate-css": "1.3.4"

package.json

@@ -1,4 +1,7 @@
 import { FC } from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
 
 export type SingleValueProperty = {
   id: string;
@@ -12,6 +15,8 @@ export type Props = {
 };
 
 const PropertyValue: FC<Props> = ({ property }) => {
+  console.log("property", property);
+
   return property.type === "asset" ? (
     isImageUrl(property.value as string) ? (
       <img
@@ -36,6 +41,27 @@ const PropertyValue: FC<Props> = ({ property }) => {
     >
       {property.value}
     </a>
+  ) : property.type === "markdown" ? (
+    <div className="prose">
+      <ReactMarkdown 
+        remarkPlugins={[remarkGfm]} 
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          a: ({ href, children, ...props }) => (
+            <a 
+              href={href} 
+              target="_blank" 
+              rel="noopener noreferrer"
+              {...props}
+            >
+              {children}
+            </a>
+          )
+        }}
+      >
+        {property.value as string}
+      </ReactMarkdown>
+    </div>
   ) : property.type === "bool" ? (
     <div className="whitespace-pre-wrap break-words">
       {property.value ? "True" : "False"}

src/extensions/inspector_block/main/PropertyValue.tsx

@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+@plugin "@tailwindcss/typography";
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
@@ -133,3 +135,97 @@ input[type="number"]::-webkit-inner-spin-button {
 input[type="number"] {
   -moz-appearance: textfield;
 }
+
+/* Override prose styles with smaller spacing and 12px base text */
+@layer utilities {
+  .prose {
+    @apply text-xs leading-relaxed max-w-none;
+    font-size: 12px;
+  }
+
+  .prose p {
+    @apply my-1 leading-relaxed;
+  }
+
+  .prose h1 {
+    @apply text-lg font-bold mt-3 mb-2 leading-tight;
+  }
+
+  .prose h2 {
+    @apply text-base font-semibold mt-3 mb-1 leading-tight;
+  }
+
+  .prose h3 {
+    @apply text-sm font-medium mt-2 mb-1 leading-tight;
+  }
+
+  .prose h4 {
+    @apply text-xs font-medium mt-2 mb-1 leading-tight;
+  }
+
+  .prose h5 {
+    @apply text-xs font-normal mt-2 mb-1 leading-tight;
+  }
+
+  .prose h6 {
+    @apply text-xs font-normal mt-2 mb-1 leading-tight opacity-75;
+  }
+
+  .prose ul,
+  .prose ol {
+    @apply my-1 pl-4;
+  }
+
+  .prose li {
+    @apply my-0.5;
+  }
+
+  .prose blockquote {
+    @apply my-2 pl-3 border-l-2 border-muted italic;
+  }
+
+  .prose hr {
+    @apply my-2 border-border;
+  }
+
+  .prose code {
+    @apply text-xs bg-muted px-1 py-0.5 rounded font-mono;
+  }
+
+  .prose pre {
+    @apply my-2 p-2 bg-muted rounded text-xs overflow-x-auto;
+  }
+
+  .prose pre code {
+    @apply bg-transparent p-0 text-gray-700;
+  }
+
+  .prose a {
+    @apply text-primary underline hover:no-underline;
+  }
+
+  .prose strong {
+    @apply font-semibold;
+  }
+
+  .prose em {
+    @apply italic;
+  }
+
+  .prose table {
+    @apply my-2 w-full border-collapse;
+  }
+
+  .prose th,
+  .prose td {
+    @apply border border-border px-2 py-1 text-left;
+  }
+
+  .prose th {
+    @apply bg-muted font-medium;
+  }
+
+  .prose img {
+    @apply my-1 max-w-full h-auto;
+  }
+}