feat(docs): document most features of text notes

docs/Release Notes/Release Notes/v0.92.1-beta.md

@@ -14,6 +14,7 @@
 *   When rendering a File note that contains text, display only a fragment of the text in order to improve UI responsiveness.
 *   [Treat .mdx files as markdown](https://github.com/TriliumNext/Notes/issues/1236)
 *   Calendar view
+    
     *   Customizable calendar entries by @rom1dep
     *   Calendar is now displayed in full height.
     *   Option to hide the weekends.
@@ -27,6 +28,7 @@
     *   Friendly numbers note revision by @pano9000
 *   Share: [Allow redirecting / to `#shareRoot` if not authenticated](https://github.com/TriliumNext/Notes/pull/1207) by @maphew
 *   In-app-help:
+    
     *   Remove any help notes that are no longer in use.
     *   Restore the icon of help notes.
 *   [Markdown headings are now exported using ATX syntax (`#`) instead of the setext (`------`)](https://github.com/TriliumNext/Notes/issues/1251)

docs/Release Notes/Release Notes/v0.92.4.md

@@ -149,6 +149,7 @@
 *   When rendering a File note that contains text, display only a fragment of the text in order to improve UI responsiveness.
 *   [Treat .mdx files as markdown](https://github.com/TriliumNext/Notes/issues/1236)
 *   Calendar view
+    
     *   Customizable calendar entries by @rom1dep
     *   Calendar is now displayed in full height.
     *   Option to hide the weekends.
@@ -162,6 +163,7 @@
     *   Friendly numbers note revision by @pano9000
 *   Share: [Allow redirecting / to `#shareRoot` if not authenticated](https://github.com/TriliumNext/Notes/pull/1207) by @maphew
 *   In-app-help:
+    
     *   Remove any help notes that are no longer in use.
     *   Restore the icon of help notes.
 *   [Markdown headings are now exported using ATX syntax (`#`) instead of the setext (`------`)](https://github.com/TriliumNext/Notes/issues/1251)

docs/Release Notes/Release Notes/v0.92.8-beta.md

@@ -18,6 +18,10 @@
 
 *   …
 
+## 📖 Documentation
+
+*   Described almost all of the features of text notes, including a reference of keyboard shortcuts.
+
 ## 🛠️ Technical updates
 
 *   upgrade to express 5.1.0 by @pano9000

docs/User Guide/User Guide/Advanced Usage/Technologies used/CKEditor.md

@@ -26,9 +26,8 @@ Trilium makes use of such features:
 
 Apart from that, Trilium also has its own set of specific plugins such as:
 
-*   Cut to note
-*   Include note
+*   <a class="reference-link" href="../../Note%20Types/Text/Cut%20to%20subnote.md">Cut to subnote</a>
+*   <a class="reference-link" href="../../Note%20Types/Text/Include%20Note.md">Include Note</a>
 *   Mentions, for linking pages.
-*   Markdown import.
-*   Reference links.
-*   etc.
+*   <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/Import%20%26%20Export/Markdown.md">Markdown</a>
+*   [Reference links](../../Note%20Types/Text/Links.md)

docs/User Guide/User Guide/Basic Concepts and Features/Import & Export/Markdown.md

@@ -45,6 +45,6 @@ If you want to export protected notes, enter a protected session first! This wil
 *   [GitHub-Flavored Markdown](https://github.github.com/gfm/) is the main syntax that Trilium is following.
 *   Images are supported. When exporting, images are usually kept in the basic Markdown syntax but will use the HTML syntax if the image has a custom width. Figures are always embedded as HTML.
 *   Tables are supported with the Markdown syntax. If the table is too complex or contains elements that would render as HTML, the table is also rendered as HTML.
-*   <a class="reference-link" href="../../Note%20Types/Text/Admonitions.md">Admonitions</a> are supported using GitHub's format.
+*   <a class="reference-link" href="../../Note%20Types/Text/Block%20quotes%20%26%20admonitions.md">Admonitions</a> are supported using GitHub's format.
 *   Links are supported. “Reference links” (internal links that mirror a note's title and display its icon) are embedded as HTML in order to preserve the information on import.
 *   Math equations are supported using `$` and `$$` syntaxes.

docs/User Guide/User Guide/Basic Concepts and Features/Keyboard Shortcuts.md

@@ -49,8 +49,7 @@ Only in desktop (electron build):
 
 ## Editing notes
 
-Trilium uses CKEditor 5 for the [text notes](../Note%20Types/Text.md) and CodeMirror 5 for [code notes](../Note%20Types/Code.md). Check the documentation of these projects to see all their built-in keyboard shortcuts.
-
+*   For <a class="reference-link" href="../Note%20Types/Text.md">Text</a> notes, refer to <a class="reference-link" href="../Note%20Types/Text/Keyboard%20shortcuts.md">Keyboard shortcuts</a> and <a class="reference-link" href="../Note%20Types/Text/Markdown-like%20formatting.md">Markdown-like formatting</a>.
 *   <kbd>Alt</kbd>\-<kbd>F10</kbd> - bring up inline formatting toolbar (arrow keys <kbd><span>←</span></kbd>,<kbd><span>→</span></kbd> to navigate, <kbd>Enter</kbd> to apply)
 *   <kbd>Alt</kbd>\-<kbd>F10</kbd> - again to bring up block formatting toolbar
 *   <kbd>Enter</kbd> in tree pane switches from tree pane into note title. Enter from note title switches focus to text editor. <kbd>Ctrl</kbd>+<kbd>.</kbd> switches back from editor to tree pane.

docs/User Guide/User Guide/Note Types/Text.md

@@ -1,67 +1,31 @@
 # Text
-Trilium utilizes the powerful [CKEditor 5](https://ckeditor.com/ckeditor-5/) as its text editing component.
+The default note type in Trilium, text notes allow for rich formatting, tables, images, admonitions and a handful of other features.
 
-## Formatting Options
+## Formatting bars
 
-The Trilium text note interface does not display toolbars or formatting options by default. These can be accessed by:
+Most of the interaction with text notes is done via the built-in toolbars. Depending on preference, there are two different layouts:
 
-![inline note formatting](1_Text_text-notes-formatting.png)
+*   The _Floating toolbar_ is hidden by default and only appears when needed. In this mode there are actually two different toolbars:  
+    <img src="1_Text_image.png" width="496" height="91"><img src="2_Text_image.png" width="812" height="114">
+*   A toolbar that appears when text is selected. This provides text-level formatting such as bold, italic, text colors, inline code, etc.  
+    _<img src="Text_image.png" width="1109" height="124">_
 
-1.  Selecting text to bring up an inline toolbar.
+Fore more information see <a class="reference-link" href="Text/Formatting%20toolbar.md">Formatting toolbar</a>.
 
-![formating note block](Text_text-notes-formatting.png)2\. Clicking on the block toolbar.
+## Features and formatting
 
-## Read-Only vs. Editing Mode
-
-Text notes are usually opened in edit mode. However, they may open in read-only mode if the note is too big or the note is explicitly marked as read-only. For more information, see [Read-Only Notes](../Basic%20Concepts%20and%20Features/Notes/Read-Only%20Notes.md).
-
-## General Formatting
-
-Since Trilium uses CKEditor, all of its formatting options are available here. You may use the graphical toolbar shown above, or enter formatting such as markdown markdown directly in the text. Examples include:
-
-*   **Bold**: Type `**text**` or `__text__`
-*   _Italic_: Type `*text*` or `_text_`
-*   ~~Strikethrough~~: Type `~~text~~`
-
-### Lists
-
-See [Lists](Text/Lists.md).
-
-### Blocks
-
-*   Block quote: Start a line with `>` followed by a space
-
-## Developer-specific formatting
+Here's a list of various features supported by text notes:
 
-The following features are supported:
+<figure class="table"><table><thead><tr><th>Dedicated article</th><th>Feature</th></tr></thead><tbody><tr><td><a class="reference-link" href="Text/General%20formatting.md">General formatting</a></td><td><ul><li>Headings (section titles, paragraph)</li><li>Font size</li><li>Bold, italic, underline, strike-through</li><li>Superscript, subscript</li><li>Font color &amp; background color</li><li>Remove formatting</li></ul></td></tr><tr><td><a class="reference-link" href="Text/Lists.md">Lists</a></td><td><ul><li>Bulleted lists</li><li>Numbered lists</li><li>To-do lists</li></ul></td></tr><tr><td><a class="reference-link" href="Text/Block%20quotes%20%26%20admonitions.md">Block quotes &amp; admonitions</a></td><td><ul><li>Block quotes</li><li>Admonitions</li></ul></td></tr><tr><td><a class="reference-link" href="Text/Tables.md">Tables</a></td><td><ul><li>Basic tables</li><li>Merging cells</li><li>Styling tables and cells.</li><li>Table captions</li></ul></td></tr><tr><td><a class="reference-link" href="Text/Developer-specific%20formatting.md">Developer-specific formatting</a></td><td><ul><li>Inline code</li><li>Code blocks</li><li>Keyboard shortcuts</li></ul></td></tr><tr><td><a class="reference-link" href="Text/Footnotes.md">Footnotes</a></td><td><ul><li>Footnotes</li></ul></td></tr><tr><td><a class="reference-link" href="Text/Images.md">Images</a></td><td><ul><li>Images</li></ul></td></tr><tr><td><a class="reference-link" href="Text/Links.md">Links</a></td><td><ul><li>External links</li><li>Internal Trilium links</li></ul></td></tr><tr><td><a class="reference-link" href="Text/Include%20Note.md">Include Note</a></td><td><ul><li>Include note</li></ul></td></tr><tr><td><a class="reference-link" href="Text/Insert%20buttons.md">Insert buttons</a></td><td><ul><li>Symbols</li><li><a class="reference-link" href="Text/Math%20Equations.md">Math Equations</a></li><li>Mermaid diagrams</li><li>Horizontal ruler</li><li>Page break</li></ul></td></tr><tr><td><a class="reference-link" href="Text/Other%20features.md">Other features</a></td><td><ul><li>Indentation</li><li>Markdown import</li><li><a class="reference-link" href="Text/Cut%20to%20subnote.md">Cut to subnote</a></li></ul></td></tr></tbody></table></figure>
 
-*   Inline code
-*   [Code blocks](Text/Developer-specific%20formatting/Code%20blocks.md)
-
-See [Developer-specific formatting](Text/Developer-specific%20formatting.md) for more information.
-
-### Headings
-
-Create headings by starting a line with `##` for heading 2, `###` for heading 3, and so on up to heading 6. Note that `#` is reserved for the title.
-
-### Horizontal Line
-
-Insert a horizontal line by starting a line with `---`.
-
-## Markdown & Autoformat
-
-CKEditor supports a markdown-like editing experience, recognising syntax and automatically converting it to rich text.
-
-![](Text_image.png)
-
-Complete documentation for this feature is available in the [CKEditor documentation](https://ckeditor.com/docs/ckeditor5/latest/features/autoformat.html).
+## Read-Only vs. Editing Mode
 
-If autoformatting is not desirable, press <kbd>Ctrl</kbd> + <kbd>Z</kbd> to revert the text to its original form.
+Text notes are usually opened in edit mode. However, they may open in read-only mode if the note is too big or the note is explicitly marked as read-only. For more information, see <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Read-Only%20Notes.md">Read-Only Notes</a>.
 
-Note: The use of `#` for Heading 1 is not supported because it is reserved for the title. Start with `##` for Heading 2. More information is available [here](https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#heading-levels).
+## Keyboard shortcuts
 
-## Math Support
+There are numerous keyboard shortcuts to format the text without having to use the mouse. For a reference of all the key combinations, see <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Keyboard%20Shortcuts.md">Keyboard Shortcuts</a>. In addition, see <a class="reference-link" href="Text/Markdown-like%20formatting.md">Markdown-like formatting</a> as an alternative to the keyboard shortcuts.
 
-Trilium provides math support through [KaTeX](https://katex.org/).
+## Technical details
 
-<figure class="image image_resized"><img style="aspect-ratio:812/585;" src="Text_math.gif" width="812" height="585"></figure>
+For the text editing functionality, Trilium uses a commercial product (with an open-source base) called <a class="reference-link" href="../Advanced%20Usage/Technologies%20used/CKEditor.md">CKEditor</a>. This brings the benefit of having a powerful WYSIWYG (What You See Is What You Get) editor.

docs/User Guide/User Guide/Note Types/Text/Block quotes & admonitions.md

@@ -1,17 +1,25 @@
-# Admonitions
-![](1_Admonitions_image.png)
+# Block quotes & admonitions
+## Block quotes
+
+As the name suggests, block quotes can be useful to cite one or more paragraphs.
+
+To create a block quote, press <img src="Block quotes &amp; admonitions.png" width="15" height="12"> from the <a class="reference-link" href="Formatting%20toolbar.md">Formatting toolbar</a>. It's also possible to type <kbd>&gt;</kbd>, followed by a space to create one (but only if the cursor is at the beginning of a line).
+
+Inside the quote block, other block items can be inserted such as tables, images, or even other block quotes or admonitions.
+
+## Admonitions
 
 Admonitions are a way to highlight information to the reader. Other names for it include _call-outs_ and _info/warning/alert boxes_.
 
-## Inserting a new admonition
+<figure class="image image-style-align-center"><img style="aspect-ratio:959/547;" src="2_Block quotes &amp; admonitions.png" width="959" height="547"></figure>
 
-### From the UI
+From a functional point of view, admonitions act very similarly to a block quote, just with different styling. This includes the ability to insert other elements in it such as headings, tables, images, etc.
 
-In the Formatting toolbar:
+### Inserting a new admonition
 
-![](Admonitions_image.png)
+In the <a class="reference-link" href="Formatting%20toolbar.md">Formatting toolbar</a>:
 
-### Via the keyboard
+![](1_Block%20quotes%20&%20admonitions.png)
 
 It's possible to insert an admonition simply by typing:
 
@@ -23,7 +31,7 @@ It's possible to insert an admonition simply by typing:
 
 In addition to that, it's also possible to type `!!!`  followed by any text, case in which a default admonition type will appear (note) with the entered text inside it.
 
-## Interaction
+### Interaction
 
 By design, admonitions act very similar to block quotes.
 
@@ -36,13 +44,13 @@ Inside an admonition:
 *   Pressing <kbd>Enter</kbd> will start a new paragraph. Pressing it twice will exit out of the admonition.
 *   Headings and other block content including tables can be inserted inside the admonition.
 
-## Types of admonitions
+### Types of admonitions
 
 There are currently five types of admonitions: _Note_, _Tip_, _Important_, _Caution_, _Warning_.
 
 These types were inspired by GitHub's support for this feature and there are currently no plans for adjusting it or allowing the user to customize them.
 
-## Markdown support
+### Markdown support
 
 The Markdown syntax for admonitions as supported by Trilium is the one that GitHub uses, which is as follows:
 

docs/User Guide/User Guide/Note Types/Text/Developer-specific formatting.md

@@ -3,20 +3,20 @@
 
 Inline code formats text using a monospace font to indicate technical content in a sentence such as code, paths, etc.
 
-![](4_Developer-specific%20formatt.png)
+![](5_Developer-specific%20formatt.png)
 
 Example of inline code being used to illustrate file system paths as well as shell commands (`git` in this case).
 
 To insert an inline code:
 
-*   Via the [Formatting toolbar](Formatting%20toolbar.md), look for the ![](2_Developer-specific%20formatt.png) button.
+*   Via the [Formatting toolbar](Formatting%20toolbar.md), look for the ![](3_Developer-specific%20formatt.png) button.
 *   Type \`code\` where `code` is the desired text to be automatically formatted as inline code.
 
 ### Code blocks
 
 Code blocks display a snippet of code as a dedicated block:
 
-![](3_Developer-specific%20formatt.png)
+![](4_Developer-specific%20formatt.png)
 
 A code block with JavaScript syntax highlight enabled.
 
@@ -30,4 +30,8 @@ This allows marking a portion of text as a shortcut key.
 
 ![](Developer-specific%20formatt.png)
 
-To apply this style, press the ![](5_Developer-specific%20formatt.png) button in ![](1_Developer-specific%20formatt.png) group from the [Formatting toolbar](Formatting%20toolbar.md). On the floating toolbar, the buttons appear when selecting a text.
+To apply this style, press the ![](6_Developer-specific%20formatt.png) button in ![](1_Developer-specific%20formatt.png) group from the [Formatting toolbar](Formatting%20toolbar.md). On the floating toolbar, the buttons appear when selecting a text.
+
+Alternatively, press the <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>K</kbd> combination to apply keyboard shortcut formatting to the current text selection.
+
+The formatting can be removed by pressing again the button (from the UI or from the keyboard), or by using the <img src="2_Developer-specific formatt.png" width="17" height="16"> _Remove formatting_ button.

docs/User Guide/User Guide/Note Types/Text/Developer-specific formatting/Code blocks.md

@@ -30,8 +30,8 @@ In order to configure this new feature, a section has been added in Options →
 *   Word wrapping is disabled by default, but can be configured from the same section.
 
 > [!NOTE]
-> **Context regarding syntax highlighting**  
->   
+> **Context regarding syntax highlighting**
+> 
 > In order to achieve the syntax highlight, the Highlight.js library is being used. Do note that support for syntax highlighting in code blocks is not a supported feature of the text editor we are using CKEditor), but rather a hack which makes use of the highlights API (used for highlighting search results for example). Nevertheless, we haven't noticed any major issues during the development of the feature, but feel free to report any issues you might have.
 > 
 > Most of the work to achieve the syntax highlight itself was already done by [antoniotejada](https://github.com/antoniotejada) in [https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget](https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget). On our side we added customization but also additional functionality.

docs/User Guide/User Guide/Note Types/Text/Footnotes.md

@@ -0,0 +1,12 @@
+# Footnotes
+<figure class="image image-style-align-right"><img style="aspect-ratio:199/187;" src="1_Footnotes_image.png" width="199" height="187"></figure>
+
+Footnotes are a good place to insert references to a paragraph or details that are displayed at the bottom of the note.
+
+## Interaction
+
+*   To insert a new footnote, press <img src="Footnotes_image.png" width="17" height="12"> (or press the right arrow and select _New footnote_).
+*   To insert a reference to an existing footnote, press the right arrow and select _Insert footnote_, followed by the number of the footnote to insert.
+*   Hovering over a reference (e.g. `[1]`) will display the content of the footnote in a tooltip for easy reference.
+*   Clicking on a reference in the text (e.g. `[1]`) will navigate to the corresponding footnote.
+*   Similarly, clicking on the `^` button of a footnote will navigate to the corresponding reference in the text.

docs/User Guide/User Guide/Note Types/Text/Formatting toolbar.md

@@ -1,7 +1,7 @@
 # Formatting toolbar
 Trilium allows two different editing experiences for text notes, based on your preference.
 
-To do so, go to [Options](../../Basic%20Concepts%20and%20Features/UI%20Elements/Options.md) and look for the _Text Notes_ section. There is a corresponding section called _Formatting toolbar_.
+The type of formatting toolbar can be changed by going to <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Options.md">Options</a> and then looking for the <a class="reference-link" href="#root/_options/_optionsTextNotes">Text Notes</a> section. In it, look for the _Formatting toolbar_ category.
 
 ## Floating
 

docs/User Guide/User Guide/Note Types/Text/General formatting.md

@@ -0,0 +1,84 @@
+# General formatting
+## Headings
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:255/284;" src="3_General formatting_image.png" width="255" height="284"></figure>
+
+Trilium provides headings to define sections within text. Headings are numbered from 2 to 6.
+
+The reason why Heading 1 is missing from the list is that it is being reserved for the title of note.
+
+To turn a heading back into a normal text, select _Paragraph_ from the list.
+
+Apart from using the UI, it is also possible to quickly insert headings using the Markdown-like shortcuts:
+
+*   `##` for Heading 2
+*   `###` for Heading 3
+*   `####` for Heading 4
+*   `#####` for Heading 5
+*   `######` for Heading 6
+
+## Font size
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:363/249;" src="General formatting_image.png" width="363" height="249"></figure>
+
+One way to highlight a portion of text is to increase the size of the font.
+
+To do so, select some text and choose an option from the _Font size_ selector (as pictured to the right).
+
+Unlike other text editors such as Microsoft Word, the font size is relative (i.e. “Tiny”, “Small” instead of a number like 12).
+
+Avoid using this feature just to simply make all text bigger. In that case it's generally better to adjust the font size for all notes in <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Options.md">Options</a> or by zooming.
+
+## Bold, italic, underline, strike-through
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:215/71;" src="4_General formatting_image.png" width="215" height="71"></figure>
+
+Text can be formatted as **Bold,** _Italic,_ Underline or ~~Strike-through~~ via the dedicated buttons in the formatting toolbar.
+
+This formatting can be easily removed using the _Remove formatting_ item.
+
+The following keyboard shortcuts can be used here:
+
+*   <kbd>Ctrl</kbd>+<kbd>B</kbd> for bold
+*   <kbd>Ctrl</kbd>+<kbd>I</kbd> for italic
+*   <kbd>Ctrl</kbd>+<kbd>U</kbd> for underline
+
+Alternatively, Markdown-like formatting can be used:
+
+*   **Bold**: Type `**text**` or `__text__`
+*   _Italic_: Type `*text*` or `_text_`
+*   ~~Strikethrough~~: Type `~~text~~`
+
+## Superscript, subscript
+
+This allows writing superscript or subscript text.
+
+This is mostly useful for units of measure (e.g. cm3 for cubic centimeters) and chemical notations (e.g. NaHCO3)
+
+For mathematical formulas, prefer the <a class="reference-link" href="Math%20Equations.md">Math Equations</a> feature instead.
+
+## Font color and background color
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:167/204;" src="2_General formatting_image.png" width="167" height="204"></figure>
+
+Selected text can be colored with one of the predefined colors from a palette or any color can be selected using the color picker.
+
+Once there is at least one color defined in the document, it will appear in the list for easy reuse.
+
+When selecting a foreground or a background color, consider the contrast if switching between a dark theme or a light [theme](../../Basic%20Concepts%20and%20Features/Themes.md).
+
+To remove either the background or foreground color of a text, select the corresponding formatting button and press _Remove color_ or use the _Remove formatting_ toolbar item.
+
+## Remove formatting
+
+The <img src="1_General formatting_image.png" width="17" height="16"> _Remove formatting_ button is a quick way to eliminate the general formatting styling of a particular text.
+
+Simply select the text and press the button to remove the formatting (bold, italic, colors, sizes, etc.). If the text does not have any removable formatting, the button will appear disabled.
+
+Note that heading styles are not taken into consideration, these must be manually changed back to a paragraph according to the _Headings_ section.
+
+When pasting content that comes with undesired formatting, an alternative to pasting and then removing formatting is pasting as plain text via <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>.
+
+## Support for Markdown
+
+When exported to <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/Import%20%26%20Export/Markdown.md">Markdown</a>, most of the general formatting is maintained such as headings, bold, italic, underline, etc.

docs/User Guide/User Guide/Note Types/Text/Images.md

@@ -24,15 +24,17 @@ Clicking on an image will reveal a popup with multiple options:
 
 The first set of options configure the alignment are, in order:
 
-| Icon | Option | Preview | Description |
-| --- | --- | --- | --- |
-| ![](5_Images_image.png) | Inline | ![](1_Images_image.png) | As the name suggests, the name can be put inside a paragraph and moved around similarly as if it was a block of text. Use drag & drop or cut-paste to move it around. |
-| ![](10_Images_image.png) | Centered image | ![](2_Images_image.png) | The image will be displayed as a block and centered, not allowing text in either the left or right of it. |
-| ![](4_Images_image.png) | Wrap text | ![](7_Images_image.png) | The image will be displayed to the left or the right of the text. |
-| ![](Images_image.png) | Block align | ![](3_Images_image.png) | Similarly to _Centered image_, the image will be displayed as a block and aligned either to the left or to the right, but not allowing text to flow on either of its sides. |
+<figure class="table"><table><thead><tr><th>Icon</th><th>Option</th><th>Preview</th><th>Description</th></tr></thead><tbody><tr><td><img src="5_Images_image.png"></td><td>Inline</td><td><img src="1_Images_image.png"></td><td>As the name suggests, the name can be put inside a paragraph and moved around similarly as if it was a block of text. Use drag &amp; drop or cut-paste to move it around.</td></tr><tr><td><img src="10_Images_image.png"></td><td>Centered image</td><td><img src="2_Images_image.png"></td><td>The image will be displayed as a block and centered, not allowing text in either the left or right of it.</td></tr><tr><td><img src="4_Images_image.png"></td><td>Wrap text</td><td><img src="7_Images_image.png"></td><td>The image will be displayed to the left or the right of the text.</td></tr><tr><td><img src="Images_image.png"></td><td>Block align</td><td><img src="3_Images_image.png"></td><td>Similarly to <em>Centered image</em>, the image will be displayed as a block and aligned either to the left or to the right, but not allowing text to flow on either of its sides.</td></tr></tbody></table></figure>
 
 ## Compression
 
-Since Trilium isn't really meant to be primary storage for image data, it attempts to compress and resize (with pretty aggressive settings) uploaded images before storing them to the database. You may then notice some quality degradation. Basic quality settings is available in Options -> Other.
+Since Trilium isn't really meant to be primary storage for image data, it attempts to compress and resize (with pretty aggressive settings) uploaded images before storing them to the database. You may then notice some quality degradation. Basic quality settings is available in <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Options.md">Options</a> → Other.
 
-If you want to save images in their original resolution, it is recommended to save them as attachment to note (top-right "Note actions -> Import files").
+If you want to save images in their original resolution, it is recommended to save them as attachment to note (look for the contextual menu in <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20buttons.md">Note buttons</a> → _Import files_).
+
+## Aligning images side-by-side
+
+There are generally two ways to display images side by side:
+
+*   If they are roughly the same size, simply make the two images in-line, according to the alignment section above. The images can be dragged & dropped onto the same line.
+*   If they are on different size, create a [table](Tables.md) with invisible borders.

docs/User Guide/User Guide/Note Types/Text/Insert buttons.md

@@ -0,0 +1,45 @@
+# Insert buttons
+Press the <img src="4_Insert buttons_image.png" width="34" height="16"> button in the <a class="reference-link" href="Formatting%20toolbar.md">Formatting toolbar</a> to reveal special inserable items and blocks such as symbols, Math expressions and separators.
+
+## Symbols
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:346/322;" src="1_Insert buttons_image.png" width="346" height="322"></figure>
+
+Pressing the <img src="7_Insert buttons_image.png" width="18" height="15"> button will reveal a popup window displaying a list of characters that are generally more difficult to insert directly from the keyboard, such as a subset of emojis, quotation characters, etc.
+
+Interaction:
+
+*   Click on a character to insert it at the current cursor position.
+*   The window can be dragged around by the top bar where the title is, to avoid it getting in the way of the text.
+*   Click on the _Category_ selector to filter the characters.
+
+## Math equations
+
+See the dedicated <a class="reference-link" href="Math%20Equations.md">Math Equations</a> page.
+
+## Mermaid diagram
+
+Press the <img src="2_Insert buttons_image.png" width="16" height="17"> button to create an inline Mermaid diagram.
+
+This feature is quite similar to the <a class="reference-link" href="../Mermaid%20Diagrams.md">Mermaid Diagrams</a> note types and is meant as an alternative to it for simple diagrams. For more complex diagrams, use the <a class="reference-link" href="Include%20Note.md">Include Note</a> feature for a dedicated Mermaid note.
+
+<figure class="image"><img style="aspect-ratio:1174/358;" src="6_Insert buttons_image.png" width="1174" height="358"></figure>
+
+## Horizontal ruler
+
+This feature will display a horizontal line, generally useful to separate different sections of the text. To do so, press the <img src="5_Insert buttons_image.png" width="18" height="16"> button in the <a class="reference-link" href="Formatting%20toolbar.md">Formatting toolbar</a>.
+
+<img src="3_Insert buttons_image.png" width="502" height="95">
+
+Alternatively, it's possible to insert a horizontal ruler by typing `---`.
+
+## Page break
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:371/79;" src="8_Insert buttons_image.png" width="371" height="79"></figure>
+
+Page breaks provide a way to force the next paragraph or block (table, image, etc.) to be displayed onto the next page when printing (either to a real printer to [when exporting to PDF](../../Basic%20Concepts%20and%20Features/Notes/Export%20as%20PDF.md)).
+
+Page breaks are marked in the editor with the words _Page break_, but they will not actually be shown when printed.
+
+*   To insert a page break, press the <img src="Insert buttons_image.png" width="20" height="19"> in the formatting toolbar.
+*   To insert many page breaks at once, insert a page break first, click on it and press <kbd>Ctrl</kbd>+<kbd>C</kbd>. Then use <kbd>Ctrl</kbd>+<kbd>V</kbd>, to paste as many times as needed.

docs/User Guide/User Guide/Note Types/Text/Keyboard shortcuts.md

@@ -0,0 +1,25 @@
+# Keyboard shortcuts
+> [!TIP]
+> This section of keyboard shortcuts presents a subset of the keyboard shortcuts as supported by the editor technology we are using, <a class="reference-link" href="../../Advanced%20Usage/Technologies%20used/CKEditor.md">CKEditor</a>. The shortcuts were taken from the [official documentation](https://ckeditor.com/docs/ckeditor5/latest/features/accessibility.html#keyboard-shortcuts). Note that not all the shortcuts in the original documentation are applicable (due to using a different configuration).
+
+### Content editing
+
+<figure class="table"><table><thead><tr><th>Action</th><th>PC</th><th>Mac</th></tr></thead><tbody><tr><td>Insert a hard break (a new paragraph)</td><td><kbd>Enter</kbd></td><td>&nbsp;</td></tr><tr><td>Insert a soft break (a <code>&lt;br&gt;</code> element)</td><td><kbd>Shift</kbd>+<kbd>Enter</kbd></td><td><kbd>⇧Enter</kbd></td></tr><tr><td>Copy selected content</td><td><kbd>Ctrl</kbd>+<kbd>C</kbd></td><td><kbd>⌘C</kbd></td></tr><tr><td>Paste content</td><td><kbd>Ctrl</kbd>+<kbd>V</kbd></td><td><kbd>⌘V</kbd></td></tr><tr><td>Paste content as plain text</td><td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd></td><td><kbd>⌘⇧V</kbd></td></tr><tr><td>Undo</td><td><kbd>Ctrl</kbd>+<kbd>Z</kbd></td><td><kbd>⌘Z</kbd></td></tr><tr><td>Redo</td><td><kbd>Ctrl</kbd>+<kbd>Y</kbd>, <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></td><td><kbd>⌘Y</kbd>, <kbd>⌘⇧Z</kbd></td></tr><tr><td>Bold text</td><td><kbd>Ctrl</kbd>+<kbd>B</kbd></td><td><kbd>⌘B</kbd></td></tr><tr><td>Change text case</td><td><kbd>Shift</kbd>+<kbd>F3</kbd></td><td><kbd>⇧F3</kbd> (may require <kbd>Fn</kbd>)</td></tr><tr><td>Create link</td><td><kbd>Ctrl</kbd>+<kbd>K</kbd></td><td><kbd>⌘K</kbd></td></tr><tr><td>Move out of a link</td><td><kbd>←←</kbd>, <kbd>→→</kbd></td><td>&nbsp;</td></tr><tr><td>Move out of an inline code style</td><td><kbd>←←</kbd>, <kbd>→→</kbd></td><td>&nbsp;</td></tr><tr><td>Select all</td><td><kbd>Ctrl</kbd>+<kbd>A</kbd></td><td><kbd>⌘A</kbd></td></tr><tr><td>Find in the document</td><td><kbd>Ctrl</kbd>+<kbd>F</kbd></td><td><kbd>⌘F</kbd></td></tr><tr><td>Copy text formatting</td><td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>C</kbd></td><td><kbd>⌘⇧C</kbd></td></tr><tr><td>Paste text formatting</td><td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd></td><td><kbd>⌘⇧V</kbd></td></tr><tr><td>Italic text</td><td><kbd>Ctrl</kbd>+<kbd>I</kbd></td><td><kbd>⌘I</kbd></td></tr><tr><td>Strikethrough text</td><td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd></td><td><kbd>⌘⇧X</kbd></td></tr><tr><td>Underline text</td><td><kbd>Ctrl</kbd>+<kbd>U</kbd></td><td><kbd>⌘U</kbd></td></tr><tr><td>Revert autoformatting action</td><td><kbd>Backspace</kbd></td><td>&nbsp;</td></tr></tbody></table></figure>
+
+### Interacting with blocks
+
+Blocks are images, tables, blockquotes, annotations.
+
+<figure class="table"><table><thead><tr><th>Action</th><th>PC</th><th>Mac</th></tr></thead><tbody><tr><td>Insert a new paragraph directly after a widget</td><td><kbd>Enter</kbd></td><td>&nbsp;</td></tr><tr><td>Insert a new paragraph directly before a widget</td><td><kbd>Shift</kbd>+<kbd>Enter</kbd></td><td><kbd>⇧Enter</kbd></td></tr><tr><td>Move the caret to allow typing directly before a widget</td><td><kbd>↑</kbd>, <kbd>←</kbd></td><td>&nbsp;</td></tr><tr><td>Move the caret to allow typing directly after a widget</td><td><kbd>↓</kbd>, <kbd>→</kbd></td><td>&nbsp;</td></tr><tr><td>After entering a nested editable, move the selection to the closest ancestor widget. For example: move from an image caption to the whole image widget.</td><td><kbd>Tab</kbd> then <kbd>Esc</kbd></td><td>&nbsp;</td></tr></tbody></table></figure>
+
+Specifically for lists:
+
+<figure class="table"><table><thead><tr><th>Action</th><th>PC</th><th>Mac</th></tr></thead><tbody><tr><td>Increase list item indent</td><td><kbd>⇥</kbd></td><td>&nbsp;</td></tr><tr><td>Decrease list item indent</td><td><kbd>Shift</kbd>+<kbd>⇥</kbd></td><td><kbd>⇧⇥</kbd></td></tr></tbody></table></figure>
+
+In tables:
+
+<figure class="table"><table><thead><tr><th>Action</th><th>PC</th><th>Mac</th></tr></thead><tbody><tr><td>Move the selection to the next cell</td><td><kbd>⇥</kbd></td><td>&nbsp;</td></tr><tr><td>Move the selection to the previous cell</td><td><kbd>Shift</kbd>+<kbd>⇥</kbd></td><td><kbd>⇧⇥</kbd></td></tr><tr><td>Insert a new table row (when in the last cell of a table)</td><td><kbd>⇥</kbd></td><td>&nbsp;</td></tr><tr><td>Navigate through the table</td><td><kbd>↑</kbd>, <kbd>→</kbd>, <kbd>↓</kbd>, <kbd>←</kbd></td><td>&nbsp;</td></tr></tbody></table></figure>
+
+### General UI shortcuts
+
+<figure class="table"><table><thead><tr><th>Action</th><th>PC</th><th>Mac</th></tr></thead><tbody><tr><td>Close contextual balloons, dropdowns, and dialogs</td><td><kbd>Esc</kbd></td><td>&nbsp;</td></tr><tr><td>Open the accessibility help dialog</td><td><kbd>Alt</kbd>+<kbd>0</kbd></td><td><kbd>⌥0</kbd></td></tr><tr><td>Move focus between form fields (inputs, buttons, etc.)</td><td><kbd>⇥</kbd>, <kbd>Shift</kbd>+<kbd>⇥</kbd></td><td><kbd>⇥</kbd>, <kbd>⇧⇥</kbd></td></tr><tr><td>Move focus to the toolbar, navigate between toolbars</td><td><kbd>Alt</kbd>+<kbd>F10</kbd></td><td><kbd>⌥F10</kbd> (may require <kbd>Fn</kbd>)</td></tr><tr><td>Navigate through the toolbar or menu bar</td><td><kbd>↑</kbd>, <kbd>→</kbd>, <kbd>↓</kbd>, <kbd>←</kbd></td><td>&nbsp;</td></tr><tr><td>Navigate to the next focusable field or an element outside the editor</td><td><kbd>Tab</kbd>, <kbd>Shift</kbd>+<kbd>Tab</kbd></td><td>&nbsp;</td></tr><tr><td>Execute the currently focused button. Executing buttons that interact with the editor content moves the focus back to the content.</td><td><kbd>Enter</kbd>, <kbd>Space</kbd></td><td>&nbsp;</td></tr><tr><td>Move focus in and out of an active dialog window</td><td><kbd>Ctrl</kbd>+<kbd>F6</kbd></td><td><kbd>⌘F6</kbd> (may require <kbd>Fn</kbd>)</td></tr></tbody></table></figure>

docs/User Guide/User Guide/Note Types/Text/Lists.md

@@ -1,27 +1,28 @@
 # Lists
 There are three types of lists supported by text notes:
 
-*   Bulleted lists (also known as unordered lists).
-*   Numbered lists (or ordered lists).
-*   To-do lists
+*   <img src="7_Lists_image.png" width="17" height="13"> Bulleted lists (also known as unordered lists).
+*   <img src="8_Lists_image.png" width="18" height="16"> Numbered lists (or ordered lists).
+*   <img src="10_Lists_image.png" width="19" height="13"> To-do lists
 
-## Keyboard shortcuts
+For bulleted and numbered lists, it's possible to configure an alternative marker such as squares or Roman numbering by pressing the <img src="9_Lists_image.png" width="10" height="6"> icon. For numbered lists, it's also possible to specify the number to start at or whether to count in reverse order.
 
-*   Bulleted list: Start a line with `*` or `-` followed by a space;
-*   Numbered list: Start a line with `1.` or `1)` followed by a space;
-*   To-do list: Start a line with `[ ]` for an unchecked item or `[x]` for a checked item.
+## Keyboard interaction
+
+*   To create a new list:
+    *   Bulleted list: Start a line with `*` or `-` followed by a space;
+    *   Numbered list: Start a line with `1.` or `1)` followed by a space;
+    *   To-do list: Start a line with `[ ]` for an unchecked item or `[x]` for a checked item.
+*   To create a new item in the list, press <kbd>Enter</kbd>.
+*   To create a blank line within a list item, press <kbd>Shift</kbd>+<kbd>Enter</kbd>.
+*   To exit out of the list, press <kbd>Enter</kbd> twice.
+*   To merge two lists, simply delete the gap between them.
+*   To create nested lists, simply use the <img src="2_Lists_image.png" width="17" height="14"> button (see _Indentation_ in <a class="reference-link" href="Other%20features.md">Other features</a>) or the <kbd>Tab</kbd> key. To decrease the nesting level for the current element, press <kbd>Shift</kbd>+<kbd>Tab</kbd>.
 
 ## Headings, code blocks within lists
 
 It possible to add content-level blocks such as headings, code blocks, tables within lists, as follows:
 
-|     |     |
-| --- | --- |
-| ![](5_Lists_image.png) | First, create a list. |
-| ![](3_Lists_image.png) | Press Enter to create a new list item. |
-| ![](4_Lists_image.png) | Press Backspace to get rid of the bullet point. Notice the cursor position. |
-| ![](1_Lists_image.png) | At this point, insert any desired block-level item such as a code block. |
-| ![](Lists_image.png) | To continue with a new bullet point, press Enter until the cursor moves to a new blank position. |
-| ![](2_Lists_image.png) | Press Enter once more to create the new bullet. |
+<figure class="table" style="width:100%;"><table class="ck-table-resized"><colgroup><col style="width:4.79%;"><col style="width:57.19%;"><col style="width:38.02%;"></colgroup><tbody><tr><th>1</th><td><img src="6_Lists_image.png"></td><td>First, create a list.</td></tr><tr><th>2</th><td><img src="4_Lists_image.png"></td><td>Press Enter to create a new list item.</td></tr><tr><th>3</th><td><img src="5_Lists_image.png"></td><td>Press Backspace to get rid of the bullet point. Notice the cursor position.</td></tr><tr><th>4</th><td><img class="image_resized" style="aspect-ratio:676/112;width:98.29%;" src="1_Lists_image.png" width="676" height="112"></td><td>At this point, insert any desired block-level item such as a code block.</td></tr><tr><th>5</th><td><img class="image_resized" style="aspect-ratio:675/129;width:94.22%;" src="Lists_image.png" width="675" height="129"></td><td>To continue with a new bullet point, press Enter until the cursor moves to a new blank position.</td></tr><tr><th>6</th><td><img class="image_resized" style="aspect-ratio:675/129;width:100%;" src="3_Lists_image.png" width="675" height="129"></td><td>Press Enter once more to create the new bullet.</td></tr></tbody></table></figure>
 
 The same principle applies to all three list types (bullet, numbered and to-do).

docs/User Guide/User Guide/Note Types/Text/Markdown-like formatting.md

@@ -0,0 +1,31 @@
+# Markdown-like formatting
+Markdown-like formatting allows inserting some basic formatting by typing the Markdown equivalent. Note that this does not mean that <a class="reference-link" href="../Text.md">Text</a> notes supports Markdown, these are just some convenience shortcuts.
+
+To import more complex formatting into text notes, consider using the [_Import from Markdown_](Other%20features.md) function. For fully-fleged Markdown notes imports, consider using the dedicated [import](../../Basic%20Concepts%20and%20Features/Import%20%26%20Export/Markdown.md) function.
+
+*   For [headings:](General%20formatting.md)
+    *   `##` for Heading 2 (the first-level heading is reserved for the note title).
+    *   `###` for Heading 3
+    *   `####` for Heading 4
+    *   `#####` for Heading 5
+    *   `######` for Heading 6
+*   For <a class="reference-link" href="General%20formatting.md">General formatting</a>:
+    *   **Bold**: Type `**text**` or `__text__`
+    *   _Italic_: Type `*text*` or `_text_`
+    *   ~~Strikethrough~~: Type `~~text~~`
+*   For <a class="reference-link" href="Lists.md">Lists</a>:
+    *   Bulleted list: Start a line with `*` or `-` followed by a space;
+    *   Numbered list: Start a line with `1.` or `1)` followed by a space;
+    *   To-do list: Start a line with `[ ]` for an unchecked item or `[x]` for a checked item.
+*   For [block quotes](Block%20quotes%20%26%20admonitions.md), press `>`, followed by a space.
+*   For <a class="reference-link" href="Developer-specific%20formatting/Code%20blocks.md">Code blocks</a>, type ` ``` `.
+*   For a [horizontal line](Other%20features.md), type `---`.
+*   For [admonitions](Block%20quotes%20%26%20admonitions.md):
+    *   `!!! note`
+    *   `!!! tip`
+    *   `!!! important`
+    *   `!!! caution`
+    *   `!!! warning`
+    *   Starting any other text with `!!!` will insert a note admonition with the text inside of it.
+
+If auto-formatting is not desirable, press <kbd>Ctrl</kbd> + <kbd>Z</kbd> to revert the text to its original form.

docs/User Guide/User Guide/Note Types/Text/Math Equations.md

@@ -0,0 +1,22 @@
+# Math Equations
+<figure class="image image-style-align-right"><img style="aspect-ratio:350/193;" src="Math Equations_image.png" width="350" height="193"></figure>
+
+Within text notes, it's possible to enter mathematical equations using the <img src="1_Math Equations_image.png" width="20" height="15"> button from the <a class="reference-link" href="Formatting%20toolbar.md">Formatting toolbar</a> (generally found under the <a class="reference-link" href="Insert%20buttons.md">Insert buttons</a>).
+
+If inserting equations frequently, using the <kbd>Ctrl</kbd>+<kbd>M</kbd> keyboard shortcut can be more comfortable.
+
+There is currently no quick way to insert an equation, such as surrounding it with `$` or pressing <kbd>Ctrl</kbd>+<kbd>M</kbd> on an already typed-out equation.
+
+The mathematical expression must be written in the TeX format. There is no visual editor for the math equations, only a preview. 
+
+Enabling _Display mode_ will render the equation slightly bigger (especially if using big operators such as summation, or fractions) and center it. Display mode equations will act as blocks (i.e. like paragraphs, or tables) and can be inserted for example in lists. Non-display equations can be part of the text.
+
+## Supported math features
+
+Technically we are using the KaTeX library which allows for a subset of the TeX format. To see the full list of supported features, consult the [Supported Functions](https://katex.org/docs/supported) and the [Support Table](https://katex.org/docs/support_table) from the official documentation.
+
+## Markdown support
+
+Math equations will be preserved when exporting to or importing from Markdown, surrounded by `\(` characters for inline math expressions, and `$\)` for display mode.
+
+If you notice any issue with the Markdown import/export for equations, feel free to [report](../../Troubleshooting/Reporting%20issues.md) it while providing the equation that causes issues.

docs/User Guide/User Guide/Note Types/Text/Other features.md

@@ -0,0 +1,33 @@
+# Other features
+## Indentation
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:201/124;" src="6_Other features_image.png" width="201" height="124"></figure>
+
+Paragraphs can be indented to the right using the  button from the <a class="reference-link" href="Formatting%20toolbar.md">Formatting toolbar</a>.
+
+*   Press <img src="5_Other features_image.png" width="17" height="14"> to increase the indentation of the current paragraph by one. Can be pressed multiple times if needed.
+*   Press <img src="1_Other features_image.png" width="17" height="14"> to decrease the indentation of a current paragraph. The button will be disabled if it is already at the minimum indentation level.
+*   For convenience, keyboard shortcuts are also available. Press <kbd>Tab</kbd> to indent or <kbd>Shift</kbd>+<kbd>Tab</kbd> to decrease the indentation. These shortcuts work even if the cursor is not at the beginning of a paragraph or a list.
+*   Apart from paragraphs, the indent button is also enabled in <a class="reference-link" href="Lists.md">Lists</a>, where it can be used to create nested lists.
+
+## Markdown import
+
+If the clipboard contains Markdown text, it can be easily imported into text notes. Simply copy a Markdown-formatted text and press the <img src="2_Other features_image.png" width="20" height="14"> to insert its visual representation.
+
+Note that this only works with raw Markdown (e.g. `# Heading 1` to generate a heading) and not the visual representation of the Markdown (e.g. as in the preview pane of an application). In that case, simply use the paste function which already accepts HTML-formatted content.
+
+This is mostly useful for snippets of text, for entire Markdown documents use the dedicated <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/Import%20%26%20Export/Markdown.md">Markdown</a> import/export function.
+
+If accessing Trilium with a web browser, the Markdown import action will ask for the content to be inserted into a dedicated screen since it does not have access to the clipboard.
+
+## Cut to subnote
+
+The <img src="Other features_image.png" width="16" height="20"> button will create a child note with the selected text. For more information, see <a class="reference-link" href="Cut%20to%20subnote.md">Cut to subnote</a>.
+
+## Find and replace
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:394/203;" src="4_Other features_image.png" width="394" height="203"></figure>
+
+The <img src="3_Other features_image.png" width="18" height="17"> button will open the editor's dedicated search and replace functionality.
+
+Alternatively, the <kbd>Ctrl</kbd>+<kbd>F</kbd> combination can be pressed to show the dialog.

docs/User Guide/User Guide/Note Types/Text/Tables.md

@@ -0,0 +1,98 @@
+# Tables
+Tables are a powerful feature for <a class="reference-link" href="../Text.md">Text</a> notes, since editing them is generally easy.
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:176/204;" src="6_Tables_image.png" width="176" height="204"></figure>
+
+To create a table, simply press the table button and select with the mouse the desired amount of columns and rows, as indicated in the adjacent figure.
+
+## Formatting toolbar
+
+When a table is selected, a special formatting toolbar will appear:
+
+<img src="9_Tables_image.png" width="384" height="100">
+
+## Navigating a table
+
+*   Using the mouse:
+    *   Click on a cell to focus it.
+    *   Click the <img src="10_Tables_image.png" width="28" height="27"> button at the top or the bottom of a table to insert an empty paragraph near it.
+    *   Click the <img src="5_Tables_image.png" width="24" height="26"> button at the top-left of the table to select it entirely (for easy copy-pasting or cutting) or drag and drop it to relocate the table.
+*   Using the keyboard:
+    *   Use the arrow keys on the keyboard to easily navigate between cells.
+    *   It's also possible to use <kbd>Tab</kbd> to go to the next cell and Shift+Tab to go to the previous cell.
+    *   Unlike arrow keys, pressing <kbd>Tab</kbd> at the end of the table (last row, last column) will create a new row automatically.
+    *   To select multiple cells, hold <kbd>Shift</kbd> while using the arrow keys.
+
+## Resizing cells
+
+*   Columns can be resized by hovering the mouse over the border of two adjacent cells and dragging it.
+*   By default, the row height is not adjustable using the mouse, but it can be configured from the cell settings (see below).
+*   To adjust exactly the width (in pixels or percentages) of a cell, select the <img src="8_Tables_image.png" width="19" height="19"> button.
+
+## Inserting new rows and new columns
+
+*   To insert a new column, click on a desired location, then press the <img src="Tables_image.png" width="18" height="20"> button from the formatting toolbar and select _Insert column left or right._
+*   To insert a new row, click on a desired location, then press the <img src="7_Tables_image.png" width="20" height="18"> button and select _Insert row above_ or _below_.
+    *   A quicker alternative to creating a new row while at the end of the table is to press the <kbd>Tab</kbd> key.
+
+## Merging cells
+
+To merge two or more cells together, simply select them via drag & drop and press the <img src="1_Tables_image.png" width="19" height="19"> button from the formatting toolbar.
+
+More options are available by pressing the arrow next to it:
+
+*   Click on a single cell and select Merge cell up/down/right/left to merge with an adjacent cell.
+*   Select _Split cell vertically_ or _horizontally_, to split a cell into multiple cells (can also be used to undo a merge).
+
+## Table properties
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:312/311;" src="2_Tables_image.png" width="312" height="311"></figure>
+
+The table properties can be accessed via the <img src="12_Tables_image.png" width="19" height="19"> button and allows for the following adjustments:
+
+*   Border (not the border of the cells, but the outer rim of the table), which includes the style (single, double), color and width.
+*   The background color, with none set by default.
+*   The width and height of the table in percentage (must end with `%`) or pixels (must end with `px`).
+*   The alignment of the table.
+    *   Left or right-aligned, case in which the text will flow next to it.
+    *   Centered, case in which text will avoid the table, regardless of the table width.
+
+The table will immediately update to reflect the changes, but the _Save_ button must be pressed for the changes to persist.
+
+## Cell properties
+
+<figure class="image image-style-align-right"><img style="aspect-ratio:320/386;" src="3_Tables_image.png" width="320" height="386"></figure>
+
+Similarly to table properties, the <img src="11_Tables_image.png" width="19" height="19"> button opens a popup which adjusts the styling of one or more cells (based on the user's selection).
+
+The following options can be adjusted:
+
+*   The border style, color and width (same as table properties), but applying to the current cell only.
+*   The background color, with none set by default.
+*   The width and height of the cell in percentage (must end with `%`) or pixels (must end with `px`).
+*   The padding (the distance of the text compared to the cell's borders).
+*   The alignment of the text, both horizontally (left, centered, right, justified) and vertically (top, middle or bottom).
+
+The cell will immediately update to reflect the changes, but the _Save_ button must be pressed for the changes to persist.
+
+## Caption
+
+Press the <img src="4_Tables_image.png" width="18" height="17"> button to insert a caption or a text description of the table, which is going to be displayed above the table.
+
+## Tables with invisible borders
+
+Tables can be set to have invisible borders in order to allow for basic layouts (columns, grids) of text or [images](Images.md) without the distraction of their border:
+
+1.  First insert a table with the desired number of columns and rows.
+2.  Select the entire table.
+3.  In _Table properties_, set:
+    1.  _Style_ to _Single_
+    2.  _Color_ to `transparent`
+    3.  Width to `1px`.
+4.  In Cell Properties, set the same as on the previous step.
+
+## Markdown import/export
+
+Simple tables are exported in GitHub-flavored Markdown format (e.g. a series of `|` items). If the table is found to be more complex (it contains HTML elements, has custom sizes or images), the table is converted to a HTML one instead.
+
+Generally formatting loss should be minimal when exported to Markdown due to the fallback to HTML formatting.

src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/CKEditor.html

@@ -45,12 +45,15 @@
         <p>Apart from that, Trilium also has its own set of specific plugins such
           as:</p>
         <ul>
-          <li>Cut to note</li>
-          <li>Include note</li>
+          <li><a class="reference-link" href="#root/_help_2x0ZAX9ePtzV">Cut to subnote</a>
+          </li>
+          <li><a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>
+          </li>
           <li>Mentions, for linking pages.</li>
-          <li>Markdown import.</li>
-          <li>Reference links.</li>
-          <li>etc.</li>
+          <li><a class="reference-link" href="#root/_help_Oau6X9rCuegd">Markdown</a>
+          </li>
+          <li><a href="#root/_help_QEAPj01N5f7w">Reference links</a>
+          </li>
         </ul>
       </div>
     </div>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Keyboard Shortcuts.html

@@ -85,11 +85,11 @@
           <li><kbd>Del</kbd> - delete note / sub-tree</li>
         </ul>
         <h2>Editing notes</h2>
-        <p>Trilium uses CKEditor 5 for the <a href="#root/_help_iPIMuisry3hd">text notes</a> and
-          CodeMirror 5 for <a href="#root/_help_6f9hih2hXXZk">code notes</a>. Check
-          the documentation of these projects to see all their built-in keyboard
-          shortcuts.</p>
         <ul>
+          <li>For&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_iPIMuisry3hd">Text</a>&nbsp;notes,
+            refer to&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_oiVPnW8QfnvS">Keyboard shortcuts</a>&nbsp;and&nbsp;
+            <a
+            class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_QrtTYPmdd1qq">Markdown-like formatting</a>.</li>
           <li><kbd>Alt</kbd>-<kbd>F10</kbd> - bring up inline formatting toolbar (arrow
             keys <kbd><span>←</span></kbd>,<kbd><span>→</span></kbd> to navigate, <kbd>Enter</kbd> to
             apply)</li>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Read-Only Notes.html

@@ -37,11 +37,11 @@
         <ul>
           <li><strong>Auto</strong>
             <br>This is the default behavior in which the note will be editable by default,
-            unless it becomes large enough to trigger read-only mode. &nbsp;</li>
+            unless it becomes large enough to trigger read-only mode.</li>
           <li><strong>Read-only</strong>
             <br>The note will be always marked as read-only, regardless of its size. Nevertheless,
             it's still possible to temporarily edit the note if needed. This is generally
-            useful for notes that are not prone to change. &nbsp;</li>
+            useful for notes that are not prone to change.</li>
           <li><strong>Always Editable</strong>
             <br>This option will bypass the automatic read-only activation for this particular
             note. It's useful for large notes that are frequently edited.</li>

src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Zoom.html

@@ -0,0 +1,19 @@
+<html>
+  
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../style.css">
+    <base target="_parent">
+    <title data-trilium-title>Zoom</title>
+  </head>
+  
+  <body>
+    <div class="content">
+       <h1 data-trilium-h1>Zoom</h1>
+
+      <div class="ck-content"></div>
+    </div>
+  </body>
+
+</html>

src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Text.html

@@ -13,74 +13,178 @@
        <h1 data-trilium-h1>Text</h1>
 
       <div class="ck-content">
-        <p>Trilium utilizes the powerful <a href="https://ckeditor.com/ckeditor-5/">CKEditor 5</a> as
-          its text editing component.</p>
-        <h2>Formatting Options</h2>
-        <p>The Trilium text note interface does not display toolbars or formatting
-          options by default. These can be accessed by:</p>
-        <p>
-          <img src="1_Text_text-notes-formatting.png" alt="inline note formatting">
-        </p>
-        <ol>
-          <li>Selecting text to bring up an inline toolbar.</li>
-        </ol>
-        <p>
-          <img src="Text_text-notes-formatting.png" alt="formating note block">2. Clicking on the block toolbar.</p>
-        <h2>Read-Only vs. Editing Mode</h2>
-        <p>Text notes are usually opened in edit mode. However, they may open in
-          read-only mode if the note is too big or the note is explicitly marked
-          as read-only. For more information, see&nbsp;<a href="#root/_help_CoFPLs3dRlXc">Read-Only Notes</a>.</p>
-        <h2>General Formatting</h2>
-        <p>Since Trilium uses CKEditor, all of its formatting options are available
-          here. You may use the graphical toolbar shown above, or enter formatting
-          such as markdown markdown directly in the text. Examples include:</p>
+        <p>The default note type in Trilium, text notes allow for rich formatting,
+          tables, images, admonitions and a handful of other features.</p>
+        <h2>Formatting bars</h2>
+        <p>Most of the interaction with text notes is done via the built-in toolbars.
+          Depending on preference, there are two different layouts:</p>
         <ul>
-          <li><strong>Bold</strong>: Type <code>**text**</code> or <code>__text__</code>
+          <li>The <em>Floating toolbar</em> is hidden by default and only appears when
+            needed. In this mode there are actually two different toolbars:
+            <br>
+            <img src="1_Text_image.png" width="496" height="91">
+            <img src="2_Text_image.png" width="812" height="114">
           </li>
-          <li><em>Italic</em>: Type <code>*text*</code> or <code>_text_</code>
-          </li>
-          <li><del>Strikethrough</del>: Type <code>~~text~~</code>
-          </li>
-        </ul>
-        <h3>Lists</h3>
-        <p>See&nbsp;<a href="#root/_help_S6Xx8QIWTV66">Lists</a>.</p>
-        <h3>Blocks</h3>
-        <ul>
-          <li>Block quote: Start a line with <code>&gt;</code> followed by a space</li>
-        </ul>
-        <h2>Developer-specific formatting</h2>
-        <p>The following features are supported:</p>
-        <ul>
-          <li>Inline code</li>
-          <li><a href="#root/_help_QxEyIjRBizuC">Code blocks</a>
+          <li>A toolbar that appears when text is selected. This provides text-level
+            formatting such as bold, italic, text colors, inline code, etc.
+            <br><em><img src="Text_image.png" width="1109" height="124"></em>
           </li>
         </ul>
-        <p>See&nbsp;<a href="#root/_help_UYuUB1ZekNQU">Developer-specific formatting</a>&nbsp;for
-          more information.</p>
-        <h3>Headings</h3>
-        <p>Create headings by starting a line with <code>##</code> for heading 2, <code>###</code> for
-          heading 3, and so on up to heading 6. Note that <code>#</code> is reserved
-          for the title.</p>
-        <h3>Horizontal Line</h3>
-        <p>Insert a horizontal line by starting a line with <code>---</code>.</p>
-        <h2>Markdown &amp; Autoformat</h2>
-        <p>CKEditor supports a markdown-like editing experience, recognising syntax
-          and automatically converting it to rich text.</p>
-        <p>
-          <img src="Text_image.png">
-        </p>
-        <p>Complete documentation for this feature is available in the <a href="https://ckeditor.com/docs/ckeditor5/latest/features/autoformat.html">CKEditor documentation</a>.</p>
-        <p>If autoformatting is not desirable, press <kbd>Ctrl</kbd> + <kbd>Z</kbd> to
-          revert the text to its original form.</p>
-        <p>Note: The use of <code>#</code> for Heading 1 is not supported because it
-          is reserved for the title. Start with <code>##</code> for Heading 2. More
-          information is available <a href="https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#heading-levels">here</a>.</p>
-        <h2>Math Support</h2>
-        <p>Trilium provides math support through <a href="https://katex.org/">KaTeX</a>.</p>
+        <p>Fore more information see&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>.</p>
+        <h2>Features and formatting</h2>
+        <p>Here's a list of various features supported by text notes:</p>
         <figure
-        class="image image_resized">
-          <img style="aspect-ratio:812/585;" src="Text_math.gif" width="812" height="585">
+        class="table">
+          <table>
+            <thead>
+              <tr>
+                <th>Dedicated article</th>
+                <th>Feature</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_Gr6xFaF6ioJ5">General formatting</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>Headings (section titles, paragraph)</li>
+                    <li>Font size</li>
+                    <li>Bold, italic, underline, strike-through</li>
+                    <li>Superscript, subscript</li>
+                    <li>Font color &amp; background color</li>
+                    <li>Remove formatting</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_S6Xx8QIWTV66">Lists</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>Bulleted lists</li>
+                    <li>Numbered lists</li>
+                    <li>To-do lists</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_NwBbFdNZ9h7O">Block quotes &amp; admonitions</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>Block quotes</li>
+                    <li>Admonitions</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_NdowYOC1GFKS">Tables</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>Basic tables</li>
+                    <li>Merging cells</li>
+                    <li>Styling tables and cells.</li>
+                    <li>Table captions</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_UYuUB1ZekNQU">Developer-specific formatting</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>Inline code</li>
+                    <li>Code blocks</li>
+                    <li>Keyboard shortcuts</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_AgjCISero73a">Footnotes</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>Footnotes</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_mT0HEkOsz6i1">Images</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>Images</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_QEAPj01N5f7w">Links</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>External links</li>
+                    <li>Internal Trilium links</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>Include note</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_CohkqWQC1iBv">Insert buttons</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>Symbols</li>
+                    <li><a class="reference-link" href="#root/_help_YfYAtQBcfo5V">Math Equations</a>
+                    </li>
+                    <li>Mermaid diagrams</li>
+                    <li>Horizontal ruler</li>
+                    <li>Page break</li>
+                  </ul>
+                </td>
+              </tr>
+              <tr>
+                <td><a class="reference-link" href="#root/_help_dEHYtoWWi8ct">Other features</a>
+                </td>
+                <td>
+                  <ul>
+                    <li>Indentation</li>
+                    <li>Markdown import</li>
+                    <li><a class="reference-link" href="#root/_help_2x0ZAX9ePtzV">Cut to subnote</a>
+                    </li>
+                  </ul>
+                </td>
+              </tr>
+            </tbody>
+          </table>
           </figure>
+          
+<h2>Read-Only vs. Editing Mode</h2>
+          <p>Text notes are usually opened in edit mode. However, they may open in
+            read-only mode if the note is too big or the note is explicitly marked
+            as read-only. For more information, see&nbsp;<a class="reference-link"
+            href="#root/_help_CoFPLs3dRlXc">Read-Only Notes</a>.</p>
+          <h2>Keyboard shortcuts</h2>
+          <p>There are numerous keyboard shortcuts to format the text without having
+            to use the mouse. For a reference of all the key combinations, see&nbsp;
+            <a
+            class="reference-link" href="#root/_help_A9Oc6YKKc65v">Keyboard Shortcuts</a>. In addition, see&nbsp;<a class="reference-link"
+              href="#root/_help_QrtTYPmdd1qq">Markdown-like formatting</a>&nbsp;as an
+              alternative to the keyboard shortcuts.</p>
+          <h2>Technical details</h2>
+          <p>For the text editing functionality, Trilium uses a commercial product
+            (with an open-source base) called&nbsp;<a class="reference-link" href="#root/_help_MI26XDLSAlCD">CKEditor</a>.
+            This brings the benefit of having a powerful WYSIWYG (What You See Is What
+            You Get) editor.</p>
       </div>
     </div>
   </body>