docs: fix syntax that couldn't be parsed (#10207)

Author: AlessioGr

docs/admin/hooks.mdx

@@ -176,7 +176,7 @@ The `useForm` hook returns an object with the following properties:
   rows={[
     [
       {
-        value: <strong><code>fields</code></strong>,
+        value: `<strong><code>fields</code></strong>`,
       },
       {
         value: "Deprecated. This property cannot be relied on as up-to-date.",
@@ -187,7 +187,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>submit</code></strong>,
+        value: `<strong><code>submit</code></strong>`,
       },
       {
         value: "Method to trigger the form to submit",
@@ -198,7 +198,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>dispatchFields</code></strong>,
+        value: `<strong><code>dispatchFields</code></strong>`,
       },
       {
         value: "Dispatch actions to the form field state",
@@ -209,7 +209,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>validateForm</code></strong>,
+        value: `<strong><code>validateForm</code></strong>`,
       },
       {
         value: "Trigger a validation of the form state",
@@ -220,18 +220,18 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>createFormData</code></strong>,
+        value: `<strong><code>createFormData</code></strong>`,
       },
       {
-        value: <>Create a <code>multipart/form-data</code> object from the current form's state</>,
+        value: `<>Create a <code>multipart/form-data</code> object from the current form's state</>`,
       },
       {
         value: ''
       }
     ],
     [
       {
-        value: <strong><code>disabled</code></strong>,
+        value: `<strong><code>disabled</code></strong>`,
       },
       {
         value: "Boolean denoting whether or not the form is disabled",
@@ -242,7 +242,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>getFields</code></strong>,
+        value: `<strong><code>getFields</code></strong>`,
       },
       {
         value: 'Gets all fields from state',
@@ -253,7 +253,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>getField</code></strong>,
+        value: `<strong><code>getField</code></strong>`,
       },
       {
         value: 'Gets a single field from state by path',
@@ -264,7 +264,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>getData</code></strong>,
+        value: `<strong><code>getData</code></strong>`,
       },
       {
         value: 'Returns the data stored in the form',
@@ -275,7 +275,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>getSiblingData</code></strong>,
+        value: `<strong><code>getSiblingData</code></strong>`,
       },
       {
         value: 'Returns form sibling data for the given field path',
@@ -286,40 +286,40 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>setModified</code></strong>,
+        value: `<strong><code>setModified</code></strong>`,
       },
       {
-        value: <>Set the form\'s <code>modified</code> state</>,
+        value: `<>Set the form\'s <code>modified</code> state</>`,
       },
       {
         value: '',
       },
     ],
     [
       {
-        value: <strong><code>setProcessing</code></strong>,
+        value: `<strong><code>setProcessing</code></strong>`,
       },
       {
-        value: <>Set the form\'s <code>processing</code> state</>,
+        value: `<>Set the form\'s <code>processing</code> state</>`,
       },
       {
         value: '',
       },
     ],
     [
       {
-        value: <strong><code>setSubmitted</code></strong>,
+        value: `<strong><code>setSubmitted</code></strong>`,
       },
       {
-        value: <>Set the form\'s <code>submitted</code> state</>,
+        value: `<>Set the form\'s <code>submitted</code> state</>`,
       },
       {
         value: '',
       },
     ],
     [
       {
-        value: <strong><code>formRef</code></strong>,
+        value: `<strong><code>formRef</code></strong>`,
       },
       {
         value: 'The ref from the form HTML element',
@@ -330,7 +330,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>reset</code></strong>,
+        value: `<strong><code>reset</code></strong>`,
       },
       {
         value: 'Method to reset the form to its initial state',
@@ -341,7 +341,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: <strong><code>addFieldRow</code></strong>,
+        value: `<strong><code>addFieldRow</code></strong>`,
       },
       {
         value: "Method to add a row on an array or block field",
@@ -350,7 +350,7 @@ The `useForm` hook returns an object with the following properties:
         drawerTitle: 'addFieldRow',
         drawerDescription: 'A useful method to programmatically add a row to an array or block field.',
         drawerSlug: 'addFieldRow',
-        drawerContent: (
+        drawerContent: `
 <>
   <TableWithDrawers
     columns={[
@@ -392,7 +392,7 @@ The `useForm` hook returns an object with the following properties:
 {' '}
 
 <pre>
-  {`import { useForm } from "payload/components/forms";
+  {\`import { useForm } from "payload/components/forms";
 
 export const CustomArrayManager = () => {
   const { addFieldRow } = useForm()
@@ -415,12 +415,12 @@ export const CustomArrayManager = () => {
       Add Row
     </button>
   )
-}`}
+}\`}
 </pre>
 
   <p>An example config to go along with the Custom Component</p>
   <pre>
-{`const ExampleCollection = {
+{\`const ExampleCollection = {
   slug: "example-collection",
   fields: [
     {
@@ -443,15 +443,15 @@ export const CustomArrayManager = () => {
       },
     },
   ],
-}`}
+}\`}
   </pre>
 </>
-        )
+        `
       }
     ],
     [
       {
-        value: <strong><code>removeFieldRow</code></strong>,
+        value: `<strong><code>removeFieldRow</code></strong>`,
       },
       {
         value: "Method to remove a row from an array or block field",
@@ -460,7 +460,7 @@ export const CustomArrayManager = () => {
         drawerTitle: 'removeFieldRow',
         drawerDescription: 'A useful method to programmatically remove a row from an array or block field.',
         drawerSlug: 'removeFieldRow',
-        drawerContent: (
+        drawerContent:  `
 <>
   <TableWithDrawers
     columns={[
@@ -494,7 +494,7 @@ export const CustomArrayManager = () => {
 {' '}
 
 <pre>
-  {`import { useForm } from "payload/components/forms";
+  {\`import { useForm } from "payload/components/forms";
 
 export const CustomArrayManager = () => {
   const { removeFieldRow } = useForm()
@@ -512,12 +512,12 @@ export const CustomArrayManager = () => {
       Remove Row
     </button>
   )
-}`}
+}\`}
 </pre>
 
   <p>An example config to go along with the Custom Component</p>
   <pre>
-{`const ExampleCollection = {
+{\`const ExampleCollection = {
   slug: "example-collection",
   fields: [
     {
@@ -540,15 +540,15 @@ export const CustomArrayManager = () => {
       },
     },
   ],
-}`}
+}\`}
   </pre>
 </>
-        )
+        `
       }
     ],
     [
       {
-        value: <strong><code>replaceFieldRow</code></strong>,
+        value: `<strong><code>replaceFieldRow</code></strong>`,
       },
       {
         value: "Method to replace a row from an array or block field",
@@ -557,7 +557,7 @@ export const CustomArrayManager = () => {
         drawerTitle: 'replaceFieldRow',
         drawerDescription: 'A useful method to programmatically replace a row from an array or block field.',
         drawerSlug: 'replaceFieldRow',
-        drawerContent: (
+        drawerContent:  `
 <>
   <TableWithDrawers
     columns={[
@@ -599,7 +599,7 @@ export const CustomArrayManager = () => {
 {' '}
 
 <pre>
-  {`import { useForm } from "payload/components/forms";
+  {\`import { useForm } from "payload/components/forms";
 
 export const CustomArrayManager = () => {
   const { replaceFieldRow } = useForm()
@@ -622,12 +622,12 @@ export const CustomArrayManager = () => {
       Replace Row
     </button>
   )
-}`}
+}\`}
 </pre>
 
   <p>An example config to go along with the Custom Component</p>
   <pre>
-{`const ExampleCollection = {
+{\`const ExampleCollection = {
   slug: "example-collection",
   fields: [
     {
@@ -650,10 +650,10 @@ export const CustomArrayManager = () => {
       },
     },
   ],
-}`}
+}\`}
   </pre>
 </>
-        )
+         `
       }
     ],
   ]}

docs/rest-api/overview.mdx

@@ -50,7 +50,7 @@ Note: Collection slugs must be formatted in kebab-case
             updatedAt: "2023-04-27T11:27:32.419Z",
           },
         },
-        drawerContent: (
+        drawerContent: `
           <>
             <h6>Additional <code>find</code> query parameters</h6>
             The <code>find</code> endpoint supports the following additional query parameters:
@@ -72,7 +72,7 @@ Note: Collection slugs must be formatted in kebab-case
               </li>
             </ul>
           </>
-        ),
+        `,
       },
     },
     {