gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

refactor(client/options): deduplicate editor feature checkbox

Browse Source
This commit is contained in:
Elian Doran 2025-09-23 20:14:15 +03:00
parent 97b5ea0798
commit 71ce9c459e
No known key found for this signature in database
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
apps/client/src/widgets/type_widgets/options/text_notes.tsx
View File

@ -10,7 +10,7 @@ import Column from "../../react/Column";
import { FormSelectGroup, FormSelectWithGroups } from "../../react/FormSelect"; import { FormSelectGroup, FormSelectWithGroups } from "../../react/FormSelect";
import { Themes } from "@triliumnext/highlightjs"; import { Themes } from "@triliumnext/highlightjs";
import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../services/syntax_highlight"; import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../services/syntax_highlight";
import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons"; import { normalizeMimeTypeForCKEditor, type OptionNames } from "@triliumnext/commons";
import { getHtml } from "../../react/RawHtml"; import { getHtml } from "../../react/RawHtml";
import type { CSSProperties } from "preact/compat"; import type { CSSProperties } from "preact/compat";
import FormText from "../../react/FormText"; import FormText from "../../react/FormText";
@ -69,26 +69,25 @@ function FormattingToolbar() {
} }
function EditorFeatures() { function EditorFeatures() {
const [ textNoteEmojiCompletionEnabled, setTextNoteEmojiCompletionEnabled] = useTriliumOptionBool("textNoteEmojiCompletionEnabled");
const [ textNoteCompletionEnabled, setTextNoteCompletionEnabled ] = useTriliumOptionBool("textNoteCompletionEnabled");
return ( return (
<OptionsSection title={t("editorfeatures.title")}> <OptionsSection title={t("editorfeatures.title")}>
<FormCheckbox <EditorFeature name="emoji-completion-enabled" optionName="textNoteEmojiCompletionEnabled" label={t("editorfeatures.emoji_completion_enabled")} />
name="emoji-completion-enabled" <EditorFeature name="note-completion-enabled" optionName="textNoteCompletionEnabled" label={t("editorfeatures.note_completion_enabled")} />
label={t("editorfeatures.emoji_completion_enabled")}
currentValue={textNoteEmojiCompletionEnabled} onChange={setTextNoteEmojiCompletionEnabled}
/>
<FormCheckbox
name="note-completion-enabled"
label={t("editorfeatures.note_completion_enabled")}
currentValue={textNoteCompletionEnabled} onChange={setTextNoteCompletionEnabled}
/>
</OptionsSection> </OptionsSection>
); );
} }
function EditorFeature({ optionName, name, label }: { optionName: OptionNames, name: string, label: string }) {
const [ featureEnabled, setFeatureEnabled ] = useTriliumOptionBool(optionName);
return (
<FormCheckbox
name={name} label={label}
currentValue={featureEnabled} onChange={setFeatureEnabled}
/>
);
}
function HeadingStyle() { function HeadingStyle() {
const [ headingStyle, setHeadingStyle ] = useTriliumOption("headingStyle"); const [ headingStyle, setHeadingStyle ] = useTriliumOption("headingStyle");
@ -152,7 +151,7 @@ function CodeBlockStyle() {
const [ codeBlockWordWrap, setCodeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap"); const [ codeBlockWordWrap, setCodeBlockWordWrap ] = useTriliumOptionBool("codeBlockWordWrap");
return ( return (
<OptionsSection title={t("highlighting.title")}> <OptionsSection title={t("highlighting.title")}>
<div className="row" style={{ marginBottom: "15px" }}> <div className="row" style={{ marginBottom: "15px" }}>
<FormGroup name="theme" className="col-md-6" label={t("highlighting.color-scheme")} style={{ marginBottom: 0 }}> <FormGroup name="theme" className="col-md-6" label={t("highlighting.color-scheme")} style={{ marginBottom: 0 }}>
<FormSelectWithGroups <FormSelectWithGroups
@ -173,7 +172,7 @@ function CodeBlockStyle() {
/> />
</Column> </Column>
</div> </div>
<CodeBlockPreview theme={codeBlockTheme} wordWrap={codeBlockWordWrap} /> <CodeBlockPreview theme={codeBlockTheme} wordWrap={codeBlockWordWrap} />
</OptionsSection> </OptionsSection>
) )
@ -299,10 +298,10 @@ function DateTimeFormatOptions() {
}} }}
/> />
</FormText> </FormText>
<div className="row align-items-center"> <div className="row align-items-center">
<FormGroup name="custom-date-time-format" className="col-md-6" label={t("custom_date_time_format.format_string")}> <FormGroup name="custom-date-time-format" className="col-md-6" label={t("custom_date_time_format.format_string")}>
<FormTextBox <FormTextBox
placeholder="YYYY-MM-DD HH:mm" placeholder="YYYY-MM-DD HH:mm"
currentValue={customDateTimeFormat || "YYYY-MM-DD HH:mm"} onChange={setCustomDateTimeFormat} currentValue={customDateTimeFormat || "YYYY-MM-DD HH:mm"} onChange={setCustomDateTimeFormat}
/> />
@ -316,4 +315,4 @@ function DateTimeFormatOptions() {
</div> </div>
</OptionsSection> </OptionsSection>
) )
} }