@k2b/editor 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/editor",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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.39.0",
+    "@k2b/ui": "0.40.0",
     "@lezer/common": "1.5.3",
     "@lezer/highlight": "1.2.4",
     "@lezer/markdown": "1.7.2",

package/src/collab/remote-cursors.ts

@@ -339,12 +339,17 @@ export const remoteCursors = (ytext: Y.Text, awareness: Awareness): Extension =>
             const base = view.scrollDOM.getBoundingClientRect();
             const edge = view.contentDOM.getBoundingClientRect();
             const padding = parseFloat(getComputedStyle(view.contentDOM).paddingLeft);
+            // A rendered block hides the source the other person edits, so no line of it shows the caret's place: the
+            // caret runs along the whole block, which a line-high caret at its top would misstate.
+            // The block as drawn, which a widget may offset from the line the editor gives it.
+            const box = view.coordsAtPos(block.from, 1);
+            if (!box) return [];
             const rect = new RectangleMarker(
-              "cm-remoteCaret",
+              "cm-remoteCaret cm-remoteCaret-block",
               edge.left + padding - base.left + view.scrollDOM.scrollLeft,
-              view.documentTop + block.top - base.top + view.scrollDOM.scrollTop,
+              box.top - base.top + view.scrollDOM.scrollTop,
               null,
-              view.defaultLineHeight,
+              box.bottom - box.top,
             );
             return [new RemoteCaretMarker(rect, color, name, idle)];
           }

package/src/markdown/block-previews.tsx

@@ -251,7 +251,7 @@ class QueryBlockWidget extends WidgetType {
     if (this.placeholder) return this.placeholder.estimatedHeight;
     if (this.chart) return 66 + (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.
+    // controls, widget padding/border and table spacing add 65px, 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,7 +263,7 @@ class QueryBlockWidget extends WidgetType {
       : this.html?.includes('class="notebook-query-pager"')
         ? 36
         : 0;
-    return rows ? rows * 38 + 65 + countHeight : 120;
+    return rows ? rows * 38 + 81 + countHeight : 136;
   }
 }
 

package/src/markdown/named-blocks.ts

@@ -82,8 +82,12 @@ export const namedBlocksExtension = (): Extension => {
     stateField,
     blockWidgetLineNavigationExtension(stateField, (value) => value.atomicDecorations),
     EditorView.theme({
+      // A block of the editor, measured without margins: an inline label would sit in a taller line box than the
+      // editor measures, and every line after it would drift from where the editor places it.
       ".cm-named-block-handle": {
+        display: "flex",
         margin: "0 !important",
+        padding: "0.35rem 0 0.15rem",
       },
     }),
   ];

package/src/styles.css

@@ -269,13 +269,21 @@
   }
 }
 
-/* A rendered block in the editor, and the box the note's server preview reserves for a chart in its place. */
+/* A rendered block in the editor, and the box the note's server preview reserves for a chart in its place. The editor
+   measures blocks without margins, so the space above and below the frame is the block's own padding and the frame is
+   drawn inside it; a margin would move every line after the block away from where the editor places it. */
 .cm-query-block-widget {
+  position: relative;
   display: block;
-  margin: 0.5rem 0;
-  padding: 0.5rem;
+  padding: calc(1rem + 1px) calc(0.5rem + 1px);
+}
+.cm-query-block-widget::before {
+  content: "";
+  position: absolute;
+  inset: 0.5rem 0;
   border: 1px solid var(--ui-border);
   border-radius: var(--k2b-radius-control);
+  pointer-events: none;
 }
 .cm-query-block-preview.notebook-book-content {
   max-width: none;