a tool for shared writing and social publishing

fixed button block layout weirdness, added an ative state to text alignment toolbar

+28 -13
+2 -2
components/Blocks/Block.tsx
··· 351 351 }; 352 352 353 353 export const BlockLayout = (props: { 354 - isSelected?: boolean; 354 + isSelected: boolean; 355 355 children: React.ReactNode; 356 356 className?: string; 357 357 optionsClassName?: string; ··· 368 368 > 369 369 <div 370 370 className={`nonTextBlock ${props.className} p-2 sm:p-3 overflow-hidden 371 - ${props.hasAlignment ? "w-fit" : "w-full"} 371 + ${props.hasAlignment ? "w-fit" : "w-full"} 372 372 ${props.isSelected ? "block-border-selected " : "block-border"} 373 373 ${props.borderOnHover && "hover:border-accent-contrast! hover:outline-accent-contrast! focus-within:border-accent-contrast! focus-within:outline-accent-contrast!"}`} 374 374 style={{
+18 -11
components/Blocks/ButtonBlock.tsx
··· 32 32 let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value; 33 33 34 34 return ( 35 - <a 36 - href={url?.data.value} 37 - target="_blank" 38 - className={`relative hover:outline-accent-contrast rounded-md! ${alignment === "justify" && "w-full"} ${isSelected ? "block-border-selected border-0!" : "block-border border-transparent! border-0!"}`} 35 + <BlockLayout 36 + isSelected={!!isSelected} 37 + borderOnHover 38 + hasAlignment={alignment !== "justify"} 39 + className={`p-0! rounded-md! border-none!`} 39 40 > 40 - <ButtonPrimary 41 - role="link" 42 - type="submit" 43 - fullWidth={alignment === "justify"} 41 + <a 42 + href={url?.data.value} 43 + target="_blank" 44 + className={` ${alignment === "justify" ? "w-full" : "w-fit"}`} 44 45 > 45 - {text?.data.value} 46 - </ButtonPrimary> 47 - </a> 46 + <ButtonPrimary 47 + role="link" 48 + type="submit" 49 + fullWidth={alignment === "justify"} 50 + > 51 + {text?.data.value} 52 + </ButtonPrimary> 53 + </a> 54 + </BlockLayout> 48 55 ); 49 56 }; 50 57
+8
components/Toolbar/TextAlignmentToolbar.tsx
··· 7 7 export function TextAlignmentToolbar() { 8 8 let focusedBlock = useUIState((s) => s.focusedEntity); 9 9 let { rep } = useReplicache(); 10 + let alignment = useEntity( 11 + focusedBlock?.entityID || null, 12 + "block/text-alignment", 13 + )?.data.value; 10 14 let setAlignment = useCallback( 11 15 (alignment: Fact<"block/text-alignment">["data"]["value"]) => { 12 16 let blocks = useUIState.getState().selectedBlocks; ··· 26 30 <ToolbarButton 27 31 onClick={() => setAlignment("left")} 28 32 tooltipContent="Align Left" 33 + active={alignment === "left"} 29 34 > 30 35 <AlignLeftSmall /> 31 36 </ToolbarButton> 32 37 <ToolbarButton 33 38 onClick={() => setAlignment("center")} 34 39 tooltipContent="Align Center" 40 + active={alignment === "center"} 35 41 > 36 42 <AlignCenterSmall /> 37 43 </ToolbarButton> 38 44 <ToolbarButton 39 45 onClick={() => setAlignment("right")} 40 46 tooltipContent="Align Right" 47 + active={alignment === "right"} 41 48 > 42 49 <AlignRightSmall /> 43 50 </ToolbarButton> ··· 45 52 <ToolbarButton 46 53 onClick={() => setAlignment("justify")} 47 54 tooltipContent="Align Justified" 55 + active={alignment === "justify"} 48 56 > 49 57 <AlignJustifiedSmall /> 50 58 </ToolbarButton>