From e6a3d7e5bb98a59193e85fc7492bb3ab7587f336 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Mon, 6 Apr 2026 20:48:18 -0400
Subject: [PATCH] fix selected block focus state

---
 app/globals.css                       | 14 ++++++++++----
 components/Blocks/TextBlock/index.tsx | 20 ++++++++++++++++----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index c86b2665..de5e0ecd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -362,11 +362,15 @@ pre.shiki {
 }
 
 .selection-highlight {
-  background-color: Highlight;
+  background-color: transparent;
   @apply py-[1.5px];
 }
 
-.ProseMirror:focus-within .selection-highlight {
+.block-focused .selection-highlight {
+  background-color: Highlight;
+}
+
+.block-focused:focus-within .selection-highlight {
   background-color: transparent;
 }
 
@@ -392,7 +396,7 @@ pre.shiki {
   white-space: normal;
 }
 
-.multiselected:focus-within .selection-highlight {
+.multiselected .block-focused:focus-within .selection-highlight {
   background-color: transparent;
 }
 
@@ -604,7 +608,9 @@ pre.shiki {
   max-height: calc(4.5em + 8px);
   opacity: calc(var(--bg-page-alpha) * 0.7);
 }
-.footnote-side-item:not(:hover):not(:focus-within):not(.footnote-side-focused) .footnote-item > div:last-of-type {
+.footnote-side-item:not(:hover):not(:focus-within):not(.footnote-side-focused)
+  .footnote-item
+  > div:last-of-type {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx
index fd6a6be5..bce54fa1 100644
--- a/components/Blocks/TextBlock/index.tsx
+++ b/components/Blocks/TextBlock/index.tsx
@@ -170,7 +170,9 @@ export function RenderedTextBlock(props: {
     <div
       style={{
         wordBreak: "break-word",
-        ...(props.type === "heading" ? { fontSize: headingFontSize[headingLevel?.data.value || 1] } : {}),
+        ...(props.type === "heading"
+          ? { fontSize: headingFontSize[headingLevel?.data.value || 1] }
+          : {}),
       }}
       onClick={(e) => {
         let target = e.target as HTMLElement;
@@ -290,13 +292,19 @@ export function BaseTextBlock(props: BlockProps & { className?: string }) {
           // forces break if a single text string (e.g. a url) spans more than a full line
           style={{
             wordBreak: "break-word",
-            fontFamily: props.type === "heading" ? "var(--theme-heading-font)" : "var(--theme-font)",
-            ...(props.type === "heading" ? { fontSize: headingFontSize[headingLevel?.data.value || 1] } : {}),
+            fontFamily:
+              props.type === "heading"
+                ? "var(--theme-heading-font)"
+                : "var(--theme-font)",
+            ...(props.type === "heading"
+              ? { fontSize: headingFontSize[headingLevel?.data.value || 1] }
+              : {}),
           }}
           className={`
             ${alignmentClass}
           grow resize-none align-top whitespace-pre-wrap bg-transparent
           outline-hidden
+          ${focused ? "block-focused" : ""}
 
           ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : textStyle}
           ${props.className}`}
@@ -316,7 +324,11 @@ export function BaseTextBlock(props: BlockProps & { className?: string }) {
         props.nextBlock === null ? (
           // if this is the only block on the page and is empty or is a canvas, show placeholder
           <div
-            style={props.type === "heading" ? { fontSize: headingFontSize[headingLevel?.data.value || 1] } : undefined}
+            style={
+              props.type === "heading"
+                ? { fontSize: headingFontSize[headingLevel?.data.value || 1] }
+                : undefined
+            }
             className={`${props.className} ${alignmentClass} w-full pointer-events-none absolute top-0 left-0  italic text-tertiary flex flex-col
               ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : textStyle}
               `}
-- 
2.51.2