sybers.fr / leaflet
a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fixed issue where text lost focus if you clicked somewhere on the text toolbar that isn't a button

celine c1f1ce99 6ad39d18

+16 -7
+7 -1
components/DesktopFooter.tsx
··· 2 2 import { useUIState } from "src/useUIState"; 3 3 import { Media } from "./Media"; 4 4 import { TextToolbar } from "./Toolbar"; 5 + import { keepFocus } from "./Toolbar/TextBlockTypeButtons"; 5 6 6 7 export function DesktopCardFooter(props: { cardID: string }) { 7 8 let focusedBlock = useUIState((s) => s.focusedBlock); ··· 17 18 {focusedBlock && 18 19 focusedBlock.type === "block" && 19 20 focusedBlockParentID === props.cardID && ( 20 - <div className="pointer-events-auto w-fit mx-auto py-1 px-3 bg-bg-card border border-border rounded-full shadow-sm"> 21 + <div 22 + className="pointer-events-auto w-fit mx-auto py-1 px-3 bg-bg-card border border-border rounded-full shadow-sm" 23 + onMouseDown={(e) => { 24 + keepFocus(focusedBlock.entityID); 25 + }} 26 + > 21 27 <TextToolbar 22 28 cardID={focusedBlockParentID} 23 29 blockID={focusedBlock.entityID}
+7 -1
components/MobileFooter.tsx
··· 5 5 import { TextToolbar } from "components/Toolbar"; 6 6 import { ShareOptions } from "./ShareOptions"; 7 7 import { HomeButton } from "./HomeButton"; 8 + import { keepFocus } from "./Toolbar/TextBlockTypeButtons"; 8 9 9 10 export function MobileFooter(props: { entityID: string }) { 10 11 let focusedBlock = useUIState((s) => s.focusedBlock); ··· 12 13 return ( 13 14 <Media mobile className="w-full z-10 -mt-6 touch-none"> 14 15 {focusedBlock && focusedBlock.type == "block" ? ( 15 - <div className="w-full z-10 p-2 flex bg-bg-card "> 16 + <div 17 + className="w-full z-10 p-2 flex bg-bg-card " 18 + onMouseDown={(e) => { 19 + keepFocus(focusedBlock.entityID); 20 + }} 21 + > 16 22 <TextToolbar 17 23 cardID={focusedBlock.parent} 18 24 blockID={focusedBlock.entityID}
+1
components/Toolbar/TextDecorationButton.tsx
··· 39 39 active={hasMark} 40 40 onClick={(e) => { 41 41 e.preventDefault(); 42 + e.stopPropagation(); 42 43 toggleMarkInFocusedBlock(props.mark, props.attrs); 43 44 }} 44 45 tooltipContent={props.tooltipContent}
+1 -5
components/Toolbar/index.tsx
··· 45 45 "default" | "highlight" | "link" | "header" | "list" | "linkBlock" 46 46 >("default"); 47 47 48 - // let [lastUsedHighlight, setlastUsedHighlight] = useState<"1" | "2" | "3">( 49 - // "1", 50 - // ); 51 - 52 48 let lastUsedHighlight = useUIState((s) => s.lastUsedHighlight); 53 49 let setLastUsedHighlight = (color: "1" | "2" | "3") => 54 50 useUIState.setState({ ··· 282 278 let { rep } = useReplicache(); 283 279 if (!isList?.data.value) 284 280 return ( 285 - <div className="flex w-full justify-between items-center gap-4"> 281 + <div className="flex justify-between items-center gap-4"> 286 282 <ToolbarButton 287 283 tooltipContent={ 288 284 <div className="flex flex-col gap-1 justify-center">