@textcortex/slidewise 1.0.1 → 1.1.0
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/dist/index.mjs +6261 -6108
- package/dist/index.mjs.map +1 -1
- package/dist/slidewise.css +1 -1
- package/package.json +4 -19
- package/src/SlidewiseEditor.css +121 -4
- package/src/SlidewiseEditor.tsx +82 -166
- package/src/SlidewiseFileEditor.tsx +77 -11
- package/src/components/editor/TopBar.tsx +37 -24
- package/src/compound/HostContext.tsx +29 -0
- package/src/compound/IconContext.tsx +42 -0
- package/src/compound/ReadOnlyContext.tsx +23 -0
- package/src/compound/SlidewiseRoot.tsx +274 -0
- package/src/compound/index.ts +50 -0
- package/src/compound/parts.tsx +160 -0
- package/src/css.d.ts +4 -0
- package/src/index.ts +42 -0
- package/README.md +0 -112
- package/dist/file.svg +0 -1
- package/dist/globe.svg +0 -1
- package/dist/types/SlidewiseEditor.d.ts +0 -47
- package/dist/types/SlidewiseFileEditor.d.ts +0 -54
- package/dist/types/components/editor/BottomToolbar.d.ts +0 -1
- package/dist/types/components/editor/Canvas.d.ts +0 -1
- package/dist/types/components/editor/Editor.d.ts +0 -8
- package/dist/types/components/editor/ElementView.d.ts +0 -6
- package/dist/types/components/editor/FloatingToolbar.d.ts +0 -6
- package/dist/types/components/editor/GridView.d.ts +0 -1
- package/dist/types/components/editor/PlayMode.d.ts +0 -1
- package/dist/types/components/editor/SelectionFrame.d.ts +0 -8
- package/dist/types/components/editor/SlideRail.d.ts +0 -1
- package/dist/types/components/editor/SlideView.d.ts +0 -5
- package/dist/types/components/editor/TopBar.d.ts +0 -7
- package/dist/types/index.d.ts +0 -7
- package/dist/types/lib/StoreProvider.d.ts +0 -8
- package/dist/types/lib/fonts.d.ts +0 -9
- package/dist/types/lib/pptx/deckToPptx.d.ts +0 -9
- package/dist/types/lib/pptx/index.d.ts +0 -3
- package/dist/types/lib/pptx/pptxToDeck.d.ts +0 -18
- package/dist/types/lib/pptx/types.d.ts +0 -15
- package/dist/types/lib/pptx/units.d.ts +0 -25
- package/dist/types/lib/schema/migrate.d.ts +0 -25
- package/dist/types/lib/seed.d.ts +0 -2
- package/dist/types/lib/store.d.ts +0 -55
- package/dist/types/lib/types.d.ts +0 -141
- package/dist/window.svg +0 -1
- package/src/App.tsx +0 -261
- package/src/components/editor/Editor.tsx +0 -53
- package/src/index.css +0 -13
- package/src/lib/seed.ts +0 -777
- package/src/main.tsx +0 -10
- package/src/vite-env.d.ts +0 -3
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Compound API for Slidewise. Use these primitives when you want to compose
|
|
3
|
+
* the editor — replacing, wrapping, or omitting any region. Hosts that just
|
|
4
|
+
* want the default editor can keep using `<SlidewiseEditor>`, which is a
|
|
5
|
+
* thin wrapper rendering this same tree:
|
|
6
|
+
*
|
|
7
|
+
* ```tsx
|
|
8
|
+
* <Slidewise.Root deck={deck} onChange={…} onSave={…}>
|
|
9
|
+
* <Slidewise.TopBar />
|
|
10
|
+
* <Slidewise.Body>
|
|
11
|
+
* <Slidewise.SlideRail />
|
|
12
|
+
* <Slidewise.CanvasFrame>
|
|
13
|
+
* <Slidewise.Canvas />
|
|
14
|
+
* <Slidewise.BottomToolbar />
|
|
15
|
+
* </Slidewise.CanvasFrame>
|
|
16
|
+
* </Slidewise.Body>
|
|
17
|
+
* </Slidewise.Root>
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* Use the namespace import to keep call sites tidy:
|
|
21
|
+
*
|
|
22
|
+
* ```tsx
|
|
23
|
+
* import * as Slidewise from "@textcortex/slidewise";
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
export {
|
|
27
|
+
Root,
|
|
28
|
+
type SlidewiseRootProps,
|
|
29
|
+
type SlidewiseRootHandle,
|
|
30
|
+
} from "./SlidewiseRoot";
|
|
31
|
+
export {
|
|
32
|
+
TopBar,
|
|
33
|
+
SlideRail,
|
|
34
|
+
Canvas,
|
|
35
|
+
BottomToolbar,
|
|
36
|
+
RightPanel,
|
|
37
|
+
Body,
|
|
38
|
+
CanvasFrame,
|
|
39
|
+
type RegionProps,
|
|
40
|
+
} from "./parts";
|
|
41
|
+
export {
|
|
42
|
+
useHostCallbacks,
|
|
43
|
+
type SlidewiseHostCallbacks,
|
|
44
|
+
} from "./HostContext";
|
|
45
|
+
export {
|
|
46
|
+
IconProvider,
|
|
47
|
+
useIcons,
|
|
48
|
+
type SlidewiseIcons,
|
|
49
|
+
} from "./IconContext";
|
|
50
|
+
export { ReadOnlyProvider, useReadOnly } from "./ReadOnlyContext";
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode } from "react";
|
|
2
|
+
import { TopBar as TopBarInternal } from "@/components/editor/TopBar";
|
|
3
|
+
import { SlideRail as SlideRailInternal } from "@/components/editor/SlideRail";
|
|
4
|
+
import { Canvas as CanvasInternal } from "@/components/editor/Canvas";
|
|
5
|
+
import { BottomToolbar as BottomToolbarInternal } from "@/components/editor/BottomToolbar";
|
|
6
|
+
import { useHostCallbacks } from "./HostContext";
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Region-level compound parts. Each consumes the editor store via context,
|
|
10
|
+
* so any part can be omitted, wrapped, or replaced. None of these accept
|
|
11
|
+
* deck/onChange/onSave props — those live on `<Slidewise.Root>`.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
export interface RegionProps {
|
|
15
|
+
className?: string;
|
|
16
|
+
style?: CSSProperties;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* The default top bar (title input, undo/redo, save, play, theme toggle,
|
|
21
|
+
* export). Reads host callbacks from context, so the Save and Export
|
|
22
|
+
* buttons fire the host's `onSave` / `onExport` from `<Slidewise.Root>`.
|
|
23
|
+
*
|
|
24
|
+
* Omit it from the tree to hide the whole bar; or render your own toolbar
|
|
25
|
+
* alongside `<Slidewise.Canvas>` for full control.
|
|
26
|
+
*/
|
|
27
|
+
export function TopBar(_props: RegionProps = {}) {
|
|
28
|
+
const { onSave, onExport } = useHostCallbacks();
|
|
29
|
+
return <TopBarInternal onSave={onSave} onExport={onExport} />;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Left-side slide thumbnail rail with add/duplicate/delete.
|
|
34
|
+
*/
|
|
35
|
+
export function SlideRail(_props: RegionProps = {}) {
|
|
36
|
+
return <SlideRailInternal />;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* The main editing canvas. This is the only part that's effectively required
|
|
41
|
+
* — without it the editor renders nothing visible. Layout-wise it expects
|
|
42
|
+
* a flex container that gives it `flex: 1`; the default layout takes care of
|
|
43
|
+
* this when you also render `<Slidewise.Body>`.
|
|
44
|
+
*/
|
|
45
|
+
export function Canvas(_props: RegionProps = {}) {
|
|
46
|
+
return <CanvasInternal />;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Floating bottom toolbar with the active-tool selector (select / text /
|
|
51
|
+
* shape / etc.). Optional — omit it if your host has its own tool surface.
|
|
52
|
+
*/
|
|
53
|
+
export function BottomToolbar(_props: RegionProps = {}) {
|
|
54
|
+
return <BottomToolbarInternal />;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Right-side properties panel. The default editor doesn't ship a built-in
|
|
59
|
+
* inspector yet — this slot is rendered for hosts that want to inject their
|
|
60
|
+
* own (AI suggestions, comments, element properties, etc.). Pass `children`
|
|
61
|
+
* to fill the slot; the part handles the layout (fixed width column, themed
|
|
62
|
+
* surface) so injected content blends with the rest of the editor.
|
|
63
|
+
*/
|
|
64
|
+
export function RightPanel({
|
|
65
|
+
className,
|
|
66
|
+
style,
|
|
67
|
+
children,
|
|
68
|
+
width = 320,
|
|
69
|
+
}: RegionProps & { children?: ReactNode; width?: number | string }) {
|
|
70
|
+
if (!children) return null;
|
|
71
|
+
return (
|
|
72
|
+
<aside
|
|
73
|
+
className={
|
|
74
|
+
className
|
|
75
|
+
? `slidewise-right-panel ${className}`
|
|
76
|
+
: "slidewise-right-panel"
|
|
77
|
+
}
|
|
78
|
+
style={{
|
|
79
|
+
width,
|
|
80
|
+
flexShrink: 0,
|
|
81
|
+
height: "100%",
|
|
82
|
+
background: "var(--rail-bg)",
|
|
83
|
+
borderLeft: "1px solid var(--border)",
|
|
84
|
+
boxShadow: "var(--rail-shadow)",
|
|
85
|
+
overflow: "auto",
|
|
86
|
+
...style,
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
89
|
+
{children}
|
|
90
|
+
</aside>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Default body layout — slide rail + canvas + (optional) right panel side
|
|
96
|
+
* by side. Most hosts compose this manually:
|
|
97
|
+
*
|
|
98
|
+
* ```tsx
|
|
99
|
+
* <Slidewise.Root deck={deck}>
|
|
100
|
+
* <Slidewise.TopBar />
|
|
101
|
+
* <Slidewise.Body>
|
|
102
|
+
* <Slidewise.SlideRail />
|
|
103
|
+
* <Slidewise.Canvas />
|
|
104
|
+
* <Slidewise.BottomToolbar />
|
|
105
|
+
* </Slidewise.Body>
|
|
106
|
+
* </Slidewise.Root>
|
|
107
|
+
* ```
|
|
108
|
+
*
|
|
109
|
+
* Provided as a convenience so most hosts don't have to repeat the flex
|
|
110
|
+
* row + relative positioning that BottomToolbar's anchor expects.
|
|
111
|
+
*/
|
|
112
|
+
export function Body({ className, style, children }: RegionProps & { children?: ReactNode }) {
|
|
113
|
+
return (
|
|
114
|
+
<div
|
|
115
|
+
className={
|
|
116
|
+
className ? `slidewise-body ${className}` : "slidewise-body"
|
|
117
|
+
}
|
|
118
|
+
style={{
|
|
119
|
+
flex: 1,
|
|
120
|
+
display: "flex",
|
|
121
|
+
overflow: "hidden",
|
|
122
|
+
position: "relative",
|
|
123
|
+
...style,
|
|
124
|
+
}}
|
|
125
|
+
>
|
|
126
|
+
{children}
|
|
127
|
+
</div>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* Wraps `<Slidewise.Canvas>` with the relative positioning that
|
|
133
|
+
* `<Slidewise.BottomToolbar>` anchors to. Use it when you want the toolbar
|
|
134
|
+
* to float over the canvas — which is what the default editor does:
|
|
135
|
+
*
|
|
136
|
+
* ```tsx
|
|
137
|
+
* <Slidewise.CanvasFrame>
|
|
138
|
+
* <Slidewise.Canvas />
|
|
139
|
+
* <Slidewise.BottomToolbar />
|
|
140
|
+
* </Slidewise.CanvasFrame>
|
|
141
|
+
* ```
|
|
142
|
+
*/
|
|
143
|
+
export function CanvasFrame({
|
|
144
|
+
className,
|
|
145
|
+
style,
|
|
146
|
+
children,
|
|
147
|
+
}: RegionProps & { children?: ReactNode }) {
|
|
148
|
+
return (
|
|
149
|
+
<div
|
|
150
|
+
className={
|
|
151
|
+
className
|
|
152
|
+
? `slidewise-canvas-frame ${className}`
|
|
153
|
+
: "slidewise-canvas-frame"
|
|
154
|
+
}
|
|
155
|
+
style={{ flex: 1, display: "flex", position: "relative", ...style }}
|
|
156
|
+
>
|
|
157
|
+
{children}
|
|
158
|
+
</div>
|
|
159
|
+
);
|
|
160
|
+
}
|
package/src/css.d.ts
ADDED
package/src/index.ts
CHANGED
|
@@ -10,6 +10,48 @@ export {
|
|
|
10
10
|
type SlidewiseFileEditorApi,
|
|
11
11
|
} from "./SlidewiseFileEditor";
|
|
12
12
|
|
|
13
|
+
/**
|
|
14
|
+
* Compound API. Use the namespace import idiom for the full editor:
|
|
15
|
+
*
|
|
16
|
+
* ```tsx
|
|
17
|
+
* import * as Slidewise from "@textcortex/slidewise";
|
|
18
|
+
*
|
|
19
|
+
* <Slidewise.Root deck={deck} onChange={...}>
|
|
20
|
+
* <Slidewise.TopBar />
|
|
21
|
+
* <Slidewise.Body>
|
|
22
|
+
* <Slidewise.SlideRail />
|
|
23
|
+
* <Slidewise.CanvasFrame>
|
|
24
|
+
* <Slidewise.Canvas />
|
|
25
|
+
* <Slidewise.BottomToolbar />
|
|
26
|
+
* </Slidewise.CanvasFrame>
|
|
27
|
+
* </Slidewise.Body>
|
|
28
|
+
* </Slidewise.Root>
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* Each region reads the editor store via context, so you can replace, wrap,
|
|
32
|
+
* or omit any one. `<Slidewise.RightPanel>` is provided so hosts can inject
|
|
33
|
+
* their own panel content (AI suggestions, comments, etc.) inside the same
|
|
34
|
+
* themed surface.
|
|
35
|
+
*/
|
|
36
|
+
export {
|
|
37
|
+
Root,
|
|
38
|
+
TopBar,
|
|
39
|
+
SlideRail,
|
|
40
|
+
Canvas,
|
|
41
|
+
BottomToolbar,
|
|
42
|
+
RightPanel,
|
|
43
|
+
Body,
|
|
44
|
+
CanvasFrame,
|
|
45
|
+
useHostCallbacks,
|
|
46
|
+
useIcons,
|
|
47
|
+
useReadOnly,
|
|
48
|
+
type SlidewiseRootProps,
|
|
49
|
+
type SlidewiseRootHandle,
|
|
50
|
+
type SlidewiseHostCallbacks,
|
|
51
|
+
type SlidewiseIcons,
|
|
52
|
+
type RegionProps,
|
|
53
|
+
} from "./compound";
|
|
54
|
+
|
|
13
55
|
export { parsePptx, serializeDeck } from "./lib/pptx";
|
|
14
56
|
export type { ParseDiagnostics, ParseResult } from "./lib/pptx/types";
|
|
15
57
|
|
package/README.md
DELETED
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
# Slidewise
|
|
2
|
-
|
|
3
|
-
Embeddable React PPTX editor. PPTX import + canvas editor + PPTX export, in
|
|
4
|
-
one component.
|
|
5
|
-
|
|
6
|
-
```bash
|
|
7
|
-
pnpm add @textcortex/slidewise
|
|
8
|
-
```
|
|
9
|
-
|
|
10
|
-
Peer dependencies: `react >=19`, `react-dom >=19`.
|
|
11
|
-
|
|
12
|
-
## Quick start
|
|
13
|
-
|
|
14
|
-
`SlidewiseFileEditor` wraps the editor with PPTX load/save plumbing — give it
|
|
15
|
-
async `loadBlob` and `saveBlob` callbacks and it handles parsing, dirty
|
|
16
|
-
tracking, and serialisation.
|
|
17
|
-
|
|
18
|
-
```tsx
|
|
19
|
-
import {
|
|
20
|
-
SlidewiseFileEditor,
|
|
21
|
-
type SlidewiseFileEditorApi,
|
|
22
|
-
} from "@textcortex/slidewise";
|
|
23
|
-
import "@textcortex/slidewise/style.css";
|
|
24
|
-
import { useRef } from "react";
|
|
25
|
-
|
|
26
|
-
export function PresentationsRoute({ fileId }: { fileId: string }) {
|
|
27
|
-
const apiRef = useRef<SlidewiseFileEditorApi | null>(null);
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<SlidewiseFileEditor
|
|
31
|
-
onEditorApiChange={(api) => (apiRef.current = api)}
|
|
32
|
-
loadBlob={async () => {
|
|
33
|
-
const res = await fetch(`/api/files/${fileId}`);
|
|
34
|
-
return res.blob();
|
|
35
|
-
}}
|
|
36
|
-
saveBlob={async (pptx) => {
|
|
37
|
-
await fetch(`/api/files/${fileId}`, { method: "PUT", body: pptx });
|
|
38
|
-
}}
|
|
39
|
-
/>
|
|
40
|
-
);
|
|
41
|
-
}
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
The host owns transport and conflict detection; Slidewise owns parsing,
|
|
45
|
-
editing, and serialisation. Call `apiRef.current.save()` to trigger a save
|
|
46
|
-
from outside the editor's top bar; call `apiRef.current.isDirty()` to gate
|
|
47
|
-
"unsaved changes" UI.
|
|
48
|
-
|
|
49
|
-
## Lower-level entry point
|
|
50
|
-
|
|
51
|
-
If your host already has a `Deck` in memory (e.g. you're storing the JSON
|
|
52
|
-
shape in your own database rather than `.pptx` blobs), mount
|
|
53
|
-
`SlidewiseEditor` directly:
|
|
54
|
-
|
|
55
|
-
```tsx
|
|
56
|
-
import { SlidewiseEditor, type Deck } from "@textcortex/slidewise";
|
|
57
|
-
import "@textcortex/slidewise/style.css";
|
|
58
|
-
|
|
59
|
-
<SlidewiseEditor
|
|
60
|
-
deck={deck}
|
|
61
|
-
onChange={(next) => setDeck(next)}
|
|
62
|
-
onSave={(next) => persist(next)}
|
|
63
|
-
/>;
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
## Working with decks programmatically
|
|
67
|
-
|
|
68
|
-
Slidewise persists slides as a versioned JSON `Deck`. The schema is the
|
|
69
|
-
canonical contract — undo/redo, exports, AI features, and persistence all
|
|
70
|
-
key off it.
|
|
71
|
-
|
|
72
|
-
```ts
|
|
73
|
-
import {
|
|
74
|
-
parsePptx,
|
|
75
|
-
serializeDeck,
|
|
76
|
-
migrate,
|
|
77
|
-
CURRENT_DECK_VERSION,
|
|
78
|
-
type Deck,
|
|
79
|
-
} from "@textcortex/slidewise";
|
|
80
|
-
|
|
81
|
-
const deck: Deck = await parsePptx(blob); // import
|
|
82
|
-
const pptx: Blob = await serializeDeck(deck); // export
|
|
83
|
-
const safe: Deck = migrate(unknownDeckJson); // normalise an external deck
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
`migrate()` runs every external deck (PPTX import, JSON import, localStorage
|
|
87
|
-
hydration, host props) through the schema migration chain so the rest of the
|
|
88
|
-
editor only sees current-shape decks. It throws if the input was written by a
|
|
89
|
-
newer Slidewise than the host has installed — pin the version range you can
|
|
90
|
-
support.
|
|
91
|
-
|
|
92
|
-
## Releasing
|
|
93
|
-
|
|
94
|
-
Versioning and publishing run through
|
|
95
|
-
[changesets](https://github.com/changesets/changesets).
|
|
96
|
-
|
|
97
|
-
```bash
|
|
98
|
-
pnpm changeset # describe the impact of your change
|
|
99
|
-
pnpm version-packages # bump versions + update CHANGELOG (CI usually does this)
|
|
100
|
-
pnpm release # build + publish (CI does this on merge)
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
CI (`.github/workflows/release.yml`) opens a "Version Packages" PR whenever
|
|
104
|
-
there are pending changesets and publishes to npm when that PR merges.
|
|
105
|
-
|
|
106
|
-
## Repo layout
|
|
107
|
-
|
|
108
|
-
- `src/SlidewiseEditor.tsx` / `src/SlidewiseFileEditor.tsx` — public entry components
|
|
109
|
-
- `src/components/editor/` — top bar, slide rail, canvas, panels
|
|
110
|
-
- `src/lib/pptx/` — PPTX import (`pptxToDeck`) and export (`deckToPptx`)
|
|
111
|
-
- `src/lib/schema/` — `Deck` schema versioning + migrator
|
|
112
|
-
- `src/lib/types.ts` — `Deck` / `Slide` / `SlideElement` shapes (the contract)
|
package/dist/file.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
package/dist/globe.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { type CSSProperties } from "react";
|
|
2
|
-
import type { Deck } from "@/lib/types";
|
|
3
|
-
import "./SlidewiseEditor.css";
|
|
4
|
-
export interface SlidewiseEditorProps {
|
|
5
|
-
/**
|
|
6
|
-
* The deck to edit. Loaded into the editor on mount. If a different
|
|
7
|
-
* Deck reference is later passed, the editor's internal state is reset
|
|
8
|
-
* to it (dirty flag reset). Do NOT pass a new reference on every
|
|
9
|
-
* `onChange` — that would loop. Hold the deck in a stable ref, and
|
|
10
|
-
* only pass a new one when you intentionally want to reset the editor
|
|
11
|
-
* (e.g. discard changes, load a different file).
|
|
12
|
-
*/
|
|
13
|
-
deck: Deck;
|
|
14
|
-
/** Fires after every committed mutation; receives the updated deck. */
|
|
15
|
-
onChange?: (deck: Deck) => void;
|
|
16
|
-
/** Fires when the user clicks "Save" in the top bar. */
|
|
17
|
-
onSave?: (deck: Deck) => void | Promise<void>;
|
|
18
|
-
/** Optional override for the default `.slidewise.json` export. */
|
|
19
|
-
onExport?: (deck: Deck) => void;
|
|
20
|
-
/** Fires when the dirty flag flips. Useful for "unsaved changes" banners. */
|
|
21
|
-
onDirtyChange?: (dirty: boolean) => void;
|
|
22
|
-
/** Reserved for future use; not enforced yet. */
|
|
23
|
-
readOnly?: boolean;
|
|
24
|
-
/** "light" or "dark"; defaults to "light". Ignored after first render. */
|
|
25
|
-
theme?: "light" | "dark";
|
|
26
|
-
/** Slide id to land on; falls back to the first slide. */
|
|
27
|
-
initialSlideId?: string;
|
|
28
|
-
/** Render the built-in top bar (title, undo/redo, save, play). Default true. */
|
|
29
|
-
showTopBar?: boolean;
|
|
30
|
-
/** Override the bundled Geist font; sets `--font-geist-sans` on the root. */
|
|
31
|
-
fontFamily?: string;
|
|
32
|
-
/** Extra class names appended to the editor root. */
|
|
33
|
-
className?: string;
|
|
34
|
-
/** Inline style applied to the editor root. */
|
|
35
|
-
style?: CSSProperties;
|
|
36
|
-
}
|
|
37
|
-
export interface SlidewiseEditorHandle {
|
|
38
|
-
play(): void;
|
|
39
|
-
stop(): void;
|
|
40
|
-
undo(): void;
|
|
41
|
-
redo(): void;
|
|
42
|
-
getDeck(): Deck;
|
|
43
|
-
isDirty(): boolean;
|
|
44
|
-
resetDirty(): void;
|
|
45
|
-
}
|
|
46
|
-
export declare const SlidewiseEditor: import("react").ForwardRefExoticComponent<SlidewiseEditorProps & import("react").RefAttributes<SlidewiseEditorHandle>>;
|
|
47
|
-
export default SlidewiseEditor;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { type CSSProperties } from "react";
|
|
2
|
-
import type { Deck } from "@/lib/types";
|
|
3
|
-
export interface SlidewiseFileEditorProps {
|
|
4
|
-
/**
|
|
5
|
-
* Async loader for the file's bytes. Host is responsible for fetching the
|
|
6
|
-
* blob (e.g. via the platform's `getFile(fileId, { preview: true })`).
|
|
7
|
-
* Called once on mount.
|
|
8
|
-
*/
|
|
9
|
-
loadBlob: () => Promise<Blob | ArrayBuffer>;
|
|
10
|
-
/**
|
|
11
|
-
* Async saver for a serialized PPTX blob. Host is responsible for the
|
|
12
|
-
* upload and conflict handling (e.g. via `saveFileContent(fileId, …)`).
|
|
13
|
-
* Called when `save()` is invoked on the imperative API.
|
|
14
|
-
*/
|
|
15
|
-
saveBlob: (blob: Blob) => Promise<void>;
|
|
16
|
-
/** Disables editing affordances (TODO: not yet enforced). */
|
|
17
|
-
editable?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* The sha256 of the file's contents at load time, if the host wants to do
|
|
20
|
-
* conflict detection. Stored verbatim and surfaced via `getInitialSha256()`
|
|
21
|
-
* — Slidewise itself doesn't read it; the host's saveBlob implementation does.
|
|
22
|
-
*/
|
|
23
|
-
initialSha256?: string | null;
|
|
24
|
-
/**
|
|
25
|
-
* Receives an imperative API for save / dirty-tracking / play once the
|
|
26
|
-
* editor is mounted. Called with `null` on unmount.
|
|
27
|
-
*/
|
|
28
|
-
onEditorApiChange?: (api: SlidewiseFileEditorApi | null) => void;
|
|
29
|
-
theme?: "light" | "dark";
|
|
30
|
-
className?: string;
|
|
31
|
-
style?: CSSProperties;
|
|
32
|
-
/**
|
|
33
|
-
* Optional override for how the file is parsed. Default uses Slidewise's
|
|
34
|
-
* built-in PPTX parser. Useful for testing or for hosting a different
|
|
35
|
-
* binary deck format on top of the editor.
|
|
36
|
-
*/
|
|
37
|
-
parse?: (blob: Blob | ArrayBuffer) => Promise<Deck>;
|
|
38
|
-
/**
|
|
39
|
-
* Optional override for how the file is serialized. Default uses
|
|
40
|
-
* Slidewise's built-in PPTX writer.
|
|
41
|
-
*/
|
|
42
|
-
serialize?: (deck: Deck) => Promise<Blob>;
|
|
43
|
-
}
|
|
44
|
-
export interface SlidewiseFileEditorApi {
|
|
45
|
-
save(): Promise<void>;
|
|
46
|
-
isDirty(): boolean;
|
|
47
|
-
play(): void;
|
|
48
|
-
stop(): void;
|
|
49
|
-
undo(): void;
|
|
50
|
-
redo(): void;
|
|
51
|
-
getInitialSha256(): string | null;
|
|
52
|
-
}
|
|
53
|
-
export declare const SlidewiseFileEditor: import("react").ForwardRefExoticComponent<SlidewiseFileEditorProps & import("react").RefAttributes<SlidewiseFileEditorApi>>;
|
|
54
|
-
export default SlidewiseFileEditor;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function BottomToolbar(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function Canvas(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { Deck } from "@/lib/types";
|
|
2
|
-
interface EditorProps {
|
|
3
|
-
showTopBar?: boolean;
|
|
4
|
-
onSave?: (deck: Deck) => void | Promise<void>;
|
|
5
|
-
onExport?: (deck: Deck) => void;
|
|
6
|
-
}
|
|
7
|
-
export declare function Editor({ showTopBar, onSave, onExport }?: EditorProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { SlideElement, TextRun } from "@/lib/types";
|
|
2
|
-
export declare function ElementView({ el, editing, onTextCommit, }: {
|
|
3
|
-
el: SlideElement;
|
|
4
|
-
editing?: boolean;
|
|
5
|
-
onTextCommit?: (text: string, runs?: TextRun[]) => void;
|
|
6
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { SlideElement } from "@/lib/types";
|
|
2
|
-
export declare function FloatingToolbar({ element, scale, surfaceRef, }: {
|
|
3
|
-
element: SlideElement;
|
|
4
|
-
scale: number;
|
|
5
|
-
surfaceRef: React.RefObject<HTMLDivElement | null>;
|
|
6
|
-
}): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function GridView(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function PlayMode(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { SlideElement } from "@/lib/types";
|
|
2
|
-
export declare function SelectionFrame({ el, scale, editing, onChange, onCommitStart, }: {
|
|
3
|
-
el: SlideElement;
|
|
4
|
-
scale: number;
|
|
5
|
-
editing?: boolean;
|
|
6
|
-
onChange: (patch: Partial<SlideElement>) => void;
|
|
7
|
-
onCommitStart: () => void;
|
|
8
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function SlideRail(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { Deck } from "@/lib/types";
|
|
2
|
-
interface TopBarProps {
|
|
3
|
-
onSave?: (deck: Deck) => void | Promise<void>;
|
|
4
|
-
onExport?: (deck: Deck) => void;
|
|
5
|
-
}
|
|
6
|
-
export declare function TopBar({ onSave: onSaveProp, onExport: onExportProp }?: TopBarProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
package/dist/types/index.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export { SlidewiseEditor, type SlidewiseEditorProps, type SlidewiseEditorHandle, } from "./SlidewiseEditor";
|
|
2
|
-
export { SlidewiseFileEditor, type SlidewiseFileEditorProps, type SlidewiseFileEditorApi, } from "./SlidewiseFileEditor";
|
|
3
|
-
export { parsePptx, serializeDeck } from "./lib/pptx";
|
|
4
|
-
export type { ParseDiagnostics, ParseResult } from "./lib/pptx/types";
|
|
5
|
-
export { migrate, CURRENT_DECK_VERSION } from "./lib/schema/migrate";
|
|
6
|
-
export type { Deck, Slide, SlideElement, ElementType, EnterAnim, BaseElement, TextElement, ShapeElement, ShapeKind, ImageElement, LineElement, TableElement, IconElement, EmbedElement, UnknownElement, ElementDraft, } from "./lib/types";
|
|
7
|
-
export { SLIDE_W, SLIDE_H } from "./lib/types";
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { type PropsWithChildren } from "react";
|
|
2
|
-
import { type EditorState, type EditorStore } from "./store";
|
|
3
|
-
import type { Deck } from "./types";
|
|
4
|
-
export declare function EditorStoreProvider({ initialDeck, children, }: PropsWithChildren<{
|
|
5
|
-
initialDeck: Deck;
|
|
6
|
-
}>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export declare function useEditorStore(): EditorStore;
|
|
8
|
-
export declare function useEditor<T>(selector: (s: EditorState) => T): T;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { Deck } from "@/lib/types";
|
|
2
|
-
export declare function collectFontFamilies(deck: Deck): string[];
|
|
3
|
-
export declare function buildGoogleFontsHref(families: string[]): string | null;
|
|
4
|
-
/**
|
|
5
|
-
* Inject a <link rel="stylesheet"> for the given families. Idempotent per
|
|
6
|
-
* `instanceId` — calling again with a different family set replaces the
|
|
7
|
-
* previous link. Returns a disposer.
|
|
8
|
-
*/
|
|
9
|
-
export declare function ensureGoogleFontsLoaded(instanceId: string, families: string[]): () => void;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { Deck } from "@/lib/types";
|
|
2
|
-
/**
|
|
3
|
-
* Serialize a Slidewise Deck to a real PPTX blob. Round-trips well for the
|
|
4
|
-
* element types Slidewise natively supports (text, shape, image, line,
|
|
5
|
-
* table, icon, embed). UnknownElement and entrance animations are dropped
|
|
6
|
-
* with a warning — proper preservation requires bypassing pptxgenjs and
|
|
7
|
-
* is out of scope for v1.
|
|
8
|
-
*/
|
|
9
|
-
export declare function serializeDeck(deck: Deck): Promise<Blob>;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import type { Deck } from "@/lib/types";
|
|
2
|
-
/**
|
|
3
|
-
* Parse a PPTX blob into a Slidewise Deck. Coverage:
|
|
4
|
-
* - Slide background (solid + theme color)
|
|
5
|
-
* - Text boxes with placeholder inheritance from layout/master, theme-color
|
|
6
|
-
* resolution, multi-run formatting, paragraph alignment, lineHeight
|
|
7
|
-
* - Preset shapes (rect, roundRect, ellipse, triangle, diamond, star — and
|
|
8
|
-
* many other prsts mapped to the closest available kind so they at least
|
|
9
|
-
* render with correct fill/position)
|
|
10
|
-
* - Images (embedded media → data URLs, srcRect crop preserved)
|
|
11
|
-
* - Connector lines (cxnSp) and shapes authored as prst="line"
|
|
12
|
-
* - Tables (basic row/cell content + header/body fills)
|
|
13
|
-
* - Group shapes (recursed and flattened with the group transform applied)
|
|
14
|
-
* - Anything else (charts, SmartArt, embedded video) is preserved as
|
|
15
|
-
* UnknownElement carrying its raw OOXML so a save round-trip can re-emit
|
|
16
|
-
* it without data loss.
|
|
17
|
-
*/
|
|
18
|
-
export declare function parsePptx(blob: Blob | ArrayBuffer): Promise<Deck>;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { SlideElement } from "@/lib/types";
|
|
2
|
-
/**
|
|
3
|
-
* Result of parsing a PPTX archive. Surfaced to the caller so they can
|
|
4
|
-
* decide whether to warn about lossy fields (animations, transitions,
|
|
5
|
-
* unknown elements that fell into UnknownElement).
|
|
6
|
-
*/
|
|
7
|
-
export interface ParseDiagnostics {
|
|
8
|
-
unknownElementCount: number;
|
|
9
|
-
droppedAnimations: number;
|
|
10
|
-
warnings: string[];
|
|
11
|
-
}
|
|
12
|
-
export interface ParseResult {
|
|
13
|
-
diagnostics: ParseDiagnostics;
|
|
14
|
-
elements: SlideElement[];
|
|
15
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Unit conversions between Slidewise pixels and PPTX EMU/inches/points.
|
|
3
|
-
*
|
|
4
|
-
* Slidewise authors at a fixed 1920×1080 px canvas. PPTX widescreen layout is
|
|
5
|
-
* 13.333 × 7.5 inches (12,192,000 × 6,858,000 EMU). The mapping is linear:
|
|
6
|
-
* 1920 px ↔ 12,192,000 EMU ↔ 13.333 in
|
|
7
|
-
* 1080 px ↔ 6,858,000 EMU ↔ 7.5 in
|
|
8
|
-
*
|
|
9
|
-
* That gives 6350 EMU per pixel (and 144 px per inch, 0.5 pt per px).
|
|
10
|
-
*/
|
|
11
|
-
export declare const EMU_PER_INCH = 914400;
|
|
12
|
-
export declare const EMU_PER_POINT = 12700;
|
|
13
|
-
export declare const PX_PER_INCH = 144;
|
|
14
|
-
export declare const EMU_PER_PX: number;
|
|
15
|
-
export declare const POINTS_PER_PX = 0.5;
|
|
16
|
-
export declare const PPTX_SLIDE_W_INCHES: number;
|
|
17
|
-
export declare const PPTX_SLIDE_H_INCHES: number;
|
|
18
|
-
export declare const PPTX_SLIDE_W_EMU: number;
|
|
19
|
-
export declare const PPTX_SLIDE_H_EMU: number;
|
|
20
|
-
export declare const pxToEmu: (px: number) => number;
|
|
21
|
-
export declare const emuToPx: (emu: number) => number;
|
|
22
|
-
export declare const pxToInches: (px: number) => number;
|
|
23
|
-
export declare const inchesToPx: (inches: number) => number;
|
|
24
|
-
export declare const pxToPoints: (px: number) => number;
|
|
25
|
-
export declare const pointsToPx: (pt: number) => number;
|