@zikojs/notebook 0.14.1 → 0.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "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

@@ -1,7 +1,22 @@
-import { EditorView, keymap, lineNumbers, highlightActiveLine } from "@codemirror/view";
+import {
+  EditorView,
+  keymap,
+  lineNumbers,
+  highlightActiveLine,
+} from "@codemirror/view";
 import { EditorState, Compartment } from "@codemirror/state";
-import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
-import { bracketMatching, indentUnit, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} from "@codemirror/commands";
+import {
+  bracketMatching,
+  indentUnit,
+  syntaxHighlighting,
+  defaultHighlightStyle,
+} from "@codemirror/language";
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { javascript } from "@codemirror/lang-javascript";
 import { markdown } from "@codemirror/lang-markdown";
@@ -9,7 +24,6 @@ import { tags } from "ziko/dom";
 
 const { div } = tags;
 
-
 const getRuntimePlugin = (runtime, runtimePlugins = []) =>
   runtimePlugins.find((plugin) => plugin?.name === runtime);
 
@@ -39,7 +53,7 @@ export function createCodeEditor(app, cellData, actions) {
   const buildPluginKeymap = () => {
     const bindings = [];
 
-    app.codeMirrorPlugins.forEach(plugin => {
+    app.codeMirrorPlugins.forEach((plugin) => {
       if (plugin && typeof plugin === "object" && plugin.extraKeys) {
         Object.entries(plugin.extraKeys).forEach(([key, run]) => {
           bindings.push({
@@ -47,7 +61,7 @@ export function createCodeEditor(app, cellData, actions) {
             run: () => {
               run();
               return true;
-            }
+            },
           });
         });
       }
@@ -65,7 +79,7 @@ export function createCodeEditor(app, cellData, actions) {
         run: () => {
           actions.runCode(true);
           return true;
-        }
+        },
       },
       {
         key: "Ctrl-Enter",
@@ -73,7 +87,7 @@ export function createCodeEditor(app, cellData, actions) {
         run: () => {
           actions.runCode(false);
           return true;
-        }
+        },
       },
       {
         key: "Ctrl-Shift-d",
@@ -81,7 +95,7 @@ export function createCodeEditor(app, cellData, actions) {
         run: () => {
           app.notebookGlobalShortcuts.deleteActive();
           return true;
-        }
+        },
       },
       {
         key: "Ctrl-Shift-m",
@@ -89,7 +103,7 @@ export function createCodeEditor(app, cellData, actions) {
         run: () => {
           app.notebookGlobalShortcuts.addMdBelow();
           return true;
-        }
+        },
       },
       {
         key: "Ctrl-Shift-y",
@@ -97,14 +111,13 @@ export function createCodeEditor(app, cellData, actions) {
         run: () => {
           app.notebookGlobalShortcuts.addCodeBelow();
           return true;
-        }
+        },
       },
       indentWithTab,
       ...buildPluginKeymap(),
       ...closeBracketsKeymap,
       ...defaultKeymap,
       ...historyKeymap,
-      
     ]);
 
     const extraExtensions = Array.isArray(app.codeMirrorConfig)
@@ -114,39 +127,38 @@ export function createCodeEditor(app, cellData, actions) {
     const state = EditorState.create({
       doc: cellData.code,
       extensions: [
-        lineNumbers(),
+        // lineNumbers(),
         highlightActiveLine(),
+        // EditorView.theme({
+        //   "&": {
+        //     fontFamily: '"Fira Code", SFMono-Regular, Consolas, monospace',
+        //     fontSize: "13px",
+        //     lineHeight: "17px",
+        //   },
+        //   ".cm-scroller, .cm-content, .cm-line, .cm-gutterElement": {
+        //     lineHeight: "17px",
+        //   },
+        // }),
 
         history(),
         bracketMatching(),
         closeBrackets(),
-
         syntaxHighlighting(defaultHighlightStyle),
-
         shortcutKeymap,
-
         EditorView.lineWrapping,
-
         indentUnit.of("  "),
         EditorState.tabSize.of(2),
-
         languageCompartment.of(
-  languageFor(cellData.type, cellData.runtime, app.runtimePlugins)
-),
+          languageFor(cellData.type, cellData.runtime, app.runtimePlugins),
+        ),
 
-themeCompartment.of(
-  themeFor(cellData.runtime, app.runtimePlugins)
-),
+        themeCompartment.of(themeFor(cellData.runtime, app.runtimePlugins)),
 
-        readOnlyCompartment.of(
-          EditorState.readOnly.of(cellData.readonly)
-        ),
+        readOnlyCompartment.of(EditorState.readOnly.of(cellData.readonly)),
 
-        editableCompartment.of(
-          EditorView.editable.of(!cellData.readonly)
-        ),
+        editableCompartment.of(EditorView.editable.of(!cellData.readonly)),
 
-        EditorView.updateListener.of(update => {
+        EditorView.updateListener.of((update) => {
           if (update.docChanged) {
             cellData.code = update.state.doc.toString();
           }
@@ -155,24 +167,23 @@ themeCompartment.of(
         EditorView.domEventHandlers({
           focus: () => {
             actions.setActive();
-          }
+          },
         }),
 
-        ...extraExtensions
-      ]
+        ...extraExtensions,
+      ],
     });
 
     view = new EditorView({
       state,
-      parent: editorDom.element
+      parent: editorDom.element,
     });
 
     const lineHeight = view.defaultLineHeight || 19;
 
-    view.dom.style.minHeight =
-      `${Math.ceil(app.minLines * lineHeight + 8)}px`;
+    view.dom.style.minHeight = `${Math.ceil(app.minLines * lineHeight + 8)}px`;
 
-    app.codeMirrorPlugins.forEach(plugin => {
+    app.codeMirrorPlugins.forEach((plugin) => {
       if (typeof plugin === "function") {
         plugin(view);
       }
@@ -182,10 +193,7 @@ themeCompartment.of(
   return {
     dom: editorDom.element,
 
-    getValue: () =>
-      view
-        ? view.state.doc.toString()
-        : cellData.code,
+    getValue: () => (view ? view.state.doc.toString() : cellData.code),
 
     sync: (isActive, isMarkdownView) => {
       if (!isMarkdownView) {
@@ -195,21 +203,25 @@ themeCompartment.of(
           view.dispatch({
             effects: [
               languageCompartment.reconfigure(
-                languageFor(cellData.type, cellData.runtime, app.runtimePlugins)
+                languageFor(
+                  cellData.type,
+                  cellData.runtime,
+                  app.runtimePlugins,
+                ),
               ),
 
               themeCompartment.reconfigure(
-                themeFor(cellData.runtime, app.runtimePlugins)
+                themeFor(cellData.runtime, app.runtimePlugins),
               ),
 
               readOnlyCompartment.reconfigure(
-                EditorState.readOnly.of(cellData.readonly)
+                EditorState.readOnly.of(cellData.readonly),
               ),
 
               editableCompartment.reconfigure(
-                EditorView.editable.of(!cellData.readonly)
-              )
-            ]
+                EditorView.editable.of(!cellData.readonly),
+              ),
+            ],
           });
 
           const currentValue = view.state.doc.toString();
@@ -219,8 +231,8 @@ themeCompartment.of(
               changes: {
                 from: 0,
                 to: currentValue.length,
-                insert: cellData.code
-              }
+                insert: cellData.code,
+              },
             });
           }
         }
@@ -232,6 +244,6 @@ themeCompartment.of(
         view.destroy();
         view = null;
       }
-    }
+    },
   };
-}
+}

package/src/components/CellItem/index.js

@@ -46,16 +46,16 @@ export function CellItem({ cellData, app, store }) {
     runtimePlugins: app.runtimePlugins 
   });
 
-  const outputGrid = div({ class: "cell-output-grid" }, outPrompt, div({ class: "output-wrapper" }, outputRef));
-  const inputGrid = div({ class: "cell-input-grid" }, inPrompt, bodySlot, controlsEl);
-  const root = div({ class: "cell" }, inputGrid, outputGrid);
+  const inputRow = div({ class: "cell-input-row" }, inPrompt, bodySlot);
+  const outputRow = div({ class: "cell-output-row" }, outPrompt, div({ class: "output-wrapper" }, outputRef));
+  const root = div({ class: "cell" }, inputRow, controlsEl, outputRow);
   root.onClick(() => app.setActiveCell(cellData.id));
 
   cellData._dom = root.element;
   cellData._inPrompt = inPrompt.element;
   cellData._outPrompt = outPrompt.element;
   cellData._bodySlot = bodySlot.element;
-  cellData._outputGrid = outputGrid.element;
+  cellData._outputRow = outputRow.element;
   cellData._setIn = setIn;
 
   app._refreshCell(cellData);

package/src/components/MarkdownView/index.css

@@ -1,7 +1,8 @@
 /* --- MARKDOWN --- */
 
 .ziko-notebook .markdown-rendered-cell {
-  grid-column: 1 / 3;
+  flex: 1 1 0;
+  min-width: 0;
   padding: 8px 12px;
   cursor: pointer;
   min-height: 38px;

package/src/index.css

@@ -32,7 +32,7 @@
   border-left: 4px solid transparent;
   border-radius: 6px;
   padding: 8px;
-  gap: 8px;
+  gap: 2px;
   background: #ffffff;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   position: relative;
@@ -43,17 +43,15 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
-.ziko-notebook .cell-input-grid {
-  display: grid;
-  grid-template-columns: 56px 1fr auto;
+.ziko-notebook .cell-input-row {
+  display: flex;
   align-items: flex-start;
   gap: 8px;
   width: 100%;
 }
 
-.ziko-notebook .cell-output-grid {
-  display: grid;
-  grid-template-columns: 56px 1fr;
+.ziko-notebook .cell-output-row {
+  display: flex;
   align-items: flex-start;
   gap: 8px;
   width: 100%;
@@ -81,7 +79,9 @@
   border-radius: 4px;
   background: var(--bg-editor);
   overflow: hidden;
-  width: 100%;
+  flex: 1 1 0;
+  min-width: 0;
+  width: auto;
   transition: border-color 0.15s ease;
 }
 
@@ -111,13 +111,10 @@
   /* align-items: center; */
   align-items: baseline;
   justify-content: flex-end;
-  grid-column: 1 / -1;
-  gap: 4px;
-  flex-shrink: 0;
+  gap: 2px;
   flex-wrap: wrap;
-  /* border-bottom: 1px solid #f1f5f9; */
-  padding-bottom: 6px;
-  margin-bottom: 2px;
+  margin: 0;
+  padding: 0;
 }
 
 .ziko-notebook .cm-line{
@@ -127,7 +124,9 @@
 /* --- OUTPUT --- */
 
 .ziko-notebook .output-wrapper {
-  width: 100%;
+  flex: 1 1 0;
+  min-width: 0;
+  width: auto;
   padding: 4px 0;
 }
 
@@ -151,17 +150,23 @@
     align-items: baseline;
   }
 
-  .ziko-notebook .cell-input-grid {
-    grid-template-columns: 42px 1fr;
-    grid-template-rows: auto auto;
-  }
-
-  .ziko-notebook .cell-output-grid {
-    grid-template-columns: 42px 1fr;
-  }
-
   .ziko-notebook .prompt {
     font-size: 10px;
     padding-top: 6px;
   }
-}
+}
+
+
+/* TEMP */
+
+.ziko-notebook .cm-editor{
+  margin: 1px;
+  outline: none;
+}
+.ziko-notebook .cm-scroller{
+  margin: 1px;
+  outline: none;
+}
+.ziko-notebook .cm-line{
+  margin: 1px;
+}

package/src/notebook.js

@@ -224,7 +224,7 @@ export class UINotebook extends UIElement {
         _inPrompt: null,
         _outPrompt: null,
         _bodySlot: null,
-        _outputGrid: null,
+        _outputRow: null,
         _outputRef: null,
       };
     });
@@ -484,8 +484,8 @@ export class UINotebook extends UIElement {
     const showOutput =
       cellData.type === "code" && cellData.hasDomOutput;
 
-    cellData._outputGrid.style.display =
-      showOutput ? "grid" : "none";
+    cellData._outputRow.style.display =
+      showOutput ? "flex" : "none";
 
     cellData._outPrompt.textContent = `Out ${countText}:`;
   }
@@ -609,7 +609,7 @@ addCell(type = "code", initialCode = null, afterId = null, readonly = false) {
     _inPrompt: null,
     _outPrompt: null,
     _bodySlot: null,
-    _outputGrid: null,
+    _outputRow: null,
     _outputRef: null,
   };