Merge pull request #4274 from marmelab/documentation-ecosystem

Improve the documentation by setting the third-party library TinyMCE as deprecated in V3

docs/Ecosystem.md

@@ -10,39 +10,36 @@ title: "Ecosystem"
 - [Authentication Providers](#authentication-providers)
 - [Authorization Management](#authorization-management)
 - [Data Providers](#data-providers)
-- [User Interface](#ui)
+- [User Interface](#user-interface)
 - [Miscellaneous](#miscellaneous)
 
 ## Inputs and Fields
 
-- [vascofg/react-admin-color-input](https://github.com/vascofg/react-admin-color-input): a color input using [React Color](http://casesandberg.github.io/react-color/), a collection of color pickers
-- [LoicMahieu/aor-tinymce-input](https://github.com/LoicMahieu/aor-tinymce-input): a TinyMCE component, useful for editing HTML
-- [vascofg/react-admin-date-inputs](https://github.com/vascofg/react-admin-date-inputs): a collection of Date Inputs, based on [material-ui-pickers](https://material-ui-pickers.firebaseapp.com/)
-- [maluramichael/ra-input-markdown](https://github.com/maluramichael/ra-input-markdown): a markdown editor, based on [react-mde](https://github.com/andrerpena/react-mde) and [showdown](https://github.com/showdownjs/showdown)
+See the [Input](./Inputs.md#third-party-components) page.
 
 ## Translations
 
 See the [Translation](./Translation.md#available-locales) page.
 
 ## Authentication Providers
 
-* **[AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/setting-up-the-javascript-sdk.html)**: [thedistance/ra-cognito](https://github.com/thedistance/ra-cognito)
+- **[AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/setting-up-the-javascript-sdk.html)**: [thedistance/ra-cognito](https://github.com/thedistance/ra-cognito)
 
 ## Authorization Management
 
-* **[Access Control List (ACL) for Resources](https://github.com/marmelab/ra-auth-acl)**: [marmelab/ra-auth-acl](https://github.com/marmelab/ra-auth-acl)
+- **[Access Control List (ACL) for Resources](https://github.com/marmelab/ra-auth-acl)**: [marmelab/ra-auth-acl](https://github.com/marmelab/ra-auth-acl)
 
 ## Data Providers
 
 See the [Data Provider](./DataProviders.md#available-providers) page.
 
-## UI
+## User Interface
 
 - [**Bootstrap**](https://getbootstrap.com/): [bootstrap-styled/react-admin](https://bootstrap-styled.github.io/react-admin)
 
 ## Miscellaneous
 
-- [marmelab/ra-tree-ui-materialui](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/): Components to show data represented as a tree. Only compatible with react-admin v2 for now. 
+- [marmelab/ra-tree-ui-materialui](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/): Components to show data represented as a tree. Only compatible with react-admin v2 for now.
 - [marmelab/ra-tree-core](https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-core/): Components providing the logic but no UI to show data represented as a tree. Only compatible with react-admin v2 for now.
 - [ra-customizable-datagrid](https://github.com/fizix-io/ra-customizable-datagrid): plugin that allows to hide / show columns dynamically.
 - [FusionWorks/react-admin-google-maps](https://github.com/FusionWorks/react-admin-google-maps): Input/view components for displaying location using Google Maps.

docs/Inputs.md

@@ -33,7 +33,7 @@ All input components accept the following props:
 * `source`: Property name of your entity to view/edit. This attribute is required.
 * `label`: Used as input label. Defaults to the humanized `source` when omitted.
 * `validate`: Validation rules for the current property. See the [Validation Documentation](./CreateEdit.md#validation) for details.
-* `helperText`: Text to be displayed under the input. 
+* `helperText`: Text to be displayed under the input.
 * `className`: A class name (usually generated by JSS) to customize the look and feel of the input element itself
 * `formClassName`: Class name to be applied to the container of the input (e.g. the `<div>` forming each row in `<SimpleForm>`)
 * `fullWidth`: If `true`, the input will expand to fill the form width. Defaults to `false`.
@@ -127,8 +127,8 @@ import { ArrayInput, SimpleFormIterator, DateInput, TextInput } from 'react-admi
 
 ## `<AutocompleteInput>`
 
-To let users choose a value in a list using a dropdown with autocompletion, use `<AutocompleteInput>`. 
-It renders using [downshift](https://github.com/downshift-js/downshift) and a `fuzzySearch` filter. 
+To let users choose a value in a list using a dropdown with autocompletion, use `<AutocompleteInput>`.
+It renders using [downshift](https://github.com/downshift-js/downshift) and a `fuzzySearch` filter.
 Set the `choices` attribute to determine the options list (with `id`, `name` tuples).
 
 ```jsx
@@ -171,7 +171,7 @@ const choices = [
 ];
 ```
 
-However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the choice to be translated. 
+However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the choice to be translated.
 In that case, set the `translateChoice` prop to `false`.
 
 ```jsx
@@ -186,11 +186,13 @@ Ex. `<AutocompleteInput shouldRenderSuggestions={(val) => { return val.trim().le
 `<AutocompleteInput>` renders a [material-ui `<TextField>` component](https://material-ui.com/api/text-field/). Use the `options` attribute to override any of the `<TextField>` attributes:
 
 {% raw %}
+
 ```jsx
 <AutocompleteInput source="category" options={{
     color: 'secondary',
 }} />
 ```
+
 {% endraw %}
 
 **Tip**: If you want to populate the `choices` attribute with a list of related records, you should decorate `<AutocompleteInput>` with [`<ReferenceInput>`](#referenceinput), and leave the `choices` empty:
@@ -206,12 +208,14 @@ import { AutocompleteInput, ReferenceInput } from 'react-admin';
 Lastly, would you need to override the props of the suggestions container (a `Popper` element), you can specify them using the `options.suggestionsContainerProps`. For example:
 
 {% raw %}
+
 ```jsx
 <AutocompleteInput source="category" options={{
     suggestionsContainerProps: {
         disablePortal: true,
 }}} />
 ```
+
 {% endraw %}
 
 **Tip**: `<AutocompleteInput>` is a stateless component, so it only allows to *filter* the list of choices, not to *extend* it. If you need to populate the list of choices based on the result from a `fetch` call (and if [`<ReferenceInput>`](#referenceinput) doesn't cover your need), you'll have to [write your own Input component](#writing-your-own-input-component) based on material-ui `<AutoComplete>` component.
@@ -235,7 +239,7 @@ Lastly, would you need to override the props of the suggestions container (a `Po
 ## `<AutocompleteArrayInput>`
 
 To let users choose multiple values in a list using a dropdown with autocompletion, use `<AutocompleteArrayInput>`.
-It renders using [downshift](https://github.com/downshift-js/downshift) and a `fuzzySearch` filter. 
+It renders using [downshift](https://github.com/downshift-js/downshift) and a `fuzzySearch` filter.
 Set the `choices` attribute to determine the options list (with `id`, `name` tuples).
 
 ```jsx
@@ -290,11 +294,13 @@ Ex. `<AutocompleteArrayInput shouldRenderSuggestions={(val) => { return val.trim
 Lastly, `<AutocompleteArrayInput>` renders a [material-ui `<TextField>` component](https://material-ui.com/api/text-field/). Use the `options` attribute to override any of the `<TextField>` attributes:
 
 {% raw %}
+
 ```jsx
 <AutocompleteArrayInput source="category" options={{
     color: 'secondary',
 }} />
 ```
+
 {% endraw %}
 
 **Tip**: Like many other inputs, `<AutocompleteArrayInput>` accept a `fullWidth` prop.
@@ -311,12 +317,14 @@ import { AutocompleteArrayInput, ReferenceArrayInput } from 'react-admin';
 If you need to override the props of the suggestions container (a `Popper` element), you can specify them using the `options.suggestionsContainerProps`. For example:
 
 {% raw %}
+
 ```jsx
 <AutocompleteArrayInput source="category" options={{
     suggestionsContainerProps: {
         disablePortal: true,
 }}} />
 ```
+
 {% endraw %}
 
 **Tip**: `<ReferenceArrayInput>` is a stateless component, so it only allows to *filter* the list of choices, not to *extend* it. If you need to populate the list of choices based on the result from a `fetch` call (and if [`<ReferenceArrayInput>`](#referencearrayinput) doesn't cover your need), you'll have to [write your own Input component](#writing-your-own-input-component) based on [material-ui-chip-input](https://github.com/TeamWertarbyte/material-ui-chip-input).
@@ -357,6 +365,7 @@ This input does not handle `null` values. You would need the `<NullableBooleanIn
 You can use the `options` prop to pass any option supported by the Material UI `Switch` components. For example, here's how to set a custom checked icon:
 
 {% raw %}
+
 ```jsx
 import { BooleanInput } from 'react-admin';
 import FavoriteIcon from '@material-ui/icons/Favorite';
@@ -368,6 +377,7 @@ import FavoriteIcon from '@material-ui/icons/Favorite';
     }}
 />
 ```
+
 {% endraw %}
 
 ![CustomBooleanInputCheckIcon](./img/custom-switch-icon.png)
@@ -453,6 +463,7 @@ However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the
 Lastly, use the `options` attribute if you want to override any of Material UI's `<Checkbox>` attributes:
 
 {% raw %}
+
 ```jsx
 import { FavoriteBorder, Favorite } from '@material-ui/icons';
 
@@ -461,6 +472,7 @@ import { FavoriteBorder, Favorite } from '@material-ui/icons';
     checkedIcon: <Favorite />
 }} />
 ```
+
 {% endraw %}
 
 ### Properties
@@ -611,9 +623,11 @@ import { PasswordInput } from 'react-admin';
 **Tip**: It is possible to set the [`autocomplete` attribute](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs/autocomplete) by injecting an input props:
 
 {% raw %}
+
 ```jsx
 <PasswordInput source="password" inputProps={{ autocomplete: 'current-password' }} />
 ```
+
 {% endraw %}
 
 ## `<RadioButtonGroupInput>`
@@ -682,11 +696,13 @@ However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the
 Lastly, use the `options` attribute if you want to override any of Material UI's `<RadioButtonGroup>` attributes:
 
 {% raw %}
+
 ```jsx
 <RadioButtonGroupInput source="category" options={{
     labelPosition: 'right'
 }} />
 ```
+
 {% endraw %}
 
 Refer to [Material UI RadioGroup documentation](https://material-ui.com/api/radio-group) for more details.
@@ -777,6 +793,7 @@ import { ReferenceArrayInput, SelectArrayInput } from 'react-admin';
 You can tweak how this component fetches the possible values using the `perPage`, `sort`, and `filter` props.
 
 {% raw %}
+
 ```jsx
 // by default, fetches only the first 25 values. You can extend this limit
 // by setting the `perPage` prop.
@@ -805,6 +822,7 @@ You can tweak how this component fetches the possible values using the `perPage`
     <SelectArrayInput optionText="name" />
 </ReferenceArrayInput>
 ```
+
 {% endraw %}
 
 `<ReferenceArrayInput>` also accepts the [common input props](./Inputs.md#common-input-props).
@@ -864,6 +882,7 @@ const CommentFilter = (props) => (
 You can tweak how this component fetches the possible values using the `perPage`, `sort`, and `filter` props.
 
 {% raw %}
+
 ```jsx
 // by default, fetches only the first 25 values. You can extend this limit
 // by setting the `perPage` prop.
@@ -892,6 +911,7 @@ You can tweak how this component fetches the possible values using the `perPage`
     <SelectInput optionText="title" />
 </ReferenceInput>
 ```
+
 {% endraw %}
 
 The child component may further filter results (that's the case, for instance, for `<AutocompleteInput>`). ReferenceInput passes a `setFilter` function as prop to its child component. It uses the value to create a filter for the query - by default `{ q: [searchText] }`. You can customize the mapping
@@ -1022,6 +1042,7 @@ const FullNameField = ({ record }) => <span>{record.first_name} {record.last_nam
 ```
 
 Enabling the `allowEmpty` props adds an empty choice (with a default `''` value, which you can overwrite with the `emptyValue` prop) on top of the options. You can furthermore customize the `MenuItem` for the empty choice by using the `emptyText` prop, which can receive either a string or a React Element, which doesn't receive any props.
+
 ```jsx
 <SelectInput source="category" allowEmpty emptyValue={null} choices={[
     { id: 'programming', name: 'Programming' },
@@ -1050,11 +1071,13 @@ Note that `translateChoice` is set to `false` when `<SelectInput>` is a child of
 Lastly, use the `options` attribute if you want to override any of Material UI's `<SelectField>` attributes:
 
 {% raw %}
+
 ```jsx
 <SelectInput source="category" options={{
     maxHeight: 200
 }} />
 ```
+
 {% endraw %}
 
 Refer to [Material UI Select documentation](https://material-ui.com/api/select) for more details.
@@ -1166,9 +1189,11 @@ const choices = [
 Lastly, use the `options` attribute if you want to override any of the `<Select>` attributes:
 
 {% raw %}
+
 ```jsx
 <SelectArrayInput source="category" options={{ fullWidth: true }} />
 ```
+
 {% endraw %}
 
 Refer to [the Select documentation](https://material-ui.com/api/select) for more details.
@@ -1257,6 +1282,7 @@ import { TextInput } from 'react-admin';
 The data format returned by the input component may not be what your API desires. Since React-admin uses react-final-form, we can use its [`parse()`](https://github.com/final-form/react-final-form#parse-value-any-name-string--any) and [`format()`](https://github.com/final-form/react-final-form#format-value-any-name-string--any) functions to transform the input value when saving to and loading from the record.
 
 Mnemonic for the two functions:
+
 - `parse()`: input -> record
 - `format()`: record -> input
 
@@ -1295,9 +1321,11 @@ const dateParser = v => {
 
 You can find components for react-admin in third-party repositories.
 
-* [vascofg/react-admin-color-input](https://github.com/vascofg/react-admin-color-input): a color input using [React Color](http://casesandberg.github.io/react-color/), a collection of color pickers.
-* [LoicMahieu/aor-tinymce-input](https://github.com/LoicMahieu/aor-tinymce-input): a TinyMCE component, useful for editing HTML
-* [vascofg/react-admin-date-inputs](https://github.com/vascofg/react-admin-date-inputs): a collection of Date Inputs, based on [material-ui-pickers](https://material-ui-pickers.firebaseapp.com/)
+- [vascofg/react-admin-color-input](https://github.com/vascofg/react-admin-color-input): a color input using [React Color](http://casesandberg.github.io/react-color/), a collection of color pickers.
+- [vascofg/react-admin-date-inputs](https://github.com/vascofg/react-admin-date-inputs): a collection of Date Inputs, based on [material-ui-pickers](https://material-ui-pickers.firebaseapp.com/)
+- [maluramichael/ra-input-markdown](https://github.com/maluramichael/ra-input-markdown): a markdown editor, based on [react-mde](https://github.com/andrerpena/react-mde) and [showdown](https://github.com/showdownjs/showdown)
+
+- **DEPRECATED V3** [LoicMahieu/aor-tinymce-input](https://github.com/LoicMahieu/aor-tinymce-input): a TinyMCE component, useful for editing HTML
 
 ## Writing Your Own Input Component
 
@@ -1385,7 +1413,7 @@ import TextField from '@material-ui/core/TextField';
 import { useField } from 'react-final-form';
 
 const BoundedTextField = ({ name, label }) => {
-    const { 
+    const {
         input: { onChange },
         meta: { touched, error }
     } = useField(name);
@@ -1408,7 +1436,7 @@ const LatLngInput = () => (
 );
 ```
 
-**Tip**: Material-ui's `<TextField>` component already includes a label, so you don't need to use `<Labeled>` in this case. 
+**Tip**: Material-ui's `<TextField>` component already includes a label, so you don't need to use `<Labeled>` in this case.
 
 `useField()` returns two values: `input` and `meta`. To learn more about these props, please refer to [the `useField()` hook documentation](https://final-form.org/docs/react-final-form/api/useField) in the react-final-form website.
 
@@ -1443,7 +1471,7 @@ import TextField from '@material-ui/core/TextField';
 import { useInput, required } from 'react-admin';
 
 const BoundedTextField = props => {
-    const { 
+    const {
         input: { name, onChange },
         meta: { touched, error },
         isRequired
@@ -1644,6 +1672,7 @@ import { FormDataConsumer } from 'react-admin';
 **Tip**: When using a `FormDataConsumer` you can define `subscription` prop to pass to the `react-final-form`
 
 {% raw %}
+
 ```jsx
 import { FormDataConsumer } from 'react-admin';
 
@@ -1660,4 +1689,5 @@ import { FormDataConsumer } from 'react-admin';
      </Edit>
  );
 ```
+
 {% endraw %}