Merge pull request #9052 from marmelab/doc-smartrichtextinput

[Doc] Add SmartRichTextInput, an AI assistant for rich text content

Author: slax57

docs/Features.md

@@ -680,7 +680,7 @@ And if you want something super custom that react-admin doesn't support out of t
 
 ## AI-Powered Components
 
-React-admin leverages recent breakthroughs in AI to **boost user productivity**.
+React-admin leverages recent breakthroughs in Artificial Intelligence (AI) to **boost user productivity**.
 
 One example is [`<PredictiveTextInput>`](./PredictiveTextInput.md), which suggests completion for the input value, using your favorite AI backend. Users can accept the completion by pressing the `Tab` key. It's like Intellisense or Copilot for your forms.
 
@@ -709,7 +709,12 @@ const PersonEdit = () => (
 );
 ```
 
-See [the `<PredictiveTextInput>` documentation](./PredictiveTextInput.md) for more details.
+You can also use the [`<SmartRichTextInput>`](./SmartRichTextInput.md) component, which lets users edit HTML documents in WYSIWYG with superpowers:
+
+<video controls playsinline muted loop poster="https://marmelab.com/ra-enterprise/modules/assets/SmartRichTextInput.png" >
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/SmartRichTextInput.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
 
 ## Fast
 

docs/Inputs.md

@@ -63,7 +63,7 @@ React-admin provides a set of Input components, each one designed for a specific
 | Data Type             | Example value                                                | Input Components                                                                                                                                                                                     |
 |-----------------------|--------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | String                | `'Lorem Ipsum'`                                              | [`<TextInput>`](./TextInput.md), [`<PredictiveTextInput>`](./PredictiveTextInput.md)                                                                                                                 |
-| Rich text             | `<p>Lorem Ipsum</p>`                                         | [`<RichTextInput>`](./RichTextInput.md)                                                                                                                                                              |
+| Rich text             | `<p>Lorem Ipsum</p>`                                         | [`<RichTextInput>`](./RichTextInput.md), [`<SmartRichTextInput>`](./SmartRichTextInput.md)                                                                                                                                                              |
 | Markdown              | `# Lorem Ipsum`                                              | [`<MarkdownInput>`](./MarkdownInput.md)                                                                                                                                                              |
 | Password              | `'********'`                                                 | [`<PasswordInput>`](./PasswordInput.md)                                                                                                                                                              |
 | Image URL             | `'https://example.com/image.png'`                            | [`<ImageInput>`](./ImageInput.md)                                                                                                                                                                    |

docs/PredictiveTextInput.md

@@ -14,6 +14,8 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
 
 The actual completion is fetched from your Data Provider, based on the current record and input value, using the `dataProvider.getCompletion()` method. This allows you to use any completion API, such as [OpenAI Completion API](https://beta.openai.com/docs/api-reference/completions), [Anthropic](https://console.anthropic.com/docs/api), or your own completion model.
 
+You can test this component online in the [Enterprise Edition Storybook](https://react-admin.github.io/ra-enterprise/?path=/story/ra-ai-input-predictivetextinput--context).
+
 ## Usage
 
 Use `<PredictiveTextInput>` instead of `<TextInput>` in your forms:
@@ -393,3 +395,30 @@ const getParamsForPrompt = (prompt) => {
     return { key, value, record };
 }
 ```
+
+## Rich Text Editor
+
+If you want AI completions combined with a WYSIWYG editor for rich text, use [`<SmartRichTextInput>`](./SmartRichTextInput.md) instead of `<PredictiveTextInput>`.
+
+<video controls playsinline muted loop poster="https://marmelab.com/ra-enterprise/modules/assets/SmartRichTextInput.png" >
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/SmartRichTextInput.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+Use it just like `<PredictiveTextInput>`:
+
+```jsx
+import { Edit, SimpleForm, TextInput } from 'react-admin';
+import { SmartRichTextInput } from '@react-admin/ra-ai';
+
+export const PostEdit = () => (
+    <Edit>
+        <SimpleForm>
+            <TextInput source="title" />
+            <SmartRichTextInput source="body" />
+        </SimpleForm>
+    </Edit>
+);
+```
+
+Check out the [`<SmartRichTextInput>` documentation](./SmartRichTextInput.md) for more details.

docs/Reference.md

@@ -166,6 +166,7 @@ title: "Index"
 * [`<SimpleList>`](./SimpleList.md)
 * [`<SimpleShowLayout>`](./SimpleShowLayout.md)
 * [`<SingleFieldList>`](./SingleFieldList.md)
+* [`<SmartRichTextInput>`](./SmartRichTextInput.md)<img class="icon" src="./img/premium.svg" />
 * [`<SortButton>`](./SortButton.md)
 * [`<StackedFilters>`](./StackedFilters.md)<img class="icon" src="./img/premium.svg" />
 

docs/RichTextInput.md

@@ -171,3 +171,31 @@ const MyRichTextInput = ({ size, ...props }) => (
 );
 ```
 
+## AI Writing Assistant
+
+Modern AI tools can be a great help for editors. React-admin proposes an AI-powered writing assistant for the `<RichTextInput>` component, called [`<SmartRichTetInput>`](./SmartRichTextInput.md):
+
+<video controls playsinline muted loop poster="https://marmelab.com/ra-enterprise/modules/assets/SmartRichTextInput.png" >
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/SmartRichTextInput.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+`<SmartRichTextInput>` is a drop-in replacement for `<RichTextInput>`: 
+
+```jsx
+import { Edit, SimpleForm, TextInput } from 'react-admin';
+import { SmartRichTextInput } from '@react-admin/ra-ai';
+
+export const PostEdit = () => (
+    <Edit>
+        <SimpleForm>
+            <TextInput source="title" />
+            <SmartRichTextInput source="body" />
+        </SimpleForm>
+    </Edit>
+);
+```
+
+`<SmartRichTextInput>` is available as part of the [ra-ai](https://marmelab.com/ra-enterprise/modules/ra-ai) enterprise package.
+
+