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 6179b5bc7..b17c2bb3d 100644 --- a/apps/client/src/widgets/type_widgets/options/text_notes.tsx +++ b/apps/client/src/widgets/type_widgets/options/text_notes.tsx @@ -1,24 +1,28 @@ -import { useEffect, useMemo, useState } from "preact/hooks"; -import { t } from "../../../services/i18n"; -import FormCheckbox from "../../react/FormCheckbox"; -import FormRadioGroup from "../../react/FormRadioGroup"; -import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks"; -import OptionsSection from "./components/OptionsSection"; -import { formatDateTime, toggleBodyClass } from "../../../services/utils"; -import FormGroup from "../../react/FormGroup"; -import Column from "../../react/Column"; -import { FormSelectGroup, FormSelectWithGroups } from "../../react/FormSelect"; -import { Themes } from "@triliumnext/highlightjs"; -import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../services/syntax_highlight"; import { normalizeMimeTypeForCKEditor, type OptionNames } from "@triliumnext/commons"; -import { getHtml } from "../../react/RawHtml"; +import { Themes } from "@triliumnext/highlightjs"; import type { CSSProperties } from "preact/compat"; +import { useEffect, useMemo, useState } from "preact/hooks"; +import { Trans } from "react-i18next"; + +import { isExperimentalFeatureEnabled } from "../../../services/experimental_features"; +import { t } from "../../../services/i18n"; +import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../services/syntax_highlight"; +import { formatDateTime, toggleBodyClass } from "../../../services/utils"; +import Column from "../../react/Column"; +import FormCheckbox from "../../react/FormCheckbox"; +import FormGroup from "../../react/FormGroup"; +import FormRadioGroup from "../../react/FormRadioGroup"; +import { FormSelectGroup, FormSelectWithGroups } from "../../react/FormSelect"; import FormText from "../../react/FormText"; import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox"; -import CheckboxList from "./components/CheckboxList"; +import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks"; import KeyboardShortcut from "../../react/KeyboardShortcut"; -import { Trans } from "react-i18next"; +import { getHtml } from "../../react/RawHtml"; import AutoReadOnlySize from "./components/AutoReadOnlySize"; +import CheckboxList from "./components/CheckboxList"; +import OptionsSection from "./components/OptionsSection"; + +const isNewLayout = isExperimentalFeatureEnabled("new-layout"); export default function TextNoteSettings() { return ( @@ -32,7 +36,7 @@ export default function TextNoteSettings() { > - ) + ); } function FormattingToolbar() { @@ -65,7 +69,7 @@ function FormattingToolbar() { containerStyle={{ marginInlineStart: "1em" }} /> - ) + ); } function EditorFeatures() { @@ -119,7 +123,7 @@ function CodeBlockStyle() { for (const [ id, theme ] of Object.entries(Themes)) { const data: ThemeData = { - val: "default:" + id, + val: `default:${ id}`, title: theme.name }; @@ -177,7 +181,7 @@ function CodeBlockStyle() { - ) + ); } const SAMPLE_LANGUAGE = normalizeMimeTypeForCKEditor("application/javascript;env=frontend"); @@ -219,9 +223,9 @@ function CodeBlockPreview({ theme, wordWrap }: { theme: string, wordWrap: boolea const codeStyle = useMemo(() => { if (wordWrap) { return { whiteSpace: "pre-wrap" }; - } else { - return { whiteSpace: "pre"}; } + return { whiteSpace: "pre"}; + }, [ wordWrap ]); return ( @@ -230,7 +234,7 @@ function CodeBlockPreview({ theme, wordWrap }: { theme: string, wordWrap: boolea - ) + ); } interface ThemeData { @@ -241,7 +245,7 @@ interface ThemeData { function TableOfContent() { const [ minTocHeadings, setMinTocHeadings ] = useTriliumOption("minTocHeadings"); - return ( + return (!isNewLayout && {t("table_of_contents.description")} @@ -257,7 +261,7 @@ function TableOfContent() { {t("table_of_contents.disable_info")} {t("table_of_contents.shortcut_info")} - ) + ); } function HighlightsList() { @@ -277,13 +281,17 @@ function HighlightsList() { keyProperty="val" titleProperty="title" currentValue={highlightsList} onChange={setHighlightsList} /> - - {t("highlights_list.visibility_title")} - {t("highlights_list.visibility_description")} - {t("highlights_list.shortcut_info")} + {!isNewLayout && ( + <> + + {t("highlights_list.visibility_title")} + {t("highlights_list.visibility_description")} + {t("highlights_list.shortcut_info")} + > + )} - ) + ); } function DateTimeFormatOptions() { @@ -302,19 +310,19 @@ function DateTimeFormatOptions() { - - + - + /> + - - - {formatDateTime(new Date(), customDateTimeFormat)} - - + + + {formatDateTime(new Date(), customDateTimeFormat)} + + - ) + ); }