feat: text inline when embeds are off

This commit is contained in:
Alejandro Gómez
2025-12-21 13:54:50 +01:00
parent 005605b385
commit f272f935a3
3 changed files with 25 additions and 24 deletions

View File

@@ -6,9 +6,12 @@ import {
} from "applesauce-core/helpers/url";
import { MediaDialog } from "../MediaDialog";
import { MediaEmbed } from "../MediaEmbed";
import { PlainLink } from "../LinkPreview";
import { useRichTextOptions } from "../RichText";
function MediaPlaceholder({ type }: { type: "image" | "video" | "audio" }) {
return <span className="text-muted-foreground text-sm">[{type}]</span>;
}
interface GalleryNodeProps {
node: {
links?: string[];
@@ -35,13 +38,13 @@ export function Gallery({ node }: GalleryNodeProps) {
if (shouldShowMedia && options.showImages) {
return <MediaEmbed url={url} type="image" preset="inline" enableZoom />;
}
return <PlainLink url={url} />;
return <MediaPlaceholder type="image" />;
}
if (isVideoURL(url)) {
if (shouldShowMedia && options.showVideos) {
return <MediaEmbed url={url} type="video" preset="inline" />;
}
return <PlainLink url={url} />;
return <MediaPlaceholder type="video" />;
}
if (isAudioURL(url)) {
if (shouldShowMedia && options.showAudio) {
@@ -53,9 +56,10 @@ export function Gallery({ node }: GalleryNodeProps) {
/>
);
}
return <PlainLink url={url} />;
return <MediaPlaceholder type="audio" />;
}
return <PlainLink url={url} />;
// Non-media URLs shouldn't appear in galleries, but handle gracefully
return null;
};
// Only show dialog for audio files

View File

@@ -9,6 +9,10 @@ import { MediaEmbed } from "../MediaEmbed";
import { PlainLink } from "../LinkPreview";
import { useRichTextOptions } from "../RichText";
function MediaPlaceholder({ type }: { type: "image" | "video" | "audio" }) {
return <span className="text-muted-foreground text-sm">[{type}]</span>;
}
interface LinkNodeProps {
node: {
href: string;
@@ -40,7 +44,7 @@ export function Link({ node }: LinkNodeProps) {
/>
);
}
return <PlainLink url={href} />;
return <MediaPlaceholder type="image" />;
}
if (isVideoURL(href)) {
@@ -54,7 +58,7 @@ export function Link({ node }: LinkNodeProps) {
/>
);
}
return <PlainLink url={href} />;
return <MediaPlaceholder type="video" />;
}
if (isAudioURL(href)) {
@@ -76,7 +80,7 @@ export function Link({ node }: LinkNodeProps) {
</>
);
}
return <PlainLink url={href} />;
return <MediaPlaceholder type="audio" />;
}
// Plain link for non-media URLs

View File

@@ -3,6 +3,12 @@ import { UserName } from "../UserName";
import { EventEmbed } from "./EventEmbed";
import { EventPointer, AddressPointer } from "nostr-tools/nip19";
import { useDepth, useRichTextOptions } from "../RichText";
import { getKindName } from "@/constants/kinds";
function EventPlaceholder({ kind }: { kind?: number }) {
const name = kind !== undefined ? getKindName(kind) : "event";
return <span className="text-muted-foreground text-sm">[{name}]</span>;
}
interface MentionNodeProps {
node: {
@@ -49,11 +55,7 @@ export function Mention({ node }: MentionNodeProps) {
};
if (!options.showEventEmbeds) {
return (
<span className="text-muted-foreground font-mono text-sm">
{node.encoded || `note:${pointer.id.slice(0, 8)}...`}
</span>
);
return <EventPlaceholder kind={kinds.ShortTextNote} />;
}
return <EventEmbed node={{ pointer }} depth={depth} />;
@@ -63,11 +65,7 @@ export function Mention({ node }: MentionNodeProps) {
const pointer: EventPointer = node.decoded.data;
if (!options.showEventEmbeds) {
return (
<span className="text-muted-foreground font-mono text-sm">
{node.encoded || `nevent:${pointer.id.slice(0, 8)}...`}
</span>
);
return <EventPlaceholder kind={pointer.kind} />;
}
return <EventEmbed node={{ pointer }} depth={depth} />;
@@ -77,12 +75,7 @@ export function Mention({ node }: MentionNodeProps) {
const pointer: AddressPointer = node.decoded.data;
if (!options.showEventEmbeds) {
return (
<span className="text-muted-foreground font-mono text-sm">
{node.encoded ||
`naddr:${pointer.identifier || pointer.pubkey.slice(0, 8)}...`}
</span>
);
return <EventPlaceholder kind={pointer.kind} />;
}
return <EventEmbed node={{ pointer }} depth={depth} />;