diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json
index 2df822678..a94c30c39 100644
--- a/docs/User Guide/!!!meta.json
+++ b/docs/User Guide/!!!meta.json
@@ -1400,6 +1400,193 @@
"format": "markdown",
"dataFileName": "Bulk actions.md",
"attachments": []
+ },
+ {
+ "isClone": false,
+ "noteId": "4FahAwuGTAwC",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "tC7s2alapj8V",
+ "4FahAwuGTAwC"
+ ],
+ "title": "Note source",
+ "notePosition": 160,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "KSZ04uQ2D1St",
+ "isInheritable": false,
+ "position": 10
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "_optionsTextNotes",
+ "isInheritable": false,
+ "position": 20
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "_optionsCodeNotes",
+ "isInheritable": false,
+ "position": 30
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "MI26XDLSAlCD",
+ "isInheritable": false,
+ "position": 40
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "81SGnPGMk7Xc",
+ "isInheritable": false,
+ "position": 50
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "grjYqerjn243",
+ "isInheritable": false,
+ "position": 60
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "gBbsAeiuUxI5",
+ "isInheritable": false,
+ "position": 70
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "N4IDkixaDG9C",
+ "isInheritable": false,
+ "position": 80
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "H0mM1lTxF9JI",
+ "isInheritable": false,
+ "position": 90
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "Wxt3vVlxlYLi",
+ "isInheritable": false,
+ "position": 100
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "8YBEPzcpUgxw",
+ "isInheritable": false,
+ "position": 110
+ }
+ ],
+ "format": "markdown",
+ "dataFileName": "Note source.md",
+ "attachments": [
+ {
+ "attachmentId": "Ud3rPUVJpRWJ",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "Note source_image.png"
+ }
+ ]
+ },
+ {
+ "isClone": false,
+ "noteId": "1YeN2MzFUluU",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "tC7s2alapj8V",
+ "1YeN2MzFUluU"
+ ],
+ "title": "Technologies used",
+ "notePosition": 170,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [],
+ "format": "markdown",
+ "attachments": [],
+ "dirFileName": "Technologies used",
+ "children": [
+ {
+ "isClone": false,
+ "noteId": "MI26XDLSAlCD",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "tC7s2alapj8V",
+ "1YeN2MzFUluU",
+ "MI26XDLSAlCD"
+ ],
+ "title": "CKEditor",
+ "notePosition": 10,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [],
+ "format": "markdown",
+ "dataFileName": "CKEditor.md",
+ "attachments": []
+ },
+ {
+ "isClone": false,
+ "noteId": "N4IDkixaDG9C",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "tC7s2alapj8V",
+ "1YeN2MzFUluU",
+ "N4IDkixaDG9C"
+ ],
+ "title": "MindElixir",
+ "notePosition": 20,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [],
+ "format": "markdown",
+ "dataFileName": "MindElixir.md",
+ "attachments": []
+ },
+ {
+ "isClone": false,
+ "noteId": "H0mM1lTxF9JI",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "tC7s2alapj8V",
+ "1YeN2MzFUluU",
+ "H0mM1lTxF9JI"
+ ],
+ "title": "Excalidraw",
+ "notePosition": 30,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [],
+ "format": "markdown",
+ "dataFileName": "Excalidraw.md",
+ "attachments": []
+ }
+ ]
}
]
},
@@ -2802,6 +2989,64 @@
"format": "markdown",
"dataFileName": "Quick search.md",
"attachments": []
+ },
+ {
+ "isClone": false,
+ "noteId": "8YBEPzcpUgxw",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "gh7bpGYxajRS",
+ "Vc8PjrjAGuOp",
+ "8YBEPzcpUgxw"
+ ],
+ "title": "Note buttons",
+ "notePosition": 90,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "BlN9DFI679QC",
+ "isInheritable": false,
+ "position": 10
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "vZWERwf8U3nx",
+ "isInheritable": false,
+ "position": 20
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "4FahAwuGTAwC",
+ "isInheritable": false,
+ "position": 30
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "0vhv7lsOLy82",
+ "isInheritable": false,
+ "position": 40
+ }
+ ],
+ "format": "markdown",
+ "dataFileName": "Note buttons.md",
+ "attachments": [
+ {
+ "attachmentId": "iln72O2Xo8zy",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "Note buttons_image.png"
+ }
+ ]
}
]
},
diff --git a/docs/User Guide/User Guide/Advanced Usage/Note source.md b/docs/User Guide/User Guide/Advanced Usage/Note source.md
new file mode 100644
index 000000000..9a1fdcac8
--- /dev/null
+++ b/docs/User Guide/User Guide/Advanced Usage/Note source.md
@@ -0,0 +1,55 @@
+# Note source
+## Understanding the source code of the different notes
+
+Internally, the structure of the content of each note is different based on the [Note Types](../Note%20Types).
+
+For example:
+
+* [Text Notes](#root/_hidden/_options/_optionsTextNotes) are represented internally as HTML, using the [CKEditor](Technologies%20used/CKEditor.md) representation. Note that due to the custom plugins, some HTML elements are specific to Trilium only, for example the admonitions.
+* [Code Notes](#root/_hidden/_options/_optionsCodeNotes) are plain text and are represented internally as-is.
+* [Geo map](../Note%20Types/Geo%20map.md) notes contain only minimal information (viewport, zoom) as a JSON.
+* [Canvas](../Note%20Types/Canvas.md) notes are represented as JSON, with Trilium's own information alongside with [Excalidraw](Technologies%20used/Excalidraw.md)'s internal JSON representation format.
+* [Mind Map](../Note%20Types/Mind%20Map.md) notes are represented as JSON, with the internal format of [MindElixir](Technologies%20used/MindElixir.md).
+
+Note that some information is also stored as [Attachments](../Attachments). For example [Canvas](../Note%20Types/Canvas.md) notes use the attachments feature to store the custom libraries, and alongside with [Mind Map](../Note%20Types/Mind%20Map.md) and other similar note types it stores an SVG representation of the content for use in other features such as including in other notes, shared notes, etc.
+
+Here's part of the HTML representation of this note, as it's stored in the database (but prettified).
+
+```html
+
+ Understanding the source code of the different notes
+
+
+ Internally, the structure of the content of each note is different based on the
+
+ Note Types
+
+ .
+
+```
+
+## Viewing the source code
+
+It is possible to view the source code of a note by pressing the contextual menu in [Note buttons](../Basic%20Concepts/UI%20Elements/Note%20buttons.md) and selecting _Note source_.
+
+
+
+The source code will be displayed in a new tab.
+
+For some note types, such as text notes, the source code is also formatted in order to be more easily readable.
+
+## Modifying the source code
+
+It is possible to modify the source code of a note directly, however not via the _Note source_ functionality.
+
+To do so:
+
+1. Change the note type from the real note type (e.g. Canvas, Geo Type) to Code (plain text) or the corresponding format such as JSON or HTML.
+2. Confirm the warning about changing the note type.
+3. The source code will appear, make the necessary modifications.
+4. Change the note type back to the real note type.
+
+> [!WARNING]
+> Depending on the changes made, there is a risk that the note will not render properly. It's best to save a revision before making any big changes.
+>
+> If the note does not render properly, modify the source code again or revert to a prior revision. Since the error handling for unexpected changes might not always be perfect, it be required to refresh the application.
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Advanced Usage/Note source_image.png b/docs/User Guide/User Guide/Advanced Usage/Note source_image.png
new file mode 100644
index 000000000..a46c7e683
Binary files /dev/null and b/docs/User Guide/User Guide/Advanced Usage/Note source_image.png differ
diff --git a/docs/User Guide/User Guide/Advanced Usage/Technologies used/CKEditor.md b/docs/User Guide/User Guide/Advanced Usage/Technologies used/CKEditor.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/docs/User Guide/User Guide/Advanced Usage/Technologies used/Excalidraw.md b/docs/User Guide/User Guide/Advanced Usage/Technologies used/Excalidraw.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/docs/User Guide/User Guide/Advanced Usage/Technologies used/MindElixir.md b/docs/User Guide/User Guide/Advanced Usage/Technologies used/MindElixir.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/docs/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons.md b/docs/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons.md
new file mode 100644
index 000000000..6e6c925e5
--- /dev/null
+++ b/docs/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons.md
@@ -0,0 +1,5 @@
+# Note buttons
+To the right of the [Ribbon](Ribbon.md) there are a few more buttons: 
+
+* The Note Revisions button displays the [Note Revisions](../Note/Note%20Revisions.md) for that particular note.
+* The contextual menu offers commands for the note or its subtree, such as import, export, viewing the [Note source code](../../Advanced%20Usage/Note%20source.md) or [Attachments](../Note/Attachments.md).
\ No newline at end of file
diff --git a/docs/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons_image.png b/docs/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons_image.png
new file mode 100644
index 000000000..6009bd85a
Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/!!!meta.json b/src/public/app/doc_notes/en/User Guide/!!!meta.json
index ede3e0d3c..4f53aaabf 100644
--- a/src/public/app/doc_notes/en/User Guide/!!!meta.json
+++ b/src/public/app/doc_notes/en/User Guide/!!!meta.json
@@ -1400,6 +1400,193 @@
"format": "html",
"dataFileName": "Bulk actions.html",
"attachments": []
+ },
+ {
+ "isClone": false,
+ "noteId": "4FahAwuGTAwC",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "tC7s2alapj8V",
+ "4FahAwuGTAwC"
+ ],
+ "title": "Note source",
+ "notePosition": 160,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "KSZ04uQ2D1St",
+ "isInheritable": false,
+ "position": 10
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "_optionsTextNotes",
+ "isInheritable": false,
+ "position": 20
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "_optionsCodeNotes",
+ "isInheritable": false,
+ "position": 30
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "MI26XDLSAlCD",
+ "isInheritable": false,
+ "position": 40
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "81SGnPGMk7Xc",
+ "isInheritable": false,
+ "position": 50
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "grjYqerjn243",
+ "isInheritable": false,
+ "position": 60
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "gBbsAeiuUxI5",
+ "isInheritable": false,
+ "position": 70
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "N4IDkixaDG9C",
+ "isInheritable": false,
+ "position": 80
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "H0mM1lTxF9JI",
+ "isInheritable": false,
+ "position": 90
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "Wxt3vVlxlYLi",
+ "isInheritable": false,
+ "position": 100
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "8YBEPzcpUgxw",
+ "isInheritable": false,
+ "position": 110
+ }
+ ],
+ "format": "html",
+ "dataFileName": "Note source.html",
+ "attachments": [
+ {
+ "attachmentId": "Ud3rPUVJpRWJ",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "Note source_image.png"
+ }
+ ]
+ },
+ {
+ "isClone": false,
+ "noteId": "1YeN2MzFUluU",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "tC7s2alapj8V",
+ "1YeN2MzFUluU"
+ ],
+ "title": "Technologies used",
+ "notePosition": 170,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [],
+ "format": "html",
+ "attachments": [],
+ "dirFileName": "Technologies used",
+ "children": [
+ {
+ "isClone": false,
+ "noteId": "MI26XDLSAlCD",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "tC7s2alapj8V",
+ "1YeN2MzFUluU",
+ "MI26XDLSAlCD"
+ ],
+ "title": "CKEditor",
+ "notePosition": 10,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [],
+ "format": "html",
+ "dataFileName": "CKEditor.html",
+ "attachments": []
+ },
+ {
+ "isClone": false,
+ "noteId": "N4IDkixaDG9C",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "tC7s2alapj8V",
+ "1YeN2MzFUluU",
+ "N4IDkixaDG9C"
+ ],
+ "title": "MindElixir",
+ "notePosition": 20,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [],
+ "format": "html",
+ "dataFileName": "MindElixir.html",
+ "attachments": []
+ },
+ {
+ "isClone": false,
+ "noteId": "H0mM1lTxF9JI",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "tC7s2alapj8V",
+ "1YeN2MzFUluU",
+ "H0mM1lTxF9JI"
+ ],
+ "title": "Excalidraw",
+ "notePosition": 30,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [],
+ "format": "html",
+ "dataFileName": "Excalidraw.html",
+ "attachments": []
+ }
+ ]
}
]
},
@@ -2802,6 +2989,64 @@
"format": "html",
"dataFileName": "Quick search.html",
"attachments": []
+ },
+ {
+ "isClone": false,
+ "noteId": "8YBEPzcpUgxw",
+ "notePath": [
+ "pOsGYCXsbNQG",
+ "gh7bpGYxajRS",
+ "Vc8PjrjAGuOp",
+ "8YBEPzcpUgxw"
+ ],
+ "title": "Note buttons",
+ "notePosition": 90,
+ "prefix": null,
+ "isExpanded": false,
+ "type": "text",
+ "mime": "text/html",
+ "attributes": [
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "BlN9DFI679QC",
+ "isInheritable": false,
+ "position": 10
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "vZWERwf8U3nx",
+ "isInheritable": false,
+ "position": 20
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "4FahAwuGTAwC",
+ "isInheritable": false,
+ "position": 30
+ },
+ {
+ "type": "relation",
+ "name": "internalLink",
+ "value": "0vhv7lsOLy82",
+ "isInheritable": false,
+ "position": 40
+ }
+ ],
+ "format": "html",
+ "dataFileName": "Note buttons.html",
+ "attachments": [
+ {
+ "attachmentId": "iln72O2Xo8zy",
+ "title": "image.png",
+ "role": "image",
+ "mime": "image/png",
+ "position": 10,
+ "dataFileName": "Note buttons_image.png"
+ }
+ ]
}
]
},
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Note source.html b/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Note source.html
new file mode 100644
index 000000000..f55ffaaba
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Note source.html
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+ Note source
+
+
+
+
+
Note source
+
+
+
Understanding the source code of the different notes
+
Internally, the structure of the content of each note is different based
+ on the Note Types.
+
For example:
+
+
Text Notes are
+ represented internally as HTML, using the CKEditor representation.
+ Note that due to the custom plugins, some HTML elements are specific to
+ Trilium only, for example the admonitions.
+
Code Notes are
+ plain text and are represented internally as-is.
+
Geo map notes
+ contain only minimal information (viewport, zoom) as a JSON.
+
Canvas notes
+ are represented as JSON, with Trilium's own information alongside with
+ Excalidraw's internal JSON representation format.
+
Mind Map notes
+ are represented as JSON, with the internal format of MindElixir.
+
+
Note that some information is also stored as Attachments. For example Canvas notes use the attachments
+ feature to store the custom libraries, and alongside with Mind Map and other similar
+ note types it stores an SVG representation of the content for use in other
+ features such as including in other notes, shared notes, etc.
+
Here's part of the HTML representation of this note, as it's stored in
+ the database (but prettified).
<h2>
+ Understanding the source code of the different notes
+</h2>
+<p>
+ Internally, the structure of the content of each note is different based on the
+ <a class="reference-link" href="../Note%20Types">
+ Note Types
+ </a>
+ .
+</p>
+
Viewing the source code
+
It is possible to view the source code of a note by pressing the contextual
+ menu in Note buttons and
+ selecting Note source.
+
+
+
+
The source code will be displayed in a new tab.
+
For some note types, such as text notes, the source code is also formatted
+ in order to be more easily readable.
+
Modifying the source code
+
It is possible to modify the source code of a note directly, however not
+ via the Note source functionality.
+
To do so:
+
+
Change the note type from the real note type (e.g. Canvas, Geo Type) to
+ Code (plain text) or the corresponding format such as JSON or HTML.
+
Confirm the warning about changing the note type.
+
The source code will appear, make the necessary modifications.
+
Change the note type back to the real note type.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Note source_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Note source_image.png
new file mode 100644
index 000000000..a46c7e683
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Note source_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/CKEditor.html b/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/CKEditor.html
new file mode 100644
index 000000000..cf23966e6
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/CKEditor.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+ CKEditor
+
+
+
+
+
CKEditor
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/Excalidraw.html b/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/Excalidraw.html
new file mode 100644
index 000000000..9548ecbad
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/Excalidraw.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+ Excalidraw
+
+
+
+
+
Excalidraw
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/MindElixir.html b/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/MindElixir.html
new file mode 100644
index 000000000..dd6eab6da
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Technologies used/MindElixir.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+ MindElixir
+
+
+
+
+
MindElixir
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons.html b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons.html
new file mode 100644
index 000000000..8f238af6c
--- /dev/null
+++ b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+ Note buttons
+
+
+
+
+
Note buttons
+
+
+
To the right of the Ribbon there
+ are a few more buttons:
+
+
+
+
The Note Revisions button displays the Note Revisions for that particular
+ note.
+
The contextual menu offers commands for the note or its subtree, such
+ as import, export, viewing the Note source code or
+ Attachments.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons_image.png b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons_image.png
new file mode 100644
index 000000000..6009bd85a
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts/UI Elements/Note buttons_image.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/navigation.html b/src/public/app/doc_notes/en/User Guide/navigation.html
index 02360cee5..ef6019086 100644
--- a/src/public/app/doc_notes/en/User Guide/navigation.html
+++ b/src/public/app/doc_notes/en/User Guide/navigation.html
@@ -74,6 +74,21 @@