Update examples

examples/basic/index.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
 import MUIRichTextEditor from '../../'
 
 const save = (data: string) => {
     console.log(data)
 }
 
-ReactDOM.render(
-    <MUIRichTextEditor 
-        label="Type something here..."
-        onSave={save}
-    />,
-    document.getElementById("root")
-)
+const Basic = () => {
+    return (
+        <MUIRichTextEditor 
+            label="Type something here..."
+            onSave={save}
+        />
+    )
+}
+
+export default Basic

examples/events/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { EditorState, convertToRaw } from 'draft-js'
+import MUIRichTextEditor from '../../'
+
+const save = (data: string) => {
+    console.log(data)
+}
+
+const change = (state: EditorState) => {
+    // More info about EditorState object at
+    // https://draftjs.org/docs/api-reference-editor-state
+    console.log(state.getSelection())
+    console.log(JSON.stringify(convertToRaw(state.getCurrentContent())))
+}
+
+const Events = () => {
+    return (
+        <MUIRichTextEditor 
+            label="Type something here..."
+            onSave={save}
+            onChange={change}
+        />
+    )
+}
+
+export default Events

examples/main.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react'
+import * as ReactDOM from 'react-dom'
+import Events from './events'
+import Theme from './theme'
+import Basic from './basic'
+import RefSave from './ref-save'
+import ReadOnly from './read-only'
+
+const App = () => {
+
+    const [sample, setSample] = useState(<Basic />)
+
+    useEffect(() => {
+        console.log(`Loaded ${sample.type.name} example`)
+    })
+
+    return (
+        <div>
+            Load 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>
+            {sample}
+        </div>
+    )
+}
+
+ReactDOM.render(<App />, document.getElementById("root"))

examples/read-only/index.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
 import MUIRichTextEditor from '../../'
 
 const content = '{"blocks":[{"key":"7po5","text":"My Title","type":"header-two","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"apv19","text":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi:","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":6,"length":5,"style":"BOLD"},{"offset":192,"length":16,"style":"UNDERLINE"},{"offset":261,"length":21,"style":"ITALIC"}],"entityRanges":[],"data":{}},{"key":"5sea5","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"57hbe","text":"Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.","type":"blockquote","depth":0,"inlineStyleRanges":[{"offset":34,"length":17,"style":"BOLD"}],"entityRanges":[],"data":{}},{"key":"9ijl2","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"98bf8","text":"print(\\"OK\\")","type":"code-block","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"al2ij","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"d4no","text":"Visit this link!","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":6,"length":9,"key":0}],"data":{}}],"entityMap":{"0":{"type":"LINK","mutability":"MUTABLE","data":{"url":"https://github.com/niuware"}}}}'
 
-ReactDOM.render(
-    <MUIRichTextEditor 
-        value={content} 
-        readOnly={true} 
-    />,
-    document.getElementById("root")
-)
+const ReadOnly = () => {
+    return (
+        <MUIRichTextEditor 
+            value={content} 
+            readOnly={true} 
+        />
+    )
+}
+
+export default ReadOnly

examples/ref-save/index.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
 import MUIRichTextEditor from '../../'
 
-class App extends React.Component {
+class RefSave extends React.Component {
     private ref: any
     constructor(props: any) {
         super(props)
@@ -39,4 +38,4 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(<App />,document.getElementById("root"))
+export default RefSave

examples/theme/index.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { createMuiTheme, Theme, MuiThemeProvider } from '@material-ui/core/styles'
+import MUIRichTextEditor from '../../'
+
+export const defaultTheme: Theme = createMuiTheme()
+
+Object.assign(defaultTheme, {
+    overrides: {
+        MUIRichTextEditor: {
+            root: {
+                marginTop: 20,
+                width: "80%"
+            },
+            editor: {
+                borderBottom: "1px solid gray" 
+            }
+        }
+    }
+})
+
+const save = (data: string) => {
+    console.log(data)
+}
+
+const Theme = () => {
+    return (
+        <MuiThemeProvider theme={defaultTheme}>
+            <MUIRichTextEditor 
+                label="Type something here..."
+                onSave={save}
+            />
+        </MuiThemeProvider>
+    )
+}
+
+export default Theme

package.json

@@ -19,7 +19,7 @@
   "homepage": "https://github.com/niuware/mui-rte#readme",
   "main": "dist/index.js",
   "scripts": {
-    "serve": "cross-env EXAMPLE=basic webpack-dev-server --mode development",
+    "serve": "cross-env webpack-dev-server --mode development",
     "watch": "cross-env NODE_ENV=development rollup -c -w",
     "build": "cross-env NODE_ENV=production rollup -c"
   },

webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
         __filename: false
     },
     entry: {
-        bundle: "./examples/" + process.env.EXAMPLE + "/index.tsx"
+        bundle: "./examples/main.tsx"
     },
     output: {
         filename: "bundle.js",