diff --git a/src/lib/components/content/EmojiPicker.svelte b/src/lib/components/content/EmojiPicker.svelte index a6db029..d29689e 100644 --- a/src/lib/components/content/EmojiPicker.svelte +++ b/src/lib/components/content/EmojiPicker.svelte @@ -2,7 +2,7 @@ import emojiData from 'unicode-emoji-json/data-ordered-emoji.json'; import emojiNames from 'unicode-emoji-json/data-by-emoji.json'; import EmojiDrawer from './EmojiDrawer.svelte'; - import { loadAllEmojiPacks, getAllCustomEmojis } from '../../services/nostr/nip30-emoji.js'; + import { loadAllEmojiPacks, getAllCustomEmojis, invalidateEmojiSetCache, forceReloadAllEmojiPacks } from '../../services/nostr/nip30-emoji.js'; import { signAndPublish } from '../../services/nostr/auth-handler.js'; import { relayManager } from '../../services/nostr/relay-manager.js'; import { uploadFileToServer } from '../../services/nostr/file-upload.js'; @@ -29,20 +29,6 @@ let fileInput: HTMLInputElement | null = $state(null); let shortcodeInput: HTMLInputElement | null = $state(null); let showUploadForm = $state(false); - - // Metadata form state (like GIF picker) - let showMetadataForm = $state(false); - let pendingUpload: { file: File; fileUrl: string; shortcode: string } | null = $state(null); - let metadataForm = $state({ - title: '', - summary: '', - alt: '', - dim: '', - blurhash: '', - thumb: '', - image: '', - content: '' - }); // Check if user is logged in let isLoggedIn = $derived(sessionManager.isLoggedIn()); @@ -237,21 +223,12 @@ } } - // Store pending upload for metadata form - pendingUpload = { file, fileUrl, shortcode }; - showMetadataForm = true; + // Automatically publish the emoji set after upload + await publishEmojiSet(file, fileUrl, shortcode); - // Reset metadata form and prefill with shortcode and image URL - metadataForm = { - title: shortcode, // Prefill with shortcode - summary: '', - alt: `:${shortcode}: emoji`, - dim: '', - blurhash: '', - thumb: '', - image: fileUrl, // Prefill with the uploaded emoji URL - content: '' - }; + // Reset form + if (fileInput) fileInput.value = ''; + if (shortcodeInput) shortcodeInput.value = ''; } catch (error) { const errorMessage = error instanceof Error ? error.message : String(error); const fileName = files && files.length > 0 ? files[0].name : 'file'; @@ -262,17 +239,13 @@ } } - async function publishWithMetadata() { - if (!pendingUpload) return; - - const { file, fileUrl, shortcode } = pendingUpload; + async function publishEmojiSet(file: File, fileUrl: string, shortcode: string) { const session = sessionManager.getSession(); if (!session) { uploadError = 'Please log in to publish emojis'; return; } - uploading = true; uploadError = null; try { @@ -335,15 +308,13 @@ if (result.success.length > 0) { console.log(`[EmojiPicker] Published emoji set event for ${file.name} (shortcode: :${finalShortcode}:) to ${result.success.length} relay(s)`); - showMetadataForm = false; - pendingUpload = null; showUploadForm = false; - // Reset form - if (fileInput) fileInput.value = ''; - if (shortcodeInput) shortcodeInput.value = ''; + // Invalidate cache for this user's emoji set and force reload + invalidateEmojiSetCache(session.pubkey); + forceReloadAllEmojiPacks(); - // Reload custom emojis + // Reload custom emojis to show the newly published emoji await loadCustomEmojis(); } else { const errorMsg = result.failed.length > 0 @@ -355,16 +326,10 @@ const errorMessage = error instanceof Error ? error.message : String(error); console.error(`[EmojiPicker] Error publishing ${file.name}:`, error); uploadError = errorMessage; - } finally { - uploading = false; + throw error; // Re-throw so handleEmojiUpload can handle it } } - function cancelMetadataForm() { - showMetadataForm = false; - pendingUpload = null; - uploading = false; - } function triggerEmojiUpload() { if (showUploadForm) { @@ -485,115 +450,6 @@ {/snippet} - -{#if showMetadataForm && pendingUpload} -
e.key === 'Escape' && cancelMetadataForm()} - role="button" - tabindex="0" - aria-label="Close metadata form" - > -
e.stopPropagation()} - onkeydown={(e) => e.stopPropagation()} - role="dialog" - aria-modal="true" - aria-labelledby="emoji-metadata-modal-title" - tabindex="-1" - > -
-

Add Metadata for {pendingUpload.file.name}

- -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- {#if uploadError} -
{uploadError}
- {/if} -
-
-
-{/if} diff --git a/src/lib/components/content/MarkdownRenderer.svelte b/src/lib/components/content/MarkdownRenderer.svelte index 106e31b..f495795 100644 --- a/src/lib/components/content/MarkdownRenderer.svelte +++ b/src/lib/components/content/MarkdownRenderer.svelte @@ -212,7 +212,7 @@ const escapedUrl = escapeHtml(url); const escapedShortcode = escapeHtml(shortcode); // Replace with img tag, preserving the shortcode as alt text - const imgTag = `${escapedShortcode}`; + const imgTag = `${escapedShortcode}`; processed = processed.replaceAll(shortcode, imgTag); } @@ -755,6 +755,9 @@ display: inline-block; margin: 0; vertical-align: middle; + width: 1.6em; + height: 1.6em; + object-fit: contain; /* Emojis should be in full color, no grayscale filter */ } diff --git a/src/lib/components/write/CreateEventForm.svelte b/src/lib/components/write/CreateEventForm.svelte index 90391d0..4b32f9c 100644 --- a/src/lib/components/write/CreateEventForm.svelte +++ b/src/lib/components/write/CreateEventForm.svelte @@ -1074,7 +1074,7 @@ } as NostrEvent; })()} - + {:else}

No content to preview

{/if} diff --git a/src/lib/modules/comments/CommentForm.svelte b/src/lib/modules/comments/CommentForm.svelte index ed2cfbb..e984b7d 100644 --- a/src/lib/modules/comments/CommentForm.svelte +++ b/src/lib/modules/comments/CommentForm.svelte @@ -613,7 +613,7 @@ } as NostrEvent; })()} - + {:else}

No content to preview

{/if} diff --git a/src/lib/services/nostr/nip30-emoji.ts b/src/lib/services/nostr/nip30-emoji.ts index 47a21d0..405b0ac 100644 --- a/src/lib/services/nostr/nip30-emoji.ts +++ b/src/lib/services/nostr/nip30-emoji.ts @@ -44,6 +44,26 @@ export function getAllCustomEmojis(): Array<{ shortcode: string; url: string }> let allEmojiPacksLoaded = false; let loadingEmojiPacks = false; +/** + * Invalidate cache for a specific pubkey's emoji set + * This forces a fresh fetch on the next load + */ +export function invalidateEmojiSetCache(pubkey: string): void { + emojiSetCache.delete(pubkey); + // Also clear any shortcodes that might have come from this pubkey + // We'll rebuild the shortcode cache on next load + allEmojiPacksLoaded = false; +} + +/** + * Force reload all emoji packs (clears cache and reloads) + */ +export function forceReloadAllEmojiPacks(): void { + emojiSetCache.clear(); + shortcodeCache.clear(); + allEmojiPacksLoaded = false; +} + /** * Parse a kind 10030 emoji set event or kind 30030 emoji pack */