/* Rich text editor: ProseMirror styles using shadcn design tokens */ .rich-text-editor.ProseMirror { color: var(--foreground); caret-color: var(--foreground); } .rich-text-editor.ProseMirror:focus { outline: none; } /* Placeholder */ .rich-text-editor .is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; color: var(--muted-foreground); pointer-events: none; height: 0; } /* Headings */ .rich-text-editor h1 { font-size: 1.125rem; font-weight: 700; margin-top: 1.25rem; margin-bottom: 0.5rem; line-height: 1.4; } .rich-text-editor h2 { font-size: 1rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; line-height: 1.4; } .rich-text-editor h3 { font-size: 0.875rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.25rem; line-height: 1.4; } /* Paragraphs */ .rich-text-editor p { margin-top: 0.375rem; margin-bottom: 0.375rem; line-height: 1.625; } /* First child should not have top margin */ .rich-text-editor > *:first-child { margin-top: 0; } /* Last child should not have bottom margin */ .rich-text-editor > *:last-child { margin-bottom: 0; } /* Lists */ .rich-text-editor ul { list-style-type: disc; padding-inline-start: 1.25rem; margin: 0.375rem 0; } .rich-text-editor ol { list-style-type: decimal; padding-inline-start: 1.25rem; margin: 0.375rem 0; } .rich-text-editor li { margin: 0.125rem 0; line-height: 1.625; } .rich-text-editor li::marker { color: var(--muted-foreground); } /* Inline code */ .rich-text-editor code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8em; background: var(--muted); color: var(--foreground); padding: 0.15em 0.35em; border-radius: calc(var(--radius) * 0.6); } /* Code blocks */ .rich-text-editor pre { font-family: var(--font-mono, ui-monospace, monospace); background: var(--muted); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0.5rem 0; overflow-x: auto; } .rich-text-editor pre code { background: none; padding: 0; font-size: 0.8125rem; line-height: 1.6; } /* Syntax highlighting — lowlight (hljs) */ .rich-text-editor .hljs-keyword, .rich-text-editor .hljs-selector-tag, .rich-text-editor .hljs-built_in { color: oklch(0.55 0.16 255); } .rich-text-editor .hljs-string, .rich-text-editor .hljs-addition { color: oklch(0.55 0.14 155); } .rich-text-editor .hljs-comment, .rich-text-editor .hljs-quote { color: var(--muted-foreground); font-style: italic; } .rich-text-editor .hljs-number, .rich-text-editor .hljs-literal { color: oklch(0.58 0.16 30); } .rich-text-editor .hljs-title, .rich-text-editor .hljs-section, .rich-text-editor .hljs-title\.function_ { color: oklch(0.55 0.14 280); } .rich-text-editor .hljs-attr, .rich-text-editor .hljs-attribute { color: oklch(0.58 0.12 60); } .rich-text-editor .hljs-variable, .rich-text-editor .hljs-template-variable { color: oklch(0.58 0.14 20); } .rich-text-editor .hljs-type, .rich-text-editor .hljs-title\.class_ { color: oklch(0.55 0.14 200); } .rich-text-editor .hljs-deletion { color: oklch(0.55 0.2 25); } .rich-text-editor .hljs-meta { color: var(--muted-foreground); } /* Dark mode overrides */ .dark .rich-text-editor .hljs-keyword, .dark .rich-text-editor .hljs-selector-tag, .dark .rich-text-editor .hljs-built_in { color: oklch(0.7 0.14 255); } .dark .rich-text-editor .hljs-string, .dark .rich-text-editor .hljs-addition { color: oklch(0.7 0.14 155); } .dark .rich-text-editor .hljs-number, .dark .rich-text-editor .hljs-literal { color: oklch(0.72 0.14 30); } .dark .rich-text-editor .hljs-title, .dark .rich-text-editor .hljs-section, .dark .rich-text-editor .hljs-title\.function_ { color: oklch(0.72 0.12 280); } .dark .rich-text-editor .hljs-attr, .dark .rich-text-editor .hljs-attribute { color: oklch(0.72 0.1 60); } .dark .rich-text-editor .hljs-variable, .dark .rich-text-editor .hljs-template-variable { color: oklch(0.72 0.12 20); } .dark .rich-text-editor .hljs-type, .dark .rich-text-editor .hljs-title\.class_ { color: oklch(0.72 0.12 200); } .dark .rich-text-editor .hljs-deletion { color: oklch(0.7 0.18 25); } /* Blockquotes */ .rich-text-editor blockquote { border-left: 2px solid var(--border); padding-left: 0.75rem; margin: 0.5rem 0; color: var(--muted-foreground); } /* Horizontal rules */ .rich-text-editor hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; } /* Links */ .rich-text-editor a { color: var(--brand); text-decoration: none; } .rich-text-editor a:hover { text-decoration: underline; text-underline-offset: 2px; } /* Issue mention cards — override link styling */ .rich-text-editor a.issue-mention { color: inherit; text-decoration: none; } .rich-text-editor a.issue-mention:hover { text-decoration: none; } /* Mentions */ .rich-text-editor .mention { color: var(--primary); font-weight: 600; text-decoration: none; margin: 0 0.125rem; } /* Strong / emphasis */ .rich-text-editor strong { font-weight: 600; } .rich-text-editor em { font-style: italic; } .rich-text-editor s { text-decoration: line-through; color: var(--muted-foreground); } /* Readonly mode overrides */ .rich-text-editor.readonly.ProseMirror { caret-color: transparent; cursor: default; } /* Mention NodeView inline layout fix */ .rich-text-editor [data-node-view-wrapper] { display: inline; } /* Images in readonly mode */ .rich-text-editor.readonly img { border-radius: var(--radius); margin: 0.5rem 0; } /* Uploading image placeholder (blob: URLs = in-flight uploads) */ .rich-text-editor img[src^="blob:"] { opacity: 0.5; border-radius: var(--radius); animation: rte-pulse 1.5s ease-in-out infinite; } @keyframes rte-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.3; } }