feat(react/settings): port TOC settings

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

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import { t } from "../../../services/i18n";
 import FormCheckbox from "../../react/FormCheckbox";
 import FormRadioGroup from "../../react/FormRadioGroup";
@@ -11,10 +11,10 @@ import { FormSelectGroup, FormSelectWithGroups } from "../../react/FormSelect";
 import { Themes, type Theme } from "@triliumnext/highlightjs";
 import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../services/syntax_highlight";
 import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
-import { ComponentChildren } from "preact";
+import { getHtml } from "../../react/RawHtml";
-import RawHtml, { getHtml } from "../../react/RawHtml";
-import { ParentComponent } from "../../react/ReactBasicWidget";
 import { CSSProperties } from "preact/compat";
+import FormText from "../../react/FormText";
+import { FormTextBoxWithUnit } from "../../react/FormTextBox";
 
 export default function TextNoteSettings() {
     return (
@@ -23,6 +23,7 @@ export default function TextNoteSettings() {
             <EditorFeatures />
             <HeadingStyle />
             <CodeBlockStyle />
+            <TableOfContent />
         </>
     )
 }
@@ -104,7 +105,42 @@ function HeadingStyle() {
 }
 
 function CodeBlockStyle() {
-    const themes = useMemo(() => groupThemesByLightOrDark(), []);
+    const themes = useMemo(() => {
+        const darkThemes: ThemeData[] = [];
+        const lightThemes: ThemeData[] = [];
+
+        for (const [ id, theme ] of Object.entries(Themes)) {
+            const data: ThemeData = {
+                val: "default:" + id,
+                title: theme.name
+            };
+
+            if (theme.name.includes("Dark")) {
+                darkThemes.push(data);
+            } else {
+                lightThemes.push(data);
+            }
+        }
+
+        const output: FormSelectGroup<ThemeData>[] = [
+            {
+                title: "",
+                items: [{
+                    val: "none",
+                    title: t("code_block.theme_none")
+                }]
+            },
+            {
+                title: t("code_block.theme_group_light"),
+                items: lightThemes
+            },
+            {
+                title: t("code_block.theme_group_dark"),
+                items: darkThemes
+            }
+        ];
+        return output;
+    }, []);
     const [ codeBlockTheme, setCodeBlockTheme ] = useTriliumOption("codeBlockTheme");
     const [ codeBlockWordWrap, setCodeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
 
@@ -195,39 +231,24 @@ interface ThemeData {
     title: string;
 }
 
-function groupThemesByLightOrDark() {
+function TableOfContent() {
-    const darkThemes: ThemeData[] = [];
+    const [ minTocHeadings, setMinTocHeadings ] = useTriliumOption("minTocHeadings");
-    const lightThemes: ThemeData[] = [];
 
-    for (const [ id, theme ] of Object.entries(Themes)) {
+    return (
-        const data: ThemeData = {
+        <OptionsSection title={t("table_of_contents.title")}>
-            val: "default:" + id,
+            <FormText>{t("table_of_contents.description")}</FormText>
-            title: theme.name
-        };
 
-        if (theme.name.includes("Dark")) {
+            <FormGroup>
-            darkThemes.push(data);
+                <FormTextBoxWithUnit
-        } else {
+                    type="number"
-            lightThemes.push(data);
+                    min={0} max={999999999999999} step={1}
-        }
+                    unit={t("table_of_contents.unit")}
-    }
+                    currentValue={minTocHeadings} onChange={setMinTocHeadings}
+                />
+            </FormGroup>
 
-    const output: FormSelectGroup<ThemeData>[] = [
+            <FormText>{t("table_of_contents.disable_info")}</FormText>
-        {
+            <FormText>{t("table_of_contents.shortcut_info")}</FormText>
-            title: "",
+        </OptionsSection>
-            items: [{
+    )
-                val: "none",
-                title: t("code_block.theme_none")
-            }]
-        },
-        {
-            title: t("code_block.theme_group_light"),
-            items: lightThemes
-        },
-        {
-            title: t("code_block.theme_group_dark"),
-            items: darkThemes
-        }
-    ];
-    return output;
 }

apps/client/src/widgets/type_widgets/options/text_notes/table_of_contents.ts

@@ -1,36 +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("table_of_contents.title")}</h4>
-
-    ${t("table_of_contents.description")}
-
-    <div class="form-group">
-        <label class="input-group tn-number-unit-pair">
-            <input type="number" class="min-toc-headings form-control options-number-input options-number-input" min="0" max="9999999999999999" step="1" />
-            <span class="input-group-text">${t("table_of_contents.unit")}</span>
-        </label>
-    </div>
-
-    <p class="form-text">${t("table_of_contents.disable_info")}</p>
-
-    <p class="form-text">${t("table_of_contents.shortcut_info")}</p>
-</div>`;
-
-export default class TableOfContentsOptions extends OptionsWidget {
-
-    private $minTocHeadings!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$minTocHeadings = this.$widget.find(".min-toc-headings");
-        this.$minTocHeadings.on("change", () => this.updateOption("minTocHeadings", this.$minTocHeadings.val()));
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.$minTocHeadings.val(options.minTocHeadings);
-    }
-}