Refactor links in mdx

Author: rvsia

packages/react-renderer-demo/src/app/pages/renderer/action-mapper.md

@@ -1,14 +1,12 @@
 import Grid from '@material-ui/core/Grid'
-import RouterLink from 'next/link';
-import Link from '@material-ui/core/Link';
 import ListOfContents from '../../src/helpers/list-of-contents';
 
 <Grid container item>
 <Grid item xs={12} md={10}>
 
 # Action Mapper
 
-The <RouterLink href="/renderer/renderer-api#optionalprops"><Link href="/renderer/renderer-api#optionalprops">ActionMapper</Link></RouterLink> allows you to map schema props to functions. This is useful when your schema is not written in JavaScript and you cannot use function inside of it, especially for schemas stored in databases.
+The [ActionMapper](/renderer/renderer-api#optionalprops) allows you to map schema props to functions. This is useful when your schema is not written in JavaScript and you cannot use function inside of it, especially for schemas stored in databases.
 
 ## Mapper
 

packages/react-renderer-demo/src/app/pages/renderer/component-api.md

@@ -1,6 +1,4 @@
 import Grid from '@material-ui/core/Grid'
-import RouterLink from 'next/link';
-import Link from '@material-ui/core/Link';
 
 import ListOfContents from '../../src/helpers/list-of-contents';
 import ExampleLink from '@docs/components/common/example-link';
@@ -55,7 +53,7 @@ All those components provides a shared group of props:
 |isRequired|boolean|Is the field required?|
 |isDisabled|boolean|Is the field disabled?|
 |isReadOnly|boolean|Is the field readOnly?|
-|initialValue|custom|There are two ways how to set initial values in the form: you can use either the <RouterLink href="/renderer/renderer-api"><Link href="/renderer/renderer-api">initialValues</Link></RouterLink> prop for the whole form or you can set the value in the schema for each field separately. For more information, please see [here](https://final-form.org/docs/react-final-form/types/FieldProps#initialvalue).|
+|initialValue|custom|There are two ways how to set initial values in the form: you can use either the [initialValues](/renderer/renderer-api) prop for the whole form or you can set the value in the schema for each field separately. For more information, please see [here](https://final-form.org/docs/react-final-form/types/FieldProps#initialvalue).|
 
 ## Text field
 
@@ -187,7 +185,7 @@ Wizard step <br/>
 |----|:--:|----------:|
 |title|node/string|Step title|
 |name|string, number|Uniq name of the step|
-|nextStep|object/name of next step|See <RouterLink href="/component-example/wizard"><Link href="/component-example/wizard">wizard documentation</Link></RouterLink>|
+|nextStep|object/name of next step|See [wizard documentation](/component-example/wizard)|
 |fields|array|An array of form fields|
 
 <ExampleLink to='wizard' />

packages/react-renderer-demo/src/app/pages/renderer/condition.md

@@ -1,5 +1,3 @@
-import Link from 'next/link';
-
 import Grid from '@material-ui/core/Grid'
 
 import ListOfContents from '../../src/helpers/list-of-contents';
@@ -190,7 +188,7 @@ condition: {
 
 ## Clearing values
 
-If you need to clear values after switching fields, please see <Link href="/renderer/unmounting"><a href="/renderer/unmounting">here</a></Link>.
+If you need to clear values after switching fields, please see [here](/renderer/unmounting).
 
 </Grid>
 <Grid item xs={false} md={2}>

packages/react-renderer-demo/src/app/pages/renderer/field-array.md

@@ -1,5 +1,3 @@
-import RouterLink from 'next/link';
-import Link from '@material-ui/core/Link';
 import Grid from '@material-ui/core/Grid'
 import RawComponent from '@docs/raw-component';
 
@@ -10,7 +8,7 @@ import ListOfContents from '../../src/helpers/list-of-contents';
 
 # Field Array Provider
 
-Simillarly to <RouterLink href='/renderer/field-provider'><Link href='/renderer/field-provider'>FieldProvider</Link></RouterLink> Data driven forms provide an option how to inlude <a href='https://github.com/final-form/react-final-form-arrays'>React Final Form Arrays</a> in your form. Please visit their documentation to learn about functionality.
+Simillarly to [FieldProvider](/renderer/field-provider) Data driven forms provide an option how to inlude [React Final Form Arrays](https://github.com/final-form/react-final-form-arrays) in your form. Please visit their documentation to learn about functionality.
 
 ## Using FieldArray
 
@@ -58,7 +56,7 @@ You don't need to name the nested components, then the values are saved as an ar
 
 # Validators
 
-You can use user a few provided validators (you can also use your <RouterLink href='/renderer/validators'><Link href='/renderer/validators'>own</Link></RouterLink>.)
+You can use user a few provided validators (you can also use your [own](/renderer/validators).)
 
 ```jsx
 MIN_ITEMS_VALIDATOR: ({threshold})

packages/react-renderer-demo/src/app/pages/renderer/form-template.md

@@ -1,7 +1,5 @@
 import Grid from '@material-ui/core/Grid'
 import RawComponent from '@docs/raw-component';
-import RouterLink from 'next/link';
-import Link from '@material-ui/core/Link';
 
 import ListOfContents from '../../src/helpers/list-of-contents';
 
@@ -37,7 +35,7 @@ With using `useFormApi` hook you can get access to all form information and func
 
 ## Customize form buttons
 
-You can customize form buttons in your <RouterLink href='/renderer/renderer-api#requiredprops'><Link href='/renderer/renderer-api#requiredprops'>FormTemplate</Link></RouterLink> component
+You can customize form buttons in your [FormTemplate](/renderer/renderer-api#requiredprops) component
 
 <RawComponent source="custom-buttons" />
 

packages/react-renderer-demo/src/app/pages/renderer/initialize-mount.md

@@ -1,6 +1,4 @@
 import Grid from '@material-ui/core/Grid'
-import RouterLink from 'next/link';
-import Link from '@material-ui/core/Link';
 import RawComponent from '@docs/raw-component';
 
 import ListOfContents from '../../src/helpers/list-of-contents';
@@ -14,7 +12,7 @@ Data Driven Forms provides a way how you can easily initialized a field when the
 
 Just pass a `initializeOnMount` prop and set it to `true`.
 
-The field will use the `initialValue` set in the schema (<RouterLink href="/renderer/component-api#formgroupwrappedcomponents"><Link href="/renderer/component-api#formgroupwrappedcomponents">initialValue</Link></RouterLink>) or in the renderer (<RouterLink href="/renderer/renderer-api#optionalprops"><Link href="/renderer/renderer-api#optionalprops">initialValues</Link></RouterLink>).
+The field will use the `initialValue` set in the schema ([initialValue](/renderer/component-api#formgroupwrappedcomponents)) or in the renderer ([initialValues](/renderer/renderer-api#optionalprops)).
 
 `initialValue` has higher priority than a value from `initialValues`.
 
@@ -32,13 +30,13 @@ The field will use the `initialValue` set in the schema (<RouterLink href="/rend
 
 ## When to use it?
 
-This feature comes handy if you need change a value when an user traverses a form, which shows and hides fields, and the value is not set by the user. Very useful case is used it wizard forms, where you can set different value for the same input according the way the user went in the wizard form by using this option combined with <RouterLink href="/renderer/component-api#commonpropsforallformfields"><Link href="/renderer/component-api#commonpropsforallformfields">hideField</Link></RouterLink> prop.
+This feature comes handy if you need change a value when an user traverses a form, which shows and hides fields, and the value is not set by the user. Very useful case is used it wizard forms, where you can set different value for the same input according the way the user went in the wizard form by using this option combined with [hideField](/renderer/component-api#commonpropsforallformfields) prop.
 
 <RawComponent source="initialize-mount" />
 
 ## Clear the value
 
-If you need clear the value after unmounting, you can do it by using <RouterLink href="/renderer/unmounting"><Link href="/renderer/unmounting">clearOnUnmount</Link></RouterLink>.
+If you need clear the value after unmounting, you can do it by using [clearOnUnmount](/renderer/unmounting).
 
 </Grid>
 <Grid item xs={false} md={2}>

packages/react-renderer-demo/src/app/pages/renderer/renderer-api.md

@@ -1,5 +1,3 @@
-import RouterLink from 'next/link';
-import Link from '@material-ui/core/Link';
 import Grid from '@material-ui/core/Grid'
 
 import ListOfContents from '../../src/helpers/list-of-contents';
@@ -16,33 +14,33 @@ Form Renderer provides a lot of customization via props.
 
 |Prop|Type|Description|
 |----|:--:|----------:|
-|<RouterLink href="/renderer/component-mapping"><Link href="/renderer/component-mapping">componentMapper</Link></RouterLink>|object|Defines types of form field components. Field components can change the state of the form.|
-|<RouterLink href="/renderer/form-template"><Link href="/renderer/component-mapping">FormTemplate</Link></RouterLink>|Component|Components which defines a template of the form. This component receives two props from the renderer: `formFields` and `schema`. `formFields` is the content of the form. You should wrap this content into your `<form>` component and add form buttons.|
+|[componentMapper](/renderer/component-mapping)|object|Defines types of form field components. Field components can change the state of the form.|
+|[FormTemplate](/renderer/component-mapping)|Component|Components which defines a template of the form. This component receives two props from the renderer: `formFields` and `schema`. `formFields` is the content of the form. You should wrap this content into your `<form>` component and add form buttons.|
 |onSubmit|func|A submit callback which receives two arguments: `values` and `formApi`.|
 |schema|object|A schema which defines structure of the form.|
 
 ## Optional props
 
 |Prop|Type|Description|Default|
 |----|:--:|----------:|------:|
-|<RouterLink href="/renderer/action-mapper"><Link href="/renderer/action-mapper">actionMapper</Link></RouterLink>|object|Action mapper allows to map props to functions.||
-|<RouterLink href="/renderer/unmounting"><Link href="/renderer/unmounting">clearOnUnmount</Link></RouterLink>|bool|Will clear values of unmounted components. You can also set this to specific component in the form schema.|false|
-|<RouterLink href="/renderer/cleared-value"><Link>clearedValue</Link></RouterLink>|any|Value that will be set to field with **initialValue** after deleting it. Useful for forms while editing.|undefined|
+|[actionMapper](/renderer/action-mapper)|object|Action mapper allows to map props to functions.||
+|[clearOnUnmount](/renderer/unmounting)|bool|Will clear values of unmounted components. You can also set this to specific component in the form schema.|false|
+|[clearedValue](/renderer/cleared-value)|any|Value that will be set to field with **initialValue** after deleting it. Useful for forms while editing.|undefined|
 |onReset|func|A reset callback. You don't need to manually clear the form values!||
 |onCancel|func|A cancel callback, which receives `values` as the first argument.||
 |debug|func|A function which will be called with every form update, i.e. `({ values }) => setValues(values)`, please take a look [here](https://final-form.org/docs/react-final-form/types/FormProps#debug)||
 |initialValues|object|An object of fields names as keys and values as their values.||
 |subscription|object|You can pass your own [subscription](https://final-form.org/docs/react-final-form/types/FormProps#subscription), which will be added to default settings.|`{ pristine: true, submitting: true, valid: true }`|
-|<RouterLink href="/renderer/validators"><Link href="/renderer/validators">validate</Link></RouterLink>|func|A function which receives all form values and returns an object with errors.||
-|<RouterLink href="/renderer/validators#validatormapper"><Link href="/renderer/validators#validatormapper">validatorMapper</Link></RouterLink>|object|A mapper containing custom validators, it's automatically merged with the default one.||
+|[validate](/renderer/validators)|func|A function which receives all form values and returns an object with errors.||
+|[validatorMapper](/renderer/validators#validatormapper)|object|A mapper containing custom validators, it's automatically merged with the default one.||
 
 # Schema
 
-The root object of the schema represents the <RouterLink href="/renderer/component-mapping#formwrapper"><Link href="/renderer/component-mapping#formwrapper">Form</Link></RouterLink> component, that needs only this prop:
+The root object of the schema represents the Form component, that needs only this prop:
 
 |Prop|Type|Description|
 |----|:--:|----------:|
-|fields|array of objects|<RouterLink href="/renderer/component-api"><Link href="/renderer/component-api">Components</Link></RouterLink> of the form. Required!|
+|fields|array of objects|[Components](/renderer/component-api) of the form. Required!|
 
 You can use all other props in your `formTemplate` components.
 

packages/react-renderer-demo/src/app/pages/renderer/validators.md

@@ -1,7 +1,5 @@
 import Grid from '@material-ui/core/Grid'
 import RawComponent from '@docs/raw-component';
-import RouterLink from 'next/link';
-import Link from '@material-ui/core/Link';
 
 import ListOfContents from '../../src/helpers/list-of-contents';
 
@@ -60,7 +58,7 @@ If you do not want to trigger the async validator after every stroke, you can us
 
 # Custom validator mapper
 
-If you need to expand default Data Driven Forms validator types, you can use <RouterLink href="/renderer/renderer-api#optionalprops"><Link href="/renderer/renderer-api#optionalprops">validatorMapper</Link></RouterLink>.
+If you need to expand default Data Driven Forms validator types, you can use [validatorMapper](/renderer/renderer-api#optionalprops).
 
 ```jsx
 const customValidatorMapper = {

packages/react-renderer-demo/src/app/src/components/mdx/mdx-components.js

@@ -16,6 +16,7 @@ import ShareButton from './share-button';
 import { makeStyles } from '@material-ui/core/styles';
 import { useRouter } from 'next/router';
 
+import RouterLink from 'next/link';
 import dynamic from 'next/dynamic';
 const CodeEditor = dynamic(import('../code-editor'), {
   ssr: false
@@ -87,11 +88,16 @@ const MdxComponents = {
       />
     </div>
   ),
-  a: ({ href, children }) => (
-    <Link href={href} rel="noopener noreferrer" target="_blank">
-      {children}
-    </Link>
-  ),
+  a: ({ href, children }) =>
+    href.startsWith('/') ? (
+      <RouterLink href={href}>
+        <Link href={href}>{children}</Link>
+      </RouterLink>
+    ) : (
+      <Link href={href} rel="noopener noreferrer" target="_blank">
+        {children}
+      </Link>
+    ),
   h1: (props) => <Heading {...props} level={4} component="h1" />,
   h2: (props) => <Heading {...props} level={5} component="h2" />,
   h3: (props) => <Heading {...props} level={6} component="h3" />,

packages/react-renderer-demo/src/app/src/doc-components/pf4-dual-list.md

@@ -1,11 +1,8 @@
-import RouterLink from 'next/link';
-import Link from '@material-ui/core/Link';
-
 This a custom component with a custom design. Things can be changed, after official PF4 release.
 
 **Props**
 
-Dual list select is wrapped in a form group, so it accepts all <RouterLink href="/renderer/component-api#formgroupwrappedcomponents"><Link href="/renderer/component-api#formgroupwrappedcomponents">form group props</Link></RouterLink>.
+Dual list select is wrapped in a form group, so it accepts all [form group props](/renderer/component-api#formgroupwrappedcomponents).
 
 |Props|Type|Default|Description|
 |-----|----|-------|-----------|