mirror of
https://github.com/zadam/trilium.git
synced 2025-12-24 00:04:23 +01:00
docs(user): missing language tags for JSX code blocks
This commit is contained in:
Elian Doran
parent
963fcd615a
commit
e3595a43c2
45
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html
generated
vendored
45
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html
generated
vendored
@ -7,13 +7,10 @@
|
||||
via an attribute.</p>
|
||||
<h2>Creating a render note</h2>
|
||||
<ol>
|
||||
<li data-list-item-id="ea3e5f0aa9f5a0b78d8574a1331430d63">Create a <a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a> note
|
||||
with the HTML language, with what needs to be displayed (for example
|
||||
<code
|
||||
spellcheck="false"><p>Hello world.</p></code>).</li>
|
||||
<li data-list-item-id="ec8ebbd0ae70750a2bb7facc6b9f9eb2f">Create a <a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
|
||||
<li
|
||||
data-list-item-id="ebdb13d53bc7deefb19c270d1fc1bbde4">Assign the <code spellcheck="false">renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
|
||||
<li>Create a <a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a> note
|
||||
with the HTML language, with what needs to be displayed (for example <code><p>Hello world.</p></code>).</li>
|
||||
<li>Create a <a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
|
||||
<li>Assign the <code>renderNote</code> <a href="#root/_help_zEY4DaJG4YT5">relation</a> to
|
||||
point at the previously created code note.</li>
|
||||
</ol>
|
||||
<h2>Legacy scripting using jQuery</h2>
|
||||
@ -22,14 +19,14 @@
|
||||
change parts of the note using JavaScript.</p>
|
||||
<p>For a simple example, we are going to create a render note that displays
|
||||
the current date in a field.</p>
|
||||
<p>To do so, first create an HTML code note with the following content:</p><pre><code class="language-text-html"><h1>Current date & time</h1>
|
||||
<p>To do so, first create an HTML code note with the following content:</p><pre><code class="language-text-x-trilium-auto"><h1>Current date & time</h1>
|
||||
The current date & time is <span class="date"></span></code></pre>
|
||||
<p>Now we need to add the script. Create another <a class="reference-link"
|
||||
href="#root/_help_6f9hih2hXXZk">Code</a>, but this time of JavaScript (frontend)
|
||||
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-application-javascript-env-frontend">const $dateEl = api.$container.find(".date");
|
||||
note created previously; with the following content:</p><pre><code class="language-application-javascript-env-backend">const $dateEl = api.$container.find(".date");
|
||||
$dateEl.text(new Date());</code></pre>
|
||||
<p>Now create a render note at any place and set its <code spellcheck="false">~renderNote</code> relation
|
||||
<p>Now create a render note at any place and set its <code>~renderNote</code> relation
|
||||
to point to the HTML note. When the render note is accessed it will display:</p>
|
||||
<blockquote>
|
||||
<p><strong>Current date & time</strong>
|
||||
@ -42,33 +39,37 @@ $dateEl.text(new Date());</code></pre>
|
||||
need to provide a HTML anymore.</p>
|
||||
<p>Here are the steps to creating a simple render note:</p>
|
||||
<ol>
|
||||
<li data-list-item-id="e1630e6c3c8940710c7d3ee5f64a9c1c3">Create a note of type <a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</li>
|
||||
<li
|
||||
data-list-item-id="ef610f454158af5d1b112034d97f7e842">
|
||||
<li>
|
||||
<p>Create a note of type <a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Create a child <a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a> note
|
||||
with JSX as the language.
|
||||
<br>As an example, use the following content:</p><pre><code class="language-text-jsx">export default function() {
|
||||
<br>As an example, use the following content:</p><pre><code class="language-text-x-trilium-auto">export default function() {
|
||||
return (
|
||||
<>
|
||||
<p>Hello world.</p>
|
||||
</>
|
||||
);
|
||||
}</code></pre>
|
||||
</li>
|
||||
<li data-list-item-id="ef315e926167ce86b2e52f9d9fe2e2dba">In the parent render note, define a <code spellcheck="false">~renderNote</code> relation
|
||||
pointing to the newly created child.</li>
|
||||
<li data-list-item-id="ed6c7db0c529f8dfa6dee925b20e1970d">Refresh the render note and it should display a “Hello world” message.</li>
|
||||
</li>
|
||||
<li>
|
||||
<p>In the parent render note, define a <code>~renderNote</code> relation pointing
|
||||
to the newly created child.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Refresh the render note and it should display a “Hello world” message.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h2>Refreshing the note</h2>
|
||||
<p>It's possible to refresh the note via:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e8dddb297a57da1d6ae372507e72f77ee">The corresponding button in <a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
|
||||
<li
|
||||
data-list-item-id="e5dfe82fbbb517c2236bf69b7a175ba1d">The “Render active note” <a href="#root/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
|
||||
<li>The corresponding button in <a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>.</li>
|
||||
<li>The “Render active note” <a href="#root/_help_A9Oc6YKKc65v">keyboard shortcut</a> (not
|
||||
assigned by default).</li>
|
||||
</ul>
|
||||
<h2>Examples</h2>
|
||||
<ul>
|
||||
<li data-list-item-id="ea3d85714876d21d579ac9330f7ff9ea6"><a class="reference-link" href="#root/_help_R7abl2fc6Mxi">Weight Tracker</a> which
|
||||
<li><a class="reference-link" href="#root/_help_R7abl2fc6Mxi">Weight Tracker</a> which
|
||||
is present in the <a class="reference-link" href="#root/_help_6tZeKvSHEUiB">Demo Notes</a>.</li>
|
||||
</ul>
|
||||
@ -4,31 +4,29 @@
|
||||
<h2>Preact with JSX vs. vanilla jQuery</h2>
|
||||
<p>In older versions of Trilium, custom widgets were exclusively written
|
||||
in a combination of jQuery with Trilium's internal widget architecture
|
||||
(e.g., <code spellcheck="false">BasicWidget</code>, <code spellcheck="false">NoteContextAwareWidget</code>).</p>
|
||||
(e.g., <code>BasicWidget</code>, <code>NoteContextAwareWidget</code>).</p>
|
||||
<p>Starting with v0.101.0, custom widgets can also be written in JSX using
|
||||
the <a class="reference-link" href="#root/_help_KLsqhjaqh1QW">Preact</a> framework.
|
||||
Both legacy and Preact widgets have the same capabilities, with a single
|
||||
difference:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="eb15aa9f439c6bdb1c8e88a5319a8955f">Preact widgets are content-sized by default whereas legacy widgets need
|
||||
<code
|
||||
spellcheck="false">this.contentSized()</code>applied in the constructor. For more information,
|
||||
see the corresponding section in <a class="reference-link" href="#root/_help_gMkgcLJ6jBkg">Troubleshooting</a>.</li>
|
||||
<li>Preact widgets are content-sized by default whereas legacy widgets need <code>this.contentSized()</code> applied
|
||||
in the constructor. For more information, see the corresponding section
|
||||
in <a class="reference-link" href="#root/_help_gMkgcLJ6jBkg">Troubleshooting</a>.</li>
|
||||
</ul>
|
||||
<p>Wherever possible, widget examples will be both in the legacy and Preact
|
||||
format.</p>
|
||||
<h2>Creating a custom widget</h2>
|
||||
<ol>
|
||||
<li data-list-item-id="ecec088aa52d1e12a9f32d37574ee5249">Create a <a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a> note.</li>
|
||||
<li
|
||||
data-list-item-id="e409320f56952473e762318b10e553b66">Set the language to:
|
||||
<li>Create a <a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a> note.</li>
|
||||
<li>Set the language to:
|
||||
<ol>
|
||||
<li data-list-item-id="e5817ea91f2dc0d56ceb0066c20c33f43">JavaScript (frontend) for legacy widgets using jQuery.</li>
|
||||
<li data-list-item-id="e59157f3af10c4e325b925e49f6abc649">JSX for Preact widgets. You might need to go to Options → Code to enable
|
||||
<li>JavaScript (frontend) for legacy widgets using jQuery.</li>
|
||||
<li>JSX for Preact widgets. You might need to go to Options → Code to enable
|
||||
the language first.</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li data-list-item-id="eccbc8c98b9fc01d638c0b76273d5fff5">Apply the <code spellcheck="false">#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a>.</li>
|
||||
</li>
|
||||
<li>Apply the <code>#widget</code> <a href="#root/_help_HI6GBBIduIgv">label</a>.</li>
|
||||
</ol>
|
||||
<h2>Getting started with a simple example</h2>
|
||||
<p>Let's start by creating a widget that shows a message near the content
|
||||
@ -62,88 +60,80 @@ export default defineWidget({
|
||||
should appear underneath the content area.</p>
|
||||
<h2>Widget location (parent widget)</h2>
|
||||
<p>A widget can be placed in one of the following sections of the applications:</p>
|
||||
<figure
|
||||
class="table">
|
||||
<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 <a class="reference-link"
|
||||
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</td>
|
||||
<td>Same as above, with only a different <code spellcheck="false">parentWidget</code>.</td>
|
||||
<td>None.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code spellcheck="false">center-pane</code>
|
||||
</th>
|
||||
<td>In the content area. If a split is open, the widget will span all of the
|
||||
splits.</td>
|
||||
<td>See example above.</td>
|
||||
<td>None.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code spellcheck="false">note-detail-pane</code>
|
||||
</th>
|
||||
<td>
|
||||
<p>In the content area, inside the note detail area. If a split is open,
|
||||
the widget will be contained inside the split.</p>
|
||||
<p>This is ideal if the widget is note-specific.</p>
|
||||
</td>
|
||||
<td><a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li data-list-item-id="ec06332efcc3039721606c052f0d913fa">The widget must export a <code spellcheck="false">class</code> and not an
|
||||
instance of the class (e.g. <code spellcheck="false">no new</code>) because
|
||||
it needs to be multiplied for each note, so that splits work correctly.</li>
|
||||
<li
|
||||
data-list-item-id="e8da690a2a8df148f6b5fc04ba1611688">Since the <code spellcheck="false">class</code> is exported instead of an
|
||||
instance, the <code spellcheck="false">parentWidget</code> getter must be
|
||||
<code
|
||||
spellcheck="false">static</code>, otherwise the widget is ignored.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code spellcheck="false">right-pane</code>
|
||||
</th>
|
||||
<td>In the <a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>,
|
||||
as a dedicated section.</td>
|
||||
<td><a class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li data-list-item-id="efe008d361e224f422582552648e1afe7">Although not mandatory, it's best to use a <code spellcheck="false">RightPanelWidget</code> instead
|
||||
of a <code spellcheck="false">BasicWidget</code> or a <code spellcheck="false">NoteContextAwareWidget</code>.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<table
|
||||
class="ck-table-resized">
|
||||
<colgroup>
|
||||
<col style="width:15.59%;">
|
||||
<col style="width:30.42%;">
|
||||
<col style="width:16.68%;">
|
||||
<col style="width:37.31%;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Value for <code>parentWidget</code>
|
||||
</th>
|
||||
<th>Description</th>
|
||||
<th>Sample widget</th>
|
||||
<th>Special requirements</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>left-pane</code>
|
||||
</th>
|
||||
<td>Appears within the same pane that holds the <a class="reference-link"
|
||||
href="#root/_help_oPVyFC7WL2Lp">Note Tree</a>.</td>
|
||||
<td>Same as above, with only a different <code>parentWidget</code>.</td>
|
||||
<td>None.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>center-pane</code>
|
||||
</th>
|
||||
<td>In the content area. If a split is open, the widget will span all of the
|
||||
splits.</td>
|
||||
<td>See example above.</td>
|
||||
<td>None.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>note-detail-pane</code>
|
||||
</th>
|
||||
<td>
|
||||
<p>In the content area, inside the note detail area. If a split is open,
|
||||
the widget will be contained inside the split.</p>
|
||||
<p>This is ideal if the widget is note-specific.</p>
|
||||
</td>
|
||||
<td><a class="reference-link" href="#root/_help_GhurYZjh8e1V">Note context aware widget</a>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li data-list-item-id="ec06332efcc3039721606c052f0d913fa">The widget must export a <code>class</code> and not an instance of the class
|
||||
(e.g. <code>no new</code>) because it needs to be multiplied for each note,
|
||||
so that splits work correctly.</li>
|
||||
<li data-list-item-id="e8da690a2a8df148f6b5fc04ba1611688">Since the <code>class</code> is exported instead of an instance, the <code>parentWidget</code> getter
|
||||
must be <code>static</code>, otherwise the widget is ignored.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>right-pane</code>
|
||||
</th>
|
||||
<td>In the <a class="reference-link" href="#root/_help_RnaPdbciOfeq">Right Sidebar</a>,
|
||||
as a dedicated section.</td>
|
||||
<td><a class="reference-link" href="#root/_help_M8IppdwVHSjG">Right pane widget</a>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li data-list-item-id="efe008d361e224f422582552648e1afe7">Although not mandatory, it's best to use a <code>RightPanelWidget</code> instead
|
||||
of a <code>BasicWidget</code> or a <code>NoteContextAwareWidget</code>.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<p>To position the widget somewhere else, just change the value passed to
|
||||
<code
|
||||
spellcheck="false">get parentWidget()</code>for legacy widgets or the <code spellcheck="false">parent</code> field
|
||||
for Preact. Do note that some positions such as <code spellcheck="false">note-detail-pane</code> and
|
||||
<code
|
||||
spellcheck="false">right-pane</code>have special requirements that need to be accounted for
|
||||
(see the table above).</p>
|
||||
<p>To position the widget somewhere else, just change the value passed to <code>get parentWidget()</code> for
|
||||
legacy widgets or the <code>parent</code> field for Preact. Do note that
|
||||
some positions such as <code>note-detail-pane</code> and <code>right-pane</code> have
|
||||
special requirements that need to be accounted for (see the table above).</p>
|
||||
<h2>Launch bar widgets</h2>
|
||||
<p>Launch bar widgets are similar to <em>Custom widgets</em> but are specific
|
||||
to the <a class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>.
|
||||
|
||||
@ -30,7 +30,7 @@ class NoteTitleWidget extends api.NoteContextAwareWidget {
|
||||
}
|
||||
|
||||
module.exports = new NoteTitleWidget();</code></pre>
|
||||
<h2>Preact widget (v0.101.0+)</h2><pre><code class="language-text-x-trilium-auto">import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
|
||||
<h2>Preact widget (v0.101.0+)</h2><pre><code class="language-text-jsx">import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
|
||||
|
||||
export default defineLauncherWidget({
|
||||
render: () => {
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
support for JSX.</p>
|
||||
<p>Preact can be used for:</p>
|
||||
<ul>
|
||||
<li><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>, where
|
||||
<li data-list-item-id="e5c224943359315528b8eb20e0e16bf02"><a class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>, where
|
||||
a JSX code note is used instead of a HTML one.</li>
|
||||
<li><a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>,
|
||||
<li data-list-item-id="eccf375685d8f35e66c9e62619f013b60"><a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a>,
|
||||
where JSX can be used to replace the old, jQuery-based mechanism.</li>
|
||||
</ul>
|
||||
<p>To get started, the first step is to enable JSX in the list of Code languages.
|
||||
@ -20,22 +20,23 @@
|
||||
</aside>
|
||||
<h2>Import/exports</h2>
|
||||
<p>When using Preact with JSX, there is a special syntax which provides ES-like
|
||||
imports. This <code>import</code> syntax makes way for a more intuitive that
|
||||
doesn't make use of global objects and paves the way for better auto-completion
|
||||
support that might be introduced in the future. </p>
|
||||
imports. This <code spellcheck="false">import</code> syntax makes way for
|
||||
a more intuitive that doesn't make use of global objects and paves the
|
||||
way for better auto-completion support that might be introduced in the
|
||||
future. </p>
|
||||
<h3>API imports</h3>
|
||||
<p>Instead of:</p><pre><code class="language-text-x-trilium-auto">api.showMessage("Hello");</code></pre>
|
||||
<p>the JSX version looks like this:</p><pre><code class="language-text-x-trilium-auto">import { showMessage } from "trilium:api";
|
||||
<p>Instead of:</p><pre><code class="language-text-jsx">api.showMessage("Hello");</code></pre>
|
||||
<p>the JSX version looks like this:</p><pre><code class="language-text-jsx">import { showMessage } from "trilium:api";
|
||||
showMessage("hello");</code></pre>
|
||||
<h3>Preact API imports (hooks, components)</h3>
|
||||
<p>There's a new <a class="reference-link" href="#root/_help_GLks18SNjxmC">Script API</a> dedicated
|
||||
to Preact, which provides shared components that are also used by Trilium
|
||||
internally as well as hooks, for example.</p><pre><code class="language-text-x-trilium-auto">import { useState } from "trilium:preact";
|
||||
internally as well as hooks, for example.</p><pre><code class="language-text-jsx">import { useState } from "trilium:preact";
|
||||
const [ myState, setMyState ] = useState("Hi");</code></pre>
|
||||
<h3>Exporting</h3>
|
||||
<p>JSX notes can export a component for use in <a class="reference-link"
|
||||
href="#root/_help_HcABDtFCkbFN">Render Note</a> or for <a class="reference-link"
|
||||
href="#root/_help_Bqde6BvPo05g">Component libraries</a>: </p><pre><code class="language-text-x-trilium-auto">export default function() {
|
||||
href="#root/_help_Bqde6BvPo05g">Component libraries</a>: </p><pre><code class="language-text-jsx">export default function() {
|
||||
return (
|
||||
<>
|
||||
<p>Hello world.</p>
|
||||
@ -43,13 +44,15 @@ const [ myState, setMyState ] = useState("Hi");</code></pre>
|
||||
);
|
||||
}</code></pre>
|
||||
<h3>Import/export are not required</h3>
|
||||
<p>These imports are syntactic sugar meant to replace the usage for the <code>api</code> global
|
||||
object (see <a class="reference-link" href="#root/_help_GLks18SNjxmC">Script API</a>). </p>
|
||||
<p>These imports are syntactic sugar meant to replace the usage for the
|
||||
<code
|
||||
spellcheck="false">api</code>global object (see <a class="reference-link" href="#root/_help_GLks18SNjxmC">Script API</a>). </p>
|
||||
<aside
|
||||
class="admonition note">
|
||||
<p>The <code>import</code> and <code>export</code> syntax work only for JSX notes.
|
||||
Standard/jQuery code notes still need to use the <code>api</code> global
|
||||
and <code>module.exports</code>.</p>
|
||||
<p>The <code spellcheck="false">import</code> and <code spellcheck="false">export</code> syntax
|
||||
work only for JSX notes. Standard/jQuery code notes still need to use the
|
||||
<code
|
||||
spellcheck="false">api</code>global and <code spellcheck="false">module.exports</code>.</p>
|
||||
</aside>
|
||||
<h2>Under the hood</h2>
|
||||
<p>Unlike JavaScript, JSX requires pre-processing to turn it into JavaScript
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
also available to <a class="reference-link" href="#root/_help_MgibgPcfeuGz">Custom Widgets</a> and
|
||||
<a
|
||||
class="reference-link" href="#root/_help_HcABDtFCkbFN">Render Note</a>.</p>
|
||||
<p>To use these components, simply import them from <code>trilium:preact</code>:</p><pre><code class="language-text-x-trilium-auto">import { ActionButton, Button, LinkButton } from "trilium:preact";</code></pre>
|
||||
<p>and then use them:</p><pre><code class="language-text-x-trilium-auto">export default function MyRenderNote() {
|
||||
<p>To use these components, simply import them from <code spellcheck="false">trilium:preact</code>:</p><pre><code class="language-text-jsx">import { ActionButton, Button, LinkButton } from "trilium:preact";</code></pre>
|
||||
<p>and then use them:</p><pre><code class="language-text-jsx">export default function MyRenderNote() {
|
||||
const onClick = () => showMessage("A button was pressed");
|
||||
|
||||
return (
|
||||
@ -33,12 +33,12 @@
|
||||
to custom widgets and JSX render notes.</p>
|
||||
<p>To use it, simply:</p>
|
||||
<ol>
|
||||
<li>Create a render note.</li>
|
||||
<li>Create a child code note of JSX type with the content of this file:
|
||||
<li data-list-item-id="e201c26633c3655e16c1408da3d277352">Create a render note.</li>
|
||||
<li data-list-item-id="e45bace7ccf33bec8fbe7103e28e21c7f">Create a child code note of JSX type with the content of this file:
|
||||
<a
|
||||
class="reference-link" href="#root/_help_i9B4IW7b6V6z">Widget showcase</a>
|
||||
</li>
|
||||
<li>Set the <code>~renderNote</code> relation of the parent note to the child
|
||||
note.</li>
|
||||
<li>Refresh the render note to see the results.</li>
|
||||
<li data-list-item-id="e35635c3e08829316c6a1b68b80ff8ebd">Set the <code spellcheck="false">~renderNote</code> relation of the parent
|
||||
note to the child note.</li>
|
||||
<li data-list-item-id="edd02eaa6bb298854826ae5c7cd2d32d3">Refresh the render note to see the results.</li>
|
||||
</ol>
|
||||
@ -1,4 +1,4 @@
|
||||
<h2>Inline styles</h2><pre><code class="language-text-x-trilium-auto"><div style={{
|
||||
<h2>Inline styles</h2><pre><code class="language-text-jsx"><div style={{
|
||||
display: "flex",
|
||||
height: "53px",
|
||||
width: "fit-content",
|
||||
@ -9,4 +9,4 @@
|
||||
<h2>Custom CSS file</h2>
|
||||
<p>Simply create a <a class="reference-link" href="#root/_help_AlhDUqhENtH7">Custom app-wide CSS</a>.
|
||||
Make sure the class names are unique enough to not intersect with other
|
||||
UI elements, consider adding a prefix (e.g. <code>x-mywidget-</code>).</p>
|
||||
UI elements, consider adding a prefix (e.g. <code spellcheck="false">x-mywidget-</code>).</p>
|
||||
@ -1,5 +1,5 @@
|
||||
# Documentation
|
||||
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/ipLcovdjZxoX/Documentation_image.png" width="205" height="162">
|
||||
There are multiple types of documentation for Trilium:<img class="image-style-align-right" src="api/images/LZ93RWFQwIO3/Documentation_image.png" width="205" height="162">
|
||||
|
||||
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing <kbd>F1</kbd>.
|
||||
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
|
||||
|
||||
2
docs/User Guide/User Guide.md
vendored
2
docs/User Guide/User Guide.md
vendored
@ -1,5 +1,5 @@
|
||||
# User Guide
|
||||
cTrilium is an open-source solution for note-taking and organizing a personal knowledge base. Use it locally on your desktop, or sync it with your self-hosted server to keep your notes everywhere you go.
|
||||
Trilium is an open-source solution for note-taking and organizing a personal knowledge base. Use it locally on your desktop, or sync it with your self-hosted server to keep your notes everywhere you go.
|
||||
|
||||
> [!TIP]
|
||||
> The same documentation can be accessed locally from within the Trilium Notes application by pressing <kbd>F1</kbd>.
|
||||
|
||||
@ -17,7 +17,7 @@ For a simple example, we are going to create a render note that displays the cur
|
||||
|
||||
To do so, first create an HTML code note with the following content:
|
||||
|
||||
```html
|
||||
```
|
||||
<h1>Current date & time</h1>
|
||||
The current date & time is <span class="date"></span>
|
||||
```
|
||||
@ -44,7 +44,7 @@ Here are the steps to creating a simple render note:
|
||||
2. Create a child <a class="reference-link" href="Code.md">Code</a> note with JSX as the language.
|
||||
As an example, use the following content:
|
||||
|
||||
```jsx
|
||||
```
|
||||
export default function() {
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -63,7 +63,7 @@ export default defineWidget({
|
||||
|
||||
A widget can be placed in one of the following sections of the applications:
|
||||
|
||||
<table class="ck-table-resized"><colgroup><col style="width:15.59%;"><col style="width:30.42%;"><col style="width:16.68%;"><col style="width:37.31%;"></colgroup><thead><tr><th>Value for <code spellcheck="false">parentWidget</code></th><th>Description</th><th>Sample widget</th><th>Special requirements</th></tr></thead><tbody><tr><th><code spellcheck="false">left-pane</code></th><td>Appears within the same pane that holds the <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 <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 <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 <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).
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@ module.exports = new NoteTitleWidget();
|
||||
|
||||
## Preact widget (v0.101.0+)
|
||||
|
||||
```
|
||||
```jsx
|
||||
import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
|
||||
|
||||
export default defineLauncherWidget({
|
||||
|
||||
@ -19,13 +19,13 @@ When using Preact with JSX, there is a special syntax which provides ES-like imp
|
||||
|
||||
Instead of:
|
||||
|
||||
```
|
||||
```jsx
|
||||
api.showMessage("Hello");
|
||||
```
|
||||
|
||||
the JSX version looks like this:
|
||||
|
||||
```
|
||||
```jsx
|
||||
import { showMessage } from "trilium:api";
|
||||
showMessage("hello");
|
||||
```
|
||||
@ -34,7 +34,7 @@ showMessage("hello");
|
||||
|
||||
There's a new <a class="reference-link" href="../Script%20API.md">Script API</a> dedicated to Preact, which provides shared components that are also used by Trilium internally as well as hooks, for example.
|
||||
|
||||
```
|
||||
```jsx
|
||||
import { useState } from "trilium:preact";
|
||||
const [ myState, setMyState ] = useState("Hi");
|
||||
```
|
||||
@ -43,7 +43,7 @@ const [ myState, setMyState ] = useState("Hi");
|
||||
|
||||
JSX notes can export a component for use in <a class="reference-link" href="../../Note%20Types/Render%20Note.md">Render Note</a> or for <a class="reference-link" href="Preact/Component%20libraries.md">Component libraries</a>:
|
||||
|
||||
```
|
||||
```jsx
|
||||
export default function() {
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -5,13 +5,13 @@ Trilium comes with its own set of Preact components, some of which are also avai
|
||||
|
||||
To use these components, simply import them from `trilium:preact`:
|
||||
|
||||
```
|
||||
```jsx
|
||||
import { ActionButton, Button, LinkButton } from "trilium:preact";
|
||||
```
|
||||
|
||||
and then use them:
|
||||
|
||||
```
|
||||
```jsx
|
||||
export default function MyRenderNote() {
|
||||
const onClick = () => showMessage("A button was pressed");
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# CSS
|
||||
## Inline styles
|
||||
|
||||
```
|
||||
```jsx
|
||||
<div style={{
|
||||
display: "flex",
|
||||
height: "53px",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user