gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-27 09:44:23 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

docs(user): mention history navigation buttons in the tab bar

Browse Source
This commit is contained in:
Elian Doran 2025-12-23 21:16:24 +02:00
parent ae83126903
commit 89ef38ba97
No known key found for this signature in database
27 changed files with 513 additions and 514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Navigation/Note Navigation.html generated vendored
View File

@ -1,16 +1,26 @@
<p>One of the Trilium's goals is to provide fast and comfortable navigation
between notes.</p>
<h2>Backwards and forward</h2>
<p>You can use alt-left and alt-right to move back and forward in history
of viewed pages.</p>
<p>This works identically to browser backwards / forwards, it's actually
using built-in browser support for this.</p>
<p>
<img src="Note Navigation_image.png">
</p>
<p>To move back and forward in history of viewed pages:</p>
<ul>
<li data-list-item-id="efffff1c8c58e38016fe0b583260a10a7">The&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>&nbsp;can
be configured to display navigation buttons (see <em>Go to Next Note</em> and <em>Go to Previous Note</em> in <em>Available Launchers</em>).</li>
<li
data-list-item-id="ef55b30b7d4a82c0579a77d456b482386">On the left side of the <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_3seOhtN8uLIY">tab bar</a>,
there are two dedicated buttons.
<ul>
<li data-list-item-id="e2795bd6c8d21dc50b48fa876625897e5">These buttons will appear only if the launch bar is not already displaying
the history navigation buttons to avoid duplication.</li>
</ul>
</li>
<li data-list-item-id="e137e7622eb1a6991c291b27a4252e882">Alternatively, use the <kbd>Alt</kbd> + <kbd>Left</kbd> and <kbd>Alt</kbd> + <kbd>Right</kbd> keyboard
shortcuts.</li>
</ul>
<h2>Jump to note</h2>
<p>This is useful to quickly find and view arbitrary notes - click on <code>Jump to</code> button
on the top or press <kbd>Ctrl</kbd> + <kbd>J</kbd> . Then type part of the
note name and autocomplete will help you pick the desired note.</p>
<p>See&nbsp;<a class="reference-link" href="#root/_help_F1r9QtzQLZqm">Jump to Note</a>&nbsp;for
<p>This is useful to quickly find and view arbitrary notes - click on
<code
spellcheck="false">Jump to</code>button on the top or press <kbd>Ctrl</kbd> + <kbd>J</kbd> .
Then type part of the note name and autocomplete will help you pick the
desired note.</p>
<p>See&nbsp;<a class="reference-link" href="#root/_help_F1r9QtzQLZqm">Jump to...</a>&nbsp;for
more information.</p>

BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Navigation/Note Navigation_image.png generated vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

37
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Tabs.html generated vendored
View File

@ -6,37 +6,48 @@
<h2>Layout</h2>
<p>Depending on the&nbsp;<a class="reference-link" href="#root/_help_x0JgW8UqGXvq">Vertical and horizontal layout</a>:</p>
<ul>
<li>For the vertical layout, the tabs will be placed at the top but to the
<li data-list-item-id="eb53ae640459fe004105fbe88a2dc2f71">For the vertical layout, the tabs will be placed at the top but to the
right of the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
<li>For the horizontal layout, the tabs will be placed at the top in full-width,
<li
data-list-item-id="e71e0ea898e54668b8724b3ef4c6606db">For the horizontal layout, the tabs will be placed at the top in full-width,
above the&nbsp;<a href="#root/_help_oPVyFC7WL2Lp">note tree</a>, allowing for
more tabs to be comfortably displayed.</li>
</ul>
<h2>Interaction</h2>
<ul>
<li>To create a new tab, press the
<li data-list-item-id="e5064315db9e5c2a747e38b348354dcb0">To create a new tab, press the
<img src="1_Tabs_image.png">button that is to the right of the last tab.</li>
<li>To close a tab, press the corresponding
<li data-list-item-id="e21a69d6f7c0b19b93ac028bc30554c4b">To close a tab, press the corresponding
<img src="Tabs_image.png">button.</li>
<li>For multitasking, tabs can be used alongside&nbsp;<a class="reference-link"
<li data-list-item-id="e07c814606ce904097f90d5826886dda1">For multitasking, tabs can be used alongside&nbsp;<a class="reference-link"
href="#root/_help_luNhaphA37EO">Split View</a>. Each tab can have one or more
notes, displayed horizontally.</li>
<li>Tabs can be reordered by drag-and-dropping it into a new position.</li>
<li>An existing tab can be displayed in a new window by dragging the tab upwards
<li data-list-item-id="e377d414be9c14e15afa45f67d08d8dce">Tabs can be reordered by drag-and-dropping it into a new position.</li>
<li
data-list-item-id="ece5d52af415a794842c52bf12f707211">An existing tab can be displayed in a new window by dragging the tab upwards
or downwards. It is not possible to combine tabs back into another window.</li>
<li
data-list-item-id="e627e06c348bfca37dd73a192e8e3cb11">On the left side of the tab bar there are two buttons to navigate through
the note history backwards or forwards (see&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_MMiBEQljMQh2">Note Navigation</a>).
<ul>
<li data-list-item-id="ee640da05f2902ec23dd2c0f524220715">This feature is only enabled if the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>&nbsp;doesn't
already contain the history navigation buttons.</li>
</ul>
</li>
</ul>
<h2>Keyboard interaction</h2>
<p>Since tabs are a commonly used feature, there are multiple keyboard shortcuts
that can be used:</p>
<ul>
<li><kbd>Ctrl</kbd>+<kbd>T</kbd> to open a new tab.</li>
<li><kbd>Ctrl</kbd>+<kbd>W</kbd> to close the current tab.</li>
<li><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> to reopen the last closed
<li data-list-item-id="e100364dfa1a0ff23bc67adbea5d21d61"><kbd>Ctrl</kbd>+<kbd>T</kbd> to open a new tab.</li>
<li data-list-item-id="ee05bb412b3798be099602e48dbb59fe6"><kbd>Ctrl</kbd>+<kbd>W</kbd> to close the current tab.</li>
<li data-list-item-id="e2499b2a852e55c1df69e00ab9ec7de49"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> to reopen the last closed
tab.</li>
<li><kbd>Ctrl</kbd>+<kbd>Tab</kbd> and <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Tab</kbd> to
<li data-list-item-id="ee88e742e733c8200b806d4483f2d1f23"><kbd>Ctrl</kbd>+<kbd>Tab</kbd> and <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Tab</kbd> to
go to the next or previous tab.</li>
<li><kbd>Ctrl</kbd>+<kbd>1</kbd>, <kbd>Ctrl</kbd>+<kbd>2</kbd>, up to <kbd>Ctrl</kbd>+<kbd>9</kbd> to
<li data-list-item-id="e0a09f289fec50c6ffce263a052a160bf"><kbd>Ctrl</kbd>+<kbd>1</kbd>, <kbd>Ctrl</kbd>+<kbd>2</kbd>, up to <kbd>Ctrl</kbd>+<kbd>9</kbd> to
activate the first, second and up til ninth tab.</li>
<li>There is also a shortcut to go to the last tab, but it is not assigned
<li data-list-item-id="e624f43a8b17cb26fea9b056974b1eb95">There is also a shortcut to go to the last tab, but it is not assigned
a key by default.</li>
</ul>

43
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html generated vendored
View File

@ -7,13 +7,10 @@
via an attribute.</p>
<h2>Creating a render note</h2>
<ol>
<li data-list-item-id="e6c172eb567596820dd7f444924e568b3">Create a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
with the HTML language, with what needs to be displayed (for example
<code
spellcheck="false">&lt;p&gt;Hello world.&lt;/p&gt;</code>).</li>
<li data-list-item-id="e06560e53dd0ab195c0e89dc8db7aec1f">Create a&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
<li
data-list-item-id="e9db87d13293c732ac62d6f92d2997cb3">Assign the <code spellcheck="false">renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
<li>Create a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
with the HTML language, with what needs to be displayed (for example <code>&lt;p&gt;Hello world.&lt;/p&gt;</code>).</li>
<li>Create a&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
<li>Assign the <code>renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
point at the previously created code note.</li>
</ol>
<h2>Legacy scripting using jQuery</h2>
@ -29,7 +26,7 @@ The current date &amp; time is &lt;span class="date"&gt;&lt;/span&gt;</code></pr
language. Make sure the newly created note is a direct child of the HTML
note created previously; with the following content:</p><pre><code class="language-text-x-trilium-auto">const $dateEl = api.$container.find(".date");
$dateEl.text(new Date());</code></pre>
<p>Now create a render note at any place and set its <code spellcheck="false">~renderNote</code> relation
<p>Now create a render note at any place and set its <code>~renderNote</code> relation
to point to the HTML note. When the render note is accessed it will display:</p>
<blockquote>
<p><strong>Current date &amp; time</strong>
@ -42,33 +39,37 @@ $dateEl.text(new Date());</code></pre>
need to provide a HTML anymore.</p>
<p>Here are the steps to creating a simple render note:</p>
<ol>
<li data-list-item-id="ee6c6868efde1b910dac6807580e2a8e2">Create a note of type&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>.</li>
<li
data-list-item-id="eae9b5f496cba824738734828c11448d5">
<p>Create a child&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>&nbsp;note
<li>
<p>Create a note of type&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</p>
</li>
<li>
<p>Create a child&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
with JSX as the language.
<br>As an example, use the following content:</p><pre><code class="language-text-jsx">export default function() {
<br>As an example, use the following content:</p><pre><code class="language-text-x-trilium-auto">export default function() {
return (
&lt;&gt;
&lt;p&gt;Hello world.&lt;/p&gt;
&lt;/&gt;
);
}</code></pre>
</li>
<li data-list-item-id="e28812b27d5227675943ef98ab9477e67">In the parent render note, define a <code spellcheck="false">~renderNote</code> relation
pointing to the newly created child.</li>
<li data-list-item-id="e24cc71d55c7c8ec61014ac0d800653da">Refresh the render note and it should display a “Hello world” message.</li>
</li>
<li>
<p>In the parent render note, define a <code>~renderNote</code> relation pointing
to the newly created child.</p>
</li>
<li>
<p>Refresh the render note and it should display a “Hello world” message.</p>
</li>
</ol>
<h2>Refreshing the note</h2>
<p>It's possible to refresh the note via:</p>
<ul>
<li data-list-item-id="e01c4ae9c0999b2879e914c5b641215e3">The corresponding button in&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
<li
data-list-item-id="e871da2cff905b2daa180fcae27aee43b">The “Render active note” <a href="#root/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
<li>The corresponding button in&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
<li>The “Render active note” <a href="#root/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
assigned by default).</li>
</ul>
<h2>Examples</h2>
<ul>
<li data-list-item-id="ec01930f20370b46f519bd844b67623ee"><a class="reference-link" href="#root/_help_R7abl2fc6Mxi">Weight Tracker</a>&nbsp;which
<li><a class="reference-link" href="#root/_help_R7abl2fc6Mxi">Weight Tracker</a>&nbsp;which
is present in the&nbsp;<a class="reference-link" href="#root/_help_6tZeKvSHEUiB">Demo Notes</a>.</li>
</ul>

26
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Common concepts/Script bundles.html generated vendored
View File

@ -1,22 +1,22 @@
<p>For both&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>&nbsp;and
<p>For both&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>&nbsp;and
more complicated scripts, it's generally useful to split the code into
multiple&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>&nbsp;notes.</p>
multiple&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;notes.</p>
<p>When a script is run, the sub-children of the script being run (or the&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>) are checked for children. If the children are Code notes
class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>) are checked for children. If the children are Code notes
of the corresponding type (front-end or backend) as the code being run,
they will be evaluated as well.</p>
<p>The collection of a script and its child notes is called a <em>bundle</em>.
A child note inside a bundle is called a <em>module</em>.</p>
<p>As a basic example of dependencies, consider the following note structure:</p>
<ul>
<li class="ck-list-marker-italic" data-list-item-id="e4c343ba6ed99b3a943049b6f0af99dd6">
<li>
<p><em>Script with dependency</em>
</p><pre><code class="language-application-javascript-env-frontend">api.log(MyMath.sum(2, 2));</code></pre>
</p><pre><code class="language-application-javascript-env-backend">api.log(MyMath.sum(2, 2));</code></pre>
<ul>
<li class="ck-list-marker-italic" data-list-item-id="ea27318ca64cb71cfa5eceb15f9acba75">
<li>
<p><em>MyMath</em>
</p><pre><code class="language-application-javascript-env-frontend">module.exports = {
</p><pre><code class="language-application-javascript-env-backend">module.exports = {
sum(a, b) {
return a + b;
}
@ -26,21 +26,21 @@
</li>
</ul>
<p>When <em>Script with dependency</em> is run, it will detect <em>MyMath</em> as
a submodule and provide the result of its <code spellcheck="false">module.exports</code> object
a submodule and provide the result of its <code>module.exports</code> object
into a global object with the same name as the note.</p>
<aside class="admonition note">
<p>If the note contains spaces or special characters, they will be stripped.
For example <code spellcheck="false">My Nice Note!</code> becomes <code spellcheck="false">MyNiceNote</code>.</p>
For example <code>My Nice Note!</code> becomes <code>MyNiceNote</code>.</p>
</aside>
<h2>Alternative syntax</h2>
<p>Instead of providing an object to <code spellcheck="false">module.exports</code>,
it's also possible to add fields individually:</p><pre><code class="language-application-javascript-env-frontend">module.exports.sum = (a, b) =&gt; a + b;
<p>Instead of providing an object to <code>module.exports</code>, it's also
possible to add fields individually:</p><pre><code class="language-application-javascript-env-backend">module.exports.sum = (a, b) =&gt; a + b;
module.exports.subtract = (a, b) =&gt; a - b;</code></pre>
<h2>Ignoring a code script from a bundle</h2>
<p>To ignore a script from being included in a bundle (e.g. if it's unrelated
to the parent script note), apply the <code spellcheck="false">#disableInclusion</code> label.</p>
to the parent script note), apply the <code>#disableInclusion</code> label.</p>
<h2>Sharing a module across multiple bundles</h2>
<p>Modules can be reused across multiple scripts by simply cloning the shared
module between two modules (see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_IakOLONlIfGI">Cloning Notes</a>).</p>
module between two modules (see&nbsp;<a class="reference-link" href="#root/_help_IakOLONlIfGI">Cloning Notes</a>).</p>
<p>Optionally, a separate note can be used to contain all the different reusable
modules for an easy way to discover them.</p>

250
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html generated vendored
View File

@ -4,164 +4,150 @@
<h2>Preact with JSX vs. vanilla jQuery</h2>
<p>In older versions of Trilium, custom widgets were exclusively written
in a combination of jQuery with Trilium's internal widget architecture
(e.g., <code spellcheck="false">BasicWidget</code>, <code spellcheck="false">NoteContextAwareWidget</code>).</p>
(e.g., <code>BasicWidget</code>, <code>NoteContextAwareWidget</code>).</p>
<p>Starting with v0.101.0, custom widgets can also be written in JSX using
the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_KLsqhjaqh1QW">Preact</a>&nbsp;framework.
the&nbsp;<a class="reference-link" href="#root/_help_KLsqhjaqh1QW">Preact</a>&nbsp;framework.
Both legacy and Preact widgets have the same capabilities, with a single
difference:</p>
<ul>
<li data-list-item-id="e2a6a28bcf69987db6b33b4902b913282">Preact widgets are content-sized by default whereas legacy widgets need
<code
spellcheck="false">this.contentSized()</code>applied in the constructor. For more information,
see the corresponding section in&nbsp;<a class="reference-link" href="#root/MgibgPcfeuGz/_help_gMkgcLJ6jBkg">Troubleshooting</a>.</li>
<li>Preact widgets are content-sized by default whereas legacy widgets need <code>this.contentSized()</code> applied
in the constructor. For more information, see the corresponding section
in&nbsp;<a class="reference-link" href="#root/_help_gMkgcLJ6jBkg">Troubleshooting</a>.</li>
</ul>
<p>Wherever possible, widget examples will be both in the legacy and Preact
format.</p>
<h2>Creating a custom widget</h2>
<ol>
<li data-list-item-id="efdec30e3ba380f9691c2955248e662aa">Create a&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>&nbsp;note.</li>
<li
data-list-item-id="e6ac401b11f885fbf6ee2eb486e2fb4db">Set the language to:
<li>Create a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note.</li>
<li>Set the language to:
<ol>
<li data-list-item-id="ea981b36d647bb2020c63b6eb8888ffcb">JavaScript (frontend) for legacy widgets using jQuery.</li>
<li data-list-item-id="e27097e820e8b18d5539035afc4f91cf6">JSX for Preact widgets. You might need to go to Options → Code to enable
<li>JavaScript (frontend) for legacy widgets using jQuery.</li>
<li>JSX for Preact widgets. You might need to go to Options → Code to enable
the language first.</li>
</ol>
</li>
<li data-list-item-id="e94ba32049422e310a2322f85bb37ab85">Apply the <code spellcheck="false">#widget</code> <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_HI6GBBIduIgv">label</a>.</li>
</li>
<li>Apply the <code>#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a>.</li>
</ol>
<h2>Getting started with a simple example</h2>
<p>Let's start by creating a widget that shows a message near the content
area. Follow the previous section to create a code note, and use the following
content.</p>
<figure class="table">
<table>
<thead>
<tr>
<th>Legacy</th>
<th style="width:50%;">Preact (v0.101.0+)</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">class HelloNoteDetail extends api.BasicWidget {
<table>
<thead>
<tr>
<th>Legacy</th>
<th>Preact (v0.101.0+)</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">class HelloNoteDetail extends api.BasicWidget {
constructor() {
super();
this.contentSized();
}
get parentWidget() { return "center-pane" }
doRender() {
this.$widget = $("&lt;span&gt;Center pane&lt;/span&gt;");
}
<pre><code class="language-text-x-trilium-auto">constructor() {
super();
this.contentSized();
}
module.exports = new HelloNoteDetail();</code></pre>
</td>
<td style="vertical-align:top;"><pre><code class="language-text-x-trilium-auto">import { defineWidget } from "trilium:preact";
get parentWidget() { return "center-pane" }
export default defineWidget({
doRender() {
this.&lt;!--FORMULA_INLINE_1766517018225_0--&gt;("&amp;lt;span&amp;gt;Center pane&amp;lt;/span&amp;gt;");
}</code></pre>
<p>}</p>
<p>module.exports = new HelloNoteDetail();</p>
</code>
</pre>
</td>
<td><pre><code class="language-text-x-trilium-auto">import { defineWidget } from "trilium:preact";<p></p><p>export default defineWidget({
parent: "center-pane",
render: () =&gt; &lt;span&gt;Center pane from Preact.&lt;/span&gt;
});</code></pre>
</td>
</tr>
</tbody>
</table>
</figure>
<p><a href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/_help_s8alTXmpFR61">Refresh the application</a> and
the widget should appear underneath the content area.</p>
});</p></code></pre>
</td>
</tr>
</tbody>
</table>
<p></p>
<p><a href="#root/_help_s8alTXmpFR61">Refresh the application</a> and the widget
should appear underneath the content area.</p>
<h2>Widget location (parent widget)</h2>
<p>A widget can be placed in one of the following sections of the applications:</p>
<figure
class="table" style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:15.59%;">
<col style="width:30.42%;">
<col style="width:16.68%;">
<col style="width:37.31%;">
</colgroup>
<thead>
<tr>
<th>Value for <code spellcheck="false">parentWidget</code>
</th>
<th>Description</th>
<th>Sample widget</th>
<th>Special requirements</th>
</tr>
</thead>
<tbody>
<tr>
<th><code spellcheck="false">left-pane</code>
</th>
<td>Appears within the same pane that holds the&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a>.</td>
<td>Same as above, with only a different <code spellcheck="false">parentWidget</code>.</td>
<td>None.</td>
</tr>
<tr>
<th><code spellcheck="false">center-pane</code>
</th>
<td>In the content area. If a split is open, the widget will span all of the
splits.</td>
<td>See example above.</td>
<td>None.</td>
</tr>
<tr>
<th><code spellcheck="false">note-detail-pane</code>
</th>
<td>
<p>In the content area, inside the note detail area. If a split is open,
the widget will be contained inside the split.</p>
<p>This is ideal if the widget is note-specific.</p>
</td>
<td><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_GhurYZjh8e1V">Note context aware widget</a>
</td>
<td>
<ul>
<li data-list-item-id="ec06332efcc3039721606c052f0d913fa">The widget must export a <code spellcheck="false">class</code> and not an
instance of the class (e.g. <code spellcheck="false">no new</code>) because
it needs to be multiplied for each note, so that splits work correctly.</li>
<li
data-list-item-id="e8da690a2a8df148f6b5fc04ba1611688">Since the <code spellcheck="false">class</code> is exported instead of an
instance, the <code spellcheck="false">parentWidget</code> getter must be
<code
spellcheck="false">static</code>, otherwise the widget is ignored.</li>
</ul>
</td>
</tr>
<tr>
<th><code spellcheck="false">right-pane</code>
</th>
<td>In the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_RnaPdbciOfeq">Right Sidebar</a>,
as a dedicated section.</td>
<td><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_M8IppdwVHSjG">Right pane widget</a>
</td>
<td>
<ul>
<li data-list-item-id="efe008d361e224f422582552648e1afe7">Although not mandatory, it's best to use a <code spellcheck="false">RightPanelWidget</code> instead
of a <code spellcheck="false">BasicWidget</code> or a <code spellcheck="false">NoteContextAwareWidget</code>.</li>
</ul>
</td>
</tr>
</tbody>
<table
class="ck-table-resized">
<colgroup>
<col style="width:15.59%;">
<col style="width:30.42%;">
<col style="width:16.68%;">
<col style="width:37.31%;">
</colgroup>
<thead>
<tr>
<th>Value for <code>parentWidget</code>
</th>
<th>Description</th>
<th>Sample widget</th>
<th>Special requirements</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>left-pane</code>
</th>
<td>Appears within the same pane that holds the&nbsp;<a class="reference-link"
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</td>
<td>Same as above, with only a different <code>parentWidget</code>.</td>
<td>None.</td>
</tr>
<tr>
<th><code>center-pane</code>
</th>
<td>In the content area. If a split is open, the widget will span all of the
splits.</td>
<td>See example above.</td>
<td>None.</td>
</tr>
<tr>
<th><code>note-detail-pane</code>
</th>
<td>
<p>In the content area, inside the note detail area. If a split is open,
the widget will be contained inside the split.</p>
<p>This is ideal if the widget is note-specific.</p>
</td>
<td><a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>
</td>
<td>
<ul>
<li data-list-item-id="ec06332efcc3039721606c052f0d913fa">The widget must export a <code>class</code> and not an instance of the class
(e.g. <code>no new</code>) because it needs to be multiplied for each note,
so that splits work correctly.</li>
<li data-list-item-id="e8da690a2a8df148f6b5fc04ba1611688">Since the <code>class</code> is exported instead of an instance, the <code>parentWidget</code> getter
must be <code>static</code>, otherwise the widget is ignored.</li>
</ul>
</td>
</tr>
<tr>
<th><code>right-pane</code>
</th>
<td>In the&nbsp;<a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>,
as a dedicated section.</td>
<td><a class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>
</td>
<td>
<ul>
<li data-list-item-id="efe008d361e224f422582552648e1afe7">Although not mandatory, it's best to use a <code>RightPanelWidget</code> instead
of a <code>BasicWidget</code> or a <code>NoteContextAwareWidget</code>.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</figure>
<p>To position the widget somewhere else, just change the value passed to
<code
spellcheck="false">get parentWidget()</code>for legacy widgets or the <code spellcheck="false">parent</code> field
for Preact. Do note that some positions such as <code spellcheck="false">note-detail-pane</code> and
<code
spellcheck="false">right-pane</code>have special requirements that need to be accounted for
(see the table above).</p>
<p>To position the widget somewhere else, just change the value passed to <code>get parentWidget()</code> for
legacy widgets or the <code>parent</code> field for Preact. Do note that
some positions such as <code>note-detail-pane</code> and <code>right-pane</code> have
special requirements that need to be accounted for (see the table above).</p>
<h2>Launch bar widgets</h2>
<p>Launch bar widgets are similar to <em>Custom widgets</em> but are specific
to the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_xYmIYSP6wE3F">Launch Bar</a>.
See&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_4Gn3psZKsfSm">Launch Bar Widgets</a>&nbsp;for
to the&nbsp;<a class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>.
See&nbsp;<a class="reference-link" href="#root/_help_4Gn3psZKsfSm">Launch Bar Widgets</a>&nbsp;for
more information.</p>
<h2>Custom position</h2>
<p>&nbsp;</p>
<h2>Custom position</h2>

22
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/CSS.html generated vendored
View File

@ -1,7 +1,5 @@
<h2>Classic widgets</h2>
<p>In <code spellcheck="false">doRender()</code>:<span class="footnote-reference"
data-footnote-reference="" data-footnote-index="1" data-footnote-id="1saoftmefpp"
role="doc-noteref" id="fnref1saoftmefpp"><sup><a href="#fn1saoftmefpp">[1]</a></sup></span>
<p>In <code>doRender()</code>:<sup><a href="#fn1saoftmefpp">[1]</a></sup>
</p><pre><code class="language-text-x-trilium-auto">this.cssBlock(`#my-widget {
position: absolute;
bottom: 40px;
@ -9,14 +7,12 @@
z-index: 1;
}`);</code></pre>
<h2>Preact widgets</h2>
<p>See the dedicated page:&nbsp;<a class="reference-link" href="#root/KLsqhjaqh1QW/_help_Sg9GrCtyftZf">CSS</a>.</p>
<ol
class="footnote-section footnotes" data-footnote-section="" role="doc-endnotes">
<li class="footnote-item" data-footnote-item="" data-footnote-index="1"
data-footnote-id="1saoftmefpp" role="doc-endnote" id="fn1saoftmefpp"><span class="footnote-back-link" data-footnote-back-link="" data-footnote-id="1saoftmefpp"><sup><strong><a href="#fnref1saoftmefpp">^</a></strong></sup></span>
<div
class="footnote-content" data-footnote-content="">
<p>Reference: <a href="https://trilium.rocks/X7pxYpiu0lgU">https://trilium.rocks/X7pxYpiu0lgU</a>&nbsp;</p>
</div>
<p>See the dedicated page:&nbsp;<a class="reference-link" href="#root/_help_Sg9GrCtyftZf">CSS</a>.</p>
<ol>
<li>
<p><sup><strong><a href="#fnref1saoftmefpp">^</a></strong></sup>
</p>
<p>Reference: <a href="https://trilium.rocks/X7pxYpiu0lgU">https://trilium.rocks/X7pxYpiu0lgU</a>
</p>
</li>
</ol>
</ol>

13
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Note context aware widget.html generated vendored
View File

@ -2,14 +2,11 @@
react to changes in the current note.</p>
<p>Important aspects:</p>
<ul>
<li data-list-item-id="ebe74655683475b6a16e53832e6b2c47a">The widget must export a <code spellcheck="false">class</code> and not an
instance of the class (e.g. <code spellcheck="false">no new</code>) because
it needs to be multiplied for each note, so that splits work correctly.</li>
<li
data-list-item-id="edf648bc7ea3325255223d28f0543e5b9">Since the <code spellcheck="false">class</code> is exported instead of an
instance, the <code spellcheck="false">parentWidget</code> getter must be
<code
spellcheck="false">static</code>, otherwise the widget is ignored.</li>
<li>The widget must export a <code>class</code> and not an instance of the class
(e.g. <code>no new</code>) because it needs to be multiplied for each note,
so that splits work correctly.</li>
<li>Since the <code>class</code> is exported instead of an instance, the <code>parentWidget</code> getter
must be <code>static</code>, otherwise the widget is ignored.</li>
</ul>
<h2>Example displaying the current note title</h2>
<p>This is a note context-aware widget that simply displays the name the

24
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.html generated vendored
View File

@ -1,16 +1,14 @@
<h2>Key highlights</h2>
<ul>
<li data-list-item-id="e05167a939f3b6c8083cf62d4f8108b4b"><code spellcheck="false">doRender</code> must not be overridden, instead
<code
spellcheck="false">doRenderBody()</code>has to be overridden.
<ul>
<li data-list-item-id="eee44709b64b220f4af124ff1458a61e8"><code spellcheck="false">doRenderBody</code> can optionally be <code spellcheck="false">async</code>.</li>
</ul>
<li><code>doRender</code> must not be overridden, instead <code>doRenderBody()</code> has
to be overridden.
<ul>
<li><code>doRenderBody</code> can optionally be <code>async</code>.</li>
</ul>
</li>
<li data-list-item-id="e94b7be0f1d366c502703ff3a5fc3bfb1"><code spellcheck="false">parentWidget()</code> must be set to <code spellcheck="false">“rightPane”</code>.</li>
<li
data-list-item-id="ea56b04dbcf63573acbde90d990137829"><code spellcheck="false">widgetTitle()</code> getter can optionally be
overriden, otherwise the widget will be displayed as “Untitled widget”.</li>
<li><code>parentWidget()</code> must be set to <code>“rightPane”</code>.</li>
<li><code>widgetTitle()</code> getter can optionally be overriden, otherwise
the widget will be displayed as “Untitled widget”.</li>
</ul>
<h2>Example for new layout</h2>
<aside class="admonition important">
@ -103,14 +101,14 @@ class HelloWorldWidget extends api.RightPanelWidget {
module.exports = new HelloWorldWidget();</code></pre>
<h3>Conditionally changing visibility</h3>
<p>In <code spellcheck="false">refreshWithNote</code>:</p><pre><code class="language-text-x-trilium-auto">const visible = true; // replace with your own visibility logic
<p>In <code>refreshWithNote</code>:</p><pre><code class="language-text-x-trilium-auto">const visible = true; // replace with your own visibility logic
this.toggleInt(visible);
this.triggerCommand("reEvaluateRightPaneVisibility");</code></pre>
<h2>Altering the position within the sidebar</h2>
<p>By default, the sidebar items are displayed in the order they are found
by the application when searching for <code spellcheck="false">#widget</code> notes.</p>
by the application when searching for <code>#widget</code> notes.</p>
<p>It is possible to make a widget appear higher or lower up, by adjusting
its <code spellcheck="false">position</code> property:</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.RightPanelWidget {
its <code>position</code> property:</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.RightPanelWidget {
+ get position() { return 20 };

26
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Widget Basics.html generated vendored
View File

@ -16,17 +16,17 @@
module.exports = new MyWidget();</code></pre>
<p>To implement this widget:</p>
<ol>
<li data-list-item-id="e9927fa1c4b393854487094afd914ece9">Create a new <code spellcheck="false">JS Frontend</code> note in Trilium
and paste in the code above.</li>
<li data-list-item-id="e3741fe167b7dccae0081cc0d1a326a5d">Assign the <code spellcheck="false">#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a> to
<li>Create a new <code>JS Frontend</code> note in Trilium and paste in the code
above.</li>
<li>Assign the <code>#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a> to
the <a href="#root/_help_BFs8mudNFgCS">note</a>.</li>
<li data-list-item-id="e300febf71f84c3be97fc8556182ea124">Restart Trilium or reload the window.</li>
<li>Restart Trilium or reload the window.</li>
</ol>
<p>To verify that the widget is working, open the developer tools (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>)
and run <code spellcheck="false">document.querySelector("#my-widget")</code>.
If the element is found, the widget is functioning correctly. If <code spellcheck="false">undefined</code> is
and run <code>document.querySelector("#my-widget")</code>. If the element
is found, the widget is functioning correctly. If <code>undefined</code> is
returned, double-check that the <a href="#root/_help_BFs8mudNFgCS">note</a> has
the <code spellcheck="false">#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a>.</p>
the <code>#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a>.</p>
<h3>Step 2: Adding an UI Element</h3>
<p>Next, let's improve the widget by adding a button to it.</p><pre><code class="language-text-x-trilium-auto">const template = `&lt;div id="my-widget"&gt;&lt;button&gt;Click Me!&lt;/button&gt;&lt;/div&gt;`;
@ -46,9 +46,7 @@ module.exports = new MyWidget();</code></pre>
<h3>Step 3: Styling the Widget</h3>
<p>To make the button more visually appealing and position it correctly,
we'll apply some custom styling. Trilium includes <a href="https://boxicons.com">Box Icons</a>,
which we'll use to replace the button text with an icon. For example the
<code
spellcheck="false">bx bxs-magic-wand</code>icon.</p>
which we'll use to replace the button text with an icon. For example the <code>bx bxs-magic-wand</code> icon.</p>
<p>Here's the updated template:</p><pre><code class="language-text-x-trilium-auto">const template = `&lt;div id="my-widget"&gt;&lt;button class="tree-floating-button bx bxs-magic-wand tree-settings-button"&gt;&lt;/button&gt;&lt;/div&gt;`;</code></pre>
<p>Next, we'll adjust the button's position using CSS:</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
get position() { return 1; }
@ -71,8 +69,7 @@ module.exports = new MyWidget();</code></pre>
of the left pane, alongside other action buttons.</p>
<h3>Step 4: Adding User Interaction</h3>
<p>Let’s make the button interactive by showing a message when it’s clicked.
We'll use the <code spellcheck="false">api.showMessage</code> method from
the <a href="#root/_help_GLks18SNjxmC">Script API</a>.</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
We'll use the <code>api.showMessage</code> method from the <a href="#root/_help_GLks18SNjxmC">Script API</a>.</p><pre><code class="language-text-x-trilium-auto">class MyWidget extends api.BasicWidget {
get position() { return 1; }
get parentWidget() { return "left-pane"; }
@ -90,8 +87,9 @@ module.exports = new MyWidget();</code></pre>
}
module.exports = new MyWidget();</code></pre>
<p>For the list of possible values for <code spellcheck="false">parentWidget()</code>,
see&nbsp;<a class="reference-link" href="#root/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>.&nbsp;</p>
<p>For the list of possible values for <code>parentWidget()</code>, see&nbsp;
<a
class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>.&nbsp;</p>
<p><a href="#root/_help_s8alTXmpFR61">Reload</a> the application one last time.
When you click the button, a "Hello World!" message should appear, confirming
that your widget is fully functional.</p>

2
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html generated vendored
View File

@ -30,7 +30,7 @@ class NoteTitleWidget extends api.NoteContextAwareWidget {
}
module.exports = new NoteTitleWidget();</code></pre>
<h2>Preact widget (v0.101.0+)</h2><pre><code class="language-text-jsx">import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
<h2>Preact widget (v0.101.0+)</h2><pre><code class="language-text-x-trilium-auto">import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
export default defineLauncherWidget({
render: () =&gt; {

44
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html generated vendored
View File

@ -2,16 +2,16 @@
support for JSX.</p>
<p>Preact can be used for:</p>
<ul>
<li data-list-item-id="ecaa7ce1d629d04e22a9c9e5de7bbba9d"><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>,
where a JSX code note is used instead of a HTML one.</li>
<li data-list-item-id="ebec1c35ba18bb42ce91497eae106fad6"><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>,
<li><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>, where
a JSX code note is used instead of a HTML one.</li>
<li><a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>,
where JSX can be used to replace the old, jQuery-based mechanism.</li>
</ul>
<p>To get started, the first step is to enable JSX in the list of Code languages.
Go to Options → Code Notes and check the “JSX” language. Afterwards, proceed
with the documentation in either&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>&nbsp;or&nbsp;
with the documentation in either&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>&nbsp;or&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>, which will both have a section on how to use the new
class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>, which will both have a section on how to use the new
Preact integration.</p>
<aside class="admonition important">
<p>The documentation assumes prior knowledge with React or Preact. As a starting
@ -20,23 +20,22 @@
</aside>
<h2>Import/exports</h2>
<p>When using Preact with JSX, there is a special syntax which provides ES-like
imports. This <code spellcheck="false">import</code> syntax makes way for
a more intuitive that doesn't make use of global objects and paves the
way for better auto-completion support that might be introduced in the
future.&nbsp;</p>
imports. This <code>import</code> syntax makes way for a more intuitive that
doesn't make use of global objects and paves the way for better auto-completion
support that might be introduced in the future.&nbsp;</p>
<h3>API imports</h3>
<p>Instead of:</p><pre><code class="language-text-jsx">api.showMessage("Hello");</code></pre>
<p>the JSX version looks like this:</p><pre><code class="language-text-jsx">import { showMessage } from "trilium:api";
<p>Instead of:</p><pre><code class="language-text-x-trilium-auto">api.showMessage("Hello");</code></pre>
<p>the JSX version looks like this:</p><pre><code class="language-text-x-trilium-auto">import { showMessage } from "trilium:api";
showMessage("hello");</code></pre>
<h3>Preact API imports (hooks, components)</h3>
<p>There's a new&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_GLks18SNjxmC">Script API</a>&nbsp;dedicated
<p>There's a new&nbsp;<a class="reference-link" href="#root/_help_GLks18SNjxmC">Script API</a>&nbsp;dedicated
to Preact, which provides shared components that are also used by Trilium
internally as well as hooks, for example.</p><pre><code class="language-text-jsx">import { useState } from "trilium:preact";
internally as well as hooks, for example.</p><pre><code class="language-text-x-trilium-auto">import { useState } from "trilium:preact";
const [ myState, setMyState ] = useState("Hi");</code></pre>
<h3>Exporting</h3>
<p>JSX notes can export a component for use in&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>&nbsp;or
for&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/KLsqhjaqh1QW/_help_Bqde6BvPo05g">Component libraries</a>: </p><pre><code class="language-text-jsx">export default function() {
href="#root/_help_HcABDtFCkbFN">Render Note</a>&nbsp;or for&nbsp;<a class="reference-link"
href="#root/_help_Bqde6BvPo05g">Component libraries</a>: </p><pre><code class="language-text-x-trilium-auto">export default function() {
return (
&lt;&gt;
&lt;p&gt;Hello world.&lt;/p&gt;
@ -44,15 +43,13 @@ const [ myState, setMyState ] = useState("Hi");</code></pre>
);
}</code></pre>
<h3>Import/export are not required</h3>
<p>These imports are syntactic sugar meant to replace the usage for the
<code
spellcheck="false">api</code>global object (see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_GLks18SNjxmC">Script API</a>).&nbsp;</p>
<p>These imports are syntactic sugar meant to replace the usage for the <code>api</code> global
object (see&nbsp;<a class="reference-link" href="#root/_help_GLks18SNjxmC">Script API</a>).&nbsp;</p>
<aside
class="admonition note">
<p>The <code spellcheck="false">import</code> and <code spellcheck="false">export</code> syntax
work only for JSX notes. Standard/jQuery code notes still need to use the
<code
spellcheck="false">api</code>global and <code spellcheck="false">module.exports</code>.</p>
<p>The <code>import</code> and <code>export</code> syntax work only for JSX notes.
Standard/jQuery code notes still need to use the <code>api</code> global
and <code>module.exports</code>.</p>
</aside>
<h2>Under the hood</h2>
<p>Unlike JavaScript, JSX requires pre-processing to turn it into JavaScript
@ -60,5 +57,4 @@ class="admonition note">
a JavaScript library which processes the JSX to pure JavaScript. The processing
is done each time a script is run (for widgets this happens at every program
startup). If you notice any performance degradation due to long compilation,
consider <a href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/_help_wy8So3yZZlH9">reporting the issue</a> to
us.</p>
consider <a href="#root/_help_wy8So3yZZlH9">reporting the issue</a> to us.</p>

24
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html generated vendored
View File

@ -4,11 +4,11 @@
<figcaption>A partial screenshot from the Widget showcase example (see below).</figcaption>
</figure>
<p>Trilium comes with its own set of Preact components, some of which are
also available to&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>&nbsp;and&nbsp;
also available to&nbsp;<a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>&nbsp;and&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>.</p>
<p>To use these components, simply import them from <code spellcheck="false">trilium:preact</code>:</p><pre><code class="language-text-jsx">import { ActionButton, Button, LinkButton } from "trilium:preact";</code></pre>
<p>and then use them:</p><pre><code class="language-text-jsx">export default function MyRenderNote() {
class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</p>
<p>To use these components, simply import them from <code>trilium:preact</code>:</p><pre><code class="language-text-x-trilium-auto">import { ActionButton, Button, LinkButton } from "trilium:preact";</code></pre>
<p>and then use them:</p><pre><code class="language-text-x-trilium-auto">export default function MyRenderNote() {
const onClick = () =&gt; showMessage("A button was pressed");
return (
@ -26,19 +26,19 @@
<aside class="admonition tip">
<p>Starting with v0.101.0, the widget showcase is also available in the&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/wX4HbRucYSDD/_help_6tZeKvSHEUiB">Demo Notes</a>.</p>
class="reference-link" href="#root/_help_6tZeKvSHEUiB">Demo Notes</a>.</p>
</aside>
<p>This is a&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>&nbsp;example
<p>This is a&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>&nbsp;example
with JSX that shows most of the built-in components that are accessible
to custom widgets and JSX render notes.</p>
<p>To use it, simply:</p>
<ol>
<li data-list-item-id="ef2da471f61429e4755fdfee1301299d8">Create a render note.</li>
<li data-list-item-id="e2e1475eb5099d3df20de96997712a9dc">Create a child code note of JSX type with the content of this file:&nbsp;
<li>Create a render note.</li>
<li>Create a child code note of JSX type with the content of this file:&nbsp;
<a
class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/KLsqhjaqh1QW/RSssb9S3xgSr/_help_i9B4IW7b6V6z">Widget showcase</a>
class="reference-link" href="#root/_help_i9B4IW7b6V6z">Widget showcase</a>
</li>
<li data-list-item-id="ed0b442c37c1db5287d95d8d982f025d9">Set the <code spellcheck="false">~renderNote</code> relation of the parent
note to the child note.</li>
<li data-list-item-id="e62386a552bb441bcb830285f5487868b">Refresh the render note to see the results.</li>
<li>Set the <code>~renderNote</code> relation of the parent note to the child
note.</li>
<li>Refresh the render note to see the results.</li>
</ol>

13
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html generated vendored
View File

@ -1,19 +1,12 @@
<h2>Inline styles</h2><pre><code class="language-text-jsx">&lt;div style={{
<h2>Inline styles</h2><pre><code class="language-text-x-trilium-auto">&lt;div style={{
display: "flex",
height: "53px",
width: "fit-content",
fontSize: "0.75em",
alignItems: "center",
flexShrink: 0
}}&gt;/* [...] */&lt;/div&gt;</code></pre>
<h2>Custom CSS file</h2>
<p>Simply create a&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a>.
<p>Simply create a&nbsp;<a class="reference-link" href="#root/_help_AlhDUqhENtH7">Custom app-wide CSS</a>.
Make sure the class names are unique enough to not intersect with other
UI elements, consider adding a prefix (e.g. <code spellcheck="false">x-mywidget-</code>).</p>
UI elements, consider adding a prefix (e.g. <code>x-mywidget-</code>).</p>

29
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html generated vendored
View File

@ -1,26 +1,26 @@
<p>Using the concept of&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/wqXwKJl6VpNk/_help_hA834UaHhSNn">Script bundles</a>,
<p>Using the concept of&nbsp;<a class="reference-link" href="#root/_help_hA834UaHhSNn">Script bundles</a>,
it's possible to create components that are shared for multiple widgets
or&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>.</p>
or&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</p>
<h2>Exporting a single component</h2>
<p>This is generally useful for big components.</p>
<p>Here's an example child hierarchy using&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>: </p>
href="#root/_help_HcABDtFCkbFN">Render Note</a>: </p>
<ul>
<li data-list-item-id="e3f972228e04ea1f4801d76cb1145fe54"><em>My render note</em>
<li><em>My render note</em>
<br>Note type: Render Note
<br>Link <code spellcheck="false">~renderNote</code> to the child note (<em>Render note with subcomponents</em>)
<br>Link <code>~renderNote</code> to the child note (<em>Render note with subcomponents</em>)
<ul>
<li data-list-item-id="eed4ff5d1824e4f8cf1a05feef1117b91">
<li>
<p><em>Render note with subcomponents</em>
<br>Type: JSX</p><pre><code class="language-application-javascript-env-frontend">export default function() {
<br>Type: JSX</p><pre><code class="language-application-javascript-env-backend">export default function() {
return (
&lt;MyComponent /&gt;
);
}</code></pre>
<ul>
<li data-list-item-id="e9fdf8ed08c3577977dc48be1bc075f0e">
<li>
<p><em>MyComponent</em>
<br>Type: Code / JSX</p><pre><code class="language-application-javascript-env-frontend">export default function MyComponent() {
<br>Type: Code / JSX</p><pre><code class="language-application-javascript-env-backend">export default function MyComponent() {
return &lt;p&gt;Hi&lt;/p&gt;;
}</code></pre>
</li>
@ -30,17 +30,16 @@
</li>
</ul>
<h2>Multiple components per note</h2>
<p>To export multiple components, use the <code spellcheck="false">export</code> keyword
next to each of the function components.</p>
<p>Here's how a sub-note called <code spellcheck="false">MyComponents</code> would
look like:</p><pre><code class="language-application-javascript-env-frontend">export function MyFirstComponent() {
<p>To export multiple components, use the <code>export</code> keyword next
to each of the function components.</p>
<p>Here's how a sub-note called <code>MyComponents</code> would look like:</p><pre><code class="language-application-javascript-env-backend">export function MyFirstComponent() {
return &lt;p&gt;First&lt;/p&gt;;
}
export function MySecondComponent() {
return &lt;p&gt;Bar&lt;/p&gt;;
}</code></pre>
<p>Then in its parent note:</p><pre><code class="language-application-javascript-env-frontend">const { MyFirstComponent, MySecondComponent } = MyComponents;
<p>Then in its parent note:</p><pre><code class="language-application-javascript-env-backend">const { MyFirstComponent, MySecondComponent } = MyComponents;
export default function() {
return (
@ -51,5 +50,5 @@ export default function() {
);
}</code></pre>
<p>Alternatively, it's also possible to use the components directly without
assigning them to a <code spellcheck="false">const</code> first:</p><pre><code class="language-application-javascript-env-frontend">&lt;MyComponents.MyFirstComponent /&gt;
assigning them to a <code>const</code> first:</p><pre><code class="language-application-javascript-env-backend">&lt;MyComponents.MyFirstComponent /&gt;
&lt;MyComponents.MySecondComponent /&gt;</code></pre>

32
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Hooks.html generated vendored
View File

@ -1,14 +1,14 @@
<h2>Standard Preact hooks</h2>
<p>All standard Preact hooks are available as an import in <code spellcheck="false">trilium:api</code>.</p>
<p>All standard Preact hooks are available as an import in <code>trilium:api</code>.</p>
<p>For example:</p><pre><code class="language-text-x-trilium-auto">import { useState } from "trilium:preact";
const [ myState, setMyState ] = useState("Hi");</code></pre>
<h2>Custom hooks</h2>
<p>Trilium comes with a large set of custom hooks for Preact, all of which
are also available to custom widgets and&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>.</p>
<h3><code spellcheck="false">useNoteContext</code></h3>
<p>As a replacement to&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_GhurYZjh8e1V">Note context aware widget</a>,
Preact exposes the current note context in the <code spellcheck="false">useNoteContext</code> hook:</p><pre><code class="language-text-x-trilium-auto">import { defineWidget, useNoteContext, useNoteProperty } from "trilium:preact";
href="#root/_help_HcABDtFCkbFN">Render Note</a>.</p>
<h3><code>useNoteContext</code></h3>
<p>As a replacement to&nbsp;<a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>,
Preact exposes the current note context in the <code>useNoteContext</code> hook:</p><pre><code class="language-text-x-trilium-auto">import { defineWidget, useNoteContext, useNoteProperty } from "trilium:preact";
export default defineWidget({
parent: "note-detail-pane",
@ -21,15 +21,13 @@ export default defineWidget({
});</code></pre>
<p>Note that the custom widget must be inside the content area (so note detail
widget) for this to work properly, especially when dealing with splits.</p>
<h3><code spellcheck="false">useActiveNoteContext</code></h3>
<p><code spellcheck="false">useActiveNoteContext</code> is an alternative
to <code spellcheck="false">useNoteContext</code> which works even if the
widget is not within the note detail section and it automatically switches
the note context as the user is navigating around between tabs and splits.</p>
<h3><code spellcheck="false">useNoteProperty</code></h3>
<p>This hook allows “listening” for changes to a particular property of a
<code
spellcheck="false">FNote</code>, such as the <code spellcheck="false">title</code> or
<code
spellcheck="false">type</code>of a note. The benefit from using the hook is that it actually
reacts to changes, for example if the note title or type is changed.</p>
<h3><code>useActiveNoteContext</code></h3>
<p><code>useActiveNoteContext</code> is an alternative to <code>useNoteContext</code> which
works even if the widget is not within the note detail section and it automatically
switches the note context as the user is navigating around between tabs
and splits.</p>
<h3><code>useNoteProperty</code></h3>
<p>This hook allows “listening” for changes to a particular property of a <code>FNote</code>,
such as the <code>title</code> or <code>type</code> of a note. The benefit
from using the hook is that it actually reacts to changes, for example
if the note title or type is changed.</p>

2
docs/Developer Guide/Developer Guide/Documentation.md vendored
View File

@ -1,5 +1,5 @@
# Documentation
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/nvEEQ1vvJMmS/Documentation_image.png" width="205" height="162">
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/8caQTtAJgMUG/Documentation_image.png" width="205" height="162">
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing <kbd>F1</kbd>.
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.

351
docs/User Guide/!!!meta.json vendored
View File

@ -2677,6 +2677,20 @@
"value": "tabs",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "MMiBEQljMQh2",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 60
}
],
"format": "markdown",
@ -4786,20 +4800,25 @@
"value": "bx bxs-navigation",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "3seOhtN8uLIY",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 50
}
],
"format": "markdown",
"dataFileName": "Note Navigation.md",
"attachments": [
{
"attachmentId": "jDuwVaU8bNtG",
"title": "image.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "Note Navigation_image.png"
}
]
"attachments": []
},
{
"isClone": false,
@ -15618,6 +15637,83 @@
"type": "text",
"mime": "text/markdown",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "KLsqhjaqh1QW",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "gMkgcLJ6jBkg",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "HI6GBBIduIgv",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "s8alTXmpFR61",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "oPVyFC7WL2Lp",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "GhurYZjh8e1V",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "RnaPdbciOfeq",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "M8IppdwVHSjG",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 100
},
{
"type": "relation",
"name": "internalLink",
"value": "4Gn3psZKsfSm",
"isInheritable": false,
"position": 110
},
{
"type": "label",
"name": "shareAlias",
@ -15631,83 +15727,6 @@
"value": "bx bxs-widget",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "oPVyFC7WL2Lp",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "RnaPdbciOfeq",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "xYmIYSP6wE3F",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "4Gn3psZKsfSm",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "KLsqhjaqh1QW",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "HI6GBBIduIgv",
"isInheritable": false,
"position": 100
},
{
"type": "relation",
"name": "internalLink",
"value": "s8alTXmpFR61",
"isInheritable": false,
"position": 110
},
{
"type": "relation",
"name": "internalLink",
"value": "GhurYZjh8e1V",
"isInheritable": false,
"position": 120
},
{
"type": "relation",
"name": "internalLink",
"value": "M8IppdwVHSjG",
"isInheritable": false,
"position": 130
},
{
"type": "relation",
"name": "internalLink",
"value": "gMkgcLJ6jBkg",
"isInheritable": false,
"position": 140
}
],
"format": "markdown",
@ -15756,23 +15775,23 @@
{
"type": "relation",
"name": "internalLink",
"value": "s8alTXmpFR61",
"value": "MgibgPcfeuGz",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "s8alTXmpFR61",
"isInheritable": false,
"position": 50
},
{
"type": "label",
"name": "shareAlias",
"value": "widget-basics",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "MgibgPcfeuGz",
"isInheritable": false,
"position": 50
}
],
"format": "markdown",
@ -15912,19 +15931,19 @@
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "Sg9GrCtyftZf",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "shareAlias",
"value": "css",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "Sg9GrCtyftZf",
"isInheritable": false,
"position": 30
}
],
"format": "markdown",
@ -16347,46 +16366,46 @@
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bxl-react",
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 30
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "MgibgPcfeuGz",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "wy8So3yZZlH9",
"isInheritable": false,
"position": 60
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "GLks18SNjxmC",
"isInheritable": false,
"position": 70
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "Bqde6BvPo05g",
"isInheritable": false,
"position": 80
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "wy8So3yZZlH9",
"isInheritable": false,
"position": 50
},
{
"type": "label",
"name": "iconClass",
"value": "bx bxl-react",
"isInheritable": false,
"position": 30
}
],
"format": "markdown",
@ -16416,14 +16435,14 @@
"name": "internalLink",
"value": "hA834UaHhSNn",
"isInheritable": false,
"position": 30
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 40
"position": 20
},
{
"type": "label",
@ -16459,14 +16478,14 @@
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 40
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "GhurYZjh8e1V",
"isInheritable": false,
"position": 50
"position": 20
},
{
"type": "label",
@ -16502,7 +16521,7 @@
"name": "internalLink",
"value": "AlhDUqhENtH7",
"isInheritable": false,
"position": 30
"position": 10
},
{
"type": "label",
@ -16533,40 +16552,40 @@
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-component",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "MgibgPcfeuGz",
"isInheritable": false,
"position": 40
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "i9B4IW7b6V6z",
"isInheritable": false,
"position": 60
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "6tZeKvSHEUiB",
"isInheritable": false,
"position": 70
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "i9B4IW7b6V6z",
"isInheritable": false,
"position": 40
},
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-component",
"isInheritable": false,
"position": 30
}
],
"format": "markdown",
@ -16788,6 +16807,27 @@
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "IakOLONlIfGI",
"isInheritable": false,
"position": 30
},
{
"type": "label",
"name": "iconClass",
@ -16795,33 +16835,12 @@
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 50
},
{
"type": "label",
"name": "shareAlias",
"value": "bundles",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "IakOLONlIfGI",
"isInheritable": false,
"position": 70
}
],
"format": "markdown",

11
docs/User Guide/User Guide/Basic Concepts and Features/Navigation/Note Navigation.md vendored
View File

@ -3,14 +3,15 @@ One of the Trilium's goals is to provide fast and comfortable navigation between
## Backwards and forward
You can use alt-left and alt-right to move back and forward in history of viewed pages.
To move back and forward in history of viewed pages:
This works identically to browser backwards / forwards, it's actually using built-in browser support for this.
![](Note%20Navigation_image.png)
* The <a class="reference-link" href="../UI%20Elements/Launch%20Bar.md">Launch Bar</a> can be configured to display navigation buttons (see _Go to Next Note_ and _Go to Previous Note_ in _Available Launchers_).
* On the left side of the [tab bar](../UI%20Elements/Tabs.md), there are two dedicated buttons.
* These buttons will appear only if the launch bar is not already displaying the history navigation buttons to avoid duplication.
* Alternatively, use the <kbd>Alt</kbd> + <kbd>Left</kbd> and <kbd>Alt</kbd> + <kbd>Right</kbd> keyboard shortcuts.
## Jump to note
This is useful to quickly find and view arbitrary notes - click on `Jump to` button on the top or press <kbd>Ctrl</kbd> + <kbd>J</kbd> . Then type part of the note name and autocomplete will help you pick the desired note.
See <a class="reference-link" href="Jump%20to.md">Jump to Note</a> for more information.
See <a class="reference-link" href="Jump%20to.md">Jump to...</a> for more information.

BIN
docs/User Guide/User Guide/Basic Concepts and Features/Navigation/Note Navigation_image.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

2
docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Tabs.md vendored
View File

@ -17,6 +17,8 @@ Depending on the <a class="reference-link" href="Vertical%20and%20horizontal%20
* For multitasking, tabs can be used alongside <a class="reference-link" href="Split%20View.md">Split View</a>. Each tab can have one or more notes, displayed horizontally.
* Tabs can be reordered by drag-and-dropping it into a new position.
* An existing tab can be displayed in a new window by dragging the tab upwards or downwards. It is not possible to combine tabs back into another window.
* On the left side of the tab bar there are two buttons to navigate through the note history backwards or forwards (see <a class="reference-link" href="../Navigation/Note%20Navigation.md">Note Navigation</a>).
* This feature is only enabled if the <a class="reference-link" href="Launch%20Bar.md">Launch Bar</a> doesn't already contain the history navigation buttons.
## Keyboard interaction

2
docs/User Guide/User Guide/Note Types/Render Note.md vendored
View File

@ -44,7 +44,7 @@ Here are the steps to creating a simple render note:
2. Create a child <a class="reference-link" href="Code.md">Code</a> note with JSX as the language.
As an example, use the following content:
```jsx
```
export default function() {
return (
<>

26
docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md vendored
View File

@ -23,27 +23,21 @@ Wherever possible, widget examples will be both in the legacy and Preact format.
Let's start by creating a widget that shows a message near the content area. Follow the previous section to create a code note, and use the following content.
<table><thead><tr><th>Legacy</th><th style="width:50%;">Preact (v0.101.0+)</th></tr></thead><tbody><tr><td><pre><code class="language-text-x-trilium-auto">class HelloNoteDetail extends api.BasicWidget {
<table><thead><tr><th>Legacy</th><th>Preact (v0.101.0+)</th></tr></thead><tbody><tr><td><pre><code class="language-text-x-trilium-auto">class HelloNoteDetail extends api.BasicWidget {
constructor() {
super();
this.contentSized();
}
get parentWidget() { return "center-pane" }
doRender() {
this.$widget = $("&lt;span&gt;Center pane&lt;/span&gt;");
}
<pre><code class="language-text-x-trilium-auto">constructor() {
super();
this.contentSized();
}
module.exports = new HelloNoteDetail();</code></pre></td><td style="vertical-align:top;"><pre><code class="language-text-x-trilium-auto">import { defineWidget } from "trilium:preact";
get parentWidget() { return "center-pane" }
export default defineWidget({
doRender() {
this.&lt;!--FORMULA_INLINE_1766517018225_0--&gt;("&amp;lt;span&amp;gt;Center pane&amp;lt;/span&amp;gt;");
}</code></pre><p>}</p><p>module.exports = new HelloNoteDetail();</p></code></pre></td><td><pre><code class="language-text-x-trilium-auto">import { defineWidget } from "trilium:preact";<p></p><p>export default defineWidget({
parent: "center-pane",
render: () =&gt; &lt;span&gt;Center pane from Preact.&lt;/span&gt;
});</code></pre></td></tr></tbody></table>
});</p></code></pre></td></tr></tbody></table>
[Refresh the application](../../Troubleshooting/Refreshing%20the%20application.md) and the widget should appear underneath the content area.
@ -51,7 +45,7 @@ export default defineWidget({
A widget can be placed in one of the following sections of the applications:
<table class="ck-table-resized"><colgroup><col style="width:15.59%;"><col style="width:30.42%;"><col style="width:16.68%;"><col style="width:37.31%;"></colgroup><thead><tr><th>Value for <code spellcheck="false">parentWidget</code></th><th>Description</th><th>Sample widget</th><th>Special requirements</th></tr></thead><tbody><tr><th><code spellcheck="false">left-pane</code></th><td>Appears within the same pane that holds the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a>.</td><td>Same as above, with only a different <code spellcheck="false">parentWidget</code>.</td><td>None.</td></tr><tr><th><code spellcheck="false">center-pane</code></th><td>In the content area. If a split is open, the widget will span all of the splits.</td><td>See example above.</td><td>None.</td></tr><tr><th><code spellcheck="false">note-detail-pane</code></th><td><p>In the content area, inside the note detail area. If a split is open, the widget will be contained inside the split.</p><p>This is ideal if the widget is note-specific.</p></td><td><a class="reference-link" href="Custom%20Widgets/Note%20context%20aware%20widget.md">Note context aware widget</a></td><td><ul><li data-list-item-id="ec06332efcc3039721606c052f0d913fa">The widget must export a <code spellcheck="false">class</code> and not an instance of the class (e.g. <code spellcheck="false">no new</code>) because it needs to be multiplied for each note, so that splits work correctly.</li><li data-list-item-id="e8da690a2a8df148f6b5fc04ba1611688">Since the <code spellcheck="false">class</code> is exported instead of an instance, the <code spellcheck="false">parentWidget</code> getter must be <code spellcheck="false">static</code>, otherwise the widget is ignored.</li></ul></td></tr><tr><th><code spellcheck="false">right-pane</code></th><td>In the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Right%20Sidebar.md">Right Sidebar</a>, as a dedicated section.</td><td><a class="reference-link" href="Custom%20Widgets/Right%20pane%20widget.md">Right pane widget</a></td><td><ul><li data-list-item-id="efe008d361e224f422582552648e1afe7">Although not mandatory, it's best to use a <code spellcheck="false">RightPanelWidget</code> instead of a <code spellcheck="false">BasicWidget</code> or a <code spellcheck="false">NoteContextAwareWidget</code>.</li></ul></td></tr></tbody></table>
<table class="ck-table-resized"><colgroup><col style="width:15.59%;"><col style="width:30.42%;"><col style="width:16.68%;"><col style="width:37.31%;"></colgroup><thead><tr><th>Value for <code>parentWidget</code></th><th>Description</th><th>Sample widget</th><th>Special requirements</th></tr></thead><tbody><tr><th><code>left-pane</code></th><td>Appears within the same pane that holds the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a>.</td><td>Same as above, with only a different <code>parentWidget</code>.</td><td>None.</td></tr><tr><th><code>center-pane</code></th><td>In the content area. If a split is open, the widget will span all of the splits.</td><td>See example above.</td><td>None.</td></tr><tr><th><code>note-detail-pane</code></th><td><p>In the content area, inside the note detail area. If a split is open, the widget will be contained inside the split.</p><p>This is ideal if the widget is note-specific.</p></td><td><a class="reference-link" href="Custom%20Widgets/Note%20context%20aware%20widget.md">Note context aware widget</a></td><td><ul><li data-list-item-id="ec06332efcc3039721606c052f0d913fa">The widget must export a <code>class</code> and not an instance of the class (e.g. <code>no new</code>) because it needs to be multiplied for each note, so that splits work correctly.</li><li data-list-item-id="e8da690a2a8df148f6b5fc04ba1611688">Since the <code>class</code> is exported instead of an instance, the <code>parentWidget</code> getter must be <code>static</code>, otherwise the widget is ignored.</li></ul></td></tr><tr><th><code>right-pane</code></th><td>In the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Right%20Sidebar.md">Right Sidebar</a>, as a dedicated section.</td><td><a class="reference-link" href="Custom%20Widgets/Right%20pane%20widget.md">Right pane widget</a></td><td><ul><li data-list-item-id="efe008d361e224f422582552648e1afe7">Although not mandatory, it's best to use a <code>RightPanelWidget</code> instead of a <code>BasicWidget</code> or a <code>NoteContextAwareWidget</code>.</li></ul></td></tr></tbody></table>
To position the widget somewhere else, just change the value passed to `get parentWidget()` for legacy widgets or the `parent` field for Preact. Do note that some positions such as `note-detail-pane` and `right-pane` have special requirements that need to be accounted for (see the table above).

2
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md vendored
View File

@ -35,7 +35,7 @@ module.exports = new NoteTitleWidget();
## Preact widget (v0.101.0+)
```jsx
```
import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
export default defineLauncherWidget({

8
docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md vendored
View File

@ -19,13 +19,13 @@ When using Preact with JSX, there is a special syntax which provides ES-like imp
Instead of:
```jsx
```
api.showMessage("Hello");
```
the JSX version looks like this:
```jsx
```
import { showMessage } from "trilium:api";
showMessage("hello");
```
@ -34,7 +34,7 @@ showMessage("hello");
There's a new <a class="reference-link" href="../Script%20API.md">Script API</a> dedicated to Preact, which provides shared components that are also used by Trilium internally as well as hooks, for example.
```jsx
```
import { useState } from "trilium:preact";
const [ myState, setMyState ] = useState("Hi");
```
@ -43,7 +43,7 @@ const [ myState, setMyState ] = useState("Hi");
JSX notes can export a component for use in <a class="reference-link" href="../../Note%20Types/Render%20Note.md">Render Note</a> or for <a class="reference-link" href="Preact/Component%20libraries.md">Component libraries</a>: 
```jsx
```
export default function() {
return (
<>

4
docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md vendored
View File

@ -5,13 +5,13 @@ Trilium comes with its own set of Preact components, some of which are also avai
To use these components, simply import them from `trilium:preact`:
```jsx
```
import { ActionButton, Button, LinkButton } from "trilium:preact";
```
and then use them:
```jsx
```
export default function MyRenderNote() {
const onClick = () => showMessage("A button was pressed");

2
docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md vendored
View File

@ -1,7 +1,7 @@
# CSS
## Inline styles
```jsx
```
<div style={{
display: "flex",
height: "53px",