Merge pull request #58 from niuware/development

Expose focus method
niuware · Nov 18, 2019 · de06c76 · de06c76
2 parents 034700a + 512024c
commit de06c76
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/examples/main.tsx b/examples/main.tsx
@@ -23,20 +23,27 @@ const App = () => {
 
     return (
         <div>
-            Load example: &nbsp; 
+            Choose example: &nbsp; 
             <button onClick={() => setSample(<Basic />)}>Basic</button> 
             <button onClick={() => setSample(<Theme />)}>Theme</button> 
-            <button onClick={() => setSample(<RefSave />)}>RefSave</button> 
-            <button onClick={() => setSample(<ReadOnly />)}>Read Only</button> 
-            <button onClick={() => setSample(<Events />)}>Events</button>
+            <button onClick={() => setSample(<RefSave />)}>Ref Events</button> 
             <button onClick={() => setSample(<CustomControls />)}>Custom Controls</button>
             <button onClick={() => setSample(<Decorators />)}>Decorators</button>
             <button onClick={() => setSample(<InlineToolbar />)}>Inline Toolbar</button>
             <button onClick={() => setSample(<CustomInlineToolbar />)}>Custom Inline Toolbar</button>
+            <button onClick={() => setSample(<AtomicCustomBlock />)}>Atomic Custom Block</button>
+            <button onClick={() => setSample(<ReadOnly />)}>Read Only</button> 
+            <button onClick={() => setSample(<Events />)}>Events</button>
             <button onClick={() => setSample(<LoadHTML />)}>Load from HTML</button>
             <button onClick={() => setSample(<ResetValue />)}>Reset value</button>
-            <button onClick={() => setSample(<AtomicCustomBlock />)}>Atomic Custom Block</button>
-            {sample}
+            <div style={{
+                margin: "20px 0"
+            }}>
+                <p>
+                <strong>{sample.type.name}</strong> example:
+                </p>
+                {sample}
+            </div>
         </div>
     )
 }

diff --git a/examples/ref-save/index.tsx b/examples/ref-save/index.tsx
@@ -9,6 +9,10 @@ const RefSave: FunctionComponent = () => {
         (ref as any).current.save()
     }
 
+    const handleFocus = () => {
+        (ref as any).current.focus()
+    }
+
     const handleSave = (data: string) => {
         console.log(data)
     }
@@ -23,6 +27,13 @@ const RefSave: FunctionComponent = () => {
                 onClick={handleClick}>
                 Save
             </button>
+            <button style={{
+                    marginLeft: 5,
+                    padding: 5
+                }}
+                onClick={handleFocus}>
+                Focus
+            </button>
             <MUIRichTextEditor 
                 label="Type something here..."
                 onSave={handleSave}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-rte",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "Material-UI Rich Text Editor and Viewer",
   "keywords": [
     "material-ui",

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
@@ -159,6 +159,9 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
      * Expose methods
      */
     useImperativeHandle(ref, () => ({
+        focus: () => {
+            handleFocus()
+        },
         save: () => {
             handleSave()
         },