work!

src/core/format/markdown.ts

@@ -9,6 +9,7 @@ import {
   RenderedNode,
   SectionNode,
   SpanNode,
+  ThematicBreak,
 } from "./rendered-node";
 
 export class MarkupRenderer {
@@ -210,6 +211,14 @@ export class MarkupRenderer {
     return new SectionNode(this.skipChildrenHelper(node, lang, depth, 0, 0));
   }
 
+  private render_thematic_break(
+    _node: TSNode,
+    _lang: string,
+    _depth: number
+  ): RenderedNode {
+    return new ThematicBreak();
+  }
+
   private renderNode(node: TSNode, lang: string, depth: number): RenderedNode {
     // try redirect to injection first
     let injection = this.injections.get(node.id());
@@ -237,6 +246,8 @@ export class MarkupRenderer {
       return this.render_section(node, lang, depth);
     } else if (node.type() === "code_span") {
       return this.render_code_span(node, lang, depth);
+    } else if (node.type() === "thematic_break") {
+      return this.render_thematic_break(node, lang, depth);
     } else if (node.type() === "paragraph") {
       return new ParagraphNode(
         this.skipChildrenHelper(node, lang, depth, 0, 0)

src/core/format/rendered-node/index.ts

@@ -15,48 +15,94 @@ export type RenderedNodeKind =
   | "heading"
   | "code_block"
   | "section"
-  | "code_span";
+  | "code_span"
+  | "thematic_break";
 
 type StringOrNode = string | RenderedNode;
 export type RenderedNodeContent = StringOrNode | StringOrNode[];
 
+export type RenderedElementKind = "markup" | "sep";
+
+interface MarkupElement {
+  kind: "markup";
+  markup: string;
+}
+
+interface SeparatorElement {
+  kind: "sep";
+  width: number;
+}
+
+export type RenderedElement = MarkupElement | SeparatorElement;
+
 export class PangoMarkupGenerator {
-  result: string[] = [];
+  result: RenderedElement[] = [];
   currentMarkup: string[] = [];
 
   newParagraph() {
-    this.result.push(this.currentMarkup.join(""));
+    this.result.push({
+      kind: "markup",
+      markup: this.currentMarkup.join(""),
+    });
     this.currentMarkup = [];
   }
 
+  addSpe() {
+    this.newParagraph();
+    this.result.push({
+      kind: "sep",
+      width: 4,
+    });
+  }
+
   addLines(lines: string | string[], pid?: number) {
     if (typeof lines === "string") {
       if (pid === undefined || pid >= this.result.length) {
         this.currentMarkup.push(lines);
       } else {
-        this.result[pid] += lines;
+        assert(this.result[pid].kind === "markup");
+        (this.result[pid] as MarkupElement).markup += lines;
       }
     } else {
       if (pid === undefined || pid >= this.result.length) {
         this.currentMarkup.push(...lines);
       } else {
-        this.result[pid] += lines.join("");
+        assert(this.result[pid].kind === "markup");
+        (this.result[pid] as MarkupElement).markup += lines.join("");
       }
     }
     return this.result.length;
   }
 
-  done(): string[] {
+  done(): RenderedElement[] {
     if (this.currentMarkup.length > 0) {
-      this.result.push(this.currentMarkup.join(""));
+      this.result.push({
+        kind: "markup",
+        markup: this.currentMarkup.join(""),
+      });
       this.currentMarkup = [];
     }
     let result = this.result;
     // clean empty tags
     result = result
-      .map((line) => line.replaceAll("<span></span>", "").trim())
-      .filter((line) => line.length > 0)
-      .map((line) => this._addCommonTag(line));
+      .map((p) => {
+        if (p.kind === "markup") {
+          p.markup = p.markup.replaceAll("<span></span>", "").trim();
+        }
+        return p;
+      })
+      .filter((p) => {
+        if (p.kind === "markup") {
+          return p.markup.length > 0;
+        }
+        return true;
+      })
+      .map((p) => {
+        if (p.kind === "markup") {
+          p.markup = this._addCommonTag(p.markup);
+        }
+        return p;
+      });
     return result;
   }
 
@@ -94,8 +140,6 @@ export abstract class RenderedNode {
     this.params = params;
   }
 
-  abstract startNewParagraph(): boolean;
-
   abstract intoPangoMarkup(pango: PangoMarkupGenerator): void;
 }
 
@@ -112,6 +156,8 @@ abstract class SimpleWrapperNode extends RenderedNode {
 
   abstract closeTag(): string;
 
+  abstract startNewParagraph(): boolean;
+
   override intoPangoMarkup(pango: PangoMarkupGenerator): void {
     info("kind: %s, new: %s", this.kind, this.startNewParagraph());
 
@@ -306,3 +352,13 @@ export class CodeSpanNode extends SimpleWrapperNode {
     return false;
   }
 }
+
+export class ThematicBreak extends RenderedNode {
+  constructor() {
+    super("thematic_break", "");
+  }
+
+  override intoPangoMarkup(pango: PangoMarkupGenerator): void {
+    pango.addSpe();
+  }
+}

src/graphics/widgets/column.ts

@@ -151,6 +151,7 @@ class _Column extends Widget {
       };
       child.calculateRenderBox(context, box);
       usedHeight += heightRange.min;
+      usedHeight += child._margin.top + child._margin.bottom;
     }
   }
 

src/index.ts

@@ -38,9 +38,6 @@ export function onRightClick(opts: any) {
 }
 
 export function test() {
-  // const text = `When the first paper volume of Donald Knuth's The Art of Computer Programming was published in 1968,[4] it was typeset using hot metal typesetting set by a Monotype Corporation typecaster. This method, dating back to the 19th century, produced a "good classic style" appreciated by Knuth.`;
-  //
-
   let [file] = io.open("/tmp/test.md", "r");
   let content = file!.read("*a");
   file!.close();
@@ -65,6 +62,7 @@ export function test() {
     name: "Normal",
   });
   let background = ifNil(hl_normal.get("guibg"), hl_normal.get("bg"));
+  let foreground = ifNil(hl_normal.get("guifg"), hl_normal.get("fg"));
 
   let root = Container({
     color: background,
@@ -73,7 +71,22 @@ export function test() {
     width: "expand",
     padding: Padding.all(10),
     child: Column({
-      children: [Spacing(), ...paragraphs.map((m) => Markup(m)), Spacing()],
+      children: [
+        Spacing(),
+        ...paragraphs.map((m) => {
+          if (m.kind === "markup") {
+            return Markup(m.markup);
+          } else {
+            return Container({
+              margin: Padding.all(4),
+              height: m.width,
+              width: "expand",
+              color: foreground,
+            });
+          }
+        }),
+        Spacing(),
+      ],
     }),
   });
   try {