docs: new and improve lexical docs, hoist up all headings (#6639)

This commit is contained in:
Alessio Gravili
2024-06-05 17:08:15 -04:00
committed by GitHub
parent aee3ee21d1
commit 19f8cbcf76
84 changed files with 1215 additions and 1122 deletions

View File

@@ -44,7 +44,7 @@ And return the following values:
It is important that the `depth` argument matches exactly with the depth of your initial page request. The depth property is used to populated relationships and uploads beyond their IDs. See [Depth](../getting-started/concepts#depth) for more information.
</Banner>
### React
## React
If your front-end application is built with client-side [React](https://react.dev) like [Next.js Pages Router](https://nextjs.org/docs/pages), you can use the `useLivePreview` hook that Payload provides.
@@ -79,7 +79,7 @@ export const PageClient: React.FC<{
}
```
### Vue
## Vue
If your front-end application is built with [Vue 3](https://vuejs.org) or [Nuxt 3](https://nuxt.js), you can use the `useLivePreview` composable that Payload provides.
@@ -114,7 +114,7 @@ const { data } = useLivePreview<PageData>({
</template>
```
### Building your own hook
## Building your own hook
No matter what front-end framework you are using, you can build your own hook using the same underlying tooling that Payload provides.
@@ -232,7 +232,7 @@ For a working demonstration of this, check out the official [Live Preview Exampl
## Troubleshooting
#### Relationships and/or uploads are not populating
### Relationships and/or uploads are not populating
If you are using relationships or uploads in your front-end application, and your front-end application runs on a different domain than your Payload server, you may need to configure [CORS](../configuration/overview) to allow requests to be made between the two domains. This includes sites that are running on a different port or subdomain. Similarly, if you are protecting resources behind user authentication, you may also need to configure [CSRF](../authentication/overview#csrf-protection) to allow cookies to be sent between the two domains. For example:
@@ -257,7 +257,7 @@ If you are using relationships or uploads in your front-end application, and you
}
```
#### Relationships and/or uploads disappear after editing a document
### Relationships and/or uploads disappear after editing a document
It is possible that either you are setting an improper [`depth`](../getting-started/concepts#depth) in your initial request and/or your `useLivePreview` hook, or they're mismatched. Ensure that the `depth` parameter is set to the correct value, and that it matches exactly in both places. For example:

View File

@@ -18,7 +18,7 @@ Server-side Live Preview works by making a roundtrip to the server every time yo
If your front-end application is built with [React](#react), you can use the `RefreshRouteOnChange` function that Payload provides. In the future, all other major frameworks like Vue and Svelte will be officially supported. If you are using any of these frameworks today, you can still integrate with Live Preview yourself using the underlying tooling that Payload provides. See [building your own router refresh component](#building-your-own-router-refresh-component) for more information.
### React
## React
If your front-end application is built with [React](https://react.dev) or [Next.js](https://nextjs.org), you can use the `RefreshRouteOnSave` component that Payload provides.
@@ -157,7 +157,7 @@ export const RefreshRouteOnSave: React.FC<{
## Troubleshooting
#### Updates do not appear as fast as client-side Live Preview
### Updates do not appear as fast as client-side Live Preview
If you are noticing that updates feel less snappy than client-side Live Preview (i.e. the `useLivePreview` hook), this is because of how the two differ in how they work—instead of emitting events against form state as you type, server-side Live Preview refreshes the route after a new document is saved. You can use autosave to mimic this effect. Try decreasing the value of `versions.autoSave.interval` to make the experience feel more responsive: