Add image to run

demo/demo23.js

@@ -15,6 +15,9 @@ const image5 = docx.Media.addImage(doc, "./demo/images/pizza.gif");
 const imageBase64Data = `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`
 const image6 = docx.Media.addImageFromBuffer(doc, Buffer.from(imageBase64Data, 'base64'), 100, 100);
 
+// I am adding an image to the paragraph rather than the document to make the image inline
+paragraph.addImage(image5);
+
 doc.addImage(image);
 doc.addImage(image2);
 doc.addImage(image3);

src/file/file.ts

@@ -7,9 +7,9 @@ import { SectionPropertiesOptions } from "./document/body/section-properties/sec
 import { FooterWrapper } from "./footer-wrapper";
 import { FootNotes } from "./footnotes";
 import { HeaderWrapper } from "./header-wrapper";
-import { Media } from "./media";
+import { Image, Media } from "./media";
 import { Numbering } from "./numbering";
-import { Bookmark, Hyperlink, Image, Paragraph } from "./paragraph";
+import { Bookmark, Hyperlink, Paragraph } from "./paragraph";
 import { Relationships } from "./relationships";
 import { Styles } from "./styles";
 import { ExternalStylesFactory } from "./styles/external-styles-factory";
@@ -126,19 +126,19 @@ export class File {
 
     public createImage(filePath: string): Image {
         const image = Media.addImage(this, filePath);
-        this.document.addParagraph(image);
+        this.document.addParagraph(image.Paragraph);
 
         return image;
     }
 
     public addImage(image: Image): File {
-        this.document.addParagraph(image);
+        this.document.addParagraph(image.Paragraph);
         return this;
     }
 
     public createImageFromBuffer(buffer: Buffer, width?: number, height?: number): Image {
         const image = Media.addImageFromBuffer(this, buffer, width, height);
-        this.document.addParagraph(image);
+        this.document.addParagraph(image.Paragraph);
 
         return image;
     }

src/file/footer-wrapper.ts

@@ -1,7 +1,7 @@
 import { XmlComponent } from "file/xml-components";
 import { Footer } from "./footer/footer";
-import { Media } from "./media";
+import { Image, Media } from "./media";
-import { Image, Paragraph } from "./paragraph";
+import { ImageParagraph, Paragraph } from "./paragraph";
 import { Relationships } from "./relationships";
 import { Table } from "./table";
 
@@ -43,11 +43,11 @@ export class FooterWrapper {
             "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image",
             `media/${mediaData.fileName}`,
         );
-        this.addImage(new Image(mediaData));
+        this.addImage(new Image(new ImageParagraph(mediaData)));
     }
 
     public addImage(image: Image): FooterWrapper {
-        this.footer.addParagraph(image);
+        this.footer.addParagraph(image.Paragraph);
         return this;
     }
 

src/file/header-wrapper.ts

@@ -1,7 +1,7 @@
 import { XmlComponent } from "file/xml-components";
 import { Header } from "./header/header";
-import { Media } from "./media";
+import { Image, Media } from "./media";
-import { Image, Paragraph } from "./paragraph";
+import { ImageParagraph, Paragraph } from "./paragraph";
 import { Relationships } from "./relationships";
 import { Table } from "./table";
 
@@ -43,11 +43,11 @@ export class HeaderWrapper {
             "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image",
             `media/${mediaData.fileName}`,
         );
-        this.addImage(new Image(mediaData));
+        this.addImage(new Image(new ImageParagraph(mediaData)));
     }
 
     public addImage(image: Image): HeaderWrapper {
-        this.header.addParagraph(image);
+        this.header.addParagraph(image.Paragraph);
         return this;
     }
 

src/file/media/image.ts

@@ -0,0 +1,13 @@
+import { ImageParagraph, PictureRun } from "../paragraph";
+
+export class Image {
+    constructor(private readonly paragraph: ImageParagraph) {}
+
+    public get Paragraph(): ImageParagraph {
+        return this.paragraph;
+    }
+
+    public get Run(): PictureRun {
+        return this.paragraph.Run;
+    }
+}

src/file/media/index.ts

@@ -1,2 +1,3 @@
 export * from "./media";
 export * from "./data";
+export * from "./image";

src/file/media/media.ts

@@ -3,8 +3,9 @@ import * as sizeOf from "image-size";
 import * as path from "path";
 
 import { File } from "../file";
-import { Image } from "../paragraph";
+import { ImageParagraph } from "../paragraph";
 import { IMediaData } from "./data";
+import { Image } from "./image";
 
 interface IHackedFile {
     currentRelationshipId: number;
@@ -20,7 +21,7 @@ export class Media {
             "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image",
             `media/${mediaData.fileName}`,
         );
-        return new Image(mediaData);
+        return new Image(new ImageParagraph(mediaData));
     }
 
     public static addImageFromBuffer(file: File, buffer: Buffer, width?: number, height?: number): Image {
@@ -39,7 +40,7 @@ export class Media {
             `media/${mediaData.fileName}`,
         );
 
-        return new Image(mediaData);
+        return new Image(new ImageParagraph(mediaData));
     }
 
     private static generateId(): string {

src/file/paragraph/image.ts

@@ -3,7 +3,7 @@ import { IMediaData } from "../media";
 import { Paragraph } from "./paragraph";
 import { PictureRun } from "./run";
 
-export class Image extends Paragraph {
+export class ImageParagraph extends Paragraph {
     private readonly pictureRun: PictureRun;
 
     constructor(imageData: IMediaData, drawingOptions?: IDrawingOptions) {
@@ -15,4 +15,8 @@ export class Image extends Paragraph {
     public scale(factorX: number, factorY?: number): void {
         this.pictureRun.scale(factorX, factorY);
     }
+
+    public get Run(): PictureRun {
+        return this.pictureRun;
+    }
 }

src/file/paragraph/paragraph.ts

@@ -1,6 +1,6 @@
 // http://officeopenxml.com/WPparagraph.php
 import { FootnoteReferenceRun } from "file/footnotes/footnote/run/reference-run";
-import { IMediaData } from "file/media";
+import { Image } from "file/media";
 import { Num } from "file/numbering/num";
 import { XmlComponent } from "file/xml-components";
 
@@ -54,9 +54,10 @@ export class Paragraph extends XmlComponent {
         return run;
     }
 
-    public createPictureRun(imageData: IMediaData): PictureRun {
+    public addImage(image: Image): PictureRun {
-        const run = new PictureRun(imageData);
+        const run = image.Run;
         this.addRun(run);
+
         return run;
     }