Fix UI bugs (#143)

* Fix cursor position when setting read only with a default value

* Pass anchorLink className to Link component

* Add className to anchor tag

* Move default style to anchorLink class

* Update theme example

* Update package version

examples/theme/index.tsx

@@ -37,6 +37,9 @@ Object.assign(defaultTheme, {
                 width: "inherit",
                 position: "absolute",
                 top: "20px"
+            },
+            anchorLink: {
+                color: "#333333"
             }
         }
     }

package.json

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

src/MUIRichTextEditor.tsx

@@ -160,7 +160,7 @@ const styles = ({ spacing, typography, palette }: Theme) => createStyles({
     },
     anchorLink: {
         textDecoration: "underline",
-        color: palette.secondary.main
+        color: "inherit"
     },
     toolbar: {
     },
@@ -309,7 +309,11 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
             style: customStyleMap,
             block: DefaultDraftBlockRenderMap.merge(blockRenderMap, Immutable.Map(customBlockMap))
         })
-        setEditorState(EditorState.moveFocusToEnd(editorState))
+        if (props.readOnly === true) {
+            setEditorState(editorState)
+        } else {
+            setEditorState(EditorState.moveFocusToEnd(editorState))
+        }
         toggleMouseUpListener(true)
         return () => {
             toggleMouseUpListener()
@@ -754,7 +758,8 @@ const MUIRichTextEditor: RefForwardingComponent<TMUIRichTextEditorRef, IMUIRichT
         const contentState = editorState.getCurrentContent()
         let replaceEditorState = editorState
         const data = {
-            url: url
+            url: url,
+            className: classes.anchorLink
         }
 
         if (urlKey) {

src/components/Link.tsx

@@ -8,15 +8,11 @@ type TLinkProps = {
 }
 
 const Link: FunctionComponent<TLinkProps> = (props) => {
-    const { url } = props.contentState.getEntity(props.entityKey).getData()
+    const { url, className } = props.contentState.getEntity(props.entityKey).getData()
     return (
         <a 
             href={url} 
-            style={{
-                textDecoration: "underline",
-                color: "inherit"
-            }} 
-            className="editor-anchor"
+            className={`${className} editor-anchor`}
             target="_blank"
         >
             {props.children}