Update to be compatible with new SecureFile version

src/components/CodeMirror.tsx

@@ -1,9 +1,13 @@
 import { h } from "preact";
 import { useEffect, useRef } from "preact/hooks";
 
-import * as CM from "codemirror";
-import "codemirror/lib/codemirror.css";
-import "codemirror/theme/base16-dark.css";
+import { EditorView, basicSetup, } from "codemirror";
+import { EditorState, Text } from "@codemirror/state";
+import { defaultKeymap } from "@codemirror/commands"
+
+import { markdown } from "@codemirror/lang-markdown"
+// import "codemirror/lib/codemirror.css";
+// import "codemirror/theme/base16-dark.css";
 
 import "./CodeMirror.scss";
 import Theme from "../theme";
@@ -18,27 +22,41 @@ interface ICodeMirrorProps {
 export default function CodeMirror(props: ICodeMirrorProps) {
    const ref = useRef<HTMLTextAreaElement>();
    useEffect(() => {
-      const instance = CM.fromTextArea(ref.current, {
-         value: props.value,
-         mode: "markdown",
-         lineNumbers: true,
-         lineWrapping: true,
-         theme: Theme.isDark.value ? "base16-dark" : "default",
-         viewportMargin: Infinity,
-         // extraKeys: {
-         //    "Ctrl-S": (cm) => {
-         //       const val = cm.getValue();
-         //       props?.onSave(val);
-         //    },
-         //    Esc: props.onClose,
-         // },
+      const instance = new EditorView({
+         parent: ref.current,
+         extensions: [
+            basicSetup,
+            markdown(),
+
+         ],
+      })
+      // const instance = CM.(ref.current, {
+      //    value: props.value,
+      //    mode: "markdown",
+      //    lineNumbers: true,
+      //    lineWrapping: true,
+      //    theme: Theme.isDark.value ? "base16-dark" : "default",
+      //    viewportMargin: Infinity,
+      //    // extraKeys: {
+      //    //    "Ctrl-S": (cm) => {
+      //    //       const val = cm.getValue();
+      //    //       props?.onSave(val);
+      //    //    },
+      //    //    Esc: props.onClose,
+      //    // },
+      // });
+
+      const state = EditorState.create({
+         doc: Text.of([props.value ?? ""]),
       });
 
-      if (props.value) instance.setValue(props.value);
+      instance.setState(state);
+      instance.focus();
+      state.
 
-      instance.on("change", () => props?.onChange(instance.getValue()));
+         instance.on("change", () => props?.onChange(instance.getValue()));
 
-      return () => {};
+      return () => { };
    }, [ref]);
    return <textarea ref={ref}></textarea>;
 }

src/components/Footer.tsx

@@ -72,7 +72,7 @@ export class Footer extends Component<
             <span>
                Welcome <b>{Notes.name}</b>
             </span>
-            <span style="color: lightgrey;">v1.6</span>
+            <span style="color: lightgrey;">v1.7</span>
          </footer>
       );
    }

src/components/routes/vault/EasyMde.tsx

@@ -0,0 +1,27 @@
+import { h } from "preact";
+
+import * as EasyMDE from "easymde";
+import "easymde/dist/easymde.min.css"
+// import "./easymde.scss"
+import { useEffect, useRef } from "preact/hooks";
+
+export default function EasyMDEPreact(props: { value: string, onChange: (value: string) => void }) {
+   const ref = useRef<HTMLTextAreaElement>();
+   useEffect(() => {
+      const mde = new EasyMDE({
+         element: ref.current,
+         initialValue: props.value
+      })
+
+      mde.codemirror.on("change", () => {
+         props.onChange(mde.value());
+      });
+
+      return () => {
+         mde.cleanup();
+      }
+   }, [ref])
+   return <div style="background: white;">
+      <textarea ref={ref}></textarea>
+   </div>
+}

src/components/routes/vault/Entry.tsx

@@ -2,12 +2,16 @@ import { h, Component } from "preact";
 import { IVault, ViewNote } from "../../../notes";
 import { Trash2 as Trash, X, Save } from "preact-feather";
 
-import Navigation from "../../../navigation";
+// import Navigation from "../../../navigation";
 import { YesNoModal } from "../../modals/YesNoModal";
 import Notifications, { MessageType } from "../../../notifications";
-import CodeMirror from "../../CodeMirror";
+// import CodeMirror from "../../CodeMirror";
+
+
+
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { usePromise } from "../../../hooks";
+import EasyMDEPreact from "./EasyMde";
 
 interface IEntryProps {
    vault: IVault;
@@ -114,14 +118,14 @@ export default function Entry(props: IEntryProps) {
                </div>
             </header>
             <div class="container" style="padding: 0">
-               <CodeMirror
+               <EasyMDEPreact
                   value={text}
                   onChange={(value) => {
                      setChanged(true);
                      setText(value);
                   }}
-                  // onSave={save}
-                  // onClose={close}
+               // onSave={save}
+               // onClose={close}
                />
             </div>
          </div>

src/components/routes/vaults/Vaults.tsx

@@ -32,7 +32,7 @@ export default class VaultsPage extends Page<
 
    updateVaults(s?: boolean) {
       if (s) return;
-      return new Promise((yes) => {
+      return new Promise<void>((yes) => {
          Notes.getVaults().then((vaults) => this.setState({ vaults }, yes));
       });
    }
@@ -245,6 +245,7 @@ export default class VaultsPage extends Page<
    }
 
    render() {
+      console.log({ vaults: this.state.vaults })
       let elms = this.state.vaults.map((vault) => {
          return (
             <li