Version bump

Add shading (background color) for cell

.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,12 +3,14 @@ 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 e2e "My Document.docx"
   - npm run ts-node -- ./demo/demo2.ts
   - npm run ts-node -- ./demo/demo3.ts
   - npm run ts-node -- ./demo/demo4.ts
@@ -18,6 +20,7 @@ script:
   - npm run ts-node -- ./demo/demo8.ts
   - npm run ts-node -- ./demo/demo9.ts
   - npm run ts-node -- ./demo/demo10.ts
+  - npm run e2e "My Document.docx"
   - npm run ts-node -- ./demo/demo11.ts
   - npm run ts-node -- ./demo/demo12.ts
   - npm run ts-node -- ./demo/demo13.ts
@@ -32,12 +35,24 @@ script:
   - 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/demo25.ts
+  - npm run ts-node -- ./demo/demo26.ts
+  - npm run ts-node -- ./demo/demo27.ts
+  - npm run ts-node -- ./demo/demo28.ts
+  - npm run ts-node -- ./demo/demo29.ts
+  - npm run ts-node -- ./demo/demo30.ts
+  - npm run ts-node -- ./demo/demo31.ts
+  - npm run ts-node -- ./demo/demo32.ts
+#   - npm run e2e "My Document.docx" // Need to fix
+  - npm run ts-node -- ./demo/demo33.ts
+  - npm run ts-node -- ./demo/demo34.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,7 +25,7 @@
 
 ## 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
@@ -63,8 +64,17 @@ 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="200"/>](https://hfour.com/)
+[<img src="https://i.imgur.com/OYP5tgS.png" alt="drawing" height="200"/>](https://fuzzproductions.com/)
+[<img src="https://i.imgur.com/zUDMfZ3.png" alt="drawing" height="200"/>](https://www.mettzer.com/)
+
 ---
 
+[![patreon][patreon-image]][patreon-url]
+[![browserstack][browserstack-image]][browserstack-url]
+
 Made with 💖
 
 [npm-image]: https://badge.fury.io/js/docx.svg
@@ -81,3 +91,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/demo10.ts

@@ -1,4 +1,4 @@
-// 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";
@@ -233,7 +233,7 @@ class DocumentCreator {
 
     public createRoleText(roleText: string): Paragraph {
         const paragraph = new Paragraph();
-        const role = new TextRun(roleText).italic();
+        const role = new TextRun(roleText).italics();
 
         paragraph.addRun(role);
 

demo/demo11.ts

@@ -84,8 +84,7 @@ doc.Styles.createParagraphStyle("ListParagraph", "List Paragraph")
     .basedOn("Normal");
 
 doc.createImage(fs.readFileSync("./demo/images/pizza.gif"));
-doc
-    .createParagraph("HEADING")
+doc.createParagraph("HEADING")
     .heading1()
     .center();
 
@@ -107,12 +106,15 @@ doc.createParagraph("Sir,").style("normalPara");
 
 doc.createParagraph("BRIEF DESCRIPTION").style("normalPara");
 
-const table = new Table(4, 4);
+const table = new Table({
+    rows: 4,
+    columns: 4,
+});
 table
     .getRow(0)
     .getCell(0)
-    .addContent(new Paragraph("Pole No."));
-// table.Properties.width = 10000;
+    .addParagraph(new Paragraph("Pole No."));
+
 doc.addTable(table);
 
 const arrboth = [
@@ -127,10 +129,7 @@ const arrboth = [
 ];
 
 arrboth.forEach((item) => {
-    const para = doc.createParagraph();
-    para.addImage(doc.createImage(fs.readFileSync(item.image)));
-    // para.Properties.width = 60;
-    // para.Properties.height = 90;
+    doc.createImage(fs.readFileSync(item.image));
     doc.createParagraph(item.comment).style("normalPara2");
 });
 

demo/demo16.ts

@@ -1,7 +1,7 @@
 // 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";
+import { Document, Packer, PageNumberFormat, PageOrientation, Paragraph, TextRun } from "../build";
 
 const doc = new Document();
 
@@ -15,8 +15,12 @@ const footer = doc.createFooter();
 footer.createParagraph("Footer on another page");
 
 doc.addSection({
-    headerId: header.Header.ReferenceId,
-    footerId: footer.Footer.ReferenceId,
+    headers: {
+        default: header,
+    },
+    footers: {
+        default: footer,
+    },
     pageNumberStart: 1,
     pageNumberFormatType: PageNumberFormat.DECIMAL,
 });
@@ -24,8 +28,12 @@ doc.addSection({
 doc.createParagraph("hello");
 
 doc.addSection({
-    headerId: header.Header.ReferenceId,
-    footerId: footer.Footer.ReferenceId,
+    headers: {
+        default: header,
+    },
+    footers: {
+        default: footer,
+    },
     pageNumberStart: 1,
     pageNumberFormatType: PageNumberFormat.DECIMAL,
     orientation: PageOrientation.LANDSCAPE,
@@ -33,6 +41,42 @@ doc.addSection({
 
 doc.createParagraph("hello in landscape");
 
+const header2 = doc.createHeader();
+const pageNumber = new TextRun("Page number: ").pageNumber();
+header2.createParagraph().addRun(pageNumber);
+
+doc.addSection({
+    headers: {
+        default: header2,
+    },
+    orientation: PageOrientation.PORTRAIT,
+});
+
+doc.createParagraph("Page number in the header must be 2, because it continues from the previous section.");
+
+doc.addSection({
+    headers: {
+        default: header2,
+    },
+    pageNumberFormatType: PageNumberFormat.UPPER_ROMAN,
+    orientation: PageOrientation.PORTRAIT,
+});
+
+doc.createParagraph(
+    "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: header2,
+    },
+    pageNumberFormatType: PageNumberFormat.DECIMAL,
+    pageNumberStart: 25,
+    orientation: PageOrientation.PORTRAIT,
+});
+
+doc.createParagraph("Page number in the header must be 25, because it is defined to start at 25 and to be decimal in this section.");
+
 const packer = new Packer();
 
 packer.toBuffer(doc).then((buffer) => {

demo/demo20.ts

@@ -5,11 +5,14 @@ import { BorderStyle, Document, Packer, Paragraph } from "../build";
 
 const doc = new Document();
 
-const table = doc.createTable(4, 4);
+const table = doc.createTable({
+    rows: 4,
+    columns: 4,
+});
 table
     .getCell(2, 2)
-    .addContent(new Paragraph("Hello"))
-    .CellProperties.Borders.addTopBorder(BorderStyle.DASH_DOT_STROKED, 3, "red")
+    .addParagraph(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");

demo/demo22.ts

@@ -16,7 +16,7 @@ paragraph2.addRun(textRun2);
 doc.addParagraph(paragraph2);
 
 const paragraph3 = new Paragraph().bidirectional();
-const textRun3 = new TextRun("שלום עולם").italic().rightToLeft();
+const textRun3 = new TextRun("שלום עולם").italics().rightToLeft();
 paragraph3.addRun(textRun3);
 doc.addParagraph(paragraph3);
 

demo/demo23.ts

@@ -8,11 +8,11 @@ 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 = `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`;
 const image6 = Media.addImage(doc, Buffer.from(imageBase64Data, "base64"), 100, 100);

demo/demo24.ts

@@ -5,11 +5,14 @@ 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 table = doc.createTable({
+    rows: 4,
+    columns: 4,
+});
+table.getCell(2, 2).addParagraph(new Paragraph("Hello"));
 
-const image = Media.addImage(doc, "./demo/images/image1.jpeg");
-table.getCell(1, 1).addContent(image.Paragraph);
+const image = Media.addImage(doc, fs.readFileSync("./demo/images/image1.jpeg"));
+table.getCell(1, 1).addParagraph(image.Paragraph);
 
 const packer = new Packer();
 

demo/demo27.ts

@@ -1,3 +1,5 @@
+// Custom styles using JavaScript configuration
+// Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
 import { Document, Packer } from "../build";
 
@@ -30,5 +32,4 @@ 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,4 +1,4 @@
-// Creates two paragraphs, one with a border and one without
+// Table of contents
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
 import { File, Packer, Paragraph, StyleLevel, TableOfContents } from "../build";

demo/demo29.ts

@@ -1,3 +1,5 @@
+// Numbered lists
+// Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
 import { Document, Indent, Numbering, Packer, Paragraph } from "../build";
 
@@ -15,10 +17,22 @@ 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);
+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);

demo/demo30.ts

@@ -0,0 +1,31 @@
+// 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) => {
+        // This any needs fixing
+        const sectionProps = {
+            titlePage: templateDocument.titlePageIsDefined,
+        } as any;
+
+        const doc = new Document(undefined, sectionProps, {
+            template: templateDocument,
+        });
+        const paragraph = new Paragraph("Hello World");
+        doc.addParagraph(paragraph);
+
+        const packer = new Packer();
+        packer.toBuffer(doc).then((buffer) => {
+            fs.writeFileSync("My Document.docx", buffer);
+        });
+    });
+});

demo/demo31.ts

@@ -5,15 +5,18 @@ import { Document, Packer, Paragraph, VerticalAlign } from "../build";
 
 const doc = new Document();
 
-const table = doc.createTable(2, 2);
+const table = doc.createTable({
+    rows: 2,
+    columns: 2,
+});
 table
     .getCell(1, 1)
-    .addContent(new Paragraph("This text should be in the middle of the cell"))
-    .CellProperties.setVerticalAlign(VerticalAlign.CENTER);
+    .addParagraph(new Paragraph("This text should be in the middle of the cell"))
+    .setVerticalAlign(VerticalAlign.CENTER);
 
 table
     .getCell(1, 0)
-    .addContent(
+    .addParagraph(
         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(),

demo/demo32.ts

@@ -1,33 +1,99 @@
-// Example of how you would create a table and add data to it
+// 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, Packer, Paragraph } from "../build";
+import { Document, Packer, Paragraph, ShadingType, WidthType } from "../build";
 
 const doc = new Document();
 
-let table = doc.createTable(2, 2);
+let table = doc.createTable({
+    rows: 2,
+    columns: 2,
+});
 
-table.getCell(0, 0).addContent(new Paragraph("Hello"));
+table.getCell(0, 0).addParagraph(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 = doc.createTable({
+    rows: 2,
+    columns: 3,
+    width: 100,
+    widthUnitType: WidthType.AUTO,
+    columnWidths: [1000, 1000, 1000],
+});
+table
+    .getCell(0, 0)
+    .addParagraph(new Paragraph("World"))
+    .setMargains({
+        top: 1000,
+        bottom: 1000,
+        left: 1000,
+        right: 1000,
+    });
 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 = doc.createTable({
+    rows: 2,
+    columns: 4,
+    width: 7000,
+    widthUnitType: WidthType.DXA,
+    margains: {
+        top: 400,
+        bottom: 400,
+        right: 400,
+        left: 400,
+    },
+});
+table.getCell(0, 0).addParagraph(new Paragraph("Foo"));
+table.getCell(0, 1).addParagraph(new Paragraph("v"));
 
-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
+    .getCell(1, 0)
+    .addParagraph(new Paragraph("Bar1"))
+    .setShading({
+        fill: "b79c2f",
+        val: ShadingType.REVERSE_DIAGONAL_STRIPE,
+        color: "auto",
+    });
+table
+    .getCell(1, 1)
+    .addParagraph(new Paragraph("Bar2"))
+    .setShading({
+        fill: "42c5f4",
+        val: ShadingType.PERCENT_95,
+        color: "auto",
+    });
+table
+    .getCell(1, 2)
+    .addParagraph(new Paragraph("Bar3"))
+    .setShading({
+        fill: "880aa8",
+        val: ShadingType.PERCENT_10,
+        color: "e2df0b",
+    });
+table
+    .getCell(1, 3)
+    .addParagraph(new Paragraph("Bar4"))
+    .setShading({
+        fill: "FF0000",
+        val: ShadingType.CLEAR,
+        color: "auto",
+    });
 
 table.getRow(0).mergeCells(0, 3);
 
+doc.createParagraph("hi");
+
+doc.createTable({
+    rows: 2,
+    columns: 2,
+    width: 100,
+    widthUnitType: WidthType.PERCENTAGE,
+});
+
 const packer = new Packer();
 
 packer.toBuffer(doc).then((buffer) => {

demo/demo34.ts

@@ -0,0 +1,29 @@
+// 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, TableAnchorType, WidthType } from "../build";
+
+const doc = new Document();
+
+const table = doc.createTable({
+    rows: 2,
+    columns: 2,
+    float: {
+        horizontalAnchor: TableAnchorType.MARGIN,
+        verticalAnchor: TableAnchorType.MARGIN,
+        relativeHorizontalPosition: RelativeHorizontalPosition.RIGHT,
+        relativeVerticalPosition: RelativeVerticalPosition.BOTTOM,
+    },
+    width: 4535,
+    widthUnitType: WidthType.DXA,
+});
+table.setFixedWidthLayout();
+
+table.getCell(0, 0).addParagraph(new Paragraph("Hello"));
+table.getRow(0).mergeCells(0, 1);
+
+const packer = new Packer();
+
+packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/demo35.ts

@@ -0,0 +1,18 @@
+// 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");
+
+link.bold();
+paragraph.addHyperLink(link);
+doc.addParagraph(paragraph);
+
+const packer = new Packer();
+
+packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/demo36.ts

@@ -0,0 +1,26 @@
+// 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, 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).addParagraph(image.Paragraph);
+
+// doc.createParagraph("Hello World");
+doc.addTable(table);
+
+// doc.Header.createImage(fs.readFileSync("./demo/images/pizza.gif"));
+doc.Header.addTable(table);
+// 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/demo37.ts

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

demo/demo38.ts

@@ -0,0 +1,44 @@
+// 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, Packer, TextWrappingSide, TextWrappingType } from "../build";
+
+const doc = new Document();
+
+doc.createParagraph(
+    "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.",
+);
+
+doc.createParagraph(
+    "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.",
+);
+
+doc.createParagraph(
+    "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.",
+);
+
+doc.createImage(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,
+        },
+    },
+});
+
+const packer = new Packer();
+
+packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/demo39.ts

@@ -0,0 +1,33 @@
+// Example how to display page numbers
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, PageNumberFormat, TextRun } from "../build";
+
+const doc = new Document(
+    {},
+    {
+        pageNumberStart: 1,
+        pageNumberFormatType: PageNumberFormat.DECIMAL,
+    },
+);
+
+doc.Header.createParagraph("Foo Bar corp. ")
+    .addRun(new TextRun("Page Number ").pageNumber())
+    .addRun(new TextRun(" to ").numberOfTotalPages());
+
+doc.Footer.createParagraph("Foo Bar corp. ")
+    .center()
+    .addRun(new TextRun("Page Number: ").pageNumber())
+    .addRun(new TextRun(" to ").numberOfTotalPages());
+
+doc.createParagraph("Hello World 1").pageBreak();
+doc.createParagraph("Hello World 2").pageBreak();
+doc.createParagraph("Hello World 3").pageBreak();
+doc.createParagraph("Hello World 4").pageBreak();
+doc.createParagraph("Hello World 5").pageBreak();
+
+const packer = new Packer();
+
+packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/demo4.ts

@@ -5,8 +5,11 @@ 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 table = doc.createTable({
+    rows: 4,
+    columns: 4,
+});
+table.getCell(2, 2).addParagraph(new Paragraph("Hello"));
 
 const packer = new Packer();
 

demo/demo41.ts

@@ -0,0 +1,51 @@
+// 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 } from "../build";
+
+const doc = new Document();
+
+const table = doc.createTable({
+    rows: 13,
+    columns: 6,
+});
+let row = 0;
+table.getCell(row, 0).addContent(new Paragraph("0,0"));
+table.getCell(row, 1).addContent(new Paragraph("0,1"));
+table.getCell(row, 3).addContent(new Paragraph("0,3"));
+table.getCell(row, 4).addContent(new Paragraph("0,4"));
+table.getRow(row).mergeCells(4, 5);
+table.getRow(row).mergeCells(1, 2);
+row = 1;
+table.getCell(row, 0).addContent(new Paragraph("1,0"));
+table.getCell(row, 2).addContent(new Paragraph("1,2"));
+table.getCell(row, 4).addContent(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).addContent(new Paragraph("2,0"));
+table.getCell(row, 1).addContent(new Paragraph("2,1"));
+table.getCell(row, 2).addContent(new Paragraph("2,2"));
+table.getCell(row, 3).addContent(new Paragraph("2,3"));
+table.getCell(row, 4).addContent(new Paragraph("2,4"));
+table.getRow(row).mergeCells(4, 5);
+table.getRow(row).mergeCells(1, 2);
+row = 3;
+table.getCell(row, 0).addContent(new Paragraph("3,0"));
+table.getCell(row, 1).addContent(new Paragraph("3,1"));
+table.getCell(row, 2).addContent(new Paragraph("3,2"));
+table.getCell(row, 3).addContent(new Paragraph("3,3"));
+table.getCell(row, 4).addContent(new Paragraph("3,4"));
+table.getCell(row, 5).addContent(new Paragraph("3,5"));
+row = 4;
+table.getCell(row, 0).addContent(new Paragraph("4,0"));
+table.getCell(row, 5).addContent(new Paragraph("4,5"));
+table.getRow(row).mergeCells(0, 4);
+
+const packer = new Packer();
+
+packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/demo43.ts

@@ -0,0 +1,20 @@
+// 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 } from "../build";
+
+const doc = new Document();
+
+const table = doc.createTable({
+    rows: 4,
+    columns: 4,
+});
+table.getCell(2, 2).addParagraph(new Paragraph("Hello"));
+table.getColumn(3).mergeCells(1, 2);
+// table.getCell(3, 2).addParagraph(new Paragraph("Hello"));
+
+const packer = new Packer();
+
+packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/demo5.ts

@@ -1,7 +1,8 @@
 // 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, Packer, Paragraph } from "../build";
+import { Document, HorizontalPositionAlign, HorizontalPositionRelativeFrom, Packer, Paragraph, VerticalPositionAlign, VerticalPositionRelativeFrom} from "../build";
 
 const doc = new Document();
 
@@ -13,6 +14,29 @@ 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"));
+doc.createImage(fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
+    floating: {
+        horizontalPosition: {
+            offset: 1014400,
+        },
+        verticalPosition: {
+            offset: 1014400,
+        },
+    },
+});
+
+doc.createImage(fs.readFileSync("./demo/images/cat.jpg"), 200, 200, {
+    floating: {
+        horizontalPosition: {
+            relative: HorizontalPositionRelativeFrom.PAGE,
+            align: HorizontalPositionAlign.RIGHT,
+        },
+        verticalPosition: {
+            relative: VerticalPositionRelativeFrom.PAGE,
+            align: VerticalPositionAlign.BOTTOM,
+        },
+    },
+});
 
 const packer = new Packer();
 

docs/README.md

@@ -29,6 +29,7 @@ import * as docx from "docx";
 ## Basic Usage
 
 ```js
+var fs = require("fs");
 var docx = require("docx");
 
 // Create document
@@ -41,11 +42,12 @@ paragraph.addRun(new docx.TextRun("Lorem Ipsum Foo Bar"));
 doc.addParagraph(paragraph);
 
 // Used to export the file into a .docx file
-var exporter = new docx.LocalPacker(doc);
+var packer = new docx.Packer();
+packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My First 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

@@ -15,8 +15,10 @@
 	* [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,8 +1,18 @@
 # Contribution Guidelines
 
+*   Include documentation reference(s) at the top of each file:
+
+    ```js
+    // http://officeopenxml.com/WPdocument.php
+    ```
+
+*   Follow Prettier standards, and consider using the [Prettier VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) plugin.
+
+*   Follow the `TSLint` rules
+
 ## Always think about the user
 
-The number one pillar for contribution is to **ALWAYS** think about how the user will use the library. 
+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.
 
@@ -25,17 +35,45 @@ demo updated // Getting better, but capitalize the first letter
 Unesesary coment removed // Make sure to use correct spelling
 ```
 
-## Writing Code
+## No leaky components in API interface
 
-*   Include documentation reference(s) at the top of each file:
+> This mainly applies to the API the end user will consume.
 
+Try to make method parameters of the outside API accept primatives, 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:
    ```js
-    // http://officeopenxml.com/WPdocument.php
+   import { ChildComponent } from "./my-feature/sub-component/deeper/.../my-deep.component";
    ```
    
-*   Follow Prettier standards, and consider using the [Prettier VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) plugin.
+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.
 
-*   Follow the `TSLint` rules
+**Do not**
+
+`TableFloatProperties` is a class. The outside world would have to `new` up the object, and inject it in like so:
+
+```js
+    public float(tableFloatProperties: TableFloatProperties): Table
+```
+
+```ts
+    table.float(new TableFloatProperties(...));
+```
+
+**Do**
+
+`ITableFloatOptions` is an interface for a JSON of primatives. The end user would need to pass in a json object and not need to worry about the internals:
+
+```js
+    public float(tableFloatOptions: ITableFloatOptions): Table
+```
+
+```ts
+    table.float({...});
+```
 
 ## Add vs Create
 
@@ -50,7 +88,8 @@ This is just a guideline, and the rules can sometimes be broken.
     }
     ```
 
-*   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) {
@@ -64,7 +103,7 @@ Getters and Setters are done with a capital letter like so:
 
 ```js
 public get Level() {
-
+   ...
 }
 ```
 
@@ -82,6 +121,30 @@ private get _level: string;
 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.
@@ -128,9 +191,9 @@ enum WeaponType = {
 }
 ```
 
-## Spell correctly, full and in American English
+## Spell correctly, in full and in American English
 
-I am not sure where these habit in software development comes from, but I do not believe it is beneficial:
+I am not sure where these habits in software development come from, but I do not believe it is beneficial:
 
 **Do not:**
 ```js

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,7 +106,7 @@ _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_
 
@@ -114,7 +114,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/demo18.ts_
 
 Example showing how to set custom margains
 
-[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/document.md

@@ -5,7 +5,7 @@
 To create a new document, it is very easy:
 
 ```js
-var doc = new docx.Document();
+const doc = new docx.Document();
 ```
 
 ## Document properties
@@ -13,7 +13,7 @@ var doc = new docx.Document();
 You can add properties to the Word document by specifying options, for example:
 
 ```js
-var doc = new docx.Document({
+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

@@ -37,8 +37,12 @@ Also all the supported section properties are implemented according to: http://o
 
     // 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/images.md

@@ -1,156 +1,231 @@
 # Images
 
-## Intro
+To create a `floating` image on top of text:
 
-Adding images is very simple
-
-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
+doc.createImage(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
+doc.createImage(fs.readFileSync("./demo/images/parrots.bmp"));
 ```
 
-### Floating position
+You can also create images manually and add them later:
 
-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
+const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
+doc.addImage(image);
 ```
+
+## Intro
+
+Adding images can be done in two ways:
+
+1. Call the `createImage` method to add the image directly into the `document`:
+
+    ```js
+    doc.createImage([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.addImage(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
+doc.createImage(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
+doc.createImage(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,8 +64,8 @@ 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
 const numbering = new docx.Numbering();
@@ -75,11 +75,11 @@ 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
 topLevelP.setNumbering(concrete, 0);

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/styling-with-js.md

@@ -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

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")
 

docs/usage/table-of-contents.md

@@ -71,6 +71,6 @@ doc.addParagraph(new Paragraph("My Spectacular Style #1").style("MySpectacularSt
 
 ### 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,255 @@
+# 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 use the `createTable()` method on a `document`.
+
+```ts
+const table = doc.createTable([NUMBER OF ROWS], [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.addTable(table);
+```
+
+The snippet below creates a table of 2 rows and 4 columns.
+
+```ts
+const table = doc.createTable(2, 4);
+
+// Or
+
+const table = new Table(2, 4);
+doc.addTable(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
+
+The `createTable()` method created a table with 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 `addParagraph()` method.
+
+```ts
+cell.addParagraph(new Paragraph("Hello"));
+```
+
+## 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.addStartBorder(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.addTable(new Table(1, 1));
+```
+
+## 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

@@ -22,7 +22,7 @@ text.bold();
 ### Italics
 
 ```js
-text.italic();
+text.italics();
 ```
 
 ### Underline
@@ -80,5 +80,5 @@ text.break();
 What if you want to create a paragraph which is **_bold_** and **_italic_**?
 
 ```js
-paragraph.bold().italic();
+paragraph.bold().italics();
 ```

package.json

@@ -1,23 +1,24 @@
 {
   "name": "docx",
-  "version": "4.4.0",
+  "version": "5.0.0-rc1",
   "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",
     "ts-node": "ts-node"
   },
   "pre-commit": [
@@ -47,12 +48,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 +62,29 @@
   "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",
     "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");
 

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");
+        }
     }
 }

src/export/packer/image-replacer.ts

@@ -0,0 +1,17 @@
+import { IMediaData, Media } from "file/media";
+
+export class ImageReplacer {
+    public replace(xmlData: string, mediaData: IMediaData[], offset: number): string {
+        let currentXmlData = xmlData;
+
+        mediaData.forEach((image, i) => {
+            currentXmlData = currentXmlData.replace(`{${image.fileName}}`, (offset + i).toString());
+        });
+
+        return currentXmlData;
+    }
+
+    public getMediaData(xmlData: string, media: Media): IMediaData[] {
+        return media.Array.filter((image) => xmlData.search(`{${image.fileName}}`) > 0);
+    }
+}

src/export/packer/next-compiler.spec.ts

@@ -1,6 +1,8 @@
 /* tslint:disable:typedef space-before-function-paren */
 import { expect } from "chai";
-import { File } from "../../file";
+
+import { File } from "file";
+
 import { Compiler } from "./next-compiler";
 
 describe("Compiler", () => {
@@ -15,7 +17,7 @@ describe("Compiler", () => {
     describe("#compile()", () => {
         it("should pack all the content", async function() {
             this.timeout(99999999);
-            const zipFile = await compiler.compile(file);
+            const zipFile = compiler.compile(file);
             const fileNames = Object.keys(zipFile.files).map((f) => zipFile.files[f].name);
 
             expect(fileNames).is.an.instanceof(Array);
@@ -44,7 +46,7 @@ describe("Compiler", () => {
 
             this.timeout(99999999);
 
-            const zipFile = await compiler.compile(file);
+            const zipFile = compiler.compile(file);
             const fileNames = Object.keys(zipFile.files).map((f) => zipFile.files[f].name);
 
             expect(fileNames).is.an.instanceof(Array);

src/export/packer/next-compiler.ts

@@ -3,39 +3,41 @@ import * as xml from "xml";
 
 import { File } from "file";
 import { Formatter } from "../formatter";
+import { ImageReplacer } from "./image-replacer";
 
 interface IXmlifyedFile {
-    data: string;
-    path: string;
+    readonly data: string;
+    readonly path: string;
 }
 
 interface IXmlifyedFileMapping {
-    Document: IXmlifyedFile;
-    Styles: IXmlifyedFile;
-    Properties: IXmlifyedFile;
-    Numbering: IXmlifyedFile;
-    Relationships: IXmlifyedFile;
-    FileRelationships: IXmlifyedFile;
-    Headers: IXmlifyedFile[];
-    Footers: IXmlifyedFile[];
-    HeaderRelationships: IXmlifyedFile[];
-    FooterRelationships: IXmlifyedFile[];
-    ContentTypes: IXmlifyedFile;
-    AppProperties: IXmlifyedFile;
-    FootNotes: IXmlifyedFile;
-    Settings: IXmlifyedFile;
+    readonly Document: IXmlifyedFile;
+    readonly Styles: IXmlifyedFile;
+    readonly Properties: IXmlifyedFile;
+    readonly Numbering: IXmlifyedFile;
+    readonly Relationships: IXmlifyedFile;
+    readonly FileRelationships: IXmlifyedFile;
+    readonly Headers: IXmlifyedFile[];
+    readonly Footers: IXmlifyedFile[];
+    readonly HeaderRelationships: IXmlifyedFile[];
+    readonly FooterRelationships: IXmlifyedFile[];
+    readonly ContentTypes: IXmlifyedFile;
+    readonly AppProperties: IXmlifyedFile;
+    readonly FootNotes: IXmlifyedFile;
+    readonly Settings: IXmlifyedFile;
 }
 
 export class Compiler {
     private readonly formatter: Formatter;
+    private readonly imageReplacer: ImageReplacer;
 
     constructor() {
         this.formatter = new Formatter();
+        this.imageReplacer = new ImageReplacer();
     }
 
-    public async compile(file: File): Promise<JSZip> {
+    public compile(file: File): JSZip {
         const zip = new JSZip();
-
         const xmlifiedFileMapping = this.xmlifyFile(file);
 
         for (const key in xmlifiedFileMapping) {
@@ -64,9 +66,34 @@ export class Compiler {
 
     private xmlifyFile(file: File): IXmlifyedFileMapping {
         file.verifyUpdateFields();
+        const documentRelationshipCount = file.DocumentRelationships.RelationshipCount + 1;
+
         return {
+            Relationships: {
+                data: (() => {
+                    const xmlData = xml(this.formatter.format(file.Document));
+                    const mediaDatas = this.imageReplacer.getMediaData(xmlData, file.Media);
+
+                    mediaDatas.forEach((mediaData, i) => {
+                        file.DocumentRelationships.createRelationship(
+                            documentRelationshipCount + i,
+                            "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image",
+                            `media/${mediaData.fileName}`,
+                        );
+                    });
+
+                    return xml(this.formatter.format(file.DocumentRelationships));
+                })(),
+                path: "word/_rels/document.xml.rels",
+            },
             Document: {
-                data: xml(this.formatter.format(file.Document), true),
+                data: (() => {
+                    const tempXmlData = xml(this.formatter.format(file.Document), true);
+                    const mediaDatas = this.imageReplacer.getMediaData(tempXmlData, file.Media);
+                    const xmlData = this.imageReplacer.replace(tempXmlData, mediaDatas, documentRelationshipCount);
+
+                    return xmlData;
+                })(),
                 path: "word/document.xml",
             },
             Styles: {
@@ -86,30 +113,66 @@ export class Compiler {
                 data: xml(this.formatter.format(file.Numbering)),
                 path: "word/numbering.xml",
             },
-            Relationships: {
-                data: xml(this.formatter.format(file.DocumentRelationships)),
-                path: "word/_rels/document.xml.rels",
-            },
             FileRelationships: {
                 data: xml(this.formatter.format(file.FileRelationships)),
                 path: "_rels/.rels",
             },
-            Headers: file.Headers.map((headerWrapper, index) => ({
-                data: xml(this.formatter.format(headerWrapper.Header)),
-                path: `word/header${index + 1}.xml`,
-            })),
-            Footers: file.Footers.map((footerWrapper, index) => ({
-                data: xml(this.formatter.format(footerWrapper.Footer)),
-                path: `word/footer${index + 1}.xml`,
-            })),
-            HeaderRelationships: file.Headers.map((headerWrapper, index) => ({
+            HeaderRelationships: file.Headers.map((headerWrapper, index) => {
+                const xmlData = xml(this.formatter.format(headerWrapper.Header));
+                const mediaDatas = this.imageReplacer.getMediaData(xmlData, file.Media);
+
+                mediaDatas.forEach((mediaData, i) => {
+                    headerWrapper.Relationships.createRelationship(
+                        i,
+                        "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image",
+                        `media/${mediaData.fileName}`,
+                    );
+                });
+
+                return {
                     data: xml(this.formatter.format(headerWrapper.Relationships)),
                     path: `word/_rels/header${index + 1}.xml.rels`,
-            })),
-            FooterRelationships: file.Footers.map((footerWrapper, index) => ({
+                };
+            }),
+            FooterRelationships: file.Footers.map((footerWrapper, index) => {
+                const xmlData = xml(this.formatter.format(footerWrapper.Footer));
+                const mediaDatas = this.imageReplacer.getMediaData(xmlData, file.Media);
+
+                mediaDatas.forEach((mediaData, i) => {
+                    footerWrapper.Relationships.createRelationship(
+                        i,
+                        "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image",
+                        `media/${mediaData.fileName}`,
+                    );
+                });
+
+                return {
                     data: xml(this.formatter.format(footerWrapper.Relationships)),
                     path: `word/_rels/footer${index + 1}.xml.rels`,
-            })),
+                };
+            }),
+            Headers: file.Headers.map((headerWrapper, index) => {
+                const tempXmlData = xml(this.formatter.format(headerWrapper.Header));
+                const mediaDatas = this.imageReplacer.getMediaData(tempXmlData, file.Media);
+                // TODO: 0 needs to be changed when headers get relationships of their own
+                const xmlData = this.imageReplacer.replace(tempXmlData, mediaDatas, 0);
+
+                return {
+                    data: xmlData,
+                    path: `word/header${index + 1}.xml`,
+                };
+            }),
+            Footers: file.Footers.map((footerWrapper, index) => {
+                const tempXmlData = xml(this.formatter.format(footerWrapper.Footer));
+                const mediaDatas = this.imageReplacer.getMediaData(tempXmlData, file.Media);
+                // TODO: 0 needs to be changed when headers get relationships of their own
+                const xmlData = this.imageReplacer.replace(tempXmlData, mediaDatas, 0);
+
+                return {
+                    data: xmlData,
+                    path: `word/footer${index + 1}.xml`,
+                };
+            }),
             ContentTypes: {
                 data: xml(this.formatter.format(file.ContentTypes)),
                 path: "[Content_Types].xml",
@@ -128,4 +191,13 @@ export class Compiler {
             },
         };
     }
+
+    /* By default docx collapse empty tags. <a></a> -> <a/>. this function mimic it
+       so comparing (diff) original docx file and the library output is easier
+       Currently not used, so commenting out */
+    // private collapseEmptyTags(xmlData: string): string {
+    //     const regEx = /<(([^ <>]+)[^<>]*)><\/\2>/g;
+    //     const collapsed = xmlData.replace(regEx, "<$1/>");
+    //     return collapsed;
+    // }
 }

src/export/packer/packer.spec.ts

@@ -2,7 +2,8 @@
 import { assert } from "chai";
 import { stub } from "sinon";
 
-import { File, Paragraph } from "../../file";
+import { File, Paragraph } from "file";
+
 import { Packer } from "./packer";
 
 describe("Packer", () => {
@@ -45,4 +46,24 @@ describe("Packer", () => {
             });
         });
     });
+
+    describe("#toBase64String()", () => {
+        it("should create a standard docx file", async function() {
+            this.timeout(99999999);
+            const str = await packer.toBase64String(file);
+
+            assert.isDefined(str);
+            assert.isTrue(str.length > 0);
+        });
+
+        it("should handle exception if it throws any", () => {
+            // tslint:disable-next-line:no-any
+            const compiler = stub((packer as any).compiler, "compile");
+
+            compiler.throwsException();
+            return packer.toBase64String(file).catch((error) => {
+                assert.isDefined(error);
+            });
+        });
+    });
 });

src/export/packer/packer.ts

@@ -9,22 +9,31 @@ export class Packer {
     }
 
     public async toBuffer(file: File): Promise<Buffer> {
-        const zip = await this.compiler.compile(file);
-        const zipData = (await zip.generateAsync({ type: "nodebuffer" })) as Buffer;
+        const zip = this.compiler.compile(file);
+        const zipData = (await zip.generateAsync({
+            type: "nodebuffer",
+            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        })) as Buffer;
 
         return zipData;
     }
 
     public async toBase64String(file: File): Promise<string> {
-        const zip = await this.compiler.compile(file);
-        const zipData = (await zip.generateAsync({ type: "base64" })) as string;
+        const zip = this.compiler.compile(file);
+        const zipData = (await zip.generateAsync({
+            type: "base64",
+            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        })) as string;
 
         return zipData;
     }
 
     public async toBlob(file: File): Promise<Blob> {
-        const zip = await this.compiler.compile(file);
-        const zipData = (await zip.generateAsync({ type: "blob" })) as Blob;
+        const zip = this.compiler.compile(file);
+        const zipData = (await zip.generateAsync({
+            type: "blob",
+            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        })) as Blob;
 
         return zipData;
     }

src/file/app-properties/app-properties-attributes.ts

@@ -1,12 +1,12 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IAppPropertiesAttributes {
-    xmlns: string;
-    vt: string;
+    readonly xmlns: string;
+    readonly vt: string;
 }
 
 export class AppPropertiesAttributes extends XmlAttributeComponent<IAppPropertiesAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         xmlns: "xmlns",
         vt: "xmlns:vt",
     };

src/file/content-types/content-types-attributes.ts

@@ -1,11 +1,11 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IContentTypeAttributes {
-    xmlns?: string;
+    readonly xmlns?: string;
 }
 
 export class ContentTypeAttributes extends XmlAttributeComponent<IContentTypeAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         xmlns: "xmlns",
     };
 }

src/file/content-types/content-types.spec.ts

@@ -1,7 +1,9 @@
 // tslint:disable:no-string-literal
 
 import { expect } from "chai";
-import { Formatter } from "../../export/formatter";
+
+import { Formatter } from "export/formatter";
+
 import { ContentTypes } from "./content-types";
 
 describe("ContentTypes", () => {
@@ -77,6 +79,26 @@ describe("ContentTypes", () => {
                     },
                 ],
             });
+            expect(tree["Types"][13]).to.deep.equal({
+                Override: [
+                    {
+                        _attr: {
+                            ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml",
+                            PartName: "/word/footnotes.xml",
+                        },
+                    },
+                ],
+            });
+            expect(tree["Types"][14]).to.deep.equal({
+                Override: [
+                    {
+                        _attr: {
+                            ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.settings+xml",
+                            PartName: "/word/settings.xml",
+                        },
+                    },
+                ],
+            });
         });
     });
 
@@ -86,7 +108,7 @@ describe("ContentTypes", () => {
             contentTypes.addFooter(102);
             const tree = new Formatter().format(contentTypes);
 
-            expect(tree["Types"][14]).to.deep.equal({
+            expect(tree["Types"][15]).to.deep.equal({
                 Override: [
                     {
                         _attr: {
@@ -97,7 +119,7 @@ describe("ContentTypes", () => {
                 ],
             });
 
-            expect(tree["Types"][15]).to.deep.equal({
+            expect(tree["Types"][16]).to.deep.equal({
                 Override: [
                     {
                         _attr: {
@@ -116,7 +138,7 @@ describe("ContentTypes", () => {
             contentTypes.addHeader(202);
             const tree = new Formatter().format(contentTypes);
 
-            expect(tree["Types"][14]).to.deep.equal({
+            expect(tree["Types"][15]).to.deep.equal({
                 Override: [
                     {
                         _attr: {
@@ -127,7 +149,7 @@ describe("ContentTypes", () => {
                 ],
             });
 
-            expect(tree["Types"][15]).to.deep.equal({
+            expect(tree["Types"][16]).to.deep.equal({
                 Override: [
                     {
                         _attr: {

src/file/content-types/content-types.ts

@@ -30,6 +30,7 @@ export class ContentTypes extends XmlComponent {
         this.root.push(new Override("application/vnd.openxmlformats-officedocument.extended-properties+xml", "/docProps/app.xml"));
         this.root.push(new Override("application/vnd.openxmlformats-officedocument.wordprocessingml.numbering+xml", "/word/numbering.xml"));
         this.root.push(new Override("application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml", "/word/footnotes.xml"));
+        this.root.push(new Override("application/vnd.openxmlformats-officedocument.wordprocessingml.settings+xml", "/word/settings.xml"));
     }
 
     public addFooter(index: number): void {

src/file/content-types/default/default-attributes.ts

@@ -1,12 +1,12 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IDefaultAttributes {
-    contentType: string;
-    extension?: string;
+    readonly contentType: string;
+    readonly extension?: string;
 }
 
 export class DefaultAttributes extends XmlAttributeComponent<IDefaultAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         contentType: "ContentType",
         extension: "Extension",
     };

src/file/content-types/override/override-attributes.ts

@@ -1,12 +1,12 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IOverrideAttributes {
-    contentType: string;
-    partName?: string;
+    readonly contentType: string;
+    readonly partName?: string;
 }
 
 export class OverrideAttributes extends XmlAttributeComponent<IOverrideAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         contentType: "ContentType",
         partName: "PartName",
     };

src/file/core-properties/properties.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from "chai";
 
-import { Formatter } from "../../export/formatter";
+import { Formatter } from "export/formatter";
+
 import { CoreProperties } from "./properties";
 
 describe("Properties", () => {

src/file/core-properties/properties.ts

@@ -3,14 +3,14 @@ import { DocumentAttributes } from "../document/document-attributes";
 import { Created, Creator, Description, Keywords, LastModifiedBy, Modified, Revision, Subject, Title } from "./components";
 
 export interface IPropertiesOptions {
-    title?: string;
-    subject?: string;
-    creator?: string;
-    keywords?: string;
-    description?: string;
-    lastModifiedBy?: string;
-    revision?: string;
-    externalStyles?: string;
+    readonly title?: string;
+    readonly subject?: string;
+    readonly creator?: string;
+    readonly keywords?: string;
+    readonly description?: string;
+    readonly lastModifiedBy?: string;
+    readonly revision?: string;
+    readonly externalStyles?: string;
 }
 
 export class CoreProperties extends XmlComponent {

src/file/document/body/body.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from "chai";
 
-import { Formatter } from "../../../export/formatter";
+import { Formatter } from "export/formatter";
+
 import { Body } from "./body";
 
 describe("Body", () => {
@@ -16,11 +17,11 @@ describe("Body", () => {
             expect(formatted)
                 .to.have.property("w:sectPr")
                 .and.to.be.an.instanceof(Array);
-            expect(formatted["w:sectPr"]).to.have.length(7);
+            expect(formatted["w:sectPr"]).to.have.length(4);
         });
     });
 
-    describe("addSection", () => {
+    describe("#addSection", () => {
         it("should add section with options", () => {
             body.addSection({
                 width: 10000,
@@ -38,5 +39,91 @@ describe("Body", () => {
             const newSection = formatted[1]["w:sectPr"];
             expect(newSection[0]).to.deep.equal({ "w:pgSz": [{ _attr: { "w:h": 10000, "w:w": 10000, "w:orient": "portrait" } }] });
         });
+
+        it("should add section with default parameters", () => {
+            body.addSection({
+                width: 10000,
+                height: 10000,
+            });
+
+            const tree = new Formatter().format(body);
+
+            expect(tree).to.deep.equal({
+                "w:body": [
+                    {
+                        "w:p": [
+                            { "w:pPr": [] },
+                            {
+                                "w:pPr": [
+                                    {
+                                        "w:sectPr": [
+                                            { "w:pgSz": [{ _attr: { "w:w": 11906, "w:h": 16838, "w:orient": "portrait" } }] },
+                                            {
+                                                "w:pgMar": [
+                                                    {
+                                                        _attr: {
+                                                            "w:top": 1440,
+                                                            "w:right": 1440,
+                                                            "w:bottom": 1440,
+                                                            "w:left": 1440,
+                                                            "w:header": 708,
+                                                            "w:footer": 708,
+                                                            "w:gutter": 0,
+                                                            "w:mirrorMargins": false,
+                                                        },
+                                                    },
+                                                ],
+                                            },
+                                            { "w:cols": [{ _attr: { "w:space": 708 } }] },
+                                            { "w:docGrid": [{ _attr: { "w:linePitch": 360 } }] },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        "w:sectPr": [
+                            { "w:pgSz": [{ _attr: { "w:w": 10000, "w:h": 10000, "w:orient": "portrait" } }] },
+                            {
+                                "w:pgMar": [
+                                    {
+                                        _attr: {
+                                            "w:top": 1440,
+                                            "w:right": 1440,
+                                            "w:bottom": 1440,
+                                            "w:left": 1440,
+                                            "w:header": 708,
+                                            "w:footer": 708,
+                                            "w:gutter": 0,
+                                            "w:mirrorMargins": false,
+                                        },
+                                    },
+                                ],
+                            },
+                            { "w:cols": [{ _attr: { "w:space": 708 } }] },
+                            { "w:docGrid": [{ _attr: { "w:linePitch": 360 } }] },
+                        ],
+                    },
+                ],
+            });
+        });
+    });
+
+    describe("#getParagraphs", () => {
+        it("should get no paragraphs", () => {
+            const paragraphs = body.getParagraphs();
+
+            expect(paragraphs).to.be.an.instanceof(Array);
+        });
+    });
+
+    describe("#DefaultSection", () => {
+        it("should get section", () => {
+            const section = body.DefaultSection;
+
+            const tree = new Formatter().format(section);
+            expect(tree["w:sectPr"]).to.be.an.instanceof(Array);
+        });
     });
 });

src/file/document/body/body.ts

@@ -35,11 +35,9 @@ export class Body extends XmlComponent {
             this.sections.push(new SectionProperties(params));
         }
     }
-    public prepForXml(): IXmlableObject {
+    public prepForXml(): IXmlableObject | undefined {
         if (this.sections.length === 1) {
             this.root.push(this.sections[0]);
-        } else if (this.sections.length > 1) {
-            throw new Error("Invalid usage of sections. At the end of the body element there must be ONE section.");
         }
 
         return super.prepForXml();

src/file/document/body/section-properties/columns/columns-attributes.ts

@@ -1,11 +1,11 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IColumnsAttributes {
-    space?: number;
+    readonly space?: number;
 }
 
 export class ColumnsAttributes extends XmlAttributeComponent<IColumnsAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         space: "w:space",
     };
 }

src/file/document/body/section-properties/doc-grid/doc-grid-attributes.ts

@@ -1,11 +1,11 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IDocGridAttributesProperties {
-    linePitch?: number;
+    readonly linePitch?: number;
 }
 
 export class DocGridAttributes extends XmlAttributeComponent<IDocGridAttributesProperties> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         linePitch: "w:linePitch",
     };
 }

src/file/document/body/section-properties/footer-reference/footer-reference-attributes.ts

@@ -7,12 +7,12 @@ export enum FooterReferenceType {
 }
 
 export interface IFooterReferenceAttributes {
-    type: string;
-    id: string;
+    readonly type: string;
+    readonly id: string;
 }
 
 export class FooterReferenceAttributes extends XmlAttributeComponent<IFooterReferenceAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         type: "w:type",
         id: "r:id",
     };

src/file/document/body/section-properties/footer-reference/footer-reference.ts

@@ -2,8 +2,8 @@ import { XmlComponent } from "file/xml-components";
 import { FooterReferenceAttributes, FooterReferenceType } from "./footer-reference-attributes";
 
 export interface IFooterOptions {
-    footerType?: FooterReferenceType;
-    footerId?: number;
+    readonly footerType?: FooterReferenceType;
+    readonly footerId?: number;
 }
 
 export class FooterReference extends XmlComponent {

src/file/document/body/section-properties/header-reference/header-reference-attributes.ts

@@ -7,12 +7,12 @@ export enum HeaderReferenceType {
 }
 
 export interface IHeaderReferenceAttributes {
-    type: string;
-    id: string;
+    readonly type: string;
+    readonly id: string;
 }
 
 export class HeaderReferenceAttributes extends XmlAttributeComponent<IHeaderReferenceAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         type: "w:type",
         id: "r:id",
     };

src/file/document/body/section-properties/header-reference/header-reference.ts

@@ -2,8 +2,8 @@ import { XmlComponent } from "file/xml-components";
 import { HeaderReferenceAttributes, HeaderReferenceType } from "./header-reference-attributes";
 
 export interface IHeaderOptions {
-    headerType?: HeaderReferenceType;
-    headerId?: number;
+    readonly headerType?: HeaderReferenceType;
+    readonly headerId?: number;
 }
 
 export class HeaderReference extends XmlComponent {

src/file/document/body/section-properties/page-border/page-borders.spec.ts

@@ -1,16 +1,15 @@
 import { expect } from "chai";
 
-import { Formatter } from "../../../../../export/formatter";
-import { BorderStyle } from "../../../../styles";
+import { Formatter } from "export/formatter";
+import { BorderStyle } from "file/styles";
+
 import { PageBorderDisplay, PageBorders, PageBorderZOrder } from "./page-borders";
 
 describe("PageBorders", () => {
     describe("#constructor()", () => {
         it("should create empty element when no options are passed", () => {
             const properties = new PageBorders();
-            const tree = new Formatter().format(properties);
-
-            expect(tree).to.equal("");
+            expect(() => new Formatter().format(properties)).to.throw();
         });
 
         it("should create page borders with some configuration", () => {

src/file/document/body/section-properties/page-border/page-borders.ts

@@ -1,6 +1,6 @@
 // http://officeopenxml.com/WPsectionBorders.php
+import { BorderStyle } from "file/styles";
 import { IXmlableObject, XmlAttributeComponent, XmlComponent } from "file/xml-components";
-import { BorderStyle } from "../../../../styles";
 
 export enum PageBorderDisplay {
     ALL_PAGES = "allPages",
@@ -19,28 +19,28 @@ export enum PageBorderZOrder {
 }
 
 export interface IPageBorderAttributes {
-    display?: PageBorderDisplay;
-    offsetFrom?: PageBorderOffsetFrom;
-    zOrder?: PageBorderZOrder;
+    readonly display?: PageBorderDisplay;
+    readonly offsetFrom?: PageBorderOffsetFrom;
+    readonly zOrder?: PageBorderZOrder;
 }
 
 export interface IPageBorderConfiguration {
-    style?: BorderStyle;
-    size?: number;
-    color?: string;
-    space?: number;
+    readonly style?: BorderStyle;
+    readonly size?: number;
+    readonly color?: string;
+    readonly space?: number;
 }
 
 export interface IPageBordersOptions {
-    pageBorders?: IPageBorderAttributes;
-    pageBorderTop?: IPageBorderConfiguration;
-    pageBorderRight?: IPageBorderConfiguration;
-    pageBorderBottom?: IPageBorderConfiguration;
-    pageBorderLeft?: IPageBorderConfiguration;
+    readonly pageBorders?: IPageBorderAttributes;
+    readonly pageBorderTop?: IPageBorderConfiguration;
+    readonly pageBorderRight?: IPageBorderConfiguration;
+    readonly pageBorderBottom?: IPageBorderConfiguration;
+    readonly pageBorderLeft?: IPageBorderConfiguration;
 }
 
 class PageBordeAttributes extends XmlAttributeComponent<IPageBorderConfiguration> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         style: "w:val",
         size: "w:size",
         color: "w:color",
@@ -57,7 +57,7 @@ class PageBorder extends XmlComponent {
 }
 
 class PageBordersAttributes extends XmlAttributeComponent<IPageBorderAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         display: "w:display",
         offsetFrom: "w:offsetFrom",
         zOrder: "w:zOrder",
@@ -98,7 +98,9 @@ export class PageBorders extends XmlComponent {
         }
     }
 
-    public prepForXml(): IXmlableObject {
-        return this.root.length > 0 ? super.prepForXml() : "";
+    public prepForXml(): IXmlableObject | undefined {
+        if (this.root.length > 0) {
+            return super.prepForXml();
+        }
     }
 }

src/file/document/body/section-properties/page-margin/page-margin-attributes.ts

@@ -1,18 +1,18 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IPageMarginAttributes {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-    header?: number;
-    footer?: number;
-    gutter?: number;
-    mirror?: boolean;
+    readonly top?: number;
+    readonly right?: number;
+    readonly bottom?: number;
+    readonly left?: number;
+    readonly header?: number;
+    readonly footer?: number;
+    readonly gutter?: number;
+    readonly mirror?: boolean;
 }
 
 export class PageMarginAttributes extends XmlAttributeComponent<IPageMarginAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         top: "w:top",
         right: "w:right",
         bottom: "w:bottom",

src/file/document/body/section-properties/page-number/page-number.ts

@@ -17,12 +17,12 @@ export enum PageNumberFormat {
 }
 
 export interface IPageNumberTypeAttributes {
-    pageNumberStart?: number;
-    pageNumberFormatType?: PageNumberFormat;
+    readonly pageNumberStart?: number;
+    readonly pageNumberFormatType?: PageNumberFormat;
 }
 
 export class PageNumberTypeAttributes extends XmlAttributeComponent<IPageNumberTypeAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         pageNumberStart: "w:start",
         pageNumberFormatType: "w:fmt",
     };

src/file/document/body/section-properties/page-size/page-size-attributes.ts

@@ -6,13 +6,13 @@ export enum PageOrientation {
 }
 
 export interface IPageSizeAttributes {
-    width?: number;
-    height?: number;
-    orientation?: PageOrientation;
+    readonly width?: number;
+    readonly height?: number;
+    readonly orientation?: PageOrientation;
 }
 
 export class PageSizeAttributes extends XmlAttributeComponent<IPageSizeAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         width: "w:w",
         height: "w:h",
         orientation: "w:orient",

src/file/document/body/section-properties/page-size/page-size.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from "chai";
 
-import { Formatter } from "../../../../../export/formatter";
+import { Formatter } from "export/formatter";
+
 import { PageSize } from "./page-size";
 import { PageOrientation } from "./page-size-attributes";
 

src/file/document/body/section-properties/section-properties.spec.ts

@@ -1,12 +1,19 @@
 import { expect } from "chai";
 
-import { Formatter } from "../../../../export/formatter";
-import { FooterReferenceType, PageBorderOffsetFrom, PageNumberFormat } from "./";
+import { Formatter } from "export/formatter";
+import { FooterWrapper } from "file/footer-wrapper";
+import { HeaderWrapper } from "file/header-wrapper";
+import { Media } from "file/media";
+
+import { PageBorderOffsetFrom } from "./page-border";
+import { PageNumberFormat } from "./page-number";
 import { SectionProperties } from "./section-properties";
 
 describe("SectionProperties", () => {
     describe("#constructor()", () => {
         it("should create section properties with options", () => {
+            const media = new Media();
+
             const properties = new SectionProperties({
                 width: 11906,
                 height: 16838,
@@ -20,9 +27,12 @@ describe("SectionProperties", () => {
                 mirror: false,
                 space: 708,
                 linePitch: 360,
-                headerId: 100,
-                footerId: 200,
-                footerType: FooterReferenceType.EVEN,
+                headers: {
+                    default: new HeaderWrapper(media, 100),
+                },
+                footers: {
+                    even: new FooterWrapper(media, 200),
+                },
                 pageNumberStart: 10,
                 pageNumberFormatType: PageNumberFormat.CARDINAL_TEXT,
             });
@@ -78,9 +88,6 @@ describe("SectionProperties", () => {
             });
             expect(tree["w:sectPr"][2]).to.deep.equal({ "w:cols": [{ _attr: { "w:space": 708 } }] });
             expect(tree["w:sectPr"][3]).to.deep.equal({ "w:docGrid": [{ _attr: { "w:linePitch": 360 } }] });
-            expect(tree["w:sectPr"][4]).to.deep.equal({ "w:headerReference": [{ _attr: { "r:id": "rId0", "w:type": "default" } }] });
-            expect(tree["w:sectPr"][5]).to.deep.equal({ "w:footerReference": [{ _attr: { "r:id": "rId0", "w:type": "default" } }] });
-            expect(tree["w:sectPr"][6]).to.deep.equal({ "w:pgNumType": [{ _attr: { "w:fmt": "decimal" } }] });
         });
 
         it("should create section properties with changed options", () => {
@@ -170,9 +177,30 @@ describe("SectionProperties", () => {
             });
             const tree = new Formatter().format(properties);
             expect(Object.keys(tree)).to.deep.equal(["w:sectPr"]);
-            expect(tree["w:sectPr"][7]).to.deep.equal({
+            const pgBorders = tree["w:sectPr"].find((item) => item["w:pgBorders"] !== undefined);
+            expect(pgBorders).to.deep.equal({
                 "w:pgBorders": [{ _attr: { "w:offsetFrom": "page" } }],
             });
         });
+
+        it("should create section properties with page number type, but without start attribute", () => {
+            const properties = new SectionProperties({
+                pageNumberFormatType: PageNumberFormat.UPPER_ROMAN,
+            });
+            const tree = new Formatter().format(properties);
+            expect(Object.keys(tree)).to.deep.equal(["w:sectPr"]);
+            const pgNumType = tree["w:sectPr"].find((item) => item["w:pgNumType"] !== undefined);
+            expect(pgNumType).to.deep.equal({
+                "w:pgNumType": [{ _attr: { "w:fmt": "upperRoman" } }],
+            });
+        });
+
+        it("should create section properties without page number type", () => {
+            const properties = new SectionProperties({});
+            const tree = new Formatter().format(properties);
+            expect(Object.keys(tree)).to.deep.equal(["w:sectPr"]);
+            const pgNumType = tree["w:sectPr"].find((item) => item["w:pgNumType"] !== undefined);
+            expect(pgNumType).to.equal(undefined);
+        });
     });
 });

src/file/document/body/section-properties/section-properties.ts

@@ -1,115 +1,174 @@
 // http://officeopenxml.com/WPsection.php
+import { FooterWrapper } from "file/footer-wrapper";
+import { HeaderWrapper } from "file/header-wrapper";
 import { XmlComponent } from "file/xml-components";
-import { FooterReferenceType, IPageBordersOptions, IPageNumberTypeAttributes, PageBorders, PageNumberFormat, PageNumberType } from "./";
+
 import { Columns } from "./columns/columns";
 import { IColumnsAttributes } from "./columns/columns-attributes";
 import { DocumentGrid } from "./doc-grid/doc-grid";
 import { IDocGridAttributesProperties } from "./doc-grid/doc-grid-attributes";
-import { FooterReference, IFooterOptions } from "./footer-reference/footer-reference";
-import { HeaderReference, IHeaderOptions } from "./header-reference/header-reference";
-import { HeaderReferenceType } from "./header-reference/header-reference-attributes";
+import { FooterReferenceType } from "./footer-reference";
+import { FooterReference } from "./footer-reference/footer-reference";
+import { HeaderReferenceType } from "./header-reference";
+import { HeaderReference } from "./header-reference/header-reference";
+import { IPageBordersOptions, PageBorders } from "./page-border";
 import { PageMargin } from "./page-margin/page-margin";
 import { IPageMarginAttributes } from "./page-margin/page-margin-attributes";
+import { IPageNumberTypeAttributes, PageNumberType } from "./page-number";
 import { PageSize } from "./page-size/page-size";
 import { IPageSizeAttributes, PageOrientation } from "./page-size/page-size-attributes";
+import { TitlePage } from "./title-page/title-page";
+
+export interface IHeaderFooterGroup<T> {
+    readonly default?: T;
+    readonly first?: T;
+    readonly even?: T;
+}
+
+interface IHeadersOptions {
+    readonly headers?: IHeaderFooterGroup<HeaderWrapper>;
+}
+
+interface IFootersOptions {
+    readonly footers?: IHeaderFooterGroup<FooterWrapper>;
+}
+
+interface ITitlePageOptions {
+    readonly titlePage?: boolean;
+}
 
 export type SectionPropertiesOptions = IPageSizeAttributes &
     IPageMarginAttributes &
     IColumnsAttributes &
     IDocGridAttributesProperties &
-    IHeaderOptions &
-    IFooterOptions &
+    IHeadersOptions &
+    IFootersOptions &
     IPageNumberTypeAttributes &
-    IPageBordersOptions;
+    IPageBordersOptions &
+    ITitlePageOptions;
 
 export class SectionProperties extends XmlComponent {
     private readonly options: SectionPropertiesOptions;
 
-    constructor(options?: SectionPropertiesOptions) {
+    constructor(options: SectionPropertiesOptions = {}) {
         super("w:sectPr");
 
-        const defaultOptions = {
-            width: 11906,
-            height: 16838,
-            top: 1440,
-            right: 1440,
-            bottom: 1440,
-            left: 1440,
-            header: 708,
-            footer: 708,
-            gutter: 0,
-            mirror: false,
-            space: 708,
-            linePitch: 360,
-            orientation: PageOrientation.PORTRAIT,
-            headerType: HeaderReferenceType.DEFAULT,
-            headerId: 0,
-            footerType: FooterReferenceType.DEFAULT,
-            footerId: 0,
-            pageNumberStart: undefined,
-            pageNumberFormatType: PageNumberFormat.DECIMAL,
-            pageBorders: undefined,
-            pageBorderTop: undefined,
-            pageBorderRight: undefined,
-            pageBorderBottom: undefined,
-            pageBorderLeft: undefined,
-        };
+        const {
+            width = 11906,
+            height = 16838,
+            top = 1440,
+            right = 1440,
+            bottom = 1440,
+            left = 1440,
+            header = 708,
+            footer = 708,
+            gutter = 0,
+            mirror = false,
+            space = 708,
+            linePitch = 360,
+            orientation = PageOrientation.PORTRAIT,
+            headers,
+            footers,
+            pageNumberFormatType,
+            pageNumberStart,
+            pageBorders,
+            pageBorderTop,
+            pageBorderRight,
+            pageBorderBottom,
+            pageBorderLeft,
+            titlePage = false,
+        } = options;
 
-        const mergedOptions = {
-            ...defaultOptions,
-            ...options,
-        };
+        this.options = options;
+        this.root.push(new PageSize(width, height, orientation));
+        this.root.push(new PageMargin(top, right, bottom, left, header, footer, gutter, mirror));
+        this.root.push(new Columns(space));
+        this.root.push(new DocumentGrid(linePitch));
 
-        this.root.push(new PageSize(mergedOptions.width, mergedOptions.height, mergedOptions.orientation));
-        this.root.push(
-            new PageMargin(
-                mergedOptions.top,
-                mergedOptions.right,
-                mergedOptions.bottom,
-                mergedOptions.left,
-                mergedOptions.header,
-                mergedOptions.footer,
-                mergedOptions.gutter,
-                mergedOptions.mirror,
-            ),
-        );
-        this.root.push(new Columns(mergedOptions.space));
-        this.root.push(new DocumentGrid(mergedOptions.linePitch));
+        this.addHeaders(headers);
+        this.addFooters(footers);
 
-        this.root.push(
-            new HeaderReference({
-                headerType: mergedOptions.headerType,
-                headerId: mergedOptions.headerId,
-            }),
-        );
-        this.root.push(
-            new FooterReference({
-                footerType: mergedOptions.footerType,
-                footerId: mergedOptions.footerId,
-            }),
-        );
+        if (pageNumberStart || pageNumberFormatType) {
+            this.root.push(new PageNumberType(pageNumberStart, pageNumberFormatType));
+        }
 
-        this.root.push(new PageNumberType(mergedOptions.pageNumberStart, mergedOptions.pageNumberFormatType));
-
-        if (
-            mergedOptions.pageBorders ||
-            mergedOptions.pageBorderTop ||
-            mergedOptions.pageBorderRight ||
-            mergedOptions.pageBorderBottom ||
-            mergedOptions.pageBorderLeft
-        ) {
+        if (pageBorders || pageBorderTop || pageBorderRight || pageBorderBottom || pageBorderLeft) {
             this.root.push(
                 new PageBorders({
-                    pageBorders: mergedOptions.pageBorders,
-                    pageBorderTop: mergedOptions.pageBorderTop,
-                    pageBorderRight: mergedOptions.pageBorderRight,
-                    pageBorderBottom: mergedOptions.pageBorderBottom,
-                    pageBorderLeft: mergedOptions.pageBorderLeft,
+                    pageBorders: pageBorders,
+                    pageBorderTop: pageBorderTop,
+                    pageBorderRight: pageBorderRight,
+                    pageBorderBottom: pageBorderBottom,
+                    pageBorderLeft: pageBorderLeft,
                 }),
             );
         }
 
-        this.options = mergedOptions;
+        if (titlePage) {
+            this.root.push(new TitlePage());
+        }
+    }
+
+    private addHeaders(headers?: IHeaderFooterGroup<HeaderWrapper>): void {
+        if (headers) {
+            if (headers.default) {
+                this.root.push(
+                    new HeaderReference({
+                        headerType: HeaderReferenceType.DEFAULT,
+                        headerId: headers.default.Header.ReferenceId,
+                    }),
+                );
+            }
+
+            if (headers.first) {
+                this.root.push(
+                    new HeaderReference({
+                        headerType: HeaderReferenceType.FIRST,
+                        headerId: headers.first.Header.ReferenceId,
+                    }),
+                );
+            }
+
+            if (headers.even) {
+                this.root.push(
+                    new HeaderReference({
+                        headerType: HeaderReferenceType.EVEN,
+                        headerId: headers.even.Header.ReferenceId,
+                    }),
+                );
+            }
+        }
+    }
+
+    private addFooters(footers?: IHeaderFooterGroup<FooterWrapper>): void {
+        if (footers) {
+            if (footers.default) {
+                this.root.push(
+                    new FooterReference({
+                        footerType: FooterReferenceType.DEFAULT,
+                        footerId: footers.default.Footer.ReferenceId,
+                    }),
+                );
+            }
+
+            if (footers.first) {
+                this.root.push(
+                    new FooterReference({
+                        footerType: FooterReferenceType.FIRST,
+                        footerId: footers.first.Footer.ReferenceId,
+                    }),
+                );
+            }
+
+            if (footers.even) {
+                this.root.push(
+                    new FooterReference({
+                        footerType: FooterReferenceType.EVEN,
+                        footerId: footers.even.Footer.ReferenceId,
+                    }),
+                );
+            }
+        }
     }
 
     public get Options(): SectionPropertiesOptions {

src/file/document/body/section-properties/title-page/title-page-attributes.ts

@@ -1,11 +1,11 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IHeaderReferenceAttributes {
-    value: string;
+    readonly value: string;
 }
 
 export class TitlePageAttributes extends XmlAttributeComponent<IHeaderReferenceAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         value: "w:val",
     };
 }

src/file/document/body/section-properties/title-page/title-page.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from "chai";
 
-import { Formatter } from "../../../../../export/formatter";
+import { Formatter } from "export/formatter";
+
 import { TitlePage } from "./title-page";
 
 describe("PageSize", () => {

src/file/document/document-attributes.ts

@@ -1,33 +1,33 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IDocumentAttributesProperties {
-    wpc?: string;
-    mc?: string;
-    o?: string;
-    r?: string;
-    m?: string;
-    v?: string;
-    wp14?: string;
-    wp?: string;
-    w10?: string;
-    w?: string;
-    w14?: string;
-    w15?: string;
-    wpg?: string;
-    wpi?: string;
-    wne?: string;
-    wps?: string;
-    Ignorable?: string;
-    cp?: string;
-    dc?: string;
-    dcterms?: string;
-    dcmitype?: string;
-    xsi?: string;
-    type?: string;
+    readonly wpc?: string;
+    readonly mc?: string;
+    readonly o?: string;
+    readonly r?: string;
+    readonly m?: string;
+    readonly v?: string;
+    readonly wp14?: string;
+    readonly wp?: string;
+    readonly w10?: string;
+    readonly w?: string;
+    readonly w14?: string;
+    readonly w15?: string;
+    readonly wpg?: string;
+    readonly wpi?: string;
+    readonly wne?: string;
+    readonly wps?: string;
+    readonly Ignorable?: string;
+    readonly cp?: string;
+    readonly dc?: string;
+    readonly dcterms?: string;
+    readonly dcmitype?: string;
+    readonly xsi?: string;
+    readonly type?: string;
 }
 
 export class DocumentAttributes extends XmlAttributeComponent<IDocumentAttributesProperties> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         wpc: "xmlns:wpc",
         mc: "xmlns:mc",
         o: "xmlns:o",

src/file/document/document.spec.ts

@@ -1,6 +1,7 @@
 import { assert, expect } from "chai";
 
-import { Formatter } from "../../export/formatter";
+import { Formatter } from "export/formatter";
+
 import { Paragraph } from "../paragraph";
 import { Table } from "../table";
 import { Document } from "./document";
@@ -58,7 +59,10 @@ describe("Document", () => {
 
     describe("#createTable", () => {
         it("should create a new table and append it to body", () => {
-            const table = document.createTable(2, 3);
+            const table = document.createTable({
+                rows: 2,
+                columns: 3,
+            });
             expect(table).to.be.an.instanceof(Table);
             const body = new Formatter().format(document)["w:document"][1]["w:body"];
             expect(body)
@@ -68,7 +72,10 @@ describe("Document", () => {
         });
 
         it("should create a table with the correct dimensions", () => {
-            document.createTable(2, 3);
+            document.createTable({
+                rows: 2,
+                columns: 3,
+            });
             const body = new Formatter().format(document)["w:document"][1]["w:body"];
             expect(body)
                 .to.be.an("array")
@@ -77,9 +84,9 @@ describe("Document", () => {
                 .to.have.property("w:tbl")
                 .which.includes({
                     "w:tblGrid": [
-                        { "w:gridCol": [{ _attr: { "w:w": 1 } }] },
-                        { "w:gridCol": [{ _attr: { "w:w": 1 } }] },
-                        { "w:gridCol": [{ _attr: { "w:w": 1 } }] },
+                        { "w:gridCol": [{ _attr: { "w:w": 100 } }] },
+                        { "w:gridCol": [{ _attr: { "w:w": 100 } }] },
+                        { "w:gridCol": [{ _attr: { "w:w": 100 } }] },
                     ],
                 });
             expect(body[0]["w:tbl"].filter((x) => x["w:tr"])).to.have.length(2);

src/file/document/document.ts

@@ -1,7 +1,7 @@
 // http://officeopenxml.com/WPdocument.php
 import { XmlComponent } from "file/xml-components";
 import { Paragraph } from "../paragraph";
-import { Table } from "../table";
+import { ITableOptions, Table } from "../table";
 import { TableOfContents } from "../table-of-contents";
 import { Body } from "./body";
 import { SectionPropertiesOptions } from "./body/section-properties";
@@ -53,12 +53,13 @@ export class Document extends XmlComponent {
         return para;
     }
 
-    public addTable(table: Table): void {
+    public addTable(table: Table): Document {
         this.body.push(table);
+        return this;
     }
 
-    public createTable(rows: number, cols: number): Table {
-        const table = new Table(rows, cols);
+    public createTable(options: ITableOptions): Table {
+        const table = new Table(options);
         this.addTable(table);
         return table;
     }

src/file/drawing/anchor/anchor-attributes.ts

@@ -2,16 +2,16 @@ import { XmlAttributeComponent } from "file/xml-components";
 import { IDistance } from "../drawing";
 
 export interface IAnchorAttributes extends IDistance {
-    allowOverlap?: "0" | "1";
-    behindDoc?: "0" | "1";
-    layoutInCell?: "0" | "1";
-    locked?: "0" | "1";
-    relativeHeight?: number;
-    simplePos?: "0" | "1";
+    readonly allowOverlap?: "0" | "1";
+    readonly behindDoc?: "0" | "1";
+    readonly layoutInCell?: "0" | "1";
+    readonly locked?: "0" | "1";
+    readonly relativeHeight?: number;
+    readonly simplePos?: "0" | "1";
 }
 
 export class AnchorAttributes extends XmlAttributeComponent<IAnchorAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         distT: "distT",
         distB: "distB",
         distL: "distL",

src/file/drawing/anchor/anchor.spec.ts

@@ -1,12 +1,27 @@
 import { assert } from "chai";
 
-import { Utility } from "../../../tests/utility";
-import { IDrawingOptions, TextWrapStyle } from ".././";
-import { Anchor } from "./";
+import { Utility } from "tests/utility";
 
-function createDrawing(drawingOptions: IDrawingOptions): Anchor {
+import { IDrawingOptions } from "../drawing";
+import { TextWrappingType } from "../text-wrap";
+import { Anchor } from "./anchor";
+
+function createAnchor(drawingOptions: IDrawingOptions): Anchor {
     return new Anchor(
-        1,
+        {
+            fileName: "test.png",
+            stream: new Buffer(""),
+            dimensions: {
+                pixels: {
+                    x: 0,
+                    y: 0,
+                },
+                emus: {
+                    x: 0,
+                    y: 0,
+                },
+            },
+        },
         {
             pixels: {
                 x: 100,
@@ -26,14 +41,32 @@ describe("Anchor", () => {
 
     describe("#constructor()", () => {
         it("should create a Drawing with correct root key", () => {
-            anchor = createDrawing({});
+            anchor = createAnchor({
+                floating: {
+                    verticalPosition: {
+                        offset: 0,
+                    },
+                    horizontalPosition: {
+                        offset: 0,
+                    },
+                },
+            });
             const newJson = Utility.jsonify(anchor);
             assert.equal(newJson.rootKey, "wp:anchor");
             assert.equal(newJson.root.length, 10);
         });
 
         it("should create a Drawing with all default options", () => {
-            anchor = createDrawing({});
+            anchor = createAnchor({
+                floating: {
+                    verticalPosition: {
+                        offset: 0,
+                    },
+                    horizontalPosition: {
+                        offset: 0,
+                    },
+                },
+            });
             const newJson = Utility.jsonify(anchor);
             assert.equal(newJson.root.length, 10);
 
@@ -58,7 +91,7 @@ describe("Anchor", () => {
             const horizontalPosition = newJson.root[2];
             assert.equal(horizontalPosition.rootKey, "wp:positionH");
             assert.include(horizontalPosition.root[0].root, {
-                relativeFrom: "column",
+                relativeFrom: "page",
             });
             assert.equal(horizontalPosition.root[1].rootKey, "wp:posOffset");
             assert.include(horizontalPosition.root[1].root[0], 0);
@@ -67,7 +100,7 @@ describe("Anchor", () => {
             const verticalPosition = newJson.root[3];
             assert.equal(verticalPosition.rootKey, "wp:positionV");
             assert.include(verticalPosition.root[0].root, {
-                relativeFrom: "paragraph",
+                relativeFrom: "page",
             });
             assert.equal(verticalPosition.root[1].rootKey, "wp:posOffset");
             assert.include(verticalPosition.root[1].root[0], 0);
@@ -101,10 +134,18 @@ describe("Anchor", () => {
             assert.equal(graphic.rootKey, "a:graphic");
         });
 
-        it("should create a Drawing with text wrapping", () => {
-            anchor = createDrawing({
-                textWrapping: {
-                    textWrapStyle: TextWrapStyle.SQUARE,
+        it("should create a Drawing with square text wrapping", () => {
+            anchor = createAnchor({
+                floating: {
+                    verticalPosition: {
+                        offset: 0,
+                    },
+                    horizontalPosition: {
+                        offset: 0,
+                    },
+                    wrap: {
+                        type: TextWrappingType.SQUARE,
+                    },
                 },
             });
             const newJson = Utility.jsonify(anchor);
@@ -114,5 +155,68 @@ describe("Anchor", () => {
             const textWrap = newJson.root[6];
             assert.equal(textWrap.rootKey, "wp:wrapSquare");
         });
+
+        it("should create a Drawing with no text wrapping", () => {
+            anchor = createAnchor({
+                floating: {
+                    verticalPosition: {
+                        offset: 0,
+                    },
+                    horizontalPosition: {
+                        offset: 0,
+                    },
+                    wrap: {
+                        type: TextWrappingType.NONE,
+                    },
+                },
+            });
+            const newJson = Utility.jsonify(anchor);
+            assert.equal(newJson.root.length, 10);
+
+            const textWrap = newJson.root[6];
+            assert.equal(textWrap.rootKey, "wp:wrapNone");
+        });
+
+        it("should create a Drawing with tight text wrapping", () => {
+            anchor = createAnchor({
+                floating: {
+                    horizontalPosition: {
+                        offset: 0,
+                    },
+                    verticalPosition: {
+                        offset: 0,
+                    },
+                    wrap: {
+                        type: TextWrappingType.TIGHT,
+                    },
+                },
+            });
+            const newJson = Utility.jsonify(anchor);
+            assert.equal(newJson.root.length, 10);
+
+            const textWrap = newJson.root[6];
+            assert.equal(textWrap.rootKey, "wp:wrapTight");
+        });
+
+        it("should create a Drawing with tight text wrapping", () => {
+            anchor = createAnchor({
+                floating: {
+                    verticalPosition: {
+                        offset: 0,
+                    },
+                    horizontalPosition: {
+                        offset: 0,
+                    },
+                    wrap: {
+                        type: TextWrappingType.TOP_AND_BOTTOM,
+                    },
+                },
+            });
+            const newJson = Utility.jsonify(anchor);
+            assert.equal(newJson.root.length, 10);
+
+            const textWrap = newJson.root[6];
+            assert.equal(textWrap.rootKey, "wp:wrapTopAndBottom");
+        });
     });
 });

src/file/drawing/anchor/anchor.ts

@@ -1,17 +1,10 @@
 // http://officeopenxml.com/drwPicFloating.php
-import { IMediaDataDimensions } from "file/media";
+import { IMediaData, IMediaDataDimensions } from "file/media";
 import { XmlComponent } from "file/xml-components";
 import { IDrawingOptions } from "../drawing";
-import {
-    HorizontalPosition,
-    HorizontalPositionRelativeFrom,
-    IFloating,
-    SimplePos,
-    VerticalPosition,
-    VerticalPositionRelativeFrom,
-} from "../floating";
+import { HorizontalPosition, IFloating, SimplePos, VerticalPosition } from "../floating";
 import { Graphic } from "../inline/graphic";
-import { TextWrapStyle, WrapNone, WrapSquare, WrapTight, WrapTopAndBottom } from "../text-wrap";
+import { TextWrappingType, WrapNone, WrapSquare, WrapTight, WrapTopAndBottom } from "../text-wrap";
 import { DocProperties } from "./../doc-properties/doc-properties";
 import { EffectExtent } from "./../effect-extent/effect-extent";
 import { Extent } from "./../extent/extent";
@@ -23,30 +16,31 @@ const defaultOptions: IFloating = {
     behindDocument: false,
     lockAnchor: false,
     layoutInCell: true,
-    verticalPosition: {
-        relative: VerticalPositionRelativeFrom.PARAGRAPH,
-        offset: 0,
-    },
-    horizontalPosition: {
-        relative: HorizontalPositionRelativeFrom.COLUMN,
-        offset: 0,
-    },
+    verticalPosition: {},
+    horizontalPosition: {},
 };
 
 export class Anchor extends XmlComponent {
-    constructor(referenceId: number, dimensions: IMediaDataDimensions, drawingOptions: IDrawingOptions) {
+    constructor(mediaData: IMediaData, dimensions: IMediaDataDimensions, drawingOptions: IDrawingOptions) {
         super("wp:anchor");
 
         const floating = {
+            margins: {
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+            },
             ...defaultOptions,
             ...drawingOptions.floating,
         };
+
         this.root.push(
             new AnchorAttributes({
-                distT: 0,
-                distB: 0,
-                distL: 0,
-                distR: 0,
+                distT: floating.margins.top || 0,
+                distB: floating.margins.bottom || 0,
+                distL: floating.margins.left || 0,
+                distR: floating.margins.right || 0,
                 simplePos: "0", // note: word doesn't fully support - so we use 0
                 allowOverlap: floating.allowOverlap === true ? "1" : "0",
                 behindDoc: floating.behindDocument === true ? "1" : "0",
@@ -62,18 +56,18 @@ export class Anchor extends XmlComponent {
         this.root.push(new Extent(dimensions.emus.x, dimensions.emus.y));
         this.root.push(new EffectExtent());
 
-        if (drawingOptions.textWrapping !== undefined) {
-            switch (drawingOptions.textWrapping.textWrapStyle) {
-                case TextWrapStyle.SQUARE:
-                    this.root.push(new WrapSquare(drawingOptions.textWrapping));
+        if (drawingOptions.floating !== undefined && drawingOptions.floating.wrap !== undefined) {
+            switch (drawingOptions.floating.wrap.type) {
+                case TextWrappingType.SQUARE:
+                    this.root.push(new WrapSquare(drawingOptions.floating.wrap, drawingOptions.floating.margins));
                     break;
-                case TextWrapStyle.TIGHT:
-                    this.root.push(new WrapTight(drawingOptions.textWrapping.distanceFromText));
+                case TextWrappingType.TIGHT:
+                    this.root.push(new WrapTight(drawingOptions.floating.margins));
                     break;
-                case TextWrapStyle.TOP_AND_BOTTOM:
-                    this.root.push(new WrapTopAndBottom(drawingOptions.textWrapping.distanceFromText));
+                case TextWrappingType.TOP_AND_BOTTOM:
+                    this.root.push(new WrapTopAndBottom(drawingOptions.floating.margins));
                     break;
-                case TextWrapStyle.NONE:
+                case TextWrappingType.NONE:
                 default:
                     this.root.push(new WrapNone());
             }
@@ -83,6 +77,6 @@ export class Anchor extends XmlComponent {
 
         this.root.push(new DocProperties());
         this.root.push(new GraphicFrameProperties());
-        this.root.push(new Graphic(referenceId, dimensions.emus.x, dimensions.emus.y));
+        this.root.push(new Graphic(mediaData, dimensions.emus.x, dimensions.emus.y));
     }
 }

src/file/drawing/doc-properties/doc-properties-attributes.ts

@@ -1,13 +1,13 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IDocPropertiesAttributes {
-    id?: number;
-    name?: string;
-    descr?: string;
+    readonly id?: number;
+    readonly name?: string;
+    readonly descr?: string;
 }
 
 export class DocPropertiesAttributes extends XmlAttributeComponent<IDocPropertiesAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         id: "id",
         name: "name",
         descr: "descr",

src/file/drawing/drawing.spec.ts

@@ -1,7 +1,8 @@
 import { assert } from "chai";
 
-import { Utility } from "../../tests/utility";
-import { Drawing, IDrawingOptions, PlacementPosition } from "./";
+import { Utility } from "tests/utility";
+
+import { Drawing, IDrawingOptions } from "./drawing";
 
 const imageBase64Data = `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`;
 
@@ -10,7 +11,6 @@ function createDrawing(drawingOptions?: IDrawingOptions): Drawing {
     return new Drawing(
         {
             fileName: "test.jpg",
-            referenceId: 1,
             stream: Buffer.from(imageBase64Data, "base64"),
             path: path,
             dimensions: {
@@ -46,7 +46,14 @@ describe("Drawing", () => {
 
         it("should create a drawing with anchor element when there options are passed", () => {
             currentBreak = createDrawing({
-                position: PlacementPosition.FLOATING,
+                floating: {
+                    horizontalPosition: {
+                        offset: 0,
+                    },
+                    verticalPosition: {
+                        offset: 0,
+                    },
+                },
             });
             const newJson = Utility.jsonify(currentBreak);
             assert.equal(newJson.root[0].rootKey, "wp:anchor");

src/file/drawing/drawing.ts

@@ -3,50 +3,29 @@ import { XmlComponent } from "file/xml-components";
 import { Anchor } from "./anchor";
 import { IFloating } from "./floating";
 import { Inline } from "./inline";
-import { ITextWrapping } from "./text-wrap";
-
-export enum PlacementPosition {
-    INLINE,
-    FLOATING,
-}
 
 export interface IDistance {
-    distT?: number;
-    distB?: number;
-    distL?: number;
-    distR?: number;
+    readonly distT?: number;
+    readonly distB?: number;
+    readonly distL?: number;
+    readonly distR?: number;
 }
 
 export interface IDrawingOptions {
-    position?: PlacementPosition;
-    textWrapping?: ITextWrapping;
-    floating?: IFloating;
+    readonly floating?: IFloating;
 }
 
-const defaultDrawingOptions: IDrawingOptions = {
-    position: PlacementPosition.INLINE,
-};
-
 export class Drawing extends XmlComponent {
     private readonly inline: Inline;
 
-    constructor(imageData: IMediaData, drawingOptions?: IDrawingOptions) {
+    constructor(imageData: IMediaData, drawingOptions: IDrawingOptions = {}) {
         super("w:drawing");
 
-        if (imageData === undefined) {
-            throw new Error("imageData cannot be undefined");
-        }
-
-        const mergedOptions = {
-            ...defaultDrawingOptions,
-            ...drawingOptions,
-        };
-
-        if (mergedOptions.position === PlacementPosition.INLINE) {
-            this.inline = new Inline(imageData.referenceId, imageData.dimensions);
+        if (!drawingOptions.floating) {
+            this.inline = new Inline(imageData, imageData.dimensions);
             this.root.push(this.inline);
-        } else if (mergedOptions.position === PlacementPosition.FLOATING) {
-            this.root.push(new Anchor(imageData.referenceId, imageData.dimensions, mergedOptions));
+        } else {
+            this.root.push(new Anchor(imageData, imageData.dimensions, drawingOptions));
         }
     }
 

src/file/drawing/effect-extent/effect-extent-attributes.ts

@@ -1,14 +1,14 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IEffectExtentAttributes {
-    b?: number;
-    l?: number;
-    r?: number;
-    t?: number;
+    readonly b?: number;
+    readonly l?: number;
+    readonly r?: number;
+    readonly t?: number;
 }
 
 export class EffectExtentAttributes extends XmlAttributeComponent<IEffectExtentAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         b: "b",
         l: "l",
         r: "r",

src/file/drawing/extent/extent-attributes.ts

@@ -1,12 +1,12 @@
 import { XmlAttributeComponent } from "file/xml-components";
 
 export interface IExtentAttributes {
-    cx?: number;
-    cy?: number;
+    readonly cx?: number;
+    readonly cy?: number;
 }
 
 export class ExtentAttributes extends XmlAttributeComponent<IExtentAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         cx: "cx",
         cy: "cy",
     };

src/file/drawing/extent/extent.ts

@@ -1,4 +1,5 @@
 import { XmlComponent } from "file/xml-components";
+
 import { ExtentAttributes } from "./extent-attributes";
 
 export class Extent extends XmlComponent {

src/file/drawing/floating/align.spec.ts

@@ -1,8 +1,9 @@
 import { assert } from "chai";
 
-import { VerticalPositionAlign } from ".";
-import { Utility } from "../../../tests/utility";
+import { Utility } from "tests/utility";
+
 import { Align } from "./align";
+import { VerticalPositionAlign } from "./floating-position";
 
 describe("Align", () => {
     describe("#constructor()", () => {

src/file/drawing/floating/floating-position.ts

@@ -1,4 +1,5 @@
 // http://officeopenxml.com/drwPicFloating-position.php
+import { ITextWrapping } from "../text-wrap";
 
 export enum HorizontalPositionRelativeFrom {
     CHARACTER = "character",
@@ -39,22 +40,31 @@ export enum VerticalPositionAlign {
 }
 
 export interface IHorizontalPositionOptions {
-    relative: HorizontalPositionRelativeFrom;
-    align?: HorizontalPositionAlign;
-    offset?: number;
+    readonly relative?: HorizontalPositionRelativeFrom;
+    readonly align?: HorizontalPositionAlign;
+    readonly offset?: number;
 }
 
 export interface IVerticalPositionOptions {
-    relative: VerticalPositionRelativeFrom;
-    align?: VerticalPositionAlign;
-    offset?: number;
+    readonly relative?: VerticalPositionRelativeFrom;
+    readonly align?: VerticalPositionAlign;
+    readonly offset?: number;
+}
+
+export interface IMargins {
+    readonly left?: number;
+    readonly bottom?: number;
+    readonly top?: number;
+    readonly right?: number;
 }
 
 export interface IFloating {
-    horizontalPosition: IHorizontalPositionOptions;
-    verticalPosition: IVerticalPositionOptions;
-    allowOverlap?: boolean;
-    lockAnchor?: boolean;
-    behindDocument?: boolean;
-    layoutInCell?: boolean;
+    readonly horizontalPosition: IHorizontalPositionOptions;
+    readonly verticalPosition: IVerticalPositionOptions;
+    readonly allowOverlap?: boolean;
+    readonly lockAnchor?: boolean;
+    readonly behindDocument?: boolean;
+    readonly layoutInCell?: boolean;
+    readonly margins?: IMargins;
+    readonly wrap?: ITextWrapping;
 }

src/file/drawing/floating/horizontal-position.spec.ts

@@ -1,7 +1,8 @@
 import { assert } from "chai";
 
-import { HorizontalPositionAlign, HorizontalPositionRelativeFrom } from ".";
-import { Utility } from "../../../tests/utility";
+import { Utility } from "tests/utility";
+
+import { HorizontalPositionAlign, HorizontalPositionRelativeFrom } from "./floating-position";
 import { HorizontalPosition } from "./horizontal-position";
 
 describe("HorizontalPosition", () => {

src/file/drawing/floating/horizontal-position.ts

@@ -5,11 +5,11 @@ import { HorizontalPositionRelativeFrom, IHorizontalPositionOptions } from "./fl
 import { PositionOffset } from "./position-offset";
 
 interface IHorizontalPositionAttributes {
-    relativeFrom: HorizontalPositionRelativeFrom;
+    readonly relativeFrom: HorizontalPositionRelativeFrom;
 }
 
 class HorizontalPositionAttributes extends XmlAttributeComponent<IHorizontalPositionAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         relativeFrom: "relativeFrom",
     };
 }
@@ -20,7 +20,7 @@ export class HorizontalPosition extends XmlComponent {
 
         this.root.push(
             new HorizontalPositionAttributes({
-                relativeFrom: horizontalPosition.relative,
+                relativeFrom: horizontalPosition.relative || HorizontalPositionRelativeFrom.PAGE,
             }),
         );
 

src/file/drawing/floating/position-offset.spec.ts

@@ -1,6 +1,7 @@
 import { assert } from "chai";
 
-import { Utility } from "../../../tests/utility";
+import { Utility } from "tests/utility";
+
 import { PositionOffset } from "./position-offset";
 
 describe("PositionOffset", () => {

src/file/drawing/floating/simple-pos.spec.ts

@@ -1,6 +1,7 @@
 import { assert } from "chai";
 
-import { Utility } from "../../../tests/utility";
+import { Utility } from "tests/utility";
+
 import { SimplePos } from "./simple-pos";
 
 describe("SimplePos", () => {

src/file/drawing/floating/simple-pos.ts

@@ -2,12 +2,12 @@
 import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
 
 interface ISimplePosAttributes {
-    x: number;
-    y: number;
+    readonly x: number;
+    readonly y: number;
 }
 
 class SimplePosAttributes extends XmlAttributeComponent<ISimplePosAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         x: "x",
         y: "y",
     };

src/file/drawing/floating/vertical-position.spec.ts

@@ -1,7 +1,8 @@
 import { assert } from "chai";
 
-import { VerticalPositionAlign, VerticalPositionRelativeFrom } from ".";
-import { Utility } from "../../../tests/utility";
+import { Utility } from "tests/utility";
+
+import { VerticalPositionAlign, VerticalPositionRelativeFrom } from "./floating-position";
 import { VerticalPosition } from "./vertical-position";
 
 describe("VerticalPosition", () => {

src/file/drawing/floating/vertical-position.ts

@@ -5,11 +5,11 @@ import { IVerticalPositionOptions, VerticalPositionRelativeFrom } from "./floati
 import { PositionOffset } from "./position-offset";
 
 interface IVerticalPositionAttributes {
-    relativeFrom: VerticalPositionRelativeFrom;
+    readonly relativeFrom: VerticalPositionRelativeFrom;
 }
 
 class VerticalPositionAttributes extends XmlAttributeComponent<IVerticalPositionAttributes> {
-    protected xmlKeys = {
+    protected readonly xmlKeys = {
         relativeFrom: "relativeFrom",
     };
 }
@@ -20,7 +20,7 @@ export class VerticalPosition extends XmlComponent {
 
         this.root.push(
             new VerticalPositionAttributes({
-                relativeFrom: verticalPosition.relative,
+                relativeFrom: verticalPosition.relative || VerticalPositionRelativeFrom.PAGE,
             }),
         );