@marimo-team/frontend 0.23.10-dev51 → 0.23.10-dev52

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-44I991hQ.js"></script>
+    <script type="module" crossorigin src="./assets/index-CdnLLLYn.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-BPPi7vOr.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">
@@ -133,7 +133,7 @@
     <link rel="modulepreload" crossorigin href="./assets/debounce-DhnxH9Rh.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-kIkTfzTX.js">
     <link rel="modulepreload" crossorigin href="./assets/main-B0OX4z33.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-k7Js5h2t.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-CoFnpuSu.js">
     <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-DyYDV0HI.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-CTUAEnEx.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-GI6gu7_S.js">
@@ -147,38 +147,38 @@
     <link rel="modulepreload" crossorigin href="./assets/usePress-DQ_tAz5W.js">
     <link rel="modulepreload" crossorigin href="./assets/input-DA8xlX70.js">
     <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-BW1dmntO.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-spbX-mlL.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-iYZiKtn4.js">
     <link rel="modulepreload" crossorigin href="./assets/multi-map-C4OANz8X.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-yTS3WpF4.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CG5QYXYk.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-CZ4XbE-c.js">
     <link rel="modulepreload" crossorigin href="./assets/links-D1JoyKTt.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-CVd2QKS9.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-Ck2FcYV8.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-LK56fFow.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-BwrPA9zQ.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-BuRdHNPA.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-B5i6Qdbh.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-mov7mYsn.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-C9ggN1rs.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-CXsJP1V5.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-CQiCeDJW.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-CHxBK47b.js">
     <link rel="modulepreload" crossorigin href="./assets/package-Tv6ztuzw.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkles-lWUAsPhp.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DIx3jD4Z.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-Ca2QF99G.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-Cm6DdkeR.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-DHwG4Mac.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-XvgFV23w.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-wXUHKee-.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-Bhir8k53.js">
-    <link rel="modulepreload" crossorigin href="./assets/html-to-image-rLeQGF-G.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-CRI5ilWC.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-DkJzNEld.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-CjgVplbV.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-bgszE9F0.js">
     <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-C7ALwTI_.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-bqhKsQDn.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-D91x7QHS.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-BHa-Tbwi.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-DC51vSBA.js">
     <link rel="modulepreload" crossorigin href="./assets/command-BmOGG6-2.js">
     <link rel="modulepreload" crossorigin href="./assets/field-DCdxnSKm.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-CNCYAwbC.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-D3F5g1xA.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-BS31LU22.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-B10yQcVE.js">
     <link rel="modulepreload" crossorigin href="./assets/table-BGPSHfig.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-CcI1zSdn.js">
     <link rel="modulepreload" crossorigin href="./assets/error-banner-D0xvrLog.js">
@@ -198,21 +198,21 @@
     <link rel="modulepreload" crossorigin href="./assets/plus-BgB18UzY.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-rVklqqFF.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-CV8-hvjx.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-CZQlutzs.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-DOmfCaR3.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-nqk474t8.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-uY_yJr5g.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-CPQR_o92.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-DM1s1Z9h.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-TS1GqZH2.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-Ol38nIbL.js">
-    <link rel="modulepreload" crossorigin href="./assets/radio-group-DS_mmqHJ.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CCH9y0X9.js">
+    <link rel="modulepreload" crossorigin href="./assets/radio-group-RRco4zNE.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CzBp8YHO.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-DfWeGRFv.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-xaw4Vy8N.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-3HZIBvHp.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-Crki_rLb.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-BrQspHac.js">
     <link rel="modulepreload" crossorigin href="./assets/file-BrdxGLRX.js">
     <link rel="modulepreload" crossorigin href="./assets/image-DQHXdEQn.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-on-PIYta.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-CtmUbkxd.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-Ac7CgLgh.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CPoJAfgx.js">
     <link rel="modulepreload" crossorigin href="./assets/globals-BivClSmn.js">
@@ -221,11 +221,11 @@
     <link rel="modulepreload" crossorigin href="./assets/memoize-Tp7rARFe.js">
     <link rel="modulepreload" crossorigin href="./assets/get-C-qh_et5.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-CxV9N1bc.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-Dy-doCBq.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-CsD5BRG0.js">
     <link rel="modulepreload" crossorigin href="./assets/label-C2_YQRio.js">
-    <link rel="modulepreload" crossorigin href="./assets/textarea-BfDUjd9c.js">
+    <link rel="modulepreload" crossorigin href="./assets/textarea-DoKXC-jv.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-C-n2VFP5.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-HcuPVpyt.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-WbviP6l9.js">
     <link rel="modulepreload" crossorigin href="./assets/renderShortcut--ku7VECI.js">
     <link rel="modulepreload" crossorigin href="./assets/useBoolean-CE6PfxGj.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-CVmg-GkP.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.10-dev51",
+  "version": "0.23.10-dev52",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__tests__/setup.ts

@@ -20,6 +20,22 @@ globalThis.ResizeObserver ??= class {
   }
 } as never;
 
+// mock implementation because jsdom doesn't support IntersectionObserver
+globalThis.IntersectionObserver ??= class {
+  observe(_target: Element) {
+    /* noop */
+  }
+  unobserve(_target: Element) {
+    /* noop */
+  }
+  disconnect() {
+    /* noop */
+  }
+  takeRecords() {
+    return [];
+  }
+} as never;
+
 // Global setup for all tests
 beforeEach(() => {
   // Reset all mocks before each test

package/src/components/editor/cell/code/cell-editor.tsx

@@ -2,8 +2,9 @@
 import { historyField } from "@codemirror/commands";
 import { EditorState, StateEffect } from "@codemirror/state";
 import { EditorView, ViewPlugin } from "@codemirror/view";
+import { useIntersectionObserver } from "@uidotdev/usehooks";
 import { useAtom, useAtomValue } from "jotai";
-import React, { memo, useEffect, useMemo, useRef } from "react";
+import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
@@ -14,6 +15,7 @@ import { usePendingDeleteService } from "@/core/cells/pending-delete-service";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
 import { setupCodeMirror } from "@/core/codemirror/cm";
 import { acceptCompletionOnEnterAtom } from "@/core/codemirror/completion/accept-on-enter-atom";
+import { editorMountScheduler } from "@/core/codemirror/editor-mount-scheduler";
 import {
   getInitialLanguageAdapter,
   languageAdapterState,
@@ -45,6 +47,7 @@ import {
 } from "../../navigation/navigation";
 import { useDeleteCellCallback } from "../useDeleteCell";
 import { useSplitCellCallback } from "../useSplitCell";
+import { CodePlaceholder } from "./code-placeholder";
 import { LanguageToggles } from "./language-toggle";
 
 export interface CellEditorProps
@@ -405,38 +408,45 @@ const CellEditorInternal = ({
     // Clear the serialized state so that we don't re-create the editor next time
     cellActions.clearSerializedEditorState({ cellId });
   });
+  const [isEditorMounted, setIsEditorMounted] = useState(
+    serializedEditorState !== null,
+  );
 
+  // Build the editor. Deserialize eagerly; otherwise queue an async build so
+  // large notebooks stay responsive while editors come online progressively.
   useEffect(() => {
-    if (serializedEditorState === null) {
-      if (editorViewRef.current === null) {
-        handleInitializeEditor();
-      } else {
-        // If the editor already exists, reconfigure it with the new extensions.
-        handleReconfigureEditor();
-      }
-    } else {
-      handleDeserializeEditor();
+    if (editorViewRef.current !== null) {
+      setIsEditorMounted(true);
+      return;
     }
-
-    if (
-      editorViewRef.current !== null &&
-      editorViewParentRef &&
-      editorViewParentRef.current !== null
-    ) {
-      // Always replace the children in case the editor view was re-created.
-      editorViewParentRef.current.replaceChildren(editorViewRef.current.dom);
+    if (serializedEditorState !== null) {
+      handleDeserializeEditor();
+      setIsEditorMounted(true);
+      return;
     }
+    editorMountScheduler.request(cellId, () => {
+      if (editorViewRef.current !== null) {
+        return;
+      }
+      handleInitializeEditor();
+      setIsEditorMounted(true);
+    });
+    return () => editorMountScheduler.cancel(cellId);
   }, [
-    handleInitializeEditor,
-    handleReconfigureEditor,
-    handleDeserializeEditor,
+    cellId,
     editorViewRef,
-    editorViewParentRef,
+    handleDeserializeEditor,
+    handleInitializeEditor,
     serializedEditorState,
-    // Props to trigger reconfiguration
-    extensions,
   ]);
 
+  useEffect(() => {
+    if (editorViewRef.current === null) {
+      return;
+    }
+    handleReconfigureEditor();
+  }, [handleReconfigureEditor, extensions, editorViewRef]);
+
   // Destroy the editor when the component is unmounted
   useEffect(() => {
     const ev = editorViewRef.current;
@@ -445,6 +455,23 @@ const CellEditorInternal = ({
     };
   }, [editorViewRef]);
 
+  // Prioritize building this cell's editor when it scrolls into view, so the
+  // visible region fills in first instead of waiting for the top-to-bottom
+  // queue. The margin builds cells just before they reach the viewport.
+  const [intersectionRef, intersection] = useIntersectionObserver({
+    rootMargin: "300px 0px",
+  });
+  useEffect(() => {
+    if (isEditorMounted) {
+      return;
+    }
+    if (intersection?.isIntersecting) {
+      editorMountScheduler.prioritize(cellId);
+    } else {
+      editorMountScheduler.deprioritize(cellId);
+    }
+  }, [isEditorMounted, intersection?.isIntersecting, cellId]);
+
   const navigationProps = useCellEditorNavigationProps(cellId, editorViewRef);
 
   let editorClassName = "";
@@ -489,14 +516,22 @@ const CellEditorInternal = ({
       runCell={handleRunCell}
       outputArea={outputArea}
     >
-      <div className="relative w-full" {...navigationProps}>
-        <CellCodeMirrorEditor
-          className={editorClassName}
-          editorView={editorViewRef.current}
-          ref={editorViewParentRef}
-          hidden={hidden}
-          showHiddenCode={showHiddenCode}
-        />
+      <div
+        className="relative w-full"
+        ref={intersectionRef}
+        {...navigationProps}
+      >
+        {isEditorMounted ? (
+          <CellCodeMirrorEditor
+            className={editorClassName}
+            editorView={editorViewRef.current}
+            ref={editorViewParentRef}
+            hidden={hidden}
+            showHiddenCode={showHiddenCode}
+          />
+        ) : (
+          <CodePlaceholder code={code} className={editorClassName} />
+        )}
         {!hidden && showLanguageToggles && (
           <div className="absolute top-1 right-5">
             <LanguageToggles

package/src/components/editor/cell/code/code-placeholder.css

@@ -0,0 +1,17 @@
+.mo-code-placeholder {
+  --mo-skeleton-bar: color-mix(in srgb, var(--muted), var(--foreground) 18%);
+  cursor: default;
+  padding: 4px 10px;
+  font-size: var(--cm-font-size, 0.875rem);
+}
+
+.mo-code-placeholder-line {
+  display: flex;
+  align-items: center;
+  height: 1.5em;
+}
+
+.mo-code-placeholder-bar {
+  height: 0.7em;
+  background-color: var(--mo-skeleton-bar);
+}

package/src/components/editor/cell/code/code-placeholder.tsx

@@ -0,0 +1,46 @@
+import "./code-placeholder.css";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/utils/cn";
+
+interface CodePlaceholderProps {
+  code: string;
+  className?: string;
+}
+
+// Bound the rendered bars so a very long cell does not create excessive nodes.
+const MAX_LINES = 50;
+const MIN_LINE_WIDTH_CH = 4;
+const MAX_LINE_WIDTH_CH = 60;
+
+function getLineWidthCh(length: number): number {
+  return Math.min(MAX_LINE_WIDTH_CH, Math.max(MIN_LINE_WIDTH_CH, length));
+}
+
+/**
+ * Stand-in shown while a cell's CodeMirror editor has not been built yet.
+ * one skeleton bar per code line, so the final render doesn't cause a big jump.
+ */
+export const CodePlaceholder = ({ code, className }: CodePlaceholderProps) => {
+  const lines = code.split("\n", MAX_LINES);
+  return (
+    <div
+      className={cn("cm", "mo-code-placeholder", className)}
+      data-testid="cell-editor-placeholder"
+      aria-hidden={true}
+    >
+      {lines.map((line, index) => {
+        const length = line.trimEnd().length;
+        return (
+          <div key={index} className="mo-code-placeholder-line">
+            {length > 0 && (
+              <Skeleton
+                className="mo-code-placeholder-bar"
+                style={{ width: `${getLineWidthCh(length)}ch` }}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/core/cells/scrollCellIntoView.ts

@@ -7,6 +7,7 @@ import {
 import type { CellHandle } from "@/components/editor/notebook-cell";
 import { retryWithTimeout } from "@/utils/timeout";
 import { Logger } from "../../utils/Logger";
+import { editorMountScheduler } from "../codemirror/editor-mount-scheduler";
 import { scrollActiveLineIntoView } from "../codemirror/extensions";
 import { goToVariableDefinition } from "../codemirror/go-to-definition/commands";
 import { getCellEditorView } from "./cells";
@@ -48,6 +49,9 @@ export function focusAndScrollCellIntoView({
     // https://github.com/marimo-team/marimo/issues/2940
     tryFocus(element);
   } else {
+    // Build this cell's editor now if it is still queued, so focus can land in
+    // it instead of the placeholder.
+    editorMountScheduler.promote(cellId);
     const editor = cell.current?.editorView;
     if (!editor) {
       Logger.warn("scrollCellIntoView: editor not found", cellId);

package/src/core/codemirror/__tests__/editor-mount-scheduler.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from "vitest";
+import { createEditorMountScheduler } from "../editor-mount-scheduler";
+
+function makeManualSchedule() {
+  let pending: (() => void) | null = null;
+  const schedule = (cb: () => void) => {
+    pending = cb;
+  };
+  const flush = () => {
+    const cb = pending;
+    pending = null;
+    cb?.();
+  };
+  return { schedule, flush, hasPending: () => pending !== null };
+}
+
+describe("createEditorMountScheduler", () => {
+  it("builds one queued editor per tick in FIFO order, rescheduling between", () => {
+    const { schedule, flush, hasPending } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    flush();
+    expect(built).toEqual(["a"]);
+    expect(hasPending()).toBe(true);
+    flush();
+    expect(built).toEqual(["a", "b"]);
+  });
+
+  it("stops rescheduling once the queue is empty", () => {
+    const { schedule, flush, hasPending } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    flush();
+    expect(built).toEqual(["a"]);
+    expect(hasPending()).toBe(false);
+  });
+
+  it("promote builds immediately and removes from the queue", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    s.promote("b");
+    expect(built).toEqual(["b"]);
+    flush();
+    expect(built).toEqual(["b", "a"]);
+  });
+
+  it("cancel prevents a queued build", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.cancel("a");
+    flush();
+    expect(built).toEqual([]);
+  });
+
+  it("builds prioritized cells before earlier-queued ones", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    s.request("c", () => built.push("c"));
+    s.prioritize("c");
+    flush();
+    flush();
+    flush();
+    expect(built).toEqual(["c", "a", "b"]);
+  });
+
+  it("builds multiple prioritized cells in prioritization order, then FIFO", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    s.request("c", () => built.push("c"));
+    s.request("d", () => built.push("d"));
+    s.prioritize("d");
+    s.prioritize("b");
+    flush();
+    flush();
+    flush();
+    flush();
+    expect(built).toEqual(["d", "b", "a", "c"]);
+  });
+
+  it("ignores prioritize for a cell that is not queued", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.prioritize("not-queued");
+    flush();
+    expect(built).toEqual(["a"]);
+  });
+
+  it("deprioritize reverts a cell to FIFO order without dropping it", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    s.prioritize("b");
+    s.deprioritize("b");
+    flush();
+    flush();
+    expect(built).toEqual(["a", "b"]);
+  });
+
+  it("keeps draining the queue after a build throws", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => {
+      throw new Error("boom");
+    });
+    s.request("b", () => built.push("b"));
+    expect(() => flush()).toThrow("boom");
+    flush();
+    expect(built).toEqual(["b"]);
+  });
+
+  it("cancel removes a prioritized cell", () => {
+    const { schedule, flush } = makeManualSchedule();
+    const built: string[] = [];
+    const s = createEditorMountScheduler(schedule);
+    s.request("a", () => built.push("a"));
+    s.request("b", () => built.push("b"));
+    s.prioritize("b");
+    s.cancel("b");
+    flush();
+    flush();
+    expect(built).toEqual(["a"]);
+  });
+});

package/src/core/codemirror/editor-mount-scheduler.ts

@@ -0,0 +1,100 @@
+import {
+  scheduleTask as defaultScheduleTask,
+  type ScheduleTaskFn,
+} from "@/utils/schedule-task";
+
+type BuildFn = () => void;
+
+export interface EditorMountScheduler {
+  /** Queue a cell's editor build to run on a future task. */
+  request(cellId: string, build: BuildFn): void;
+  /** Build a queued cell's editor synchronously, right now (e.g. on focus). */
+  promote(cellId: string): void;
+  /**
+   * Mark a queued cell to build ahead of un-prioritized ones, keeping the
+   * one-build-per-task pacing (e.g. when the cell scrolls into view).
+   */
+  prioritize(cellId: string): void;
+  /** Drop a cell's prioritized mark, reverting it to plain FIFO order. */
+  deprioritize(cellId: string): void;
+  /** Remove a cell's queued build entirely. */
+  cancel(cellId: string): void;
+}
+
+/**
+ * Drains a FIFO queue of editor builds, one per macrotask, so constructing many
+ * CodeMirror instances never blocks the main thread in a single long task. The
+ * scheduler yields between every build to keep the page responsive. Cells can
+ * be prioritized (e.g. when they scroll into view) to jump ahead of the queue
+ * without breaking the one-build-per-macrotask pacing.
+ */
+export function createEditorMountScheduler(
+  scheduleTask: ScheduleTaskFn = defaultScheduleTask,
+): EditorMountScheduler {
+  const queue = new Map<string, BuildFn>();
+  const priority = new Set<string>();
+  let isProcessingScheduled = false;
+
+  function scheduleProcessing(): void {
+    if (isProcessingScheduled || queue.size === 0) {
+      return;
+    }
+    isProcessingScheduled = true;
+    scheduleTask(processNext);
+  }
+
+  // Prioritized cells first, in the order they were prioritized; then FIFO.
+  function nextCellId(): string | undefined {
+    for (const cellId of priority) {
+      if (queue.has(cellId)) {
+        return cellId;
+      }
+      priority.delete(cellId);
+    }
+    return queue.keys().next().value;
+  }
+
+  function processNext(): void {
+    isProcessingScheduled = false;
+    try {
+      const cellId = nextCellId();
+      if (cellId !== undefined) {
+        const build = queue.get(cellId);
+        queue.delete(cellId);
+        priority.delete(cellId);
+        build?.();
+      }
+    } finally {
+      scheduleProcessing();
+    }
+  }
+
+  return {
+    request(cellId, build) {
+      queue.set(cellId, build);
+      scheduleProcessing();
+    },
+    promote(cellId) {
+      const build = queue.get(cellId);
+      if (build) {
+        queue.delete(cellId);
+        priority.delete(cellId);
+        build();
+      }
+    },
+    prioritize(cellId) {
+      if (queue.has(cellId)) {
+        priority.add(cellId);
+      }
+    },
+    deprioritize(cellId) {
+      priority.delete(cellId);
+    },
+    cancel(cellId) {
+      queue.delete(cellId);
+      priority.delete(cellId);
+    },
+  };
+}
+
+export const editorMountScheduler = createEditorMountScheduler();