plutonium 0.23.0 → 0.23.2

data/src/css/easymde.css

@@ -1,722 +1,168 @@
 /**
-* EasyMDE + CodeMirror Styles
-* Based on https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.css
-* Adapted for Flowbite with dark mode support
-*/
-
-@layer components {
-
-  /* CodeMirror Core */
-  .CodeMirror {
-    @apply font-mono relative overflow-hidden bg-white dark:bg-gray-800 text-black dark:text-white;
-    direction: ltr;
-  }
-
-  .CodeMirror-lines {
-    padding: 4px 0;
-  }
-
-  .CodeMirror-scroll {
-    overflow: scroll;
-    margin-bottom: -50px;
-    margin-right: -50px;
-    padding-bottom: 50px;
-    height: 100%;
-    outline: none;
-    position: relative;
-    z-index: 0;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .CodeMirror-sizer {
-    position: relative;
-    border-right: 50px solid transparent;
-    box-sizing: content-box;
-  }
-
-  .CodeMirror-vscrollbar,
-  .CodeMirror-hscrollbar,
-  .CodeMirror-scrollbar-filler,
-  .CodeMirror-gutter-filler {
-    position: absolute;
-    z-index: 6;
-    display: none;
-    outline: none;
-  }
-
-  .CodeMirror-vscrollbar {
-    right: 0;
-    top: 0;
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-
-  .CodeMirror-hscrollbar {
-    bottom: 0;
-    left: 0;
-    overflow-y: hidden;
-    overflow-x: scroll;
-  }
-
-  .CodeMirror-scrollbar-filler {
-    right: 0;
-    bottom: 0;
-  }
-
-  .CodeMirror-gutter-filler {
-    left: 0;
-    bottom: 0;
-  }
-
-  .CodeMirror-gutters {
-    @apply absolute left-0 top-0 min-h-full z-[3] border-r border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700;
-    white-space: nowrap;
-    box-sizing: content-box;
-  }
-
-  .CodeMirror-linenumber {
-    @apply text-gray-500 dark:text-gray-400;
-    padding: 0 3px 0 5px;
-    min-width: 20px;
-    text-align: right;
-    white-space: nowrap;
-  }
-
-  /* Cursor and Selection */
-  .CodeMirror-cursor {
-    @apply border-l border-black dark:border-white border-r-0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-  }
-
-  .cm-fat-cursor .CodeMirror-cursor {
-    width: auto;
-    border: 0;
-    background: #77ee77;
-  }
-
-  .cm-fat-cursor div.CodeMirror-cursors {
-    z-index: 1;
-  }
-
-  .CodeMirror-selected {
-    @apply bg-gray-200 dark:bg-gray-600;
-  }
-
-  .CodeMirror-focused .CodeMirror-selected {
-    @apply bg-blue-100 dark:bg-blue-900/30;
-  }
-
-  /* Line Styles */
-  .CodeMirror pre.CodeMirror-line,
-  .CodeMirror pre.CodeMirror-line-like {
-    padding: 0 4px;
-    margin: 0;
-    border-radius: 0;
-    border-width: 0;
-    background: transparent;
-    font-family: inherit;
-    font-size: inherit;
-    white-space: pre;
-    word-wrap: normal;
-    line-height: inherit;
-    color: inherit;
-    z-index: 2;
-    position: relative;
-    overflow: visible;
-    -webkit-tap-highlight-color: transparent;
-    font-variant-ligatures: contextual;
-  }
-
-  .CodeMirror-wrap pre.CodeMirror-line,
-  .CodeMirror-wrap pre.CodeMirror-line-like {
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    word-break: normal;
-  }
-
-  /* Gutter */
-  .CodeMirror-gutter {
-    white-space: normal;
-    height: 100%;
-    display: inline-block;
-    vertical-align: top;
-    margin-bottom: -50px;
-    box-sizing: content-box;
-  }
-
-  .CodeMirror-gutter-wrapper {
-    position: absolute;
-    z-index: 4;
-    background: none;
-    border: none;
-  }
-
-  /* EasyMDE Container */
-  .EasyMDEContainer {
-    @apply block;
-  }
-
-  .EasyMDEContainer.sided--no-fullscreen {
-    @apply flex flex-row flex-wrap;
-  }
-
-  .EasyMDEContainer .CodeMirror {
-    @apply box-border border h-auto border-gray-300 dark:border-gray-600 rounded-b-lg p-2.5 z-0 break-words;
-  }
-
-  .EasyMDEContainer .CodeMirror-fullscreen {
-    @apply fixed inset-x-0 top-[50px] bottom-0 h-auto z-40 border-r-0 rounded-br-none bg-white dark:bg-gray-800;
-  }
-
-  .EasyMDEContainer .CodeMirror-sided {
-    width: 50% !important;
-  }
-
-  .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided {
-    @apply border-r-0 rounded-br-none relative flex-1;
-  }
-
-  .EasyMDEContainer .CodeMirror-placeholder {
-    @apply opacity-50;
-  }
-
-  /* Editor Toolbar */
-  .editor-toolbar {
-    @apply relative select-none p-2.5 border-t border-l border-r border-gray-300 dark:border-gray-600 rounded-t-lg bg-white dark:bg-gray-800 space-x-1;
-  }
-
-  .editor-toolbar.fullscreen {
-    @apply w-full h-[50px] py-2.5 px-0 box-border fixed top-0 left-0 opacity-100 z-50 border-0;
-  }
-
-  .editor-toolbar button {
-    @apply bg-transparent inline-block text-center no-underline h-[30px] m-0 p-0 border border-transparent rounded cursor-pointer min-w-[30px] px-1.5 whitespace-nowrap text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 font-bold;
-  }
-
-  .editor-toolbar button.active {
-    @apply bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600;
-  }
-
-  .editor-toolbar i.separator {
-    @apply inline-block w-0 border-l border-r border-l-gray-300 border-r-white dark:border-l-gray-600 dark:border-r-gray-800 text-transparent -indent-[10px] mx-1.5;
-  }
-
-  .editor-toolbar button:after {
-    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-    font-size: 65%;
-    vertical-align: text-bottom;
-    position: relative;
-    top: 2px;
-  }
-
-  .editor-toolbar button.heading-1:after {
-    content: "1";
-  }
-
-  .editor-toolbar button.heading-2:after {
-    content: "2";
-  }
-
-  .editor-toolbar button.heading-3:after {
-    content: "3";
-  }
-
-  .editor-toolbar button.heading-bigger:after {
-    content: "▲";
-  }
-
-  .editor-toolbar button.heading-smaller:after {
-    content: "▼";
-  }
-
-  /* Preview */
-  .editor-preview {
-    @apply p-2.5 bg-gray-50 dark:bg-gray-900 format dark:format-invert format-primary max-w-none;
-  }
-
-  .editor-preview-side {
-    @apply fixed bottom-0 w-1/2 top-[50px] right-0 z-50 overflow-auto hidden box-border border border-gray-300 dark:border-gray-600 break-words format dark:format-invert format-primary max-w-none;
-  }
-
-  .editor-preview-active-side {
-    @apply block;
-  }
-
-  .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
-    @apply flex-1 h-auto static;
-  }
-
-  .editor-preview>p {
-    @apply mt-0;
-  }
-
-  .editor-preview pre {
-    @apply bg-gray-100 dark:bg-gray-800 mb-2.5;
-  }
-
-  .editor-preview table td,
-  .editor-preview table th {
-    @apply border border-gray-300 dark:border-gray-600 p-1.5;
-  }
-
-  /* Status Bar */
-  .editor-statusbar {
-    @apply p-2 text-sm text-gray-500 dark:text-gray-400 text-right;
-  }
-
-  .EasyMDEContainer.sided--no-fullscreen .editor-statusbar {
-    @apply w-full;
-  }
-
-  .editor-statusbar span {
-    @apply inline-block min-w-[4em] ml-4;
-  }
-
-  .editor-statusbar .lines:before {
-    content: 'lines: ';
-  }
-
-  .editor-statusbar .words:before {
-    content: 'words: ';
-  }
-
-  .editor-statusbar .characters:before {
-    content: 'characters: ';
-  }
-
-  /* Syntax Highlighting */
-  .cm-s-easymde .cm-em {
-    @apply italic text-secondary-600 dark:text-secondary-400;
-  }
-
-  .cm-s-easymde .cm-strong {
-    @apply font-bold text-secondary-600 dark:text-secondary-400;
-  }
-
-  .cm-s-easymde .cm-strikethrough {
-    @apply line-through italic text-secondary-600 dark:text-secondary-400;
-  }
-
-  .cm-s-easymde .cm-quote {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-s-easymde .cm-keyword {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-s-easymde .cm-atom {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-s-easymde .cm-number {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-s-easymde .cm-def {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-s-easymde .cm-variable {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-s-easymde .cm-variable-2 {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-s-easymde .cm-variable-3 {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-formatting.cm-formatting-list {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-formatting.cm-formatting-link {
-    @apply text-secondary-900 dark:text-secondary-400;
-  }
-
-  .cm-formatting.cm-formatting-link-string {
-    @apply text-secondary-900 dark:text-secondary-400;
-  }
-
-  .cm-s-easymde .cm-string {
-    @apply text-accent-600 dark:text-accent-400;
-  }
-
-  .cm-s-easymde .cm-string.cm-url {
-    @apply text-accent-600 dark:text-accent-400;
-  }
-
-  .cm-s-easymde .cm-url {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-s-easymde .cm-string-2 {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .cm-s-easymde .cm-comment {
-    @apply text-gray-600 dark:text-gray-400 font-mono;
-  }
-
-  .cm-s-easymde .cm-tag {
-    color: #63a35c;
-  }
-
-  .cm-s-easymde .cm-meta {
-    @apply text-gray-600 dark:text-gray-400;
-  }
-
-  .cm-s-easymde .cm-attribute {
-    @apply text-secondary-600 dark:text-secondary-400;
-  }
-
-  .cm-s-easymde .cm-error {
-    @apply text-red-600 dark:text-red-400;
-  }
-
-  .cm-s-easymde .cm-header-1 {
-    font-size: calc(1.375rem + 1.5vw);
-  }
-
-  .cm-s-easymde .cm-header-2 {
-    font-size: calc(1.325rem + .9vw);
-  }
-
-  .cm-s-easymde .cm-header-3 {
-    font-size: calc(1.3rem + .6vw);
-  }
-
-  .cm-s-easymde .cm-header-4 {
-    font-size: calc(1.275rem + .3vw);
-  }
-
-  .cm-s-easymde .cm-header-5 {
-    font-size: 1.25rem;
-  }
-
-  .cm-s-easymde .cm-header-6 {
-    font-size: 1rem;
-  }
-
-  .cm-s-easymde .cm-header-1,
-  .cm-s-easymde .cm-header-2,
-  .cm-s-easymde .cm-header-3,
-  .cm-s-easymde .cm-header-4,
-  .cm-s-easymde .cm-header-5,
-  .cm-s-easymde .cm-header-6 {
-    @apply mb-2 leading-tight;
-  }
-
-  /* Dropdown */
-  .editor-toolbar .easymde-dropdown {
-    @apply relative bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600;
-    background: linear-gradient(to bottom right, #fff 0, #fff 84%, #333 50%, #333 100%);
-  }
-
-  .editor-toolbar .easymde-dropdown:hover {
-    background: linear-gradient(to bottom right, #fff 0, #fff 84%, #333 50%, #333 100%);
-  }
-
-  .easymde-dropdown-content {
-    @apply block invisible absolute bg-gray-50 dark:bg-gray-800 shadow-lg p-2 z-20 top-[30px];
-  }
-
-  .easymde-dropdown:active .easymde-dropdown-content,
-  .easymde-dropdown:focus .easymde-dropdown-content,
-  .easymde-dropdown:focus-within .easymde-dropdown-content {
-    @apply visible;
-  }
-
-  /* Fullscreen Gradients */
-  .editor-toolbar.fullscreen::before {
-    @apply w-5 h-[50px] fixed top-0 left-0 m-0 p-0;
-    background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-  }
-
-  .editor-toolbar.fullscreen::after {
-    @apply w-5 h-[50px] fixed top-0 right-0 m-0 p-0;
-    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
-  }
-
-  /* Dark mode fullscreen gradients */
-  .dark .editor-toolbar.fullscreen::before {
-    background: linear-gradient(to right, #1f2937 0%, rgba(31, 41, 55, 0) 100%);
-  }
-
-  .dark .editor-toolbar.fullscreen::after {
-    background: linear-gradient(to right, rgba(31, 41, 55, 0) 0%, #1f2937 100%);
-  }
-
-  /* Mobile Responsiveness */
-  @media only screen and (max-width: 700px) {
-    .editor-toolbar i.no-mobile {
-      @apply hidden;
-    }
-  }
-
-  /* Spell Check */
-  .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
-    @apply bg-red-100/50 dark:bg-red-900/30;
-  }
-
-  /* Image Handling */
-  span[data-img-src]::after {
-    content: '';
-    background-image: var(--bg-image);
-    @apply block max-h-full max-w-full bg-contain bg-no-repeat;
-    height: 0;
-    padding-top: var(--height);
-    width: var(--width);
-  }
-
-  /* RTL Support */
-  .CodeMirror-rtl pre {
-    direction: rtl;
-  }
-
-  .CodeMirror-selectedtext {
-    @apply bg-gray-200/70 dark:bg-gray-600/50;
-  }
-
-  /* Cursor Animations */
-  @keyframes blink {
-    50% {
-      background-color: transparent;
-    }
-  }
-
-  @-moz-keyframes blink {
-    50% {
-      background-color: transparent;
-    }
-  }
-
-  @-webkit-keyframes blink {
-    50% {
-      background-color: transparent;
-    }
-  }
-
-  .cm-fat-cursor .CodeMirror-cursor {
-    @apply bg-[#7e7];
-    width: auto;
-    border: 0;
-  }
-
-  .cm-fat-cursor div.CodeMirror-cursors {
-    z-index: 1;
-  }
-
-  .cm-fat-cursor .CodeMirror-line::selection,
-  .cm-fat-cursor .CodeMirror-line>span::selection,
-  .cm-fat-cursor .CodeMirror-line>span>span::selection {
-    background: transparent;
-  }
-
-  .cm-fat-cursor .CodeMirror-line::-moz-selection,
-  .cm-fat-cursor .CodeMirror-line>span::-moz-selection,
-  .cm-fat-cursor .CodeMirror-line>span>span::-moz-selection {
-    background: transparent;
-  }
-
-  .cm-fat-cursor {
-    caret-color: transparent;
-  }
-
-  /* Print Styles */
-  @media print {
-    .CodeMirror div.CodeMirror-cursors {
-      visibility: hidden;
-    }
-  }
-
-  /* Additional Utility Classes */
-  .CodeMirror-selected {
-    @apply bg-gray-200 dark:bg-gray-600;
-  }
-
-  .CodeMirror-focused .CodeMirror-selected {
-    @apply bg-blue-100 dark:bg-blue-900/30;
-  }
-
-  .CodeMirror-crosshair {
-    @apply cursor-crosshair;
-  }
-
-  .CodeMirror-line {
-    @apply outline-none;
-  }
-
-  .cm-tab {
-    @apply inline-block no-underline;
-  }
-
-  /* Fix for tab character rendering */
-  .cm-tab-wrap-hack:after {
-    content: '';
-  }
-
-  /* Cursor visibility states */
-  div.CodeMirror-cursors {
-    @apply invisible relative z-[3];
-  }
-
-  div.CodeMirror-dragcursors {
-    @apply visible;
-  }
-
-  .CodeMirror-focused div.CodeMirror-cursors {
-    @apply visible;
-  }
-
-  /* Measure element used for character width calculations */
-  .CodeMirror-measure {
-    @apply absolute w-full h-0 overflow-hidden invisible;
-  }
-
-  /* Line background and widgets */
-  .CodeMirror-linebackground {
-    @apply absolute inset-0 z-0;
-  }
-
-  .CodeMirror-linewidget {
-    @apply relative z-[2];
-    padding: 0.1px;
-  }
-
-  /* Gutter click prevention */
-  .CodeMirror-gutter,
-  .CodeMirror-gutters,
-  .CodeMirror-linenumber {
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  /* Ensure proper line wrapping in various scenarios */
-  .CodeMirror-wrap pre.CodeMirror-line,
-  .CodeMirror-wrap pre.CodeMirror-line-like {
-    @apply break-words whitespace-pre-wrap break-normal;
-  }
-
-  /* Composing indicator for IME */
-  .CodeMirror-composing {
-    @apply border-b-2 border-solid;
-  }
-
-  /* Matching brackets highlighting */
-  div.CodeMirror span.CodeMirror-matchingbracket {
-    @apply text-green-700 dark:text-green-400;
-  }
-
-  div.CodeMirror span.CodeMirror-nonmatchingbracket {
-    @apply text-red-600 dark:text-red-400;
-  }
-
-  /* Active line background */
-  .CodeMirror-activeline-background {
-    @apply bg-blue-50 dark:bg-blue-900/10;
-  }
-
-  /* Ensure proper z-index stacking in fullscreen mode */
-  .CodeMirror-fullscreen {
-    @apply z-[9999];
-  }
-
-  /* Preview mode button states */
-  .editor-toolbar.disabled-for-preview button:not(.no-disable) {
-    @apply opacity-60 pointer-events-none;
-  }
-
-  /* Ensure proper box sizing for measurement */
-  .CodeMirror-measure pre {
-    @apply static;
-  }
-
-  /* Fix for Safari overflow issues */
-  .CodeMirror-scroll {
-    -webkit-overflow-scrolling: touch;
-  }
-
-  /* System-specific font smoothing */
-  .CodeMirror pre.CodeMirror-line,
-  .CodeMirror pre.CodeMirror-line-like {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  /* Typography Styles */
-  .cm-s-easymde .cm-header {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  /* Focus/Selection Styles */
-  .CodeMirror-line::selection,
-  .CodeMirror-line>span::selection,
-  .CodeMirror-line>span>span::selection {
-    @apply bg-primary-100 dark:bg-primary-900/30;
-  }
-
-  .CodeMirror-line::-moz-selection,
-  .CodeMirror-line>span::-moz-selection,
-  .CodeMirror-line>span>span::-moz-selection {
-    @apply bg-primary-100 dark:bg-primary-900/30;
-  }
-
-  /* Tag Match Styles */
-  .CodeMirror-matchingtag {
-    @apply bg-yellow-200/30 dark:bg-yellow-900/30;
-  }
-
-  /* Search Highlight Styles */
-  .cm-searching {
-    @apply bg-yellow-200/40 dark:bg-yellow-900/40;
-  }
-
-  /* Ruler Styles */
-  .CodeMirror-rulers {
-    @apply absolute inset-x-0 -top-[50px] bottom-0 overflow-hidden;
-  }
-
-  .CodeMirror-ruler {
-    @apply border-l border-gray-300 dark:border-gray-600 top-0 bottom-0 absolute;
-  }
-
-  /* Editor Preview Full */
-  .editor-preview-full {
-    @apply absolute w-full h-full top-0 left-0 z-[7] overflow-auto hidden box-border;
-  }
-
-  /* Add active state for full preview */
-  .editor-preview-active {
-    @apply block;
-  }
-
-  /* Preview content specific styles */
-  .editor-preview-full {
-    @apply p-2.5 bg-gray-50 dark:bg-gray-900 format dark:format-invert format-primary max-w-none;
-  }
-
-  .editor-preview-full>p {
-    @apply mt-0;
-  }
-
-  .editor-preview-full pre {
-    @apply bg-gray-100 dark:bg-gray-800 mb-2.5;
-  }
-
-  .editor-preview-full table td,
-  .editor-preview-full table th {
-    @apply border border-gray-300 dark:border-gray-600 p-1.5;
-  }
-
-  /* Hide elements that need to be hidden without !important */
-  .ss-content .ss-list .ss-optgroup.ss-close .ss-option {
-    display: none;
-  }
+ * EasyMDE Tailwind Integration
+ * Overrides for theming with Tailwind colors and dark mode support
+ * Import this AFTER the original easymde.css
+ */
+
+/* Container and CodeMirror theming */
+.EasyMDEContainer .CodeMirror {
+  @apply border-gray-300 bg-white text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100;
+}
+
+.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
+  @apply bg-primary-100 dark:bg-primary-900;
+}
+
+.CodeMirror-selected {
+  @apply bg-gray-200 dark:bg-gray-700;
+}
+
+.CodeMirror-line::selection,
+.CodeMirror-line>span::selection,
+.CodeMirror-line>span>span::selection {
+  @apply bg-primary-100 dark:bg-primary-900;
+}
+
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line>span::-moz-selection,
+.CodeMirror-line>span>span::-moz-selection {
+  @apply bg-primary-100 dark:bg-primary-900;
+}
+
+/* Gutter theming */
+.CodeMirror-gutters {
+  @apply border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700;
+}
+
+.CodeMirror-linenumber {
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.CodeMirror-cursor {
+  @apply border-gray-900 dark:border-gray-100;
+}
+
+/* Toolbar theming */
+.editor-toolbar {
+  @apply border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800;
+}
+
+.editor-toolbar.fullscreen {
+  @apply bg-white dark:bg-gray-800;
+}
+
+.editor-toolbar button {
+  @apply text-gray-700 hover:bg-gray-100 hover:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500;
+}
+
+.editor-toolbar button.active,
+.editor-toolbar button:hover {
+  @apply bg-gray-100 border-gray-400 dark:bg-gray-700 dark:border-gray-500;
+}
+
+.editor-toolbar i.separator {
+  @apply border-l-gray-300 border-r-white dark:border-l-gray-600 dark:border-r-gray-800;
+}
+
+/* Status bar */
+.editor-statusbar {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+/* Preview theming */
+.editor-preview {
+  @apply bg-gray-50 text-gray-900 dark:bg-gray-800 dark:text-gray-100;
+}
+
+.editor-preview pre {
+  @apply bg-gray-200 dark:bg-gray-700;
+}
+
+.editor-preview table td,
+.editor-preview table th {
+  @apply border-gray-300 dark:border-gray-600;
+}
+
+.editor-preview-side {
+  @apply border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800;
+}
+
+/* CodeMirror syntax highlighting - dark mode support */
+.dark .cm-s-easymde .cm-header-1,
+.dark .cm-s-easymde .cm-header-2,
+.dark .cm-s-easymde .cm-header-3,
+.dark .cm-s-easymde .cm-header-4,
+.dark .cm-s-easymde .cm-header-5,
+.dark .cm-s-easymde .cm-header-6 {
+  @apply text-blue-300;
+}
+
+.dark .cm-s-easymde .cm-quote {
+  @apply text-green-400;
+}
+
+.dark .cm-s-easymde .cm-comment {
+  @apply bg-gray-700;
+}
+
+.dark .cm-s-easymde .cm-link {
+  @apply text-blue-400;
+}
+
+.dark .cm-s-easymde .cm-url {
+  @apply text-blue-300;
+}
+
+.dark .cm-s-easymde .cm-tag {
+  @apply text-green-400;
+}
+
+.dark .cm-s-easymde .cm-attribute {
+  @apply text-purple-400;
+}
+
+.dark .cm-s-easymde .cm-string {
+  @apply text-orange-400;
+}
+
+/* Dropdown theming */
+.editor-toolbar .easymde-dropdown {
+  @apply bg-white border-gray-300 dark:bg-gray-800 dark:border-gray-600;
+}
+
+.easymde-dropdown-content {
+  @apply bg-white shadow-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:shadow-gray-900/20;
+}
+
+.easymde-dropdown-content button {
+  @apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700;
+}
+
+/* Spell check error in dark mode */
+.dark .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
+  @apply bg-red-500/20;
+}
+
+/* Placeholder text */
+.dark .EasyMDEContainer .CodeMirror-placeholder {
+  @apply text-gray-500;
+}
+
+/* Active line background */
+.dark .CodeMirror-activeline-background {
+  @apply bg-gray-700/50;
+}
+
+/* Matching brackets */
+.dark div.CodeMirror span.CodeMirror-matchingbracket {
+  @apply text-green-400;
+}
+
+.dark div.CodeMirror span.CodeMirror-nonmatchingbracket {
+  @apply text-red-400;
+}
+
+/* Search highlighting */
+.dark .cm-searching {
+  @apply bg-yellow-500/30;
 }