Implemented: New "plugins and their settings"

Fixed: some plugin synchronization bugs.

.eslintignore

@@ -0,0 +1,3 @@
+npm node_modules
+build
+.eslintrc.js.bak

.eslintrc

@@ -0,0 +1,19 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "extends": ["eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended"],
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
+        "@typescript-eslint/ban-ts-comment": "off",
+        "no-prototype-builtins": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "require-await": "warn",
+        "no-async-promise-executor": "off",
+        "@typescript-eslint/no-explicit-any": "off"
+    }
+}

README.md

@@ -50,7 +50,7 @@ Especially, in some companies, people have to store all data to their fully cont
 2. Get your database. IBM Cloudant is preferred for testing. Or you can use your own server with CouchDB.
    For more information, refer below:
     1. [Setup IBM Cloudant](docs/setup_cloudant.md)
-    2. [Setup your CouchDB](docs/setup_own_server.md) (Now writing)
+    2. [Setup your CouchDB](docs/setup_own_server.md)
 3. Enter connection information to Plugin's setting dialog. In details, refer [Settings of Self-hosted LiveSync](docs/settings.md)
 4. Enable LiveSync or other Synchronize method as you like.
 
@@ -75,12 +75,15 @@ Synchronization status is shown in statusbar.
     -   ⚠ Error occurred.
 -   ↑ Uploaded pieces
 -   ↓ Downloaded pieces
+-   ⏳ Count of the pending process  
+If you have deleted or renamed files, please wait until this disappears.
 
 # More supplements
 
 -   When synchronized, files are compared by their modified times and overwritten by the newer ones once. Then plugin checks the conflicts and if a merge is needed, the dialog will open.
 -   Rarely, the file in the database would be broken. The plugin will not write storage when it looks broken, so some old files must be on your device. If you edit the file, it will be cured. But if the file does not exist on any device, can not rescue it. So you can delete these items from the setting dialog.
 -   If your database looks corrupted, try "Drop History". Usually, It is the easiest way.
+-   To stop the bootup sequence for fixing problems on databases, you can put `redflag.md` on top of your vault.
 -   Q: Database is growing, how can I shrink it up?
     A: each of the docs is saved with their old 100 revisions to detect and resolve confliction. Picture yourself that one device has been off the line for a while, and joined again. The device has to check his note and remote saved note. If exists in revision histories of remote notes even though the device's note is a little different from the latest one, it could be merged safely. Even if that is not in revision histories, we only have to check differences after the revision that both devices commonly have. This is like The git's conflict resolving method. So, We have to make the database again like an enlarged git repo if you want to solve the root of the problem.
 -   And more technical Information are in the [Technical Information](docs/tech_info.md)

README_ja.md

@@ -47,7 +47,7 @@ NDAや類似の契約や義務、倫理を守る必要のある、研究者、
 1. Community Pluginsから、Self-holsted LiveSyncと検索しインストールするか、このリポジトリのReleasesから`main.js`, `manifest.json`, `style.css` をダウンロードしvaultの中の`.obsidian/plugins/obsidian-livesync`に入れて、Obsidianを再起動してください。
 2. サーバーを確保します。IBM Cloudantがお手軽かつ堅牢で便利です。完全にセルフホストする際にはお持ちのサーバーにCouchDBをインストールする必要があります。詳しくは下記を参照してください
   1. [IBM Cloudantのセットアップ](docs/setup_cloudant_ja.md)
-  2. [独自のCouchDBのセットアップ](docs/setup_own_server_ja.md) (執筆中)
+  2. [独自のCouchDBのセットアップ](docs/setup_own_server_ja.md)
 3. サーバー情報を入力します。初回のみ、Obsidianを再起動することをオススメします。  
 設定内容の詳細は[このプラグインの設定](docs/settings_ja.md)を参照してください。
 
@@ -78,11 +78,14 @@ Self-hosted LiveSync用にWebClipperも作りました。Chrome Web Storeから
   - ⚠ エラーが発生しています
 - ↑ 送信したデータ数
 - ↓ 受信したデータ数
+-   ⏳ 保留している処理の数です  
+ファイルを削除したりリネームした場合、この表示が消えるまでお待ちください。
 
 # さらなる補足
 - ファイルは同期された後、タイムスタンプを比較して新しければいったん新しい方で上書きされます。その後、衝突が発生したかによって、マージが行われます。
 - まれにファイルが破損することがあります。破損したファイルに関してはディスクへの反映を試みないため、実際には使用しているデバイスには少し古いファイルが残っていることが多いです。そのファイルを再度更新してもらうと、データベースが更新されて問題なくなるケースがあります。ファイルがどの端末にも存在しない場合は、設定画面から、削除できます。
 - データベースが変。そういうときは、いったんデータベースをDrop Historyのapply and sendで再初期化してみてください。だいたい直ります。
+- データベースの復旧中に再起動した場合など、うまくローカルデータベースを修正できない際には、Vaultのトップに`redflag.md`というファイルを置いてください。起動時のシーケンスがスキップされます。
 - データベースが大きくなってきてるんだけど、小さくできる？→各ノートは、それぞれの古い100リビジョンとともに保存されています。例えば、しばらくオフラインだったあるデバイスが、久しぶりに同期したと想定してみてください。そのとき、そのデバイスは最新とは少し異なるリビジョンを持ってるはずです。その場合でも、リモートのリビジョン履歴にリモートのものが存在した場合、安全にマージできます。もしリビジョン履歴に存在しなかった場合、確認しなければいけない差分も、対象を存在して持っている共通のリビジョン以降のみに絞れます。ちょうどGitのような方法で、衝突を解決している形になるのです。そのため、肥大化したリポジトリの解消と同様に、本質的にデータベースを小さくしたい場合は、データベースの作り直しが必要です。
 - その他の技術的なお話は、[技術的な内容](docs/tech_info_ja.md)に書いてあります。
 

docs/settings.md

@@ -23,7 +23,7 @@ The Database name to synchronize.
 ## Local Database Configurations
 "Local Database" is created inside your obsidian.
 
-### Batch database update (beta)
+### Batch database update
 Delay database update until raise replication, open another file, window visibility changed, or file events except for file modification.  
 This option can not be used with LiveSync at the same time.
 
@@ -78,6 +78,27 @@ When running these operations, every synchronization settings is disabled.
 
 **And even your passphrase is wrong, It doesn't be checked before the plugin really decrypts. So If you set the wrong passphrase and run "Apply and Receive", you will get an amount of decryption error. But, this is the specification.**
 
+### minimum chunk size and LongLine threshold
+The configuration of chunk splitting.
+
+Self-hosted LiveSync splits the note into chunks for efficient synchronization. This chunk should be longer than "Minimum chunk size".
+
+Specifically, the length of the chunk is determined by the following orders.
+
+1. Find the nearest newline character, and if it is farther than LongLineThreshold, this piece becomes an independent chunk.
+
+2. If not, find nearest to these items.
+    1. Newline character
+    2. Empty line (Windows style)
+    3. Empty line (non-Windows style)
+3. Compare the farther in these 3 positions and next "\[newline\]#" position, pick a shorter piece to as chunk.
+
+This rule was made empirically from my dataset. If this rule acts as badly on your data. Please give me the information.
+
+You can dump saved note structure to `Dump informations of this doc`. Replace every character to x except newline and "#" when sending information to me.
+
+Default values are 20 letters and 250 letters.
+
 ## General Settings
 
 ### Do not show low-priority log
@@ -122,26 +143,57 @@ Self-hosted LiveSync will delete the folder when the folder becomes empty. If th
 ### Use newer file if conflicted (beta)
 Always use the newer file to resolve and overwrite when conflict has occurred.
 
-### minimum chunk size and LongLine threshold
-The configuration of chunk splitting.
+### Advanced settings
+Self-hosted LiveSync using PouchDB and synchronizes with the remote by [this protocol](https://docs.couchdb.org/en/stable/replication/protocol.html).
+So, it splits every entry into chunks to be acceptable by the database with limited payload size and document size.
 
-Self-hosted LiveSync splits the note into chunks for efficient synchronization. This chunk should be longer than "Minimum chunk size".
+However, it was not enough.
+According to [2.4.2.5.2. Upload Batch of Changed Documents](https://docs.couchdb.org/en/stable/replication/protocol.html#upload-batch-of-changed-documents) in [Replicate Changes](https://docs.couchdb.org/en/stable/replication/protocol.html#replicate-changes), it might become a bigger request.
 
-Specifically, the length of the chunk is determined by the following orders.
+Unfortunately, there is no way to deal with this automatically by size for every request.
+Therefore, I made it possible to configure this.
 
-1. Find the nearest newline character, and if it is farther than LongLineThreshold, this piece becomes an independent chunk.
+Note: If you set these values lower number, the number of requests will increase.  
+Therefore, if you are far from the server, the total throughput will be low, and the traffic will increase.
 
-2. If not, find nearest to these items.
-    1. Newline character
-    2. Empty line (Windows style)
-    3. Empty line (non-Windows style)
-3. Compare the farther in these 3 positions and next "\[newline\]#" position, pick a shorter piece to as chunk.
+### Batch size
+Number of change feed items to process at a time. Defaults to 250.
 
-This rule was made empirically from my dataset. If this rule acts as badly on your data. Please give me the information.
+### Batch limit
+Number of batches to process at a time. Defaults to 40. This along with batch size controls how many docs are kept in memory at a time.
 
-You can dump saved note structure to `Dump informations of this doc`. Replace every character to x except newline and "#" when sending information to me.
+## Miscellaneous
 
-Default values are 20 letters and 250 letters.
+### Show status inside editor
+Show information inside the editor pane.
+It would be useful for mobile.
+
+### Check integrity on saving
+Check all chunks are correctly saved on saving.
+
+### Presets
+You can set synchronization method at once as these pattern:
+- LiveSync
+  - LiveSync : enabled
+  - Batch database update : disabled
+  - Periodic Sync : disabled
+  - Sync on Save : disabled
+  - Sync on File Open : disabled
+  - Sync on Start : disabled
+- Periodic w/ batch
+  - LiveSync : disabled
+  - Batch database update : enabled
+  - Periodic Sync : enabled
+  - Sync on Save : disabled
+  - Sync on File Open : enabled
+  - Sync on Start : enabled
+- Disable all sync
+  - LiveSync : disabled
+  - Batch database update : disabled
+  - Periodic Sync : disabled
+  - Sync on Save : disabled
+  - Sync on File Open : disabled
+  - Sync on Start : disabled
 
 ## Hatch
 From here, everything is under the hood. Please handle it with care.
@@ -160,6 +212,12 @@ The remote database indicates that has been unlocked Pattern 1.
 When you mark all devices as resolved, you can unlock the database.
 But, there's no problem even if you leave it as it is.
 
+### Verify and repair all files
+read all files in the vault, and update them into the database if there's diff or could not read from the database.
+
+### Sanity check
+Make sure that all the files on the local database have all chunks.
+
 ### Drop history
 Drop all histories on the local database and the remote database, and initialize When synchronization time has been prolonged to the new device or new vault, or database size became to be much larger. Try this.
 

docs/settings_ja.md

@@ -25,7 +25,7 @@ CouchDBのURIを入力します。Cloudantの場合は「External Endpoint(prefe
 ## Local Database Configurations
 端末内に作成されるデータベースの設定です。
 
-### Batch database update (beta)
+### Batch database update
 データベースの更新を以下の事象が発生するまで遅延させます。
 - レプリケーションが発生する
 - 他のファイルを開く
@@ -78,6 +78,24 @@ End to End 暗号化を行うに当たって、異なるパスフレーズで暗
 どちらのオペレーションも、実行するとすべての同期設定が無効化されます。  
 **また、パスフレーズのチェックは、実際に復号するまで行いません。そのため、パスフレーズを間違えて設定し、Apply and receiveで同期を行うと、大量のエラーが発生します。これは仕様です。**
 
+### minimum chunk size と LongLine threshold
+チャンクの分割についての設定です。  
+Self-hosted LiveSyncは一つのチャンクのサイズを最低minimum chunk size文字確保した上で、できるだけ効率的に同期できるよう、ノートを分割してチャンクを作成します。  
+これは、同期を行う際に、一定の文字数で分割した場合、先頭の方を編集すると、その後の分割位置がすべてずれ、結果としてほぼまるごとのファイルのファイル送受信を行うことになっていた問題を避けるために実装されました。  
+具体的には、先頭から順に直近の下記の箇所を検索し、一番長く切れたものを一つのチャンクとします。
+
+1. 次の改行を探し、それがLongLine Thresholdより先であれば、一つのチャンクとして確定します。
+
+2. そうではない場合は、下記を順に探します。
+	1. 改行
+	2. windowsでの空行がある所
+	3. 非Windowsでの空行がある所
+3. この三つのうち一番遠い場所と、 「改行後、#から始まる所」を比べ、短い方をチャンクとします。
+
+このルールは経験則的に作りました。実データが偏っているため。もし思わぬ挙動をしている場合は、是非コマンドから`Dump informations of this doc`を選択し、情報をください。  
+改行文字と#を除き、すべて●に置換しても、アルゴリズムは有効に働きます。  
+デフォルトは20文字と、250文字です。
+
 ## General Settings
 一般的な設定です。
 
@@ -124,23 +142,33 @@ Self-hosted LiveSyncは通常、フォルダ内のファイルがすべて削除
 ### Use newer file if conflicted (beta)
 競合が発生したとき、常に新しいファイルを使用して競合を自動的に解決します。
 
-### minimum chunk size と LongLine threshold
-チャンクの分割についての設定です。  
-Self-hosted LiveSyncは一つのチャンクのサイズを最低minimum chunk size文字確保した上で、できるだけ効率的に同期できるよう、ノートを分割してチャンクを作成します。  
-これは、同期を行う際に、一定の文字数で分割した場合、先頭の方を編集すると、その後の分割位置がすべてずれ、結果としてほぼまるごとのファイルのファイル送受信を行うことになっていた問題を避けるために実装されました。  
-具体的には、先頭から順に直近の下記の箇所を検索し、一番長く切れたものを一つのチャンクとします。
+### Advanced settings
+Self-hosted LiveSyncはPouchDBを使用し、リモートと[このプロトコル](https://docs.couchdb.org/en/stable/replication/protocol.html)で同期しています。  
+そのため、全てのノートなどはデータベースが許容するペイロードサイズやドキュメントサイズに併せてチャンクに分割されています。
 
-1. 次の改行を探し、それがLongLine Thresholdより先であれば、一つのチャンクとして確定します。
+しかしながら、それだけでは不十分なケースがあり、[Replicate Changes](https://docs.couchdb.org/en/stable/replication/protocol.html#replicate-changes)の[2.4.2.5.2. Upload Batch of Changed Documents](https://docs.couchdb.org/en/stable/replication/protocol.html#upload-batch-of-changed-documents)を参照すると、このリクエストは巨大になる可能性がありました。
 
-2. そうではない場合は、下記を順に探します。
-	1. 改行
-	2. windowsでの空行がある所
-	3. 非Windowsでの空行がある所
-3. この三つのうち一番遠い場所と、 「改行後、#から始まる所」を比べ、短い方をチャンクとします。
+残念ながら、このサイズを呼び出しごとに自動的に調整する方法はありません。  
+そのため、設定を変更できるように機能追加いたしました。
+
+備考：もし小さな値を設定した場合、リクエスト数は増えます。  
+もしサーバから遠い場合、トータルのスループットは遅くなり、転送量は増えます。
+
+### Batch size
+一度に処理するChange feedの数です。デフォルトは250です。
+
+### Batch limit
+一度に処理するBatchの数です。デフォルトは40です。
+
+## Miscellaneous
+その他の設定です
+### Show status inside editor
+同期の情報をエディター内に表示します。  
+モバイルで便利です。
+
+### Check integrity on saving
+保存時にデータが全て保存できたかチェックを行います。
 
-このルールは経験則的に作りました。実データが偏っているため。もし思わぬ挙動をしている場合は、是非コマンドから`Dump informations of this doc`を選択し、情報をください。  
-改行文字と#を除き、すべて●に置換しても、アルゴリズムは有効に働きます。  
-デフォルトは20文字と、250文字です。
 
 ## Hatch
 ここから先は、困ったときに開ける蓋の中身です。注意して使用してください。
@@ -160,6 +188,12 @@ Self-hosted LiveSyncは一つのチャンクのサイズを最低minimum chunk s
 ご使用のすべてのデバイスでロックを解除した場合は、データベースのロックを解除することができます。  
 ただし、このまま放置しても問題はありません。
 
+### Verify and repair all files
+Vault内のファイルを全て読み込み直し、もし差分があったり、データベースから正常に読み込めなかったものに関して、データベースに反映します。
+
+### Sanity check
+ローカルデータベースに保存されている全てのファイルが正しくチャンクを持っていることを確認します。
+
 ### Drop history
 データベースに記録されている履歴を削除し、データベースを初期化します。  
 新しい端末や新しいVaultへの同期にやたらと時間がかかったり、データベースサイズが肥大化したりしてきた際に使用してください。  

docs/setup_own_server.md

@@ -1,3 +1,95 @@
 # Setup CouchDB to your server
 
-Coming soon!
+
+## Install CouchDB and access from PC or Mac
+
+The easiest way to set up the CouchDB is using the [docker image]((https://hub.docker.com/_/couchdb)).
+
+But some additional configurations are required in `local.ini` to use from Self-hosted LiveSync, like below:
+
+```
+[couchdb]
+single_node=true
+
+[chttpd]
+require_valid_user = true
+
+[chttpd_auth]
+require_valid_user = true
+authentication_redirect = /_utils/session.html
+
+[httpd]
+WWW-Authenticate = Basic realm="couchdb"
+enable_cors = true
+
+[cors]
+origins = app://obsidian.md,capacitor://localhost,http://localhost
+credentials = true
+headers = accept, authorization, content-type, origin, referer
+methods = GET, PUT, POST, HEAD, DELETE
+max_age = 3600
+```
+
+Make `local.ini` and run with docker run like this, you can launch the CouchDB.
+```
+$ docker run --rm -it -e COUCHDB_USER=admin -e COUCHDB_PASSWORD=password -v .local.ini:/opt/couchdb/etc/local.ini -p 5984:5984 couchdb
+```
+Note: At this time, the file owner of local.ini became 5984:5984. It's the limitation docker image. please change the owner before editing local.ini again.
+
+If you could confirm that Self-hosted LiveSync can sync with the server, launch docker image as background as you like.
+
+example)
+```
+$ docker run -d --restart always -e COUCHDB_USER=admin -e COUCHDB_PASSWORD=password -v .local.ini:/opt/couchdb/etc/local.ini -p 5984:5984 couchdb
+```
+
+## Access from mobile device
+If you want to access Self-hosted LiveSync from mobile devices, you need a valid SSL certificate.
+
+### Testing from mobile
+In the testing phase, [localhost.run](http://localhost.run/) or something like services is very useful.
+
+example on using localhost.run)
+```
+$ ssh -R 80:localhost:5984 nokey@localhost.run
+Warning: Permanently added the RSA host key for IP address '35.171.254.69' to the list of known hosts.
+
+===============================================================================
+Welcome to localhost.run!
+
+Follow your favourite reverse tunnel at [https://twitter.com/localhost_run].
+
+**You need a SSH key to access this service.**
+If you get a permission denied follow Gitlab's most excellent howto:
+https://docs.gitlab.com/ee/ssh/
+*Only rsa and ed25519 keys are supported*
+
+To set up and manage custom domains go to https://admin.localhost.run/
+
+More details on custom domains (and how to enable subdomains of your custom
+domain) at https://localhost.run/docs/custom-domains
+
+To explore using localhost.run visit the documentation site:
+https://localhost.run/docs/
+
+===============================================================================
+
+
+** your connection id is xxxxxxxxxxxxxxxxxxxxxxxxxxxx, please mention it if you send me a message about an issue. **
+
+xxxxxxxx.localhost.run tunneled with tls termination, https://xxxxxxxx.localhost.run
+Connection to localhost.run closed by remote host.
+Connection to localhost.run closed.
+```
+
+https://xxxxxxxx.localhost.run is the temporary server address.
+
+### Setting up your domain
+
+Set the A record of your domain to point to your server, and host reverse proxy as you like.  
+Note: Mounting CouchDB on the top directory is not recommended.  
+Using Caddy is a handy way to serve the server with SSL automatically.
+
+I have published [docker-compose.yml and ini files](https://github.com/vrtmrz/self-hosted-livesync-server) that launches Caddy and CouchDB at once. Please try it out.
+
+And, be sure to check the server log and be careful of malicious access.

docs/setup_own_server_ja.md

@@ -1,3 +1,91 @@
-# CouchDB のセットアップ方法
+# CouchDBのセットアップ方法
 
-早めに作成します！
+## CouchDBのインストールとPCやMacでの使用
+CouchDBを構築するには、[Dockerのイメージ](https://hub.docker.com/_/couchdb)を使用するのが一番簡単です。  
+ただし、インストールしたCouchDBをSelf-hosted LiveSyncから使用するためには、少々設定が必要となります。  
+具体的には、下記の設定が`local.ini`として必要になります。
+
+```
+[couchdb]
+single_node=true
+
+[chttpd]
+require_valid_user = true
+
+[chttpd_auth]
+require_valid_user = true
+authentication_redirect = /_utils/session.html
+
+[httpd]
+WWW-Authenticate = Basic realm="couchdb"
+enable_cors = true
+
+[cors]
+origins = app://obsidian.md,capacitor://localhost,http://localhost
+credentials = true
+headers = accept, authorization, content-type, origin, referer
+methods = GET, PUT, POST, HEAD, DELETE
+max_age = 3600
+```
+
+このファイルを作成し、
+```
+$ docker run --rm -it -e COUCHDB_USER=admin -e COUCHDB_PASSWORD=password -v .local.ini:/opt/couchdb/etc/local.ini -p 5984:5984 couchdb
+```
+とすると簡単にCouchDBを起動することができます。  
+備考：このとき、local.iniのオーナーが5984:5984になります。これは、Dockerイメージの制限事項です。編集する場合はいったんオーナーを変更してください。  
+正常にSelf-hosted LiveSyncからアクセスすることができたら、お好みでバックグラウンドで起動するように編集して起動してください。  
+例）  
+```
+$ docker run -d --restart always -e COUCHDB_USER=admin -e COUCHDB_PASSWORD=password -v .local.ini:/opt/couchdb/etc/local.ini -p 5984:5984 couchdb
+```
+
+
+## モバイルからのアクセス
+MacやPCからアクセスする場合は上記の方法で作ったサーバーで問題ありませんが、モバイル端末からアクセスする場合は有効なSSLの証明書が必要となります。
+
+### モバイルからのアクセスのテスト
+テストを行う場合は、[localhost.run](http://localhost.run/)などのサービスが便利です。
+```
+$ ssh -R 80:localhost:5984 nokey@localhost.run
+Warning: Permanently added the RSA host key for IP address '35.171.254.69' to the list of known hosts.
+
+===============================================================================
+Welcome to localhost.run!
+
+Follow your favourite reverse tunnel at [https://twitter.com/localhost_run].
+
+**You need a SSH key to access this service.**
+If you get a permission denied follow Gitlab's most excellent howto:
+https://docs.gitlab.com/ee/ssh/
+*Only rsa and ed25519 keys are supported*
+
+To set up and manage custom domains go to https://admin.localhost.run/
+
+More details on custom domains (and how to enable subdomains of your custom
+domain) at https://localhost.run/docs/custom-domains
+
+To explore using localhost.run visit the documentation site:
+https://localhost.run/docs/
+
+===============================================================================
+
+
+** your connection id is xxxxxxxxxxxxxxxxxxxxxxxxxxxx, please mention it if you send me a message about an issue. **
+
+xxxxxxxx.localhost.run tunneled with tls termination, https://xxxxxxxx.localhost.run
+Connection to localhost.run closed by remote host.
+Connection to localhost.run closed.
+```
+このように表示された場合、`https://xxxxxxxx.localhost.run`が一時的なサーバアドレスとして使用できます。
+
+### ドメインを設定してアクセスする。
+
+DNSのAレコードを設定し、お好みの方法でリバースプロキシをホスティングしてください。  
+備考:トップディレクトリにCouchDBを露出させるのはおすすめしません。  
+Caddy等でLet's Encryptの証明書を自動取得すると運用が楽になります。
+
+CaddyとCouchDBを同時に立てられる[docker-composeの設定とiniファイル](https://github.com/vrtmrz/self-hosted-livesync-server)を公開しています。
+ぜひご利用下さい。
+
+なお、サーバのログは必ず確認し、不正なアクセスに注意してください。

esbuild.config.mjs

@@ -0,0 +1,37 @@
+import esbuild from "esbuild";
+import process from "process";
+import builtins from "builtin-modules";
+import sveltePlugin from "esbuild-svelte";
+import sveltePreprocess from "svelte-preprocess";
+
+const banner = `/*
+THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
+if you want to view the source, please visit the github repository of this plugin
+*/
+`;
+
+const prod = process.argv[2] === "production";
+
+esbuild
+    .build({
+        banner: {
+            js: banner,
+        },
+        entryPoints: ["src/main.ts"],
+        bundle: true,
+        external: ["obsidian", "electron", ...builtins],
+        format: "cjs",
+        watch: !prod,
+        target: "es2015",
+        logLevel: "info",
+        sourcemap: prod ? false : "inline",
+        treeShaking: true,
+        plugins: [
+            sveltePlugin({
+                preprocess: sveltePreprocess(),
+                compilerOptions: { css: true },
+            }),
+        ],
+        outfile: "main.js",
+    })
+    .catch(() => process.exit(1));

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "obsidian-livesync",
     "name": "Self-hosted LiveSync",
-    "version": "0.1.22",
+    "version": "0.7.0",
     "minAppVersion": "0.9.12",
     "description": "Community implementation of self-hosted livesync. Reflect your vault changes to some other devices immediately. Please make sure to disable other synchronize solutions to avoid content corruption or duplication.",
     "author": "vorotamoroz",

package.json

@@ -1,11 +1,13 @@
 {
     "name": "obsidian-livesync",
-    "version": "0.1.22",
+    "version": "0.7.0",
     "description": "Reflect your vault changes to some other devices immediately. Please make sure to disable other synchronize solutions to avoid content corruption or duplication.",
     "main": "main.js",
+    "type": "module",
     "scripts": {
-        "dev": "rollup --config rollup.config.js -w",
-        "build": "rollup --config rollup.config.js --environment BUILD:production"
+        "dev": "node esbuild.config.mjs",
+        "build": "node esbuild.config.mjs production",
+        "lint": "eslint src"
     },
     "keywords": [],
     "author": "vorotamoroz",
@@ -15,11 +17,21 @@
         "@rollup/plugin-node-resolve": "^11.2.1",
         "@rollup/plugin-typescript": "^8.2.1",
         "@types/diff-match-patch": "^1.0.32",
+        "@types/pouchdb": "^6.4.0",
         "@types/pouchdb-browser": "^6.1.3",
-        "obsidian": "^0.12.0",
+        "@typescript-eslint/eslint-plugin": "^5.7.0",
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^7.32.0",
+        "eslint-config-airbnb-base": "^14.2.1",
+        "eslint-plugin-import": "^2.25.2",
+        "obsidian": "^0.13.11",
         "rollup": "^2.32.1",
         "tslib": "^2.2.0",
-        "typescript": "^4.2.4"
+        "typescript": "^4.2.4",
+        "builtin-modules": "^3.2.0",
+        "esbuild": "0.13.12",
+        "esbuild-svelte": "^0.6.0",
+        "svelte-preprocess": "^4.10.2"
     },
     "dependencies": {
         "diff-match-patch": "^1.0.5",

rollup.config.js

@@ -11,7 +11,7 @@ if you want to view the source visit the plugins github repository
 `;
 
 export default {
-    input: "main.ts",
+    input: "./src/main.ts",
     output: {
         dir: ".",
         sourcemap: "inline",

src/ConflictResolveModal.ts

@@ -0,0 +1,81 @@
+import { App, Modal } from "obsidian";
+import { DIFF_DELETE, DIFF_EQUAL, DIFF_INSERT } from "diff-match-patch";
+import { diff_result } from "./types";
+import { escapeStringToHTML } from "./utils";
+
+export class ConflictResolveModal extends Modal {
+    // result: Array<[number, string]>;
+    result: diff_result;
+    callback: (remove_rev: string) => Promise<void>;
+
+    constructor(app: App, diff: diff_result, callback: (remove_rev: string) => Promise<void>) {
+        super(app);
+        this.result = diff;
+        this.callback = callback;
+    }
+
+    onOpen() {
+        const { contentEl } = this;
+
+        contentEl.empty();
+
+        contentEl.createEl("h2", { text: "This document has conflicted changes." });
+        const div = contentEl.createDiv("");
+        div.addClass("op-scrollable");
+        let diff = "";
+        for (const v of this.result.diff) {
+            const x1 = v[0];
+            const x2 = v[1];
+            if (x1 == DIFF_DELETE) {
+                diff += "<span class='deleted'>" + escapeStringToHTML(x2) + "</span>";
+            } else if (x1 == DIFF_EQUAL) {
+                diff += "<span class='normal'>" + escapeStringToHTML(x2) + "</span>";
+            } else if (x1 == DIFF_INSERT) {
+                diff += "<span class='added'>" + escapeStringToHTML(x2) + "</span>";
+            }
+        }
+
+        diff = diff.replace(/\n/g, "<br>");
+        div.innerHTML = diff;
+        const div2 = contentEl.createDiv("");
+        const date1 = new Date(this.result.left.mtime).toLocaleString();
+        const date2 = new Date(this.result.right.mtime).toLocaleString();
+        div2.innerHTML = `
+<span class='deleted'>A:${date1}</span><br /><span class='added'>B:${date2}</span><br> 
+        `;
+        contentEl.createEl("button", { text: "Keep A" }, (e) => {
+            e.addEventListener("click", async () => {
+                await this.callback(this.result.right.rev);
+                this.callback = null;
+                this.close();
+            });
+        });
+        contentEl.createEl("button", { text: "Keep B" }, (e) => {
+            e.addEventListener("click", async () => {
+                await this.callback(this.result.left.rev);
+                this.callback = null;
+                this.close();
+            });
+        });
+        contentEl.createEl("button", { text: "Concat both" }, (e) => {
+            e.addEventListener("click", async () => {
+                await this.callback("");
+                this.callback = null;
+                this.close();
+            });
+        });
+        contentEl.createEl("button", { text: "Not now" }, (e) => {
+            e.addEventListener("click", () => {
+                this.close();
+            });
+        });
+    }
+
+    onClose() {
+        const { contentEl } = this;
+        contentEl.empty();
+        if (this.callback != null) {
+            this.callback(null);
+        }
+    }
+}

src/DocumentHistoryModal.ts

@@ -0,0 +1,132 @@
+import { TFile, Modal, App } from "obsidian";
+import { path2id, escapeStringToHTML } from "./utils";
+import ObsidianLiveSyncPlugin from "./main";
+import { DIFF_DELETE, DIFF_EQUAL, DIFF_INSERT, diff_match_patch } from "diff-match-patch";
+
+export class DocumentHistoryModal extends Modal {
+    plugin: ObsidianLiveSyncPlugin;
+    range: HTMLInputElement;
+    contentView: HTMLDivElement;
+    info: HTMLDivElement;
+    fileInfo: HTMLDivElement;
+    showDiff = false;
+
+    file: string;
+
+    revs_info: PouchDB.Core.RevisionInfo[] = [];
+
+    constructor(app: App, plugin: ObsidianLiveSyncPlugin, file: TFile) {
+        super(app);
+        this.plugin = plugin;
+        this.file = file.path;
+        if (localStorage.getItem("ols-history-highlightdiff") == "1") {
+            this.showDiff = true;
+        }
+    }
+    async loadFile() {
+        const db = this.plugin.localDatabase;
+        const w = await db.localDatabase.get(path2id(this.file), { revs_info: true });
+        this.revs_info = w._revs_info.filter((e) => e.status == "available");
+        this.range.max = `${this.revs_info.length - 1}`;
+        this.range.value = this.range.max;
+        this.fileInfo.setText(`${this.file} / ${this.revs_info.length} revisions`);
+        await this.loadRevs();
+    }
+    async loadRevs() {
+        const db = this.plugin.localDatabase;
+        const index = this.revs_info.length - 1 - (this.range.value as any) / 1;
+        const rev = this.revs_info[index];
+        const w = await db.getDBEntry(path2id(this.file), { rev: rev.rev }, false, false);
+
+        if (w === false) {
+            this.info.innerHTML = "";
+            this.contentView.innerHTML = `Could not read this revision<br>(${rev.rev})`;
+        } else {
+            this.info.innerHTML = `Modified:${new Date(w.mtime).toLocaleString()}`;
+            let result = "";
+            if (this.showDiff) {
+                const prevRevIdx = this.revs_info.length - 1 - ((this.range.value as any) / 1 - 1);
+                if (prevRevIdx >= 0 && prevRevIdx < this.revs_info.length) {
+                    const oldRev = this.revs_info[prevRevIdx].rev;
+                    const w2 = await db.getDBEntry(path2id(this.file), { rev: oldRev }, false, false);
+                    if (w2 != false) {
+                        const dmp = new diff_match_patch();
+                        const diff = dmp.diff_main(w2.data, w.data);
+                        dmp.diff_cleanupSemantic(diff);
+                        for (const v of diff) {
+                            const x1 = v[0];
+                            const x2 = v[1];
+                            if (x1 == DIFF_DELETE) {
+                                result += "<span class='history-deleted'>" + escapeStringToHTML(x2) + "</span>";
+                            } else if (x1 == DIFF_EQUAL) {
+                                result += "<span class='history-normal'>" + escapeStringToHTML(x2) + "</span>";
+                            } else if (x1 == DIFF_INSERT) {
+                                result += "<span class='history-added'>" + escapeStringToHTML(x2) + "</span>";
+                            }
+                        }
+
+                        result = result.replace(/\n/g, "<br>");
+                    } else {
+                        result = escapeStringToHTML(w.data);
+                    }
+                } else {
+                    result = escapeStringToHTML(w.data);
+                }
+            } else {
+                result = escapeStringToHTML(w.data);
+            }
+            this.contentView.innerHTML = result;
+        }
+    }
+
+    onOpen() {
+        const { contentEl } = this;
+
+        contentEl.empty();
+        contentEl.createEl("h2", { text: "Document History" });
+        this.fileInfo = contentEl.createDiv("");
+        this.fileInfo.addClass("op-info");
+        const divView = contentEl.createDiv("");
+        divView.addClass("op-flex");
+
+        divView.createEl("input", { type: "range" }, (e) => {
+            this.range = e;
+            e.addEventListener("change", (e) => {
+                this.loadRevs();
+            });
+            e.addEventListener("input", (e) => {
+                this.loadRevs();
+            });
+        });
+        contentEl
+            .createDiv("", (e) => {
+                e.createEl("label", {}, (label) => {
+                    label.appendChild(
+                        createEl("input", { type: "checkbox" }, (checkbox) => {
+                            if (this.showDiff) {
+                                checkbox.checked = true;
+                            }
+                            checkbox.addEventListener("input", (evt: any) => {
+                                this.showDiff = checkbox.checked;
+                                localStorage.setItem("ols-history-highlightdiff", this.showDiff == true ? "1" : "");
+                                this.loadRevs();
+                            });
+                        })
+                    );
+                    label.appendText("Highlight diff");
+                });
+            })
+            .addClass("op-info");
+        this.info = contentEl.createDiv("");
+        this.info.addClass("op-info");
+        this.loadFile();
+        const div = contentEl.createDiv({ text: "Loading old revisions..." });
+        this.contentView = div;
+        div.addClass("op-scrollable");
+        div.addClass("op-pre");
+    }
+    onClose() {
+        const { contentEl } = this;
+        contentEl.empty();
+    }
+}

src/LogDisplayModal.ts

@@ -0,0 +1,37 @@
+import { App, Modal } from "obsidian";
+import { escapeStringToHTML } from "./utils";
+import ObsidianLiveSyncPlugin from "./main";
+
+export class LogDisplayModal extends Modal {
+    plugin: ObsidianLiveSyncPlugin;
+    logEl: HTMLDivElement;
+    constructor(app: App, plugin: ObsidianLiveSyncPlugin) {
+        super(app);
+        this.plugin = plugin;
+    }
+    updateLog() {
+        let msg = "";
+        for (const v of this.plugin.logMessage) {
+            msg += escapeStringToHTML(v) + "<br>";
+        }
+        this.logEl.innerHTML = msg;
+    }
+    onOpen() {
+        const { contentEl } = this;
+
+        contentEl.empty();
+        contentEl.createEl("h2", { text: "Sync Status" });
+        const div = contentEl.createDiv("");
+        div.addClass("op-scrollable");
+        div.addClass("op-pre");
+        this.logEl = div;
+        this.updateLog = this.updateLog.bind(this);
+        this.plugin.addLogHook = this.updateLog;
+        this.updateLog();
+    }
+    onClose() {
+        const { contentEl } = this;
+        contentEl.empty();
+        this.plugin.addLogHook = null;
+    }
+}

src/ObsidianLiveSyncSettingTab.ts

@@ -0,0 +1,937 @@
+import { App, Notice, PluginSettingTab, Setting, sanitizeHTMLToDom } from "obsidian";
+import { EntryDoc, LOG_LEVEL } from "./types";
+import { path2id, id2path, runWithLock } from "./utils";
+import { Logger } from "./logger";
+import { connectRemoteCouchDB } from "./utils_couchdb";
+import { testCrypt } from "./e2ee";
+import ObsidianLiveSyncPlugin from "./main";
+
+export class ObsidianLiveSyncSettingTab extends PluginSettingTab {
+    plugin: ObsidianLiveSyncPlugin;
+
+    constructor(app: App, plugin: ObsidianLiveSyncPlugin) {
+        super(app, plugin);
+        this.plugin = plugin;
+    }
+    async testConnection(): Promise<void> {
+        const db = await connectRemoteCouchDB(this.plugin.settings.couchDB_URI + (this.plugin.settings.couchDB_DBNAME == "" ? "" : "/" + this.plugin.settings.couchDB_DBNAME), {
+            username: this.plugin.settings.couchDB_USER,
+            password: this.plugin.settings.couchDB_PASSWORD,
+        });
+        if (typeof db === "string") {
+            this.plugin.addLog(`could not connect to ${this.plugin.settings.couchDB_URI} : ${this.plugin.settings.couchDB_DBNAME} \n(${db})`, LOG_LEVEL.NOTICE);
+            return;
+        }
+        this.plugin.addLog(`Connected to ${db.info.db_name}`, LOG_LEVEL.NOTICE);
+    }
+    display(): void {
+        const { containerEl } = this;
+
+        containerEl.empty();
+
+        containerEl.createEl("h2", { text: "Settings for Self-hosted LiveSync." });
+
+        const w = containerEl.createDiv("");
+        const screenElements: { [key: string]: HTMLElement[] } = {};
+        const addScreenElement = (key: string, element: HTMLElement) => {
+            if (!(key in screenElements)) {
+                screenElements[key] = [];
+            }
+            screenElements[key].push(element);
+        };
+        w.addClass("sls-setting-menu");
+        w.innerHTML = `
+<label class='sls-setting-label selected'><input type='radio' name='disp' value='0' class='sls-setting-tab' checked><div class='sls-setting-menu-btn'>🛰️</div></label>
+<label class='sls-setting-label'><input type='radio' name='disp' value='10' class='sls-setting-tab' ><div class='sls-setting-menu-btn'>📦</div></label>
+<label class='sls-setting-label'><input type='radio' name='disp' value='20' class='sls-setting-tab' ><div class='sls-setting-menu-btn'>⚙️</div></label>
+<label class='sls-setting-label'><input type='radio' name='disp' value='30' class='sls-setting-tab' ><div class='sls-setting-menu-btn'>🔁</div></label>
+<label class='sls-setting-label'><input type='radio' name='disp' value='40' class='sls-setting-tab' ><div class='sls-setting-menu-btn'>🔧</div></label>
+<label class='sls-setting-label'><input type='radio' name='disp' value='50' class='sls-setting-tab' ><div class='sls-setting-menu-btn'>🧰</div></label>
+<label class='sls-setting-label'><input type='radio' name='disp' value='60' class='sls-setting-tab' ><div class='sls-setting-menu-btn'>🔌</div></label>
+<label class='sls-setting-label'><input type='radio' name='disp' value='70' class='sls-setting-tab' ><div class='sls-setting-menu-btn'>🚑</div></label>
+        `;
+        const menutabs = w.querySelectorAll(".sls-setting-label");
+        const changeDisplay = (screen: string) => {
+            for (const k in screenElements) {
+                if (k == screen) {
+                    screenElements[k].forEach((element) => element.removeClass("setting-collapsed"));
+                } else {
+                    screenElements[k].forEach((element) => element.addClass("setting-collapsed"));
+                }
+            }
+        };
+        menutabs.forEach((element) => {
+            const e = element.querySelector(".sls-setting-tab");
+            if (!e) return;
+            e.addEventListener("change", (event) => {
+                menutabs.forEach((element) => element.removeClass("selected"));
+                changeDisplay((event.currentTarget as HTMLInputElement).value);
+                element.addClass("selected");
+            });
+        });
+
+        const containerRemoteDatabaseEl = containerEl.createDiv();
+        containerRemoteDatabaseEl.createEl("h3", { text: "Remote Database configuration" });
+        const syncWarn = containerRemoteDatabaseEl.createEl("div", { text: `These settings are kept locked while automatic synchronization options are enabled. Disable these options in the "Sync Settings" tab to unlock.` });
+        syncWarn.addClass("op-warn");
+        syncWarn.addClass("sls-hidden");
+
+        const isAnySyncEnabled = (): boolean => {
+            if (this.plugin.settings.liveSync) return true;
+            if (this.plugin.settings.periodicReplication) return true;
+            if (this.plugin.settings.syncOnFileOpen) return true;
+            if (this.plugin.settings.syncOnSave) return true;
+            if (this.plugin.settings.syncOnStart) return true;
+            if (this.plugin.localDatabase.syncStatus == "CONNECTED") return true;
+            if (this.plugin.localDatabase.syncStatus == "PAUSED") return true;
+            return false;
+        };
+        const applyDisplayEnabled = () => {
+            if (isAnySyncEnabled()) {
+                dbsettings.forEach((e) => {
+                    e.setDisabled(true).setTooltip("When any sync is enabled, It cound't be changed.");
+                });
+                syncWarn.removeClass("sls-hidden");
+            } else {
+                dbsettings.forEach((e) => {
+                    e.setDisabled(false).setTooltip("");
+                });
+                syncWarn.addClass("sls-hidden");
+            }
+            if (this.plugin.settings.liveSync) {
+                syncNonLive.forEach((e) => {
+                    e.setDisabled(true).setTooltip("");
+                });
+                syncLive.forEach((e) => {
+                    e.setDisabled(false).setTooltip("");
+                });
+            } else if (this.plugin.settings.syncOnFileOpen || this.plugin.settings.syncOnSave || this.plugin.settings.syncOnStart || this.plugin.settings.periodicReplication) {
+                syncNonLive.forEach((e) => {
+                    e.setDisabled(false).setTooltip("");
+                });
+                syncLive.forEach((e) => {
+                    e.setDisabled(true).setTooltip("");
+                });
+            } else {
+                syncNonLive.forEach((e) => {
+                    e.setDisabled(false).setTooltip("");
+                });
+                syncLive.forEach((e) => {
+                    e.setDisabled(false).setTooltip("");
+                });
+            }
+        };
+
+        const dbsettings: Setting[] = [];
+        dbsettings.push(
+            new Setting(containerRemoteDatabaseEl).setName("URI").addText((text) =>
+                text
+                    .setPlaceholder("https://........")
+                    .setValue(this.plugin.settings.couchDB_URI)
+                    .onChange(async (value) => {
+                        this.plugin.settings.couchDB_URI = value;
+                        await this.plugin.saveSettings();
+                    })
+            ),
+            new Setting(containerRemoteDatabaseEl)
+                .setName("Username")
+                .setDesc("username")
+                .addText((text) =>
+                    text
+                        .setPlaceholder("")
+                        .setValue(this.plugin.settings.couchDB_USER)
+                        .onChange(async (value) => {
+                            this.plugin.settings.couchDB_USER = value;
+                            await this.plugin.saveSettings();
+                        })
+                ),
+            new Setting(containerRemoteDatabaseEl)
+                .setName("Password")
+                .setDesc("password")
+                .addText((text) => {
+                    text.setPlaceholder("")
+                        .setValue(this.plugin.settings.couchDB_PASSWORD)
+                        .onChange(async (value) => {
+                            this.plugin.settings.couchDB_PASSWORD = value;
+                            await this.plugin.saveSettings();
+                        });
+                    text.inputEl.setAttribute("type", "password");
+                }),
+            new Setting(containerRemoteDatabaseEl).setName("Database name").addText((text) =>
+                text
+                    .setPlaceholder("")
+                    .setValue(this.plugin.settings.couchDB_DBNAME)
+                    .onChange(async (value) => {
+                        this.plugin.settings.couchDB_DBNAME = value;
+                        await this.plugin.saveSettings();
+                    })
+            )
+        );
+
+        new Setting(containerRemoteDatabaseEl)
+            .setName("Test Database Connection")
+            .setDesc("Open database connection. If the remote database is not found and you have the privilege to create a database, the database will be created.")
+            .addButton((button) =>
+                button
+                    .setButtonText("Test")
+                    .setDisabled(false)
+                    .onClick(async () => {
+                        await this.testConnection();
+                    })
+            );
+
+        addScreenElement("0", containerRemoteDatabaseEl);
+        const containerLocalDatabaseEl = containerEl.createDiv();
+        containerLocalDatabaseEl.createEl("h3", { text: "Local Database configuration" });
+
+        new Setting(containerLocalDatabaseEl)
+            .setName("Batch database update")
+            .setDesc("Delay all changes, save once before replication or opening another file.")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.batchSave).onChange(async (value) => {
+                    if (value && this.plugin.settings.liveSync) {
+                        Logger("LiveSync and Batch database update cannot be used at the same time.", LOG_LEVEL.NOTICE);
+                        toggle.setValue(false);
+                        return;
+                    }
+                    this.plugin.settings.batchSave = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+
+        new Setting(containerLocalDatabaseEl)
+            .setName("Auto Garbage Collection delay")
+            .setDesc("(seconds), if you set zero, you have to run manually.")
+            .addText((text) => {
+                text.setPlaceholder("")
+                    .setValue(this.plugin.settings.gcDelay + "")
+                    .onChange(async (value) => {
+                        let v = Number(value);
+                        if (isNaN(v) || v > 5000) {
+                            v = 0;
+                        }
+                        this.plugin.settings.gcDelay = v;
+                        await this.plugin.saveSettings();
+                    });
+                text.inputEl.setAttribute("type", "number");
+            });
+        new Setting(containerLocalDatabaseEl).setName("Manual Garbage Collect").addButton((button) =>
+            button
+                .setButtonText("Collect now")
+                .setDisabled(false)
+                .onClick(async () => {
+                    await this.plugin.garbageCollect();
+                })
+        );
+        new Setting(containerLocalDatabaseEl)
+            .setName("End to End Encryption")
+            .setDesc("Encrypting contents on the database.")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.workingEncrypt).onChange(async (value) => {
+                    this.plugin.settings.workingEncrypt = value;
+                    phasspharase.setDisabled(!value);
+                    await this.plugin.saveSettings();
+                })
+            );
+        const phasspharase = new Setting(containerLocalDatabaseEl)
+            .setName("Passphrase")
+            .setDesc("Encrypting passphrase")
+            .addText((text) => {
+                text.setPlaceholder("")
+                    .setValue(this.plugin.settings.workingPassphrase)
+                    .onChange(async (value) => {
+                        this.plugin.settings.workingPassphrase = value;
+                        await this.plugin.saveSettings();
+                    });
+                text.inputEl.setAttribute("type", "password");
+            });
+        phasspharase.setDisabled(!this.plugin.settings.workingEncrypt);
+        containerLocalDatabaseEl.createEl("div", {
+            text: "When you change any encryption enabled or passphrase, you have to reset all databases to make sure that the last password is unused and erase encrypted data from anywhere. This operation will not lost your vault if you are fully synced.",
+        });
+        const applyEncryption = async (sendToServer: boolean) => {
+            if (this.plugin.settings.workingEncrypt && this.plugin.settings.workingPassphrase == "") {
+                Logger("If you enable encryption, you have to set the passphrase", LOG_LEVEL.NOTICE);
+                return;
+            }
+            if (this.plugin.settings.workingEncrypt && !(await testCrypt())) {
+                Logger("WARNING! Your device would not support encryption.", LOG_LEVEL.NOTICE);
+                return;
+            }
+            if (!this.plugin.settings.workingEncrypt) {
+                this.plugin.settings.workingPassphrase = "";
+            }
+            this.plugin.settings.liveSync = false;
+            this.plugin.settings.periodicReplication = false;
+            this.plugin.settings.syncOnSave = false;
+            this.plugin.settings.syncOnStart = false;
+            this.plugin.settings.syncOnFileOpen = false;
+            this.plugin.settings.encrypt = this.plugin.settings.workingEncrypt;
+            this.plugin.settings.passphrase = this.plugin.settings.workingPassphrase;
+
+            await this.plugin.saveSettings();
+            await this.plugin.resetLocalDatabase();
+            if (sendToServer) {
+                await this.plugin.initializeDatabase(true);
+                await this.plugin.markRemoteLocked();
+                await this.plugin.tryResetRemoteDatabase();
+                await this.plugin.markRemoteLocked();
+                await this.plugin.replicateAllToServer(true);
+            } else {
+                await this.plugin.markRemoteResolved();
+                await this.plugin.replicate(true);
+            }
+        };
+        new Setting(containerLocalDatabaseEl)
+            .setName("Apply")
+            .setDesc("apply encryption settinngs, and re-initialize database")
+            .addButton((button) =>
+                button
+                    .setButtonText("Apply and send")
+                    .setWarning()
+                    .setDisabled(false)
+                    .setClass("sls-btn-left")
+                    .onClick(async () => {
+                        await applyEncryption(true);
+                    })
+            )
+            .addButton((button) =>
+                button
+                    .setButtonText("Apply and receive")
+                    .setWarning()
+                    .setDisabled(false)
+                    .setClass("sls-btn-right")
+                    .onClick(async () => {
+                        await applyEncryption(false);
+                    })
+            );
+
+        containerLocalDatabaseEl.createEl("div", {
+            text: sanitizeHTMLToDom(`Advanced settings<br>
+                Configuration of how LiveSync makes chunks from the file.`),
+        });
+        new Setting(containerLocalDatabaseEl)
+            .setName("Minimum chunk size")
+            .setDesc("(letters), minimum chunk size.")
+            .addText((text) => {
+                text.setPlaceholder("")
+                    .setValue(this.plugin.settings.minimumChunkSize + "")
+                    .onChange(async (value) => {
+                        let v = Number(value);
+                        if (isNaN(v) || v < 10 || v > 1000) {
+                            v = 10;
+                        }
+                        this.plugin.settings.minimumChunkSize = v;
+                        await this.plugin.saveSettings();
+                    });
+                text.inputEl.setAttribute("type", "number");
+            });
+
+        new Setting(containerLocalDatabaseEl)
+            .setName("LongLine Threshold")
+            .setDesc("(letters), If the line is longer than this, make the line to chunk")
+            .addText((text) => {
+                text.setPlaceholder("")
+                    .setValue(this.plugin.settings.longLineThreshold + "")
+                    .onChange(async (value) => {
+                        let v = Number(value);
+                        if (isNaN(v) || v < 10 || v > 1000) {
+                            v = 10;
+                        }
+                        this.plugin.settings.longLineThreshold = v;
+                        await this.plugin.saveSettings();
+                    });
+                text.inputEl.setAttribute("type", "number");
+            });
+
+        addScreenElement("10", containerLocalDatabaseEl);
+        const containerGeneralSettingsEl = containerEl.createDiv();
+        containerGeneralSettingsEl.createEl("h3", { text: "General Settings" });
+
+        new Setting(containerGeneralSettingsEl)
+            .setName("Do not show low-priority Log")
+            .setDesc("Reduce log infomations")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.lessInformationInLog).onChange(async (value) => {
+                    this.plugin.settings.lessInformationInLog = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+        new Setting(containerGeneralSettingsEl)
+            .setName("Verbose Log")
+            .setDesc("Show verbose log ")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.showVerboseLog).onChange(async (value) => {
+                    this.plugin.settings.showVerboseLog = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+
+        addScreenElement("20", containerGeneralSettingsEl);
+        const containerSyncSettingEl = containerEl.createDiv();
+        containerSyncSettingEl.createEl("h3", { text: "Sync setting" });
+
+        if (this.plugin.settings.versionUpFlash != "") {
+            const c = containerSyncSettingEl.createEl("div", { text: this.plugin.settings.versionUpFlash });
+            c.createEl("button", { text: "I got it and updated." }, (e) => {
+                e.addClass("mod-cta");
+                e.addEventListener("click", async () => {
+                    this.plugin.settings.versionUpFlash = "";
+                    await this.plugin.saveSettings();
+                    applyDisplayEnabled();
+                    c.remove();
+                });
+            });
+            c.addClass("op-warn");
+        }
+
+        const syncLive: Setting[] = [];
+        const syncNonLive: Setting[] = [];
+        syncLive.push(
+            new Setting(containerSyncSettingEl)
+                .setName("LiveSync")
+                .setDesc("Sync realtime")
+                .addToggle((toggle) =>
+                    toggle.setValue(this.plugin.settings.liveSync).onChange(async (value) => {
+                        if (value && this.plugin.settings.batchSave) {
+                            Logger("LiveSync and Batch database update cannot be used at the same time.", LOG_LEVEL.NOTICE);
+                            toggle.setValue(false);
+                            return;
+                        }
+
+                        this.plugin.settings.liveSync = value;
+                        // ps.setDisabled(value);
+                        await this.plugin.saveSettings();
+                        applyDisplayEnabled();
+                        await this.plugin.realizeSettingSyncMode();
+                    })
+                )
+        );
+
+        syncNonLive.push(
+            new Setting(containerSyncSettingEl)
+                .setName("Periodic Sync")
+                .setDesc("Sync periodically")
+                .addToggle((toggle) =>
+                    toggle.setValue(this.plugin.settings.periodicReplication).onChange(async (value) => {
+                        this.plugin.settings.periodicReplication = value;
+                        await this.plugin.saveSettings();
+                        applyDisplayEnabled();
+                    })
+                ),
+            new Setting(containerSyncSettingEl)
+                .setName("Periodic sync intreval")
+                .setDesc("Interval (sec)")
+                .addText((text) => {
+                    text.setPlaceholder("")
+                        .setValue(this.plugin.settings.periodicReplicationInterval + "")
+                        .onChange(async (value) => {
+                            let v = Number(value);
+                            if (isNaN(v) || v > 5000) {
+                                v = 0;
+                            }
+                            this.plugin.settings.periodicReplicationInterval = v;
+                            await this.plugin.saveSettings();
+                            applyDisplayEnabled();
+                        });
+                    text.inputEl.setAttribute("type", "number");
+                }),
+
+            new Setting(containerSyncSettingEl)
+                .setName("Sync on Save")
+                .setDesc("When you save file, sync automatically")
+                .addToggle((toggle) =>
+                    toggle.setValue(this.plugin.settings.syncOnSave).onChange(async (value) => {
+                        this.plugin.settings.syncOnSave = value;
+                        await this.plugin.saveSettings();
+                        applyDisplayEnabled();
+                    })
+                ),
+            new Setting(containerSyncSettingEl)
+                .setName("Sync on File Open")
+                .setDesc("When you open file, sync automatically")
+                .addToggle((toggle) =>
+                    toggle.setValue(this.plugin.settings.syncOnFileOpen).onChange(async (value) => {
+                        this.plugin.settings.syncOnFileOpen = value;
+                        await this.plugin.saveSettings();
+                        applyDisplayEnabled();
+                    })
+                ),
+            new Setting(containerSyncSettingEl)
+                .setName("Sync on Start")
+                .setDesc("Start synchronization on Obsidian started.")
+                .addToggle((toggle) =>
+                    toggle.setValue(this.plugin.settings.syncOnStart).onChange(async (value) => {
+                        this.plugin.settings.syncOnStart = value;
+                        await this.plugin.saveSettings();
+                        applyDisplayEnabled();
+                    })
+                )
+        );
+
+        new Setting(containerSyncSettingEl)
+            .setName("Use Trash for deleted files")
+            .setDesc("Do not delete files that deleted in remote, just move to trash.")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.trashInsteadDelete).onChange(async (value) => {
+                    this.plugin.settings.trashInsteadDelete = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+
+        new Setting(containerSyncSettingEl)
+            .setName("Do not delete empty folder")
+            .setDesc("Normally, folder is deleted When the folder became empty by replication. enable this, leave it as is")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.doNotDeleteFolder).onChange(async (value) => {
+                    this.plugin.settings.doNotDeleteFolder = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+
+        new Setting(containerSyncSettingEl)
+            .setName("Use newer file if conflicted (beta)")
+            .setDesc("Resolve conflicts by newer files automatically.")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.resolveConflictsByNewerFile).onChange(async (value) => {
+                    this.plugin.settings.resolveConflictsByNewerFile = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+
+        containerSyncSettingEl.createEl("div", {
+            text: sanitizeHTMLToDom(`Advanced settings<br>
+            If you reached the payload size limit when using IBM Cloudant, please set batch size and batch limit to a lower value.`),
+        });
+        new Setting(containerSyncSettingEl)
+            .setName("Batch size")
+            .setDesc("Number of change feed items to process at a time. Defaults to 250.")
+            .addText((text) => {
+                text.setPlaceholder("")
+                    .setValue(this.plugin.settings.batch_size + "")
+                    .onChange(async (value) => {
+                        let v = Number(value);
+                        if (isNaN(v) || v < 10) {
+                            v = 10;
+                        }
+                        this.plugin.settings.batch_size = v;
+                        await this.plugin.saveSettings();
+                    });
+                text.inputEl.setAttribute("type", "number");
+            });
+
+        new Setting(containerSyncSettingEl)
+            .setName("Batch limit")
+            .setDesc("Number of batches to process at a time. Defaults to 40. This along with batch size controls how many docs are kept in memory at a time.")
+            .addText((text) => {
+                text.setPlaceholder("")
+                    .setValue(this.plugin.settings.batches_limit + "")
+                    .onChange(async (value) => {
+                        let v = Number(value);
+                        if (isNaN(v) || v < 10) {
+                            v = 10;
+                        }
+                        this.plugin.settings.batches_limit = v;
+                        await this.plugin.saveSettings();
+                    });
+                text.inputEl.setAttribute("type", "number");
+            });
+
+        addScreenElement("30", containerSyncSettingEl);
+        const containerMiscellaneousEl = containerEl.createDiv();
+        containerMiscellaneousEl.createEl("h3", { text: "Miscellaneous" });
+        new Setting(containerMiscellaneousEl)
+            .setName("Show status inside editor")
+            .setDesc("")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.showStatusOnEditor).onChange(async (value) => {
+                    this.plugin.settings.showStatusOnEditor = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+        new Setting(containerMiscellaneousEl)
+            .setName("Check integrity on saving")
+            .setDesc("Check database integrity on saving to database")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.checkIntegrityOnSave).onChange(async (value) => {
+                    this.plugin.settings.checkIntegrityOnSave = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+        let currentPrest = "NONE";
+        new Setting(containerMiscellaneousEl)
+            .setName("Presets")
+            .setDesc("Apply preset configuration")
+            .addDropdown((dropdown) =>
+                dropdown
+                    .addOptions({ NONE: "", LIVESYNC: "LiveSync", PERIODIC: "Periodic w/ batch", DISABLE: "Disable all sync" })
+                    .setValue(currentPrest)
+                    .onChange((value) => (currentPrest = value))
+            )
+            .addButton((button) =>
+                button
+                    .setButtonText("Apply")
+                    .setDisabled(false)
+                    .setCta()
+                    .onClick(async () => {
+                        if (currentPrest == "") {
+                            Logger("Select any preset.", LOG_LEVEL.NOTICE);
+                            return;
+                        }
+                        this.plugin.settings.batchSave = false;
+                        this.plugin.settings.liveSync = false;
+                        this.plugin.settings.periodicReplication = false;
+                        this.plugin.settings.syncOnSave = false;
+                        this.plugin.settings.syncOnStart = false;
+                        this.plugin.settings.syncOnFileOpen = false;
+                        if (currentPrest == "LIVESYNC") {
+                            this.plugin.settings.liveSync = true;
+                            Logger("Synchronization setting configured as LiveSync.", LOG_LEVEL.NOTICE);
+                        } else if (currentPrest == "PERIODIC") {
+                            this.plugin.settings.batchSave = true;
+                            this.plugin.settings.periodicReplication = true;
+                            this.plugin.settings.syncOnSave = false;
+                            this.plugin.settings.syncOnStart = true;
+                            this.plugin.settings.syncOnFileOpen = true;
+                            Logger("Synchronization setting configured as Periodic sync with batch database update.", LOG_LEVEL.NOTICE);
+                        } else {
+                            Logger("All synchronization disabled.", LOG_LEVEL.NOTICE);
+                        }
+                        this.plugin.saveSettings();
+                        await this.plugin.realizeSettingSyncMode();
+                    })
+            );
+
+        new Setting(containerMiscellaneousEl)
+            .setName("Use history (beta)")
+            .setDesc("Use history dialog (Restart required, auto compaction would be disabled, and more storage will be consumed)")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.useHistory).onChange(async (value) => {
+                    this.plugin.settings.useHistory = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+        addScreenElement("40", containerMiscellaneousEl);
+
+        const containerHatchEl = containerEl.createDiv();
+
+        containerHatchEl.createEl("h3", { text: "Hatch" });
+
+        if (this.plugin.localDatabase.remoteLockedAndDeviceNotAccepted) {
+            const c = containerHatchEl.createEl("div", {
+                text: "To prevent unwanted vault corruption, the remote database has been locked for synchronization, and this device was not marked as 'resolved'. it caused by some operations like this. re-initialized. Local database initialization should be required. please back your vault up, reset local database, and press 'Mark this device as resolved'. ",
+            });
+            c.createEl("button", { text: "I'm ready, mark this device 'resolved'" }, (e) => {
+                e.addClass("mod-warning");
+                e.addEventListener("click", async () => {
+                    await this.plugin.markRemoteResolved();
+                    c.remove();
+                });
+            });
+            c.addClass("op-warn");
+        } else {
+            if (this.plugin.localDatabase.remoteLocked) {
+                const c = containerHatchEl.createEl("div", {
+                    text: "To prevent unwanted vault corruption, the remote database has been locked for synchronization. (This device is marked 'resolved') When all your devices are marked 'resolved', unlock the database.",
+                });
+                c.createEl("button", { text: "I'm ready, unlock the database" }, (e) => {
+                    e.addClass("mod-warning");
+                    e.addEventListener("click", async () => {
+                        await this.plugin.markRemoteUnlocked();
+                        c.remove();
+                    });
+                });
+                c.addClass("op-warn");
+            }
+        }
+        const hatchWarn = containerHatchEl.createEl("div", { text: `To stop the bootup sequence for fixing problems on databases, you can put redflag.md on top of your vault (Rebooting obsidian is required).` });
+        hatchWarn.addClass("op-warn");
+        const dropHistory = async (sendToServer: boolean) => {
+            this.plugin.settings.liveSync = false;
+            this.plugin.settings.periodicReplication = false;
+            this.plugin.settings.syncOnSave = false;
+            this.plugin.settings.syncOnStart = false;
+            this.plugin.settings.syncOnFileOpen = false;
+
+            await this.plugin.saveSettings();
+            applyDisplayEnabled();
+            await this.plugin.resetLocalDatabase();
+            if (sendToServer) {
+                await this.plugin.initializeDatabase(true);
+                await this.plugin.markRemoteLocked();
+                await this.plugin.tryResetRemoteDatabase();
+                await this.plugin.markRemoteLocked();
+                await this.plugin.replicateAllToServer(true);
+            } else {
+                await this.plugin.markRemoteResolved();
+                await this.plugin.replicate(true);
+            }
+        };
+        new Setting(containerHatchEl)
+            .setName("Verify and repair all files")
+            .setDesc("Verify and repair all files and update database without dropping history")
+            .addButton((button) =>
+                button
+                    .setButtonText("Verify and repair")
+                    .setDisabled(false)
+                    .setWarning()
+                    .onClick(async () => {
+                        const files = this.app.vault.getFiles();
+                        Logger("Verify and repair all files started", LOG_LEVEL.NOTICE);
+                        const notice = new Notice("", 0);
+                        let i = 0;
+                        for (const file of files) {
+                            i++;
+                            Logger(`Update into ${file.path}`);
+                            notice.setMessage(`${i}/${files.length}\n${file.path}`);
+                            try {
+                                await this.plugin.updateIntoDB(file);
+                            } catch (ex) {
+                                Logger("could not update:");
+                                Logger(ex);
+                            }
+                        }
+                        notice.hide();
+                        Logger("done", LOG_LEVEL.NOTICE);
+                    })
+            );
+        new Setting(containerHatchEl)
+            .setName("Sanity check")
+            .setDesc("Verify")
+            .addButton((button) =>
+                button
+                    .setButtonText("Sanity check")
+                    .setDisabled(false)
+                    .setWarning()
+                    .onClick(async () => {
+                        const notice = new Notice("", 0);
+                        Logger(`Begin sanity check`, LOG_LEVEL.INFO);
+                        notice.setMessage(`Begin sanity check`);
+                        await runWithLock("sancheck", true, async () => {
+                            const db = this.plugin.localDatabase.localDatabase;
+                            const wf = await db.allDocs();
+                            const filesDatabase = wf.rows.filter((e) => !e.id.startsWith("h:") && !e.id.startsWith("ps:") && e.id != "obsydian_livesync_version").map((e) => e.id);
+                            let count = 0;
+                            for (const id of filesDatabase) {
+                                count++;
+                                notice.setMessage(`${count}/${filesDatabase.length}\n${id2path(id)}`);
+                                const w = await db.get<EntryDoc>(id);
+                                if (!(await this.plugin.localDatabase.sanCheck(w))) {
+                                    Logger(`The file ${id2path(id)} missing child(ren)`, LOG_LEVEL.NOTICE);
+                                }
+                            }
+                        });
+                        notice.hide();
+                        Logger(`Done`, LOG_LEVEL.NOTICE);
+                        // Logger("done", LOG_LEVEL.NOTICE);
+                    })
+            );
+
+        new Setting(containerHatchEl)
+            .setName("Drop History")
+            .setDesc("Initialize local and remote database, and send all or retrieve all again.")
+            .addButton((button) =>
+                button
+                    .setButtonText("Drop and send")
+                    .setWarning()
+                    .setDisabled(false)
+                    .setClass("sls-btn-left")
+                    .onClick(async () => {
+                        await dropHistory(true);
+                    })
+            )
+            .addButton((button) =>
+                button
+                    .setButtonText("Drop and receive")
+                    .setWarning()
+                    .setDisabled(false)
+                    .setClass("sls-btn-right")
+                    .onClick(async () => {
+                        await dropHistory(false);
+                    })
+            );
+
+        new Setting(containerHatchEl)
+            .setName("Lock remote database")
+            .setDesc("Lock remote database for synchronize")
+            .addButton((button) =>
+                button
+                    .setButtonText("Lock")
+                    .setDisabled(false)
+                    .setWarning()
+                    .onClick(async () => {
+                        await this.plugin.markRemoteLocked();
+                    })
+            );
+
+        new Setting(containerHatchEl)
+            .setName("Suspend file watching")
+            .setDesc("if enables it, all file operations are ignored.")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.suspendFileWatching).onChange(async (value) => {
+                    this.plugin.settings.suspendFileWatching = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+
+        containerHatchEl.createEl("div", {
+            text: sanitizeHTMLToDom(`Advanced buttons<br>
+                These buttons could break your database easily.`),
+        });
+        new Setting(containerHatchEl)
+            .setName("Reset remote database")
+            .setDesc("Reset remote database, this affects only database. If you replicate again, remote database will restored by local database.")
+            .addButton((button) =>
+                button
+                    .setButtonText("Reset")
+                    .setDisabled(false)
+                    .setWarning()
+                    .onClick(async () => {
+                        await this.plugin.tryResetRemoteDatabase();
+                    })
+            );
+        new Setting(containerHatchEl)
+            .setName("Reset local database")
+            .setDesc("Reset local database, this affects only database. If you replicate again, local database will restored by remote database.")
+            .addButton((button) =>
+                button
+                    .setButtonText("Reset")
+                    .setDisabled(false)
+                    .setWarning()
+                    .onClick(async () => {
+                        await this.plugin.resetLocalDatabase();
+                    })
+            );
+        new Setting(containerHatchEl)
+            .setName("Initialize local database again")
+            .setDesc("WARNING: Reset local database and reconstruct by storage data. It affects local database, but if you replicate remote as is, remote data will be merged or corrupted.")
+            .addButton((button) =>
+                button
+                    .setButtonText("INITIALIZE")
+                    .setWarning()
+                    .setDisabled(false)
+                    .onClick(async () => {
+                        await this.plugin.resetLocalDatabase();
+                        await this.plugin.initializeDatabase();
+                    })
+            );
+
+        addScreenElement("50", containerHatchEl);
+        // With great respect, thank you TfTHacker!
+        // refered: https://github.com/TfTHacker/obsidian42-brat/blob/main/src/features/BetaPlugins.ts
+        const containerPluginSettings = containerEl.createDiv();
+        containerPluginSettings.createEl("h3", { text: "Plugins and settings (beta)" });
+
+        const updateDisabledOfDeviceAndVaultName = () => {
+            vaultName.setDisabled(this.plugin.settings.autoSweepPlugins || this.plugin.settings.autoSweepPluginsPeriodic);
+            vaultName.setTooltip(this.plugin.settings.autoSweepPlugins || this.plugin.settings.autoSweepPluginsPeriodic ? "You could not change when you enabling auto sweep." : "");
+        };
+        new Setting(containerPluginSettings).setName("Enable plugin synchronization").addToggle((toggle) =>
+            toggle.setValue(this.plugin.settings.usePluginSync).onChange(async (value) => {
+                this.plugin.settings.usePluginSync = value;
+                await this.plugin.saveSettings();
+            })
+        );
+        new Setting(containerPluginSettings).setName("Show own plugins and settings").addToggle((toggle) =>
+            toggle.setValue(this.plugin.settings.showOwnPlugins).onChange(async (value) => {
+                this.plugin.settings.showOwnPlugins = value;
+                await this.plugin.saveSettings();
+            })
+        );
+
+        new Setting(containerPluginSettings)
+            .setName("Sweep plugins automatically")
+            .setDesc("Sweep plugins before replicating.")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.autoSweepPlugins).onChange(async (value) => {
+                    this.plugin.settings.autoSweepPlugins = value;
+                    updateDisabledOfDeviceAndVaultName();
+                    await this.plugin.saveSettings();
+                })
+            );
+
+        new Setting(containerPluginSettings)
+            .setName("Sweep plugins periodically")
+            .setDesc("Sweep plugins each 1 minutes.")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.autoSweepPluginsPeriodic).onChange(async (value) => {
+                    this.plugin.settings.autoSweepPluginsPeriodic = value;
+                    updateDisabledOfDeviceAndVaultName();
+                    await this.plugin.saveSettings();
+                })
+            );
+
+        new Setting(containerPluginSettings)
+            .setName("Notify updates")
+            .setDesc("Notify when any device has a newer plugin or its setting.")
+            .addToggle((toggle) =>
+                toggle.setValue(this.plugin.settings.notifyPluginOrSettingUpdated).onChange(async (value) => {
+                    this.plugin.settings.notifyPluginOrSettingUpdated = value;
+                    await this.plugin.saveSettings();
+                })
+            );
+        const vaultName = new Setting(containerPluginSettings)
+            .setName("Device and Vault name")
+            .setDesc("")
+            .addText((text) => {
+                text.setPlaceholder("desktop-main")
+                    .setValue(this.plugin.settings.deviceAndVaultName)
+                    .onChange(async (value) => {
+                        this.plugin.settings.deviceAndVaultName = value;
+                        await this.plugin.saveSettings();
+                    });
+                // text.inputEl.setAttribute("type", "password");
+            });
+        new Setting(containerPluginSettings)
+            .setName("Open")
+            .setDesc("Open the plugin dialog")
+            .addButton((button) => {
+                button
+                    .setButtonText("Open")
+                    .setDisabled(false)
+                    .onClick(() => {
+                        this.plugin.showPluginSyncModal();
+                    });
+            });
+
+        updateDisabledOfDeviceAndVaultName();
+
+        addScreenElement("60", containerPluginSettings);
+
+        const containerCorruptedDataEl = containerEl.createDiv();
+
+        containerCorruptedDataEl.createEl("h3", { text: "Corrupted data" });
+
+        if (Object.keys(this.plugin.localDatabase.corruptedEntries).length > 0) {
+            const cx = containerCorruptedDataEl.createEl("div", { text: "If you have copy of these items on any device, simply edit once or twice. Or not, delete this. sorry.." });
+            for (const k in this.plugin.localDatabase.corruptedEntries) {
+                const xx = cx.createEl("div", { text: `${k}` });
+
+                const ba = xx.createEl("button", { text: `Delete this` }, (e) => {
+                    e.addEventListener("click", async () => {
+                        await this.plugin.localDatabase.deleteDBEntry(k);
+                        xx.remove();
+                    });
+                });
+                ba.addClass("mod-warning");
+                xx.createEl("button", { text: `Restore from file` }, (e) => {
+                    e.addEventListener("click", async () => {
+                        const f = await this.app.vault.getFiles().filter((e) => path2id(e.path) == k);
+                        if (f.length == 0) {
+                            Logger("Not found in vault", LOG_LEVEL.NOTICE);
+                            return;
+                        }
+                        await this.plugin.updateIntoDB(f[0]);
+                        xx.remove();
+                    });
+                });
+                xx.addClass("mod-warning");
+            }
+        } else {
+            containerCorruptedDataEl.createEl("div", { text: "There is no corrupted data." });
+        }
+        applyDisplayEnabled();
+        addScreenElement("70", containerCorruptedDataEl);
+        changeDisplay("0");
+    }
+}

src/PluginPane.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+    import ObsidianLiveSyncPlugin from "./main";
+    import { onMount } from "svelte";
+    import { DevicePluginList, PluginDataEntry } from "./types";
+    import { versionNumberString2Number } from "./utils";
+
+    type JudgeResult = "" | "NEWER" | "EVEN" | "EVEN_BUT_DIFFERENT" | "OLDER" | "REMOTE_ONLY";
+
+    interface PluginDataEntryDisp extends PluginDataEntry {
+        versionInfo: string;
+        mtimeInfo: string;
+        mtimeFlag: JudgeResult;
+        versionFlag: JudgeResult;
+    }
+
+    export let plugin: ObsidianLiveSyncPlugin;
+    let plugins: PluginDataEntry[] = [];
+    let deviceAndPlugins: { [key: string]: PluginDataEntryDisp[] } = {};
+    let devicePluginList: [string, PluginDataEntryDisp[]][] = [];
+    let ownPlugins: DevicePluginList = null;
+    let showOwnPlugins = false;
+    let targetList: { [key: string]: boolean } = {};
+
+    function saveTargetList() {
+        window.localStorage.setItem("ols-plugin-targetlist", JSON.stringify(targetList));
+    }
+
+    function loadTargetList() {
+        let e = window.localStorage.getItem("ols-plugin-targetlist") || "{}";
+        try {
+            targetList = JSON.parse(e);
+        } catch (_) {
+            // NO OP.
+        }
+    }
+
+    function clearSelection() {
+        targetList = {};
+    }
+
+    async function updateList() {
+        let x = await plugin.getPluginList();
+        ownPlugins = x.thisDevicePlugins;
+        plugins = Object.values(x.allPlugins);
+        let targetListItems = Array.from(new Set(plugins.map((e) => e.deviceVaultName + "---" + e.manifest.id)));
+        let newTargetList: { [key: string]: boolean } = {};
+        for (const id of targetListItems) {
+            for (const tag of ["---plugin", "---setting"]) {
+                newTargetList[id + tag] = id + tag in targetList && targetList[id + tag];
+            }
+        }
+        targetList = newTargetList;
+        saveTargetList();
+    }
+
+    $: {
+        deviceAndPlugins = {};
+        for (const p of plugins) {
+            if (p.deviceVaultName == plugin.settings.deviceAndVaultName && !showOwnPlugins) {
+                continue;
+            }
+            if (!(p.deviceVaultName in deviceAndPlugins)) {
+                deviceAndPlugins[p.deviceVaultName] = [];
+            }
+            let dispInfo: PluginDataEntryDisp = { ...p, versionInfo: "", mtimeInfo: "", versionFlag: "", mtimeFlag: "" };
+            dispInfo.versionInfo = p.manifest.version;
+            let x = new Date().getTime() / 1000;
+            let mtime = p.mtime / 1000;
+            let diff = (x - mtime) / 60;
+            if (p.mtime == 0) {
+                dispInfo.mtimeInfo = `-`;
+            } else if (diff < 60) {
+                dispInfo.mtimeInfo = `${diff | 0} Mins ago`;
+            } else if (diff < 60 * 24) {
+                dispInfo.mtimeInfo = `${(diff / 60) | 0} Hours ago`;
+            } else if (diff < 60 * 24 * 10) {
+                dispInfo.mtimeInfo = `${(diff / (60 * 24)) | 0} Days ago`;
+            } else {
+                dispInfo.mtimeInfo = new Date(dispInfo.mtime).toLocaleString();
+            }
+            // compare with own plugin
+            let id = p.manifest.id;
+
+            if (id in ownPlugins) {
+                // Which we have.
+                const ownPlugin = ownPlugins[id];
+                let localVer = versionNumberString2Number(ownPlugin.manifest.version);
+                let pluginVer = versionNumberString2Number(p.manifest.version);
+                if (localVer > pluginVer) {
+                    dispInfo.versionFlag = "OLDER";
+                } else if (localVer == pluginVer) {
+                    if (ownPlugin.manifestJson + (ownPlugin.styleCss ?? "") + ownPlugin.mainJs != p.manifestJson + (p.styleCss ?? "") + p.mainJs) {
+                        dispInfo.versionFlag = "EVEN_BUT_DIFFERENT";
+                    } else {
+                        dispInfo.versionFlag = "EVEN";
+                    }
+                } else if (localVer < pluginVer) {
+                    dispInfo.versionFlag = "NEWER";
+                }
+                if ((ownPlugin.dataJson ?? "") == (p.dataJson ?? "")) {
+                    if (ownPlugin.mtime == 0 && p.mtime == 0) {
+                        dispInfo.mtimeFlag = "";
+                    } else {
+                        dispInfo.mtimeFlag = "EVEN";
+                    }
+                } else {
+                    if (((ownPlugin.mtime / 1000) | 0) > ((p.mtime / 1000) | 0)) {
+                        dispInfo.mtimeFlag = "OLDER";
+                    } else if (((ownPlugin.mtime / 1000) | 0) == ((p.mtime / 1000) | 0)) {
+                        dispInfo.mtimeFlag = "EVEN_BUT_DIFFERENT";
+                    } else if (((ownPlugin.mtime / 1000) | 0) < ((p.mtime / 1000) | 0)) {
+                        dispInfo.mtimeFlag = "NEWER";
+                    }
+                }
+            } else {
+                dispInfo.versionFlag = "REMOTE_ONLY";
+                dispInfo.mtimeFlag = "REMOTE_ONLY";
+            }
+
+            deviceAndPlugins[p.deviceVaultName].push(dispInfo);
+        }
+        devicePluginList = Object.entries(deviceAndPlugins);
+    }
+
+    function getDispString(stat: JudgeResult): string {
+        if (stat == "") return "";
+        if (stat == "NEWER") return " (Newer)";
+        if (stat == "OLDER") return " (Older)";
+        if (stat == "EVEN") return " (Even)";
+        if (stat == "EVEN_BUT_DIFFERENT") return " (Even but different)";
+        if (stat == "REMOTE_ONLY") return " (Remote Only)";
+        return "";
+    }
+
+    onMount(async () => {
+        loadTargetList();
+        await updateList();
+    });
+
+    function toggleShowOwnPlugins() {
+        showOwnPlugins = !showOwnPlugins;
+    }
+
+    function toggleTarget(key: string) {
+        targetList[key] = !targetList[key];
+        saveTargetList();
+    }
+
+    function toggleAll(devicename: string) {
+        for (const c in targetList) {
+            if (c.startsWith(devicename)) {
+                targetList[c] = true;
+            }
+        }
+    }
+
+    async function sweepPlugins() {
+        //@ts-ignore
+        await plugin.app.plugins.loadManifests();
+        await plugin.sweepPlugin(true);
+        updateList();
+    }
+
+    async function applyPlugins() {
+        for (const c in targetList) {
+            if (targetList[c] == true) {
+                const [deviceAndVault, id, opt] = c.split("---");
+                if (deviceAndVault in deviceAndPlugins) {
+                    const entry = deviceAndPlugins[deviceAndVault].find((e) => e.manifest.id == id);
+                    if (entry) {
+                        if (opt == "plugin") {
+                            if (entry.versionFlag != "EVEN") await plugin.applyPlugin(entry);
+                        } else if (opt == "setting") {
+                            if (entry.mtimeFlag != "EVEN") await plugin.applyPluginData(entry);
+                        }
+                    }
+                }
+            }
+        }
+        //@ts-ignore
+        await plugin.app.plugins.loadManifests();
+        await plugin.sweepPlugin(true);
+        updateList();
+    }
+
+    async function checkUpdates() {
+        await plugin.checkPluginUpdate();
+    }
+    async function replicateAndRefresh() {
+        await plugin.replicate(true);
+        updateList();
+    }
+</script>
+
+<div>
+    <h1>Plugins and their settings</h1>
+    <div class="ols-plugins-div-buttons">
+        Show own items
+        <div class="checkbox-container" class:is-enabled={showOwnPlugins} on:click={toggleShowOwnPlugins} />
+    </div>
+    <div class="sls-plugins-wrap">
+        <table class="sls-plugins-tbl">
+            <tr style="position:sticky">
+                <th class="sls-plugins-tbl-device-head">Name</th>
+                <th class="sls-plugins-tbl-device-head">Info</th>
+                <th class="sls-plugins-tbl-device-head">Target</th>
+            </tr>
+            {#if devicePluginList.length == 0}
+                <tr>
+                    <td colspan="3" class="sls-table-tail tcenter"> Retrieving... </td>
+                </tr>
+            {/if}
+            {#each devicePluginList as [deviceName, devicePlugins]}
+                <tr>
+                    <th colspan="2" class="sls-plugins-tbl-device-head">{deviceName}</th>
+                    <th class="sls-plugins-tbl-device-head">
+                        <button class="mod-cta" on:click={() => toggleAll(deviceName)}>✔</button>
+                    </th>
+                </tr>
+                {#each devicePlugins as plugin}
+                    <tr>
+                        <td class="sls-table-head">{plugin.manifest.name}</td>
+                        <td class="sls-table-tail tcenter">{plugin.versionInfo}{getDispString(plugin.versionFlag)}</td>
+                        <td class="sls-table-tail tcenter">
+                            {#if plugin.versionFlag === "EVEN" || plugin.versionFlag === ""}
+                                -
+                            {:else}
+                                <div class="wrapToggle">
+                                    <div
+                                        class="checkbox-container"
+                                        class:is-enabled={targetList[plugin.deviceVaultName + "---" + plugin.manifest.id + "---plugin"]}
+                                        on:click={() => toggleTarget(plugin.deviceVaultName + "---" + plugin.manifest.id + "---plugin")}
+                                    />
+                                </div>
+                            {/if}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="sls-table-head">Settings</td>
+                        <td class="sls-table-tail tcenter">{plugin.mtimeInfo}{getDispString(plugin.mtimeFlag)}</td>
+                        <td class="sls-table-tail tcenter">
+                            {#if plugin.mtimeFlag === "EVEN" || plugin.mtimeFlag === ""}
+                                -
+                            {:else}
+                                <div class="wrapToggle">
+                                    <div
+                                        class="checkbox-container"
+                                        class:is-enabled={targetList[plugin.deviceVaultName + "---" + plugin.manifest.id + "---setting"]}
+                                        on:click={() => toggleTarget(plugin.deviceVaultName + "---" + plugin.manifest.id + "---setting")}
+                                    />
+                                </div>
+                            {/if}
+                        </td>
+                    </tr>
+                    <tr class="divider">
+                        <th colspan="3" />
+                    </tr>
+                {/each}
+            {/each}
+        </table>
+    </div>
+    <div class="ols-plugins-div-buttons">
+        <button class="" on:click={replicateAndRefresh}>Replicate and refresh</button>
+        <button class="" on:click={clearSelection}>Clear Selection</button>
+    </div>
+
+    <div class="ols-plugins-div-buttons">
+        <button class="mod-cta" on:click={checkUpdates}>Check Updates</button>
+        <button class="mod-cta" on:click={sweepPlugins}>Sweep installed</button>
+        <button class="mod-cta" on:click={applyPlugins}>Apply all</button>
+    </div>
+    <!--    <div class="ols-plugins-div-buttons">-->
+    <!--        <button class="mod-warning" on:click={applyPlugins}>Delete all selected</button>-->
+    <!--    </div>-->
+</div>
+
+<style>
+    .ols-plugins-div-buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        margin-top: 8px;
+    }
+
+    .wrapToggle {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+    }
+</style>

src/e2ee.ts

@@ -0,0 +1,168 @@
+import { Logger } from "./logger";
+import { LOG_LEVEL } from "./types";
+
+export type encodedData = [encryptedData: string, iv: string, salt: string];
+export type KeyBuffer = {
+    index: string;
+    key: CryptoKey;
+    salt: Uint8Array;
+};
+
+const KeyBuffs: KeyBuffer[] = [];
+const decKeyBuffs: KeyBuffer[] = [];
+
+const KEY_RECYCLE_COUNT = 100;
+let recycleCount = KEY_RECYCLE_COUNT;
+
+let semiStaticFieldBuffer: Uint8Array = null;
+const nonceBuffer: Uint32Array = new Uint32Array(1);
+
+export async function getKeyForEncrypt(passphrase: string): Promise<[CryptoKey, Uint8Array]> {
+    // For performance, the plugin reuses the key KEY_RECYCLE_COUNT times.
+    const f = KeyBuffs.find((e) => e.index == passphrase);
+    if (f) {
+        recycleCount--;
+        if (recycleCount > 0) {
+            return [f.key, f.salt];
+        }
+        KeyBuffs.remove(f);
+        recycleCount = KEY_RECYCLE_COUNT;
+    }
+    const xpassphrase = new TextEncoder().encode(passphrase);
+    const digest = await crypto.subtle.digest({ name: "SHA-256" }, xpassphrase);
+    const keyMaterial = await crypto.subtle.importKey("raw", digest, { name: "PBKDF2" }, false, ["deriveKey"]);
+    const salt = crypto.getRandomValues(new Uint8Array(16));
+    const key = await crypto.subtle.deriveKey(
+        {
+            name: "PBKDF2",
+            salt,
+            iterations: 100000,
+            hash: "SHA-256",
+        },
+        keyMaterial,
+        { name: "AES-GCM", length: 256 },
+        false,
+        ["encrypt"]
+    );
+    KeyBuffs.push({
+        index: passphrase,
+        key,
+        salt,
+    });
+    while (KeyBuffs.length > 50) {
+        KeyBuffs.shift();
+    }
+    return [key, salt];
+}
+
+export async function getKeyForDecryption(passphrase: string, salt: Uint8Array): Promise<[CryptoKey, Uint8Array]> {
+    const bufKey = passphrase + uint8ArrayToHexString(salt);
+    const f = decKeyBuffs.find((e) => e.index == bufKey);
+    if (f) {
+        return [f.key, f.salt];
+    }
+    const xpassphrase = new TextEncoder().encode(passphrase);
+    const digest = await crypto.subtle.digest({ name: "SHA-256" }, xpassphrase);
+    const keyMaterial = await crypto.subtle.importKey("raw", digest, { name: "PBKDF2" }, false, ["deriveKey"]);
+    const key = await crypto.subtle.deriveKey(
+        {
+            name: "PBKDF2",
+            salt,
+            iterations: 100000,
+            hash: "SHA-256",
+        },
+        keyMaterial,
+        { name: "AES-GCM", length: 256 },
+        false,
+        ["decrypt"]
+    );
+    decKeyBuffs.push({
+        index: bufKey,
+        key,
+        salt,
+    });
+    while (decKeyBuffs.length > 50) {
+        decKeyBuffs.shift();
+    }
+    return [key, salt];
+}
+
+function getSemiStaticField(reset?: boolean) {
+    // return fixed field of iv.
+    if (semiStaticFieldBuffer != null && !reset) {
+        return semiStaticFieldBuffer;
+    }
+    semiStaticFieldBuffer = crypto.getRandomValues(new Uint8Array(12));
+    return semiStaticFieldBuffer;
+}
+
+function getNonce() {
+    // This is nonce, so do not send same thing.
+    nonceBuffer[0]++;
+    if (nonceBuffer[0] > 10000) {
+        // reset semi-static field.
+        getSemiStaticField(true);
+    }
+    return nonceBuffer;
+}
+
+function uint8ArrayToHexString(src: Uint8Array): string {
+    return Array.from(src)
+        .map((e: number): string => `00${e.toString(16)}`.slice(-2))
+        .join("");
+}
+function hexStringToUint8Array(src: string): Uint8Array {
+    const srcArr = [...src];
+    const arr = srcArr.reduce((acc, _, i) => (i % 2 ? acc : [...acc, srcArr.slice(i, i + 2).join("")]), []).map((e) => parseInt(e, 16));
+    return Uint8Array.from(arr);
+}
+export async function encrypt(input: string, passphrase: string) {
+    const [key, salt] = await getKeyForEncrypt(passphrase);
+    // Create initial vector with semifixed part and incremental part
+    // I think it's not good against related-key attacks.
+    const fixedPart = getSemiStaticField();
+    const invocationPart = getNonce();
+    const iv = Uint8Array.from([...fixedPart, ...new Uint8Array(invocationPart.buffer)]);
+    const plainStringified: string = JSON.stringify(input);
+    const plainStringBuffer: Uint8Array = new TextEncoder().encode(plainStringified);
+    const encryptedDataArrayBuffer = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, plainStringBuffer);
+
+    const encryptedData = window.btoa(Array.from(new Uint8Array(encryptedDataArrayBuffer), (char) => String.fromCharCode(char)).join(""));
+
+    //return data with iv and salt.
+    const response: encodedData = [encryptedData, uint8ArrayToHexString(iv), uint8ArrayToHexString(salt)];
+    const ret = JSON.stringify(response);
+    return ret;
+}
+
+export async function decrypt(encryptedResult: string, passphrase: string): Promise<string> {
+    try {
+        const [encryptedData, ivString, salt]: encodedData = JSON.parse(encryptedResult);
+        const [key] = await getKeyForDecryption(passphrase, hexStringToUint8Array(salt));
+        const iv = hexStringToUint8Array(ivString);
+        // decode base 64, it should increase speed and i should with in MAX_DOC_SIZE_BIN, so it won't OOM.
+        const encryptedDataBin = window.atob(encryptedData);
+        const encryptedDataArrayBuffer = Uint8Array.from(encryptedDataBin.split(""), (char) => char.charCodeAt(0));
+        const plainStringBuffer: ArrayBuffer = await crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, encryptedDataArrayBuffer);
+        const plainStringified = new TextDecoder().decode(plainStringBuffer);
+        const plain = JSON.parse(plainStringified);
+        return plain;
+    } catch (ex) {
+        Logger("Couldn't decode! You should wrong the passphrases", LOG_LEVEL.VERBOSE);
+        Logger(ex, LOG_LEVEL.VERBOSE);
+        throw ex;
+    }
+}
+
+export async function testCrypt() {
+    const src = "supercalifragilisticexpialidocious";
+    const encoded = await encrypt(src, "passwordTest");
+    const decrypted = await decrypt(encoded, "passwordTest");
+    if (src != decrypted) {
+        Logger("WARNING! Your device would not support encryption.", LOG_LEVEL.VERBOSE);
+        return false;
+    } else {
+        Logger("CRYPT LOGIC OK", LOG_LEVEL.VERBOSE);
+        return true;
+    }
+}

src/logger.ts

@@ -0,0 +1,13 @@
+import { LOG_LEVEL } from "./types";
+
+// eslint-disable-next-line require-await
+export let Logger: (message: any, levlel?: LOG_LEVEL) => Promise<void> = async (message, _) => {
+    const timestamp = new Date().toLocaleString();
+    const messagecontent = typeof message == "string" ? message : message instanceof Error ? `${message.name}:${message.message}` : JSON.stringify(message, null, 2);
+    const newmessage = timestamp + "->" + messagecontent;
+    console.log(newmessage);
+};
+
+export function setLogger(loggerFun: (message: any, levlel?: LOG_LEVEL) => Promise<void>) {
+    Logger = loggerFun;
+}

src/types.ts

@@ -0,0 +1,233 @@
+// docs should be encoded as base64, so 1 char -> 1 bytes
+// and cloudant limitation is 1MB , we use 900kb;
+
+import { PluginManifest } from "obsidian";
+import * as PouchDB from "pouchdb";
+
+export const MAX_DOC_SIZE = 1000; // for .md file, but if delimiters exists. use that before.
+export const MAX_DOC_SIZE_BIN = 102400; // 100kb
+export const VER = 10;
+
+export const RECENT_MOFIDIED_DOCS_QTY = 30;
+export const LEAF_WAIT_TIMEOUT = 90000; // in synchronization, waiting missing leaf time out.
+export const LOG_LEVEL = {
+    VERBOSE: 1,
+    INFO: 10,
+    NOTICE: 100,
+    URGENT: 1000,
+} as const;
+export type LOG_LEVEL = typeof LOG_LEVEL[keyof typeof LOG_LEVEL];
+export const VERSIONINFO_DOCID = "obsydian_livesync_version";
+export const MILSTONE_DOCID = "_local/obsydian_livesync_milestone";
+export const NODEINFO_DOCID = "_local/obsydian_livesync_nodeinfo";
+
+export interface ObsidianLiveSyncSettings {
+    couchDB_URI: string;
+    couchDB_USER: string;
+    couchDB_PASSWORD: string;
+    couchDB_DBNAME: string;
+    liveSync: boolean;
+    syncOnSave: boolean;
+    syncOnStart: boolean;
+    syncOnFileOpen: boolean;
+    savingDelay: number;
+    lessInformationInLog: boolean;
+    gcDelay: number;
+    versionUpFlash: string;
+    minimumChunkSize: number;
+    longLineThreshold: number;
+    showVerboseLog: boolean;
+    suspendFileWatching: boolean;
+    trashInsteadDelete: boolean;
+    periodicReplication: boolean;
+    periodicReplicationInterval: number;
+    encrypt: boolean;
+    passphrase: string;
+    workingEncrypt: boolean;
+    workingPassphrase: string;
+    doNotDeleteFolder: boolean;
+    resolveConflictsByNewerFile: boolean;
+    batchSave: boolean;
+    deviceAndVaultName: string;
+    usePluginSettings: boolean;
+    showOwnPlugins: boolean;
+    showStatusOnEditor: boolean;
+    usePluginSync: boolean;
+    autoSweepPlugins: boolean;
+    autoSweepPluginsPeriodic: boolean;
+    notifyPluginOrSettingUpdated: boolean;
+    checkIntegrityOnSave: boolean;
+    batch_size: number;
+    batches_limit: number;
+    useHistory: boolean;
+}
+
+export const DEFAULT_SETTINGS: ObsidianLiveSyncSettings = {
+    couchDB_URI: "",
+    couchDB_USER: "",
+    couchDB_PASSWORD: "",
+    couchDB_DBNAME: "",
+    liveSync: false,
+    syncOnSave: false,
+    syncOnStart: false,
+    savingDelay: 200,
+    lessInformationInLog: false,
+    gcDelay: 300,
+    versionUpFlash: "",
+    minimumChunkSize: 20,
+    longLineThreshold: 250,
+    showVerboseLog: false,
+    suspendFileWatching: false,
+    trashInsteadDelete: true,
+    periodicReplication: false,
+    periodicReplicationInterval: 60,
+    syncOnFileOpen: false,
+    encrypt: false,
+    passphrase: "",
+    workingEncrypt: false,
+    workingPassphrase: "",
+    doNotDeleteFolder: false,
+    resolveConflictsByNewerFile: false,
+    batchSave: false,
+    deviceAndVaultName: "",
+    usePluginSettings: false,
+    showOwnPlugins: false,
+    showStatusOnEditor: false,
+    usePluginSync: false,
+    autoSweepPlugins: false,
+    autoSweepPluginsPeriodic: false,
+    notifyPluginOrSettingUpdated: false,
+    checkIntegrityOnSave: false,
+    batch_size: 250,
+    batches_limit: 40,
+    useHistory: false,
+};
+
+export const PERIODIC_PLUGIN_SWEEP = 60;
+
+export interface Entry {
+    _id: string;
+    data: string;
+    _rev?: string;
+    ctime: number;
+    mtime: number;
+    size: number;
+    _deleted?: boolean;
+    _conflicts?: string[];
+    type?: "notes";
+}
+export interface NewEntry {
+    _id: string;
+    children: string[];
+    _rev?: string;
+    ctime: number;
+    mtime: number;
+    size: number;
+    _deleted?: boolean;
+    _conflicts?: string[];
+    NewNote: true;
+    type: "newnote";
+}
+export interface PlainEntry {
+    _id: string;
+    children: string[];
+    _rev?: string;
+    ctime: number;
+    mtime: number;
+    size: number;
+    _deleted?: boolean;
+    NewNote: true;
+    _conflicts?: string[];
+    type: "plain";
+}
+export type LoadedEntry = Entry & {
+    children: string[];
+    datatype: "plain" | "newnote";
+};
+
+export interface PluginDataEntry {
+    _id: string;
+    deviceVaultName: string;
+    mtime: number;
+    manifest: PluginManifest;
+    mainJs: string;
+    manifestJson: string;
+    styleCss?: string;
+    // it must be encrypted.
+    dataJson?: string;
+    _rev?: string;
+    _deleted?: boolean;
+    _conflicts?: string[];
+    type: "plugin";
+}
+
+export interface EntryLeaf {
+    _id: string;
+    data: string;
+    _deleted?: boolean;
+    type: "leaf";
+    _rev?: string;
+}
+
+export interface EntryVersionInfo {
+    _id: typeof VERSIONINFO_DOCID;
+    _rev?: string;
+    type: "versioninfo";
+    version: number;
+    _deleted?: boolean;
+}
+
+export interface EntryMilestoneInfo {
+    _id: typeof MILSTONE_DOCID;
+    _rev?: string;
+    type: "milestoneinfo";
+    _deleted?: boolean;
+    created: number;
+    accepted_nodes: string[];
+    locked: boolean;
+}
+
+export interface EntryNodeInfo {
+    _id: typeof NODEINFO_DOCID;
+    _rev?: string;
+    _deleted?: boolean;
+    type: "nodeinfo";
+    nodeid: string;
+}
+
+export type EntryBody = Entry | NewEntry | PlainEntry;
+export type EntryDoc = EntryBody | LoadedEntry | EntryLeaf | EntryVersionInfo | EntryMilestoneInfo | EntryNodeInfo;
+
+export type diff_result_leaf = {
+    rev: string;
+    data: string;
+    ctime: number;
+    mtime: number;
+};
+export type dmp_result = Array<[number, string]>;
+
+export type diff_result = {
+    left: diff_result_leaf;
+    right: diff_result_leaf;
+    diff: dmp_result;
+};
+export type diff_check_result = boolean | diff_result;
+
+export type Credential = {
+    username: string;
+    password: string;
+};
+
+export type EntryDocResponse = EntryDoc & PouchDB.Core.IdMeta & PouchDB.Core.GetMeta;
+
+export type DatabaseConnectingStatus = "STARTED" | "NOT_CONNECTED" | "PAUSED" | "CONNECTED" | "COMPLETED" | "CLOSED" | "ERRORED";
+
+export interface PluginList {
+    [key: string]: PluginDataEntry[];
+}
+
+export interface DevicePluginList {
+    [key: string]: PluginDataEntry;
+}
+
+export const FLAGMD_REDFLAG = "redflag.md";

src/utils.ts

@@ -0,0 +1,249 @@
+import { normalizePath } from "obsidian";
+import { Logger } from "./logger";
+import { FLAGMD_REDFLAG, LOG_LEVEL } from "./types";
+
+export function arrayBufferToBase64(buffer: ArrayBuffer): Promise<string> {
+    return new Promise((res) => {
+        const blob = new Blob([buffer], { type: "application/octet-binary" });
+        const reader = new FileReader();
+        reader.onload = function (evt) {
+            const dataurl = evt.target.result.toString();
+            res(dataurl.substr(dataurl.indexOf(",") + 1));
+        };
+        reader.readAsDataURL(blob);
+    });
+}
+
+export function base64ToString(base64: string): string {
+    try {
+        const binary_string = window.atob(base64);
+        const len = binary_string.length;
+        const bytes = new Uint8Array(len);
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binary_string.charCodeAt(i);
+        }
+        return new TextDecoder().decode(bytes);
+    } catch (ex) {
+        return base64;
+    }
+}
+export function base64ToArrayBuffer(base64: string): ArrayBuffer {
+    try {
+        const binary_string = window.atob(base64);
+        const len = binary_string.length;
+        const bytes = new Uint8Array(len);
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binary_string.charCodeAt(i);
+        }
+        return bytes.buffer;
+    } catch (ex) {
+        try {
+            return new Uint16Array(
+                [].map.call(base64, function (c: string) {
+                    return c.charCodeAt(0);
+                })
+            ).buffer;
+        } catch (ex2) {
+            return null;
+        }
+    }
+}
+
+export const escapeStringToHTML = (str: string) => {
+    if (!str) return "";
+    return str.replace(/[<>&"'`]/g, (match) => {
+        const escape: any = {
+            "<": "&lt;",
+            ">": "&gt;",
+            "&": "&amp;",
+            '"': "&quot;",
+            "'": "&#39;",
+            "`": "&#x60;",
+        };
+        return escape[match];
+    });
+};
+
+export function resolveWithIgnoreKnownError<T>(p: Promise<T>, def: T): Promise<T> {
+    return new Promise((res, rej) => {
+        p.then(res).catch((ex) => (ex.status && ex.status == 404 ? res(def) : rej(ex)));
+    });
+}
+
+export function isValidPath(filename: string): boolean {
+    // eslint-disable-next-line no-control-regex
+    const regex = /[\u0000-\u001f]|[\\":?<>|*#]/g;
+    let x = filename.replace(regex, "_");
+    const win = /(\\|\/)(COM\d|LPT\d|CON|PRN|AUX|NUL|CLOCK$)($|\.)/gi;
+    const sx = (x = x.replace(win, "/_"));
+    return sx == filename;
+}
+
+export function shouldBeIgnored(filename: string): boolean {
+    if (filename == FLAGMD_REDFLAG) {
+        return true;
+    }
+    return false;
+}
+
+export function versionNumberString2Number(version: string): number {
+    return version // "1.23.45"
+        .split(".") // 1  23  45
+        .reverse() // 45  23  1
+        .map((e, i) => ((e as any) / 1) * 1000 ** i) // 45 23000 1000000
+        .reduce((prev, current) => prev + current, 0); // 1023045
+}
+
+export const delay = (ms: number): Promise<void> => {
+    return new Promise((res) => {
+        setTimeout(() => {
+            res();
+        }, ms);
+    });
+};
+
+// For backward compatibility, using the path for determining id.
+// Only CouchDB nonacceptable ID (that starts with an underscore) has been prefixed with "/".
+// The first slash will be deleted when the path is normalized.
+export function path2id(filename: string): string {
+    let x = normalizePath(filename);
+    if (x.startsWith("_")) x = "/" + x;
+    return x;
+}
+export function id2path(filename: string): string {
+    return normalizePath(filename);
+}
+
+const runningProcs: string[] = [];
+const pendingProcs: { [key: string]: (() => Promise<void>)[] } = {};
+function objectToKey(key: any): string {
+    if (typeof key === "string") return key;
+    const keys = Object.keys(key).sort((a, b) => a.localeCompare(b));
+    return keys.map((e) => e + objectToKey(key[e])).join(":");
+}
+export function getProcessingCounts() {
+    let count = 0;
+    for (const v in pendingProcs) {
+        count += pendingProcs[v].length;
+    }
+    count += runningProcs.length;
+    return count;
+}
+
+let externalNotifier: () => void = () => {};
+let notifyTimer: number = null;
+export function setLockNotifier(fn: () => void) {
+    externalNotifier = fn;
+}
+function notifyLock() {
+    if (notifyTimer != null) {
+        window.clearTimeout(notifyTimer);
+    }
+    notifyTimer = window.setTimeout(() => {
+        externalNotifier();
+    }, 100);
+}
+// Just run async/await as like transacion ISOLATION SERIALIZABLE
+export function runWithLock<T>(key: unknown, ignoreWhenRunning: boolean, proc: () => Promise<T>): Promise<T> {
+    // Logger(`Lock:${key}:enter`, LOG_LEVEL.VERBOSE);
+    const lockKey = typeof key === "string" ? key : objectToKey(key);
+    const handleNextProcs = () => {
+        if (typeof pendingProcs[lockKey] === "undefined") {
+            //simply unlock
+            runningProcs.remove(lockKey);
+            notifyLock();
+            // Logger(`Lock:${lockKey}:released`, LOG_LEVEL.VERBOSE);
+        } else {
+            Logger(`Lock:${lockKey}:left ${pendingProcs[lockKey].length}`, LOG_LEVEL.VERBOSE);
+            let nextProc = null;
+            nextProc = pendingProcs[lockKey].shift();
+            notifyLock();
+            if (nextProc) {
+                // left some
+                nextProc()
+                    .then()
+                    .catch((err) => {
+                        Logger(err);
+                    })
+                    .finally(() => {
+                        if (pendingProcs && lockKey in pendingProcs && pendingProcs[lockKey].length == 0) {
+                            delete pendingProcs[lockKey];
+                            notifyLock();
+                        }
+                        queueMicrotask(() => {
+                            handleNextProcs();
+                        });
+                    });
+            } else {
+                if (pendingProcs && lockKey in pendingProcs && pendingProcs[lockKey].length == 0) {
+                    delete pendingProcs[lockKey];
+                    notifyLock();
+                }
+            }
+        }
+    };
+    if (runningProcs.contains(lockKey)) {
+        if (ignoreWhenRunning) {
+            return null;
+        }
+        if (typeof pendingProcs[lockKey] === "undefined") {
+            pendingProcs[lockKey] = [];
+        }
+        let responderRes: (value: T | PromiseLike<T>) => void;
+        let responderRej: (reason?: unknown) => void;
+        const responder = new Promise<T>((res, rej) => {
+            responderRes = res;
+            responderRej = rej;
+            //wait for subproc resolved
+        });
+        const subproc = () =>
+            new Promise<void>((res, rej) => {
+                proc()
+                    .then((v) => {
+                        // Logger(`Lock:${key}:processed`, LOG_LEVEL.VERBOSE);
+                        handleNextProcs();
+                        responderRes(v);
+                        res();
+                    })
+                    .catch((reason) => {
+                        Logger(`Lock:${key}:rejected`, LOG_LEVEL.VERBOSE);
+                        handleNextProcs();
+                        rej(reason);
+                        responderRej(reason);
+                    });
+            });
+
+        pendingProcs[lockKey].push(subproc);
+        notifyLock();
+        // Logger(`Lock:${lockKey}:queud:left${pendingProcs[lockKey].length}`, LOG_LEVEL.VERBOSE);
+        return responder;
+    } else {
+        runningProcs.push(lockKey);
+        notifyLock();
+        // Logger(`Lock:${lockKey}:aqquired`, LOG_LEVEL.VERBOSE);
+        return new Promise((res, rej) => {
+            proc()
+                .then((v) => {
+                    handleNextProcs();
+                    res(v);
+                })
+                .catch((reason) => {
+                    handleNextProcs();
+                    rej(reason);
+                });
+        });
+    }
+}
+
+export function isPlainText(filename: string): boolean {
+    if (filename.endsWith(".md")) return true;
+    if (filename.endsWith(".txt")) return true;
+    if (filename.endsWith(".svg")) return true;
+    if (filename.endsWith(".html")) return true;
+    if (filename.endsWith(".csv")) return true;
+    if (filename.endsWith(".css")) return true;
+    if (filename.endsWith(".js")) return true;
+    if (filename.endsWith(".xml")) return true;
+
+    return false;
+}

src/utils_couchdb.ts

@@ -0,0 +1,113 @@
+import { Logger } from "./logger";
+import { LOG_LEVEL, VER, VERSIONINFO_DOCID, EntryVersionInfo, EntryDoc } from "./types";
+import { resolveWithIgnoreKnownError } from "./utils";
+import { PouchDB } from "../pouchdb-browser-webpack/dist/pouchdb-browser.js";
+
+export const isValidRemoteCouchDBURI = (uri: string): boolean => {
+    if (uri.startsWith("https://")) return true;
+    if (uri.startsWith("http://")) return true;
+    return false;
+};
+let last_post_successed = false;
+export const getLastPostFailedBySize = () => {
+    return !last_post_successed;
+};
+export const connectRemoteCouchDB = async (uri: string, auth: { username: string; password: string }): Promise<string | { db: PouchDB.Database<EntryDoc>; info: PouchDB.Core.DatabaseInfo }> => {
+    if (!isValidRemoteCouchDBURI(uri)) return "Remote URI is not valid";
+    const conf: PouchDB.HttpAdapter.HttpAdapterConfiguration = {
+        adapter: "http",
+        auth,
+        fetch: async function (url: string | Request, opts: RequestInit) {
+            let size_ok = true;
+            let size = "";
+            const localURL = url.toString().substring(uri.length);
+            const method = opts.method ?? "GET";
+            if (opts.body) {
+                const opts_length = opts.body.toString().length;
+                if (opts_length > 1024 * 1024 * 10) {
+                    // over 10MB
+                    size_ok = false;
+                    if (uri.contains(".cloudantnosqldb.")) {
+                        last_post_successed = false;
+                        Logger("This request should fail on IBM Cloudant.", LOG_LEVEL.VERBOSE);
+                        throw new Error("This request should fail on IBM Cloudant.");
+                    }
+                }
+                size = ` (${opts_length})`;
+            }
+            try {
+                const responce: Response = await fetch(url, opts);
+                if (method == "POST" || method == "PUT") {
+                    last_post_successed = responce.ok;
+                } else {
+                    last_post_successed = true;
+                }
+                Logger(`HTTP:${method}${size} to:${localURL} -> ${responce.status}`, LOG_LEVEL.VERBOSE);
+                return responce;
+            } catch (ex) {
+                Logger(`HTTP:${method}${size} to:${localURL} -> failed`, LOG_LEVEL.VERBOSE);
+                if (!size_ok && (method == "POST" || method == "PUT")) {
+                    last_post_successed = false;
+                }
+                Logger(ex);
+                throw ex;
+            }
+            // return await fetch(url, opts);
+        },
+    };
+    const db: PouchDB.Database<EntryDoc> = new PouchDB<EntryDoc>(uri, conf);
+    try {
+        const info = await db.info();
+        return { db: db, info: info };
+    } catch (ex) {
+        let msg = `${ex.name}:${ex.message}`;
+        if (ex.name == "TypeError" && ex.message == "Failed to fetch") {
+            msg += "\n**Note** This error caused by many reasons. The only sure thing is you didn't touch the server.\nTo check details, open inspector.";
+        }
+        Logger(ex, LOG_LEVEL.VERBOSE);
+        return msg;
+    }
+};
+// check the version of remote.
+// if remote is higher than current(or specified) version, return false.
+export const checkRemoteVersion = async (db: PouchDB.Database, migrate: (from: number, to: number) => Promise<boolean>, barrier: number = VER): Promise<boolean> => {
+    try {
+        const versionInfo = (await db.get(VERSIONINFO_DOCID)) as EntryVersionInfo;
+        if (versionInfo.type != "versioninfo") {
+            return false;
+        }
+
+        const version = versionInfo.version;
+        if (version < barrier) {
+            const versionUpResult = await migrate(version, barrier);
+            if (versionUpResult) {
+                await bumpRemoteVersion(db);
+                return true;
+            }
+        }
+        if (version == barrier) return true;
+        return false;
+    } catch (ex) {
+        if (ex.status && ex.status == 404) {
+            if (await bumpRemoteVersion(db)) {
+                return true;
+            }
+            return false;
+        }
+        throw ex;
+    }
+};
+export const bumpRemoteVersion = async (db: PouchDB.Database, barrier: number = VER): Promise<boolean> => {
+    const vi: EntryVersionInfo = {
+        _id: VERSIONINFO_DOCID,
+        version: barrier,
+        type: "versioninfo",
+    };
+    const versionInfo = (await resolveWithIgnoreKnownError(db.get(VERSIONINFO_DOCID), vi)) as EntryVersionInfo;
+    if (versionInfo.type != "versioninfo") {
+        return false;
+    }
+    vi._rev = versionInfo._rev;
+    await db.put(vi);
+    return true;
+};

styles.css

@@ -34,14 +34,16 @@
 .sls-plugins-wrap {
     display: flex;
     flex-grow: 1;
-    /* overflow: scroll; */
+    max-height: 50vh;
+    overflow-y: scroll;
 }
 .sls-plugins-tbl {
-    border:1px solid var(--background-modifier-border);
+    border: 1px solid var(--background-modifier-border);
     width: 100%;
+    max-height: 80%;
 }
-.divider th{
-    border-top:1px solid var(--background-modifier-border);
+.divider th {
+    border-top: 1px solid var(--background-modifier-border);
 }
 /* .sls-table-head{
     width:50%;
@@ -52,8 +54,121 @@
 } */
 
 .sls-btn-left {
-    padding-right:4px;
+    padding-right: 4px;
 }
 .sls-btn-right {
-    padding-left:4px;
-}
+    padding-left: 4px;
+}
+.sls-hidden {
+    display: none;
+}
+
+:root {
+    --slsmessage: "";
+}
+.CodeMirror-wrap::before,
+.cm-s-obsidian > .cm-editor::before {
+    content: var(--slsmessage);
+    position: absolute;
+    border-radius: 4px;
+    /* border:1px solid --background-modifier-border; */
+    display: inline-block;
+    top: 8px;
+    color: --text-normal;
+    opacity: 0.5;
+    font-size: 80%;
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
+.CodeMirror-wrap::before {
+    right: 0px;
+}
+.cm-s-obsidian > .cm-editor::before {
+    right: 16px;
+}
+.sls-setting-tab {
+    display: none;
+}
+div.sls-setting-menu-btn {
+    color: var(--text-normal);
+    background-color: var(--background-secondary-alt);
+    border-radius: 4px 4px 0 0;
+    padding: 6px 10px;
+    cursor: pointer;
+    margin-right: 12px;
+    font-family: "Inter", sans-serif;
+    outline: none;
+    user-select: none;
+    flex-grow: 1;
+    text-align: center;
+    flex-shrink: 1;
+}
+
+.sls-setting-label.selected {
+    /* order: 1; */
+    flex-grow: 1;
+    /* width: 100%; */
+}
+.sls-setting-tab:hover ~ div.sls-setting-menu-btn,
+.sls-setting-tab:checked ~ div.sls-setting-menu-btn {
+    background-color: var(--interactive-accent);
+    color: var(--text-on-accent);
+}
+
+.sls-setting-menu {
+    display: flex;
+    flex-direction: row;
+    /* flex-wrap: wrap; */
+    overflow-x: auto;
+}
+.sls-setting-label {
+    flex-grow: 1;
+    display: inline-flex;
+    justify-content: center;
+}
+.setting-collapsed {
+    display: none;
+}
+.sls-plugins-tbl-buttons {
+    text-align: right;
+}
+
+.sls-plugins-tbl-buttons button {
+    flex-grow: 0;
+    padding: 6px 10px;
+}
+.sls-plugins-tbl-device-head {
+    background-color: var(--background-secondary-alt);
+    color: var(--text-accent);
+}
+.op-flex {
+    display: flex;
+}
+.op-flex input {
+    display: inline-flex;
+    flex-grow: 1;
+    margin-bottom: 8px;
+}
+
+.op-info {
+    display: inline-flex;
+    flex-grow: 1;
+    border-bottom: 1px solid var(--background-modifier-border);
+    width: 100%;
+    margin-bottom: 4px;
+    padding-bottom: 4px;
+}
+
+.history-added {
+    color: var(--text-on-accent);
+    background-color: var(--text-accent);
+}
+.history-normal {
+    color: var(--text-normal);
+}
+.history-deleted {
+    color: var(--text-on-accent);
+    background-color: var(--text-muted);
+    text-decoration: line-through;
+}

tsconfig.json

@@ -1,17 +1,17 @@
 {
     "compilerOptions": {
         "baseUrl": ".",
-        "inlineSourceMap": true,
-        "inlineSources": true,
         "module": "ESNext",
-        "target": "es6",
+        "target": "ES6",
         "allowJs": true,
         "noImplicitAny": true,
         "moduleResolution": "node",
+        "types": ["svelte", "node"],
+        // "importsNotUsedAsValues": "error",
         "importHelpers": true,
-        "lib": ["dom", "es5", "scripthost", "es2015"]
+        "alwaysStrict": true,
+        "lib": ["es2018", "DOM", "ES5", "ES6", "ES7"]
     },
     "include": ["**/*.ts"],
-    "files": ["./main.ts"],
     "exclude": ["pouchdb-browser-webpack"]
 }