Fist Commit

package.json

@@ -4,34 +4,50 @@
    "description": "",
    "main": "index.js",
    "scripts": {
-      "build": "parcel build src/index.html",
+      "build": "webpack --mode=production",
-      "dev": "parcel src/index.html"
+      "watch": "webpack --mode=development --watch",
+      "start": "webpack-dev-server --mode=production",
+      "start:prod": "webpack-dev-server --mode=production",
+      "start:dev": "webpack-dev-server --mode=development"
    },
    "author": "Fabian Stamm <dev@fabianstamm.de>",
    "license": "MIT",
-   "browserslist": [
-      "last 2 Chrome versions"
-   ],
    "dependencies": {
-      "@hibas123/secure-file-wrapper": "^2.5.1",
+      "@hibas123/secure-file-wrapper": "^2.5.0",
-      "@hibas123/theme": "^1.2.14",
+      "@hibas123/theme": "^1.0.6",
-      "@hibas123/utils": "^2.2.3",
+      "@hibas123/utils": "^2.1.0",
       "aes-js": "^3.1.2",
-      "feather-icons": "^4.26.0",
+      "easymde": "^2.6.1",
+      "feather-icons": "^4.22.1",
       "idb": "^4.0.3",
       "js-sha256": "^0.9.0",
       "lodash.clonedeep": "^4.5.0",
-      "parcel": "^1.12.4",
+      "secure-file-wrapper": "git+https://git.stamm.me/OpenServer/OSSecureFileWrapper.git",
-      "uuid": "^3.4.0"
+      "uuid": "^3.3.2"
    },
    "devDependencies": {
+      "@types/codemirror": "0.0.76",
       "@types/lodash.clonedeep": "^4.5.6",
       "@types/uikit": "^2.27.7",
-      "@types/uuid": "^3.4.7",
+      "@types/uuid": "^3.4.5",
-      "node-sass": "^4.13.1",
+      "copy-webpack-plugin": "^5.0.3",
-      "parcel-bundler": "^1.12.4",
+      "css-loader": "^3.0.0",
-      "preact": "^10.3.1",
+      "file-loader": "^4.0.0",
-      "ts-loader": "^6.2.1",
+      "html-webpack-plugin": "^3.2.0",
-      "typescript": "^3.7.5"
+      "mini-css-extract-plugin": "^0.7.0",
+      "node-sass": "^4.12.0",
+      "preact": "^8.3.1",
+      "preact-svg-loader": "^0.2.1",
+      "raw-loader": "^3.0.0",
+      "sass-loader": "^7.1.0",
+      "style-loader": "^0.23.1",
+      "ts-loader": "^6.0.4",
+      "typescript": "^3.5.2",
+      "webpack": "^4.35.2",
+      "webpack-bundle-analyzer": "^3.3.2",
+      "webpack-cli": "^3.3.5",
+      "webpack-dev-server": "^3.7.2",
+      "webpack-visualizer-plugin": "^0.1.11",
+      "worker-loader": "^2.0.0"
    }
 }

public/encoding.js

@@ -5,9 +5,16 @@
  * @fileoverview Global |this| required for resolving indexes in node.
  * @suppress {globalThis}
  */
-(function (global) {
+(function(global) {
   'use strict';
 
+  // If we're in node require encoding-indexes and attach it to the global.
+  if (typeof module !== "undefined" && module.exports &&
+    !global["encoding-indexes"]) {
+    global["encoding-indexes"] =
+      require("./encoding-indexes.js")["encoding-indexes"];
+  }
+
   //
   // Utilities
   //
@@ -195,7 +202,7 @@
     /**
      * @return {boolean} True if end-of-stream has been hit.
      */
-    endOfStream: function () {
+    endOfStream: function() {
       return !this.tokens.length;
     },
 
@@ -207,7 +214,7 @@
      * @return {number} Get the next token from the stream, or
      * end_of_stream.
      */
-    read: function () {
+     read: function() {
       if (!this.tokens.length)
         return end_of_stream;
        return this.tokens.pop();
@@ -221,7 +228,7 @@
      * @param {(number|!Array.<number>)} token The token(s) to prepend to the
      * stream.
      */
-    prepend: function (token) {
+    prepend: function(token) {
       if (Array.isArray(token)) {
         var tokens = /**@type {!Array.<number>}*/(token);
         while (tokens.length)
@@ -239,7 +246,7 @@
      * @param {(number|!Array.<number>)} token The tokens(s) to push to the
      * stream.
      */
-    push: function (token) {
+    push: function(token) {
       if (Array.isArray(token)) {
         var tokens = /**@type {!Array.<number>}*/(token);
         while (tokens.length)
@@ -279,7 +286,7 @@
   }
 
   /** @interface */
-  function Decoder() { }
+  function Decoder() {}
   Decoder.prototype = {
     /**
      * @param {Stream} stream The stream of bytes being decoded.
@@ -288,18 +295,18 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point, or |finished|.
      */
-    handler: function (stream, bite) { }
+    handler: function(stream, bite) {}
   };
 
   /** @interface */
-  function Encoder() { }
+  function Encoder() {}
   Encoder.prototype = {
     /**
      * @param {Stream} stream The stream of code points being encoded.
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit, or |finished|.
      */
-    handler: function (stream, code_point) { }
+    handler: function(stream, code_point) {}
   };
 
   // 5.2 Names and labels
@@ -791,9 +798,9 @@
   // Label to encoding registry.
   /** @type {Object.<string,{name:string,labels:Array.<string>}>} */
   var label_to_encoding = {};
-  encodings.forEach(function (category) {
+  encodings.forEach(function(category) {
-    category.encodings.forEach(function (encoding) {
+    category.encodings.forEach(function(encoding) {
-      encoding.labels.forEach(function (label) {
+      encoding.labels.forEach(function(label) {
         label_to_encoding[label] = encoding;
       });
     });
@@ -922,7 +929,7 @@
     // 1. Let index be index jis0208 excluding all entries whose
     // pointer is in the range 8272 to 8835, inclusive.
     shift_jis_index = shift_jis_index ||
-      index('jis0208').map(function (code_point, pointer) {
+      index('jis0208').map(function(code_point, pointer) {
         return inRange(pointer, 8272, 8835) ? null : code_point;
       });
     var index_ = shift_jis_index;
@@ -941,7 +948,7 @@
   function indexBig5PointerFor(code_point) {
     // 1. Let index be index Big5 excluding all entries whose pointer
     big5_index_no_hkscs = big5_index_no_hkscs ||
-      index('big5').map(function (code_point, pointer) {
+      index('big5').map(function(code_point, pointer) {
         return (pointer < (0xA1 - 0x81) * 157) ? null : code_point;
       });
     var index_ = big5_index_no_hkscs;
@@ -1043,21 +1050,21 @@
     // The encoding attribute's getter must return encoding's name.
     Object.defineProperty(TextDecoder.prototype, 'encoding', {
       /** @this {TextDecoder} */
-      get: function () { return this._encoding.name.toLowerCase(); }
+      get: function() { return this._encoding.name.toLowerCase(); }
     });
 
     // The fatal attribute's getter must return true if error mode
     // is fatal, and false otherwise.
     Object.defineProperty(TextDecoder.prototype, 'fatal', {
       /** @this {TextDecoder} */
-      get: function () { return this._error_mode === 'fatal'; }
+      get: function() { return this._error_mode === 'fatal'; }
     });
 
     // The ignoreBOM attribute's getter must return true if ignore
     // BOM flag is set, and false otherwise.
     Object.defineProperty(TextDecoder.prototype, 'ignoreBOM', {
       /** @this {TextDecoder} */
-      get: function () { return this._ignoreBOM; }
+      get: function() { return this._ignoreBOM; }
     });
   }
 
@@ -1086,8 +1093,7 @@
     // BOM seen flag.
     if (!this._do_not_flush) {
       this._decoder = decoders[this._encoding.name]({
-        fatal: this._error_mode === 'fatal'
+        fatal: this._error_mode === 'fatal'});
-      });
       this._BOMseen = false;
     }
 
@@ -1253,7 +1259,7 @@
     // The encoding attribute's getter must return encoding's name.
     Object.defineProperty(TextEncoder.prototype, 'encoding', {
       /** @this {TextEncoder} */
-      get: function () { return this._encoding.name.toLowerCase(); }
+      get: function() { return this._encoding.name.toLowerCase(); }
     });
   }
 
@@ -1271,8 +1277,7 @@
     // the input is a USVString so streaming is not necessary.
     if (!this._do_not_flush)
       this._encoder = encoders[this._encoding.name]({
-        fatal: this._fatal === 'fatal'
+        fatal: this._fatal === 'fatal'});
-      });
     this._do_not_flush = Boolean(options['stream']);
 
     // 1. Convert input to a stream.
@@ -1351,7 +1356,7 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point.
      */
-    this.handler = function (stream, bite) {
+    this.handler = function(stream, bite) {
       // 1. If byte is end-of-stream and utf-8 bytes needed is not 0,
       // set utf-8 bytes needed to 0 and return error.
       if (bite === end_of_stream && utf8_bytes_needed !== 0) {
@@ -1479,7 +1484,7 @@
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit.
      */
-    this.handler = function (stream, code_point) {
+    this.handler = function(stream, code_point) {
       // 1. If code point is end-of-stream, return finished.
       if (code_point === end_of_stream)
         return finished;
@@ -1533,11 +1538,11 @@
   }
 
   /** @param {{fatal: boolean}} options */
-  encoders['UTF-8'] = function (options) {
+  encoders['UTF-8'] = function(options) {
     return new UTF8Encoder(options);
   };
   /** @param {{fatal: boolean}} options */
-  decoders['UTF-8'] = function (options) {
+  decoders['UTF-8'] = function(options) {
     return new UTF8Decoder(options);
   };
 
@@ -1561,7 +1566,7 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point.
      */
-    this.handler = function (stream, bite) {
+    this.handler = function(stream, bite) {
       // 1. If byte is end-of-stream, return finished.
       if (bite === end_of_stream)
         return finished;
@@ -1598,7 +1603,7 @@
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit.
      */
-    this.handler = function (stream, code_point) {
+    this.handler = function(stream, code_point) {
       // 1. If code point is end-of-stream, return finished.
       if (code_point === end_of_stream)
         return finished;
@@ -1621,21 +1626,21 @@
     };
   }
 
-  (function () {
+  (function() {
     if (!('encoding-indexes' in global))
       return;
-    encodings.forEach(function (category) {
+    encodings.forEach(function(category) {
       if (category.heading !== 'Legacy single-byte encodings')
         return;
-      category.encodings.forEach(function (encoding) {
+      category.encodings.forEach(function(encoding) {
         var name = encoding.name;
         var idx = index(name.toLowerCase());
         /** @param {{fatal: boolean}} options */
-        decoders[name] = function (options) {
+        decoders[name] = function(options) {
           return new SingleByteDecoder(idx, options);
         };
         /** @param {{fatal: boolean}} options */
-        encoders[name] = function (options) {
+        encoders[name] = function(options) {
           return new SingleByteEncoder(idx, options);
         };
       });
@@ -1651,14 +1656,14 @@
   // 11.1.1 gbk decoder
   // gbk's decoder is gb18030's decoder.
   /** @param {{fatal: boolean}} options */
-  decoders['GBK'] = function (options) {
+  decoders['GBK'] = function(options) {
     return new GB18030Decoder(options);
   };
 
   // 11.1.2 gbk encoder
   // gbk's encoder is gb18030's encoder with its gbk flag set.
   /** @param {{fatal: boolean}} options */
-  encoders['GBK'] = function (options) {
+  encoders['GBK'] = function(options) {
     return new GB18030Encoder(options, true);
   };
 
@@ -1684,7 +1689,7 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point.
      */
-    this.handler = function (stream, bite) {
+    this.handler = function(stream, bite) {
       // 1. If byte is end-of-stream and gb18030 first, gb18030
       // second, and gb18030 third are 0x00, return finished.
       if (bite === end_of_stream && gb18030_first === 0x00 &&
@@ -1836,7 +1841,7 @@
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit.
      */
-    this.handler = function (stream, code_point) {
+    this.handler = function(stream, code_point) {
       // 1. If code point is end-of-stream, return finished.
       if (code_point === end_of_stream)
         return finished;
@@ -1911,11 +1916,11 @@
   }
 
   /** @param {{fatal: boolean}} options */
-  encoders['gb18030'] = function (options) {
+  encoders['gb18030'] = function(options) {
     return new GB18030Encoder(options);
   };
   /** @param {{fatal: boolean}} options */
-  decoders['gb18030'] = function (options) {
+  decoders['gb18030'] = function(options) {
     return new GB18030Decoder(options);
   };
 
@@ -1944,7 +1949,7 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point.
      */
-    this.handler = function (stream, bite) {
+    this.handler = function(stream, bite) {
       // 1. If byte is end-of-stream and Big5 lead is not 0x00, set
       // Big5 lead to 0x00 and return error.
       if (bite === end_of_stream && Big5_lead !== 0x00) {
@@ -2039,7 +2044,7 @@
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit.
      */
-    this.handler = function (stream, code_point) {
+    this.handler = function(stream, code_point) {
       // 1. If code point is end-of-stream, return finished.
       if (code_point === end_of_stream)
         return finished;
@@ -2076,11 +2081,11 @@
   }
 
   /** @param {{fatal: boolean}} options */
-  encoders['Big5'] = function (options) {
+  encoders['Big5'] = function(options) {
     return new Big5Encoder(options);
   };
   /** @param {{fatal: boolean}} options */
-  decoders['Big5'] = function (options) {
+  decoders['Big5'] = function(options) {
     return new Big5Decoder(options);
   };
 
@@ -2112,7 +2117,7 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point.
      */
-    this.handler = function (stream, bite) {
+    this.handler = function(stream, bite) {
       // 1. If byte is end-of-stream and euc-jp lead is not 0x00, set
       // euc-jp lead to 0x00, and return error.
       if (bite === end_of_stream && eucjp_lead !== 0x00) {
@@ -2207,7 +2212,7 @@
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit.
      */
-    this.handler = function (stream, code_point) {
+    this.handler = function(stream, code_point) {
       // 1. If code point is end-of-stream, return finished.
       if (code_point === end_of_stream)
         return finished;
@@ -2255,11 +2260,11 @@
   }
 
   /** @param {{fatal: boolean}} options */
-  encoders['EUC-JP'] = function (options) {
+  encoders['EUC-JP'] = function(options) {
     return new EUCJPEncoder(options);
   };
   /** @param {{fatal: boolean}} options */
-  decoders['EUC-JP'] = function (options) {
+  decoders['EUC-JP'] = function(options) {
     return new EUCJPDecoder(options);
   };
 
@@ -2298,7 +2303,7 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point.
      */
-    this.handler = function (stream, bite) {
+    this.handler = function(stream, bite) {
       // switching on iso-2022-jp decoder state:
       switch (iso2022jp_decoder_state) {
       default:
@@ -2597,7 +2602,7 @@
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit.
      */
-    this.handler = function (stream, code_point) {
+    this.handler = function(stream, code_point) {
       // 1. If code point is end-of-stream and iso-2022-jp encoder
       // state is not ASCII, prepend code point to stream, set
       // iso-2022-jp encoder state to ASCII, and return three bytes
@@ -2706,11 +2711,11 @@
   }
 
   /** @param {{fatal: boolean}} options */
-  encoders['ISO-2022-JP'] = function (options) {
+  encoders['ISO-2022-JP'] = function(options) {
     return new ISO2022JPEncoder(options);
   };
   /** @param {{fatal: boolean}} options */
-  decoders['ISO-2022-JP'] = function (options) {
+  decoders['ISO-2022-JP'] = function(options) {
     return new ISO2022JPDecoder(options);
   };
 
@@ -2734,7 +2739,7 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point.
      */
-    this.handler = function (stream, bite) {
+    this.handler = function(stream, bite) {
       // 1. If byte is end-of-stream and Shift_JIS lead is not 0x00,
       // set Shift_JIS lead to 0x00 and return error.
       if (bite === end_of_stream && Shift_JIS_lead !== 0x00) {
@@ -2828,7 +2833,7 @@
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit.
      */
-    this.handler = function (stream, code_point) {
+    this.handler = function(stream, code_point) {
       // 1. If code point is end-of-stream, return finished.
       if (code_point === end_of_stream)
         return finished;
@@ -2883,11 +2888,11 @@
   }
 
   /** @param {{fatal: boolean}} options */
-  encoders['Shift_JIS'] = function (options) {
+  encoders['Shift_JIS'] = function(options) {
     return new ShiftJISEncoder(options);
   };
   /** @param {{fatal: boolean}} options */
-  decoders['Shift_JIS'] = function (options) {
+  decoders['Shift_JIS'] = function(options) {
     return new ShiftJISDecoder(options);
   };
 
@@ -2915,7 +2920,7 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point.
      */
-    this.handler = function (stream, bite) {
+    this.handler = function(stream, bite) {
       // 1. If byte is end-of-stream and euc-kr lead is not 0x00, set
       // euc-kr lead to 0x00 and return error.
       if (bite === end_of_stream && euckr_lead !== 0) {
@@ -2989,7 +2994,7 @@
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit.
      */
-    this.handler = function (stream, code_point) {
+    this.handler = function(stream, code_point) {
       // 1. If code point is end-of-stream, return finished.
       if (code_point === end_of_stream)
         return finished;
@@ -3019,11 +3024,11 @@
   }
 
   /** @param {{fatal: boolean}} options */
-  encoders['EUC-KR'] = function (options) {
+  encoders['EUC-KR'] = function(options) {
     return new EUCKREncoder(options);
   };
   /** @param {{fatal: boolean}} options */
-  decoders['EUC-KR'] = function (options) {
+  decoders['EUC-KR'] = function(options) {
     return new EUCKRDecoder(options);
   };
 
@@ -3076,7 +3081,7 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point.
      */
-    this.handler = function (stream, bite) {
+    this.handler = function(stream, bite) {
       // 1. If byte is end-of-stream and either utf-16 lead byte or
       // utf-16 lead surrogate is not null, set utf-16 lead byte and
       // utf-16 lead surrogate to null, and return error.
@@ -3166,7 +3171,7 @@
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit.
      */
-    this.handler = function (stream, code_point) {
+    this.handler = function(stream, code_point) {
       // 1. If code point is end-of-stream, return finished.
       if (code_point === end_of_stream)
         return finished;
@@ -3195,24 +3200,24 @@
   // 15.3 utf-16be
   // 15.3.1 utf-16be decoder
   /** @param {{fatal: boolean}} options */
-  encoders['UTF-16BE'] = function (options) {
+  encoders['UTF-16BE'] = function(options) {
     return new UTF16Encoder(true, options);
   };
   // 15.3.2 utf-16be encoder
   /** @param {{fatal: boolean}} options */
-  decoders['UTF-16BE'] = function (options) {
+  decoders['UTF-16BE'] = function(options) {
     return new UTF16Decoder(true, options);
   };
 
   // 15.4 utf-16le
   // 15.4.1 utf-16le decoder
   /** @param {{fatal: boolean}} options */
-  encoders['UTF-16LE'] = function (options) {
+  encoders['UTF-16LE'] = function(options) {
     return new UTF16Encoder(false, options);
   };
   // 15.4.2 utf-16le encoder
   /** @param {{fatal: boolean}} options */
-  decoders['UTF-16LE'] = function (options) {
+  decoders['UTF-16LE'] = function(options) {
     return new UTF16Decoder(false, options);
   };
 
@@ -3233,7 +3238,7 @@
      *     decoded, or null if not enough data exists in the input
      *     stream to decode a complete code point.
      */
-    this.handler = function (stream, bite) {
+    this.handler = function(stream, bite) {
       // 1. If byte is end-of-stream, return finished.
       if (bite === end_of_stream)
         return finished;
@@ -3261,7 +3266,7 @@
      * @param {number} code_point Next code point read from the stream.
      * @return {(number|!Array.<number>)} Byte(s) to emit.
      */
-    this.handler = function (stream, code_point) {
+    this.handler = function(stream, code_point) {
       // 1.If code point is end-of-stream, return finished.
       if (code_point === end_of_stream)
         return finished;
@@ -3282,11 +3287,11 @@
   }
 
   /** @param {{fatal: boolean}} options */
-  encoders['x-user-defined'] = function (options) {
+  encoders['x-user-defined'] = function(options) {
     return new XUserDefinedEncoder(options);
   };
   /** @param {{fatal: boolean}} options */
-  decoders['x-user-defined'] = function (options) {
+  decoders['x-user-defined'] = function(options) {
     return new XUserDefinedDecoder(options);
   };
 
@@ -3303,6 +3308,6 @@
     };
   }
 
-  // For strict environments where `this` inside the global scope
+// For strict environments where `this` inside the global scope
-  // is `undefined`, take a pure object instead
+// is `undefined`, take a pure object instead
 }(this || {}));

src/components/AddButton.tsx

@@ -7,8 +7,6 @@ export default function AddButton({ onClick }: { onClick: () => void }) {
       class="fab btn-primary"
       onClick={() => onClick()}
    >
-      <img src={Plus} />
+      <Plus width={undefined} height={undefined} />
    </button>
 }
-
-// <Plus width={undefined} height={undefined} />

src/components/Footer.tsx

@@ -56,14 +56,9 @@ export class Footer extends Component<{}, { synced: boolean, syncing: boolean }>
                 text = "not synced";
             }
         }
-        return <footer class="elv-8">
+        return <footer class="elv-8" style="line-height: 1.1rem;">
             <span>
-                <span class={extrac} >
+                <span><a class={extrac} onClick={() => this.onSyncClick()} ><Refresh style="height: 1.1em; width: 1.1em;"></Refresh></a></span>
-                    <a onClick={() => this.onSyncClick()} >
-                        <img src={Refresh} style="height: 1em; width: 1em;" />
-                        {/* <Refresh style="height: 1em; width: 1em;"></Refresh> */}
-                    </a>
-                </span>
                 <span style={"margin-left: 8px; color:" + color}>{text}</span>
             </span>
             <span>

src/components/Routing.tsx

@@ -1,4 +1,4 @@
-import { h, Component, JSX } from 'preact';
+import { h, Component } from 'preact';
 import Navigation from '../navigation';
 import "./routing.scss"
 

src/components/context.tsx

@@ -1,4 +1,4 @@
-import { h, JSX } from "preact";
+import { h } from "preact";
 import "./context.scss";
 
 export default function ContextMenu({ children, event }: { children: JSX.Element | JSX.Element[], event: MouseEvent }) {

src/components/modals/Modal.tsx

@@ -1,5 +1,5 @@
 import { Observable } from "@hibas123/utils";
-import { h, Component, JSX } from "preact";
+import { h, Component } from "preact";
 import CloseIcon from "feather-icons/dist/icons/x.svg";
 
 export default abstract class Modal<T> {
@@ -70,8 +70,7 @@ export default abstract class Modal<T> {
                   <h3>{this.props.modal.title}</h3>
                   {/* <div> */}
                   {!this.props.modal.noClose ?
-                     <img src={CloseIcon} onClick={() => this.props.modal.result(null)} />
+                     <CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} />
-                     // <CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} />
                      : undefined
                   }
                   {/* </div> */}

src/components/routes/settings/Settings.tsx

@@ -1,7 +1,7 @@
 import { h } from "preact";
-import { Page } from "../../page";
+import { Page } from "../../../page";
-import Theme, { ThemeStates } from "../../theme";
+import Theme, { ThemeStates } from "../../../theme";
-import Navigation from "../../navigation";
+import Navigation from "../../../navigation";
 import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg";
 
 export default class SettingsPage extends Page<{ state: any }, { vault: string }> {
@@ -13,7 +13,7 @@ export default class SettingsPage extends Page<{ state: any }, { vault: string }
         let active = Theme.active();
         return <div>
             <header class="header">
-                <a class="header-icon-button" onClick={() => history.back()}><img src={ArrowLeft} height={undefined} width={undefined} /></a>
+                <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
                 <h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>Settings</h3>
                 <span></span>
             </header>

src/components/routes/share/Share.tsx

@@ -1,7 +1,7 @@
 import { h } from "preact";
-import { Page } from "../../page";
+import { Page } from "../../../page";
-import VaultsPage from "../Vaults/Vaults";
+import VaultsPage from "../vaults/Vaults";
-import Navigation from "../../navigation";
+import Navigation from "../../../navigation";
 
 export default class SharePage extends Page<{ state: any }, { vault: string }> {
     text: string;

src/components/routes/vault/Editor.tsx

@@ -0,0 +1,51 @@
+import { Component, h } from "preact";
+import * as EasyMDE from "easymde";
+// import "./easymde.css";
+// import "./dark.css";
+import "easymde/dist/easymde.min.css";
+// import "codemirror/theme/monokai.css";
+
+export interface EditorProps {
+    value: string;
+    valueChange: (value: string) => void;
+    save: () => void;
+    exit: () => void;
+}
+
+export default class Editor extends Component<EditorProps, {}> {
+    element: HTMLInputElement;
+    easymde: EasyMDE;
+
+    componentDidMount() {
+        if (this.easymde)
+            this.easymde.toTextArea();
+
+        this.easymde = new EasyMDE({
+            element: this.element,
+            initialValue: this.props.value,
+            autofocus: true,
+            spellChecker: false
+            // theme: "monokai"
+            // autoDownloadFontAwesome: true
+        })
+
+        this.easymde.codemirror.on("change", () => {
+            this.props.valueChange(this.easymde.value());
+        });
+
+        this.easymde.codemirror.addKeyMap({
+            "Ctrl-S": () => this.props.save(),
+            "Esc": () => this.props.exit()
+        })
+    }
+
+    shouldComponentUpdate(props: EditorProps) {
+        if (this.easymde.value() !== props.value)
+            this.easymde.value(props.value);
+        return false;
+    }
+
+    render() {
+        return <textarea ref={ta => this.element = ta}></textarea>
+    }
+}

src/components/routes/vault/Entry.1.tsx.old

@@ -1,12 +1,12 @@
 import { h, Component } from "preact"
-import { IVault, ViewNote } from "../../notes";
+import { IVault, ViewNote } from "../../../notes";
 import Trash from "feather-icons/dist/icons/trash-2.svg"
 import X from "feather-icons/dist/icons/x.svg"
 import Save from "feather-icons/dist/icons/save.svg"
 
-import Navigation from "../../navigation";
+import Navigation from "../../../navigation";
-import { YesNoModal } from "../../components/modals/YesNoModal";
+import { YesNoModal } from "../../modals/YesNoModal";
-import Notifications, { MessageType } from "../../notifications";
+import Notifications, { MessageType } from "../../../notifications";
 
 const minRows = 3;
 export default class EntryComponent extends Component<{ vault: Promise<IVault>, id: string | undefined, note: string | undefined }, { title: string, changed: boolean }> {
@@ -166,10 +166,10 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
 
       return <div>
          <header class="header">
-            <a class="header-icon-button" onClick={() => this.exitHandler()}><img src={X} height={undefined} width={undefined} /></a>
+            <a class="header-icon-button" onClick={() => this.exitHandler()}><X height={undefined} width={undefined} /></a>
-            {this.state.changed ? <a class="header-icon-button" style="margin-left: 0.5em;" onClick={() => save_handler()}><img src={Save} height={undefined} width={undefined} /></a> : undefined}
+            {this.state.changed ? <a class="header-icon-button" style="margin-left: 0.5em;" onClick={() => save_handler()}><Save height={undefined} width={undefined} /></a> : undefined}
             <h3 style="display:inline" class="button header-title">{this.state.title}</h3>
-            <a class="header-icon-button" onClick={() => delete_handler()}><img src={Trash} height={undefined} width={undefined} /></a>
+            <a class="header-icon-button" onClick={() => delete_handler()}><Trash height={undefined} width={undefined} /></a>
          </header>
          <div class="container">
             <textarea

src/components/routes/vault/Entry.tsx

@@ -0,0 +1,139 @@
+import { h, Component } from "preact"
+import { IVault, ViewNote } from "../../../notes";
+import Trash from "feather-icons/dist/icons/trash-2.svg"
+import X from "feather-icons/dist/icons/x.svg"
+import Save from "feather-icons/dist/icons/save.svg"
+
+import Navigation from "../../../navigation";
+import { YesNoModal } from "../../modals/YesNoModal";
+import Notifications, { MessageType } from "../../../notifications";
+import Theme from "../../../theme";
+
+import Editor from "./Editor";
+
+const minRows = 3;
+export default class EntryComponent extends Component<{ vault: Promise<IVault>, id: string | undefined, note: string | undefined }, { title: string, changed: boolean }> {
+   private text: string = "";
+   private vault: IVault;
+   // private lineHeight: number = 24;
+   private note: ViewNote;
+
+   private skip_save: boolean = false;
+
+
+   constructor(props) {
+      super(props);
+      this.state = { changed: false, title: "" };
+   }
+
+   private toVault() {
+      history.back();
+   }
+
+   componentDidMount() { }
+
+   async componentWillMount() {
+      this.text = "";
+      this.vault = undefined;
+      this.note = undefined;
+      this.skip_save = false;
+      this.setState({ changed: false, title: "" });
+      try {
+         this.vault = await this.props.vault;
+         let note: ViewNote;
+         let changed = false;
+         if (this.props.id)
+            note = await this.vault.getNote(this.props.id)
+         else {
+            note = this.vault.newNote();
+            if (this.props.note) {
+               note.__value = this.props.note;
+               changed = true;
+            }
+         }
+
+         if (!note) {
+            Notifications.sendNotification("Note not found!", MessageType.ERROR);
+         } else {
+            this.note = note;
+            this.text = note.__value;
+
+            let [title] = this.text.split("\n", 1);
+            this.setState({ title, changed })
+         }
+      } catch (err) {
+         Notifications.sendError(err);
+      }
+   }
+
+   private async save() {
+      try {
+         if (this.state.changed) {
+            this.note.__value = this.text;
+            await this.vault.saveNote(this.note);
+            this.setState({ changed: false })
+         }
+      } catch (err) {
+         Notifications.sendError(err);
+      }
+   }
+
+   componentWillUnmount() {
+      if (!this.skip_save)
+         this.save()
+   }
+
+   private textChange(value: string) {
+      if (!this.state.changed && value !== this.text)
+         this.setState({ changed: true })
+
+      this.text = value;
+
+      let [title] = value.split("\n", 1);
+      if (title !== this.state.title)
+         this.setState({ title });
+   }
+
+   private async exitHandler() {
+      if (this.state.changed) {
+         let modal = new YesNoModal("Really want to quit?");
+         let res = await modal.getResult();
+         if (res === true) {
+            this.skip_save = true;
+            this.toVault();
+         }
+      } else
+         this.toVault()
+   }
+
+   render() {
+      const save_handler = async () => {
+         await this.save()
+         Navigation.setPage("/vault", { id: this.vault.id }, { entry: "false" }, true);
+         this.toVault()
+      }
+
+      const delete_handler = async () => {
+         await this.vault.deleteNote(this.props.id);
+         this.toVault()
+      }
+
+      console.log("Rerender")
+
+      return <div>
+         <header class="header">
+            <a class="header-icon-button" onClick={() => this.exitHandler()}><X height={undefined} width={undefined} /></a>
+            {this.state.changed ? <a class="header-icon-button" style="margin-left: 0.5em;" onClick={() => save_handler()}><Save height={undefined} width={undefined} /></a> : undefined}
+            <h3 style="display:inline" class="button header-title">{this.state.title}</h3>
+            <a class="header-icon-button" onClick={() => delete_handler()}><Trash height={undefined} width={undefined} /></a>
+         </header>
+         <div class="container" style={Theme.isDark() ? "filter: invert(100%);" : ""}>
+            <Editor
+               value={this.text}
+               valueChange={value => this.textChange(value)}
+               save={() => this.save()}
+               exit={() => this.exitHandler()} />
+         </div>
+      </div>
+   }
+}

src/components/routes/vault/EntryList.tsx

@@ -1,11 +1,11 @@
-import { h, Component, JSX } from "preact"
+import { h, Component } from "preact"
-import Notes, { IVault, BaseNote } from "../../notes";
+import Notes, { IVault, BaseNote } from "../../../notes";
-import AddButton from "../../components/AddButton";
+import AddButton from "../../AddButton";
-import Navigation from "../../navigation";
+import Navigation from "../../../navigation";
 import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg"
 import Search from "feather-icons/dist/icons/search.svg"
-import ContextMenu from "../../components/context";
+import ContextMenu from "../../context";
-import Notifications from "../../notifications";
+import Notifications from "../../../notifications";
 import { Observable, Lock } from "@hibas123/utils";
 
 
@@ -266,7 +266,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
       return <div>
          {this.state.context}
          <header class="header">
-            <a class="header-icon-button" onClick={() => history.back()}><img src={ArrowLeft} height={undefined} width={undefined} /></a>
+            <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
             <h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h3>
             <span></span>
             {/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
@@ -276,7 +276,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
             <div style="display:flex;">
                <input class="inp" type="text" style="width: 100%; height: 40px;" onKeyUp={this.searchChanged} ref={elm => this.searchInput = elm} />
                <button class="btn btn-primary" style="padding: 5px 10px; margin: 0; height: 40px; width: 40px;">
-                  <img src={Search} />
+                  <Search />
                </button>
             </div>
 

src/components/routes/vault/Vault.tsx

@@ -1,7 +1,7 @@
 import { h } from "preact"
-import { Page } from "../../page";
+import { Page } from "../../../page";
-import Notes, { IVault, BaseNote } from "../../notes";
+import Notes, { IVault, BaseNote } from "../../../notes";
-import Navigation from "../../navigation";
+import Navigation from "../../../navigation";
 import EntryComponent from "./Entry";
 import EntryList from "./EntryList";
 

src/components/routes/vault/dark.css

@@ -0,0 +1,858 @@
+/* SimpleMDE Theme Dark v0.0.0 https://github.com/xcatliu/simplemde-theme-dark#readme */
+
+@charset "UTF-8";
+
+.CodeMirror-gutter-filler,
+.CodeMirror-scrollbar-filler {
+    background-color: #fff
+}
+
+.CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+    white-space: nowrap
+}
+
+.CodeMirror-linenumber {
+    padding: 0 3px 0 5px;
+    min-width: 20px;
+    text-align: right;
+    color: #999;
+    white-space: nowrap
+}
+
+.CodeMirror-guttermarker {
+    color: #000
+}
+
+.CodeMirror-guttermarker-subtle {
+    color: #999
+}
+
+.CodeMirror-cursor {
+    border-left: 1px solid #000;
+    border-right: none;
+    width: 0
+}
+
+.CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver
+}
+
+.cm-fat-cursor .CodeMirror-cursor {
+    width: auto;
+    border: 0 !important;
+    background: #7e7
+}
+
+.cm-fat-cursor div.CodeMirror-cursors {
+    z-index: 1
+}
+
+.cm-animate-fat-cursor {
+    width: auto;
+    border: 0;
+    -webkit-animation: blink 1.06s steps(1) infinite;
+    animation: blink 1.06s steps(1) infinite;
+    background-color: #7e7
+}
+
+@-webkit-keyframes blink {
+    50% {
+        background-color: transparent
+    }
+}
+
+@keyframes blink {
+    50% {
+        background-color: transparent
+    }
+}
+
+.cm-tab {
+    display: inline-block;
+    text-decoration: inherit
+}
+
+.CodeMirror-rulers {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -50px;
+    bottom: -20px;
+    overflow: hidden
+}
+
+.CodeMirror-ruler {
+    border-left: 1px solid #ccc;
+    top: 0;
+    bottom: 0;
+    position: absolute
+}
+
+.CodeMirror,
+.CodeMirror-scroll {
+    position: relative;
+    min-height: 300px
+}
+
+.cm-s-default .cm-header {
+    color: #00f
+}
+
+.cm-s-default .cm-quote {
+    color: #090
+}
+
+.cm-negative {
+    color: #d44
+}
+
+.cm-positive {
+    color: #292
+}
+
+.cm-header,
+.cm-strong {
+    font-weight: 700
+}
+
+.cm-em {
+    font-style: italic
+}
+
+.cm-link {
+    text-decoration: underline
+}
+
+.CodeMirror .CodeMirror-code .cm-strikethrough,
+.cm-strikethrough {
+    text-decoration: line-through
+}
+
+.cm-s-default .cm-keyword {
+    color: #708
+}
+
+.cm-s-default .cm-atom {
+    color: #219
+}
+
+.cm-s-default .cm-number {
+    color: #164
+}
+
+.cm-s-default .cm-def {
+    color: #00f
+}
+
+.cm-s-default .cm-variable-2 {
+    color: #05a
+}
+
+.cm-s-default .cm-variable-3 {
+    color: #085
+}
+
+.cm-s-default .cm-comment {
+    color: #a50
+}
+
+.cm-s-default .cm-string {
+    color: #a11
+}
+
+.cm-s-default .cm-string-2 {
+    color: #f50
+}
+
+.cm-s-default .cm-meta,
+.cm-s-default .cm-qualifier {
+    color: #555
+}
+
+.cm-s-default .cm-builtin {
+    color: #30a
+}
+
+.cm-s-default .cm-bracket {
+    color: #997
+}
+
+.cm-s-default .cm-tag {
+    color: #170
+}
+
+.cm-s-default .cm-attribute {
+    color: #00c
+}
+
+.cm-s-default .cm-hr {
+    color: #999
+}
+
+.cm-s-default .cm-link {
+    color: #00c
+}
+
+.cm-invalidchar,
+.cm-s-default .cm-error {
+    color: red
+}
+
+.CodeMirror-composing {
+    border-bottom: 2px solid
+}
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+    color: #0f0
+}
+
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: #f22
+}
+
+.CodeMirror-matchingtag {
+    background: rgba(255, 150, 0, .3)
+}
+
+.CodeMirror-activeline-background {
+    background: #e8f2ff
+}
+
+.CodeMirror {
+    position: relative;
+    overflow: hidden;
+    background: #fff
+}
+
+.CodeMirror-scroll {
+    overflow: scroll !important;
+    height: 100%;
+    outline: 0;
+    position: relative
+}
+
+.CodeMirror-sizer {
+    position: relative;
+    border-right: 30px solid transparent
+}
+
+.CodeMirror-gutter-filler,
+.CodeMirror-hscrollbar,
+.CodeMirror-scrollbar-filler,
+.CodeMirror-vscrollbar {
+    position: absolute;
+    z-index: 6;
+    display: none
+}
+
+.CodeMirror-vscrollbar {
+    right: 0;
+    top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll
+}
+
+.CodeMirror-hscrollbar {
+    bottom: 0;
+    left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll
+}
+
+.CodeMirror-scrollbar-filler {
+    right: 0;
+    bottom: 0
+}
+
+.CodeMirror-gutter-filler {
+    left: 0;
+    bottom: 0
+}
+
+.CodeMirror-gutters {
+    position: absolute;
+    left: 0;
+    top: 0;
+    min-height: 100%;
+    z-index: 3
+}
+
+.CodeMirror-gutter {
+    white-space: normal;
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+    margin-bottom: -30px
+}
+
+.CodeMirror-gutter-wrapper {
+    position: absolute;
+    z-index: 4;
+    background: 0 0 !important;
+    border: none !important;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+
+.CodeMirror-gutter-background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 4
+}
+
+.CodeMirror-gutter-elt {
+    position: absolute;
+    cursor: default;
+    z-index: 4
+}
+
+.CodeMirror-lines {
+    cursor: text;
+    min-height: 1px
+}
+
+.CodeMirror pre {
+    border-radius: 0;
+    border-width: 0;
+    background: 0 0;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+    line-height: inherit;
+    color: inherit;
+    z-index: 2;
+    position: relative;
+    overflow: visible;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-variant-ligatures: contextual;
+    font-variant-ligatures: contextual
+}
+
+.CodeMirror-wrap pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal
+}
+
+.CodeMirror-linebackground {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 0
+}
+
+.CodeMirror-linewidget {
+    position: relative;
+    z-index: 2;
+    overflow: auto
+}
+
+.CodeMirror-code {
+    outline: 0
+}
+
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber,
+.CodeMirror-scroll,
+.CodeMirror-sizer {
+    box-sizing: content-box
+}
+
+.CodeMirror-measure {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden
+}
+
+.CodeMirror-cursor {
+    position: absolute;
+    pointer-events: none
+}
+
+.CodeMirror-measure pre {
+    position: static
+}
+
+div.CodeMirror-cursors {
+    visibility: hidden;
+    position: relative;
+    z-index: 3
+}
+
+.CodeMirror-focused div.CodeMirror-cursors,
+div.CodeMirror-dragcursors {
+    visibility: visible
+}
+
+.CodeMirror-selected {
+    background: #d9d9d9
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+    background: #d7d4f0
+}
+
+.CodeMirror-crosshair {
+    cursor: crosshair
+}
+
+.CodeMirror-line::selection,
+.CodeMirror-line>span::selection,
+.CodeMirror-line>span>span::selection {
+    background: #d7d4f0
+}
+
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line>span::-moz-selection,
+.CodeMirror-line>span>span::-moz-selection {
+    background: #d7d4f0
+}
+
+.cm-searching {
+    background: #ffa;
+    background: rgba(255, 255, 0, .4)
+}
+
+.cm-force-border {
+    padding-right: .1px
+}
+
+@media print {
+    .CodeMirror div.CodeMirror-cursors {
+        visibility: hidden
+    }
+}
+
+.cm-tab-wrap-hack:after {
+    content: ''
+}
+
+span.CodeMirror-selectedtext {
+    background: 0 0
+}
+
+.CodeMirror {
+    background-color: #444;
+    border: 1px solid #555;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    color: #aaa;
+    font-family: inherit;
+    font-size: 18px;
+    height: auto;
+    line-height: 1.5;
+    padding: 14px;
+    z-index: 1
+}
+
+.CodeMirror-scroll {
+    margin-bottom: -32px;
+    margin-right: -32px;
+    padding-bottom: 32px
+}
+
+.CodeMirror-fullscreen {
+    background-color: #444;
+    border: 0;
+    border-top: 1px solid #555;
+    bottom: 0;
+    height: auto;
+    left: 0;
+    position: fixed !important;
+    right: 0;
+    top: 58px;
+    z-index: 9
+}
+
+.CodeMirror-sided {
+    width: 50% !important
+}
+
+.CodeMirror .CodeMirror-placeholder {
+    color: #777
+}
+
+.CodeMirror-cursor {
+    border-left-color: #aaa
+}
+
+.CodeMirror pre,
+.CodeMirror-lines {
+    padding: 0
+}
+
+.CodeMirror-focused .CodeMirror-selected,
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line>span::-moz-selection,
+.CodeMirror-line>span>span::-moz-selection,
+.CodeMirror-selected {
+    background-color: rgba(255, 255, 255, .1)
+}
+
+.CodeMirror-focused .CodeMirror-selected,
+.CodeMirror-line::selection,
+.CodeMirror-line>span::selection,
+.CodeMirror-line>span>span::selection,
+.CodeMirror-selected {
+    background-color: rgba(255, 255, 255, .1)
+}
+
+.CodeMirror .CodeMirror-code .cm-attribute,
+.CodeMirror .CodeMirror-code .cm-tag {
+    color: #95bf40
+}
+
+.CodeMirror .CodeMirror-code .cm-string {
+    color: #777
+}
+
+.CodeMirror .CodeMirror-code .cm-link {
+    color: #ffd500
+}
+
+.CodeMirror .CodeMirror-code .cm-formatting-code,
+.CodeMirror .CodeMirror-code .cm-formatting-code-block,
+.CodeMirror .CodeMirror-code .cm-formatting-em,
+.CodeMirror .CodeMirror-code .cm-formatting-header,
+.CodeMirror .CodeMirror-code .cm-formatting-strikethrough,
+.CodeMirror .CodeMirror-code .cm-formatting-strong,
+.CodeMirror .CodeMirror-code .cm-hr,
+.CodeMirror .CodeMirror-code .cm-quote,
+.CodeMirror .CodeMirror-code .cm-url {
+    color: #777
+}
+
+.CodeMirror .CodeMirror-code .cm-header-1,
+.CodeMirror .CodeMirror-code .cm-header-2,
+.CodeMirror .CodeMirror-code .cm-header-3,
+.CodeMirror .CodeMirror-code .cm-header-4,
+.CodeMirror .CodeMirror-code .cm-header-5,
+.CodeMirror .CodeMirror-code .cm-header-6 {
+    line-height: 2
+}
+
+.CodeMirror .CodeMirror-code .cm-header-1 {
+    font-size: 32px
+}
+
+.CodeMirror .CodeMirror-code .cm-header-2 {
+    font-size: 26px
+}
+
+.CodeMirror .CodeMirror-code .cm-header-3 {
+    font-size: 24px
+}
+
+.CodeMirror .CodeMirror-code .cm-header-4 {
+    font-size: 22px
+}
+
+.CodeMirror .CodeMirror-code .cm-header-5 {
+    font-size: 20px
+}
+
+.CodeMirror .CodeMirror-code .cm-header-6 {
+    font-size: 18px
+}
+
+.CodeMirror .CodeMirror-code .cm-header,
+.CodeMirror .CodeMirror-code .cm-strong {
+    font-weight: 600
+}
+
+.CodeMirror .CodeMirror-code .cm-comment {
+    background-color: rgba(255, 255, 255, .05);
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 14px;
+    padding: 6px 0 4px
+}
+
+.CodeMirror .CodeMirror-code span.CodeMirror-selectedtext.cm-comment {
+    background-color: rgba(255, 255, 255, .05)
+}
+
+.editor-preview {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 2
+}
+
+.editor-preview-side {
+    border: 0;
+    border-left: 1px solid #555;
+    border-top: 1px solid #555;
+    bottom: 0;
+    position: fixed;
+    right: 0;
+    top: 58px;
+    width: 50%;
+    z-index: 9
+}
+
+.editor-preview,
+.editor-preview-side {
+    background-color: #444;
+    box-sizing: border-box;
+    color: #aaa;
+    display: none;
+    font-family: inherit;
+    font-size: 18px;
+    line-height: 1.5;
+    overflow: auto;
+    padding: 0 14px 14px
+}
+
+.editor-preview pre,
+.editor-preview-side pre {
+    background-color: rgba(255, 255, 255, .05);
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 14px;
+    line-height: 1.2;
+    margin-top: 14px;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 14px
+}
+
+.editor-preview pre code,
+.editor-preview-side pre code {
+    background-color: transparent;
+    font-size: 14px;
+    padding: 0
+}
+
+.editor-preview-active,
+.editor-preview-active-side {
+    display: block
+}
+
+.editor-preview table,
+.editor-preview-side table {
+    background-color: #444;
+    border: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%
+}
+
+.editor-preview table caption,
+.editor-preview-side table caption {
+    caption-side: bottom;
+    color: #777;
+    padding: 7px;
+    text-align: left
+}
+
+.editor-preview table td,
+.editor-preview table th,
+.editor-preview-side table td,
+.editor-preview-side table th {
+    border: 0;
+    border-bottom: 1px solid #555;
+    padding: 7px;
+    text-align: left
+}
+
+.editor-preview table th,
+.editor-preview-side table th {
+    background-color: rgba(255, 255, 255, .05);
+    font-weight: 600
+}
+
+.editor-preview audio:not([controls]),
+.editor-preview-side audio:not([controls]) {
+    display: none;
+    height: 0
+}
+
+.editor-preview img,
+.editor-preview-side img {
+    max-width: 100%;
+    vertical-align: middle
+}
+
+.editor-preview audio,
+.editor-preview video,
+.editor-preview-side audio,
+.editor-preview-side video {
+    width: 100%
+}
+
+.editor-toolbar {
+    background-color: #444;
+    border: 1px solid #555;
+    border-bottom: 0;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    font-size: 18px;
+    padding: 0 14px;
+    position: relative;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+
+.editor-toolbar::after,
+.editor-toolbar::before {
+    content: ' ';
+    display: block;
+    height: 1px
+}
+
+.editor-toolbar::before {
+    margin-bottom: 7px
+}
+
+.editor-toolbar::after {
+    margin-top: 7px
+}
+
+.editor-toolbar a {
+    border: 1px solid transparent;
+    border-radius: 3px;
+    color: #777 !important;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 80%;
+    height: 30px;
+    margin: 0;
+    text-align: center;
+    text-decoration: none !important;
+    width: 30px
+}
+
+.editor-toolbar a.active,
+.editor-toolbar a:hover {
+    border-color: #555;
+    color: #aaa !important
+}
+
+.editor-toolbar a::before {
+    line-height: 30px
+}
+
+.editor-toolbar a.fa-header-x::after {
+    bottom: -.25em;
+    font-family: inherit;
+    font-size: 80%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline
+}
+
+.editor-toolbar a.fa-header-1::after {
+    content: "1"
+}
+
+.editor-toolbar a.fa-header-2::after {
+    content: "2"
+}
+
+.editor-toolbar a.fa-header-3::after {
+    content: "3"
+}
+
+.editor-toolbar a.fa-header-bigger::after {
+    content: "▲"
+}
+
+.editor-toolbar a.fa-header-smaller::after {
+    content: "▼"
+}
+
+.editor-toolbar i.separator {
+    border-right: 1px solid #555;
+    color: transparent;
+    display: inline-block;
+    margin: 0 7px;
+    text-indent: -10px;
+    width: 0
+}
+
+.editor-toolbar:hover a {
+    color: #aaa !important
+}
+
+.editor-toolbar.fullscreen {
+    background-color: #444;
+    border: 0;
+    box-sizing: border-box;
+    height: 58px;
+    left: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 14px;
+    padding-top: 14px;
+    position: fixed;
+    top: 0;
+    white-space: nowrap;
+    width: 100%;
+    z-index: 9
+}
+
+.editor-toolbar.fullscreen::after,
+.editor-toolbar.fullscreen::before {
+    height: 58px;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    top: 0;
+    width: 20px
+}
+
+@media only screen and (max-width:700px) {
+    .editor-toolbar a.no-mobile {
+        display: none
+    }
+}
+
+.editor-toolbar.disabled-for-preview a:not(.no-disable) {
+    background-color: #444;
+    border-color: transparent;
+    pointer-events: none;
+    text-shadow: inherit
+}
+
+.editor-statusbar {
+    color: #777;
+    font-family: inherit;
+    font-size: 80%;
+    padding: 7px 14px;
+    text-align: right
+}
+
+.editor-statusbar span {
+    display: inline-block;
+    margin-left: 1em
+}
+
+.editor-statusbar .lines::before {
+    content: 'lines: '
+}
+
+.editor-statusbar .words::before {
+    content: 'words: '
+}
+
+.editor-statusbar .characters::before {
+    content: 'characters: '
+}
+
+/*# sourceMappingURL=simplemde-theme-dark.min.css.map */

src/components/routes/vault/easymde.css

@@ -0,0 +1,321 @@
+.CodeMirror {
+    box-sizing: border-box;
+    height: auto;
+    border: 1px solid #ddd;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: 10px;
+    font: inherit;
+    z-index: 1;
+    word-wrap: break-word;
+}
+
+.CodeMirror-scroll {
+    cursor: text;
+}
+
+.CodeMirror-fullscreen {
+    background: #fff;
+    position: fixed !important;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
+    z-index: 9;
+    border-right: none !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.CodeMirror-sided {
+    width: 50% !important;
+}
+
+.CodeMirror-placeholder {
+    opacity: .5;
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+    background: #d9d9d9;
+}
+
+.editor-toolbar {
+    position: relative;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+    padding: 0 10px;
+    border-top: 1px solid #bbb;
+    border-left: 1px solid #bbb;
+    border-right: 1px solid #bbb;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.editor-toolbar:after,
+.editor-toolbar:before {
+    display: block;
+    content: ' ';
+    height: 1px;
+}
+
+.editor-toolbar:before {
+    margin-bottom: 8px
+}
+
+.editor-toolbar:after {
+    margin-top: 8px
+}
+
+.editor-toolbar.fullscreen {
+    width: 100%;
+    height: 50px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    background: #fff;
+    border: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    z-index: 9;
+}
+
+.editor-toolbar.fullscreen::before {
+    width: 20px;
+    height: 50px;
+    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
+    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.editor-toolbar.fullscreen::after {
+    width: 20px;
+    height: 50px;
+    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
+    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    position: fixed;
+    top: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.editor-toolbar button {
+    background: transparent;
+    display: inline-block;
+    text-align: center;
+    text-decoration: none !important;
+    width: 30px;
+    height: 30px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.editor-toolbar button.active,
+.editor-toolbar button:hover {
+    background: #fcfcfc;
+    border-color: #95a5a6;
+}
+
+.editor-toolbar i.separator {
+    display: inline-block;
+    width: 0;
+    border-left: 1px solid #d9d9d9;
+    border-right: 1px solid #fff;
+    color: transparent;
+    text-indent: -10px;
+    margin: 0 6px;
+}
+
+.editor-toolbar button:after {
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+    font-size: 65%;
+    vertical-align: text-bottom;
+    position: relative;
+    top: 2px;
+}
+
+.editor-toolbar button.heading-1:after {
+    content: "1";
+}
+
+.editor-toolbar button.heading-2:after {
+    content: "2";
+}
+
+.editor-toolbar button.heading-3:after {
+    content: "3";
+}
+
+.editor-toolbar button.heading-bigger:after {
+    content: "▲";
+}
+
+.editor-toolbar button.heading-smaller:after {
+    content: "▼";
+}
+
+.editor-toolbar.disabled-for-preview button:not(.no-disable) {
+    opacity: .6;
+    pointer-events: none;
+}
+
+@media only screen and (max-width: 700px) {
+    .editor-toolbar i.no-mobile {
+        display: none;
+    }
+}
+
+.editor-statusbar {
+    padding: 8px 10px;
+    font-size: 12px;
+    color: #959694;
+    text-align: right;
+}
+
+.editor-statusbar span {
+    display: inline-block;
+    min-width: 4em;
+    margin-left: 1em;
+}
+
+.editor-statusbar .lines:before {
+    content: 'lines: '
+}
+
+.editor-statusbar .words:before {
+    content: 'words: '
+}
+
+.editor-statusbar .characters:before {
+    content: 'characters: '
+}
+
+.editor-preview {
+    padding: 10px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #fafafa;
+    z-index: 7;
+    overflow: auto;
+    display: none;
+    box-sizing: border-box;
+}
+
+.editor-preview-side {
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 50%;
+    top: 50px;
+    right: 0;
+    background: #fafafa;
+    z-index: 9;
+    overflow: auto;
+    display: none;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    word-wrap: break-word;
+}
+
+.editor-preview-active-side {
+    display: block
+}
+
+.editor-preview-active {
+    display: block
+}
+
+.editor-preview>p,
+.editor-preview-side>p {
+    margin-top: 0
+}
+
+.editor-preview pre,
+.editor-preview-side pre {
+    background: #eee;
+    margin-bottom: 10px;
+}
+
+.editor-preview table td,
+.editor-preview table th,
+.editor-preview-side table td,
+.editor-preview-side table th {
+    border: 1px solid #ddd;
+    padding: 5px;
+}
+
+.cm-s-easymde .cm-tag {
+    color: #63a35c;
+}
+
+.cm-s-easymde .cm-attribute {
+    color: #795da3;
+}
+
+.cm-s-easymde .cm-string {
+    color: #183691;
+}
+
+.cm-s-easymde .cm-header-1 {
+    font-size: 200%;
+    line-height: 200%;
+}
+
+.cm-s-easymde .cm-header-2 {
+    font-size: 160%;
+    line-height: 160%;
+}
+
+.cm-s-easymde .cm-header-3 {
+    font-size: 125%;
+    line-height: 125%;
+}
+
+.cm-s-easymde .cm-header-4 {
+    font-size: 110%;
+    line-height: 110%;
+}
+
+.cm-s-easymde .cm-comment {
+    background: rgba(0, 0, 0, .05);
+    border-radius: 2px;
+}
+
+.cm-s-easymde .cm-link {
+    color: #7f8c8d;
+}
+
+.cm-s-easymde .cm-url {
+    color: #aab2b3;
+}
+
+.cm-s-easymde .cm-quote {
+    color: #7f8c8d;
+    font-style: italic;
+}

src/components/routes/vaults/Vaults.tsx

@@ -1,16 +1,16 @@
-import { h, JSX } from "preact"
+import { h } from "preact"
-import { Page } from "../../page";
+import { Page } from "../../../page";
-import Notes, { VaultList } from "../../notes";
+import Notes, { VaultList } from "../../../notes";
 import "./vaults.scss"
 import Lock from "feather-icons/dist/icons/lock.svg";
 import Unlock from "feather-icons/dist/icons/unlock.svg";
 import Settings from "feather-icons/dist/icons/settings.svg"
-import Navigation from "../../navigation";
+import Navigation from "../../../navigation";
-import { InputModal } from "../../components/modals/InputModal";
+import { InputModal } from "../../modals/InputModal";
-import { YesNoModal } from "../../components/modals/YesNoModal";
+import { YesNoModal } from "../../modals/YesNoModal";
-import AddButton from "../../components/AddButton";
+import AddButton from "../../AddButton";
-import ContextMenu from "../../components/context";
+import ContextMenu from "../../context";
-import Notifications from "../../notifications";
+import Notifications from "../../../notifications";
 
 export interface VaultsProps {
    state: any;
@@ -206,13 +206,9 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
    }
 
    render() {
-      // <Unlock height={undefined} width={undefined} />}
-      // <Lock height={undefined} width={undefined} />
       let elms = this.state.vaults.map(vault => {
          return <li class="vaults_vault" onClick={() => this.openVault(vault)} onContextMenu={(evt) => this.onContext(evt, vault)}>
-            {vault.encrypted ? <img src={Lock} /> : <img src={Unlock} />}
+            {vault.encrypted ? <Lock height={undefined} width={undefined} /> : <Unlock height={undefined} width={undefined} />}
-
-
             <span>
                {vault.name}
             </span>
@@ -225,10 +221,7 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
          <header class="header">
             <span></span>
             <h3 style="display:inline" onClick={() => Navigation.setPage("/")}>{this.props.selectVault ? "Select Vault for share" : "Your vaults:"}</h3>
-            <a class="header-icon-button" onClick={() => Navigation.setPage("/settings")}>
+            <a class="header-icon-button" onClick={() => Navigation.setPage("/settings")}><Settings height={undefined} width={undefined} /></a>
-               <img src={Settings} />
-               {/* <Settings height={undefined} width={undefined} /> */}
-            </a>
          </header>
          <AddButton onClick={() => this.addButtonClick()} />
          <div class="container">

src/index.html

@@ -6,7 +6,7 @@
    <meta charset="utf8" />
    <meta name="Description" content="Notes app">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
-   <link rel="manifest" href="./manifest.json">
+   <link rel="manifest" href="/manifest.json">
    <!-- <link rel="shortcut icon" href="/public/icon-72x72.png"> -->
 
    <!-- Add to home screen for Safari on iOS -->
@@ -15,9 +15,9 @@
    <meta name="apple-mobile-web-app-title" content="Secure Notes">
 
 
-   <!-- <link rel="apple-touch-icon" sizes="180x180" href="../public/apple-touch-icon.png"> -->
+   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-   <!-- <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1E88E5"> -->
+   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1E88E5">
-   <script src="./encoding.js"></script>
+   <script src="encoding.js"></script>
    <meta name="msapplication-TileColor" content="#1E88E5">
    <meta name="theme-color" content="#1E88E5">
 </head>
@@ -45,7 +45,7 @@
             console.warn("Disabling Service Worker in debug mode!")
          } else {
             // Register the ServiceWorker
-            navigator.serviceWorker.register('./serviceworker.ts', {
+            navigator.serviceWorker.register('/serviceworker.js', {
                scope: '/'
             }).then(function (reg) {
                console.log('Service worker has been registered for scope:' + reg.scope);
@@ -56,7 +56,6 @@
          }
       }
    </script>
-   <script src="./index.tsx"></script>
 </body>
 
 </html>

src/index.scss

@@ -1,61 +1,53 @@
 @import "./vars.scss";
 
-body {
-   overscroll-behavior-y: contain;
-}
 
 // html {
 //    min-height: 100%;
 //    display: flex;
 // }
 
-$header-margin: .5em;
+// $header-margin: .5em;
 // $header-icon-size: calc(1.5rem * 1);
 // $header-icon-size: 100%;
 
-header {
+// header {
-   display: flex;
+//    display: flex;
-   justify-content: space-between;
+//    justify-content: space-between;
-   margin-bottom: $header-margin;
+//    margin-bottom: $header-margin;
-   align-content: center;
+//    align-content: center;
-   padding: 0.75em;
+//    padding: 0.75em;
-   border-bottom: solid var(--border-color) 1px;
+//    border-bottom: solid var(--border-color) 1px;
-   background-color: var(--primary);
+//    background-color: var(--primary);
 
-   >* {
+//    >* {
-      margin: 0;
+//       margin: 0;
-      color: white;
+//       color: white;
-      background: var(--primary);
+//       background: var(--primary);
-   }
+//    }
 
-   >.header-title {
+//    >.header-title {
-      overflow: hidden;
+//       overflow: hidden;
-      text-overflow: ellipsis;
+//       text-overflow: ellipsis;
-      text-overflow: ellipsis;
+//       text-overflow: ellipsis;
-      white-space: nowrap;
+//       white-space: nowrap;
-      overflow: hidden;
+//       overflow: hidden;
-      flex-grow: 1;
+//       flex-grow: 1;
-      margin: 0 1em;
+//       margin: 0 1em;
-   }
+//    }
 
-   .header-icon-button {
+//    .header-icon-button {
-      display: block;
+//       display: block;
-      margin-top: auto;
+//       margin-top: auto;
-      margin-bottom: auto;
+//       margin-bottom: auto;
-      // min-width: $header-icon-size;
+//       min-width: $header-icon-size;
 
-      // >svg {
+//       >svg {
-      //    height: $header-icon-size;
+//          height: $header-icon-size;
-      //    width: $header-icon-size;
+//          width: $header-icon-size;
-      // }
+//       }
-   }
+//    }
 
-}
+// }
-
-
-body {
-  overscroll-behavior-y: contain;
-}
 
 .def-shadow {
    box-shadow: 0px 5px 8px 2px rgba(66, 66, 66, 0.53);

src/index.tsx

@@ -53,41 +53,34 @@ window.cancelIdleCallback =
       clearTimeout(id as any);
    };
 
-console.log(window.requestIdleCallback);
+// console.log(window.requestIdleCallback);
 
 window.debug = {};
 
 
 
 
+import "@hibas123/theme/out/base.css";
 import { h, render } from 'preact';
 import App from './components/App';
-
+import DemoPage from './components/demo';
-
+import Error404Page from './components/routes/404';
-// import "uikit";
+import SettingsPage from './components/routes/settings/Settings';
-// import "uikit/dist/css/uikit.css"
+import SharePage from './components/routes/share/Share';
-import "@hibas123/theme/out/base.css"
+import VaultPage from './components/routes/vault/Vault';
-// import "@hibas123/theme/out/light.css"
+import VaultsPage from './components/routes/vaults/Vaults';
-// import "@hibas123/theme/out/dark.css"
-
 import "./index.scss";
 import Navigation from './navigation';
-import VaultsPage from './Views/Vaults/Vaults';
+import Notes from "./notes";
+import Notifications from './notifications';
 import { Page } from './page';
 
-import Notes from "./notes"
+
-import DemoPage from './components/demo';
-import VaultPage from './Views/Vault/Vault';
-import SharePage from './Views/Share/Share';
-import Notifications from './notifications';
-import Error404Page from './Views/404';
-import SettingsPage from './Views/Settings/Settings';
 window.debug.notes = Notes;
 
 
-import Theme from "./theme";
+// import Theme from "./theme";
 
-console.log("Dark mode:", Theme.active);
 
 (async () => {
    // Initialize notes provider

src/navigation.ts

@@ -1,6 +1,6 @@
 import { Observable } from "@hibas123/utils";
 import { Page, PageProps } from "./page";
-import { h, VNode, JSX } from "preact";
+import { h, VNode } from "preact";
 
 function serializQuery(obj: any) {
    var str = [];

src/notes.ts

@@ -3,7 +3,7 @@ import { Lock, Observable } from "@hibas123/utils";
 import * as aesjs from "aes-js";
 import { IDBPTransaction } from "idb";
 import { sha256 } from "js-sha256";
-import uuidv4 from "uuid/v4";
+import * as uuidv4 from "uuid/v4";
 import * as config from "../config.json";
 import * as b64 from "./helper/base64";
 import IDB from "./helper/indexeddb";
@@ -39,7 +39,6 @@ export interface ViewNote extends BaseNote {
 }
 
 import clonedeep = require("lodash.clonedeep");
-import uuid = require("uuid");
 
 const Encoder = new TextEncoder();
 const Decoder = new TextDecoder();
@@ -82,7 +81,6 @@ export interface IVault {
    saveNote(note: ViewNote, date?: Date): Promise<void>;
    getNote(id: string): Promise<ViewNote>;
    deleteNote(id: string): Promise<void>;
-   // type: string; //Defines type of plugin, that is required to handle this vault
 }
 
 const awaitTimeout = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
@@ -422,7 +420,6 @@ class NotesProvider {
    }
 
    public async createVault(name: string, key?: Uint8Array) {
-      // console.log(uuidv4, uuid);
       let vault: DBNote = {
          __value: this.encrypt("__BASELINE__", key),
          _id: uuidv4(),

src/theme.ts

@@ -1,7 +1,5 @@
-import { readFileSync } from "fs";
+const light = require("!!raw-loader!@hibas123/theme/out/light.css").default;
-
+const dark = require("!!raw-loader!@hibas123/theme/out/dark.css").default;
-const light = readFileSync("./node_modules/@hibas123/theme/out/light.css", "utf8")
-const dark = readFileSync("./node_modules/@hibas123/theme/out/dark.css", "utf8")
 
 export enum ThemeStates {
     AUTO,
@@ -23,7 +21,6 @@ if (window.matchMedia) {
         mediaIsDark = ev.matches;
         apply();
     }
-    console.log(mediaq);
 }
 
 
@@ -49,6 +46,7 @@ function change(state: ThemeStates) {
 
 export default {
     active: () => themeConfig,
-    change: (state: ThemeStates) => change(state)
+    change: (state: ThemeStates) => change(state),
+    isDark: () => isDark
 }
 

src/types.d.ts

@@ -1,15 +1,10 @@
-// declare module "*.svg" {
-//     const SVG: (props: {
-//         width?: number | undefined
-//         height?: number | undefined
-//         onClick?: (evt: MouseEvent) => void;
-//         style?: string;
-//     }) => JSX.Element;
-//     export default SVG;
-// }
-
 declare module "*.svg" {
-    const SVG: string;
+    const SVG: (props: {
+        width?: number | undefined
+        height?: number | undefined
+        onClick?: (evt: MouseEvent) => void;
+        style?: string;
+    }) => JSX.Element;
     export default SVG;
 }
 

tsconfig.json

@@ -13,8 +13,7 @@
          "dom",
          "esnext"
       ],
-      "resolveJsonModule": true,
+      "resolveJsonModule": true
-      "esModuleInterop": true
    },
    "include": [
       "./src/types.d.ts",