a tool for shared writing and social publishing

small block bugs

+13 -29
+1 -1
components/Blocks/ButtonBlock.tsx
··· 24 24 let isSelected = useUIState((s) => 25 25 s.selectedBlocks.find((b) => b.value === props.entityID), 26 26 ); 27 + let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value; 27 28 28 29 if (!url) { 29 30 if (!permissions.write) return null; 30 31 return <ButtonBlockSettings {...props} />; 31 32 } 32 - let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value; 33 33 34 34 return ( 35 35 <BlockLayout
+9 -27
components/Blocks/CodeBlock.tsx
··· 14 14 import { flushSync } from "react-dom"; 15 15 import { elementId } from "src/utils/elementId"; 16 16 import { LAST_USED_CODE_LANGUAGE_KEY } from "src/utils/codeLanguageStorage"; 17 + import { focusBlock } from "src/utils/focusBlock"; 17 18 18 19 export function CodeBlock(props: BlockProps) { 19 20 let { rep, rootEntity } = useReplicache(); ··· 42 43 }, [content, lang, theme]); 43 44 44 45 const onClick = useCallback((e: React.MouseEvent<HTMLElement>) => { 45 - let selection = window.getSelection(); 46 - if (!selection || selection.rangeCount === 0) return; 47 - let range = selection.getRangeAt(0); 48 - if (!range) return; 49 - let length = range.toString().length; 50 - range.setStart(e.currentTarget, 0); 51 - let end = range.toString().length; 52 - let start = end - length; 53 - 54 - flushSync(() => { 55 - useUIState.getState().setSelectedBlock(props); 56 - useUIState.getState().setFocusedBlock({ 57 - entityType: "block", 58 - entityID: props.value, 59 - parent: props.parent, 60 - }); 61 - }); 62 - let el = document.getElementById( 63 - elementId.block(props.entityID).input, 64 - ) as HTMLTextAreaElement; 65 - if (!el) return; 66 - el.focus(); 67 - el.setSelectionRange(start, end); 46 + focusBlock( 47 + { parent: props.parent, value: props.value, type: "code" }, 48 + { type: "end" }, 49 + ); 68 50 }, []); 69 51 return ( 70 52 <div className="codeBlock w-full flex flex-col rounded-md gap-0.5 "> ··· 120 102 )} 121 103 </BlockLayout> 122 104 {permissions.write && ( 123 - <div className="text-sm text-tertiary flex justify-between"> 124 - <div className="flex gap-1"> 105 + <div className="text-sm text-tertiary flex w-full justify-between"> 106 + <div className="codeBlockTheme grow flex gap-1"> 125 107 Theme:{" "} 126 108 <select 127 - className="codeBlockLang text-left bg-transparent pr-1 sm:max-w-none max-w-24" 109 + className="codeBlockThemeSelect text-left bg-transparent pr-1 sm:max-w-none max-w-24 w-full" 128 110 onClick={(e) => { 129 111 e.preventDefault(); 130 112 e.stopPropagation(); ··· 146 128 </select> 147 129 </div> 148 130 <select 149 - className="codeBlockLang text-right bg-transparent pr-1 sm:max-w-none max-w-24" 131 + className="codeBlockLang grow text-right bg-transparent pr-1 sm:max-w-none max-w-24 w-full" 150 132 onClick={(e) => { 151 133 e.preventDefault(); 152 134 e.stopPropagation();
+3 -1
src/utils/focusBlock.ts
··· 48 48 } 49 49 50 50 if (pos?.offset !== undefined) { 51 - el?.focus(); 51 + // trying to focus the block in a subpage causes the page to flash and scroll back to the parent page. 52 + // idk how to fix so i'm giving up -- celine 53 + // el?.focus(); 52 54 requestAnimationFrame(() => { 53 55 el?.setSelectionRange(pos.offset, pos.offset); 54 56 });