Add MarkdownEditor component, asset image upload, and rich description editing
Introduce MarkdownEditor built on @mdxeditor/editor with headings, lists, links, quotes, image upload with drag-and-drop, and themed CSS integration. Add asset image upload API (routes, service, storage) and wire image upload into InlineEditor multiline mode, NewIssueDialog, NewProjectDialog, GoalDetail, IssueDetail, and ProjectDetail description fields. Tighten prompt template editor styling. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
167
ui/src/index.css
167
ui/src/index.css
@@ -191,3 +191,170 @@
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* MDXEditor theme integration */
|
||||
.paperclip-mdxeditor-scope,
|
||||
.paperclip-mdxeditor {
|
||||
--baseBase: var(--background);
|
||||
--baseBg: transparent;
|
||||
--baseBgSubtle: color-mix(in oklab, var(--accent) 35%, transparent);
|
||||
--baseLine: var(--border);
|
||||
--baseSolid: var(--muted-foreground);
|
||||
--baseSolidHover: var(--foreground);
|
||||
--baseText: var(--muted-foreground);
|
||||
--baseBorderColor: var(--border);
|
||||
--baseBorder: var(--border);
|
||||
--baseBorderHover: var(--ring);
|
||||
--baseTextContrast: var(--foreground);
|
||||
--baseTextContrastMuted: var(--muted-foreground);
|
||||
--baseTextEmphasis: var(--foreground);
|
||||
--basePageBg: var(--background);
|
||||
--baseRadius: var(--radius);
|
||||
--baseLineHeight: 1.5;
|
||||
--accentBorder: color-mix(in oklab, var(--primary) 35%, var(--border));
|
||||
--accentSolid: var(--primary);
|
||||
--accentSolidHover: var(--primary);
|
||||
--accentLine: color-mix(in oklab, var(--primary) 20%, transparent);
|
||||
--accentBg: var(--accent);
|
||||
--accentBgHover: color-mix(in oklab, var(--accent) 80%, var(--background));
|
||||
--accentBgActive: color-mix(in oklab, var(--accent) 72%, var(--background));
|
||||
--accentText: var(--accent-foreground);
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-scope [class*="_iconButton_"],
|
||||
.paperclip-mdxeditor [class*="_iconButton_"] {
|
||||
color: var(--baseText);
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-scope [class*="_iconButton_"]:hover,
|
||||
.paperclip-mdxeditor [class*="_iconButton_"]:hover {
|
||||
color: var(--baseTextContrast);
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor .mdxeditor-root-contenteditable {
|
||||
min-height: 2.5rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor--borderless .mdxeditor-root-contenteditable {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor [class*="_placeholder_"] {
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-family: inherit;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor--borderless [class*="_placeholder_"] {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content p + p {
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content ul,
|
||||
.paperclip-mdxeditor-content ol {
|
||||
margin: 0.35rem 0;
|
||||
padding-left: 1.1rem;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content ul {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content li {
|
||||
display: list-item;
|
||||
margin: 0.15rem 0;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content li::marker {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content h1,
|
||||
.paperclip-mdxeditor-content h2,
|
||||
.paperclip-mdxeditor-content h3 {
|
||||
margin: 0.4rem 0 0.25rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content img {
|
||||
max-height: 18rem;
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content blockquote {
|
||||
margin: 0.45rem 0;
|
||||
padding-left: 0.7rem;
|
||||
border-left: 2px solid var(--border);
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 0.84em;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-content pre {
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--radius) - 3px);
|
||||
background: color-mix(in oklab, var(--accent) 50%, transparent);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Keep MDXEditor popups above app dialogs when editor is inside a modal. */
|
||||
.paperclip-mdxeditor-scope [class*="_dialogOverlay_"],
|
||||
.paperclip-mdxeditor [class*="_dialogOverlay_"] {
|
||||
z-index: 80;
|
||||
}
|
||||
|
||||
.paperclip-mdxeditor-scope [class*="_dialogContent_"],
|
||||
.paperclip-mdxeditor-scope [class*="_largeDialogContent_"],
|
||||
.paperclip-mdxeditor-scope [class*="_popoverContent_"],
|
||||
.paperclip-mdxeditor-scope [class*="_linkDialogPopoverContent_"],
|
||||
.paperclip-mdxeditor-scope [class*="_tableColumnEditorPopoverContent_"],
|
||||
.paperclip-mdxeditor-scope [class*="_toolbarButtonDropdownContainer_"],
|
||||
.paperclip-mdxeditor-scope [class*="_toolbarNodeKindSelectContainer_"],
|
||||
.paperclip-mdxeditor [class*="_dialogContent_"],
|
||||
.paperclip-mdxeditor [class*="_largeDialogContent_"],
|
||||
.paperclip-mdxeditor [class*="_popoverContent_"],
|
||||
.paperclip-mdxeditor [class*="_linkDialogPopoverContent_"],
|
||||
.paperclip-mdxeditor [class*="_tableColumnEditorPopoverContent_"],
|
||||
.paperclip-mdxeditor [class*="_toolbarButtonDropdownContainer_"],
|
||||
.paperclip-mdxeditor [class*="_toolbarNodeKindSelectContainer_"] {
|
||||
z-index: 81 !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user