fix(renderer): adjust long text rendering and indentation for list items and raw items

JeelGajera · JeelGajera · commit c18a0e9294cd · 2025-05-03T19:53:54.000+05:30
chore(deps): update dependencies - [globals, eslint-config-prettier]
diff --git a/package.json b/package.json
@@ -1,69 +1,69 @@
 {
-  "name": "jspdf-md-renderer",
-  "version": "1.6.0",
-  "description": "A jsPDF utility to render Markdown directly into formatted PDFs with custom designs.",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+    "name": "jspdf-md-renderer",
+    "version": "1.6.0",
+    "description": "A jsPDF utility to render Markdown directly into formatted PDFs with custom designs.",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./types": "./dist/types/index.d.ts"
     },
-    "./types": "./dist/types/index.d.ts"
-  },
-  "files": [
-    "dist",
-    "types",
-    "LICENSE",
-    "README.md"
-  ],
-  "scripts": {
-    "dev": "npm run format && npm run lint:fix && npm run build",
-    "build": "rimraf dist && vite build",
-    "lint": "eslint src/**",
-    "lint:fix": "eslint src/** --fix",
-    "format": "prettier --write .",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "prepare": "npm run build",
-    "watch": "vite build --watch"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/JeelGajera/jspdf-md-renderer.git"
-  },
-  "keywords": [
-    "jspdf",
-    "markdown",
-    "pdf",
-    "renderer"
-  ],
-  "author": "Jeel Gajera <jeelgajera200@gmail.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/JeelGajera/jspdf-md-renderer/issues"
-  },
-  "homepage": "https://github.com/JeelGajera/jspdf-md-renderer#readme",
-  "dependencies": {
-    "jspdf": "^3.0.1",
-    "jspdf-md-renderer": "file:",
-    "marked": "^15.0.3"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.16.0",
-    "@types/node": "^22.10.2",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
-    "eslint": "^9.16.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "globals": "^15.13.0",
-    "prettier": "^3.4.2",
-    "rimraf": "^6.0.1",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.0",
-    "vite": "^6.2.4",
-    "vite-plugin-dts": "^4.5.3"
-  }
+    "files": [
+        "dist",
+        "types",
+        "LICENSE",
+        "README.md"
+    ],
+    "scripts": {
+        "dev": "npm run format && npm run lint:fix && npm run build",
+        "build": "rimraf dist && vite build",
+        "lint": "eslint src/**",
+        "lint:fix": "eslint src/** --fix",
+        "format": "prettier --write .",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "prepare": "npm run build",
+        "watch": "vite build --watch"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/JeelGajera/jspdf-md-renderer.git"
+    },
+    "keywords": [
+        "jspdf",
+        "markdown",
+        "pdf",
+        "renderer"
+    ],
+    "author": "Jeel Gajera <jeelgajera200@gmail.com>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/JeelGajera/jspdf-md-renderer/issues"
+    },
+    "homepage": "https://github.com/JeelGajera/jspdf-md-renderer#readme",
+    "dependencies": {
+        "jspdf": "^3.0.1",
+        "jspdf-md-renderer": "file:",
+        "marked": "^15.0.3"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.16.0",
+        "@types/node": "^22.10.2",
+        "@typescript-eslint/eslint-plugin": "^8.18.0",
+        "@typescript-eslint/parser": "^8.18.0",
+        "eslint": "^9.16.0",
+        "eslint-config-prettier": "^10.1.2",
+        "eslint-plugin-prettier": "^5.2.1",
+        "globals": "^16.0.0",
+        "prettier": "^3.4.2",
+        "rimraf": "^6.0.1",
+        "typescript": "^5.7.2",
+        "typescript-eslint": "^8.18.0",
+        "vite": "^6.2.4",
+        "vite-plugin-dts": "^4.5.3"
+    }
 }
diff --git a/src/renderer/components/inlineText.ts b/src/renderer/components/inlineText.ts
@@ -29,7 +29,7 @@ const renderInlineText = (
             case 'italic':
                 return 1.5;
             case 'bolditalic':
-                return 2.5;
+                return 1.5;
             default:
                 return 0;
         }
@@ -61,19 +61,60 @@ const renderInlineText = (
             doc.setFont(options.font.regular.name, currentFontStyle);
         }
 
-        const textWidth = doc.getTextWidth(text);
-        // Check for line break
-        if (
-            cursor.x + textWidth >
-            options.page.xpading + options.page.maxContentWidth
-        ) {
-            cursor.x = options.page.xpading;
+        // Calculate available width for text
+        const availableWidth = options.page.maxContentWidth - indent - cursor.x;
+
+        // Split text into lines
+        const textLines = doc.splitTextToSize(text, availableWidth);
+
+        // Render lines
+        if (textLines.length > 1) {
+            // If the text is too long, adjust the cursor position for each line
+            // render firstline i availabe width
+            // and rest of the content in the next line with up to indent
+            const firstLine = textLines[0];
+            const restContent = textLines?.slice(1)?.join(' ');
+            // render first line
+            doc.text(
+                firstLine,
+                cursor.x + (indent >= 2 ? indent + 2 * spaceMultiplier(style) : 0),
+                cursor.y,
+                {
+                    baseline: 'top',
+                    maxWidth: availableWidth,
+                },
+            );
+
+            // update cursor position
+            cursor.x = indent;
             cursor.y += getCharHight(doc, options);
+
+            // render rest of the content in the next line with up to indent
+            const maxWidthForRest =
+                options.page.maxContentWidth -
+                indent -
+                options.page.xpading -
+                options.page.xmargin;
+            const restLines = doc.splitTextToSize(restContent, maxWidthForRest);
+            restLines.forEach((line: string) => {
+                doc.text(line, cursor.x + indent, cursor.y, {
+                    baseline: 'top',
+                    maxWidth: maxWidthForRest,
+                });
+                // update cursor position
+                cursor.x = indent;
+                cursor.y += getCharHight(doc, options);
+            });
+        } else {
+            doc.text(text, cursor.x + indent, cursor.y, {
+                baseline: 'top',
+                maxWidth: availableWidth,
+            });
+            cursor.x +=
+                doc.getTextDimensions(text).w +
+                (indent >= 2 ? text.split(' ').length + 2 : 2) *
+                    spaceMultiplier(style);
         }
-        const spaceWidth = doc.getTextWidth(' ');
-        doc.text(text, cursor.x + indent, cursor.y, { baseline: 'top' });
-        cursor.x +=
-            textWidth + (spaceWidth * spaceMultiplier(style)) + (style === 'normal'? indent*.7 : 0);
     };
 
     // Handle the element based on its type
diff --git a/src/renderer/components/listItem.ts b/src/renderer/components/listItem.ts
@@ -20,18 +20,21 @@ const renderListItem = (
         indentLevel: number,
         hasRawBullet?: boolean,
         start?: number,
-        ordered?: boolean
+        ordered?: boolean,
     ) => Cursor,
     start: number,
-    ordered: boolean
+    ordered: boolean,
 ): Cursor => {
     // We'll calculate a base indent so list items at the same level are aligned
     const baseIndent = indentLevel * options.page.indent;
     // The bullet or number for this item
     const bullet = ordered ? `${start}. ` : '\u2022 ';
 
     // If we are close to bottom, do a page break
-    if (cursor.y + getCharHight(doc, options) >= options.page.maxContentHeight) {
+    if (
+        cursor.y + getCharHight(doc, options) >=
+        options.page.maxContentHeight
+    ) {
         HandlePageBreaks(doc, options);
         cursor.y = options.page.topmargin;
     }
@@ -60,15 +63,28 @@ const renderListItem = (
 
             if (subItem.type === MdTokenType.List) {
                 // A sub-list is always an extra level of indent
-                parentElementRenderer(subItem, indentLevel + 1, true, start, subItem.ordered ?? false);
+                parentElementRenderer(
+                    subItem,
+                    indentLevel + 1,
+                    true,
+                    start,
+                    subItem.ordered ?? false,
+                );
             } else if (subItem.type === MdTokenType.ListItem) {
-                // Same level if parent is a list, 
+                // Same level if parent is a list,
                 // otherwise if the parent is a list_item, it's nested => indent + 1
                 const newIndentLevel =
                     element.type === MdTokenType.List
                         ? indentLevel
                         : indentLevel + 1;
-                parentElementRenderer(subItem, newIndentLevel, true, start, ordered);
+                
+                parentElementRenderer(
+                    subItem,
+                    newIndentLevel,
+                    true,
+                    start,
+                    ordered,
+                );
             } else {
                 // Inline content (e.g., emphasis, text, strong)
                 // Render on the same line (indented after bullet)
@@ -86,13 +102,24 @@ const renderListItem = (
             cursor.y += getCharHight(doc, options);
         }
     } else if (element.content) {
-        // No nested items, just text content
-        doc.text(
+        // handle text with line breaks page break & multiple lines texts
+        const textLines = doc.splitTextToSize(
             element.content,
+            options.page.maxContentWidth - baseIndent - cursor.x,
+        );
+        // Render text
+        doc.text(
+            textLines,
             cursor.x + baseIndent,
             cursor.y,
-            { baseline: 'top' }
+            {
+                baseline: 'top',
+                maxWidth: options.page.maxContentWidth - baseIndent - cursor.x,
+            },
         );
+        // Update cursor position\
+        cursor.y += getCharHight(doc, options) * textLines.length;
+        cursor.x = options.page.xmargin + baseIndent;
         // Move the cursor forward by the text width
         const contentWidth = doc.getTextWidth(element.content);
         cursor.x += contentWidth;
diff --git a/src/renderer/components/rawItem.ts b/src/renderer/components/rawItem.ts
@@ -64,12 +64,9 @@ const renderRawItem = (
             cursor.x = options.page.xpading;
         } else {
             // Print text
-            doc.text(
-                bullet + element.content,
-                cursor.x + indent,
-                cursor.y,
-                { baseline: 'top' },
-            );
+            doc.text(bullet + element.content, cursor.x + indent, cursor.y, {
+                baseline: 'top',
+            });
             // Move x forward
             cursor.x += doc.getTextWidth(bullet + element.content);
             // Handle page break
@@ -79,7 +76,7 @@ const renderRawItem = (
             ) {
                 HandlePageBreaks(doc, options);
                 cursor.x = options.page.xpading;
-                cursor.y += getCharHight(doc, options);
+                cursor.y = options.page.topmargin;
             }
         }
     }
