From cd84e6ba0827f7f6965f82aa5ba5e6e912f80ac4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 14 Apr 2026 23:10:57 +0300
Subject: [PATCH] fix(text): tab width is reset when component is re-rendered

---
 .../src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx  | 6 +++---
 apps/client/src/widgets/type_widgets/text/EditableText.tsx  | 5 ++++-
 apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx  | 5 ++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx b/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
index 40fd8f55f6..dd4d9d02c9 100644
--- a/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
+++ b/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
@@ -20,7 +20,7 @@ export interface CKEditorApi {
     addImage(noteId: string): Promise<void>;
 }
 
-interface CKEditorWithWatchdogProps extends Pick<HTMLProps<HTMLDivElement>, "className" | "tabIndex" | "style"> {
+interface CKEditorWithWatchdogProps extends Pick<HTMLProps<HTMLDivElement>, "className" | "tabIndex"> {
     contentLanguage: string | null | undefined;
     isClassicEditor?: boolean;
     watchdogRef: RefObject<EditorWatchdog>;
@@ -35,7 +35,7 @@ interface CKEditorWithWatchdogProps extends Pick<HTMLProps<HTMLDivElement>, "cla
     containerRef?: RefObject<HTMLDivElement>;
 }
 
-export default function CKEditorWithWatchdog({ containerRef: externalContainerRef, contentLanguage, className, style, tabIndex, isClassicEditor, watchdogRef: externalWatchdogRef, watchdogConfig, onNotificationWarning, onWatchdogStateChange, onChange, onEditorInitialized, editorApi, templates }: CKEditorWithWatchdogProps) {
+export default function CKEditorWithWatchdog({ containerRef: externalContainerRef, contentLanguage, className, tabIndex, isClassicEditor, watchdogRef: externalWatchdogRef, watchdogConfig, onNotificationWarning, onWatchdogStateChange, onChange, onEditorInitialized, editorApi, templates }: CKEditorWithWatchdogProps) {
     const containerRef = useSyncedRef<HTMLDivElement>(externalContainerRef, null);
     const watchdogRef = useRef<EditorWatchdog>(null);
     const [ uiLanguage ] = useTriliumOption("locale");
@@ -232,7 +232,7 @@ export default function CKEditorWithWatchdog({ containerRef: externalContainerRe
     }, [ editor, onChange ]);
 
     return (
-        <div ref={containerRef} className={className} style={style} tabIndex={tabIndex} />
+        <div ref={containerRef} className={className} tabIndex={tabIndex} />
     );
 }
 
diff --git a/apps/client/src/widgets/type_widgets/text/EditableText.tsx b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
index e7cb326553..2caf37c661 100644
--- a/apps/client/src/widgets/type_widgets/text/EditableText.tsx
+++ b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
@@ -220,12 +220,15 @@ export default function EditableText({ note, parentComponent, ntxId, noteContext
 
     const onWatchdogStateChange = useWatchdogCrashHandling();
 
+    useEffect(() => {
+        document.body.style.setProperty("--code-block-tab-width", codeBlockTabWidth ?? "4");
+    }, [codeBlockTabWidth]);
+
     return (
         <>
             {note && !!templates && <CKEditorWithWatchdog
                 containerRef={containerRef}
                 className={`note-detail-editable-text-editor use-tn-links ${codeBlockWordWrap ? "word-wrap" : ""}`}
-                style={{ "--code-block-tab-width": codeBlockTabWidth ?? "4" }}
                 tabIndex={300}
                 contentLanguage={language}
                 isClassicEditor={isClassicEditor}
diff --git a/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
index 77cb5334e3..b99e81b19a 100644
--- a/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
+++ b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
@@ -27,6 +27,10 @@ export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetPro
     const [ codeBlockTabWidth ] = useTriliumOption("codeBlockTabWidth");
     const { isRtl } = useNoteLanguage(note);
 
+    useEffect(() => {
+        document.body.style.setProperty("--code-block-tab-width", codeBlockTabWidth ?? "4");
+    }, [codeBlockTabWidth]);
+
     // Apply necessary transforms.
     useEffect(() => {
         const container = contentRef.current;
@@ -60,7 +64,6 @@ export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetPro
             <RawHtmlBlock
                 containerRef={contentRef}
                 className={clsx("note-detail-readonly-text-content ck-content use-tn-links selectable-text", codeBlockWordWrap && "word-wrap")}
-                style={{ "--code-block-tab-width": codeBlockTabWidth ?? "4" }}
                 tabindex={100}
                 dir={isRtl ? "rtl" : "ltr"}
                 html={blob?.content}