Merge pull request #669 from dolanmiu/feat/background-color

Add shading to paragraph

demo/46-shading-text.ts

@@ -28,6 +28,18 @@ doc.addSection({
                         }),
                     ],
                 }),
+                new Paragraph({
+                    shading: {
+                        type: ShadingType.DIAGONAL_CROSS,
+                        color: "00FFFF",
+                        fill: "FF0000",
+                    },
+                    children: [
+                        new TextRun({
+                            text: "Hello World for entire paragraph",
+                        }),
+                    ],
+                }),
             ],
         }),
     },

docs/usage/paragraph.md

@@ -142,6 +142,21 @@ const paragraph = new Paragraph({
 });
 ```
 
+## Shading
+
+Add color to an entire paragraph block
+
+```ts
+const paragraph = new Paragraph({
+    text: "shading",
+    shading: {
+        type: ShadingType.REVERSE_DIAGONAL_STRIPE,
+        color: "00FFFF",
+        fill: "FF0000",
+    },
+});
+```
+
 ## Spacing
 
 Adding spacing between paragraphs

docs/usage/text.md

@@ -77,40 +77,78 @@ const text = new TextRun({
 });
 ```
 
+### Shading and Highlighting
+
+```ts
+const text = new TextRun({
+    text: "shading",
+    shading: {
+        type: ShadingType.REVERSE_DIAGONAL_STRIPE,
+        color: "00FFFF",
+        fill: "FF0000",
+    },
+});
+```
+
+```ts
+const text = new TextRun({
+    text: "highlighting",
+    highlight: "yellow",
+});
+```
+
 ### Strike through
 
 ```ts
-text.strike();
+const text = new TextRun({
+    text: "strike",
+    strike: true,
+});
 ```
 
 ### Double strike through
 
 ```ts
-text.doubleStrike();
+const text = new TextRun({
+    text: "doubleStrike",
+    doubleStrike: true,
+});
 ```
 
 ### Superscript
 
 ```ts
-text.superScript();
+const text = new TextRun({
+    text: "superScript",
+    superScript: true,
+});
 ```
 
 ### Subscript
 
 ```ts
-text.subScript();
+const text = new TextRun({
+    text: "subScript",
+    subScript: true,
+});
 ```
 
 ### All Capitals
 
 ```ts
-text.allCaps();
+const text = new TextRun({
+    text: "allCaps",
+    allCaps: true,
+});
 ```
 
 ### Small Capitals
 
 ```ts
-text.smallCaps();
+const text = new TextRun({
+    text: "smallCaps",
+    smallCaps: true,
+});
 ```
 
 ## Break
@@ -118,13 +156,8 @@ text.smallCaps();
 Sometimes you would want to put text underneath another line of text but inside the same paragraph.
 
 ```ts
-text.break();
-```
-
-## Chaining
-
-What if you want to create a paragraph which is **_bold_** and **_italic_**?
-
-```ts
-paragraph.bold().italics();
+const text = new TextRun({
+    text: "break",
+    break: true,
+});
 ```

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

@@ -12,19 +12,19 @@ describe("DocumentBackground", () => {
             expect(tree).to.deep.equal({
                 "w:background": {
                     _attr: {
-                        "w:color": "auto",
+                        "w:color": "FFFFFF",
                     },
                 },
             });
         });
 
         it("should create a DocumentBackground with no options and set color to value", () => {
-            const documentBackground = new DocumentBackground({ color: "ffffff" });
+            const documentBackground = new DocumentBackground({ color: "ffff00" });
             const tree = new Formatter().format(documentBackground);
             expect(tree).to.deep.equal({
                 "w:background": {
                     _attr: {
-                        "w:color": "ffffff",
+                        "w:color": "ffff00",
                     },
                 },
             });
@@ -32,7 +32,7 @@ describe("DocumentBackground", () => {
 
         it("should create a DocumentBackground with no options and set other values", () => {
             const documentBackground = new DocumentBackground({
-                color: "ffffff",
+                color: "ffff00",
                 themeColor: "test",
                 themeShade: "test",
                 themeTint: "test",
@@ -41,7 +41,7 @@ describe("DocumentBackground", () => {
             expect(tree).to.deep.equal({
                 "w:background": {
                     _attr: {
-                        "w:color": "ffffff",
+                        "w:color": "ffff00",
                         "w:themeColor": "test",
                         "w:themeShade": "test",
                         "w:themeTint": "test",

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

@@ -29,7 +29,7 @@ export class DocumentBackground extends XmlComponent {
 
         this.root.push(
             new DocumentBackgroundAttributes({
-                color: options.color ? options.color : "auto",
+                color: options.color ? options.color : "FFFFFF",
                 themeColor: options.themeColor,
                 themeShade: options.themeShade,
                 themeTint: options.themeTint,

src/file/document/document.spec.ts

@@ -41,7 +41,7 @@ describe("Document", () => {
                     {
                         "w:background": {
                             _attr: {
-                                "w:color": "auto",
+                                "w:color": "FFFFFF",
                             },
                         },
                     },

src/file/paragraph/paragraph.spec.ts

@@ -6,6 +6,7 @@ import { Formatter } from "export/formatter";
 import { EMPTY_OBJECT } from "file/xml-components";
 
 import { File } from "../file";
+import { ShadingType } from "../table/shading";
 import { AlignmentType, HeadingLevel, LeaderType, PageBreak, TabStopPosition, TabStopType } from "./formatting";
 import { Bookmark, HyperlinkRef } from "./links";
 import { Paragraph } from "./paragraph";
@@ -761,6 +762,36 @@ describe("Paragraph", () => {
         });
     });
 
+    describe("#shading", () => {
+        it("should set paragraph outline level to the given value", () => {
+            const paragraph = new Paragraph({
+                shading: {
+                    type: ShadingType.REVERSE_DIAGONAL_STRIPE,
+                    color: "00FFFF",
+                    fill: "FF0000",
+                },
+            });
+            const tree = new Formatter().format(paragraph);
+            expect(tree).to.deep.equal({
+                "w:p": [
+                    {
+                        "w:pPr": [
+                            {
+                                "w:shd": {
+                                    _attr: {
+                                        "w:color": "00FFFF",
+                                        "w:fill": "FF0000",
+                                        "w:val": "reverseDiagStripe",
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                ],
+            });
+        });
+    });
+
     describe("#prepForXml", () => {
         it("should set paragraph outline level to the given value", () => {
             const paragraph = new Paragraph({

src/file/paragraph/properties.ts

@@ -1,5 +1,6 @@
 // http://officeopenxml.com/WPparagraphProperties.php
 import { IgnoreIfEmptyXmlComponent, XmlComponent } from "file/xml-components";
+import { ShadingType } from "../table/shading";
 import { Alignment, AlignmentType } from "./formatting/alignment";
 import { Bidirectional } from "./formatting/bidirectional";
 import { Border, IBorderOptions, ThematicBreak } from "./formatting/border";
@@ -11,6 +12,7 @@ import { HeadingLevel, Style } from "./formatting/style";
 import { LeaderType, TabStop, TabStopPosition, TabStopType } from "./formatting/tab-stop";
 import { NumberProperties } from "./formatting/unordered-list";
 import { OutlineLevel } from "./links";
+import { Shading } from "./run/formatting";
 
 export interface IParagraphStylePropertiesOptions {
     readonly alignment?: AlignmentType;
@@ -44,6 +46,11 @@ export interface IParagraphPropertiesOptions extends IParagraphStylePropertiesOp
         readonly level: number;
         readonly custom?: boolean;
     };
+    readonly shading?: {
+        readonly type: ShadingType;
+        readonly fill: string;
+        readonly color: string;
+    };
 }
 
 export class ParagraphProperties extends IgnoreIfEmptyXmlComponent {
@@ -131,6 +138,10 @@ export class ParagraphProperties extends IgnoreIfEmptyXmlComponent {
         if (options.leftTabStop) {
             this.push(new TabStop(TabStopType.LEFT, options.leftTabStop));
         }
+
+        if (options.shading) {
+            this.push(new Shading(options.shading.type, options.shading.fill, options.shading.color));
+        }
     }
 
     public push(item: XmlComponent): void {