chore(client/ts): port options/codeNotes

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

@@ -1,3 +1,4 @@
+import type { OptionMap } from "../../../../../../services/options_interface.js";
 import { t } from "../../../../services/i18n.js";
 import OptionsWidget from "../options_widget.js";
 
@@ -14,13 +15,16 @@ const TPL = `
 </div>`;
 
 export default class CodeAutoReadOnlySizeOptions extends OptionsWidget {
+
+    private $autoReadonlySizeCode!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
         this.$autoReadonlySizeCode = this.$widget.find(".auto-readonly-size-code");
         this.$autoReadonlySizeCode.on("change", () => this.updateOption("autoReadonlySizeCode", this.$autoReadonlySizeCode.val()));
     }
 
-    async optionsLoaded(options) {
+    async optionsLoaded(options: OptionMap) {
         this.$autoReadonlySizeCode.val(options.autoReadonlySizeCode);
     }
 }

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

@@ -1,6 +1,7 @@
 import { t } from "../../../../services/i18n.js";
 import OptionsWidget from "../options_widget.js";
 import mimeTypesService from "../../../../services/mime_types.js";
+import type { OptionMap } from "../../../../../../services/options_interface.js";
 
 const TPL = `
 <div class="options-section">
@@ -19,9 +20,17 @@ const TPL = `
 
 let idCtr = 1; // global, since this can be shown in multiple dialogs
 
-function groupMimeTypesAlphabetically(ungroupedMimeTypes) {
+interface MimeType {
-    const result = {};
+    title: string;
-    ungroupedMimeTypes = ungroupedMimeTypes.toSorted((a, b) => a.title > b.title);
+    mime: string;
+    enabled: boolean;
+}
+
+type GroupedMimes = Record<string, MimeType[]>;
+
+function groupMimeTypesAlphabetically(ungroupedMimeTypes: MimeType[]) {
+    const result: GroupedMimes = {};
+    ungroupedMimeTypes = ungroupedMimeTypes.toSorted((a, b) => a.title.localeCompare(b.title));
 
     for (const mimeType of ungroupedMimeTypes) {
         const initial = mimeType.title.charAt(0).toUpperCase();
@@ -33,22 +42,16 @@ function groupMimeTypesAlphabetically(ungroupedMimeTypes) {
     return result;
 }
 
-function buildSelectionForMimeType(mimeType) {
-    const id = "code-mime-type-" + idCtr++;
-    return $("<li>")
-        .append($('<input type="checkbox" class="form-check-input">').attr("id", id).attr("data-mime-type", mimeType.mime).prop("checked", mimeType.enabled))
-        .on("change", () => this.save())
-        .append(" &nbsp; ")
-        .append($("<label>").attr("for", id).text(mimeType.title));
-}
-
 export default class CodeMimeTypesOptions extends OptionsWidget {
+
+    private $mimeTypes!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
         this.$mimeTypes = this.$widget.find(".options-mime-types");
     }
 
-    async optionsLoaded(options) {
+    async optionsLoaded(options: OptionMap) {
         this.$mimeTypes.empty();
 
         const ungroupedMimeTypes = mimeTypesService.getMimeTypes();
@@ -56,14 +59,16 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
         const groupedMimeTypes = groupMimeTypesAlphabetically(ungroupedMimeTypes);
 
         // Plain text is displayed at the top intentionally.
-        this.$mimeTypes.append(buildSelectionForMimeType.call(this, plainTextMimeType));
+        if (plainTextMimeType) {
+            this.$mimeTypes.append(this.#buildSelectionForMimeType(plainTextMimeType));
+        }
 
         for (const [initial, mimeTypes] of Object.entries(groupedMimeTypes)) {
             const $section = $("<section>");
             $section.append($("<h5>").text(initial));
 
             for (const mimeType of mimeTypes) {
-                $section.append(buildSelectionForMimeType.call(this, mimeType));
+                $section.append(this.#buildSelectionForMimeType(mimeType));
             }
 
             this.$mimeTypes.append($section);
@@ -71,12 +76,26 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
     }
 
     async save() {
-        const enabledMimeTypes = [];
+        const enabledMimeTypes: string[] = [];
 
-        this.$mimeTypes.find("input:checked").each((i, el) => enabledMimeTypes.push(this.$widget.find(el).attr("data-mime-type")));
+        this.$mimeTypes.find("input:checked").each((i, el) => {
+            const mimeType = this.$widget.find(el).attr("data-mime-type");
+            if (mimeType) {
+                enabledMimeTypes.push(mimeType);
+            }
+        });
 
         await this.updateOption("codeNotesMimeTypes", JSON.stringify(enabledMimeTypes));
 
         mimeTypesService.loadMimeTypes();
     }
+
+    #buildSelectionForMimeType(mimeType: MimeType) {
+        const id = "code-mime-type-" + idCtr++;
+        return $("<li>")
+            .append($('<input type="checkbox" class="form-check-input">').attr("id", id).attr("data-mime-type", mimeType.mime).prop("checked", mimeType.enabled))
+            .on("change", () => this.save())
+            .append(" &nbsp; ")
+            .append($("<label>").attr("for", id).text(mimeType.title));
+    }
 }

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

@@ -1,5 +1,6 @@
 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">
@@ -11,13 +12,16 @@ const TPL = `
 </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) {
+    async optionsLoaded(options: OptionMap) {
         this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled);
     }
 }

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

@@ -1,5 +1,6 @@
 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">
@@ -11,13 +12,16 @@ const TPL = `
 </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) {
+    async optionsLoaded(options: OptionMap) {
         this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled);
     }
 }

src/public/app/widgets/type_widgets/options/options_widget.ts

@@ -13,7 +13,7 @@ export default class OptionsWidget extends NoteContextAwareWidget implements Eve
         this.contentSized();
     }
 
-    async updateOption<T extends OptionNames>(name: T, value: string) {
+    async updateOption<T extends OptionNames>(name: T, value: string | number | string[] | undefined) {
         const opts = { [name]: value };
 
         await this.updateMultipleOptions(opts);

tsconfig.json

@@ -8,7 +8,7 @@
     "noImplicitAny": true,
     "resolveJsonModule": true,
     "allowJs": true,
-    "lib": ["ES2022"],
+    "lib": ["ES2023"],
     "downlevelIteration": true,
     "skipLibCheck": true,
     "esModuleInterop": true,