Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#756 Adding alt text feature #1741

Merged
merged 2 commits into from
Oct 26, 2022
Merged

#756 Adding alt text feature #1741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
522b218
#756 Adding alt text feature
dolanmiu Oct 26, 2022
d2c0e65
Add tests
dolanmiu Oct 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions .github/workflows/demos.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,15 @@ 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/5-images.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/5-images.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/6-page-borders.ts
- name: Extract Word Document
Expand Down
5 changes: 5 additions & 0 deletions demo/5-images.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
}),
],
}),
Expand Down
29 changes: 26 additions & 3 deletions docs/usage/images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,28 +252,51 @@ 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_

### Add images to header and footer

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_

### Floating images

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_
245 changes: 244 additions & 1 deletion src/file/drawing/anchor/anchor.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -36,6 +40,14 @@ const createAnchor = (drawingOptions: IDrawingOptions): Anchor =>
);

describe("Anchor", () => {
before(() => {
stub(convenienceFunctions, "uniqueNumericId").callsFake(() => 0);
});

after(() => {
(convenienceFunctions.uniqueNumericId as SinonStub).restore();
});

let anchor: Anchor;

describe("#constructor()", () => {
Expand Down Expand Up @@ -362,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": {},
},
],
},
],
},
],
},
],
},
],
},
],
});
});
});
});
2 changes: 1 addition & 1 deletion src/file/drawing/anchor/anchor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
Expand Down
13 changes: 0 additions & 13 deletions src/file/drawing/doc-properties/doc-properties-attributes.ts
View file
Open in desktop

This file was deleted.

Loading