render URL inline (#56)

This commit is contained in:
Bullish Bear 2023-07-09 18:22:09 +08:00 committed by GitHub
parent 558b1d72a6
commit e15fa404e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 3 deletions

View File

@ -24,6 +24,7 @@ import { Database } from "../database.ts";
import {
DividerBackgroundColor,
HoverButtonBackgroudColor,
LinkColor,
PrimaryBackgroundColor,
PrimaryTextColor,
} from "./style/colors.ts";
@ -451,13 +452,21 @@ export function ParseMessageContent(
return <img src={message.content} />;
}
const vnode = [<p>{message.content}</p>];
const vnode = [];
let start = 0;
for (const item of parseContent(message.content)) {
const itemStr = message.content.slice(item.start, item.end + 1);
vnode.push(message.content.slice(start, item.start));
switch (item.type) {
case "url":
if (urlIsImage(itemStr)) {
vnode.push(<img src={itemStr} />);
} else {
vnode.push(
<a target="_blank" class={tw`hover:underline text-[${LinkColor}]`} href={itemStr}>
{itemStr}
</a>,
);
}
break;
case "npub":
@ -485,7 +494,10 @@ export function ParseMessageContent(
// todo
break;
}
start = item.end + 1;
}
vnode.push(message.content.slice(start));
return vnode;
}
@ -493,7 +505,7 @@ export function ParseMessageContent(
function ProfileCard(profile: ProfileData, pubkey: PublicKey, eventEmitter: EventEmitter<ViewUserDetail>) {
return (
<div
class={tw`px-4 py-2 border-2 border-[${PrimaryTextColor}4D] rounded-lg hover:bg-[${HoverButtonBackgroudColor}] cursor-pointer w-fit`}
class={tw`px-4 py-2 border-2 border-[${PrimaryTextColor}4D] rounded-lg hover:bg-[${HoverButtonBackgroudColor}] cursor-pointer py-1`}
onClick={() => {
eventEmitter.emit({
type: "ViewUserDetail",
@ -515,7 +527,7 @@ function ProfileCard(profile: ProfileData, pubkey: PublicKey, eventEmitter: Even
function NoteCard(content: string) {
return (
<div class={tw`px-4 py-2 border-2 border-[${PrimaryTextColor}4D] rounded-lg`}>
<div class={tw`px-4 py-2 border-2 border-[${PrimaryTextColor}4D] rounded-lg py-1`}>
{content}
</div>
);

View File

@ -11,3 +11,4 @@ export const SuccessColor = "#22C55E";
export const WarnColor = "#EAB308";
export const ErrorColor = "#EF4444";
export const TitleIconColor = "#FF772B";
export const LinkColor = "#24ADEB";