Version bump

#1988 Allow for children in comments

.cspell.json

@@ -47,7 +47,9 @@
         "/xmlKeys = {[^}]+}/g",
         "/\\.to\\.deep\\.equal\\({[^)]+}\\)/g",
         "\\.to\\.include\\.members\\(\\[[^\\]]+]\\)",
-        "/new [a-zA-Z]+\\({[^£]+}\\)/g"
+        "/new [a-zA-Z]+\\({[^£]+}\\)/g",
+        "/<element name=\"[a-z]+\"/gi",
+        "/<attribute name=\"[a-z]+\"/gi"
     ],
     "ignorePaths": ["package.json", "docs/api"],
     "allowCompoundWords": true,

.eslintrc.js

@@ -0,0 +1,272 @@
+/*
+👋 Hi! This file was autogenerated by tslint-to-eslint-config.
+https://github.com/typescript-eslint/tslint-to-eslint-config
+
+It represents the closest reasonable ESLint configuration to this
+project's original TSLint configuration.
+
+We recommend eventually switching this configuration to extend from
+the recommended rulesets in typescript-eslint.
+https://github.com/typescript-eslint/tslint-to-eslint-config/blob/master/docs/FAQs.md
+
+Happy linting! 💖
+*/
+module.exports = {
+    extends: "eslint:recommended",
+    env: {
+        browser: true,
+        es6: true,
+        node: true,
+    },
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        project: "tsconfig.json",
+        sourceType: "module",
+    },
+    plugins: [
+        "eslint-plugin-import",
+        "eslint-plugin-no-null",
+        "eslint-plugin-unicorn",
+        "eslint-plugin-jsdoc",
+        "eslint-plugin-prefer-arrow",
+        "@typescript-eslint",
+        "functional",
+    ],
+    root: true,
+    rules: {
+        "no-undef": "off",
+        "no-extra-boolean-cast": "off",
+        "no-alert": "error",
+        "no-self-compare": "error",
+        "no-unreachable-loop": "error",
+        "no-template-curly-in-string": "error",
+        "no-unused-private-class-members": "error",
+        "no-extend-native": "error",
+        "no-floating-decimal": "error",
+        "no-implied-eval": "error",
+        "no-iterator": "error",
+        "no-lone-blocks": "error",
+        "no-loop-func": "error",
+        "no-new-object": "error",
+        "no-proto": "error",
+        "no-useless-catch": "error",
+        "one-var-declaration-per-line": "error",
+        "prefer-arrow-callback": "error",
+        "prefer-destructuring": "error",
+        "prefer-exponentiation-operator": "error",
+        "prefer-promise-reject-errors": "error",
+        "prefer-regex-literals": "error",
+        "prefer-spread": "error",
+        "prefer-template": "error",
+        "require-await": "error",
+        "@typescript-eslint/adjacent-overload-signatures": "error",
+        "@typescript-eslint/array-type": [
+            "error",
+            {
+                default: "array",
+            },
+        ],
+        "@typescript-eslint/ban-types": [
+            "error",
+            {
+                types: {
+                    Object: {
+                        message: "Avoid using the `Object` type. Did you mean `object`?",
+                    },
+                    Function: {
+                        message: "Avoid using the `Function` type. Prefer a specific function type, like `() => void`.",
+                    },
+                    Boolean: {
+                        message: "Avoid using the `Boolean` type. Did you mean `boolean`?",
+                    },
+                    Number: {
+                        message: "Avoid using the `Number` type. Did you mean `number`?",
+                    },
+                    String: {
+                        message: "Avoid using the `String` type. Did you mean `string`?",
+                    },
+                    Symbol: {
+                        message: "Avoid using the `Symbol` type. Did you mean `symbol`?",
+                    },
+                },
+            },
+        ],
+        "@typescript-eslint/consistent-type-assertions": "error",
+        "@typescript-eslint/dot-notation": "error",
+        "@typescript-eslint/explicit-function-return-type": [
+            "error",
+            {
+                allowExpressions: true,
+                allowTypedFunctionExpressions: true,
+                allowHigherOrderFunctions: false,
+                allowDirectConstAssertionInArrowFunctions: true,
+                allowConciseArrowFunctionExpressionsStartingWithVoid: true,
+            },
+        ],
+        "@typescript-eslint/explicit-member-accessibility": [
+            "error",
+            {
+                accessibility: "explicit",
+                overrides: {
+                    accessors: "explicit",
+                },
+            },
+        ],
+        "@typescript-eslint/explicit-module-boundary-types": [
+            "error",
+            {
+                allowArgumentsExplicitlyTypedAsAny: true,
+                allowDirectConstAssertionInArrowFunctions: true,
+                allowHigherOrderFunctions: false,
+                allowTypedFunctionExpressions: false,
+            },
+        ],
+        "@typescript-eslint/naming-convention": [
+            "error",
+            {
+                selector: ["objectLiteralProperty"],
+                leadingUnderscore: "allow",
+                format: ["camelCase", "PascalCase"],
+                filter: {
+                    regex: "(^[a-z]+:.+)|_attr|[0-9]",
+                    match: false,
+                },
+            },
+        ],
+        "@typescript-eslint/no-empty-function": "error",
+        "@typescript-eslint/no-empty-interface": "error",
+        "@typescript-eslint/no-explicit-any": "error",
+        "@typescript-eslint/no-misused-new": "error",
+        "@typescript-eslint/no-namespace": "error",
+        "@typescript-eslint/no-parameter-properties": "off",
+        "@typescript-eslint/no-require-imports": "error",
+        "@typescript-eslint/no-shadow": [
+            "error",
+            {
+                hoist: "all",
+            },
+        ],
+        "@typescript-eslint/no-this-alias": "error",
+        "@typescript-eslint/no-unused-expressions": "error",
+        "@typescript-eslint/no-use-before-define": "off",
+        "@typescript-eslint/no-var-requires": "error",
+        "@typescript-eslint/prefer-for-of": "error",
+        "@typescript-eslint/prefer-function-type": "error",
+        "@typescript-eslint/prefer-namespace-keyword": "error",
+        "@typescript-eslint/prefer-readonly": "error",
+        "@typescript-eslint/triple-slash-reference": [
+            "error",
+            {
+                path: "always",
+                types: "prefer-import",
+                lib: "always",
+            },
+        ],
+        "@typescript-eslint/typedef": [
+            "error",
+            {
+                parameter: true,
+                propertyDeclaration: true,
+            },
+        ],
+        "@typescript-eslint/unified-signatures": "error",
+        "arrow-body-style": "error",
+        complexity: "off",
+        "consistent-return": "error",
+        "constructor-super": "error",
+        curly: "error",
+        "dot-notation": "off",
+        eqeqeq: ["error", "smart"],
+        "guard-for-in": "error",
+        "id-denylist": ["error", "any", "Number", "number", "String", "string", "Boolean", "boolean", "Undefined", "undefined"],
+        "id-match": "error",
+        "import/no-default-export": "error",
+        "import/no-extraneous-dependencies": "off",
+        "import/no-internal-modules": "off",
+        "import/order": "error",
+        indent: "off",
+        "jsdoc/check-alignment": "error",
+        "jsdoc/check-indentation": "off",
+        "jsdoc/newline-after-description": "error",
+        "max-classes-per-file": "off",
+        "max-len": "off",
+        "new-parens": "error",
+        "no-bitwise": "error",
+        "no-caller": "error",
+        "no-cond-assign": "error",
+        "no-console": "error",
+        "no-debugger": "error",
+        "no-duplicate-case": "error",
+        "no-duplicate-imports": "error",
+        "no-empty": "error",
+        "no-empty-function": "off",
+        "no-eval": "error",
+        "no-extra-bind": "error",
+        "no-fallthrough": "off",
+        "no-invalid-this": "off",
+        "no-multiple-empty-lines": "error",
+        "no-new-func": "error",
+        "no-new-wrappers": "error",
+        "no-null/no-null": "error",
+        "no-param-reassign": "error",
+        "no-redeclare": "error",
+        "no-return-await": "error",
+        "no-sequences": "error",
+        "no-shadow": "off",
+        "no-sparse-arrays": "error",
+        "no-throw-literal": "error",
+        "no-trailing-spaces": "error",
+        "no-undef-init": "error",
+        "no-underscore-dangle": ["error", { allow: ["_attr"] }],
+        "no-unsafe-finally": "error",
+        "no-unused-expressions": "off",
+        "no-unused-labels": "error",
+        "no-use-before-define": "off",
+        "no-useless-constructor": "error",
+        "no-var": "error",
+        "object-shorthand": "off",
+        "one-var": ["error", "never"],
+        "prefer-arrow/prefer-arrow-functions": "error",
+        "prefer-const": "error",
+        "prefer-object-spread": "error",
+        radix: "error",
+        "space-in-parens": ["error", "never"],
+        "spaced-comment": [
+            "error",
+            "always",
+            {
+                markers: ["/"],
+            },
+        ],
+        "unicorn/filename-case": "error",
+        "unicorn/prefer-ternary": "error",
+        "use-isnan": "error",
+        "valid-typeof": "off",
+        "functional/immutable-data": [
+            "error",
+            {
+                assumeTypes: true,
+                ignoreImmediateMutation: true,
+                ignoreAccessorPattern: ["**.root*", "**.numberingReferences*", "**.sections*", "**.properties*"],
+            },
+        ],
+        "functional/prefer-property-signatures": "error",
+        "functional/no-mixed-types": "error",
+        // TODO: Deprecated. Use prefer-immutable-types and type-declaration-immutability instead
+        "functional/prefer-readonly-type": "error",
+        // "functional/prefer-immutable-types": "error",
+        // "functional/type-declaration-immutability": "error",
+        "no-unused-vars": ["error", { argsIgnorePattern: "^[_]+$" }],
+    },
+    overrides: [
+        {
+            files: ["*.spec.ts"],
+            rules: {
+                "@typescript-eslint/no-unused-expressions": "off",
+                "@typescript-eslint/dot-notation": "off",
+                "prefer-destructuring": "off",
+                "@typescript-eslint/explicit-function-return-type": "off",
+            },
+        },
+    ],
+};

.github/workflows/default.yml

@@ -34,7 +34,7 @@ jobs:
             - name: Test
               run: npm run test.coverage
             - name: Codecov
-              uses: codecov/codecov-action@v1
+              uses: codecov/codecov-action@v3
               with:
                   fail_ci_if_error: true
                   verbose: true

.github/workflows/demos.yml

@@ -301,15 +301,6 @@ jobs:
               with:
                   xml-file: build/extracted-doc/word/document.xml
                   xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
-            - name: Run Demo
-              run: npm run ts-node -- ./demo/30-template-document.ts
-            - name: Extract Word Document
-              run: npm run extract
-            - name: Validate XML
-              uses: ChristophWurst/xmllint-action@v1
-              with:
-                  xml-file: build/extracted-doc/word/document.xml
-                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
             - name: Run Demo
               run: npm run ts-node -- ./demo/31-tables.ts
             - name: Extract Word Document
@@ -688,4 +679,121 @@ jobs:
               uses: ChristophWurst/xmllint-action@v1
               with:
                   xml-file: build/extracted-doc/word/document.xml
-                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/72-word-wrap.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/73-comments.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/73-comments.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            # - name: Run Demo
+            #   run: npm run ts-node -- ./demo/75-tab-stops.ts
+            # - name: Extract Word Document
+            #   run: npm run extract
+            # - name: Validate XML
+            #   uses: ChristophWurst/xmllint-action@v1
+            #   with:
+            #       xml-file: build/extracted-doc/word/document.xml
+            #       xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/76-compatibility.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/77-side-by-side-tables.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/78-thai-distributed.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/79-table-from-data-source.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/80-thai-distributed.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/81-continuous-header.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/82-new-headers-new-section.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/83-setting-languages.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd
+            - name: Run Demo
+              run: npm run ts-node -- ./demo/84-positional-tabs.ts
+            - name: Extract Word Document
+              run: npm run extract
+            - name: Validate XML
+              uses: ChristophWurst/xmllint-action@v1
+              with:
+                  xml-file: build/extracted-doc/word/document.xml
+                  xml-schema-file: ooxml-schemas/microsoft/wml-2010.xsd

.npmignore

@@ -40,4 +40,7 @@ build-tests
 .vscode
 
 # docs
-docs
+docs
+
+# src
+src

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

.nycrc

@@ -1,9 +1,9 @@
 {
   "check-coverage": true,
-  "statements": 99.62,
-  "branches": 96.81,
-  "functions": 99.82,
-  "lines": 99.62,
+  "statements": 99.87,
+  "branches": 98.29,
+  "functions": 100,
+  "lines": 99.86,
   "include": [
     "src/**/*.ts"
   ],

.vscode/extensions.json

@@ -1,5 +1,3 @@
 {
-    "recommendations": [
-        "streetsidesoftware.code-spell-checker"
-    ]
+    "recommendations": ["streetsidesoftware.code-spell-checker", "dbaeumer.vscode-eslint"]
 }

.vscode/launch.json

@@ -0,0 +1,18 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Run Demo",
+            "type": "node",
+            "request": "launch",
+            "runtimeArgs": [
+                "-r",
+                "${workspaceFolder}/node_modules/ts-node/register",
+                "-r",
+                "${workspaceFolder}/node_modules/tsconfig-paths/register"
+            ],
+            "cwd": "${workspaceRoot}",
+            "program": "${workspaceFolder}/demo/85-template-document.ts"
+        }
+    ]
+}

README.md

@@ -3,7 +3,7 @@
 </p>
 
 <p align="center">
-    Easily generate .docx files with JS/TS. Works for Node and on the Browser.
+    Easily generate and modify .docx files with JS/TS. Works for Node and on the Browser.
 </p>
 
 ---
@@ -29,11 +29,12 @@ Here are examples of `docx` being used with basic `HTML/JS` in a browser environ
 -   https://codepen.io/dolanmiu/pen/RwNeObg
 -   https://jsfiddle.net/dolanmiu/onadx1gu/
 
-Here is an example of `docx` working in `Angular`:
+Here are examples of `docx` working in `Angular`:
 
 -   https://stackblitz.com/edit/angular-docx
+-   https://stackblitz.com/edit/angular-wmd6k3
 
-Here is an example of `docx` working in `React`:
+Here are examples of `docx` working in `React`:
 
 -   https://stackblitz.com/edit/react-docx
 -   https://stackblitz.com/edit/react-docx-images (adding images to Word Document)
@@ -87,6 +88,7 @@ Read the contribution guidelines [here](https://docx.js.org/#/contribution-guide
 [<img src="https://i.imgur.com/cmykN7c.png" alt="drawing"/>](https://www.arity.co/)
 [<img src="https://i.imgur.com/PXo25um.png" alt="drawing" height="50"/>](https://www.circadianrisk.com/)
 [<img src="https://i.imgur.com/AKGhtlh.png" alt="drawing"/>](https://lexense.com/)
+[<img src="https://i.imgur.com/9tqJaHw.png" alt="drawing" height="50"/>](https://novelpad.co/)
 
 ...and many more!
 

demo/1-basic.ts

@@ -1,7 +1,7 @@
 // Simple example to add text to a document
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, Packer, Paragraph, TextRun } from "../build";
+import { Document, Packer, Paragraph, Tab, TextRun } from "../build";
 
 const doc = new Document({
     sections: [
@@ -14,9 +14,10 @@ const doc = new Document({
                         new TextRun({
                             text: "Foo Bar",
                             bold: true,
+                            size: 40,
                         }),
                         new TextRun({
-                            text: "\tGithub is the best",
+                            children: [new Tab(), "Github is the best"],
                             bold: true,
                         }),
                     ],

demo/10-my-cv.ts

@@ -1,7 +1,7 @@
 // Generate a CV
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { AlignmentType, Document, HeadingLevel, Packer, Paragraph, TabStopPosition, TabStopType, TextRun } from "../build";
+import { AlignmentType, Document, HeadingLevel, Packer, Paragraph, Tab, TabStopPosition, TabStopType, TextRun } from "../build";
 
 // tslint:disable:no-shadowed-variable
 
@@ -284,7 +284,7 @@ class DocumentCreator {
                     bold: true,
                 }),
                 new TextRun({
-                    text: `\t${dateText}`,
+                    children: [new Tab(), dateText],
                     bold: true,
                 }),
             ],

demo/19-export-to-base64.ts

@@ -1,7 +1,7 @@
 // Export to base64 string - Useful in a browser environment.
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, Packer, Paragraph, TextRun } from "../build";
+import { Document, Packer, Paragraph, Tab, TextRun } from "../build";
 
 const doc = new Document({
     sections: [
@@ -15,7 +15,7 @@ const doc = new Document({
                             bold: true,
                         }),
                         new TextRun({
-                            text: "\tBar",
+                            children: [new Tab(), "Bar"],
                             bold: true,
                         }),
                     ],

demo/2-declaritive-styles.ts

@@ -82,6 +82,32 @@ const doc = new Document({
                     spacing: { line: 276, before: 20 * 72 * 0.1, after: 20 * 72 * 0.05 },
                 },
             },
+            {
+                id: "strikeUnderline",
+                name: "Strike Underline",
+                basedOn: "Normal",
+                quickFormat: true,
+                run: {
+                    strike: true,
+                    underline: {
+                        type: UnderlineType.SINGLE,
+                    },
+                },
+            },
+        ],
+        characterStyles: [
+            {
+                id: "strikeUnderlineCharacter",
+                name: "Strike Underline",
+                basedOn: "Normal",
+                quickFormat: true,
+                run: {
+                    strike: true,
+                    underline: {
+                        type: UnderlineType.SINGLE,
+                    },
+                },
+            },
         ],
     },
     numbering: {
@@ -169,6 +195,14 @@ const doc = new Document({
                         new TextRun({
                             text: "and back to normal.",
                         }),
+                        new TextRun({
+                            text: "This text will be invisible!",
+                            vanish: true,
+                        }),
+                        new TextRun({
+                            text: "This text will be VERY invisible! Word processors cannot override this!",
+                            specVanish: true,
+                        }),
                     ],
                 }),
                 new Paragraph({
@@ -182,6 +216,49 @@ const doc = new Document({
                         }),
                     ],
                 }),
+                new Paragraph({
+                    style: "strikeUnderline",
+                    children: [
+                        new TextRun({
+                            text: "Underline and Strike",
+                        }),
+                        new TextRun({
+                            text: " Override Underline ",
+                            underline: {
+                                type: UnderlineType.NONE,
+                            },
+                        }),
+                        new TextRun({
+                            text: "Strike and Underline",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Hello World ",
+                        }),
+                        new TextRun({
+                            style: "strikeUnderlineCharacter",
+                            text: "Underline and Strike",
+                        }),
+                        new TextRun({
+                            text: " Another Hello World",
+                        }),
+                        new TextRun({
+                            scale: 50,
+                            text: " Scaled text",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    scale: 200,
+                    children: [
+                        new TextRun({
+                            text: "Scaled paragraph",
+                        }),
+                    ],
+                }),
             ],
         },
     ],

demo/30-template-document.ts

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

demo/48-vertical-align.ts

@@ -1,7 +1,7 @@
 // Example of making content of section vertically aligned
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, Packer, Paragraph, VerticalAlign, TextRun } from "../build";
+import { Document, Packer, Paragraph, VerticalAlign, TextRun, Tab } from "../build";
 
 const doc = new Document({
     sections: [
@@ -18,7 +18,7 @@ const doc = new Document({
                             bold: true,
                         }),
                         new TextRun({
-                            text: "\tGithub is the best",
+                            children: [new Tab(), "Github is the best"],
                             bold: true,
                         }),
                     ],

demo/5-images.ts

@@ -25,6 +25,11 @@ const doc = new Document({
                                 width: 100,
                                 height: 100,
                             },
+                            altText: {
+                                title: "This is an ultimate title",
+                                description: "This is an ultimate image",
+                                name: "My Ultimate Image",
+                            },
                         }),
                     ],
                 }),

demo/55-math.ts

@@ -16,6 +16,7 @@ import {
     MathSubScript,
     MathSubSuperScript,
     MathSum,
+    MathIntegral,
     MathSuperScript,
     Packer,
     Paragraph,
@@ -90,6 +91,35 @@ const doc = new Document({
                         }),
                     ],
                 }),
+                new Paragraph({
+                    children: [
+                        new Math({
+                            children: [
+                                new MathIntegral({
+                                    children: [new MathRun("test")],
+                                }),
+                                new MathIntegral({
+                                    children: [
+                                        new MathSuperScript({
+                                            children: [new MathRun("e")],
+                                            superScript: [new MathRun("2")],
+                                        }),
+                                    ],
+                                    subScript: [new MathRun("i")],
+                                }),
+                                new MathIntegral({
+                                    children: [
+                                        new MathRadical({
+                                            children: [new MathRun("i")],
+                                        }),
+                                    ],
+                                    subScript: [new MathRun("i")],
+                                    superScript: [new MathRun("10")],
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
                 new Paragraph({
                     children: [
                         new Math({

demo/56-background-color.ts

@@ -1,7 +1,7 @@
 // Change background colour of whole document
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, Packer, Paragraph, TextRun } from "../build";
+import { Document, Packer, Paragraph, Tab, TextRun } from "../build";
 
 const doc = new Document({
     background: {
@@ -19,7 +19,7 @@ const doc = new Document({
                             bold: true,
                         }),
                         new TextRun({
-                            text: "\tGithub is the best",
+                            children: [new Tab(), "Github is the best"],
                             bold: true,
                         }),
                     ],

demo/6-page-borders.ts

@@ -1,7 +1,7 @@
 // Example of how to change page borders
 // Import from 'docx' rather than '../build' if you install from npm
 import * as fs from "fs";
-import { Document, HeadingLevel, Packer, Paragraph, TextRun } from "../build";
+import { Document, HeadingLevel, Packer, Paragraph, Tab, TextRun } from "../build";
 
 const doc = new Document({
     sections: [
@@ -25,7 +25,7 @@ const doc = new Document({
                             bold: true,
                         }),
                         new TextRun({
-                            text: "\tGithub is the best",
+                            children: [new Tab(), "Github is the best"],
                             bold: true,
                         }),
                     ],

demo/60-track-revisions.ts

@@ -12,6 +12,7 @@ import {
     PageNumber,
     Paragraph,
     ShadingType,
+    Tab,
     TextRun,
 } from "../build";
 
@@ -111,7 +112,7 @@ const doc = new Document({
                         }),
                         new TextRun({
                             bold: true,
-                            children: ["\tuse Inserted and Deleted TextRuns.", new FootnoteReferenceRun(1)],
+                            children: [new Tab(), "use Inserted and Deleted TextRuns.", new FootnoteReferenceRun(1)],
                         }),
                         new TextRun({
                             bold: true,

demo/61-text-frame.ts

@@ -8,6 +8,7 @@ import {
     HorizontalPositionAlign,
     Packer,
     Paragraph,
+    Tab,
     TextRun,
     VerticalPositionAlign,
 } from "../build";
@@ -67,7 +68,7 @@ const doc = new Document({
                             bold: true,
                         }),
                         new TextRun({
-                            text: "\tGithub is the best",
+                            children: [new Tab(), "Github is the best"],
                             bold: true,
                         }),
                     ],

demo/72-word-wrap.ts

@@ -7,12 +7,31 @@ const doc = new Document({
     sections: [
         {
             children: [
+                new Paragraph({
+                    wordWrap: true,
+                    children: [
+                        new TextRun("我今天遛狗去公园"),
+                        new TextRun({
+                            text: "456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    wordWrap: true,
+                    children: [
+                        new TextRun(
+                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
+                        ),
+                        new TextRun({
+                            text: "456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345",
+                        }),
+                    ],
+                }),
                 new Paragraph({
                     children: [
                         new TextRun("我今天遛狗去公园"),
                         new TextRun({
                             text: "456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345",
-                            space: SpaceType.PRESERVE,
                         }),
                     ],
                 }),
@@ -23,7 +42,6 @@ const doc = new Document({
                         ),
                         new TextRun({
                             text: "456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345456435234523456435564745673456345",
-                            space: SpaceType.PRESERVE,
                         }),
                     ],
                 }),

demo/73-comments.ts

@@ -5,7 +5,34 @@ import { Document, Packer, Paragraph, TextRun, CommentRangeStart, CommentRangeEn
 
 const doc = new Document({
     comments: {
-        children: [{ id: 0, author: "Ray Chen", date: new Date(), text: "comment text content" }],
+        children: [
+            {
+                id: 0,
+                author: "Ray Chen",
+                date: new Date(),
+                children: [
+                    new Paragraph({
+                        children: [
+                            new TextRun({
+                                text: "some initial text content",
+                            }),
+                        ],
+                    }),
+                    new Paragraph({
+                        children: [
+                            new TextRun({
+                                text: "comment text content",
+                            }),
+                            new TextRun({ text: "", break: 1 }),
+                            new TextRun({
+                                text: "More text here",
+                                bold: true,
+                            }),
+                        ],
+                    }),
+                ],
+            },
+        ],
     },
     sections: [
         {

demo/74-nodejs-stream.ts

@@ -0,0 +1,30 @@
+// Exporting the document as a stream
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, Tab, TextRun } from "../build";
+
+const doc = new Document({
+    sections: [
+        {
+            properties: {},
+            children: [
+                new Paragraph({
+                    children: [
+                        new TextRun("Hello World"),
+                        new TextRun({
+                            text: "Foo Bar",
+                            bold: true,
+                        }),
+                        new TextRun({
+                            children: [new Tab(), "Github is the best"],
+                            bold: true,
+                        }),
+                    ],
+                }),
+            ],
+        },
+    ],
+});
+
+const stream = Packer.toStream(doc);
+stream.pipe(fs.createWriteStream("My Document.docx"));

demo/75-tab-stops.ts

@@ -0,0 +1,80 @@
+// Example of using tab stops
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, HeadingLevel, Packer, Paragraph, TabStopPosition, TabStopType, TextRun } from "../build";
+
+const columnWidth = TabStopPosition.MAX / 4;
+const receiptTabStops = [
+        // no need to define first left tab column
+        // the right aligned tab column position should point to the end of column
+        // i.e. in this case
+        // (end position of 1st) + (end position of current)
+        // columnWidth + columnWidth = columnWidth * 2
+
+        { type: TabStopType.RIGHT, position: columnWidth * 2 },
+        { type: TabStopType.RIGHT, position: columnWidth * 3 },
+        { type: TabStopType.RIGHT, position: TabStopPosition.MAX },
+    ],
+    twoTabStops = [{ type: TabStopType.RIGHT, position: TabStopPosition.MAX }];
+
+const doc = new Document({
+    sections: [
+        {
+            properties: {},
+            children: [
+                new Paragraph({
+                    heading: HeadingLevel.HEADING_1,
+                    children: [new TextRun("Receipt 001")],
+                }),
+                new Paragraph({
+                    tabStops: twoTabStops,
+                    children: [
+                        new TextRun({
+                            text: "To Bob.\tBy Alice.",
+                            bold: true,
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    tabStops: twoTabStops,
+                    children: [new TextRun("Foo Inc\tBar Inc")],
+                }),
+                new Paragraph({ text: "" }),
+                new Paragraph({
+                    tabStops: receiptTabStops,
+
+                    children: [
+                        new TextRun({
+                            text: "Item\tPrice\tQuantity\tSub-total",
+                            bold: true,
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    tabStops: receiptTabStops,
+                    text: "Item 3\t10\t5\t50",
+                }),
+                new Paragraph({
+                    tabStops: receiptTabStops,
+                    text: "Item 3\t10\t5\t50",
+                }),
+                new Paragraph({
+                    tabStops: receiptTabStops,
+                    text: "Item 3\t10\t5\t50",
+                }),
+                new Paragraph({
+                    tabStops: receiptTabStops,
+                    children: [
+                        new TextRun({
+                            text: "\t\t\tTotal: 200",
+                            bold: true,
+                        }),
+                    ],
+                }),
+            ],
+        },
+    ],
+});
+
+const stream = Packer.toStream(doc);
+stream.pipe(fs.createWriteStream("My Document.docx"));

demo/76-compatibility.ts

@@ -0,0 +1,87 @@
+// Add compatibility options
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document({
+    compatibility: {
+        useSingleBorderforContiguousCells: true,
+        wordPerfectJustification: true,
+        noTabStopForHangingIndent: true,
+        noLeading: true,
+        spaceForUnderline: true,
+        noColumnBalance: true,
+        balanceSingleByteDoubleByteWidth: true,
+        noExtraLineSpacing: true,
+        doNotLeaveBackslashAlone: true,
+        underlineTrailingSpaces: true,
+        doNotExpandShiftReturn: true,
+        spacingInWholePoints: true,
+        lineWrapLikeWord6: true,
+        printBodyTextBeforeHeader: true,
+        printColorsBlack: true,
+        spaceWidth: true,
+        showBreaksInFrames: true,
+        subFontBySize: true,
+        suppressBottomSpacing: true,
+        suppressTopSpacing: true,
+        suppressSpacingAtTopOfPage: true,
+        suppressTopSpacingWP: true,
+        suppressSpBfAfterPgBrk: true,
+        swapBordersFacingPages: true,
+        convertMailMergeEsc: true,
+        truncateFontHeightsLikeWP6: true,
+        macWordSmallCaps: true,
+        usePrinterMetrics: true,
+        doNotSuppressParagraphBorders: true,
+        wrapTrailSpaces: true,
+        footnoteLayoutLikeWW8: true,
+        shapeLayoutLikeWW8: true,
+        alignTablesRowByRow: true,
+        forgetLastTabAlignment: true,
+        adjustLineHeightInTable: true,
+        autoSpaceLikeWord95: true,
+        noSpaceRaiseLower: true,
+        doNotUseHTMLParagraphAutoSpacing: true,
+        layoutRawTableWidth: true,
+        layoutTableRowsApart: true,
+        useWord97LineBreakRules: true,
+        doNotBreakWrappedTables: true,
+        doNotSnapToGridInCell: true,
+        selectFieldWithFirstOrLastCharacter: true,
+        applyBreakingRules: true,
+        doNotWrapTextWithPunctuation: true,
+        doNotUseEastAsianBreakRules: true,
+        useWord2002TableStyleRules: true,
+        growAutofit: true,
+        useFELayout: true,
+        useNormalStyleForList: true,
+        doNotUseIndentAsNumberingTabStop: true,
+        useAlternateEastAsianLineBreakRules: true,
+        allowSpaceOfSameStyleInTable: true,
+        doNotSuppressIndentation: true,
+        doNotAutofitConstrainedTables: true,
+        autofitToFirstFixedWidthCell: true,
+        underlineTabInNumberingList: true,
+        displayHangulFixedWidth: true,
+        splitPgBreakAndParaMark: true,
+        doNotVerticallyAlignCellWithSp: true,
+        doNotBreakConstrainedForcedTable: true,
+        ignoreVerticalAlignmentInTextboxes: true,
+        useAnsiKerningPairs: true,
+        cachedColumnBalance: true,
+    },
+    sections: [
+        {
+            children: [
+                new Paragraph({
+                    children: [new TextRun("Hello World")],
+                }),
+            ],
+        },
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/77-side-by-side-tables.ts

@@ -0,0 +1,116 @@
+// Exporting the document as a stream
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, Table, TableBorders, TableCell, TableRow, WidthType } from "../build";
+
+const table1 = new Table({
+    columnWidths: [3505, 5505],
+    rows: [
+        new TableRow({
+            children: [
+                new TableCell({
+                    width: {
+                        size: 3505,
+                        type: WidthType.DXA,
+                    },
+                    children: [new Paragraph("Hello")],
+                }),
+                new TableCell({
+                    width: {
+                        size: 5505,
+                        type: WidthType.DXA,
+                    },
+                    children: [],
+                }),
+            ],
+        }),
+        new TableRow({
+            children: [
+                new TableCell({
+                    width: {
+                        size: 3505,
+                        type: WidthType.DXA,
+                    },
+                    children: [],
+                }),
+                new TableCell({
+                    width: {
+                        size: 5505,
+                        type: WidthType.DXA,
+                    },
+                    children: [new Paragraph("World")],
+                }),
+            ],
+        }),
+    ],
+});
+
+const table2 = new Table({
+    columnWidths: [3505, 5505],
+    rows: [
+        new TableRow({
+            children: [
+                new TableCell({
+                    width: {
+                        size: 3505,
+                        type: WidthType.DXA,
+                    },
+                    children: [new Paragraph("Foo")],
+                }),
+                new TableCell({
+                    width: {
+                        size: 5505,
+                        type: WidthType.DXA,
+                    },
+                    children: [],
+                }),
+            ],
+        }),
+        new TableRow({
+            children: [
+                new TableCell({
+                    width: {
+                        size: 3505,
+                        type: WidthType.DXA,
+                    },
+                    children: [],
+                }),
+                new TableCell({
+                    width: {
+                        size: 5505,
+                        type: WidthType.DXA,
+                    },
+                    children: [new Paragraph("Bar")],
+                }),
+            ],
+        }),
+    ],
+});
+
+const noBorderTable = new Table({
+    borders: TableBorders.NONE,
+    rows: [
+        new TableRow({
+            children: [
+                new TableCell({
+                    children: [table1],
+                }),
+                new TableCell({
+                    children: [table2],
+                }),
+            ],
+        }),
+    ],
+});
+
+const doc = new Document({
+    sections: [
+        {
+            properties: {},
+            children: [noBorderTable],
+        },
+    ],
+});
+
+const stream = Packer.toStream(doc);
+stream.pipe(fs.createWriteStream("My Document.docx"));

demo/78-thai-distributed.ts

@@ -0,0 +1,27 @@
+// Simple example to add text to a document
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { AlignmentType, Document, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document({
+    sections: [
+        {
+            properties: {},
+            children: [
+                new Paragraph({
+                    alignment: AlignmentType.THAI_DISTRIBUTE,
+                    children: [
+                        new TextRun({
+                            text: "บริษัท บิสกิด จำกัด (บริษัทฯ) ได้จดทะเบียนจัดตั้งขึ้นเป็นบริษัทจำกัดตามประมวลกฎหมายแพ่งและพาณิชย์ของประเทศไทย เมื่อวันที่ 30 พฤษภาคม 2561 ทะเบียนนิติบุคคลเลขที่ 0845561005665",
+                            size: 36,
+                        }),
+                    ],
+                }),
+            ],
+        },
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/79-table-from-data-source.ts

@@ -0,0 +1,193 @@
+// Example of how you would create a table and add data to it from a data source
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import {
+    Document,
+    HeadingLevel,
+    Packer,
+    Paragraph,
+    Table,
+    TableCell,
+    TableRow,
+    VerticalAlign,
+    TextDirection,
+    TextRun,
+    WidthType,
+} from "../build";
+
+interface StockPrice {
+    readonly date: Date;
+    readonly ticker: string;
+    readonly price: number;
+}
+
+const DATA: StockPrice[] = [
+    {
+        date: new Date("2007-08-28"),
+        ticker: "Apple",
+        price: 18.12,
+    },
+    {
+        date: new Date("2007-08-29"),
+        ticker: "Apple",
+        price: 19.15,
+    },
+    {
+        date: new Date("2007-08-30"),
+        ticker: "Apple",
+        price: 19.46,
+    },
+    {
+        date: new Date("2007-08-31"),
+        ticker: "Apple",
+        price: 19.78,
+    },
+    {
+        date: new Date("2007-09-04"),
+        ticker: "Apple",
+        price: 20.59,
+    },
+    {
+        date: new Date("2007-09-05"),
+        ticker: "Apple",
+        price: 19.54,
+    },
+    {
+        date: new Date("2007-09-06"),
+        ticker: "Apple",
+        price: 19.29,
+    },
+    {
+        date: new Date("2007-09-07"),
+        ticker: "Apple",
+        price: 18.82,
+    },
+    {
+        date: new Date("2007-09-10"),
+        ticker: "Apple",
+        price: 19.53,
+    },
+    {
+        date: new Date("2007-09-11"),
+        ticker: "Apple",
+        price: 19.36,
+    },
+    {
+        date: new Date("2007-09-12"),
+        ticker: "Apple",
+        price: 19.55,
+    },
+    {
+        date: new Date("2007-09-13"),
+        ticker: "Apple",
+        price: 19.6,
+    },
+    {
+        date: new Date("2007-09-14"),
+        ticker: "Apple",
+        price: 19.83,
+    },
+    {
+        date: new Date("2007-09-17"),
+        ticker: "Apple",
+        price: 19.77,
+    },
+];
+
+const generateRows = (prices: StockPrice[]): TableRow[] =>
+    prices.map(
+        ({ date, ticker, price }) =>
+            new TableRow({
+                children: [
+                    new TableCell({
+                        children: [new Paragraph(date.toString())],
+                        verticalAlign: VerticalAlign.CENTER,
+                        textDirection: TextDirection.LEFT_TO_RIGHT_TOP_TO_BOTTOM,
+                    }),
+                    new TableCell({
+                        children: [new Paragraph(ticker)],
+                        verticalAlign: VerticalAlign.CENTER,
+                        textDirection: TextDirection.LEFT_TO_RIGHT_TOP_TO_BOTTOM,
+                    }),
+                    new TableCell({
+                        children: [new Paragraph(price.toString())],
+                        verticalAlign: VerticalAlign.CENTER,
+                        textDirection: TextDirection.TOP_TO_BOTTOM_RIGHT_TO_LEFT,
+                    }),
+                ],
+            }),
+    );
+
+const doc = new Document({
+    sections: [
+        {
+            children: [
+                new Table({
+                    width: {
+                        size: 9070,
+                        type: WidthType.DXA,
+                    },
+                    rows: [
+                        new TableRow({
+                            children: [
+                                new TableCell({
+                                    children: [
+                                        new Paragraph({
+                                            heading: HeadingLevel.HEADING_2,
+                                            children: [
+                                                new TextRun({
+                                                    text: "Date",
+                                                    bold: true,
+                                                    size: 40,
+                                                }),
+                                            ],
+                                        }),
+                                    ],
+                                    verticalAlign: VerticalAlign.CENTER,
+                                    textDirection: TextDirection.LEFT_TO_RIGHT_TOP_TO_BOTTOM,
+                                }),
+                                new TableCell({
+                                    children: [
+                                        new Paragraph({
+                                            heading: HeadingLevel.HEADING_2,
+                                            children: [
+                                                new TextRun({
+                                                    text: "Ticker",
+                                                    bold: true,
+                                                    size: 40,
+                                                }),
+                                            ],
+                                        }),
+                                    ],
+                                    verticalAlign: VerticalAlign.CENTER,
+                                    textDirection: TextDirection.LEFT_TO_RIGHT_TOP_TO_BOTTOM,
+                                }),
+                                new TableCell({
+                                    children: [
+                                        new Paragraph({
+                                            heading: HeadingLevel.HEADING_2,
+                                            children: [
+                                                new TextRun({
+                                                    text: "Price",
+                                                    bold: true,
+                                                    size: 40,
+                                                }),
+                                            ],
+                                        }),
+                                    ],
+                                    verticalAlign: VerticalAlign.CENTER,
+                                    textDirection: TextDirection.TOP_TO_BOTTOM_RIGHT_TO_LEFT,
+                                }),
+                            ],
+                        }),
+                        ...generateRows(DATA),
+                    ],
+                }),
+            ],
+        },
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/80-thai-distributed.ts

@@ -0,0 +1,49 @@
+// Simple example to add text to a document
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { AlignmentType, convertMillimetersToTwip, Document, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document({
+    styles: {
+        paragraphStyles: [
+            {
+                id: "test",
+                name: "Test",
+                basedOn: "Normal",
+                next: "Normal",
+                paragraph: {
+                    indent: { left: convertMillimetersToTwip(6.4) },
+                },
+            },
+        ],
+    },
+    sections: [
+        {
+            properties: {
+                page: {
+                    margin: {
+                        top: 0,
+                        right: convertMillimetersToTwip(24),
+                        bottom: convertMillimetersToTwip(24),
+                        left: convertMillimetersToTwip(24),
+                    },
+                },
+            },
+            children: [
+                new Paragraph({
+                    alignment: AlignmentType.THAI_DISTRIBUTE,
+                    children: [
+                        new TextRun({
+                            text: "บริษัทฯ มีเงินสด 41,985.00 บาท และ 25,855.66 บาทตามลำดับ เงินสดทั้งจำนวนอยู่ในความดูแลและรับผิดชอบของกรรมการ บริษัทฯบันทึกการรับชำระเงินและการจ่ายชำระเงินผ่านบัญชีเงินสดเพียงเท่านั้น ซึ่งอาจกระทบต่อความถูกต้องครบถ้วนของการบันทึกบัญชี ทั้งนี้ขึ้นอยู่กับระบบการควบคุมภายในของบริษัท",
+                            size: 28,
+                        }),
+                    ],
+                }),
+            ],
+        },
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/81-continuous-header.ts

@@ -0,0 +1,148 @@
+// Example of a continuous header
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Footer, Header, Packer, Paragraph, SectionType, Tab, TextRun } from "../build";
+
+const doc = new Document({
+    creator: "Creator",
+    title: "Title",
+    sections: [
+        {
+            properties: { titlePage: true },
+            headers: {
+                first: new Header({
+                    children: [
+                        new Paragraph({
+                            children: [
+                                new TextRun({
+                                    text: "HEADER PAGE ONE",
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
+                default: new Header({
+                    children: [
+                        new Paragraph({
+                            children: [
+                                new TextRun({
+                                    text: "HEADER PAGE TWO AND FOLLOWING PAGES",
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
+            },
+            footers: {
+                first: new Footer({
+                    children: [
+                        new Paragraph({
+                            children: [
+                                new TextRun({
+                                    text: "FOOTER PAGE ONE",
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
+                default: new Footer({
+                    children: [
+                        new Paragraph({
+                            children: [
+                                new TextRun({
+                                    text: "FOOTER PAGE TWO AND FOLLOWING PAGES",
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
+            },
+            children: [
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac suscipit orci, in lobortis risus. Nulla vehicula rutrum finibus. Nullam consequat, magna in vehicula commodo, enim massa consectetur nisl, sit amet rutrum nunc ante vel lorem. Sed sit amet scelerisque velit. Proin non quam eget mauris aliquet posuere a sed orci. Proin posuere ante suscipit neque dignissim hendrerit. Pellentesque eget dapibus metus. Donec at mollis mauris. Vestibulum sit amet scelerisque nulla. Vivamus ipsum erat, tempor sed volutpat non, molestie at odio. Vivamus lectus ligula, finibus at mattis vitae, euismod sed tellus. Etiam neque massa, faucibus a fringilla nec, mollis at ex. Aliquam eget nibh tortor. Sed ut viverra libero. Nulla facilisis bibendum quam eget porttitor.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed eget nunc ac turpis facilisis volutpat. Duis eget arcu vitae neque porta hendrerit. Proin vel ante nulla. Duis congue efficitur dui. Suspendisse potenti. Aliquam aliquam nibh eu ipsum sagittis efficitur. Quisque sagittis metus dui, vitae suscipit tortor sollicitudin at. Suspendisse convallis, sem ac ornare condimentum, odio ipsum dapibus justo, a aliquam risus massa ut enim. Mauris vel placerat nibh. Ut iaculis vitae nibh at elementum. Quisque hendrerit et magna vitae mollis. Duis dictum euismod leo, at cursus risus sodales sed.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed gravida commodo felis, at aliquet risus volutpat ut. Nam nec ex eleifend tellus sodales volutpat nec ac nibh. Vestibulum pretium, leo vitae lobortis accumsan, urna libero euismod ante, consequat aliquam enim risus id nisl. Donec sagittis, justo eu luctus posuere, leo purus pellentesque turpis, eget volutpat mi leo vitae lacus. Etiam ante ante, posuere at augue non, lacinia ornare purus. Praesent vitae velit in enim congue maximus. Vivamus tincidunt fringilla neque. Curabitur fermentum justo nec sapien porttitor, ac ullamcorper nisi imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non orci vel eros egestas eleifend sit amet a diam. Duis mattis at ligula quis faucibus. Donec elementum lacus velit, a vehicula nunc gravida a. Phasellus eget nunc vehicula, varius velit a, maximus velit. Sed a suscipit nisi, non hendrerit felis. Proin mattis facilisis massa, quis elementum neque fringilla non.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed gravida commodo felis, at aliquet risus volutpat ut. Nam nec ex eleifend tellus sodales volutpat nec ac nibh. Vestibulum pretium, leo vitae lobortis accumsan, urna libero euismod ante, consequat aliquam enim risus id nisl. Donec sagittis, justo eu luctus posuere, leo purus pellentesque turpis, eget volutpat mi leo vitae lacus. Etiam ante ante, posuere at augue non, lacinia ornare purus. Praesent vitae velit in enim congue maximus. Vivamus tincidunt fringilla neque. Curabitur fermentum justo nec sapien porttitor, ac ullamcorper nisi imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non orci vel eros egestas eleifend sit amet a diam. Duis mattis at ligula quis faucibus. Donec elementum lacus velit, a vehicula nunc gravida a. Phasellus eget nunc vehicula, varius velit a, maximus velit. Sed a suscipit nisi, non hendrerit felis. Proin mattis facilisis massa, quis elementum neque fringilla non.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    spacing: {
+                        after: 500,
+                    },
+                    children: [
+                        new TextRun({
+                            text: "The first section ends after this paragraph.",
+                        }),
+                    ],
+                }),
+            ],
+        },
+        {
+            properties: {
+                type: SectionType.CONTINUOUS,
+            },
+            children: [
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac suscipit orci, in lobortis risus. Nulla vehicula rutrum finibus. Nullam consequat, magna in vehicula commodo, enim massa consectetur nisl, sit amet rutrum nunc ante vel lorem. Sed sit amet scelerisque velit. Proin non quam eget mauris aliquet posuere a sed orci. Proin posuere ante suscipit neque dignissim hendrerit. Pellentesque eget dapibus metus. Donec at mollis mauris. Vestibulum sit amet scelerisque nulla. Vivamus ipsum erat, tempor sed volutpat non, molestie at odio. Vivamus lectus ligula, finibus at mattis vitae, euismod sed tellus. Etiam neque massa, faucibus a fringilla nec, mollis at ex. Aliquam eget nibh tortor. Sed ut viverra libero. Nulla facilisis bibendum quam eget porttitor.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed eget nunc ac turpis facilisis volutpat. Duis eget arcu vitae neque porta hendrerit. Proin vel ante nulla. Duis congue efficitur dui. Suspendisse potenti. Aliquam aliquam nibh eu ipsum sagittis efficitur. Quisque sagittis metus dui, vitae suscipit tortor sollicitudin at. Suspendisse convallis, sem ac ornare condimentum, odio ipsum dapibus justo, a aliquam risus massa ut enim. Mauris vel placerat nibh. Ut iaculis vitae nibh at elementum. Quisque hendrerit et magna vitae mollis. Duis dictum euismod leo, at cursus risus sodales sed.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed gravida commodo felis, at aliquet risus volutpat ut. Nam nec ex eleifend tellus sodales volutpat nec ac nibh. Vestibulum pretium, leo vitae lobortis accumsan, urna libero euismod ante, consequat aliquam enim risus id nisl. Donec sagittis, justo eu luctus posuere, leo purus pellentesque turpis, eget volutpat mi leo vitae lacus. Etiam ante ante, posuere at augue non, lacinia ornare purus. Praesent vitae velit in enim congue maximus. Vivamus tincidunt fringilla neque. Curabitur fermentum justo nec sapien porttitor, ac ullamcorper nisi imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non orci vel eros egestas eleifend sit amet a diam. Duis mattis at ligula quis faucibus. Donec elementum lacus velit, a vehicula nunc gravida a. Phasellus eget nunc vehicula, varius velit a, maximus velit. Sed a suscipit nisi, non hendrerit felis. Proin mattis facilisis massa, quis elementum neque fringilla non.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed gravida commodo felis, at aliquet risus volutpat ut. Nam nec ex eleifend tellus sodales volutpat nec ac nibh. Vestibulum pretium, leo vitae lobortis accumsan, urna libero euismod ante, consequat aliquam enim risus id nisl. Donec sagittis, justo eu luctus posuere, leo purus pellentesque turpis, eget volutpat mi leo vitae lacus. Etiam ante ante, posuere at augue non, lacinia ornare purus. Praesent vitae velit in enim congue maximus. Vivamus tincidunt fringilla neque. Curabitur fermentum justo nec sapien porttitor, ac ullamcorper nisi imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non orci vel eros egestas eleifend sit amet a diam. Duis mattis at ligula quis faucibus. Donec elementum lacus velit, a vehicula nunc gravida a. Phasellus eget nunc vehicula, varius velit a, maximus velit. Sed a suscipit nisi, non hendrerit felis. Proin mattis facilisis massa, quis elementum neque fringilla non.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "The second section starts with the headline above. Move cursor to the end of this text and press enter until next page is generated in continuous section break mode.",
+                        }),
+                    ],
+                }),
+            ],
+        },
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/82-new-headers-new-section.ts

@@ -0,0 +1,148 @@
+// Example of using headers and footers in a new section
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Footer, Header, Packer, Paragraph, SectionType, Tab, TextRun } from "../build";
+
+const doc = new Document({
+    creator: "Creator",
+    title: "Title",
+    sections: [
+        {
+            headers: {
+                default: new Header({
+                    children: [
+                        new Paragraph({
+                            children: [
+                                new TextRun({
+                                    text: "HEADER PAGE ONE",
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
+            },
+            footers: {
+                default: new Footer({
+                    children: [
+                        new Paragraph({
+                            children: [
+                                new TextRun({
+                                    text: "FOOTER PAGE ONE",
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
+            },
+            children: [
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac suscipit orci, in lobortis risus. Nulla vehicula rutrum finibus. Nullam consequat, magna in vehicula commodo, enim massa consectetur nisl, sit amet rutrum nunc ante vel lorem. Sed sit amet scelerisque velit. Proin non quam eget mauris aliquet posuere a sed orci. Proin posuere ante suscipit neque dignissim hendrerit. Pellentesque eget dapibus metus. Donec at mollis mauris. Vestibulum sit amet scelerisque nulla. Vivamus ipsum erat, tempor sed volutpat non, molestie at odio. Vivamus lectus ligula, finibus at mattis vitae, euismod sed tellus. Etiam neque massa, faucibus a fringilla nec, mollis at ex. Aliquam eget nibh tortor. Sed ut viverra libero. Nulla facilisis bibendum quam eget porttitor.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed eget nunc ac turpis facilisis volutpat. Duis eget arcu vitae neque porta hendrerit. Proin vel ante nulla. Duis congue efficitur dui. Suspendisse potenti. Aliquam aliquam nibh eu ipsum sagittis efficitur. Quisque sagittis metus dui, vitae suscipit tortor sollicitudin at. Suspendisse convallis, sem ac ornare condimentum, odio ipsum dapibus justo, a aliquam risus massa ut enim. Mauris vel placerat nibh. Ut iaculis vitae nibh at elementum. Quisque hendrerit et magna vitae mollis. Duis dictum euismod leo, at cursus risus sodales sed.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed gravida commodo felis, at aliquet risus volutpat ut. Nam nec ex eleifend tellus sodales volutpat nec ac nibh. Vestibulum pretium, leo vitae lobortis accumsan, urna libero euismod ante, consequat aliquam enim risus id nisl. Donec sagittis, justo eu luctus posuere, leo purus pellentesque turpis, eget volutpat mi leo vitae lacus. Etiam ante ante, posuere at augue non, lacinia ornare purus. Praesent vitae velit in enim congue maximus. Vivamus tincidunt fringilla neque. Curabitur fermentum justo nec sapien porttitor, ac ullamcorper nisi imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non orci vel eros egestas eleifend sit amet a diam. Duis mattis at ligula quis faucibus. Donec elementum lacus velit, a vehicula nunc gravida a. Phasellus eget nunc vehicula, varius velit a, maximus velit. Sed a suscipit nisi, non hendrerit felis. Proin mattis facilisis massa, quis elementum neque fringilla non.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed gravida commodo felis, at aliquet risus volutpat ut. Nam nec ex eleifend tellus sodales volutpat nec ac nibh. Vestibulum pretium, leo vitae lobortis accumsan, urna libero euismod ante, consequat aliquam enim risus id nisl. Donec sagittis, justo eu luctus posuere, leo purus pellentesque turpis, eget volutpat mi leo vitae lacus. Etiam ante ante, posuere at augue non, lacinia ornare purus. Praesent vitae velit in enim congue maximus. Vivamus tincidunt fringilla neque. Curabitur fermentum justo nec sapien porttitor, ac ullamcorper nisi imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non orci vel eros egestas eleifend sit amet a diam. Duis mattis at ligula quis faucibus. Donec elementum lacus velit, a vehicula nunc gravida a. Phasellus eget nunc vehicula, varius velit a, maximus velit. Sed a suscipit nisi, non hendrerit felis. Proin mattis facilisis massa, quis elementum neque fringilla non.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    spacing: {
+                        after: 500,
+                    },
+                    children: [
+                        new TextRun({
+                            text: "The first section ends after this paragraph.",
+                        }),
+                    ],
+                }),
+            ],
+        },
+        {
+            headers: {
+                default: new Header({
+                    children: [
+                        new Paragraph({
+                            children: [
+                                new TextRun({
+                                    text: "HEADER PAGE TWO AND FOLLOWING PAGES",
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
+            },
+            footers: {
+                default: new Footer({
+                    children: [
+                        new Paragraph({
+                            children: [
+                                new TextRun({
+                                    text: "FOOTER PAGE TWO AND FOLLOWING PAGES",
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
+            },
+            children: [
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac suscipit orci, in lobortis risus. Nulla vehicula rutrum finibus. Nullam consequat, magna in vehicula commodo, enim massa consectetur nisl, sit amet rutrum nunc ante vel lorem. Sed sit amet scelerisque velit. Proin non quam eget mauris aliquet posuere a sed orci. Proin posuere ante suscipit neque dignissim hendrerit. Pellentesque eget dapibus metus. Donec at mollis mauris. Vestibulum sit amet scelerisque nulla. Vivamus ipsum erat, tempor sed volutpat non, molestie at odio. Vivamus lectus ligula, finibus at mattis vitae, euismod sed tellus. Etiam neque massa, faucibus a fringilla nec, mollis at ex. Aliquam eget nibh tortor. Sed ut viverra libero. Nulla facilisis bibendum quam eget porttitor.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed eget nunc ac turpis facilisis volutpat. Duis eget arcu vitae neque porta hendrerit. Proin vel ante nulla. Duis congue efficitur dui. Suspendisse potenti. Aliquam aliquam nibh eu ipsum sagittis efficitur. Quisque sagittis metus dui, vitae suscipit tortor sollicitudin at. Suspendisse convallis, sem ac ornare condimentum, odio ipsum dapibus justo, a aliquam risus massa ut enim. Mauris vel placerat nibh. Ut iaculis vitae nibh at elementum. Quisque hendrerit et magna vitae mollis. Duis dictum euismod leo, at cursus risus sodales sed.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed gravida commodo felis, at aliquet risus volutpat ut. Nam nec ex eleifend tellus sodales volutpat nec ac nibh. Vestibulum pretium, leo vitae lobortis accumsan, urna libero euismod ante, consequat aliquam enim risus id nisl. Donec sagittis, justo eu luctus posuere, leo purus pellentesque turpis, eget volutpat mi leo vitae lacus. Etiam ante ante, posuere at augue non, lacinia ornare purus. Praesent vitae velit in enim congue maximus. Vivamus tincidunt fringilla neque. Curabitur fermentum justo nec sapien porttitor, ac ullamcorper nisi imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non orci vel eros egestas eleifend sit amet a diam. Duis mattis at ligula quis faucibus. Donec elementum lacus velit, a vehicula nunc gravida a. Phasellus eget nunc vehicula, varius velit a, maximus velit. Sed a suscipit nisi, non hendrerit felis. Proin mattis facilisis massa, quis elementum neque fringilla non.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "Sed gravida commodo felis, at aliquet risus volutpat ut. Nam nec ex eleifend tellus sodales volutpat nec ac nibh. Vestibulum pretium, leo vitae lobortis accumsan, urna libero euismod ante, consequat aliquam enim risus id nisl. Donec sagittis, justo eu luctus posuere, leo purus pellentesque turpis, eget volutpat mi leo vitae lacus. Etiam ante ante, posuere at augue non, lacinia ornare purus. Praesent vitae velit in enim congue maximus. Vivamus tincidunt fringilla neque. Curabitur fermentum justo nec sapien porttitor, ac ullamcorper nisi imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed non orci vel eros egestas eleifend sit amet a diam. Duis mattis at ligula quis faucibus. Donec elementum lacus velit, a vehicula nunc gravida a. Phasellus eget nunc vehicula, varius velit a, maximus velit. Sed a suscipit nisi, non hendrerit felis. Proin mattis facilisis massa, quis elementum neque fringilla non.",
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: "The second section starts with the headline above. Move cursor to the end of this text and press enter until next page is generated in continuous section break mode.",
+                        }),
+                    ],
+                }),
+            ],
+        },
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/83-setting-languages.ts

@@ -0,0 +1,69 @@
+// Simple example to add text to a document
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph } from "../build";
+
+const doc = new Document({
+    styles: {
+        default: {
+            document: {
+                run: {
+                    color: "ff0000",
+                    language: {
+                        value: "es-ES",
+                    },
+                },
+            },
+        },
+        paragraphStyles: [
+            {
+                id: "frenchNormal",
+                name: "French Normal",
+                basedOn: "Normal",
+                next: "Normal",
+                run: {
+                    color: "999999",
+                    italics: true,
+                    language: {
+                        value: "fr-FR",
+                    },
+                },
+            },
+            {
+                id: "koreanNormal",
+                name: "Korean Normal",
+                basedOn: "Normal",
+                next: "Normal",
+                run: {
+                    color: "0000ff",
+                    bold: true,
+                    language: {
+                        value: "ko-KR",
+                    },
+                },
+            },
+        ],
+    },
+    sections: [
+        {
+            properties: {},
+            children: [
+                new Paragraph({
+                    text: "Yo vivo en Granada, una ciudad pequeña que tiene monumentos muy importantes como la Alhambra. Aquí la comida es deliciosa y son famosos el gazpacho, el rebujito y el salmorejo.",
+                }),
+                new Paragraph({
+                    text: "Toute personne a droit à l'éducation. L'éducation doit être gratuite, au moins en ce qui concerne l'enseignement élémentaire et fondamental. L'enseignement élémentaire est obligatoire. L'enseignement technique et professionnel doit être généralisé; l'accès aux études supérieures doit être ouvert en pleine égalité à tous en fonction de leur mérite.",
+                    style: "frenchNormal",
+                }),
+                new Paragraph({
+                    text: "대법관은 대법원장의 제청으로 국회의 동의를 얻어 대통령이 임명한다. 강화조약. 국가는 국민 모두의 생산 및 생활의 기반이 되는 국토의 효율적이고 균형있는 이용·개발과 보전을 위하여 법률이 정하는 바에 의하여 그에 관한 필요한 제한과 의무를 과할 수 있다, 국가는 청원에 대하여 심사할 의무를 진다.",
+                    style: "koreanNormal",
+                }),
+            ],
+        },
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/84-positional-tabs.ts

@@ -0,0 +1,60 @@
+// Simple example apply positional tabs to a document
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import {
+    Document,
+    Packer,
+    Paragraph,
+    PositionalTab,
+    Tab,
+    TextRun,
+    PositionalTabAlignment,
+    PositionalTabRelativeTo,
+    PositionalTabLeader,
+} from "../build";
+
+const doc = new Document({
+    sections: [
+        {
+            properties: {},
+            children: [
+                new Paragraph({
+                    children: [
+                        new TextRun("Full name"),
+                        new TextRun({
+                            children: [
+                                new PositionalTab({
+                                    alignment: PositionalTabAlignment.RIGHT,
+                                    relativeTo: PositionalTabRelativeTo.MARGIN,
+                                    leader: PositionalTabLeader.DOT,
+                                }),
+                                "John Doe",
+                            ],
+                            bold: true,
+                        }),
+                    ],
+                }),
+                new Paragraph({
+                    children: [
+                        new TextRun("Hello World"),
+                        new TextRun({
+                            children: [
+                                new PositionalTab({
+                                    alignment: PositionalTabAlignment.CENTER,
+                                    relativeTo: PositionalTabRelativeTo.INDENT,
+                                    leader: PositionalTabLeader.HYPHEN,
+                                }),
+                                "Foo bar",
+                            ],
+                            bold: true,
+                        }),
+                    ],
+                }),
+            ],
+        },
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/85-template-document.ts

@@ -0,0 +1,155 @@
+// Patch a document with patches
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import {
+    ExternalHyperlink,
+    HeadingLevel,
+    ImageRun,
+    Paragraph,
+    patchDocument,
+    PatchType,
+    Table,
+    TableCell,
+    TableRow,
+    TextDirection,
+    TextRun,
+    VerticalAlign,
+} from "../build";
+
+patchDocument(fs.readFileSync("demo/assets/simple-template.docx"), {
+    patches: {
+        name: {
+            type: PatchType.PARAGRAPH,
+            children: [new TextRun("Sir. "), new TextRun("John Doe"), new TextRun("(The Conqueror)")],
+        },
+        table_heading_1: {
+            type: PatchType.PARAGRAPH,
+            children: [new TextRun("Heading wow!")],
+        },
+        item_1: {
+            type: PatchType.PARAGRAPH,
+            children: [
+                new TextRun("#657"),
+                new ExternalHyperlink({
+                    children: [
+                        new TextRun({
+                            text: "BBC News Link",
+                        }),
+                    ],
+                    link: "https://www.bbc.co.uk/news",
+                }),
+            ],
+        },
+        paragraph_replace: {
+            type: PatchType.DOCUMENT,
+            children: [
+                new Paragraph("Lorem ipsum paragraph"),
+                new Paragraph("Another paragraph"),
+                new Paragraph({
+                    children: [
+                        new TextRun("This is a "),
+                        new ExternalHyperlink({
+                            children: [
+                                new TextRun({
+                                    text: "Google Link",
+                                }),
+                            ],
+                            link: "https://www.google.co.uk",
+                        }),
+                        new ImageRun({ data: fs.readFileSync("./demo/images/dog.png"), transformation: { width: 100, height: 100 } }),
+                    ],
+                }),
+            ],
+        },
+        header_adjective: {
+            type: PatchType.PARAGRAPH,
+            children: [new TextRun("Delightful Header")],
+        },
+        footer_text: {
+            type: PatchType.PARAGRAPH,
+            children: [
+                new TextRun("replaced just as"),
+                new TextRun(" well"),
+                new ExternalHyperlink({
+                    children: [
+                        new TextRun({
+                            text: "BBC News Link",
+                        }),
+                    ],
+                    link: "https://www.bbc.co.uk/news",
+                }),
+            ],
+        },
+        image_test: {
+            type: PatchType.PARAGRAPH,
+            children: [new ImageRun({ data: fs.readFileSync("./demo/images/image1.jpeg"), transformation: { width: 100, height: 100 } })],
+        },
+        table: {
+            type: PatchType.DOCUMENT,
+            children: [
+                new Table({
+                    rows: [
+                        new TableRow({
+                            children: [
+                                new TableCell({
+                                    children: [new Paragraph({}), new Paragraph({})],
+                                    verticalAlign: VerticalAlign.CENTER,
+                                }),
+                                new TableCell({
+                                    children: [new Paragraph({}), new Paragraph({})],
+                                    verticalAlign: VerticalAlign.CENTER,
+                                }),
+                                new TableCell({
+                                    children: [new Paragraph({ text: "bottom to top" }), new Paragraph({})],
+                                    textDirection: TextDirection.BOTTOM_TO_TOP_LEFT_TO_RIGHT,
+                                }),
+                                new TableCell({
+                                    children: [new Paragraph({ text: "top to bottom" }), new Paragraph({})],
+                                    textDirection: TextDirection.TOP_TO_BOTTOM_RIGHT_TO_LEFT,
+                                }),
+                            ],
+                        }),
+                        new TableRow({
+                            children: [
+                                new TableCell({
+                                    children: [
+                                        new Paragraph({
+                                            text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah",
+                                            heading: HeadingLevel.HEADING_1,
+                                        }),
+                                    ],
+                                }),
+                                new TableCell({
+                                    children: [
+                                        new Paragraph({
+                                            text: "This text should be in the middle of the cell",
+                                        }),
+                                    ],
+                                    verticalAlign: VerticalAlign.CENTER,
+                                }),
+                                new TableCell({
+                                    children: [
+                                        new Paragraph({
+                                            text: "Text above should be vertical from bottom to top",
+                                        }),
+                                    ],
+                                    verticalAlign: VerticalAlign.CENTER,
+                                }),
+                                new TableCell({
+                                    children: [
+                                        new Paragraph({
+                                            text: "Text above should be vertical from top to bottom",
+                                        }),
+                                    ],
+                                    verticalAlign: VerticalAlign.CENTER,
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
+            ],
+        },
+    },
+}).then((doc) => {
+    fs.writeFileSync("My Document.docx", doc);
+});

demo/86-generate-template.ts

@@ -0,0 +1,20 @@
+// Generate a template document
+// Import from 'docx' rather than '../build' if you install from npm
+import * as fs from "fs";
+import { Document, Packer, Paragraph, TextRun } from "../build";
+
+const doc = new Document({
+    sections: [
+        {
+            children: [
+                new Paragraph({
+                    children: [new TextRun("{{template}}")],
+                }),
+            ],
+        },
+    ],
+});
+
+Packer.toBuffer(doc).then((buffer) => {
+    fs.writeFileSync("My Document.docx", buffer);
+});

demo/browser-demo.html

@@ -24,7 +24,7 @@
                                             bold: true,
                                         }),
                                         new docx.TextRun({
-                                            text: "\tGithub is the best",
+                                            children: [new docx.Tab(), "Github is the best"],
                                             bold: true,
                                         }),
                                     ],

docs/_coverpage.md

@@ -1,10 +1,10 @@
 <img src="https://i.imgur.com/37uBGhO.gif" alt="drawing" style="width:200px;"/>
 
-> Easily generate .docx files with JS/TS. Works for Node and on the Browser. :100:
+> Easily generate and modify .docx files with JS/TS. Works for Node and on the Browser. :100:
 
 -   Simple, declarative API
--   60+ usage examples
--   Battle tested, mature, 99%+ coverage
+-   80+ usage examples
+-   Battle tested, mature, 99.9%+ coverage
 
 [GitHub](https://github.com/dolanmiu/docx)
 [Get Started](#Welcome)

docs/_sidebar.md

@@ -1,6 +1,8 @@
 -   [Getting Started](/)
 
--   [Examples](https://github.com/dolanmiu/docx/tree/master/demo)
+-   Examples
+
+    -   [Demos](https://github.com/dolanmiu/docx/tree/master/demo)
 
 -   API
 
@@ -11,27 +13,35 @@
     -   [Document](usage/document.md)
     -   [Sections](usage/sections.md)
     -   [Paragraph](usage/paragraph.md)
+        -   [Text Frames](usage/text-frames.md)
+        -   [Symbols](usage/symbols.md)
     -   [Text](usage/text.md)
-    -   [Image](usage/images.md)
+    -   [Images](usage/images.md)
     -   [Headers & Footers](usage/headers-and-footers.md)
     -   [Bullet Points](usage/bullet-points.md)
     -   [Hyperlinks](usage/hyperlinks.md)
     -   [Numbering](usage/numbering.md)
     -   [Tables](usage/tables.md)
-    -   [Tab Stops](usage/tab-stops.md)
+    -   [Tabs](usage/tabs.md)
     -   [Table of Contents](usage/table-of-contents.md)
     -   [Page Numbers](usage/page-numbers.md)
     -   [Change Tracking](usage/change-tracking.md)
     -   [Math](usage/math.md)
-    -   [Text Frames](usage/text-frames.md)
+    -   [Comments](usage/comments.md)
+    -   [Footnotes](usage/footnotes.md)
+    -   [Fields](usage/fields.md)
     -   Styling
-        _ [Styling with JS](usage/styling-with-js.md)
-        _ [Styling with XML](usage/styling-with-xml.md)
+        -   [Styling with JS](usage/styling-with-js.md)
+        -   [Styling with XML](usage/styling-with-xml.md)
 
 -   Exporting
 
     -   [Packers](usage/packers.md)
 
+-   Modifying Existing Documents
+
+    -   [Patcher](usage/patcher.md)
+
 -   Utility
 
     -   [Convenience functions](usage/convenience-functions.md)

docs/contribution-guidelines.md

@@ -1,18 +1,28 @@
 # Contribution Guidelines
 
--   Include documentation reference(s) at the top of each file:
+-   Include documentation reference(s) at the top of each file as a comment. For example:
 
     ```ts
     // http://officeopenxml.com/WPdocument.php
     ```
 
+    <!-- cSpell:ignore datypic -->
+    It can be a link to `officeopenxml.com` or `datypic.com` etc.
+    It could also be a reference to the official ECMA-376 standard: https://www.ecma-international.org/publications-and-standards/standards/ecma-376/
+
+-   Include a portion of the schema as a comment for cross reference. For example:
+
+    ```ts
+    // <xsd:element name="tbl" type="CT_Tbl" minOccurs="0" maxOccurs="1"/>
+    ```
+
 -   Follow Prettier standards, and consider using the [Prettier VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) plugin.
 
--   Follow the `TSLint` rules
+-   Follow the `ESLint` rules
 
 ## Always think about the user
 
-Put yourself in their position, and imagine how they would feel about your feature you wrote.
+Put yourself in their position, and imagine how they would feel about the feature you wrote.
 
 1. Is it easy to use?
 2. Has it been documented well?

docs/index.html

@@ -16,6 +16,7 @@
 
     <body>
         <div id="app"></div>
+        <script src="//cdn.jsdelivr.net/npm/docsify-plugin-carbon@1/index.min.js"></script>
         <script>
             window.$docsify = {
                 name: "docx",
@@ -24,6 +25,12 @@
                 subMaxLevel: 2,
                 search: "auto",
                 coverpage: true,
+                plugins: [
+                    // Change to your Carbon property ID
+                    // cSpell:disable
+                    DocsifyCarbon.create("CEAIP237", "docx"),
+                    // cSpell:enable
+                ],
             };
         </script>
         <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

docs/usage/document.md

@@ -22,20 +22,19 @@ const doc = new docx.Document({
 
 ### Full list of options:
 
-
-* creator
-* description
-* title
-* subject
-* keywords
-* lastModifiedBy
-* revision
-* externalStyles
-* styles
-* numbering
-* footnotes
-* hyperlinks
-* background
+-   creator
+-   description
+-   title
+-   subject
+-   keywords
+-   lastModifiedBy
+-   revision
+-   externalStyles
+-   styles
+-   numbering
+-   footnotes
+-   hyperlinks
+-   background
 
 ### Change background color of Document
 
@@ -55,3 +54,87 @@ You can mix and match whatever properties you want, or provide no properties.
 
 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.
+
+## Compatibility
+
+Compatibility Settings are optional settings used to preserve visual fidelity of documents created in earlier word processing applications. Some of these settings provide ability for specific behaviors, described in detail below; and others simply instruct applications to mimic the behavior of an existing word processing application.
+
+```ts
+const doc = new docx.Document({
+    compatibility: {
+        version: 15,
+        doNotExpandShiftReturn: true,
+    },
+});
+```
+
+### Compatibility Options
+
+| Property                            | Type      | Notes    | Possible Values              |
+| ----------------------------------- | --------- | -------- | ---------------------------- |
+| version                             | `number`  | Optional | `15`, `16`, `17`             |
+| useSingleBorderforContiguousCells   | `boolean` | Optional | `true`, `false`, `undefined` |
+| wordPerfectJustification            | `boolean` | Optional | `true`, `false`, `undefined` |
+| noTabStopForHangingIndent           | `boolean` | Optional | `true`, `false`, `undefined` |
+| noLeading                           | `boolean` | Optional | `true`, `false`, `undefined` |
+| spaceForUnderline                   | `boolean` | Optional | `true`, `false`, `undefined` |
+| noColumnBalance                     | `boolean` | Optional | `true`, `false`, `undefined` |
+| balanceSingleByteDoubleByteWidth    | `boolean` | Optional | `true`, `false`, `undefined` |
+| noExtraLineSpacing                  | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotLeaveBackslashAlone            | `boolean` | Optional | `true`, `false`, `undefined` |
+| underlineTrailingSpaces             | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotExpandShiftReturn              | `boolean` | Optional | `true`, `false`, `undefined` |
+| spacingInWholePoints                | `boolean` | Optional | `true`, `false`, `undefined` |
+| lineWrapLikeWord6                   | `boolean` | Optional | `true`, `false`, `undefined` |
+| printBodyTextBeforeHeader           | `boolean` | Optional | `true`, `false`, `undefined` |
+| printColorsBlack                    | `boolean` | Optional | `true`, `false`, `undefined` |
+| spaceWidth                          | `boolean` | Optional | `true`, `false`, `undefined` |
+| showBreaksInFrames                  | `boolean` | Optional | `true`, `false`, `undefined` |
+| subFontBySize                       | `boolean` | Optional | `true`, `false`, `undefined` |
+| suppressBottomSpacing               | `boolean` | Optional | `true`, `false`, `undefined` |
+| suppressTopSpacing                  | `boolean` | Optional | `true`, `false`, `undefined` |
+| suppressSpacingAtTopOfPage          | `boolean` | Optional | `true`, `false`, `undefined` |
+| suppressTopSpacingWP                | `boolean` | Optional | `true`, `false`, `undefined` |
+| suppressSpBfAfterPgBrk              | `boolean` | Optional | `true`, `false`, `undefined` |
+| swapBordersFacingPages              | `boolean` | Optional | `true`, `false`, `undefined` |
+| convertMailMergeEsc                 | `boolean` | Optional | `true`, `false`, `undefined` |
+| truncateFontHeightsLikeWP6          | `boolean` | Optional | `true`, `false`, `undefined` |
+| macWordSmallCaps                    | `boolean` | Optional | `true`, `false`, `undefined` |
+| usePrinterMetrics                   | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotSuppressParagraphBorders       | `boolean` | Optional | `true`, `false`, `undefined` |
+| wrapTrailSpaces                     | `boolean` | Optional | `true`, `false`, `undefined` |
+| footnoteLayoutLikeWW8               | `boolean` | Optional | `true`, `false`, `undefined` |
+| shapeLayoutLikeWW8                  | `boolean` | Optional | `true`, `false`, `undefined` |
+| alignTablesRowByRow                 | `boolean` | Optional | `true`, `false`, `undefined` |
+| forgetLastTabAlignment              | `boolean` | Optional | `true`, `false`, `undefined` |
+| adjustLineHeightInTable             | `boolean` | Optional | `true`, `false`, `undefined` |
+| autoSpaceLikeWord95                 | `boolean` | Optional | `true`, `false`, `undefined` |
+| noSpaceRaiseLower                   | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotUseHTMLParagraphAutoSpacing    | `boolean` | Optional | `true`, `false`, `undefined` |
+| layoutRawTableWidth                 | `boolean` | Optional | `true`, `false`, `undefined` |
+| layoutTableRowsApart                | `boolean` | Optional | `true`, `false`, `undefined` |
+| useWord97LineBreakRules             | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotBreakWrappedTables             | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotSnapToGridInCell               | `boolean` | Optional | `true`, `false`, `undefined` |
+| selectFieldWithFirstOrLastCharacter | `boolean` | Optional | `true`, `false`, `undefined` |
+| applyBreakingRules                  | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotWrapTextWithPunctuation        | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotUseEastAsianBreakRules         | `boolean` | Optional | `true`, `false`, `undefined` |
+| useWord2002TableStyleRules          | `boolean` | Optional | `true`, `false`, `undefined` |
+| growAutofit                         | `boolean` | Optional | `true`, `false`, `undefined` |
+| useFELayout                         | `boolean` | Optional | `true`, `false`, `undefined` |
+| useNormalStyleForList               | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotUseIndentAsNumberingTabStop    | `boolean` | Optional | `true`, `false`, `undefined` |
+| useAlternateEastAsianLineBreakRules | `boolean` | Optional | `true`, `false`, `undefined` |
+| allowSpaceOfSameStyleInTable        | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotSuppressIndentation            | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotAutofitConstrainedTables       | `boolean` | Optional | `true`, `false`, `undefined` |
+| autofitToFirstFixedWidthCell        | `boolean` | Optional | `true`, `false`, `undefined` |
+| underlineTabInNumberingList         | `boolean` | Optional | `true`, `false`, `undefined` |
+| displayHangulFixedWidth             | `boolean` | Optional | `true`, `false`, `undefined` |
+| splitPgBreakAndParaMark             | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotVerticallyAlignCellWithSp      | `boolean` | Optional | `true`, `false`, `undefined` |
+| doNotBreakConstrainedForcedTable    | `boolean` | Optional | `true`, `false`, `undefined` |
+| ignoreVerticalAlignmentInTextboxes  | `boolean` | Optional | `true`, `false`, `undefined` |
+| useAnsiKerningPairs                 | `boolean` | Optional | `true`, `false`, `undefined` |
+| cachedColumnBalance                 | `boolean` | Optional | `true`, `false`, `undefined` |

docs/usage/footnotes.md

@@ -0,0 +1,42 @@
+# Footnotes
+
+!> Footnotes requires an understanding of [Sections](usage/sections.md).
+
+Use footnotes and endnotes to explain, comment on, or provide references to something in a document. Usually, footnotes appear at the bottom of the page.
+
+## Example
+
+```ts
+const doc = new Document({
+    footnotes: {
+        1: { children: [new Paragraph("Foo"), new Paragraph("Bar")] },
+        2: { children: [new Paragraph("Test")] },
+    },
+    sections: [
+        {
+            children: [
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            children: ["Hello"],
+                        }),
+                        new FootnoteReferenceRun(1),
+                        new TextRun({
+                            children: [" World!"],
+                        }),
+                        new FootnoteReferenceRun(2),
+                    ],
+                }),
+            ],
+        },
+    ],
+});
+```
+
+## Usage
+
+Footnotes requires an entry into the `footnotes` array in the `Document` constructor, and a `FootnoteReferenceRun` in the `Paragraph` constructor.
+
+`footnotes` is an object of number to `Footnote` objects. The number is the reference number, and the `Footnote` object is the content of the footnote. The `Footnote` object has a `children` property, which is an array of `Paragraph` objects.
+
+`FootnoteReferenceRun` is a `Run` object, which are added to `Paragraph`s. It takes a number as a parameter, which is the reference number of the footnote.

docs/usage/images.md

@@ -252,13 +252,36 @@ const image = new ImageRun({
 });
 ```
 
+## Alternative Text
+
+Specifies common non-visual DrawingML properties. A name, title and description for a picture can be specified.
+
+```ts
+const image = new ImageRun({
+    data: fs.readFileSync("./demo/images/pizza.gif"),
+    altText: {
+        title: "This is an ultimate title",
+        description: "This is an ultimate image",
+        name: "My Ultimate Image",
+    },
+});
+```
+
+### Options
+
+| Property    | Type     | Notes    | Possible Values                      |
+| ----------- | -------- | -------- | ------------------------------------ |
+| name        | `string` | Required | `Specimen A`                         |
+| title       | `string` | Required | `My awesome title of my image`       |
+| description | `string` | Required | `My awesome description of my image` |
+
 ## Examples
 
 ### Add image to the document
 
 Importing Images from file system path
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/5-images.ts ':include')
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/5-images.ts ":include")
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/5-images.ts_
 
@@ -266,7 +289,7 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/5-images.ts_
 
 Example showing how to add image to headers and footers
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/9-images-in-header-and-footer.ts ':include')
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/9-images-in-header-and-footer.ts ":include")
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/9-images-in-header-and-footer.ts_
 
@@ -274,6 +297,6 @@ _Source: https://github.com/dolanmiu/docx/blob/master/demo/9-images-in-header-an
 
 Example showing how to float images on top of text and optimally give a `margin`
 
-[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/38-text-wrapping.ts ':include')
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/38-text-wrapping.ts ":include")
 
 _Source: https://github.com/dolanmiu/docx/blob/master/demo/38-text-wrapping.ts_

docs/usage/numbering.md

@@ -86,3 +86,34 @@ topLevelP.setNumbering(concrete, 0);
 subP.setNumbering(concrete, 1);
 subSubP.setNumbering(concrete, 2);
 ```
+
+## Unindent numbering 
+
+Default:1.  test
+
+After:1.test
+
+Use default numbering have indent,If you want unindent numbering
+
+How to custom number see the demo:
+https://runkit.com/dolanmiu/docx-demo3
+
+```ts
+
+enum LevelSuffix {
+    NOTHING = "nothing",
+    SPACE = "space",
+    TAB = "tab"
+}
+
+// custom numbering 
+const levels=[
+{
+    level: 0,
+    format: "decimal",
+    text: "%1.",
+    alignment: AlignmentType.START,
+    suffix: LevelSuffix.NOTHING,    // Cancel intent
+}]
+    
+```

docs/usage/paragraph.md

@@ -60,29 +60,29 @@ const doc = new Document({
 
 This is the list of options for a paragraph. A detailed explanation is below:
 
-| Property                       | Type                                                                                                                | Mandatory? | Possible Values                                                                                            |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------- |
-| [text](#text)                  | `string`                                                                                                            | Optional   |                                                                                                            |
-| [heading](#heading)            | `HeadingLevel`                                                                                                      | Optional   | `HEADING_1`, `HEADING_2`, `HEADING_3`, `HEADING_4`, `HEADING_5`, `HEADING_6`, `TITLE`                      |
-| [border](#border)              | `IBorderOptions`                                                                                                    | Optional   | `top`, `bottom`, `left`, `right`. Each of these are of type IBorderPropertyOptions. Click here for Example |
-| [spacing](#spacing)            | `ISpacingProperties`                                                                                                | Optional   | See below for ISpacingProperties                                                                           |
-| [outlineLevel](#outline-level) | `number`                                                                                                            | Optional   |                                                                                                            |
-| alignment                      | `AlignmentType`                                                                                                     | Optional   |                                                                                                            |
-| heading                        | `HeadingLevel`                                                                                                      | Optional   |                                                                                                            |
-| bidirectional                  | `boolean`                                                                                                           | Optional   |                                                                                                            |
-| thematicBreak                  | `boolean`                                                                                                           | Optional   |                                                                                                            |
-| pageBreakBefore                | `boolean`                                                                                                           | Optional   |                                                                                                            |
-| contextualSpacing              | `boolean`                                                                                                           | Optional   |                                                                                                            |
-| indent                         | `IIndentAttributesProperties`                                                                                       | Optional   |                                                                                                            |
-| keepLines                      | `boolean`                                                                                                           | Optional   |                                                                                                            |
-| keepNext                       | `boolean`                                                                                                           | Optional   |                                                                                                            |
-| children                       | `(TextRun or ImageRun or Hyperlink)[]`                                                                            | Optional   |                                                                                                            |
-| style                          | `string`                                                                                                            | Optional   |                                                                                                            |
-| [tabStop](usage/tab-stops)     | `{ left?: ITabStopOptions; right?: ITabStopOptions; maxRight?: { leader: LeaderType; }; center?: ITabStopOptions }` | Optional   |                                                                                                            |
-| [bullet](usage/bullet-points)  | `{ level: number }`                                                                                                 | Optional   |                                                                                                            |
-| [numbering](usage/numbering)   | `{ num: ConcreteNumbering; level: number; custom?: boolean }`                                                       | Optional   |                                                                                                            |
-| [widowControl](#widow-control) | `boolean`                                                                                                           | Optional   |                                                                                                            |
-| [frame](usage/text-frames.md)  | `IFrameOptions`                                                                                                     | Optional   |                                                                                                            |
+| Property                       | Type                                                                                                                | Mandatory? | Possible Values                                                                                                                                             |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [text](#text)                  | `string`                                                                                                            | Optional   |                                                                                                                                                             |
+| [heading](#heading)            | `HeadingLevel`                                                                                                      | Optional   | `HEADING_1`, `HEADING_2`, `HEADING_3`, `HEADING_4`, `HEADING_5`, `HEADING_6`, `TITLE`                                                                       |
+| [border](#border)              | `IBorderOptions`                                                                                                    | Optional   | `top`, `bottom`, `left`, `right`. Each of these are of type IBorderPropertyOptions. Click here for Example                                                  |
+| [spacing](#spacing)            | `ISpacingProperties`                                                                                                | Optional   | See below for ISpacingProperties                                                                                                                            |
+| [outlineLevel](#outline-level) | `number`                                                                                                            | Optional   |                                                                                                                                                             |
+| alignment                      | `AlignmentType`                                                                                                     | Optional   | `START`, `CENTER`, `END`, `BOTH`, `MEDIUM_KASHIDA`, `DISTRIBUTE`, `NUM_TAB`, `HIGH_KASHIDA`, `LOW_KASHIDA`, `THAI_DISTRIBUTE`, `LEFT`, `RIGHT`, `JUSTIFIED` |
+| heading                        | `HeadingLevel`                                                                                                      | Optional   |                                                                                                                                                             |
+| bidirectional                  | `boolean`                                                                                                           | Optional   |                                                                                                                                                             |
+| thematicBreak                  | `boolean`                                                                                                           | Optional   |                                                                                                                                                             |
+| pageBreakBefore                | `boolean`                                                                                                           | Optional   |                                                                                                                                                             |
+| contextualSpacing              | `boolean`                                                                                                           | Optional   |                                                                                                                                                             |
+| indent                         | `IIndentAttributesProperties`                                                                                       | Optional   |                                                                                                                                                             |
+| keepLines                      | `boolean`                                                                                                           | Optional   |                                                                                                                                                             |
+| keepNext                       | `boolean`                                                                                                           | Optional   |                                                                                                                                                             |
+| children                       | `(TextRun or ImageRun or Hyperlink)[]`                                                                              | Optional   |                                                                                                                                                             |
+| style                          | `string`                                                                                                            | Optional   |                                                                                                                                                             |
+| [tabStop](usage/tab-stops)     | `{ left?: ITabStopOptions; right?: ITabStopOptions; maxRight?: { leader: LeaderType; }; center?: ITabStopOptions }` | Optional   |                                                                                                                                                             |
+| [bullet](usage/bullet-points)  | `{ level: number }`                                                                                                 | Optional   |                                                                                                                                                             |
+| [numbering](usage/numbering)   | `{ num: ConcreteNumbering; level: number; custom?: boolean }`                                                       | Optional   |                                                                                                                                                             |
+| [widowControl](#widow-control) | `boolean`                                                                                                           | Optional   |                                                                                                                                                             |
+| [frame](usage/text-frames.md)  | `IFrameOptions`                                                                                                     | Optional   |                                                                                                                                                             |
 
 ## Text
 
@@ -111,7 +111,7 @@ const paragraph = new Paragraph({
 
 ## Border
 
-Add borders to a `Paragraph`. Good for making the `Paragraph` stand out
+Add borders to a `Paragraph`. Good for making the `Paragraph` stand out. Border top and border bottom can be used as a horizontal rule (also known as horizontal line).
 
 #### IBorderPropertyOptions
 
@@ -180,12 +180,14 @@ Adding spacing between paragraphs
 
 ### ISpacingProperties
 
-| Property | Type           | Notes    | Possible Values               |
-| -------- | -------------- | -------- | ----------------------------- |
-| after    | `number`       | Optional |                               |
-| before   | `number`       | Optional |                               |
-| line     | `number`       | Optional |                               |
-| lineRule | `LineRuleType` | Optional | `AT_LEAST`, `EXACTLY`, `AUTO` |
+| Property | Type           | Notes    | Possible Values                        |
+| -------- | -------------- | -------- | -------------------------------------- |
+| after    | `number`       | Optional |                                        |
+| before   | `number`       | Optional |                                        |
+| line     | `number`       | Optional |                                        |
+| lineRule | `LineRuleType` | Optional | `AT_LEAST`, `EXACTLY`, `EXACT`, `AUTO` |
+
+Note: The `lineRule` property has different values depending on the version of Word you are using. The `EXACTLY` value is only available in Word 2016 and above. Use `EXACT` for greater support, including LibreOffice etc. Read this issue for more information: https://github.com/dolanmiu/docx/issues/1773.
 
 **Example:**
 

docs/usage/patcher.md

@@ -0,0 +1,94 @@
+# Patcher
+
+The patcher allows you to modify existing documents, and add new content to them.
+
+!> The Patcher requires an understanding of [Paragraphs](usage/paragraph.md).
+
+---
+
+## Usage
+
+```ts
+import * as fs from "fs";
+import { patchDocument } from "docx";
+
+patchDocument(fs.readFileSync("My Document.docx"), {
+    patches: {
+        // Patches here
+    },
+});
+```
+
+## Patches
+
+The patcher takes in a `patches` object, which is a map of `string` to `Patch`:
+
+```ts
+interface Patch {
+    type: PatchType;
+    children: FileChild[] | ParagraphChild[];
+}
+```
+
+| Property | Type                              | Notes    | Possible Values                                                                                                                      |
+| -------- | --------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| type     | `PatchType`                       | Required | `DOCUMENT`, `PARAGRAPH`                                                                                                              |
+| children | `FileChild[] or ParagraphChild[]` | Required | The contents to replace with. A `FileChild` is a `Paragraph` or `Table`, whereas a `ParagraphChild` is typical `Paragraph` children. |
+
+### How to patch existing document
+
+1. Open your existing word document in your favorite Word Processor
+2. Write tags in the document where you want to patch in a mustache style notation. For example, `{{my_patch}}` and `{{my_second_patch}}`.
+3. Run the patcher with the patches as a key value pair.
+
+## Example
+
+### Word Document
+
+![Word Document screenshot](https://i.imgur.com/ybkvw6Z.png)
+
+### Patcher
+
+?> Notice how there is no handlebar notation in the key.
+
+The patch can be as simple as a string, or as complex as a table. Images, hyperlinks, and other complex elements within the `docx` library are also supported.
+
+```ts
+patchDocument(fs.readFileSync("My Document.docx"), {
+    patches: {
+        my_patch: {
+            type: PatchType.PARAGRAPH,
+            children: [new TextRun("Sir. "), new TextRun("John Doe"), new TextRun("(The Conqueror)")],
+        },
+        my_second_patch: {
+            type: PatchType.DOCUMENT,
+            children: [
+                new Paragraph("Lorem ipsum paragraph"),
+                new Paragraph("Another paragraph"),
+                new Paragraph({
+                    children: [
+                        new TextRun("This is a "),
+                        new ExternalHyperlink({
+                            children: [
+                                new TextRun({
+                                    text: "Google Link",
+                                }),
+                            ],
+                            link: "https://www.google.co.uk",
+                        }),
+                        new ImageRun({ data: fs.readFileSync("./demo/images/dog.png"), transformation: { width: 100, height: 100 } }),
+                    ],
+                }),
+            ],
+        },
+    },
+});
+```
+
+---
+
+## Demo
+
+_Source: https://github.com/dolanmiu/docx/blob/master/demo/85-template-document.ts_
+
+[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/85-template-document.ts ":include :type=code typescript")

docs/usage/tab-stops.md

@@ -1,121 +0,0 @@
-# Tab Stops
-
-> 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**: The unit of measurement for a tab stop is in [DXA](https://stackoverflow.com/questions/14360183/default-wordml-unit-measurement-pixel-or-point-or-inches)
-
-![Word 2013 Tabs](https://support.content.office.net/en-us/media/d75ca75d-9fe9-4d46-9a8b-4534c13acbc5.png "Word 2013 Tab Stops")
-
-Simply declare the tab stops on the paragraph, as shown below. Use the tab character `\t` to indicate the tab position within the `text` property of a `TextRun`. Adding multiple `tabStops` will mean you can add additional `\t` characters until the desired `tabStop` is selected. Example is shown below.
-
-## Example
-
-```ts
-const paragraph = new Paragraph({
-    children: [new TextRun({ text: "Hey everyone", bold: true}), new TextRun("\t11th November 1999")],
-    tabStops: [
-        {
-            type: TabStopType.RIGHT,
-            position: TabStopPosition.MAX,
-        },
-    ],
-});
-```
-
-The example above will create a left aligned text, and a right aligned text on the same line. The laymans approach to this problem would be to either use text boxes or tables. Not ideal!
-
-```ts
-const paragraph = new Paragraph({
-    children: [new TextRun("\t\tSecond tab stop here I come!")],
-    tabStops: [
-        {
-            type: TabStopType.RIGHT,
-            position: TabStopPosition.MAX,
-        },
-        {
-            type: TabStopType.LEFT,
-            position: 1000,
-        },
-    ],
-});
-```
-
-The above shows the use of two tab stops, and how to select/use it.
-
-You can add multiple tab stops of the same `type` too.
-
-```ts
-const paragraph = new Paragraph({
-    children: [new TextRun("Multiple \ttab \tstops!")],
-    tabStops: [
-        {
-            type: TabStopType.RIGHT,
-            position: TabStopPosition.MAX,
-        },
-        {
-            type: TabStopType.RIGHT,
-            position: 1000,
-        },
-    ],
-});
-```
-
-## Left Tab Stop
-
-```ts
-const paragraph = new Paragraph({
-    tabStops: [
-        {
-            type: TabStopType.LEFT,
-            position: 2268,
-        },
-    ],
-});
-```
-
-2268 is the distance from the left side.
-
-## Center Tab Stop
-
-```ts
-const paragraph = new Paragraph({
-    tabStops: [
-        {
-            type: TabStopType.CENTER,
-            position: 2268,
-        },
-    ],
-});
-```
-
-2268 is the distance from the center.
-
-## Right Tab Stop
-
-```ts
-const paragraph = new Paragraph({
-    tabStops: [
-        {
-            type: TabStopType.RIGHT,
-            position: 2268,
-        },
-    ],
-});
-```
-
-2268 is the distance from the left side.
-
-## Max Right Tab Stop
-
-```ts
-const paragraph = new Paragraph({
-    tabStops: [
-        {
-            type: TabStopType.RIGHT,
-            position: TabStopPosition.MAX,
-        },
-    ],
-});
-```
-
-This will create a tab stop on the very edge of the right hand side. Handy for right aligning and left aligning text on the same line.

docs/usage/tabs.md

@@ -0,0 +1,184 @@
+# Tabs and Tab Stops
+
+## Tab Stops
+
+> 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**: The unit of measurement for a tab stop is in [DXA](https://stackoverflow.com/questions/14360183/default-wordml-unit-measurement-pixel-or-point-or-inches)
+
+![Word 2013 Tabs](https://support.content.office.net/en-us/media/d75ca75d-9fe9-4d46-9a8b-4534c13acbc5.png "Word 2013 Tab Stops")
+
+Simply declare the tab stops on the paragraph, as shown below. Use the tab character `\t` or add the `new Tab()` child to indicate the tab position within the `text` property of a `TextRun`. Adding multiple `tabStops` will mean you can add additional `\t` characters until the desired `tabStop` is selected. Example is shown below.
+
+### Example
+
+```ts
+const paragraph = new Paragraph({
+    children: [
+        new TextRun({ text: "Hey everyone", bold: true }),
+        new TextRun("\t11th November 1999"),
+        new TextRun({
+            children: [new Tab(), "11th November 1999"],
+        }),
+    ],
+    tabStops: [
+        {
+            type: TabStopType.RIGHT,
+            position: TabStopPosition.MAX,
+        },
+    ],
+});
+```
+
+The example above will create a left aligned text, and a right aligned text on the same line. The laymans approach to this problem would be to either use text boxes or tables. Not ideal!
+
+```ts
+const paragraph = new Paragraph({
+    children: [new TextRun("\t\tSecond tab stop here I come!")],
+    tabStops: [
+        {
+            type: TabStopType.RIGHT,
+            position: TabStopPosition.MAX,
+        },
+        {
+            type: TabStopType.LEFT,
+            position: 1000,
+        },
+    ],
+});
+```
+
+The above shows the use of two tab stops, and how to select/use it.
+
+You can add multiple tab stops of the same `type` too.
+
+```ts
+const paragraph = new Paragraph({
+    children: [new TextRun("Multiple \ttab \tstops!")],
+    tabStops: [
+        {
+            type: TabStopType.RIGHT,
+            position: TabStopPosition.MAX,
+        },
+        {
+            type: TabStopType.RIGHT,
+            position: 1000,
+        },
+    ],
+});
+
+const paragraph = new Paragraph({
+    children: [
+        new TextRun({
+            children: ["Multiple ", new Tab(), "tab ", new Tab(), "stops!"],
+        }),
+    ],
+    tabStops: [
+        {
+            type: TabStopType.RIGHT,
+            position: TabStopPosition.MAX,
+        },
+        {
+            type: TabStopType.RIGHT,
+            position: 1000,
+        },
+    ],
+});
+```
+
+### Left Tab Stop
+
+```ts
+const paragraph = new Paragraph({
+    tabStops: [
+        {
+            type: TabStopType.LEFT,
+            position: 2268,
+        },
+    ],
+});
+```
+
+2268 is the distance from the left side.
+
+### Center Tab Stop
+
+```ts
+const paragraph = new Paragraph({
+    tabStops: [
+        {
+            type: TabStopType.CENTER,
+            position: 2268,
+        },
+    ],
+});
+```
+
+2268 is the distance from the center.
+
+### Right Tab Stop
+
+```ts
+const paragraph = new Paragraph({
+    tabStops: [
+        {
+            type: TabStopType.RIGHT,
+            position: 2268,
+        },
+    ],
+});
+```
+
+2268 is the distance from the left side.
+
+### Max Right Tab Stop
+
+```ts
+const paragraph = new Paragraph({
+    tabStops: [
+        {
+            type: TabStopType.RIGHT,
+            position: TabStopPosition.MAX,
+        },
+    ],
+});
+```
+
+This will create a tab stop on the very edge of the right hand side. Handy for right aligning and left aligning text on the same line.
+
+## Positional Tabs
+
+> Positional tab allow you to create a tab stop that is relative to the margin, or the page. This is useful if you want to create a table of contents, or a table of figures.
+
+They are easier to use than the normal tab stops, as you can use the `PositionalTab` class to create a tab stop, and then add the text to the `TextRun` children. Useful for most cases.
+
+![Word Positional Tabs](https://user-images.githubusercontent.com/26860966/209019464-d4b50236-c324-4cdb-8139-b9d172b1b993.png "Word Positional Tabs")
+
+### Example
+
+```ts
+new Paragraph({
+    children: [
+        new TextRun("Full name"),
+        new TextRun({
+            children: [
+                new PositionalTab({
+                    alignment: PositionalTabAlignment.RIGHT,
+                    relativeTo: PositionalTabRelativeTo.MARGIN,
+                    leader: PositionalTabLeader.DOT,
+                }),
+                "John Doe",
+            ],
+            bold: true,
+        }),
+    ],
+}),
+```
+
+### Options
+
+| Option     | Type                      | Description                           | Possible Values                                               |
+| ---------- | ------------------------- | ------------------------------------- | ------------------------------------------------------------- |
+| alignment  | `PositionalTabAlignment`  | The alignment of the tab stop         | `LEFT`, `RIGHT`, `CENTER`                                     |
+| relativeTo | `PositionalTabRelativeTo` | The relative position of the tab stop | `MARGIN`, `INDENT`                                            |
+| leader     | `PositionalTabLeader`     | The leader of the tab stop            | `NONE`, `DOT`, `HYPHEN`, `UNDERSCORE`, `MIDDLE_DOT`, `EQUALS` |

docs/usage/text.md

@@ -151,6 +151,28 @@ const text = new TextRun({
 });
 ```
 
+### Vanish and SpecVanish
+
+You may want to hide your text in your document.
+
+`Vanish` should affect the normal display of text, but an application may have settings to force hidden text to be displayed.
+
+```ts
+const text = new TextRun({
+    text: "This text will be hidden",
+    vanish: true,
+});
+```
+
+`SpecVanish` was typically used to ensure that a paragraph style can be applied to a part of a paragraph, and still appear as in the Table of Contents (which in previous word processors would ignore the use of the style if it were being used as a character style).
+
+```ts
+const text = new TextRun({
+    text: "This text will be hidden forever.",
+    specVanish: true,
+});
+```
+
 ## Break
 
 Sometimes you would want to put text underneath another line of text but inside the same paragraph.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docx",
-  "version": "7.4.1",
+  "version": "8.0.0",
   "description": "Easily generate .docx files with JS/TS with a nice declarative API. Works for Node and on the Browser.",
   "main": "build/index.js",
   "scripts": {
@@ -9,7 +9,7 @@
     "test.coverage": "nyc npm test",
     "test.watch": "npm test -- --watch",
     "prepublishOnly": "npm run build --production",
-    "lint": "tslint --project .",
+    "lint": "eslint -c .eslintrc.js --ext .ts src",
     "build": "npm run webpack && npm run fix-types",
     "webpack": "rimraf ./build && webpack --config ./webpack.config.ts",
     "demo": "npm run build && npm run ts-node --skip-project ./demo",
@@ -52,7 +52,7 @@
   "dependencies": {
     "@types/node": "^18.0.0",
     "jszip": "^3.1.5",
-    "nanoid": "^3.1.20",
+    "nanoid": "^3.3.4",
     "xml": "^1.0.1",
     "xml-js": "^1.6.8"
   },
@@ -64,19 +64,30 @@
   "homepage": "https://github.com/dolanmiu/docx#readme",
   "devDependencies": {
     "@types/chai": "^4.2.15",
-    "@types/glob": "^7.1.4",
-    "@types/mocha": "^9.0.0",
+    "@types/chai-as-promised": "^7.1.5",
+    "@types/glob": "^8.0.0",
+    "@types/mocha": "^10.0.0",
     "@types/prompt": "^1.1.1",
     "@types/request-promise": "^4.1.42",
     "@types/shelljs": "^0.8.9",
     "@types/sinon": "^10.0.0",
     "@types/unzipper": "^0.10.4",
     "@types/webpack": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
     "buffer": "^6.0.3",
-    "chai": "^3.5.0",
+    "chai": "^4.3.6",
+    "chai-as-promised": "^7.1.1",
     "cspell": "^6.2.2",
     "docsify-cli": "^4.3.0",
-    "glob": "^8.0.1",
+    "eslint": "^8.23.0",
+    "eslint-plugin-functional": "^5.0.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsdoc": "^40.0.0",
+    "eslint-plugin-no-null": "^1.0.2",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-unicorn": "^46.0.0",
+    "glob": "^9.3.0",
     "jszip": "^3.1.5",
     "mocha": "^10.0.0",
     "nyc": "^15.1.0",
@@ -87,21 +98,19 @@
     "replace-in-file": "^6.2.0",
     "request": "^2.88.0",
     "request-promise": "^4.2.2",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.0.4",
     "shelljs": "^0.8.4",
-    "sinon": "^14.0.0",
+    "sinon": "^15.0.0",
     "stream-browserify": "^3.0.0",
     "ts-loader": "^9.0.0",
     "ts-node": "^10.2.1",
     "tsconfig-paths": "^4.0.0",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "tslint": "^6.1.3",
-    "tslint-immutable": "^6.0.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typedoc": "^0.23.2",
-    "typescript": "4.7.4",
+    "typescript": "5.0.2",
     "unzipper": "^0.10.11",
     "webpack": "^5.28.0",
-    "webpack-cli": "^4.6.0"
+    "webpack-cli": "^5.0.0"
   },
   "engines": {
     "node": ">=10"

scripts/types-absolute-fixer.ts

@@ -9,7 +9,7 @@ for (const file of files) {
         from: /"@[a-z/-]*"/gi,
         to: (match) => {
             const matchSlug = match.replace(/['"]+/g, "").replace(/[@]+/g, "").trim();
-            const levelCount = file.split("/").length - 2;
+            const levelCount = file.split(/[\/\\]/).length - 2;
             const backLevels = Array(levelCount).fill("../").join("");
 
             return `"${backLevels}${matchSlug}"`;

src/export/formatter.ts

@@ -2,7 +2,7 @@ import { BaseXmlComponent, IContext, IXmlableObject } from "@file/xml-components
 
 export class Formatter {
     // tslint:disable-next-line: no-object-literal-type-assertion
-    public format(input: BaseXmlComponent, context: IContext = {} as IContext): IXmlableObject {
+    public format(input: BaseXmlComponent, context: IContext = { stack: [] } as unknown as IContext): IXmlableObject {
         const output = input.prepForXml(context);
 
         if (output) {

src/export/packer/image-replacer.ts

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

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

@@ -25,7 +25,7 @@ describe("Compiler", () => {
     });
 
     describe("#compile()", () => {
-        it("should pack all the content", async function () {
+        it("should pack all the content", function () {
             this.timeout(99999999);
             const file = new File({
                 sections: [],
@@ -53,7 +53,7 @@ describe("Compiler", () => {
             expect(fileNames).to.include("_rels/.rels");
         });
 
-        it("should pack all additional headers and footers", async function () {
+        it("should pack all additional headers and footers", function () {
             const file = new File({
                 sections: [
                     {

src/export/packer/next-compiler.ts

@@ -20,10 +20,10 @@ interface IXmlifyedFileMapping {
     readonly Numbering: IXmlifyedFile;
     readonly Relationships: IXmlifyedFile;
     readonly FileRelationships: IXmlifyedFile;
-    readonly Headers: IXmlifyedFile[];
-    readonly Footers: IXmlifyedFile[];
-    readonly HeaderRelationships: IXmlifyedFile[];
-    readonly FooterRelationships: IXmlifyedFile[];
+    readonly Headers: readonly IXmlifyedFile[];
+    readonly Footers: readonly IXmlifyedFile[];
+    readonly HeaderRelationships: readonly IXmlifyedFile[];
+    readonly FooterRelationships: readonly IXmlifyedFile[];
     readonly ContentTypes: IXmlifyedFile;
     readonly CustomProperties: IXmlifyedFile;
     readonly AppProperties: IXmlifyedFile;
@@ -38,7 +38,7 @@ export class Compiler {
     private readonly imageReplacer: ImageReplacer;
     private readonly numberingReplacer: NumberingReplacer;
 
-    constructor() {
+    public constructor() {
         this.formatter = new Formatter();
         this.imageReplacer = new ImageReplacer();
         this.numberingReplacer = new NumberingReplacer();
@@ -47,21 +47,20 @@ export class Compiler {
     public compile(file: File, prettifyXml?: boolean | PrettifyType): JSZip {
         const zip = new JSZip();
         const xmlifiedFileMapping = this.xmlifyFile(file, prettifyXml);
-        const map = new Map<string, IXmlifyedFile | IXmlifyedFile[]>(Object.entries(xmlifiedFileMapping));
+        const map = new Map<string, IXmlifyedFile | readonly IXmlifyedFile[]>(Object.entries(xmlifiedFileMapping));
 
         for (const [, obj] of map) {
             if (Array.isArray(obj)) {
-                for (const subFile of obj) {
+                for (const subFile of obj as readonly IXmlifyedFile[]) {
                     zip.file(subFile.path, subFile.data);
                 }
             } else {
-                zip.file(obj.path, obj.data);
+                zip.file((obj as IXmlifyedFile).path, (obj as IXmlifyedFile).data);
             }
         }
 
-        for (const data of file.Media.Array) {
-            const mediaData = data.stream;
-            zip.file(`word/media/${data.fileName}`, mediaData);
+        for (const { stream, fileName } of file.Media.Array) {
+            zip.file(`word/media/${fileName}`, stream);
         }
 
         return zip;
@@ -74,6 +73,7 @@ export class Compiler {
             this.formatter.format(file.Document.View, {
                 viewWrapper: file.Document,
                 file,
+                stack: [],
             }),
             {
                 indent: prettify,
@@ -100,6 +100,7 @@ export class Compiler {
                         this.formatter.format(file.Document.Relationships, {
                             viewWrapper: file.Document,
                             file,
+                            stack: [],
                         }),
                         {
                             indent: prettify,
@@ -125,6 +126,7 @@ export class Compiler {
                         this.formatter.format(file.Styles, {
                             viewWrapper: file.Document,
                             file,
+                            stack: [],
                         }),
                         {
                             indent: prettify,
@@ -144,6 +146,7 @@ export class Compiler {
                     this.formatter.format(file.CoreProperties, {
                         viewWrapper: file.Document,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -160,6 +163,7 @@ export class Compiler {
                     this.formatter.format(file.Numbering, {
                         viewWrapper: file.Document,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -176,6 +180,7 @@ export class Compiler {
                     this.formatter.format(file.FileRelationships, {
                         viewWrapper: file.Document,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -191,6 +196,7 @@ export class Compiler {
                     this.formatter.format(headerWrapper.View, {
                         viewWrapper: headerWrapper,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -214,6 +220,7 @@ export class Compiler {
                         this.formatter.format(headerWrapper.Relationships, {
                             viewWrapper: headerWrapper,
                             file,
+                            stack: [],
                         }),
                         {
                             indent: prettify,
@@ -230,6 +237,7 @@ export class Compiler {
                     this.formatter.format(footerWrapper.View, {
                         viewWrapper: footerWrapper,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -253,6 +261,7 @@ export class Compiler {
                         this.formatter.format(footerWrapper.Relationships, {
                             viewWrapper: footerWrapper,
                             file,
+                            stack: [],
                         }),
                         {
                             indent: prettify,
@@ -269,6 +278,7 @@ export class Compiler {
                     this.formatter.format(headerWrapper.View, {
                         viewWrapper: headerWrapper,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -293,6 +303,7 @@ export class Compiler {
                     this.formatter.format(footerWrapper.View, {
                         viewWrapper: footerWrapper,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -317,6 +328,7 @@ export class Compiler {
                     this.formatter.format(file.ContentTypes, {
                         viewWrapper: file.Document,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -332,6 +344,7 @@ export class Compiler {
                     this.formatter.format(file.CustomProperties, {
                         viewWrapper: file.Document,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -348,6 +361,7 @@ export class Compiler {
                     this.formatter.format(file.AppProperties, {
                         viewWrapper: file.Document,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -363,7 +377,8 @@ export class Compiler {
                 data: xml(
                     this.formatter.format(file.FootNotes.View, {
                         viewWrapper: file.FootNotes,
-                        file: file,
+                        file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -378,7 +393,8 @@ export class Compiler {
                 data: xml(
                     this.formatter.format(file.FootNotes.Relationships, {
                         viewWrapper: file.FootNotes,
-                        file: file,
+                        file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -394,6 +410,7 @@ export class Compiler {
                     this.formatter.format(file.Settings, {
                         viewWrapper: file.Document,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,
@@ -410,6 +427,7 @@ export class Compiler {
                     this.formatter.format(file.Comments, {
                         viewWrapper: file.Document,
                         file,
+                        stack: [],
                     }),
                     {
                         indent: prettify,

src/export/packer/numbering-replacer.ts

@@ -1,7 +1,7 @@
 import { ConcreteNumbering } from "@file/numbering";
 
 export class NumberingReplacer {
-    public replace(xmlData: string, concreteNumberings: ConcreteNumbering[]): string {
+    public replace(xmlData: string, concreteNumberings: readonly ConcreteNumbering[]): string {
         let currentXmlData = xmlData;
 
         for (const concreteNumbering of concreteNumberings) {

src/export/packer/packer.spec.ts

@@ -37,6 +37,14 @@ describe("Packer", () => {
         });
     });
 
+    describe("#toString()", () => {
+        it("should return a non-empty string", async () => {
+            const result = await Packer.toString(file);
+
+            assert.isAbove(result.length, 0);
+        });
+    });
+
     describe("#toBuffer()", () => {
         it("should create a standard docx file", async function () {
             this.timeout(99999999);
@@ -47,7 +55,7 @@ describe("Packer", () => {
         });
 
         it("should handle exception if it throws any", () => {
-            // tslint:disable-next-line:no-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const compiler = stub((Packer as any).compiler, "compile");
 
             compiler.throwsException();
@@ -57,7 +65,7 @@ describe("Packer", () => {
         });
 
         after(() => {
-            // tslint:disable-next-line:no-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (Packer as any).compiler.compile.restore();
         });
     });
@@ -72,7 +80,7 @@ describe("Packer", () => {
         });
 
         it("should handle exception if it throws any", () => {
-            // tslint:disable-next-line:no-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const compiler = stub((Packer as any).compiler, "compile");
 
             compiler.throwsException();
@@ -82,14 +90,14 @@ describe("Packer", () => {
         });
 
         after(() => {
-            // tslint:disable-next-line:no-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (Packer as any).compiler.compile.restore();
         });
     });
 
     describe("#toBlob()", () => {
         it("should create a standard docx file", async () => {
-            // tslint:disable-next-line: no-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             stub((Packer as any).compiler, "compile").callsFake(() => ({
                 // tslint:disable-next-line: no-empty
                 generateAsync: () => mock({}),
@@ -100,7 +108,7 @@ describe("Packer", () => {
         });
 
         it("should handle exception if it throws any", () => {
-            // tslint:disable-next-line:no-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const compiler = stub((Packer as any).compiler, "compile");
 
             compiler.throwsException();
@@ -110,7 +118,57 @@ describe("Packer", () => {
         });
 
         afterEach(() => {
-            // tslint:disable-next-line:no-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (Packer as any).compiler.compile.restore();
+        });
+    });
+
+    describe("#toStream()", () => {
+        it("should create a standard docx file", async () => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            stub((Packer as any).compiler, "compile").callsFake(() => ({
+                // tslint:disable-next-line: no-empty
+                generateNodeStream: () => ({
+                    on: (event: string, cb: () => void) => {
+                        if (event === "end") {
+                            cb();
+                        }
+                    },
+                }),
+            }));
+            const stream = await Packer.toStream(file);
+            return new Promise((resolve, reject) => {
+                stream.on("error", () => {
+                    reject(new Error());
+                });
+
+                stream.on("end", () => {
+                    resolve();
+                });
+            });
+        });
+
+        it("should handle exception if it throws any", () => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const compiler = stub((Packer as any).compiler, "compile").callsFake(() => ({
+                // tslint:disable-next-line: no-empty
+                on: (event: string, cb: () => void) => {
+                    if (event === "error") {
+                        cb();
+                    }
+                },
+            }));
+
+            compiler.throwsException();
+            try {
+                Packer.toStream(file);
+            } catch (error) {
+                assert.isDefined(error);
+            }
+        });
+
+        afterEach(() => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (Packer as any).compiler.compile.restore();
         });
     });

src/export/packer/packer.ts

@@ -1,3 +1,4 @@
+import { Stream } from "stream";
 import { File } from "@file/file";
 
 import { Compiler } from "./next-compiler";
@@ -13,6 +14,17 @@ export enum PrettifyType {
 }
 
 export class Packer {
+    public static async toString(file: File, prettify?: boolean | PrettifyType): Promise<string> {
+        const zip = this.compiler.compile(file, prettify);
+        const zipData = await zip.generateAsync({
+            type: "string",
+            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+            compression: "DEFLATE",
+        });
+
+        return zipData;
+    }
+
     public static async toBuffer(file: File, prettify?: boolean | PrettifyType): Promise<Buffer> {
         const zip = this.compiler.compile(file, prettify);
         const zipData = await zip.generateAsync({
@@ -46,5 +58,17 @@ export class Packer {
         return zipData;
     }
 
+    public static toStream(file: File, prettify?: boolean | PrettifyType): Stream {
+        const zip = this.compiler.compile(file, prettify);
+        const zipData = zip.generateNodeStream({
+            type: "nodebuffer",
+            streamFiles: true,
+            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+            compression: "DEFLATE",
+        });
+
+        return zipData;
+    }
+
     private static readonly compiler = new Compiler();
 }

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

@@ -2,7 +2,7 @@ import { XmlComponent } from "@file/xml-components";
 import { AppPropertiesAttributes } from "./app-properties-attributes";
 
 export class AppProperties extends XmlComponent {
-    constructor() {
+    public constructor() {
         super("Properties");
 
         this.root.push(

src/file/border/border.ts

@@ -33,7 +33,7 @@ export interface IBorderOptions {
 }
 
 export class BorderElement extends XmlComponent {
-    constructor(elementName: string, { color, size, space, style }: IBorderOptions) {
+    public constructor(elementName: string, { color, size, space, style }: IBorderOptions) {
         super(elementName);
         this.root.push(
             new BordersAttributes({

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

@@ -4,7 +4,7 @@ import { Default } from "./default/default";
 import { Override } from "./override/override";
 
 export class ContentTypes extends XmlComponent {
-    constructor() {
+    public constructor() {
         super("Types");
 
         this.root.push(

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

@@ -2,7 +2,7 @@ import { XmlComponent } from "@file/xml-components";
 import { DefaultAttributes } from "./default-attributes";
 
 export class Default extends XmlComponent {
-    constructor(contentType: string, extension?: string) {
+    public constructor(contentType: string, extension?: string) {
         super("Default");
 
         this.root.push(

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

@@ -2,7 +2,7 @@ import { XmlComponent } from "@file/xml-components";
 import { OverrideAttributes } from "./override-attributes";
 
 export class Override extends XmlComponent {
-    constructor(contentType: string, partName?: string) {
+    public constructor(contentType: string, partName?: string) {
         super("Override");
 
         this.root.push(

src/file/core-properties/properties.ts

@@ -1,4 +1,5 @@
 import { ICommentsOptions } from "@file/paragraph/run/comment-run";
+import { ICompatibilityOptions } from "@file/settings/compatibility";
 import { StringContainer, XmlComponent } from "@file/xml-components";
 import { dateTimeValue } from "@util/values";
 
@@ -12,7 +13,7 @@ import { Paragraph } from "../paragraph";
 import { IStylesOptions } from "../styles";
 
 export interface IPropertiesOptions {
-    readonly sections: ISectionOptions[];
+    readonly sections: readonly ISectionOptions[];
     readonly title?: string;
     readonly subject?: string;
     readonly creator?: string;
@@ -26,7 +27,7 @@ export interface IPropertiesOptions {
     readonly comments?: ICommentsOptions;
     readonly footnotes?: {
         readonly [key: string]: {
-            readonly children: Paragraph[];
+            readonly children: readonly Paragraph[];
         };
     };
     readonly background?: IDocumentBackgroundOptions;
@@ -35,7 +36,8 @@ export interface IPropertiesOptions {
         readonly updateFields?: boolean;
     };
     readonly compatabilityModeVersion?: number;
-    readonly customProperties?: ICustomPropertyOptions[];
+    readonly compatibility?: ICompatibilityOptions;
+    readonly customProperties?: readonly ICustomPropertyOptions[];
     readonly evenAndOddHeaderAndFooters?: boolean;
 }
 
@@ -64,7 +66,7 @@ export interface IPropertiesOptions {
 /* cSpell:enable */
 
 export class CoreProperties extends XmlComponent {
-    constructor(options: Omit<IPropertiesOptions, "sections">) {
+    public constructor(options: Omit<IPropertiesOptions, "sections">) {
         super("cp:coreProperties");
         this.root.push(
             new DocumentAttributes({
@@ -102,7 +104,7 @@ export class CoreProperties extends XmlComponent {
 }
 
 class TimestampElement extends XmlComponent {
-    constructor(name: string) {
+    public constructor(name: string) {
         super(name);
         this.root.push(
             new DocumentAttributes({

src/file/custom-properties/custom-properties.ts

@@ -3,11 +3,12 @@ import { CustomPropertiesAttributes } from "./custom-properties-attributes";
 import { CustomProperty, ICustomPropertyOptions } from "./custom-property";
 
 export class CustomProperties extends XmlComponent {
-    // tslint:disable-next-line:readonly-keyword
+    // eslint-disable-next-line functional/prefer-readonly-type
     private nextId: number;
+    // eslint-disable-next-line functional/prefer-readonly-type
     private readonly properties: CustomProperty[] = [];
 
-    constructor(properties: ICustomPropertyOptions[]) {
+    public constructor(properties: readonly ICustomPropertyOptions[]) {
         super("Properties");
 
         this.root.push(
@@ -32,6 +33,7 @@ export class CustomProperties extends XmlComponent {
     }
 
     public addCustomProperty(property: ICustomPropertyOptions): void {
+        // eslint-disable-next-line functional/immutable-data
         this.properties.push(new CustomProperty(this.nextId++, property));
     }
 }

src/file/custom-properties/custom-property.ts

@@ -7,7 +7,7 @@ export interface ICustomPropertyOptions {
 }
 
 export class CustomProperty extends XmlComponent {
-    constructor(id: number, properties: ICustomPropertyOptions) {
+    public constructor(id: number, properties: ICustomPropertyOptions) {
         super("property");
         this.root.push(
             new CustomPropertyAttributes({
@@ -21,7 +21,7 @@ export class CustomProperty extends XmlComponent {
 }
 
 export class CustomPropertyValue extends XmlComponent {
-    constructor(value: string) {
+    public constructor(value: string) {
         super("vt:lpwstr");
         this.root.push(value);
     }

src/file/document-wrapper.spec.ts

@@ -7,9 +7,7 @@ describe("DocumentWrapper", () => {
         it("should create", () => {
             const file = new DocumentWrapper({ background: {} });
 
-            // tslint:disable-next-line: no-unused-expression
             expect(file.View).to.be.ok;
-            // tslint:disable-next-line: no-unused-expression
             expect(file.Relationships).to.be.ok;
         });
     });

src/file/document-wrapper.ts

@@ -13,7 +13,7 @@ export class DocumentWrapper implements IViewWrapper {
     private readonly document: Document;
     private readonly relationships: Relationships;
 
-    constructor(options: IDocumentOptions) {
+    public constructor(options: IDocumentOptions) {
         this.document = new Document(options);
         this.relationships = new Relationships();
     }

src/file/document/body/body.ts

@@ -4,9 +4,10 @@ import { IContext, IXmlableObject, XmlComponent } from "@file/xml-components";
 import { ISectionPropertiesOptions, SectionProperties } from "./section-properties/section-properties";
 
 export class Body extends XmlComponent {
+    // eslint-disable-next-line functional/prefer-readonly-type
     private readonly sections: SectionProperties[] = [];
 
-    constructor() {
+    public constructor() {
         super("w:body");
     }
 
@@ -16,6 +17,7 @@ export class Body extends XmlComponent {
      * The spec says:
      *  - section element should be in the last paragraph of the section
      *  - last section should be direct child of body
+     *
      * @param options new section options
      */
     public addSection(options: ISectionPropertiesOptions): void {

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

@@ -1,25 +1,23 @@
-import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
-import { twipsMeasureValue } from "@util/values";
+import { NextAttributeComponent, XmlComponent } from "@file/xml-components";
+import { PositiveUniversalMeasure, twipsMeasureValue } from "@util/values";
 
-export interface IColumnAttributes {
-    readonly width: number | string;
-    readonly space?: number | string;
-}
+// <xsd:complexType name="CT_Column">
+//     <xsd:attribute name="w" type="s:ST_TwipsMeasure" use="optional" />
+//     <xsd:attribute name="space" type="s:ST_TwipsMeasure" use="optional" default="0" />
+// </xsd:complexType>
 
-export class ColumnAttributes extends XmlAttributeComponent<IColumnAttributes> {
-    protected readonly xmlKeys = {
-        width: "w:w",
-        space: "w:space",
-    };
-}
+type IColumnAttributes = {
+    readonly width: number | PositiveUniversalMeasure;
+    readonly space?: number | PositiveUniversalMeasure;
+};
 
 export class Column extends XmlComponent {
-    constructor({ width, space }: IColumnAttributes) {
+    public constructor({ width, space }: IColumnAttributes) {
         super("w:col");
         this.root.push(
-            new ColumnAttributes({
-                width: twipsMeasureValue(width),
-                space: space === undefined ? undefined : twipsMeasureValue(space),
+            new NextAttributeComponent<IColumnAttributes>({
+                width: { key: "w:w", value: twipsMeasureValue(width) },
+                space: { key: "w:space", value: space === undefined ? undefined : twipsMeasureValue(space) },
             }),
         );
     }

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

@@ -13,6 +13,13 @@ describe("Columns", () => {
             expect(tree["w:cols"]).to.deep.equal({ _attr: { "w:num": 3, "w:space": 720 } });
         });
 
+        it("should create set space and count to undefined if they are undefined", () => {
+            const columns = new Columns({});
+            const tree = new Formatter().format(columns);
+
+            expect(tree["w:cols"]).to.deep.equal({ _attr: {} });
+        });
+
         it("should ignore individual column attributes if equalWidth is true", () => {
             const unequalColumns = [new Column({ width: 1000, space: 400 }), new Column({ width: 2000 })];
             const columns = new Columns({ count: 3, space: 720, equalWidth: true, children: unequalColumns });

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

@@ -1,5 +1,5 @@
-import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
-import { decimalNumber, twipsMeasureValue } from "@util/values";
+import { NextAttributeComponent, XmlComponent } from "@file/xml-components";
+import { decimalNumber, PositiveUniversalMeasure, twipsMeasureValue } from "@util/values";
 
 import { Column } from "./column";
 
@@ -12,32 +12,23 @@ import { Column } from "./column";
 //     <xsd:attribute name="num" type="ST_DecimalNumber" use="optional" default="1"/>
 //     <xsd:attribute name="sep" type="s:ST_OnOff" use="optional"/>
 // </xsd:complexType>
-export interface IColumnsAttributes {
-    readonly space?: number | string;
+export type IColumnsAttributes = {
+    readonly space?: number | PositiveUniversalMeasure;
     readonly count?: number;
     readonly separate?: boolean;
     readonly equalWidth?: boolean;
-    readonly children?: Column[];
-}
-
-export class ColumnsAttributes extends XmlAttributeComponent<IColumnsAttributes> {
-    protected readonly xmlKeys = {
-        space: "w:space",
-        count: "w:num",
-        separate: "w:sep",
-        equalWidth: "w:equalWidth",
-    };
-}
+    readonly children?: readonly Column[];
+};
 
 export class Columns extends XmlComponent {
-    constructor({ space, count, separate, equalWidth, children }: IColumnsAttributes) {
+    public constructor({ space, count, separate, equalWidth, children }: IColumnsAttributes) {
         super("w:cols");
         this.root.push(
-            new ColumnsAttributes({
-                space: space === undefined ? undefined : twipsMeasureValue(space),
-                count: count === undefined ? undefined : decimalNumber(count),
-                separate,
-                equalWidth,
+            new NextAttributeComponent<Omit<IColumnsAttributes, "children">>({
+                space: { key: "w:space", value: space === undefined ? undefined : twipsMeasureValue(space) },
+                count: { key: "w:num", value: count === undefined ? undefined : decimalNumber(count) },
+                separate: { key: "w:sep", value: separate },
+                equalWidth: { key: "w:equalWidth", value: equalWidth },
             }),
         );
 

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

@@ -38,7 +38,7 @@ export class DocGridAttributes extends XmlAttributeComponent<IDocGridAttributesP
 }
 
 export class DocumentGrid extends XmlComponent {
-    constructor(linePitch: number, charSpace?: number, type?: DocumentGridType) {
+    public constructor(linePitch: number, charSpace?: number, type?: DocumentGridType) {
         super("w:docGrid");
 
         this.root.push(

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

@@ -52,7 +52,7 @@ export enum HeaderFooterType {
     FOOTER = "w:footerReference",
 }
 export class HeaderFooterReference extends XmlComponent {
-    constructor(type: HeaderFooterType, options: IHeaderFooterOptions) {
+    public constructor(type: HeaderFooterType, options: IHeaderFooterOptions) {
         super(type);
 
         this.root.push(

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

@@ -1,6 +1,6 @@
 // http://officeopenxml.com/WPsectionLineNumbering.php
-import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
-import { decimalNumber, twipsMeasureValue } from "@util/values";
+import { NextAttributeComponent, XmlComponent } from "@file/xml-components";
+import { decimalNumber, PositiveUniversalMeasure, twipsMeasureValue } from "@util/values";
 
 // <xsd:simpleType name="ST_LineNumberRestart">
 // <xsd:restriction base="xsd:string">
@@ -26,27 +26,23 @@ export interface ILineNumberAttributes {
     readonly countBy?: number;
     readonly start?: number;
     readonly restart?: LineNumberRestartFormat;
-    readonly distance?: number | string;
-}
-
-export class LineNumberAttributes extends XmlAttributeComponent<ILineNumberAttributes> {
-    protected readonly xmlKeys = {
-        countBy: "w:countBy",
-        start: "w:start",
-        restart: "w:restart",
-        distance: "w:distance",
-    };
+    readonly distance?: number | PositiveUniversalMeasure;
 }
 
 export class LineNumberType extends XmlComponent {
-    constructor({ countBy, start, restart, distance }: ILineNumberAttributes) {
+    public constructor({ countBy, start, restart, distance }: ILineNumberAttributes) {
         super("w:lnNumType");
         this.root.push(
-            new LineNumberAttributes({
-                countBy: countBy === undefined ? undefined : decimalNumber(countBy),
-                start: start === undefined ? undefined : decimalNumber(start),
-                restart,
-                distance: distance === undefined ? undefined : twipsMeasureValue(distance),
+            new NextAttributeComponent<{
+                readonly countBy?: number;
+                readonly start?: number;
+                readonly restart?: LineNumberRestartFormat;
+                readonly distance?: number | PositiveUniversalMeasure;
+            }>({
+                countBy: { key: "w:countBy", value: countBy === undefined ? undefined : decimalNumber(countBy) },
+                start: { key: "w:start", value: start === undefined ? undefined : decimalNumber(start) },
+                restart: { key: "w:restart", value: restart },
+                distance: { key: "w:distance", value: distance === undefined ? undefined : twipsMeasureValue(distance) },
             }),
         );
     }

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

@@ -71,11 +71,11 @@ class PageBordersAttributes extends XmlAttributeComponent<IPageBorderAttributes>
 // <xsd:attribute name="offsetFrom" type="ST_PageBorderOffset" use="optional" default="text"/>
 // </xsd:complexType>
 export class PageBorders extends IgnoreIfEmptyXmlComponent {
-    constructor(options?: IPageBordersOptions) {
+    public constructor(options?: IPageBordersOptions) {
         super("w:pgBorders");
 
         if (!options) {
-            return;
+            return this;
         }
 
         if (options.pageBorders) {

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

@@ -1,5 +1,5 @@
-import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
-import { signedTwipsMeasureValue, twipsMeasureValue } from "@util/values";
+import { NextAttributeComponent, XmlComponent } from "@file/xml-components";
+import { PositiveUniversalMeasure, signedTwipsMeasureValue, twipsMeasureValue, UniversalMeasure } from "@util/values";
 
 // <xsd:complexType name="CT_PageMar">
 //     <xsd:attribute name="top" type="ST_SignedTwipsMeasure" use="required"/>
@@ -10,48 +10,36 @@ import { signedTwipsMeasureValue, twipsMeasureValue } from "@util/values";
 //     <xsd:attribute name="footer" type="s:ST_TwipsMeasure" use="required"/>
 //     <xsd:attribute name="gutter" type="s:ST_TwipsMeasure" use="required"/>
 // </xsd:complexType>
-export interface IPageMarginAttributes {
-    readonly top?: number | string;
-    readonly right?: number | string;
-    readonly bottom?: number | string;
-    readonly left?: number | string;
-    readonly header?: number | string;
-    readonly footer?: number | string;
-    readonly gutter?: number | string;
-}
-
-export class PageMarginAttributes extends XmlAttributeComponent<IPageMarginAttributes> {
-    protected readonly xmlKeys = {
-        top: "w:top",
-        right: "w:right",
-        bottom: "w:bottom",
-        left: "w:left",
-        header: "w:header",
-        footer: "w:footer",
-        gutter: "w:gutter",
-    };
-}
+export type IPageMarginAttributes = {
+    readonly top?: number | UniversalMeasure;
+    readonly right?: number | PositiveUniversalMeasure;
+    readonly bottom?: number | UniversalMeasure;
+    readonly left?: number | PositiveUniversalMeasure;
+    readonly header?: number | PositiveUniversalMeasure;
+    readonly footer?: number | PositiveUniversalMeasure;
+    readonly gutter?: number | PositiveUniversalMeasure;
+};
 
 export class PageMargin extends XmlComponent {
-    constructor(
-        top: number | string,
-        right: number | string,
-        bottom: number | string,
-        left: number | string,
-        header: number | string,
-        footer: number | string,
-        gutter: number | string,
+    public constructor(
+        top: number | UniversalMeasure,
+        right: number | PositiveUniversalMeasure,
+        bottom: number | UniversalMeasure,
+        left: number | PositiveUniversalMeasure,
+        header: number | PositiveUniversalMeasure,
+        footer: number | PositiveUniversalMeasure,
+        gutter: number | PositiveUniversalMeasure,
     ) {
         super("w:pgMar");
         this.root.push(
-            new PageMarginAttributes({
-                top: signedTwipsMeasureValue(top),
-                right: twipsMeasureValue(right),
-                bottom: signedTwipsMeasureValue(bottom),
-                left: twipsMeasureValue(left),
-                header: twipsMeasureValue(header),
-                footer: twipsMeasureValue(footer),
-                gutter: twipsMeasureValue(gutter),
+            new NextAttributeComponent<IPageMarginAttributes>({
+                top: { key: "w:top", value: signedTwipsMeasureValue(top) },
+                right: { key: "w:right", value: twipsMeasureValue(right) },
+                bottom: { key: "w:bottom", value: signedTwipsMeasureValue(bottom) },
+                left: { key: "w:left", value: twipsMeasureValue(left) },
+                header: { key: "w:header", value: twipsMeasureValue(header) },
+                footer: { key: "w:footer", value: twipsMeasureValue(footer) },
+                gutter: { key: "w:gutter", value: twipsMeasureValue(gutter) },
             }),
         );
     }

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

@@ -41,7 +41,7 @@ export class PageNumberTypeAttributes extends XmlAttributeComponent<IPageNumberT
     };
 }
 export class PageNumberType extends XmlComponent {
-    constructor({ start, formatType, separator }: IPageNumberTypeAttributes) {
+    public constructor({ start, formatType, separator }: IPageNumberTypeAttributes) {
         super("w:pgNumType");
         this.root.push(
             new PageNumberTypeAttributes({

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

@@ -1,5 +1,5 @@
-import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
-import { twipsMeasureValue } from "@util/values";
+import { NextAttributeComponent, XmlComponent } from "@file/xml-components";
+import { PositiveUniversalMeasure, twipsMeasureValue } from "@util/values";
 
 // <xsd:simpleType name="ST_PageOrientation">
 // <xsd:restriction base="xsd:string">
@@ -18,22 +18,14 @@ export enum PageOrientation {
 //     <xsd:attribute name="orient" type="ST_PageOrientation" use="optional"/>
 //     <xsd:attribute name="code" type="ST_DecimalNumber" use="optional"/>
 // </xsd:complexType>
-export interface IPageSizeAttributes {
-    readonly width?: number | string;
-    readonly height?: number | string;
+export type IPageSizeAttributes = {
+    readonly width?: number | PositiveUniversalMeasure;
+    readonly height?: number | PositiveUniversalMeasure;
     readonly orientation?: PageOrientation;
-}
-
-export class PageSizeAttributes extends XmlAttributeComponent<IPageSizeAttributes> {
-    protected readonly xmlKeys = {
-        width: "w:w",
-        height: "w:h",
-        orientation: "w:orient",
-    };
-}
+};
 
 export class PageSize extends XmlComponent {
-    constructor(width: number | string, height: number | string, orientation: PageOrientation) {
+    public constructor(width: number | PositiveUniversalMeasure, height: number | PositiveUniversalMeasure, orientation: PageOrientation) {
         super("w:pgSz");
 
         const flip = orientation === PageOrientation.LANDSCAPE;
@@ -42,10 +34,10 @@ export class PageSize extends XmlComponent {
         const heightTwips = twipsMeasureValue(height);
 
         this.root.push(
-            new PageSizeAttributes({
-                width: flip ? heightTwips : widthTwips,
-                height: flip ? widthTwips : heightTwips,
-                orientation: orientation,
+            new NextAttributeComponent<IPageSizeAttributes>({
+                width: { key: "w:w", value: flip ? heightTwips : widthTwips },
+                height: { key: "w:h", value: flip ? widthTwips : heightTwips },
+                orientation: { key: "w:orient", value: orientation },
             }),
         );
     }

src/file/document/body/section-properties/properties/page-text-direction.ts

@@ -10,7 +10,7 @@ class PageTextDirectionAttributes extends XmlAttributeComponent<{ readonly val:
 }
 
 export class PageTextDirection extends XmlComponent {
-    constructor(value: PageTextDirectionType) {
+    public constructor(value: PageTextDirectionType) {
         super("w:textDirection");
 
         this.root.push(

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

@@ -30,7 +30,7 @@ export class SectionTypeAttributes extends XmlAttributeComponent<{
 }
 
 export class Type extends XmlComponent {
-    constructor(value: SectionType) {
+    public constructor(value: SectionType) {
         super("w:type");
         this.root.push(new SectionTypeAttributes({ val: value }));
     }

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

@@ -5,9 +5,9 @@ import { FooterWrapper } from "@file/footer-wrapper";
 import { HeaderWrapper } from "@file/header-wrapper";
 import { VerticalAlign, VerticalAlignElement } from "@file/vertical-align";
 import { OnOffElement, XmlComponent } from "@file/xml-components";
+import { PositiveUniversalMeasure, UniversalMeasure } from "@util/values";
 
 import { HeaderFooterReference, HeaderFooterReferenceType, HeaderFooterType } from "./properties/header-footer-reference";
-
 import { Columns, IColumnsAttributes } from "./properties/columns";
 import { DocumentGrid, IDocGridAttributesProperties } from "./properties/doc-grid";
 import { ILineNumberAttributes, LineNumberType } from "./properties/line-number";
@@ -76,10 +76,10 @@ export interface ISectionPropertiesOptions {
 // </xsd:group>
 
 export const sectionMarginDefaults = {
-    TOP: "1in",
-    RIGHT: "1in",
-    BOTTOM: "1in",
-    LEFT: "1in",
+    TOP: "1in" as UniversalMeasure,
+    RIGHT: "1in" as PositiveUniversalMeasure,
+    BOTTOM: "1in" as UniversalMeasure,
+    LEFT: "1in" as PositiveUniversalMeasure,
     HEADER: 708,
     FOOTER: 708,
     GUTTER: 0,
@@ -92,7 +92,7 @@ export const sectionPageSizeDefaults = {
 };
 
 export class SectionProperties extends XmlComponent {
-    constructor({
+    public constructor({
         page: {
             size: {
                 width = sectionPageSizeDefaults.WIDTH,

src/file/document/document-background/document-background.ts

@@ -63,7 +63,7 @@ export interface IDocumentBackgroundOptions {
 // </xsd:complexType>
 
 export class DocumentBackground extends XmlComponent {
-    constructor(options: IDocumentBackgroundOptions) {
+    public constructor(options: IDocumentBackgroundOptions) {
         super("w:background");
 
         this.root.push(

src/file/document/document.ts

@@ -8,7 +8,7 @@ import { DocumentAttributes } from "./document-attributes";
 import { DocumentBackground, IDocumentBackgroundOptions } from "./document-background";
 
 export interface IDocumentOptions {
-    readonly background: IDocumentBackgroundOptions;
+    readonly background?: IDocumentBackgroundOptions;
 }
 
 // <xsd:element name="document" type="CT_Document"/>
@@ -33,7 +33,7 @@ export interface IDocumentOptions {
 export class Document extends XmlComponent {
     private readonly body: Body;
 
-    constructor(options: IDocumentOptions) {
+    public constructor(options: IDocumentOptions) {
         super("w:document");
         this.root.push(
             new DocumentAttributes({
@@ -73,7 +73,9 @@ export class Document extends XmlComponent {
             }),
         );
         this.body = new Body();
-        this.root.push(new DocumentBackground(options.background));
+        if (options.background) {
+            this.root.push(new DocumentBackground(options.background));
+        }
         this.root.push(this.body);
     }
 

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

@@ -1,4 +1,8 @@
-import { assert } from "chai";
+import { assert, expect } from "chai";
+import { SinonStub, stub } from "sinon";
+
+import { Formatter } from "@export/formatter";
+import * as convenienceFunctions from "@util/convenience-functions";
 
 import { Utility } from "tests/utility";
 
@@ -6,8 +10,8 @@ import { IDrawingOptions } from "../drawing";
 import { TextWrappingType } from "../text-wrap";
 import { Anchor } from "./anchor";
 
-function createAnchor(drawingOptions: IDrawingOptions): Anchor {
-    return new Anchor(
+const createAnchor = (drawingOptions: IDrawingOptions): Anchor =>
+    new Anchor(
         {
             fileName: "test.png",
             stream: new Buffer(""),
@@ -34,9 +38,16 @@ function createAnchor(drawingOptions: IDrawingOptions): Anchor {
         },
         drawingOptions,
     );
-}
 
 describe("Anchor", () => {
+    before(() => {
+        stub(convenienceFunctions, "uniqueNumericId").callsFake(() => 0);
+    });
+
+    after(() => {
+        (convenienceFunctions.uniqueNumericId as SinonStub).restore();
+    });
+
     let anchor: Anchor;
 
     describe("#constructor()", () => {
@@ -363,5 +374,236 @@ describe("Anchor", () => {
                 relativeHeight: 120,
             });
         });
+
+        it("should create a Drawing with doc properties", () => {
+            anchor = createAnchor({
+                floating: {
+                    verticalPosition: {
+                        offset: 0,
+                    },
+                    horizontalPosition: {
+                        offset: 0,
+                    },
+                    zIndex: 120,
+                },
+                docProperties: {
+                    name: "test",
+                    description: "test",
+                    title: "test",
+                },
+            });
+            const tree = new Formatter().format(anchor);
+            expect(tree).to.deep.equal({
+                "wp:anchor": [
+                    {
+                        _attr: {
+                            allowOverlap: "1",
+                            behindDoc: "0",
+                            distB: 0,
+                            distL: 0,
+                            distR: 0,
+                            distT: 0,
+                            layoutInCell: "1",
+                            locked: "0",
+                            relativeHeight: 120,
+                            simplePos: "0",
+                        },
+                    },
+                    {
+                        "wp:simplePos": {
+                            _attr: {
+                                x: 0,
+                                y: 0,
+                            },
+                        },
+                    },
+                    {
+                        "wp:positionH": [
+                            {
+                                _attr: {
+                                    relativeFrom: "page",
+                                },
+                            },
+                            {
+                                "wp:posOffset": ["0"],
+                            },
+                        ],
+                    },
+                    {
+                        "wp:positionV": [
+                            {
+                                _attr: {
+                                    relativeFrom: "page",
+                                },
+                            },
+                            {
+                                "wp:posOffset": ["0"],
+                            },
+                        ],
+                    },
+                    {
+                        "wp:extent": {
+                            _attr: {
+                                cx: 952500,
+                                cy: 952500,
+                            },
+                        },
+                    },
+                    {
+                        "wp:effectExtent": {
+                            _attr: {
+                                b: 0,
+                                l: 0,
+                                r: 0,
+                                t: 0,
+                            },
+                        },
+                    },
+                    {
+                        "wp:wrapNone": {},
+                    },
+                    {
+                        "wp:docPr": {
+                            _attr: {
+                                descr: "test",
+                                id: 0,
+                                name: "test",
+                                title: "test",
+                            },
+                        },
+                    },
+                    {
+                        "wp:cNvGraphicFramePr": [
+                            {
+                                "a:graphicFrameLocks": {
+                                    _attr: {
+                                        noChangeAspect: 1,
+                                        "xmlns:a": "http://schemas.openxmlformats.org/drawingml/2006/main",
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        "a:graphic": [
+                            {
+                                _attr: {
+                                    "xmlns:a": "http://schemas.openxmlformats.org/drawingml/2006/main",
+                                },
+                            },
+                            {
+                                "a:graphicData": [
+                                    {
+                                        _attr: {
+                                            uri: "http://schemas.openxmlformats.org/drawingml/2006/picture",
+                                        },
+                                    },
+                                    {
+                                        "pic:pic": [
+                                            {
+                                                _attr: {
+                                                    "xmlns:pic": "http://schemas.openxmlformats.org/drawingml/2006/picture",
+                                                },
+                                            },
+                                            {
+                                                "pic:nvPicPr": [
+                                                    {
+                                                        "pic:cNvPr": {
+                                                            _attr: {
+                                                                descr: "",
+                                                                id: 0,
+                                                                name: "",
+                                                            },
+                                                        },
+                                                    },
+                                                    {
+                                                        "pic:cNvPicPr": [
+                                                            {
+                                                                "a:picLocks": {
+                                                                    _attr: {
+                                                                        noChangeArrowheads: 1,
+                                                                        noChangeAspect: 1,
+                                                                    },
+                                                                },
+                                                            },
+                                                        ],
+                                                    },
+                                                ],
+                                            },
+                                            {
+                                                "pic:blipFill": [
+                                                    {
+                                                        "a:blip": {
+                                                            _attr: {
+                                                                cstate: "none",
+                                                                "r:embed": "rId{test.png}",
+                                                            },
+                                                        },
+                                                    },
+                                                    {
+                                                        "a:srcRect": {},
+                                                    },
+                                                    {
+                                                        "a:stretch": [
+                                                            {
+                                                                "a:fillRect": {},
+                                                            },
+                                                        ],
+                                                    },
+                                                ],
+                                            },
+                                            {
+                                                "pic:spPr": [
+                                                    {
+                                                        _attr: {
+                                                            bwMode: "auto",
+                                                        },
+                                                    },
+                                                    {
+                                                        "a:xfrm": [
+                                                            {
+                                                                _attr: {},
+                                                            },
+                                                            {
+                                                                "a:off": {
+                                                                    _attr: {
+                                                                        x: 0,
+                                                                        y: 0,
+                                                                    },
+                                                                },
+                                                            },
+                                                            {
+                                                                "a:ext": {
+                                                                    _attr: {
+                                                                        cx: 952500,
+                                                                        cy: 952500,
+                                                                    },
+                                                                },
+                                                            },
+                                                        ],
+                                                    },
+                                                    {
+                                                        "a:prstGeom": [
+                                                            {
+                                                                _attr: {
+                                                                    prst: "rect",
+                                                                },
+                                                            },
+                                                            {
+                                                                "a:avLst": {},
+                                                            },
+                                                        ],
+                                                    },
+                                                ],
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            });
+        });
     });
 });

src/file/drawing/anchor/anchor.ts

@@ -37,7 +37,7 @@ import { AnchorAttributes } from "./anchor-attributes";
 //     <xsd:attribute name="allowOverlap" type="xsd:boolean" use="required"/>
 // </xsd:complexType>
 export class Anchor extends XmlComponent {
-    constructor(mediaData: IMediaData, transform: IMediaDataTransformation, drawingOptions: IDrawingOptions) {
+    public constructor(mediaData: IMediaData, transform: IMediaDataTransformation, drawingOptions: IDrawingOptions) {
         super("wp:anchor");
 
         const floating: IFloating = {
@@ -90,7 +90,7 @@ export class Anchor extends XmlComponent {
             this.root.push(new WrapNone());
         }
 
-        this.root.push(new DocProperties());
+        this.root.push(new DocProperties(drawingOptions.docProperties));
         this.root.push(new GraphicFrameProperties());
         this.root.push(new Graphic(mediaData, transform));
     }

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

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

src/file/drawing/doc-properties/doc-properties-children.spec.ts

@@ -0,0 +1,61 @@
+import { expect } from "chai";
+
+import { Formatter } from "@export/formatter";
+
+import { createHyperlinkClick, createHyperlinkHover } from "./doc-properties-children";
+
+describe("Document Properties Children", () => {
+    describe("#createHyperlinkClick", () => {
+        it("should create a Hyperlink Click component", () => {
+            const tree = new Formatter().format(createHyperlinkClick("1", false));
+
+            expect(tree).to.deep.equal({
+                "a:hlinkClick": {
+                    _attr: {
+                        "r:id": "rId1",
+                    },
+                },
+            });
+        });
+
+        it("should create a Hyperlink Click component with xmlns:a", () => {
+            const tree = new Formatter().format(createHyperlinkClick("1", true));
+
+            expect(tree).to.deep.equal({
+                "a:hlinkClick": {
+                    _attr: {
+                        "r:id": "rId1",
+                        "xmlns:a": "http://schemas.openxmlformats.org/drawingml/2006/main",
+                    },
+                },
+            });
+        });
+    });
+
+    describe("#createHyperlinkHover", () => {
+        it("should create a Hyperlink Hover component", () => {
+            const tree = new Formatter().format(createHyperlinkHover("1", false));
+
+            expect(tree).to.deep.equal({
+                "a:hlinkHover": {
+                    _attr: {
+                        "r:id": "rId1",
+                    },
+                },
+            });
+        });
+
+        it("should create a Hyperlink Hover component with xmlns:a", () => {
+            const tree = new Formatter().format(createHyperlinkHover("1", true));
+
+            expect(tree).to.deep.equal({
+                "a:hlinkHover": {
+                    _attr: {
+                        "r:id": "rId1",
+                        "xmlns:a": "http://schemas.openxmlformats.org/drawingml/2006/main",
+                    },
+                },
+            });
+        });
+    });
+});

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

@@ -0,0 +1,57 @@
+//     <sequence>
+//         <element name="hlinkClick" type="CT_Hyperlink" minOccurs="0" maxOccurs="1" />
+//         <element name="hlinkHover" type="CT_Hyperlink" minOccurs="0" maxOccurs="1" />
+//         <element name="extLst" type="CT_OfficeArtExtensionList" minOccurs="0" maxOccurs="1" />
+//     </sequence>
+
+import { BuilderElement, XmlComponent } from "@file/xml-components";
+
+// <xsd:complexType name="CT_Hyperlink">
+//     <xsd:group ref="EG_PContent" minOccurs="0" maxOccurs="unbounded" />
+//     <xsd:attribute name="tgtFrame" type="s:ST_String" use="optional" />
+//     <xsd:attribute name="tooltip" type="s:ST_String" use="optional" />
+//     <xsd:attribute name="docLocation" type="s:ST_String" use="optional" />
+//     <xsd:attribute name="history" type="s:ST_OnOff" use="optional" />
+//     <xsd:attribute name="anchor" type="s:ST_String" use="optional" />
+//     <xsd:attribute ref="r:id" />
+// </xsd:complexType>
+
+// TODO: Implement the rest of the attributes
+
+export const createHyperlinkClick = (linkId: string, hasXmlNs: boolean): XmlComponent =>
+    new BuilderElement({
+        name: "a:hlinkClick",
+        attributes: {
+            ...(hasXmlNs
+                ? {
+                      xmlns: {
+                          key: "xmlns:a",
+                          value: "http://schemas.openxmlformats.org/drawingml/2006/main",
+                      },
+                  }
+                : {}),
+            id: {
+                key: "r:id",
+                value: `rId${linkId}`,
+            },
+        },
+    });
+
+export const createHyperlinkHover = (linkId: string, hasXmlNs: boolean): XmlComponent =>
+    new BuilderElement({
+        name: "a:hlinkHover",
+        attributes: {
+            ...(hasXmlNs
+                ? {
+                      xmlns: {
+                          key: "xmlns:a",
+                          value: "http://schemas.openxmlformats.org/drawingml/2006/main",
+                      },
+                  }
+                : {}),
+            id: {
+                key: "r:id",
+                value: `rId${linkId}`,
+            },
+        },
+    });

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

@@ -1,16 +1,67 @@
-import { XmlComponent } from "@file/xml-components";
-import { DocPropertiesAttributes } from "./doc-properties-attributes";
+// https://c-rex.net/projects/samples/ooxml/e1/Part4/OOXML_P4_DOCX_docPr_topic_ID0ES32OB.html
+import { IContext, IXmlableObject, NextAttributeComponent, XmlComponent } from "@file/xml-components";
+import { ConcreteHyperlink } from "@file/paragraph";
+
+import { uniqueNumericId } from "@util/convenience-functions";
+
+import { createHyperlinkClick } from "./doc-properties-children";
+
+// <complexType name="CT_NonVisualDrawingProps">
+//     <sequence>
+//         <element name="hlinkClick" type="CT_Hyperlink" minOccurs="0" maxOccurs="1" />
+//         <element name="hlinkHover" type="CT_Hyperlink" minOccurs="0" maxOccurs="1" />
+//         <element name="extLst" type="CT_OfficeArtExtensionList" minOccurs="0" maxOccurs="1" />
+//     </sequence>
+//     <attribute name="id" type="ST_DrawingElementId" use="required" />
+//     <attribute name="name" type="xsd:string" use="required" />
+//     <attribute name="descr" type="xsd:string" use="optional" default="" />
+//     <attribute name="hidden" type="xsd:boolean" use="optional" default="false" />
+// </complexType>
+
+export interface DocPropertiesOptions {
+    readonly name: string;
+    readonly description: string;
+    readonly title: string;
+}
 
 export class DocProperties extends XmlComponent {
-    constructor() {
+    public constructor({ name, description, title }: DocPropertiesOptions = { name: "", description: "", title: "" }) {
         super("wp:docPr");
 
         this.root.push(
-            new DocPropertiesAttributes({
-                id: 0,
-                name: "",
-                descr: "",
+            new NextAttributeComponent({
+                id: {
+                    key: "id",
+                    value: uniqueNumericId(),
+                },
+                name: {
+                    key: "name",
+                    value: name,
+                },
+                description: {
+                    key: "descr",
+                    value: description,
+                },
+                title: {
+                    key: "title",
+                    value: title,
+                },
             }),
         );
     }
+
+    public prepForXml(context: IContext): IXmlableObject | undefined {
+        for (let i = context.stack.length - 1; i >= 0; i--) {
+            const element = context.stack[i];
+            if (!(element instanceof ConcreteHyperlink)) {
+                continue;
+            }
+
+            this.root.push(createHyperlinkClick(element.linkId, true));
+
+            break;
+        }
+
+        return super.prepForXml(context);
+    }
 }

src/file/drawing/drawing.spec.ts

@@ -1,13 +1,17 @@
 import { expect } from "chai";
+import { SinonStub, stub } from "sinon";
 
+import { IContext } from "@file/xml-components";
 import { Formatter } from "@export/formatter";
+import * as convenienceFunctions from "@util/convenience-functions";
 
+import { ConcreteHyperlink, TextRun } from "../";
 import { Drawing, IDrawingOptions } from "./drawing";
 
 const imageBase64Data = `iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAACzVBMVEUAAAAAAAAAAAAAAAA/AD8zMzMqKiokJCQfHx8cHBwZGRkuFxcqFSonJyckJCQiIiIfHx8eHh4cHBwoGhomGSYkJCQhISEfHx8eHh4nHR0lHBwkGyQjIyMiIiIgICAfHx8mHh4lHh4kHR0jHCMiGyIhISEgICAfHx8lHx8kHh4jHR0hHCEhISEgICAlHx8kHx8jHh4jHh4iHSIhHCEhISElICAkHx8jHx8jHh4iHh4iHSIhHSElICAkICAjHx8jHx8iHh4iHh4hHiEhHSEkICAjHx8iHx8iHx8hHh4hHiEkHSEjHSAjHx8iHx8iHx8hHh4kHiEkHiEjHSAiHx8hHx8hHh4kHiEjHiAjHSAiHx8iHx8hHx8kHh4jHiEjHiAjHiAiICAiHx8kHx8jHh4jHiEjHiAiHiAiHSAiHx8jHx8jHx8jHiAiHiAiHiAiHSAiHx8jHx8jHx8iHiAiHiAiHiAjHx8jHx8jHx8jHx8iHiAiHiAiHiAjHx8jHx8jHx8iHx8iHSAiHiAjHiAjHx8jHx8hHx8iHx8iHyAiHiAjHiAjHiAjHh4hHx8iHx8iHx8iHyAjHSAjHiAjHiAjHh4hHx8iHx8iHx8jHyAjHiAhHh4iHx8iHx8jHyAjHSAjHSAhHiAhHh4iHx8iHx8jHx8jHyAjHSAjHSAiHh4iHh4jHx8jHx8jHyAjHyAhHSAhHSAiHh4iHh4jHx8jHx8jHyAhHyAhHSAiHSAiHh4jHh4jHx8jHx8jHyAhHyAhHSAiHSAjHR4jHh4jHx8jHx8hHyAhHyAiHSAjHSAjHR4jHh4jHx8hHx8hHyAhHyAiHyAjHSAjHR4jHR4hHh4hHx8hHyAiHyAjHyAjHSAjHR4jHR4hHh4hHx8hHyAjHyAjHyAjHSAjHR4hHR4hHR4hHx8iHyAjHyAjHyAjHSAhHR4hHR4hHR4hHx8jHyAjHyAjHyAjHyC9S2xeAAAA7nRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFxgZGhscHR4fICEiIyQlJicoKSorLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZISUpLTE1OUFFSU1RVVllaW1xdXmBhYmNkZWZnaGprbG1ub3Byc3R1dnd4eXp8fn+AgYKDhIWGiImKi4yNj5CRkpOUlZaXmJmam5ydnp+goaKjpKaoqqusra6vsLGys7S1tri5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+fkZpVQAABcBJREFUGBntwftjlQMcBvDnnLNL22qzJjWlKLHFVogyty3SiFq6EZliqZGyhnSxsLlMRahYoZKRFcul5dKFCatYqWZaNKvWtrPz/A2+7/b27qRzec/lPfvl/XxgMplMJpPJZDKZAtA9HJ3ppnIez0KnSdtC0RCNznHdJrbrh85wdSlVVRaEXuoGamYi5K5430HNiTiEWHKJg05eRWgNfKeV7RxbqUhGKPV/207VupQ8is0IoX5vtFC18SqEHaK4GyHTZ2kzVR8PBTCO4oANIZL4ShNVZcOhKKeYg9DoWdhI1ec3os2VFI0JCIUez5+i6st0qJZRrEAIJCw+QdW223BG/EmKwTBc/IJ/qfp2FDrkUnwFo8U9dZyqnaPhxLqfYjyM1S3vb6p+GGOBszsojoTDSDFz6qj66R4LzvYJxVMwUNRjf1H1ywQr/megg2RzLximy8waqvbda8M5iijegVEiHjlM1W/3h+FcXesphsMY4dMOUnUgOxyuPEzxPQwRNvV3qg5Nj4BreyimwADWe/dRVTMjEm6MoGLzGwtystL6RyOY3qSqdlYU3FpLZw1VW0sK5943MvUCKwJ1noNtjs6Ohge76Zq9ZkfpigU5WWkDYuCfbs1U5HWFR8/Qq4a9W0uK5k4ZmdrTCl8spGIePLPlbqqsc1Afe83O0hULc8alDYiBd7ZyitYMeBfR55rR2fOKP6ioPk2dGvZ+UVI0d8rtqT2tcCexlqK2F3wRn5Q+YVbBqrLKOupkr9lZujAOrmS0UpTb4JeIPkNHZ+cXr6uoPk2vyuBSPhWLEKj45PQJuQWryyqP0Z14uGLdROHIRNBEXDR09EP5r62rOHCazhrD4VKPwxTH+sIA3ZPTJ+YuWV22n+IruHFDC8X2CBjnPoolcGc2FYUwzmsUWXDHsoGKLBhmN0VvuBVfTVE/AAbpaid5CB4MbaLY1QXGuIViLTyZQcVyGGMuxWPwaA0Vk2GI9RRp8Ci2iuLkIBjhT5LNUfAspZFiTwyC72KK7+DNg1SsRvCNp3gZXq2k4iEEXSHFJHgVXUlxejCCbTvFAHiXdIJiXxyCK7KJ5FHoMZGK9xBcwyg2QpdlVMxEUM2iyIMuXXZQNF+HswxMsSAAJRQjoE//eoqDCXBSTO6f1xd+O0iyNRY6jaWi1ALNYCocZROj4JdEikroVkjFk9DcStXxpdfCD2MoXodu4RUU9ptxxmXssOfxnvDVcxRTod9FxyhqLoAqis5aPhwTDp9spRgEH2Q6KLbYoKqlaKTm6Isp0C/sJMnjFvhiERXPQvUNRe9p29lhR04CdBpC8Sl8YiuncIxEuzUUg4Dkgj+paVozygY9plPMh28SaymO9kabAopREGF3vt9MzeFFl8G7lRSZ8FFGK8XX4VA8QjEd7XrM3M0OXz8YCy+qKBLgq3wqnofiTorF0Ax56Rg1J1elW+BBAsVe+My6iYq7IK6keBdOIseV2qn5Pb8f3MqkWAXf9ThM8c8lAOIotuFsF875lRrH5klRcG0+xcPwQ1oLxfeRAP4heQTnGL78X2rqlw2DK59SXAV/zKaiGMAuko5InCt68mcOan5+ohf+z1pP8lQY/GHZQMV4YD3FpXDp4qerqbF/lBWBswyi+AL+ia+maLgcRRQj4IYlY/UpauqKBsPJAxQF8NM1TRQ/RudSPAD34rK3scOuR8/HGcspxsJfOVS8NZbiGXiUtPgINU3v3WFDmx8pEuG3EiqKKVbCC1vm2iZqap5LAtCtleQf8F9sFYWDohzeJczYyQ4V2bEZFGsQgJRGqqqhS2phHTWn9lDkIhBTqWqxQZ+IsRvtdHY9AvI2VX2hW68nfqGmuQsCEl3JdjfCF8OW1bPdtwhQ0gm2mQzfRE3a7KCYj0BNZJs8+Kxf/r6WtTEI2FIqlsMfFgRB5A6KUnSe/vUkX0AnuvUIt8SjM1m6wWQymUwmk8lkMgXRf5vi8rLQxtUhAAAAAElFTkSuQmCC`;
 
-function createDrawing(drawingOptions?: IDrawingOptions): Drawing {
-    return new Drawing(
+const createDrawing = (drawingOptions?: IDrawingOptions): Drawing =>
+    new Drawing(
         {
             fileName: "test.jpg",
             stream: Buffer.from(imageBase64Data, "base64"),
@@ -24,9 +28,16 @@ function createDrawing(drawingOptions?: IDrawingOptions): Drawing {
         },
         drawingOptions,
     );
-}
 
 describe("Drawing", () => {
+    before(() => {
+        stub(convenienceFunctions, "uniqueNumericId").callsFake(() => 0);
+    });
+
+    after(() => {
+        (convenienceFunctions.uniqueNumericId as SinonStub).restore();
+    });
+
     let currentBreak: Drawing;
 
     describe("#constructor()", () => {
@@ -69,6 +80,7 @@ describe("Drawing", () => {
                                         descr: "",
                                         id: 0,
                                         name: "",
+                                        title: "",
                                     },
                                 },
                             },
@@ -299,6 +311,7 @@ describe("Drawing", () => {
                                         descr: "",
                                         id: 0,
                                         name: "",
+                                        title: "",
                                     },
                                 },
                             },
@@ -439,5 +452,257 @@ describe("Drawing", () => {
                 ],
             });
         });
+
+        it("should create a drawing with a hyperlink", () => {
+            currentBreak = createDrawing({
+                floating: {
+                    horizontalPosition: {
+                        offset: 0,
+                    },
+                    verticalPosition: {
+                        offset: 0,
+                    },
+                },
+            });
+            const tree = new Formatter().format(currentBreak, {
+                stack: [new ConcreteHyperlink([new TextRun("Test")], "1")],
+            } as unknown as IContext);
+            expect(tree).to.deep.equal({
+                "w:drawing": [
+                    {
+                        "wp:anchor": [
+                            {
+                                _attr: {
+                                    allowOverlap: "1",
+                                    behindDoc: "0",
+                                    distB: 0,
+                                    distL: 0,
+                                    distR: 0,
+                                    distT: 0,
+                                    layoutInCell: "1",
+                                    locked: "0",
+                                    relativeHeight: 952500,
+                                    simplePos: "0",
+                                },
+                            },
+                            {
+                                "wp:simplePos": {
+                                    _attr: {
+                                        x: 0,
+                                        y: 0,
+                                    },
+                                },
+                            },
+                            {
+                                "wp:positionH": [
+                                    {
+                                        _attr: {
+                                            relativeFrom: "page",
+                                        },
+                                    },
+                                    {
+                                        "wp:posOffset": ["0"],
+                                    },
+                                ],
+                            },
+                            {
+                                "wp:positionV": [
+                                    {
+                                        _attr: {
+                                            relativeFrom: "page",
+                                        },
+                                    },
+                                    {
+                                        "wp:posOffset": ["0"],
+                                    },
+                                ],
+                            },
+                            {
+                                "wp:extent": {
+                                    _attr: {
+                                        cx: 952500,
+                                        cy: 952500,
+                                    },
+                                },
+                            },
+                            {
+                                "wp:effectExtent": {
+                                    _attr: {
+                                        b: 0,
+                                        l: 0,
+                                        r: 0,
+                                        t: 0,
+                                    },
+                                },
+                            },
+                            {
+                                "wp:wrapNone": {},
+                            },
+                            {
+                                "wp:docPr": [
+                                    {
+                                        _attr: {
+                                            descr: "",
+                                            id: 0,
+                                            name: "",
+                                            title: "",
+                                        },
+                                    },
+                                    {
+                                        "a:hlinkClick": {
+                                            _attr: {
+                                                "r:id": "rId1",
+                                                "xmlns:a": "http://schemas.openxmlformats.org/drawingml/2006/main",
+                                            },
+                                        },
+                                    },
+                                ],
+                            },
+                            {
+                                "wp:cNvGraphicFramePr": [
+                                    {
+                                        "a:graphicFrameLocks": {
+                                            _attr: {
+                                                // tslint:disable-next-line:object-literal-key-quotes
+                                                noChangeAspect: 1,
+                                                "xmlns:a": "http://schemas.openxmlformats.org/drawingml/2006/main",
+                                            },
+                                        },
+                                    },
+                                ],
+                            },
+                            {
+                                "a:graphic": [
+                                    {
+                                        _attr: {
+                                            "xmlns:a": "http://schemas.openxmlformats.org/drawingml/2006/main",
+                                        },
+                                    },
+                                    {
+                                        "a:graphicData": [
+                                            {
+                                                _attr: {
+                                                    uri: "http://schemas.openxmlformats.org/drawingml/2006/picture",
+                                                },
+                                            },
+                                            {
+                                                "pic:pic": [
+                                                    {
+                                                        _attr: {
+                                                            "xmlns:pic": "http://schemas.openxmlformats.org/drawingml/2006/picture",
+                                                        },
+                                                    },
+                                                    {
+                                                        "pic:nvPicPr": [
+                                                            {
+                                                                "pic:cNvPr": [
+                                                                    {
+                                                                        _attr: {
+                                                                            descr: "",
+                                                                            id: 0,
+                                                                            name: "",
+                                                                        },
+                                                                    },
+                                                                    {
+                                                                        "a:hlinkClick": {
+                                                                            _attr: {
+                                                                                "r:id": "rId1",
+                                                                            },
+                                                                        },
+                                                                    },
+                                                                ],
+                                                            },
+                                                            {
+                                                                "pic:cNvPicPr": [
+                                                                    {
+                                                                        "a:picLocks": {
+                                                                            _attr: {
+                                                                                noChangeArrowheads: 1,
+                                                                                noChangeAspect: 1,
+                                                                            },
+                                                                        },
+                                                                    },
+                                                                ],
+                                                            },
+                                                        ],
+                                                    },
+                                                    {
+                                                        "pic:blipFill": [
+                                                            {
+                                                                "a:blip": {
+                                                                    _attr: {
+                                                                        // tslint:disable-next-line:object-literal-key-quotes
+                                                                        cstate: "none",
+                                                                        "r:embed": "rId{test.jpg}",
+                                                                    },
+                                                                },
+                                                            },
+                                                            {
+                                                                "a:srcRect": {},
+                                                            },
+                                                            {
+                                                                "a:stretch": [
+                                                                    {
+                                                                        "a:fillRect": {},
+                                                                    },
+                                                                ],
+                                                            },
+                                                        ],
+                                                    },
+                                                    {
+                                                        "pic:spPr": [
+                                                            {
+                                                                _attr: {
+                                                                    bwMode: "auto",
+                                                                },
+                                                            },
+                                                            {
+                                                                "a:xfrm": [
+                                                                    {
+                                                                        _attr: {},
+                                                                    },
+                                                                    {
+                                                                        "a:off": {
+                                                                            _attr: {
+                                                                                x: 0,
+                                                                                y: 0,
+                                                                            },
+                                                                        },
+                                                                    },
+                                                                    {
+                                                                        "a:ext": {
+                                                                            _attr: {
+                                                                                cx: 952500,
+                                                                                cy: 952500,
+                                                                            },
+                                                                        },
+                                                                    },
+                                                                ],
+                                                            },
+                                                            {
+                                                                "a:prstGeom": [
+                                                                    {
+                                                                        _attr: {
+                                                                            prst: "rect",
+                                                                        },
+                                                                    },
+                                                                    {
+                                                                        "a:avLst": {},
+                                                                    },
+                                                                ],
+                                                            },
+                                                        ],
+                                                    },
+                                                ],
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            });
+        });
     });
 });

src/file/drawing/drawing.ts

@@ -1,6 +1,8 @@
 import { IMediaData } from "@file/media";
 import { XmlComponent } from "@file/xml-components";
+
 import { Anchor } from "./anchor";
+import { DocPropertiesOptions } from "./doc-properties/doc-properties";
 import { IFloating } from "./floating";
 import { Inline } from "./inline";
 
@@ -13,6 +15,7 @@ export interface IDistance {
 
 export interface IDrawingOptions {
     readonly floating?: IFloating;
+    readonly docProperties?: DocPropertiesOptions;
 }
 
 // <xsd:complexType name="CT_Drawing">
@@ -25,11 +28,15 @@ export interface IDrawingOptions {
 export class Drawing extends XmlComponent {
     private readonly inline: Inline;
 
-    constructor(imageData: IMediaData, drawingOptions: IDrawingOptions = {}) {
+    public constructor(imageData: IMediaData, drawingOptions: IDrawingOptions = {}) {
         super("w:drawing");
 
         if (!drawingOptions.floating) {
-            this.inline = new Inline(imageData, imageData.transformation);
+            this.inline = new Inline({
+                mediaData: imageData,
+                transform: imageData.transformation,
+                docProperties: drawingOptions.docProperties,
+            });
             this.root.push(this.inline);
         } else {
             this.root.push(new Anchor(imageData, imageData.transformation, drawingOptions));

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

@@ -2,7 +2,7 @@ import { XmlComponent } from "@file/xml-components";
 import { EffectExtentAttributes } from "./effect-extent-attributes";
 
 export class EffectExtent extends XmlComponent {
-    constructor() {
+    public constructor() {
         super("wp:effectExtent");
 
         this.root.push(

src/file/drawing/extent/extent.ts

@@ -5,7 +5,7 @@ import { ExtentAttributes } from "./extent-attributes";
 export class Extent extends XmlComponent {
     private readonly attributes: ExtentAttributes;
 
-    constructor(x: number, y: number) {
+    public constructor(x: number, y: number) {
         super("wp:extent");
 
         this.attributes = new ExtentAttributes({

src/file/drawing/floating/align.ts

@@ -3,7 +3,7 @@ import { HorizontalPositionAlign, VerticalPositionAlign } from "@file/shared/ali
 import { XmlComponent } from "@file/xml-components";
 
 export class Align extends XmlComponent {
-    constructor(value: HorizontalPositionAlign | VerticalPositionAlign) {
+    public constructor(value: HorizontalPositionAlign | VerticalPositionAlign) {
         super("wp:align");
         this.root.push(value);
     }