@jsenv/terminal-recorder 1.1.6 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/terminal-recorder",
-  "version": "1.1.6",
+  "version": "1.1.9",
   "description": "Record terminal output as .svg, .gif, .webm, .mp4",
   "license": "MIT",
   "repository": {
@@ -32,7 +32,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/server": "15.2.9",
+    "@jsenv/server": "15.2.10",
     "@playwright/browser-webkit": "1.45.1",
     "ansi-regex": "6.0.1",
     "he": "1.2.0",

package/src/svg/parse_ansi.js

@@ -143,6 +143,7 @@ export const parseAnsi = (ansi) => {
       styleState.strikethrough = false;
     },
     reset: () => {
+      styleState.underline = false;
       styleState.strikethrough = false;
       styleState.inverse = false;
       styleState.italic = false;

package/src/svg/render_terminal_svg.js

@@ -206,10 +206,9 @@ export const renderTerminalSvg = async (
       if (type !== "text") {
         continue;
       }
-
       const { position } = chunk;
       const x =
-        offsetLeft + adjustXforWhitespace(value, position.x) * font.width;
+        offsetLeft + (position.x + leadingWhitespaceWidth(value)) * font.width;
       const y = offsetTop + position.y + font.lineHeight * position.y;
       const w = font.width * value.length;
       const attrs = {};
@@ -244,7 +243,7 @@ export const renderTerminalSvg = async (
       }
 
       // Underline & Strikethrough:
-      // Some SVG implmentations do not support underline and
+      // Some SVG implementations do not support underline and
       // strikethrough for <text> elements (see Sketch 49.2)
       if (style.underline) {
         const yOffset = font.height * 0.14;
@@ -267,14 +266,10 @@ export const renderTerminalSvg = async (
         textContainer.appendChild(path);
       }
 
-      // Do not output elements containing whitespace with no style
-      if (
-        value.replace(/ /g, "").length === 0 &&
-        Object.keys(attrs).length === 0
-      ) {
+      if (value.trim() === "") {
+        // Do not output elements containing only whitespace
         continue;
       }
-
       const text = svg.createNode("text", {
         x,
         y,
@@ -294,7 +289,11 @@ export const renderTerminalSvg = async (
 
 // Some SVG Implementations drop whitespaces
 // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xml:space
-const adjustXforWhitespace = (text, x) => {
+// and https://codepen.io/dmail/pen/wvLvbbP
+const leadingWhitespaceWidth = (text) => {
+  if (text.trim() === "") {
+    return 0;
+  }
   const leadingSpace = text.match(/^\s*/g);
-  return x + leadingSpace[0].length;
+  return leadingSpace[0].length;
 };

package/src/svg/xml_generator.js

@@ -1,21 +1,31 @@
 import he from "he";
 
+export const encodeTextContent = (content) => {
+  return he.encode(content, {
+    decimal: false,
+  });
+};
+
 export const createXmlGenerator = ({
   rootNodeName,
   canSelfCloseNames = [],
   canReceiveChildNames = [],
   canReceiveContentNames = [],
+  canInjectWhitespacesAroundContentNames = [],
 }) => {
   const createNode = (name, attributes = {}) => {
     const canSelfClose = canSelfCloseNames.includes(name);
     const canReceiveChild = canReceiveChildNames.includes(name);
     const canReceiveContent = canReceiveContentNames.includes(name);
+    const canInjectWhitespacesAroundContent =
+      canInjectWhitespacesAroundContentNames.includes(name);
 
     const children = [];
 
     const node = {
       name,
       content: "",
+      contentIsSafe: false,
       children,
       attributes,
       canSelfClose,
@@ -27,11 +37,12 @@ export const createXmlGenerator = ({
         children.push(childNode);
         return childNode;
       },
-      setContent: (value) => {
+      setContent: (value, isSafe = false) => {
         if (!canReceiveContent) {
           throw new Error(`cannot setContent on ${name}`);
         }
         node.content = value;
+        node.contentIsSafe = isSafe;
       },
       renderAsString: () => {
         const renderNode = (node, { depth }) => {
@@ -73,13 +84,17 @@ export const createXmlGenerator = ({
 
           let innerHTML = "";
           if (node.content) {
-            if (node.name !== "text") {
+            if (canInjectWhitespacesAroundContent) {
               innerHTML += "\n  ";
               innerHTML += "  ".repeat(depth);
             }
-            const contentEncoded = he.encode(node.content, { decimal: false });
-            innerHTML += contentEncoded;
-            if (node.name !== "text") {
+            if (node.contentIsSafe) {
+              innerHTML += node.content;
+            } else {
+              const contentEncoded = encodeTextContent(node.content);
+              innerHTML += contentEncoded;
+            }
+            if (canInjectWhitespacesAroundContent) {
               innerHTML += "\n";
               innerHTML += "  ".repeat(depth);
             }
@@ -127,7 +142,8 @@ export const createSvgRootNode = createXmlGenerator({
   rootNodeName: "svg",
   canSelfCloseNames: ["path", "rect", "circle"],
   canReceiveChildNames: ["svg", "foreignObject", "g"],
-  canReceiveContentNames: ["text", "style"],
+  canReceiveContentNames: ["text", "tspan", "style"],
+  canInjectWhitespacesAroundContentNames: ["style"],
 });
 
 // not used for now and needs to configure canReceiveChildNames and so on...