feat: Migrate markdown editor to MDXEditor

This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 18:07:37 +00:00
parent 45ae66384c
commit 53f8da2703
5 changed files with 1929 additions and 1096 deletions

View File

@@ -1,103 +0,0 @@
/* MDEditor theme integration with shadcn/ui using data-color-mode */
/* Light mode - explicit HSL values from theme */
[data-color-mode="light"] {
--color-fg-default: hsl(240, 10%, 3.9%);
--color-canvas-default: hsl(0, 0%, 100%);
--color-border-default: hsl(240, 5.9%, 90%);
--color-neutral-muted: hsl(240, 4.8%, 95.9%);
}
/* Dark mode - explicit HSL values from theme */
[data-color-mode="dark"] {
--color-fg-default: hsl(0, 0%, 98%);
--color-canvas-default: hsl(240, 10%, 3.9%);
--color-border-default: hsl(240, 6%, 15%);
--color-neutral-muted: hsl(240, 5%, 20%);
}
/* Container styling */
.w-md-editor {
@apply rounded-lg border;
border-color: hsl(var(--border)) !important;
background-color: hsl(var(--background)) !important;
font-family: inherit;
}
/* Toolbar styling */
.w-md-editor-toolbar {
background-color: hsl(var(--muted)) !important;
border-color: hsl(var(--border)) !important;
padding: 8px;
}
.w-md-editor-toolbar button {
color: hsl(var(--foreground)) !important;
border-radius: 4px;
}
.w-md-editor-toolbar button:hover {
@apply bg-accent;
}
/* Editor area - let library handle text colors via CSS variables */
.w-md-editor-content {
background-color: hsl(var(--background)) !important;
}
.w-md-editor-text-pre,
.w-md-editor-text-input {
background-color: hsl(var(--background)) !important;
color: hsl(var(--foreground)) !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
/* Preview area */
.w-md-editor-preview {
background-color: hsl(var(--background)) !important;
}
.wmde-markdown {
background-color: hsl(var(--background)) !important;
}
/* 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 */
.w-md-editor-preview .wmde-markdown h1,
.w-md-editor-preview .wmde-markdown h2,
.w-md-editor-preview .wmde-markdown h3 {
@apply font-bold tracking-tight;
}
.w-md-editor-preview .wmde-markdown a {
@apply text-primary hover:underline;
}
.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;
}