added onBlur, updated spelling errors on visible, readability update, updated docs

Author: cbschuld

README.md

@@ -93,10 +93,11 @@ ReactDOM.render(
 ## Props
 
 - value (*string*) - the raw markdown that will be converted to html (**required**)
-- `visble?:boolean` - Shows a preview that will be converted to html.
+- `visible?:boolean` - Shows a preview that will be converted to html.
 - `toolbars?:array` - Tool display settings.
 - `toolbarsMode?:array` - Tool display settings.
 - onChange (*function(editor: IInstance, data: CodeMirror.EditorChange, value: string)*) - called when a change is made (**required**)
+- onBlur? (*function(editor: IInstance, event: Event) - event occurs when an object loses focus
 - `previewProps` - [react-markdown options](https://github.com/rexxars/react-markdown#options)
 
 > [Other Props Options](https://github.com/uiwjs/react-markdown-editor/blob/8de6abbf628b6d272d7da1c28e985fbbcba71b93/src/components/CodeMirror/index.tsx#L21-L60)

src/components/PreviewMarkdown/index.less

@@ -10,7 +10,7 @@
     top: 0;
     bottom: 0;
   }
-  &-visble {
+  &-visible {
     border-left: 1px solid #dfdfe0;
     overflow: auto;
     width: 50%;

src/components/PreviewMarkdown/index.tsx

@@ -13,7 +13,7 @@ hljs.configure({
 });
 
 export interface IPreviewMarkdown extends IProps {
-  visble: boolean;
+  visible: boolean;
   previewProps?: ReactMarkdownProps;
   value?: string;
   prefixCls?: string;
@@ -22,20 +22,20 @@ export interface IPreviewMarkdown extends IProps {
 
 export interface IPreviewMarkdownState {
   value?: string;
-  visble?: boolean;
+  visible?: boolean;
 }
 
 export default class PreviewMarkdown extends React.Component<IPreviewMarkdown, IPreviewMarkdownState> {
   public static defaultProps: IPreviewMarkdown = {
     prefixCls: 'md-editor',
-    visble: true,
+    visible: true,
   }
   public node!: HTMLDivElement;
   constructor(props: IPreviewMarkdown) {
     super(props);
     this.state = {
       value: props.value,
-      visble: props.visble,
+      visible: props.visible,
     }
   }
 
@@ -44,16 +44,16 @@ export default class PreviewMarkdown extends React.Component<IPreviewMarkdown, I
   }
 
   public show() {
-    this.setState({ visble: true });
+    this.setState({ visible: true });
   }
 
   public hide() {
-    this.setState({ visble: false });
+    this.setState({ visible: false });
   }
 
   public componentWillReceiveProps(nextProps: IPreviewMarkdown) {
-    if (nextProps.visble !== this.props.visble) {
-      this.setState({ visble: nextProps.visble });
+    if (nextProps.visible !== this.props.visible) {
+      this.setState({ visible: nextProps.visible });
     }
   }
 
@@ -74,12 +74,12 @@ export default class PreviewMarkdown extends React.Component<IPreviewMarkdown, I
   }
 
   public render() {
-    const { prefixCls, visble, value, previewProps, ...elementProps } = this.props;
+    const { prefixCls, visible, value, previewProps, ...elementProps } = this.props;
     return (
       <div
         ref={(node: HTMLDivElement) => this.node = node}
         className={classnames(`${prefixCls}-preview`, {
-          [`${prefixCls}-visble`]: this.state.visble,
+          [`${prefixCls}-visible`]: this.state.visible,
         })}
         {...elementProps}
       >

src/index.tsx

@@ -12,8 +12,8 @@ export interface IMarkdownEditor extends IProps, ICodeMirror {
   prefixCls?: string,
   value?: string,
   height?: number,
-  visble?: boolean,
-  visbleEditor?: boolean,
+  visible?: boolean,
+  visibleEditor?: boolean,
   toolbars?: string[] | false,
   toolbarsMode?: IToolBarModeProps['toolbarsMode'] | false,
   previewProps?: IPreviewMarkdown['previewProps'];
@@ -26,34 +26,36 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditor,
   public static displayName = 'MarkdownEditor';
   public static defaultProps: IMarkdownEditor = {
     onChange: () => null,
+    onBlur: () => null,
     prefixCls: 'md-editor',
     value: '',
-    visbleEditor: true,
-    visble: true,
+    visibleEditor: true,
+    visible: true,
   };
   public container!: HTMLDivElement;
   public editorClientHeight!: number;
   public preview!: PreviewMarkdown;
   public toolbarsMode!: ToolBarMode;
   public CodeMirror!: CodeMirror;
   public render() {
-    const { prefixCls, className, toolbars, toolbarsMode, onChange, visble, visbleEditor, previewProps, ...codemirrorProps } = this.props;
+    const { prefixCls, className, toolbars, toolbarsMode, onChange, onBlur, visible: visible, visibleEditor: visibleEditor, previewProps, ...codemirrorProps } = this.props;
     return (
       <div ref={(node: HTMLDivElement) => this.container = node}>
         <div className={classnames(prefixCls, className)}>
           <ToolBarMode ref={(mode: ToolBarMode) => this.toolbarsMode = mode} toolbarsMode={toolbarsMode} onClick={this.onClickMode} />
           <ToolBar toolbars={toolbars} onClick={this.onClick} />
           <div className={classnames(`${prefixCls}-content`)}>
-            {visbleEditor && (
+            {visibleEditor && (
               <CodeMirror
-                visbleEditor={visbleEditor}
+                visibleEditor={visibleEditor}
                 ref={this.getInstance}
                 {...codemirrorProps}
                 onChange={this.onChange}
+                onBlur={this.onBlur}
               />
             )}
             <PreviewMarkdown
-              visble={visble}
+              visible={visible}
               ref={(pmd: PreviewMarkdown) => this.preview = pmd}
               value={this.props.value}
               previewProps={previewProps}
@@ -66,8 +68,8 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditor,
 
   public componentDidMount() {
     if (this.preview && this.CodeMirror) {
-      this.props.visble ? this.preview.show() : this.preview.hide();
-      this.CodeMirror.editor.setSize(this.props.visble ? '50%' : '100%');
+      this.props.visible ? this.preview.show() : this.preview.hide();
+      this.CodeMirror.editor.setSize(this.props.visible ? '50%' : '100%');
       const { clientHeight } = this.CodeMirror.editor.getScrollInfo();
       this.editorClientHeight = clientHeight;
       window.addEventListener('resize', this.handleResize, true);
@@ -79,16 +81,16 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditor,
   }
 
   public handleResize = () => {
-    const isfullscreen = this.toolbarsMode.state.fullscreen
-    if (isfullscreen) {
-      this.setEditorSize(isfullscreen);
+    const isFullScreen = this.toolbarsMode.state.fullscreen
+    if (isFullScreen) {
+      this.setEditorSize(isFullScreen);
     }
   }
 
   public componentWillReceiveProps(nextProps: IMarkdownEditor) {
-    if (nextProps.visble !== this.props.visble) {
-      nextProps.visble ? this.preview.show() : this.preview.hide();
-      this.CodeMirror.editor.setSize(nextProps.visble ? '50%' : '100%');
+    if (nextProps.visible !== this.props.visible) {
+      nextProps.visible ? this.preview.show() : this.preview.hide();
+      this.CodeMirror.editor.setSize(nextProps.visible ? '50%' : '100%');
     }
   }
 
@@ -107,28 +109,35 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditor,
     }
   }
 
+  private onBlur = (editor: IInstance, event: Event) => {
+    const { onBlur } = this.props as IMarkdownEditor;
+    if (onBlur) {
+      onBlur(editor, event);
+    }
+  }
+
   private previewMarkdown() {
     if (this.preview) {
-      this.preview.state.visble ? this.preview.hide() : this.preview.show();
-      this.toolbarsMode.updateMode('preview', !this.preview.state.visble);
-      this.CodeMirror.editor.setSize(this.preview.state.visble ? '100%' : '50%');
+      this.preview.state.visible ? this.preview.hide() : this.preview.show();
+      this.toolbarsMode.updateMode('preview', !this.preview.state.visible);
+      this.CodeMirror.editor.setSize(this.preview.state.visible ? '100%' : '50%');
     }
   }
 
   private fullScreen() {
     const { prefixCls } = this.props;
     if (this.toolbarsMode && this.container) {
-      const isfullscreen = !this.toolbarsMode.state.fullscreen
-      this.toolbarsMode.updateMode('fullscreen', isfullscreen);
-      this.container.className = isfullscreen ? classnames(`${prefixCls}-fullscreen`) : '';
-      document.body.style.overflow = isfullscreen ? 'hidden' : 'initial';
-      this.setEditorSize(isfullscreen);
+      const isFullScreen = !this.toolbarsMode.state.fullscreen
+      this.toolbarsMode.updateMode('fullscreen', isFullScreen);
+      this.container.className = isFullScreen ? classnames(`${prefixCls}-fullscreen`) : '';
+      document.body.style.overflow = isFullScreen ? 'hidden' : 'initial';
+      this.setEditorSize(isFullScreen);
     }
   }
 
-  private setEditorSize(isfullscreen: boolean) {
+  private setEditorSize(isFullScreen: boolean) {
     const clientHeight = document.body.clientHeight;
-    this.CodeMirror.editor.setSize(this.preview.state.visble ? '50%' : '100%', isfullscreen ? clientHeight - 33 : this.editorClientHeight);
+    this.CodeMirror.editor.setSize(this.preview.state.visible ? '50%' : '100%', isFullScreen ? clientHeight - 33 : this.editorClientHeight);
   }
 
   private onClickMode = (type: string) => {