diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html index 62c6d7dfa..c9a2f2230 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Themes/Icon Packs.html @@ -3,7 +3,7 @@ scratch (see below) or imported from a ZIP file from a third-party developer.

Import/exports

When using Preact with JSX, there is a special syntax which provides ES-like - imports. This import 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. 

+ imports. This import 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. 

API imports

Instead of:

api.showMessage("Hello");

the JSX version looks like this:

import { showMessage } from "trilium:api";
@@ -44,15 +43,13 @@ const [ myState, setMyState ] = useState("Hi");
); }

Import/export are not required

-

These imports are syntactic sugar meant to replace the usage for the - apiglobal object (see Script API). 

+

These imports are syntactic sugar meant to replace the usage for the api global + object (see Script API). 

Under the hood

Unlike JavaScript, JSX requires pre-processing to turn it into JavaScript diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html index 209519800..7993c3517 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.html @@ -7,7 +7,7 @@ also available to Custom Widgets and  Render Note.

-

To use these components, simply import them from trilium:preact:

import { ActionButton, Button, LinkButton } from "trilium:preact";
+

To use these components, simply import them from trilium:preact:

import { ActionButton, Button, LinkButton } from "trilium:preact";

and then use them:

export default function MyRenderNote() {
     const onClick = () => showMessage("A button was pressed");
     
@@ -33,12 +33,12 @@
   to custom widgets and JSX render notes.

 
To use it, simply:

 
    
-  
  1. Create a render note.
    2. 
-  
  2. Create a child code note of JSX type with the content of this file: 
+  
  3. Create a render note.
    4. 
+  
  4. Create a child code note of JSX type with the content of this file: 
     Widget showcase
   
    5. 
-  
  5. Set the ~renderNote relation of the parent
-    note to the child note.
    6. 
-  
  6. Refresh the render note to see the results.
    7. 
+  
  7. Set the ~renderNote relation of the parent note to the child
+    note.
    8. 
+  
  8. Refresh the render note to see the results.
    9. 
 

\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html
index a148c29f2..6f623f07b 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.html	
@@ -9,4 +9,4 @@
 
Custom CSS file

 
Simply create a Custom app-wide CSS.
   Make sure the class names are unique enough to not intersect with other
-  UI elements, consider adding a prefix (e.g. x-mywidget-).

\ No newline at end of file
+  UI elements, consider adding a prefix (e.g. x-mywidget-).

\ No newline at end of file
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html
index 08c797737..15dc75646 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html	
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.html	
@@ -6,21 +6,21 @@
 
Here's an example child hierarchy using Render Note: