Version bump

Static Packer

.gitignore

@@ -60,3 +60,6 @@ My Document.docx
 
 # Temporary folder
 tmp
+
+# nyc
+.nyc_output

.nycrc

@@ -0,0 +1,25 @@
+{
+  "check-coverage": true,
+  "lines": 87.54,
+  "functions": 83.61,
+  "branches": 72.57,
+  "statements": 87.32,
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ],
+  "reporter": [
+    "lcov",
+    "text",
+    "json"
+  ],
+  "extension": [
+    ".ts"
+  ],
+  "cache": true,
+  "all": true,
+  "instrument": false,
+  "sourceMap": true
+}

.travis.yml

@@ -3,41 +3,56 @@ node_js:
   - 9
 install:
   - npm install
+  - npm install -g codecov
 script:
   - npm run lint
-  - npm test
+  - npm run test.coverage
   - npm run style
   - npm run build
-  - npm run ts-node -- ./demo/demo1.ts
-  - npm run ts-node -- ./demo/demo2.ts
-  - npm run ts-node -- ./demo/demo3.ts
-  - npm run ts-node -- ./demo/demo4.ts
-  - npm run ts-node -- ./demo/demo5.ts
-  - npm run ts-node -- ./demo/demo6.ts
-  - npm run ts-node -- ./demo/demo7.ts
-  - npm run ts-node -- ./demo/demo8.ts
-  - npm run ts-node -- ./demo/demo9.ts
-  - npm run ts-node -- ./demo/demo10.ts
-  - npm run ts-node -- ./demo/demo11.ts
-  - npm run ts-node -- ./demo/demo12.ts
-  - npm run ts-node -- ./demo/demo13.ts
-  - npm run ts-node -- ./demo/demo14.ts
-  - npm run ts-node -- ./demo/demo15.ts
-  - npm run ts-node -- ./demo/demo16.ts
-  - npm run ts-node -- ./demo/demo17.ts
-  - npm run ts-node -- ./demo/demo18.ts
-  - npm run ts-node -- ./demo/demo19.ts
-  - npm run ts-node -- ./demo/demo20.ts
-  - npm run ts-node -- ./demo/demo21.ts
-  - npm run ts-node -- ./demo/demo22.ts
-  - npm run ts-node -- ./demo/demo23.ts
-  - npm run ts-node -- ./demo/demo24.ts
+  - npm run ts-node -- ./demo/1-basic.ts
+  - npm run e2e "My Document.docx"
+  - npm run ts-node -- ./demo/2-declaritive-styles.ts
+  - npm run ts-node -- ./demo/3-numbering-and-bullet-points.ts
+  - npm run ts-node -- ./demo/4-basic-table.ts
+  - npm run ts-node -- ./demo/5-images.ts
+  - npm run ts-node -- ./demo/6-page-borders.ts
+  - npm run ts-node -- ./demo/7-landscape.ts
+  - npm run ts-node -- ./demo/8-header-footer.ts
+  - npm run ts-node -- ./demo/9-images-in-header-and-footer.ts
+  - npm run ts-node -- ./demo/10-my-cv.ts
+  - npm run e2e "My Document.docx"
+  - npm run ts-node -- ./demo/11-declaritive-styles-2.ts
+  - npm run ts-node -- ./demo/12-scaling-images.ts
+  - npm run ts-node -- ./demo/13-xml-styles.ts
+  - npm run ts-node -- ./demo/14-page-numbers.ts
+  - npm run ts-node -- ./demo/15-page-break-before.ts
+  - npm run ts-node -- ./demo/16-multiple-sections.ts
+  - npm run ts-node -- ./demo/17-footnotes.ts
+  - npm run ts-node -- ./demo/18-image-from-buffer.ts
+  - npm run ts-node -- ./demo/19-export-to-base64.ts
+  - npm run ts-node -- ./demo/20-table-cell-borders.ts
+  - npm run ts-node -- ./demo/21-bookmarks.ts
+  - npm run ts-node -- ./demo/22-right-to-left-text.ts
+  - npm run ts-node -- ./demo/23-base64-images.ts
+  - npm run ts-node -- ./demo/24-images-to-table-cell.ts
+#   - npm run ts-node -- ./demo/demo25.ts
+  - npm run ts-node -- ./demo/26-paragraph-borders.ts
+  - npm run ts-node -- ./demo/27-declaritive-styles-3.ts
+  - npm run ts-node -- ./demo/28-table-of-contents.ts
+  - npm run ts-node -- ./demo/29-numbered-lists.ts
+  - npm run ts-node -- ./demo/30-template-document.ts
+  - npm run ts-node -- ./demo/31-tables.ts
+  - npm run ts-node -- ./demo/32-merge-table-cells.ts
+#   - npm run e2e "My Document.docx" // Need to fix
+  - npm run ts-node -- ./demo/33-sequential-captions.ts
+  - npm run ts-node -- ./demo/34-floating-tables.ts
 after_failure:
   - "cat /home/travis/builds/dolanmiu/docx/npm-debug.log"
 after_success:
   - npm run typedoc
   - echo "docx.js.org" > docs/.nojekyll
   - echo "docx.js.org" > docs/CNAME
+  - codecov
 deploy:
   provider: pages
   skip-cleanup: true

.vscode/tasks.json

@@ -0,0 +1,24 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "typescript",
+            "tsconfig": "tsconfig.json",
+            "option": "watch",
+            "problemMatcher": [
+                "$tsc-watch"
+            ]
+        },
+        {
+            "type": "npm",
+            "script": "ts-node",
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        }
+    ]
+}

README.md

@@ -15,6 +15,7 @@
 [![Known Vulnerabilities][snky-image]][snky-url]
 [![Chat on Gitter][gitter-image]][gitter-url]
 [![PRs Welcome][pr-image]][pr-url]
+[![codecov][codecov-image]][codecov-url]
 
 <p align="center">
     <img src="https://i.imgur.com/H5FA1Qy.gif" alt="drawing" width="800"/>
@@ -24,11 +25,15 @@
 
 ## Browser
 
-Here are examples of `docx` being used with basic `HTML/JS` in a browser environment.
+Here are examples of `docx` being used with basic `HTML/JS` in a browser environment:
 
 *   https://codepen.io/anon/pen/dqoVgQ
 *   https://jsfiddle.net/3xhezb5w/2
 
+Here is an example of `docx` working in `Angular`:
+
+*   https://stackblitz.com/edit/angular-afvxtz
+
 ## Node
 
 Press `endpoint` on the `RunKit` website:
@@ -59,8 +64,23 @@ Check the `examples` section in the [documentation](https://docx.js.org/#/exampl
 
 Read the contribution guidelines [here](https://docx.js.org/#/contribution-guidelines).
 
+# Used by
+
+[<img src="https://i.imgur.com/zy5qWmI.png" alt="drawing" height="50"/>](https://hfour.com/)
+[<img src="https://i.imgur.com/OYP5tgS.png" alt="drawing" height="50"/>](https://fuzzproductions.com/)
+[<img src="https://i.imgur.com/zUDMfZ3.png" alt="drawing" height="50"/>](https://www.mettzer.com/)
+[<img src="https://i.imgur.com/wtNB1uq.png" alt="drawing" height="50"/>](https://www.wisedoc.net/)
+[<img src="https://i.imgur.com/suiH2zc.png" alt="drawing" height="50"/>](https://www.dabblewriter.com/)
+[<img src="https://i.imgur.com/1LjuK2M.png" alt="drawing" height="50"/>](https://turbopatent.com/)
+[<img src="https://i.imgur.com/dHMg0wF.gif" alt="drawing" height="50"/>](http://www.madisoncres.com/)
+
+...and many more!
+
 ---
 
+[![patreon][patreon-image]][patreon-url]
+[![browserstack][browserstack-image]][browserstack-url]
+
 Made with 💖
 
 [npm-image]: https://badge.fury.io/js/docx.svg
@@ -77,3 +97,9 @@ Made with 💖
 [gitter-url]: https://gitter.im/docx-lib/Lobby
 [pr-image]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
 [pr-url]: http://makeapullrequest.com
+[codecov-image]: https://codecov.io/gh/dolanmiu/docx/branch/master/graph/badge.svg
+[codecov-url]: https://codecov.io/gh/dolanmiu/docx
+[patreon-image]: https://user-images.githubusercontent.com/2917613/51251459-4e880480-1991-11e9-92bf-38b96675a9e2.png
+[patreon-url]: https://www.patreon.com/dolanmiu
+[browserstack-image]: https://user-images.githubusercontent.com/2917613/54233552-128e9d00-4505-11e9-88fb-025a4e04007c.png
+[browserstack-url]: https://www.browserstack.com

demo/1-basic.ts

@@ -0,0 +1,29 @@
+// Simple example to add text to a document
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    properties: {},
+    children: [
+        new Paragraph({
+            children: [
+                new TextRun("Hello World"),
+                new TextRun({
+                    text: "Foo Bar",
+                    bold: true,
+                }),
+                new TextRun({
+                    text: "Github is the best",
+                    bold: true,
+                }).tab(),
+            ],
+        }),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/10-my-cv.ts

@@ -1,7 +1,7 @@
-// Add images to header and footer
+// Generate a CV
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, Packer, Paragraph, TextRun } from "../build";
+import { AlignmentType, Document, HeadingLevel, Packer, Paragraph, TextRun } from "../build";
 
 // tslint:disable:no-shadowed-variable
 
@@ -127,150 +127,165 @@ const achievements = [
 ];
 
 class DocumentCreator {
-    public create(data: object[]): Document {
-        // tslint:disable-next-line:no-any
-        const experiences = data[0] as any[];
-        // tslint:disable-next-line:no-any
-        const educations = data[1] as any[];
-        const skills = data[2] as object[];
-        const achivements = data[3] as object[];
+    // tslint:disable-next-line: typedef
+    public create([experiences, educations, skills, achivements]): Document {
         const document = new Document();
-        document.addParagraph(new Paragraph("Dolan Miu").title());
 
-        document.addParagraph(this.createContactInfo(PHONE_NUMBER, PROFILE_URL, EMAIL));
-        document.addParagraph(this.createHeading("Education"));
+        document.addSection({
+            children: [
+                new Paragraph({
+                    text: "Dolan Miu",
+                    heading: HeadingLevel.TITLE,
+                }),
+                this.createContactInfo(PHONE_NUMBER, PROFILE_URL, EMAIL),
+                this.createHeading("Education"),
+                ...educations
+                    .map((education) => {
+                        const arr: Paragraph[] = [];
+                        arr.push(
+                            this.createInstitutionHeader(education.schoolName, `${education.startDate.year} - ${education.endDate.year}`),
+                        );
+                        arr.push(this.createRoleText(`${education.fieldOfStudy} - ${education.degree}`));
 
-        for (const education of educations) {
-            document.addParagraph(
-                this.createInstitutionHeader(education.schoolName, `${education.startDate.year} - ${education.endDate.year}`),
-            );
-            document.addParagraph(this.createRoleText(`${education.fieldOfStudy} - ${education.degree}`));
+                        const bulletPoints = this.splitParagraphIntoBullets(education.notes);
+                        bulletPoints.forEach((bulletPoint) => {
+                            arr.push(this.createBullet(bulletPoint));
+                        });
 
-            const bulletPoints = this.splitParagraphIntoBullets(education.notes);
-            bulletPoints.forEach((bulletPoint) => {
-                document.addParagraph(this.createBullet(bulletPoint));
-            });
-        }
+                        return arr;
+                    })
+                    .reduce((prev, curr) => prev.concat(curr), []),
+                this.createHeading("Experience"),
+                ...experiences
+                    .map((position) => {
+                        const arr: Paragraph[] = [];
 
-        document.addParagraph(this.createHeading("Experience"));
+                        arr.push(
+                            this.createInstitutionHeader(
+                                position.company.name,
+                                this.createPositionDateText(position.startDate, position.endDate, position.isCurrent),
+                            ),
+                        );
+                        arr.push(this.createRoleText(position.title));
 
-        for (const position of experiences) {
-            document.addParagraph(
-                this.createInstitutionHeader(
-                    position.company.name,
-                    this.createPositionDateText(position.startDate, position.endDate, position.isCurrent),
+                        const bulletPoints = this.splitParagraphIntoBullets(position.summary);
+
+                        bulletPoints.forEach((bulletPoint) => {
+                            arr.push(this.createBullet(bulletPoint));
+                        });
+
+                        return arr;
+                    })
+                    .reduce((prev, curr) => prev.concat(curr), []),
+                this.createHeading("Skills, Achievements and Interests"),
+                this.createSubHeading("Skills"),
+                this.createSkillList(skills),
+                this.createSubHeading("Achievements"),
+                ...this.createAchivementsList(achivements),
+                this.createSubHeading("Interests"),
+                this.createInterests("Programming, Technology, Music Production, Web Design, 3D Modelling, Dancing."),
+                this.createHeading("References"),
+                new Paragraph(
+                    "Dr. Dean Mohamedally Director of Postgraduate Studies Department of Computer Science, University College London Malet Place, Bloomsbury, London WC1E d.mohamedally@ucl.ac.uk",
                 ),
-            );
-            document.addParagraph(this.createRoleText(position.title));
+                new Paragraph("More references upon request"),
+                new Paragraph({
+                    text: "This CV was generated in real-time based on my Linked-In profile from my personal website www.dolan.bio.",
+                    alignment: AlignmentType.CENTER,
+                }),
+            ],
+        });
 
-            const bulletPoints = this.splitParagraphIntoBullets(position.summary);
-
-            bulletPoints.forEach((bulletPoint) => {
-                document.addParagraph(this.createBullet(bulletPoint));
-            });
-        }
-
-        document.addParagraph(this.createHeading("Skills, Achievements and Interests"));
-
-        document.addParagraph(this.createSubHeading("Skills"));
-        document.addParagraph(this.createSkillList(skills));
-
-        document.addParagraph(this.createSubHeading("Achievements"));
-
-        for (const achievementParagraph of this.createAchivementsList(achivements)) {
-            document.addParagraph(achievementParagraph);
-        }
-
-        document.addParagraph(this.createSubHeading("Interests"));
-
-        document.addParagraph(this.createInterests("Programming, Technology, Music Production, Web Design, 3D Modelling, Dancing."));
-
-        document.addParagraph(this.createHeading("References"));
-
-        document.addParagraph(
-            new Paragraph(
-                "Dr. Dean Mohamedally Director of Postgraduate Studies Department of Computer Science, University College London Malet Place, Bloomsbury, London WC1E d.mohamedally@ucl.ac.uk",
-            ),
-        );
-        document.addParagraph(new Paragraph("More references upon request"));
-        document.addParagraph(
-            new Paragraph(
-                "This CV was generated in real-time based on my Linked-In profile from my personal website www.dolan.bio.",
-            ).center(),
-        );
         return document;
     }
 
     public createContactInfo(phoneNumber: string, profileUrl: string, email: string): Paragraph {
-        const paragraph = new Paragraph().center();
-        const contactInfo = new TextRun(`Mobile: ${phoneNumber} | LinkedIn: ${profileUrl} | Email: ${email}`);
-        const address = new TextRun("Address: 58 Elm Avenue, Kent ME4 6ER, UK").break();
-
-        paragraph.addRun(contactInfo);
-        paragraph.addRun(address);
-
-        return paragraph;
+        return new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+                new TextRun(`Mobile: ${phoneNumber} | LinkedIn: ${profileUrl} | Email: ${email}`),
+                new TextRun("Address: 58 Elm Avenue, Kent ME4 6ER, UK").break(),
+            ],
+        });
     }
 
     public createHeading(text: string): Paragraph {
-        return new Paragraph(text).heading1().thematicBreak();
+        return new Paragraph({
+            text: text,
+            heading: HeadingLevel.HEADING_1,
+            thematicBreak: true,
+        });
     }
 
     public createSubHeading(text: string): Paragraph {
-        return new Paragraph(text).heading2();
+        return new Paragraph({
+            text: text,
+            heading: HeadingLevel.HEADING_2,
+        });
     }
 
     public createInstitutionHeader(institutionName: string, dateText: string): Paragraph {
-        const paragraph = new Paragraph().maxRightTabStop();
-        const institution = new TextRun(institutionName).bold();
-        const date = new TextRun(dateText).tab().bold();
-
-        paragraph.addRun(institution);
-        paragraph.addRun(date);
-
-        return paragraph;
+        return new Paragraph({
+            tabStop: {
+                maxRight: {},
+            },
+            children: [
+                new TextRun({
+                    text: institutionName,
+                    bold: true,
+                }),
+                new TextRun({
+                    text: dateText,
+                    bold: true,
+                }).tab(),
+            ],
+        });
     }
 
     public createRoleText(roleText: string): Paragraph {
-        const paragraph = new Paragraph();
-        const role = new TextRun(roleText).italic();
-
-        paragraph.addRun(role);
-
-        return paragraph;
+        return new Paragraph({
+            children: [
+                new TextRun({
+                    text: roleText,
+                    italics: true,
+                }),
+            ],
+        });
     }
 
     public createBullet(text: string): Paragraph {
-        return new Paragraph(text).bullet();
+        return new Paragraph({
+            text: text,
+            bullet: {
+                level: 0,
+            },
+        });
     }
 
     // tslint:disable-next-line:no-any
     public createSkillList(skills: any[]): Paragraph {
-        const paragraph = new Paragraph();
-        const skillConcat = skills.map((skill) => skill.name).join(", ") + ".";
-
-        paragraph.addRun(new TextRun(skillConcat));
-
-        return paragraph;
+        return new Paragraph({
+            children: [new TextRun(skills.map((skill) => skill.name).join(", ") + ".")],
+        });
     }
 
     // tslint:disable-next-line:no-any
     public createAchivementsList(achivements: any[]): Paragraph[] {
-        const arr: Paragraph[] = [];
-
-        for (const achievement of achivements) {
-            const paragraph = new Paragraph(achievement.name).bullet();
-            arr.push(paragraph);
-        }
-
-        return arr;
+        return achivements.map(
+            (achievement) =>
+                new Paragraph({
+                    text: achievement.name,
+                    bullet: {
+                        level: 0,
+                    },
+                }),
+        );
     }
 
     public createInterests(interests: string): Paragraph {
-        const paragraph = new Paragraph();
-
-        paragraph.addRun(new TextRun(interests));
-        return paragraph;
+        return new Paragraph({
+            children: [new TextRun(interests)],
+        });
     }
 
     public splitParagraphIntoBullets(text: string): string[] {
@@ -321,8 +336,6 @@ const documentCreator = new DocumentCreator();
 
 const doc = documentCreator.create([experiences, education, skills, achievements]);
 
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
+Packer.toBuffer(doc).then((buffer) => {
     fs.writeFileSync("My Document.docx", buffer);
 });

demo/11-declaritive-styles-2.ts

@@ -0,0 +1,168 @@
+// Setting styles with JavaScript configuration
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { AlignmentType, Document, Footer, HeadingLevel, Media, Packer, Paragraph, Table } from "../build";
+
+const doc = new Document();
+
+doc.Styles.createParagraphStyle("Heading1", "Heading 1")
+    .basedOn("Normal")
+    .next("Normal")
+    .quickFormat()
+    .font("Calibri")
+    .size(52)
+    .center()
+    .bold()
+    .color("000000")
+    .spacing({ line: 340 })
+    .underline("single", "000000");
+
+doc.Styles.createParagraphStyle("Heading2", "Heading 2")
+    .basedOn("Normal")
+    .next("Normal")
+    .font("Calibri")
+    .quickFormat()
+    .size(26)
+    .bold()
+    .spacing({ line: 340 });
+
+doc.Styles.createParagraphStyle("Heading3", "Heading 3")
+    .basedOn("Normal")
+    .next("Normal")
+    .font("Calibri")
+    .quickFormat()
+    .size(26)
+    .bold()
+    .spacing({ line: 276 });
+
+doc.Styles.createParagraphStyle("Heading4", "Heading 4")
+    .basedOn("Normal")
+    .next("Normal")
+    .justified()
+    .font("Calibri")
+    .size(26)
+    .bold();
+
+doc.Styles.createParagraphStyle("normalPara", "Normal Para")
+    .basedOn("Normal")
+    .next("Normal")
+    .font("Calibri")
+    .quickFormat()
+    .leftTabStop(453.543307087)
+    .maxRightTabStop()
+    .size(26)
+    .spacing({ line: 276, before: 20 * 72 * 0.1, after: 20 * 72 * 0.05 });
+
+doc.Styles.createParagraphStyle("normalPara2", "Normal Para2")
+    .basedOn("Normal")
+    .next("Normal")
+    .quickFormat()
+    .font("Calibri")
+    .size(26)
+    .justified()
+    .spacing({ line: 276, before: 20 * 72 * 0.1, after: 20 * 72 * 0.05 });
+
+doc.Styles.createParagraphStyle("aside", "Aside")
+    .basedOn("Normal")
+    .next("Normal")
+    .color("999999")
+    .italics()
+    .indent({ left: 720 })
+    .spacing({ line: 276 });
+
+doc.Styles.createParagraphStyle("wellSpaced", "Well Spaced")
+    .basedOn("Normal")
+    .spacing({ line: 276, before: 20 * 72 * 0.1, after: 20 * 72 * 0.05 });
+
+doc.Styles.createParagraphStyle("ListParagraph", "List Paragraph")
+    .quickFormat()
+    .basedOn("Normal");
+
+const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
+
+const table = new Table({
+    rows: 4,
+    columns: 4,
+});
+table
+    .getRow(0)
+    .getCell(0)
+    .add(new Paragraph("Pole No."));
+
+const image1 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
+const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
+
+doc.addSection({
+    properties: {
+        top: 700,
+        right: 700,
+        bottom: 700,
+        left: 700,
+    },
+    footers: {
+        default: new Footer({
+            children: [
+                new Paragraph({
+                    text: "1",
+                    style: "normalPara",
+                    alignment: AlignmentType.RIGHT,
+                }),
+            ],
+        }),
+    },
+    children: [
+        new Paragraph(image),
+        new Paragraph({
+            text: "HEADING",
+            heading: HeadingLevel.HEADING_1,
+            alignment: AlignmentType.CENTER,
+        }),
+        new Paragraph({
+            text: "Ref. :",
+            style: "normalPara",
+        }),
+        new Paragraph({
+            text: "Date :",
+            style: "normalPara",
+        }),
+        new Paragraph({
+            text: "To,",
+            style: "normalPara",
+        }),
+        new Paragraph({
+            text: "The Superindenting Engineer,(O &M)",
+            style: "normalPara",
+        }),
+        new Paragraph({
+            text: "Sub : ",
+            style: "normalPara",
+        }),
+        new Paragraph({
+            text: "Ref. : ",
+            style: "normalPara",
+        }),
+        new Paragraph({
+            text: "Sir,",
+            style: "normalPara",
+        }),
+        new Paragraph({
+            text: "BRIEF DESCRIPTION",
+            style: "normalPara",
+        }),
+        table,
+        new Paragraph(image1),
+        new Paragraph({
+            text: "Test",
+            style: "normalPara2",
+        }),
+        new Paragraph(image2),
+        new Paragraph({
+            text: "Test 2",
+            style: "normalPara2",
+        }),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/12-scaling-images.ts

@@ -0,0 +1,19 @@
+// Scaling images
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Media, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+
+const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 50, 50);
+const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 100, 100);
+const image3 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 250, 250);
+const image4 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 400, 400);
+
+doc.addSection({
+    children: [new Paragraph("Hello World"), new Paragraph(image), new Paragraph(image2), new Paragraph(image3), new Paragraph(image4)],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/13-xml-styles.ts

@@ -0,0 +1,32 @@
+// This example shows 3 styles using XML styles
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, HeadingLevel, Packer, Paragraph } from "../build";
+
+const styles = fs.readFileSync("./demo/assets/custom-styles.xml", "utf-8");
+const doc = new Document({
+    title: "Title",
+    externalStyles: styles,
+});
+
+doc.addSection({
+    children: [
+        new Paragraph({
+            text: "Cool Heading Text",
+            heading: HeadingLevel.HEADING_1,
+        }),
+        new Paragraph({
+            text: 'This is a custom named style from the template "MyFancyStyle"',
+            style: "MyFancyStyle",
+        }),
+        new Paragraph("Some normal text"),
+        new Paragraph({
+            text: "MyFancyStyle again",
+            style: "MyFancyStyle",
+        }),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/14-page-numbers.ts

@@ -0,0 +1,37 @@
+// Page numbers
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { AlignmentType, Document, Header, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [
+                new Paragraph({
+                    alignment: AlignmentType.RIGHT,
+                    children: [new TextRun("My Title "), new TextRun("Page ").pageNumber()],
+                }),
+            ],
+        }),
+        first: new Header({
+            children: [
+                new Paragraph({
+                    alignment: AlignmentType.RIGHT,
+                    children: [new TextRun("First Page Header "), new TextRun("Page ").pageNumber()],
+                }),
+            ],
+        }),
+    },
+    children: [
+        new Paragraph({
+            text: "First Page",
+        }).pageBreak(),
+        new Paragraph("Second Page"),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/15-page-break-before.ts

@@ -5,14 +5,16 @@ import { Document, Packer, Paragraph } from "../build";
 
 const doc = new Document();
 
-const paragraph = new Paragraph("Hello World");
-const paragraph2 = new Paragraph("Hello World on another page").pageBreakBefore();
+doc.addSection({
+    children: [
+        new Paragraph("Hello World"),
+        new Paragraph({
+            text: "Hello World on another page",
+            pageBreakBefore: true,
+        }),
+    ],
+});
 
-doc.addParagraph(paragraph);
-doc.addParagraph(paragraph2);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
+Packer.toBuffer(doc).then((buffer) => {
     fs.writeFileSync("My Document.docx", buffer);
 });

demo/16-multiple-sections.ts

@@ -0,0 +1,112 @@
+// Multiple sections and headers
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Footer, Header, Packer, PageNumberFormat, PageOrientation, Paragraph, TextRun } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    children: [new Paragraph("Hello World").pageBreak()],
+});
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [new Paragraph("First Default Header on another page")],
+        }),
+    },
+    footers: {
+        default: new Footer({
+            children: [new Paragraph("Footer on another page")],
+        }),
+    },
+    properties: {
+        pageNumberStart: 1,
+        pageNumberFormatType: PageNumberFormat.DECIMAL,
+    },
+    children: [new Paragraph("hello")],
+});
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [new Paragraph("Second Default Header on another page")],
+        }),
+    },
+    footers: {
+        default: new Footer({
+            children: [new Paragraph("Footer on another page")],
+        }),
+    },
+    size: {
+        orientation: PageOrientation.LANDSCAPE,
+    },
+    properties: {
+        pageNumberStart: 1,
+        pageNumberFormatType: PageNumberFormat.DECIMAL,
+    },
+    children: [new Paragraph("hello in landscape")],
+});
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [
+                new Paragraph({
+                    children: [new TextRun("Page number: ").pageNumber()],
+                }),
+            ],
+        }),
+    },
+    size: {
+        orientation: PageOrientation.PORTRAIT,
+    },
+    children: [new Paragraph("Page number in the header must be 2, because it continues from the previous section.")],
+});
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [
+                new Paragraph({
+                    children: [new TextRun("Page number: ").pageNumber()],
+                }),
+            ],
+        }),
+    },
+    properties: {
+        pageNumberFormatType: PageNumberFormat.UPPER_ROMAN,
+        orientation: PageOrientation.PORTRAIT,
+    },
+    children: [
+        new Paragraph(
+            "Page number in the header must be III, because it continues from the previous section, but is defined as upper roman.",
+        ),
+    ],
+});
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [
+                new Paragraph({
+                    children: [new TextRun("Page number: ").pageNumber()],
+                }),
+            ],
+        }),
+    },
+    size: {
+        orientation: PageOrientation.PORTRAIT,
+    },
+    properties: {
+        pageNumberFormatType: PageNumberFormat.DECIMAL,
+        pageNumberStart: 25,
+    },
+    children: [
+        new Paragraph("Page number in the header must be 25, because it is defined to start at 25 and to be decimal in this section."),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/17-footnotes.ts

@@ -5,17 +5,13 @@ import { Document, Packer, Paragraph } from "../build";
 
 const doc = new Document();
 
-const paragraph = new Paragraph("Hello World").referenceFootnote(1);
-const paragraph2 = new Paragraph("Hello World").referenceFootnote(2);
-
-doc.addParagraph(paragraph);
-doc.addParagraph(paragraph2);
+doc.addSection({
+    children: [new Paragraph("Hello World").referenceFootnote(1), new Paragraph("Hello World").referenceFootnote(2)],
+});
 
 doc.createFootnote(new Paragraph("Test"));
 doc.createFootnote(new Paragraph("My amazing reference"));
 
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
+Packer.toBuffer(doc).then((buffer) => {
     fs.writeFileSync("My Document.docx", buffer);
 });

demo/18-image-from-buffer.ts

@@ -1,17 +1,22 @@
 // Insert image from a buffer
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, Packer } from "../build";
+import { Document, Media, Packer, Paragraph } from "../build";
 
 const doc = new Document();
 
 const imageBase64Data = `iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAACzVBMVEUAAAAAAAAAAAAAAAA/AD8zMzMqKiokJCQfHx8cHBwZGRkuFxcqFSonJyckJCQiIiIfHx8eHh4cHBwoGhomGSYkJCQhISEfHx8eHh4nHR0lHBwkGyQjIyMiIiIgICAfHx8mHh4lHh4kHR0jHCMiGyIhISEgICAfHx8lHx8kHh4jHR0hHCEhISEgICAlHx8kHx8jHh4jHh4iHSIhHCEhISElICAkHx8jHx8jHh4iHh4iHSIhHSElICAkICAjHx8jHx8iHh4iHh4hHiEhHSEkICAjHx8iHx8iHx8hHh4hHiEkHSEjHSAjHx8iHx8iHx8hHh4kHiEkHiEjHSAiHx8hHx8hHh4kHiEjHiAjHSAiHx8iHx8hHx8kHh4jHiEjHiAjHiAiICAiHx8kHx8jHh4jHiEjHiAiHiAiHSAiHx8jHx8jHx8jHiAiHiAiHiAiHSAiHx8jHx8jHx8iHiAiHiAiHiAjHx8jHx8jHx8jHx8iHiAiHiAiHiAjHx8jHx8jHx8iHx8iHSAiHiAjHiAjHx8jHx8hHx8iHx8iHyAiHiAjHiAjHiAjHh4hHx8iHx8iHx8iHyAjHSAjHiAjHiAjHh4hHx8iHx8iHx8jHyAjHiAhHh4iHx8iHx8jHyAjHSAjHSAhHiAhHh4iHx8iHx8jHx8jHyAjHSAjHSAiHh4iHh4jHx8jHx8jHyAjHyAhHSAhHSAiHh4iHh4jHx8jHx8jHyAhHyAhHSAiHSAiHh4jHh4jHx8jHx8jHyAhHyAhHSAiHSAjHR4jHh4jHx8jHx8hHyAhHyAiHSAjHSAjHR4jHh4jHx8hHx8hHyAhHyAiHyAjHSAjHR4jHR4hHh4hHx8hHyAiHyAjHyAjHSAjHR4jHR4hHh4hHx8hHyAjHyAjHyAjHSAjHR4hHR4hHR4hHx8iHyAjHyAjHyAjHSAhHR4hHR4hHR4hHx8jHyAjHyAjHyAjHyC9S2xeAAAA7nRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFxgZGhscHR4fICEiIyQlJicoKSorLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZISUpLTE1OUFFSU1RVVllaW1xdXmBhYmNkZWZnaGprbG1ub3Byc3R1dnd4eXp8fn+AgYKDhIWGiImKi4yNj5CRkpOUlZaXmJmam5ydnp+goaKjpKaoqqusra6vsLGys7S1tri5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+fkZpVQAABcBJREFUGBntwftjlQMcBvDnnLNL22qzJjWlKLHFVogyty3SiFq6EZliqZGyhnSxsLlMRahYoZKRFcul5dKFCatYqWZaNKvWtrPz/A2+7/b27qRzec/lPfvl/XxgMplMJpPJZDKZAtA9HJ3ppnIez0KnSdtC0RCNznHdJrbrh85wdSlVVRaEXuoGamYi5K5430HNiTiEWHKJg05eRWgNfKeV7RxbqUhGKPV/207VupQ8is0IoX5vtFC18SqEHaK4GyHTZ2kzVR8PBTCO4oANIZL4ShNVZcOhKKeYg9DoWdhI1ec3os2VFI0JCIUez5+i6st0qJZRrEAIJCw+QdW223BG/EmKwTBc/IJ/qfp2FDrkUnwFo8U9dZyqnaPhxLqfYjyM1S3vb6p+GGOBszsojoTDSDFz6qj66R4LzvYJxVMwUNRjf1H1ywQr/megg2RzLximy8waqvbda8M5iijegVEiHjlM1W/3h+FcXesphsMY4dMOUnUgOxyuPEzxPQwRNvV3qg5Nj4BreyimwADWe/dRVTMjEm6MoGLzGwtystL6RyOY3qSqdlYU3FpLZw1VW0sK5943MvUCKwJ1noNtjs6Ohge76Zq9ZkfpigU5WWkDYuCfbs1U5HWFR8/Qq4a9W0uK5k4ZmdrTCl8spGIePLPlbqqsc1Afe83O0hULc8alDYiBd7ZyitYMeBfR55rR2fOKP6ioPk2dGvZ+UVI0d8rtqT2tcCexlqK2F3wRn5Q+YVbBqrLKOupkr9lZujAOrmS0UpTb4JeIPkNHZ+cXr6uoPk2vyuBSPhWLEKj45PQJuQWryyqP0Z14uGLdROHIRNBEXDR09EP5r62rOHCazhrD4VKPwxTH+sIA3ZPTJ+YuWV22n+IruHFDC8X2CBjnPoolcGc2FYUwzmsUWXDHsoGKLBhmN0VvuBVfTVE/AAbpaid5CB4MbaLY1QXGuIViLTyZQcVyGGMuxWPwaA0Vk2GI9RRp8Ci2iuLkIBjhT5LNUfAspZFiTwyC72KK7+DNg1SsRvCNp3gZXq2k4iEEXSHFJHgVXUlxejCCbTvFAHiXdIJiXxyCK7KJ5FHoMZGK9xBcwyg2QpdlVMxEUM2iyIMuXXZQNF+HswxMsSAAJRQjoE//eoqDCXBSTO6f1xd+O0iyNRY6jaWi1ALNYCocZROj4JdEikroVkjFk9DcStXxpdfCD2MoXodu4RUU9ptxxmXssOfxnvDVcxRTod9FxyhqLoAqis5aPhwTDp9spRgEH2Q6KLbYoKqlaKTm6Isp0C/sJMnjFvhiERXPQvUNRe9p29lhR04CdBpC8Sl8YiuncIxEuzUUg4Dkgj+paVozygY9plPMh28SaymO9kabAopREGF3vt9MzeFFl8G7lRSZ8FFGK8XX4VA8QjEd7XrM3M0OXz8YCy+qKBLgq3wqnofiTorF0Ax56Rg1J1elW+BBAsVe+My6iYq7IK6keBdOIseV2qn5Pb8f3MqkWAXf9ThM8c8lAOIotuFsF875lRrH5klRcG0+xcPwQ1oLxfeRAP4heQTnGL78X2rqlw2DK59SXAV/zKaiGMAuko5InCt68mcOan5+ohf+z1pP8lQY/GHZQMV4YD3FpXDp4qerqbF/lBWBswyi+AL+ia+maLgcRRQj4IYlY/UpauqKBsPJAxQF8NM1TRQ/RudSPAD34rK3scOuR8/HGcspxsJfOVS8NZbiGXiUtPgINU3v3WFDmx8pEuG3EiqKKVbCC1vm2iZqap5LAtCtleQf8F9sFYWDohzeJczYyQ4V2bEZFGsQgJRGqqqhS2phHTWn9lDkIhBTqWqxQZ+IsRvtdHY9AvI2VX2hW68nfqGmuQsCEl3JdjfCF8OW1bPdtwhQ0gm2mQzfRE3a7KCYj0BNZJs8+Kxf/r6WtTEI2FIqlsMfFgRB5A6KUnSe/vUkX0AnuvUIt8SjM1m6wWQymUwmk8lkMgXRf5vi8rLQxtUhAAAAAElFTkSuQmCC`;
 
-// doc.createImage(Buffer.from(imageBase64Data, 'base64'));
-doc.createImage(Buffer.from(imageBase64Data, "base64"), 100, 100);
+const image = Media.addImage(doc, Buffer.from(imageBase64Data, "base64"), 100, 100);
 
-const packer = new Packer();
+doc.addSection({
+    children: [
+        new Paragraph({
+            children: [image],
+        }),
+    ],
+});
 
-packer.toBuffer(doc).then((buffer) => {
+Packer.toBuffer(doc).then((buffer) => {
     fs.writeFileSync("My Document.docx", buffer);
 });

demo/19-export-to-base64.ts

@@ -0,0 +1,28 @@
+// Export to base64 string - Useful in a browser environment.
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    children: [
+        new Paragraph({
+            children: [
+                new TextRun("Hello World"),
+                new TextRun({
+                    text: "Foo",
+                    bold: true,
+                }),
+                new TextRun({
+                    text: "Bar",
+                    bold: true,
+                }).tab(),
+            ],
+        }),
+    ],
+});
+
+Packer.toBase64String(doc).then((str) => {
+    fs.writeFileSync("My Document.docx", str);
+});

demo/2-declaritive-styles.ts

@@ -0,0 +1,122 @@
+// Example on how to customise the look at feel using Styles
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, HeadingLevel, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document({
+    creator: "Clippy",
+    title: "Sample Document",
+    description: "A brief example of using docx",
+});
+
+doc.Styles.createParagraphStyle("Heading1", "Heading 1")
+    .basedOn("Normal")
+    .next("Normal")
+    .quickFormat()
+    .size(28)
+    .bold()
+    .italics()
+    .spacing({ after: 120 });
+
+doc.Styles.createParagraphStyle("Heading2", "Heading 2")
+    .basedOn("Normal")
+    .next("Normal")
+    .quickFormat()
+    .size(26)
+    .bold()
+    .underline("double", "FF0000")
+    .spacing({ before: 240, after: 120 });
+
+doc.Styles.createParagraphStyle("aside", "Aside")
+    .basedOn("Normal")
+    .next("Normal")
+    .color("999999")
+    .italics()
+    .indent({ left: 720 })
+    .spacing({ line: 276 });
+
+doc.Styles.createParagraphStyle("wellSpaced", "Well Spaced")
+    .basedOn("Normal")
+    .spacing({ line: 276, before: 20 * 72 * 0.1, after: 20 * 72 * 0.05 });
+
+doc.Styles.createParagraphStyle("ListParagraph", "List Paragraph")
+    .quickFormat()
+    .basedOn("Normal");
+
+const numberedAbstract = doc.Numbering.createAbstractNumbering();
+numberedAbstract.createLevel(0, "lowerLetter", "%1)", "left");
+
+const letterNumbering = doc.Numbering.createConcreteNumbering(numberedAbstract);
+const letterNumbering5 = doc.Numbering.createConcreteNumbering(numberedAbstract);
+letterNumbering5.overrideLevel(0, 5);
+
+doc.addSection({
+    children: [
+        new Paragraph({
+            text: "Test heading1, bold and italicized",
+            heading: HeadingLevel.HEADING_1,
+        }),
+        new Paragraph("Some simple content"),
+        new Paragraph({
+            text: "Test heading2 with double red underline",
+            heading: HeadingLevel.HEADING_2,
+        }),
+        new Paragraph({
+            text: "Option1",
+            numbering: {
+                num: letterNumbering,
+                level: 0,
+            },
+        }),
+        new Paragraph({
+            text: "Option5 -- override 2 to 5",
+            numbering: {
+                num: letterNumbering,
+                level: 0,
+            },
+        }),
+        new Paragraph({
+            text: "Option3",
+            numbering: {
+                num: letterNumbering,
+                level: 0,
+            },
+        }),
+        new Paragraph({}).addRun(
+            new TextRun({
+                text: "Some monospaced content",
+                font: {
+                    name: "Monospace",
+                },
+            }),
+        ),
+        new Paragraph({
+            text: "An aside, in light gray italics and indented",
+            style: "aside",
+        }),
+        new Paragraph({
+            text: "This is normal, but well-spaced text",
+            style: "wellSpaced",
+        }),
+        new Paragraph({
+            children: [
+                new TextRun({
+                    text: "This is a bold run,",
+                    bold: true,
+                }),
+                new TextRun(" switching to normal "),
+                new TextRun({
+                    text: "and then underlined ",
+                    underline: {},
+                }),
+                new TextRun({
+                    text: "and back to normal.",
+                }),
+            ],
+        }),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/20-table-cell-borders.ts

@@ -1,21 +1,24 @@
 // Add custom borders to table cell
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { BorderStyle, Document, Packer, Paragraph } from "../build";
+import { BorderStyle, Document, Packer, Paragraph, Table } from "../build";
 
 const doc = new Document();
 
-const table = doc.createTable(4, 4);
+const table = new Table({
+    rows: 4,
+    columns: 4,
+});
+
+doc.addSection({ children: [table] });
 table
     .getCell(2, 2)
-    .addContent(new Paragraph("Hello"))
-    .CellProperties.Borders.addTopBorder(BorderStyle.DASH_DOT_STROKED, 3, "red")
+    .add(new Paragraph("Hello"))
+    .Borders.addTopBorder(BorderStyle.DASH_DOT_STROKED, 3, "red")
     .addBottomBorder(BorderStyle.DOUBLE, 3, "blue")
     .addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "green")
     .addEndBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000");
 
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
+Packer.toBuffer(doc).then((buffer) => {
     fs.writeFileSync("My Document.docx", buffer);
 });

demo/21-bookmarks.ts

@@ -1,9 +1,9 @@
 // This demo shows how to create bookmarks then link to them with internal hyperlinks
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, Packer } from "../build";
+import { Document, HeadingLevel, Packer, Paragraph } from "../build";
 
-const loremIpsum =
+const LOREM_IPSUM =
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi velit, convallis convallis scelerisque nec, faucibus nec leo. Phasellus at posuere mauris, tempus dignissim velit. Integer et tortor dolor. Duis auctor efficitur mattis. Vivamus ut metus accumsan tellus auctor sollicitudin venenatis et nibh. Cras quis massa ac metus fringilla venenatis. Proin rutrum mauris purus, ut suscipit magna consectetur id. Integer consectetur sollicitudin ante, vitae faucibus neque efficitur in. Praesent ultricies nibh lectus. Mauris pharetra id odio eget iaculis. Duis dictum, risus id pellentesque rutrum, lorem quam malesuada massa, quis ullamcorper turpis urna a diam. Cras vulputate metus vel massa porta ullamcorper. Etiam porta condimentum nulla nec tristique. Sed nulla urna, pharetra non tortor sed, sollicitudin molestie diam. Maecenas enim leo, feugiat eget vehicula id, sollicitudin vitae ante.";
 
 const doc = new Document({
@@ -16,22 +16,20 @@ const anchorId = "anchorID";
 
 // First create the bookmark
 const bookmark = doc.createBookmark(anchorId, "Lorem Ipsum");
-// That has header styling
-doc
-    .createParagraph()
-    .addBookmark(bookmark)
-    .heading1();
-doc.createParagraph("\n");
-
-doc.createParagraph(loremIpsum);
-doc.createParagraph().pageBreak();
-
-// Now the link back up to the bookmark
 const hyperlink = doc.createInternalHyperLink(anchorId, `Click me!`);
-doc.createParagraph().addHyperLink(hyperlink);
 
-const packer = new Packer();
+doc.addSection({
+    children: [
+        new Paragraph({
+            heading: HeadingLevel.HEADING_1,
+        }).addBookmark(bookmark),
+        new Paragraph("\n"),
+        new Paragraph(LOREM_IPSUM),
+        new Paragraph({}).pageBreak(),
+        new Paragraph({}).addHyperLink(hyperlink),
+    ],
+});
 
-packer.toBuffer(doc).then((buffer) => {
+Packer.toBuffer(doc).then((buffer) => {
     fs.writeFileSync("My Document.docx", buffer);
 });

demo/22-right-to-left-text.ts

@@ -0,0 +1,44 @@
+// This demo shows right to left for special languages
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    children: [
+        new Paragraph({
+            bidirectional: true,
+            children: [
+                new TextRun({
+                    text: "שלום עולם",
+                    rightToLeft: true,
+                }),
+            ],
+        }),
+        new Paragraph({
+            bidirectional: true,
+            children: [
+                new TextRun({
+                    text: "שלום עולם",
+                    bold: true,
+                    rightToLeft: true,
+                }),
+            ],
+        }),
+        new Paragraph({
+            bidirectional: true,
+            children: [
+                new TextRun({
+                    text: "שלום עולם",
+                    italics: true,
+                    rightToLeft: true,
+                }),
+            ],
+        }),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/23-base64-images.ts

@@ -1,34 +1,32 @@
 // This demo adds an image to the Media cache, and then insert to the document afterwards
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, Media, Packer, Paragraph } from "../build";
+import { Document, Media, Packer, Paragraph, TextRun } from "../build";
 
 const doc = new Document();
 
-const paragraph = new Paragraph("Hello World");
-doc.addParagraph(paragraph);
-
-const image = Media.addImage(doc, "./demo/images/image1.jpeg");
-const image2 = Media.addImage(doc, "./demo/images/dog.png");
-const image3 = Media.addImage(doc, "./demo/images/cat.jpg");
-const image4 = Media.addImage(doc, "./demo/images/parrots.bmp");
-const image5 = Media.addImage(doc, "./demo/images/pizza.gif");
+const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
+const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/dog.png"));
+const image3 = Media.addImage(doc, fs.readFileSync("./demo/images/cat.jpg"));
+const image4 = Media.addImage(doc, fs.readFileSync("./demo/images/parrots.bmp"));
+const image5 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
 
 const imageBase64Data = `iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAACzVBMVEUAAAAAAAAAAAAAAAA/AD8zMzMqKiokJCQfHx8cHBwZGRkuFxcqFSonJyckJCQiIiIfHx8eHh4cHBwoGhomGSYkJCQhISEfHx8eHh4nHR0lHBwkGyQjIyMiIiIgICAfHx8mHh4lHh4kHR0jHCMiGyIhISEgICAfHx8lHx8kHh4jHR0hHCEhISEgICAlHx8kHx8jHh4jHh4iHSIhHCEhISElICAkHx8jHx8jHh4iHh4iHSIhHSElICAkICAjHx8jHx8iHh4iHh4hHiEhHSEkICAjHx8iHx8iHx8hHh4hHiEkHSEjHSAjHx8iHx8iHx8hHh4kHiEkHiEjHSAiHx8hHx8hHh4kHiEjHiAjHSAiHx8iHx8hHx8kHh4jHiEjHiAjHiAiICAiHx8kHx8jHh4jHiEjHiAiHiAiHSAiHx8jHx8jHx8jHiAiHiAiHiAiHSAiHx8jHx8jHx8iHiAiHiAiHiAjHx8jHx8jHx8jHx8iHiAiHiAiHiAjHx8jHx8jHx8iHx8iHSAiHiAjHiAjHx8jHx8hHx8iHx8iHyAiHiAjHiAjHiAjHh4hHx8iHx8iHx8iHyAjHSAjHiAjHiAjHh4hHx8iHx8iHx8jHyAjHiAhHh4iHx8iHx8jHyAjHSAjHSAhHiAhHh4iHx8iHx8jHx8jHyAjHSAjHSAiHh4iHh4jHx8jHx8jHyAjHyAhHSAhHSAiHh4iHh4jHx8jHx8jHyAhHyAhHSAiHSAiHh4jHh4jHx8jHx8jHyAhHyAhHSAiHSAjHR4jHh4jHx8jHx8hHyAhHyAiHSAjHSAjHR4jHh4jHx8hHx8hHyAhHyAiHyAjHSAjHR4jHR4hHh4hHx8hHyAiHyAjHyAjHSAjHR4jHR4hHh4hHx8hHyAjHyAjHyAjHSAjHR4hHR4hHR4hHx8iHyAjHyAjHyAjHSAhHR4hHR4hHR4hHx8jHyAjHyAjHyAjHyC9S2xeAAAA7nRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFxgZGhscHR4fICEiIyQlJicoKSorLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZISUpLTE1OUFFSU1RVVllaW1xdXmBhYmNkZWZnaGprbG1ub3Byc3R1dnd4eXp8fn+AgYKDhIWGiImKi4yNj5CRkpOUlZaXmJmam5ydnp+goaKjpKaoqqusra6vsLGys7S1tri5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+fkZpVQAABcBJREFUGBntwftjlQMcBvDnnLNL22qzJjWlKLHFVogyty3SiFq6EZliqZGyhnSxsLlMRahYoZKRFcul5dKFCatYqWZaNKvWtrPz/A2+7/b27qRzec/lPfvl/XxgMplMJpPJZDKZAtA9HJ3ppnIez0KnSdtC0RCNznHdJrbrh85wdSlVVRaEXuoGamYi5K5430HNiTiEWHKJg05eRWgNfKeV7RxbqUhGKPV/207VupQ8is0IoX5vtFC18SqEHaK4GyHTZ2kzVR8PBTCO4oANIZL4ShNVZcOhKKeYg9DoWdhI1ec3os2VFI0JCIUez5+i6st0qJZRrEAIJCw+QdW223BG/EmKwTBc/IJ/qfp2FDrkUnwFo8U9dZyqnaPhxLqfYjyM1S3vb6p+GGOBszsojoTDSDFz6qj66R4LzvYJxVMwUNRjf1H1ywQr/megg2RzLximy8waqvbda8M5iijegVEiHjlM1W/3h+FcXesphsMY4dMOUnUgOxyuPEzxPQwRNvV3qg5Nj4BreyimwADWe/dRVTMjEm6MoGLzGwtystL6RyOY3qSqdlYU3FpLZw1VW0sK5943MvUCKwJ1noNtjs6Ohge76Zq9ZkfpigU5WWkDYuCfbs1U5HWFR8/Qq4a9W0uK5k4ZmdrTCl8spGIePLPlbqqsc1Afe83O0hULc8alDYiBd7ZyitYMeBfR55rR2fOKP6ioPk2dGvZ+UVI0d8rtqT2tcCexlqK2F3wRn5Q+YVbBqrLKOupkr9lZujAOrmS0UpTb4JeIPkNHZ+cXr6uoPk2vyuBSPhWLEKj45PQJuQWryyqP0Z14uGLdROHIRNBEXDR09EP5r62rOHCazhrD4VKPwxTH+sIA3ZPTJ+YuWV22n+IruHFDC8X2CBjnPoolcGc2FYUwzmsUWXDHsoGKLBhmN0VvuBVfTVE/AAbpaid5CB4MbaLY1QXGuIViLTyZQcVyGGMuxWPwaA0Vk2GI9RRp8Ci2iuLkIBjhT5LNUfAspZFiTwyC72KK7+DNg1SsRvCNp3gZXq2k4iEEXSHFJHgVXUlxejCCbTvFAHiXdIJiXxyCK7KJ5FHoMZGK9xBcwyg2QpdlVMxEUM2iyIMuXXZQNF+HswxMsSAAJRQjoE//eoqDCXBSTO6f1xd+O0iyNRY6jaWi1ALNYCocZROj4JdEikroVkjFk9DcStXxpdfCD2MoXodu4RUU9ptxxmXssOfxnvDVcxRTod9FxyhqLoAqis5aPhwTDp9spRgEH2Q6KLbYoKqlaKTm6Isp0C/sJMnjFvhiERXPQvUNRe9p29lhR04CdBpC8Sl8YiuncIxEuzUUg4Dkgj+paVozygY9plPMh28SaymO9kabAopREGF3vt9MzeFFl8G7lRSZ8FFGK8XX4VA8QjEd7XrM3M0OXz8YCy+qKBLgq3wqnofiTorF0Ax56Rg1J1elW+BBAsVe+My6iYq7IK6keBdOIseV2qn5Pb8f3MqkWAXf9ThM8c8lAOIotuFsF875lRrH5klRcG0+xcPwQ1oLxfeRAP4heQTnGL78X2rqlw2DK59SXAV/zKaiGMAuko5InCt68mcOan5+ohf+z1pP8lQY/GHZQMV4YD3FpXDp4qerqbF/lBWBswyi+AL+ia+maLgcRRQj4IYlY/UpauqKBsPJAxQF8NM1TRQ/RudSPAD34rK3scOuR8/HGcspxsJfOVS8NZbiGXiUtPgINU3v3WFDmx8pEuG3EiqKKVbCC1vm2iZqap5LAtCtleQf8F9sFYWDohzeJczYyQ4V2bEZFGsQgJRGqqqhS2phHTWn9lDkIhBTqWqxQZ+IsRvtdHY9AvI2VX2hW68nfqGmuQsCEl3JdjfCF8OW1bPdtwhQ0gm2mQzfRE3a7KCYj0BNZJs8+Kxf/r6WtTEI2FIqlsMfFgRB5A6KUnSe/vUkX0AnuvUIt8SjM1m6wWQymUwmk8lkMgXRf5vi8rLQxtUhAAAAAElFTkSuQmCC`;
 const image6 = Media.addImage(doc, Buffer.from(imageBase64Data, "base64"), 100, 100);
 
-// I am adding an image to the paragraph rather than the document to make the image inline
-paragraph.addImage(image5);
+doc.addSection({
+    children: [
+        new Paragraph({
+            children: [new TextRun("Hello World"), image5],
+        }),
+        new Paragraph(image),
+        new Paragraph(image2),
+        new Paragraph(image3),
+        new Paragraph(image4),
+        new Paragraph(image6),
+    ],
+});
 
-doc.addImage(image);
-doc.addImage(image2);
-doc.addImage(image3);
-doc.addImage(image4);
-doc.addImage(image5);
-doc.addImage(image6);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
+Packer.toBuffer(doc).then((buffer) => {
     fs.writeFileSync("My Document.docx", buffer);
 });

demo/24-images-to-table-cell.ts

@@ -0,0 +1,24 @@
+// Add image to table cell
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Media, Packer, Paragraph, Table } from "../build";
+
+const doc = new Document();
+
+const table = new Table({
+    rows: 4,
+    columns: 4,
+});
+
+doc.addSection({
+    children: [table],
+});
+
+table.getCell(2, 2).add(new Paragraph("Hello"));
+
+const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
+table.getCell(1, 1).add(new Paragraph(image));
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/26-paragraph-borders.ts

@@ -0,0 +1,33 @@
+// Creates two paragraphs, one with a border and one without
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    children: [
+        new Paragraph("No border!"),
+        new Paragraph({
+            text: "I have borders on my top and bottom sides!",
+            border: {
+                top: {
+                    color: "auto",
+                    space: 1,
+                    value: "single",
+                    size: 6,
+                },
+                bottom: {
+                    color: "auto",
+                    space: 1,
+                    value: "single",
+                    size: 6,
+                },
+            },
+        }),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/27-declaritive-styles-3.ts

@@ -0,0 +1,42 @@
+// Custom styles using JavaScript configuration
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, HeadingLevel, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+
+// The first argument is an ID you use to apply the style to paragraphs
+// The second argument is a human-friendly name to show in the UI
+doc.Styles.createParagraphStyle("myWonkyStyle", "My Wonky Style")
+    .basedOn("Normal")
+    .next("Normal")
+    .color("990000")
+    .italics()
+    .indent({ left: 720 }) // 720 TWIP === 720 / 20 pt === .5 in
+    .spacing({ line: 276 }); // 276 / 240 = 1.15x line spacing
+
+doc.Styles.createParagraphStyle("Heading2", "Heading 2")
+    .basedOn("Normal")
+    .next("Normal")
+    .quickFormat()
+    .size(26) // 26 half-points === 13pt font
+    .bold()
+    .underline("double", "FF0000")
+    .spacing({ before: 240, after: 120 }); // TWIP for both
+
+doc.addSection({
+    children: [
+        new Paragraph({
+            text: "Hello",
+            style: "myWonkyStyle",
+        }),
+        new Paragraph({
+            text: "World",
+            heading: HeadingLevel.HEADING_2,
+        }),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/28-table-of-contents.ts

@@ -0,0 +1,56 @@
+// Table of contents
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { File, HeadingLevel, Packer, Paragraph, StyleLevel, TableOfContents } from "../build";
+
+const doc = new File();
+
+// The first argument is an ID you use to apply the style to paragraphs
+// The second argument is a human-friendly name to show in the UI
+doc.Styles.createParagraphStyle("MySpectacularStyle", "My Spectacular Style")
+    .basedOn("Heading1")
+    .next("Heading1")
+    .color("990000")
+    .italics();
+
+// WordprocessingML docs for TableOfContents can be found here:
+// http://officeopenxml.com/WPtableOfContents.php
+
+// Let's define the properties for generate a TOC for heading 1-5 and MySpectacularStyle,
+// making the entries be hyperlinks for the paragraph
+
+doc.addSection({
+    children: [
+        new TableOfContents("Summary", {
+            hyperlink: true,
+            headingStyleRange: "1-5",
+            stylesWithLevels: [new StyleLevel("MySpectacularStyle", 1)],
+        }),
+        new Paragraph({
+            text: "Header #1",
+            heading: HeadingLevel.HEADING_1,
+            pageBreakBefore: true,
+        }),
+        new Paragraph("I'm a little text very nicely written.'"),
+        new Paragraph({
+            text: "Header #2",
+            heading: HeadingLevel.HEADING_1,
+            pageBreakBefore: true,
+        }),
+        new Paragraph("I'm a other text very nicely written.'"),
+        new Paragraph({
+            text: "Header #2.1",
+            heading: HeadingLevel.HEADING_2,
+        }),
+        new Paragraph("I'm a another text very nicely written.'"),
+        new Paragraph({
+            text: "My Spectacular Style #1",
+            style: "MySpectacularStyle",
+            pageBreakBefore: true,
+        }),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/29-numbered-lists.ts

@@ -0,0 +1,66 @@
+// Numbered lists
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Numbering, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+
+const numbering = new Numbering();
+
+const abstractNum = numbering.createAbstractNumbering();
+abstractNum.createLevel(0, "upperRoman", "%1", "start").indent({ left: 720, hanging: 260 });
+
+const concrete = numbering.createConcreteNumbering(abstractNum);
+
+doc.addSection({
+    children: [
+        new Paragraph({
+            text: "line with contextual spacing",
+            numbering: {
+                num: concrete,
+                level: 0,
+            },
+            contextualSpacing: true,
+            spacing: {
+                before: 200,
+            },
+        }),
+        new Paragraph({
+            text: "line with contextual spacing",
+            numbering: {
+                num: concrete,
+                level: 0,
+            },
+            contextualSpacing: true,
+            spacing: {
+                before: 200,
+            },
+        }),
+        new Paragraph({
+            text: "line without contextual spacing",
+            numbering: {
+                num: concrete,
+                level: 0,
+            },
+            contextualSpacing: false,
+            spacing: {
+                before: 200,
+            },
+        }),
+        new Paragraph({
+            text: "line without contextual spacing",
+            numbering: {
+                num: concrete,
+                level: 0,
+            },
+            contextualSpacing: false,
+            spacing: {
+                before: 200,
+            },
+        }),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/3-numbering-and-bullet-points.ts

@@ -0,0 +1,76 @@
+// Numbering and bullet points example
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Numbering, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+
+const numbering = new Numbering();
+
+const abstractNum = numbering.createAbstractNumbering();
+abstractNum.createLevel(0, "upperRoman", "%1", "start").indent({ left: 720, hanging: 260 });
+abstractNum.createLevel(1, "decimal", "%2.", "start").indent({ left: 1440, hanging: 980 });
+abstractNum.createLevel(2, "lowerLetter", "%3)", "start").indent({ left: 14402160, hanging: 1700 });
+
+const concrete = numbering.createConcreteNumbering(abstractNum);
+
+doc.addSection({
+    children: [
+        new Paragraph({
+            text: "Hey you",
+            numbering: {
+                num: concrete,
+                level: 0,
+            },
+        }),
+        new Paragraph({
+            text: "What's up fam",
+            numbering: {
+                num: concrete,
+                level: 1,
+            },
+        }),
+        new Paragraph({
+            text: "Hello World 2",
+            numbering: {
+                num: concrete,
+                level: 1,
+            },
+        }),
+        new Paragraph({
+            text: "Yeah boi",
+            numbering: {
+                num: concrete,
+                level: 2,
+            },
+        }),
+        new Paragraph({
+            text: "Hey you",
+            bullet: {
+                level: 0,
+            },
+        }),
+        new Paragraph({
+            text: "What's up fam",
+            bullet: {
+                level: 1,
+            },
+        }),
+        new Paragraph({
+            text: "Hello World 2",
+            bullet: {
+                level: 2,
+            },
+        }),
+        new Paragraph({
+            text: "Yeah boi",
+            bullet: {
+                level: 3,
+            },
+        }),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/30-template-document.ts

@@ -0,0 +1,30 @@
+// Example on how to use a template document
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, ImportDotx, Packer, Paragraph } from "../build";
+
+const importDotx = new ImportDotx();
+const filePath = "./demo/dotx/template.dotx";
+
+fs.readFile(filePath, (err, data) => {
+    if (err) {
+        throw new Error(`Failed to read file ${filePath}.`);
+    }
+
+    importDotx.extract(data).then((templateDocument) => {
+        const doc = new Document(undefined, {
+            template: templateDocument,
+        });
+
+        doc.addSection({
+            properties: {
+                titlePage: templateDocument.titlePageIsDefined,
+            },
+            children: [new Paragraph("Hello World")],
+        });
+
+        Packer.toBuffer(doc).then((buffer) => {
+            fs.writeFileSync("My Document.docx", buffer);
+        });
+    });
+});

demo/31-tables.ts

@@ -0,0 +1,32 @@
+// Example of how you would create a table and add data to it
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, HeadingLevel, Packer, Paragraph, Table, VerticalAlign } from "../build";
+
+const doc = new Document();
+
+const table = new Table({
+    rows: 2,
+    columns: 2,
+});
+
+table
+    .getCell(1, 1)
+    .add(new Paragraph("This text should be in the middle of the cell"))
+    .setVerticalAlign(VerticalAlign.CENTER);
+
+table.getCell(1, 0).add(
+    new Paragraph({
+        text:
+            "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah",
+        heading: HeadingLevel.HEADING_1,
+    }),
+);
+
+doc.addSection({
+    children: [table],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/32-merge-table-cells.ts

@@ -0,0 +1,113 @@
+// Example of how you would merge cells together
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, HeadingLevel, Packer, Paragraph, ShadingType, Table, WidthType } from "../build";
+
+const doc = new Document();
+
+const table = new Table({
+    rows: 2,
+    columns: 2,
+});
+
+table.getCell(0, 0).add(new Paragraph("Hello"));
+table.getRow(0).mergeCells(0, 1);
+
+const table2 = new Table({
+    rows: 2,
+    columns: 3,
+    width: 100,
+    widthUnitType: WidthType.AUTO,
+    columnWidths: [1000, 1000, 1000],
+});
+
+table2
+    .getCell(0, 0)
+    .add(new Paragraph("World"))
+    .setMargins({
+        top: 1000,
+        bottom: 1000,
+        left: 1000,
+        right: 1000,
+    });
+table.getRow(0).mergeCells(0, 2);
+
+const table3 = new Table({
+    rows: 2,
+    columns: 4,
+    width: 7000,
+    widthUnitType: WidthType.DXA,
+    margins: {
+        top: 400,
+        bottom: 400,
+        right: 400,
+        left: 400,
+    },
+});
+
+table3.getCell(0, 0).add(new Paragraph("Foo"));
+table3.getCell(0, 1).add(new Paragraph("v"));
+
+table3
+    .getCell(1, 0)
+    .add(new Paragraph("Bar1"))
+    .setShading({
+        fill: "b79c2f",
+        val: ShadingType.REVERSE_DIAGONAL_STRIPE,
+        color: "auto",
+    });
+table3
+    .getCell(1, 1)
+    .add(new Paragraph("Bar2"))
+    .setShading({
+        fill: "42c5f4",
+        val: ShadingType.PERCENT_95,
+        color: "auto",
+    });
+table3
+    .getCell(1, 2)
+    .add(new Paragraph("Bar3"))
+    .setShading({
+        fill: "880aa8",
+        val: ShadingType.PERCENT_10,
+        color: "e2df0b",
+    });
+table3
+    .getCell(1, 3)
+    .add(new Paragraph("Bar4"))
+    .setShading({
+        fill: "FF0000",
+        val: ShadingType.CLEAR,
+        color: "auto",
+    });
+
+table3.getRow(0).mergeCells(0, 3);
+
+const table4 = new Table({
+    rows: 2,
+    columns: 2,
+    width: 100,
+    widthUnitType: WidthType.PERCENTAGE,
+});
+
+doc.addSection({
+    children: [
+        table,
+        new Paragraph({
+            text: "Another table",
+            heading: HeadingLevel.HEADING_2,
+        }),
+        table2,
+        new Paragraph({
+            text: "Another table",
+            heading: HeadingLevel.HEADING_2,
+        }),
+        table3,
+        new Paragraph("hi"),
+        table4,
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/33-sequential-captions.ts

@@ -0,0 +1,31 @@
+// Sequential Captions
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    children: [
+        new Paragraph("Hello World 1->")
+            .addSequentialIdentifier("Caption")
+            .addRun(new TextRun(" text after sequencial caption 2->"))
+            .addSequentialIdentifier("Caption"),
+        new Paragraph("Hello World 1->")
+            .addSequentialIdentifier("Label")
+            .addRun(new TextRun(" text after sequencial caption 2->"))
+            .addSequentialIdentifier("Label"),
+        new Paragraph("Hello World 1->")
+            .addSequentialIdentifier("Another")
+            .addRun(new TextRun(" text after sequencial caption 3->"))
+            .addSequentialIdentifier("Label"),
+        new Paragraph("Hello World 2->")
+            .addSequentialIdentifier("Another")
+            .addRun(new TextRun(" text after sequencial caption 4->"))
+            .addSequentialIdentifier("Label"),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/34-floating-tables.ts

@@ -0,0 +1,41 @@
+// Example of how you would create a table with float positions
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import {
+    Document,
+    Packer,
+    Paragraph,
+    RelativeHorizontalPosition,
+    RelativeVerticalPosition,
+    Table,
+    TableAnchorType,
+    TableLayoutType,
+    WidthType,
+} from "../build";
+
+const doc = new Document();
+
+const table = new Table({
+    rows: 2,
+    columns: 2,
+    float: {
+        horizontalAnchor: TableAnchorType.MARGIN,
+        verticalAnchor: TableAnchorType.MARGIN,
+        relativeHorizontalPosition: RelativeHorizontalPosition.RIGHT,
+        relativeVerticalPosition: RelativeVerticalPosition.BOTTOM,
+    },
+    width: 4535,
+    widthUnitType: WidthType.DXA,
+    layout: TableLayoutType.FIXED,
+});
+
+table.getCell(0, 0).add(new Paragraph("Hello"));
+table.getRow(0).mergeCells(0, 1);
+
+doc.addSection({
+    children: [table],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/35-hyperlinks.ts

@@ -0,0 +1,17 @@
+// Example on how to add hyperlinks to websites
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+const paragraph = new Paragraph({});
+const link = doc.createHyperlink("http://www.example.com", "Hyperlink");
+
+paragraph.addHyperLink(link);
+doc.addSection({
+    children: [paragraph],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/36-image-to-table-cell.ts

@@ -0,0 +1,27 @@
+// Add image to table cell
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Header, Media, Packer, Paragraph, Table } from "../build";
+
+const doc = new Document();
+const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
+
+const table = new Table({
+    rows: 2,
+    columns: 2,
+});
+table.getCell(1, 1).add(new Paragraph(image));
+
+// Adding same table in the body and in the header
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [table],
+        }),
+    },
+    children: [table],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/37-images-to-header-and-footer.ts

@@ -0,0 +1,22 @@
+// Add images to header and footer
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Header, Media, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
+const image1 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
+const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [new Paragraph(image), new Paragraph(image1), new Paragraph(image2)],
+        }),
+    },
+    children: [new Paragraph("Hello World")],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/38-text-wrapping.ts

@@ -0,0 +1,45 @@
+// Example of how to "wrap" text around an image
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+// import { Document, Packer, Paragraph } from "../build";
+import { Document, Media, Packer, Paragraph, TextWrappingSide, TextWrappingType } from "../build";
+
+const doc = new Document();
+
+const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
+    floating: {
+        horizontalPosition: {
+            offset: 2014400,
+        },
+        verticalPosition: {
+            offset: 2014400,
+        },
+        wrap: {
+            type: TextWrappingType.SQUARE,
+            side: TextWrappingSide.BOTH_SIDES,
+        },
+        margins: {
+            top: 201440,
+            bottom: 201440,
+        },
+    },
+});
+
+doc.addSection({
+    children: [
+        new Paragraph(
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula nec nulla vitae efficitur. Ut interdum mauris eu ipsum rhoncus, nec pharetra velit placerat. Sed vehicula libero ac urna molestie, id pharetra est pellentesque. Praesent iaculis vehicula fringilla. Duis pretium gravida orci eu vestibulum. Mauris tincidunt ipsum dolor, ut ornare dolor pellentesque id. Integer in nulla gravida, lacinia ante non, commodo ex. Vivamus vulputate nisl id lectus finibus vulputate. Ut et nisl mi. Cras fermentum augue arcu, ac accumsan elit euismod id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ac posuere nisi. Pellentesque tincidunt vehicula bibendum. Phasellus eleifend viverra nisl.",
+        ),
+        new Paragraph(
+            "Proin ac purus faucibus, porttitor magna ut, cursus nisl. Vivamus ante purus, porta accumsan nibh eget, eleifend dignissim odio. Integer sed dictum est, aliquam lacinia justo. Donec ultrices auctor venenatis. Etiam interdum et elit nec elementum. Pellentesque nec viverra mauris. Etiam suscipit leo nec velit fringilla mattis. Pellentesque justo lacus, sodales eu condimentum in, dapibus finibus lacus. Morbi vitae nibh sit amet sem molestie feugiat. In non porttitor enim.",
+        ),
+        new Paragraph(
+            "Ut eget diam cursus quam accumsan interdum at id ante. Ut mollis mollis arcu, eu scelerisque dui tempus in. Quisque aliquam, augue quis ornare aliquam, ex purus ultrices mauris, ut porta dolor dolor nec justo. Nunc a tempus odio, eu viverra arcu. Suspendisse vitae nibh nec mi pharetra tempus. Mauris ut ullamcorper sapien, et sagittis sapien. Vestibulum in urna metus. In scelerisque, massa id bibendum tempus, quam orci rutrum turpis, a feugiat nisi ligula id metus. Praesent id dictum purus. Proin interdum ipsum nulla.",
+        ),
+        new Paragraph(image),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/39-page-numbers.ts

@@ -0,0 +1,45 @@
+// Example how to display page numbers
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { AlignmentType, Document, Footer, Header, Packer, PageNumberFormat, Paragraph, TextRun } from "../build";
+
+const doc = new Document({});
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [
+                new Paragraph("Foo Bar corp. ")
+                    .addRun(new TextRun("Page Number ").pageNumber())
+                    .addRun(new TextRun(" to ").numberOfTotalPages()),
+            ],
+        }),
+    },
+    footers: {
+        default: new Footer({
+            children: [
+                new Paragraph({
+                    text: "Foo Bar corp. ",
+                    alignment: AlignmentType.CENTER,
+                })
+                    .addRun(new TextRun("Page Number: ").pageNumber())
+                    .addRun(new TextRun(" to ").numberOfTotalPages()),
+            ],
+        }),
+    },
+    properties: {
+        pageNumberStart: 1,
+        pageNumberFormatType: PageNumberFormat.DECIMAL,
+    },
+    children: [
+        new Paragraph("Hello World 1").pageBreak(),
+        new Paragraph("Hello World 2").pageBreak(),
+        new Paragraph("Hello World 3").pageBreak(),
+        new Paragraph("Hello World 4").pageBreak(),
+        new Paragraph("Hello World 5").pageBreak(),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/4-basic-table.ts

@@ -0,0 +1,21 @@
+// Example of how you would create a table and add data to it
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, Table } from "../build";
+
+const doc = new Document();
+
+const table = new Table({
+    rows: 4,
+    columns: 4,
+});
+
+table.getCell(2, 2).add(new Paragraph("Hello"));
+
+doc.addSection({
+    children: [table],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/40-line-numbers.ts

@@ -0,0 +1,29 @@
+// Example demonstrating line numbers.
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, HeadingLevel, LineNumberRestartFormat, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    properties: {
+        lineNumberCountBy: 1,
+        lineNumberRestart: LineNumberRestartFormat.CONTINUOUS,
+    },
+    children: [
+        new Paragraph({
+            text: "Hello",
+            heading: HeadingLevel.HEADING_1,
+        }),
+        new Paragraph(
+            "Himenaeos duis luctus nullam fermentum lobortis potenti vivamus non dis, sed facilisis ultricies scelerisque aenean risus hac senectus. Adipiscing id venenatis justo ante gravida placerat, ac curabitur dis pellentesque proin bibendum risus, aliquam porta taciti vulputate primis. Tortor ipsum fermentum quam vel convallis primis nisl praesent tincidunt, lobortis quisque felis vitae condimentum class ut sem nam, aenean potenti pretium ac amet lacinia himenaeos mi. Aliquam nisl turpis hendrerit est morbi malesuada, augue interdum mus inceptos curabitur tristique, parturient feugiat sodales nulla facilisi. Aliquam non pulvinar purus nulla ex integer, velit faucibus vitae at bibendum quam, risus elit aenean adipiscing posuere.",
+        ),
+        new Paragraph(
+            "Sed laoreet id mattis egestas nam mollis elit lacinia convallis dui tincidunt ultricies habitant, pharetra per maximus interdum neque tempor risus efficitur morbi imperdiet senectus. Lectus laoreet senectus finibus inceptos donec potenti fermentum, ultrices eleifend odio suscipit magnis tellus maximus nibh, ac sit nullam eget felis himenaeos. Diam class sem magnis aenean commodo faucibus id proin mi, nullam sodales nec mus parturient ornare ad inceptos velit hendrerit, bibendum placerat eleifend integer facilisis urna dictumst suspendisse.",
+        ),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/41-merge-table-cells-2.ts

@@ -0,0 +1,54 @@
+// Multiple cells merging in the same table
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, Table } from "../build";
+
+const doc = new Document();
+
+const table = new Table({
+    rows: 13,
+    columns: 6,
+});
+
+let row = 0;
+table.getCell(row, 0).add(new Paragraph("0,0"));
+table.getCell(row, 1).add(new Paragraph("0,1"));
+table.getCell(row, 3).add(new Paragraph("0,3"));
+table.getCell(row, 4).add(new Paragraph("0,4"));
+table.getRow(row).mergeCells(4, 5);
+table.getRow(row).mergeCells(1, 2);
+row = 1;
+table.getCell(row, 0).add(new Paragraph("1,0"));
+table.getCell(row, 2).add(new Paragraph("1,2"));
+table.getCell(row, 4).add(new Paragraph("1,4"));
+table.getRow(row).mergeCells(4, 5);
+table.getRow(row).mergeCells(2, 3);
+table.getRow(row).mergeCells(0, 1);
+
+row = 2;
+table.getCell(row, 0).add(new Paragraph("2,0"));
+table.getCell(row, 1).add(new Paragraph("2,1"));
+table.getCell(row, 2).add(new Paragraph("2,2"));
+table.getCell(row, 3).add(new Paragraph("2,3"));
+table.getCell(row, 4).add(new Paragraph("2,4"));
+table.getRow(row).mergeCells(4, 5);
+table.getRow(row).mergeCells(1, 2);
+row = 3;
+table.getCell(row, 0).add(new Paragraph("3,0"));
+table.getCell(row, 1).add(new Paragraph("3,1"));
+table.getCell(row, 2).add(new Paragraph("3,2"));
+table.getCell(row, 3).add(new Paragraph("3,3"));
+table.getCell(row, 4).add(new Paragraph("3,4"));
+table.getCell(row, 5).add(new Paragraph("3,5"));
+row = 4;
+table.getCell(row, 0).add(new Paragraph("4,0"));
+table.getCell(row, 5).add(new Paragraph("4,5"));
+table.getRow(row).mergeCells(0, 4);
+
+doc.addSection({
+    children: [table],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/43-images-to-table-cell-2.ts

@@ -0,0 +1,22 @@
+// Add image to table cell
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, Table } from "../build";
+
+const doc = new Document();
+
+const table = new Table({
+    rows: 4,
+    columns: 4,
+});
+
+table.getCell(2, 2).add(new Paragraph("Hello"));
+table.getColumn(3).mergeCells(1, 2);
+
+doc.addSection({
+    children: [table],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/44-multiple-columns.ts

@@ -0,0 +1,40 @@
+// Sections with multiple columns
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    properties: {
+        column: {
+            width: 708,
+            count: 2,
+        },
+    },
+    children: [
+        new Paragraph("This text will be split into 2 columns on a page."),
+        new Paragraph(
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        ),
+    ],
+});
+
+doc.addSection({
+    properties: {
+        column: {
+            width: 708,
+            count: 3,
+        },
+    },
+    children: [
+        new Paragraph("This text will be split into 3 columns on a page."),
+        new Paragraph(
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        ),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/45-highlighting-text.ts

@@ -0,0 +1,35 @@
+// Highlighting text
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { AlignmentType, Document, Header, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [
+                new Paragraph({
+                    alignment: AlignmentType.RIGHT,
+                    children: [
+                        new TextRun({
+                            text: "Hello World",
+                            color: "red",
+                            bold: true,
+                            size: 24,
+                            font: {
+                                name: "Garamond",
+                            },
+                            highlight: "yellow",
+                        }),
+                    ],
+                }),
+            ],
+        }),
+    },
+    children: [],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/46-shading-text.ts

@@ -0,0 +1,39 @@
+// Shading text
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { AlignmentType, Document, Header, Packer, Paragraph, ShadingType, TextRun } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [
+                new Paragraph({
+                    alignment: AlignmentType.RIGHT,
+                    children: [
+                        new TextRun({
+                            text: "Hello World",
+                            color: "red",
+                            bold: true,
+                            size: 24,
+                            font: {
+                                name: "Garamond",
+                            },
+                            shading: {
+                                type: ShadingType.REVERSE_DIAGONAL_STRIPE,
+                                color: "00FFFF",
+                                fill: "FF0000",
+                            },
+                        }),
+                    ],
+                }),
+            ],
+        }),
+    },
+    children: [],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/5-images.ts

@@ -0,0 +1,62 @@
+// Example of how to add images to the document - You can use Buffers, UInt8Arrays or Base64 strings
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+// import { Document, Packer, Paragraph } from "../build";
+import {
+    Document,
+    HorizontalPositionAlign,
+    HorizontalPositionRelativeFrom,
+    Media,
+    Packer,
+    Paragraph,
+    VerticalPositionAlign,
+    VerticalPositionRelativeFrom,
+} from "../build";
+
+const doc = new Document();
+
+const image1 = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
+const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/dog.png").toString("base64"));
+const image3 = Media.addImage(doc, fs.readFileSync("./demo/images/cat.jpg"));
+const image4 = Media.addImage(doc, fs.readFileSync("./demo/images/parrots.bmp"));
+const image5 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
+const image6 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
+    floating: {
+        horizontalPosition: {
+            offset: 1014400,
+        },
+        verticalPosition: {
+            offset: 1014400,
+        },
+    },
+});
+
+const image7 = Media.addImage(doc, fs.readFileSync("./demo/images/cat.jpg"), 200, 200, {
+    floating: {
+        horizontalPosition: {
+            relative: HorizontalPositionRelativeFrom.PAGE,
+            align: HorizontalPositionAlign.RIGHT,
+        },
+        verticalPosition: {
+            relative: VerticalPositionRelativeFrom.PAGE,
+            align: VerticalPositionAlign.BOTTOM,
+        },
+    },
+});
+
+doc.addSection({
+    children: [
+        new Paragraph("Hello World"),
+        new Paragraph(image1),
+        new Paragraph(image2),
+        new Paragraph(image3),
+        new Paragraph(image4),
+        new Paragraph(image5),
+        new Paragraph(image6),
+        new Paragraph(image7),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/6-page-borders.ts

@@ -0,0 +1,40 @@
+// Example of how to change page borders
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, HeadingLevel, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    margins: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    },
+    children: [
+        new Paragraph({
+            children: [
+                new TextRun("Hello World"),
+                new TextRun({
+                    text: "Foo bar",
+                    bold: true,
+                }),
+                new TextRun({
+                    text: "Github is the best",
+                    bold: true,
+                }).tab(),
+            ],
+        }),
+        new Paragraph({
+            text: "Hello World",
+            heading: HeadingLevel.HEADING_1,
+        }),
+        new Paragraph("Foo bar"),
+        new Paragraph("Github is the best"),
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/7-landscape.ts

@@ -3,16 +3,15 @@
 import * as fs from "fs";
 import { Document, Packer, PageOrientation, Paragraph } from "../build";
 
-const doc = new Document(undefined, {
-    orientation: PageOrientation.LANDSCAPE,
+const doc = new Document();
+
+doc.addSection({
+    size: {
+        orientation: PageOrientation.LANDSCAPE,
+    },
+    children: [new Paragraph("Hello World")],
 });
 
-const paragraph = new Paragraph("Hello World");
-
-doc.addParagraph(paragraph);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
+Packer.toBuffer(doc).then((buffer) => {
     fs.writeFileSync("My Document.docx", buffer);
 });

demo/8-header-footer.ts

@@ -0,0 +1,24 @@
+// Add text to header and footer
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Footer, Header, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [new Paragraph("Header text")],
+        }),
+    },
+    footers: {
+        default: new Footer({
+            children: [new Paragraph("Footer text")],
+        }),
+    },
+    children: [new Paragraph("Hello World")],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/9-images-in-header-and-footer.ts

@@ -0,0 +1,35 @@
+// Add images to header and footer
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Footer, Header, Media, Packer, Paragraph } from "../build";
+
+const doc = new Document();
+
+const image1 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
+const image2 = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
+
+doc.addSection({
+    headers: {
+        default: new Header({
+            children: [
+                new Paragraph({
+                    children: [image1],
+                }),
+            ],
+        }),
+    },
+    footers: {
+        default: new Footer({
+            children: [
+                new Paragraph({
+                    children: [image2],
+                }),
+            ],
+        }),
+    },
+    children: [new Paragraph("Hello World")],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/browser-demo.html

@@ -1,39 +1,45 @@
 <!DOCTYPE html>
 <html>
+    <head>
+        <script src="../build/index.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
+    </head>
 
-<head>
-    <script src="../build/index.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
-</head>
+    <body>
+        <h1>DOCX browser Word document generation</h1>
 
-<body>
+        <button type="button" onclick="generate()">Click to generate document</button>
 
-    <h1>DOCX browser Word document generation</h1>
+        <script>
+            function generate() {
+                const doc = new Document();
 
-    <button type="button" onclick="generate()">Click to generate document</button>
+                doc.addSection({
+                    children: [
+                        new Paragraph({
+                            children: [
+                                new TextRun("Hello World"),
+                                new TextRun({
+                                    text: "Foo Bar",
+                                    bold: true,
+                                }),
+                                new TextRun({
+                                    text: "Github is the best",
+                                    bold: true,
+                                }).tab(),
+                            ],
+                        }),
+                    ],
+                });
 
-    <script>
-        function generate() {
-            const doc = new Document();
 
-            const paragraph = new Paragraph("Hello World");
-            const institutionText = new TextRun("Foo Bar").bold();
-            const dateText = new TextRun("Github is the best").tab().bold();
-            paragraph.addRun(institutionText);
-            paragraph.addRun(dateText);
-
-            doc.addParagraph(paragraph);
-
-            const packer = new Packer();
-
-            packer.toBlob(doc).then(blob => {
-                console.log(blob);
-                saveAs(blob, "example.docx");
-                console.log("Document created successfully");
-            });
-        }
-    </script>
-
-</body>
 
+                Packer.toBlob(doc).then((blob) => {
+                    console.log(blob);
+                    saveAs(blob, "example.docx");
+                    console.log("Document created successfully");
+                });
+            }
+        </script>
+    </body>
 </html>

demo/demo1.ts

@@ -1,20 +0,0 @@
-// Simple example to add text to a document
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph, TextRun } from "../build";
-
-const doc = new Document();
-
-const paragraph = new Paragraph("Hello World");
-const institutionText = new TextRun("Foo Bar").bold();
-const dateText = new TextRun("Github is the best").tab().bold();
-paragraph.addRun(institutionText);
-paragraph.addRun(dateText);
-
-doc.addParagraph(paragraph);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo11.ts

@@ -1,141 +0,0 @@
-// Setting styles with JavaScript configuration
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph, Table } from "../build";
-
-const doc = new Document(undefined, {
-    top: 700,
-    right: 700,
-    bottom: 700,
-    left: 700,
-});
-
-doc.Styles.createParagraphStyle("Heading1", "Heading 1")
-    .basedOn("Normal")
-    .next("Normal")
-    .quickFormat()
-    .font("Calibri")
-    .size(52)
-    .center()
-    .bold()
-    .color("000000")
-    .spacing({ line: 340 })
-    .underline("single", "000000");
-
-doc.Styles.createParagraphStyle("Heading2", "Heading 2")
-    .basedOn("Normal")
-    .next("Normal")
-    .font("Calibri")
-    .quickFormat()
-    .size(26)
-    .bold()
-    .spacing({ line: 340 });
-
-doc.Styles.createParagraphStyle("Heading3", "Heading 3")
-    .basedOn("Normal")
-    .next("Normal")
-    .font("Calibri")
-    .quickFormat()
-    .size(26)
-    .bold()
-    .spacing({ line: 276 });
-
-doc.Styles.createParagraphStyle("Heading4", "Heading 4")
-    .basedOn("Normal")
-    .next("Normal")
-    .justified()
-    .font("Calibri")
-    .size(26)
-    .bold();
-
-doc.Styles.createParagraphStyle("normalPara", "Normal Para")
-    .basedOn("Normal")
-    .next("Normal")
-    .font("Calibri")
-    .quickFormat()
-    .leftTabStop(453.543307087)
-    .maxRightTabStop()
-    .size(26)
-    .spacing({ line: 276, before: 20 * 72 * 0.1, after: 20 * 72 * 0.05 });
-
-doc.Styles.createParagraphStyle("normalPara2", "Normal Para2")
-    .basedOn("Normal")
-    .next("Normal")
-    .quickFormat()
-    .font("Calibri")
-    .size(26)
-    .justified()
-    .spacing({ line: 276, before: 20 * 72 * 0.1, after: 20 * 72 * 0.05 });
-
-doc.Styles.createParagraphStyle("aside", "Aside")
-    .basedOn("Normal")
-    .next("Normal")
-    .color("999999")
-    .italics()
-    .indent({ left: 720 })
-    .spacing({ line: 276 });
-
-doc.Styles.createParagraphStyle("wellSpaced", "Well Spaced")
-    .basedOn("Normal")
-    .spacing({ line: 276, before: 20 * 72 * 0.1, after: 20 * 72 * 0.05 });
-
-doc.Styles.createParagraphStyle("ListParagraph", "List Paragraph")
-    .quickFormat()
-    .basedOn("Normal");
-
-doc.createImage(fs.readFileSync("./demo/images/pizza.gif"));
-doc
-    .createParagraph("HEADING")
-    .heading1()
-    .center();
-
-doc.Footer.createParagraph("1")
-    .style("normalPara")
-    .right();
-
-doc.createParagraph("Ref. :").style("normalPara");
-doc.createParagraph("Date :").style("normalPara");
-
-doc.createParagraph("To,").style("normalPara");
-doc.createParagraph("The Superindenting Engineer,(O &M)").style("normalPara");
-
-doc.createParagraph("Sub : ").style("normalPara");
-
-doc.createParagraph("Ref. : ").style("normalPara");
-
-doc.createParagraph("Sir,").style("normalPara");
-
-doc.createParagraph("BRIEF DESCRIPTION").style("normalPara");
-
-const table = new Table(4, 4);
-table
-    .getRow(0)
-    .getCell(0)
-    .addContent(new Paragraph("Pole No."));
-// table.Properties.width = 10000;
-doc.addTable(table);
-
-const arrboth = [
-    {
-        image: "./demo/images/pizza.gif",
-        comment: "Test",
-    },
-    {
-        image: "./demo/images/pizza.gif",
-        comment: "Test 2",
-    },
-];
-
-arrboth.forEach((item) => {
-    const para = doc.createParagraph();
-    para.addImage(doc.createImage(fs.readFileSync(item.image)));
-    // para.Properties.width = 60;
-    // para.Properties.height = 90;
-    doc.createParagraph(item.comment).style("normalPara2");
-});
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo12.ts

@@ -1,25 +0,0 @@
-// Scaling images
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph } from "../build";
-
-const doc = new Document();
-
-const paragraph = new Paragraph("Hello World");
-doc.addParagraph(paragraph);
-
-const image = doc.createImage(fs.readFileSync("./demo/images/pizza.gif"));
-const image2 = doc.createImage(fs.readFileSync("./demo/images/pizza.gif"));
-const image3 = doc.createImage(fs.readFileSync("./demo/images/pizza.gif"));
-const image4 = doc.createImage(fs.readFileSync("./demo/images/pizza.gif"));
-
-image.scale(0.5);
-image2.scale(1);
-image3.scale(2.5);
-image4.scale(4);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo13.ts

@@ -1,28 +0,0 @@
-// This example shows 3 styles using XML styles
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph } from "../build";
-
-const styles = fs.readFileSync("./demo/assets/custom-styles.xml", "utf-8");
-const doc = new Document({
-    title: "Title",
-    externalStyles: styles,
-});
-
-doc.createParagraph("Cool Heading Text").heading1();
-
-const paragraph = new Paragraph('This is a custom named style from the template "MyFancyStyle"');
-paragraph.style("MyFancyStyle");
-doc.addParagraph(paragraph);
-
-doc.createParagraph("Some normal text");
-
-doc.createParagraph("MyFancyStyle again").style("MyFancyStyle");
-paragraph.style("MyFancyStyle");
-doc.addParagraph(paragraph);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo14.ts

@@ -1,28 +0,0 @@
-// Page numbers
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph, TextRun } from "../build";
-
-const doc = new Document();
-
-doc.createParagraph("First Page").pageBreak();
-doc.createParagraph("Second Page");
-
-const pageNumber = new TextRun("Page ").pageNumber();
-
-const pageoneheader = new Paragraph("First Page Header ").right();
-
-pageoneheader.addRun(pageNumber);
-const firstPageHeader = doc.createFirstPageHeader();
-firstPageHeader.addParagraph(pageoneheader);
-
-const pagetwoheader = new Paragraph("My Title ").right();
-
-pagetwoheader.addRun(pageNumber);
-doc.Header.addParagraph(pagetwoheader);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo16.ts

@@ -1,40 +0,0 @@
-// Multiple sections and headers
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, PageNumberFormat, PageOrientation, Paragraph } from "../build";
-
-const doc = new Document();
-
-const paragraph = new Paragraph("Hello World").pageBreak();
-
-doc.addParagraph(paragraph);
-
-const header = doc.createHeader();
-header.createParagraph("Header on another page");
-const footer = doc.createFooter();
-footer.createParagraph("Footer on another page");
-
-doc.addSection({
-    headerId: header.Header.ReferenceId,
-    footerId: footer.Footer.ReferenceId,
-    pageNumberStart: 1,
-    pageNumberFormatType: PageNumberFormat.DECIMAL,
-});
-
-doc.createParagraph("hello");
-
-doc.addSection({
-    headerId: header.Header.ReferenceId,
-    footerId: footer.Footer.ReferenceId,
-    pageNumberStart: 1,
-    pageNumberFormatType: PageNumberFormat.DECIMAL,
-    orientation: PageOrientation.LANDSCAPE,
-});
-
-doc.createParagraph("hello in landscape");
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo19.ts

@@ -1,20 +0,0 @@
-// Export to base64 string - Useful in a browser environment.
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph, TextRun } from "../build";
-
-const doc = new Document();
-
-const paragraph = new Paragraph("Hello World");
-const institutionText = new TextRun("Foo").bold();
-const dateText = new TextRun("Bar").tab().bold();
-paragraph.addRun(institutionText);
-paragraph.addRun(dateText);
-
-doc.addParagraph(paragraph);
-
-const packer = new Packer();
-
-packer.toBase64String(doc).then((str) => {
-    fs.writeFileSync("My Document.docx", str);
-});

demo/demo2.ts

@@ -1,78 +0,0 @@
-// Example on how to customise the look at feel using Styles
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer } from "../build";
-
-const doc = new Document({
-    creator: "Clippy",
-    title: "Sample Document",
-    description: "A brief example of using docx",
-});
-
-doc.Styles.createParagraphStyle("Heading1", "Heading 1")
-    .basedOn("Normal")
-    .next("Normal")
-    .quickFormat()
-    .size(28)
-    .bold()
-    .italics()
-    .spacing({ after: 120 });
-
-doc.Styles.createParagraphStyle("Heading2", "Heading 2")
-    .basedOn("Normal")
-    .next("Normal")
-    .quickFormat()
-    .size(26)
-    .bold()
-    .underline("double", "FF0000")
-    .spacing({ before: 240, after: 120 });
-
-doc.Styles.createParagraphStyle("aside", "Aside")
-    .basedOn("Normal")
-    .next("Normal")
-    .color("999999")
-    .italics()
-    .indent({ left: 720 })
-    .spacing({ line: 276 });
-
-doc.Styles.createParagraphStyle("wellSpaced", "Well Spaced")
-    .basedOn("Normal")
-    .spacing({ line: 276, before: 20 * 72 * 0.1, after: 20 * 72 * 0.05 });
-
-doc.Styles.createParagraphStyle("ListParagraph", "List Paragraph")
-    .quickFormat()
-    .basedOn("Normal");
-
-const numberedAbstract = doc.Numbering.createAbstractNumbering();
-numberedAbstract.createLevel(0, "lowerLetter", "%1)", "left");
-
-doc.createParagraph("Test heading1, bold and italicized").heading1();
-doc.createParagraph("Some simple content");
-doc.createParagraph("Test heading2 with double red underline").heading2();
-
-const letterNumbering = doc.Numbering.createConcreteNumbering(numberedAbstract);
-const letterNumbering5 = doc.Numbering.createConcreteNumbering(numberedAbstract);
-letterNumbering5.overrideLevel(0, 5);
-
-doc.createParagraph("Option1").setNumbering(letterNumbering, 0);
-doc.createParagraph("Option5 -- override 2 to 5").setNumbering(letterNumbering5, 0);
-doc.createParagraph("Option3").setNumbering(letterNumbering, 0);
-
-doc
-    .createParagraph()
-    .createTextRun("Some monospaced content")
-    .font("Monospace");
-
-doc.createParagraph("An aside, in light gray italics and indented").style("aside");
-doc.createParagraph("This is normal, but well-spaced text").style("wellSpaced");
-const para = doc.createParagraph();
-para.createTextRun("This is a bold run,").bold();
-para.createTextRun(" switching to normal ");
-para.createTextRun("and then underlined ").underline();
-para.createTextRun("and back to normal.");
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo22.ts

@@ -1,27 +0,0 @@
-// This demo shows right to left for special languages
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph, TextRun } from "../build";
-
-const doc = new Document();
-
-const paragraph1 = new Paragraph().bidirectional();
-const textRun1 = new TextRun("שלום עולם").rightToLeft();
-paragraph1.addRun(textRun1);
-doc.addParagraph(paragraph1);
-
-const paragraph2 = new Paragraph().bidirectional();
-const textRun2 = new TextRun("שלום עולם").bold().rightToLeft();
-paragraph2.addRun(textRun2);
-doc.addParagraph(paragraph2);
-
-const paragraph3 = new Paragraph().bidirectional();
-const textRun3 = new TextRun("שלום עולם").italic().rightToLeft();
-paragraph3.addRun(textRun3);
-doc.addParagraph(paragraph3);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo24.ts

@@ -1,18 +0,0 @@
-// Add image to table cell
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Media, Packer, Paragraph } from "../build";
-
-const doc = new Document();
-
-const table = doc.createTable(4, 4);
-table.getCell(2, 2).addContent(new Paragraph("Hello"));
-
-const image = Media.addImage(doc, "./demo/images/image1.jpeg");
-table.getCell(1, 1).addContent(image.Paragraph);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo26.ts

@@ -1,22 +0,0 @@
-// Creates two paragraphs, one with a border and one without
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph } from "../build";
-
-const doc = new Document();
-
-const paragraph = new Paragraph("No border!");
-
-doc.addParagraph(paragraph);
-
-const borderParagraph = new Paragraph("I have borders on my top and bottom sides!").createBorder();
-borderParagraph.Borders.addTopBorder();
-borderParagraph.Borders.addBottomBorder();
-
-doc.addParagraph(borderParagraph);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo27.ts

@@ -1,34 +0,0 @@
-import * as fs from "fs";
-import { Document, Packer } from "../build";
-
-const doc = new Document();
-const myStyles = doc.Styles;
-
-// The first argument is an ID you use to apply the style to paragraphs
-// The second argument is a human-friendly name to show in the UI
-myStyles.createParagraphStyle("myWonkyStyle", "My Wonky Style")
-    .basedOn("Normal")
-    .next("Normal")
-    .color("990000")
-    .italics()
-    .indent({left: 720})  // 720 TWIP === 720 / 20 pt === .5 in
-    .spacing({line: 276});  // 276 / 240 = 1.15x line spacing
-
-myStyles.createParagraphStyle("Heading2", "Heading 2")
-    .basedOn("Normal")
-    .next("Normal")
-    .quickFormat()
-    .size(26)  // 26 half-points === 13pt font
-    .bold()
-    .underline("double", "FF0000")
-    .spacing({before: 240, after: 120});  // TWIP for both
-
-doc.createParagraph("Hello").style("myWonkyStyle");
-doc.createParagraph("World").heading2(); // Uses the Heading2 style
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-    console.log("Document created successfully at project root!");
-});

demo/demo28.ts

@@ -1,43 +0,0 @@
-// Creates two paragraphs, one with a border and one without
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { File, Packer, Paragraph, StyleLevel, TableOfContents } from "../build";
-
-const doc = new File();
-
-// The first argument is an ID you use to apply the style to paragraphs
-// The second argument is a human-friendly name to show in the UI
-doc.Styles.createParagraphStyle("MySpectacularStyle", "My Spectacular Style")
-    .basedOn("Heading1")
-    .next("Heading1")
-    .color("990000")
-    .italics();
-
-// WordprocessingML docs for TableOfContents can be found here:
-// http://officeopenxml.com/WPtableOfContents.php
-
-// Let's define the properties for generate a TOC for heading 1-5 and MySpectacularStyle,
-// making the entries be hyperlinks for the paragraph
-const toc = new TableOfContents("Summary", {
-    hyperlink: true,
-    headingStyleRange: "1-5",
-    stylesWithLevels: [new StyleLevel("MySpectacularStyle", 1)],
-});
-
-doc.addTableOfContents(toc);
-
-doc.addParagraph(new Paragraph("Header #1").heading1().pageBreakBefore());
-doc.addParagraph(new Paragraph("I'm a little text very nicely written.'"));
-
-doc.addParagraph(new Paragraph("Header #2").heading1().pageBreakBefore());
-doc.addParagraph(new Paragraph("I'm a other text very nicely written.'"));
-doc.addParagraph(new Paragraph("Header #2.1").heading2());
-doc.addParagraph(new Paragraph("I'm a another text very nicely written.'"));
-
-doc.addParagraph(new Paragraph("My Spectacular Style #1").style("MySpectacularStyle").pageBreakBefore());
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo29.ts

@@ -1,32 +0,0 @@
-import * as fs from "fs";
-import { Document, Indent, Numbering, Packer, Paragraph } from "../build";
-
-const doc = new Document();
-
-const numbering = new Numbering();
-
-const abstractNum = numbering.createAbstractNumbering();
-abstractNum.createLevel(0, "upperRoman", "%1", "start").addParagraphProperty(new Indent({ left: 720, hanging: 260 }));
-
-const concrete = numbering.createConcreteNumbering(abstractNum);
-
-const item1 = new Paragraph("line with contextual spacing");
-const item2 = new Paragraph("line with contextual spacing");
-const item3 = new Paragraph("line without contextual spacing");
-const item4 = new Paragraph("line without contextual spacing");
-
-item1.setNumbering(concrete, 0).spacing({before: 200}).contextualSpacing(true);
-item2.setNumbering(concrete, 0).spacing({before: 200}).contextualSpacing(true);
-item3.setNumbering(concrete, 0).spacing({before: 200}).contextualSpacing(false);
-item4.setNumbering(concrete, 0).spacing({before: 200}).contextualSpacing(false);
-
-doc.addParagraph(item1);
-doc.addParagraph(item2);
-doc.addParagraph(item3);
-doc.addParagraph(item4);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo3.ts

@@ -1,46 +0,0 @@
-// Numbering and bullet points example
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Indent, Numbering, Packer, Paragraph } from "../build";
-
-const doc = new Document();
-
-const numbering = new Numbering();
-
-const abstractNum = numbering.createAbstractNumbering();
-abstractNum.createLevel(0, "upperRoman", "%1", "start").addParagraphProperty(new Indent({ left: 720, hanging: 260 }));
-abstractNum.createLevel(1, "decimal", "%2.", "start").addParagraphProperty(new Indent({ left: 1440, hanging: 980 }));
-abstractNum.createLevel(2, "lowerLetter", "%3)", "start").addParagraphProperty(new Indent({ left: 14402160, hanging: 1700 }));
-
-const concrete = numbering.createConcreteNumbering(abstractNum);
-
-const topLevelP = new Paragraph("Hey you");
-const subP = new Paragraph("What's up fam");
-const secondSubP = new Paragraph("Hello World 2");
-const subSubP = new Paragraph("Yeah boi");
-
-topLevelP.setNumbering(concrete, 0);
-subP.setNumbering(concrete, 1);
-secondSubP.setNumbering(concrete, 1);
-subSubP.setNumbering(concrete, 2);
-
-doc.addParagraph(topLevelP);
-doc.addParagraph(subP);
-doc.addParagraph(secondSubP);
-doc.addParagraph(subSubP);
-
-const bullet1 = new Paragraph("Hey you").bullet();
-const bullet2 = new Paragraph("What's up fam").bullet(1);
-const bullet3 = new Paragraph("Hello World 2").bullet(2);
-const bullet4 = new Paragraph("Yeah boi").bullet(3);
-
-doc.addParagraph(bullet1);
-doc.addParagraph(bullet2);
-doc.addParagraph(bullet3);
-doc.addParagraph(bullet4);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo31.ts

@@ -1,26 +0,0 @@
-// Example of how you would create a table and add data to it
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph, VerticalAlign } from "../build";
-
-const doc = new Document();
-
-const table = doc.createTable(2, 2);
-table
-    .getCell(1, 1)
-    .addContent(new Paragraph("This text should be in the middle of the cell"))
-    .CellProperties.setVerticalAlign(VerticalAlign.CENTER);
-
-table
-    .getCell(1, 0)
-    .addContent(
-        new Paragraph(
-            "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah",
-        ).heading1(),
-    );
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo32.ts

@@ -1,35 +0,0 @@
-// Example of how you would create a table and add data to it
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph } from "../build";
-
-const doc = new Document();
-
-let table = doc.createTable(2, 2);
-
-table.getCell(0, 0).addContent(new Paragraph("Hello"));
-table.getRow(0).mergeCells(0, 1);
-
-doc.createParagraph("Another table").heading2();
-
-table = doc.createTable(2, 3);
-table.getCell(0, 0).addContent(new Paragraph("World"));
-table.getRow(0).mergeCells(0, 2);
-
-doc.createParagraph("Another table").heading2();
-
-table = doc.createTable(2, 4);
-table.getCell(0, 0).addContent(new Paragraph("Foo"));
-
-table.getCell(1, 0).addContent(new Paragraph("Bar1"));
-table.getCell(1, 1).addContent(new Paragraph("Bar2"));
-table.getCell(1, 2).addContent(new Paragraph("Bar3"));
-table.getCell(1, 3).addContent(new Paragraph("Bar4"));
-
-table.getRow(0).mergeCells(0, 3);
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo4.ts

@@ -1,15 +0,0 @@
-// Example of how you would create a table and add data to it
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph } from "../build";
-
-const doc = new Document();
-
-const table = doc.createTable(4, 4);
-table.getCell(2, 2).addContent(new Paragraph("Hello"));
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo5.ts

@@ -1,21 +0,0 @@
-// Example of how to add images to the document - You can use Buffers, UInt8Arrays or Base64 strings
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph } from "../build";
-
-const doc = new Document();
-
-const paragraph = new Paragraph("Hello World");
-doc.addParagraph(paragraph);
-
-doc.createImage(fs.readFileSync("./demo/images/image1.jpeg"));
-doc.createImage(fs.readFileSync("./demo/images/dog.png").toString("base64"));
-doc.createImage(fs.readFileSync("./demo/images/cat.jpg"));
-doc.createImage(fs.readFileSync("./demo/images/parrots.bmp"));
-doc.createImage(fs.readFileSync("./demo/images/pizza.gif"));
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo6.ts

@@ -1,29 +0,0 @@
-// Example of how to change page borders
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer, Paragraph, TextRun } from "../build";
-
-const doc = new Document(undefined, {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-});
-
-const paragraph = new Paragraph("Hello World");
-const institutionText = new TextRun("Foo bar").bold();
-const dateText = new TextRun("Github is the best").tab().bold();
-paragraph.addRun(institutionText);
-paragraph.addRun(dateText);
-
-doc.addParagraph(paragraph);
-
-doc.createParagraph("Hello World").heading1();
-doc.createParagraph("Foo bar");
-doc.createParagraph("Github is the best");
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo8.ts

@@ -1,17 +0,0 @@
-// Add text to header and footer
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer } from "../build";
-
-const doc = new Document();
-
-doc.createParagraph("Hello World");
-
-doc.Header.createParagraph("Header text");
-doc.Footer.createParagraph("Footer text");
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/demo9.ts

@@ -1,17 +0,0 @@
-// Add images to header and footer
-// Import from 'docx' rather than '../build' if you install from npm
-import * as fs from "fs";
-import { Document, Packer } from "../build";
-
-const doc = new Document();
-
-doc.createParagraph("Hello World");
-
-doc.Header.createImage(fs.readFileSync("./demo/images/pizza.gif"));
-doc.Footer.createImage(fs.readFileSync("./demo/images/pizza.gif"));
-
-const packer = new Packer();
-
-packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});

demo/index.ts

@@ -19,13 +19,16 @@ prompt.start();
 
 prompt.get(schema, (_, result) => {
     const demoNumber = result.number;
-    const filePath = `./demo/demo${demoNumber}.ts`;
+    const files = fs.readdirSync("./demo").filter((fn) => fn.startsWith(demoNumber));
 
-    if (!fs.existsSync(filePath)) {
-        console.error(`demo${demoNumber} does not exist: ${filePath}`);
+    if (files.length === 0) {
+        console.error(`demo number ${demoNumber} does not exist`);
         return;
     }
-    console.log(`Running demo ${demoNumber}`);
+
+    const filePath = `./demo/${files[0]}`;
+
+    console.log(`Running demo ${demoNumber}: ${files[0]}`);
     if (shelljs.exec(`npm run ts-node -- ${filePath}`).code === 0) {
         console.log("Document created successfully");
     } else {

docs/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img alt="clippy the assistant" src="https://i.imgur.com/pwCV6L8.png">
+    <img alt="clippy the assistant" src="https://i.imgur.com/37uBGhO.gif">
 </p>
 
 <p align="center">
@@ -18,34 +18,52 @@ npm install --save docx
 
 Then you can `require` or `import` as usual:
 
-```js
-let docx = require("docx");
+```ts
+const docx = require("docx");
 ```
 
-```js
+```ts
 import * as docx from "docx";
+// or
+import { ... } from "docx";
 ```
 
 ## Basic Usage
 
-```js
-var docx = require("docx");
+```ts
+import * as fs from "fs";
+import { Document, Packer, Paragraph, TextRun } from "docx";
 
 // Create document
-var doc = new docx.Document();
+const doc = new Document();
 
-// Add some content in the document
-var paragraph = new docx.Paragraph("Some cool text here.");
-// Add more text into the paragraph if you wish
-paragraph.addRun(new docx.TextRun("Lorem Ipsum Foo Bar"));
-doc.addParagraph(paragraph);
+// Documents contain sections, you can have multiple sections per document, go here to learn more about sections
+// This simple example will only contain one section
+doc.addSection({
+    properties: {},
+    children: [
+        new Paragraph({
+            children: [
+                new TextRun("Hello World"),
+                new TextRun({
+                    text: "Foo Bar",
+                    bold: true,
+                }),
+                new TextRun({
+                    text: "Github is the best",
+                    bold: true,
+                }).tab(),
+            ],
+        }),
+    ],
+});
 
 // Used to export the file into a .docx file
-var exporter = new docx.LocalPacker(doc);
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});
 
-exporter.pack("My First Document");
-
-// Done! A file called 'My First Document.docx' will be in your file system if you used LocalPacker
+// Done! A file called 'My First Document.docx' will be in your file system.
 ```
 
 ## Honoured Mentions

docs/_sidebar.md

@@ -9,14 +9,17 @@
 * Usage
 
 	* [Document](usage/document.md)
+    * [Sections](usage/sections.md)
 	* [Paragraph](usage/paragraph.md)
 	* [Text](usage/text.md)
 	* [Image](usage/images.md)
 	* [Headers & Footers](usage/headers-and-footers.md)
 	* [Bullet Points](usage/bullet-points.md)
     * [Numbering](usage/numbering.md)
+    * [Tables](usage/tables.md)
 	* [Tab Stops](usage/tab-stops.md)
     * [Table of Contents](usage/table-of-contents.md)
+    * [Page Numbers](usage/page-numbers.md)
 	* Styling
         * [Styling with JS](usage/styling-with-js.md)
         * [Styling with XML](usage/styling-with-xml.md)

docs/contribution-guidelines.md

@@ -1,10 +1,8 @@
 # Contribution Guidelines
 
-## Writing Code
-
 *   Include documentation reference(s) at the top of each file:
 
-    ```js
+    ```ts
     // http://officeopenxml.com/WPdocument.php
     ```
 
@@ -12,23 +10,89 @@
 
 *   Follow the `TSLint` rules
 
+## Always think about the user
+
+The number one pillar for contribution to `docx` is to **ALWAYS** think about how the user will use `docx`.
+
+Put yourself in their position, and imagine how they would feel about your feature you wrote.
+
+1. Is it easy to use?
+2. Has it been documented well?
+3. Is it intuitive?
+4. Is it consistent with the rest of the API?
+5. Is it fun to use?
+
+## Good Commit Names
+
+Please write good commit messages when making a commit: https://chris.beams.io/posts/git-commit/
+
+**Do not:**
+```
+c // What?
+rtl // Adding acryonyms without explaining anything else is not helpful
+works! // Glad its working, but the message is not helpful
+demo updated // Getting better, but capitalize the first letter
+Unesesary coment removed // Make sure to use correct spelling
+```
+
+## No leaky components in API interface
+
+> This mainly applies to the API the end user will consume.
+
+Try to make method parameters of the outside API accept primitives, or `json` objects, so that child components are created **inside** the component, rather than being **injected** in.
+
+This is so that:
+
+1. Imports are much cleaner for the end user, no need for:
+   ```ts
+   import { ChildComponent } from "./my-feature/sub-component/deeper/.../my-deep.component";
+   ```
+
+2. This is what I consider "leakage". The code is aware of the underlying implementation of the component.
+3. It means the end user does not need to import and create the child component to be injected.
+
+**Do not**
+
+`TableFloatProperties` is a class. The outside world would have to `new` up the object, and inject it in like so:
+
+```ts
+    public float(tableFloatProperties: TableFloatProperties): Table
+```
+
+```ts
+    table.float(new TableFloatProperties(...));
+```
+
+**Do**
+
+`ITableFloatOptions` is an interface for a JSON of primitives. The end user would need to pass in a json object and not need to worry about the internals:
+
+```ts
+    public float(tableFloatOptions: ITableFloatOptions): Table
+```
+
+```ts
+    table.float({...});
+```
+
 ## Add vs Create
 
 This is just a guideline, and the rules can sometimes be broken.
 
 *   Use `create` if the method `new`'s up an element inside:
 
-    ```js
+    ```ts
     public createParagraph() {
         const paragraph = new Paragraph();
         this.root.push(paragraph);
     }
     ```
 
-*   Use `add` if you add the element into the method as a parameter:
+*   Use `add` if you add the element into the method as a parameter.
+    *Note:* This may look like its breaking the previous guideline, but it has semantically different meanings. The previous one is using data to construct an object, whereas this one is simply adding elements into the document:
 
-    ```js
-    public addParagraph(paragraph: Paragraph) {
+    ```ts
+    public add(paragraph: Paragraph) {
         this.root.push(paragraph);
     }
     ```
@@ -37,9 +101,9 @@ This is just a guideline, and the rules can sometimes be broken.
 
 Getters and Setters are done with a capital letter like so:
 
-```js
+```ts
 public get Level() {
-
+   ...
 }
 ```
 
@@ -47,23 +111,127 @@ There is no performance advantage by doing this. It means we don't need to prefi
 
 **Do not:**
 
-```js
+```ts
 private get _level: string;
 ```
 
 **Do**
 
-```js
+```ts
 private get level: string;
 ```
 
+## Temporal Methods
+
+Some methods  are `non-temporal`, which means regardless of when you call the method, it will have the same affect on the document. For example, setting the width of a table at the end of the document will have the same effect as setting the width at the start:
+
+```ts
+table.setWidth(1000); // now removed as of version 5.0.0
+```
+
+Whereas some methods are `temporal`, which means depending on the time-frame they are called, it would produce a difference result. For example, moving `createParagraph()` around your code will physically alter the document.
+
+```ts
+doc.createParagraph("hello");
+```
+
+If a method is `non-temporal`, put it in the objects `constructor`. For example:
+
+```ts
+const table = new Table(width: number);
+```
+
+`Non-temporal` methods are usually methods which can only be used one time and one time only. For example, `.float()`. It does not make sense to call `.float()` again if its already floating.
+
+I am not sure what the real term is, but this will do.
+
+## Interfaces over type alias
+
+Do not use `type`, but rather use `Interfaces`. `type` cannot be extended, and a class cannot implement it.
+
+> "In general, use what you want ( type alias / interface ) just be consistent"
+> "always use interface for public API's definition when authoring a library or 3rd party ambient type definitions"
+>
+> *   https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c
+
+`Interface` is generally preferred over `type`: https://stackoverflow.com/questions/37233735/typescript-interfaces-vs-types
+
+**Do not:**
+
+```ts
+type RelationshipFileInfo = { id: number, target: string };
+```
+
+**Do:**
+
+```ts
+interface IRelationshipFileInfo {
+    id: number;
+    target: string;
+}
+```
+
+## String enums vs type
+
+To take full advantage of TypeScript's typing system, its best to use `string enums`:
+
+**Do not:**
+
+```ts
+type WeaponType = "bow" | "sword" | "wand";
+```
+
+**Do:**
+
+```ts
+enum WeaponType = {
+    BOW = "bow",
+    SWORD = "sword",
+    WAND = "wand",
+}
+```
+
+## Spell correctly, in full and in American English
+
+I am not sure where these habits in software development come from, but I do not believe it is beneficial:
+
+**Do not:**
+```ts
+readdy // misspelling
+perm // abbreviation
+conf // abbreviation
+cnty // abbreviation
+relationFile // abbreviation
+colour // U.K. English
+```
+
+**Do:**
+```ts
+ready
+permission
+config
+country
+relationshipFile
+color
+```
+
+## Keep files small (within reason)
+
+To minimize merge conflicts, reduce complexity, and improve readability, keep the files small.
+
+## Name files and folders with `/foo-bar/kebab-case.ts`
+
+To be consistent and in-line with the project, name files `like-this.ts`.
+
+https://stackoverflow.com/questions/7273316/what-is-the-javascript-filename-naming-convention
+
 ## Testing
 
 Please write a test of every file you make and suffix it with `.spec.ts`.
 
 Here is a template of a test:
 
-```js
+```ts
 import { assert } from "chai";
 
 describe("ClassName", () => {
@@ -78,3 +246,5 @@ describe("ClassName", () => {
     });
 });
 ```
+
+Try not to use the `tests/utility.ts` file as this is being deprecated.

docs/examples.md

@@ -14,7 +14,7 @@ This command will run the `demo selector app` in the `/demo` folder. It will pro
 
 A simple hello world of the `docx` library:
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo1.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo1.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo1.ts_
 
@@ -24,7 +24,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo1.ts_
 
 This example shows how to customise the look and feel of a document using JS configuration
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo2.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo2.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo2.ts_
 
@@ -32,7 +32,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo2.ts_
 
 This example shows how to customise the look and feel of a document using XML configuration
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo13.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo13.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo13.ts_
 
@@ -40,7 +40,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo13.ts_
 
 This example shows many levels of numbering
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo3.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo3.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo3.ts_
 
@@ -48,7 +48,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo3.ts_
 
 Example of simple table
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo4.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo4.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo4.ts_
 
@@ -56,7 +56,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo4.ts_
 
 Styling the borders of a table
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo20.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo20.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo20.ts_
 
@@ -66,7 +66,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo20.ts_
 
 Importing Images from file system path
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo5.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo5.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo5.ts_
 
@@ -74,7 +74,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo5.ts_
 
 Example showing how to add image to headers and footers
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo9.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo9.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo9.ts_
 
@@ -82,7 +82,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo9.ts_
 
 Example showing how to scale images
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo12.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo12.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo12.ts_
 
@@ -90,7 +90,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo12.ts_
 
 This is the best way to add an image to a document because you can add the same image in two locations without increasing document size by re-using the same image
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo23.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo23.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo23.ts_
 
@@ -98,7 +98,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo23.ts_
 
 As before, to add an image to a table, you would need to add it to the `Media` object first
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo24.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo24.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo24.ts_
 
@@ -106,15 +106,15 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo24.ts_
 
 If you want to use a Base64 image instead
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo18.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo18.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo18.ts_
 
 ## Margins
 
-Example showing how to set custom margains
+Example showing how to set custom margins
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo6.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo6.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo6.ts_
 
@@ -122,7 +122,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo6.ts_
 
 Example showing how to set the document to `landscape` or `portrait`
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo7.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo7.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo7.ts_
 
@@ -130,7 +130,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo7.ts_
 
 Example showing how to add headers and footers
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo8.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo8.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo8.ts_
 
@@ -144,7 +144,7 @@ Check out `Sections` for this feature
 
 Example showing how to page break
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo14.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo14.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo14.ts_
 
@@ -152,15 +152,16 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo14.ts_
 
 Example showing how to page break before like in Word
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo15.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo15.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo15.ts_
 
 ## Sections
 
-Example of how sections work. Sections allow multiple headers and footers, and `landscape`/`portrait` inside the same document
+Example of how sections work. Sections allow multiple headers and footers, and `landscape`/`portrait` inside the same document. 
+Also you can have different page number formats and starts for different sections.
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo16.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo16.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo16.ts_
 
@@ -168,7 +169,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo16.ts_
 
 Example of how to add footnotes. Good for references
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo17.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo17.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo17.ts_
 
@@ -178,7 +179,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo17.ts_
 
 Example showing how to use the Buffer packer and then write that buffer to the file system
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo19.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo19.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo19.ts_
 
@@ -187,7 +188,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo19.ts_
 
 Example showing how to make bookmarks to make internal hyperlinks within the document
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo21.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo21.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo21.ts_
 
@@ -195,7 +196,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo21.ts_
 
 Example showing how to use bidirectional text for certain languages such as Hebrew
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo22.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo22.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo22.ts_
 
@@ -205,7 +206,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo22.ts_
 
 Example showing how to add headers and footers
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo10.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo10.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo10.ts_
 
@@ -213,6 +214,6 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo10.ts_
 
 This example shows how to customise the look and feel of a document and add images
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo11.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo11.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo11.ts_

docs/index.html

@@ -25,6 +25,7 @@
     <script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
     <script src="https://unpkg.com/docsify-copy-code@2"></script>
     <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
+    <script src="//unpkg.com/prismjs/components/prism-typescript.min.js"></script>
 </body>
 
 </html>

docs/usage/bullet-points.md

@@ -4,15 +4,15 @@
 
 To make a bullet point, simply make a paragraph into a bullet point:
 
-```js
-var text = new docx.TextRun("Bullet points");
-var paragraph = new docx.Paragraph(text).bullet();
+```ts
+const text = new docx.TextRun("Bullet points");
+const paragraph = new docx.Paragraph(text).bullet();
 
-var text2 = new docx.TextRun("Are awesome");
-var paragraph2 = new docx.Paragraph(text2).bullet();
+const text2 = new docx.TextRun("Are awesome");
+const paragraph2 = new docx.Paragraph(text2).bullet();
 
-doc.addParagraph(paragraph);
-doc.addParagraph(paragraph2);
+doc.add(paragraph);
+doc.add(paragraph2);
 ```
 
 ### This will produce:

docs/usage/document.md

@@ -4,16 +4,16 @@
 
 To create a new document, it is very easy:
 
-```js
-var doc = new docx.Document();
+```ts
+const doc = new docx.Document();
 ```
 
 ## Document properties
 
 You can add properties to the Word document by specifying options, for example:
 
-```js
-var doc = new docx.Document({
+```ts
+const doc = new docx.Document({
     creator: "Dolan Miu",
     description: "My extremely interesting document",
     title: "My Document",
@@ -22,14 +22,18 @@ var doc = new docx.Document({
 
 ### Full list of options:
 
-```
-creator
-description
-title
-subject
-keywords
-lastModifiedBy
-revision
-```
+
+* creator
+* description
+* title
+* subject
+* keywords
+* lastModifiedBy
+* revision
 
 You can mix and match whatever properties you want, or provide no properties.
+
+### Units for positioning
+
+Various parts of the API require positioning arguments. The units are "20ths of a point" from the [OOXML](http://officeopenxml.com/index.php) specification.
+See [Lars Corneliussen's blog post](https://startbigthinksmall.wordpress.com/2010/01/04/points-inches-and-emus-measuring-units-in-office-open-xml/) for more information and how to convert units.

docs/usage/headers-and-footers.md

@@ -1,29 +1,31 @@
 # Headers and Footers
 
+!> Headers and Footers requires an understanding of [Sections](usage/sections.md).
+
 ## Example
 
 Creating Headers and footers is simple. Access the `Header` and `Footer` by doing so like this:
 
-```js
+```ts
 doc.Header;
 doc.Footer;
 ```
 
 You can call the same methods as you would with a `File`:
 
-```js
+```ts
 doc.Header.createParagraph("Header text");
 doc.Footer.createParagraph("Footer text");
 ```
 
 Even add images:
 
-```js
+```ts
 doc.Header.createImage([BUFFER_OF_YOUR_IMAGE]);
 doc.Footer.createImage([BUFFER_OF_YOUR_IMAGE]);
 ```
 
-Refer to `demo8.js` for more information
+Refer to [`demo8.ts`](https://github.com/dolanmiu/docx/blob/master/demo/demo8.ts) for more information.
 
 ## Multiple Headers and Footers
 
@@ -31,14 +33,18 @@ Also all the supported section properties are implemented according to: http://o
 
 ### Example
 
-```js
+```ts
     const header = this.document.createHeader();
     const footer = this.document.createFooter();
 
     // Add new section with another header and footer
     doc.addSection({
-      headerId: header.Header.ReferenceId,
-      footerId: footer.Footer.ReferenceId,
+      headers: {
+        default: header
+      },
+      footers: {
+        default: footer
+      },
       pageNumberStart: 1,
       pageNumberFormatType: docx.PageNumberFormat.DECIMAL,
     });

docs/usage/hyperlinks.md

@@ -0,0 +1,47 @@
+# Hyperlinks
+
+There are two types of hyperlinks: internal (pointing to a bookmark inside the document) and external (pointing to an external url).
+
+## Internal
+
+To create an internal hyperlink you need first to create a bookmark (the paragraph that will be the destination of the hyperlink) with `doc.createBookmark(anchor, text)`.
+
+A bookmark is composed of an anchor (an identifier) and the text displayed. After creating a bookmark just add it to a paragraph with `paragraph.addBookmark(bookmark)`
+
+For example:
+
+```ts
+const paragraph = this.doc.createParagraph();
+const bookmark = this.doc.createBookmark('anchorForChapter1', 'This is chapter1');
+paragraph.addBookmark(bookmark);
+```
+
+Then you can create an hyperlink pointing to that bookmark with `doc.createInternalHyperLink(anchor,text)`:
+
+```ts
+const paragraph = this.doc.createParagraph();
+const link = this.doc.createInternalHyperLink('anchorForChapter1', 'This is a link to chapter1');
+paragraph.addHyperLink(link);
+```
+
+## External
+
+To create an external hyperlink you just need to specify the url and the text of the link, then add it to a paragraph with `doc.createHyperlink(url, text)`:
+
+```ts
+const paragraph = this.doc.createParagraph();
+const link = this.doc.createHyperlink('https://docx.js.org', 'This is an external link');
+paragraph.addHyperLink(link);
+```
+
+
+## Styling an hyperlink
+
+It is possible to set the style of the text of an hyperlink. This can be done applying run formatting on `TextRun` property of the hyperlink.
+
+Example:
+
+```ts
+const link = this.doc.createHyperlink('https://docx.js.org', 'This is an external link');
+link.TextRun.bold().italics()
+```

docs/usage/images.md

@@ -1,156 +1,248 @@
 # Images
 
-## Intro
+!> Images requires an understanding of [Sections](usage/sections.md) and [Paragraphs](usage/paragraph.md).
 
-Adding images is very simple
+To create a `floating` image on top of text:
 
-Simply call the `createImage` method:
-
-```js
-const image = doc.createImage([BUFFER_OF_YOUR_IMAGE]);
-```
-
-`docx` supports `jpeg`, `jpg`, `bmp`, `gif` and `png`
-
-Check `demo5.js` for an example
-
-## Positioning
-
-Images can be:
-
-*   floating position of images
-*   Wrapped around the text
-*   Inline
-
-By default, picture are exported as `INLINE` elements.
-
-In Word this is found in:
-
-![Word Image Positiong](https://user-images.githubusercontent.com/34742290/41765548-b0946302-7604-11e8-96f9-166a9f0b8f39.png)
-
-### Usage
-
-The `PictureRun` element support various options to define the positioning of the element in the document.
-
-```js
-interface DrawingOptions {
-    position?: PlacementPosition;
-    textWrapping?: TextWrapping;
-    floating?: Floating;
-}
-```
-
-can be passed when creating `PictureRun()` for example:
-
-```js
-const imageData = document.createImage(buffer, 903, 1149);
-
-new docx.PictureRun(imageData, {
-    position: docx.PlacementPosition.FLOATING,
+```ts
+Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
     floating: {
         horizontalPosition: {
-            relative: HorizontalPositionRelativeFrom.PAGE,
-            align: HorizontalPositionAlign.LEFT,
+            offset: 1014400,
         },
         verticalPosition: {
-            relative: VerticalPositionRelativeFrom.PAGE,
-            align: VerticalPositionAlign.TOP,
+            offset: 1014400,
         },
     },
 });
 ```
 
-So, the first thing is to define the placement position: `INLINE` or `FLOATING`. Inline is the default one so there is no need to pass drawing options for inline.
+By default with no arguments, its an `inline` image:
 
-When placement position is FLOATING then we can use two options:
-
-### Wrap text
-
-for `drawingOptions.textWrapping` we can define various options. `textWrapping` has the following properties:
-
-```js
-interface TextWrapping {
-    textWrapStyle: TextWrapStyle;
-    wrapTextOption?: WrapTextOption;
-    distanceFromText?: Distance;
-}
-
-enum TextWrapStyle {
-    NONE,
-    SQUARE,
-    TIGHT,
-    TOP_AND_BOTTOM,
-}
-
-enum WrapTextOption {
-    BOTH_SIDES = "bothSides",
-    LEFT = "left",
-    RIGHT = "right",
-    LARGEST = "largest",
-}
+```ts
+const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
 ```
 
-### Floating position
+Add it into the document by adding the image into a paragraph:
 
-When we want to position the image relative or absolute then we need to use option `drawingOptions.floating`:
-
-```js
-export interface Floating {
-    horizontalPosition: HorizontalPositionOptions;
-    verticalPosition: VerticalPositionOptions;
-    allowOverlap?: boolean;
-    lockAnchor?: boolean;
-    behindDocument?: boolean;
-    layoutInCell?: boolean;
-}
-
-export interface HorizontalPositionOptions {
-    relative: HorizontalPositionRelativeFrom;
-    align?: HorizontalPositionAlign;
-    offset?: number;
-}
-
-export interface VerticalPositionOptions {
-    relative: VerticalPositionRelativeFrom;
-    align?: VerticalPositionAlign;
-    offset?: number;
-}
-
-export enum HorizontalPositionRelativeFrom {
-    CHARACTER = "character",
-    COLUMN = "column",
-    INSIDE_MARGIN = "insideMargin",
-    LEFT_MARGIN = "leftMargin",
-    MARGIN = "margin",
-    OUTSIDE_MARGIN = "outsideMargin",
-    PAGE = "page",
-    RIGHT_MARGIN = "rightMargin",
-}
-
-export enum VerticalPositionRelativeFrom {
-    BOTTOM_MARGIN = "bottomMargin",
-    INSIDE_MARGIN = "insideMargin",
-    LINE = "line",
-    MARGIN = "margin",
-    OUTSIDE_MARGIN = "outsideMargin",
-    PAGE = "page",
-    PARAGRAPH = "paragraph",
-    TOP_MARGIN = "topMargin",
-}
-
-export enum HorizontalPositionAlign {
-    CENTER = "center",
-    INSIDE = "inside",
-    LEFT = "left",
-    OUTSIDE = "outside",
-    RIGHT = "right",
-}
-
-export enum VerticalPositionAlign {
-    BOTTOM = "bottom",
-    CENTER = "center",
-    INSIDE = "inside",
-    OUTSIDE = "outside",
-    TOP = "top",
-}
+```ts
+doc.addSection({
+    children: [new Paragraph(image)],
+});
 ```
+
+Or:
+
+```ts
+doc.addSection({
+    children: [
+        new Paragraph({
+            children: [image],
+        }),
+    ],
+});
+```
+
+## Intro
+
+Adding images can be done in two ways:
+
+1. Call the `createImage` method to add the image directly into the `document`:
+
+    ```ts
+    Media.addImage(doc, [IMAGE_BUFFER], [WIDTH], [HEIGHT], [POSITION_OPTIONS]);
+    ```
+
+2. Create an `image` first, then add it into the `document`:
+
+    ```ts
+    const image = Media.addImage(doc, [IMAGE_BUFFER]);
+    doc.addSection({
+        children: [new Paragraph(image)],
+    });
+    ```
+
+`docx` supports `jpeg`, `jpg`, `bmp`, `gif` and `png`
+
+## Positioning
+
+> Positioning is the method on how to place the image on the document
+
+![Word Image Positiong](https://user-images.githubusercontent.com/34742290/41765548-b0946302-7604-11e8-96f9-166a9f0b8f39.png)
+
+Three types of image positioning is supported:
+
+-   Floating
+-   Inline
+
+By default, picture are exported as `Inline` elements.
+
+### Usage
+
+Pass `options` into the `[POSITION_OPTIONS]` metioned in the [Intro above](#Intro).
+
+## Floating
+
+To change the position the image to be on top of the text, simply add the `floating` property to the last argument. By default, the offsets are relative to the top left corner of the `page`. Offset units are in [emus](https://startbigthinksmall.wordpress.com/2010/01/04/points-inches-and-emus-measuring-units-in-office-open-xml/):
+
+```ts
+const imageData = document.createImage(buffer, 903, 1149, {
+    floating: {
+        horizontalPosition: {
+            offset: 1014400, // relative: HorizontalPositionRelativeFrom.PAGE by default
+        },
+        verticalPosition: {
+            offset: 1014400, // relative: VerticalPositionRelativeFrom.PAGE by default
+        },
+    },
+});
+```
+
+```ts
+const imageData = document.createImage(buffer, 903, 1149, {
+    floating: {
+        horizontalPosition: {
+            relative: HorizontalPositionRelativeFrom.RIGHT_MARGIN,
+            offset: 1014400,
+        },
+        verticalPosition: {
+            relative: VerticalPositionRelativeFrom.BOTTOM_MARGIN,
+            offset: 1014400,
+        },
+    },
+});
+```
+
+### Options
+
+Full options you can pass into `floating` are:
+
+| Property           | Type                        | Notes    |
+| ------------------ | --------------------------- | -------- |
+| horizontalPosition | `HorizontalPositionOptions` | Required |
+| verticalPosition   | `VerticalPositionOptions`   | Required |
+| allowOverlap       | `boolean`                   | Optional |
+| lockAnchor         | `boolean`                   | Optional |
+| behindDocument     | `boolean`                   | Optional |
+| layoutInCell       | `boolean`                   | Optional |
+
+`HorizontalPositionOptions` are:
+
+| Property | Type                             | Notes                                             | Possible Values                                                                                           |
+| -------- | -------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| relative | `HorizontalPositionRelativeFrom` | Required                                          | `CHARACTER`, `COLUMN`, `INSIDE_MARGIN`, `LEFT_MARGIN`, `MARGIN`, `OUTSIDE_MARGIN`, `PAGE`, `RIGHT_MARGIN` |
+| align    | `HorizontalPositionAlign`        | You can either have `align` or `offset`, not both | `CENTER`, `INSIDE`, `LEFT`, `OUTSIDE`, `RIGHT`                                                            |
+| offset   | `number`                         | You can either have `align` or `offset`, not both | `0` to `Infinity`                                                                                         |
+
+`VerticalPositionOptions` are:
+
+| Property | Type                           | Notes                                             | Possible Values                                                                                         |
+| -------- | ------------------------------ | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| relative | `VerticalPositionRelativeFrom` | Required                                          | `BOTTOM_MARGIN`, `INSIDE_MARGIN`, `LINE`, `MARGIN`, `OUTSIDE_MARGIN`, `PAGE`, `PARAGRAPH`, `TOP_MARGIN` |
+| align    | `VerticalPositionAlign`        | You can either have `align` or `offset`, not both | `BOTTOM`, `CENTER`, `INSIDE`, `OUTSIDE`, `TOP`                                                          |
+| offset   | `number`                       | You can either have `align` or `offset`, not both | `0` to `Infinity`                                                                                       |
+
+## Wrap text
+
+Wrapping only works for floating elements. Text will "wrap" around the floating `image`.
+
+Add `wrap` options inside the `floating` options:
+
+```ts
+wrap: {
+    type: [TextWrappingType],
+    side: [TextWrappingSide],
+},
+```
+
+For example:
+
+```ts
+Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
+    floating: {
+        horizontalPosition: {
+            offset: 2014400,
+        },
+        verticalPosition: {
+            offset: 2014400,
+        },
+        wrap: {
+            type: TextWrappingType.SQUARE,
+            side: TextWrappingSide.BOTH_SIDES,
+        },
+    },
+});
+```
+
+Wrap options have the following properties are:
+
+| Property | Type               | Notes    | Possible Values                             |
+| -------- | ------------------ | -------- | ------------------------------------------- |
+| type     | `TextWrappingType` | Optional | `NONE`, `SQUARE`, `TIGHT`, `TOP_AND_BOTTOM` |
+| side     | `TextWrappingSide` | Optional | `BOTH_SIDES`, `LEFT`, `RIGHT`, `LARGEST`    |
+
+## Margins
+
+Margins give some space between the text and the image. Margins [only work for floating elements](http://officeopenxml.com/drwPicInline.php). Additionally, the image must also be in wrap mode (see above).
+
+?> Be sure to also set `wrap` in your options!
+
+To use, add the `margins` options inside the `floating` options:
+
+```ts
+margins: {
+    top: number,
+    bottom: number,
+    left: number,
+    right: number
+},
+```
+
+For example:
+
+```ts
+Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
+    floating: {
+        horizontalPosition: {
+            offset: 2014400,
+        },
+        verticalPosition: {
+            offset: 2014400,
+        },
+        wrap: {
+            type: TextWrappingType.SQUARE,
+            side: TextWrappingSide.BOTH_SIDES,
+        },
+        margins: {
+            top: 201440,
+            bottom: 201440,
+        },
+    },
+});
+```
+
+## Examples
+
+### Add image to the document
+
+Importing Images from file system path
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo5.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo5.ts_
+
+### Add images to header and footer
+
+Example showing how to add image to headers and footers
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo9.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo9.ts_
+
+### Floating images
+
+Example showing how to float images on top of text and optimally give a `margin`
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo38.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo38.ts_

docs/usage/numbering.md

@@ -26,7 +26,7 @@ _levels_ which form a sequence starting at 0 indicating the top-level
 list look and increasing from there to descibe the sublists, then
 sub-sublists, etc. Each level includes the following properties:
 
-*   **level**: This its 0-based index in the defintion stack
+*   **level**: This is its 0-based index in the definition stack
 *   **numberFormat**: This indicates how the bullet or number should be
     generated. Options include `bullet` (meaning don't count), `decimal`
     (arabic numerals), `upperRoman`, `lowerRoman`, `hex`, and many
@@ -64,10 +64,10 @@ styles or numbering of any kind, you'll have to use the
 `docx.Numbering` class.
 
 First you need to create a new numbering container class and use it to
-create your abstract numbering style, define your levels, and creat
-your concreate numbering style:
+create your abstract numbering style, define your levels, and create
+your concrete numbering style:
 
-```js
+```ts
 const numbering = new docx.Numbering();
 
 const abstractNum = numbering.createAbstractNumbering();
@@ -75,13 +75,13 @@ abstractNum.createLevel(0, "upperRoman", "%1", "start").addParagraphProperty(new
 abstractNum.createLevel(1, "decimal", "%2.", "start").addParagraphProperty(new Indent(1440, 980));
 abstractNum.createLevel(2, "lowerLetter", "%3)", "start").addParagraphProperty(new Indent(2160, 1700));
 
-const concrete = numbering.createConcreteNumbering(numberedAbstract);
+const concrete = numbering.createConcreteNumbering(abstractNum);
 ```
 
-You can then apply your concrete style to paragraphs using their
-`#setNumbering` method:
+You can then apply your concrete style to paragraphs using the
+`setNumbering` method:
 
-```js
+```ts
 topLevelP.setNumbering(concrete, 0);
 subP.setNumbering(concrete, 1);
 subSubP.setNumbering(concrete, 2);
@@ -90,7 +90,7 @@ subSubP.setNumbering(concrete, 2);
 Finally, you need to let your exporter know about your numbering
 styles when you're ready to render the document:
 
-```js
+```ts
 const packer = new Packer(doc, undefined, undefined, numbering);
 packer.pack(myOutput);
 ```

docs/usage/packers.md

@@ -2,15 +2,50 @@
 
 > Packers are the way in which `docx` turns your code into `.docx` format. It is completely decoupled from the `docx.Document`.
 
-## Version 4
-
 Packers in `version 4` and above are now one single `Packer`. It works in both a node and browser environment (Angular etc). Now, the packer returns a `Buffer`, `Blob` or `base64 string`. It is up to you to take that and persist it with node's `fs`, send it down as a downloadable file, or anything else you wish. As of version 4, this library will not have options to export to PDF.
 
+## Version 5
+
+Packers in `version 5` and above are now static methods on `Packer`.
+
 ### Export as Buffer
 
 This will return a NodeJS `Buffer`. If this is used in the browser, it will return a `UInt8Array` instead.
 
-```js
+```ts
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});
+```
+
+### Export as a `base64` string
+
+```ts
+Packer.toBase64String(doc).then((string) => {
+    console.log(string);
+});
+```
+
+### Export as Blob
+
+This is useful if you want to send it as an downloadable in a browser environment.
+
+```ts
+Packer.toBlob(doc).then((blob) => {
+    // saveAs from FileSaver will download the file
+    saveAs(blob, "example.docx");
+});
+```
+
+## Version 4
+
+The `Packer` in `version 4` requires an instance of `Packer`, so be sure to `new` it.
+
+### Export as Buffer
+
+This will return a NodeJS `Buffer`. If this is used in the browser, it will return a `UInt8Array` instead.
+
+```ts
 const packer = new docx.Packer();
 
 packer.toBuffer(doc).then((buffer) => {
@@ -20,7 +55,7 @@ packer.toBuffer(doc).then((buffer) => {
 
 ### Export as a `base64` string
 
-```js
+```ts
 const packer = new docx.Packer();
 
 packer.toBase64String(doc).then((string) => {
@@ -32,7 +67,7 @@ packer.toBase64String(doc).then((string) => {
 
 This is useful if you want to send it as an downloadable in a browser environment.
 
-```js
+```ts
 const packer = new docx.Packer();
 
 packer.toBlob(doc).then((blob) => {
@@ -45,7 +80,7 @@ packer.toBlob(doc).then((blob) => {
 
 ### File System Packer
 
-```js
+```ts
 const docx = require("docx");
 
 const doc = new docx.Document();
@@ -56,7 +91,7 @@ exporter.pack("My Document");
 
 ### Buffer Packer
 
-```js
+```ts
 const docx = require("docx");
 
 const doc = new docx.Document();
@@ -68,7 +103,7 @@ const buffer = exporter.pack();
 
 Creates a `node` `Readable` stream
 
-```js
+```ts
 const docx = require("docx");
 
 const doc = new docx.Document();
@@ -88,7 +123,7 @@ I used the express exporter in my [website](http://www.dolan.bio).
 
 The recommended way is to use the `StreamPacker` and handle the `express` magic outside of the library:
 
-```js
+```ts
 const docx = require("docx");
 
 const doc = new docx.Document();
@@ -107,7 +142,7 @@ where `res` is the response object obtained through the Express router. It is th
 
 You can export your word document as a PDF file like so:
 
-```js
+```ts
 const exporter = new docx.LocalPacker(doc);
 exporter.packPdf("My Document");
 

docs/usage/page-numbers.md

@@ -0,0 +1,66 @@
+# Page Numbers
+
+> This feature allows you to set page numbers on each page
+
+?> **Note:** This feature only works on Headers and Footers
+
+```ts
+doc.Header.createParagraph().addRun(new TextRun("Page Number: ").pageNumber()).addRun(new TextRun("to ").numberOfTotalPages());
+```
+
+## Current page number
+
+To get the current page number, call the `.pageNumber()` method on a `TextRun`. Then add the newly created `TextRun` into a paragraph
+
+```ts
+pageNumber();
+```
+
+For example:
+
+```ts
+const currentPageRun = new TextRun("Current Page Number: ").pageNumber();
+paragraph.addRun(currentPageRun);
+```
+
+## Total number of pages
+
+```ts
+numberOfTotalPages();
+```
+
+For example:
+
+```ts
+const lastPage = new TextRun("Total Page Number: ").numberOfTotalPages();
+paragraph.addRun(lastPage);
+```
+
+
+## Both
+
+You can combine the two to get "Page 2 of 10" effect:
+
+```ts
+const currentPageRun = new TextRun("Page ").pageNumber();
+const lastPage = new TextRun("of ").numberOfTotalPages();
+
+paragraph.addRun(currentPageRun);
+paragraph.addRun(lastPage);
+```
+
+Or:
+
+```ts
+doc.Header.createParagraph().addRun(new TextRun("Page ").pageNumber()).addRun(new TextRun("of ").numberOfTotalPages());
+```
+
+## Examples
+
+### Simple Example
+
+Adding page numbers to Header and Footer
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo39.ts ':include')
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo39.ts_

docs/usage/paragraph.md

@@ -2,28 +2,180 @@
 
 > Everything (text, images, graphs etc) in OpenXML is organised in paragraphs.
 
-## Example
+!> Paragraphs requires an understanding of [Sections](usage/sections.md).
 
-You can add more text to the paragraph by doing this:
+You can create `Paragraphs` in the following ways:
 
-```js
-var paragraph = new docx.Paragraph(),
+### Shorthand
+
+```ts
+import { Paragraph } from "docx";
+
+const paragraph = new Paragraph("Short hand Hello World");
 ```
 
-```js
-var text = new docx.TextRun("Lorem Ipsum Foo Bar");
-var paragraph = new docx.Paragraph();
-paragraph.addRun(text);
+### Children Method
+
+This method is useful for adding different `text` with different styles or adding `images` inline.
+
+```ts
+const paragraph = new Paragraph({
+    children: [new TextRun("Lorem Ipsum Foo Bar"), new TextRun("Hello World")],
+});
 ```
 
-```js
-var paragraph = new docx.Paragraph("Short hand notation for adding text.");
+### Explicit
+
+```ts
+const paragraph = new Paragraph({
+    text: "Short hand notation for adding text.",
+});
 ```
 
-After you create the paragraph, you must add the paragraph into the `document`:
+After you create the paragraph, you must add the paragraph into the `document's section`. Learn more about `sections` here:
 
-```js
-doc.addParagraph(paragraph);
+```ts
+doc.addSection({
+    children: [paragraph],
+});
+```
+
+Or the preferred convension, define the paragraph inside the section and remove the usage of variables:
+
+```ts
+doc.addSection({
+    children: [
+        new Paragraph({
+            children: [new TextRun("Lorem Ipsum Foo Bar"), new TextRun("Hello World")],
+        }),
+    ],
+});
+```
+
+## Options
+
+This is the list of options for a paragraph. A detailed explanation is below:
+
+| Property                      | Type                                                                                                                | Mandatory? | Possible Values                                                                                            |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------- |
+| [text](#text)                 | `string`                                                                                                            | Optional   |                                                                                                            |
+| [heading](#heading)           | `HeadingLevel`                                                                                                      | Optional   | `HEADING_1`, `HEADING_2`, `HEADING_3`, `HEADING_4`, `HEADING_5`, `HEADING_6`, `TITLE`                      |
+| [border](#border)             | `IBorderOptions`                                                                                                    | Optional   | `top`, `bottom`, `left`, `right`. Each of these are of type IBorderPropertyOptions. Click here for Example |
+| [spacing](#spacing)           | `ISpacingProperties`                                                                                                | Optional   | See below for ISpacingProperties                                                                           |
+| [outlineLevel](#outline-level) | `number`                                                                                                            | Optional   |                                                                                                            |
+| alignment                     | `AlignmentType`                                                                                                     | Optional   |                                                                                                            |
+| heading                       | `HeadingLevel`                                                                                                      | Optional   |                                                                                                            |
+| bidirectional                 | `boolean`                                                                                                           | Optional   |                                                                                                            |
+| thematicBreak                 | `boolean`                                                                                                           | Optional   |                                                                                                            |
+| pageBreakBefore               | `boolean`                                                                                                           | Optional   |                                                                                                            |
+| contextualSpacing             | `boolean`                                                                                                           | Optional   |                                                                                                            |
+| indent                        | `IIndentAttributesProperties`                                                                                       | Optional   |                                                                                                            |
+| keepLines                     | `boolean`                                                                                                           | Optional   |                                                                                                            |
+| keepNext                      | `boolean`                                                                                                           | Optional   |                                                                                                            |
+| children                      | `(TextRun or PictureRun or Hyperlink)[]`                                                                            | Optional   |                                                                                                            |
+| style                         | `string`                                                                                                            | Optional   |                                                                                                            |
+| tabStop                       | `{ left?: ITabStopOptions; right?: ITabStopOptions; maxRight?: { leader: LeaderType; }; center?: ITabStopOptions }` | Optional   |                                                                                                            |
+| bullet                        | `{ level: number }`                                                                                                 | Optional   |                                                                                                            |
+| numbering                     | `{ num: Num; level: number; custom?: boolean }`                                                                     | Optional   |                                                                                                            |
+
+## Text
+
+This is the text in a paragraph. You can also add text by using the `Paragraph` shorthand (mentioned above) or adding `children`.
+
+**Example:**
+
+```ts
+const paragraph = new Paragraph({
+    text: "Hello World",
+});
+```
+
+## Heading
+
+**Example:**
+
+Setting a Heading 1 paragraph with "Hello World" as it's text:
+
+```ts
+const paragraph = new Paragraph({
+    text: "Hello World",
+    heading: HeadingLevel.HEADING_1,
+});
+```
+
+## Border
+
+Add borders to a `Paragraph`. Good for making the `Paragraph` stand out
+
+#### IBorderPropertyOptions
+
+`top`, `bottom`, `left`, `right` of the border
+
+| Property | Type     | Notes    |
+| -------- | -------- | -------- |
+| color    | `string` | Required |
+| space    | `number` | Required |
+| value    | `string` | Required |
+| size     | `number` | Required |
+
+**Example:**
+
+Add border on the top and the bottom of the paragraph
+
+```ts
+const paragraph = new Paragraph({
+    text: "I have borders on my top and bottom sides!",
+    border: {
+        top: {
+            color: "auto",
+            space: 1,
+            value: "single",
+            size: 6,
+        },
+        bottom: {
+            color: "auto",
+            space: 1,
+            value: "single",
+            size: 6,
+        },
+    },
+});
+```
+
+## Spacing
+
+Adding spacing between paragraphs
+
+### ISpacingProperties
+
+| Property | Type     | Notes    |
+| -------- | -------- | -------- |
+| after    | `number` | Optional |
+| before   | `number` | Optional |
+| line     | `number` | Optional |
+| lineRule | `string` | Optional |
+
+**Example:**
+
+Add spacing before the paragraph:
+
+```ts
+const paragraph = new Paragraph({
+    text: "Paragraph with spacing before",
+    spacing: {
+        before: 200,
+    },
+});
+```
+
+## Outline Level
+
+**Example:**
+
+```ts
+const paragraph = new Paragraph({
+    outlineLevel: 0,
+});
 ```
 
 ## Styles
@@ -32,56 +184,60 @@ To create styles, please refer to the styling Wiki: https://github.com/dolanmiu/
 
 ![Word 2013 Styles menu](http://content.gcflearnfree.org/topics/233/style_apply_choose.png "Word 2013 Styles menu")
 
-### Heading1 - Heading5
+### Headings and titles
 
-```js
-paragraph.heading1();
-paragraph.heading2();
-paragraph.heading3();
-paragraph.heading4();
-paragraph.heading5();
-```
+```ts
+import { HeadingLevel, Paragraph } from "docx";
 
-### Title
-
-```js
-paragraph.title();
+const paragraph = new Paragraph({
+    text: "Hello World",
+    heading: HeadingLevel.TITLE,
+});
 ```
 
 ## Text Alignment
 
-To change the text alignment of a paragraph, for center, left, right or justified:
+To change the text alignment of a paragraph, add an `AlignmentType` option on the paragraph.for center, left, right or justified:
 
-```js
-paragraph.center();
-```
+**Example:**
 
-```js
-paragraph.left();
-```
-
-```js
-paragraph.right();
-```
-
-```js
-paragraph.justified();
-```
-
-### Example
-
-```js
-paragraph.heading1().center();
+```ts
+const paragraph = new Paragraph({
+    text: "Hello World",
+    heading: HeadingLevel.HEADING_1,
+    alignment: AlignmentType.CENTER,
+});
 ```
 
 The above will create a `heading 1` which is `centered`.
 
+### Justified text with breaks
+
+When a paragraph is justified, you may want to not justify the contents of incomplete lines, which end in a soft line break.
+
+![Justified line before](https://user-images.githubusercontent.com/7989576/53820338-e060c680-3f6b-11e9-817c-ecb43271951e.png)
+
+This is possible to achieve using:
+
+```ts
+this.doc.Settings.addCompatibility().doNotExpandShiftReturn();
+```
+
+The result is:
+
+![Justified line after](https://user-images.githubusercontent.com/7989576/53820344-e2c32080-3f6b-11e9-9afe-24a2ed6e0d78.png)
+
 ## Thematic Break
 
-To add a break in the page, simply add `.thematicBreak()` on a paragraph:
+To add a thematic break in the `Paragraph`:
 
-```js
-var paragraph = new docx.Paragraph("Amazing Heading").heading1().thematicBreak();
+```ts
+const paragraph = new docx.Paragraph("Amazing Heading");
+const paragraph = new Paragraph({
+    text: "Amazing Heading",
+    heading: HeadingLevel.HEADING_1,
+    thematicBreak: true,
+});
 ```
 
 The above example will create a heading with a page break directly under it.
@@ -90,8 +246,8 @@ The above example will create a heading with a page break directly under it.
 
 To move to a new page (insert a page break), simply add `.pageBreak()` on a paragraph:
 
-```js
-var paragraph = new docx.Paragraph("Amazing Heading").heading1().pageBreak();
+```ts
+const paragraph = new docx.Paragraph("Amazing Heading").pageBreak();
 ```
 
 The above example will create a heading and start a new page immediately afterwards.
@@ -100,13 +256,16 @@ The above example will create a heading and start a new page immediately afterwa
 
 This option (available in word) will make sure that the paragraph will start on a new page (if it's not already on a new page).
 
-```js
-var paragraph = new docx.Paragraph("Hello World on another page").pageBreakBefore();
+```ts
+const paragraph = new Paragraph({
+    text: "Hello World on another page",
+    pageBreakBefore: true,
+});
 ```
 
 ![Page Break Before in Word](https://user-images.githubusercontent.com/34742290/40176503-df3a8398-59db-11e8-8b9c-d719f13aa8b4.png)
 
-Example: https://github.com/dolanmiu/docx/blob/master/demo/demo15.js
+Example: https://github.com/dolanmiu/docx/blob/master/demo/demo15.ts
 
 ## Page break control
 

docs/usage/sections.md

@@ -0,0 +1,21 @@
+# Sections
+
+> Every document is made up of one or more sections
+
+A section is a grouping of paragraphs that have a specific set of properties used to define the pages on which the text will appear. Properties include page size, page numbers, page orientation, headers, borders and margins.
+
+For example, you could have one section which is portrait with a header and footer, and another section in landscape with no footer, and a header showing the current page number.
+
+## Example
+
+This creates a simple section in a document with one paragraph inside:
+
+```ts
+doc.addSection({
+    children: [
+        new Paragraph({
+            children: [new TextRun("Hello World")],
+        }),
+    ],
+});
+```

docs/usage/styling-with-js.md

@@ -2,7 +2,7 @@
 
 ## Example
 
-```js
+```ts
 const para = new Paragraph("To whom it may concern:").heading2().center();
 
 const name = new TextRun("Name:")
@@ -14,7 +14,7 @@ const name = new TextRun("Name:")
 ## Available methods
 
 *   For run formatting:
-    *   `.bold()`, `.italic()`, `.smallCaps()`, `.allCaps()`, `.strike()`, `.doubleStrike()`, `.subScript()`, `.superScript()`: Set the formatting property to true
+    *   `.bold()`, `.italics()`, `.smallCaps()`, `.allCaps()`, `.strike()`, `.doubleStrike()`, `.subScript()`, `.superScript()`: Set the formatting property to true
     *   `.underline(style="single", color=null)`: Set the underline style and color
     *   `.color(color)`: Set the text color, using 6 hex characters for RRGGBB (no leading `#`)
     *   `.size(halfPts)`: Set the font size, measured in half-points
@@ -56,7 +56,7 @@ Unlike CSS, less specific rules don't _necessarily_ override parent rules. The r
 
 This is the type of formatting that your uncle uses when he types out documents: _N ... a ... m ... e ... :_ Then he grabs the mouse, highlights _Name:_ and moves over to the **B** for bold. This manner of formatting results in markup that is similar to writing `<span style="bold: true">Name:</span>` if you were typing out HTML. DOCX (the format) allows you to specify this for any of the four types of items. `docx` (the library) only supports this type of formatting for paragraphs and characters, using a _fluent_ api. Thus you could do:
 
-```js
+```ts
 const name = new TextRun("Name:")
     .bold()
     .font("Calibri")
@@ -65,7 +65,7 @@ const name = new TextRun("Name:")
 
 Or for paragraph formatting:
 
-```js
+```ts
 const para = new Paragraph("To whom it may concern:").heading2().center();
 ```
 
@@ -76,12 +76,12 @@ DOCX files contain a styles section separate from the main content, much like ho
 There are three parts to using custom styles with `docx`:
 
 1.  Create a container object for the style definitions:
-    ```js
+    ```ts
     const myStyles = new docx.Styles();
     ```
 2.  Define your custom styles, similar to the way you would format a paragraph or run
 
-    ```js
+    ```ts
     // The first argument is an ID you use to apply the style to paragraphs
     // The second argument is a human-friendly name to show in the UI
     myStyles
@@ -106,9 +106,8 @@ There are three parts to using custom styles with `docx`:
 
 3.  When you generate your document, make sure to pass the `styles` container to the `Packer`:
 
-    ```js
-    const packer = new Packer(doc, myStyles);
-    packer.pack(myOutStream);
+    ```ts
+    Packer.pack(myOutStream);
     ```
 
 **Note**: If you are using the `.headingX` or `.title` methods of paragraphs, you must make sure to define `HeadingX` or `Title` styles for these. Otherwise they'll show up unstyled :(. If you are using the `.bullet` or `.setNumbering` methods, you need to define a `ListParagraph` style or the numbers may not show up.

docs/usage/styling-with-xml.md

@@ -24,7 +24,7 @@
 
 Read the styles using `fs`, and put it into the `Document` object in the constructor:
 
-```js
+```ts
 const styles = fs.readFileSync("./styles.xml", "utf-8");
 const doc = new docx.Document({
     title: "Title",
@@ -34,14 +34,14 @@ const doc = new docx.Document({
 
 You can use paragraphs, `heading1()`, `heading2()` etc and it will be styled according to your `styles.xml` created earlier. You can even use your new style you made by calling the `style` method:
 
-```js
+```ts
 doc.createParagraph("Cool Heading Text").heading1();
 
-let paragraph = new docx.Paragraph('This is a custom named style from the template "Cool New Style"');
+const paragraph = new docx.Paragraph('This is a custom named style from the template "Cool New Style"');
 paragraph.style("Cool New Style");
-doc.addParagraph(paragraph);
+doc.add(paragraph);
 
 doc.createParagraph("Some normal text");
 ```
 
-Example: https://github.com/dolanmiu/docx/blob/master/demo/demo13.js
+Example: https://github.com/dolanmiu/docx/blob/master/demo/demo13.ts

docs/usage/tab-stops.md

@@ -2,7 +2,7 @@
 
 > Tab stops are useful, if you are unclear of what they are, [here is a link explaining](https://en.wikipedia.org/wiki/Tab_stop). It enables side by side text which is nicely laid out without the need for tables, or constantly pressing space bar.
 
-**Note**: At the moment, the unit of measurement for a tab stop is counter intuitive for a human. It is using OpenXMLs own measuring system. For example, 2268 roughly translates to 3cm. Therefore in the future, I may consider changing it to percentages or even cm.
+!> **Note**: At the moment, the unit of measurement for a tab stop is counter intuitive for a human. It is using OpenXMLs own measuring system. For example, 2268 roughly translates to 3cm. Therefore in the future, I may consider changing it to percentages or even cm.
 
 ![Word 2013 Tabs](http://www.teachucomp.com/wp-content/uploads/blog-4-22-2015-UsingTabStopsInWord-1024x577.png "Word 2013 Tab Stops")
 
@@ -10,45 +10,45 @@ Simply call the relevant methods on the paragraph listed below. Then just add a
 
 ## Example
 
-```js
-var paragraph = new docx.Paragraph().maxRightTabStop();
-var leftText = new docx.TextRun("Hey everyone").bold();
-var rightText = new docx.TextRun("11th November 2015").tab();
+```ts
+const paragraph = new docx.Paragraph().maxRightTabStop();
+const leftText = new docx.TextRun("Hey everyone").bold();
+const rightText = new docx.TextRun("11th November 2015").tab();
 paragraph.addRun(leftText);
 paragraph.addRun(rightText);
 ```
 The example above will create a left aligned text, and a right aligned text on the same line. The laymans approach to this problem would be to either use text boxes or tables. YUK!
 
-```js
-var paragraph = new docx.Paragraph();
+```ts
+const paragraph = new docx.Paragraph();
 paragraph.maxRightTabStop();
 paragraph.leftTabStop(1000);
-var text = new docx.TextRun("Second tab stop here I come!").tab().tab();
+const text = new docx.TextRun("Second tab stop here I come!").tab().tab();
 paragraph.addRun(text);
 ```
 
 The above shows the use of two tab stops, and how to select/use it.
 
 ## Left Tab Stop
-```js
+```ts
 paragraph.leftTabStop(2268);
 ```
 2268 is the distance from the left side.
 
 ## Center Tab Stop
-```js
+```ts
 paragraph.centerTabStop(2268);
 ```
 2268 is the distance from the left side.
 
 ## Right Tab Stop
-```js
+```ts
 paragraph.rightTabStop(2268);
 ```
 2268 is the distance from the left side.
 
 ## Max Right Tab Stop
-```js
+```ts
 paragraph.maxRightTabStop();
 ```
 This will create a tab stop on the very edge of the right hand side. Handy for right aligning and left aligning text on the same line.

docs/usage/table-of-contents.md

@@ -12,7 +12,7 @@ The complete documentation can be found [here](https://www.ecma-international.or
 
 All you need to do is create a `TableOfContents` object and assign it to the document.
 
-```js
+```ts
 const toc = new TableOfContents("Summary", {
     hyperlink: true,
     headingStyleRange: "1-5",
@@ -47,7 +47,7 @@ Here is the list of all options that you can use to generate your tables of cont
 
 ## Examples
 
-```js
+```ts
 // Let's define the options for generate a TOC for heading 1-5 and MySpectacularStyle,
 // making the entries be hyperlinks for the paragraph
 const toc = new TableOfContents("Summary", {
@@ -58,19 +58,19 @@ const toc = new TableOfContents("Summary", {
 
 doc.addTableOfContents(toc);
 
-doc.addParagraph(new Paragraph("Header #1").heading1().pageBreakBefore());
-doc.addParagraph(new Paragraph("I'm a little text, very nicely written.'"));
+doc.add(new Paragraph("Header #1").heading1().pageBreakBefore());
+doc.add(new Paragraph("I'm a little text, very nicely written.'"));
 
-doc.addParagraph(new Paragraph("Header #2").heading1().pageBreakBefore());
-doc.addParagraph(new Paragraph("I'm another text very nicely written.'"));
-doc.addParagraph(new Paragraph("Header #2.1").heading2());
-doc.addParagraph(new Paragraph("I'm another text very nicely written.'"));
+doc.add(new Paragraph("Header #2").heading1().pageBreakBefore());
+doc.add(new Paragraph("I'm another text very nicely written.'"));
+doc.add(new Paragraph("Header #2.1").heading2());
+doc.add(new Paragraph("I'm another text very nicely written.'"));
 
-doc.addParagraph(new Paragraph("My Spectacular Style #1").style("MySpectacularStyle").pageBreakBefore());
+doc.add(new Paragraph("My Spectacular Style #1").style("MySpectacularStyle").pageBreakBefore());
 ```
 
 ### Complete example
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo28.ts ":include")
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo28.ts ':include')
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo28.ts_

docs/usage/tables.md

@@ -0,0 +1,306 @@
+# Tables
+
+You can create tables with `docx`. More information can be found [here](http://officeopenxml.com/WPtable.php).
+
+## Create Table
+
+To create a table, simply create one with `new Table()`, then add it to the document: `doc.add()`.
+
+```ts
+const table = doc.add(new Table({
+    rows: [NUMBER OF ROWS],
+    columns: [NUMBER OF COLUMNS]
+});
+```
+
+Alternatively, you can create a table object directly, and then add it in the `document`
+
+```ts
+const table = new Table(4, 4);
+doc.add(table);
+```
+
+The snippet below creates a table of 2 rows and 4 columns.
+
+```ts
+const table = new Table({
+    rows: 2,
+    columns: 4,
+});
+doc.add(table);
+```
+
+## Rows and Columns
+
+You can get a row or a column from a table like so, where `index` is a number:
+
+### Get Row
+
+```ts
+const row = doc.getRow(index);
+```
+
+With this, you can merge a row by using the `mergeCells()` method, where `startIndex` is the row number you want to merge from, and `endIndex` is where you want it to merge to:
+
+```ts
+row.mergeCells(startIndex, endIndex);
+```
+
+You can get a cell from a `row` by using the `getCell()` method, where `index` is the row index:
+
+```ts
+row.getCell(index);
+```
+
+### Get Column
+
+```ts
+const column = doc.getColumn(index);
+```
+
+Again, you can merge a row by using the `mergeCells()` method, where `startIndex` is the row number you want to merge from, and `endIndex` is where you want it to merge to:
+
+```ts
+column.mergeCells(startIndex, endIndex);
+```
+
+You can get a cell from a `column` by using the `getCell()` method, where `index` is the column index:
+
+```ts
+column.getCell(index);
+```
+
+## Cells
+
+To access the cell, use the `getCell()` method.
+
+```ts
+const cell = table.getCell([ROW INDEX], [COLUMN INDEX]);
+```
+
+You can also get a cell from a `column` or a `row` with `getCell()`, mentioned previously.
+
+For example:
+
+```ts
+const cell = table.getCell(0, 2);
+
+const cell = row.getCell(0);
+
+const cell = column.getCell(2);
+```
+
+### Add paragraph to a cell
+
+Once you have got the cell, you can add data to it with the `add()` method.
+
+```ts
+cell.add(new Paragraph("Hello"));
+```
+
+### Set width of a cell
+
+You can specify the width of a cell using:
+
+`cell.Properties.setWidth(width, format)`
+
+format can be:
+
+-   WidthType.AUTO
+-   WidthType.DXA: value is in twentieths of a point
+-   WidthType.NIL: is considered as zero
+-   WidthType.PCT: percent of table width
+
+### Example
+
+```ts
+cell.Properties.setWidth(100, WidthType.DXA);
+```
+
+```ts
+cell.Properties.setWidth("50%", WidthType.PCT);
+```
+
+## Borders
+
+BorderStyle can be imported from `docx`. Size determines the thickness. HTML color can be a hex code or alias such as `red`.
+
+```ts
+cell.Borders.addTopBorder([BorderStyle], [SIZE], [HTML COLOR]);
+```
+
+```ts
+cell.Borders.addBottomBorder([BorderStyle], [SIZE], [HTML COLOR]);
+```
+
+```ts
+cell.Borders.addStartBorder([[BorderStyle]], [SIZE], [HTML COLOR]);
+```
+
+```ts
+cell.Borders.addEndBorder([BorderStyle], [SIZE], [HTML COLOR]);
+```
+
+### Example
+
+```ts
+import { BorderStyle } from "docx";
+
+cell.Borders.addStartBorder(BorderStyle.DOT_DOT_DASH, 3, "green");
+cell.Borders.addEndBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000");
+```
+
+### Google DOCS
+
+Google DOCS does not support start and end borders, instead they use left and right borders. So to set left and right borders for Google DOCS you should use:
+
+```ts
+import { BorderStyle } from "docx";
+
+cell.Borders.addLeftBorder(BorderStyle.DOT_DOT_DASH, 3, "green");
+cell.Borders.addRightBorder(BorderStyle.DOT_DOT_DASH, 3, "#ff8000");
+```
+
+## Set Width
+
+```ts
+import { WidthType } from "docx";
+
+table.setWidth([WIDTH], [OPTIONAL WidthType. Defaults to DXA]);
+```
+
+For example:
+
+```ts
+table.setWidth(4535, WidthType.DXA);
+```
+
+## Vertical Align
+
+Sets the vertical alignment of the contents of the cell
+
+```ts
+import { VerticalAlign } from "docx";
+
+cell.setVerticalAlign([VerticalAlign TYPE]);
+```
+
+For example, to center align a cell:
+
+```ts
+cell.setVerticalAlign(VerticalAlign.CENTER);
+```
+
+## Rows
+
+To get a row, use the `getRow` method on a `table`. There are a handful of methods which you can apply to a row which will be explained below.
+
+```ts
+table.getRow([ROW INDEX]);
+```
+
+## Merge cells together
+
+### Merging on a row
+
+First obtain the row, and call `mergeCells()`. The first argument is where the merge should start. The second argument is where the merge should end.
+
+```ts
+table.getRow(0).mergeCells([FROM INDEX], [TO INDEX]);
+```
+
+#### Example
+
+This will merge 3 cells together starting from index `0`:
+
+```ts
+table.getRow(0).mergeCells(0, 2);
+```
+
+### Merging on a column
+
+It has not been implemented yet, but it will follow a similar structure as merging a row.
+
+## Nested Tables
+
+To have a table within a table
+
+```ts
+cell.add(new Table(1, 1));
+```
+
+## Pagination
+
+###Prevent row pagination
+To prevent breaking contents of a row across multiple pages, call `cantSplit()`:
+
+```ts
+table.getRow(0).setCantSplit();
+```
+
+###Repeat row
+If a table is paginated on multiple pages, it is possible to repeat a row at the top of each new page calling `setTableHeader()`:
+
+```ts
+table.getRow(0).setTableHeader();
+```
+
+## Examples
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo4.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo4.ts_
+
+### Custom borders
+
+Example showing how to add colourful borders to tables
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo20.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo20.ts_
+
+### Adding images
+
+Example showing how to add images to tables
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo24.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo24.ts_
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo36.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo36.ts_
+
+### Alignment of text in a cell
+
+Example showing how align text in a table cell
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo31.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo31.ts_
+
+### Merging rows
+
+Example showing merging of `rows`
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo32.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo32.ts_
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo41.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo41.ts_
+
+### Merging columns
+
+Example showing merging of `columns`
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo43.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo43.ts_
+
+### Floating tables
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo34.ts ":include")
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo34.ts_

docs/usage/text.md

@@ -1,10 +1,15 @@
-# Text
+# Text Runs
 
-Paragraphs need `text run` objects. To create text:
+!> TextRuns requires an understanding of [Paragraphs](usage/paragraph.md).
 
-```js
-var text = new docx.TextRun("My awesome text here for my university dissertation");
-paragraph.addRun(text);
+You can add multiple `text runs` in `Paragraphs`. This is the most verbose way of writing a `Paragraph` but it is also the most flexible:
+
+```ts
+import { Paragraph, TextRun } from "docx";
+
+const paragraph = new Paragraph({
+    children: [new TextRun("My awesome text here for my university dissertation"), new TextRun("Foo Bar")],
+});
 ```
 
 Text objects have methods inside which changes the way the text is displayed.
@@ -15,55 +20,87 @@ More info [here](https://english.stackexchange.com/questions/97081/what-is-the-t
 
 ### Bold
 
-```js
-text.bold();
+```ts
+const text = new TextRun({
+    text: "Foo Bar",
+    bold: true,
+});
 ```
 
 ### Italics
 
-```js
-text.italic();
+```ts
+const text = new TextRun({
+    text: "Foo Bar",
+    italics: true,
+});
 ```
 
 ### Underline
 
-```js
-text.underline();
+Underline has a few options
+
+#### Options
+
+| Property | Type            | Notes    | Possible Values                                                                                                                                                           |
+| -------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| type     | `UnderlineType` | Optional | SINGLE, WORD, DOUBLE, THICK, DOTTED, DOTTEDHEAV, DASH, DASHEDHEAV, DASHLONG, DASHLONGHEAV, DOTDASH, DASHDOTHEAVY, DOTDOTDAS, DASHDOTDOTHEAVY, WAVE, WAVYHEAVY, WAVYDOUBLE |
+| color    | `string`        | Optional | Color Hex values                                                                                                                                                          |
+
+**Example:**
+
+```ts
+const text = new TextRun({
+    text: "and then underlined ",
+    underline: {
+        type: UnderlineType.DOUBLE,
+        color: "990011",
+    },
+});
+```
+
+To do a simple vanilla underline:
+
+```ts
+const text = new TextRun({
+    text: "and then underlined ",
+    underline: {},
+});
 ```
 
 ### Strike through
 
-```js
+```ts
 text.strike();
 ```
 
 ### Double strike through
 
-```js
+```ts
 text.doubleStrike();
 ```
 
 ### Superscript
 
-```js
+```ts
 text.superScript();
 ```
 
 ### Subscript
 
-```js
+```ts
 text.subScript();
 ```
 
 ### All Capitals
 
-```js
+```ts
 text.allCaps();
 ```
 
 ### Small Capitals
 
-```js
+```ts
 text.smallCaps();
 ```
 
@@ -71,7 +108,7 @@ text.smallCaps();
 
 Sometimes you would want to put text underneath another line of text but inside the same paragraph.
 
-```js
+```ts
 text.break();
 ```
 
@@ -79,6 +116,6 @@ text.break();
 
 What if you want to create a paragraph which is **_bold_** and **_italic_**?
 
-```js
-paragraph.bold().italic();
+```ts
+paragraph.bold().italics();
 ```

package.json

@@ -1,23 +1,25 @@
 {
   "name": "docx",
-  "version": "4.3.0",
+  "version": "5.0.0-rc5",
   "description": "Generate .docx documents with JavaScript (formerly Office-Clippy)",
   "main": "build/index.js",
   "scripts": {
     "pretest": "rimraf ./build",
     "test": "mocha-webpack \"src/**/*.ts\"",
-    "test-watch": "mocha-webpack \"src/**/*.ts\" --watch",
-    "prepublishOnly": "npm run build",
+    "test.coverage": "nyc npm test",
+    "test.watch": "npm test -- --watch",
+    "prepublishOnly": "npm run build --production",
     "lint": "tslint --project .",
     "build": "npm run webpack && npm run fix-types",
     "tsc": "rimraf ./build && tsc -p .",
     "webpack": "rimraf ./build && webpack",
-    "build.web": "webpack --config webpack.web.config.js",
     "demo": "npm run build && npm run ts-node ./demo",
     "typedoc": "typedoc src/index.ts",
     "style": "prettier -l \"src/**/*.ts\"",
-    "style.fix": "prettier \"src/**/*.ts\" --write",
-    "fix-types": "node types-absolute-fixer.js",
+    "style.fix": "npm run style -- --write",
+    "fix-types": "ts-node scripts/types-absolute-fixer.ts",
+    "e2e": "ts-node scripts/e2e.ts",
+    "serve.docs": "cd docs && docsify serve",
     "ts-node": "ts-node"
   },
   "pre-commit": [
@@ -47,12 +49,10 @@
   ],
   "types": "./build/index.d.ts",
   "dependencies": {
-    "@types/image-size": "0.0.29",
-    "@types/jszip": "^3.1.3",
-    "fast-xml-parser": "^3.3.6",
-    "image-size": "^0.6.2",
+    "@types/jszip": "^3.1.4",
     "jszip": "^3.1.5",
-    "xml": "^1.0.1"
+    "xml": "^1.0.1",
+    "xml-js": "^1.6.8"
   },
   "author": "Dolan Miu",
   "license": "MIT",
@@ -63,22 +63,30 @@
   "devDependencies": {
     "@types/chai": "^3.4.35",
     "@types/mocha": "^2.2.39",
+    "@types/request-promise": "^4.1.42",
     "@types/sinon": "^4.3.1",
+    "@types/webpack": "^4.4.24",
     "awesome-typescript-loader": "^3.4.1",
     "chai": "^3.5.0",
+    "docsify-cli": "^4.3.0",
     "glob": "^7.1.2",
+    "istanbul-instrumenter-loader": "^3.0.1",
     "jszip": "^3.1.5",
     "mocha": "^5.2.0",
     "mocha-webpack": "^1.0.1",
+    "nyc": "^13.1.0",
     "pre-commit": "^1.2.2",
-    "prettier": "^1.12.1",
+    "prettier": "^1.15.2",
     "prompt": "^1.0.0",
     "replace-in-file": "^3.1.0",
+    "request": "^2.88.0",
+    "request-promise": "^4.2.2",
     "rimraf": "^2.5.2",
     "shelljs": "^0.7.7",
     "sinon": "^5.0.7",
     "ts-node": "^7.0.1",
     "tslint": "^5.11.0",
+    "tslint-immutable": "^4.9.0",
     "typedoc": "^0.11.1",
     "typescript": "2.9.2",
     "webpack": "^3.10.0"

scripts/e2e.ts

@@ -0,0 +1,30 @@
+// tslint:disable:no-console
+import * as fs from "fs";
+import * as request from "request-promise";
+
+async function e2e(filePath: string): Promise<void> {
+    console.log(`Running e2e for: ${filePath}`);
+
+    if (!fs.existsSync(filePath)) {
+        console.error("File not found");
+        throw Error("File not found");
+    }
+
+    const result = await request.post({
+        url: "https://wt-9017166451e5dc00461b648d19f5e8da-0.sandbox.auth0-extend.com/docx-validator",
+        formData: {
+            document: fs.createReadStream(filePath),
+        },
+    });
+
+    return result;
+}
+
+e2e(process.argv[2])
+    .then(() => {
+        console.log("Success! Document is valid");
+    })
+    .catch(() => {
+        console.log("Error! Validation failed");
+        process.exit(1);
+    });

scripts/types-absolute-fixer.ts

@@ -1,5 +1,5 @@
-const glob = require("glob");
-const replace = require("replace-in-file");
+import * as glob from "glob";
+import * as replace from "replace-in-file";
 
 const files = glob.sync("build/**/*.d.ts");
 
@@ -14,7 +14,7 @@ for (const file of files) {
                 .fill("../")
                 .join("");
 
-           return `"${backLevels}${matchSlug}"`;
+            return `"${backLevels}${matchSlug}"`;
         },
     });
 }

src/export/formatter.spec.ts

@@ -1,10 +1,9 @@
-import { assert } from "chai";
+import { assert, expect } from "chai";
 
-import { Formatter } from "../export/formatter";
-import * as file from "../file";
-import { CoreProperties } from "../file/core-properties";
-import { Attributes } from "../file/xml-components";
-import { Utility } from "../tests/utility";
+import { Formatter } from "export/formatter";
+import * as file from "file";
+import { CoreProperties } from "file/core-properties";
+import { Attributes } from "file/xml-components";
 
 describe("Formatter", () => {
     let formatter: Formatter;
@@ -15,53 +14,56 @@ describe("Formatter", () => {
 
     describe("#format()", () => {
         it("should format simple paragraph", () => {
-            const paragraph = new file.Paragraph();
+            const paragraph = new file.Paragraph("");
             const newJson = formatter.format(paragraph);
             assert.isDefined(newJson["w:p"]);
         });
 
         it("should remove xmlKeys", () => {
-            const paragraph = new file.Paragraph();
+            const paragraph = new file.Paragraph("");
             const newJson = formatter.format(paragraph);
             const stringifiedJson = JSON.stringify(newJson);
             assert(stringifiedJson.indexOf("xmlKeys") < 0);
         });
 
         it("should format simple paragraph with bold text", () => {
-            const paragraph = new file.Paragraph();
-            paragraph.addRun(new file.TextRun("test").bold());
+            const paragraph = new file.Paragraph("");
+            paragraph.addRun(
+                new file.TextRun({
+                    text: "test",
+                    bold: true,
+                }),
+            );
             const newJson = formatter.format(paragraph);
-            assert.isDefined(newJson["w:p"][1]["w:r"][0]["w:rPr"][0]["w:b"][0]._attr["w:val"]);
+            assert.isDefined(newJson["w:p"][1]["w:r"][0]["w:rPr"][0]["w:b"]._attr["w:val"]);
         });
 
         it("should format attributes (rsidSect)", () => {
             const attributes = new Attributes({
                 rsidSect: "test2",
             });
-            let newJson = formatter.format(attributes);
-            newJson = Utility.jsonify(newJson);
-            if (newJson._attr === undefined) {
-                assert.fail();
-                return;
-            }
-            assert.isDefined(newJson._attr["w:rsidSect"]);
+            const tree = formatter.format(attributes);
+            expect(tree).to.deep.equal({
+                _attr: {
+                    "w:rsidSect": "test2",
+                },
+            });
         });
 
         it("should format attributes (val)", () => {
             const attributes = new Attributes({
                 val: "test",
             });
-            let newJson = formatter.format(attributes);
-            newJson = Utility.jsonify(newJson);
-            if (newJson._attr === undefined) {
-                assert.fail();
-                return;
-            }
-            assert.isDefined(newJson._attr["w:val"]);
+            const tree = formatter.format(attributes);
+            expect(tree).to.deep.equal({
+                _attr: {
+                    "w:val": "test",
+                },
+            });
         });
 
         it("should should change 'p' tag into 'w:p' tag", () => {
-            const paragraph = new file.Paragraph();
+            const paragraph = new file.Paragraph("");
             const newJson = formatter.format(paragraph);
             assert.isDefined(newJson["w:p"]);
         });

src/export/formatter.ts

@@ -2,6 +2,12 @@ import { BaseXmlComponent, IXmlableObject } from "file/xml-components";
 
 export class Formatter {
     public format(input: BaseXmlComponent): IXmlableObject {
-        return input.prepForXml();
+        const output = input.prepForXml();
+
+        if (output) {
+            return output;
+        } else {
+            throw Error("XMLComponent did not format correctly");
+        }
     }
 }