+1 -1

components/Cards.tsx

reviewed

··· 84 84 `} 85 85 > 86 86 {isFocused && <CardOptions />} 87 87 - <DesktopCardFooter parentID={props.entityID} /> 87 87 + <DesktopCardFooter cardID={props.entityID} /> 88 88 <Blocks entityID={props.entityID} /> 89 89 </div> 90 90 </div>

+13 -8

components/DesktopFooter.tsx

reviewed

··· 3 3 import { Media } from "./Media"; 4 4 import { TextToolbar } from "./Toolbar"; 5 5 6 6 - export function DesktopCardFooter(props: { parentID: string }) { 7 7 - let focusedTextBlock = useUIState((s) => s.focusedBlock); 8 8 - let focusedBlockParent = 9 9 - focusedTextBlock?.type === "card" ? null : focusedTextBlock?.parent; 6 6 + export function DesktopCardFooter(props: { cardID: string }) { 7 7 + let focusedBlock = useUIState((s) => s.focusedBlock); 8 8 + let focusedBlockParentID = 9 9 + focusedBlock?.type === "card" 10 10 + ? focusedBlock.entityID 11 11 + : focusedBlock?.parent; 10 12 return ( 11 13 <Media 12 14 mobile={false} 13 15 className="absolute bottom-4 w-full z-10 pointer-events-none" 14 16 > 15 15 - {focusedTextBlock && 16 16 - focusedTextBlock.type === "block" && 17 17 - focusedBlockParent === props.parentID && ( 17 17 + {focusedBlock && 18 18 + focusedBlock.type === "block" && 19 19 + focusedBlockParentID === props.cardID && ( 18 20 <div className="pointer-events-auto w-fit mx-auto py-1 px-3 bg-bg-card border border-border rounded-full shadow-sm"> 19 19 - <TextToolbar entityID={focusedTextBlock.entityID} /> 21 21 + <TextToolbar 22 22 + cardID={focusedBlockParentID} 23 23 + blockID={focusedBlock.entityID} 24 24 + /> 20 25 </div> 21 26 )} 22 27 </Media>

+7 -3

components/MobileFooter.tsx

reviewed

··· 5 5 import { TextToolbar } from "components/Toolbar"; 6 6 7 7 export function MobileFooter(props: { entityID: string }) { 8 8 - let focusedTextBlock = useUIState((s) => s.focusedBlock); 8 8 + let focusedBlock = useUIState((s) => s.focusedBlock); 9 9 + 9 10 return ( 10 11 <Media mobile className="w-full z-10 -mt-6"> 11 11 - {focusedTextBlock && focusedTextBlock.type == "block" ? ( 12 12 + {focusedBlock && focusedBlock.type == "block" ? ( 12 13 <div className="w-full z-10 p-2 flex bg-bg-card "> 13 13 - <TextToolbar entityID={props.entityID} /> 14 14 + <TextToolbar 15 15 + cardID={focusedBlock.parent} 16 16 + blockID={focusedBlock.entityID} 17 17 + /> 14 18 </div> 15 19 ) : ( 16 20 <div className="z-10 pb-2 px-2 flex gap-[6px] items-center justify-end">

+19 -4

components/Toolbar/index.tsx

reviewed

··· 33 33 import { theme } from "../../tailwind.config"; 34 34 import { useEditorStates } from "src/state/useEditorState"; 35 35 import { useUIState } from "src/useUIState"; 36 36 + import { useReplicache } from "src/replicache"; 36 37 37 38 type textState = { 38 39 bold: boolean; ··· 70 71 ), 71 72 ); 72 73 73 73 - export const TextToolbar = (props: { entityID: string }) => { 74 74 + export const TextToolbar = (props: { cardID: string; blockID: string }) => { 75 75 + let { rep } = useReplicache(); 76 76 + 74 77 let [toolbarState, setToolbarState] = useState< 75 78 "default" | "highlight" | "link" | "header" | "list" | "block" 76 79 >("default"); ··· 81 84 let state = useTextState(); 82 85 83 86 let editorState = useEditorStates( 84 84 - (s) => s.editorStates[props.entityID], 87 87 + (s) => s.editorStates[props.blockID], 85 88 )?.editor; 86 89 let selected = useUIState((s) => 87 87 - s.selectedBlock.find((b) => b.value === props.entityID), 90 90 + s.selectedBlock.find((b) => b.value === props.blockID), 88 91 ); 92 92 + 93 93 + let focusedBlock = useUIState((s) => s.focusedBlock); 94 94 + 89 95 let blockEmpty = editorState?.doc.textContent.length === 0; 90 96 91 97 useEffect(() => { ··· 179 185 </div> 180 186 <button 181 187 onClick={() => { 182 182 - setToolbarState("default"); 188 188 + if (toolbarState === "default") { 189 189 + useUIState.setState(() => ({ 190 190 + focusedBlock: { 191 191 + type: "card", 192 192 + entityID: props.cardID, 193 193 + }, 194 194 + })); 195 195 + } else { 196 196 + setToolbarState("default"); 197 197 + } 183 198 }} 184 199 > 185 200 <CloseTiny />