From 70991ca010d6ce0912accd3ee04940b4173a2031 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 21 Jan 2026 17:59:22 -0500
Subject: [PATCH] small block bugs

---
 components/Blocks/ButtonBlock.tsx |  2 +-
 components/Blocks/CodeBlock.tsx   | 36 ++++++++-----------------------
 src/utils/focusBlock.ts           |  4 +++-
 3 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/components/Blocks/ButtonBlock.tsx b/components/Blocks/ButtonBlock.tsx
index af08221d..f7e0604d 100644
--- a/components/Blocks/ButtonBlock.tsx
+++ b/components/Blocks/ButtonBlock.tsx
@@ -24,12 +24,12 @@ export const ButtonBlock = (props: BlockProps & { preview?: boolean }) => {
   let isSelected = useUIState((s) =>
     s.selectedBlocks.find((b) => b.value === props.entityID),
   );
+  let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value;
 
   if (!url) {
     if (!permissions.write) return null;
     return <ButtonBlockSettings {...props} />;
   }
-  let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value;
 
   return (
     <BlockLayout
diff --git a/components/Blocks/CodeBlock.tsx b/components/Blocks/CodeBlock.tsx
index 4e0f92cd..7a49ea9f 100644
--- a/components/Blocks/CodeBlock.tsx
+++ b/components/Blocks/CodeBlock.tsx
@@ -14,6 +14,7 @@ import { useEntitySetContext } from "components/EntitySetProvider";
 import { flushSync } from "react-dom";
 import { elementId } from "src/utils/elementId";
 import { LAST_USED_CODE_LANGUAGE_KEY } from "src/utils/codeLanguageStorage";
+import { focusBlock } from "src/utils/focusBlock";
 
 export function CodeBlock(props: BlockProps) {
   let { rep, rootEntity } = useReplicache();
@@ -42,29 +43,10 @@ export function CodeBlock(props: BlockProps) {
   }, [content, lang, theme]);
 
   const onClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
-    let selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) return;
-    let range = selection.getRangeAt(0);
-    if (!range) return;
-    let length = range.toString().length;
-    range.setStart(e.currentTarget, 0);
-    let end = range.toString().length;
-    let start = end - length;
-
-    flushSync(() => {
-      useUIState.getState().setSelectedBlock(props);
-      useUIState.getState().setFocusedBlock({
-        entityType: "block",
-        entityID: props.value,
-        parent: props.parent,
-      });
-    });
-    let el = document.getElementById(
-      elementId.block(props.entityID).input,
-    ) as HTMLTextAreaElement;
-    if (!el) return;
-    el.focus();
-    el.setSelectionRange(start, end);
+    focusBlock(
+      { parent: props.parent, value: props.value, type: "code" },
+      { type: "end" },
+    );
   }, []);
   return (
     <div className="codeBlock w-full flex flex-col rounded-md gap-0.5 ">
@@ -120,11 +102,11 @@ export function CodeBlock(props: BlockProps) {
         )}
       </BlockLayout>
       {permissions.write && (
-        <div className="text-sm text-tertiary flex justify-between">
-          <div className="flex gap-1">
+        <div className="text-sm text-tertiary flex w-full justify-between">
+          <div className="codeBlockTheme grow flex gap-1">
             Theme:{" "}
             <select
-              className="codeBlockLang text-left bg-transparent pr-1 sm:max-w-none max-w-24"
+              className="codeBlockThemeSelect text-left bg-transparent pr-1 sm:max-w-none max-w-24 w-full"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -146,7 +128,7 @@ export function CodeBlock(props: BlockProps) {
             </select>
           </div>
           <select
-            className="codeBlockLang text-right bg-transparent pr-1 sm:max-w-none max-w-24"
+            className="codeBlockLang grow text-right bg-transparent pr-1 sm:max-w-none max-w-24 w-full"
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
diff --git a/src/utils/focusBlock.ts b/src/utils/focusBlock.ts
index fcf23cc2..f0e0ad2c 100644
--- a/src/utils/focusBlock.ts
+++ b/src/utils/focusBlock.ts
@@ -48,7 +48,9 @@ export function focusBlock(
     }
 
     if (pos?.offset !== undefined) {
-      el?.focus();
+      // trying to focus the block in a subpage causes the page to flash and scroll back to the parent page.
+      // idk how to fix so i'm giving up -- celine
+      // el?.focus();
       requestAnimationFrame(() => {
         el?.setSelectionRange(pos.offset, pos.offset);
       });
-- 
2.51.2