@zikojs/notebook 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A lightweight, extensible JavaScript notebook component with Markdown, executable cells, persistent state, and pluggable runtimes.",
   "type": "module",
   "publishConfig": {

package/src/code-editor/index.js

@@ -166,47 +166,62 @@ export function createCodeEditor(app, cellData, actions) {
         ? view.state.doc.toString()
         : cellData.code,
 
-    sync: (isActive, isMarkdownView) => {
-      if (!isMarkdownView) {
-        if (!view) {
-          requestAnimationFrame(() => initEditor());
-        } else {
-          view.dispatch({
-            effects: [
-              languageCompartment.reconfigure(
-                languageFor(cellData.type)
-              ),
-
-              readOnlyCompartment.reconfigure(
-                EditorState.readOnly.of(cellData.readonly)
-              ),
-
-              editableCompartment.reconfigure(
-                EditorView.editable.of(!cellData.readonly)
-              )
-            ]
-          });
-
-          const currentValue = view.state.doc.toString();
-
-          if (currentValue !== cellData.code) {
-            view.dispatch({
-              changes: {
-                from: 0,
-                to: currentValue.length,
-                insert: cellData.code
-              }
-            });
-          }
+    
+sync: (isActive, isMarkdownView) => {
+  if (!isMarkdownView) {
+    if (!view) {
+      requestAnimationFrame(() => {
+        initEditor();
+
+        // The editor may only become available after initialization.
+        // Check the current active cell, not a potentially stale
+        // isActive value captured by this callback.
+        if (
+          app.store.get("activeCellId") === cellData.id &&
+          !cellData.readonly &&
+          view
+        ) {
+          view.focus();
         }
+      });
+    } else {
+      view.dispatch({
+        effects: [
+          languageCompartment.reconfigure(
+            languageFor(cellData.type)
+          ),
+          readOnlyCompartment.reconfigure(
+            EditorState.readOnly.of(cellData.readonly)
+          ),
+          editableCompartment.reconfigure(
+            EditorView.editable.of(!cellData.readonly)
+          )
+        ]
+      });
+
+      const currentValue = view.state.doc.toString();
+
+      if (currentValue !== cellData.code) {
+        view.dispatch({
+          changes: {
+            from: 0,
+            to: currentValue.length,
+            insert: cellData.code
+          }
+        });
+      }
 
-        if (isActive && view && !cellData.readonly) {
-          requestAnimationFrame(() => view.focus());
-        }
-      } else if (view) {
-        view.destroy();
-        view = null;
+      if (
+        isActive &&
+        !cellData.readonly
+      ) {
+        requestAnimationFrame(() => view?.focus());
       }
     }
+  } else if (view) {
+    view.destroy();
+    view = null;
+  }
+}
   };
 }

package/src/notebook.js

@@ -424,8 +424,10 @@ export class UINotebook extends UIElement {
         app._refreshCell(cellData);
       },
 
-      addBelow: () =>
-        app.addCell(cellData.type, null, cellData.id),
+      addBelow: () => {
+        app.setActiveCell(cellData.id);
+        app.addCell(cellData.type, null, cellData.id);
+      },
 
       deleteCell: () => app.deleteCell(cellData.id),
 
@@ -523,117 +525,111 @@ export class UINotebook extends UIElement {
     });
   }
 
-  focusCell(targetId) {
-    this.store.get("cells").forEach((cell) => {
-      if (
-        cell.type === "markdown" &&
-        cell.isEditingMarkdown &&
-        cell.id !== targetId
-      ) {
-        cell.isEditingMarkdown = false;
-        this._refreshCell(cell);
-      }
-    });
+  focusCell(id) {
+  const cells = this.store.get("cells");
+  const cell = cells.find((c) => c.id === id);
 
-    const target = this.store
-      .get("cells")
-      .find((cell) => cell.id === targetId);
+  if (!cell) return;
 
-    if (
-      target &&
-      target.type === "markdown" &&
-      !target.readonly
-    ) {
-      target.isEditingMarkdown = true;
+  for (const c of cells) {
+    if (c.type === "markdown" && c.id !== id) {
+      c.isEditingMarkdown = false;
     }
+  }
 
-    this.store.set("activeCellId", targetId);
+  if (cell.type === "markdown" && !cell.readonly) {
+    cell.isEditingMarkdown = true;
   }
 
-  addCell(
-    type = "code",
-    initialCode = null,
-    afterId = null,
-    readonly = false
-  ) {
-    const cells = [...this.store.get("cells")];
-
-    if (cells.length >= this.maxCells) {
-      console.warn(
-        `Cannot create cell: Maximum cell limit (${this.maxCells}) reached.`
-      );
+  this.store.set("activeCellId", id);
+  this._refreshCell(cell);
+
+  // Scroll the target cell into view when it is outside the viewport.
+  requestAnimationFrame(() => {
+    const element = cell._dom;
 
-      return null;
+    if (!element?.isConnected) return;
+
+    const rect = element.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+
+    if (rect.top < 0 || rect.bottom > viewportHeight) {
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: rect.top < 0 ? "start" : "nearest",
+      });
     }
+  });
+}
 
-    const newId = this.nextCellId++;
-
-    const defaultText =
-      type === "markdown"
-        ? "### New Markdown Cell\nClick to edit..."
-        : "";
-
-    const source =
-      initialCode !== null ? initialCode : defaultText;
-
-    const pendingCode = isPromiseLike(source)
-      ? Promise.resolve(source)
-      : null;
-
-    const newCell = {
-      id: newId,
-      type,
-      code: pendingCode
-        ? ""
-        : typeof source === "string"
-          ? source
-          : "",
-      _codePromise: pendingCode,
-      _codeLoadError: null,
-
-      readonly,
-      isEditingMarkdown:
-        !readonly &&
-        type === "markdown" &&
-        initialCode === null,
-      runtime: null,
-      execCount: null,
-      outputNode: null,
-      hasDomOutput: false,
-
-      _copiedFlag: false,
-      _dom: null,
-      _editor: null,
-      _actions: null,
-      _inPrompt: null,
-      _outPrompt: null,
-      _bodySlot: null,
-      _outputGrid: null,
-      _outputRef: null,
-    };
+  
+
+addCell(type = "code", initialCode = null, afterId = null, readonly = false) {
+  const cells = [...this.store.get("cells")];
 
-    if (afterId === null) {
+  if (cells.length >= this.maxCells) {
+    console.warn(
+      `Cannot create cell: Maximum cell limit (${this.maxCells}) reached.`
+    );
+    return null;
+  }
+
+  // Prefer the cell associated with the clicked "+" button.
+  // Fall back to the last focused cell, then the last cell.
+  const sourceCell =
+    (afterId !== null
+      ? cells.find((cell) => cell.id === afterId)
+      : null) ??
+    cells.find(
+      (cell) => cell.id === this.store.get("activeCellId")
+    ) ??
+    cells.at(-1);
+
+  const newId = this.nextCellId++;
+  const defaultText =
+    type === "markdown"
+      ? "### New Markdown Cell\nClick to edit..."
+      : "";
+
+  const newCell = {
+    id: newId,
+    type,
+    code: initialCode !== null ? initialCode : defaultText,
+    readonly,
+    isEditingMarkdown:
+      !readonly && type === "markdown" && initialCode === null,
+    runtime: sourceCell?.runtime ?? null,
+    execCount: null,
+    outputNode: null,
+    hasDomOutput: false,
+    _copiedFlag: false,
+    _dom: null,
+    _editor: null,
+    _actions: null,
+    _inPrompt: null,
+    _outPrompt: null,
+    _bodySlot: null,
+    _outputGrid: null,
+    _outputRef: null,
+  };
+
+  if (afterId === null) {
+    cells.push(newCell);
+  } else {
+    const index = cells.findIndex((cell) => cell.id === afterId);
+    if (index === -1) {
       cells.push(newCell);
     } else {
-      const index = cells.findIndex(
-        (cell) => cell.id === afterId
-      );
-
       cells.splice(index + 1, 0, newCell);
     }
+  }
 
-    this.store.set("cells", cells);
-    this._renderAllCells();
-    this.focusCell(newId);
-
-    // Resolve newly added Promise-based code without blocking
-    // the synchronous addCell() API.
-    if (pendingCode) {
-      this._resolveCellCode(newCell);
-    }
+  this.store.set("cells", cells);
+  this._renderAllCells();
+  this.focusCell(newId);
 
-    return newId;
-  }
+  return newId;
+}
 
   deleteCell(id) {
     const cells = this.store.get("cells");
@@ -656,19 +652,26 @@ export class UINotebook extends UIElement {
     this.focusCell(updatedCells[nextActiveIndex].id);
   }
 
-  nextCell(currentId, defaultType) {
-    const cells = this.store.get("cells");
-    const index = cells.findIndex(
-      (cell) => cell.id === currentId
-    );
+  
+nextCell(currentId, defaultType) {
+  const cells = this.store.get("cells");
+  const index = cells.findIndex((cell) => cell.id === currentId);
+
+  if (index === -1) return;
 
-    if (index === cells.length - 1) {
-      this.addCell(defaultType, null, currentId);
-    } else if (index >= 0) {
-      this.focusCell(cells[index + 1].id);
+  if (index === cells.length - 1) {
+    const newId = this.addCell(defaultType, null, currentId);
+
+    if (newId !== null) {
+      this.focusCell(newId);
     }
+
+    return;
   }
 
+  this.focusCell(cells[index + 1].id);
+}
+
   async runCell(id) {
     await this.ready;
 
@@ -761,31 +764,30 @@ export class UINotebook extends UIElement {
     return window.__notebook_scope_map.get(this.id);
   }
 
-  getNotebookData({
-    inputs = true,
-    outputs = true,
-  } = {}) {
-    return this.store.get("cells").map((cell) => {
-      const exportedCell = {
-        id: cell.id,
-        type: cell.type,
-        readonly: cell.readonly,
-        order: cell.execCount,
-      };
+  
+getNotebookData({ inputs = true, outputs = true } = {}) {
+  return this.store.get("cells").map((cell) => {
+    const exportedCell = {
+      id: cell.id,
+      type: cell.type,
+      readonly: cell.readonly,
+      runtime: cell.runtime ?? null,
+      order: cell.execCount,
+    };
 
-      if (inputs) {
-        exportedCell.code = cell.code;
-      }
+    if (inputs) {
+      exportedCell.code = cell._editor?.getValue() ?? cell.code;
+    }
 
-      if (outputs) {
-        exportedCell.outputHtml = cell.outputNode
-          ? cell.outputNode.innerHTML
-          : null;
-      }
+    if (outputs) {
+      exportedCell.outputHtml = cell.outputNode
+        ? cell.outputNode.innerHTML
+        : cell._outputRef?.innerHTML ?? null;
+    }
 
-      return exportedCell;
-    });
-  }
+    return exportedCell;
+  });
+}
 }
 
 export const Notebook = call_with_optional_props(UINotebook);