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.

create component for placeholder text

Jared Pereira 3e4b3d46 d20d76a4

+42 -40
+42 -40
components/Blocks/TextBlock/index.tsx
··· 42 42 3: "text-base font-bold text-secondary ", 43 43 } as { [level: number]: string }; 44 44 45 - export function TextBlock( 46 - props: BlockProps & { className?: string; preview?: boolean }, 47 - ) { 45 + export function TextBlock(props: BlockProps & { preview?: boolean }) { 48 46 let isLocked = useEntity(props.entityID, "block/is-locked"); 49 47 let initialized = useInitialPageLoad(); 50 48 let first = props.previousBlock === null; ··· 59 57 <RenderedTextBlock 60 58 type={props.type} 61 59 entityID={props.entityID} 62 - className={props.className} 63 60 first={first} 64 61 pageType={props.pageType} 65 62 /> ··· 115 112 116 113 export function RenderedTextBlock(props: { 117 114 entityID: string; 118 - className?: string; 119 115 first?: boolean; 120 116 pageType?: "canvas" | "doc"; 121 117 type: BlockProps["type"]; ··· 136 132 if (permissions.write && (props.first || props.pageType === "canvas")) 137 133 content = ( 138 134 <div 139 - className={`${props.className} pointer-events-none italic text-tertiary flex flex-col `} 135 + className={`pointer-events-none italic text-tertiary flex flex-col `} 140 136 > 141 - {headingLevel?.data.value === 1 142 - ? "Title" 143 - : headingLevel?.data.value === 2 144 - ? "Header" 145 - : headingLevel?.data.value === 3 146 - ? "Subheader" 147 - : "write something..."} 148 - <div className=" text-xs font-normal"> 149 - or type &quot;/&quot; for commands 150 - </div> 137 + <PlaceholderText 138 + alignmentClass={alignmentClass} 139 + type={props.type} 140 + headingLevel={headingLevel?.data.value} 141 + /> 151 142 </div> 152 143 ); 153 144 } else { ··· 170 161 className={` 171 162 ${alignmentClass} 172 163 ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""} 173 - w-full whitespace-pre-wrap outline-none ${props.className} `} 164 + w-full whitespace-pre-wrap outline-none`} 174 165 > 175 166 {content} 176 167 </pre> 177 168 ); 178 169 } 179 170 180 - export function BaseTextBlock(props: BlockProps & { className?: string }) { 171 + export function BaseTextBlock(props: BlockProps) { 181 172 let mountRef = useRef<HTMLPreElement | null>(null); 182 173 let actionTimeout = useRef<number | null>(null); 183 174 let repRef = useRef<null | Replicache<ReplicacheMutators>>(null); ··· 370 361 outline-none 371 362 372 363 ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""} 373 - ${props.className}`} 364 + `} 374 365 ref={mountRef} 375 366 /> 376 367 {editorState?.doc.textContent.length === 0 && 377 368 props.previousBlock === null && 378 369 props.nextBlock === null ? ( 379 370 // if this is the only block on the page and is empty or is a canvas, show placeholder 380 - <div 381 - className={`${props.className} ${alignmentClass} w-full pointer-events-none absolute top-0 left-0 italic text-tertiary flex flex-col 382 - ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""} 383 - `} 384 - > 385 - {props.type === "text" 386 - ? "write something..." 387 - : headingLevel?.data.value === 3 388 - ? "Subheader" 389 - : headingLevel?.data.value === 2 390 - ? "Header" 391 - : "Title"} 392 - <div className=" text-xs font-normal"> 393 - or type &quot;/&quot; to add a block 394 - </div> 395 - </div> 371 + <PlaceholderText 372 + alignmentClass={alignmentClass} 373 + type={props.type} 374 + headingLevel={headingLevel?.data.value} 375 + /> 396 376 ) : editorState?.doc.textContent.length === 0 && focused ? ( 397 377 // if not the only block on page but is the block is empty and selected, but NOT multiselected show add button 398 - <CommandOptions {...props} className={props.className} /> 378 + <CommandOptions {...props} /> 399 379 ) : null} 400 380 401 381 {editorState?.doc.textContent.startsWith("/") && selected && ( ··· 410 390 ); 411 391 } 412 392 393 + const PlaceholderText = (props: { 394 + type: BlockProps["type"]; 395 + headingLevel?: number; 396 + alignmentClass: string; 397 + }) => { 398 + return ( 399 + <div 400 + className={`${props.alignmentClass} w-full pointer-events-none absolute top-0 left-0 italic text-tertiary flex flex-col 401 + ${props.type === "heading" ? HeadingStyle[props.headingLevel || 1] : ""} 402 + `} 403 + > 404 + {props.type === "text" 405 + ? "write something..." 406 + : props.headingLevel === 3 407 + ? "Subheader" 408 + : props.headingLevel === 2 409 + ? "Header" 410 + : "Title"} 411 + <div className=" text-xs font-normal"> 412 + or type &quot;/&quot; to add a block 413 + </div> 414 + </div> 415 + ); 416 + }; 417 + 413 418 const BlockifyLink = (props: { 414 419 entityID: string; 415 420 editorState: EditorState | undefined; ··· 468 473 } else return null; 469 474 }; 470 475 471 - const CommandOptions = (props: BlockProps & { className?: string }) => { 476 + const CommandOptions = (props: BlockProps) => { 472 477 let rep = useReplicache(); 473 478 let entity_set = useEntitySetContext(); 474 479 return ( ··· 476 481 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]"}`} 477 482 > 478 483 <TooltipButton 479 - className={props.className} 480 484 onMouseDown={async () => { 481 485 let command = blockCommands.find((f) => f.name === "Image"); 482 486 if (!rep.rep) return; ··· 495 499 </TooltipButton> 496 500 497 501 <TooltipButton 498 - className={props.className} 499 502 onMouseDown={async () => { 500 503 let command = blockCommands.find((f) => f.name === "New Page"); 501 504 if (!rep.rep) return; ··· 514 517 </TooltipButton> 515 518 516 519 <TooltipButton 517 - className={props.className} 518 520 onMouseDown={(e) => { 519 521 e.preventDefault(); 520 522 let editor = useEditorStates.getState().editorStates[props.entityID];