highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-04-04 18:12:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix link cards breaking lines

Browse Source
This commit is contained in:
hzrd149 2023-10-29 17:02:48 -05:00
parent e740b6f059
commit d1181ef97c
4 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/smooth-chairs-bow.md Normal file
View File

@ -0,0 +1,5 @@
---
"nostrudel": patch
---
Fix link cards breaking lines

5
src/components/embed-types/common.tsx
View File

@ -2,6 +2,7 @@ import { Link } from "@chakra-ui/react";
import OpenGraphCard from "../open-graph-card";
import { isVideoURL } from "../../helpers/url";
import OpenGraphLink from "../open-graph-link";
export function renderVideoUrl(match: URL) {
if (!isVideoURL(match)) return null;
@ -23,6 +24,6 @@ export function renderGenericUrl(match: URL) {
);
}
export function renderOpenGraphUrl(match: URL) {
return <OpenGraphCard url={match} />;
export function renderOpenGraphUrl(match: URL, isEndOfLine: boolean) {
return isEndOfLine ? <OpenGraphCard url={match} /> : <OpenGraphLink url={match} />;
}

12
src/components/open-graph-link.tsx Normal file
View File

@ -0,0 +1,12 @@
import { Link, LinkProps } from "@chakra-ui/react";
import useOpenGraphData from "../hooks/use-open-graph-data";
export default function OpenGraphLink({ url, ...props }: { url: URL } & Omit<LinkProps, "children">) {
const { value: data } = useOpenGraphData(url);
return (
<Link href={url.toString()} isExternal color="blue.500" {...props}>
{data?.ogTitle?.trim() ?? data?.dcTitle?.trim() ?? decodeURI(url.toString())}
</Link>
);
}

11
src/helpers/embeds.ts
View File

@ -4,7 +4,7 @@ import { getMatchLink } from "./regexp";
export type EmbedableContent = (string | JSX.Element)[];
export type EmbedType = {
regexp: RegExp;
render: (match: RegExpMatchArray) => JSX.Element | string | null;
render: (match: RegExpMatchArray, isEndOfLine: boolean) => JSX.Element | string | null;
name: string;
getLocation?: (match: RegExpMatchArray) => { start: number; end: number };
};
@ -35,7 +35,8 @@ export function embedJSX(content: EmbedableContent, embed: EmbedType): Embedable
const before = str.slice(0, start - cursor);
const after = str.slice(end - cursor, str.length);
let render = embed.render(match);
const isEndOfLine = /^\p{Z}*(\n|$)/iu.test(after);
let render = embed.render(match, isEndOfLine);
if (render === null) continue;
if (typeof render !== "string" && !render.props.key) {
@ -68,18 +69,18 @@ export function embedJSX(content: EmbedableContent, embed: EmbedType): Embedable
.flat();
}
export type LinkEmbedHandler = (link: URL) => JSX.Element | string | null;
export type LinkEmbedHandler = (link: URL, isEndOfLine: boolean) => JSX.Element | string | null;
export function embedUrls(content: EmbedableContent, handlers: LinkEmbedHandler[]) {
return embedJSX(content, {
name: "embedUrls",
regexp: getMatchLink(),
render: (match) => {
render: (match, isEndOfLine) => {
try {
const url = new URL(match[0]);
for (const handler of handlers) {
try {
const content = handler(url);
const content = handler(url, isEndOfLine);
if (content) return content;
} catch (e) {}
}