ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-15 10:30:37 +09:00
Code Issues Projects Releases Packages Wiki Activity

Add MarkdownEditor component, asset image upload, and rich description editing

Browse source 
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:
Forgotten 2026-02-20 12:50:45 -06:00
parent 0f4ab72888
commit a4ba4a72cd
16 changed files with 2221 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

167
ui/src/index.css
View file

@ -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;
}