@k2b/editor 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/editor",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Configurable Markdown editor for SolidJS: editor, toolbar, bubble menu, and slash menu on one shared state.",
   "type": "module",
   "sideEffects": [
@@ -69,7 +69,7 @@
     "@codemirror/state": "6.7.1",
     "@codemirror/view": "6.43.7",
     "@k2b/stdlib": "0.30.0",
-    "@k2b/ui": "0.38.1",
+    "@k2b/ui": "0.39.0",
     "@lezer/common": "1.5.3",
     "@lezer/highlight": "1.2.4",
     "@lezer/markdown": "1.7.2",

package/src/Toolbar.tsx

@@ -171,6 +171,8 @@ export function Toolbar(props: ToolbarProps) {
     <div
       ref={root}
       class={props.class ?? "k2b-editor-toolbar flex min-w-0 items-center gap-2 text-dimmed"}
+      // The stylesheet sizes every control's icon here, the host's start and end controls included.
+      data-k2b-editor-toolbar=""
       style={{ "margin-bottom": lift() ? `${lift()}px` : undefined }}
       on:mousedown={(event) => event.preventDefault()}
     >

package/src/markdown/note-scroller.browser-harness.ts

@@ -37,19 +37,33 @@ const iconField = StateField.define<DecorationSet>({
   provide: (field) => EditorView.decorations.from(field),
 });
 
-const doc = Array.from({ length: 6 }, (_, block) =>
-  [
-    ...Array.from({ length: 35 }, (_, line) => `Paragraph ${block + 1}.${line + 1}`),
-    ":::icon",
-    `Anchor ${block + 1}`,
-    ...Array.from({ length: 35 }, (_, line) => `Following ${block + 1}.${line + 1}`),
-  ].join("\n\n"),
+const words = "Every paragraph wraps at its own width so a narrower column moves some line breaks on almost every frame".split(" ");
+// Paragraphs of different lengths, as in a real note: a column that changes width rewraps one of them on nearly every frame.
+const prose = Array.from({ length: 90 }, (_, index) =>
+  [`Paragraph ${index + 1}`, ...Array.from({ length: 30 + ((index * 37) % 50) }, (_, word) => words[(index + word) % words.length])].join(
+    " ",
+  ),
 ).join("\n\n");
 
+const wraps = new URLSearchParams(location.search).has("prose");
+const doc = wraps
+  ? prose
+  : Array.from({ length: 6 }, (_, block) =>
+      [
+        ...Array.from({ length: 35 }, (_, line) => `Paragraph ${block + 1}.${line + 1}`),
+        ":::icon",
+        `Anchor ${block + 1}`,
+        ...Array.from({ length: 35 }, (_, line) => `Following ${block + 1}.${line + 1}`),
+      ].join("\n\n"),
+    ).join("\n\n");
+
 const port = document.getElementById("port")!;
 const view = new EditorView({
   parent: port,
-  state: EditorState.create({ doc, extensions: [iconField, noteScroller, EditorView.theme({ ".cm-line": { lineHeight: "20px" } })] }),
+  state: EditorState.create({
+    doc,
+    extensions: [iconField, noteScroller, wraps ? EditorView.lineWrapping : [], EditorView.theme({ ".cm-line": { lineHeight: "20px" } })],
+  }),
 });
 
 const frame = () => new Promise((resolve) => requestAnimationFrame(resolve));
@@ -68,6 +82,69 @@ const harness = {
     for (let index = 0; index < 4; index++) await frame();
     return { written, scrollTop: port.scrollTop };
   },
+  /**
+   * Scrolls the page so the given paragraph starts at its top edge, then sets the column width once per frame. Reports,
+   * for every painted frame, how far the reading point at the top edge moved: the line there and how far into it the
+   * edge fell before the resize.
+   *
+   * `before` happens first: `edit` inserts paragraphs at the start of the note, as another person would, without
+   * scrolling; `column` narrows the column inside the same scroller, as "Full width" does, and the reader then
+   * scrolls on to the given paragraph.
+   */
+  resizeColumn: async (text: string, widths: number[], focused: boolean, before?: "edit" | "column") => {
+    if (focused) view.focus();
+    else view.contentDOM.blur();
+    // The drawn line itself: asking the editor for coordinates would make it measure first.
+    const offset = (target = text) => {
+      const { node } = view.domAtPos(view.state.doc.toString().indexOf(target));
+      const line = (node instanceof Element ? node : node.parentElement)!.closest(".cm-line")!;
+      return Math.round(line.getBoundingClientRect().top - port.getBoundingClientRect().top);
+    };
+    // Scrolling draws the lines with their real heights, so the line reaches the edge in a few steps.
+    const reach = async (target: string) => {
+      const from = view.state.doc.toString().indexOf(target);
+      port.scrollTop += view.documentTop + view.lineBlockAt(from).top - port.getBoundingClientRect().top;
+      for (let step = 0; step < 3; step++) {
+        for (let index = 0; index < 4; index++) await frame();
+        port.scrollTop += offset(target);
+      }
+      for (let index = 0; index < 4; index++) await frame();
+    };
+    if (before === "column") {
+      await reach("Paragraph 20 ");
+      view.contentDOM.style.maxWidth = "640px";
+      for (let index = 0; index < 4; index++) await frame();
+    }
+    await reach(text);
+    if (before === "edit") {
+      view.dispatch({ changes: { from: 0, insert: `${words.join(" ")}\n\n`.repeat(3) } });
+      for (let index = 0; index < 4; index++) await frame();
+    }
+    // The reading point: the line at the top edge and how far into it the edge falls.
+    const portTop = port.getBoundingClientRect().top;
+    const content = view.contentDOM.getBoundingClientRect();
+    const hit = document.elementFromPoint(content.left + 2, portTop + 1)!.closest(".cm-line")!;
+    const pos = view.posAtDOM(hit);
+    const lineAt = () => {
+      const { node } = view.domAtPos(pos);
+      return (node instanceof Element ? node : node.parentElement)!.closest(".cm-line")!.getBoundingClientRect();
+    };
+    const share = (portTop - lineAt().top) / lineAt().height;
+    const point = () => {
+      const line = lineAt();
+      return Math.round(line.top + share * line.height - port.getBoundingClientRect().top);
+    };
+    const start = point();
+    const moved: number[] = [];
+    for (const width of widths) {
+      port.style.width = `${width}px`;
+      // Callbacks run in the order they were requested: this one reads what the last frame painted, before the editor
+      // measures again.
+      await frame();
+      moved.push(point() - start);
+    }
+    return moved;
+  },
   /** Deletes the start of the note while the focused editor sits at the bottom, as a collaborator's edit arrives. */
   deleteAboveAtBottom: async (length: number) => {
     view.focus();

package/src/markdown/note-scroller.ts

@@ -53,5 +53,96 @@ const lockHeightWhileRendering = ViewPlugin.fromClass(
   },
 );
 
+/** The nearest ancestor that scrolls vertically: the page's scroll area. */
+const scrollParent = (element: HTMLElement) => {
+  for (let parent = element.parentElement; parent; parent = parent.parentElement)
+    if (/^(auto|scroll|overlay)$/.test(getComputedStyle(parent).overflowY)) return parent;
+  return null;
+};
+
+/**
+ * The line block at the scroller's top edge and how far into it the edge falls, in its heights, with the column and
+ * scroller widths it was read at.
+ */
+type ReadingAnchor = { width: number; port: number } & ({ from: number; within: number } | { from: null });
+
+/**
+ * A sidebar, panel or window resize changes the column width on every frame and rewraps lines above the page's top
+ * edge. CodeMirror keeps the text in place in a page scroller only while it has focus, which the drag took away, and
+ * only from the frame after the browser painted the rewrap. Either way the note jumps on every rewrap. This measures
+ * the editor in the frame the scroller resizes, before the paint, and keeps the line at the top edge where it was.
+ */
+const holdReadingPosition = ViewPlugin.fromClass(
+  class {
+    private scroller: HTMLElement | null = null;
+    private anchor: ReadingAnchor | null = null;
+    private readonly resize = new ResizeObserver(() => this.hold());
+    private readonly capture = { key: this, read: () => this.readAnchor() };
+    private readonly onScroll = () => this.view.requestMeasure(this.capture);
+
+    constructor(private readonly view: EditorView) {}
+
+    update({ view, docChanged, heightChanged, changes }: ViewUpdate) {
+      if (this.anchor?.from != null && docChanged) this.anchor.from = changes.mapPos(this.anchor.from);
+      // An edit or a block that changed its height moves the text without a scroll: read the place again.
+      if (this.scroller && (docChanged || heightChanged)) view.requestMeasure(this.capture);
+      if (this.scroller || !view.dom.isConnected) return;
+      this.scroller = scrollParent(view.dom);
+      if (!this.scroller) return;
+      this.resize.observe(this.scroller);
+      this.scroller.addEventListener("scroll", this.onScroll, { passive: true });
+      view.requestMeasure(this.capture);
+    }
+
+    destroy() {
+      this.resize.disconnect();
+      this.scroller?.removeEventListener("scroll", this.onScroll);
+    }
+
+    /**
+     * Records where the reader is. A resized scroller keeps the old place for its resize callback; a column that
+     * changed inside an unchanged scroller, such as for "Full width", is not this plugin's to hold.
+     */
+    private readAnchor() {
+      const width = this.view.contentDOM.getBoundingClientRect().width;
+      const port = this.scroller!.clientWidth;
+      const { anchor } = this;
+      if (!anchor || Math.abs(anchor.width - width) < 0.5 || anchor.port === port) this.anchor = this.measureAnchor(width);
+    }
+
+    private measureAnchor(width: number): ReadingAnchor {
+      const port = this.scroller!.clientWidth;
+      const edge = this.scroller!.getBoundingClientRect().top - this.view.documentTop;
+      // Nothing above the top edge can move while the note starts below it.
+      if (edge <= 0) return { width, port, from: null };
+      const block = this.view.lineBlockAtHeight(edge);
+      return { width, port, from: block.from, within: (edge - block.top) / Math.max(1, block.height) };
+    }
+
+    private hold() {
+      const { view, scroller, anchor } = this;
+      if (!scroller || !view.dom.isConnected) return;
+      const width = view.contentDOM.getBoundingClientRect().width;
+      if (anchor?.from != null && Math.abs(anchor.width - width) >= 0.5) {
+        // Reading the layout runs the requested measure now. A focused editor corrects part of the rewrap itself;
+        // this adds only the rest. A correction onto lines it had not drawn lands on estimated heights; the next pass
+        // draws them, and three passes settle.
+        for (let pass = 0; pass < 3; pass++) {
+          view.requestMeasure();
+          // Any layout read runs the requested measure first; the block is then at its new place.
+          view.lineBlockAtHeight(0);
+          const block = view.lineBlockAt(Math.min(anchor.from, view.state.doc.length));
+          const edge = scroller.getBoundingClientRect().top - view.documentTop;
+          // WebKit drops a fraction of a pixel from the scroll offset.
+          const delta = Math.round(block.top + anchor.within * block.height - edge);
+          if (delta === 0) break;
+          scroller.scrollTop += delta;
+        }
+      }
+      this.anchor = this.measureAnchor(width);
+    }
+  },
+);
+
 /** The page scrolls the note; CodeMirror only renders it. */
-export const noteScroller = [noteScrollerTheme, lockHeightWhileRendering];
+export const noteScroller = [noteScrollerTheme, lockHeightWhileRendering, holdReadingPosition];

package/src/markdown/shared-tables.ts

@@ -8,7 +8,13 @@ import { displayCell, findTables, type Table } from "@k2b/ui/text-editor/model";
 import { isFormula } from "../formula";
 import { refreshMarkdownDecorationsEffect } from "./_lib/cursor-zone-field";
 import { applyLigatures } from "./ligatures";
-import { createPrettyTablePresentation, formatFormulaValue, type PrettyTableData, type PrettyTableOptions } from "./pretty-table";
+import {
+  createPrettyTablePresentation,
+  formatFormulaError,
+  formatFormulaValue,
+  type PrettyTableData,
+  type PrettyTableOptions,
+} from "./pretty-table";
 import { formulaPreviewWidget } from "./tables";
 
 export type TablePresentationOptions = Omit<PrettyTableOptions, "locale"> & {
@@ -44,21 +50,39 @@ const presentationTheme = EditorView.theme({
     zIndex: "5",
     background: "var(--k2b-surface)",
   },
+  // One flat chip right below the edited cell, above the page so the table's scroll area never cuts it.
   ".cm-notebook-active-result": {
-    position: "absolute",
-    bottom: "100%",
-    right: "0",
-    zIndex: "6",
-    padding: "2px 6px",
-    maxWidth: "18rem",
-    background: "var(--k2b-surface)",
-    border: "1px solid var(--k2b-border)",
+    position: "fixed",
+    inset: "auto",
+    margin: "0",
+    display: "flex",
+    alignItems: "baseline",
+    gap: "6px",
+    width: "max-content",
+    height: "auto",
+    maxWidth: "min(20rem, calc(100vw - 16px))",
+    overflow: "visible",
+    padding: "4px 8px",
+    border: "0",
     borderRadius: "var(--k2b-radius-control)",
-    boxShadow: "var(--k2b-shadow-float)",
-    fontSize: "12px",
+    boxShadow: "none",
+    background: "var(--k2b-surface-muted)",
+    color: "var(--k2b-text-secondary)",
+    font: "12.5px/1.4 var(--k2b-font-sans)",
+    whiteSpace: "normal",
+    overflowWrap: "anywhere",
   },
+  ".cm-notebook-active-result[data-error]": { background: "var(--k2b-danger-surface)", color: "var(--k2b-danger-text)" },
+  ".cm-notebook-active-result > .ti": { flex: "none", alignSelf: "center" },
 
   ".k2b-ste-table .k2b-ste-cell > .md-table-cell": { padding: "0", minHeight: "0" },
+  ".k2b-ste-table .k2b-ste-cell > .md-table-cell.md-formula-error": {
+    display: "inline-block",
+    padding: "0 6px",
+    borderRadius: "var(--k2b-radius-control)",
+    fontFamily: "var(--k2b-font-mono)",
+    fontSize: "12.5px",
+  },
   ".k2b-ste-table tr:has([data-notebook-total]) > td": { borderTop: "1px solid var(--ui-border-strong)", fontWeight: "600" },
   ".cm-notebook-formula-copy": {
     display: "inline-flex",
@@ -117,19 +141,30 @@ const copyButton = (element: HTMLElement, value: string, locale: string): HTMLBu
   return button;
 };
 
-/** The active formula stays over its reserved cell, with the evaluated result
- * beside it. Reuse the same presentation as the inactive grid and exports. */
+/** The active formula stays over its reserved cell, with its result or error
+ * right below it, described to screen readers. Reuse the same evaluation as
+ * the inactive grid and exports. */
+let resultIds = 0;
 const activeFormulaPreview = (options: TablePresentationOptions): Extension =>
   ViewPlugin.define((view) => {
     let cell: HTMLElement | null = null;
     let result: HTMLElement | null = null;
     let alive = true;
+    const place = () => {
+      const box = cell?.parentElement?.getBoundingClientRect();
+      if (!box || !result) return;
+      result.style.left = `${Math.max(8, Math.min(box.left, innerWidth - result.offsetWidth - 8))}px`;
+      result.style.top = `${box.bottom + 4}px`;
+    };
     const clear = () => {
       cell?.classList.remove("cm-notebook-formula-editor");
+      cell?.removeAttribute("aria-describedby");
       if (cell?.parentElement) cell.parentElement.style.removeProperty("height");
       result?.remove();
       result = null;
       cell = null;
+      removeEventListener("scroll", place, true);
+      removeEventListener("resize", place);
     };
     const paint = () =>
       queueMicrotask(() => {
@@ -155,15 +190,41 @@ const activeFormulaPreview = (options: TablePresentationOptions): Extension =>
           parent.style.height = `${parent.getBoundingClientRect().height}px`;
           result = parent.ownerDocument.createElement("div");
           result.className = "cm-notebook-active-result";
+          result.id = `cm-notebook-active-result-${++resultIds}`;
+          result.popover = "manual";
           result.setAttribute("role", "status");
           result.contentEditable = "false";
           parent.append(result);
+          result.showPopover();
           target.classList.add("cm-notebook-formula-editor");
+          target.setAttribute("aria-describedby", result.id);
           cell = target;
+          addEventListener("scroll", place, true);
+          addEventListener("resize", place);
         }
         const locale = options.locale?.() ?? (target.ownerDocument.documentElement.lang || "en");
         const presentation = createPrettyTablePresentation(presentationData(table), { ...options, locale });
-        result.innerHTML = presentation.cellHtml(row - 1, column);
+        const evaluated = presentation.rows[row - 1]?.cells[column]?.result;
+        if (!evaluated) {
+          clear();
+          return;
+        }
+        // An error says what is wrong and what helps, on one wrapping line; a valid result shows quietly.
+        const error = evaluated.kind === "error";
+        result.toggleAttribute("data-error", error);
+        result.replaceChildren();
+        if (error) {
+          const icon = result.ownerDocument.createElement("i");
+          icon.className = "ti ti-alert-triangle";
+          icon.setAttribute("aria-hidden", "true");
+          result.append(icon);
+        }
+        const message = result.ownerDocument.createElement("span");
+        message.textContent = error
+          ? formatFormulaError(evaluated, locale).replace(/\n→ /, " · ")
+          : formatFormulaValue(evaluated.value, locale);
+        result.append(message);
+        place();
       });
     view.contentDOM.addEventListener("focusin", paint);
     view.contentDOM.addEventListener("focusout", paint);

package/src/styles.css

@@ -1,6 +1,14 @@
 /* Generate utility classes for the source package in the consuming Tailwind build. */
 @source "./**/*.{ts,tsx}";
 
+/* One icon size for every control of an editor toolbar, the host's start and end controls included, so an icon a
+   host adds matches the formatting icons without its own size class. A utility on one icon still wins. */
+@layer components {
+  [data-k2b-editor-toolbar] .k2b-button > .k2b-button__label > .ti:first-child {
+    font-size: 0.875rem;
+  }
+}
+
 /* ── Slash-command autocomplete palette ─────────────────────────────────
    The CodeMirror autocomplete tooltip is portaled outside the editor
    surface AND its theme is injected as a runtime `<style>` after this file