release 0.57.3

Fix missing webpack bundle generation in Docker container build

.gitpod.yml

@@ -2,7 +2,7 @@ image:
   file: .gitpod.dockerfile
 
 tasks:
-    - before: nvm install 16.15.0 && nvm use 16.15.0
+    - before: nvm install 16.18.0 && nvm use 16.18.0
       init: npm install
       command: npm run start-server
 

Dockerfile

@@ -1,9 +1,12 @@
 # !!! Don't try to build this Dockerfile directly, run it through bin/build-docker.sh script !!!
-FROM node:16.15.0-alpine
+FROM node:16.18.0-alpine
 
 # Create app directory
 WORKDIR /usr/src/app
 
+# Bundle app source
+COPY . .
+
 COPY server-package.json package.json
 
 # Install app dependencies
@@ -18,15 +21,19 @@ RUN set -x \
         nasm \
         libpng-dev \
         python3 \
-    && npm install --production \
-    && apk del .build-dependencies
+    && npm install \
+    && apk del .build-dependencies \
+    && npm run webpack \
+    && npm prune --omit=dev \
+# Set the path to the newly created webpack bundle
+    && sed -i -e 's/app\/desktop.js/app-dist\/desktop.js/g' src/views/desktop.ejs \
+    && sed -i -e 's/app\/mobile.js/app-dist\/mobile.js/g' src/views/mobile.ejs \
+    && sed -i -e 's/app\/setup.js/app-dist\/setup.js/g' src/views/setup.ejs \
+    && sed -i -e 's/app\/share.js/app-dist\/share.js/g' src/views/share/*.ejs
 
 # Some setup tools need to be kept
 RUN apk add --no-cache su-exec shadow
 
-# Bundle app source
-COPY . .
-
 # Add application user and setup proper volume permissions
 RUN adduser -s /bin/false node; exit 0
 

README.md

@@ -23,7 +23,7 @@ Ukraine is currently defending itself from Russian aggression, please consider [
   * there's a [3rd party service for hosting synchronisation server](https://trilium.cc/paid-hosting)
 * [Sharing](https://github.com/zadam/trilium/wiki/Sharing) (publishing) notes to public internet
 * Strong [note encryption](https://github.com/zadam/trilium/wiki/Protected-notes) with per-note granularity
-* Sketching diagrams with bult-in Excalidraw (note type "canvas")
+* Sketching diagrams with built-in Excalidraw (note type "canvas")
 * [Relation maps](https://github.com/zadam/trilium/wiki/Relation-map) and [link maps](https://github.com/zadam/trilium/wiki/Link-map) for visualizing notes and their relations
 * [Scripting](https://github.com/zadam/trilium/wiki/Scripts) - see [Advanced showcases](https://github.com/zadam/trilium/wiki/Advanced-showcases)
 * [REST API](https://github.com/zadam/trilium/wiki/ETAPI) for automation

bin/build-server.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 PKG_DIR=dist/trilium-linux-x64-server
-NODE_VERSION=16.15.0
+NODE_VERSION=16.18.0
 
 if [ "$1" != "DONTCOPY" ]
 then

bin/copy-trilium.sh

@@ -5,7 +5,7 @@ if [[ $# -eq 0 ]] ; then
     exit 1
 fi
 
-n exec 16.15.0 npm run webpack
+n exec 16.18.0 npm run webpack
 
 DIR=$1
 
@@ -30,7 +30,7 @@ cp -r electron.js $DIR/
 cp webpack-* $DIR/
 
 # run in subshell (so we return to original dir)
-(cd $DIR && n exec 16.15.0 npm install --only=prod)
+(cd $DIR && n exec 16.18.0 npm install --only=prod)
 
 # cleanup of useless files in dependencies
 rm -r $DIR/node_modules/image-q/demo

docs/backend_api/AbstractEntity.html

@@ -991,7 +991,7 @@ This is a low level method, for notes and branches use `note.deleteNote()` and '
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/Attribute.html

@@ -1904,7 +1904,7 @@ This is a low level method, for notes and branches use `note.deleteNote()` and '
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/BackendScriptApi.html

@@ -3667,204 +3667,6 @@ if some action needs to happen on only one specific instance.
     
 
     
-    <h4 class="name" id="getNotesWithLabel"><span class="type-signature"></span>getNotesWithLabel<span class="signature">(name, value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Array.&lt;<a href="Note.html">Note</a>>}</span></h4>
-    
-
-    
-
-
-
-<div class="description">
-    Retrieves notes with given label name & value
-</div>
-
-
-
-
-
-
-
-
-
-    <h5>Parameters:</h5>
-    
-
-<table class="params">
-    <thead>
-    <tr>
-        
-        <th>Name</th>
-        
-
-        <th>Type</th>
-
-        
-        <th>Attributes</th>
-        
-
-        
-
-        <th class="last">Description</th>
-    </tr>
-    </thead>
-
-    <tbody>
-    
-
-        <tr>
-            
-                <td class="name"><code>name</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">string</span>
-
-
-            
-            </td>
-
-            
-                <td class="attributes">
-                
-
-                
-
-                
-                </td>
-            
-
-            
-
-            <td class="description last">attribute name</td>
-        </tr>
-
-    
-
-        <tr>
-            
-                <td class="name"><code>value</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">string</span>
-
-
-            
-            </td>
-
-            
-                <td class="attributes">
-                
-                    &lt;optional><br>
-                
-
-                
-
-                
-                </td>
-            
-
-            
-
-            <td class="description last">attribute value</td>
-        </tr>
-
-    
-    </tbody>
-</table>
-
-
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_backend_script_api.js.html">services/backend_script_api.js</a>, <a href="services_backend_script_api.js.html#line126">line 126</a>
-    </li></ul></dd>
-    
-
-    
-
-    
-
-    
-</dl>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<h5>Returns:</h5>
-
-        
-
-
-<dl>
-    <dt>
-        Type
-    </dt>
-    <dd>
-        
-<span class="param-type">Array.&lt;<a href="Note.html">Note</a>></span>
-
-
-    </dd>
-</dl>
-
-    
-
-
-
-
-
-        
-            
-
-    
-
-    
     <h4 class="name" id="getNoteWithLabel"><span class="type-signature"></span>getNoteWithLabel<span class="signature">(name, value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="Note.html">Note</a>|null}</span></h4>
     
 
@@ -4066,6 +3868,204 @@ if some action needs to happen on only one specific instance.
     
 
     
+    <h4 class="name" id="getNotesWithLabel"><span class="type-signature"></span>getNotesWithLabel<span class="signature">(name, value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Array.&lt;<a href="Note.html">Note</a>>}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Retrieves notes with given label name & value
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+        <th>Attributes</th>
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>name</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">string</span>
+
+
+            
+            </td>
+
+            
+                <td class="attributes">
+                
+
+                
+
+                
+                </td>
+            
+
+            
+
+            <td class="description last">attribute name</td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>value</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">string</span>
+
+
+            
+            </td>
+
+            
+                <td class="attributes">
+                
+                    &lt;optional><br>
+                
+
+                
+
+                
+                </td>
+            
+
+            
+
+            <td class="description last">attribute value</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="services_backend_script_api.js.html">services/backend_script_api.js</a>, <a href="services_backend_script_api.js.html#line126">line 126</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Array.&lt;<a href="Note.html">Note</a>></span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
     <h4 class="name" id="getRootCalendarNote"><span class="type-signature"></span>getRootCalendarNote<span class="signature">()</span><span class="type-signature"> &rarr; {<a href="Note.html">Note</a>|null}</span></h4>
     
 
@@ -6437,7 +6437,7 @@ exists, then we'll use that transaction.
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/Branch.html

@@ -1844,7 +1844,7 @@ This is a low level method, for notes and branches use `note.deleteNote()` and '
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/EtapiToken.html

@@ -1461,7 +1461,7 @@ This is a low level method, for notes and branches use `note.deleteNote()` and '
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/NoteRevision.html

@@ -2174,7 +2174,7 @@ This is a low level method, for notes and branches use `note.deleteNote()` and '
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/Option.html

@@ -1319,7 +1319,7 @@ This is a low level method, for notes and branches use `note.deleteNote()` and '
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/RecentNote.html

@@ -1251,7 +1251,7 @@ This is a low level method, for notes and branches use `note.deleteNote()` and '
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/becca_entities_abstract_entity.js.html

@@ -209,7 +209,7 @@ module.exports = AbstractEntity;
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/becca_entities_attribute.js.html

@@ -254,7 +254,7 @@ module.exports = Attribute;
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/becca_entities_branch.js.html

@@ -198,6 +198,10 @@ class Branch extends AbstractEntity {
 
             log.info("Deleting note " + note.noteId);
 
+            // marking note as deleted as a signal to event handlers that the note is being deleted
+            // (isDeleted is being checked against becca)
+            delete this.becca.notes[note.noteId];
+
             for (const attribute of note.getOwnedAttributes()) {
                 attribute.markAsDeleted(deleteId);
             }
@@ -274,7 +278,7 @@ module.exports = Branch;
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/becca_entities_etapi_token.js.html

@@ -120,7 +120,7 @@ module.exports = EtapiToken;
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/becca_entities_note.js.html

@@ -38,7 +38,8 @@ const AbstractEntity = require("./abstract_entity");
 const NoteRevision = require("./note_revision");
 const TaskContext = require("../../services/task_context");
 const dayjs = require("dayjs");
-const utc = require('dayjs/plugin/utc')
+const utc = require('dayjs/plugin/utc');
+const searchService = require("../../services/search/services/search.js");
 dayjs.extend(utc)
 
 const LABEL = 'label';
@@ -867,30 +868,94 @@ class Note extends AbstractEntity {
         return Array.from(set);
     }
 
-    /** @returns {Note[]} */
-    getSubtreeNotes(includeArchived = true) {
-        const noteSet = new Set();
+    /** @return {Note[]} */
+    getSearchResultNotes() {
+        if (this.type !== 'search') {
+            return [];
+        }
+
+        try {
+            const searchService = require("../../services/search/services/search");
+            const {searchResultNoteIds} = searchService.searchFromNote(this);
+
+            const becca = this.becca;
+            return searchResultNoteIds
+                .map(resultNoteId => becca.notes[resultNoteId])
+                .filter(note => !!note);
+        }
+        catch (e) {
+            log.error(`Could not resolve search note ${this.noteId}: ${e.message}`);
+            return [];
+        }
+    }
+
+    /**
+     * @returns {{notes: Note[], relationships: Array.<{parentNoteId: string, childNoteId: string}>}}
+     */
+    getSubtree({includeArchived = true, resolveSearch = false} = {}) {
+        const noteSet = new Set();
+        const relationships = []; // list of tuples parentNoteId -> childNoteId
+
+        function resolveSearchNote(searchNote) {
+            try {
+                for (const resultNote of searchNote.getSearchResultNotes()) {
+                    addSubtreeNotesInner(resultNote, searchNote);
+                }
+            }
+            catch (e) {
+                log.error(`Could not resolve search note ${searchNote?.noteId}: ${e.message}`);
+            }
+        }
+
+        function addSubtreeNotesInner(note, parentNote = null) {
+            // share can be removed after 0.57 since it will be put under hidden
+            if (note.noteId === 'hidden' || note.noteId === 'share') {
+                return;
+            }
+
+            if (parentNote) {
+                // this needs to happen first before noteSet check to include all clone relationships
+                relationships.push({
+                    parentNoteId: parentNote.noteId,
+                    childNoteId: note.noteId
+                });
+            }
+
+            if (noteSet.has(note)) {
+                return;
+            }
 
-        function addSubtreeNotesInner(note) {
             if (!includeArchived && note.isArchived) {
                 return;
             }
 
             noteSet.add(note);
 
-            for (const childNote of note.children) {
-                addSubtreeNotesInner(childNote);
+            if (note.type === 'search') {
+                if (resolveSearch) {
+                    resolveSearchNote(note);
+                }
+            }
+            else {
+                for (const childNote of note.children) {
+                    addSubtreeNotesInner(childNote, note);
+                }
             }
         }
 
         addSubtreeNotesInner(this);
 
-        return Array.from(noteSet);
+        return {
+            notes: Array.from(noteSet),
+            relationships
+        };
     }
 
     /** @returns {String[]} */
-    getSubtreeNoteIds(includeArchived = true) {
-        return this.getSubtreeNotes(includeArchived).map(note => note.noteId);
+    getSubtreeNoteIds({includeArchived = true, resolveSearch = false} = {}) {
+        return this.getSubtree({includeArchived, resolveSearch})
+            .notes
+            .map(note => note.noteId);
     }
 
     getDescendantNoteIds() {
@@ -1378,7 +1443,7 @@ module.exports = Note;
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/becca_entities_note_revision.js.html

@@ -235,7 +235,7 @@ module.exports = NoteRevision;
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/becca_entities_option.js.html

@@ -89,7 +89,7 @@ module.exports = Option;
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/becca_entities_recent_note.js.html

@@ -77,7 +77,7 @@ module.exports = RecentNote;
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/global.html

@@ -1089,7 +1089,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/index.html

@@ -56,7 +56,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/module-sql.html

@@ -28,8 +28,6 @@
 
 <header>
     
-        
-    
 </header>
 
 <article>
@@ -38,6 +36,50 @@
         
 
         
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="services_sql.js.html">services/sql.js</a>, <a href="services_sql.js.html#line3">line 3</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+        
     
     </div>
 
@@ -1258,7 +1300,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/services_backend_script_api.js.html

@@ -512,7 +512,7 @@ module.exports = BackendScriptApi;
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/backend_api/services_sql.js.html

@@ -404,7 +404,7 @@ module.exports = {
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/Attribute.html

@@ -844,13 +844,13 @@ and relation (representing named relationship between source and target note)</d
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/Branch.html

@@ -1056,13 +1056,13 @@ parents.</div>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/FrontendScriptApi.html

@@ -453,116 +453,6 @@
 
         
             
-<h4 class="name" id="currentNote"><span class="type-signature"></span>currentNote<span class="type-signature"></span></h4>
-
-
-
-
-
-
-
-
-
-
-    <h5 class="subsection-title">Properties:</h5>
-
-    
-
-<table class="props">
-    <thead>
-    <tr>
-        
-        <th>Name</th>
-        
-
-        <th>Type</th>
-
-        
-
-        
-
-        <th class="last">Description</th>
-    </tr>
-    </thead>
-
-    <tbody>
-    
-
-        <tr>
-            
-                <td class="name"><code>note</code></td>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">object</span>
-
-
-            
-            </td>
-
-            
-
-            
-
-            <td class="description last">where script is currently executing</td>
-        </tr>
-
-    
-    </tbody>
-</table>
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line33">line 33</a>
-    </li></ul></dd>
-    
-
-    
-
-    
-
-    
-</dl>
-
-
-
-
-
-
-        
-            
 <h4 class="name" id="NoteContextAwareWidget"><span class="type-signature"></span>NoteContextAwareWidget<span class="type-signature"></span></h4>
 
 
@@ -775,6 +665,332 @@
 
         
             
+<h4 class="name" id="TabAwareWidget"><span class="type-signature"></span>TabAwareWidget<span class="type-signature"></span></h4>
+
+
+
+
+
+
+
+
+
+
+    <h5 class="subsection-title">Properties:</h5>
+
+    
+
+<table class="props">
+    <thead>
+    <tr>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">NoteContextAwareWidget</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+        <dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>use NoteContextAwareWidget instead</li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line47">line 47</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="TabCachingWidget"><span class="type-signature"></span>TabCachingWidget<span class="type-signature"></span></h4>
+
+
+
+
+
+
+
+
+
+
+    <h5 class="subsection-title">Properties:</h5>
+
+    
+
+<table class="props">
+    <thead>
+    <tr>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">NoteContextCachingWidget</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+        <dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>use NoteContextCachingWidget instead</li></ul></dd>
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line56">line 56</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
+<h4 class="name" id="currentNote"><span class="type-signature"></span>currentNote<span class="type-signature"></span></h4>
+
+
+
+
+
+
+
+
+
+
+    <h5 class="subsection-title">Properties:</h5>
+
+    
+
+<table class="props">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>note</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">where script is currently executing</td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line33">line 33</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+        
+            
 <h4 class="name" id="originEntity"><span class="type-signature"></span>originEntity<span class="type-signature"></span></h4>
 
 
@@ -997,222 +1213,6 @@
 
 
         
-            
-<h4 class="name" id="TabAwareWidget"><span class="type-signature"></span>TabAwareWidget<span class="type-signature"></span></h4>
-
-
-
-
-
-
-
-
-
-
-    <h5 class="subsection-title">Properties:</h5>
-
-    
-
-<table class="props">
-    <thead>
-    <tr>
-        
-
-        <th>Type</th>
-
-        
-
-        
-
-        <th class="last">Description</th>
-    </tr>
-    </thead>
-
-    <tbody>
-    
-
-        <tr>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">NoteContextAwareWidget</span>
-
-
-            
-            </td>
-
-            
-
-            
-
-            <td class="description last"></td>
-        </tr>
-
-    
-    </tbody>
-</table>
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-        <dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>use NoteContextAwareWidget instead</li></ul></dd>
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line47">line 47</a>
-    </li></ul></dd>
-    
-
-    
-
-    
-
-    
-</dl>
-
-
-
-
-
-
-        
-            
-<h4 class="name" id="TabCachingWidget"><span class="type-signature"></span>TabCachingWidget<span class="type-signature"></span></h4>
-
-
-
-
-
-
-
-
-
-
-    <h5 class="subsection-title">Properties:</h5>
-
-    
-
-<table class="props">
-    <thead>
-    <tr>
-        
-
-        <th>Type</th>
-
-        
-
-        
-
-        <th class="last">Description</th>
-    </tr>
-    </thead>
-
-    <tbody>
-    
-
-        <tr>
-            
-
-            <td class="type">
-            
-                
-<span class="param-type">NoteContextCachingWidget</span>
-
-
-            
-            </td>
-
-            
-
-            
-
-            <td class="description last"></td>
-        </tr>
-
-    
-    </tbody>
-</table>
-
-
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-        <dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>use NoteContextCachingWidget instead</li></ul></dd>
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line56">line 56</a>
-    </li></ul></dd>
-    
-
-    
-
-    
-
-    
-</dl>
-
-
-
-
-
-
-        
     
 
     
@@ -1542,7 +1542,7 @@
 
 
 <div class="description">
-    Adds new button the the plugin area.
+    Adds new button to the plugin area.
 </div>
 
 
@@ -2103,7 +2103,7 @@
     
 
     
-    <h4 class="name" id="createNoteLink"><span class="type-signature"></span>createNoteLink<span class="signature">(notePath, params<span class="signature-attributes">opt</span>, title=<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="createNoteLink"><span class="type-signature"></span>createNoteLink<span class="signature">(notePath, params<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
     
 
     
@@ -2350,13 +2350,6 @@
         </tr>
 
     
-    </tbody>
-</table>
-
-            </td>
-        </tr>
-
-    
 
         <tr>
             
@@ -2385,6 +2378,10 @@
             
 
             
+                <td class="default">
+                
+                </td>
+            
 
             <td class="description last">custom link tile with note's title as default</td>
         </tr>
@@ -2393,6 +2390,13 @@
     </tbody>
 </table>
 
+            </td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
 
 
 
@@ -8141,13 +8145,13 @@ Typical use case is when new note has been created, we should wait until it is s
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/NoteComplement.html

@@ -775,13 +775,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/entities_attribute.js.html

@@ -115,13 +115,13 @@ export default Attribute;
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/entities_branch.js.html

@@ -99,13 +99,13 @@ export default Branch;
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/entities_note_complement.js.html

@@ -76,13 +76,13 @@ export default NoteComplement;
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/entities_note_short.js.html

@@ -864,13 +864,13 @@ export default NoteShort;
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/global.html

@@ -425,13 +425,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/index.html

@@ -50,13 +50,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/module.exports.html

@@ -155,13 +155,13 @@
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/services_frontend_script_api.js.html

@@ -159,7 +159,7 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, $contain
      */
 
     /**
-     * Adds new button the the plugin area.
+     * Adds new button to the plugin area.
      *
      * @param {ToolbarButtonOptions} opts
      */
@@ -381,7 +381,7 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, $contain
      * @param {boolean} [params.showTooltip=true] - enable/disable tooltip on the link
      * @param {boolean} [params.showNotePath=false] - show also whole note's path as part of the link
      * @param {boolean} [params.showNoteIcon=false] - show also note icon before the title
-     * @param {string} [title=] - custom link tile with note's title as default
+     * @param {string} [params.title=] - custom link tile with note's title as default
      */
     this.createNoteLink = linkService.createNoteLink;
 
@@ -663,13 +663,13 @@ export default FrontendScriptApi;
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

docs/frontend_api/widgets_collapsible_widget.js.html

@@ -74,13 +74,13 @@ export default class CollapsibleWidget extends NoteContextAwareWidget {
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="module.exports.html">exports</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Attribute.html">Attribute</a></li><li><a href="Branch.html">Branch</a></li><li><a href="FrontendScriptApi.html">FrontendScriptApi</a></li><li><a href="NoteComplement.html">NoteComplement</a></li><li><a href="NoteShort.html">NoteShort</a></li><li><a href="module.exports.html">exports</a></li></ul><h3>Global</h3><ul><li><a href="global.html#doRenderBody">doRenderBody</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a>
 </footer>
 
 <script> prettyPrint(); </script>

dump-db/README.md

@@ -6,7 +6,7 @@ It is meant as a last resort solution when the standard mean to access your data
 
 ## Installation
 
-This tool requires node.js, testing has been done on 16.15.0, but it will probably work on other versions as well.
+This tool requires node.js, testing has been done on 16.18.0, but it will probably work on other versions as well.
 
 ```
 npm install

electron.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const {app, globalShortcut} = require('electron');
+const {app, globalShortcut, BrowserWindow} = require('electron');
 const sqlInit = require('./src/services/sql_init');
 const appIconService = require('./src/services/app_icon');
 const windowService = require('./src/services/window');
@@ -27,11 +27,19 @@ app.on('ready', async () => {
 
     // if db is not initialized -> setup process
     // if db is initialized, then we need to wait until the migration process is finished
-    if (await sqlInit.isDbInitialized()) {
+    if (sqlInit.isDbInitialized()) {
         await sqlInit.dbReady;
 
         await windowService.createMainWindow(app);
 
+        if (process.platform === 'darwin') {
+            app.on('activate', async () => {
+                if (BrowserWindow.getAllWindows().length === 0) {
+                    await windowService.createMainWindow(app);
+                }
+            });
+        }
+
         tray.createTray();
     }
     else {

libraries/boxicons/css/boxicons.css

@@ -520,7 +520,174 @@
     border-radius: 50%;
 }
 
-  
+  .bxs-balloon:before {
+    content: "\eb60";
+  }
+  .bxs-castle:before {
+    content: "\eb79";
+  }
+  .bxs-coffee-bean:before {
+    content: "\eb92";
+  }
+  .bxs-objects-horizontal-center:before {
+    content: "\ebab";
+  }
+  .bxs-objects-horizontal-left:before {
+    content: "\ebc4";
+  }
+  .bxs-objects-horizontal-right:before {
+    content: "\ebdd";
+  }
+  .bxs-objects-vertical-bottom:before {
+    content: "\ebf6";
+  }
+  .bxs-objects-vertical-center:before {
+    content: "\ef40";
+  }
+  .bxs-objects-vertical-top:before {
+    content: "\ef41";
+  }
+  .bxs-pear:before {
+    content: "\ef42";
+  }
+  .bxs-shield-minus:before {
+    content: "\ef43";
+  }
+  .bxs-shield-plus:before {
+    content: "\ef44";
+  }
+  .bxs-shower:before {
+    content: "\ef45";
+  }
+  .bxs-sushi:before {
+    content: "\ef46";
+  }
+  .bxs-universal-access:before {
+    content: "\ef47";
+  }
+  .bx-child:before {
+    content: "\ef48";
+  }
+  .bx-horizontal-left:before {
+    content: "\ef49";
+  }
+  .bx-horizontal-right:before {
+    content: "\ef4a";
+  }
+  .bx-objects-horizontal-center:before {
+    content: "\ef4b";
+  }
+  .bx-objects-horizontal-left:before {
+    content: "\ef4c";
+  }
+  .bx-objects-horizontal-right:before {
+    content: "\ef4d";
+  }
+  .bx-objects-vertical-bottom:before {
+    content: "\ef4e";
+  }
+  .bx-objects-vertical-center:before {
+    content: "\ef4f";
+  }
+  .bx-objects-vertical-top:before {
+    content: "\ef50";
+  }
+  .bx-rfid:before {
+    content: "\ef51";
+  }
+  .bx-shield-minus:before {
+    content: "\ef52";
+  }
+  .bx-shield-plus:before {
+    content: "\ef53";
+  }
+  .bx-shower:before {
+    content: "\ef54";
+  }
+  .bx-sushi:before {
+    content: "\ef55";
+  }
+  .bx-universal-access:before {
+    content: "\ef56";
+  }
+  .bx-vertical-bottom:before {
+    content: "\ef57";
+  }
+  .bx-vertical-top:before {
+    content: "\ef58";
+  }
+  .bxl-graphql:before {
+    content: "\ef59";
+  }
+  .bxl-typescript:before {
+    content: "\ef5a";
+  }
+  .bxs-color:before {
+    content: "\ef39";
+  }
+  .bx-reflect-horizontal:before {
+    content: "\ef3a";
+  }
+  .bx-reflect-vertical:before {
+    content: "\ef3b";
+  }
+  .bx-color:before {
+    content: "\ef3c";
+  }
+  .bxl-mongodb:before {
+    content: "\ef3d";
+  }
+  .bxl-postgresql:before {
+    content: "\ef3e";
+  }
+  .bxl-deezer:before {
+    content: "\ef3f";
+  }
+  .bxs-hard-hat:before {
+    content: "\ef2a";
+  }
+  .bxs-home-alt-2:before {
+    content: "\ef2b";
+  }
+  .bxs-cheese:before {
+    content: "\ef2c";
+  }
+  .bx-home-alt-2:before {
+    content: "\ef2d";
+  }
+  .bx-hard-hat:before {
+    content: "\ef2e";
+  }
+  .bx-cheese:before {
+    content: "\ef2f";
+  }
+  .bx-cart-add:before {
+    content: "\ef30";
+  }
+  .bx-cart-download:before {
+    content: "\ef31";
+  }
+  .bx-no-signal:before {
+    content: "\ef32";
+  }
+  .bx-signal-1:before {
+    content: "\ef33";
+  }
+  .bx-signal-2:before {
+    content: "\ef34";
+  }
+  .bx-signal-3:before {
+    content: "\ef35";
+  }
+  .bx-signal-4:before {
+    content: "\ef36";
+  }
+  .bx-signal-5:before {
+    content: "\ef37";
+  }
+  .bxl-xing:before {
+    content: "\ef38";
+  }
   .bxl-meta:before {
     content: "\ef27";
   }
@@ -2436,7 +2603,7 @@
     content: "\eb5f";
   }
   .bx-menu-alt-left:before {
-    content: "\eb60";
+    content: "\ef5b";
   }
   .bx-menu-alt-right:before {
     content: "\eb61";
@@ -2511,7 +2678,7 @@
     content: "\eb78";
   }
   .bx-message-rounded-edit:before {
-    content: "\eb79";
+    content: "\ef5c";
   }
   .bx-message-rounded-error:before {
     content: "\eb7a";
@@ -2586,7 +2753,7 @@
     content: "\eb91";
   }
   .bx-mobile-vibration:before {
-    content: "\eb92";
+    content: "\ef5d";
   }
   .bx-money:before {
     content: "\eb93";
@@ -2661,7 +2828,7 @@
     content: "\ebaa";
   }
   .bx-paper-plane:before {
-    content: "\ebab";
+    content: "\ef61";
   }
   .bx-paragraph:before {
     content: "\ebac";
@@ -2736,7 +2903,7 @@
     content: "\ebc3";
   }
   .bx-pointer:before {
-    content: "\ebc4";
+    content: "\ef5e";
   }
   .bx-poll:before {
     content: "\ebc5";
@@ -2811,7 +2978,7 @@
     content: "\ebdc";
   }
   .bx-reply:before {
-    content: "\ebdd";
+    content: "\ef5f";
   }
   .bx-reply-all:before {
     content: "\ebde";
@@ -2886,7 +3053,7 @@
     content: "\ebf5";
   }
   .bx-screenshot:before {
-    content: "\ebf6";
+    content: "\ef60";
   }
   .bx-search:before {
     content: "\ebf7";

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "trilium",
-  "version": "0.56.1",
+  "version": "0.57.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "trilium",
-      "version": "0.56.1",
+      "version": "0.57.2",
       "hasInstallScript": true,
       "license": "AGPL-3.0-only",
       "dependencies": {
@@ -14,7 +14,7 @@
         "@excalidraw/excalidraw": "0.12.0",
         "archiver": "5.3.1",
         "async-mutex": "0.4.0",
-        "axios": "1.1.2",
+        "axios": "1.1.3",
         "better-sqlite3": "7.4.5",
         "chokidar": "3.5.3",
         "cls-hooked": "4.2.2",
@@ -22,11 +22,11 @@
         "compression": "1.7.4",
         "cookie-parser": "1.4.6",
         "csurf": "1.11.0",
-        "dayjs": "1.11.5",
+        "dayjs": "1.11.6",
         "dayjs-plugin-utc": "^0.1.2",
         "ejs": "3.1.8",
         "electron-debug": "3.2.0",
-        "electron-dl": "3.4.0",
+        "electron-dl": "3.4.1",
         "electron-window-state": "5.0.3",
         "express": "4.18.2",
         "express-partial-content": "1.0.2",
@@ -44,10 +44,10 @@
         "is-svg": "4.3.2",
         "jimp": "0.16.2",
         "joplin-turndown-plugin-gfm": "1.0.12",
-        "jsdom": "20.0.1",
+        "jsdom": "20.0.2",
         "mime-types": "2.1.35",
         "multer": "1.4.5-lts.1",
-        "node-abi": "3.26.0",
+        "node-abi": "3.28.0",
         "normalize-strings": "1.1.1",
         "open": "8.4.0",
         "rand-token": "1.0.1",
@@ -57,7 +57,7 @@
         "rimraf": "3.0.2",
         "safe-compare": "1.1.4",
         "sanitize-filename": "1.6.3",
-        "sanitize-html": "2.7.2",
+        "sanitize-html": "2.7.3",
         "sax": "1.2.4",
         "semver": "7.3.8",
         "serve-favicon": "2.5.0",
@@ -67,7 +67,7 @@
         "tmp": "0.2.1",
         "turndown": "7.1.1",
         "unescape": "1.0.1",
-        "ws": "8.9.0",
+        "ws": "8.11.0",
         "yauzl": "2.10.0"
       },
       "bin": {
@@ -77,11 +77,11 @@
         "cross-env": "7.0.3",
         "electron": "16.2.8",
         "electron-builder": "23.6.0",
-        "electron-packager": "16.0.0",
+        "electron-packager": "17.1.1",
         "electron-rebuild": "3.2.9",
         "esm": "3.2.25",
-        "jasmine": "4.4.0",
-        "jsdoc": "3.6.11",
+        "jasmine": "4.5.0",
+        "jsdoc": "4.0.0",
         "lorem-ipsum": "2.0.8",
         "rcedit": "3.0.1",
         "webpack": "5.74.0",
@@ -140,6 +140,27 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@electron/asar": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.2.tgz",
+      "integrity": "sha512-32fMU68x8a6zvxtC1IC/BhPDKTh8rQjdmwEplj3CDpnkcwBzZVN9v/8cK0LJqQ0FOQQVZW8BWZ1S6UU53TYR4w==",
+      "dev": true,
+      "dependencies": {
+        "chromium-pickle-js": "^0.2.0",
+        "commander": "^5.0.0",
+        "glob": "^7.1.6",
+        "minimatch": "^3.0.4"
+      },
+      "bin": {
+        "asar": "bin/asar.js"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      },
+      "optionalDependencies": {
+        "@types/glob": "^7.1.1"
+      }
+    },
     "node_modules/@electron/get": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@electron/get/-/get-1.14.1.tgz",
@@ -182,6 +203,76 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/@electron/notarize": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@electron/notarize/-/notarize-1.2.3.tgz",
+      "integrity": "sha512-9oRzT56rKh5bspk3KpAVF8lPKHYQrBnRwcgiOeR0hdilVEQmszDaAu0IPCPrwwzJN0ugNs0rRboTreHMt/6mBQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "fs-extra": "^9.0.1"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/osx-sign": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@electron/osx-sign/-/osx-sign-1.0.1.tgz",
+      "integrity": "sha512-WkUcva+qkt809bI6uxxEG/uOWfl8HAw0m8aPijpKmGMIpZ1CWWB808YG6aY3wckUO86xZdmiOsUJTM4keLhY8A==",
+      "dev": true,
+      "dependencies": {
+        "compare-version": "^0.1.2",
+        "debug": "^4.3.4",
+        "fs-extra": "^10.0.0",
+        "isbinaryfile": "^4.0.8",
+        "minimist": "^1.2.6",
+        "plist": "^3.0.5"
+      },
+      "bin": {
+        "electron-osx-flat": "bin/electron-osx-flat.js",
+        "electron-osx-sign": "bin/electron-osx-sign.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/@electron/remote": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.0.8.tgz",
@@ -683,6 +774,18 @@
         "regenerator-runtime": "^0.13.3"
       }
     },
+    "node_modules/@jsdoc/salty": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.1.tgz",
+      "integrity": "sha512-JXwylDNSHa549N9uceDYu8D4GMXwSo3H8CCPYEQqxhhHpxD28+lRl2b3bS/caaPj5w1YD3SWtrficJNTnUjGpg==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=v12.0.0"
+      }
+    },
     "node_modules/@malept/cross-spawn-promise": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-1.1.0.tgz",
@@ -1698,9 +1801,9 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
     "node_modules/axios": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.2.tgz",
-      "integrity": "sha512-bznQyETwElsXl2RK7HLLwb5GPpOLlycxHCtrpDR/4RqqBzjARaOTo3jz4IgtntWUYee7Ne4S8UHd92VCuzPaWA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -2945,9 +3048,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.5",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
-      "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz",
+      "integrity": "sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ=="
     },
     "node_modules/dayjs-plugin-utc": {
       "version": "0.1.2",
@@ -3368,9 +3471,9 @@
       }
     },
     "node_modules/electron-dl": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-3.4.0.tgz",
-      "integrity": "sha512-7Oa4J+bmmm14FcIlPc3XyjVrzOLd3HqiSRO3gjzhaoEW4+8C+6gfG/KQX8GBsoQomNa7d8i1e47xCwx4fDCt7g==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-3.4.1.tgz",
+      "integrity": "sha512-NUrjWTlFW7n/+0ECxQ1AkjikNxdeRDpaprLY7YhmOg6pkFcPHwdEfpkTK+CIhyGMAlZOuto1clB1z5HAwgZcaA==",
       "dependencies": {
         "ext-name": "^5.0.0",
         "pupa": "^2.0.1",
@@ -3569,110 +3672,19 @@
         "keyboardevents-areequal": "^0.2.1"
       }
     },
-    "node_modules/electron-notarize": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/electron-notarize/-/electron-notarize-1.1.1.tgz",
-      "integrity": "sha512-kufsnqh86CTX89AYNG3NCPoboqnku/+32RxeJ2+7A4Rbm4bbOx0Nc7XTy3/gAlBfpj9xPAxHfhZLOHgfi6cJVw==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.1.1",
-        "fs-extra": "^9.0.1"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/electron-notarize/node_modules/fs-extra": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-      "dev": true,
-      "dependencies": {
-        "at-least-node": "^1.0.0",
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/electron-notarize/node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/electron-notarize/node_modules/universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/electron-osx-sign": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/electron-osx-sign/-/electron-osx-sign-0.5.0.tgz",
-      "integrity": "sha512-icoRLHzFz/qxzDh/N4Pi2z4yVHurlsCAYQvsCSG7fCedJ4UJXBS6PoQyGH71IfcqKupcKeK7HX/NkyfG+v6vlQ==",
-      "dev": true,
-      "dependencies": {
-        "bluebird": "^3.5.0",
-        "compare-version": "^0.1.2",
-        "debug": "^2.6.8",
-        "isbinaryfile": "^3.0.2",
-        "minimist": "^1.2.0",
-        "plist": "^3.0.1"
-      },
-      "bin": {
-        "electron-osx-flat": "bin/electron-osx-flat.js",
-        "electron-osx-sign": "bin/electron-osx-sign.js"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/electron-osx-sign/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/electron-osx-sign/node_modules/isbinaryfile": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-3.0.3.tgz",
-      "integrity": "sha512-8cJBL5tTd2OS0dM4jz07wQd5g0dCCqIhUxPIGtZfa5L6hWlvV5MHTITy/DBAsF+Oe2LS1X3krBUhNwaGUWpWxw==",
-      "dev": true,
-      "dependencies": {
-        "buffer-alloc": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=0.6.0"
-      }
-    },
     "node_modules/electron-packager": {
-      "version": "16.0.0",
-      "resolved": "https://registry.npmjs.org/electron-packager/-/electron-packager-16.0.0.tgz",
-      "integrity": "sha512-7Ey4UUaHg3FYhA7ktsAvCWP8srp9+iPljGdeJBsNaZBakU6HWhvRC+Pc7LWXGCgAVIN5BQsUwR3xrCbFno91VA==",
+      "version": "17.1.1",
+      "resolved": "https://registry.npmjs.org/electron-packager/-/electron-packager-17.1.1.tgz",
+      "integrity": "sha512-r1NDtlajsq7gf2EXgjRfblCVPquvD2yeg+6XGErOKblvxOpDi0iulZLVhgYDP4AEF1P5/HgbX/vwjlkEv7PEIQ==",
       "dev": true,
       "dependencies": {
+        "@electron/asar": "^3.2.1",
         "@electron/get": "^2.0.0",
-        "@electron/universal": "^1.2.1",
-        "asar": "^3.1.0",
+        "@electron/notarize": "^1.2.3",
+        "@electron/osx-sign": "^1.0.1",
+        "@electron/universal": "^1.3.2",
         "cross-spawn-windows-exe": "^1.2.0",
         "debug": "^4.0.1",
-        "electron-notarize": "^1.1.1",
-        "electron-osx-sign": "^0.5.0",
         "extract-zip": "^2.0.0",
         "filenamify": "^4.1.0",
         "fs-extra": "^10.1.0",
@@ -3741,6 +3753,60 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/electron-packager/node_modules/@electron/universal": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-1.3.3.tgz",
+      "integrity": "sha512-79yc61D5QWaQpia+sLQbIIi5iVoV4y9HtgOTlE0fYT0xoyg+ChwndBl4a0Q7yJfDsqq+/nLEPE655F0bTpDiCg==",
+      "dev": true,
+      "dependencies": {
+        "@electron/asar": "^3.2.1",
+        "@malept/cross-spawn-promise": "^1.1.0",
+        "debug": "^4.3.1",
+        "dir-compare": "^2.4.0",
+        "fs-extra": "^9.0.1",
+        "minimatch": "^3.0.4",
+        "plist": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/electron-packager/node_modules/@electron/universal/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/electron-packager/node_modules/@electron/universal/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/electron-packager/node_modules/@electron/universal/node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/electron-packager/node_modules/@sindresorhus/is": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -6009,22 +6075,22 @@
       "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g=="
     },
     "node_modules/jasmine": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-4.4.0.tgz",
-      "integrity": "sha512-xrbOyYkkCvgduNw7CKktDtNb+BwwBv/zvQeHpTkbxqQ37AJL5V4sY3jHoMIJPP/hTc3QxLVwOyxc87AqA+kw5g==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-4.5.0.tgz",
+      "integrity": "sha512-9olGRvNZyADIwYL9XBNBst5BTU/YaePzuddK+YRslc7rI9MdTIE4r3xaBKbv2GEmzYYUfMOdTR8/i6JfLZaxSQ==",
       "dev": true,
       "dependencies": {
         "glob": "^7.1.6",
-        "jasmine-core": "^4.4.0"
+        "jasmine-core": "^4.5.0"
       },
       "bin": {
         "jasmine": "bin/jasmine.js"
       }
     },
     "node_modules/jasmine-core": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.4.0.tgz",
-      "integrity": "sha512-+l482uImx5BVd6brJYlaHe2UwfKoZBqQfNp20ZmdNfsjGFTemGfqHLsXjKEW23w9R/m8WYeFc9JmIgjj6dUtAA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.5.0.tgz",
+      "integrity": "sha512-9PMzyvhtocxb3aXJVOPqBDswdgyAeSB81QnLop4npOpbqnheaTEwPc9ZloQeVswugPManznQBjD8kWDTjlnHuw==",
       "dev": true
     },
     "node_modules/jest-worker": {
@@ -6110,12 +6176,13 @@
       "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
     },
     "node_modules/jsdoc": {
-      "version": "3.6.11",
-      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-3.6.11.tgz",
-      "integrity": "sha512-8UCU0TYeIYD9KeLzEcAu2q8N/mx9O3phAGl32nmHlE0LpaJL71mMkP4d+QE5zWfNt50qheHtOZ0qoxVrsX5TUg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.0.tgz",
+      "integrity": "sha512-tzTgkklbWKrlaQL2+e3NNgLcZu3NaK2vsHRx7tyHQ+H5jcB9Gx0txSd2eJWlMC/xU1+7LQu4s58Ry0RkuaEQVg==",
       "dev": true,
       "dependencies": {
         "@babel/parser": "^7.9.4",
+        "@jsdoc/salty": "^0.2.1",
         "@types/markdown-it": "^12.2.3",
         "bluebird": "^3.7.2",
         "catharsis": "^0.9.0",
@@ -6128,7 +6195,6 @@
         "mkdirp": "^1.0.4",
         "requizzle": "^0.2.3",
         "strip-json-comments": "^3.1.0",
-        "taffydb": "2.6.2",
         "underscore": "~1.13.2"
       },
       "bin": {
@@ -6178,9 +6244,9 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "20.0.1",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.1.tgz",
-      "integrity": "sha512-pksjj7Rqoa+wdpkKcLzQRHhJCEE42qQhl/xLMUKHgoSejaKOdaXEAnqs6uDNwMl/fciHTzKeR8Wm8cw7N+g98A==",
+      "version": "20.0.2",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.2.tgz",
+      "integrity": "sha512-AHWa+QO/cgRg4N+DsmHg1Y7xnz+8KU3EflM0LVDTdmrYOc1WWTSkOjtpUveQH+1Bqd5rtcVnb/DuxV/UjDO4rA==",
       "dependencies": {
         "abab": "^2.0.6",
         "acorn": "^8.8.0",
@@ -6824,9 +6890,12 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/minipass": {
       "version": "3.3.4",
@@ -6993,9 +7062,9 @@
       "dev": true
     },
     "node_modules/node-abi": {
-      "version": "3.26.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.26.0.tgz",
-      "integrity": "sha512-jRVtMFTChbi2i/jqo/i2iP9634KMe+7K1v35mIdj3Mn59i5q27ZYhn+sW6npISM/PQg7HrP2kwtRBMmh5Uvzdg==",
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.28.0.tgz",
+      "integrity": "sha512-fRlDb4I0eLcQeUvGq7IY3xHrSb0c9ummdvDSYWfT9+LKP+3jCKw/tKoqaM7r1BAoiAC6GtwyjaGnOz6B3OtF+A==",
       "dependencies": {
         "semver": "^7.3.5"
       },
@@ -8319,9 +8388,9 @@
       }
     },
     "node_modules/sanitize-html": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.7.2.tgz",
-      "integrity": "sha512-DggSTe7MviO+K4YTCwprG6W1vsG+IIX67yp/QY55yQqKCJYSWzCA1rZbaXzkjoKeL9+jqwm56wD6srYLtUNivg==",
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.7.3.tgz",
+      "integrity": "sha512-jMaHG29ak4miiJ8wgqA1849iInqORgNv7SLfSw9LtfOhEUQ1C0YHKH73R+hgyufBW9ZFeJrb057k9hjlfBCVlw==",
       "dependencies": {
         "deepmerge": "^4.2.2",
         "escape-string-regexp": "^4.0.0",
@@ -9053,12 +9122,6 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
-    "node_modules/taffydb": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/taffydb/-/taffydb-2.6.2.tgz",
-      "integrity": "sha1-fLy2S1oUG2ou/CxdLGe04VCyomg=",
-      "dev": true
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -9893,9 +9956,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.9.0.tgz",
-      "integrity": "sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -10120,6 +10183,19 @@
       "integrity": "sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==",
       "dev": true
     },
+    "@electron/asar": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.2.tgz",
+      "integrity": "sha512-32fMU68x8a6zvxtC1IC/BhPDKTh8rQjdmwEplj3CDpnkcwBzZVN9v/8cK0LJqQ0FOQQVZW8BWZ1S6UU53TYR4w==",
+      "dev": true,
+      "requires": {
+        "@types/glob": "^7.1.1",
+        "chromium-pickle-js": "^0.2.0",
+        "commander": "^5.0.0",
+        "glob": "^7.1.6",
+        "minimatch": "^3.0.4"
+      }
+    },
     "@electron/get": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@electron/get/-/get-1.14.1.tgz",
@@ -10153,6 +10229,60 @@
         }
       }
     },
+    "@electron/notarize": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@electron/notarize/-/notarize-1.2.3.tgz",
+      "integrity": "sha512-9oRzT56rKh5bspk3KpAVF8lPKHYQrBnRwcgiOeR0hdilVEQmszDaAu0IPCPrwwzJN0ugNs0rRboTreHMt/6mBQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "fs-extra": "^9.0.1"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "dev": true,
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        }
+      }
+    },
+    "@electron/osx-sign": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@electron/osx-sign/-/osx-sign-1.0.1.tgz",
+      "integrity": "sha512-WkUcva+qkt809bI6uxxEG/uOWfl8HAw0m8aPijpKmGMIpZ1CWWB808YG6aY3wckUO86xZdmiOsUJTM4keLhY8A==",
+      "dev": true,
+      "requires": {
+        "compare-version": "^0.1.2",
+        "debug": "^4.3.4",
+        "fs-extra": "^10.0.0",
+        "isbinaryfile": "^4.0.8",
+        "minimist": "^1.2.6",
+        "plist": "^3.0.5"
+      }
+    },
     "@electron/remote": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/@electron/remote/-/remote-2.0.8.tgz",
@@ -10539,6 +10669,15 @@
         "regenerator-runtime": "^0.13.3"
       }
     },
+    "@jsdoc/salty": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.1.tgz",
+      "integrity": "sha512-JXwylDNSHa549N9uceDYu8D4GMXwSo3H8CCPYEQqxhhHpxD28+lRl2b3bS/caaPj5w1YD3SWtrficJNTnUjGpg==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
     "@malept/cross-spawn-promise": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-1.1.0.tgz",
@@ -11408,9 +11547,9 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
     "axios": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.2.tgz",
-      "integrity": "sha512-bznQyETwElsXl2RK7HLLwb5GPpOLlycxHCtrpDR/4RqqBzjARaOTo3jz4IgtntWUYee7Ne4S8UHd92VCuzPaWA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
+      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
       "requires": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -12382,9 +12521,9 @@
       }
     },
     "dayjs": {
-      "version": "1.11.5",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
-      "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz",
+      "integrity": "sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ=="
     },
     "dayjs-plugin-utc": {
       "version": "0.1.2",
@@ -12723,9 +12862,9 @@
       }
     },
     "electron-dl": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-3.4.0.tgz",
-      "integrity": "sha512-7Oa4J+bmmm14FcIlPc3XyjVrzOLd3HqiSRO3gjzhaoEW4+8C+6gfG/KQX8GBsoQomNa7d8i1e47xCwx4fDCt7g==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-3.4.1.tgz",
+      "integrity": "sha512-NUrjWTlFW7n/+0ECxQ1AkjikNxdeRDpaprLY7YhmOg6pkFcPHwdEfpkTK+CIhyGMAlZOuto1clB1z5HAwgZcaA==",
       "requires": {
         "ext-name": "^5.0.0",
         "pupa": "^2.0.1",
@@ -12882,93 +13021,19 @@
         "keyboardevents-areequal": "^0.2.1"
       }
     },
-    "electron-notarize": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/electron-notarize/-/electron-notarize-1.1.1.tgz",
-      "integrity": "sha512-kufsnqh86CTX89AYNG3NCPoboqnku/+32RxeJ2+7A4Rbm4bbOx0Nc7XTy3/gAlBfpj9xPAxHfhZLOHgfi6cJVw==",
-      "dev": true,
-      "requires": {
-        "debug": "^4.1.1",
-        "fs-extra": "^9.0.1"
-      },
-      "dependencies": {
-        "fs-extra": {
-          "version": "9.1.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-          "dev": true,
-          "requires": {
-            "at-least-node": "^1.0.0",
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^2.0.0"
-          }
-        },
-        "jsonfile": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6",
-            "universalify": "^2.0.0"
-          }
-        },
-        "universalify": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-          "dev": true
-        }
-      }
-    },
-    "electron-osx-sign": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/electron-osx-sign/-/electron-osx-sign-0.5.0.tgz",
-      "integrity": "sha512-icoRLHzFz/qxzDh/N4Pi2z4yVHurlsCAYQvsCSG7fCedJ4UJXBS6PoQyGH71IfcqKupcKeK7HX/NkyfG+v6vlQ==",
-      "dev": true,
-      "requires": {
-        "bluebird": "^3.5.0",
-        "compare-version": "^0.1.2",
-        "debug": "^2.6.8",
-        "isbinaryfile": "^3.0.2",
-        "minimist": "^1.2.0",
-        "plist": "^3.0.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "isbinaryfile": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-3.0.3.tgz",
-          "integrity": "sha512-8cJBL5tTd2OS0dM4jz07wQd5g0dCCqIhUxPIGtZfa5L6hWlvV5MHTITy/DBAsF+Oe2LS1X3krBUhNwaGUWpWxw==",
-          "dev": true,
-          "requires": {
-            "buffer-alloc": "^1.2.0"
-          }
-        }
-      }
-    },
     "electron-packager": {
-      "version": "16.0.0",
-      "resolved": "https://registry.npmjs.org/electron-packager/-/electron-packager-16.0.0.tgz",
-      "integrity": "sha512-7Ey4UUaHg3FYhA7ktsAvCWP8srp9+iPljGdeJBsNaZBakU6HWhvRC+Pc7LWXGCgAVIN5BQsUwR3xrCbFno91VA==",
+      "version": "17.1.1",
+      "resolved": "https://registry.npmjs.org/electron-packager/-/electron-packager-17.1.1.tgz",
+      "integrity": "sha512-r1NDtlajsq7gf2EXgjRfblCVPquvD2yeg+6XGErOKblvxOpDi0iulZLVhgYDP4AEF1P5/HgbX/vwjlkEv7PEIQ==",
       "dev": true,
       "requires": {
+        "@electron/asar": "^3.2.1",
         "@electron/get": "^2.0.0",
-        "@electron/universal": "^1.2.1",
-        "asar": "^3.1.0",
+        "@electron/notarize": "^1.2.3",
+        "@electron/osx-sign": "^1.0.1",
+        "@electron/universal": "^1.3.2",
         "cross-spawn-windows-exe": "^1.2.0",
         "debug": "^4.0.1",
-        "electron-notarize": "^1.1.1",
-        "electron-osx-sign": "^0.5.0",
         "extract-zip": "^2.0.0",
         "filenamify": "^4.1.0",
         "fs-extra": "^10.1.0",
@@ -13019,6 +13084,51 @@
             }
           }
         },
+        "@electron/universal": {
+          "version": "1.3.3",
+          "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-1.3.3.tgz",
+          "integrity": "sha512-79yc61D5QWaQpia+sLQbIIi5iVoV4y9HtgOTlE0fYT0xoyg+ChwndBl4a0Q7yJfDsqq+/nLEPE655F0bTpDiCg==",
+          "dev": true,
+          "requires": {
+            "@electron/asar": "^3.2.1",
+            "@malept/cross-spawn-promise": "^1.1.0",
+            "debug": "^4.3.1",
+            "dir-compare": "^2.4.0",
+            "fs-extra": "^9.0.1",
+            "minimatch": "^3.0.4",
+            "plist": "^3.0.4"
+          },
+          "dependencies": {
+            "fs-extra": {
+              "version": "9.1.0",
+              "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+              "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+              "dev": true,
+              "requires": {
+                "at-least-node": "^1.0.0",
+                "graceful-fs": "^4.2.0",
+                "jsonfile": "^6.0.1",
+                "universalify": "^2.0.0"
+              }
+            },
+            "jsonfile": {
+              "version": "6.1.0",
+              "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+              "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+              "dev": true,
+              "requires": {
+                "graceful-fs": "^4.1.6",
+                "universalify": "^2.0.0"
+              }
+            },
+            "universalify": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+              "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+              "dev": true
+            }
+          }
+        },
         "@sindresorhus/is": {
           "version": "4.6.0",
           "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -14696,19 +14806,19 @@
       }
     },
     "jasmine": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-4.4.0.tgz",
-      "integrity": "sha512-xrbOyYkkCvgduNw7CKktDtNb+BwwBv/zvQeHpTkbxqQ37AJL5V4sY3jHoMIJPP/hTc3QxLVwOyxc87AqA+kw5g==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-4.5.0.tgz",
+      "integrity": "sha512-9olGRvNZyADIwYL9XBNBst5BTU/YaePzuddK+YRslc7rI9MdTIE4r3xaBKbv2GEmzYYUfMOdTR8/i6JfLZaxSQ==",
       "dev": true,
       "requires": {
         "glob": "^7.1.6",
-        "jasmine-core": "^4.4.0"
+        "jasmine-core": "^4.5.0"
       }
     },
     "jasmine-core": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.4.0.tgz",
-      "integrity": "sha512-+l482uImx5BVd6brJYlaHe2UwfKoZBqQfNp20ZmdNfsjGFTemGfqHLsXjKEW23w9R/m8WYeFc9JmIgjj6dUtAA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.5.0.tgz",
+      "integrity": "sha512-9PMzyvhtocxb3aXJVOPqBDswdgyAeSB81QnLop4npOpbqnheaTEwPc9ZloQeVswugPManznQBjD8kWDTjlnHuw==",
       "dev": true
     },
     "jest-worker": {
@@ -14784,12 +14894,13 @@
       "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
     },
     "jsdoc": {
-      "version": "3.6.11",
-      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-3.6.11.tgz",
-      "integrity": "sha512-8UCU0TYeIYD9KeLzEcAu2q8N/mx9O3phAGl32nmHlE0LpaJL71mMkP4d+QE5zWfNt50qheHtOZ0qoxVrsX5TUg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.0.tgz",
+      "integrity": "sha512-tzTgkklbWKrlaQL2+e3NNgLcZu3NaK2vsHRx7tyHQ+H5jcB9Gx0txSd2eJWlMC/xU1+7LQu4s58Ry0RkuaEQVg==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.9.4",
+        "@jsdoc/salty": "^0.2.1",
         "@types/markdown-it": "^12.2.3",
         "bluebird": "^3.7.2",
         "catharsis": "^0.9.0",
@@ -14802,7 +14913,6 @@
         "mkdirp": "^1.0.4",
         "requizzle": "^0.2.3",
         "strip-json-comments": "^3.1.0",
-        "taffydb": "2.6.2",
         "underscore": "~1.13.2"
       },
       "dependencies": {
@@ -14833,9 +14943,9 @@
       }
     },
     "jsdom": {
-      "version": "20.0.1",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.1.tgz",
-      "integrity": "sha512-pksjj7Rqoa+wdpkKcLzQRHhJCEE42qQhl/xLMUKHgoSejaKOdaXEAnqs6uDNwMl/fciHTzKeR8Wm8cw7N+g98A==",
+      "version": "20.0.2",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.2.tgz",
+      "integrity": "sha512-AHWa+QO/cgRg4N+DsmHg1Y7xnz+8KU3EflM0LVDTdmrYOc1WWTSkOjtpUveQH+1Bqd5rtcVnb/DuxV/UjDO4rA==",
       "requires": {
         "abab": "^2.0.6",
         "acorn": "^8.8.0",
@@ -15343,9 +15453,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
     },
     "minipass": {
       "version": "3.3.4",
@@ -15471,9 +15581,9 @@
       "dev": true
     },
     "node-abi": {
-      "version": "3.26.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.26.0.tgz",
-      "integrity": "sha512-jRVtMFTChbi2i/jqo/i2iP9634KMe+7K1v35mIdj3Mn59i5q27ZYhn+sW6npISM/PQg7HrP2kwtRBMmh5Uvzdg==",
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.28.0.tgz",
+      "integrity": "sha512-fRlDb4I0eLcQeUvGq7IY3xHrSb0c9ummdvDSYWfT9+LKP+3jCKw/tKoqaM7r1BAoiAC6GtwyjaGnOz6B3OtF+A==",
       "requires": {
         "semver": "^7.3.5"
       }
@@ -16515,9 +16625,9 @@
       }
     },
     "sanitize-html": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.7.2.tgz",
-      "integrity": "sha512-DggSTe7MviO+K4YTCwprG6W1vsG+IIX67yp/QY55yQqKCJYSWzCA1rZbaXzkjoKeL9+jqwm56wD6srYLtUNivg==",
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.7.3.tgz",
+      "integrity": "sha512-jMaHG29ak4miiJ8wgqA1849iInqORgNv7SLfSw9LtfOhEUQ1C0YHKH73R+hgyufBW9ZFeJrb057k9hjlfBCVlw==",
       "requires": {
         "deepmerge": "^4.2.2",
         "escape-string-regexp": "^4.0.0",
@@ -17079,12 +17189,6 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
-    "taffydb": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/taffydb/-/taffydb-2.6.2.tgz",
-      "integrity": "sha1-fLy2S1oUG2ou/CxdLGe04VCyomg=",
-      "dev": true
-    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -17709,9 +17813,9 @@
       }
     },
     "ws": {
-      "version": "8.9.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.9.0.tgz",
-      "integrity": "sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
       "requires": {}
     },
     "xhr": {

package.json

@@ -2,7 +2,7 @@
   "name": "trilium",
   "productName": "Trilium Notes",
   "description": "Trilium Notes",
-  "version": "0.56.2",
+  "version": "0.57.3",
   "license": "AGPL-3.0-only",
   "main": "electron.js",
   "bin": {
@@ -31,7 +31,7 @@
     "@excalidraw/excalidraw": "0.12.0",
     "archiver": "5.3.1",
     "async-mutex": "0.4.0",
-    "axios": "1.1.2",
+    "axios": "1.1.3",
     "better-sqlite3": "7.4.5",
     "chokidar": "3.5.3",
     "cls-hooked": "4.2.2",
@@ -39,11 +39,11 @@
     "compression": "1.7.4",
     "cookie-parser": "1.4.6",
     "csurf": "1.11.0",
-    "dayjs": "1.11.5",
+    "dayjs": "1.11.6",
     "dayjs-plugin-utc": "^0.1.2",
     "ejs": "3.1.8",
     "electron-debug": "3.2.0",
-    "electron-dl": "3.4.0",
+    "electron-dl": "3.4.1",
     "electron-window-state": "5.0.3",
     "express": "4.18.2",
     "express-partial-content": "1.0.2",
@@ -61,10 +61,10 @@
     "is-svg": "4.3.2",
     "jimp": "0.16.2",
     "joplin-turndown-plugin-gfm": "1.0.12",
-    "jsdom": "20.0.1",
+    "jsdom": "20.0.2",
     "mime-types": "2.1.35",
     "multer": "1.4.5-lts.1",
-    "node-abi": "3.26.0",
+    "node-abi": "3.28.0",
     "normalize-strings": "1.1.1",
     "open": "8.4.0",
     "rand-token": "1.0.1",
@@ -74,7 +74,7 @@
     "rimraf": "3.0.2",
     "safe-compare": "1.1.4",
     "sanitize-filename": "1.6.3",
-    "sanitize-html": "2.7.2",
+    "sanitize-html": "2.7.3",
     "sax": "1.2.4",
     "semver": "7.3.8",
     "serve-favicon": "2.5.0",
@@ -84,18 +84,18 @@
     "tmp": "0.2.1",
     "turndown": "7.1.1",
     "unescape": "1.0.1",
-    "ws": "8.9.0",
+    "ws": "8.11.0",
     "yauzl": "2.10.0"
   },
   "devDependencies": {
     "cross-env": "7.0.3",
     "electron": "16.2.8",
     "electron-builder": "23.6.0",
-    "electron-packager": "16.0.0",
+    "electron-packager": "17.1.1",
     "electron-rebuild": "3.2.9",
     "esm": "3.2.25",
-    "jasmine": "4.4.0",
-    "jsdoc": "3.6.11",
+    "jasmine": "4.5.0",
+    "jsdoc": "4.0.0",
     "lorem-ipsum": "2.0.8",
     "rcedit": "3.0.1",
     "webpack": "5.74.0",

spec/search/search.spec.js

@@ -4,7 +4,7 @@ const Branch = require('../../src/becca/entities/branch');
 const SearchContext = require('../../src/services/search/search_context');
 const dateUtils = require('../../src/services/date_utils');
 const becca = require('../../src/becca/becca');
-const {NoteBuilder, findNoteByTitle, note} = require('./note_cache_mocking');
+const {NoteBuilder, findNoteByTitle, note} = require('./becca_mocking.js');
 
 describe("Search", () => {
     let rootNote;

spec/search/value_extractor.spec.js

@@ -1,4 +1,4 @@
-const {note} = require('./note_cache_mocking');
+const {note} = require('./becca_mocking.js');
 const ValueExtractor = require('../../src/services/search/value_extractor');
 const becca = require('../../src/becca/becca');
 const SearchContext = require("../../src/services/search/search_context");

src/app.js

@@ -10,6 +10,7 @@ const FileStore = require('session-file-store')(session);
 const sessionSecret = require('./services/session_secret');
 const dataDir = require('./services/data_dir');
 const utils = require('./services/utils');
+const assetPath = require('./services/asset_path');
 require('./services/handlers');
 require('./becca/becca_loader');
 
@@ -34,14 +35,25 @@ app.use(express.json({limit: '500mb'}));
 app.use(express.raw({limit: '500mb'}));
 app.use(express.urlencoded({extended: false}));
 app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
-app.use('/libraries', express.static(path.join(__dirname, '..', 'libraries')));
+app.use(express.static(path.join(__dirname, 'public/root')));
+app.use(`/${assetPath}/app`, express.static(path.join(__dirname, 'public/app')));
+app.use(`/${assetPath}/app-dist`, express.static(path.join(__dirname, 'public/app-dist')));
+app.use(`/${assetPath}/fonts`, express.static(path.join(__dirname, 'public/fonts')));
+app.use(`/assets/vX/fonts`, express.static(path.join(__dirname, 'public/fonts')));
+app.use(`/${assetPath}/stylesheets`, express.static(path.join(__dirname, 'public/stylesheets')));
+app.use(`/assets/vX/stylesheets`, express.static(path.join(__dirname, 'public/stylesheets')));
+app.use(`/${assetPath}/libraries`, express.static(path.join(__dirname, '..', 'libraries')));
+app.use(`/assets/vX/libraries`, express.static(path.join(__dirname, '..', 'libraries')));
 // excalidraw-view mode in shared notes
-app.use('/node_modules/react/umd/react.production.min.js', express.static(path.join(__dirname, '..', 'node_modules/react/umd/react.production.min.js')));
-app.use('/node_modules/react-dom/umd/react-dom.production.min.js', express.static(path.join(__dirname, '..', 'node_modules/react-dom/umd/react-dom.production.min.js')));
+app.use(`/${assetPath}/node_modules/react/umd/react.production.min.js`, express.static(path.join(__dirname, '..', 'node_modules/react/umd/react.production.min.js')));
+app.use(`/${assetPath}/node_modules/react-dom/umd/react-dom.production.min.js`, express.static(path.join(__dirname, '..', 'node_modules/react-dom/umd/react-dom.production.min.js')));
 // expose whole dist folder since complete assets are needed in edit and share
-app.use('/node_modules/@excalidraw/excalidraw/dist/', express.static(path.join(__dirname, '..', 'node_modules/@excalidraw/excalidraw/dist/')));
-app.use('/images', express.static(path.join(__dirname, '..', 'images')));
+app.use(`/node_modules/@excalidraw/excalidraw/dist/`, express.static(path.join(__dirname, '..', 'node_modules/@excalidraw/excalidraw/dist/')));
+app.use(`/${assetPath}/node_modules/@excalidraw/excalidraw/dist/`, express.static(path.join(__dirname, '..', 'node_modules/@excalidraw/excalidraw/dist/')));
+app.use(`/${assetPath}/images`, express.static(path.join(__dirname, '..', 'images')));
+app.use(`/assets/vX/images`, express.static(path.join(__dirname, '..', 'images')));
+app.use(`/manifest.webmanifest`, express.static(path.join(__dirname, 'public/manifest.webmanifest')));
+app.use(`/robots.txt`, express.static(path.join(__dirname, 'public/robots.txt')));
 const sessionParser = session({
     secret: sessionSecret,
     resave: false, // true forces the session to be saved back to the session store, even if the session was never modified during the request.

src/becca/entities/note.js

@@ -10,7 +10,8 @@ const AbstractEntity = require("./abstract_entity");
 const NoteRevision = require("./note_revision");
 const TaskContext = require("../../services/task_context");
 const dayjs = require("dayjs");
-const utc = require('dayjs/plugin/utc')
+const utc = require('dayjs/plugin/utc');
+const searchService = require("../../services/search/services/search.js");
 dayjs.extend(utc)
 
 const LABEL = 'label';
@@ -839,30 +840,94 @@ class Note extends AbstractEntity {
         return Array.from(set);
     }
 
-    /** @returns {Note[]} */
-    getSubtreeNotes(includeArchived = true) {
-        const noteSet = new Set();
+    /** @return {Note[]} */
+    getSearchResultNotes() {
+        if (this.type !== 'search') {
+            return [];
+        }
+
+        try {
+            const searchService = require("../../services/search/services/search");
+            const {searchResultNoteIds} = searchService.searchFromNote(this);
+
+            const becca = this.becca;
+            return searchResultNoteIds
+                .map(resultNoteId => becca.notes[resultNoteId])
+                .filter(note => !!note);
+        }
+        catch (e) {
+            log.error(`Could not resolve search note ${this.noteId}: ${e.message}`);
+            return [];
+        }
+    }
+
+    /**
+     * @returns {{notes: Note[], relationships: Array.<{parentNoteId: string, childNoteId: string}>}}
+     */
+    getSubtree({includeArchived = true, resolveSearch = false} = {}) {
+        const noteSet = new Set();
+        const relationships = []; // list of tuples parentNoteId -> childNoteId
+
+        function resolveSearchNote(searchNote) {
+            try {
+                for (const resultNote of searchNote.getSearchResultNotes()) {
+                    addSubtreeNotesInner(resultNote, searchNote);
+                }
+            }
+            catch (e) {
+                log.error(`Could not resolve search note ${searchNote?.noteId}: ${e.message}`);
+            }
+        }
+
+        function addSubtreeNotesInner(note, parentNote = null) {
+            // share can be removed after 0.57 since it will be put under hidden
+            if (note.noteId === 'hidden' || note.noteId === 'share') {
+                return;
+            }
+
+            if (parentNote) {
+                // this needs to happen first before noteSet check to include all clone relationships
+                relationships.push({
+                    parentNoteId: parentNote.noteId,
+                    childNoteId: note.noteId
+                });
+            }
+
+            if (noteSet.has(note)) {
+                return;
+            }
 
-        function addSubtreeNotesInner(note) {
             if (!includeArchived && note.isArchived) {
                 return;
             }
 
             noteSet.add(note);
 
-            for (const childNote of note.children) {
-                addSubtreeNotesInner(childNote);
+            if (note.type === 'search') {
+                if (resolveSearch) {
+                    resolveSearchNote(note);
+                }
+            }
+            else {
+                for (const childNote of note.children) {
+                    addSubtreeNotesInner(childNote, note);
+                }
             }
         }
 
         addSubtreeNotesInner(this);
 
-        return Array.from(noteSet);
+        return {
+            notes: Array.from(noteSet),
+            relationships
+        };
     }
 
     /** @returns {String[]} */
-    getSubtreeNoteIds(includeArchived = true) {
-        return this.getSubtreeNotes(includeArchived).map(note => note.noteId);
+    getSubtreeNoteIds({includeArchived = true, resolveSearch = false} = {}) {
+        return this.getSubtree({includeArchived, resolveSearch})
+            .notes
+            .map(note => note.noteId);
     }
 
     getDescendantNoteIds() {

src/public/app/layouts/desktop_layout.js

@@ -81,6 +81,18 @@ import MermaidExportButton from "../widgets/floating_buttons/mermaid_export_butt
 import EditableCodeButtonsWidget from "../widgets/type_widgets/editable_code_buttons.js";
 import ApiLogWidget from "../widgets/api_log.js";
 import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
+import AppearanceOptions from "../widgets/dialogs/options/appearance.js";
+import KeyboardShortcutsOptions from "../widgets/dialogs/options/shortcuts.js";
+import TextNotesOptions from "../widgets/dialogs/options/text_notes.js";
+import CodeNotesOptions from "../widgets/dialogs/options/code_notes.js";
+import ImageOptions from "../widgets/dialogs/options/images.js";
+import SpellcheckOptions from "../widgets/dialogs/options/spellcheck.js";
+import PasswordOptions from "../widgets/dialogs/options/password.js";
+import EtapiOptions from "../widgets/dialogs/options/etapi.js";
+import BackupOptions from "../widgets/dialogs/options/backup.js";
+import SyncOptions from "../widgets/dialogs/options/sync.js";
+import OtherOptions from "../widgets/dialogs/options/other.js";
+import AdvancedOptions from "../widgets/dialogs/options/advanced.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -149,6 +161,7 @@ export default class DesktopLayout {
                             new NoteWrapperWidget()
                                 .child(new FlexContainer('row').class('title-row')
                                     .css("height", "50px")
+                                    .css("min-height", "50px")
                                     .css('align-items', "center")
                                     .cssBlock('.title-row > * { margin: 5px; }')
                                     .child(new NoteIconWidget())
@@ -240,6 +253,19 @@ export default class DesktopLayout {
             .child(new InfoDialog())
             .child(new ConfirmDialog())
             .child(new PromptDialog())
-            .child(new OptionsDialog());
+            .child(new OptionsDialog()
+                .child(new AppearanceOptions())
+                .child(new KeyboardShortcutsOptions())
+                .child(new TextNotesOptions())
+                .child(new CodeNotesOptions())
+                .child(new ImageOptions())
+                .child(new SpellcheckOptions())
+                .child(new PasswordOptions())
+                .child(new EtapiOptions())
+                .child(new BackupOptions())
+                .child(new SyncOptions())
+                .child(new OtherOptions())
+                .child(new AdvancedOptions())
+            );
     }
 }

src/public/app/services/context_menu.js

@@ -76,6 +76,10 @@ class ContextMenu {
 
     addItems($parent, items) {
         for (const item of items) {
+            if (!item) {
+                continue;
+            }
+
             if (item.title === '----') {
                 $parent.append($("<div>").addClass("dropdown-divider"));
             } else {

src/public/app/services/entrypoints.js

@@ -7,6 +7,7 @@ import Component from "../widgets/component.js";
 import toastService from "./toast.js";
 import ws from "./ws.js";
 import bundleService from "./bundle.js";
+import froca from "./froca.js";
 
 export default class Entrypoints extends Component {
     constructor() {
@@ -46,14 +47,15 @@ export default class Entrypoints extends Component {
         appContext.triggerEvent('focusAndSelectTitle', {isNewNote: true});
     }
 
-    async toggleNoteHoistingCommand() {
-        const noteContext = appContext.tabManager.getActiveContext();
+    async toggleNoteHoistingCommand({noteId = appContext.tabManager.getActiveContextNoteId()}) {
+        const noteToHoist = await froca.getNote(noteId);
+        const activeNoteContext = appContext.tabManager.getActiveContext();
 
-        if (noteContext.note.noteId === noteContext.hoistedNoteId) {
-            await noteContext.unhoist();
+        if (noteToHoist.noteId === activeNoteContext.hoistedNoteId) {
+            await activeNoteContext.unhoist();
         }
-        else if (noteContext.note.type !== 'search') {
-            await noteContext.setHoistedNoteId(noteContext.note.noteId);
+        else if (noteToHoist.type !== 'search') {
+            await activeNoteContext.setHoistedNoteId(noteId);
         }
     }
 
@@ -199,4 +201,12 @@ export default class Entrypoints extends Component {
     activeContextChangedEvent() {
         this.hideAllTooltips();
     }
+
+    async forceSaveNoteRevisionCommand() {
+        const noteId = appContext.tabManager.getActiveContextNoteId();
+
+        await server.post(`notes/${noteId}/revision`);
+
+        toastService.showMessage("Note revision has been created.");
+    }
 }

src/public/app/services/frontend_script_api.js

@@ -131,7 +131,7 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, $contain
      */
 
     /**
-     * Adds new button the the plugin area.
+     * Adds new button to the plugin area.
      *
      * @param {ToolbarButtonOptions} opts
      */
@@ -353,7 +353,7 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, $contain
      * @param {boolean} [params.showTooltip=true] - enable/disable tooltip on the link
      * @param {boolean} [params.showNotePath=false] - show also whole note's path as part of the link
      * @param {boolean} [params.showNoteIcon=false] - show also note icon before the title
-     * @param {string} [title=] - custom link tile with note's title as default
+     * @param {string} [params.title=] - custom link tile with note's title as default
      */
     this.createNoteLink = linkService.createNoteLink;
 

src/public/app/services/glob.js

@@ -64,7 +64,7 @@ function setupGlobs() {
     };
 
     for (const appCssNoteId of glob.appCssNoteIds || []) {
-        libraryLoader.requireCss(`api/notes/download/${appCssNoteId}`);
+        libraryLoader.requireCss(`api/notes/download/${appCssNoteId}`, false);
     }
 
     utils.initHelpButtons($(window));

src/public/app/services/library_loader.js

@@ -86,6 +86,8 @@ async function requireLibrary(library) {
 const loadedScriptPromises = {};
 
 async function requireScript(url) {
+    url = window.glob.assetPath + "/" + url;
+
     if (!loadedScriptPromises[url]) {
         loadedScriptPromises[url] = $.ajax({
             url: url,
@@ -97,12 +99,16 @@ async function requireScript(url) {
     await loadedScriptPromises[url];
 }
 
-async function requireCss(url) {
+async function requireCss(url, prependAssetPath = true) {
     const cssLinks = Array
         .from(document.querySelectorAll('link'))
         .map(el => el.href);
 
     if (!cssLinks.some(l => l.endsWith(url))) {
+        if (prependAssetPath) {
+            url = window.glob.assetPath + "/" + url;
+        }
+
         $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', url));
     }
 }

src/public/app/services/link.js

@@ -17,6 +17,12 @@ async function createNoteLink(notePath, options = {}) {
         return $("<span>").text("[missing note]");
     }
 
+    if (!notePath.startsWith("root")) {
+        // all note paths should start with "root/" (except for "root" itself)
+        // used e.g. to find internal links
+        notePath = "root/" + notePath;
+    }
+
     let noteTitle = options.title;
     const showTooltip = options.showTooltip === undefined ? true : options.showTooltip;
     const showNotePath = options.showNotePath === undefined ? false : options.showNotePath;
@@ -97,8 +103,10 @@ function goToLink(e) {
 
     const notePath = getNotePathFromLink($link);
 
+    const ctrlKey = (!utils.isMac() && e.ctrlKey) || (utils.isMac() && e.metaKey);
+
     if (notePath) {
-        if ((e.which === 1 && e.ctrlKey) || e.which === 2) {
+        if ((e.which === 1 && ctrlKey) || e.which === 2) {
             appContext.tabManager.openTabWithNoteWithHoisting(notePath);
         }
         else if (e.which === 1) {
@@ -116,7 +124,7 @@ function goToLink(e) {
         }
     }
     else {
-        if ((e.which === 1 && e.ctrlKey) || e.which === 2
+        if ((e.which === 1 && ctrlKey) || e.which === 2
             || $link.hasClass("ck-link-actions__preview") // within edit link dialog single click suffices
             || $link.closest("[contenteditable]").length === 0 // outside of CKEditor single click suffices
         ) {

src/public/app/services/note_content_renderer.js

@@ -33,26 +33,7 @@ async function getRenderedContent(note, options = {}) {
             }
         }
         else {
-            $renderedContent.css("padding", "10px");
-            $renderedContent.addClass("text-with-ellipsis");
-
-            let childNoteIds = note.getChildNoteIds();
-
-            if (childNoteIds.length > 10) {
-                childNoteIds = childNoteIds.slice(0, 10);
-            }
-
-            // just load the first 10 child notes
-            const childNotes = await froca.getNotes(childNoteIds);
-
-            for (const childNote of childNotes) {
-                $renderedContent.append(await linkService.createNoteLink(`${note.noteId}/${childNote.noteId}`, {
-                    showTooltip: false,
-                    showNoteIcon: true
-                }));
-
-                $renderedContent.append("<br>");
-            }
+            await renderChildrenList($renderedContent, note);
         }
     }
     else if (type === 'code') {
@@ -164,6 +145,9 @@ async function getRenderedContent(note, options = {}) {
             $renderedContent.append($("<div>").text("Error parsing content. Please check console.error() for more details."));
         }
     }
+    else if (type === 'book') {
+        // nothing, book doesn't have its own content
+    }
     else if (!options.tooltip && type === 'protected-session') {
         const $button = $(`<button class="btn btn-sm"><span class="bx bx-log-in"></span> Enter protected session</button>`)
             .on('click', protectedSessionService.enterProtectedSession);
@@ -187,6 +171,29 @@ async function getRenderedContent(note, options = {}) {
     };
 }
 
+async function renderChildrenList($renderedContent, note) {
+    $renderedContent.css("padding", "10px");
+    $renderedContent.addClass("text-with-ellipsis");
+
+    let childNoteIds = note.getChildNoteIds();
+
+    if (childNoteIds.length > 10) {
+        childNoteIds = childNoteIds.slice(0, 10);
+    }
+
+    // just load the first 10 child notes
+    const childNotes = await froca.getNotes(childNoteIds);
+
+    for (const childNote of childNotes) {
+        $renderedContent.append(await linkService.createNoteLink(`${note.noteId}/${childNote.noteId}`, {
+            showTooltip: false,
+            showNoteIcon: true
+        }));
+
+        $renderedContent.append("<br>");
+    }
+}
+
 function trim(text, doTrim) {
     if (!doTrim) {
         return text;

src/public/app/services/tree_context_menu.js

@@ -133,6 +133,7 @@ class TreeContextMenu {
             this.treeWidget.triggerCommand(command, {
                 node: this.node,
                 notePath: notePath,
+                noteId: this.node.data.noteId,
                 selectedOrActiveBranchIds: this.treeWidget.getSelectedOrActiveBranchIds(this.node),
                 selectedOrActiveNoteIds: this.treeWidget.getSelectedOrActiveNoteIds(this.node)
             });

src/public/app/services/utils.js

@@ -230,7 +230,19 @@ function focusSavedElement() {
         return;
     }
 
-    $lastFocusedElement.focus();
+    if ($lastFocusedElement.hasClass("ck")) {
+        // must handle CKEditor separately because of this bug: https://github.com/ckeditor/ckeditor5/issues/607
+        // the bug manifests itself in resetting the cursor position to the first character - jumping above
+
+        const editor = $lastFocusedElement
+            .closest('.ck-editor__editable')
+            .prop('ckeditorInstance');
+
+        editor.editing.view.focus();
+    } else {
+        $lastFocusedElement.focus();
+    }
+
     $lastFocusedElement = null;
 }
 
@@ -241,7 +253,7 @@ async function openDialog($dialog, closeActDialog = true) {
     }
 
     saveFocusedElement();
--
+
     $dialog.modal();
 
     $dialog.on('hidden.bs.modal', () => {

src/public/app/widgets/attribute_widgets/attribute_detail.js

@@ -223,6 +223,7 @@ const ATTR_HELP = {
         "shareRaw": "note will be served in its raw format, without HTML wrapper",
         "shareDisallowRobotIndexing": `will forbid robot indexing of this note via <code>X-Robots-Tag: noindex</code> header`,
         "shareCredentials": "require credentials to access this shared note. Value is expected to be in format 'username:password'. Don't forget to make this inheritable to apply to child-notes/images.",
+        "shareIndex": "note with this this label will list all roots of shared notes",
         "displayRelations": "comma delimited names of relations which should be displayed. All other ones will be hidden.",
         "hideRelations": "comma delimited names of relations which should be hidden. All other ones will be displayed.",
         "titleTemplate": `default title of notes created as children of this note. The value is evaluated as JavaScript string 

src/public/app/widgets/buttons/global_menu.js

@@ -16,7 +16,7 @@ const TPL = `
     }
     
     .global-menu-button {
-        background-image: url("images/icon-black.png");
+        background-image: url("${window.glob.assetPath}/images/icon-black.png");
         background-repeat: no-repeat;
         background-position: 50% 45%;
         width: 100%;
@@ -26,7 +26,7 @@ const TPL = `
     }
     
     .global-menu-button:hover {
-        background-image: url("images/icon-color.png");
+        background-image: url("${window.glob.assetPath}/images/icon-color.png");
     }
     
     .global-menu-button-update-available {

src/public/app/widgets/dialogs/delete_notes.js

@@ -20,7 +20,7 @@ const TPL = `
                     <label>
                         <input class="delete-all-clones" value="1" type="checkbox">
 
-                        delete also all clones
+                        delete also all clones (can be undone in recent changes)
                     </label>
                 </div>
 
@@ -28,7 +28,7 @@ const TPL = `
                     <label title="Normal (soft) deletion only marks the notes as deleted and they can be undeleted (in recent changes dialog) within a period of time. Checking this option will erase the notes immediatelly and it won't be possible to undelete the notes.">
                         <input class="erase-notes" value="1" type="checkbox">
 
-                        erase notes permanently (can't be undone). This will force application reload.
+                        erase notes permanently (can't be undone), including all clones. This will force application reload.
                     </label>
                 </div>
 

src/public/app/widgets/dialogs/options.js

@@ -15,6 +15,20 @@ const TPL = `
             overflow-y: auto;
             max-height: 85vh;
         }
+
+        .options-dialog .options-section:first-of-type h4 {
+            margin-top: 0;
+        }
+        
+        .options-dialog .options-section h4 {
+            margin-top: 15px;
+            margin-bottom: 15px;
+        }
+        
+        .options-dialog .options-section h5 {
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
     </style>
 
     <div class="modal-dialog modal-lg" style="min-width: 1000px;" role="document">
@@ -27,51 +41,9 @@ const TPL = `
             </div>
             <div class="modal-body">
                 <div style="display: flex">
-                    <ul class="nav nav-tabs flex-column">
-                        <li class="nav-item">
-                            <a class="nav-link active" data-toggle="tab" href="#options-appearance">Appearance</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#options-shortcuts">Shortcuts</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#options-text-notes">Text notes</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#options-code-notes">Code notes</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#options-password">Password</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#options-etapi">ETAPI</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#options-backup">Backup</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#options-sync-setup">Sync</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#options-other">Other</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" data-toggle="tab" href="#options-advanced">Advanced</a>
-                        </li>
-                    </ul>
+                    <ul class="nav nav-tabs flex-column"></ul>
                     <br/>
-                    <div class="tab-content">
-                        <div id="options-appearance" class="tab-pane active"></div>
-                        <div id="options-shortcuts" class="tab-pane"></div>
-                        <div id="options-text-notes" class="tab-pane"></div>
-                        <div id="options-code-notes" class="tab-pane"></div>
-                        <div id="options-password" class="tab-pane"></div>
-                        <div id="options-etapi" class="tab-pane"></div>
-                        <div id="options-backup" class="tab-pane"></div>
-                        <div id="options-sync-setup" class="tab-pane"></div>
-                        <div id="options-other" class="tab-pane"></div>
-                        <div id="options-advanced" class="tab-pane"></div>
-                    </div>
+                    <div class="tab-content"></div>
                 </div>
             </div>
         </div>
@@ -82,34 +54,51 @@ const TPL = `
 export default class OptionsDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
+        this.$navTabs = this.$widget.find(".nav-tabs");
+        this.$tabContent = this.$widget.find(".tab-content");
+
+        for (const child of this.children) {
+            this.$navTabs.append(
+                $('<li class="nav-item">')
+                    .append(
+                        $('<a class="nav-link" data-toggle="tab">')
+                            .attr("href", '#options-' + child.constructor.name)
+                            .text(child.tabTitle)
+                    )
+            );
+
+            this.$tabContent.append(
+                $('<div class="tab-pane">')
+                    .attr("id", "options-" + child.constructor.name)
+            );
+        }
     }
 
     async showOptionsEvent({openTab}) {
-        const options = await server.get('options');
+        const optionPromise = server.get('options');
 
-        utils.openDialog(this.$widget);
+        for (const child of this.children) {
+            child.lazyRender();
 
-        (await Promise.all([
-            import('./options/appearance.js'),
-            import('./options/shortcuts.js'),
-            import('./options/text_notes.js'),
-            import('./options/code_notes.js'),
-            import('./options/password.js'),
-            import('./options/etapi.js'),
-            import('./options/backup.js'),
-            import('./options/sync.js'),
-            import('./options/other.js'),
-            import('./options/advanced.js')
-        ]))
-            .map(m => new m.default)
-            .forEach(tab => {
-                if (tab.optionsLoaded) {
-                    tab.optionsLoaded(options)
-                }
-            });
-
-        if (openTab) {
-            $(`.nav-link[href='#options-${openTab}']`).trigger("click");
+            this.$widget.find("#options-" + child.constructor.name)
+                .empty()
+                .append(child.$widget);
         }
+
+        const options = await optionPromise;
+
+        for (const child of this.children) {
+            if (child.optionsLoaded) {
+                child.optionsLoaded(options)
+            }
+        }
+
+        await utils.openDialog(this.$widget);
+
+        if (!openTab) {
+            openTab = "AppearanceOptions";
+        }
+
+        this.$widget.find(`.nav-link[href='#options-${openTab}']`).trigger("click");
     }
 }

src/public/app/widgets/dialogs/options/advanced.js

@@ -1,62 +1,69 @@
 import server from "../../../services/server.js";
 import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
 
 const TPL = `
-<h4 style="margin-top: 0;">Sync</h4>
-<button id="force-full-sync-button" class="btn">Force full sync</button>
-
-<br/>
-<br/>
-
-<button id="fill-entity-changes-button" class="btn">Fill entity changes records</button>
-
-<br/>
-<br/>
-
-<h4>Database integrity check</h4>
-
-<p>This will check that the database is not corrupted on the SQLite level. It might take some time, depending on the DB size.</p>
-
-<button id="check-integrity-button" class="btn">Check database integrity</button><br/><br/>
-
-<h4>Consistency checks</h4>
-
-<button id="find-and-fix-consistency-issues-button" class="btn">Find and fix consistency issues</button><br/><br/>
-
-<h4>Anonymize database</h4>
-
-<h5>Full anonymization</h5>
-
-<p>This action will create a new copy of the database and anonymize it (remove all note content and leave only structure and some non-sensitive metadata)
-    for sharing online for debugging purposes without fear of leaking your personal data.</p>
-
-<button id="anonymize-full-button" class="btn">Save fully anonymized database</button><br/><br/>
+<div class="options-section">
+    <h4>Sync</h4>
+    <button id="force-full-sync-button" class="btn">Force full sync</button> 
     
-<h5>Light anonymization</h5>
+    <button id="fill-entity-changes-button" class="btn">Fill entity changes records</button>
+</div>
 
-<p>This action will create a new copy of the database and do a light anonymization on it - specifically only content of all notes will be removed, but titles and attributes will remain. Additionally, custom JS frontend/backend script notes and custom widgets will remain. This provides more context to debug the issues.</p>
+<div class="options-section">
+    <h4>Database integrity check</h4>
+    
+    <p>This will check that the database is not corrupted on the SQLite level. It might take some time, depending on the DB size.</p>
+    
+    <button id="check-integrity-button" class="btn">Check database integrity</button>
+</div>
 
-<p>You can decide yourself if you want to provide fully or lightly anonymized database. Even fully anonymized DB is very useful, however in some cases lightly anonymized database can speed up the process of bug identification and fixing.</p>
+<div class="options-section">
+    <h4>Consistency checks</h4>
+    
+    <button id="find-and-fix-consistency-issues-button" class="btn">Find and fix consistency issues</button>
+</div>
 
-<button id="anonymize-light-button" class="btn">Save lightly anonymized database</button><br/><br/>
+<div class="options-section">
+    <h4>Anonymize database</h4>
+    
+    <h5>Full anonymization</h5>
+    
+    <p>This action will create a new copy of the database and anonymize it (remove all note content and leave only structure and some non-sensitive metadata)
+        for sharing online for debugging purposes without fear of leaking your personal data.</p>
+    
+    <button id="anonymize-full-button" class="btn">Save fully anonymized database</button>
 
-<h4>Vacuum database</h4>
+    <h5>Light anonymization</h5>
+    
+    <p>This action will create a new copy of the database and do a light anonymization on it - specifically only content of all notes will be removed, but titles and attributes will remain. Additionally, custom JS frontend/backend script notes and custom widgets will remain. This provides more context to debug the issues.</p>
+    
+    <p>You can decide yourself if you want to provide fully or lightly anonymized database. Even fully anonymized DB is very useful, however in some cases lightly anonymized database can speed up the process of bug identification and fixing.</p>
+    
+    <button id="anonymize-light-button" class="btn">Save lightly anonymized database</button>
+</div>
 
-<p>This will rebuild the database which will typically result in a smaller database file. No data will be actually changed.</p>
+<div class="options-section">
+    <h4>Vacuum database</h4>
+    
+    <p>This will rebuild the database which will typically result in a smaller database file. No data will be actually changed.</p>
+    
+    <button id="vacuum-database-button" class="btn">Vacuum database</button>
+</div>`;
 
-<button id="vacuum-database-button" class="btn">Vacuum database</button>`;
+export default class AdvancedOptions extends OptionsTab {
+    get tabTitle() { return "Advanced" }
 
-export default class AdvancedOptions {
-    constructor() {
-        $("#options-advanced").html(TPL);
+    lazyRender() {
+        this.$widget = $(TPL);
 
-        this.$forceFullSyncButton = $("#force-full-sync-button");
-        this.$fillEntityChangesButton = $("#fill-entity-changes-button");
-        this.$anonymizeFullButton = $("#anonymize-full-button");
-        this.$anonymizeLightButton = $("#anonymize-light-button");
-        this.$vacuumDatabaseButton = $("#vacuum-database-button");
-        this.$findAndFixConsistencyIssuesButton = $("#find-and-fix-consistency-issues-button");
-        this.$checkIntegrityButton = $("#check-integrity-button");
+        this.$forceFullSyncButton = this.$widget.find("#force-full-sync-button");
+        this.$fillEntityChangesButton = this.$widget.find("#fill-entity-changes-button");
+        this.$anonymizeFullButton = this.$widget.find("#anonymize-full-button");
+        this.$anonymizeLightButton = this.$widget.find("#anonymize-light-button");
+        this.$vacuumDatabaseButton = this.$widget.find("#vacuum-database-button");
+        this.$findAndFixConsistencyIssuesButton = this.$widget.find("#find-and-fix-consistency-issues-button");
+        this.$checkIntegrityButton = this.$widget.find("#check-integrity-button");
 
         this.$forceFullSyncButton.on('click', async () => {
             await server.post('sync/force-full-sync');

src/public/app/widgets/dialogs/options/appearance.js

@@ -1,6 +1,7 @@
 import server from "../../../services/server.js";
 import utils from "../../../services/utils.js";
 import appContext from "../../../services/app_context.js";
+import OptionsTab from "./options_tab.js";
 
 const FONT_FAMILIES = [
     { value: "theme", label: "Theme defined" },
@@ -30,17 +31,25 @@ const FONT_FAMILIES = [
 const TPL = `
 <p><strong>Settings on this options tab are saved automatically after each change.</strong></p>
 
-<form>
+<style>
+    .options-section .row {
+        /* rows otherwise overflow horizontally and force a scrollbar */
+        margin-left: auto;
+        margin-right: auto;
+    }
+</style>
+
+<div class="options-section">
     <div class="form-group row">
         <div class="col-6">
             <label for="zoom-factor-select">Zoom factor (desktop build only)</label>
-
+    
             <input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
         </div>
         
         <div class="col-6">
             <label for="native-title-bar-select">Native title bar (requires app restart)</label>
-
+    
             <select class="form-control" id="native-title-bar-select">
                 <option value="show">enabled</option>
                 <option value="hide">disabled</option>
@@ -49,9 +58,11 @@ const TPL = `
     </div>
         
     <p>Zooming can be controlled with CTRL+- and CTRL+= shortcuts as well.</p>
+</div>
 
+<div class="options-section">
     <h4>Theme</h4>
-
+    
     <div class="form-group row">
         <div class="col-6">
             <label for="theme-select">Theme</label>
@@ -63,104 +74,106 @@ const TPL = `
             <input type="checkbox" class="form-control" id="override-theme-fonts">
         </div>
     </div>
+<div class="options-section">
 
-    <div id="overriden-font-settings">
-        <h4>Fonts</h4>
-        
-        <h5>Main font</h5>
-        
-        <div class="form-group row">
-            <div class="col-6">
-                <label for="main-font-family">Font family</label>
-                <select class="form-control" id="main-font-family"></select>
-            </div>
-        
-            <div class="col-6">
-                <label for="main-font-size">Size</label>
+<div id="overriden-font-settings" class="options-section">
+    <h4>Fonts</h4>
     
-                <div class="input-group">
-                    <input type="number" class="form-control" id="main-font-size" min="50" max="200" step="10"/>
-                    <div class="input-group-append">
-                        <span class="input-group-text">%</span>
-                    </div>
+    <h5>Main font</h5>
+    
+    <div class="form-group row">
+        <div class="col-6">
+            <label for="main-font-family">Font family</label>
+            <select class="form-control" id="main-font-family"></select>
+        </div>
+    
+        <div class="col-6">
+            <label for="main-font-size">Size</label>
+
+            <div class="input-group">
+                <input type="number" class="form-control" id="main-font-size" min="50" max="200" step="10"/>
+                <div class="input-group-append">
+                    <span class="input-group-text">%</span>
                 </div>
             </div>
         </div>
+    </div>
+
+    <h5>Note tree font</h5>
+
+    <div class="form-group row">
+        <div class="col-4">
+            <label for="tree-font-family">Font family</label>
+            <select class="form-control" id="tree-font-family"></select>
+        </div>
     
-        <h5>Note tree font</h5>
-    
-        <div class="form-group row">
-            <div class="col-4">
-                <label for="tree-font-family">Font family</label>
-                <select class="form-control" id="tree-font-family"></select>
-            </div>
-        
-            <div class="col-4">
-                <label for="tree-font-size">Size</label>
-    
-                <div class="input-group">
-                    <input type="number" class="form-control" id="tree-font-size" min="50" max="200" step="10"/>
-                    <div class="input-group-append">
-                        <span class="input-group-text">%</span>
-                    </div>
+        <div class="col-4">
+            <label for="tree-font-size">Size</label>
+
+            <div class="input-group">
+                <input type="number" class="form-control" id="tree-font-size" min="50" max="200" step="10"/>
+                <div class="input-group-append">
+                    <span class="input-group-text">%</span>
                 </div>
             </div>
         </div>
-        
-        <h5>Note detail font</h5>
-        
-        <div class="form-group row">
-            <div class="col-4">
-                <label for="detail-font-family">Font family</label>
-                <select class="form-control" id="detail-font-family"></select>
-            </div>
-            
-            <div class="col-4">
-                <label for="detail-font-size">Size</label>
-    
-                <div class="input-group">
-                    <input type="number" class="form-control" id="detail-font-size" min="50" max="200" step="10"/>
-                    <div class="input-group-append">
-                        <span class="input-group-text">%</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <h5>Monospace (code) font</h5>
-        
-        <div class="form-group row">
-            <div class="col-4">
-                <label for="monospace-font-family">Font family</label>
-                <select class="form-control" id="monospace-font-family"></select>
-            </div>
-        
-            <div class="col-4">
-                <label for="monospace-font-size">Size</label>
-    
-                <div class="input-group">
-                    <input type="number" class="form-control" id="monospace-font-size" min="50" max="200" step="10"/>
-                    <div class="input-group-append">
-                        <span class="input-group-text">%</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    
-        <p>Note that tree and detail font sizing is relative to the main font size setting.</p>
- 
-        <p>Not all listed fonts may be available on your system.</p>
     </div>
     
-    <p>
-        To apply font changes, click on 
-        <button class="btn btn-micro reload-frontend-button">reload frontend</button>
-    </p>
+    <h5>Note detail font</h5>
     
+    <div class="form-group row">
+        <div class="col-4">
+            <label for="detail-font-family">Font family</label>
+            <select class="form-control" id="detail-font-family"></select>
+        </div>
+        
+        <div class="col-4">
+            <label for="detail-font-size">Size</label>
+
+            <div class="input-group">
+                <input type="number" class="form-control" id="detail-font-size" min="50" max="200" step="10"/>
+                <div class="input-group-append">
+                    <span class="input-group-text">%</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <h5>Monospace (code) font</h5>
+    
+    <div class="form-group row">
+        <div class="col-4">
+            <label for="monospace-font-family">Font family</label>
+            <select class="form-control" id="monospace-font-family"></select>
+        </div>
+    
+        <div class="col-4">
+            <label for="monospace-font-size">Size</label>
+
+            <div class="input-group">
+                <input type="number" class="form-control" id="monospace-font-size" min="50" max="200" step="10"/>
+                <div class="input-group-append">
+                    <span class="input-group-text">%</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <p>Note that tree and detail font sizing is relative to the main font size setting.</p>
+
+    <p>Not all listed fonts may be available on your system.</p>
+</div>
+
+<p>
+    To apply font changes, click on 
+    <button class="btn btn-micro reload-frontend-button">reload frontend</button>
+</p>
+
+<div class="options-section">
     <h4>Content width</h4>
     
     <p>Trilium by default limits max content width to improve readability for maximized screens on wide screens.</p>
-
+    
     <div class="form-group row">
         <div class="col-4">
             <label for="max-content-width">Max content width in pixels</label>
@@ -172,35 +185,38 @@ const TPL = `
         To content width changes, click on 
         <button class="btn btn-micro reload-frontend-button">reload frontend</button>
     </p>
-</form>`;
+</div>
+`;
 
-export default class ApperanceOptions {
-    constructor() {
-        $("#options-appearance").html(TPL);
+export default class AppearanceOptions extends OptionsTab {
+    get tabTitle() { return "Appearance" }
 
-        this.$zoomFactorSelect = $("#zoom-factor-select");
-        this.$nativeTitleBarSelect = $("#native-title-bar-select");
+    lazyRender() {
+        this.$widget = $(TPL);
 
-        this.$themeSelect = $("#theme-select");
-        this.$overrideThemeFonts = $("#override-theme-fonts");
+        this.$zoomFactorSelect = this.$widget.find("#zoom-factor-select");
+        this.$nativeTitleBarSelect = this.$widget.find("#native-title-bar-select");
 
-        this.$overridenFontSettings = $("#overriden-font-settings");
+        this.$themeSelect = this.$widget.find("#theme-select");
+        this.$overrideThemeFonts = this.$widget.find("#override-theme-fonts");
 
-        this.$mainFontSize = $("#main-font-size");
-        this.$mainFontFamily = $("#main-font-family");
+        this.$overridenFontSettings = this.$widget.find("#overriden-font-settings");
 
-        this.$treeFontSize = $("#tree-font-size");
-        this.$treeFontFamily = $("#tree-font-family");
+        this.$mainFontSize = this.$widget.find("#main-font-size");
+        this.$mainFontFamily = this.$widget.find("#main-font-family");
 
-        this.$detailFontSize = $("#detail-font-size");
-        this.$detailFontFamily = $("#detail-font-family");
+        this.$treeFontSize = this.$widget.find("#tree-font-size");
+        this.$treeFontFamily = this.$widget.find("#tree-font-family");
 
-        this.$monospaceFontSize = $("#monospace-font-size");
-        this.$monospaceFontFamily = $("#monospace-font-family");
+        this.$detailFontSize = this.$widget.find("#detail-font-size");
+        this.$detailFontFamily = this.$widget.find("#detail-font-family");
 
-        $(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options"));
+        this.$monospaceFontSize = this.$widget.find("#monospace-font-size");
+        this.$monospaceFontFamily = this.$widget.find("#monospace-font-family");
 
-        this.$body = $("body");
+        this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options"));
+
+        this.$body = this.$widget.find("body");
 
         this.$themeSelect.on('change', async () => {
             const newTheme = this.$themeSelect.val();
@@ -211,11 +227,9 @@ export default class ApperanceOptions {
         });
 
         this.$overrideThemeFonts.on('change', async () => {
-            const isOverriden = this.$overrideThemeFonts.is(":checked");
+            this.updateCheckboxOption('overrideThemeFonts', this.$overrideThemeFonts);
 
-            await server.put('options/overrideThemeFonts/' + isOverriden.toString());
-
-            this.$overridenFontSettings.toggle(isOverriden);
+            this.$overridenFontSettings.toggle(this.$overrideThemeFonts.is(":checked"));
         });
 
         this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); });
@@ -223,7 +237,7 @@ export default class ApperanceOptions {
         this.$nativeTitleBarSelect.on('change', () => {
             const nativeTitleBarVisible = this.$nativeTitleBarSelect.val() === 'show' ? 'true' : 'false';
 
-            server.put('options/nativeTitleBarVisible/' + nativeTitleBarVisible);
+            this.updateOption('nativeTitleBarVisible', nativeTitleBarVisible);
         });
 
         const optionsToSave = [
@@ -234,16 +248,14 @@ export default class ApperanceOptions {
         ];
 
         for (const optionName of optionsToSave) {
-            this['$' + optionName].on('change', () => server.put(`options/${optionName}/${this['$' + optionName].val()}`));
+            this['$' + optionName].on('change', () =>
+                this.updateOption(optionName, this['$' + optionName].val()));
         }
 
-        this.$maxContentWidth = $("#max-content-width");
+        this.$maxContentWidth = this.$widget.find("#max-content-width");
 
-        this.$maxContentWidth.on('change', async () => {
-            const maxContentWidth = this.$maxContentWidth.val();
-
-            await server.put('options/maxContentWidth/' + maxContentWidth);
-        })
+        this.$maxContentWidth.on('change', async () =>
+            this.updateOption('maxContentWidth', this.$maxContentWidth.val()))
     }
 
     toggleBodyClass(prefix, value) {
@@ -282,7 +294,7 @@ export default class ApperanceOptions {
 
         this.$themeSelect.val(options.theme);
 
-        this.$overrideThemeFonts.prop('checked', options.overrideThemeFonts === 'true');
+        this.setCheckboxState(this.$overrideThemeFonts, options.overrideThemeFonts);
         this.$overridenFontSettings.toggle(options.overrideThemeFonts === 'true');
 
         this.$mainFontSize.val(options.mainFontSize);

src/public/app/widgets/dialogs/options/backup.js

@@ -1,42 +1,47 @@
 import server from "../../../services/server.js";
 import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
 
 const TPL = `
-<h4>Automatic backup</h4>
-
-<p>Trilium can back up the database automatically:</p>
-
-<div class="custom-control custom-checkbox">
-    <input type="checkbox" class="custom-control-input" id="daily-backup-enabled">
-    <label class="custom-control-label" for="daily-backup-enabled">Enable daily backup</label>
+<div class="options-section">
+    <h4>Automatic backup</h4>
+    
+    <p>Trilium can back up the database automatically:</p>
+    
+    <div class="custom-control custom-checkbox">
+        <input type="checkbox" class="custom-control-input" id="daily-backup-enabled">
+        <label class="custom-control-label" for="daily-backup-enabled">Enable daily backup</label>
+    </div>
+    
+    <div class="custom-control custom-checkbox">
+        <input type="checkbox" class="custom-control-input" id="weekly-backup-enabled">
+        <label class="custom-control-label" for="weekly-backup-enabled">Enable weekly backup</label>
+    </div>
+    
+    <div class="custom-control custom-checkbox">
+        <input type="checkbox" class="custom-control-input" id="monthly-backup-enabled">
+        <label class="custom-control-label" for="monthly-backup-enabled">Enable monthly backup</label>
+    </div>
+    
+    <br/>
+    
+    <p>It's recommended to keep the backup turned on, but this can make application startup slow with large databases and/or slow storage devices.</p>
 </div>
 
-<div class="custom-control custom-checkbox">
-    <input type="checkbox" class="custom-control-input" id="weekly-backup-enabled">
-    <label class="custom-control-label" for="weekly-backup-enabled">Enable weekly backup</label>
+<div class="options-section">
+    <h4>Backup now</h4>
+    
+    <button id="backup-database-button" class="btn">Backup database now</button>
 </div>
-
-<div class="custom-control custom-checkbox">
-    <input type="checkbox" class="custom-control-input" id="monthly-backup-enabled">
-    <label class="custom-control-label" for="monthly-backup-enabled">Enable monthly backup</label>
-</div>
-
-<br/>
-
-<p>It's recommended to keep the backup turned on, but this can make application startup slow with large databases and/or slow storage devices.</p>
-
-<br/>
-
-<h4>Backup now</h4>
-
-<button id="backup-database-button" class="btn">Backup database now</button><br/><br/>
 `;
 
-export default class BackupOptions {
-    constructor() {
-        $("#options-backup").html(TPL);
+export default class BackupOptions extends OptionsTab {
+    get tabTitle() { return "Backup" }
 
-        this.$backupDatabaseButton = $("#backup-database-button");
+    lazyRender() {
+        this.$widget = $(TPL);
+
+        this.$backupDatabaseButton = this.$widget.find("#backup-database-button");
 
         this.$backupDatabaseButton.on('click', async () => {
             const {backupFile} = await server.post('database/backup-database');
@@ -44,35 +49,23 @@ export default class BackupOptions {
             toastService.showMessage("Database has been backed up to " + backupFile, 10000);
         });
 
-        this.$dailyBackupEnabled = $("#daily-backup-enabled");
-        this.$weeklyBackupEnabled = $("#weekly-backup-enabled");
-        this.$monthlyBackupEnabled = $("#monthly-backup-enabled");
+        this.$dailyBackupEnabled = this.$widget.find("#daily-backup-enabled");
+        this.$weeklyBackupEnabled = this.$widget.find("#weekly-backup-enabled");
+        this.$monthlyBackupEnabled = this.$widget.find("#monthly-backup-enabled");
 
-        this.$dailyBackupEnabled.on('change', () => {
-            const opts = { 'dailyBackupEnabled': this.$dailyBackupEnabled.is(":checked") ? "true" : "false" };
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
+        this.$dailyBackupEnabled.on('change', () =>
+            this.updateCheckboxOption('dailyBackupEnabled', this.$dailyBackupEnabled));
 
-            return false;
-        });
+        this.$weeklyBackupEnabled.on('change', () =>
+            this.updateCheckboxOption('weeklyBackupEnabled', this.$weeklyBackupEnabled));
 
-        this.$weeklyBackupEnabled.on('change', () => {
-            const opts = { 'weeklyBackupEnabled': this.$weeklyBackupEnabled.is(":checked") ? "true" : "false" };
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-
-            return false;
-        });
-
-        this.$monthlyBackupEnabled.on('change', () => {
-            const opts = { 'monthlyBackupEnabled': this.$monthlyBackupEnabled.is(":checked") ? "true" : "false" };
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-
-            return false;
-        });
+        this.$monthlyBackupEnabled.on('change', () =>
+            this.updateCheckboxOption('monthlyBackupEnabled', this.$monthlyBackupEnabled));
     }
 
     optionsLoaded(options) {
-        this.$dailyBackupEnabled.prop("checked", options['dailyBackupEnabled'] === 'true');
-        this.$weeklyBackupEnabled.prop("checked", options['weeklyBackupEnabled'] === 'true');
-        this.$monthlyBackupEnabled.prop("checked", options['monthlyBackupEnabled'] === 'true');
+        this.setCheckboxState(this.$dailyBackupEnabled, options.dailyBackupEnabled);
+        this.setCheckboxState(this.$weeklyBackupEnabled, options.weeklyBackupEnabled);
+        this.setCheckboxState(this.$monthlyBackupEnabled, options.monthlyBackupEnabled);
     }
 }

src/public/app/widgets/dialogs/options/code_notes.js

@@ -2,34 +2,69 @@ import mimeTypesService from "../../../services/mime_types.js";
 import options from "../../../services/options.js";
 import server from "../../../services/server.js";
 import toastService from "../../../services/toast.js";
-import utils from "../../../services/utils.js";
+import OptionsTab from "./options_tab.js";
 
 const TPL = `
-<h4>Use vim keybindings in CodeNotes (no ex mode)</h4>
-<div class="custom-control custom-checkbox">
-    <input type="checkbox" class="custom-control-input" id="vim-keymap-enabled">
-    <label class="custom-control-label" for="vim-keymap-enabled">Enable Vim Keybindings</label>
+<div class="options-section">
+    <h4>Use vim keybindings in code notes (no ex mode)</h4>
+    <div class="custom-control custom-checkbox">
+        <input type="checkbox" class="custom-control-input" id="vim-keymap-enabled">
+        <label class="custom-control-label" for="vim-keymap-enabled">Enable Vim Keybindings</label>
+    </div>
 </div>
-<h4>Available MIME types in the dropdown</h4>
 
-<ul id="options-mime-types" style="max-height: 500px; overflow: auto; list-style-type: none;"></ul>`;
+<div class="options-section">
+    <h4>Wrap lines in code notes</h4>
+    <div class="custom-control custom-checkbox">
+        <input type="checkbox" class="custom-control-input" id="line-wrap-enabled">
+        <label class="custom-control-label" for="line-wrap-enabled">Enable Line Wrap (change might need a frontend reload to take effect)</label>
+    </div>
+</div>
 
-export default class CodeNotesOptions {
-    constructor() {
-        $("#options-code-notes").html(TPL);
+<div class="options-section">
+    <h4>Automatic readonly size</h4>
 
-        this.$vimKeymapEnabled = $("#vim-keymap-enabled");
-        this.$vimKeymapEnabled.on('change', () => {
-            const opts = { 'vimKeymapEnabled': this.$vimKeymapEnabled.is(":checked") ? "true" : "false" };
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
-            return false;
-        });
-        this.$mimeTypes = $("#options-mime-types");
+    <p>Automatic readonly note size is the size after which notes will be displayed in a readonly mode (for performance reasons).</p>
+
+    <div class="form-group">
+        <label for="auto-readonly-size-code">Automatic readonly size (code notes)</label>
+        <input class="form-control" id="auto-readonly-size-code" type="number" min="0">
+    </div>
+</div>
+
+<div class="options-section">
+    <h4>Available MIME types in the dropdown</h4>
+    
+    <ul id="options-mime-types" style="max-height: 500px; overflow: auto; list-style-type: none;"></ul>
+</div>`;
+
+export default class CodeNotesOptions extends OptionsTab {
+    get tabTitle() { return "Code notes" }
+
+    lazyRender() {
+        this.$widget = $(TPL);
+
+        this.$vimKeymapEnabled = this.$widget.find("#vim-keymap-enabled");
+        this.$vimKeymapEnabled.on('change', () =>
+            this.updateCheckboxOption('vimKeymapEnabled', this.$vimKeymapEnabled));
+
+        this.$codeLineWrapEnabled = this.$widget.find("#line-wrap-enabled");
+        this.$codeLineWrapEnabled.on('change', () =>
+            this.updateCheckboxOption('codeLineWrapEnabled', this.$codeLineWrapEnabled));
+
+        this.$mimeTypes = this.$widget.find("#options-mime-types");
+
+        this.$autoReadonlySizeCode = this.$widget.find("#auto-readonly-size-code");
+        this.$autoReadonlySizeCode.on('change', () =>
+            this.updateOption('autoReadonlySizeCode', this.$autoReadonlySizeCode.val()));
     }
 
     async optionsLoaded(options) {
         this.$mimeTypes.empty();
-        this.$vimKeymapEnabled.prop("checked", options['vimKeymapEnabled'] === 'true');
+        this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled);
+        this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled);
+        this.$autoReadonlySizeCode.val(options.autoReadonlySizeCode);
+
         let idCtr = 1;
 
         for (const mimeType of await mimeTypesService.getMimeTypes()) {
@@ -53,9 +88,9 @@ export default class CodeNotesOptions {
         const enabledMimeTypes = [];
 
         this.$mimeTypes.find("input:checked").each(
-            (i, el) => enabledMimeTypes.push($(el).attr("data-mime-type")));
+            (i, el) => enabledMimeTypes.push(this.$widget.find(el).attr("data-mime-type")));
 
-        await options.save('codeNotesMimeTypes', JSON.stringify(enabledMimeTypes));
+        await this.updateOption('codeNotesMimeTypes', JSON.stringify(enabledMimeTypes));
 
         mimeTypesService.loadMimeTypes();
     }

src/public/app/widgets/dialogs/options/etapi.js

@@ -1,32 +1,33 @@
 import server from "../../../services/server.js";
 import dialogService from "../../dialog.js";
 import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
 
 const TPL = `
-<h4>ETAPI</h4>
+<div class="options-section">
+    <h4>ETAPI</h4>
+    
+    <p>ETAPI is a REST API used to access Trilium instance programmatically, without UI. <br/>
+       See more details on <a href="https://github.com/zadam/trilium/wiki/ETAPI">wiki</a> and <a onclick="window.open('etapi/etapi.openapi.yaml')" href="etapi/etapi.openapi.yaml">ETAPI OpenAPI spec</a>.</p>
+    
+    <button type="button" class="btn btn-sm" id="create-etapi-token">Create new ETAPI token</button>
 
-<p>ETAPI is a REST API used to access Trilium instance programmatically, without UI. <br/>
-   See more details on <a href="https://github.com/zadam/trilium/wiki/ETAPI">wiki</a> and <a onclick="window.open('etapi/etapi.openapi.yaml')" href="etapi/etapi.openapi.yaml">ETAPI OpenAPI spec</a>.</p>
-
-<button type="button" class="btn btn-sm" id="create-etapi-token">Create new ETAPI token</button>
-
-<br/><br/>
-
-<h5>Existing tokens</h5>
-
-<div id="no-tokens-yet">There are no tokens yet. Click on the button above to create one.</div>
-
-<div style="overflow: auto; height: 500px;">
-    <table id="tokens-table" class="table table-stripped">
-    <thead>
-        <tr>
-            <th>Token name</th>
-            <th>Created</th>
-            <th>Actions</th>
-        </tr>
-    </thead>
-    <tbody></tbody>
-    </table>
+    <h5>Existing tokens</h5>
+    
+    <div id="no-tokens-yet">There are no tokens yet. Click on the button above to create one.</div>
+    
+    <div style="overflow: auto; height: 500px;">
+        <table id="tokens-table" class="table table-stripped">
+        <thead>
+            <tr>
+                <th>Token name</th>
+                <th>Created</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+        </table>
+    </div>
 </div>
 
 <style>
@@ -45,11 +46,13 @@ const TPL = `
     }
 </style>`;
 
-export default class EtapiOptions {
-    constructor() {
-        $("#options-etapi").html(TPL);
+export default class EtapiOptions extends OptionsTab {
+    get tabTitle() { return "ETAPI" }
 
-        $("#create-etapi-token").on("click", async () => {
+    lazyRender() {
+        this.$widget = $(TPL);
+
+        this.$widget.find("#create-etapi-token").on("click", async () => {
             const tokenName = await dialogService.prompt({
                 title: "New ETAPI token",
                 message: "Please enter new token's name",
@@ -76,8 +79,8 @@ export default class EtapiOptions {
     }
 
     async refreshTokens() {
-        const $noTokensYet = $("#no-tokens-yet");
-        const $tokensTable = $("#tokens-table");
+        const $noTokensYet = this.$widget.find("#no-tokens-yet");
+        const $tokensTable = this.$widget.find("#tokens-table");
 
         const tokens = await server.get('etapi-tokens');
 

src/public/app/widgets/dialogs/options/images.js

@@ -0,0 +1,85 @@
+import OptionsTab from "./options_tab.js";
+
+const TPL = `
+<style>
+    .options-section .disabled-field {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+</style>
+
+<div class="options-section">
+    <h4>Images</h4>
+    
+    <div class="form-group">
+        <input id="download-images-automatically" type="checkbox" name="download-images-automatically">
+        <label for="download-images-automatically">Download images automatically for offline use.</label>
+        <p>(pasted HTML can contain references to online images, Trilium will find those references and download the images so that they are available offline)</p>
+    </div>
+    
+    <div class="form-group">
+        <input id="image-compresion-enabled" type="checkbox" name="image-compression-enabled">
+        <label for="image-compresion-enabled">Enable image compression</label>
+    </div>
+
+    <div id="image-compression-enabled-wraper">
+        <div class="form-group">
+            <label for="image-max-width-height">Max width / height of an image in pixels (image will be resized if it exceeds this setting).</label>
+            <input class="form-control" id="image-max-width-height" type="number" min="1">
+        </div>
+    
+        <div class="form-group">
+            <label for="image-jpeg-quality">JPEG quality (10 - worst quality, 100 best quality, 50 - 85 is recommended)</label>
+            <input class="form-control" id="image-jpeg-quality" min="10" max="100" type="number">
+        </div>
+    </div>
+</div>
+`;
+
+export default class ImageOptions extends OptionsTab {
+    get tabTitle() { return "Images" }
+
+    lazyRender() {
+        this.$widget = $(TPL);
+
+        this.$imageMaxWidthHeight = this.$widget.find("#image-max-width-height");
+        this.$imageJpegQuality = this.$widget.find("#image-jpeg-quality");
+
+        this.$imageMaxWidthHeight.on('change', () =>
+            this.updateOption('imageMaxWidthHeight', this.$imageMaxWidthHeight.val()));
+
+        this.$imageJpegQuality.on('change', () =>
+            this.updateOption('imageJpegQuality', this.$imageJpegQuality.val()));
+
+        this.$downloadImagesAutomatically = this.$widget.find("#download-images-automatically");
+
+        this.$downloadImagesAutomatically.on("change", () =>
+            this.updateCheckboxOption('downloadImagesAutomatically', this.$downloadImagesAutomatically));
+
+        this.$enableImageCompression = this.$widget.find("#image-compresion-enabled");
+        this.$imageCompressionWrapper = this.$widget.find("#image-compression-enabled-wraper");
+
+        this.$enableImageCompression.on("change", () => {
+            this.updateCheckboxOption('compressImages', this.$enableImageCompression);
+            this.setImageCompression();
+        });
+    }
+
+    optionsLoaded(options) {
+        this.$imageMaxWidthHeight.val(options.imageMaxWidthHeight);
+        this.$imageJpegQuality.val(options.imageJpegQuality);
+
+        this.setCheckboxState(this.$downloadImagesAutomatically, options.downloadImagesAutomatically);
+        this.setCheckboxState(this.$enableImageCompression, options.compressImages);
+
+        this.setImageCompression();
+    }
+
+    setImageCompression() {
+        if (this.$enableImageCompression.prop("checked")) {
+            this.$imageCompressionWrapper.removeClass("disabled-field");
+        } else {
+            this.$imageCompressionWrapper.addClass("disabled-field");
+        }
+    }
+}

src/public/app/widgets/dialogs/options/options_tab.js

@@ -0,0 +1,37 @@
+import BasicWidget from "../../basic_widget.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
+
+export default class OptionsTab extends BasicWidget {
+    async updateOption(name, value) {
+        const opts = { [name]: value };
+
+        await this.updateMultipleOptions(opts);
+    }
+
+    async updateMultipleOptions(opts) {
+        await server.put('options', opts);
+
+        this.showUpdateNotification();
+    }
+
+    showUpdateNotification() {
+        toastService.showPersistent({
+            id: "options-change-saved",
+            title: "Options status",
+            message: "Options change have been saved.",
+            icon: "slider",
+            closeAfter: 2000
+        });
+    }
+
+    async updateCheckboxOption(name, $checkbox) {
+        const isChecked = $checkbox.prop("checked");
+
+        return await this.updateOption(name, isChecked ? 'true' : 'false');
+    }
+
+    setCheckboxState($checkbox, optionValue) {
+        $checkbox.prop('checked', optionValue === 'true');
+    }
+}

src/public/app/widgets/dialogs/options/other.js

@@ -1,65 +1,18 @@
-import utils from "../../../services/utils.js";
 import server from "../../../services/server.js";
 import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
 
 const TPL = `
-<style>
-.disabled-field {
-    opacity: 0.5;
-    pointer-events: none;
-}
-</style>
-
-<div>
-    <h4>Spell check</h4>
-
-    <p>These options apply only for desktop builds, browsers will use their own native spell check. App restart is required after change.</p>
+<div class="options-section">
+    <h4>Tray</h4>
 
     <div class="custom-control custom-checkbox">
-        <input type="checkbox" class="custom-control-input" id="spell-check-enabled">
-        <label class="custom-control-label" for="spell-check-enabled">Enable spellcheck</label>
-    </div>
-
-    <br/>
-
-    <div class="form-group">
-        <label for="spell-check-language-code">Language code(s)</label>
-        <input type="text" class="form-control" id="spell-check-language-code" placeholder="for example &quot;en-US&quot;, &quot;de-AT&quot;">
-    </div>
-
-    <p>Multiple languages can be separated by comma, e.g. <code>en-US, de-DE, cs</code>. Changes to the spell check options will take effect after application restart.</p>
-    
-    <p><strong>Available language codes: </strong> <span id="available-language-codes"></span></p>
-</div>
-
-<div>
-    <h4>Images</h4>
-    
-    <div class="form-group">
-        <input id="download-images-automatically" type="checkbox" name="download-images-automatically">
-        <label for="download-images-automatically">Download images automatically for offline use.</label>
-        <p>(pasted HTML can contain references to online images, Trilium will find those references and download the images so that they are available offline)</p>
-    </div>
-    
-    <div class="form-group">
-        <input id="image-compresion-enabled" type="checkbox" name="image-compression-enabled">
-        <label for="image-compresion-enabled">Enable image compression</label>
-    </div>
-
-    <div id="image-compression-enabled-wraper">
-        <div class="form-group">
-            <label for="image-max-width-height">Max width / height of an image in pixels (image will be resized if it exceeds this setting).</label>
-            <input class="form-control" id="image-max-width-height" type="number" min="1">
-        </div>
-    
-        <div class="form-group">
-            <label for="image-jpeg-quality">JPEG quality (10 - worst quality, 100 best quality, 50 - 85 is recommended)</label>
-            <input class="form-control" id="image-jpeg-quality" min="10" max="100" type="number">
-        </div>
+        <input type="checkbox" class="custom-control-input" id="tray-enabled">
+        <label class="custom-control-label" for="tray-enabled">Enable tray (Trilium needs to be restarted for this change to take effect)</label>
     </div>
 </div>
 
-<div>
+<div class="options-section">
     <h4>Note erasure timeout</h4>
 
     <p>Deleted notes (and attributes, revisions...) are at first only marked as deleted and it is possible to recover them 
@@ -75,23 +28,9 @@ const TPL = `
     <p>You can also trigger erasing manually:</p>
     
     <button id="erase-deleted-notes-now-button" class="btn">Erase deleted notes now</button>
-    
-    <br/><br/>
 </div>
 
-<div>
-    <h4>Protected session timeout</h4>
-
-    <p>Protected session timeout is a time period after which the protected session is wiped from
-        the browser's memory. This is measured from the last interaction with protected notes. See <a href="https://github.com/zadam/trilium/wiki/Protected-notes" class="external">wiki</a> for more info.</p>
-
-    <div class="form-group">
-        <label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
-        <input class="form-control" id="protected-session-timeout-in-seconds" type="number" min="60">
-    </div>
-</div>
-
-<div>
+<div class="options-section">
     <h4>Note revisions snapshot interval</h4>
 
     <p>Note revision snapshot time interval is time in seconds after which a new note revision will be created for the note. See <a href="https://github.com/zadam/trilium/wiki/Note-revisions" class="external">wiki</a> for more info.</p>
@@ -102,198 +41,51 @@ const TPL = `
     </div>
 </div>
 
-<div>
-    <h4>Automatic readonly size</h4>
-
-    <p>Automatic readonly note size is the size after which notes will be displayed in a readonly mode (for performance reasons).</p>
-
+<div class="options-section">
+    <h4>Network connections</h4>
+        
     <div class="form-group">
-        <label for="auto-readonly-size-text">Automatic readonly size (text notes)</label>
-        <input class="form-control" id="auto-readonly-size-text" type="number" min="0">
+        <input id="check-for-updates" type="checkbox" name="check-for-updates">
+        <label for="check-for-updates">Check for updates automatically</label>
     </div>
+</div>`;
 
-    <div class="form-group">
-        <label for="auto-readonly-size-code">Automatic readonly size (code notes)</label>
-        <input class="form-control" id="auto-readonly-size-code" type="number" min="0">
-    </div>
-</div>
-<div>
-<h4>Network connections</h4>
-    
-<div class="form-group">
-    <input id="check-for-updates" type="checkbox" name="check-for-updates">
-    <label for="check-for-updates">Check for updates automatically</label>
-</div>
-</div>
+export default class OtherOptions extends OptionsTab {
+    get tabTitle() { return "Other" }
 
-`;
+    lazyRender() {
+        this.$widget = $(TPL);
 
-export default class ProtectedSessionOptions {
-    constructor() {
-        $("#options-other").html(TPL);
+        this.$trayEnabled = this.$widget.find("#tray-enabled");
+        this.$trayEnabled.on('change', () =>
+            this.updateOption('disableTray', !this.$trayEnabled.is(":checked") ? "true" : "false"));
 
-        this.$spellCheckEnabled = $("#spell-check-enabled");
-        this.$spellCheckLanguageCode = $("#spell-check-language-code");
+        this.$eraseEntitiesAfterTimeInSeconds = this.$widget.find("#erase-entities-after-time-in-seconds");
+        this.$eraseEntitiesAfterTimeInSeconds.on('change', () => this.updateOption('eraseEntitiesAfterTimeInSeconds', this.$eraseEntitiesAfterTimeInSeconds.val()));
 
-        this.$spellCheckEnabled.on('change', () => {
-            const opts = { 'spellCheckEnabled': this.$spellCheckEnabled.is(":checked") ? "true" : "false" };
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-
-            return false;
-        });
-
-        this.$spellCheckLanguageCode.on('change', () => {
-            const opts = { 'spellCheckLanguageCode': this.$spellCheckLanguageCode.val() };
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-
-            return false;
-        });
-
-        this.$availableLanguageCodes = $("#available-language-codes");
-
-        if (utils.isElectron()) {
-            const { webContents } = utils.dynamicRequire('@electron/remote').getCurrentWindow();
-
-            this.$availableLanguageCodes.text(webContents.session.availableSpellCheckerLanguages.join(', '));
-        }
-
-        this.$eraseEntitiesAfterTimeInSeconds = $("#erase-entities-after-time-in-seconds");
-
-        this.$eraseEntitiesAfterTimeInSeconds.on('change', () => {
-            const eraseEntitiesAfterTimeInSeconds = this.$eraseEntitiesAfterTimeInSeconds.val();
-
-            server.put('options', { 'eraseEntitiesAfterTimeInSeconds': eraseEntitiesAfterTimeInSeconds }).then(() => {
-                toastService.showMessage("Options changed have been saved.");
-            });
-
-            return false;
-        });
-
-        this.$eraseDeletedNotesButton = $("#erase-deleted-notes-now-button");
+        this.$eraseDeletedNotesButton = this.$widget.find("#erase-deleted-notes-now-button");
         this.$eraseDeletedNotesButton.on('click', () => {
             server.post('notes/erase-deleted-notes-now').then(() => {
                 toastService.showMessage("Deleted notes have been erased.");
             });
         });
 
-        this.$protectedSessionTimeout = $("#protected-session-timeout-in-seconds");
+        this.$noteRevisionsTimeInterval = this.$widget.find("#note-revision-snapshot-time-interval-in-seconds");
 
-        this.$protectedSessionTimeout.on('change', () => {
-            const protectedSessionTimeout = this.$protectedSessionTimeout.val();
+        this.$noteRevisionsTimeInterval.on('change', () =>
+            this.updateOption('noteRevisionSnapshotTimeInterval', this.$noteRevisionsTimeInterval.val()));
 
-            server.put('options', { 'protectedSessionTimeout': protectedSessionTimeout }).then(() => {
-                toastService.showMessage("Options changed have been saved.");
-            });
-
-            return false;
-        });
-
-        this.$noteRevisionsTimeInterval = $("#note-revision-snapshot-time-interval-in-seconds");
-
-        this.$noteRevisionsTimeInterval.on('change', () => {
-            const opts = { 'noteRevisionSnapshotTimeInterval': this.$noteRevisionsTimeInterval.val() };
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-
-            return false;
-        });
-
-        this.$imageMaxWidthHeight = $("#image-max-width-height");
-        this.$imageJpegQuality = $("#image-jpeg-quality");
-
-        this.$imageMaxWidthHeight.on('change', () => {
-            const opts = { 'imageMaxWidthHeight': this.$imageMaxWidthHeight.val() };
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-
-            return false;
-        });
-
-        this.$imageJpegQuality.on('change', () => {
-            const opts = { 'imageJpegQuality': this.$imageJpegQuality.val() };
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-
-            return false;
-        });
-
-        this.$autoReadonlySizeText = $("#auto-readonly-size-text");
-
-        this.$autoReadonlySizeText.on('change', () => {
-            const opts = { 'autoReadonlySizeText': this.$autoReadonlySizeText.val() };
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-
-            return false;
-        });
-
-        this.$autoReadonlySizeCode = $("#auto-readonly-size-code");
-
-        this.$autoReadonlySizeCode.on('change', () => {
-            const opts = { 'autoReadonlySizeCode': this.$autoReadonlySizeText.val() };
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-
-            return false;
-        });
-
-        this.$downloadImagesAutomatically = $("#download-images-automatically");
-
-        this.$downloadImagesAutomatically.on("change", () => {
-            const isChecked = this.$downloadImagesAutomatically.prop("checked");
-            const opts = { 'downloadImagesAutomatically': isChecked ? 'true' : 'false' };
-
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-        });
-
-        this.$enableImageCompression = $("#image-compresion-enabled");
-        this.$imageCompressionWrapper = $("#image-compression-enabled-wraper");
-
-        this.setImageCompression = (isChecked) => {
-            if (isChecked) {
-                this.$imageCompressionWrapper.removeClass("disabled-field");
-            } else {
-                this.$imageCompressionWrapper.addClass("disabled-field");
-            }
-        };
-
-        this.$enableImageCompression.on("change", () => {
-            const isChecked = this.$enableImageCompression.prop("checked");
-            const opts = { 'compressImages': isChecked ? 'true' : 'false' };
-
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-
-            this.setImageCompression(isChecked);
-        });
-
-        this.$checkForUpdates = $("#check-for-updates");
-        this.$checkForUpdates.on("change", () => {
-            const isChecked = this.$checkForUpdates.prop("checked");
-            const opts = { 'checkForUpdates': isChecked ? 'true' : 'false' };
-
-            server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
-        });
+        this.$checkForUpdates = this.$widget.find("#check-for-updates");
+        this.$checkForUpdates.on("change", () =>
+            this.updateCheckboxOption('checkForUpdates', this.$checkForUpdates));
     }
 
     optionsLoaded(options) {
-        this.$spellCheckEnabled.prop("checked", options['spellCheckEnabled'] === 'true');
-        this.$spellCheckLanguageCode.val(options['spellCheckLanguageCode']);
+        this.$trayEnabled.prop("checked", options.disableTray !== 'true');
 
-        this.$eraseEntitiesAfterTimeInSeconds.val(options['eraseEntitiesAfterTimeInSeconds']);
-        this.$protectedSessionTimeout.val(options['protectedSessionTimeout']);
-        this.$noteRevisionsTimeInterval.val(options['noteRevisionSnapshotTimeInterval']);
-
-        this.$imageMaxWidthHeight.val(options['imageMaxWidthHeight']);
-        this.$imageJpegQuality.val(options['imageJpegQuality']);
-
-        this.$autoReadonlySizeText.val(options['autoReadonlySizeText']);
-        this.$autoReadonlySizeCode.val(options['autoReadonlySizeCode']);
-
-        const downloadImagesAutomatically = options['downloadImagesAutomatically'] === 'true';
-        this.$downloadImagesAutomatically.prop('checked', downloadImagesAutomatically);
-
-        const compressImages = options['compressImages'] === 'true';
-        this.$enableImageCompression.prop('checked', compressImages);
-        this.setImageCompression(compressImages);
-
-
-        const checkForUpdates = options['checkForUpdates'] === 'true';
-        this.$checkForUpdates.prop('checked', checkForUpdates);
+        this.$eraseEntitiesAfterTimeInSeconds.val(options.eraseEntitiesAfterTimeInSeconds);
+        this.$noteRevisionsTimeInterval.val(options.noteRevisionSnapshotTimeInterval);
 
+        this.setCheckboxState(this.$checkForUpdates, options.checkForUpdates);
     }
 }

src/public/app/widgets/dialogs/options/password.js

@@ -1,46 +1,63 @@
 import server from "../../../services/server.js";
 import protectedSessionHolder from "../../../services/protected_session_holder.js";
 import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
 
 const TPL = `
-<h3 id="password-heading"></h3>
-
-<div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
-  Please take care to remember your new password. Password is used to encrypt protected notes. 
-  If you forget your password, then all your protected notes are forever lost. 
-  In case you did forget your password, <a id="reset-password-button" href="javascript:">click here to reset it</a>.
+<div class="options-section">
+    <h4 id="password-heading"></h4>
+    
+    <div class="alert alert-warning" role="alert" style="font-weight: bold; color: red !important;">
+      Please take care to remember your new password. Password is used for logging into the web interface and
+      to encrypt protected notes. If you forget your password, then all your protected notes are forever lost. 
+      In case you did forget your password, <a id="reset-password-button" href="javascript:">click here to reset it</a>.
+    </div>
+    
+    <form id="change-password-form">
+        <div class="form-group" id="old-password-form-group">
+            <label for="old-password">Old password</label>
+            <input class="form-control" id="old-password" type="password">
+        </div>
+    
+        <div class="form-group">
+            <label for="new-password1">New password</label>
+            <input class="form-control" id="new-password1" type="password">
+        </div>
+    
+        <div class="form-group">
+            <label for="new-password2">New password Confirmation</label>
+            <input class="form-control" id="new-password2" type="password">
+        </div>
+    
+        <button class="btn btn-primary" id="save-password-button">Change password</button>
+    </form>
 </div>
 
-<form id="change-password-form">
-    <div class="form-group" id="old-password-form-group">
-        <label for="old-password">Old password</label>
-        <input class="form-control" id="old-password" type="password">
-    </div>
+<div class="options-section">
+    <h4>Protected session timeout</h4>
+
+    <p>Protected session timeout is a time period after which the protected session is wiped from
+        the browser's memory. This is measured from the last interaction with protected notes. See <a href="https://github.com/zadam/trilium/wiki/Protected-notes" class="external">wiki</a> for more info.</p>
 
     <div class="form-group">
-        <label for="new-password1">New password</label>
-        <input class="form-control" id="new-password1" type="password">
+        <label for="protected-session-timeout-in-seconds">Protected session timeout (in seconds)</label>
+        <input class="form-control" id="protected-session-timeout-in-seconds" type="number" min="60">
     </div>
+</div>`;
 
-    <div class="form-group">
-        <label for="new-password2">New password Confirmation</label>
-        <input class="form-control" id="new-password2" type="password">
-    </div>
+export default class PasswordOptions extends OptionsTab {
+    get tabTitle() { return "Password" }
 
-    <button class="btn btn-primary" id="save-password-button">Change password</button>
-</form>`;
+    lazyRender() {
+        this.$widget = $(TPL);
 
-export default class ChangePasswordOptions {
-    constructor() {
-        $("#options-password").html(TPL);
-
-        this.$passwordHeading = $("#password-heading");
-        this.$form = $("#change-password-form");
-        this.$oldPassword = $("#old-password");
-        this.$newPassword1 = $("#new-password1");
-        this.$newPassword2 = $("#new-password2");
-        this.$savePasswordButton = $("#save-password-button");
-        this.$resetPasswordButton = $("#reset-password-button");
+        this.$passwordHeading = this.$widget.find("#password-heading");
+        this.$changePasswordForm = this.$widget.find("#change-password-form");
+        this.$oldPassword = this.$widget.find("#old-password");
+        this.$newPassword1 = this.$widget.find("#new-password1");
+        this.$newPassword2 = this.$widget.find("#new-password2");
+        this.$savePasswordButton = this.$widget.find("#save-password-button");
+        this.$resetPasswordButton = this.$widget.find("#reset-password-button");
 
         this.$resetPasswordButton.on("click", async () => {
             if (confirm("By resetting the password you will forever lose access to all your existing protected notes. Do you really want to reset the password?")) {
@@ -53,15 +70,20 @@ export default class ChangePasswordOptions {
             }
         });
 
-        this.$form.on('submit', () => this.save());
+        this.$changePasswordForm.on('submit', () => this.save());
+
+        this.$protectedSessionTimeout = this.$widget.find("#protected-session-timeout-in-seconds");
+        this.$protectedSessionTimeout.on('change', () =>
+            this.updateOption('protectedSessionTimeout', this.$protectedSessionTimeout.val()));
     }
 
     optionsLoaded(options) {
         const isPasswordSet = options.isPasswordSet === 'true';
 
-        $("#old-password-form-group").toggle(isPasswordSet);
+        this.$widget.find("#old-password-form-group").toggle(isPasswordSet);
         this.$passwordHeading.text(isPasswordSet ? 'Change password' : 'Set password');
         this.$savePasswordButton.text(isPasswordSet ? 'Change password' : 'Set password');
+        this.$protectedSessionTimeout.val(options.protectedSessionTimeout);
     }
 
     save() {

src/public/app/widgets/dialogs/options/shortcuts.js

@@ -1,46 +1,53 @@
 import server from "../../../services/server.js";
 import utils from "../../../services/utils.js";
 import dialogService from "../../dialog.js";
+import OptionsTab from "./options_tab.js";
 
 const TPL = `
-<h4>Keyboard shortcuts</h4>
-
-<p>Multiple shortcuts for the same action can be separated by comma.</p>
-
-<div class="form-group">
-    <input type="text" class="form-control" id="keyboard-shortcut-filter" placeholder="Type text to filter shortcuts...">
-</div>
-
-<div style="overflow: auto; height: 500px;">
-    <table id="keyboard-shortcut-table" cellpadding="10">
-    <thead>
-        <tr>
-            <th>Action name</th>
-            <th>Shortcuts</th>
-            <th>Default shortcuts</th>
-            <th>Description</th>
-        </tr>
-    </thead>
-    <tbody></tbody>
-    </table>
-</div>
-
-<div style="display: flex; justify-content: space-between">
-    <button class="btn btn-primary" id="options-keyboard-shortcuts-reload-app">Reload app to apply changes</button>
+<div class="options-section">
+    <h4>Keyboard shortcuts</h4>
     
-    <button class="btn" id="options-keyboard-shortcuts-set-all-to-default">Set all shortcuts to the default</button>
-</div>
-`;
+    <p>
+      Multiple shortcuts for the same action can be separated by comma.
+      See <a href="https://www.electronjs.org/docs/latest/api/accelerator">Electron documentation</a> for available modifiers and key codes.
+    </p>
+    
+    <div class="form-group">
+        <input type="text" class="form-control" id="keyboard-shortcut-filter" placeholder="Type text to filter shortcuts...">
+    </div>
+    
+    <div style="overflow: auto; height: 500px;">
+        <table id="keyboard-shortcut-table" cellpadding="10">
+        <thead>
+            <tr>
+                <th>Action name</th>
+                <th>Shortcuts</th>
+                <th>Default shortcuts</th>
+                <th>Description</th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+        </table>
+    </div>
+    
+    <div style="display: flex; justify-content: space-between">
+        <button class="btn btn-primary" id="options-keyboard-shortcuts-reload-app">Reload app to apply changes</button>
+        
+        <button class="btn" id="options-keyboard-shortcuts-set-all-to-default">Set all shortcuts to the default</button>
+    </div>
+</div>`;
 
 let globActions;
 
-export default class KeyboardShortcutsOptions {
-    constructor() {
-        $("#options-shortcuts").html(TPL);
+export default class KeyboardShortcutsOptions extends OptionsTab {
+    get tabTitle() { return "Shortcuts" }
 
-        $("#options-keyboard-shortcuts-reload-app").on("click", () => utils.reloadFrontendApp());
+    lazyRender() {
+        this.$widget = $(TPL);
 
-        const $table = $("#keyboard-shortcut-table tbody");
+        this.$widget.find("#options-keyboard-shortcuts-reload-app").on("click", () => utils.reloadFrontendApp());
+
+        const $table = this.$widget.find("#keyboard-shortcut-table tbody");
 
         server.get('keyboard-actions').then(actions => {
             globActions = actions;
@@ -73,7 +80,7 @@ export default class KeyboardShortcutsOptions {
         });
 
         $table.on('change', 'input.form-control', e => {
-            const $input = $(e.target);
+            const $input = this.$widget.find(e.target);
             const actionName = $input.attr('data-keyboard-action-name');
             const shortcuts = $input.val()
                               .replace('+,', "+Comma")
@@ -81,54 +88,53 @@ export default class KeyboardShortcutsOptions {
                               .map(shortcut => shortcut.replace("+Comma", "+,"))
                               .filter(shortcut => !!shortcut);
 
-            const opts = {};
-            opts['keyboardShortcuts' + actionName.substr(0, 1).toUpperCase() + actionName.substr(1)] = JSON.stringify(shortcuts);
+            const optionName = 'keyboardShortcuts' + actionName.substr(0, 1).toUpperCase() + actionName.substr(1);
 
-            server.put('options', opts);
+            this.updateOption(optionName, JSON.stringify(shortcuts));
         });
 
-        $("#options-keyboard-shortcuts-set-all-to-default").on('click', async () => {
+        this.$widget.find("#options-keyboard-shortcuts-set-all-to-default").on('click', async () => {
             if (!await dialogService.confirm("Do you really want to reset all keyboard shortcuts to the default?")) {
                 return;
             }
 
             $table.find('input.form-control').each(function() {
-                const defaultShortcuts = $(this).attr('data-default-keyboard-shortcuts');
+                const defaultShortcuts = this.$widget.find(this).attr('data-default-keyboard-shortcuts');
 
-                if ($(this).val() !== defaultShortcuts) {
-                    $(this)
+                if (this.$widget.find(this).val() !== defaultShortcuts) {
+                    this.$widget.find(this)
                         .val(defaultShortcuts)
                         .trigger('change');
                 }
             });
         });
 
-        const $filter = $("#keyboard-shortcut-filter");
+        const $filter = this.$widget.find("#keyboard-shortcut-filter");
 
         $filter.on('keyup', () => {
             const filter = $filter.val().trim().toLowerCase();
 
             $table.find("tr").each((i, el) => {
                 if (!filter) {
-                    $(el).show();
+                    this.$widget.find(el).show();
                     return;
                 }
 
-                const actionName = $(el).find('input').attr('data-keyboard-action-name');
+                const actionName = this.$widget.find(el).find('input').attr('data-keyboard-action-name');
 
                 if (!actionName) {
-                    $(el).hide();
+                    this.$widget.find(el).hide();
                     return;
                 }
 
                 const action = globActions.find(act => act.actionName === actionName);
 
                 if (!action) {
-                    $(el).hide();
+                    this.$widget.find(el).hide();
                     return;
                 }
 
-                $(el).toggle(!!( // !! to avoid toggle overloads with different behavior
+                this.$widget.find(el).toggle(!!( // !! to avoid toggle overloads with different behavior
                     action.actionName.toLowerCase().includes(filter)
                     || action.defaultShortcuts.some(shortcut => shortcut.toLowerCase().includes(filter))
                     || action.effectiveShortcuts.some(shortcut => shortcut.toLowerCase().includes(filter))

src/public/app/widgets/dialogs/options/spellcheck.js

@@ -0,0 +1,55 @@
+import utils from "../../../services/utils.js";
+import OptionsTab from "./options_tab.js";
+
+const TPL = `
+<div class="options-section">
+    <h4>Spell check</h4>
+
+    <p>These options apply only for desktop builds, browsers will use their own native spell check. App restart is required after change.</p>
+
+    <div class="custom-control custom-checkbox">
+        <input type="checkbox" class="custom-control-input" id="spell-check-enabled">
+        <label class="custom-control-label" for="spell-check-enabled">Enable spellcheck</label>
+    </div>
+
+    <br/>
+
+    <div class="form-group">
+        <label for="spell-check-language-code">Language code(s)</label>
+        <input type="text" class="form-control" id="spell-check-language-code" placeholder="for example &quot;en-US&quot;, &quot;de-AT&quot;">
+    </div>
+
+    <p>Multiple languages can be separated by comma, e.g. <code>en-US, de-DE, cs</code>. Changes to the spell check options will take effect after application restart.</p>
+    
+    <p><strong>Available language codes: </strong> <span id="available-language-codes"></span></p>
+</div>`;
+
+export default class SpellcheckOptions extends OptionsTab {
+    get tabTitle() { return "Spellcheck" }
+
+    lazyRender() {
+        this.$widget = $(TPL);
+
+        this.$spellCheckEnabled = this.$widget.find("#spell-check-enabled");
+        this.$spellCheckLanguageCode = this.$widget.find("#spell-check-language-code");
+
+        this.$spellCheckEnabled.on('change', () =>
+            this.updateCheckboxOption('spellCheckEnabled', this.$spellCheckEnabled));
+
+        this.$spellCheckLanguageCode.on('change', () =>
+            this.updateOption('spellCheckLanguageCode', this.$spellCheckLanguageCode.val()));
+
+        this.$availableLanguageCodes = this.$widget.find("#available-language-codes");
+
+        if (utils.isElectron()) {
+            const { webContents } = utils.dynamicRequire('@electron/remote').getCurrentWindow();
+
+            this.$availableLanguageCodes.text(webContents.session.availableSpellCheckerLanguages.join(', '));
+        }
+    }
+
+    optionsLoaded(options) {
+        this.setCheckboxState(this.$spellCheckEnabled, options.spellCheckEnabled);
+        this.$spellCheckLanguageCode.val(options.spellCheckLanguageCode);
+    }
+}

src/public/app/widgets/dialogs/options/sync.js

@@ -1,51 +1,56 @@
 import server from "../../../services/server.js";
 import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
 
 const TPL = `
-<h4 style="margin-top: 0px;">Sync configuration</h4>
+<div class="options-section">
+    <h4 style="margin-top: 0px;">Sync configuration</h4>
+    
+    <form id="sync-setup-form">
+        <div class="form-group">
+            <label for="sync-server-host">Server instance address</label>
+            <input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
+        </div>
+    
+        <div class="form-group">
+            <label for="sync-server-timeout">Sync timeout (milliseconds)</label>
+            <input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number" style="text-align: left;">
+        </div>
+    
+        <div class="form-group">
+            <label for="sync-proxy">Sync proxy server (optional)</label>
+            <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
+    
+            <p><strong>Note:</strong> If you leave the proxy setting blank, the system proxy will be used (applies to desktop/electron build only)</p>
+        </div>
+    
+        <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-primary">Save</button>
+    
+            <button class="btn" type="button" data-help-page="Synchronization">Help</button>
+        </div>
+    </form>
+</div>
 
-<form id="sync-setup-form">
-    <div class="form-group">
-        <label for="sync-server-host">Server instance address</label>
-        <input class="form-control" id="sync-server-host" placeholder="https://<host>:<port>">
-    </div>
+<div class="options-section">
+    <h4>Sync test</h4>
+    
+    <p>This will test the connection and handshake to the sync server. If the sync server isn't initialized, this will set it up to sync with the local document.</p>
+    
+    <button id="test-sync-button" class="btn">Test sync</button>
+</div>`;
 
-    <div class="form-group">
-        <label for="sync-server-timeout">Sync timeout (milliseconds)</label>
-        <input class="form-control" id="sync-server-timeout" min="1" max="10000000" type="number" style="text-align: left;">
-    </div>
+export default class SyncOptions extends OptionsTab {
+    get tabTitle() { return "Sync" }
 
-    <div class="form-group">
-        <label for="sync-proxy">Sync proxy server (optional)</label>
-        <input class="form-control" id="sync-proxy" placeholder="https://<host>:<port>">
+    lazyRender() {
+        this.$widget = $(TPL);
 
-        <p><strong>Note:</strong> If you leave the proxy setting blank, the system proxy will be used (applies to desktop/electron build only)</p>
-    </div>
-
-    <div style="display: flex; justify-content: space-between;">
-        <button class="btn btn-primary">Save</button>
-
-        <button class="btn" type="button" data-help-page="Synchronization">Help</button>
-    </div>
-</form>
-
-<br/>
-
-<h4>Sync test</h4>
-
-<p>This will test the connection and handshake to the sync server. If the sync server isn't initialized, this will set it up to sync with the local document.</p>
-
-<button id="test-sync-button" class="btn">Test sync</button>`;
-
-export default class SyncOptions {
-    constructor() {
-        $("#options-sync-setup").html(TPL);
-
-        this.$form = $("#sync-setup-form");
-        this.$syncServerHost = $("#sync-server-host");
-        this.$syncServerTimeout = $("#sync-server-timeout");
-        this.$syncProxy = $("#sync-proxy");
-        this.$testSyncButton = $("#test-sync-button");
+        this.$form = this.$widget.find("#sync-setup-form");
+        this.$syncServerHost = this.$widget.find("#sync-server-host");
+        this.$syncServerTimeout = this.$widget.find("#sync-server-timeout");
+        this.$syncProxy = this.$widget.find("#sync-proxy");
+        this.$testSyncButton = this.$widget.find("#test-sync-button");
 
         this.$form.on('submit', () => this.save());
 
@@ -62,19 +67,17 @@ export default class SyncOptions {
     }
 
     optionsLoaded(options) {
-        this.$syncServerHost.val(options['syncServerHost']);
-        this.$syncServerTimeout.val(options['syncServerTimeout']);
-        this.$syncProxy.val(options['syncProxy']);
+        this.$syncServerHost.val(options.syncServerHost);
+        this.$syncServerTimeout.val(options.syncServerTimeout);
+        this.$syncProxy.val(options.syncProxy);
     }
 
     save() {
-        const opts = {
+        this.updateMultipleOptions({
             'syncServerHost': this.$syncServerHost.val(),
             'syncServerTimeout': this.$syncServerTimeout.val(),
             'syncProxy': this.$syncProxy.val()
-        };
-
-        server.put('options', opts).then(()  => toastService.showMessage("Options changed have been saved."));
+        });
 
         return false;
     }

src/public/app/widgets/dialogs/options/text_notes.js

@@ -1,18 +1,20 @@
 import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
 
 const TPL = `
 <p><strong>Settings on this options tab are saved automatically after each change.</strong></p>
 
-<form>
+<div class="options-section">
     <h4>Heading style</h4>
     <select class="form-control" id="heading-style">
         <option value="plain">Plain</option>
         <option value="underline">Underline</option>
         <option value="markdown">Markdown-style</option>
     </select>
+</div>
     
-    <br/>
-    
+<div class="options-section">
     <h4>Table of contents</h4>
     
     Table of contents will appear in text notes when the note has more than a defined number of headings. You can customize this number:
@@ -22,29 +24,42 @@ const TPL = `
     </div>
     
     <p>You can also use this option to effectively disable TOC by setting a very high number.</p>
-</form>`;
+</div>
+    
+<div class="options-section">
+    <h4>Automatic readonly size</h4>
 
-export default class TextNotesOptions {
-    constructor() {
-        $("#options-text-notes").html(TPL);
+    <p>Automatic readonly note size is the size after which notes will be displayed in a readonly mode (for performance reasons).</p>
 
+    <div class="form-group">
+        <label for="auto-readonly-size-text">Automatic readonly size (text notes)</label>
+        <input class="form-control" id="auto-readonly-size-text" type="number" min="0" style="text-align: right;">
+    </div>
+</div>`;
+
+export default class TextNotesOptions extends OptionsTab {
+    get tabTitle() { return "Text notes" }
+
+    lazyRender() {
+        this.$widget = $(TPL);
         this.$body = $("body");
 
-        this.$headingStyle = $("#heading-style");
+        this.$headingStyle = this.$widget.find("#heading-style");
         this.$headingStyle.on('change', () => {
             const newHeadingStyle = this.$headingStyle.val();
 
             this.toggleBodyClass("heading-style-", newHeadingStyle);
 
-            server.put('options/headingStyle/' + newHeadingStyle);
+            this.updateOption('headingStyle', newHeadingStyle);
         });
 
-        this.$minTocHeadings = $("#min-toc-headings");
-        this.$minTocHeadings.on('change', () => {
-            const minTocHeadings = this.$minTocHeadings.val();
+        this.$minTocHeadings = this.$widget.find("#min-toc-headings");
+        this.$minTocHeadings.on('change', () =>
+            this.updateOption('minTocHeadings', this.$minTocHeadings.val()));
 
-            server.put('options/minTocHeadings/' + minTocHeadings);
-        });
+        this.$autoReadonlySizeText = this.$widget.find("#auto-readonly-size-text");
+        this.$autoReadonlySizeText.on('change', () =>
+            this.updateOption('autoReadonlySizeText', this.$autoReadonlySizeText.val()));
     }
 
     toggleBodyClass(prefix, value) {
@@ -57,8 +72,9 @@ export default class TextNotesOptions {
         this.$body.addClass(prefix + value);
     }
 
-    async optionsLoaded(options) {
+    optionsLoaded(options) {
         this.$headingStyle.val(options.headingStyle);
         this.$minTocHeadings.val(options.minTocHeadings);
+        this.$autoReadonlySizeText.val(options.autoReadonlySizeText);
     }
 }

src/public/app/widgets/dialogs/password_not_set.js

@@ -28,7 +28,7 @@ export default class PasswordNoteSetDialog extends BasicWidget {
         this.$widget = $(TPL);
         this.$openPasswordOptionsButton = this.$widget.find(".open-password-options-button");
         this.$openPasswordOptionsButton.on("click", () => {
-            this.triggerCommand("showOptions", { openTab: 'password' });
+            this.triggerCommand("showOptions", { openTab: 'PasswordOptions' });
         });
     }
 

src/public/app/widgets/dialogs/recent_changes.js

@@ -7,14 +7,19 @@ import appContext from "../../services/app_context.js";
 import hoistedNoteService from "../../services/hoisted_note.js";
 import BasicWidget from "../basic_widget.js";
 import dialogService from "../dialog.js";
+import toastService from "../../services/toast.js";
 
 const TPL = `
 <div class="recent-changes-dialog modal fade mx-auto" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Recent changes</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <h5 class="modal-title mr-auto">Recent changes</h5>
+                
+                <button class="erase-deleted-notes-now-button btn btn-xs" style="padding: 0 10px">
+                    Erase deleted notes now</button>
+                
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
@@ -29,20 +34,30 @@ export default class RecentChangesDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$content = this.$widget.find(".recent-changes-content");
+        this.$eraseDeletedNotesNow = this.$widget.find(".erase-deleted-notes-now-button");
+        this.$eraseDeletedNotesNow.on("click", () => {
+            server.post('notes/erase-deleted-notes-now').then(() => {
+                this.refresh();
+
+                toastService.showMessage("Deleted notes have been erased.");
+            });
+        });
     }
 
     async showRecentChangesEvent({ancestorNoteId}) {
-        await this.refresh(ancestorNoteId);
+        this.ancestorNoteId = ancestorNoteId;
+
+        await this.refresh();
 
         utils.openDialog(this.$widget);
     }
 
-    async refresh(ancestorNoteId) {
-        if (!ancestorNoteId) {
-            ancestorNoteId = hoistedNoteService.getHoistedNoteId();
+    async refresh() {
+        if (!this.ancestorNoteId) {
+            this.ancestorNoteId = hoistedNoteService.getHoistedNoteId();
         }
 
-        const recentChangesRows = await server.get('recent-changes/' + ancestorNoteId);
+        const recentChangesRows = await server.get('recent-changes/' + this.ancestorNoteId);
 
         // preload all notes into cache
         await froca.getNotes(recentChangesRows.map(r => r.noteId), true);

src/public/app/widgets/find.js

@@ -142,26 +142,27 @@ export default class FindWidget extends NoteContextAwareWidget {
             return;
         }
 
-        if (!['text', 'code', 'render'].includes(this.note.type) || !this.$findBox.is(":hidden")) {
+        if (!['text', 'code', 'render'].includes(this.note.type)) {
             return;
         }
 
-        this.handler = await this.getHandler();
-
         this.$findBox.show();
         this.$input.focus();
-        this.$totalFound.text(0);
-        this.$currentFound.text(0);
+        this.handler = await this.getHandler();
 
-        const searchTerm = await this.handler.getInitialSearchTerm();
+        const isAlreadyVisible = this.$findBox.is(":visible");
 
-        this.$input.val(searchTerm || "");
-
-        // Directly perform the search if there's some text to
-        // find, without delaying or waiting for enter
-        if (searchTerm !== "") {
+        if (isAlreadyVisible) {
             this.$input.select();
-            await this.performFind();
+        } else {
+            this.$totalFound.text(0);
+            this.$currentFound.text(0);
+            const searchTerm = await this.handler.getInitialSearchTerm();
+            this.$input.val(searchTerm || "");
+            if (searchTerm !== "") {
+                this.$input.select();
+                await this.performFind();
+            }
         }
     }
 

src/public/app/widgets/note_detail.js

@@ -237,15 +237,17 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
             $promotedAttributes = (await attributeRenderer.renderNormalAttributes(this.note)).$renderedAttributes;
         }
 
+        const {assetPath} = window.glob;
+
         this.$widget.find('.note-detail-printable:visible').printThis({
             header: $("<div>")
                         .append($("<h2>").text(this.note.title))
                         .append($promotedAttributes)
                         .prop('outerHTML'),
             footer: `
-<script src="libraries/katex/katex.min.js"></script>
-<script src="libraries/katex/mhchem.min.js"></script>
-<script src="libraries/katex/auto-render.min.js"></script>
+<script src="${assetPath}/libraries/katex/katex.min.js"></script>
+<script src="${assetPath}/libraries/katex/mhchem.min.js"></script>
+<script src="${assetPath}/libraries/katex/auto-render.min.js"></script>
 <script>
     document.body.className += ' ck-content printed-content';
     
@@ -254,13 +256,13 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
 `,
             importCSS: false,
             loadCSS: [
-                "libraries/codemirror/codemirror.css",
-                "libraries/ckeditor/ckeditor-content.css",
-                "libraries/bootstrap/css/bootstrap.min.css",
-                "libraries/katex/katex.min.css",
-                "stylesheets/print.css",
-                "stylesheets/relation_map.css",
-                "stylesheets/ckeditor-theme.css"
+                assetPath + "/libraries/codemirror/codemirror.css",
+                assetPath + "/libraries/ckeditor/ckeditor-content.css",
+                assetPath + "/libraries/bootstrap/css/bootstrap.min.css",
+                assetPath + "/libraries/katex/katex.min.css",
+                assetPath + "/stylesheets/print.css",
+                assetPath + "/stylesheets/relation_map.css",
+                assetPath + "/stylesheets/ckeditor-theme.css"
             ],
             debug: true
         });
@@ -277,9 +279,19 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         // globally, so it gets also to e.g. ribbon components. But this means that the event can be generated multiple
         // times if the same note is open in several tabs.
 
-        if (loadResults.isNoteReloaded(this.noteId, this.componentId)
+        if (loadResults.isNoteContentReloaded(this.noteId, this.componentId)) {
+            // probably incorrect event
+            // calling this.refresh() is not enough since the event needs to be propagated to children as well
+            // FIXME: create a separate event to force hierarchical refresh
+
+            // this uses handleEvent to make sure that the ordinary content updates are propagated only in the subtree
+            // to avoid problem in #3365
+            this.handleEvent('noteTypeMimeChanged', {noteId: this.noteId});
+        }
+        else if (loadResults.isNoteReloaded(this.noteId, this.componentId)
             && (this.type !== await this.getWidgetType() || this.mime !== this.note.mime)) {
 
+            // this needs to have a triggerEvent so that e.g. note type (not in the component subtree) is updated
             this.triggerEvent('noteTypeMimeChanged', {noteId: this.noteId});
         }
         else {
@@ -296,6 +308,8 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
                 && attributeService.isAffecting(attr, this.note));
 
             if (label || relation) {
+                console.log("OOOO");
+
                 // probably incorrect event
                 // calling this.refresh() is not enough since the event needs to be propagated to children as well
                 this.triggerEvent('noteTypeMimeChanged', {noteId: this.noteId});

src/public/app/widgets/note_icon.js

@@ -163,13 +163,17 @@ export default class NoteIconWidget extends NoteContextAwareWidget {
 
         const {icons} = (await import('./icon_list.js')).default;
 
+        search = search?.trim()?.toLowerCase();
+
         for (const icon of icons) {
             if (categoryId && icon.category_id !== categoryId) {
                 continue;
             }
 
-            if (search && search.trim() && !icon.name.includes(search.trim().toLowerCase())) {
-                continue;
+            if (search) {
+                if (!icon.name.includes(search) && !icon.term?.find(t => t.includes(search))) {
+                    continue;
+                }
             }
 
             this.$iconList.append(

src/public/app/widgets/note_map.js

@@ -86,8 +86,6 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
 
         this.mapType = this.note.getLabelValue("mapType") === "tree" ? "tree" : "link";
 
-        this.setDimensions();
-
         await libraryLoader.requireLibrary(libraryLoader.FORCE_GRAPH);
 
         this.graph = ForceGraph()(this.$container[0])
@@ -121,7 +119,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
                 .linkCanvasObjectMode(() => "after");
         }
 
-        let mapRootNoteId = this.getMapRootNoteId();
+        const mapRootNoteId = this.getMapRootNoteId();
         const data = await this.loadNotesAndRelations(mapRootNoteId);
 
         const nodeLinkRatio = data.nodes.length / data.links.length;
@@ -264,7 +262,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
         return {
             nodes: this.nodes,
             links: links.map(link => ({
-                id: link.id,
+                id: `${link.sourceNoteId}-${link.targetNoteId}`,
                 source: link.sourceNoteId,
                 target: link.targetNoteId,
                 name: link.names.join(", ")
@@ -331,8 +329,10 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
     renderData(data) {
         this.graph.graphData(data);
 
-        if (this.widgetMode === 'ribbon') {
+        if (this.widgetMode === 'ribbon' && this.note?.type !== 'search') {
             setTimeout(() => {
+                this.setDimensions();
+
                 const subGraphNoteIds = this.getSubGraphConnectedToCurrentNote(data);
 
                 this.graph.zoomToFit(400, 50, node => subGraphNoteIds.has(node.id));
@@ -342,12 +342,18 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
                 }
             }, 1000);
         }
-        else if (this.widgetMode === 'type') {
+        else {
             if (data.nodes.length > 1) {
                 setTimeout(() => {
-                    this.graph.zoomToFit(400, 10);
+                    this.setDimensions();
 
-                    if (data.nodes.length < 30) {
+                    const noteIdsWithLinks = this.getNoteIdsWithLinks(data);
+
+                    if (noteIdsWithLinks.size > 0) {
+                        this.graph.zoomToFit(400, 30, node => noteIdsWithLinks.has(node.id));
+                    }
+
+                    if (noteIdsWithLinks.size < 30) {
                         this.graph.d3VelocityDecay(0.4);
                     }
                 }, 1000);
@@ -355,6 +361,17 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
         }
     }
 
+    getNoteIdsWithLinks(data) {
+        const noteIds = new Set();
+
+        for (const link of data.links) {
+            noteIds.add(link.source.id);
+            noteIds.add(link.target.id);
+        }
+
+        return noteIds;
+    }
+
     getSubGraphConnectedToCurrentNote(data) {
         function getGroupedLinks(links, type) {
             const map = {};
@@ -398,7 +415,12 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
     }
 
     entitiesReloadedEvent({loadResults}) {
-        if (loadResults.getAttributes(this.componentId).find(attr => attr.name === 'mapType' && attributeService.isAffecting(attr, this.note))) {
+        if (loadResults.getAttributes(this.componentId).find(
+            attr =>
+                attr.type === 'label'
+                && ['mapType', 'mapRootNoteId'].includes(attr.name)
+                && attributeService.isAffecting(attr, this.note)
+        )) {
             this.refresh();
         }
     }

src/public/app/widgets/note_tree.js

@@ -343,7 +343,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
 
                         node.setFocus(true);
                     }
-                    else if (event.ctrlKey) {
+                    else if ((!utils.isMac() && event.ctrlKey) || (utils.isMac() && event.metaKey)) {
                         const notePath = treeService.getNotePath(node);
                         appContext.tabManager.openTabWithNoteWithHoisting(notePath);
                     }
@@ -1462,7 +1462,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         clipboard.pasteInto(node.data.branchId);
     }
 
-    pasteNotesAfterFromClipboard({node}) {
+    pasteNotesAfterFromClipboardCommand({node}) {
         clipboard.pasteAfter(node.data.branchId);
     }
 

src/public/app/widgets/ribbon_widgets/image_properties.js

@@ -28,7 +28,7 @@ const TPL = `
 
         <button class="image-open btn btn-sm btn-primary" type="button">Open</button>
 
-        <button class="image-copy-to-clipboard btn btn-sm btn-primary" type="button">Copy to clipboard</button>
+        <button class="image-copy-reference-to-clipboard btn btn-sm btn-primary" type="button">Copy reference to clipboard</button>
 
         <button class="image-upload-new-revision btn btn-sm btn-primary" type="button">Upload new revision</button>
     </div>
@@ -61,7 +61,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
         this.contentSized();
-        this.$copyToClipboardButton = this.$widget.find(".image-copy-to-clipboard");
+        this.$copyReferenceToClipboardButton = this.$widget.find(".image-copy-reference-to-clipboard");
         this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision");
         this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input");
         this.$fileName = this.$widget.find(".image-filename");
@@ -74,7 +74,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
         this.$imageDownloadButton = this.$widget.find(".image-download");
         this.$imageDownloadButton.on('click', () => openService.downloadFileNote(this.noteId));
 
-        this.$copyToClipboardButton.on('click', () => this.triggerEvent(`copyImageToClipboard`, {ntxId: this.noteContext.ntxId}));
+        this.$copyReferenceToClipboardButton.on('click', () => this.triggerEvent(`copyImageReferenceToClipboard`, {ntxId: this.noteContext.ntxId}));
 
         this.$uploadNewRevisionButton.on("click", () => {
             this.$uploadNewRevisionInput.trigger("click");
@@ -121,7 +121,5 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
         this.$fileName.text(attributeMap.originalFileName || "?");
         this.$fileSize.text(noteComplement.contentLength + " bytes");
         this.$fileType.text(note.mime);
-
-        const imageHash = utils.randomString(10);
     }
 }

src/public/app/widgets/ribbon_widgets/note_map.js

@@ -16,7 +16,6 @@ const TPL = `
             position: absolute;
             right: 5px;
             bottom: 5px;
-            font-size: 180%;
             z-index: 1000;
         }
         

src/public/app/widgets/type_widgets/abstract_text_type_widget.js

@@ -50,21 +50,25 @@ export default class AbstractTextTypeWidget extends TypeWidget {
         const note = await froca.getNote(noteId);
 
         if (note) {
+            const $wrapper = $('<div class="include-note-wrapper">');
+
             const $link = await linkService.createNoteLink(note.noteId, {
                 showTooltip: false
             });
 
-            $el.empty().append(
+            $wrapper.empty().append(
                 $('<h4 class="include-note-title">')
                     .append($link)
             );
 
             const {$renderedContent, type} = await noteContentRenderer.getRenderedContent(note);
 
-            $el.append(
+            $wrapper.append(
                 $(`<div class="include-note-content type-${type}">`)
                     .append($renderedContent)
             );
+
+            $el.empty().append($wrapper);
         }
     }
 

src/public/app/widgets/type_widgets/editable_code.js

@@ -1,11 +1,6 @@
 import libraryLoader from "../../services/library_loader.js";
 import TypeWidget from "./type_widget.js";
 import keyboardActionService from "../../services/keyboard_actions.js";
-import server from "../../services/server.js";
-import ws from "../../services/ws.js";
-import appContext from "../../services/app_context.js";
-import toastService from "../../services/toast.js";
-import treeService from "../../services/tree.js";
 import options from "../../services/options.js";
 
 const TPL = `
@@ -49,7 +44,7 @@ export default class EditableCodeTypeWidget extends TypeWidget {
         delete CodeMirror.keyMap.default["Alt-Left"];
         delete CodeMirror.keyMap.default["Alt-Right"];
 
-        CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
+        CodeMirror.modeURL = window.glob.assetPath + '/libraries/codemirror/mode/%N/%N.js';
 
         this.codeEditor = CodeMirror(this.$editor[0], {
             value: "",
@@ -63,9 +58,9 @@ export default class EditableCodeTypeWidget extends TypeWidget {
             gutters: ["CodeMirror-lint-markers"],
             lineNumbers: true,
             tabindex: 300,
-            // we linewrap partly also because without it horizontal scrollbar displays only when you scroll
+            // we line wrap partly also because without it horizontal scrollbar displays only when you scroll
             // all the way to the bottom of the note. With line wrap there's no horizontal scrollbar so no problem
-            lineWrapping: true,
+            lineWrapping: options.is('codeLineWrapEnabled'),
             dragDrop: false, // with true the editor inlines dropped files which is not what we expect
             placeholder: "Type the content of your code note here..."
         });

src/public/app/widgets/type_widgets/image.js

@@ -2,6 +2,7 @@ import utils from "../../services/utils.js";
 import toastService from "../../services/toast.js";
 import TypeWidget from "./type_widget.js";
 import libraryLoader from "../../services/library_loader.js";
+import contextMenu from "../../services/context_menu.js";
 
 const TPL = `
 <div class="note-detail-image note-detail-printable">
@@ -54,6 +55,37 @@ class ImageTypeWidget extends TypeWidget {
             });
         });
 
+        if (utils.isElectron()) {
+            // for browser we want to let the native menu
+            this.$imageView.on('contextmenu', e => {
+                e.preventDefault();
+
+                contextMenu.show({
+                    x: e.pageX,
+                    y: e.pageY,
+                    items: [
+                        {
+                            title: "Copy reference to clipboard",
+                            command: "copyImageReferenceToClipboard",
+                            uiIcon: "bx bx-empty"
+                        },
+                        {title: "Copy image to clipboard", command: "copyImageToClipboard", uiIcon: "bx bx-empty"},
+                    ],
+                    selectMenuItemHandler: ({command}) => {
+                        if (command === 'copyImageReferenceToClipboard') {
+                            this.copyImageReferenceToClipboard();
+                        } else if (command === 'copyImageToClipboard') {
+                            const webContents = utils.dynamicRequire('@electron/remote').getCurrentWebContents();
+                            utils.dynamicRequire('electron');
+                            webContents.copyImageAt(e.pageX, e.pageY);
+                        } else {
+                            throw new Error(`Unrecognized command ${command}`);
+                        }
+                    }
+                });
+            });
+        }
+
         super.doRender();
     }
 
@@ -61,11 +93,15 @@ class ImageTypeWidget extends TypeWidget {
         this.$imageView.prop("src", `api/images/${note.noteId}/${note.title}`);
     }
 
-    copyImageToClipboardEvent({ntxId}) {
+    copyImageReferenceToClipboardEvent({ntxId}) {
         if (!this.isNoteContext(ntxId)) {
             return;
         }
 
+        this.copyImageReferenceToClipboard();
+    }
+
+    copyImageReferenceToClipboard() {
         this.$imageWrapper.attr('contenteditable','true');
 
         try {