feat: add desc -nl- function (#100)

Author: kyechan99

__test__/content.test.ts

@@ -66,4 +66,33 @@ describe("Test Text and Desc", () => {
     expect($texts.length).toBeTruthy();
     expect($texts[0].firstChild.data).toBe("_DESC_TEST_");
   });
+
+  it("Desc multiline", () => {
+    const { req, res } = route({
+      type: "venom",
+      desc: "_DESC_LINE_1_-nl-_DESC_LINE_2_",
+      descSize: 40,
+      descAlign: 30,
+      descAlignY: 90,
+    });
+
+    api(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toHaveBeenCalled();
+
+    const svgContent = res.send.mock.lastCall[0];
+    const parser = new DOMParser();
+    const svgDocument = parser.parseFromString(svgContent, "image/svg+xml");
+    const $svg = svgDocument.documentElement;
+    expect($svg.tagName).toBe("svg");
+
+    const $texts = svgDocument.getElementsByTagName("text");
+    expect($texts.length).toBeTruthy();
+
+    const $tspans = svgDocument.getElementsByTagName("tspan");
+    expect($tspans.length).toBe(2);
+    expect($tspans[0].firstChild.data).toBe("_DESC_LINE_1_");
+    expect($tspans[1].firstChild.data).toBe("_DESC_LINE_2_");
+  });
 });

utils/render.ts

@@ -185,6 +185,26 @@ export const getDesc = (
 ) => {
   if (desc === "" || desc === undefined) return "";
 
+  const lines = desc.split("-nl-");
+
+  if (lines.length > 1)
+    return `<text
+      text-anchor="middle"
+      alignment-baseline="middle"
+      x="${descAlign}%"
+      y="${descAlignY}%"
+      class="desc"
+      style="fill:#${descColor};"
+    >
+      ${lines
+        .map(
+          (line, i) =>
+            `<tspan x="${descAlign}%" dy="${i === 0 ? 0 : "1em"}">${line}</tspan>`,
+        )
+        .join("")}
+    </text>
+  `;
+
   // debate : adjustable text-anchor|pos-y. not only pos-x
-  return `<text text-anchor="middle" alignment-baseline="middle" x="${descAlign}%" y="${descAlignY}%" class="desc" style="fill:#${descColor};">${desc}</text>`;
+  return `<text text-anchor="middle" alignment-baseline="middle" x="${descAlign}%" y="${descAlignY}%" class="desc" style="fill:#${descColor};">${lines[0]}</text>`;
 };