pi-weave 0.2.2 → 0.2.4

package/src/web/client/note/Note.tsx

@@ -8,8 +8,8 @@
  *
  * ## The editor
  *
- * Clicking the prose swaps it for a `<textarea>`; `draft` is `null` in read
- * mode, so text and mode cannot disagree. No reducer — the 686-line one that
+ * The explicit Edit control swaps the body for a `<textarea>`; `draft` is
+ * `null` in read mode, so text and mode cannot disagree. No reducer — the 686-line one that
  * stood here resolved conflicts against a revision the server no longer
  * issues. Being component state, the draft is out of the 2 s poll's reach;
  * the shell guards it through the `editor` slot below.
@@ -23,7 +23,7 @@
  * ## Wikilink preview (P6.3)
  *
  * Hovering or focusing a wikilink opens a small card for its target. The
- * delegated pattern the click handler established extends to the card for
+ * body's delegated handlers extend to the card for
  * free — `mouseover`, `focusin` and `keydown` are read through the same
  * ancestor walk (`previewAnchorOf`), the state machine is `reducePreview`,
  * and this file's only contribution is forwarding the pointer's viewport
@@ -46,17 +46,18 @@ import {
   artifactKeyOfNode,
   DISCARD_PROMPT,
   DONE_LABEL,
+  EDIT_LABEL,
   EDITED_WORD,
   EDITOR_ARIA_LABEL,
   EMPTY_PREVIEW,
   PREVIEW_ID,
   SAVE_LABEL,
   SAVING_LABEL,
+  TASK_CHECKBOX_ATTR,
   WIKILINK_ATTR,
   draftDirty,
   draftMoved,
   hasTextSelection,
-  noteClickAction,
   saveLanded,
   noteEmptyMessage,
   noteHeader,
@@ -67,6 +68,9 @@ import {
   renderNote,
   selectedArtifactPath,
   tagLabel,
+  taskCheckboxIndexOf,
+  taskCheckboxLabel,
+  toggleTaskCheckbox,
   wikiIndex,
   wikilinkTargetOf,
 } from "./note.model";
@@ -117,30 +121,28 @@ function Header({
   open,
   editing,
   saving,
-  onDone,
+  onToggle,
   onSave,
 }: {
   view: NoteHeaderView;
   open: () => void;
   editing: boolean;
   saving: boolean;
-  onDone: () => void;
+  onToggle: () => void;
   onSave: () => void;
 }) {
   return (
     <header class="weave-note-head">
       <h3 class="weave-note-title">{view.title}</h3>
       <p class="weave-note-meta">
-        {/* Nothing in read mode: the prose is the way in. The way out needs a
-            control, because "click the text" cannot also mean "stop". */}
         {editing ? (
           <>
             <button type="button" class="weave-note-save" disabled={saving} onClick={onSave}>
               {saving ? SAVING_LABEL : SAVE_LABEL}
             </button>
-            <button type="button" class="weave-note-edit" onClick={onDone}>{DONE_LABEL}</button>
+            <button type="button" class="weave-note-edit" onClick={onToggle}>{DONE_LABEL}</button>
           </>
-        ) : null}
+        ) : <button type="button" class="weave-note-edit" onClick={onToggle}>{EDIT_LABEL}</button>}
         <button type="button" class="weave-note-open" title="Open in $EDITOR" aria-label="Open in $EDITOR" onClick={open}>
           <span class="weave-note-open-mark" aria-hidden="true">↗</span>
         </button>
@@ -190,6 +192,12 @@ export function Note(props: NoteProps) {
   const dispatch = (event: PreviewEvent): void => void sendPreview((state) => reducePreview(state, event));
   const bodyRef = useRef<HTMLDivElement | null>(null);
   const cardRef = useRef<HTMLDivElement | null>(null);
+  const taskSaving = useRef(false);
+  const taskSource = useRef<{ slug: string; serverBody: string; body: string } | null>(null);
+  if (note === null) taskSource.current = null;
+  else if (taskSource.current === null || taskSource.current.slug !== note.slug || taskSource.current.serverBody !== note.body) {
+    taskSource.current = { slug: note.slug, serverBody: note.body, body: note.body };
+  }
 
   const [draft, setDraft] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
@@ -234,6 +242,33 @@ export function Note(props: NoteProps) {
     else close();
   };
 
+  const saveTask = async (checkbox: HTMLInputElement, taskIndex: number): Promise<void> => {
+    const source = taskSource.current;
+    const restore = (): void => {
+      checkbox.checked = !checkbox.checked;
+      checkbox.setAttribute("aria-label", taskCheckboxLabel(checkbox.checked));
+    };
+    if (source === null || taskSaving.current) {
+      restore();
+      return;
+    }
+    const body = toggleTaskCheckbox(source.body, taskIndex);
+    if (body === null) {
+      restore();
+      return;
+    }
+
+    const inputs = [...(bodyRef.current?.querySelectorAll<HTMLInputElement>(`input[${TASK_CHECKBOX_ATTR}]`) ?? [])];
+    taskSaving.current = true;
+    checkbox.setAttribute("aria-label", taskCheckboxLabel(checkbox.checked));
+    for (const input of inputs) input.disabled = true;
+    const ok = await props.onSave(source.slug, body);
+    if (ok) source.body = body;
+    else restore();
+    for (const input of inputs) input.disabled = false;
+    taskSaving.current = false;
+  };
+
   const toggleEdit = (): void => {
     if (note === null) return;
     if (draft === null) open(note.body);
@@ -326,7 +361,7 @@ export function Note(props: NoteProps) {
         open={() => props.onOpen(note.slug)}
         editing={draft !== null}
         saving={saving}
-        onDone={toggleEdit}
+        onToggle={toggleEdit}
         onSave={() => void save()}
       />
       {draft !== null ? (
@@ -381,16 +416,20 @@ export function Note(props: NoteProps) {
           }}
           onBlur={() => dispatch({ type: "hide" })}
           onClick={(event) => {
-            // Three gestures, one element; `noteClickAction` owns the order.
+            const checkbox = event.target as HTMLInputElement;
+            const taskIndex = taskCheckboxIndexOf(checkbox);
+            if (taskIndex !== null) {
+              void saveTask(checkbox, taskIndex);
+              return;
+            }
             const selection =
               typeof window !== "undefined" && typeof window.getSelection === "function"
                 ? window.getSelection()
                 : null;
+            if (hasTextSelection(selection)) return;
             const target = wikilinkTargetOf(event.target as unknown as Parameters<typeof wikilinkTargetOf>[0]);
-            const action = noteClickAction(hasTextSelection(selection), target);
             // A wikilink carries no href, so route it onto the context bus.
-            if (action === "navigate" && target !== null) props.onSelect(target);
-            else if (action === "edit") open(note.body);
+            if (target !== null) props.onSelect(target);
           }}
           onKeyDown={(event) => {
             // Escape is first so the card closes on the gesture a keyboard
@@ -405,11 +444,9 @@ export function Note(props: NoteProps) {
             }
             if (event.key !== "Enter" && event.key !== " ") return;
             const target = wikilinkTargetOf(event.target as unknown as Parameters<typeof wikilinkTargetOf>[0]);
+            if (target === null) return;
             event.preventDefault();
-            // The keyboard's half of the click: without it, editing would be
-            // mouse-only now that the Edit button is gone.
-            if (target !== null) props.onSelect(target);
-            else open(note.body);
+            props.onSelect(target);
           }}
           // Sanitised by `renderNote`'s three layers — see note.model.ts.
           dangerouslySetInnerHTML={{ __html: html }}

package/src/web/client/note/note.model.ts

@@ -67,7 +67,7 @@
  * `tsconfig.json` project compile the tests.
  */
 
-import { Marked } from "marked";
+import { Lexer, Marked } from "marked";
 import type { TokenizerAndRendererExtension, Tokens } from "marked";
 import { relTime } from "../../shared/view";
 import type { GraphPayload, ViewNote, WireGraphNode, WireNoteSource } from "../../shared/wire";
@@ -197,6 +197,14 @@ export function safeUrl(raw: string): string | null {
  */
 export const WIKILINK_ATTR = "data-weave-target";
 
+/** The rendered task checkbox's zero-based source-order index. */
+export const TASK_CHECKBOX_ATTR = "data-weave-task";
+
+/** The action a task checkbox offers from its current state. */
+export function taskCheckboxLabel(checked: boolean): string {
+  return checked ? "Mark task incomplete" : "Mark task complete";
+}
+
 /** Prefix core's graph builder gives note nodes. Mirrors `noteSlug`. */
 const NOTE_PREFIX = "note:";
 
@@ -465,11 +473,16 @@ export function renderWikilink(index: WikiIndex, target: string, alias: string):
  * rather than `string | Promise<string>`; nothing here is asynchronous.
  */
 export function markdownRenderer(index: WikiIndex): Marked {
+  let taskIndex = 0;
   return new Marked({
     gfm: true,
     async: false,
     extensions: [wikilinkExtension(index)],
     renderer: {
+      checkbox({ checked }) {
+        const state = checked ? ' checked=""' : "";
+        return `<input type="checkbox"${state} ${TASK_CHECKBOX_ATTR}="${taskIndex++}" aria-label="${taskCheckboxLabel(checked)}"> `;
+      },
       /**
        * Layer 1. Raw HTML in a note body is rendered as **text**.
        *
@@ -551,7 +564,6 @@ export interface SanitizeConfig {
   readonly ALLOW_DATA_ATTR: boolean;
   readonly ALLOW_ARIA_ATTR: boolean;
   readonly ALLOW_UNKNOWN_PROTOCOLS: boolean;
-  readonly USE_PROFILES: { readonly html: true };
 }
 
 /**
@@ -575,9 +587,9 @@ export interface SanitizeConfig {
  * and keeps the element. It also contains no `style`, so a CSS-based overlay
  * attack has no attribute to live in.
  *
- * `ALLOW_DATA_ATTR: false` with {@link WIKILINK_ATTR} named explicitly is
+ * `ALLOW_DATA_ATTR: false` with the two renderer-owned data attributes named explicitly is
  * narrower than leaving data attributes on: the only `data-` attribute that
- * may exist in rendered output is the one this module writes.
+ * may exist in rendered output is one this module writes.
  * `ADD_URI_SAFE_ATTR` then tells DOMPurify that the attribute's value is not a
  * URL and must not be run through `IS_ALLOWED_URI` — without it a slug like
  * `note-2` is fine but the check is being applied to a value that was never a
@@ -644,15 +656,15 @@ export const SANITIZE_CONFIG: SanitizeConfig = frozen({
     "align",
     "type",
     "checked",
-    "disabled",
+    "aria-label",
     "start",
     WIKILINK_ATTR,
+    TASK_CHECKBOX_ATTR,
   ]),
-  ADD_URI_SAFE_ATTR: frozen([WIKILINK_ATTR]),
+  ADD_URI_SAFE_ATTR: frozen([WIKILINK_ATTR, TASK_CHECKBOX_ATTR]),
   ALLOW_DATA_ATTR: false,
   ALLOW_ARIA_ATTR: false,
   ALLOW_UNKNOWN_PROTOCOLS: false,
-  USE_PROFILES: frozen({ html: true as const }),
 });
 
 /**
@@ -671,12 +683,92 @@ export function renderNote(purify: Purifier, body: string, index: WikiIndex): st
 
 // --- reading a click back out of the DOM --------------------------------------------------
 
+const TASK_LINE_RE = /^((?: {0,3}>[ \t]?)*[ \t]*(?:[*+-]|\d{1,9}[.)])[ \t]+\[)([ xX])(\] +\S)/;
+
+/** Source offsets for the task markers marked will render, in render order. */
+function taskMarkerOffsets(body: string): Array<number | null> {
+  const candidates: number[] = [];
+  const source = body.replace(/\r\n?/g, "\n");
+  let sourceOffset = 0;
+
+  for (const token of Lexer.lex(source, { gfm: true })) {
+    const tokenOffset = source.indexOf(token.raw, sourceOffset);
+    if (tokenOffset === -1) continue;
+    sourceOffset = tokenOffset + token.raw.length;
+    if (token.type !== "list" && token.type !== "blockquote") continue;
+
+    let lineOffset = 0;
+    while (lineOffset < token.raw.length) {
+      const newline = token.raw.indexOf("\n", lineOffset);
+      const lineEnd = newline === -1 ? token.raw.length : newline;
+      const line = token.raw.slice(lineOffset, lineEnd).replace(/\r$/, "");
+      const task = TASK_LINE_RE.exec(line);
+      if (task !== null) candidates.push(tokenOffset + lineOffset + (task[1] as string).length);
+      lineOffset = newline === -1 ? token.raw.length : newline + 1;
+    }
+  }
+
+  const walker = new Marked();
+  const states = (markdown: string): boolean[] => {
+    const checked: boolean[] = [];
+    walker.walkTokens(Lexer.lex(markdown, { gfm: true }), (token) => {
+      if (token.type === "checkbox") checked.push(token.checked);
+    });
+    return checked;
+  };
+  const baseline = states(source);
+  const offsets: Array<number | null> = baseline.map(() => null);
+  // ponytail: re-lex each candidate so Marked remains the sole judge of
+  // Markdown structure; use token source positions if Marked adds them.
+  for (const offset of candidates) {
+    const toggled = `${source.slice(0, offset)}${source[offset] === " " ? "x" : " "}${source.slice(offset + 1)}`;
+    const next = states(toggled);
+    if (next.length !== baseline.length) continue;
+    let changed = -1;
+    for (let index = 0; index < baseline.length; index += 1) {
+      if (next[index] === baseline[index]) continue;
+      if (changed !== -1) {
+        changed = -1;
+        break;
+      }
+      changed = index;
+    }
+    if (changed !== -1) offsets[changed] = offset;
+  }
+
+  return offsets.map((offset) => {
+    if (offset === null) return null;
+    let original = 0;
+    let normalized = 0;
+    while (normalized < offset) {
+      original += body[original] === "\r" && body[original + 1] === "\n" ? 2 : 1;
+      normalized += 1;
+    }
+    return original;
+  });
+}
+
+/** Flip one rendered GFM task marker without changing any other source byte. */
+export function toggleTaskCheckbox(body: string, index: number): string | null {
+  if (!Number.isSafeInteger(index) || index < 0) return null;
+  const offset = taskMarkerOffsets(body)[index];
+  if (offset === undefined || offset === null) return null;
+  return `${body.slice(0, offset)}${body[offset] === " " ? "x" : " "}${body.slice(offset + 1)}`;
+}
+
 /** The slice of `Element` {@link wikilinkTargetOf} walks. `HTMLElement` satisfies it. */
 export interface ClosestElement {
   getAttribute(name: string): string | null;
   readonly parentElement: ClosestElement | null;
 }
 
+/** The task index carried by a rendered checkbox, if the target is one. */
+export function taskCheckboxIndexOf(element: ClosestElement | null): number | null {
+  const raw = element?.getAttribute(TASK_CHECKBOX_ATTR);
+  if (raw === null || raw === undefined || !/^(?:0|[1-9]\d*)$/.test(raw)) return null;
+  return Number(raw);
+}
+
 /**
  * Depth limit for the ancestor walk.
  *
@@ -747,11 +839,8 @@ export const CREATED_WORD = "created";
 
 // --- the editor -------------------------------------------------------------------------
 
-/**
- * The editor's strings. No "Edit" label — clicking the prose opens it (see
- * {@link noteClickAction}); "Done", because leaving a clean editor cancels
- * nothing.
- */
+/** The editor's controls and prompts. */
+export const EDIT_LABEL = "Edit";
 export const DONE_LABEL = "Done";
 export const SAVE_LABEL = "Save";
 export const SAVING_LABEL = "Saving…";
@@ -767,18 +856,6 @@ export function draftDirty(draft: string, body: string): boolean {
   return draft !== body;
 }
 
-/** What a click on the rendered body means. */
-export type NoteClickAction = "ignore" | "navigate" | "edit";
-
-/**
- * Resolve a click on the prose. Selection wins (a drag to copy ends in a
- * click, and 865da37 is that bug), then wikilinks, then editing.
- */
-export function noteClickAction(hasSelection: boolean, wikilinkTarget: string | null): NoteClickAction {
-  if (hasSelection) return "ignore";
-  return wikilinkTarget === null ? "edit" : "navigate";
-}
-
 /**
  * Whether a save's reply still belongs to the editor that issued it. A
  * counter, not the slug: reopening the same note is a new session too.

package/src/web/client/shell/theme.ts

@@ -441,11 +441,6 @@ body{font-size:var(--weave-px-base)}
    chrome's 1.6: the extra leading is what a page of running text needs that a
    status bar does not. Code stays mono deliberately. */
 .weave-note-body{padding:12px var(--weave-note-gutter) 28px;font-size:var(--weave-px-body);line-height:1.7;color:var(--weave-fg)}
-/* The prose is the edit affordance: a caret and a faint wash, not a border.
-   This column is read far more often than edited. */
-.weave-note-body{cursor:text}
-.weave-note-body:hover{background:var(--weave-panel)}
-@media (prefers-reduced-motion: no-preference){.weave-note-body{transition:background 120ms ease}}
 .weave-note-body>*:first-child{margin-top:0}
 .weave-note-body h1,.weave-note-body h2,.weave-note-body h3,
 .weave-note-body h4,.weave-note-body h5,.weave-note-body h6{
@@ -462,6 +457,8 @@ body{font-size:var(--weave-px-base)}
 .weave-note-body p,.weave-note-body ul,.weave-note-body ol,.weave-note-body blockquote{margin:0 0 12px}
 .weave-note-body ul,.weave-note-body ol{padding-left:20px}
 .weave-note-body li{margin:4px 0}
+.weave-note-body input[type="checkbox"]{accent-color:var(--weave-accent);cursor:pointer}
+.weave-note-body input[type="checkbox"]:disabled{cursor:wait}
 .weave-note-body blockquote{
   padding-left:10px;border-left:2px solid var(--weave-line-strong);color:var(--weave-dim);
 }