smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add SVG image suport (#2487)

Browse Source 
* Add SVG blip extentions

* SVG Image feature now works

* Add and simplify tests

* Fix falsey issue with file

Write tests
100% Coverage
This commit is contained in:
Dolan
2023-12-31 18:54:35 +00:00
committed by GitHub
parent 7570fc2bf5
commit 24c159de37
27 changed files with 615 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/file/content-types/content-types.spec.ts
View File

@ -25,12 +25,13 @@ describe("ContentTypes", () => {
expect(tree["Types"][3]).to.deep.equal({ Default: { _attr: { ContentType: "image/jpeg", Extension: "jpg" } } });
expect(tree["Types"][4]).to.deep.equal({ Default: { _attr: { ContentType: "image/bmp", Extension: "bmp" } } });
expect(tree["Types"][5]).to.deep.equal({ Default: { _attr: { ContentType: "image/gif", Extension: "gif" } } });
expect(tree["Types"][6]).to.deep.equal({
expect(tree["Types"][6]).to.deep.equal({ Default: { _attr: { ContentType: "image/svg+xml", Extension: "svg" } } });
expect(tree["Types"][7]).to.deep.equal({
Default: { _attr: { ContentType: "application/vnd.openxmlformats-package.relationships+xml", Extension: "rels" } },
});
expect(tree["Types"][7]).to.deep.equal({ Default: { _attr: { ContentType: "application/xml", Extension: "xml" } } });
expect(tree["Types"][8]).to.deep.equal({ Default: { _attr: { ContentType: "application/xml", Extension: "xml" } } });
expect(tree["Types"][8]).to.deep.equal({
expect(tree["Types"][9]).to.deep.equal({
Default: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.obfuscatedFont",
@ -38,7 +39,7 @@ describe("ContentTypes", () => {
},
},
});
expect(tree["Types"][9]).to.deep.equal({
expect(tree["Types"][10]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml",
@ -46,7 +47,7 @@ describe("ContentTypes", () => {
},
},
});
expect(tree["Types"][10]).to.deep.equal({
expect(tree["Types"][11]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml",
@ -54,7 +55,7 @@ describe("ContentTypes", () => {
},
},
});
expect(tree["Types"][11]).to.deep.equal({
expect(tree["Types"][12]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-package.core-properties+xml",
@ -62,7 +63,7 @@ describe("ContentTypes", () => {
},
},
});
expect(tree["Types"][12]).to.deep.equal({
expect(tree["Types"][13]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.custom-properties+xml",
@ -70,7 +71,7 @@ describe("ContentTypes", () => {
},
},
});
expect(tree["Types"][13]).to.deep.equal({
expect(tree["Types"][14]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.extended-properties+xml",
@ -78,7 +79,7 @@ describe("ContentTypes", () => {
},
},
});
expect(tree["Types"][14]).to.deep.equal({
expect(tree["Types"][15]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.numbering+xml",
@ -86,7 +87,7 @@ describe("ContentTypes", () => {
},
},
});
expect(tree["Types"][15]).to.deep.equal({
expect(tree["Types"][16]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml",
@ -94,7 +95,7 @@ describe("ContentTypes", () => {
},
},
});
expect(tree["Types"][16]).to.deep.equal({
expect(tree["Types"][17]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.settings+xml",
@ -111,7 +112,7 @@ describe("ContentTypes", () => {
contentTypes.addFooter(102);
const tree = new Formatter().format(contentTypes);
expect(tree["Types"][19]).to.deep.equal({
expect(tree["Types"][20]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.footer+xml",
@ -120,7 +121,7 @@ describe("ContentTypes", () => {
},
});
expect(tree["Types"][20]).to.deep.equal({
expect(tree["Types"][21]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.footer+xml",
@ -137,7 +138,7 @@ describe("ContentTypes", () => {
contentTypes.addHeader(202);
const tree = new Formatter().format(contentTypes);
expect(tree["Types"][19]).to.deep.equal({
expect(tree["Types"][20]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.header+xml",
@ -146,7 +147,7 @@ describe("ContentTypes", () => {
},
});
expect(tree["Types"][20]).to.deep.equal({
expect(tree["Types"][21]).to.deep.equal({
Override: {
_attr: {
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.header+xml",

1
src/file/content-types/content-types.ts
View File

@ -18,6 +18,7 @@ export class ContentTypes extends XmlComponent {
this.root.push(new Default("image/jpeg", "jpg"));
this.root.push(new Default("image/bmp", "bmp"));
this.root.push(new Default("image/gif", "gif"));
this.root.push(new Default("image/svg+xml", "svg"));
this.root.push(new Default("application/vnd.openxmlformats-package.relationships+xml", "rels"));
this.root.push(new Default("application/xml", "xml"));
this.root.push(new Default("application/vnd.openxmlformats-officedocument.obfuscatedFont", "odttf"));

3
src/file/drawing/anchor/anchor.spec.ts
View File

@ -11,8 +11,9 @@ import { Anchor } from "./anchor";
const createAnchor = (drawingOptions: IDrawingOptions): Anchor =>
new Anchor({
mediaData: {
type: "png",
fileName: "test.png",
stream: Buffer.from(""),
data: Buffer.from(""),
transformation: {
pixels: {
x: 0,

3
src/file/drawing/drawing.spec.ts
View File

@ -11,8 +11,9 @@ const imageBase64Data = `iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAACzVBMVEU
const createDrawing = (drawingOptions?: IDrawingOptions): Drawing =>
new Drawing(
{
type: "jpg",
fileName: "test.jpg",
stream: Buffer.from(imageBase64Data, "base64"),
data: Buffer.from(imageBase64Data, "base64"),
transformation: {
pixels: {
x: 100,

35
src/file/drawing/inline/graphic/graphic-data/pic/blip/blip-extentions.ts Normal file
View File

@ -0,0 +1,35 @@
import { BuilderElement, XmlComponent } from "@file/xml-components";
import { IMediaData } from "@file/media";
const createSvgBlip = (mediaData: IMediaData): XmlComponent =>
new BuilderElement({
name: "asvg:svgBlip",
attributes: {
asvg: {
key: "xmlns:asvg",
value: "http://schemas.microsoft.com/office/drawing/2016/SVG/main",
},
embed: {
key: "r:embed",
value: `rId{${mediaData.fileName}}`,
},
},
});
const createExtention = (mediaData: IMediaData): XmlComponent =>
new BuilderElement({
name: "a:ext",
attributes: {
uri: {
key: "uri",
value: "{96DAC541-7B7A-43D3-8B79-37D633B846F1}",
},
},
children: [createSvgBlip(mediaData)],
});
export const createExtentionList = (mediaData: IMediaData): XmlComponent =>
new BuilderElement({
name: "a:extLst",
children: [createExtention(mediaData)],
});

4
src/file/drawing/inline/graphic/graphic-data/pic/blip/blip-fill.ts
View File

@ -1,7 +1,7 @@
import { IMediaData } from "@file/media";
import { XmlComponent } from "@file/xml-components";
import { Blip } from "./blip";
import { createBlip } from "./blip";
import { SourceRectangle } from "./source-rectangle";
import { Stretch } from "./stretch";
@ -9,7 +9,7 @@ export class BlipFill extends XmlComponent {
public constructor(mediaData: IMediaData) {
super("pic:blipFill");
this.root.push(new Blip(mediaData));
this.root.push(createBlip(mediaData));
this.root.push(new SourceRectangle());
this.root.push(new Stretch());
}

38
src/file/drawing/inline/graphic/graphic-data/pic/blip/blip.ts
View File

@ -1,24 +1,24 @@
import { IMediaData } from "@file/media";
import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
import { BuilderElement, XmlComponent } from "@file/xml-components";
import { createExtentionList } from "./blip-extentions";
class BlipAttributes extends XmlAttributeComponent<{
type BlipAttributes = {
readonly embed: string;
readonly cstate: string;
}> {
protected readonly xmlKeys = {
embed: "r:embed",
cstate: "cstate",
};
}
};
export class Blip extends XmlComponent {
public constructor(mediaData: IMediaData) {
super("a:blip");
this.root.push(
new BlipAttributes({
embed: `rId{${mediaData.fileName}}`,
cstate: "none",
}),
);
}
}
export const createBlip = (mediaData: IMediaData): XmlComponent =>
new BuilderElement<BlipAttributes>({
name: "a:blip",
attributes: {
embed: {
key: "r:embed",
value: `rId{${mediaData.type === "svg" ? mediaData.fallback.fileName : mediaData.fileName}}`,
},
cstate: {
key: "cstate",
value: "none",
},
},
children: mediaData.type === "svg" ? [createExtentionList(mediaData)] : [],
});

3
src/file/drawing/inline/inline.spec.ts
View File

@ -8,8 +8,9 @@ describe("Inline", () => {
const tree = new Formatter().format(
createInline({
mediaData: {
type: "png",
fileName: "test.png",
stream: Buffer.from(""),
data: Buffer.from(""),
transformation: {
pixels: {
x: 0,

39
src/file/file.spec.ts
View File

@ -436,7 +436,44 @@ describe("File", () => {
it("should work with external styles", () => {
const doc = new File({
sections: [],
externalStyles: "",
externalStyles: `
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<w:styles xmlns:mc="first" xmlns:r="second">
<w:docDefaults>
<w:rPrDefault>
<w:rPr>
<w:rFonts w:ascii="Arial" w:eastAsiaTheme="minorHAnsi" w:hAnsi="Arial" w:cstheme="minorHAnsi"/>
<w:lang w:val="en-US" w:eastAsia="en-US" w:bidi="ar-SA"/>
</w:rPr>
</w:rPrDefault>
<w:pPrDefault>
<w:pPr>
<w:spacing w:after="160" w:line="259" w:lineRule="auto"/>
</w:pPr>
</w:pPrDefault>
</w:docDefaults>
<w:latentStyles w:defLockedState="1" w:defUIPriority="99">
</w:latentStyles>
<w:style w:type="paragraph" w:default="1" w:styleId="Normal">
<w:name w:val="Normal"/>
<w:qFormat/>
</w:style>
<w:style w:type="paragraph" w:styleId="Heading1">
<w:name w:val="heading 1"/>
<w:basedOn w:val="Normal"/>
<w:pPr>
<w:keepNext/>
<w:keepLines/>
<w:pBdr>
<w:bottom w:val="single" w:sz="4" w:space="1" w:color="auto"/>
</w:pBdr>
</w:pPr>
</w:style>
</w:styles>`,
});
expect(doc.Styles).to.not.be.undefined;

2
src/file/file.ts
View File

@ -84,7 +84,7 @@ export class File {
this.media = new Media();
if (options.externalStyles) {
if (options.externalStyles !== undefined) {
const stylesFactory = new ExternalStylesFactory();
this.styles = stylesFactory.newInstance(options.externalStyles);
} else if (options.styles) {

20
src/file/media/data.ts
View File

@ -14,11 +14,25 @@ export interface IMediaDataTransformation {
readonly rotation?: number;
}
export interface IMediaData {
readonly stream: Buffer | Uint8Array | ArrayBuffer;
type CoreMediaData = {
readonly fileName: string;
readonly transformation: IMediaDataTransformation;
}
readonly data: Buffer | Uint8Array | ArrayBuffer;
};
type RegularMediaData = {
readonly type: "jpg" | "png" | "gif" | "bmp";
};
type SvgMediaData = {
readonly type: "svg";
/**
* Required in case the Word processor does not support SVG.
*/
readonly fallback: RegularMediaData & CoreMediaData;
};
export type IMediaData = (RegularMediaData | SvgMediaData) & CoreMediaData;
// Needed because of: https://github.com/s-panferov/awesome-typescript-loader/issues/432
/**

3
src/file/media/media.spec.ts
View File

@ -19,7 +19,8 @@ describe("Media", () => {
const media = new Media();
media.addImage("test2.png", {
stream: Buffer.from(""),
type: "png",
data: Buffer.from(""),
fileName: "test.png",
transformation: {
pixels: {

127
src/file/paragraph/run/image-run.spec.ts
View File

@ -19,6 +19,7 @@ describe("ImageRun", () => {
describe("#constructor()", () => {
it("should create with Buffer", () => {
const currentImageRun = new ImageRun({
type: "png",
data: Buffer.from(""),
transformation: {
width: 200,
@ -39,8 +40,7 @@ describe("ImageRun", () => {
const tree = new Formatter().format(currentImageRun, {
file: {
Media: {
// eslint-disable-next-line @typescript-eslint/no-empty-function
addImage: () => {},
addImage: vi.fn(),
},
} as unknown as File,
viewWrapper: {} as unknown as IViewWrapper,
@ -271,6 +271,7 @@ describe("ImageRun", () => {
it("should create with string", () => {
const currentImageRun = new ImageRun({
type: "png",
data: "",
transformation: {
width: 200,
@ -291,8 +292,7 @@ describe("ImageRun", () => {
const tree = new Formatter().format(currentImageRun, {
file: {
Media: {
// eslint-disable-next-line @typescript-eslint/no-empty-function
addImage: () => {},
addImage: vi.fn(),
},
} as unknown as File,
viewWrapper: {} as unknown as IViewWrapper,
@ -522,10 +522,10 @@ describe("ImageRun", () => {
});
it("should return UInt8Array if atob is present", () => {
// eslint-disable-next-line functional/immutable-data
global.atob = () => "atob result";
vi.spyOn(global, "atob").mockReturnValue("atob result");
const currentImageRun = new ImageRun({
type: "png",
data: "",
transformation: {
width: 200,
@ -546,8 +546,7 @@ describe("ImageRun", () => {
const tree = new Formatter().format(currentImageRun, {
file: {
Media: {
// eslint-disable-next-line @typescript-eslint/no-empty-function
addImage: () => {},
addImage: vi.fn(),
},
} as unknown as File,
viewWrapper: {} as unknown as IViewWrapper,
@ -775,16 +774,13 @@ describe("ImageRun", () => {
},
],
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any, functional/immutable-data
(global as any).atob = undefined;
});
it("should use data as is if its not a string", () => {
// eslint-disable-next-line functional/immutable-data
global.atob = () => "atob result";
vi.spyOn(global, "atob").mockReturnValue("atob result");
const currentImageRun = new ImageRun({
type: "png",
data: "",
transformation: {
width: 200,
@ -805,8 +801,7 @@ describe("ImageRun", () => {
const tree = new Formatter().format(currentImageRun, {
file: {
Media: {
// eslint-disable-next-line @typescript-eslint/no-empty-function
addImage: () => {},
addImage: vi.fn(),
},
} as unknown as File,
viewWrapper: {} as unknown as IViewWrapper,
@ -1034,9 +1029,107 @@ describe("ImageRun", () => {
},
],
});
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any, functional/immutable-data
(global as any).atob = undefined;
it("should strip base64 marker", () => {
const spy = vi.spyOn(global, "atob").mockReturnValue("atob result");
new ImageRun({
type: "png",
data: ";base64,",
transformation: {
width: 200,
height: 200,
rotation: 45,
},
});
expect(spy).toBeCalledWith("");
});
it("should work with svgs", () => {
const currentImageRun = new ImageRun({
type: "svg",
data: Buffer.from(""),
transformation: {
width: 200,
height: 200,
},
fallback: {
type: "png",
data: Buffer.from(""),
},
});
const tree = new Formatter().format(currentImageRun, {
file: {
Media: {
addImage: vi.fn(),
},
} as unknown as File,
viewWrapper: {} as unknown as IViewWrapper,
stack: [],
});
expect(tree).toStrictEqual({
"w:r": [
{
"w:drawing": [
{
"wp:inline": expect.arrayContaining([
{
"a:graphic": expect.arrayContaining([
{
"a:graphicData": expect.arrayContaining([
{
"pic:pic": expect.arrayContaining([
{
"pic:blipFill": expect.arrayContaining([
{
"a:blip": [
{
_attr: {
cstate: "none",
"r:embed": "rId{test-unique-id.png}",
},
},
{
"a:extLst": [
{
"a:ext": [
{
_attr: {
uri: "{96DAC541-7B7A-43D3-8B79-37D633B846F1}",
},
},
{
"asvg:svgBlip": {
_attr: expect.objectContaining({
"r:embed":
"rId{test-unique-id.svg}",
}),
},
},
],
},
],
},
],
},
]),
},
]),
},
]),
},
]),
},
]),
},
],
},
],
});
});
});
});

133
src/file/paragraph/run/image-run.ts
View File

@ -9,38 +9,102 @@ import { IMediaTransformation } from "../../media";
import { IMediaData } from "../../media/data";
import { Run } from "../run";
export interface IImageOptions {
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
type CoreImageOptions = {
readonly transformation: IMediaTransformation;
readonly floating?: IFloating;
readonly altText?: DocPropertiesOptions;
readonly outline?: OutlineOptions;
}
};
type RegularImageOptions = {
readonly type: "jpg" | "png" | "gif" | "bmp";
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
};
type SvgMediaOptions = {
readonly type: "svg";
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
/**
* Required in case the Word processor does not support SVG.
*/
readonly fallback: RegularImageOptions;
};
export type IImageOptions = (RegularImageOptions | SvgMediaOptions) & CoreImageOptions;
const convertDataURIToBinary = (dataURI: string): Uint8Array => {
if (typeof atob === "function") {
// https://gist.github.com/borismus/1032746
// https://github.com/mafintosh/base64-to-uint8array
const BASE64_MARKER = ";base64,";
const base64Index = dataURI.indexOf(BASE64_MARKER);
const base64IndexWithOffset = base64Index === -1 ? 0 : base64Index + BASE64_MARKER.length;
return new Uint8Array(
atob(dataURI.substring(base64IndexWithOffset))
.split("")
.map((c) => c.charCodeAt(0)),
);
/* c8 ignore next 6 */
} else {
// Not possible to test this branch in NodeJS
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
const b = require("buf" + "fer");
return new b.Buffer(dataURI, "base64");
}
};
const standardizeData = (data: string | Buffer | Uint8Array | ArrayBuffer): Buffer | Uint8Array | ArrayBuffer =>
typeof data === "string" ? convertDataURIToBinary(data) : data;
const createImageData = (options: IImageOptions, key: string): Pick<IMediaData, "data" | "fileName" | "transformation"> => ({
data: standardizeData(options.data),
fileName: key,
transformation: {
pixels: {
x: Math.round(options.transformation.width),
y: Math.round(options.transformation.height),
},
emus: {
x: Math.round(options.transformation.width * 9525),
y: Math.round(options.transformation.height * 9525),
},
flip: options.transformation.flip,
rotation: options.transformation.rotation ? options.transformation.rotation * 60000 : undefined,
},
});
export class ImageRun extends Run {
private readonly key = `${uniqueId()}.png`;
private readonly key: string;
private readonly fallbackKey = `${uniqueId()}.png`;
private readonly imageData: IMediaData;
public constructor(options: IImageOptions) {
super({});
const newData = typeof options.data === "string" ? this.convertDataURIToBinary(options.data) : options.data;
this.imageData = {
stream: newData,
fileName: this.key,
transformation: {
pixels: {
x: Math.round(options.transformation.width),
y: Math.round(options.transformation.height),
},
emus: {
x: Math.round(options.transformation.width * 9525),
y: Math.round(options.transformation.height * 9525),
},
flip: options.transformation.flip,
rotation: options.transformation.rotation ? options.transformation.rotation * 60000 : undefined,
},
};
this.key = `${uniqueId()}.${options.type}`;
this.imageData =
options.type === "svg"
? {
type: options.type,
...createImageData(options, this.key),
fallback: {
type: options.fallback.type,
...createImageData(
{
...options.fallback,
transformation: options.transformation,
},
this.fallbackKey,
),
},
}
: {
type: options.type,
...createImageData(options, this.key),
};
const drawing = new Drawing(this.imageData, {
floating: options.floating,
docProperties: options.altText,
@ -53,29 +117,10 @@ export class ImageRun extends Run {
public prepForXml(context: IContext): IXmlableObject | undefined {
context.file.Media.addImage(this.key, this.imageData);
if (this.imageData.type === "svg") {
context.file.Media.addImage(this.fallbackKey, this.imageData.fallback);
}
return super.prepForXml(context);
}
private convertDataURIToBinary(dataURI: string): Uint8Array {
if (typeof atob === "function") {
// https://gist.github.com/borismus/1032746
// https://github.com/mafintosh/base64-to-uint8array
const BASE64_MARKER = ";base64,";
const base64Index = dataURI.indexOf(BASE64_MARKER);
const base64IndexWithOffset = base64Index === -1 ? 0 : base64Index + BASE64_MARKER.length;
return new Uint8Array(
atob(dataURI.substring(base64IndexWithOffset))
.split("")
.map((c) => c.charCodeAt(0)),
);
/* c8 ignore next 6 */
} else {
// Not possible to test this branch in NodeJS
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
const b = require("buf" + "fer");
return new b.Buffer(dataURI, "base64");
}
}
}

2
src/file/paragraph/run/run-components/text.ts
View File

@ -23,11 +23,9 @@ export class Text extends XmlComponent {
if (typeof options === "string") {
this.root.push(new TextAttributes({ space: SpaceType.PRESERVE }));
this.root.push(options);
return this;
} else {
this.root.push(new TextAttributes({ space: options.space ?? SpaceType.DEFAULT }));
this.root.push(options.text);
return this;
}
}
}