+125 -27

components/Blocks/TextBlock/index.tsx

reviewed

··· 41 41 import { useHandlePaste } from "./useHandlePaste"; 42 42 import { highlightSelectionPlugin } from "./plugins"; 43 43 import { inputrules } from "./inputRules"; 44 44 - import { AddTiny, MoreOptionsTiny } from "components/Icons"; 44 44 + import { 45 45 + AddSmall, 46 46 + AddTiny, 47 47 + BlockDocPageSmall, 48 48 + BlockImageSmall, 49 49 + MoreOptionsTiny, 50 50 + } from "components/Icons"; 51 51 + import { ToolbarButton } from "components/Toolbar"; 52 52 + import { TooltipButton } from "components/Buttons"; 53 53 + import { v7 } from "uuid"; 54 54 + import { focusPage } from "components/Pages"; 45 55 46 56 export function TextBlock( 47 57 props: BlockProps & { className?: string; preview?: boolean }, ··· 182 192 183 193 export function BaseTextBlock(props: BlockProps & { className?: string }) { 184 194 const [mount, setMount] = useState<HTMLElement | null>(null); 195 195 + 185 196 let repRef = useRef<null | Replicache<ReplicacheMutators>>(null); 186 197 let entity_set = useEntitySetContext(); 187 198 let propsRef = useRef({ ...props, entity_set }); ··· 336 347 </div> 337 348 ) : editorState.doc.textContent.length === 0 && focused ? ( 338 349 // if not the only block on page but is the block is empty and selected, but NOT multiselected show add button 339 339 - <button 340 340 - 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]"}`} 341 341 - onMouseDown={(e) => { 342 342 - e.preventDefault(); 343 343 - let editor = 344 344 - useEditorStates.getState().editorStates[props.entityID]; 350 350 + <div 351 351 + className={`absolute top-0 right-0 w-fit flex gap-[6px] items-center font-bold rounded-md text-sm text-border ${props.pageType === "canvas" && "mr-[6px]"}`} 352 352 + > 353 353 + <TooltipButton 354 354 + className={props.className} 355 355 + onMouseDown={async () => { 356 356 + let entity; 357 357 + if (!props.entityID) { 358 358 + entity = v7(); 359 359 + await rep.rep?.mutate.addBlock({ 360 360 + parent: props.parent, 361 361 + factID: v7(), 362 362 + permission_set: entity_set.set, 363 363 + type: "image", 364 364 + position: generateKeyBetween( 365 365 + props.position, 366 366 + props.nextPosition, 367 367 + ), 368 368 + newEntityID: entity, 369 369 + }); 370 370 + } else { 371 371 + entity = props.entityID; 372 372 + await rep.rep?.mutate.assertFact({ 373 373 + entity, 374 374 + attribute: "block/type", 375 375 + data: { type: "block-type-union", value: "image" }, 376 376 + }); 377 377 + } 378 378 + return entity; 379 379 + }} 380 380 + side="bottom" 381 381 + tooltipContent={ 382 382 + <div className="flex gap-1 font-bold">Add an Image</div> 383 383 + } 384 384 + > 385 385 + <BlockImageSmall className="hover:text-accent-contrast text-border" /> 386 386 + </TooltipButton> 345 387 346 346 - let editorState = editor?.editor; 347 347 - if (editorState) { 348 348 - editor?.view?.focus(); 349 349 - let tr = editorState.tr.insertText("/", 1); 350 350 - tr.setSelection(TextSelection.create(tr.doc, 2)); 351 351 - useEditorStates.setState((s) => ({ 352 352 - editorStates: { 353 353 - ...s.editorStates, 354 354 - [props.entityID]: { 355 355 - ...s.editorStates[props.entityID]!, 356 356 - editor: editorState!.apply(tr), 388 388 + <TooltipButton 389 389 + className={props.className} 390 390 + onMouseDown={async () => { 391 391 + let entity; 392 392 + if (!props.entityID) { 393 393 + entity = v7(); 394 394 + await rep.rep?.mutate.addBlock({ 395 395 + parent: props.parent, 396 396 + factID: v7(), 397 397 + permission_set: entity_set.set, 398 398 + type: "card", 399 399 + position: generateKeyBetween( 400 400 + props.position, 401 401 + props.nextPosition, 402 402 + ), 403 403 + newEntityID: entity, 404 404 + }); 405 405 + } else { 406 406 + entity = props.entityID; 407 407 + await rep.rep?.mutate.assertFact({ 408 408 + entity, 409 409 + attribute: "block/type", 410 410 + data: { type: "block-type-union", value: "card" }, 411 411 + }); 412 412 + } 413 413 + 414 414 + let newPage = v7(); 415 415 + await rep.rep?.mutate.addPageLinkBlock({ 416 416 + blockEntity: entity, 417 417 + firstBlockFactID: v7(), 418 418 + firstBlockEntity: v7(), 419 419 + pageEntity: newPage, 420 420 + type: "doc", 421 421 + permission_set: entity_set.set, 422 422 + }); 423 423 + useUIState.getState().openPage(props.parent, newPage); 424 424 + rep.rep && focusPage(newPage, rep.rep, "focusFirstBlock"); 425 425 + }} 426 426 + side="bottom" 427 427 + tooltipContent={ 428 428 + <div className="flex gap-1 font-bold">Add a Subpage</div> 429 429 + } 430 430 + > 431 431 + <BlockDocPageSmall className="hover:text-accent-contrast text-border" /> 432 432 + </TooltipButton> 433 433 + 434 434 + <TooltipButton 435 435 + className={props.className} 436 436 + onMouseDown={(e) => { 437 437 + e.preventDefault(); 438 438 + let editor = 439 439 + useEditorStates.getState().editorStates[props.entityID]; 440 440 + 441 441 + let editorState = editor?.editor; 442 442 + if (editorState) { 443 443 + editor?.view?.focus(); 444 444 + let tr = editorState.tr.insertText("/", 1); 445 445 + tr.setSelection(TextSelection.create(tr.doc, 2)); 446 446 + useEditorStates.setState((s) => ({ 447 447 + editorStates: { 448 448 + ...s.editorStates, 449 449 + [props.entityID]: { 450 450 + ...s.editorStates[props.entityID]!, 451 451 + editor: editorState!.apply(tr), 452 452 + }, 357 453 }, 358 358 - }, 359 359 - })); 454 454 + })); 455 455 + } 456 456 + }} 457 457 + side="bottom" 458 458 + tooltipContent={ 459 459 + <div className="flex gap-1 font-bold">Add More!</div> 360 460 } 361 361 - }} 362 362 - > 363 363 - <div 364 364 - className={`flex items-center justify-center gap-2 italic font-normal`} 365 461 > 366 366 - Add a Block <AddTiny /> 367 367 - </div> 368 368 - </button> 462 462 + <div className="w-6 h-6 flex place-items-center justify-center"> 463 463 + <AddTiny className="text-accent-contrast" /> 464 464 + </div> 465 465 + </TooltipButton> 466 466 + </div> 369 467 ) : null} 370 468 {editorState.doc.textContent.startsWith("/") && selected && ( 371 469 <BlockCommandBar

+6 -3

components/Buttons.tsx

reviewed

··· 148 148 disabled?: boolean; 149 149 className?: string; 150 150 children: React.ReactNode; 151 151 - content: React.ReactNode; 151 151 + tooltipContent: React.ReactNode; 152 152 side?: "top" | "right" | "bottom" | "left" | undefined; 153 153 open?: boolean; 154 154 + delayDuration?: number; 154 155 }) => { 155 156 return ( 156 157 // toolbar button does not control the highlight theme setter 157 158 // if toolbar button is updated, be sure to update there as well 158 158 - <RadixTooltip.TooltipProvider> 159 159 + <RadixTooltip.TooltipProvider 160 160 + delayDuration={props.delayDuration ? props.delayDuration : 400} 161 161 + > 159 162 <RadixTooltip.Root open={props.open}> 160 163 <RadixTooltip.Trigger 161 164 disabled={props.disabled} ··· 176 179 alignOffset={12} 177 180 className="z-10 bg-border rounded-md py-1 px-[6px] font-bold text-secondary text-sm" 178 181 > 179 179 - {props.content} 182 182 + {props.tooltipContent} 180 183 <RadixTooltip.Arrow 181 184 asChild 182 185 width={16}

+1 -1

components/Canvas.tsx

reviewed

··· 185 185 <TooltipButton 186 186 side="left" 187 187 open={blocks.length === 0 ? true : undefined} 188 188 - content={ 188 188 + tooltipContent={ 189 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>

+2 -2

components/Toolbar/index.tsx

reviewed

··· 192 192 props.onClick && props.onClick(e); 193 193 }} 194 194 disabled={isDisabled} 195 195 - content={props.tooltipContent} 195 195 + tooltipContent={props.tooltipContent} 196 196 className={` 197 197 - flex items-center rounded-md border border-transparent 197 197 + flex items-center rounded-md border border-transparent 198 198 ${props.className} 199 199 ${ 200 200 props.active && !isDisabled