allow selection in code block

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()}

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;
     }