Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
10 kB · 339 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340"use client";import { CloseTiny } from "components/Icons/CloseTiny";import { Input } from "components/Input";import { useState, useRef } from "react";import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";import { Popover } from "components/Popover";import Link from "next/link";import { searchTags, type TagSearchResult } from "actions/searchTags";
export const Tag = (props: { name: string; selected?: boolean; onDelete?: (tag: string) => void; onClick?: (tag: string) => void; // How many posts carry this tag, rendered inside the chip after the name. count?: number; className?: string;}) => { let labelClassName = `px-1 py-0.5 hover:no-underline! ${props.selected ? "text-accent-2" : "text-tertiary"}`; return ( <div className={`tag flex items-center text-xs rounded-md border ${props.selected ? "bg-accent-1 border-accent-1 font-bold" : "bg-bg-page border-border"} ${props.className}`} > {props.onClick ? ( <button type="button" className={labelClassName} aria-pressed={!!props.selected} onClick={() => props.onClick?.(props.name)} > {props.name}{" "} </button> ) : ( <Link href={`https://leaflet.pub/tag/${encodeURIComponent(props.name)}`} className={labelClassName} aria-label={`Tag: ${props.name}`} > {props.name}{" "} </Link> )} {props.count !== undefined ? ( <span className={`pr-1 ${props.selected ? "text-accent-2" : "text-tertiary"}`} > ({props.count}) </span> ) : null} {props.selected && (props.onDelete || props.onClick) ? ( <button type="button" aria-label={`Remove tag: ${props.name}`} onClick={() => props.onDelete ? props.onDelete(props.name) : props.onClick?.(props.name) } > <CloseTiny className="scale-80 pr-1 text-accent-2" /> </button> ) : null} </div> );};
export const TagSelector = (props: { selectedTags: string[]; setSelectedTags: (tags: string[]) => void; rightAlign?: boolean;}) => { return ( <div className="flex flex-col gap-2 text-primary"> <TagSearchInput selectedTags={props.selectedTags} setSelectedTags={props.setSelectedTags} rightAlign={props.rightAlign} /> {props.selectedTags.length > 0 ? ( <div className={`flex flex-wrap gap-2 ${props.rightAlign && "justify-end"}`} > {props.selectedTags.map((tag) => ( <Tag key={tag} name={tag} selected onDelete={() => { props.setSelectedTags( props.selectedTags.filter((t) => t !== tag), ); }} /> ))} </div> ) : ( <div className={`text-tertiary italic text-sm h-6 ${props.rightAlign && "text-right"}`} > no tags selected </div> )} </div> );};
const TagSearchInput = (props: { rightAlign?: boolean; selectedTags: string[]; setSelectedTags: (tags: string[]) => void;}) => { let [tagInputValue, setTagInputValue] = useState(""); let [isOpen, setIsOpen] = useState(false); let [highlightedIndex, setHighlightedIndex] = useState(0); let [searchResults, setSearchResults] = useState<TagSearchResult[]>([]); let [isSearching, setIsSearching] = useState(false);
let inputWidth = document.getElementById( "placeholder-tag-search-input", )?.clientWidth;
// Fetch tags whenever the input value changes. Results are only shown from // 3 characters on, so don't issue a search for shorter inputs — notably the // empty string this effect fires with on mount. useDebouncedEffect( async () => { if (tagInputValue.trim().length < 3) { setSearchResults([]); return; } setIsSearching(true); const results = await searchTags(tagInputValue); if (results) { setSearchResults(results); } setIsSearching(false); }, 300, [tagInputValue], );
const filteredTags = searchResults .filter((tag) => !props.selectedTags.includes(tag.name)) .filter((tag) => tag.name.toLowerCase().includes(tagInputValue.toLowerCase()), );
const showResults = tagInputValue.length >= 3;
function clearTagInput() { setHighlightedIndex(0); setTagInputValue(""); }
function selectTag(tag: string) { props.setSelectedTags([...props.selectedTags, tag]); clearTagInput(); }
const handleKeyDown = ( e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>, ) => { if (!isOpen) return;
if (e.key === "ArrowDown") { e.preventDefault(); setHighlightedIndex((prev) => prev < filteredTags.length ? prev + 1 : prev, ); } else if (e.key === "ArrowUp") { e.preventDefault(); setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0)); } else if (e.key === "Enter") { e.preventDefault(); selectTag( userInputResult ? highlightedIndex === 0 ? tagInputValue : filteredTags[highlightedIndex - 1].name : filteredTags[highlightedIndex].name, ); clearTagInput(); } else if (e.key === "Escape") { setIsOpen(false); } };
const userInputResult = showResults && tagInputValue !== "" && !filteredTags.some((tag) => tag.name === tagInputValue);
return ( <div className="relative"> <Input className="input-with-border grow w-full outline-none!" id="placeholder-tag-search-input" value={tagInputValue} placeholder="search tags…" onChange={(e) => { setTagInputValue(e.target.value); setIsOpen(true); setHighlightedIndex(0); }} onKeyDown={handleKeyDown} onFocus={() => { setIsOpen(true); document.getElementById("tag-search-input")?.focus(); }} /> <Popover noArrow open={isOpen} onOpenChange={() => { setIsOpen(!isOpen); if (!isOpen) setTimeout(() => { document.getElementById("tag-search-input")?.focus(); }, 100); }} className="tagResults w-full p-2! min-w-xs text-primary max-w-md translate-x-[calc(50%-8px)]" sideOffset={-39} onOpenAutoFocus={(e) => e.preventDefault()} asChild trigger={ <button className="absolute left-0 top-0 right-0 h-[30px] max-w-md"></button> } > <div className="" style={{ width: `${inputWidth}px` }}> <Input className="input-with-border grow w-full mb-2" id="tag-search-input" placeholder="search tags…" value={tagInputValue} onChange={(e) => { setTagInputValue(e.target.value); setIsOpen(true); setHighlightedIndex(0); }} onKeyDown={handleKeyDown} onFocus={() => { setIsOpen(true); }} /> {props.selectedTags.length > 0 ? ( <div className={`flex flex-wrap gap-2 pb-[6px] ${props.rightAlign && "justify-end"}`} > {props.selectedTags.map((tag) => ( <Tag key={tag} name={tag} selected onDelete={() => { props.setSelectedTags( props.selectedTags.filter((t) => t !== tag), ); }} /> ))} </div> ) : ( <div className={`text-tertiary italic text-sm h-6 ${props.rightAlign && "text-right"}`} > no tags selected </div> )} <hr className=" mb-[2px] border-border-light" />
{showResults ? ( <> {userInputResult && ( <TagResult key={"userInput"} index={0} name={tagInputValue} tagged={0} highlighted={0 === highlightedIndex} setHighlightedIndex={setHighlightedIndex} onSelect={() => { selectTag(tagInputValue); }} /> )} {filteredTags.map((tag, i) => ( <TagResult key={tag.name} index={userInputResult ? i + 1 : i} name={tag.name} tagged={tag.document_count} highlighted={ (userInputResult ? i + 1 : i) === highlightedIndex } setHighlightedIndex={setHighlightedIndex} onSelect={() => { selectTag(tag.name); }} /> ))} </> ) : ( <div className="text-tertiary italic text-sm py-1"> type at least 3 characters to search </div> )} </div> </Popover> </div> );};
const TagResult = (props: { name: string; tagged: number; onSelect: () => void; index: number; highlighted: boolean; setHighlightedIndex: (i: number) => void;}) => { return ( <div className="-mx-1"> <button className={`w-full flex justify-between items-center text-left pr-1 pl-[6px] py-0.5 rounded-md ${props.highlighted ? "bg-border-light" : ""}`} onSelect={(e) => { e.preventDefault(); props.onSelect(); }} onClick={(e) => { e.preventDefault(); props.onSelect(); }} onMouseEnter={(e) => props.setHighlightedIndex(props.index)} > {props.name} <div className="text-tertiary text-sm"> {props.tagged}</div> </button> </div> );};