labnotes 0.0.98__tar.gz → 0.0.99__tar.gz

{labnotes-0.0.98 → labnotes-0.0.99}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: labnotes
-Version: 0.0.98
+Version: 0.0.99
 Summary: Browse experiment designs, notes, and run data from a folder.
 Project-URL: Repository, https://github.com/thekevinscott/labnotes
 Author-email: Kevin Scott <me@thekevinscott.com>

{labnotes-0.0.98 → labnotes-0.0.99}/src/labnotes/static/labnotes.css

@@ -418,7 +418,7 @@ h3 {
   top: 0.5rem;
   right: 0.5rem;
 }
-.cell .run, .note-name .restart {
+.cell .run, .editor .run, .note-name .restart {
   font: inherit;
   font-family: var(--sans);
   font-size: 0.75rem;
@@ -429,8 +429,8 @@ h3 {
   color: var(--ink-2);
   cursor: pointer;
 }
-.cell .run:hover, .note-name .restart:hover { color: var(--accent); border-color: var(--accent); }
-.cell .run:disabled, .note-name .restart:disabled { cursor: progress; opacity: 0.6; }
+.cell .run:hover, .editor .run:hover, .note-name .restart:hover { color: var(--accent); border-color: var(--accent); }
+.cell .run:disabled, .editor .run:disabled, .note-name .restart:disabled { cursor: progress; opacity: 0.6; }
 .note-name:has(.restart) { display: flex; align-items: center; justify-content: flex-end; padding-top: 0.45rem; padding-bottom: 0.45rem; }
 .cell-output { display: block; }
 .cell-output:not(:empty) { margin-top: 0.4rem; padding-left: 0.9rem; border-left: 2px solid var(--accent-soft); overflow-x: auto; }
@@ -438,25 +438,57 @@ h3 {
 .cell-output .stderr, .cell-output .error { color: var(--bad); }
 .cell-output img, .cell-output svg { max-width: 100%; height: auto; }
 
-/* Editing a note in place */
-.prose.editable { cursor: text; }
+/* Editing a note in place: CodeMirror styled to match .prose */
 .edit-status { margin: 0; padding: 0.45rem 1.75rem; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
 .editor { padding: 0.5rem 1.75rem 1.5rem; max-width: 46rem; }
 .editor .cm-editor.cm-focused { outline: none; }
-.editor .cm-content { font-family: var(--serif); font-size: 1.06rem; line-height: 1.68; caret-color: var(--ink); }
+.editor .cm-content { padding: 0.8em 0; font-family: var(--serif); font-size: 1.06rem; line-height: 1.68; caret-color: var(--ink); }
 .editor .cm-line { padding: 0; }
-.editor .md-h1 { font-size: 1.6rem; font-weight: 600; }
-.editor .md-h2 { font-size: 1.3rem; font-weight: 600; }
-.editor .md-h3 { font-size: 1.1rem; font-weight: 600; }
-.editor .md-h4 { font-weight: 600; }
-.editor .md-strong { font-weight: 700; }
-.editor .md-em { font-style: italic; }
-.editor .md-strike { text-decoration: line-through; }
-.editor .md-link { color: var(--accent); }
-.editor .md-code { font-family: var(--mono); font-size: 0.86em; }
-.editor .md-quote { color: var(--ink-2); }
+.editor .cm-line:has(> br:only-child):not(.cm-atomic-fenced-code) { line-height: 0.8em; }
+.editor .cm-atomic-h1, .editor .cm-atomic-h2, .editor .cm-atomic-h3, .editor .cm-atomic-h4, .editor .cm-atomic-h5, .editor .cm-atomic-h6 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; padding: 1em 0 0.5em; }
+.editor .cm-line.cm-atomic-h1 { font-size: 1.6rem; }
+.editor .cm-line.cm-atomic-h2 { font-size: 1.3rem; }
+.editor .cm-line.cm-atomic-h3 { font-size: 1.1rem; }
+.editor .cm-line.cm-atomic-h4, .editor .cm-line.cm-atomic-h5, .editor .cm-line.cm-atomic-h6 { font-size: 1rem; }
+.editor .cm-atomic-strong { font-weight: 700; }
+.editor .cm-atomic-em { font-style: italic; }
+.editor .cm-atomic-strike { text-decoration: line-through; }
+.editor .cm-atomic-inline-code { font-family: var(--mono); font-size: 0.86em; background: var(--chip); padding: 0.1em 0.35em; border-radius: 4px; }
+.editor .cm-atomic-link { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
+.editor .cm-atomic-link::after {
+  content: "↗";
+  margin-left: 0.15em;
+  font-family: var(--sans);
+  font-size: 0.75em;
+  color: var(--ink-3);
+  cursor: pointer;
+}
+.editor .cm-atomic-link:hover::after { color: var(--accent); }
+.editor .cm-line.cm-atomic-blockquote { padding-left: 1rem; border-left: 2px solid var(--rule-strong); color: var(--ink-2); }
+.editor .cm-atomic-list-marker { display: inline-block; width: 0.9em; margin-right: 0.3em; text-align: right; }
+.editor .cm-atomic-list-marker, .editor .cm-atomic-list-marker .md-mark { color: var(--ink); }
+.editor .cm-line.cm-atomic-hr { position: relative; }
+.editor .cm-line.cm-atomic-hr::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--rule); }
+.editor .cm-line.cm-atomic-fenced-code {
+  position: relative;
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  line-height: 1.5;
+  background: var(--paper);
+  padding: 0 1rem;
+  border: solid var(--rule);
+  border-width: 0 1px;
+}
+.editor .cm-line:not(.cm-atomic-fenced-code) + .cm-atomic-fenced-code, .editor .cm-atomic-fenced-code:first-child { border-top-width: 1px; border-radius: 6px 6px 0 0; }
+.editor .cm-atomic-fenced-code:not(:has(+ .cm-atomic-fenced-code)) { border-bottom-width: 1px; border-radius: 0 0 6px 6px; }
+.editor .cm-line:not(.cm-atomic-fenced-code) + .cm-atomic-fenced-code:not(:has(+ .cm-atomic-fenced-code)) { border-radius: 6px; }
+.editor .cm-atomic-fenced-selection { background: var(--accent-soft); }
+.editor .run { position: absolute; z-index: 1; top: 0.5rem; right: 0.5rem; }
+/* CodeMirror measures block widgets without their margins. */
+.editor .cell-below { display: flow-root; padding-bottom: 0.8em; }
+.editor .cell-output pre { margin: 0; font-size: 0.8rem; line-height: 1.5; }
+.editor .cm-line .cm-widgetBuffer { vertical-align: top; }
 .editor .md-mark { color: var(--ink-3); }
-.editor .md-code-line { font-family: var(--mono); font-size: 0.8rem; line-height: 1.5; background: var(--paper); padding: 0 1rem; }
 .editor .py-keyword { color: var(--accent); }
 .editor .py-string { color: var(--good); }
 .editor .py-comment { color: var(--ink-3); font-style: italic; }

{labnotes-0.0.98 → labnotes-0.0.99}/src/labnotes/static/new-note.js

@@ -22,8 +22,6 @@ function show(note, button) {
 }
 
 for (const button of document.querySelectorAll(".new-note")) {
-  // An open editor closes, and reloads the page, on a mousedown outside it.
-  button.addEventListener("mousedown", (event) => event.stopPropagation());
   button.addEventListener("click", async () => {
     button.disabled = true;
     const response = await fetch(button.dataset.url, {

{labnotes-0.0.98 → labnotes-0.0.99}/src/labnotes/static/note-edit.js

@@ -1,35 +1,28 @@
 let detach = () => {};
 
-export function attach(note, openNow) {
+export function attach(note, focus) {
   detach();
   const prose = note.querySelector(".prose");
   const status = note.querySelector(".edit-status");
-  const editor = import(note.dataset.editor);
   const source = JSON.parse(note.querySelector(".note-source").textContent);
   let editing = null;
   let attached = true;
 
-  editor.then(
-    () => prose.classList.add("editable"),
+  import(note.dataset.editor).then(
+    ({ edit }) => {
+      if (!attached) return;
+      editing = edit(note, prose, status);
+      if (focus) editing.view.focus();
+    },
     () => {},
   );
 
-  const open = async (event) => {
-    if (event.target.closest("a, button, output") || getSelection().toString()) return;
-    const { edit } = await editor;
-    if (editing || !attached) return;
-    prose.removeEventListener("click", open);
-    editing = edit(note, prose, status);
-  };
-  prose.addEventListener("click", open);
-  if (openNow) open({ target: prose });
-
   const changes = new EventSource(note.dataset.changesUrl);
   changes.addEventListener("message", (event) => {
     if (JSON.parse(event.data) !== note.dataset.note) return;
     if (editing) return editing.pull();
-    // A touch or a duplicate event leaves the text alone, and reloading then
-    // would swallow a click that is opening the editor.
+    // Without the editor the note is rendered HTML. A touch or a duplicate
+    // event leaves the text alone, and reloading then is wasted.
     fetch(note.dataset.saveUrl, { cache: "no-store" })
       .then((response) => response.text())
       .then((text) => {

{labnotes-0.0.98 → labnotes-0.0.99}/src/labnotes/static/note-editor.js

@@ -4,12 +4,14 @@ import {
   HighlightStyle,
   Language,
   defineLanguageFacet,
+  ensureSyntaxTree,
   languageDataProp,
   syntaxHighlighting,
   syntaxTree,
 } from "@codemirror/language";
-import { EditorState, RangeSetBuilder } from "@codemirror/state";
-import { Decoration, EditorView, ViewPlugin, keymap } from "@codemirror/view";
+import { EditorState, StateField } from "@codemirror/state";
+import { Decoration, EditorView, WidgetType, keymap } from "@codemirror/view";
+import { inlinePreview } from "@atomic-editor/editor/inline-preview";
 import { tags } from "@lezer/highlight";
 import { GFM, parseCode, parser } from "@lezer/markdown";
 import { DIFF_DELETE, DIFF_EQUAL, diff_match_patch } from "diff-match-patch";
@@ -31,16 +33,6 @@ const markdown = new Language(
 );
 
 const style = HighlightStyle.define([
-  { tag: tags.heading1, class: "md-h1" },
-  { tag: tags.heading2, class: "md-h2" },
-  { tag: tags.heading3, class: "md-h3" },
-  { tag: [tags.heading4, tags.heading5, tags.heading6], class: "md-h4" },
-  { tag: tags.strong, class: "md-strong" },
-  { tag: tags.emphasis, class: "md-em" },
-  { tag: tags.strikethrough, class: "md-strike" },
-  { tag: [tags.link, tags.url], class: "md-link" },
-  { tag: tags.monospace, class: "md-code" },
-  { tag: tags.quote, class: "md-quote" },
   { tag: [tags.processingInstruction, tags.contentSeparator], class: "md-mark" },
   { tag: [tags.keyword, tags.operatorKeyword, tags.bool, tags.null], class: "py-keyword" },
   { tag: [tags.string, tags.special(tags.string)], class: "py-string" },
@@ -49,54 +41,86 @@ const style = HighlightStyle.define([
   { tag: [tags.function(tags.variableName), tags.definition(tags.variableName)], class: "py-name" },
 ]);
 
-// Markup is hidden except on the lines the cursor is on, as in Obsidian.
-const HIDDEN = new Set(["HeaderMark", "EmphasisMark", "CodeMark", "StrikethroughMark"]);
-const hide = Decoration.replace({});
-const codeLine = Decoration.line({ class: "md-code-line" });
-
-function decorate(view) {
-  const builder = new RangeSetBuilder();
-  const { state } = view;
-  const active = new Set();
-  for (const range of state.selection.ranges) {
-    for (let n = state.doc.lineAt(range.from).number; n <= state.doc.lineAt(range.to).number; n++) active.add(n);
+class RunButton extends WidgetType {
+  constructor(block, run) {
+    super();
+    this.block = block;
+    this.run = run;
   }
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      from,
-      to,
-      enter(node) {
-        if (node.name === "FencedCode") {
-          for (let at = node.from; at <= node.to; ) {
-            const line = state.doc.lineAt(at);
-            builder.add(line.from, line.from, codeLine);
-            at = line.to + 1;
-          }
-          return false;
-        }
-        if (!HIDDEN.has(node.name) || active.has(state.doc.lineAt(node.from).number)) return;
-        let end = node.to;
-        if (node.name === "HeaderMark" && state.doc.sliceString(end, end + 1) === " ") end += 1;
-        builder.add(node.from, end, hide);
-      },
-    });
+  eq(other) {
+    return other.block === this.block;
+  }
+  toDOM() {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "run";
+    button.textContent = "Run";
+    button.addEventListener("click", () => this.run(this.block, button));
+    return button;
+  }
+  ignoreEvent() {
+    return true;
   }
-  return builder.finish();
 }
 
-const livePreview = ViewPlugin.fromClass(
-  class {
-    constructor(view) {
-      this.decorations = decorate(view);
+class CellOutput extends WidgetType {
+  constructor(block, outputs) {
+    super();
+    this.block = block;
+    this.outputs = outputs;
+  }
+  eq(other) {
+    return other.block === this.block;
+  }
+  toDOM() {
+    const cell = document.createElement("div");
+    cell.className = "cell-below";
+    if (!this.outputs.has(this.block)) {
+      const output = document.createElement("output");
+      output.className = "cell-output";
+      this.outputs.set(this.block, output);
     }
-    update(update) {
-      if (update.docChanged || update.selectionSet || update.viewportChanged) {
-        this.decorations = decorate(update.view);
+    cell.append(this.outputs.get(this.block));
+    return cell;
+  }
+  ignoreEvent() {
+    return true;
+  }
+}
+
+// Numbered in document order, as python_blocks numbers them on the server.
+function cellWidgets(state, run, outputs) {
+  const widgets = [];
+  let block = 0;
+  const tree = ensureSyntaxTree(state, state.doc.length, 200) ?? syntaxTree(state);
+  tree.iterate({
+    enter(node) {
+      if (node.name !== "FencedCode") return;
+      const info = node.node.getChild("CodeInfo");
+      if (info && state.doc.sliceString(info.from, info.to).split(/\s/)[0] === "python") {
+        const open = state.doc.lineAt(node.from);
+        widgets.push(Decoration.widget({ widget: new RunButton(block, run), side: 1 }).range(open.to));
+        widgets.push(
+          Decoration.widget({ widget: new CellOutput(block, outputs), block: true, side: 1 }).range(node.to),
+        );
+        block += 1;
       }
-    }
-  },
-  { decorations: (plugin) => plugin.decorations },
-);
+      return false;
+    },
+  });
+  return Decoration.set(widgets, true);
+}
+
+function cells(run, outputs) {
+  return StateField.define({
+    create: (state) => cellWidgets(state, run, outputs),
+    update(widgets, tr) {
+      if (!tr.docChanged && syntaxTree(tr.state) === syntaxTree(tr.startState)) return widgets;
+      return cellWidgets(tr.state, run, outputs);
+    },
+    provide: (field) => EditorView.decorations.from(field),
+  });
+}
 
 function show(status, message) {
   status.textContent = message;
@@ -196,15 +220,33 @@ export function edit(note, prose, status) {
 
   const save = () => run(push);
 
-  const close = async () => {
-    await save();
-    document.removeEventListener("mousedown", outside);
-    location.reload();
-  };
-  const outside = (event) => {
-    if (!note.contains(event.target)) close();
+  // The rendered note's outputs move into the editor, so a run started
+  // before the editor loaded still shows its result.
+  const outputs = new Map();
+  for (const cell of prose.querySelectorAll(".cell")) {
+    outputs.set(Number(cell.dataset.block), cell.querySelector(".cell-output"));
+  }
+
+  // The server runs the block from the file, so unsaved edits go first.
+  const runCell = async (block, button) => {
+    button.disabled = true;
+    button.textContent = "Running";
+    try {
+      await save();
+      const response = await fetch(note.dataset.runUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ block }),
+      });
+      outputs.get(block).innerHTML = response.ok
+        ? await response.text()
+        : `<pre class="error">${response.status} ${response.statusText}</pre>`;
+      view.requestMeasure();
+    } finally {
+      button.disabled = false;
+      button.textContent = "Run";
+    }
   };
-  document.addEventListener("mousedown", outside);
 
   const view = new EditorView({
     parent: host,
@@ -212,10 +254,15 @@ export function edit(note, prose, status) {
       doc: base,
       extensions: [
         history(),
-        keymap.of([{ key: "Escape", run: () => (close(), true) }, ...defaultKeymap, ...historyKeymap]),
+        keymap.of([
+          { key: "Escape", run: () => (view.contentDOM.blur(), true) },
+          ...defaultKeymap,
+          ...historyKeymap,
+        ]),
         markdown,
         syntaxHighlighting(style),
-        livePreview,
+        inlinePreview({ onLinkClick: (url) => location.assign(new URL(url, location.href)) }),
+        cells(runCell, outputs),
         EditorView.lineWrapping,
         EditorView.contentAttributes.of({ "aria-label": "Note" }),
         EditorView.updateListener.of((update) => {
@@ -227,12 +274,9 @@ export function edit(note, prose, status) {
       ],
     }),
   });
-  view.focus();
   return {
+    view,
     pull: () => run(pull),
-    detach: () => {
-      document.removeEventListener("mousedown", outside);
-      save();
-    },
+    detach: () => save(),
   };
 }

{labnotes-0.0.98 → labnotes-0.0.99}/src/labnotes/templates/editor_imports.html

@@ -2,6 +2,7 @@
 <script type="importmap">
 {
   "imports": {
+    "@atomic-editor/editor/inline-preview": "https://esm.sh/*@atomic-editor/editor@0.6.2/dist/inline-preview.js",
     "@codemirror/autocomplete": "https://esm.sh/*@codemirror/autocomplete@6.20.4",
     "@codemirror/commands": "https://esm.sh/*@codemirror/commands@6.11.1",
     "@codemirror/lang-python": "https://esm.sh/*@codemirror/lang-python@6.2.1",