Add styles to footnote

src/file/footnotes/footnote/footnote.ts

@@ -1,6 +1,7 @@
 import { XmlComponent } from "file/xml-components";
 import { Paragraph } from "../../paragraph";
 import { FootnoteAttributes } from "./footnote-attributes";
+import { FootnoteRefRun } from "./run/footnote-ref-run";
 
 export class FootNote extends XmlComponent {
     constructor(id: number, type?: string) {
@@ -14,6 +15,7 @@ export class FootNote extends XmlComponent {
     }
 
     public addParagraph(paragraph: Paragraph): void {
+        paragraph.addRunToFront(new FootnoteRefRun());
         this.root.push(paragraph);
     }
 }

src/file/footnotes/footnote/run/footnote-ref-run.ts

@@ -0,0 +1,11 @@
+import { Run } from "file/paragraph";
+import { FootnoteRef } from "./footnote-ref";
+
+export class FootnoteRefRun extends Run {
+    constructor() {
+        super();
+
+        this.style("FootnoteReference");
+        this.root.push(new FootnoteRef());
+    }
+}

src/file/footnotes/footnote/run/footnote-ref.ts

@@ -0,0 +1,7 @@
+import { XmlComponent } from "file/xml-components";
+
+export class FootnoteRef extends XmlComponent {
+    constructor() {
+        super("w:footnoteRef");
+    }
+}

src/file/paragraph/paragraph.ts

@@ -187,4 +187,9 @@ export class Paragraph extends XmlComponent {
         this.root.push(new FootnoteReferenceRun(id));
         return this;
     }
+
+    public addRunToFront(run: Run): Paragraph {
+        this.root.splice(1, 0, run);
+        return this;
+    }
 }

src/file/styles/factory.ts

@@ -3,6 +3,9 @@ import { Color, Italics, Size } from "../paragraph/run/formatting";
 import { Styles } from "./";
 
 import {
+    FootnoteReferenceStyle,
+    FootnoteText,
+    FootnoteTextChar,
     Heading1Style,
     Heading2Style,
     Heading3Style,
@@ -65,6 +68,16 @@ export class DefaultStylesFactory {
 
         const hyperLinkStyle = new HyperlinkStyle();
         styles.push(hyperLinkStyle);
+
+        const footnoteReferenceStyle = new FootnoteReferenceStyle();
+        styles.push(footnoteReferenceStyle);
+
+        const footnoteTextStyle = new FootnoteText();
+        styles.push(footnoteTextStyle);
+
+        const footnoteTextCharStyle = new FootnoteTextChar();
+        styles.push(footnoteTextCharStyle);
+
         return styles;
     }
 }

src/file/styles/style/components.ts

@@ -44,7 +44,11 @@ export class UiPriority extends XmlComponent {
     }
 }
 
-export class UnhideWhenUsed extends XmlComponent {}
+export class UnhideWhenUsed extends XmlComponent {
+    constructor() {
+        super("w:unhideWhenUsed");
+    }
+}
 
 export class QuickFormat extends XmlComponent {
     constructor() {
@@ -56,4 +60,8 @@ export class TableProperties extends XmlComponent {}
 
 export class RsId extends XmlComponent {}
 
-export class SemiHidden extends XmlComponent {}
+export class SemiHidden extends XmlComponent {
+    constructor() {
+        super("w:semiHidden");
+    }
+}

src/file/styles/style/index.ts

@@ -3,7 +3,7 @@ import * as paragraph from "../../paragraph";
 import * as formatting from "../../paragraph/run/formatting";
 import { RunProperties } from "../../paragraph/run/properties";
 
-import { BasedOn, Name, Next, QuickFormat, UiPriority, UnhideWhenUsed } from "./components";
+import { BasedOn, Link, Name, Next, QuickFormat, SemiHidden, UiPriority, UnhideWhenUsed } from "./components";
 
 export interface IStyleAttributes {
     type?: string;
@@ -258,7 +258,7 @@ export class CharacterStyle extends Style {
         this.runProperties = new RunProperties();
         this.root.push(this.runProperties);
         this.root.push(new UiPriority("99"));
-        this.root.push(new UnhideWhenUsed(""));
+        this.root.push(new UnhideWhenUsed());
     }
 
     public basedOn(parentId: string): CharacterStyle {
@@ -279,6 +279,11 @@ export class CharacterStyle extends Style {
         this.addRunProperty(new formatting.Underline(underlineType, color));
         return this;
     }
+
+    public size(twips: number): CharacterStyle {
+        this.addRunProperty(new formatting.Size(twips));
+        return this;
+    }
 }
 
 export class HyperlinkStyle extends CharacterStyle {
@@ -289,3 +294,49 @@ export class HyperlinkStyle extends CharacterStyle {
             .underline("single");
     }
 }
+
+export class FootnoteReferenceStyle extends Style {
+    private readonly runProperties: RunProperties;
+
+    constructor() {
+        super({ type: "character", styleId: "FootnoteReference" });
+        this.root.push(new Name("footnote reference"));
+        this.root.push(new BasedOn("DefaultParagraphFont"));
+        this.root.push(new UiPriority("99"));
+        this.root.push(new SemiHidden());
+        this.root.push(new UnhideWhenUsed());
+
+        this.runProperties = new RunProperties();
+        this.runProperties.addChildElement(new formatting.SuperScript());
+        this.root.push(this.runProperties);
+    }
+}
+
+export class FootnoteText extends ParagraphStyle {
+    constructor() {
+        super("FootnoteText");
+        this.root.push(new Name("footnote text"));
+        this.root.push(new BasedOn("Normal"));
+        this.root.push(new Link("FootnoteTextChar"));
+        this.root.push(new UiPriority("99"));
+        this.root.push(new SemiHidden());
+        this.root.push(new UnhideWhenUsed());
+        this.spacing({
+            after: 0,
+            line: 240,
+            lineRule: "auto",
+        });
+        this.size(20);
+    }
+}
+
+export class FootnoteTextChar extends CharacterStyle {
+    constructor() {
+        super("FootnoteTextChar", "Footnote Text Char");
+        this.basedOn("DefaultParagraphFont");
+        this.root.push(new Link("FootnoteText"));
+        this.root.push(new UiPriority("99"));
+        this.root.push(new SemiHidden());
+        this.size(20);
+    }
+}