Small improvements:

- Switch to CodeMirror
- Switch to Parcel Bundler
- Fix synchronisation bug
- Update dependencies

src/components/modals/Modal.tsx

@@ -1,13 +1,15 @@
 import { Observable } from "@hibas123/utils";
 import { h, Component } from "preact";
-import CloseIcon from "feather-icons/dist/icons/x.svg";
+import { X } from "preact-feather";
 
 export default abstract class Modal<T> {
    // Static
-   private static modalObservableServer = new Observable<{ modal: Modal<any>, close: boolean }>();
+   private static modalObservableServer = new Observable<{
+      modal: Modal<any>;
+      close: boolean;
+   }>();
    public static modalObservable = Modal.modalObservableServer.getPublicApi();
 
-
    protected abstract title: string;
 
    // Private
@@ -17,10 +19,8 @@ export default abstract class Modal<T> {
 
    // Protected
    protected result(value: T | null) {
-      if (this.closeOnResult)
-         this.close()
-      if (this.onResult)
-         this.onResult(value);
+      if (this.closeOnResult) this.close();
+      if (this.onResult) this.onResult(value);
    }
 
    //Public
@@ -35,13 +35,13 @@ export default abstract class Modal<T> {
 
    /**
     * Shows the modal and waits for result.
-    * 
+    *
     * Call close when successful
     */
    public async getResult(close = true) {
       this.closeOnResult = close;
       this.show(false);
-      return new Promise<T | null>((yes) => this.onResult = yes);
+      return new Promise<T | null>((yes) => (this.onResult = yes));
    }
 
    public close() {
@@ -50,52 +50,68 @@ export default abstract class Modal<T> {
 
    public abstract getComponent(): JSX.Element;
 
-   public static BaseModal = class BaseModal<T> extends Component<{ modal: Modal<T> }, {}> {
+   public static BaseModal = class BaseModal<T> extends Component<
+      { modal: Modal<T> },
+      {}
+   > {
       render() {
-         return <div class="modal-container" onClick={(evt) => {
-            let path = evt.composedPath();
-            if (!path.find(e => {
-               let s = (e as Element);
-               return s.id === "ModalContent";
-            })) {
-               this.props.modal.result(null)
-            }
-         }} onKeyDown={evt => {
-            if (evt.keyCode === 27) {
-               this.props.modal.result(null)
-            }
-         }}>
-            <div id="ModalContent" class="modal" >
-               <div class="modal-title" style="">
-                  <h3>{this.props.modal.title}</h3>
-                  {/* <div> */}
-                  {!this.props.modal.noClose ?
-                     <CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} />
-                     : undefined
+         return (
+            <div
+               class="modal-container"
+               onClick={(evt) => {
+                  let path = evt.composedPath();
+                  if (
+                     !path.find((e) => {
+                        let s = e as Element;
+                        return s.id === "ModalContent";
+                     })
+                  ) {
+                     this.props.modal.result(null);
                   }
-                  {/* </div> */}
+               }}
+               onKeyDown={(evt) => {
+                  if (evt.keyCode === 27) {
+                     this.props.modal.result(null);
+                  }
+               }}
+            >
+               <div id="ModalContent" class="modal">
+                  <div class="modal-title" style="">
+                     <h3>{this.props.modal.title}</h3>
+                     {/* <div> */}
+                     {!this.props.modal.noClose ? (
+                        <X
+                           onClick={() => this.props.modal.result(null)}
+                           width={undefined}
+                           height={undefined}
+                        />
+                     ) : undefined}
+                     {/* </div> */}
+                  </div>
+                  {this.props.children}
                </div>
-               {this.props.children}
             </div>
-         </div>
+         );
       }
-   }
-
+   };
 }
 
-export class ModalComponent extends Component<{}, { modal: Modal<any> | undefined, component: JSX.Element | undefined }>{
+export class ModalComponent extends Component<
+   {},
+   { modal: Modal<any> | undefined; component: JSX.Element | undefined }
+> {
    constructor(props) {
       super(props);
       this.onModal = this.onModal.bind(this);
    }
 
-   onModal({ modal, close }: { modal: Modal<any>, close: boolean }) {
+   onModal({ modal, close }: { modal: Modal<any>; close: boolean }) {
       if (!close && this.state.modal !== modal) {
-         this.setState({ modal: modal, component: modal.getComponent() })
-      }
-      else {
-         if (this.state.modal === modal && close) // Only close if the same
-            this.setState({ modal: undefined, component: undefined })
+         this.setState({ modal: modal, component: modal.getComponent() });
+      } else {
+         if (this.state.modal === modal && close)
+            // Only close if the same
+            this.setState({ modal: undefined, component: undefined });
       }
    }
 
@@ -108,8 +124,6 @@ export class ModalComponent extends Component<{}, { modal: Modal<any> | undefine
    }
 
    render() {
-      return <div>
-         {this.state.component}
-      </div>
+      return <div>{this.state.component}</div>;
    }
-}
+}