feat(code): adjustable tab width via attribute

This commit is contained in:
Elian Doran
2026-04-14 23:58:01 +03:00
parent fc82b9374e
commit 6a05288be4
2 changed files with 7 additions and 2 deletions

View File

@@ -8,7 +8,7 @@ import appContext, { CommandListenerData } from "../../../components/app_context
import FNote from "../../../entities/fnote";
import { t } from "../../../services/i18n";
import utils from "../../../services/utils";
import { useEditorSpacedUpdate, useKeyboardShortcuts, useLegacyImperativeHandlers, useNoteBlob, useNoteProperty, useSyncedRef, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
import { useEditorSpacedUpdate, useKeyboardShortcuts, useLegacyImperativeHandlers, useNoteBlob, useNoteLabelInt, useNoteProperty, useSyncedRef, useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
import { refToJQuerySelector } from "../../react/react_utils";
import TouchBar, { TouchBarButton } from "../../react/TouchBar";
import { CODE_THEME_DEFAULT_PREFIX as DEFAULT_PREFIX } from "../constants";
@@ -36,6 +36,7 @@ export interface EditableCodeProps extends TypeWidgetProps, Omit<CodeEditorProps
export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWidgetProps) {
const [ content, setContent ] = useState("");
const blob = useNoteBlob(note);
const [ noteTabWidth ] = useNoteLabelInt(note, "tabWidth");
useEffect(() => {
if (!blob) return;
@@ -55,6 +56,7 @@ export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWi
content={content}
mime={note.mime}
readOnly
{...(noteTabWidth != null && { indentSize: noteTabWidth })}
/>
);
}
@@ -79,6 +81,7 @@ export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentC
const editorRef = useRef<VanillaCodeMirror>(null);
const containerRef = useRef<HTMLPreElement>(null);
const [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
const [ noteTabWidth ] = useNoteLabelInt(note, "tabWidth");
const mime = useNoteProperty(note, "mime");
const spacedUpdate = useEditorSpacedUpdate({
note,
@@ -129,6 +132,7 @@ export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentC
}
}}
{...editorProps}
{...(noteTabWidth != null && { indentSize: noteTabWidth })}
/>
<TouchBar>
@@ -201,7 +205,7 @@ export function CodeEditor({ parentComponent, ntxId, containerRef: externalConta
editorRef={codeEditorRef}
containerRef={containerRef}
lineWrapping={lineWrapping ?? codeLineWrapEnabled}
indentSize={parseInt(codeNoteTabWidth) || 4}
indentSize={editorProps.indentSize ?? (parseInt(codeNoteTabWidth) || 4)}
onInitialized={() => {
if (externalContainerRef && containerRef.current) {
externalContainerRef.current = containerRef.current;

View File

@@ -69,6 +69,7 @@ type Labels = {
webViewSrc: string;
"disabled:webViewSrc": string;
readOnly: boolean;
tabWidth: number;
mapType: string;
mapRootNoteId: string;