docs(user): mention updates after react improvements

This commit is contained in:
Elian Doran
2025-11-09 22:52:02 +02:00
parent 0ccc350ddf
commit fb91d4fbd4
14 changed files with 183 additions and 91 deletions

View File

@@ -3,20 +3,20 @@
on the&nbsp;<a class="reference-link" href="#root/_help_KSZ04uQ2D1St">Note Types</a>.</p>
<p>For example:</p>
<ul>
<li><a class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes&nbsp;are
<li data-list-item-id="ebc54dbd967545eaa1cf05baaec3301e4"><a class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes&nbsp;are
represented internally as HTML, using the&nbsp;<a class="reference-link"
href="#root/_help_MI26XDLSAlCD">CKEditor</a>&nbsp;representation. Note that due
to the custom plugins, some HTML elements are specific to Trilium only,
for example the admonitions.</li>
<li><a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;notes&nbsp;are
<li data-list-item-id="e9db153626d78283f5b88e6ecf4fb89e8"><a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;notes&nbsp;are
plain text and are represented internally as-is.</li>
<li><a class="reference-link" href="#root/_help_81SGnPGMk7Xc">Geo Map</a>&nbsp;notes
<li data-list-item-id="e34278a9d4b99207971a78bdf122f2ccc"><a class="reference-link" href="#root/_help_81SGnPGMk7Xc">Geo Map</a>&nbsp;notes
contain only minimal information (viewport, zoom) as a JSON.</li>
<li><a class="reference-link" href="#root/_help_grjYqerjn243">Canvas</a>&nbsp;notes
<li data-list-item-id="ec1ce540e6b1fe7dfd86bed6c220aed78"><a class="reference-link" href="#root/_help_grjYqerjn243">Canvas</a>&nbsp;notes
are represented as JSON, with Trilium's own information alongside with&nbsp;
<a
class="reference-link" href="#root/_help_H0mM1lTxF9JI">Excalidraw</a>'s internal JSON representation format.</li>
<li><a class="reference-link" href="#root/_help_gBbsAeiuUxI5">Mind Map</a>&nbsp;notes
<li data-list-item-id="ea9996ff8bef4e6883ddbe82c54eef053"><a class="reference-link" href="#root/_help_gBbsAeiuUxI5">Mind Map</a>&nbsp;notes
are represented as JSON, with the internal format of&nbsp;<a class="reference-link"
href="#root/_help_N4IDkixaDG9C">MindElixir</a>.</li>
</ul>
@@ -46,18 +46,20 @@
<img src="Note source_image.png">
</p>
<p>The source code will be displayed in a new tab.</p>
<p>For some note types, such as text notes, the source code is also formatted
in order to be more easily readable.</p>
<p>For some note types, such as text notes and JSON notes, the source code
is also formatted in order to be more easily readable.</p>
<h2>Modifying the source code</h2>
<p>It is possible to modify the source code of a note directly, however not
via the <em>Note source</em> functionality.&nbsp;</p>
<p>To do so:</p>
<ol>
<li>Change the note type from the real note type (e.g. Canvas, Geo Type) to
<li data-list-item-id="e3ddd3927c9674b21d9366f687d7b04e3">Change the note type from the real note type (e.g. Canvas, Geo Type) to
Code (plain text) or the corresponding format such as JSON or HTML.</li>
<li>Confirm the warning about changing the note type.</li>
<li>The source code will appear, make the necessary modifications.</li>
<li>Change the note type back to the real note type.</li>
<li
data-list-item-id="ee2584db291a66443de4ba8c135edef30">Confirm the warning about changing the note type.</li>
<li data-list-item-id="e04b0273e9698aaca4e82385a1b30391b">The source code will appear, make the necessary modifications.</li>
<li
data-list-item-id="e5ed8795d2e97985154ac9d3141f82792">Change the note type back to the real note type.</li>
</ol>
<aside class="admonition warning">
<p>Depending on the changes made, there is a risk that the note will not

View File

@@ -1,7 +1,12 @@
<figure class="image">
<img src="Canvas_image.png" alt="grafik">
</figure>
<p>Available since Trilium v0.52.</p>
<p>Canvas notes use the Excalidraw library to allow handwritten notes with
mouse, pen or touch on an infinite canvas. It also supports basic diagramming,
text and graphics input.</p>
<p>
<img src="Canvas_image.png" alt="grafik">
</p>
<h2>Interaction</h2>
<ul>
<li data-list-item-id="ea577485b17ccabf0cf7fecff81332245">The note can be togged <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_CoFPLs3dRlXc">read-only</a> from
the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;section.</li>
</ul>

View File

@@ -4,8 +4,9 @@
<p>Since these files come from an external source, it is not possible to
create a <em>File</em> note type directly:</p>
<ul>
<li>Drag a file into the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
<li>Right click a note and select <em>Import into note</em> and point it to
<li data-list-item-id="ee9781f61816a35425aaf6df8200d75eb">Drag a file into the&nbsp;<a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</li>
<li
data-list-item-id="e8b02a22c1cbb3aee700610a130a3945e">Right click a note and select <em>Import into note</em> and point it to
one of the supported files.</li>
</ul>
<h2>Supported file types</h2>
@@ -17,18 +18,20 @@
<p>PDFs can be browsed directly from Trilium.</p>
<p>Interaction:</p>
<ul>
<li>Press the menu icon at the top-left to see a preview (thumbnail) of all
<li data-list-item-id="e0da92c18f393adeeec3c0ea55b1a47ff">Press the menu icon at the top-left to see a preview (thumbnail) of all
the pages, as well as a table of contents (if the PDF has this information).</li>
<li>See or edit the page number at the top.</li>
<li>Adjust the zoom using the buttons at the top or manually editing the value.</li>
<li>Rotate the document if it's in the wrong orientation.</li>
<li>In the contextual menu:
<ul>
<li>View two pages at once (great for books).</li>
<li>Toggle annotations (if present in the document).</li>
<li>View document properties.</li>
</ul>
</li>
<li
data-list-item-id="e0e2fc501819641bd7c8267b6a6f06f0b">See or edit the page number at the top.</li>
<li data-list-item-id="e00a7d34b3b16aafe23479f9ba9f04360">Adjust the zoom using the buttons at the top or manually editing the value.</li>
<li
data-list-item-id="e809b30934c7f9b6be14d0f365b42302f">Rotate the document if it's in the wrong orientation.</li>
<li data-list-item-id="efac3b8035f45619287e5fe5699f3b688">In the contextual menu:
<ul>
<li data-list-item-id="e99e7f891524ea484b6171d91fbb7b14c">View two pages at once (great for books).</li>
<li data-list-item-id="e7131db4a5bc47bff0b9d8f6dfd58c179">Toggle annotations (if present in the document).</li>
<li data-list-item-id="ed667fe2ef3e274720677cecdb9efe68c">View document properties.</li>
</ul>
</li>
</ul>
<h3>Images</h3>
<figure class="image image-style-align-center image_resized" style="width:50%;">
@@ -37,10 +40,16 @@
</figure>
<p>Interaction:</p>
<ul>
<li><em>Copy reference to clipboard</em>, for embedding the image within&nbsp;
<li data-list-item-id="ea81bcb9d4e647ec13c2afb5b7c55bcae"><em>Copy reference to clipboard</em>, for embedding the image within&nbsp;
<a
class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes. See&nbsp;<a class="reference-link" href="#root/_help_0Ofbk1aSuVRu">Image references</a>&nbsp;for
more information.</li>
class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes.
<ul>
<li data-list-item-id="e993c97cf666f4ccb4748ff1707754765">See&nbsp;<a class="reference-link" href="#root/_help_0Ofbk1aSuVRu">Image references</a>&nbsp;for
more information.</li>
<li data-list-item-id="eed2124ae2cf60b26bf83628e5ee7522a">Alternatively, press the corresponding button from the&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
</ul>
</li>
</ul>
<h3>Videos</h3>
<figure class="image image-style-align-center image_resized" style="width:50%;">
@@ -60,7 +69,7 @@
should not impact the general performance of Trilium significantly.</p>
</aside>
<h3>Audio</h3>
<figure class="image image_resized image-style-align-center" style="width:50%;">
<figure class="image image-style-align-center image_resized" style="width:50%;">
<img style="aspect-ratio:850/243;" src="3_File_image.png"
width="850" height="243">
</figure>
@@ -68,11 +77,11 @@
be used to play it.</p>
<p>Interactions:</p>
<ul>
<li>The audio can be played/paused using the dedicated button.</li>
<li>Dragging the mouse across, or clicking the progress bar will seek through
<li data-list-item-id="e6211745ca8937ef119f16f283664bf48">The audio can be played/paused using the dedicated button.</li>
<li data-list-item-id="ed13af1aa09ee7582f3e4ace797a6097e">Dragging the mouse across, or clicking the progress bar will seek through
the song.</li>
<li>The volume can be set.</li>
<li>The playback speed can be adjusted via the contextual menu next to the
<li data-list-item-id="e8257054d4b6985f1f1c7283f262ff18b">The volume can be set.</li>
<li data-list-item-id="e39b948337515ef2b1f0002352613cbf4">The playback speed can be adjusted via the contextual menu next to the
volume.</li>
</ul>
<h3>Text files</h3>
@@ -95,7 +104,7 @@
of characters. To view the full file, consider opening it in an external
application.</p>
<h3>Unknown file types</h3>
<figure class="image image_resized image-style-align-center" style="width:50%;">
<figure class="image image-style-align-center image_resized" style="width:50%;">
<img style="aspect-ratio:532/240;" src="5_File_image.png"
width="532" height="240">
</figure>
@@ -105,33 +114,35 @@
file externally, but there will be no preview of the content.</p>
<h2>Interaction</h2>
<ul>
<li>Regardless of the file type, a series of buttons will be displayed in
<li data-list-item-id="e4aeb7db21b7ac8fd63259706e89ca7fd">Regardless of the file type, a series of buttons will be displayed in
the <em>Image</em> or <em>File</em> tab in the&nbsp;<a class="reference-link"
href="#root/_help_BlN9DFI679QC">Ribbon</a>.
<ul>
<li><em>Download</em>, which will download the file for local use.</li>
<li><em>Open</em>, will will open the file with the system-default application.</li>
<li>Upload new revision to replace the file with a new one.</li>
<li data-list-item-id="e65ff01459c30c17d0554c646c6e6ab48"><em>Download</em>, which will download the file for local use.</li>
<li
data-list-item-id="e1704f81a01f337386a9e2dc3110bf1c3"><em>Open</em>, will will open the file with the system-default application.</li>
<li
data-list-item-id="ebb65a0bb4eb1d4a1a33477034954c937">Upload new revision to replace the file with a new one.</li>
</ul>
</li>
<li>It is <strong>not</strong> possible to change the note type of a <em>File</em> note.</li>
<li>Convert into an <a href="#root/_help_0vhv7lsOLy82">attachment</a> from the <a href="#root/_help_8YBEPzcpUgxw">note menu</a>.</li>
</li>
<li data-list-item-id="e6b49d2a86fa10fc2924b8c0f14f3fc34">It is <strong>not</strong> possible to change the note type of a <em>File</em> note.</li>
<li
data-list-item-id="edf3c57060acd6e7c7aa517263fdd50a8">Convert into an <a href="#root/_help_0vhv7lsOLy82">attachment</a> from the <a href="#root/_help_8YBEPzcpUgxw">note menu</a>.</li>
</ul>
<h2>Relation with other notes</h2>
<ul>
<li>
<li data-list-item-id="ee44c3055d3990412c665cb4b172e4ae6">
<p>Files are also displayed in the&nbsp;<a class="reference-link" href="#root/_help_0ESUbbAxVnoK">Note List</a>&nbsp;based
on their type:</p>
<img class="image_resized" style="aspect-ratio:853/315;width:50%;"
src="6_File_image.png" width="853" height="315">
</li>
<li>
<p>Non-image files can be embedded into text notes as read-only widgets via
the&nbsp;<a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>&nbsp;functionality.</p>
</li>
<li>
<p>Image files can be embedded into text notes like normal images via&nbsp;
<a
class="reference-link" href="#root/_help_0Ofbk1aSuVRu">Image references</a>.</p>
<p>
<img class="image_resized" style="aspect-ratio:853/315;width:50%;" src="6_File_image.png"
width="853" height="315">
</p>
</li>
<li data-list-item-id="e99dcb3c40ac91bddb9f2952a11c45f13">Non-image files can be embedded into text notes as read-only widgets via
the&nbsp;<a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>&nbsp;functionality.</li>
<li
data-list-item-id="eb56e65abfa9b2a22c21d642c89179505">Image files can be embedded into text notes like normal images via&nbsp;
<a
class="reference-link" href="#root/_help_0Ofbk1aSuVRu">Image references</a>.</li>
</ul>

View File

@@ -6,34 +6,42 @@
a hierarchical fashion.</p>
<h2>Terminology</h2>
<ul>
<li>A <strong>node</strong> is a single idea, represented differently based
<li data-list-item-id="ef231f667c0aa218d58542c076014804b">A <strong>node</strong> is a single idea, represented differently based
on depth (filled rounded rectangle for the root note, unfilled rectangles
for sub-ideas, lines only for sub-sub-ideas).</li>
<li>The <strong>root node</strong> is the top-most node from which all other
<li data-list-item-id="e9e7e595cd2313b8437d90b49850c3bd2">The <strong>root node</strong> is the top-most node from which all other
nodes derive, displayed as a filled rectangle. There can only be a single
root node.</li>
</ul>
<h2>Interaction</h2>
<ul>
<li>To create a new node at the same level as the current one, press <kbd>Enter</kbd>,
<li data-list-item-id="e976416578dada0871a4ac45fe8220b93">To create a new node at the same level as the current one, press <kbd>Enter</kbd>,
enter the desired text and then press <kbd>Enter</kbd> once again to confirm.</li>
<li>Similarly, to create a sub-node, press <kbd>Tab</kbd>, enter the desired
<li
data-list-item-id="e6a72f09fecc4764361c01f08b12c703f">Similarly, to create a sub-node, press <kbd>Tab</kbd>, enter the desired
text and then press <kbd>Enter</kbd>.</li>
<li>To create a parent, use <kbd>Ctrl</kbd>+<kbd>Enter</kbd> instead.</li>
<li>To remove a node, press <kbd>Delete</kbd>.</li>
<li>To move a node up or down, press <kbd>Page Up</kbd> or <kbd>Page Down</kbd>.</li>
<li>To adjust the font size, color of the text or background or to add a link,
click on a node and use the floating panel that appears to the right.</li>
<li>To select one or more notes, drag and drop across the map.</li>
<li>Right click the node to bring a contextual menu with options such as creating
new nodes, focusing on a particular notes or creating links between them.</li>
<li>Use the buttons at the top-left to change the positioning of the nodes
relative to the root node (to the left, to the right, or to both sides).</li>
<li>In the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;area:
<ul>
<li>An <a href="#root/_help_0Ofbk1aSuVRu">image reference</a> can be copied, to paste
the mind map in a text note.</li>
<li>The diagram can be exported either as SVG (vectorial) or PNG (raster).</li>
</ul>
</li>
<li data-list-item-id="e86712c87d1b7dcb6f0b13b83943492f9">To create a parent, use <kbd>Ctrl</kbd>+<kbd>Enter</kbd> instead.</li>
<li
data-list-item-id="e95931b33330193642453fe412e5e6f1a">To remove a node, press <kbd>Delete</kbd>.</li>
<li data-list-item-id="eec542db8b8755de32ec3e6dc46de76cc">To move a node up or down, press <kbd>Page Up</kbd> or <kbd>Page Down</kbd>.</li>
<li
data-list-item-id="ebd91fd108c780ba60e781899dc513cc7">To adjust the font size, color of the text or background or to add a link,
click on a node and use the floating panel that appears to the right.</li>
<li
data-list-item-id="efcb1cb579ef883d3c41f869fa16324c4">To select one or more notes, drag and drop across the map.</li>
<li data-list-item-id="e93d1858c91097cbf5a7d1d2dc78bba5a">Right click the node to bring a contextual menu with options such as creating
new nodes, focusing on a particular notes or creating links between them.</li>
<li
data-list-item-id="e9bf53a86f7156c2b9b3f11ee8258060a">Use the buttons at the top-left to change the positioning of the nodes
relative to the root node (to the left, to the right, or to both sides).</li>
<li
data-list-item-id="ead00d267ecc33cbc3d1e0c4b56cf0ad3">In the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;area:
<ul>
<li data-list-item-id="eaf83d9b1557e4b9d8f148d56130c3f59">An <a href="#root/_help_0Ofbk1aSuVRu">image reference</a> can be copied, to paste
the mind map in a text note.</li>
<li data-list-item-id="e79f53e67891bff3d9f3b90c70e6f8267">The diagram can be exported either as SVG (vectorial) or PNG (raster).</li>
<li
data-list-item-id="eae0fd524cd52e4ecb030d99f7cda2114">The note can be togged <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_CoFPLs3dRlXc">read-only</a>.</li>
</ul>
</li>
</ul>

View File

@@ -7,11 +7,13 @@
via an attribute.</p>
<h2>Creating a render note</h2>
<ol>
<li>Create a&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
<li data-list-item-id="e88e87dc5779eb57b5f18c85d429e0393">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>
<li
data-list-item-id="e081e7e4884d395061da0960a9ee0798f">Create a&nbsp;<a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
<li
data-list-item-id="ee9885f6c4873435499221a6caca164c8">Assign the <code>renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
point at the previously created code note.</li>
</ol>
<h2>Dynamic content</h2>
<p>A static HTML is generally not enough for&nbsp;<a class="reference-link"
@@ -33,8 +35,16 @@ $dateEl.text(new Date());</code></pre>
<br>The current date &amp; time is Sun Apr 06 2025 15:26:29 GMT+0300 (Eastern
European Summer Time)</p>
</blockquote>
<h2>Refreshing the note</h2>
<p>It's possible to refresh the note via:</p>
<ul>
<li data-list-item-id="ee0445442bc9b4c9aea87ecf19ecbe877">The corresponding button in&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
<li
data-list-item-id="e01754dd2d94ca490f59da950ad964c3d">The “Render active note” <a href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
assigned by default).</li>
</ul>
<h2>Examples</h2>
<ul>
<li><a class="reference-link" href="#root/_help_R7abl2fc6Mxi">Weight Tracker</a>&nbsp;which
<li data-list-item-id="e69f0b3debc49e119b0a0bd54f18fc974"><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>