Fix bug in measuring of gap sizes for nested block wrappers

Author: marijnh

src/buildtile.ts

@@ -193,7 +193,7 @@ class TileBuilder {
       if (this.wrappers[i].to < this.pos) this.wrappers.splice(i, 1)
     for (let cur = this.blockWrappers; cur.value && cur.from <= this.pos; cur.next()) if (cur.to >= this.pos) {
       let wrap = new OpenWrapper(cur.from, cur.to, cur.value, cur.rank), i = this.wrappers.length
-      while (i > 0 && this.wrappers[i - 1].rank < wrap.rank) i--
+      while (i > 0 && (this.wrappers[i - 1].rank - wrap.rank || this.wrappers[i - 1].to - wrap.to) < 0) i--
       this.wrappers.splice(i, 0, wrap)
     }
     this.wrapperPos = this.pos

src/docview.ts

@@ -391,15 +391,14 @@ export class DocView {
       for (let i = 0; i < tile.children.length; i++) {
         if (pos > to) break
         let child = tile.children[i], end = pos + child.length
+        let childRect = (child.dom as HTMLElement).getBoundingClientRect(), {height} = childRect
+        if (measureBounds && !i) spaceAbove += childRect.top - measureBounds.top
         if (child instanceof BlockWrapperTile) {
-          if (end > from) scan(child, pos, child.dom.getBoundingClientRect())
+          if (end > from) scan(child, pos, childRect)
         } else if (pos >= from) {
-          let childRect = (child.dom as HTMLElement).getBoundingClientRect(), {height} = childRect
-          if (measureBounds && !i) spaceAbove += childRect.top - measureBounds.top
           if (spaceAbove > 0) result.push(-spaceAbove)
           result.push(height + spaceAbove)
           spaceAbove = 0
-          if (measureBounds && i == tile.children.length - 1) spaceAbove += measureBounds.bottom - childRect.bottom
           if (isWider) {
             let last = child.dom.lastChild
             let rects = last ? clientRectsFor(last) : []
@@ -415,6 +414,7 @@ export class DocView {
             }
           }
         }
+        if (measureBounds && i == tile.children.length - 1) spaceAbove += measureBounds.bottom - childRect.bottom
         pos = end + child.breakAfter
       }
     }

test/webtest-draw-decoration.ts

@@ -1,4 +1,4 @@
-import {EditorView, Decoration, BlockWrapper, DecorationSet, WidgetType, ViewPlugin, BlockType} from "@codemirror/view"
+import {EditorView, Decoration, BlockWrapper, DecorationSet, WidgetType, ViewPlugin, BlockInfo, BlockType} from "@codemirror/view"
 import {tempView, requireFocus} from "./tempview.js"
 import {EditorSelection, StateEffect, StateField, Range, RangeSet} from "@codemirror/state"
 import ist from "ist"
@@ -933,5 +933,18 @@ describe("EditorView decoration", () => {
       ist(Array.isArray(blocks[1].type))
       ist(Array.isArray(blocks[3].type))
     })
+
+    it("properly measures nested wrapper padding", () => {
+      let cm = wrapEditor("a\nb\nc\nd", [
+        BlockWrapper.create({tagName: "div", attributes: {style: "border: 2px solid blue"}}).range(2, 5),
+        BlockWrapper.create({tagName: "div", attributes: {style: "border: 3px solid red"}}).range(2, 2),
+        BlockWrapper.create({tagName: "div", attributes: {style: "border: 1px solid orange"}}).range(4, 4)
+      ])
+      cm.measure()
+      let gapAbove = (line: BlockInfo) => Array.isArray(line.type) ? line.type[0].height : 0
+      ist(gapAbove(cm.viewportLineBlocks[1]), 5)
+      ist(gapAbove(cm.viewportLineBlocks[2]), 4)
+      ist(gapAbove(cm.viewportLineBlocks[3]), 3)
+    })
   })
 })