@measured/puck 0.12.0-canary.afd6a9d → 0.12.0-canary.b0d1620
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 +9 -9
- package/dist/{Config-60a50493.d.ts → Config-a03de579.d.ts} +1 -0
- package/dist/index.css +287 -150
- package/dist/index.d.ts +4 -4
- package/dist/index.js +407 -517
- package/dist/rsc.d.ts +1 -1
- package/package.json +22 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Puck
|
|
2
2
|
|
|
3
3
|
The self-hosted, drag and drop editor for React.
|
|
4
4
|
|
|
@@ -21,7 +21,7 @@ The self-hosted, drag and drop editor for React.
|
|
|
21
21
|
|
|
22
22
|
- 🖱️ **Drag and drop**: Visual editing for your existing React component library
|
|
23
23
|
- 🌐 **Integrations**: Load your content from a 3rd party headless CMS
|
|
24
|
-
- ✍️ **Inline editing**: Author content directly via
|
|
24
|
+
- ✍️ **Inline editing**: Author content directly via Puck for convenience
|
|
25
25
|
- ⭐️ **No vendor lock-in**: Self-host or integrate with your existing application
|
|
26
26
|
|
|
27
27
|
[See demo](https://puck-editor-demo.vercel.app/edit)
|
|
@@ -33,9 +33,9 @@ Render the editor:
|
|
|
33
33
|
```jsx
|
|
34
34
|
// Editor.jsx
|
|
35
35
|
import { Puck } from "@measured/puck";
|
|
36
|
-
import "@measured/puck/
|
|
36
|
+
import "@measured/puck/puck.css";
|
|
37
37
|
|
|
38
|
-
// Create
|
|
38
|
+
// Create Puck component config
|
|
39
39
|
const config = {
|
|
40
40
|
components: {
|
|
41
41
|
HeadingBlock: {
|
|
@@ -71,7 +71,7 @@ Render the page:
|
|
|
71
71
|
```jsx
|
|
72
72
|
// Page.jsx
|
|
73
73
|
import { Render } from "@measured/puck";
|
|
74
|
-
import "@measured/puck/
|
|
74
|
+
import "@measured/puck/puck.css";
|
|
75
75
|
|
|
76
76
|
export function Page() {
|
|
77
77
|
return <Render config={config} data={data} />;
|
|
@@ -86,7 +86,7 @@ Install the package
|
|
|
86
86
|
npm i @measured/puck --save
|
|
87
87
|
```
|
|
88
88
|
|
|
89
|
-
Or generate a
|
|
89
|
+
Or generate a Puck application using a recipe
|
|
90
90
|
|
|
91
91
|
```sh
|
|
92
92
|
npx create-puck-app my-app
|
|
@@ -380,7 +380,7 @@ If you want to use React server components, use ` <Render>` from the `@measured/
|
|
|
380
380
|
|
|
381
381
|
```tsx
|
|
382
382
|
import { Render } from "@measured/puck/rsc";
|
|
383
|
-
import "@measured/puck/
|
|
383
|
+
import "@measured/puck/puck.css";
|
|
384
384
|
|
|
385
385
|
export function Page() {
|
|
386
386
|
return <Render config={config} data={data} />;
|
|
@@ -521,7 +521,7 @@ External fields can be used to load content from an external content repository,
|
|
|
521
521
|
|
|
522
522
|
### `AppState`
|
|
523
523
|
|
|
524
|
-
The `AppState` object stores the
|
|
524
|
+
The `AppState` object stores the Puck application state.
|
|
525
525
|
|
|
526
526
|
- **data** (`Data`): The page data currently being rendered
|
|
527
527
|
- **ui** (`object`):
|
|
@@ -536,7 +536,7 @@ The `AppState` object stores the puck application state.
|
|
|
536
536
|
|
|
537
537
|
### `Data`
|
|
538
538
|
|
|
539
|
-
The `Data` object stores the
|
|
539
|
+
The `Data` object stores the Puck page data.
|
|
540
540
|
|
|
541
541
|
- **root** (`ComponentData`): The component data for the root of your configuration.
|
|
542
542
|
- **props** (object): Extends `ComponentData.props`, with some additional props
|