docs(user): mention changes to video player

This commit is contained in:
Elian Doran 2026-03-11 09:44:01 +02:00
parent 72951386b1
commit dc7b91433b
No known key found for this signature in database
34 changed files with 406 additions and 196 deletions

File diff suppressed because one or more lines are too long

View File

@ -4,21 +4,17 @@
maintaining and supporting it long-term proved to be unsustainable.</p>
<p>When upgrading to v0.102.0, your Chat notes will be preserved, but instead
of the dedicated chat window they will be turned to a normal&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>&nbsp;note,
revealing the underlying JSON of the conversation.</p>
href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note, revealing the underlying
JSON of the conversation.</p>
<h2>Alternative solutions (MCP)</h2>
<p>Given the recent advancements of the AI scene, MCP has grown to be more
powerful and facilitates easier integrations with various application.</p>
<p>As such, there are third-party solutions that integrate an MCP server
that can be used with Trilium:</p>
<ul>
<li>
<p><a href="https://github.com/tan-yong-sheng/triliumnext-mcp">tan-yong-sheng/triliumnext-mcp</a>
</p>
<li><a href="https://github.com/tan-yong-sheng/triliumnext-mcp">tan-yong-sheng/triliumnext-mcp</a>
</li>
<li>
<p><a href="https://github.com/perfectra1n/triliumnext-mcp">perfectra1n/triliumnext-mcp</a>
</p>
<li><a href="https://github.com/perfectra1n/triliumnext-mcp">perfectra1n/triliumnext-mcp</a>
</li>
</ul>
<aside class="admonition important">

View File

@ -209,7 +209,7 @@
<tr>
<td><code spellcheck="false">#calendar:color</code>
</td>
<td><strong>❌️ Removed since v0.100.0. Use</strong> <code spellcheck="false">**#color**</code> <strong>instead.</strong>&nbsp;
<td><strong>❌️ Removed since v0.100.0. Use</strong> <code spellcheck="false">**#color**</code> <strong>instead.</strong>&nbsp;&nbsp;
<br>
<br>Similar to <code spellcheck="false">#color</code>, but applies the color
only for the event in the calendar and not for other places such as the
@ -233,15 +233,15 @@
<td><code spellcheck="false">#calendar:displayedAttributes</code>
</td>
<td>Allows displaying the value of one or more attributes in the calendar
like this:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
like this:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>
<img src="7_Calendar_image.png">&nbsp;&nbsp;&nbsp;&nbsp;
<img src="7_Calendar_image.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br><code spellcheck="false">#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;&nbsp;&nbsp;&nbsp;
<br><code spellcheck="false">#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>It can also be used with relations, case in which it will display the
title of the target note:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
title of the target note:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br><code spellcheck="false">~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
</td>
@ -294,44 +294,27 @@
<p>When not used in a Journal, the calendar is recursive. That is, it will
look for events not just in its child notes but also in the children of
these child notes.</p>
<p>&nbsp;</p>
<h2>Recurrence</h2>
<p>The built in calendar view also supports repeating tasks. If a child note
of the calendar has a #recurrence label with a valid recurrence, that event
will repeat on the calendar according to the recurrence string.&nbsp;</p>
<p>For example, to make a note repeat on the calendar:</p>
<ul>
<li>
<p>Every Day - <code spellcheck="false">#recurrence="FREQ=DAILY;INTERVAL=1"</code>
</p>
<li>Every Day - <code spellcheck="false">#recurrence="FREQ=DAILY;INTERVAL=1"</code>
</li>
<li>
<p>Every 3 days - <code spellcheck="false">#recurrence="FREQ=DAILY;INTERVAL=3"</code>
</p>
<li>Every 3 days - <code spellcheck="false">#recurrence="FREQ=DAILY;INTERVAL=3"</code>
</li>
<li>
<p>Every week - <code spellcheck="false">#recurrence="FREQ=WEEKLY;INTERVAL=1"</code>
</p>
<li>Every week - <code spellcheck="false">#recurrence="FREQ=WEEKLY;INTERVAL=1"</code>
</li>
<li>
<p>Every 2 weeks on Monday, Wednesday and Friday - <code spellcheck="false">#recurrence="FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE,FR"</code>
</p>
<li>Every 2 weeks on Monday, Wednesday and Friday - <code spellcheck="false">#recurrence="FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE,FR"</code>
</li>
<li>
<p>Every 3 months - <code spellcheck="false">#recurrence="FREQ=MONTHLY;INTERVAL=3"</code>
</p>
<li>Every 3 months - <code spellcheck="false">#recurrence="FREQ=MONTHLY;INTERVAL=3"</code>
</li>
<li>
<p>Every 2 months on the First Sunday - <code spellcheck="false">#recurrence="FREQ=MONTHLY;INTERVAL=2;BYDAY=1SU"</code>
</p>
<li>Every 2 months on the First Sunday - <code spellcheck="false">#recurrence="FREQ=MONTHLY;INTERVAL=2;BYDAY=1SU"</code>
</li>
<li>
<p>Every month on the Last Friday - <code spellcheck="false">#recurrence="FREQ=MONTHLY;INTERVAL=1;BYDAY=-1FR"</code>
</p>
</li>
<li>
<p>And so on.</p>
<li>Every month on the Last Friday - <code spellcheck="false">#recurrence="FREQ=MONTHLY;INTERVAL=1;BYDAY=-1FR"</code>
</li>
<li>And so on.</li>
</ul>
<p>For other examples of valid <code spellcheck="false">RRULE</code> strings
see <a href="https://icalendar.org/rrule-tool.html">https://icalendar.org/rrule-tool.html</a>
@ -352,7 +335,6 @@
note ID and title of the note with the erroneous recurrence message. This
note will not be added to the calendar</p>
</aside>
<p>&nbsp;</p>
<h2>Use-cases</h2>
<h3>Using with the Journal / calendar</h3>
<p>It is possible to integrate the calendar view into the Journal with day

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 612 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 612 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@ -5,7 +5,8 @@
create a <em>File</em> note type directly:</p>
<ul>
<li>Drag a file into the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
<li>Right click a note and select <em>Import into note</em> and point it to
<li
>Right click a note and select <em>Import into note</em> and point it to
one of the supported files.</li>
</ul>
<h2>Supported file types</h2>
@ -13,7 +14,7 @@
<p>See&nbsp;<a class="reference-link" href="#root/_help_XJGJrpu7F9sh">PDFs</a>.</p>
<h3>Images</h3>
<figure class="image image-style-align-center image_resized" style="width:50%;">
<img style="aspect-ratio:879/766;" src="3_File_image.png"
<img style="aspect-ratio:879/766;" src="2_File_image.png"
width="879" height="766">
</figure>
<p>Interaction:</p>
@ -30,25 +31,10 @@
</li>
</ul>
<h3>Videos</h3>
<figure class="image image-style-align-center image_resized" style="width:50%;">
<img style="aspect-ratio:854/700;" src="File_image.png"
width="854" height="700">
</figure>
<p>Video files can be added in as well. The file is streamed directly, so
when accessing the note from a server it doesn't have to download the entire
video to start playing it.</p>
<aside class="admonition caution">
<p>Although Trilium offers support for videos, it is generally not meant
to be used with very large files. Uploading large videos will cause the&nbsp;
<a
class="reference-link" href="#root/_help_wX4HbRucYSDD">Database</a>&nbsp;to balloon as well as the any&nbsp;<a class="reference-link"
href="#root/_help_ODY7qQn5m2FT">Backup</a>&nbsp;of it. In addition to that, there
might be slowdowns when first uploading the files. Otherwise, a large database
should not impact the general performance of Trilium significantly.</p>
</aside>
<p>See&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/W8vYD3Q1zjCR/_help_AjqEeiDUOzj4">Videos</a>.</p>
<h3>Audio</h3>
<figure class="image image-style-align-center image_resized" style="width:50%;">
<img style="aspect-ratio:850/243;" src="2_File_image.png"
<img style="aspect-ratio:850/243;" src="1_File_image.png"
width="850" height="243">
</figure>
<p>Adding a supported audio file will reveal a basic audio player that can
@ -64,7 +50,7 @@
</ul>
<h3>Text files</h3>
<figure class="image image-style-align-center image_resized" style="width:50%;">
<img style="aspect-ratio:926/347;" src="1_File_image.png"
<img style="aspect-ratio:926/347;" src="File_image.png"
width="926" height="347">
</figure>
<p>Files that are identified as containing text will show a preview of their
@ -83,7 +69,7 @@
application.</p>
<h3>Unknown file types</h3>
<figure class="image image-style-align-center image_resized" style="width:50%;">
<img style="aspect-ratio:532/240;" src="4_File_image.png"
<img style="aspect-ratio:532/240;" src="3_File_image.png"
width="532" height="240">
</figure>
<p>If the file could not be identified as any of the supported file types
@ -97,28 +83,30 @@
href="#root/_help_BlN9DFI679QC">Ribbon</a>.
<ul>
<li><em>Download</em>, which will download the file for local use.</li>
<li><em>Open</em>, will will open the file with the system-default application.</li>
<li>Upload new revision to replace the file with a new one.</li>
<li
><em>Open</em>, will will open the file with the system-default application.</li>
<li
>Upload new revision to replace the file with a new one.</li>
</ul>
</li>
<li>It is <strong>not</strong> possible to change the note type of a <em>File</em> note.</li>
<li>Convert into an <a href="#root/_help_0vhv7lsOLy82">attachment</a> from the <a href="#root/_help_8YBEPzcpUgxw">note menu</a>.</li>
</li>
<li>It is <strong>not</strong> possible to change the note type of a <em>File</em> note.</li>
<li
>Convert into an <a href="#root/_help_0vhv7lsOLy82">attachment</a> from the <a href="#root/_help_8YBEPzcpUgxw">note menu</a>.</li>
</ul>
<h2>Relation with other notes</h2>
<ul>
<li>
<p>Files are also displayed in the&nbsp;<a class="reference-link" href="#root/_help_0ESUbbAxVnoK">Note List</a>&nbsp;based
on their type:</p>
<img class="image_resized" style="aspect-ratio:853/315;width:50%;"
src="5_File_image.png" width="853" height="315">
</li>
<li>
<p>Non-image files can be embedded into text notes as read-only widgets via
the&nbsp;<a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>&nbsp;functionality.</p>
</li>
<li>
<p>Image files can be embedded into text notes like normal images via&nbsp;
<a
class="reference-link" href="#root/_help_0Ofbk1aSuVRu">Image references</a>.</p>
<p>
<img class="image_resized" style="aspect-ratio:853/315;width:50%;" src="4_File_image.png"
width="853" height="315">
</p>
</li>
<li>Non-image files can be embedded into text notes as read-only widgets via
the&nbsp;<a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>&nbsp;functionality.</li>
<li
>Image files can be embedded into text notes like normal images via&nbsp;
<a
class="reference-link" href="#root/_help_0Ofbk1aSuVRu">Image references</a>.</li>
</ul>

View File

@ -0,0 +1,150 @@
<figure class="image image-style-align-right image_resized" style="width:61.8%;">
<img style="aspect-ratio:953/587;" src="Videos_image.png"
width="953" height="587">
</figure>
<p>Starting with v0.103.0, Trilium has a custom video player which offers
more features than the built-in video player.</p>
<p>Versions prior to v0.103.0 also support videos, but using the built-in
player.</p>
<p>The file is streamed directly, so when accessing the note from a server
it doesn't have to download the entire video to start playing it.</p>
<h2>Note on large video files</h2>
<p>Although Trilium offers support for videos, it is generally not meant
to be used with very large files. Uploading large videos will cause the&nbsp;
<a
class="reference-link" href="#root/_help_wX4HbRucYSDD">Database</a>&nbsp;to balloon as well as the any&nbsp;<a class="reference-link"
href="#root/_help_ODY7qQn5m2FT">Backup</a>&nbsp;of it. In addition to that, there
might be slowdowns when first uploading the files. Otherwise, a large database
should not impact the general performance of Trilium significantly.</p>
<h2>Supported formats</h2>
<p>Trilium uses the built-in video decoding mechanism of the browser (or
Electron/Chromium when running on the desktop). Starting with v0.103.0,
a message will be displayed instead when a video format is not supported.</p>
<h2>Interactions</h2>
<p>To play/pause the video, simply click anywhere on the video.</p>
<p>The controls at the bottom will hide automatically after playing, simply
move the mouse to show them again.</p>
<p>The bottom bar has the following features:</p>
<ul>
<li>
<p>A track bar to seek across the video.</p>
</li>
<li>
<p>On the left of the track bar, the current time is indicated.</p>
</li>
<li>
<p>On the right of the track bar, the remaining time is indicated.</p>
</li>
<li>
<p>On the left side there are buttons to:</p>
<ul>
<li>
<p>Adjust the playback speed (e.g. 0.5x, 1x).</p>
</li>
<li>
<p>Rotate the video by 90 degrees.</p>
</li>
</ul>
</li>
<li>
<p>In the center:</p>
<ul>
<li>
<p>Go back by 10s</p>
</li>
<li>
<p>Play/pause</p>
</li>
<li>
<p>Go forward by 30s</p>
</li>
<li>
<p>Loop, which when enabled will restart the video once it reaches the end.</p>
</li>
</ul>
</li>
<li>
<p>On the right side:</p>
<ul>
<li>
<p>Mute button</p>
</li>
<li>
<p>Volume adjustment</p>
</li>
<li>
<p>Full screen</p>
</li>
<li>
<p>Zoom to fill, which will crop the video so that it fills the entire window.</p>
</li>
<li>
<p>Picture-in-picture (if the browser supports it).</p>
</li>
</ul>
</li>
</ul>
<h2>Keyboard shortcuts</h2>
<p>The following keyboard shortcuts are supported by the video player:</p>
<figure
class="table">
<table>
<tbody>
<tr>
<td><kbd>Space</kbd>
</td>
<td>Play/pause</td>
</tr>
<tr>
<td><kbd>Left arrow key</kbd>
</td>
<td>Go back by 10s</td>
</tr>
<tr>
<td><kbd>Right arrow key</kbd>
</td>
<td>Go forward by 10s</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>Left arrow key</kbd>
</td>
<td>Go back by 1 min</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>Right arrow key</kbd>
</td>
<td>Go right by 1 min</td>
</tr>
<tr>
<td><kbd>F</kbd>
</td>
<td>Toggle full-screen</td>
</tr>
<tr>
<td><kbd>M</kbd>
</td>
<td>Mute/unmute</td>
</tr>
<tr>
<td><kbd>Home</kbd>
</td>
<td>Go to the beginning of the video</td>
</tr>
<tr>
<td><kbd>End</kbd>
</td>
<td>Go to the end of the video</td>
</tr>
<tr>
<td><kbd>Up</kbd>
</td>
<td>Increase volume by 5%</td>
</tr>
<tr>
<td><kbd>Down</kbd>
</td>
<td>Decrease volume by 5%</td>
</tr>
</tbody>
</table>
</figure>

Binary file not shown.

After

Width:  |  Height:  |  Size: 842 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 652 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -1,6 +1,6 @@
{
"formatVersion": 2,
"appVersion": "0.101.3",
"appVersion": "0.102.1",
"files": [
{
"isClone": false,
@ -10391,20 +10391,6 @@
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "wX4HbRucYSDD",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "ODY7qQn5m2FT",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
@ -10467,13 +10453,20 @@
"value": "bx bx-file-blank",
"isInheritable": false,
"position": 140
},
{
"type": "relation",
"name": "internalLink",
"value": "AjqEeiDUOzj4",
"isInheritable": false,
"position": 150
}
],
"format": "markdown",
"dataFileName": "File.md",
"attachments": [
{
"attachmentId": "FoEnowwOhzLT",
"attachmentId": "fZ7VMfQJWuLQ",
"title": "image.png",
"role": "image",
"mime": "image/png",
@ -10481,7 +10474,7 @@
"dataFileName": "File_image.png"
},
{
"attachmentId": "fZ7VMfQJWuLQ",
"attachmentId": "hddkgf7kr9g4",
"title": "image.png",
"role": "image",
"mime": "image/png",
@ -10489,7 +10482,7 @@
"dataFileName": "1_File_image.png"
},
{
"attachmentId": "hddkgf7kr9g4",
"attachmentId": "hIg9g5pgsjS3",
"title": "image.png",
"role": "image",
"mime": "image/png",
@ -10497,28 +10490,20 @@
"dataFileName": "2_File_image.png"
},
{
"attachmentId": "hIg9g5pgsjS3",
"attachmentId": "IC0j8LFCOKka",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "3_File_image.png"
},
{
"attachmentId": "IC0j8LFCOKka",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "4_File_image.png"
},
{
"attachmentId": "wNHX24feZRAl",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "5_File_image.png"
"dataFileName": "4_File_image.png"
}
],
"dirFileName": "File",
@ -10609,6 +10594,57 @@
"dataFileName": "1_PDFs_image.png"
}
]
},
{
"isClone": false,
"noteId": "AjqEeiDUOzj4",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"W8vYD3Q1zjCR",
"AjqEeiDUOzj4"
],
"title": "Videos",
"notePosition": 20,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "wX4HbRucYSDD",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "ODY7qQn5m2FT",
"isInheritable": false,
"position": 40
},
{
"type": "label",
"name": "iconClass",
"value": "bx bx-video",
"isInheritable": false,
"position": 50
}
],
"format": "markdown",
"dataFileName": "Videos.md",
"attachments": [
{
"attachmentId": "649jtu5ELGa8",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Videos_image.png"
}
]
}
]
}
@ -15810,6 +15846,13 @@
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "shareAlias",
@ -15823,13 +15866,6 @@
"value": "bx bx-bot",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 40
}
],
"format": "markdown",

View File

@ -15,7 +15,7 @@ Trilium is an open-source solution for note-taking and organizing a personal kno
* <a class="reference-link" href="User%20Guide/Installation%20%26%20Setup/Desktop%20Installation.md">Desktop Installation</a>
* <a class="reference-link" href="User%20Guide/Installation%20%26%20Setup/Server%20Installation.md">Server Installation</a>
* <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Frontend%20API">Frontend API</a> or <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Backend%20API.dat">[missing note]</a>
* <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Frontend%20API">[missing note]</a> or <a class="reference-link" href="User%20Guide/Scripting/Script%20API/Backend%20API.dat">[missing note]</a>
* [ETAPI reference](User%20Guide/Advanced%20Usage/ETAPI%20\(REST%20API\)/API%20Reference.dat)
## External links

View File

@ -45,7 +45,7 @@ When a new promoted attribute definition is created, it creates a corresponding
The only purpose of the attribute definition is to set up a template. If the attribute was marked as promoted, then it's also displayed to the user for easy editing.
| | |
| | |
| --- | --- |
| <figure class="image"><img style="aspect-ratio:495/157;" src="2_Promoted Attributes_image.png" width="495" height="157"></figure> | Notice how the promoted attribute definition only creates a “Due date” box above the text content. |
| <figure class="image"><img style="aspect-ratio:663/160;" src="3_Promoted Attributes_image.png" width="663" height="160"></figure> | Once a value is set by the user, a new label (or relation, depending on the type) is created. The name of the attribute matches one set when creating the promoted attribute. |

View File

@ -30,7 +30,7 @@ Additionally, shorter aliases are available for common configurations (see Alter
| Environment Variable | Type | Default | Description |
| --- | --- | --- | --- |
| `TRILIUM_GENERAL_INSTANCENAME` | string | "" | Instance name for API identification |
| `TRILIUM_GENERAL_INSTANCENAME` | string | "" | Instance name for API identification |
| `TRILIUM_GENERAL_NOAUTHENTICATION` | boolean | false | Disable authentication (server only) |
| `TRILIUM_GENERAL_NOBACKUP` | boolean | false | Disable automatic backups |
| `TRILIUM_GENERAL_NODESKTOPICON` | boolean | false | Disable desktop icon creation |
@ -43,12 +43,12 @@ Additionally, shorter aliases are available for common configurations (see Alter
| `TRILIUM_NETWORK_HOST` | string | "0.0.0.0" | Server host binding |
| `TRILIUM_NETWORK_PORT` | string | "3000" | Server port |
| `TRILIUM_NETWORK_HTTPS` | boolean | false | Enable HTTPS |
| `TRILIUM_NETWORK_CERTPATH` | string | "" | SSL certificate path |
| `TRILIUM_NETWORK_KEYPATH` | string | "" | SSL key path |
| `TRILIUM_NETWORK_CERTPATH` | string | "" | SSL certificate path |
| `TRILIUM_NETWORK_KEYPATH` | string | "" | SSL key path |
| `TRILIUM_NETWORK_TRUSTEDREVERSEPROXY` | boolean/string | false | Reverse proxy trust settings |
| `TRILIUM_NETWORK_CORSALLOWORIGIN` | string | "" | CORS allowed origins |
| `TRILIUM_NETWORK_CORSALLOWMETHODS` | string | "" | CORS allowed methods |
| `TRILIUM_NETWORK_CORSALLOWHEADERS` | string | "" | CORS allowed headers |
| `TRILIUM_NETWORK_CORSALLOWORIGIN` | string | "" | CORS allowed origins |
| `TRILIUM_NETWORK_CORSALLOWMETHODS` | string | "" | CORS allowed methods |
| `TRILIUM_NETWORK_CORSALLOWHEADERS` | string | "" | CORS allowed headers |
| `TRILIUM_NETWORK_CORSRESOURCEPOLICY` | string | same-origin | CORS Resource Policy allows same-origin/same-site/cross-origin as values, will error if not |
### Session Section
@ -61,26 +61,26 @@ Additionally, shorter aliases are available for common configurations (see Alter
| Environment Variable | Type | Default | Description |
| --- | --- | --- | --- |
| `TRILIUM_SYNC_SYNCSERVERHOST` | string | "" | Sync server host URL |
| `TRILIUM_SYNC_SYNCSERVERHOST` | string | "" | Sync server host URL |
| `TRILIUM_SYNC_SYNCSERVERTIMEOUT` | string | "120000" | Sync server timeout in milliseconds |
| `TRILIUM_SYNC_SYNCPROXY` | string | "" | Sync proxy URL |
| `TRILIUM_SYNC_SYNCPROXY` | string | "" | Sync proxy URL |
### MultiFactorAuthentication Section
| Environment Variable | Type | Default | Description |
| --- | --- | --- | --- |
| `TRILIUM_MULTIFACTORAUTHENTICATION_OAUTHBASEURL` | string | "" | OAuth/OpenID base URL |
| `TRILIUM_MULTIFACTORAUTHENTICATION_OAUTHCLIENTID` | string | "" | OAuth client ID |
| `TRILIUM_MULTIFACTORAUTHENTICATION_OAUTHCLIENTSECRET` | string | "" | OAuth client secret |
| `TRILIUM_MULTIFACTORAUTHENTICATION_OAUTHBASEURL` | string | "" | OAuth/OpenID base URL |
| `TRILIUM_MULTIFACTORAUTHENTICATION_OAUTHCLIENTID` | string | "" | OAuth client ID |
| `TRILIUM_MULTIFACTORAUTHENTICATION_OAUTHCLIENTSECRET` | string | "" | OAuth client secret |
| `TRILIUM_MULTIFACTORAUTHENTICATION_OAUTHISSUERBASEURL` | string | "[https://accounts.google.com](https://accounts.google.com)" | OAuth issuer base URL |
| `TRILIUM_MULTIFACTORAUTHENTICATION_OAUTHISSUERNAME` | string | "Google" | OAuth issuer display name |
| `TRILIUM_MULTIFACTORAUTHENTICATION_OAUTHISSUERICON` | string | "" | OAuth issuer icon URL |
| `TRILIUM_MULTIFACTORAUTHENTICATION_OAUTHISSUERICON` | string | "" | OAuth issuer icon URL |
### Logging Section
| Environment Variable | Type | Default | Description |
| --- | --- | --- | --- |
| `TRILIUM_LOGGING_RETENTIONDAYS` | integer | 90 | Number of days to retain log files |
| `TRILIUM_LOGGING_RETENTIONDAYS` | integer | 90 | Number of days to retain log files |
## Alternative Environment Variables

View File

@ -22,9 +22,9 @@ These are the types of active content in Trilium, along with a few examples of w
| <a class="reference-link" href="../Scripting/Backend%20scripts.md">Backend scripts</a> | Yes | Can run custom code on the server of Trilium (Node.js environment), with full access to the notes and the database. | Has access to all the unencrypted notes, but with full access to the database it can completely destroy the data. It also has access to execute other applications or alter the files and folders on the server). |
| <a class="reference-link" href="../Note%20Types/Web%20View.md">Web View</a> | Yes | Displays a website inside a note. | Can point to a phishing website which can collect the data (for example on a log in page). |
| <a class="reference-link" href="../Note%20Types/Render%20Note.md">Render Note</a> | Yes | Renders custom content inside a note, such as a dashboard or a new editor that is not officially supported by Trilium. | Can affect the UI similar to front-end scripts or custom widgets since the scripts are not completely encapsulated, or they can act similar to a web view where they can collect data entered by the user. |
| <a class="reference-link" href="../Theme%20development/Custom%20app-wide%20CSS.md">Custom app-wide CSS</a> | No | Can alter the layout and style of the UI using CSS, applied regardless of theme. | Generally less problematic than the rest of active content, but a badly written CSS can affect the layout of the application, requiring the use of <a class="reference-link" href="../Advanced%20Usage/Safe%20mode.md">Safe mode</a> to be able to use the application. |
| [Custom themes](../Theme%20development) | No | Can change the style of the entire UI. | Similar to custom app-wide CSS. |
| <a class="reference-link" href="Themes/Icon%20Packs.md">Icon Packs</a> | No | Introduces new icons that can be used for notes. | Generally are more contained and less prone to cause issues, but they can cause performance issues (for example if the icon pack has millions of icons in it). |
| <a class="reference-link" href="../Theme%20development/Custom%20app-wide%20CSS.md">Custom app-wide CSS</a> | No | Can alter the layout and style of the UI using CSS, applied regardless of theme. | Generally less problematic than the rest of active content, but a badly written CSS can affect the layout of the application, requiring the use of <a class="reference-link" href="../Advanced%20Usage/Safe%20mode.md">Safe mode</a> to be able to use the application. |
| [Custom themes](../Theme%20development) | No | Can change the style of the entire UI. | Similar to custom app-wide CSS. |
| <a class="reference-link" href="Themes/Icon%20Packs.md">Icon Packs</a> | No | Introduces new icons that can be used for notes. | Generally are more contained and less prone to cause issues, but they can cause performance issues (for example if the icon pack has millions of icons in it). |
## Active content badge

View File

@ -229,9 +229,9 @@ You can open Trilium and automatically trigger a search by including the search
| Parameter | Value | Description |
| --- | --- | --- |
| MIN\_FUZZY\_TOKEN\_LENGTH | 3 | Minimum characters for fuzzy matching |
| MAX\_EDIT\_DISTANCE | 2 | Maximum character changes allowed |
| RESULT\_SUFFICIENCY\_THRESHOLD | 5 | Minimum exact results before fuzzy fallback |
| MIN\_FUZZY\_TOKEN\_LENGTH | 3 | Minimum characters for fuzzy matching |
| MAX\_EDIT\_DISTANCE | 2 | Maximum character changes allowed |
| RESULT\_SUFFICIENCY\_THRESHOLD | 5 | Minimum exact results before fuzzy fallback |
| MAX\_CONTENT\_SIZE | 10MB | Maximum note content size for search processing |
### Limits

View File

@ -3,7 +3,7 @@ Collections are a unique type of note that don't have content, but instead displ
## Main collections
| | |
| | |
| --- | --- |
| <figure class="image"><img style="aspect-ratio:1651/810;" src="Collections_collection_ca.webp" width="1651" height="810"></figure> | <a class="reference-link" href="Collections/Calendar.md">Calendar</a>  <br>which displays a week, month or year calendar with the notes being shown as events. New events can be added easily by dragging across the calendar. |
| <figure class="image"><img style="aspect-ratio:1643/647;" src="Collections_collection_ta.webp" width="1643" height="647"></figure> | <a class="reference-link" href="Collections/Table.md">Table</a>  <br>displays each note as a row in a table, with <a class="reference-link" href="Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a> being shown as well. This makes it easy to visualize attributes of notes, as well as making them easily editable. |

View File

@ -23,12 +23,12 @@ The position on the map and the zoom are saved inside the map note and restored
### Adding a new note using the plus button
| | | |
| | | |
| --- | --- | --- |
| 1 | To create a marker, first navigate to the desired point on the map. Then press the ![](9_Geo%20Map_image.png) button in the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) (top-right) area.       <br> <br>If the button is not visible, make sure the button section is visible by pressing the chevron button (![](15_Geo%20Map_image.png)) in the top-right of the map. | |
| 2 | <img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png" width="1730" height="416"> | Once pressed, the map will enter in the insert mode, as illustrated by the notification.          <br> <br>Simply click the point on the map where to place the marker, or the Escape key to cancel. |
| 3 | <img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map_image.png" width="1586" height="404"> | Enter the name of the marker/note to be created. |
| 4 | <img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="14_Geo Map_image.png" width="1696" height="608"> | Once confirmed, the marker will show up on the map and it will also be displayed as a child note of the map. |
| 1 | To create a marker, first navigate to the desired point on the map. Then press the ![](9_Geo%20Map_image.png) button in the [Floating buttons](../Basic%20Concepts%20and%20Features/UI%20Elements/Floating%20buttons.md) (top-right) area.       <br> <br>If the button is not visible, make sure the button section is visible by pressing the chevron button (![](15_Geo%20Map_image.png)) in the top-right of the map. | |
| 2 | <img class="image_resized" style="aspect-ratio:1730/416;width:100%;" src="2_Geo Map_image.png" width="1730" height="416"> | Once pressed, the map will enter in the insert mode, as illustrated by the notification.          <br> <br>Simply click the point on the map where to place the marker, or the Escape key to cancel. |
| 3 | <img class="image_resized" style="aspect-ratio:1586/404;width:100%;" src="7_Geo Map_image.png" width="1586" height="404"> | Enter the name of the marker/note to be created. |
| 4 | <img class="image_resized" style="aspect-ratio:1696/608;width:100%;" src="14_Geo Map_image.png" width="1696" height="608"> | Once confirmed, the marker will show up on the map and it will also be displayed as a child note of the map. |
### Adding a new note using the contextual menu
@ -106,31 +106,31 @@ The value of the attribute is made up of the latitude and longitude separated by
### Adding from Google Maps
| | | |
| | | |
| --- | --- | --- |
| 1 | <figure class="image image-style-align-center image_resized" style="width:56.84%;"><img style="aspect-ratio:732/918;" src="11_Geo Map_image.png" width="732" height="918"></figure> | Go to Google Maps on the web and look for a desired location, right click on it and a context menu will show up.          <br> <br>Simply click on the first item displaying the coordinates and they will be copied to clipboard.          <br> <br>Then paste the value inside the text box into the `#geolocation` attribute of a child note of the map (don't forget to surround the value with a `"` character). |
| 2 | <figure class="image image-style-align-center image_resized" style="width:100%;"><img style="aspect-ratio:518/84;" src="4_Geo Map_image.png" width="518" height="84"></figure> | In Trilium, create a child note under the map. |
| 3 | <figure class="image image-style-align-center image_resized" style="width:100%;"><img style="aspect-ratio:1074/276;" src="10_Geo Map_image.png" width="1074" height="276"></figure> | And then go to Owned Attributes and type `#geolocation="`, then paste from the clipboard as-is and then add the ending `"` character. Press Enter to confirm and the map should now be updated to contain the new note. |
| 1 | <figure class="image image-style-align-center image_resized" style="width:56.84%;"><img style="aspect-ratio:732/918;" src="11_Geo Map_image.png" width="732" height="918"></figure> | Go to Google Maps on the web and look for a desired location, right click on it and a context menu will show up.          <br> <br>Simply click on the first item displaying the coordinates and they will be copied to clipboard.          <br> <br>Then paste the value inside the text box into the `#geolocation` attribute of a child note of the map (don't forget to surround the value with a `"` character). |
| 2 | <figure class="image image-style-align-center image_resized" style="width:100%;"><img style="aspect-ratio:518/84;" src="4_Geo Map_image.png" width="518" height="84"></figure> | In Trilium, create a child note under the map. |
| 3 | <figure class="image image-style-align-center image_resized" style="width:100%;"><img style="aspect-ratio:1074/276;" src="10_Geo Map_image.png" width="1074" height="276"></figure> | And then go to Owned Attributes and type `#geolocation="`, then paste from the clipboard as-is and then add the ending `"` character. Press Enter to confirm and the map should now be updated to contain the new note. |
### Adding from OpenStreetMap
Similarly to the Google Maps approach:
| | | |
| | | |
| --- | --- | --- |
| 1 | <img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png" width="562" height="454"> | Go to any location on openstreetmap.org and right click to bring up the context menu. Select the “Show address” item. |
| 2 | <img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png" width="696" height="480"> | The address will be visible in the top-left of the screen, in the place of the search bar.          <br> <br>Select the coordinates and copy them into the clipboard. |
| 3 | <img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png" width="640" height="276"> | Simply paste the value inside the text box into the `#geolocation` attribute of a child note of the map and then it should be displayed on the map. |
| 1 | <img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png" width="562" height="454"> | Go to any location on openstreetmap.org and right click to bring up the context menu. Select the “Show address” item. |
| 2 | <img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png" width="696" height="480"> | The address will be visible in the top-left of the screen, in the place of the search bar.          <br> <br>Select the coordinates and copy them into the clipboard. |
| 3 | <img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png" width="640" height="276"> | Simply paste the value inside the text box into the `#geolocation` attribute of a child note of the map and then it should be displayed on the map. |
## Adding GPS tracks (.gpx)
Trilium has basic support for displaying GPS tracks on the geo map.
| | | |
| | | |
| --- | --- | --- |
| 1 | <figure class="image image-style-align-center"><img style="aspect-ratio:226/74;" src="3_Geo Map_image.png" width="226" height="74"></figure> | To add a track, simply drag & drop a .gpx file inside the geo map in the note tree. |
| 2 | <figure class="image image-style-align-center"><img style="aspect-ratio:322/222;" src="13_Geo Map_image.png" width="322" height="222"></figure> | In order for the file to be recognized as a GPS track, it needs to show up as `application/gpx+xml` in the _File type_ field. |
| 3 | <figure class="image image-style-align-center"><img style="aspect-ratio:620/530;" src="6_Geo Map_image.png" width="620" height="530"></figure> | When going back to the map, the track should now be visible.          <br> <br>The start and end points of the track are indicated by the two blue markers. |
| 1 | <figure class="image image-style-align-center"><img style="aspect-ratio:226/74;" src="3_Geo Map_image.png" width="226" height="74"></figure> | To add a track, simply drag & drop a .gpx file inside the geo map in the note tree. |
| 2 | <figure class="image image-style-align-center"><img style="aspect-ratio:322/222;" src="13_Geo Map_image.png" width="322" height="222"></figure> | In order for the file to be recognized as a GPS track, it needs to show up as `application/gpx+xml` in the _File type_ field. |
| 3 | <figure class="image image-style-align-center"><img style="aspect-ratio:620/530;" src="6_Geo Map_image.png" width="620" height="530"></figure> | When going back to the map, the track should now be visible.          <br> <br>The start and end points of the track are indicated by the two blue markers. |
> [!NOTE]
> The starting point of the track will be displayed as a marker, with the name of the note underneath. The start marker will also respect the icon and the `color` of the note. The end marker is displayed with a distinct icon.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 612 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 612 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@ -16,7 +16,7 @@ See <a class="reference-link" href="File/PDFs.md">PDFs</a>.
### Images
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:879/766;" src="3_File_image.png" width="879" height="766"></figure>
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:879/766;" src="2_File_image.png" width="879" height="766"></figure>
Interaction:
@ -26,16 +26,11 @@ Interaction:
### Videos
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:854/700;" src="File_image.png" width="854" height="700"></figure>
Video files can be added in as well. The file is streamed directly, so when accessing the note from a server it doesn't have to download the entire video to start playing it.
> [!CAUTION]
> Although Trilium offers support for videos, it is generally not meant to be used with very large files. Uploading large videos will cause the <a class="reference-link" href="../Advanced%20Usage/Database.md">Database</a> to balloon as well as the any <a class="reference-link" href="../Installation%20%26%20Setup/Backup.md">Backup</a> of it. In addition to that, there might be slowdowns when first uploading the files. Otherwise, a large database should not impact the general performance of Trilium significantly.
See <a class="reference-link" href="File/Videos.md">Videos</a>.
### Audio
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:850/243;" src="2_File_image.png" width="850" height="243"></figure>
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:850/243;" src="1_File_image.png" width="850" height="243"></figure>
Adding a supported audio file will reveal a basic audio player that can be used to play it.
@ -48,7 +43,7 @@ Interactions:
### Text files
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:926/347;" src="1_File_image.png" width="926" height="347"></figure>
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:926/347;" src="File_image.png" width="926" height="347"></figure>
Files that are identified as containing text will show a preview of their content. One common use case for this type of file is to embed text files whose content is not necessarily of interest to the user, such as third-party libraries or generated content, that can then be downloaded if needed.
@ -58,7 +53,7 @@ Since one of the use cases for having files instead of notes is to display large
### Unknown file types
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:532/240;" src="4_File_image.png" width="532" height="240"></figure>
<figure class="image image-style-align-center image_resized" style="width:50%;"><img style="aspect-ratio:532/240;" src="3_File_image.png" width="532" height="240"></figure>
If the file could not be identified as any of the supported file types from above, it will be treated as an unknown file. In this case, all the default interactions will be available such as downloading or opening the file externally, but there will be no preview of the content.
@ -75,6 +70,6 @@ If the file could not be identified as any of the supported file types from abov
* Files are also displayed in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a> based on their type:
<img class="image_resized" style="aspect-ratio:853/315;width:50%;" src="5_File_image.png" width="853" height="315">
<img class="image_resized" style="aspect-ratio:853/315;width:50%;" src="4_File_image.png" width="853" height="315">
* Non-image files can be embedded into text notes as read-only widgets via the <a class="reference-link" href="Text/Include%20Note.md">Include Note</a> functionality.
* Image files can be embedded into text notes like normal images via <a class="reference-link" href="Text/Images/Image%20references.md">Image references</a>.

View File

@ -0,0 +1,63 @@
# Videos
<figure class="image image-style-align-right image_resized" style="width:61.8%;"><img style="aspect-ratio:953/587;" src="Videos_image.png" width="953" height="587"></figure>
Starting with v0.103.0, Trilium has a custom video player which offers more features than the built-in video player.
Versions prior to v0.103.0 also support videos, but using the built-in player.
The file is streamed directly, so when accessing the note from a server it doesn't have to download the entire video to start playing it.
## Note on large video files
Although Trilium offers support for videos, it is generally not meant to be used with very large files. Uploading large videos will cause the <a class="reference-link" href="../../Advanced%20Usage/Database.md">Database</a> to balloon as well as the any <a class="reference-link" href="../../Installation%20%26%20Setup/Backup.md">Backup</a> of it. In addition to that, there might be slowdowns when first uploading the files. Otherwise, a large database should not impact the general performance of Trilium significantly.
## Supported formats
Trilium uses the built-in video decoding mechanism of the browser (or Electron/Chromium when running on the desktop). Starting with v0.103.0, a message will be displayed instead when a video format is not supported.
## Interactions
To play/pause the video, simply click anywhere on the video.
The controls at the bottom will hide automatically after playing, simply move the mouse to show them again.
The bottom bar has the following features:
* A track bar to seek across the video.
* On the left of the track bar, the current time is indicated.
* On the right of the track bar, the remaining time is indicated.
* On the left side there are buttons to:
* Adjust the playback speed (e.g. 0.5x, 1x).
* Rotate the video by 90 degrees.
* In the center:
* Go back by 10s
* Play/pause
* Go forward by 30s
* Loop, which when enabled will restart the video once it reaches the end.
* On the right side:
* Mute button
* Volume adjustment
* Full screen
* Zoom to fill, which will crop the video so that it fills the entire window.
* Picture-in-picture (if the browser supports it).
## Keyboard shortcuts
The following keyboard shortcuts are supported by the video player:
| | |
| --- | --- |
| <kbd>Space</kbd> | Play/pause |
| <kbd>Left arrow key</kbd> | Go back by 10s |
| <kbd>Right arrow key</kbd> | Go forward by 10s |
| <kbd>Ctrl</kbd> + <kbd>Left arrow key</kbd> | Go back by 1 min |
| <kbd>Ctrl</kbd> + <kbd>Right arrow key</kbd> | Go right by 1 min |
| <kbd>F</kbd> | Toggle full-screen |
| <kbd>M</kbd> | Mute/unmute |
| <kbd>Home</kbd> | Go to the beginning of the video |
| <kbd>End</kbd> | Go to the end of the video |
| <kbd>Up</kbd> | Increase volume by 5% |
| <kbd>Down</kbd> | Decrease volume by 5% |

Binary file not shown.

After

Width:  |  Height:  |  Size: 842 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 652 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -1,7 +1,7 @@
# Keyboard shortcuts
## Trilium-specific shortcuts
| Action | PC | Mac |
| Action | PC | Mac |
| --- | --- | --- |
| Bring up inline formatting toolbar (arrow keys <kbd><span></span></kbd>,<kbd><span></span></kbd> to navigate, <kbd>Enter</kbd> to apply) | <kbd>Alt</kbd>+<kbd>F10</kbd> | <kbd></kbd>+<kbd>F10</kbd> |
| Bring up block formatting toolbar | <kbd>Alt</kbd>+<kbd>F10</kbd> | <kbd></kbd>+<kbd>F10</kbd> |
@ -13,9 +13,9 @@
| Mark selected text as [keyboard shortcut](Developer-specific%20formatting.md) | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd> | <kbd></kbd>\+ <kbd></kbd>\+ <kbd>K</kbd> |
| Insert <a class="reference-link" href="Math%20Equations.md">Math Equations</a> | <kbd>Ctrl</kbd> + <kbd>M</kbd> | <kbd></kbd>\+ <kbd>M</kbd> |
| Move blocks (lists, paragraphs, etc.) up | <kbd>Ctrl</kbd>+<kbd></kbd> | <kbd></kbd>+<kbd></kbd> |
| <kbd>Alt</kbd>+<kbd></kbd> | <kbd></kbd>+<kbd></kbd> | |
| <kbd>Alt</kbd>+<kbd></kbd> | <kbd></kbd>+<kbd></kbd> | |
| Move blocks (lists, paragraphs, etc.) down | <kbd>Ctrl</kbd>+<kbd></kbd> | <kbd></kbd>+<kbd></kbd> |
| <kbd>Alt</kbd>+<kbd></kbd> | <kbd></kbd>+<kbd></kbd> | |
| <kbd>Alt</kbd>+<kbd></kbd> | <kbd></kbd>+<kbd></kbd> | |
## Common shortcuts
@ -24,9 +24,9 @@
### Content editing
| Action | PC | Mac |
| Action | PC | Mac |
| --- | --- | --- |
| Insert a hard break (a new paragraph) | <kbd>Enter</kbd> | |
| Insert a hard break (a new paragraph) | <kbd>Enter</kbd> | |
| Insert a soft break (a `<br>` element) | <kbd>Shift</kbd>+<kbd>Enter</kbd> | <kbd>⇧Enter</kbd> |
| Copy selected content | <kbd>Ctrl</kbd>+<kbd>C</kbd> | <kbd>⌘C</kbd> |
| Paste content | <kbd>Ctrl</kbd>+<kbd>V</kbd> | <kbd>⌘V</kbd> |
@ -36,8 +36,8 @@
| Bold text | <kbd>Ctrl</kbd>+<kbd>B</kbd> | <kbd>⌘B</kbd> |
| Change text case | <kbd>Shift</kbd>+<kbd>F3</kbd> | <kbd>⇧F3</kbd> (may require <kbd>Fn</kbd>) |
| Create link | <kbd>Ctrl</kbd>+<kbd>K</kbd> | <kbd>⌘K</kbd> |
| Move out of a link | <kbd>←←</kbd>, <kbd>→→</kbd> | |
| Move out of an inline code style | <kbd>←←</kbd>, <kbd>→→</kbd> | |
| Move out of a link | <kbd>←←</kbd>, <kbd>→→</kbd> | |
| Move out of an inline code style | <kbd>←←</kbd>, <kbd>→→</kbd> | |
| Select all | <kbd>Ctrl</kbd>+<kbd>A</kbd> | <kbd>⌘A</kbd> |
| Find in the document | <kbd>Ctrl</kbd>+<kbd>F</kbd> | <kbd>⌘F</kbd> |
| Copy text formatting | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd> | <kbd>⌘⇧C</kbd> |
@ -45,45 +45,45 @@
| Italic text | <kbd>Ctrl</kbd>+<kbd>I</kbd> | <kbd>⌘I</kbd> |
| Strikethrough text | <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd> | <kbd>⌘⇧X</kbd> |
| Underline text | <kbd>Ctrl</kbd>+<kbd>U</kbd> | <kbd>⌘U</kbd> |
| Revert autoformatting action | <kbd>Backspace</kbd> | |
| Revert autoformatting action | <kbd>Backspace</kbd> | |
### Interacting with blocks
Blocks are images, tables, blockquotes, annotations.
| Action | PC | Mac |
| Action | PC | Mac |
| --- | --- | --- |
| Insert a new paragraph directly after a widget | <kbd>Enter</kbd> | |
| Insert a new paragraph directly after a widget | <kbd>Enter</kbd> | |
| Insert a new paragraph directly before a widget | <kbd>Shift</kbd>+<kbd>Enter</kbd> | <kbd>⇧Enter</kbd> |
| Move the caret to allow typing directly before a widget | <kbd></kbd>, <kbd></kbd> | |
| Move the caret to allow typing directly after a widget | <kbd></kbd>, <kbd></kbd> | |
| After entering a nested editable, move the selection to the closest ancestor widget. For example: move from an image caption to the whole image widget. | <kbd>Tab</kbd> then <kbd>Esc</kbd> | |
| Move the caret to allow typing directly before a widget | <kbd></kbd>, <kbd></kbd> | |
| Move the caret to allow typing directly after a widget | <kbd></kbd>, <kbd></kbd> | |
| After entering a nested editable, move the selection to the closest ancestor widget. For example: move from an image caption to the whole image widget. | <kbd>Tab</kbd> then <kbd>Esc</kbd> | |
Specifically for lists:
| Action | PC | Mac |
| Action | PC | Mac |
| --- | --- | --- |
| Increase list item indent | <kbd></kbd> | |
| Increase list item indent | <kbd></kbd> | |
| Decrease list item indent | <kbd>Shift</kbd>+<kbd></kbd> | <kbd>⇧⇥</kbd> |
In tables:
| Action | PC | Mac |
| Action | PC | Mac |
| --- | --- | --- |
| Move the selection to the next cell | <kbd></kbd> | |
| Move the selection to the next cell | <kbd></kbd> | |
| Move the selection to the previous cell | <kbd>Shift</kbd>+<kbd></kbd> | <kbd>⇧⇥</kbd> |
| Insert a new table row (when in the last cell of a table) | <kbd></kbd> | |
| Navigate through the table | <kbd></kbd>, <kbd></kbd>, <kbd></kbd>, <kbd></kbd> | |
| Insert a new table row (when in the last cell of a table) | <kbd></kbd> | |
| Navigate through the table | <kbd></kbd>, <kbd></kbd>, <kbd></kbd>, <kbd></kbd> | |
### General UI shortcuts
| Action | PC | Mac |
| Action | PC | Mac |
| --- | --- | --- |
| Close contextual balloons, dropdowns, and dialogs | <kbd>Esc</kbd> | |
| Close contextual balloons, dropdowns, and dialogs | <kbd>Esc</kbd> | |
| Open the accessibility help dialog | <kbd>Alt</kbd>+<kbd>0</kbd> | <kbd>⌥0</kbd> |
| Move focus between form fields (inputs, buttons, etc.) | <kbd></kbd>, <kbd>Shift</kbd>+<kbd></kbd> | <kbd></kbd>, <kbd>⇧⇥</kbd> |
| Move focus to the toolbar, navigate between toolbars | <kbd>Alt</kbd>+<kbd>F10</kbd> | <kbd>⌥F10</kbd> (may require <kbd>Fn</kbd>) |
| Navigate through the toolbar or menu bar | <kbd></kbd>, <kbd></kbd>, <kbd></kbd>, <kbd></kbd> | |
| Navigate to the next focusable field or an element outside the editor | <kbd>Tab</kbd>, <kbd>Shift</kbd>+<kbd>Tab</kbd> | |
| Execute the currently focused button. Executing buttons that interact with the editor content moves the focus back to the content. | <kbd>Enter</kbd>, <kbd>Space</kbd> | |
| Navigate through the toolbar or menu bar | <kbd></kbd>, <kbd></kbd>, <kbd></kbd>, <kbd></kbd> | |
| Navigate to the next focusable field or an element outside the editor | <kbd>Tab</kbd>, <kbd>Shift</kbd>+<kbd>Tab</kbd> | |
| Execute the currently focused button. Executing buttons that interact with the editor content moves the focus back to the content. | <kbd>Enter</kbd>, <kbd>Space</kbd> | |
| Move focus in and out of an active dialog window | <kbd>Ctrl</kbd>+<kbd>F6</kbd> | <kbd>⌘F6</kbd> (may require <kbd>Fn</kbd>) |

View File

@ -23,14 +23,14 @@ For bulleted and numbered lists, it's possible to configure an alternative marke
It possible to add content-level blocks such as headings, code blocks, tables within lists, as follows:
| | | |
| | | |
| --- | --- | --- |
| 1 | ![](6_Lists_image.png) | First, create a list. |
| 2 | ![](9_Lists_image.png) | Press Enter to create a new list item. |
| 3 | ![](5_Lists_image.png) | Press Backspace to get rid of the bullet point. Notice the cursor position. |
| 4 | <img class="image_resized" style="aspect-ratio:676/112;width:98.29%;" src="10_Lists_image.png" width="676" height="112"> | At this point, insert any desired block-level item such as a code block. |
| 5 | <img class="image_resized" style="aspect-ratio:675/129;width:94.22%;" src="8_Lists_image.png" width="675" height="129"> | To continue with a new bullet point, press Enter until the cursor moves to a new blank position. |
| 6 | <img class="image_resized" style="aspect-ratio:675/129;width:100%;" src="3_Lists_image.png" width="675" height="129"> | Press Enter once more to create the new bullet. |
| 1 | ![](6_Lists_image.png) | First, create a list. |
| 2 | ![](9_Lists_image.png) | Press Enter to create a new list item. |
| 3 | ![](5_Lists_image.png) | Press Backspace to get rid of the bullet point. Notice the cursor position. |
| 4 | <img class="image_resized" style="aspect-ratio:676/112;width:98.29%;" src="10_Lists_image.png" width="676" height="112"> | At this point, insert any desired block-level item such as a code block. |
| 5 | <img class="image_resized" style="aspect-ratio:675/129;width:94.22%;" src="8_Lists_image.png" width="675" height="129"> | To continue with a new bullet point, press Enter until the cursor moves to a new blank position. |
| 6 | <img class="image_resized" style="aspect-ratio:675/129;width:100%;" src="3_Lists_image.png" width="675" height="129"> | Press Enter once more to create the new bullet. |
The same principle applies to all three list types (bullet, numbered and to-do).

View File

@ -3,7 +3,7 @@ Front-end scripts are custom JavaScript notes that are run on the client (browse
There are four flavors of front-end scripts:
| | |
| | |
| --- | --- |
| Regular scripts | These are run with the current app and note context. These can be run either manually or automatically on start-up. |
| <a class="reference-link" href="Frontend%20Basics/Custom%20Widgets.md">Custom Widgets</a> | These can introduce new UI elements in various positions, such as near the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a>, content area or even the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Right%20Sidebar.md">Right Sidebar</a>. |

View File

@ -9,7 +9,7 @@ As such, the first step is to create a new note to gather all the themes.
## Step 2. Create the theme
| | |
| | |
| --- | --- |
| ![](Creating%20a%20custom%20theme_3_.png) | Themes are code notes with a special attribute. Start by creating a new code note. |
| ![](Creating%20a%20custom%20theme_1_.png) | Then change the note type to a CSS code. |

View File

@ -1,7 +1,7 @@
# Custom app-wide CSS
It is possible to provide a CSS file to be used regardless of the theme set by the user.
| | |
| | |
| --- | --- |
| ![](Custom%20app-wide%20CSS_image.png) | Start by creating a new note and changing the note type to CSS |
| ![](2_Custom%20app-wide%20CSS_image.png) | In the ribbon, press the “Owned Attributes” section and type `#appCss`. |