@k2b/editor 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/editor",
-  "version": "0.1.1",
+  "version": "0.2.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.0",
+    "@k2b/ui": "0.38.1",
     "@lezer/common": "1.5.3",
     "@lezer/highlight": "1.2.4",
     "@lezer/markdown": "1.7.2",

package/src/markdown/data-blocks.ts

@@ -2,6 +2,7 @@ import { type EditorState, type Extension, Prec, type Range, RangeSet, StateFiel
 import { Decoration, type DecorationSet, EditorView, keymap, WidgetType } from "@codemirror/view";
 import { holdsDecorations, refreshMarkdownDecorationsEffect, selectionIntersectsRange } from "./_lib/cursor-zone-field";
 import { type DataBlock, extractDataBlocks, namedBlockBody, renderDataBlockHtml } from "./lib/named-blocks";
+import { blockAnchorsDrawnElsewhere } from "./named-blocks";
 
 type DataBlockRange = {
   from: number;
@@ -52,8 +53,10 @@ class DataBlockWidget extends WidgetType {
 
   override get estimatedHeight() {
     const rows = Math.max(1, this.body.split("\n").filter((line) => line.trim().length > 0).length);
-    // 12px / 16px cells + 16px padding + divider; the handle and outer padding round up to 44px.
-    return 44 + rows * 33;
+    // 12px / 16px cells + 16px padding + divider per row; the anchor label (18px line), its margins and the outer
+    // padding take just under 44px. Chromium and WebKit round the rows differently (one and two rows measured
+    // 75.98 / 109.19px and 109.89px), so the base keeps the estimate at most 1px above both.
+    return 43.95 + rows * 33;
   }
 
   override ignoreEvent() {
@@ -76,6 +79,8 @@ export const dataBlocksExtension = (): Extension => {
     },
     provide(field) {
       return [
+        // The data block widget draws its anchor label together with the block.
+        blockAnchorsDrawnElsewhere.of("data"),
         EditorView.decorations.from(field, (value) => value.decorations),
         EditorView.atomicRanges.of((view) => view.state.field(field).blockWidgetDecorations),
       ];

package/src/markdown/lib/named-blocks.ts

@@ -354,7 +354,7 @@ const humanizeKey = (key: string): string =>
 export const renderDataBlockHtml = (name: string | null, src: string): string => {
   const entries = parseNamedDataBlock(src);
   const handle = name
-    ? `<div class="md-block-handle" data-block-name="${escapeHtml(name)}">@${escapeHtml(name)}</div>`
+    ? `<div class="md-block-handle" data-block-name="${escapeHtml(name)}">${escapeHtml(name)}</div>`
     : `<div class="md-data-handle-row"><div class="md-block-handle">data</div></div>`;
   const rows =
     entries.length > 0
@@ -392,7 +392,7 @@ export const renderNamedBlockHandlesMarkdown = (md: string | null | undefined):
   }
   for (const block of extractNamedBlocks(md)) {
     if (block.type === "data") continue;
-    const handle = `<div class="md-block-handle" data-block-name="${escapeHtml(block.name)}">@${escapeHtml(block.name)}</div>`;
+    const handle = `<div class="md-block-handle" data-block-name="${escapeHtml(block.name)}">${escapeHtml(block.name)}</div>`;
     replacements.push({ from: block.handleStart, to: block.handleEnd, html: handle });
   }
 

package/src/markdown/named-blocks.ts

@@ -1,4 +1,4 @@
-import { type Extension, type Range, RangeSet } from "@codemirror/state";
+import { type Extension, Facet, type Range, RangeSet } from "@codemirror/state";
 import { Decoration, EditorView, WidgetType } from "@codemirror/view";
 import {
   blockWidgetLineNavigationExtension,
@@ -8,6 +8,13 @@ import {
 } from "./_lib/cursor-zone-field";
 import { extractNamedBlocks } from "./lib/named-blocks";
 
+/**
+ * Block types whose anchor line another extension draws together with the block, such as data blocks. The anchor
+ * label leaves those lines alone; every other named block (tables, lists, …) gets the label.
+ */
+export const blockAnchorsDrawnElsewhere = Facet.define<string, ReadonlySet<string>>({ combine: (types) => new Set(types) });
+
+/** The anchor line `@name` above a block, shown as a quiet label until the caret enters the line. */
 class NamedBlockHandleWidget extends WidgetType {
   constructor(
     private name: string,
@@ -19,8 +26,9 @@ class NamedBlockHandleWidget extends WidgetType {
   override toDOM(view: EditorView) {
     const el = document.createElement("div");
     el.className = "cm-named-block-handle md-block-handle";
+    el.dataset.blockName = this.name;
     el.setAttribute("contenteditable", "false");
-    el.textContent = `@${this.name}`;
+    el.textContent = this.name;
     el.onmousedown = (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -52,9 +60,7 @@ export const namedBlocksExtension = (): Extension => {
       const nextLine = state.doc.lineAt(Math.min(block.handleEnd + 1, state.doc.length));
       const sourceVisibleRange = { from: prevLine.from, to: nextLine.to };
       ranges.push(sourceVisibleRange);
-      // Table/data handles are rendered by their block widgets together
-      // with the preview so the handle and body collapse as one stable block.
-      if (block.type === "table" || block.type === "data") continue;
+      if (state.facet(blockAnchorsDrawnElsewhere).has(block.type)) continue;
       if (selectionIntersectsRange(cursor, sourceVisibleRange.from, sourceVisibleRange.to)) continue;
       const handleDecoration = Decoration.replace({
         widget: new NamedBlockHandleWidget(block.name, block.handleStart),

package/src/markdown/pretty-table.ts

@@ -205,7 +205,7 @@ export const createPrettyTablePresentation = (data: PrettyTableData, options: Pr
 export const renderPrettyTableHtml = (data: PrettyTableData, options: PrettyTableOptions = {}): string => {
   const presentation = createPrettyTablePresentation(data, options);
   const caption = data.caption
-    ? `<div class="md-block-handle" data-block-name="${escapeHtml(data.caption)}">@${escapeHtml(data.caption)}</div>`
+    ? `<div class="md-block-handle" data-block-name="${escapeHtml(data.caption)}">${escapeHtml(data.caption)}</div>`
     : "";
   const headerHtml = data.headers.map((_, i) => `<th scope="col">${presentation.headerHtml(i)}</th>`).join("");
   // An all-empty GFM header is the approved header-off representation.

package/src/markdown/shared-tables.ts

@@ -7,7 +7,6 @@ import type { TableHost } from "@k2b/ui/text-editor";
 import { displayCell, findTables, type Table } from "@k2b/ui/text-editor/model";
 import { isFormula } from "../formula";
 import { refreshMarkdownDecorationsEffect } from "./_lib/cursor-zone-field";
-import { extractNamedBlocks } from "./lib/named-blocks";
 import { applyLigatures } from "./ligatures";
 import { createPrettyTablePresentation, formatFormulaValue, type PrettyTableData, type PrettyTableOptions } from "./pretty-table";
 import { formulaPreviewWidget } from "./tables";
@@ -33,30 +32,6 @@ const presentationData = (table: Table): PrettyTableData => {
   return { headers: values(table.lines[0]), rows: table.lines.slice(2).map(values), align: table.align };
 };
 
-const captionDecorations = (state: EditorState): DecorationSet => {
-  const source = state.doc.toString();
-  const starts = new Set(findTables(source).map((table) => table.from));
-  return Decoration.set(
-    extractNamedBlocks(source)
-      .filter((block) => block.type === "table" && starts.has(block.blockStart))
-      .map((block) =>
-        // Keep the actual handle editable. namedBlocksExtension skips table handles;
-        // tableGrid starts on the header, so neither extension renders a second caption.
-        Decoration.mark({ class: "md-block-handle cm-notebook-table-caption", attributes: { "data-block-name": block.name } }).range(
-          block.handleStart,
-          block.handleEnd,
-        ),
-      ),
-    true,
-  );
-};
-
-const tableCaptions = StateField.define<DecorationSet>({
-  create: captionDecorations,
-  update: (value, tr) => (tr.docChanged ? captionDecorations(tr.state) : value),
-  provide: (field) => EditorView.decorations.from(field),
-});
-
 const presentationTheme = EditorView.theme({
   ".k2b-ste-table .cm-notebook-formula-editor": {
     position: "absolute",
@@ -85,7 +60,6 @@ const presentationTheme = EditorView.theme({
 
   ".k2b-ste-table .k2b-ste-cell > .md-table-cell": { padding: "0", minHeight: "0" },
   ".k2b-ste-table tr:has([data-notebook-total]) > td": { borderTop: "1px solid var(--ui-border-strong)", fontWeight: "600" },
-  ".cm-notebook-table-caption": { margin: "0" },
   ".cm-notebook-formula-copy": {
     display: "inline-flex",
     alignItems: "center",
@@ -216,7 +190,7 @@ export const createNotebookTablePresentation = (
 } => {
   const snapshots = new WeakMap<Table, { locale: string; presentation: ReturnType<typeof createPrettyTablePresentation> }>();
   return {
-    extension: [tableCaptions, presentationTheme, activeFormulaPreview(options)],
+    extension: [presentationTheme, activeFormulaPreview(options)],
     renderCell(element, _raw, table, row, column) {
       const locale = options.locale?.() ?? (element.ownerDocument.documentElement.lang || "en");
       let snapshot = snapshots.get(table);

package/src/styles.css

@@ -142,25 +142,19 @@
   display: none !important;
 }
 
+/* The anchor of a named block (`@name` in the source) reads as a quiet label above the block, in the label type of
+   form fields. The caret in its line shows the source again. */
 .md-block-handle {
   display: inline-flex;
   align-items: center;
   width: fit-content;
   max-width: 100%;
   margin: 0.35rem 0 0.15rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  background: rgb(239 246 255);
-  color: rgb(37 99 235);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  font-size: 0.6875rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.8125rem;
   font-weight: 600;
-  line-height: 1.3;
-}
-
-.dark .md-block-handle {
-  background: rgb(30 58 138 / 0.25);
-  color: rgb(147 197 253);
+  line-height: 1.125rem;
+  overflow-wrap: anywhere;
 }
 
 .md-data-handle-row {