labnotes 0.0.52__tar.gz → 0.0.53__tar.gz

{labnotes-0.0.52 → labnotes-0.0.53}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: labnotes
-Version: 0.0.52
+Version: 0.0.53
 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.52 → labnotes-0.0.53}/src/labnotes/load_experiment.py

@@ -56,6 +56,7 @@ async def load_experiment(
         "notes": [
             {
                 "name": note["name"],
+                "content": note["content"],
                 "html": render_markdown(
                     note["content"], outputs_for(note["name"], note["content"])
                 ),

{labnotes-0.0.52 → labnotes-0.0.53}/src/labnotes/static/labnotes.css

@@ -424,3 +424,27 @@ h3 {
 .cell-output pre { background: none; border: 0; padding: 0.3rem 0; }
 .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; }
+.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-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 .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; }
+.editor .py-number { color: var(--bad); }

labnotes-0.0.53/src/labnotes/static/note-edit.js

@@ -0,0 +1,23 @@
+const note = document.querySelector(".note[data-save-url]");
+
+if (note) {
+  const prose = note.querySelector(".prose");
+  const status = note.querySelector(".edit-status");
+  const editor = import(note.dataset.editor);
+  editor.then(
+    () => prose.classList.add("editable"),
+    () => {
+      status.textContent = "Editing needs the network: the editor loads from esm.sh.";
+      status.hidden = false;
+    },
+  );
+
+  const open = async (event) => {
+    if (event.target.closest("a, button, output") || getSelection().toString()) return;
+    const { edit } = await editor;
+    if (!prose.isConnected) return;
+    prose.removeEventListener("click", open);
+    edit(note, prose, status);
+  };
+  prose.addEventListener("click", open);
+}

labnotes-0.0.53/src/labnotes/static/note-editor.js

@@ -0,0 +1,169 @@
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { pythonLanguage } from "@codemirror/lang-python";
+import {
+  HighlightStyle,
+  Language,
+  defineLanguageFacet,
+  languageDataProp,
+  syntaxHighlighting,
+  syntaxTree,
+} from "@codemirror/language";
+import { EditorState, RangeSetBuilder } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, keymap } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import { GFM, parseCode, parser } from "@lezer/markdown";
+
+// Built from @lezer/markdown rather than @codemirror/lang-markdown, which
+// imports HTML, CSS and JavaScript support that notes never use.
+const data = defineLanguageFacet();
+const markdown = new Language(
+  data,
+  parser.configure([
+    GFM,
+    parseCode({
+      codeParser: (info) => (info.split(/\s/)[0] === "python" ? pythonLanguage.parser : null),
+    }),
+    { props: [languageDataProp.add({ Document: data })] },
+  ]),
+  [],
+  "markdown",
+);
+
+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" },
+  { tag: tags.comment, class: "py-comment" },
+  { tag: tags.number, class: "py-number" },
+  { 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);
+  }
+  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);
+      },
+    });
+  }
+  return builder.finish();
+}
+
+const livePreview = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = decorate(view);
+    }
+    update(update) {
+      if (update.docChanged || update.selectionSet || update.viewportChanged) {
+        this.decorations = decorate(update.view);
+      }
+    }
+  },
+  { decorations: (plugin) => plugin.decorations },
+);
+
+function show(status, message) {
+  status.textContent = message;
+  status.hidden = false;
+}
+
+export function edit(note, prose, status) {
+  let base = JSON.parse(note.querySelector(".note-source").textContent);
+  let stale = false;
+  let timer;
+  let queue = Promise.resolve();
+
+  const host = document.createElement("div");
+  host.className = "editor";
+  prose.replaceWith(host);
+
+  const save = () =>
+    (queue = queue
+      .then(async () => {
+        clearTimeout(timer);
+        const content = view.state.doc.toString();
+        if (stale || content === base) return;
+        const response = await fetch(note.dataset.saveUrl, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ base, content }),
+        });
+        if (response.status === 409) {
+          stale = true;
+          show(status, "This note changed on disk, so your edits are not saved. Copy them, then reload.");
+        } else if (response.ok) {
+          base = content;
+        } else {
+          show(status, `Not saved: ${response.status} ${response.statusText}`);
+        }
+      })
+      .catch((error) => show(status, `Not saved: ${error.message}`)));
+
+  const close = async () => {
+    await save();
+    if (stale) return;
+    document.removeEventListener("mousedown", outside);
+    location.reload();
+  };
+  const outside = (event) => {
+    if (!note.contains(event.target)) close();
+  };
+  document.addEventListener("mousedown", outside);
+
+  const view = new EditorView({
+    parent: host,
+    state: EditorState.create({
+      doc: base,
+      extensions: [
+        history(),
+        keymap.of([{ key: "Escape", run: () => (close(), true) }, ...defaultKeymap, ...historyKeymap]),
+        markdown,
+        syntaxHighlighting(style),
+        livePreview,
+        EditorView.lineWrapping,
+        EditorView.contentAttributes.of({ "aria-label": "Note" }),
+        EditorView.updateListener.of((update) => {
+          if (!update.docChanged) return;
+          clearTimeout(timer);
+          timer = setTimeout(save, 500);
+        }),
+      ],
+    }),
+  });
+  view.focus();
+}

labnotes-0.0.53/src/labnotes/templates/editor_imports.html

@@ -0,0 +1,23 @@
+{# Every package is fetched with its imports left bare (the * prefix) and pinned here, so each loads once. Two copies of @codemirror/state break CodeMirror. #}
+<script type="importmap">
+{
+  "imports": {
+    "@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",
+    "@codemirror/language": "https://esm.sh/*@codemirror/language@6.13.1",
+    "@codemirror/state": "https://esm.sh/*@codemirror/state@6.7.6",
+    "@codemirror/streamparser": "https://esm.sh/*@codemirror/streamparser@6.0.0",
+    "@codemirror/view": "https://esm.sh/*@codemirror/view@6.43.15",
+    "@lezer/common": "https://esm.sh/*@lezer/common@1.5.3",
+    "@lezer/highlight": "https://esm.sh/*@lezer/highlight@1.2.5",
+    "@lezer/lr": "https://esm.sh/*@lezer/lr@1.4.11",
+    "@lezer/markdown": "https://esm.sh/*@lezer/markdown@1.8.1",
+    "@lezer/python": "https://esm.sh/*@lezer/python@1.1.19",
+    "@marijn/find-cluster-break": "https://esm.sh/*@marijn/find-cluster-break@1.0.4",
+    "crelt": "https://esm.sh/*crelt@1.0.7",
+    "style-mod": "https://esm.sh/*style-mod@4.1.4",
+    "w3c-keyname": "https://esm.sh/*w3c-keyname@2.2.8"
+  }
+}
+</script>

{labnotes-0.0.52 → labnotes-0.0.53}/src/labnotes/templates/experiment.html

@@ -37,11 +37,15 @@
 <nav class="tabs sub">
   {% for each in e.notes %}<a href="?tab=notebooks&amp;note={{ each.name | urlencode }}"{% if each.name == note.name %} aria-current="page"{% endif %}>{{ each.name }}</a>{% endfor %}
 </nav>
-<article class="note" data-run-url="{{ url_for('run_block', name=e.name, note=note.name) }}" data-restart-url="{{ url_for('restart_kernel', name=e.name, note=note.name) }}">
+<article class="note" data-run-url="{{ url_for('run_block', name=e.name, note=note.name) }}" data-restart-url="{{ url_for('restart_kernel', name=e.name, note=note.name) }}" data-save-url="{{ url_for('put_note', name=e.name, note=note.name) }}" data-editor="{{ asset('note-editor.js') }}">
   {% if note.runnable %}<header class="note-name"><button type="button" class="restart" title="Stop this note's Python kernel. The next Run starts a fresh one.">Restart</button></header>{% endif %}
+  <p class="edit-status" role="status" hidden></p>
   <div class="prose">{{ note.html | safe }}</div>
+  <script type="application/json" class="note-source">{{ note.content | tojson }}</script>
 </article>
+{% include "editor_imports.html" %}
 <script src="{{ asset('run-cell.js') }}" defer></script>
+<script type="module" src="{{ asset('note-edit.js') }}"></script>
 {% else %}
 <p class="empty">No notebooks yet.</p>
 {% endif %}