diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index c5479736f3..0f74650dd1 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2301,8 +2301,15 @@ "tab_width": "Tab Width: {{width}}", "tab_width_title": "Change tab width", "tab_width_spaces": "{{count}} spaces", - "tab_width_per_note": "Set for this note", - "tab_width_use_default": "Use default ({{width}})" + "tab_width_spaces_short": "Spaces: {{width}}", + "tab_width_tabs": "Tabs ({{width}})", + "tab_width_use_default": "Use default ({{width}})", + "tab_width_use_default_style": "Use default ({{style}})", + "tab_width_display_header": "Display width", + "tab_width_reindent_header": "Re-indent content to", + "tab_width_style_header": "Indent using", + "tab_width_style_spaces": "Spaces", + "tab_width_style_tabs": "Tabs" }, "attributes_panel": { "title": "Note Attributes" diff --git a/apps/client/src/widgets/layout/StatusBar.tsx b/apps/client/src/widgets/layout/StatusBar.tsx index c6b356ab88..0fc541a828 100644 --- a/apps/client/src/widgets/layout/StatusBar.tsx +++ b/apps/client/src/widgets/layout/StatusBar.tsx @@ -19,7 +19,7 @@ import { openInAppHelpFromUrl } from "../../services/utils"; import { formatDateTime } from "../../utils/formatters"; import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions"; import Dropdown, { DropdownProps } from "../react/Dropdown"; -import { FormDropdownDivider, FormListItem } from "../react/FormList"; +import { FormDropdownDivider, FormListHeader, FormListItem } from "../react/FormList"; import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteLabel, useNoteLabelInt, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents, useTriliumOptionInt } from "../react/hooks"; import Icon from "../react/Icon"; import LinkButton from "../react/LinkButton"; @@ -459,18 +459,15 @@ function TabWidthSwitcher({ note, noteContext }: StatusBarContext) { const effectiveTabWidth = noteTabWidth ?? globalTabWidth; const hasPerNoteOverride = noteTabWidth != null; - const changeTabWidth = async (newWidth: number | null) => { - const oldWidth = effectiveTabWidth; - const resolvedNewWidth = newWidth ?? globalTabWidth; - setNoteTabWidth(newWidth); - if (oldWidth === resolvedNewWidth) return; - + const reindentTo = async (newWidth: number) => { + if (newWidth === effectiveTabWidth) return; const editor = await noteContext.getCodeEditor(); if (!editor) return; - const reindented = reindentSpaces(editor.getText(), oldWidth, resolvedNewWidth); + const reindented = reindentSpaces(editor.getText(), effectiveTabWidth, newWidth); if (reindented !== editor.getText()) { editor.setText(reindented); } + setNoteTabWidth(newWidth); }; return (note.type === "code" && @@ -479,21 +476,32 @@ function TabWidthSwitcher({ note, noteContext }: StatusBarContext) { text={t("status_bar.tab_width", { width: effectiveTabWidth })} title={t("status_bar.tab_width_title")} > + {TAB_WIDTH_OPTIONS.map(size => ( changeTabWidth(size)} + onClick={() => setNoteTabWidth(size)} > {t("status_bar.tab_width_spaces", { count: size })} ))} - {hasPerNoteOverride && <> - - changeTabWidth(null)}> + {hasPerNoteOverride && + setNoteTabWidth(null)}> {t("status_bar.tab_width_use_default", { width: globalTabWidth })} - } + } + + + {TAB_WIDTH_OPTIONS.map(size => ( + reindentTo(size)} + > + {t("status_bar.tab_width_spaces", { count: size })} + + ))} ); }