Merge remote-tracking branch 'origin/develop' into feature/improved_promoted_attributes

; Conflicts: ; src/public/app/layouts/desktop_layout.js
2025-11-14 09:15:50 +01:00 · 2024-11-12 20:03:54 +02:00
parent 4032135505 693bcfb587
commit 8c5d5e384f
78 changed files with 3997 additions and 504 deletions
--- a/src/becca/entities/rows.ts
+++ b/src/becca/entities/rows.ts
@@ -38,9 +38,18 @@ export interface RecentNoteRow {
    utcDateCreated?: string;
 }

+/**
+ * Database representation of an option.
+ * 
+ * Options are key-value pairs that are used to store information such as user preferences (for example
+ * the current theme, sync server information), but also information about the state of the application).
+ */
 export interface OptionRow {
+    /** The name of the option. */
    name: string;
+    /** The value of the option. */
    value: string;
+    /** `true` if the value should be synced across multiple instances (e.g. locale) or `false` if it should be local-only (e.g. theme). */
    isSynced: boolean;
    utcDateModified?: string;
 }
--- a/src/public/app/components/tab_manager.js
+++ b/src/public/app/components/tab_manager.js
@@ -551,7 +551,7 @@ export default class TabManager extends Component {
            await this.removeNoteContext(ntxIdToRemove);
        }
    }
-
+    
    async closeOtherTabsCommand({ntxId}) {
        for (const ntxIdToRemove of this.mainNoteContexts.map(nc => nc.ntxId)) {
            if (ntxIdToRemove !== ntxId) {
@@ -560,6 +560,18 @@ export default class TabManager extends Component {
        }
    }

+    async closeRightTabsCommand({ntxId}) {
+        const ntxIds = this.mainNoteContexts.map(nc => nc.ntxId);
+        const index = ntxIds.indexOf(ntxId);
+
+        if (index !== -1) {
+            const idsToRemove = ntxIds.slice(index + 1);
+            for (const ntxIdToRemove of idsToRemove) {
+                await this.removeNoteContext(ntxIdToRemove);
+            }
+        }
+    }
+
    async closeTabCommand({ntxId}) {
        await this.removeNoteContext(ntxId);
    }
--- a/src/public/app/components/zoom.js
+++ b/src/public/app/components/zoom.js
@@ -16,7 +16,7 @@ class ZoomComponent extends Component {

            window.addEventListener("wheel", event => {
                if (event.ctrlKey) {
-                    this.setZoomFactorAndSave(this.getCurrentZoom() + event.deltaY * 0.001);
+                    this.setZoomFactorAndSave(this.getCurrentZoom() - event.deltaY * 0.001);
                }
            });
        }
@@ -56,7 +56,7 @@ class ZoomComponent extends Component {
    zoomResetEvent() {
        this.setZoomFactorAndSave(1);
    }
-    
+
    setZoomFactorAndSaveEvent({zoomFactor}) {
        this.setZoomFactorAndSave(zoomFactor);
    }
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -82,6 +82,7 @@ import MovePaneButton from "../widgets/buttons/move_pane_button.js";
 import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
 import CopyImageReferenceButton from "../widgets/floating_buttons/copy_image_reference_button.js";
 import ScrollPaddingWidget from "../widgets/scroll_padding.js";
+import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";

 export default class DesktopLayout {
    constructor(customWidgets) {
@@ -127,6 +128,7 @@ export default class DesktopLayout {
                                            // the order of the widgets matter. Some of these want to "activate" themselves
                                            // when visible. When this happens to multiple of them, the first one "wins".
                                            // promoted attributes should always win.
+                                            .ribbon(new ClassicEditorToolbar())
                                            .ribbon(new ScriptExecutorWidget())
                                            .ribbon(new SearchDefinitionWidget())
                                            .ribbon(new EditedNotesWidget())
--- a/src/public/app/layouts/mobile_layout.js
+++ b/src/public/app/layouts/mobile_layout.js
@@ -23,6 +23,7 @@ import LauncherContainer from "../widgets/containers/launcher_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
 import SharedInfoWidget from "../widgets/shared_info.js";
 import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
+import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";

 const MOBILE_CSS = `
 <style>
@@ -167,6 +168,7 @@ export default class MobileLayout {
                            .child(new NoteListWidget())
                            .child(new FilePropertiesWidget().css('font-size','smaller'))
                    )
+                    .child(new ClassicEditorToolbar())
                )
                .child(new ProtectedSessionPasswordDialog())
                .child(new ConfirmDialog())
--- a/src/public/app/services/clipboard.js
+++ b/src/public/app/services/clipboard.js
@@ -3,6 +3,7 @@ import toastService from "./toast.js";
 import froca from "./froca.js";
 import linkService from "./link.js";
 import utils from "./utils.js";
+import { t } from "./i18n.js";

 let clipboardBranchIds = [];
 let clipboardMode = null;
--- a/src/public/app/services/content_renderer.js
+++ b/src/public/app/services/content_renderer.js
@@ -10,6 +10,8 @@ import treeService from "./tree.js";
 import FNote from "../entities/fnote.js";
 import FAttachment from "../entities/fattachment.js";
 import imageContextMenuService from "../menus/image_context_menu.js";
+import { applySingleBlockSyntaxHighlight, applySyntaxHighlight } from "./syntax_highlight.js";
+import mime_types from "./mime_types.js";

 let idCounter = 1;

@@ -105,16 +107,25 @@ async function renderText(note, $renderedContent) {
        for (const el of referenceLinks) {
            await linkService.loadReferenceLinkTitle($(el));
        }
+
+        await applySyntaxHighlight($renderedContent);
    } else {
        await renderChildrenList($renderedContent, note);
    }
 }

-/** @param {FNote} note */
+/**
+ * Renders a code note, by displaying its content and applying syntax highlighting based on the selected MIME type.
+ * 
+ * @param {FNote} note
+ */
 async function renderCode(note, $renderedContent) {
    const blob = await note.getBlob();

-    $renderedContent.append($("<pre>").text(blob.content));
+    const $codeBlock = $("<code>");
+    $codeBlock.text(blob.content);
+    $renderedContent.append($("<pre>").append($codeBlock));
+    await applySingleBlockSyntaxHighlight($codeBlock, mime_types.normalizeMimeTypeForCKEditor(note.mime));
 }

 function renderImage(entity, $renderedContent, options = {}) {
--- a/src/public/app/services/library_loader.js
+++ b/src/public/app/services/library_loader.js
@@ -1,3 +1,7 @@
+import mimeTypesService from "./mime_types.js";
+import optionsService from "./options.js";
+import { getStylesheetUrl } from "./syntax_highlight.js";
+
 const CKEDITOR = {"js": ["libraries/ckeditor/ckeditor.js"]};

 const CODE_MIRROR = {
@@ -84,18 +88,44 @@ const MIND_ELIXIR = {
    ]
 };

+const HIGHLIGHT_JS = {
+    js: () => {
+        const mimeTypes = mimeTypesService.getMimeTypes();
+        const scriptsToLoad = new Set();
+        scriptsToLoad.add("node_modules/@highlightjs/cdn-assets/highlight.min.js");
+        for (const mimeType of mimeTypes) {
+            if (mimeType.enabled && mimeType.highlightJs) {
+                scriptsToLoad.add(`node_modules/@highlightjs/cdn-assets/languages/${mimeType.highlightJs}.min.js`);
+            }
+        }
+        
+        const currentTheme = optionsService.get("codeBlockTheme");
+        loadHighlightingTheme(currentTheme);
+
+        return Array.from(scriptsToLoad);
+    }
+};
+
 async function requireLibrary(library) {
    if (library.css) {
        library.css.map(cssUrl => requireCss(cssUrl));
    }

    if (library.js) {
-        for (const scriptUrl of library.js) {
+        for (const scriptUrl of unwrapValue(library.js)) {
            await requireScript(scriptUrl);
        }
    }
 }

+function unwrapValue(value) {
+    if (typeof value === "function") {
+        return value();
+    }
+
+    return value;
+}
+
 // we save the promises in case of the same script being required concurrently multiple times
 const loadedScriptPromises = {};

@@ -127,9 +157,36 @@ async function requireCss(url, prependAssetPath = true) {
    }
 }

+let highlightingThemeEl = null;
+function loadHighlightingTheme(theme) {
+    if (!theme) {        
+        return;
+    }
+
+    if (theme === "none") {
+        // Deactivate the theme.
+        if (highlightingThemeEl) {
+            highlightingThemeEl.remove();
+            highlightingThemeEl = null;
+        }
+        return;
+    }
+    
+    if (!highlightingThemeEl) {
+        highlightingThemeEl = $(`<link rel="stylesheet" type="text/css" />`);
+        $("head").append(highlightingThemeEl);
+    }
+    
+    const url = getStylesheetUrl(theme);
+    if (url) {
+        highlightingThemeEl.attr("href", url);
+    }
+}
+
 export default {
    requireCss,
    requireLibrary,
+    loadHighlightingTheme,
    CKEDITOR,
    CODE_MIRROR,
    ESLINT,
@@ -143,5 +200,6 @@ export default {
    EXCALIDRAW,
    MARKJS,
    I18NEXT,
-    MIND_ELIXIR
+    MIND_ELIXIR,
+    HIGHLIGHT_JS
 }
--- a/src/public/app/services/mime_types.js
+++ b/src/public/app/services/mime_types.js
@@ -1,162 +1,171 @@
 import options from "./options.js";

+/**
+ * A pseudo-MIME type which is used in the editor to automatically determine the language used in code blocks via heuristics.
+ */
+const MIME_TYPE_AUTO = "text-x-trilium-auto";
+
+/**
+ * For highlight.js-supported languages, see https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md.
+ */
+
 const MIME_TYPES_DICT = [
-    { default: true, title: "Plain text", mime: "text/plain" },
+    { default: true, title: "Plain text", mime: "text/plain", highlightJs: "plaintext" },
    { title: "APL", mime: "text/apl" },
    { title: "ASN.1", mime: "text/x-ttcn-asn" },
    { title: "ASP.NET", mime: "application/x-aspx" },
    { title: "Asterisk", mime: "text/x-asterisk" },
-    { title: "Brainfuck", mime: "text/x-brainfuck" },
-    { default: true, title: "C", mime: "text/x-csrc" },
-    { default: true, title: "C#", mime: "text/x-csharp" },
-    { default: true, title: "C++", mime: "text/x-c++src" },
-    { title: "Clojure", mime: "text/x-clojure" },
+    { title: "Brainfuck", mime: "text/x-brainfuck", highlightJs: "brainfuck" },
+    { default: true, title: "C", mime: "text/x-csrc", highlightJs: "c" },
+    { default: true, title: "C#", mime: "text/x-csharp", highlightJs: "csharp" },
+    { default: true, title: "C++", mime: "text/x-c++src", highlightJs: "cpp" },
+    { title: "Clojure", mime: "text/x-clojure", highlightJs: "clojure" },
    { title: "ClojureScript", mime: "text/x-clojurescript" },
    { title: "Closure Stylesheets (GSS)", mime: "text/x-gss" },
-    { title: "CMake", mime: "text/x-cmake" },
+    { title: "CMake", mime: "text/x-cmake", highlightJs: "cmake" },
    { title: "Cobol", mime: "text/x-cobol" },
-    { title: "CoffeeScript", mime: "text/coffeescript" },
-    { title: "Common Lisp", mime: "text/x-common-lisp" },
+    { title: "CoffeeScript", mime: "text/coffeescript", highlightJs: "coffeescript" },
+    { title: "Common Lisp", mime: "text/x-common-lisp", highlightJs: "lisp" },
    { title: "CQL", mime: "text/x-cassandra" },
-    { title: "Crystal", mime: "text/x-crystal" },
-    { default: true, title: "CSS", mime: "text/css" },
+    { title: "Crystal", mime: "text/x-crystal", highlightJs: "crystal" },
+    { default: true, title: "CSS", mime: "text/css", highlightJs: "css" },
    { title: "Cypher", mime: "application/x-cypher-query" },
    { title: "Cython", mime: "text/x-cython" },
-    { title: "D", mime: "text/x-d" },
-    { title: "Dart", mime: "application/dart" },
-    { title: "diff", mime: "text/x-diff" },
-    { title: "Django", mime: "text/x-django" },
-    { title: "Dockerfile", mime: "text/x-dockerfile" },
+    { title: "D", mime: "text/x-d", highlightJs: "d" },
+    { title: "Dart", mime: "application/dart", highlightJs: "dart" },
+    { title: "diff", mime: "text/x-diff", highlightJs: "diff" },
+    { title: "Django", mime: "text/x-django", highlightJs: "django" },
+    { title: "Dockerfile", mime: "text/x-dockerfile", highlightJs: "dockerfile" },
    { title: "DTD", mime: "application/xml-dtd" },
    { title: "Dylan", mime: "text/x-dylan" },
-    { title: "EBNF", mime: "text/x-ebnf" },
+    { title: "EBNF", mime: "text/x-ebnf", highlightJs: "ebnf" },
    { title: "ECL", mime: "text/x-ecl" },
    { title: "edn", mime: "application/edn" },
    { title: "Eiffel", mime: "text/x-eiffel" },
-    { title: "Elm", mime: "text/x-elm" },
+    { title: "Elm", mime: "text/x-elm", highlightJs: "elm" },
    { title: "Embedded Javascript", mime: "application/x-ejs" },
-    { title: "Embedded Ruby", mime: "application/x-erb" },
-    { title: "Erlang", mime: "text/x-erlang" },
+    { title: "Embedded Ruby", mime: "application/x-erb", highlightJs: "erb" },
+    { title: "Erlang", mime: "text/x-erlang", highlightJs: "erlang" },
    { title: "Esper", mime: "text/x-esper" },
-    { title: "F#", mime: "text/x-fsharp" },
+    { title: "F#", mime: "text/x-fsharp", highlightJs: "fsharp" },
    { title: "Factor", mime: "text/x-factor" },
    { title: "FCL", mime: "text/x-fcl" },
    { title: "Forth", mime: "text/x-forth" },
-    { title: "Fortran", mime: "text/x-fortran" },
+    { title: "Fortran", mime: "text/x-fortran", highlightJs: "fortran" },
    { title: "Gas", mime: "text/x-gas" },
-    { title: "Gherkin", mime: "text/x-feature" },
-    { title: "GitHub Flavored Markdown", mime: "text/x-gfm" },
-    { default: true, title: "Go", mime: "text/x-go" },
-    { default: true, title: "Groovy", mime: "text/x-groovy" },
-    { title: "HAML", mime: "text/x-haml" },
-    { default: true, title: "Haskell", mime: "text/x-haskell" },
+    { title: "Gherkin", mime: "text/x-feature", highlightJs: "gherkin" },
+    { title: "GitHub Flavored Markdown", mime: "text/x-gfm", highlightJs: "markdown" },
+    { default: true, title: "Go", mime: "text/x-go", highlightJs: "go" },
+    { default: true, title: "Groovy", mime: "text/x-groovy", highlightJs: "groovy" },
+    { title: "HAML", mime: "text/x-haml", highlightJs: "haml" },
+    { default: true, title: "Haskell", mime: "text/x-haskell", highlightJs: "haskell" },
    { title: "Haskell (Literate)", mime: "text/x-literate-haskell" },
-    { title: "Haxe", mime: "text/x-haxe" },
-    { default: true, title: "HTML", mime: "text/html" },
-    { default: true, title: "HTTP", mime: "message/http" },
+    { title: "Haxe", mime: "text/x-haxe", highlightJs: "haxe" },
+    { default: true, title: "HTML", mime: "text/html", highlightJs: "xml" },
+    { default: true, title: "HTTP", mime: "message/http", highlightJs: "http" },
    { title: "HXML", mime: "text/x-hxml" },
    { title: "IDL", mime: "text/x-idl" },
-    { default: true, title: "Java", mime: "text/x-java" },
-    { title: "Java Server Pages", mime: "application/x-jsp" },
+    { default: true, title: "Java", mime: "text/x-java", highlightJs: "java" },
+    { title: "Java Server Pages", mime: "application/x-jsp", highlightJs: "java" },
    { title: "Jinja2", mime: "text/jinja2" },
-    { default: true, title: "JS backend", mime: "application/javascript;env=backend" },
-    { default: true, title: "JS frontend", mime: "application/javascript;env=frontend" },
-    { default: true, title: "JSON", mime: "application/json" },
-    { title: "JSON-LD", mime: "application/ld+json" },
-    { title: "JSX", mime: "text/jsx" },
-    { title: "Julia", mime: "text/x-julia" },
-    { default: true, title: "Kotlin", mime: "text/x-kotlin" },
-    { title: "LaTeX", mime: "text/x-latex" },
-    { title: "LESS", mime: "text/x-less" },
-    { title: "LiveScript", mime: "text/x-livescript" },
-    { title: "Lua", mime: "text/x-lua" },
-    { title: "MariaDB SQL", mime: "text/x-mariadb" },
-    { default: true, title: "Markdown", mime: "text/x-markdown" },
-    { title: "Mathematica", mime: "text/x-mathematica" },
+    { default: true, title: "JS backend", mime: "application/javascript;env=backend", highlightJs: "javascript" },
+    { default: true, title: "JS frontend", mime: "application/javascript;env=frontend", highlightJs: "javascript" },
+    { default: true, title: "JSON", mime: "application/json", highlightJs: "json" },
+    { title: "JSON-LD", mime: "application/ld+json", highlightJs: "json" },
+    { title: "JSX", mime: "text/jsx", highlightJs: "javascript" },
+    { title: "Julia", mime: "text/x-julia", highlightJs: "julia" },
+    { default: true, title: "Kotlin", mime: "text/x-kotlin", highlightJs: "kotlin" },
+    { title: "LaTeX", mime: "text/x-latex", highlightJs: "latex" },
+    { title: "LESS", mime: "text/x-less", highlightJs: "less" },
+    { title: "LiveScript", mime: "text/x-livescript", highlightJs: "livescript" },
+    { title: "Lua", mime: "text/x-lua", highlightJs: "lua" },
+    { title: "MariaDB SQL", mime: "text/x-mariadb", highlightJs: "sql" },
+    { default: true, title: "Markdown", mime: "text/x-markdown", highlightJs: "markdown" },
+    { title: "Mathematica", mime: "text/x-mathematica", highlightJs: "mathematica" },
    { title: "mbox", mime: "application/mbox" },
    { title: "mIRC", mime: "text/mirc" },
    { title: "Modelica", mime: "text/x-modelica" },
-    { title: "MS SQL", mime: "text/x-mssql" },
+    { title: "MS SQL", mime: "text/x-mssql", highlightJs: "sql" },
    { title: "mscgen", mime: "text/x-mscgen" },
    { title: "msgenny", mime: "text/x-msgenny" },
    { title: "MUMPS", mime: "text/x-mumps" },
-    { title: "MySQL", mime: "text/x-mysql" },
-    { title: "Nginx", mime: "text/x-nginx-conf" },
-    { title: "NSIS", mime: "text/x-nsis" },
+    { title: "MySQL", mime: "text/x-mysql", highlightJs: "sql" },
+    { title: "Nginx", mime: "text/x-nginx-conf", highlightJs: "nginx" },
+    { title: "NSIS", mime: "text/x-nsis", highlightJs: "nsis" },
    { title: "NTriples", mime: "application/n-triples" },
-    { title: "Objective-C", mime: "text/x-objectivec" },
-    { title: "OCaml", mime: "text/x-ocaml" },
+    { title: "Objective-C", mime: "text/x-objectivec", highlightJs: "objectivec" },
+    { title: "OCaml", mime: "text/x-ocaml", highlightJs: "ocaml" },
    { title: "Octave", mime: "text/x-octave" },
    { title: "Oz", mime: "text/x-oz" },
-    { title: "Pascal", mime: "text/x-pascal" },
+    { title: "Pascal", mime: "text/x-pascal", highlightJs: "delphi" },
    { title: "PEG.js", mime: "null" },
    { default: true, title: "Perl", mime: "text/x-perl" },
    { title: "PGP", mime: "application/pgp" },
    { default: true, title: "PHP", mime: "text/x-php" },
    { title: "Pig", mime: "text/x-pig" },
-    { title: "PLSQL", mime: "text/x-plsql" },
-    { title: "PostgreSQL", mime: "text/x-pgsql" },
-    { title: "PowerShell", mime: "application/x-powershell" },
-    { title: "Properties files", mime: "text/x-properties" },
-    { title: "ProtoBuf", mime: "text/x-protobuf" },
+    { title: "PLSQL", mime: "text/x-plsql", highlightJs: "sql" },
+    { title: "PostgreSQL", mime: "text/x-pgsql", highlightJs: "pgsql" },
+    { title: "PowerShell", mime: "application/x-powershell", highlightJs: "powershell" },
+    { title: "Properties files", mime: "text/x-properties", highlightJs: "properties" },
+    { title: "ProtoBuf", mime: "text/x-protobuf", highlightJs: "protobuf" },
    { title: "Pug", mime: "text/x-pug" },
-    { title: "Puppet", mime: "text/x-puppet" },
-    { default: true, title: "Python", mime: "text/x-python" },
-    { title: "Q", mime: "text/x-q" },
-    { title: "R", mime: "text/x-rsrc" },
+    { title: "Puppet", mime: "text/x-puppet", highlightJs: "puppet" },
+    { default: true, title: "Python", mime: "text/x-python", highlightJs: "python" },
+    { title: "Q", mime: "text/x-q", highlightJs: "q" },
+    { title: "R", mime: "text/x-rsrc", highlightJs: "r" },
    { title: "reStructuredText", mime: "text/x-rst" },
    { title: "RPM Changes", mime: "text/x-rpm-changes" },
    { title: "RPM Spec", mime: "text/x-rpm-spec" },
-    { default: true, title: "Ruby", mime: "text/x-ruby" },
-    { title: "Rust", mime: "text/x-rustsrc" },
-    { title: "SAS", mime: "text/x-sas" },
+    { default: true, title: "Ruby", mime: "text/x-ruby", highlightJs: "ruby" },
+    { title: "Rust", mime: "text/x-rustsrc", highlightJs: "rust" },
+    { title: "SAS", mime: "text/x-sas", highlightJs: "sas" },
    { title: "Sass", mime: "text/x-sass" },
    { title: "Scala", mime: "text/x-scala" },
    { title: "Scheme", mime: "text/x-scheme" },
-    { title: "SCSS", mime: "text/x-scss" },
-    { default: true, title: "Shell (bash)", mime: "text/x-sh" },
+    { title: "SCSS", mime: "text/x-scss", highlightJs: "scss" },
+    { default: true, title: "Shell (bash)", mime: "text/x-sh", highlightJs: "bash" },
    { title: "Sieve", mime: "application/sieve" },
    { title: "Slim", mime: "text/x-slim" },
-    { title: "Smalltalk", mime: "text/x-stsrc" },
+    { title: "Smalltalk", mime: "text/x-stsrc", highlightJs: "smalltalk" },
    { title: "Smarty", mime: "text/x-smarty" },
-    { title: "SML", mime: "text/x-sml" },
+    { title: "SML", mime: "text/x-sml", highlightJs: "sml" },
    { title: "Solr", mime: "text/x-solr" },
    { title: "Soy", mime: "text/x-soy" },
    { title: "SPARQL", mime: "application/sparql-query" },
    { title: "Spreadsheet", mime: "text/x-spreadsheet" },
-    { default: true, title: "SQL", mime: "text/x-sql" },
-    { title: "SQLite", mime: "text/x-sqlite" },
-    { default: true, title: "SQLite (Trilium)", mime: "text/x-sqlite;schema=trilium" },
+    { default: true, title: "SQL", mime: "text/x-sql", highlightJs: "sql" },
+    { title: "SQLite", mime: "text/x-sqlite", highlightJs: "sql" },
+    { default: true, title: "SQLite (Trilium)", mime: "text/x-sqlite;schema=trilium", highlightJs: "sql" },
    { title: "Squirrel", mime: "text/x-squirrel" },
    { title: "sTeX", mime: "text/x-stex" },
-    { title: "Stylus", mime: "text/x-styl" },
+    { title: "Stylus", mime: "text/x-styl", highlightJs: "stylus" },
    { default: true, title: "Swift", mime: "text/x-swift" },
    { title: "SystemVerilog", mime: "text/x-systemverilog" },
-    { title: "Tcl", mime: "text/x-tcl" },
+    { title: "Tcl", mime: "text/x-tcl", highlightJs: "tcl" },
    { title: "Textile", mime: "text/x-textile" },
    { title: "TiddlyWiki ", mime: "text/x-tiddlywiki" },
    { title: "Tiki wiki", mime: "text/tiki" },
-    { title: "TOML", mime: "text/x-toml" },
+    { title: "TOML", mime: "text/x-toml", highlightJs: "ini" },
    { title: "Tornado", mime: "text/x-tornado" },
    { title: "troff", mime: "text/troff" },
    { title: "TTCN", mime: "text/x-ttcn" },
    { title: "TTCN_CFG", mime: "text/x-ttcn-cfg" },
    { title: "Turtle", mime: "text/turtle" },
-    { title: "Twig", mime: "text/x-twig" },
-    { title: "TypeScript", mime: "application/typescript" },
+    { title: "Twig", mime: "text/x-twig", highlightJs: "twig" },
+    { title: "TypeScript", mime: "application/typescript", highlightJs: "typescript" },
    { title: "TypeScript-JSX", mime: "text/typescript-jsx" },
-    { title: "VB.NET", mime: "text/x-vb" },
-    { title: "VBScript", mime: "text/vbscript" },
+    { title: "VB.NET", mime: "text/x-vb", highlightJs: "vbnet" },
+    { title: "VBScript", mime: "text/vbscript", highlightJs: "vbscript" },
    { title: "Velocity", mime: "text/velocity" },
-    { title: "Verilog", mime: "text/x-verilog" },
-    { title: "VHDL", mime: "text/x-vhdl" },
+    { title: "Verilog", mime: "text/x-verilog", highlightJs: "verilog" },
+    { title: "VHDL", mime: "text/x-vhdl", highlightJs: "vhdl" },
    { title: "Vue.js Component", mime: "text/x-vue" },
    { title: "Web IDL", mime: "text/x-webidl" },
-    { default: true, title: "XML", mime: "text/xml" },
-    { title: "XQuery", mime: "application/xquery" },
+    { default: true, title: "XML", mime: "text/xml", highlightJs: "xml" },
+    { title: "XQuery", mime: "application/xquery", highlightJs: "xquery" },
    { title: "xu", mime: "text/x-xu" },
    { title: "Yacas", mime: "text/x-yacas" },
-    { default: true, title: "YAML", mime: "text/x-yaml" },
+    { default: true, title: "YAML", mime: "text/x-yaml", highlightJs: "yaml" },
    { title: "Z80", mime: "text/x-z80" }
 ];

@@ -173,7 +182,7 @@ function loadMimeTypes() {
    }
 }

-async function getMimeTypes() {
+function getMimeTypes() {
    if (mimeTypes === null) {
        loadMimeTypes();
    }
@@ -181,7 +190,46 @@ async function getMimeTypes() {
    return mimeTypes;
 }

-export default {
-    getMimeTypes,
-    loadMimeTypes
+let mimeToHighlightJsMapping = null;
+
+/**
+ * Obtains the corresponding language tag for highlight.js for a given MIME type.
+ * 
+ * The mapping is built the first time this method is built and then the results are cached for better performance.
+ * 
+ * @param {string} mimeType The MIME type of the code block, in the CKEditor-normalized format (e.g. `text-c-src` instead of `text/c-src`).
+ * @returns the corresponding highlight.js tag, for example `c` for `text-c-src`.
+ */
+function getHighlightJsNameForMime(mimeType) {    
+    if (!mimeToHighlightJsMapping) {
+        const mimeTypes = getMimeTypes();
+        mimeToHighlightJsMapping = {};
+        for (const mimeType of mimeTypes) {
+            // The mime stored by CKEditor is text-x-csrc instead of text/x-csrc so we keep this format for faster lookup.
+            const normalizedMime = normalizeMimeTypeForCKEditor(mimeType.mime);
+            mimeToHighlightJsMapping[normalizedMime] = mimeType.highlightJs;
+        }
+    }
+
+    return mimeToHighlightJsMapping[mimeType];
+}
+
+/**
+ * Given a MIME type in the usual format (e.g. `text/csrc`), it returns a MIME type that can be passed down to the CKEditor
+ * code plugin.
+ * 
+ * @param {string} mimeType The MIME type to normalize, in the usual format (e.g. `text/c-src`).
+ * @returns the normalized MIME type (e.g. `text-c-src`).
+ */
+function normalizeMimeTypeForCKEditor(mimeType) {
+    return mimeType.toLowerCase()
+        .replace(/[\W_]+/g,"-");
+}
+
+export default {
+    MIME_TYPE_AUTO,
+    getMimeTypes,
+    loadMimeTypes,
+    getHighlightJsNameForMime,
+    normalizeMimeTypeForCKEditor
 }
--- a/src/public/app/services/note_list_renderer.js
+++ b/src/public/app/services/note_list_renderer.js
@@ -366,12 +366,13 @@ class NoteListRenderer {
                    separateWordSearch: false,
                    caseSensitive: false
                });
-            }
+            }            

            $content.append($renderedContent);
            $content.addClass(`type-${type}`);
        } catch (e) {
-            console.log(`Caught error while rendering note '${note.noteId}' of type '${note.type}': ${e.message}, stack: ${e.stack}`);
+            console.warn(`Caught error while rendering note '${note.noteId}' of type '${note.type}'`);
+            console.error(e);

            $content.append("rendering error");
        }
--- a/src/public/app/services/sync.js
+++ b/src/public/app/services/sync.js
@@ -1,3 +1,4 @@
+import { t } from './i18n.js';
 import server from './server.js';
 import toastService from "./toast.js";

--- a/src/public/app/services/syntax_highlight.js
+++ b/src/public/app/services/syntax_highlight.js
@@ -0,0 +1,94 @@
+import library_loader from "./library_loader.js";
+import mime_types from "./mime_types.js";
+import options from "./options.js";
+
+export function getStylesheetUrl(theme) {
+    if (!theme) {
+        return null;
+    }
+
+    const defaultPrefix = "default:";
+    if (theme.startsWith(defaultPrefix)) {        
+        return `${window.glob.assetPath}/node_modules/@highlightjs/cdn-assets/styles/${theme.substr(defaultPrefix.length)}.min.css`;
+    }
+
+    return null;
+}
+
+/**
+ * Identifies all the code blocks (as `pre code`) under the specified hierarchy and uses the highlight.js library to obtain the highlighted text which is then applied on to the code blocks.
+ * 
+ * @param $container the container under which to look for code blocks and to apply syntax highlighting to them.
+ */
+export async function applySyntaxHighlight($container) {
+    if (!isSyntaxHighlightEnabled()) {
+        return;
+    }    
+
+    const codeBlocks = $container.find("pre code");
+    for (const codeBlock of codeBlocks) {
+        const normalizedMimeType = extractLanguageFromClassList(codeBlock);
+        if (!normalizedMimeType) {
+            continue;
+        }
+        
+        applySingleBlockSyntaxHighlight($(codeBlock, normalizedMimeType));
+    }
+}
+
+/**
+ * Applies syntax highlight to the given code block (assumed to be <pre><code>), using highlight.js.
+ * 
+ * @param {*} $codeBlock 
+ * @param {*} normalizedMimeType 
+ */
+export async function applySingleBlockSyntaxHighlight($codeBlock, normalizedMimeType) {
+    $codeBlock.parent().toggleClass("hljs");
+    const text = $codeBlock.text();
+
+    if (!window.hljs) {
+        await library_loader.requireLibrary(library_loader.HIGHLIGHT_JS);
+    }
+
+    let highlightedText = null;
+    if (normalizedMimeType === mime_types.MIME_TYPE_AUTO) {
+        highlightedText = hljs.highlightAuto(text);
+    } else if (normalizedMimeType) {
+        const language = mime_types.getHighlightJsNameForMime(normalizedMimeType);
+        if (language) {
+            highlightedText = hljs.highlight(text, { language });
+        } else {
+            console.warn(`Unknown mime type: ${normalizedMimeType}.`);
+        }
+    }
+    
+    if (highlightedText) {            
+        $codeBlock.html(highlightedText.value);
+    }
+}
+
+/**
+ * Indicates whether syntax highlighting should be enabled for code blocks, by querying the value of the `codeblockTheme` option.
+ * @returns whether syntax highlighting should be enabled for code blocks.
+ */
+export function isSyntaxHighlightEnabled() {
+    const theme = options.get("codeBlockTheme");
+    return theme && theme !== "none";
+}
+
+/**
+ * Given a HTML element, tries to extract the `language-` class name out of it.
+ * 
+ * @param {string} el the HTML element from which to extract the language tag.
+ * @returns the normalized MIME type (e.g. `text-css` instead of `language-text-css`).
+ */
+function extractLanguageFromClassList(el) {
+    const prefix = "language-";
+    for (const className of el.classList) {
+        if (className.startsWith(prefix)) {
+            return className.substr(prefix.length);
+        }
+    }
+
+    return null;
+}
--- a/src/public/app/services/utils.js
+++ b/src/public/app/services/utils.js
@@ -527,6 +527,58 @@ function downloadSvg(nameWithoutExtension, svgContent) {
    document.body.removeChild(element);
 }

+/**
+ * Compares two semantic version strings.
+ * Returns:
+ *   1  if v1 is greater than v2
+ *   0  if v1 is equal to v2
+ *   -1 if v1 is less than v2
+ * 
+ * @param {string} v1 First version string
+ * @param {string} v2 Second version string
+ * @returns {number}
+ */
+function compareVersions(v1, v2) {
+
+    // Remove 'v' prefix and everything after dash if present
+    v1 = v1.replace(/^v/, '').split('-')[0];
+    v2 = v2.replace(/^v/, '').split('-')[0];
+    
+    const v1parts = v1.split('.').map(Number);
+    const v2parts = v2.split('.').map(Number);
+    
+    // Pad shorter version with zeros
+    while (v1parts.length < 3) v1parts.push(0);
+    while (v2parts.length < 3) v2parts.push(0);
+    
+    // Compare major version
+    if (v1parts[0] !== v2parts[0]) {
+        return v1parts[0] > v2parts[0] ? 1 : -1;
+    }
+    
+    // Compare minor version
+    if (v1parts[1] !== v2parts[1]) {
+        return v1parts[1] > v2parts[1] ? 1 : -1;
+    }
+    
+    // Compare patch version
+    if (v1parts[2] !== v2parts[2]) {
+        return v1parts[2] > v2parts[2] ? 1 : -1;
+    }
+    
+    return 0;
+}
+
+/**
+ * Compares two semantic version strings and returns `true` if the latest version is greater than the current version.
+ * @param {string} latestVersion
+ * @param {string} currentVersion
+ * @returns {boolean}
+ */
+function isUpdateAvailable(latestVersion, currentVersion) {
+    return compareVersions(latestVersion, currentVersion) > 0;
+}
+
 export default {
    reloadFrontendApp,
    parseDate,
@@ -567,5 +619,7 @@ export default {
    areObjectsEqual,
    copyHtmlToClipboard,
    createImageSrcUrl,
-    downloadSvg
+    downloadSvg,
+    compareVersions,
+    isUpdateAvailable
 };
--- a/src/public/app/widgets/attribute_widgets/attribute_editor.js
+++ b/src/public/app/widgets/attribute_widgets/attribute_editor.js
@@ -347,8 +347,7 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget {

        this.$editor.on("click", e => this.handleEditorClick(e));

-        /** @property {BalloonEditor} */
-        this.textEditor = await BalloonEditor.create(this.$editor[0], editorConfig);
+        this.textEditor = await CKEditor.BalloonEditor.create(this.$editor[0], editorConfig);
        this.textEditor.model.document.on('change:data', () => this.dataChanged());
        this.textEditor.editing.view.document.on('enter', (event, data) => {
            // disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422
@@ -358,9 +357,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget {

        // disable spellcheck for attribute editor
        this.textEditor.editing.view.change(writer => writer.setAttribute('spellcheck', 'false', this.textEditor.editing.view.document.getRoot()));
-
-        //await import(/* webpackIgnore: true */'../../libraries/ckeditor/inspector');
-        //CKEditorInspector.attach(this.textEditor);
    }

    dataChanged() {
--- a/src/public/app/widgets/buttons/global_menu.js
+++ b/src/public/app/widgets/buttons/global_menu.js
@@ -333,7 +333,8 @@ export default class GlobalMenuWidget extends BasicWidget {

        const latestVersion = await this.fetchLatestVersion();
        this.updateAvailableWidget.updateVersionStatus(latestVersion);
-        this.$updateToLatestVersionButton.toggle(latestVersion > glob.triliumVersion);
+        // Show "click to download" button in options menu if there's a new version available
+        this.$updateToLatestVersionButton.toggle(utils.isUpdateAvailable(latestVersion, glob.triliumVersion));
        this.$updateToLatestVersionButton.find(".version-text").text(`Version ${latestVersion} is available, click to download.`);
    }

--- a/src/public/app/widgets/buttons/update_available.js
+++ b/src/public/app/widgets/buttons/update_available.js
@@ -1,5 +1,6 @@
 import { t } from "../../services/i18n.js";
 import BasicWidget from "../basic_widget.js";
+import utils from "../../services/utils.js";

 const TPL = `
 <div style="display: none;">
@@ -34,6 +35,6 @@ export default class UpdateAvailableWidget extends BasicWidget {
    }

    updateVersionStatus(latestVersion) {
-        this.$widget.toggle(latestVersion > glob.triliumVersion);
+        this.$widget.toggle(utils.isUpdateAvailable(latestVersion, glob.triliumVersion));
    }
 }
--- a/src/public/app/widgets/containers/ribbon_container.js
+++ b/src/public/app/widgets/containers/ribbon_container.js
@@ -216,7 +216,7 @@ export default class RibbonContainer extends NoteContextAwareWidget {
        this.$tabContainer.empty();

        for (const ribbonWidget of this.ribbonWidgets) {
-            const ret = ribbonWidget.getTitle(note);
+            const ret = await ribbonWidget.getTitle(note);

            if (!ret.show) {
                continue;
@@ -351,6 +351,16 @@ export default class RibbonContainer extends NoteContextAwareWidget {
        }
    }

+    /**
+     * Executed as soon as the user presses the "Edit" floating button in a read-only text note.
+     * 
+     * <p>
+     * We need to refresh the ribbon for cases such as the classic editor which relies on the read-only state.
+     */
+    readOnlyTemporarilyDisabledEvent() {        
+        this.refresh();
+    }
+
    getActiveRibbonWidget() {
        return this.ribbonWidgets.find(ch => ch.componentId === this.lastActiveComponentId)
    }
--- a/src/public/app/widgets/dialogs/delete_notes.js
+++ b/src/public/app/widgets/dialogs/delete_notes.js
@@ -25,7 +25,7 @@ const TPL = `
                </div>

                <div class="delete-notes-list-wrapper">
-                    <h4>${t('delete_notes.notes_to_be_deleted')} (<span class="deleted-notes-count"></span>)</h4>
+                    <h4>${t('delete_notes.notes_to_be_deleted', { noteCount: '<span class="deleted-notes-count"></span>' })}</h4>

                    <ul class="delete-notes-list" style="max-height: 200px; overflow: auto;"></ul>
                </div>
@@ -36,7 +36,7 @@ const TPL = `

                <div class="broken-relations-wrapper">
                    <div class="alert alert-danger">
-                        <h4>${t('delete_notes.broken_relations_to_be_deleted')} (<span class="broke-relations-count"></span>)</h4>
+                        <h4>${t('delete_notes.broken_relations_to_be_deleted', { relationCount: '<span class="broke-relations-count"></span>'})}</h4>

                        <ul class="broken-relations-list" style="max-height: 200px; overflow: auto;"></ul>
                    </div>
@@ -126,11 +126,11 @@ export default class DeleteNotesDialog extends BasicWidget {

        for (const attr of response.brokenRelations) {
            this.$brokenRelationsList.append(
-                $("<li>")
-                    .append(`${t('delete_notes.note')} `)
-                    .append(await linkService.createLink(attr.value))
-                    .append(` ${t('delete_notes.to_be_deleted', {attrName: attr.name})} `)
-                    .append(await linkService.createLink(attr.noteId))
+                $("<li>").html(t("delete_notes.deleted_relation_text", {
+                    note: (await linkService.createLink(attr.value)).html(),
+                    relation: `<code>${attr.name}</code>`,
+                    source: (await linkService.createLink(attr.noteId)).html()
+                }))
            );
        }
    }
--- a/src/public/app/widgets/note_context_aware_widget.js
+++ b/src/public/app/widgets/note_context_aware_widget.js
@@ -50,6 +50,9 @@ class NoteContextAwareWidget extends BasicWidget {
    /**
     * @inheritdoc
     * 
+     * <p>
+     * If the widget is not enabled, it will not receive `refreshWithNote` updates.
+     * 
     * @returns {boolean} true when an active note exists
     */
    isEnabled() {
--- a/src/public/app/widgets/note_detail.js
+++ b/src/public/app/widgets/note_detail.js
@@ -30,6 +30,7 @@ import ContentWidgetTypeWidget from "./type_widgets/content_widget.js";
 import AttachmentListTypeWidget from "./type_widgets/attachment_list.js";
 import AttachmentDetailTypeWidget from "./type_widgets/attachment_detail.js";
 import MindMapWidget from "./type_widgets/mind_map.js";
+import { getStylesheetUrl, isSyntaxHighlightEnabled } from "../services/syntax_highlight.js";

 const TPL = `
 <div class="note-detail">
@@ -255,6 +256,19 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
        }

        const {assetPath} = window.glob;
+        const cssToLoad = [
+            `${assetPath}/node_modules/codemirror/lib/codemirror.css`,
+            `${assetPath}/libraries/ckeditor/ckeditor-content.css`,
+            `${assetPath}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
+            `${assetPath}/node_modules/katex/dist/katex.min.css`,
+            `${assetPath}/stylesheets/print.css`,
+            `${assetPath}/stylesheets/relation_map.css`,
+            `${assetPath}/stylesheets/ckeditor-theme.css`
+        ];
+
+        if (isSyntaxHighlightEnabled()) {
+            cssToLoad.push(getStylesheetUrl("default:vs"));
+        }

        this.$widget.find('.note-detail-printable:visible').printThis({
            header: $("<div>")
@@ -273,15 +287,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
 </script>
 `,
            importCSS: false,
-            loadCSS: [
-                `${assetPath}/node_modules/codemirror/lib/codemirror.css`,
-                `${assetPath}/libraries/ckeditor/ckeditor-content.css`,
-                `${assetPath}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
-                `${assetPath}/node_modules/katex/dist/katex.min.css`,
-                `${assetPath}/stylesheets/print.css`,
-                `${assetPath}/stylesheets/relation_map.css`,
-                `${assetPath}/stylesheets/ckeditor-theme.css`
-            ],
+            loadCSS: cssToLoad,
            debug: true
        });
    }
--- a/src/public/app/widgets/note_type.js
+++ b/src/public/app/widgets/note_type.js
@@ -101,7 +101,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
            this.$noteTypeDropdown.append($typeLink);
        }

-        for (const mimeType of await mimeTypesService.getMimeTypes()) {
+        for (const mimeType of mimeTypesService.getMimeTypes()) {
            if (!mimeType.enabled) {
                continue;
            }
@@ -128,7 +128,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {

    async findTypeTitle(type, mime) {
        if (type === 'code') {
-            const mimeTypes = await mimeTypesService.getMimeTypes();
+            const mimeTypes = mimeTypesService.getMimeTypes();
            const found = mimeTypes.find(mt => mt.mime === mime);

            return found ? found.title : mime;
--- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
+++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
@@ -0,0 +1,83 @@
+import { t } from "../../services/i18n.js";
+import options from "../../services/options.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+
+const TPL = `\
+<div class="classic-toolbar-widget"></div>
+
+<style>
+    .classic-toolbar-widget {
+        --ck-color-toolbar-background: transparent;
+        --ck-color-button-default-background: transparent;        
+        --ck-color-button-default-disabled-background: transparent;
+        min-height: 39px;
+    }
+
+    .classic-toolbar-widget .ck.ck-toolbar {
+        border: none;
+    }
+
+    .classic-toolbar-widget .ck.ck-button.ck-disabled {
+        opacity: 0.3;
+    }
+
+    body.mobile .classic-toolbar-widget {
+        position: relative;
+        overflow-x: auto;
+    }
+
+    body.mobile .classic-toolbar-widget .ck.ck-toolbar {
+        position: absolute;
+    }
+</style>
+`;
+
+/**
+ * Handles the editing toolbar when the CKEditor is in decoupled mode.
+ * 
+ * <p>
+ * This toolbar is only enabled if the user has selected the classic CKEditor.
+ * 
+ * <p>
+ * The ribbon item is active by default for text notes, as long as they are not in read-only mode.
+ */
+export default class ClassicEditorToolbar extends NoteContextAwareWidget {
+    get name() {
+        return "classicEditor";
+    }
+
+    get toggleCommand() {
+        return "toggleRibbonTabClassicEditor";
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.contentSized();
+    }
+
+    async getTitle() {
+        return {
+            show: await this.#shouldDisplay(),
+            activate: true,
+            title: t("classic_editor_toolbar.title"),
+            icon: "bx bx-edit-alt"
+        };
+    }
+
+    async #shouldDisplay() {
+        if (options.get("textNoteEditorType") !== "ckeditor-classic") {
+            return false;
+        }
+
+        if (this.note.type !== "text") {
+            return false;
+        }
+
+        if (await this.noteContext.isReadOnly()) {
+            return false;
+        }
+
+        return true;
+    }
+
+}
--- a/src/public/app/widgets/tab_row.js
+++ b/src/public/app/widgets/tab_row.js
@@ -260,8 +260,10 @@ export default class TabRowWidget extends BasicWidget {
                y: e.pageY,
                items: [
                    {title: t('tab_row.close'), command: "closeTab", uiIcon: "bx bx-x"},
-                    {title: t('tab_row.close_other_tabs'), command: "closeOtherTabs", uiIcon: "bx bx-x"},
-                    {title: t('tab_row.close_all_tabs'), command: "closeAllTabs", uiIcon: "bx bx-x"},
+                    {title: t('tab_row.close_other_tabs'), command: "closeOtherTabs", uiIcon: "bx bx-empty", enabled: appContext.tabManager.noteContexts.length !== 1},
+                    {title: t('tab_row.close_right_tabs'), command: "closeRightTabs", uiIcon: "bx bx-empty", enabled: appContext.tabManager.noteContexts.at(-1).ntxId !== ntxId},
+                    {title: t('tab_row.close_all_tabs'), command: "closeAllTabs", uiIcon: "bx bx-empty"},
+                    { title: "----" },
                    {title: t('tab_row.move_tab_to_new_window'), command: "moveTabToNewWindow", uiIcon: "bx bx-window-open"}
                ],
                selectMenuItemHandler: ({command}) => {
--- a/src/public/app/widgets/type_widgets/abstract_text_type_widget.js
+++ b/src/public/app/widgets/type_widgets/abstract_text_type_widget.js
@@ -4,8 +4,15 @@ import froca from "../../services/froca.js";
 import linkService from "../../services/link.js";
 import contentRenderer from "../../services/content_renderer.js";
 import utils from "../../services/utils.js";
+import options from "../../services/options.js";

 export default class AbstractTextTypeWidget extends TypeWidget {
+
+    doRender() {
+        super.doRender();
+        this.refreshCodeBlockOptions();
+    }
+
    setupImageOpening(singleClickOpens) {
        this.$widget.on("dblclick", "img", e => this.openImageInCurrentTab($(e.target)));

@@ -25,7 +32,7 @@ export default class AbstractTextTypeWidget extends TypeWidget {

    async openImageInCurrentTab($img) {
        const { noteId, viewScope } = await this.parseFromImage($img);
-
+        
        if (noteId) {
            appContext.tabManager.getActiveContext().setNote(noteId, { viewScope });
        } else {
@@ -33,8 +40,8 @@ export default class AbstractTextTypeWidget extends TypeWidget {
        }
    }

-    openImageInNewTab($img) {
-        const { noteId, viewScope } = this.parseFromImage($img);
+    async openImageInNewTab($img) {
+        const { noteId, viewScope } = await this.parseFromImage($img);

        if (noteId) {
            appContext.tabManager.openTabWithNoteWithHoisting(noteId, { viewScope });
@@ -108,4 +115,16 @@ export default class AbstractTextTypeWidget extends TypeWidget {
            });
        }
    }
+
+    refreshCodeBlockOptions() {
+        const wordWrap = options.is("codeBlockWordWrap");
+        this.$widget.toggleClass("word-wrap", wordWrap);
+    }
+
+    async entitiesReloadedEvent({loadResults}) {
+        if (loadResults.isOptionReloaded("codeBlockWordWrap")) {
+            this.refreshCodeBlockOptions();            
+        }
+    }
+
 }
--- a/src/public/app/widgets/type_widgets/ckeditor/syntax_highlight.js
+++ b/src/public/app/widgets/type_widgets/ckeditor/syntax_highlight.js
@@ -0,0 +1,354 @@
+/*
+ * This code is an adaptation of https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget with additional improvements, such as:
+ * 
+ *  - support for selecting the language manually;
+ *  - support for determining the language automatically, if a special language is selected ("Auto-detected");
+ *  - limit for highlighting.
+ * 
+ * TODO: Generally this class can be done directly in the CKEditor repository.
+ */
+
+import library_loader from "../../../services/library_loader.js";
+import mime_types from "../../../services/mime_types.js";
+import { isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
+
+export async function initSyntaxHighlighting(editor) {
+    if (!isSyntaxHighlightEnabled) {
+        return;
+    }
+
+    await library_loader.requireLibrary(library_loader.HIGHLIGHT_JS);
+    initTextEditor(editor);
+}
+
+const HIGHLIGHT_MAX_BLOCK_COUNT = 500;
+
+const tag = "SyntaxHighlightWidget";
+const debugLevels = ["error", "warn", "info", "log", "debug"];
+const debugLevel = "debug";
+
+let warn = function() {};
+if (debugLevel >= debugLevels.indexOf("warn")) {
+    warn = console.warn.bind(console, tag + ": ");
+}
+
+let info = function() {};
+if (debugLevel >= debugLevels.indexOf("info")) {
+    info = console.info.bind(console, tag + ": ");
+}
+
+let log = function() {};
+if (debugLevel >= debugLevels.indexOf("log")) {
+    log = console.log.bind(console, tag + ": ");
+}
+
+let dbg = function() {};
+if (debugLevel >= debugLevels.indexOf("debug")) {
+    dbg = console.debug.bind(console, tag + ": ");
+}
+
+function assert(e, msg) {
+    console.assert(e, tag + ": " + msg);
+}
+
+// TODO: Should this be scoped to note?
+let markerCounter = 0;
+
+function initTextEditor(textEditor) {
+    log("initTextEditor");
+
+    let widget = this;
+    const document = textEditor.model.document;
+
+    // Create a conversion from model to view that converts 
+    // hljs:hljsClassName:uniqueId into a span with hljsClassName
+    // See the list of hljs class names at
+    // https://github.com/highlightjs/highlight.js/blob/6b8c831f00c4e87ecd2189ebbd0bb3bbdde66c02/docs/css-classes-reference.rst
+
+    textEditor.conversion.for('editingDowncast').markerToHighlight( {
+        model: "hljs",
+        view: ( { markerName } ) => {
+            dbg("markerName " + markerName);
+            // markerName has the pattern addMarker:cssClassName:uniqueId
+            const [ , cssClassName, id ] = markerName.split( ':' );
+
+            // The original code at 
+            // https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-find-and-replace/src/findandreplaceediting.js
+            // has this comment
+            //      Marker removal from the view has a bug: 
+            //      https://github.com/ckeditor/ckeditor5/issues/7499
+            //      A minimal option is to return a new object for each converted marker...
+            return {
+                name: 'span',
+                classes: [ cssClassName ],
+                attributes: {
+                    // ...however, adding a unique attribute should be future-proof..
+                    'data-syntax-result': id
+                },
+            };
+        }
+    });
+    
+
+    // XXX This is done at BalloonEditor.create time, so it assumes this
+    //     document is always attached to this textEditor, empirically that
+    //     seems to be the case even with two splits showing the same note,
+    //     it's not clear if CKEditor5 has apis to attach and detach
+    //     documents around
+    document.registerPostFixer(function(writer) {
+        log("postFixer");
+        // Postfixers are a simpler way of tracking changes than onchange
+        // See
+        // https://github.com/ckeditor/ckeditor5/blob/b53d2a4b49679b072f4ae781ac094e7e831cfb14/packages/ckeditor5-block-quote/src/blockquoteediting.js#L54
+        const changes = document.differ.getChanges();
+        let dirtyCodeBlocks = new Set();
+
+        for (const change of changes) {
+            dbg("change " + JSON.stringify(change));
+
+            if ((change.type == "insert") && (change.name == "codeBlock")) {
+                // A new code block was inserted
+                const codeBlock = change.position.nodeAfter;
+                // Even if it's a new codeblock, it needs dirtying in case
+                // it already has children, like when pasting one or more
+                // full codeblocks, undoing a delete, changing the language,
+                // etc (the postfixer won't get later changes for those).
+                log("dirtying inserted codeBlock " + JSON.stringify(codeBlock.toJSON()));
+                dirtyCodeBlocks.add(codeBlock);
+                
+            } else if (change.type == "remove" && (change.name == "codeBlock")) {
+                // An existing codeblock was removed, do nothing. Note the
+                // node is no longer in the editor so the codeblock cannot
+                // be inspected here. No need to dirty the codeblock since
+                // it has been removed
+                log("removing codeBlock at path " + JSON.stringify(change.position.toJSON()));
+                
+            } else if (((change.type == "remove") || (change.type == "insert")) && 
+                        change.position.parent.is('element', 'codeBlock')) {
+                // Text was added or removed from the codeblock, force a
+                // highlight
+                const codeBlock = change.position.parent;
+                log("dirtying codeBlock " + JSON.stringify(codeBlock.toJSON()));
+                dirtyCodeBlocks.add(codeBlock);
+            }
+        }
+        for (let codeBlock of dirtyCodeBlocks) {
+            highlightCodeBlock(codeBlock, writer);
+        }
+        // Adding markers doesn't modify the document data so no need for
+        // postfixers to run again
+        return false;
+    });
+
+    // This assumes the document is empty and a explicit call to highlight
+    // is not necessary here. Empty documents have a single children of type
+    // paragraph with no text
+    assert((document.getRoot().childCount == 1) && 
+        (document.getRoot().getChild(0).name == "paragraph") &&
+         document.getRoot().getChild(0).isEmpty);
+    
+}
+
+/**
+ * This implements highlighting via ephemeral markers (not stored in the
+ * document). 
+ *
+ * XXX Another option would be to use formatting markers, which would have
+ *     the benefit of making it work for readonly notes. On the flip side,
+ *     the formatting would be stored with the note and it would need a 
+ *     way to remove that formatting when editing back the note.
+ */
+function highlightCodeBlock(codeBlock, writer) {
+    log("highlighting codeblock " + JSON.stringify(codeBlock.toJSON()));
+    const model = codeBlock.root.document.model;
+
+    // Can't invoke addMarker with an already existing marker name,
+    // clear all highlight markers first. Marker names follow the
+    // pattern hljs:cssClassName:uniqueId, eg hljs:hljs-comment:1
+    const codeBlockRange = model.createRangeIn(codeBlock);
+    for (const marker of model.markers.getMarkersIntersectingRange(codeBlockRange)) {
+        dbg("removing marker " + marker.name);
+        writer.removeMarker(marker.name);
+    }
+
+    // Don't highlight if plaintext (note this needs to remove the markers
+    // above first, in case this was a switch from non plaintext to
+    // plaintext)
+    const mimeType = codeBlock.getAttribute("language");
+    if (mimeType == "text-plain") {
+        // XXX There's actually a plaintext language that could be used
+        //     if you wanted the non-highlight formatting of
+        //     highlight.js css applied, see
+        //     https://github.com/highlightjs/highlight.js/issues/700
+        log("not highlighting plaintext codeblock");
+        return;
+    }
+
+    // Find the corresponding language for the given mimetype.
+    const highlightJsLanguage = mime_types.getHighlightJsNameForMime(mimeType);
+
+    if (mimeType !== mime_types.MIME_TYPE_AUTO && !highlightJsLanguage) {
+        console.warn(`Unsupported highlight.js for mime type ${mimeType}.`);
+        return;
+    }
+
+    // Don't highlight if the code is too big, as the typing performance will be highly degraded.
+    if (codeBlock.childCount >= HIGHLIGHT_MAX_BLOCK_COUNT) {
+        return;
+    }
+        
+    // highlight.js needs the full text without HTML tags, eg for the
+    // text
+    // #include <stdio.h>
+    // the highlighted html is
+    // <span class="hljs-meta">#<span class="hljs-keyword">include</span> <span class="hljs-string">&lt;stdio.h&gt;</span></span>
+    // But CKEditor codeblocks have <br> instead of \n
+
+    // Do a two pass algorithm:
+    // - First pass collect the codeblock children text, change <br> to
+    //   \n
+    // - invoke highlight.js on the collected text generating html
+    // - Second pass parse the highlighted html spans and match each
+    //   char to the CodeBlock text. Issue addMarker CKEditor calls for
+    //   each span
+
+    // XXX This is brittle and assumes how highlight.js generates html
+    //     (blanks, which characters escapes, etc), a better approach
+    //     would be to use highlight.js beta api TreeTokenizer?
+
+    // Collect all the text nodes to pass to the highlighter Text is
+    // direct children of the codeBlock
+    let text = "";
+    for (let i = 0; i < codeBlock.childCount; ++i) {
+        let child = codeBlock.getChild(i);
+
+        // We only expect text and br elements here
+        if (child.is("$text")) {
+            dbg("child text " + child.data);
+            text += child.data;
+
+        } else if (child.is("element") && 
+                    (child.name == "softBreak")) {
+            dbg("softBreak");
+            text += "\n";
+
+        } else {
+            warn("Unkown child " + JSON.stringify(child.toJSON()));
+        }
+    }
+
+    let highlightRes;
+    if (mimeType === mime_types.MIME_TYPE_AUTO) {
+        highlightRes = hljs.highlightAuto(text);
+    } else {
+        highlightRes = hljs.highlight(text, { language: highlightJsLanguage });
+    }
+    dbg("text\n" + text);
+    dbg("html\n" + highlightRes.value);
+
+    let iHtml = 0;
+    let html = highlightRes.value;
+    let spanStack = [];
+    let iChild = -1;
+    let childText = "";
+    let child = null;
+    let iChildText = 0;
+
+    while (iHtml < html.length) {
+        // Advance the text index and fetch a new child if necessary
+        if (iChildText >= childText.length) {
+            iChild++;
+            if (iChild < codeBlock.childCount) {
+                dbg("Fetching child " + iChild);
+                child = codeBlock.getChild(iChild);
+                if (child.is("$text")) {
+                    dbg("child text " + child.data);
+                    childText = child.data;
+                    iChildText = 0;
+                } else if (child.is("element", "softBreak")) {
+                    dbg("softBreak");
+                    iChildText = 0;
+                    childText = "\n";
+                } else {
+                    warn("child unknown!!!");
+                }
+            } else {
+                // Don't bail if beyond the last children, since there's
+                // still html text, it must be a closing span tag that
+                // needs to be dealt with below
+                childText = "";
+            }
+        } 
+
+        // This parsing is made slightly simpler and faster by only
+        // expecting <span> and </span> tags in the highlighted html
+        if ((html[iHtml] == "<") && (html[iHtml+1] != "/")) {
+            // new span, note they can be nested eg C preprocessor lines
+            // are inside a hljs-meta span, hljs-title function names
+            // inside a hljs-function span, etc
+            let iStartQuot = html.indexOf("\"", iHtml+1);
+            let iEndQuot = html.indexOf("\"", iStartQuot+1);
+            let className = html.slice(iStartQuot+1, iEndQuot);
+            // XXX highlight js uses scope for Python "title function_",
+            //     etc for now just use the first style only 
+            // See https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#a-note-on-scopes-with-sub-scopes
+            let iBlank = className.indexOf(" "); 
+            if (iBlank > 0) {
+                className = className.slice(0, iBlank);
+            }
+            dbg("Found span start " + className);
+
+            iHtml = html.indexOf(">", iHtml) + 1;
+
+            // push the span 
+            let posStart = writer.createPositionAt(codeBlock, child.startOffset + iChildText);
+            spanStack.push({ "className" : className, "posStart": posStart});
+
+        } else if ((html[iHtml] == "<") && (html[iHtml+1] == "/")) {
+            // Done with this span, pop the span and mark the range
+            iHtml = html.indexOf(">", iHtml+1) + 1;
+
+            let stackTop = spanStack.pop();
+            let posStart = stackTop.posStart;
+            let className = stackTop.className;
+            let posEnd = writer.createPositionAt(codeBlock, child.startOffset + iChildText);
+            let range = writer.createRange(posStart, posEnd);
+            let markerName = "hljs:" + className + ":" + markerCounter;
+            // Use an incrementing number for the uniqueId, random of
+            // 10000000 is known to cause collisions with a few
+            // codeblocks of 10s of lines on real notes (each line is
+            // one or more marker).
+            // Wrap-around for good measure so all numbers are positive
+            // XXX Another option is to catch the exception and retry or
+            //     go through the markers and get the largest + 1
+            markerCounter = (markerCounter + 1) & 0xFFFFFF;
+            dbg("Found span end " + className);
+            dbg("Adding marker " + markerName + ": " + JSON.stringify(range.toJSON()));
+            writer.addMarker(markerName, {"range": range, "usingOperation": false});
+
+        } else {
+            // Text, we should also have text in the children
+            assert(
+                ((iChild < codeBlock.childCount) && (iChildText < childText.length)), 
+                "Found text in html with no corresponding child text!!!!"
+            );
+            if (html[iHtml] == "&") {
+                // highlight.js only encodes
+                // .replace(/&/g, '&amp;')
+                // .replace(/</g, '&lt;')
+                // .replace(/>/g, '&gt;')
+                // .replace(/"/g, '&quot;')
+                // .replace(/'/g, '&#x27;');
+                // see https://github.com/highlightjs/highlight.js/blob/7addd66c19036eccd7c602af61f1ed84d215c77d/src/lib/utils.js#L5
+                let iAmpEnd = html.indexOf(";", iHtml);
+                dbg(html.slice(iHtml, iAmpEnd));
+                iHtml = iAmpEnd + 1;
+            } else {
+                // regular text
+                dbg(html[iHtml]);
+                iHtml++;
+            }
+            iChildText++;
+        }
+    }
+}
--- a/src/public/app/widgets/type_widgets/content_widget.js
+++ b/src/public/app/widgets/type_widgets/content_widget.js
@@ -34,6 +34,8 @@ import BackendLogWidget from "./content/backend_log.js";
 import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_timeout.js";
 import RibbonOptions from "./options/appearance/ribbon.js";
 import LocalizationOptions from "./options/appearance/i18n.js";
+import CodeBlockOptions from "./options/appearance/code_block.js";
+import EditorOptions from "./options/text_notes/editor.js";

 const TPL = `<div class="note-detail-content-widget note-detail-printable">
    <style>
@@ -59,6 +61,7 @@ const CONTENT_WIDGETS = {
        LocalizationOptions,
        ThemeOptions,
        FontsOptions,
+        CodeBlockOptions,
        ZoomFactorOptions,
        NativeTitleBarOptions,
        MaxContentWidthOptions,
@@ -66,6 +69,7 @@ const CONTENT_WIDGETS = {
    ],
    _optionsShortcuts: [ KeyboardShortcutsOptions ],
    _optionsTextNotes: [
+        EditorOptions,
        HeadingStyleOptions,
        TableOfContentsOptions,
        HighlightsListOptions,
--- a/src/public/app/widgets/type_widgets/editable_text.js
+++ b/src/public/app/widgets/type_widgets/editable_text.js
@@ -10,6 +10,8 @@ import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
 import link from "../../services/link.js";
 import appContext from "../../components/app_context.js";
 import dialogService from "../../services/dialog.js";
+import { initSyntaxHighlighting } from "./ckeditor/syntax_highlight.js";
+import options from "../../services/options.js";

 const ENABLE_INSPECTOR = false;

@@ -87,6 +89,29 @@ const TPL = `
 </div>
 `;

+function buildListOfLanguages() {
+    const userLanguages = (mimeTypesService.getMimeTypes())
+        .filter(mt => mt.enabled)
+        .map(mt => ({
+                language: mimeTypesService.normalizeMimeTypeForCKEditor(mt.mime),
+                label: mt.title
+            }));
+
+    return [
+        {
+            language: mimeTypesService.MIME_TYPE_AUTO,
+            label: t("editable-text.auto-detect-language")
+        },
+        ...userLanguages
+    ];
+}
+
+/**
+ * The editor can operate into two distinct modes:
+ * 
+ * - Ballon block mode, in which there is a floating toolbar for the selected text, but another floating button for the entire block (i.e. paragraph).
+ * - Decoupled mode, in which the editing toolbar is actually added on the client side (in {@link ClassicEditorToolbar}), see https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for an example on how the decoupled editor works.
+ */
 export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
    static getType() { return "editableText"; }

@@ -105,21 +130,17 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {

    async initEditor() {
        await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
+        const isClassicEditor = (options.get("textNoteEditorType") === "ckeditor-classic")
+        const editorClass = (isClassicEditor ? CKEditor.DecoupledEditor : CKEditor.BalloonEditor);

-        const codeBlockLanguages =
-            (await mimeTypesService.getMimeTypes())
-                .filter(mt => mt.enabled)
-                .map(mt => ({
-                        language: mt.mime.toLowerCase().replace(/[\W_]+/g,"-"),
-                        label: mt.title
-                    }));
+        const codeBlockLanguages = buildListOfLanguages();

        // CKEditor since version 12 needs the element to be visible before initialization. At the same time,
        // we want to avoid flicker - i.e., show editor only once everything is ready. That's why we have separate
        // display of $widget in both branches.
        this.$widget.show();

-        this.watchdog = new EditorWatchdog(BalloonEditor, {
+        this.watchdog = new CKEditor.EditorWatchdog(editorClass, {
            // An average number of milliseconds between the last editor errors (defaults to 5000).
            // When the period of time between errors is lower than that and the crashNumberLimit
            // is also reached, the watchdog changes its state to crashedPermanently, and it stops
@@ -155,7 +176,22 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
        });

        this.watchdog.setCreator(async (elementOrData, editorConfig) => {
-            const editor = await BalloonEditor.create(elementOrData, editorConfig);
+            const editor = await editorClass.create(elementOrData, editorConfig);
+
+            await initSyntaxHighlighting(editor);
+
+            if (isClassicEditor) {
+                let $classicToolbarWidget;
+                if (!utils.isMobile()) {
+                    const $parentSplit = this.$widget.parents(".note-split.type-text");
+                    $classicToolbarWidget = $parentSplit.find("> .ribbon-container .classic-toolbar-widget");
+                } else {
+                    $classicToolbarWidget = $("body").find(".classic-toolbar-widget");
+                }
+                
+                $classicToolbarWidget.empty();
+                $classicToolbarWidget[0].appendChild(editor.ui.view.toolbar.element);
+            }

            editor.model.document.on('change:data', () => this.spacedUpdate.scheduleUpdate());

--- a/src/public/app/widgets/type_widgets/empty.js
+++ b/src/public/app/widgets/type_widgets/empty.js
@@ -18,14 +18,28 @@ const TPL = `
            width: 130px;
            text-align: center;
            margin: 10px;
-            padding; 10px;
            border: 1px transparent solid;
        }
-        
+
        .workspace-notes .workspace-note:hover {
            cursor: pointer;
            border: 1px solid var(--main-border-color);
        }
+
+        .note-detail-empty-results .aa-dropdown-menu {
+            max-height: 50vh;
+            overflow: scroll;
+            border: var(--bs-border-width) solid var(--bs-border-color);
+            border-top: 0;
+        }
+
+        .empty-tab-search .note-autocomplete-input {
+            border-bottom-left-radius: 0;
+        }
+
+        .empty-tab-search .input-clearer-button {
+            border-bottom-right-radius: 0;
+        }
        
        .workspace-icon {
            text-align: center;
@@ -33,14 +47,14 @@ const TPL = `
        }
    </style>

-    <div class="form-group">
+    <div class="workspace-notes"></div>
+    <div class="form-group empty-tab-search">
        <label>${t('empty.open_note_instruction')}</label>
-        <div class="input-group">
+        <div class="input-group mt-1">
            <input class="form-control note-autocomplete" placeholder="${t('empty.search_placeholder')}">
        </div>
    </div>
-    
-    <div class="workspace-notes"></div>
+    <div class="note-detail-empty-results"></div>
 </div>`;

 export default class EmptyTypeWidget extends TypeWidget {
@@ -51,10 +65,12 @@ export default class EmptyTypeWidget extends TypeWidget {

        this.$widget = $(TPL);
        this.$autoComplete = this.$widget.find(".note-autocomplete");
+        this.$results = this.$widget.find(".note-detail-empty-results");

        noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {
            hideGoToSelectedNoteButton: true,
-            allowCreatingNotes: true
+            allowCreatingNotes: true,
+            container: this.$results
        })
            .on('autocomplete:noteselected', function(event, suggestion, dataset) {
                if (!suggestion.notePath) {
@@ -66,6 +82,7 @@ export default class EmptyTypeWidget extends TypeWidget {

        this.$workspaceNotes = this.$widget.find('.workspace-notes');

+        noteAutocompleteService.showRecentNotes(this.$autoComplete);
        super.doRender();
    }

--- a/src/public/app/widgets/type_widgets/options/appearance/code_block.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/code_block.js
@@ -0,0 +1,119 @@
+import { t } from "../../../../services/i18n.js";
+import library_loader from "../../../../services/library_loader.js";
+import server from "../../../../services/server.js";
+import OptionsWidget from "../options_widget.js";
+
+const SAMPLE_LANGUAGE = "javascript";
+const SAMPLE_CODE = `\
+const n = 10;
+greet(n); // Print "Hello World" for n times
+
+/**
+ * Displays a "Hello World!" message for a given amount of times, on the standard console. The "Hello World!" text will be displayed once per line.
+ * 
+ * @param {number} times    The number of times to print the \`Hello World!\` message.
+ */
+function greet(times) {
+  for (let i = 0; i++; i < times) {
+    console.log("Hello World!");
+  }
+}
+`
+
+const TPL = `
+<div class="options-section">
+    <h4>${t("highlighting.title")}</h4>
+
+    <p>${t("highlighting.description")}</p>
+
+    <div class="form-group row">
+        <div class="col-6">
+            <label>${t("highlighting.color-scheme")}</label>
+            <select class="theme-select form-select"></select>
+        </div>
+
+        <div class="col-6 side-checkbox">
+            <label class="form-check">
+                <input type="checkbox" class="word-wrap form-check-input" />
+                ${t("code_block.word_wrapping")}
+            </label>
+        </div>
+    </div>
+
+    <div class="form-group row">
+        <div class="note-detail-readonly-text-content ck-content code-sample-wrapper">
+            <pre class="hljs"><code class="code-sample">${SAMPLE_CODE}</code></pre>
+        </div>
+    </div>
+
+    <style>
+        .code-sample-wrapper {
+            margin-top: 1em;
+        }
+    </style>
+</div>
+`;
+
+/**
+ * Contains appearance settings for code blocks within text notes, such as the theme for the syntax highlighter.
+ */
+export default class CodeBlockOptions extends OptionsWidget {
+    doRender() {        
+        this.$widget = $(TPL);        
+        this.$themeSelect = this.$widget.find(".theme-select");
+        this.$themeSelect.on("change", async () => {
+            const newTheme = this.$themeSelect.val();
+            library_loader.loadHighlightingTheme(newTheme);
+            await server.put(`options/codeBlockTheme/${newTheme}`);
+        });
+        
+        this.$wordWrap = this.$widget.find("input.word-wrap");
+        this.$wordWrap.on("change", () => this.updateCheckboxOption("codeBlockWordWrap", this.$wordWrap));
+
+        // Set up preview
+        this.$sampleEl = this.$widget.find(".code-sample");        
+    }
+
+    #setupPreview(shouldEnableSyntaxHighlight) {
+        const text = SAMPLE_CODE;
+        if (shouldEnableSyntaxHighlight) {
+            library_loader
+                .requireLibrary(library_loader.HIGHLIGHT_JS)
+                .then(() => {
+                    const highlightedText = hljs.highlight(text, {
+                        language: SAMPLE_LANGUAGE
+                    });
+                    this.$sampleEl.html(highlightedText.value);
+                });
+        } else {
+            this.$sampleEl.text(text);
+        }
+    }
+
+    async optionsLoaded(options) {
+        const themeGroups = await server.get("options/codeblock-themes");
+        this.$themeSelect.empty();
+
+        for (const [ key, themes ] of Object.entries(themeGroups)) {
+            const $group = (key ? $("<optgroup>").attr("label", key) : null);
+
+            for (const theme of themes) {
+                const option = $("<option>")
+                    .attr("value", theme.val)
+                    .text(theme.title);
+
+                if ($group) {
+                    $group.append(option);
+                } else {
+                    this.$themeSelect.append(option);
+                }
+            }
+            this.$themeSelect.append($group);
+        }
+        this.$themeSelect.val(options.codeBlockTheme);
+        this.setCheckboxState(this.$wordWrap, options.codeBlockWordWrap);
+        this.$widget.closest(".note-detail-printable").toggleClass("word-wrap", options.codeBlockWordWrap === "true");
+
+        this.#setupPreview(options.codeBlockTheme !== "none");
+    }
+}
--- a/src/public/app/widgets/type_widgets/options/appearance/fonts.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/fonts.js
@@ -133,14 +133,17 @@ export default class FontsOptions extends OptionsWidget {
        this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options"));
    }

+    isEnabled() {
+        return this._isEnabled;
+    }
+
    async optionsLoaded(options) {
-        if (options.overrideThemeFonts !== 'true') {
-            this.toggleInt(false);
+        this._isEnabled = (options.overrideThemeFonts === 'true');
+        this.toggleInt(this._isEnabled);
+        if (!this._isEnabled) {
            return;
        }

-        this.toggleInt(true);
-
        this.$mainFontSize.val(options.mainFontSize);
        this.fillFontFamilyOptions(this.$mainFontFamily, options.mainFontFamily);

--- a/src/public/app/widgets/type_widgets/options/appearance/theme.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/theme.js
@@ -13,11 +13,11 @@ const TPL = `
            <select class="theme-select form-select"></select>
        </div>
        
-        <div class="col-6">
-            <label>${t("theme.override_theme_fonts_label")}</label>
-            <div class="form-check">
+        <div class="col-6 side-checkbox">
+            <label class="form-check">
                <input type="checkbox" class="override-theme-fonts form-check-input">
-            </div>
+                ${t("theme.override_theme_fonts_label")}
+            </label>
        </div>
    </div>
 </div>`;
--- a/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js
+++ b/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js
@@ -19,9 +19,24 @@ export default class CodeMimeTypesOptions extends OptionsWidget {

    async optionsLoaded(options) {
        this.$mimeTypes.empty();
+        let index = -1;
+        let prevInitial = "";

-        for (const mimeType of await mimeTypesService.getMimeTypes()) {
+        for (const mimeType of mimeTypesService.getMimeTypes()) {
            const id = "code-mime-type-" + (idCtr++);
+            index++;
+            
+            // Append a heading to group items by the first letter, excepting for the
+            // first item ("Plain Text"). Note: this code assumes the items are already
+            // in alphabetical ordered.
+            if (index > 0) {
+                const initial = mimeType.title.charAt(0).toUpperCase();
+                
+                if (initial !== prevInitial) {
+                    this.$mimeTypes.append($("<h5>").text(initial));
+                    prevInitial = initial;
+                }
+            }

            this.$mimeTypes.append($("<li>")
                .append($('<input type="checkbox" class="form-check-input">')
--- a/src/public/app/widgets/type_widgets/options/options_widget.js
+++ b/src/public/app/widgets/type_widgets/options/options_widget.js
@@ -44,6 +44,20 @@ export default class OptionsWidget extends NoteContextAwareWidget {

    optionsLoaded(options) {}

+    async refresh() {
+        this.toggleInt(this.isEnabled());
+        try {
+            await this.refreshWithNote(this.note);
+        } catch (e) {
+            // Ignore errors when user is refreshing or navigating away.
+            if (e === "rejected by browser") {
+                return;
+            }
+
+            throw e;
+        }
+    }
+
    async refreshWithNote(note) {
        const options = await server.get('options');

--- a/src/public/app/widgets/type_widgets/options/text_notes/editor.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/editor.js
@@ -0,0 +1,30 @@
+import { t } from "../../../../services/i18n.js";
+import utils from "../../../../services/utils.js";
+import OptionsWidget from "../options_widget.js";
+
+const TPL = `
+<div class="options-section">
+    <h4>${t("editing.editor_type.label")}</h4>
+    
+    <select class="editor-type-select form-select">
+        <option value="ckeditor-balloon">${t("editing.editor_type.floating")}</option>
+        <option value="ckeditor-classic">${t("editing.editor_type.fixed")}</option>
+    </select>
+</div>`;
+
+export default class EditorOptions extends OptionsWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$body = $("body");
+        this.$editorType = this.$widget.find(".editor-type-select");
+        this.$editorType.on('change', async () => {
+            const newEditorType = this.$editorType.val();
+            await this.updateOption('textNoteEditorType', newEditorType);
+            utils.reloadFrontendApp("editor type change");
+        });
+    }
+
+    async optionsLoaded(options) {
+        this.$editorType.val(options.textNoteEditorType);
+    }
+}
--- a/src/public/app/widgets/type_widgets/read_only_text.js
+++ b/src/public/app/widgets/type_widgets/read_only_text.js
@@ -1,5 +1,6 @@
 import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
 import libraryLoader from "../../services/library_loader.js";
+import { applySyntaxHighlight } from "../../services/syntax_highlight.js";

 const TPL = `
 <div class="note-detail-readonly-text note-detail-printable">
@@ -89,7 +90,7 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
        // we load CKEditor also for read only notes because they contain content styles required for correct rendering of even read only notes
        // we could load just ckeditor-content.css but that causes CSS conflicts when both build CSS and this content CSS is loaded at the same time
        // (see https://github.com/zadam/trilium/issues/1590 for example of such conflict)
-        await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
+        await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);        

        const blob = await note.getBlob();

@@ -110,6 +111,8 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {

            renderMathInElement(this.$content[0], {trust: true});
        }
+
+        await applySyntaxHighlight(this.$content);
    }

    async refreshIncludedNoteEvent({noteId}) {
--- a/src/public/stylesheets/print.css
+++ b/src/public/stylesheets/print.css
@@ -20,4 +20,10 @@
        vertical-align: middle;
    }

+    pre {
+        box-shadow: unset !important;
+        border: .75pt solid gray !important;
+        border-radius: 2pt !important;
+    }
+
 }
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -382,7 +382,7 @@ button.btn, button.btn-sm {
    padding: 0;
 }

-pre:not(.CodeMirror-line) {
+pre:not(.CodeMirror-line):not(.hljs) {
    color: var(--main-text-color) !important;
    white-space: pre-wrap;
    font-size: 100%;
@@ -807,6 +807,65 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
    vertical-align: baseline !important;
 }

+.ck-content pre {
+    border: 0;
+    border-radius: 6px;
+    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
+    padding: 0 !important;
+    margin-top: 2px !important;
+    overflow: unset;
+}
+
+html .note-detail-editable-text :not(figure, .include-note):first-child {
+    /* Create some space for the top-side shadow */
+    margin-top: 1px !important;
+}
+
+.ck.ck-editor__editable pre[data-language]::after {
+    --ck-color-code-block-label-background: rgba(128, 128, 128, .5);
+    border-radius: 0 0 5px 5px;
+    padding: 0px 10px;
+    letter-spacing: .5px;
+    font-weight: bold;
+}
+
+.ck-content pre code {
+    display: block;
+    padding: 1em;
+    overflow: auto;
+}
+
+.ck-content pre code::-webkit-scrollbar {
+    height: 6px;
+}
+
+.ck-content pre code::-webkit-scrollbar-thumb {
+    height: 4px;
+    border: none !important;
+    background: gray !important;
+}
+
+.ck-content pre code::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
+    cursor: default;
+}
+
+.note-detail-printable:not(.word-wrap) pre code {
+    white-space: pre;
+    margin-right: 1em;
+}
+
+.code-sample-wrapper .hljs {
+    transition: background-color linear 100ms;
+}
+
+.side-checkbox {
+    display: flex;
+    align-items: end;
+    padding-top: .375rem;
+    padding-bottom: .375rem;
+    line-height: 1.5;
+}
+
 .ck-content .todo-list .todo-list__label > input:before {
    border: 1px solid var(--muted-text-color) !important;
 }
@@ -1140,6 +1199,10 @@ button.close:hover {
    flex-grow: 0 !important;
 }

+.options-mime-types {
+    column-width: 250px;
+}
+
 textarea {
    cursor: auto;
 }
@@ -1174,3 +1237,4 @@ textarea {
 .jump-to-note-results .aa-suggestions {
    padding: 1rem;
 }
+
--- a/src/public/stylesheets/theme-dark.css
+++ b/src/public/stylesheets/theme-dark.css
@@ -92,3 +92,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .btn-close {
    filter: invert(1);
 }
+
+.ck-content pre {
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
+}
--- a/src/public/translations/cn/translation.json
+++ b/src/public/translations/cn/translation.json
@@ -72,13 +72,12 @@
    "delete_all_clones_description": "同时删除所有克隆（可以在最近修改中撤消）",
    "erase_notes_description": "通常（软）删除仅标记笔记为已删除，可以在一段时间内通过最近修改对话框撤消。选中此选项将立即擦除笔记，不可撤销。",
    "erase_notes_warning": "永久擦除笔记（无法撤销），包括所有克隆。这将强制应用程序重新加载。",
-    "notes_to_be_deleted": "将删除以下笔记（<span class=\"deleted-notes-count\"></span>）",
+    "notes_to_be_deleted": "将删除以下笔记 ({{- noteCount}})",
    "no_note_to_delete": "没有笔记将被删除（仅克隆）。",
-    "broken_relations_to_be_deleted": "将删除以下关系并断开连接（<span class=\"broke-relations-count\"></span>）",
+    "broken_relations_to_be_deleted": "将删除以下关系并断开连接 ({{- relationCount}})",
    "cancel": "取消",
    "ok": "确定",
-    "note": "笔记",
-    "to_be_deleted": " (将被删除的笔记) 被以下关系 <code>{{attrName}}</code> 引用, 来自 "
+    "deleted_relation_text": "笔记 {{- note}} (将被删除的笔记) 被以下关系 {{- relation}} 引用, 来自 {{- source}}。"
  },
  "export": {
    "export_note_title": "导出笔记",
--- a/src/public/translations/de/translation.json
+++ b/src/public/translations/de/translation.json
--- a/src/public/translations/en/translation.json
+++ b/src/public/translations/en/translation.json
@@ -75,16 +75,15 @@
  },
  "delete_notes": {
    "delete_notes_preview": "Delete notes preview",
-    "delete_all_clones_description": "delete also all clones (can be undone in recent changes)",
+    "delete_all_clones_description": "Delete also all clones (can be undone in recent changes)",
    "erase_notes_description": "Normal (soft) deletion only marks the notes as deleted and they can be undeleted (in recent changes dialog) within a period of time. Checking this option will erase the notes immediately and it won't be possible to undelete the notes.",
-    "erase_notes_warning": "erase notes permanently (can't be undone), including all clones. This will force application reload.",
-    "notes_to_be_deleted": "Following notes will be deleted (<span class=\"deleted-notes-count\"></span>)",
+    "erase_notes_warning": "Erase notes permanently (can't be undone), including all clones. This will force application reload.",
+    "notes_to_be_deleted": "Following notes will be deleted ({{- noteCount}})",
    "no_note_to_delete": "No note will be deleted (only clones).",
-    "broken_relations_to_be_deleted": "Following relations will be broken and deleted (<span class=\"broke-relations-count\"></span>)",
+    "broken_relations_to_be_deleted": "Following relations will be broken and deleted ({{- relationCount}})",
    "cancel": "Cancel",
    "ok": "OK",
-    "note": "Note",
-    "to_be_deleted": " (to be deleted) is referenced by relation <code>{{attrName}}</code> originating from "
+    "deleted_relation_text": "Note {{- note}} (to be deleted) is referenced by relation {{- relation}} originating from {{- source}}."
  },
  "export": {
    "export_note_title": "Export note",
@@ -1054,7 +1053,7 @@
    "edited_notes_message": "Edited Notes ribbon tab will automatically open on day notes"
  },
  "theme": {
-    "title": "Theme",
+    "title": "Application Theme",
    "theme_label": "Theme",
    "override_theme_fonts_label": "Override theme fonts",
    "light_theme": "Light",
@@ -1434,6 +1433,7 @@
    "add_new_tab": "Add new tab",
    "close": "Close",
    "close_other_tabs": "Close other tabs",
+    "close_right_tabs": "Close tabs to the right",
    "close_all_tabs": "Close all tabs",
    "move_tab_to_new_window": "Move this tab to a new window",
    "new_tab": "New tab"
@@ -1497,5 +1497,29 @@
    "move-to-visible-launchers": "Move to visible launchers",
    "move-to-available-launchers": "Move to available launchers",
    "duplicate-launcher": "Duplicate launcher"
+  },
+  "editable-text": {
+    "auto-detect-language": "Auto-detected"
+  },
+  "highlighting": {
+    "title": "Code Syntax Highlighting for Text Notes",
+    "description": "Controls the syntax highlighting for code blocks inside text notes, code notes will not be affected.",
+    "color-scheme": "Color Scheme"
+  },
+  "code_block": {
+    "word_wrapping": "Word wrapping"
+  },
+  "classic_editor_toolbar": {
+    "title": "Formatting"
+  },
+  "editor": {
+    "title": "Editor"
+  },
+  "editing": {
+    "editor_type": {
+      "label": "Formatting toolbar",
+      "floating": "Floating (editing tools appear near the cursor)",
+      "fixed": "Fixed (editing tools appear in the \"Formatting\" ribbon tab)"
+    }
  }
 }
--- a/src/public/translations/es/translation.json
+++ b/src/public/translations/es/translation.json
@@ -75,16 +75,15 @@
  },
  "delete_notes": {
    "delete_notes_preview": "Eliminar vista previa de notas",
-    "delete_all_clones_description": "eliminar también todos los clones (se puede deshacer en cambios recientes)",
+    "delete_all_clones_description": "Eliminar también todos los clones (se puede deshacer en cambios recientes)",
    "erase_notes_description": "La eliminación normal (suave) solo marca las notas como eliminadas y se pueden recuperar (en el cuadro de diálogo de cambios recientes) dentro de un periodo de tiempo. Al marcar esta opción se borrarán las notas inmediatamente y no será posible recuperarlas.",
-    "erase_notes_warning": "eliminar notas permanentemente (no se puede deshacer), incluidos todos los clones. Esto forzará la recarga de la aplicación.",
-    "notes_to_be_deleted": "Las siguientes notas serán eliminadas (<span class=\"deleted-notes-count\"></span>)",
+    "erase_notes_warning": "Eliminar notas permanentemente (no se puede deshacer), incluidos todos los clones. Esto forzará la recarga de la aplicación.",
+    "notes_to_be_deleted": "Las siguientes notas serán eliminadas ({{- noteCount}})",
    "no_note_to_delete": "No se eliminará ninguna nota (solo clones).",
-    "broken_relations_to_be_deleted": "Las siguientes relaciones se romperán y serán eliminadas (<span class=\"broke-relations-count\"></span>)",
+    "broken_relations_to_be_deleted": "Las siguientes relaciones se romperán y serán eliminadas ({{- relationCount}})",
    "cancel": "Cancelar",
    "ok": "Aceptar",
-    "note": "Nota",
-    "to_be_deleted": " (para ser eliminada) está referenciado por la relación <code>{{attrName}}</code> que se origina en "
+    "deleted_relation_text": "Nota {{- note}} (para ser eliminada) está referenciado por la relación {{- relation}} que se origina en {{- source}}."
  },
  "export": {
    "export_note_title": "Exportar nota",
@@ -896,7 +895,8 @@
    "label_rock_or_pop": "sólo una de las etiquetas debe estar presente",
    "label_year_comparison": "comparación numérica (también >, >=, <).",
    "label_date_created": "notas creadas en el último mes",
-    "error": "Error de búsqueda: {{error}}"
+    "error": "Error de búsqueda: {{error}}",
+    "search_prefix": "Buscar:"
  },
  "attachment_detail": {
    "open_help_page": "Abrir página de ayuda en archivos adjuntos",
@@ -1433,6 +1433,7 @@
    "add_new_tab": "Agregar nueva pestaña",
    "close": "Cerrar",
    "close_other_tabs": "Cerrar otras pestañas",
+    "close_right_tabs": "Cerrar pestañas a la derecha",
    "close_all_tabs": "Cerras todas las pestañas",
    "move_tab_to_new_window": "Mover esta pestaña a una nueva ventana",
    "new_tab": "Nueva pestaña"
@@ -1496,5 +1497,29 @@
    "move-to-visible-launchers": "Mover a lanzadores visibles",
    "move-to-available-launchers": "Mover a lanzadores disponibles",
    "duplicate-launcher": "Duplicar lanzador"
+  },
+  "editable-text": {
+    "auto-detect-language": "Detectado automaticamente"
+  },
+  "highlighting": {
+    "title": "Resaltado de sintaxis de de código para Notas de Texto",
+    "description": "Controla el resaltado de sintaxis para bloques de código dentro de las notas de texto, las notas de código no serán afectadas.",
+    "color-scheme": "Esquema de color"
+  },
+  "code_block": {
+    "word_wrapping": "Ajuste de palabras"
+  },
+  "classic_editor_toolbar": {
+    "title": "Formato"
+  },
+  "editor": {
+    "title": "Editor"
+  },
+  "editing": {
+    "editor_type": {
+      "label": "Barra de herramientas de formato",
+      "floating": "Flotante (las herramientas de edición aparecen cerca del cursor)",
+      "fixed": "Fijo (las herramientas de edición aparecen en la pestaña de la cinta \"Formato\")"
+    }
  }
 }
--- a/src/public/translations/fr/translation.json
+++ b/src/public/translations/fr/translation.json
@@ -15,7 +15,13 @@
      "message": "Une erreur critique s'est produite qui empêche l'application client de démarrer :\n\n{{message}}\n\nCeci est probablement dû à un échec inattendu d'un script. Essayez de démarrer l'application en mode sans échec et de résoudre le problème."
    },
    "widget-error": {
-      "title": "Impossible d'initialiser un widget"
+      "title": "Impossible d'initialiser un widget",
+      "message-custom": "Le widget personnalisé de la note avec l'ID \"{{id}}\", intitulée \"{{title}}\" n'a pas pu être initialisé en raison de\n\n{{message}}",
+      "message-unknown": "Le widget inconnu n'a pas pu être initialisé :\n\n{{message}}"
+    },
+    "bundle-error": {
+      "title": "Echec du chargement d'un script personnalisé",
+      "message": "Le script de la note avec l'ID \"{{id}}\", intitulé \"{{title}}\" n'a pas pu être exécuté à cause de\n\n{{message}}"
    }
  },
  "add_link": {
@@ -51,7 +57,7 @@
    "clone_notes_to": "Cloner des notes dans...",
    "help_on_links": "Aide sur les liens",
    "notes_to_clone": "Notes à cloner",
-    "target_parent_note": "Note parent cible",
+    "target_parent_note": "Note parent de destination",
    "search_for_note_by_its_name": "rechercher une note par son nom",
    "cloned_note_prefix_title": "La note clonée sera affichée dans l'arbre des notes avec le préfixe donné",
    "prefix_optional": "Préfixe (facultatif)",
@@ -68,17 +74,16 @@
    "also_delete_note": "Supprimer également la note"
  },
  "delete_notes": {
-    "delete_notes_preview": "Supprimer l'aperçu des notes",
+    "delete_notes_preview": "Supprimer la note",
    "delete_all_clones_description": "supprime également tous les clones (peut être annulé depuis les Modifications récentes)",
    "erase_notes_description": "La suppression normale (douce) marque uniquement les notes comme supprimées et elles peuvent être restaurées (dans la boîte de dialogue des Modifications récentes) dans un délai donné. Cocher cette option effacera les notes immédiatement et il ne sera pas possible de les restaurer.",
-    "erase_notes_warning": "efface les notes de manière permanente (ne peut pas être annulée), y compris tous les clones. Cela forcera le rechargement de l’application.",
-    "notes_to_be_deleted": "Les notes suivantes seront supprimées (<span class=\"deleted-notes-count\"></span>)",
+    "erase_notes_warning": "Efface les notes de manière permanente (ne peut pas être annulée), y compris tous les clones. Cela forcera le rechargement de l’application.",
+    "notes_to_be_deleted": "Les notes suivantes seront supprimées ({{- noteCount}})",
    "no_note_to_delete": "Aucune note ne sera supprimée (uniquement les clones).",
-    "broken_relations_to_be_deleted": "Les relations suivantes seront rompues et supprimées (<span class=\"broke-relations-count\"></span>)",
+    "broken_relations_to_be_deleted": "Les relations suivantes seront rompues et supprimées ({{- relationCount}})",
    "cancel": "Annuler",
    "ok": "OK",
-    "note": "Note",
-    "to_be_deleted": " (à supprimer) est référencé par la relation <code>{{attrName}}</code> provenant de "
+    "deleted_relation_text": "Note {{- note}} (à supprimer) est référencé par la relation {{- relation}} provenant de {{- source}}."
  },
  "export": {
    "export_note_title": "Exporter la note",
@@ -165,7 +170,8 @@
    "textImportedAsText": "Importez HTML, Markdown et TXT sous forme de notes de texte si les métadonnées ne sont pas claires",
    "codeImportedAsCode": "Importez des fichiers de code reconnus (par exemple <code>.json</code>) en tant que notes de code si cela n'est pas clair à partir des métadonnées",
    "replaceUnderscoresWithSpaces": "Remplacez les tirets bas par des espaces dans les noms de notes importées",
-    "import": "Importer"
+    "import": "Importer",
+    "failed": "Échec de l'importation : {{message}}."
  },
  "include_note": {
    "dialog_title": "Inclure une note",
@@ -195,7 +201,7 @@
  "move_to": {
    "dialog_title": "Déplacer les notes vers...",
    "notes_to_move": "Notes à déplacer",
-    "target_parent_note": "Note parent cible",
+    "target_parent_note": "Note parent de destination",
    "search_placeholder": "rechercher une note par son nom",
    "move_button": "Déplacer vers la note sélectionnée <kbd>entrer</kbd>",
    "error_no_path": "Aucun chemin vers lequel déplacer.",
@@ -232,7 +238,7 @@
    "confirm_undelete": "Voulez-vous restaurer cette note et ses sous-notes ?"
  },
  "revisions": {
-    "note_revisions": "Versions des notes",
+    "note_revisions": "Versions de la note",
    "delete_all_revisions": "Supprimer toutes les versions de cette note",
    "delete_all_button": "Supprimer toutes les versions",
    "help_title": "Aide sur les versions de notes",
@@ -246,7 +252,7 @@
    "revisions_deleted": "Les versions de notes ont été supprimées.",
    "revision_restored": "La version de la note a été restaurée.",
    "revision_deleted": "La version de la note a été supprimée.",
-    "snapshot_interval": "Intervalle d'instantané des versions de notes : {{seconds}}s.",
+    "snapshot_interval": "Intervalle d'enregistrement des versions de notes : {{seconds}}s.",
    "maximum_revisions": "Nombre maximal de versions pour la note actuelle : {{number}}.",
    "settings": "Paramètres pour les versions de notes",
    "download_button": "Télécharger",
@@ -397,7 +403,7 @@
    "share_js": "Note JavaScript qui sera injectée dans la page de partage. La note JS doit également figurer dans le sous-arbre partagé. Pensez à utiliser 'share_hidden_from_tree'.",
    "share_template": "Note JavaScript intégrée qui sera utilisée comme modèle pour afficher la note partagée. Revient au modèle par défaut. Pensez à utiliser 'share_hidden_from_tree'.",
    "share_favicon": "Favicon de la note à définir dans la page partagée. En règle générale, vous souhaitez le configurer pour partager la racine et le rendre héritable. La note Favicon doit également figurer dans le sous-arbre partagé. Pensez à utiliser 'share_hidden_from_tree'.",
-    "is_owned_by_note": "appartient à la note",
+    "is_owned_by_note": "appartenant à la note",
    "other_notes_with_name": "Autres notes portant le nom {{attributeType}} \"{{attributeName}}\"",
    "and_more": "... et {{count}} plus."
  },
@@ -426,7 +432,7 @@
    "add_label": "Ajouter un label",
    "label_name_placeholder": "nom du label",
    "label_name_title": "Les caractères autorisés sont : caractères alphanumériques, les tirets bas et les deux-points.",
-    "to_value": "modifié par",
+    "to_value": "égal à",
    "new_value_placeholder": "nouvelle valeur",
    "help_text": "Pour toutes les notes correspondantes :",
    "help_text_item1": "créer un label donné si la note ne le possède pas encore",
@@ -469,7 +475,7 @@
  "move_note": {
    "move_note": "Déplacer la note",
    "to": "vers",
-    "target_parent_note": "note parent cible",
+    "target_parent_note": "note parent de destination",
    "on_all_matched_notes": "Pour toutes les notes correspondantes",
    "move_note_new_parent": "déplacer la note vers le nouveau parent si la note n'a qu'un seul parent (c.-à-d. l'ancienne branche est supprimée et une nouvelle branche est créée dans le nouveau parent)",
    "clone_note_new_parent": "cloner la note vers le nouveau parent si la note a plusieurs clones/branches (il n'est pas clair quelle branche doit être supprimée)",
@@ -477,7 +483,7 @@
  },
  "rename_note": {
    "rename_note": "Renommer la note",
-    "rename_note_title_to": "Renommer le titre de la note en",
+    "rename_note_title_to": "Renommer la note en",
    "new_note_title": "nouveau titre de note",
    "click_help_icon": "Cliquez sur l'icône d'aide à droite pour voir toutes les options",
    "evaluated_as_js_string": "La valeur donnée est évaluée comme une chaîne JavaScript et peut ainsi être enrichie de contenu dynamique via la variable <code>note</code> injectée (la note étant renommée). Exemples :",
@@ -552,7 +558,7 @@
    "febuary": "Février",
    "march": "Mars",
    "april": "Avril",
-    "may": "Peut",
+    "may": "Mai",
    "june": "Juin",
    "july": "Juillet",
    "august": "Août",
@@ -620,18 +626,21 @@
  },
  "note_actions": {
    "convert_into_attachment": "Convertir en pièce jointe",
-    "re_render_note": "Re-rendre la note",
+    "re_render_note": "Recharger la note",
    "search_in_note": "Rechercher dans la note",
-    "note_source": "Source de la note",
+    "note_source": "Code source",
    "note_attachments": "Pièces jointes",
    "open_note_externally": "Ouverture externe",
    "open_note_externally_title": "Le fichier sera ouvert dans une application externe et les modifications apportées seront surveillées. Vous pourrez ensuite téléverser la version modifiée dans Trilium.",
    "open_note_custom": "Ouvrir la note avec",
    "import_files": "Importer des fichiers",
-    "export_note": "Exporter la note",
+    "export_note": "Exporter",
    "delete_note": "Supprimer la note",
-    "print_note": "Imprimer la note",
-    "save_revision": "Enregistrer la version"
+    "print_note": "Imprimer",
+    "save_revision": "Enregistrer une version",
+    "convert_into_attachment_failed": "La conversion de la note '{{title}}' a échoué.",
+    "convert_into_attachment_successful": "La note '{{title}}' a été convertie en pièce jointe.",
+    "convert_into_attachment_prompt": "Êtes-vous sûr de vouloir convertir la note '{{title}}' en une pièce jointe de la note parente ?"
  },
  "onclick_button": {
    "no_click_handler": "Le widget bouton '{{componentId}}' n'a pas de gestionnaire de clic défini"
@@ -641,13 +650,13 @@
    "inactive": "Cliquez pour accéder à une session protégée"
  },
  "revisions_button": {
-    "note_revisions": "Versions des Notes"
+    "note_revisions": "Versions de la note"
  },
  "update_available": {
    "update_available": "Mise à jour disponible"
  },
  "note_launcher": {
-    "this_launcher_doesnt_define_target_note": "Ce lanceur ne définit pas de note cible."
+    "this_launcher_doesnt_define_target_note": "Ce raccourci ne définit pas de note cible."
  },
  "code_buttons": {
    "execute_button_title": "Exécuter le script",
@@ -694,7 +703,7 @@
  "basic_properties": {
    "note_type": "Type de note",
    "editable": "Modifiable",
-    "basic_properties": "Propriétés de base"
+    "basic_properties": "Propriétés basiques"
  },
  "book_properties": {
    "view_type": "Type d'affichage",
@@ -704,7 +713,7 @@
    "expand_all_children": "Développer tous les enfants",
    "collapse": "Réduire",
    "expand": "Développer",
-    "book_properties": "Propriétés du livre",
+    "book_properties": "Propriétés basiques",
    "invalid_view_type": "Type de vue non valide '{{type}}'"
  },
  "edited_notes": {
@@ -741,9 +750,9 @@
    "no_inherited_attributes": "Aucun attribut hérité."
  },
  "note_info_widget": {
-    "note_id": "Identifiant de la note",
-    "created": "Créé",
-    "modified": "Modifié",
+    "note_id": "ID de la note",
+    "created": "Créée le",
+    "modified": "Modifiée le",
    "type": "Type",
    "note_size": "Taille de la note",
    "note_size_info": "La taille de la note fournit une estimation approximative des besoins de stockage pour cette note. Il prend en compte le contenu de la note et de ses versions.",
@@ -752,12 +761,12 @@
    "title": "Infos sur la Note"
  },
  "note_map": {
-    "open_full": "Développer au maximum",
+    "open_full": "Agrandir au maximum",
    "collapse": "Réduire à la taille normale",
-    "title": "Carte de la Note"
+    "title": "Liens de la note"
  },
  "note_paths": {
-    "title": "Chemins de la Note",
+    "title": "Chemins de la note",
    "clone_button": "Cloner la note vers un nouvel emplacement...",
    "intro_placed": "Cette note est située dans les chemins suivants :",
    "intro_not_placed": "Cette note n'est pas encore située dans l'arbre des notes.",
@@ -788,7 +797,7 @@
    "execute_script": "Exécuter le script"
  },
  "search_definition": {
-    "add_search_option": "Ajouter une option de recherche :",
+    "add_search_option": "Options de recherche :",
    "search_string": "chaîne de caractères à rechercher",
    "search_script": "script de recherche",
    "ancestor": "ancêtre",
@@ -886,7 +895,8 @@
    "label_rock_or_pop": "un seul des labels doit être présent",
    "label_year_comparison": "comparaison numérique (également >, >=, <).",
    "label_date_created": "notes créées le mois dernier",
-    "error": "Erreur de recherche : {{error}}"
+    "error": "Erreur de recherche : {{error}}",
+    "search_prefix": "Recherche :"
  },
  "attachment_detail": {
    "open_help_page": "Ouvrir la page d'aide sur les pièces jointes",
@@ -920,7 +930,15 @@
  },
  "protected_session": {
    "enter_password_instruction": "L'affichage de la note protégée nécessite la saisie de votre mot de passe :",
-    "start_session_button": "Démarrer une session protégée"
+    "start_session_button": "Démarrer une session protégée",
+    "started": "La session protégée a démarré.",
+    "wrong_password": "Mot de passe incorrect.",
+    "protecting-finished-successfully": "La protection de la note s'est terminée avec succès.",
+    "unprotecting-finished-successfully": "La protection de la note a été retirée avec succès.",
+    "protecting-in-progress": "Protection en cours : {{count}}",
+    "unprotecting-in-progress-count": "Retrait de la protection en cours : {{count}}",
+    "protecting-title": "Statut de la protection",
+    "unprotecting-title": "Statut de la non-protection"
  },
  "relation_map": {
    "open_in_new_tab": "Ouvrir dans un nouvel onglet",
@@ -975,7 +993,7 @@
    "error_creating_anonymized_database": "Impossible de créer une base de données anonymisée, vérifiez les journaux backend pour plus de détails",
    "successfully_created_fully_anonymized_database": "Base de données entièrement anonymisée crée dans {{anonymizedFilePath}}",
    "successfully_created_lightly_anonymized_database": "Base de données partiellement anonymisée crée dans {{anonymizedFilePath}}",
-    "no_anonymized_database_yet": "Aucune base de données anonymisée"
+    "no_anonymized_database_yet": "Aucune base de données anonymisée."
  },
  "database_integrity_check": {
    "title": "Vérification de l'intégrité de la base de données",
@@ -991,7 +1009,9 @@
    "fill_entity_changes_button": "Remplir les enregistrements de modifications d'entité",
    "full_sync_triggered": "Synchronisation complète déclenchée",
    "filling_entity_changes": "Remplissage changements de ligne d'entité ...",
-    "sync_rows_filled_successfully": "Synchronisation avec succès des lignes remplies"
+    "sync_rows_filled_successfully": "Synchronisation avec succès des lignes remplies",
+    "finished-successfully": "Synchronisation terminée avec succès.",
+    "failed": "Échec de la synchronisation : {{message}}"
  },
  "vacuum_database": {
    "title": "Nettoyage la base de donnée",
@@ -1001,7 +1021,7 @@
    "database_vacuumed": "La base de données a été nettoyée"
  },
  "fonts": {
-    "theme_defined": "Thème défini",
+    "theme_defined": "Défini par le thème",
    "fonts": "Polices",
    "main_font": "Police principale",
    "font_family": "Famille de polices",
@@ -1009,14 +1029,14 @@
    "note_tree_font": "Police de l'arborescence",
    "note_detail_font": "Police du contenu des notes",
    "monospace_font": "Police Monospace (code)",
-    "note_tree_and_detail_font_sizing": "Notez que la taille de la police de l’arborescence et des détails est relative au paramètre de taille de police principal.",
-    "not_all_fonts_available": "Toutes les polices répertoriées peuvent ne pas être disponibles sur votre système.",
+    "note_tree_and_detail_font_sizing": "Notez que la taille de la police de l’arborescence et du contenu est relative au paramètre de taille de police principal.",
+    "not_all_fonts_available": "Toutes les polices répertoriées ne sont peut-être pas disponibles sur votre système.",
    "apply_font_changes": "Pour appliquer les modifications de police, cliquez sur",
    "reload_frontend": "recharger l'interface"
  },
  "max_content_width": {
    "title": "Largeur du contenu",
-    "default_description": "Trilium limite par défaut la largeur maximale du contenu pour améliorer la lisibilité sur des écrans larges.",
+    "default_description": "Trilium limite par défaut la largeur maximale du contenu pour améliorer la lisibilité sur les écrans larges.",
    "max_width_label": "Largeur maximale du contenu en pixels",
    "apply_changes_description": "Pour appliquer les modifications de largeur du contenu, cliquez sur",
    "reload_button": "recharger l'interface",
@@ -1036,7 +1056,7 @@
    "title": "Thème",
    "theme_label": "Thème",
    "override_theme_fonts_label": "Remplacer les polices du thème",
-    "light_theme": "Lumière",
+    "light_theme": "Clair",
    "dark_theme": "Sombre"
  },
  "zoom_factor": {
@@ -1088,16 +1108,16 @@
    "deleted_notes_erased": "Les notes supprimées ont été effacées."
  },
  "revisions_snapshot_interval": {
-    "note_revisions_snapshot_interval_title": "Intervalle d’instantané des Versions de notes",
-    "note_revisions_snapshot_description": "L'intervalle de temps de l'instantané de version de note est le temps en secondes après lequel une nouvelle version de note est créée pour une note. Consultez le <a href=\"https://triliumnext.github.io/Docs/Wiki/note-revisions.html\" class=\"external\">wiki</a> pour plus d'informations.",
-    "snapshot_time_interval_label": "Intervalle de temps entre deux instantanés de version de note (en secondes) :"
+    "note_revisions_snapshot_interval_title": "Intervalle d'enregistrement automatique des versions des notes",
+    "note_revisions_snapshot_description": "L'intervalle d'enregistrement automatique des versions de note est le temps en secondes après lequel une nouvelle version de note est créée pour une note. Consultez le <a href=\"https://triliumnext.github.io/Docs/Wiki/note-revisions.html\" class=\"external\">wiki</a> pour plus d'informations.",
+    "snapshot_time_interval_label": "Intervalle de temps entre deux enregistrements de version de note (en secondes) :"
  },
  "revisions_snapshot_limit": {
-    "note_revisions_snapshot_limit_title": "Limite des instantanés de version de note",
-    "note_revisions_snapshot_limit_description": "La limite du nombre d’instantanés de version de note désigne le nombre maximum de versions pouvant être enregistrées pour chaque note. -1 signifie aucune limite, 0 signifie supprimer toutes les versions. Vous pouvez définir le nombre maximal de versions pour une seule note via le label #versioningLimit.",
-    "snapshot_number_limit_label": "Nombre limite d'instantanés de version de la note :",
-    "erase_excess_revision_snapshots": "Effacez maintenant les instantanés de version en excès",
-    "erase_excess_revision_snapshots_prompt": "Les instantanés de version en excès ont été effacés."
+    "note_revisions_snapshot_limit_title": "Limite des enregistrements de version de note",
+    "note_revisions_snapshot_limit_description": "La limite du nombre d'enregistrements de version de note désigne le nombre maximum de versions pouvant être enregistrées pour chaque note. -1 signifie aucune limite, 0 signifie supprimer toutes les versions. Vous pouvez définir le nombre maximal de versions pour une seule note via le label #versioningLimit.",
+    "snapshot_number_limit_label": "Nombre limite d'enregistrements de version de la note :",
+    "erase_excess_revision_snapshots": "Effacez maintenant les versions en excès",
+    "erase_excess_revision_snapshots_prompt": "Les versions en excès ont été effacées."
  },
  "search_engine": {
    "title": "Moteur de recherche",
@@ -1110,7 +1130,7 @@
    "custom_name_label": "Nom du moteur de recherche personnalisé",
    "custom_name_placeholder": "Personnaliser le nom du moteur de recherche",
    "custom_url_label": "L'URL du moteur de recherche personnalisé doit inclure {keyword} comme espace réservé pour le terme de recherche.",
-    "custom_url_placeholder": "Personnaliser l'URL du moteur de recherche",
+    "custom_url_placeholder": "Personnaliser l'url du moteur de recherche",
    "save_button": "Sauvegarder"
  },
  "tray": {
@@ -1147,7 +1167,7 @@
    "label": "Taille automatique en lecture seule (notes de texte)"
  },
  "i18n": {
-    "title": "Localisation",
+    "title": "Paramètres régionaux",
    "language": "Langue",
    "first-day-of-the-week": "Premier jour de la semaine",
    "sunday": "Dimanche",
@@ -1198,7 +1218,7 @@
  "password": {
    "heading": "Mot de passe",
    "alert_message": "Prenez soin de mémoriser votre nouveau mot de passe. Le mot de passe est utilisé pour se connecter à l'interface Web et pour crypter les notes protégées. Si vous oubliez votre mot de passe, toutes vos notes protégées seront définitivement perdues.",
-    "reset_link": "cliquez ici pour le réinitialiser.",
+    "reset_link": "Cliquez ici pour le réinitialiser.",
    "old_password": "Ancien mot de passe",
    "new_password": "Nouveau mot de passe",
    "new_password_confirmation": "Confirmation du nouveau mot de passe",
@@ -1266,7 +1286,7 @@
    "unrecognized_role": "Rôle de pièce jointe « {{role}} » non reconnu."
  },
  "bookmark_switch": {
-    "bookmark": "Favoris",
+    "bookmark": "Favori",
    "bookmark_this_note": "Ajouter cette note à vos favoris dans le panneau latéral gauche",
    "remove_bookmark": "Supprimer le favori"
  },
@@ -1280,7 +1300,7 @@
  },
  "note-map": {
    "button-link-map": "Carte des liens",
-    "button-tree-map": "Carte de l'arborescence"
+    "button-tree-map": "Carte arborescente"
  },
  "tree-context-menu": {
    "open-in-a-new-tab": "Ouvrir dans un nouvel onglet",
@@ -1289,6 +1309,8 @@
    "insert-child-note": "Insérer une note enfant",
    "delete": "Supprimer",
    "search-in-subtree": "Rechercher dans le sous-arbre",
+    "hoist-note": "Focus sur la note",
+    "unhoist-note": "Ne plus focus la note",
    "edit-branch-prefix": "Modifier le préfixe de branche",
    "advanced": "Avancé",
    "expand-subtree": "Développer le sous-arbre",
@@ -1308,7 +1330,9 @@
    "duplicate-subtree": "Dupliquer le sous-arbre",
    "export": "Exporter",
    "import-into-note": "Importer dans la note",
-    "apply-bulk-actions": "Appliquer des Actions groupées"
+    "apply-bulk-actions": "Actions groupées",
+    "converted-to-attachments": "Les notes {{count}} ont été converties en pièces jointes.",
+    "convert-to-attachment-confirm": "Êtes-vous sûr de vouloir convertir les notes sélectionnées en pièces jointes de leurs notes parentes ?"
  },
  "shared_info": {
    "shared_publicly": "Cette note est partagée publiquement sur",
@@ -1321,7 +1345,7 @@
    "saved-search": "Recherche enregistrée",
    "relation-map": "Carte des relations",
    "note-map": "Carte de notes",
-    "render-note": "Rendu HTML",
+    "render-note": "Rendre la note",
    "book": "Livre",
    "mermaid-diagram": "Diagramme Mermaid",
    "canvas": "Canevas",
@@ -1331,7 +1355,8 @@
    "image": "Image",
    "launcher": "Raccourci",
    "doc": "Doc",
-    "widget": "Widget"
+    "widget": "Widget",
+    "confirm-change": "Il n'est pas recommandé de modifier le type de note lorsque son contenu n'est pas vide. Voulez-vous continuer ?"
  },
  "protect_note": {
    "toggle-on": "Protéger la note",
@@ -1354,7 +1379,7 @@
  "open-help-page": "Ouvrir la page d'aide",
  "find": {
    "case_sensitive": "sensible aux majuscules et minuscules",
-    "match_words": "faire correspondre les mots"
+    "match_words": "correspondance exacte"
  },
  "highlights_list_2": {
    "title": "Accentuations",
@@ -1377,10 +1402,12 @@
    "hide-archived-notes": "Masquer les notes archivées",
    "automatically-collapse-notes": "Réduire automatiquement les notes",
    "automatically-collapse-notes-title": "Les notes seront réduites après une période d'inactivité pour désencombrer l'arborescence.",
-    "save-changes": "Enregistrer et appliquer les modifications"
+    "save-changes": "Enregistrer et appliquer les modifications",
+    "auto-collapsing-notes-after-inactivity": "Réduction automatique des notes après inactivité...",
+    "saved-search-note-refreshed": "Note de recherche enregistrée actualisée."
  },
  "title_bar_buttons": {
-    "window-on-top": "Gardez cette fenêtre au premier plan."
+    "window-on-top": "Épingler cette fenêtre au premier plan."
  },
  "note_detail": {
    "could_not_find_typewidget": "Impossible de trouver typeWidget pour le type '{{type}}'"
@@ -1400,5 +1427,74 @@
  },
  "sql_table_schemas": {
    "tables": "Tableaux"
+  },
+  "tab_row": {
+    "close_tab": "Fermer l'onglet",
+    "add_new_tab": "Ajouter un nouvel onglet",
+    "close": "Fermer",
+    "close_other_tabs": "Fermer les autres onglets",
+    "close_all_tabs": "Fermer tous les onglets",
+    "move_tab_to_new_window": "Déplacer cet onglet vers une nouvelle fenêtre",
+    "new_tab": "Nouvel onglet"
+  },
+  "toc": {
+    "table_of_contents": "Table des matières",
+    "options": "Options"
+  },
+  "watched_file_update_status": {
+    "file_last_modified": "Le fichier <code class=\"file-path\"></code> a été modifié pour la dernière fois le <span class=\"file-last-modified\"></span>.",
+    "upload_modified_file": "Téléverser le fichier modifié",
+    "ignore_this_change": "Ignorer ce changement"
+  },
+  "app_context": {
+    "please_wait_for_save": "Veuillez patienter quelques secondes la fin de la sauvegarde, puis réessayer."
+  },
+  "note_create": {
+    "duplicated": "La note «{{title}}» a été dupliquée."
+  },
+  "image": {
+    "copied-to-clipboard": "Une référence à l'image a été copiée dans le presse-papiers. Elle peut être collée dans n'importe quelle note texte.",
+    "cannot-copy": "Impossible de copier la référence d'image dans le presse-papiers."
+  },
+  "clipboard": {
+    "cut": "Les note(s) ont été coupées dans le presse-papiers.",
+    "copied": "Les note(s) ont été coupées dans le presse-papiers."
+  },
+  "entrypoints": {
+    "note-revision-created": "La version de la note a été créée.",
+    "note-executed": "Note exécutée.",
+    "sql-error": "Erreur lors de l'exécution de la requête SQL: {{message}}"
+  },
+  "branches": {
+    "cannot-move-notes-here": "Impossible de déplacer les notes ici.",
+    "delete-status": "Etat de la suppression",
+    "delete-notes-in-progress": "Suppression des notes en cours : {{count}}",
+    "delete-finished-successfully": "Suppression terminée avec succès.",
+    "undeleting-notes-in-progress": "Restauration des notes en cours : {{count}}",
+    "undeleting-notes-finished-successfully": "Restauration des notes terminée avec succès."
+  },
+  "frontend_script_api": {
+    "async_warning": "Vous passez une fonction asynchrone à `api.runOnBackend()`, ce qui ne fonctionnera probablement pas comme vous le souhaitez.\\n Rendez la fonction synchronisée (en supprimant le mot-clé `async`), ou bien utilisez `api.runAsyncOnBackendWithManualTransactionHandling()`.",
+    "sync_warning": "Vous passez une fonction synchrone à `api.runAsyncOnBackendWithManualTransactionHandling()`,\\nalors que vous devriez probablement utiliser `api.runOnBackend()` à la place."
+  },
+  "ws": {
+    "sync-check-failed": "Le test de synchronisation a échoué !",
+    "consistency-checks-failed": "Les tests de cohérence ont échoué ! Consultez les journaux pour plus de détails.",
+    "encountered-error": "Erreur \"{{message}}\", consultez la console."
+  },
+  "hoisted_note": {
+    "confirm_unhoisting": "La note demandée «{{requestedNote}}» est en dehors du sous-arbre de la note focus «{{hoistedNote}}». Le focus doit être désactivé pour accéder à la note. Voulez-vous enlever le focus ?"
+  },
+  "launcher_context_menu": {
+    "reset_launcher_confirm": "Voulez-vous vraiment réinitialiser \"{{title}}\" ? Toutes les données / paramètres de cette note (et de ses enfants) seront perdus et le raccourci retrouvera son emplacement d'origine.",
+    "add-note-launcher": "Ajouter un raccourci de note",
+    "add-script-launcher": "Ajouter un raccourci de script",
+    "add-custom-widget": "Ajouter un widget personnalisé",
+    "add-spacer": "Ajouter un séparateur",
+    "delete": "Supprimer",
+    "reset": "Réinitialiser",
+    "move-to-visible-launchers": "Déplacer vers les raccourcis visibles",
+    "move-to-available-launchers": "Déplacer vers les raccourcis disponibles",
+    "duplicate-launcher": "Dupliquer le raccourci"
  }
 }
--- a/src/public/translations/ro/translation.json
+++ b/src/public/translations/ro/translation.json
@@ -414,17 +414,16 @@
    "undelete_notes_instruction": "După ștergere, se pot recupera din ecranul Schimbări recente."
  },
  "delete_notes": {
-    "broken_relations_to_be_deleted": "Următoarele relații vor fi întrerupte și șterse (<span class=\"broke-relations-count\"></span>)",
+    "broken_relations_to_be_deleted": "Următoarele relații vor fi întrerupte și șterse ({{- relationCount}})",
    "cancel": "Anulează",
    "delete_all_clones_description": "Șterge și toate clonele (se pot recupera în ecranul Schimbări recente)",
-    "delete_notes_preview": "Șterge previzualizările notițelor",
+    "delete_notes_preview": "Previzualizare ștergerea notițelor",
    "erase_notes_description": "Ștergerea obișnuită doar marchează notițele ca fiind șterse și pot fi recuperate (în ecranul Schimbări recente) pentru o perioadă de timp. Dacă se bifează această opțiune, notițele vor fi șterse imediat fără posibilitatea de a le recupera.",
-    "erase_notes_warning": "șterge notițele permanent (nu se mai pot recupera), incluzând toate clonele. Va forța reîncărcarea aplicației.",
+    "erase_notes_warning": "Șterge notițele permanent (nu se mai pot recupera), incluzând toate clonele. Va forța reîncărcarea aplicației.",
    "no_note_to_delete": "Nicio notiță nu va fi ștearsă (doar clonele).",
-    "note": "Notiță",
-    "notes_to_be_deleted": "Următoarele notițe vor fi șterse (<span class=\"deleted-notes-count\"></span>)",
+    "notes_to_be_deleted": "Următoarele notițe vor fi șterse ({{- noteCount}})",
    "ok": "OK",
-    "to_be_deleted": " (pentru ștergere) este referențiat(ă) de relația <code>{{attrName}}</code> originând de la "
+    "deleted_relation_text": "Notița {{- note}} ce va fi ștearsă este referențiată de relația {{- relation}}, originând din {{- source}}."
  },
  "delete_relation": {
    "allowed_characters": "Se permit caractere alfanumerice, underline și două puncte.",
@@ -554,7 +553,7 @@
    "open_sql_console": "Deschide consola SQL",
    "open_sql_console_history": "Deschide istoricul consolei SQL",
    "options": "Opțiuni",
-    "reload_frontend": "Reîncarcă interfață",
+    "reload_frontend": "Reîncarcă interfața",
    "reload_hint": "Reîncărcarea poate ajuta atunci când există ceva probleme vizuale fără a trebui repornită întreaga aplicație.",
    "reset_zoom_level": "Resetează nivelul de zoom",
    "show_backend_log": "Afișează log-ul din backend",
@@ -1182,7 +1181,7 @@
    "light_theme": "Temă luminoasă",
    "override_theme_fonts_label": "Suprascrie fonturile temei",
    "theme_label": "Temă",
-    "title": "Temă"
+    "title": "Tema aplicației"
  },
  "toast": {
    "critical-error": {
@@ -1439,7 +1438,8 @@
    "close_other_tabs": "Închide celelalte taburi",
    "close_tab": "Închide tab",
    "move_tab_to_new_window": "Mută acest tab în altă fereastră",
-    "new_tab": "Tab nou"
+    "new_tab": "Tab nou",
+    "close_right_tabs": "Închide taburile din dreapta"
  },
  "toc": {
    "options": "Setări",
@@ -1497,5 +1497,29 @@
    "move-to-available-launchers": "Mută în Lansatoare disponibile",
    "move-to-visible-launchers": "Mută în Lansatoare vizibile",
    "reset": "Resetează"
+  },
+  "editable-text": {
+    "auto-detect-language": "Automat"
+  },
+  "highlighting": {
+    "color-scheme": "Temă de culori",
+    "title": "Evidențiere de sintaxă pentru notițele de tip text",
+    "description": "Controlează evidențierea de sintaxă pentru blocurile de cod în interiorul notițelor text, notițele de tip cod nu vor fi afectate de aceste setări."
+  },
+  "code_block": {
+    "word_wrapping": "Încadrare text"
+  },
+  "classic_editor_toolbar": {
+    "title": "Formatare"
+  },
+  "editing": {
+    "editor_type": {
+      "fixed": "Editor cu bară fixă (uneltele de editare vor apărea în tab-ul „Formatare” din panglică)",
+      "floating": "Editor cu bară flotantă (uneltele de editare vor apărea lângă cursor)",
+      "label": "Bară de formatare"
+    }
+  },
+  "editor": {
+    "title": "Editor"
  }
 }
--- a/src/routes/api/options.ts
+++ b/src/routes/api/options.ts
@@ -6,6 +6,7 @@ import searchService from "../../services/search/services/search.js";
 import ValidationError from "../../errors/validation_error.js";
 import { Request } from 'express';
 import { changeLanguage } from "../../services/i18n.js";
+import { listSyntaxHighlightingThemes } from "../../services/code_block_theme.js";

 // options allowed to be updated directly in the Options dialog
 const ALLOWED_OPTIONS = new Set([
@@ -15,6 +16,8 @@ const ALLOWED_OPTIONS = new Set([
    'revisionSnapshotNumberLimit',
    'zoomFactor',
    'theme',
+    'codeBlockTheme',
+    "codeBlockWordWrap",
    'syncServerHost',
    'syncServerTimeout',
    'syncProxy',
@@ -62,7 +65,8 @@ const ALLOWED_OPTIONS = new Set([
    'promotedAttributesOpenInRibbon',
    'editedNotesOpenInRibbon',
    'locale',
-    'firstDayOfWeek'
+    'firstDayOfWeek',
+    'textNoteEditorType'
 ]);

 function getOptions() {
@@ -138,6 +142,10 @@ function getUserThemes() {
    return ret;
 }

+function getSyntaxHighlightingThemes() {
+    return listSyntaxHighlightingThemes();
+}
+
 function getSupportedLocales() {
    // TODO: Currently hardcoded, needs to read the list of available languages.
    return [
@@ -145,6 +153,10 @@ function getSupportedLocales() {
            "id": "en",
            "name": "English"
        },
+        {
+            "id": "de",
+            "name": "Deutsch"
+        },
        {
            "id": "es",
            "name": "Español"
@@ -176,5 +188,6 @@ export default {
    updateOption,
    updateOptions,
    getUserThemes,
+    getSyntaxHighlightingThemes,
    getSupportedLocales
 };
--- a/src/routes/api/sync.ts
+++ b/src/routes/api/sync.ts
@@ -12,14 +12,15 @@ import syncOptions from "../../services/sync_options.js";
 import utils from "../../services/utils.js";
 import ws from "../../services/ws.js";
 import { Request } from 'express';
-import { EntityChange, EntityChangeRecord } from '../../services/entity_changes_interface.js';
+import { EntityChange } from '../../services/entity_changes_interface.js';
 import ValidationError from "../../errors/validation_error.js";
 import consistencyChecksService from "../../services/consistency_checks.js";
+import { t } from "i18next";

 async function testSync() {
    try {
        if (!syncOptions.isSyncSetup()) {
-            return { success: false, message: "Sync server host is not configured. Please configure sync first." };
+            return { success: false, message: t("test_sync.not-configured") };
        }

        await syncService.login();
@@ -28,7 +29,7 @@ async function testSync() {
        // this is important in case when sync server has been just initialized
        syncService.sync();

-        return { success: true, message: "Sync server handshake has been successful, sync has been started." };
+        return { success: true, message: t("test_sync.successful") };
    }
    catch (e: any) {
        return {
--- a/src/routes/assets.ts
+++ b/src/routes/assets.ts
@@ -102,6 +102,7 @@ function register(app: express.Application) {
    app.use(`/${assetPath}/node_modules/codemirror/keymap/`, persistentCacheStatic(path.join(srcRoot, '..', 'node_modules/codemirror/keymap/')));

    app.use(`/${assetPath}/node_modules/mind-elixir/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/mind-elixir/dist/")));
+    app.use(`/${assetPath}/node_modules/@highlightjs/cdn-assets/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/@highlightjs/cdn-assets/")));
 }

 export default {
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -218,6 +218,7 @@ function register(app: express.Application) {
    apiRoute(PUT, '/api/options/:name/:value*', optionsApiRoute.updateOption);
    apiRoute(PUT, '/api/options', optionsApiRoute.updateOptions);
    apiRoute(GET, '/api/options/user-themes', optionsApiRoute.getUserThemes);
+    apiRoute(GET, '/api/options/codeblock-themes', optionsApiRoute.getSyntaxHighlightingThemes);
    apiRoute(GET, '/api/options/locales', optionsApiRoute.getSupportedLocales);

    apiRoute(PST, '/api/password/change', passwordApiRoute.changePassword);
--- a/src/services/code_block_theme.ts
+++ b/src/services/code_block_theme.ts
@@ -0,0 +1,105 @@
+/**
+ * @module
+ * 
+ * Manages the server-side functionality of the code blocks feature, mostly for obtaining the available themes for syntax highlighting.
+ */
+
+import fs from "fs";
+import themeNames from "./code_block_theme_names.json" with { type: "json" }
+import { t } from "i18next";
+import { join } from "path";
+import utils from "./utils.js";
+import env from "./env.js";
+
+/**
+ * Represents a color scheme for the code block syntax highlight.
+ */
+interface ColorTheme {
+    /** The ID of the color scheme which should be stored in the options. */
+    val: string;
+    /** A user-friendly name of the theme. The name is already localized. */
+    title: string;
+}
+
+/**
+ * Returns all the supported syntax highlighting themes for code blocks, in groups.
+ * 
+ * The return value is an object where the keys represent groups in their human-readable name (e.g. "Light theme")
+ * and the values are an array containing the information about every theme. There is also a special group with no
+ * title (empty string) which should be displayed at the top of the listing pages, without a group.
+ * 
+ * @returns the supported themes, grouped.
+ */
+export function listSyntaxHighlightingThemes() {
+    const path = join(utils.getResourceDir(), getStylesDirectory());
+    const systemThemes = readThemesFromFileSystem(path);
+
+    return {
+        "": [
+            {
+                val: "none",
+                title: t("code_block.theme_none")
+            }
+        ],
+        ...groupThemesByLightOrDark(systemThemes)
+    }
+}
+
+function getStylesDirectory() {
+    if (utils.isElectron() && !env.isDev()) {
+        return "styles";
+    }
+
+    return "node_modules/@highlightjs/cdn-assets/styles";
+}
+
+/**
+ * Reads all the predefined themes by listing all minified CSSes from a given directory.
+ * 
+ * The theme names are mapped against a known list in order to provide more descriptive names such as "Visual Studio 2015 (Dark)" instead of "vs2015".
+ * 
+ * @param path the path to read from. Usually this is the highlight.js `styles` directory.
+ * @returns the list of themes.
+ */
+function readThemesFromFileSystem(path: string): ColorTheme[] {
+    return fs.readdirSync(path)
+        .filter((el) => el.endsWith(".min.css"))
+        .map((name) => {
+            const nameWithoutExtension = name.replace(".min.css", "");            
+            let title = nameWithoutExtension.replace(/-/g, " ");
+
+            if (title in themeNames) {
+                title = (themeNames as Record<string, string>)[title];
+            }
+            
+            return {
+                val: `default:${nameWithoutExtension}`,
+                title: title
+            };
+        });
+}
+
+/**
+ * Groups a list of themes by dark or light themes. This is done simply by checking whether "Dark" is present in the given theme, otherwise it's considered a light theme.
+ * This generally only works if the theme has a known human-readable name (see {@link #readThemesFromFileSystem()})
+ * 
+ * @param listOfThemes the list of themes to be grouped.
+ * @returns the grouped themes by light or dark.
+ */
+function groupThemesByLightOrDark(listOfThemes: ColorTheme[]) {
+    const darkThemes = [];
+    const lightThemes = [];
+
+    for (const theme of listOfThemes) {
+        if (theme.title.includes("Dark")) {
+            darkThemes.push(theme);
+        } else {
+            lightThemes.push(theme);
+        }
+    }
+
+    const output: Record<string, ColorTheme[]> = {};
+    output[t("code_block.theme_group_light")] = lightThemes;
+    output[t("code_block.theme_group_dark")] = darkThemes;
+    return output;
+}
--- a/src/services/code_block_theme_names.json
+++ b/src/services/code_block_theme_names.json
@@ -0,0 +1,75 @@
+{
+    "1c light": "1C (Light)",
+    "a11y dark": "a11y (Dark)",
+    "a11y light": "a11y (Light)",
+    "agate": "Agate (Dark)",
+    "an old hope": "An Old Hope (Dark)",
+    "androidstudio": "Android Studio (Dark)",
+    "arduino light": "Arduino (Light)",
+    "arta": "Arta (Dark)",
+    "ascetic": "Ascetic (Light)",
+    "atom one dark reasonable": "Atom One with ReasonML support (Dark)",
+    "atom one dark": "Atom One (Dark)",
+    "atom one light": "Atom One (Light)",
+    "brown paper": "Brown Paper (Light)",
+    "codepen embed": "CodePen Embed (Dark)",
+    "color brewer": "Color Brewer (Light)",
+    "dark": "Dark",
+    "default": "Original highlight.js Theme (Light)",
+    "devibeans": "devibeans (Dark)",
+    "docco": "Docco (Light)",
+    "far": "FAR (Dark)",
+    "felipec": "FelipeC (Dark)",
+    "foundation": "Foundation 4 Docs (Light)",
+    "github dark dimmed": "GitHub Dimmed (Dark)",
+    "github dark": "GitHub (Dark)",
+    "github": "GitHub (Light)",
+    "gml": "GML (Dark)",
+    "googlecode": "Google Code (Light)",
+    "gradient dark": "Gradient (Dark)",
+    "gradient light": "Gradient (Light)",
+    "grayscale": "Grayscale (Light)",
+    "hybrid": "hybrid (Dark)",
+    "idea": "Idea (Light)",
+    "intellij light": "IntelliJ (Light)",
+    "ir black": "IR Black (Dark)",
+    "isbl editor dark": "ISBL Editor (Dark)",
+    "isbl editor light": "ISBL Editor (Light)",
+    "kimbie dark": "Kimbie (Dark)",
+    "kimbie light": "Kimbie (Light)",
+    "lightfair": "Lightfair (Light)",
+    "lioshi": "Lioshi (Dark)",
+    "magula": "Magula (Light)",
+    "mono blue": "Mono Blue (Light)",
+    "monokai sublime": "Monokai Sublime (Dark)",
+    "monokai": "Monokai (Dark)",
+    "night owl": "Night Owl (Dark)",
+    "nnfx dark": "NNFX (Dark)",
+    "nnfx light": "NNFX (Light)",
+    "nord": "Nord (Dark)",
+    "obsidian": "Obsidian (Dark)",
+    "panda syntax dark": "Panda (Dark)",
+    "panda syntax light": "Panda (Light)",
+    "paraiso dark": "Paraiso (Dark)",
+    "paraiso light": "Paraiso (Light)",
+    "pojoaque": "Pojoaque (Dark)",
+    "purebasic": "PureBasic (Light)",
+    "qtcreator dark": "Qt Creator (Dark)",
+    "qtcreator light": "Qt Creator (Light)",
+    "rainbow": "Rainbow (Dark)",
+    "routeros": "RouterOS Script (Light)",
+    "school book": "School Book (Light)",
+    "shades of purple": "Shades of Purple (Dark)",
+    "srcery": "Srcery (Dark)",
+    "stackoverflow dark": "Stack Overflow (Dark)",
+    "stackoverflow light": "Stack Overflow (Light)",
+    "sunburst": "Sunburst (Dark)",
+    "tokyo night dark": "Tokyo Night (Dark)",
+    "tokyo night light": "Tokyo Night (Light)",
+    "tomorrow night blue": "Tomorrow Night Blue (Dark)",
+    "tomorrow night bright": "Tomorrow Night Bright (Dark)",
+    "vs": "Visual Studio (Light)",
+    "vs2015": "Visual Studio 2015 (Dark)",
+    "xcode": "Xcode (Light)",
+    "xt256": "xt256 (Dark)"
+}
--- a/src/services/export/zip.ts
+++ b/src/services/export/zip.ts
@@ -58,8 +58,16 @@ async function exportToZip(taskContext: TaskContext, branch: BBranch, format: "h

    function getDataFileName(type: string | null, mime: string, baseFileName: string, existingFileNames: Record<string, number>): string {
        let fileName = baseFileName.trim();
+
+        // Crop fileName to avoid its length exceeding 30 and prevent cutting into the extension.
        if (fileName.length > 30) {
-            fileName = fileName.substr(0, 30).trim();
+            // We use regex to match the extension to preserve multiple dots in extensions (e.g. .tar.gz).
+            let match = fileName.match(/(\.[a-zA-Z0-9_.!#-]+)$/);
+            let ext = match ? match[0] : ''; 
+            // Crop the extension if extension length exceeds 30
+            const croppedExt = ext.slice(-30);
+            // Crop the file name section and append the cropped extension
+            fileName = fileName.slice(0, 30 - croppedExt.length) + croppedExt;
        }

        let existingExtension = path.extname(fileName).toLowerCase();
@@ -76,6 +84,9 @@ async function exportToZip(taskContext: TaskContext, branch: BBranch, format: "h
        else if (mime === 'application/x-javascript' || mime === 'text/javascript') {
            newExtension = 'js';
        }
+        else if (type === 'canvas' || mime === 'application/json') {
+            newExtension = 'json';
+        }
        else if (existingExtension.length > 0) { // if the page already has an extension, then we'll just keep it
            newExtension = null;
        }
--- a/src/services/i18n.ts
+++ b/src/services/i18n.ts
@@ -2,10 +2,8 @@ import i18next from "i18next";
 import Backend from "i18next-fs-backend";
 import options from "./options.js";
 import sql_init from "./sql_init.js";
-import { fileURLToPath } from "url";
-import { dirname, join } from "path";
-import utils from "./utils.js";
-import env from "./env.js";
+import { join } from "path";
+import { getResourceDir } from "./utils.js";

 export async function initializeTranslations() {
  const resourceDir = getResourceDir();
@@ -21,14 +19,6 @@ export async function initializeTranslations() {
  });
 }

-function getResourceDir() {
-  if (utils.isElectron() && !env.isDev()) {
-    return process.resourcesPath;
-  } else {
-    return join(dirname(fileURLToPath(import.meta.url)), "..", "..");
-  }
-}
-
 function getCurrentLanguage() {
  let language;
  if (sql_init.isDbInitialized()) {
--- a/src/services/keyboard_actions.ts
+++ b/src/services/keyboard_actions.ts
@@ -420,6 +420,12 @@ function getDefaultKeyboardActions() {
            separator: t("keyboard_actions.ribbon-tabs")
        },
    
+        {
+            actionName: "toggleRibbonTabClassicEditor",
+            defaultShortcuts: [],
+            description: t("keyboard_actions.toggle-classic-editor-toolbar"),
+            scope: "window"
+        },
        {
            actionName: "toggleRibbonTabBasicProperties",
            defaultShortcuts: [],
--- a/src/services/options.ts
+++ b/src/services/options.ts
@@ -1,8 +1,27 @@
+/**
+ * @module
+ * 
+ * Options are key-value pairs that are used to store information such as user preferences (for example
+ * the current theme, sync server information), but also information about the state of the application.
+ * 
+ * Although options internally are represented as strings, their value can be interpreted as a number or
+ * boolean by calling the appropriate methods from this service (e.g. {@link #getOptionInt}).\
+ * 
+ * Generally options are shared across multiple instances of the application via the sync mechanism,
+ * however it is possible to have options that are local to an instance. For example, the user can select
+ * a theme on a device and it will not affect other devices.
+ */
+
 import becca from "../becca/becca.js";
 import BOption from "../becca/entities/boption.js";
 import { OptionRow } from '../becca/entities/rows.js';
 import sql from "./sql.js";

+/**
+ * A dictionary where the keys are the option keys (e.g. `theme`) and their corresponding values.
+ */
+export type OptionMap = Record<string | number, string>;
+
 function getOptionOrNull(name: string): string | null {
    let option;

@@ -69,6 +88,13 @@ function setOption(name: string, value: string | number | boolean) {
    }
 }

+/**
+ * Creates a new option in the database, with the given name, value and whether it should be synced.
+ * 
+ * @param name the name of the option to be created.
+ * @param value the value of the option, as a string. It can then be interpreted as other types such as a number of boolean.
+ * @param isSynced `true` if the value should be synced across multiple instances (e.g. locale) or `false` if it should be local-only (e.g. theme).
+ */
 function createOption(name: string, value: string, isSynced: boolean) {
    new BOption({
        name: name,
@@ -82,7 +108,7 @@ function getOptions() {
 }

 function getOptionMap() {
-    const map: Record<string | number, string> = {};
+    const map: OptionMap = {};

    for (const option of Object.values(becca.options)) {
        map[option.name] = option.value;
--- a/src/services/options_init.ts
+++ b/src/services/options_init.ts
@@ -1,4 +1,5 @@
 import optionService from "./options.js";
+import type { OptionMap } from "./options.js";
 import appInfo from "./app_info.js";
 import utils from "./utils.js";
 import log from "./log.js";
@@ -11,17 +12,35 @@ function initDocumentOptions() {
    optionService.createOption('documentSecret', utils.randomSecureToken(16), false);
 }

+/**
+ * Contains additional options to be initialized for a new database, containing the information entered by the user.
+ */
 interface NotSyncedOpts {
    syncServerHost?: string;
    syncProxy?: string;
 }

+/**
+ * Represents a correspondence between an option and its default value, to be initialized when the database is missing that particular option (after a migration from an older version, or when creating a new database).
+ */
 interface DefaultOption {
    name: string;
-    value: string;
+    /**
+     * The value to initialize the option with, if the option is not already present in the database.
+     * 
+     * If a function is passed in instead, the function is called if the option does not exist (with access to the current options) and the return value is used instead. Useful to migrate a new option with a value depending on some other option that might be initialized.
+     */
+    value: string | ((options: OptionMap) => string);
    isSynced: boolean;
 }

+/**
+ * Initializes the default options for new databases only.
+ * 
+ * @param initialized `true` if the database has been fully initialized (i.e. a new database was created), or `false` if the database is created for sync.
+ * @param theme the theme to set as default, based on a user's system preference.
+ * @param opts additional options to be initialized, for example the sync configuration.
+ */
 async function initNotSyncedOptions(initialized: boolean, theme: string, opts: NotSyncedOpts = {}) {
    optionService.createOption('openNoteContexts', JSON.stringify([
        {
@@ -47,6 +66,9 @@ async function initNotSyncedOptions(initialized: boolean, theme: string, opts: N
    optionService.createOption('syncProxy', opts.syncProxy || '', false);
 }

+/**
+ * Contains all the default options that must be initialized on new and existing databases (at startup). The value can also be determined based on other options, provided they have already been initialized.
+ */
 const defaultOptions: DefaultOption[] = [
    { name: 'revisionSnapshotTimeInterval', value: '600', isSynced: true },
    { name: 'revisionSnapshotNumberLimit', value: '-1', isSynced: true },
@@ -99,9 +121,27 @@ const defaultOptions: DefaultOption[] = [

    // Internationalization
    { name: 'locale', value: 'en', isSynced: true },
-    { name: 'firstDayOfWeek', value: '1', isSynced: true }
+    { name: 'firstDayOfWeek', value: '1', isSynced: true },
+
+    // Code block configuration
+    { name: "codeBlockTheme", value: (optionsMap) => {
+        if (optionsMap.theme === "light") {
+            return "default:stackoverflow-light";
+        } else {
+            return "default:stackoverflow-dark";
+        }
+    }, isSynced: false },
+    { name: "codeBlockWordWrap", value: "false", isSynced: true },
+
+    // Text note configuration
+    { name: "textNoteEditorType", value: "ckeditor-balloon", isSynced: true }
 ];

+/**
+ * Initializes the options, by checking which options from {@link #allDefaultOptions()} are missing and registering them. It will also check some environment variables such as safe mode, to make any necessary adjustments.
+ * 
+ * This method is called regardless of whether a new database is created, or an existing database is used.
+ */
 function initStartupOptions() {
    const optionsMap = optionService.getOptionMap();

@@ -109,9 +149,15 @@ function initStartupOptions() {

    for (const {name, value, isSynced} of allDefaultOptions) {
        if (!(name in optionsMap)) {
-            optionService.createOption(name, value, isSynced);
+            let resolvedValue;
+            if (typeof value === "function") {
+                resolvedValue = value(optionsMap);
+            } else {
+                resolvedValue = value;
+            }

-            log.info(`Created option "${name}" with default value "${value}"`);
+            optionService.createOption(name, resolvedValue, isSynced);
+            log.info(`Created option "${name}" with default value "${resolvedValue}"`);
        }
    }

--- a/src/services/utils.ts
+++ b/src/services/utils.ts
@@ -7,6 +7,9 @@ import escape from "escape-html";
 import sanitize from "sanitize-filename";
 import mimeTypes from "mime-types";
 import path from "path";
+import { fileURLToPath } from "url";
+import env from "./env.js";
+import { dirname, join } from "path";

 const randtoken = generator({source: 'crypto'});

@@ -315,6 +318,20 @@ function isString(x: any) {
    return Object.prototype.toString.call(x) === "[object String]";
 }

+/**
+ * Returns the directory for resources. On Electron builds this corresponds to the `resources` subdirectory inside the distributable package.
+ * On development builds, this simply refers to the root directory of the application.
+ * 
+ * @returns the resource dir.
+ */
+export function getResourceDir() {
+    if (isElectron() && !env.isDev()) {
+        return process.resourcesPath;
+    } else {
+        return join(dirname(fileURLToPath(import.meta.url)), "..", "..");
+    }    
+}
+
 export default {
    randomSecureToken,
    randomString,
@@ -347,5 +364,6 @@ export default {
    normalize,
    hashedBlobId,
    toMap,
-    isString
+    isString,
+    getResourceDir
 };
--- a/src/services/window.ts
+++ b/src/services/window.ts
@@ -111,13 +111,9 @@ async function createMainWindow(app: App) {
 }

 function configureWebContents(webContents: WebContents, spellcheckEnabled: boolean) {
-    if (!mainWindow) {
-        return;
-    }
-
    remoteMain.enable(webContents);

-    mainWindow.webContents.setWindowOpenHandler((details) => {
+    webContents.setWindowOpenHandler((details) => {
        async function openExternal() {
            (await import('electron')).shell.openExternal(details.url);
        }