How to draw a line between 2 paragraph?

[htlay]

Hi

I'm using React and I try to draw a line between two paragraphs.

paragraph 1 ....

//draw a line or add a line here

paragraph 2 ...

This is how I implement it.
const addLine = new Table({ columnWidths: [1000], rows: [ new TableRow({ children: [ new TableCell({ width: { size: 1000, type: WidthType.DXA, }, borders: { top: { style: BorderStyle.NIL, }, bottom: { style: BorderStyle.THICK, size: 30, color: "0080ff", }, left: { style: BorderStyle.NIL, }, right: { style: BorderStyle.NIL, }, }, }), ], }), ], });

It will give me a line between 2 paragraph, and it look good if you view it on computer or Google Docs. However, it will display as a small empty table if you view it on mobile. I wonder, if there is anyway to insert or draw a single line and color it?

I also tried something like this.
new Paragraph({ text: ' ', heading: HeadingLevel.HEADING_1, thematicBreak: true, }),
It will display a long line and I'm not sure if I can change the length, thickness, or color it?

[dolanmiu]

This demo will have what you need:

https://github.com/dolanmiu/docx/blob/master/demo/26-paragraph-borders.ts

[htlay]

Thanks for reply. The demo is not what I want, but I have found a way to do it.

 const addBlueLine = new Paragraph({
    children: [
      new TextRun({
        text: '____________',
        font: {
          name: "Roboto",
        },
        bold: true,
        color: "0080ff",
        size: 36
      }),
    ],
  });