diff --git a/apps/client/src/components/app_context.ts b/apps/client/src/components/app_context.ts
index 36d364049..23924edcb 100644
--- a/apps/client/src/components/app_context.ts
+++ b/apps/client/src/components/app_context.ts
@@ -13,7 +13,6 @@ import MainTreeExecutors from "./main_tree_executors.js";
 import toast from "../services/toast.js";
 import ShortcutComponent from "./shortcut_component.js";
 import { t, initLocale } from "../services/i18n.js";
-import type NoteDetailWidget from "../widgets/note_detail.js";
 import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
 import type { ConfirmWithMessageOptions, ConfirmWithTitleOptions } from "../widgets/dialogs/confirm.js";
@@ -21,8 +20,6 @@ import type LoadResults from "../services/load_results.js";
 import type { Attribute } from "../services/attribute_parser.js";
 import type NoteTreeWidget from "../widgets/note_tree.js";
 import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
-import type TypeWidget from "../widgets/type_widgets/type_widget.js";
-import type EditableTextTypeWidget from "../widgets/type_widgets/editable_text.js";
 import type { NativeImage, TouchBar } from "electron";
 import TouchBarComponent from "./touch_bar.js";
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
@@ -33,6 +30,10 @@ import { ColumnComponent } from "tabulator-tables";
 import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
 import type RootContainer from "../widgets/containers/root_container.js";
 import { SqlExecuteResults } from "@triliumnext/commons";
+import { AddLinkOpts } from "../widgets/dialogs/add_link.jsx";
+import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
+import { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import type { MarkdownImportOpts } from "../widgets/dialogs/markdown_import.jsx";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootContainer;
@@ -199,7 +200,7 @@ export type CommandMappings = {
     resetLauncher: ContextMenuCommandData;
 
     executeInActiveNoteDetailWidget: CommandData & {
-        callback: (value: NoteDetailWidget | PromiseLike<NoteDetailWidget>) => void;
+        callback: (value: ReactWrappedWidget) => void;
     };
     executeWithTextEditor: CommandData &
     ExecuteCommandData<CKTextEditor> & {
@@ -211,7 +212,7 @@ export type CommandMappings = {
      * Generally should not be invoked manually, as it is used by {@link NoteContext.getContentElement}.
      */
     executeWithContentElement: CommandData & ExecuteCommandData<JQuery<HTMLElement>>;
-    executeWithTypeWidget: CommandData & ExecuteCommandData<TypeWidget | null>;
+    executeWithTypeWidget: CommandData & ExecuteCommandData<ReactWrappedWidget | null>;
     addTextToActiveEditor: CommandData & {
         text: string;
     };
@@ -221,9 +222,9 @@ export type CommandMappings = {
     showPasswordNotSet: CommandData;
     showProtectedSessionPasswordDialog: CommandData;
     showUploadAttachmentsDialog: CommandData & { noteId: string };
-    showIncludeNoteDialog: CommandData & { textTypeWidget: EditableTextTypeWidget };
-    showAddLinkDialog: CommandData & { textTypeWidget: EditableTextTypeWidget, text: string };
-    showPasteMarkdownDialog: CommandData & { textTypeWidget: EditableTextTypeWidget };
+    showIncludeNoteDialog: CommandData & IncludeNoteOpts;
+    showAddLinkDialog: CommandData & AddLinkOpts;
+    showPasteMarkdownDialog: CommandData & MarkdownImportOpts;
     closeProtectedSessionPasswordDialog: CommandData;
     copyImageReferenceToClipboard: CommandData;
     copyImageToClipboard: CommandData;
@@ -485,13 +486,8 @@ type EventMappings = {
     relationMapResetZoomIn: { ntxId: string | null | undefined };
     relationMapResetZoomOut: { ntxId: string | null | undefined };
     activeNoteChanged: {};
-    showAddLinkDialog: {
-        textTypeWidget: EditableTextTypeWidget;
-        text: string;
-    };
-    showIncludeDialog: {
-        textTypeWidget: EditableTextTypeWidget;
-    };
+    showAddLinkDialog: AddLinkOpts;
+    showIncludeDialog: IncludeNoteOpts;
     openBulkActionsDialog: {
         selectedOrActiveNoteIds: string[];
     };
@@ -670,6 +666,10 @@ export class AppContext extends Component {
             this.beforeUnloadListeners.push(obj);
         }
     }
+
+    removeBeforeUnloadListener(listener: (() => boolean)) {
+        this.beforeUnloadListeners = this.beforeUnloadListeners.filter(l => l !== listener);
+    }
 }
 
 const appContext = new AppContext(window.glob.isMainWindow);
diff --git a/apps/client/src/components/note_context.ts b/apps/client/src/components/note_context.ts
index d4bcb1fa6..735978974 100644
--- a/apps/client/src/components/note_context.ts
+++ b/apps/client/src/components/note_context.ts
@@ -9,10 +9,10 @@ import hoistedNoteService from "../services/hoisted_note.js";
 import options from "../services/options.js";
 import type { ViewScope } from "../services/link.js";
 import type FNote from "../entities/fnote.js";
-import type TypeWidget from "../widgets/type_widgets/type_widget.js";
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
 import type CodeMirror from "@triliumnext/codemirror";
 import { closeActiveDialog } from "../services/dialog.js";
+import { ReactWrappedWidget } from "../widgets/basic_widget.js";
 
 export interface SetNoteOpts {
     triggerSwitchEvent?: unknown;
@@ -397,7 +397,7 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
     async getTypeWidget() {
         return this.timeout(
-            new Promise<TypeWidget | null>((resolve) =>
+            new Promise<ReactWrappedWidget | null>((resolve) =>
                 appContext.triggerCommand("executeWithTypeWidget", {
                     resolve,
                     ntxId: this.ntxId
diff --git a/apps/client/src/components/tab_manager.ts b/apps/client/src/components/tab_manager.ts
index 03b9d98d6..517ff2501 100644
--- a/apps/client/src/components/tab_manager.ts
+++ b/apps/client/src/components/tab_manager.ts
@@ -265,6 +265,7 @@ export default class TabManager extends Component {
         mainNtxId: string | null = null
     ): Promise<NoteContext> {
         const noteContext = new NoteContext(ntxId, hoistedNoteId, mainNtxId);
+        noteContext.setEmpty();
 
         const existingNoteContext = this.children.find((nc) => nc.ntxId === noteContext.ntxId);
 
diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx
index b7d170bcf..d33799669 100644
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -14,7 +14,6 @@ import LauncherContainer from "../widgets/containers/launcher_container.js";
 import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
 import MovePaneButton from "../widgets/buttons/move_pane_button.js";
-import NoteDetailWidget from "../widgets/note_detail.js";
 import NoteIconWidget from "../widgets/note_icon.jsx";
 import NoteList from "../widgets/collections/NoteList.jsx";
 import NoteTitleWidget from "../widgets/note_title.jsx";
@@ -44,6 +43,7 @@ import type { WidgetsByParent } from "../services/bundle.js";
 import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
 import utils from "../services/utils.js";
 import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
 
 export default class DesktopLayout {
 
@@ -142,7 +142,7 @@ export default class DesktopLayout {
                                                                 )
                                                                 .child(new PromotedAttributesWidget())
                                                                 .child(<SqlTableSchemas />)
-                                                                .child(new NoteDetailWidget())
+                                                                .child(<NoteDetail />)
                                                                 .child(<NoteList media="screen" />)
                                                                 .child(<SearchResult />)
                                                                 .child(<SqlResults />)
diff --git a/apps/client/src/layouts/layout_commons.tsx b/apps/client/src/layouts/layout_commons.tsx
index 26f8ea232..031ef03de 100644
--- a/apps/client/src/layouts/layout_commons.tsx
+++ b/apps/client/src/layouts/layout_commons.tsx
@@ -26,11 +26,11 @@ import PopupEditorDialog from "../widgets/dialogs/popup_editor.js";
 import FlexContainer from "../widgets/containers/flex_container.js";
 import NoteIconWidget from "../widgets/note_icon";
 import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
-import NoteDetailWidget from "../widgets/note_detail.js";
 import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
 import NoteTitleWidget from "../widgets/note_title.jsx";
 import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.js";
 import NoteList from "../widgets/collections/NoteList.jsx";
+import NoteDetail from "../widgets/NoteDetail.jsx";
 import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
 
 export function applyModals(rootContainer: RootContainer) {
@@ -66,7 +66,7 @@ export function applyModals(rootContainer: RootContainer) {
                     .child(<NoteTitleWidget />))
                 .child(<StandaloneRibbonAdapter component={FormattingToolbar} />)
                 .child(new PromotedAttributesWidget())
-                .child(new NoteDetailWidget())
+                .child(<NoteDetail />)
                 .child(<NoteList media="screen" displayOnlyCollections />))
         .child(<CallToActionDialog />);
 }
diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index 1ac3bd55c..2024d4580 100644
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -8,8 +8,6 @@ import FloatingButtons from "../widgets/FloatingButtons.jsx";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
 import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
-import MobileEditorToolbar from "../widgets/type_widgets/ckeditor/mobile_editor_toolbar.js";
-import NoteDetailWidget from "../widgets/note_detail.js";
 import NoteList from "../widgets/collections/NoteList.jsx";
 import NoteTitleWidget from "../widgets/note_title.js";
 import ContentHeader from "../widgets/containers/content-header.js";
@@ -29,6 +27,8 @@ import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibb
 import TabRowWidget from "../widgets/tab_row.js";
 import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
 import type AppContext from "../components/app_context.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
+import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
 
 const MOBILE_CSS = `
 <style>
@@ -161,7 +161,7 @@ export default class MobileLayout {
                                                 .child(<ReadOnlyNoteInfoBar />)
                                                 .child(<SharedInfoWidget />)
                                             )
-                                            .child(new NoteDetailWidget())
+                                            .child(<NoteDetail />)
                                             .child(<NoteList media="screen" />)
                                             .child(<StandaloneRibbonAdapter component={SearchDefinitionTab} />)
                                             .child(<SearchResult />)
diff --git a/apps/client/src/services/frontend_script_api.ts b/apps/client/src/services/frontend_script_api.ts
index bc1e372e4..251edd188 100644
--- a/apps/client/src/services/frontend_script_api.ts
+++ b/apps/client/src/services/frontend_script_api.ts
@@ -11,7 +11,7 @@ import RightPanelWidget from "../widgets/right_panel_widget.js";
 import ws from "./ws.js";
 import appContext from "../components/app_context.js";
 import NoteContextAwareWidget from "../widgets/note_context_aware_widget.js";
-import BasicWidget from "../widgets/basic_widget.js";
+import BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
 import SpacedUpdate from "./spaced_update.js";
 import shortcutService from "./shortcuts.js";
 import dialogService from "./dialog.js";
@@ -19,7 +19,6 @@ import type FNote from "../entities/fnote.js";
 import { t } from "./i18n.js";
 import dayjs from "dayjs";
 import type NoteContext from "../components/note_context.js";
-import type NoteDetailWidget from "../widgets/note_detail.js";
 import type Component from "../components/component.js";
 import { formatLogMessage } from "@triliumnext/commons";
 
@@ -317,7 +316,7 @@ export interface Api {
      * Get access to the widget handling note detail. Methods like `getWidgetType()` and `getTypeWidget()` to get to the
      * implementation of actual widget type.
      */
-    getActiveNoteDetailWidget(): Promise<NoteDetailWidget>;
+    getActiveNoteDetailWidget(): Promise<ReactWrappedWidget>;
     /**
      * @returns returns a note path of active note or null if there isn't active note
      */
diff --git a/apps/client/src/services/keyboard_actions.ts b/apps/client/src/services/keyboard_actions.ts
index d65b10bb2..9fce5ad35 100644
--- a/apps/client/src/services/keyboard_actions.ts
+++ b/apps/client/src/services/keyboard_actions.ts
@@ -1,6 +1,6 @@
 import server from "./server.js";
-import appContext, { type CommandNames } from "../components/app_context.js";
-import shortcutService from "./shortcuts.js";
+import appContext from "../components/app_context.js";
+import shortcutService, { ShortcutBinding } from "./shortcuts.js";
 import type Component from "../components/component.js";
 import type { ActionKeyboardShortcut } from "@triliumnext/commons";
 
@@ -30,12 +30,18 @@ async function getActionsForScope(scope: string) {
 
 async function setupActionsForElement(scope: string, $el: JQuery<HTMLElement>, component: Component) {
     const actions = await getActionsForScope(scope);
+    const bindings: ShortcutBinding[] = [];
 
     for (const action of actions) {
         for (const shortcut of action.effectiveShortcuts ?? []) {
-            shortcutService.bindElShortcut($el, shortcut, () => component.triggerCommand(action.actionName, { ntxId: appContext.tabManager.activeNtxId }));
+            const binding = shortcutService.bindElShortcut($el, shortcut, () => component.triggerCommand(action.actionName, { ntxId: appContext.tabManager.activeNtxId }));
+            if (binding) {
+                bindings.push(binding);
+            }
         }
     }
+
+    return bindings;
 }
 
 getActionsForScope("window").then((actions) => {
diff --git a/apps/client/src/services/link.ts b/apps/client/src/services/link.ts
index b0ab04d07..a583ea65b 100644
--- a/apps/client/src/services/link.ts
+++ b/apps/client/src/services/link.ts
@@ -280,7 +280,7 @@ function goToLink(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent) {
  * @param $link the jQuery element of the link that was clicked, used to determine if the link is an anchor link (e.g., `#fn1` or `#fnref1`) and to handle it accordingly.
  * @returns `true` if the link was handled (i.e., the element was found and scrolled to), or a falsy value otherwise.
  */
-function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, hrefLink: string | undefined, $link?: JQuery<HTMLElement> | null) {
+export function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, hrefLink: string | undefined, $link?: JQuery<HTMLElement> | null) {
     if (hrefLink?.startsWith("data:")) {
         return true;
     }
diff --git a/apps/client/src/services/open.ts b/apps/client/src/services/open.ts
index 0bcda805e..783fcee48 100644
--- a/apps/client/src/services/open.ts
+++ b/apps/client/src/services/open.ts
@@ -126,7 +126,7 @@ function downloadRevision(noteId: string, revisionId: string) {
 /**
  * @param url - should be without initial slash!!!
  */
-function getUrlForDownload(url: string) {
+export function getUrlForDownload(url: string) {
     if (utils.isElectron()) {
         // electron needs absolute URL, so we extract current host, port, protocol
         return `${getHost()}/${url}`;
diff --git a/apps/client/src/services/shortcuts.ts b/apps/client/src/services/shortcuts.ts
index 7d6a1e956..2c6345fcb 100644
--- a/apps/client/src/services/shortcuts.ts
+++ b/apps/client/src/services/shortcuts.ts
@@ -3,7 +3,7 @@ import utils from "./utils.js";
 type ElementType = HTMLElement | Document;
 type Handler = (e: KeyboardEvent) => void;
 
-interface ShortcutBinding {
+export interface ShortcutBinding {
     element: HTMLElement | Document;
     shortcut: string;
     handler: Handler;
@@ -127,10 +127,20 @@ function bindElShortcut($el: JQuery<ElementType | Element>, keyboardShortcut: st
                 activeBindings.set(key, []);
             }
             activeBindings.get(key)!.push(binding);
+            return binding;
         }
     }
 }
 
+export function removeIndividualBinding(binding: ShortcutBinding) {
+    const key = binding.namespace ?? "global";
+    const activeBindingsInNamespace = activeBindings.get(key);
+    if (activeBindingsInNamespace) {
+        activeBindings.set(key, activeBindingsInNamespace.filter(aBinding => aBinding.handler === binding.handler));
+    }
+    binding.element.removeEventListener("keydown", binding.listener);
+}
+
 function removeNamespaceBindings(namespace: string) {
     const bindings = activeBindings.get(namespace);
     if (bindings) {
diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts
index b5b21dfe0..bb6d6d07f 100644
--- a/apps/client/src/services/utils.ts
+++ b/apps/client/src/services/utils.ts
@@ -173,7 +173,7 @@ const entityMap: Record<string, string> = {
     "=": "&#x3D;"
 };
 
-function escapeHtml(str: string) {
+export function escapeHtml(str: string) {
     return str.replace(/[&<>"'`=\/]/g, (s) => entityMap[s]);
 }
 
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index da222383a..06a3c1c3e 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -407,7 +407,7 @@ body.desktop .tabulator-popup-container,
 .dropdown-menu .disabled .disabled-tooltip {
     pointer-events: all;
     margin-inline-start: 8px;
-    font-size: 0.5em;
+    font-size: 0.75rem;
     color: var(--disabled-tooltip-icon-color);
     cursor: help;
     opacity: 0.75;
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index cb0b783eb..6d1a0da1a 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -581,9 +581,14 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     padding: 0;
 }
 
+.note-list-wrapper .note-book-card .note-book-content.type-code {
+    height: 100%;
+}
+
 .note-list-wrapper .note-book-card .note-book-content.type-code pre {
     height: 100%;
     padding: 1em;
+    margin-bottom: 0;
 }
 
 .note-list-wrapper .note-book-card .bx {
diff --git a/apps/client/src/translations/cn/translation.json b/apps/client/src/translations/cn/translation.json
index c9473ff3d..5c0d66daf 100644
--- a/apps/client/src/translations/cn/translation.json
+++ b/apps/client/src/translations/cn/translation.json
@@ -995,7 +995,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "显示受保护的笔记需要输入您的密码：",
-    "start_session_button": "开始受保护的会话 <kbd>Enter</kbd>",
+    "start_session_button": "开始受保护的会话",
     "started": "受保护的会话已启动。",
     "wrong_password": "密码错误。",
     "protecting-finished-successfully": "保护操作已成功完成。",
diff --git a/apps/client/src/translations/de/translation.json b/apps/client/src/translations/de/translation.json
index 54bcb3b2d..0dbfe34a9 100644
--- a/apps/client/src/translations/de/translation.json
+++ b/apps/client/src/translations/de/translation.json
@@ -989,7 +989,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Um die geschützte Notiz anzuzeigen, musst du dein Passwort eingeben:",
-    "start_session_button": "Starte eine geschützte Sitzung <kbd>Eingabetaste</kbd>",
+    "start_session_button": "Starte eine geschützte Sitzung",
     "started": "Geschützte Sitzung gestartet.",
     "wrong_password": "Passwort falsch.",
     "protecting-finished-successfully": "Geschützt erfolgreich beendet.",
diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index ce29ad6c2..4d2be0ef9 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -995,7 +995,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",
-    "start_session_button": "Start protected session <kbd>enter</kbd>",
+    "start_session_button": "Start protected session",
     "started": "Protected session has been started.",
     "wrong_password": "Wrong password.",
     "protecting-finished-successfully": "Protecting finished successfully.",
diff --git a/apps/client/src/translations/es/translation.json b/apps/client/src/translations/es/translation.json
index 2659bc72a..82f59d0a4 100644
--- a/apps/client/src/translations/es/translation.json
+++ b/apps/client/src/translations/es/translation.json
@@ -992,7 +992,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Para mostrar una nota protegida es necesario ingresar su contraseña:",
-    "start_session_button": "Iniciar sesión protegida <kbd>Enter</kbd>",
+    "start_session_button": "Iniciar sesión protegida",
     "started": "La sesión protegida ha iniciado.",
     "wrong_password": "Contraseña incorrecta.",
     "protecting-finished-successfully": "La protección finalizó exitosamente.",
diff --git a/apps/client/src/translations/fr/translation.json b/apps/client/src/translations/fr/translation.json
index ca4e609ec..fe9e28ba9 100644
--- a/apps/client/src/translations/fr/translation.json
+++ b/apps/client/src/translations/fr/translation.json
@@ -991,7 +991,7 @@
   },
   "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 <kbd>Entrée</kbd>",
+    "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.",
diff --git a/apps/client/src/translations/pt/translation.json b/apps/client/src/translations/pt/translation.json
index b65ba1be2..ba6521545 100644
--- a/apps/client/src/translations/pt/translation.json
+++ b/apps/client/src/translations/pt/translation.json
@@ -967,7 +967,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "É necessário digitar a sua palavra-passe para mostar notas protegidas:",
-    "start_session_button": "Iniciar sessão protegida <kbd>enter</kbd>",
+    "start_session_button": "Iniciar sessão protegida",
     "started": "A sessão protegida foi iniciada.",
     "wrong_password": "Palavra-passe incorreta.",
     "protecting-finished-successfully": "A proteção foi finalizada com sucesso.",
diff --git a/apps/client/src/translations/pt_br/translation.json b/apps/client/src/translations/pt_br/translation.json
index d245161a1..e8612e1bf 100644
--- a/apps/client/src/translations/pt_br/translation.json
+++ b/apps/client/src/translations/pt_br/translation.json
@@ -1218,7 +1218,7 @@
     "unprotecting-in-progress-count": "Remoções de proteção em andamento: {{count}}",
     "protecting-title": "Estado da proteção",
     "unprotecting-title": "Estado da remoção de proteção",
-    "start_session_button": "Iniciar sessão protegida <kbd>enter</kbd>"
+    "start_session_button": "Iniciar sessão protegida"
   },
   "relation_map": {
     "open_in_new_tab": "Abrir em nova aba",
diff --git a/apps/client/src/translations/ro/translation.json b/apps/client/src/translations/ro/translation.json
index 5276eb514..0f443bc53 100644
--- a/apps/client/src/translations/ro/translation.json
+++ b/apps/client/src/translations/ro/translation.json
@@ -982,7 +982,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Afișarea notițelor protejate necesită introducerea parolei:",
-    "start_session_button": "Deschide sesiunea protejată <kbd>enter</kbd>",
+    "start_session_button": "Deschide sesiunea protejată",
     "started": "Sesiunea protejată este activă.",
     "wrong_password": "Parolă greșită.",
     "protecting-finished-successfully": "Protejarea a avut succes.",
diff --git a/apps/client/src/translations/ru/translation.json b/apps/client/src/translations/ru/translation.json
index 9596addf4..7301c56a6 100644
--- a/apps/client/src/translations/ru/translation.json
+++ b/apps/client/src/translations/ru/translation.json
@@ -1685,7 +1685,7 @@
     "unprotecting-title": "Статус снятия защиты",
     "protecting-finished-successfully": "Защита успешно завершена.",
     "unprotecting-finished-successfully": "Снятие защиты успешно завершено.",
-    "start_session_button": "Начать защищенный сеанс <kbd>enter</kbd>",
+    "start_session_button": "Начать защищенный сеанс",
     "protecting-in-progress": "Защита в процессе: {{count}}",
     "unprotecting-in-progress-count": "Снятие защиты в процессе: {{count}}",
     "started": "Защищенный сеанс запущен.",
diff --git a/apps/client/src/translations/tw/translation.json b/apps/client/src/translations/tw/translation.json
index cf2410f4d..d941c464c 100644
--- a/apps/client/src/translations/tw/translation.json
+++ b/apps/client/src/translations/tw/translation.json
@@ -992,7 +992,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "顯示受保護的筆記需要輸入您的密碼：",
-    "start_session_button": "開始受保護的作業階段 <kbd>Enter</kbd>",
+    "start_session_button": "開始受保護的作業階段",
     "started": "已啟動受保護的作業階段。",
     "wrong_password": "密碼錯誤。",
     "protecting-finished-successfully": "已成功完成保護操作。",
diff --git a/apps/client/src/translations/uk/translation.json b/apps/client/src/translations/uk/translation.json
index d9ad22f09..dac2f920c 100644
--- a/apps/client/src/translations/uk/translation.json
+++ b/apps/client/src/translations/uk/translation.json
@@ -1089,7 +1089,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Для відображення захищеної нотатки потрібно ввести пароль:",
-    "start_session_button": "Розпочати захищений сеанс <kbd>enter</kbd>",
+    "start_session_button": "Розпочати захищений сеанс",
     "started": "Захищений сеанс розпочато.",
     "wrong_password": "Неправильний пароль.",
     "protecting-finished-successfully": "Захист успішно завершено.",
diff --git a/apps/client/src/types-lib.d.ts b/apps/client/src/types-lib.d.ts
index 14403b743..aa125f389 100644
--- a/apps/client/src/types-lib.d.ts
+++ b/apps/client/src/types-lib.d.ts
@@ -60,3 +60,14 @@ declare global {
         windowControlsOverlay?: unknown;
     }
 }
+
+declare module "preact" {
+    namespace JSX {
+        interface IntrinsicElements {
+            webview: {
+                src: string;
+                class: string;
+            }
+        }
+    }
+}
diff --git a/apps/client/src/types.d.ts b/apps/client/src/types.d.ts
index d283983b4..c386a67f0 100644
--- a/apps/client/src/types.d.ts
+++ b/apps/client/src/types.d.ts
@@ -118,11 +118,17 @@ declare global {
         filterKey: (e: { altKey: boolean }, dx: number, dy: number, dz: number) => void;
     });
 
+    interface PanZoomTransform {
+        x: number;
+        y: number;
+        scale: number;
+    }
+
     interface PanZoom {
         zoomTo(x: number, y: number, scale: number);
         moveTo(x: number, y: number);
         on(event: string, callback: () => void);
-        getTransform(): unknown;
+        getTransform(): PanZoomTransform;
         dispose(): void;
     }
 }
diff --git a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
index 9ae07b977..efc60482e 100644
--- a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
+++ b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
@@ -21,7 +21,7 @@ import { ViewTypeOptions } from "./collections/interface";
 
 export interface FloatingButtonContext {
     parentComponent: Component;
-    note: FNote;    
+    note: FNote;
     noteContext: NoteContext;
     isDefaultViewMode: boolean;
     isReadOnly: boolean;
@@ -63,11 +63,11 @@ export const MOBILE_FLOATING_BUTTONS: FloatingButtonsList = [
     EditButton,
     RelationMapButtons,
     ExportImageButtons,
-    Backlinks    
+    Backlinks
 ]
 
 function RefreshBackendLogButton({ note, parentComponent, noteContext, isDefaultViewMode }: FloatingButtonContext) {
-    const isEnabled = note.noteId === "_backendLog" && isDefaultViewMode;
+    const isEnabled = (note.noteId === "_backendLog" || note.type === "render") && isDefaultViewMode;
     return isEnabled && <FloatingButton
         text={t("backend_log.refresh")}
         icon="bx bx-refresh"
@@ -82,14 +82,14 @@ function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: F
 
     return isEnabled && <FloatingButton
         text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")}
-        icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}        
+        icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}
         onClick={() => setSplitEditorOrientation(upcomingOrientation)}
     />
 }
 
 function ToggleReadOnlyButton({ note, viewType, isDefaultViewMode }: FloatingButtonContext) {
-    const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");    
-    const isEnabled = (note.type === "mermaid" || viewType === "geoMap")
+    const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
+    const isEnabled = ([ "mermaid", "mindMap", "canvas" ].includes(note.type) || viewType === "geoMap")
             && note.isContentAvailable() && isDefaultViewMode;
 
     return isEnabled && <FloatingButton
@@ -240,7 +240,7 @@ function GeoMapButtons({ triggerEvent, viewType, isReadOnly }: FloatingButtonCon
 
 function CopyImageReferenceButton({ note, isDefaultViewMode }: FloatingButtonContext) {
     const hiddenImageCopyRef = useRef<HTMLDivElement>(null);
-    const isEnabled = ["mermaid", "canvas", "mindMap"].includes(note?.type ?? "")
+    const isEnabled = ["mermaid", "canvas", "mindMap", "image"].includes(note?.type ?? "")
             && note?.isContentAvailable() && isDefaultViewMode;
 
     return isEnabled && (
@@ -301,7 +301,7 @@ function Backlinks({ note, isDefaultViewMode }: FloatingButtonContext) {
     let [ backlinkCount, setBacklinkCount ] = useState(0);
     let [ popupOpen, setPopupOpen ] = useState(false);
     const backlinksContainerRef = useRef<HTMLDivElement>(null);
-    
+
     useEffect(() => {
         if (!isDefaultViewMode) return;
 
@@ -314,7 +314,7 @@ function Backlinks({ note, isDefaultViewMode }: FloatingButtonContext) {
     const { windowHeight } = useWindowSize();
     useLayoutEffect(() => {
         const el = backlinksContainerRef.current;
-        if (popupOpen && el) {            
+        if (popupOpen && el) {
             const box = el.getBoundingClientRect();
             const maxHeight = windowHeight - box.top - 10;
             el.style.maxHeight = `${maxHeight}px`;
@@ -350,7 +350,7 @@ function BacklinksList({ noteId }: { noteId: string }) {
                     .filter(bl => "noteId" in bl)
                     .map((bl) => bl.noteId);
             await froca.getNotes(noteIds);
-            setBacklinks(backlinks);       
+            setBacklinks(backlinks);
         });
     }, [ noteId ]);
 
@@ -371,4 +371,4 @@ function BacklinksList({ noteId }: { noteId: string }) {
             )}
         </div>
     ));
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/NoteDetail.css b/apps/client/src/widgets/NoteDetail.css
new file mode 100644
index 000000000..438227780
--- /dev/null
+++ b/apps/client/src/widgets/NoteDetail.css
@@ -0,0 +1,15 @@
+.component.note-detail {
+    max-width: var(--max-content-width); /* Inherited from .note-split */
+    font-family: var(--detail-font-family);
+    font-size: var(--detail-font-size);
+    contain: none;
+}
+
+body.prefers-centered-content .note-detail {
+    /* Horizontally center the widget in its parent when the "Keep content centered" option is on */
+    margin-inline: auto;
+}
+
+.note-detail > * {
+    contain: none;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/NoteDetail.tsx b/apps/client/src/widgets/NoteDetail.tsx
new file mode 100644
index 000000000..0482d0ddb
--- /dev/null
+++ b/apps/client/src/widgets/NoteDetail.tsx
@@ -0,0 +1,324 @@
+import { useNoteContext, useTriliumEvent } from "./react/hooks"
+import FNote from "../entities/fnote";
+import protected_session_holder from "../services/protected_session_holder";
+import { useEffect, useRef, useState } from "preact/hooks";
+import NoteContext from "../components/note_context";
+import { isValidElement, VNode } from "preact";
+import { TypeWidgetProps } from "./type_widgets/type_widget";
+import "./NoteDetail.css";
+import attributes from "../services/attributes";
+import { ExtendedNoteType, TYPE_MAPPINGS, TypeWidget } from "./note_types";
+import { dynamicRequire, isElectron, isMobile } from "../services/utils";
+import toast from "../services/toast.js";
+import { t } from "../services/i18n";
+
+/**
+ * The note detail is in charge of rendering the content of a note, by determining its type (e.g. text, code) and using the appropriate view widget.
+ *
+ * Apart from that, it:
+ * - Applies a full-height style depending on the content type (e.g. canvas notes).
+ * - Focuses the content when switching tabs.
+ * - Caches the note type elements based on what the user has accessed, in order to quickly load it again.
+ * - Fixes the tree for launch bar configurations on mobile.
+ * - Provides scripting events such as obtaining the active note detail widget, or note type widget.
+ * - Printing and exporting to PDF.
+ */
+export default function NoteDetail() {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { note, type, mime, noteContext, parentComponent } = useNoteInfo();
+    const { ntxId, viewScope } = noteContext ?? {};
+    const isFullHeight = checkFullHeight(noteContext, type);
+    const noteTypesToRender = useRef<{ [ key in ExtendedNoteType ]?: (props: TypeWidgetProps) => VNode }>({});
+    const [ activeNoteType, setActiveNoteType ] = useState<ExtendedNoteType>();
+
+    const props: TypeWidgetProps = {
+        note: note!,
+        viewScope,
+        ntxId,
+        parentComponent,
+        noteContext
+    };
+    useEffect(() => {
+        if (!type) return;
+
+        if (!noteTypesToRender.current[type]) {
+            getCorrespondingWidget(type).then((el) => {
+                if (!el) return;
+                noteTypesToRender.current[type] = el;
+                setActiveNoteType(type);
+            });
+        } else {
+            setActiveNoteType(type);
+        }
+    }, [ note, viewScope, type ]);
+
+    // Detect note type changes.
+    useTriliumEvent("entitiesReloaded", async ({ loadResults }) => {
+        if (!note) return;
+
+        // we're detecting note type change on the note_detail level, but triggering the noteTypeMimeChanged
+        // globally, so it gets also to e.g. ribbon components. But this means that the event can be generated multiple
+        // times if the same note is open in several tabs.
+
+        if (note.noteId && loadResults.isNoteContentReloaded(note.noteId, parentComponent.componentId)) {
+            // probably incorrect event
+            // calling this.refresh() is not enough since the event needs to be propagated to children as well
+            // FIXME: create a separate event to force hierarchical refresh
+
+            // this uses handleEvent to make sure that the ordinary content updates are propagated only in the subtree
+            // to avoid the problem in #3365
+            parentComponent.handleEvent("noteTypeMimeChanged", { noteId: note.noteId });
+        } else if (note.noteId
+            && loadResults.isNoteReloaded(note.noteId, parentComponent.componentId)
+            && (type !== (await getWidgetType(note, noteContext)) || mime !== note?.mime)) {
+            // this needs to have a triggerEvent so that e.g., note type (not in the component subtree) is updated
+            parentComponent.triggerEvent("noteTypeMimeChanged", { noteId: note.noteId });
+        } else {
+            const attrs = loadResults.getAttributeRows();
+
+            const label = attrs.find(
+                (attr) =>
+                    attr.type === "label" &&
+                    ["readOnly", "autoReadOnlyDisabled", "cssClass", "displayRelations", "hideRelations"].includes(attr.name ?? "") &&
+                    attributes.isAffecting(attr, note)
+            );
+
+            const relation = attrs.find((attr) => attr.type === "relation" && ["template", "inherit", "renderNote"]
+                .includes(attr.name ?? "") && attributes.isAffecting(attr, note));
+
+            if (note.noteId && (label || relation)) {
+                // probably incorrect event
+                // calling this.refresh() is not enough since the event needs to be propagated to children as well
+                parentComponent.triggerEvent("noteTypeMimeChanged", { noteId: note.noteId });
+            }
+        }
+    });
+
+    // Automatically focus the editor.
+    useTriliumEvent("activeNoteChanged", () => {
+        // Restore focus to the editor when switching tabs, but only if the note tree is not already focused.
+        if (!document.activeElement?.classList.contains("fancytree-title")) {
+            parentComponent.triggerCommand("focusOnDetail", { ntxId });
+        }
+    });
+
+    // Fixed tree for launch bar config on mobile.
+    useEffect(() => {
+        if (!isMobile) return;
+        const hasFixedTree = noteContext?.hoistedNoteId === "_lbMobileRoot";
+        document.body.classList.toggle("force-fixed-tree", hasFixedTree);
+    }, [ note ]);
+
+    // Handle toast notifications.
+    useEffect(() => {
+        if (!isElectron()) return;
+        const { ipcRenderer } = dynamicRequire("electron");
+        const listener = () => {
+            toast.closePersistent("printing");
+        };
+        ipcRenderer.on("print-done", listener);
+        return () => ipcRenderer.off("print-done", listener);
+    }, []);
+
+    useTriliumEvent("executeInActiveNoteDetailWidget", ({ callback }) => {
+        if (!noteContext?.isActive()) return;
+        callback(parentComponent);
+    });
+
+    useTriliumEvent("executeWithTypeWidget", ({ resolve, ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId || !activeNoteType || !containerRef.current) return;
+
+        const classNameToSearch = TYPE_MAPPINGS[activeNoteType].className;
+        const componentEl = containerRef.current.querySelector<HTMLElement>(`.${classNameToSearch}`);
+        if (!componentEl) return;
+
+        const component = glob.getComponentByEl(componentEl);
+        resolve(component);
+    });
+
+    useTriliumEvent("printActiveNote", () => {
+        if (!noteContext?.isActive() || !note) return;
+
+        toast.showPersistent({
+            icon: "bx bx-loader-circle bx-spin",
+            message: t("note_detail.printing"),
+            id: "printing"
+        });
+
+        if (isElectron()) {
+            const { ipcRenderer } = dynamicRequire("electron");
+            ipcRenderer.send("print-note", {
+                notePath: noteContext.notePath
+            });
+        } else {
+            const iframe = document.createElement('iframe');
+            iframe.src = `?print#${noteContext.notePath}`;
+            iframe.className = "print-iframe";
+            document.body.appendChild(iframe);
+            iframe.onload = () => {
+                if (!iframe.contentWindow) {
+                    toast.closePersistent("printing");
+                    document.body.removeChild(iframe);
+                    return;
+                }
+
+                iframe.contentWindow.addEventListener("note-ready", () => {
+                    toast.closePersistent("printing");
+                    iframe.contentWindow?.print();
+                    document.body.removeChild(iframe);
+                });
+            };
+        }
+    });
+
+    useTriliumEvent("exportAsPdf", () => {
+        if (!noteContext?.isActive() || !note) return;
+        toast.showPersistent({
+            icon: "bx bx-loader-circle bx-spin",
+            message: t("note_detail.printing_pdf"),
+            id: "printing"
+        });
+
+        const { ipcRenderer } = dynamicRequire("electron");
+        ipcRenderer.send("export-as-pdf", {
+            title: note.title,
+            notePath: noteContext.notePath,
+            pageSize: note.getAttributeValue("label", "printPageSize") ?? "Letter",
+            landscape: note.hasAttribute("label", "printLandscape")
+        });
+    });
+
+    return (
+        <div
+            ref={containerRef}
+            class={`note-detail ${isFullHeight ? "full-height" : ""}`}
+        >
+            {Object.entries(noteTypesToRender.current).map(([ itemType, Element ]) => {
+                return <NoteDetailWrapper
+                    Element={Element}
+                    key={itemType}
+                    type={itemType as ExtendedNoteType}
+                    isVisible={type === itemType}
+                    isFullHeight={isFullHeight}
+                    props={props}
+                />
+            })}
+        </div>
+    );
+}
+
+/**
+ * Wraps a single note type widget, in order to keep it in the DOM even after the user has switched away to another note type. This allows faster loading of the same note type again. The properties are cached, so that they are updated only
+ * while the widget is visible, to avoid rendering in the background. When not visible, the DOM element is simply hidden.
+ */
+function NoteDetailWrapper({ Element, type, isVisible, isFullHeight, props }: { Element: (props: TypeWidgetProps) => VNode, type: ExtendedNoteType, isVisible: boolean, isFullHeight: boolean, props: TypeWidgetProps }) {
+    const [ cachedProps, setCachedProps ] = useState(props);
+
+    useEffect(() => {
+        if (isVisible) {
+            setCachedProps(props);
+        } else {
+            // Do nothing, keep the old props.
+        }
+    }, [ props, isVisible ]);
+
+    const typeMapping = TYPE_MAPPINGS[type];
+    return (
+        <div
+            className={`${typeMapping.className} ${typeMapping.printable ? "note-detail-printable" : ""} ${isVisible ? "visible" : "hidden-ext"}`}
+            style={{
+                height: isFullHeight ? "100%" : ""
+            }}
+        >
+            { <Element {...cachedProps} /> }
+        </div>
+    );
+}
+
+/** Manages both note changes and changes to the widget type, which are asynchronous. */
+function useNoteInfo() {
+    const { note: actualNote, noteContext, parentComponent } = useNoteContext();
+    const [ note, setNote ] = useState<FNote | null | undefined>();
+    const [ type, setType ] = useState<ExtendedNoteType>();
+    const [ mime, setMime ] = useState<string>();
+
+    function refresh() {
+        getWidgetType(actualNote, noteContext).then(type => {
+            setNote(actualNote);
+            setType(type);
+            setMime(actualNote?.mime);
+        });
+    }
+
+    useEffect(refresh, [ actualNote, noteContext, noteContext?.viewScope ]);
+    useTriliumEvent("readOnlyTemporarilyDisabled", ({ noteContext: eventNoteContext }) => {
+        if (eventNoteContext?.ntxId !== noteContext?.ntxId) return;
+        refresh();
+    });
+    useTriliumEvent("noteTypeMimeChanged", refresh);
+
+    return { note, type, mime, noteContext, parentComponent };
+}
+
+async function getCorrespondingWidget(type: ExtendedNoteType): Promise<null | TypeWidget> {
+    const correspondingType = TYPE_MAPPINGS[type].view;
+    if (!correspondingType) return null;
+
+    const result = await correspondingType();
+
+    if ("default" in result) {
+        return result.default;
+    } else if (isValidElement(result)) {
+        // Direct VNode provided.
+        return result;
+    } else {
+        return result;
+    }
+}
+
+async function getWidgetType(note: FNote | null | undefined, noteContext: NoteContext | undefined): Promise<ExtendedNoteType | undefined> {
+    if (!noteContext) return undefined;
+    if (!note) {
+        // If the note is null, then it's a new tab. If it's undefined, then it's not loaded yet.
+        return note === null ? "empty" : undefined;
+    }
+
+    const type = note.type;
+    let resultingType: ExtendedNoteType;
+
+    if (noteContext?.viewScope?.viewMode === "source") {
+        resultingType = "readOnlyCode";
+    } else if (noteContext?.viewScope && noteContext.viewScope.viewMode === "attachments") {
+        resultingType = noteContext.viewScope.attachmentId ? "attachmentDetail" : "attachmentList";
+    } else if (type === "text" && (await noteContext?.isReadOnly())) {
+        resultingType = "readOnlyText";
+    } else if ((type === "code" || type === "mermaid") && (await noteContext?.isReadOnly())) {
+        resultingType = "readOnlyCode";
+    } else if (type === "text") {
+        resultingType = "editableText";
+    } else if (type === "code") {
+        resultingType = "editableCode";
+    } else if (type === "launcher") {
+        resultingType = "doc";
+    } else {
+        resultingType = type;
+    }
+
+    if (note.isProtected && !protected_session_holder.isProtectedSessionAvailable()) {
+        resultingType = "protectedSession";
+    }
+
+    return resultingType;
+}
+
+function checkFullHeight(noteContext: NoteContext | undefined, type: ExtendedNoteType | undefined) {
+    if (!noteContext) return false;
+
+    // https://github.com/zadam/trilium/issues/2522
+    const isBackendNote = noteContext?.noteId === "_backendLog";
+    const isSqlNote = noteContext.note?.mime === "text/x-sqlite;schema=trilium";
+    const isFullHeightNoteType = type && TYPE_MAPPINGS[type].isFullHeight;
+    return (!noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote)
+        || noteContext?.viewScope?.viewMode === "attachments"
+        || isBackendNote;
+}
diff --git a/apps/client/src/widgets/attachment_detail.ts b/apps/client/src/widgets/attachment_detail.ts
deleted file mode 100644
index 31be61536..000000000
--- a/apps/client/src/widgets/attachment_detail.ts
+++ /dev/null
@@ -1,207 +0,0 @@
-import { t } from "../services/i18n.js";
-import utils from "../services/utils.js";
-import AttachmentActionsWidget from "./buttons/attachments_actions.js";
-import BasicWidget from "./basic_widget.js";
-import options from "../services/options.js";
-import imageService from "../services/image.js";
-import linkService from "../services/link.js";
-import contentRenderer from "../services/content_renderer.js";
-import toastService from "../services/toast.js";
-import type FAttachment from "../entities/fattachment.js";
-import type { EventData } from "../components/app_context.js";
-
-const TPL = /*html*/`
-<div class="attachment-detail-widget">
-    <style>
-        .attachment-detail-widget {
-            height: 100%;
-        }
-
-        .attachment-detail-wrapper {
-            margin-bottom: 20px;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .attachment-title-line {
-            display: flex;
-            align-items: baseline;
-            gap: 1em;
-        }
-
-        .attachment-details {
-            margin-inline-start: 10px;
-        }
-
-        .attachment-content-wrapper {
-            flex-grow: 1;
-        }
-
-        .attachment-content-wrapper .rendered-content {
-            height: 100%;
-        }
-
-        .attachment-content-wrapper pre {
-            padding: 10px;
-            margin-top: 10px;
-            margin-bottom: 10px;
-        }
-
-        .attachment-detail-wrapper.list-view .attachment-content-wrapper {
-            max-height: 300px;
-        }
-
-        .attachment-detail-wrapper.full-detail {
-            height: 100%;
-        }
-
-        .attachment-detail-wrapper.full-detail .attachment-content-wrapper {
-            height: 100%;
-        }
-
-        .attachment-detail-wrapper.list-view .attachment-content-wrapper pre {
-            max-height: 400px;
-        }
-
-        .attachment-content-wrapper img {
-            margin: 10px;
-        }
-
-        .attachment-detail-wrapper.list-view .attachment-content-wrapper img, .attachment-detail-wrapper.list-view .attachment-content-wrapper video {
-            max-height: 300px;
-            max-width: 90%;
-            object-fit: contain;
-        }
-
-        .attachment-detail-wrapper.full-detail .attachment-content-wrapper img {
-            max-width: 90%;
-            object-fit: contain;
-        }
-
-        .attachment-detail-wrapper.scheduled-for-deletion .attachment-content-wrapper img {
-            filter: contrast(10%);
-        }
-    </style>
-
-    <div class="attachment-detail-wrapper">
-        <div class="attachment-title-line">
-            <div class="attachment-actions-container"></div>
-            <h4 class="attachment-title"></h4>
-            <div class="attachment-details"></div>
-            <div style="flex: 1 1;"></div>
-        </div>
-
-        <div class="attachment-deletion-warning alert alert-info" style="margin-top: 15px;"></div>
-
-        <div class="attachment-content-wrapper"></div>
-    </div>
-</div>`;
-
-export default class AttachmentDetailWidget extends BasicWidget {
-    attachment: FAttachment;
-    attachmentActionsWidget: AttachmentActionsWidget;
-    isFullDetail: boolean;
-    $wrapper!: JQuery<HTMLElement>;
-
-    constructor(attachment: FAttachment, isFullDetail: boolean) {
-        super();
-
-        this.contentSized();
-        this.attachment = attachment;
-        this.attachmentActionsWidget = new AttachmentActionsWidget(attachment, isFullDetail);
-        this.isFullDetail = isFullDetail;
-        this.child(this.attachmentActionsWidget);
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.refresh();
-
-        super.doRender();
-    }
-
-    async refresh() {
-        this.$widget.find(".attachment-detail-wrapper").empty().append($(TPL).find(".attachment-detail-wrapper").html());
-        this.$wrapper = this.$widget.find(".attachment-detail-wrapper");
-        this.$wrapper.addClass(this.isFullDetail ? "full-detail" : "list-view");
-
-        if (!this.isFullDetail) {
-            const $link = await linkService.createLink(this.attachment.ownerId, {
-                title: this.attachment.title,
-                viewScope: {
-                    viewMode: "attachments",
-                    attachmentId: this.attachment.attachmentId
-                }
-            });
-            $link.addClass("use-tn-links");
-
-            this.$wrapper.find(".attachment-title").append($link);
-        } else {
-            this.$wrapper.find(".attachment-title").text(this.attachment.title);
-        }
-
-        const $deletionWarning = this.$wrapper.find(".attachment-deletion-warning");
-        const { utcDateScheduledForErasureSince } = this.attachment;
-
-        if (utcDateScheduledForErasureSince) {
-            this.$wrapper.addClass("scheduled-for-deletion");
-
-            const scheduledSinceTimestamp = utils.parseDate(utcDateScheduledForErasureSince)?.getTime();
-            // use default value (30 days in seconds) from options_init as fallback, in case getInt returns null
-            const intervalMs = options.getInt("eraseUnusedAttachmentsAfterSeconds") || 2592000 * 1000;
-            const deletionTimestamp = scheduledSinceTimestamp + intervalMs;
-            const willBeDeletedInMs = deletionTimestamp - Date.now();
-
-            $deletionWarning.show();
-
-            if (willBeDeletedInMs >= 60000) {
-                $deletionWarning.text(t("attachment_detail_2.will_be_deleted_in", { time: utils.formatTimeInterval(willBeDeletedInMs) }));
-            } else {
-                $deletionWarning.text(t("attachment_detail_2.will_be_deleted_soon"));
-            }
-
-            $deletionWarning.append(t("attachment_detail_2.deletion_reason"));
-        } else {
-            this.$wrapper.removeClass("scheduled-for-deletion");
-            $deletionWarning.hide();
-        }
-
-        this.$wrapper.find(".attachment-details").text(t("attachment_detail_2.role_and_size", { role: this.attachment.role, size: utils.formatSize(this.attachment.contentLength) }));
-        this.$wrapper.find(".attachment-actions-container").append(this.attachmentActionsWidget.render());
-
-        const { $renderedContent } = await contentRenderer.getRenderedContent(this.attachment, { imageHasZoom: this.isFullDetail });
-        this.$wrapper.find(".attachment-content-wrapper").append($renderedContent);
-    }
-
-    async copyAttachmentLinkToClipboard() {
-        if (this.attachment.role === "image") {
-            imageService.copyImageReferenceToClipboard(this.$wrapper.find(".attachment-content-wrapper"));
-        } else if (this.attachment.role === "file") {
-            const $link = await linkService.createLink(this.attachment.ownerId, {
-                referenceLink: true,
-                viewScope: {
-                    viewMode: "attachments",
-                    attachmentId: this.attachment.attachmentId
-                }
-            });
-
-            utils.copyHtmlToClipboard($link[0].outerHTML);
-
-            toastService.showMessage(t("attachment_detail_2.link_copied"));
-        } else {
-            throw new Error(t("attachment_detail_2.unrecognized_role", { role: this.attachment.role }));
-        }
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        const attachmentRow = loadResults.getAttachmentRows().find((att) => att.attachmentId === this.attachment.attachmentId);
-
-        if (attachmentRow) {
-            if (attachmentRow.isDeleted) {
-                this.toggleInt(false);
-            } else {
-                this.refresh();
-            }
-        }
-    }
-}
diff --git a/apps/client/src/widgets/basic_widget.ts b/apps/client/src/widgets/basic_widget.ts
index 61499dbda..db1a31f70 100644
--- a/apps/client/src/widgets/basic_widget.ts
+++ b/apps/client/src/widgets/basic_widget.ts
@@ -4,8 +4,6 @@ import froca from "../services/froca.js";
 import { t } from "../services/i18n.js";
 import toastService from "../services/toast.js";
 import { renderReactWidget } from "./react/react_utils.jsx";
-import { EventNames, EventData } from "../components/app_context.js";
-import { Handler } from "leaflet";
 
 export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedComponent<T> {
     protected attrs: Record<string, string>;
diff --git a/apps/client/src/widgets/buttons/attachments_actions.ts b/apps/client/src/widgets/buttons/attachments_actions.ts
deleted file mode 100644
index 681973a28..000000000
--- a/apps/client/src/widgets/buttons/attachments_actions.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import { t } from "../../services/i18n.js";
-import BasicWidget from "../basic_widget.js";
-import server from "../../services/server.js";
-import dialogService from "../../services/dialog.js";
-import toastService from "../../services/toast.js";
-import ws from "../../services/ws.js";
-import appContext from "../../components/app_context.js";
-import openService from "../../services/open.js";
-import utils from "../../services/utils.js";
-import { Dropdown } from "bootstrap";
-import type FAttachment from "../../entities/fattachment.js";
-import type AttachmentDetailWidget from "../attachment_detail.js";
-import type { NoteRow } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="dropdown attachment-actions">
-    <style>
-    .attachment-actions {
-        width: 35px;
-        height: 35px;
-    }
-
-    .attachment-actions .dropdown-menu {
-        width: 20em;
-    }
-
-    .attachment-actions .dropdown-item .bx {
-        position: relative;
-        top: 3px;
-        font-size: 120%;
-        margin-inline-end: 5px;
-    }
-
-    .attachment-actions .dropdown-item[disabled], .attachment-actions .dropdown-item[disabled]:hover {
-        color: var(--muted-text-color) !important;
-        background-color: transparent !important;
-        pointer-events: none; /* makes it unclickable */
-    }
-    </style>
-
-    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true"
-        aria-expanded="false" class="icon-action icon-action-always-border bx bx-dots-vertical-rounded"
-        style="position: relative; top: 3px;"></button>
-
-    <div class="dropdown-menu dropdown-menu-right">
-
-        <li data-trigger-command="openAttachment" class="dropdown-item"
-            title="${t("attachments_actions.open_externally_title")}"><span class="bx bx-file-find"></span> ${t("attachments_actions.open_externally")}</li>
-
-        <li data-trigger-command="openAttachmentCustom" class="dropdown-item"
-            title="${t("attachments_actions.open_custom_title")}"><span class="bx bx-customize"></span> ${t("attachments_actions.open_custom")}</li>
-
-        <li data-trigger-command="downloadAttachment" class="dropdown-item">
-            <span class="bx bx-download"></span> ${t("attachments_actions.download")}</li>
-
-        <li data-trigger-command="copyAttachmentLinkToClipboard" class="dropdown-item"><span class="bx bx-link">
-            </span> ${t("attachments_actions.copy_link_to_clipboard")}</li>
-
-
-        <div class="dropdown-divider"></div>
-
-
-        <li data-trigger-command="uploadNewAttachmentRevision" class="dropdown-item"><span class="bx bx-upload">
-            </span> ${t("attachments_actions.upload_new_revision")}</li>
-
-        <li data-trigger-command="renameAttachment" class="dropdown-item">
-            <span class="bx bx-rename"></span> ${t("attachments_actions.rename_attachment")}</li>
-
-        <li data-trigger-command="deleteAttachment" class="dropdown-item">
-            <span class="bx bx-trash destructive-action-icon"></span> ${t("attachments_actions.delete_attachment")}</li>
-
-
-        <div class="dropdown-divider"></div>
-
-
-        <li data-trigger-command="convertAttachmentIntoNote" class="dropdown-item"><span class="bx bx-note">
-            </span> ${t("attachments_actions.convert_attachment_into_note")}</li>
-
-    </div>
-
-    <input type="file" class="attachment-upload-new-revision-input" style="display: none">
-</div>`;
-
-// TODO: Deduplicate
-interface AttachmentResponse {
-    note: NoteRow;
-}
-
-export default class AttachmentActionsWidget extends BasicWidget {
-    $uploadNewRevisionInput!: JQuery<HTMLInputElement>;
-    attachment: FAttachment;
-    isFullDetail: boolean;
-    dropdown!: Dropdown;
-
-    constructor(attachment: FAttachment, isFullDetail: boolean) {
-        super();
-
-        this.attachment = attachment;
-        this.isFullDetail = isFullDetail;
-    }
-
-    get attachmentId() {
-        return this.attachment.attachmentId;
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]);
-        this.$widget.on("click", ".dropdown-item", () => this.dropdown.toggle());
-
-        this.$uploadNewRevisionInput = this.$widget.find(".attachment-upload-new-revision-input");
-        this.$uploadNewRevisionInput.on("change", async () => {
-            const fileToUpload = this.$uploadNewRevisionInput[0].files?.item(0); // copy to allow reset below
-            this.$uploadNewRevisionInput.val("");
-            if (fileToUpload) {
-                const result = await server.upload(`attachments/${this.attachmentId}/file`, fileToUpload);
-                if (result.uploaded) {
-                    toastService.showMessage(t("attachments_actions.upload_success"));
-                } else {
-                    toastService.showError(t("attachments_actions.upload_failed"));
-                }
-            }
-        });
-
-        const isElectron = utils.isElectron();
-        if (!this.isFullDetail) {
-            const $openAttachmentButton = this.$widget.find("[data-trigger-command='openAttachment']");
-            $openAttachmentButton.addClass("disabled").append($('<span class="bx bx-info-circle disabled-tooltip" />').attr("title", t("attachments_actions.open_externally_detail_page")));
-            if (isElectron) {
-                const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
-                $openAttachmentCustomButton.addClass("disabled").append($('<span class="bx bx-info-circle disabled-tooltip" />').attr("title", t("attachments_actions.open_externally_detail_page")));
-            }
-        }
-        if (!isElectron) {
-            const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
-            $openAttachmentCustomButton.addClass("disabled").append($('<span class="bx bx-info-circle disabled-tooltip" />').attr("title", t("attachments_actions.open_custom_client_only")));
-        }
-    }
-
-    async openAttachmentCommand() {
-        await openService.openAttachmentExternally(this.attachmentId, this.attachment.mime);
-    }
-
-    async openAttachmentCustomCommand() {
-        await openService.openAttachmentCustom(this.attachmentId, this.attachment.mime);
-    }
-
-    async downloadAttachmentCommand() {
-        await openService.downloadAttachment(this.attachmentId);
-    }
-
-    async uploadNewAttachmentRevisionCommand() {
-        this.$uploadNewRevisionInput.trigger("click");
-    }
-
-    async copyAttachmentLinkToClipboardCommand() {
-        if (this.parent && "copyAttachmentLinkToClipboard" in this.parent) {
-            (this.parent as AttachmentDetailWidget).copyAttachmentLinkToClipboard();
-        }
-    }
-
-    async deleteAttachmentCommand() {
-        if (!(await dialogService.confirm(t("attachments_actions.delete_confirm", { title: this.attachment.title })))) {
-            return;
-        }
-
-        await server.remove(`attachments/${this.attachmentId}`);
-        toastService.showMessage(t("attachments_actions.delete_success", { title: this.attachment.title }));
-    }
-
-    async convertAttachmentIntoNoteCommand() {
-        if (!(await dialogService.confirm(t("attachments_actions.convert_confirm", { title: this.attachment.title })))) {
-            return;
-        }
-
-        const { note: newNote } = await server.post<AttachmentResponse>(`attachments/${this.attachmentId}/convert-to-note`);
-        toastService.showMessage(t("attachments_actions.convert_success", { title: this.attachment.title }));
-        await ws.waitForMaxKnownEntityChangeId();
-        await appContext.tabManager.getActiveContext()?.setNote(newNote.noteId);
-    }
-
-    async renameAttachmentCommand() {
-        const attachmentTitle = await dialogService.prompt({
-            title: t("attachments_actions.rename_attachment"),
-            message: t("attachments_actions.enter_new_name"),
-            defaultValue: this.attachment.title
-        });
-
-        if (!attachmentTitle?.trim()) {
-            return;
-        }
-
-        await server.put(`attachments/${this.attachmentId}/rename`, { title: attachmentTitle });
-    }
-}
diff --git a/apps/client/src/widgets/collections/calendar/index.tsx b/apps/client/src/widgets/collections/calendar/index.tsx
index ec1e9e23b..6cae60f26 100644
--- a/apps/client/src/widgets/collections/calendar/index.tsx
+++ b/apps/client/src/widgets/collections/calendar/index.tsx
@@ -4,7 +4,7 @@ import Calendar from "./calendar";
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import "./index.css";
 import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
-import { DISPLAYABLE_LOCALE_IDS, LOCALE_IDS } from "@triliumnext/commons";
+import { DISPLAYABLE_LOCALE_IDS } from "@triliumnext/commons";
 import { Calendar as FullCalendar } from "@fullcalendar/core";
 import { parseStartEndDateFromEvent, parseStartEndTimeFromEvent } from "./utils";
 import dialog from "../../../services/dialog";
diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx
index ccc1330d1..07e942d19 100644
--- a/apps/client/src/widgets/collections/geomap/index.tsx
+++ b/apps/client/src/widgets/collections/geomap/index.tsx
@@ -1,7 +1,7 @@
 import Map from "./map";
 import "./index.css";
 import { ViewModeProps } from "../interface";
-import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTouchBar, useTriliumEvent } from "../../react/hooks";
+import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTriliumEvent } from "../../react/hooks";
 import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
 import { divIcon, GPXOptions, LatLng, LeafletMouseEvent } from "leaflet";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
diff --git a/apps/client/src/widgets/containers/scrolling_container.css b/apps/client/src/widgets/containers/scrolling_container.css
new file mode 100644
index 000000000..5bea62418
--- /dev/null
+++ b/apps/client/src/widgets/containers/scrolling_container.css
@@ -0,0 +1,9 @@
+.scrolling-container {
+    overflow: auto;
+    scroll-behavior: smooth;
+    position: relative;
+}
+
+.note-split.type-code:not(.mime-text-x-sqlite) > .scrolling-container {
+    background-color: var(--code-background-color);
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/containers/scrolling_container.ts b/apps/client/src/widgets/containers/scrolling_container.ts
index fab51254c..c6b67724f 100644
--- a/apps/client/src/widgets/containers/scrolling_container.ts
+++ b/apps/client/src/widgets/containers/scrolling_container.ts
@@ -2,6 +2,7 @@ import type { CommandListenerData, EventData, EventNames } from "../../component
 import type NoteContext from "../../components/note_context.js";
 import type BasicWidget from "../basic_widget.js";
 import Container from "./container.js";
+import "./scrolling_container.css";
 
 export default class ScrollingContainer extends Container<BasicWidget> {
 
@@ -11,9 +12,6 @@ export default class ScrollingContainer extends Container<BasicWidget> {
         super();
 
         this.class("scrolling-container");
-        this.css("overflow", "auto");
-        this.css("scroll-behavior", "smooth");
-        this.css("position", "relative");
     }
 
     setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
diff --git a/apps/client/src/widgets/dialogs/add_link.tsx b/apps/client/src/widgets/dialogs/add_link.tsx
index 43cfa4e4e..4bb1d1711 100644
--- a/apps/client/src/widgets/dialogs/add_link.tsx
+++ b/apps/client/src/widgets/dialogs/add_link.tsx
@@ -6,7 +6,6 @@ import NoteAutocomplete from "../react/NoteAutocomplete";
 import { useRef, useState, useEffect } from "preact/hooks";
 import tree from "../../services/tree";
 import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
-import { default as TextTypeWidget } from "../type_widgets/editable_text.js";
 import { logError } from "../../services/ws";
 import FormGroup from "../react/FormGroup.js";
 import { refToJQuerySelector } from "../react/react_utils";
@@ -14,29 +13,32 @@ import { useTriliumEvent } from "../react/hooks";
 
 type LinkType = "reference-link" | "external-link" | "hyper-link";
 
+export interface AddLinkOpts {
+    text: string;
+    hasSelection: boolean;
+    addLink(notePath: string, linkTitle: string | null, externalLink?: boolean): Promise<void>;
+}
+
 export default function AddLinkDialog() {
-    const [ textTypeWidget, setTextTypeWidget ] = useState<TextTypeWidget>();
-    const initialText = useRef<string>();
+    const [ opts, setOpts ] = useState<AddLinkOpts>();
     const [ linkTitle, setLinkTitle ] = useState("");
-    const hasSelection = textTypeWidget?.hasSelection();
-    const [ linkType, setLinkType ] = useState<LinkType>(hasSelection ? "hyper-link" : "reference-link");
+    const [ linkType, setLinkType ] = useState<LinkType>();
     const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
     const [ shown, setShown ] = useState(false);
     const hasSubmittedRef = useRef(false);
 
-    useTriliumEvent("showAddLinkDialog", ( { textTypeWidget, text }) => {
-        setTextTypeWidget(textTypeWidget);
-        initialText.current = text;
+    useTriliumEvent("showAddLinkDialog", opts => {
+        setOpts(opts);
         setShown(true);
     });
 
     useEffect(() => {
-        if (hasSelection) {
+        if (opts?.hasSelection) {
             setLinkType("hyper-link");
         } else {
             setLinkType("reference-link");
         }
-    }, [ hasSelection ])
+    }, [ opts ]);
 
     async function setDefaultLinkTitle(noteId: string) {
         const noteTitle = await tree.getNoteTitle(noteId);
@@ -71,10 +73,10 @@ export default function AddLinkDialog() {
 
     function onShown() {
         const $autocompleteEl = refToJQuerySelector(autocompleteRef);
-        if (!initialText.current) {
+        if (!opts?.text) {
             note_autocomplete.showRecentNotes($autocompleteEl);
         } else {
-            note_autocomplete.setText($autocompleteEl, initialText.current);
+            note_autocomplete.setText($autocompleteEl, opts.text);
         }
 
         // to be able to quickly remove entered text
@@ -108,15 +110,15 @@ export default function AddLinkDialog() {
             onShown={onShown}
             onHidden={() => {
                 // Insert the link.
-                if (hasSubmittedRef.current && suggestion && textTypeWidget) {
+                if (hasSubmittedRef.current && suggestion && opts) {
                     hasSubmittedRef.current = false;
 
                     if (suggestion.notePath) {
                         // Handle note link
-                        textTypeWidget.addLink(suggestion.notePath, linkType === "reference-link" ? null : linkTitle);
+                        opts.addLink(suggestion.notePath, linkType === "reference-link" ? null : linkTitle);
                     } else if (suggestion.externalLink) {
                         // Handle external link
-                        textTypeWidget.addLink(suggestion.externalLink, linkTitle, true);
+                        opts.addLink(suggestion.externalLink, linkTitle, true);
                     }
                 }
 
@@ -136,7 +138,7 @@ export default function AddLinkDialog() {
                 />
             </FormGroup>
 
-            {!hasSelection && (
+            {!opts?.hasSelection && (
                 <div className="add-link-title-settings">
                     {(linkType !== "external-link") && (
                         <>
diff --git a/apps/client/src/widgets/dialogs/include_note.tsx b/apps/client/src/widgets/dialogs/include_note.tsx
index 911ed0dc0..aabd64bab 100644
--- a/apps/client/src/widgets/dialogs/include_note.tsx
+++ b/apps/client/src/widgets/dialogs/include_note.tsx
@@ -8,17 +8,21 @@ import Button from "../react/Button";
 import { Suggestion, triggerRecentNotes } from "../../services/note_autocomplete";
 import tree from "../../services/tree";
 import froca from "../../services/froca";
-import EditableTextTypeWidget, { type BoxSize } from "../type_widgets/editable_text";
 import { useTriliumEvent } from "../react/hooks";
+import { type BoxSize, CKEditorApi } from "../type_widgets/text/CKEditorWithWatchdog";
+
+export interface IncludeNoteOpts {
+    editorApi: CKEditorApi;
+}
 
 export default function IncludeNoteDialog() {
-    const [textTypeWidget, setTextTypeWidget] = useState<EditableTextTypeWidget>();
+    const editorApiRef = useRef<CKEditorApi>(null);
     const [suggestion, setSuggestion] = useState<Suggestion | null>(null);
-    const [boxSize, setBoxSize] = useState("medium");
+    const [boxSize, setBoxSize] = useState<string>("medium");
     const [shown, setShown] = useState(false);
 
-    useTriliumEvent("showIncludeNoteDialog", ({ textTypeWidget }) => {
-        setTextTypeWidget(textTypeWidget);
+    useTriliumEvent("showIncludeNoteDialog", ({ editorApi }) => {
+        editorApiRef.current = editorApi;
         setShown(true);
     });
 
@@ -32,12 +36,9 @@ export default function IncludeNoteDialog() {
             onShown={() => triggerRecentNotes(autoCompleteRef.current)}
             onHidden={() => setShown(false)}
             onSubmit={() => {
-                if (!suggestion?.notePath || !textTypeWidget) {
-                    return;
-                }
-
+                if (!suggestion?.notePath || !editorApiRef.current) return;
                 setShown(false);
-                includeNote(suggestion.notePath, textTypeWidget, boxSize as BoxSize);
+                includeNote(suggestion.notePath, editorApiRef.current, boxSize as BoxSize);
             }}
             footer={<Button text={t("include_note.button_include")} keyboardShortcut="Enter" />}
             show={shown}
@@ -69,7 +70,7 @@ export default function IncludeNoteDialog() {
     )
 }
 
-async function includeNote(notePath: string, textTypeWidget: EditableTextTypeWidget, boxSize: BoxSize) {
+async function includeNote(notePath: string, editorApi: CKEditorApi, boxSize: BoxSize) {
     const noteId = tree.getNoteIdFromUrl(notePath);
     if (!noteId) {
         return;
@@ -79,8 +80,8 @@ async function includeNote(notePath: string, textTypeWidget: EditableTextTypeWid
     if (["image", "canvas", "mermaid"].includes(note?.type ?? "")) {
         // there's no benefit to use insert note functionlity for images,
         // so we'll just add an IMG tag
-        textTypeWidget.addImage(noteId);
+        editorApi.addImage(noteId);
     } else {
-        textTypeWidget.addIncludeNote(noteId, boxSize);
+        editorApi.addIncludeNote(noteId, boxSize);
     }
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/dialogs/markdown_import.tsx b/apps/client/src/widgets/dialogs/markdown_import.tsx
index 43b20d378..93f14f27b 100644
--- a/apps/client/src/widgets/dialogs/markdown_import.tsx
+++ b/apps/client/src/widgets/dialogs/markdown_import.tsx
@@ -1,5 +1,4 @@
-import { useCallback, useRef, useState } from "preact/hooks";
-import appContext from "../../components/app_context";
+import { useRef, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
 import server from "../../services/server";
 import toast from "../../services/toast";
@@ -7,7 +6,11 @@ import utils from "../../services/utils";
 import Modal from "../react/Modal";
 import Button from "../react/Button";
 import { useTriliumEvent } from "../react/hooks";
-import EditableTextTypeWidget from "../type_widgets/editable_text";
+import { CKEditorApi } from "../type_widgets/text/CKEditorWithWatchdog";
+
+export interface MarkdownImportOpts {
+    editorApi: CKEditorApi;
+}
 
 interface RenderMarkdownResponse {
     htmlContent: string;
@@ -15,18 +18,18 @@ interface RenderMarkdownResponse {
 
 export default function MarkdownImportDialog() {
     const markdownImportTextArea = useRef<HTMLTextAreaElement>(null);
-    const [textTypeWidget, setTextTypeWidget] = useState<EditableTextTypeWidget>();
+    const editorApiRef = useRef<CKEditorApi>(null);
     const [ text, setText ] = useState("");
     const [ shown, setShown ] = useState(false);
 
-    useTriliumEvent("showPasteMarkdownDialog", ({ textTypeWidget }) => {
-        setTextTypeWidget(textTypeWidget);
+    useTriliumEvent("showPasteMarkdownDialog", ({ editorApi }) => {
         if (utils.isElectron()) {
             const { clipboard } = utils.dynamicRequire("electron");
             const text = clipboard.readText();
-    
-            convertMarkdownToHtml(text, textTypeWidget);
+
+            convertMarkdownToHtml(text, editorApi);
         } else {
+            editorApiRef.current = editorApi;
             setShown(true);
         }
     });
@@ -37,8 +40,8 @@ export default function MarkdownImportDialog() {
             footer={<Button className="markdown-import-button" text={t("markdown_import.import_button")} onClick={() => setShown(false)} keyboardShortcut="Ctrl+Enter" />}
             onShown={() => markdownImportTextArea.current?.focus()}
             onHidden={async () => {
-                if (textTypeWidget) {
-                    await convertMarkdownToHtml(text, textTypeWidget);
+                if (editorApiRef.current) {
+                    await convertMarkdownToHtml(text, editorApiRef.current);
                 }
                 setShown(false);
                 setText("");
@@ -59,10 +62,8 @@ export default function MarkdownImportDialog() {
     )
 }
 
-async function convertMarkdownToHtml(markdownContent: string, textTypeWidget: EditableTextTypeWidget) {
+async function convertMarkdownToHtml(markdownContent: string, textTypeWidget: CKEditorApi) {
     const { htmlContent } = await server.post<RenderMarkdownResponse>("other/render-markdown", { markdownContent });
-
-    await textTypeWidget.addHtmlToEditor(htmlContent);
-    
+    textTypeWidget.addHtmlToEditor(htmlContent);
     toast.showMessage(t("markdown_import.import_success"));
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/dialogs/popup_editor.ts b/apps/client/src/widgets/dialogs/popup_editor.ts
index a823740cd..63462f082 100644
--- a/apps/client/src/widgets/dialogs/popup_editor.ts
+++ b/apps/client/src/widgets/dialogs/popup_editor.ts
@@ -1,9 +1,8 @@
 import type { EventNames, EventData } from "../../components/app_context.js";
 import NoteContext from "../../components/note_context.js";
 import { openDialog } from "../../services/dialog.js";
-import BasicWidget from "../basic_widget.js";
+import BasicWidget, { ReactWrappedWidget } from "../basic_widget.js";
 import Container from "../containers/container.js";
-import TypeWidget from "../type_widgets/type_widget.js";
 
 const TPL = /*html*/`\
 <div class="popup-editor-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -149,7 +148,7 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
         $dialog.on("hidden.bs.modal", () => {
             const $typeWidgetEl = $dialog.find(".note-detail-printable");
             if ($typeWidgetEl.length) {
-                const typeWidget = glob.getComponentByEl($typeWidgetEl[0]) as TypeWidget;
+                const typeWidget = glob.getComponentByEl($typeWidgetEl[0]) as ReactWrappedWidget;
                 typeWidget.cleanup();
             }
 
diff --git a/apps/client/src/widgets/note_detail.ts b/apps/client/src/widgets/note_detail.ts
deleted file mode 100644
index afb1c2475..000000000
--- a/apps/client/src/widgets/note_detail.ts
+++ /dev/null
@@ -1,464 +0,0 @@
-import { t } from "../services/i18n.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import protectedSessionHolder from "../services/protected_session_holder.js";
-import SpacedUpdate from "../services/spaced_update.js";
-import server from "../services/server.js";
-import appContext, { type CommandListenerData, type EventData } from "../components/app_context.js";
-import keyboardActionsService from "../services/keyboard_actions.js";
-import noteCreateService from "../services/note_create.js";
-import attributeService from "../services/attributes.js";
-
-import EmptyTypeWidget from "./type_widgets/empty.js";
-import EditableTextTypeWidget from "./type_widgets/editable_text.js";
-import EditableCodeTypeWidget from "./type_widgets/editable_code.js";
-import FileTypeWidget from "./type_widgets/file.js";
-import ImageTypeWidget from "./type_widgets/image.js";
-import RenderTypeWidget from "./type_widgets/render.js";
-import RelationMapTypeWidget from "./type_widgets/relation_map.js";
-import CanvasTypeWidget from "./type_widgets/canvas.js";
-import ProtectedSessionTypeWidget from "./type_widgets/protected_session.js";
-import BookTypeWidget from "./type_widgets/book.js";
-import ReadOnlyTextTypeWidget from "./type_widgets/read_only_text.js";
-import ReadOnlyCodeTypeWidget from "./type_widgets/read_only_code.js";
-import NoneTypeWidget from "./type_widgets/none.js";
-import NoteMapTypeWidget from "./type_widgets/note_map.js";
-import WebViewTypeWidget from "./type_widgets/web_view.js";
-import DocTypeWidget from "./type_widgets/doc.js";
-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 utils, { isElectron } from "../services/utils.js";
-import type { NoteType } from "../entities/fnote.js";
-import type TypeWidget from "./type_widgets/type_widget.js";
-import { MermaidTypeWidget } from "./type_widgets/mermaid.js";
-import AiChatTypeWidget from "./type_widgets/ai_chat.js";
-import toast from "../services/toast.js";
-
-const TPL = /*html*/`
-<div class="note-detail">
-    <style>
-    .note-detail {
-        max-width: var(--max-content-width); /* Inherited from .note-split */
-        font-family: var(--detail-font-family);
-        font-size: var(--detail-font-size);
-    }
-
-    body.prefers-centered-content .note-detail {
-        /* Horizontally center the widget in its parent when the "Keep content centered" option is on */
-        margin-inline: auto;
-    }
-    </style>
-</div>
-`;
-
-const typeWidgetClasses = {
-    empty: EmptyTypeWidget,
-    editableText: EditableTextTypeWidget,
-    readOnlyText: ReadOnlyTextTypeWidget,
-    editableCode: EditableCodeTypeWidget,
-    readOnlyCode: ReadOnlyCodeTypeWidget,
-    file: FileTypeWidget,
-    image: ImageTypeWidget,
-    search: NoneTypeWidget,
-    render: RenderTypeWidget,
-    relationMap: RelationMapTypeWidget,
-    canvas: CanvasTypeWidget,
-    protectedSession: ProtectedSessionTypeWidget,
-    book: BookTypeWidget,
-    noteMap: NoteMapTypeWidget,
-    webView: WebViewTypeWidget,
-    doc: DocTypeWidget,
-    contentWidget: ContentWidgetTypeWidget,
-    attachmentDetail: AttachmentDetailTypeWidget,
-    attachmentList: AttachmentListTypeWidget,
-    mindMap: MindMapWidget,
-    aiChat: AiChatTypeWidget,
-
-    // Split type editors
-    mermaid: MermaidTypeWidget
-};
-
-/**
- * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
- * for protected session or attachment information.
- */
-type ExtendedNoteType =
-    | Exclude<NoteType, "launcher" | "text" | "code">
-    | "empty"
-    | "readOnlyCode"
-    | "readOnlyText"
-    | "editableText"
-    | "editableCode"
-    | "attachmentDetail"
-    | "attachmentList"
-    | "protectedSession"
-    | "aiChat";
-
-export default class NoteDetailWidget extends NoteContextAwareWidget {
-
-    private typeWidgets: Record<string, TypeWidget>;
-    private spacedUpdate: SpacedUpdate;
-    private type?: ExtendedNoteType;
-    private mime?: string;
-
-    constructor() {
-        super();
-
-        this.typeWidgets = {};
-
-        this.spacedUpdate = new SpacedUpdate(async () => {
-            if (!this.noteContext) {
-                return;
-            }
-
-            const { note } = this.noteContext;
-            if (!note) {
-                return;
-            }
-
-            const { noteId } = note;
-
-            const data = await this.getTypeWidget().getData();
-
-            // for read only notes
-            if (data === undefined) {
-                return;
-            }
-
-            protectedSessionHolder.touchProtectedSessionIfNecessary(note);
-
-            await server.put(`notes/${noteId}/data`, data, this.componentId);
-
-            this.getTypeWidget().dataSaved();
-        });
-
-        appContext.addBeforeUnloadListener(this);
-    }
-
-    isEnabled() {
-        return true;
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        if (utils.isElectron()) {
-            const { ipcRenderer } = utils.dynamicRequire("electron");
-            ipcRenderer.on("print-done", () => {
-                toast.closePersistent("printing");
-            });
-        }
-    }
-
-    async refresh() {
-        this.type = await this.getWidgetType();
-        this.mime = this.note?.mime;
-
-        if (!(this.type in this.typeWidgets)) {
-            const clazz = typeWidgetClasses[this.type];
-
-            if (!clazz) {
-                throw new Error(`Cannot find type widget for type '${this.type}'`);
-            }
-
-            const typeWidget = (this.typeWidgets[this.type] = new clazz());
-            typeWidget.spacedUpdate = this.spacedUpdate;
-            typeWidget.setParent(this);
-
-            if (this.noteContext) {
-                typeWidget.setNoteContextEvent({ noteContext: this.noteContext });
-            }
-            const $renderedWidget = typeWidget.render();
-            keyboardActionsService.updateDisplayedShortcuts($renderedWidget);
-
-            this.$widget.append($renderedWidget);
-
-            if (this.noteContext) {
-                await typeWidget.handleEvent("setNoteContext", { noteContext: this.noteContext });
-            }
-
-            // this is happening in update(), so note has been already set, and we need to reflect this
-            if (this.noteContext) {
-                await typeWidget.handleEvent("noteSwitched", {
-                    noteContext: this.noteContext,
-                    notePath: this.noteContext.notePath
-                });
-            }
-
-            this.child(typeWidget);
-        }
-
-        this.checkFullHeight();
-
-        if (utils.isMobile()) {
-            const hasFixedTree = this.noteContext?.hoistedNoteId === "_lbMobileRoot";
-            $("body").toggleClass("force-fixed-tree", hasFixedTree);
-        }
-    }
-
-    /**
-     * sets full height of container that contains note content for a subset of note-types
-     */
-    checkFullHeight() {
-        // https://github.com/zadam/trilium/issues/2522
-        const isBackendNote = this.noteContext?.noteId === "_backendLog";
-        const isSqlNote = this.mime === "text/x-sqlite;schema=trilium";
-        const isFullHeightNoteType = ["canvas", "webView", "noteMap", "mindMap", "mermaid", "file", "aiChat"].includes(this.type ?? "");
-        const isFullHeight = (!this.noteContext?.hasNoteList() && isFullHeightNoteType && !isSqlNote)
-            || this.noteContext?.viewScope?.viewMode === "attachments"
-            || isBackendNote;
-
-        this.$widget.toggleClass("full-height", isFullHeight);
-    }
-
-    getTypeWidget() {
-        if (!this.type || !this.typeWidgets[this.type]) {
-            throw new Error(t(`note_detail.could_not_find_typewidget`, { type: this.type }));
-        }
-
-        return this.typeWidgets[this.type];
-    }
-
-    async getWidgetType(): Promise<ExtendedNoteType> {
-        const note = this.note;
-        if (!note) {
-            return "empty";
-        }
-
-        const type = note.type;
-        let resultingType: ExtendedNoteType;
-        const viewScope = this.noteContext?.viewScope;
-
-        if (viewScope?.viewMode === "source") {
-            resultingType = "readOnlyCode";
-        } else if (viewScope && viewScope.viewMode === "attachments") {
-            resultingType = viewScope.attachmentId ? "attachmentDetail" : "attachmentList";
-        } else if (type === "text" && (await this.noteContext?.isReadOnly())) {
-            resultingType = "readOnlyText";
-        } else if ((type === "code" || type === "mermaid") && (await this.noteContext?.isReadOnly())) {
-            resultingType = "readOnlyCode";
-        } else if (type === "text") {
-            resultingType = "editableText";
-        } else if (type === "code") {
-            resultingType = "editableCode";
-        } else if (type === "launcher") {
-            resultingType = "doc";
-        } else {
-            resultingType = type;
-        }
-
-        if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
-            resultingType = "protectedSession";
-        }
-
-        return resultingType;
-    }
-
-    async focusOnDetailEvent({ ntxId }: EventData<"focusOnDetail">) {
-        if (this.noteContext?.ntxId !== ntxId) {
-            return;
-        }
-
-        await this.refresh();
-        const widget = this.getTypeWidget();
-        await widget.initialized;
-        widget.focus();
-    }
-
-    async scrollToEndEvent({ ntxId }: EventData<"scrollToEnd">) {
-        if (this.noteContext?.ntxId !== ntxId) {
-            return;
-        }
-
-        await this.refresh();
-        const widget = this.getTypeWidget();
-        await widget.initialized;
-
-        if (widget.scrollToEnd) {
-            widget.scrollToEnd();
-        }
-    }
-
-    async beforeNoteSwitchEvent({ noteContext }: EventData<"beforeNoteSwitch">) {
-        if (this.isNoteContext(noteContext.ntxId)) {
-            await this.spacedUpdate.updateNowIfNecessary();
-        }
-    }
-
-    async beforeNoteContextRemoveEvent({ ntxIds }: EventData<"beforeNoteContextRemove">) {
-        if (this.isNoteContext(ntxIds)) {
-            await this.spacedUpdate.updateNowIfNecessary();
-        }
-    }
-
-    async runActiveNoteCommand(params: CommandListenerData<"runActiveNote">) {
-        if (this.isNoteContext(params.ntxId)) {
-            // make sure that script is saved before running it #4028
-            await this.spacedUpdate.updateNowIfNecessary();
-        }
-
-        return await this.parent?.triggerCommand("runActiveNote", params);
-    }
-
-    async printActiveNoteEvent() {
-        if (!this.noteContext?.isActive()) {
-            return;
-        }
-
-        toast.showPersistent({
-            icon: "bx bx-loader-circle bx-spin",
-            message: t("note_detail.printing"),
-            id: "printing"
-        });
-
-        if (isElectron()) {
-            const { ipcRenderer } = utils.dynamicRequire("electron");
-            ipcRenderer.send("print-note", {
-                notePath: this.notePath
-            });
-        } else {
-            const iframe = document.createElement('iframe');
-            iframe.src = `?print#${this.notePath}`;
-            iframe.className = "print-iframe";
-            document.body.appendChild(iframe);
-            iframe.onload = () => {
-                if (!iframe.contentWindow) {
-                    toast.closePersistent("printing");
-                    document.body.removeChild(iframe);
-                    return;
-                }
-
-                iframe.contentWindow.addEventListener("note-ready", () => {
-                    toast.closePersistent("printing");
-                    iframe.contentWindow?.print();
-                    document.body.removeChild(iframe);
-                });
-            };
-        }
-    }
-
-    async exportAsPdfEvent() {
-        if (!this.noteContext?.isActive() || !this.note || !this.notePath) {
-            return;
-        }
-
-        toast.showPersistent({
-            icon: "bx bx-loader-circle bx-spin",
-            message: t("note_detail.printing_pdf"),
-            id: "printing"
-        });
-
-        const { ipcRenderer } = utils.dynamicRequire("electron");
-        ipcRenderer.send("export-as-pdf", {
-            title: this.note.title,
-            notePath: this.notePath,
-            pageSize: this.note.getAttributeValue("label", "printPageSize") ?? "Letter",
-            landscape: this.note.hasAttribute("label", "printLandscape")
-        });
-    }
-
-    hoistedNoteChangedEvent({ ntxId }: EventData<"hoistedNoteChanged">) {
-        if (this.isNoteContext(ntxId)) {
-            this.refresh();
-        }
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        // we're detecting note type change on the note_detail level, but triggering the noteTypeMimeChanged
-        // globally, so it gets also to e.g. ribbon components. But this means that the event can be generated multiple
-        // times if the same note is open in several tabs.
-
-        if (this.noteId && loadResults.isNoteContentReloaded(this.noteId, this.componentId)) {
-            // probably incorrect event
-            // calling this.refresh() is not enough since the event needs to be propagated to children as well
-            // FIXME: create a separate event to force hierarchical refresh
-
-            // this uses handleEvent to make sure that the ordinary content updates are propagated only in the subtree
-            // to avoid the problem in #3365
-            this.handleEvent("noteTypeMimeChanged", { noteId: this.noteId });
-        } else if (this.noteId && loadResults.isNoteReloaded(this.noteId, this.componentId) && (this.type !== (await this.getWidgetType()) || this.mime !== this.note?.mime)) {
-            // this needs to have a triggerEvent so that e.g., note type (not in the component subtree) is updated
-            this.triggerEvent("noteTypeMimeChanged", { noteId: this.noteId });
-        } else {
-            const attrs = loadResults.getAttributeRows();
-
-            const label = attrs.find(
-                (attr) =>
-                    attr.type === "label" &&
-                    ["readOnly", "autoReadOnlyDisabled", "cssClass", "displayRelations", "hideRelations"].includes(attr.name ?? "") &&
-                    attributeService.isAffecting(attr, this.note)
-            );
-
-            const relation = attrs.find((attr) => attr.type === "relation" && ["template", "inherit", "renderNote"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.note));
-
-            if (this.noteId && (label || relation)) {
-                // probably incorrect event
-                // calling this.refresh() is not enough since the event needs to be propagated to children as well
-                this.triggerEvent("noteTypeMimeChanged", { noteId: this.noteId });
-            }
-        }
-    }
-
-    beforeUnloadEvent() {
-        return this.spacedUpdate.isAllSavedAndTriggerUpdate();
-    }
-
-    readOnlyTemporarilyDisabledEvent({ noteContext }: EventData<"readOnlyTemporarilyDisabled">) {
-        if (this.isNoteContext(noteContext.ntxId)) {
-            this.refresh();
-        }
-    }
-
-    async executeInActiveNoteDetailWidgetEvent({ callback }: EventData<"executeInActiveNoteDetailWidget">) {
-        if (!this.isActiveNoteContext()) {
-            return;
-        }
-
-        await this.initialized;
-
-        callback(this);
-    }
-
-    async cutIntoNoteCommand() {
-        const note = appContext.tabManager.getActiveContextNote();
-
-        if (!note) {
-            return;
-        }
-
-        // without await as this otherwise causes deadlock through component mutex
-        const parentNotePath = appContext.tabManager.getActiveContextNotePath();
-        if (this.noteContext && parentNotePath) {
-            noteCreateService.createNote(parentNotePath, {
-                isProtected: note.isProtected,
-                saveSelection: true,
-                textEditor: await this.noteContext.getTextEditor()
-            });
-        }
-    }
-
-    // used by cutToNote in CKEditor build
-    async saveNoteDetailNowCommand() {
-        await this.spacedUpdate.updateNowIfNecessary();
-    }
-
-    renderActiveNoteEvent() {
-        if (this.noteContext?.isActive()) {
-            this.refresh();
-        }
-    }
-
-    async executeWithTypeWidgetEvent({ resolve, ntxId }: EventData<"executeWithTypeWidget">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        await this.initialized;
-
-        await this.getWidgetType();
-
-        resolve(this.getTypeWidget());
-    }
-}
diff --git a/apps/client/src/widgets/note_map.ts b/apps/client/src/widgets/note_map.ts
deleted file mode 100644
index ef36d7b7e..000000000
--- a/apps/client/src/widgets/note_map.ts
+++ /dev/null
@@ -1,671 +0,0 @@
-import server from "../services/server.js";
-import attributeService from "../services/attributes.js";
-import hoistedNoteService from "../services/hoisted_note.js";
-import appContext, { type EventData } from "../components/app_context.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import linkContextMenuService from "../menus/link_context_menu.js";
-import utils from "../services/utils.js";
-import { t } from "../services/i18n.js";
-import type ForceGraph from "force-graph";
-import type { GraphData, LinkObject, NodeObject } from "force-graph";
-import type FNote from "../entities/fnote.js";
-
-const esc = utils.escapeHtml;
-
-const TPL = /*html*/`<div class="note-map-widget">
-    <style>
-        .note-detail-note-map {
-            height: 100%;
-            overflow: hidden;
-        }
-
-        /* Style Ui Element to Drag Nodes */
-        .fixnodes-type-switcher {
-            display: flex;
-            align-items: center;
-            z-index: 10; /* should be below dropdown (note actions) */
-            border-radius: .2rem;
-        }
-
-        .fixnodes-type-switcher button.toggled {
-            background: var(--active-item-background-color);
-            color: var(--active-item-text-color);
-        }
-
-        /* Start of styling the slider */
-        .fixnodes-type-switcher input[type="range"] {
-
-            /* removing default appearance */
-            -webkit-appearance: none;
-            appearance: none;
-            margin-inline-start: 15px;
-            width: 150px;
-        }
-
-        /* Changing slider tracker */
-        .fixnodes-type-switcher input[type="range"]::-webkit-slider-runnable-track {
-            height: 4px;
-            background-color: var(--main-border-color);
-            border-radius: 4px;
-        }
-
-        /* Changing Slider Thumb */
-        .fixnodes-type-switcher input[type="range"]::-webkit-slider-thumb {
-            /* removing default appearance */
-            -webkit-appearance: none;
-            appearance: none;
-            /* creating a custom design */
-            height: 15px;
-            width: 15px;
-            margin-top:-5px;
-            background-color: var(--accented-background-color);
-            border: 1px solid var(--main-text-color);
-            border-radius: 50%;
-        }
-
-        .fixnodes-type-switcher input[type="range"]::-moz-range-track {
-            background-color: var(--main-border-color);
-            border-radius: 4px;
-        }
-
-        .fixnodes-type-switcher input[type="range"]::-moz-range-thumb {
-            background-color: var(--accented-background-color);
-            border-color: var(--main-text-color);
-            height: 10px;
-            width: 10px;
-        }
-
-        /* End of styling the slider */
-
-    </style>
-
-    <div class="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group">
-      <button type="button" class="btn bx bx-network-chart tn-tool-button" title="${t("note-map.button-link-map")}" data-type="link"></button>
-      <button type="button" class="btn bx bx-sitemap tn-tool-button" title="${t("note-map.button-tree-map")}" data-type="tree"></button>
-    </div>
-
-    <! UI for dragging Notes and link force >
-
-    <div class="btn-group-sm fixnodes-type-switcher content-floating-buttons bottom-left" role="group">
-      <button type="button" data-toggle="button" class="btn bx bx-lock-alt tn-tool-button" title="${t("note_map.fix-nodes")}" data-type="moveable"></button>
-      <input type="range" class="slider" min="1" title="${t("note_map.link-distance")}" max="100" value="40" >
-    </div>
-
-    <div class="style-resolver"></div>
-
-    <div class="note-map-container"></div>
-</div>`;
-
-type WidgetMode = "type" | "ribbon";
-type MapType = "tree" | "link";
-type Data = GraphData<NodeObject, LinkObject<NodeObject>>;
-
-interface Node extends NodeObject {
-    id: string;
-    name: string;
-    type: string;
-    color: string;
-}
-
-interface Link extends LinkObject<NodeObject> {
-    id: string;
-    name: string;
-
-    x: number;
-    y: number;
-    source: Node;
-    target: Node;
-}
-
-interface NotesAndRelationsData {
-    nodes: Node[];
-    links: {
-        id: string;
-        source: string;
-        target: string;
-        name: string;
-    }[];
-}
-
-// Replace
-interface ResponseLink {
-    key: string;
-    sourceNoteId: string;
-    targetNoteId: string;
-    name: string;
-}
-
-interface PostNotesMapResponse {
-    notes: string[];
-    links: ResponseLink[];
-    noteIdToDescendantCountMap: Record<string, number>;
-}
-
-interface GroupedLink {
-    id: string;
-    sourceNoteId: string;
-    targetNoteId: string;
-    names: string[];
-}
-
-interface CssData {
-    fontFamily: string;
-    textColor: string;
-    mutedTextColor: string;
-}
-
-export default class NoteMapWidget extends NoteContextAwareWidget {
-
-    private fixNodes: boolean;
-    private widgetMode: WidgetMode;
-    private mapType?: MapType;
-    private cssData!: CssData;
-
-    private themeStyle!: string;
-    private $container!: JQuery<HTMLElement>;
-    private $styleResolver!: JQuery<HTMLElement>;
-    private $fixNodesButton!: JQuery<HTMLElement>;
-    graph!: ForceGraph;
-    private noteIdToSizeMap!: Record<string, number>;
-    private zoomLevel!: number;
-    private nodes!: Node[];
-
-    constructor(widgetMode: WidgetMode) {
-        super();
-        this.fixNodes = false; // needed to save the status of the UI element. Is set later in the code
-        this.widgetMode = widgetMode; // 'type' or 'ribbon'
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        const documentStyle = window.getComputedStyle(document.documentElement);
-        this.themeStyle = documentStyle.getPropertyValue("--theme-style")?.trim();
-
-        this.$container = this.$widget.find(".note-map-container");
-        this.$styleResolver = this.$widget.find(".style-resolver");
-        this.$fixNodesButton = this.$widget.find(".fixnodes-type-switcher > button");
-
-        new ResizeObserver(() => this.setDimensions()).observe(this.$container[0]);
-
-        this.$widget.find(".map-type-switcher button").on("click", async (e) => {
-            const type = $(e.target).closest("button").attr("data-type");
-
-            await attributeService.setLabel(this.noteId ?? "", "mapType", type);
-        });
-
-        // Reading the status of the Drag nodes Ui element. Changing it´s color when activated.
-        // Reading Force value of the link distance.
-        this.$fixNodesButton.on("click", async (event) => {
-            this.fixNodes = !this.fixNodes;
-            this.$fixNodesButton.toggleClass("toggled", this.fixNodes);
-        });
-
-        super.doRender();
-    }
-
-    setDimensions() {
-        if (!this.graph) {
-            // no graph has been even rendered
-            return;
-        }
-
-        const $parent = this.$widget.parent();
-
-        this.graph
-            .height($parent.height() || 0)
-            .width($parent.width() || 0);
-    }
-
-    async refreshWithNote(note: FNote) {
-        this.$widget.show();
-
-        this.cssData = {
-            fontFamily: this.$container.css("font-family"),
-            textColor: this.rgb2hex(this.$container.css("color")),
-            mutedTextColor: this.rgb2hex(this.$styleResolver.css("color"))
-        };
-
-        this.mapType = note.getLabelValue("mapType") === "tree" ? "tree" : "link";
-
-        //variables for the hover effekt. We have to save the neighbours of a hovered node in a set. Also we need to save the links as well as the hovered node itself
-
-        let hoverNode: NodeObject | null = null;
-        const highlightLinks = new Set();
-        const neighbours = new Set();
-
-        const ForceGraph = (await import("force-graph")).default;
-        this.graph = new ForceGraph(this.$container[0])
-            .width(this.$container.width() || 0)
-            .height(this.$container.height() || 0)
-            .onZoom((zoom) => this.setZoomLevel(zoom.k))
-            .d3AlphaDecay(0.01)
-            .d3VelocityDecay(0.08)
-
-            //Code to fixate nodes when dragged
-            .onNodeDragEnd((node) => {
-                if (this.fixNodes) {
-                    node.fx = node.x;
-                    node.fy = node.y;
-                } else {
-                    node.fx = undefined;
-                    node.fy = undefined;
-                }
-            })
-            //check if hovered and set the hovernode variable, saving the hovered node object into it. Clear links variable everytime you hover. Without clearing links will stay highlighted
-            .onNodeHover((node) => {
-                hoverNode = node || null;
-                highlightLinks.clear();
-            })
-
-            // set link width to immitate a highlight effekt. Checking the condition if any links are saved in the previous defined set highlightlinks
-            .linkWidth((link) => (highlightLinks.has(link) ? 3 : 0.4))
-            .linkColor((link) => (highlightLinks.has(link) ? "white" : this.cssData.mutedTextColor))
-            .linkDirectionalArrowLength(4)
-            .linkDirectionalArrowRelPos(0.95)
-
-            // main code for highlighting hovered nodes and neighbours. here we "style" the nodes. the nodes are rendered several hundred times per second.
-            .nodeCanvasObject((_node, ctx) => {
-                const node = _node as Node;
-                if (hoverNode == node) {
-                    //paint only hovered node
-                    this.paintNode(node, "#661822", ctx);
-                    neighbours.clear(); //clearing neighbours or the effect would be maintained after hovering is over
-                    for (const _link of data.links) {
-                        const link = _link as unknown as Link;
-                        //check if node is part of a link in the canvas, if so add it´s neighbours and related links to the previous defined variables to paint the nodes
-                        if (link.source.id == node.id || link.target.id == node.id) {
-                            neighbours.add(link.source);
-                            neighbours.add(link.target);
-                            highlightLinks.add(link);
-                            neighbours.delete(node);
-                        }
-                    }
-                } else if (neighbours.has(node) && hoverNode != null) {
-                    //paint neighbours
-                    this.paintNode(node, "#9d6363", ctx);
-                } else {
-                    this.paintNode(node, this.getColorForNode(node), ctx); //paint rest of nodes in canvas
-                }
-            })
-
-            .nodePointerAreaPaint((node, _, ctx) => this.paintNode(node as Node, this.getColorForNode(node as Node), ctx))
-            .nodePointerAreaPaint((node, color, ctx) => {
-                if (!node.id) {
-                    return;
-                }
-
-                ctx.fillStyle = color;
-                ctx.beginPath();
-                if (node.x && node.y) {
-                    ctx.arc(node.x, node.y, this.noteIdToSizeMap[node.id], 0, 2 * Math.PI, false);
-                }
-                ctx.fill();
-            })
-            .nodeLabel((node) => esc((node as Node).name))
-            .maxZoom(7)
-            .warmupTicks(30)
-            .onNodeClick((node) => {
-                if (node.id) {
-                    appContext.tabManager.getActiveContext()?.setNote((node as Node).id);
-                }
-            })
-            .onNodeRightClick((node, e) => {
-                if (node.id) {
-                    linkContextMenuService.openContextMenu((node as Node).id, e);
-                }
-            });
-
-        if (this.mapType === "link") {
-            this.graph
-                .linkLabel((l) => `${esc((l as Link).source.name)} - <strong>${esc((l as Link).name)}</strong> - ${esc((l as Link).target.name)}`)
-                .linkCanvasObject((link, ctx) => this.paintLink(link as Link, ctx))
-                .linkCanvasObjectMode(() => "after");
-        }
-
-        const mapRootNoteId = this.getMapRootNoteId();
-
-        const labelValues = (name: string) => this.note?.getLabels(name).map(l => l.value) ?? [];
-
-        const excludeRelations = labelValues("mapExcludeRelation");
-        const includeRelations = labelValues("mapIncludeRelation");
-
-        const data = await this.loadNotesAndRelations(mapRootNoteId, excludeRelations, includeRelations);
-
-        const nodeLinkRatio = data.nodes.length / data.links.length;
-        const magnifiedRatio = Math.pow(nodeLinkRatio, 1.5);
-        const charge = -20 / magnifiedRatio;
-        const boundedCharge = Math.min(-3, charge);
-        let distancevalue = 40; // default value for the link force of the nodes
-
-        this.$widget.find(".fixnodes-type-switcher input").on("change", async (e) => {
-            distancevalue = parseInt(e.target.closest("input")?.value ?? "0");
-            this.graph.d3Force("link")?.distance(distancevalue);
-
-            this.renderData(data);
-        });
-
-        this.graph.d3Force("center")?.strength(0.2);
-        this.graph.d3Force("charge")?.strength(boundedCharge);
-        this.graph.d3Force("charge")?.distanceMax(1000);
-
-        this.renderData(data);
-    }
-
-    getMapRootNoteId(): string {
-        if (this.noteId && this.widgetMode === "ribbon") {
-            return this.noteId;
-        }
-
-        let mapRootNoteId = this.note?.getLabelValue("mapRootNoteId");
-
-        if (mapRootNoteId === "hoisted") {
-            mapRootNoteId = hoistedNoteService.getHoistedNoteId();
-        } else if (!mapRootNoteId) {
-            mapRootNoteId = appContext.tabManager.getActiveContext()?.parentNoteId;
-        }
-
-        return mapRootNoteId ?? "";
-    }
-
-    getColorForNode(node: Node) {
-        if (node.color) {
-            return node.color;
-        } else if (this.widgetMode === "ribbon" && node.id === this.noteId) {
-            return "red"; // subtree root mark as red
-        } else {
-            return this.generateColorFromString(node.type);
-        }
-    }
-
-    generateColorFromString(str: string) {
-        if (this.themeStyle === "dark") {
-            str = `0${str}`; // magic lightning modifier
-        }
-
-        let hash = 0;
-        for (let i = 0; i < str.length; i++) {
-            hash = str.charCodeAt(i) + ((hash << 5) - hash);
-        }
-
-        let color = "#";
-        for (let i = 0; i < 3; i++) {
-            const value = (hash >> (i * 8)) & 0xff;
-
-            color += `00${value.toString(16)}`.substr(-2);
-        }
-        return color;
-    }
-
-    rgb2hex(rgb: string) {
-        return `#${(rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) || [])
-            .slice(1)
-            .map((n) => parseInt(n, 10).toString(16).padStart(2, "0"))
-            .join("")}`;
-    }
-
-    setZoomLevel(level: number) {
-        this.zoomLevel = level;
-    }
-
-    paintNode(node: Node, color: string, ctx: CanvasRenderingContext2D) {
-        const { x, y } = node;
-        if (!x || !y) {
-            return;
-        }
-        const size = this.noteIdToSizeMap[node.id];
-
-        ctx.fillStyle = color;
-        ctx.beginPath();
-        ctx.arc(x, y, size * 0.8, 0, 2 * Math.PI, false);
-        ctx.fill();
-
-        const toRender = this.zoomLevel > 2 || (this.zoomLevel > 1 && size > 6) || (this.zoomLevel > 0.3 && size > 10);
-
-        if (!toRender) {
-            return;
-        }
-
-        ctx.fillStyle = this.cssData.textColor;
-        ctx.font = `${size}px ${this.cssData.fontFamily}`;
-        ctx.textAlign = "center";
-        ctx.textBaseline = "middle";
-
-        let title = node.name;
-
-        if (title.length > 15) {
-            title = `${title.substr(0, 15)}...`;
-        }
-
-        ctx.fillText(title, x, y + Math.round(size * 1.5));
-    }
-
-    paintLink(link: Link, ctx: CanvasRenderingContext2D) {
-        if (this.zoomLevel < 5) {
-            return;
-        }
-
-        ctx.font = `3px ${this.cssData.fontFamily}`;
-        ctx.textAlign = "center";
-        ctx.textBaseline = "middle";
-        ctx.fillStyle = this.cssData.mutedTextColor;
-
-        const { source, target } = link;
-        if (typeof source !== "object" || typeof target !== "object") {
-            return;
-        }
-
-        if (source.x && source.y && target.x && target.y) {
-            const x = (source.x + target.x) / 2;
-            const y = (source.y + target.y) / 2;
-            ctx.save();
-            ctx.translate(x, y);
-
-            const deltaY = source.y - target.y;
-            const deltaX = source.x - target.x;
-
-            let angle = Math.atan2(deltaY, deltaX);
-            let moveY = 2;
-
-            if (angle < -Math.PI / 2 || angle > Math.PI / 2) {
-                angle += Math.PI;
-                moveY = -2;
-            }
-
-            ctx.rotate(angle);
-            ctx.fillText(link.name, 0, moveY);
-        }
-
-        ctx.restore();
-    }
-
-    async loadNotesAndRelations(mapRootNoteId: string, excludeRelations: string[], includeRelations: string[]): Promise<NotesAndRelationsData> {
-        const resp = await server.post<PostNotesMapResponse>(`note-map/${mapRootNoteId}/${this.mapType}`, {
-            excludeRelations, includeRelations
-        });
-
-        this.calculateNodeSizes(resp);
-
-        const links = this.getGroupedLinks(resp.links);
-
-        this.nodes = resp.notes.map(([noteId, title, type, color]) => ({
-            id: noteId,
-            name: title,
-            type: type,
-            color: color
-        }));
-
-        return {
-            nodes: this.nodes,
-            links: links.map((link) => ({
-                id: `${link.sourceNoteId}-${link.targetNoteId}`,
-                source: link.sourceNoteId,
-                target: link.targetNoteId,
-                name: link.names.join(", ")
-            }))
-        };
-    }
-
-    getGroupedLinks(links: ResponseLink[]): GroupedLink[] {
-        const linksGroupedBySourceTarget: Record<string, GroupedLink> = {};
-
-        for (const link of links) {
-            const key = `${link.sourceNoteId}-${link.targetNoteId}`;
-
-            if (key in linksGroupedBySourceTarget) {
-                if (!linksGroupedBySourceTarget[key].names.includes(link.name)) {
-                    linksGroupedBySourceTarget[key].names.push(link.name);
-                }
-            } else {
-                linksGroupedBySourceTarget[key] = {
-                    id: key,
-                    sourceNoteId: link.sourceNoteId,
-                    targetNoteId: link.targetNoteId,
-                    names: [link.name]
-                };
-            }
-        }
-
-        return Object.values(linksGroupedBySourceTarget);
-    }
-
-    calculateNodeSizes(resp: PostNotesMapResponse) {
-        this.noteIdToSizeMap = {};
-
-        if (this.mapType === "tree") {
-            const { noteIdToDescendantCountMap } = resp;
-
-            for (const noteId in noteIdToDescendantCountMap) {
-                this.noteIdToSizeMap[noteId] = 4;
-
-                const count = noteIdToDescendantCountMap[noteId];
-
-                if (count > 0) {
-                    this.noteIdToSizeMap[noteId] += 1 + Math.round(Math.log(count) / Math.log(1.5));
-                }
-            }
-        } else if (this.mapType === "link") {
-            const noteIdToLinkCount: Record<string, number> = {};
-
-            for (const link of resp.links) {
-                noteIdToLinkCount[link.targetNoteId] = 1 + (noteIdToLinkCount[link.targetNoteId] || 0);
-            }
-
-            for (const [noteId] of resp.notes) {
-                this.noteIdToSizeMap[noteId] = 4;
-
-                if (noteId in noteIdToLinkCount) {
-                    this.noteIdToSizeMap[noteId] += Math.min(Math.pow(noteIdToLinkCount[noteId], 0.5), 15);
-                }
-            }
-        }
-    }
-
-    renderData(data: Data) {
-        this.graph.graphData(data);
-
-        if (this.widgetMode === "ribbon" && this.note?.type !== "search") {
-            setTimeout(() => {
-                this.setDimensions();
-
-                const subGraphNoteIds = this.getSubGraphConnectedToCurrentNote(data);
-
-                this.graph.zoomToFit(400, 50, (node) => subGraphNoteIds.has(node.id));
-
-                if (subGraphNoteIds.size < 30) {
-                    this.graph.d3VelocityDecay(0.4);
-                }
-            }, 1000);
-        } else {
-            if (data.nodes.length > 1) {
-                setTimeout(() => {
-                    this.setDimensions();
-
-                    const noteIdsWithLinks = this.getNoteIdsWithLinks(data);
-
-                    if (noteIdsWithLinks.size > 0) {
-                        this.graph.zoomToFit(400, 30, (node) => noteIdsWithLinks.has(node.id ?? ""));
-                    }
-
-                    if (noteIdsWithLinks.size < 30) {
-                        this.graph.d3VelocityDecay(0.4);
-                    }
-                }, 1000);
-            }
-        }
-    }
-
-    getNoteIdsWithLinks(data: Data) {
-        const noteIds = new Set<string | number>();
-
-        for (const link of data.links) {
-            if (typeof link.source === "object" && link.source.id) {
-                noteIds.add(link.source.id);
-            }
-            if (typeof link.target === "object" && link.target.id) {
-                noteIds.add(link.target.id);
-            }
-        }
-
-        return noteIds;
-    }
-
-    getSubGraphConnectedToCurrentNote(data: Data) {
-        function getGroupedLinks(links: LinkObject<NodeObject>[], type: "source" | "target") {
-            const map: Record<string | number, LinkObject<NodeObject>[]> = {};
-
-            for (const link of links) {
-                if (typeof link[type] !== "object") {
-                    continue;
-                }
-
-                const key = link[type].id;
-                if (key) {
-                    map[key] = map[key] || [];
-                    map[key].push(link);
-                }
-            }
-
-            return map;
-        }
-
-        const linksBySource = getGroupedLinks(data.links, "source");
-        const linksByTarget = getGroupedLinks(data.links, "target");
-
-        const subGraphNoteIds = new Set();
-
-        function traverseGraph(noteId?: string | number) {
-            if (!noteId || subGraphNoteIds.has(noteId)) {
-                return;
-            }
-
-            subGraphNoteIds.add(noteId);
-
-            for (const link of linksBySource[noteId] || []) {
-                if (typeof link.target === "object") {
-                    traverseGraph(link.target?.id);
-                }
-            }
-
-            for (const link of linksByTarget[noteId] || []) {
-                if (typeof link.source === "object") {
-                    traverseGraph(link.source?.id);
-                }
-            }
-        }
-
-        traverseGraph(this.noteId);
-        return subGraphNoteIds;
-    }
-
-    cleanup() {
-        this.$container.html("");
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows(this.componentId)
-                .find((attr) => attr.type === "label" && ["mapType", "mapRootNoteId"].includes(attr.name || "") && attributeService.isAffecting(attr, this.note))) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/note_map/NoteMap.css b/apps/client/src/widgets/note_map/NoteMap.css
new file mode 100644
index 000000000..fa49bb39c
--- /dev/null
+++ b/apps/client/src/widgets/note_map/NoteMap.css
@@ -0,0 +1,57 @@
+.note-detail-note-map {
+            height: 100%;
+    overflow: hidden;
+}
+
+/* Style Ui Element to Drag Nodes */
+.fixnodes-type-switcher {
+    display: flex;
+    align-items: center;
+    z-index: 10; /* should be below dropdown (note actions) */
+    border-radius: .2rem;
+}
+
+/* Start of styling the slider */
+.fixnodes-type-switcher input[type="range"] {
+
+    /* removing default appearance */
+    -webkit-appearance: none;
+    appearance: none;
+    margin-inline-start: 15px;
+    width: 150px;
+}
+
+/* Changing slider tracker */
+.fixnodes-type-switcher input[type="range"]::-webkit-slider-runnable-track {
+    height: 4px;
+    background-color: var(--main-border-color);
+    border-radius: 4px;
+}
+
+/* Changing Slider Thumb */
+.fixnodes-type-switcher input[type="range"]::-webkit-slider-thumb {
+    /* removing default appearance */
+    -webkit-appearance: none;
+    appearance: none;
+    /* creating a custom design */
+    height: 15px;
+    width: 15px;
+    margin-top:-5px;
+    background-color: var(--accented-background-color);
+    border: 1px solid var(--main-text-color);
+    border-radius: 50%;
+}
+
+.fixnodes-type-switcher input[type="range"]::-moz-range-track {
+    background-color: var(--main-border-color);
+    border-radius: 4px;
+}
+
+.fixnodes-type-switcher input[type="range"]::-moz-range-thumb {
+    background-color: var(--accented-background-color);
+    border-color: var(--main-text-color);
+    height: 10px;
+    width: 10px;
+}
+
+/* End of styling the slider */
\ No newline at end of file
diff --git a/apps/client/src/widgets/note_map/NoteMap.tsx b/apps/client/src/widgets/note_map/NoteMap.tsx
new file mode 100644
index 000000000..1c503c363
--- /dev/null
+++ b/apps/client/src/widgets/note_map/NoteMap.tsx
@@ -0,0 +1,174 @@
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import "./NoteMap.css";
+import { getThemeStyle, MapType, NoteMapWidgetMode, rgb2hex } from "./utils";
+import { RefObject } from "preact";
+import FNote from "../../entities/fnote";
+import { useElementSize, useNoteLabel } from "../react/hooks";
+import ForceGraph from "force-graph";
+import { loadNotesAndRelations, NoteMapLinkObject, NoteMapNodeObject, NotesAndRelationsData } from "./data";
+import { CssData, setupRendering } from "./rendering";
+import ActionButton from "../react/ActionButton";
+import { t } from "../../services/i18n";
+import link_context_menu from "../../menus/link_context_menu";
+import appContext from "../../components/app_context";
+import Slider from "../react/Slider";
+import hoisted_note from "../../services/hoisted_note";
+
+interface NoteMapProps {
+    note: FNote;
+    widgetMode: NoteMapWidgetMode;
+    parentRef: RefObject<HTMLElement>;
+}
+
+export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const styleResolverRef = useRef<HTMLDivElement>(null);
+    const [ mapTypeRaw, setMapType ] = useNoteLabel(note, "mapType");
+    const [ mapRootIdLabel ] = useNoteLabel(note, "mapRootNoteId");
+    const mapType: MapType = mapTypeRaw === "tree" ? "tree" : "link";
+
+    const graphRef = useRef<ForceGraph<NoteMapNodeObject, NoteMapLinkObject>>();
+    const containerSize = useElementSize(parentRef);
+    const [ fixNodes, setFixNodes ] = useState(false);
+    const [ linkDistance, setLinkDistance ] = useState(40);
+    const notesAndRelationsRef = useRef<NotesAndRelationsData>();
+
+    const mapRootId = useMemo(() => {
+        if (note.noteId && widgetMode === "ribbon") {
+            return note.noteId;
+        } else if (mapRootIdLabel === "hoisted") {
+            return hoisted_note.getHoistedNoteId();
+        } else if (mapRootIdLabel) {
+            return mapRootIdLabel;
+        } else {
+            return appContext.tabManager.getActiveContext()?.parentNoteId ?? null;
+        }
+    }, [ note ]);
+
+    // Build the note graph instance.
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !mapRootId) return;
+        const graph = new ForceGraph<NoteMapNodeObject, NoteMapLinkObject>(container);
+
+        graphRef.current = graph;
+
+        const labelValues = (name: string) => note.getLabels(name).map(l => l.value) ?? [];
+        const excludeRelations = labelValues("mapExcludeRelation");
+        const includeRelations = labelValues("mapIncludeRelation");
+        loadNotesAndRelations(mapRootId, excludeRelations, includeRelations, mapType).then((notesAndRelations) => {
+            if (!containerRef.current || !styleResolverRef.current) return;
+            const cssData = getCssData(containerRef.current, styleResolverRef.current);
+
+            // Configure rendering properties.
+            setupRendering(graph, {
+                note,
+                noteId: note.noteId,
+                noteIdToSizeMap: notesAndRelations.noteIdToSizeMap,
+                cssData,
+                notesAndRelations,
+                themeStyle: getThemeStyle(),
+                widgetMode,
+                mapType
+            });
+
+            // Interaction
+            graph
+                .onNodeClick((node) => {
+                    if (!node.id) return;
+                    appContext.tabManager.getActiveContext()?.setNote(node.id);
+                })
+                .onNodeRightClick((node, e) => {
+                    if (!node.id) return;
+                    link_context_menu.openContextMenu(node.id, e);
+                });
+
+            // Set data
+            graph.graphData(notesAndRelations);
+            notesAndRelationsRef.current = notesAndRelations;
+        });
+
+        return () => container.replaceChildren();
+    }, [ note, mapType ]);
+
+    useEffect(() => {
+        if (!graphRef.current || !notesAndRelationsRef.current) return;
+        graphRef.current.d3Force("link")?.distance(linkDistance);
+        graphRef.current.graphData(notesAndRelationsRef.current);
+    }, [ linkDistance ]);
+
+    // React to container size
+    useEffect(() => {
+        if (!containerSize || !graphRef.current) return;
+        graphRef.current.width(containerSize.width).height(containerSize.height);
+    }, [ containerSize?.width, containerSize?.height ]);
+
+    // Fixing nodes when dragged.
+    useEffect(() => {
+        graphRef.current?.onNodeDragEnd((node) => {
+            if (fixNodes) {
+                node.fx = node.x;
+                node.fy = node.y;
+            } else {
+                node.fx = undefined;
+                node.fy = undefined;
+            }
+        })
+    }, [ fixNodes ]);
+
+    return (
+        <div className="note-map-widget">
+            <div className="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group">
+                <MapTypeSwitcher type="link" icon="bx bx-network-chart" text={t("note-map.button-link-map")} currentMapType={mapType} setMapType={setMapType} />
+                <MapTypeSwitcher type="tree" icon="bx bx-sitemap" text={t("note-map.button-tree-map")} currentMapType={mapType} setMapType={setMapType} />
+            </div>
+
+            <div class="btn-group-sm fixnodes-type-switcher content-floating-buttons bottom-left" role="group">
+                <ActionButton
+                    icon="bx bx-lock-alt"
+                    text={t("note_map.fix-nodes")}
+                    className={fixNodes ? "active" : ""}
+                    onClick={() => setFixNodes(!fixNodes)}
+                    frame
+                />
+
+                <Slider
+                    min={1} max={100}
+                    value={linkDistance} onChange={setLinkDistance}
+                    title={t("note_map.link-distance")}
+                />
+            </div>
+
+            <div ref={styleResolverRef} class="style-resolver" />
+            <div ref={containerRef} className="note-map-container" />
+        </div>
+    );
+}
+
+function MapTypeSwitcher({ icon, text, type, currentMapType, setMapType }: {
+    icon: string;
+    text: string;
+    type: MapType;
+    currentMapType: MapType;
+    setMapType: (type: MapType) => void;
+}) {
+    return (
+        <ActionButton
+            icon={icon} text={text}
+            active={currentMapType === type}
+            onClick={() => setMapType(type)}
+            frame
+        />
+    )
+}
+
+function getCssData(container: HTMLElement, styleResolver: HTMLElement): CssData {
+    const containerStyle = window.getComputedStyle(container);
+    const styleResolverStyle = window.getComputedStyle(styleResolver);
+
+    return {
+        fontFamily: containerStyle.fontFamily,
+        textColor: rgb2hex(containerStyle.color),
+        mutedTextColor: rgb2hex(styleResolverStyle.color)
+    }
+}
diff --git a/apps/client/src/widgets/note_map/data.ts b/apps/client/src/widgets/note_map/data.ts
new file mode 100644
index 000000000..1f54f66b3
--- /dev/null
+++ b/apps/client/src/widgets/note_map/data.ts
@@ -0,0 +1,120 @@
+import { NoteMapLink, NoteMapPostResponse } from "@triliumnext/commons";
+import server from "../../services/server";
+import { LinkObject, NodeObject } from "force-graph";
+
+type MapType = "tree" | "link";
+
+interface GroupedLink {
+    id: string;
+    sourceNoteId: string;
+    targetNoteId: string;
+    names: string[];
+}
+
+export interface NoteMapNodeObject extends NodeObject {
+    id: string;
+    name: string;
+    type: string;
+    color: string;
+}
+
+export interface NoteMapLinkObject extends LinkObject<NoteMapNodeObject> {
+    id: string;
+    name: string;
+    x?: number;
+    y?: number;
+}
+
+export interface NotesAndRelationsData {
+    nodes: NoteMapNodeObject[];
+    links: {
+        id: string;
+        source: string | NoteMapNodeObject;
+        target: string | NoteMapNodeObject;
+        name: string;
+    }[];
+    noteIdToSizeMap: Record<string, number>;
+}
+
+export async function loadNotesAndRelations(mapRootNoteId: string, excludeRelations: string[], includeRelations: string[], mapType: MapType): Promise<NotesAndRelationsData> {
+    const resp = await server.post<NoteMapPostResponse>(`note-map/${mapRootNoteId}/${mapType}`, {
+        excludeRelations, includeRelations
+    });
+
+    const noteIdToSizeMap = calculateNodeSizes(resp, mapType);
+    const links = getGroupedLinks(resp.links);
+    const nodes = resp.notes.map(([noteId, title, type, color]) => ({
+        id: noteId,
+        name: title,
+        type: type,
+        color: color
+    }));
+
+    return {
+        noteIdToSizeMap,
+        nodes,
+        links: links.map((link) => ({
+            id: `${link.sourceNoteId}-${link.targetNoteId}`,
+            source: link.sourceNoteId,
+            target: link.targetNoteId,
+            name: link.names.join(", ")
+        }))
+    };
+}
+
+function calculateNodeSizes(resp: NoteMapPostResponse, mapType: MapType) {
+    const noteIdToSizeMap: Record<string, number> = {};
+
+    if (mapType === "tree") {
+        const { noteIdToDescendantCountMap } = resp;
+
+        for (const noteId in noteIdToDescendantCountMap) {
+            noteIdToSizeMap[noteId] = 4;
+
+            const count = noteIdToDescendantCountMap[noteId];
+
+            if (count > 0) {
+                noteIdToSizeMap[noteId] += 1 + Math.round(Math.log(count) / Math.log(1.5));
+            }
+        }
+    } else if (mapType === "link") {
+        const noteIdToLinkCount: Record<string, number> = {};
+
+        for (const link of resp.links) {
+            noteIdToLinkCount[link.targetNoteId] = 1 + (noteIdToLinkCount[link.targetNoteId] || 0);
+        }
+
+        for (const [noteId] of resp.notes) {
+            noteIdToSizeMap[noteId] = 4;
+
+            if (noteId in noteIdToLinkCount) {
+                noteIdToSizeMap[noteId] += Math.min(Math.pow(noteIdToLinkCount[noteId], 0.5), 15);
+            }
+        }
+    }
+
+    return noteIdToSizeMap;
+}
+
+function getGroupedLinks(links: NoteMapLink[]): GroupedLink[] {
+    const linksGroupedBySourceTarget: Record<string, GroupedLink> = {};
+
+    for (const link of links) {
+        const key = `${link.sourceNoteId}-${link.targetNoteId}`;
+
+        if (key in linksGroupedBySourceTarget) {
+            if (!linksGroupedBySourceTarget[key].names.includes(link.name)) {
+                linksGroupedBySourceTarget[key].names.push(link.name);
+            }
+        } else {
+            linksGroupedBySourceTarget[key] = {
+                id: key,
+                sourceNoteId: link.sourceNoteId,
+                targetNoteId: link.targetNoteId,
+                names: [link.name]
+            };
+        }
+    }
+
+    return Object.values(linksGroupedBySourceTarget);
+}
diff --git a/apps/client/src/widgets/note_map/rendering.ts b/apps/client/src/widgets/note_map/rendering.ts
new file mode 100644
index 000000000..129577521
--- /dev/null
+++ b/apps/client/src/widgets/note_map/rendering.ts
@@ -0,0 +1,282 @@
+import type ForceGraph from "force-graph";
+import { NoteMapLinkObject, NoteMapNodeObject, NotesAndRelationsData } from "./data";
+import { LinkObject, NodeObject } from "force-graph";
+import { generateColorFromString, MapType, NoteMapWidgetMode } from "./utils";
+import { escapeHtml } from "../../services/utils";
+import FNote from "../../entities/fnote";
+
+export interface CssData {
+    fontFamily: string;
+    textColor: string;
+    mutedTextColor: string;
+}
+
+interface RenderData {
+    note: FNote;
+    noteIdToSizeMap: Record<string, number>;
+    cssData: CssData;
+    noteId: string;
+    themeStyle: "light" | "dark";
+    widgetMode: NoteMapWidgetMode;
+    notesAndRelations: NotesAndRelationsData;
+    mapType: MapType;
+}
+
+export function setupRendering(graph: ForceGraph<NoteMapNodeObject, NoteMapLinkObject>, { note, noteId, themeStyle, widgetMode, noteIdToSizeMap, notesAndRelations, cssData, mapType }: RenderData) {
+    // variables for the hover effect. We have to save the neighbours of a hovered node in a set. Also we need to save the links as well as the hovered node itself
+    const neighbours = new Set();
+    const highlightLinks = new Set();
+    let hoverNode: NodeObject | null = null;
+    let zoomLevel: number;
+
+    function getColorForNode(node: NoteMapNodeObject) {
+        if (node.color) {
+            return node.color;
+        } else if (widgetMode === "ribbon" && node.id === noteId) {
+            return "red"; // subtree root mark as red
+        } else {
+            return generateColorFromString(node.type, themeStyle);
+        }
+    }
+
+    function paintNode(node: NoteMapNodeObject, color: string, ctx: CanvasRenderingContext2D) {
+        const { x, y } = node;
+        if (!x || !y) {
+            return;
+        }
+        const size = noteIdToSizeMap[node.id];
+
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(x, y, size * 0.8, 0, 2 * Math.PI, false);
+        ctx.fill();
+
+        const toRender = zoomLevel > 2 || (zoomLevel > 1 && size > 6) || (zoomLevel > 0.3 && size > 10);
+
+        if (!toRender) {
+            return;
+        }
+
+        ctx.fillStyle = cssData.textColor;
+        ctx.font = `${size}px ${cssData.fontFamily}`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+
+        let title = node.name;
+
+        if (title.length > 15) {
+            title = `${title.substr(0, 15)}...`;
+        }
+
+        ctx.fillText(title, x, y + Math.round(size * 1.5));
+    }
+
+
+    function paintLink(link: NoteMapLinkObject, ctx: CanvasRenderingContext2D) {
+        if (zoomLevel < 5) {
+            return;
+        }
+
+        ctx.font = `3px ${cssData.fontFamily}`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillStyle = cssData.mutedTextColor;
+
+        const { source, target } = link;
+        if (typeof source !== "object" || typeof target !== "object") {
+            return;
+        }
+
+        if (source.x && source.y && target.x && target.y) {
+            const x = (source.x + target.x) / 2;
+            const y = (source.y + target.y) / 2;
+            ctx.save();
+            ctx.translate(x, y);
+
+            const deltaY = source.y - target.y;
+            const deltaX = source.x - target.x;
+
+            let angle = Math.atan2(deltaY, deltaX);
+            let moveY = 2;
+
+            if (angle < -Math.PI / 2 || angle > Math.PI / 2) {
+                angle += Math.PI;
+                moveY = -2;
+            }
+
+            ctx.rotate(angle);
+            ctx.fillText(link.name, 0, moveY);
+        }
+
+        ctx.restore();
+    }
+
+    // main code for highlighting hovered nodes and neighbours. here we "style" the nodes. the nodes are rendered several hundred times per second.
+    graph
+        .d3AlphaDecay(0.01)
+        .d3VelocityDecay(0.08)
+        .maxZoom(7)
+        .warmupTicks(30)
+        .nodeCanvasObject((node, ctx) => {
+            if (hoverNode == node) {
+                //paint only hovered node
+                paintNode(node, "#661822", ctx);
+                neighbours.clear(); //clearing neighbours or the effect would be maintained after hovering is over
+                for (const link of notesAndRelations.links) {
+                    const { source, target } = link;
+                    if (typeof source !== "object" || typeof target !== "object") continue;
+
+                    //check if node is part of a link in the canvas, if so add it´s neighbours and related links to the previous defined variables to paint the nodes
+                    if (source.id == node.id || target.id == node.id) {
+                        neighbours.add(link.source);
+                        neighbours.add(link.target);
+                        highlightLinks.add(link);
+                        neighbours.delete(node);
+                    }
+                }
+            } else if (neighbours.has(node) && hoverNode != null) {
+                //paint neighbours
+                paintNode(node, "#9d6363", ctx);
+            } else {
+                paintNode(node, getColorForNode(node), ctx); //paint rest of nodes in canvas
+            }
+        })
+        //check if hovered and set the hovernode variable, saving the hovered node object into it. Clear links variable everytime you hover. Without clearing links will stay highlighted
+        .onNodeHover((node) => {
+            hoverNode = node || null;
+            highlightLinks.clear();
+        })
+        .nodePointerAreaPaint((node, _, ctx) => paintNode(node, getColorForNode(node), ctx))
+        .nodePointerAreaPaint((node, color, ctx) => {
+            if (!node.id) {
+                return;
+            }
+
+            ctx.fillStyle = color;
+            ctx.beginPath();
+            if (node.x && node.y) {
+                ctx.arc(node.x, node.y, noteIdToSizeMap[node.id], 0, 2 * Math.PI, false);
+            }
+            ctx.fill();
+        })
+        .nodeLabel((node) => escapeHtml(node.name))
+        .onZoom((zoom) => zoomLevel = zoom.k);
+
+    // set link width to immitate a highlight effect. Checking the condition if any links are saved in the previous defined set highlightlinks
+    graph
+        .linkWidth((link) => (highlightLinks.has(link) ? 3 : 0.4))
+        .linkColor((link) => (highlightLinks.has(link) ? cssData.textColor : cssData.mutedTextColor))
+        .linkDirectionalArrowLength(4)
+        .linkDirectionalArrowRelPos(0.95);
+
+    // Link-specific config
+    if (mapType) {
+        graph
+            .linkLabel((link) => {
+                const { source, target } = link;
+                if (typeof source !== "object" || typeof target !== "object") return escapeHtml(link.name);
+                return `${escapeHtml(source.name)} - <strong>${escapeHtml(link.name)}</strong> - ${escapeHtml(target.name)}`;
+            })
+            .linkCanvasObject((link, ctx) => paintLink(link, ctx))
+            .linkCanvasObjectMode(() => "after");
+    }
+
+    // Forces
+    const nodeLinkRatio = notesAndRelations.nodes.length / notesAndRelations.links.length;
+    const magnifiedRatio = Math.pow(nodeLinkRatio, 1.5);
+    const charge = -20 / magnifiedRatio;
+    const boundedCharge = Math.min(-3, charge);
+    graph.d3Force("center")?.strength(0.2);
+    graph.d3Force("charge")?.strength(boundedCharge);
+    graph.d3Force("charge")?.distanceMax(1000);
+
+    // Zoom to notes
+    if (widgetMode === "ribbon" && note?.type !== "search") {
+        setTimeout(() => {
+            const subGraphNoteIds = getSubGraphConnectedToCurrentNote(noteId, notesAndRelations);
+
+            graph.zoomToFit(400, 50, (node) => subGraphNoteIds.has(node.id));
+
+            if (subGraphNoteIds.size < 30) {
+                graph.d3VelocityDecay(0.4);
+            }
+        }, 1000);
+    } else {
+        if (notesAndRelations.nodes.length > 1) {
+            setTimeout(() => {
+                const noteIdsWithLinks = getNoteIdsWithLinks(notesAndRelations);
+
+                if (noteIdsWithLinks.size > 0) {
+                    graph.zoomToFit(400, 30, (node) => noteIdsWithLinks.has(node.id ?? ""));
+                }
+
+                if (noteIdsWithLinks.size < 30) {
+                    graph.d3VelocityDecay(0.4);
+                }
+            }, 1000);
+        }
+    }
+}
+
+function getNoteIdsWithLinks(data: NotesAndRelationsData) {
+    const noteIds = new Set<string | number>();
+
+    for (const link of data.links) {
+        if (typeof link.source === "object" && link.source.id) {
+            noteIds.add(link.source.id);
+        }
+        if (typeof link.target === "object" && link.target.id) {
+            noteIds.add(link.target.id);
+        }
+    }
+
+    return noteIds;
+}
+
+function getSubGraphConnectedToCurrentNote(noteId: string, data: NotesAndRelationsData) {
+    function getGroupedLinks(links: LinkObject<NodeObject>[], type: "source" | "target") {
+        const map: Record<string | number, LinkObject<NodeObject>[]> = {};
+
+        for (const link of links) {
+            if (typeof link[type] !== "object") {
+                continue;
+            }
+
+            const key = link[type].id;
+            if (key) {
+                map[key] = map[key] || [];
+                map[key].push(link);
+            }
+        }
+
+        return map;
+    }
+
+    const linksBySource = getGroupedLinks(data.links, "source");
+    const linksByTarget = getGroupedLinks(data.links, "target");
+
+    const subGraphNoteIds = new Set();
+
+    function traverseGraph(noteId?: string | number) {
+        if (!noteId || subGraphNoteIds.has(noteId)) {
+            return;
+        }
+
+        subGraphNoteIds.add(noteId);
+
+        for (const link of linksBySource[noteId] || []) {
+            if (typeof link.target === "object") {
+                traverseGraph(link.target?.id);
+            }
+        }
+
+        for (const link of linksByTarget[noteId] || []) {
+            if (typeof link.source === "object") {
+                traverseGraph(link.source?.id);
+            }
+        }
+    }
+
+    traverseGraph(noteId);
+    return subGraphNoteIds;
+}
diff --git a/apps/client/src/widgets/note_map/utils.ts b/apps/client/src/widgets/note_map/utils.ts
new file mode 100644
index 000000000..d551ea235
--- /dev/null
+++ b/apps/client/src/widgets/note_map/utils.ts
@@ -0,0 +1,33 @@
+export type NoteMapWidgetMode = "ribbon" | "hoisted" | "type";
+export type MapType = "tree" | "link";
+
+export function rgb2hex(rgb: string) {
+    return `#${(rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) || [])
+        .slice(1)
+        .map((n) => parseInt(n, 10).toString(16).padStart(2, "0"))
+        .join("")}`;
+}
+
+export function generateColorFromString(str: string, themeStyle: "light" | "dark") {
+    if (themeStyle === "dark") {
+        str = `0${str}`; // magic lightning modifier
+    }
+
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+
+    let color = "#";
+    for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 0xff;
+
+        color += `00${value.toString(16)}`.substr(-2);
+    }
+    return color;
+}
+
+export function getThemeStyle() {
+    const documentStyle = window.getComputedStyle(document.documentElement);
+    return documentStyle.getPropertyValue("--theme-style")?.trim() as "light" | "dark";
+}
diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx
index 8207198d6..7f7f0cd22 100644
--- a/apps/client/src/widgets/note_title.tsx
+++ b/apps/client/src/widgets/note_title.tsx
@@ -47,7 +47,9 @@ export default function NoteTitleWidget() {
 
     // Prevent user from navigating away if the spaced update is not done.
     useEffect(() => {
-        appContext.addBeforeUnloadListener(() => spacedUpdate.isAllSavedAndTriggerUpdate());
+        const listener = () => spacedUpdate.isAllSavedAndTriggerUpdate();
+        appContext.addBeforeUnloadListener(listener);
+        return () => appContext.removeBeforeUnloadListener(listener);
     }, []);
     useTriliumEvents([ "beforeNoteSwitch", "beforeNoteContextRemove" ], () => spacedUpdate.updateNowIfNecessary());
 
diff --git a/apps/client/src/widgets/note_types.tsx b/apps/client/src/widgets/note_types.tsx
new file mode 100644
index 000000000..a6b3feb27
--- /dev/null
+++ b/apps/client/src/widgets/note_types.tsx
@@ -0,0 +1,143 @@
+/**
+ * @module
+ * Contains the definitions for all the note types supported by the application.
+ */
+
+import { NoteType } from "@triliumnext/commons";
+import { VNode, type JSX } from "preact";
+import { TypeWidgetProps } from "./type_widgets/type_widget";
+
+/**
+ * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
+ * for protected session or attachment information.
+ */
+export type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" |  "protectedSession" | "aiChat";
+
+export type TypeWidget = ((props: TypeWidgetProps) => VNode | JSX.Element);
+type NoteTypeView = () => (Promise<{ default: TypeWidget } | TypeWidget> | TypeWidget);
+
+interface NoteTypeMapping {
+    view: NoteTypeView;
+    printable?: boolean;
+    /** The class name to assign to the note type wrapper */
+    className: string;
+    isFullHeight?: boolean;
+}
+
+export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
+    empty: {
+        view: () => import("./type_widgets/Empty"),
+        className: "note-detail-empty",
+        printable: true
+    },
+    doc: {
+        view: () => import("./type_widgets/Doc"),
+        className: "note-detail-doc",
+        printable: true
+    },
+    search: {
+        view: () => (props: TypeWidgetProps) => <></>,
+        className: "note-detail-none",
+        printable: true
+    },
+    protectedSession: {
+        view: () => import("./type_widgets/ProtectedSession"),
+        className: "protected-session-password-component"
+    },
+    book: {
+        view: () => import("./type_widgets/Book"),
+        className: "note-detail-book",
+        printable: true,
+    },
+    contentWidget: {
+        view: () => import("./type_widgets/ContentWidget"),
+        className: "note-detail-content-widget",
+        printable: true
+    },
+    webView: {
+        view: () => import("./type_widgets/WebView"),
+        className: "note-detail-web-view",
+        printable: true,
+        isFullHeight: true
+    },
+    file: {
+        view: () => import("./type_widgets/File"),
+        className: "note-detail-file",
+        printable: true,
+        isFullHeight: true
+    },
+    image: {
+        view: () => import("./type_widgets/Image"),
+        className: "note-detail-image",
+        printable: true
+    },
+    readOnlyCode: {
+        view: async () => (await import("./type_widgets/code/Code")).ReadOnlyCode,
+        className: "note-detail-readonly-code",
+        printable: true
+    },
+    editableCode: {
+        view: async () => (await import("./type_widgets/code/Code")).EditableCode,
+        className: "note-detail-code",
+        printable: true
+    },
+    mermaid: {
+        view: () => import("./type_widgets/Mermaid"),
+        className: "note-detail-mermaid",
+        printable: true,
+        isFullHeight: true
+    },
+    mindMap: {
+        view: () => import("./type_widgets/MindMap"),
+        className: "note-detail-mind-map",
+        printable: true,
+        isFullHeight: true
+    },
+    attachmentList: {
+        view: async () => (await import("./type_widgets/Attachment")).AttachmentList,
+        className: "attachment-list",
+        printable: true
+    },
+    attachmentDetail: {
+        view: async () => (await import("./type_widgets/Attachment")).AttachmentDetail,
+        className: "attachment-detail",
+        printable: true
+    },
+    readOnlyText: {
+        view: () => import("./type_widgets/text/ReadOnlyText"),
+        className: "note-detail-readonly-text"
+    },
+    editableText: {
+        view: () => import("./type_widgets/text/EditableText"),
+        className: "note-detail-editable-text",
+        printable: true
+    },
+    render: {
+        view: () => import("./type_widgets/Render"),
+        className: "note-detail-render",
+        printable: true
+    },
+    canvas: {
+        view: () => import("./type_widgets/canvas/Canvas"),
+        className: "note-detail-canvas",
+        printable: true,
+        isFullHeight: true
+    },
+    relationMap: {
+        view: () => import("./type_widgets/relation_map/RelationMap"),
+        className: "note-detail-relation-map",
+        printable: true,
+        isFullHeight: true
+    },
+    noteMap: {
+        view: () => import("./type_widgets/NoteMap"),
+        className: "note-detail-note-map",
+        printable: true,
+        isFullHeight: true
+    },
+    aiChat: {
+        view: () => import("./type_widgets/AiChat"),
+        className: "ai-chat-widget-container",
+        isFullHeight: true
+    }
+};
diff --git a/apps/client/src/widgets/react/Admonition.tsx b/apps/client/src/widgets/react/Admonition.tsx
index d5de3a5c8..5fb86daf2 100644
--- a/apps/client/src/widgets/react/Admonition.tsx
+++ b/apps/client/src/widgets/react/Admonition.tsx
@@ -3,12 +3,13 @@ import { ComponentChildren } from "preact";
 interface AdmonitionProps {
     type: "warning" | "note" | "caution";
     children: ComponentChildren;
+    className?: string;
 }
 
-export default function Admonition({ type, children }: AdmonitionProps) {
+export default function Admonition({ type, children, className }: AdmonitionProps) {
     return (
-        <div className={`admonition ${type}`} role="alert">
+        <div className={`admonition ${type} ${className}`} role="alert">
             {children}
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx
index c79d63619..ca5fcf66e 100644
--- a/apps/client/src/widgets/react/FormList.tsx
+++ b/apps/client/src/widgets/react/FormList.tsx
@@ -82,6 +82,8 @@ interface FormListItemOpts {
     active?: boolean;
     badges?: FormListBadge[];
     disabled?: boolean;
+    /** Will indicate the reason why the item is disabled via an icon, when hovered over it. */
+    disabledTooltip?: string;
     checked?: boolean | null;
     selected?: boolean;
     container?: boolean;
@@ -119,21 +121,24 @@ export function FormListItem({ className, icon, value, title, active, disabled,
             <Icon icon={icon} />&nbsp;
             {description ? (
                 <div>
-                    <FormListContent description={description} {...contentProps} />
+                    <FormListContent description={description} disabled={disabled} {...contentProps} />
                 </div>
             ) : (
-                <FormListContent description={description} {...contentProps} />
+                <FormListContent description={description} disabled={disabled} {...contentProps} />
             )}
         </li>
     );
 }
 
-function FormListContent({ children, badges, description }: Pick<FormListItemOpts, "children" | "badges" | "description">) {
+function FormListContent({ children, badges, description, disabled, disabledTooltip }: Pick<FormListItemOpts, "children" | "badges" | "description" | "disabled" | "disabledTooltip">) {
     return <>
         {children}
         {badges && badges.map(({ className, text }) => (
             <span className={`badge ${className ?? ""}`}>{text}</span>
         ))}
+        {disabled && disabledTooltip && (
+            <span class="bx bx-info-circle disabled-tooltip" title={disabledTooltip} />
+        )}
         {description && <div className="description">{description}</div>}
     </>;
 }
diff --git a/apps/client/src/widgets/react/HelpButton.tsx b/apps/client/src/widgets/react/HelpButton.tsx
index 065252264..eb55b1c43 100644
--- a/apps/client/src/widgets/react/HelpButton.tsx
+++ b/apps/client/src/widgets/react/HelpButton.tsx
@@ -5,17 +5,18 @@ import { openInAppHelpFromUrl } from "../../services/utils";
 interface HelpButtonProps {
     className?: string;
     helpPage: string;
+    title?: string;
     style?: CSSProperties;
 }
 
-export default function HelpButton({ className, helpPage, style }: HelpButtonProps) {
+export default function HelpButton({ className, helpPage, title, style }: HelpButtonProps) {
     return (
         <button
             class={`${className ?? ""} icon-action bx bx-help-circle`}
             type="button"
             onClick={() => openInAppHelpFromUrl(helpPage)}
-            title={t("open-help-page")}
+            title={title ?? t("open-help-page")}
             style={style}
         />
     );
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/react/InfoBar.css b/apps/client/src/widgets/react/InfoBar.css
index e4707a867..cf9774e0b 100644
--- a/apps/client/src/widgets/react/InfoBar.css
+++ b/apps/client/src/widgets/react/InfoBar.css
@@ -16,8 +16,8 @@
 
 .info-bar-subtle {
     color: var(--muted-text-color);
+    background: var(--main-background-color);
     border-bottom: 1px solid var(--main-border-color);
     margin-block: 0;
-    margin-inline: 10px;
-    padding-inline: 12px;
+    padding-inline: 22px;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx
index 06841b534..9e6ddc905 100644
--- a/apps/client/src/widgets/react/NoteLink.tsx
+++ b/apps/client/src/widgets/react/NoteLink.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "preact/hooks";
-import link from "../../services/link";
+import link, { ViewScope } from "../../services/link";
 import { useImperativeSearchHighlighlighting } from "./hooks";
 
 interface NoteLinkOpts {
@@ -11,18 +11,26 @@ interface NoteLinkOpts {
     noPreview?: boolean;
     noTnLink?: boolean;
     highlightedTokens?: string[] | null | undefined;
+    // Override the text of the link, otherwise the note title is used.
+    title?: string;
+    viewScope?: ViewScope;
+    noContextMenu?: boolean;
 }
 
-export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens }: NoteLinkOpts) {
+export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens, title, viewScope, noContextMenu }: NoteLinkOpts) {
     const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath;
     const ref = useRef<HTMLSpanElement>(null);
     const [ jqueryEl, setJqueryEl ] = useState<JQuery<HTMLElement>>();
     const highlightSearch = useImperativeSearchHighlighlighting(highlightedTokens);
 
     useEffect(() => {
-        link.createLink(stringifiedNotePath, { showNotePath, showNoteIcon })
-            .then(setJqueryEl);
-    }, [ stringifiedNotePath, showNotePath ]);
+        link.createLink(stringifiedNotePath, {
+            title,
+            showNotePath,
+            showNoteIcon,
+            viewScope
+        }).then(setJqueryEl);
+    }, [ stringifiedNotePath, showNotePath, title, viewScope ]);
 
     useEffect(() => {
         if (!ref.current || !jqueryEl) return;
@@ -43,6 +51,10 @@ export default function NoteLink({ className, notePath, showNotePath, showNoteIc
         $linkEl?.addClass("tn-link");
     }
 
+    if (noContextMenu) {
+        $linkEl?.attr("data-no-context-menu", "true");
+    }
+
     if (className) {
         $linkEl?.addClass(className);
     }
diff --git a/apps/client/src/widgets/react/Slider.tsx b/apps/client/src/widgets/react/Slider.tsx
new file mode 100644
index 000000000..515362ea4
--- /dev/null
+++ b/apps/client/src/widgets/react/Slider.tsx
@@ -0,0 +1,20 @@
+interface SliderProps {
+    value: number;
+    onChange(newValue: number);
+    min?: number;
+    max?: number;
+    title?: string;
+}
+
+export default function Slider({ onChange, ...restProps }: SliderProps) {
+    return (
+        <input
+            type="range"
+            className="slider"
+            onChange={(e) => {
+                onChange(e.currentTarget.valueAsNumber);
+            }}
+            {...restProps}
+        />
+    );
+}
diff --git a/apps/client/src/widgets/react/TouchBar.tsx b/apps/client/src/widgets/react/TouchBar.tsx
index e0f40fd87..02918d0a3 100644
--- a/apps/client/src/widgets/react/TouchBar.tsx
+++ b/apps/client/src/widgets/react/TouchBar.tsx
@@ -25,6 +25,7 @@ interface ButtonProps {
     icon?: string;
     click: () => void;
     enabled?: boolean;
+    backgroundColor?: string;
 }
 
 interface SpacerProps {
@@ -129,13 +130,14 @@ export function TouchBarSlider({ label, value, minValue, maxValue, onChange }: S
     return <></>;
 }
 
-export function TouchBarButton({ label, icon, click, enabled }: ButtonProps) {
+export function TouchBarButton({ label, icon, click, enabled, backgroundColor }: ButtonProps) {
     const api = useContext(TouchBarContext);
     const item = useMemo(() => {
         if (!api) return null;
         return new api.TouchBar.TouchBarButton({
             label, click, enabled,
-            icon: icon ? buildIcon(api.nativeImage, icon) : undefined
+            icon: icon ? buildIcon(api.nativeImage, icon) : undefined,
+            backgroundColor
         });
     }, [ label, icon ]);
 
@@ -171,6 +173,32 @@ export function TouchBarSegmentedControl({ mode, segments, selectedIndex, onChan
     return <></>;
 }
 
+export function TouchBarGroup({ children }: { children: ComponentChildren }) {
+    const remote = dynamicRequire("@electron/remote") as typeof import("@electron/remote");
+    const items: TouchBarItem[] = [];
+
+    const api: TouchBarContextApi = {
+        TouchBar: remote.TouchBar,
+        nativeImage: remote.nativeImage,
+        addItem: (item) => {
+            items.push(item);
+        }
+    };
+
+    if (api) {
+        const item = new api.TouchBar.TouchBarGroup({
+            items: new api.TouchBar({ items })
+        });
+        api.addItem(item);
+    }
+
+    return <>
+        <TouchBarContext.Provider value={api}>
+            {children}
+        </TouchBarContext.Provider>
+    </>;
+}
+
 export function TouchBarSpacer({ size }: SpacerProps) {
     const api = useContext(TouchBarContext);
 
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index 9978a003e..f6c14d45a 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -1,12 +1,12 @@
 import { CSSProperties } from "preact/compat";
 import { DragData } from "../note_tree";
 import { FilterLabelsByType, KeyboardActionNames, OptionNames, RelationNames } from "@triliumnext/commons";
-import { Inputs, MutableRef, useCallback, useContext, useDebugValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
-import { ParentComponent } from "./react_utils";
+import { MutableRef, useCallback, useContext, useDebugValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+import { ParentComponent, refToJQuerySelector } from "./react_utils";
 import { RefObject, VNode } from "preact";
 import { Tooltip } from "bootstrap";
-import { ViewMode } from "../../services/link";
-import appContext, { CommandListenerData, EventData, EventNames } from "../../components/app_context";
+import { ViewMode, ViewScope } from "../../services/link";
+import appContext, { EventData, EventNames } from "../../components/app_context";
 import attributes from "../../services/attributes";
 import BasicWidget, { ReactWrappedWidget } from "../basic_widget";
 import Component from "../../components/component";
@@ -21,6 +21,8 @@ import protected_session_holder from "../../services/protected_session_holder";
 import SpacedUpdate from "../../services/spaced_update";
 import toast, { ToastOptions } from "../../services/toast";
 import utils, { escapeRegExp, reloadFrontendApp } from "../../services/utils";
+import server from "../../services/server";
+import { removeIndividualBinding } from "../../services/shortcuts";
 
 export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
     const parentComponent = useContext(ParentComponent);
@@ -75,6 +77,66 @@ export function useSpacedUpdate(callback: () => void | Promise<void>, interval =
     return spacedUpdateRef.current;
 }
 
+export function useEditorSpacedUpdate({ note, noteContext, getData, onContentChange, dataSaved, updateInterval }: {
+    note: FNote,
+    noteContext: NoteContext | null | undefined,
+    getData: () => Promise<object | undefined> | object | undefined,
+    onContentChange: (newContent: string) => void,
+    dataSaved?: () => void,
+    updateInterval?: number;
+}) {
+    const parentComponent = useContext(ParentComponent);
+    const blob = useNoteBlob(note, parentComponent?.componentId);
+
+    const callback = useMemo(() => {
+        return async () => {
+            const data = await getData();
+
+            // for read only notes
+            if (data === undefined) return;
+
+            protected_session_holder.touchProtectedSessionIfNecessary(note);
+            await server.put(`notes/${note.noteId}/data`, data, parentComponent?.componentId);
+
+            dataSaved?.();
+        }
+    }, [ note, getData, dataSaved ])
+    const spacedUpdate = useSpacedUpdate(callback);
+
+    // React to note/blob changes.
+    useEffect(() => {
+        if (!blob) return;
+        spacedUpdate.allowUpdateWithoutChange(() => onContentChange(blob.content));
+    }, [ blob ]);
+
+    // React to update interval changes.
+    useEffect(() => {
+        if (!updateInterval) return;
+        spacedUpdate.setUpdateInterval(updateInterval);
+    }, [ updateInterval ]);
+
+    // Save if needed upon switching tabs.
+    useTriliumEvent("beforeNoteSwitch", async ({ noteContext: eventNoteContext }) => {
+        if (eventNoteContext.ntxId !== noteContext?.ntxId) return;
+        await spacedUpdate.updateNowIfNecessary();
+    });
+
+    // Save if needed upon tab closing.
+    useTriliumEvent("beforeNoteContextRemove", async ({ ntxIds }) => {
+        if (!noteContext?.ntxId || !ntxIds.includes(noteContext.ntxId)) return;
+        await spacedUpdate.updateNowIfNecessary();
+    })
+
+    // Save if needed upon window/browser closing.
+    useEffect(() => {
+        const listener = () => spacedUpdate.isAllSavedAndTriggerUpdate();
+        appContext.addBeforeUnloadListener(listener);
+        return () => appContext.removeBeforeUnloadListener(listener);
+    }, []);
+
+    return spacedUpdate;
+}
+
 /**
  * Allows a React component to read and write a Trilium option, while also watching for external changes.
  *
@@ -198,7 +260,7 @@ export function useNoteContext() {
     const [ noteContext, setNoteContext ] = useState<NoteContext>();
     const [ notePath, setNotePath ] = useState<string | null | undefined>();
     const [ note, setNote ] = useState<FNote | null | undefined>();
-    const [ , setViewMode ] = useState<ViewMode>();
+    const [ , setViewScope ] = useState<ViewScope>();
     const [ isReadOnlyTemporarilyDisabled, setIsReadOnlyTemporarilyDisabled ] = useState<boolean | null | undefined>(noteContext?.viewScope?.isReadOnly);
     const [ refreshCounter, setRefreshCounter ] = useState(0);
 
@@ -209,7 +271,7 @@ export function useNoteContext() {
     useTriliumEvents([ "setNoteContext", "activeContextChanged", "noteSwitchedAndActivated", "noteSwitched" ], ({ noteContext }) => {
         setNoteContext(noteContext);
         setNotePath(noteContext.notePath);
-        setViewMode(noteContext.viewScope?.viewMode);
+        setViewScope(noteContext.viewScope);
     });
     useTriliumEvent("frocaReloaded", () => {
         setNote(noteContext?.note);
@@ -381,7 +443,7 @@ export function useNoteLabelInt(note: FNote | undefined | null, labelName: Filte
     ]
 }
 
-export function useNoteBlob(note: FNote | null | undefined): FBlob | null | undefined {
+export function useNoteBlob(note: FNote | null | undefined, componentId?: string): FBlob | null | undefined {
     const [ blob, setBlob ] = useState<FBlob | null>();
 
     function refresh() {
@@ -402,6 +464,10 @@ export function useNoteBlob(note: FNote | null | undefined): FBlob | null | unde
         if (loadResults.hasRevisionForNote(note.noteId)) {
             refresh();
         }
+
+        if (loadResults.isNoteContentReloaded(note.noteId, componentId)) {
+            refresh();
+        }
     });
 
     useDebugValue(note?.noteId);
@@ -675,26 +741,6 @@ export function useNoteTreeDrag(containerRef: MutableRef<HTMLElement | null | un
     }, [ containerRef, callback ]);
 }
 
-export function useTouchBar(
-    factory: (context: CommandListenerData<"buildTouchBar"> & { parentComponent: Component | null }) => void,
-    inputs: Inputs
-) {
-    const parentComponent = useContext(ParentComponent);
-
-    useLegacyImperativeHandlers({
-        buildTouchBarCommand(context: CommandListenerData<"buildTouchBar">) {
-            return factory({
-                ...context,
-                parentComponent
-            });
-        }
-    });
-
-    useEffect(() => {
-        parentComponent?.triggerCommand("refreshTouchBar");
-    }, inputs);
-}
-
 export function useResizeObserver(ref: RefObject<HTMLElement>, callback: () => void) {
     const resizeObserver = useRef<ResizeObserver>(null);
     useEffect(() => {
@@ -710,6 +756,20 @@ export function useResizeObserver(ref: RefObject<HTMLElement>, callback: () => v
     }, [ callback, ref ]);
 }
 
+export function useKeyboardShortcuts(scope: "code-detail" | "text-detail", containerRef: RefObject<HTMLElement>, parentComponent: Component | undefined) {
+    useEffect(() => {
+        if (!parentComponent) return;
+        const $container = refToJQuerySelector(containerRef);
+        const bindingPromise = keyboard_actions.setupActionsForElement(scope, $container, parentComponent);
+        return async () => {
+            const bindings = await bindingPromise;
+            for (const binding of bindings) {
+                removeIndividualBinding(binding);
+            }
+        }
+    }, []);
+}
+
 /**
  * Indicates that the current note is in read-only mode, while an editing mode is available,
  * and provides a way to switch to editing mode.
diff --git a/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
index 4b42699d3..4777f4349 100644
--- a/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
@@ -18,58 +18,60 @@ export default function FilePropertiesTab({ note }: { note?: FNote | null }) {
         <div className="file-properties-widget">
             {note && (
                 <table class="file-table">
-                    <tr>
-                        <th class="text-nowrap">{t("file_properties.note_id")}:</th>
-                        <td class="file-note-id">{note.noteId}</td>
-                        <th class="text-nowrap">{t("file_properties.original_file_name")}:</th>
-                        <td class="file-filename">{originalFileName ?? "?"}</td>
-                    </tr>
-                    <tr>
-                        <th class="text-nowrap">{t("file_properties.file_type")}:</th>
-                        <td class="file-filetype">{note.mime}</td>
-                        <th class="text-nowrap">{t("file_properties.file_size")}:</th>
-                        <td class="file-filesize">{formatSize(blob?.contentLength ?? 0)}</td>
-                    </tr>
+                    <tbody>
+                        <tr>
+                            <th class="text-nowrap">{t("file_properties.note_id")}:</th>
+                            <td class="file-note-id">{note.noteId}</td>
+                            <th class="text-nowrap">{t("file_properties.original_file_name")}:</th>
+                            <td class="file-filename">{originalFileName ?? "?"}</td>
+                        </tr>
+                        <tr>
+                            <th class="text-nowrap">{t("file_properties.file_type")}:</th>
+                            <td class="file-filetype">{note.mime}</td>
+                            <th class="text-nowrap">{t("file_properties.file_size")}:</th>
+                            <td class="file-filesize">{formatSize(blob?.contentLength ?? 0)}</td>
+                        </tr>
 
-                    <tr>
-                        <td colSpan={4}>
-                            <div class="file-buttons">
-                                <Button
-                                    icon="bx bx-download"
-                                    text={t("file_properties.download")}
-                                    primary
-                                    disabled={!canAccessProtectedNote}
-                                    onClick={() => downloadFileNote(note.noteId)}
-                                />
+                        <tr>
+                            <td colSpan={4}>
+                                <div class="file-buttons">
+                                    <Button
+                                        icon="bx bx-download"
+                                        text={t("file_properties.download")}
+                                        primary
+                                        disabled={!canAccessProtectedNote}
+                                        onClick={() => downloadFileNote(note.noteId)}
+                                    />
 
-                                <Button
-                                    icon="bx bx-link-external"
-                                    text={t("file_properties.open")}
-                                    disabled={note.isProtected}
-                                    onClick={() => openNoteExternally(note.noteId, note.mime)}
-                                />
+                                    <Button
+                                        icon="bx bx-link-external"
+                                        text={t("file_properties.open")}
+                                        disabled={note.isProtected}
+                                        onClick={() => openNoteExternally(note.noteId, note.mime)}
+                                    />
 
-                                <FormFileUploadButton
-                                    icon="bx bx-folder-open"
-                                    text={t("file_properties.upload_new_revision")}
-                                    disabled={!canAccessProtectedNote}
-                                    onChange={(fileToUpload) => {
-                                        if (!fileToUpload) {
-                                            return;
-                                        }
-
-                                        server.upload(`notes/${note.noteId}/file`, fileToUpload[0]).then((result) => {
-                                            if (result.uploaded) {
-                                                toast.showMessage(t("file_properties.upload_success"));
-                                            } else {
-                                                toast.showError(t("file_properties.upload_failed"));
+                                    <FormFileUploadButton
+                                        icon="bx bx-folder-open"
+                                        text={t("file_properties.upload_new_revision")}
+                                        disabled={!canAccessProtectedNote}
+                                        onChange={(fileToUpload) => {
+                                            if (!fileToUpload) {
+                                                return;
                                             }
-                                        });
-                                    }}
-                                />
-                            </div>
-                        </td>
-                    </tr>
+
+                                            server.upload(`notes/${note.noteId}/file`, fileToUpload[0]).then((result) => {
+                                                if (result.uploaded) {
+                                                    toast.showMessage(t("file_properties.upload_success"));
+                                                } else {
+                                                    toast.showError(t("file_properties.upload_failed"));
+                                                }
+                                            });
+                                        }}
+                                    />
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
                 </table>
             )}
         </div>
diff --git a/apps/client/src/widgets/ribbon/NoteActions.tsx b/apps/client/src/widgets/ribbon/NoteActions.tsx
index 466fc12a1..e35284ad4 100644
--- a/apps/client/src/widgets/ribbon/NoteActions.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActions.tsx
@@ -51,7 +51,7 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not
   const isPrintable = ["text", "code"].includes(note.type) || (note.type === "book" && note.getLabelValue("viewType") === "presentation");
   const isElectron = getIsElectron();
   const isMac = getIsMac();
-  const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap"].includes(note.type);
+  const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap", "aiChat"].includes(note.type);
   const isSearchOrBook = ["search", "book"].includes(note.type);
   const {isReadOnly, enableEditing} = useIsNoteReadOnly(note, noteContext);
 
diff --git a/apps/client/src/widgets/ribbon/NoteMapTab.tsx b/apps/client/src/widgets/ribbon/NoteMapTab.tsx
index de7470141..ec7f4a749 100644
--- a/apps/client/src/widgets/ribbon/NoteMapTab.tsx
+++ b/apps/client/src/widgets/ribbon/NoteMapTab.tsx
@@ -1,24 +1,19 @@
 import { TabContext } from "./ribbon-interface";
-import NoteMapWidget from "../note_map";
-import { useElementSize, useLegacyWidget, useWindowSize } from "../react/hooks";
+import { useElementSize, useWindowSize } from "../react/hooks";
 import ActionButton from "../react/ActionButton";
 import { t } from "../../services/i18n";
 import { useEffect, useRef, useState } from "preact/hooks";
+import NoteMap from "../note_map/NoteMap";
 
 const SMALL_SIZE_HEIGHT = "300px";
 
-export default function NoteMapTab({ noteContext }: TabContext) {
+export default function NoteMapTab({ note }: TabContext) {
     const [ isExpanded, setExpanded ] = useState(false);
     const [ height, setHeight ] = useState(SMALL_SIZE_HEIGHT);
     const containerRef = useRef<HTMLDivElement>(null);
     const { windowHeight } = useWindowSize();
     const containerSize = useElementSize(containerRef);
 
-    const [ noteMapContainer, noteMapWidget ] = useLegacyWidget(() => new NoteMapWidget("ribbon"), {
-        noteContext,
-        containerClassName: "note-map-container"
-    });
-    
     useEffect(() => {
         if (isExpanded && containerRef.current && containerSize) {
             const height = windowHeight - containerSize.top;
@@ -27,11 +22,10 @@ export default function NoteMapTab({ noteContext }: TabContext) {
             setHeight(SMALL_SIZE_HEIGHT);
         }
     }, [ isExpanded, containerRef, windowHeight, containerSize?.top ]);
-    useEffect(() => noteMapWidget.setDimensions(), [ containerSize?.width, height ]);    
 
     return (
         <div className="note-map-ribbon-widget" style={{ height }} ref={containerRef}>
-            {noteMapContainer}
+            {note && <NoteMap note={note} widgetMode="ribbon" parentRef={containerRef} />}
 
             {!isExpanded ? (
                 <ActionButton
@@ -50,4 +44,4 @@ export default function NoteMapTab({ noteContext }: TabContext) {
             )}
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/type_widgets/AiChat.tsx b/apps/client/src/widgets/type_widgets/AiChat.tsx
new file mode 100644
index 000000000..677d593ab
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/AiChat.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useRef } from "preact/hooks";
+import { useEditorSpacedUpdate, useLegacyWidget } from "../react/hooks";
+import { type TypeWidgetProps } from "./type_widget";
+import LlmChatPanel from "../llm_chat";
+
+export default function AiChat({ note, noteContext }: TypeWidgetProps) {
+    const dataRef = useRef<object>();
+    const spacedUpdate = useEditorSpacedUpdate({
+        note,
+        noteContext,
+        getData: async () => ({
+            content: JSON.stringify(dataRef.current)
+        }),
+        onContentChange: (newContent) => {
+            try {
+                dataRef.current = JSON.parse(newContent);
+                llmChatPanel.refresh();
+            } catch (e) {
+                dataRef.current = {};
+            }
+        }
+    });
+    const [ ChatWidget, llmChatPanel ] = useLegacyWidget(() => {
+        const llmChatPanel = new LlmChatPanel();
+        llmChatPanel.setDataCallbacks(
+            async (data) => {
+                dataRef.current = data;
+                spacedUpdate.scheduleUpdate();
+            },
+            async () => dataRef.current
+        );
+        return llmChatPanel;
+    }, {
+        noteContext,
+        containerStyle: {
+            height: "100%"
+        }
+    });
+
+    useEffect(() => {
+        llmChatPanel.setNoteId(note.noteId);
+        llmChatPanel.setCurrentNoteId(note.noteId);
+    }, [ note ]);
+
+    return ChatWidget;
+}
diff --git a/apps/client/src/widgets/type_widgets/Attachment.css b/apps/client/src/widgets/type_widgets/Attachment.css
new file mode 100644
index 000000000..8a6221fc7
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Attachment.css
@@ -0,0 +1,137 @@
+/* #region Attachment list */
+.attachment-list {
+    padding-inline-start: 15px;
+    padding-inline-end: 15px;
+}
+
+.attachment-list .links-wrapper {
+    font-size: larger;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}
+/* #endregion */
+
+/* #region Attachment info */
+.attachment-detail-widget {
+    height: 100%;
+}
+
+.attachment-detail-wrapper {
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.attachment-title-line {
+    display: flex;
+    align-items: baseline;
+    gap: 1em;
+}
+
+.attachment-details {
+    margin-inline-start: 10px;
+}
+
+.attachment-content-wrapper {
+    flex-grow: 1;
+}
+
+.attachment-content-wrapper .rendered-content {
+    height: 100%;
+}
+
+.attachment-content-wrapper pre {
+    padding: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.attachment-detail-wrapper.list-view .attachment-content-wrapper {
+    max-height: 300px;
+}
+
+.attachment-detail-wrapper.full-detail {
+    height: 100%;
+}
+
+.attachment-detail-wrapper.full-detail .attachment-content-wrapper {
+    height: 100%;
+}
+
+.attachment-detail-wrapper.list-view .attachment-content-wrapper pre {
+    max-height: 400px;
+}
+
+.attachment-content-wrapper img {
+    margin: 10px;
+}
+
+.attachment-detail-wrapper.list-view .attachment-content-wrapper img, .attachment-detail-wrapper.list-view .attachment-content-wrapper video {
+    max-height: 300px;
+    max-width: 90%;
+    object-fit: contain;
+}
+
+.attachment-detail-wrapper.full-detail .attachment-content-wrapper img {
+    max-width: 90%;
+    object-fit: contain;
+}
+
+.attachment-detail-wrapper.scheduled-for-deletion .attachment-content-wrapper img {
+    filter: contrast(10%);
+}
+
+.attachment-detail-wrapper .attachment-deletion-warning {
+    margin-top: 15px;
+}
+/* #endregion */
+
+/* #region Attachment detail */
+.attachment-detail {
+    padding-left: 15px;
+    padding-right: 15px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.attachment-detail .links-wrapper {
+    font-size: larger;
+    padding: 0 0 16px 0;
+}
+
+.attachment-detail .attachment-wrapper {
+    flex-grow: 1;
+}
+/* #endregion */
+
+/* #region Attachment actions */
+.attachment-actions {
+    width: 35px;
+    height: 35px;
+}
+
+.attachment-actions .select-button {
+    position: relative;
+    top: 3px;
+}
+
+.attachment-actions .dropdown-menu {
+    width: 20em;
+}
+
+.attachment-actions .dropdown-item .bx {
+    position: relative;
+    top: 3px;
+    font-size: 120%;
+    margin-inline-end: 5px;
+}
+
+.attachment-actions .dropdown-item[disabled], .attachment-actions .dropdown-item[disabled]:hover {
+    color: var(--muted-text-color) !important;
+    background-color: transparent !important;
+    pointer-events: none; /* makes it unclickable */
+}
+/* #endregion */
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/Attachment.tsx b/apps/client/src/widgets/type_widgets/Attachment.tsx
new file mode 100644
index 000000000..3fdc60e93
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Attachment.tsx
@@ -0,0 +1,310 @@
+import { t } from "i18next";
+import { TypeWidgetProps } from "./type_widget";
+import "./Attachment.css";
+import NoteLink from "../react/NoteLink";
+import Button from "../react/Button";
+import { useContext, useEffect, useRef, useState } from "preact/hooks";
+import { ParentComponent, refToJQuerySelector } from "../react/react_utils";
+import HelpButton from "../react/HelpButton";
+import FAttachment from "../../entities/fattachment";
+import Alert from "../react/Alert";
+import utils from "../../services/utils";
+import content_renderer from "../../services/content_renderer";
+import { useTriliumEvent } from "../react/hooks";
+import froca from "../../services/froca";
+import Dropdown from "../react/Dropdown";
+import Icon from "../react/Icon";
+import { FormDropdownDivider, FormListItem } from "../react/FormList";
+import open from "../../services/open";
+import toast from "../../services/toast";
+import link from "../../services/link";
+import image from "../../services/image";
+import FormFileUpload from "../react/FormFileUpload";
+import server from "../../services/server";
+import dialog from "../../services/dialog";
+import ws from "../../services/ws";
+import appContext from "../../components/app_context";
+import { ConvertAttachmentToNoteResponse } from "@triliumnext/commons";
+import options from "../../services/options";
+
+/**
+ * Displays the full list of attachments of a note and allows the user to interact with them.
+ */
+export function AttachmentList({ note }: TypeWidgetProps) {
+    const [ attachments, setAttachments ] = useState<FAttachment[]>([]);
+
+    function refresh() {
+        note.getAttachments().then(attachments => setAttachments(Array.from(attachments)));
+    }
+
+    useEffect(refresh, [ note ]);
+
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.getAttachmentRows().some((att) => att.attachmentId && att.ownerId === note.noteId)) {
+            refresh();
+        }
+    });
+
+    return (
+        <>
+            <AttachmentListHeader noteId={note.noteId} />
+
+            <div className="attachment-list-wrapper">
+                {attachments.length ? (
+                    attachments.map(attachment => <AttachmentInfo key={attachment.attachmentId} attachment={attachment} />)
+                ) : (
+                    <Alert type="info">
+                        {t("attachment_list.no_attachments")}
+                    </Alert>
+                )}
+            </div>
+        </>
+    )
+}
+
+function AttachmentListHeader({ noteId }: { noteId: string }) {
+    const parentComponent = useContext(ParentComponent);
+
+    return (
+        <div className="links-wrapper">
+            <div>
+                {t("attachment_list.owning_note")}{" "}<NoteLink notePath={noteId} />
+            </div>
+            <div className="attachment-actions-toolbar">
+                <Button
+                    size="small"
+                    icon="bx bx-folder-open"
+                    text={t("attachment_list.upload_attachments")}
+                    onClick={() => parentComponent?.triggerCommand("showUploadAttachmentsDialog", { noteId })}
+                />
+                &nbsp;
+                <HelpButton
+                    helpPage="0vhv7lsOLy82"
+                    title={t("attachment_list.open_help_page")}
+                />
+            </div>
+        </div>
+    )
+}
+
+/**
+ * Displays information about a single attachment.
+ */
+export function AttachmentDetail({ note, viewScope }: TypeWidgetProps) {
+    const [ attachment, setAttachment ] = useState<FAttachment | null | undefined>(undefined);
+
+    useEffect(() => {
+        if (!viewScope?.attachmentId) return;
+        froca.getAttachment(viewScope.attachmentId).then(setAttachment);
+    }, [ viewScope ]);
+
+    return (
+        <>
+            <div className="links-wrapper use-tn-links">
+                {t("attachment_detail.owning_note")}{" "}
+                <NoteLink notePath={note.noteId} />
+                {t("attachment_detail.you_can_also_open")}{" "}
+                <NoteLink
+                    notePath={note.noteId}
+                    viewScope={{ viewMode: "attachments" }}
+                    title={t("attachment_detail.list_of_all_attachments")}
+                />
+                <HelpButton
+                    helpPage="0vhv7lsOLy82"
+                    title={t("attachment_list.open_help_page")}
+                />
+            </div>
+
+            <div className="attachment-wrapper">
+                {attachment !== null ? (
+                    attachment && <AttachmentInfo attachment={attachment} isFullDetail />
+                ) : (
+                    <strong>{t("attachment_detail.attachment_deleted")}</strong>
+                )}
+            </div>
+        </>
+    )
+}
+
+function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment, isFullDetail?: boolean }) {
+    const contentWrapper = useRef<HTMLDivElement>(null);
+
+    function refresh() {
+        content_renderer.getRenderedContent(attachment, { imageHasZoom: isFullDetail })
+            .then(({ $renderedContent }) => {
+                contentWrapper.current?.replaceChildren(...$renderedContent);
+            });
+    }
+
+    useEffect(refresh, [ attachment ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.getAttachmentRows().find(attachment => attachment.attachmentId)) {
+            refresh();
+        }
+    });
+
+    async function copyAttachmentLinkToClipboard() {
+        if (attachment.role === "image") {
+            const $contentWrapper = refToJQuerySelector(contentWrapper);
+            image.copyImageReferenceToClipboard($contentWrapper);
+        } else if (attachment.role === "file") {
+            const $link = await link.createLink(attachment.ownerId, {
+                referenceLink: true,
+                viewScope: {
+                    viewMode: "attachments",
+                    attachmentId: attachment.attachmentId
+                }
+            });
+
+            utils.copyHtmlToClipboard($link[0].outerHTML);
+
+            toast.showMessage(t("attachment_detail_2.link_copied"));
+        } else {
+            throw new Error(t("attachment_detail_2.unrecognized_role", { role: attachment.role }));
+        }
+    }
+
+    return (
+        <div className="attachment-detail-widget">
+            <div className={`attachment-detail-wrapper ${isFullDetail ? "full-detail" : "list-view"} ${attachment.utcDateScheduledForErasureSince ? "scheduled-for-deletion" : ""}`}>
+                <div className="attachment-title-line">
+                    <AttachmentActions attachment={attachment} copyAttachmentLinkToClipboard={copyAttachmentLinkToClipboard} />
+                    <h4 className="attachment-title">
+                        {!isFullDetail ? (
+                            <NoteLink
+                                notePath={attachment.ownerId}
+                                title={attachment.title}
+                                viewScope={{
+                                    viewMode: "attachments",
+                                    attachmentId: attachment.attachmentId
+                                }}
+                            />
+                        ) : (attachment.title)}
+                    </h4>
+                    <div className="attachment-details">
+                        {t("attachment_detail_2.role_and_size", { role: attachment.role, size: utils.formatSize(attachment.contentLength) })}
+                    </div>
+                    <div style="flex: 1 1;"></div>
+                </div>
+
+                {attachment.utcDateScheduledForErasureSince && <DeletionAlert utcDateScheduledForErasureSince={attachment.utcDateScheduledForErasureSince} />}
+                <div ref={contentWrapper} className="attachment-content-wrapper" />
+            </div>
+        </div>
+    )
+}
+
+function DeletionAlert({ utcDateScheduledForErasureSince }: { utcDateScheduledForErasureSince: string }) {
+    const scheduledSinceTimestamp = utils.parseDate(utcDateScheduledForErasureSince)?.getTime();
+    // use default value (30 days in seconds) from options_init as fallback, in case getInt returns null
+    const intervalMs = options.getInt("eraseUnusedAttachmentsAfterSeconds") || 2592000 * 1000;
+    const deletionTimestamp = scheduledSinceTimestamp + intervalMs;
+    const willBeDeletedInMs = deletionTimestamp - Date.now();
+
+    return (
+        <Alert className="attachment-deletion-warning" type="info">
+            { willBeDeletedInMs >= 60000
+            ? t("attachment_detail_2.will_be_deleted_in", { time: utils.formatTimeInterval(willBeDeletedInMs) })
+            : t("attachment_detail_2.will_be_deleted_soon")}
+            {t("attachment_detail_2.deletion_reason")}
+        </Alert>
+    )
+}
+
+function AttachmentActions({ attachment, copyAttachmentLinkToClipboard }: { attachment: FAttachment, copyAttachmentLinkToClipboard: () => void }) {
+    const isElectron = utils.isElectron();
+    const fileUploadRef = useRef<HTMLInputElement>(null);
+
+    return (
+        <div className="attachment-actions-container">
+            <Dropdown
+                className="attachment-actions"
+                text={<Icon icon="bx bx-dots-vertical-rounded" />}
+                buttonClassName="icon-action-always-border"
+                iconAction
+            >
+                <FormListItem
+                    icon="bx bx-file-find"
+                    title={t("attachments_actions.open_externally_title")}
+                    onClick={() => open.openAttachmentExternally(attachment.attachmentId, attachment.mime)}
+                >{t("attachments_actions.open_externally")}</FormListItem>
+                <FormListItem
+                    icon="bx bx-customize"
+                    title={t("attachments_actions.open_custom_title")}
+                    onClick={() => open.openAttachmentCustom(attachment.attachmentId, attachment.mime)}
+                    disabled={!isElectron}
+                    disabledTooltip={!isElectron ? t("attachments_actions.open_custom_client_only") : t("attachments_actions.open_externally_detail_page")}
+                >{t("attachments_actions.open_custom")}</FormListItem>
+                <FormListItem
+                    icon="bx bx-download"
+                    onClick={() => open.downloadAttachment(attachment.attachmentId)}
+                >{t("attachments_actions.download")}</FormListItem>
+                <FormListItem
+                    icon="bx bx-link"
+                    onClick={copyAttachmentLinkToClipboard}
+                >{t("attachments_actions.copy_link_to_clipboard")}</FormListItem>
+                <FormDropdownDivider />
+
+                <FormListItem
+                    icon="bx bx-upload"
+                    onClick={() => fileUploadRef.current?.click()}
+                >{t("attachments_actions.upload_new_revision")}</FormListItem>
+                <FormListItem
+                    icon="bx bx-rename"
+                    onClick={async () => {
+                        const attachmentTitle = await dialog.prompt({
+                            title: t("attachments_actions.rename_attachment"),
+                            message: t("attachments_actions.enter_new_name"),
+                            defaultValue: attachment.title
+                        });
+
+                        if (!attachmentTitle?.trim()) return;
+                        await server.put(`attachments/${attachment.attachmentId}/rename`, { title: attachmentTitle });
+                    }}
+                >{t("attachments_actions.rename_attachment")}</FormListItem>
+                <FormListItem
+                    icon="bx bx-trash destructive-action-icon"
+                    onClick={async () => {
+                        if (!(await dialog.confirm(t("attachments_actions.delete_confirm", { title: attachment.title })))) {
+                            return;
+                        }
+
+                        await server.remove(`attachments/${attachment.attachmentId}`);
+                        toast.showMessage(t("attachments_actions.delete_success", { title: attachment.title }));
+                    }}
+                >{t("attachments_actions.delete_attachment")}</FormListItem>
+                <FormDropdownDivider />
+
+                <FormListItem
+                    icon="bx bx-note"
+                    onClick={async () => {
+                        if (!(await dialog.confirm(t("attachments_actions.convert_confirm", { title: attachment.title })))) {
+                            return;
+                        }
+
+                        const { note: newNote } = await server.post<ConvertAttachmentToNoteResponse>(`attachments/${attachment.attachmentId}/convert-to-note`);
+                        toast.showMessage(t("attachments_actions.convert_success", { title: attachment.title }));
+                        await ws.waitForMaxKnownEntityChangeId();
+                        await appContext.tabManager.getActiveContext()?.setNote(newNote.noteId);
+                    }}
+                >{t("attachments_actions.convert_attachment_into_note")}</FormListItem>
+
+                <FormFileUpload
+                    inputRef={fileUploadRef}
+                    hidden
+                    onChange={async files => {
+                        const fileToUpload = files?.item(0);
+                        if (fileToUpload) {
+                            const result = await server.upload(`attachments/${attachment.attachmentId}/file`, fileToUpload);
+                            if (result.uploaded) {
+                                toast.showMessage(t("attachments_actions.upload_success"));
+                            } else {
+                                toast.showError(t("attachments_actions.upload_failed"));
+                            }
+                        }
+                    }}
+                />
+            </Dropdown>
+        </div>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/Book.css b/apps/client/src/widgets/type_widgets/Book.css
new file mode 100644
index 000000000..63398390e
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Book.css
@@ -0,0 +1,4 @@
+.note-detail-book-empty-help {
+    margin: 50px;
+    padding: 20px;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/Book.tsx b/apps/client/src/widgets/type_widgets/Book.tsx
new file mode 100644
index 000000000..419225e8b
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Book.tsx
@@ -0,0 +1,35 @@
+import { t } from "../../services/i18n";
+import Alert from "../react/Alert";
+import { useNoteLabel, useTriliumEvent } from "../react/hooks";
+import RawHtml from "../react/RawHtml";
+import { TypeWidgetProps } from "./type_widget";
+import "./Book.css";
+import { useEffect, useState } from "preact/hooks";
+
+const VIEW_TYPES = [ "list", "grid" ];
+
+export default function Book({ note }: TypeWidgetProps) {
+    const [ viewType ] = useNoteLabel(note, "viewType");
+    const [ shouldDisplayNoChildrenWarning, setShouldDisplayNoChildrenWarning ] = useState(false);
+
+    function refresh() {
+        setShouldDisplayNoChildrenWarning(!note.hasChildren() && VIEW_TYPES.includes(viewType ?? ""));
+    }
+
+    useEffect(refresh, [ note ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.getBranchRows().some(branchRow => branchRow.parentNoteId === note.noteId)) {
+            refresh();
+        }
+    });
+
+    return (
+        <>
+            {shouldDisplayNoChildrenWarning && (
+                <Alert type="warning" className="note-detail-book-empty-help">
+                    <RawHtml html={t("book.no_children_help")} />
+                </Alert>
+            )}
+        </>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/ContentWidget.css b/apps/client/src/widgets/type_widgets/ContentWidget.css
new file mode 100644
index 000000000..fb1fb4574
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/ContentWidget.css
@@ -0,0 +1,16 @@
+.type-contentWidget .note-detail {
+    height: 100%;
+}
+
+.note-detail-content-widget {
+    height: 100%;
+}
+
+.note-detail-content-widget-content {
+    padding: 15px;
+    height: 100%;
+}
+
+.note-detail.full-height .note-detail-content-widget-content {
+    padding: 0;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/ContentWidget.tsx b/apps/client/src/widgets/type_widgets/ContentWidget.tsx
new file mode 100644
index 000000000..d7e2aad39
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/ContentWidget.tsx
@@ -0,0 +1,58 @@
+import { TypeWidgetProps } from "./type_widget";
+import { JSX } from "preact/jsx-runtime";
+import AppearanceSettings from "./options/appearance";
+import ShortcutSettings from "./options/shortcuts";
+import TextNoteSettings from "./options/text_notes";
+import CodeNoteSettings from "./options/code_notes";
+import ImageSettings from "./options/images";
+import SpellcheckSettings from "./options/spellcheck";
+import PasswordSettings from "./options/password";
+import MultiFactorAuthenticationSettings from "./options/multi_factor_authentication";
+import EtapiSettings from "./options/etapi";
+import BackupSettings from "./options/backup";
+import SyncOptions from "./options/sync";
+import AiSettings from "./options/ai_settings";
+import OtherSettings from "./options/other";
+import InternationalizationOptions from "./options/i18n";
+import AdvancedSettings from "./options/advanced";
+import "./ContentWidget.css";
+import { t } from "../../services/i18n";
+import BackendLog from "./code/BackendLog";
+
+export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsAi" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced";
+
+const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", (props: TypeWidgetProps) => JSX.Element> = {
+    _optionsAppearance: AppearanceSettings,
+    _optionsShortcuts: ShortcutSettings,
+    _optionsTextNotes: TextNoteSettings,
+    _optionsCodeNotes: CodeNoteSettings,
+    _optionsImages: ImageSettings,
+    _optionsSpellcheck: SpellcheckSettings,
+    _optionsPassword: PasswordSettings,
+    _optionsMFA: MultiFactorAuthenticationSettings,
+    _optionsEtapi: EtapiSettings,
+    _optionsBackup: BackupSettings,
+    _optionsSync: SyncOptions,
+    _optionsAi: AiSettings,
+    _optionsOther: OtherSettings,
+    _optionsLocalization: InternationalizationOptions,
+    _optionsAdvanced: AdvancedSettings,
+    _backendLog: BackendLog
+}
+
+/**
+ * Type widget that displays one or more widgets based on the type of note, generally used for options and other interactive notes such as the backend log.
+ *
+ * @param param0
+ * @returns
+ */
+export default function ContentWidget({ note, ...restProps }: TypeWidgetProps) {
+    const Content = CONTENT_WIDGETS[note.noteId];
+    return (
+        <div className={`note-detail-content-widget-content ${note.noteId.startsWith("_options") ? "options" : ""}`}>
+            {Content
+                ? <Content note={note} {...restProps} />
+                : (t("content_widget.unknown_widget", { id: note.noteId }))}
+        </div>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/Doc.css b/apps/client/src/widgets/type_widgets/Doc.css
new file mode 100644
index 000000000..0081da3c7
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Doc.css
@@ -0,0 +1,50 @@
+.note-detail-doc-content {
+    padding: 15px;
+}
+
+.note-detail-doc-content pre {
+    border: 0;
+    box-shadow: var(--code-block-box-shadow);
+    padding: 15px;
+    border-radius: 5px;
+}
+
+.note-detail-doc-content code {
+    font-variant: none;
+}
+
+.note-detail-doc-content pre:not(.hljs) {
+    background-color: var(--accented-background-color);
+    border: 1px solid var(--main-border-color);
+}
+
+.note-detail-doc-content.contextual-help {
+    padding-bottom: 0;
+}
+
+.note-detail-doc-content.contextual-help h2,
+.note-detail-doc-content.contextual-help h3,
+.note-detail-doc-content.contextual-help h4,
+.note-detail-doc-content.contextual-help h5,
+.note-detail-doc-content.contextual-help h6 {
+    font-size: 1.25rem;
+    background-color: var(--main-background-color);
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    margin: 0;
+    padding-bottom: 0.25em;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+td img {
+    max-width: 40vw;
+}
+
+figure.table {
+    overflow: auto !important;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/Doc.tsx b/apps/client/src/widgets/type_widgets/Doc.tsx
new file mode 100644
index 000000000..4467c09e0
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Doc.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { RawHtmlBlock } from "../react/RawHtml";
+import renderDoc from "../../services/doc_renderer";
+import "./Doc.css";
+import { TypeWidgetProps } from "./type_widget";
+import { useTriliumEvent } from "../react/hooks";
+import { refToJQuerySelector } from "../react/react_utils";
+
+export default function Doc({ note, viewScope, ntxId }: TypeWidgetProps) {
+    const [ html, setHtml ] = useState<string>();
+    const initialized = useRef<Promise<void> | null>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!note) return;
+
+        initialized.current = renderDoc(note).then($content => {
+            setHtml($content.html());
+        });
+    }, [ note ]);
+
+    useTriliumEvent("executeWithContentElement", async ({ resolve, ntxId: eventNtxId}) => {
+        if (eventNtxId !== ntxId) return;
+        await initialized.current;
+        resolve(refToJQuerySelector(containerRef));
+    });
+
+    return (
+        <RawHtmlBlock
+            containerRef={containerRef}
+            className={`note-detail-doc-content ck-content ${viewScope?.viewMode === "contextual-help" ? "contextual-help" : ""}`}
+            html={html}
+        />
+    );
+}
diff --git a/apps/client/src/widgets/type_widgets/Empty.css b/apps/client/src/widgets/type_widgets/Empty.css
new file mode 100644
index 000000000..c207f6524
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Empty.css
@@ -0,0 +1,38 @@
+.workspace-notes {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.workspace-notes .workspace-note {
+    width: 130px;
+    text-align: center;
+    margin: 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;
+    font-size: 500%;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/Empty.tsx b/apps/client/src/widgets/type_widgets/Empty.tsx
new file mode 100644
index 000000000..eb0f0c5ee
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Empty.tsx
@@ -0,0 +1,85 @@
+import { useContext, useEffect, useRef, useState } from "preact/hooks";
+import { t } from "../../services/i18n";
+import FormGroup from "../react/FormGroup";
+import NoteAutocomplete from "../react/NoteAutocomplete";
+import "./Empty.css";
+import { ParentComponent, refToJQuerySelector } from "../react/react_utils";
+import note_autocomplete from "../../services/note_autocomplete";
+import appContext from "../../components/app_context";
+import FNote from "../../entities/fnote";
+import search from "../../services/search";
+import { TypeWidgetProps } from "./type_widget";
+
+export default function Empty({ }: TypeWidgetProps) {
+    return (
+        <>
+            <WorkspaceSwitcher />
+            <NoteSearch />
+        </>
+    )
+}
+
+function NoteSearch() {
+    const resultsContainerRef = useRef<HTMLDivElement>(null);
+    const autocompleteRef = useRef<HTMLInputElement>(null);
+
+    // Show recent notes.
+    useEffect(() => {
+        const $autoComplete = refToJQuerySelector(autocompleteRef);
+        note_autocomplete.showRecentNotes($autoComplete);
+    }, []);
+
+    return (
+        <>
+            <FormGroup name="empty-tab-search" label={t("empty.open_note_instruction")} className="empty-tab-search">
+                <NoteAutocomplete
+                    placeholder={t("empty.search_placeholder")}
+                    container={resultsContainerRef}
+                    inputRef={autocompleteRef}
+                    opts={{
+                        hideGoToSelectedNoteButton: true,
+                        allowCreatingNotes: true,
+                        allowJumpToSearchNotes: true,
+                    }}
+                    onChange={suggestion => {
+                        if (!suggestion?.notePath) {
+                            return false;
+                        }
+
+                        const activeContext = appContext.tabManager.getActiveContext();
+                        if (activeContext) {
+                            activeContext.setNote(suggestion.notePath);
+                        }
+                    }}
+                />
+            </FormGroup>
+            <div ref={resultsContainerRef} className="note-detail-empty-results" />
+        </>
+    );
+}
+
+function WorkspaceSwitcher() {
+    const [ workspaceNotes, setWorkspaceNotes ] = useState<FNote[]>();
+    const parentComponent = useContext(ParentComponent);
+
+    function refresh() {
+        search.searchForNotes("#workspace #!template").then(setWorkspaceNotes);
+    }
+
+    useEffect(refresh, []);
+
+    return (
+        <div class="workspace-notes">
+            {workspaceNotes?.map(workspaceNote => (
+                <div
+                    className="workspace-note"
+                    title={t("empty.enter_workspace", { title: workspaceNote.title })}
+                    onClick={() => parentComponent?.triggerCommand("hoistNote", { noteId: workspaceNote.noteId })}
+                >
+                    <div className={`${workspaceNote.getIcon()} workspace-icon`} />
+                    <div>{workspaceNote.title}</div>
+                </div>
+            ))}
+        </div>
+    );
+}
diff --git a/apps/client/src/widgets/type_widgets/File.css b/apps/client/src/widgets/type_widgets/File.css
new file mode 100644
index 000000000..d7f7035c0
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/File.css
@@ -0,0 +1,41 @@
+.type-file .note-detail {
+    height: 100%;
+}
+
+.note-detail-file {
+    padding: 10px;
+    height: 100%;
+}
+
+.note-split.full-content-width .note-detail-file {
+    padding: 0;
+}
+
+.note-detail.full-height .note-detail-file[data-preview-type="pdf"],
+.note-detail.full-height .note-detail-file[data-preview-type="video"] {
+    overflow: hidden;
+}
+
+.file-preview-content {
+    background-color: var(--accented-background-color);
+    padding: 15px;
+    height: 100%;
+    overflow: auto;
+    margin: 10px;
+}
+
+.note-detail-file > .pdf-preview,
+.note-detail-file > .video-preview {
+    width: 100%;
+    height: 100%;
+    flex-grow: 100;
+}
+
+.note-detail-file > .audio-preview {
+    position: absolute;
+    top: 50%;
+    left: 15px;
+    right: 15px;
+    width: calc(100% - 30px);
+    transform: translateY(-50%);
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/File.tsx b/apps/client/src/widgets/type_widgets/File.tsx
new file mode 100644
index 000000000..266526754
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/File.tsx
@@ -0,0 +1,78 @@
+import { useNoteBlob } from "../react/hooks";
+import "./File.css";
+import { TypeWidgetProps } from "./type_widget";
+import FNote from "../../entities/fnote";
+import { getUrlForDownload } from "../../services/open";
+import Alert from "../react/Alert";
+import { t } from "../../services/i18n";
+
+const TEXT_MAX_NUM_CHARS = 5000;
+
+export default function File({ note }: TypeWidgetProps) {
+    const blob = useNoteBlob(note);
+
+    if (blob?.content) {
+        return <TextPreview content={blob.content} />
+    } else if (note.mime === "application/pdf") {
+        return <PdfPreview note={note} />
+    } else if (note.mime.startsWith("video/")) {
+        return <VideoPreview note={note} />
+    } else if (note.mime.startsWith("audio/")) {
+        return <AudioPreview note={note} />
+    } else {
+        return <NoPreview />
+    }
+}
+
+function TextPreview({ content }: { content: string }) {
+    const trimmedContent = content.substring(0, TEXT_MAX_NUM_CHARS);
+    const isTooLarge = trimmedContent.length !== content.length;
+
+    return (
+        <>
+            {isTooLarge && (
+                <Alert type="info">
+                    {t("file.too_big", { maxNumChars: TEXT_MAX_NUM_CHARS })}
+                </Alert>
+            )}
+            <pre class="file-preview-content">{trimmedContent}</pre>
+        </>
+    )
+}
+
+function PdfPreview({ note }: { note: FNote }) {
+    return (
+        <iframe
+            class="pdf-preview"
+            src={getUrlForDownload(`api/notes/${note.noteId}/open`)} />
+    );
+}
+
+function VideoPreview({ note }: { note: FNote }) {
+    return (
+        <video
+            class="video-preview"
+            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+            datatype={note?.mime}
+            controls
+        />
+    )
+}
+
+function AudioPreview({ note }: { note: FNote }) {
+    return (
+        <audio
+            class="audio-preview"
+            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+            controls
+        />
+    )
+}
+
+function NoPreview() {
+    return (
+        <Alert className="file-preview-not-available" type="info">
+            {t("file.file_preview_not_available")}
+        </Alert>
+    );
+}
diff --git a/apps/client/src/widgets/type_widgets/Image.css b/apps/client/src/widgets/type_widgets/Image.css
new file mode 100644
index 000000000..1e638f86b
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Image.css
@@ -0,0 +1,24 @@
+.type-image .note-detail {
+    height: 100%;
+}
+
+.note-detail-image {
+    height: 100%;
+}
+
+.note-detail-image-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    justify-content: center;
+    height: 100%;
+}
+
+.note-detail-image-view {
+    display: block;
+    width: auto;
+    height: auto;
+    align-self: center;
+    flex-shrink: 0;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/Image.tsx b/apps/client/src/widgets/type_widgets/Image.tsx
new file mode 100644
index 000000000..938634423
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Image.tsx
@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { createImageSrcUrl } from "../../services/utils";
+import { useTriliumEvent, useUniqueName } from "../react/hooks";
+import "./Image.css";
+import { TypeWidgetProps } from "./type_widget";
+import WheelZoom from 'vanilla-js-wheel-zoom';
+import image_context_menu from "../../menus/image_context_menu";
+import { refToJQuerySelector } from "../react/react_utils";
+import { copyImageReferenceToClipboard } from "../../services/image";
+
+export default function Image({ note, ntxId }: TypeWidgetProps) {
+    const uniqueId = useUniqueName("image");
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [ refreshCounter, setRefreshCounter ] = useState(0);
+
+    // Set up pan & zoom
+    useEffect(() => {
+        const zoomInstance = WheelZoom.create(`#${uniqueId}`, {
+            maxScale: 50,
+            speed: 1.3,
+            zoomOnClick: false
+        });
+
+        return () => zoomInstance.destroy();
+    }, [ note ]);
+
+    // Set up context menu
+    useEffect(() => image_context_menu.setupContextMenu(refToJQuerySelector(containerRef)), []);
+
+    // Copy reference events
+    useTriliumEvent("copyImageReferenceToClipboard", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        copyImageReferenceToClipboard(refToJQuerySelector(containerRef));
+    });
+
+    // React to new revisions.
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.isNoteReloaded(note.noteId)) {
+            setRefreshCounter(refreshCounter + 1);
+        }
+    });
+
+    return (
+        <div ref={containerRef} className="note-detail-image-wrapper">
+            <img
+                id={uniqueId}
+                className="note-detail-image-view"
+                src={createImageSrcUrl(note)}
+            />
+        </div>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/mermaid.ts b/apps/client/src/widgets/type_widgets/Mermaid.tsx
similarity index 58%
rename from apps/client/src/widgets/type_widgets/mermaid.ts
rename to apps/client/src/widgets/type_widgets/Mermaid.tsx
index c8642c993..65574aa01 100644
--- a/apps/client/src/widgets/type_widgets/mermaid.ts
+++ b/apps/client/src/widgets/type_widgets/Mermaid.tsx
@@ -1,21 +1,13 @@
-import type { EditorConfig } from "@triliumnext/codemirror";
-import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid.js";
-import AbstractSvgSplitTypeWidget from "./abstract_svg_split_type_widget.js";
+import { useCallback } from "preact/hooks";
+import SvgSplitEditor from "./helpers/SvgSplitEditor";
+import { TypeWidgetProps } from "./type_widget";
+import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid";
 
 let idCounter = 1;
 let registeredErrorReporter = false;
 
-export class MermaidTypeWidget extends AbstractSvgSplitTypeWidget {
-
-    static getType() {
-        return "mermaid";
-    }
-
-    get attachmentName(): string {
-        return "mermaid-export";
-    }
-
-    async renderSvg(content: string) {
+export default function Mermaid(props: TypeWidgetProps) {
+    const renderSvg = useCallback(async (content: string) => {
         const mermaid = (await import("mermaid")).default;
         await loadElkIfNeeded(mermaid, content);
         if (!registeredErrorReporter) {
@@ -31,6 +23,13 @@ export class MermaidTypeWidget extends AbstractSvgSplitTypeWidget {
         idCounter++;
         const { svg } = await mermaid.render(`mermaid-graph-${idCounter}`, content);
         return postprocessMermaidSvg(svg);
-    }
+    }, []);
 
+    return (
+        <SvgSplitEditor
+            attachmentName="mermaid-export"
+            renderSvg={renderSvg}
+            {...props}
+        />
+    );
 }
diff --git a/apps/client/src/widgets/type_widgets/MindMap.css b/apps/client/src/widgets/type_widgets/MindMap.css
new file mode 100644
index 000000000..adeb32f21
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/MindMap.css
@@ -0,0 +1,124 @@
+.note-detail-mind-map {
+    height: 100%;
+    overflow: hidden !important;
+}
+
+.note-detail-mind-map .mind-map-container {
+    height: 100%;
+}
+
+.map-container .node-menu {
+    position: absolute;
+    top: 60px;
+    inset-inline-end: 20px;
+    bottom: 80px;
+    overflow: auto;
+    background: var(--panel-bgcolor);
+    color: var(--main-color);
+    border-radius: 5px;
+    box-shadow: 0 1px 2px #0003;
+    width: 240px;
+    box-sizing: border-box;
+    padding: 0 15px 15px;
+    transition: .3s all
+}
+
+.map-container .node-menu.close {
+    height: 29px;
+    width: 46px;
+    overflow: hidden
+}
+
+.map-container .node-menu .button-container {
+    padding: 3px 0;
+    direction: rtl
+}
+
+.map-container .node-menu #nm-tag {
+    margin-top: 20px
+}
+
+.map-container .node-menu .nm-fontsize-container {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 20px
+}
+
+.map-container .node-menu .nm-fontsize-container div {
+    height: 36px;
+    width: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 1px 2px #0003;
+    background-color: #fff;
+    color: tomato;
+    border-radius: 100%
+}
+
+.map-container .node-menu .nm-fontcolor-container {
+    margin-bottom: 10px
+}
+
+.map-container .node-menu input,
+.map-container .node-menu textarea {
+    background: var(--input-background-color);
+    border: 1px solid var(--panel-border-color);
+    border-radius: var(--bs-border-radius);
+    color: var(--main-color);
+    padding: 5px;
+    margin: 10px 0;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.map-container .node-menu textarea {
+    resize: none
+}
+
+.map-container .node-menu .split6 {
+    display: inline-block;
+    width: 16.66%;
+    margin-bottom: 5px
+}
+
+.map-container .node-menu .palette {
+    border-radius: 100%;
+    width: 21px;
+    height: 21px;
+    border: 1px solid #edf1f2;
+    margin: auto
+}
+
+.map-container .node-menu .nmenu-selected,
+.map-container .node-menu .palette:hover {
+    box-shadow: tomato 0 0 0 2px;
+    background-color: #c7e9fa
+}
+
+.map-container .node-menu .size-selected {
+    background-color: tomato !important;
+    border-color: tomato;
+    fill: #fff;
+    color: #fff
+}
+
+.map-container .node-menu .size-selected svg {
+    color: #fff
+}
+
+.map-container .node-menu .bof {
+    text-align: center
+}
+
+.map-container .node-menu .bof span {
+    display: inline-block;
+    font-size: 14px;
+    border-radius: 4px;
+    padding: 2px 5px
+}
+
+.map-container .node-menu .bof .selected {
+    background-color: tomato;
+    color: #fff
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/MindMap.tsx b/apps/client/src/widgets/type_widgets/MindMap.tsx
new file mode 100644
index 000000000..4192fae28
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/MindMap.tsx
@@ -0,0 +1,161 @@
+import { useCallback, useEffect, useRef } from "preact/hooks";
+import { TypeWidgetProps } from "./type_widget";
+import { MindElixirData, MindElixirInstance, Operation, default as VanillaMindElixir } from "mind-elixir";
+import { HTMLAttributes, RefObject } from "preact";
+// allow node-menu plugin css to be bundled by webpack
+import nodeMenu from "@mind-elixir/node-menu";
+import "mind-elixir/style";
+import "@mind-elixir/node-menu/dist/style.css";
+import "./MindMap.css";
+import { useEditorSpacedUpdate, useNoteLabelBoolean, useSyncedRef, useTriliumEvent, useTriliumEvents } from "../react/hooks";
+import { refToJQuerySelector } from "../react/react_utils";
+import utils from "../../services/utils";
+
+const NEW_TOPIC_NAME = "";
+
+interface MindElixirProps {
+    apiRef?: RefObject<MindElixirInstance>;
+    containerProps?: Omit<HTMLAttributes<HTMLDivElement>, "ref">;
+    containerRef?: RefObject<HTMLDivElement>;
+    editable: boolean;
+    content: MindElixirData;
+    onChange?: () => void;
+}
+
+export default function MindMap({ note, ntxId, noteContext }: TypeWidgetProps) {
+    const content = VanillaMindElixir.new(NEW_TOPIC_NAME);
+    const apiRef = useRef<MindElixirInstance>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
+    const spacedUpdate = useEditorSpacedUpdate({
+        note,
+        noteContext,
+        getData: async () => {
+            if (!apiRef.current) return;
+            return {
+                content: apiRef.current.getDataString(),
+                attachments: [
+                    {
+                        role: "image",
+                        title: "mindmap-export.svg",
+                        mime: "image/svg+xml",
+                        content: await apiRef.current.exportSvg().text(),
+                        position: 0
+                    }
+                ]
+            }
+        },
+        onContentChange: (content) => {
+            let newContent: MindElixirData;
+            if (content) {
+                try {
+                    newContent = JSON.parse(content) as MindElixirData;
+                } catch (e) {
+                    console.warn(e);
+                    console.debug("Wrong JSON content: ", content);
+                }
+            } else {
+                newContent = VanillaMindElixir.new(NEW_TOPIC_NAME)
+            }
+            apiRef.current?.init(newContent!);
+        }
+    });
+
+    // Allow search.
+    useTriliumEvent("executeWithContentElement", ({ resolve, ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        resolve(refToJQuerySelector(containerRef).find(".map-canvas"));
+    });
+
+    // Export as PNG or SVG.
+    useTriliumEvents([ "exportSvg", "exportPng" ], async ({ ntxId: eventNtxId }, eventName) => {
+        if (eventNtxId !== ntxId || !apiRef.current) return;
+        const title = note.title;
+        const svg = await apiRef.current.exportSvg().text();
+        if (eventName === "exportSvg") {
+            utils.downloadSvg(title, svg);
+        } else {
+            utils.downloadSvgAsPng(title, svg);
+        }
+    });
+
+    const onKeyDown = useCallback((e: KeyboardEvent) => {
+        /*
+        * Some global shortcuts interfere with the default shortcuts of the mind map,
+        * as defined here: https://mind-elixir.com/docs/guides/shortcuts
+        */
+        if (e.key === "F1") {
+            e.stopPropagation();
+        }
+
+        // Zoom controls
+        const isCtrl = e.ctrlKey && !e.altKey && !e.metaKey;
+        if (isCtrl && (e.key == "-" || e.key == "=" || e.key == "0")) {
+            e.stopPropagation();
+        }
+    }, []);
+
+    return (
+        <MindElixir
+            containerRef={containerRef}
+            apiRef={apiRef}
+            content={content}
+            onChange={() => spacedUpdate.scheduleUpdate()}
+            editable={!isReadOnly}
+            containerProps={{
+                className: "mind-map-container",
+                onKeyDown
+            }}
+        />
+    )
+}
+
+function MindElixir({ content, containerRef: externalContainerRef, containerProps, apiRef: externalApiRef, onChange, editable }: MindElixirProps) {
+    const containerRef = useSyncedRef<HTMLDivElement>(externalContainerRef, null);
+    const apiRef = useRef<MindElixirInstance>(null);
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const mind = new VanillaMindElixir({
+            el: containerRef.current,
+            editable
+        });
+
+        if (editable) {
+            mind.install(nodeMenu);
+        }
+        mind.init(content);
+
+        apiRef.current = mind;
+        if (externalApiRef) {
+            externalApiRef.current = mind;
+        }
+
+        return () => mind.destroy();
+    }, [ editable ]);
+
+    // On change listener.
+    useEffect(() => {
+        const bus = apiRef.current?.bus;
+        if (!onChange || !bus) return;
+
+        const operationListener = (operation: Operation) => {
+            if (operation.name !== "beginEdit") {
+                onChange();
+            }
+        }
+
+        bus.addListener("operation", operationListener);
+        bus.addListener("changeDirection", onChange);
+
+        return () => {
+            bus.removeListener("operation", operationListener);
+            bus.removeListener("changeDirection", onChange);
+        };
+    }, [ onChange ]);
+
+    return (
+        <div ref={containerRef} {...containerProps} />
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/NoteMap.tsx b/apps/client/src/widgets/type_widgets/NoteMap.tsx
new file mode 100644
index 000000000..7a308151c
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/NoteMap.tsx
@@ -0,0 +1,13 @@
+import { TypeWidgetProps } from "./type_widget";
+import NoteMapEl from "../note_map/NoteMap";
+import { useRef } from "preact/hooks";
+
+export default function NoteMap({ note }: TypeWidgetProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    return (
+        <div ref={containerRef}>
+            <NoteMapEl parentRef={containerRef} note={note} widgetMode="type" />
+        </div>
+    );
+}
diff --git a/apps/client/src/widgets/type_widgets/ProtectedSession.css b/apps/client/src/widgets/type_widgets/ProtectedSession.css
new file mode 100644
index 000000000..0ade6a39a
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/ProtectedSession.css
@@ -0,0 +1,9 @@
+.protected-session-password-component {
+    width: 300px;
+    margin: 30px auto auto;
+}
+
+.protected-session-password-component input,
+.protected-session-password-component button {
+    margin-top: 12px;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/ProtectedSession.tsx b/apps/client/src/widgets/type_widgets/ProtectedSession.tsx
new file mode 100644
index 000000000..b7af4aebc
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/ProtectedSession.tsx
@@ -0,0 +1,40 @@
+import { useCallback, useRef } from "preact/hooks";
+import { t } from "../../services/i18n";
+import Button from "../react/Button";
+import FormGroup from "../react/FormGroup";
+import FormTextBox from "../react/FormTextBox";
+import "./ProtectedSession.css";
+import protected_session from "../../services/protected_session";
+import type { TargetedSubmitEvent } from "preact";
+
+export default function ProtectedSession() {
+    const passwordRef = useRef<HTMLInputElement>(null);
+
+    const submitCallback = useCallback((e: TargetedSubmitEvent<HTMLFormElement>) => {
+        if (!passwordRef.current) return;
+        e.preventDefault();
+
+        const password = String(passwordRef.current.value);
+        passwordRef.current.value = "";
+        protected_session.setupProtectedSession(password);
+    }, [ passwordRef ]);
+
+    return (
+        <form class="protected-session-password-form" onSubmit={submitCallback}>
+            <FormGroup name="protected-session-password-in-detail" label={t("protected_session.enter_password_instruction")}>
+                <FormTextBox
+                    type="password"
+                    className="protected-session-password"
+                    autocomplete="current-password"
+                    inputRef={passwordRef}
+                />
+            </FormGroup>
+
+            <Button
+                text={t("protected_session.start_session_button")}
+                primary
+                keyboardShortcut="Enter"
+            />
+        </form>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/Render.css b/apps/client/src/widgets/type_widgets/Render.css
new file mode 100644
index 000000000..2595da0d8
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Render.css
@@ -0,0 +1,8 @@
+.note-detail-render {
+    position: relative;
+}
+
+.note-detail-render .note-detail-render-help {
+    margin: 50px;
+    padding: 20px;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/Render.tsx b/apps/client/src/widgets/type_widgets/Render.tsx
new file mode 100644
index 000000000..6cc719757
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Render.tsx
@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { TypeWidgetProps } from "./type_widget";
+import render from "../../services/render";
+import { refToJQuerySelector } from "../react/react_utils";
+import Alert from "../react/Alert";
+import "./Render.css";
+import { t } from "../../services/i18n";
+import RawHtml from "../react/RawHtml";
+import { useTriliumEvent } from "../react/hooks";
+
+export default function Render({ note, noteContext, ntxId }: TypeWidgetProps) {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [ renderNotesFound, setRenderNotesFound ] = useState(false);
+
+    function refresh() {
+        if (!contentRef) return;
+        render.render(note, refToJQuerySelector(contentRef)).then(setRenderNotesFound);
+    }
+
+    useEffect(refresh, [ note ]);
+
+    // Keyboard shortcut.
+    useTriliumEvent("renderActiveNote", () => {
+        if (!noteContext?.isActive()) return;
+        refresh();
+    });
+
+    // Refresh on floating buttons.
+    useTriliumEvent("refreshData", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        refresh();
+    });
+
+    // Integration with search.
+    useTriliumEvent("executeWithContentElement", ({ resolve, ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        resolve(refToJQuerySelector(contentRef));
+    });
+
+    return (
+        <>
+            {!renderNotesFound && (
+                <Alert className="note-detail-render-help" type="warning">
+                    <p><strong>{t("render.note_detail_render_help_1")}</strong></p>
+                    <p><RawHtml html={t("render.note_detail_render_help_2")} /></p>
+                </Alert>
+            )}
+
+            <div ref={contentRef} className="note-detail-render-content" />
+        </>
+    );
+}
diff --git a/apps/client/src/widgets/type_widgets/WebView.css b/apps/client/src/widgets/type_widgets/WebView.css
new file mode 100644
index 000000000..3978a86fc
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/WebView.css
@@ -0,0 +1,11 @@
+.note-detail-web-view {
+    height: 100%;
+    position: relative;
+}
+
+.note-detail-web-view > * {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/WebView.tsx b/apps/client/src/widgets/type_widgets/WebView.tsx
new file mode 100644
index 000000000..15dd2da62
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/WebView.tsx
@@ -0,0 +1,35 @@
+import { t } from "../../services/i18n";
+import utils from "../../services/utils";
+import Alert from "../react/Alert";
+import { useNoteLabel } from "../react/hooks";
+import { TypeWidgetProps } from "./type_widget";
+import "./WebView.css";
+
+const isElectron = utils.isElectron();
+
+export default function WebView({ note }: TypeWidgetProps) {
+    const [ webViewSrc ] = useNoteLabel(note, "webViewSrc");
+
+    return (webViewSrc
+        ? <WebViewContent src={webViewSrc} />
+        : <WebViewHelp />
+    );
+}
+
+function WebViewContent({ src }: { src: string }) {
+    if (!isElectron) {
+        return <iframe src={src} class="note-detail-web-view-content" sandbox="allow-same-origin allow-scripts allow-popups" />
+    } else {
+        return <webview src={src} class="note-detail-web-view-content" />
+    }
+}
+
+function WebViewHelp() {
+    return (
+        <Alert className="note-detail-web-view-help" type="warning" style={{ margin: "50px", padding: "20px 20px 0px 20px;" }}>
+            <h4>{t("web_view.web_view")}</h4>
+            <p>{t("web_view.embed_websites")}</p>
+            <p>{t("web_view.create_label")}</p>
+        </Alert>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/abstract_code_type_widget.ts b/apps/client/src/widgets/type_widgets/abstract_code_type_widget.ts
deleted file mode 100644
index 9da76b559..000000000
--- a/apps/client/src/widgets/type_widgets/abstract_code_type_widget.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { getThemeById } from "@triliumnext/codemirror";
-import type FNote from "../../entities/fnote.js";
-import options from "../../services/options.js";
-import TypeWidget from "./type_widget.js";
-import CodeMirror, { type EditorConfig } from "@triliumnext/codemirror";
-import type { EventData } from "../../components/app_context.js";
-
-export const DEFAULT_PREFIX = "default:";
-
-/**
- * An abstract {@link TypeWidget} which implements the CodeMirror editor, meant to be used as a parent for
- * widgets requiring the editor.
- *
- * The widget handles the loading and initialization of the CodeMirror editor, as well as some common
- * actions.
- *
- * The derived class must:
- *
- * - Define `$editor` in the constructor.
- * - Call `super.doRender()` in the extended class.
- * - Call `this._update(note, content)` in `#doRefresh(note)`.
- */
-export default class AbstractCodeTypeWidget extends TypeWidget {
-
-    protected $editor!: JQuery<HTMLElement>;
-    protected codeEditor!: CodeMirror;
-
-    doRender() {
-        this.initialized = this.#initEditor();
-    }
-
-    async #initEditor() {
-        this.codeEditor = new CodeMirror({
-            parent: this.$editor[0],
-            lineWrapping: options.is("codeLineWrapEnabled"),
-            ...this.getExtraOpts()
-        });
-
-        // Load the theme.
-        const themeId = options.get("codeNoteTheme");
-        if (themeId?.startsWith(DEFAULT_PREFIX)) {
-            const theme = getThemeById(themeId.substring(DEFAULT_PREFIX.length));
-            if (theme) {
-                await this.codeEditor.setTheme(theme);
-            }
-        }
-    }
-
-    /**
-     * Can be extended in derived classes to add extra options to the CodeMirror constructor. The options are appended
-     * at the end, so it is possible to override the default values introduced by the abstract editor as well.
-     *
-     * @returns the extra options to be passed to the CodeMirror constructor.
-     */
-    getExtraOpts(): Partial<EditorConfig> {
-        return {};
-    }
-
-    /**
-     * Called as soon as the CodeMirror library has been loaded and the editor was constructed. Can be extended in
-     * derived classes to add additional functionality or to register event handlers.
-     *
-     * By default, it does nothing.
-     */
-    onEditorInitialized() {
-        // Do nothing by default.
-    }
-
-    /**
-     * Must be called by the derived classes in `#doRefresh(note)` in order to react to changes.
-     *
-     * @param the note that was changed.
-     * @param new content of the note.
-     */
-    _update(note: { mime: string }, content: string) {
-        this.codeEditor.setText(content);
-        this.codeEditor.setMimeType(note.mime);
-        this.codeEditor.clearHistory();
-    }
-
-    show() {
-        this.$widget.show();
-        this.updateBackgroundColor();
-    }
-
-    focus() {
-        this.codeEditor.focus();
-    }
-
-    scrollToEnd() {
-        this.codeEditor.scrollToEnd();
-        this.codeEditor.focus();
-    }
-
-    cleanup() {
-        if (this.codeEditor) {
-            this.spacedUpdate.allowUpdateWithoutChange(() => {
-                this.codeEditor.setText("");
-            });
-        }
-        this.updateBackgroundColor("unset");
-    }
-
-    async executeWithCodeEditorEvent({ resolve, ntxId }: EventData<"executeWithCodeEditor">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        await this.initialized;
-
-        resolve(this.codeEditor);
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isOptionReloaded("codeNoteTheme")) {
-            const themeId = options.get("codeNoteTheme");
-            if (themeId?.startsWith(DEFAULT_PREFIX)) {
-                const theme = getThemeById(themeId.substring(DEFAULT_PREFIX.length));
-                if (theme) {
-                    await this.codeEditor.setTheme(theme);
-                }
-                this.updateBackgroundColor();
-            }
-        }
-
-        if (loadResults.isOptionReloaded("codeLineWrapEnabled")) {
-            this.codeEditor.setLineWrapping(options.is("codeLineWrapEnabled"));
-        }
-    }
-
-    updateBackgroundColor(color?: string) {
-        if (this.note?.mime === "text/x-sqlite;schema=trilium") {
-            // Don't apply a background color for SQL console notes.
-            return;
-        }
-
-        const $editorEl = $(this.codeEditor.dom);
-        this.$widget.closest(".scrolling-container").css("background-color", color ?? $editorEl.css("background-color"));
-    }
-
-}
diff --git a/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts b/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts
deleted file mode 100644
index 6d67ab26f..000000000
--- a/apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts
+++ /dev/null
@@ -1,284 +0,0 @@
-import type FNote from "../../entities/fnote.js";
-import utils from "../../services/utils.js";
-import EditableCodeTypeWidget from "./editable_code.js";
-import TypeWidget from "./type_widget.js";
-import Split from "@triliumnext/split.js";
-import { DEFAULT_GUTTER_SIZE } from "../../services/resizer.js";
-import options from "../../services/options.js";
-import type { EventData } from "../../components/app_context.js";
-import type OnClickButtonWidget from "../buttons/onclick_button.js";
-import type { EditorConfig } from "@triliumnext/codemirror";
-
-const TPL = /*html*/`\
-<div class="note-detail-split note-detail-printable">
-    <div class="note-detail-split-editor-col">
-        <div class="note-detail-split-editor"></div>
-        <div class="admonition caution note-detail-error-container hidden-ext"></div>
-    </div>
-    <div class="note-detail-split-preview-col">
-        <div class="note-detail-split-preview"></div>
-        <div class="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group"></div>
-    </div>
-
-    <style>
-        .note-detail-split {
-            display: flex;
-            height: 100%;
-        }
-
-        .note-detail-split-editor-col {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .note-detail-split-preview-col {
-            position: relative;
-        }
-
-        .note-detail-split .note-detail-split-editor {
-            width: 100%;
-            flex-grow: 1;
-        }
-
-        .note-detail-split .note-detail-split-editor .note-detail-code {
-            contain: size !important;
-        }
-
-        .note-detail-split .note-detail-error-container {
-            font-family: var(--monospace-font-family);
-            margin: 5px;
-            white-space: pre-wrap;
-            font-size: 0.85em;
-        }
-
-        .note-detail-split .note-detail-split-preview {
-            transition: opacity 250ms ease-in-out;
-            height: 100%;
-        }
-
-        .note-detail-split .note-detail-split-preview.on-error {
-            opacity: 0.5;
-        }
-
-        /* Horizontal layout */
-
-        .note-detail-split.split-horizontal > .note-detail-split-preview-col {
-            border-inline-start: 1px solid var(--main-border-color);
-        }
-
-        .note-detail-split.split-horizontal > .note-detail-split-editor-col,
-        .note-detail-split.split-horizontal > .note-detail-split-preview-col {
-            height: 100%;
-            width: 50%;
-        }
-
-        .note-detail-split.split-horizontal .note-detail-split-preview {
-            height: 100%;
-        }
-
-        /* Vertical layout */
-
-        .note-detail-split.split-vertical {
-            flex-direction: column;
-        }
-
-        .note-detail-split.split-vertical > .note-detail-split-editor-col,
-        .note-detail-split.split-vertical > .note-detail-split-preview-col {
-            width: 100%;
-            height: 50%;
-        }
-
-        .note-detail-split.split-vertical > .note-detail-split-editor-col {
-            border-top: 1px solid var(--main-border-color);
-        }
-
-        .note-detail-split.split-vertical .note-detail-split-preview-col {
-            order: -1;
-        }
-
-        /* Read-only view */
-
-        .note-detail-split.split-read-only .note-detail-split-preview-col {
-            width: 100%;
-        }
-    </style>
-</div>
-`;
-
-/**
- * Abstract `TypeWidget` which contains a preview and editor pane, each displayed on half of the available screen.
- *
- * Features:
- *
- * - The two panes are resizeable via a split, on desktop. The split can be optionally customized via {@link buildSplitExtraOptions}.
- * - Can display errors to the user via {@link setError}.
- * - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
- */
-export default abstract class AbstractSplitTypeWidget extends TypeWidget {
-
-    private splitInstance?: Split.Instance;
-
-    protected $preview!: JQuery<HTMLElement>;
-    private $editorCol!: JQuery<HTMLElement>;
-    private $previewCol!: JQuery<HTMLElement>;
-    private $editor!: JQuery<HTMLElement>;
-    private $errorContainer!: JQuery<HTMLElement>;
-    private editorTypeWidget: EditableCodeTypeWidget;
-    private layoutOrientation?: "horizontal" | "vertical";
-    private isReadOnly?: boolean;
-
-    constructor() {
-        super();
-
-        this.editorTypeWidget = new EditableCodeTypeWidget(true);
-        this.editorTypeWidget.updateBackgroundColor = () => {};
-        this.editorTypeWidget.isEnabled = () => true;
-
-        const defaultOptions = this.editorTypeWidget.getExtraOpts();
-        this.editorTypeWidget.getExtraOpts = () => {
-            return {
-                ...defaultOptions,
-                ...this.buildEditorExtraOptions()
-            };
-        };
-    }
-
-    doRender(): void {
-        this.$widget = $(TPL);
-
-        this.spacedUpdate.setUpdateInterval(750);
-
-        // Preview pane
-        this.$previewCol = this.$widget.find(".note-detail-split-preview-col");
-        this.$preview = this.$widget.find(".note-detail-split-preview");
-
-        // Editor pane
-        this.$editorCol = this.$widget.find(".note-detail-split-editor-col");
-        this.$editor = this.$widget.find(".note-detail-split-editor");
-        this.$editor.append(this.editorTypeWidget.render());
-        this.$errorContainer = this.$widget.find(".note-detail-error-container");
-        this.#adjustLayoutOrientation();
-
-        // Preview pane buttons
-        const $previewButtons = this.$previewCol.find(".preview-buttons");
-        const previewButtons = this.buildPreviewButtons();
-        $previewButtons.toggle(previewButtons.length > 0);
-        for (const previewButton of previewButtons) {
-            const $button = previewButton.render();
-            $button.removeClass("button-widget")
-                .addClass("btn")
-                .addClass("tn-tool-button");
-            $previewButtons.append($button);
-            previewButton.refreshIcon();
-        }
-
-        super.doRender();
-    }
-
-    cleanup(): void {
-        this.#destroyResizer();
-        this.editorTypeWidget.cleanup();
-    }
-
-    async doRefresh(note: FNote) {
-        this.#adjustLayoutOrientation();
-
-        if (!this.isReadOnly) {
-            await this.editorTypeWidget.initialized;
-            this.editorTypeWidget.noteContext = this.noteContext;
-            this.editorTypeWidget.spacedUpdate = this.spacedUpdate;
-            this.editorTypeWidget.doRefresh(note);
-        }
-    }
-
-    #adjustLayoutOrientation() {
-        // Read-only
-        const isReadOnly = this.note?.hasLabel("readOnly");
-        if (this.isReadOnly !== isReadOnly) {
-            this.$editorCol.toggle(!isReadOnly);
-        }
-
-        // Vertical vs horizontal layout
-        const layoutOrientation = (!utils.isMobile() ? options.get("splitEditorOrientation") ?? "horizontal" : "vertical");
-        if (this.layoutOrientation !== layoutOrientation || this.isReadOnly !== isReadOnly) {
-            this.$widget
-                .toggleClass("split-horizontal", !isReadOnly && layoutOrientation === "horizontal")
-                .toggleClass("split-vertical", !isReadOnly && layoutOrientation === "vertical")
-                .toggleClass("split-read-only", isReadOnly);
-            this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical");
-            this.isReadOnly = isReadOnly;
-            this.#destroyResizer();
-        }
-
-        if (!this.splitInstance) {
-            this.#setupResizer();
-        }
-    }
-
-    #setupResizer() {
-        if (!utils.isDesktop()) {
-            return;
-        }
-
-        let elements = [ this.$editorCol[0], this.$previewCol[0] ];
-        if (this.layoutOrientation === "vertical") {
-            elements.reverse();
-        }
-
-        this.splitInstance?.destroy();
-
-        if (!this.isReadOnly) {
-            this.splitInstance = Split(elements, {
-                rtl: glob.isRtl,
-                sizes: [ 50, 50 ],
-                direction: this.layoutOrientation,
-                gutterSize: DEFAULT_GUTTER_SIZE,
-                ...this.buildSplitExtraOptions()
-            });
-        } else {
-            this.splitInstance = undefined;
-        }
-    }
-
-    #destroyResizer() {
-        this.splitInstance?.destroy();
-        this.splitInstance = undefined;
-    }
-
-    /**
-     * Called upon when the split between the preview and content pane is initialized. Can be used to add additional listeners if needed.
-     */
-    buildSplitExtraOptions(): Split.Options {
-        return {};
-    }
-
-    /**
-     * Called upon when the code editor is being initialized. Can be used to add additional options to the editor.
-     */
-    buildEditorExtraOptions(): Partial<EditorConfig> {
-        return {
-            lineWrapping: false
-        };
-    }
-
-    buildPreviewButtons(): OnClickButtonWidget[] {
-        return [];
-    }
-
-    setError(message: string | null | undefined) {
-        this.$errorContainer.toggleClass("hidden-ext", !message);
-        this.$preview.toggleClass("on-error", !!message);
-        this.$errorContainer.text(message ?? "");
-    }
-
-    getData() {
-        return this.editorTypeWidget.getData();
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isOptionReloaded("splitEditorOrientation")) {
-            this.refresh();
-        }
-    }
-
-}
diff --git a/apps/client/src/widgets/type_widgets/abstract_svg_split_type_widget.ts b/apps/client/src/widgets/type_widgets/abstract_svg_split_type_widget.ts
deleted file mode 100644
index 45eba8890..000000000
--- a/apps/client/src/widgets/type_widgets/abstract_svg_split_type_widget.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-import type { EventData } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-import { t } from "../../services/i18n.js";
-import server from "../../services/server.js";
-import toast from "../../services/toast.js";
-import utils from "../../services/utils.js";
-import ws from "../../services/ws.js";
-import OnClickButtonWidget from "../buttons/onclick_button.js";
-import AbstractSplitTypeWidget from "./abstract_split_type_widget.js";
-
-/**
- * A specialization of `SplitTypeWidget` meant for note types that have a SVG preview.
- *
- * This adds the following functionality:
- *
- * - Automatic handling of the preview when content or the note changes via {@link renderSvg}.
- * - Built-in pan and zoom functionality with automatic re-centering.
- * - Automatically displays errors to the user if {@link renderSvg} failed.
- * - Automatically saves the SVG attachment.
- *
- */
-export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTypeWidget {
-
-    private $renderContainer!: JQuery<HTMLElement>;
-    private zoomHandler: () => void;
-    private zoomInstance?: SvgPanZoom.Instance;
-    private svg?: string;
-
-    constructor() {
-        super();
-        this.zoomHandler = () => {
-            if (this.zoomInstance) {
-                this.zoomInstance.resize();
-                this.zoomInstance.fit();
-                this.zoomInstance.center();
-            }
-        }
-    }
-
-    doRender(): void {
-        super.doRender();
-        this.$renderContainer = $(`<div>`)
-            .addClass("render-container")
-            .css("height", "100%");
-        this.$preview.append(this.$renderContainer);
-        $(window).on("resize", this.zoomHandler);
-    }
-
-    async doRefresh(note: FNote) {
-        super.doRefresh(note);
-
-        const blob = await note?.getBlob();
-        const content = blob?.content || "";
-        this.onContentChanged(content, true);
-
-        // Save the SVG when entering a note only when it does not have an attachment.
-        this.note?.getAttachments().then((attachments) => {
-            const attachmentName = `${this.attachmentName}.svg`;
-            if (!attachments.find((a) => a.title === attachmentName)) {
-                this.#saveSvg();
-            }
-        });
-    }
-
-    getData(): { content: string; } {
-        const data = super.getData();
-        this.onContentChanged(data.content, false);
-        this.#saveSvg();
-        return data;
-    }
-
-    /**
-     * Triggers an update of the preview pane with the provided content.
-     *
-     * @param content the content that will be passed to `renderSvg` for rendering. It is not the SVG content.
-     * @param recenter `true` to reposition the pan/zoom to fit the image and to center it.
-     */
-    async onContentChanged(content: string, recenter: boolean) {
-        if (!this.note) {
-            return;
-        }
-
-        let svg: string = "";
-        try {
-            svg = await this.renderSvg(content);
-
-            // Rendering was succesful.
-            this.setError(null);
-
-            if (svg === this.svg) {
-                return;
-            }
-
-            this.svg = svg;
-            this.$renderContainer.html(svg);
-        } catch (e: unknown) {
-            // Rendering failed.
-            this.setError((e as Error)?.message);
-        }
-
-        await this.#setupPanZoom(!recenter);
-    }
-
-    #saveSvg() {
-        const payload = {
-            role: "image",
-            title: `${this.attachmentName}.svg`,
-            mime: "image/svg+xml",
-            content: this.svg,
-            position: 0
-        };
-
-        server.post(`notes/${this.noteId}/attachments?matchBy=title`, payload);
-    }
-
-    cleanup(): void {
-        this.#cleanUpZoom();
-        $(window).off("resize", this.zoomHandler);
-        super.cleanup();
-    }
-
-    /**
-     * Called upon when the SVG preview needs refreshing, such as when the editor has switched to a new note or the content has switched.
-     *
-     * The method must return a valid SVG string that will be automatically displayed in the preview.
-     *
-     * @param content the content of the note, in plain text.
-     */
-    abstract renderSvg(content: string): Promise<string>;
-
-    /**
-     * Called to obtain the name of the note attachment (without .svg extension) that will be used for storing the preview.
-     */
-    abstract get attachmentName(): string;
-
-    /**
-     * @param preservePanZoom `true` to keep the pan/zoom settings of the previous image, or `false` to re-center it.
-     */
-    async #setupPanZoom(preservePanZoom: boolean) {
-        // Clean up
-        let pan: SvgPanZoom.Point | null = null;
-        let zoom: number | null = null;
-        if (preservePanZoom && this.zoomInstance) {
-            // Store pan and zoom for same note, when the user is editing the note.
-            pan = this.zoomInstance.getPan();
-            zoom = this.zoomInstance.getZoom();
-            this.#cleanUpZoom();
-        }
-
-        const $svgEl = this.$renderContainer.find("svg");
-
-        // Fit the image to bounds
-        $svgEl.attr("width", "100%")
-            .attr("height", "100%")
-            .css("max-width", "100%");
-
-        if (!$svgEl.length) {
-            return;
-        }
-
-        const svgPanZoom = (await import("svg-pan-zoom")).default;
-        const zoomInstance = svgPanZoom($svgEl[0], {
-            zoomEnabled: true,
-            controlIconsEnabled: false
-        });
-
-        if (preservePanZoom && pan && zoom) {
-            // Restore the pan and zoom.
-            zoomInstance.zoom(zoom);
-            zoomInstance.pan(pan);
-        } else {
-            // New instance, reposition properly.
-            zoomInstance.resize();
-            zoomInstance.center();
-            zoomInstance.fit();
-        }
-
-        this.zoomInstance = zoomInstance;
-    }
-
-    buildSplitExtraOptions(): Split.Options {
-        return {
-            onDrag: () => this.zoomHandler?.()
-        }
-    }
-
-    buildPreviewButtons(): OnClickButtonWidget[] {
-        return [
-            new OnClickButtonWidget()
-                .icon("bx-zoom-in")
-                .title(t("relation_map_buttons.zoom_in_title"))
-                .titlePlacement("top")
-                .onClick(() => this.zoomInstance?.zoomIn())
-            , new OnClickButtonWidget()
-                .icon("bx-zoom-out")
-                .title(t("relation_map_buttons.zoom_out_title"))
-                .titlePlacement("top")
-                .onClick(() => this.zoomInstance?.zoomOut())
-            , new OnClickButtonWidget()
-                .icon("bx-crop")
-                .title(t("relation_map_buttons.reset_pan_zoom_title"))
-                .titlePlacement("top")
-                .onClick(() => this.zoomHandler())
-        ];
-    }
-
-    #cleanUpZoom() {
-        if (this.zoomInstance) {
-            this.zoomInstance.destroy();
-            this.zoomInstance = undefined;
-        }
-    }
-
-    async exportSvgEvent({ ntxId }: EventData<"exportSvg">) {
-        if (!this.isNoteContext(ntxId) || this.note?.type !== "mermaid" || !this.svg) {
-            return;
-        }
-
-        utils.downloadSvg(this.note.title, this.svg);
-    }
-
-    async exportPngEvent({ ntxId }: EventData<"exportPng">) {
-        console.log("Export to PNG", this.noteContext?.noteId, ntxId, this.svg);
-        if (!this.isNoteContext(ntxId) || this.note?.type !== "mermaid" || !this.svg) {
-            console.log("Return");
-            return;
-        }
-
-        try {
-            await utils.downloadSvgAsPng(this.note.title, this.svg);
-        } catch (e) {
-            console.warn(e);
-            toast.showError(t("svg.export_to_png"));
-        }
-    }
-
-}
diff --git a/apps/client/src/widgets/type_widgets/abstract_text_type_widget.ts b/apps/client/src/widgets/type_widgets/abstract_text_type_widget.ts
deleted file mode 100644
index dca5ec5cc..000000000
--- a/apps/client/src/widgets/type_widgets/abstract_text_type_widget.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import appContext, { type EventData } from "../../components/app_context.js";
-import froca from "../../services/froca.js";
-import linkService, { type ViewScope } from "../../services/link.js";
-import contentRenderer from "../../services/content_renderer.js";
-import utils from "../../services/utils.js";
-import options from "../../services/options.js";
-import attributes from "../../services/attributes.js";
-
-export default class AbstractTextTypeWidget extends TypeWidget {
-    doRender() {
-        super.doRender();
-        this.refreshCodeBlockOptions();
-    }
-
-    setupImageOpening(singleClickOpens: boolean) {
-        this.$widget.on("dblclick", "img", (e) => this.openImageInCurrentTab($(e.target)));
-
-        this.$widget.on("click", "img", (e) => {
-            e.stopPropagation();
-            const isLeftClick = e.which === 1;
-            const isMiddleClick = e.which === 2;
-            const ctrlKey = utils.isCtrlKey(e);
-            const activate = (isLeftClick && ctrlKey && e.shiftKey) || (isMiddleClick && e.shiftKey);
-
-            if ((isLeftClick && ctrlKey) || isMiddleClick) {
-                this.openImageInNewTab($(e.target), activate);
-            } else if (isLeftClick && singleClickOpens) {
-                this.openImageInCurrentTab($(e.target));
-            }
-        });
-    }
-
-    async openImageInCurrentTab($img: JQuery<HTMLElement>) {
-        const parsedImage  = await this.parseFromImage($img);
-
-        if (parsedImage) {
-            appContext.tabManager.getActiveContext()?.setNote(parsedImage.noteId, { viewScope: parsedImage.viewScope });
-        } else {
-            window.open($img.prop("src"), "_blank");
-        }
-    }
-
-    async openImageInNewTab($img: JQuery<HTMLElement>, activate: boolean = false) {
-        const parsedImage = await this.parseFromImage($img);
-
-        if (parsedImage?.noteId) {
-            appContext.tabManager.openTabWithNoteWithHoisting(parsedImage.noteId, { activate, viewScope: parsedImage.viewScope });
-        } else {
-            window.open($img.prop("src"), "_blank");
-        }
-    }
-
-    async parseFromImage($img: JQuery<HTMLElement>): Promise<{ noteId?: string, viewScope: ViewScope } | null> {
-        const imgSrc = $img.prop("src");
-
-        const imageNoteMatch = imgSrc.match(/\/api\/images\/([A-Za-z0-9_]+)\//);
-        if (imageNoteMatch) {
-            return {
-                noteId: imageNoteMatch[1],
-                viewScope: {}
-            };
-        }
-
-        const attachmentMatch = imgSrc.match(/\/api\/attachments\/([A-Za-z0-9_]+)\/image\//);
-        if (attachmentMatch) {
-            const attachmentId = attachmentMatch[1];
-            const attachment = await froca.getAttachment(attachmentId);
-
-            return {
-                noteId: attachment?.ownerId,
-                viewScope: {
-                    viewMode: "attachments",
-                    attachmentId: attachmentId
-                }
-            };
-        }
-
-        return null;
-    }
-
-    async loadIncludedNote(noteId: string, $el: JQuery<HTMLElement>) {
-        const note = await froca.getNote(noteId);
-
-        if (note) {
-            const $wrapper = $('<div class="include-note-wrapper">');
-
-            const $link = await linkService.createLink(note.noteId, {
-                showTooltip: false
-            });
-
-            $wrapper.empty().append($('<h4 class="include-note-title">').append($link));
-
-            const { $renderedContent, type } = await contentRenderer.getRenderedContent(note);
-
-            $wrapper.append($(`<div class="include-note-content type-${type}">`).append($renderedContent));
-
-            $el.empty().append($wrapper);
-        }
-    }
-
-    async loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string | null = null) {
-        await linkService.loadReferenceLinkTitle($el, href);
-    }
-
-    refreshIncludedNote($container: JQuery<HTMLElement>, noteId: string) {
-        if ($container) {
-            $container.find(`section[data-note-id="${noteId}"]`).each((_, el) => {
-                this.loadIncludedNote(noteId, $(el));
-            });
-        }
-    }
-
-    refreshCodeBlockOptions() {
-        const wordWrap = options.is("codeBlockWordWrap");
-        this.$widget.toggleClass("word-wrap", wordWrap);
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isOptionReloaded("codeBlockWordWrap")) {
-            this.refreshCodeBlockOptions();
-        }
-
-        if (loadResults.getAttributeRows().find((attr) =>
-            attr.type === "label" &&
-            attr.name === "language" &&
-            attributes.isAffecting(attr, this.note)))
-        {
-            await this.onLanguageChanged();
-        }
-    }
-
-    async onLanguageChanged() { }
-
-}
diff --git a/apps/client/src/widgets/type_widgets/ai_chat.ts b/apps/client/src/widgets/type_widgets/ai_chat.ts
deleted file mode 100644
index 7f015d334..000000000
--- a/apps/client/src/widgets/type_widgets/ai_chat.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import LlmChatPanel from "../llm_chat_panel.js";
-import { type EventData } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
-
-export default class AiChatTypeWidget extends TypeWidget {
-    private llmChatPanel: LlmChatPanel;
-    private isInitialized: boolean = false;
-    private initPromise: Promise<void> | null = null;
-
-    constructor() {
-        super();
-        this.llmChatPanel = new LlmChatPanel();
-
-        // Connect the data callbacks
-        this.llmChatPanel.setDataCallbacks(
-            (data) => this.saveData(data),
-            () => this.getData()
-        );
-    }
-
-    static getType() {
-        return "aiChat";
-    }
-
-    doRender() {
-        this.$widget = $('<div class="ai-chat-widget-container" style="height: 100%;"></div>');
-        this.$widget.append(this.llmChatPanel.render());
-
-        return this.$widget;
-    }
-
-    // Override the refreshWithNote method to ensure we get note changes
-    async refreshWithNote(note: FNote | null | undefined) {
-        console.log("refreshWithNote called for note:", note?.noteId);
-
-        // Always force a refresh when the note changes
-        if (this.note?.noteId !== note?.noteId) {
-            console.log(`Note ID changed from ${this.note?.noteId} to ${note?.noteId}, forcing reset`);
-            this.isInitialized = false;
-            this.initPromise = null;
-
-            // Force refresh the chat panel with the new note
-            if (note) {
-                this.llmChatPanel.setCurrentNoteId(note.noteId);
-            }
-        }
-
-        // Continue with regular doRefresh
-        await this.doRefresh(note);
-    }
-
-    async doRefresh(note: FNote | null | undefined) {
-        try {
-            console.log("doRefresh called for note:", note?.noteId);
-
-            // If we're already initializing, wait for that to complete
-            if (this.initPromise) {
-                await this.initPromise;
-                return;
-            }
-
-            // Initialize once or when note changes
-            if (!this.isInitialized) {
-                console.log("Initializing AI Chat Panel for note:", note?.noteId);
-
-                // Initialize the note content first
-                if (note) {
-                    try {
-                        const content = await note.getContent();
-                        // Check if content is empty
-                        if (!content || content === '{}') {
-                            // Initialize with empty chat history
-                            await this.saveData({
-                                messages: [],
-                                title: note.title,
-                                noteId: note.noteId // Store the note ID in the data
-                            });
-                            console.log("Initialized empty chat history for new note");
-                        } else {
-                            console.log("Note already has content, will load in LlmChatPanel.refresh()");
-                        }
-                    } catch (e) {
-                        console.error("Error initializing AI Chat note content:", e);
-                    }
-                }
-
-                // Create a promise to track initialization
-                this.initPromise = (async () => {
-                    try {
-                        // Reset the UI before refreshing
-                        this.llmChatPanel.clearNoteContextChatMessages();
-                        this.llmChatPanel.setMessages([]);
-
-                        // Set the note ID for the chat panel
-                        if (note) {
-                            this.llmChatPanel.setNoteId(note.noteId);
-                        }
-
-                        // This will load saved data via the getData callback
-                        await this.llmChatPanel.refresh();
-                        this.isInitialized = true;
-                    } catch (e) {
-                        console.error("Error initializing LlmChatPanel:", e);
-                        toastService.showError("Failed to initialize chat panel. Try reloading.");
-                    }
-                })();
-
-                await this.initPromise;
-                this.initPromise = null;
-            }
-        } catch (e) {
-            console.error("Error in doRefresh:", e);
-            toastService.showError("Error refreshing chat. Please try again.");
-        }
-    }
-
-    async entitiesReloadedEvent(data: EventData<"entitiesReloaded">) {
-        // We don't need to refresh on entities reloaded for the chat
-    }
-
-    async noteSwitched() {
-        console.log("Note switched to:", this.noteId);
-
-        // Force a full reset when switching notes
-        this.isInitialized = false;
-        this.initPromise = null;
-
-        if (this.note) {
-            // Update the chat panel with the new note ID before refreshing
-            this.llmChatPanel.setCurrentNoteId(this.note.noteId);
-
-            // Reset the chat panel UI
-            this.llmChatPanel.clearNoteContextChatMessages();
-            this.llmChatPanel.setMessages([]);
-            this.llmChatPanel.setNoteId(this.note.noteId);
-        }
-
-        // Call the parent method to refresh
-        await super.noteSwitched();
-    }
-
-    async activeContextChangedEvent(data: EventData<"activeContextChanged">) {
-        if (!this.isActive()) {
-            return;
-        }
-
-        console.log("Active context changed, refreshing AI Chat Panel");
-
-        // Always refresh when we become active - this ensures we load the correct note data
-        try {
-            // Reset initialization flag to force a refresh
-            this.isInitialized = false;
-
-            // Make sure the chat panel has the current note ID
-            if (this.note) {
-                this.llmChatPanel.setCurrentNoteId(this.note.noteId);
-                this.llmChatPanel.setNoteId(this.note.noteId);
-            }
-
-            this.initPromise = (async () => {
-                try {
-                    // Reset the UI before refreshing
-                    this.llmChatPanel.clearNoteContextChatMessages();
-                    this.llmChatPanel.setMessages([]);
-
-                    await this.llmChatPanel.refresh();
-                    this.isInitialized = true;
-                } catch (e) {
-                    console.error("Error refreshing LlmChatPanel:", e);
-                }
-            })();
-
-            await this.initPromise;
-            this.initPromise = null;
-        } catch (e) {
-            console.error("Error in activeContextChangedEvent:", e);
-        }
-    }
-
-    // Save chat data to the note
-    async saveData(data: any) {
-        // If we have a noteId in the data, that's the AI Chat note we should save to
-        // This happens when the chat panel is saving its conversation
-        const targetNoteId = data.noteId;
-        
-        // If no noteId in data, use the current note (for new chats)
-        const noteIdToUse = targetNoteId || this.note?.noteId;
-        
-        if (!noteIdToUse) {
-            console.warn("Cannot save AI Chat data: no note ID available");
-            return;
-        }
-
-        try {
-            console.log(`AiChatTypeWidget: Saving data for note ${noteIdToUse} (current note: ${this.note?.noteId}, data.noteId: ${data.noteId})`);
-
-            // Safety check: if we have both IDs and they don't match, warn about it
-            if (targetNoteId && this.note?.noteId && targetNoteId !== this.note.noteId) {
-                console.warn(`Note ID mismatch: saving to ${targetNoteId} but current note is ${this.note.noteId}`);
-            }
-
-            // Format the data properly - this is the canonical format of the data
-            const formattedData = {
-                messages: data.messages || [],
-                noteId: noteIdToUse, // Always preserve the correct note ID
-                toolSteps: data.toolSteps || [],
-                sources: data.sources || [],
-                metadata: {
-                    ...(data.metadata || {}),
-                    lastUpdated: new Date().toISOString()
-                }
-            };
-
-            // Save the data to the correct note
-            await server.put(`notes/${noteIdToUse}/data`, {
-                content: JSON.stringify(formattedData, null, 2)
-            });
-        } catch (e) {
-            console.error("Error saving AI Chat data:", e);
-            toastService.showError("Failed to save chat data");
-        }
-    }
-
-    // Get data from the note
-    async getData() {
-        if (!this.note) {
-            return null;
-        }
-
-        try {
-            console.log(`AiChatTypeWidget: Getting data for note ${this.note.noteId}`);
-            const content = await this.note.getContent();
-
-            if (!content) {
-                console.log("Note content is empty");
-                return null;
-            }
-
-            // Parse the content as JSON
-            let parsedContent;
-            try {
-                parsedContent = JSON.parse(content as string);
-                console.log("Successfully parsed note content as JSON");
-            } catch (e) {
-                console.error("Error parsing chat content as JSON:", e);
-                return null;
-            }
-
-            // Check if this is a blob response with 'content' property that needs to be parsed again
-            // This happens when the content is returned from the /blob endpoint
-            if (parsedContent.content && typeof parsedContent.content === 'string' &&
-                parsedContent.blobId && parsedContent.contentLength) {
-                try {
-                    // The actual chat data is inside the 'content' property as a string
-                    console.log("Detected blob response structure, parsing inner content");
-                    const innerContent = JSON.parse(parsedContent.content);
-                    console.log("Successfully parsed blob inner content");
-                    return innerContent;
-                } catch (innerError) {
-                    console.error("Error parsing inner blob content:", innerError);
-                    return null;
-                }
-            }
-
-            return parsedContent;
-        } catch (e) {
-            console.error("Error loading AI Chat data:", e);
-            return null;
-        }
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/attachment_detail.ts b/apps/client/src/widgets/type_widgets/attachment_detail.ts
deleted file mode 100644
index a359c82c4..000000000
--- a/apps/client/src/widgets/type_widgets/attachment_detail.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import AttachmentDetailWidget from "../attachment_detail.js";
-import linkService from "../../services/link.js";
-import froca from "../../services/froca.js";
-import utils from "../../services/utils.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-
-const TPL = /*html*/`
-<div class="attachment-detail note-detail-printable">
-    <style>
-        .attachment-detail {
-            padding-inline-start: 15px;
-            padding-inline-end: 15px;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .attachment-detail .links-wrapper {
-            font-size: larger;
-            padding: 0 0 16px 0;
-        }
-
-        .attachment-detail .attachment-wrapper {
-            flex-grow: 1;
-        }
-    </style>
-
-    <div class="links-wrapper use-tn-links"></div>
-
-    <div class="attachment-wrapper"></div>
-</div>`;
-
-export default class AttachmentDetailTypeWidget extends TypeWidget {
-    $wrapper!: JQuery<HTMLElement>;
-    $linksWrapper!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "attachmentDetail";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$wrapper = this.$widget.find(".attachment-wrapper");
-        this.$linksWrapper = this.$widget.find(".links-wrapper");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: Parameters<TypeWidget["doRefresh"]>[0]) {
-        this.$wrapper.empty();
-        this.children = [];
-
-        const $helpButton = $(`
-            <button class="attachment-help-button icon-action bx bx-help-circle"
-                     type="button" data-help-page="attachments.html"
-                     title="${t("attachment_detail.open_help_page")}"
-            </button>
-        `);
-        utils.initHelpButtons($helpButton);
-
-        this.$linksWrapper.empty().append(
-            t("attachment_detail.owning_note"),
-            await linkService.createLink(this.noteId),
-            t("attachment_detail.you_can_also_open"),
-            await linkService.createLink(this.noteId, {
-                title: t("attachment_detail.list_of_all_attachments"),
-                viewScope: {
-                    viewMode: "attachments"
-                }
-            }),
-            $helpButton
-        );
-
-        const attachment = this.attachmentId ? await froca.getAttachment(this.attachmentId, true) : null;
-
-        if (!attachment) {
-            this.$wrapper.html("<strong>" + t("attachment_detail.attachment_deleted") + "</strong>");
-            return;
-        }
-
-        const attachmentDetailWidget = new AttachmentDetailWidget(attachment, true);
-        this.child(attachmentDetailWidget);
-
-        this.$wrapper.append(attachmentDetailWidget.render());
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        const attachmentRow = loadResults.getAttachmentRows().find((att) => att.attachmentId === this.attachmentId);
-
-        if (attachmentRow?.isDeleted) {
-            this.refresh(); // all other updates are handled within AttachmentDetailWidget
-        }
-    }
-
-    get attachmentId() {
-        return this?.noteContext?.viewScope?.attachmentId;
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/attachment_list.ts b/apps/client/src/widgets/type_widgets/attachment_list.ts
deleted file mode 100644
index 81d454486..000000000
--- a/apps/client/src/widgets/type_widgets/attachment_list.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import AttachmentDetailWidget from "../attachment_detail.js";
-import linkService from "../../services/link.js";
-import utils from "../../services/utils.js";
-import { t } from "../../services/i18n.js";
-import type { EventData } from "../../components/app_context.js";
-
-const TPL = /*html*/`
-<div class="attachment-list note-detail-printable">
-    <style>
-        .attachment-list {
-            padding-inline-start: 15px;
-            padding-inline-end: 15px;
-        }
-
-        .attachment-list .links-wrapper {
-            font-size: larger;
-            margin-bottom: 15px;
-            display: flex;
-            justify-content: space-between;
-            align-items: baseline;
-        }
-    </style>
-
-    <div class="links-wrapper"></div>
-
-    <div class="attachment-list-wrapper"></div>
-</div>`;
-
-export default class AttachmentListTypeWidget extends TypeWidget {
-    $list!: JQuery<HTMLElement>;
-    $linksWrapper!: JQuery<HTMLElement>;
-    renderedAttachmentIds!: Set<string>;
-
-    static getType() {
-        return "attachmentList";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$list = this.$widget.find(".attachment-list-wrapper");
-        this.$linksWrapper = this.$widget.find(".links-wrapper");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: Parameters<TypeWidget["doRefresh"]>[0]) {
-        const $helpButton = $(`
-            <button class="attachment-help-button icon-action bx bx-help-circle"
-                     type="button" data-help-page="attachments.html"
-                     title="${t("attachment_list.open_help_page")}">
-            </button>
-        `);
-        utils.initHelpButtons($helpButton);
-
-        const noteLink = await linkService.createLink(this.noteId); // do separately to avoid race condition between empty() and .append()
-        noteLink.addClass("use-tn-links");
-
-        const $uploadButton = $(`
-            <button class="btn btn-sm">
-                <span class="bx bx-folder-open"></span>
-                ${t("attachment_list.upload_attachments")}
-            </button>
-        `);
-
-        $uploadButton.on("click", () => {
-            if (this.noteId) {
-                this.triggerCommand("showUploadAttachmentsDialog", { noteId: this.noteId });
-            }
-        })
-
-        this.$linksWrapper.empty().append(
-            $("<div>").append(t("attachment_list.owning_note"), noteLink),
-            $(`<div class="attachment-actions-toolbar">`).append($uploadButton, $helpButton)
-        );
-
-        this.$list.empty();
-        this.children = [];
-        this.renderedAttachmentIds = new Set();
-
-        const attachments = await note.getAttachments();
-
-        if (attachments.length === 0) {
-            this.$list.html('<div class="alert alert-info">' + t("attachment_list.no_attachments") + "</div>");
-            return;
-        }
-
-        for (const attachment of attachments) {
-            const attachmentDetailWidget = new AttachmentDetailWidget(attachment, false);
-
-            this.child(attachmentDetailWidget);
-
-            this.renderedAttachmentIds.add(attachment.attachmentId);
-
-            this.$list.append(attachmentDetailWidget.render());
-        }
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        // updates and deletions are handled by the detail, for new attachments the whole list has to be refreshed
-        const attachmentsAdded = loadResults.getAttachmentRows().some((att) => att.attachmentId && !this.renderedAttachmentIds.has(att.attachmentId));
-
-        if (attachmentsAdded) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/book.ts b/apps/client/src/widgets/type_widgets/book.ts
deleted file mode 100644
index ba32fd3a6..000000000
--- a/apps/client/src/widgets/type_widgets/book.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-
-const TPL = /*html*/`
-<div class="note-detail-book note-detail-printable">
-    <style>
-    .note-detail-book-auto-help {
-        background-color: var(--accented-background-color);
-        text-align: center;
-        border-radius: 10px;
-        padding: 5px;
-        margin: 0 10px 10px 10px;
-    }
-    </style>
-
-    <div class="note-detail-book-empty-help alert alert-warning" style="margin: 50px; padding: 20px;">
-        ${t("book.no_children_help")}
-    </div>
-</div>`;
-
-export default class BookTypeWidget extends TypeWidget {
-
-    private $helpNoChildren!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "book";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$helpNoChildren = this.$widget.find(".note-detail-book-empty-help");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        this.$helpNoChildren.toggle(this.shouldDisplayNoChildrenWarning());
-    }
-
-    shouldDisplayNoChildrenWarning() {
-        if (this.note?.hasChildren()) {
-            return false;
-        }
-
-        switch (this.note?.getAttributeValue("label", "viewType")) {
-            case "list":
-            case "grid":
-                return true;
-            default:
-                return false;
-        }
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId && attr.name === "viewType")) {
-            this.refresh();
-        }
-    }
-
-}
diff --git a/apps/client/src/widgets/type_widgets/canvas.ts b/apps/client/src/widgets/type_widgets/canvas.ts
deleted file mode 100644
index d31bda9dd..000000000
--- a/apps/client/src/widgets/type_widgets/canvas.ts
+++ /dev/null
@@ -1,425 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import server from "../../services/server.js";
-import type FNote from "../../entities/fnote.js";
-import options from "../../services/options.js";
-import type { LibraryItem } from "@excalidraw/excalidraw/types";
-import type { Theme } from "@excalidraw/excalidraw/element/types";
-import type Canvas from "./canvas_el.js";
-import { CanvasContent } from "./canvas_el.js";
-import { renderReactWidget } from "../react/react_utils.jsx";
-import SpacedUpdate from "../../services/spaced_update.js";
-import protected_session_holder from "../../services/protected_session_holder.js";
-
-const TPL = /*html*/`
-    <div class="canvas-widget note-detail-canvas note-detail-printable note-detail">
-        <style>
-        .canvas-widget {
-            height: 100%;
-        }
-
-        .excalidraw .App-menu_top .buttonList {
-            display: flex;
-        }
-
-        /* Conflict between excalidraw and bootstrap classes keeps the menu hidden */
-        /* https://github.com/zadam/trilium/issues/3780 */
-        /* https://github.com/excalidraw/excalidraw/issues/6567 */
-        .excalidraw .dropdown-menu {
-            display: block;
-        }
-
-        .excalidraw-wrapper {
-            height: 100%;
-        }
-
-        :root[dir="ltr"]
-        .excalidraw
-        .layer-ui__wrapper
-        .zen-mode-transition.App-menu_bottom--transition-left {
-            transform: none;
-        }
-
-        /* collaboration not possible so hide the button */
-        .CollabButton {
-            display: none !important;
-        }
-
-        .library-button {
-            display: none !important; /* library won't work without extra support which isn't currently implemented */
-        }
-
-        </style>
-        <!-- height here necessary. otherwise excalidraw not shown -->
-        <div class="canvas-render" style="height: 100%"></div>
-    </div>
-`;
-
-
-
-interface AttachmentMetadata {
-    title: string;
-    attachmentId: string;
-}
-
-/**
- * # Canvas note with excalidraw
- * @author thfrei 2022-05-11
- *
- * Background:
- * excalidraw gives great support for hand-drawn notes. It also allows including images and support
- * for sketching. Excalidraw has a vibrant and active community.
- *
- * Functionality:
- * We store the excalidraw assets (elements and files) in the note. In addition to that, we
- * export the SVG from the canvas on every update and store it in the note's attachment. It is used when
- * calling api/images and makes referencing very easy.
- *
- * Paths not taken.
- *  - excalidraw-to-svg (node.js) could be used to avoid storing the svg in the backend.
- *    We could render the SVG on the fly. However, as of now, it does not render any hand drawn
- *    (freedraw) paths. There is an issue with Path2D object not present in the node-canvas library
- *    used by jsdom. (See Trilium PR for samples and other issues in the respective library.
- *    Link will be added later). Related links:
- *     - https://github.com/Automattic/node-canvas/pull/2013
- *     - https://github.com/google/canvas-5-polyfill
- *     - https://github.com/Automattic/node-canvas/issues/1116
- *     - https://www.npmjs.com/package/path2d-polyfill
- *  - excalidraw-to-svg (node.js) takes quite some time to load an image (1-2s)
- *  - excalidraw-utils (browser) does render freedraw, however NOT freedraw with a background. It is not
- *    used, since it is a big dependency, and has the same functionality as react + excalidraw.
- *  - infinite-drawing-canvas with fabric.js. This library lacked a lot of features, excalidraw already
- *    has.
- *
- * Known issues:
- *  - the 3 excalidraw fonts should be included in the share and everywhere, so that it is shown
- *    when requiring svg.
- *
- * Discussion of storing svg in the note attachment:
- *  - Pro: we will combat bit-rot. Showing the SVG will be very fast and easy, since it is already there.
- *  - Con: The note will get bigger (~40-50%?), we will generate more bandwidth. However, using trilium
- *         desktop instance mitigates that issue.
- *
- * Roadmap:
- *  - Support image-notes as reference in excalidraw
- *  - Support canvas note as reference (svg) in other canvas notes.
- *  - Make it easy to include a canvas note inside a text note
- */
-export default class ExcalidrawTypeWidget extends TypeWidget {
-
-    private currentNoteId: string;
-
-    private libraryChanged: boolean;
-    private librarycache: LibraryItem[];
-    private attachmentMetadata: AttachmentMetadata[];
-    private themeStyle!: Theme;
-
-    private $render!: JQuery<HTMLElement>;
-    private reactHandlers!: JQuery<HTMLElement>;
-    private canvasInstance!: Canvas;
-
-    constructor() {
-        super();
-
-        // temporary vars
-        this.currentNoteId = "";
-
-        // will be overwritten
-        this.$render;
-        this.$widget;
-        this.reactHandlers; // used to control react state
-
-        this.libraryChanged = false;
-
-        // these 2 variables are needed to compare the library state (all library items) after loading to the state when the library changed. So we can find attachments to be deleted.
-        //every libraryitem is saved on its own json file in the attachments of the note.
-        this.librarycache = [];
-        this.attachmentMetadata = [];
-
-        // TODO: We are duplicating the logic of note_detail.ts because it switches note ID mid-save, causing overwrites.
-        // This problem will get solved by itself once type widgets will be rewritten in React without the use of dangerous singletons.
-        this.spacedUpdate = new SpacedUpdate(async () => {
-            if (!this.noteContext) return;
-
-            const { note } = this.noteContext;
-            if (!note) return;
-
-            const { noteId } = note;
-            const data = await this.getData();
-
-            // for read only notes
-            if (data === undefined) return;
-
-            protected_session_holder.touchProtectedSessionIfNecessary(note);
-            await server.put(`notes/${noteId}/data`, data, this.componentId);
-            this.dataSaved();
-        });
-    }
-
-    static getType() {
-        return "canvas";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$widget.bind("mousewheel DOMMouseScroll", (event) => {
-            if (event.ctrlKey) {
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-            }
-        });
-
-        this.$widget.toggleClass("full-height", true);
-        this.$render = this.$widget.find(".canvas-render");
-        const documentStyle = window.getComputedStyle(document.documentElement);
-        this.themeStyle = documentStyle.getPropertyValue("--theme-style")?.trim() as Theme;
-
-        this.#init();
-
-        return this.$widget;
-    }
-
-    async #init() {
-        const renderElement = this.$render.get(0);
-        if (!renderElement) {
-            throw new Error("Unable to find element to render.");
-        }
-
-        const Canvas = (await import("./canvas_el.js")).default;
-        this.canvasInstance = new Canvas({
-            // this makes sure that 1) manual theme switch button is hidden 2) theme stays as it should after opening menu
-            theme: this.themeStyle,
-            onChange: () => this.onChangeHandler(),
-            viewModeEnabled: options.is("databaseReadonly"),
-            zenModeEnabled: false,
-            isCollaborating: false,
-            detectScroll: false,
-            handleKeyboardGlobally: false,
-            autoFocus: false,
-            UIOptions: {
-                canvasActions: {
-                    saveToActiveFile: false,
-                    export: false
-                }
-            },
-            onLibraryChange: () => {
-                this.libraryChanged = true;
-
-                this.saveData();
-            },
-        });
-
-        await setupFonts();
-        const canvasEl = renderReactWidget(this, this.canvasInstance.createCanvasElement())[0];
-        renderElement.replaceChildren(canvasEl);
-    }
-
-    /**
-     * called to populate the widget container with the note content
-     */
-    async doRefresh(note: FNote) {
-        if (!this.canvasInstance) {
-            await this.#init();
-        }
-
-        // see if the note changed, since we do not get a new class for a new note
-        const noteChanged = this.currentNoteId !== note.noteId;
-        if (noteChanged) {
-            // reset the scene to omit unnecessary onchange handler
-            this.canvasInstance.resetSceneVersion();
-        }
-        this.currentNoteId = note.noteId;
-
-        // get note from backend and put into canvas
-        const blob = await note.getBlob();
-
-        // before we load content into excalidraw, make sure excalidraw has loaded
-        await this.canvasInstance.waitForApiToBecomeAvailable();
-
-        /**
-         * new and empty note - make sure that canvas is empty.
-         * If we do not set it manually, we occasionally get some "bleeding" from another
-         * note into this fresh note. Probably due to that this note-instance does not get
-         * newly instantiated?
-         */
-        if (!blob?.content?.trim()) {
-            this.canvasInstance.resetScene(this.themeStyle);
-        } else if (blob.content) {
-            let content: CanvasContent;
-
-            // load saved content into excalidraw canvas
-            try {
-                content = blob.getJsonContent() as CanvasContent;
-            } catch (err) {
-                console.error("Error parsing content. Probably note.type changed. Starting with empty canvas", note, blob, err);
-
-                content = {
-                    elements: [],
-                    files: [],
-                    appState: {}
-                };
-            }
-
-            this.canvasInstance.loadData(content, this.themeStyle);
-
-            Promise.all(
-                (await note.getAttachmentsByRole("canvasLibraryItem")).map(async (attachment) => {
-                    const blob = await attachment.getBlob();
-                    return {
-                        blob, // Save the blob for libraryItems
-                        metadata: {
-                            // metadata to use in the cache variables for comparing old library state and new one. We delete unnecessary items later, calling the server directly
-                            attachmentId: attachment.attachmentId,
-                            title: attachment.title
-                        }
-                    };
-                })
-            ).then((results) => {
-                if (note.noteId !== this.currentNoteId) {
-                    // current note changed in the course of the async operation
-                    return;
-                }
-
-                // Extract libraryItems from the blobs
-                const libraryItems = results.map((result) => result?.blob?.getJsonContentSafely()).filter((item) => !!item) as LibraryItem[];
-
-                // Extract metadata for each attachment
-                const metadata = results.map((result) => result.metadata);
-
-                // Update the library and save to independent variables
-                this.canvasInstance.updateLibrary(libraryItems);
-
-                // save state of library to compare it to the new state later.
-                this.librarycache = libraryItems;
-                this.attachmentMetadata = metadata;
-            });
-
-
-        }
-
-        // set initial scene version
-        if (this.canvasInstance.isInitialScene()) {
-            this.canvasInstance.updateSceneVersion();
-        }
-    }
-
-    /**
-     * gets data from widget container that will be sent via spacedUpdate.scheduleUpdate();
-     * this is automatically called after this.saveData();
-     */
-    async getData() {
-        const { content, svg } = await this.canvasInstance.getData();
-        const attachments = [{ role: "image", title: "canvas-export.svg", mime: "image/svg+xml", content: svg, position: 0 }];
-
-        if (this.libraryChanged) {
-            // this.libraryChanged is unset in dataSaved()
-
-            // there's no separate method to get library items, so have to abuse this one
-            const libraryItems = await this.canvasInstance.getLibraryItems();
-
-            // excalidraw saves the library as a own state. the items are saved to libraryItems. then we compare the library right now with a libraryitemcache. The cache is filled when we first load the Library into the note.
-            //We need the cache to delete old attachments later in the server.
-
-            const libraryItemsMissmatch = this.librarycache.filter((obj1) => !libraryItems.some((obj2: LibraryItem) => obj1.id === obj2.id));
-
-            // before we saved the metadata of the attachments in a cache. the title of the attachment is a combination of libraryitem  ´s ID und it´s name.
-            // we compare the library items in the libraryitemmissmatch variable (this one saves all libraryitems that are different to the state right now. E.g. you delete 1 item, this item is saved as mismatch)
-            // then we combine its id and title and search the according attachmentID.
-
-            const matchingItems = this.attachmentMetadata.filter((meta) => {
-                // Loop through the second array and check for a match
-                return libraryItemsMissmatch.some((item) => {
-                    // Combine the `name` and `id` from the second array
-                    const combinedTitle = `${item.id}${item.name}`;
-                    return meta.title === combinedTitle;
-                });
-            });
-
-            // we save the attachment ID`s in a variable and delete every attachmentID. Now the items that the user deleted will be deleted.
-            const attachmentIds = matchingItems.map((item) => item.attachmentId);
-
-            //delete old attachments that are no longer used
-            for (const item of attachmentIds) {
-                await server.remove(`attachments/${item}`);
-            }
-
-            let position = 10;
-
-            // prepare data to save to server e.g. new library items.
-            for (const libraryItem of libraryItems) {
-                attachments.push({
-                    role: "canvasLibraryItem",
-                    title: libraryItem.id + libraryItem.name,
-                    mime: "application/json",
-                    content: JSON.stringify(libraryItem),
-                    position: position
-                });
-
-                position += 10;
-            }
-        }
-
-        return {
-            content: JSON.stringify(content),
-            attachments
-        };
-    }
-
-    /**
-     * save content to backend
-     */
-    saveData() {
-        // Since Excalidraw sends an enormous amount of events, wait for them to stop before actually saving.
-        this.spacedUpdate.resetUpdateTimer();
-        this.spacedUpdate.scheduleUpdate();
-    }
-
-    dataSaved() {
-        this.libraryChanged = false;
-    }
-
-    onChangeHandler() {
-        if (options.is("databaseReadonly")) {
-            return;
-        }
-
-        if (!this.canvasInstance.isInitialized()) return;
-
-        // changeHandler is called upon any tiny change in excalidraw. button clicked, hover, etc.
-        // make sure only when a new element is added, we actually save something.
-        const isNewSceneVersion = this.canvasInstance.isNewSceneVersion();
-        /**
-         * FIXME: however, we might want to make an exception, if viewport changed, since viewport
-         *        is desired to save? (add) and appState background, and some things
-         */
-
-        // upon updateScene, onchange is called, even though "nothing really changed" that is worth saving
-        const isNotInitialScene = !this.canvasInstance.isInitialScene();
-        const shouldSave = isNewSceneVersion && isNotInitialScene;
-
-        if (shouldSave) {
-            this.canvasInstance.updateSceneVersion();
-            this.saveData();
-        }
-    }
-
-}
-
-async function setupFonts() {
-    if (window.EXCALIDRAW_ASSET_PATH) {
-        return;
-    }
-
-    // currently required by excalidraw, in order to allows self-hosting fonts locally.
-    // this avoids making excalidraw load the fonts from an external CDN.
-    let path: string;
-    if (!glob.isDev) {
-        path = `${window.location.pathname}/node_modules/@excalidraw/excalidraw/dist/prod`;
-    } else {
-        path = (await import("../../../../../node_modules/@excalidraw/excalidraw/dist/prod/fonts/Excalifont/Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2?url")).default;
-        let pathComponents = path.split("/");
-        path = pathComponents.slice(0, pathComponents.length - 2).join("/");
-    }
-
-    window.EXCALIDRAW_ASSET_PATH = path;
-}
diff --git a/apps/client/src/widgets/type_widgets/canvas/Canvas.css b/apps/client/src/widgets/type_widgets/canvas/Canvas.css
new file mode 100644
index 000000000..08b355318
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/canvas/Canvas.css
@@ -0,0 +1,38 @@
+.canvas-widget {
+    height: 100%;
+}
+
+.excalidraw .App-menu_top .buttonList {
+  display: flex;
+}
+
+/* Conflict between excalidraw and bootstrap classes keeps the menu hidden */
+/* https://github.com/zadam/trilium/issues/3780 */
+/* https://github.com/excalidraw/excalidraw/issues/6567 */
+.excalidraw .dropdown-menu {
+  display: block;
+}
+
+.excalidraw-wrapper {
+  height: 100%;
+}
+
+:root[dir="ltr"]
+.excalidraw
+.layer-ui__wrapper
+.zen-mode-transition.App-menu_bottom--transition-left {
+  transform: none;
+}
+
+/* collaboration not possible so hide the button */
+.CollabButton {
+  display: none !important;
+}
+
+.library-button {
+  display: none !important; /* library won't work without extra support which isn't currently implemented */
+}
+
+.note-detail-canvas > .canvas-render {
+  height: 100%;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/canvas/Canvas.tsx b/apps/client/src/widgets/type_widgets/canvas/Canvas.tsx
new file mode 100644
index 000000000..79f7f3795
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/canvas/Canvas.tsx
@@ -0,0 +1,73 @@
+import { Excalidraw } from "@excalidraw/excalidraw";
+import { TypeWidgetProps } from "../type_widget";
+import "@excalidraw/excalidraw/index.css";
+import { useNoteLabelBoolean } from "../../react/hooks";
+import { useCallback, useMemo, useRef } from "preact/hooks";
+import { type ExcalidrawImperativeAPI, type AppState } from "@excalidraw/excalidraw/types";
+import options from "../../../services/options";
+import "./Canvas.css";
+import { NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+import { goToLinkExt } from "../../../services/link";
+import useCanvasPersistence from "./persistence";
+
+// currently required by excalidraw, in order to allows self-hosting fonts locally.
+// this avoids making excalidraw load the fonts from an external CDN.
+window.EXCALIDRAW_ASSET_PATH = `${window.location.pathname}/node_modules/@excalidraw/excalidraw/dist/prod`;
+
+export default function Canvas({ note, noteContext }: TypeWidgetProps) {
+    const apiRef = useRef<ExcalidrawImperativeAPI>(null);
+    const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
+    const themeStyle = useMemo(() => {
+        const documentStyle = window.getComputedStyle(document.documentElement);
+        return documentStyle.getPropertyValue("--theme-style")?.trim() as AppState["theme"];
+    }, []);
+    const persistence = useCanvasPersistence(note, noteContext, apiRef, themeStyle, isReadOnly);
+
+    /** Use excalidraw's native zoom instead of the global zoom. */
+    const onWheel = useCallback((e: MouseEvent) => {
+        if (e.ctrlKey) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }, []);
+
+    const onLinkOpen = useCallback((element: NonDeletedExcalidrawElement, event: CustomEvent) => {
+        let link = element.link;
+        if (!link) {
+            return false;
+        }
+
+        if (link.startsWith("root/")) {
+            link = "#" + link;
+        }
+
+        const { nativeEvent } = event.detail;
+        event.preventDefault();
+        return goToLinkExt(nativeEvent, link, null);
+    }, []);
+
+    return (
+        <div className="canvas-render" onWheel={onWheel}>
+            <div className="excalidraw-wrapper">
+                <Excalidraw
+                    excalidrawAPI={api => apiRef.current = api}
+                    theme={themeStyle}
+                    viewModeEnabled={isReadOnly || options.is("databaseReadonly")}
+                    zenModeEnabled={false}
+                    isCollaborating={false}
+                    detectScroll={false}
+                    handleKeyboardGlobally={false}
+                    autoFocus={false}
+                    UIOptions={{
+                        canvasActions: {
+                            saveToActiveFile: false,
+                            export: false
+                        }
+                    }}
+                    onLinkOpen={onLinkOpen}
+                    {...persistence}
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/canvas/persistence.ts b/apps/client/src/widgets/type_widgets/canvas/persistence.ts
new file mode 100644
index 000000000..17dad2cfb
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/canvas/persistence.ts
@@ -0,0 +1,258 @@
+import { RefObject } from "preact";
+import NoteContext from "../../../components/note_context";
+import FNote from "../../../entities/fnote";
+import { AppState, BinaryFileData, ExcalidrawImperativeAPI, ExcalidrawProps, LibraryItem } from "@excalidraw/excalidraw/types";
+import { useRef } from "preact/hooks";
+import { useEditorSpacedUpdate } from "../../react/hooks";
+import { ExcalidrawElement, NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+import { exportToSvg, getSceneVersion } from "@excalidraw/excalidraw";
+import server from "../../../services/server";
+
+interface AttachmentMetadata {
+    title: string;
+    attachmentId: string;
+}
+
+export interface CanvasContent {
+    elements: ExcalidrawElement[];
+    files: BinaryFileData[];
+    appState: Partial<AppState>;
+}
+
+export default function useCanvasPersistence(note: FNote, noteContext: NoteContext | null | undefined, apiRef: RefObject<ExcalidrawImperativeAPI>, theme: AppState["theme"], isReadOnly: boolean): Partial<ExcalidrawProps> {
+    const libraryChanged = useRef(false);
+
+    /**
+     * needed to ensure, that multipleOnChangeHandler calls do not trigger a save.
+     * we compare the scene version as suggested in:
+     * https://github.com/excalidraw/excalidraw/issues/3014#issuecomment-778115329
+     *
+     * info: sceneVersions are not incrementing. it seems to be a pseudo-random number
+     */
+    const currentSceneVersion = useRef(0);
+
+    // these 2 variables are needed to compare the library state (all library items) after loading to the state when the library changed. So we can find attachments to be deleted.
+    //every libraryitem is saved on its own json file in the attachments of the note.
+    const libraryCache = useRef<LibraryItem[]>([]);
+    const attachmentMetadata = useRef<AttachmentMetadata[]>([]);
+
+    const spacedUpdate = useEditorSpacedUpdate({
+        note,
+        noteContext,
+        onContentChange(newContent) {
+            const api = apiRef.current;
+            if (!api) return;
+
+            libraryCache.current = [];
+            attachmentMetadata.current = [];
+            currentSceneVersion.current = -1;
+
+            // load saved content into excalidraw canvas
+            let content: CanvasContent = {
+                elements: [],
+                files: [],
+                appState: {}
+            };
+            if (newContent) {
+                try {
+                    content = JSON.parse(newContent) as CanvasContent;
+                } catch (err) {
+                    console.error("Error parsing content. Probably note.type changed. Starting with empty canvas", note, err);
+                }
+            }
+
+            loadData(api, content, theme);
+
+            // load the library state
+            loadLibrary(note).then(({ libraryItems, metadata }) => {
+                // Update the library and save to independent variables
+                api.updateLibrary({ libraryItems: libraryItems, merge: false });
+
+                // save state of library to compare it to the new state later.
+                libraryCache.current = libraryItems;
+                attachmentMetadata.current = metadata;
+            });
+        },
+        async getData() {
+            const api = apiRef.current;
+            if (!api) return;
+            const { content, svg } = await getData(api);
+            const attachments = [{ role: "image", title: "canvas-export.svg", mime: "image/svg+xml", content: svg, position: 0 }];
+
+            // libraryChanged is unset in dataSaved()
+            if (libraryChanged.current) {
+                // there's no separate method to get library items, so have to abuse this one
+                const libraryItems = await api.updateLibrary({
+                    libraryItems() {
+                        return [];
+                    },
+                    merge: true
+                });
+
+                // excalidraw saves the library as a own state. the items are saved to libraryItems. then we compare the library right now with a libraryitemcache. The cache is filled when we first load the Library into the note.
+                //We need the cache to delete old attachments later in the server.
+
+                const libraryItemsMissmatch = libraryCache.current.filter((obj1) => !libraryItems.some((obj2: LibraryItem) => obj1.id === obj2.id));
+
+                // before we saved the metadata of the attachments in a cache. the title of the attachment is a combination of libraryitem  ´s ID und it´s name.
+                // we compare the library items in the libraryitemmissmatch variable (this one saves all libraryitems that are different to the state right now. E.g. you delete 1 item, this item is saved as mismatch)
+                // then we combine its id and title and search the according attachmentID.
+
+                const matchingItems = attachmentMetadata.current.filter((meta) => {
+                    // Loop through the second array and check for a match
+                    return libraryItemsMissmatch.some((item) => {
+                        // Combine the `name` and `id` from the second array
+                        const combinedTitle = `${item.id}${item.name}`;
+                        return meta.title === combinedTitle;
+                    });
+                });
+
+                // we save the attachment ID`s in a variable and delete every attachmentID. Now the items that the user deleted will be deleted.
+                const attachmentIds = matchingItems.map((item) => item.attachmentId);
+
+                //delete old attachments that are no longer used
+                for (const item of attachmentIds) {
+                    await server.remove(`attachments/${item}`);
+                }
+
+                let position = 10;
+
+                // prepare data to save to server e.g. new library items.
+                for (const libraryItem of libraryItems) {
+                    attachments.push({
+                        role: "canvasLibraryItem",
+                        title: libraryItem.id + libraryItem.name,
+                        mime: "application/json",
+                        content: JSON.stringify(libraryItem),
+                        position: position
+                    });
+
+                    position += 10;
+                }
+            }
+
+            return {
+                content: JSON.stringify(content),
+                attachments
+            };
+        },
+        dataSaved() {
+            libraryChanged.current = false;
+        }
+    });
+
+    return {
+        onChange: () => {
+            if (!apiRef.current || isReadOnly) return;
+            const oldSceneVersion = currentSceneVersion.current;
+            const newSceneVersion = getSceneVersion(apiRef.current.getSceneElements());
+
+            if (newSceneVersion !== oldSceneVersion) {
+                spacedUpdate.resetUpdateTimer();
+                spacedUpdate.scheduleUpdate();
+                currentSceneVersion.current = newSceneVersion;
+            }
+        },
+        onLibraryChange: () => {
+            libraryChanged.current = true;
+            spacedUpdate.resetUpdateTimer();
+            spacedUpdate.scheduleUpdate();
+        }
+    }
+}
+
+async function getData(api: ExcalidrawImperativeAPI) {
+    const elements = api.getSceneElements();
+    const appState = api.getAppState();
+
+    /**
+     * A file is not deleted, even though removed from canvas. Therefore, we only keep
+     * files that are referenced by an element. Maybe this will change with a new excalidraw version?
+     */
+    const files = api.getFiles();
+    // parallel svg export to combat bitrot and enable rendering image for note inclusion, preview, and share
+    const svg = await exportToSvg({
+        elements,
+        appState,
+        exportPadding: 5, // 5 px padding
+        files
+    });
+    const svgString = svg.outerHTML;
+
+    const activeFiles: Record<string, BinaryFileData> = {};
+    elements.forEach((element: NonDeletedExcalidrawElement) => {
+        if ("fileId" in element && element.fileId) {
+            activeFiles[element.fileId] = files[element.fileId];
+        }
+    });
+
+    const content = {
+        type: "excalidraw",
+        version: 2,
+        elements,
+        files: activeFiles,
+        appState: {
+            scrollX: appState.scrollX,
+            scrollY: appState.scrollY,
+            zoom: appState.zoom,
+            gridModeEnabled: appState.gridModeEnabled
+        }
+    };
+
+    return {
+        content,
+        svg: svgString
+    }
+}
+
+function loadData(api: ExcalidrawImperativeAPI, content: CanvasContent, theme: AppState["theme"]) {
+    const { elements, files } = content;
+    const appState: Partial<AppState> = content.appState ?? {};
+    appState.theme = theme;
+
+    // files are expected in an array when loading. they are stored as a key-index object
+    // see example for loading here:
+    // https://github.com/excalidraw/excalidraw/blob/c5a7723185f6ca05e0ceb0b0d45c4e3fbcb81b2a/src/packages/excalidraw/example/App.js#L68
+    const fileArray: BinaryFileData[] = [];
+    for (const fileId in files) {
+        const file = files[fileId];
+        // TODO: dataURL is replaceable with a trilium image url
+        //       maybe we can save normal images (pasted) with base64 data url, and trilium images
+        //       with their respective url! nice
+        // file.dataURL = "http://localhost:8080/api/images/ltjOiU8nwoZx/start.png";
+        fileArray.push(file);
+    }
+
+    // Update the scene
+    // TODO: Fix type of sceneData
+    api.updateScene({
+        elements,
+        appState: appState as AppState
+    });
+    api.addFiles(fileArray);
+    api.history.clear();
+}
+
+async function loadLibrary(note: FNote) {
+    return Promise.all(
+        (await note.getAttachmentsByRole("canvasLibraryItem")).map(async (attachment) => {
+            const blob = await attachment.getBlob();
+            return {
+                blob, // Save the blob for libraryItems
+                metadata: {
+                    // metadata to use in the cache variables for comparing old library state and new one. We delete unnecessary items later, calling the server directly
+                    attachmentId: attachment.attachmentId,
+                    title: attachment.title
+                }
+            };
+        })
+    ).then((results) => {
+        // Extract libraryItems from the blobs
+        const libraryItems = results.map((result) => result?.blob?.getJsonContentSafely()).filter((item) => !!item) as LibraryItem[];
+
+        // Extract metadata for each attachment
+        const metadata = results.map((result) => result.metadata);
+
+        return { libraryItems, metadata };
+    });
+}
diff --git a/apps/client/src/widgets/type_widgets/canvas_el.tsx b/apps/client/src/widgets/type_widgets/canvas_el.tsx
deleted file mode 100644
index b5018325d..000000000
--- a/apps/client/src/widgets/type_widgets/canvas_el.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import "@excalidraw/excalidraw/index.css";
-import { Excalidraw, getSceneVersion, exportToSvg } from "@excalidraw/excalidraw";
-import { AppState, BinaryFileData, ExcalidrawImperativeAPI, ExcalidrawProps, LibraryItem } from "@excalidraw/excalidraw/types";
-import { ExcalidrawElement, NonDeletedExcalidrawElement, Theme } from "@excalidraw/excalidraw/element/types";
-import { useCallback } from "preact/hooks";
-import linkService from "../../services/link.js";
-
-export interface CanvasContent {
-    elements: ExcalidrawElement[];
-    files: BinaryFileData[];
-    appState: Partial<AppState>;
-}
-
-/** Indicates that it is fresh. excalidraw scene version is always >0 */
-const SCENE_VERSION_INITIAL = -1;
-
-export default class Canvas {
-
-    private currentSceneVersion: number;
-    private opts: ExcalidrawProps;
-    private excalidrawApi!: ExcalidrawImperativeAPI;
-    private initializedPromise: JQuery.Deferred<void>;
-
-    constructor(opts: ExcalidrawProps) {
-        this.opts = opts;
-        this.currentSceneVersion = SCENE_VERSION_INITIAL;
-        this.initializedPromise = $.Deferred();
-    }
-
-    async waitForApiToBecomeAvailable() {
-        while (!this.excalidrawApi) {
-            await this.initializedPromise;
-        }
-    }
-
-    createCanvasElement() {
-        return <CanvasElement
-            {...this.opts}
-            excalidrawAPI={api => {
-                this.excalidrawApi = api;
-                this.initializedPromise.resolve();
-            }}
-        />
-    }
-
-    /**
-     * needed to ensure, that multipleOnChangeHandler calls do not trigger a save.
-     * we compare the scene version as suggested in:
-     * https://github.com/excalidraw/excalidraw/issues/3014#issuecomment-778115329
-     *
-     * info: sceneVersions are not incrementing. it seems to be a pseudo-random number
-     */
-    isNewSceneVersion() {
-        const sceneVersion = this.getSceneVersion();
-
-        return (
-            this.currentSceneVersion === SCENE_VERSION_INITIAL || // initial scene version update
-            this.currentSceneVersion !== sceneVersion
-        ); // ensure scene changed
-    }
-
-    getSceneVersion() {
-        const elements = this.excalidrawApi.getSceneElements();
-        return getSceneVersion(elements);
-    }
-
-    updateSceneVersion() {
-        this.currentSceneVersion = this.getSceneVersion();
-    }
-
-    resetSceneVersion() {
-        this.currentSceneVersion = SCENE_VERSION_INITIAL;
-    }
-
-    isInitialScene() {
-        return this.currentSceneVersion === SCENE_VERSION_INITIAL;
-    }
-
-    isInitialized() {
-        return !!this.excalidrawApi;
-    }
-
-    resetScene(theme: Theme) {
-        this.excalidrawApi.updateScene({
-            elements: [],
-            appState: {
-                theme
-            }
-        });
-    }
-
-    loadData(content: CanvasContent, theme: Theme) {
-        const { elements, files } = content;
-        const appState: Partial<AppState> = content.appState ?? {};
-        appState.theme = theme;
-
-        // files are expected in an array when loading. they are stored as a key-index object
-        // see example for loading here:
-        // https://github.com/excalidraw/excalidraw/blob/c5a7723185f6ca05e0ceb0b0d45c4e3fbcb81b2a/src/packages/excalidraw/example/App.js#L68
-        const fileArray: BinaryFileData[] = [];
-        for (const fileId in files) {
-            const file = files[fileId];
-            // TODO: dataURL is replaceable with a trilium image url
-            //       maybe we can save normal images (pasted) with base64 data url, and trilium images
-            //       with their respective url! nice
-            // file.dataURL = "http://localhost:8080/api/images/ltjOiU8nwoZx/start.png";
-            fileArray.push(file);
-        }
-
-        // Update the scene
-        // TODO: Fix type of sceneData
-        this.excalidrawApi.updateScene({
-            elements,
-            appState: appState as AppState
-        });
-        this.excalidrawApi.addFiles(fileArray);
-        this.excalidrawApi.history.clear();
-    }
-
-    async getData() {
-        const elements = this.excalidrawApi.getSceneElements();
-        const appState = this.excalidrawApi.getAppState();
-
-        /**
-         * A file is not deleted, even though removed from canvas. Therefore, we only keep
-         * files that are referenced by an element. Maybe this will change with a new excalidraw version?
-         */
-        const files = this.excalidrawApi.getFiles();
-        // parallel svg export to combat bitrot and enable rendering image for note inclusion, preview, and share
-        const svg = await exportToSvg({
-            elements,
-            appState,
-            exportPadding: 5, // 5 px padding
-            files
-        });
-        const svgString = svg.outerHTML;
-
-        const activeFiles: Record<string, BinaryFileData> = {};
-        elements.forEach((element: NonDeletedExcalidrawElement) => {
-            if ("fileId" in element && element.fileId) {
-                activeFiles[element.fileId] = files[element.fileId];
-            }
-        });
-
-        const content = {
-            type: "excalidraw",
-            version: 2,
-            elements,
-            files: activeFiles,
-            appState: {
-                scrollX: appState.scrollX,
-                scrollY: appState.scrollY,
-                zoom: appState.zoom,
-                gridModeEnabled: appState.gridModeEnabled
-            }
-        };
-
-        return {
-            content,
-            svg: svgString
-        }
-    }
-
-    async getLibraryItems() {
-        return this.excalidrawApi.updateLibrary({
-            libraryItems() {
-                return [];
-            },
-            merge: true
-        });
-    }
-
-    async updateLibrary(libraryItems: LibraryItem[]) {
-        this.excalidrawApi.updateLibrary({ libraryItems, merge: false });
-    }
-
-}
-
-function CanvasElement(opts: ExcalidrawProps) {
-    return (
-        <div className="excalidraw-wrapper">
-            <Excalidraw
-                {...opts}
-                onLinkOpen={useCallback((element: NonDeletedExcalidrawElement, event: CustomEvent) => {
-                    let link = element.link;
-                    if (!link) {
-                        return false;
-                    }
-
-                    if (link.startsWith("root/")) {
-                        link = "#" + link;
-                    }
-
-                    const { nativeEvent } = event.detail;
-                    event.preventDefault();
-                    return linkService.goToLinkExt(nativeEvent, link, null);
-                }, [])}
-            />
-        </div>
-    );
-}
diff --git a/apps/client/src/widgets/type_widgets/code/BackendLog.tsx b/apps/client/src/widgets/type_widgets/code/BackendLog.tsx
new file mode 100644
index 000000000..f045ed562
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/code/BackendLog.tsx
@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import "./code.css";
+import { CodeEditor } from "./Code";
+import CodeMirror from "@triliumnext/codemirror";
+import server from "../../../services/server";
+import { useTriliumEvent } from "../../react/hooks";
+import { TypeWidgetProps } from "../type_widget";
+
+export default function BackendLog({ ntxId, parentComponent }: TypeWidgetProps) {
+    const [ content, setContent ] = useState<string>();
+    const editorRef = useRef<CodeMirror>(null);
+
+    function refresh() {
+        server.get<string>("backend-log").then(content => {
+            setContent(content);
+        });
+    }
+
+    useEffect(refresh, []);
+
+    // Scroll to end
+    useEffect(() => {
+        requestAnimationFrame(() => editorRef.current?.scrollToEnd());
+    }, [ content ]);
+
+    // React to refresh button.
+    useTriliumEvent("refreshData", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        refresh();
+    });
+
+    return (
+        <div className="backend-log-editor-container">
+            <CodeEditor
+                editorRef={editorRef}
+                ntxId={ntxId} parentComponent={parentComponent}
+                content={content ?? ""}
+                mime="text/plain"
+                readOnly
+                preferPerformance
+            />
+        </div>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/code/Code.tsx b/apps/client/src/widgets/type_widgets/code/Code.tsx
new file mode 100644
index 000000000..0c089b9a8
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/code/Code.tsx
@@ -0,0 +1,206 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { getThemeById, default as VanillaCodeMirror } from "@triliumnext/codemirror";
+import { TypeWidgetProps } from "../type_widget";
+import "./code.css";
+import CodeMirror, { CodeMirrorProps } from "./CodeMirror";
+import utils from "../../../services/utils";
+import { useEditorSpacedUpdate, useKeyboardShortcuts, useLegacyImperativeHandlers, useNoteBlob, useSyncedRef, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
+import { t } from "../../../services/i18n";
+import appContext, { CommandListenerData } from "../../../components/app_context";
+import TouchBar, { TouchBarButton } from "../../react/TouchBar";
+import { refToJQuerySelector } from "../../react/react_utils";
+import { CODE_THEME_DEFAULT_PREFIX as DEFAULT_PREFIX } from "../constants";
+import FNote from "../../../entities/fnote";
+
+interface CodeEditorProps {
+    /** By default, the code editor will try to match the color of the scrolling container to match the one from the theme for a full-screen experience. If the editor is embedded, it makes sense not to have this behaviour. */
+    noBackgroundChange?: boolean;
+}
+
+export interface EditableCodeProps extends TypeWidgetProps, Omit<CodeEditorProps, "onContentChanged"> {
+    // if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
+    debounceUpdate?: boolean;
+    lineWrapping?: boolean;
+    updateInterval?: number;
+    /** Invoked when the content of the note is changed, such as a different revision or a note switch. */
+    onContentChanged?: (content: string) => void;
+    /** Invoked after the content of the note has been uploaded to the server, using a spaced update. */
+    dataSaved?: () => void;
+}
+
+export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWidgetProps) {
+    const [ content, setContent ] = useState("");
+    const blob = useNoteBlob(note);
+
+    useEffect(() => {
+        if (!blob) return;
+
+        let newContent = blob.content;
+        if (viewScope?.viewMode === "source") {
+            newContent = formatViewSource(note, newContent);
+        }
+
+        setContent(newContent);
+    }, [ blob ]);
+
+    return (
+        <CodeEditor
+            ntxId={ntxId} parentComponent={parentComponent}
+            className="note-detail-readonly-code-content"
+            content={content}
+            mime={note.mime}
+            readOnly
+        />
+    )
+}
+
+function formatViewSource(note: FNote, content: string) {
+    if (note.type === "text") {
+        return utils.formatHtml(content);
+    }
+
+    if (note.type !== "code" && note.mime === "application/json" && content.length < 512_000) {
+        try {
+            return JSON.stringify(JSON.parse(content), null, 4);
+        } catch (e) {
+            // Fallback to content.
+        }
+    }
+
+    return content;
+}
+
+export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, onContentChanged, dataSaved, ...editorProps }: EditableCodeProps) {
+    const editorRef = useRef<VanillaCodeMirror>(null);
+    const containerRef = useRef<HTMLPreElement>(null);
+    const [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
+    const spacedUpdate = useEditorSpacedUpdate({
+        note,
+        noteContext,
+        getData: () => ({ content: editorRef.current?.getText() }),
+        onContentChange: (content) => {
+            const codeEditor = editorRef.current;
+            if (!codeEditor) return;
+            codeEditor.setText(content ?? "");
+            codeEditor.setMimeType(note.mime);
+            codeEditor.clearHistory();
+        },
+        dataSaved,
+        updateInterval
+    });
+
+    // make sure that script is saved before running it #4028
+    useLegacyImperativeHandlers({
+        async runActiveNoteCommand(params: CommandListenerData<"runActiveNote">) {
+            if (params.ntxId === ntxId) {
+                await spacedUpdate.updateNowIfNecessary();
+            }
+
+            return await parentComponent?.parent?.triggerCommand("runActiveNote", params);
+        }
+    });
+
+    useKeyboardShortcuts("code-detail", containerRef, parentComponent);
+
+    return (
+        <>
+            <CodeEditor
+                ntxId={ntxId} parentComponent={parentComponent}
+                editorRef={editorRef} containerRef={containerRef}
+                mime={note.mime}
+                className="note-detail-code-editor"
+                placeholder={t("editable_code.placeholder")}
+                vimKeybindings={vimKeymapEnabled}
+                tabIndex={300}
+                onContentChanged={() => {
+                    if (debounceUpdate) {
+                        spacedUpdate.resetUpdateTimer();
+                    }
+                    spacedUpdate.scheduleUpdate();
+                    if (editorRef.current && onContentChanged) {
+                        onContentChanged(editorRef.current.getText());
+                    }
+                }}
+                {...editorProps}
+            />
+
+            <TouchBar>
+                {(note?.mime.startsWith("application/javascript") || note?.mime === "text/x-sqlite;schema=trilium") && (
+                    <TouchBarButton icon="NSImageNameTouchBarPlayTemplate" click={() => appContext.triggerCommand("runActiveNote")} />
+                )}
+            </TouchBar>
+        </>
+    )
+}
+
+export function CodeEditor({ parentComponent, ntxId, containerRef: externalContainerRef, editorRef: externalEditorRef, mime, onInitialized, lineWrapping, noBackgroundChange, ...editorProps }: CodeEditorProps & CodeMirrorProps & Pick<TypeWidgetProps, "parentComponent" | "ntxId">) {
+    const codeEditorRef = useRef<VanillaCodeMirror>(null);
+    const containerRef = useSyncedRef(externalContainerRef);
+    const initialized = useRef($.Deferred());
+    const [ codeLineWrapEnabled ] = useTriliumOptionBool("codeLineWrapEnabled");
+    const [ codeNoteTheme ] = useTriliumOption("codeNoteTheme");
+
+    // React to background color.
+    const [ backgroundColor, setBackgroundColor ] = useState<string>();
+    useEffect(() => {
+        if (!backgroundColor || noBackgroundChange) return;
+        parentComponent?.$widget.closest(".scrolling-container").css("--code-background-color", backgroundColor);
+    }, [ backgroundColor ]);
+
+    // React to theme changes.
+    useEffect(() => {
+        if (codeEditorRef.current && codeNoteTheme.startsWith(DEFAULT_PREFIX)) {
+            const theme = getThemeById(codeNoteTheme.substring(DEFAULT_PREFIX.length));
+            if (theme) {
+                codeEditorRef.current.setTheme(theme).then(() => {
+                    const editor = containerRef.current?.querySelector(".cm-editor");
+                    if (!editor) return;
+                    const style = window.getComputedStyle(editor);
+                    setBackgroundColor(style.backgroundColor);
+                });
+            }
+        }
+    }, [ codeEditorRef, codeNoteTheme ]);
+
+    useTriliumEvent("executeWithCodeEditor", async ({ resolve, ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        await initialized.current.promise();
+        resolve(codeEditorRef.current!);
+    });
+
+    useTriliumEvent("executeWithContentElement", async ({ resolve, ntxId: eventNtxId}) => {
+        if (eventNtxId !== ntxId) return;
+        await initialized.current.promise();
+        resolve(refToJQuerySelector(containerRef));
+    });
+
+    useTriliumEvent("scrollToEnd", () => {
+        const editor = codeEditorRef.current;
+        if (!editor) return;
+        editor.scrollToEnd();
+        editor.focus();
+    });
+
+    useTriliumEvent("focusOnDetail", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        codeEditorRef.current?.focus();
+    });
+
+    return <CodeMirror
+        {...editorProps}
+        mime={mime}
+        editorRef={codeEditorRef}
+        containerRef={containerRef}
+        lineWrapping={lineWrapping ?? codeLineWrapEnabled}
+        onInitialized={() => {
+            if (externalContainerRef && containerRef.current) {
+                externalContainerRef.current = containerRef.current;
+            }
+            if (externalEditorRef && codeEditorRef.current) {
+                externalEditorRef.current = codeEditorRef.current;
+            }
+            initialized.current.resolve();
+            onInitialized?.();
+        }}
+    />;
+}
diff --git a/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx b/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx
new file mode 100644
index 000000000..ae4f849dd
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/code/CodeMirror.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useRef } from "preact/hooks";
+import { EditorConfig, default as VanillaCodeMirror } from "@triliumnext/codemirror";
+import { useSyncedRef } from "../../react/hooks";
+import { RefObject } from "preact";
+
+export interface CodeMirrorProps extends Omit<EditorConfig, "parent"> {
+    content?: string;
+    mime: string;
+    className?: string;
+    editorRef?: RefObject<VanillaCodeMirror>;
+    containerRef?: RefObject<HTMLPreElement>;
+    onInitialized?: () => void;
+}
+
+export default function CodeMirror({ className, content, mime, editorRef: externalEditorRef, containerRef: externalContainerRef, onInitialized, lineWrapping, ...extraOpts }: CodeMirrorProps) {
+    const parentRef = useSyncedRef(externalContainerRef);
+    const codeEditorRef = useRef<VanillaCodeMirror>();
+
+    // Create CodeMirror instance.
+    useEffect(() => {
+        if (!parentRef.current) return;
+
+        const codeEditor = new VanillaCodeMirror({
+            parent: parentRef.current,
+            ...extraOpts
+        });
+        codeEditorRef.current = codeEditor;
+        if (externalEditorRef) {
+            externalEditorRef.current = codeEditor;
+        }
+        onInitialized?.();
+
+        return () => codeEditor.destroy();
+    }, []);
+
+    // React to text changes.
+    useEffect(() => {
+        const codeEditor = codeEditorRef.current;
+        codeEditor?.setText(content ?? "");
+        codeEditor?.setMimeType(mime);
+        codeEditor?.clearHistory();
+    }, [content]);
+
+    // React to language change.
+    useEffect(() => {
+        codeEditorRef.current?.setMimeType(mime);
+    }, [ mime ]);
+
+    // React to line wrapping.
+    useEffect(() => codeEditorRef.current?.setLineWrapping(!!lineWrapping), [ lineWrapping ]);
+
+    return (
+        <pre ref={parentRef} className={className} />
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/code/code.css b/apps/client/src/widgets/type_widgets/code/code.css
new file mode 100644
index 000000000..3a8f25287
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/code/code.css
@@ -0,0 +1,34 @@
+/* #region Read-only code */
+.note-detail-readonly-code {
+    min-height: 50px;
+    position: relative;
+}
+/* #endregion */
+
+/* #region Editable code */
+.note-detail-code {
+    position: relative;
+    height: 100%;
+}
+
+.note-detail-code-editor {
+    min-height: 50px;
+    height: 100%;
+}
+/* #endregion */
+
+/* #region Backend log */
+.backend-log-editor-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.backend-log-editor {
+    flex-grow: 1;
+    width: 100%;
+    border: none;
+    resize: none;
+    margin-bottom: 0;
+}
+/* #endregion */
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/constants.ts b/apps/client/src/widgets/type_widgets/constants.ts
new file mode 100644
index 000000000..a8358e8a4
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/constants.ts
@@ -0,0 +1 @@
+export const CODE_THEME_DEFAULT_PREFIX = "default:";
diff --git a/apps/client/src/widgets/type_widgets/content/backend_log.ts b/apps/client/src/widgets/type_widgets/content/backend_log.ts
deleted file mode 100644
index b6f78f9fa..000000000
--- a/apps/client/src/widgets/type_widgets/content/backend_log.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import server from "../../../services/server.js";
-import AbstractCodeTypeWidget from "../abstract_code_type_widget.js";
-import type { EventData } from "../../../components/app_context.js";
-import type { EditorConfig } from "@triliumnext/codemirror";
-
-const TPL = /*html*/`<div style="height: 100%; display: flex; flex-direction: column;">
-    <style>
-        .backend-log-editor {
-            flex-grow: 1;
-            width: 100%;
-            border: none;
-            resize: none;
-            margin-bottom: 0;
-        }
-    </style>
-
-    <pre class="backend-log-editor"></pre
-</div>`;
-
-export default class BackendLogWidget extends AbstractCodeTypeWidget {
-
-    private $refreshBackendLog!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$editor = this.$widget.find(".backend-log-editor");
-        super.doRender();
-    }
-
-    async refresh() {
-        await this.load();
-    }
-
-    async refreshDataEvent({ ntxId }: EventData<"refreshData">) {
-        if (ntxId !== this.noteContext?.ntxId) {
-            return;
-        }
-
-        this.refresh();
-    }
-
-    getExtraOpts(): Partial<EditorConfig> {
-        return {
-            readOnly: true,
-            preferPerformance: true
-        };
-    }
-
-    async load() {
-        const content = await server.get<string>("backend-log");
-        await this.initialized;
-
-        this._update(
-            {
-                mime: "text/plain"
-            },
-            content
-        );
-        this.show();
-        this.scrollToEnd();
-    }
-
-}
diff --git a/apps/client/src/widgets/type_widgets/content_widget.tsx b/apps/client/src/widgets/type_widgets/content_widget.tsx
deleted file mode 100644
index 1d94b0d09..000000000
--- a/apps/client/src/widgets/type_widgets/content_widget.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import type FNote from "../../entities/fnote.js";
-import type NoteContextAwareWidget from "../note_context_aware_widget.js";
-import { t } from "../../services/i18n.js";
-import type { JSX } from "preact/jsx-runtime";
-import AppearanceSettings from "./options/appearance.jsx";
-import { disposeReactWidget, renderReactWidgetAtElement } from "../react/react_utils.jsx";
-import ImageSettings from "./options/images.jsx";
-import AdvancedSettings from "./options/advanced.jsx";
-import InternationalizationOptions from "./options/i18n.jsx";
-import SyncOptions from "./options/sync.jsx";
-import EtapiSettings from "./options/etapi.js";
-import BackupSettings from "./options/backup.js";
-import SpellcheckSettings from "./options/spellcheck.js";
-import PasswordSettings from "./options/password.jsx";
-import ShortcutSettings from "./options/shortcuts.js";
-import TextNoteSettings from "./options/text_notes.jsx";
-import CodeNoteSettings from "./options/code_notes.jsx";
-import OtherSettings from "./options/other.jsx";
-import BackendLogWidget from "./content/backend_log.js";
-import MultiFactorAuthenticationSettings from "./options/multi_factor_authentication.js";
-import AiSettings from "./options/ai_settings.jsx";
-import { unmountComponentAtNode } from "preact/compat";
-
-const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
-    <style>
-        .type-contentWidget .note-detail {
-            height: 100%;
-        }
-
-        .note-detail-content-widget {
-            height: 100%;
-        }
-
-        .note-detail-content-widget-content {
-            padding: 15px;
-            height: 100%;
-        }
-
-        .note-detail.full-height .note-detail-content-widget-content {
-            padding: 0;
-        }
-    </style>
-
-    <div class="note-detail-content-widget-content"></div>
-</div>`;
-
-export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsAi" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced";
-
-const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextAwareWidget)[] | JSX.Element)> = {
-    _optionsAppearance: <AppearanceSettings />,
-    _optionsShortcuts: <ShortcutSettings />,
-    _optionsTextNotes: <TextNoteSettings />,
-    _optionsCodeNotes: <CodeNoteSettings />,
-    _optionsImages: <ImageSettings />,
-    _optionsSpellcheck: <SpellcheckSettings />,
-    _optionsPassword: <PasswordSettings />,
-    _optionsMFA: <MultiFactorAuthenticationSettings />,
-    _optionsEtapi: <EtapiSettings />,
-    _optionsBackup: <BackupSettings />,
-    _optionsSync: <SyncOptions />,
-    _optionsAi: <AiSettings />,
-    _optionsOther: <OtherSettings />,
-    _optionsLocalization: <InternationalizationOptions />,
-    _optionsAdvanced: <AdvancedSettings />,
-    _backendLog: [
-        BackendLogWidget
-    ]
-};
-
-/**
- * Type widget that displays one or more widgets based on the type of note, generally used for options and other interactive notes such as the backend log.
- *
- * One important aspect is that, like its parent {@link TypeWidget}, the content widgets don't receive all events by default and they must be manually added
- * to the propagation list in {@link TypeWidget.handleEventInChildren}.
- */
-export default class ContentWidgetTypeWidget extends TypeWidget {
-    private $content!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "contentWidget";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$content = this.$widget.find(".note-detail-content-widget-content");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        unmountComponentAtNode(this.$content[0]);
-        this.$content.empty();
-        this.children = [];
-
-        const contentWidgets = (CONTENT_WIDGETS as Record<string, (typeof NoteContextAwareWidget[] | JSX.Element)>)[note.noteId];
-        this.$content.toggleClass("options", note.noteId.startsWith("_options"));
-
-        // Unknown widget.
-        if (!contentWidgets) {
-            this.$content.append(t("content_widget.unknown_widget", { id: note.noteId }));
-            return;
-        }
-
-        // Legacy widget.
-        if (Array.isArray(contentWidgets)) {
-            for (const clazz of contentWidgets) {
-                const widget = new clazz();
-
-                if (this.noteContext) {
-                    await widget.handleEvent("setNoteContext", { noteContext: this.noteContext });
-                }
-                this.child(widget);
-
-                this.$content.append(widget.render());
-                await widget.refresh();
-            }
-            return;
-        }
-
-        // React widget.
-        renderReactWidgetAtElement(this, contentWidgets, this.$content[0]);
-    }
-
-    cleanup(): void {
-        if (this.noteId) {
-            const contentWidgets = (CONTENT_WIDGETS as Record<string, (typeof NoteContextAwareWidget[] | JSX.Element)>)[this.noteId];
-            if (contentWidgets && !Array.isArray(contentWidgets)) {
-                disposeReactWidget(this.$content[0]);
-            }
-        }
-
-        super.cleanup();
-    }
-
-}
diff --git a/apps/client/src/widgets/type_widgets/doc.ts b/apps/client/src/widgets/type_widgets/doc.ts
deleted file mode 100644
index 809c014e0..000000000
--- a/apps/client/src/widgets/type_widgets/doc.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import type { EventData } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-import renderDoc from "../../services/doc_renderer.js";
-import TypeWidget from "./type_widget.js";
-
-const TPL = /*html*/`<div class="note-detail-doc note-detail-printable">
-    <style>
-        .note-detail-doc-content {
-            padding: 15px;
-        }
-
-        .note-detail-doc-content pre {
-            border: 0;
-            box-shadow: var(--code-block-box-shadow);
-            padding: 15px;
-            border-radius: 5px;
-        }
-
-        .note-detail-doc-content code {
-            font-variant: none;
-        }
-
-        .note-detail-doc-content pre:not(.hljs) {
-            background-color: var(--accented-background-color);
-            border: 1px solid var(--main-border-color);
-        }
-
-        .note-detail-doc.contextual-help {
-            padding-bottom: 0;
-        }
-
-        .note-detail-doc.contextual-help h2,
-        .note-detail-doc.contextual-help h3,
-        .note-detail-doc.contextual-help h4,
-        .note-detail-doc.contextual-help h5,
-        .note-detail-doc.contextual-help h6 {
-            font-size: 1.25rem;
-            background-color: var(--main-background-color);
-            position: sticky;
-            top: 0;
-            z-index: 50;
-            margin: 0;
-            padding-bottom: 0.25em;
-        }
-
-        img {
-            max-width: 100%;
-            height: auto;
-        }
-
-        td img {
-            max-width: 40vw;
-        }
-
-        figure.table {
-            overflow: auto !important;
-        }
-    </style>
-
-    <div class="note-detail-doc-content ck-content"></div>
-</div>`;
-
-export default class DocTypeWidget extends TypeWidget {
-
-    private $content!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "doc";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$content = this.$widget.find(".note-detail-doc-content");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        this.initialized = renderDoc(note).then(($content) => {
-            this.$content.html($content.html());
-        });
-        this.$widget.toggleClass("contextual-help", this.noteContext?.viewScope?.viewMode === "contextual-help");
-    }
-
-    async executeWithContentElementEvent({ resolve, ntxId }: EventData<"executeWithContentElement">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        await this.initialized;
-
-        resolve(this.$content);
-    }
-
-}
diff --git a/apps/client/src/widgets/type_widgets/editable_code.ts b/apps/client/src/widgets/type_widgets/editable_code.ts
deleted file mode 100644
index cdf4b912e..000000000
--- a/apps/client/src/widgets/type_widgets/editable_code.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { CommandListenerData, EventData } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-import { t } from "../../services/i18n.js";
-import keyboardActionService from "../../services/keyboard_actions.js";
-import options from "../../services/options.js";
-import AbstractCodeTypeWidget from "./abstract_code_type_widget.js";
-import appContext from "../../components/app_context.js";
-import type { TouchBarItem } from "../../components/touch_bar.js";
-import { hasTouchBar } from "../../services/utils.js";
-import type { EditorConfig } from "@triliumnext/codemirror";
-
-const TPL = /*html*/`
-<div class="note-detail-code note-detail-printable">
-    <style>
-    .note-detail-code {
-        position: relative;
-        height: 100%;
-    }
-
-    .note-detail-code-editor {
-        min-height: 50px;
-        height: 100%;
-    }
-    </style>
-
-    <div class="note-detail-code-editor"></div>
-</div>`;
-
-export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
-
-    private debounceUpdate: boolean;
-
-    /**
-     * @param debounceUpdate if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
-     */
-    constructor(debounceUpdate: boolean = false) {
-        super();
-        this.debounceUpdate = debounceUpdate;
-    }
-
-    static getType() {
-        return "editableCode";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-        this.$editor = this.$widget.find(".note-detail-code-editor");
-
-        keyboardActionService.setupActionsForElement("code-detail", this.$widget, this);
-
-        super.doRender();
-    }
-
-    getExtraOpts(): Partial<EditorConfig> {
-        return {
-            placeholder: t("editable_code.placeholder"),
-            vimKeybindings: options.is("vimKeymapEnabled"),
-            onContentChanged: () => {
-                if (this.debounceUpdate) {
-                    this.spacedUpdate.resetUpdateTimer();
-                }
-
-                this.spacedUpdate.scheduleUpdate();
-            },
-            tabIndex: 300
-        }
-    }
-
-    async doRefresh(note: FNote) {
-        const blob = await this.note?.getBlob();
-
-        await this.spacedUpdate.allowUpdateWithoutChange(() => {
-            this._update(note, blob?.content ?? "");
-        });
-
-        this.show();
-
-        if (this.parent && hasTouchBar) {
-            this.triggerCommand("refreshTouchBar");
-        }
-    }
-
-    getData() {
-        return {
-            content: this.codeEditor.getText()
-        };
-    }
-
-    buildTouchBarCommand({ TouchBar, buildIcon }: CommandListenerData<"buildTouchBar">) {
-        const items: TouchBarItem[] = [];
-        const note = this.note;
-
-        if (note?.mime.startsWith("application/javascript") || note?.mime === "text/x-sqlite;schema=trilium") {
-            items.push(new TouchBar.TouchBarButton({
-                icon: buildIcon("NSImageNameTouchBarPlayTemplate"),
-                click: () => appContext.triggerCommand("runActiveNote")
-            }));
-        }
-
-        return items;
-    }
-
-}
diff --git a/apps/client/src/widgets/type_widgets/editable_text.ts b/apps/client/src/widgets/type_widgets/editable_text.ts
deleted file mode 100644
index cbc35832e..000000000
--- a/apps/client/src/widgets/type_widgets/editable_text.ts
+++ /dev/null
@@ -1,638 +0,0 @@
-import utils, { hasTouchBar } from "../../services/utils.js";
-import keyboardActionService from "../../services/keyboard_actions.js";
-import froca from "../../services/froca.js";
-import noteCreateService from "../../services/note_create.js";
-import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
-import link from "../../services/link.js";
-import appContext, { type CommandListenerData, type EventData } from "../../components/app_context.js";
-import dialogService from "../../services/dialog.js";
-import options from "../../services/options.js";
-import toast from "../../services/toast.js";
-import { buildSelectedBackgroundColor } from "../../components/touch_bar.js";
-import { buildConfig, BuildEditorOptions, OPEN_SOURCE_LICENSE_KEY } from "./ckeditor/config.js";
-import type FNote from "../../entities/fnote.js";
-import { PopupEditor, ClassicEditor, EditorWatchdog, type CKTextEditor, type MentionFeed, type WatchdogConfig, EditorConfig } from "@triliumnext/ckeditor5";
-import { updateTemplateCache } from "./ckeditor/snippets.js";
-
-export type BoxSize = "small" | "medium" | "full";
-
-const TPL = /*html*/`
-<div class="note-detail-editable-text note-detail-printable">
-    <style>
-    .note-detail-editable-text {
-        font-family: var(--detail-font-family);
-        padding-inline-start: 14px;
-        padding-top: 10px;
-        height: 100%;
-    }
-
-    /* Workaround for #1327 */
-    body.desktop.electron .note-detail-editable-text {
-        letter-spacing: -0.01px;
-    }
-
-    body.mobile .note-detail-editable-text {
-        padding-inline-start: 4px;
-    }
-
-    .note-detail-editable-text a:hover {
-        cursor: pointer;
-    }
-
-    .note-detail-editable-text a[href^="http://"], .note-detail-editable-text a[href^="https://"] {
-        cursor: text !important;
-    }
-
-    .note-detail-editable-text *:not(figure, .include-note, hr):first-child {
-        margin-top: 0 !important;
-    }
-
-    .note-detail-editable-text h2 { font-size: 1.6em; }
-    .note-detail-editable-text h3 { font-size: 1.4em; }
-    .note-detail-editable-text h4 { font-size: 1.2em; }
-    .note-detail-editable-text h5 { font-size: 1.1em; }
-    .note-detail-editable-text h6 { font-size: 1.0em; }
-
-    body.heading-style-markdown .note-detail-editable-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
-    body.heading-style-markdown .note-detail-editable-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
-    body.heading-style-markdown .note-detail-editable-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
-    body.heading-style-markdown .note-detail-editable-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
-    body.heading-style-markdown .note-detail-editable-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }
-
-    body.heading-style-underline .note-detail-editable-text h2 { border-bottom: 1px solid var(--main-border-color); }
-    body.heading-style-underline .note-detail-editable-text h3 { border-bottom: 1px solid var(--main-border-color); }
-    body.heading-style-underline .note-detail-editable-text h4:not(.include-note-title) { border-bottom: 1px solid var(--main-border-color); }
-    body.heading-style-underline .note-detail-editable-text h5 { border-bottom: 1px solid var(--main-border-color); }
-    body.heading-style-underline .note-detail-editable-text h6 { border-bottom: 1px solid var(--main-border-color); }
-
-    .note-detail-editable-text-editor {
-        padding-top: 10px;
-        border: 0 !important;
-        box-shadow: none !important;
-        min-height: 50px;
-        height: 100%;
-    }
-    </style>
-
-    <div class="note-detail-editable-text-editor use-tn-links" tabindex="300"></div>
-</div>
-`;
-
-/**
- * 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 {
-
-    private contentLanguage?: string | null;
-    private watchdog!: EditorWatchdog<ClassicEditor | PopupEditor>;
-
-    private $editor!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "editableText";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$editor = this.$widget.find(".note-detail-editable-text-editor");
-
-        this.initialized = this.initEditor();
-
-        keyboardActionService.setupActionsForElement("text-detail", this.$widget, this);
-
-        this.setupImageOpening(false);
-
-        super.doRender();
-    }
-
-    async initEditor() {
-        const isClassicEditor = utils.isMobile() || options.get("textNoteEditorType") === "ckeditor-classic";
-
-        // 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();
-
-        const config: WatchdogConfig = {
-            // 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
-            // restarting the editor. This prevents an infinite restart loop.
-            minimumNonErrorTimePeriod: 5000,
-            // A threshold specifying the number of errors (defaults to 3).
-            // After this limit is reached and the time between last errors
-            // is shorter than minimumNonErrorTimePeriod, the watchdog changes
-            // its state to crashedPermanently, and it stops restarting the editor.
-            // This prevents an infinite restart loop.
-            crashNumberLimit: 10,
-            // A minimum number of milliseconds between saving the editor data internally (defaults to 5000).
-            // Note that for large documents, this might impact the editor performance.
-            saveInterval: 5000
-        };
-        this.watchdog = isClassicEditor ? new EditorWatchdog(ClassicEditor, config) : new EditorWatchdog(PopupEditor, config);
-
-        this.watchdog.on("stateChange", () => {
-            const currentState = this.watchdog.state;
-            logInfo(`CKEditor state changed to ${currentState}`);
-
-            if (!["crashed", "crashedPermanently"].includes(currentState)) {
-                return;
-            }
-
-            logError(`CKEditor crash logs: ${JSON.stringify(this.watchdog.crashes, null, 4)}`);
-
-            if (currentState === "crashedPermanently") {
-                dialogService.info(`Editing component keeps crashing. Please try restarting Trilium. If problem persists, consider creating a bug report.`);
-
-                this.watchdog.editor?.enableReadOnlyMode("crashed-editor");
-            }
-        });
-
-        this.watchdog.setCreator(async (_, editorConfig) => {
-            logInfo("Creating new CKEditor");
-
-            const contentLanguage = this.note?.getLabelValue("language");
-            this.contentLanguage = contentLanguage ?? null;
-
-            const opts: BuildEditorOptions = {
-                contentLanguage: this.contentLanguage,
-                forceGplLicense: false,
-                isClassicEditor
-            };
-            const editor = await buildEditor(this.$editor[0], isClassicEditor, opts);
-
-            const notificationsPlugin = editor.plugins.get("Notification");
-            notificationsPlugin.on("show:warning", (evt, data) => {
-                const title = data.title;
-                const message = data.message.message;
-
-                if (title && message) {
-                    toast.showErrorTitleAndMessage(data.title, data.message.message);
-                } else if (title) {
-                    toast.showError(title || message);
-                }
-
-                evt.stop();
-            });
-
-            if (isClassicEditor) {
-                const $classicToolbarWidget = this.findClassicToolbar();
-
-                $classicToolbarWidget.empty();
-                if ($classicToolbarWidget.length) {
-                    const toolbarView = (editor as ClassicEditor).ui.view.toolbar;
-                    if (toolbarView.element) {
-                        $classicToolbarWidget[0].appendChild(toolbarView.element);
-                    }
-                }
-
-                if (utils.isMobile()) {
-                    $classicToolbarWidget.addClass("visible");
-
-                    // Reposition all dropdowns to point upwards instead of downwards.
-                    // See https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for more info.
-                    const toolbarView = (editor as ClassicEditor).ui.view.toolbar;
-                    for (const item of toolbarView.items) {
-                        if (!("panelView" in item)) {
-                            continue;
-                        }
-
-                        item.on("change:isOpen", () => {
-                            if (!("isOpen" in item) || !item.isOpen) {
-                                return;
-                            }
-
-                            // @ts-ignore
-                            item.panelView.position = item.panelView.position.replace("s", "n");
-                        });
-                    }
-                }
-            }
-
-            editor.model.document.on("change:data", () => this.spacedUpdate.scheduleUpdate());
-
-            if (import.meta.env.VITE_CKEDITOR_ENABLE_INSPECTOR === "true") {
-                const CKEditorInspector = (await import("@ckeditor/ckeditor5-inspector")).default;
-                CKEditorInspector.attach(editor);
-            }
-
-            // Touch bar integration
-            if (hasTouchBar) {
-                for (const event of [ "bold", "italic", "underline", "paragraph", "heading" ]) {
-                    editor.commands.get(event)?.on("change", () => this.triggerCommand("refreshTouchBar"));
-                }
-            }
-
-            return editor;
-        });
-
-        await this.createEditor();
-    }
-
-    async createEditor() {
-        await this.watchdog.create(this.$editor[0]);
-    }
-
-    async doRefresh(note: FNote) {
-        const blob = await note.getBlob();
-
-        await this.spacedUpdate.allowUpdateWithoutChange(async () => {
-            const data = blob?.content || "";
-            const newContentLanguage = this.note?.getLabelValue("language");
-            if (this.contentLanguage !== newContentLanguage) {
-                await this.reinitializeWithData(data);
-            } else {
-                this.watchdog.editor?.setData(data);
-            }
-        });
-    }
-
-    getData() {
-        if (!this.watchdog.editor) {
-            // There is nothing to save, most likely a result of the editor crashing and reinitializing.
-            return;
-        }
-
-        const content = this.watchdog.editor?.getData() ?? "";
-
-        // if content is only tags/whitespace (typically <p>&nbsp;</p>), then just make it empty,
-        // this is important when setting a new note to code
-        return {
-            content: utils.isHtmlEmpty(content) ? "" : content
-        };
-    }
-
-    focus() {
-        const editor = this.watchdog.editor;
-        if (editor) {
-            editor.editing.view.focus();
-        } else {
-            this.$editor.trigger("focus");
-        }
-    }
-
-    scrollToEnd() {
-        this.watchdog?.editor?.model.change((writer) => {
-            const rootItem = this.watchdog?.editor?.model.document.getRoot();
-            if (rootItem) {
-                writer.setSelection(writer.createPositionAt(rootItem, "end"));
-            }
-        });
-
-        this.watchdog?.editor?.editing.view.focus();
-    }
-
-    show() { }
-
-    getEditor() {
-        return this.watchdog?.editor;
-    }
-
-    cleanup() {
-        if (this.watchdog?.editor) {
-            this.spacedUpdate.allowUpdateWithoutChange(() => {
-                this.watchdog.editor?.setData("");
-            });
-        }
-    }
-
-    insertDateTimeToTextCommand() {
-        const date = new Date();
-        const customDateTimeFormat = options.get("customDateTimeFormat");
-        const dateString = utils.formatDateTime(date, customDateTimeFormat);
-
-        this.addTextToEditor(dateString);
-    }
-
-    async addLinkToEditor(linkHref: string, linkTitle: string) {
-        await this.initialized;
-
-        this.watchdog.editor?.model.change((writer) => {
-            const insertPosition = this.watchdog.editor?.model.document.selection.getFirstPosition();
-            if (insertPosition) {
-                writer.insertText(linkTitle, { linkHref: linkHref }, insertPosition);
-            }
-        });
-    }
-
-    async addTextToEditor(text: string) {
-        await this.initialized;
-
-        this.watchdog.editor?.model.change((writer) => {
-            const insertPosition = this.watchdog.editor?.model.document.selection.getLastPosition();
-            if (insertPosition) {
-                writer.insertText(text, insertPosition);
-            }
-        });
-    }
-
-    async addHtmlToEditor(html: string) {
-        await this.initialized;
-
-        const editor = this.watchdog.editor;
-        if (!editor) return;
-
-        editor.model.change((writer) => {
-            const viewFragment = editor.data.processor.toView(html); 
-            const modelFragment = editor.data.toModel(viewFragment); 
-            const insertPosition = editor.model.document.selection.getLastPosition();
-
-            if (insertPosition) {
-                const range = editor.model.insertContent(modelFragment, insertPosition);
-
-                if (range) {
-                    writer.setSelection(range.end);
-                }
-            }
-            
-        });
-        
-        editor.editing.view.focus();
-    }
-
-    addTextToActiveEditorEvent({ text }: EventData<"addTextToActiveEditor">) {
-        if (!this.isActive()) {
-            return;
-        }
-
-        this.addTextToEditor(text);
-    }
-
-    async addLink(notePath: string, linkTitle: string | null, externalLink: boolean = false) {
-        await this.initialized;
-
-        if (linkTitle) {
-            if (this.hasSelection()) {
-                this.watchdog.editor?.execute("link", externalLink ? `${notePath}` : `#${notePath}`);
-            } else {
-                await this.addLinkToEditor(externalLink ? `${notePath}` : `#${notePath}`, linkTitle);
-            }
-        } else {
-            this.watchdog.editor?.execute("referenceLink", { href: "#" + notePath });
-        }
-
-        this.watchdog.editor?.editing.view.focus();
-    }
-
-    // returns true if user selected some text, false if there's no selection
-    hasSelection() {
-        const model = this.watchdog.editor?.model;
-        const selection = model?.document.selection;
-
-        return !selection?.isCollapsed;
-    }
-
-    async executeWithTextEditorEvent({ callback, resolve, ntxId }: EventData<"executeWithTextEditor">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        await this.initialized;
-
-        if (!this.watchdog.editor) {
-            return;
-        }
-
-        if (callback) {
-            callback(this.watchdog.editor as CKTextEditor);
-        }
-
-        resolve(this.watchdog.editor as CKTextEditor);
-    }
-
-    addLinkToTextCommand() {
-        const selectedText = this.getSelectedText();
-
-        this.triggerCommand("showAddLinkDialog", { textTypeWidget: this, text: selectedText });
-    }
-
-    pasteMarkdownIntoTextCommand() {
-        this.triggerCommand("showPasteMarkdownDialog", { textTypeWidget: this });
-    }
-
-    getSelectedText() {
-        const range = this.watchdog.editor?.model.document.selection.getFirstRange();
-        let text = "";
-
-        if (!range) {
-            return text;
-        }
-
-        for (const item of range.getItems()) {
-            if ("data" in item && item.data) {
-                text += item.data;
-            }
-        }
-
-        return text;
-    }
-
-    async followLinkUnderCursorCommand() {
-        await this.initialized;
-
-        const selection = this.watchdog.editor?.model.document.selection;
-        const selectedElement = selection?.getSelectedElement();
-
-        if (selectedElement?.name === "reference") {
-            // reference link
-            const notePath = selectedElement.getAttribute("notePath") as string | undefined;
-
-            if (notePath) {
-                await appContext.tabManager.getActiveContext()?.setNote(notePath);
-                return;
-            }
-        }
-
-        if (!selection?.hasAttribute("linkHref")) {
-            return;
-        }
-
-        const selectedLinkUrl = selection.getAttribute("linkHref") as string;
-        const notePath = link.getNotePathFromUrl(selectedLinkUrl);
-
-        if (notePath) {
-            await appContext.tabManager.getActiveContext()?.setNote(notePath);
-        } else {
-            window.open(selectedLinkUrl, "_blank");
-        }
-    }
-
-    addIncludeNoteToTextCommand() {
-        this.triggerCommand("showIncludeNoteDialog", { textTypeWidget: this });
-    }
-
-    addIncludeNote(noteId: string, boxSize?: BoxSize) {
-        this.watchdog.editor?.model.change((writer) => {
-            // Insert <includeNote>*</includeNote> at the current selection position
-            // in a way that will result in creating a valid model structure
-            this.watchdog.editor?.model.insertContent(
-                writer.createElement("includeNote", {
-                    noteId: noteId,
-                    boxSize: boxSize
-                })
-            );
-        });
-    }
-
-    async addImage(noteId: string) {
-        const note = await froca.getNote(noteId);
-        if (!note || !this.watchdog.editor) {
-            return;
-        }
-
-        this.watchdog.editor.model.change((writer) => {
-            const encodedTitle = encodeURIComponent(note.title);
-            const src = `api/images/${note.noteId}/${encodedTitle}`;
-
-            this.watchdog.editor?.execute("insertImage", { source: src });
-        });
-    }
-
-    async createNoteForReferenceLink(title: string) {
-        if (!this.notePath) {
-            return;
-        }
-
-        const resp = await noteCreateService.createNoteWithTypePrompt(this.notePath, {
-            activate: false,
-            title: title
-        });
-
-        if (!resp || !resp.note) {
-            return;
-        }
-
-        return resp.note.getBestNotePathString();
-    }
-
-    async refreshIncludedNoteEvent({ noteId }: EventData<"refreshIncludedNote">) {
-        this.refreshIncludedNote(this.$editor, noteId);
-    }
-
-    async reinitializeWithData(data: string) {
-        if (!this.watchdog) {
-            return;
-        }
-
-        this.watchdog.destroy();
-        await this.createEditor();
-        this.watchdog.editor?.setData(data);
-    }
-
-    async reinitialize() {
-        const data = this.watchdog.editor?.getData();
-        await this.reinitializeWithData(data ?? "");
-    }
-
-    async reloadTextEditorEvent() {
-        await this.reinitialize();
-    }
-
-    async onLanguageChanged() {
-        await this.reinitialize();
-    }
-
-    async entitiesReloadedEvent(e: EventData<"entitiesReloaded">) {
-        await super.entitiesReloadedEvent(e);
-
-        if (updateTemplateCache(e.loadResults)) {
-            await this.reinitialize();
-        }
-    }
-
-    findClassicToolbar(): JQuery<HTMLElement> {
-        if (!utils.isMobile()) {
-            const $parentSplit = this.$widget.parents(".note-split.type-text");
-
-            if ($parentSplit.length) {
-                // The editor is in a normal tab.
-                return $parentSplit.find("> .ribbon-container .classic-toolbar-widget");
-            } else {
-                // The editor is in a popup.
-                return this.$widget.closest(".modal-body").find(".classic-toolbar-widget");
-            }
-        } else {
-            return $("body").find(".classic-toolbar-widget");
-        }
-    }
-
-    buildTouchBarCommand(data: CommandListenerData<"buildTouchBar">) {
-        const { TouchBar, buildIcon } = data;
-        const { TouchBarSegmentedControl, TouchBarGroup, TouchBarButton } = TouchBar;
-        const { editor } = this.watchdog;
-
-        if (!editor) {
-            return;
-        }
-
-        const commandButton = (icon: string, command: string) => new TouchBarButton({
-            icon: buildIcon(icon),
-            click: () => editor.execute(command),
-            backgroundColor: buildSelectedBackgroundColor(editor.commands.get(command)?.value as boolean)
-        });
-
-        let headingSelectedIndex: number | undefined = undefined;
-        const headingCommand = editor.commands.get("heading");
-        const paragraphCommand = editor.commands.get("paragraph");
-        if (paragraphCommand?.value) {
-            headingSelectedIndex = 0;
-        } else if (headingCommand?.value === "heading2") {
-            headingSelectedIndex = 1;
-        } else if (headingCommand?.value === "heading3") {
-            headingSelectedIndex = 2;
-        }
-
-        return [
-            new TouchBarSegmentedControl({
-                segments: [
-                    { label: "P" },
-                    { label: "H2" },
-                    { label: "H3" }
-                ],
-                change(selectedIndex: number, isSelected: boolean) {
-                    switch (selectedIndex) {
-                        case 0:
-                            editor.execute("paragraph")
-                            break;
-                        case 1:
-                            editor.execute("heading", { value: "heading2" });
-                            break;
-                        case 2:
-                            editor.execute("heading", { value: "heading3" });
-                            break;
-                    }
-                },
-                selectedIndex: headingSelectedIndex
-            }),
-            new TouchBarGroup({
-                items: new TouchBar({
-                    items: [
-                        commandButton("NSTouchBarTextBoldTemplate", "bold"),
-                        commandButton("NSTouchBarTextItalicTemplate", "italic"),
-                        commandButton("NSTouchBarTextUnderlineTemplate", "underline")
-                    ]
-                })
-            })
-        ];
-    }
-
-}
-
-async function buildEditor(element: HTMLElement, isClassicEditor: boolean, opts: BuildEditorOptions) {
-    const editorClass = isClassicEditor ? ClassicEditor : PopupEditor;
-    let config = await buildConfig(opts);
-    let editor = await editorClass.create(element, config);
-
-    if (editor.isReadOnly) {
-        editor.destroy();
-
-        opts.forceGplLicense = true;
-        config = await buildConfig(opts);
-        editor = await editorClass.create(element, config);
-    }
-    return editor;
-
-}
diff --git a/apps/client/src/widgets/type_widgets/empty.ts b/apps/client/src/widgets/type_widgets/empty.ts
deleted file mode 100644
index 3aed05d5f..000000000
--- a/apps/client/src/widgets/type_widgets/empty.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import noteAutocompleteService from "../../services/note_autocomplete.js";
-import TypeWidget from "./type_widget.js";
-import appContext from "../../components/app_context.js";
-import searchService from "../../services/search.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<div class="note-detail-empty note-detail-printable">
-    <style>
-        .workspace-notes {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: space-evenly;
-        }
-
-        .workspace-notes .workspace-note {
-            width: 130px;
-            text-align: center;
-            margin: 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;
-            font-size: 500%;
-        }
-    </style>
-
-    <div class="workspace-notes"></div>
-    <div class="form-group empty-tab-search">
-        <label>${t("empty.open_note_instruction")}</label>
-        <div class="input-group mt-1">
-            <input class="form-control note-autocomplete" placeholder="${t("empty.search_placeholder")}">
-        </div>
-    </div>
-    <div class="note-detail-empty-results"></div>
-</div>`;
-
-export default class EmptyTypeWidget extends TypeWidget {
-
-    private $autoComplete!: JQuery<HTMLElement>;
-    private $results!: JQuery<HTMLElement>;
-    private $workspaceNotes!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "empty";
-    }
-
-    doRender() {
-        // FIXME: this might be optimized - cleaned up after use since it's always used only for new tab
-
-        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,
-                allowJumpToSearchNotes: true,
-                container: this.$results[0]
-            })
-            .on("autocomplete:noteselected", function (event, suggestion, dataset) {
-                if (!suggestion.notePath) {
-                    return false;
-                }
-
-                const activeContext = appContext.tabManager.getActiveContext();
-                if (activeContext) {
-                    activeContext.setNote(suggestion.notePath);
-                }
-            });
-
-        this.$workspaceNotes = this.$widget.find(".workspace-notes");
-
-        noteAutocompleteService.showRecentNotes(this.$autoComplete);
-        super.doRender();
-    }
-
-    async doRefresh() {
-        const workspaceNotes = await searchService.searchForNotes("#workspace #!template");
-
-        this.$workspaceNotes.empty();
-
-        for (const workspaceNote of workspaceNotes) {
-            this.$workspaceNotes.append(
-                $('<div class="workspace-note">')
-                    .append($("<div>").addClass(`${workspaceNote.getIcon()} workspace-icon`))
-                    .append($("<div>").text(workspaceNote.title))
-                    .attr("title", t("empty.enter_workspace", { title: workspaceNote.title }))
-                    .on("click", () => this.triggerCommand("hoistNote", { noteId: workspaceNote.noteId }))
-            );
-        }
-
-        this.$autoComplete.trigger("focus").trigger("select");
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/file.ts b/apps/client/src/widgets/type_widgets/file.ts
deleted file mode 100644
index ccf581471..000000000
--- a/apps/client/src/widgets/type_widgets/file.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import openService from "../../services/open.js";
-import TypeWidget from "./type_widget.js";
-import { t } from "../../services/i18n.js";
-import type { EventData } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-
-const TEXT_MAX_NUM_CHARS = 5000;
-
-const TPL = /*html*/`
-<div class="note-detail-file note-detail-printable">
-    <style>
-        .type-file .note-detail {
-            height: 100%;
-        }
-
-        .note-detail-file {
-            padding: 10px;
-            height: 100%;
-        }
-
-        .note-split.full-content-width .note-detail-file {
-            padding: 0;
-        }
-
-        .note-detail.full-height .note-detail-file[data-preview-type="pdf"],
-        .note-detail.full-height .note-detail-file[data-preview-type="video"] {
-            overflow: hidden;
-        }
-
-        .file-preview-content {
-            background-color: var(--accented-background-color);
-            padding: 15px;
-            height: 100%;
-            overflow: auto;
-            margin: 10px;
-        }
-
-        .note-detail-file > .video-preview {
-            width: 100%;
-            height: 100%;
-        }
-    </style>
-
-    <div class="file-preview-too-big alert alert-info hidden-ext">
-        ${t("file.too_big", { maxNumChars: TEXT_MAX_NUM_CHARS })}
-    </div>
-
-    <pre class="file-preview-content"></pre>
-
-    <div class="file-preview-not-available alert alert-info">
-        ${t("file.file_preview_not_available")}
-    </div>
-
-    <iframe class="pdf-preview" style="width: 100%; height: 100%; flex-grow: 100;"></iframe>
-
-    <video class="video-preview" controls></video>
-
-    <audio class="audio-preview" controls></audio>
-</div>`;
-
-export default class FileTypeWidget extends TypeWidget {
-
-    private $previewContent!: JQuery<HTMLElement>;
-    private $previewNotAvailable!: JQuery<HTMLElement>;
-    private $previewTooBig!: JQuery<HTMLElement>;
-    private $pdfPreview!: JQuery<HTMLElement>;
-    private $videoPreview!: JQuery<HTMLElement>;
-    private $audioPreview!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "file";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$previewContent = this.$widget.find(".file-preview-content");
-        this.$previewNotAvailable = this.$widget.find(".file-preview-not-available");
-        this.$previewTooBig = this.$widget.find(".file-preview-too-big");
-        this.$pdfPreview = this.$widget.find(".pdf-preview");
-        this.$videoPreview = this.$widget.find(".video-preview");
-        this.$audioPreview = this.$widget.find(".audio-preview");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        this.$widget.show();
-
-        const blob = await this.note?.getBlob();
-
-        this.$previewContent.empty().hide();
-        this.$pdfPreview.attr("src", "").empty().hide();
-        this.$previewNotAvailable.hide();
-        this.$previewTooBig.addClass("hidden-ext");
-        this.$videoPreview.hide();
-        this.$audioPreview.hide();
-
-        let previewType: string;
-
-        if (blob?.content) {
-            this.$previewContent.show().scrollTop(0);
-            const trimmedContent = blob.content.substring(0, TEXT_MAX_NUM_CHARS);
-            if (trimmedContent.length !== blob.content.length) {
-                this.$previewTooBig.removeClass("hidden-ext");
-            }
-            this.$previewContent.text(trimmedContent);
-            previewType = "text";
-        } else if (note.mime === "application/pdf") {
-            this.$pdfPreview.show().attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open`));
-            previewType = "pdf";
-        } else if (note.mime.startsWith("video/")) {
-            this.$videoPreview
-                .show()
-                .attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open-partial`))
-                .attr("type", this.note?.mime ?? "")
-                .css("width", this.$widget.width() ?? 0);
-            previewType = "video";
-        } else if (note.mime.startsWith("audio/")) {
-            this.$audioPreview
-                .show()
-                .attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open-partial`))
-                .attr("type", this.note?.mime ?? "")
-                .css("width", this.$widget.width() ?? 0);
-            previewType = "audio";
-        } else {
-            this.$previewNotAvailable.show();
-            previewType = "not-available";
-        }
-
-        this.$widget.attr("data-preview-type", previewType ?? "");
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isNoteReloaded(this.noteId)) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css
new file mode 100644
index 000000000..7ea0a003c
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css
@@ -0,0 +1,96 @@
+.note-detail-split {
+    display: flex;
+    height: 100%;
+}
+
+.note-detail-split-editor-col {
+    display: flex;
+    flex-direction: column;
+}
+
+.note-detail-split-preview-col {
+    position: relative;
+}
+
+.note-detail-split .note-detail-split-editor {
+    width: 100%;
+    flex-grow: 1;
+}
+
+.note-detail-split .note-detail-split-editor .note-detail-code {
+    contain: size !important;
+}
+
+.note-detail-split .note-detail-code-editor .cm-editor {
+    margin: 0 !important;
+}
+
+.note-detail-split .note-detail-error-container {
+    font-family: var(--monospace-font-family);
+    margin: 5px;
+    white-space: pre-wrap;
+    font-size: 0.85em;
+}
+
+.note-detail-split .note-detail-split-preview {
+    transition: opacity 250ms ease-in-out;
+    height: 100%;
+}
+
+.note-detail-split .note-detail-split-preview.on-error {
+    opacity: 0.5;
+}
+
+/* Horizontal layout */
+
+.note-detail-split.split-horizontal > .note-detail-split-preview-col {
+    border-inline-start: 1px solid var(--main-border-color);
+}
+
+.note-detail-split.split-horizontal > .note-detail-split-editor-col,
+.note-detail-split.split-horizontal > .note-detail-split-preview-col {
+    height: 100%;
+    width: 50%;
+}
+
+.note-detail-split.split-horizontal .note-detail-split-preview {
+    height: 100%;
+}
+
+/* Vertical layout */
+
+.note-detail-split.split-vertical {
+    flex-direction: column;
+}
+
+.note-detail-split.split-vertical > .note-detail-split-editor-col,
+.note-detail-split.split-vertical > .note-detail-split-preview-col {
+    width: 100%;
+    height: 50%;
+}
+
+.note-detail-split.split-vertical > .note-detail-split-editor-col {
+    border-top: 1px solid var(--main-border-color);
+}
+
+.note-detail-split.split-vertical .note-detail-split-preview-col {
+    order: -1;
+}
+
+/* Read-only view */
+
+.note-detail-split.split-read-only .note-detail-split-preview-col {
+    width: 100%;
+}
+
+/* #region SVG */
+.note-detail-split.svg-editor .render-container {
+    height: 100%;
+}
+
+.note-detail-split.svg-editor .render-container svg {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+}
+/* #endregion */
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
new file mode 100644
index 000000000..e6d85cf7c
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useRef } from "preact/hooks";
+import utils, { isMobile } from "../../../services/utils";
+import Admonition from "../../react/Admonition";
+import { useNoteLabelBoolean, useTriliumOption } from "../../react/hooks";
+import "./SplitEditor.css";
+import Split from "@triliumnext/split.js";
+import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
+import { EditableCode, EditableCodeProps } from "../code/Code";
+import { ComponentChildren } from "preact";
+import ActionButton, { ActionButtonProps } from "../../react/ActionButton";
+
+export interface SplitEditorProps extends EditableCodeProps {
+    className?: string;
+    error?: string | null;
+    splitOptions?: Split.Options;
+    previewContent: ComponentChildren;
+    previewButtons?: ComponentChildren;
+}
+
+/**
+ * Abstract `TypeWidget` which contains a preview and editor pane, each displayed on half of the available screen.
+ *
+ * Features:
+ *
+ * - The two panes are resizeable via a split, on desktop. The split can be optionally customized via {@link buildSplitExtraOptions}.
+ * - Can display errors to the user via {@link setError}.
+ * - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
+ */
+export default function SplitEditor({ note, error, splitOptions, previewContent, previewButtons, className, ...editorProps }: SplitEditorProps) {
+    const splitEditorOrientation = useSplitOrientation();
+    const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const editor = (!readOnly &&
+        <div className="note-detail-split-editor-col">
+            <div className="note-detail-split-editor">
+                <EditableCode
+                    note={note}
+                    lineWrapping={false}
+                    updateInterval={750} debounceUpdate
+                    noBackgroundChange
+                    {...editorProps}
+                />
+            </div>
+            {error && <Admonition type="caution" className="note-detail-error-container">
+                {error}
+            </Admonition>}
+        </div>
+    );
+
+    const preview = (
+        <div className="note-detail-split-preview-col">
+            <div className={`note-detail-split-preview ${error ? "on-error" : ""}`}>
+                {previewContent}
+            </div>
+            <div className="btn-group btn-group-sm map-type-switcher content-floating-buttons preview-buttons bottom-right" role="group">
+                {previewButtons}
+            </div>
+        </div>
+    );
+
+    useEffect(() => {
+        if (!utils.isDesktop() || !containerRef.current || readOnly) return;
+        const elements = Array.from(containerRef.current?.children) as HTMLElement[];
+        const splitInstance = Split(elements, {
+            rtl: glob.isRtl,
+            sizes: [ 50, 50 ],
+            direction: splitEditorOrientation,
+            gutterSize: DEFAULT_GUTTER_SIZE,
+            ...splitOptions
+        });
+
+        return () => splitInstance.destroy();
+    }, [ readOnly, splitEditorOrientation ]);
+
+    return (
+        <div ref={containerRef} className={`note-detail-split note-detail-printable ${"split-" + splitEditorOrientation} ${readOnly ? "split-read-only" : ""} ${className ?? ""}`}>
+            {splitEditorOrientation === "horizontal"
+            ? <>{editor}{preview}</>
+            : <>{preview}{editor}</>}
+        </div>
+    )
+}
+
+export function PreviewButton(props: Omit<ActionButtonProps, "titlePosition">) {
+    return <ActionButton
+        {...props}
+        className="tn-tool-button"
+        noIconActionClass
+        titlePosition="top"
+    />
+}
+
+function useSplitOrientation() {
+    const [ splitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
+    if (isMobile()) return "vertical";
+    if (!splitEditorOrientation) return "horizontal";
+    return splitEditorOrientation as "horizontal" | "vertical";
+}
diff --git a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
new file mode 100644
index 000000000..8a9e64a24
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { t } from "../../../services/i18n";
+import SplitEditor, { PreviewButton, SplitEditorProps } from "./SplitEditor";
+import { RawHtmlBlock } from "../../react/RawHtml";
+import server from "../../../services/server";
+import svgPanZoom from "svg-pan-zoom";
+import { RefObject } from "preact";
+import { useElementSize, useTriliumEvent } from "../../react/hooks";
+import utils from "../../../services/utils";
+import toast from "../../../services/toast";
+
+interface SvgSplitEditorProps extends Omit<SplitEditorProps, "previewContent"> {
+    /**
+     * The name of the note attachment (without .svg extension) that will be used for storing the preview.
+     */
+    attachmentName: string;
+    /**
+     * Called upon when the SVG preview needs refreshing, such as when the editor has switched to a new note or the content has switched.
+     *
+     * The method must return a valid SVG string that will be automatically displayed in the preview.
+     *
+     * @param content the content of the note, in plain text.
+     */
+    renderSvg(content: string): string | Promise<string>;
+}
+
+/**
+ * A specialization of `SplitTypeWidget` meant for note types that have a SVG preview.
+ *
+ * This adds the following functionality:
+ *
+ * - Automatic handling of the preview when content or the note changes via {@link renderSvg}.
+ * - Built-in pan and zoom functionality with automatic re-centering.
+ * - Automatically displays errors to the user if {@link renderSvg} failed.
+ * - Automatically saves the SVG attachment.
+ *
+ */
+export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg, ...props }: SvgSplitEditorProps) {
+    const [ svg, setSvg ] = useState<string>();
+    const [ error, setError ] = useState<string | null | undefined>();
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Render the SVG.
+    async function onContentChanged(content: string) {
+        try {
+            const svg = await renderSvg(content);
+
+            // Rendering was successful.
+            setError(null);
+            setSvg(svg);
+        } catch (e) {
+            // Rendering failed.
+            setError((e as Error)?.message);
+        }
+    }
+
+    // Save as attachment.
+    function onSave() {
+        const payload = {
+            role: "image",
+            title: `${attachmentName}.svg`,
+            mime: "image/svg+xml",
+            content: svg,
+            position: 0
+        };
+
+        server.post(`notes/${note.noteId}/attachments?matchBy=title`, payload);
+    }
+
+    // Save the SVG when entering a note only when it does not have an attachment.
+    useEffect(() => {
+        note?.getAttachments().then((attachments) => {
+            if (!attachments.find((a) => a.title === `${attachmentName}.svg`)) {
+                onSave();
+            }
+        });
+    }, [ note ]);
+
+    // Import/export
+    useTriliumEvent("exportSvg", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId || !svg) return;
+        utils.downloadSvg(note.title, svg);
+    });
+    useTriliumEvent("exportPng", async ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId || !svg) return;
+        try {
+            await utils.downloadSvgAsPng(note.title, svg);
+        } catch (e) {
+            console.warn(e);
+            toast.showError(t("svg.export_to_png"));
+        }
+    });
+
+    // Pan & zoom.
+    const zoomRef = useResizer(containerRef, note.noteId, svg);
+
+    return (
+        <SplitEditor
+            className="svg-editor"
+            note={note} ntxId={ntxId}
+            error={error}
+            onContentChanged={onContentChanged}
+            dataSaved={onSave}
+            previewContent={(
+                <RawHtmlBlock
+                    className="render-container"
+                    containerRef={containerRef}
+                    html={svg}
+                />
+            )}
+            previewButtons={
+                <>
+                    <PreviewButton
+                        icon="bx bx-zoom-in"
+                        text={t("relation_map_buttons.zoom_in_title")}
+                        onClick={() => zoomRef.current?.zoomIn()}
+                    />
+                    <PreviewButton
+                        icon="bx bx-zoom-out"
+                        text={t("relation_map_buttons.zoom_out_title")}
+                        onClick={() => zoomRef.current?.zoomOut()}
+                    />
+                    <PreviewButton
+                        icon="bx bx-crop"
+                        text={t("relation_map_buttons.reset_pan_zoom_title")}
+                        onClick={() => zoomRef.current?.fit().center()}
+                    />
+                </>
+            }
+            {...props}
+        />
+    )
+}
+
+function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg: string | undefined) {
+    const lastPanZoom = useRef<{ pan: SvgPanZoom.Point, zoom: number }>();
+    const lastNoteId = useRef<string>();
+    const zoomRef = useRef<SvgPanZoom.Instance>();
+
+    // Set up pan & zoom.
+    useEffect(() => {
+        const shouldPreservePanZoom = (lastNoteId.current === noteId);
+        const svgEl = containerRef.current?.querySelector("svg");
+        if (!svgEl) return;
+        const zoomInstance = svgPanZoom(svgEl, {
+            zoomEnabled: true,
+            controlIconsEnabled: false
+        });
+
+        // Restore the previous pan/zoom if the user updates same note.
+        if (shouldPreservePanZoom && lastPanZoom.current) {
+            zoomInstance.zoom(lastPanZoom.current.zoom);
+            zoomInstance.pan(lastPanZoom.current.pan);
+        } else {
+            zoomInstance.resize().center().fit();
+        }
+
+        lastNoteId.current = noteId;
+        zoomRef.current = zoomInstance;
+
+        return () => {
+            lastPanZoom.current = {
+                pan: zoomInstance.getPan(),
+                zoom: zoomInstance.getZoom()
+            }
+            zoomInstance.destroy();
+        };
+    }, [ svg ]);
+
+    // React to container changes.
+    const width = useElementSize(containerRef);
+    useEffect(() => {
+        if (!zoomRef.current) return;
+        zoomRef.current.resize().fit().center();
+    }, [ width ]);
+
+    return zoomRef;
+}
diff --git a/apps/client/src/widgets/type_widgets/image.ts b/apps/client/src/widgets/type_widgets/image.ts
deleted file mode 100644
index e4afcbe1e..000000000
--- a/apps/client/src/widgets/type_widgets/image.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import utils from "../../services/utils.js";
-import TypeWidget from "./type_widget.js";
-import imageContextMenuService from "../../menus/image_context_menu.js";
-import imageService from "../../services/image.js";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-import WheelZoom from 'vanilla-js-wheel-zoom';
-
-const TPL = /*html*/`
-<div class="note-detail-image note-detail-printable">
-    <style>
-        .type-image .note-detail {
-            height: 100%;
-        }
-
-        .note-detail-image {
-            height: 100%;
-        }
-
-        .note-detail-image-wrapper {
-            position: relative;
-            display: flex;
-            align-items: center;
-            overflow: hidden;
-            justify-content: center;
-            height: 100%;
-        }
-
-        .note-detail-image-view {
-            display: block;
-            width: auto;
-            height: auto;
-            align-self: center;
-            flex-shrink: 0;
-        }
-    </style>
-
-    <div class="note-detail-image-wrapper">
-        <img class="note-detail-image-view" />
-    </div>
-</div>`;
-
-class ImageTypeWidget extends TypeWidget {
-
-    private $imageWrapper!: JQuery<HTMLElement>;
-    private $imageView!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "image";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$imageWrapper = this.$widget.find(".note-detail-image-wrapper");
-        this.$imageView = this.$widget.find(".note-detail-image-view").attr("id", `image-view-${utils.randomString(10)}`);
-
-        const initZoom = async () => {
-            const element = document.querySelector(`#${this.$imageView.attr("id")}`);
-            if (element) {
-                WheelZoom.create(`#${this.$imageView.attr("id")}`, {
-                    maxScale: 50,
-                    speed: 1.3,
-                    zoomOnClick: false
-                });
-            } else {
-                requestAnimationFrame(initZoom);
-            }
-        };
-        initZoom();
-
-        imageContextMenuService.setupContextMenu(this.$imageView);
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        this.$imageView.prop("src", utils.createImageSrcUrl(note));
-    }
-
-    copyImageReferenceToClipboardEvent({ ntxId }: EventData<"copyImageReferenceToClipboard">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        imageService.copyImageReferenceToClipboard(this.$imageWrapper);
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isNoteReloaded(this.noteId)) {
-            this.refresh();
-        }
-    }
-}
-
-export default ImageTypeWidget;
diff --git a/apps/client/src/widgets/type_widgets/mind_map.ts b/apps/client/src/widgets/type_widgets/mind_map.ts
deleted file mode 100644
index a6f299455..000000000
--- a/apps/client/src/widgets/type_widgets/mind_map.ts
+++ /dev/null
@@ -1,299 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import utils from "../../services/utils.js";
-import type { MindElixirInstance } from "mind-elixir";
-import nodeMenu from "@mind-elixir/node-menu";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-
-// allow node-menu plugin css to be bundled by webpack
-import "mind-elixir/style";
-import "@mind-elixir/node-menu/dist/style.css";
-
-const NEW_TOPIC_NAME = "";
-
-const TPL = /*html*/`
-<div class="note-detail-mind-map note-detail-printable">
-    <div class="mind-map-container">
-    </div>
-
-    <style>
-        .note-detail-mind-map {
-            height: 100%;
-            overflow: hidden !important;
-        }
-
-        .note-detail-mind-map .mind-map-container {
-            height: 100%;
-        }
-
-        .map-container .node-menu {
-            position: absolute;
-            top: 60px;
-            inset-inline-end: 20px;
-            bottom: 80px;
-            overflow: auto;
-            background: var(--panel-bgcolor);
-            color: var(--main-color);
-            border-radius: 5px;
-            box-shadow: 0 1px 2px #0003;
-            width: 240px;
-            box-sizing: border-box;
-            padding: 0 15px 15px;
-            transition: .3s all
-        }
-
-        .map-container .node-menu.close {
-            height: 29px;
-            width: 46px;
-            overflow: hidden
-        }
-
-        .map-container .node-menu .button-container {
-            padding: 3px 0;
-            direction: rtl
-        }
-
-        .map-container .node-menu #nm-tag {
-            margin-top: 20px
-        }
-
-        .map-container .node-menu .nm-fontsize-container {
-            display: flex;
-            justify-content: space-around;
-            margin-bottom: 20px
-        }
-
-        .map-container .node-menu .nm-fontsize-container div {
-            height: 36px;
-            width: 36px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 1px 2px #0003;
-            background-color: #fff;
-            color: tomato;
-            border-radius: 100%
-        }
-
-        .map-container .node-menu .nm-fontcolor-container {
-            margin-bottom: 10px
-        }
-
-        .map-container .node-menu input,
-        .map-container .node-menu textarea {
-            background: var(--input-background-color);
-            border: 1px solid var(--panel-border-color);
-            border-radius: var(--bs-border-radius);
-            color: var(--main-color);
-            padding: 5px;
-            margin: 10px 0;
-            width: 100%;
-            box-sizing: border-box;
-        }
-
-        .map-container .node-menu textarea {
-            resize: none
-        }
-
-        .map-container .node-menu .split6 {
-            display: inline-block;
-            width: 16.66%;
-            margin-bottom: 5px
-        }
-
-        .map-container .node-menu .palette {
-            border-radius: 100%;
-            width: 21px;
-            height: 21px;
-            border: 1px solid #edf1f2;
-            margin: auto
-        }
-
-        .map-container .node-menu .nmenu-selected,
-        .map-container .node-menu .palette:hover {
-            box-shadow: tomato 0 0 0 2px;
-            background-color: #c7e9fa
-        }
-
-        .map-container .node-menu .size-selected {
-            background-color: tomato !important;
-            border-color: tomato;
-            fill: #fff;
-            color: #fff
-        }
-
-        .map-container .node-menu .size-selected svg {
-            color: #fff
-        }
-
-        .map-container .node-menu .bof {
-            text-align: center
-        }
-
-        .map-container .node-menu .bof span {
-            display: inline-block;
-            font-size: 14px;
-            border-radius: 4px;
-            padding: 2px 5px
-        }
-
-        .map-container .node-menu .bof .selected {
-            background-color: tomato;
-            color: #fff
-        }
-</style>
-</div>
-`;
-
-interface MindmapModel {
-    direction: number;
-}
-
-export default class MindMapWidget extends TypeWidget {
-
-    private $content!: JQuery<HTMLElement>;
-    private triggeredByUserOperation?: boolean;
-    private mind?: MindElixirInstance;
-    private MindElixir: any; // TODO: Fix type
-
-    static getType() {
-        return "mindMap";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$content = this.$widget.find(".mind-map-container");
-        this.$content.on("keydown", (e) => {
-            /*
-             * Some global shortcuts interfere with the default shortcuts of the mind map,
-             * as defined here: https://mind-elixir.com/docs/guides/shortcuts
-             */
-            if (e.key === "F1") {
-                e.stopPropagation();
-            }
-
-            // Zoom controls
-            const isCtrl = e.ctrlKey && !e.altKey && !e.metaKey;
-            if (isCtrl && (e.key == "-" || e.key == "=" || e.key == "0")) {
-                e.stopPropagation();
-            }
-        });
-
-        // Save the mind map if the user changes the layout direction.
-        this.$content.on("click", ".mind-elixir-toolbar.lt", () => {
-            this.spacedUpdate.scheduleUpdate();
-        });
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        if (this.triggeredByUserOperation) {
-            this.triggeredByUserOperation = false;
-            return;
-        }
-
-        await this.#loadData(note);
-    }
-
-    cleanup() {
-        this.triggeredByUserOperation = false;
-    }
-
-    async #loadData(note: FNote) {
-        const blob = await note.getBlob();
-        const content = blob?.getJsonContent<MindmapModel>();
-
-        if (!this.mind) {
-            await this.#initLibrary(content?.direction);
-        }
-
-        this.mind!.refresh(content ?? this.MindElixir.new(NEW_TOPIC_NAME));
-        this.mind!.toCenter();
-    }
-
-    async #initLibrary(direction?: number) {
-        this.MindElixir = (await import("mind-elixir")).default;
-
-        const mind = new this.MindElixir({
-            el: this.$content[0],
-            direction: direction ?? this.MindElixir.LEFT
-        });
-        mind.install(nodeMenu);
-
-        this.mind = mind;
-        mind.init(this.MindElixir.new(NEW_TOPIC_NAME));
-        // TODO: See why the typeof mindmap is not correct.
-        mind.bus.addListener("operation", (operation: { name: string }) => {
-            this.triggeredByUserOperation = true;
-            if (operation.name !== "beginEdit") {
-                this.spacedUpdate.scheduleUpdate();
-            }
-        });
-
-        // If the note is displayed directly after a refresh, the scroll ends up at (0,0), making it difficult for the user to see.
-        // Adding an arbitrary wait until the element is attached to the DOM seems to do the trick for now.
-        setTimeout(() => {
-            mind.toCenter();
-        }, 200);
-    }
-
-    async getData() {
-        const mind = this.mind;
-        if (!mind) {
-            return;
-        }
-
-        const svgContent = await this.renderSvg();
-        return {
-            content: mind.getDataString(),
-            attachments: [
-                {
-                    role: "image",
-                    title: "mindmap-export.svg",
-                    mime: "image/svg+xml",
-                    content: svgContent,
-                    position: 0
-                }
-            ]
-        };
-    }
-
-    async renderSvg() {
-        return await this.mind!.exportSvg().text();
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (this.noteId && loadResults.isNoteReloaded(this.noteId)) {
-            this.refresh();
-        }
-    }
-
-    async exportSvgEvent({ ntxId }: EventData<"exportSvg">) {
-        if (!this.isNoteContext(ntxId) || this.note?.type !== "mindMap") {
-            return;
-        }
-
-        const svg = await this.renderSvg();
-        utils.downloadSvg(this.note.title, svg);
-    }
-
-    async exportPngEvent({ ntxId }: EventData<"exportPng">) {
-        if (!this.isNoteContext(ntxId) || this.note?.type !== "mindMap") {
-            return;
-        }
-
-        const svg = await this.renderSvg();
-        utils.downloadSvgAsPng(this.note.title, svg);
-    }
-
-    async executeWithContentElementEvent({ resolve, ntxId }: EventData<"executeWithContentElement">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        await this.initialized;
-
-        resolve(this.$content.find('.main-node-container'));
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/none.ts b/apps/client/src/widgets/type_widgets/none.ts
deleted file mode 100644
index 41d6631bf..000000000
--- a/apps/client/src/widgets/type_widgets/none.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import TypeWidget from "./type_widget.js";
-
-const TPL = /*html*/`<div class="note-detail-none note-detail-printable"></div>`;
-
-export default class NoneTypeWidget extends TypeWidget {
-    static getType() {
-        return "none";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        super.doRender();
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/note_map.ts b/apps/client/src/widgets/type_widgets/note_map.ts
deleted file mode 100644
index 33608aef3..000000000
--- a/apps/client/src/widgets/type_widgets/note_map.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import NoteMapWidget from "../note_map.js";
-import type FNote from "../../entities/fnote.js";
-
-const TPL = /*html*/`<div class="note-detail-note-map note-detail-printable"></div>`;
-
-export default class NoteMapTypeWidget extends TypeWidget {
-
-    private noteMapWidget: NoteMapWidget;
-
-    static getType() {
-        return "noteMap";
-    }
-
-    constructor() {
-        super();
-
-        this.noteMapWidget = new NoteMapWidget("type");
-        this.child(this.noteMapWidget);
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$widget.append(this.noteMapWidget.render());
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        await this.noteMapWidget.refresh();
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.tsx b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
index da33cfbce..e2a046cd7 100644
--- a/apps/client/src/widgets/type_widgets/options/code_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
@@ -8,7 +8,7 @@ import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "..
 import OptionsSection from "./components/OptionsSection";
 import { useEffect, useMemo, useRef } from "preact/hooks";
 import codeNoteSample from "./samples/code_note.txt?raw";
-import { DEFAULT_PREFIX } from "../abstract_code_type_widget";
+import { CODE_THEME_DEFAULT_PREFIX as DEFAULT_PREFIX } from "../constants";
 import { MimeType } from "@triliumnext/commons";
 import mime_types from "../../../services/mime_types";
 import CheckboxList from "./components/CheckboxList";
@@ -58,7 +58,7 @@ function Appearance() {
         <OptionsSection title={t("code_theme.title")}>
             <div className="row" style={{ marginBottom: "15px" }}>
                 <FormGroup name="color-scheme" label={t("code_theme.color-scheme")} className="col-md-6" style={{ marginBottom: 0 }}>
-                    <FormSelect 
+                    <FormSelect
                         values={themes}
                         keyProperty="id" titleProperty="name"
                         currentValue={codeNoteTheme} onChange={setCodeNoteTheme}
@@ -148,7 +148,7 @@ export function CodeMimeTypesList() {
             plainTextMimeType.enabled = true;
             plainTextMimeType.disabled = true;
         }
-        
+
         for (const mimeType of ungroupedMimeTypes) {
             const initial = mimeType.title.charAt(0).toUpperCase();
             if (!result[initial]) {
@@ -157,7 +157,7 @@ export function CodeMimeTypesList() {
             result[initial].push(mimeType);
         }
         return result;
-    }, [ codeNotesMimeTypes ]);  
+    }, [ codeNotesMimeTypes ]);
 
     return (
         <ul class="options-mime-types">
@@ -174,4 +174,4 @@ export function CodeMimeTypesList() {
             ))}
         </ul>
     );
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/type_widgets/options/components/LocaleSelector.tsx b/apps/client/src/widgets/type_widgets/options/components/LocaleSelector.tsx
index 0161ae6a8..5628cc798 100644
--- a/apps/client/src/widgets/type_widgets/options/components/LocaleSelector.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/LocaleSelector.tsx
@@ -13,7 +13,6 @@ export function LocaleSelector({ id, locales, currentValue, onChange, defaultLoc
     extraChildren?: ComponentChildren
 }) {
     const [ activeLocale, setActiveLocale ] = useState(defaultLocale?.id === currentValue ? defaultLocale : locales.find(l => l.id === currentValue));
-    console.log("defaultLocale ", defaultLocale, currentValue, activeLocale)
 
     const processedLocales = useMemo(() => {
         const leftToRightLanguages = locales.filter((l) => !l.rtl);
diff --git a/apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx b/apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx
index 9ba1b1064..fea1e9add 100644
--- a/apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx
@@ -1,5 +1,5 @@
 import OptionsSection from "./OptionsSection";
-import type { OptionPages } from "../../content_widget";
+import type { OptionPages } from "../../ContentWidget";
 import { t } from "../../../../services/i18n";
 
 interface RelatedSettingsProps {
@@ -21,4 +21,4 @@ export default function RelatedSettings({ items }: RelatedSettingsProps) {
             </nav>
         </OptionsSection>
     );
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx b/apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx
index 67ebc677e..bc8fb5b73 100644
--- a/apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx
+++ b/apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx
@@ -30,7 +30,7 @@ export default function MultiFactorAuthenticationSettings() {
     )
 }
 
-function EnableMultiFactor({ mfaEnabled, setMfaEnabled }: { mfaEnabled: boolean, setMfaEnabled: (newValue: boolean) => Promise<void>}) {    
+function EnableMultiFactor({ mfaEnabled, setMfaEnabled }: { mfaEnabled: boolean, setMfaEnabled: (newValue: boolean) => Promise<void>}) {
     return (
         <OptionsSection title={t("multi_factor_authentication.title")}>
             <FormText><Trans i18nKey="multi_factor_authentication.description" /></FormText>
@@ -63,7 +63,7 @@ function MultiFactorMethod() {
                     { mfaMethod === "totp"
                     ? t("multi_factor_authentication.totp_description")
                     : <RawHtml html={t("multi_factor_authentication.oauth_description")} /> }
-                </FormText>                
+                </FormText>
             </OptionsSection>
 
             { mfaMethod === "totp"
@@ -159,7 +159,7 @@ function TotpSettings() {
 
 function TotpRecoveryKeys({ values, generateRecoveryKeys }: { values?: string[], generateRecoveryKeys: () => Promise<void> }) {
     return (
-        <OptionsSection title={t("multi_factor_authentication.recovery_keys_title")}>            
+        <OptionsSection title={t("multi_factor_authentication.recovery_keys_title")}>
             <FormText>{t("multi_factor_authentication.recovery_keys_description")}</FormText>
 
             {values ? (
@@ -182,7 +182,7 @@ function TotpRecoveryKeys({ values, generateRecoveryKeys }: { values?: string[],
                             } else {
                                 text = t("multi_factor_authentication.recovery_keys_unused", { index: key });
                             }
-                            
+
                             return <li>{text}</li>
                         })}
                     </ol>
@@ -207,7 +207,7 @@ function OAuthSettings() {
 
     useEffect(() => {
         server.get<OAuthStatus>("oauth/status").then(setStatus);
-    });
+    }, []);
 
     return (
         <OptionsSection title={t("multi_factor_authentication.oauth_title")}>
@@ -235,4 +235,4 @@ function OAuthSettings() {
             )}
         </OptionsSection>
     )
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/type_widgets/protected_session.ts b/apps/client/src/widgets/type_widgets/protected_session.ts
deleted file mode 100644
index e02e14250..000000000
--- a/apps/client/src/widgets/type_widgets/protected_session.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import protectedSessionService from "../../services/protected_session.js";
-import TypeWidget from "./type_widget.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<div class="protected-session-password-component note-detail-printable">
-    <style>
-    .protected-session-password-component {
-        width: 300px;
-        margin: 30px auto auto;
-    }
-
-    .protected-session-password-component input,
-    .protected-session-password-component button {
-        margin-top: 12px;
-    }
-
-    </style>
-
-    <form class="protected-session-password-form">
-        <div class="form-group">
-            <label for="protected-session-password-in-detail">${t("protected_session.enter_password_instruction")}</label>
-            <input id="protected-session-password-in-detail" class="form-control protected-session-password" type="password" autofocus autocomplete="current-password">
-        </div>
-
-        <button class="btn btn-primary">${t("protected_session.start_session_button")}</button>
-    </form>
-</div>`;
-
-export default class ProtectedSessionTypeWidget extends TypeWidget {
-
-    private $passwordForm!: JQuery<HTMLElement>;
-    private $passwordInput!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "protectedSession";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$passwordForm = this.$widget.find(".protected-session-password-form");
-        this.$passwordInput = this.$widget.find(".protected-session-password");
-
-        this.$passwordForm.on("submit", () => {
-            const password = String(this.$passwordInput.val());
-            this.$passwordInput.val("");
-
-            protectedSessionService.setupProtectedSession(password);
-
-            return false;
-        });
-
-        super.doRender();
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/read_only_code.ts b/apps/client/src/widgets/type_widgets/read_only_code.ts
deleted file mode 100644
index 78d84950a..000000000
--- a/apps/client/src/widgets/type_widgets/read_only_code.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { EventData } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-import AbstractCodeTypeWidget from "./abstract_code_type_widget.js";
-import utils from "../../services/utils.js";
-
-const TPL = /*html*/`
-<div class="note-detail-readonly-code note-detail-printable">
-    <style>
-    .note-detail-readonly-code {
-        min-height: 50px;
-        position: relative;
-    }
-    </style>
-
-    <pre class="note-detail-readonly-code-content"></pre>
-</div>`;
-
-export default class ReadOnlyCodeTypeWidget extends AbstractCodeTypeWidget {
-
-    static getType() {
-        return "readOnlyCode";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-        this.$editor = this.$widget.find(".note-detail-readonly-code-content");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        const blob = await this.note?.getBlob();
-        if (!blob) return;
-
-        const isFormattable = note.type === "text" && this.noteContext?.viewScope?.viewMode === "source";
-        const content = isFormattable ? utils.formatHtml(blob.content) : blob.content;
-
-        this._update(note, content);
-        this.show();
-    }
-
-    getExtraOpts() {
-        return {
-            readOnly: true
-        };
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/read_only_text.ts b/apps/client/src/widgets/type_widgets/read_only_text.ts
deleted file mode 100644
index f341ae31e..000000000
--- a/apps/client/src/widgets/type_widgets/read_only_text.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
-import { formatCodeBlocks } from "../../services/syntax_highlight.js";
-import type FNote from "../../entities/fnote.js";
-import type { CommandListenerData, EventData } from "../../components/app_context.js";
-import { getLocaleById } from "../../services/i18n.js";
-import appContext from "../../components/app_context.js";
-import { getMermaidConfig } from "../../services/mermaid.js";
-import { renderMathInElement } from "../../services/math.js";
-
-const TPL = /*html*/`
-<div class="note-detail-readonly-text note-detail-printable" tabindex="100">
-    <style>
-    /* h1 should not be used at all since semantically that's a note title */
-    .note-detail-readonly-text h1 { font-size: 1.8em; }
-    .note-detail-readonly-text h2 { font-size: 1.6em; }
-    .note-detail-readonly-text h3 { font-size: 1.4em; }
-    .note-detail-readonly-text h4 { font-size: 1.2em; }
-    .note-detail-readonly-text h5 { font-size: 1.1em; }
-    .note-detail-readonly-text h6 { font-size: 1.0em; }
-
-    body.heading-style-markdown .note-detail-readonly-text h1::before { content: "#\\2004"; color: var(--muted-text-color); }
-    body.heading-style-markdown .note-detail-readonly-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
-    body.heading-style-markdown .note-detail-readonly-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
-    body.heading-style-markdown .note-detail-readonly-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
-    body.heading-style-markdown .note-detail-readonly-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
-    body.heading-style-markdown .note-detail-readonly-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }
-
-    body.heading-style-underline .note-detail-readonly-text h1 { border-bottom: 1px solid var(--main-border-color); }
-    body.heading-style-underline .note-detail-readonly-text h2 { border-bottom: 1px solid var(--main-border-color); }
-    body.heading-style-underline .note-detail-readonly-text h3 { border-bottom: 1px solid var(--main-border-color); }
-    body.heading-style-underline .note-detail-readonly-text h4:not(.include-note-title) { border-bottom: 1px solid var(--main-border-color); }
-    body.heading-style-underline .note-detail-readonly-text h5 { border-bottom: 1px solid var(--main-border-color); }
-    body.heading-style-underline .note-detail-readonly-text h6 { border-bottom: 1px solid var(--main-border-color); }
-
-    .note-detail-readonly-text {
-
-        padding-inline-start: 24px;
-        padding-top: 10px;
-        font-family: var(--detail-font-family);
-        min-height: 50px;
-        position: relative;
-    }
-
-    body.mobile .note-detail-readonly-text {
-        padding-inline-start: 10px;
-    }
-
-    .note-detail-readonly-text p:first-child, .note-detail-readonly-text::before {
-        margin-top: 0;
-    }
-
-    .note-detail-readonly-text img {
-        max-width: 100%;
-        cursor: pointer;
-    }
-
-    .edit-text-note-button {
-        position: absolute;
-        top: 5px;
-        inset-inline-end: 10px;
-        font-size: 150%;
-        padding: 5px;
-        cursor: pointer;
-        border: 1px solid transparent;
-        border-radius: var(--button-border-radius);
-        color: var(--button-text-color);
-    }
-
-    .edit-text-note-button:hover {
-        border-color: var(--button-border-color);
-    }
-    </style>
-
-    <div class="note-detail-readonly-text-content ck-content use-tn-links"></div>
-</div>
-`;
-
-export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
-
-    private $content!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "readOnlyText";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.$content = this.$widget.find(".note-detail-readonly-text-content");
-
-        this.setupImageOpening(true);
-
-        super.doRender();
-    }
-
-    cleanup() {
-        this.$content.html("");
-    }
-
-    async doRefresh(note: FNote) {
-        // 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 import("@triliumnext/ckeditor5");
-
-        this.onLanguageChanged();
-
-        const blob = await note.getBlob();
-
-        this.$content.html(blob?.content ?? "");
-
-        this.$content.find("a.reference-link").each((_, el) => {
-            this.loadReferenceLinkTitle($(el));
-        });
-
-        this.$content.find("section").each((_, el) => {
-            const noteId = $(el).attr("data-note-id");
-
-            if (noteId) {
-                this.loadIncludedNote(noteId, $(el));
-            }
-        });
-
-        if (this.$content.find("span.math-tex").length > 0) {
-            renderMathInElement(this.$content[0], { trust: true });
-        }
-
-        await this.#applyInlineMermaid();
-        await formatCodeBlocks(this.$content);
-    }
-
-    async #applyInlineMermaid() {
-        const $el = this.$content.find('code[class="language-mermaid"]').closest("pre");
-        if (!$el.length) {
-            return;
-        }
-
-        // Rewrite the code block from <pre><code> to <div> in order not to apply a codeblock style to it.
-        $el.replaceWith((i, content) => {
-            return $('<div class="mermaid-diagram">').text($(content).text());
-        });
-
-        // Initialize mermaid
-        const mermaid = (await import("mermaid")).default;
-        mermaid.initialize(getMermaidConfig());
-        mermaid.run({
-            nodes: this.$content.find(".mermaid-diagram")
-        });
-    }
-
-    async refreshIncludedNoteEvent({ noteId }: EventData<"refreshIncludedNote">) {
-        this.refreshIncludedNote(this.$content, noteId);
-    }
-
-    async executeWithContentElementEvent({ resolve, ntxId }: EventData<"executeWithContentElement">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        await this.initialized;
-
-        resolve(this.$content);
-    }
-
-    async onLanguageChanged(): Promise<void> {
-        const languageCode = this.note?.getLabelValue("language");
-        const correspondingLocale = getLocaleById(languageCode);
-        const isRtl = correspondingLocale?.rtl;
-        this.$widget.attr("dir", isRtl ? "rtl" : "ltr");
-    }
-
-    buildTouchBarCommand({ TouchBar, buildIcon }: CommandListenerData<"buildTouchBar">) {
-        return [
-            new TouchBar.TouchBarSpacer({ size: "flexible" }),
-            new TouchBar.TouchBarButton({
-                icon: buildIcon("NSLockUnlockedTemplate"),
-                click: () => {
-                    if (this.noteContext?.viewScope) {
-                        this.noteContext.viewScope.readOnlyTemporarilyDisabled = true;
-                        appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext: this.noteContext });
-                    }
-                    this.refresh();
-                }
-            })
-        ];
-    }
-
-}
diff --git a/apps/client/src/widgets/type_widgets/relation_map.ts b/apps/client/src/widgets/type_widgets/relation_map.ts
deleted file mode 100644
index 88685a093..000000000
--- a/apps/client/src/widgets/type_widgets/relation_map.ts
+++ /dev/null
@@ -1,774 +0,0 @@
-import server from "../../services/server.js";
-import linkService from "../../services/link.js";
-import contextMenu from "../../menus/context_menu.js";
-import toastService from "../../services/toast.js";
-import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
-import TypeWidget from "./type_widget.js";
-import appContext, { type EventData } from "../../components/app_context.js";
-import utils from "../../services/utils.js";
-import froca from "../../services/froca.js";
-import dialogService from "../../services/dialog.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type { ConnectionMadeEventInfo, jsPlumbInstance, OverlaySpec } from "jsplumb";
-import "../../stylesheets/relation_map.css";
-
-declare module "jsplumb" {
-
-    interface Connection {
-        canvas: HTMLCanvasElement;
-        getType(): string;
-        bind(event: string, callback: (obj: unknown, event: MouseEvent) => void): void;
-    }
-
-    interface Overlay {
-        setLabel(label: string): void;
-    }
-
-    interface ConnectParams {
-        type: RelationType;
-    }
-}
-
-const uniDirectionalOverlays: OverlaySpec[] = [
-    [
-        "Arrow",
-        {
-            location: 1,
-            id: "arrow",
-            length: 14,
-            foldback: 0.8
-        }
-    ],
-    ["Label", { label: "", id: "label", cssClass: "connection-label" }]
-];
-
-const biDirectionalOverlays = [
-    [
-        "Arrow",
-        {
-            location: 1,
-            id: "arrow",
-            length: 14,
-            foldback: 0.8
-        }
-    ],
-    ["Label", { label: "", id: "label", cssClass: "connection-label" }],
-    [
-        "Arrow",
-        {
-            location: 0,
-            id: "arrow2",
-            length: 14,
-            direction: -1,
-            foldback: 0.8
-        }
-    ]
-];
-
-const inverseRelationsOverlays = [
-    [
-        "Arrow",
-        {
-            location: 1,
-            id: "arrow",
-            length: 14,
-            foldback: 0.8
-        }
-    ],
-    ["Label", { label: "", location: 0.2, id: "label-source", cssClass: "connection-label" }],
-    ["Label", { label: "", location: 0.8, id: "label-target", cssClass: "connection-label" }],
-    [
-        "Arrow",
-        {
-            location: 0,
-            id: "arrow2",
-            length: 14,
-            direction: -1,
-            foldback: 0.8
-        }
-    ]
-];
-
-const linkOverlays = [
-    [
-        "Arrow",
-        {
-            location: 1,
-            id: "arrow",
-            length: 14,
-            foldback: 0.8
-        }
-    ]
-];
-
-const TPL = /*html*/`
-<div class="note-detail-relation-map full-height note-detail-printable">
-    <div class="relation-map-wrapper">
-       <div class="relation-map-container"></div>
-    </div>
-</div>`;
-
-let containerCounter = 1;
-
-interface Clipboard {
-    noteId: string;
-    title: string;
-}
-
-interface MapData {
-    notes: {
-        noteId: string;
-        x: number;
-        y: number;
-    }[];
-    transform: {
-        x: number,
-        y: number,
-        scale: number
-    }
-}
-
-export type RelationType = "uniDirectional" | "biDirectional" | "inverse";
-
-interface Relation {
-    name: string;
-    attributeId: string;
-    sourceNoteId: string;
-    targetNoteId: string;
-    type: RelationType;
-    render: boolean;
-}
-
-// TODO: Deduplicate.
-interface PostNoteResponse {
-    note: {
-        noteId: string;
-    };
-}
-
-// TODO: Deduplicate.
-interface RelationMapPostResponse {
-    relations: Relation[];
-    inverseRelations: Record<string, string>;
-    noteTitles: Record<string, string>;
-}
-
-type MenuCommands = "openInNewTab" | "remove" | "editTitle";
-
-export default class RelationMapTypeWidget extends TypeWidget {
-
-    private clipboard?: Clipboard | null;
-    private jsPlumbInstance?: import("jsplumb").jsPlumbInstance | null;
-    private pzInstance?: PanZoom | null;
-    private mapData?: MapData | null;
-    private relations?: Relation[] | null;
-
-    private $relationMapContainer!: JQuery<HTMLElement>;
-    private $relationMapWrapper!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "relationMap";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$relationMapContainer = this.$widget.find(".relation-map-container");
-
-        this.mapData = null;
-        this.jsPlumbInstance = null;
-        // outside of mapData because they are not persisted in the note content
-        this.relations = null;
-        this.pzInstance = null;
-
-        this.$relationMapWrapper = this.$widget.find(".relation-map-wrapper");
-        this.$relationMapWrapper.on("click", (event) => {
-            if (this.clipboard && this.mapData) {
-                let { x, y } = this.getMousePosition(event);
-
-                // modifying position so that the cursor is on the top-center of the box
-                x -= 80;
-                y -= 15;
-
-                this.createNoteBox(this.clipboard.noteId, this.clipboard.title, x, y);
-
-                this.mapData.notes.push({ noteId: this.clipboard.noteId, x, y });
-
-                this.saveData();
-
-                this.clipboard = null;
-            }
-
-            return true;
-        });
-
-        this.$relationMapContainer.attr("id", "relation-map-container-" + containerCounter++);
-        this.$relationMapContainer.on("contextmenu", ".note-box", (e) => {
-            contextMenu.show<MenuCommands>({
-                x: e.pageX,
-                y: e.pageY,
-                items: [
-                    { title: t("relation_map.open_in_new_tab"), command: "openInNewTab", uiIcon: "bx bx-empty" },
-                    { title: t("relation_map.remove_note"), command: "remove", uiIcon: "bx bx-trash" },
-                    { title: t("relation_map.edit_title"), command: "editTitle", uiIcon: "bx bx-pencil" }
-                ],
-                selectMenuItemHandler: ({ command }) => this.contextMenuHandler(command, e.target)
-            });
-
-            return false; // blocks default browser right click menu
-        });
-
-        this.clipboard = null;
-
-        this.$widget.on("drop", (ev) => this.dropNoteOntoRelationMapHandler(ev));
-        this.$widget.on("dragover", (ev) => ev.preventDefault());
-
-        this.initialized = new Promise(async (res) => {
-            // Weird typecast is needed probably due to bad typings in the module itself.
-            const jsPlumb = (await import("jsplumb")).default.jsPlumb as unknown as jsPlumbInstance;
-            jsPlumb.ready(res);
-        });
-
-        super.doRender();
-    }
-
-    async contextMenuHandler(command: MenuCommands | undefined, originalTarget: HTMLElement) {
-        const $noteBox = $(originalTarget).closest(".note-box");
-        const $title = $noteBox.find(".title a");
-        const noteId = this.idToNoteId($noteBox.prop("id"));
-
-        if (command === "openInNewTab") {
-            appContext.tabManager.openTabWithNoteWithHoisting(noteId);
-        } else if (command === "remove") {
-            const result = await dialogService.confirmDeleteNoteBoxWithNote($title.text());
-
-            if (typeof result !== "object" || !result.confirmed) {
-                return;
-            }
-
-            this.jsPlumbInstance?.remove(this.noteIdToId(noteId));
-
-            if (result.isDeleteNoteChecked) {
-                const taskId = utils.randomString(10);
-
-                await server.remove(`notes/${noteId}?taskId=${taskId}&last=true`);
-            }
-
-            if (this.mapData) {
-                this.mapData.notes = this.mapData.notes.filter((note) => note.noteId !== noteId);
-            }
-
-            if (this.relations) {
-                this.relations = this.relations.filter((relation) => relation.sourceNoteId !== noteId && relation.targetNoteId !== noteId);
-            }
-
-            this.saveData();
-        } else if (command === "editTitle") {
-            const title = await dialogService.prompt({
-                title: t("relation_map.rename_note"),
-                message: t("relation_map.enter_new_title"),
-                defaultValue: $title.text()
-            });
-
-            if (!title) {
-                return;
-            }
-
-            await server.put(`notes/${noteId}/title`, { title });
-
-            $title.text(title);
-        }
-    }
-
-    async loadMapData() {
-        this.mapData = {
-            notes: [],
-            // it is important to have this exact value here so that initial transform is the same as this
-            // which will guarantee note won't be saved on first conversion to the relation map note type
-            // this keeps the principle that note type change doesn't destroy note content unless user
-            // does some actual change
-            transform: {
-                x: 0,
-                y: 0,
-                scale: 1
-            }
-        };
-
-        const blob = await this.note?.getBlob();
-
-        if (blob?.content) {
-            try {
-                this.mapData = JSON.parse(blob.content);
-            } catch (e) {
-                console.log("Could not parse content: ", e);
-            }
-        }
-    }
-
-    noteIdToId(noteId: string) {
-        return `rel-map-note-${noteId}`;
-    }
-
-    idToNoteId(id: string) {
-        return id.substr(13);
-    }
-
-    async doRefresh(note: FNote) {
-        await this.loadMapData();
-
-        await this.initJsPlumbInstance();
-
-        await this.initPanZoom();
-
-        this.loadNotesAndRelations();
-    }
-
-    clearMap() {
-        // delete all endpoints and connections
-        // this is done at this point (after async operations) to reduce flicker to the minimum
-        this.jsPlumbInstance?.deleteEveryEndpoint();
-
-        // without this, we still end up with note boxes remaining in the canvas
-        this.$relationMapContainer.empty();
-    }
-
-    async loadNotesAndRelations() {
-        if (!this.mapData || !this.jsPlumbInstance) {
-            return;
-        }
-
-        const noteIds = this.mapData.notes.map((note) => note.noteId);
-        const data = await server.post<RelationMapPostResponse>("relation-map", { noteIds, relationMapNoteId: this.noteId });
-
-        this.relations = [];
-
-        for (const relation of data.relations) {
-            const match = this.relations.find(
-                (rel) =>
-                    rel.name === data.inverseRelations[relation.name] &&
-                    ((rel.sourceNoteId === relation.sourceNoteId && rel.targetNoteId === relation.targetNoteId) ||
-                        (rel.sourceNoteId === relation.targetNoteId && rel.targetNoteId === relation.sourceNoteId))
-            );
-
-            if (match) {
-                match.type = relation.type = relation.name === data.inverseRelations[relation.name] ? "biDirectional" : "inverse";
-                relation.render = false; // don't render second relation
-            } else {
-                relation.type = "uniDirectional";
-                relation.render = true;
-            }
-
-            this.relations.push(relation);
-        }
-
-        this.mapData.notes = this.mapData.notes.filter((note) => note.noteId in data.noteTitles);
-
-        this.jsPlumbInstance.batch(async () => {
-            if (!this.jsPlumbInstance || !this.mapData || !this.relations) {
-                return;
-            }
-
-            this.clearMap();
-
-            for (const note of this.mapData.notes) {
-                const title = data.noteTitles[note.noteId];
-
-                await this.createNoteBox(note.noteId, title, note.x, note.y);
-            }
-
-            for (const relation of this.relations) {
-                if (!relation.render) {
-                    continue;
-                }
-
-                const connection = this.jsPlumbInstance.connect({
-                    source: this.noteIdToId(relation.sourceNoteId),
-                    target: this.noteIdToId(relation.targetNoteId),
-                    type: relation.type
-                });
-
-                // TODO: Does this actually do anything.
-                //@ts-expect-error
-                connection.id = relation.attributeId;
-
-                if (relation.type === "inverse") {
-                    connection.getOverlay("label-source").setLabel(relation.name);
-                    connection.getOverlay("label-target").setLabel(data.inverseRelations[relation.name]);
-                } else {
-                    connection.getOverlay("label").setLabel(relation.name);
-                }
-
-                connection.canvas.setAttribute("data-connection-id", connection.id);
-            }
-        });
-    }
-
-    async initPanZoom() {
-        if (this.pzInstance) {
-            return;
-        }
-
-        const panzoom = (await import("panzoom")).default;
-        this.pzInstance = panzoom(this.$relationMapContainer[0], {
-            maxZoom: 2,
-            minZoom: 0.3,
-            smoothScroll: false,
-
-            //@ts-expect-error Upstream incorrectly mentions no arguments.
-            filterKey: function (e: KeyboardEvent) {
-                // if ALT is pressed, then panzoom should bubble the event up
-                // this is to preserve ALT-LEFT, ALT-RIGHT navigation working
-                return e.altKey;
-            }
-        });
-
-        if (!this.pzInstance) {
-            return;
-        }
-
-        this.pzInstance.on("transform", () => {
-            // gets triggered on any transform change
-            this.jsPlumbInstance?.setZoom(this.getZoom());
-
-            this.saveCurrentTransform();
-        });
-
-        if (this.mapData?.transform) {
-            this.pzInstance.zoomTo(0, 0, this.mapData.transform.scale);
-
-            this.pzInstance.moveTo(this.mapData.transform.x, this.mapData.transform.y);
-        } else {
-            // set to initial coordinates
-            this.pzInstance.moveTo(0, 0);
-        }
-    }
-
-    saveCurrentTransform() {
-        if (!this.pzInstance) {
-            return;
-        }
-
-        const newTransform = this.pzInstance.getTransform();
-
-        if (this.mapData && JSON.stringify(newTransform) !== JSON.stringify(this.mapData.transform)) {
-            // clone transform object
-            this.mapData.transform = JSON.parse(JSON.stringify(newTransform));
-
-            this.saveData();
-        }
-    }
-
-    cleanup() {
-        if (this.jsPlumbInstance) {
-            this.clearMap();
-        }
-
-        if (this.pzInstance) {
-            this.pzInstance.dispose();
-            this.pzInstance = null;
-        }
-    }
-
-    async initJsPlumbInstance() {
-        if (this.jsPlumbInstance) {
-            this.cleanup();
-
-            return;
-        }
-
-        const jsPlumb = (await import("jsplumb")).default.jsPlumb;
-        this.jsPlumbInstance = jsPlumb.getInstance({
-            Endpoint: ["Dot", { radius: 2 }],
-            Connector: "StateMachine",
-            ConnectionOverlays: uniDirectionalOverlays,
-            HoverPaintStyle: { stroke: "#777", strokeWidth: 1 },
-            Container: this.$relationMapContainer.attr("id")
-        });
-
-        if (!this.jsPlumbInstance) {
-            return;
-        }
-
-        this.jsPlumbInstance.registerConnectionType("uniDirectional", { anchor: "Continuous", connector: "StateMachine", overlays: uniDirectionalOverlays });
-
-        this.jsPlumbInstance.registerConnectionType("biDirectional", { anchor: "Continuous", connector: "StateMachine", overlays: biDirectionalOverlays });
-
-        this.jsPlumbInstance.registerConnectionType("inverse", { anchor: "Continuous", connector: "StateMachine", overlays: inverseRelationsOverlays });
-
-        this.jsPlumbInstance.registerConnectionType("link", { anchor: "Continuous", connector: "StateMachine", overlays: linkOverlays });
-
-        this.jsPlumbInstance.bind("connection", (info, originalEvent) => this.connectionCreatedHandler(info, originalEvent));
-    }
-
-    async connectionCreatedHandler(info: ConnectionMadeEventInfo, originalEvent: Event) {
-        const connection = info.connection;
-
-        connection.bind("contextmenu", (obj: unknown, event: MouseEvent) => {
-            if (connection.getType().includes("link")) {
-                // don't create context menu if it's a link since there's nothing to do with link from relation map
-                // (don't open browser menu either)
-                event.preventDefault();
-            } else {
-                event.preventDefault();
-                event.stopPropagation();
-
-                contextMenu.show({
-                    x: event.pageX,
-                    y: event.pageY,
-                    items: [{ title: t("relation_map.remove_relation"), command: "remove", uiIcon: "bx bx-trash" }],
-                    selectMenuItemHandler: async ({ command }) => {
-                        if (command === "remove") {
-                            if (!(await dialogService.confirm(t("relation_map.confirm_remove_relation"))) || !this.relations) {
-                                return;
-                            }
-
-                            const relation = this.relations.find((rel) => rel.attributeId === connection.id);
-
-                            if (relation) {
-                                await server.remove(`notes/${relation.sourceNoteId}/relations/${relation.name}/to/${relation.targetNoteId}`);
-                            }
-
-                            this.jsPlumbInstance?.deleteConnection(connection);
-
-                            this.relations = this.relations.filter((relation) => relation.attributeId !== connection.id);
-                        }
-                    }
-                });
-            }
-        });
-
-        // if there's no event, then this has been triggered programmatically
-        if (!originalEvent || !this.jsPlumbInstance) {
-            return;
-        }
-
-        let name = await dialogService.prompt({
-            message: t("relation_map.specify_new_relation_name"),
-            shown: ({ $answer }) => {
-                if (!$answer) {
-                    return;
-                }
-
-                $answer.on("keyup", () => {
-                    // invalid characters are simply ignored (from user perspective they are not even entered)
-                    const attrName = utils.filterAttributeName($answer.val() as string);
-
-                    $answer.val(attrName);
-                });
-
-                attributeAutocompleteService.initAttributeNameAutocomplete({
-                    $el: $answer,
-                    attributeType: "relation",
-                    open: true
-                });
-            }
-        });
-
-        if (!name || !name.trim()) {
-            this.jsPlumbInstance.deleteConnection(connection);
-
-            return;
-        }
-
-        name = utils.filterAttributeName(name);
-
-        const targetNoteId = this.idToNoteId(connection.target.id);
-        const sourceNoteId = this.idToNoteId(connection.source.id);
-
-        const relationExists = this.relations?.some((rel) => rel.targetNoteId === targetNoteId && rel.sourceNoteId === sourceNoteId && rel.name === name);
-
-        if (relationExists) {
-            await dialogService.info(t("relation_map.connection_exists", { name }));
-
-            this.jsPlumbInstance.deleteConnection(connection);
-
-            return;
-        }
-
-        await server.put(`notes/${sourceNoteId}/relations/${name}/to/${targetNoteId}`);
-
-        this.loadNotesAndRelations();
-    }
-
-    saveData() {
-        this.spacedUpdate.scheduleUpdate();
-    }
-
-    async createNoteBox(noteId: string, title: string, x: number, y: number) {
-        if (!this.jsPlumbInstance) {
-            return;
-        }
-
-        const $link = await linkService.createLink(noteId, { title });
-        $link.mousedown((e) => linkService.goToLink(e));
-
-        const note = await froca.getNote(noteId);
-        if (!note) {
-            return;
-        }
-
-        const $noteBox = $("<div>")
-            .addClass("note-box")
-            .addClass(note.getCssClass())
-            .prop("id", this.noteIdToId(noteId))
-            .append($("<span>").addClass("title").append($link))
-            .append($("<div>").addClass("endpoint").attr("title", t("relation_map.start_dragging_relations")))
-            .css("left", `${x}px`)
-            .css("top", `${y}px`);
-
-        this.jsPlumbInstance.getContainer().appendChild($noteBox[0]);
-
-        this.jsPlumbInstance.draggable($noteBox[0], {
-            start: (params) => {},
-            drag: (params) => {},
-            stop: (params) => {
-                const noteId = this.idToNoteId(params.el.id);
-
-                const note = this.mapData?.notes.find((note) => note.noteId === noteId);
-
-                if (!note) {
-                    logError(t("relation_map.note_not_found", { noteId }));
-                    return;
-                }
-
-                //@ts-expect-error TODO: Check if this is still valid.
-                [note.x, note.y] = params.finalPos;
-
-                this.saveData();
-            }
-        });
-
-        this.jsPlumbInstance.makeSource($noteBox[0], {
-            filter: ".endpoint",
-            anchor: "Continuous",
-            connectorStyle: { stroke: "#000", strokeWidth: 1 },
-            connectionType: "basic",
-            extract: {
-                action: "the-action"
-            }
-        });
-
-        this.jsPlumbInstance.makeTarget($noteBox[0], {
-            dropOptions: { hoverClass: "dragHover" },
-            anchor: "Continuous",
-            allowLoopback: true
-        });
-    }
-
-    getZoom() {
-        const matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*-?\d*\.?\d+,\s*-?\d*\.?\d+,\s*-?\d*\.?\d+\)/;
-
-        const transform = this.$relationMapContainer.css("transform");
-
-        if (transform === "none") {
-            return 1;
-        }
-
-        const matches = transform.match(matrixRegex);
-
-        if (!matches) {
-            throw new Error(t("relation_map.cannot_match_transform", { transform }));
-        }
-
-        return parseFloat(matches[1]);
-    }
-
-    async dropNoteOntoRelationMapHandler(ev: JQuery.DropEvent) {
-        ev.preventDefault();
-
-        const dragData = ev.originalEvent?.dataTransfer?.getData("text");
-        if (!dragData) {
-            return;
-        }
-        const notes = JSON.parse(dragData);
-
-        let { x, y } = this.getMousePosition(ev);
-
-        for (const note of notes) {
-            const exists = this.mapData?.notes.some((n) => n.noteId === note.noteId);
-
-            if (exists) {
-                toastService.showError(t("relation_map.note_already_in_diagram", { title: note.title }));
-                continue;
-            }
-
-            this.mapData?.notes.push({ noteId: note.noteId, x, y });
-
-            if (x > 1000) {
-                y += 100;
-                x = 0;
-            } else {
-                x += 200;
-            }
-        }
-
-        this.saveData();
-
-        this.loadNotesAndRelations();
-    }
-
-    getMousePosition(evt: JQuery.ClickEvent | JQuery.DropEvent) {
-        const rect = this.$relationMapContainer[0].getBoundingClientRect();
-
-        const zoom = this.getZoom();
-
-        return {
-            x: ((evt.clientX ?? 0) - rect.left) / zoom,
-            y: ((evt.clientY ?? 0) - rect.top) / zoom
-        };
-    }
-
-    getData() {
-        return {
-            content: JSON.stringify(this.mapData)
-        };
-    }
-
-    async relationMapCreateChildNoteEvent({ ntxId }: EventData<"relationMapCreateChildNote">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        const title = await dialogService.prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });
-
-        if (!title?.trim()) {
-            return;
-        }
-
-        const { note } = await server.post<PostNoteResponse>(`notes/${this.noteId}/children?target=into`, {
-            title,
-            content: "",
-            type: "text"
-        });
-
-        toastService.showMessage(t("relation_map.click_on_canvas_to_place_new_note"));
-
-        this.clipboard = { noteId: note.noteId, title };
-    }
-
-    relationMapResetPanZoomEvent({ ntxId }: EventData<"relationMapResetPanZoom">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        // reset to initial pan & zoom state
-        this.pzInstance?.zoomTo(0, 0, 1 / this.getZoom());
-        this.pzInstance?.moveTo(0, 0);
-    }
-
-    relationMapResetZoomInEvent({ ntxId }: EventData<"relationMapResetZoomIn">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        this.pzInstance?.zoomTo(0, 0, 1.2);
-    }
-
-    relationMapResetZoomOutEvent({ ntxId }: EventData<"relationMapResetZoomOut">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        this.pzInstance?.zoomTo(0, 0, 0.8);
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/relation_map/NoteBox.tsx b/apps/client/src/widgets/type_widgets/relation_map/NoteBox.tsx
new file mode 100644
index 000000000..fa65926d0
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/relation_map/NoteBox.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { useNoteProperty } from "../../react/hooks";
+import froca from "../../../services/froca";
+import { t } from "../../../services/i18n";
+import { JsPlumbItem } from "./jsplumb";
+import FNote from "../../../entities/fnote";
+import RelationMapApi, { MapDataNoteEntry } from "./api";
+import { RefObject } from "preact";
+import NoteLink from "../../react/NoteLink";
+import { idToNoteId, noteIdToId } from "./utils";
+import { buildNoteContextMenuHandler } from "./context_menu";
+
+const NOTE_BOX_SOURCE_CONFIG = {
+    filter: ".endpoint",
+    anchor: "Continuous",
+    connectorStyle: { stroke: "#000", strokeWidth: 1 },
+    connectionType: "basic",
+    extract: {
+        action: "the-action"
+    }
+};
+
+const NOTE_BOX_TARGET_CONFIG = {
+    dropOptions: { hoverClass: "dragHover" },
+    anchor: "Continuous",
+    allowLoopback: true
+};
+
+interface NoteBoxProps extends MapDataNoteEntry {
+    mapApiRef: RefObject<RelationMapApi>;
+}
+
+export function NoteBox({ noteId, x, y, mapApiRef }: NoteBoxProps) {
+    const [ note, setNote ] = useState<FNote | null>();
+    const title = useNoteProperty(note, "title");
+    useEffect(() => {
+        froca.getNote(noteId).then(setNote);
+    }, [ noteId ]);
+
+    const contextMenuHandler = useMemo(() => {
+        return buildNoteContextMenuHandler(note, mapApiRef);
+    }, [ note ]);
+
+    return note && (
+        <JsPlumbItem
+            id={noteIdToId(noteId)}
+            className={`note-box ${note?.getCssClass()}`}
+            onContextMenu={contextMenuHandler}
+            x={x} y={y}
+            draggable={{
+                start() {},
+                drag() {},
+                stop(params) {
+                    const noteId = idToNoteId(params.el.id);
+                    const [ x, y ] = params.pos;
+                    mapApiRef.current?.moveNote(noteId, x, y);
+                },
+            }}
+            sourceConfig={NOTE_BOX_SOURCE_CONFIG}
+            targetConfig={NOTE_BOX_TARGET_CONFIG}
+        >
+            <NoteLink className="title" title={title} notePath={noteId} noTnLink noContextMenu />
+            <div className="endpoint" title={t("relation_map.start_dragging_relations")} />
+        </JsPlumbItem>
+    )
+}
diff --git a/apps/client/src/stylesheets/relation_map.css b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.css
similarity index 100%
rename from apps/client/src/stylesheets/relation_map.css
rename to apps/client/src/widgets/type_widgets/relation_map/RelationMap.css
diff --git a/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
new file mode 100644
index 000000000..1ef0159c1
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx
@@ -0,0 +1,421 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { TypeWidgetProps } from "../type_widget";
+import { jsPlumbInstance, OnConnectionBindInfo } from "jsplumb";
+import { useEditorSpacedUpdate, useTriliumEvent, useTriliumEvents } from "../../react/hooks";
+import FNote from "../../../entities/fnote";
+import { RefObject } from "preact";
+import "./RelationMap.css";
+import { t } from "../../../services/i18n";
+import panzoom, { PanZoomOptions } from "panzoom";
+import dialog from "../../../services/dialog";
+import server from "../../../services/server";
+import toast from "../../../services/toast";
+import { CreateChildrenResponse, RelationMapPostResponse } from "@triliumnext/commons";
+import RelationMapApi, { ClientRelation, MapData, MapDataNoteEntry, RelationType } from "./api";
+import setupOverlays, { uniDirectionalOverlays } from "./overlays";
+import { JsPlumb } from "./jsplumb";
+import { getMousePosition, getZoom, idToNoteId, noteIdToId } from "./utils";
+import { NoteBox } from "./NoteBox";
+import utils from "../../../services/utils";
+import attribute_autocomplete from "../../../services/attribute_autocomplete";
+import { buildRelationContextMenuHandler } from "./context_menu";
+import { HTMLProps } from "preact/compat";
+
+interface Clipboard {
+    noteId: string;
+    title: string;
+}
+
+declare module "jsplumb" {
+
+    interface Connection {
+        canvas: HTMLCanvasElement;
+        getType(): string;
+        bind(event: string, callback: (obj: unknown, event: MouseEvent) => void): void;
+    }
+
+    interface Overlay {
+        setLabel(label: string): void;
+    }
+
+    interface ConnectParams {
+        type: RelationType;
+    }
+}
+
+export default function RelationMap({ note, noteContext, ntxId }: TypeWidgetProps) {
+    const [ data, setData ] = useState<MapData>();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const mapApiRef = useRef<RelationMapApi>(null);
+    const pbApiRef = useRef<jsPlumbInstance>(null);
+
+    const spacedUpdate = useEditorSpacedUpdate({
+        note,
+        noteContext,
+        getData() {
+            return {
+                content: JSON.stringify(data),
+            };
+        },
+        onContentChange(content) {
+            let newData: MapData | null = null;
+
+            if (content) {
+                try {
+                    newData = JSON.parse(content);
+                } catch (e) {
+                    console.log("Could not parse content: ", e);
+                }
+            }
+
+            if (!newData) {
+                newData = {
+                    notes: [],
+                    // it is important to have this exact value here so that initial transform is the same as this
+                    // which will guarantee note won't be saved on first conversion to the relation map note type
+                    // this keeps the principle that note type change doesn't destroy note content unless user
+                    // does some actual change
+                    transform: {
+                        x: 0,
+                        y: 0,
+                        scale: 1
+                    }
+                };
+            }
+
+            setData(newData);
+            mapApiRef.current = new RelationMapApi(note, newData, (newData, refreshUi) => {
+                if (refreshUi) {
+                    setData(newData);
+                }
+                spacedUpdate.scheduleUpdate();
+            });
+        },
+        dataSaved() {
+
+        }
+    });
+
+    const onTransform = useCallback((pzInstance: PanZoom) => {
+        if (!containerRef.current || !mapApiRef.current || !pbApiRef.current || !data) return;
+        const zoom = getZoom(containerRef.current);
+        mapApiRef.current.setTransform(pzInstance.getTransform());
+        pbApiRef.current.setZoom(zoom);
+    }, [ data ]);
+
+    const clickCallback = useNoteCreation({
+        containerRef,
+        note,
+        ntxId,
+        mapApiRef
+    });
+    const dragProps = useNoteDragging({ containerRef, mapApiRef });
+
+    const connectionCallback = useRelationCreation({ mapApiRef, jsPlumbApiRef: pbApiRef });
+
+    usePanZoom({
+        ntxId,
+        containerRef,
+        options: {
+            maxZoom: 2,
+            minZoom: 0.3,
+        smoothScroll: false,
+            //@ts-expect-error Upstream incorrectly mentions no arguments.
+            filterKey: function (e: KeyboardEvent) {
+                // if ALT is pressed, then panzoom should bubble the event up
+                // this is to preserve ALT-LEFT, ALT-RIGHT navigation working
+                return e.altKey;
+            }
+        },
+        transformData: data?.transform,
+        onTransform
+    });
+
+    useRelationData(note.noteId, data, mapApiRef, pbApiRef);
+
+    return (
+        <div
+            className="relation-map-wrapper"
+            onClick={clickCallback}
+            {...dragProps}
+        >
+            <JsPlumb
+                apiRef={pbApiRef}
+                containerRef={containerRef}
+                className="relation-map-container"
+                props={{
+                    Endpoint: ["Dot", { radius: 2 }],
+                    Connector: "StateMachine",
+                    ConnectionOverlays: uniDirectionalOverlays,
+                    HoverPaintStyle: { stroke: "#777", strokeWidth: 1 },
+                }}
+                onInstanceCreated={setupOverlays}
+                onConnection={connectionCallback}
+            >
+                {data?.notes.map(note => (
+                    <NoteBox {...note} mapApiRef={mapApiRef} />
+                ))}
+            </JsPlumb>
+        </div>
+    );
+}
+
+function usePanZoom({ ntxId, containerRef, options, transformData, onTransform }: {
+    ntxId: string | null | undefined;
+    containerRef: RefObject<HTMLDivElement>;
+    options: PanZoomOptions;
+    transformData: MapData["transform"] | undefined;
+    onTransform: (pzInstance: PanZoom) => void
+}) {
+    const apiRef = useRef<PanZoom>(null);
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+        const pzInstance = panzoom(containerRef.current, options);
+        apiRef.current = pzInstance;
+
+        if (transformData) {
+            pzInstance.zoomTo(0, 0, transformData.scale);
+            pzInstance.moveTo(transformData.x, transformData.y);
+        } else {
+            // set to initial coordinates
+            pzInstance.moveTo(0, 0);
+        }
+
+        if (onTransform) {
+            apiRef.current!.on("transform", () => onTransform(pzInstance));
+        }
+
+        return () => pzInstance.dispose();
+    }, [ containerRef, onTransform ]);
+
+    useTriliumEvents([ "relationMapResetPanZoom", "relationMapResetZoomIn", "relationMapResetZoomOut" ], ({ ntxId: eventNtxId }, eventName) => {
+        const pzInstance = apiRef.current;
+        if (eventNtxId !== ntxId || !pzInstance) return;
+
+        if (eventName === "relationMapResetPanZoom" && containerRef.current) {
+            const zoom = getZoom(containerRef.current);
+            pzInstance.zoomTo(0, 0, 1 / zoom);
+            pzInstance.moveTo(0, 0);
+        } else if (eventName === "relationMapResetZoomIn") {
+            pzInstance.zoomTo(0, 0, 1.2);
+        } else if (eventName === "relationMapResetZoomOut") {
+            pzInstance.zoomTo(0, 0, 0.8);
+        }
+    });
+}
+
+async function useRelationData(noteId: string, mapData: MapData | undefined, mapApiRef: RefObject<RelationMapApi>, jsPlumbRef: RefObject<jsPlumbInstance>) {
+    const noteIds = mapData?.notes.map((note) => note.noteId);
+    const [ relations, setRelations ] = useState<ClientRelation[]>();
+    const [ inverseRelations, setInverseRelations ] = useState<RelationMapPostResponse["inverseRelations"]>();
+
+    async function refresh() {
+        const api = mapApiRef.current;
+        if (!noteIds || !api) return;
+
+        const data = await server.post<RelationMapPostResponse>("relation-map", { noteIds, relationMapNoteId: noteId });
+        const relations: ClientRelation[] = [];
+
+        for (const _relation of data.relations) {
+            const relation = _relation as ClientRelation;   // we inject a few variables.
+            const match = relations.find(
+                (rel) =>
+                    rel.name === data.inverseRelations[relation.name] &&
+                    ((rel.sourceNoteId === relation.sourceNoteId && rel.targetNoteId === relation.targetNoteId) ||
+                        (rel.sourceNoteId === relation.targetNoteId && rel.targetNoteId === relation.sourceNoteId))
+            );
+
+            if (match) {
+                match.type = relation.type = relation.name === data.inverseRelations[relation.name] ? "biDirectional" : "inverse";
+                relation.render = false; // don't render second relation
+            } else {
+                relation.type = "uniDirectional";
+                relation.render = true;
+            }
+
+            relations.push(relation);
+            setInverseRelations(data.inverseRelations);
+        }
+
+        setRelations(relations);
+        api.loadRelations(relations);
+        api.cleanupOtherNotes(Object.keys(data.noteTitles));
+    }
+
+    useEffect(() => {
+        refresh();
+    }, [ noteId, mapData, jsPlumbInstance ]);
+
+    // Refresh on the canvas.
+    useEffect(() => {
+        const jsPlumbInstance = jsPlumbRef.current;
+        if (!jsPlumbInstance) return;
+
+        jsPlumbInstance.batch(async () => {
+            if (!mapData || !relations) {
+                return;
+            }
+
+            jsPlumbInstance.deleteEveryEndpoint();
+
+            for (const relation of relations) {
+                if (!relation.render) {
+                    continue;
+                }
+
+                const connection = jsPlumbInstance.connect({
+                    source: noteIdToId(relation.sourceNoteId),
+                    target: noteIdToId(relation.targetNoteId),
+                    type: relation.type
+                });
+                if (!connection) return;
+
+                // TODO: Does this actually do anything.
+                //@ts-expect-error
+                connection.id = relation.attributeId;
+
+                if (relation.type === "inverse") {
+                    connection.getOverlay("label-source").setLabel(relation.name);
+                    connection.getOverlay("label-target").setLabel(inverseRelations?.[relation.name] ?? "");
+                } else {
+                    connection.getOverlay("label").setLabel(relation.name);
+                }
+
+                connection.canvas.setAttribute("data-connection-id", connection.id);
+            }
+        });
+    }, [ relations, mapData ]);
+}
+
+function useNoteCreation({ ntxId, note, containerRef, mapApiRef }: {
+    ntxId: string | null | undefined;
+    note: FNote;
+    containerRef: RefObject<HTMLDivElement>;
+    mapApiRef: RefObject<RelationMapApi>;
+}) {
+    const clipboardRef = useRef<Clipboard>(null);
+    useTriliumEvent("relationMapCreateChildNote", async ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        const title = await dialog.prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });
+        if (!title?.trim()) return;
+
+        const { note: createdNote } = await server.post<CreateChildrenResponse>(`notes/${note.noteId}/children?target=into`, {
+            title,
+            content: "",
+            type: "text"
+        });
+
+        toast.showMessage(t("relation_map.click_on_canvas_to_place_new_note"));
+        clipboardRef.current = {
+            noteId: createdNote.noteId,
+            title
+        };
+    });
+    const onClickHandler = useCallback((e: MouseEvent) => {
+        const clipboard = clipboardRef.current;
+        if (clipboard && containerRef.current && mapApiRef.current) {
+            const zoom = getZoom(containerRef.current);
+            let { x, y } = getMousePosition(e, containerRef.current, zoom);
+
+            // modifying position so that the cursor is on the top-center of the box
+            x -= 80;
+            y -= 15;
+
+            mapApiRef.current.createItem({ noteId: clipboard.noteId, x, y });
+            clipboardRef.current = null;
+        }
+    }, []);
+    return onClickHandler;
+}
+
+function useNoteDragging({ containerRef, mapApiRef }: {
+    containerRef: RefObject<HTMLDivElement>;
+    mapApiRef: RefObject<RelationMapApi>;
+}): Pick<HTMLProps<HTMLDivElement>, "onDrop" | "onDragOver"> {
+    const dragProps = useMemo(() => ({
+        onDrop(ev: DragEvent) {
+            const container = containerRef.current;
+            if (!container) return;
+
+            const dragData = ev.dataTransfer?.getData("text");
+            if (!dragData) return;
+            const notes = JSON.parse(dragData);
+
+            let { x, y } = getMousePosition(ev, container, getZoom(container));
+            const entries: (MapDataNoteEntry & { title: string })[] = [];
+
+            for (const note of notes) {
+                entries.push({
+                    ...note,
+                    x, y
+                });
+
+                if (x > 1000) {
+                    y += 100;
+                    x = 0;
+                } else {
+                    x += 200;
+                }
+            }
+
+            mapApiRef.current?.addMultipleNotes(entries);
+        },
+        onDragOver(ev) {
+            ev.preventDefault();
+        }
+    }), [ containerRef, mapApiRef ]);
+
+    return dragProps;
+}
+
+function useRelationCreation({ mapApiRef, jsPlumbApiRef }: { mapApiRef: RefObject<RelationMapApi>, jsPlumbApiRef: RefObject<jsPlumbInstance> }) {
+    const connectionCallback = useCallback(async (info: OnConnectionBindInfo, originalEvent: Event) => {
+        const connection = info.connection;
+
+        // Called whenever a connection is created, either initially or manually when added by the user.
+        const handler = buildRelationContextMenuHandler(connection, mapApiRef);
+        connection.bind("contextmenu", handler);
+
+        // if there's no event, then this has been triggered programmatically
+        if (!originalEvent || !mapApiRef.current) return;
+
+        let name = await dialog.prompt({
+            message: t("relation_map.specify_new_relation_name"),
+            shown: ({ $answer }) => {
+                if (!$answer) {
+                    return;
+                }
+
+                $answer.on("keyup", () => {
+                    // invalid characters are simply ignored (from user perspective they are not even entered)
+                    const attrName = utils.filterAttributeName($answer.val() as string);
+
+                    $answer.val(attrName);
+                });
+
+                attribute_autocomplete.initAttributeNameAutocomplete({
+                    $el: $answer,
+                    attributeType: "relation",
+                    open: true
+                });
+            }
+        });
+
+        // Delete the newly created connection if the dialog was dismissed.
+        if (!name || !name.trim()) {
+            jsPlumbApiRef.current?.deleteConnection(connection);
+            return;
+        }
+
+        const targetNoteId = idToNoteId(connection.target.id);
+        const sourceNoteId = idToNoteId(connection.source.id);
+        const result = await mapApiRef.current.connect(name, sourceNoteId, targetNoteId);
+        if (!result) {
+            await dialog.info(t("relation_map.connection_exists", { name }));
+            jsPlumbApiRef.current?.deleteConnection(connection);
+        }
+    }, []);
+
+    return connectionCallback;
+}
diff --git a/apps/client/src/widgets/type_widgets/relation_map/api.ts b/apps/client/src/widgets/type_widgets/relation_map/api.ts
new file mode 100644
index 000000000..f3e258db6
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/relation_map/api.ts
@@ -0,0 +1,134 @@
+import { Connection } from "jsplumb";
+import FNote from "../../../entities/fnote";
+import { t } from "../../../services/i18n";
+import server from "../../../services/server";
+import utils from "../../../services/utils";
+import { RelationMapRelation } from "@triliumnext/commons";
+import toast from "../../../services/toast";
+
+export interface MapDataNoteEntry {
+    noteId: string;
+    x: number;
+    y: number;
+}
+
+export interface MapData {
+    notes: MapDataNoteEntry[];
+    transform: PanZoomTransform;
+}
+
+export type RelationType = "uniDirectional" | "biDirectional" | "inverse";
+
+export interface ClientRelation extends RelationMapRelation {
+    type: RelationType;
+    render: boolean;
+}
+
+const DELTA = 0.0001;
+
+export default class RelationMapApi {
+
+    private data: MapData;
+    private relations: ClientRelation[];
+    private onDataChange: (refreshUi: boolean) => void;
+
+    constructor(note: FNote, initialMapData: MapData, onDataChange: (newData: MapData, refreshUi: boolean) => void) {
+        this.data = initialMapData;
+        this.onDataChange = (refreshUi) => onDataChange({ ...this.data }, refreshUi);
+        this.relations = [];
+    }
+
+    loadRelations(relations: ClientRelation[]) {
+        this.relations = relations;
+    }
+
+    createItem(newNote: MapDataNoteEntry) {
+        this.data.notes.push(newNote);
+        this.onDataChange(true);
+    }
+
+    async removeItem(noteId: string, deleteNoteToo: boolean) {
+        console.log("Remove ", noteId, deleteNoteToo);
+        if (deleteNoteToo) {
+            const taskId = utils.randomString(10);
+            await server.remove(`notes/${noteId}?taskId=${taskId}&last=true`);
+        }
+
+        if (this.data) {
+            this.data.notes = this.data.notes.filter((note) => note.noteId !== noteId);
+        }
+
+        if (this.relations) {
+            this.relations = this.relations.filter((relation) => relation.sourceNoteId !== noteId && relation.targetNoteId !== noteId);
+        }
+
+        this.onDataChange(true);
+    }
+
+    async removeRelation(connection: Connection) {
+        const relation = this.relations.find((rel) => rel.attributeId === connection.id);
+
+        if (relation) {
+            await server.remove(`notes/${relation.sourceNoteId}/relations/${relation.name}/to/${relation.targetNoteId}`);
+        }
+
+        this.onDataChange(true);
+    }
+
+    cleanupOtherNotes(noteIds: string[]) {
+        const filteredNotes = this.data.notes.filter((note) => noteIds.includes(note.noteId));
+        if (filteredNotes.length === this.data.notes.length) return;
+        this.data.notes = filteredNotes;
+        this.onDataChange(true);
+    }
+
+    setTransform(transform: PanZoomTransform) {
+        if (this.data.transform.scale - transform.scale > DELTA
+            || this.data.transform.x - transform.x > DELTA
+            || this.data.transform.y - transform.y > DELTA) {
+            this.data.transform = { ...transform };
+            this.onDataChange(false);
+        }
+    }
+
+    moveNote(noteId: string, x: number, y: number) {
+        const note = this.data?.notes.find((note) => note.noteId === noteId);
+
+        if (!note) {
+            logError(t("relation_map.note_not_found", { noteId }));
+            return;
+        }
+
+        note.x = x;
+        note.y = y;
+        this.onDataChange(false);
+    }
+
+    addMultipleNotes(entries: (MapDataNoteEntry & { title: string })[]) {
+        if (!entries.length) return;
+
+        for (const entry of entries) {
+            const exists = this.data.notes.some((n) => n.noteId === entry.noteId);
+
+            if (exists) {
+                toast.showError(t("relation_map.note_already_in_diagram", { title: entry.title }));
+                continue;
+            }
+
+            this.data.notes.push(entry);
+        }
+
+        this.onDataChange(true);
+    }
+
+    async connect(name: string, sourceNoteId: string, targetNoteId: string) {
+        name = utils.filterAttributeName(name);
+        const relationExists = this.relations?.some((rel) => rel.targetNoteId === targetNoteId && rel.sourceNoteId === sourceNoteId && rel.name === name);
+
+        if (relationExists) return false;
+        await server.put(`notes/${sourceNoteId}/relations/${name}/to/${targetNoteId}`);
+        this.onDataChange(true);
+        return true;
+    }
+
+}
diff --git a/apps/client/src/widgets/type_widgets/relation_map/context_menu.ts b/apps/client/src/widgets/type_widgets/relation_map/context_menu.ts
new file mode 100644
index 000000000..4dd4b2e68
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/relation_map/context_menu.ts
@@ -0,0 +1,85 @@
+import { RefObject } from "preact";
+import appContext from "../../../components/app_context";
+import FNote from "../../../entities/fnote";
+import contextMenu from "../../../menus/context_menu";
+import dialog from "../../../services/dialog";
+import { t } from "../../../services/i18n";
+import server from "../../../services/server";
+import RelationMapApi from "./api";
+import { Connection } from "jsplumb";
+
+export function buildNoteContextMenuHandler(note: FNote | null | undefined, mapApiRef: RefObject<RelationMapApi>) {
+    return (e: MouseEvent) => {
+        if (!note) return;
+        e.preventDefault();
+
+        contextMenu.show({
+            x: e.pageX,
+            y: e.pageY,
+            items: [
+                {
+                    title: t("relation_map.open_in_new_tab"),
+                    uiIcon: "bx bx-empty",
+                    handler: () => appContext.tabManager.openTabWithNoteWithHoisting(note.noteId)
+                },
+                {
+                    title: t("relation_map.remove_note"),
+                    uiIcon: "bx bx-trash",
+                    handler: async () => {
+                        if (!note) return;
+                        const result = await dialog.confirmDeleteNoteBoxWithNote(note.title);
+                        if (typeof result !== "object" || !result.confirmed) return;
+
+                        mapApiRef.current?.removeItem(note.noteId, result.isDeleteNoteChecked);
+                    }
+                },
+                {
+                    title: t("relation_map.edit_title"),
+                    uiIcon: "bx bx-pencil",
+                    handler: async () => {
+                        const title = await dialog.prompt({
+                            title: t("relation_map.rename_note"),
+                            message: t("relation_map.enter_new_title"),
+                            defaultValue: note?.title,
+                        });
+
+                        if (!title) {
+                            return;
+                        }
+
+                        await server.put(`notes/${note.noteId}/title`, { title });
+                    }
+                }
+            ],
+            selectMenuItemHandler() {}
+        })
+    };
+}
+
+export function buildRelationContextMenuHandler(connection: Connection, mapApiRef: RefObject<RelationMapApi>) {
+    return (_, event: MouseEvent) => {
+        if (connection.getType().includes("link")) {
+            // don't create context menu if it's a link since there's nothing to do with link from relation map
+            // (don't open browser menu either)
+            event.preventDefault();
+        } else {
+            event.preventDefault();
+            event.stopPropagation();
+
+            contextMenu.show({
+                x: event.pageX,
+                y: event.pageY,
+                items: [{ title: t("relation_map.remove_relation"), command: "remove", uiIcon: "bx bx-trash" }],
+                selectMenuItemHandler: async ({ command }) => {
+                    if (command === "remove") {
+                        if (!(await dialog.confirm(t("relation_map.confirm_remove_relation")))) {
+                            return;
+                        }
+
+                        mapApiRef.current?.removeRelation(connection);
+                    }
+                }
+            });
+        }
+    };
+}
diff --git a/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx b/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
new file mode 100644
index 000000000..ef531e911
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/relation_map/jsplumb.tsx
@@ -0,0 +1,94 @@
+import { jsPlumb, Defaults, jsPlumbInstance, DragOptions, OnConnectionBindInfo } from "jsplumb";
+import { ComponentChildren, createContext, RefObject } from "preact";
+import { HTMLProps } from "preact/compat";
+import { useContext, useEffect, useRef } from "preact/hooks";
+
+const JsPlumbInstance = createContext<RefObject<jsPlumbInstance> | undefined>(undefined);
+
+export function JsPlumb({ className, props, children, containerRef: externalContainerRef, apiRef, onInstanceCreated, onConnection }: {
+    className?: string;
+    props: Omit<Defaults, "container">;
+    children: ComponentChildren;
+    containerRef?: RefObject<HTMLElement>;
+    apiRef?: RefObject<jsPlumbInstance>;
+    onInstanceCreated?: (jsPlumbInstance: jsPlumbInstance) => void;
+    onConnection?: (info: OnConnectionBindInfo, originalEvent: Event) => void;
+}) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const jsPlumbRef = useRef<jsPlumbInstance>();
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+        if (externalContainerRef) {
+            externalContainerRef.current = containerRef.current;
+        }
+
+        const jsPlumbInstance = jsPlumb.getInstance({
+            Container: containerRef.current,
+            ...props
+        });
+        if (apiRef) {
+            apiRef.current = jsPlumbInstance;
+        }
+        jsPlumbRef.current = jsPlumbInstance;
+
+        onInstanceCreated?.(jsPlumbInstance);
+        return () => {
+            jsPlumbInstance.deleteEveryEndpoint();
+            jsPlumbInstance.cleanupListeners()
+        };
+    }, [ apiRef ]);
+
+    useEffect(() => {
+        const jsPlumbInstance = jsPlumbRef.current;
+        if (!jsPlumbInstance || !onConnection) return;
+
+        jsPlumbInstance.bind("connection", onConnection);
+        return () => jsPlumbInstance.unbind("connection", onConnection);
+    }, [ onConnection ]);
+
+    return (
+        <div ref={containerRef} className={className}>
+            <JsPlumbInstance.Provider value={apiRef}>
+                {children}
+            </JsPlumbInstance.Provider>
+        </div>
+    )
+}
+
+export function JsPlumbItem({ x, y, children, draggable, sourceConfig, targetConfig, ...restProps }: {
+    x: number;
+    y: number;
+    children: ComponentChildren;
+    draggable?: DragOptions;
+    sourceConfig?: object;
+    targetConfig?: object;
+} & Pick<HTMLProps<HTMLDivElement>, "id" | "className" | "onContextMenu">) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const apiRef = useContext(JsPlumbInstance);
+
+    useEffect(() => {
+        if (!draggable || !apiRef?.current || !containerRef.current) return;
+        apiRef.current.draggable(containerRef.current, draggable);
+    }, [ draggable ]);
+
+    useEffect(() => {
+        if (!sourceConfig || !apiRef?.current || !containerRef.current) return;
+        apiRef.current.makeSource(containerRef.current, sourceConfig);
+    }, [ sourceConfig ]);
+
+    useEffect(() => {
+        if (!targetConfig || !apiRef?.current || !containerRef.current) return;
+        apiRef.current.makeTarget(containerRef.current, targetConfig);
+    }, [ targetConfig ]);
+
+    return (
+        <div
+            ref={containerRef}
+            {...restProps}
+            style={{ left: x, top: y }}
+        >
+            {children}
+        </div>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets/relation_map/overlays.ts b/apps/client/src/widgets/type_widgets/relation_map/overlays.ts
new file mode 100644
index 000000000..ab4f39d9c
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/relation_map/overlays.ts
@@ -0,0 +1,99 @@
+import { jsPlumbInstance, OverlaySpec } from "jsplumb";
+
+export const uniDirectionalOverlays: OverlaySpec[] = [
+    [
+        "Arrow",
+        {
+            location: 1,
+            id: "arrow",
+            length: 14,
+            foldback: 0.8
+        }
+    ],
+    ["Label", { label: "", id: "label", cssClass: "connection-label" }]
+];
+
+const biDirectionalOverlays = [
+    [
+        "Arrow",
+        {
+            location: 1,
+            id: "arrow",
+            length: 14,
+            foldback: 0.8
+        }
+    ],
+    ["Label", { label: "", id: "label", cssClass: "connection-label" }],
+    [
+        "Arrow",
+        {
+            location: 0,
+            id: "arrow2",
+            length: 14,
+            direction: -1,
+            foldback: 0.8
+        }
+    ]
+];
+
+const inverseRelationsOverlays = [
+    [
+        "Arrow",
+        {
+            location: 1,
+            id: "arrow",
+            length: 14,
+            foldback: 0.8
+        }
+    ],
+    ["Label", { label: "", location: 0.2, id: "label-source", cssClass: "connection-label" }],
+    ["Label", { label: "", location: 0.8, id: "label-target", cssClass: "connection-label" }],
+    [
+        "Arrow",
+        {
+            location: 0,
+            id: "arrow2",
+            length: 14,
+            direction: -1,
+            foldback: 0.8
+        }
+    ]
+];
+
+const linkOverlays = [
+    [
+        "Arrow",
+        {
+            location: 1,
+            id: "arrow",
+            length: 14,
+            foldback: 0.8
+        }
+    ]
+];
+
+export default function setupOverlays(jsPlumbInstance: jsPlumbInstance) {
+    jsPlumbInstance.registerConnectionType("uniDirectional", {
+        anchor: "Continuous",
+        connector: "StateMachine",
+        overlays: uniDirectionalOverlays
+    });
+
+    jsPlumbInstance.registerConnectionType("biDirectional", {
+        anchor: "Continuous",
+        connector: "StateMachine",
+        overlays: biDirectionalOverlays
+    });
+
+    jsPlumbInstance.registerConnectionType("inverse", {
+        anchor: "Continuous",
+        connector: "StateMachine",
+        overlays: inverseRelationsOverlays
+    });
+
+    jsPlumbInstance.registerConnectionType("link", {
+        anchor: "Continuous",
+        connector: "StateMachine",
+        overlays: linkOverlays
+    });
+}
diff --git a/apps/client/src/widgets/type_widgets/relation_map/utils.ts b/apps/client/src/widgets/type_widgets/relation_map/utils.ts
new file mode 100644
index 000000000..e52a40fbf
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/relation_map/utils.ts
@@ -0,0 +1,34 @@
+import { t } from "../../../services/i18n";
+
+export function noteIdToId(noteId: string) {
+    return `rel-map-note-${noteId}`;
+}
+
+export function idToNoteId(id: string) {
+    return id.substr(13);
+}
+
+export function getZoom(container: HTMLDivElement) {
+    const transform = window.getComputedStyle(container).transform;
+    if (transform === "none") {
+        return 1;
+    }
+
+    const matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*-?\d*\.?\d+,\s*-?\d*\.?\d+,\s*-?\d*\.?\d+\)/;
+    const matches = transform.match(matrixRegex);
+
+    if (!matches) {
+        throw new Error(t("relation_map.cannot_match_transform", { transform }));
+    }
+
+    return parseFloat(matches[1]);
+}
+
+export function getMousePosition(evt: MouseEvent, container: HTMLDivElement, zoom: number) {
+    const rect = container.getBoundingClientRect();
+
+    return {
+        x: ((evt.clientX ?? 0) - rect.left) / zoom,
+        y: ((evt.clientY ?? 0) - rect.top) / zoom
+    };
+}
diff --git a/apps/client/src/widgets/type_widgets/render.ts b/apps/client/src/widgets/type_widgets/render.ts
deleted file mode 100644
index 7d49234bf..000000000
--- a/apps/client/src/widgets/type_widgets/render.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import renderService from "../../services/render.js";
-import TypeWidget from "./type_widget.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-
-const TPL = /*html*/`
-<div class="note-detail-render note-detail-printable">
-    <style>
-        .note-detail-render {
-            position: relative;
-        }
-    </style>
-
-    <div class="note-detail-render-help alert alert-warning" style="margin: 50px; padding: 20px;">
-        <p><strong>${t("render.note_detail_render_help_1")}</strong></p>
-
-        <p>${t("render.note_detail_render_help_2")}</p>
-    </div>
-
-    <div class="note-detail-render-content"></div>
-</div>`;
-
-export default class RenderTypeWidget extends TypeWidget {
-
-    private $noteDetailRenderHelp!: JQuery<HTMLElement>;
-    private $noteDetailRenderContent!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "render";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$noteDetailRenderHelp = this.$widget.find(".note-detail-render-help");
-        this.$noteDetailRenderContent = this.$widget.find(".note-detail-render-content");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        this.$widget.show();
-        this.$noteDetailRenderHelp.hide();
-
-        const renderNotesFound = await renderService.render(note, this.$noteDetailRenderContent);
-
-        if (!renderNotesFound) {
-            this.$noteDetailRenderHelp.show();
-        }
-    }
-
-    cleanup() {
-        this.$noteDetailRenderContent.empty();
-    }
-
-    renderActiveNoteEvent() {
-        if (this.noteContext?.isActive()) {
-            this.refresh();
-        }
-    }
-
-    async executeWithContentElementEvent({ resolve, ntxId }: EventData<"executeWithContentElement">) {
-        if (!this.isNoteContext(ntxId)) {
-            return;
-        }
-
-        await this.initialized;
-
-        resolve(this.$noteDetailRenderContent);
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx b/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
new file mode 100644
index 000000000..eaf85a08f
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
@@ -0,0 +1,226 @@
+import { HTMLProps, RefObject, useEffect, useImperativeHandle, useRef, useState } from "preact/compat";
+import { PopupEditor, ClassicEditor, EditorWatchdog, type WatchdogConfig, CKTextEditor, TemplateDefinition } from "@triliumnext/ckeditor5";
+import { buildConfig, BuildEditorOptions } from "./config";
+import { useLegacyImperativeHandlers, useSyncedRef } from "../../react/hooks";
+import link from "../../../services/link";
+import froca from "../../../services/froca";
+
+export type BoxSize = "small" | "medium" | "full";
+
+export interface CKEditorApi {
+    /** returns true if user selected some text, false if there's no selection */
+    hasSelection(): boolean;
+    getSelectedText(): string;
+    addLink(notePath: string, linkTitle: string | null, externalLink?: boolean): void;
+    addLinkToEditor(linkHref: string, linkTitle: string): void;
+    addHtmlToEditor(html: string): void;
+    addIncludeNote(noteId: string, boxSize?: BoxSize): void;
+    addImage(noteId: string): Promise<void>;
+}
+
+interface CKEditorWithWatchdogProps extends Pick<HTMLProps<HTMLDivElement>, "className" | "tabIndex"> {
+    content: string | undefined;
+    contentLanguage: string | null | undefined;
+    isClassicEditor?: boolean;
+    watchdogRef: RefObject<EditorWatchdog>;
+    watchdogConfig?: WatchdogConfig;
+    onNotificationWarning?: (evt: any, data: any) => void;
+    onWatchdogStateChange?: (watchdog: EditorWatchdog<any>) => void;
+    onChange: () => void;
+    /** Called upon whenever a new CKEditor instance is initialized, whether it's the first initialization, after a crash or after a config change that requires it (e.g. content language). */
+    onEditorInitialized?: (editor: CKTextEditor) => void;
+    editorApi: RefObject<CKEditorApi>;
+    templates: TemplateDefinition[];
+    containerRef?: RefObject<HTMLDivElement>;
+}
+
+export default function CKEditorWithWatchdog({ containerRef: externalContainerRef, content, contentLanguage, className, tabIndex, isClassicEditor, watchdogRef: externalWatchdogRef, watchdogConfig, onNotificationWarning, onWatchdogStateChange, onChange, onEditorInitialized, editorApi, templates }: CKEditorWithWatchdogProps) {
+    const containerRef = useSyncedRef<HTMLDivElement>(externalContainerRef, null);
+    const watchdogRef = useRef<EditorWatchdog>(null);
+    const [ editor, setEditor ] = useState<CKTextEditor>();
+
+    useImperativeHandle(editorApi, () => ({
+        hasSelection() {
+            const model = watchdogRef.current?.editor?.model;
+            const selection = model?.document.selection;
+
+            return !selection?.isCollapsed;
+        },
+        getSelectedText() {
+            const range = watchdogRef.current?.editor?.model.document.selection.getFirstRange();
+            let text = "";
+
+            if (!range) {
+                return text;
+            }
+
+            for (const item of range.getItems()) {
+                if ("data" in item && item.data) {
+                    text += item.data;
+                }
+            }
+
+            return text;
+        },
+        addLink(notePath, linkTitle, externalLink) {
+            const editor = watchdogRef.current?.editor;
+            if (!editor) return;
+
+            if (linkTitle) {
+                if (this.hasSelection()) {
+                    editor.execute("link", externalLink ? `${notePath}` : `#${notePath}`);
+                } else {
+                    this.addLinkToEditor(externalLink ? `${notePath}` : `#${notePath}`, linkTitle);
+                }
+            } else {
+                editor.execute("referenceLink", { href: "#" + notePath });
+            }
+
+            editor.editing.view.focus();
+        },
+        addLinkToEditor(linkHref, linkTitle) {
+            watchdogRef.current?.editor?.model.change((writer) => {
+                const insertPosition = watchdogRef.current?.editor?.model.document.selection.getFirstPosition();
+                if (insertPosition) {
+                    writer.insertText(linkTitle, { linkHref: linkHref }, insertPosition);
+                }
+            });
+        },
+        addIncludeNote(noteId, boxSize) {
+            const editor = watchdogRef.current?.editor;
+            if (!editor) return;
+
+            editor?.model.change((writer) => {
+                // Insert <includeNote>*</includeNote> at the current selection position
+                // in a way that will result in creating a valid model structure
+                editor?.model.insertContent(
+                    writer.createElement("includeNote", {
+                        noteId: noteId,
+                        boxSize: boxSize
+                    })
+                );
+            });
+        },
+        addHtmlToEditor(html: string) {
+            const editor = watchdogRef.current?.editor;
+            if (!editor) return;
+
+            editor.model.change((writer) => {
+                const viewFragment = editor.data.processor.toView(html);
+                const modelFragment = editor.data.toModel(viewFragment);
+                const insertPosition = editor.model.document.selection.getLastPosition();
+
+                if (insertPosition) {
+                    const range = editor.model.insertContent(modelFragment, insertPosition);
+
+                    if (range) {
+                        writer.setSelection(range.end);
+                    }
+                }
+            });
+
+            editor.editing.view.focus();
+        },
+        async addImage(noteId) {
+            const editor = watchdogRef.current?.editor;
+            if (!editor) return;
+
+            const note = await froca.getNote(noteId);
+            if (!note) return;
+
+            editor.model.change(() => {
+                const encodedTitle = encodeURIComponent(note.title);
+                const src = `api/images/${note.noteId}/${encodedTitle}`;
+
+                editor?.execute("insertImage", { source: src });
+            });
+        },
+    }));
+
+    useLegacyImperativeHandlers({
+        async loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string | null = null) {
+            await link.loadReferenceLinkTitle($el, href);
+        }
+    });
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        const watchdog = buildWatchdog(!!isClassicEditor, watchdogConfig);
+        watchdogRef.current = watchdog;
+        externalWatchdogRef.current = watchdog;
+        watchdog.setCreator(async () => {
+            const editor = await buildEditor(container, !!isClassicEditor, {
+                forceGplLicense: false,
+                isClassicEditor: !!isClassicEditor,
+                contentLanguage: contentLanguage ?? null,
+                templates
+            });
+
+            setEditor(editor);
+
+            // Inspector integration.
+            if (import.meta.env.VITE_CKEDITOR_ENABLE_INSPECTOR === "true") {
+                const CKEditorInspector = (await import("@ckeditor/ckeditor5-inspector")).default;
+                CKEditorInspector.attach(editor);
+            }
+
+            onEditorInitialized?.(editor);
+
+            return editor;
+        });
+
+        if (onWatchdogStateChange) {
+            watchdog.on("stateChange", () => onWatchdogStateChange(watchdog));
+        }
+
+        watchdog.create(container);
+
+        return () => watchdog.destroy();
+    }, [ contentLanguage, templates ]);
+
+    // React to content changes.
+    useEffect(() => editor?.setData(content ?? ""), [ editor, content ]);
+
+    // React to notification warning callback.
+    useEffect(() => {
+        if (!onNotificationWarning || !editor) return;
+        const notificationPlugin = editor.plugins.get("Notification");
+        notificationPlugin.on("show:warning", onNotificationWarning);
+        return () => notificationPlugin.off("show:warning", onNotificationWarning);
+    }, [ editor, onNotificationWarning ]);
+
+    // React to on change listener.
+    useEffect(() => {
+        if (!editor) return;
+        editor.model.document.on("change:data", onChange);
+        return () => editor.model.document.off("change:data", onChange);
+    }, [ editor, onChange ]);
+
+    return (
+        <div ref={containerRef} className={className} tabIndex={tabIndex} />
+    );
+}
+
+function buildWatchdog(isClassicEditor: boolean, watchdogConfig?: WatchdogConfig): EditorWatchdog<CKTextEditor> {
+    if (isClassicEditor) {
+        return new EditorWatchdog(ClassicEditor, watchdogConfig);
+    } else {
+        return new EditorWatchdog(PopupEditor, watchdogConfig);
+    }
+}
+
+async function buildEditor(element: HTMLElement, isClassicEditor: boolean, opts: BuildEditorOptions) {
+    const editorClass = isClassicEditor ? ClassicEditor : PopupEditor;
+    let config = await buildConfig(opts);
+    let editor = await editorClass.create(element, config);
+
+    if (editor.isReadOnly) {
+        editor.destroy();
+
+        opts.forceGplLicense = true;
+        config = await buildConfig(opts);
+        editor = await editorClass.create(element, config);
+    }
+    return editor;
+}
diff --git a/apps/client/src/widgets/type_widgets/text/EditableText.css b/apps/client/src/widgets/type_widgets/text/EditableText.css
new file mode 100644
index 000000000..6346b4d95
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/text/EditableText.css
@@ -0,0 +1,53 @@
+.note-detail-editable-text {
+    font-family: var(--detail-font-family);
+    padding-inline-start: 14px;
+    padding-top: 10px;
+    height: 100%;
+}
+
+/* Workaround for #1327 */
+body.desktop.electron .note-detail-editable-text {
+    letter-spacing: -0.01px;
+}
+
+body.mobile .note-detail-editable-text {
+    padding-inline-start: 4px;
+}
+
+.note-detail-editable-text a:hover {
+    cursor: pointer;
+}
+
+.note-detail-editable-text a[href^="http://"], .note-detail-editable-text a[href^="https://"] {
+    cursor: text !important;
+}
+
+.note-detail-editable-text *:not(figure, .include-note, hr):first-child {
+    margin-top: 0 !important;
+}
+
+.note-detail-editable-text h2 { font-size: 1.6em; }
+.note-detail-editable-text h3 { font-size: 1.4em; }
+.note-detail-editable-text h4 { font-size: 1.2em; }
+.note-detail-editable-text h5 { font-size: 1.1em; }
+.note-detail-editable-text h6 { font-size: 1.0em; }
+
+body.heading-style-markdown .note-detail-editable-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
+body.heading-style-markdown .note-detail-editable-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
+body.heading-style-markdown .note-detail-editable-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
+body.heading-style-markdown .note-detail-editable-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
+body.heading-style-markdown .note-detail-editable-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }
+
+body.heading-style-underline .note-detail-editable-text h2 { border-bottom: 1px solid var(--main-border-color); }
+body.heading-style-underline .note-detail-editable-text h3 { border-bottom: 1px solid var(--main-border-color); }
+body.heading-style-underline .note-detail-editable-text h4:not(.include-note-title) { border-bottom: 1px solid var(--main-border-color); }
+body.heading-style-underline .note-detail-editable-text h5 { border-bottom: 1px solid var(--main-border-color); }
+body.heading-style-underline .note-detail-editable-text h6 { border-bottom: 1px solid var(--main-border-color); }
+
+.note-detail-editable-text-editor {
+    padding-top: 10px;
+    border: 0 !important;
+    box-shadow: none !important;
+    min-height: 50px;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/text/EditableText.tsx b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
new file mode 100644
index 000000000..f39ea3992
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
@@ -0,0 +1,419 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import dialog from "../../../services/dialog";
+import toast from "../../../services/toast";
+import utils, { hasTouchBar, isMobile } from "../../../services/utils";
+import { useEditorSpacedUpdate, useKeyboardShortcuts, useLegacyImperativeHandlers, useNoteLabel, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
+import { TypeWidgetProps } from "../type_widget";
+import CKEditorWithWatchdog, { CKEditorApi } from "./CKEditorWithWatchdog";
+import "./EditableText.css";
+import { CKTextEditor, ClassicEditor, EditorWatchdog, TemplateDefinition } from "@triliumnext/ckeditor5";
+import Component from "../../../components/component";
+import options from "../../../services/options";
+import { loadIncludedNote, refreshIncludedNote, setupImageOpening } from "./utils";
+import getTemplates, { updateTemplateCache } from "./snippets.js";
+import appContext from "../../../components/app_context";
+import link, { parseNavigationStateFromUrl } from "../../../services/link";
+import note_create from "../../../services/note_create";
+import TouchBar, { TouchBarButton, TouchBarGroup, TouchBarSegmentedControl } from "../../react/TouchBar";
+import { RefObject } from "preact";
+import { buildSelectedBackgroundColor } from "../../../components/touch_bar";
+import { deferred } from "@triliumnext/commons";
+
+/**
+ * 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 function EditableText({ note, parentComponent, ntxId, noteContext }: TypeWidgetProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [ content, setContent ] = useState<string>();
+    const watchdogRef = useRef<EditorWatchdog>(null);
+    const editorApiRef = useRef<CKEditorApi>(null);
+    const refreshTouchBarRef = useRef<() => void>(null);
+    const [ language ] = useNoteLabel(note, "language");
+    const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType");
+    const [ codeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
+    const isClassicEditor = isMobile() || textNoteEditorType === "ckeditor-classic";
+    const initialized = useRef(deferred<void>());
+    const spacedUpdate = useEditorSpacedUpdate({
+        note,
+        noteContext,
+        getData() {
+            const editor = watchdogRef.current?.editor;
+            if (!editor) {
+                // There is nothing to save, most likely a result of the editor crashing and reinitializing.
+                return;
+            }
+
+            const content = editor.getData() ?? "";
+
+            // if content is only tags/whitespace (typically <p>&nbsp;</p>), then just make it empty,
+            // this is important when setting a new note to code
+            return {
+                content: utils.isHtmlEmpty(content) ? "" : content
+            };
+        },
+        onContentChange(newContent) {
+            setContent(newContent);
+        }
+    });
+    const templates = useTemplates();
+
+    useTriliumEvent("scrollToEnd", () => {
+        const editor = watchdogRef.current?.editor;
+        if (!editor) return;
+
+        editor.model.change((writer) => {
+            const rootItem = editor.model.document.getRoot();
+            if (rootItem) {
+                writer.setSelection(writer.createPositionAt(rootItem, "end"));
+            }
+        });
+        editor.editing.view.focus();
+    });
+
+    useTriliumEvent("focusOnDetail", async ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        const editor = await waitForEditor();
+        editor?.editing.view.focus();
+    });
+
+    useLegacyImperativeHandlers({
+        addLinkToTextCommand() {
+            if (!editorApiRef.current) return;
+            parentComponent?.triggerCommand("showAddLinkDialog", {
+                text: editorApiRef.current.getSelectedText(),
+                hasSelection: editorApiRef.current.hasSelection(),
+                async addLink(notePath, linkTitle, externalLink) {
+                    await waitForEditor();
+                    return editorApiRef.current?.addLink(notePath, linkTitle, externalLink);
+                }
+            });
+        },
+        pasteMarkdownIntoTextCommand() {
+            if (!editorApiRef.current) return;
+            parentComponent?.triggerCommand("showPasteMarkdownDialog", {
+                editorApi: editorApiRef.current,
+            });
+        },
+        // Include note functionality note
+        addIncludeNoteToTextCommand() {
+            if (!editorApiRef.current) return;
+            parentComponent?.triggerCommand("showIncludeNoteDialog", {
+                editorApi: editorApiRef.current,
+            });
+        },
+        loadIncludedNote,
+        // Creating notes in @-completion
+        async createNoteForReferenceLink(title: string) {
+            const notePath = noteContext?.notePath;
+            if (!notePath) return;
+
+            const resp = await note_create.createNoteWithTypePrompt(notePath, {
+                activate: false,
+                title: title
+            });
+
+            if (!resp || !resp.note) return;
+            return resp.note.getBestNotePathString();
+        },
+        // Keyboard shortcut
+        async followLinkUnderCursorCommand() {
+            const editor = await waitForEditor();
+            const selection = editor?.model.document.selection;
+            const selectedElement = selection?.getSelectedElement();
+
+            if (selectedElement?.name === "reference") {
+                const { notePath } = parseNavigationStateFromUrl(selectedElement.getAttribute("href") as string | undefined);
+
+                if (notePath) {
+                    await appContext.tabManager.getActiveContext()?.setNote(notePath);
+                    return;
+                }
+            }
+
+            if (!selection?.hasAttribute("linkHref")) {
+                return;
+            }
+
+            const selectedLinkUrl = selection.getAttribute("linkHref") as string;
+            const notePath = link.getNotePathFromUrl(selectedLinkUrl);
+
+            if (notePath) {
+                await appContext.tabManager.getActiveContext()?.setNote(notePath);
+            } else {
+                window.open(selectedLinkUrl, "_blank");
+            }
+        },
+        async cutIntoNoteCommand() {
+            const note = appContext.tabManager.getActiveContextNote();
+            if (!note) return;
+
+            // without await as this otherwise causes deadlock through component mutex
+            const parentNotePath = appContext.tabManager.getActiveContextNotePath();
+            if (noteContext && parentNotePath) {
+                note_create.createNote(parentNotePath, {
+                    isProtected: note.isProtected,
+                    saveSelection: true,
+                    textEditor: await noteContext?.getTextEditor()
+                });
+            }
+        },
+        async saveNoteDetailNowCommand() {
+            // used by cutToNote in CKEditor build
+            spacedUpdate.updateNowIfNecessary();
+        }
+    });
+
+    useTriliumEvent("refreshIncludedNote", ({ noteId }) => {
+        if (!containerRef.current) return;
+        refreshIncludedNote(containerRef.current, noteId);
+    });
+
+    useTriliumEvent("executeWithTextEditor", async ({ callback, resolve, ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        const editor = await waitForEditor() as CKTextEditor | undefined;
+        if (!editor) return;
+        if (callback) callback(editor);
+        resolve(editor);
+    });
+
+    async function waitForEditor() {
+        await initialized.current;
+        const editor = watchdogRef.current?.editor;
+        if (!editor) return;
+        return editor;
+    }
+
+    async function addTextToEditor(text: string) {
+        const editor = await waitForEditor();
+        editor?.model.change((writer) => {
+            const insertPosition = editor.model.document.selection.getLastPosition();
+            if (insertPosition) {
+                writer.insertText(text, insertPosition);
+            }
+        });
+    }
+
+    useKeyboardShortcuts("text-detail", containerRef, parentComponent);
+    useTriliumEvent("insertDateTimeToText", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        const date = new Date();
+        const customDateTimeFormat = options.get("customDateTimeFormat");
+        const dateString = utils.formatDateTime(date, customDateTimeFormat);
+
+        console.log("Insert text ", ntxId, eventNtxId, dateString);
+        addTextToEditor(dateString);
+    });
+    useTriliumEvent("addTextToActiveEditor", ({ text }) => {
+        if (!noteContext?.isActive()) return;
+        addTextToEditor(text);
+    });
+
+    return (
+        <>
+            {note && !!templates && <CKEditorWithWatchdog
+                containerRef={containerRef}
+                className={`note-detail-editable-text-editor use-tn-links ${codeBlockWordWrap ? "word-wrap" : ""}`}
+                tabIndex={300}
+                content={content}
+                contentLanguage={language}
+                isClassicEditor={isClassicEditor}
+                editorApi={editorApiRef}
+                watchdogRef={watchdogRef}
+                watchdogConfig={{
+                    // 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 restarting the editor. This prevents an infinite restart loop.
+                    minimumNonErrorTimePeriod: 5000,
+                    // A threshold specifying the number of errors (defaults to 3). After this limit is reached and the time between last errors is shorter than minimumNonErrorTimePeriod, the watchdog changes its state to crashedPermanently, and it stops restarting the editor. This prevents an infinite restart loop.
+                    crashNumberLimit: 10,
+                    // A minimum number of milliseconds between saving the editor data internally (defaults to 5000). Note that for large documents, this might impact the editor performance.
+                    saveInterval: 5000
+                }}
+                templates={templates}
+                onNotificationWarning={onNotificationWarning}
+                onWatchdogStateChange={onWatchdogStateChange}
+                onChange={() => spacedUpdate.scheduleUpdate()}
+                onEditorInitialized={(editor) => {
+                    console.log("Editor has been initialized!", parentComponent, editor);
+
+                    if (isClassicEditor) {
+                        setupClassicEditor(editor, parentComponent);
+                    }
+
+                    if (hasTouchBar) {
+                        const handler = () => refreshTouchBarRef.current?.();
+                        for (const event of [ "bold", "italic", "underline", "paragraph", "heading" ]) {
+                            editor.commands.get(event)?.on("change", handler);
+                        }
+                    }
+
+                    if (containerRef.current) {
+                        setupImageOpening(containerRef.current, false);
+                    }
+
+                    initialized.current.resolve();
+                }}
+            />}
+
+            <EditableTextTouchBar watchdogRef={watchdogRef} refreshTouchBarRef={refreshTouchBarRef} />
+        </>
+    );
+}
+
+function useTemplates() {
+    const [ templates, setTemplates ] = useState<TemplateDefinition[]>();
+
+    useEffect(() => {
+        getTemplates().then(setTemplates);
+    }, []);
+
+    useTriliumEvent("entitiesReloaded", async ({ loadResults }) => {
+        await updateTemplateCache(loadResults, setTemplates);
+    });
+
+    return templates;
+}
+
+function onWatchdogStateChange(watchdog: EditorWatchdog) {
+    const currentState = watchdog.state;
+    logInfo(`CKEditor state changed to ${currentState}`);
+
+    if (!["crashed", "crashedPermanently"].includes(currentState)) {
+        return;
+    }
+
+    logError(`CKEditor crash logs: ${JSON.stringify(watchdog.crashes, null, 4)}`);
+
+    if (currentState === "crashedPermanently") {
+        dialog.info(`Editing component keeps crashing. Please try restarting Trilium. If problem persists, consider creating a bug report.`);
+        watchdog.editor?.enableReadOnlyMode("crashed-editor");
+    }
+}
+
+function onNotificationWarning(data, evt) {
+    const title = data.title;
+    const message = data.message.message;
+
+    if (title && message) {
+        toast.showErrorTitleAndMessage(data.title, data.message.message);
+    } else if (title) {
+        toast.showError(title || message);
+    }
+
+    evt.stop();
+}
+
+function setupClassicEditor(editor: CKTextEditor, parentComponent: Component | undefined) {
+    if (!parentComponent) return;
+    const $classicToolbarWidget = findClassicToolbar(parentComponent);
+
+    $classicToolbarWidget.empty();
+    if ($classicToolbarWidget.length) {
+        const toolbarView = (editor as ClassicEditor).ui.view.toolbar;
+        if (toolbarView.element) {
+            $classicToolbarWidget[0].appendChild(toolbarView.element);
+        }
+    }
+
+    if (utils.isMobile()) {
+        $classicToolbarWidget.addClass("visible");
+
+        // Reposition all dropdowns to point upwards instead of downwards.
+        // See https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for more info.
+        const toolbarView = (editor as ClassicEditor).ui.view.toolbar;
+        for (const item of toolbarView.items) {
+            if (!("panelView" in item)) continue;
+
+            item.on("change:isOpen", () => {
+                if (!("isOpen" in item) || !item.isOpen) return;
+
+                // @ts-ignore
+                item.panelView.position = item.panelView.position.replace("s", "n");
+            });
+        }
+    }
+}
+
+function findClassicToolbar(parentComponent: Component): JQuery<HTMLElement> {
+    const $widget = $(parentComponent.$widget);
+
+    if (!utils.isMobile()) {
+        const $parentSplit = $widget.parents(".note-split.type-text");
+
+        if ($parentSplit.length) {
+            // The editor is in a normal tab.
+            return $parentSplit.find("> .ribbon-container .classic-toolbar-widget");
+        } else {
+            // The editor is in a popup.
+            return $widget.closest(".modal-body").find(".classic-toolbar-widget");
+        }
+    } else {
+        return $("body").find(".classic-toolbar-widget");
+    }
+}
+
+function EditableTextTouchBar({ watchdogRef, refreshTouchBarRef }: { watchdogRef: RefObject<EditorWatchdog | null>, refreshTouchBarRef: RefObject<() => void> }) {
+    const [ headingSelectedIndex, setHeadingSelectedIndex ] = useState<number>();
+
+    function refresh() {
+        let headingSelectedIndex: number | undefined = undefined;
+        const editor = watchdogRef.current?.editor;
+        const headingCommand = editor?.commands.get("heading");
+        const paragraphCommand = editor?.commands.get("paragraph");
+        if (paragraphCommand?.value) {
+            headingSelectedIndex = 0;
+        } else if (headingCommand?.value === "heading2") {
+            headingSelectedIndex = 1;
+        } else if (headingCommand?.value === "heading3") {
+            headingSelectedIndex = 2;
+        }
+        setHeadingSelectedIndex(headingSelectedIndex);
+    }
+
+    useEffect(refresh, []);
+    refreshTouchBarRef.current = refresh;
+
+    return (
+        <TouchBar>
+            <TouchBarSegmentedControl
+                segments={[
+                    { label: "P" },
+                    { label: "H2" },
+                    { label: "H3" }
+                ]}
+                onChange={(selectedIndex) => {
+                    const editor = watchdogRef.current?.editor;
+                    switch (selectedIndex) {
+                        case 0:
+                            editor?.execute("paragraph")
+                            break;
+                        case 1:
+                            editor?.execute("heading", { value: "heading2" });
+                            break;
+                        case 2:
+                            editor?.execute("heading", { value: "heading3" });
+                            break;
+                    }
+                }}
+                selectedIndex={headingSelectedIndex}
+                mode="buttons"
+            />
+
+            <TouchBarGroup>
+                <TouchBarCommandButton watchdogRef={watchdogRef} command="bold" icon="NSTouchBarTextBoldTemplate" />
+                <TouchBarCommandButton watchdogRef={watchdogRef} command="italic" icon="NSTouchBarTextItalicTemplate" />
+                <TouchBarCommandButton watchdogRef={watchdogRef} command="underline" icon="NSTouchBarTextUnderlineTemplate" />
+            </TouchBarGroup>
+        </TouchBar>
+    )
+}
+
+function TouchBarCommandButton({ watchdogRef, icon, command }: { watchdogRef: RefObject<EditorWatchdog | null>, icon: string, command: string }) {
+    const editor = watchdogRef.current?.editor;
+    return (<TouchBarButton
+        icon={icon}
+        click={() => editor?.execute(command)}
+        backgroundColor={buildSelectedBackgroundColor(editor?.commands.get(command)?.value as boolean)}
+    />);
+}
diff --git a/apps/client/src/widgets/type_widgets/text/ReadOnlyText.css b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.css
new file mode 100644
index 000000000..ddda64ad9
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.css
@@ -0,0 +1,58 @@
+/* h1 should not be used at all since semantically that's a note title */
+.note-detail-readonly-text h1 { font-size: 1.8em; }
+.note-detail-readonly-text h2 { font-size: 1.6em; }
+.note-detail-readonly-text h3 { font-size: 1.4em; }
+.note-detail-readonly-text h4 { font-size: 1.2em; }
+.note-detail-readonly-text h5 { font-size: 1.1em; }
+.note-detail-readonly-text h6 { font-size: 1.0em; }
+
+body.heading-style-markdown .note-detail-readonly-text h1::before { content: "#\\2004"; color: var(--muted-text-color); }
+body.heading-style-markdown .note-detail-readonly-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
+body.heading-style-markdown .note-detail-readonly-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
+body.heading-style-markdown .note-detail-readonly-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
+body.heading-style-markdown .note-detail-readonly-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
+body.heading-style-markdown .note-detail-readonly-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }
+
+body.heading-style-underline .note-detail-readonly-text h1 { border-bottom: 1px solid var(--main-border-color); }
+body.heading-style-underline .note-detail-readonly-text h2 { border-bottom: 1px solid var(--main-border-color); }
+body.heading-style-underline .note-detail-readonly-text h3 { border-bottom: 1px solid var(--main-border-color); }
+body.heading-style-underline .note-detail-readonly-text h4:not(.include-note-title) { border-bottom: 1px solid var(--main-border-color); }
+body.heading-style-underline .note-detail-readonly-text h5 { border-bottom: 1px solid var(--main-border-color); }
+body.heading-style-underline .note-detail-readonly-text h6 { border-bottom: 1px solid var(--main-border-color); }
+
+.note-detail-readonly-text {
+    padding-inline-start: 24px;
+    padding-top: 10px;
+    font-family: var(--detail-font-family);
+    min-height: 50px;
+    position: relative;
+}
+
+body.mobile .note-detail-readonly-text {
+    padding-inline-start: 10px;
+}
+
+.note-detail-readonly-text p:first-child, .note-detail-readonly-text::before {
+    margin-top: 0;
+}
+
+.note-detail-readonly-text img {
+    max-width: 100%;
+    cursor: pointer;
+}
+
+.edit-text-note-button {
+    position: absolute;
+    top: 5px;
+    inset-inline-end: 10px;
+    font-size: 150%;
+    padding: 5px;
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-radius: var(--button-border-radius);
+    color: var(--button-text-color);
+}
+
+.edit-text-note-button:hover {
+    border-color: var(--button-border-color);
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
new file mode 100644
index 000000000..5bd43833c
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
@@ -0,0 +1,131 @@
+import { useEffect, useMemo, useRef } from "preact/hooks";
+import { TypeWidgetProps } from "../type_widget";
+import "./ReadOnlyText.css";
+import { useNoteBlob, useNoteLabel, useTriliumEvent, useTriliumOptionBool } from "../../react/hooks";
+import RawHtml from "../../react/RawHtml";
+
+// 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)
+import "@triliumnext/ckeditor5";
+import FNote from "../../../entities/fnote";
+import { getLocaleById } from "../../../services/i18n";
+import { getMermaidConfig } from "../../../services/mermaid";
+import { loadIncludedNote, refreshIncludedNote, setupImageOpening } from "./utils";
+import { renderMathInElement } from "../../../services/math";
+import link from "../../../services/link";
+import { formatCodeBlocks } from "../../../services/syntax_highlight";
+import TouchBar, { TouchBarButton, TouchBarSpacer } from "../../react/TouchBar";
+import appContext from "../../../components/app_context";
+
+export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetProps) {
+    const blob = useNoteBlob(note);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [ codeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
+    const { isRtl } = useNoteLanguage(note);
+
+    // Apply necessary transforms.
+    useEffect(() => {
+        const container = contentRef.current;
+        if (!container) return;
+
+        applyInlineMermaid(container);
+        applyIncludedNotes(container);
+        applyMath(container);
+        applyReferenceLinks(container);
+        formatCodeBlocks($(container));
+        setupImageOpening(container, true);
+    }, [ blob ]);
+
+    // React to included note changes.
+    useTriliumEvent("refreshIncludedNote", ({ noteId }) => {
+        console.log("Refresh ", noteId);
+        if (!contentRef.current) return;
+        refreshIncludedNote(contentRef.current, noteId);
+    });
+
+    // Search integration.
+    useTriliumEvent("executeWithContentElement", ({ resolve, ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId || !contentRef.current) return;
+        resolve($(contentRef.current));
+    });
+
+    return (
+        <div
+            className={`note-detail-readonly-text note-detail-printable ${codeBlockWordWrap ? "word-wrap" : ""}`}
+            tabindex={100}
+            dir={isRtl ? "rtl" : "ltr"}
+        >
+            <RawHtml
+                containerRef={contentRef}
+                className="note-detail-readonly-text-content ck-content use-tn-links"
+                html={blob?.content}
+            />
+
+            <TouchBar>
+                <TouchBarSpacer size="flexible" />
+                <TouchBarButton
+                    icon="NSLockUnlockedTemplate"
+                    click={() => {
+                        if (noteContext?.viewScope) {
+                            noteContext.viewScope.readOnlyTemporarilyDisabled = true;
+                            appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext });
+                        }
+                    }}
+                />
+            </TouchBar>
+        </div>
+    )
+}
+
+function useNoteLanguage(note: FNote) {
+    const [ language ] = useNoteLabel(note, "language");
+    const isRtl = useMemo(() => {
+        const correspondingLocale = getLocaleById(language);
+        return correspondingLocale?.rtl;
+    }, [ language ]);
+    return { isRtl };
+}
+
+async function applyInlineMermaid(container: HTMLDivElement) {
+    const mermaidBlocks = container.querySelectorAll('pre:has(code[class="language-mermaid"])');
+    if (!mermaidBlocks.length) return;
+    const nodes: HTMLElement[] = [];
+
+    // Rewrite the code block from <pre><code> to <div> in order not to apply a codeblock style to it.
+    for (const mermaidBlock of mermaidBlocks) {
+        const div = document.createElement("div");
+        div.classList.add("mermaid-diagram");
+        div.innerHTML = mermaidBlock.querySelector("code")?.innerHTML ?? "";
+        mermaidBlock.replaceWith(div);
+        nodes.push(div);
+    }
+
+    // Initialize mermaid
+    const mermaid = (await import("mermaid")).default;
+    mermaid.initialize(getMermaidConfig());
+    mermaid.run({ nodes });
+}
+
+function applyIncludedNotes(container: HTMLDivElement) {
+    const includedNotes = container.querySelectorAll<HTMLElement>("section.include-note");
+    for (const includedNote of includedNotes) {
+        const noteId = includedNote.dataset.noteId;
+        if (!noteId) continue;
+        loadIncludedNote(noteId, $(includedNote));
+    }
+}
+
+function applyMath(container: HTMLDivElement) {
+    const equations = container.querySelectorAll("span.math-tex");
+    for (const equation of equations) {
+        renderMathInElement(equation, { trust: true });
+    }
+}
+
+function applyReferenceLinks(container: HTMLDivElement) {
+    const referenceLinks = container.querySelectorAll<HTMLDivElement>("a.reference-link");
+    for (const referenceLink of referenceLinks) {
+        link.loadReferenceLinkTitle($(referenceLink));
+    }
+}
diff --git a/apps/client/src/widgets/type_widgets/ckeditor/config.ts b/apps/client/src/widgets/type_widgets/text/config.ts
similarity index 97%
rename from apps/client/src/widgets/type_widgets/ckeditor/config.ts
rename to apps/client/src/widgets/type_widgets/text/config.ts
index 38d8ee033..7f39c4ea2 100644
--- a/apps/client/src/widgets/type_widgets/ckeditor/config.ts
+++ b/apps/client/src/widgets/type_widgets/text/config.ts
@@ -1,11 +1,10 @@
 import { ALLOWED_PROTOCOLS, MIME_TYPE_AUTO } from "@triliumnext/commons";
-import { buildExtraCommands, type EditorConfig, PREMIUM_PLUGINS } from "@triliumnext/ckeditor5";
+import { buildExtraCommands, type EditorConfig, PREMIUM_PLUGINS, TemplateDefinition } from "@triliumnext/ckeditor5";
 import { getHighlightJsNameForMime } from "../../../services/mime_types.js";
 import options from "../../../services/options.js";
 import { ensureMimeTypesForHighlighting, isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
 import emojiDefinitionsUrl from "@triliumnext/ckeditor5/src/emoji_definitions/en.json?url";
 import { copyTextWithToast } from "../../../services/clipboard_ext.js";
-import getTemplates from "./snippets.js";
 import { t } from "../../../services/i18n.js";
 import { getMermaidConfig } from "../../../services/mermaid.js";
 import noteAutocompleteService, { type Suggestion } from "../../../services/note_autocomplete.js";
@@ -19,6 +18,7 @@ export interface BuildEditorOptions {
     forceGplLicense: boolean;
     isClassicEditor: boolean;
     contentLanguage: string | null;
+    templates: TemplateDefinition[];
 }
 
 export async function buildConfig(opts: BuildEditorOptions): Promise<EditorConfig> {
@@ -156,7 +156,7 @@ export async function buildConfig(opts: BuildEditorOptions): Promise<EditorConfi
             extraCommands: buildExtraCommands()
         },
         template: {
-            definitions: await getTemplates()
+            definitions: opts.templates
         },
         htmlSupport: {
             allow: JSON.parse(options.get("allowedHtmlTags"))
diff --git a/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css b/apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.css
similarity index 100%
rename from apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css
rename to apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.css
diff --git a/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.tsx b/apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.tsx
similarity index 100%
rename from apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.tsx
rename to apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.tsx
diff --git a/apps/client/src/widgets/type_widgets/ckeditor/snippets.ts b/apps/client/src/widgets/type_widgets/text/snippets.ts
similarity index 82%
rename from apps/client/src/widgets/type_widgets/ckeditor/snippets.ts
rename to apps/client/src/widgets/type_widgets/text/snippets.ts
index 1c282d5bf..4a1479c3d 100644
--- a/apps/client/src/widgets/type_widgets/ckeditor/snippets.ts
+++ b/apps/client/src/widgets/type_widgets/text/snippets.ts
@@ -57,12 +57,7 @@ function buildIcon(snippet: FNote) {
 </svg>`
 }
 
-function handleFullReload() {
-    console.warn("Full text editor reload needed");
-    appContext.triggerCommand("reloadTextEditor");
-}
-
-async function handleContentUpdate(affectedNoteIds: string[]) {
+async function handleContentUpdate(affectedNoteIds: string[], setTemplates: (value: TemplateDefinition[]) => void) {
     const updatedNoteIds = new Set(affectedNoteIds);
     const templateNoteIds = new Set(templateCache.keys());
     const affectedTemplateNoteIds = templateNoteIds.intersection(updatedNoteIds);
@@ -92,22 +87,24 @@ async function handleContentUpdate(affectedNoteIds: string[]) {
     }
 
     if (fullReloadNeeded) {
-        handleFullReload();
+        setTemplates(await getTemplates());
     }
 }
 
-export function updateTemplateCache(loadResults: LoadResults): boolean {
+export async function updateTemplateCache(loadResults: LoadResults, setTemplates: (value: TemplateDefinition[]) => void) {
     const affectedNoteIds = loadResults.getNoteIds();
 
     // React to creation or deletion of text snippets.
-    if (loadResults.getAttributeRows().find((attr) =>
-            attr.type === "label" &&
-            (attr.name === "textSnippet" || attr.name === "textSnippetDescription"))) {
-        handleFullReload();
+    if (loadResults.getAttributeRows().find((attr) => {
+        if (attr.type === "label") {
+            return (attr.name === "textSnippet" || attr.name === "textSnippetDescription");
+        } else if (attr.type === "relation") {
+            return (attr.value === "_template_text_snippet");
+        }
+    })) {
+        setTemplates(await getTemplates());
     } else if (affectedNoteIds.length > 0) {
         // Update content and titles if one of the template notes were updated.
-        debouncedHandleContentUpdate(affectedNoteIds);
+        debouncedHandleContentUpdate(affectedNoteIds, setTemplates);
     }
-
-    return false;
 }
diff --git a/apps/client/src/widgets/type_widgets/ckeditor/toolbar.spec.ts b/apps/client/src/widgets/type_widgets/text/toolbar.spec.ts
similarity index 100%
rename from apps/client/src/widgets/type_widgets/ckeditor/toolbar.spec.ts
rename to apps/client/src/widgets/type_widgets/text/toolbar.spec.ts
diff --git a/apps/client/src/widgets/type_widgets/ckeditor/toolbar.ts b/apps/client/src/widgets/type_widgets/text/toolbar.ts
similarity index 100%
rename from apps/client/src/widgets/type_widgets/ckeditor/toolbar.ts
rename to apps/client/src/widgets/type_widgets/text/toolbar.ts
diff --git a/apps/client/src/widgets/type_widgets/text/utils.ts b/apps/client/src/widgets/type_widgets/text/utils.ts
new file mode 100644
index 000000000..ad8a6df23
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/text/utils.ts
@@ -0,0 +1,96 @@
+import appContext from "../../../components/app_context";
+import content_renderer from "../../../services/content_renderer";
+import froca from "../../../services/froca";
+import link, { ViewScope } from "../../../services/link";
+import utils from "../../../services/utils";
+
+export async function loadIncludedNote(noteId: string, $el: JQuery<HTMLElement>) {
+    const note = await froca.getNote(noteId);
+    if (!note) return;
+
+    const $wrapper = $('<div class="include-note-wrapper">');
+    const $link = await link.createLink(note.noteId, {
+        showTooltip: false
+    });
+
+    $wrapper.empty().append($('<h4 class="include-note-title">').append($link));
+
+    const { $renderedContent, type } = await content_renderer.getRenderedContent(note);
+    $wrapper.append($(`<div class="include-note-content type-${type}">`).append($renderedContent));
+
+    $el.empty().append($wrapper);
+}
+
+export function refreshIncludedNote(container: HTMLDivElement, noteId: string) {
+    const includedNotes = container.querySelectorAll(`section[data-note-id="${noteId}"]`);
+    for (const includedNote of includedNotes) {
+        loadIncludedNote(noteId, $(includedNote as HTMLElement));
+    }
+}
+
+export function setupImageOpening(container: HTMLDivElement, singleClickOpens: boolean) {
+    const $container = $(container);
+    $container.on("dblclick", "img", (e) => openImageInCurrentTab($(e.target)));
+    $container.on("click", "img", (e) => {
+        e.stopPropagation();
+        const isLeftClick = e.which === 1;
+        const isMiddleClick = e.which === 2;
+        const ctrlKey = utils.isCtrlKey(e);
+        const activate = (isLeftClick && ctrlKey && e.shiftKey) || (isMiddleClick && e.shiftKey);
+
+        if ((isLeftClick && ctrlKey) || isMiddleClick) {
+            openImageInNewTab($(e.target), activate);
+        } else if (isLeftClick && singleClickOpens) {
+            openImageInCurrentTab($(e.target));
+        }
+    });
+}
+
+async function openImageInCurrentTab($img: JQuery<HTMLElement>) {
+    const parsedImage  = await parseFromImage($img);
+
+    if (parsedImage) {
+        appContext.tabManager.getActiveContext()?.setNote(parsedImage.noteId, { viewScope: parsedImage.viewScope });
+    } else {
+        window.open($img.prop("src"), "_blank");
+    }
+}
+
+async function openImageInNewTab($img: JQuery<HTMLElement>, activate: boolean = false) {
+    const parsedImage = await parseFromImage($img);
+
+    if (parsedImage) {
+        appContext.tabManager.openTabWithNoteWithHoisting(parsedImage.noteId, { activate, viewScope: parsedImage.viewScope });
+    } else {
+        window.open($img.prop("src"), "_blank");
+    }
+}
+
+async function parseFromImage($img: JQuery<HTMLElement>): Promise<{ noteId: string; viewScope: ViewScope } | null> {
+    const imgSrc = $img.prop("src");
+
+    const imageNoteMatch = imgSrc.match(/\/api\/images\/([A-Za-z0-9_]+)\//);
+    if (imageNoteMatch) {
+        return {
+            noteId: imageNoteMatch[1],
+            viewScope: {}
+        };
+    }
+
+    const attachmentMatch = imgSrc.match(/\/api\/attachments\/([A-Za-z0-9_]+)\/image\//);
+    if (attachmentMatch) {
+        const attachmentId = attachmentMatch[1];
+        const attachment = await froca.getAttachment(attachmentId);
+        if (!attachment) return null;
+
+        return {
+            noteId: attachment.ownerId,
+            viewScope: {
+                viewMode: "attachments",
+                attachmentId: attachmentId
+            }
+        };
+    }
+
+    return null;
+}
diff --git a/apps/client/src/widgets/type_widgets/type_widget.ts b/apps/client/src/widgets/type_widgets/type_widget.ts
index 8631ceace..4723060a2 100644
--- a/apps/client/src/widgets/type_widgets/type_widget.ts
+++ b/apps/client/src/widgets/type_widgets/type_widget.ts
@@ -1,108 +1,12 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import appContext, { type EventData, type EventNames } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-import type NoteDetailWidget from "../note_detail.js";
-import type SpacedUpdate from "../../services/spaced_update.js";
-import type EmptyTypeWidget from "./empty.js";
+import FNote from "../../entities/fnote";
+import { ViewScope } from "../../services/link";
+import { TypedComponent } from "../../components/component";
+import NoteContext from "../../components/note_context";
 
-/**
- * The base class for all the note types.
- */
-export default abstract class TypeWidget extends NoteContextAwareWidget {
-
-    spacedUpdate!: SpacedUpdate;
-
-    // for overriding
-    static getType() {}
-
-    doRender() {
-        this.contentSized();
-
-        return super.doRender();
-    }
-
-    doRefresh(note: FNote): void | Promise<void> {}
-
-    async refresh() {
-        const thisWidgetType = (this.constructor as any).getType();
-        const noteWidgetType = await (this.parent as NoteDetailWidget).getWidgetType();
-
-        if (thisWidgetType !== noteWidgetType) {
-            this.toggleInt(false);
-
-            this.cleanup();
-        } else {
-            this.toggleInt(true);
-
-            // Avoid passing nullable this.note down to doRefresh().
-            if (thisWidgetType !== "empty" && this.note) {
-                await this.doRefresh(this.note);
-            } else if (thisWidgetType === "empty") {
-                // EmptyTypeWidget is a special case, since it's used for a new tab where there's no note.
-                await (this as unknown as EmptyTypeWidget).doRefresh();
-            }
-
-            this.triggerEvent("noteDetailRefreshed", { ntxId: this.noteContext?.ntxId });
-        }
-    }
-
-    isActive() {
-        return this.$widget.is(":visible") && this.noteContext?.ntxId === appContext.tabManager.activeNtxId;
-    }
-
-    /** @returns {Promise<Object>|*} promise resolving note data. Note data is an object with content. */
-    getData() {}
-
-    focus() {}
-
-    scrollToEnd() {
-        // Do nothing by default.
-    }
-
-    dataSaved() {
-        // Do nothing by default.
-    }
-
-    async readOnlyTemporarilyDisabledEvent({ noteContext }: EventData<"readOnlyTemporarilyDisabled">) {
-        if (this.isNoteContext(noteContext.ntxId)) {
-            await this.refresh();
-
-            this.focus();
-        }
-    }
-
-    activeNoteChangedEvent() {
-        if (!this.isActiveNoteContext()) {
-            return;
-        }
-
-        // Restore focus to the editor when switching tabs, but only if the note tree is not already focused.
-        if (!document.activeElement?.classList.contains("fancytree-title")) {
-            this.focus();
-        }
-    }
-
-    /**
-     * {@inheritdoc}
-     *
-     * By default:
-     *
-     * - `activeContextChanged` is intercepted and converted to a `setNoteContext` event to avoid `refresh()`.
-     * - `entitiesReloaded` and `refreshData` are passed as-is.
-     * - any other event is not passed to the children.
-     */
-    handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>) {
-        if (["activeContextChanged", "setNoteContext"].includes(name)) {
-            // won't trigger .refresh();
-            return super.handleEventInChildren("setNoteContext", data as EventData<"activeContextChanged">);
-        } else if (name === "entitiesReloaded" || name === "refreshData") {
-            return super.handleEventInChildren(name, data);
-        } else {
-            return Promise.resolve();
-        }
-    }
-
-    cleanup(): void {
-        super.cleanup();
-    }
+export interface TypeWidgetProps {
+    note: FNote;
+    viewScope: ViewScope | undefined;
+    ntxId: string | null | undefined;
+    parentComponent: TypedComponent<any> | undefined;
+    noteContext: NoteContext | undefined;
 }
diff --git a/apps/client/src/widgets/type_widgets/web_view.ts b/apps/client/src/widgets/type_widgets/web_view.ts
deleted file mode 100644
index 1c2fee53d..000000000
--- a/apps/client/src/widgets/type_widgets/web_view.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { t } from "../../services/i18n.js";
-import TypeWidget from "./type_widget.js";
-import attributeService from "../../services/attributes.js";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-import utils from "../../services/utils.js";
-
-const TPL = /*html*/`
-<div class="note-detail-web-view note-detail-printable" style="height: 100%">
-    <style>
-        .note-detail-web-view-content {
-            height: 100%;
-            width: 100%;
-        }
-    </style>
-    <div class="note-detail-web-view-help alert alert-warning" style="margin: 50px; padding: 20px 20px 0px 20px;">
-        <h4>${t("web_view.web_view")}</h4>
-
-        <p>${t("web_view.embed_websites")}</p>
-
-        <p>${t("web_view.create_label")}</p>
-    </div>
-
-    ${buildElement()}
-</div>`;
-
-function buildElement() {
-    if (!utils.isElectron()) {
-        return `<iframe class="note-detail-web-view-content" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>`;
-    } else {
-        return `<webview class="note-detail-web-view-content"></webview>`;
-    }
-}
-
-export default class WebViewTypeWidget extends TypeWidget {
-
-    private $noteDetailWebViewHelp!: JQuery<HTMLElement>;
-    private $noteDetailWebViewContent!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "webView";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$noteDetailWebViewHelp = this.$widget.find(".note-detail-web-view-help");
-        this.$noteDetailWebViewContent = this.$widget.find(".note-detail-web-view-content");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        this.$widget.show();
-        this.$noteDetailWebViewHelp.hide();
-        this.$noteDetailWebViewContent.hide();
-
-        if (!this.note) {
-            return;
-        }
-
-        const webViewSrc = this.note.getLabelValue("webViewSrc");
-
-        if (webViewSrc) {
-            this.$noteDetailWebViewContent.show().attr("src", webViewSrc);
-        } else {
-            this.$noteDetailWebViewContent.hide();
-            this.$noteDetailWebViewHelp.show();
-        }
-    }
-
-    cleanup() {
-        this.$noteDetailWebViewContent.removeAttr("src");
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows().find((attr) => attr.name === "webViewSrc" && attributeService.isAffecting(attr, this.noteContext?.note))) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/desktop/src/main.ts b/apps/desktop/src/main.ts
index a94709107..782b0e008 100644
--- a/apps/desktop/src/main.ts
+++ b/apps/desktop/src/main.ts
@@ -8,11 +8,10 @@ import tray from "@triliumnext/server/src/services/tray.js";
 import options from "@triliumnext/server/src/services/options.js";
 import electronDebug from "electron-debug";
 import electronDl from "electron-dl";
-import { deferred } from "@triliumnext/server/src/services/utils.js";
 import { PRODUCT_NAME } from "./app-info";
 import port from "@triliumnext/server/src/services/port.js";
 import { join } from "path";
-import { LOCALES } from "../../../packages/commons/src";
+import { deferred, LOCALES } from "../../../packages/commons/src";
 
 async function main() {
     const userDataPath = getUserData();
diff --git a/apps/edit-docs/src/utils.ts b/apps/edit-docs/src/utils.ts
index 8a03ef6a0..708c36814 100644
--- a/apps/edit-docs/src/utils.ts
+++ b/apps/edit-docs/src/utils.ts
@@ -3,12 +3,12 @@ import fs from "fs/promises";
 import fsExtra from "fs-extra";
 import path from "path";
 import electron from "electron";
-import { deferred, type DeferredPromise } from "@triliumnext/server/src/services/utils.js";
 import windowService from "@triliumnext/server/src/services/window.js";
 import archiver, { type Archiver } from "archiver";
 import type { WriteStream } from "fs";
 import TaskContext from "@triliumnext/server/src/services/task_context.js";
 import { resolve } from "path";
+import { deferred, DeferredPromise } from "../../../packages/commons/src";
 
 export function initializeDatabase(skipDemoDb: boolean) {
     return new Promise<void>(async (resolve) => {
@@ -92,8 +92,6 @@ function waitForEnd(archive: Archiver, stream: WriteStream) {
 }
 
 export async function extractZip(zipFilePath: string, outputPath: string, ignoredFiles?: Set<string>) {
-    const deferred = (await import("@triliumnext/server/src/services/utils.js")).deferred;
-
     const promise = deferred<void>()
     setTimeout(async () => {
         // Then extract the zip.
diff --git a/apps/server/src/routes/api/attachments.ts b/apps/server/src/routes/api/attachments.ts
index 718c99914..0da59b721 100644
--- a/apps/server/src/routes/api/attachments.ts
+++ b/apps/server/src/routes/api/attachments.ts
@@ -3,6 +3,7 @@ import blobService from "../../services/blob.js";
 import ValidationError from "../../errors/validation_error.js";
 import imageService from "../../services/image.js";
 import type { Request } from "express";
+import { ConvertAttachmentToNoteResponse } from "@triliumnext/commons";
 
 function getAttachmentBlob(req: Request) {
     const preview = req.query.preview === "true";
@@ -103,7 +104,7 @@ function convertAttachmentToNote(req: Request) {
     const { attachmentId } = req.params;
 
     const attachment = becca.getAttachmentOrThrow(attachmentId);
-    return attachment.convertToNote();
+    return attachment.convertToNote() satisfies ConvertAttachmentToNoteResponse;
 }
 
 export default {
diff --git a/apps/server/src/routes/api/relation-map.ts b/apps/server/src/routes/api/relation-map.ts
index 0f0df6149..bc1c877aa 100644
--- a/apps/server/src/routes/api/relation-map.ts
+++ b/apps/server/src/routes/api/relation-map.ts
@@ -1,22 +1,12 @@
 import type { Request } from "express";
 import becca from "../../becca/becca.js";
 import sql from "../../services/sql.js";
-
-interface ResponseData {
-    noteTitles: Record<string, string>;
-    relations: {
-        attributeId: string;
-        sourceNoteId: string;
-        targetNoteId: string;
-        name: string;
-    }[];
-    inverseRelations: Record<string, string>;
-}
+import { RelationMapPostResponse } from "@triliumnext/commons";
 
 function getRelationMap(req: Request) {
     const { relationMapNoteId, noteIds } = req.body;
 
-    const resp: ResponseData = {
+    const resp: RelationMapPostResponse = {
         // noteId => title
         noteTitles: {},
         relations: [],
diff --git a/apps/server/src/routes/assets.ts b/apps/server/src/routes/assets.ts
index 1e2ff30b1..d8854d31a 100644
--- a/apps/server/src/routes/assets.ts
+++ b/apps/server/src/routes/assets.ts
@@ -21,17 +21,19 @@ async function register(app: express.Application) {
 
     if (process.env.NODE_ENV === "development") {
         const { createServer: createViteServer } = await import("vite");
+        const clientDir = path.join(srcRoot, "../client");
         const vite = await createViteServer({
             server: { middlewareMode: true },
             appType: "custom",
             cacheDir: path.join(srcRoot, "../../.cache/vite"),
             base: `/${assetUrlFragment}/`,
-            root: path.join(srcRoot, "../client")
+            root: clientDir
         });
         app.use(`/${assetUrlFragment}/`, (req, res, next) => {
             req.url = `/${assetUrlFragment}` + req.url;
             vite.middlewares(req, res, next);
         });
+        app.use(`/node_modules/@excalidraw/excalidraw/dist/prod`, persistentCacheStatic(path.join(srcRoot, "../../node_modules/@excalidraw/excalidraw/dist/prod")));
     } else {
         const publicDir = path.join(resourceDir, "public");
         if (!existsSync(publicDir)) {
diff --git a/apps/server/src/services/hidden_subtree.spec.ts b/apps/server/src/services/hidden_subtree.spec.ts
index 623bed39e..6fc9403a9 100644
--- a/apps/server/src/services/hidden_subtree.spec.ts
+++ b/apps/server/src/services/hidden_subtree.spec.ts
@@ -4,9 +4,8 @@ import hiddenSubtreeService from "./hidden_subtree.js";
 import sql_init from "./sql_init.js";
 import branches from "./branches.js";
 import becca from "../becca/becca.js";
-import { LOCALES } from "@triliumnext/commons";
+import { deferred, LOCALES } from "@triliumnext/commons";
 import { changeLanguage } from "./i18n.js";
-import { deferred } from "./utils.js";
 
 describe("Hidden Subtree", () => {
     beforeAll(async () => {
diff --git a/apps/server/src/services/sql_init.ts b/apps/server/src/services/sql_init.ts
index cdd6230bf..93452669f 100644
--- a/apps/server/src/services/sql_init.ts
+++ b/apps/server/src/services/sql_init.ts
@@ -2,7 +2,7 @@ import log from "./log.js";
 import fs from "fs";
 import resourceDir from "./resource_dir.js";
 import sql from "./sql.js";
-import { isElectron, deferred } from "./utils.js";
+import { isElectron } from "./utils.js";
 import optionService from "./options.js";
 import port from "./port.js";
 import BOption from "../becca/entities/boption.js";
@@ -10,7 +10,7 @@ import TaskContext from "./task_context.js";
 import migrationService from "./migration.js";
 import cls from "./cls.js";
 import config from "./config.js";
-import type { OptionRow } from "@triliumnext/commons";
+import { deferred, type OptionRow } from "@triliumnext/commons";
 import BNote from "../becca/entities/bnote.js";
 import BBranch from "../becca/entities/bbranch.js";
 import zipImportService from "./import/zip.js";
diff --git a/apps/server/src/services/utils.spec.ts b/apps/server/src/services/utils.spec.ts
index e815de3f8..d767d2d25 100644
--- a/apps/server/src/services/utils.spec.ts
+++ b/apps/server/src/services/utils.spec.ts
@@ -379,14 +379,6 @@ describe("#timeLimit", () => {
     });
 });
 
-describe("#deferred", () => {
-    it("should return a promise", () => {
-        const result = utils.deferred();
-        expect(result).toBeInstanceOf(Promise);
-    });
-    // TriliumNextTODO: Add further tests!
-});
-
 describe("#removeDiacritic", () => {
     const testCases: TestCase<typeof utils.removeDiacritic>[] = [
         [ "w/ 'Äpfel' it should replace the 'Ä'", [ "Äpfel" ], "Apfel" ],
diff --git a/apps/server/src/services/utils.ts b/apps/server/src/services/utils.ts
index 6d567f15a..d8c9087ef 100644
--- a/apps/server/src/services/utils.ts
+++ b/apps/server/src/services/utils.ts
@@ -229,27 +229,6 @@ export function timeLimit<T>(promise: Promise<T>, limitMs: number, errorMessage?
     });
 }
 
-export interface DeferredPromise<T> extends Promise<T> {
-    resolve: (value: T | PromiseLike<T>) => void;
-    reject: (reason?: any) => void;
-}
-
-export function deferred<T>(): DeferredPromise<T> {
-    return (() => {
-        let resolve!: (value: T | PromiseLike<T>) => void;
-        let reject!: (reason?: any) => void;
-
-        let promise = new Promise<T>((res, rej) => {
-            resolve = res;
-            reject = rej;
-        }) as DeferredPromise<T>;
-
-        promise.resolve = resolve;
-        promise.reject = reject;
-        return promise as DeferredPromise<T>;
-    })();
-}
-
 export function removeDiacritic(str: string) {
     if (!str) {
         return "";
@@ -508,7 +487,6 @@ function slugify(text: string) {
 export default {
     compareVersions,
     crash,
-    deferred,
     envToBoolean,
     escapeHtml,
     escapeRegExp,
diff --git a/packages/ckeditor5/src/index.ts b/packages/ckeditor5/src/index.ts
index b20fa0db5..1f7be24e4 100644
--- a/packages/ckeditor5/src/index.ts
+++ b/packages/ckeditor5/src/index.ts
@@ -5,7 +5,7 @@ import { BalloonEditor, DecoupledEditor, FindAndReplaceEditing, FindCommand } fr
 import "./translation_overrides.js";
 export { EditorWatchdog } from "ckeditor5";
 export { PREMIUM_PLUGINS } from "./plugins.js";
-export type { EditorConfig, MentionFeed, MentionFeedObjectItem, ModelNode, ModelPosition, ModelElement, WatchdogConfig } from "ckeditor5";
+export type { EditorConfig, MentionFeed, MentionFeedObjectItem, ModelNode, ModelPosition, ModelElement, WatchdogConfig, WatchdogState } from "ckeditor5";
 export type { TemplateDefinition } from "ckeditor5-premium-features";
 export { default as buildExtraCommands } from "./extra_slash_commands.js";
 
diff --git a/packages/commons/src/lib/attribute_names.ts b/packages/commons/src/lib/attribute_names.ts
index d55d4e375..9db831a10 100644
--- a/packages/commons/src/lib/attribute_names.ts
+++ b/packages/commons/src/lib/attribute_names.ts
@@ -29,7 +29,6 @@ type Labels = {
     status: string;
     pageSize: number;
     geolocation: string;
-    readOnly: boolean;
     expanded: boolean;
     "calendar:hideWeekends": boolean;
     "calendar:weekNumbers": boolean;
@@ -41,6 +40,12 @@ type Labels = {
     includeArchived: boolean;
     "presentation:theme": string;
     "slide:background": string;
+
+    // Note-type specific
+    webViewSrc: string;
+    readOnly: boolean;
+    mapType: string;
+    mapRootNoteId: string;
 }
 
 /**
diff --git a/packages/commons/src/lib/server_api.ts b/packages/commons/src/lib/server_api.ts
index 294717bd8..dc6dc4d41 100644
--- a/packages/commons/src/lib/server_api.ts
+++ b/packages/commons/src/lib/server_api.ts
@@ -207,6 +207,11 @@ export interface ConvertToAttachmentResponse {
     attachment: AttachmentRow;
 }
 
+export interface ConvertAttachmentToNoteResponse {
+    note: NoteRow;
+    branch: BranchRow;
+}
+
 export type SaveSqlConsoleResponse = CloneResponse;
 
 export interface BacklinkCountResponse {
@@ -242,3 +247,29 @@ export interface SchemaResponse {
         type: string;
     }[];
 }
+
+export interface RelationMapRelation {
+    name: string;
+    attributeId: string;
+    sourceNoteId: string;
+    targetNoteId: string;
+}
+
+export interface RelationMapPostResponse {
+    noteTitles: Record<string, string>;
+    relations: RelationMapRelation[];
+    inverseRelations: Record<string, string>;
+}
+
+export interface NoteMapLink {
+    key: string;
+    sourceNoteId: string;
+    targetNoteId: string;
+    name: string;
+}
+
+export interface NoteMapPostResponse {
+    notes: string[];
+    links: NoteMapLink[];
+    noteIdToDescendantCountMap: Record<string, number>;
+}
diff --git a/packages/commons/src/lib/utils.spec.ts b/packages/commons/src/lib/utils.spec.ts
new file mode 100644
index 000000000..2a85b438d
--- /dev/null
+++ b/packages/commons/src/lib/utils.spec.ts
@@ -0,0 +1,9 @@
+import { deferred } from "./utils.js";
+
+describe("#deferred", () => {
+    it("should return a promise", () => {
+        const result = deferred();
+        expect(result).toBeInstanceOf(Promise);
+    });
+    // TriliumNextTODO: Add further tests!
+});
diff --git a/packages/commons/src/lib/utils.ts b/packages/commons/src/lib/utils.ts
index 936c63c16..93b953f46 100644
--- a/packages/commons/src/lib/utils.ts
+++ b/packages/commons/src/lib/utils.ts
@@ -9,3 +9,24 @@ export function formatLogMessage(message: string | object) {
 
     return message;
 }
+
+export interface DeferredPromise<T> extends Promise<T> {
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: any) => void;
+}
+
+export function deferred<T>(): DeferredPromise<T> {
+    return (() => {
+        let resolve!: (value: T | PromiseLike<T>) => void;
+        let reject!: (reason?: any) => void;
+
+        let promise = new Promise<T>((res, rej) => {
+            resolve = res;
+            reject = rej;
+        }) as DeferredPromise<T>;
+
+        promise.resolve = resolve;
+        promise.reject = reject;
+        return promise as DeferredPromise<T>;
+    })();
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3aacb05bf..fed095f3b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15441,8 +15441,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.2.0
       '@ckeditor/ckeditor5-utils': 47.2.0
       ckeditor5: 47.2.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-block-quote@47.2.0':
     dependencies:
@@ -15756,6 +15754,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.2.0
       ckeditor5: 47.2.0(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-editor-decoupled@47.2.0':
     dependencies:
@@ -15821,6 +15821,8 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.2.0
       '@ckeditor/ckeditor5-engine': 47.2.0
       '@ckeditor/ckeditor5-utils': 47.2.0
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-essentials@47.2.0':
     dependencies: