From e6aa524adac1bf8b600f50a67d6b458f16b3cfaf Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Sat, 24 Sep 2022 11:27:06 +0400
Subject: [PATCH] [docs] Add id prop to rte

---
 docs/src/docs/others/rte.mdx                              | 8 +++++---
 .../src/demos/rte/RichTextEditor.demo.formats.tsx         | 1 +
 .../src/demos/rte/RichTextEditor.demo.mentions.tsx        | 1 +
 .../src/demos/rte/RichTextEditor.demo.readOnly.tsx        | 2 +-
 .../src/demos/rte/RichTextEditor.demo.simple.tsx          | 2 +-
 .../src/demos/rte/RichTextEditor.demo.toolbar.tsx         | 1 +
 6 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/docs/src/docs/others/rte.mdx b/docs/src/docs/others/rte.mdx
index 1909b1ca982..beaefa6d67e 100644
--- a/docs/src/docs/others/rte.mdx
+++ b/docs/src/docs/others/rte.mdx
@@ -125,7 +125,9 @@ function Demo() {
   );
 
   const [value, onChange] = useState('');
-  return <RichTextEditor value={value} onChange={onChange} onImageUpload={handleImageUpload} />;
+  return (
+    <RichTextEditor value={value} onChange={onChange} onImageUpload={handleImageUpload} id="rte" />
+  );
 }
 ```
 
@@ -187,7 +189,7 @@ function Demo() {
     editorRef.current.focus();
   }, []);
 
-  return <RichTextEditor ref={editorRef} {...otherProps} />;
+  return <RichTextEditor ref={editorRef} id="rte" {...otherProps} />;
 }
 ```
 
@@ -242,7 +244,7 @@ Then when you want to use `RichTextEditor` import your component instead:
 import RichTextEditor from '../components/RichText';
 
 function MyPage() {
-  return <RichTextEditor />;
+  return <RichTextEditor id="rte" />;
 }
 ```
 
diff --git a/src/mantine-demos/src/demos/rte/RichTextEditor.demo.formats.tsx b/src/mantine-demos/src/demos/rte/RichTextEditor.demo.formats.tsx
index 6f6bb125620..db24ad117fe 100644
--- a/src/mantine-demos/src/demos/rte/RichTextEditor.demo.formats.tsx
+++ b/src/mantine-demos/src/demos/rte/RichTextEditor.demo.formats.tsx
@@ -9,6 +9,7 @@ function Demo() {
   const [value, onChange] = useState('<p>Rich text editor content</p>');
   return (
     <RichTextEditor
+      id="rte"
       value={value}
       onChange={onChange}
       formats={['bold', 'italic', 'underline']}
diff --git a/src/mantine-demos/src/demos/rte/RichTextEditor.demo.mentions.tsx b/src/mantine-demos/src/demos/rte/RichTextEditor.demo.mentions.tsx
index b97ee3ba9db..75edbc6aaef 100644
--- a/src/mantine-demos/src/demos/rte/RichTextEditor.demo.mentions.tsx
+++ b/src/mantine-demos/src/demos/rte/RichTextEditor.demo.mentions.tsx
@@ -38,6 +38,7 @@ function Demo() {
 
   return (
     <RichTextEditor
+      id="rte"
       value={value}
       onChange={onChange}
       placeholder="Type @ or # to see mentions autocomplete"
diff --git a/src/mantine-demos/src/demos/rte/RichTextEditor.demo.readOnly.tsx b/src/mantine-demos/src/demos/rte/RichTextEditor.demo.readOnly.tsx
index eae2a2f113a..6102934cc65 100644
--- a/src/mantine-demos/src/demos/rte/RichTextEditor.demo.readOnly.tsx
+++ b/src/mantine-demos/src/demos/rte/RichTextEditor.demo.readOnly.tsx
@@ -6,7 +6,7 @@ export const html = `
 `;
 
 const code = `
-<RichTextEditor readOnly {...otherProps} />
+<RichTextEditor readOnly id="rte" {...otherProps} />
 `;
 
 function Demo(props: any) {
diff --git a/src/mantine-demos/src/demos/rte/RichTextEditor.demo.simple.tsx b/src/mantine-demos/src/demos/rte/RichTextEditor.demo.simple.tsx
index c55fb74598c..fd857049e0b 100644
--- a/src/mantine-demos/src/demos/rte/RichTextEditor.demo.simple.tsx
+++ b/src/mantine-demos/src/demos/rte/RichTextEditor.demo.simple.tsx
@@ -10,7 +10,7 @@ const initialValue =
 
 function Demo() {
   const [value, onChange] = useState(initialValue);
-  return <RichTextEditor value={value} onChange={onChange} />;
+  return <RichTextEditor value={value} onChange={onChange} id="rte" />;
 }
 `;
 
diff --git a/src/mantine-demos/src/demos/rte/RichTextEditor.demo.toolbar.tsx b/src/mantine-demos/src/demos/rte/RichTextEditor.demo.toolbar.tsx
index d46c261ff57..6e0ac95c6d2 100644
--- a/src/mantine-demos/src/demos/rte/RichTextEditor.demo.toolbar.tsx
+++ b/src/mantine-demos/src/demos/rte/RichTextEditor.demo.toolbar.tsx
@@ -4,6 +4,7 @@ import { DEFAULT_CONTROLS, DEFAULT_LABELS, Toolbar } from '@mantine/rte';
 
 const code = `
 <RichTextEditor
+  id="rte"
   controls={[
     ['bold', 'italic', 'underline', 'link', 'image'],
     ['unorderedList', 'h1', 'h2', 'h3'],