gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-06 14:44:25 +01:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

docs(user): change URL for demo notes
Some checks are pending
Checks / main (push) Waiting to run
Details
CodeQL Advanced / Analyze (actions) (push) Waiting to run
Details
CodeQL Advanced / Analyze (javascript-typescript) (push) Waiting to run
Details
Deploy Documentation / Build and Deploy Documentation (push) Waiting to run
Details
Dev / Test development (push) Waiting to run
Details
Dev / Build Docker image (push) Blocked by required conditions
Details
Dev / Check Docker build (Dockerfile) (push) Blocked by required conditions
Details
Dev / Check Docker build (Dockerfile.alpine) (push) Blocked by required conditions
Details
/ Check Docker build (Dockerfile) (push) Waiting to run
Details
/ Check Docker build (Dockerfile.alpine) (push) Waiting to run
Details
/ Build Docker images (Dockerfile, ubuntu-24.04-arm, linux/arm64) (push) Blocked by required conditions
Details
/ Build Docker images (Dockerfile.alpine, ubuntu-latest, linux/amd64) (push) Blocked by required conditions
Details
/ Build Docker images (Dockerfile.legacy, ubuntu-24.04-arm, linux/arm/v7) (push) Blocked by required conditions
Details
/ Build Docker images (Dockerfile.legacy, ubuntu-24.04-arm, linux/arm/v8) (push) Blocked by required conditions
Details
/ Merge manifest lists (push) Blocked by required conditions
Details
playwright / E2E tests on linux-arm64 (push) Waiting to run
Details
playwright / E2E tests on linux-x64 (push) Waiting to run
Details

Browse Source
This commit is contained in:
Elian Doran 2025-12-24 00:01:13 +02:00
parent e96ee87472
commit 86307b482f
No known key found for this signature in database
23 changed files with 441 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Demo Notes.html generated vendored
View File

@ -1,15 +1,15 @@
<p>When you run Trilium for the first time, it will generate a new database <p>When you run Trilium for the first time, it will generate a new database
containing demo notes. These notes showcase its many features, such as:</p> containing demo notes. These notes showcase its many features, such as:</p>
<ul> <ul>
<li><a class="reference-link" href="#root/_help_iRwzGnHPzonm">Relation Map</a> <li data-list-item-id="e1332d0e5bd3075dff093a222c3396eba"><a class="reference-link" href="#root/_help_iRwzGnHPzonm">Relation Map</a>
</li> </li>
<li><a class="reference-link" href="#root/_help_l0tKav7yLHGF">Day Notes</a> <li data-list-item-id="e15271c447822c455fcc523deb51fb9eb"><a class="reference-link" href="#root/_help_l0tKav7yLHGF">Day Notes</a>
</li> </li>
<li><a class="reference-link" href="#root/_help_R7abl2fc6Mxi">Weight Tracker</a> <li data-list-item-id="ee1a63745a43d7a8109f69dcdaf79ee28"><a class="reference-link" href="#root/_help_R7abl2fc6Mxi">Weight Tracker</a>
</li> </li>
<li><a class="reference-link" href="#root/_help_xYjQUYhpbUEW">Task Manager</a> <li data-list-item-id="ed1b10c8014e5fbaab923dd9ed7e4b122"><a class="reference-link" href="#root/_help_xYjQUYhpbUEW">Task Manager</a>
</li> </li>
<li><a class="reference-link" href="#root/_help_Wy267RK4M69c">Themes</a> <li data-list-item-id="edbd34e77d6f5c13372f6ff6135fcfb95"><a class="reference-link" href="#root/_help_Wy267RK4M69c">Themes</a>
</li> </li>
</ul> </ul>
<h3>Restoring Demo Notes</h3> <h3>Restoring Demo Notes</h3>
@ -21,10 +21,10 @@
<p>You can easily restore the demo notes by using Trilium's built-in import <p>You can easily restore the demo notes by using Trilium's built-in import
feature by importing them:</p> feature by importing them:</p>
<ul> <ul>
<li>Download <a href="https://github.com/TriliumNext/Trilium/raw/develop/db/demo.zip">this .zip archive</a> with <li data-list-item-id="eaa8db14b035c1cc6b11d54b19acf9803">Download <a href="https://github.com/TriliumNext/Trilium/raw/refs/heads/main/apps/server/src/assets/db/demo.zip">the .zip archive</a> with
the latest version of the demo notes</li> the latest version of the demo notes</li>
<li>Right click on any note in your tree under which you would like the demo <li data-list-item-id="e3aa9c23f36af5aa9931ecf72de36083f">Right click on any note in your tree under which you would like the demo
notes to be imported</li> notes to be imported</li>
<li>Click "Import into note"</li> <li data-list-item-id="e08987d861bb67c9457e73122c134a641">Click "Import into note"</li>
<li>Select the .zip archive to import it</li> <li data-list-item-id="ee8b17222734db674b929a1d2f55a6840">Select the .zip archive to import it</li>
</ul> </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> via an attribute.</p>
<h2>Creating a render note</h2> <h2>Creating a render note</h2>
<ol> <ol>
<li data-list-item-id="e6c172eb567596820dd7f444924e568b3">Create a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note <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 with the HTML language, with what needs to be displayed (for example <code>&lt;p&gt;Hello world.&lt;/p&gt;</code>).</li>
<code <li>Create a&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
spellcheck="false">&lt;p&gt;Hello world.&lt;/p&gt;</code>).</li> <li>Assign the <code>renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
<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
point at the previously created code note.</li> point at the previously created code note.</li>
</ol> </ol>
<h2>Legacy scripting using jQuery</h2> <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 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"); 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> $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> to point to the HTML note. When the render note is accessed it will display:</p>
<blockquote> <blockquote>
<p><strong>Current date &amp; time</strong> <p><strong>Current date &amp; time</strong>
@ -42,33 +39,37 @@ $dateEl.text(new Date());</code></pre>
need to provide a HTML anymore.</p> need to provide a HTML anymore.</p>
<p>Here are the steps to creating a simple render note:</p> <p>Here are the steps to creating a simple render note:</p>
<ol> <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>
<li <p>Create a note of type&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</p>
data-list-item-id="eae9b5f496cba824738734828c11448d5"> </li>
<p>Create a child&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a>&nbsp;note <li>
<p>Create a child&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
with JSX as the language. 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 ( return (
&lt;&gt; &lt;&gt;
&lt;p&gt;Hello world.&lt;/p&gt; &lt;p&gt;Hello world.&lt;/p&gt;
&lt;/&gt; &lt;/&gt;
); );
}</code></pre> }</code></pre>
</li> </li>
<li data-list-item-id="e28812b27d5227675943ef98ab9477e67">In the parent render note, define a <code spellcheck="false">~renderNote</code> relation <li>
pointing to the newly created child.</li> <p>In the parent render note, define a <code>~renderNote</code> relation pointing
<li data-list-item-id="e24cc71d55c7c8ec61014ac0d800653da">Refresh the render note and it should display a “Hello world” message.</li> to the newly created child.</p>
</li>
<li>
<p>Refresh the render note and it should display a “Hello world” message.</p>
</li>
</ol> </ol>
<h2>Refreshing the note</h2> <h2>Refreshing the note</h2>
<p>It's possible to refresh the note via:</p> <p>It's possible to refresh the note via:</p>
<ul> <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>The corresponding button in&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
<li <li>The “Render active note” <a href="#root/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
data-list-item-id="e871da2cff905b2daa180fcae27aee43b">The “Render active note” <a href="#root/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
assigned by default).</li> assigned by default).</li>
</ul> </ul>
<h2>Examples</h2> <h2>Examples</h2>
<ul> <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> is present in the&nbsp;<a class="reference-link" href="#root/_help_6tZeKvSHEUiB">Demo Notes</a>.</li>
</ul> </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 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; <p>When a script is run, the sub-children of the script being run (or the&nbsp;
<a <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, of the corresponding type (front-end or backend) as the code being run,
they will be evaluated as well.</p> they will be evaluated as well.</p>
<p>The collection of a script and its child notes is called a <em>bundle</em>. <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> 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> <p>As a basic example of dependencies, consider the following note structure:</p>
<ul> <ul>
<li class="ck-list-marker-italic" data-list-item-id="e4c343ba6ed99b3a943049b6f0af99dd6"> <li>
<p><em>Script with dependency</em> <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> <ul>
<li class="ck-list-marker-italic" data-list-item-id="ea27318ca64cb71cfa5eceb15f9acba75"> <li>
<p><em>MyMath</em> <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) { sum(a, b) {
return a + b; return a + b;
} }
@ -26,21 +26,21 @@
</li> </li>
</ul> </ul>
<p>When <em>Script with dependency</em> is run, it will detect <em>MyMath</em> as <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> into a global object with the same name as the note.</p>
<aside class="admonition note"> <aside class="admonition note">
<p>If the note contains spaces or special characters, they will be stripped. <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> </aside>
<h2>Alternative syntax</h2> <h2>Alternative syntax</h2>
<p>Instead of providing an object to <code spellcheck="false">module.exports</code>, <p>Instead of providing an object to <code>module.exports</code>, it's also
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; 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> module.exports.subtract = (a, b) =&gt; a - b;</code></pre>
<h2>Ignoring a code script from a bundle</h2> <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 <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> <h2>Sharing a module across multiple bundles</h2>
<p>Modules can be reused across multiple scripts by simply cloning the shared <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 <p>Optionally, a separate note can be used to contain all the different reusable
modules for an easy way to discover them.</p> 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> <h2>Preact with JSX vs. vanilla jQuery</h2>
<p>In older versions of Trilium, custom widgets were exclusively written <p>In older versions of Trilium, custom widgets were exclusively written
in a combination of jQuery with Trilium's internal widget architecture 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 <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 Both legacy and Preact widgets have the same capabilities, with a single
difference:</p> difference:</p>
<ul> <ul>
<li data-list-item-id="e2a6a28bcf69987db6b33b4902b913282">Preact widgets are content-sized by default whereas legacy widgets need <li>Preact widgets are content-sized by default whereas legacy widgets need <code>this.contentSized()</code> applied
<code in the constructor. For more information, see the corresponding section
spellcheck="false">this.contentSized()</code>applied in the constructor. For more information, in&nbsp;<a class="reference-link" href="#root/_help_gMkgcLJ6jBkg">Troubleshooting</a>.</li>
see the corresponding section in&nbsp;<a class="reference-link" href="#root/MgibgPcfeuGz/_help_gMkgcLJ6jBkg">Troubleshooting</a>.</li>
</ul> </ul>
<p>Wherever possible, widget examples will be both in the legacy and Preact <p>Wherever possible, widget examples will be both in the legacy and Preact
format.</p> format.</p>
<h2>Creating a custom widget</h2> <h2>Creating a custom widget</h2>
<ol> <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>Create a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note.</li>
<li <li>Set the language to:
data-list-item-id="e6ac401b11f885fbf6ee2eb486e2fb4db">Set the language to:
<ol> <ol>
<li data-list-item-id="ea981b36d647bb2020c63b6eb8888ffcb">JavaScript (frontend) for legacy widgets using jQuery.</li> <li>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>JSX for Preact widgets. You might need to go to Options → Code to enable
the language first.</li> the language first.</li>
</ol> </ol>
</li> </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>Apply the <code>#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a>.</li>
</ol> </ol>
<h2>Getting started with a simple example</h2> <h2>Getting started with a simple example</h2>
<p>Let's start by creating a widget that shows a message near the content <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 area. Follow the previous section to create a code note, and use the following
content.</p> content.</p>
<figure class="table"> <table>
<table> <thead>
<thead> <tr>
<tr> <th>Legacy</th>
<th>Legacy</th> <th>Preact (v0.101.0+)</th>
<th style="width:50%;">Preact (v0.101.0+)</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td><pre><code class="language-text-x-trilium-auto">class HelloNoteDetail extends api.BasicWidget {
<td><pre><code class="language-text-x-trilium-auto">class HelloNoteDetail extends api.BasicWidget {
constructor() { <pre><code class="language-text-x-trilium-auto">constructor() {
super(); super();
this.contentSized(); this.contentSized();
}
get parentWidget() { return "center-pane" }
doRender() {
this.$widget = $("&lt;span&gt;Center pane&lt;/span&gt;");
}
} }
module.exports = new HelloNoteDetail();</code></pre> get parentWidget() { return "center-pane" }
</td>
<td style="vertical-align:top;"><pre><code class="language-text-x-trilium-auto">import { defineWidget } from "trilium:preact";
export default defineWidget({ doRender() {
this.&lt;!--FORMULA_INLINE_1766526977514_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", parent: "center-pane",
render: () =&gt; &lt;span&gt;Center pane from Preact.&lt;/span&gt; render: () =&gt; &lt;span&gt;Center pane from Preact.&lt;/span&gt;
});</code></pre> });</p></code></pre>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure> <p></p>
<p><a href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/_help_s8alTXmpFR61">Refresh the application</a> and <p><a href="#root/_help_s8alTXmpFR61">Refresh the application</a> and the widget
the widget should appear underneath the content area.</p> should appear underneath the content area.</p>
<h2>Widget location (parent widget)</h2> <h2>Widget location (parent widget)</h2>
<p>A widget can be placed in one of the following sections of the applications:</p> <p>A widget can be placed in one of the following sections of the applications:</p>
<figure <table
class="table" style="width:100%;"> class="ck-table-resized">
<table class="ck-table-resized"> <colgroup>
<colgroup> <col style="width:15.59%;">
<col style="width:15.59%;"> <col style="width:30.42%;">
<col style="width:30.42%;"> <col style="width:16.68%;">
<col style="width:16.68%;"> <col style="width:37.31%;">
<col style="width:37.31%;"> </colgroup>
</colgroup> <thead>
<thead> <tr>
<tr> <th>Value for <code>parentWidget</code>
<th>Value for <code spellcheck="false">parentWidget</code> </th>
</th> <th>Description</th>
<th>Description</th> <th>Sample widget</th>
<th>Sample widget</th> <th>Special requirements</th>
<th>Special requirements</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <th><code>left-pane</code>
<th><code spellcheck="false">left-pane</code> </th>
</th> <td>Appears within the same pane that holds the&nbsp;<a class="reference-link"
<td>Appears within the same pane that holds the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</td>
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a>.</td> <td>Same as above, with only a different <code>parentWidget</code>.</td>
<td>Same as above, with only a different <code spellcheck="false">parentWidget</code>.</td> <td>None.</td>
<td>None.</td> </tr>
</tr> <tr>
<tr> <th><code>center-pane</code>
<th><code spellcheck="false">center-pane</code> </th>
</th> <td>In the content area. If a split is open, the widget will span all of the
<td>In the content area. If a split is open, the widget will span all of the splits.</td>
splits.</td> <td>See example above.</td>
<td>See example above.</td> <td>None.</td>
<td>None.</td> </tr>
</tr> <tr>
<tr> <th><code>note-detail-pane</code>
<th><code spellcheck="false">note-detail-pane</code> </th>
</th> <td>
<td> <p>In the content area, inside the note detail area. If a split is open,
<p>In the content area, inside the note detail area. If a split is open, the widget will be contained inside the split.</p>
the widget will be contained inside the split.</p> <p>This is ideal if the widget is note-specific.</p>
<p>This is ideal if the widget is note-specific.</p> </td>
</td> <td><a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>
<td><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_GhurYZjh8e1V">Note context aware widget</a> </td>
</td> <td>
<td> <ul>
<ul> <li data-list-item-id="ec06332efcc3039721606c052f0d913fa">The widget must export a <code>class</code> and not an instance of the class
<li data-list-item-id="ec06332efcc3039721606c052f0d913fa">The widget must export a <code spellcheck="false">class</code> and not an (e.g. <code>no new</code>) because it needs to be multiplied for each note,
instance of the class (e.g. <code spellcheck="false">no new</code>) because so that splits work correctly.</li>
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
<li must be <code>static</code>, otherwise the widget is ignored.</li>
data-list-item-id="e8da690a2a8df148f6b5fc04ba1611688">Since the <code spellcheck="false">class</code> is exported instead of an </ul>
instance, the <code spellcheck="false">parentWidget</code> getter must be </td>
<code </tr>
spellcheck="false">static</code>, otherwise the widget is ignored.</li> <tr>
</ul> <th><code>right-pane</code>
</td> </th>
</tr> <td>In the&nbsp;<a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>,
<tr> as a dedicated section.</td>
<th><code spellcheck="false">right-pane</code> <td><a class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>
</th> </td>
<td>In the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_RnaPdbciOfeq">Right Sidebar</a>, <td>
as a dedicated section.</td> <ul>
<td><a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/MgibgPcfeuGz/_help_M8IppdwVHSjG">Right pane widget</a> <li data-list-item-id="efe008d361e224f422582552648e1afe7">Although not mandatory, it's best to use a <code>RightPanelWidget</code> instead
</td> of a <code>BasicWidget</code> or a <code>NoteContextAwareWidget</code>.</li>
<td> </ul>
<ul> </td>
<li data-list-item-id="efe008d361e224f422582552648e1afe7">Although not mandatory, it's best to use a <code spellcheck="false">RightPanelWidget</code> instead </tr>
of a <code spellcheck="false">BasicWidget</code> or a <code spellcheck="false">NoteContextAwareWidget</code>.</li> </tbody>
</ul>
</td>
</tr>
</tbody>
</table> </table>
</figure> <p>To position the widget somewhere else, just change the value passed to <code>get parentWidget()</code> for
<p>To position the widget somewhere else, just change the value passed to legacy widgets or the <code>parent</code> field for Preact. Do note that
<code some positions such as <code>note-detail-pane</code> and <code>right-pane</code> have
spellcheck="false">get parentWidget()</code>for legacy widgets or the <code spellcheck="false">parent</code> field special requirements that need to be accounted for (see the table above).</p>
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>
<h2>Launch bar widgets</h2> <h2>Launch bar widgets</h2>
<p>Launch bar widgets are similar to <em>Custom widgets</em> but are specific <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>. to the&nbsp;<a class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>.
See&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/yIhgI5H7A2Sm/_help_4Gn3psZKsfSm">Launch Bar Widgets</a>&nbsp;for See&nbsp;<a class="reference-link" href="#root/_help_4Gn3psZKsfSm">Launch Bar Widgets</a>&nbsp;for
more information.</p> more information.</p>
<h2>Custom position</h2> <h2>Custom position</h2>
<p>&nbsp;</p>

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> <h2>Classic widgets</h2>
<p>In <code spellcheck="false">doRender()</code>:<span class="footnote-reference" <p>In <code>doRender()</code>:<sup><a href="#fn1saoftmefpp">[1]</a></sup>
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><pre><code class="language-text-x-trilium-auto">this.cssBlock(`#my-widget { </p><pre><code class="language-text-x-trilium-auto">this.cssBlock(`#my-widget {
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
@ -9,14 +7,12 @@
z-index: 1; z-index: 1;
}`);</code></pre> }`);</code></pre>
<h2>Preact widgets</h2> <h2>Preact widgets</h2>
<p>See the dedicated page:&nbsp;<a class="reference-link" href="#root/KLsqhjaqh1QW/_help_Sg9GrCtyftZf">CSS</a>.</p> <p>See the dedicated page:&nbsp;<a class="reference-link" href="#root/_help_Sg9GrCtyftZf">CSS</a>.</p>
<ol <ol>
class="footnote-section footnotes" data-footnote-section="" role="doc-endnotes"> <li>
<li class="footnote-item" data-footnote-item="" data-footnote-index="1" <p><sup><strong><a href="#fnref1saoftmefpp">^</a></strong></sup>
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> </p>
<div <p>Reference: <a href="https://trilium.rocks/X7pxYpiu0lgU">https://trilium.rocks/X7pxYpiu0lgU</a>
class="footnote-content" data-footnote-content=""> </p>
<p>Reference: <a href="https://trilium.rocks/X7pxYpiu0lgU">https://trilium.rocks/X7pxYpiu0lgU</a>&nbsp;</p>
</div>
</li> </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> react to changes in the current note.</p>
<p>Important aspects:</p> <p>Important aspects:</p>
<ul> <ul>
<li data-list-item-id="ebe74655683475b6a16e53832e6b2c47a">The widget must export a <code spellcheck="false">class</code> and not an <li>The widget must export a <code>class</code> and not an instance of the class
instance of the class (e.g. <code spellcheck="false">no new</code>) because (e.g. <code>no new</code>) because it needs to be multiplied for each note,
it needs to be multiplied for each note, so that splits work correctly.</li> so that splits work correctly.</li>
<li <li>Since the <code>class</code> is exported instead of an instance, the <code>parentWidget</code> getter
data-list-item-id="edf648bc7ea3325255223d28f0543e5b9">Since the <code spellcheck="false">class</code> is exported instead of an must be <code>static</code>, otherwise the widget is ignored.</li>
instance, the <code spellcheck="false">parentWidget</code> getter must be
<code
spellcheck="false">static</code>, otherwise the widget is ignored.</li>
</ul> </ul>
<h2>Example displaying the current note title</h2> <h2>Example displaying the current note title</h2>
<p>This is a note context-aware widget that simply displays the name the <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> <h2>Key highlights</h2>
<ul> <ul>
<li data-list-item-id="e05167a939f3b6c8083cf62d4f8108b4b"><code spellcheck="false">doRender</code> must not be overridden, instead <li><code>doRender</code> must not be overridden, instead <code>doRenderBody()</code> has
<code to be overridden.
spellcheck="false">doRenderBody()</code>has to be overridden. <ul>
<ul> <li><code>doRenderBody</code> can optionally be <code>async</code>.</li>
<li data-list-item-id="eee44709b64b220f4af124ff1458a61e8"><code spellcheck="false">doRenderBody</code> can optionally be <code spellcheck="false">async</code>.</li> </ul>
</ul>
</li> </li>
<li data-list-item-id="e94b7be0f1d366c502703ff3a5fc3bfb1"><code spellcheck="false">parentWidget()</code> must be set to <code spellcheck="false">“rightPane”</code>.</li> <li><code>parentWidget()</code> must be set to <code>“rightPane”</code>.</li>
<li <li><code>widgetTitle()</code> getter can optionally be overriden, otherwise
data-list-item-id="ea56b04dbcf63573acbde90d990137829"><code spellcheck="false">widgetTitle()</code> getter can optionally be the widget will be displayed as “Untitled widget”.</li>
overriden, otherwise the widget will be displayed as “Untitled widget”.</li>
</ul> </ul>
<h2>Example for new layout</h2> <h2>Example for new layout</h2>
<aside class="admonition important"> <aside class="admonition important">
@ -103,14 +101,14 @@ class HelloWorldWidget extends api.RightPanelWidget {
module.exports = new HelloWorldWidget();</code></pre> module.exports = new HelloWorldWidget();</code></pre>
<h3>Conditionally changing visibility</h3> <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.toggleInt(visible);
this.triggerCommand("reEvaluateRightPaneVisibility");</code></pre> this.triggerCommand("reEvaluateRightPaneVisibility");</code></pre>
<h2>Altering the position within the sidebar</h2> <h2>Altering the position within the sidebar</h2>
<p>By default, the sidebar items are displayed in the order they are found <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 <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 }; + 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> module.exports = new MyWidget();</code></pre>
<p>To implement this widget:</p> <p>To implement this widget:</p>
<ol> <ol>
<li data-list-item-id="e9927fa1c4b393854487094afd914ece9">Create a new <code spellcheck="false">JS Frontend</code> note in Trilium <li>Create a new <code>JS Frontend</code> note in Trilium and paste in the code
and paste in the code above.</li> above.</li>
<li data-list-item-id="e3741fe167b7dccae0081cc0d1a326a5d">Assign the <code spellcheck="false">#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a> to <li>Assign the <code>#widget</code> <a href="#root/_help_zEY4DaJG4YT5">attribute</a> to
the <a href="#root/_help_BFs8mudNFgCS">note</a>.</li> 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> </ol>
<p>To verify that the widget is working, open the developer tools (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>) <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>. and run <code>document.querySelector("#my-widget")</code>. If the element
If the element is found, the widget is functioning correctly. If <code spellcheck="false">undefined</code> is 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 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> <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;`; <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> <h3>Step 3: Styling the Widget</h3>
<p>To make the button more visually appealing and position it correctly, <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>, 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 which we'll use to replace the button text with an icon. For example the <code>bx bxs-magic-wand</code> icon.</p>
<code
spellcheck="false">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>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 { <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; } get position() { return 1; }
@ -71,8 +69,7 @@ module.exports = new MyWidget();</code></pre>
of the left pane, alongside other action buttons.</p> of the left pane, alongside other action buttons.</p>
<h3>Step 4: Adding User Interaction</h3> <h3>Step 4: Adding User Interaction</h3>
<p>Let’s make the button interactive by showing a message when it’s clicked. <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 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 {
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 position() { return 1; }
get parentWidget() { return "left-pane"; } get parentWidget() { return "left-pane"; }
@ -90,8 +87,9 @@ module.exports = new MyWidget();</code></pre>
} }
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>, <p>For the list of possible values for <code>parentWidget()</code>, see&nbsp;
see&nbsp;<a class="reference-link" href="#root/yIhgI5H7A2Sm/_help_MgibgPcfeuGz">Custom Widgets</a>.&nbsp;</p> <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. <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 When you click the button, a "Hello World!" message should appear, confirming
that your widget is fully functional.</p> 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> 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({ export default defineLauncherWidget({
render: () =&gt; { 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> support for JSX.</p>
<p>Preact can be used for:</p> <p>Preact can be used for:</p>
<ul> <ul>
<li data-list-item-id="ecaa7ce1d629d04e22a9c9e5de7bbba9d"><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>, <li><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>, where
where a JSX code note is used instead of a HTML one.</li> 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_MgibgPcfeuGz">Custom Widgets</a>,
where JSX can be used to replace the old, jQuery-based mechanism.</li> where JSX can be used to replace the old, jQuery-based mechanism.</li>
</ul> </ul>
<p>To get started, the first step is to enable JSX in the list of Code languages. <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 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 <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> Preact integration.</p>
<aside class="admonition important"> <aside class="admonition important">
<p>The documentation assumes prior knowledge with React or Preact. As a starting <p>The documentation assumes prior knowledge with React or Preact. As a starting
@ -20,23 +20,22 @@
</aside> </aside>
<h2>Import/exports</h2> <h2>Import/exports</h2>
<p>When using Preact with JSX, there is a special syntax which provides ES-like <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 imports. This <code>import</code> syntax makes way for a more intuitive that
a more intuitive that doesn't make use of global objects and paves the doesn't make use of global objects and paves the way for better auto-completion
way for better auto-completion support that might be introduced in the support that might be introduced in the future.&nbsp;</p>
future.&nbsp;</p>
<h3>API imports</h3> <h3>API imports</h3>
<p>Instead of:</p><pre><code class="language-text-jsx">api.showMessage("Hello");</code></pre> <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-jsx">import { showMessage } from "trilium:api"; <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> showMessage("hello");</code></pre>
<h3>Preact API imports (hooks, components)</h3> <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 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> const [ myState, setMyState ] = useState("Hi");</code></pre>
<h3>Exporting</h3> <h3>Exporting</h3>
<p>JSX notes can export a component for use in&nbsp;<a class="reference-link" <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 href="#root/_help_HcABDtFCkbFN">Render Note</a>&nbsp;or for&nbsp;<a class="reference-link"
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_Bqde6BvPo05g">Component libraries</a>: </p><pre><code class="language-text-x-trilium-auto">export default function() {
return ( return (
&lt;&gt; &lt;&gt;
&lt;p&gt;Hello world.&lt;/p&gt; &lt;p&gt;Hello world.&lt;/p&gt;
@ -44,15 +43,13 @@ const [ myState, setMyState ] = useState("Hi");</code></pre>
); );
}</code></pre> }</code></pre>
<h3>Import/export are not required</h3> <h3>Import/export are not required</h3>
<p>These imports are syntactic sugar meant to replace the usage for the <p>These imports are syntactic sugar meant to replace the usage for the <code>api</code> global
<code object (see&nbsp;<a class="reference-link" href="#root/_help_GLks18SNjxmC">Script API</a>).&nbsp;</p>
spellcheck="false">api</code>global object (see&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/CdNpE2pqjmI6/_help_GLks18SNjxmC">Script API</a>).&nbsp;</p>
<aside <aside
class="admonition note"> class="admonition note">
<p>The <code spellcheck="false">import</code> and <code spellcheck="false">export</code> syntax <p>The <code>import</code> and <code>export</code> syntax work only for JSX notes.
work only for JSX notes. Standard/jQuery code notes still need to use the Standard/jQuery code notes still need to use the <code>api</code> global
<code and <code>module.exports</code>.</p>
spellcheck="false">api</code>global and <code spellcheck="false">module.exports</code>.</p>
</aside> </aside>
<h2>Under the hood</h2> <h2>Under the hood</h2>
<p>Unlike JavaScript, JSX requires pre-processing to turn it into JavaScript <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 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 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, startup). If you notice any performance degradation due to long compilation,
consider <a href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/_help_wy8So3yZZlH9">reporting the issue</a> to consider <a href="#root/_help_wy8So3yZZlH9">reporting the issue</a> to us.</p>
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> <figcaption>A partial screenshot from the Widget showcase example (see below).</figcaption>
</figure> </figure>
<p>Trilium comes with its own set of Preact components, some of which are <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 <a
class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>.</p> class="reference-link" href="#root/_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>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-jsx">export default function MyRenderNote() { <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"); const onClick = () =&gt; showMessage("A button was pressed");
return ( return (
@ -26,19 +26,19 @@
<aside class="admonition tip"> <aside class="admonition tip">
<p>Starting with v0.101.0, the widget showcase is also available in the&nbsp; <p>Starting with v0.101.0, the widget showcase is also available in the&nbsp;
<a <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> </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 with JSX that shows most of the built-in components that are accessible
to custom widgets and JSX render notes.</p> to custom widgets and JSX render notes.</p>
<p>To use it, simply:</p> <p>To use it, simply:</p>
<ol> <ol>
<li data-list-item-id="ef2da471f61429e4755fdfee1301299d8">Create a render note.</li> <li>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 child code note of JSX type with the content of this file:&nbsp;
<a <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>
<li data-list-item-id="ed0b442c37c1db5287d95d8d982f025d9">Set the <code spellcheck="false">~renderNote</code> relation of the parent <li>Set the <code>~renderNote</code> relation of the parent note to the child
note to the child note.</li> note.</li>
<li data-list-item-id="e62386a552bb441bcb830285f5487868b">Refresh the render note to see the results.</li> <li>Refresh the render note to see the results.</li>
</ol> </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", display: "flex",
height: "53px", height: "53px",
width: "fit-content", width: "fit-content",
fontSize: "0.75em", fontSize: "0.75em",
alignItems: "center", alignItems: "center",
flexShrink: 0 flexShrink: 0
}}&gt;/* [...] */&lt;/div&gt;</code></pre> }}&gt;/* [...] */&lt;/div&gt;</code></pre>
<h2>Custom CSS file</h2> <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 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 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> <h2>Exporting a single component</h2>
<p>This is generally useful for big components.</p> <p>This is generally useful for big components.</p>
<p>Here's an example child hierarchy using&nbsp;<a class="reference-link" <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> <ul>
<li data-list-item-id="e3f972228e04ea1f4801d76cb1145fe54"><em>My render note</em> <li><em>My render note</em>
<br>Note type: Render Note <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> <ul>
<li data-list-item-id="eed4ff5d1824e4f8cf1a05feef1117b91"> <li>
<p><em>Render note with subcomponents</em> <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 ( return (
&lt;MyComponent /&gt; &lt;MyComponent /&gt;
); );
}</code></pre> }</code></pre>
<ul> <ul>
<li data-list-item-id="e9fdf8ed08c3577977dc48be1bc075f0e"> <li>
<p><em>MyComponent</em> <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;; return &lt;p&gt;Hi&lt;/p&gt;;
}</code></pre> }</code></pre>
</li> </li>
@ -30,17 +30,16 @@
</li> </li>
</ul> </ul>
<h2>Multiple components per note</h2> <h2>Multiple components per note</h2>
<p>To export multiple components, use the <code spellcheck="false">export</code> keyword <p>To export multiple components, use the <code>export</code> keyword next
next to each of the function components.</p> to each of the function components.</p>
<p>Here's how a sub-note called <code spellcheck="false">MyComponents</code> would <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() {
look like:</p><pre><code class="language-application-javascript-env-frontend">export function MyFirstComponent() {
return &lt;p&gt;First&lt;/p&gt;; return &lt;p&gt;First&lt;/p&gt;;
} }
export function MySecondComponent() { export function MySecondComponent() {
return &lt;p&gt;Bar&lt;/p&gt;; return &lt;p&gt;Bar&lt;/p&gt;;
}</code></pre> }</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() { export default function() {
return ( return (
@ -51,5 +50,5 @@ export default function() {
); );
}</code></pre> }</code></pre>
<p>Alternatively, it's also possible to use the components directly without <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> &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> <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"; <p>For example:</p><pre><code class="language-text-x-trilium-auto">import { useState } from "trilium:preact";
const [ myState, setMyState ] = useState("Hi");</code></pre> const [ myState, setMyState ] = useState("Hi");</code></pre>
<h2>Custom hooks</h2> <h2>Custom hooks</h2>
<p>Trilium comes with a large set of custom hooks for Preact, all of which <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" are also available to custom widgets and&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_HcABDtFCkbFN">Render Note</a>.</p> href="#root/_help_HcABDtFCkbFN">Render Note</a>.</p>
<h3><code spellcheck="false">useNoteContext</code></h3> <h3><code>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>, <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 spellcheck="false">useNoteContext</code> hook:</p><pre><code class="language-text-x-trilium-auto">import { defineWidget, useNoteContext, useNoteProperty } from "trilium:preact"; 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({ export default defineWidget({
parent: "note-detail-pane", parent: "note-detail-pane",
@ -21,15 +21,13 @@ export default defineWidget({
});</code></pre> });</code></pre>
<p>Note that the custom widget must be inside the content area (so note detail <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> widget) for this to work properly, especially when dealing with splits.</p>
<h3><code spellcheck="false">useActiveNoteContext</code></h3> <h3><code>useActiveNoteContext</code></h3>
<p><code spellcheck="false">useActiveNoteContext</code> is an alternative <p><code>useActiveNoteContext</code> is an alternative to <code>useNoteContext</code> which
to <code spellcheck="false">useNoteContext</code> which works even if the works even if the widget is not within the note detail section and it automatically
widget is not within the note detail section and it automatically switches switches the note context as the user is navigating around between tabs
the note context as the user is navigating around between tabs and splits.</p> and splits.</p>
<h3><code spellcheck="false">useNoteProperty</code></h3> <h3><code>useNoteProperty</code></h3>
<p>This hook allows “listening” for changes to a particular property of a <p>This hook allows “listening” for changes to a particular property of a <code>FNote</code>,
<code such as the <code>title</code> or <code>type</code> of a note. The benefit
spellcheck="false">FNote</code>, such as the <code spellcheck="false">title</code> or from using the hook is that it actually reacts to changes, for example
<code if the note title or type is changed.</p>
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>

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

@ -1,5 +1,5 @@
# Documentation # 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/nfSRd3FnBEBK/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 _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. * The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.

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

@ -15618,6 +15618,83 @@
"type": "text", "type": "text",
"mime": "text/markdown", "mime": "text/markdown",
"attributes": [ "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", "type": "label",
"name": "shareAlias", "name": "shareAlias",
@ -15631,83 +15708,6 @@
"value": "bx bxs-widget", "value": "bx bxs-widget",
"isInheritable": false, "isInheritable": false,
"position": 30 "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", "format": "markdown",
@ -15756,23 +15756,23 @@
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "s8alTXmpFR61", "value": "MgibgPcfeuGz",
"isInheritable": false, "isInheritable": false,
"position": 40 "position": 40
}, },
{
"type": "relation",
"name": "internalLink",
"value": "s8alTXmpFR61",
"isInheritable": false,
"position": 50
},
{ {
"type": "label", "type": "label",
"name": "shareAlias", "name": "shareAlias",
"value": "widget-basics", "value": "widget-basics",
"isInheritable": false, "isInheritable": false,
"position": 20 "position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "MgibgPcfeuGz",
"isInheritable": false,
"position": 50
} }
], ],
"format": "markdown", "format": "markdown",
@ -15912,19 +15912,19 @@
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "Sg9GrCtyftZf",
"isInheritable": false,
"position": 10
},
{ {
"type": "label", "type": "label",
"name": "shareAlias", "name": "shareAlias",
"value": "css", "value": "css",
"isInheritable": false, "isInheritable": false,
"position": 20 "position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "Sg9GrCtyftZf",
"isInheritable": false,
"position": 30
} }
], ],
"format": "markdown", "format": "markdown",
@ -16347,46 +16347,46 @@
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
{ {
"type": "label", "type": "relation",
"name": "iconClass", "name": "internalLink",
"value": "bx bxl-react", "value": "HcABDtFCkbFN",
"isInheritable": false, "isInheritable": false,
"position": 30 "position": 10
}, },
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "MgibgPcfeuGz", "value": "MgibgPcfeuGz",
"isInheritable": false, "isInheritable": false,
"position": 40 "position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "wy8So3yZZlH9",
"isInheritable": false,
"position": 60
}, },
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "GLks18SNjxmC", "value": "GLks18SNjxmC",
"isInheritable": false, "isInheritable": false,
"position": 70 "position": 30
}, },
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "Bqde6BvPo05g", "value": "Bqde6BvPo05g",
"isInheritable": false, "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", "format": "markdown",
@ -16416,14 +16416,14 @@
"name": "internalLink", "name": "internalLink",
"value": "hA834UaHhSNn", "value": "hA834UaHhSNn",
"isInheritable": false, "isInheritable": false,
"position": 30 "position": 10
}, },
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "HcABDtFCkbFN", "value": "HcABDtFCkbFN",
"isInheritable": false, "isInheritable": false,
"position": 40 "position": 20
}, },
{ {
"type": "label", "type": "label",
@ -16459,14 +16459,14 @@
"name": "internalLink", "name": "internalLink",
"value": "HcABDtFCkbFN", "value": "HcABDtFCkbFN",
"isInheritable": false, "isInheritable": false,
"position": 40 "position": 10
}, },
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "GhurYZjh8e1V", "value": "GhurYZjh8e1V",
"isInheritable": false, "isInheritable": false,
"position": 50 "position": 20
}, },
{ {
"type": "label", "type": "label",
@ -16502,7 +16502,7 @@
"name": "internalLink", "name": "internalLink",
"value": "AlhDUqhENtH7", "value": "AlhDUqhENtH7",
"isInheritable": false, "isInheritable": false,
"position": 30 "position": 10
}, },
{ {
"type": "label", "type": "label",
@ -16533,40 +16533,40 @@
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-component",
"isInheritable": false,
"position": 30
},
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "MgibgPcfeuGz", "value": "MgibgPcfeuGz",
"isInheritable": false, "isInheritable": false,
"position": 40 "position": 10
}, },
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "HcABDtFCkbFN", "value": "HcABDtFCkbFN",
"isInheritable": false, "isInheritable": false,
"position": 50 "position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "i9B4IW7b6V6z",
"isInheritable": false,
"position": 60
}, },
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "6tZeKvSHEUiB", "value": "6tZeKvSHEUiB",
"isInheritable": false, "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", "format": "markdown",
@ -16788,6 +16788,27 @@
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "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", "type": "label",
"name": "iconClass", "name": "iconClass",
@ -16795,33 +16816,12 @@
"isInheritable": false, "isInheritable": false,
"position": 30 "position": 30
}, },
{
"type": "relation",
"name": "internalLink",
"value": "HcABDtFCkbFN",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 50
},
{ {
"type": "label", "type": "label",
"name": "shareAlias", "name": "shareAlias",
"value": "bundles", "value": "bundles",
"isInheritable": false, "isInheritable": false,
"position": 60 "position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "IakOLONlIfGI",
"isInheritable": false,
"position": 70
} }
], ],
"format": "markdown", "format": "markdown",

2
docs/User Guide/User Guide/Advanced Usage/Database/Demo Notes.md vendored
View File

@ -13,7 +13,7 @@ There are some cases in which you may want to restore the original demo notes. F
You can easily restore the demo notes by using Trilium's built-in import feature by importing them: You can easily restore the demo notes by using Trilium's built-in import feature by importing them:
* Download [this .zip archive](https://github.com/TriliumNext/Trilium/raw/develop/db/demo.zip) with the latest version of the demo notes * Download [the .zip archive](https://github.com/TriliumNext/Trilium/raw/refs/heads/main/apps/server/src/assets/db/demo.zip) with the latest version of the demo notes
* Right click on any note in your tree under which you would like the demo notes to be imported * Right click on any note in your tree under which you would like the demo notes to be imported
* Click "Import into note" * Click "Import into note"
* Select the .zip archive to import it * Select the .zip archive to import it

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. 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: As an example, use the following content:
```jsx ```
export default function() { export default function() {
return ( 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. 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() { <pre><code class="language-text-x-trilium-auto">constructor() {
super(); super();
this.contentSized(); this.contentSized();
}
get parentWidget() { return "center-pane" }
doRender() {
this.$widget = $("&lt;span&gt;Center pane&lt;/span&gt;");
}
} }
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_1766526977514_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", parent: "center-pane",
render: () =&gt; &lt;span&gt;Center pane from Preact.&lt;/span&gt; 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. [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: 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). 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+) ## Preact widget (v0.101.0+)
```jsx ```
import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact"; import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
export default defineLauncherWidget({ 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: Instead of:
```jsx ```
api.showMessage("Hello"); api.showMessage("Hello");
``` ```
the JSX version looks like this: the JSX version looks like this:
```jsx ```
import { showMessage } from "trilium:api"; import { showMessage } from "trilium:api";
showMessage("hello"); 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. 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"; import { useState } from "trilium:preact";
const [ myState, setMyState ] = useState("Hi"); 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 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() { export default function() {
return ( 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`: To use these components, simply import them from `trilium:preact`:
```jsx ```
import { ActionButton, Button, LinkButton } from "trilium:preact"; import { ActionButton, Button, LinkButton } from "trilium:preact";
``` ```
and then use them: and then use them:
```jsx ```
export default function MyRenderNote() { export default function MyRenderNote() {
const onClick = () => showMessage("A button was pressed"); 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 # CSS
## Inline styles ## Inline styles
```jsx ```
<div style={{ <div style={{
display: "flex", display: "flex",
height: "53px", height: "53px",