From 1a27947f5ed1945ec6e1016b8a7b91b01ea7e693 Mon Sep 17 00:00:00 2001
From: Andrew Zamojc <me@andrewzamojc.com>
Date: Tue, 28 Oct 2025 18:54:24 -0400
Subject: [PATCH] allow selection in code block

---
 src/lib/holocene/code-block.svelte              | 14 ++------------
 src/lib/holocene/maximizable/maximizable.svelte |  6 +++---
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
index 6d87aa64eb..edfda2043a 100644
--- a/src/lib/holocene/code-block.svelte
+++ b/src/lib/holocene/code-block.svelte
@@ -164,8 +164,8 @@
     [
       getEditorTheme($useDarkMode, hasHeader),
       getActionsTheme({ hasActions: copyable || maximizable }),
-      EditorState.readOnly.of(!editable),
-      EditorView.editable.of(editable),
+      EditorState.readOnly.of(!editable), // when false, user can type in the editor
+      EditorView.editable.of(true), // always true, it means focusable, text-selectable, and scrollable by keyboard
       EditorView.contentAttributes.of({ 'aria-label': label }),
       getLineBreakExtension(editable),
       getLanguageExtension(language),
@@ -199,15 +199,6 @@
     });
   });
 
-  // add tabindex if maximizable, so up/down arrows can scroll
-  $effect(() => {
-    if (maximizable) {
-      editorView?.scrollDOM?.setAttribute('tabindex', '0');
-    } else {
-      editorView?.scrollDOM?.removeAttribute('tabindex');
-    }
-  });
-
   // when content prop changes, update the document
   $effect(() => {
     content;
@@ -297,7 +288,6 @@
       class={merge('h-full', className)}
       data-testid={testId}
       {...editorProps}
-      onblur={handleEditorBlur}
     ></div>
 
     {#snippet actions()}
diff --git a/src/lib/holocene/maximizable/maximizable.svelte b/src/lib/holocene/maximizable/maximizable.svelte
index 489a83b3e3..99d005cd4b 100644
--- a/src/lib/holocene/maximizable/maximizable.svelte
+++ b/src/lib/holocene/maximizable/maximizable.svelte
@@ -31,11 +31,11 @@
   };
 
   const handleFocusOut = (event: FocusEvent) => {
+    const currentTarget = event.currentTarget as Element | null;
+    const relatedTarget = event.relatedTarget as Element | null;
     if (
       maximized &&
-      (!(event.currentTarget instanceof Element) ||
-        !(event.relatedTarget instanceof Element) ||
-        !event.currentTarget.contains(event.relatedTarget))
+      !(currentTarget && relatedTarget && currentTarget.contains(relatedTarget))
     ) {
       maximized = false;
     }