jspdf-md-renderer 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jeel Gajera
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,161 @@
+# jsPDF Markdown Renderer
+
+A jsPDF utility to render Markdown directly into formatted PDFs with custom designs.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [API](#api)
+- [Examples](#examples)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Installation
+
+To install the library, you can use npm:
+
+```sh
+npm install jspdf-md-renderer
+```
+
+## Usage
+
+### Basic Example
+
+Here is a basic example of how to use the library to generate a PDF from Markdown content:
+
+```ts
+import { jsPDF } from 'jspdf';
+import { MdTextRender } from 'jspdf-md-renderer';
+
+const mdString = `
+# Main Title
+
+This is a brief introduction paragraph. It sets the tone for the document and introduces the main topic in a concise manner.
+
+## Section 1: Overview
+
+Here is a medium-length paragraph that goes into more detail about the first section. It explains the context, provides background information, and sets up the discussion for the subsections.
+
+## Section 2: Lists and Examples
+
+This section showcases how to create simple and nested lists.
+
+### Simple List
+
+- Item 1
+- Item 2
+- Item 3
+
+### Nested List
+
+1. First Level 1
+   - First Level 2
+     - First Level 3
+2. Second Level 1
+   - Second Level 2
+   - Another Second Level 2
+     - Nested deeper
+
+### Mixed List Example
+
+- Topic 1
+  1. Subtopic 1.1
+  2. Subtopic 1.2
+- Topic 2
+  - Subtopic 2.1
+  - Subtopic 2.2
+    1. Nested Subtopic 2.2.1
+    2. Nested Subtopic 2.2.2
+
+`;
+
+const generatePDF = async () => {
+    const doc = new jsPDF({
+        unit: 'mm',
+        format: 'a4',
+        orientation: 'portrait',
+    });
+
+    const options = {
+        cursor: { x: 10, y: 10 },
+        page: {
+            format: 'a4',
+            unit: 'mm',
+            orientation: 'portrait',
+            maxContentWidth: 190,
+            maxContentHeight: 277,
+            lineSpace: 1.5,
+            defaultLineHeightFactor: 1.2,
+            defaultFontSize: 12,
+            defaultTitleFontSize: 14,
+            topmargin: 10,
+            xpading: 10,
+            xmargin: 10,
+            indent: 10,
+        },
+        font: {
+            bold: { name: 'helvetica', style: 'bold' },
+            regular: { name: 'helvetica', style: 'normal' },
+            light: { name: 'helvetica', style: 'light' },
+        },
+        endCursorYHandler: (y) => {
+            console.log('End cursor Y position:', y);
+        },
+    };
+
+    await MdTextRender(doc, mdString, options);
+    doc.save('example.pdf');
+};
+
+generatePDF();
+```
+
+## API
+
+### `MdTextRender`
+
+Renders parsed markdown text into a jsPDF document.
+
+#### Parameters
+
+- `doc`: The jsPDF document instance.
+- `text`: The markdown content to render.
+- `options`: The render options (fonts, page margins, etc.).
+
+### `MdTextParser`
+
+Parses markdown into tokens and converts to a custom parsed structure.
+
+#### Parameters
+
+- `text`: The markdown content to parse.
+
+#### Returns
+
+- `Promise<ParsedElement[]>`: Parsed markdown elements.
+
+
+## Supported Markdown Elements
+
+The following Markdown elements are currently supported by `jspdf-md-renderer`:
+
+- **Headings**: `#`, `##`, `###`, etc.
+- **Paragraphs**
+- **Lists**:
+  - Unordered lists: `-`, `*`, `+`
+  - Ordered lists: `1.`, `2.`, `3.`, etc.
+
+
+## Examples
+
+You can find more examples in the [examples](examples/test-pdf-gen) directory.
+
+## Contributing
+
+Contributions are welcome! Please read the [contributing guidelines](CONTRIBUTING.md) first.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

package/dist/enums/mdTokenType.d.ts

@@ -0,0 +1,18 @@
+export declare 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/dist/enums/mdTokenType.js

@@ -0,0 +1,19 @@
+export var MdTokenType;
+(function (MdTokenType) {
+    MdTokenType["Heading"] = "heading";
+    MdTokenType["Paragraph"] = "paragraph";
+    MdTokenType["List"] = "list";
+    MdTokenType["ListItem"] = "list_item";
+    MdTokenType["Blockquote"] = "blockquote";
+    MdTokenType["Code"] = "code";
+    MdTokenType["Table"] = "table";
+    MdTokenType["Html"] = "html";
+    MdTokenType["Hr"] = "hr";
+    MdTokenType["Image"] = "image";
+    MdTokenType["Link"] = "link";
+    MdTokenType["Strong"] = "strong";
+    MdTokenType["Em"] = "em";
+    MdTokenType["TableHeader"] = "table_header";
+    MdTokenType["TableCell"] = "table_cell";
+    MdTokenType["Raw"] = "raw";
+})(MdTokenType || (MdTokenType = {}));

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/parser/MdTextParser.d.ts

@@ -0,0 +1,8 @@
+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 declare const MdTextParser: (text: string) => Promise<ParsedElement[]>;

package/dist/parser/MdTextParser.js

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { marked } from 'marked';
+import { MdTokenType } from '../enums/mdTokenType';
+/**
+ * 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) => {
+    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) => {
+    const parsedElements = [];
+    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 = {
+    [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) => ({
+            type: MdTokenType.TableHeader,
+            content: header,
+        })),
+        rows: token.rows.map((row) => row.map((cell) => ({
+            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/dist/renderer/MdTextRender.d.ts

@@ -0,0 +1,10 @@
+import jsPDF from 'jspdf';
+import { RenderOption } from '../types/renderOption';
+/**
+ * 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 declare const MdTextRender: (doc: jsPDF, text: string, options: RenderOption) => Promise<void>;

package/dist/renderer/MdTextRender.js

@@ -0,0 +1,57 @@
+import { MdTokenType } from '../enums/mdTokenType';
+import { MdTextParser } from '../parser/MdTextParser';
+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, text, options) => {
+    const parsedElements = await MdTextParser(text);
+    console.log(parsedElements);
+    console.log(doc);
+    let y = options.cursor.y;
+    const x = options.cursor.x;
+    const renderElement = (element, indentLevel = 0, hasRawBullet = 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/dist/renderer/components/heading.d.ts

@@ -0,0 +1,8 @@
+import jsPDF from 'jspdf';
+import { ParsedElement } from '../../types/parsedElement';
+import { RenderOption } from '../../types/renderOption';
+/**
+ * Renders heading elements.
+ */
+declare const renderHeading: (doc: jsPDF, element: ParsedElement, x: number, y: number, indent: number, options: RenderOption) => number;
+export default renderHeading;

package/dist/renderer/components/heading.js

@@ -0,0 +1,18 @@
+import { getCharHight } from '../../utils/doc-helpers';
+/**
+ * Renders heading elements.
+ */
+const renderHeading = (doc, element, x, y, indent, options) => {
+    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/dist/renderer/components/index.d.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/dist/renderer/components/index.js

@@ -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/dist/renderer/components/list.d.ts

@@ -0,0 +1,5 @@
+import jsPDF from 'jspdf';
+import { ParsedElement } from '../../types/parsedElement';
+import { RenderOption } from '../../types/renderOption';
+declare const renderList: (doc: jsPDF, element: ParsedElement, y: number, indentLevel: number, options: RenderOption, parentElementRenderer: (element: ParsedElement, indentLevel: number, hasRawBullet?: boolean) => number) => number;
+export default renderList;

package/dist/renderer/components/list.js

@@ -0,0 +1,12 @@
+import { getCharHight } from '../../utils/doc-helpers';
+const renderList = (doc, element, y, indentLevel, options, parentElementRenderer) => {
+    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/dist/renderer/components/listItem.d.ts

@@ -0,0 +1,5 @@
+import jsPDF from 'jspdf';
+import { ParsedElement } from '../../types/parsedElement';
+import { RenderOption } from '../../types/renderOption';
+declare const renderListItem: (doc: jsPDF, element: ParsedElement, x: number, y: number, indentLevel: number, options: RenderOption, parentElementRenderer: (element: ParsedElement, indentLevel: number, hasRawBullet?: boolean) => number) => number;
+export default renderListItem;

package/dist/renderer/components/listItem.js

@@ -0,0 +1,32 @@
+import { justifyText } from '../../utils/justifyText';
+import { HandlePageBreaks } from '../../utils/handlePageBreak';
+import { getCharHight } from '../../utils/doc-helpers';
+const renderListItem = (doc, element, x, y, indentLevel, options, parentElementRenderer) => {
+    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/dist/renderer/components/paragraph.d.ts

@@ -0,0 +1,8 @@
+import jsPDF from 'jspdf';
+import { ParsedElement } from '../../types/parsedElement';
+import { RenderOption } from '../../types/renderOption';
+/**
+ * Renders paragraph elements.
+ */
+declare const renderParagraph: (doc: jsPDF, element: ParsedElement, x: number, y: number, indent: number, options: RenderOption) => number;
+export default renderParagraph;

package/dist/renderer/components/paragraph.js

@@ -0,0 +1,44 @@
+import { justifyText } from '../../utils/justifyText';
+import { HandlePageBreaks } from '../../utils/handlePageBreak';
+import { getCharHight } from '../../utils/doc-helpers';
+/**
+ * Renders paragraph elements.
+ */
+const renderParagraph = (doc, element, x, y, indent, options) => {
+    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 = doc.splitTextToSize(content ?? '', options.page.maxContentWidth - indent);
+        const possibleContentLines = [];
+        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/dist/renderer/components/rawItem.d.ts

@@ -0,0 +1,5 @@
+import jsPDF from 'jspdf';
+import { ParsedElement } from '../../types/parsedElement';
+import { RenderOption } from '../../types/renderOption';
+declare const renderRawItem: (doc: jsPDF, element: ParsedElement, x: number, y: number, indentLevel: number, hasRawBullet: boolean, options: RenderOption) => number;
+export default renderRawItem;

package/dist/renderer/components/rawItem.js

@@ -0,0 +1,16 @@
+import { HandlePageBreaks } from '../../utils/handlePageBreak';
+import { getCharHight } from '../../utils/doc-helpers';
+const renderRawItem = (doc, element, x, y, indentLevel, hasRawBullet, options) => {
+    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/dist/types/index.d.ts

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

package/dist/types/index.js

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

package/dist/types/parsedElement.d.ts

@@ -0,0 +1,20 @@
+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;
+    };
+};

package/dist/types/parsedElement.js

@@ -0,0 +1 @@
+export {};

package/dist/types/renderOption.d.ts

@@ -0,0 +1,37 @@
+import { jsPDFOptions } from 'jspdf';
+export type RenderOption = {
+    cursor: {
+        x: number;
+        y: number;
+    };
+    page: {
+        format?: string | number[];
+        unit?: jsPDFOptions['unit'];
+        orientation?: jsPDFOptions['orientation'];
+        maxContentWidth: number;
+        maxContentHeight: number;
+        lineSpace: number;
+        defaultLineHeightFactor: number;
+        defaultFontSize: number;
+        defaultTitleFontSize: number;
+        topmargin: number;
+        xpading: number;
+        xmargin: number;
+        indent: number;
+    };
+    font: {
+        bold: FontItem;
+        regular: FontItem;
+        light: FontItem;
+    };
+    content?: {
+        textAlignment: 'left' | 'right' | 'center' | 'justify';
+    };
+    pageBreakHandler?: () => void;
+    endCursorYHandler: (y: number) => void;
+};
+type FontItem = {
+    name: string;
+    style: string;
+};
+export {};

package/dist/types/renderOption.js

@@ -0,0 +1 @@
+export {};

package/dist/types/wordInfo.d.ts

@@ -0,0 +1,4 @@
+export type WordInfo = {
+    text: string;
+    wordLength: number;
+};

package/dist/types/wordInfo.js

@@ -0,0 +1 @@
+export {};