+3

app/[doc_id]/layout.tsx

reviewed

··· 1 1 "use client"; 2 2 import { isIOS, useViewportSize } from "@react-aria/utils"; 3 3 import { useEffect, useState } from "react"; 4 4 + import { usePreventScroll } from "react-aria"; 4 5 5 6 export default function Layout(props: { children: React.ReactNode }) { 6 7 let viewheight = useViewportSize().height; 7 8 let difference = useViewportDifference(); 9 9 + 10 10 + usePreventScroll(); 8 11 9 12 return <div style={{ height: viewheight || "100%" }}>{props.children}</div>; 10 13 }

+1 -1

components/BlockOptions.tsx

reviewed

··· 31 31 : focusedElement?.parent; 32 32 33 33 return ( 34 34 - <div className="blockOptionsWrapper absolute top-0 right-2 sm:right-3 hidden group-hover/text:block group-focus-within/text:block"> 34 34 + <div className="blockOptionsWrapper absolute top-0 right-2 sm:right-3 hidden sm:group-hover/text:block group-focus-within/text:block"> 35 35 <div className="blockOptionsContent flex gap-1 items-center"> 36 36 <label className="blockOptionsImage hover:cursor-pointer flex place-items-center"> 37 37 <div className="text-tertiary hover:text-accent ">

+3 -5

components/Blocks.tsx

reviewed

··· 30 30 let lastBlock = blocks[blocks.length - 1]; 31 31 return ( 32 32 <div 33 33 - className="blocks w-full flex flex-col pt-2 sm:pt-3 outline-none h-fit pb-32" 33 33 + className="blocks w-full flex flex-col pt-2 sm:pt-3 outline-none h-fit min-h-full pb-32" 34 34 onClick={async (e) => { 35 35 if (useUIState.getState().selectedBlock.length > 1) return; 36 36 if (e.target === e.currentTarget) { ··· 87 87 ) 88 88 return null; 89 89 return ( 90 90 - <div className="relative group/text mx-2 sm:mx-3"> 90 90 + <div className="relative group/text px-2 sm:px-3"> 91 91 <div 92 92 - className="h-full hover:cursor-text italic p-1 text-tertiary" 92 92 + className="h-6 hover:cursor-text italic text-tertiary" 93 93 onMouseDown={async () => { 94 94 let newEntityID = crypto.randomUUID(); 95 95 await rep?.mutate.addBlock({ ··· 274 274 } 275 275 let nextBlockID = block.value; 276 276 let nextBlock = useEditorStates.getState().editorStates[nextBlockID]; 277 277 - console.log("yo?"); 278 277 if (!nextBlock || !nextBlock.view) return; 279 278 nextBlock.view.focus(); 280 279 let nextBlockViewClientRect = nextBlock.view.dom.getBoundingClientRect(); ··· 291 290 : nextBlockViewClientRect.bottom - 12, 292 291 left, 293 292 }); 294 294 - console.log(pos); 295 293 let newState = nextBlock.editor.apply( 296 294 tr.setSelection(TextSelection.create(tr.doc, pos?.pos || 0)), 297 295 );

+1 -1

components/Cards.tsx

reviewed

··· 139 139 <div className="flex gap-2"> 140 140 You deleted a card.{" "} 141 141 <button 142 142 - className="underline hover:font-bold italic" 142 142 + className="underline font-bold sm:font-normal sm:hover:font-bold italic" 143 143 onClick={() => { 144 144 // TODO: WIRE UP UNDO DELETE 145 145 }}

+3 -8

components/TextBlock/index.tsx

reviewed

··· 248 248 let block = useEditorStates.getState().editorStates[entityID]; 249 249 if (block) { 250 250 let tr = block.editor.tr; 251 251 - console.log(content.content); 252 251 tr.insert(block.editor.selection.from || 0, content.content); 253 252 let newState = block.editor.apply(tr); 254 253 setEditorState(entityID, { ··· 336 335 return; 337 336 } 338 337 } 339 339 - 340 338 e.preventDefault(); 341 339 e.stopPropagation(); 342 340 }} ··· 387 385 id={elementId.block(props.entityID).text} 388 386 className={` 389 387 textBlock 390 390 - w-full pl-1 pr-2 sm:pl-2 sm:pr-3 pt-1 388 388 + w-full pl-1 pr-2 sm:pl-2 sm:pr-3 391 389 border-l-4 outline-none 392 390 resize-none align-top whitespace-pre-wrap bg-transparent ${ 393 393 - selected ? " border-border" : "border-transparent" 391 391 + selected ? " border-tertiary" : "border-transparent" 394 392 } ${first ? "pt-0" : "pt-1"} ${props.type === "heading" ? "pb-0" : "pb-2"} ${props.className}`} 395 393 ref={setMount} 396 394 /> 397 397 - 398 395 {editorState.doc.textContent.length === 0 && 399 396 props.position === "a0" && 400 397 props.nextBlock === null && ( 401 401 - <div className="pointer-events-none absolute top-0 left-0 px-2 sm:px-3 pt-1 pb-2 italic text-tertiary"> 398 398 + <div className="pointer-events-none absolute top-0 left-0 px-2 sm:px-3 pb-2 italic text-tertiary"> 402 399 write something... 403 400 </div> 404 401 )} ··· 448 445 let bottomScrollPadding = 100; 449 446 if (cursorPosY && parentHeight) { 450 447 if (cursorPosY > parentHeight - bottomScrollPadding) { 451 451 - // BUG: cursor is at wrong poistion on first click into page 452 448 parentID?.scrollBy({ 453 449 top: bottomScrollPadding - (parentHeight - cursorPosY), 454 450 behavior: "smooth", 455 451 }); 456 452 } 457 453 if (cursorPosY < 50) { 458 458 - console.log("scrolling up"); 459 454 if (parentID?.scrollTop === 0) return; 460 455 parentID?.scrollBy({ 461 456 top: cursorPosY - 50,

+4 -2

components/Toolbar/LinkButton.tsx

reviewed

··· 7 7 import { useState } from "react"; 8 8 import { Separator } from "components/Layout"; 9 9 import { MarkType } from "prosemirror-model"; 10 10 + 10 11 export function LinkButton(props: { setToolBarState: (s: "link") => void }) { 11 12 let focusedBlock = useUIState((s) => s.focusedBlock); 12 13 let focusedEditor = useEditorStates((s) => ··· 66 67 } 67 68 } 68 69 let [linkValue, setLinkValue] = useState(content); 70 70 + 69 71 return ( 70 72 <div className=" w-full flex items-center gap-[6px]"> 71 73 <ToolbarButton onClick={() => props.onClose}> ··· 73 75 </ToolbarButton> 74 76 <Separator /> 75 77 <input 78 78 + autoFocus 76 79 className="w-full grow bg-transparent border-none outline-none " 77 77 - placeholder="www.leafl.et" 80 80 + placeholder="www.leaflet.pub" 78 81 value={linkValue} 79 82 onChange={(e) => setLinkValue(e.target.value)} 80 83 /> 81 81 - {start},{end} 82 84 <div className="flex items-center gap-3"> 83 85 <button 84 86 className="hover:text-accent"