jspdf-md-renderer 1.2.0

package/dist/utils/doc-helpers.d.ts

@@ -0,0 +1,3 @@
+import jsPDF from 'jspdf';
+import { RenderOption } from '../types';
+export declare const getCharHight: (doc: jsPDF, options: RenderOption) => number;

package/dist/utils/doc-helpers.js

@@ -0,0 +1,3 @@
+export const getCharHight = (doc, options) => {
+    return doc.getTextDimensions('H').h * options.page.defaultLineHeightFactor;
+};

package/dist/utils/handlePageBreak.d.ts

@@ -0,0 +1,6 @@
+import jsPDF from 'jspdf';
+import { RenderOption } from '../types';
+/**
+ * Handles page breaks when content overflows.
+ */
+export declare const HandlePageBreaks: (doc: jsPDF, options: RenderOption) => void;

package/dist/utils/handlePageBreak.js

@@ -0,0 +1,11 @@
+/**
+ * Handles page breaks when content overflows.
+ */
+export const HandlePageBreaks = (doc, options) => {
+    if (typeof options.pageBreakHandler === 'function') {
+        options.pageBreakHandler();
+    }
+    else {
+        doc.addPage(options.page?.format, options.page?.orientation);
+    }
+};

package/dist/utils/justifyText.d.ts

@@ -0,0 +1,15 @@
+import jsPDF from 'jspdf';
+import { WordInfo } from '../types/wordInfo';
+export declare const writeLineJustify: (pdfGen: jsPDF, wordsInfo: WordInfo[], lineLength: number, lineNumber: number, xStart: number, yStart: number, lineHeight: number, textWidth: number, defaultLineHeightFactor: number) => void;
+export declare const writeLastLineJustify: (wordsInfo: WordInfo[], pdfGen: jsPDF, xStart: number, yStart: number, lineNumber: number, lineHeight: number, textWidth: number, defaultLineHeightFactor: number) => void;
+/**
+ *
+ * @param pdfGen jsPDF default Object reference
+ * @param text string text data
+ * @param xStart x point where to render
+ * @param yStart y point where to render
+ * @param textWidth text render area width
+ * @param defaultLineHeightFactor line height factor
+ * @returns end of y cursor point of justified render text data
+ */
+export declare const justifyText: (pdfGen: jsPDF, text: string, xStart: number, yStart: number, textWidth: number, defaultLineHeightFactor: number) => number;

package/dist/utils/justifyText.js

@@ -0,0 +1,53 @@
+// -------- Handle Justify Content for Custome Fonts
+export const writeLineJustify = (pdfGen, wordsInfo, lineLength, lineNumber, xStart, yStart, lineHeight, textWidth, defaultLineHeightFactor) => {
+    const wordSpacing = (textWidth - lineLength) / (wordsInfo.length - 1);
+    let x = xStart;
+    const y = yStart + lineNumber * lineHeight;
+    for (const wordInfo of wordsInfo) {
+        pdfGen.text(wordInfo.text, x, y, {
+            align: 'justify',
+            lineHeightFactor: defaultLineHeightFactor,
+            maxWidth: textWidth,
+        });
+        x += wordInfo.wordLength + wordSpacing;
+    }
+};
+export const writeLastLineJustify = (wordsInfo, pdfGen, xStart, yStart, lineNumber, lineHeight, textWidth, defaultLineHeightFactor) => {
+    const line = wordsInfo.map((x) => x.text).join(' ');
+    pdfGen.text(line, xStart, yStart + lineNumber * lineHeight, {
+        align: 'justify',
+        lineHeightFactor: defaultLineHeightFactor,
+        maxWidth: textWidth,
+    });
+};
+/**
+ *
+ * @param pdfGen jsPDF default Object reference
+ * @param text string text data
+ * @param xStart x point where to render
+ * @param yStart y point where to render
+ * @param textWidth text render area width
+ * @param defaultLineHeightFactor line height factor
+ * @returns end of y cursor point of justified render text data
+ */
+export const justifyText = (pdfGen, text, xStart, yStart, textWidth, defaultLineHeightFactor) => {
+    const lineHeight = pdfGen.getTextDimensions('A').h * defaultLineHeightFactor;
+    const words = text.split(' ');
+    let lineNumber = 0;
+    let wordsInfo = [];
+    let lineLength = 0;
+    for (const word of words) {
+        const wordLength = pdfGen.getTextWidth(word + 'a');
+        if (wordLength + lineLength >= textWidth) {
+            writeLineJustify(pdfGen, wordsInfo, lineLength, lineNumber++, xStart, yStart, lineHeight, textWidth, defaultLineHeightFactor);
+            wordsInfo = [];
+            lineLength = 0;
+        }
+        wordsInfo.push({ text: word, wordLength });
+        lineLength += wordLength;
+    }
+    if (wordsInfo.length > 0) {
+        writeLastLineJustify(wordsInfo, pdfGen, xStart, yStart, lineNumber, lineHeight, textWidth, defaultLineHeightFactor);
+    }
+    return yStart + lineNumber * lineHeight;
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "jspdf-md-renderer",
+  "version": "1.2.0",
+  "description": "A jsPDF utility to render Markdown directly into formatted PDFs with custom designs.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./types": "./dist/types/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "scripts": {
+    "build": "rimraf dist && tsc",
+    "lint": "eslint src/**",
+    "lint:fix": "eslint src/** --fix",
+    "format": "prettier --write .",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepare": "npm run build"
+  },
+  "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": "^2.5.2",
+    "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"
+  }
+}

package/src/enums/mdTokenType.ts

@@ -0,0 +1,18 @@
+export enum MdTokenType {
+    Heading = 'heading',
+    Paragraph = 'paragraph',
+    List = 'list',
+    ListItem = 'list_item',
+    Blockquote = 'blockquote',
+    Code = 'code',
+    Table = 'table',
+    Html = 'html',
+    Hr = 'hr',
+    Image = 'image',
+    Link = 'link',
+    Strong = 'strong',
+    Em = 'em',
+    TableHeader = 'table_header',
+    TableCell = 'table_cell',
+    Raw = 'raw',
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+import { MdTextRender } from './renderer/MdTextRender';
+import { MdTextParser } from './parser/MdTextParser';
+
+export { MdTextRender, MdTextParser };

package/src/parser/MdTextParser.ts

@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { TokensList, marked } from 'marked';
+import { MdTokenType } from '../enums/mdTokenType';
+import { ParsedElement } from '../types/parsedElement';
+
+/**
+ * Parses markdown into tokens and converts to a custom parsed structure.
+ *
+ * @param text - The markdown content to parse.
+ * @returns Parsed markdown elements.
+ */
+export const MdTextParser = async (text: string): Promise<ParsedElement[]> => {
+    const tokens = await marked.lexer(text, { async: true });
+    return convertTokens(tokens);
+};
+
+/**
+ * Convert the markdown tokens to ParsedElements.
+ *
+ * @param tokens - The list of markdown tokens.
+ * @returns Parsed elements in a custom structure.
+ */
+const convertTokens = (tokens: TokensList): ParsedElement[] => {
+    const parsedElements: ParsedElement[] = [];
+    tokens.forEach((token) => {
+        const handler = tokenHandlers[token.type];
+        if (handler) {
+            parsedElements.push(handler(token));
+        } else {
+            parsedElements.push({ type: MdTokenType.Raw, content: token.raw });
+        }
+    });
+    return parsedElements.map((element) =>
+        element.type === MdTokenType.Raw && element.content === '\n\n'
+            ? { ...element, content: element.content.replace('\n\n', '\n') }
+            : element,
+    );
+};
+
+/**
+ * Map each token type to its handler function.
+ */
+const tokenHandlers: Record<string, (token: any) => ParsedElement> = {
+    [MdTokenType.Heading]: (token) => ({
+        type: MdTokenType.Heading,
+        depth: token.depth,
+        content: token.text,
+    }),
+    [MdTokenType.Paragraph]: (token) => ({
+        type: MdTokenType.Paragraph,
+        content: token.text,
+    }),
+    [MdTokenType.List]: (token) => ({
+        type: MdTokenType.List,
+        items: token.items ? convertTokens(token.items) : [],
+    }),
+    [MdTokenType.ListItem]: (token) => ({
+        type: MdTokenType.ListItem,
+        content: token.text,
+        items: token.tokens ? convertTokens(token.tokens) : [],
+    }),
+    [MdTokenType.Code]: (token) => ({
+        type: MdTokenType.Code,
+        lang: token.lang,
+        code: token.text,
+    }),
+    [MdTokenType.Table]: (token) => ({
+        type: MdTokenType.Table,
+        header: token.header.map((header: any) => ({
+            type: MdTokenType.TableHeader,
+            content: header,
+        })),
+        rows: token.rows.map((row: any[]) =>
+            row.map((cell: any) => ({
+                type: MdTokenType.TableCell,
+                content: cell,
+            })),
+        ),
+    }),
+    [MdTokenType.Image]: (token) => ({
+        type: MdTokenType.Image,
+        src: token.href,
+        alt: token.text,
+    }),
+    [MdTokenType.Link]: (token) => ({
+        type: MdTokenType.Link,
+        href: token.href,
+        text: token.text,
+    }),
+    [MdTokenType.Strong]: (token) => ({
+        type: MdTokenType.Strong,
+        content: token.text,
+    }),
+    [MdTokenType.Em]: (token) => ({
+        type: MdTokenType.Em,
+        content: token.text,
+    }),
+};

package/src/renderer/MdTextRender.ts

@@ -0,0 +1,110 @@
+import jsPDF from 'jspdf';
+import { MdTokenType } from '../enums/mdTokenType';
+import { MdTextParser } from '../parser/MdTextParser';
+import { ParsedElement } from '../types/parsedElement';
+import { RenderOption } from '../types/renderOption';
+import { HandlePageBreaks } from '../utils/handlePageBreak';
+import {
+    renderHeading,
+    renderList,
+    renderListItem,
+    renderParagraph,
+    renderRawItem,
+} from './components';
+import { getCharHight } from '../utils/doc-helpers';
+
+/**
+ * Renders parsed markdown text into jsPDF document.
+ *
+ * @param doc - The jsPDF document.
+ * @param text - The markdown content to render.
+ * @param options - The render options (fonts, page margins, etc.).
+ */
+export const MdTextRender = async (
+    doc: jsPDF,
+    text: string,
+    options: RenderOption,
+) => {
+    const parsedElements = await MdTextParser(text);
+    console.log(parsedElements);
+    console.log(doc);
+
+    let y = options.cursor.y;
+    const x = options.cursor.x;
+
+    const renderElement = (
+        element: ParsedElement,
+        indentLevel: number = 0,
+        hasRawBullet: boolean = false,
+    ) => {
+        const indent = indentLevel * options.page.indent;
+        if (
+            y +
+                doc.splitTextToSize(
+                    element.content ?? '',
+                    options.page.maxContentWidth - indent,
+                ).length *
+                    getCharHight(doc, options) >=
+            options.page.maxContentHeight
+        ) {
+            HandlePageBreaks(doc, options);
+            y = options.page.topmargin;
+        }
+
+        switch (element.type) {
+            case MdTokenType.Heading:
+                y = renderHeading(doc, element, x, y, indent, options);
+                break;
+            case MdTokenType.Paragraph:
+                y = renderParagraph(doc, element, x, y, indent, options);
+                break;
+            case MdTokenType.List:
+                y = renderList(
+                    doc,
+                    element,
+                    y,
+                    indentLevel,
+                    options,
+                    renderElement,
+                );
+                break;
+            case MdTokenType.ListItem:
+                y = renderListItem(
+                    doc,
+                    element,
+                    x,
+                    y,
+                    indentLevel,
+                    options,
+                    renderElement,
+                );
+                break;
+            case MdTokenType.Raw:
+                y = renderRawItem(
+                    doc,
+                    element,
+                    x,
+                    y,
+                    indentLevel,
+                    hasRawBullet,
+                    options,
+                );
+                break;
+            default:
+                console.warn(
+                    `Warning: Unsupported element type encountered: ${element.type}. 
+                        If you believe this element type should be supported, please create an issue at:
+                        https://github.com/JeelGajera/jspdf-md-renderer/issues
+                        with details of the element and expected behavior. Thank you for helping improve this library!`,
+                );
+                break;
+        }
+        return y;
+    };
+
+    for (const item of parsedElements) {
+        renderElement(item);
+    }
+
+    options.endCursorYHandler(y);
+};

package/src/renderer/components/heading.ts

@@ -0,0 +1,30 @@
+import jsPDF from 'jspdf';
+import { ParsedElement } from '../../types/parsedElement';
+import { RenderOption } from '../../types/renderOption';
+import { getCharHight } from '../../utils/doc-helpers';
+
+/**
+ * Renders heading elements.
+ */
+const renderHeading = (
+    doc: jsPDF,
+    element: ParsedElement,
+    x: number,
+    y: number,
+    indent: number,
+    options: RenderOption,
+): number => {
+    const size = 6 - (element?.depth ?? 0) > 0 ? 6 - (element?.depth ?? 0) : 0;
+    // doc.setFont(options.font.regular.name, options.font.regular.style);
+    doc.setFontSize(options.page.defaultFontSize + size);
+    doc.text(element?.content ?? '', x + indent, y, {
+        align: 'left',
+        maxWidth: options.page.maxContentWidth - indent,
+    });
+    y += 1.5 * getCharHight(doc, options);
+    // doc.setFont(options.font.light.name, options.font.light.style);
+    doc.setFontSize(options.page.defaultFontSize);
+    return y;
+};
+
+export default renderHeading;

package/src/renderer/components/index.ts

@@ -0,0 +1,5 @@
+export { default as renderHeading } from './heading';
+export { default as renderParagraph } from './paragraph';
+export { default as renderList } from './list';
+export { default as renderListItem } from './listItem';
+export { default as renderRawItem } from './rawItem';

package/src/renderer/components/list.ts

@@ -0,0 +1,28 @@
+import jsPDF from 'jspdf';
+import { ParsedElement } from '../../types/parsedElement';
+import { RenderOption } from '../../types/renderOption';
+import { getCharHight } from '../../utils/doc-helpers';
+
+const renderList = (
+    doc: jsPDF,
+    element: ParsedElement,
+    y: number,
+    indentLevel: number,
+    options: RenderOption,
+    parentElementRenderer: (
+        element: ParsedElement,
+        indentLevel: number,
+        hasRawBullet?: boolean,
+    ) => number,
+): number => {
+    doc.setFontSize(options.page.defaultFontSize);
+    // doc.setFont(options.font.light.name, options.font.light.style);
+    for (const point of element?.items ?? []) {
+        y =
+            parentElementRenderer(point, indentLevel + 1, true) +
+            getCharHight(doc, options) * 0.2; // Recursively render nested list items
+    }
+    return y;
+};
+
+export default renderList;

package/src/renderer/components/listItem.ts

@@ -0,0 +1,62 @@
+import jsPDF from 'jspdf';
+import { ParsedElement } from '../../types/parsedElement';
+import { RenderOption } from '../../types/renderOption';
+import { justifyText } from '../../utils/justifyText';
+import { HandlePageBreaks } from '../../utils/handlePageBreak';
+import { getCharHight } from '../../utils/doc-helpers';
+
+const renderListItem = (
+    doc: jsPDF,
+    element: ParsedElement,
+    x: number,
+    y: number,
+    indentLevel: number,
+    options: RenderOption,
+    parentElementRenderer: (
+        element: ParsedElement,
+        indentLevel: number,
+        hasRawBullet?: boolean,
+    ) => number,
+): number => {
+    const indent = indentLevel * options.page.indent;
+    if (
+        y +
+            doc.splitTextToSize(
+                element.content ?? '',
+                options.page.maxContentWidth - indent,
+            ).length *
+                getCharHight(doc, options) -
+            2 * getCharHight(doc, options) >=
+        options.page.maxContentHeight
+    ) {
+        HandlePageBreaks(doc, options);
+        y = options.page.topmargin;
+    }
+    if (!element.items && element.content) {
+        const lineHeight =
+            doc.getTextWidth(element.content) >
+            options.page.maxContentWidth - indent
+                ? options.page.defaultLineHeightFactor
+                : options.page.defaultLineHeightFactor + 0.4;
+        y =
+            justifyText(
+                doc,
+                '\u2022 ' + element.content,
+                x + indent,
+                y,
+                options.page.maxContentWidth - indent,
+                lineHeight,
+            ) + getCharHight(doc, options);
+    }
+    // Recursively render nested items if they exist
+    if (element.items && element.items.length > 0) {
+        for (const subItem of element.items) {
+            y =
+                parentElementRenderer(subItem, indentLevel + 1, true) +
+                getCharHight(doc, options) * 0.2;
+        }
+    }
+    return y;
+};
+
+export default renderListItem;

package/src/renderer/components/paragraph.ts

@@ -0,0 +1,79 @@
+import jsPDF from 'jspdf';
+import { ParsedElement } from '../../types/parsedElement';
+import { RenderOption } from '../../types/renderOption';
+import { justifyText } from '../../utils/justifyText';
+import { HandlePageBreaks } from '../../utils/handlePageBreak';
+import { getCharHight } from '../../utils/doc-helpers';
+
+/**
+ * Renders paragraph elements.
+ */
+const renderParagraph = (
+    doc: jsPDF,
+    element: ParsedElement,
+    x: number,
+    y: number,
+    indent: number,
+    options: RenderOption,
+): number => {
+    doc.setFontSize(options.page.defaultFontSize);
+    // doc.setFont(options.font.light.name, options.font.light.style);
+    let content = element.content;
+    const lineHeight =
+        doc.getTextDimensions('A').h * options.page.defaultLineHeightFactor;
+    if (
+        y +
+            doc.splitTextToSize(
+                content ?? '',
+                options.page.maxContentWidth - indent,
+            ).length *
+                lineHeight -
+            3 * lineHeight >=
+        options.page.maxContentHeight
+    ) {
+        // ADD Possible text to Page bottom
+        const contentLeft: string[] = doc.splitTextToSize(
+            content ?? '',
+            options.page.maxContentWidth - indent,
+        );
+        const possibleContentLines: string[] = [];
+        const possibleContentY = y;
+        for (let j = 0; j < contentLeft.length; j++) {
+            if (y - 2 * lineHeight < options.page.maxContentHeight) {
+                possibleContentLines.push(contentLeft[j]);
+                y += options.page.lineSpace;
+            } else {
+                // set left content to move next page
+                if (j <= contentLeft.length - 1) {
+                    content = contentLeft.slice(j).join('');
+                }
+                break;
+            }
+        }
+        if (possibleContentLines.length > 0) {
+            y = justifyText(
+                doc,
+                possibleContentLines.join(' '),
+                x + indent,
+                possibleContentY,
+                options.page.maxContentWidth - indent,
+                options.page.defaultLineHeightFactor,
+            );
+        }
+        HandlePageBreaks(doc, options);
+        y = options.page.topmargin;
+    }
+    y =
+        justifyText(
+            doc,
+            content ?? '',
+            x + indent,
+            y,
+            options.page.maxContentWidth - indent,
+            options.page.defaultLineHeightFactor,
+        ) + getCharHight(doc, options);
+
+    return y;
+};
+
+export default renderParagraph;

package/src/renderer/components/rawItem.ts

@@ -0,0 +1,35 @@
+import jsPDF from 'jspdf';
+import { ParsedElement } from '../../types/parsedElement';
+import { RenderOption } from '../../types/renderOption';
+import { HandlePageBreaks } from '../../utils/handlePageBreak';
+import { getCharHight } from '../../utils/doc-helpers';
+
+const renderRawItem = (
+    doc: jsPDF,
+    element: ParsedElement,
+    x: number,
+    y: number,
+    indentLevel: number,
+    hasRawBullet: boolean,
+    options: RenderOption,
+): number => {
+    const indent = indentLevel * options.page.indent;
+    const bullet = hasRawBullet ? '\u2022 ' : ''; // unicode for bullet point
+    const lines = doc.splitTextToSize(
+        bullet + element.content,
+        options.page.maxContentWidth - indent,
+    );
+    if (
+        y + lines.length * getCharHight(doc, options) >=
+        options.page.maxContentHeight
+    ) {
+        HandlePageBreaks(doc, options);
+        y = options.page.topmargin;
+    }
+    doc.text(lines, x + indent, y);
+    y += lines.length * getCharHight(doc, options);
+
+    return y;
+};
+
+export default renderRawItem;

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './parsedElement';
+export * from './renderOption';

package/src/types/parsedElement.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type ParsedElement = {
+    type: string;
+    content?: string;
+    depth?: number;
+    items?: ParsedElement[];
+    lang?: string;
+    code?: string;
+    src?: string;
+    alt?: string;
+    href?: string;
+    text?: string;
+    header?: { type?: string; content?: any };
+    rows?: { type?: string; content?: any };
+};