7cc4e63e0e
Paste/drop and attachment button previously used separate upload paths. The button uploaded first then called insertFile (which replaced the current selection), while paste inserted a blob preview first. This caused the second image to overwrite the first when both were used. Now both paths share the same flow via uploadAndInsertFile(): blob preview with uploading animation → background upload → replace URL. - Extract shared uploadAndInsertFile() function - Replace insertFile ref method with uploadFile (inserts at doc end) - Simplify FileUploadButton to onSelect(file) — no more onUpload/onInsert - Wire onUploadFile in comment edit mode (was missing, upload was no-op) - Unify image border-radius CSS for both editing and readonly modes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
254 lines
5.8 KiB
CSS
254 lines
5.8 KiB
CSS
/* 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 — shared styling for both editing and readonly */
|
|
.rich-text-editor img {
|
|
border-radius: var(--radius);
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
/* Uploading image placeholder — data-uploading attribute managed by ProseMirror schema */
|
|
.rich-text-editor img[data-uploading] {
|
|
opacity: 0.5;
|
|
border-radius: var(--radius);
|
|
animation: rte-upload-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes rte-upload-pulse {
|
|
0%, 100% { opacity: 0.5; }
|
|
50% { opacity: 0.3; }
|
|
}
|