feat(react/settings): port code editor settings

apps/client/src/widgets/type_widgets/content_widget.tsx

@@ -1,10 +1,4 @@
 import TypeWidget from "./type_widget.js";
-import KeyboardShortcutsOptions from "./options/shortcuts.js";
-import HeadingStyleOptions from "./options/text_notes/heading_style.js";
-import TableOfContentsOptions from "./options/text_notes/table_of_contents.js";
-import HighlightsListOptions from "./options/text_notes/highlights_list.js";
-import TextAutoReadOnlySizeOptions from "./options/text_notes/text_auto_read_only_size.js";
-import DateTimeFormatOptions from "./options/text_notes/date_time_format.js";
 import CodeEditorOptions from "./options/code_notes/code_editor.js";
 import CodeAutoReadOnlySizeOptions from "./options/code_notes/code_auto_read_only_size.js";
 import CodeMimeTypesOptions from "./options/code_notes/code_mime_types.js";
@@ -18,8 +12,6 @@ import HtmlImportTagsOptions from "./options/other/html_import_tags.js";
 import BackendLogWidget from "./content/backend_log.js";
 import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_timeout.js";
 import MultiFactorAuthenticationOptions from './options/multi_factor_authentication.js';
-import CodeBlockOptions from "./options/text_notes/code_block.js";
-import EditorOptions from "./options/text_notes/editor.js";
 import ShareSettingsOptions from "./options/other/share_settings.js";
 import AiSettingsOptions from "./options/ai_settings.js";
 import type FNote from "../../entities/fnote.js";
@@ -27,7 +19,6 @@ import type NoteContextAwareWidget from "../note_context_aware_widget.js";
 import { t } from "../../services/i18n.js";
 import type BasicWidget from "../basic_widget.js";
 import CodeTheme from "./options/code_notes/code_theme.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";
@@ -41,6 +32,7 @@ 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";
 
 const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -71,12 +63,7 @@ const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextA
     _optionsAppearance: <AppearanceSettings />,
     _optionsShortcuts: <ShortcutSettings />,
     _optionsTextNotes: <TextNoteSettings />,
-    _optionsCodeNotes: [
+    _optionsCodeNotes: <CodeNoteSettings />,
-        CodeEditorOptions,
-        CodeTheme,
-        CodeMimeTypesOptions,
-        CodeAutoReadOnlySizeOptions
-    ],
     _optionsImages: <ImageSettings />,
     _optionsSpellcheck: <SpellcheckSettings />,
     _optionsPassword: <PasswordSettings />,

apps/client/src/widgets/type_widgets/options/code_notes.tsx

@@ -0,0 +1,29 @@
+import { t } from "../../../services/i18n"
+import FormCheckbox from "../../react/FormCheckbox"
+import FormGroup from "../../react/FormGroup"
+import { useTriliumOptionBool } from "../../react/hooks"
+import OptionsSection from "./components/OptionsSection"
+
+export default function CodeNoteSettings() {
+    return (
+        <>
+            <Editor />
+        </>
+    )
+}
+
+function Editor() {
+    const [ vimKeymapEnabled, setVimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
+
+    return (
+        <OptionsSection title={t("code-editor-options.title")}>
+            <FormGroup description={t("vim_key_bindings.enable_vim_keybindings")}>
+                <FormCheckbox
+                    name="vim-keymap-enabled"
+                    label={t("vim_key_bindings.use_vim_keybindings_in_code_notes")}
+                    currentValue={vimKeymapEnabled} onChange={setVimKeymapEnabled}
+                />
+            </FormGroup>
+        </OptionsSection>
+    )
+}

apps/client/src/widgets/type_widgets/options/code_notes/code_editor.ts

@@ -1,28 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("code-editor-options.title")}</h4>
-    <label class="tn-checkbox">
-        <input type="checkbox" class="vim-keymap-enabled form-check-input">
-        ${t("vim_key_bindings.use_vim_keybindings_in_code_notes")}
-    </label>
-    <p class="form-text">${t("vim_key_bindings.enable_vim_keybindings")}</p>
-</div>`;
-
-export default class CodeEditorOptions extends OptionsWidget {
-
-    private $vimKeymapEnabled!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$vimKeymapEnabled = this.$widget.find(".vim-keymap-enabled");
-        this.$vimKeymapEnabled.on("change", () => this.updateCheckboxOption("vimKeymapEnabled", this.$vimKeymapEnabled));
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled);
-    }
-}