Initial commit

skills/markdown-editor-integrator/assets/MarkdownPreview.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import dynamic from 'next/dynamic'
+import { ComponentProps } from 'react'
+import rehypeSanitize from 'rehype-sanitize'
+import '@uiw/react-markdown-preview/markdown.css'
+
+const MDPreview = dynamic(
+  () => import('@uiw/react-markdown-preview'),
+  { ssr: false }
+)
+
+type MDPreviewProps = ComponentProps<typeof MDPreview>
+
+interface MarkdownPreviewProps extends Omit<MDPreviewProps, 'source' | 'data-color-mode'> {
+  content: string
+  className?: string
+}
+
+/**
+ * Markdown Preview component for displaying formatted markdown
+ *
+ * Features:
+ * - Automatic theme switching
+ * - XSS protection with rehype-sanitize
+ * - GitHub-flavored markdown support
+ * - Syntax highlighting for code blocks
+ * - Next.js SSR compatible
+ *
+ * @example
+ * ```tsx
+ * <MarkdownPreview
+ *   content={character.biography}
+ *   className="max-w-3xl"
+ * />
+ * ```
+ */
+export function MarkdownPreview({
+  content,
+  className = '',
+  ...props
+}: MarkdownPreviewProps) {
+  const { theme } = useTheme()
+
+  return (
+    <div
+      data-color-mode={theme === 'dark' ? 'dark' : 'light'}
+      className={`markdown-preview-wrapper ${className}`}
+    >
+      <MDPreview
+        source={content}
+        rehypePlugins={[[rehypeSanitize]]}
+        {...props}
+      />
+    </div>
+  )
+}
+
+// CSS for preview theme integration (add to globals.css)
+const previewStyles = `
+/* Markdown Preview Theme Integration */
+
+.markdown-preview-wrapper {
+  @apply rounded-md;
+}
+
+.markdown-preview-wrapper .wmde-markdown {
+  @apply bg-transparent text-foreground;
+  font-family: inherit;
+}
+
+/* Typography */
+.markdown-preview-wrapper .wmde-markdown h1,
+.markdown-preview-wrapper .wmde-markdown h2,
+.markdown-preview-wrapper .wmde-markdown h3,
+.markdown-preview-wrapper .wmde-markdown h4,
+.markdown-preview-wrapper .wmde-markdown h5,
+.markdown-preview-wrapper .wmde-markdown h6 {
+  @apply text-foreground font-semibold;
+  border-bottom: none;
+}
+
+.markdown-preview-wrapper .wmde-markdown p {
+  @apply text-foreground leading-7;
+}
+
+/* Links */
+.markdown-preview-wrapper .wmde-markdown a {
+  @apply text-primary hover:underline;
+}
+
+/* Lists */
+.markdown-preview-wrapper .wmde-markdown ul,
+.markdown-preview-wrapper .wmde-markdown ol {
+  @apply text-foreground;
+}
+
+/* Blockquotes */
+.markdown-preview-wrapper .wmde-markdown blockquote {
+  @apply border-l-4 border-primary/50 bg-muted/50 text-muted-foreground italic;
+}
+
+/* Code */
+.markdown-preview-wrapper .wmde-markdown code {
+  @apply bg-muted text-primary px-1.5 py-0.5 rounded text-sm;
+}
+
+.markdown-preview-wrapper .wmde-markdown pre {
+  @apply bg-muted rounded-md p-4 overflow-x-auto;
+}
+
+.markdown-preview-wrapper .wmde-markdown pre code {
+  @apply bg-transparent p-0;
+}
+
+/* Tables */
+.markdown-preview-wrapper .wmde-markdown table {
+  @apply border-collapse w-full border border-border;
+}
+
+.markdown-preview-wrapper .wmde-markdown th {
+  @apply bg-muted font-semibold text-left p-2 border border-border;
+}
+
+.markdown-preview-wrapper .wmde-markdown td {
+  @apply p-2 border border-border;
+}
+
+.markdown-preview-wrapper .wmde-markdown tr:nth-child(even) {
+  @apply bg-muted/30;
+}
+
+/* Horizontal Rule */
+.markdown-preview-wrapper .wmde-markdown hr {
+  @apply border-border my-4;
+}
+
+/* Images */
+.markdown-preview-wrapper .wmde-markdown img {
+  @apply rounded-md max-w-full h-auto;
+}
+
+/* Task Lists */
+.markdown-preview-wrapper .wmde-markdown input[type="checkbox"] {
+  @apply mr-2;
+}
+`
+
+// Export styles constant for documentation
+export { previewStyles }