Skip to content

Commit fb32e3b

Browse files
pdelfanpdelfan
committed
Merge branch 'preview'
2 parents 0ca2b41 + f3ac86b commit fb32e3b

File tree

5 files changed

+50
-38
lines changed

5 files changed

+50
-38
lines changed

‎src/components/inputs/editor/BottomEditorBar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export default function BottomEditorBar(props: Props) {
9595
languages={languages}
9696
onSelectLanguages={onSelectLanguages}
9797
/>
98-
<CharacterCount charCount={charCount} />
98+
<CharacterCount charCount={charCount} max={300} />
9999
</div>
100100
</div>
101101
</div>

‎src/components/inputs/editor/CharacterCount.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@ import { CircularProgressbar } from "react-circular-progressbar";
22

33
interface Props {
44
charCount: number;
5+
max: number;
56
}
67

78
export default function CharacterCount(props: Props) {
8-
const { charCount } = props;
9-
const percentage = (100 * charCount) / 300;
9+
const { charCount, max } = props;
10+
const percentage = (100 * charCount) / max;
1011

1112
return (
1213
<div className="flex gap-2.5">
1314
{percentage > 100 && (
1415
<span className="text-status-danger w-8 font-medium">
15-
{300 - charCount}
16+
{max - charCount}
1617
</span>
1718
)}
1819
<CircularProgressbar

‎src/components/inputs/editor/Editor.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function Editor(props: Props) {
4040
const [languages, setLanguages] = useState<Language[]>([]);
4141
const [images, setImages] = useState<UploadImage[]>();
4242
const [embedSuggestions, setEmbedSuggestions] = useState<Set<string>>(
43-
new Set("")
43+
new Set(""),
4444
);
4545
const [linkEmbed, setLinkEmbed] = useState("");
4646
const [linkCard, setLinkCard] = useState<LinkMeta | null>(null);
@@ -49,7 +49,7 @@ export default function Editor(props: Props) {
4949
const quoteAuthor = quote?.author.displayName || quote?.author.handle;
5050
const placeholderText = getComposerPlaceholder(
5151
replyTo ? "reply" : quote ? "quote" : "post",
52-
replyAuthor ?? quoteAuthor
52+
replyAuthor ?? quoteAuthor,
5353
);
5454

5555
const editor = useEditor({
@@ -152,7 +152,7 @@ export default function Editor(props: Props) {
152152
numberOfImages={images?.length ?? 0}
153153
/>
154154

155-
<ScrollArea.Root className="max-h-[80svh] md:h-[30svh] my-3 bg-skin-secondary p-3 rounded-2xl overflow-auto">
155+
<ScrollArea.Root className="max-h-[80svh] md:h-[32svh] my-3 bg-skin-secondary p-3 rounded-2xl overflow-auto">
156156
<ScrollArea.Scrollbar>
157157
<ScrollArea.Thumb />
158158
</ScrollArea.Scrollbar>

‎src/components/inputs/editor/UploadPreview.tsx

+41-31
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import Image from "next/image";
55
import { SetStateAction, useState } from "react";
66
import Textarea from "../textarea/Textarea";
77
import { CgClose } from "react-icons/cg";
8+
import CharacterCount from "./CharacterCount";
9+
import { MAX_ALT_TEXT_LENGTH } from "@/lib/consts/general";
810

911
interface Props {
1012
images: UploadImage[];
@@ -19,7 +21,7 @@ export default function UploadPreview(props: Props) {
1921

2022
const handleRemove = (image: UploadImage) => {
2123
onUpdate((prev) =>
22-
prev?.filter((prevImage) => prevImage.url !== image.url)
24+
prev?.filter((prevImage) => prevImage.url !== image.url),
2325
);
2426
};
2527

@@ -74,43 +76,51 @@ export default function UploadPreview(props: Props) {
7476
<Textarea
7577
rows={6}
7678
autoFocus={false}
79+
maxLength={MAX_ALT_TEXT_LENGTH}
7780
placeholder="Describe what's happening in this image"
7881
defaultValue={selectedImage.altText ?? ""}
7982
onChange={(e) =>
8083
setAltText(e.currentTarget.value)
8184
}
8285
className="resize-none"
8386
/>
84-
<div className="mt-2 flex justify-end gap-3">
85-
<Button
86-
onClick={() => {
87-
setShowAltTextModal(false);
88-
setAltText("");
89-
}}
90-
className="border-skin-base text-skin-base hover:bg-skin-secondary rounded-full border px-4 py-2 text-sm font-semibold"
91-
>
92-
Cancel
93-
</Button>
94-
<Button
95-
onClick={() => {
96-
setShowAltTextModal(false);
97-
onUpdate((prev) =>
98-
prev?.map((prevImage) =>
99-
prevImage.url === selectedImage.url
100-
? Object.assign(prevImage, {
101-
altText:
102-
altText !== selectedImage.altText
103-
? altText
104-
: selectedImage.altText,
105-
})
106-
: prevImage
107-
)
108-
);
109-
}}
110-
className="bg-primary hover:bg-primary-dark text-skin-icon-inverted rounded-full px-6 py-2 text-sm font-semibold"
111-
>
112-
Save
113-
</Button>
87+
<div className="flex flex-wrap gap-2 items-center justify-between mt-2 ">
88+
<CharacterCount
89+
charCount={altText.length}
90+
max={MAX_ALT_TEXT_LENGTH}
91+
/>
92+
<div className="flex justify-end gap-3">
93+
<Button
94+
onClick={() => {
95+
setShowAltTextModal(false);
96+
setAltText("");
97+
}}
98+
className="border-skin-base text-skin-base hover:bg-skin-secondary rounded-full border px-4 py-2 text-sm font-semibold"
99+
>
100+
Cancel
101+
</Button>
102+
<Button
103+
onClick={() => {
104+
setShowAltTextModal(false);
105+
onUpdate((prev) =>
106+
prev?.map((prevImage) =>
107+
prevImage.url === selectedImage.url
108+
? Object.assign(prevImage, {
109+
altText:
110+
altText !==
111+
selectedImage.altText
112+
? altText
113+
: selectedImage.altText,
114+
})
115+
: prevImage,
116+
),
117+
);
118+
}}
119+
className="bg-primary hover:bg-primary-dark text-skin-icon-inverted rounded-full px-6 py-2 text-sm font-semibold"
120+
>
121+
Save
122+
</Button>
123+
</div>
114124
</div>
115125
</div>
116126
</div>

‎src/lib/consts/general.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export const MAX_KNOWN_FOLLOWERS = 3;
22
export const DEFAULT_SERVICE = "https://bsky.social";
3+
export const MAX_ALT_TEXT_LENGTH = 2000;

0 commit comments

Comments
 (0)