release 0.52.0-beta

Fix docker data permissions

.gitpod.yml

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

.idea/misc.xml

@@ -6,9 +6,4 @@
   <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="11" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/out" />
   </component>
-  <component name="SwUserDefinedSpecifications">
-    <option name="specTypeByUrl">
-      <map />
-    </option>
-  </component>
 </project>

Dockerfile

@@ -1,5 +1,5 @@
 # !!! Don't try to build this Dockerfile directly, run it through bin/build-docker.sh script !!!
-FROM node:16.14.2-alpine
+FROM node:16.15.0-alpine
 
 # Create app directory
 WORKDIR /usr/src/app
@@ -21,10 +21,15 @@ RUN set -x \
     && npm install --production \
     && apk del .build-dependencies
 
+# Some setup tools need to be kept
+RUN apk add --no-cache su-exec
+
 # Bundle app source
 COPY . .
 
-USER node
+# Add application user and setup proper volume permissions
+RUN adduser -s /bin/false node; exit 0
 
+# Start the application
 EXPOSE 8080
-CMD [ "node", "./src/www" ]
+CMD [ "./start-docker.sh" ]

bin/build-server.sh

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

bin/copy-trilium.sh

@@ -5,7 +5,7 @@ if [[ $# -eq 0 ]] ; then
     exit 1
 fi
 
-n exec 16.14.2 npm run webpack
+n exec 16.15.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.14.2 npm install --only=prod)
+(cd $DIR && n exec 16.15.0 npm install --only=prod)
 
 # cleanup of useless files in dependencies
 rm -r $DIR/node_modules/image-q/demo

db/migrations/0195__remove_recent_notes_from_entity_changes.sql

@@ -0,0 +1,2 @@
+-- removing potential remnants of recent notes in entity changes, see https://github.com/zadam/trilium/issues/2842
+DELETE FROM entity_changes WHERE entityName = 'recent_notes';

docs/backend_api/becca_entities_note.js.html

@@ -266,7 +266,7 @@ class Note extends AbstractEntity {
 
     setContent(content, ignoreMissingProtectedSession = false) {
         if (content === null || content === undefined) {
-            throw new Error(`Cannot set null content to note ${this.noteId}`);
+            throw new Error(`Cannot set null content to note '${this.noteId}'`);
         }
 
         if (this.isStringNote()) {
@@ -288,7 +288,7 @@ class Note extends AbstractEntity {
                 pojo.content = protectedSessionService.encrypt(pojo.content);
             }
             else if (!ignoreMissingProtectedSession) {
-                throw new Error(`Cannot update content of noteId=${this.noteId} since we're out of protected session.`);
+                throw new Error(`Cannot update content of noteId '${this.noteId}' since we're out of protected session.`);
             }
         }
 

docs/backend_api/global.html

@@ -237,7 +237,7 @@
 
             
 
-            <td class="description last">text, code, file, image, search, book, relation-map - MANDATORY</td>
+            <td class="description last">text, code, file, image, search, book, relation-map, canvas - MANDATORY</td>
         </tr>
 
     

docs/backend_api/services_backend_script_api.js.html

@@ -238,7 +238,7 @@ function BackendScriptApi(currentNote, apiParams) {
      * @property {string} parentNoteId - MANDATORY
      * @property {string} title - MANDATORY
      * @property {string|buffer} content - MANDATORY
-     * @property {string} type - text, code, file, image, search, book, relation-map - MANDATORY
+     * @property {string} type - text, code, file, image, search, book, relation-map, canvas - MANDATORY
      * @property {string} mime - value is derived from default mimes for type
      * @property {boolean} isProtected - default is false
      * @property {boolean} isExpanded - default is false

docs/frontend_api/FrontendScriptApi.html

@@ -1772,7 +1772,7 @@
     
     <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#line327">line 327</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line345">line 345</a>
     </li></ul></dd>
     
 
@@ -1928,7 +1928,7 @@
     
     <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#line457">line 457</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line502">line 502</a>
     </li></ul></dd>
     
 
@@ -2288,7 +2288,7 @@
     
     <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#line319">line 319</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line337">line 337</a>
     </li></ul></dd>
     
 
@@ -2479,6 +2479,223 @@
     
 
     
+    <h4 class="name" id="getActiveNoteDetailWidget"><span class="type-signature"></span>getActiveNoteDetailWidget<span class="signature">()</span><span class="type-signature"> &rarr; {Promise.&lt;NoteDetailWidget>}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Get access to the widget handling note detail. Methods like `getWidgetType()` and `getTypeWidget()` to get to the
+implementation of actual widget type.
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<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#line377">line 377</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Promise.&lt;NoteDetailWidget></span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="getActiveTabCodeEditor"><span class="type-signature"></span>getActiveTabCodeEditor<span class="signature">()</span><span class="type-signature"> &rarr; {Promise.&lt;CodeMirror>}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    See https://codemirror.net/doc/manual.html#api
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<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#line368">line 368</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    instance of CodeMirror
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Promise.&lt;CodeMirror></span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
     <h4 class="name" id="getActiveTabNote"><span class="type-signature"></span>getActiveTabNote<span class="signature">()</span><span class="type-signature"> &rarr; {<a href="NoteShort.html">NoteShort</a>}</span></h4>
     
 
@@ -2527,7 +2744,7 @@
     
     <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#line333">line 333</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line351">line 351</a>
     </li></ul></dd>
     
 
@@ -2633,7 +2850,7 @@
     
     <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#line347">line 347</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line383">line 383</a>
     </li></ul></dd>
     
 
@@ -2691,7 +2908,7 @@
     
 
     
-    <h4 class="name" id="getActiveTabTextEditor"><span class="type-signature"></span>getActiveTabTextEditor<span class="signature">(callback)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="getActiveTabTextEditor"><span class="type-signature"></span>getActiveTabTextEditor<span class="signature">(callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Promise.&lt;CKEditor>}</span></h4>
     
 
     
@@ -2723,6 +2940,8 @@
         <th>Type</th>
 
         
+        <th>Attributes</th>
+        
 
         
 
@@ -2743,10 +2962,20 @@
             </td>
 
             
+                <td class="attributes">
+                
+                    &lt;optional><br>
                 
 
                 
-            <td class="description last">method receiving "textEditor" instance</td>
+
+                
+                </td>
+            
+
+            
+
+            <td class="description last">deprecated (use returned promise): callback receiving "textEditor" instance</td>
         </tr>
 
     
@@ -2787,7 +3016,7 @@
     
     <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#line341">line 341</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line360">line 360</a>
     </li></ul></dd>
     
 
@@ -2812,6 +3041,183 @@
 
 
 
+<h5>Returns:</h5>
+
+        
+<div class="param-desc">
+    instance of CKEditor
+</div>
+
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Promise.&lt;CKEditor></span>
+
+
+    </dd>
+</dl>
+
+    
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="getComponentByEl"><span class="type-signature"></span>getComponentByEl<span class="signature">(el)</span><span class="type-signature"> &rarr; {Component}</span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Returns component which owns given DOM element (the nearest parent component in DOM tree)
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>el</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">Element</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last">DOM element</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#line392">line 392</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h5>Returns:</h5>
+
+        
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">Component</span>
+
+
+    </dd>
+</dl>
+
+    
 
 
 
@@ -2926,7 +3332,7 @@
     
     <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#line399">line 399</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line444">line 444</a>
     </li></ul></dd>
     
 
@@ -3081,7 +3487,7 @@
     
     <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#line408">line 408</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line453">line 453</a>
     </li></ul></dd>
     
 
@@ -3343,7 +3749,7 @@ if some action needs to happen on only one specific instance.
     
     <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#line426">line 426</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line471">line 471</a>
     </li></ul></dd>
     
 
@@ -3806,7 +4212,7 @@ otherwise (by e.g. createNoteLink())
     
     <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#line389">line 389</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line434">line 434</a>
     </li></ul></dd>
     
 
@@ -3961,7 +4367,7 @@ otherwise (by e.g. createNoteLink())
     
     <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#line417">line 417</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line462">line 462</a>
     </li></ul></dd>
     
 
@@ -4116,7 +4522,7 @@ otherwise (by e.g. createNoteLink())
     
     <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#line435">line 435</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line480">line 480</a>
     </li></ul></dd>
     
 
@@ -4553,7 +4959,7 @@ otherwise (by e.g. createNoteLink())
     
     <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#line359">line 359</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line404">line 404</a>
     </li></ul></dd>
     
 
@@ -4709,7 +5115,7 @@ otherwise (by e.g. createNoteLink())
     
     <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#line370">line 370</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line415">line 415</a>
     </li></ul></dd>
     
 
@@ -4865,7 +5271,7 @@ otherwise (by e.g. createNoteLink())
     
     <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#line379">line 379</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line424">line 424</a>
     </li></ul></dd>
     
 
@@ -5002,7 +5408,7 @@ otherwise (by e.g. createNoteLink())
     
     <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#line484">line 484</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line529">line 529</a>
     </li></ul></dd>
     
 
@@ -5156,7 +5562,7 @@ otherwise (by e.g. createNoteLink())
     
     <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#line475">line 475</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line520">line 520</a>
     </li></ul></dd>
     
 
@@ -5242,7 +5648,7 @@ otherwise (by e.g. createNoteLink())
     
     <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#line306">line 306</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line324">line 324</a>
     </li></ul></dd>
     
 
@@ -6097,7 +6503,7 @@ Internally this serializes the anonymous function into string and sends it to ba
     
     <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#line444">line 444</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line489">line 489</a>
     </li></ul></dd>
     
 
@@ -6248,7 +6654,7 @@ Internally this serializes the anonymous function into string and sends it to ba
     
     <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#line353">line 353</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line398">line 398</a>
     </li></ul></dd>
     
 
@@ -6552,6 +6958,326 @@ Internally this serializes the anonymous function into string and sends it to ba
 
 
 
+        
+            
+
+    
+
+    
+    <h4 class="name" id="triggerCommand"><span class="type-signature"></span>triggerCommand<span class="signature">(name, data)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Trigger command.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</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="description last"></td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></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#line309">line 309</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id="triggerEvent"><span class="type-signature"></span>triggerEvent<span class="signature">(name, data)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    Trigger event.
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</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="description last"></td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>data</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">object</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></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#line318">line 318</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
         
             
 
@@ -6614,7 +7340,7 @@ Typical use case is when new note has been created, we should wait until it is s
     
     <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#line468">line 468</a>
+        <a href="services_frontend_script_api.js.html">services/frontend_script_api.js</a>, <a href="services_frontend_script_api.js.html#line513">line 513</a>
     </li></ul></dd>
     
 

docs/frontend_api/NoteShort.html

@@ -167,7 +167,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line27">line 27</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line28">line 28</a>
     </li></ul></dd>
     
 
@@ -267,7 +267,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line36">line 36</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line37">line 37</a>
     </li></ul></dd>
     
 
@@ -335,7 +335,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line44">line 44</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line45">line 45</a>
     </li></ul></dd>
     
 
@@ -403,7 +403,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line50">line 50</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line51">line 51</a>
     </li></ul></dd>
     
 
@@ -471,7 +471,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line61">line 61</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line62">line 62</a>
     </li></ul></dd>
     
 
@@ -543,7 +543,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line71">line 71</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line72">line 72</a>
     </li></ul></dd>
     
 
@@ -611,7 +611,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line57">line 57</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line58">line 58</a>
     </li></ul></dd>
     
 
@@ -679,7 +679,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line42">line 42</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line43">line 43</a>
     </li></ul></dd>
     
 
@@ -747,7 +747,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line47">line 47</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line48">line 48</a>
     </li></ul></dd>
     
 
@@ -815,7 +815,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line39">line 39</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line40">line 40</a>
     </li></ul></dd>
     
 
@@ -883,7 +883,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line59">line 59</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line60">line 60</a>
     </li></ul></dd>
     
 
@@ -955,7 +955,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line66">line 66</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line67">line 67</a>
     </li></ul></dd>
     
 
@@ -1103,7 +1103,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line498">line 498</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line499">line 499</a>
     </li></ul></dd>
     
 
@@ -1303,7 +1303,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line236">line 236</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line237">line 237</a>
     </li></ul></dd>
     
 
@@ -1481,7 +1481,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line520">line 520</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line521">line 521</a>
     </li></ul></dd>
     
 
@@ -1589,7 +1589,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line161">line 161</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line162">line 162</a>
     </li></ul></dd>
     
 
@@ -1693,7 +1693,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line144">line 144</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line145">line 145</a>
     </li></ul></dd>
     
 
@@ -1795,7 +1795,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line171">line 171</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line172">line 172</a>
     </li></ul></dd>
     
 
@@ -1897,7 +1897,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line209">line 209</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line210">line 210</a>
     </li></ul></dd>
     
 
@@ -1999,7 +1999,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line214">line 214</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line215">line 215</a>
     </li></ul></dd>
     
 
@@ -2150,7 +2150,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line560">line 560</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line561">line 561</a>
     </li></ul></dd>
     
 
@@ -2317,7 +2317,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line384">line 384</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line385">line 385</a>
     </li></ul></dd>
     
 
@@ -2472,7 +2472,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line584">line 584</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line585">line 585</a>
     </li></ul></dd>
     
 
@@ -2582,7 +2582,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line706">line 706</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line707">line 707</a>
     </li></ul></dd>
     
 
@@ -2756,7 +2756,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line487">line 487</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line488">line 488</a>
     </li></ul></dd>
     
 
@@ -2956,7 +2956,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line223">line 223</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line224">line 224</a>
     </li></ul></dd>
     
 
@@ -3134,7 +3134,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line509">line 509</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line510">line 510</a>
     </li></ul></dd>
     
 
@@ -3289,7 +3289,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line554">line 554</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line555">line 555</a>
     </li></ul></dd>
     
 
@@ -3456,7 +3456,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line376">line 376</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line377">line 377</a>
     </li></ul></dd>
     
 
@@ -3611,7 +3611,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line578">line 578</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line579">line 579</a>
     </li></ul></dd>
     
 
@@ -3766,7 +3766,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line566">line 566</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line567">line 567</a>
     </li></ul></dd>
     
 
@@ -3933,7 +3933,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line452">line 452</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line453">line 453</a>
     </li></ul></dd>
     
 
@@ -4088,7 +4088,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line590">line 590</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line591">line 591</a>
     </li></ul></dd>
     
 
@@ -4194,7 +4194,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line151">line 151</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line152">line 152</a>
     </li></ul></dd>
     
 
@@ -4296,7 +4296,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line136">line 136</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line137">line 137</a>
     </li></ul></dd>
     
 
@@ -4398,7 +4398,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line179">line 179</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line180">line 180</a>
     </li></ul></dd>
     
 
@@ -4500,7 +4500,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line184">line 184</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line185">line 185</a>
     </li></ul></dd>
     
 
@@ -4651,7 +4651,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line572">line 572</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line573">line 573</a>
     </li></ul></dd>
     
 
@@ -4818,7 +4818,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line460">line 460</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line461">line 461</a>
     </li></ul></dd>
     
 
@@ -4973,7 +4973,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line602">line 602</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line603">line 603</a>
     </li></ul></dd>
     
 
@@ -5143,7 +5143,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line612">line 612</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line613">line 613</a>
     </li></ul></dd>
     
 
@@ -5294,7 +5294,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line596">line 596</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line597">line 597</a>
     </li></ul></dd>
     
 
@@ -5400,7 +5400,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line750">line 750</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line751">line 751</a>
     </li></ul></dd>
     
 
@@ -5513,7 +5513,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line685">line 685</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line686">line 686</a>
     </li></ul></dd>
     
 
@@ -5619,7 +5619,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line695">line 695</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line696">line 696</a>
     </li></ul></dd>
     
 
@@ -5721,7 +5721,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line626">line 626</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line627">line 627</a>
     </li></ul></dd>
     
 
@@ -5895,7 +5895,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line469">line 469</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line470">line 470</a>
     </li></ul></dd>
     
 
@@ -6001,7 +6001,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line166">line 166</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line167">line 167</a>
     </li></ul></dd>
     
 
@@ -6152,7 +6152,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line536">line 536</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line537">line 537</a>
     </li></ul></dd>
     
 
@@ -6330,7 +6330,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line478">line 478</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line479">line 479</a>
     </li></ul></dd>
     
 
@@ -6485,7 +6485,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line530">line 530</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line531">line 531</a>
     </li></ul></dd>
     
 
@@ -6640,7 +6640,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line542">line 542</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line543">line 543</a>
     </li></ul></dd>
     
 
@@ -6795,7 +6795,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line548">line 548</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line549">line 549</a>
     </li></ul></dd>
     
 
@@ -6903,7 +6903,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line678">line 678</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line679">line 679</a>
     </li></ul></dd>
     
 
@@ -6987,7 +6987,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line745">line 745</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line746">line 746</a>
     </li></ul></dd>
     
 
@@ -7093,7 +7093,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line737">line 737</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line738">line 738</a>
     </li></ul></dd>
     
 
@@ -7199,7 +7199,7 @@ This note's representation is used in note tree and is kept in Froca.</div>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line109">line 109</a>
+        <a href="entities_note_short.js.html">entities/note_short.js</a>, <a href="entities_note_short.js.html#line110">line 110</a>
     </li></ul></dd>
     
 

docs/frontend_api/entities_note_short.js.html

@@ -44,7 +44,8 @@ const NOTE_TYPE_ICONS = {
     "relation-map": "bx bx-map-alt",
     "book": "bx bx-book",
     "note-map": "bx bx-map-alt",
-    "mermaid": "bx bx-selection"
+    "mermaid": "bx bx-selection",
+    "canvas": "bx bx-pen"
 };
 
 /**
@@ -152,7 +153,7 @@ class NoteShort {
             return JSON.parse(content);
         }
         catch (e) {
-            console.log(`Cannot parse content of note ${this.noteId}: `, e.message);
+            console.log(`Cannot parse content of note '${this.noteId}': `, e.message);
 
             return null;
         }

docs/frontend_api/services_frontend_script_api.js.html

@@ -327,6 +327,24 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, $contain
      */
     this.showError = toastService.showError;
 
+    /**
+     * Trigger command.
+     *
+     * @method
+     * @param {string} name
+     * @param {object} data
+     */
+    this.triggerCommand = (name, data) => appContext.triggerCommand(name, data);
+
+    /**
+     * Trigger event.
+     *
+     * @method
+     * @param {string} name
+     * @param {object} data
+     */
+    this.triggerEvent = (name, data) => appContext.triggerEvent(name, data);
+
     /**
      * @method
      * @deprecated - this is now no-op since all the changes should be gracefully handled per widget
@@ -349,30 +367,104 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, $contain
     /**
      * Adds given text to the editor cursor
      *
+     * @deprecated use addTextToActiveContextEditor() instead
      * @param {string} text - this must be clear text, HTML is not supported.
      * @method
      */
-    this.addTextToActiveTabEditor = text => appContext.triggerCommand('addTextToActiveEditor', {text});
+    this.addTextToActiveTabEditor = text => {
+        console.warn("api.addTextToActiveTabEditor() is deprecated, use addTextToActiveContextEditor() instead.");
+
+        return appContext.triggerCommand('addTextToActiveEditor', {text});
+    };
+
+    /**
+     * Adds given text to the editor cursor
+     *
+     * @param {string} text - this must be clear text, HTML is not supported.
+     * @method
+     */
+    this.addTextToActiveContextEditor = text => appContext.triggerCommand('addTextToActiveEditor', {text});
+
+    /**
+     * @method
+     * @deprecated use getActiveContextNote() instead
+     * @returns {NoteShort} active note (loaded into right pane)
+     */
+    this.getActiveTabNote = () => {
+        console.warn("api.getActiveTabNote() is deprecated, use getActiveContextNote() instead.");
+
+        return appContext.tabManager.getActiveContextNote();
+    };
 
     /**
      * @method
      * @returns {NoteShort} active note (loaded into right pane)
      */
-    this.getActiveTabNote = () => appContext.tabManager.getActiveContextNote();
+    this.getActiveContextNote = () => appContext.tabManager.getActiveContextNote();
+
+    /**
+     * See https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html for a documentation on the returned instance.
+     *
+     * @deprecated use getActiveContextTextEditor()
+     * @method
+     * @param [callback] - callback receiving "textEditor" instance
+     */
+    this.getActiveTabTextEditor = callback => {
+        console.warn("api.getActiveTabTextEditor() is deprecated, use getActiveContextTextEditor() instead.");
+
+        return appContext.tabManager.getActiveContextTextEditor(callback);
+    };
 
     /**
      * See https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html for a documentation on the returned instance.
      *
      * @method
-     * @param callback - method receiving "textEditor" instance
+     * @returns {Promise<CKEditor>} instance of CKEditor
      */
-    this.getActiveTabTextEditor = callback => appContext.triggerCommand('executeInActiveEditor', {callback});
+    this.getActiveContextTextEditor = () => appContext.tabManager.getActiveContextTextEditor();
+
+    /**
+     * See https://codemirror.net/doc/manual.html#api
+     *
+     * @method
+     * @returns {Promise<CodeMirror>} instance of CodeMirror
+     */
+    this.getActiveContextCodeEditor = () => appContext.tabManager.getActiveContextCodeEditor();
+
+    /**
+     * Get access to the widget handling note detail. Methods like `getWidgetType()` and `getTypeWidget()` to get to the
+     * implementation of actual widget type.
+     *
+     * @method
+     * @returns {Promise<NoteDetailWidget>}
+     */
+    this.getActiveNoteDetailWidget = () => new Promise(resolve => appContext.triggerCommand('executeInActiveNoteDetailWidget', {callback: resolve}));
+
+    /**
+     * @method
+     * @deprecated use getActiveContextNotePath() instead
+     * @returns {Promise<string|null>} returns note path of active note or null if there isn't active note
+     */
+    this.getActiveTabNotePath = () => {
+        console.warn("api.getActiveTabNotePath() is deprecated, use getActiveContextNotePath() instead.");
+
+        return appContext.tabManager.getActiveContextNotePath();
+    };
 
     /**
      * @method
      * @returns {Promise<string|null>} returns note path of active note or null if there isn't active note
      */
-    this.getActiveTabNotePath = () => appContext.tabManager.getActiveContextNotePath();
+    this.getActiveContextNotePath = () => appContext.tabManager.getActiveContextNotePath();
+
+    /**
+     * Returns component which owns given DOM element (the nearest parent component in DOM tree)
+     *
+     * @method
+     * @param {Element} el - DOM element
+     * @returns {Component}
+     */
+    this.getComponentByEl = el => appContext.getComponentByEl(el);
 
     /**
      * @method

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.14.2, but it will probably work on other versions as well.
+This tool requires node.js, testing has been done on 16.15.0, but it will probably work on other versions as well.
 
 ```
 npm install

libraries/lodash.debounce.js

@@ -0,0 +1,70 @@
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing. The function also has a property 'clear'
+ * that is a function which will clear the timer to prevent previously scheduled executions.
+ *
+ * @source underscore.js
+ * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
+ * @param {Function} function to wrap
+ * @param {Number} timeout in ms (`100`)
+ * @param {Boolean} whether to execute at the beginning (`false`)
+ * @api public
+ */
+function debounce(func, wait_ms, immediate){
+  var timeout, args, context, timestamp, result;
+  if (null == wait_ms) wait_ms = 100;
+
+  function later() {
+    var last = Date.now() - timestamp;
+
+    if (last < wait_ms && last >= 0) {
+      timeout = setTimeout(later, wait_ms - last);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(context, args);
+        context = args = null;
+      }
+    }
+  };
+
+  var debounced = function(){
+    context = this;
+    args = arguments;
+    timestamp = Date.now();
+    var callNow = immediate && !timeout;
+    if (!timeout) timeout = setTimeout(later, wait_ms);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+
+    return result;
+  };
+
+  debounced.clear = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+
+  debounced.flush = function() {
+    if (timeout) {
+      result = func.apply(context, args);
+      context = args = null;
+
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+
+  return debounced;
+};
+
+// Adds compatibility for ES modules
+debounce.debounce = debounce;
+
+export default debounce;

package.json

@@ -2,7 +2,7 @@
   "name": "trilium",
   "productName": "Trilium Notes",
   "description": "Trilium Notes",
-  "version": "0.51.1-beta",
+  "version": "0.52.0-beta",
   "license": "AGPL-3.0-only",
   "main": "electron.js",
   "bin": {
@@ -21,31 +21,32 @@
     "webpack": "npx webpack -c webpack-desktop.config.js && npx webpack -c webpack-mobile.config.js && npx webpack -c webpack-setup.config.js",
     "test": "jasmine",
     "test-es6": "node -r esm spec-es6/attribute_parser.spec.js ",
-    "test-all": "npm run test && npm run test-es6"
+    "test-all": "npm run test && npm run test-es6",
+    "postinstall": "rimraf ./node_modules/canvas"
   },
   "dependencies": {
+    "@electron/remote": "2.0.8",
+    "@excalidraw/excalidraw": "0.11.0",
     "archiver": "5.3.1",
     "async-mutex": "0.3.2",
-    "axios": "0.26.1",
+    "axios": "0.27.2",
     "better-sqlite3": "7.4.5",
     "chokidar": "3.5.3",
     "cls-hooked": "4.2.2",
     "commonmark": "0.30.0",
     "cookie-parser": "1.4.6",
     "csurf": "1.11.0",
-    "dayjs": "1.11.1",
+    "dayjs": "1.11.2",
-    "ejs": "3.1.6",
+    "ejs": "3.1.8",
     "electron-debug": "3.2.0",
     "electron-dl": "3.3.1",
-    "electron-find": "1.0.7",
     "electron-window-state": "5.0.3",
-    "@electron/remote": "2.0.8",
+    "express": "4.18.1",
-    "express": "4.17.3",
     "express-partial-content": "1.0.2",
-    "express-rate-limit": "6.3.0",
+    "express-rate-limit": "6.4.0",
-    "express-session": "1.17.2",
+    "express-session": "1.17.3",
     "fs-extra": "10.1.0",
-    "helmet": "5.0.2",
+    "helmet": "5.1.0",
     "html": "1.0.0",
     "html2plaintext": "2.1.4",
     "http-proxy-agent": "5.0.0",
@@ -59,11 +60,13 @@
     "jsdom": "19.0.0",
     "mime-types": "2.1.35",
     "multer": "1.4.4",
-    "node-abi": "3.15.0",
+    "node-abi": "3.21.0",
     "normalize-strings": "1.1.1",
     "open": "8.4.0",
     "portscanner": "2.2.0",
     "rand-token": "1.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "request": "2.88.2",
     "rimraf": "3.0.2",
     "sanitize-filename": "1.6.3",
@@ -77,21 +80,21 @@
     "tmp": "0.2.1",
     "turndown": "7.1.1",
     "unescape": "1.0.1",
-    "ws": "8.5.0",
+    "ws": "8.6.0",
     "yauzl": "2.10.0"
   },
   "devDependencies": {
     "cross-env": "7.0.3",
-    "electron": "16.2.1",
+    "electron": "16.2.8",
     "electron-builder": "23.0.3",
-    "electron-packager": "15.5.0",
+    "electron-packager": "15.5.1",
     "electron-rebuild": "3.2.7",
     "esm": "3.2.25",
     "jasmine": "4.1.0",
     "jsdoc": "3.6.10",
     "lorem-ipsum": "2.0.4",
     "rcedit": "3.0.1",
-    "webpack": "5.72.0",
+    "webpack": "5.72.1",
     "webpack-cli": "4.9.2"
   },
   "optionalDependencies": {

spec/search/parser.spec.js

@@ -58,11 +58,8 @@ describe("Parser", () => {
         expect(subs[0].constructor.name).toEqual("NoteFlatTextExp");
         expect(subs[0].tokens).toEqual(["hello", "hi"]);
 
-        expect(subs[1].constructor.name).toEqual("NoteContentProtectedFulltextExp");
+        expect(subs[1].constructor.name).toEqual("NoteContentFulltextExp");
         expect(subs[1].tokens).toEqual(["hello", "hi"]);
-
-        expect(subs[2].constructor.name).toEqual("NoteContentUnprotectedFulltextExp");
-        expect(subs[2].tokens).toEqual(["hello", "hi"]);
     });
 
     it("simple label comparison", () => {

src/app.js

@@ -20,7 +20,8 @@ app.set('view engine', 'ejs');
 
 app.use(helmet({
     hidePoweredBy: false, // errors out in electron
-    contentSecurityPolicy: false
+    contentSecurityPolicy: false,
+    crossOriginEmbedderPolicy: false
 }));
 
 app.use(express.text({limit: '500mb'}));
@@ -30,6 +31,11 @@ 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')));
+// 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')));
+// 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')));
 const sessionParser = session({
     secret: sessionSecret,

src/public/app/dialogs/markdown_import.js

@@ -16,7 +16,7 @@ async function convertMarkdownToHtml(text) {
 
     const result = writer.render(parsed);
 
-    appContext.triggerCommand('executeInActiveEditor', {
+    appContext.triggerCommand('executeWithTextEditor', {
         callback: textEditor => {
             const viewFragment = textEditor.data.processor.toView(result);
             const modelFragment = textEditor.data.toModel(viewFragment);
@@ -24,7 +24,8 @@ async function convertMarkdownToHtml(text) {
             textEditor.model.insertContent(modelFragment, textEditor.model.document.selection);
 
             toastService.showMessage("Markdown content has been imported into the document.");
-        }
+        },
+        ntxId: this.ntxId
     });
 }
 

src/public/app/dialogs/note_revisions.js

@@ -171,6 +171,28 @@ async function setContentPane() {
 
         $content.html($table);
     }
+    else if (revisionItem.type === 'canvas') {
+        /**
+         * FIXME: We load a font called Virgil.wof2, which originates from excalidraw.com
+         *        REMOVE external dependency!!!! This is defined in the svg in defs.style
+         */
+        const content = fullNoteRevision.content;
+
+        try {
+            const data = JSON.parse(content)
+            const svg = data.svg || "no svg present."
+
+            /**
+             * maxWidth: 100% use full width of container but do not enlarge!
+             * height:auto to ensure that height scales with width
+             */
+            const $svgHtml = $(svg).css({maxWidth: "100%", height: "auto"});
+            $content.html($('<div>').append($svgHtml));
+        } catch(err) {
+            console.error("error parsing fullNoteRevision.content as JSON", fullNoteRevision.content, err);
+            $content.html($("<div>").text("Error parsing content. Please check console.error() for more details."));
+        }
+    }
     else {
         $content.text("Preview isn't available for this note type.");
     }

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

@@ -33,7 +33,13 @@ const TPL = `
 </div>
 
 <div>
-    <h4>Image compression</h4>
+    <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">
@@ -216,6 +222,15 @@ export default class ProtectedSessionOptions {
             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");
 
@@ -225,7 +240,7 @@ export default class ProtectedSessionOptions {
             } else {
                 this.$imageCompressionWrapper.addClass("disabled-field");
             }
-        }
+        };
 
         this.$enableImageCompression.on("change", () => {
             const isChecked = this.$enableImageCompression.prop("checked");
@@ -234,7 +249,7 @@ export default class ProtectedSessionOptions {
             server.put('options', opts).then(() => toastService.showMessage("Options changed have been saved."));
 
             this.setImageCompression(isChecked);
-        })
+        });
     }
 
     optionsLoaded(options) {
@@ -251,6 +266,9 @@ export default class ProtectedSessionOptions {
         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);

src/public/app/entities/note_short.js

@@ -16,7 +16,8 @@ const NOTE_TYPE_ICONS = {
     "relation-map": "bx bx-map-alt",
     "book": "bx bx-book",
     "note-map": "bx bx-map-alt",
-    "mermaid": "bx bx-selection"
+    "mermaid": "bx bx-selection",
+    "canvas": "bx bx-pen"
 };
 
 /**

src/public/app/layouts/desktop_layout.js

@@ -48,6 +48,7 @@ import BookmarkButtons from "../widgets/bookmark_buttons.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
 import BacklinksWidget from "../widgets/backlinks.js";
 import SharedInfoWidget from "../widgets/shared_info.js";
+import FindWidget from "../widgets/find.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -161,6 +162,7 @@ export default class DesktopLayout {
                                         .child(new SearchResultWidget())
                                         .child(new SqlResultWidget())
                                 )
+                                .child(new FindWidget())
                                 .child(...this.customWidgets.get('node-detail-pane'))
                             )
                         )

src/public/app/services/app_context.js

@@ -11,7 +11,6 @@ import Component from "../widgets/component.js";
 import keyboardActionsService from "./keyboard_actions.js";
 import MobileScreenSwitcherExecutor from "../widgets/mobile_widgets/mobile_screen_switcher.js";
 import MainTreeExecutors from "./main_tree_executors.js";
-import protectedSessionHolder from "./protected_session_holder.js";
 import toast from "./toast.js";
 
 class AppContext extends Component {

src/public/app/services/entrypoints.js

@@ -39,34 +39,10 @@ export default class Entrypoints extends Component {
         }
     }
 
-    findInTextCommand() {
-        if (!utils.isElectron()) {
-            return;
-        }
-
-        const remote = utils.dynamicRequire('@electron/remote');
-        const {FindInPage} = utils.dynamicRequire('electron-find');
-        const findInPage = new FindInPage(remote.getCurrentWebContents(), {
-            offsetTop: 10,
-            offsetRight: 10,
-            boxBgColor: 'var(--main-background-color)',
-            boxShadowColor: '#000',
-            inputColor: 'var(--input-text-color)',
-            inputBgColor: 'var(--input-background-color)',
-            inputFocusColor: '#555',
-            textColor: 'var(--main-text-color)',
-            textHoverBgColor: '#555',
-            caseSelectedColor: 'var(--main-border-color)'
-        });
-
-        findInPage.openFindWindow();
-    }
-
     async createNoteIntoInboxCommand() {
         const inboxNote = await dateNoteService.getInboxNote();
 
         const {note} = await server.post(`notes/${inboxNote.noteId}/children?target=into`, {
-            title: 'new note',
             content: '',
             type: 'text',
             isProtected: inboxNote.isProtected && protectedSessionHolder.isProtectedSessionAvailable()

src/public/app/services/frontend_script_api.js

@@ -299,6 +299,24 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, $contain
      */
     this.showError = toastService.showError;
 
+    /**
+     * Trigger command.
+     *
+     * @method
+     * @param {string} name
+     * @param {object} data
+     */
+    this.triggerCommand = (name, data) => appContext.triggerCommand(name, data);
+
+    /**
+     * Trigger event.
+     *
+     * @method
+     * @param {string} name
+     * @param {object} data
+     */
+    this.triggerEvent = (name, data) => appContext.triggerEvent(name, data);
+
     /**
      * @method
      * @deprecated - this is now no-op since all the changes should be gracefully handled per widget
@@ -321,30 +339,104 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, $contain
     /**
      * Adds given text to the editor cursor
      *
+     * @deprecated use addTextToActiveContextEditor() instead
      * @param {string} text - this must be clear text, HTML is not supported.
      * @method
      */
-    this.addTextToActiveTabEditor = text => appContext.triggerCommand('addTextToActiveEditor', {text});
+    this.addTextToActiveTabEditor = text => {
+        console.warn("api.addTextToActiveTabEditor() is deprecated, use addTextToActiveContextEditor() instead.");
+
+        return appContext.triggerCommand('addTextToActiveEditor', {text});
+    };
+
+    /**
+     * Adds given text to the editor cursor
+     *
+     * @param {string} text - this must be clear text, HTML is not supported.
+     * @method
+     */
+    this.addTextToActiveContextEditor = text => appContext.triggerCommand('addTextToActiveEditor', {text});
+
+    /**
+     * @method
+     * @deprecated use getActiveContextNote() instead
+     * @returns {NoteShort} active note (loaded into right pane)
+     */
+    this.getActiveTabNote = () => {
+        console.warn("api.getActiveTabNote() is deprecated, use getActiveContextNote() instead.");
+
+        return appContext.tabManager.getActiveContextNote();
+    };
 
     /**
      * @method
      * @returns {NoteShort} active note (loaded into right pane)
      */
-    this.getActiveTabNote = () => appContext.tabManager.getActiveContextNote();
+    this.getActiveContextNote = () => appContext.tabManager.getActiveContextNote();
+
+    /**
+     * See https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html for a documentation on the returned instance.
+     *
+     * @deprecated use getActiveContextTextEditor()
+     * @method
+     * @param [callback] - callback receiving "textEditor" instance
+     */
+    this.getActiveTabTextEditor = callback => {
+        console.warn("api.getActiveTabTextEditor() is deprecated, use getActiveContextTextEditor() instead.");
+
+        return appContext.tabManager.getActiveContext()?.getTextEditor(callback);
+    };
 
     /**
      * See https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html for a documentation on the returned instance.
      *
      * @method
-     * @param callback - method receiving "textEditor" instance
+     * @returns {Promise<CKEditor>} instance of CKEditor
      */
-    this.getActiveTabTextEditor = callback => appContext.triggerCommand('executeInActiveEditor', {callback});
+    this.getActiveContextTextEditor = () => appContext.tabManager.getActiveContext()?.getTextEditor();
+
+    /**
+     * See https://codemirror.net/doc/manual.html#api
+     *
+     * @method
+     * @returns {Promise<CodeMirror>} instance of CodeMirror
+     */
+    this.getActiveContextCodeEditor = () => appContext.tabManager.getActiveContext()?.getCodeEditor();
+
+    /**
+     * Get access to the widget handling note detail. Methods like `getWidgetType()` and `getTypeWidget()` to get to the
+     * implementation of actual widget type.
+     *
+     * @method
+     * @returns {Promise<NoteDetailWidget>}
+     */
+    this.getActiveNoteDetailWidget = () => new Promise(resolve => appContext.triggerCommand('executeInActiveNoteDetailWidget', {callback: resolve}));
+
+    /**
+     * @method
+     * @deprecated use getActiveContextNotePath() instead
+     * @returns {Promise<string|null>} returns note path of active note or null if there isn't active note
+     */
+    this.getActiveTabNotePath = () => {
+        console.warn("api.getActiveTabNotePath() is deprecated, use getActiveContextNotePath() instead.");
+
+        return appContext.tabManager.getActiveContextNotePath();
+    };
 
     /**
      * @method
      * @returns {Promise<string|null>} returns note path of active note or null if there isn't active note
      */
-    this.getActiveTabNotePath = () => appContext.tabManager.getActiveContextNotePath();
+    this.getActiveContextNotePath = () => appContext.tabManager.getActiveContextNotePath();
+
+    /**
+     * Returns component which owns given DOM element (the nearest parent component in DOM tree)
+     *
+     * @method
+     * @param {Element} el - DOM element
+     * @returns {Component}
+     */
+    this.getComponentByEl = el => appContext.getComponentByEl(el);
 
     /**
      * @method

src/public/app/services/library_loader.js

@@ -56,6 +56,20 @@ const MERMAID = {
     js: [ "libraries/mermaid.min.js" ]
 }
 
+const EXCALIDRAW = {
+    js: [
+        "node_modules/react/umd/react.production.min.js",
+        "node_modules/react-dom/umd/react-dom.production.min.js",
+        "node_modules/@excalidraw/excalidraw/dist/excalidraw.production.min.js",
+    ]
+};
+
+const MARKJS = {
+    js: [
+        "libraries/jquery.mark.es6.min.js"
+    ]
+};
+
 async function requireLibrary(library) {
     if (library.css) {
         library.css.map(cssUrl => requireCss(cssUrl));
@@ -106,5 +120,7 @@ export default {
     KATEX,
     WHEEL_ZOOM,
     FORCE_GRAPH,
-    MERMAID
+    MERMAID,
+    EXCALIDRAW,
+    MARKJS
 }

src/public/app/services/note_content_renderer.js

@@ -141,6 +141,27 @@ async function getRenderedContent(note, options = {}) {
 
         $renderedContent.append($content);
     }
+    else if (type === 'canvas') {
+        // make sure surrounding container has size of what is visible. Then image is shrinked to its boundaries
+        $renderedContent.css({height: "100%", width:"100%"});
+        
+        const noteComplement = await froca.getNoteComplement(note.noteId);
+        const content = noteComplement.content || "";
+
+        try {
+            const placeHolderSVG = "<svg />";
+            const data = JSON.parse(content)
+            const svg = data.svg || placeHolderSVG;
+            /**
+             * maxWidth: size down to 100% (full) width of container but do not enlarge!
+             * height:auto to ensure that height scales with width
+             */
+            $renderedContent.append($(svg).css({maxWidth: "100%", maxHeight: "100%", height: "auto", width: "auto"}));
+        } catch(err) {
+            console.error("error parsing content as JSON", content, err);
+            $renderedContent.append($("<div>").text("Error parsing content. Please check console.error() for more details."));
+        }
+    }
     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);

src/public/app/services/note_context.js

@@ -226,6 +226,28 @@ class NoteContext extends Component {
             && this.note.mime !== 'text/x-sqlite;schema=trilium'
             && !this.note.hasLabel('hideChildrenOverview');
     }
+
+    async getTextEditor(callback) {
+        return new Promise(resolve => appContext.triggerCommand('executeWithTextEditor', {
+            callback,
+            resolve,
+            ntxId: this.ntxId
+        }));
+    }
+
+    async getCodeEditor() {
+        return new Promise(resolve => appContext.triggerCommand('executeWithCodeEditor', {
+            resolve,
+            ntxId: this.ntxId
+        }));
+    }
+
+    async getContentElement() {
+        return new Promise(resolve => appContext.triggerCommand('executeWithContentElement', {
+            resolve,
+            ntxId: this.ntxId
+        }));
+    }
 }
 
 export default NoteContext;

src/public/app/services/note_create.js

@@ -28,8 +28,6 @@ async function createNote(parentNotePath, options = {}) {
         [options.title, options.content] = parseSelectedHtml(window.cutToNote.getSelectedHtml());
     }
 
-    const newNoteName = options.title || "new note";
-
     const parentNoteId = treeService.getNoteIdFromNotePath(parentNotePath);
 
     if (options.type === 'mermaid' && !options.content) {
@@ -41,7 +39,7 @@ async function createNote(parentNotePath, options = {}) {
     }
 
     const {note, branch} = await server.post(`notes/${parentNoteId}/children?target=${options.target}&targetBranchId=${options.targetBranchId || ""}`, {
-        title: newNoteName,
+        title: options.title,
         content: options.content || "",
         isProtected: options.isProtected,
         type: options.type,

src/public/app/services/note_list_renderer.js

@@ -99,13 +99,15 @@ const TPL = `
         padding: 10px;
     }
     
-    .note-book-content.type-image img {
+    .note-book-content.type-image img, .note-book-content.type-canvas svg {
         max-width: 100%;
         max-height: 100%;
         object-fit: contain;
     }
     
-    .note-book-card.type-image .note-book-content img, .note-book-card.type-text .note-book-content img {
+    .note-book-card.type-image .note-book-content img,
+    .note-book-card.type-text .note-book-content img,
+    .note-book-card.type-canvas .note-book-content img {
         max-width: 100%;
         max-height: 100%;
     }

src/public/app/services/protected_session_holder.js

@@ -1,17 +1,5 @@
-import options from './options.js';
 import server from "./server.js";
 
-let lastProtectedSessionOperationDate = 0;
-
-setInterval(() => {
-    const protectedSessionTimeout = options.getInt('protectedSessionTimeout');
-    if (lastProtectedSessionOperationDate
-        && Date.now() - lastProtectedSessionOperationDate > protectedSessionTimeout * 1000) {
-
-        resetProtectedSession();
-    }
-}, 10000);
-
 function enableProtectedSession() {
     glob.isProtectedSessionAvailable = true;
 
@@ -26,9 +14,9 @@ function isProtectedSessionAvailable() {
     return glob.isProtectedSessionAvailable;
 }
 
-function touchProtectedSession() {
+async function touchProtectedSession() {
     if (isProtectedSessionAvailable()) {
-        lastProtectedSessionOperationDate = Date.now();
+        await server.post("login/protected/touch");
     }
 }
 

src/public/app/services/tree_context_menu.js

@@ -33,7 +33,8 @@ class TreeContextMenu {
             { title: "Note Map", command: command, type: "note-map", uiIcon: "map-alt" },
             { title: "Render HTML note", command: command, type: "render", uiIcon: "extension" },
             { title: "Book", command: command, type: "book", uiIcon: "book" },
-            { title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "selection" }
+            { title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "selection" },
+            { title: "Canvas", command: command, type: "canvas", uiIcon: "pen" },
         ];
     }
 

src/public/app/services/utils.js

@@ -359,6 +359,16 @@ function isValidAttributeName(name) {
     return ATTR_NAME_MATCHER.test(name);
 }
 
+function sleep(time_ms) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, time_ms);
+    });
+}
+
+function escapeRegExp(str) {
+    return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
+}
+
 export default {
     reloadFrontendApp,
     parseDate,
@@ -402,5 +412,7 @@ export default {
     initHelpButtons,
     openHelp,
     filterAttributeName,
-    isValidAttributeName
+    isValidAttributeName,
+    sleep,
+    escapeRegExp
 };

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

@@ -219,6 +219,15 @@ const ATTR_HELP = {
         "shareDisallowRobotIndexing": `will forbid robot indexing of this note via <code>X-Robots-Tag: noindex</code> header`,
         "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 
+                        and thus can be enriched with dynamic content via the injected <code>now</code> and <code>parentNote</code> variables. Examples:
+                        
+                        <ul>
+                            <li><code>\${parentNote.getLabelValue('authorName')}'s literary works</code></li>
+                            <li><code>Log for \${now.format('YYYY-MM-DD HH:mm:ss')}</code></li>
+                        </ul>
+                        
+                        See <a href="https://github.com/zadam/trilium/wiki/Default-note-title">wiki with details</a>, API docs for <a href="https://zadam.github.io/trilium/backend_api/Note.html">parentNote</a> and <a href="https://day.js.org/docs/en/display/format">now</a> for details.`
     },
     "relation": {
         "runOnNoteCreation": "executes when note is created on backend",

src/public/app/widgets/backlinks.js

@@ -41,8 +41,8 @@ const TPL = `
             right: 10px;
             width: 400px;
             border-radius: 10px;
-            background-color: #eeeeee;
+            background-color: var(--more-accented-background-color);
-            color: #444;
+            color: var(--main-text-color);
             padding: 20px;
             overflow-y: auto;
         }

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

@@ -71,7 +71,6 @@ export default class ButtonWidget extends NoteContextAwareWidget {
         }
 
         this.$widget
-            .attr("title", this.settings.title)
             .addClass(this.settings.icon);
     }
 

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

@@ -1,5 +1,7 @@
 import ButtonWidget from "./button_widget.js";
 import appContext from "../../services/app_context.js";
+import attributeService from "../../services/attributes.js";
+import protectedSessionHolder from "../../services/protected_session_holder.js";
 
 export default class EditButton extends ButtonWidget {
     isEnabled() {
@@ -22,9 +24,29 @@ export default class EditButton extends ButtonWidget {
     }
 
     async refreshWithNote(note) {
-        // can't do this in isEnabled() since isReadOnly is async
+        if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
-        this.toggleInt(await this.noteContext.isReadOnly());
+            this.toggleInt(false);
+        }
+        else {
+            // prevent flickering by assuming hidden before async operation
+            this.toggleInt(false);
+
+            // can't do this in isEnabled() since isReadOnly is async
+            this.toggleInt(await this.noteContext.isReadOnly());
+        }
 
         await super.refreshWithNote(note);
     }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.getAttributes().find(
+            attr => attr.type === 'label'
+                && attr.name.toLowerCase().includes("readonly")
+                && attributeService.isAffecting(attr, this.note)
+        )) {
+            this.noteContext.readOnlyTemporarilyDisabled = false;
+
+            this.refresh();
+        }
+    }
 }

src/public/app/widgets/containers/scrolling_container.js

@@ -5,6 +5,7 @@ export default class ScrollingContainer extends Container {
         super();
 
         this.css('overflow', 'auto');
+        this.css('position', 'relative');
     }
 
     setNoteContextEvent({noteContext}) {
@@ -35,7 +36,7 @@ export default class ScrollingContainer extends Container {
 
             const promise = super.handleEventInChildren(name, data);
 
-            // there seems to be some asynchronicity and we need to wait a bit before scrolling
+            // there seems to be some asynchronicity, and we need to wait a bit before scrolling
             promise.then(() => setTimeout(() => this.$widget.scrollTop(scrollTop), 500));
 
             return promise;
@@ -44,4 +45,8 @@ export default class ScrollingContainer extends Container {
             return super.handleEventInChildren(name, data);
         }
     }
+
+    scrollContainerToCommand({position}) {
+        this.$widget.scrollTop(position);
+    }
 }

src/public/app/widgets/find.js

@@ -0,0 +1,255 @@
+/**
+ * (c) Antonio Tejada 2022
+ * https://github.com/antoniotejada/Trilium-FindWidget
+ */
+
+import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import FindInText from "./find_in_text.js";
+import FindInCode from "./find_in_code.js";
+import FindInHtml from "./find_in_html.js";
+
+const findWidgetDelayMillis = 200;
+const waitForEnter = (findWidgetDelayMillis < 0);
+
+// tabIndex=-1 on the checkbox labels is necessary so when clicking on the label
+// the focusout handler is called with relatedTarget equal to the label instead
+// of undefined. It's -1 instead of > 0, so they don't tabstop
+const TPL = `
+<div style="contain: none;">
+    <style>
+        .find-widget-box {
+            padding: 10px;
+            border-top: 1px solid var(--main-border-color); 
+            align-items: center;
+        }
+        
+        .find-widget-box > * {
+            margin-right: 15px;
+        }
+        
+        .find-widget-box {
+            display: flex;
+        }
+        
+        .find-widget-found-wrapper {
+            font-weight: bold;
+        }
+        
+        .find-widget-search-term-input-group {
+            max-width: 300px;
+        }
+        
+        .find-widget-spacer {
+            flex-grow: 1;
+        }
+    </style>
+
+    <div class="find-widget-box">
+        <div class="input-group find-widget-search-term-input-group">
+            <input type="text" class="form-control find-widget-search-term-input">
+            <div class="input-group-append">
+                <button class="btn btn-outline-secondary bx bxs-chevron-up find-widget-previous-button" type="button"></button>
+                <button class="btn btn-outline-secondary bx bxs-chevron-down find-widget-next-button" type="button"></button>
+            </div>
+        </div>
+        
+        <div class="form-check">
+            <label tabIndex="-1" class="form-check-label">
+                <input type="checkbox" class="form-check-input find-widget-case-sensitive-checkbox"> 
+                case sensitive
+            </label>
+        </div>
+
+        <div class="form-check">
+            <label tabIndex="-1" class="form-check-label">
+                <input type="checkbox" class="form-check-input find-widget-match-words-checkbox"> 
+                match words
+            </label>
+        </div>
+        
+        <div class="find-widget-found-wrapper">
+            <span class="find-widget-current-found">0</span>
+            /
+            <span class="find-widget-total-found">0</span>
+        </div>
+        
+        <div class="find-widget-spacer"></div>
+        
+        <div class="find-widget-close-button"><button class="btn icon-action bx bx-x"></button></div>
+    </div>
+</div>`;
+
+export default class FindWidget extends NoteContextAwareWidget {
+    constructor() {
+        super();
+
+        this.searchTerm = null;
+
+        this.textHandler = new FindInText(this);
+        this.codeHandler = new FindInCode(this);
+        this.htmlHandler = new FindInHtml(this);
+    }
+
+    async noteSwitched() {
+        await super.noteSwitched();
+
+        await this.closeSearch();
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$findBox = this.$widget.find('.find-widget-box');
+        this.$findBox.hide();
+        this.$input = this.$widget.find('.find-widget-search-term-input');
+        this.$currentFound = this.$widget.find('.find-widget-current-found');
+        this.$totalFound = this.$widget.find('.find-widget-total-found');
+        this.$caseSensitiveCheckbox = this.$widget.find(".find-widget-case-sensitive-checkbox");
+        this.$caseSensitiveCheckbox.change(() => this.performFind());
+        this.$matchWordsCheckbox = this.$widget.find(".find-widget-match-words-checkbox");
+        this.$matchWordsCheckbox.change(() => this.performFind());
+        this.$previousButton = this.$widget.find(".find-widget-previous-button");
+        this.$previousButton.on("click", () => this.findNext(-1));
+        this.$nextButton = this.$widget.find(".find-widget-next-button");
+        this.$nextButton.on("click", () => this.findNext(1));
+        this.$closeButton = this.$widget.find(".find-widget-close-button");
+        this.$closeButton.on("click", () => this.closeSearch());
+
+        this.$input.keydown(async e => {
+            if ((e.metaKey || e.ctrlKey) && (e.key === 'F' || e.key === 'f')) {
+                // If ctrl+f is pressed when the findbox is shown, select the
+                // whole input to find
+                this.$input.select();
+            } else if (e.key === 'Enter' || e.key === 'F3') {
+                await this.findNext(e?.shiftKey ? -1 : 1);
+                e.preventDefault();
+                return false;
+            }
+        });
+
+        this.$findBox.keydown(async e => {
+            if (e.key === 'Escape') {
+                await this.closeSearch();
+            }
+        });
+
+        this.$input.on('input', () => this.startSearch());
+
+        return this.$widget;
+    }
+
+    async findInTextEvent() {
+        if (!this.isActiveNoteContext()) {
+            return;
+        }
+
+        if (!['text', 'code'].includes(this.note.type) || !this.$findBox.is(":hidden")) {
+            return;
+        }
+
+        const readOnly = await this.noteContext.isReadOnly();
+
+        if (readOnly) {
+            this.handler = this.htmlHandler;
+        } else {
+            this.handler = this.note.type === "code"
+                ? this.codeHandler
+                : this.textHandler;
+        }
+
+        this.$findBox.show();
+        this.$input.focus();
+        this.$totalFound.text(0);
+        this.$currentFound.text(0);
+
+        const searchTerm = await this.handler.getInitialSearchTerm();
+
+        this.$input.val(searchTerm || "");
+
+        // Directly perform the search if there's some text to
+        // find, without delaying or waiting for enter
+        if (searchTerm !== "") {
+            this.$input.select();
+            await this.performFind();
+        }
+    }
+
+    startSearch() {
+        // XXX This should clear the previous search immediately in all cases
+        //     (the search is stale when waitforenter but also while the
+        //     delay is running for non waitforenter case)
+        if (!waitForEnter) {
+            // Clear the previous timeout if any, it's ok if timeoutId is
+            // null or undefined
+            clearTimeout(this.timeoutId);
+
+            // Defer the search a few millis so the search doesn't start
+            // immediately, as this can cause search word typing lag with
+            // one or two-char searchwords and long notes
+            // See https://github.com/antoniotejada/Trilium-FindWidget/issues/1
+            this.timeoutId = setTimeout(async () => {
+                this.timeoutId = null;
+                await this.performFind();
+            }, findWidgetDelayMillis);
+        }
+    }
+
+    /**
+     * @param direction +1 for next, -1 for previous
+     * @returns {Promise<void>}
+     */
+    async findNext(direction) {
+        const searchTerm = this.$input.val();
+        if (waitForEnter && this.searchTerm !== searchTerm) {
+            await this.performFind();
+        }
+        const totalFound = parseInt(this.$totalFound.text());
+        const currentFound = parseInt(this.$currentFound.text()) - 1;
+
+        if (totalFound > 0) {
+            let nextFound = currentFound + direction;
+            // Wrap around
+            if (nextFound > totalFound - 1) {
+                nextFound = 0;
+            } else if (nextFound < 0) {
+                nextFound = totalFound - 1;
+            }
+
+            this.$currentFound.text(nextFound + 1);
+
+            await this.handler.findNext(direction, currentFound, nextFound);
+        }
+    }
+
+    /** Perform the find and highlight the find results. */
+    async performFind() {
+        const searchTerm = this.$input.val();
+        const matchCase = this.$caseSensitiveCheckbox.prop("checked");
+        const wholeWord = this.$matchWordsCheckbox.prop("checked");
+
+        const {totalFound, currentFound} = await this.handler.performFind(searchTerm, matchCase, wholeWord);
+
+        this.$totalFound.text(totalFound);
+        this.$currentFound.text(currentFound);
+
+        this.searchTerm = searchTerm;
+    }
+
+    async closeSearch() {
+        if (this.$findBox.is(":visible")) {
+            this.$findBox.hide();
+
+            // Restore any state, if there's a current occurrence clear markers
+            // and scroll to and select the last occurrence
+            const totalFound = parseInt(this.$totalFound.text());
+            const currentFound = parseInt(this.$currentFound.text()) - 1;
+
+            this.searchTerm = null;
+
+            await this.handler.findBoxClosed(totalFound, currentFound);
+        }
+    }
+
+    isEnabled() {
+        return super.isEnabled() && ['text', 'code'].includes(this.note.type);
+    }
+}

src/public/app/widgets/find_in_code.js

@@ -0,0 +1,196 @@
+// ck-find-result and ck-find-result_selected are the styles ck-editor
+// uses for highlighting matches, use the same one on CodeMirror
+// for consistency
+import utils from "../services/utils.js";
+
+const FIND_RESULT_SELECTED_CSS_CLASSNAME = "ck-find-result_selected";
+const FIND_RESULT_CSS_CLASSNAME = "ck-find-result";
+
+export default class FindInCode {
+    constructor(parent) {
+        /** @property {FindWidget} */
+        this.parent = parent;
+    }
+
+    async getCodeEditor() {
+        return this.parent.noteContext.getCodeEditor();
+    }
+
+    async getInitialSearchTerm() {
+        const codeEditor = await this.getCodeEditor();
+
+        // highlightSelectionMatches is the overlay that highlights
+        // the words under the cursor. This occludes the search
+        // markers style, save it, disable it. Will be restored when
+        // the focus is back into the note
+        this.oldHighlightSelectionMatches = codeEditor.getOption("highlightSelectionMatches");
+        codeEditor.setOption("highlightSelectionMatches", false);
+
+        // Fill in the findbox with the current selection if any
+        const selectedText = codeEditor.getSelection()
+        if (selectedText !== "") {
+            return selectedText;
+        }
+    }
+
+    async performFind(searchTerm, matchCase, wholeWord) {
+        let findResult = null;
+        let totalFound = 0;
+        let currentFound = -1;
+
+        // See https://codemirror.net/addon/search/searchcursor.js for tips
+        const codeEditor = await this.getCodeEditor();
+        const doc = codeEditor.doc;
+        const text = doc.getValue();
+
+        // Clear all markers
+        if (this.findResult != null) {
+            codeEditor.operation(() => {
+                for (let i = 0; i < this.findResult.length; ++i) {
+                    const marker = this.findResult[i];
+                    marker.clear();
+                }
+            });
+        }
+
+        if (searchTerm !== "") {
+            searchTerm = utils.escapeRegExp(searchTerm);
+
+            // Find and highlight matches
+            // Find and highlight matches
+            // XXX Using \\b and not using the unicode flag probably doesn't
+            //     work with non ascii alphabets, findAndReplace uses a more
+            //     complicated regexp, see
+            //     https://github.com/ckeditor/ckeditor5/blob/b95e2faf817262ac0e1e21993d9c0bde3f1be594/packages/ckeditor5-find-and-replace/src/utils.js#L145
+            const wholeWordChar = wholeWord ? "\\b" : "";
+            const re = new RegExp(wholeWordChar + searchTerm + wholeWordChar,
+                'g' + (matchCase ? '' : 'i'));
+            let curLine = 0;
+            let curChar = 0;
+            let curMatch = null;
+            findResult = [];
+            // All those markText take several seconds on eg this ~500-line
+            // script, batch them inside an operation so they become
+            // unnoticeable. Alternatively, an overlay could be used, see
+            // https://codemirror.net/addon/search/match-highlighter.js ?
+            codeEditor.operation(() => {
+                for (let i = 0; i < text.length; ++i) {
+                    // Fetch next match if it's the first time or
+                    // if past the current match start
+                    if ((curMatch == null) || (curMatch.index < i)) {
+                        curMatch = re.exec(text);
+                        if (curMatch == null) {
+                            // No more matches
+                            break;
+                        }
+                    }
+                    // Create a non-selected highlight marker for the match, the
+                    // selected marker highlight will be done later
+                    if (i === curMatch.index) {
+                        let fromPos = { "line" : curLine, "ch" : curChar };
+                        // XXX If multiline is supported, this needs to
+                        //     recalculate curLine since the match may span
+                        //     lines
+                        let toPos = { "line" : curLine, "ch" : curChar + curMatch[0].length};
+                        // XXX or css = "color: #f3"
+                        let marker = doc.markText( fromPos, toPos, { "className" : FIND_RESULT_CSS_CLASSNAME });
+                        findResult.push(marker);
+
+                        // Set the first match beyond the cursor as current
+                        // match
+                        if (currentFound === -1) {
+                            const cursorPos = codeEditor.getCursor();
+                            if ((fromPos.line > cursorPos.line) ||
+                                ((fromPos.line === cursorPos.line) &&
+                                    (fromPos.ch >= cursorPos.ch))){
+                                currentFound = totalFound;
+                            }
+                        }
+
+                        totalFound++;
+                    }
+                    // Do line and char position tracking
+                    if (text[i] === "\n") {
+                        curLine++;
+                        curChar = 0;
+                    } else {
+                        curChar++;
+                    }
+                }
+            });
+        }
+
+        this.findResult = findResult;
+
+        // Calculate curfound if not already, highlight it as selected
+        if (totalFound > 0) {
+            currentFound = Math.max(0, currentFound)
+            let marker = findResult[currentFound];
+            let pos = marker.find();
+            codeEditor.scrollIntoView(pos.to);
+            marker.clear();
+            findResult[currentFound] = doc.markText( pos.from, pos.to,
+                { "className" : FIND_RESULT_SELECTED_CSS_CLASSNAME }
+            );
+        }
+
+        return {
+            totalFound,
+            currentFound: currentFound + 1
+        };
+    }
+
+    async findNext(direction, currentFound, nextFound) {
+        const codeEditor = await this.getCodeEditor();
+        const doc = codeEditor.doc;
+
+        //
+        // Dehighlight current, highlight & scrollIntoView next
+        //
+
+        let marker = this.findResult[currentFound];
+        let pos = marker.find();
+        marker.clear();
+        marker = doc.markText(
+            pos.from, pos.to,
+            { "className" : FIND_RESULT_CSS_CLASSNAME }
+        );
+        this.findResult[currentFound] = marker;
+
+        marker = this.findResult[nextFound];
+        pos = marker.find();
+        marker.clear();
+        marker = doc.markText(
+            pos.from, pos.to,
+            { "className" : FIND_RESULT_SELECTED_CSS_CLASSNAME }
+        );
+        this.findResult[nextFound] = marker;
+
+        codeEditor.scrollIntoView(pos.from);
+    }
+
+    async findBoxClosed(totalFound, currentFound) {
+        const codeEditor = await this.getCodeEditor();
+
+        if (totalFound > 0) {
+            const doc = codeEditor.doc;
+            const pos = this.findResult[currentFound].find();
+            // Note setting the selection sets the cursor to
+            // the end of the selection and scrolls it into
+            // view
+            doc.setSelection(pos.from, pos.to);
+            // Clear all markers
+            codeEditor.operation(() => {
+                for (let i = 0; i < this.findResult.length; ++i) {
+                    let marker = this.findResult[i];
+                    marker.clear();
+                }
+            });
+        }
+        // Restore the highlightSelectionMatches setting
+        codeEditor.setOption("highlightSelectionMatches", this.oldHighlightSelectionMatches);
+        this.findResult = null;
+
+        codeEditor.focus();
+    }
+}

src/public/app/widgets/find_in_html.js

@@ -0,0 +1,93 @@
+// ck-find-result and ck-find-result_selected are the styles ck-editor
+// uses for highlighting matches, use the same one on CodeMirror
+// for consistency
+import libraryLoader from "../services/library_loader.js";
+import utils from "../services/utils.js";
+import appContext from "../services/app_context.js";
+
+const FIND_RESULT_SELECTED_CSS_CLASSNAME = "ck-find-result_selected";
+const FIND_RESULT_CSS_CLASSNAME = "ck-find-result";
+
+export default class FindInHtml {
+    constructor(parent) {
+        /** @property {FindWidget} */
+        this.parent = parent;
+        this.currentIndex = 0;
+        this.$results = null;
+    }
+
+    async getInitialSearchTerm() {
+        return ""; // FIXME
+    }
+
+    async performFind(searchTerm, matchCase, wholeWord) {
+        await libraryLoader.requireLibrary(libraryLoader.MARKJS);
+
+        const $content = await this.parent.noteContext.getContentElement();
+
+        const wholeWordChar = wholeWord ? "\\b" : "";
+        const regExp = new RegExp(wholeWordChar + utils.escapeRegExp(searchTerm) + wholeWordChar, matchCase ? "g" : "gi");
+
+        return new Promise(res => {
+            $content.unmark({
+                done: () => {
+                    $content.markRegExp(regExp, {
+                        element: "span",
+                        className: FIND_RESULT_CSS_CLASSNAME,
+                        separateWordSearch: false,
+                        caseSensitive: matchCase,
+                        done: async () => {
+                            this.$results = $content.find("." + FIND_RESULT_CSS_CLASSNAME);
+                            this.currentIndex = 0;
+                            await this.jumpTo();
+
+                            res({
+                                totalFound: this.$results.length,
+                                currentFound: 1
+                            });
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    async findNext(direction, currentFound, nextFound) {
+        if (this.$results.length) {
+            this.currentIndex += direction;
+
+            if (this.currentIndex < 0) {
+                this.currentIndex = this.$results.length - 1;
+            }
+
+            if (this.currentIndex > this.$results.length - 1) {
+                this.currentIndex = 0;
+            }
+
+            await this.jumpTo();
+        }
+    }
+
+    async findBoxClosed(totalFound, currentFound) {
+        const $content = await this.parent.noteContext.getContentElement();
+        $content.unmark();
+    }
+
+    async jumpTo() {
+        if (this.$results.length) {
+            const offsetTop = 100;
+            const $current = this.$results.eq(this.currentIndex);
+            this.$results.removeClass(FIND_RESULT_SELECTED_CSS_CLASSNAME);
+
+            if ($current.length) {
+                $current.addClass(FIND_RESULT_SELECTED_CSS_CLASSNAME);
+                const position = $current.position().top - offsetTop;
+
+                const $content = await this.parent.noteContext.getContentElement();
+                const $contentWiget = appContext.getComponentByEl($content);
+
+                $contentWiget.triggerCommand("scrollContainerTo", {position});
+            }
+        }
+    }
+}

src/public/app/widgets/find_in_text.js

@@ -0,0 +1,119 @@
+export default class FindInText {
+    constructor(parent) {
+        /** @property {FindWidget} */
+        this.parent = parent;
+    }
+
+    async getTextEditor() {
+        return this.parent.noteContext.getTextEditor();
+    }
+
+    async getInitialSearchTerm() {
+        const textEditor = await this.getTextEditor();
+
+        const selection = textEditor.model.document.selection;
+        const range = selection.getFirstRange();
+
+        for (const item of range.getItems()) {
+            // Fill in the findbox with the current selection if
+            // any
+            return item.data;
+        }
+    }
+
+    async performFind(searchTerm, matchCase, wholeWord) {
+        // Do this even if the searchTerm is empty so the markers are cleared and
+        // the counters updated
+        const textEditor = await this.getTextEditor();
+        const model = textEditor.model;
+        let findResult = null;
+        let totalFound = 0;
+        let currentFound = -1;
+
+        // Clear
+        const findAndReplaceEditing = textEditor.plugins.get('FindAndReplaceEditing');
+        findAndReplaceEditing.state.clear(model);
+        findAndReplaceEditing.stop();
+        if (searchTerm !== "") {
+            // Parameters are callback/text, options.matchCase=false, options.wholeWords=false
+            // See https://github.com/ckeditor/ckeditor5/blob/b95e2faf817262ac0e1e21993d9c0bde3f1be594/packages/ckeditor5-find-and-replace/src/findcommand.js#L44
+            // XXX Need to use the callback version for regexp
+            // searchTerm = escapeRegExp(searchTerm);
+            // let re = new RegExp(searchTerm, 'gi');
+            // let m = text.match(re);
+            // totalFound = m ? m.length : 0;
+            const options = { "matchCase" : matchCase, "wholeWords" : wholeWord };
+            findResult = textEditor.execute('find', searchTerm, options);
+            totalFound = findResult.results.length;
+            // Find the result beyond the cursor
+            const cursorPos = model.document.selection.getLastPosition();
+            for (let i = 0; i < findResult.results.length; ++i) {
+                const marker = findResult.results.get(i).marker;
+                const fromPos = marker.getStart();
+                if (fromPos.compareWith(cursorPos) !== "before") {
+                    currentFound = i;
+                    break;
+                }
+            }
+        }
+
+        this.findResult = findResult;
+
+        // Calculate curfound if not already, highlight it as
+        // selected
+        if (totalFound > 0) {
+            currentFound = Math.max(0, currentFound);
+            // XXX Do this accessing the private data?
+            // See
+            // https://github.com/ckeditor/ckeditor5/blob/b95e2faf817262ac0e1e21993d9c0bde3f1be594/packages/ckeditor5-find-and-replace/src/findnextcommand.js
+            for (let i = 0 ; i < currentFound; ++i) {
+                textEditor.execute('findNext', searchTerm);
+            }
+        }
+
+        return {
+            totalFound,
+            currentFound: currentFound + 1
+        };
+    }
+
+    async findNext(direction, currentFound, nextFound) {
+        const textEditor = await this.getTextEditor();
+
+        // There are no parameters for findNext/findPrev
+        // See https://github.com/ckeditor/ckeditor5/blob/b95e2faf817262ac0e1e21993d9c0bde3f1be594/packages/ckeditor5-find-and-replace/src/findnextcommand.js#L57
+        // curFound wrap around above assumes findNext and
+        // findPrevious wraparound, which is what they do
+        if (direction > 0) {
+            textEditor.execute('findNext');
+        } else {
+            textEditor.execute('findPrevious');
+        }
+    }
+
+    async findBoxClosed(totalFound, currentFound) {
+        const textEditor = await this.getTextEditor();
+
+        if (totalFound > 0) {
+            // Clear the markers and set the caret to the
+            // current occurrence
+            const model = textEditor.model;
+            const range = this.findResult.results.get(currentFound).marker.getRange();
+            // From
+            // https://github.com/ckeditor/ckeditor5/blob/b95e2faf817262ac0e1e21993d9c0bde3f1be594/packages/ckeditor5-find-and-replace/src/findandreplace.js#L92
+            // XXX Roll our own since already done for codeEditor and
+            //     will probably allow more refactoring?
+            let findAndReplaceEditing = textEditor.plugins.get('FindAndReplaceEditing');
+            findAndReplaceEditing.state.clear(model);
+            findAndReplaceEditing.stop();
+            model.change(writer => {
+                writer.setSelection(range, 0);
+            });
+            textEditor.editing.view.scrollToTheSelection();
+        }
+
+        this.findResult = null;
+
+        textEditor.focus();
+    }
+}

src/public/app/widgets/note_detail.js

@@ -10,6 +10,7 @@ import FileTypeWidget from "./type_widgets/file.js";
 import ImageTypeWidget from "./type_widgets/image.js";
 import RenderTypeWidget from "./type_widgets/render.js";
 import RelationMapTypeWidget from "./type_widgets/relation_map.js";
+import CanvasTypeWidget from "./type_widgets/canvas.js";
 import ProtectedSessionTypeWidget from "./type_widgets/protected_session.js";
 import BookTypeWidget from "./type_widgets/book.js";
 import appContext from "../services/app_context.js";
@@ -50,6 +51,7 @@ const typeWidgetClasses = {
     'search': NoneTypeWidget,
     'render': RenderTypeWidget,
     'relation-map': RelationMapTypeWidget,
+    'canvas': CanvasTypeWidget,
     'protected-session': ProtectedSessionTypeWidget,
     'book': BookTypeWidget,
     'note-map': NoteMapTypeWidget
@@ -66,7 +68,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
             const {noteId} = note;
 
             const dto = note.dto;
-            dto.content = this.getTypeWidget().getContent();
+            dto.content = await this.getTypeWidget().getContent();
 
             // for read only notes
             if (dto.content === undefined) {
@@ -145,11 +147,15 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         this.checkFullHeight();
     }
 
+    /**
+     * sets full height of container that contains note content for a subset of note-types
+     */
     checkFullHeight() {
         // https://github.com/zadam/trilium/issues/2522
         this.$widget.toggleClass("full-height",
             !this.noteContext.hasNoteList()
-            && ['editable-text', 'editable-code'].includes(this.type));
+            && ['editable-text', 'editable-code', 'canvas'].includes(this.type)
+            && this.mime !== 'text/x-sqlite;schema=trilium');
     }
 
     getTypeWidget() {
@@ -301,6 +307,16 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         }
     }
 
+    async executeInActiveNoteDetailWidgetEvent({callback}) {
+        if (!this.isActiveNoteContext()) {
+            return;
+        }
+
+        await this.initialized;
+
+        callback(this);
+    }
+
     async cutIntoNoteCommand() {
         const note = appContext.tabManager.getActiveContextNote();
 

src/public/app/widgets/note_type.js

@@ -11,6 +11,7 @@ const NOTE_TYPES = [
     { type: "text", mime: "text/html", title: "Text", selectable: true },
     { type: "relation-map", mime: "application/json", title: "Relation Map", selectable: true },
     { type: "render", mime: '', title: "Render Note", selectable: true },
+    { type: "canvas", mime: 'application/json', title: "Canvas", selectable: true },
     { type: "book", mime: '', title: "Book", selectable: true },
     { type: "mermaid", mime: 'text/mermaid', title: "Mermaid Diagram", selectable: true },
     { type: "code", mime: 'text/plain', title: "Code", selectable: true }

src/public/app/widgets/note_wrapper.js

@@ -15,25 +15,36 @@ export default class NoteWrapperWidget extends FlexContainer {
     }
 
     setNoteContextEvent({noteContext}) {
-        this.refresh(noteContext);
+        this.noteContext = noteContext;
+
+        this.refresh();
     }
 
-    noteSwitchedAndActivatedEvent({noteContext}) {
+    noteSwitchedAndActivatedEvent() {
-        this.refresh(noteContext);
+        this.refresh();
     }
 
-    noteSwitchedEvent({noteContext}) {
+    noteSwitchedEvent() {
-        this.refresh(noteContext);
+        this.refresh();
     }
 
-    activeContextChangedEvent({noteContext}) {
+    activeContextChangedEvent() {
-        this.refresh(noteContext);
+        this.refresh();
     }
 
-    refresh(noteContext) {
+    refresh() {
+        const note = this.noteContext?.note;
+
         this.$widget.toggleClass("full-content-width",
-            ['image', 'mermaid', 'book', 'render'].includes(noteContext?.note?.type)
+            ['image', 'mermaid', 'book', 'render', 'canvas'].includes(note?.type)
-            || !!noteContext?.note?.hasLabel('fullContentWidth')
+            || !!note?.hasLabel('fullContentWidth')
         );
     }
+
+    async entitiesReloadedEvent({loadResults}) {
+        // listening on changes of note.type
+        if (loadResults.isNoteReloaded(this.noteContext?.noteId)) {
+            this.refresh();
+        }
+    }
 }

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

@@ -0,0 +1,444 @@
+import libraryLoader from "../../services/library_loader.js";
+import TypeWidget from "./type_widget.js";
+import utils from '../../services/utils.js';
+import froca from "../../services/froca.js";
+import debounce from "../../../../../libraries/lodash.debounce.js";
+
+const {sleep} = utils;
+
+const TPL = `
+    <div class="canvas-widget note-detail-canvas note-detail-printable note-detail">
+        <style type="text/css">
+        .excalidraw .App-menu_top .buttonList {
+            display: flex;
+        }
+
+        .excalidraw-wrapper {
+            height: 100%;
+        }
+
+        :root[dir="ltr"]
+        .excalidraw
+        .layer-ui__wrapper
+        .zen-mode-transition.App-menu_bottom--transition-left {
+            transform: none;
+        }
+        
+        /* collaboration not possible so hide the button */
+        .CollabButton {
+            display: none !important;
+        }
+
+        </style>
+        <!-- height here necessary. otherwise excalidraw not shown -->
+        <div class="canvas-render" style="height: 100%"></div>
+    </div>
+`;
+
+/**
+ * # Canvas note with excalidraw
+ * @author thfrei 2022-05-11
+ *
+ * Background:
+ * excalidraw gives great support for hand drawn notes. It also allows to include images and support
+ * for sketching. Excalidraw has a vibrant and active community.
+ *
+ * Functionality:
+ * We store the excalidraw assets (elements, appState, files) in the note. In addition to that, we
+ * export the SVG from the canvas on every update. The SVG is also saved in the note. It is used
+ * for displaying any canvas note inside of a text note as an image.
+ *
+ * Paths not taken.
+ *  - excalidraw-to-svg (node.js) could be used to avoid storing the svg in the backend.
+ *    We could render the SVG on the fly. However, as of now, it does not render any hand drawn
+ *    (freedraw) paths. There is an issue with Path2D object not present in node-canvas library
+ *    used by jsdom. (See Trilium PR for samples and other issues in respective library.
+ *    Link will be added later). Related links:
+ *     - https://github.com/Automattic/node-canvas/pull/2013
+ *     - https://github.com/google/canvas-5-polyfill
+ *     - https://github.com/Automattic/node-canvas/issues/1116
+ *     - https://www.npmjs.com/package/path2d-polyfill
+ *  - excalidraw-to-svg (node.js) takes quite some time to load an image (1-2s)
+ *  - excalidraw-utils (browser) does render freedraw, however NOT freedraw with background. It is not
+ *    used, since it is a big dependency, and has the same functionality as react + excalidraw.
+ *  - infinite-drawing-canvas with fabric.js. This library lacked a lot of feature, excalidraw already
+ *    has.
+ *
+ * Known issues:
+ *  - v0.11.0 of excalidraw does not render freedraw backgrounds in the svg
+ *  - the 3 excalidraw fonts should be included in the share and everywhere, so that it is shown
+ *    when requiring svg.
+ *
+ * Discussion of storing svg in the note:
+ *  - Pro: we will combat bit-rot. Showing the SVG will be very fast and easy, since it is already there.
+ *  - Con: The note will get bigger (~40-50%?), we will generate more bandwith. However, using trilium
+ *         desktop instance mitigates that issue.
+ *
+ * Roadmap:
+ *  - Support image-notes as reference in excalidraw
+ *  - Support canvas note as reference (svg) in other canvas notes.
+ *  - Make it easy to include a canvas note inside a text note
+ *  - Support for excalidraw libraries. Maybe special code notes with a tag.
+ */
+export default class ExcalidrawTypeWidget extends TypeWidget {
+    constructor() {
+        super();
+
+        // constants
+        this.SCENE_VERSION_INITIAL = -1;
+        this.SCENE_VERSION_ERROR = -2;
+
+        // config
+        this.DEBOUNCE_TIME_ONCHANGEHANDLER = 750; // ms
+        // ensure that assets are loaded from trilium
+        window.EXCALIDRAW_ASSET_PATH = `${window.location.origin}/node_modules/@excalidraw/excalidraw/dist/`;
+
+        // temporary vars
+        this.currentNoteId = "";
+        this.currentSceneVersion = this.SCENE_VERSION_INITIAL;
+
+        // will be overwritten
+        this.excalidrawRef;
+        this.$render;
+        this.$widget;
+        this.reactHandlers; // used to control react state
+
+        this.createExcalidrawReactApp = this.createExcalidrawReactApp.bind(this);
+        this.onChangeHandler = this.onChangeHandler.bind(this);
+        this.isNewSceneVersion = this.isNewSceneVersion.bind(this);
+    }
+
+    static getType() {
+        return "canvas";
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+
+        this.$widget.toggleClass("full-height", true); // only add
+        this.$render = this.$widget.find('.canvas-render');
+        const documentStyle = window.getComputedStyle(document.documentElement);
+        this.themeStyle = documentStyle.getPropertyValue('--theme-style')?.trim();
+
+        libraryLoader
+            .requireLibrary(libraryLoader.EXCALIDRAW)
+            .then(() => {
+                const React = window.React;
+                const ReactDOM = window.ReactDOM;
+                const renderElement = this.$render.get(0);
+
+                ReactDOM.unmountComponentAtNode(renderElement);
+                ReactDOM.render(React.createElement(this.createExcalidrawReactApp), renderElement);
+            });
+
+        return this.$widget;
+    }
+
+    /**
+     * called to populate the widget container with the note content
+     *
+     * @param {note} note
+     */
+    async doRefresh(note) {
+        // see if note changed, since we do not get a new class for a new note
+        const noteChanged = this.currentNoteId !== note.noteId;
+        if (noteChanged) {
+            // reset scene to omit unnecessary onchange handler
+            this.currentSceneVersion = this.SCENE_VERSION_INITIAL;
+        }
+        this.currentNoteId = note.noteId;
+
+        // get note from backend and put into canvas
+        const noteComplement = await froca.getNoteComplement(note.noteId);
+
+        // before we load content into excalidraw, make sure excalidraw has loaded
+        while (!this.excalidrawRef || !this.excalidrawRef.current) {
+            console.log("excalidrawRef not yet loaded, sleep 200ms...");
+            await sleep(200);
+        }
+
+        /**
+         * new and empty note - make sure that canvas is empty.
+         * If we do not set it manually, we occasionally get some "bleeding" from another
+         * note into this fresh note. Probably due to that this note-instance does not get
+         * newly instantiated?
+         */
+        if (this.excalidrawRef.current && noteComplement.content?.trim() === "") {
+            const sceneData = {
+                elements: [],
+                appState: {
+                    theme: this.themeStyle
+                },
+                collaborators: []
+            };
+
+            this.excalidrawRef.current.updateScene(sceneData);
+        }
+        else if (this.excalidrawRef.current && noteComplement.content) {
+            // load saved content into excalidraw canvas
+            let content;
+
+            try {
+                content = JSON.parse(noteComplement.content || "");
+            } catch(err) {
+                console.error("Error parsing content. Probably note.type changed",
+                              "Starting with empty canvas"
+                              , note, noteComplement, err);
+
+                content = {
+                    elements: [],
+                    appState: {},
+                    files: [],
+                };
+            }
+
+            const {elements, appState, files} = content;
+
+            appState.theme = this.themeStyle;
+
+            /**
+             * use widths and offsets of current view, since stored appState has the state from
+             * previous edit. using the stored state would lead to pointer mismatch.
+             */
+            const boundingClientRect = this.excalidrawWrapperRef.current.getBoundingClientRect();
+            appState.width = boundingClientRect.width;
+            appState.height = boundingClientRect.height;
+            appState.offsetLeft = boundingClientRect.left;
+            appState.offsetTop = boundingClientRect.top;
+
+            const sceneData = {
+                elements,
+                appState,
+                collaborators: []
+            };
+
+            // files are expected in an array when loading. they are stored as an key-index object
+            // see example for loading here:
+            // https://github.com/excalidraw/excalidraw/blob/c5a7723185f6ca05e0ceb0b0d45c4e3fbcb81b2a/src/packages/excalidraw/example/App.js#L68
+            const fileArray = [];
+            for (const fileId in files) {
+                const file = files[fileId];
+                // TODO: dataURL is replaceable with a trilium image url
+                //       maybe we can save normal images (pasted) with base64 data url, and trilium images
+                //       with their respective url! nice
+                // file.dataURL = "http://localhost:8080/api/images/ltjOiU8nwoZx/start.png";
+                fileArray.push(file);
+            }
+
+            this.excalidrawRef.current.updateScene(sceneData);
+            this.excalidrawRef.current.addFiles(fileArray);
+        }
+
+        // set initial scene version
+        if (this.currentSceneVersion === this.SCENE_VERSION_INITIAL) {
+            this.currentSceneVersion = this.getSceneVersion();
+        }
+    }
+
+    /**
+     * gets data from widget container that will be sent via spacedUpdate.scheduleUpdate();
+     * this is automatically called after this.saveData();
+     */
+    async getContent() {
+        const elements = this.excalidrawRef.current.getSceneElements();
+        const appState = this.excalidrawRef.current.getAppState();
+
+        /**
+         * A file is not deleted, even though removed from canvas. therefore we only keep
+         * files that are referenced by an element. Maybe this will change with new excalidraw version?
+         */
+        const files = this.excalidrawRef.current.getFiles();
+
+        /**
+         * parallel svg export to combat bitrot and enable rendering image for note inclusion,
+         * preview and share.
+         */
+        const svg = await window.Excalidraw.exportToSvg({
+            elements,
+            appState,
+            exportPadding: 5, // 5 px padding
+            metadata: 'trilium-export',
+            files
+        });
+        const svgString = svg.outerHTML;
+
+        /**
+         * workaround until https://github.com/excalidraw/excalidraw/pull/5065 is merged and published
+         */
+        const svgSafeString = this.replaceExternalAssets(svgString);
+
+        const activeFiles = {};
+        elements.forEach((element) => {
+            if (element.fileId) {
+                activeFiles[element.fileId] = files[element.fileId];
+            }
+        })
+
+        const content = {
+            _meta: "This note has type `canvas`. It uses excalidraw and stores an exported svg alongside.",
+            elements, // excalidraw
+            appState, // excalidraw
+            files: activeFiles, // excalidraw
+            svg: svgSafeString, // not needed for excalidraw, used for note_short, content, and image api
+        };
+
+        return JSON.stringify(content);
+    }
+
+    /**
+     * save content to backend
+     * spacedUpdate is kind of a debouncer.
+     */
+    saveData() {
+        this.spacedUpdate.scheduleUpdate();
+    }
+
+    onChangeHandler() {
+        // changeHandler is called upon any tiny change in excalidraw. button clicked, hover, etc.
+        // make sure only when a new element is added, we actually save something.
+        const isNewSceneVersion = this.isNewSceneVersion();
+        /**
+         * FIXME: however, we might want to make an exception, if viewport changed, since viewport
+         *        is desired to save? (add) and appState background, and some things
+         */
+
+        // upon updateScene, onchange is called, even though "nothing really changed" that is worth saving
+        const isNotInitialScene = this.currentSceneVersion !== this.SCENE_VERSION_INITIAL;
+
+        const shouldSave = isNewSceneVersion && isNotInitialScene;
+
+        if (shouldSave) {
+            this.updateSceneVersion();
+            this.saveData();
+        } else {
+            // do nothing
+        }
+    }
+
+    createExcalidrawReactApp() {
+        const React = window.React;
+        const Excalidraw = window.Excalidraw;
+
+        const excalidrawRef = React.useRef(null);
+        this.excalidrawRef = excalidrawRef;
+        const excalidrawWrapperRef = React.useRef(null);
+        this.excalidrawWrapperRef = excalidrawWrapperRef;
+        const [dimensions, setDimensions] = React.useState({
+            width: undefined,
+            height: undefined
+        });
+
+        React.useEffect(() => {
+            const dimensions = {
+                width: excalidrawWrapperRef.current.getBoundingClientRect().width,
+                height: excalidrawWrapperRef.current.getBoundingClientRect().height
+            };
+            setDimensions(dimensions);
+
+            const onResize = () => {
+                const dimensions = {
+                    width: excalidrawWrapperRef.current.getBoundingClientRect().width,
+                    height: excalidrawWrapperRef.current.getBoundingClientRect().height
+                };
+                setDimensions(dimensions);
+            };
+
+            window.addEventListener("resize", onResize);
+
+            return () => window.removeEventListener("resize", onResize);
+        }, [excalidrawWrapperRef]);
+
+        const onLinkOpen = React.useCallback((element, event) => {
+            const link = element.link;
+            const { nativeEvent } = event.detail;
+            const isNewTab = nativeEvent.ctrlKey || nativeEvent.metaKey;
+            const isNewWindow = nativeEvent.shiftKey;
+            const isInternalLink = link.startsWith("/")
+                || link.includes(window.location.origin);
+
+            if (isInternalLink && !isNewTab && !isNewWindow) {
+                // signal that we're handling the redirect ourselves
+                event.preventDefault();
+                // do a custom redirect, such as passing to react-router
+                // ...
+            } else {
+                // open in same tab
+            }
+          }, []);
+
+        return React.createElement(
+            React.Fragment,
+            null,
+            React.createElement(
+                "div",
+                {
+                    className: "excalidraw-wrapper",
+                    ref: excalidrawWrapperRef
+                },
+                React.createElement(Excalidraw.default, {
+                    // this makes sure that 1) manual theme switch button is hidden 2) theme stays as it should after opening menu
+                    theme: this.themeStyle,
+                    ref: excalidrawRef,
+                    width: dimensions.width,
+                    height: dimensions.height,
+                    onPaste: (data, event) => {
+                        console.log("Verbose: excalidraw internal paste. No trilium action implemented.", data, event);
+                    },
+                    onChange: debounce(this.onChangeHandler, this.DEBOUNCE_TIME_ONCHANGEHANDLER),
+                    viewModeEnabled: false,
+                    zenModeEnabled: false,
+                    gridModeEnabled: false,
+                    isCollaborating: false,
+                    detectScroll: false,
+                    handleKeyboardGlobally: false,
+                    autoFocus: true,
+                    onLinkOpen,
+                })
+            )
+        );
+    }
+
+    /**
+     * needed to ensure, that multipleOnChangeHandler calls do not trigger a safe.
+     * we compare the scene version as suggested in:
+     * https://github.com/excalidraw/excalidraw/issues/3014#issuecomment-778115329
+     *
+     * info: sceneVersions are not incrementing. it seems to be a pseudo-random number
+     */
+     isNewSceneVersion() {
+        const sceneVersion = this.getSceneVersion();
+
+        return this.currentSceneVersion === this.SCENE_VERSION_INITIAL // initial scene version update
+            || this.currentSceneVersion !== sceneVersion // ensure scene changed
+        ;
+    }
+
+    getSceneVersion() {
+        if (this.excalidrawRef) {
+            const elements = this.excalidrawRef.current.getSceneElements();
+            return window.Excalidraw.getSceneVersion(elements);
+        } else {
+            return this.SCENE_VERSION_ERROR;
+        }
+    }
+
+    updateSceneVersion() {
+        this.currentSceneVersion = this.getSceneVersion();
+    }
+
+    /**
+     * replaces exlicraw.com with own assets
+     *
+     * workaround until https://github.com/excalidraw/excalidraw/pull/5065 is merged and published
+     * needed for v0.11.0
+     *
+     * @param {string} string
+     * @returns
+     */
+    replaceExternalAssets = (string) => {
+        let result = string;
+        // exlidraw.com asset in react usage
+        result = result.replaceAll("https://excalidraw.com/", window.EXCALIDRAW_ASSET_PATH+"excalidraw-assets/");
+        return result;
+    }
+}

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

@@ -170,4 +170,14 @@ export default class EditableCodeTypeWidget extends TypeWidget {
             });
         }
     }
+
+    async executeWithCodeEditorEvent({resolve, ntxId}) {
+        if (!this.isNoteContext(ntxId)) {
+            return;
+        }
+
+        await this.initialized;
+
+        resolve(this.codeEditor);
+    }
 }

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

@@ -191,7 +191,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         await this.initialized;
 
         this.textEditor.model.change(writer => {
-            const insertPosition = this.textEditor.model.document.selection.getFirstPosition();
+            const insertPosition = this.textEditor.model.document.selection.getLastPosition();
             writer.insertText(text, insertPosition);
         });
     }
@@ -229,14 +229,18 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         return !selection.isCollapsed;
     }
 
-    async executeInActiveEditorEvent({callback}) {
+    async executeWithTextEditorEvent({callback, resolve, ntxId}) {
-        if (!this.isActive()) {
+        if (!this.isNoteContext(ntxId)) {
             return;
         }
 
         await this.initialized;
 
-        callback(this.textEditor);
+        if (callback) {
+            callback(this.textEditor);
+        }
+
+        resolve(this.textEditor);
     }
 
     addLinkToTextCommand() {

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

@@ -5,6 +5,7 @@ const TPL = `
     <style>
     .note-detail-readonly-code {
         min-height: 50px;
+        position: relative;
     }
     
     .note-detail-readonly-code-content {
@@ -30,4 +31,14 @@ export default class ReadOnlyCodeTypeWidget extends TypeWidget {
 
         this.$content.text(noteComplement.content);
     }
+
+    async executeWithContentElementEvent({resolve, ntxId}) {
+        if (!this.isNoteContext(ntxId)) {
+            return;
+        }
+
+        await this.initialized;
+
+        resolve(this.$content);
+    }
 }

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

@@ -33,6 +33,7 @@ const TPL = `
         padding-top: 10px;
         font-family: var(--detail-font-family);
         min-height: 50px;
+        position: relative;
     }
         
     .note-detail-readonly-text p:first-child, .note-detail-readonly-text::before {
@@ -114,4 +115,14 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
     async refreshIncludedNoteEvent({noteId}) {
         this.refreshIncludedNote(this.$content, noteId);
     }
+
+    async executeWithContentElementEvent({resolve, ntxId}) {
+        if (!this.isNoteContext(ntxId)) {
+            return;
+        }
+
+        await this.initialized;
+
+        resolve(this.$content);
+    }
 }

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

@@ -1,4 +1,5 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import appContext from "../../services/app_context.js";
 
 export default class TypeWidget extends NoteContextAwareWidget {
     // for overriding
@@ -34,9 +35,12 @@ export default class TypeWidget extends NoteContextAwareWidget {
     }
 
     isActive() {
-        return this.$widget.is(":visible");
+        return this.$widget.is(":visible") && this.noteContext?.ntxId === appContext.tabManager.activeNtxId;
     }
 
+    /**
+     * @returns {Promise|*} promise resolving content or directly the content
+     */ 
     getContent() {}
 
     focus() {}

src/public/stylesheets/theme-dark.css

@@ -79,3 +79,7 @@ body ::-webkit-calendar-picker-indicator {
 body .CodeMirror {
     filter: invert(90%) hue-rotate(180deg);
 }
+
+.excalidraw.theme--dark {
+    --theme-filter: invert(80%) hue-rotate(180deg) !important;
+}

src/public/stylesheets/tree.css

@@ -157,28 +157,26 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
     padding-left: 20px;
 }
 
+span.fancytree-active {
+    color: var(--active-item-text-color) !important;
+    background-color: var(--active-item-background-color) !important;
+    border-color: transparent; /* invisible border */
+    border-radius: 5px;
+}
+
 span.fancytree-active .fancytree-title {
     font-weight: bold;
     border: 0;
 }
 
-span.fancytree-active {
+span.fancytree-selected {
+    color: var(--hover-item-text-color) !important;
     border-color: var(--main-border-color) !important;
     border-radius: 5px;
 }
 
-span.fancytree-active, span.fancytree-active.fancytree-selected {
+span.fancytree-selected .fancytree-title {
-    color: var(--active-item-text-color) !important;
+    text-decoration: underline;
-    background-color: var(--active-item-background-color) !important;
-    border-color: var(--main-background-color) !important; /* invisible border */
-    border-radius: 5px;
-}
-
-span.fancytree-selected {
-    color: var(--hover-item-text-color) !important;
-    background-color: var(--hover-item-background-color) !important;
-    border-color: var(--main-background-color) !important; /* invisible border */
-    border-radius: 5px;
     font-style: italic;
 }
 

src/routes/api/image.js

@@ -11,7 +11,7 @@ function returnImage(req, res) {
     if (!image) {
         return res.sendStatus(404);
     }
-    else if (image.type !== 'image') {
+    else if (!["image", "canvas"].includes(image.type)){
         return res.sendStatus(400);
     }
     else if (image.isDeleted || image.data === null) {
@@ -19,10 +19,27 @@ function returnImage(req, res) {
         return res.send(fs.readFileSync(RESOURCE_DIR + '/db/image-deleted.png'));
     }
 
-    res.set('Content-Type', image.mime);
+    /**
-    res.set("Cache-Control", "no-cache, no-store, must-revalidate");
+     * special "image" type. the canvas is actually type application/json 
+     * to avoid bitrot and enable usage as referenced image the svg is included.
+     */
+    if (image.type === 'canvas') {
+        const content = image.getContent();
+        try {
+            const data = JSON.parse(content);
             
-    res.send(image.getContent());
+            const svg = data.svg || '<svg />'
+            res.set('Content-Type', "image/svg+xml");
+            res.set("Cache-Control", "no-cache, no-store, must-revalidate");
+            res.send(svg);
+        } catch(err) {
+            res.status(500).send("there was an error parsing excalidraw to svg");
+        }
+    } else {
+        res.set('Content-Type', image.mime);
+        res.set("Cache-Control", "no-cache, no-store, must-revalidate");
+        res.send(image.getContent());
+    }
 }
 
 function uploadImage(req) {

src/routes/api/login.js

@@ -83,6 +83,10 @@ function logoutFromProtectedSession() {
     ws.sendMessageToAllClients({ type: 'protectedSessionLogout' });
 }
 
+function touchProtectedSession() {
+    protectedSessionService.touchProtectedSession();
+}
+
 function token(req) {
     const password = req.body.password;
 
@@ -102,5 +106,6 @@ module.exports = {
     loginSync,
     loginToProtectedSession,
     logoutFromProtectedSession,
+    touchProtectedSession,
     token
 };

src/routes/api/note_map.js

@@ -213,7 +213,7 @@ function findExcerpts(sourceNote, referencedNoteId) {
 
         let centerEl = linkEl;
 
-        while (centerEl.tagName !== 'BODY' && centerEl.parentElement.textContent.length <= EXCERPT_CHAR_LIMIT) {
+        while (centerEl.tagName !== 'BODY' && centerEl.parentElement?.textContent?.length <= EXCERPT_CHAR_LIMIT) {
             centerEl = centerEl.parentElement;
         }
 

src/routes/api/options.js

@@ -55,7 +55,8 @@ const ALLOWED_OPTIONS = new Set([
     'weeklyBackupEnabled',
     'monthlyBackupEnabled',
     'maxContentWidth',
-    'compressImages'
+    'compressImages',
+    'downloadImagesAutomatically'
 ]);
 
 function getOptions() {

src/routes/routes.js

@@ -285,6 +285,7 @@ function register(app) {
     apiRoute(POST, '/api/special-notes/search-note', specialNotesRoute.createSearchNote);
     apiRoute(POST, '/api/special-notes/save-search-note', specialNotesRoute.saveSearchNote);
 
+    // :filename is not used by trilium, but instead used for "save as" to assign a human readable filename
     route(GET, '/api/images/:noteId/:filename', [auth.checkApiAuthOrElectron], imageRoute.returnImage);
     route(POST, '/api/images', [auth.checkApiAuthOrElectron, uploadMiddleware, csrfMiddleware], imageRoute.uploadImage, apiResultHandler);
     route(PUT, '/api/images/:noteId', [auth.checkApiAuthOrElectron, uploadMiddleware, csrfMiddleware], imageRoute.updateImage, apiResultHandler);
@@ -358,6 +359,7 @@ function register(app) {
     route(POST, '/api/login/sync', [], loginApiRoute.loginSync, apiResultHandler);
     // this is for entering protected mode so user has to be already logged-in (that's the reason we don't require username)
     apiRoute(POST, '/api/login/protected', loginApiRoute.loginToProtectedSession);
+    apiRoute(POST, '/api/login/protected/touch', loginApiRoute.touchProtectedSession);
     apiRoute(POST, '/api/logout/protected', loginApiRoute.logoutFromProtectedSession);
 
     route(POST, '/api/login/token', [], loginApiRoute.token, apiResultHandler);

src/services/app_info.js

@@ -4,7 +4,7 @@ const build = require('./build');
 const packageJson = require('../../package');
 const {TRILIUM_DATA_DIR} = require('./data_dir');
 
-const APP_DB_VERSION = 194;
+const APP_DB_VERSION = 195;
 const SYNC_VERSION = 25;
 const CLIPPER_PROTOCOL_VERSION = "1.0";
 

src/services/backend_script_api.js

@@ -210,7 +210,7 @@ function BackendScriptApi(currentNote, apiParams) {
      * @property {string} parentNoteId - MANDATORY
      * @property {string} title - MANDATORY
      * @property {string|buffer} content - MANDATORY
-     * @property {string} type - text, code, file, image, search, book, relation-map - MANDATORY
+     * @property {string} type - text, code, file, image, search, book, relation-map, canvas - MANDATORY
      * @property {string} mime - value is derived from default mimes for type
      * @property {boolean} isProtected - default is false
      * @property {boolean} isExpanded - default is false

src/services/build.js

@@ -1 +1 @@
-module.exports = { buildDate:"2022-04-22T00:07:59+02:00", buildRevision: "3b58b83f8bb93c04263081f60d75f211320ed065" };
+module.exports = { buildDate:"2022-05-27T22:06:07+02:00", buildRevision: "8905148dbcdf0118078a880e295563023ac20783" };

src/services/builtin_attributes.js

@@ -50,6 +50,7 @@ module.exports = [
     { type: 'label', name: 'shareDisallowRobotIndexing' },
     { type: 'label', name: 'displayRelations' },
     { type: 'label', name: 'hideRelations' },
+    { type: 'label', name: 'titleTemplate' },
 
     // relation names
     { type: 'relation', name: 'internalLink' },

src/services/consistency_checks.js

@@ -56,41 +56,66 @@ class ConsistencyChecks {
             childToParents[childNoteId].push(parentNoteId);
         }
 
+        /** @returns {boolean} true if cycle was found and we should try again */
         const checkTreeCycle = (noteId, path) => {
             if (noteId === 'root') {
-                return;
+                return false;
-            }
-
-            if (!childToParents[noteId] || childToParents[noteId].length === 0) {
-                logError(`No parents found for note ${noteId}`);
-
-                this.unrecoveredConsistencyErrors = true;
-                return;
             }
 
             for (const parentNoteId of childToParents[noteId]) {
                 if (path.includes(parentNoteId)) {
-                    logError(`Tree cycle detected at parent-child relationship: ${parentNoteId} - ${noteId}, whole path: ${path}`);
+                    if (this.autoFix) {
+                        const branch = becca.getBranchFromChildAndParent(noteId, parentNoteId);
+                        branch.markAsDeleted('cycle-autofix');
+                        logFix(`Branch '${branch.branchId}' between child '${noteId}' and parent '${parentNoteId}' has been deleted since it was causing a tree cycle.`);
 
-                    this.unrecoveredConsistencyErrors = true;
+                        return true;
+                    }
+                    else {
+                        logError(`Tree cycle detected at parent-child relationship: ${parentNoteId} - ${noteId}, whole path: ${path}`);
+
+                        this.unrecoveredConsistencyErrors = true;
+                    }
                 } else {
                     const newPath = path.slice();
                     newPath.push(noteId);
 
-                    checkTreeCycle(parentNoteId, newPath);
+                    const retryNeeded = checkTreeCycle(parentNoteId, newPath);
+
+                    if (retryNeeded) {
+                        return true;
+                    }
                 }
             }
+
+            return false;
         };
 
         const noteIds = Object.keys(childToParents);
 
         for (const noteId of noteIds) {
-            checkTreeCycle(noteId, []);
+            const retryNeeded = checkTreeCycle(noteId, []);
+
+            if (retryNeeded) {
+                return true;
+            }
         }
 
-        if (childToParents['root'].length !== 1 || childToParents['root'][0] !== 'none') {
+        return false;
-            logError('Incorrect root parent: ' + JSON.stringify(childToParents['root']));
+    }
-            this.unrecoveredConsistencyErrors = true;
+
+    checkAndRepairTreeCycles() {
+        let treeFixed = false;
+
+        while (this.checkTreeCycles()) {
+            // fixing cycle means deleting branches, we might need to create a new branch to recover the note
+            this.findExistencyIssues();
+
+            treeFixed = true;
+        }
+
+        if (treeFixed) {
+            this.reloadNeeded = true;
         }
     }
 
@@ -646,7 +671,7 @@ class ConsistencyChecks {
         if (!this.unrecoveredConsistencyErrors) {
             // we run this only if basic checks passed since this assumes basic data consistency
 
-            this.checkTreeCycles();
+            this.checkAndRepairTreeCycles();
         }
 
         if (this.reloadNeeded) {

src/services/entity_changes.js

@@ -135,7 +135,6 @@ function fillAllEntityChanges() {
         fillEntityChanges("branches", "branchId");
         fillEntityChanges("note_revisions", "noteRevisionId");
         fillEntityChanges("note_revision_contents", "noteRevisionId");
-        fillEntityChanges("recent_notes", "noteId");
         fillEntityChanges("attributes", "attributeId");
         fillEntityChanges("etapi_tokens", "etapiTokenId");
         fillEntityChanges("options", "name", 'isSynced = 1');

src/services/export/single.js

@@ -41,7 +41,7 @@ function exportSingleNote(taskContext, branch, format, res) {
         extension = mimeTypes.extension(note.mime) || 'code';
         mime = note.mime;
     }
-    else if (note.type === 'relation-map' || note.type === 'search') {
+    else if (note.type === 'relation-map' || note.type === 'canvas' || note.type === 'search') {
         payload = content;
         extension = 'json';
         mime = 'application/json';

src/services/note_types.js

@@ -8,5 +8,6 @@ module.exports = [
     'relation-map', 
     'book', 
     'note-map',
-    'mermaid'
+    'mermaid',
+    'canvas'
 ];

src/services/notes.js

@@ -17,7 +17,7 @@ const becca = require('../becca/becca');
 const Branch = require('../becca/entities/branch');
 const Note = require('../becca/entities/note');
 const Attribute = require('../becca/entities/attribute');
-const TaskContext = require("./task_context.js");
+const dayjs = require("dayjs");
 
 function getNewNotePosition(parentNoteId) {
     const note = becca.notes[parentNoteId];
@@ -53,7 +53,7 @@ function deriveMime(type, mime) {
         mime = 'text/html';
     } else if (type === 'code' || type === 'mermaid') {
         mime = 'text/plain';
-    } else if (['relation-map', 'search'].includes(type)) {
+    } else if (['relation-map', 'search', 'canvas'].includes(type)) {
         mime = 'application/json';
     } else if (['render', 'book'].includes(type)) {
         mime = '';
@@ -79,12 +79,34 @@ function copyChildAttributes(parentNote, childNote) {
     }
 }
 
+function getNewNoteTitle(parentNote) {
+    let title = "new note";
+
+    const titleTemplate = parentNote.getLabelValue('titleTemplate');
+
+    if (titleTemplate !== null) {
+        try {
+            const now = dayjs(cls.getLocalNowDateTime() || new Date());
+
+            // "officially" injected values:
+            // - now
+            // - parentNote
+
+            title = eval('`' + titleTemplate + '`');
+        } catch (e) {
+            log.error(`Title template of note '${parentNote.noteId}' failed with: ${e.message}`);
+        }
+    }
+
+    return title;
+}
+
 /**
  * Following object properties are mandatory:
  * - {string} parentNoteId
  * - {string} title
  * - {*} content
- * - {string} type - text, code, file, image, search, book, relation-map, render
+ * - {string} type - text, code, file, image, search, book, relation-map, canvas, render
  *
  * Following are optional (have defaults)
  * - {string} mime - value is derived from default mimes for type
@@ -104,8 +126,7 @@ function createNewNote(params) {
     }
 
     if (params.title === null || params.title === undefined) {
-        // empty title is allowed since it's possible to create such in the UI
+        params.title = getNewNoteTitle(parentNote);
-        throw new Error(`Note title must be set`);
     }
 
     if (params.content === null || params.content === undefined) {
@@ -302,6 +323,10 @@ function replaceUrl(content, url, imageNote) {
 }
 
 function downloadImages(noteId, content) {
+    if (!optionService.getOptionBool("downloadImagesAutomatically")) {
+        return content;
+    }
+
     const imageRe = /<img[^>]*?\ssrc=['"]([^'">]+)['"]/ig;
     let imageMatch;
 

src/services/options_init.js

@@ -83,7 +83,8 @@ const defaultOptions = [
     { name: 'weeklyBackupEnabled', value: 'true', isSynced: false },
     { name: 'monthlyBackupEnabled', value: 'true', isSynced: false },
     { name: 'maxContentWidth', value: '1200', isSynced: false },
-    { name: 'compressImages', value: 'true', isSynced: true }
+    { name: 'compressImages', value: 'true', isSynced: true },
+    { name: 'downloadImagesAutomatically', value: 'true', isSynced: true }
 ];
 
 function initStartupOptions() {

src/services/protected_session.js

@@ -2,6 +2,7 @@
 
 const log = require('./log');
 const dataEncryptionService = require('./data_encryption');
+const options = require("./options");
 
 let dataKey = null;
 
@@ -54,6 +55,28 @@ function decryptString(cipherText) {
     return dataEncryptionService.decryptString(getDataKey(), cipherText);
 }
 
+let lastProtectedSessionOperationDate = null;
+
+function touchProtectedSession() {
+    if (isProtectedSessionAvailable()) {
+        lastProtectedSessionOperationDate = Date.now();
+    }
+}
+
+function checkProtectedSessionExpiration() {
+    const protectedSessionTimeout = options.getOptionInt('protectedSessionTimeout');
+    if (isProtectedSessionAvailable()
+        && lastProtectedSessionOperationDate
+        && Date.now() - lastProtectedSessionOperationDate > protectedSessionTimeout * 1000) {
+
+        resetDataKey();
+
+        log.info("Expiring protected session");
+
+        require('./ws').reloadFrontend();
+    }
+}
+
 module.exports = {
     setDataKey,
     resetDataKey,
@@ -61,5 +84,7 @@ module.exports = {
     encrypt,
     decrypt,
     decryptString,
-    decryptNotes
+    decryptNotes,
+    touchProtectedSession,
+    checkProtectedSessionExpiration
 };

src/services/scheduler.js

@@ -6,6 +6,7 @@ const log = require('./log');
 const sql = require("./sql");
 const becca = require("../becca/becca");
 const specialNotesService = require("../services/special_notes");
+const protectedSessionService = require("../services/protected_session");
 
 function getRunAtHours(note) {
     try {
@@ -59,4 +60,6 @@ sqlInit.dbReady.then(() => {
 
         setTimeout(cls.wrap(() => specialNotesService.createMissingSpecialNotes()), 10 * 1000);
     }
+
+    setInterval(() => protectedSessionService.checkProtectedSessionExpiration(), 30000);
 });

src/services/search/expressions/note_content_fulltext.js

@@ -0,0 +1,116 @@
+"use strict";
+
+const Expression = require('./expression');
+const NoteSet = require('../note_set');
+const log = require('../../log');
+const becca = require('../../../becca/becca');
+const protectedSessionService = require('../../protected_session');
+const striptags = require('striptags');
+const utils = require("../../utils");
+
+const ALLOWED_OPERATORS = ['*=*', '=', '*=', '=*', '%='];
+
+const cachedRegexes = {};
+
+function getRegex(str) {
+    if (!(str in cachedRegexes)) {
+        cachedRegexes[str] = new RegExp(str, 'ms'); // multiline, dot-all
+    }
+
+    return cachedRegexes[str];
+}
+
+class NoteContentFulltextExp extends Expression {
+    constructor(operator, {tokens, raw, flatText}) {
+        super();
+
+        if (!ALLOWED_OPERATORS.includes(operator)) {
+            throw new Error(`Note content can be searched only with operators: ` + ALLOWED_OPERATORS.join(", ") + `, operator ${operator} given.`);
+        }
+
+        this.operator = operator;
+        this.tokens = tokens;
+        this.raw = !!raw;
+        this.flatText = !!flatText;
+    }
+
+    execute(inputNoteSet) {
+        const resultNoteSet = new NoteSet();
+        const sql = require('../../sql');
+
+        for (let {noteId, type, mime, content, isProtected} of sql.iterateRows(`
+                SELECT noteId, type, mime, content, isProtected
+                FROM notes JOIN note_contents USING (noteId) 
+                WHERE type IN ('text', 'code', 'mermaid') AND isDeleted = 0`)) {
+
+            if (!inputNoteSet.hasNoteId(noteId) || !(noteId in becca.notes)) {
+                continue;
+            }
+
+            if (isProtected) {
+                if (!protectedSessionService.isProtectedSessionAvailable()) {
+                    continue;
+                }
+
+                try {
+                    content = protectedSessionService.decryptString(content);
+                } catch (e) {
+                    log.info(`Cannot decrypt content of note ${noteId}`);
+                    continue;
+                }
+            }
+
+            content = this.preprocessContent(content, type, mime);
+
+            if (this.tokens.length === 1) {
+                const [token] = this.tokens;
+
+                if ((this.operator === '=' && token === content)
+                    || (this.operator === '*=' && content.endsWith(token))
+                    || (this.operator === '=*' && content.startsWith(token))
+                    || (this.operator === '*=*' && content.includes(token))
+                    || (this.operator === '%=' && getRegex(token).test(content))) {
+
+                    resultNoteSet.add(becca.notes[noteId]);
+                }
+            }
+            else {
+                const nonMatchingToken = this.tokens.find(token =>
+                    !content.includes(token) &&
+                    (
+                        // in case of default fulltext search we should consider both title, attrs and content
+                        // so e.g. "hello world" should match when "hello" is in title and "world" in content
+                        !this.flatText
+                        || !becca.notes[noteId].getFlatText().includes(token)
+                    )
+                );
+
+                if (!nonMatchingToken) {
+                    resultNoteSet.add(becca.notes[noteId]);
+                }
+            }
+        }
+
+        return resultNoteSet;
+    }
+
+    preprocessContent(content, type, mime) {
+        content = utils.normalize(content.toString());
+
+        if (type === 'text' && mime === 'text/html') {
+            if (!this.raw && content.length < 20000) { // striptags is slow for very large notes
+                // allow link to preserve URLs: https://github.com/zadam/trilium/issues/2412
+                content = striptags(content, ['a']);
+
+                // at least the closing tag can be easily stripped
+                content = content.replace(/<\/a>/ig, "");
+            }
+
+            content = content.replace(/&nbsp;/g, ' ');
+        }
+
+        return content.trim();
+    }
+}
+
+module.exports = NoteContentFulltextExp;

src/services/search/expressions/note_content_protected_fulltext.js

@@ -1,78 +0,0 @@
-"use strict";
-
-const Expression = require('./expression');
-const NoteSet = require('../note_set');
-const log = require('../../log');
-const becca = require('../../../becca/becca');
-const protectedSessionService = require('../../protected_session');
-const striptags = require('striptags');
-const utils = require("../../utils");
-
-// FIXME: create common subclass with NoteContentUnprotectedFulltextExp to avoid duplication
-class NoteContentProtectedFulltextExp extends Expression {
-    constructor(operator, tokens, raw) {
-        super();
-
-        if (operator !== '*=*') {
-            throw new Error(`Note content can be searched only with *=* operator`);
-        }
-
-        this.tokens = tokens;
-        this.raw = !!raw;
-    }
-
-    execute(inputNoteSet) {
-        const resultNoteSet = new NoteSet();
-
-        if (!protectedSessionService.isProtectedSessionAvailable()) {
-            return resultNoteSet;
-        }
-
-        const sql = require('../../sql');
-
-        for (let {noteId, type, mime, content} of sql.iterateRows(`
-                SELECT noteId, type, mime, content 
-                FROM notes JOIN note_contents USING (noteId) 
-                WHERE type IN ('text', 'code') AND isDeleted = 0 AND isProtected = 1`)) {
-
-            if (!inputNoteSet.hasNoteId(noteId) || !(noteId in becca.notes)) {
-                continue;
-            }
-
-            try {
-                content = protectedSessionService.decryptString(content);
-            }
-            catch (e) {
-                log.info(`Cannot decrypt content of note ${noteId}`);
-                continue;
-            }
-
-            content = this.preprocessContent(content, type, mime);
-
-            if (!this.tokens.find(token => !content.includes(token))) {
-                resultNoteSet.add(becca.notes[noteId]);
-            }
-        }
-
-        return resultNoteSet;
-    }
-
-    preprocessContent(content, type, mime) {
-        content = utils.normalize(content.toString());
-
-        if (type === 'text' && mime === 'text/html') {
-            if (!this.raw && content.length < 20000) { // striptags is slow for very large notes
-                // allow link to preserve URLs: https://github.com/zadam/trilium/issues/2412
-                content = striptags(content, ['a']);
-
-                // at least the closing tag can be easily stripped
-                content = content.replace(/<\/a>/ig, "");
-            }
-
-            content = content.replace(/&nbsp;/g, ' ');
-        }
-        return content;
-    }
-}
-
-module.exports = NoteContentProtectedFulltextExp;

src/services/search/expressions/note_content_unprotected_fulltext.js

@@ -1,64 +0,0 @@
-"use strict";
-
-const Expression = require('./expression');
-const NoteSet = require('../note_set');
-const becca = require('../../../becca/becca');
-const striptags = require('striptags');
-const utils = require("../../utils");
-
-// FIXME: create common subclass with NoteContentProtectedFulltextExp to avoid duplication
-class NoteContentUnprotectedFulltextExp extends Expression {
-    constructor(operator, tokens, raw) {
-        super();
-
-        if (operator !== '*=*') {
-            throw new Error(`Note content can be searched only with *=* operator`);
-        }
-
-        this.tokens = tokens;
-        this.raw = !!raw;
-    }
-
-    execute(inputNoteSet) {
-        const resultNoteSet = new NoteSet();
-
-        const sql = require('../../sql');
-
-        for (let {noteId, type, mime, content} of sql.iterateRows(`
-                SELECT noteId, type, mime, content 
-                FROM notes JOIN note_contents USING (noteId) 
-                WHERE type IN ('text', 'code') AND isDeleted = 0 AND isProtected = 0`)) {
-
-            if (!inputNoteSet.hasNoteId(noteId) || !(noteId in becca.notes)) {
-                continue;
-            }
-
-            content = this.preprocessContent(content, type, mime);
-
-            if (!this.tokens.find(token => !content.includes(token))) {
-                resultNoteSet.add(becca.notes[noteId]);
-            }
-        }
-
-        return resultNoteSet;
-    }
-
-    preprocessContent(content, type, mime) {
-        content = utils.normalize(content.toString());
-
-        if (type === 'text' && mime === 'text/html') {
-            if (!this.raw && content.length < 20000) { // striptags is slow for very large notes
-                // allow link to preserve URLs: https://github.com/zadam/trilium/issues/2412
-                content = striptags(content, ['a']);
-
-                // at least the closing tag can be easily stripped
-                content = content.replace(/<\/a>/ig, "");
-            }
-
-            content = content.replace(/&nbsp;/g, ' ');
-        }
-        return content;
-    }
-}
-
-module.exports = NoteContentUnprotectedFulltextExp;

src/services/search/services/build_comparator.js

@@ -1,3 +1,13 @@
+const cachedRegexes = {};
+
+function getRegex(str) {
+    if (!(str in cachedRegexes)) {
+        cachedRegexes[str] = new RegExp(str);
+    }
+
+    return cachedRegexes[str];
+}
+
 const stringComparators = {
     "=": comparedValue => (val => val === comparedValue),
     "!=": comparedValue => (val => val !== comparedValue),
@@ -8,6 +18,7 @@ const stringComparators = {
     "*=": comparedValue => (val => val && val.endsWith(comparedValue)),
     "=*": comparedValue => (val => val && val.startsWith(comparedValue)),
     "*=*": comparedValue => (val => val && val.includes(comparedValue)),
+    "%=": comparedValue => (val => val && !!getRegex(comparedValue).test(val)),
 };
 
 const numericComparators = {

src/services/search/services/lex.js

@@ -9,7 +9,7 @@ function lex(str) {
     let currentWord = '';
 
     function isSymbolAnOperator(chr) {
-        return ['=', '*', '>', '<', '!', "-", "+"].includes(chr);
+        return ['=', '*', '>', '<', '!', "-", "+", '%'].includes(chr);
     }
 
     function isPreviousSymbolAnOperator() {

src/services/search/services/parse.js

@@ -12,8 +12,7 @@ const PropertyComparisonExp = require('../expressions/property_comparison');
 const AttributeExistsExp = require('../expressions/attribute_exists');
 const LabelComparisonExp = require('../expressions/label_comparison');
 const NoteFlatTextExp = require('../expressions/note_flat_text');
-const NoteContentProtectedFulltextExp = require('../expressions/note_content_protected_fulltext');
+const NoteContentFulltextExp = require('../expressions/note_content_fulltext.js');
-const NoteContentUnprotectedFulltextExp = require('../expressions/note_content_unprotected_fulltext');
 const OrderByAndLimitExp = require('../expressions/order_by_and_limit');
 const AncestorExp = require("../expressions/ancestor");
 const buildComparator = require('./build_comparator');
@@ -32,8 +31,7 @@ function getFulltext(tokens, searchContext) {
     if (!searchContext.fastSearch) {
         return new OrExp([
             new NoteFlatTextExp(tokens),
-            new NoteContentProtectedFulltextExp('*=*', tokens),
+            new NoteContentFulltextExp('*=*', {tokens, flatText: true})
-            new NoteContentUnprotectedFulltextExp('*=*', tokens)
         ]);
     }
     else {
@@ -42,7 +40,7 @@ function getFulltext(tokens, searchContext) {
 }
 
 function isOperator(str) {
-    return str.match(/^[!=<>*]+$/);
+    return str.match(/^[!=<>*%]+$/);
 }
 
 function getExpression(tokens, searchContext, level = 0) {
@@ -140,10 +138,7 @@ function getExpression(tokens, searchContext, level = 0) {
 
             i++;
 
-            return new OrExp([
+            return new NoteContentFulltextExp(operator, {tokens: [tokens[i].token], raw });
-                new NoteContentUnprotectedFulltextExp(operator, [tokens[i].token], raw),
-                new NoteContentProtectedFulltextExp(operator, [tokens[i].token], raw)
-            ]);
         }
 
         if (tokens[i].token === 'parents') {
@@ -196,8 +191,7 @@ function getExpression(tokens, searchContext, level = 0) {
 
             return new OrExp([
                 new PropertyComparisonExp(searchContext, 'title', '*=*', tokens[i].token),
-                new NoteContentProtectedFulltextExp('*=*', [tokens[i].token]),
+                new NoteContentFulltextExp('*=*', {tokens: [tokens[i].token]})
-                new NoteContentUnprotectedFulltextExp('*=*', [tokens[i].token])
             ]);
         }
 

src/services/sql_init.js

@@ -153,10 +153,11 @@ function setDbAsInitialized() {
 
 function optimize() {
     log.info("Optimizing database");
+    const start = Date.now();
 
     sql.execute("PRAGMA optimize");
 
-    log.info("Optimization finished.");
+    log.info(`Optimization finished in ${Date.now() - start}ms.`);
 }
 
 dbReady.then(() => {

src/services/utils.js

@@ -168,7 +168,7 @@ const STRING_MIME_TYPES = [
 
 function isStringNote(type, mime) {
     // render and book are string note in the sense that they are expected to contain empty string
-    return ["text", "code", "relation-map", "search", "render", "book", "mermaid"].includes(type)
+    return ["text", "code", "relation-map", "search", "render", "book", "mermaid", "canvas"].includes(type)
         || mime.startsWith('text/')
         || STRING_MIME_TYPES.includes(mime);
 }
@@ -192,7 +192,7 @@ function formatDownloadTitle(filename, type, mime) {
 
     if (type === 'text') {
         return filename + '.html';
-    } else if (['relation-map', 'search'].includes(type)) {
+    } else if (['relation-map', 'canvas', 'search'].includes(type)) {
         return filename + '.json';
     } else {
         if (!mime) {

src/share/canvas_share.js

@@ -0,0 +1,102 @@
+/**
+ * this is used as a "standalone js" file and required by a shared note directly via script-tags
+ * 
+ * data input comes via window variable as follow
+ * const {elements, appState, files} = window.triliumExcalidraw;
+ */
+
+document.getElementById("excalidraw-app").style.height = appState.height+"px";
+
+const App = () => {
+    const excalidrawRef = React.useRef(null);
+    const excalidrawWrapperRef = React.useRef(null);
+    const [dimensions, setDimensions] = React.useState({
+        width: undefined,
+        height: appState.height,
+    });
+    const [viewModeEnabled, setViewModeEnabled] = React.useState(false);
+    
+    // ensure that assets are loaded from trilium
+    
+    /**
+     * resizing
+     */
+    React.useEffect(() => {
+        const dimensions = {
+            width: excalidrawWrapperRef.current.getBoundingClientRect().width,
+            height: excalidrawWrapperRef.current.getBoundingClientRect().height
+        };
+        setDimensions(dimensions);
+
+        const onResize = () => {
+            const dimensions = {
+                width: excalidrawWrapperRef.current.getBoundingClientRect().width,
+                height: excalidrawWrapperRef.current.getBoundingClientRect().height
+            };
+            setDimensions(dimensions);
+        };
+        
+        window.addEventListener("resize", onResize);
+        // ensure that resize is also called for split creation and deletion
+        // not really the problem. problem is saved appState!
+        // self.$renderElement.addEventListener("resize", onResize);
+        
+        return () => window.removeEventListener("resize", onResize);
+    }, [excalidrawWrapperRef]);
+
+    return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+            "div",
+            {
+                className: "excalidraw-wrapper",
+                ref: excalidrawWrapperRef
+            },        
+            React.createElement(Excalidraw.default, {
+                ref: excalidrawRef,
+                width: dimensions.width,
+                height: dimensions.height,
+                initialData: {
+                    elements, appState, files
+                },
+                viewModeEnabled: !viewModeEnabled,
+                zenModeEnabled: false,
+                gridModeEnabled: false,
+                isCollaborating: false,
+                detectScroll: false,
+                handleKeyboardGlobally: false,
+                autoFocus: true,
+                renderFooter: () => {
+                    return React.createElement(
+                        React.Fragment,
+                        null,
+                        React.createElement(
+                            "div",
+                            {
+                                className: "excalidraw-top-right-ui excalidraw Island",
+                            },
+                            React.createElement(
+                                "label",
+                                {
+                                    style: {
+                                        padding: "5px",
+                                    },
+                                    className: "excalidraw Stack",
+                                },
+                                React.createElement(
+                                    "button", 
+                                    {
+                                        onClick: () => setViewModeEnabled(!viewModeEnabled)
+                                    }, 
+                                    viewModeEnabled ? " Enter simple view mode " : " Enter extended view mode "
+                                ),
+                                ""
+                            ),
+                        ));
+                },
+            })
+        )
+    );
+};
+ReactDOM.render(React.createElement(App), document.getElementById("excalidraw-app"));

src/share/content_renderer.js

@@ -85,6 +85,38 @@ document.addEventListener("DOMContentLoaded", function() {
     else if (note.type === 'book') {
         isEmpty = true;
     }
+    else if (note.type === 'canvas') {
+        header += `<script>
+                    window.EXCALIDRAW_ASSET_PATH = window.location.origin + "/node_modules/@excalidraw/excalidraw/dist/";
+                   </script>`;
+        header += `<script src="../../node_modules/react/umd/react.production.min.js"></script>`;
+        header += `<script src="../../node_modules/react-dom/umd/react-dom.production.min.js"></script>`;
+        header += `<script src="../../node_modules/@excalidraw/excalidraw/dist/excalidraw.production.min.js"></script>`;
+        header += `<style type="text/css">
+
+            .excalidraw-wrapper {
+                height: 100%;
+            }
+
+            :root[dir="ltr"]
+            .excalidraw
+            .layer-ui__wrapper
+            .zen-mode-transition.App-menu_bottom--transition-left {
+                transform: none;
+            }
+        </style>`;
+
+        content = `<div>
+            <script>
+                const {elements, appState, files} = JSON.parse(${JSON.stringify(content)});
+                window.triliumExcalidraw = {elements, appState, files}
+            </script>
+            <div id="excalidraw-app"></div>
+            <hr>
+            <a href="api/images/${note.noteId}/${note.title}?utc=${note.utcDateModified}">Get Image Link</a>
+            <script src="./canvas_share.js"></script>
+        </div>`;
+    }
     else {
         content = '<p>This note type cannot be displayed.</p>';
     }
@@ -99,7 +131,3 @@ document.addEventListener("DOMContentLoaded", function() {
 module.exports = {
     getContent
 };
-
-
-
-

src/share/routes.js

@@ -1,3 +1,6 @@
+const express = require('express');
+const path = require('path');
+
 const shaca = require("./shaca/shaca");
 const shacaLoader = require("./shaca/shaca_loader");
 const shareRoot = require("./share_root");
@@ -55,6 +58,8 @@ function register(router) {
         });
     }
 
+    router.use('/share/canvas_share.js', express.static(path.join(__dirname, 'canvas_share.js')));
+
     router.get(['/share', '/share/'], (req, res, next) => {
         shacaLoader.ensureLoad();
 
@@ -62,16 +67,18 @@ function register(router) {
     });
 
     router.get('/share/:shareId', (req, res, next) => {
-        const {shareId} = req.params;
-
         shacaLoader.ensureLoad();
 
+        const {shareId} = req.params;
+
         const note = shaca.aliasToNote[shareId] || shaca.notes[shareId];
 
         renderNote(note, res);
     });
 
     router.get('/share/api/notes/:noteId', (req, res, next) => {
+        shacaLoader.ensureLoad();
+
         const {noteId} = req.params;
         const note = shaca.getNote(noteId);
 
@@ -85,6 +92,8 @@ function register(router) {
     });
 
     router.get('/share/api/notes/:noteId/download', (req, res, next) => {
+        shacaLoader.ensureLoad();
+
         const {noteId} = req.params;
         const note = shaca.getNote(noteId);
 
@@ -106,25 +115,46 @@ function register(router) {
         res.send(note.getContent());
     });
 
+    // :filename is not used by trilium, but instead used for "save as" to assign a human readable filename
     router.get('/share/api/images/:noteId/:filename', (req, res, next) => {
+        shacaLoader.ensureLoad();
+
         const image = shaca.getNote(req.params.noteId);
 
         if (!image) {
             return res.status(404).send(`Note '${req.params.noteId}' not found`);
         }
-        else if (image.type !== 'image') {
+        else if (!["image", "canvas"].includes(image.type)) {
-            return res.status(400).send("Requested note is not an image");
+            return res.status(400).send("Requested note is not a shareable image");
+        } else if (image.type === "canvas") {
+            /**
+             * special "image" type. the canvas is actually type application/json 
+             * to avoid bitrot and enable usage as referenced image the svg is included.
+             */
+            const content = image.getContent();
+            try {
+                const data = JSON.parse(content);
+
+                const svg = data.svg || '<svg />';
+                addNoIndexHeader(image, res);
+                res.set('Content-Type', "image/svg+xml");
+                res.set("Cache-Control", "no-cache, no-store, must-revalidate");
+                res.send(svg);
+            } catch(err) {
+                res.status(500).send("there was an error parsing excalidraw to svg");
+            }
+        } else {
+            // normal image
+            res.set('Content-Type', image.mime);
+            addNoIndexHeader(image, res);
+            res.send(image.getContent());
         }
-
-        addNoIndexHeader(image, res);
-
-        res.set('Content-Type', image.mime);
-
-        res.send(image.getContent());
     });
 
     // used for PDF viewing
     router.get('/share/api/notes/:noteId/view', (req, res, next) => {
+        shacaLoader.ensureLoad();
+
         const {noteId} = req.params;
         const note = shaca.getNote(noteId);
 

start-docker.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+chown -R node:node /home/node
+su-exec node node ./src/www

trilium.iml

@@ -13,6 +13,8 @@
       <excludeFolder url="file://$MODULE_DIR$/libraries" />
       <excludeFolder url="file://$MODULE_DIR$/docs" />
       <excludeFolder url="file://$MODULE_DIR$/bin/better-sqlite3" />
+      <excludeFolder url="file://$MODULE_DIR$/data" />
+      <excludeFolder url="file://$MODULE_DIR$/.flatpak-builder" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />