Merge pull request #214 from gavin-ts/fix-md-newlines

render: fix markdown newlines

ci/release/changelogs/next.md

@@ -11,3 +11,5 @@
   [#187](https://github.com/terrastruct/d2/pull/187)
 - System dark mode was incorrectly applying to markdown in renders.
   [#159](https://github.com/terrastruct/d2/issues/159)
+- Fixes markdown newlines created with a trailing double space or backslash.
+  [#214](https://github.com/terrastruct/d2/pull/214)

d2renderers/textmeasure/markdown.go

@@ -85,6 +85,7 @@ func init() {
 	markdownRenderer = goldmark.New(
 		goldmark.WithRendererOptions(
 			goldmarkHtml.WithUnsafe(),
+			goldmarkHtml.WithXHTML(),
 		),
 	)
 }
@@ -114,9 +115,9 @@ func MeasureMarkdown(mdText string, ruler *Ruler) (width, height int, err error)
 
 	// TODO consider setting a max width + (manual) text wrapping
 	bodyNode := doc.Find("body").First().Nodes[0]
-	bodyWidth, bodyHeight, _, _ := ruler.measureNode(0, bodyNode, font)
+	bodyAttrs := ruler.measureNode(0, bodyNode, font)
 
-	return int(math.Ceil(bodyWidth)), int(math.Ceil(bodyHeight)), nil
+	return int(math.Ceil(bodyAttrs.width)), int(math.Ceil(bodyAttrs.height)), nil
 }
 
 func hasPrev(n *html.Node) bool {
@@ -191,8 +192,16 @@ func hasAncestorElement(n *html.Node, elType string) bool {
 	return hasAncestorElement(n.Parent, elType)
 }
 
+type blockAttrs struct {
+	width, height, marginTop, marginBottom float64
+}
+
+func (b *blockAttrs) isNotEmpty() bool {
+	return b != nil && *b != blockAttrs{}
+}
+
 // measures node dimensions to match rendering with styles in github-markdown.css
-func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (width, height, marginTop, marginBottom float64) {
+func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) blockAttrs {
 	var parentElementType string
 	if n.Parent != nil && n.Parent.Type == html.ElementNode {
 		parentElementType = n.Parent.Data
@@ -201,7 +210,7 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 	switch n.Type {
 	case html.TextNode:
 		if strings.TrimSpace(n.Data) == "" {
-			return
+			return blockAttrs{}
 		}
 		spaceWidths := 0.
 
@@ -242,8 +251,9 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 			w *= FontSize_pre_code_em
 			h *= FontSize_pre_code_em
 		}
-		return w + spaceWidths, h, 0, 0
+		return blockAttrs{w + spaceWidths, h, 0, 0}
 	case html.ElementNode:
+		isCode := false
 		switch n.Data {
 		case "h1", "h2", "h3", "h4", "h5", "h6":
 			font = HeaderFonts[n.Data]
@@ -259,96 +269,138 @@ func (ruler *Ruler) measureNode(depth int, n *html.Node, font d2fonts.Font) (wid
 		case "pre", "code":
 			font.Family = d2fonts.SourceCodePro
 			font.Style = d2fonts.FONT_STYLE_REGULAR
+			isCode = true
 		}
 
+		block := blockAttrs{}
+
 		if n.FirstChild != nil {
 			first := getNext(n.FirstChild)
 			last := getPrev(n.LastChild)
 
-			var prevMarginBottom float64
+			var blocks []blockAttrs
+			var current *blockAttrs
+			// first create blocks from combined inline elements, then combine all blocks
+			// current will be non-nil while inline elements are being combined into a block
 			for child := n.FirstChild; child != nil; child = child.NextSibling {
-				childWidth, childHeight, childMarginTop, childMarginBottom := ruler.measureNode(depth+1, child, font)
+				childBlock := ruler.measureNode(depth+1, child, font)
 
 				if child.Type == html.ElementNode && isBlockElement(child.Data) {
-					if child == first {
+					if current != nil {
-						if n.Data == "blockquote" {
+						blocks = append(blocks, *current)
-							childMarginTop = 0.
-						}
-						marginTop = go2.Max(marginTop, childMarginTop)
-					} else {
-						marginDiff := childMarginTop - prevMarginBottom
-						if marginDiff > 0 {
-							childHeight += marginDiff
-						}
 					}
-					if child == last {
+					current = &blockAttrs{}
-						if n.Data == "blockquote" {
+					if child == first && n.Data == "blockquote" {
-							childMarginBottom = 0.
+						current.marginTop = 0.
-						}
-						marginBottom = go2.Max(marginBottom, childMarginBottom)
 					} else {
-						childHeight += childMarginBottom
+						current.marginTop = childBlock.marginTop
-						prevMarginBottom = childMarginBottom
+					}
+					if child == last && n.Data == "blockquote" {
+						current.marginBottom = 0.
+					} else {
+						current.marginBottom = childBlock.marginBottom
 					}
 
-					height += childHeight
+					current.width = childBlock.width
-					width = go2.Max(width, childWidth)
+					current.height = childBlock.height
-				} else {
+					blocks = append(blocks, *current)
-					marginTop = go2.Max(marginTop, childMarginTop)
+					current = nil
-					marginBottom = go2.Max(marginBottom, childMarginBottom)
+				} else if child.Type == html.ElementNode && child.Data == "br" {
+					if current != nil {
+						if !isCode && current.height > 0 && current.height < MarkdownLineHeightPx {
+							current.height = MarkdownLineHeightPx
+						}
+						blocks = append(blocks, *current)
+						current = nil
+					}
+				} else if childBlock.isNotEmpty() {
+					if current == nil {
+						current = &childBlock
+					} else {
+						current.marginTop = go2.Max(current.marginTop, childBlock.marginTop)
+						current.marginBottom = go2.Max(current.marginBottom, childBlock.marginBottom)
 
-					width += childWidth
+						current.width += childBlock.width
-					height = go2.Max(height, childHeight)
+						current.height = go2.Max(current.height, childBlock.height)
+					}
 				}
 			}
+			if current != nil {
+				if !isCode && current.height > 0 && current.height < MarkdownLineHeightPx {
+					current.height = MarkdownLineHeightPx
+				}
+				blocks = append(blocks, *current)
+				current = nil
+			}
+
+			var prevMarginBottom float64
+			for i, b := range blocks {
+				if i == 0 {
+					block.marginTop = go2.Max(block.marginTop, b.marginTop)
+				} else {
+					marginDiff := b.marginTop - prevMarginBottom
+					if marginDiff > 0 {
+						block.height += marginDiff
+					}
+				}
+				if i == len(blocks)-1 {
+					block.marginBottom = go2.Max(block.marginBottom, b.marginBottom)
+				} else {
+					block.height += b.marginBottom
+					prevMarginBottom = b.marginBottom
+				}
+
+				block.height += b.height
+				block.width = go2.Max(block.width, b.width)
+			}
 		}
 
 		switch n.Data {
 		case "blockquote":
-			width += (2*PaddingLR_blockquote_em + BorderLeft_blockquote_em) * float64(font.Size)
+			block.width += (2*PaddingLR_blockquote_em + BorderLeft_blockquote_em) * float64(font.Size)
-			marginBottom = go2.Max(marginBottom, MarginBottom_blockquote)
+			block.marginBottom = go2.Max(block.marginBottom, MarginBottom_blockquote)
 		case "p":
 			if parentElementType == "li" {
-				marginTop = go2.Max(marginTop, MarginTop_li_p)
+				block.marginTop = go2.Max(block.marginTop, MarginTop_li_p)
 			}
-			marginBottom = go2.Max(marginBottom, MarginBottom_p)
+			block.marginBottom = go2.Max(block.marginBottom, MarginBottom_p)
 		case "h1", "h2", "h3", "h4", "h5", "h6":
-			marginTop = go2.Max(marginTop, MarginTop_h)
+			block.marginTop = go2.Max(block.marginTop, MarginTop_h)
-			marginBottom = go2.Max(marginBottom, MarginBottom_h)
+			block.marginBottom = go2.Max(block.marginBottom, MarginBottom_h)
 			switch n.Data {
 			case "h1", "h2":
-				height += PaddingBottom_h1_h2_em * float64(font.Size)
+				block.height += PaddingBottom_h1_h2_em * float64(font.Size)
 			}
 		case "li":
-			width += PaddingLeft_ul_ol
+			block.width += PaddingLeft_ul_ol
 			if hasPrev(n) {
-				marginTop = go2.Max(marginTop, 4)
+				block.marginTop = go2.Max(block.marginTop, 4)
 			}
 		case "ol", "ul":
 			if hasAncestorElement(n, "ul") || hasAncestorElement(n, "ol") {
-				marginTop = 0
+				block.marginTop = 0
-				marginBottom = 0
+				block.marginBottom = 0
 			} else {
-				marginBottom = go2.Max(marginBottom, MarginBottom_ul)
+				block.marginBottom = go2.Max(block.marginBottom, MarginBottom_ul)
 			}
 		case "pre":
-			width += 2 * Padding_pre
+			block.width += 2 * Padding_pre
-			height += 2 * Padding_pre
+			block.height += 2 * Padding_pre
-			marginBottom = go2.Max(marginBottom, MarginBottom_pre)
+			block.marginBottom = go2.Max(block.marginBottom, MarginBottom_pre)
 		case "code":
 			if parentElementType != "pre" {
-				width += 2 * PaddingLeftRight_code_em * float64(font.Size)
+				block.width += 2 * PaddingLeftRight_code_em * float64(font.Size)
-				height += 2 * PaddingTopBottom_code_em * float64(font.Size)
+				block.height += 2 * PaddingTopBottom_code_em * float64(font.Size)
 			}
 		case "hr":
-			height += Height_hr
+			block.height += Height_hr
-			marginTop = go2.Max(marginTop, MarginTopBottom_hr)
+			block.marginTop = go2.Max(block.marginTop, MarginTopBottom_hr)
-			marginBottom = go2.Max(marginBottom, MarginTopBottom_hr)
+			block.marginBottom = go2.Max(block.marginBottom, MarginTopBottom_hr)
 		}
-
+		if block.height > 0 && block.height < MarkdownLineHeightPx {
-		if height > 0 && height < MarkdownLineHeightPx {
+			block.height = MarkdownLineHeightPx
-			height = MarkdownLineHeightPx
 		}
+		return block
 	}
-	return width, height, marginTop, marginBottom
+	return blockAttrs{}
 }

e2etests/stable_test.go

@@ -925,6 +925,28 @@ x -> y: {
     stroke-dash: 5
   }
 }
+`,
+		},
+		{
+			name: "md_2space_newline",
+			script: `
+markdown: {
+  md: |md
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,  
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+|
+}
+`,
+		},
+		{
+			name: "md_backslash_newline",
+			script: `
+markdown: {
+  md: |md
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,\
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+|
+}
 `,
 		},
 	}

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

@@ -0,0 +1,81 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "markdown",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 559,
+      "height": 148,
+      "level": 1,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "markdown",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 129,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER"
+    },
+    {
+      "id": "markdown.md",
+      "type": "text",
+      "pos": {
+        "x": 50,
+        "y": 50
+      },
+      "width": 459,
+      "height": 48,
+      "level": 2,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,  \nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 459,
+      "labelHeight": 48
+    }
+  ],
+  "connections": []
+}

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

@@ -0,0 +1,81 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "markdown",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 609,
+      "height": 198,
+      "level": 1,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "markdown",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 129,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER"
+    },
+    {
+      "id": "markdown.md",
+      "type": "text",
+      "pos": {
+        "x": 87,
+        "y": 87
+      },
+      "width": 459,
+      "height": 48,
+      "level": 2,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,  \nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 459,
+      "labelHeight": 48
+    }
+  ],
+  "connections": []
+}

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

@@ -0,0 +1,81 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "markdown",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 559,
+      "height": 148,
+      "level": 1,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "markdown",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 129,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER"
+    },
+    {
+      "id": "markdown.md",
+      "type": "text",
+      "pos": {
+        "x": 50,
+        "y": 50
+      },
+      "width": 459,
+      "height": 48,
+      "level": 2,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,\\\nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 459,
+      "labelHeight": 48
+    }
+  ],
+  "connections": []
+}

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

@@ -0,0 +1,81 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "markdown",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 609,
+      "height": 198,
+      "level": 1,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#E3E9FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "markdown",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 129,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER"
+    },
+    {
+      "id": "markdown.md",
+      "type": "text",
+      "pos": {
+        "x": 87,
+        "y": 87
+      },
+      "width": 459,
+      "height": 48,
+      "level": 2,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,\\\nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "markdown",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 459,
+      "labelHeight": 48
+    }
+  ],
+  "connections": []
+}