[docs] Add id prop to rte

mantinedev · Sep 24, 2022 · e6aa524 · e6aa524
1 parent ff20ce6
commit e6aa524
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'],