Skip to content

Commit baf3338

Browse files
singerlasingerla
authored
Merge pull request #178 from singerla/feat-multi-text-helper
feat(text): Add multi text helper to generate complex text contents
2 parents 6c86585 + 282b55d commit baf3338

15 files changed

+1023
-116
lines changed

‎README.md‎

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ const automizer = new Automizer({
187187

188188
// Remove all unused placeholders to prevent unwanted overlays:
189189
cleanupPlaceholders: false,
190-
190+
191191
// Use a customized version of pptxGenJs if required:
192192
// pptxGenJs: PptxGenJS,
193193
});
@@ -451,10 +451,64 @@ pres.addSlide('TextReplace.pptx', 1, (slide) => {
451451
});
452452
```
453453

454+
You can use `modify.setMultiText` to replace all text contents of an existing textfield by styled paragraphs, bulleted lists and text runs:
455+
456+
```ts
457+
import { modify } from 'pptx-automizer';
458+
459+
pres.addSlide('TextReplace.pptx', 1, (slide) => {
460+
slide.modifyElement(
461+
'setText',
462+
modify.setMultiText([
463+
{
464+
paragraph: {
465+
bullet: true,
466+
level: 0,
467+
marginLeft: 41338,
468+
indent: -87325,
469+
alignment: 'l',
470+
},
471+
textRuns: [
472+
{
473+
text: 'Bullet point level 0',
474+
style: {
475+
isItalics: true,
476+
color: {
477+
type: 'srgbClr',
478+
value: 'CCCCCC',
479+
},
480+
},
481+
},
482+
],
483+
},
484+
]),
485+
);
486+
});
487+
```
488+
489+
It is also possible to directly convert an HTML page into pptx text contents. HTML code will be flattened and converted into a MultiText array.
490+
491+
```ts
492+
import { modify } from 'pptx-automizer';
493+
494+
const html =
495+
'<html><body>' +
496+
'<ul>' +
497+
'<li><span style="font-size: 14px;">bullet 1 level 1</span></li>' +
498+
'</ul>' +
499+
'</body></html>';
500+
501+
pres.addSlide('TextReplace.pptx', 1, (slide) => {
502+
slide.modifyElement('setText', modify.htmlToMultiText(html));
503+
});
504+
```
505+
454506
Find out more about text replacement:
455507

456508
- [Replace and style by tags](https://github.com/singerla/pptx-automizer/blob/main/__tests__/replace-tagged-text.test.ts)
457509
- [Modify text elements using getAllTextElementIds](https://github.com/singerla/pptx-automizer/blob/main/__tests__/get-all-text-element-ids.test.ts)
510+
- [Replace text by multitext objects](https://github.com/singerla/pptx-automizer/blob/main/__tests__/replace-multi-text.test.ts)
511+
- [Replace text by HTML](https://github.com/singerla/pptx-automizer/blob/main/__tests__/replace-multi-text-html.test.ts)
458512

459513
## Modify Images
460514

@@ -586,6 +640,7 @@ pres.addSlide('charts', 2, (slide) => {
586640
This library wraps around the [PptxGenJS](https://github.com/gitbrent/PptxGenJS) to generate shapes from scratch. It is possible to use the `pptxGenJS` wrapper to generate shapes on a slide.
587641

588642
Here's an example of how to use `pptxGenJS` to add a text shape to a slide:
643+
589644
```ts
590645
pres.addSlide('empty', 1, (slide) => {
591646
// Use pptxgenjs to add text from scratch:
@@ -604,7 +659,6 @@ pres.addSlide('empty', 1, (slide) => {
604659
You can as well create charts with `pptxGenJS`:
605660

606661
```ts
607-
608662
const dataChartAreaLine = [
609663
{
610664
name: 'Actual Sales',
@@ -632,12 +686,12 @@ pres.addSlide('empty', 1, (slide) => {
632686
```
633687

634688
You can use the following functions to generate shapes with `pptxGenJS`:
635-
* addChart
636-
* addImage
637-
* addShape
638-
* addTable
639-
* addText
640689

690+
- addChart
691+
- addImage
692+
- addShape
693+
- addTable
694+
- addText
641695

642696
## Remove elements from a slide
643697

‎__tests__/replace-multi-text-html.test.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import Automizer, { modify } from '../src/index';
2+
3+
test('create presentation, replace multi text from HTML string.', async () => {
4+
const automizer = new Automizer({
5+
templateDir: `${__dirname}/pptx-templates`,
6+
outputDir: `${__dirname}/pptx-output`,
7+
});
8+
9+
const pres = automizer.loadRoot(`RootTemplate.pptx`).load(`TextReplace.pptx`);
10+
11+
const html = '<html><body><p>First Line 14pt</p>\n' +
12+
'<p><span style="font-size: 12px;">2nd line 12pt <strong>bold</strong> <em>italics</em></span></p>\n' +
13+
'<ul>\n' +
14+
'<li><span style="font-size: 14px;">bullet 1 level 1</span></li>\n' +
15+
'<ul>\n' +
16+
'<li><span style="font-size: 14px;">bullet 1 level 2</span></li>\n' +
17+
'</ul>\n' +
18+
'<li><span style="font-size: 14px;">bullet 2 level 1</span></li>\n' +
19+
'<ul>\n' +
20+
'<li><span style="font-size: 14px;">bullet 2 level 2</span></li>\n' +
21+
'<ul>\n' +
22+
'<li><span style="font-size: 14px;">bullet 2 level 3</span></li>\n' +
23+
'</ul>\n' +
24+
'<li><span style="font-size: 14px;">bullet 2 level 2</span></li>\n' +
25+
'<li><span style="font-size: 14px;"><ins>bullet</ins> <em>mixed</em> <strong><em>formatting</em></strong></span></li>\n' +
26+
'</ul>\n' +
27+
'</ul>\n' +
28+
'<p><span style="font-size: 14px;"><strong><em>Text </em></strong>after bullet list</span></p></body></html>\n'
29+
30+
await pres
31+
.addSlide('TextReplace.pptx', 1, (slide) => {
32+
slide.modifyElement('setText', modify.htmlToMultiText(html));
33+
})
34+
.write(`modify-multi-text-html.test.pptx`);
35+
36+
// expect(result.tables).toBe(2); // TODO: fixture for pptx-output
37+
});

‎__tests__/replace-multi-text.test.ts‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import Automizer, { modify } from '../src/index';
2+
3+
test('create presentation, replace multi text.', async () => {
4+
const automizer = new Automizer({
5+
templateDir: `${__dirname}/pptx-templates`,
6+
outputDir: `${__dirname}/pptx-output`,
7+
});
8+
9+
const pres = automizer.loadRoot(`RootTemplate.pptx`).load(`TextReplace.pptx`);
10+
11+
await pres
12+
.addSlide('TextReplace.pptx', 1, (slide) => {
13+
slide.modifyElement(
14+
'setText',
15+
modify.setMultiText([
16+
{
17+
paragraph: {
18+
bullet: true,
19+
level: 0,
20+
marginLeft: 41338,
21+
indent: -87325,
22+
alignment: 'l',
23+
},
24+
textRuns: [
25+
{
26+
text: 'test 0',
27+
style: {
28+
color: {
29+
type: 'srgbClr',
30+
value: 'CCCCCC',
31+
},
32+
},
33+
},
34+
],
35+
},
36+
{
37+
paragraph: {
38+
bullet: true,
39+
level: 1,
40+
marginLeft: 541338,
41+
indent: -187325,
42+
},
43+
textRuns: [
44+
{
45+
text: 'test ',
46+
style: {
47+
color: {
48+
type: 'srgbClr',
49+
value: 'CCCCCC',
50+
},
51+
},
52+
},
53+
{
54+
text: 'test 2',
55+
style: {
56+
size: 700,
57+
color: {
58+
type: 'srgbClr',
59+
value: 'FF0000',
60+
},
61+
},
62+
},
63+
{
64+
text: 'test 3',
65+
style: {
66+
size: 1200,
67+
color: {
68+
type: 'srgbClr',
69+
value: '00FF00',
70+
},
71+
},
72+
},
73+
],
74+
},
75+
{
76+
paragraph: {
77+
alignment: 'r',
78+
},
79+
textRuns: [
80+
{
81+
text: 'aligned Right',
82+
style: {
83+
color: {
84+
type: 'srgbClr',
85+
value: '00FF00',
86+
},
87+
},
88+
},
89+
],
90+
},
91+
{
92+
paragraph: {
93+
alignment: 'ctr',
94+
},
95+
textRuns: [
96+
{
97+
text: 'aligned Center',
98+
style: {
99+
color: {
100+
type: 'srgbClr',
101+
value: '0000FF',
102+
},
103+
},
104+
},
105+
],
106+
},
107+
]),
108+
);
109+
110+
// Generate a textfield with pptxGenJS and modify its contents with setMultiText
111+
// This way, you can work around some pptxGenJS restrictions.
112+
slide.generate((iSlide) => {
113+
iSlide.addText(
114+
'test',
115+
{
116+
x: 10,
117+
h: 3,
118+
w: 3,
119+
valign: 'top',
120+
fontSize: 14,
121+
},
122+
[
123+
modify.setMultiText([
124+
{
125+
paragraph: {
126+
bullet: true,
127+
level: 1,
128+
marginLeft: 541338,
129+
indent: -187325,
130+
},
131+
textRuns: [
132+
{
133+
text: 'test 123',
134+
style: {
135+
color: {
136+
type: 'srgbClr',
137+
value: 'CCCCCC',
138+
},
139+
},
140+
},
141+
],
142+
},
143+
]),
144+
],
145+
);
146+
}, 'my object');
147+
})
148+
.write(`modify-multi-text.test.pptx`);
149+
150+
// expect(result.tables).toBe(2); // TODO: fixture for pptx-output
151+
});

0 commit comments

Comments
 (0)