diff --git a/apps/client/src/widgets/type_widgets/options/text_notes.tsx b/apps/client/src/widgets/type_widgets/options/text_notes.tsx index fd9c8d933..49f39e6de 100644 --- a/apps/client/src/widgets/type_widgets/options/text_notes.tsx +++ b/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 RawHtml, { getHtml } from "../../react/RawHtml"; -import { ParentComponent } from "../../react/ReactBasicWidget"; +import { getHtml } from "../../react/RawHtml"; 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() { + ) } @@ -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[] = [ + { + 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() { - const darkThemes: ThemeData[] = []; - const lightThemes: ThemeData[] = []; +function TableOfContent() { + const [ minTocHeadings, setMinTocHeadings ] = useTriliumOption("minTocHeadings"); - for (const [ id, theme ] of Object.entries(Themes)) { - const data: ThemeData = { - val: "default:" + id, - title: theme.name - }; + return ( + + {t("table_of_contents.description")} - if (theme.name.includes("Dark")) { - darkThemes.push(data); - } else { - lightThemes.push(data); - } - } + + + - const output: FormSelectGroup[] = [ - { - 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; + {t("table_of_contents.disable_info")} + {t("table_of_contents.shortcut_info")} + + ) } \ No newline at end of file diff --git a/apps/client/src/widgets/type_widgets/options/text_notes/table_of_contents.ts b/apps/client/src/widgets/type_widgets/options/text_notes/table_of_contents.ts deleted file mode 100644 index aa20e6998..000000000 --- a/apps/client/src/widgets/type_widgets/options/text_notes/table_of_contents.ts +++ /dev/null @@ -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*/` -
-

${t("table_of_contents.title")}

- - ${t("table_of_contents.description")} - -
- -
- -

${t("table_of_contents.disable_info")}

- -

${t("table_of_contents.shortcut_info")}

-
`; - -export default class TableOfContentsOptions extends OptionsWidget { - - private $minTocHeadings!: JQuery; - - 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); - } -}