feat: hypermd editor

app/app.global.css

@@ -4,10 +4,13 @@
  */
 @import '~@fortawesome/fontawesome-free/css/all.css';
 @import '~antd/dist/antd.css';
-@import 'style/react-split-pane.css';
-@import 'style/ant-customisation.css';
-@import 'style/context-menu.css';
-@import "~easymde/dist/easymde.min.css";
 @import '~jodit/build/jodit.min.css';
+@import '~codemirror/lib/codemirror.css';
+@import '~hypermd/mode/hypermd.css';
+@import '~hypermd/theme/hypermd-light.css';
 
 
+@import 'style/react-split-pane.css';
+@import 'style/ant-customisation.css';
+@import 'style/context-menu.css';
+/* @import "~easymde/dist/easymde.min.css"; */

app/components/EditorPane/EditorPane.tsx

@@ -20,6 +20,7 @@ import { InlineItem, RightFloaty } from '../../style/utils.style';
 import { findExistingTags } from '../../containers/MainMenu/selectors';
 import { NotoriousButtonStyle } from '../MiddleMenu/MiddleMenu.style';
 import RichEditor from './RichEditor/RichEditor';
+import MarkdownEditor from './MarkdownEditor/MarkdownEditor';
 
 const NoteTitleInput = styled(FieldForm)`
   font-size: 18pt;
@@ -107,15 +108,20 @@ export default function EditorPane({contentArea, note,
 
 
         {(!note.kind || note.kind === 'normal') && <>
-          {!note.editor || note.editor === 'markdown' ?
-            <SimpleMDE id={noteref } key={noteref}
-            value={note.content}
-            events={{
-              'blur': handleBlur,
-            }}
-            options={{
-              spellChecker: false
-            }} />
+          {!note.editor || note.editor === 'markdown' ? <MarkdownEditor
+            id={noteref }
+            key={noteref}
+            note={note}
+            noteActions={noteActions}
+           />
+            // <SimpleMDE id={noteref } key={noteref}
+            // value={note.content}
+            // events={{
+            //   'blur': handleBlur,
+            // }}
+            // options={{
+            //   spellChecker: false
+            // }} />
               : <RichEditor
               id={noteref } key={noteref}
               note={note}

app/components/EditorPane/MarkdownEditor/MarkdownEditor.tsx

@@ -0,0 +1,84 @@
+import React, { Component, useCallback  } from 'react';
+import {Controlled as ReactCodeMirror} from 'react-codemirror2';
+import { debounce } from "lodash";
+var HyperMD = require('hypermd')
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {  } from "@fortawesome/free-regular-svg-icons";
+import {  } from "@fortawesome/free-solid-svg-icons";
+
+import 'codemirror/lib/codemirror';
+
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/gfm/gfm';
+
+import 'hypermd/core';
+import 'hypermd/mode/hypermd';
+
+import 'hypermd/addon/hide-token';
+import 'hypermd/addon/cursor-debounce';
+import 'hypermd/addon/fold';
+import 'hypermd/addon/read-link';
+import 'hypermd/addon/click';
+import 'hypermd/addon/hover';
+import 'hypermd/addon/paste';
+import 'hypermd/addon/insert-file';
+import 'hypermd/addon/mode-loader';
+import 'hypermd/addon/table-align';
+
+const handler = f => useCallback(debounce(f, 2000), []);
+
+class MarkdownEditor extends Component {
+  constructor(props) {
+      super(props);
+      this.state = {
+          content: props.note.content,
+      }
+      this.codeMirrorRef = React.createRef();
+
+
+  }
+
+  updateContent
+
+  render() {
+    const updateContent=(editor, data, value)=> {
+    console.log("updateContent editor",editor)
+    console.log("updateContent data",data)
+    console.log("updateContent value",value)
+    // handler(()=>this.props.noteActions.updateNote(this.props.note._id, {content: value}))
+// console.log(value)
+// this.props.noteActions.updateNote(this.props.note._id, {content: value})
+      // this.setState({content:value})
+      this.setState({content:value}) ;
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(()=> {this.props.noteActions.updateNote(this.props.note._id, {content: value})}, 5000)
+  }
+    const options = {
+      mode: 'hypermd',
+      // mode: 'gfm',
+      theme: 'hypermd-light',
+
+      hmdFold: {
+        image: true,
+        link: true,
+        math: true,
+      },
+      hmdHideToken: true,
+      hmdCursorDebounce: true,
+      hmdPaste: true,
+      hmdClick: false,
+      hmdHover: true,
+      hmdTableAlign: true
+    };
+      return <ReactCodeMirror value={this.state.content} ref={this.codeMirrorRef}
+      className="code-mirror_editor"
+      options={options}
+      onBeforeChange={(editor, data, value) => {
+        this.setState({content: value});
+      }}
+      onChange={updateContent} />;
+  }
+}
+export default MarkdownEditor;

app/style/ant-customisation.css

@@ -15,3 +15,8 @@ html {
             user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Opera and Firefox */
 }
+
+.CodeMirror {
+  height: 100%;
+  overflow-y: hidden;
+}