made the button to open block command menu easier to find

+24 -22

components/Blocks/TextBlock/index.tsx

··· 196 196 repRef.current = rep.rep; 197 197 }, [rep?.rep]); 198 198 199 + let focused = useUIState((s) => s.focusedEntity?.entityID === props.entityID); 199 200 let selected = useUIState( 200 201 (s) => !!s.selectedBlocks.find((b) => b.value === props.entityID), 201 202 ); ··· 318 319 ${props.className}`} 319 320 ref={setMount} 320 321 /> 321 - {/* if this is the only block on the page and is empty*/} 322 322 {editorState.doc.textContent.length === 0 && 323 - props.previousBlock === null && 324 - props.nextBlock === null && ( 325 - <div 326 - className={`${props.className} pointer-events-none absolute top-0 left-0 italic text-tertiary flex flex-col`} 327 - > 328 - {props.type === "text" 329 - ? "write something..." 330 - : headingLevel?.data.value === 3 331 - ? "Subheader" 332 - : headingLevel?.data.value === 2 333 - ? "Header" 334 - : "Title"} 335 - <div className=" text-xs font-normal"> 336 - or type "/" for commands 337 - </div> 323 + props.previousBlock === null && 324 + props.nextBlock === null ? ( 325 + // if this is the only block on the page and is empty or is a canvas, show placeholder 326 + <div 327 + className={`${props.className} pointer-events-none absolute top-0 left-0 italic text-tertiary flex flex-col`} 328 + > 329 + {props.type === "text" 330 + ? "write something..." 331 + : headingLevel?.data.value === 3 332 + ? "Subheader" 333 + : headingLevel?.data.value === 2 334 + ? "Header" 335 + : "Title"} 336 + <div className=" text-xs font-normal"> 337 + or type "/" to add a block 338 338 </div> 339 - )} 340 - {/* if this is the block is empty and selected */} 341 - {editorState.doc.textContent.length === 0 && selected ? ( 339 + </div> 340 + ) : editorState.doc.textContent.length === 0 && focused ? ( 341 + // if not the only block on page but is the block is empty and selected, but NOT multiselected show add button 342 342 <button 343 - className={`absolute top-0.5 right-0 w-5 h-5 rounded border border-border outline outline-transparent hover:outline-border hover:text-tertiary font-bold rounded-md text-sm text-border ${props.pageType === "canvas" && "mr-[6px]"}`} 343 + className={`absolute top-0.5 right-0 w-fit h-5 hover:text-accent-contrast font-bold rounded-md text-sm text-border ${props.pageType === "canvas" && "mr-[6px]"}`} 344 344 onMouseDown={(e) => { 345 345 e.preventDefault(); 346 346 let editor = ··· 363 363 } 364 364 }} 365 365 > 366 - <div className={`flex items-center justify-center `}> 367 - <MoreOptionsTiny /> 366 + <div 367 + className={`flex items-center justify-center gap-2 italic font-normal`} 368 + > 369 + Add a Block <AddTiny /> 368 370 </div> 369 371 </button> 370 372 ) : null}

+2 -1

components/Buttons.tsx

··· 71 71 children: React.ReactNode; 72 72 content: React.ReactNode; 73 73 side?: "top" | "right" | "bottom" | "left" | undefined; 74 + open?: boolean; 74 75 }) => { 75 76 return ( 76 77 // toolbar button does not control the highlight theme setter 77 78 // if toolbar button is updated, be sure to update there as well 78 79 <RadixTooltip.TooltipProvider> 79 - <RadixTooltip.Root> 80 + <RadixTooltip.Root open={props.open}> 80 81 <RadixTooltip.Trigger 81 82 disabled={props.disabled} 82 83 className={props.className}

+4 -4

components/Canvas.tsx

··· 147 147 function CanvasWidthHandle(props: { entityID: string }) { 148 148 let canvasFocused = useUIState((s) => s.focusedEntity?.entityType === "page"); 149 149 let { rep } = useReplicache(); 150 - let { permissions } = useEntitySetContext(); 151 150 let narrowWidth = useEntity(props.entityID, "canvas/narrow-width")?.data 152 151 .value; 153 152 return ( ··· 178 177 }) => { 179 178 let { rep } = useReplicache(); 180 179 let { permissions } = useEntitySetContext(); 181 - let narrowWidth = useEntity(props.entityID, "canvas/narrow-width")?.data 182 - .value; 180 + let blocks = useEntity(props.entityID, "canvas/block"); 181 + 183 182 if (!permissions.write) return null; 184 183 return ( 185 184 <div className="absolute right-2 sm:top-4 sm:right-4 bottom-2 sm:bottom-auto z-10 flex flex-col gap-1 justify-center"> 186 185 <TooltipButton 187 186 side="left" 187 + open={blocks.length === 0 ? true : undefined} 188 188 content={ 189 - <div className="flex flex-col justify-end text-center "> 189 + <div className="flex flex-col justify-end text-center px-1 leading-snug "> 190 190 <div>Add a Block!</div> 191 191 <div className="font-normal">or double click anywhere</div> 192 192 </div>

+1 -1

components/Icons.tsx

··· 562 562 <path 563 563 fillRule="evenodd" 564 564 clipRule="evenodd" 565 - d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM8 2.5C8.41421 2.5 8.75 2.83579 8.75 3.25V7.25H12.75C13.1642 7.25 13.5 7.58579 13.5 8C13.5 8.41421 13.1642 8.75 12.75 8.75H8.75V12.75C8.75 13.1642 8.41421 13.5 8 13.5C7.58579 13.5 7.25 13.1642 7.25 12.75V8.75H3.25C2.83579 8.75 2.5 8.41421 2.5 8C2.5 7.58579 2.83579 7.25 3.25 7.25H7.25V3.25C7.25 2.83579 7.58579 2.5 8 2.5Z" 565 + d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM7.99994 13.7018C7.44766 13.7018 6.99994 13.2541 6.99994 12.7018V9H3.29821C2.74592 9 2.29821 8.55228 2.29821 8C2.29821 7.44771 2.74592 7 3.29821 7H6.99994V3.29821C6.99994 2.74592 7.44766 2.29821 7.99994 2.29821C8.55223 2.29821 8.99994 2.74592 8.99994 3.29821V7H12.7018C13.2541 7 13.7018 7.44772 13.7018 8C13.7018 8.55228 13.2541 9 12.7018 9H8.99994V12.7018C8.99994 13.2541 8.55223 13.7018 7.99994 13.7018Z" 566 566 fill="currentColor" 567 567 /> 568 568 </svg>

Configure Feed

Configure Feed