Fixing docs formatting

Author: davidkpiano

docs/api/Control.md

@@ -1,3 +1,4 @@
+{% raw %}
 # Control Component
 
 **Prop Types**
@@ -91,7 +92,7 @@ export default createStore(combineForms({
 It can also be a function that returns a string model. See [the documentation on tracking](../guides/tracking.md) for more information.
 
 <h2 id="prop-mapProps"></h2>
-## `mapProps={\{...}}`
+## `mapProps={{...}}`
 _(Object | Function)_: A custom mapping from props provided by `Control` to props received by the component. Can be:
 
 - An object, where each value is a function from original props to corresponding value in result props.
@@ -100,7 +101,7 @@ _(Object | Function)_: A custom mapping from props provided by `Control` to prop
 Examples:
 ```jsx
 <Control
-  mapProps={\{
+  mapProps={{
     customChange: (props) => props.change,
   }}
   model="..."
@@ -129,15 +130,15 @@ You can also specify `updateOn={['change', 'blur']}` as an array of one or more
 - Use the `changeAction` prop if you want to dispatch custom actions along with the `actions.change(...)` action.
 
 <h2 id="prop-validators"></h2>
-## `validators={\{...}}`
+## `validators={{...}}`
 _(Object)_: A map where the keys are validation keys, and the values are the corresponding functions that determine the validity of each key, given the model's value.
 
 For example, this control validates that a username exists and is longer than 4 characters:
 
 ```jsx
 <Control.text
   model="user.username"
-  validators={\{
+  validators={{
     required: (val) => val.length,
     length: (val) => val.length > 4
   }}
@@ -153,7 +154,7 @@ const length = (val) => val.length > 8;
 
 <Control.text
   model="user.username"
-  validators={\{ required, length }}
+  validators={{ required, length }}
 />
 ```
 
@@ -169,7 +170,7 @@ _(String | Array)_: A string/array of strings specifying when validation should
 - To avoid displaying error messages on load (as controls might be invalid), use the `.pristine` property of the control when conditionally showing error messages, or use the `<Errors>` component.
 
 <h2 id="prop-asyncValidators"></h2>
-## `asyncValidators={\{...}}`
+## `asyncValidators={{...}}`
 _(Object)_: A map where the keys are validation keys, and the values are the corresponding functions that (asynchronously) determine the validity of each key, given the model's value.
 
 Each async validator function is called with 2 arguments:
@@ -183,7 +184,7 @@ For example, this control validates that a username is available via a promise:
 import isAvailable from '../path/to/is-available';
 
 <Control.text model="user.username"
-  asyncValidators={\{
+  asyncValidators={{
     isAvailable: (value, done) => {
       isAvailable(value)
         .then((result) => done(result));
@@ -202,7 +203,7 @@ _(String | Array)_: A string/array of strings specifying when async validation s
 - `"focus"` - validate on the `onFocus` event handler
 
 <h2 id="prop-errors"></h2>
-## `errors={\{...}}`
+## `errors={{...}}`
 _(Object)_: A map where the keys are error keys, and the values are the corresponding error validator functions that determine the invalidity of each key, given the model's value.
 
 An **error validator** is a function that returns `true` or a truthy value (such as a string) if invalid, and `false` if valid.
@@ -212,7 +213,7 @@ For example, this control validates that a username exists and is longer than 4
 ```jsx
 <Control.text
   model="user.username"
-  errors={\{
+  errors={{
     isEmpty: (val) => !val.length,
     tooLong: (val) => val.length > 16,
   }}
@@ -281,7 +282,7 @@ function changeAndSubmit(model, value) {
 - Since `changeAction` expects an action creator and `redux-thunk` is used, you can asynchronously dispatch actions (like the example above).
 
 <h2 id="prop-controlProps"></h2>
-## `controlProps={\{...}}`
+## `controlProps={{...}}`
 _(Object)_: A mapping of control-specific props that will be applied directly to the rendered control. In some cases, this can be a safer way of applying props, especially if there are naming conflicts between `<Control>`-specific props (such as `"model"`) and props that need to go on the rendered control (e.g., `<input {...props} />`).
 
 The normal behavior is that any extraneous props on `<Control>` that are not part of `Control.propTypes` (which are documented here) will be given to the rendered input.
@@ -293,7 +294,7 @@ Example:
 <Control.text
   model="..."
   component={CustomInput}
-  controlProps={\{errors: 'errors for CustomInput'}}
+  controlProps={{errors: 'errors for CustomInput'}}
 />
 ```
 
@@ -336,7 +337,7 @@ However, in `<Control>`, it can be a boolean, or a function, string, or object a
 // Disable the submit button when the form is invalid
 <Control.button
   model="user"
-  disabled={\{ valid: false }}
+  disabled={{ valid: false }}
 >
   Submit!
 </Control.button>
@@ -345,7 +346,7 @@ However, in `<Control>`, it can be a boolean, or a function, string, or object a
 For example:
 - `disabled={true}` or `disabled={false}` will disable or enable the control respectively, as will any other primitive value, such as `undefined`, `null`, or a number
 - `disabled="touched"` will disable if the field is `touched` (works with any property on the field)
-- `disabled={\{ valid: false, touched: true }}` will disable if the field is both `touched` and not `valid`
+- `disabled={{ valid: false, touched: true }}` will disable if the field is both `touched` and not `valid`
 - `disabled={(fieldValue) => !fieldValue.valid}` will call the function provided with the `fieldValue` to determine its `disabled` state.
 
 (since: version 1.3.0)
@@ -371,7 +372,7 @@ _(Boolean)_: Signifies that the field state (validation, etc.) should not persis
 // even when the control is unmounted.
 <Control.text
   model="user.name"
-  validators={\{ length: (value) => value.length > 8 }}
+  validators={{ length: (value) => value.length > 8 }}
   persist
 />
 ```
@@ -398,3 +399,4 @@ For `<Control.checkbox />`, the default `getValue` function is:
 _(Boolean)_: Signifies that the control is a toggle (e.g., a checkbox or a radio). If `true`, then some optimizations are made.
 
 Default: `true` for `<Control.radio>` and `<Control.checkbox>`, `false` for all other controls.
+{% endraw %}

docs/api/Errors.md

@@ -1,3 +1,4 @@
+{% raw %}
 # Errors Component
 
 ## `<Errors />`
@@ -9,12 +10,12 @@ The `<Errors />` component provides a handy way of displaying form errors for a
 <Control.text
   type="email"
   model="user.email"
-  validators={\{ isEmail, isRequired }}
+  validators={{ isEmail, isRequired }}
 />
 
 <Errors
   model="user.email"
-  messages={\{
+  messages={{
     isRequired: 'Please provide an email address.',
     isEmail: (val) => `${val} is not a valid email.`,
   }}
@@ -48,13 +49,13 @@ _(String | Function)_: the string representation of the model path to show the e
 ```jsx
 <Errors
   model="user"
-  messages={\{
+  messages={{
     passwordsMatch: 'Passwords do not match.',
   }}
 />
 ```
 
-## `messages={\{...}}`
+## `messages={{...}}`
 
 _(Object)_: a plain object mapping where:
 - the keys are error keys (such as `"required"`)
@@ -67,7 +68,7 @@ If the message value is a function, it will be called with the model value.
 ```jsx
 <Errors
   model="user.email"
-  messages={\{
+  messages={{
     required: 'Please enter an email address.',
     length: 'The email address is too long.',
     invalid: (val) => `${val} is not a valid email address.',
@@ -78,7 +79,7 @@ If the message value is a function, it will be called with the model value.
 ### Notes
 - The `messages` prop is a great place to keep custom error messages that can vary based on the location in the UI, instead of hardcoding error messages in validation fuctions.
 - If a message is _not_ provided for an error key, the message will default to the key value in the control's `.errors` property.
-  - This means if you're using `actions.setErrors` or the `errors={\{...}}` prop in `<Control>` or `<Field>` to set error messages, they will automatically be shown in `<Errors />`.
+  - This means if you're using `actions.setErrors` or the `errors={{...}}` prop in `<Control>` or `<Field>` to set error messages, they will automatically be shown in `<Errors />`.
 
 ## `show={...}`
 
@@ -90,7 +91,7 @@ It can be a boolean, or a function, string, or object as a [Lodash iteratee](htt
 ### Examples
 - `show={true}` will always show the errors if they exist
 - `show={(field) => field.touched && !field.focus}` will show errors if the model's field is touched and not focused
-- `show={\{touched: true, focus: false}}` is the same as above
+- `show={{touched: true, focus: false}}` is the same as above
 - `show="touched"` will show errors if the model's field is touched
 
 ### Notes
@@ -119,3 +120,4 @@ _(String | Function | Element)_: The `component`, which is the component for eac
   - `fieldValue` - the current field state of the `model`
   - `children` - the error message (text).
 - `component={CustomError}` will wrap the error in a `<CustomError>` component, which will receive the same props as above.
+{% endraw %}

docs/api/Form.md

@@ -14,7 +14,7 @@ const passwordsMatch = ({ password, confirmPassword }) => {
 
 // in render() return block:
 <Form model="user"
-  validators={\{
+  validators={{
     '': { passwordsMatch },
     email: { required, isEmail },
     password: { required },
@@ -49,7 +49,7 @@ Typically, the `<Control>` (and/or `<Field>`) components nested inside `<Form>`
 
 You can also use [partial models](../guides/partial-models.md) for `<Control>`, `<Field>`, `<Fieldset>`, and `<Errors>` components inside of `<Form>` - they will be resolved to the form's model.
 
-## `validators={\{...}}`
+## `validators={{...}}`
 _(Object)_: An object representing the validators for the fields inside the form, where:
 
 - the **keys** are the field model names (e.g. `'email'` for `user.email`)
@@ -65,15 +65,15 @@ Validation will occur on _any field model change_ by default, and only the valid
 - Specifying validators on the form is usually sufficient - you don't need to put validators on the `<Field>` or `<Control>` for most use cases.
 - If you need validators to run on submit, this is the place to put them.
 
-## `errors={\{...}}`
+## `errors={{...}}`
 _(Object)_: An object representing the error validators for the fields inside the form, where:
 
 - the **keys** are the field model names (e.g. `'email'` for `user.email`)
 - the **values** are error validator(s) for the field model. They can be:
   - an error validator function, which receives the field model value, or
   - an error validator object, with validation keys and error validator functions as values, also receiving the field model value.
 
-Its behavior is identical to the `validators={\{...}}` prop, with the exception that an error validator that returns anything truthy is interpreted as an _error_. See [the validation guide](../guides/validation.md) for more info.
+Its behavior is identical to the `validators={{...}}` prop, with the exception that an error validator that returns anything truthy is interpreted as an _error_. See [the validation guide](../guides/validation.md) for more info.
 
 ## `validateOn="..."`
 _(String)_: A string that indicates when `validators` or `errors` (for error validators) should run.
@@ -126,7 +126,7 @@ class MyForm extends React.Component {
     return (
       <Form
         model="user"
-        validators={\{...}}
+        validators={{...}}
         onSubmit={ (user) => this.handleSubmit(user) }
       >
         <Control type="email" model=".email" />
@@ -170,7 +170,7 @@ class MyForm extends React.Component {
     return (
       <Form
         model="user"
-        validators={\{...}}
+        validators={{...}}
         onSubmit={...}
         onSubmitFailed={ (userForm) => this.handleSubmitFailed(userForm) }
       >

docs/guides/compare-redux-form.md

@@ -165,9 +165,9 @@ const SyncValidationForm = () => (
       <label>Username</label>
       <Control.text
         placeholder="Username"
-        validators={\{ required }}
+        validators={{ required }}
       />
-      <Errors messages={\{ required: 'Required' }} />
+      <Errors messages={{ required: 'Required' }} />
     </div>
   </Form>
 );

docs/guides/custom-controls.md

@@ -78,7 +78,7 @@ By default, any props on `<Control>` that are _not_ part of the `Control.propTyp
 <Control.checkbox
   model="user.active"
   component={MyCheckbox}
-  controlProps={\{
+  controlProps={{
     label: 'Is user active?', // will also be passed to MyCheckbox
   }}
 />
@@ -120,7 +120,7 @@ const CustomInput = (props) => (
 const CustomInputControl = (props) => (
   <Control
     component={CustomInput}
-    mapProps={\{
+    mapProps={{
       value: (props) => props.viewValue,
     }}
     {...props}
@@ -139,13 +139,13 @@ const CustomInputControl = (props) => (
 
 ## Advanced Custom Controls
 
-Some custom controls won't have prop keys that match up exactly with the standard event handler props, such as `onChangeText` in React Native's `<TextInput>` component corresponding to `onChange`. You can specify a prop mapping in the `mapProps={\{...}}` prop to specify the mapping:
+Some custom controls won't have prop keys that match up exactly with the standard event handler props, such as `onChangeText` in React Native's `<TextInput>` component corresponding to `onChange`. You can specify a prop mapping in the `mapProps={{...}}` prop to specify the mapping:
 
 ```jsx
 <Control
   model="..."
   component={DatePickerIOS}
-  mapProps={\{
+  mapProps={{
     date: (props) => props.modelValue,
     onDateChange: (props) => props.onChange,
   }}

docs/guides/faqs.md

@@ -1,3 +1,4 @@
+{% raw %}
 # Frequently Asked Questions
 
 This list will be updated frequently!
@@ -20,12 +21,12 @@ const store = createStore(combineReducers({
 
 ### How do you add conditional class names based on field state?
 
-Use the `mapProps={\{...}}` property on `<Control>` components to set any props on the control component based on field state, like this:
+Use the `mapProps={{...}}` property on `<Control>` components to set any props on the control component based on field state, like this:
 
 ```jsx
 <Control.text
   model="user.firstName"
-  mapProps={\{
+  mapProps={{
     className: ({fieldValue}) => fieldValue.focus
       ? 'focused'
       : ''
@@ -42,7 +43,7 @@ The props that are provided to each function value in your `mapProps` mapping ar
 
 as well as other additional props:
 - all props on the `<Control>`
-- all props on the `controlProps={\{...}}` prop (if any)
+- all props on the `controlProps={{...}}` prop (if any)
 - `onKeyPress`
 - `viewValue`
 
@@ -59,7 +60,7 @@ const BirthDate = ({forModel}) => (
   <Form
     model={`${forModel}.birth`}
     component="div"
-    validators={\{
+    validators={{
       '': ({day, month, year}) => isOver18(day, month, year),
     }}
   >
@@ -156,3 +157,4 @@ class UploadForm extends Component {
 
 ### Other Questions and Answers
 - https://github.com/davidkpiano/react-redux-form/issues/675#issuecomment-281164930
+{% endraw %}