diff --git a/apps/client/src/widgets/NoteDetail.tsx b/apps/client/src/widgets/NoteDetail.tsx index 767d16b10..e65f8ec66 100644 --- a/apps/client/src/widgets/NoteDetail.tsx +++ b/apps/client/src/widgets/NoteDetail.tsx @@ -10,6 +10,7 @@ import Doc from "./type_widgets/Doc"; import { TypeWidgetProps } from "./type_widgets/type_widget"; import ProtectedSession from "./type_widgets/ProtectedSession"; import Book from "./type_widgets/Book"; +import ContentWidget from "./type_widgets/ContentWidget"; /** * 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, @@ -62,6 +63,7 @@ function getCorrespondingWidget(noteType: ExtendedNoteType | undefined, props: T case "search": return
case "protectedSession": return case "book": return + case "contentWidget": return default: break; } } diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index ab3003640..2232503db 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -18,8 +18,8 @@ import sync from "../../services/sync"; import HelpButton from "../react/HelpButton"; import { TabContext } from "./ribbon-interface"; import Modal from "../react/Modal"; -import { CodeMimeTypesList } from "../type_widgets_old/options/code_notes"; -import { ContentLanguagesList } from "../type_widgets_old/options/i18n"; +import { CodeMimeTypesList } from "../type_widgets/options/code_notes"; +import { ContentLanguagesList } from "../type_widgets/options/i18n"; export default function BasicPropertiesTab({ note }: TabContext) { return ( 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..9e5c42bd7 --- /dev/null +++ b/apps/client/src/widgets/type_widgets/ContentWidget.tsx @@ -0,0 +1,60 @@ +import { TypeWidgetProps } from "./type_widget"; +import { JSX } from "preact/jsx-runtime"; +import { OptionPages } from "../type_widgets_old/content_widget"; +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"; + +export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsAi" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced"; + +const CONTENT_WIDGETS: Record 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: () => <> // FIXME +} + +/** + * 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 }: TypeWidgetProps) { + const Content = CONTENT_WIDGETS[note.noteId]; + return ( +
+
+ {Content + ? + : (t("content_widget.unknown_widget", { id: note.noteId }))} +
+
+ ) +} 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_old/options/advanced.tsx b/apps/client/src/widgets/type_widgets/options/advanced.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/advanced.tsx rename to apps/client/src/widgets/type_widgets/options/advanced.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/ai_settings.tsx b/apps/client/src/widgets/type_widgets/options/ai_settings.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/ai_settings.tsx rename to apps/client/src/widgets/type_widgets/options/ai_settings.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/appearance.tsx rename to apps/client/src/widgets/type_widgets/options/appearance.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/backup.tsx b/apps/client/src/widgets/type_widgets/options/backup.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/backup.tsx rename to apps/client/src/widgets/type_widgets/options/backup.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/code_notes.css b/apps/client/src/widgets/type_widgets/options/code_notes.css similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/code_notes.css rename to apps/client/src/widgets/type_widgets/options/code_notes.css diff --git a/apps/client/src/widgets/type_widgets_old/options/code_notes.tsx b/apps/client/src/widgets/type_widgets/options/code_notes.tsx similarity index 97% rename from apps/client/src/widgets/type_widgets_old/options/code_notes.tsx rename to apps/client/src/widgets/type_widgets/options/code_notes.tsx index da33cfbce..e2a046cd7 100644 --- a/apps/client/src/widgets/type_widgets_old/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() {
- @@ -174,4 +174,4 @@ export function CodeMimeTypesList() { ))} ); -} \ No newline at end of file +} diff --git a/apps/client/src/widgets/type_widgets_old/options/components/AutoReadOnlySize.tsx b/apps/client/src/widgets/type_widgets/options/components/AutoReadOnlySize.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/components/AutoReadOnlySize.tsx rename to apps/client/src/widgets/type_widgets/options/components/AutoReadOnlySize.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/components/CheckboxList.tsx b/apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/components/CheckboxList.tsx rename to apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/components/OptionsRow.css b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/components/OptionsRow.css rename to apps/client/src/widgets/type_widgets/options/components/OptionsRow.css diff --git a/apps/client/src/widgets/type_widgets_old/options/components/OptionsRow.tsx b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/components/OptionsRow.tsx rename to apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/components/OptionsSection.tsx b/apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/components/OptionsSection.tsx rename to apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/components/RelatedSettings.tsx b/apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx similarity index 92% rename from apps/client/src/widgets/type_widgets_old/options/components/RelatedSettings.tsx rename to apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx index 9ba1b1064..fea1e9add 100644 --- a/apps/client/src/widgets/type_widgets_old/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) { ); -} \ No newline at end of file +} diff --git a/apps/client/src/widgets/type_widgets_old/options/components/TimeSelector.tsx b/apps/client/src/widgets/type_widgets/options/components/TimeSelector.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/components/TimeSelector.tsx rename to apps/client/src/widgets/type_widgets/options/components/TimeSelector.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/etapi.tsx b/apps/client/src/widgets/type_widgets/options/etapi.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/etapi.tsx rename to apps/client/src/widgets/type_widgets/options/etapi.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/i18n.tsx rename to apps/client/src/widgets/type_widgets/options/i18n.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/images.tsx b/apps/client/src/widgets/type_widgets/options/images.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/images.tsx rename to apps/client/src/widgets/type_widgets/options/images.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/multi_factor_authentication.tsx b/apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/multi_factor_authentication.tsx rename to apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/other.tsx b/apps/client/src/widgets/type_widgets/options/other.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/other.tsx rename to apps/client/src/widgets/type_widgets/options/other.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/password.tsx b/apps/client/src/widgets/type_widgets/options/password.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/password.tsx rename to apps/client/src/widgets/type_widgets/options/password.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/samples/code_note.txt b/apps/client/src/widgets/type_widgets/options/samples/code_note.txt similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/samples/code_note.txt rename to apps/client/src/widgets/type_widgets/options/samples/code_note.txt diff --git a/apps/client/src/widgets/type_widgets_old/options/shortcuts.tsx b/apps/client/src/widgets/type_widgets/options/shortcuts.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/shortcuts.tsx rename to apps/client/src/widgets/type_widgets/options/shortcuts.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/spellcheck.tsx b/apps/client/src/widgets/type_widgets/options/spellcheck.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/spellcheck.tsx rename to apps/client/src/widgets/type_widgets/options/spellcheck.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/sync.tsx b/apps/client/src/widgets/type_widgets/options/sync.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/sync.tsx rename to apps/client/src/widgets/type_widgets/options/sync.tsx diff --git a/apps/client/src/widgets/type_widgets_old/options/text_notes.tsx b/apps/client/src/widgets/type_widgets/options/text_notes.tsx similarity index 100% rename from apps/client/src/widgets/type_widgets_old/options/text_notes.tsx rename to apps/client/src/widgets/type_widgets/options/text_notes.tsx diff --git a/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts b/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts index 9da76b559..821926afb 100644 --- a/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts +++ b/apps/client/src/widgets/type_widgets_old/abstract_code_type_widget.ts @@ -5,7 +5,6 @@ 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 diff --git a/apps/client/src/widgets/type_widgets_old/content_widget.tsx b/apps/client/src/widgets/type_widgets_old/content_widget.tsx deleted file mode 100644 index 1d94b0d09..000000000 --- a/apps/client/src/widgets/type_widgets_old/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*/`
- - -
-
`; - -export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsAi" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced"; - -const CONTENT_WIDGETS: Record = { - _optionsAppearance: , - _optionsShortcuts: , - _optionsTextNotes: , - _optionsCodeNotes: , - _optionsImages: , - _optionsSpellcheck: , - _optionsPassword: , - _optionsMFA: , - _optionsEtapi: , - _optionsBackup: , - _optionsSync: , - _optionsAi: , - _optionsOther: , - _optionsLocalization: , - _optionsAdvanced: , - _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; - - 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)[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)[this.noteId]; - if (contentWidgets && !Array.isArray(contentWidgets)) { - disposeReactWidget(this.$content[0]); - } - } - - super.cleanup(); - } - -}