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.

made it such that toolbar shows block options is the selected block is empty

celine 25dae7b8 6d0a93a9

+26 -12
+1 -1
components/DesktopFooter.tsx
··· 16 16 focusedTextBlock.type === "block" && 17 17 focusedBlockParent === props.parentID && ( 18 18 <div className="pointer-events-auto w-fit mx-auto py-1 px-3 bg-bg-card border border-border rounded-full shadow-sm"> 19 - <TextToolbar /> 19 + <TextToolbar entityID={focusedTextBlock.entityID} /> 20 20 </div> 21 21 )} 22 22 </Media>
+1 -1
components/MobileFooter.tsx
··· 10 10 <Media mobile className="w-full z-10 -mt-6"> 11 11 {focusedTextBlock && focusedTextBlock.type == "block" ? ( 12 12 <div className="w-full z-10 p-2 flex bg-bg-card "> 13 - <TextToolbar /> 13 + <TextToolbar entityID={props.entityID} /> 14 14 </div> 15 15 ) : ( 16 16 <div className="z-10 pb-2 px-2 flex gap-[6px] items-center justify-end">
+1 -1
components/Toolbar/TextBlockTypeButtons.tsx
··· 52 52 <ToolbarButton className="w-10 flex justify-center" active> 53 53 <BlockTypeIcon entityID={focusedBlock?.entityID} /> 54 54 </ToolbarButton> 55 - <Separator /> 55 + <Separator classname="h-6" /> 56 56 <ToolbarButton 57 57 onClick={() => { 58 58 setLevel(1);
+23 -9
components/Toolbar/index.tsx
··· 1 1 "use client"; 2 2 3 - import { useState } from "react"; 3 + import { useEffect, useState } from "react"; 4 4 import { 5 5 BoldSmall, 6 6 CloseTiny, ··· 31 31 HighlightColorSettings, 32 32 } from "./HighlightButton"; 33 33 import { theme } from "../../tailwind.config"; 34 + import { useEditorStates } from "src/state/useEditorState"; 35 + import { useUIState } from "src/useUIState"; 34 36 35 37 type textState = { 36 38 bold: boolean; ··· 68 70 ), 69 71 ); 70 72 71 - export const TextToolbar = () => { 73 + export const TextToolbar = (props: { entityID: string }) => { 72 74 let [toolbarState, setToolbarState] = useState< 73 75 "default" | "highlight" | "link" | "header" | "list" | "block" 74 76 >("default"); ··· 76 78 let [lastUsedHighlight, setlastUsedHighlight] = useState<"1" | "2" | "3">( 77 79 "1", 78 80 ); 81 + let state = useTextState(); 79 82 80 - let state = useTextState(); 83 + let editorState = useEditorStates( 84 + (s) => s.editorStates[props.entityID], 85 + )?.editor; 86 + let selected = useUIState((s) => 87 + s.selectedBlock.find((b) => b.value === props.entityID), 88 + ); 89 + let blockEmpty = editorState?.doc.textContent.length === 0; 90 + 91 + useEffect(() => { 92 + if (blockEmpty && selected) { 93 + setToolbarState("block"); 94 + } else setToolbarState("default"); 95 + }, [blockEmpty, selected]); 81 96 82 97 return ( 83 98 <div className="flex items-center justify-between w-full gap-6"> ··· 287 302 <button 288 303 disabled={props.disabled} 289 304 className={` 290 - rounded-md shrink-0 p-0.5 active:bg-border active:text-primary 291 - ${props.className} 292 - ${ 293 - props.active 294 - ? "bg-border text-primary" 295 - : props.disabled 305 + roprops.className} 306 + 307 + ops.active 308 + "bg-border text-primary" 309 + props.disabled 296 310 ? "text-border cursor-not-allowed" 297 311 : "text-secondary" 298 312 }