feat: Integrate Markdown editor

src/styles/markdown-editor.css

@@ -0,0 +1,175 @@
+/* MDEditor theme integration with shadcn/ui */
+
+/* Container */
+.w-md-editor {
+  @apply rounded-lg border border-input bg-background;
+  box-shadow: none !important;
+  font-family: inherit;
+}
+
+/* Toolbar */
+.w-md-editor-toolbar {
+  @apply border-b border-border bg-muted/50;
+  padding: 8px;
+}
+
+.w-md-editor-toolbar button,
+.w-md-editor-toolbar-divider {
+  @apply text-foreground;
+}
+
+.w-md-editor-toolbar button:hover {
+  @apply bg-accent text-accent-foreground;
+}
+
+.w-md-editor-toolbar button[data-active="true"] {
+  @apply bg-primary/10 text-primary;
+}
+
+.w-md-editor-toolbar ul > li > button {
+  border-radius: 4px;
+}
+
+/* Editor content area */
+.w-md-editor-content {
+  @apply bg-background;
+}
+
+.w-md-editor-text-pre,
+.w-md-editor-text-input {
+  @apply bg-background text-foreground;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+}
+
+.w-md-editor-text-pre > code,
+.w-md-editor-text-input {
+  font-size: 14px !important;
+  line-height: 1.6 !important;
+}
+
+/* Preview area */
+.w-md-editor-preview {
+  @apply bg-background;
+}
+
+.wmde-markdown {
+  @apply bg-background text-foreground;
+}
+
+.wmde-markdown-color {
+  @apply bg-background;
+}
+
+/* Dark mode specific overrides */
+.dark .w-md-editor {
+  @apply bg-background border-border;
+}
+
+.dark .w-md-editor-toolbar {
+  @apply bg-muted/50 border-border;
+}
+
+.dark .w-md-editor-text-pre,
+.dark .w-md-editor-text-input {
+  @apply bg-background text-foreground;
+}
+
+.dark .wmde-markdown {
+  @apply bg-background text-foreground;
+}
+
+.dark .wmde-markdown code {
+  @apply bg-muted text-foreground;
+}
+
+.dark .wmde-markdown pre {
+  @apply bg-muted border border-border;
+}
+
+/* Scrollbar styling */
+.w-md-editor-text::-webkit-scrollbar,
+.w-md-editor-preview::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.w-md-editor-text::-webkit-scrollbar-track,
+.w-md-editor-preview::-webkit-scrollbar-track {
+  @apply bg-muted/30;
+}
+
+.w-md-editor-text::-webkit-scrollbar-thumb,
+.w-md-editor-preview::-webkit-scrollbar-thumb {
+  @apply bg-muted-foreground/30 rounded;
+}
+
+.w-md-editor-text::-webkit-scrollbar-thumb:hover,
+.w-md-editor-preview::-webkit-scrollbar-thumb:hover {
+  @apply bg-muted-foreground/50;
+}
+
+/* Typography in preview matches MarkdownRenderer */
+.w-md-editor-preview .wmde-markdown {
+  max-width: none;
+}
+
+.w-md-editor-preview .wmde-markdown h1,
+.w-md-editor-preview .wmde-markdown h2,
+.w-md-editor-preview .wmde-markdown h3,
+.w-md-editor-preview .wmde-markdown h4,
+.w-md-editor-preview .wmde-markdown h5,
+.w-md-editor-preview .wmde-markdown h6 {
+  @apply font-bold tracking-tight;
+}
+
+.w-md-editor-preview .wmde-markdown h1 {
+  @apply text-4xl;
+}
+
+.w-md-editor-preview .wmde-markdown h2 {
+  @apply text-3xl;
+}
+
+.w-md-editor-preview .wmde-markdown h3 {
+  @apply text-2xl;
+}
+
+.w-md-editor-preview .wmde-markdown p {
+  @apply text-base leading-relaxed;
+}
+
+.w-md-editor-preview .wmde-markdown a {
+  @apply text-primary no-underline hover:underline;
+}
+
+.w-md-editor-preview .wmde-markdown strong {
+  @apply text-foreground font-semibold;
+}
+
+.w-md-editor-preview .wmde-markdown code {
+  @apply bg-muted px-1.5 py-0.5 rounded text-sm;
+}
+
+.w-md-editor-preview .wmde-markdown pre {
+  @apply bg-muted border border-border rounded;
+}
+
+.w-md-editor-preview .wmde-markdown blockquote {
+  @apply border-l-4 border-primary italic;
+}
+
+.w-md-editor-preview .wmde-markdown img {
+  @apply rounded-lg shadow-lg;
+}
+
+.w-md-editor-preview .wmde-markdown hr {
+  @apply border-border;
+}
+
+.w-md-editor-preview .wmde-markdown ul {
+  @apply list-disc;
+}
+
+.w-md-editor-preview .wmde-markdown ol {
+  @apply list-decimal;
+}