reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add editor screen

Browse Source
This commit is contained in:
reya
2024-02-23 14:56:24 +07:00
parent 64286aa354
commit 84584a4d1f
39 changed files with 917 additions and 493 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/ui/src/note/child.tsx
View File

@@ -21,12 +21,10 @@ export function NoteChild({
const richContent = useMemo(() => {
if (!data) return "";
let parsedContent: string | ReactNode[] = data.content.replace(
/\n+/g,
"\n",
);
let parsedContent: string | ReactNode[] =
data.content.substring(0, 160) + "...";
const text = parsedContent as string;
const text = data.content;
const words = text.split(/( |\n)/);
const hashtags = words.filter((word) => word.startsWith("#"));
@@ -104,7 +102,7 @@ export function NoteChild({
<div className="relative flex gap-3">
<div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
<div className="absolute right-0 top-[18px] h-3 w-3 -translate-y-1/2 translate-x-1/2 rotate-45 transform bg-neutral-200 dark:bg-neutral-800" />
<div className="content-break mt-6 line-clamp-3 select-text leading-normal text-neutral-900 dark:text-neutral-100">
<div className="content-break mt-6 select-text leading-normal text-neutral-900 dark:text-neutral-100">
{richContent}
</div>
</div>

8
packages/ui/src/note/mentions/note.tsx
View File

@@ -103,9 +103,9 @@ export function MentionNote({
}
return (
<div className="my-1.5 flex w-full cursor-default flex-col rounded-xl bg-neutral-100 pt-1 ring-1 ring-black/5 dark:bg-neutral-900 dark:ring-white/5">
<div className="my-1 flex w-full cursor-default flex-col rounded-xl bg-neutral-100 px-3 pt-1 ring-1 ring-black/5 dark:bg-neutral-900 dark:ring-white/5">
<User.Provider pubkey={data.pubkey}>
<User.Root className="flex h-10 items-center gap-2 px-3">
<User.Root className="flex h-10 items-center gap-2">
<User.Avatar className="size-6 shrink-0 rounded-full object-cover" />
<div className="inline-flex flex-1 items-center gap-2">
<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
@@ -117,11 +117,11 @@ export function MentionNote({
</div>
</User.Root>
</User.Provider>
<div className="line-clamp-4 select-text whitespace-normal text-balance px-3 leading-normal">
<div className="line-clamp-4 select-text whitespace-normal text-balance leading-normal">
{richContent}
</div>
{openable ? (
<div className="flex h-10 items-center justify-between px-3">
<div className="flex h-10 items-center justify-between">
<button
type="button"
onClick={() => ark.open_thread(data.id)}

2
packages/ui/src/note/preview/image.tsx
View File

@@ -37,7 +37,7 @@ export function ImagePreview({ url }: { url: string }) {
// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
<div
onClick={open}
className="group relative my-1.5 rounded-xl ring-1 ring-black/5 dark:ring-white/5"
className="group relative my-1 rounded-xl ring-1 ring-black/5 dark:ring-white/5"
>
<img
src={url}

2
packages/ui/src/note/preview/link.tsx
View File

@@ -54,7 +54,7 @@ export function LinkPreview({ url }: { url: string }) {
href={url}
target="_blank"
rel="noreferrer"
className="my-1.5 flex w-full flex-col overflow-hidden rounded-xl bg-neutral-100 ring-1 ring-black/5 dark:bg-neutral-900 dark:ring-white/5"
className="my-1 flex w-full flex-col overflow-hidden rounded-xl bg-neutral-100 ring-1 ring-black/5 dark:bg-neutral-900 dark:ring-white/5"
>
{isImage(data.image) ? (
<img

2
packages/ui/src/note/preview/video.tsx
View File

@@ -9,7 +9,7 @@ import {
export function VideoPreview({ url }: { url: string }) {
return (
<div className="my-1.5 w-full overflow-hidden rounded-xl ring-1 ring-black/5 dark:ring-white/5">
<div className="my-1 w-full overflow-hidden rounded-xl ring-1 ring-black/5 dark:ring-white/5">
<MediaController>
<video
slot="media"