docs: fix incorrect docs for complex mdx components (#10212)

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: "**`fields`**",
       },
       {
         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: "**`submit`**",
       },
       {
         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: "**`dispatchFields`**",
       },
       {
         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: "**`validateForm`**",
       },
       {
         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: "**`createFormData`**",
       },
       {
-        value: `<>Create a <code>multipart/form-data</code> object from the current form's state</>`,
+        value: "Create a `multipart/form-data` object from the current form's state",
       },
       {
         value: ''
       }
     ],
     [
       {
-        value: `<strong><code>disabled</code></strong>`,
+        value: "**`disabled`**",
       },
       {
         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: "**`getFields`**",
       },
       {
         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: "**`getField`**",
       },
       {
         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: "**`getData`**",
       },
       {
         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: "**`getSiblingData`**",
       },
       {
         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: "**`setModified`**",
       },
       {
-        value: `<>Set the form\'s <code>modified</code> state</>`,
+        value: "Set the form\'s `modified` state",
       },
       {
         value: '',
       },
     ],
     [
       {
-        value: `<strong><code>setProcessing</code></strong>`,
+        value: "**`setProcessing`**",
       },
       {
-        value: `<>Set the form\'s <code>processing</code> state</>`,
+        value: "Set the form\'s `processing` state",
       },
       {
         value: '',
       },
     ],
     [
       {
-        value: `<strong><code>setSubmitted</code></strong>`,
+        value: "**`setSubmitted`**",
       },
       {
-        value: `<>Set the form\'s <code>submitted</code> state</>`,
+        value: "Set the form\'s `submitted` state",
       },
       {
         value: '',
       },
     ],
     [
       {
-        value: `<strong><code>formRef</code></strong>`,
+        value: "**`formRef`**",
       },
       {
         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: "**`reset`**",
       },
       {
         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: "**`addFieldRow`**",
       },
       {
         value: "Method to add a row on an array or block field",
@@ -351,7 +351,6 @@ The `useForm` hook returns an object with the following properties:
         drawerDescription: 'A useful method to programmatically add a row to an array or block field.',
         drawerSlug: 'addFieldRow',
         drawerContent: `
-<>
   <TableWithDrawers
     columns={[
       'Prop',
@@ -360,23 +359,23 @@ The `useForm` hook returns an object with the following properties:
     rows={[
       [
         {
-          value: <strong><code>path</code></strong>,
+          value: "**\`path\`**",
         },
         {
           value: "The path to the array or block field",
         },
       ],
       [
         {
-          value: <strong><code>rowIndex</code></strong>,
+          value: "**\`rowIndex\`**",
         },
         {
           value: "The index of the row to add. If omitted, the row will be added to the end of the array.",
         },
       ],
       [
         {
-          value: <strong><code>data</code></strong>,
+          value: "**\`data<\`**",
         },
         {
           value: "The data to add to the row",
@@ -385,13 +384,8 @@ The `useForm` hook returns an object with the following properties:
     ]}
   />
 
-{' '}
 
-<br />
-
-{' '}
-
-<pre>
+\`\`\`tsx
   {\`import { useForm } from "payload/components/forms";
 
 export const CustomArrayManager = () => {
@@ -416,10 +410,11 @@ export const CustomArrayManager = () => {
     </button>
   )
 }\`}
-</pre>
+\`\`\`
+
+An example config to go along with the Custom Component
 
-  <p>An example config to go along with the Custom Component</p>
-  <pre>
+\`\`\`tsx
 {\`const ExampleCollection = {
   slug: "example-collection",
   fields: [
@@ -444,14 +439,13 @@ export const CustomArrayManager = () => {
     },
   ],
 }\`}
-  </pre>
-</>
-        `
+\`\`\`
+`
       }
     ],
     [
       {
-        value: `<strong><code>removeFieldRow</code></strong>`,
+        value: "**`removeFieldRow`**",
       },
       {
         value: "Method to remove a row from an array or block field",
@@ -461,7 +455,6 @@ export const CustomArrayManager = () => {
         drawerDescription: 'A useful method to programmatically remove a row from an array or block field.',
         drawerSlug: 'removeFieldRow',
         drawerContent:  `
-<>
   <TableWithDrawers
     columns={[
       'Prop',
@@ -470,15 +463,15 @@ export const CustomArrayManager = () => {
     rows={[
       [
         {
-          value: <strong><code>path</code></strong>,
+          value: "**\`path\`**",
         },
         {
           value: "The path to the array or block field",
         },
       ],
       [
         {
-          value: <strong><code>rowIndex</code></strong>,
+          value: "**\`rowIndex\`**",
         },
         {
           value: "The index of the row to remove",
@@ -487,13 +480,9 @@ export const CustomArrayManager = () => {
     ]}
   />
 
-{' '}
 
-<br />
 
-{' '}
-
-<pre>
+\`\`\`tsx
   {\`import { useForm } from "payload/components/forms";
 
 export const CustomArrayManager = () => {
@@ -513,10 +502,11 @@ export const CustomArrayManager = () => {
     </button>
   )
 }\`}
-</pre>
+\`\`\`
+
+An example config to go along with the Custom Component
 
-  <p>An example config to go along with the Custom Component</p>
-  <pre>
+\`\`\`tsx
 {\`const ExampleCollection = {
   slug: "example-collection",
   fields: [
@@ -541,14 +531,13 @@ export const CustomArrayManager = () => {
     },
   ],
 }\`}
-  </pre>
-</>
-        `
+\`\`\`
+`
       }
     ],
     [
       {
-        value: `<strong><code>replaceFieldRow</code></strong>`,
+        value: "**`replaceFieldRow`**",
       },
       {
         value: "Method to replace a row from an array or block field",
@@ -558,7 +547,6 @@ export const CustomArrayManager = () => {
         drawerDescription: 'A useful method to programmatically replace a row from an array or block field.',
         drawerSlug: 'replaceFieldRow',
         drawerContent:  `
-<>
   <TableWithDrawers
     columns={[
       'Prop',
@@ -567,23 +555,23 @@ export const CustomArrayManager = () => {
     rows={[
       [
         {
-          value: <strong><code>path</code></strong>,
+          value: "**\`path\`**",
         },
         {
           value: "The path to the array or block field",
         },
       ],
       [
         {
-          value: <strong><code>rowIndex</code></strong>,
+          value: "**\`rowIndex\`**",
         },
         {
           value: "The index of the row to replace",
         },
       ],
       [
         {
-          value: <strong><code>data</code></strong>,
+         value: "**\`data\`**",
         },
         {
           value: "The data to replace within the row",
@@ -592,13 +580,10 @@ export const CustomArrayManager = () => {
     ]}
   />
 
-{' '}
 
-<br />
 
-{' '}
 
-<pre>
+\`\`\`tsx
   {\`import { useForm } from "payload/components/forms";
 
 export const CustomArrayManager = () => {
@@ -623,10 +608,11 @@ export const CustomArrayManager = () => {
     </button>
   )
 }\`}
-</pre>
+\`\`\`
+
+An example config to go along with the Custom Component
 
-  <p>An example config to go along with the Custom Component</p>
-  <pre>
+\`\`\`tsx
 {\`const ExampleCollection = {
   slug: "example-collection",
   fields: [
@@ -651,8 +637,7 @@ export const CustomArrayManager = () => {
     },
   ],
 }\`}
-  </pre>
-</>
+\`\`\`
          `
       }
     ],