Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-06 19:36:36 +02:00
Code Issues Packages Projects Releases Activity

fix(text): tab width is reset when component is re-rendered

Browse Source
This commit is contained in:
Elian Doran
2026-04-14 23:10:57 +03:00
parent 454c18ff0e
commit cd84e6ba08
3 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
View File

@@ -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} />
);
}

5
apps/client/src/widgets/type_widgets/text/EditableText.tsx
View File

@@ -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}

5
apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
View File

@@ -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}