- {note && blob?.contentLength === 0 && (
- <>
- switchNoteType(note.noteId, noteType)}
- />
- ))}
- {collectionTemplates.length > 0 &&
- );
-}
-
-function MoreNoteTypes({ noteId, restNoteTypes }: { noteId: string, restNoteTypes: NoteTypeMapping[] }) {
- return (
- {t("note_title.note_type_switcher_label", { type: currentNoteTypeData?.title.toLocaleLowerCase() })}
- {pinnedNoteTypes.map(noteType => noteType.type !== currentNoteType && (
- {t("edited_notes.no_edited_notes_found")}
- )));
-}
-//#endregion
diff --git a/apps/client/src/widgets/layout/NoteBadges.css b/apps/client/src/widgets/layout/NoteBadges.css
index 39fafd90e..8de12b810 100644
--- a/apps/client/src/widgets/layout/NoteBadges.css
+++ b/apps/client/src/widgets/layout/NoteBadges.css
@@ -16,6 +16,13 @@
&.share-badge {--color: var(--badge-share-background-color);}
&.clipped-note-badge {--color: var(--badge-clipped-note-background-color);}
&.execute-badge {--color: var(--badge-execute-background-color);}
+ min-width: 0;
+
+ .text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ min-width: 0;
+ }
}
.dropdown-badge {
diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css
index 7d025ef87..db2810c1e 100644
--- a/apps/client/src/widgets/layout/NoteTitleActions.css
+++ b/apps/client/src/widgets/layout/NoteTitleActions.css
@@ -4,8 +4,41 @@ body.experimental-feature-new-layout {
}
.title-actions {
- &.visible:not(:empty) {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5em;
+
+ &:not(:empty) {
padding: 0.75em 15px;
}
+
+ .edited-notes {
+ .collapsible-inner-body {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.3em;
+
+ .badge {
+ margin: 0;
+ color: inherit;
+ text-transform: none;
+ text-decoration: none;
+ display: inline-block;
+ transition: background-color 250ms ease-in, color 250ms ease-in;
+
+ &:hover {
+ background-color: var(--link-hover-background);
+ color: var(--link-hover-color);
+ }
+ }
+ }
+ }
+
+ .promoted-attributes-widget {
+ .promoted-attributes-container {
+ margin: 0;
+ padding: 0;
+ }
+ }
}
}
diff --git a/apps/client/src/widgets/layout/NoteTitleActions.tsx b/apps/client/src/widgets/layout/NoteTitleActions.tsx
index 2e13c5f10..dd1ed2342 100644
--- a/apps/client/src/widgets/layout/NoteTitleActions.tsx
+++ b/apps/client/src/widgets/layout/NoteTitleActions.tsx
@@ -1,7 +1,7 @@
import "./NoteTitleActions.css";
import clsx from "clsx";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
import NoteContext from "../../components/note_context";
import FNote from "../../entities/fnote";
@@ -9,29 +9,31 @@ import { t } from "../../services/i18n";
import CollectionProperties from "../note_bars/CollectionProperties";
import { checkFullHeight, getExtendedWidgetType } from "../NoteDetail";
import { PromotedAttributesContent, usePromotedAttributeData } from "../PromotedAttributes";
+import SimpleBadge from "../react/Badge";
import Collapsible, { ExternallyControlledCollapsible } from "../react/Collapsible";
-import { useNoteContext, useNoteProperty, useTriliumEvent } from "../react/hooks";
+import { useNoteContext, useNoteLabel, useNoteProperty, useTriliumEvent, useTriliumOptionBool } from "../react/hooks";
+import NoteLink, { NewNoteLink } from "../react/NoteLink";
+import { useEditedNotes } from "../ribbon/EditedNotesTab";
import SearchDefinitionTab from "../ribbon/SearchDefinitionTab";
+import NoteTypeSwitcher from "./NoteTypeSwitcher";
export default function NoteTitleActions() {
const { note, ntxId, componentId, noteContext } = useNoteContext();
const isHiddenNote = note && note.noteId !== "_search" && note.noteId.startsWith("_");
const noteType = useNoteProperty(note, "type");
- const items = [
- note && 0 && "visible")}>
- {items}
+
+
+ );
+}
+
+function EditedNotesContent({ note }: { note: FNote }) {
+ const editedNotes = useEditedNotes(note);
+
+ return (editedNotes !== undefined &&
+ (editedNotes.length > 0 ? editedNotes?.map(editedNote => (
+ ([ "text", "code", "book", "canvas" ]);
+const supportedNoteTypes = new Set([
+ "text", "code"
+]);
+
+export default function NoteTypeSwitcher() {
+ const { note } = useNoteContext();
+ const blob = useNoteBlob(note);
+ const currentNoteType = useNoteProperty(note, "type");
+ const { pinnedNoteTypes, restNoteTypes } = useMemo(() => {
+ const pinnedNoteTypes: NoteTypeMapping[] = [];
+ const restNoteTypes: NoteTypeMapping[] = [];
+ for (const noteType of NOTE_TYPES) {
+ if (noteType.reserved || noteType.static || noteType.type === "book") continue;
+ if (SWITCHER_PINNED_NOTE_TYPES.has(noteType.type)) {
+ pinnedNoteTypes.push(noteType);
+ } else {
+ restNoteTypes.push(noteType);
+ }
+ }
+ return { pinnedNoteTypes, restNoteTypes };
+ }, []);
+ const currentNoteTypeData = useMemo(() => NOTE_TYPES.find(t => t.type === currentNoteType), [ currentNoteType ]);
+ const { builtinTemplates, collectionTemplates } = useBuiltinTemplates();
+
+ return (currentNoteType && supportedNoteTypes.has(currentNoteType) &&
+
+ {restNoteTypes.map(noteType => (
+ switchNoteType(noteId, noteType)}
+ >{noteType.title}
+ ))}
+
+ );
+}
+
+function CollectionNoteTypes({ noteId, collectionTemplates }: { noteId: string, collectionTemplates: FNote[] }) {
+ return (
+
+ {collectionTemplates.map(collectionTemplate => (
+ setTemplate(noteId, collectionTemplate.noteId)}
+ >{collectionTemplate.title}
+ ))}
+
+ );
+}
+
+function TemplateNoteTypes({ noteId, builtinTemplates }: { noteId: string, builtinTemplates: FNote[] }) {
+ const [ userTemplates, setUserTemplates ] = useState([]);
+
+ async function refreshTemplates() {
+ const templateNoteIds = await server.get("search-templates");
+ const templateNotes = await froca.getNotes(templateNoteIds);
+ setUserTemplates(templateNotes);
+ }
+
+ // First load.
+ useEffect(() => {
+ refreshTemplates();
+ }, []);
+
+ // React to external changes.
+ useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+ if (loadResults.getAttributeRows().some(attr => attr.type === "label" && attr.name === "template")) {
+ refreshTemplates();
+ }
+ });
+
+ return (
+
+ {userTemplates.map(template =>
+ );
+}
+
+function TemplateItem({ noteId, template }: { noteId: string, template: FNote }) {
+ return (
+ setTemplate(noteId, template.noteId)}
+ >{template.title}
+ );
+}
+
+function switchNoteType(noteId: string, { type, mime }: NoteTypeMapping) {
+ return server.put(`notes/${noteId}/type`, { type, mime });
+}
+
+function setTemplate(noteId: string, templateId: string) {
+ return attributes.setRelation(noteId, "template", templateId);
+}
+
+function useBuiltinTemplates() {
+ const [ templates, setTemplates ] = useState<{
+ builtinTemplates: FNote[];
+ collectionTemplates: FNote[];
+ }>({
+ builtinTemplates: [],
+ collectionTemplates: []
+ });
+
+ async function loadBuiltinTemplates() {
+ const templatesRoot = await froca.getNote("_templates");
+ if (!templatesRoot) return;
+ const childNotes = await templatesRoot.getChildNotes();
+ const builtinTemplates: FNote[] = [];
+ const collectionTemplates: FNote[] = [];
+ for (const childNote of childNotes) {
+ if (!childNote.hasLabel("template")) continue;
+ if (childNote.hasLabel("collection")) {
+ collectionTemplates.push(childNote);
+ } else {
+ builtinTemplates.push(childNote);
+ }
+ }
+ setTemplates({ builtinTemplates, collectionTemplates });
+ }
+
+ useEffect(() => {
+ loadBuiltinTemplates();
+ }, []);
+
+ return templates;
+}
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index 637661095..cdca69cef 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -37,7 +37,7 @@ body.experimental-feature-new-layout {
.title-row {
container-type: size;
transition: border 400ms ease-out;
-
+
&.note-split-title {
border-bottom: 1px solid var(--main-border-color);
@@ -56,13 +56,13 @@ body.experimental-feature-new-layout {
--note-icon-container-padding-size: 6px;
margin-inline: 0;
}
-
+
.note-title-widget {
--note-title-size: 18px;
--note-title-padding-inline: 0;
}
- @container (max-width: 700px) {
+ @container (max-width: 600px) {
.note-title-widget {
--note-title-size: 1.25rem;
--note-title-padding-inline: 4px;
@@ -80,7 +80,7 @@ body.experimental-feature-new-layout {
.ext-badge .text {
display: none;
}
-
+
.ext-badge {
--size: 2em;
width: var(--size);
diff --git a/apps/client/src/widgets/react/Badge.css b/apps/client/src/widgets/react/Badge.css
index cf661b4f9..8eac80b7d 100644
--- a/apps/client/src/widgets/react/Badge.css
+++ b/apps/client/src/widgets/react/Badge.css
@@ -50,16 +50,30 @@
white-space: nowrap;
border-radius: var(--badge-radius);
+ button,
+ .btn {
+ min-width: 0;
+ overflow: hidden;
+ }
+
.ext-badge {
border-radius: 0;
.text {
display: inline-flex;
align-items: center;
+ min-width: 0;
+
+ .text-inner {
+ min-width: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
.arrow {
font-size: 1.3em;
- margin-left: 0.25em;
+ margin-inline-start: 0.25em;
+ margin-inline-end: 0;
}
}
}
diff --git a/apps/client/src/widgets/react/Badge.tsx b/apps/client/src/widgets/react/Badge.tsx
index 6e17ed0ce..48fa7fe09 100644
--- a/apps/client/src/widgets/react/Badge.tsx
+++ b/apps/client/src/widgets/react/Badge.tsx
@@ -60,7 +60,10 @@ export function BadgeWithDropdown({ text, children, tooltip, className, dropdown
{text} , "id" | "className"> {
@@ -66,14 +67,14 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
return () => {
resizeObserver.disconnect();
dropdown.dispose();
- }
+ };
}, []);
const onShown = useCallback(() => {
setShown(true);
externalOnShown?.();
hideTooltip();
- }, [ hideTooltip ])
+ }, [ hideTooltip ]);
const onHidden = useCallback(() => {
setShown(false);
@@ -122,7 +123,7 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
{...buttonProps}
>
{text}
-
+
- )
+ );
}
diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx
index a415c8b86..7a86be7ef 100644
--- a/apps/client/src/widgets/react/NoteLink.tsx
+++ b/apps/client/src/widgets/react/NoteLink.tsx
@@ -105,22 +105,17 @@ export function NewNoteLink({ notePath, viewScope, noContextMenu, showNoteIcon,
const [ archived ] = useNoteLabelBoolean(note, "archived");
return (
-
-
- {icon &&
+
);
}
-function SearchProperties({ note, ntxId }: { note: FNote, ntxId: string | null | undefined }) {
+function SearchProperties({ note, ntxId }: { note: FNote | null | undefined, ntxId: string | null | undefined }) {
return (note &&
{t("edited_notes.no_edited_notes_found")}
+ )));
+}
+//#endregion
diff --git a/apps/client/src/widgets/layout/NoteTypeSwitcher.css b/apps/client/src/widgets/layout/NoteTypeSwitcher.css
new file mode 100644
index 000000000..574924d03
--- /dev/null
+++ b/apps/client/src/widgets/layout/NoteTypeSwitcher.css
@@ -0,0 +1,33 @@
+@keyframes note-type-switcher-intro {
+ from {
+ opacity: 0;
+ } to {
+ opacity: 1;
+ }
+}
+
+.note-type-switcher {
+ --badge-radius: 12px;
+
+ position: relative;
+ top: 5px;
+ padding: .25em 0;
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+ min-width: 0;
+ gap: 5px;
+ min-height: 35px;
+
+ >* {
+ flex-shrink: 0;
+ animation: note-type-switcher-intro 200ms ease-in;
+ }
+
+ .ext-badge {
+ --color: var(--input-background-color);
+ color: var(--main-text-color);
+ font-size: 0.9rem;
+ flex-shrink: 0;
+ }
+}
diff --git a/apps/client/src/widgets/layout/NoteTypeSwitcher.tsx b/apps/client/src/widgets/layout/NoteTypeSwitcher.tsx
new file mode 100644
index 000000000..60e597bb0
--- /dev/null
+++ b/apps/client/src/widgets/layout/NoteTypeSwitcher.tsx
@@ -0,0 +1,182 @@
+import "./NoteTypeSwitcher.css";
+
+import { NoteType } from "@triliumnext/commons";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import FNote from "../../entities/fnote";
+import attributes from "../../services/attributes";
+import froca from "../../services/froca";
+import { t } from "../../services/i18n";
+import { NOTE_TYPES, NoteTypeMapping } from "../../services/note_types";
+import server from "../../services/server";
+import { Badge, BadgeWithDropdown } from "../react/Badge";
+import { FormDropdownDivider, FormListItem } from "../react/FormList";
+import { useNoteBlob, useNoteContext, useNoteProperty, useTriliumEvent } from "../react/hooks";
+import { onWheelHorizontalScroll } from "../widget_utils";
+
+const SWITCHER_PINNED_NOTE_TYPES = new Set
+ {note && blob?.contentLength === 0 && (
+ <>
+ switchNoteType(note.noteId, noteType)}
+ />
+ ))}
+ {collectionTemplates.length > 0 &&
+ );
+}
+
+function MoreNoteTypes({ noteId, restNoteTypes }: { noteId: string, restNoteTypes: NoteTypeMapping[] }) {
+ return (
+ {t("note_title.note_type_switcher_label", { type: currentNoteTypeData?.title.toLocaleLowerCase() })}
+ {pinnedNoteTypes.map(noteType => noteType.type !== currentNoteType && (
+ - {
+ // Prevent clicks directly inside the dropdown from closing.
+ if (e.target === dropdownContainerRef.current) {
+ e.stopPropagation();
+ }
+ }}
>
{shown && children}
When you run Trilium for the first time, it will generate a new database containing demo notes. These notes showcase its many features, such as:
-
-
- Relation Map +
- Relation Map -
- Day Notes +
- Day Notes -
- Weight Tracker +
- Weight Tracker -
- Task Manager +
- Task Manager -
- Themes +
- Themes
Restoring Demo Notes
@@ -21,10 +21,10 @@You can easily restore the demo notes by using Trilium's built-in import feature by importing them:
-
-
- Download the .zip archive with +
- Download the .zip archive with the latest version of the demo notes -
- Right click on any note in your tree under which you would like the demo +
- Right click on any note in your tree under which you would like the demo notes to be imported -
- Click "Import into note" -
- Select the .zip archive to import it +
- Click "Import into note" +
- Select the .zip archive to import it
const $dateEl = api.$container.find(".date");
+ note created previously; with the following content:const $dateEl = api.$container.find(".date");
$dateEl.text(new Date());
Now create a render note at any place and set its ~renderNote relation
to point to the HTML note. When the render note is accessed it will display:
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html
index c6983e5d7..7617ab9a4 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.html
@@ -32,41 +32,30 @@
Let's start by creating a widget that shows a message near the content
area. Follow the previous section to create a code note, and use the following
content.
-
-
-
- Legacy
- Preact (v0.101.0+)
-
-
-
-
- class HelloNoteDetail extends api.BasicWidget {
+Legacy version (jQuery)
class HelloCenterPane extends api.BasicWidget {
-constructor() {
- super();
- this.contentSized();
+ constructor() {
+ super();
+ this.contentSized();
+ }
+
+ get parentWidget() { return "center-pane" }
+
+ doRender() {
+ this.$widget = $("<span>Center pane</span>");
+ }
+
}
-get parentWidget() { return "center-pane" }
+module.exports = new HelloCenterPane();
+Refresh the application and the widget
+ should appear underneath the content area.
+Preact version
import { defineWidget } from "trilium:preact";
-doRender() {
- this.<!--FORMULA_INLINE_1766526977514_0-->("<span>Center pane</span>");
-}
- }
- module.exports = new HelloNoteDetail();
-
-
-
import { defineWidget } from "trilium:preact";export default defineWidget({
+export default defineWidget({
parent: "center-pane",
render: () => <span>Center pane from Preact.</span>
-});
-
-
-
-
+});Refresh the application and the widget should appear underneath the content area.
Widget location (parent widget)
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html index 70ab3f1ac..5386d0052 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.html @@ -30,7 +30,7 @@ class NoteTitleWidget extends api.NoteContextAwareWidget { } module.exports = new NoteTitleWidget(); -Preact widget (v0.101.0+)
import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
+Preact widget (v0.101.0+)
import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
export default defineLauncherWidget({
render: () => {
diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html
index 82c823548..1a2ce8779 100644
--- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html
+++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Preact.html
@@ -2,9 +2,9 @@
support for JSX.
Preact can be used for:
- - Render Note, where
+
- Render Note, where
a JSX code note is used instead of a HTML one.
- - Custom Widgets,
+
- Custom Widgets,
where JSX can be used to replace the old, jQuery-based mechanism.
To get started, the first step is to enable JSX in the list of Code languages.
@@ -20,22 +20,23 @@
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";
+Instead of:
api.showMessage("Hello");
+the JSX version looks like this:
import { showMessage } from "trilium:api";
showMessage("hello");
Preact API imports (hooks, components)
There's a new Script API dedicated
to Preact, which provides shared components that are also used by Trilium
- internally as well as hooks, for example.
import { useState } from "trilium:preact";
+ internally as well as hooks, for example.import { useState } from "trilium:preact";
const [ myState, setMyState ] = useState("Hi");
Exporting
JSX notes can export a component for use in Render Note or for Component libraries:
export default function() {
+ href="#root/_help_Bqde6BvPo05g">Component libraries: export default function() {
return (
<>
<p>Hello world.</p>
@@ -43,13 +44,15 @@ const [ myState, setMyState ] = useState("Hi");
);
}
Import/export are not required
-These imports are syntactic sugar meant to replace the usage for the api global
- object (see Script API).
+These imports are syntactic sugar meant to replace the usage for the
+ apiglobal 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 27aa57582..209519800 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,8 +7,8 @@
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";
-and then use them:
export default function MyRenderNote() {
+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");
return (
@@ -33,12 +33,12 @@
to custom widgets and JSX render notes.
To use it, simply:
- - Create a render note.
- - Create a child code note of JSX type with the content of this file:
+
- Create a render note.
+ - Create a child code note of JSX type with the content of this file:
Widget showcase
- - Set the
~renderNote relation of the parent note to the child
- note.
- - Refresh the render note to see the results.
+ - Set the
~renderNote relation of the parent
+ note to the child note.
+ - Refresh the render note to see the results.
\ 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 2cdec3295..a148c29f2 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
@@ -1,4 +1,4 @@
-Inline styles
<div style={{
+Inline styles
<div style={{
display: "flex",
height: "53px",
width: "fit-content",
@@ -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/docs/Developer Guide/Developer Guide/Documentation.md b/docs/Developer Guide/Developer Guide/Documentation.md
index c4c3cfb06..a7dbaff23 100644
--- a/docs/Developer Guide/Developer Guide/Documentation.md
+++ b/docs/Developer Guide/Developer Guide/Documentation.md
@@ -1,5 +1,5 @@
# Documentation
-There are multiple types of documentation for Trilium:
+There are multiple types of documentation for Trilium:
* The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing F1.
* The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
diff --git a/docs/User Guide/User Guide/Note Types/Render Note.md b/docs/User Guide/User Guide/Note Types/Render Note.md
index 828d7dfef..01e2e1c24 100644
--- a/docs/User Guide/User Guide/Note Types/Render Note.md
+++ b/docs/User Guide/User Guide/Note Types/Render Note.md
@@ -24,7 +24,7 @@ The current date & time is
Now we need to add the script. Create another Code, but this time of JavaScript (frontend) language. Make sure the newly created note is a direct child of the HTML note created previously; with the following content:
-```
+```javascript
const $dateEl = api.$container.find(".date");
$dateEl.text(new Date());
```
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md
index cc011c514..dec4cfd3f 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets.md
@@ -23,21 +23,39 @@ Wherever possible, widget examples will be both in the legacy and Preact format.
Let's start by creating a widget that shows a message near the content area. Follow the previous section to create a code note, and use the following content.
-Legacy Preact (v0.101.0+) class HelloNoteDetail extends api.BasicWidget {
+### Legacy version (jQuery)
-constructor() {
- super();
- this.contentSized();
+```
+class HelloCenterPane extends api.BasicWidget {
+
+ constructor() {
+ super();
+ this.contentSized();
+ }
+
+ get parentWidget() { return "center-pane" }
+
+ doRender() {
+ this.$widget = $("Center pane");
+ }
+
}
-get parentWidget() { return "center-pane" }
+module.exports = new HelloCenterPane();
+```
-doRender() {
- this.<!--FORMULA_INLINE_1766526977514_0-->("<span>Center pane</span>");
-}
}
module.exports = new HelloNoteDetail();
import { defineWidget } from "trilium:preact";export default defineWidget({
+[Refresh the application](../../Troubleshooting/Refreshing%20the%20application.md) and the widget should appear underneath the content area.
+
+### Preact version
+
+```
+import { defineWidget } from "trilium:preact";
+
+export default defineWidget({
parent: "center-pane",
- render: () => <span>Center pane from Preact.</span>
-});
+ render: () => Center pane from Preact.
+});
+```
[Refresh the application](../../Troubleshooting/Refreshing%20the%20application.md) and the widget should appear underneath the content area.
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md
index 78a69eb8a..c892e3365 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md
@@ -35,7 +35,7 @@ module.exports = new NoteTitleWidget();
## Preact widget (v0.101.0+)
-```
+```jsx
import { defineLauncherWidget, useActiveNoteContext } from "trilium:preact";
export default defineLauncherWidget({
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md
index db3811479..6f05765fc 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact.md
@@ -19,13 +19,13 @@ When using Preact with JSX, there is a special syntax which provides ES-like imp
Instead of:
-```
+```jsx
api.showMessage("Hello");
```
the JSX version looks like this:
-```
+```jsx
import { showMessage } from "trilium:api";
showMessage("hello");
```
@@ -34,7 +34,7 @@ showMessage("hello");
There's a new Script API dedicated to Preact, which provides shared components that are also used by Trilium internally as well as hooks, for example.
-```
+```jsx
import { useState } from "trilium:preact";
const [ myState, setMyState ] = useState("Hi");
```
@@ -43,7 +43,7 @@ const [ myState, setMyState ] = useState("Hi");
JSX notes can export a component for use in Render Note or for Component libraries:
-```
+```jsx
export default function() {
return (
<>
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md
index 8d3c86e4f..db05c9255 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Built-in components.md
@@ -5,13 +5,13 @@ Trilium comes with its own set of Preact components, some of which are also avai
To use these components, simply import them from `trilium:preact`:
-```
+```jsx
import { ActionButton, Button, LinkButton } from "trilium:preact";
```
and then use them:
-```
+```jsx
export default function MyRenderNote() {
const onClick = () => showMessage("A button was pressed");
diff --git a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md
index bda9f195a..3b959261f 100644
--- a/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md
+++ b/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/CSS.md
@@ -1,7 +1,7 @@
# CSS
## Inline styles
-```
+```jsx