pptx-vanilla-viewer 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -11
- package/dist/index.cjs +161 -53
- package/dist/index.d.cts +294 -71
- package/dist/index.d.ts +294 -71
- package/dist/index.js +161 -53
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
# pptx-vanilla-viewer
|
|
2
2
|
|
|
3
|
-
> ### ⚠️
|
|
4
|
-
>
|
|
5
|
-
>
|
|
6
|
-
>
|
|
3
|
+
> ### ⚠️ Under active development
|
|
4
|
+
>
|
|
5
|
+
> Viewing, presenting, and a first editing pass (select, drag, resize,
|
|
6
|
+
> rotate, inline text, undo/redo, save/download) are all available. There is
|
|
7
|
+
> no property inspector, template (master/layout) editing, export, or
|
|
8
|
+
> collaboration yet - see [PORTING.md](https://github.com/ChristopherVR/pptx-viewer/blob/main/PORTING.md)
|
|
9
|
+
> for the full parity checklist. The API may change.
|
|
7
10
|
>
|
|
8
|
-
> The package is under active development and the API may change.
|
|
9
11
|
> For the latest source, roadmap, and issue tracker visit:
|
|
10
12
|
>
|
|
11
13
|
> **https://github.com/ChristopherVR/pptx-viewer**
|
|
@@ -29,11 +31,13 @@ const viewer = createPptxViewer(document.getElementById('host')!, {
|
|
|
29
31
|
theme: { colors: { primary: '#e34f26' } },
|
|
30
32
|
locale: 'en',
|
|
31
33
|
initialSlide: 0,
|
|
34
|
+
editable: true, // select, drag, resize, rotate, inline text, undo/redo, save
|
|
32
35
|
showToolbar: true,
|
|
33
36
|
showThumbnails: true,
|
|
34
37
|
onLoad: ({ slideCount }) => console.log(`${slideCount} slides`),
|
|
35
38
|
onSlideChange: (index) => console.log('slide', index + 1),
|
|
36
39
|
onError: (message) => console.error(message),
|
|
40
|
+
onDirtyChange: (dirty) => console.log('unsaved edits:', dirty),
|
|
37
41
|
});
|
|
38
42
|
|
|
39
43
|
// Navigation / zoom
|
|
@@ -46,6 +50,14 @@ viewer.zoomToFit();
|
|
|
46
50
|
// Presentation mode (real Fullscreen API; Esc exits)
|
|
47
51
|
await viewer.enterPresentation();
|
|
48
52
|
|
|
53
|
+
// Editing (click/drag/resize/rotate/double-click-to-edit-text happen via the
|
|
54
|
+
// DOM; these are the programmatic entry points)
|
|
55
|
+
viewer.undo();
|
|
56
|
+
viewer.redo();
|
|
57
|
+
viewer.deleteSelected();
|
|
58
|
+
const bytes = await viewer.save(); // serialise the edited deck to .pptx bytes
|
|
59
|
+
await viewer.downloadPptx('quarterly-edited.pptx'); // save() + trigger a download
|
|
60
|
+
|
|
49
61
|
// Load a different file later
|
|
50
62
|
await viewer.loadFile(fileInput.files![0]);
|
|
51
63
|
await viewer.loadUrl('/other-deck.pptx');
|
|
@@ -61,9 +73,15 @@ The container should have a size (the viewer fills it: `width/height: 100%`).
|
|
|
61
73
|
|
|
62
74
|
## Keyboard
|
|
63
75
|
|
|
64
|
-
|
|
65
|
-
last slide, Esc exits presentation mode. The viewer root is
|
|
66
|
-
(`tabindex="0"`).
|
|
76
|
+
Navigation: arrow keys / PageUp / PageDown / Space, Home/End jump to the
|
|
77
|
+
first or last slide, Esc exits presentation mode. The viewer root is
|
|
78
|
+
focusable (`tabindex="0"`).
|
|
79
|
+
|
|
80
|
+
When `editable` is on and an element is selected: Ctrl/Cmd+Z undoes,
|
|
81
|
+
Ctrl/Cmd+Shift+Z (or Ctrl+Y) redoes, Delete/Backspace deletes the selection,
|
|
82
|
+
Ctrl/Cmd+D duplicates it, arrow keys nudge it by 1px (Shift+arrow for 10px),
|
|
83
|
+
and Escape deselects. Double-click a text-capable element to edit its text
|
|
84
|
+
inline.
|
|
67
85
|
|
|
68
86
|
## Styling and theming
|
|
69
87
|
|
|
@@ -76,6 +94,25 @@ All chrome colors come from the shared `--pptx-*` CSS custom properties. Pass
|
|
|
76
94
|
a `ViewerTheme` (`theme` option or `setTheme`) to override them; the
|
|
77
95
|
`vermilionLightTheme` / `vermilionDarkTheme` presets are re-exported.
|
|
78
96
|
|
|
97
|
+
## Editing
|
|
98
|
+
|
|
99
|
+
Pass `editable: true` (or call `setEditable(true)` at runtime) to turn on:
|
|
100
|
+
|
|
101
|
+
- Click to select an element, click empty space to deselect.
|
|
102
|
+
- Drag to move, with snap-to-sibling-edge guides.
|
|
103
|
+
- Resize via 8 handles (Shift locks aspect ratio on the corner handles) and
|
|
104
|
+
rotate via a rotate handle (Shift snaps to angle increments).
|
|
105
|
+
- Double-click a text-capable element for inline text editing.
|
|
106
|
+
- Undo/redo (100-entry history), delete, and duplicate (`Ctrl/Cmd+D`).
|
|
107
|
+
- The toolbar's Save button (shown only when `editable`), which calls
|
|
108
|
+
`downloadPptx()` to serialise and download the edited `.pptx`.
|
|
109
|
+
|
|
110
|
+
There is no property/inspector panel, no template (master/layout) editing,
|
|
111
|
+
and no add-new-element or z-order/group operations yet - see
|
|
112
|
+
`viewer.getSelectedElementId()` and the `onSelectionChange` /
|
|
113
|
+
`onDirtyChange` callbacks to build your own chrome around the selection
|
|
114
|
+
state in the meantime.
|
|
115
|
+
|
|
79
116
|
## i18n
|
|
80
117
|
|
|
81
118
|
All UI strings go through the shared `pptx.*` dictionary (English built in).
|
|
@@ -85,9 +122,10 @@ fall back to English, then to a humanised label.
|
|
|
85
122
|
|
|
86
123
|
## Element coverage
|
|
87
124
|
|
|
88
|
-
Dedicated renderers: text, shape, image/picture, group, connector
|
|
89
|
-
|
|
90
|
-
|
|
125
|
+
Dedicated renderers: text, shape, image/picture, group, connector, table,
|
|
126
|
+
chart, SmartArt (2D), media (video/audio), ink, and OLE. The remaining niche
|
|
127
|
+
types (content parts, zoom links, 3D models) currently render a typed
|
|
128
|
+
placeholder box. Renderers are dispatched through an open registry, so
|
|
91
129
|
coverage can be extended without forking:
|
|
92
130
|
|
|
93
131
|
```ts
|