Merge pull request #33 from niuware/development

Rewrite from class to function component

README.md

@@ -266,7 +266,7 @@ $ npm run serve
 
 ## Future plans
 
-- Code refactor
+- Add new features
 - Increase test coverage
 
 ## Suggestions and issues

examples/custom-inline-toolbar/index.tsx

@@ -2,12 +2,17 @@ import React from 'react'
 import MUIRichTextEditor from '../../'
 import InvertColorsIcon from '@material-ui/icons/InvertColors'
 
+const save = (data: string) => {
+    console.log(data)
+}
+
 const CustomInlineToolbar = () => {
     return (
         <MUIRichTextEditor 
             label="Try selecting some text to show the inline toolbar..."
             inlineToolbar={true}
             inlineToolbarControls={["bold", "italic", "my-style", "link"]}
+            onSave={save}
             customControls={[
                 {
                     name: "my-style",

examples/ref-save/index.tsx

@@ -1,41 +1,36 @@
-import React from 'react'
+import React, { FunctionComponent, useRef, Ref, MutableRefObject } from 'react'
 import MUIRichTextEditor from '../../'
 
-class RefSave extends React.Component {
-    private ref: any
-    constructor(props: any) {
-        super(props)
-        this.ref = React.createRef()
-    }
+const RefSave: FunctionComponent = (props) => {
+
+    const ref = useRef()
 
-    handleClick = () => {
-        this.ref.current.save()
+    const handleClick = () => {
+        (ref as any).current.save()
     }
 
-    handleSave = (data: string) => {
+    const handleSave = (data: string) => {
         console.log(data)
     }
 
-    render() {
-        return (
-            <div>
-                Save editor state from external button: 
-                <button style={{
-                        marginLeft: 5,
-                        padding: 5
-                    }} 
-                    onClick={this.handleClick}>
-                    Save
-                </button>
-                <MUIRichTextEditor 
-                    label="Type something here..."
-                    onSave={this.handleSave}
-                    ref={this.ref}
-                    controls={["bold", "italic", "underline", "quote", "clear"]}
-                />
-            </div>
-        )
-    }
+    return (
+        <div>
+            Save editor state from external button: 
+            <button style={{
+                    marginLeft: 5,
+                    padding: 5
+                }} 
+                onClick={handleClick}>
+                Save
+            </button>
+            <MUIRichTextEditor 
+                label="Type something here..."
+                onSave={handleSave}
+                ref={ref}
+                controls={["bold", "italic", "underline", "quote", "clear"]}
+            />
+        </div>
+    )
 }
 
 export default RefSave

examples/theme/index.tsx

@@ -2,25 +2,35 @@ import React from 'react'
 import { createMuiTheme, Theme, MuiThemeProvider } from '@material-ui/core/styles'
 import MUIRichTextEditor from '../../'
 
-export const defaultTheme: Theme = createMuiTheme()
+export const defaultTheme: Theme = createMuiTheme({
+    palette: {
+        primary: {
+            main: "#000000"
+        }
+    }
+})
 
 Object.assign(defaultTheme, {
     overrides: {
         MUIRichTextEditor: {
             root: {
                 backgroundColor: "#ebebeb",
             },
+            container: {
+                display: "flex",
+                flexDirection: "column-reverse"
+            },
             editor: {
-                borderBottom: "1px solid gray",
                 backgroundColor: "#ebebeb",
                 padding: "0 20px"
             },
             toolbar: {
+                borderTop: "1px solid gray",
                 backgroundColor: "#ebebeb"
             },
             placeHolder: {
                 backgroundColor: "#ebebeb",
-                paddingLeft: "20px",
+                paddingLeft: 20,
                 width: "inherit"
             }
         }

index.ts

@@ -1 +1 @@
-export {default} from './src/MUIRichTextEditor'
+export {default} from './src/MUIRichTextEditor'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-rte",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Material-UI Rich Text Editor and Viewer",
   "keywords": [
     "material-ui",