@k2b/editor 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/editor",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Configurable Markdown editor for SolidJS: editor, toolbar, bubble menu, and slash menu on one shared state.",
   "type": "module",
   "sideEffects": [
@@ -21,6 +21,7 @@
     "./formula": "./src/formula.ts",
     "./charts": "./src/charts.ts",
     "./markdown/pretty-table": "./src/markdown/pretty-table.ts",
+    "./markdown/shared-tables": "./src/markdown/shared-tables.ts",
     "./markdown/pretty-table-messages": "./src/markdown/pretty-table-messages.ts",
     "./markdown/chart-copy": "./src/markdown/chart-copy.ts",
     "./markdown/notebook-charts": "./src/markdown/notebook-charts.tsx"
@@ -69,7 +70,7 @@
     "@codemirror/state": "6.7.1",
     "@codemirror/view": "6.43.7",
     "@k2b/stdlib": "0.30.0",
-    "@k2b/ui": "0.41.0",
+    "@k2b/ui": "0.42.0",
     "@lezer/common": "1.5.3",
     "@lezer/highlight": "1.2.4",
     "@lezer/markdown": "1.7.2",

package/src/index.ts

@@ -15,3 +15,4 @@ export {
   type ToolbarMenu,
   type ToolbarProps,
 } from "./Toolbar";
+export { caretIntoTableCell, cellAt, gridCell, tableAround, tableCellCompletions, tablesOf } from "./table-cells";

package/src/markdown/block-previews.tsx

@@ -2,7 +2,7 @@ import { setDiagnostics } from "@codemirror/lint";
 import { type EditorState, type Extension, type Range, StateEffect, StateField } from "@codemirror/state";
 import { Decoration, type DecorationSet, EditorView, WidgetType } from "@codemirror/view";
 import { query, timed } from "@k2b/stdlib/solid";
-import { Button } from "@k2b/ui";
+import { Button, IconButton } from "@k2b/ui";
 import { type Accessor, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
 import { render } from "solid-js/web";
 import {
@@ -71,6 +71,59 @@ type QueryPagerMemory = { focus: { line: number; index: number } | null; heights
 
 const previewEffect = StateEffect.define<PreviewSnapshot>();
 
+/** The one switch between a block's preview and its source, in the preview's icon group and on the source's first line. */
+function SourceToggle(props: { label: string; pressed: boolean; onClick: () => void }) {
+  return (
+    <IconButton label={props.label} size="sm" variant="ghost" aria-pressed={props.pressed} onClick={props.onClick}>
+      <i class="ti ti-code" aria-hidden="true" />
+    </IconButton>
+  );
+}
+
+/** Rests on the revealed block's first line, without taking room from its text; pressing it brings the preview back. */
+class SourceToggleWidget extends WidgetType {
+  private dispose?: () => void;
+
+  constructor(
+    private label: string,
+    /** Where the cursor goes to leave the block. */
+    private exit: number,
+  ) {
+    super();
+  }
+
+  override eq(other: WidgetType) {
+    return other instanceof SourceToggleWidget && other.label === this.label && other.exit === this.exit;
+  }
+
+  override toDOM(view: EditorView) {
+    const host = document.createElement("span");
+    host.className = "cm-block-source-toggle";
+    this.dispose = render(
+      () => (
+        <SourceToggle
+          label={this.label}
+          pressed
+          onClick={() => {
+            view.dispatch({ selection: { anchor: this.exit } });
+            view.focus();
+          }}
+        />
+      ),
+      host,
+    );
+    host.addEventListener("mousedown", (event) => event.stopPropagation());
+    return host;
+  }
+
+  override destroy() {
+    this.dispose?.();
+  }
+  override ignoreEvent() {
+    return true;
+  }
+}
+
 class QueryBlockWidget extends WidgetType {
   private dispose?: () => void;
   private restoreCharts?: () => void;
@@ -119,8 +172,6 @@ class QueryBlockWidget extends WidgetType {
     wrapper.contentEditable = "false";
     wrapper.setAttribute("role", "group");
     wrapper.setAttribute("aria-label", t[this.block.type]);
-    const controls = document.createElement("div");
-    controls.className = "flex justify-end gap-1 mb-1";
     const content = document.createElement("div");
     content.className = "cm-query-block-preview notebook-book-content";
     if (this.html !== undefined && !this.snapshot.failed) {
@@ -148,7 +199,14 @@ class QueryBlockWidget extends WidgetType {
       content.setAttribute("role", "status");
       content.textContent = this.snapshot.failed ? t.failed : this.staleReadOnly ? t.savedChanged : (this.diagnostic ?? t.loading);
     }
-    wrapper.append(controls, content);
+    // A chart's title row already holds its icon group; any other block gets a row of its own above the preview.
+    const chartActions = content.querySelector<HTMLElement>(".notebook-book-chart__actions");
+    const controls = chartActions ?? document.createElement("div");
+    if (chartActions) wrapper.append(content);
+    else {
+      controls.className = "flex justify-end gap-1 mb-1";
+      wrapper.append(controls, content);
+    }
     this.content = content;
     const memory = this.snapshot.pager;
     // A paged list never gets shorter while it stays open, so turning to a short last page moves nothing below it.
@@ -185,9 +243,7 @@ class QueryBlockWidget extends WidgetType {
               {t.retry}
             </Button>
           )}
-          <Button size="xs" variant="ghost" onClick={reveal}>
-            {t.showSource}
-          </Button>
+          <SourceToggle label={t.showSource} pressed={false} onClick={reveal} />
         </>
       ),
       controls,
@@ -246,12 +302,12 @@ class QueryBlockWidget extends WidgetType {
     return true;
   }
   override get estimatedHeight() {
-    // Widget margins, border, padding and controls (66px), the title row beside the chart's 28px controls and the
-    // kind's fixed frame (app.css).
+    // Widget margins, border and padding (34px), the title row beside the chart's 28px controls and the kind's fixed
+    // frame (app.css).
     if (this.placeholder) return this.placeholder.estimatedHeight;
-    if (this.chart) return 66 + (this.chart.subtitle ? 44 : 28) + 8 + (this.chart.kind === "stat" ? 160 : 288);
+    if (this.chart) return 34 + (this.chart.subtitle ? 44 : 28) + 8 + (this.chart.kind === "stat" ? 160 : 288);
     // Query tables have 14px / 21px text, 16px cell padding and row dividers;
-    // controls, widget padding/border and table spacing add 65px, the space around the frame 16px.
+    // the 28px source switch, widget padding/border and table spacing add 69px, the space around the frame 16px.
     // The truncated count paragraph inherits 16px / 1.6 text (25.6px) in
     // `.cm-query-block-preview.notebook-book-content` and 1rem block margins
     // from app.css. Its top margin collapses with the table's bottom margin,
@@ -263,11 +319,19 @@ class QueryBlockWidget extends WidgetType {
       : this.html?.includes('class="notebook-query-pager"')
         ? 36
         : 0;
-    return rows ? rows * 38 + 81 + countHeight : 136;
+    return rows ? rows * 38 + 85 + countHeight : 140;
   }
 }
 
-type BlockState = { decorations: DecorationSet; snapshot: PreviewSnapshot; ranges: BlockPreviewRange[] };
+type BlockState = { decorations: DecorationSet; sourceToggles: DecorationSet; snapshot: PreviewSnapshot; ranges: BlockPreviewRange[] };
+
+const sourceToggleLine = Decoration.line({ class: "cm-block-source-line" });
+
+/** The nearest place outside every block; a note that is one block alone has none, and its source stays open. */
+const blockExit = (block: BlockPreviewRange, blocks: BlockPreviewRange[], length: number) =>
+  [block.to + 1, block.from - 1].find(
+    (position) => position >= 0 && position <= length && !blocks.some((other) => position >= other.from && position <= other.to),
+  );
 
 /** A single Solid-owned canonical query serves all blocks in one editor. */
 export function createBlockPreviews(options: BlockPreviewOptions): { extension: Extension; listener: Extension } {
@@ -335,8 +399,20 @@ export function createBlockPreviews(options: BlockPreviewOptions): { extension:
       );
       return heights.get(line);
     };
+    const sourceToggles: Range<Decoration>[] = [];
     for (const block of blocks) {
-      if (selectionIntersectsRange(state.selection.main, block.from, block.to)) continue;
+      if (selectionIntersectsRange(state.selection.main, block.from, block.to)) {
+        const exit = blockExit(block, blocks, state.doc.length);
+        if (exit !== undefined) {
+          const line = state.doc.lineAt(block.from);
+          const label = options.messages(next.locale).showSource;
+          sourceToggles.push(
+            sourceToggleLine.range(line.from),
+            Decoration.widget({ widget: new SourceToggleWidget(label, exit), side: 1 }).range(line.to),
+          );
+        }
+        continue;
+      }
       const source = block.type === "chart" ? document.slice(block.from, block.to) : "";
       const html = result?.blocks.find((entry) => entry.line === block.line)?.html ?? (source ? drawnCharts.get(source) : undefined);
       const placeholder = options.placeholder?.(block, document.slice(block.from, block.to), next.locale, state.readOnly) ?? null;
@@ -365,7 +441,12 @@ export function createBlockPreviews(options: BlockPreviewOptions): { extension:
         }).range(block.from, block.to),
       );
     }
-    return { decorations: Decoration.set(ranges, true), snapshot: next, ranges: blocks };
+    return {
+      decorations: Decoration.set(ranges, true),
+      sourceToggles: Decoration.set(sourceToggles, true),
+      snapshot: next,
+      ranges: blocks,
+    };
   };
   const field = StateField.define<BlockState>({
     create: (state) => build(state, snapshot),
@@ -387,6 +468,7 @@ export function createBlockPreviews(options: BlockPreviewOptions): { extension:
     },
     provide: (field) => [
       EditorView.decorations.from(field, (value) => value.decorations),
+      EditorView.decorations.from(field, (value) => value.sourceToggles),
       EditorView.atomicRanges.of((view) => view.state.field(field).decorations),
     ],
   });

package/src/markdown/lists.ts

@@ -274,7 +274,31 @@ const listTheme = EditorView.theme({
   ".custom-list-dot": { boxSizing: "border-box", width: "0.375rem", height: "0.375rem", borderRadius: "50%", background: "currentColor" },
   ".custom-list-dot-1": { width: "0.4rem", height: "0.4rem", background: "none", border: "1.5px solid currentColor" },
   ".custom-list-dot-2": { width: "0.35rem", height: "0.35rem", borderRadius: "1px" },
-  ".custom-list-task-marker": { width: "1rem", height: "1rem", margin: "0", accentColor: "var(--k2b-action-solid)" },
+  // Not the native box: it ignores border-radius, so it could not match the @k2b/ui checkbox.
+  ".custom-list-task-marker": {
+    appearance: "none",
+    boxSizing: "border-box",
+    width: "1rem",
+    height: "1rem",
+    margin: "0",
+    border: "1px solid var(--k2b-border-strong)",
+    borderRadius: "0.25rem",
+    background: "var(--k2b-surface)",
+    boxShadow: "none",
+    cursor: "pointer",
+  },
+  ".custom-list-task-marker::before": { display: "none" },
+  ".custom-list-task-marker:checked": {
+    borderColor: "var(--k2b-action-solid)",
+    backgroundColor: "var(--k2b-action-solid)",
+    // Two gradient strokes, not an image: a host's img-src policy may refuse a data: URL, and an input has no reliable pseudo-element in every engine.
+    backgroundImage:
+      "linear-gradient(45deg, transparent 27%, #fff 29.5%, #fff 49.2%, transparent 51.7%), linear-gradient(135deg, transparent 41.1%, #fff 43.6%, #fff 60.6%, transparent 63.1%)",
+    backgroundPosition: "23.08% 0, 68.97% 0",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "22% 100%, 42% 100%",
+    forcedColorAdjust: "none",
+  },
   ".custom-list-task-checked": {
     color: "var(--k2b-placeholder-color)",
     textDecoration: "line-through",

package/src/markdown/notebook-charts.tsx

@@ -83,6 +83,7 @@ function ChartControls(props: { figure: HTMLElement; viewport: HTMLElement; draw
         text={chartTableText(props.drawn().table)}
         label={t().copyData}
         iconOnly
+        class="k2b-icon-button"
         size="sm"
         variant="ghost"
         onCopyError={() => toast.error(t().copyFailed)}

package/src/markdown/shared-tables.ts

@@ -1,4 +1,5 @@
 /** Notebook presentation only. The public grid owns editing, focus, history and source writes. */
+import { completionStatus } from "@codemirror/autocomplete";
 import { type EditorState, type Extension, type Range, StateField } from "@codemirror/state";
 import { Decoration, type DecorationSet, EditorView, ViewPlugin } from "@codemirror/view";
 import { i18n } from "@k2b/stdlib";
@@ -224,13 +225,19 @@ const activeFormulaPreview = (options: TablePresentationOptions): Extension =>
           ? formatFormulaError(evaluated, locale).replace(/\n→ /, " · ")
           : formatFormulaValue(evaluated.value, locale);
         result.append(message);
+        yieldToCompletions();
         place();
       });
+    // The result sits in the top layer, right where the suggestions open; while they show, they are what matters.
+    const yieldToCompletions = () => {
+      if (result) result.style.visibility = completionStatus(view.state) ? "hidden" : "";
+    };
     view.contentDOM.addEventListener("focusin", paint);
     view.contentDOM.addEventListener("focusout", paint);
     return {
       update(update) {
         if (update.docChanged) paint();
+        yieldToCompletions();
       },
       destroy() {
         alive = false;

package/src/markdown/table-columns.ts

@@ -164,6 +164,9 @@ export const tableColumnCompletionSource = (context: CompletionContext): Complet
   const charBefore = partialFrom > 0 ? context.state.sliceDoc(partialFrom - 1, partialFrom) : "";
   const userTypedBacktick = charBefore === "`";
 
+  const columnWord = (typeof document === "undefined" ? "en" : document.documentElement.lang || "en").startsWith("de")
+    ? "Spalte"
+    : "column";
   const options: Completion[] = columns.map((col) => {
     const c: Completion = {
       // `label` is the raw column name — used both for the popup
@@ -172,7 +175,7 @@ export const tableColumnCompletionSource = (context: CompletionContext): Complet
       // text is the backtick-quoted form.
       label: col,
       type: "property",
-      detail: "column",
+      detail: columnWord,
       apply: buildColumnApply(col, userTypedBacktick),
     };
     withIcon(c, "ti-columns-3");

package/src/markdown/table-formulas.ts

@@ -33,6 +33,7 @@
  */
 import { type Completion, type CompletionContext, type CompletionResult, snippetCompletion } from "@codemirror/autocomplete";
 import { cellTextBeforeCursor, isTableRow, withIcon } from "@k2b/editor/markdown";
+import { i18n } from "@k2b/stdlib";
 
 type Formula = {
   /** Function name as it appears in the formula source. */
@@ -46,8 +47,7 @@ type Formula = {
   icon: string;
 };
 
-/** Registry — keep in sync with `FUNCTIONS` in
- *  `packages/cloud/src/shared/markdown/formula.ts`. */
+/** Registry — keep in sync with `FUNCTIONS` in `../formula.ts`. */
 const FORMULAS: Formula[] = [
   // Math ─────────────────────────────────────────────────────────
   { name: "ROUND", detail: "(number, digits)", args: "${1:value}, ${2:2}", icon: "ti-math-function" },
@@ -104,6 +104,97 @@ const FORMULAS: Formula[] = [
   },
 ];
 
+/** Signatures of the functions in the note's language; the function names stay as the formula language spells them. */
+const formulaHelp = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      ROUND: "(number, digits)",
+      ABS: "(number)",
+      SQRT: "(number) — square root",
+      POW: "(base, exp) — power",
+      MOD: "(a, b) — remainder",
+      SUM: "(column) — sum of column",
+      AVG: "(column) — average of column",
+      MEAN: "(column) — alias for AVG",
+      MIN: "(column) — minimum of column",
+      MAX: "(column) — maximum of column",
+      COUNT: "(column) — non-empty count",
+      MEDIAN: "(column) — median of column",
+      UNIQUE: "(column) — distinct non-empty count",
+      STDEV: "(column) — sample standard deviation",
+      COUNTIF: "(column, value) — count matching cells",
+      SUMIF: "(sumCol, condCol, value) — conditional sum",
+      PERCENT: "(part, total) — rounded percent",
+      PROGRESS: "(ratio) or (done, total) — progress bar",
+      ROWSUM: "() — sum of other cells in row",
+      ROWAVG: "() — average of other cells in row",
+      ROWMEAN: "() — alias for ROWAVG",
+      IF: "(cond, then, else)",
+      IFEMPTY: "(value, fallback)",
+      IFERROR: "(value, fallback)",
+      AND: "(a, b, ...) — all truthy",
+      OR: "(a, b, ...) — any truthy",
+      NOT: "(a) — invert truthiness",
+      CONTAINS: "(haystack, needle) — substring match",
+      CONCAT: "(...parts) — join strings",
+      UPPER: "(text) — uppercase",
+      LOWER: "(text) — lowercase",
+      TRIM: "(text) — strip whitespace",
+      LEFT: "(text, n) — first n chars",
+      RIGHT: "(text, n) — last n chars",
+      LEN: "(text) — character count",
+      SUBSTRING: "(text, start, length)",
+      REPLACE: "(text, search, replacement)",
+      NOW: "() — current YYYY-MM-DD HH:MM:SS",
+      TODAY: "() — current YYYY-MM-DD",
+      DATEDIFF: "(d1, d2, unit?) — date diff (d/h/m/s/ms)",
+    },
+    de: {
+      ROUND: "(Zahl, Stellen)",
+      ABS: "(Zahl)",
+      SQRT: "(Zahl) — Quadratwurzel",
+      POW: "(Basis, Exponent) — Potenz",
+      MOD: "(a, b) — Rest",
+      SUM: "(Spalte) — Summe der Spalte",
+      AVG: "(Spalte) — Mittelwert der Spalte",
+      MEAN: "(Spalte) — wie AVG",
+      MIN: "(Spalte) — kleinster Wert der Spalte",
+      MAX: "(Spalte) — größter Wert der Spalte",
+      COUNT: "(Spalte) — nicht leere Zellen",
+      MEDIAN: "(Spalte) — Median der Spalte",
+      UNIQUE: "(Spalte) — verschiedene Werte",
+      STDEV: "(Spalte) — Standardabweichung",
+      COUNTIF: "(Spalte, Wert) — passende Zellen zählen",
+      SUMIF: "(Summenspalte, Bedingungsspalte, Wert) — bedingte Summe",
+      PERCENT: "(Teil, Gesamt) — gerundete Prozent",
+      PROGRESS: "(Anteil) oder (erledigt, gesamt) — Fortschrittsbalken",
+      ROWSUM: "() — Summe der übrigen Zellen der Zeile",
+      ROWAVG: "() — Mittelwert der übrigen Zellen der Zeile",
+      ROWMEAN: "() — wie ROWAVG",
+      IF: "(Bedingung, dann, sonst)",
+      IFEMPTY: "(Wert, Ersatz)",
+      IFERROR: "(Wert, Ersatz)",
+      AND: "(a, b, ...) — alle wahr",
+      OR: "(a, b, ...) — mindestens eins wahr",
+      NOT: "(a) — Wahrheitswert umkehren",
+      CONTAINS: "(Text, Suchtext) — enthält den Text",
+      CONCAT: "(...Teile) — Texte verbinden",
+      UPPER: "(Text) — Großbuchstaben",
+      LOWER: "(Text) — Kleinbuchstaben",
+      TRIM: "(Text) — Leerraum entfernen",
+      LEFT: "(Text, n) — erste n Zeichen",
+      RIGHT: "(Text, n) — letzte n Zeichen",
+      LEN: "(Text) — Anzahl der Zeichen",
+      SUBSTRING: "(Text, Start, Länge)",
+      REPLACE: "(Text, Suche, Ersatz)",
+      NOW: "() — aktuell JJJJ-MM-TT HH:MM:SS",
+      TODAY: "() — aktuell JJJJ-MM-TT",
+      DATEDIFF: "(d1, d2, Einheit?) — Datumsabstand (d/h/m/s/ms)",
+    },
+  },
+});
+
 /** Snippet template. Does NOT include the leading `=` because the
  *  `from` position in the CompletionResult is anchored AFTER the
  *  `=` the user already typed — CM's prefix-filter compares the
@@ -113,11 +204,15 @@ const FORMULAS: Formula[] = [
  *  `${0}` parks the final cursor outside the parens. */
 const buildSnippet = (f: Formula): string => (f.args.length === 0 ? `${f.name}()` : `${f.name}(${f.args})\${0}`);
 
+/** Ranked first among equal matches, so `=SU` offers SUM before SUBSTRING. */
+const COMMON = new Set(["SUM", "AVG", "MIN", "MAX", "COUNT"]);
+
 const COMPLETIONS: Completion[] = FORMULAS.map((f) => {
   const c = snippetCompletion(buildSnippet(f), {
     label: f.name,
     type: "function",
     detail: f.detail,
+    boost: COMMON.has(f.name) ? 1 : 0,
   });
   withIcon(c, f.icon);
   return c;
@@ -165,6 +260,8 @@ export const tableFormulaCompletionSource = (context: CompletionContext): Comple
   // picking a function).
   if (!/^\s*=\w*$/.test(cell.text)) return null;
 
+  const help = formulaHelp.resolve(typeof document === "undefined" ? ["en"] : [document.documentElement.lang || "en"]).t;
+
   // Anchor `from` AFTER the `=` so CM's prefix-filter sees just the
   // function-name fragment (e.g. "SU" → "SUM"). Anchoring at the `=`
   // would force the labels to start with `=`, which they don't, so
@@ -172,7 +269,10 @@ export const tableFormulaCompletionSource = (context: CompletionContext): Comple
   return {
     from: word.from + 1,
     to: context.pos,
-    options: COMPLETIONS,
+    options: COMPLETIONS.map((completion) => ({
+      ...completion,
+      detail: help[completion.label as keyof typeof help],
+    })),
     validFor: /^\w*$/,
   };
 };

package/src/markdown/task-marker.browser-harness.ts

@@ -0,0 +1,9 @@
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { listsExtension } from "./lists";
+import { markdownExtension } from "./markdown";
+
+new EditorView({
+  parent: document.getElementById("root")!,
+  state: EditorState.create({ doc: "# Checklist\n\n- [x] Done\n- [ ] Open", extensions: [markdownExtension(), listsExtension()] }),
+});

package/src/slash-menu.ts

@@ -10,6 +10,7 @@ import type { Extension } from "@codemirror/state";
 import { type EditorView, ViewPlugin } from "@codemirror/view";
 import { fuzzy } from "@k2b/stdlib";
 import type { EditorAction } from "./editor-state";
+import { caretIntoTableCell, tableCellCompletions } from "./table-cells";
 
 /** One entry of the slash menu: an editor action reached by typing `/` and its name. */
 export type SlashAction = Omit<EditorAction, "run"> & {
@@ -40,7 +41,7 @@ export type SlashMenuOptions = {
 };
 
 /** `/name` after the line start or a space; group 1 is the space, group 2 the typed name and suffix. */
-const trigger = /(^|\s)\/(\w*)$/;
+const trigger = /(^|\s)\/([\p{L}\p{N}_]*)$/u;
 /** stdlib's fuzzy scores run up to about 100; below this, accidental subsequence matches crowd the list. */
 const minimumScore = 25;
 
@@ -206,6 +207,9 @@ const safe =
  */
 export const slashMenu = (options: SlashMenuOptions): Extension => [
   pointerTiming,
+  // The popup also serves the table grid's own cells, which write to the same document.
+  caretIntoTableCell,
+  tableCellCompletions,
   autocompletion({
     override: [
       safe("slash", slashCompletionSource(options.actions)),

package/src/styles.css

@@ -47,6 +47,9 @@
   font-family: inherit !important;
   font-size: 0.75rem !important;
   overflow: hidden;
+  /* CodeMirror shortens the popup when the screen has less room than the list; the list then scrolls inside it. */
+  display: flex;
+  flex-direction: column;
 }
 .dark .cm-tooltip.cm-tooltip-autocomplete {
   background-color: rgb(24 24 27) !important;
@@ -56,6 +59,9 @@
 .cm-tooltip-autocomplete > ul {
   font-family: inherit !important;
   max-height: 28rem;
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow-y: auto;
   padding: 0 !important;
   margin: 0;
   list-style: none;
@@ -298,6 +304,19 @@
   border-radius: var(--k2b-radius-control);
   pointer-events: none;
 }
+/* The way back from a block's source rests on its first line and takes no room from the text. */
+.cm-block-source-line {
+  position: relative;
+}
+.cm-block-source-toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.cm-block-source-toggle .k2b-button[aria-pressed="true"] {
+  color: var(--k2b-action);
+  background: var(--k2b-selected);
+}
 .cm-query-block-preview.notebook-book-content {
   max-width: none;
   margin: 0;
@@ -317,6 +336,10 @@
   min-width: 0;
   margin: 1.25rem 0;
 }
+/* In the editor the block's own padding is the space around the chart; a margin would add to it unmeasured. */
+.cm-query-block-preview.notebook-book-content .notebook-book-chart {
+  margin-block: 0;
+}
 .notebook-book-chart__header {
   display: flex;
   flex-direction: column;
@@ -330,6 +353,13 @@
   width: 3.75rem;
   height: 1.75rem;
 }
+/* In the editor the source switch joins them at the right end, so it stays put while the other two arrive. A failed
+   chart's Retry or Reload stands before it and takes the room it needs. */
+.cm-query-block-widget .notebook-book-chart__actions {
+  justify-content: flex-end;
+  width: auto;
+  min-width: 5.75rem;
+}
 /* The table takes the drawing's place inside the same fixed frame and scrolls there. */
 .notebook-book-chart[data-view="table"] .notebook-book-chart__viewport > :not(.notebook-book-chart__table) {
   display: none;

package/src/table-cells.ts

@@ -0,0 +1,160 @@
+/**
+ * The shared table grid replaces a table's source with its own editable cells. These extensions keep the editor's
+ * caret and its one completion popup working there; `slashMenu` installs both.
+ */
+import {
+  acceptCompletion,
+  closeCompletion,
+  completionStatus,
+  hasNextSnippetField,
+  hasPrevSnippetField,
+  moveCompletionSelection,
+  nextSnippetField,
+  prevSnippetField,
+  startCompletion,
+} from "@codemirror/autocomplete";
+import type { EditorState, Extension } from "@codemirror/state";
+import { type EditorView, getTooltip, repositionTooltips, showTooltip, ViewPlugin, type ViewUpdate } from "@codemirror/view";
+import { tableHost } from "@k2b/ui/text-editor";
+import { displayCell, findTables, gridLine, rowCount, type Table } from "@k2b/ui/text-editor/model";
+
+const tables = new WeakMap<EditorState, Table[]>();
+/** The tables of this document state, parsed once per state. */
+export const tablesOf = (state: EditorState) => {
+  let found = tables.get(state);
+  if (!found) {
+    found = findTables(state.doc.toString());
+    tables.set(state, found);
+  }
+  return found;
+};
+
+/** The table whose source contains `pos`, including its edges. */
+export const tableAround = (state: EditorState, pos: number): Table | null =>
+  tablesOf(state).find((table) => pos >= table.from && pos <= table.to) ?? null;
+
+/** Row and column of the cell whose source contains `pos`, as the grid addresses it. */
+export const cellAt = (table: Table, pos: number): { row: number; column: number; from: number; to: number } | null => {
+  for (let row = 0; row < rowCount(table); row++) {
+    const line = gridLine(table, row);
+    if (!line || pos < line.from || pos > line.to) continue;
+    const before = line.pipes.filter((pipe) => pipe < pos).length;
+    const column = Math.max(0, Math.min(line.cells.length - 1, line.leadingPipe ? before - 1 : before));
+    const cell = line.cells[column];
+    return cell ? { row, column, from: cell.from, to: cell.to } : null;
+  }
+  return null;
+};
+
+/** The rendered grid cell of a table's row and column. */
+export const gridCell = (view: EditorView, table: Table, row: number, column: number): HTMLElement | null => {
+  for (const wrap of view.contentDOM.querySelectorAll<HTMLElement>(".k2b-ste-table")) {
+    if (view.posAtDOM(wrap) !== table.from) continue;
+    return wrap.querySelector<HTMLElement>(`.k2b-ste-cell[data-r="${row}"][data-c="${column}"]`);
+  }
+  return null;
+};
+
+const selectText = (element: HTMLElement, anchor: number, head: number) => {
+  const node = element.firstChild;
+  const selection = element.ownerDocument.getSelection();
+  if (!selection) return;
+  const length = node?.textContent?.length ?? 0;
+  const range = element.ownerDocument.createRange();
+  if (node?.nodeType === Node.TEXT_NODE) {
+    range.setStart(node, Math.min(Math.min(anchor, head), length));
+    range.setEnd(node, Math.min(Math.max(anchor, head), length));
+  } else range.selectNodeContents(element);
+  selection.removeAllRanges();
+  selection.addRange(range);
+};
+
+/**
+ * A command that places the prose caret inside a table, such as inserting a
+ * table, slash commands or undo, continues in that cell of the grid instead of
+ * at a hidden source position. Remote mapping never moves focus.
+ */
+export const caretIntoTableCell = ViewPlugin.fromClass(
+  class {
+    update(update: ViewUpdate) {
+      const explicit = update.transactions.some((tr) => tr.selection !== undefined);
+      if (!(explicit || update.focusChanged) || !update.view.hasFocus) return;
+      const { anchor, head } = update.state.selection.main;
+      const table = tableAround(update.state, head);
+      if (!table || head <= table.from || head >= table.to) return;
+      const view = update.view;
+      queueMicrotask(() => {
+        if (!view.hasFocus || view.state.selection.main.head !== head) return;
+        const hit = cellAt(table, head);
+        const element = hit && gridCell(view, table, hit.row, hit.column);
+        if (!hit || !element) return;
+        const offset = (pos: number) => displayCell(view.state.sliceDoc(hit.from, Math.min(Math.max(pos, hit.from), hit.to))).length;
+        element.focus();
+        selectText(element, offset(anchor), offset(head));
+      });
+    }
+  },
+);
+
+/**
+ * Grid cells write to the same CodeMirror state as prose. Reuse its existing
+ * completion sources and snippet fields, including formula/column/name sources;
+ * only DOM keyboard routing and the tooltip anchor differ for a replaced table.
+ */
+export const tableCellCompletions: Extension = ViewPlugin.define((view) => {
+  let alive = true;
+  const currentCell = () => {
+    const focused = view.dom.ownerDocument.activeElement;
+    return focused instanceof HTMLElement && focused.matches(".k2b-ste-cell") && view.contentDOM.contains(focused) ? focused : null;
+  };
+  const keydown = (event: KeyboardEvent) => {
+    if (event.isComposing || view.state.readOnly || !currentCell()) return;
+    if (event.key === "Tab" && view.state.facet(tableHost)?.tabMovesFocus?.()) return;
+    let handled = false;
+    const open = completionStatus(view.state) === "active";
+    if ((event.ctrlKey || event.metaKey) && event.code === "Space") handled = startCompletion(view);
+    else if (event.key === "Escape" && open) handled = closeCompletion(view);
+    else if (open && (event.key === "ArrowDown" || event.key === "ArrowUp"))
+      handled = moveCompletionSelection(event.key === "ArrowDown")(view);
+    else if (open && (event.key === "Enter" || (event.key === "Tab" && !event.shiftKey))) handled = acceptCompletion(view);
+    else if (event.key === "Tab") {
+      if (event.shiftKey && hasPrevSnippetField(view.state)) handled = prevSnippetField(view);
+      else if (!event.shiftKey && hasNextSnippetField(view.state)) handled = nextSnippetField(view);
+    }
+    if (handled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  const position = () =>
+    queueMicrotask(() => {
+      if (!alive) return;
+      const cell = currentCell();
+      if (!cell) return;
+      for (const tooltip of view.state.facet(showTooltip)) {
+        const mounted = tooltip && getTooltip(view, tooltip);
+        if (!mounted?.dom.classList.contains("cm-tooltip-autocomplete")) continue;
+        mounted.getCoords = () => {
+          const selection = cell.ownerDocument.getSelection();
+          const caret = selection?.rangeCount ? selection.getRangeAt(0).getBoundingClientRect() : null;
+          return caret?.height ? caret : cell.getBoundingClientRect();
+        };
+      }
+      // CodeMirror owns the option list and its IDs; expose the same active option
+      // on the actual input so screen readers follow keyboard completion there.
+      for (const name of ["aria-autocomplete", "aria-controls", "aria-activedescendant", "aria-expanded"]) {
+        const value = view.contentDOM.getAttribute(name);
+        if (value) cell.setAttribute(name, value);
+        else cell.removeAttribute(name);
+      }
+      repositionTooltips(view);
+    });
+  view.contentDOM.addEventListener("keydown", keydown, true);
+  return {
+    update: position,
+    destroy() {
+      alive = false;
+      view.contentDOM.removeEventListener("keydown", keydown, true);
+    },
+  };
+});