client/options/code notes: create the "Editor" section, reorganize

src/public/app/widgets/type_widgets/content_widget.ts

@@ -8,8 +8,7 @@ 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 VimKeyBindingsOptions from "./options/code_notes/vim_key_bindings.js";
+import CodeEditorOptions from "./options/code_notes/code_editor.js";
-import WrapLinesOptions from "./options/code_notes/wrap_lines.js";
 import CodeAutoReadOnlySizeOptions from "./options/code_notes/code_auto_read_only_size.js";
 import CodeMimeTypesOptions from "./options/code_notes/code_mime_types.js";
 import ImageOptions from "./options/images/images.js";
@@ -65,7 +64,7 @@ const CONTENT_WIDGETS: Record<string, (typeof NoteContextAwareWidget)[]> = {
     _optionsAppearance: [LocalizationOptions, ThemeOptions, FontsOptions, CodeBlockOptions, ElectronIntegrationOptions, MaxContentWidthOptions, RibbonOptions],
     _optionsShortcuts: [KeyboardShortcutsOptions],
     _optionsTextNotes: [EditorOptions, HeadingStyleOptions, TableOfContentsOptions, HighlightsListOptions, TextAutoReadOnlySizeOptions],
-    _optionsCodeNotes: [VimKeyBindingsOptions, WrapLinesOptions, CodeAutoReadOnlySizeOptions, CodeMimeTypesOptions],
+    _optionsCodeNotes: [CodeEditorOptions, CodeMimeTypesOptions, CodeAutoReadOnlySizeOptions],
     _optionsImages: [ImageOptions],
     _optionsSpellcheck: [SpellcheckOptions],
     _optionsPassword: [PasswordOptions, ProtectedSessionTimeoutOptions],

src/public/app/widgets/type_widgets/options/code_notes/code_editor.ts

@@ -0,0 +1,39 @@
+import OptionsWidget from "../options_widget.js";
+import { t } from "../../../../services/i18n.js";
+import type { OptionMap } from "../../../../../../services/options_interface.js";
+
+const TPL = `
+<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>
+
+    <label class="tn-checkbox">
+        <input type="checkbox" class="line-wrap-enabled form-check-input">
+        ${t("wrap_lines.wrap_lines_in_code_notes")}
+    </label>
+    <p class="form-text">${t("wrap_lines.enable_line_wrap")}</p>
+</div>`;
+
+export default class CodeEditorOptions extends OptionsWidget {
+
+    private $vimKeymapEnabled!: JQuery<HTMLElement>;
+    private $codeLineWrapEnabled!: JQuery<HTMLElement>;
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$vimKeymapEnabled = this.$widget.find(".vim-keymap-enabled");
+        this.$vimKeymapEnabled.on("change", () => this.updateCheckboxOption("vimKeymapEnabled", this.$vimKeymapEnabled));
+
+        this.$codeLineWrapEnabled = this.$widget.find(".line-wrap-enabled");
+        this.$codeLineWrapEnabled.on("change", () => this.updateCheckboxOption("codeLineWrapEnabled", this.$codeLineWrapEnabled));
+    }
+
+    async optionsLoaded(options: OptionMap) {
+        this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled);
+        this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled);
+    }
+}

src/public/app/widgets/type_widgets/options/code_notes/vim_key_bindings.ts

@@ -1,27 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "../../../../../../services/options_interface.js";
-
-const TPL = `
-<div class="options-section">
-    <h4>${t("vim_key_bindings.use_vim_keybindings_in_code_notes")}</h4>
-    <label class="tn-checkbox">
-        <input type="checkbox" class="vim-keymap-enabled form-check-input">
-        ${t("vim_key_bindings.enable_vim_keybindings")}
-    </label>
-</div>`;
-
-export default class VimKeyBindingsOptions 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);
-    }
-}

src/public/app/widgets/type_widgets/options/code_notes/wrap_lines.ts

@@ -1,27 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "../../../../../../services/options_interface.js";
-
-const TPL = `
-<div class="options-section">
-    <h4>${t("wrap_lines.wrap_lines_in_code_notes")}</h4>
-    <label class="tn-checkbox">
-        <input type="checkbox" class="line-wrap-enabled form-check-input">
-        ${t("wrap_lines.enable_line_wrap")}
-    </label>
-</div>`;
-
-export default class WrapLinesOptions extends OptionsWidget {
-
-    private $codeLineWrapEnabled!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$codeLineWrapEnabled = this.$widget.find(".line-wrap-enabled");
-        this.$codeLineWrapEnabled.on("change", () => this.updateCheckboxOption("codeLineWrapEnabled", this.$codeLineWrapEnabled));
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled);
-    }
-}

src/public/translations/en/translation.json

@@ -1130,6 +1130,9 @@
     "description": "Automatic read-only note size is the size after which notes will be displayed in a read-only mode (for performance reasons).",
     "label": "Automatic read-only size (code notes)"
   },
+  "code-editor-options": {
+    "title": "Editor"
+  },
   "code_mime_types": {
     "title": "Available MIME types in the dropdown"
   },