feat: add CodeMirror dependencies and implement markdown editor UI
This commit is contained in:
@@ -0,0 +1,307 @@
|
||||
/**
|
||||
* CodeMirror 6 Custom Styles
|
||||
* Styles globaux pour l'éditeur Markdown CodeMirror 6
|
||||
* Thèmes Light & Dark synchronisés avec le reste de l'application
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
Variables CSS pour les thèmes
|
||||
============================================ */
|
||||
:root {
|
||||
--cm-font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
--cm-font-size: 14px;
|
||||
--cm-line-height: 1.6;
|
||||
|
||||
/* Light theme colors */
|
||||
--cm-bg: #ffffff;
|
||||
--cm-text: #1e293b;
|
||||
--cm-cursor: #3b82f6;
|
||||
--cm-selection-bg: #bfdbfe;
|
||||
--cm-active-line-bg: #f1f5f9;
|
||||
--cm-gutter-bg: #f8fafc;
|
||||
--cm-gutter-text: #94a3b8;
|
||||
--cm-gutter-active-bg: #e2e8f0;
|
||||
|
||||
/* Syntax highlighting - Light */
|
||||
--cm-keyword: #d73a49;
|
||||
--cm-string: #032f62;
|
||||
--cm-comment: #6a737d;
|
||||
--cm-variable: #e36209;
|
||||
--cm-number: #005cc5;
|
||||
--cm-tag: #22863a;
|
||||
--cm-attribute: #6f42c1;
|
||||
--cm-link: #0366d6;
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark theme colors */
|
||||
--cm-bg: #1e293b;
|
||||
--cm-text: #e2e8f0;
|
||||
--cm-cursor: #60a5fa;
|
||||
--cm-selection-bg: #1e40af;
|
||||
--cm-active-line-bg: #334155;
|
||||
--cm-gutter-bg: #1e293b;
|
||||
--cm-gutter-text: #64748b;
|
||||
--cm-gutter-active-bg: #334155;
|
||||
|
||||
/* Syntax highlighting - Dark */
|
||||
--cm-keyword: #ff7b72;
|
||||
--cm-string: #a5d6ff;
|
||||
--cm-comment: #8b949e;
|
||||
--cm-variable: #ffa657;
|
||||
--cm-number: #79c0ff;
|
||||
--cm-tag: #7ee787;
|
||||
--cm-attribute: #d2a8ff;
|
||||
--cm-link: #58a6ff;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Base Editor Styles
|
||||
============================================ */
|
||||
.cm-editor {
|
||||
font-family: var(--cm-font-family) !important;
|
||||
font-size: var(--cm-font-size) !important;
|
||||
line-height: var(--cm-line-height) !important;
|
||||
}
|
||||
|
||||
.cm-scroller {
|
||||
font-family: inherit;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cm-content {
|
||||
padding: 1rem;
|
||||
caret-color: var(--cm-cursor);
|
||||
color: var(--cm-text);
|
||||
}
|
||||
|
||||
.cm-line {
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Cursor & Selection
|
||||
============================================ */
|
||||
.cm-cursor,
|
||||
.cm-cursor-primary {
|
||||
border-left-color: var(--cm-cursor) !important;
|
||||
border-left-width: 2px;
|
||||
}
|
||||
|
||||
.cm-selectionBackground,
|
||||
.cm-focused .cm-selectionBackground {
|
||||
background-color: var(--cm-selection-bg) !important;
|
||||
}
|
||||
|
||||
.cm-activeLine {
|
||||
background-color: var(--cm-active-line-bg);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Gutters (Line Numbers)
|
||||
============================================ */
|
||||
.cm-gutters {
|
||||
background-color: var(--cm-gutter-bg);
|
||||
color: var(--cm-gutter-text);
|
||||
border: none;
|
||||
padding-right: 0.5rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.cm-activeLineGutter {
|
||||
background-color: var(--cm-gutter-active-bg);
|
||||
color: var(--cm-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cm-lineNumbers .cm-gutterElement {
|
||||
padding: 0 0.5rem;
|
||||
min-width: 2.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Syntax Highlighting
|
||||
============================================ */
|
||||
.cm-content .cm-keyword {
|
||||
color: var(--cm-keyword);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cm-content .cm-string {
|
||||
color: var(--cm-string);
|
||||
}
|
||||
|
||||
.cm-content .cm-comment {
|
||||
color: var(--cm-comment);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cm-content .cm-variableName {
|
||||
color: var(--cm-variable);
|
||||
}
|
||||
|
||||
.cm-content .cm-number {
|
||||
color: var(--cm-number);
|
||||
}
|
||||
|
||||
.cm-content .cm-propertyName {
|
||||
color: var(--cm-attribute);
|
||||
}
|
||||
|
||||
.cm-content .cm-link {
|
||||
color: var(--cm-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Markdown specific */
|
||||
.cm-content .cm-header,
|
||||
.cm-content .cm-heading {
|
||||
color: var(--cm-keyword);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cm-content .cm-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cm-content .cm-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cm-content .cm-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.cm-content .cm-code,
|
||||
.cm-content .cm-monospace {
|
||||
font-family: var(--cm-font-family);
|
||||
background-color: var(--cm-active-line-bg);
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Fold Gutter
|
||||
============================================ */
|
||||
.cm-foldGutter .cm-gutterElement {
|
||||
padding: 0 0.25rem;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.cm-foldGutter .cm-gutterElement:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Search & Replace
|
||||
============================================ */
|
||||
.cm-searchMatch {
|
||||
background-color: rgba(255, 213, 0, 0.3);
|
||||
outline: 1px solid rgba(255, 213, 0, 0.6);
|
||||
}
|
||||
|
||||
.cm-searchMatch-selected {
|
||||
background-color: rgba(255, 165, 0, 0.5);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Autocomplete
|
||||
============================================ */
|
||||
.cm-tooltip-autocomplete {
|
||||
background-color: var(--cm-bg);
|
||||
border: 1px solid var(--cm-gutter-text);
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.cm-tooltip-autocomplete > ul > li[aria-selected] {
|
||||
background-color: var(--cm-active-line-bg);
|
||||
color: var(--cm-text);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Focus Styles (Accessibility)
|
||||
============================================ */
|
||||
.cm-editor.cm-focused {
|
||||
outline: 2px solid var(--cm-cursor);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Responsive Mobile Styles
|
||||
============================================ */
|
||||
@media (max-width: 640px) {
|
||||
.cm-editor {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.cm-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.cm-lineNumbers .cm-gutterElement {
|
||||
min-width: 2rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Print Styles
|
||||
============================================ */
|
||||
@media print {
|
||||
.cm-gutters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cm-content {
|
||||
color: #000 !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Animations
|
||||
============================================ */
|
||||
.cm-line {
|
||||
animation: fadeIn 0.15s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0.8;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Scrollbar Styling
|
||||
============================================ */
|
||||
.cm-scroller::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.cm-scroller::-webkit-scrollbar-track {
|
||||
background: var(--cm-gutter-bg);
|
||||
}
|
||||
|
||||
.cm-scroller::-webkit-scrollbar-thumb {
|
||||
background: var(--cm-gutter-text);
|
||||
border-radius: 6px;
|
||||
border: 3px solid var(--cm-gutter-bg);
|
||||
}
|
||||
|
||||
.cm-scroller::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--cm-text);
|
||||
}
|
||||
|
||||
/* Firefox scrollbar */
|
||||
.cm-scroller {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--cm-gutter-text) var(--cm-gutter-bg);
|
||||
}
|
||||
Reference in New Issue
Block a user