Lock is GONE YO · leaflet.pub/leaflet@7f2d2ca

-1

.github/pull_request_template.md

··· 2 2 - it looks good on both mobile and desktop 3 3 - it undo's like it ought to 4 4 - it handles keyboard interactions reasonably well 5 - - it behaves as you would expect if you lock it 6 5 - no build errors!!!

+2 -31

components/Blocks/Block.tsx

··· 334 334 let isSelected = useUIState((s) => 335 335 s.selectedBlocks.find((b) => b.value === props.entityID), 336 336 ); 337 - let isLocked = useEntity(props.value, "block/is-locked"); 338 337 339 338 let nextBlockSelected = useUIState((s) => 340 339 s.selectedBlocks.find((b) => b.value === props.nextBlock?.value), ··· 343 342 s.selectedBlocks.find((b) => b.value === props.previousBlock?.value), 344 343 ); 345 344 346 - if (isMultiselected || (isLocked?.data.value && isSelected)) 347 - // not sure what multiselected and selected classes are doing (?) 348 - // use a hashed pattern for locked things. show this pattern if the block is selected, even if it isn't multiselected 349 - 345 + if (isMultiselected) 350 346 return ( 351 347 <> 352 348 <div ··· 359 355 ${!prevBlockSelected && "rounded-t-md"} 360 356 ${!nextBlockSelected && "rounded-b-md"} 361 357 `} 362 - style={ 363 - isLocked?.data.value 364 - ? { 365 - maskImage: "var(--hatchSVG)", 366 - maskRepeat: "repeat repeat", 367 - } 368 - : {} 369 - } 370 - ></div> 371 - {isLocked?.data.value && ( 372 - <div 373 - className={` 374 - blockSelectionLockIndicator z-10 375 - flex items-center 376 - text-border rounded-full 377 - absolute right-3 378 - 379 - ${ 380 - props.type === "heading" || props.type === "text" 381 - ? "top-[6px]" 382 - : "top-0" 383 - }`} 384 - > 385 - <LockTiny className="bg-bg-page p-0.5 rounded-full w-5 h-5" /> 386 - </div> 387 - )} 358 + /> 388 359 </> 389 360 ); 390 361 };

+1 -3

components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx

··· 18 18 let isSelected = useUIState((s) => 19 19 s.selectedBlocks.find((b) => b.value === props.entityID), 20 20 ); 21 - let isLocked = useEntity(props.entityID, "block/is-locked")?.data.value; 22 21 23 22 let entity_set = useEntitySetContext(); 24 23 let [urlValue, setUrlValue] = useState(""); ··· 91 90 className="w-full grow border-none outline-hidden bg-transparent " 92 91 placeholder="bsky.app/post-url" 93 92 value={urlValue} 94 - disabled={isLocked} 95 93 onChange={(e) => setUrlValue(e.target.value)} 96 94 onKeyDown={(e) => { 97 95 if (e.key === "Enter") { ··· 109 107 <button 110 108 type="submit" 111 109 id="bluesky-post-block-submit" 112 - className={`p-1 ${isSelected && !isLocked ? "text-accent-contrast" : "text-border"}`} 110 + className={`p-1 ${isSelected ? "text-accent-contrast" : "text-border"}`} 113 111 onMouseDown={(e) => { 114 112 e.preventDefault(); 115 113 errorSmokers(e.clientX + 12, e.clientY);

+1 -4

components/Blocks/ButtonBlock.tsx

··· 56 56 let isSelected = useUIState((s) => 57 57 s.selectedBlocks.find((b) => b.value === props.entityID), 58 58 ); 59 - let isLocked = useEntity(props.entityID, "block/is-locked")?.data.value; 60 59 61 60 let [textValue, setTextValue] = useState(""); 62 61 let [urlValue, setUrlValue] = useState(""); ··· 191 190 className="w-full grow border-none outline-hidden bg-transparent" 192 191 placeholder="button text" 193 192 value={textValue} 194 - disabled={isLocked} 195 193 onChange={(e) => setTextValue(e.target.value)} 196 194 onKeyDown={(e) => { 197 195 if ( ··· 214 212 className="w-full grow border-none outline-hidden bg-transparent" 215 213 placeholder="www.example.com" 216 214 value={urlValue} 217 - disabled={isLocked} 218 215 onChange={(e) => setUrlValue(e.target.value)} 219 216 onKeyDown={(e) => { 220 217 if (e.key === "Backspace" && !e.currentTarget.value) ··· 225 222 <button 226 223 id="button-block-settings" 227 224 type="submit" 228 - className={`p-1 shrink-0 w-fit flex gap-2 items-center place-self-end ${isSelected && !isLocked ? "text-accent-contrast" : "text-accent-contrast sm:text-border"}`} 225 + className={`p-1 shrink-0 w-fit flex gap-2 items-center place-self-end ${isSelected ? "text-accent-contrast" : "text-accent-contrast sm:text-border"}`} 229 226 > 230 227 <div className="sm:hidden block">Save</div> 231 228 <CheckTiny />

+2 -3

components/Blocks/DateTimeBlock.tsx

··· 54 54 s.selectedBlocks.find((b) => b.value === props.entityID), 55 55 ); 56 56 57 - let isLocked = !!useEntity(props.entityID, "block/is-locked")?.data.value; 58 57 let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value; 59 58 60 59 const handleTimeChange: React.ChangeEventHandler<HTMLInputElement> = (e) => { ··· 118 117 119 118 return ( 120 119 <Popover 121 - disabled={isLocked || !permissions.write} 120 + disabled={!permissions.write} 122 121 className="w-64 z-10 px-2!" 123 122 trigger={ 124 123 <BlockLayout ··· 134 133 {dateFact ? ( 135 134 <div 136 135 className={`font-bold 137 - ${!permissions.write || isLocked ? "" : "group-hover/date:underline"} 136 + ${!permissions.write ? "" : "group-hover/date:underline"} 138 137 `} 139 138 > 140 139 {selectedDate.toLocaleDateString(undefined, {

+1 -3

components/Blocks/EmbedBlock.tsx

··· 129 129 let isSelected = useUIState((s) => 130 130 s.selectedBlocks.find((b) => b.value === props.entityID), 131 131 ); 132 - let isLocked = useEntity(props.entityID, "block/is-locked")?.data.value; 133 132 134 133 let entity_set = useEntitySetContext(); 135 134 let [linkValue, setLinkValue] = useState(""); ··· 250 249 className="w-full grow border-none outline-hidden bg-transparent " 251 250 placeholder="www.example.com" 252 251 value={linkValue} 253 - disabled={isLocked} 254 252 onChange={(e) => setLinkValue(e.target.value)} 255 253 /> 256 254 <button 257 255 type="submit" 258 256 id="embed-block-submit" 259 257 disabled={loading} 260 - className={`p-1 ${isSelected && !isLocked ? "text-accent-contrast" : "text-border"}`} 258 + className={`p-1 ${isSelected ? "text-accent-contrast" : "text-border"}`} 261 259 onMouseDown={(e) => { 262 260 e.preventDefault(); 263 261 if (loading) return;

+1 -3

components/Blocks/ExternalLinkBlock.tsx

··· 118 118 let isSelected = useUIState((s) => 119 119 s.selectedBlocks.find((b) => b.value === props.entityID), 120 120 ); 121 - let isLocked = useEntity(props.value, "block/is-locked")?.data.value; 122 121 let entity_set = useEntitySetContext(); 123 122 let [linkValue, setLinkValue] = useState(""); 124 123 let { rep } = useReplicache(); ··· 173 172 !props.preview ? elementId.block(props.entityID).input : undefined 174 173 } 175 174 type="url" 176 - disabled={isLocked} 177 175 className="w-full grow border-none outline-hidden bg-transparent " 178 176 placeholder="www.example.com" 179 177 value={linkValue} ··· 199 197 <div className="flex items-center gap-3 "> 200 198 <button 201 199 autoFocus={false} 202 - className={`p-1 ${isSelected && !isLocked ? "text-accent-contrast" : "text-border"}`} 200 + className={`p-1 ${isSelected ? "text-accent-contrast" : "text-border"}`} 203 201 onMouseDown={(e) => { 204 202 e.preventDefault(); 205 203 if (!linkValue || linkValue === "") {

+1 -4

components/Blocks/ImageBlock.tsx

··· 28 28 let isSelected = useUIState((s) => 29 29 s.selectedBlocks.find((b) => b.value === props.value), 30 30 ); 31 - let isLocked = useEntity(props.value, "block/is-locked")?.data.value; 32 31 let isFullBleed = useEntity(props.value, "image/full-bleed")?.data.value; 33 32 let isFirst = props.previousBlock === null; 34 33 let isLast = props.nextBlock === null; ··· 84 83 return ( 85 84 <BlockLayout 86 85 hasBackground="accent" 87 - isSelected={!!isSelected && !isLocked} 86 + isSelected={!!isSelected} 88 87 borderOnHover 89 88 className=" group/image-block text-tertiary hover:text-accent-contrast hover:font-bold h-[104px] border-dashed rounded-lg" 90 89 > ··· 101 100 onDrop={async (e) => { 102 101 e.preventDefault(); 103 102 e.stopPropagation(); 104 - if (isLocked) return; 105 103 const files = e.dataTransfer.files; 106 104 if (files && files.length > 0) { 107 105 const file = files[0]; ··· 118 116 Upload An Image 119 117 </div> 120 118 <input 121 - disabled={isLocked} 122 119 className="h-0 w-0 hidden" 123 120 type="file" 124 121 accept="image/*"

+2 -8

components/Blocks/TextBlock/index.tsx

··· 41 41 preview?: boolean; 42 42 }, 43 43 ) { 44 - let isLocked = useEntity(props.entityID, "block/is-locked"); 45 44 let initialized = useHasPageLoaded(); 46 45 let first = props.previousBlock === null; 47 46 let permission = useEntitySetContext().permissions.write; 48 47 49 48 return ( 50 49 <> 51 - {(!initialized || 52 - !permission || 53 - props.preview || 54 - isLocked?.data.value) && ( 50 + {(!initialized || !permission || props.preview) && ( 55 51 <RenderedTextBlock 56 52 type={props.type} 57 53 entityID={props.entityID} ··· 61 57 previousBlock={props.previousBlock} 62 58 /> 63 59 )} 64 - {permission && !props.preview && !isLocked?.data.value && ( 60 + {permission && !props.preview && ( 65 61 <div 66 62 className={`w-full relative group ${!initialized ? "hidden" : ""}`} 67 63 > ··· 330 326 let { editorState } = props; 331 327 let rep = useReplicache(); 332 328 let smoker = useSmoker(); 333 - let isLocked = useEntity(props.entityID, "block/is-locked"); 334 329 let focused = useUIState((s) => s.focusedEntity?.entityID === props.entityID); 335 330 336 331 let isBlueskyPost = ··· 340 335 // if its bluesky, change text to embed post 341 336 342 337 if ( 343 - !isLocked && 344 338 focused && 345 339 editorState && 346 340 betterIsUrl(editorState.doc.textContent) &&

+1 -3

components/Blocks/index.tsx

··· 181 181 : null, 182 182 ); 183 183 184 - let isLocked = useEntity(props.lastBlock?.value || null, "block/is-locked"); 185 184 if (!entity_set.permissions.write) return null; 186 185 if ( 187 - ((props.lastBlock?.type === "text" && !isLocked?.data.value) || 188 - props.lastBlock?.type === "heading") && 186 + (props.lastBlock?.type === "text" || props.lastBlock?.type === "heading") && 189 187 (!editorState?.editor || editorState.editor.doc.content.size <= 2) 190 188 ) 191 189 return null;

+2 -13

components/Blocks/useBlockKeyboardHandlers.ts

··· 23 23 ) { 24 24 let { rep, undoManager } = useReplicache(); 25 25 let entity_set = useEntitySetContext(); 26 - let isLocked = !!useEntity(props.entityID, "block/is-locked")?.data.value; 27 26 28 27 let isSelected = useUIState((s) => { 29 28 let selectedBlocks = s.selectedBlocks; ··· 70 69 entity_set, 71 70 areYouSure, 72 71 setAreYouSure, 73 - isLocked, 74 72 }); 75 73 undoManager.endGroup(); 76 74 }; 77 75 window.addEventListener("keydown", listener); 78 76 return () => window.removeEventListener("keydown", listener); 79 - }, [entity_set, isSelected, props, rep, areYouSure, setAreYouSure, isLocked]); 77 + }, [entity_set, isSelected, props, rep, areYouSure, setAreYouSure]); 80 78 } 81 79 82 80 type Args = { 83 81 e: KeyboardEvent; 84 - isLocked: boolean; 85 82 props: BlockProps; 86 83 rep: Replicache<ReplicacheMutators>; 87 84 entity_set: { set: string }; ··· 133 130 } 134 131 135 132 let debounced: null | number = null; 136 - async function Backspace({ 137 - e, 138 - props, 139 - rep, 140 - areYouSure, 141 - setAreYouSure, 142 - isLocked, 143 - }: Args) { 133 + async function Backspace({ e, props, rep, areYouSure, setAreYouSure }: Args) { 144 134 // if this is a textBlock, let the textBlock/keymap handle the backspace 145 - if (isLocked) return; 146 135 // if its an input, label, or teatarea with content, do nothing (do the broswer default instead) 147 136 let el = e.target as HTMLElement; 148 137 if (

-103

components/Toolbar/LockBlockButton.tsx

···

+3 -5

components/Toolbar/MultiSelectToolbar.tsx

······

-3

components/Toolbar/TextToolbar.tsx

······

+7 -4

components/Toolbar/index.tsx

············

-5

src/replicache/mutations.ts

··· 308 308 { blockEntity: string } | { blockEntity: string }[] 309 309 > = async (args, ctx) => { 310 310 for (let block of [args].flat()) { 311 - let [isLocked] = await ctx.scanIndex.eav( 312 - block.blockEntity, 313 - "block/is-locked", 314 - ); 315 - if (isLocked?.data.value) continue; 316 311 let [image] = await ctx.scanIndex.eav(block.blockEntity, "block/image"); 317 312 await ctx.runOnServer(async ({ supabase }) => { 318 313 if (image) {