@zikojs/notebook 0.15.0 → 0.15.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 ZAKARIA ELALAOUI
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 ZAKARIA ELALAOUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zikojs/notebook",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "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,302 +1,302 @@
-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 { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { javascript } from "@codemirror/lang-javascript";
-import { markdown } from "@codemirror/lang-markdown";
-import { tags } from "ziko/dom";
-
-const { div } = tags;
-
-const getRuntimePlugin = (runtime, runtimePlugins = []) =>
-  runtimePlugins.find((plugin) => plugin?.name === runtime);
-
-const languageFor = (type, runtime, runtimePlugins = []) => {
-  if (type === "markdown") return markdown();
-
-  const plugin = getRuntimePlugin(runtime, runtimePlugins);
-
-  return plugin?.language ?? javascript();
-};
-
-const themeFor = (runtime, runtimePlugins = []) => {
-  const plugin = getRuntimePlugin(runtime, runtimePlugins);
-
-  return plugin?.theme ?? [];
-};
-export function createCodeEditor(app, cellData, actions) {
-  const editorDom = div({ class: "input-wrapper" });
-
-  const languageCompartment = new Compartment();
-  const themeCompartment = new Compartment();
-  const readOnlyCompartment = new Compartment();
-  const editableCompartment = new Compartment();
-
-  let view = null;
-
-  const buildPluginKeymap = () => {
-    const bindings = [];
-
-    app.codeMirrorPlugins.forEach((plugin) => {
-      if (plugin && typeof plugin === "object" && plugin.extraKeys) {
-        Object.entries(plugin.extraKeys).forEach(([key, run]) => {
-          bindings.push({
-            key,
-            run: () => {
-              run();
-              return true;
-            },
-          });
-        });
-      }
-    });
-
-    return bindings;
-  };
-
-  const initEditor = () => {
-    if (view) return;
-
-    const shortcutKeymap = keymap.of([
-      {
-        key: "Ctrl-ArrowDown",
-        run: () => actions.moveToAdjacentCell(1),
-      },
-      {
-        key: "Ctrl-ArrowUp",
-        run: () => actions.moveToAdjacentCell(-1),
-      },
-      {
-        key: "ArrowDown",
-        run: (editorView) => {
-          const selection = editorView.state.selection.main;
-          const line = editorView.state.doc.lineAt(selection.head);
-
-          if (
-            selection.empty &&
-            line.number === editorView.state.doc.lines
-          ) {
-            return actions.moveToAdjacentCell(1);
-          }
-
-          return false;
-        },
-      },
-      {
-        key: "ArrowUp",
-        run: (editorView) => {
-          const selection = editorView.state.selection.main;
-          const line = editorView.state.doc.lineAt(selection.head);
-
-          if (selection.empty && line.number === 1) {
-            return actions.moveToAdjacentCell(-1);
-          }
-
-          return false;
-        },
-      },
-      {
-        key: "Shift-Enter",
-        run: () => {
-          actions.runCode(true);
-          return true;
-        },
-      },
-      {
-        key: "Ctrl-Enter",
-        mac: "Cmd-Enter",
-        run: () => {
-          actions.runCode(false);
-          return true;
-        },
-      },
-      {
-        key: "Ctrl-Shift-d",
-        mac: "Cmd-Shift-d",
-        run: () => {
-          app.notebookGlobalShortcuts.deleteActive();
-          return true;
-        },
-      },
-      {
-        key: "Ctrl-Shift-m",
-        mac: "Cmd-Shift-m",
-        run: () => {
-          app.notebookGlobalShortcuts.addMdBelow();
-          return true;
-        },
-      },
-      {
-        key: "Ctrl-Shift-y",
-        mac: "Cmd-Shift-y",
-        run: () => {
-          app.notebookGlobalShortcuts.addCodeBelow();
-          return true;
-        },
-      },
-      indentWithTab,
-      ...buildPluginKeymap(),
-      ...closeBracketsKeymap,
-      ...defaultKeymap,
-      ...historyKeymap,
-    ]);
-
-    const extraExtensions = Array.isArray(app.codeMirrorConfig)
-      ? app.codeMirrorConfig
-      : [];
-
-    const state = EditorState.create({
-      doc: cellData.code,
-      extensions: [
-        // 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),
-        ),
-
-        themeCompartment.of(themeFor(cellData.runtime, app.runtimePlugins)),
-
-        readOnlyCompartment.of(EditorState.readOnly.of(cellData.readonly)),
-
-        editableCompartment.of(EditorView.editable.of(!cellData.readonly)),
-
-        EditorView.updateListener.of((update) => {
-          if (update.docChanged) {
-            cellData.code = update.state.doc.toString();
-          }
-        }),
-
-        EditorView.domEventHandlers({
-          focus: () => {
-            actions.setActive();
-          },
-        }),
-
-        ...extraExtensions,
-      ],
-    });
-
-    view = new EditorView({
-      state,
-      parent: editorDom.element,
-    });
-
-    const lineHeight = view.defaultLineHeight || 19;
-
-    view.dom.style.minHeight = `${Math.ceil(app.minLines * lineHeight + 8)}px`;
-
-    app.codeMirrorPlugins.forEach((plugin) => {
-      if (typeof plugin === "function") {
-        plugin(view);
-      }
-    });
-  };
-
-  return {
-    dom: editorDom.element,
-
-    getValue: () => (view ? view.state.doc.toString() : cellData.code),
-
-    focusAt: (position) => {
-      requestAnimationFrame(() => {
-        if (!view) return;
-
-        const cursor = Math.max(
-          0,
-          Math.min(position, view.state.doc.length),
-        );
-
-        view.dispatch({
-          selection: { anchor: cursor },
-        });
-        view.focus();
-      });
-    },
-
-    sync: (isActive, isMarkdownView) => {
-      if (!isMarkdownView) {
-        if (!view) {
-          requestAnimationFrame(() => initEditor());
-        } else {
-          view.dispatch({
-            effects: [
-              languageCompartment.reconfigure(
-                languageFor(
-                  cellData.type,
-                  cellData.runtime,
-                  app.runtimePlugins,
-                ),
-              ),
-
-              themeCompartment.reconfigure(
-                themeFor(cellData.runtime, app.runtimePlugins),
-              ),
-
-              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;
-      }
-    },
-  };
-}
+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 { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { javascript } from "@codemirror/lang-javascript";
+import { markdown } from "@codemirror/lang-markdown";
+import { tags } from "ziko/dom";
+
+const { div } = tags;
+
+const getRuntimePlugin = (runtime, runtimePlugins = []) =>
+  runtimePlugins.find((plugin) => plugin?.name === runtime);
+
+const languageFor = (type, runtime, runtimePlugins = []) => {
+  if (type === "markdown") return markdown();
+
+  const plugin = getRuntimePlugin(runtime, runtimePlugins);
+
+  return plugin?.language ?? javascript();
+};
+
+const themeFor = (runtime, runtimePlugins = []) => {
+  const plugin = getRuntimePlugin(runtime, runtimePlugins);
+
+  return plugin?.theme ?? [];
+};
+export function createCodeEditor(app, cellData, actions) {
+  const editorDom = div({ class: "input-wrapper" });
+
+  const languageCompartment = new Compartment();
+  const themeCompartment = new Compartment();
+  const readOnlyCompartment = new Compartment();
+  const editableCompartment = new Compartment();
+
+  let view = null;
+
+  const buildPluginKeymap = () => {
+    const bindings = [];
+
+    app.codeMirrorPlugins.forEach((plugin) => {
+      if (plugin && typeof plugin === "object" && plugin.extraKeys) {
+        Object.entries(plugin.extraKeys).forEach(([key, run]) => {
+          bindings.push({
+            key,
+            run: () => {
+              run();
+              return true;
+            },
+          });
+        });
+      }
+    });
+
+    return bindings;
+  };
+
+  const initEditor = () => {
+    if (view) return;
+
+    const shortcutKeymap = keymap.of([
+      {
+        key: "Ctrl-ArrowDown",
+        run: () => actions.moveToAdjacentCell(1),
+      },
+      {
+        key: "Ctrl-ArrowUp",
+        run: () => actions.moveToAdjacentCell(-1),
+      },
+      {
+        key: "ArrowDown",
+        run: (editorView) => {
+          const selection = editorView.state.selection.main;
+          const line = editorView.state.doc.lineAt(selection.head);
+
+          if (
+            selection.empty &&
+            line.number === editorView.state.doc.lines
+          ) {
+            return actions.moveToAdjacentCell(1);
+          }
+
+          return false;
+        },
+      },
+      {
+        key: "ArrowUp",
+        run: (editorView) => {
+          const selection = editorView.state.selection.main;
+          const line = editorView.state.doc.lineAt(selection.head);
+
+          if (selection.empty && line.number === 1) {
+            return actions.moveToAdjacentCell(-1);
+          }
+
+          return false;
+        },
+      },
+      {
+        key: "Shift-Enter",
+        run: () => {
+          actions.runCode(true);
+          return true;
+        },
+      },
+      {
+        key: "Ctrl-Enter",
+        mac: "Cmd-Enter",
+        run: () => {
+          actions.runCode(false);
+          return true;
+        },
+      },
+      {
+        key: "Ctrl-Shift-d",
+        mac: "Cmd-Shift-d",
+        run: () => {
+          app.notebookGlobalShortcuts.deleteActive();
+          return true;
+        },
+      },
+      {
+        key: "Ctrl-Shift-m",
+        mac: "Cmd-Shift-m",
+        run: () => {
+          app.notebookGlobalShortcuts.addMdBelow();
+          return true;
+        },
+      },
+      {
+        key: "Ctrl-Shift-y",
+        mac: "Cmd-Shift-y",
+        run: () => {
+          app.notebookGlobalShortcuts.addCodeBelow();
+          return true;
+        },
+      },
+      indentWithTab,
+      ...buildPluginKeymap(),
+      ...closeBracketsKeymap,
+      ...defaultKeymap,
+      ...historyKeymap,
+    ]);
+
+    const extraExtensions = Array.isArray(app.codeMirrorConfig)
+      ? app.codeMirrorConfig
+      : [];
+
+    const state = EditorState.create({
+      doc: cellData.code,
+      extensions: [
+        // 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),
+        ),
+
+        themeCompartment.of(themeFor(cellData.runtime, app.runtimePlugins)),
+
+        readOnlyCompartment.of(EditorState.readOnly.of(cellData.readonly)),
+
+        editableCompartment.of(EditorView.editable.of(!cellData.readonly)),
+
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            cellData.code = update.state.doc.toString();
+          }
+        }),
+
+        EditorView.domEventHandlers({
+          focus: () => {
+            actions.setActive();
+          },
+        }),
+
+        ...extraExtensions,
+      ],
+    });
+
+    view = new EditorView({
+      state,
+      parent: editorDom.element,
+    });
+
+    const lineHeight = view.defaultLineHeight || 19;
+
+    view.dom.style.minHeight = `${Math.ceil(app.minLines * lineHeight + 8)}px`;
+
+    app.codeMirrorPlugins.forEach((plugin) => {
+      if (typeof plugin === "function") {
+        plugin(view);
+      }
+    });
+  };
+
+  return {
+    dom: editorDom.element,
+
+    getValue: () => (view ? view.state.doc.toString() : cellData.code),
+
+    focusAt: (position) => {
+      requestAnimationFrame(() => {
+        if (!view) return;
+
+        const cursor = Math.max(
+          0,
+          Math.min(position, view.state.doc.length),
+        );
+
+        view.dispatch({
+          selection: { anchor: cursor },
+        });
+        view.focus();
+      });
+    },
+
+    sync: (isActive, isMarkdownView) => {
+      if (!isMarkdownView) {
+        if (!view) {
+          requestAnimationFrame(() => initEditor());
+        } else {
+          view.dispatch({
+            effects: [
+              languageCompartment.reconfigure(
+                languageFor(
+                  cellData.type,
+                  cellData.runtime,
+                  app.runtimePlugins,
+                ),
+              ),
+
+              themeCompartment.reconfigure(
+                themeFor(cellData.runtime, app.runtimePlugins),
+              ),
+
+              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;
+      }
+    },
+  };
+}