gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(react/settings): basic rendering of React content widgets

Browse Source
This commit is contained in:
Elian Doran 2025-08-14 17:19:38 +03:00
parent 1dfcf960d3
commit 8ff108db9e
No known key found for this signature in database
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
apps/client/src/widgets/type_widgets/content_widget.ts
View File

@ -47,6 +47,9 @@ import type BasicWidget from "../basic_widget.js";
import CodeTheme from "./options/code_notes/code_theme.js"; import CodeTheme from "./options/code_notes/code_theme.js";
import RelatedSettings from "./options/appearance/related_settings.js"; import RelatedSettings from "./options/appearance/related_settings.js";
import EditorFeaturesOptions from "./options/text_notes/features.js"; import EditorFeaturesOptions from "./options/text_notes/features.js";
import type { JSX } from "preact/jsx-runtime";
import AppearanceSettings from "./options/appearance.jsx";
import { renderReactWidget } from "../react/ReactBasicWidget.jsx";
const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable"> const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
<style> <style>
@ -73,14 +76,8 @@ const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printabl
export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsAi" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced"; 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)[]> = { const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextAwareWidget)[] | (() => JSX.Element))> = {
_optionsAppearance: [ _optionsAppearance: AppearanceSettings,
ThemeOptions,
FontsOptions,
ElectronIntegrationOptions,
MaxContentWidthOptions,
RibbonOptions
],
_optionsShortcuts: [ _optionsShortcuts: [
KeyboardShortcutsOptions KeyboardShortcutsOptions
], ],
@ -172,13 +169,17 @@ export default class ContentWidgetTypeWidget extends TypeWidget {
this.$content.empty(); this.$content.empty();
this.children = []; this.children = [];
const contentWidgets = [ const contentWidgets = (CONTENT_WIDGETS as Record<string, (typeof NoteContextAwareWidget[] | (() => JSX.Element))>)[note.noteId];
...((CONTENT_WIDGETS as Record<string, typeof NoteContextAwareWidget[]>)[note.noteId]),
RelatedSettings
];
this.$content.toggleClass("options", note.noteId.startsWith("_options")); this.$content.toggleClass("options", note.noteId.startsWith("_options"));
if (contentWidgets) { // 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) { for (const clazz of contentWidgets) {
const widget = new clazz(); const widget = new clazz();
@ -191,9 +192,11 @@ export default class ContentWidgetTypeWidget extends TypeWidget {
this.widget = widget; this.widget = widget;
await widget.refresh(); await widget.refresh();
} }
} else { return;
this.$content.append(t("content_widget.unknown_widget", { id: note.noteId }));
} }
// React widget.
this.$content.append(renderReactWidget(this, contentWidgets()));
} }
} }

3
apps/client/src/widgets/type_widgets/options/appearance.tsx Normal file
View File

@ -0,0 +1,3 @@
export default function AppearanceSettings() {
return <p>Hi</p>
}