Merge pull request #1060 from alixander/markdown-measure-br

fix multiple br

ci/release/changelogs/next.md

@@ -13,3 +13,4 @@
 
 - Code blocks are not affected by uppercasing from special themes like Terminal. [#1053](https://github.com/terrastruct/d2/pull/1053)
 - Fixes fill-pattern replacement in the API. [#1051](https://github.com/terrastruct/d2/pull/1051)
+- Fixes multiple `<br/>` elements in a row being mismeasured in Markdown blocks. [#1060](https://github.com/terrastruct/d2/pull/1060)

e2etests/stable_test.go

@@ -965,6 +965,23 @@ Here is an example of AppleScript:
 A code block continues until it reaches a line that is not indented
 (or the end of the article).
 `),
+		},
+		{
+			name: "br",
+			script: `copy: |md
+  # Headline 1
+  ## Headline 2
+  Lorem ipsum dolor
+  <br />
+  ## Headline 3
+  Lorem ipsum dolor
+  <br />
+  <br />
+  ## Headline 3
+  This just disappears
+  <br />
+|
+`,
 		},
 		{
 			name:   "giant_markdown_test",

e2etests/testdata/stable/br/dagre/board.exp.json

@@ -0,0 +1,88 @@
+{
+  "name": "",
+  "isFolderOnly": false,
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "copy",
+      "type": "text",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 150,
+      "height": 383,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "N1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "# Headline 1\n## Headline 2\nLorem ipsum dolor\n<br />\n## Headline 3\nLorem ipsum dolor\n<br />\n<br />\n## Headline 3\nThis just disappears\n<br />",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 150,
+      "labelHeight": 383,
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
+}

e2etests/testdata/stable/br/elk/board.exp.json

@@ -0,0 +1,88 @@
+{
+  "name": "",
+  "isFolderOnly": false,
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "copy",
+      "type": "text",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 150,
+      "height": 383,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "N1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "# Headline 1\n## Headline 2\nLorem ipsum dolor\n<br />\n## Headline 3\nLorem ipsum dolor\n<br />\n<br />\n## Headline 3\nThis just disappears\n<br />",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 150,
+      "labelHeight": 383,
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": [],
+  "root": {
+    "id": "",
+    "type": "",
+    "pos": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 0,
+    "height": 0,
+    "opacity": 0,
+    "strokeDash": 0,
+    "strokeWidth": 0,
+    "borderRadius": 0,
+    "fill": "N7",
+    "stroke": "",
+    "shadow": false,
+    "3d": false,
+    "multiple": false,
+    "double-border": false,
+    "tooltip": "",
+    "link": "",
+    "icon": null,
+    "iconPosition": "",
+    "blend": false,
+    "fields": null,
+    "methods": null,
+    "columns": null,
+    "label": "",
+    "fontSize": 0,
+    "fontFamily": "",
+    "language": "",
+    "color": "",
+    "italic": false,
+    "bold": false,
+    "underline": false,
+    "labelWidth": 0,
+    "labelHeight": 0,
+    "zIndex": 0,
+    "level": 0
+  }
+}

lib/textmeasure/markdown.go

@@ -331,6 +331,8 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, fontFamily *d2fonts.Fon
 				} else if child.Type == html.ElementNode && child.Data == "br" {
 					if inlineBlock != nil {
 						endInlineBlock()
+					} else {
+						block.height += MarkdownLineHeightPx
 					}
 				} else if childBlock.isNotEmpty() {
 					if inlineBlock == nil {