Comments (2)
@Ilawy can you confirm that you're following the RSC instructions? https://puckeditor.com/docs/integrating-puck/server-components
from puck.
@chrisvxd It's happening in simplest config possible
here's an example:
//config.tsx
import PuckButton from "@/lib/puck/mini/button";
import { Config } from "@measured/puck";
export const config: Config = {
components: {
p: {
label: "Paragraph",
defaultProps: {
content: "Write here",
},
fields: {
content: {
type: "textarea",
},
},
render(props) {
return <p>{props.content}</p>;
},
},
},
};
//page.tsx
"use client";
import { Config, ComponentConfig, Puck } from "@measured/puck";
import "@measured/puck/puck.css";
import { useRouter } from "next/navigation";
import { config } from "./config";
export default function LabEditor() {
const router = useRouter();
return (
<Puck
config={config}
data={{}}
onPublish={(data) => {
router.push(
`/admin/lab/editor/show?data=${encodeURIComponent(
JSON.stringify(data)
)}`
);
}}
/>
);
}
//show/page.tsx
import { Render } from "@measured/puck/rsc";
import { config } from "../config";
import { resolveAllData } from "@measured/puck";
export default async function Show(props: any) {
const readyData = await resolveAllData(
JSON.parse(props.searchParams.data),
config
);
return <Render config={config} data={readyData} />;
}
from puck.
Related Issues (20)
- Improve resiliency of iframe CSS loading HOT 12
- Upgrade to typescript@5
- Stress testing HOT 1
- Typos in Actions docs
- Allow for more robust duplication actions HOT 2
- New drag-and-drop engine
- The page is not rendering server side. HOT 1
- Opportunity to interact with content inside of <Preview />
- Explore automatically injecting Puck styles
- Problem overriding custom fields
- Frame issue HOT 1
- React Server Components in the config HOT 3
- Type errors with TypeScript strict mode HOT 3
- [QUESTION] React Styled Components HOT 3
- Pass generic type to usePuck
- Apply draggable styles to correct element
- Implement async behaviour to resolvePermissions
- Can we have label properties defined as React.ReactNode?
- Align `resolvePermissions` with other resolvers
- getItemSummary receives mapProp value instead of original list value
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from puck.