Private
Public Access
ksmithandClaude Sonnet 5
2e84ca42b7
Site-wide, any user can upload -- usable both as reactions and inline in message text via :shortcode:, alongside the existing built-in Unicode picker. A :shortcode: reference is stored/sent as literal text (same as the built-in shortcode convention) and resolved to an image at render time, so it degrades to plain text if the emoji is later deleted. Backend: new custom_emoji table (shortcode unique, sized to fit MessageReaction.emoji's existing column alongside its colons), upload/ list/delete endpoints (delete restricted to uploader or site admin). Frontend: a CustomEmojiProvider context feeds a new "Custom" category in the emoji picker (inline upload + hover-to-remove), extends the composer's shortcode autocomplete, and a shared EmojiGlyph resolver renders custom emoji wherever a value can appear -- message text, reaction pills, and the picker itself. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
62 lines
1.1 KiB
CSS
62 lines
1.1 KiB
CSS
.composer-autocomplete {
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
left: 0;
|
|
z-index: 31;
|
|
width: 240px;
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
background: var(--ds-surface);
|
|
border: 1px solid var(--ds-border);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
padding: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.composer-autocomplete-item {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 6px;
|
|
padding: 6px 8px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
color: var(--ds-text);
|
|
}
|
|
|
|
.composer-autocomplete-item-active,
|
|
.composer-autocomplete-item:hover {
|
|
background: var(--ds-surface-2);
|
|
}
|
|
|
|
.composer-autocomplete-primary {
|
|
font-size: 0.84rem;
|
|
font-weight: 700;
|
|
color: var(--ds-accent);
|
|
}
|
|
|
|
.composer-autocomplete-emoji-glyph {
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.composer-autocomplete-custom-emoji {
|
|
display: block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.composer-autocomplete-secondary {
|
|
font-size: 0.76rem;
|
|
color: var(--ds-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|